/* ==========================================================================
   HOUSE OF RUBYJ — theme stylesheet

   Generated by build_theme.py from the static build. Edit the static pages or
   assets/css/style.css and re-run that script rather than editing this file,
   or the next regeneration will overwrite you.

   One sheet loads on every page, because in WordPress any of these sections
   can be dropped onto any page as a pattern.
   ========================================================================== */

/* ------------------------------------------------------------------ FONTS */
@font-face{font-family:'Tenor Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tenor-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/montserrat-latin-200-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');}

/* ==========================================================================
   HOUSE OF RUBYJ — Shared Design System
   Aesthetic: Option 3B "Organic Premium" / Modern Minimalist
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --ruby:        #A24857;   /* Dusty Ruby   — accent, never a background wash */
  --ruby-deep:   #7C3441;   /* pressed / hover states */
  --ruby-mist:   #C98D97;   /* dividers, disabled ruby */
  --moss:        #71797E;   /* Stone Moss   — body text at full strength */
  --moss-deep:   #3F4649;   /* headings, high contrast */
  --moss-mist:   #A8AEB1;   /* captions, meta */
  --parchment:   #F5F5DC;   /* Parchment / Linen — page ground */
  --parchment-2: #FAFAF0;   /* raised cards */
  --parchment-3: #EDEDD6;   /* recessed panels, image wells */
  --ink:         #241F20;   /* near-black for the rare hard stop */
  --gold:        #C9A227;   /* Golden Clematis — used sparingly, motifs only */

  /* Type */
  --font-display: 'Tenor Sans', 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'Cormorant Garamond', 'Lora', Georgia, serif;
  --font-meta:    'Montserrat', 'Helvetica Neue', sans-serif;

  /* Type scale — fluid, 1.333 major fourth at desktop */
  --t-hero:  clamp(2.6rem, 7vw, 5.6rem);
  --t-h1:    clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h2:    clamp(1.6rem, 3vw, 2.35rem);
  --t-h3:    clamp(1.2rem, 2vw, 1.5rem);
  --t-body:  clamp(1.05rem, 1.25vw, 1.22rem);
  --t-small: 0.92rem;
  --t-meta:  0.72rem;

  /* Space — 8pt base */
  --s-1: 0.5rem;  --s-2: 1rem;    --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem;  --s-7: 7rem;    --s-8: 10rem;

  --measure: 62ch;
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --max: 1440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --border-hair: 1px solid rgba(113, 121, 126, 0.22);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
body {
  background: var(--parchment);
  color: var(--moss);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--moss-deep);
  line-height: 1.14;
  letter-spacing: 0.06em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: 0.09em; }

p + p { margin-top: var(--s-2); }

.lede {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.68;
  color: var(--moss);
  font-style: italic;
}

.measure { max-width: var(--measure); }
.center  { margin-inline: auto; text-align: center; }

/* Eyebrow / kicker — the wide-kerned sans that ties the whole system together */
.eyebrow {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ruby);
  display: block;
  margin-bottom: var(--s-2);
}
.eyebrow--moss { color: var(--moss-mist); }

.meta {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-mist);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 980px; }
.wrap--tight  { max-width: 760px; }

section { position: relative; }
.section    { padding-block: var(--s-7); }
.section--sm { padding-block: var(--s-6); }
.section--lg { padding-block: var(--s-8); }
.section--parchment2 { background: var(--parchment-2); }
.section--recessed   { background: var(--parchment-3); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Hairline rule with a clematis dot at centre */
.rule {
  display: flex; align-items: center; gap: var(--s-2);
  margin-block: var(--s-4);
}
.rule::before, .rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(113,121,126,0.3), transparent);
}
.rule::after { background: linear-gradient(90deg, rgba(113,121,126,0.3), transparent); }
.rule::before { background: linear-gradient(90deg, transparent, rgba(113,121,126,0.3)); }
.rule i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ruby); opacity: 0.55; flex: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--moss);
  color: var(--moss-deep);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.55s var(--ease), border-color 0.55s var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: var(--moss-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--parchment); border-color: var(--moss-deep); }
.btn:hover::after { transform: scaleX(1); }

.btn--ruby { border-color: var(--ruby); color: var(--ruby); }
.btn--ruby::after { background: var(--ruby); }
.btn--ruby:hover { color: var(--parchment); border-color: var(--ruby); }

.btn--light { border-color: rgba(245,245,220,0.55); color: var(--parchment); }
.btn--light::after { background: var(--parchment); }
.btn--light:hover { color: var(--moss-deep); border-color: var(--parchment); }

.btn--bare {
  border: 0; padding: 0.4rem 0;
  border-bottom: 1px solid var(--ruby-mist);
  color: var(--ruby);
}
.btn--bare::after { display: none; }
.btn--bare:hover { color: var(--ruby-deep); border-color: var(--ruby); }

:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--gutter);
  transition: background 0.6s var(--ease), padding 0.6s var(--ease),
              box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
/* The frosted bar lives on a pseudo-element, not on .nav itself. A
   backdrop-filter creates a containing block for fixed-position descendants,
   which would trap the mobile menu inside the height of the bar. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(245, 245, 220, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(113,121,126,0.16);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.nav--solid::before { opacity: 1; }
.nav--solid { padding-block: var(--s-2); }
/* On the portal, nav starts transparent over the video */
.nav--over { color: var(--parchment); }
.nav--over .nav__logo, .nav--over .nav__link { color: var(--parchment); }
.nav--over.nav--solid .nav__logo,
.nav--over.nav--solid .nav__link { color: var(--moss-deep); }

/* The mark. Two cuts of the same artwork — ruby-on-light and reversed-out —
   swapped depending on whether the bar is floating over imagery or not. */
.nav__logo {
  display: flex; align-items: center; gap: 0.85rem;
  line-height: 1;
  transition: transform 0.6s var(--ease);
}
.nav__logo .mark {
  width: clamp(38px, 4vw, 50px); height: auto; flex: none;
  transition: width 0.6s var(--ease);
}
.nav--solid .nav__logo .mark { width: clamp(34px, 3.4vw, 42px); }
/* The wordmark is set in live type rather than bitmapped, so it stays crisp
   at nav size and can invert cleanly. Tracking matches the master artwork. */
.nav__logo .word {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ruby);
  padding-left: 0.15em;
  transition: color 0.6s var(--ease);
}
.nav__logo .on-dark { display: none; }
.nav--over .nav__logo .on-dark { display: block; }
.nav--over .nav__logo .on-light { display: none; }
.nav--over .nav__logo .word { color: rgba(245,245,220,0.95); }
.nav--over.nav--solid .nav__logo .on-dark { display: none; }
.nav--over.nav--solid .nav__logo .on-light { display: block; }
.nav--over.nav--solid .nav__logo .word { color: var(--ruby); }
@media (max-width: 560px) { .nav__logo .word { display: none; } }

.nav__links { display: flex; gap: clamp(1.2rem, 2.6vw, 2.6rem); align-items: center; }
.nav__link {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--moss);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.4s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--ruby); }
.nav--over .nav__link[aria-current="page"] { color: var(--parchment); }
.nav--over.nav--solid .nav__link[aria-current="page"] { color: var(--ruby); }

.nav__toggle { display: none; width: 30px; height: 20px; position: relative; z-index: 120; }
.nav__toggle span {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: currentColor; transition: all 0.4s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 3px; }
.nav__toggle span:nth-child(2) { top: 11px; }
.nav__toggle span:nth-child(3) { top: 19px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav__toggle { display: block; color: var(--moss-deep); }
  .nav--over .nav__toggle { color: var(--parchment); }
  .nav--over.nav--solid .nav__toggle, .nav.is-open .nav__toggle { color: var(--moss-deep); }
  .nav__links {
    position: fixed; inset: 0;
    background: var(--parchment);
    flex-direction: column; justify-content: center;
    gap: var(--s-4);
    transform: translateY(-100%);
    transition: transform 0.7s var(--ease);
    z-index: 110;
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  /* keep the mark visible above the open menu */
  .nav.is-open .nav__logo { position: relative; z-index: 120; }
  .nav.is-open .nav__logo .on-dark { display: none; }
  .nav.is-open .nav__logo .on-light { display: block; }
  .nav.is-open .nav__logo .word { color: var(--ruby); }
  .nav__links .nav__link {
    font-family: var(--font-display);
    font-size: 1.35rem; letter-spacing: 0.2em;
    color: var(--moss-deep) !important;
    text-transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--moss-deep);
  color: rgba(245,245,220,0.72);
  padding-block: var(--s-6) var(--s-5);
  font-size: var(--t-small);
}
.footer h4 {
  color: var(--parchment);
  font-size: var(--t-meta);
  font-family: var(--font-meta);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.footer a { transition: color 0.4s var(--ease); }
.footer a:hover { color: var(--parchment); }
.footer li + li { margin-top: 0.5rem; }
.footer__brand { margin-bottom: var(--s-3); display: block; }
.footer__brand img { width: 108px; height: auto; opacity: 0.92; }
.footer__bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245,245,220,0.14);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-meta);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,245,220,0.45);
}

/* --------------------------------------------------------------------------
   8. IMAGE WELLS (placeholder art)
   -------------------------------------------------------------------------- */
.well {
  position: relative;
  overflow: hidden;
  background: var(--parchment-3);
  isolation: isolate;
}
.well > svg, .well > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.well--4x5 { aspect-ratio: 4 / 5; }
.well--1x1 { aspect-ratio: 1 / 1; }
.well--3x2 { aspect-ratio: 3 / 2; }
.well--16x9 { aspect-ratio: 16 / 9; }
.well--2x3 { aspect-ratio: 2 / 3; }

/* The little tag that says "a real photograph goes here" */
.well__slot {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  font-family: var(--font-meta);
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(36,31,32,0.55);
  color: rgba(245,245,220,0.9);
  padding: 0.3rem 0.6rem;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: 5;
}
body.show-slots .well__slot { opacity: 1; }

/* A stronger version, for imagery that must not ship as-is — a generated face
   standing in for a real named woman is the one placeholder on this site that
   would actually cost something if it slipped through. */
.well__slot--warn { background: rgba(162,72,87,0.92); }
body.hor-editor .well__slot--warn { opacity: 1; }

/* --------------------------------------------------------------------------
   9. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
.reveal[data-delay="4"] { transition-delay: 0.48s; }
.reveal[data-delay="5"] { transition-delay: 0.6s; }

/* --------------------------------------------------------------------------
   10. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.pagehead {
  padding-top: calc(var(--s-8) + 2rem);
  padding-bottom: var(--s-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,0.09), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(162,72,87,0.06), transparent 60%);
  pointer-events: none;
}
.pagehead > * { position: relative; }
.pagehead h1 { font-size: var(--t-h1); margin-bottom: var(--s-3); }
.pagehead .lede { max-width: 58ch; margin-inline: auto; }

/* Decorative clematis vine that sits behind page headers */
.vine-deco {
  position: absolute;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   11. UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-4); }
.tar { text-align: right; }
.tac { text-align: center; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.ruby { color: var(--ruby); }
.pull-quote {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--moss-deep);
  max-width: 24ch;
}
.pull-quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ruby);
}

/* Slot-view toggle chip, bottom-left of every page */
.slotchip {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  font-family: var(--font-meta);
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: rgba(63,70,73,0.9);
  color: rgba(245,245,220,0.85);
  padding: 0.55rem 0.9rem;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  transition: background 0.4s var(--ease);
}
.slotchip:hover { background: var(--ruby); }
@media (max-width: 620px) { .slotchip { display: none; } }


/* ==========================================================================
   SECTIONS — THE AVALON PORTAL & HOMEPAGE
   ========================================================================== */
/* ============================ THE AVALON PORTAL ============================ */
/* Ten photographs of one view. The visitor's own clock chooses which one, and
   only that one is ever downloaded — the rest are never requested unless the
   hour rolls over while somebody is sitting on the page. */
.portal {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #1B1F26;
  --scrim-top: 0.34;
  --scrim-bottom: 0.72;
  --grade: transparent;
}

/* The plates. Each is absolutely stacked; the live one is at full opacity and
   the outgoing one fades under it. */
.portal__plate { position: absolute; inset: 0; }
.portal__plate picture {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}
.portal__plate picture.is-live { opacity: 1; }
.portal__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  transform: scale(1.04);
  will-change: transform;
}

/* A very light wash — the photographs already carry their own light, so this
   only nudges the whole frame towards the brand rather than lighting it. */
.portal__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--grade);
  mix-blend-mode: soft-light;
  transition: background 1.6s var(--ease-soft);
}

/* Scrim — a bottom gradient for the copy, plus a soft pool behind the lockup
   so the type survives the bright plates as well as the dark ones. */
.portal__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 62% at 50% 72%, rgba(16,18,22,.52) 0%, rgba(16,18,22,0) 70%),
    linear-gradient(180deg,
      rgba(16,18,22,var(--scrim-top)) 0%,
      rgba(16,18,22,0) 26%,
      rgba(16,18,22,0) 42%,
      rgba(16,18,22,var(--scrim-bottom)) 100%);
  transition: background 1.6s var(--ease-soft);
}

.portal__inner {
  position: relative; z-index: 5;
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(4.5rem, 11vh, 8rem);
  text-align: center;
}
.portal__copy { max-width: 46rem; margin-inline: auto; }

.portal__mark { margin: 0; }
.portal__mark img {
  width: clamp(200px, 24vw, 330px);
  margin-inline: auto;
  filter: drop-shadow(0 4px 30px rgba(12,14,18,0.7));
  animation: markIn 2.2s var(--ease) both;
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.portal__mark em {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: 0.04em;
  color: rgba(245,245,220,0.94);
  margin-top: var(--s-3);
  text-shadow: 0 1px 20px rgba(12,14,18,0.85);
}
.portal__sub {
  color: rgba(245,245,220,0.9);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-style: italic;
  max-width: 44ch;
  margin: var(--s-3) auto 0;
  text-shadow: 0 1px 22px rgba(12,14,18,0.9);
}
.portal__cta {
  margin-top: var(--s-4);
  display: flex; gap: var(--s-2);
  flex-wrap: wrap; justify-content: center;
}

/* The clock read-out — the site telling you it noticed the hour */
.portal__clock {
  position: absolute; z-index: 6;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--s-3) + 0.4rem);
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-meta);
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,245,220,0.66);
  white-space: nowrap;
}
.portal__clock i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px var(--gold);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.portal__scroll { display: none; }

@media (max-width: 820px) {
  /* The pines and the terraced ridge both matter, so hold the middle of the
     frame rather than drifting to one side. */
  .portal__plate img { object-position: 50% 44%; }
  .portal__inner { padding-bottom: calc(var(--s-6) + 1.6rem); }
  .portal__mark img { width: min(62vw, 250px); }
  .portal__cta { gap: var(--s-1); }
  .portal__cta .btn { flex: 1 1 44%; justify-content: center; padding-inline: 1rem; }
  .portal__clock { font-size: 0.52rem; letter-spacing: 0.16em; }
}

/* ============================ INTRO ============================ */
.intro { text-align: center; overflow: hidden; }
/* Clematis vine climbing the left margin — decoration, never behind copy */
.intro__vine {
  position: absolute; bottom: -6%; left: -3%;
  width: clamp(110px, 13vw, 210px); opacity: .30;
  transform: rotate(-6deg);
}
@media (max-width: 1100px) { .intro__vine { display: none; } }

/* ============================ THREE DOORS ============================ */
.door { display: block; position: relative; overflow: hidden; }
.door .well { transition: transform 1.4s var(--ease); }
.door:hover .well { transform: scale(1.05); }
.door__body { padding-top: var(--s-3); }
.door__body h3 { margin-bottom: 0.6rem; }
.door__body p { font-size: 1.02rem; line-height: 1.7; }
.door__go {
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--font-meta); font-size: var(--t-meta);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ruby);
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .4s var(--ease);
}
.door:hover .door__go { border-color: var(--ruby); }

/* ============================ FIGURES BAND ============================ */
.figures { text-align: center; }
.figures .num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  color: var(--ruby); letter-spacing: 0.04em; display: block; line-height: 1;
}
.figures .lbl { margin-top: var(--s-2); }

/* ============================ QUOTE BAND ============================ */
.quoteband {
  background: var(--moss-deep);
  color: var(--parchment);
  position: relative; overflow: hidden;
}
.quoteband::before {
  content: ''; position: absolute; inset: 0;
  background: url('../img/stitch-band.jpg') center/cover no-repeat;
  opacity: 0.07; filter: grayscale(1) brightness(3);
}
.quoteband .pull-quote { color: var(--parchment); max-width: 30ch; margin-inline: auto; }
.quoteband .pull-quote cite { color: var(--ruby-mist); }

/* ============================ SPLIT FEATURE ============================ */
.feature__art { position: relative; }
.feature__art .badge {
  position: absolute; right: -18px; bottom: -18px;
  background: var(--parchment); padding: var(--s-2) var(--s-3);
  border: var(--border-hair); max-width: 220px;
}
.feature__art .badge .meta { display: block; margin-bottom: 4px; }
.feature__art .badge strong {
  font-family: var(--font-display); font-weight: 400; color: var(--moss-deep);
  font-size: 1.05rem; letter-spacing: .06em;
}
@media (max-width: 860px) { .feature__art .badge { right: 8px; bottom: -14px; } }

/* ============================ NEWSLETTER ============================ */
.signup { display: flex; gap: 0; border-bottom: 1px solid var(--moss-mist); max-width: 460px; }
.signup input {
  flex: 1; border: 0; background: transparent; padding: 0.9rem 0;
  font-family: var(--font-body); font-size: 1.05rem; color: var(--moss-deep);
}
.signup input::placeholder { color: var(--moss-mist); font-style: italic; }
.signup input:focus { outline: none; }
.signup button {
  font-family: var(--font-meta); font-size: var(--t-meta);
  letter-spacing: .24em; text-transform: uppercase; color: var(--ruby);
  padding: 0 0 0 var(--s-2);
}


/* ==========================================================================
   SECTIONS — OUR STORY
   ========================================================================== */
/* ===================== OPENING ===================== */
.opening { position: relative; overflow: hidden; }
/* fixed height rather than a ratio, so the plate always spans the full width */
.opening .well { aspect-ratio: auto; height: 62vh; min-height: 380px; }
.opening__over {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(36,31,32,.55));
  padding: var(--s-6) var(--gutter) var(--s-4);
}
.opening__over p {
  max-width: 40ch; color: rgba(245,245,220,.94); font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.6;
  text-shadow: 0 1px 20px rgba(36,31,32,.5);
}

/* ===================== TIMELINE ===================== */
.timeline { position: relative; max-width: 780px; margin-inline: auto; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(162,72,87,.4) 12%,
              rgba(162,72,87,.4) 88%, transparent);
}
.tl { position: relative; padding-left: 3.2rem; padding-bottom: var(--s-5); }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--parchment); border: 1px solid var(--ruby-mist);
}
.tl::after {
  content: ''; position: absolute; left: 5px; top: calc(0.55rem + 5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--ruby);
}
.tl .yr {
  font-family: var(--font-meta); font-size: 0.64rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ruby); display: block; margin-bottom: 0.35rem;
}
.tl h3 { margin-bottom: 0.5rem; }

/* ===================== SOULFUL HOME ===================== */
.soul { background: var(--parchment-2); }
.tip {
  border-bottom: var(--border-hair);
}
.tip:first-child { border-top: var(--border-hair); }
.tip__btn {
  width: 100%; display: grid; grid-template-columns: 3rem 1fr 1.5rem;
  gap: var(--s-2); align-items: baseline; text-align: left;
  padding: var(--s-3) 0;
}
.tip__n {
  font-family: var(--font-display); font-size: 1rem; color: var(--ruby-mist);
  letter-spacing: .12em;
}
.tip__t {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  color: var(--moss-deep); letter-spacing: .05em; line-height: 1.3;
}
.tip__x { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.tip__x::before, .tip__x::after {
  content: ''; position: absolute; background: var(--ruby);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.tip__x::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.tip__x::after  { left: 6.5px; top: 0; width: 1px; height: 14px; }
.tip.is-open .tip__x::after { transform: rotate(90deg); opacity: 0; }
.tip__body {
  overflow: hidden; max-height: 0;
  transition: max-height .7s var(--ease), opacity .5s var(--ease), padding .7s var(--ease);
  opacity: 0; padding-left: 3rem;
}
.tip.is-open .tip__body { max-height: 420px; opacity: 1; padding-bottom: var(--s-3); }
.tip__body p { max-width: 58ch; }

/* ===================== THE FOUNDER ===================== */
.founder { margin: 0; position: relative; }
.founder figcaption {
  position: absolute; left: -14px; bottom: -18px;
  background: var(--parchment); padding: var(--s-2) var(--s-3);
  border: var(--border-hair); max-width: 15rem;
}
.founder figcaption .meta { display: block; margin-bottom: 4px; }
.founder figcaption strong {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .12em; color: var(--moss-deep);
}
.founder figcaption .where {
  display: block; margin-top: 4px;
  font-size: .95rem; font-style: italic; color: var(--moss-mist);
}
@media (max-width: 860px) { .founder figcaption { left: 8px; bottom: -14px; } }

/* ===================== NAME ===================== */
.name { text-align: center; position: relative; }
.name__mark { width: clamp(120px, 15vw, 190px); margin: 0 auto var(--s-4); opacity: .95; }
.name__split { display: flex; justify-content: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-4); }
.name__split div { max-width: 24ch; }
.name__split .big {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ruby); letter-spacing: .12em; display: block; margin-bottom: var(--s-2);
}

/* ===================== BELIEFS ===================== */
.belief { position: relative; padding-top: var(--s-3); border-top: 2px solid var(--ruby-mist); }
.belief h3 { margin-bottom: 0.6rem; }
.belief p { font-size: 1.02rem; }

/* ===================== SIGNOFF ===================== */
.signoff {
  text-align: center; background: var(--moss-deep); color: var(--parchment);
  position: relative; overflow: hidden;
}
.signoff::before {
  content: ''; position: absolute; inset: 0;
  background: url('../img/stitch-band.jpg') center/cover no-repeat;
  opacity: .06; filter: grayscale(1) brightness(3);
}
.signoff > * { position: relative; }
.signoff h2 { color: var(--parchment); }
.signoff p { color: rgba(245,245,220,.8); }
.signature {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ruby-mist);
  margin-top: var(--s-4); letter-spacing: .02em;
}


/* ==========================================================================
   SECTIONS — THE MAKERS
   ========================================================================== */
/* ===================== RETURNING-VISITOR BANNER ===================== */
.remember {
  background: var(--moss-deep); color: var(--parchment);
  padding: var(--s-2) var(--gutter);
  display: none; align-items: center; gap: var(--s-2);
  font-size: 1rem; position: relative; z-index: 2;
}
.remember.is-on { display: flex; }
.remember i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 10px var(--gold);
}
.remember b { font-weight: 400; color: var(--ruby-mist); }
.remember button {
  margin-left: auto; font-family: var(--font-meta); font-size: 0.6rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(245,245,220,.6);
}

/* ===================== VILLAGE STRIP ===================== */
.villages { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: center; }
.villages button {
  font-family: var(--font-meta); font-size: 0.66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--moss);
  padding: 0.6rem 1.15rem; border: 1px solid rgba(113,121,126,.28);
  border-radius: 100px; transition: all .45s var(--ease);
}
.villages button:hover { border-color: var(--moss); color: var(--moss-deep); }
.villages button[aria-pressed="true"] {
  background: var(--ruby); border-color: var(--ruby); color: var(--parchment);
}

/* ===================== ARTISAN CARD ===================== */
.makers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
@media (max-width: 1000px) { .makers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .makers-grid { grid-template-columns: 1fr; } }

.maker { position: relative; }
.maker[hidden] { display: none; }
.maker__portrait { position: relative; overflow: hidden; }
.maker__portrait img { transition: transform 1.6s var(--ease), filter 1.2s var(--ease); }
.maker:hover .maker__portrait img { transform: scale(1.045); }

/* the "we have met" ribbon */
.maker__met {
  position: absolute; top: var(--s-2); left: var(--s-2); z-index: 3;
  display: none; align-items: center; gap: 0.4rem;
  background: rgba(245,245,220,.94); color: var(--moss-deep);
  font-family: var(--font-meta); font-size: 0.56rem; letter-spacing: .18em;
  text-transform: uppercase; padding: 0.4rem 0.7rem;
}
.maker.is-met .maker__met { display: flex; }
.maker__met svg { width: 9px; height: 9px; fill: var(--ruby); }

.maker__body { padding-top: var(--s-3); }
.maker__name {
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .08em;
  color: var(--moss-deep); line-height: 1.2;
}
.maker__where { margin-top: 0.4rem; }
.maker__say {
  font-style: italic; font-size: 1.06rem; line-height: 1.65;
  margin-top: var(--s-2); color: var(--moss);
}
.maker__facts {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: var(--border-hair);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}
.maker__facts div span { display: block; }
.maker__facts .v {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ruby); letter-spacing: .04em;
}

/* ===================== AUDIO TOGGLE ===================== */
.hear {
  margin-top: var(--s-2);
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-meta); font-size: 0.62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ruby);
  border: 1px solid rgba(162,72,87,.35); padding: 0.55rem 1rem;
  border-radius: 100px; transition: all .45s var(--ease);
}
.hear:hover { border-color: var(--ruby); background: rgba(162,72,87,.06); }
.hear__wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.hear__wave i {
  width: 2px; height: 3px; background: var(--ruby); display: block; border-radius: 1px;
  transition: height .2s linear;
}
.maker.is-playing .hear { background: var(--ruby); border-color: var(--ruby); color: var(--parchment); }
.maker.is-playing .hear__wave i { background: var(--parchment); animation: bar 900ms ease-in-out infinite; }
.hear__wave i:nth-child(2) { animation-delay: .12s !important; }
.hear__wave i:nth-child(3) { animation-delay: .24s !important; }
.hear__wave i:nth-child(4) { animation-delay: .36s !important; }
.hear__wave i:nth-child(5) { animation-delay: .48s !important; }
@keyframes bar { 0%,100% { height: 3px; } 50% { height: 12px; } }

.hear__panel {
  display: none; margin-top: var(--s-2);
  background: var(--parchment-3); padding: var(--s-3);
  border-left: 2px solid var(--ruby);
}
.maker.is-playing .hear__panel { display: block; animation: fadeUp .6s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hear__panel .kum {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .05em;
  color: var(--moss-deep); line-height: 1.6;
}
.hear__panel .eng { font-style: italic; margin-top: 0.5rem; }
.hear__panel .note {
  margin-top: var(--s-2); padding-top: 0.7rem; border-top: var(--border-hair);
  font-family: var(--font-meta); font-size: 0.56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--moss-mist); line-height: 1.8;
}

/* ===================== ON THE HOOP ===================== */
.hoopnow {
  margin-top: var(--s-2); display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-meta); font-size: 0.6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss-mist);
}
.hoopnow em { font-style: normal; color: var(--ruby); border-bottom: 1px solid rgba(162,72,87,.3); }

/* ===================== PROMISE BAND ===================== */
.promise { background: var(--parchment-3); }
.promise .grid { align-items: start; }
.promise h3 { margin-bottom: 0.7rem; }
.promise p { font-size: 1.02rem; }
.promise .n {
  font-family: var(--font-display); font-size: 0.9rem; color: var(--ruby);
  letter-spacing: .3em; display: block; margin-bottom: var(--s-1);
}


/* ==========================================================================
   SECTIONS — THE ATELIER
   ========================================================================== */
/* ===================== FILTER BAR ===================== */
.filters {
  display: flex; gap: var(--s-1); justify-content: center; flex-wrap: wrap;
}
.filters button {
  font-family: var(--font-meta); font-size: 0.66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--moss);
  padding: 0.6rem 1.15rem; border: 1px solid rgba(113,121,126,.28);
  border-radius: 100px; transition: all .45s var(--ease);
}
.filters button:hover { border-color: var(--moss); color: var(--moss-deep); }
.filters button[aria-pressed="true"] {
  background: var(--ruby); border-color: var(--ruby); color: var(--parchment);
}

/* ===================== PRODUCT GRID ===================== */
.pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
@media (max-width: 1000px) { .pieces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pieces { grid-template-columns: 1fr; } }

.piece[hidden] { display: none; }
.piece__frame {
  position: relative; overflow: hidden; cursor: crosshair;
  background: var(--parchment-3);
}
.piece__frame img { transition: transform 1.6s var(--ease); }
.piece:hover .piece__frame img { transform: scale(1.02); }

/* --- the microscope --- */
.lens {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  pointer-events: none; opacity: 0; transform: scale(0.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  background-repeat: no-repeat;
  box-shadow: 0 10px 44px rgba(36,31,32,.28), 0 0 0 1px rgba(245,245,220,.85) inset,
              0 0 0 6px rgba(245,245,220,.55);
  z-index: 4;
}
.piece__frame.is-zooming .lens { opacity: 1; transform: scale(1); }
.lens__cap {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-meta); font-size: 0.5rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--parchment);
  background: rgba(36,31,32,.6); padding: 0.25rem 0.55rem; white-space: nowrap;
}
.zoomhint {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: var(--s-2); text-align: center;
  font-family: var(--font-meta); font-size: 0.55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--parchment);
  background: linear-gradient(180deg, transparent, rgba(36,31,32,.5));
  opacity: 0; transition: opacity .5s var(--ease);
}
.piece:hover .zoomhint { opacity: 1; }
.piece__frame.is-zooming .zoomhint { opacity: 0; }
@media (hover: none) { .zoomhint, .lens { display: none; } }

.piece__body { padding-top: var(--s-3); }
.piece__title {
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .07em;
  color: var(--moss-deep);
}
.piece__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2); margin-top: 0.5rem;
}
.piece__price { font-size: 1.15rem; color: var(--ruby); }
.piece__by { margin-top: 0.6rem; font-size: 0.98rem; font-style: italic; }
.piece__by a { color: var(--ruby); border-bottom: 1px solid rgba(162,72,87,.3); }
.piece__spec {
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: var(--border-hair);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}
.piece__actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.piece__actions .btn { padding: 0.85rem 1.5rem; }
.stock {
  width: 100%; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-meta); font-size: 0.56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss-mist);
}
.stock i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.stock.low i { background: var(--ruby); }

/* ===================== VIEW IN YOUR SPACE ===================== */
.space { background: var(--moss-deep); color: var(--parchment); }
.space h2 { color: var(--parchment); }
.space .eyebrow { color: var(--ruby-mist); }
.space p { color: rgba(245,245,220,.78); }

.stage { position: relative; overflow: hidden; background: #000; }
.stage > img.room { width: 100%; display: block; }
.overlay {
  position: absolute; left: 30%; top: 57%; width: 22%;
  transform: translate(-50%, -50%) rotate(0deg);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.42));
  cursor: grab; touch-action: none;
}
.overlay:active { cursor: grabbing; }
.overlay img { width: 100%; }
.stage__tag {
  position: absolute; left: var(--s-2); top: var(--s-2);
  font-family: var(--font-meta); font-size: 0.52rem; letter-spacing: .2em;
  text-transform: uppercase; background: rgba(36,31,32,.6);
  color: rgba(245,245,220,.9); padding: 0.35rem 0.65rem;
}
.controls { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.controls label {
  display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: var(--s-2);
  font-family: var(--font-meta); font-size: 0.58rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(245,245,220,.6);
}
.controls output { text-align: right; color: var(--ruby-mist); }
.controls input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
.controls input[type=range]::-webkit-slider-runnable-track {
  height: 1px; background: rgba(245,245,220,.28);
}
.controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ruby-mist); margin-top: -6px; cursor: pointer;
}
.controls input[type=range]::-moz-range-track { height: 1px; background: rgba(245,245,220,.28); }
.controls input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--ruby-mist); cursor: pointer;
}
.swatches { display: flex; gap: 0.6rem; margin-top: var(--s-3); }
.swatches button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(245,245,220,.3);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.swatches button[aria-pressed="true"] { border-color: var(--parchment); transform: scale(1.16); }
.space__note {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(245,245,220,.16);
  font-family: var(--font-meta); font-size: 0.58rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,245,220,.42); line-height: 2;
}

/* ===================== IN ROOMS ===================== */
.room-shot { margin: 0; }
.room-shot figcaption { margin-top: var(--s-2); display: block; }

/* ===================== FROM THREAD TO DOORSTEP ===================== */
/* Alternating sides, so the eye zig-zags down the sequence the way the piece
   itself moves between hands. */
.steps-seq { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.step:nth-child(even) .well { order: 2; }
.step__body { max-width: 38ch; }
.step__n {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ruby-mist);
  letter-spacing: .3em; display: block; margin-bottom: var(--s-1);
}
.step__body h3 { margin-bottom: 0.7rem; }
.step__body p { font-size: 1.02rem; }
@media (max-width: 860px) {
  .steps-seq { gap: var(--s-5); }
  .step { grid-template-columns: 1fr; gap: var(--s-3); }
  .step:nth-child(even) .well { order: 0; }
}


/* ==========================================================================
   SECTIONS — THE IMPACT LEDGER
   ========================================================================== */
/* ===================== PIECE SWITCHER ===================== */
.switch { display: flex; gap: var(--s-1); justify-content: center; flex-wrap: wrap; }
.switch button {
  font-family: var(--font-meta); font-size: 0.64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--moss);
  padding: 0.6rem 1.15rem; border: 1px solid rgba(113,121,126,.28);
  border-radius: 100px; transition: all .45s var(--ease);
}
.switch button:hover { border-color: var(--moss); color: var(--moss-deep); }
.switch button[aria-pressed="true"] {
  background: var(--ruby); border-color: var(--ruby); color: var(--parchment);
}

/* ===================== THE LEDGER BAR ===================== */
.ledger { max-width: 1000px; margin-inline: auto; }
.ledger__total {
  text-align: center; margin-bottom: var(--s-4);
}
.ledger__total .amt {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--moss-deep); letter-spacing: .03em; line-height: 1;
  display: block;
}
.ledger__total .cap { margin-top: var(--s-2); }

.bar {
  display: flex; width: 100%; height: 58px;
  border-radius: 3px; overflow: hidden;
  background: var(--parchment-3);
  box-shadow: 0 2px 18px rgba(36,31,32,.06);
}
.bar span {
  height: 100%; width: 0;
  transition: width 1.5s var(--ease), filter .4s var(--ease);
  position: relative; cursor: default;
}
.bar span:hover { filter: brightness(1.12); }
.bar span::after {
  content: attr(data-pct); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-meta); font-size: 0.58rem; letter-spacing: .12em;
  color: rgba(255,255,255,.92); opacity: 0;
  transition: opacity .8s var(--ease) .9s;
}
.bar.is-drawn span::after { opacity: 1; }
@media (max-width: 760px) { .bar { height: 44px; } .bar span::after { font-size: 0.5rem; } }

/* ===================== LEDGER LINES ===================== */
.lines { margin-top: var(--s-5); }
.line {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-bottom: var(--border-hair);
}
.line:first-child { border-top: var(--border-hair); }
.line i { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.line h3 { font-size: 1.1rem; letter-spacing: .05em; margin-bottom: 0.2rem; }
.line p { font-size: 0.98rem; line-height: 1.6; color: var(--moss); grid-column: 2 / -1; margin-top: 0.1rem; }
.line .val {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--moss-deep);
  letter-spacing: .03em; min-width: 5.2rem; text-align: right;
}
.line .pct {
  font-family: var(--font-meta); font-size: 0.62rem; letter-spacing: .18em;
  color: var(--moss-mist); min-width: 3.4rem; text-align: right;
}
.line--hero { background: rgba(162,72,87,.05); padding-inline: var(--s-2); }
.line--hero .val { color: var(--ruby); font-size: 1.5rem; }

/* On a phone the four columns are too tight — restack into three rows so
   headings never break across three lines. */
@media (max-width: 620px) {
  .line { grid-template-columns: 12px 1fr auto; row-gap: 0.45rem; }
  .line i    { grid-row: 1; grid-column: 1; }
  .line h3   { grid-row: 1; grid-column: 2 / -1; margin-bottom: 0; }
  .line .val { grid-row: 2; grid-column: 2; text-align: left; min-width: 0; }
  .line .pct { grid-row: 2; grid-column: 3; }
  .line p    { grid-row: 3; grid-column: 1 / -1; }
}

/* ===================== WAGE COMPARISON ===================== */
.wages { display: grid; gap: var(--s-3); max-width: 640px; }
.wage__row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.wage__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.wage__name { font-size: 1.05rem; color: var(--moss-deep); }
.wage__amt { font-family: var(--font-display); color: var(--ruby); letter-spacing: .04em; }
.wage__track { height: 8px; background: rgba(113,121,126,.16); border-radius: 4px; overflow: hidden; }
.wage__fill {
  /* a span is inline by default, and an inline box ignores width — which is
     the whole mechanism of this bar */
  display: block;
  height: 100%; width: 0; background: var(--moss-mist);
  transition: width 1.6s var(--ease);
}
.wage__row.is-ours .wage__fill { background: var(--ruby); }
.wage__row.is-ours .wage__name { color: var(--ruby); }

.caveat {
  background: var(--parchment-3); padding: var(--s-4);
  border-left: 2px solid var(--ruby);
}
.caveat h3 { margin-bottom: var(--s-2); }


/* ==========================================================================
   WORDPRESS ADJUSTMENTS

   Everything above is shared with the static build. This block exists only to
   undo the small things WordPress adds around it: the root block gap that
   would push the hero down, the wrappers around the header and footer template
   parts, and the admin bar, which shifts the whole viewport down for a logged-
   in editor and would otherwise hide the top of the fixed nav.
   ========================================================================== */
.wp-site-blocks { padding: 0; margin: 0; }
.wp-site-blocks > *,
.wp-site-blocks > * + * { margin-block-start: 0; margin-block-end: 0; }
.hor-header, .hor-footer { margin: 0; padding: 0; }
.wp-block-post-content > * { margin-block-start: 0; }

body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }
body.admin-bar .portal { height: calc(100svh - 32px); }

/* Core blocks that land inside a designed section should not fight it. */
.wp-block-group.section,
.wp-block-group.pagehead,
.wp-block-group.wrap { margin-block: 0; }
.wp-block-group.grid { display: grid; }
.entry-content > p:first-child { margin-top: 0; }

/* The editor canvas has no fixed header, so give the first section room, and
   keep the canvas on parchment rather than whatever a section last set. */
.editor-styles-wrapper { background: var(--parchment); }
.editor-styles-wrapper .pagehead { padding-top: var(--s-6); }
.editor-styles-wrapper .portal { height: 70vh; min-height: 420px; }
.editor-styles-wrapper .nav { position: static; }