/* ==========================================================================
   FLUXARO / CONCEPT: FOIL
   Thesis: proof, on the record. Archival and editorial.
   Zero WebGL, zero shaders, zero canvas. This concept has to win on
   typography, hairline structure and timing alone.

   PALETTE NOTE, and this is the whole point of the signature feature:
   every canonical gold fails contrast on white. #C9A227 is 2.35:1 on this
   paper, which fails even the 3:1 large-text floor. So a gold-filled
   headline would be illegal on this ground. On this page gold is never a
   fill. The resting appearance of every headline is ink at ~18:1, and the
   gold exists only as a TRAVELLING SPECULAR HIGHLIGHT that crosses the
   glyphs and leaves. That is what makes the type read as stamped metal
   catching light rather than as yellow text, and it is what keeps it
   accessible. Accent hue derived from the hero frame itself: the lit
   brushed-brass rails sample at hsl(39 79% 48%) and their specular at
   hsl(35 76% 77%), which is why the foil band runs brass -> leaf -> warm
   white rather than through a neutral or a cool highlight.
   ========================================================================== */

:root{
  /* Ground and ink ------------------------------------------------------ */
  --paper:#FCFBF8;
  --white:#FFFFFF;
  --ink:#16130D;
  --ink-2:#3A342A;
  --grey:#797368;           /* 4.54:1 on paper, 4.70:1 on white. Legal for body.
                               Was #8C8578 at 3.53:1, documented here as large-text
                               only and then used on 12px captions, hosts, meta rows
                               and numerals across every route: 519 measured pairs
                               below the threshold. Darkened rather than hunted down
                               one selector at a time. */
  --rule:#E4DED1;
  --brass:#8A6A1F;          /* 5.05:1. the only gold legal for small text   */
  --leaf:#C9A227;           /* 2.35:1. decorative hairlines and foil only   */
  --foil-warm:#F6EDD4;      /* sampled off the lit brass in the hero frame  */

  /* Type ---------------------------------------------------------------- */
  --serif:'Cormorant Garamond','Iowan Old Style','Times New Roman',Times,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* The violent display jump. The upper bound is capped against viewport
     HEIGHT as well as width, because a three-row headline at 9.5rem does not
     fit a 900px-tall laptop screen alongside the plate, and a hero that
     overflows its own viewport is a worse failure than a slightly smaller
     headline. On a 1440x900 screen this resolves to ~137px. */
  --fs-display:clamp(3.35rem, 1.05rem + 9.4vw, min(8.6rem, 15.4vh));
  --fs-h2:clamp(2.05rem, 1.1rem + 4.05vw, 4.6rem);
  --fs-h3:clamp(1.3rem, 1.12rem + 0.78vw, 1.85rem);
  --fs-lead:clamp(1.14rem, 1.02rem + 0.52vw, 1.5rem);
  --fs-body:clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --fs-sm:clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);
  --fs-label:0.75rem;
  --fs-idx:clamp(1.6rem, 1.22rem + 1.65vw, 2.5rem);

  /* Space: 8pt ramp ----------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px; --s-12:200px;

  --container:1280px;
  --gutter:clamp(20px, 4vw, 64px);
  --section-pad:clamp(88px, 11vw, 176px);
  --measure:min(65ch, 100%);

  /* Motion -------------------------------------------------------------- */
  --e-out:cubic-bezier(.05,.7,.1,1);
  --e-move:cubic-bezier(.2,0,0,1);
  --e-in:cubic-bezier(.3,0,.8,.15);
  --d-micro:.18s;
  --d-hover:.34s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.62;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* Focus: brass at 5.05:1 on paper, well clear of the 3:1 non-text floor.  */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
  border-radius:1px;
}

::selection{background:rgba(201,162,39,.24);color:var(--ink)}

.skip{
  position:fixed;top:var(--s-4);left:var(--s-4);z-index:200;
  padding:var(--s-3) var(--s-5);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;transform:translateY(-200%);
}
.skip:focus{transform:none}

/* --------------------------------------------------------------------------
   Paper grain. Kills the flat-screen plastic look and reads as stock.
   One 180px tile, no blend mode, 4% opacity. Cheap.
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.042;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   THE SELF-DRAWING HAIRLINE GRID
   The layout skeleton is not decoration here, it is part of the animation:
   five column rules pinned to the container, each scaling 0 -> 1 on scroll
   scrub at a different rate, so the page appears to rule itself as you read.
   -------------------------------------------------------------------------- */
.gridlines{position:fixed;inset:0;z-index:1;pointer-events:none}
.gridlines__in{
  position:relative;height:100%;
  max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
}
.gridlines__v{
  position:absolute;top:0;bottom:0;width:1px;
  background:var(--rule);
  transform:scaleY(0);transform-origin:top center;
}
.gridlines__v:nth-child(1){left:var(--gutter)}
.gridlines__v:nth-child(2){left:calc(var(--gutter) + (100% - 2*var(--gutter))*.25)}
.gridlines__v:nth-child(3){left:calc(var(--gutter) + (100% - 2*var(--gutter))*.5)}
.gridlines__v:nth-child(4){left:calc(var(--gutter) + (100% - 2*var(--gutter))*.75)}
.gridlines__v:nth-child(5){right:var(--gutter)}
@media (max-width:860px){
  .gridlines__v:nth-child(2),.gridlines__v:nth-child(4){display:none}
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
/* width:100% matters: .wrap is a child of a column flex container in the
   hero, where margin-inline:auto would otherwise shrink it to max-content. */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.section{padding-block:var(--section-pad)}
.section--tight{padding-block:clamp(64px,8vw,120px)}

.rule{height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left center;width:100%}
.rule--leaf{background:var(--leaf);opacity:.55}

/* Eyebrow: mono, tracked, ink-2 at 11.97:1. Never grey, never brass. */
.eyebrow{
  display:flex;align-items:center;gap:var(--s-4);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
  margin-bottom:var(--s-7);
}
.eyebrow__num{font-variant-numeric:tabular-nums;color:var(--brass)}
.eyebrow__rule{flex:0 0 clamp(40px,7vw,120px);height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left center}
.eyebrow__spacer{flex:1 1 auto;height:1px;background:var(--rule);opacity:.7}

/* --------------------------------------------------------------------------
   FOILSTAMPREVEAL
   Structure per row:
     .fs__row   clip-path curtain, driven by --cv (100 -> 0)
       .fs__in  the rise, driven by GSAP yPercent
         .fs__base  the real, accessible ink text
         .fs__foil  aria-hidden duplicate, background-clip:text,
                    a brass -> leaf -> warm-white -> leaf -> brass band
                    inside an otherwise fully transparent gradient.
   At rest --fx is parked at 130, which puts the band entirely off the left
   of the glyph box, so the foil layer paints NOTHING and the resting
   appearance is pure ink. The gradient is never the type fill; it is a
   transient overlay that crosses and leaves. That distinction is the feature.
   -------------------------------------------------------------------------- */
.fs{
  font-family:var(--serif);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.022em;
  color:var(--ink);
}
.fs--display{font-size:var(--fs-display)}
.fs--h2{font-size:var(--fs-h2);letter-spacing:-.018em}

.fs__row{
  display:block;
  padding-block:.18em .30em;
  margin-block:-.18em -.30em;
  clip-path:inset(0 0 calc(var(--cv,0) * 1%) 0);
}
.js .fs__row{--cv:100}

.fs__in{position:relative;display:inline-block;max-width:100%}
.fs__base{display:block}
.fs__foil{
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;user-select:none;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-repeat:no-repeat;
  background-size:200% 100%;
  background-position:calc(var(--fx,130) * 1%) 0;
  -webkit-background-clip:text;
  background-clip:text;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 42%,
    var(--brass) 45.5%,
    var(--leaf) 48%,
    var(--foil-warm) 49.4%,
    #FFFFFF 50%,
    var(--foil-warm) 50.6%,
    var(--leaf) 52%,
    var(--brass) 54.5%,
    rgba(255,255,255,0) 58%,
    rgba(255,255,255,0) 100%);
}
/* Belt and braces: with no JS there is nothing to park the band, but --fx
   already rests at 130 in CSS, so the layer is blank and the ink stands. */
.no-js .fs__row{--cv:0}

@media (prefers-reduced-motion:reduce){
  .js .fs__row{--cv:0}
  .fs__foil{display:none}
}

/* --------------------------------------------------------------------------
   DUAL-LAYER FILL HOVER
   Base text sits in ink-2, a pixel-identical absolutely positioned fill
   layer in full ink wipes across it with clip-path. Nothing in the layout
   moves, nothing reflows, no opacity fade, and the hover goes DARKER on the
   light ground exactly as the palette requires.
   -------------------------------------------------------------------------- */
.dl{position:relative;display:inline-block;color:var(--ink-2)}
.dl__f{
  position:absolute;left:0;top:0;width:100%;
  color:var(--ink);
  pointer-events:none;user-select:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--d-hover) var(--e-move);
}
a:hover .dl__f,a:focus-visible .dl__f,button:hover .dl__f,button:focus-visible .dl__f{
  clip-path:inset(0 0 0 0);
}
@media (prefers-reduced-motion:reduce){
  .dl__f{transition-duration:.12s}
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-block:var(--s-5);
  background:rgba(252,251,248,.88);
  transition:padding-block .4s var(--e-move),background-color .4s linear;
}
@supports (backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px)){
  .nav{-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
}
.nav.is-stuck{padding-block:var(--s-3);background:rgba(252,251,248,.96)}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--e-move);
}
.nav.is-stuck::after{transform:scaleX(1)}
.nav__in{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:var(--s-6);
}
.wordmark{
  font-family:var(--serif);font-weight:600;font-size:1.32rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  line-height:1;flex:0 0 auto;
}
.wordmark sup{
  font-family:var(--mono);font-size:.46em;letter-spacing:.08em;
  vertical-align:super;color:var(--brass);margin-left:.35em;font-weight:400;
}
.nav__links{display:flex;gap:clamp(18px,2.2vw,34px);margin-left:auto;align-items:center}
.nav__links a{
  font-size:var(--fs-sm);font-weight:400;letter-spacing:.015em;
  padding-block:var(--s-2);
}
.nav__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;padding-block:var(--s-2);position:relative;
}
.nav__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(1);transform-origin:right center;
  transition:transform .42s var(--e-move);
}
.nav__cta:hover::after,.nav__cta:focus-visible::after{transform:scaleX(0)}
.nav__cta svg{transition:transform var(--d-hover) var(--e-move)}
.nav__cta:hover svg{transform:translateX(5px)}
@media (max-width:860px){.nav__links{display:none}}

/* --------------------------------------------------------------------------
   Hero
   The footage is set as a PLATE, the way a photographic plate sits in a
   monograph, rather than as a full-bleed wash under the type. The display
   type therefore sits on paper at ~18:1 and never fights the very bright
   white cleanroom footage. The only text that does sit over the footage is
   the plate caption, and it gets a warm paper-white scrim with ink on it,
   tuned against the brightest pixel in the frame rather than the average.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(100px,11.5vh,158px);
  padding-bottom:clamp(24px,3.5vh,52px);
}
.hero__top{margin-bottom:auto}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:baseline;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  margin-bottom:clamp(20px,3.6vh,52px);
}
.hero__meta .sep{color:var(--grey)}
.hero h1{margin-bottom:clamp(24px,3.6vh,60px)}
@media (min-width:1000px){
  .hero__row3{padding-left:clamp(0px,5vw,110px)}
}
.hero__lower{
  display:grid;gap:var(--s-7) clamp(32px,5vw,80px);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:1000px){
  .hero__lower{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
}
.hero__lead{max-width:52ch;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);font-weight:300}
.hero__lead strong{font-weight:400;color:var(--ink)}
/* Right-aligned on desktop so it sits on the inner gutter beside the plate
   and clears the fixed back-to-all-four chip in the bottom-left corner. */
.hero__cue{
  display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
@media (min-width:1000px){
  .hero__cue{justify-content:flex-end;padding-right:clamp(0px,1.5vw,20px)}
}
.hero__cueline{position:relative;width:1px;height:46px;background:var(--rule);overflow:hidden}
.hero__cuedot{position:absolute;left:0;top:0;width:1px;height:14px;background:var(--brass)}

/* The plate */
.hero__plate{
  position:relative;overflow:hidden;
  background-color:#EDE9E2;
  background-image:url("../media/hero-poster-v2.jpg");
  background-size:cover;background-position:center;
  aspect-ratio:16/9;
  clip-path:inset(0 0 0 calc(var(--pv,0) * 1%));
  border:1px solid var(--rule);
}
.js .hero__plate{--pv:100}
.no-js .hero__plate{--pv:0}
@media (min-width:1000px){
  .hero__plate{
    aspect-ratio:auto;
    min-height:clamp(196px,29vh,352px);
    height:100%;
    /* Break the plate out to the viewport edge. Computed from the container
       geometry, NOT from calc(50vw - 50%): inside a grid cell that 50% would
       resolve against the CELL, which overshot the edge by ~300px. */
    margin-right:calc(-1 * ((100vw - min(100vw, var(--container)))/2 + var(--gutter)));
    border-right:0;
  }
}
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:16/9;
}
.no-autoplay .hero__vid{display:none}
/* Brass hairline along the top of the plate, echoing the rails in frame. */
.hero__plate::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--leaf);opacity:.8;
}
.plate__cap{
  position:absolute;left:0;bottom:0;z-index:2;
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);
  /* Scrim tuned against the brightest pixel in the frame (near #FFFFFF on
     the ceiling panels), so it is a near-opaque warm paper, not a dark
     gradient. Ink on it clears 4.5:1 with a wide margin. */
  background:rgba(252,251,248,.94);
  border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);
}
.plate__cap .sep{color:var(--grey)}
/* Below 1000px the plate stacks last, so its bottom-left corner is where the
   fixed back-link chip lands. Move the caption to the top edge there. */
@media (max-width:999px){
  .plate__cap{bottom:auto;top:1px;border-top:0;border-bottom:1px solid var(--rule)}
}

/* --------------------------------------------------------------------------
   Placeholder chip. SPEC mandates the literal token PLACEHOLDER in markup
   and a brass-outlined mono chip. Outline is brass (5.05:1, a rule, not a
   fill), text is ink-2 so nothing on this page carries a flat gold fill.
   -------------------------------------------------------------------------- */
.ph{
  display:inline-flex;align-items:center;
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--brass);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
  line-height:1.25;background:var(--white);
}
.ph::before{content:"";width:5px;height:5px;background:var(--brass);margin-right:var(--s-3);flex:0 0 auto}
.ph-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* Status chip. Same shape as .ph but a quiet rule rather than a brass one:
   this marks a decided state (a commissioned guide that is not drafted yet),
   not a gap waiting on an answer, so it must not read as an open slot. */
.co__st{
  display:inline-flex;align-items:center;margin-left:var(--s-3);
  padding:2px var(--s-3);border:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);font-style:normal;
  line-height:1.3;white-space:nowrap;vertical-align:.08em;
}

/* --------------------------------------------------------------------------
   Positioning
   -------------------------------------------------------------------------- */
.pos__grid{display:grid;gap:var(--s-9) clamp(32px,5vw,88px);grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){.pos__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.prose p{max-width:var(--measure);color:var(--ink-2);margin-bottom:var(--s-5)}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:48ch}

.stated{display:grid;gap:0;margin-top:var(--s-8)}
.stated__item{padding-block:var(--s-6);border-top:1px solid var(--rule)}
.stated__item:last-child{border-bottom:1px solid var(--rule)}
.stated__t{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s-3);
}
.stated__d{color:var(--ink-2);max-width:56ch}

/* --------------------------------------------------------------------------
   Index of work
   -------------------------------------------------------------------------- */
.wk{display:block;border-top:1px solid var(--rule);position:relative;clip-path:inset(0 calc(var(--wv,0) * 1%) 0 0)}
.js .wk{--wv:100}
.no-js .wk{--wv:0}
.wk:last-of-type{border-bottom:1px solid var(--rule)}
.wk__a{
  display:grid;align-items:baseline;
  gap:var(--s-2) clamp(16px,3vw,48px);
  grid-template-columns:auto minmax(0,1fr);
  padding-block:clamp(22px,2.6vw,38px);
  position:relative;
}
@media (min-width:900px){
  .wk__a{grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1.25fr) auto}
}
.wk__n{
  font-family:var(--mono);font-size:var(--fs-idx);color:var(--grey);
  font-variant-numeric:tabular-nums;line-height:1;font-weight:400;
  transition:color var(--d-hover) var(--e-move);
}
.wk__a:hover .wk__n{color:var(--brass)}
.wk__name{
  font-family:var(--serif);font-weight:600;font-size:var(--fs-h3);
  line-height:1.1;letter-spacing:-.01em;
  transition:transform var(--d-hover) var(--e-move);
}
.wk__a:hover .wk__name,.wk__a:focus-visible .wk__name{transform:translateX(8px)}
.wk__what{color:var(--ink-2);font-size:var(--fs-sm);grid-column:2/-1}
@media (min-width:900px){.wk__what{grid-column:auto}}
/* nowrap only where it has its own right-aligned column. Below 900px it
   shares the row, and 'NEXT.JS 15, SUPABASE, UMAMI' set in uppercase mono with
   .1em tracking is wider than a 320px phone: it pushed the whole document to
   332px and failed WCAG reflow on this one page. */
.wk__stack{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  grid-column:2/-1;min-width:0;overflow-wrap:anywhere;
}
@media (min-width:900px){.wk__stack{grid-column:auto;text-align:right;white-space:nowrap}}
.wk__underline{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--leaf);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--e-move);
}
.wk__a:hover .wk__underline,.wk__a:focus-visible .wk__underline{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   Software
   -------------------------------------------------------------------------- */
.spec{margin-top:var(--s-8)}
.spec__row{padding-block:clamp(26px,3vw,44px);position:relative}
.spec__rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left center}
.spec__grid{display:grid;gap:var(--s-4) clamp(24px,4vw,72px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.spec__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}}
.spec dt{
  font-family:var(--serif);font-weight:600;font-size:var(--fs-h3);
  line-height:1.15;letter-spacing:-.008em;
}
.spec dd{margin:0;color:var(--ink-2);max-width:62ch}
.spec__tag{
  display:block;margin-top:var(--s-3);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);
}

/* --------------------------------------------------------------------------
   Colophon: where the signature feature performs at full size
   -------------------------------------------------------------------------- */
.colo{position:relative}
.colo__grid{display:grid;gap:var(--s-8) clamp(32px,5vw,88px);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.colo__grid{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}}
.colo__stamp{margin-bottom:var(--s-7)}
.colo__mark{
  position:absolute;left:calc(var(--gutter) * -1);top:0;bottom:0;width:1px;
  background:var(--leaf);opacity:.6;transform:scaleY(0);transform-origin:top center;
}
.colo__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-4);align-items:baseline;
  padding-block:var(--s-4);border-bottom:1px solid var(--rule);
  color:var(--ink-2);font-size:var(--fs-sm);
}
.colo__list li:first-child{border-top:1px solid var(--rule)}
.colo__k{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass);white-space:nowrap;
}
.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;position:relative;
  padding:var(--s-4) 0;margin-top:var(--s-6);
  transition:transform .12s var(--e-move);
}
.btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform-origin:left center;
  transition:transform .42s var(--e-move);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(.42)}
.btn:active{transform:scale(.985)}
.btn svg{transition:transform .5s var(--e-move)}
.btn:hover svg{transform:rotate(-38deg)}

/* --------------------------------------------------------------------------
   Close + footer
   -------------------------------------------------------------------------- */
.close__grid{display:grid;gap:var(--s-8) clamp(32px,5vw,88px);grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){.close__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
.mail{
  display:inline-flex;align-items:center;gap:var(--s-4);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem);
  line-height:1.1;letter-spacing:-.012em;position:relative;
  padding-bottom:var(--s-3);margin-top:var(--s-6);
}
.mail::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--e-out);
}
.mail.is-drawn::after{transform:scaleX(1)}
.mail:hover::after,.mail:focus-visible::after{transform-origin:right center;transform:scaleX(0);transition-duration:.44s}
.mail svg{flex:0 0 auto;transition:transform var(--d-hover) var(--e-move)}
.mail:hover svg,.mail:focus-visible svg{transform:translateX(7px)}
.founders{
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--rule);
  color:var(--ink-2);max-width:46ch;font-size:var(--fs-sm);
}

.foot{padding-block:var(--s-8) clamp(84px,10vh,120px);border-top:1px solid var(--rule)}
.foot__in{
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7);
  justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
}
.foot__concept{color:var(--ink)}
.foot__concept b{font-weight:400;color:var(--brass)}






/* Preview-chooser chrome override, added after the page's own styles.
   The fixed "all four" chip sat at full strength over body copy mid-page and read as
   broken text. It now rests dimmed and lifts to full on hover or keyboard focus, so it
   stays reachable without competing with the content it floats over. */



@media (prefers-reduced-motion:reduce){  }