:root{
  /* --- Base palette: black & white first, one pink accent (brand ref 03) --- */
  --ink:#141210;                /* primary text / lines */
  --paper:#ffffff;              /* default print-friendly ground */
  --paper-cream:#f4f1e8;        /* warm ground, ON-SCREEN ONLY, only when asked for */
  --accent:#ff2f8f;             /* hot pink, sparing use only */

  /* --- Ink ramp: tints of ink, used for rules, meta type, disabled states --- */
  --ink-90:#2b2724;
  --ink-70:#55504b;
  --ink-50:#807a74;
  --ink-30:#b3aea8;
  --ink-15:#d9d5d0;
  --ink-08:#eae7e2;
  --ink-04:#f5f3f0;

  /* --- Alpha inks, for rules and washes over photography --- */
  --ink-a80:rgba(20,18,16,.80);
  --ink-a55:rgba(20,18,16,.55);
  --ink-a25:rgba(20,18,16,.25);
  --ink-a12:rgba(20,18,16,.12);
  --paper-a90:rgba(255,255,255,.90);
  --paper-a70:rgba(255,255,255,.70);
  --paper-a20:rgba(255,255,255,.20);
  --accent-a20:rgba(255,47,143,.20);

  /* --- Semantic: surfaces --- */
  --surface-page:var(--paper);
  --surface-page-alt:var(--paper-cream);
  --surface-card:var(--paper);
  --surface-sunken:var(--ink-04);
  --surface-inverse:var(--ink);
  --surface-selected:var(--ink-08);

  /* --- Semantic: text --- */
  --text-body:var(--ink);
  --text-heading:var(--ink);
  --text-meta:var(--ink-70);
  --text-faint:var(--ink-50);
  --text-disabled:var(--ink-30);
  --text-inverse:var(--paper);
  --text-kicker:var(--ink-70);
  --text-accent:var(--accent);
  --text-link:var(--ink);
  --text-link-hover:var(--accent);

  /* --- Semantic: lines --- */
  --line-hairline:var(--ink-a25);
  --line-rule:var(--ink);
  --line-rule-accent:var(--accent);
  --line-field:var(--ink);
  --line-divider:var(--ink-15);
  --line-inverse:var(--paper-a20);

  /* --- Semantic: controls --- */
  --control-fill:var(--ink);
  --control-fill-hover:#000000;
  --control-fill-text:var(--paper);
  --control-ghost-text:var(--ink);
  --control-disabled-fill:var(--ink-15);
  --control-disabled-text:var(--ink-50);
  --focus-ring:var(--accent);

  /* --- Semantic: status. The brand has no color-coded status system; status reads in
         ink, with the pink accent standing in for "attention". --- */
  --status-attention:var(--accent);
  --status-neutral:var(--ink-70);
  --status-on-ink:var(--paper);
}
:root{
  /* --- Families. Everything is typewriter monospace; there is no sans/serif in this
         system. Special Elite is display-only (oversized, stamped). --- */
  --font-mono:"Courier Prime","Courier 10 Pitch",Courier,"American Typewriter","Nimbus Mono PS",monospace;
  --font-display:"Special Elite","Courier Prime",Courier,monospace;
  --font-body:var(--font-mono);
  --font-ui:var(--font-mono);

  /* --- Size scale (px, typewriter-ish steps) --- */
  --text-3xs:10px;
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-3xl:38px;
  --text-4xl:48px;
  --text-5xl:64px;
  --text-6xl:88px;

  /* --- Weights. Courier Prime ships 400/700 only. --- */
  --weight-regular:400;
  --weight-bold:700;

  /* --- Line heights. Monospace body wants air. --- */
  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* --- Tracking. Wide tracking on caps is the signature move (the wordmark and every
         label in the brand reference are letterspaced). --- */
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-wider:0.14em;
  --tracking-widest:0.28em;

  /* --- Semantic roles --- */
  --type-display-size:var(--text-5xl);
  --type-display-tracking:var(--tracking-wider);
  --type-display-leading:var(--leading-tight);

  --type-headline-size:var(--text-2xl);
  --type-headline-tracking:var(--tracking-wide);
  --type-headline-leading:var(--leading-snug);

  --type-title-size:var(--text-lg);
  --type-title-tracking:var(--tracking-wide);

  --type-kicker-size:var(--text-2xs);
  --type-kicker-tracking:var(--tracking-widest);

  --type-body-size:var(--text-base);
  --type-body-leading:var(--leading-relaxed);

  --type-meta-size:var(--text-xs);
  --type-meta-tracking:var(--tracking-wide);

  --measure-body:66ch;
  --measure-narrow:48ch;
}
:root{
  /* 4px base step. Generous paper space is a brand rule — prefer the larger step. */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Semantic */
  --gutter-page:var(--space-8);
  --gutter-page-lg:var(--space-16);
  --pad-card:var(--space-6);
  --pad-control-x:var(--space-5);
  --pad-control-y:var(--space-3);
  --gap-inline:var(--space-3);
  --gap-stack:var(--space-4);
  --gap-section:var(--space-20);
  --max-page:1180px;
  --max-doc:760px;

  /* Clear space around the logo == height of the camera body (brand ref 02) */
  --logo-clearspace:1em;
}
:root{
  /* Corners are square. This is a press-room / contact-sheet system: no rounded cards.
     The only radii allowed are hairline softening on small controls and full pills for
     nothing at all — kept here so consumers have a legal value to reach for. */
  --radius-none:0;
  --radius-xs:1px;
  --radius-sm:2px;
  --radius-round:50%;

  --border-hairline:1px;
  --border-rule:1px;
  --border-heavy:2px;
  --border-frame:3px;

  --border-default:var(--border-hairline) solid var(--line-hairline);
  --border-strong:var(--border-rule) solid var(--line-rule);
  --border-field:var(--border-rule) solid var(--line-field);
  --border-accent:var(--border-heavy) solid var(--line-rule-accent);
  --border-inverse:var(--border-hairline) solid var(--line-inverse);

  /* Dashed = provisional / placeholder / drop target only */
  --border-dashed:var(--border-hairline) dashed var(--ink-30);
}
:root{
  /* Paper doesn't float. There is no soft-shadow elevation system: depth comes from
     rules, offset borders, and the printed-edge shadow below. */
  --shadow-none:none;
  --shadow-print:2px 2px 0 var(--ink);            /* hard offset, like a stamped block */
  --shadow-print-accent:2px 2px 0 var(--accent);
  --shadow-lift:0 1px 0 var(--ink-a25);           /* hairline seat under a bar */
  --shadow-overlay:0 0 0 100vmax var(--ink-a80);  /* dialog scrim */

  /* Protection gradient for type over photography (never a solid capsule on photos) */
  --scrim-bottom:linear-gradient(to top,rgba(20,18,16,.82) 0%,rgba(20,18,16,.45) 45%,rgba(20,18,16,0) 100%); /* @kind other */
  --scrim-top:linear-gradient(to bottom,rgba(20,18,16,.72) 0%,rgba(20,18,16,0) 100%); /* @kind other */

  /* Blur is used only for a sticky bar sitting over content, never decoratively */
  --blur-bar:saturate(120%) blur(8px); /* @kind other */
}
:root{
  /* Motion is mechanical and short — a shutter, not a bounce. No spring, no overshoot. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-linear:linear; /* @kind other */
  --transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
  --press-translate:1px;   /* controls shift down-right on press, like a key striking */
}
/* Minimal element defaults so any consumer page inherits the brand voice. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-leading);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-mono);font-weight:var(--weight-bold);color:var(--text-heading);line-height:var(--leading-snug);letter-spacing:var(--tracking-wide)}
h1{font-size:var(--type-display-size);letter-spacing:var(--type-display-tracking);line-height:var(--type-display-leading)}
h2{font-size:var(--type-headline-size)}
h3{font-size:var(--type-title-size)}
p{margin:0 0 var(--space-4);max-width:var(--measure-body)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-hairline);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--accent)}
a:active{color:var(--text-link-hover)}
small{font-size:var(--type-meta-size);letter-spacing:var(--tracking-wide);color:var(--text-meta)}
hr{border:0;border-top:var(--border-rule) solid var(--line-rule);margin:var(--space-8) 0}
code,kbd,pre,samp{font-family:var(--font-mono)}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--accent);color:var(--paper)}
ul{padding-left:1.2em;margin:0 0 var(--space-4)}
li{margin-bottom:var(--space-2)}