/* ============================================================
   High Street — Premium Cannabis
   A gilded apothecary. Gold on brown, warm throughout, no cool
   accent. Atmosphere from light (blurred amber pools, vignette),
   never from a second hue. Every value below traces to a token.
   ============================================================ */

:root {
  /* --- Palette (brief §3). Warm brown-to-gold only. --- */
  --ink:        #14100C;   /* page base — near-black, warm */
  --walnut:     #2A1F16;   /* raised surfaces, frames, section shifts */
  --leather:    #4A3524;   /* mid-tone borders, inset panels, value step */
  --gilt:       #E5B028;   /* primary accent — rules, small caps, ornament */
  --gaslight:   #FFE6A6;   /* highlight & glow only — lamp bloom, catch-light */
  --parchment:  #F0E6D2;   /* body text on dark; inverted section ground */

  /* Temperature variation within the browns so the field never flattens:
     a cooler grey-brown for large grounds, a red-brown for accents. */
  --ink-cool:   #15110D;
  --walnut-red: #33241A;

  /* Derived surfaces / rules — every value below is a token or a color-mix
     of the six palette tokens, so nothing in component CSS is a raw hex. */
  --hairline:      color-mix(in srgb, var(--gilt) 28%, transparent); /* gilt hairline */
  --hairline-soft: color-mix(in srgb, var(--gilt) 14%, transparent);
  --parchment-dim:  color-mix(in srgb, var(--parchment) 72%, transparent);
  --parchment-faint: color-mix(in srgb, var(--parchment) 42%, transparent);

  /* A few genuinely new shades in the same warm range, named once here. */
  --umber:         #1B140D;   /* mid-brown between ink and walnut (hero) */
  --shadow:        #0A0704;   /* deeper than ink — vignettes, overlays */
  --parchment-lit: #FBF5E7;   /* lit card ground on the inverted section */
  --gilt-deep:     #8A6412;   /* the leaf gradient's dark end */
  --gilt-brass:    #B8871C;   /* the leaf gradient's warm mid-brass */
  --gilt-shadow:   #6E4E12;   /* darker gilt for text on parchment */
  --ink-on-parch:  #211812;                    /* text on inverted ground */
  --ink-on-parch-dim: color-mix(in srgb, var(--ink-on-parch) 68%, transparent);

  /* Gold as metal: a shallow-angle leaf gradient, exactly how the highlight
     travels on the physical sign. Use for gilt SURFACES, never flat fill.
     Now with more stops so it reads as struck metal, not flat mustard. */
  --leaf: linear-gradient(105deg, #6E4E12 0%, #8A6412 18%, #E5B028 44%, #FFE6A6 56%, #C99A24 74%, #8A6412 100%);
  --leaf-soft: linear-gradient(120deg, #7A5712, #C99A24 40%, #FFE6A6 55%, #A6791A 100%);

  /* Material textures. Real photographed leather, walnut, parchment and gold
     leaf, blended into surfaces so the browns read as material, not flat fills.
     --tex-grain stays a grayscale turbulence for the whole-page tooth. */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-leather:  image-set(url("../images/tex-leather.webp") type("image/webp"), url("../images/tex-leather.jpg") type("image/jpeg"));
  --tex-wood:     image-set(url("../images/tex-wood.webp") type("image/webp"), url("../images/tex-wood.jpg") type("image/jpeg"));
  --tex-paper:    image-set(url("../images/tex-paper.webp") type("image/webp"), url("../images/tex-paper.jpg") type("image/jpeg"));
  --tex-goldleaf: image-set(url("../images/tex-goldleaf.webp") type("image/webp"), url("../images/tex-goldleaf.jpg") type("image/jpeg"));
  --tex-damask:   image-set(url("../images/tex-damask.webp") type("image/webp"), url("../images/tex-damask.jpg") type("image/jpeg"));
  --tex-plaster:  image-set(url("../images/tex-plaster.webp") type("image/webp"), url("../images/tex-plaster.jpg") type("image/jpeg"));
  --tex-marble-franchise: image-set(url("../images/tex-marble-franchise.webp") type("image/webp"), url("../images/tex-marble-franchise.jpg") type("image/jpeg"));
  --tex-footer:   image-set(url("../images/tex-footer.webp") type("image/webp"), url("../images/tex-footer.jpg") type("image/jpeg"));
  --tex-brass:    image-set(url("../images/tex-brass.webp") type("image/webp"), url("../images/tex-brass.jpg") type("image/jpeg"));
  --tex-ledger:   image-set(url("../images/tex-ledger.webp") type("image/webp"), url("../images/tex-ledger.jpg") type("image/jpeg"));
  --tex-marble:   image-set(url("../images/tex-marble.webp") type("image/webp"), url("../images/tex-marble.jpg") type("image/jpeg"));
  --tex-tooled:   image-set(url("../images/tex-tooled-leather.webp") type("image/webp"), url("../images/tex-tooled-leather.jpg") type("image/jpeg"));
  --tex-velvet:   image-set(url("../images/tex-velvet.webp") type("image/webp"), url("../images/tex-velvet.jpg") type("image/jpeg"));

  /* Warm shadow ink for layered, realistic depth. */
  --cast: color-mix(in srgb, var(--shadow) 66%, transparent);
  --cast-soft: color-mix(in srgb, var(--shadow) 34%, transparent);
  --edge-light: color-mix(in srgb, var(--gaslight) 22%, transparent);

  /* Fonts (brief §3). Body never Cinzel; display never below 28px. */
  --font-display: 'Cinzel Decorative', Georgia, serif;
  --font-head:    'Cinzel', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --wrap: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Vertical rhythm — 120–160px between sections on desktop. */
  --section-pad: clamp(72px, 11vw, 156px);
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px; /* fixed nav offset for anchor jumps */
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--parchment);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

::selection { background: var(--gilt); color: var(--ink); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* Visible gold focus ring everywhere (brief §5 accessibility). */
:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 300;
  background: var(--walnut); color: var(--parchment);
  padding: 0.6rem 1rem; border: 1px solid var(--gilt);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   Type primitives
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;          /* ~12px */
  font-weight: 500;
  color: var(--gilt);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--gilt);
  display: inline-block;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--gilt);
  display: inline-block;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

h2.section-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--parchment);
}
h2.section-title .em {
  /* bright struck-gold for a single word on dark ground — kept legible
     (no dark start, no engraving shadow that would muddy it). */
  background: linear-gradient(100deg, var(--gilt-brass), var(--gilt) 32%, var(--gaslight) 60%, var(--gilt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--parchment);
}

.lede {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--parchment-dim);
  max-width: 60ch;
}

/* ============================================================
   Ornament system — two devices only (brief §3)
   1. Fleuron   → section divider, centred, hairline rule to either side
   2. Scrollwork arch → frames the hero + membership panel
   ============================================================ */

.ornament-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.fleuron-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
  max-width: 520px;
  color: var(--gilt);
}
.fleuron-divider::before,
.fleuron-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline));
}
.fleuron-divider::after { transform: scaleX(-1); }
.fleuron-divider .fleuron { width: 58px; height: 22px; flex: none; fill: currentColor; }

.arch-frame {
  color: var(--gilt);
  width: clamp(180px, 40vw, 300px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  padding: 1.05rem 0;
  transition: padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
  /* Carved tooled-leather fascia — same treatment as the ordering-page header:
     real leather texture under a warm dark gradient, an inset top edge-light,
     a soft drop shadow, and a full-width gilt hairline (::after) instead of a
     flat border. */
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(26, 19, 12, 0.82) 0%, rgba(12, 9, 6, 0.93) 100%),
    var(--tex-tooled);
  background-size: cover, 360px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 230, 166, 0.06), 0 12px 34px rgba(10, 7, 4, 0.55);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(229, 176, 40, 0.5) 12%, rgba(255, 230, 166, 0.85) 50%, rgba(229, 176, 40, 0.5) 88%, transparent);
  opacity: 0.9;
  pointer-events: none;
}
.nav.scrolled {
  padding: 0.5rem 0;
}
.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-logo .mark { width: 30px; height: 30px; }
.nav-logo .wordmark {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--parchment);
}
.nav-center { display: flex; gap: 2.1rem; }
.nav-link {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--parchment-dim);
  transition: color 0.25s var(--ease);
  position: relative;
  padding: 0.2rem 0;
}
.nav-link:hover, .nav-link.active { color: var(--gilt); }
.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-cta {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--leaf);
  padding: 0.7rem 1.15rem;
  border-radius: 2px;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}
.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.burger { display: none; width: 30px; height: 22px; position: relative; }
.burger span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--gilt); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 4px; }
.burger span:nth-child(2) { bottom: 4px; }
.burger.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.active span:nth-child(2) { bottom: 10px; transform: rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 115;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem clamp(1.5rem, 8vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.mobile-nav.active { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 8vw, 2.2rem);
  color: var(--parchment);
  padding: 0.55rem 0;
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--hairline-soft);
  letter-spacing: 0.03em;
}
.mobile-nav a .num {
  font-family: var(--font-body);
  font-size: 0.8rem; letter-spacing: 0.2em; color: var(--gilt);
}
.mobile-nav-foot {
  margin-top: 2.5rem;
  font-size: 0.85rem; color: var(--parchment-dim);
}
.mobile-nav-foot a { font-family: var(--font-body); font-size: 0.85rem; color: var(--gilt); border: none; display: inline; padding: 0; }

/* ============================================================
   Light-pools — the atmosphere. Blurred amber radials placed where
   the lamps hang. Barely-perceptible flicker (motion section).
   ============================================================ */

.light-pool {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  background: radial-gradient(circle, var(--gaslight) 0%, color-mix(in srgb, var(--gilt) 25%, transparent) 35%, transparent 70%);
  opacity: 0.5;
  z-index: 0;
  will-change: opacity;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem clamp(1.25rem, 5vw, 3rem) 5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink); /* solid warm ground so the page never flashes white */
}
/* The wallpaper: a gaslit Victorian street. The source photograph is blue at
   dusk; sepia + warm grade pulls the cool cast out entirely so it reads as
   gold light in a brown dark, matching the sign. */
.hero-media { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  filter: sepia(0.66) saturate(1.18) brightness(0.58) contrast(1.04) hue-rotate(-8deg);
}
/* Warm wash + top/bottom darkening toward ink, laid over the photo. The
   radials sit where the street lamps hang so the light reads as lamplight. */
.hero-scene {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 4%, color-mix(in srgb, var(--gaslight) 12%, transparent), transparent 55%),
    radial-gradient(70% 50% at 22% 60%, color-mix(in srgb, var(--gilt) 18%, transparent), transparent 60%),
    radial-gradient(70% 50% at 80% 62%, color-mix(in srgb, var(--gilt) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--umber) 55%, transparent) 30%, color-mix(in srgb, var(--umber) 40%, transparent) 55%, var(--ink) 100%);
}
/* A second warm veil pinned behind the wordmark so the copy always has ground. */
.hero-scene::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 46% at 50% 52%, color-mix(in srgb, var(--ink) 72%, transparent), transparent 75%);
}
/* Faint "wet cobble" reflection band along the bottom. */
.hero-scene::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gilt) 6%, transparent) 70%, color-mix(in srgb, var(--gaslight) 5%, transparent));
  mask-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px);
  -webkit-mask-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px);
  opacity: 0.5;
}
/* Vignette — darkness where the lamps don't reach. */
.hero-vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 40%, color-mix(in srgb, var(--shadow) 55%, transparent) 100%);
}
.hero .light-pool-a { width: 480px; height: 480px; top: -120px; left: 6%; }
.hero .light-pool-b { width: 420px; height: 420px; bottom: -140px; right: 8%; opacity: 0.4; }

.hero-arch { margin: 0 auto 1.5rem; }
.hero-content { position: relative; z-index: 1; max-width: 780px; }

.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  /* Gilded signage: lit from above, even left-to-right, so the resting state
     always looks finished (never like a shimmer stopped halfway). The moving
     catch-light lives on ::after and clears itself after one pass. */
  position: relative;
  background: linear-gradient(180deg, var(--gaslight) 0%, var(--gilt) 46%, var(--gilt-brass) 74%, var(--gilt-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* One highlight swept across the letters on load, then gone. */
.hero-wordmark::after {
  content: "High Street";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, var(--gaslight) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: catch-light 1.5s var(--ease) 0.4s 1 forwards;
}
.hero-subrule {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: clamp(0.62rem, 1.6vw, 0.82rem);
  color: var(--gilt);
  margin-bottom: 1.6rem;
  padding-left: 0.42em; /* balance the tracking */
}
.hero-prop {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--parchment);
  letter-spacing: 0.03em;
  margin: 0 auto 2.4rem;
  max-width: 30ch;
}
.hero-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 0.6rem;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-gold { background: var(--leaf); color: var(--ink); }
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--hairline); color: var(--parchment); }
.btn-ghost:hover { border-color: var(--gilt); color: var(--gilt); transform: translateY(-2px); }

.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.6rem; color: var(--parchment-faint);
  z-index: 1;
}

/* ============================================================
   Sections — one clearly-scoped padding class (brief §5)
   ============================================================ */

.section { position: relative; padding: var(--section-pad) 0; overflow: hidden; }
.section-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head .lede { margin: 1.2rem auto 0; text-align: center; }

/* ------------------------------------------------------------
   Chapter headers — the site read as a bound merchant's ledger.
   A hung Roman numeral in the margin marks reading order (I–VI),
   which is real structure here, not decoration. Asymmetric by
   design: no centred stacks.
   ------------------------------------------------------------ */
.chapter {
  display: block;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(2.75rem, 6vw, 4.75rem);
}
/* Roman numerals retired — headers are now centred and self-contained. */
.chapter-index { display: none; }
.chapter-head .eyebrow { justify-content: center; margin-bottom: 1.15rem; }
.chapter-head .eyebrow::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--gilt);
  display: inline-block;
}
.chapter-head .section-title { max-width: 22ch; margin-left: auto; margin-right: auto; }
.chapter-head .lede { margin: 1.2rem auto 0; }
/* On the parchment section the numeral goes to leather. */
.stores .chapter-index { color: var(--gilt-shadow); border-top-color: color-mix(in srgb, var(--leather) 45%, transparent); }

/* Drop cap opening the house — a bound-book flourish, used exactly once. */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--gilt);
}

/* Est. mark — small engraved credential in the utility face. */
.estmark {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.62rem;
  color: var(--parchment-faint);
}
.estmark .amp { color: var(--gilt); }
.footer-brand .estmark { margin-top: 1.15rem; }
.footer-fleuron { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); max-width: 680px; }

/* ------------------------------------------------------------
   Engraved paper grain — a faint tactile tooth over the whole
   page so the warm grounds never read as flat digital fills.
   The single biggest thing separating "printed" from "rendered".
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Section-shift ground so browns don't flatten across the scroll. */
.section--walnut { background: var(--walnut); }
.section--walnut::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--hairline-soft);
}

/* ============================================================
   The house — asymmetric two-column
   ============================================================ */

.house-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.house-text .eyebrow { margin-bottom: 1.1rem; }
.house-text h2 { margin-bottom: 1.4rem; }
.house-text p { margin-bottom: 1.1rem; color: var(--parchment-dim); }
.house-text p:last-of-type { margin-bottom: 1.8rem; }
.house-plainline {
  color: var(--parchment);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.house-link {
  color: var(--gilt);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.house-link:hover { border-color: var(--gilt); }

/* Paired "images" — composed lit-window panels (photography is a launch
   blocker, so these stand in as gilt-lettered plates). */
.house-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
}
.house-panel { min-height: 190px; }
.house-panel:first-child { grid-row: span 2; }

/* ============================================================
   The lit window — the signature component (brief §3)
   walnut frame · hairline gilt inner border · warmer lit ground ·
   gilt lettering · light-pool bleeding onto the pavement below.
   ============================================================ */

.window {
  position: relative;
  /* a carved walnut frame: leather grain over a top-lit brown, so the frame
     itself has a material and a light source. */
  background-image: var(--tex-wood), linear-gradient(155deg, var(--walnut-red), var(--walnut) 58%, var(--umber));
  background-blend-mode: soft-light, normal;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--leather);
  border-radius: 3px;
  padding: 7px; /* the depth of the frame around the glass */
  isolation: isolate;
  /* raised frame: top edge catches light, drop shadow pools on the pavement */
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    inset 0 -1px 2px var(--cast-soft),
    0 22px 42px -20px var(--cast),
    0 6px 14px -10px var(--cast-soft);
}
.window::before {
  /* gilt inner border, seated below the frame lip so it reads as inset glass */
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow) 30%, transparent);
}
.window::after {
  /* light-pool bleeding onto the pavement below the frame */
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -26px; height: 46px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gaslight) 30%, transparent), color-mix(in srgb, var(--gilt) 10%, transparent) 45%, transparent 72%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0.85;
  will-change: opacity;
}
.window-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  /* the glass: a lit interior that recedes into the dark at its base, set
     below the frame lip with an inset shadow so it reads as real depth. */
  background-image:
    radial-gradient(130% 80% at 50% -10%, color-mix(in srgb, var(--gaslight) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--leather) 42%, transparent) 0%, color-mix(in srgb, var(--walnut) 26%, transparent) 45%, color-mix(in srgb, var(--ink) 55%, transparent) 100%);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 2px 12px color-mix(in srgb, var(--shadow) 50%, transparent),
    inset 0 -14px 26px -14px color-mix(in srgb, var(--shadow) 55%, transparent);
}
/* A diagonal glint raked across the glass — reads as a lit shop window,
   not a flat card — that clears on hover/focus so the content comes through. */
.window-haze {
  position: absolute; inset: 6px;
  background:
    linear-gradient(118deg, transparent 26%, color-mix(in srgb, var(--gaslight) 14%, transparent) 42%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--gaslight) 6%, transparent), transparent 40%);
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s var(--ease);
  border-radius: 2px;
}
.window:hover .window-haze,
.window:focus-within .window-haze { opacity: 0.28; }

.window-lettering {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.03em;
  color: var(--gilt);
  margin-bottom: 0.4rem;
  padding-bottom: 0.7rem;
  position: relative;
}
/* Gilt shelf-rule under the signwriting, like a counter edge. */
.window-lettering::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; height: 1px; background: var(--gilt);
}
.window-tag {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.64rem; color: var(--gaslight);
  margin-bottom: 0.9rem;
}
.window-body { color: var(--parchment-dim); font-size: 0.95rem; }

/* ============================================================
   What we carry — window grid
   ============================================================ */

.range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ============================================================
   How collection works — numbered sequence, large Didone numerals
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.step { position: relative; padding-top: 0.5rem; }
.step-num {
  /* the earned numeral — set large as a design feature */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  background: var(--leaf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.9;
  margin-bottom: 0.75rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.step p { color: var(--parchment-dim); font-size: 0.95rem; }
.step::after {
  content: "";
  position: absolute; top: 2.2rem; right: -1.25rem;
  width: 8px; height: 8px;
  border-top: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  transform: rotate(45deg);
}
.step:last-child::after { display: none; }

/* ============================================================
   The register — membership panel, arch-framed
   ============================================================ */

.register-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.register-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--ink);
  border: 1px solid var(--leather);
  border-radius: 3px;
}
.register-frame::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid var(--hairline);
  border-radius: 2px; pointer-events: none;
}
.register-arch { margin-bottom: 1rem; }
.register-frame .plate-word {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem);
  background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.3rem;
}
.register-frame .plate-sub {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.66rem; color: var(--gilt);
}
.register-text h2 { margin-bottom: 1.3rem; }
.register-ledger { margin: 1.6rem 0 2rem; }
.register-ledger li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--parchment-dim);
}
.register-ledger li:first-child { border-top: 1px solid var(--hairline-soft); }
.register-ledger .rl-mark {
  font-family: var(--font-head); color: var(--gilt); font-size: 0.85rem;
  letter-spacing: 0.15em;
}
.register-ledger strong { color: var(--parchment); font-weight: 500; }

/* ============================================================
   Locations — inverted parchment ground (legibility over mood)
   ============================================================ */

.stores.section { background: var(--parchment); color: var(--ink-on-parch); }
.stores .eyebrow { color: var(--leather); }
.stores .eyebrow::before, .stores .eyebrow::after { background: var(--leather); }
.stores h2.section-title { color: var(--ink-on-parch); }
.stores h2.section-title .em {
  background: linear-gradient(105deg, var(--gilt-shadow), var(--gilt-brass) 55%, var(--gilt-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stores .lede { color: var(--ink-on-parch-dim); }
.stores .fleuron-divider { color: var(--leather); }
.stores .fleuron-divider::before, .stores .fleuron-divider::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--leather) 40%, transparent));
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
/* On parchment the shop-window is rendered as a brass-framed address plate. */
.store-plate {
  position: relative;
  background: var(--parchment-lit);
  border: 1px solid var(--leather);
  border-radius: 3px;
  padding: 1.75rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
}
.store-plate::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid color-mix(in srgb, var(--gilt-deep) 40%, transparent);
  border-radius: 2px; pointer-events: none;
}
.store-plate h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.24rem; color: var(--ink-on-parch);
  margin-bottom: 0.9rem; letter-spacing: 0.02em;
}
.store-plate .store-hours {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.68rem; color: var(--leather);
  margin-bottom: 0.75rem;
}
.store-plate .store-addr { color: var(--ink-on-parch-dim); font-size: 0.92rem; margin-bottom: 0.4rem; }
.store-plate .store-phone { color: var(--ink-on-parch); font-size: 0.92rem; margin-bottom: 1.1rem; }
.store-plate .store-phone a { border-bottom: 1px solid color-mix(in srgb, var(--leather) 30%, transparent); }
.store-plate .store-links { margin-top: auto; display: flex; gap: 1.25rem; }
.store-plate .store-maps {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 500;
  color: var(--leather);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.store-plate .store-maps:hover { color: var(--gilt-deep); }
.store-plate .store-maps .arrow { transition: transform 0.25s var(--ease); }
.store-plate .store-maps:hover .arrow { transform: translateX(3px); }
.stores-more {
  text-align: center; margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.72rem; color: var(--leather);
}

/* Compact "opening soon" roster of upcoming High Street houses. */
.stores-soon .stores-more { margin-bottom: 1.5rem; }
.soon-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 68rem;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.soon-item {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gilt) 5%, transparent);
}
.soon-name {
  font-family: var(--font-display);
  font-size: 0.95rem; color: var(--gilt-shadow); font-weight: 600;
}
.soon-area {
  font-family: var(--font-body);
  font-size: 0.78rem; color: var(--ink-on-parch-dim);
}

/* ============================================================
   Contact
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.contact-block { margin-bottom: 1.8rem; }
.contact-block h3 {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.7rem; color: var(--gilt);
  margin-bottom: 0.5rem;
}
.contact-block a { color: var(--parchment); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.contact-block a:hover { color: var(--gilt); }
.contact-block p { color: var(--parchment-dim); font-size: 0.95rem; }

.contact-form {
  background: var(--walnut);
  border: 1px solid var(--leather);
  border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.contact-form h3 { font-size: 1.3rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.64rem; color: var(--gilt);
  margin-bottom: 0.45rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--parchment);
  background: var(--ink);
  border: 1px solid var(--leather);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.25s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--parchment-faint); }
.contact-form select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gilt) 50%), linear-gradient(135deg, var(--gilt) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--gilt); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-msg { font-size: 0.85rem; min-height: 1.2em; margin: 0.4rem 0 0.8rem; }
.form-msg[data-kind="error"] { color: var(--gilt); }
.form-msg[data-kind="ok"] { color: var(--gaslight); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background-color: var(--ink);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 30%, transparent), color-mix(in srgb, var(--ink) 52%, transparent)), var(--tex-footer);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-top: 1px solid var(--hairline-soft);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-brand { max-width: 34ch; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.footer-brand .mark { width: 28px; height: 28px; }
.footer-brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.06em; color: var(--parchment); }
.footer-brand p { color: var(--parchment-dim); font-size: 0.9rem; }
.footer-brand .brand-motto { color: var(--gilt); font-family: var(--font-head); font-size: 0.95rem; margin-top: 0.9rem; letter-spacing: 0.02em; }
.footer-col h4 {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gilt); margin-bottom: 1rem;
}
.footer-col a, .footer-col p {
  display: block; color: var(--parchment-dim); font-size: 0.9rem;
  padding: 0.32rem 0; transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: var(--gilt); }
.footer-legal {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
}
.footer-legal p { font-size: 0.8rem; color: var(--parchment-faint); }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { font-size: 0.8rem; color: var(--parchment-dim); }
.footer-links a:hover { color: var(--gilt); }
.footer-compliance {
  margin-top: 1.2rem; font-size: 0.78rem; color: var(--parchment-faint);
  max-width: 80ch;
}

/* ============================================================
   Legal pages (privacy / terms stubs)
   ============================================================ */

.legal { padding: clamp(7rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.legal .wrap { max-width: 760px; }
.legal .back {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--gilt);
  display: inline-block; margin-bottom: 2rem;
}
.legal h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: 0.02em; margin-bottom: 0.6rem;
}
.legal .updated { color: var(--parchment-faint); font-size: 0.8rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  color: var(--gilt); margin: 2.2rem 0 0.8rem; letter-spacing: 0.02em;
}
.legal p { color: var(--parchment-dim); margin-bottom: 1rem; }
.legal a.inline { color: var(--gilt); border-bottom: 1px solid var(--hairline); }
.legal .stub-note {
  background: var(--walnut); border: 1px solid var(--leather); border-radius: 3px;
  padding: 1.1rem 1.3rem; font-size: 0.88rem; color: var(--parchment-dim); margin-bottom: 2rem;
}

/* ============================================================
   Age gate — brass plate on the fogged street
   ============================================================ */

.age-gate {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--shadow) 90%, transparent);
  backdrop-filter: blur(10px) saturate(0.7);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
}
.age-gate[hidden] { display: none; }
.age-gate::before {
  /* fogged-street glow behind the plate */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 46%, color-mix(in srgb, var(--gilt) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.brass-plate {
  position: relative;
  max-width: 440px; width: 100%;
  text-align: center;
  background: linear-gradient(180deg, var(--walnut-red), var(--ink));
  border: 1px solid var(--leather);
  border-radius: 3px;
  padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--shadow) 75%, transparent);
}
.brass-plate::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid var(--hairline); border-radius: 2px; pointer-events: none;
}
.brass-plate .mark { width: 46px; height: 46px; margin: 0 auto 1.1rem; }
.brass-plate .plate-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.4rem;
}
.brass-plate .plate-eyebrow {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.64rem; color: var(--gilt); margin-bottom: 1.4rem;
}
.brass-plate p { color: var(--parchment-dim); font-size: 0.95rem; margin-bottom: 1.6rem; }
.brass-plate .plate-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.brass-plate .btn { justify-content: center; }
.brass-plate .decline {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--parchment-faint);
  padding: 0.5rem;
}
.brass-plate .decline:hover { color: var(--parchment); }
.brass-plate .plate-legal { font-size: 0.72rem; color: var(--parchment-faint); margin: 1.3rem 0 0; }

/* Lock scroll while the gate is up. */
body.gate-open { overflow: hidden; }

/* ============================================================
   Motion — restrained, atmospheric, all reduced-motion aware
   ============================================================ */

/* 4. Scroll reveal: 12px rise, 500ms, ease-out */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.reveal.visible { opacity: 1; transform: none; }

/* 1. Gaslamp flicker — barely perceptible, long irregular loop (0.92→1.0) */
@keyframes gaslamp {
  0%, 100% { opacity: 0.92; }
  12% { opacity: 0.98; }
  23% { opacity: 0.9; }
  41% { opacity: 1; }
  58% { opacity: 0.94; }
  67% { opacity: 0.99; }
  81% { opacity: 0.91; }
  93% { opacity: 0.97; }
}
.light-pool, .window::after { animation: gaslamp 7.3s ease-in-out infinite; }
.window:nth-child(2n)::after { animation-duration: 8.1s; animation-delay: -2.4s; }
.window:nth-child(3n)::after { animation-duration: 9.4s; animation-delay: -4.1s; }
.hero .light-pool-b { animation-duration: 8.7s; animation-delay: -3s; }

/* 2. Gold catch-light — one slow highlight sweep, then it clears (the shine
   band ends off-screen so only the base gradient remains). */
@keyframes catch-light { from { background-position: 150% 0; } to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .light-pool, .window::after, .hero .light-pool-b { animation: none; }
  .hero-wordmark::after { animation: none; display: none; }
  * { transition-duration: 0.001ms !important; }
}

/* ============================================================
   Material & depth (skeuomorphic pass) — real texture, layered
   shadows, and engraved gold, so nothing reads as a flat fill.
   Every colour here is a token or a color-mix of one; the
   textures are grayscale turbulence, not colour.
   ============================================================ */

/* Deeper, more visible page tooth. */
body::after { opacity: 0.07; }

/* Engraved gold — a carved lower edge + lifted upper edge so gilt letterforms
   sit in the surface like real signwriting rather than floating on it. */
.hero-wordmark,
.step-num,
.plate-word,
.window-lettering,
.register-frame .plate-word,
.brass-plate .plate-title,
.shop-placeholder h1 {
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--shadow) 60%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow) 32%, transparent);
}

/* Medium display words on dark grounds get a brighter strike so the carve
   reads as bright gold, not muddy bronze. */
.plate-word,
.register-frame .plate-word,
.brass-plate .plate-title {
  background: linear-gradient(100deg, var(--gilt-brass), var(--gilt) 30%, var(--gaslight) 58%, var(--gilt-brass));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Struck-metal buttons — real gold leaf over the strike, top catch-light,
   recessed lower lip, cast shadow. */
.btn-gold, .nav-cta {
  background-image: var(--tex-goldleaf), var(--leaf);
  background-blend-mode: soft-light, normal;
  background-size: cover, auto;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gaslight) 60%, transparent),
    inset 0 -2px 3px color-mix(in srgb, var(--shadow) 34%, transparent),
    0 9px 20px -9px color-mix(in srgb, var(--shadow) 60%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--gaslight) 34%, transparent);
}
.btn-gold:hover, .nav-cta:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gaslight) 72%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--shadow) 30%, transparent),
    0 14px 28px -9px color-mix(in srgb, var(--shadow) 55%, transparent);
}
.btn-ghost {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gaslight) 10%, transparent), 0 8px 20px -14px var(--cast);
}

/* Section walls wear a tone-on-tone Victorian damask so the big fields read as
   papered walls, not flat fills. Low-contrast by design; type stays legible. */
.section--walnut {
  background-color: var(--walnut);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--walnut) 70%, transparent), color-mix(in srgb, var(--walnut) 83%, transparent)),
    var(--tex-damask);
  background-blend-mode: normal, normal;
  background-size: cover, 600px 600px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
/* The darker base sections get the same paper over ink, a shade deeper. */
#range {
  background-color: var(--ink);
  background-image: var(--tex-damask), radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--leather) 18%, transparent), transparent 60%);
  background-blend-mode: soft-light, normal;
  background-size: 480px 480px, auto;
  background-repeat: repeat, no-repeat;
}
/* The Register sits against a deep velvet wall. */
#membership {
  background-color: var(--ink);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 34%, transparent), color-mix(in srgb, var(--ink) 30%, transparent)), var(--tex-velvet);
  background-blend-mode: normal, normal;
  background-size: cover, cover;
  background-position: center, center;
}

/* Contact form + register frame: real tooled leather, raised off the page. */
.contact-form, .register-frame {
  background-color: var(--walnut);
  background-image: var(--tex-leather), linear-gradient(158deg, color-mix(in srgb, var(--walnut-red) 78%, transparent), color-mix(in srgb, var(--ink) 40%, transparent) 78%);
  background-blend-mode: soft-light, normal;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 28px 52px -26px var(--cast),
    0 8px 18px -12px var(--cast-soft);
}
/* The Register plate is an antique gold-tooled ledger cover; the image carries
   its own gilt border, so drop the drawn one and seat the title in the centre. */
.register-frame {
  background-color: var(--umber);
  background-image: var(--tex-tooled);
  background-blend-mode: normal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  /* match the square book-cover art so the gilt border is never cropped */
  aspect-ratio: 1 / 1;
  justify-content: center;
  padding: clamp(2.5rem, 9vw, 5.5rem);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--shadow) 78%, transparent);
}
.register-frame::before { display: none; }
.register-frame .plate-sub { color: var(--gaslight); }

/* Inputs pressed into the leather. */
.contact-form input,
.contact-form select,
.contact-form textarea {
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--shadow) 45%, transparent);
}

/* The age gate is a real brass plate — the brief's brass plate on the fogged
   street. Darkened so the gilt lettering keeps its contrast on the metal. */
.brass-plate {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 68%, transparent), color-mix(in srgb, var(--ink) 78%, transparent)), var(--tex-brass);
  background-blend-mode: normal, normal;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 40px 90px -30px color-mix(in srgb, var(--shadow) 80%, transparent);
}

/* Inverted section is a great ledger page — ruled and foxed — listing the houses. */
.stores.section {
  background-color: var(--parchment);
  background-image: var(--tex-ledger);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.store-plate {
  background-color: var(--parchment-lit);
  background-image: var(--tex-paper);
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--parchment) 85%, transparent),
    0 20px 40px -22px color-mix(in srgb, var(--leather) 55%, transparent),
    0 5px 12px -8px color-mix(in srgb, var(--leather) 40%, transparent);
}
.store-plate h3 {
  text-shadow: 0 1px 0 color-mix(in srgb, var(--parchment) 90%, transparent);
}

/* Nav lifts off the page once it gains its ground. */
.nav.scrolled { box-shadow: inset 0 1px 0 rgba(255, 230, 166, 0.06), 0 14px 34px -10px color-mix(in srgb, var(--shadow) 70%, transparent); }

/* Windows that hold a real photograph — a view through the lit glass.
   The photo sits behind the gilt lettering under a warm scrim tuned so the
   type stays legible while the interior still reads. */
.window--photo .window-inner {
  position: relative;
  z-index: 2;
  background: none;
  box-shadow: none;
  min-height: clamp(260px, 34vw, 420px);
  justify-content: flex-start;
}
.window-photo {
  position: absolute; inset: 7px; z-index: 0;
  width: calc(100% - 14px); height: calc(100% - 14px);
  object-fit: cover; border-radius: 2px;
  filter: saturate(1.04) contrast(1.03);
}
.window--photo .window-scrim {
  position: absolute; inset: 7px; z-index: 1; pointer-events: none; border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--ink) 42%, transparent) 30%,
    color-mix(in srgb, var(--ink) 52%, transparent) 66%,
    color-mix(in srgb, var(--ink) 88%, transparent) 100%);
}
.window--photo .window-haze { z-index: 3; }

/* A mounted photograph on the parchment — the establishing shot of a store. */
.stores-banner {
  position: relative;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--leather);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 6px color-mix(in srgb, var(--parchment-lit) 55%, transparent),
    0 26px 48px -26px color-mix(in srgb, var(--leather) 60%, transparent);
}
.stores-banner img {
  width: 100%; height: clamp(200px, 30vw, 360px);
  object-fit: cover; object-position: 50% 60%; display: block;
}
.stores-banner figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem clamp(1.25rem, 3vw, 2rem) 1rem;
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.66rem; color: var(--gaslight);
  background: linear-gradient(0deg, color-mix(in srgb, var(--shadow) 80%, transparent), transparent);
}

/* Order-flow parity handled in order.css. */

/* ============================================================
   Responsive — down to 360px
   ============================================================ */

@media (max-width: 900px) {
  .nav-center { display: none; }
  .nav-cta { display: none; }
  .burger { display: block; }
  .house-grid, .register-grid, .contact-grid { grid-template-columns: 1fr; }
  .register-grid .register-frame { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .step::after { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Display type steps down ~40%; fog/flicker reduced on small screens. */
  .hero-wordmark { font-size: clamp(2.2rem, 12vw, 3rem); }
  .steps { grid-template-columns: 1fr; }
  .house-panels { grid-template-columns: 1fr; }
  .house-panel:first-child { grid-row: auto; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .light-pool { filter: blur(40px); opacity: 0.34; }
  .window::after { opacity: 0.5; }
}

@media (max-width: 380px) {
  .wrap, .nav-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Brand logo image (real emblem) + budtender feature
   Added when the client supplied the vector-style logo and the
   two budtender portraits. The logo is a black-ground circular
   medallion, so it sits cleanly on the dark nav/footer/age gate.
   ============================================================ */

.nav-logo-img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--hairline);
}
/* Hero: the real logo medallion replaces the text wordmark. */
.hero-logo { margin: 0 auto 1.9rem; line-height: 0; }
.hero-logo img {
  width: clamp(220px, 40vw, 360px);
  height: auto; aspect-ratio: 1;
  margin: 0 auto; display: block;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 16px 60px var(--cast), 0 0 0 1px var(--hairline);
}
.footer-logo-img {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--hairline);
}
.plate-logo {
  width: clamp(96px, 20vw, 128px); height: auto; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; display: block;
  margin: 0 auto 0.75rem;
  box-shadow: 0 6px 30px var(--cast), 0 0 0 1px var(--hairline);
}

/* Budtender feature band — self-contained, centred (no .chapter grid). */
.budtender-head { text-align: center; max-width: 720px; margin: 0 auto; }
.budtender-head .section-title { margin: 0.9rem auto 0; max-width: 22ch; }
.budtender-head .lede { margin: 1.1rem auto 0; }
.budtender-band {
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}
@media (max-width: 560px) { .budtender-band { grid-template-columns: 1fr; max-width: 380px; } }
.budtender-card {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--hairline);
  background: var(--shadow);
  box-shadow: 0 18px 50px var(--cast);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.budtender-card img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.budtender-card:hover {
  transform: translateY(-6px);
  border-color: var(--hairline);
  box-shadow: 0 26px 70px var(--cast), 0 0 0 1px var(--gilt);
}

/* ============================================================
   Homepage revisions: nicer collection steps, franchise section,
   and the PotAround partner tag on location cards.
   ============================================================ */

/* --- How Collection Works: numbered cards --- */
.step {
  background: linear-gradient(180deg, var(--umber), var(--ink-cool));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.5rem 1.35rem 1.4rem;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gilt) 34%, transparent);
  box-shadow: 0 18px 44px var(--cast);
}
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 600;
  background: var(--leaf); color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  -webkit-background-clip: border-box; background-clip: border-box;
  box-shadow: 0 6px 18px var(--cast), inset 0 1px 0 rgba(255, 245, 220, 0.45);
  margin-bottom: 1rem; opacity: 1;
}
.step::after { display: none; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --- Franchise ("Own a High Street") --- */
.franchise-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
@media (max-width: 820px) { .franchise-grid { grid-template-columns: 1fr; } }
.franchise-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.franchise-num { border-left: 2px solid var(--hairline); padding-left: 1rem; }
.franchise-num strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.1;
  background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.franchise-num span { display: block; margin-top: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--parchment-dim); }
.franchise-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.franchise-contact { color: var(--parchment-dim); font-size: 0.88rem; }
.franchise-offer {
  background: linear-gradient(180deg, var(--walnut), var(--umber));
  border: 1px solid var(--hairline); border-radius: 16px; padding: 1.75rem;
}
.franchise-offer h3 { font-family: var(--font-head); color: var(--gilt); font-size: 1.05rem; letter-spacing: 0.02em; margin-bottom: 1rem; }
.franchise-list { display: flex; flex-direction: column; gap: 0.7rem; }
.franchise-list li { position: relative; padding-left: 1.6rem; color: var(--parchment-dim); font-size: 0.95rem; line-height: 1.5; }
.franchise-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; background: var(--leaf); border-radius: 2px; transform: rotate(45deg);
}

/* --- PotAround partner tag on location cards (parchment ground) --- */
.store-brand-tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-body); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--parchment-lit); background: var(--ink-on-parch);
  padding: 0.28rem 0.65rem; border-radius: 40px; margin-bottom: 0.8rem;
}

/* ============================================================
   Section backgrounds added when the client supplied new textures.
   Budtenders → warm plaster wall; Franchise → dark gold-veined marble.
   (The House/Collection/Contact damask now uses the new crisp file via
   the --tex-damask token, replacing the old smudged one.)
   ============================================================ */
.budtender-section {
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 72%, transparent), color-mix(in srgb, var(--ink) 84%, transparent)),
    var(--tex-damask);
  background-blend-mode: normal, normal;
  background-size: cover, 600px 600px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
.franchise {
  background-color: var(--ink);
  background-image: var(--tex-marble-franchise);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   PotAround partner store cards — a green look (PotAround's brand
   colour) so they read as clearly PotAround, not High Street, on
   the parchment Locations ground. The paper texture stays; only the
   base colour + accents go green.
   ============================================================ */
.store-plate--partner {
  background-color: #d9e4c6;                 /* pale green paper (tex-paper multiplies over it) */
  border-color: #5f8a4a;                     /* green frame */
}
.store-plate--partner::before {
  border-color: color-mix(in srgb, #2d6a2d 48%, transparent);   /* green inner rule */
}
.store-plate--partner h3 { color: #1f4a1f; }                    /* deep green name */
.store-plate--partner .store-hours { color: #4a6b39; }
.store-plate--partner .store-addr { color: #385230; }
.store-plate--partner .store-phone { color: #26421d; }
.store-plate--partner .store-phone a { border-bottom-color: color-mix(in srgb, #2d6a2d 40%, transparent); }
.store-plate--partner .store-maps { color: #2d6a2d; }
.store-plate--partner .store-maps:hover { color: #163a16; }
.store-plate--partner .store-brand-tag {
  color: #eef7e6;
  background: #2d6a2d;                        /* solid PotAround green pill */
}

/* House section: panels removed — the writing stands on its own, centred. */
.house-grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }

.budtender-band--single { grid-template-columns: 1fr; max-width: 400px; }

/* ============================================================
   Mobile performance
   ============================================================ */
@media (max-width: 768px) {
  /* The main source of scroll jank on phones: continuously-animated blurred
     light-pools + the gaslamp glow. Freeze them and lighten the blur. */
  .light-pool,
  .window::after,
  .hero .light-pool-a,
  .hero .light-pool-b { animation: none !important; }
  .light-pool { filter: blur(26px); opacity: 0.24; will-change: auto; }
  .nav { will-change: auto; }
  /* backdrop-filter blur is very costly on mobile GPUs. */
  .age-gate { backdrop-filter: none; -webkit-backdrop-filter: none; }
}