/* ============================================================
   HIGHLAND MAYFIELDS — kd brand pack  (status: extracted from client dump)
   Heraldic British-aristocratic luxury x biophilic nature-romance.
   Rose-copper winged-lion crest + espresso/gold/cream + Didone serif.
   Single source of truth — every screen routes through these tokens (kd Law 2).
   ============================================================ */

/* ---- Fonts: ALL-SANS system (matches the refined brochure — no serifs).
        Jost = geometric Futura/Avenir-class: thin tracked caps (eyebrows / "HIGHLAND" /
        giant numerals), heavy weight for display, light ITALIC for poetry lines.
        Google Fonts; cached by SW offline. ---- */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

:root{
  /* ---------- Layer 2 · Brand palette (sampled hex from the refined brochure system) ----------
     Two-lane colour discipline (as the print system): COPPER = text / eyebrows / wordmark,
     GOLD = ornament / icon strokes / dividers / active glow. CREAM = readable titles & body
     on dark (kiosk legibility — copper text alone is too dim backlit). */
  --hm-espresso:    #221a18;   /* PRIMARY dark ground (sampled) */
  --hm-espresso-2:  #1e1816;   /* deepest warm near-black (vignette, intro) */
  --hm-forest:      #0a0d06;   /* villa-tier forest-black (leaf-vein premium signal) */
  --hm-oxblood:     #3d120f;   /* personalised / special-edition ground */
  --hm-wine:        #3d120f;   /* legacy alias → oxblood */

  --hm-gold:        #ac8c55;   /* metallic ORNAMENT accent: lattice, line-art, icon strokes, dividers */
  --hm-gold-soft:   #b89c6d;   /* foil highlight */
  --hm-gold-bright: #cfb88d;   /* champagne sheen peak */

  --hm-copper-text: #7d5342;   /* terracotta-copper — eyebrows / labels / wordmark accent text */
  --hm-copper-t2:   #866556;   /* softer copper text */
  --hm-copper:      #de9b8a;   /* crest rose-copper (the winged-lion MARK colour — keep) */
  --hm-copper-hi:   #f9bbac;   /* crest specular highlight */

  --hm-cream:       #f5f1eb;   /* warm paper / readable ink on dark */
  --hm-cream-2:     #e9e4d6;   /* warm panel */
  --hm-slate:       #3c3a39;   /* wordmark charcoal (light-bg use) */
  --hm-slate-soft:  #6b6663;   /* secondary text on light */

  /* twilight / blue-hour grade (kept for render-based section screens) */
  --hm-dusk-1:      #384568;
  --hm-dusk-2:      #b4978f;
  --hm-night:       #1e2a54;

  /* ---------- Layer 3 · Semantic roles ---------- */
  --bg:             var(--hm-espresso);
  --bg-deep:        var(--hm-espresso-2);
  --ink:            var(--hm-cream);
  --ink-dim:        rgba(245,241,235,.60);
  --accent:         var(--hm-gold);          /* ornament lane */
  --accent-soft:    var(--hm-gold-soft);
  --accent-text:    var(--hm-copper-text);   /* text lane */
  --hairline:       rgba(172,140,85,.40);    /* gold hairline grid */
  --hairline-soft:  rgba(172,140,85,.16);
  --glass:          rgba(34,26,24,.42);      /* espresso glass over render */
  --glass-cream:    rgba(245,241,235,.07);

  /* ---------- Type scale (fluid, clamp — never crops on smaller screens) ---------- */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-label:   'Jost', system-ui, sans-serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --t-hero:   clamp(2.6rem, 6.2vw, 6.5rem);   /* MAYFIELDS-scale display */
  --t-title:  clamp(1.7rem, 3.4vw, 3.4rem);
  --t-sub:    clamp(1.05rem, 1.6vw, 1.6rem);
  --t-label:  clamp(.62rem, .82vw, .9rem);    /* letter-spaced eyebrow */
  --t-body:   clamp(.95rem, 1.15vw, 1.22rem);
  --t-micro:  clamp(.58rem, .7vw, .72rem);

  --track-label: .34em;   /* Jost eyebrow tracking */
  --track-wide:  .18em;

  /* ---------- Motion DNA (their logo+walkthrough cadence) ---------- */
  --ease-settle: cubic-bezier(.16,1,.3,1);    /* deep ease-out, weighted */
  --ease-soft:   cubic-bezier(.4,0,.2,1);
  --dur-reveal:  1.1s;
  --dur-slow:    1.6s;
  --dur-quick:   .42s;

  /* ---------- Spacing / radius ---------- */
  --pad-stage:  clamp(1.5rem, 4vw, 4.5rem);
  --r-tile:     2px;        /* sharp, editorial — luxury is restrained */
  --r-pill:     999px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ background:var(--hm-espresso-2);   /* kills iOS bottom safe-area strip (no min-height:100dvh) */
  overscroll-behavior:none;              /* Tab S10+/Android: no pull-to-refresh or rubber-band on touch-drag */
  -webkit-text-size-adjust:100%; text-size-adjust:100%; }  /* Samsung/iOS: never auto-inflate text */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;   /* kill the grey tap-flash on Android touch */
}

/* eyebrow / label */
.hm-eyebrow{
  font-family:var(--font-label); font-weight:400;
  font-size:var(--t-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent);
}
.hm-display{ font-family:var(--font-display); font-weight:300; line-height:1.04; letter-spacing:.012em; }
.hm-italic{ font-family:var(--font-body); font-style:italic; font-weight:300; color:var(--ink-dim); }

/* giant thin chapter numeral (brochure "1" / "2" markers) */
.hm-num{ font-family:var(--font-display); font-weight:200; line-height:.8;
  font-size:clamp(3rem,9vw,8rem); color:var(--accent-text); }

/* gold hairline rule with center diamond (brochure divider motif) */
.hm-rule{ position:relative; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.7; }
.hm-rule::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px;
  transform:translate(-50%,-50%) rotate(45deg); background:var(--accent); }

/* ---- PLUMB-TICK divider (signature motif): a hairline with a short vertical
        tick dropping from its centre — an architect's plumb / centre-line. ---- */
.hm-plumb{ position:relative; width:clamp(56px,7vw,120px); height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.8; }
.hm-plumb::after{ content:""; position:absolute; left:50%; top:0; width:1px; height:11px;
  transform:translateX(-50%); background:var(--accent); }

/* paired short vertical ticks that flank an eyebrow at the top of a block */
.hm-ticks{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(2rem,16vw,9rem); }
.hm-ticks span{ width:1px; height:clamp(26px,4vh,46px); background:linear-gradient(to bottom,var(--accent),transparent); opacity:.6; }

/* ---- Quatrefoil / interlocking-circle lattice — the signature ornament.
        Reusable as a tiling background-image (set colour via currentColor isn't
        possible in data-URI, so the gold is baked; use opacity to tone it down). ---- */
:root{
  --hm-lattice:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ac8c55' stroke-width='1'><rect x='0' y='0' width='120' height='120'/><circle cx='0' cy='0' r='60'/><circle cx='120' cy='0' r='60'/><circle cx='0' cy='120' r='60'/><circle cx='120' cy='120' r='60'/><circle cx='60' cy='60' r='60'/><circle cx='60' cy='0' r='60'/><circle cx='0' cy='60' r='60'/><circle cx='120' cy='60' r='60'/><circle cx='60' cy='120' r='60'/></g></svg>");
}

/* foil sheen sweep — apply to .hm-foil; runs once via animation */
@keyframes hm-sheen{ 0%{background-position:-130% 0;} 100%{background-position:230% 0;} }
.hm-foil{
  background-image:linear-gradient(105deg,transparent 38%,var(--hm-gold-bright) 50%,transparent 62%);
  background-size:230% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
}

/* enter button — rich, restrained, gold hairline + foil edge (matches logo richness) */
.hm-enter{
  --b: var(--accent);
  position:relative; display:inline-flex; align-items:center; gap:1.1em;
  font-family:var(--font-label); font-weight:400; font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--hm-cream); background:transparent; border:0;
  padding:1.15em 2.6em; cursor:pointer; border-radius:var(--r-pill);
  -webkit-tap-highlight-color:transparent;
}
.hm-enter::before{ content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; background:linear-gradient(120deg,var(--hm-gold-soft),rgba(216,189,131,.25),var(--hm-gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; }
.hm-enter::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 140% at 50% 120%, rgba(222,155,138,.18), transparent 60%);
  opacity:0; transition:opacity .5s var(--ease-soft); }
@media (hover:hover){ .hm-enter:hover::after{ opacity:1; } .hm-enter:hover{ color:#fff; } }
.hm-enter:active{ transform:translateY(1px); }

/* utility */
.hm-stage{ position:fixed; inset:0; }   /* full-bleed safe stage; content centers, never top-cuts */
.no-record{ }  /* chrome hidden during video recording exports */
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; transition-duration:.05s !important; } }