/* ============================================================================
   THE RESERVE — home experience  ·  V2
   Five tonal rooms, full-bleed imagery, and content held in warm mats.
   ========================================================================== */

/* ───────────────────────────────────────────────────────────── OVERTURE ── */
/* An arrival, not a spinner. The seam opens, the mark irises out of it, the
   wordmark rises, and four panels lift — one for each residence in a building. */
.ovr { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; overflow: hidden; }
.ovr__panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.ovr__panels i { display: block; background: var(--ink); border-right: 1px solid rgba(201,169,106,.06); }
.ovr__panels i:last-child { border-right: 0; }

.ovr__stage { position: relative; display: grid; justify-items: center;
  gap: clamp(20px,2.4vw,34px); transition: opacity .5s ease, transform 1.1s var(--e-out); }

.ovr__seam { position: relative; width: min(46vw, 380px); height: 1px; }
.ovr__seam::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-hi) 24%, var(--gold) 50%, var(--gold-hi) 76%, transparent);
  transform: scaleX(0); animation: ovrSeam 1.05s var(--e-inout) .18s forwards; }
@keyframes ovrSeam { to { transform: scaleX(1); } }

.ovr__mark { width: clamp(80px,8.4vw,120px);
  clip-path: inset(50% 0 50% 0); animation: ovrIris 1.2s var(--e-out) .82s forwards; }
@keyframes ovrIris { to { clip-path: inset(0 0 0 0); } }

.ovr__word { font-family: var(--f-display); font-weight: 400; text-transform: lowercase;
  letter-spacing: .17em; font-size: clamp(1.15rem,2.7vw,1.9rem); color: var(--on-dark);
  display: flex; overflow: hidden; }
.ovr__word span { display: inline-block; white-space: pre; transform: translateY(106%);
  animation: ovrChar .95s var(--e-out) forwards; }
@keyframes ovrChar { to { transform: none; } }

.ovr__sub { font-size: var(--t-micro); font-weight: 500; letter-spacing: .42em;
  text-transform: uppercase; color: var(--gold); opacity: 0;
  animation: ovrIn .9s var(--e-out) 1.92s forwards; }
@keyframes ovrIn { to { opacity: 1; } }

.ovr__meta { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(20px,4vw,56px) clamp(20px,3vw,42px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-fa); opacity: 0; animation: ovrIn .8s var(--e-out) .45s forwards; }
.ovr__n b { font-family: var(--f-display); font-weight: 500; color: var(--gold);
  font-size: 1rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ovr__bar { position: relative; width: min(26vw, 200px); height: 1px; background: var(--rule-d-2); }
.ovr__bar i { position: absolute; inset: 0; background: var(--gold);
  transform-origin: left; transform: scaleX(var(--lp,0)); }
@media (max-width: 620px) { .ovr__meta { font-size: 10px; letter-spacing: .14em; } .ovr__bar { display: none; } }

.ovr.is-out .ovr__stage, .ovr.is-out .ovr__meta { opacity: 0; transform: scale(1.03); }
.ovr.is-out .ovr__panels i { transform: translateY(-101%); transition: transform 1.15s var(--e-inout); }
.ovr.is-out .ovr__panels i:nth-child(1) { transition-delay: .00s; }
.ovr.is-out .ovr__panels i:nth-child(2) { transition-delay: .09s; }
.ovr.is-out .ovr__panels i:nth-child(3) { transition-delay: .18s; }
.ovr.is-out .ovr__panels i:nth-child(4) { transition-delay: .27s; }
.ovr.is-done { display: none; }

/* ═══════════════════════════════════════════════════ I · ARRIVAL ══ */
.arr { position: relative; min-height: 100svh; display: grid;
  grid-template-rows: 1fr auto; isolation: isolate; overflow: hidden; }
.arr__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.arr__media img { width: 100%; height: 118%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.02); }
.arr__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,7,.72) 0%, rgba(12,10,7,.10) 26%, rgba(12,10,7,.30) 58%, rgba(12,10,7,.90) 100%),
    linear-gradient(84deg, rgba(12,10,7,.80) 0%, rgba(12,10,7,.20) 46%, transparent 74%);
}
.arr__body { align-self: end; padding-bottom: clamp(26px,4vh,60px); position: relative; }
.arr__word {
  font-family: var(--f-display); font-weight: 400; text-transform: lowercase;
  letter-spacing: .095em; line-height: .9; font-size: var(--t-hero);
  color: var(--on-dark); margin: clamp(16px,2vw,30px) 0 0; margin-left: -.03em;
  text-shadow: 0 4px 60px rgba(10,8,5,.5);
}
.arr__rule { height: 1px; background: var(--rule-gold); margin: clamp(18px,2.2vw,32px) 0 clamp(14px,1.6vw,22px);
  max-width: min(100%, 62rem); }
.arr__sub { font-size: clamp(.66rem,1.05vw,.86rem); font-weight: 500; letter-spacing: .46em;
  text-transform: uppercase; color: var(--gold-hi); }
.arr__line { margin-top: clamp(22px,2.6vw,40px); font-size: var(--t-lead); font-weight: 300;
  line-height: 1.5; color: var(--on-dark); max-width: 30ch; text-wrap: pretty; }
.arr__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: clamp(24px,3.4vh,44px); }
.arr__scroll { display: flex; align-items: center; gap: 12px; font-size: var(--t-micro);
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-fa); }
.arr__scroll i { display: block; width: 1px; height: 40px; overflow: hidden; position: relative;
  background: rgba(242,235,221,.2); }
.arr__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--gold-hi);
  animation: sDrop 2.3s var(--e-inout) infinite; }
@keyframes sDrop { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }
@media (max-width: 760px) { .arr__scroll { display: none; } .arr__foot .btn { width: 100%; justify-content: space-between; } }

/* the credit line that tells the client exactly what goes here */
.slot { position: absolute; right: var(--pad); top: calc(var(--pad) * .6 + 46px); z-index: 4;
  max-width: 20ch; text-align: right; font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.7;
  color: rgba(242,235,221,.42); border-right: 1px solid var(--rule-gold); padding-right: 14px; }
.slot b { display: block; font-weight: 500; color: var(--gold); }
@media (max-width: 1024px) { .slot { display: none; } }

/* ═══════════════════════════════════════════════ II · COLOPHON ══ */
.colo { background: var(--ink); padding-block: clamp(56px,6vw,110px); position: relative; }
.colo__row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--rule-d-2); border-bottom: 1px solid var(--rule-d-2); }
.colo__i { padding: clamp(26px,3.4vw,58px) clamp(12px,2vw,34px);
  border-left: 1px solid var(--rule-d-2); display: grid; gap: clamp(8px,1vw,16px); }
.colo__i:first-child { border-left: 0; padding-left: 0; }
.colo__i b { font-family: var(--f-display); font-weight: 500; letter-spacing: .01em;
  font-size: clamp(3.4rem, 10vw, 11rem); line-height: .82; }
.colo__i > span { font-size: var(--t-micro); font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--on-dark-fa); }
.colo__i b span { font: inherit; letter-spacing: inherit; color: inherit;
  text-transform: none; display: inline; }
.colo__place { margin-top: clamp(20px,2.2vw,32px); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-fa); }
@media (max-width: 760px) {
  .colo__row { grid-template-columns: 1fr; }
  .colo__i { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-d-2);
    grid-template-columns: auto 1fr; align-items: baseline; gap: 20px; padding-block: 22px; }
  .colo__i:first-child { border-top: 0; }
  .colo__i b { font-size: 3.6rem; }
}

/* ═══════════════════════════════════════════ III · THE ADDRESS ══ */
.addr { background: var(--ivory); }
.addr__top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut);
  align-items: start; }
.addr__h { grid-column: 1 / 7; font-family: var(--f-editorial); font-weight: 300;
  font-size: var(--t-d1); line-height: .98; letter-spacing: -.024em; text-wrap: balance; }
.addr__h em { font-style: italic; color: var(--walnut-3); }
.addr__lead { grid-column: 7 / 13; font-size: var(--t-lead); line-height: 1.55; font-weight: 300;
  color: var(--on-light-mu); }
@media (max-width: 1024px) { .addr__h, .addr__lead { grid-column: 1 / 13; } .addr__lead { margin-top: 28px; } }
.addr__body { margin-top: clamp(46px,5vw,88px); display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut); align-items: start; }
.addr__copy { grid-column: 1 / 5; }
.addr__plan svg { max-width: none; }
.addr__plan { grid-column: 5 / 13; }
@media (max-width: 1024px) { .addr__copy, .addr__plan { grid-column: 1 / 13; }
  .addr__plan { margin-top: clamp(40px,6vw,64px); } }

/* the diagram, drawn in ink on the paper */
.plan { position: relative; }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan .p-line { fill: none; stroke: rgba(25,21,16,.30); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-gold { fill: none; stroke: var(--gold-paper); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); }
.plan .p-txt  { font-family: var(--f-ui); font-size: 22px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; fill: rgba(25,21,16,.56); }
.plan .p-txt--g { fill: var(--gold-paper); }
.plan .p-bldg { fill: rgba(25,21,16,.06); stroke: rgba(25,21,16,.42); stroke-width: 1;
  vector-effect: non-scaling-stroke; transition: fill .45s var(--e-out), stroke .45s var(--e-out); }
.plan .p-bay  { stroke: rgba(25,21,16,.20); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.plan .p-tick { fill: none; stroke: rgba(107,79,34,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-wave { fill: none; stroke: rgba(92,110,120,.55); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t,0)); }
.plan .p-dot  { fill: var(--gold-paper); }
.plan .p-hit  { fill: transparent; }
.plan .p-no   { font-family: var(--f-display); font-size: 26px; fill: rgba(25,21,16,.5); }
.plan__b { cursor: pointer; outline: none; }
.plan__b:hover .p-bldg, .plan__b.is-on .p-bldg, .plan__b:focus-visible .p-bldg {
  fill: rgba(107,79,34,.24); stroke: var(--gold-paper); }
.plan__b:hover .p-no, .plan__b.is-on .p-no, .plan__b:focus-visible .p-no { fill: var(--gold-paper); }
.plan__read { margin-top: clamp(18px,2vw,28px); padding-top: 16px; border-top: 1px solid var(--rule-l-2);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: baseline;
  font-size: var(--t-small); color: var(--on-light-mu); }
.plan__read b { font-family: var(--f-display); font-weight: 500; color: var(--gold-paper);
  letter-spacing: .1em; font-size: .95rem; text-transform: uppercase; }

/* ═════════════════════════════════════════════ IV · THE HOUSE ══ */
.house { background: var(--walnut); position: relative; overflow: hidden; }
.house::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 22% 0%, rgba(201,169,106,.10), transparent 62%); }
.house__top { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gut); align-items: end; margin-bottom: clamp(40px,4.6vw,80px); }
.house__h { grid-column: 1 / 9; font-family: var(--f-editorial); font-weight: 300;
  font-size: var(--t-d1); line-height: .98; letter-spacing: -.024em; }
.house__h em { font-style: italic; color: var(--gold); }
.house__lead { grid-column: 9 / 13; color: var(--on-dark-mu); }
@media (max-width: 1024px) { .house__h, .house__lead { grid-column: 1/13; } .house__lead { margin-top: 26px; } }

/* the elevation, presented as a mounted plate */
.plate { position: relative; background: var(--ivory); padding: clamp(18px,2.4vw,50px);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.75); }
.plate__paper { position: relative; }
.plate__paper svg { width: 100%; height: auto; overflow: visible; }
.plate__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px;
  margin-top: clamp(14px,1.6vw,24px); padding-top: clamp(12px,1.2vw,18px);
  border-top: 1px solid var(--rule-l-2); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-fa); }
.plate__cap b { font-weight: 500; color: var(--gold-paper); }
.plate__tick { position: absolute; width: 16px; height: 16px; border: 0 solid var(--gold-paper); opacity: .8; }
.plate__tick--tl { top: 10px; left: 10px;         border-top-width: 1px; border-left-width: 1px; }
.plate__tick--tr { top: 10px; right: 10px;        border-top-width: 1px; border-right-width: 1px; }
.plate__tick--bl { bottom: 10px; left: 10px;      border-bottom-width: 1px; border-left-width: 1px; }
.plate__tick--br { bottom: 10px; right: 10px;     border-bottom-width: 1px; border-right-width: 1px; }

/* drawing, inked on paper */
.ev-line { fill: none; stroke: rgba(25,21,16,.62); stroke-width: 1.25; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t,0)); }
.ev-line--f { stroke: rgba(25,21,16,.34); }
.ev-gold { fill: none; stroke: var(--gold-paper); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t,0)); }
.ev-fill { opacity: var(--t,0); }
.ev-dim  { opacity: 0 !important; }               /* the wash is full-value on paper */
.ev-txt  { font-family: var(--f-ui); font-size: 17px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; fill: var(--gold-paper); opacity: var(--t,0); }
.ev-txt--m { fill: rgba(25,21,16,.56); }
.ev-fill circle { fill: var(--gold-paper) !important; }

/* ═════════════════════════════════════ V · THE MATERIAL BOARD ══ */
.board { background: var(--ivory); }
.board__grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  grid-auto-rows: minmax(0, 15.5vw); gap: clamp(10px,1.1vw,20px); }
.sw-m { position: relative; overflow: hidden; background: var(--bone); }
.sw-m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02);
  transition: transform 1.2s var(--e-out); }
.sw-m:hover img { transform: scale(1.08); }
/* The vector studies were uniformly dark at the bottom edge, so a percentage
   ramp was enough. Real photography is not: the siding and cabinetry renders run
   light exactly where the caption sits, and the wide 3x1 banners are short enough
   that a percentage ramp barely reaches the text at all. So the scrim is two
   layers — an absolute-px ramp sized to the caption block, which behaves the same
   on a 223px banner as on the 462px stone tile, over a gentle percentage wash that
   keeps the tall tiles from ending in a visible seam. Eased across many stops so
   it reads as light falling off the material, never as a bar laid on top of it. */
.sw-m::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,6,4,.94) 0px,  rgba(8,6,4,.88) 34px,
                            rgba(8,6,4,.70) 66px, rgba(8,6,4,.44) 100px,
                            rgba(8,6,4,.20) 138px, rgba(8,6,4,.05) 172px,
                            rgba(8,6,4,0)  200px),
    linear-gradient(to top, rgba(8,6,4,.30) 0%,   rgba(8,6,4,.10) 22%,
                            rgba(8,6,4,0)  46%); }
.sw-m__tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(14px,1.4vw,22px); color: var(--ivory);
  /* insurance for the brightest highlight a render can put under a glyph */
  text-shadow: 0 1px 3px rgba(8,6,4,.45); }
.sw-m__n { font-family: var(--f-display); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; color: var(--gold-hi); }
.sw-m__t { margin: .5em 0 .35em; font-family: var(--f-editorial); font-weight: 400;
  font-size: clamp(1.05rem,1.5vw,1.5rem); line-height: 1.12; }
.sw-m__c { font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(244,239,229,.82); }
.sw-m__glint { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(240,220,172,.32) 50%, transparent 62%);
  background-size: 240% 100%; background-position: 130% 0; transition: opacity .4s; }
.sw-m:hover .sw-m__glint { opacity: 1; animation: glint 1.25s var(--e-out); }
@keyframes glint { from { background-position: 130% 0; } to { background-position: -40% 0; } }

.a-stone { grid-column: span 3; grid-row: span 2; }
.a-timber{ grid-column: span 2; grid-row: span 2; }
.a-hw    { grid-column: span 1; grid-row: span 1; }
.a-cab   { grid-column: span 1; grid-row: span 1; }
.a-side  { grid-column: span 3; grid-row: span 1; }
.a-shake { grid-column: span 3; grid-row: span 1; }
.a-glaze { grid-column: span 3; grid-row: span 1; }
.a-garage{ grid-column: span 3; grid-row: span 1; }
@media (max-width: 900px) {
  .board__grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 42vw; }
  .a-stone { grid-column: span 2; grid-row: span 1; }
  .a-timber, .a-shake, .a-side, .a-glaze, .a-garage { grid-column: span 2; grid-row: span 1; }
  .a-hw, .a-cab { grid-column: span 1; grid-row: span 1; }
}
.board__foot { margin-top: clamp(22px,2.4vw,36px); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px 30px; }

/* ═══════════════════════════════════════ VI · THE EXPERIENCE ══ */
.exp { background: var(--ink); }
.exp__band { position: relative; height: min(78svh, 780px); overflow: hidden; display: grid;
  place-items: center; isolation: isolate; }
/* Headline and caption are one block — a heading with its small print under it —
   rather than two things centred independently, which is how they came to collide.
   Sitting the pair a little above centre keeps the island and the stools visible
   underneath instead of half-buried behind the type. */
.band__say { position: relative; z-index: 2; display: grid; justify-items: center;
  gap: clamp(14px,2vh,26px); text-align: center; padding-inline: var(--pad);
  transform: translateY(clamp(-26px,-2.5vh,-11px)); }
.exp__band img { position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover; z-index: -2;
  transform: translate3d(0, var(--py,0px), 0); }
.exp__band .shaft { position: absolute; inset: 0; z-index: -1; mix-blend-mode: screen; opacity: .9;
  width: 100%; height: 100%; object-fit: cover; }
.exp__band::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(78% 66% at 46% 46%, rgba(9,7,5,.20), rgba(9,7,5,.92)); }
.exp__band h2 { position: relative; z-index: 2; max-width: 22ch;
  font-family: var(--f-editorial); font-weight: 300; font-size: var(--t-d1);
  line-height: 1.0; letter-spacing: -.024em; color: var(--on-dark);
  text-wrap: balance; text-shadow: 0 2px 10px rgba(9,7,5,.5), 0 6px 46px rgba(9,7,5,.72); }
/* The band's vignette was tuned against a dark vector study; the kitchen rendering
   is brightest exactly where this headline sits. Rather than grey the whole render
   down to make type work, the scrim is carried by the type itself — an elliptical
   halo that falls off to nothing well inside the frame edges. */
.band__say::before { content: ""; position: absolute; inset: -16% -13%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 54% at 50% 46%,
    rgba(9,7,5,.62) 0%, rgba(9,7,5,.44) 46%, rgba(9,7,5,.18) 72%, rgba(9,7,5,0) 100%); }
.exp__band h2 em { font-style: italic; color: var(--gold-hi); }
.exp__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut); }
.exp__copy { grid-column: 1 / 6; }
.exp__list { grid-column: 7 / 13; display: grid; gap: 0; }
@media (max-width: 1024px) { .exp__copy, .exp__list { grid-column: 1/13; } .exp__list { margin-top: 40px; } }
.exp__i { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,2.4vw,44px);
  padding-block: clamp(22px,2.6vw,38px); border-top: 1px solid var(--rule-d-2); position: relative; }
.exp__i:last-child { border-bottom: 1px solid var(--rule-d-2); }
.exp__i::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.exp__i:hover::before { transform: scaleX(1); }
.exp__n { font-family: var(--f-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; color: var(--gold); }
.exp__t { font-family: var(--f-editorial); font-size: var(--t-d3); line-height: 1.14;
  margin-bottom: .5em; color: var(--on-dark); }
.exp__d { font-size: var(--t-small); color: var(--on-dark-mu); line-height: 1.75; }

/* ═════════════════════════════════════════ VII · KINGSVILLE ══ */
.king { position: relative; background: var(--ink); }
.king__band { position: relative; height: min(88svh, 900px); overflow: hidden; display: grid;
  align-items: end; isolation: isolate; }
.king__band img { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; z-index: -2;
  transform: translate3d(0, var(--py,0px), 0); }
/* The title is bottom-left over the lake's horizon glow, which is the brightest
   part of the frame. A heavier bottom ramp alone would fix the type and dim the
   sun with it, so the weight is carried by a left-biased wash instead — the same
   device the hero uses — leaving the right of the frame, and the sun, untouched. */
.king__band::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(12,10,7,.76) 0%, rgba(12,10,7,.46) 30%,
                           rgba(12,10,7,.16) 52%, rgba(12,10,7,0) 74%),
    linear-gradient(180deg, rgba(12,10,7,.72) 0%, rgba(12,10,7,0) 32%,
                            rgba(12,10,7,.34) 66%, rgba(12,10,7,.88) 100%); }
.king__ttl { position: relative; z-index: 2; padding: 0 var(--pad) clamp(46px,6vh,90px); }
.king__ttl h2 { font-family: var(--f-editorial); font-weight: 300; font-size: var(--t-d1);
  line-height: .98; letter-spacing: -.024em; max-width: 16ch; text-wrap: balance;
  text-shadow: 0 2px 16px rgba(12,10,7,.55); }
.king__ttl h2 em { font-style: italic; color: var(--gold-hi); }
.king__body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut); }
.king__copy { grid-column: 1 / 6; }
.bearing { grid-column: 7 / 13; border-top: 1px solid var(--rule-d); }
@media (max-width: 1024px) { .king__copy, .bearing { grid-column: 1/13; } .bearing { margin-top: 40px; } }
.bearing__i { display: grid; grid-template-columns: clamp(38px,4vw,66px) 1fr auto;
  gap: clamp(14px,2vw,36px); align-items: center; padding: clamp(16px,1.9vw,28px) 0;
  border-bottom: 1px solid var(--rule-d-2); position: relative; transition: padding-left .55s var(--e-out); }
.bearing__i::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.bearing__i:hover::before { transform: scaleX(1); }
.bearing__i:hover { padding-left: clamp(6px,1vw,16px); }
.bearing__n { font-family: var(--f-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .12em; color: var(--gold); }
.bearing__t { font-family: var(--f-editorial); font-size: clamp(1.3rem,2.4vw,2.1rem);
  line-height: 1.14; color: var(--on-dark); }
.bearing__d { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-fa); text-align: right; }
@media (max-width: 640px) { .bearing__i { grid-template-columns: 34px 1fr; }
  .bearing__d { grid-column: 2; text-align: left; margin-top: 4px; } }

/* ═══════════════════════════════════════════ VIII · REGISTRY ══ */
.reg { position: relative; background: var(--ink-2); overflow: hidden; }
.reg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 46% at 76% 12%, rgba(201,169,106,.13), transparent 66%); }
.reg__in { position: relative; }
.reg__top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut);
  align-items: end; padding-bottom: clamp(40px,4.6vw,76px); border-bottom: 1px solid var(--rule-d-2); }
.reg__h { grid-column: 1 / 8; font-family: var(--f-editorial); font-weight: 300;
  font-size: var(--t-d1); line-height: .98; letter-spacing: -.024em; }
.reg__h em { font-style: italic; color: var(--gold); }
.reg__note { grid-column: 9 / 13; color: var(--on-dark-mu); font-size: var(--t-small); line-height: 1.85; }
@media (max-width: 1024px) { .reg__h, .reg__note { grid-column: 1/13; } .reg__note { margin-top: 26px; } }
.reg__tag { margin-top: 1.2em; color: var(--gold); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; }

.form { margin-top: clamp(38px,4.4vw,70px); display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(22px,2.6vw,44px) var(--gut); }
.f-6 { grid-column: span 6; } .f-12 { grid-column: span 12; }
@media (max-width: 760px) { .f-6 { grid-column: span 12; } }

.field { position: relative; }
.field__ip { width: 100%; padding: 1.4em 0 .9em; background: transparent; color: var(--on-dark);
  border-bottom: 1px solid var(--rule-d); font-size: var(--t-body); font-weight: 400;
  transition: border-color .45s var(--e-out); }
.field__ip::placeholder { color: transparent; }
.field__lb { position: absolute; left: 0; top: 1.4em; pointer-events: none; font-size: var(--t-body);
  font-weight: 400; color: var(--on-dark-fa); transform-origin: left;
  transition: transform .45s var(--e-out), color .45s var(--e-out); }
.field__ip:focus + .field__lb, .field__ip:not(:placeholder-shown) + .field__lb {
  transform: translateY(-1.6em) scale(.66); color: var(--gold); }
.field__ip:focus { outline: none; border-bottom-color: transparent; }
.field__ln { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--e-out); }
.field__ip:focus ~ .field__ln { transform: scaleX(1); }
.field__lb sup { color: var(--gold); }
.field.has-err .field__ip { border-bottom-color: #C2564A; }
.field__err { position: absolute; right: 0; top: 1.6em; font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #DD8579; opacity: 0; transition: opacity .3s; }
.field.has-err .field__err { opacity: 1; }

.sel { position: relative; }
.sel__btn { width: 100%; text-align: left; padding: 1.4em 2em .9em 0;
  border-bottom: 1px solid var(--rule-d); color: var(--on-dark-fa); font-size: var(--t-body);
  font-weight: 400; transition: color .4s, border-color .4s; display: flex;
  justify-content: space-between; align-items: baseline; gap: 14px; }
.sel__btn[data-picked="1"] { color: var(--on-dark); }
.sel__cap { position: absolute; left: 0; top: 0; font-size: calc(var(--t-body) * .66);
  font-weight: 500; color: var(--gold); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px); transition: all .4s var(--e-out); }
.sel__btn[data-picked="1"] ~ .sel__cap, .sel.is-open .sel__cap { opacity: 1; transform: none; }
.sel__ar { width: 7px; height: 7px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translateY(-4px) rotate(45deg); transition: transform .45s var(--e-out); flex: none; }
.sel.is-open .sel__ar { transform: translateY(-1px) rotate(225deg); }
.sel__list { position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 20;
  background: var(--char); border: 1px solid var(--rule-d); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px); max-height: 268px; overflow-y: auto;
  transition: opacity .35s var(--e-out), transform .4s var(--e-out), visibility .35s; }
.sel.is-open .sel__list { opacity: 1; visibility: visible; transform: none; }
.sel__o { display: block; width: 100%; text-align: left; padding: .85em 1em; font-size: var(--t-small);
  color: var(--on-dark-mu); transition: background-color .3s, color .3s; }
.sel__o:hover, .sel__o[aria-selected="true"], .sel__o.is-cursor {
  background: rgba(201,169,106,.14); color: var(--gold-hi); }

.check { display: flex; gap: 15px; align-items: flex-start; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--rule-d);
  position: relative; transition: border-color .4s, background-color .4s; }
.check__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 11px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg) scale(0); transition: transform .35s var(--e-out); }
.check input:checked + .check__box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.check__t { font-size: var(--t-small); line-height: 1.8; color: var(--on-dark-mu); }
.check__t a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.check.has-err .check__box { border-color: #C2564A; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.form__meta { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-fa); }
.reg__done { display: none; text-align: center; padding: clamp(44px,6vw,96px) 0; }
.reg.is-sent .form, .reg.is-sent .reg__top { display: none; }
.reg.is-sent .reg__done { display: block; }
.reg__done img { width: 68px; margin: 0 auto clamp(24px,2.6vw,36px); }
.reg__done .lede { margin: 20px auto 0; text-align: center; }

/* ── ?static=1 · full-page capture for design review ─────────────────── */
.is-static .arr        { min-height: 900px; height: 900px; }
.is-static .exp__band  { height: 700px; }
.is-static .king__band { height: 790px; }
.is-static .ovr        { display: none; }
.is-static [data-rise], .is-static [data-fade], .is-static [data-grow],
.is-static [data-open], .is-static [data-split], .is-static .sw__i, .is-static .sw {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
  transition: none !important; animation: none !important;
}

/* ── V2 refinement pass ─────────────────────────────────────────────── */
.addr__h, .house__h, .reg__h, .king__ttl h2, .exp__band h2 { text-wrap: balance; }

/* a full-bleed band already gives the eye a rest — don't double the padding */
.exp__after, .king__after { padding-block: clamp(64px,5vw,120px) clamp(88px,7vw,186px); }

/* small swatches need smaller type or the tag swallows the material */
.a-hw .sw-m__t, .a-cab .sw-m__t { font-size: clamp(.95rem,1.15vw,1.15rem); }
.a-hw .sw-m__tag, .a-cab .sw-m__tag { padding: clamp(11px,1vw,16px); }

/* the image-slot notes are a review device — one class hides them all */
body.hide-slots .slot, body.hide-slots .board__foot p:last-child { display: none; }

/* ── the back half needs the same tonal rhythm as the front ──────────── */
.exp__room  { background: var(--walnut); position: relative; }
.king__room { background: var(--ivory); position: relative; }
.king__room .bearing { border-top-color: var(--rule-l); }
.king__room .bearing__i { border-bottom-color: var(--rule-l-2); }
.king__room .bearing__i::before { background: var(--gold-paper); }
.king__room .bearing__n { color: var(--gold-paper); }
.king__room .bearing__t { color: var(--on-light); }
.king__room .bearing__d { color: var(--on-light-fa); }
.exp__room .exp__i { border-top-color: rgba(242,235,221,.14); }
.exp__room .exp__i:last-child { border-bottom-color: rgba(242,235,221,.14); }

/* ══════════════════════════════════════════════ SMALL SCREENS ══ */
@media (max-width: 1024px) {
  .plate { padding: clamp(14px,3vw,28px); }
  .plate__paper { overflow: hidden; }          /* the rotated datum label must not push the page */
  .plate__paper svg { overflow: hidden; }
}
@media (max-width: 860px) {
  /* the wordmark stacks so it can stay large without overflowing */
  .arr__word { white-space: normal; font-size: clamp(2.9rem, 15.5vw, 5.6rem); line-height: .98; }
  .arr__word-t { display: block; max-width: 6.2em; }
  .arr__rule { max-width: 100%; }
  .arr__line { max-width: 100%; font-size: 1.05rem; }
  .arr__body { padding-bottom: clamp(18px,3vh,34px); }

  .addr__h, .house__h, .reg__h, .king__ttl h2, .exp__band h2 { font-size: clamp(1.95rem, 8vw, 3.2rem); }
  .exp__band h2 { max-width: 15ch; }
  .king__ttl h2 { max-width: 13ch; }

  .colo__i b { font-size: clamp(2.9rem, 15vw, 4.2rem); }

  .board__grid { grid-auto-rows: 46vw; }
  .sw-m__t { font-size: clamp(1rem,4vw,1.35rem); }
  .a-hw .sw-m__t, .a-cab .sw-m__t { font-size: clamp(.9rem,3.4vw,1.1rem); }

  .exp__i { grid-template-columns: auto 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .plate__cap, .board__foot { flex-direction: column; gap: 8px; }
  .exp__band h2 { max-width: 18ch; }
}
@media (max-width: 620px) {
  .arr__word { font-size: clamp(2.7rem, 16.5vw, 5rem); }
  .arr__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .colo__place { line-height: 1.9; }
}
/* nothing may push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }

/* ══════════════════════════════════ MOTION — the craft V1 got right ══ */

/* — the raking light. Low sun crossing the wordmark, once every eight seconds — */
.arr__word { position: relative; display: inline-block; }
.arr__word-t { display: block; }
.arr__rake {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block;
  background: linear-gradient(96deg,#FBF0D2 0%,#EAD09A 24%,#CBAE70 44%,#F6E7BC 62%,#A8894E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 45%, #000 55%, transparent 66%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 45%, #000 55%, transparent 66%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0;
}
.arr__rake * { color: transparent; -webkit-text-fill-color: transparent; }
.is-arrived .arr__rake { animation: rake 8.5s linear 1.2s infinite, rakeIn 1.6s ease 1s forwards; }
@keyframes rake { 0% { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
                100% { -webkit-mask-position: -60% 0; mask-position: -60% 0; } }
@keyframes rakeIn { to { opacity: 1; } }

/* — the hero image breathes. 48s, imperceptible frame to frame — */
.arr__media img { animation: heroDrift 48s ease-in-out infinite alternate; }
@keyframes heroDrift {
  from { transform: translate3d(0,var(--py,0px),0) scale(1.02); }
  to   { transform: translate3d(-1.4%,var(--py,0px),0) scale(1.075); }
}

/* — the hero waits behind the curtain, then arrives in sequence.
     Hold transform as well as opacity, or only the fade survives the wait. — */
.is-loading .arr [data-rise], .is-loading .arr [data-fade], .is-loading .arr [data-grow] {
  opacity: 0 !important;
}
.is-loading .arr [data-rise] { transform: translateY(clamp(20px,2.6vw,44px)) !important; }
.is-loading .arr [data-grow] { transform: scaleX(0) !important; }
.is-loading .arr .sw__i      { transform: translateY(105%) !important; }

/* — a hairline seam draws wherever the ground changes — */
.seam { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-lift, var(--gold)) 18%,
              var(--gold) 50%, var(--gold-lift, var(--gold)) 82%, transparent);
  opacity: .5; transform-origin: center; }
.on-paper .seam { background: linear-gradient(90deg, transparent, var(--gold-paper) 30%,
              var(--gold-paper) 70%, transparent); opacity: .45; }
.seam[data-grow] { transform: scaleX(0); }
.seam[data-grow].is-in { transform: scaleX(1); transition: transform 1.8s var(--e-out); }

/* — the material sentence lights word by word as you enter the room — */
[data-wordlight] w { display: inline-block; opacity: .24; transition: opacity .55s var(--e-out); }
[data-wordlight] w.on { opacity: 1; }

/* — the numerals rise out of a mask before they count — */
.colo__mask { display: block; overflow: hidden; }
.colo__i b { display: block; transform: translateY(104%); }
.colo__i.is-in b { transform: none;
  transition: transform 1.25s var(--e-out) calc(var(--d,0) * 1ms + 90ms); }

/* — swatches settle rather than simply appear — */
.sw-m img { transform: scale(1.14); transition: transform 1.9s var(--e-out); }
.sw-m.is-in img { transform: scale(1.02); }
.sw-m:hover img { transform: scale(1.08); transition-duration: 1.1s; }

/* — the masthead carries the read position — */
.mast { position: fixed; }
.mast__prog { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold-grad); transform-origin: left; transform: scaleX(var(--sp,0));
  opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .arr__rake, .arr__media img { animation: none !important; }
  .arr__rake { display: none; }
  [data-wordlight] w { opacity: 1 !important; }
  .colo__i b { transform: none !important; }
  .sw-m img { transform: scale(1.02) !important; }
  .seam[data-grow] { transform: scaleX(1) !important; }
}
.is-static .arr__rake { display: none; }
.is-static .colo__i b { transform: none !important; }
.is-static .sw-m img { transform: scale(1.02) !important; }
.is-static [data-wordlight] w { opacity: 1 !important; }
.is-static .arr__media img { animation: none !important; }
/* ?ovr=1 · hold the overture at its last frame */
.hold-ovr .ovr__seam::before { animation: none; transform: scaleX(1); }
.hold-ovr .ovr__mark { animation: none; clip-path: inset(0 0 0 0); }
.hold-ovr .ovr__word span { animation: none; transform: none; }
.hold-ovr .ovr__sub, .hold-ovr .ovr__meta { animation: none; opacity: 1; }

/* — the plate is a big surface: open it as a band, not a keyhole ─────── */
.plate[data-open] { clip-path: inset(50% 0 50% 0); }
.plate[data-open].is-in { clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--e-inout); }
@media (prefers-reduced-motion: reduce) { .plate[data-open] { clip-path: none !important; } }
.is-static .plate[data-open] { clip-path: none !important; }

/* — the interior palette, set the way the client's own brief presents it — */
.palette { margin-top: clamp(26px,3vw,44px); }
.palette__k { font-size: var(--t-micro); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-light-fa); margin-bottom: clamp(10px,1.1vw,16px); }
.palette__bar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.palette__c {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(64px, 7vw, 104px); padding: 1em;
  font-size: var(--t-label); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; text-align: center;
}
.palette__c--wood  { background: var(--mat-wood);  color: #F4EFE5; }
.palette__c--beige { background: var(--mat-beige); color: var(--mat-black); }
.palette__c--black { background: var(--mat-black); color: #F4EFE5; }
@media (max-width: 560px) {
  .palette__bar { grid-template-columns: 1fr; }
  .palette__c { min-height: 54px; }
}

/* — image slots: the study is styled to sit back, a real photo is not ─── */
.is-study-filter { filter: sepia(.42) saturate(1.3) hue-rotate(-12deg) brightness(.34) contrast(1.12); }
[data-photo-state="photo"] .is-study-filter { filter: none; }
[data-photo-state="photo"] .shaft { display: none; }
.exp__band[data-photo-state="photo"]::after {
  background: radial-gradient(86% 74% at 46% 44%, rgba(9,7,5,.10), rgba(9,7,5,.80));
}
.exp__band[data-photo-state="photo"] h2 { text-shadow: 0 6px 44px rgba(9,7,5,.9), 0 2px 10px rgba(9,7,5,.6); }
.exp__band[data-photo-state="photo"]::after {
  background: radial-gradient(92% 80% at 46% 46%, rgba(9,7,5,.06), rgba(9,7,5,.74));
}
.band__note {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,235,221,.70);
  text-shadow: 0 1px 6px rgba(9,7,5,.6);
}
@media (max-width: 620px) { .band__note { letter-spacing: .1em; } }