/* ==========================================================================
   CVYSM — base.css
   Tokens, reset, typography, layout primitives, accessibility, utilities.

   Visual language follows the CVY family (cvyco.com): hard black-and-white,
   serif display type set large and uppercase, solid black bars, hairline rules,
   and no colour accents. Depth comes from frosted glass and hairlines rather
   than tint.

   Load order: base → glass → site → motion
   ========================================================================== */

/* ---------- design tokens ---------- */
:root{
  /* surfaces */
  --paper:#FFFFFF;         /* page ground */
  --paper-2:#F6F5F2;       /* alternating section ground */
  --paper-3:#EDEBE6;       /* inset wells */
  --ink:#0A0A0A;           /* text, bars, borders */
  /* ground of the roster portraits, sampled from the studio shot */
  --plate:#2B292A;

  /* type colour, on paper */
  --fg:#0A0A0A;            /* 20.4:1 */
  --body:#2E2E2E;          /* 13.6:1 */
  --mute:#616161;          /*  6.0:1 on paper, 5.4:1 on paper-3 */
  --label-c:#555555;       /*  7.1:1 */
  --dim:#A3A3A3;           /*  2.2:1 — decorative strokes only, never text */

  /* type colour, on the black bars */
  --on-ink:#FFFFFF;
  --on-ink-mute:rgba(255,255,255,.72);
  --on-ink-dim:rgba(255,255,255,.60);   /* 7.3:1 on ink */

  /* hairlines */
  --hair:rgba(10,10,10,.16);
  --hair-2:rgba(10,10,10,.09);
  --hair-ink:rgba(255,255,255,.18);

  /* glass — frosted, not tinted */
  --glass-fill:rgba(255,255,255,.72);
  --glass-fill-2:rgba(255,255,255,.55);
  --glass-brd:rgba(10,10,10,.10);
  --glass-blur:20px;
  --glass-sat:150%;
  --glass-bright:1.03;
  /* smoked glass for the black bars */
  --glass-ink-fill:rgba(10,10,10,.86);
  --glass-ink-brd:rgba(255,255,255,.14);

  /* geometry */
  --r-xs:2px;
  --r-sm:4px;
  --r:6px;
  --r-lg:10px;
  --r-pill:999px;
  /* the pinned black announcement bar above the nav */
  --topbar-h:32px;
  --gut:clamp(20px,4vw,64px);
  --max:1200px;
  --nav-h:68px;

  /* type */
  --display:"Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
  --label:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;

  --fs-h2:clamp(26px,3.6vw,48px);
  --fs-h3:clamp(16px,1.5vw,20px);
  --fs-lede:clamp(16px,1.9vw,22px);
  --fs-body:15px;
  --fs-mono:10px;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.7s;

  /* device safe areas. env() resolves to 0 anywhere without a cutout, so these
     are inert on Android and desktop and only bite on notched iPhones. */
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  /* the pinned announcement bar, including the status-bar inset it must clear */
  --topbar-total:calc(var(--topbar-h) + var(--safe-t));
  /* total fixed chrome above content: announcement bar + nav + status bar */
  --chrome-h:calc(var(--nav-h) + var(--topbar-h) + var(--safe-t));

  --z-nav:60;
  --z-drawer:50;
  --z-curtain:90;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--chrome-h) + 16px);
  background:var(--paper);
}
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--label);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* vh first: browsers without svh would otherwise drop the whole declaration */
  min-height:100vh;
  min-height:100svh;
  /* Android/Chrome tap flash, tuned to the brand instead of the default grey */
  -webkit-tap-highlight-color:rgba(10,10,10,.07);
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none !important}

/* ---------- typography ----------
   Display type is the whole personality here: a high-contrast serif set large
   and in caps, the register the CVY family uses. Everything functional stays in
   a neutral grotesque so the serif keeps its impact. */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--fg);
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.08;
  text-wrap:balance;
}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}

p{max-width:66ch;text-wrap:pretty}

.lede{
  font-family:var(--display);
  color:var(--fg);
  font-size:var(--fs-lede);
  line-height:1.42;
  max-width:40ch;
  font-weight:400;
}
.mono{ /* also emitted at runtime by the contact form success state */
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.22em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.28em;
  text-transform:uppercase;color:var(--label-c);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:72px;background:var(--hair)}
.eyebrow .num{color:var(--fg)}
a.inline{
  color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--hair);
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-fast);
}
a.inline:hover{text-decoration-color:var(--fg)}

/* A link that is the entire content of its paragraph is not "inline in a
   sentence", so WCAG 2.5.8's inline exception does not cover it — at 16px tall
   it missed the 24px minimum on touch. The negative margin keeps the visual
   position identical while the hit area grows to 28px. Links genuinely inside a
   sentence keep their exemption and are deliberately left alone. */
@media (pointer:coarse){
  p > a.inline:only-child{display:inline-block;padding-block:6px;margin-block:-6px}
}

/* ---------- layout ---------- */
.wrap{
  max-width:var(--max);margin:0 auto;width:100%;
  /* never let content run under a landscape notch */
  padding-inline:max(var(--gut), var(--safe-l)) max(var(--gut), var(--safe-r));
}
section{position:relative}
.sec{
  border-top:1px solid var(--hair);
  background:var(--paper);
  padding:clamp(64px,9vw,128px) 0 clamp(70px,10vw,136px);
}
.sec--alt{background:var(--paper-2)}
.sec-head{max-width:62ch}
.sec-head h2{margin-bottom:20px}
.sec-head p{color:var(--mute)}

.split{
  display:grid;gap:clamp(28px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
}
.split--wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media(max-width:840px){.split,.split--wide{grid-template-columns:1fr}}

.grid{display:grid;gap:clamp(12px,1.4vw,20px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1020px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.stack-lg > * + *{margin-top:clamp(24px,3vw,38px)}

/* ---------- spec table (key/value) ---------- */
.specs{border-top:1px solid var(--hair);margin-top:28px}
.specs li{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:14px 0;border-bottom:1px solid var(--hair-2);
  font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;
}
.specs .k{
  color:var(--label-c);letter-spacing:.08em;text-transform:uppercase;font-size:10px;
  flex:0 0 auto;text-align:left;
}
.specs .v{color:var(--fg);text-align:right}
@media(max-width:520px){
  .specs li{flex-direction:column;align-items:flex-start;gap:5px}
  .specs .v{text-align:left}
}

/* ---------- accessibility ---------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:10px;left:50%;transform:translate(-50%,-160%);
  z-index:120;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-weight:600;font-size:13px;
  transition:transform var(--t) var(--e-out);
}
.skip:focus-visible{transform:translate(-50%,0)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
/* The ring above is --ink, which is invisible wherever the ground is also --ink:
   the nav, the announcement bar, the footer and the drawer are all
   `background:var(--ink)`. A focus indicator at 1:1 contrast is not an indicator
   — WCAG 2.4.7 asks for one that is visible, and 2.4.11 for it to survive on the
   surfaces it lands on. Everything that sits on ink gets the light ring instead.
   Higher specificity than the bare :focus-visible above, so order does not
   matter here. */
.nav :focus-visible,
.topbar :focus-visible,
.foot :focus-visible,
.drawer :focus-visible{outline-color:var(--on-ink)}
::selection{background:var(--ink);color:var(--on-ink)}

/* thin, unobtrusive scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(10,10,10,.28) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(10,10,10,.24);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(10,10,10,.4);background-clip:content-box}

/* ---------- utilities ---------- */
/* Only what the page actually uses is defined here. Add helpers as needed. */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label-c);padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:transparent;
}
.chip--spec{color:var(--fg);border-color:rgba(10,10,10,.3);background:var(--paper-3)}
.chip .dot{width:4px;height:4px;border-radius:50%;background:var(--ink);flex:0 0 auto}