/* Figment base layer. */

@font-face{font-family:"Birdie";src:url("../fonts/Birdie.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Taxi Driver";src:url("../fonts/TaxiDriver.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--dusk-surface);
  transition:background-color 120ms linear;
  color:var(--dusk-ink);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* paper grain, inline, no request */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* Birdie owns h1 and h2 only. Never h3 and below. Weight 400, never heavier. */
h1,h2{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--tr-display);
  line-height:var(--lh-display);
  text-wrap:balance;
}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--terracotta);color:var(--limewash)}

:focus{outline:none}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:var(--radius)}
.is-invert :focus-visible{outline-color:var(--limewash)}

.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* small caps labels. tracking is a curve by size, not a constant. */
.u-label{
  font-family:var(--font-body);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);line-height:var(--lh-label);text-transform:uppercase;
}
.u-micro{
  font-family:var(--font-body);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-micro);line-height:var(--lh-label);text-transform:uppercase;
}

/* Taxi Driver at display scale. 1.31x Birdie for optical parity, because its
   x-height is 32.8% against Birdie's 43.0%. Never used for a job. */
/* Taxi Driver single-pair kern. Its f has a wide bowl that collides with a
   following o. letter-spacing applies AFTER a character, so this wraps the f
   ALONE, opening f-to-o and leaving o-to-r connected as a script should be.
   Wrapping the whole word spaces every pair and reads as loose letters.
   Two other rules learned from the same test: its v reads as a u, so avoid
   words like "moves"; and its comma sits high enough to read as a period, so
   this face takes periods, not commas. */
.u-kern{letter-spacing:0.05em}

.u-hand{
  font-family:var(--font-hand);
  font-size:var(--t-hand);
  line-height:var(--lh-hand);
  letter-spacing:var(--tr-hand);
  font-weight:400;
}

/* Measure is a typographic rule, not a layout rule. The grid places the column;
   this holds the line length inside it. Both studios hold 46 to 55 characters
   and let the box float, rather than fixing a box and letting the line run. */
.stack p{max-width:var(--measure)}
/* Birdie owns every size down to the lead. Below 28px its 43 percent x-height
   and 1.54x sidebearings stop being readable, so Hanken takes over at 19px. */
.u-lead{
  font-family:var(--font-display);
  font-size:var(--t-lead);
  line-height:1.16;
  letter-spacing:-0.018em;
  max-width:var(--measure-lead);
}


/* the heading gap, the single biggest correction in this rebuild */
.gap-hero    > * + *{margin-top:var(--gap-after-hero)}
.gap-display > * + *{margin-top:var(--gap-after-display)}
.stack       > * + *{margin-top:var(--gap-para)}

/* MOTION BUDGET, to Metalab's measured spec: one hero-scale move used once,
   one repeatable section-enter behaviour, one continuous element, and micro
   interactions on every interactive element.
     1. hero entrance      masked reveal on load, below
     2. section enter      .reveal, translate paired with opacity, never a fade alone
     3. continuous         the light ramp, scroll-scrubbed, in index.html
     4. scrubbed set-piece the curtain, once, in blocks.css
     5. micro              200ms padding-right and underline weight
*/

/* 2. section enter. Applied identically to every block. Transform is always
   paired with opacity; Metalab never ships a fade with no companion property. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-chrome) var(--ease),transform var(--dur-chrome) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* 1. hero entrance. A mask that opens upward while the type rises inside it,
   which is the mechanic their hero media uses: the element travels inside a
   container that grows, and opacity is never touched alone. */
@keyframes hero-rise{
  from{clip-path:inset(105% 0 -8% 0);transform:translateY(30px)}
  to  {clip-path:inset(-25% 0 -8% 0);transform:none}
}
.js .hero__title,
.js .hero__body,
.js .form--hero,
.js .wordmark,
.js .hero__meta{animation:hero-rise 1050ms var(--ease) both}
.js .hero__title{animation-delay:60ms}
.js .hero__body {animation-delay:200ms}
.js .form--hero {animation-delay:320ms}
.js .hero__meta {animation-delay:420ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition:none !important}
  /* the light holds still, the curtain is open, everything is at rest */
  html{--dusk-surface:var(--limewash) !important;--dusk-alt:var(--plaster) !important;
       --dusk-ink:var(--charcoal) !important}
  .curtain{clip-path:none !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .js .hero__title,.js .hero__body,.js .form--hero,.js .wordmark,.js .hero__meta{
    animation:none !important;clip-path:none !important;transform:none !important;opacity:1 !important}
}