/* ═══════════════════════════════════════════════════════════════════════
   SOLARA — built to redesign-B.png
   The page is one day in the high desert: dawn → material → roofline →
   the plan → the room → the residences → night. It is the same house the
   whole way down, and the horizon never leaves the screen.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Cormorant';
  src:url('fonts/CormorantGaramond.woff2') format('woff2-variations'),
      url('fonts/CormorantGaramond.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}
/* the latin subset as woff2, not the 856KB full variable TTF — on a 3G
   connection that single file was four seconds of the loader all by itself */
@font-face{
  font-family:'InterLocal';
  src:url('fonts/Inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* sampled from the comp, not invented */
  --cream:#E4DDD4;        /* the ledger panel */
  --cream-rule:#CBC5BE;
  --ink:#241E18;          /* type on cream */
  --ink-soft:#6B6058;
  --brown:#544639;        /* the footer band */
  --night:#171B24;
  --ember:#C87A3C;        /* the one accent — desert light */
  --paper:#EFEAE1;

  --display:'Cormorant', 'Cormorant Garamond', Didot, 'Bodoni 72', Georgia, serif;
  --ui:'InterLocal', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --pad:clamp(22px, 4.9vw, 70px);     /* measured: 50/1024 of the comp */
  --maxw:1440px;

  /* the chapter's ground colour. Every section writes it; the transition on
     :root is what makes the temperature bleed across a boundary instead of
     cutting. See direction.md §4, "colour bleed". */
  --ground:#8E8A80;
}
:root[data-chapter="dawn"]      {--ground:#9A8E77}
:root[data-chapter="material"]  {--ground:#4A3A2C}
:root[data-chapter="roof"]      {--ground:#5A5B60}
:root[data-chapter="plan"]      {--ground:#544032}
:root[data-chapter="interior"]  {--ground:#171009}
:root[data-chapter="residences"]{--ground:var(--cream)}
:root[data-chapter="night"]     {--ground:#242B36}
:root[data-chapter="foot"]      {--ground:var(--brown)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}
body{
  position:relative;      /* the through-line layer measures against THIS */
  margin:0; background:var(--ground); color:#F3EFE8;
  font-family:var(--ui); font-size:16px; line-height:1.6;
  overflow-x:clip;                       /* clip, never hidden — see pitfalls */
  transition:background-color 1.1s cubic-bezier(.4,0,.2,1);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
table{border-collapse:collapse}

/* ── the loader: hides decode and the first paint ───────────────────── */
.load{
  position:fixed; inset:0; z-index:90; display:grid; place-content:center; gap:26px;
  background:#12100E; transition:opacity .8s ease, visibility .8s;
}
.load.done{opacity:0; visibility:hidden}
.load__mark{
  font-family:var(--display); font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.42em; color:#EFE7DA; text-indent:.42em; text-align:center;
}
.load__bar{width:min(210px,42vw); height:1px; background:rgba(239,231,218,.22); overflow:hidden}
.load__bar i{
  display:block; height:100%; width:100%; background:#EFE7DA;
  transform:scaleX(var(--lp,0)); transform-origin:left; transition:transform .35s ease;
}

/* ── the through-line ───────────────────────────────────────────────────
   One page-level SVG spanning the document. It is drawn to the FOLD, so its
   leading edge is always a viewport behind the reader and never seen arriving.
   The layer stretches non-uniformly, so it is revealed by clipping rather than
   dashing, and the stroke is non-scaling so its width stays even. */
.tl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  clip-path:inset(0 0 calc((1 - var(--tlp,0)) * 100%) 0);
}
.tl__p{
  fill:none; stroke:rgba(240,228,206,.5); stroke-width:1;
  mix-blend-mode:overlay;
}

/* ── nav: hit-tests what is actually painted, inverts over the light panel ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(20px,2.6vw,34px) var(--pad);
  color:#F3EFE8; mix-blend-mode:normal;
  transition:color .5s ease, transform .5s cubic-bezier(.22,.9,.24,1), opacity .4s;
}
.nav__mark.is-light,.nav__links.is-light{color:var(--ink)}
.nav__mark.is-light{opacity:.9}
.nav.is-hidden{transform:translateY(-104%); opacity:0}
.nav__mark{
  font-family:var(--display); font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.4em; text-indent:.4em; font-weight:400;
}
/* data-theme describes a section, but the nav sits over one corner of it —
   and the material chapter's top-left corner is sunlit stone, where white type
   disappears. Each nav group needs its own protection, which lifts the moment
   that group inverts to ink over the ledger.

   This used to be a radial-gradient box behind each group. Over an open sky
   the two boxes read as two dark smudges floating in the picture — there is
   no edge for them to belong to. A shadow carried by the glyphs does the same
   legibility job and has no shape of its own to notice. */
.nav__mark,.nav__links{position:relative}
/* One vignette across the whole bar, anchored to the top edge of the frame,
   rather than a soft box behind each group. A shade that belongs to an edge
   reads as light; the same shade floating in open sky reads as a smudge. */
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:158px; z-index:-1;
  pointer-events:none;
  /* Not paint — exposure. A fixed shade cannot work here: a chapter is not one
     brightness, and the dawn hero alone runs from dark sky at the top to a lit
     horizon at the bottom, which slides under the bar as you scroll. Dimming
     the backdrop is proportional by nature — near-invisible over the night
     chapters, and it pulls sunlit stone down exactly as far as it is bright.
     Masked so it fades out instead of ending on a hard edge. */
  backdrop-filter:brightness(.47) saturate(1.08);
  -webkit-backdrop-filter:brightness(.47) saturate(1.08);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 44%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 44%,transparent 100%);
  transition:opacity .7s ease;
}
@supports not ((backdrop-filter:brightness(.6)) or (-webkit-backdrop-filter:brightness(.6))){
  .nav::before{background:linear-gradient(to bottom,
    rgba(12,8,5,.5) 0%, rgba(12,8,5,.24) 46%, rgba(12,8,5,0) 100%)}
}

.nav:has(.nav__mark.is-light):has(.nav__links.is-light)::before{opacity:0}
.nav:has(.nav__mark.is-light):not(:has(.nav__links.is-light))::before{
  -webkit-mask-image:linear-gradient(to right, transparent 34%, #000 60%);
          mask-image:linear-gradient(to right, transparent 34%, #000 60%);
}
.nav:has(.nav__links.is-light):not(:has(.nav__mark.is-light))::before{
  -webkit-mask-image:linear-gradient(to left, transparent 34%, #000 60%);
          mask-image:linear-gradient(to left, transparent 34%, #000 60%);
}
.nav__mark,.nav__links a{
  text-shadow:0 1px 2px rgba(12,8,5,.8), 0 0 11px rgba(12,8,5,.62);
  transition:text-shadow .45s ease;
}
.nav__mark.is-light,.nav__links.is-light a{text-shadow:none}
.nav__links{display:flex; gap:clamp(20px,3.1vw,46px)}
.nav__links a{
  font-family:var(--display); font-size:clamp(10px,.86vw,12px);
  letter-spacing:.24em; text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.22,.9,.24,1);
}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
@media (max-width:720px){ .nav__links{display:none} }

/* ══ a chapter ═══════════════════════════════════════════════════════════ */
.ch{
  position:relative; min-height:100svh;      /* min-height, never height */
  display:grid; align-items:center;
  padding:clamp(124px,15vh,176px) var(--pad) clamp(96px,11vh,150px);
  overflow:clip;
}
.ch__media{position:absolute; inset:0; overflow:clip; z-index:0}
.ch__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--z,1.08)) translate3d(var(--mx,0),var(--my,0),0);
  will-change:transform;
}
.ch__copy{
  position:relative; z-index:3;
  max-width:min(680px, 54%);
  justify-self:start;
}
.ch__copy--right{justify-self:end; text-align:right}

.d1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(38px, 5.3vw, 76px); line-height:1.04;
  letter-spacing:-.006em; margin:0;
  text-shadow:0 2px 40px rgba(20,14,8,.34);
}
.eyebrow{
  font-family:var(--ui); font-size:11px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(243,239,232,.72); margin:0 0 clamp(14px,1.6vw,20px);
}
.lede{
  font-family:var(--ui); font-size:clamp(13px,1.03vw,15px); font-weight:300;
  line-height:1.72; color:rgba(243,239,232,.82);
  margin:clamp(18px,2.2vw,28px) 0 0; max-width:36ch;
}
.ch__copy--right .lede{margin-left:auto}

/* the link: a rule that draws, and an arrow that leaves before it returns */
.cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(20px,2.6vw,32px); padding-bottom:7px; position:relative;
  font-family:var(--ui); font-size:10.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:inherit;
}
.cta span{position:relative; padding-bottom:7px}
.cta span::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.5; transition:opacity .3s;
}
.cta:hover span::after{opacity:1}
.cta__r{
  width:26px; height:1px; background:currentColor; position:relative; flex:none;
  transition:transform .45s cubic-bezier(.22,.9,.24,1);
}
.cta__r::after{
  content:""; position:absolute; right:0; top:-2.5px;
  width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); transform-origin:right center;
}
.cta:hover .cta__r{transform:translateX(7px)}
.cta--ink{color:var(--ink)}

/* ── the colour bleed ──────────────────────────────────────────────────
   A join, not a cut: every chapter opens in the temperature of the one
   before it and clears within a screen-sixth, so the palette changes while
   you are still reading the previous frame. --ground alone could not do this
   — every chapter is full-bleed, so the body colour behind them is never
   actually seen. */
.ch::before{
  content:""; position:absolute; inset:0 0 auto 0; height:17vh;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--from, transparent), transparent);
}
.hero::before,.res::before{display:none}       /* first frame; and the ledger wipes */
.mat  {--from:rgba(154,142,119,.60)}           /* dawn bleeds in */
.roof {--from:rgba(74,58,44,.66)}              /* the stone */
.plan {--from:rgba(90,91,96,.58)}              /* the sky */
.int  {--from:rgba(84,64,50,.66)}              /* the ground */
.night{--from:rgba(214,206,196,.30)}           /* the last of the light */
.foot{position:relative}
.foot::before{
  content:""; position:absolute; inset:0 0 auto 0; height:120px; z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(23,27,36,.72), transparent);
}
.foot__top,.foot__bar{position:relative; z-index:1}

/* ── 01 hero ────────────────────────────────────────────────────────── */
.hero{align-content:center}
.hero__media::after{               /* generated in-camera empty sky + one scrim */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(24,18,12,.5) 0%, rgba(24,18,12,.14) 42%, transparent 66%);
}
.hero__copy{max-width:min(820px,62%)}
.hero .d1{font-size:clamp(42px,6.4vw,92px)}
.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(28px,4.4vh,54px); z-index:3;
  display:flex; align-items:center; gap:13px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(243,239,232,.7);
}
.hero__scroll i{
  width:1px; height:36px; background:linear-gradient(180deg,currentColor,transparent);
  animation:drop 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}
                45%{transform:scaleY(1); transform-origin:top}
                46%{transform:scaleY(1); transform-origin:bottom}
                100%{transform:scaleY(0); transform-origin:bottom}}

/* ── 02 material — the copy sits in the dark right third of the frame ── */
.mat__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(16,11,7,.78) 0%, rgba(16,11,7,.5) 26%, rgba(16,11,7,.12) 50%, transparent 68%);
}

/* ── 03 roofline — copy in the empty sky at left ─────────────────────── */
.roof__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,24,30,.5) 0%, rgba(22,24,30,.08) 46%, transparent 68%);
}

/* ── 04 the plan — the page's one pinned scene ───────────────────────────
   story.js moves every child into a sticky .pin-inner, so the gutter, the
   alignment and the positioning context all belong to that element now —
   not to the section, which is only the scroll distance the pin spends. */
.plan{padding:0}
.plan > .pin-inner{
  padding:clamp(124px,15vh,176px) var(--pad) clamp(96px,11vh,150px);
  align-content:center; justify-items:start;
}
.plan__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(28,18,10,.8) 0%, rgba(28,18,10,.42) 40%, rgba(28,18,10,.5) 100%);
}
.plan__copy{max-width:min(460px,38%)}
.plan__svg{
  position:absolute; z-index:2; pointer-events:none;
  right:clamp(14px,3.4vw,66px); top:50%; transform:translateY(-50%);
  width:min(52vw, 640px); height:auto;
  overflow:visible;
  filter:drop-shadow(0 1px 2.5px rgba(16,9,3,.95));  /* so it reads on gravel */
}
/* The generated ground came back far busier and hotter than the comp's, and a
   0.5px hairline cannot survive that. Rather than dulling the whole photograph,
   lay one pool of shade exactly where the drawing lands — the frame keeps its
   texture everywhere else. */
.plan__media::before{
  content:""; position:absolute; z-index:1; right:-6%; top:50%;
  width:min(92vw,1180px); height:min(96vh,860px); transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(22,13,5,.8), rgba(22,13,5,.42) 52%, rgba(22,13,5,0) 82%);
}
.plan__svg .dr{
  fill:none; stroke:#F7EFE0; stroke-width:1.15; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,1200); stroke-dashoffset:calc(var(--len,1200) * (1 - var(--draw,0)));
}
.plan__svg .roofline{
  stroke-dasharray:7 6 !important; stroke-dashoffset:0 !important;
  stroke:rgba(247,239,224,.42);
  opacity:var(--draw,0);          /* a dashed line can't dash-reveal — fade it */
}
.plan__svg .faint{stroke:rgba(247,239,224,.5)}
.plan__svg .tick{stroke:rgba(247,239,224,.6)}
.plan__svg .grade{stroke:rgba(247,239,224,.42)}
.plan__dim .dr{stroke:rgba(247,239,224,.62); stroke-width:1}
.plan__dim text{
  fill:rgba(247,239,224,.9); font-family:var(--ui); font-size:11.5px;
  letter-spacing:.08em; text-anchor:middle;
  opacity:var(--dim,0); transition:opacity .5s ease;
  paint-order:stroke; stroke:rgba(16,9,3,.75); stroke-width:2.5px;
}
.plan__dim text.rot{transform:rotate(-90deg); transform-origin:604px 163px}
.plan__dim text.lbl{
  text-anchor:start; font-size:9.5px; letter-spacing:.22em;
  fill:rgba(247,239,224,.62);
}
.plan__stats{
  position:absolute; left:var(--pad); bottom:clamp(40px,7vh,86px); z-index:3;
  display:flex; gap:clamp(26px,4vw,64px); flex-wrap:wrap;
  opacity:var(--stats,0); transform:translateY(calc((1 - var(--stats,0)) * 16px));
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.9,.24,1);
}
.plan__stats div{display:flex; flex-direction:column; gap:7px}
.plan__stats b{
  font-family:var(--display); font-weight:300; font-size:clamp(28px,3.1vw,44px);
  line-height:1; font-variant-numeric:tabular-nums;
}
.plan__stats span{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(243,239,232,.6);
}

/* ── 05 interior — the view opens ────────────────────────────────────── */
.int__media{background:#0A0704}
.int__media img{clip-path:inset(0 var(--open,0) 0 var(--open,0))}
.int__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(6,4,3,.93) 0%, rgba(6,4,3,.86) 17%, rgba(6,4,3,.48) 36%, rgba(6,4,3,.1) 58%, transparent 72%);
}

/* ── 06 the residences — the one light panel on the page ─────────────── */
.res{
  min-height:auto; padding:0; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
  background:var(--night);
}
.res__panel{
  background:var(--cream); color:var(--ink); position:relative; z-index:3;
  display:flex; align-items:center;
  padding:clamp(56px,7.4vw,104px) 0 clamp(56px,7.4vw,104px) var(--pad);
  clip-path:inset(0 0 var(--wipe,100%) 0);     /* wipes UP over the dark */
  transition:clip-path 1.15s cubic-bezier(.22,.9,.24,1);
}
.res.in .res__panel{--wipe:0%}
.res__inner{width:100%; max-width:640px; padding-right:clamp(28px,3.6vw,56px)}
.res__h{
  font-family:var(--display); font-weight:300; margin:0 0 clamp(28px,3.4vw,46px);
  font-size:clamp(32px,3.9vw,56px); line-height:1.06; letter-spacing:-.004em;
}
/* The photograph is portrait, so once it decoded its intrinsic 2:3 pushed the
   grid row from 751px to 1080px — a 329px shift after load, and the reason the
   page briefly could not be scrolled to its own footer. Out of flow it goes. */
.res__photo{position:relative; overflow:clip; min-height:clamp(380px,46vw,620px)}
.res__photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.1) translate3d(0,var(--my,0),0);
}

.led{width:100%; font-family:var(--ui); font-variant-numeric:tabular-nums}
.led th{
  text-align:left; font-weight:400; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft);
  padding:0 14px 13px 0; border-bottom:1px solid var(--cream-rule);
}
.led td{
  font-family:var(--display); font-size:clamp(15px,1.32vw,19px); font-weight:400;
  padding:clamp(13px,1.5vw,19px) 14px clamp(13px,1.5vw,19px) 0;
  border-bottom:1px solid rgba(203,197,190,.5); color:var(--ink);
}
.led tbody tr:last-child td{border-bottom:0}
.led td:first-child{color:var(--ink-soft); font-family:var(--ui); font-size:12px; letter-spacing:.1em}
.led th:nth-child(n+4),.led td:nth-child(n+4){width:12%}
/* each row arrives on its own beat, and lights on hover */
.led tbody tr{
  opacity:0; transform:translateY(9px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.9,.24,1), background-color .3s;
}
.res.in .led tbody tr{opacity:1; transform:none}
.res.in .led tbody tr:nth-child(1){transition-delay:.42s}
.res.in .led tbody tr:nth-child(2){transition-delay:.50s}
.res.in .led tbody tr:nth-child(3){transition-delay:.58s}
.res.in .led tbody tr:nth-child(4){transition-delay:.66s}
.res.in .led tbody tr:nth-child(5){transition-delay:.74s}
.led tbody tr:hover td{color:var(--ember)}
@media (max-width:900px){
  .res{grid-template-columns:1fr}
  .res__photo{min-height:56vw; order:-1}
  .res__panel{padding:clamp(48px,9vw,80px) var(--pad)}
  .res__inner{padding-right:0}
}
/* ── the ledger, narrow ────────────────────────────────────────────────
   Six columns cannot hold their meaning at 390px — the place names wrap and
   the headers break mid-word. Each residence becomes two lines instead: who
   and how much, then the specification under it, labelled in place of a
   header row that is no longer there. */
@media (max-width:640px){
  .led thead{display:none}
  .led tbody tr{
    display:grid; grid-template-columns:auto 1fr auto;
    column-gap:14px; row-gap:7px; align-items:baseline;
    padding:clamp(15px,4vw,20px) 0;
    border-bottom:1px solid rgba(203,197,190,.55);
  }
  .led tbody tr:last-child{border-bottom:0}
  .led td{border:0; padding:0}
  /* both rows share the same three columns, and every cell is nowrap — the
     column then sizes to the wider of the two things stacked in it, which is
     what stops "3,024 SQ FT" breaking across three lines. */
  .led td{white-space:nowrap}
  .led td:nth-child(1){grid-area:1/1}
  .led td:nth-child(2){grid-area:1/2; font-size:19px}
  .led td:nth-child(3){grid-area:1/3; text-align:right}
  .led td:nth-child(n+4){
    font-family:var(--ui); font-size:9.5px; font-weight:400;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  }
  .led td:nth-child(4){grid-area:2/1}
  .led td:nth-child(4)::after{content:" BD"}
  .led td:nth-child(5){grid-area:2/2}
  .led td:nth-child(5)::after{content:" BA"}
  .led td:nth-child(6){grid-area:2/3; text-align:right}
  .led td:nth-child(6)::after{content:" SQ FT"}
}

/* ── 07 night — the last frame answers the first ─────────────────────── */
.night__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,13,20,.66) 0%, rgba(10,13,20,.2) 44%, transparent 70%);
}
.stars{
  position:absolute; inset:0 0 42% 0; z-index:1; pointer-events:none;
  opacity:var(--st,0); transition:opacity 1.6s ease;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 24%, rgba(255,250,240,.9), transparent),
    radial-gradient(1px 1px at 31% 12%, rgba(255,250,240,.75), transparent),
    radial-gradient(1.2px 1.2px at 47% 31%, rgba(255,250,240,.85), transparent),
    radial-gradient(1px 1px at 63% 9%,  rgba(255,250,240,.7), transparent),
    radial-gradient(1.3px 1.3px at 76% 26%, rgba(255,250,240,.9), transparent),
    radial-gradient(1px 1px at 88% 15%, rgba(255,250,240,.7), transparent),
    radial-gradient(1px 1px at 22% 40%, rgba(255,250,240,.55), transparent),
    radial-gradient(1px 1px at 56% 45%, rgba(255,250,240,.5), transparent);
}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:3; background:var(--brown); color:#E8DFD2;
  padding:clamp(48px,5.6vw,78px) var(--pad) 0;
}
.foot__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:36px;
  flex-wrap:wrap; padding-bottom:clamp(34px,4.4vw,58px);
}
.foot__brand{display:flex; align-items:baseline; gap:clamp(14px,2vw,30px); flex-wrap:wrap}
.foot__mark{
  font-family:var(--display); font-size:clamp(15px,1.32vw,19px);
  letter-spacing:.4em; text-indent:.4em; position:relative;
}
.foot__mark::after{      /* where the through-line comes to rest */
  content:""; position:absolute; left:0; right:.4em; bottom:-9px; height:1px;
  background:currentColor; opacity:.55;
  transform:scaleX(var(--sign,0)); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.9,.24,1);
}
.foot__brand em{
  font-family:var(--display); font-style:italic; font-size:13.5px;
  color:rgba(232,223,210,.72);
}
.foot__nav,.foot__soc{display:flex; gap:clamp(16px,2.4vw,36px); flex-wrap:wrap}
.foot__nav a,.foot__soc a{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,223,210,.8); transition:color .3s;
}
.foot__nav a:hover,.foot__soc a:hover{color:var(--ember)}
.foot__bar{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(232,223,210,.16);
  padding:18px 0 22px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,223,210,.5);
}
.foot__bar a{margin-left:16px}

/* ── reveals ─────────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.22,.9,.24,1), transform .8s cubic-bezier(.22,.9,.24,1)}
.rv.in{opacity:1; transform:none}
.d1s{transition-delay:.08s}.d3{transition-delay:.30s}.d4{transition-delay:.42s}.d5{transition-delay:.56s}

@media (max-width:760px){
  .ch__copy,.hero__copy,.plan__copy{max-width:none; justify-self:start; text-align:left}
  .ch__copy--right{justify-self:start; text-align:left}
  .ch__copy--right .lede{margin-left:0}
  .plan__svg{position:relative; right:auto; top:auto; transform:none;
             width:100%; margin-top:34px; order:2}
  .plan{align-content:end}
  .plan__stats{position:relative; left:auto; bottom:auto; margin-top:32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
                       transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
  .ch__media img{transform:scale(1.02)}
  .res__panel{clip-path:none}
  .led tbody tr{opacity:1; transform:none}
  .plan__svg .dr{stroke-dashoffset:0}
  .plan__dim text{opacity:1}
  .plan__stats{opacity:1; transform:none}
  .stars{opacity:.8}
  .foot__mark::after{transform:scaleX(1)}
  .tl{clip-path:none}
  .hero__scroll i{animation:none}
}