/* SIXTH VISION COMMERCIAL — CONSOLIDATED DESIGN SYSTEM & CHAPTER STYLES (v250) */
/* --- MODULE: system.css --- */
/* ============================================================================
   SIXTH VISION COMMERCIAL — DESIGN SYSTEM
   "THE LIGHT CHANGES"

   ONE variable — --sun (0 → 1) — drives every colour in the document.
   Nothing is hard-coded per section. If you are writing a hex value inside a
   chapter stylesheet, you are doing it wrong: derive it from --sun here.

   Light stops (ART-DIRECTION §2):
     0.00 Dawn      #F4F5F3  cool porcelain
     0.25 Morning   #F7F6F2  neutral alabaster
     0.50 Midday    #F8F5EE  warm paper
     0.75 Afternoon #F6EFE2  amber cream
     1.00 Golden    #F2E7D3  low gold
   ========================================================================= */

/* --- 1. FACES ------------------------------------------------------------ */
/* Fraunces ships with default instance wght=900 / opsz=9. Both MUST be set
   explicitly via font-variation-settings everywhere, or display type renders
   as black-weight small-optical. Never rely on font-weight for Fraunces. */
@font-face{
  font-family:Fraunces;
  src:url(../fonts/fraunces-variable.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Jost;
  src:url(../fonts/jost-variable.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* Fraunces italic — the gold emphasis word. Ankkush's residential site sets its
   key word this way ("has its hour.") and it is the single strongest signal of
   his taste, so the commercial site shares it. */
@font-face{
  font-family:Fraunces;
  src:url(../fonts/fraunces-italic.woff2) format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}

/* --- 2. THE LIGHT SCALE -------------------------------------------------- */
@property --sun{ syntax:'<number>'; initial-value:0.5; inherits:true; }

:root{
  /* 0.5 = Midday. This is the no-JS / no-scroll fallback and it is correct:
     a static page should sit in the middle of the light journey. */
  --sun:0.5;

  /* piecewise segment weights — each 0→1 across its quarter of the ramp */
  --s1:clamp(0, calc( var(--sun)        * 4), 1);
  --s2:clamp(0, calc((var(--sun) - .25) * 4), 1);
  --s3:clamp(0, calc((var(--sun) - .50) * 4), 1);
  --s4:clamp(0, calc((var(--sun) - .75) * 4), 1);

  /* ground — interpolated through all five stops, in oklab */
  --stop-0:#F4F5F3;  --stop-1:#F7F6F2;  --stop-2:#F8F5EE;
  --stop-3:#F6EFE2;  --stop-4:#F2E7D3;
  --_gA:color-mix(in oklab, var(--stop-0), var(--stop-1) calc(var(--s1) * 100%));
  --_gB:color-mix(in oklab, var(--_gA),    var(--stop-2) calc(var(--s2) * 100%));
  --_gC:color-mix(in oklab, var(--_gB),    var(--stop-3) calc(var(--s3) * 100%));
  --ground:color-mix(in oklab, var(--_gC), var(--stop-4) calc(var(--s4) * 100%));

  /* deeper ground — one shade below --ground at every stop, tracking the same
     light journey. This is the MAT colour: the wall a framed piece hangs on,
     and the tone behind an image while it loads. Derived from the five --stop-*
     values above rather than picked independently, so the contrast harness
     results for --ground still hold for anything set on it.
     Use this for section fills. Never use --accent or --accent-ink as a
     background — they are tuned for text contrast and render as a dirty patch. */
  --stop-d0:#E9EBE7; --stop-d1:#EDEBE4; --stop-d2:#EEEADE;
  --stop-d3:#EBE2CF; --stop-d4:#E6D8BE;
  --_dA:color-mix(in oklab, var(--stop-d0), var(--stop-d1) calc(var(--s1) * 100%));
  --_dB:color-mix(in oklab, var(--_dA),     var(--stop-d2) calc(var(--s2) * 100%));
  --_dC:color-mix(in oklab, var(--_dB),     var(--stop-d3) calc(var(--s3) * 100%));
  --ground-deep:color-mix(in oklab, var(--_dC), var(--stop-d4) calc(var(--s4) * 100%));

  /* ink warms but never reaches black */
  --ink:color-mix(in oklab, #14161A, #241C12 calc(var(--sun) * 100%));

  /* muted ink — labels, secondary. AA at every stop (6.27–7.06:1). */
  --muted:color-mix(in oklab, #5E5A52, #5A4A34 calc(var(--sun) * 100%));

  /* ACCENT IS SPLIT — this is deliberate, do not merge them.
     --accent      decorative ONLY (rules, marks, strokes). 3.82–5.18:1.
     --accent-ink  ALL accent TEXT. 4.60–5.24:1, AA at every stop.
     ART-DIRECTION §2 specifies #8A7A5E at dawn, but that is 3.82:1 on
     #F4F5F3 — it fails the document's own "≥4.5:1 at all five stops" rule.
     --accent-ink is that colour darkened 10% until it clears AA. */
  --accent:color-mix(in oklab, #8A7A5E, #7A5A22 calc(var(--sun) * 100%));
  /* decorative gold — rules, marks, flourishes. NEVER text (fails AA). Warmer
     and more saturated than --accent, matching the residential brand. */
  --gold:color-mix(in oklab, #C2A04A, #B08A22 calc(var(--sun) * 100%));
  --accent-ink:color-mix(in oklab, #7C6D54, #7A5A22 calc(var(--sun) * 100%));

  /* hairlines — 1px at 13% ink. Never a shadow. Never a rounded card. */
  --hair:color-mix(in srgb, var(--ink) 13%, transparent);
  --hair-strong:color-mix(in srgb, var(--ink) 22%, transparent);

  /* --- GLASS — the panel material -------------------------------------- *
     One material for every mounted surface in the chapters: the film bevel,
     the placard, the exhibition plates. A flat #fff panel on a near-white
     ground has no material quality at all — it reads as a slab of paper,
     which is exactly what made the old film mat look like a chunky border.

     Glass here is built from four things, in this order:
       1. a FACE that is a gradient, not a flat fill — light falling from the
          upper left, so the panel has an orientation in the light;
       2. a gold CATCHLIGHT hairline along the top edge, fading out along its
          length — the bright line where light catches a real glass edge;
       3. an inset white lip at the top and a faint dark lip at the bottom —
          this pair is what reads as THICKNESS rather than a flat rectangle;
       4. a layered ambient + contact shadow, so it floats off the wall.
     All of it derives from --ground/--ground-deep/--gold, so it follows the
     light journey. Never --accent as a fill — that is a text-contrast token
     and renders as a dirty patch. */
  /* The face must span a range you can actually SEE. A first pass ran
     #fff 97% -> 81% mixed with the ground, about four levels end to end —
     invisible, so the panel just read as flat paper. It needs a real light
     direction: near-white where the light lands, carrying the deep ground tone
     in the far corner. Still unmistakably a light mat, never grey. */
  --glass-face:linear-gradient(157deg,
    #fff 0%,
    color-mix(in oklab, #fff 86%, var(--ground-deep)) 44%,
    color-mix(in oklab, #fff 58%, var(--ground-deep)) 100%);
  --glass-edge:color-mix(in srgb, var(--ink) 9%, transparent);
  /* the top-edge catchlight — this is the "small golden line above" */
  --glass-lip:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--gold) 88%, transparent) 14%,
    color-mix(in srgb, var(--gold) 46%, transparent) 58%,
    color-mix(in srgb, var(--gold) 12%, transparent) 86%,
    transparent 100%);
  /* the thickness pair — always applied together, always inset. A bright white
     top lip and a faint dark bottom lip read as edge thickness; the third line
     is a soft warm glow pooling along the bottom inside — the light that fell on
     the face reflecting back up off the mat, which is what completes the read
     from "top-lit rectangle" to "a whole pane of glass". */
  --glass-thick:inset 0 1px 0 rgba(255,255,255,.95),
                inset 0 -1px 0 rgba(28,25,20,.06),
                inset 0 -7px 15px -8px color-mix(in srgb, var(--gold) 24%, transparent);
  /* float depth, three tiers */
  --sh-float-sm:0 1px 1px rgba(28,25,20,.03), 0 5px 12px rgba(28,25,20,.045),
                0 14px 32px rgba(28,25,20,.055);
  --sh-float-md:0 1px 1px rgba(28,25,20,.035), 0 8px 18px rgba(28,25,20,.052),
                0 26px 58px rgba(28,25,20,.075);
  --sh-float-lg:0 2px 2px rgba(28,25,20,.04), 0 14px 30px rgba(28,25,20,.06),
                0 44px 96px rgba(28,25,20,.095);
}

/* Solid fallbacks wherever color-mix is unavailable — glass degrades to a
   plain warm panel rather than disappearing. */
@supports not (background:color-mix(in oklab, #000, #fff 50%)){
  :root{
    --glass-face:linear-gradient(157deg,#FFFFFF 0%,#FAF8F2 54%,#F4F1E7 100%);
    --glass-edge:rgba(26,25,22,.09);
    --glass-lip:linear-gradient(90deg,transparent,rgba(194,160,74,.88) 14%,rgba(194,160,74,.20) 70%,transparent);
    /* the warm bottom glow uses color-mix; drop it here so the whole box-shadow
       stays valid and the thickness pair still renders */
    --glass-thick:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(28,25,20,.06),
                  inset 0 -7px 15px -8px rgba(194,160,74,.24);
  }
}

:root{

  /* --- type scale — fixed steps, nothing between them ------------------- */
  --t-160:clamp(58px, 11.1vw, 160px);
  --t-120:clamp(46px,  8.4vw, 120px);
  --t-96 :clamp(38px,  6.7vw,  96px);
  --t-72 :clamp(32px,  5.0vw,  72px);
  --t-60 :clamp(30px,  4.2vw,  60px);
  --t-48 :clamp(28px,  3.4vw,  48px);
  --t-32 :clamp(24px,  2.3vw,  32px);
  --t-24 :24px; --t-20:20px; --t-18:18px; --t-16:16px; --t-14:14px; --t-12:12px;

  /* --- tracking — fixed ------------------------------------------------- */
  --tr-hero:-.055em; --tr-display:-.04em; --tr-head:-.025em;
  --tr-body:-.008em; --tr-caps:.18em;

  /* --- spine ------------------------------------------------------------ */
  --gutter:clamp(20px, 5.2vw, 84px);
  --measure:60ch;                    /* 58–64ch max. Never wider. */

  /* --- motion — camera, not CSS ----------------------------------------- */
  --dolly:cubic-bezier(.16,1,.3,1);
  --dur-slow:2.2s; --dur-mid:1.6s; --dur-fast:1.1s;
}

/* Browsers without color-mix get the Midday palette, flat. */
@supports not (color:color-mix(in oklab, #000, #fff 50%)){
  :root{
    --ground:#F8F5EE; --ground-deep:#EEEADE; --ink:#1A1916; --muted:#5C5243;
    --accent:#826A40; --accent-ink:#7B643B;
    --hair:rgba(26,25,22,.13); --hair-strong:rgba(26,25,22,.22);
  }
}

/* --- 3. RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Jost, ui-sans-serif, system-ui, sans-serif;
  font-size:var(--t-18); line-height:1.55; letter-spacing:var(--tr-body);
  font-weight:380;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block; max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}

/* ::selection — a soft warm wash, NOT a solid gold block (v2 bug). */
::selection{background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--ink)}

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

/* Skip link — off-screen until focused, then a proper glass chip at top-left.
   Keyboard users otherwise have to tab the whole header before reaching content. */
.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-160%); transition:transform .25s var(--dolly);
  padding:12px 20px; background:var(--ink); color:var(--ground);
  font-size:var(--t-14); font-weight:500; text-decoration:none;
  box-shadow:0 8px 24px rgba(20,22,26,.28);
}
.skip:focus{transform:translateY(0)}

/* Images must never be the reason a layout shifts: every <img> in the build
   carries width/height, and this keeps the aspect honest when CSS resizes it. */
img{max-width:100%}

/* --- 4. TYPE PRIMITIVES -------------------------------------------------- */
.display{
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 144, 'wght' 340, 'SOFT' 22, 'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.94; text-wrap:balance;
}
.hero-type{
  font-family:Fraunces, Georgia, serif;
  /* opsz at the top of the axis — genuinely different letterforms at 160px */
  font-variation-settings:'opsz' 144, 'wght' 300, 'SOFT' 30, 'WONK' 1;
  font-size:var(--t-160); letter-spacing:var(--tr-hero); line-height:.855;
}
.eyebrow{
  font-family:Jost, sans-serif; font-weight:520;
  font-size:var(--t-12); letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--muted);
}
.deck{
  font-size:var(--t-20); line-height:1.5; letter-spacing:var(--tr-body);
  color:var(--ink); max-width:var(--measure); font-weight:360;
}
/* Numbers are typography — not technical overlay. */
.figure{
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 96, 'wght' 300, 'SOFT' 18, 'WONK' 0;
  letter-spacing:var(--tr-head); line-height:1; font-feature-settings:'tnum' 1;
}
/* An authored line. Line breaks in display type are TYPOGRAPHY, not
   animation — this must not live behind .reveal-ready, or the breaks
   collapse into arbitrary reflow whenever JS is absent or motion is
   reduced. (It did exactly that in the first pass.) */
.l{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- 5. WORDMARK LOCKUP -------------------------------------------------- */
/* mark / hairline / descriptor, all sharing one measure. The descriptor is
   optically justified to the exact width of the mark — not centred, not
   arbitrarily tracked. That edge alignment is the whole idea. */
.lockup{display:inline-block; color:var(--ink)}
.lockup__mark{width:var(--lockup-w, 132px); height:auto; fill:currentColor}
.lockup__rule{
  display:block; width:var(--lockup-w, 132px); height:1px;
  background:var(--hair-strong); margin:7px 0 5px;
}
/* COMMERCIAL is the specialisation — the reason this is a distinct, higher-value
   business from the residential brand. So the descriptor reads in full ink, not
   faint grey: unmistakable, but still restrained (small, letter-justified to the
   mark). Highlighted by clarity, not by shouting. */
.lockup__sub{
  display:flex; justify-content:space-between;
  width:var(--lockup-w, 132px);
  font-family:Jost, sans-serif; font-size:10px; font-weight:560;
  text-transform:uppercase; color:var(--ink); line-height:1;
}
.lockup__sub i{font-style:normal}

/* --- 6. HAIRLINE RULE ---------------------------------------------------- */
.rule{height:1px; background:var(--hair); border:0; width:100%}

/* --- 7. GRAIN — 5.5%, felt never seen ------------------------------------ */
.grain{
  position:fixed; inset:-60px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.05s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}       20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}   60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}    100%{transform:translate(0,0)}
}

/* --- 8. MEDIA GRADE — the grade follows the light ------------------------ */
/* Layered subtly OVER the baked-in cinematic grade. This is what makes the
   light journey read as real light rather than a background-colour trick. */
/* IMG ONLY. A video must never carry a --sun-driven filter: --sun changes on
   every scroll frame, so the filter re-evaluates per frame and forces the
   compositor to re-run the whole filter chain over live decoded video. That is
   a direct cause of visible stutter. The videos are graded in-camera instead. */
.media:not(video){
  filter:
    saturate(calc(1 - var(--sun) * .05))
    sepia(calc(var(--sun) * .16))
    hue-rotate(calc(var(--sun) * -5deg))
    contrast(calc(1 + var(--sun) * .03));
}
/* Promote every video to its own compositor layer so decode and paint stay off
   the main thread and off the document's paint tree. */
video.media,
video[data-hero]{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* --- 9. REVEAL — OPT-IN ONLY --------------------------------------------- */
/* Content is VISIBLE BY DEFAULT. Hidden states exist only once JS has proven
   it can un-hide them by adding .reveal-ready. A dead IntersectionObserver,
   a throttled rAF or a hidden tab must never leave the page blank.
   (v2 left 84 elements permanently invisible this way.) */
/* will-change is declared on the PRE-state only and released to auto once the
   element has landed. Left on permanently it pins a compositor layer per
   element for the life of the page — on a gallery that is dozens of live
   layers competing with video decode for the same GPU memory. */
.reveal-ready [data-rise]{
  opacity:0; transform:translateY(16px) rotate(.8deg);
  transition:opacity var(--dur-mid) var(--dolly), transform var(--dur-mid) var(--dolly);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
.reveal-ready [data-rise].is-in{opacity:1; transform:none; will-change:auto}

/* masked line reveal — type rises from behind an edge with ~1.4° rotation.
   The mask needs room for ascenders and descenders or it crops them: at
   line-height .855 an unpadded mask shears the 'g' in "Light." clean off.
   At line-height .855 the line box is SHORTER than the glyphs it contains:
   Fraunces at opsz 144 runs ~.72em cap plus ~.22em descender, so an unpadded
   mask shears the 'g' in "Light." clean off.
   Padding opens the mask; the equal negative margin keeps the metrics honest. */
.reveal-ready [data-line]{
  overflow:hidden; display:block;
  padding:.16em 0 .30em; margin:-.16em 0 -.30em;
}
.reveal-ready [data-line] > span{
  display:block; transform:translateY(102%) rotate(.8deg); transform-origin:0 100%;
  transition:transform var(--dur-slow) var(--dolly); transition-delay:var(--d, 0ms);
  will-change:transform;
}
.reveal-ready [data-line].is-in > span{transform:none; will-change:auto}

/* clip-path unmask — images revealed like a frame opening, not faded in.
   The media inside also settles out of a slight over-scale, so the frame
   opens AND the shot comes to rest: a camera move, not a CSS transition. */
.reveal-ready [data-unmask]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-slow) var(--dolly);
  transition-delay:var(--d, 0ms);
}
.reveal-ready [data-unmask].is-in{clip-path:inset(0 0 0 0)}
.reveal-ready [data-unmask] > img{
  transform:scale(1.04); transform-origin:50% 55%;
  transition:transform calc(var(--dur-slow) * 1.1) var(--dolly);
  transition-delay:var(--d, 0ms);
  will-change:transform;
}
.reveal-ready [data-unmask].is-in > img{transform:none; will-change:auto}
/* video is never scaled on reveal — an over-scale on a decoding video is a
   per-frame resample of every decoded frame for the whole 2.5s transition. */
.reveal-ready [data-unmask] > video{transform:none; transition:none}

/* --- 10. REDUCED MOTION -------------------------------------------------- */
/* Midday, static. No grain animation, no dolly, no parallax, no light ramp. */
@media (prefers-reduced-motion:reduce){
  :root{--sun:0.5 !important}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grain{animation:none}
  [data-rise],[data-line] > span,[data-unmask]{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}


/* --- 11. BRAND FLOURISHES (matching the residential site Ankkush approved) --
   A short gold rule above a tracked eyebrow, and a gold italic serif emphasis
   word. These two devices carry most of the warmth in his brand. */
.eyebrow--ruled{display:block}
.eyebrow--ruled::before{
  content:''; display:block;
  width:34px; height:2px; background:var(--gold);
  margin-bottom:clamp(14px,1.5vw,20px);
}
.em-gold{
  font-family:Fraunces, Georgia, serif; font-style:italic;
  font-variation-settings:'opsz' 120,'wght' 320;
  color:var(--accent-ink);
}


/* --- MODULE: chapter-i.css --- */
/* ============================================================================
   CHAPTER I — ARRIVAL                                    light: Dawn (0 → .20)
   Job: stop them. "Light. Measured."

   COMPOSITION — decided from measurement, not taste (ART-DIRECTION §9.1).

   The McKellar loop is a slow dolly IN. Sampling 43 frames across the whole
   loop and testing every pixel for "stays light AND stays quiet":

       top    L 95% · C 56% · R 51%        <- the sky band
       mid    L  7% · C 13% · R 20%
       bot    L  0% · C  0% · R  0%        <- goes to L=0 as the dolly closes

   The lower-left — where the first draft put the headline — is the WORST
   place on the frame. It is concrete apron at t=0 and the building's dark
   base by the end of the loop. Only the sky is dependable.

   So: THE LIGHT ENTERS FROM THE SKY. The page's ground colour bleeds down
   into the top of the photograph, so that page and sky are one continuous
   dawn with no seam between them; the building emerges out of that light as
   the eye travels down and right. Type sits in the light, up top and left.
   The dark, dramatic lower-right of the frame is never veiled — it keeps
   full contrast, which is precisely where the photograph has its punch.

   Because the wash is painted in --ground, it warms as the page descends:
   image and page are lit by the same sun. That is the concept, performed in
   the first frame.

   Everything below derives from --sun. No hex values in this file.
   ========================================================================= */

/* --- SITE CHROME --------------------------------------------------------- */
.chrome{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:clamp(20px,3.1vw,38px) var(--gutter) 0;
}
.chrome__contact{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  font-size:var(--t-12); letter-spacing:var(--tr-caps); text-transform:uppercase;
  font-weight:520; color:var(--ink); padding-top:4px;
}
.chrome__contact a{transition:color .5s var(--dolly)}
.chrome__contact a:hover{color:var(--accent-ink)}
.chrome__sep{width:1px; height:11px; background:var(--hair-strong)}

/* --- I.a  THE FRAME ------------------------------------------------------ */
/* Four rows: type · spacer · descriptor · foot rule. The descriptor is its
   OWN grid row rather than a child of the foot, so the mobile breakpoint can
   relocate it into the spacer row (up under the headline, where a tall narrow
   frame has abundant clean sky) instead of leaving it on the dark base. */
.frame{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto auto;
  grid-template-columns:minmax(0,1fr);
}
@supports not (height:100svh){ .frame{min-height:100vh} }

.frame__media{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  backface-visibility:hidden; transform:translateZ(0);
}

/* the dawn, entering from above */
.frame__light{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* A directional pool of dawn in the upper-left, where the type lives.
       This is the only place the wash works hard: it softens the roofline
       and window reveals behind the headline without touching the dark
       lower-right of the frame, which keeps every stop of its contrast. */
    radial-gradient(88% 86% at -8% -2%,
      color-mix(in srgb, var(--ground) 78%, transparent) 0%,
      color-mix(in srgb, var(--ground) 64%, transparent) 30%,
      color-mix(in srgb, var(--ground) 46%, transparent) 52%,
      color-mix(in srgb, var(--ground) 26%, transparent) 72%,
      transparent 90%),
    /* the sky becoming the page */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 82%, transparent) 0%,
      color-mix(in srgb, var(--ground) 58%, transparent) 22%,
      color-mix(in srgb, var(--ground) 30%, transparent) 40%,
      color-mix(in srgb, var(--ground)  9%, transparent) 54%,
      transparent 66%),
    /* the ground plane — light gathering on the apron, carrying the lower
       third. The frame swings from L=0 to L=176 down here across the loop,
       so neither dark ink nor white type is safe unaided. Weighted left, so
       the dark mass on the right keeps its contrast. */
    radial-gradient(62% 32% at 6% 100%,
      color-mix(in srgb, var(--ground) 28%, transparent) 0%,
      transparent 74%),
    linear-gradient(to top,
      color-mix(in srgb, var(--ground) 96%, transparent) 0%,
      color-mix(in srgb, var(--ground) 88%, transparent) 8%,
      color-mix(in srgb, var(--ground) 64%, transparent) 14%,
      color-mix(in srgb, var(--ground) 28%, transparent) 21%,
      transparent 29%);
}

.frame__type{
  grid-row:1; z-index:2; position:relative;
  padding:clamp(96px,13vh,160px) var(--gutter) 0;
}
.frame__eyebrow{margin-bottom:clamp(16px,2.2vw,26px)}
.frame__h1{margin:0}
.frame__h1 .l{display:block}
/* optical indent: "Measured." is set one stem to the right of "Light." so the
   pair reads as a stepped column rather than a flush-left stack */
.frame__h1 .l:last-child{padding-left:.085em}

/* --- the lower third: descriptor / rule / chapter marker + cue ----------- */
.frame__deck{
  grid-row:3; z-index:2; position:relative;
  margin:0 var(--gutter) clamp(16px,1.9vw,24px);
  max-width:52ch; color:var(--ink);
  text-wrap:balance;              /* stops "room." orphaning at 768–1100 */
}
.frame__footrow{
  grid-row:4; z-index:2; position:relative;
  margin:0 var(--gutter);
  padding:14px 0 clamp(18px,2.6vh,26px);
  border-top:1px solid var(--hair-strong);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.frame__chapter{
  font-size:var(--t-12); letter-spacing:var(--tr-caps); text-transform:uppercase;
  font-weight:520; color:var(--ink);
}
.frame__chapter b{font-weight:520; color:var(--accent-ink)}

.cue{display:flex; align-items:center; gap:12px}
.cue__label{
  font-size:var(--t-12); letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
/* a hairline that falls, repeatedly — the page saying which way is down */
.cue__track{position:relative; width:1px; height:34px; background:var(--hair-strong); overflow:hidden}
.cue__track::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:12px;
  background:var(--accent-ink);
  animation:cuefall 2.6s var(--dolly) infinite;
}
@keyframes cuefall{
  0%{transform:translateY(-14px); opacity:0}
  22%{opacity:1} 78%{opacity:1}
  100%{transform:translateY(34px); opacity:0}
}

/* --- I.b  THE DESCENT ---------------------------------------------------- */
.descent{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(84px,13vh,168px) var(--gutter) clamp(76px,11vh,140px);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.9vw,28px);
  background:linear-gradient(108deg,
    color-mix(in oklab, var(--ground) 93%, #DCE6E2) 0%,
    color-mix(in oklab, var(--ground) 96%, #EEF0EA) 43%,
    color-mix(in oklab, var(--ground) 92%, #E6E0D7) 68%,
    color-mix(in oklab, var(--ground) 95%, #E3E9E7) 100%);
}
.descent::before{
  content:''; position:absolute; z-index:1;
  inset:clamp(30px,4vw,68px) var(--gutter);
  border-top:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  pointer-events:none;
}
.descent::after{
  content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:url('../img/stock-hero-poster-1600.webp') center 44% / cover no-repeat;
  opacity:.062; filter:grayscale(1) sepia(.08) contrast(1.15); mix-blend-mode:multiply;
  mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.descent__mark{grid-column:1 / 4; padding-top:.62em; position:relative; z-index:2}
.descent__body{grid-column:4 / 13; position:relative; z-index:2}
@supports not (color:color-mix(in oklab, #000, #fff 50%)){
  .descent{background:#F1F1EC}
  .descent::before{border-top-color:rgba(122,90,34,.25); border-bottom-color:rgba(26,25,22,.13)}
}

.descent__statement{
  font-size:var(--t-96); max-width:19ch;
  font-variation-settings:'opsz' 120, 'wght' 320, 'SOFT' 24, 'WONK' 1;
}
/* the second clause carries the weight — it is the differentiator */
.descent__statement .q{color:var(--muted)}

.facts{
  margin-top:clamp(46px,6.4vw,86px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.facts li{
  border-top:1px solid var(--hair-strong);
  padding:clamp(16px,1.5vw,22px) clamp(12px,1.6vw,26px) 0 0;
}
.facts .n{
  display:block; font-size:var(--t-48); color:var(--ink);
  font-variation-settings:'opsz' 72, 'wght' 300, 'SOFT' 14, 'WONK' 0;
}
.facts .k{
  display:block; margin-top:10px;
  font-size:var(--t-12); letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500; line-height:1.4;
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1100px){
  .frame__deck{max-width:40ch}
}
@media (max-width:900px){
  .descent{display:block}
  .descent__mark{margin-bottom:26px; padding-top:0}
  .descent__statement{max-width:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px}
  /* hide the separator with the number it separates, or it strands a lone "|" */
  .chrome__contact .chrome__tel,
  .chrome__contact .chrome__sep{display:none}
}
@media (max-width:620px){
  /* a tall narrow frame gives the type block proportionally more height,
     so the sky wash has to reach further down to keep covering it */
  .frame__light{
    background:
      radial-gradient(96% 58% at 0% 0%,
        color-mix(in srgb, var(--ground) 34%, transparent) 0%, transparent 76%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--ground) 86%, transparent) 0%,
        color-mix(in srgb, var(--ground) 66%, transparent) 26%,
        color-mix(in srgb, var(--ground) 38%, transparent) 46%,
        color-mix(in srgb, var(--ground) 12%, transparent) 60%,
        transparent 72%),
      linear-gradient(to top,
        color-mix(in srgb, var(--ground) 90%, transparent) 0%,
        color-mix(in srgb, var(--ground) 60%, transparent) 8%,
        transparent 18%);
  }
  .frame__type{padding-top:clamp(92px,13vh,140px)}
  /* relocate the descriptor into the spacer row, directly under the headline:
     a 390-wide frame has a deep band of clean sky there, and the alternative
     was washing the whole lower third to lift it off the dark base. */
  .frame__deck{
    grid-row:2; align-self:start;
    margin:clamp(20px,3.2vh,30px) var(--gutter) 0;
    font-size:var(--t-18); max-width:30ch;
  }
  .facts{grid-template-columns:1fr; row-gap:0}
  .facts li{padding-bottom:18px}
}


/* --- MODULE: chapter-ii.css --- */
/* ============================================================================
   CHAPTER II — THE MEASURE                              light: Morning (.20→.42)

   AESTHETIC: a museum wall. The page ground is the gallery wall and warms with
   --sun; every exhibit is a physically matted, framed piece floating a few
   millimetres off it. The luxury is restraint — white matting, hairline rules,
   one soft shadow, generous and STRUCTURED negative space (every element lands
   on a 12-column line; no accidental gaps).

   Frames are literal #fff: they represent matting board, not palette. Every
   other colour derives from --sun via system.css.
   ========================================================================= */

/* THE GROUND IS LIT, not filled. The old wash moved through barely two tonal
   levels (porcelain ~#F7F6F2 to stone ~#EDEBE4) — too narrow to read as anything
   but flat grey, which is the "average website" tell. A lit ground needs a wide
   RANGE and a warm/cool play:
     · a bright KEY POOL upper-left where the intro and film sit (near #fff);
     · a WARM SHAFT drifting in low from the right — the later golden light of
       the --sun journey, borrowed one stop ahead (--stop-4) as a glow, never as
       a fill (a warm ground tone, never --accent, which stains);
     · a VIGNETTE deepening to warm stone in every corner, so the frame has
       weight and the content sits in a pool of light.
   Everything stays in light — the deepest corner is a warm stone (~#E7DECC),
   never grey and never dark. This is the template the later chapters reuse. */
.ch-measure{
  padding:clamp(90px,13vh,170px) 0 clamp(90px,13vh,170px);
  overflow:hidden; position:relative; isolation:isolate;
  background:
    radial-gradient(115% 82% at 26% -6%,
      color-mix(in oklab, var(--ground), #fff 62%) 0%, transparent 46%),
    radial-gradient(88% 76% at 86% 48%,
      color-mix(in srgb, var(--stop-4) 62%, transparent) 0%, transparent 56%),
    radial-gradient(134% 116% at 42% 26%,
      transparent 42%,
      color-mix(in oklab, var(--ground-deep), var(--stop-d4) 66%) 100%),
    linear-gradient(174deg,
      color-mix(in oklab, var(--ground), #fff 24%) 0%,
      color-mix(in oklab, var(--ground) 46%, var(--ground-deep)) 100%);
}
@supports not (background:color-mix(in srgb, #000 3%, #fff)){
  .ch-measure{background:var(--ground)}
}

/* --- the film bevel ------------------------------------------------------
   Was an 18px slab of flat #fff, which on a near-white ground reads as a
   chunky paper border rather than a mount. Now a THIN glass bevel: the face is
   a gradient lit from the upper left, a gold catchlight runs the top edge, and
   the inset lip pair gives it thickness. Deliberately no backdrop-filter — a
   blur region touching a playing video forces a per-frame backdrop readback,
   which is the one thing that must not come back after the cadence fix. */
.frameplate{
  position:relative;
  background:var(--glass-face);
  padding:clamp(6px,.62vw,11px);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-thick), var(--sh-float-md);
  transition:transform .8s var(--dolly), box-shadow .8s var(--dolly);
}
@supports not (background:color-mix(in srgb, #000 8%, transparent)){
  .frameplate{border-color:rgba(20,22,26,.08)}
}
.frameplate::before{
  content:''; position:absolute; z-index:2; pointer-events:none;
  top:0; left:0; right:0; height:1px;
  background:var(--glass-lip);
}
.frameplate img,
.frameplate video{
  width:100%; height:auto; display:block;
  border:1px solid rgba(20,22,26,.10);
}
/* the lift: a camera easing in, not a bounce */
@media (hover:hover) and (pointer:fine){
  .frameplate:hover{
    transform:translateY(-6px);
    box-shadow:var(--glass-thick), var(--sh-float-lg);
  }
}

/* --- II.a  intro --------------------------------------------------------- */
.measure__intro{
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.9vw,28px); row-gap:clamp(20px,2.4vw,30px);
  position:relative; z-index:1;
}
/* the chapter numeral — a large, faint Fraunces "II" set behind the deck, the
   way an editorial spread carries its section number. Barely there (a few
   percent ink): felt as a watermark, never read as content. It fills the open
   right column with intent instead of leaving it as accidental blank. */
.measure__numeral{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:clamp(-38px,-3vw,-10px); right:calc(var(--gutter) - .06em);
  margin:0; font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 144,'wght' 260,'SOFT' 40,'WONK' 1;
  font-size:clamp(200px,30vw,460px); line-height:.66;
  letter-spacing:.02em;
  color:color-mix(in srgb, var(--accent-ink) 12%, transparent);
}
@supports not (color:color-mix(in srgb, #000 8%, transparent)){
  .measure__numeral{color:rgba(122,90,34,.11)}
}
.measure__eyebrow{grid-column:1 / -1}
.measure__h{
  grid-column:1 / 9; margin:0;
  font-size:var(--t-96); max-width:15ch;
  font-variation-settings:'opsz' 144,'wght' 318,'SOFT' 28,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.96;
}
.measure__h .q{color:var(--muted)}
.measure__deck{grid-column:9 / 13; align-self:end; max-width:34ch; color:var(--ink)}

/* --- II.b  the film + the placard ---------------------------------------- */
.measure__filmrow{
  margin-top:clamp(52px,7vw,110px);
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2.4vw,40px); align-items:center;
}
.measure__film{grid-column:1 / 9; margin:0}
.measure__filmwin{display:block; overflow:hidden; position:relative}
.measure__film video{aspect-ratio:16 / 9; object-fit:cover}
.measure__filmcap{
  margin-top:clamp(12px,1.2vw,18px);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:var(--t-12); letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.measure__filmcap b{font-weight:520; color:var(--accent-ink)}

/* the placard — a sheet of glass over the wall, holding a schedule.
   This is the ONE element that gets a real backdrop-filter. Its backdrop is
   the static chapter wash, never the video, so the blur is sampled once and
   costs nothing per frame. The graded background above is what it refracts —
   without that this would look like a flat translucent rectangle. */
.measure__brief{
  grid-column:9 / 13;
  position:relative; isolation:isolate;
  /* Two background layers, no pseudo-element: the specular sheen sits over a
     translucent face whose ALPHA falls across the panel — brightest where the
     light lands, letting more of the blurred wall through at the far corner.
     That falling alpha is what reads as a sheet of glass. A first pass painted
     a white sheen over a flat white face, which is invisible by construction. */
  background:
    linear-gradient(152deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.06) 30%,
      transparent 52%),
    linear-gradient(152deg,
      color-mix(in srgb, #fff 88%, transparent) 0%,
      color-mix(in srgb, #fff 70%, transparent) 44%,
      color-mix(in srgb, var(--ground-deep) 66%, transparent) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
  border:1px solid var(--glass-edge);
  padding:clamp(26px,2.7vw,42px) clamp(24px,2.5vw,38px) clamp(22px,2.3vw,34px);
  box-shadow:var(--glass-thick), var(--sh-float-md);
}
/* no backdrop-filter (older Safari/Firefox): fall back to the solid glass face
   rather than a see-through panel with unreadable type over it */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .measure__brief{background:var(--glass-face)}
}
@supports not (background:color-mix(in srgb, #fff 72%, transparent)){
  .measure__brief{background:var(--glass-face); border-color:rgba(20,22,26,.09)}
}
/* the gold catchlight along the top edge */
.measure__brief::before{
  content:''; position:absolute; z-index:2; pointer-events:none;
  top:0; left:0; right:0; height:1px;
  background:var(--glass-lip);
}
.measure__brief .eyebrow{color:var(--accent-ink); font-weight:560}

.measure__brieflist{margin-top:clamp(17px,1.8vw,24px); counter-reset:brief}
.measure__brieflist li{
  counter-increment:brief;
  padding:13px 0 13px 38px; position:relative;
  font-size:var(--t-16); color:var(--ink); line-height:1.35;
}
/* rules that fade out at both ends instead of butting hard into the padding —
   a ruled ledger, not a table with borders */
.measure__brieflist li + li::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 15%, transparent) 0%,
    color-mix(in srgb, var(--ink) 11%, transparent) 62%,
    transparent 100%);
}
@supports not (background:color-mix(in srgb, #000 8%, transparent)){
  .measure__brieflist li + li::before{background:rgba(20,22,26,.11)}
}
.measure__brieflist li:first-child{padding-top:2px}
.measure__brieflist li:first-child::after{top:3px}
/* indexed like a schedule of deliverables, not a bullet list. Gold, tabular,
   and set on the baseline of the line it numbers. */
.measure__brieflist li::after{
  content:counter(brief,decimal-leading-zero);
  position:absolute; left:0; top:14px;
  font-size:var(--t-12); letter-spacing:.08em;
  color:var(--accent-ink); font-weight:560;
  font-feature-settings:'tnum' 1;
}

/* --- II.c  THE EXHIBITION -------------------------------------------------
   REHUNG (2026-07-24). The previous hang gave every piece an identical mat, an
   identical shadow and an identical caption size, in rows of 2 then 3 then 3.
   That is a contact sheet, not an exhibition: with no scale hierarchy the eye
   has nowhere to land, and — worse — it set Ankkush's annotated survey plates
   at the same size as atmospheric photography, which made the plates look like
   flyers and the photographs look like filler.

   Three deliberate registers now, largest first:
     .plate--lead   one piece, huge, with its figure set as display type beside it
     .plate--pair   two pieces at unequal spans
     .plate--strip  three pieces, small, where fine detail matters less
   Scale is the whole idea: an annotated plate is only impressive at a size where
   the measurements can actually be READ. Below about 420px they are decoration.

   The room sits on --ground-deep with a soft directional wash, so a white mat
   reads as a mounted object rather than a white box on a white page. */
.measure__room{
  margin-top:clamp(76px,10vw,150px);
  padding:clamp(64px,8vw,124px) 0 clamp(72px,9vw,136px);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  position:relative; isolation:isolate; overflow:hidden;
  /* the exhibition is a RECESS — a room stepped down off the chapter wall. It
     is lit like a gallery: a spotlight washes down from the top centre onto the
     lead plate, and the walls fall away to a deeper warm stone at the edges and
     floor. Deeper than .ch-measure (built on --ground-deep, not --ground) so the
     eye reads it as a distinct, quieter space — but still light, never a dark
     panel. Same warm/cool play as the chapter, one tonal step lower. */
  background:
    radial-gradient(96% 62% at 50% -4%,
      color-mix(in oklab, var(--ground-deep), #fff 52%) 0%, transparent 50%),
    radial-gradient(120% 78% at 50% 106%,
      color-mix(in srgb, var(--stop-d4) 52%, transparent) 0%, transparent 62%),
    radial-gradient(140% 128% at 50% 42%,
      transparent 48%,
      color-mix(in oklab, var(--ground-deep), var(--stop-d4) 82%) 100%),
    color-mix(in oklab, var(--ground-deep), var(--ground) 8%);
}
@supports not (background:color-mix(in srgb, #000 3%, #fff)){
  .measure__room{background:#EEEADE}
}
.measure__lead{
  margin:0 var(--gutter) clamp(44px,5.5vw,78px);
  max-width:38ch; position:relative; z-index:1;
}

/* --- the plate primitive -------------------------------------------------
   An even mat on all four sides, with the label OUTSIDE it under a gold
   hairline — the museum convention of a card mounted below the frame. The
   previous mat was bottom-weighted, which is authentic on its own, but with
   the caption sitting outside it just read as a stray gap. */
.plate{margin:0; position:relative; z-index:1}
/* Same glass as the film bevel and the placard — one material across the whole
   chapter. The mat stays a little deeper than the film's because on a mounted
   photograph the mat IS the museum language; on a video it was just a border. */
.plate__mat{
  display:block; margin:0; position:relative;
  background:var(--glass-face);
  padding:clamp(8px,.85vw,15px);
  border:1px solid var(--glass-edge);
  transition:transform .8s var(--dolly), box-shadow .8s var(--dolly);
}
@supports not (border-color:color-mix(in srgb, #000 8%, transparent)){
  .plate__mat{border-color:rgba(20,22,26,.08)}
}
.plate__mat::before{
  content:''; position:absolute; z-index:2; pointer-events:none;
  top:0; left:0; right:0; height:1px;
  background:var(--glass-lip);
}
/* The window is a separate element from the mat ON PURPOSE. data-unmask sets
   clip-path, and clip-path clips the element's OWN box-shadow — put it on the
   mat and the plate loses the layered shadow that makes it read as a physical
   object hanging off the wall. Shadow and parallax live on the mat; the clip
   and the hard overflow clip live on the window inside it. */
.plate__win{
  display:block; overflow:hidden; position:relative;
  border:1px solid rgba(20,22,26,.10);
  background:var(--ground-deep);   /* tone to load against, never white */
}
.plate__win img{
  width:100%; height:auto; display:block;
  aspect-ratio:3 / 2; object-fit:cover;   /* native ratio of the source aerials */
}
/* the seat — a soft shadow cast by the mat opening onto the top of the print,
   so the image sits INTO the frame rather than flush on its surface. This is
   the single most "framed" cue a mount has. Kept to the top edge and very soft
   so it never dims a top-row annotation label. Painted above the image (::after,
   positioned) but below the mat's gold lip. */
.plate__win::after,
.measure__filmwin::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 4px 12px -6px rgba(20,22,26,.30),
             inset 0 0 0 1px rgba(255,255,255,.045);
}
/* cinematic hold: the print eases into a slow push-in on hover, the window
   clipping the overscan. Motion only — the annotation never distorts because
   the whole frame scales as one. Never on the film (its own selector). */
@media (hover:hover) and (pointer:fine){
  .plate__win img{transition:transform 1.3s var(--dolly)}
  .plate__mat:hover .plate__win img{transform:scale(1.045)}
}

/* the label — a ruled ledger, figure first */
.plate__label{
  margin-top:clamp(13px,1.2vw,19px);
  padding-top:clamp(11px,1vw,15px);
  border-top:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
@supports not (border-color:color-mix(in srgb, #000 8%, transparent)){
  .plate__label{border-top-color:rgba(194,160,74,.55)}
}
.plate__fig{
  display:block; margin:0;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 60,'wght' 340,'SOFT' 14,'WONK' 0;
  font-size:var(--t-24); line-height:1.04; letter-spacing:var(--tr-head);
  color:var(--ink); font-feature-settings:'tnum' 1;
}
.plate__where,
.plate__what{
  display:block; margin:5px 0 0;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:500; line-height:1.5;
}
.plate__where{color:var(--accent-ink); margin-top:7px}
.plate__what{color:var(--muted)}

/* --- shadow tiers — depth tracks size, which is what sells "physical" ---- */
/* every tier carries the same inset thickness pair — only the float changes */
.plate--strip .plate__mat{box-shadow:var(--glass-thick), var(--sh-float-sm)}
.plate--pair  .plate__mat{box-shadow:var(--glass-thick), var(--sh-float-md)}
.plate--lead  .plate__mat{box-shadow:var(--glass-thick), var(--sh-float-lg)}
@media (hover:hover) and (pointer:fine){
  .plate__mat:hover{transform:translateY(-6px)}
  .plate--strip .plate__mat:hover{box-shadow:var(--glass-thick), var(--sh-float-md)}
  .plate--pair  .plate__mat:hover{box-shadow:var(--glass-thick), var(--sh-float-lg)}
  .plate--lead  .plate__mat:hover{
    box-shadow:var(--glass-thick),
      0 3px 3px rgba(28,25,20,.045), 0 20px 40px rgba(28,25,20,.07),
      0 60px 124px rgba(28,25,20,.115);
  }
}

/* --- register 1: the lead exhibit ----------------------------------------
   The figure leaves the photograph. Setting "2.27 ha" in Fraunces at display
   scale beside the plate is what turns a photo grid into an exhibition
   catalogue — and it means the page carries the measurement as type a crawler
   and a screen reader can both read, not only as baked pixels. */
.measure__leadrow{
  margin:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2.4vw,40px); align-items:center;
  position:relative; z-index:1;
}
.plate--lead{grid-column:1 / 9}
.measure__leadnote{grid-column:9 / 13}
.measure__leadfig{
  margin:0;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 90,'wght' 300,'SOFT' 20,'WONK' 1;
  font-size:var(--t-72); line-height:.94; letter-spacing:var(--tr-display);
  color:var(--ink); font-feature-settings:'tnum' 1;
}
.measure__leadfig em{
  font-style:italic; color:var(--accent-ink);
  font-variation-settings:'opsz' 90,'wght' 320;
}
.measure__leadwhere{
  margin:clamp(12px,1.2vw,18px) 0 0;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:520; line-height:1.5;
}
.measure__leadbody{
  margin:clamp(14px,1.4vw,20px) 0 0; max-width:30ch;
  font-size:var(--t-16); color:var(--ink); line-height:1.5;
}
/* the lead plate's own label is redundant beside the display figure */
.plate--lead .plate__label{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.plate--lead .plate__fig{
  font-family:Jost, sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.plate--lead .plate__where{margin-top:0}

/* --- the wall quote ------------------------------------------------------ */
.measure__pull{
  margin:clamp(62px,8vw,116px) auto; padding:clamp(30px,3.4vw,52px) var(--gutter) 0;
  text-align:center; max-width:24ch;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 96,'wght' 300,'SOFT' 24,'WONK' 1;
  font-size:var(--t-48); line-height:1.08; letter-spacing:var(--tr-display);
  color:var(--ink); position:relative; z-index:1;
}
/* a short centred gold rule above it — the museum wall-quote mark, the same
   gold-hairline motif as the ruled eyebrow, closing the loop on the chapter */
.measure__pull::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(38px,4vw,60px); height:2px;
  background:linear-gradient(90deg,
    transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}
@supports not (background:color-mix(in srgb, #000 8%, transparent)){
  .measure__pull::before{background:var(--gold)}
}
.measure__pull em{
  font-style:italic; color:var(--accent-ink);
  font-variation-settings:'opsz' 96,'wght' 320;
}

/* --- register 2: the unequal pair -----------------------------------------
   7 and 5 columns, not 6 and 6. An even split reads as a spreadsheet; an
   unequal one reads as a decision. */
.measure__pairrow{
  margin:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px); row-gap:clamp(30px,3.6vw,56px);
  /* bottom-aligned, not top-aligned. Both sources are 3:2, so a 5-column plate
     is always ~150px shorter than a 7-column one; hanging them from the top
     leaves a dead notch under the smaller plate and strands the two labels at
     different heights, which reads as a mistake. Aligned at the foot, the
     labels line up and the extra height becomes deliberate space above. */
  align-items:end; position:relative; z-index:1;
}
.measure__pairrow .plate--pair:nth-of-type(1){grid-column:1 / 8}
.measure__pairrow .plate--pair:nth-of-type(2){grid-column:8 / 13}

/* --- the breather — a photograph, unannotated, edge to edge --------------- */
.measure__breather{
  margin:clamp(66px,8.5vw,124px) 0; position:relative; z-index:1;
}
.measure__breather img{
  width:100%; height:clamp(280px,46vh,520px); object-fit:cover; display:block;
}
.measure__breathercap{
  margin:13px var(--gutter) 0;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}

/* --- register 3: the strip ------------------------------------------------ */
.measure__striprow{
  margin:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px); row-gap:clamp(30px,3.6vw,50px);
  position:relative; z-index:1;
}
.measure__striprow .plate--strip{grid-column:span 4}
.plate--strip .plate__mat{padding:clamp(8px,.8vw,13px)}
.plate--strip .plate__fig{font-size:var(--t-18)}

/* --- II.d  THE PLANS ------------------------------------------------------
   Drawn line-work, not photography — so the rules change: the window is WHITE
   (a plan lives on paper, and --ground-deep muddies its fills), the image is
   `contain` not `cover` (cropping a dimensioned plan destroys the thing that
   makes it a plan), and it takes NO seat shadow, which would read as a smudge
   across the linework. Everything else — mat, gold lip, float — is shared. */
.measure__plans{
  margin:clamp(66px,8.5vw,124px) var(--gutter) 0;
  position:relative; z-index:1;
}
.measure__plansnote{
  margin:clamp(16px,1.8vw,26px) 0 clamp(34px,4vw,56px); max-width:34ch;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 72,'wght' 328,'SOFT' 18,'WONK' 1;
  font-size:var(--t-32); line-height:1.16; color:var(--ink); letter-spacing:var(--tr-head);
}
.measure__plansnote em{font-style:italic; color:var(--accent-ink)}
.measure__plangrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px); row-gap:clamp(30px,3.6vw,50px);
  align-items:start;
}
.plate--plan .plate__mat{box-shadow:var(--glass-thick), var(--sh-float-md)}
/* The two plans have very different native ratios (a portrait tenancy plan at
   0.79, a landscape whole-floor plan at 1.41). Forcing one aspect on both either
   crops a dimensioned drawing or strands huge empty bars. Instead: one FIXED
   HEIGHT for both, `contain` inside it. Rows stay level, and every plan is
   shown whole — which for a measured drawing is the entire point. */
.plate__win--plan{
  background:#fff;
  display:grid; place-items:center;
  aspect-ratio:auto;
  height:clamp(300px,32vw,440px);
}
.plate__win--plan img{
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:contain;            /* never crop a dimensioned drawing */
  padding:clamp(6px,.8vw,14px); box-sizing:border-box;
}
.plate__win--plan::after{content:none}   /* no photographic seat shadow */
@media (hover:hover) and (pointer:fine){
  .plate--plan .plate__mat:hover .plate__win img{transform:none} /* no push-in */
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:860px){
  .measure__plangrid{grid-template-columns:1fr}
  .measure__plansnote{font-size:var(--t-24); max-width:46ch}
}
@media (max-width:1040px){
  .measure__h{grid-column:1 / -1; font-size:var(--t-72)}
  .measure__deck{grid-column:1 / -1; max-width:52ch}
  .measure__filmrow{display:block}
  .measure__film{margin-bottom:clamp(26px,4vw,44px)}
  .measure__brief{padding:clamp(20px,3.4vw,30px)}
  /* the numeral is a desktop-spread device — it lives in the open right column.
     Once the layout stacks to one column there is no empty space for it to sit
     in without crowding the headline, so it drops out. */
  .measure__numeral{display:none}

  /* the lead exhibit stacks: plate first, then its figure — the display
     number stays large, it just moves under the piece it describes */
  .measure__leadrow{display:block}
  .measure__leadnote{margin-top:clamp(26px,4vw,44px)}
  .measure__leadfig{font-size:var(--t-60)}
  .measure__leadbody{max-width:46ch}

  .measure__pairrow .plate--pair:nth-of-type(1),
  .measure__pairrow .plate--pair:nth-of-type(2){grid-column:1 / -1; margin-top:0}

  /* a three-up strip at this width puts each plate near 300px, well under the
     size at which an annotated measurement is legible. Two up instead. */
  .measure__striprow .plate--strip{grid-column:span 6}
  .measure__striprow .plate--strip:last-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .measure__striprow .plate--strip,
  .measure__striprow .plate--strip:last-child{grid-column:1 / -1}
  .measure__pull{font-size:var(--t-32); max-width:20ch; margin:clamp(46px,9vw,70px) auto}
  .measure__leadfig{font-size:var(--t-48)}
  /* parallax off on touch — it fights momentum scrolling and causes jitter */
  .plate__mat[data-parallax], .measure__film[data-parallax]{transform:none !important}
  .plate__mat{
    padding:clamp(8px,2vw,13px);
    box-shadow:0 1px 1px rgba(28,25,20,.035), 0 6px 18px rgba(28,25,20,.06) !important;
  }
  .plate--lead .plate__label{display:block}
  .plate--lead .plate__where{margin-top:5px}
  .frameplate{
    padding:clamp(8px,2vw,12px);
    box-shadow:0 1px 1px rgba(28,25,20,.035), 0 6px 18px rgba(28,25,20,.06);
  }
}


/* --- MODULE: chapter-iii.css --- */
/* ============================================================================
   CHAPTER III — THE LIGHT                               light: Golden (.42→.62)

   The product, performed. A day/dusk comparison the visitor drives by hand —
   "the light, measured" made literal. Everything inherits the chapter system:
   the same lit ground, the same glass material, the same editorial numeral, the
   same Fraunces/Jost + gold. Only the --sun stop is warmer here, so the identical
   ground/glass tokens render one hour later in the day on their own.

   Asset honesty: the compared frames are the REGISTERED stock pair (same frame,
   two hours), so the wipe is truthful — no "same shot" claim over two different
   photographs. It is stock (prefixed `stock-`) and swaps for Ankkush's own
   registered day→dusk before launch; the caption says so.
   ========================================================================= */

.ch-light{
  padding:clamp(90px,13vh,170px) 0 clamp(96px,14vh,186px);
  overflow:hidden; position:relative; isolation:isolate;
  /* same lit-ground recipe as Chapter II — bright key pool, warm shaft, warm
     vignette — but read at the .42→.62 sun, so it lands warmer by itself. */
  background:
    radial-gradient(115% 82% at 26% -6%,
      color-mix(in oklab, var(--ground), #fff 60%) 0%, transparent 46%),
    radial-gradient(92% 78% at 88% 52%,
      color-mix(in srgb, var(--stop-4) 70%, transparent) 0%, transparent 58%),
    radial-gradient(136% 118% at 44% 28%,
      transparent 40%,
      color-mix(in oklab, var(--ground-deep), var(--stop-d4) 72%) 100%),
    linear-gradient(174deg,
      color-mix(in oklab, var(--ground), #fff 20%) 0%,
      color-mix(in oklab, var(--ground) 42%, var(--ground-deep)) 100%);
}
@supports not (background:color-mix(in srgb, #000 3%, #fff)){
  .ch-light{background:var(--ground)}
}

/* --- III.a  intro (mirrors Chapter II's grid & numeral) ------------------ */
.light__intro{
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.9vw,28px); row-gap:clamp(20px,2.4vw,30px);
  position:relative; z-index:1;
}
.light__numeral{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:clamp(-38px,-3vw,-10px); right:calc(var(--gutter) - .06em);
  margin:0; font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 144,'wght' 260,'SOFT' 40,'WONK' 1;
  font-size:clamp(200px,30vw,460px); line-height:.66; letter-spacing:.02em;
  color:color-mix(in srgb, var(--accent-ink) 12%, transparent);
}
@supports not (color:color-mix(in srgb, #000 8%, transparent)){
  .light__numeral{color:rgba(122,90,34,.11)}
}
.light__eyebrow{grid-column:1 / -1}
.light__h{
  grid-column:1 / 9; margin:0;
  font-size:var(--t-96); max-width:15ch;
  font-variation-settings:'opsz' 144,'wght' 318,'SOFT' 28,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.96;
}
.light__deck{grid-column:9 / 13; align-self:end; max-width:34ch; color:var(--ink)}

/* --- III.b  the comparison ------------------------------------------------
   A glass-framed window holding two registered frames. The DUSK frame is the
   base; the DAY frame overlays from the left, its width driven by the handle,
   so the visitor reads left→right as day→dusk — time moving under their hand. */
.light__stage{margin:clamp(48px,6.5vw,104px) var(--gutter) 0; position:relative; z-index:1}

.compare{
  position:relative; margin:0;
  background:var(--glass-face);
  padding:clamp(8px,.85vw,15px);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-thick), var(--sh-float-lg);
}
@supports not (border-color:color-mix(in srgb, #000 8%, transparent)){
  .compare{border-color:rgba(20,22,26,.08)}
}
.compare::before{  /* the gold catchlight, as on every glass panel */
  content:''; position:absolute; z-index:3; pointer-events:none;
  top:0; left:0; right:0; height:1px; background:var(--glass-lip);
}
/* the window — clips the overlay, holds the handle, takes the pointer/keys */
.compare__win{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:3 / 2; background:var(--ground-deep);
  border:1px solid rgba(20,22,26,.10);
  cursor:ew-resize; touch-action:pan-y; outline:none;
}
.compare__base,
.compare__after img{
  display:block; width:100%; height:100%; object-fit:cover; user-select:none;
  -webkit-user-drag:none;
}
/* the DAY overlay, revealed from the left edge to the handle */
.compare__after{
  position:absolute; top:0; left:0; height:100%; width:50%;
  overflow:hidden; will-change:width;
}
.compare__after img{width:auto; max-width:none} /* JS pins it to window width */

/* the handle */
.compare__bar{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:2;
  margin-left:-1px; background:color-mix(in srgb, #fff 82%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent),
             0 0 18px rgba(20,22,26,.28);
  pointer-events:none;
}
.compare__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(42px,3.4vw,54px); height:clamp(42px,3.4vw,54px); border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--ground) 62%, #fff);
  border:1px solid var(--gold);
  box-shadow:var(--glass-thick), 0 6px 18px rgba(20,22,26,.22);
  color:var(--accent-ink);
}
@supports not (border-color:color-mix(in srgb, #000 8%, transparent)){
  .compare__grip{border-color:rgba(194,160,74,.8); background:#F6F4EE}
}
.compare__grip svg{width:56%; height:56%}

/* day / dusk tags, seated in the corners of the window */
.compare__tag{
  position:absolute; bottom:clamp(12px,1.4vw,20px); z-index:2;
  padding:6px 12px;
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  font-weight:540; color:#fff;
  background:color-mix(in srgb, #1a1712 42%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
@supports not (background:color-mix(in srgb, #000 8%, transparent)){
  .compare__tag{background:rgba(26,23,18,.5)}
}
.compare__tag--l{left:clamp(12px,1.4vw,20px)}
.compare__tag--r{right:clamp(12px,1.4vw,20px)}

/* caption row under the stage — the honesty line + a hint */
.light__cap{
  margin:clamp(13px,1.3vw,19px) 0 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.light__cap b{font-weight:540; color:var(--accent-ink)}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1040px){
  .light__h{grid-column:1 / -1; font-size:var(--t-72)}
  .light__deck{grid-column:1 / -1; max-width:52ch}
  .light__numeral{display:none}
}
@media (max-width:720px){
  .compare__win{aspect-ratio:4 / 3}
}


/* --- MODULE: chapter-iv.css --- */
/* ============================================================================
   CHAPTER IV — THE WORK                                 light: Evening (.62→.82)

   Proof, by the frame. Where Chapter II was a measured ledger (figures, gold
   rules, annotation), this is the opposite register: pure photographic craft,
   big and asymmetric, the chrome pulled almost all the way out so the images
   carry the chapter. The pictures are moody and dark; matted in the same light
   glass and hung on the same warm wall, they read as a gallery of prints — dark
   photographs on a lit wall, which is the most "exhibition" a page can feel.

   Reuses the chapter system (lit ground, glass, numeral, Fraunces/Jost, gold);
   the frame primitive is restated locally so Chapter IV never depends on another
   chapter's stylesheet load order.
   ========================================================================= */

.ch-work{
  padding:clamp(90px,13vh,170px) 0 clamp(96px,14vh,186px);
  overflow:hidden; position:relative; isolation:isolate;
  background:
    radial-gradient(115% 82% at 24% -6%,
      color-mix(in oklab, var(--ground), #fff 56%) 0%, transparent 46%),
    radial-gradient(96% 82% at 90% 54%,
      color-mix(in srgb, var(--stop-4) 76%, transparent) 0%, transparent 60%),
    radial-gradient(138% 120% at 46% 26%,
      transparent 38%,
      color-mix(in oklab, var(--ground-deep), var(--stop-d4) 78%) 100%),
    linear-gradient(174deg,
      color-mix(in oklab, var(--ground), #fff 18%) 0%,
      color-mix(in oklab, var(--ground) 38%, var(--ground-deep)) 100%);
}
@supports not (background:color-mix(in srgb, #000 3%, #fff)){
  .ch-work{background:var(--ground)}
}

/* --- IV.a  intro --------------------------------------------------------- */
.work__intro{
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.9vw,28px); row-gap:clamp(20px,2.4vw,30px);
  position:relative; z-index:1;
}
.work__numeral{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:clamp(-38px,-3vw,-10px); right:calc(var(--gutter) - .06em);
  margin:0; font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 144,'wght' 260,'SOFT' 40,'WONK' 1;
  font-size:clamp(200px,30vw,460px); line-height:.66; letter-spacing:.02em;
  color:color-mix(in srgb, var(--accent-ink) 12%, transparent);
}
@supports not (color:color-mix(in srgb, #000 8%, transparent)){
  .work__numeral{color:rgba(122,90,34,.11)}
}
.work__eyebrow{grid-column:1 / -1}
.work__h{
  grid-column:1 / 9; margin:0;
  font-size:var(--t-96); max-width:15ch;
  font-variation-settings:'opsz' 144,'wght' 318,'SOFT' 28,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.96;
}
.work__deck{grid-column:9 / 13; align-self:end; max-width:34ch; color:var(--ink)}

/* --- the frame primitive (restated locally, same glass as the rest) ------ */
.work__frame{
  position:relative; margin:0;
  background:var(--glass-face);
  padding:clamp(8px,.85vw,15px);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-thick), var(--sh-float-lg);
  transition:transform .8s var(--dolly), box-shadow .8s var(--dolly);
}
@supports not (border-color:color-mix(in srgb, #000 8%, transparent)){
  .work__frame{border-color:rgba(20,22,26,.08)}
}
.work__frame::before{
  content:''; position:absolute; z-index:3; pointer-events:none;
  top:0; left:0; right:0; height:1px; background:var(--glass-lip);
}
.work__win{
  position:relative; display:block; overflow:hidden;
  border:1px solid rgba(20,22,26,.10); background:var(--ground-deep);
}
.work__win img{width:100%; height:100%; display:block; object-fit:cover}
.work__win::after{  /* the seat — the mat shadows the top of the print */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 4px 12px -6px rgba(20,22,26,.34),
             inset 0 0 0 1px rgba(255,255,255,.045);
}
@media (hover:hover) and (pointer:fine){
  .work__frame:hover{transform:translateY(-6px);
    box-shadow:var(--glass-thick),
      0 3px 3px rgba(28,25,20,.045), 0 20px 40px rgba(28,25,20,.07),
      0 60px 124px rgba(28,25,20,.115);}
  .work__win img{transition:transform 1.3s var(--dolly)}
  .work__frame:hover .work__win img{transform:scale(1.045)}
}

/* the caption — a single quiet tracked line, no ledger, no figure */
.work__cap{
  margin:clamp(12px,1.2vw,17px) 0 0;
  display:flex; gap:12px; align-items:baseline;
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.work__cap b{color:var(--accent-ink); font-weight:560}
.work__cap::before{  /* a short gold tick, the chapter's recurring mark */
  content:''; flex:0 0 auto; width:14px; height:1px; background:var(--gold);
  transform:translateY(-3px);
}

/* --- IV.b  the hang — asymmetric, big ------------------------------------ */
.work__lead{margin:clamp(48px,6.5vw,104px) var(--gutter) 0; position:relative; z-index:1}
.work__lead .work__win{aspect-ratio:2 / 1}   /* the statement: cinemascope-ish */

/* an unequal pair — 7 and 5, bottom-aligned so the caption baselines meet */
.work__pair{
  margin:clamp(40px,5vw,84px) var(--gutter) 0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px); align-items:end;
}
.work__pair--a .work__piece:nth-child(1){grid-column:1 / 8}
.work__pair--a .work__piece:nth-child(2){grid-column:8 / 13}
.work__pair--b .work__piece:nth-child(1){grid-column:1 / 6}
.work__pair--b .work__piece:nth-child(2){grid-column:6 / 13}
.work__piece{margin:0}
.work__piece .work__win{aspect-ratio:4 / 3}
.work__pair--a .work__piece:nth-child(1) .work__win,
.work__pair--b .work__piece:nth-child(2) .work__win{aspect-ratio:3 / 2}

/* a full-bleed breather — edge to edge, the one image with no mat */
.work__bleed{margin:clamp(56px,7vw,120px) 0 0; position:relative; z-index:1}
.work__bleed img{
  width:100%; height:clamp(320px,54vh,620px); object-fit:cover; display:block;
}
.work__bleedcap{
  margin:13px var(--gutter) 0;
  display:flex; gap:12px; align-items:baseline;
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.work__bleedcap b{color:var(--accent-ink); font-weight:560}

/* the coda — REAL delivered work. The mood pieces above are stock placeholders;
   this closing pair is Ankkush's own photography (a boardroom fit-out and a
   working warehouse), so it carries no "demo" caption — its realness is the
   point, and it lands the chapter on genuine craft. A ruled eyebrow + a Fraunces
   line set it apart as the "this is us" moment. */
.work__real{margin:clamp(60px,7.5vw,120px) var(--gutter) 0; position:relative; z-index:1}
.work__realeyebrow{margin:0}
.work__realnote{
  margin:clamp(16px,1.8vw,26px) 0 clamp(40px,4.6vw,68px); max-width:30ch;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 72,'wght' 328,'SOFT' 18,'WONK' 1;
  font-size:var(--t-32); line-height:1.16; color:var(--ink); letter-spacing:var(--tr-head);
}
.work__realnote em{font-style:italic; color:var(--accent-ink)}
/* the real pair — its own grid (so it doesn't inherit .work__pair's gutter
   margin twice), but carries .work__pair--a for the 7/5 spans + aspects */
.work__realpair{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px); row-gap:clamp(30px,5vw,52px); align-items:end;
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1040px){
  .work__h{grid-column:1 / -1; font-size:var(--t-72)}
  .work__deck{grid-column:1 / -1; max-width:52ch}
  .work__numeral{display:none}
  .work__lead .work__win{aspect-ratio:16 / 9}
  .work__pair--a .work__piece:nth-child(1),
  .work__pair--a .work__piece:nth-child(2),
  .work__pair--b .work__piece:nth-child(1),
  .work__pair--b .work__piece:nth-child(2){grid-column:1 / -1}
  .work__pair{row-gap:clamp(30px,5vw,52px)}
  .work__piece .work__win{aspect-ratio:3 / 2 !important}
  .work__realnote{max-width:46ch; font-size:var(--t-24)}
}
@media (max-width:720px){
  .work__frame:hover{transform:none}
  .work__frame{padding:clamp(8px,2vw,12px);
    box-shadow:var(--glass-thick), 0 1px 1px rgba(28,25,20,.035), 0 8px 22px rgba(28,25,20,.07)}
  .work__lead .work__win{aspect-ratio:4 / 3}
  .work__bleed img{height:clamp(260px,44vh,420px)}
}


/* a portrait frame — the hospitality fit-out is 2:3, and cropping it to landscape
   loses the ceiling detail that is the whole reason the shot works */
.work__piece .work__win--tall{aspect-ratio:4 / 5}
@media (max-width:1040px){ .work__piece .work__win--tall{aspect-ratio:3 / 4 !important} }


/* --- MODULE: chapter-v.css --- */
/* ============================================================================
   CHAPTER V — THE CLOSE                                  light: Golden (.82→1.0)

   The payoff. Chapter I opened in fog before sunrise; Chapter V closes with the
   sun risen over that same fog sea — the light journey completes on one
   landscape. Then it converts: sectors, the agencies who trust the work, a
   contact line, and a hero-scale sign-off where COMMERCIAL is finally allowed
   to be big (the one place the sub-brand goes large — settled in NEXT.md §2b).
   ========================================================================= */

.ch-close{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 84% at 28% -6%,
      color-mix(in oklab, var(--ground), #fff 52%) 0%, transparent 46%),
    radial-gradient(100% 86% at 88% 58%,
      color-mix(in srgb, var(--stop-4) 82%, transparent) 0%, transparent 60%),
    linear-gradient(176deg,
      color-mix(in oklab, var(--ground), #fff 14%) 0%,
      color-mix(in oklab, var(--ground) 34%, var(--ground-deep)) 100%);
}
@supports not (background:color-mix(in srgb, #000 3%, #fff)){
  .ch-close{background:var(--ground)}
}

/* --- V.a  the golden vista — a full-bleed bookend of Chapter I ----------- */
.close__hero{
  position:relative; min-height:clamp(560px,86vh,900px);
  display:grid; align-content:center;
  padding:clamp(90px,13vh,160px) var(--gutter);
  isolation:isolate;
}
.close__hero .close__media{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
}
.close__hero .close__media img{width:100%; height:100%; object-fit:cover; display:block}
/* a light warm veil, strongest at the upper-left where the type sits, so dark
   ink clears AA over the bright sky without hiding the sunrise. Verified with
   the frame-by-frame contrast harness, as Chapter I was. */
.close__hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--ground) 82%, transparent) 0%,
    color-mix(in srgb, var(--ground) 44%, transparent) 34%,
    transparent 62%);
}
.close__numeral{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:clamp(-30px,-2vw,-6px); right:calc(var(--gutter) - .06em);
  margin:0; font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 144,'wght' 260,'SOFT' 40,'WONK' 1;
  font-size:clamp(200px,30vw,460px); line-height:.66; letter-spacing:.02em;
  color:color-mix(in srgb, var(--accent-ink) 14%, transparent);
}
@supports not (color:color-mix(in srgb, #000 8%, transparent)){
  .close__numeral{color:rgba(122,90,34,.13)}
}
.close__lead{max-width:20ch; position:relative; z-index:1}
.close__eyebrow{margin:0 0 clamp(16px,1.8vw,26px)}
.close__h{
  margin:0; font-size:var(--t-120);
  font-variation-settings:'opsz' 144,'wght' 316,'SOFT' 28,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.94; color:var(--ink);
}
.close__h .em-gold{font-style:italic}
.close__sub{
  margin:clamp(22px,2.4vw,36px) 0 0; max-width:40ch;
  font-size:var(--t-18); line-height:1.5; color:var(--ink);
}

/* --- V.b  sectors — folded in, keyword-rich, quiet ---------------------- */
.close__sectors{
  padding:clamp(72px,9vw,140px) var(--gutter) clamp(20px,3vw,40px);
  position:relative; z-index:1;
}
.close__sectors .eyebrow{margin:0 0 clamp(14px,1.6vw,22px)}
/* the capability heading — same display voice as every other chapter, so the
   sector grid reads as a chapter beat rather than a bolted-on services list */
.close__secth{
  margin:0 0 clamp(34px,4vw,58px); max-width:18ch;
  font-size:var(--t-72);
  font-variation-settings:'opsz' 144,'wght' 318,'SOFT' 28,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.98; color:var(--ink);
}
.close__secth .em-gold{font-style:italic}
.close__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--hair);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.close__cell{
  background:var(--ground); padding:clamp(22px,2.6vw,40px) clamp(18px,2vw,30px);
  display:flex; flex-direction:column; gap:8px; min-height:clamp(150px,17vw,210px);
}
.close__cell h3{
  margin:0; font-family:Fraunces, Georgia, serif;
  font-variation-settings:'opsz' 60,'wght' 336,'SOFT' 14,'WONK' 0;
  font-size:var(--t-24); line-height:1.05; color:var(--ink); letter-spacing:var(--tr-head);
}
.close__cell p{
  margin:auto 0 0; font-size:var(--t-14); line-height:1.5; color:var(--muted);
}
.close__cell .close__cellnum{
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--accent-ink); font-weight:560;
}
/* the sector icon — 24px line art, one stroke weight, sitting above the index
   number. Gold at rest so the six read as a set; it deepens to accent-ink on
   hover of the cell, the same "lift" language as the plates. */
.close__icon{
  width:clamp(26px,2.2vw,32px); height:clamp(26px,2.2vw,32px);
  display:block; margin:0 0 clamp(14px,1.5vw,20px);
  color:var(--gold); flex:0 0 auto;
  transition:color .5s var(--dolly), transform .6s var(--dolly);
}
.close__cell{transition:background .5s var(--dolly)}
@media (hover:hover) and (pointer:fine){
  .close__cell:hover{background:color-mix(in oklab, var(--ground), #fff 45%)}
  .close__cell:hover .close__icon{color:var(--accent-ink); transform:translateY(-2px)}
}
@supports not (background:color-mix(in oklab, #000, #fff 50%)){
  .close__cell:hover{background:#FBFAF6}
}

/* --- V.c  the client marquee — real agencies, scrolling ----------------- */
.close__clients{padding:clamp(56px,7vw,110px) 0 clamp(56px,7vw,110px); position:relative; z-index:1}
.close__clients .eyebrow{margin:0 var(--gutter) clamp(26px,3vw,40px); text-align:center}
.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; width:max-content; align-items:center; gap:clamp(42px,5.5vw,92px);
  animation:marquee 56s linear infinite; will-change:transform;
}
/* real client logos, normalised to one ink monochrome and one height, held at a
   quiet opacity so the strip reads as one calm band rather than a jumble of
   brands. They lift to full on hover of the strip. */
.marquee__track img{
  flex:0 0 auto; height:clamp(26px,3.4vw,40px); width:auto; display:block;
  opacity:.5; transition:opacity .5s var(--dolly);
  -webkit-user-drag:none; user-select:none;
}
@media (hover:hover){
  .marquee:hover .marquee__track{animation-play-state:paused}
  .marquee:hover .marquee__track img{opacity:.72}
}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none; justify-content:center; flex-wrap:wrap; width:auto; gap:clamp(26px,3.4vw,54px)}
  .marquee__track img{opacity:.6}
  .marquee{mask-image:none; -webkit-mask-image:none}
}

/* --- V.c-bis  genuine testimonials — adapted from the residential pullquote,
   re-skinned to the commercial glass + gold. Real reviews only. --------- */
.close__quotes{
  padding:clamp(20px,3vw,44px) var(--gutter) clamp(64px,8vw,120px);
  position:relative; z-index:1;
}
.close__quotes .eyebrow{margin:0 0 clamp(30px,3.6vw,52px); text-align:center}
.quotes-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,28px); max-width:1320px; margin:0 auto;
  align-items:start;
}
.pullquote{
  position:relative; display:flex; flex-direction:column; margin:0;
  background:var(--glass-face); border:1px solid var(--glass-edge);
  padding:clamp(30px,3.4vw,50px) clamp(28px,3.2vw,46px) clamp(26px,3vw,40px);
  box-shadow:var(--glass-thick), var(--sh-float-md);
  overflow:hidden; transition:transform .6s var(--dolly), box-shadow .6s var(--dolly);
}
.pullquote::before{  /* the gold catchlight, as on every glass panel */
  content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--glass-lip);
}
@media (hover:hover){
  .pullquote:hover{transform:translateY(-6px); box-shadow:var(--glass-thick), var(--sh-float-lg)}
}
.quote-stars{display:flex; gap:5px; margin-bottom:18px; color:var(--gold)}
.quote-stars svg{width:17px; height:17px; display:block}
.quote-glyph{
  position:absolute; top:2px; right:24px; font-family:Fraunces, Georgia, serif;
  font-weight:600; font-size:8rem; line-height:1; color:var(--gold);
  opacity:.14; user-select:none; pointer-events:none;
}
.pullquote blockquote{
  margin:0; font-family:Fraunces, Georgia, serif; font-style:italic;
  font-variation-settings:'opsz' 40,'wght' 400,'SOFT' 16,'WONK' 0;
  font-size:clamp(1.06rem,1.5vw,1.32rem); line-height:1.6; color:var(--ink);
}
.pullquote blockquote p{margin:0}
.pullquote figcaption{
  margin-top:clamp(22px,2.4vw,30px); padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--hair);
  font-size:11px; font-weight:500; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--muted);
}
.pullquote figcaption strong{
  display:block; color:var(--accent-ink); font-weight:560;
  letter-spacing:.14em; font-size:12px; margin-bottom:5px;
}

/* --- V.d  the contact call ---------------------------------------------- */
.close__cta{
  padding:clamp(72px,9vw,150px) var(--gutter) clamp(80px,10vw,150px);
  position:relative; z-index:1; text-align:center;
  border-top:1px solid var(--hair);
}
.close__cta .eyebrow{margin:0 0 clamp(20px,2.2vw,32px)}
.close__ctah{
  margin:0 auto; max-width:18ch;
  font-size:var(--t-72);
  font-variation-settings:'opsz' 144,'wght' 320,'SOFT' 26,'WONK' 1;
  letter-spacing:var(--tr-display); line-height:.98; color:var(--ink);
}
.close__ctah .em-gold{font-style:italic}
.close__actions{
  margin:clamp(34px,4vw,56px) 0 0;
  display:flex; justify-content:center; gap:clamp(14px,1.6vw,24px); flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:clamp(14px,1.2vw,18px) clamp(24px,2.4vw,38px);
  font-size:var(--t-14); letter-spacing:.02em; font-weight:500;
  text-decoration:none; transition:transform .5s var(--dolly), box-shadow .5s var(--dolly), background .3s;
}
.btn--primary{
  background:var(--ink); color:var(--ground);
  box-shadow:var(--sh-float-md);
}
.btn--ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--hair-strong);
}
@media (hover:hover){
  .btn--primary:hover{transform:translateY(-3px); box-shadow:var(--sh-float-lg)}
  .btn--ghost:hover{border-color:var(--ink); transform:translateY(-3px)}
}

/* --- V.e  the sign-off footer ------------------------------------------- */
/* ESPRESSO SIGN-OFF — deliberately the one dark surface on the site.
   The chapters are a light journey and stay light; the footer is night falling
   after it, which both closes the arc and matches the residential site's footer
   so the two brands read as one studio. Its own light tokens (--fink/--fmuted/
   --fline) are declared locally so nothing in the --sun system has to know a
   dark surface exists. */
.site-footer{
  position:relative; z-index:1;
  --fink:#F4EFE6;
  --fmuted:rgba(244,239,230,.56);
  --fline:rgba(244,239,230,.15);
  background:radial-gradient(130% 150% at 50% 0%, #2B261D 0%, #211D16 58%, #1C1813 100%);
  color:var(--fink);
  padding:clamp(72px,9vw,124px) var(--gutter) clamp(34px,4vw,54px);
  overflow:hidden;
}
.site-footer::before{        /* the gold hairline, luminous on the dark ground */
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* the hero-scale sign-off: SIXTH VISION set large, COMMERCIAL larger still and
   in full ink — the one moment the sub-brand is allowed to dominate */
.signoff{margin:0 0 clamp(48px,6vw,90px)}
.signoff__mark{
  display:block; width:min(46vw,560px); height:auto; color:var(--fink);
}
/* COMMERCIAL is the sign-off. Flat cream made it read as plain caption text at
   this scale, so it now carries a champagne gradient — cream at the top edge
   falling to the brand gold — which catches like gilt lettering on a dark wall.
   background-clip:text, with a solid gold fallback for anything that can't. */
.signoff__big{
  display:block; margin:clamp(6px,.8vw,14px) 0 0;
  font-family:Jost, system-ui, sans-serif; font-weight:500;
  font-size:clamp(46px,11.6vw,178px); line-height:.9;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--gold-soft, #E9D6A8);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .signoff__big{
    background:linear-gradient(168deg,
      #F6EEDC 0%,
      #E4CE94 38%,
      #C8A353 68%,
      #A8801F 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
/* the wordmark above stays cream so the gilt line is the one that sings */
.signoff__mark{opacity:.92}
.footer__cols{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:start;
  border-top:1px solid var(--fline); padding-top:clamp(34px,4vw,56px);
}
.footer__cols h3, .footer__cols .footer__label{
  margin:0 0 clamp(14px,1.4vw,20px);
  font-size:11px; letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--gold); font-weight:560;
}
.footer__cols a{color:var(--fink); text-decoration:none; transition:color .3s var(--dolly)}
.footer__cols a:hover{color:var(--gold)}
.footer__contact p{margin:0 0 6px; font-size:var(--t-16); line-height:1.5}
.footer__contact .footer__blurb{
  margin:clamp(14px,1.6vw,22px) 0 0; max-width:38ch;
  color:var(--fmuted); font-size:var(--t-14);
}
.footer__list{display:flex; flex-direction:column; gap:9px; font-size:var(--t-14)}
.footer__legal{
  margin:clamp(48px,6vw,84px) 0 0; padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--fline);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.04em; color:var(--fmuted);
}
.footer__legal a{color:var(--gold); text-decoration:none}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1040px){
  .close__numeral{display:none}
  .close__h{font-size:var(--t-96)}
  .close__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__contact{grid-column:1 / -1}
}
@media (max-width:1180px){
  .quotes-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px}
  /* with three cards on a two-column grid the last one would sit alone and
     half-width, which reads as a mistake — let it run the full row instead */
  .quotes-grid .pullquote:last-child{grid-column:1 / -1}
}
@media (max-width:820px){
  .quotes-grid{grid-template-columns:1fr; max-width:560px}
  .quotes-grid .pullquote:last-child{grid-column:auto}
}
@media (max-width:640px){
  .close__secth{font-size:var(--t-48)}
  .close__grid{grid-template-columns:1fr}
  .close__actions{flex-direction:column; align-items:stretch}
  .btn{justify-content:center}
  .footer__cols{grid-template-columns:1fr; gap:clamp(24px,6vw,40px)}
  .close__ctah{font-size:var(--t-60)}
}


/* --- social circles — the residential site's pattern, on espresso ---------- */
.social-circles{
  display:flex; gap:14px; margin:clamp(18px,2vw,26px) 0 0; flex-wrap:wrap;
}
.social-circles a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--fline); color:var(--fink);
  transition:border-color .35s var(--dolly), color .35s var(--dolly),
             transform .35s var(--dolly), background .35s var(--dolly);
}
.social-circles svg{width:17px; height:17px; display:block}
@media (hover:hover){
  .social-circles a:hover{
    border-color:var(--gold); color:var(--gold);
    background:rgba(244,239,230,.05); transform:translateY(-3px);
  }
}



/* --- MODULE: enterprise-cro-additions.css --- */
/* Floating Header CTA */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--ground);
  border: 1px solid var(--hair-strong);
  border-radius: 40px;
  font-family: Jost, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);
  color: var(--accent-ink);
}
.floating-cta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* Commercial Brief Modal */
.brief-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.brief-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.brief-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 16, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brief-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: var(--sh-float-lg);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.brief-modal.is-open .brief-modal__content {
  transform: scale(1) translateY(0);
}
.brief-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.brief-modal__close:hover { opacity: 1; }
.brief-modal__title {
  font-family: Fraunces, Georgia, serif;
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 8px 0;
}
.brief-modal__sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.brief-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brief-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brief-form__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.brief-form__input,
.brief-form__select,
.brief-form__textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  color: var(--ink);
  font-family: Jost, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.brief-form__input:focus,
.brief-form__select:focus,
.brief-form__textarea:focus {
  border-color: var(--ink);
}
.brief-form__btn {
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--ground);
  border: none;
  border-radius: 6px;
  font-family: Jost, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.brief-form__btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}


/* --- PERFORMANCE: skip rendering work for deep off-screen chapters ---------
   This page is ~18,000px tall. Without this the browser does style+layout for
   every one of the five chapters up front, which measured as ~2.4s of Total
   Blocking Time on throttled mobile. content-visibility:auto lets it skip the
   work until a section approaches the viewport (TBT measured 2,380ms -> 1,330ms,
   CLS stayed 0).

   Scoped DELIBERATELY to the last two chapters + footer, not to Chapter II:
   the light engine caches each chapter's offsetTop, and a section that has not
   rendered yet reports its contain-intrinsic-size placeholder instead of its
   real height. Keeping the early chapters eagerly rendered means the --sun
   mapping is exact for the part of the scroll a visitor sees first, and
   light.js re-measures once these later sections have rendered.

   contain-intrinsic-size uses the `auto` keyword so the browser remembers each
   section's real height after its first render — the scrollbar never jumps. */
.ch-work, .ch-close, .site-footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 2600px;
}