/* ═══════════════════════════════════════════════════════
   LUMEN & LARCH — Gallery
   Cool near-white, true black, one cobalt. Deliberately cool rather than
   warm: a neutral ground makes rendered oak and walnut the only warm thing
   on the page without the room feeling beige.
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:   #F7F7F6;   /* ground */
  --paper-2: #EDEDEB;   /* raised panel */
  --oat:     #E2E2DF;   /* hover / active fill */
  --oat-2:   #D2D2CE;
  --ink:     #101010;   /* primary type */
  --ink-2:   #46484A;
  --muted:   #83868A;
  --clay:    #2C4BE0;   /* cobalt */
  --line:    rgba(16,16,16,.14);
  --line-2:  rgba(16,16,16,.07);

  --disp: "Petrona", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --pad: clamp(18px, 4vw, 60px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:clamp(14.5px,.96vw,16px);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--clay); color:var(--paper); }
:focus-visible{ outline:1.5px solid var(--clay); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:300; background:var(--ink); color:var(--paper); padding:.7em 1.2em; }

.wrap{ width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; line-height:1.6; }
.dim{ color:var(--muted); }
.clay{ color:var(--clay); }
.dsp{ font-family:var(--disp); font-weight:300; line-height:1.03; letter-spacing:-.022em; margin:0; }
.dsp em{ font-style:italic; color:var(--clay); }
.h2{ font-size:clamp(1.9rem,4vw,3.4rem); }
.lede{ font-size:clamp(1rem,1.25vw,1.18rem); color:var(--ink-2); max-width:48ch; line-height:1.55; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1em 1.7em; background:var(--ink); color:var(--paper); border-radius:2px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .25s, transform .25s var(--ease);
}
.btn:hover{ opacity:.86; transform:translateY(-1px); }
.btn--sm{ padding:.65em 1.1em; }
.btn--full{ width:100%; margin-top:1.1rem; }

/* ══ NAV ═══════════════════════════════════════════════ */
.nav{ position:sticky; top:0; z-index:120; background:rgba(247,247,246,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
  padding:13px var(--pad); max-width:1400px; margin-inline:auto; }
.nav__mark{ font-family:var(--disp); font-size:19px; letter-spacing:-.012em; }
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); position:relative; padding-block:.25em; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--clay); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav__links a:hover{ color:var(--clay); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__burger{ display:none; width:24px; height:12px; position:relative; }
.nav__burger span{ position:absolute; left:0; right:0; height:1.4px; background:var(--ink); transition:.35s var(--ease); }
.nav__burger span:first-child{ top:0 } .nav__burger span:last-child{ bottom:0 }
.nav.is-open .nav__burger span:first-child{ top:5px; transform:rotate(45deg); }
.nav.is-open .nav__burger span:last-child{ bottom:5px; transform:rotate(-45deg); }

/* ══ OPENING ═══════════════════════════════════════════ */
.open{ padding-block:clamp(56px,10vw,140px) clamp(34px,5vw,64px); }
.open__t{ font-size:clamp(2.6rem,7vw,6.2rem); margin:.6rem 0 1.6rem; }
.open__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:clamp(2rem,4vw,3.4rem); }
.open__meta div{ background:var(--paper); padding:14px 16px 16px; display:grid; gap:.35rem; }

/* ══ THE SYSTEM (pinned, self-assembling) ══════════════ */
.sys{ position:relative; background:var(--paper); }
.sys__stick{ position:sticky; top:0; height:100svh; overflow:hidden; }
.sys__spacer{ height:520vh; }
.sys__c{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sys__hero{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  justify-content:center; padding-block:clamp(60px,10vh,110px); pointer-events:none;
  will-change:opacity, transform;
}
.sys__ht{ font-size:clamp(2.6rem,7vw,6.2rem); margin:.6rem 0 1.5rem; max-width:16ch; }
.sys__hero .lede{ max-width:44ch; }
.sys__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--line); margin-top:clamp(1.6rem,3.4vw,3rem); max-width:760px; }
/* borders live on the cells, so a half-filled last row leaves paper, not a block of fill */
.sys__meta div{ padding:13px 15px 15px; display:grid; gap:.3rem;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line); }

.sys__ui{ position:relative; z-index:2; height:100%; display:grid;
  grid-template-columns:minmax(260px,32%) 1fr; align-items:start;
  padding-block:clamp(72px,12vh,132px); pointer-events:none; }
.sys__step{ align-self:center; max-width:36ch; }
.sys__h{ font-size:clamp(1.9rem,3.6vw,3rem); margin:.5rem 0 .9rem; }
.sys__p{ color:var(--ink-2); margin:0; }
.sys__legend{ grid-column:2; justify-self:end; align-self:start; text-align:right; }
.tally{ list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.3rem; }
.tally li{ display:flex; justify-content:flex-end; gap:.9rem; font-family:var(--mono);
  font-size:11px; color:var(--muted); opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.tally li.is-on{ opacity:1; transform:none; color:var(--ink); }
.tally li b{ font-weight:500; min-width:2.2em; text-align:right; }
.sys__hint{ position:absolute; left:var(--pad); bottom:20px; z-index:4;
  transition:opacity .4s; }

/* ══ CONFIGURATOR ══════════════════════════════════════ */
.cfg{ padding-block:clamp(48px,7vw,104px); }
.cfg__head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem);
  align-items:end; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.cfg__grid{ display:grid; grid-template-columns:1fr 340px; gap:clamp(1.4rem,2.6vw,2.4rem); align-items:start; }
.cfg__stage{ background:var(--paper-2); border:1px solid var(--line-2); border-radius:3px;
  padding:12px 12px 10px; }
.cfg__viewport{ width:100%; aspect-ratio:4/3; }
.cfg__viewport canvas{ width:100% !important; height:100% !important; display:block; cursor:grab; }
.cfg__viewport canvas:active{ cursor:grabbing; }
.cfg__tip{ margin:.6rem 0 0; text-align:center; }

.cfg__panel{ position:sticky; top:76px; display:grid; gap:0; }
.ctl{ padding:15px 0; border-top:1px solid var(--line-2); }
.ctl:first-child{ border-top:0; padding-top:0; }
.ctl__h{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.7rem; }
.stepper{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  border:1px solid var(--line); border-radius:2px; }
.stepper button{ width:40px; height:38px; font-size:17px; color:var(--ink-2); transition:background .25s, color .25s; }
.stepper button:hover:not(:disabled){ background:var(--oat); color:var(--ink); }
.stepper button:disabled{ opacity:.28; cursor:not-allowed; }
.stepper__t{ font-family:var(--mono); font-size:11.5px; }

.swatches{ display:flex; gap:7px; }
.sw{ flex:1; height:44px; border-radius:2px; position:relative; box-shadow:inset 0 0 0 1px rgba(16,16,16,.14);
  transition:transform .25s var(--ease), box-shadow .25s; }
.sw:hover{ transform:translateY(-2px); }
.sw.is-on{ box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.ctl__note{ margin:.6rem 0 0; text-transform:none; letter-spacing:.02em; }

.toggle{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:11px 12px; border:1px solid var(--line); border-radius:2px; font-size:.9rem;
  transition:border-color .25s, background .25s; }
.toggle:hover{ border-color:var(--ink-2); }
.toggle__d{ width:15px; height:15px; border:1px solid var(--ink-2); border-radius:2px; flex:none; position:relative; }
.toggle[aria-pressed="true"]{ background:var(--oat); border-color:var(--ink); }
.toggle[aria-pressed="true"] .toggle__d{ background:var(--ink); border-color:var(--ink); }
.toggle[aria-pressed="true"] .toggle__d::after{ content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--paper); border-width:0 1.5px 1.5px 0; transform:rotate(42deg); }

.quote{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--ink); }
.quote__lines{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.4rem; }
.quote__lines li{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; color:var(--ink-2); }
.quote__lines li span:last-child{ font-family:var(--mono); font-size:10.5px; color:var(--ink); }
.quote__tot{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-top:.9rem; border-top:1px solid var(--line-2); }
.quote__v{ font-family:var(--disp); font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; letter-spacing:-.025em; }
.quote__sub{ display:flex; justify-content:space-between; margin-top:.5rem; }
.quote__fine{ margin:.9rem 0 0; text-transform:none; letter-spacing:.02em; line-height:1.7; }

/* ══ SECTIONS ══════════════════════════════════════════ */
.sec{ padding-block:clamp(48px,7vw,104px); border-top:1px solid var(--line-2); }
.sec__h{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem);
  align-items:end; margin-bottom:clamp(1.6rem,3vw,2.6rem); }

.tim{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(10px,1.4vw,18px); }
.tim__i{ }
.tim__sw{ aspect-ratio:4/3; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(16,16,16,.1); }
.tim__n{ font-family:var(--disp); font-size:1.3rem; margin:.7rem 0 .25rem; }
.tim__p{ color:var(--ink-2); font-size:.88rem; margin:0; }
.tim__x{ margin-top:.5rem; }

.rooms{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.3vw,18px); }
.rooms figure{ margin:0; }
.rooms img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.rooms figcaption{ margin-top:.6rem; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line); }
.step{ background:var(--paper); padding:18px 18px 20px; }
.step__t{ font-family:var(--disp); font-size:1.25rem; margin:.5rem 0 .4rem; }
.step p{ margin:0; color:var(--ink-2); font-size:.88rem; }

.acc__i{ border-top:1px solid var(--line); }
.acc__i:last-child{ border-bottom:1px solid var(--line); }
.acc__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.15rem 0; text-align:left; font-family:var(--disp); font-size:clamp(1.1rem,1.8vw,1.4rem);
  transition:color .3s; }
.acc__q:hover{ color:var(--clay); }
.acc__q i{ position:relative; width:12px; height:12px; flex:none; }
.acc__q i::before,.acc__q i::after{ content:""; position:absolute; background:currentColor; transition:transform .4s var(--ease); }
.acc__q i::before{ inset:5px 0 5px 0; height:1px; }
.acc__q i::after{ inset:0 5px 0 5px; width:1px; }
.acc__i.is-on .acc__q i::after{ transform:scaleY(0); }
.acc__i.is-on .acc__q{ color:var(--clay); }
.acc__a{ overflow:hidden; height:0; }
.acc__a p{ margin:0; padding:0 0 1.3rem; max-width:62ch; color:var(--ink-2); }

/* ══ FOOTER ════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding-top:clamp(30px,4.5vw,58px); }
.foot__grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; padding-bottom:clamp(26px,4vw,46px); }
.foot__grid > div{ min-width:0; }
.foot__grid p{ margin:0 0 .7rem; color:var(--ink-2); font-size:.88rem; line-height:1.75; }
.foot__grid .mono{ overflow-wrap:anywhere; }
.foot__bar{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  flex-wrap:wrap; padding-block:15px; border-top:1px solid var(--line-2); }
.credit{ display:inline-flex; align-items:center; gap:.5em; color:var(--muted);
  border:1px solid var(--line); padding:.55em 1em; border-radius:2px; transition:.3s; }
.credit strong{ color:var(--ink); font-weight:500; }
.credit:hover{ color:var(--ink); border-color:var(--clay); }

.rv{ opacity:0; transform:translateY(18px); }

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1080px){
  .cfg__grid,.cfg__head,.sec__h{ grid-template-columns:1fr; }
  .cfg__panel{ position:static; }
  .sys__ui{ grid-template-columns:1fr; align-content:space-between; }
  .sys__step{ align-self:start; }
  .sys__legend{ grid-column:1; justify-self:start; text-align:left; }
  .tally li{ justify-content:flex-start; }
  .sys__spacer{ height:360vh; }
}
@media (max-width:760px){
  .nav__links{ position:fixed; inset:0 0 auto; top:49px; flex-direction:column; gap:1.1rem;
    padding:1.5rem var(--pad) 1.9rem; background:var(--paper); border-bottom:1px solid var(--line);
    transform:translateY(-110%); transition:transform .5s var(--ease); }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ font-size:12px; }
  .nav__burger{ display:block; }
  .nav .btn--sm{ display:none; }
  .rooms{ grid-template-columns:repeat(6,1fr); }
  .rooms figure{ grid-column:1/-1 !important; }
  .cfg__viewport{ aspect-ratio:1/1; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .tally li{ opacity:1; transform:none; }
}

/* module picker */
.mods{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.mod{
  padding:.6em .3em; border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); line-height:1.35; transition:.25s;
}
.mod:hover:not(:disabled){ border-color:var(--clay); color:var(--clay); }
.mod.is-on{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.mod:disabled{ opacity:.32; cursor:not-allowed; }
.mods.is-idle{ opacity:.45; pointer-events:none; }

/* the opening holds, then lifts away as the first parts land */
.sys__ui{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .sys__ui{ opacity:1; } .sys__hero{ position:relative; } }

/* ── the opening stage ──────────────────────────────────────────
   A setting-out grid at the system's own 40 mm channel pitch. It gives the
   empty stage a reason to exist and retires once the timber is real. */
.sys__plan{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:40px 40px; background-position:center;
  -webkit-mask-image:radial-gradient(115% 88% at 62% 50%, #000 18%, transparent 76%);
          mask-image:radial-gradient(115% 88% at 62% 50%, #000 18%, transparent 76%);
}
.sys__plan-note{
  position:absolute; right:var(--pad); top:96px; font-size:.66rem;
  letter-spacing:.14em; color:var(--muted);
}
.sys__plan-note::before{
  content:''; position:absolute; right:0; top:-11px; width:100%;
  border-top:1px solid var(--line);
}

/* headline lines rise out of their own mask */
.sys__ht .ln{ display:block; overflow:hidden; padding-block:.02em; }
.sys__ht .ln > i{ display:block; font-style:normal; will-change:transform; }
.sys__ht em{ color:var(--clay); }

/* Every anchor on this page jumps under a fixed header without this — the
   heading you asked for ends up hidden behind the bar. */
html{ scroll-padding-top:62px; }
@media (min-width:861px){ html{ scroll-padding-top:80px; } }

/* ── mobile: shorten the pinned scrubs ───────────────────────────
   These lengths are tuned for a desktop wheel. On a phone the same
   number of viewport-heights is a lot of thumb, and a pinned section
   that outstays its welcome reads as broken rather than considered. */
@media (max-width:760px){
  .sys__spacer{ height:230vh; }
}