/* Silver Park Studio — brand.css (v2.0 final identity).
   Generated from the design system; the single source of every colour, type,
   space and motion token on the site. Linked first on every page; css/style.css
   and css/doc.css build on it and never redefine a brand token (qa-check.py fails
   the build if one does).

   Local changes from the handoff copy, all of them fixes to references the
   generated file makes but never defines, or to values that fail AA:
     - @font-face lives in /fonts/fonts.css, as woff2 (Archivo subset to Latin,
       wght 400-900, wdth 100-125)
     - ink on Signal: the handoff writes var(--graphite), which v2.0 redefines as
       the #5A6167 instrument metal (1.9:1 on Signal). It is var(--night) here.
     - --fs-micro                  -> defined below as the label size
     - --fw-body                   -> defined below as 400
     - --ok-dark / --danger-dark -> the -dark variants the tokens do define
     - light --tx3 #6C746F -> #5F6662. As supplied it measures 4.04:1 on Stone and
       3.72:1 on the sunk panel, under the 4.5 AA asks of body-size text. #5F6662 is
       the nearest value on the same hue that clears 4.5 on every light ground.
     - --ok-text / --warn-text: the status colours are lights, AA as fills (3:1)
       but not as body text on the light grounds (--ok 4.23:1 and --warn 3.06:1 on
       Stone). Text that carries a status in the light theme uses these darker
       values on the same hues (5.17 and 4.82 on Stone).
     - --font-label -> Archivo. The generated file points it at Hanken; the
       handoff README and the brand guide both set labels in Archivo 600. */

/* ===== tokens/colors.css ===== */
/* Silver Park Studio — colour (Forever identity).
   No pure black, no pure white. 60 / 30 / 10: Stone grounds, Ink speaks, colour is rationed.
   Signal appears once per surface — the square in the symbol, or the single primary action. */
:root{
  --ink:#1B1F1D;        /* text + symbol · a trace of green: calm under long reading */
  --stone:#EEEBE5;      /* primary ground · 60% */
  --paper:#F7F5F1;      /* raised ground, documents */
  --fog:#D8D4CC;        /* hairlines, quiet UI */
  --moss:#56605A;       /* secondary text (AA on stone + paper) */
  --evergreen:#2E4A3E;  /* depth + growth — the park */
  --signal:#EE5A2C;     /* the square · energy, creativity, "live" · <10% */
  --signal-press:#D94A1E;
  --night:#121513;      /* dark ground */
  --night-2:#1A1E1B;    /* raised on dark */
  --night-line:#2A302C;
  --mist:#F2F0EB;       /* text on dark */
  --mist-2:#A6ADA8;     /* secondary text on dark */

  /* Instrument metals — the gaps in the palette, filled from pro camera-gimbal hardware:
     anodised housings, machined aluminium, carbon, knurled grip. Used for UI chrome, data, hardware. */
  --anodized:#0F1113;   /* deepest housing black (video, viewers) */
  --carbon:#1F2326;     /* raised dark panels */
  --gunmetal:#33393E;   /* dark UI chrome, strokes on night */
  --graphite:#5A6167;   /* disabled, tertiary on light */
  --titanium:#8D949A;   /* data lines, charts */
  --aluminium:#C3C8CC;  /* machined silver — the "Silver" in the name, print foil */

  /* Status — the three lights on the hardware. Never decorative. */
  --ok:#2E7D52; --ok-dark:#6FD19A;         /* ready / live link */
  --warn:#B7791F; --warn-dark:#F2C14E;     /* calibrating / attention */
  --danger:#B23A22; --danger-dark:#F29A83; /* fault */
  --info:#2F6E9E; --info-dark:#7FB8E6;     /* connected / tip */
  --ok-text:#286E48; --warn-text:#8C5C17;  /* status as text on light grounds (AA) */
}
:root,[data-theme="light"]{
  --bg:var(--stone); --surface:var(--paper); --raised:#FFFFFF; --sunk:#E6E2DA;
  --line:var(--fog); --line-strong:#BDB8AE;
  --tx:var(--ink); --tx2:var(--moss); --tx3:#5F6662;
  --accent:var(--signal); --on-accent:var(--night);
  --veil:rgba(238,235,229,.9);
}
[data-theme="dark"]{
  --bg:var(--night); --surface:var(--night-2); --raised:#212622; --sunk:#0D0F0E;
  --line:var(--night-line); --line-strong:#3D4540;
  --tx:var(--mist); --tx2:var(--mist-2); --tx3:#8A928C;
  --accent:var(--signal); --on-accent:var(--night);
  --veil:rgba(18,21,19,.9);
}
[data-theme="evergreen"]{
  --bg:var(--evergreen); --surface:#35544A; --raised:#3C5D51; --sunk:#243B31;
  --line:#4A6A5E; --line-strong:#5E7F72;
  --tx:var(--mist); --tx2:#C3CFC8; --tx3:#A2B3AA;
  --accent:var(--signal); --on-accent:var(--night);
  --veil:rgba(46,74,62,.92);
}
:root{
  --text-body:var(--tx); --text-muted:var(--tx2); --text-faint:var(--tx3);
  --surface-page:var(--bg); --surface-card:var(--surface); --border-hairline:var(--line);
  --scrim:linear-gradient(transparent,rgba(18,21,19,.86)); /* @kind color */
}

/* ===== tokens/typography.css ===== */
/* Type — Archivo 118% for the voice, Hanken Grotesk for reading. Sizes on φ (×1.618 from 16px). */
:root{
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-brand:'Archivo','Archivo Expanded',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --font-hand:'Silverman Hand',cursive;
  --font-display:var(--font-brand); --font-body:var(--font-sans); --font-ui:var(--font-sans); --font-label:var(--font-brand);

  --phi:1.618; /* @kind other */

  --fs-display:clamp(3.5rem,8vw,6.875rem); /* @kind font */
  --fs-h1:clamp(2.625rem,5.5vw,4.25rem); /* @kind font */
  --fs-h2:clamp(1.75rem,3.4vw,2.625rem); /* @kind font */
  --fs-h3:1.625rem; /* @kind font */
  --fs-lead:1.3125rem; /* @kind font */
  --fs-body:1rem; /* @kind font */
  --fs-small:.875rem; /* @kind font */
  --fs-label:.6875rem; /* @kind font */
  --fs-micro:.6875rem; /* @kind font */
  --fs-studio-min:8px; /* @kind font */

  --fw-display:760; /* @kind font */
  --fw-name:760; /* @kind font */
  --fw-studio:500; /* @kind font */
  --stretch-display:118%; /* @kind font */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-body:400; /* @kind font */

  --ls-display:-.015em; /* @kind font */
  --ls-heading:-.015em; /* @kind font */
  --ls-body:0em; /* @kind font */
  --ls-name:-.015em; /* @kind font */
  --ls-studio:.5em; /* @kind font */
  --ls-label:.16em; /* @kind font */
  --ls-mono:.08em; /* @kind font */

  --lh-display:.92; /* @kind font */
  --lh-heading:1.02; /* @kind font */
  --lh-body:1.618; /* @kind font */
  --lh-ui:1.4; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* Space — Fibonacci. Layout — 61.8 / 38.2. Shape — square. */
:root{
  --s1:5px; --s2:8px; --s3:13px; --s4:21px; --s5:34px; --s6:55px; --s7:89px; --s8:144px;

  --max:1200px; /* @kind spacing */
  --measure:62ch; /* @kind spacing */
  --gut:clamp(21px,4.5vw,55px); /* @kind spacing */
  --sec-y:clamp(55px,10vw,144px); /* @kind spacing */
  --grid-major:61.8%; /* @kind spacing */
  --grid-minor:38.2%; /* @kind spacing */
  --gap:var(--s4);

  --r-none:0px; --r-app:22.5%;
  --hairline:1px solid var(--line); /* @kind other */
  --shadow-none:none;
  --shadow-overlay:0 34px 89px rgba(18,21,19,.35);

  /* motion — durations on φ: 0.146 · 0.236 · 0.382 · 0.618s */
  --ease:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-1:.146s; /* @kind other */
  --dur-2:.236s; /* @kind other */
  --dur-3:.382s; /* @kind other */
  --dur-4:.618s; /* @kind other */
  --lift:translateY(-3px); /* @kind other */
}

/* ===== components/components.css ===== */
/* Silver Park Studio — component styles (final identity).
   Square corners everywhere. One Signal per surface. No shadows. */
.sps-root{background:var(--bg);color:var(--tx);font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
.sps-root a{color:inherit;text-decoration:none}
.sps-root :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sps-display{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);line-height:var(--lh-display);text-transform:uppercase}
.sps-label{font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.sps-mono{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-mono);text-transform:uppercase}

/* ---- Logo — outlined vectors in assets/brand ----
   lockup = SILVER / PARK + viewfinder symbol + rule + STUDIO (primary) · horizontal = one line · symbol = the four corners + Signal.
   -dark = ink artwork for light grounds · -light = mist artwork for dark grounds. */
.sps-logo{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;flex:none}
.sps-logo[data-kind="lockup"]{aspect-ratio:4671/2619;background-image:url('/img/brand/sps-lockup-dark.svg?v=2')}
[data-theme="dark"] .sps-logo[data-kind="lockup"],[data-theme="evergreen"] .sps-logo[data-kind="lockup"],.sps-logo[data-kind="lockup"][data-ink="light"]{background-image:url('/img/brand/sps-lockup-light.svg?v=2')}
.sps-logo[data-kind="lockup"][data-ink="dark"]{background-image:url('/img/brand/sps-lockup-dark.svg?v=2')}
.sps-logo[data-kind="horizontal"]{aspect-ratio:7.033/1;background-image:url('/img/brand/sps-horizontal-dark.svg?v=2')}
[data-theme="dark"] .sps-logo[data-kind="horizontal"],[data-theme="evergreen"] .sps-logo[data-kind="horizontal"],.sps-logo[data-kind="horizontal"][data-ink="light"]{background-image:url('/img/brand/sps-horizontal-light.svg?v=2')}
.sps-logo[data-kind="horizontal"][data-ink="dark"]{background-image:url('/img/brand/sps-horizontal-dark.svg?v=2')}
.sps-logo[data-kind="symbol"]{aspect-ratio:1/1;background-image:url('/img/brand/sp-symbol-dark.svg?v=2')}
[data-theme="dark"] .sps-logo[data-kind="symbol"],[data-theme="evergreen"] .sps-logo[data-kind="symbol"],.sps-logo[data-kind="symbol"][data-ink="light"]{background-image:url('/img/brand/sp-symbol-light.svg?v=2')}
.sps-logo[data-kind="symbol"][data-ink="dark"]{background-image:url('/img/brand/sp-symbol-dark.svg?v=2')}
.sps-logo[data-kind="wordmark"]{aspect-ratio:11.592/1;background-image:url('/img/brand/sps-wordmark-dark.svg?v=2')}
[data-theme="dark"] .sps-logo[data-kind="wordmark"],[data-theme="evergreen"] .sps-logo[data-kind="wordmark"],.sps-logo[data-kind="wordmark"][data-ink="light"]{background-image:url('/img/brand/sps-wordmark-light.svg?v=2')}
.sps-logo[data-kind="wordmark"][data-ink="dark"]{background-image:url('/img/brand/sps-wordmark-dark.svg?v=2')}
.sps-logo[data-kind="app"]{aspect-ratio:1/1;background-image:url('/img/brand/sp-app-night.svg?v=2')}
.sps-logo[data-kind="app"][data-ink="light"]{background-image:url('/img/brand/sp-app-stone.svg?v=2')}
.sps-logo[data-kind="sig"]{aspect-ratio:3375/759;background-image:url('/img/brand/sps-sig-light.svg?v=2')}
[data-theme="dark"] .sps-logo[data-kind="sig"],.sps-logo[data-kind="sig"][data-ink="light"]{background-image:url('/img/brand/sps-sig.svg?v=2')}

/* ---- Symbol lock-in: the four corners close on the Signal, once. 0.618s ---- */
.sps-lockin{display:inline-block;line-height:0}
.sps-lockin svg .tl{animation:sps-in-tl var(--dur-4) var(--ease) both}.sps-lockin svg .tr{animation:sps-in-tr var(--dur-4) var(--ease) both}
.sps-lockin svg .bl{animation:sps-in-bl var(--dur-4) var(--ease) both}.sps-lockin svg .br{animation:sps-in-br var(--dur-4) var(--ease) both}
.sps-lockin svg .c{animation:sps-in-c var(--dur-3) var(--ease) var(--dur-3) both;transform-origin:50px 50px}
@keyframes sps-in-tl{from{transform:translate(-14.6px,-14.6px);opacity:0}}@keyframes sps-in-tr{from{transform:translate(14.6px,-14.6px);opacity:0}}
@keyframes sps-in-bl{from{transform:translate(-14.6px,14.6px);opacity:0}}@keyframes sps-in-br{from{transform:translate(14.6px,14.6px);opacity:0}}
@keyframes sps-in-c{from{transform:scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.sps-lockin svg *{animation:none!important}}

/* ---- Signal — the orange square ---- */
.sps-signal{display:inline-block;width:.2em;height:.2em;background:var(--signal);flex:none;vertical-align:baseline}
.sps-signal[data-live="true"]{animation:sps-live 1.6s steps(1) infinite}
@keyframes sps-live{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.sps-signal[data-live="true"]{animation:none}}

/* ---- Frame — the four-corner device ---- */
.sps-frame{position:relative;display:block}
.sps-frame>i{position:absolute;width:var(--c,22px);height:var(--c,22px);border:0 solid currentColor;pointer-events:none}
.sps-frame>i:nth-child(1){top:0;left:0;border-top-width:var(--w,2px);border-left-width:var(--w,2px)}
.sps-frame>i:nth-child(2){top:0;right:0;border-top-width:var(--w,2px);border-right-width:var(--w,2px)}
.sps-frame>i:nth-child(3){bottom:0;right:0;border-bottom-width:var(--w,2px);border-right-width:var(--w,2px)}
.sps-frame>i:nth-child(4){bottom:0;left:0;border-bottom-width:var(--w,2px);border-left-width:var(--w,2px)}

/* ---- Eyebrow ---- */
.sps-eyebrow{margin:0;display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--tx2)}
.sps-eyebrow[data-tone="ink"]{color:var(--tx)}
.sps-eyebrow[data-tone="muted"]{color:var(--tx3)}
.sps-eyebrow[data-signal="true"]::before{content:'';width:.6em;height:.6em;background:var(--signal)}

/* ---- Venture lockup ---- */
.sps-venture{display:inline-grid;gap:.6rem;color:var(--tx)}
.sps-venture b{font-family:var(--font-brand);font-stretch:118%;font-weight:760;letter-spacing:-.015em;line-height:1;display:inline-flex;align-items:center;gap:.5em}
.sps-venture b i{display:inline-block;width:.38em;height:.38em;background:var(--signal)}
.sps-venture small{font-family:var(--font-label);font-weight:600;font-size:.7rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--tx2)}

/* ---- Button ---- */
.sps-btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;font-family:var(--font-label);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.6rem;border-radius:0;border:1.5px solid transparent;cursor:pointer;text-decoration:none;line-height:1.1;transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.sps-btn[data-variant="primary"]{background:var(--signal);color:var(--night)}
.sps-btn[data-variant="primary"]:hover{background:var(--tx);color:var(--bg)}
.sps-btn[data-variant="primary"]:active{background:var(--signal-press);color:var(--night)}
.sps-btn[data-variant="solid"]{background:var(--tx);color:var(--bg)}
.sps-btn[data-variant="solid"]:hover{background:var(--signal);color:var(--night)}
.sps-btn[data-variant="ghost"],.sps-btn[data-variant="outline"]{background:transparent;border-color:var(--tx);color:var(--tx)}
.sps-btn[data-variant="ghost"]:hover,.sps-btn[data-variant="outline"]:hover{background:var(--tx);color:var(--bg)}
.sps-btn[data-variant="text"]{padding:.35rem 0;border:0;border-bottom:1.5px solid currentColor;color:var(--tx);background:none}
.sps-btn[data-variant="text"]:hover{color:var(--signal)}
.sps-btn[data-size="sm"]{padding:.6rem 1rem;font-size:.6875rem}
.sps-btn[data-size="lg"]{padding:1.2rem 2rem;font-size:.8125rem}
.sps-btn:disabled,.sps-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ---- Section head ---- */
.sps-sechead{margin-bottom:clamp(2rem,5vw,3.5rem)}
.sps-sechead .sps-eyebrow{margin-bottom:1rem}
.sps-sechead h2{font-family:var(--font-brand);font-stretch:118%;font-weight:700;letter-spacing:var(--ls-heading);font-size:var(--fs-h2);margin:0;line-height:var(--lh-heading);color:var(--tx);text-transform:uppercase}
.sps-sechead p.lede{color:var(--tx2);max-width:var(--measure);margin:1.1rem 0 0;font-size:var(--fs-lead);line-height:1.5}
.sps-sechead[data-align="center"]{text-align:center}.sps-sechead[data-align="center"] p.lede{margin-inline:auto}

/* ---- Field ---- */
.sps-field{display:block}
.sps-field label{display:block;font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--tx2);margin-bottom:.55rem}
.sps-field input,.sps-field textarea{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1.5px solid var(--line-strong);color:var(--tx);font-family:var(--font-body);font-size:1.0625rem;padding:.7rem 0;transition:border-color var(--dur-3);border-radius:0}
.sps-field input:focus,.sps-field textarea:focus{outline:0;border-bottom-color:var(--tx)}
.sps-field textarea{resize:vertical;min-height:120px}
.sps-field[data-invalid="true"] input,.sps-field[data-invalid="true"] textarea{border-bottom-color:var(--danger)}
.sps-field .hint{display:block;margin-top:.45rem;font-size:.8125rem;color:var(--tx3)}
.sps-field[data-invalid="true"] .hint{color:var(--danger)}
.sps-formmsg{font-size:.9375rem;padding:.9rem 1rem;line-height:1.5;border-left:3px solid}
.sps-formmsg[data-tone="ok"]{background:rgba(46,125,79,.08);color:var(--ok-text);border-color:var(--ok)}
.sps-formmsg[data-tone="err"]{background:rgba(192,39,27,.08);color:var(--danger);border-color:var(--danger)}
[data-theme="dark"] .sps-formmsg[data-tone="ok"]{color:var(--ok-dark);border-color:var(--ok-dark)}
[data-theme="dark"] .sps-formmsg[data-tone="err"]{color:var(--danger-dark);border-color:var(--danger-dark)}

/* ---- Theme toggle ---- */
.sps-themebar{display:flex;border:1.5px solid var(--line-strong)}
.sps-themebar button{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--font-label);font-weight:600;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);padding:.5rem .7rem;line-height:1;transition:color var(--dur-2),background var(--dur-2)}
.sps-themebar button:hover{color:var(--tx)}
.sps-themebar button[aria-pressed="true"]{color:var(--bg);background:var(--tx)}

/* ---- Site nav ---- */
.sps-nav{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:background var(--dur-3),border-color var(--dur-3);color:var(--tx)}
.sps-nav[data-solid="true"]{background:var(--veil);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.sps-nav[data-over="media"]{color:#F2F3F4}
.sps-nav .in{max-width:1240px;margin-inline:auto;padding:1.15rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.sps-nav ul{display:flex;gap:clamp(1rem,2.4vw,2.25rem);list-style:none;margin:0;padding:0;align-items:center}
.sps-nav ul a{font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);position:relative;padding-block:.35rem;transition:color var(--dur-2)}
.sps-nav[data-over="media"] ul a{color:#D5D9DD}
.sps-nav ul a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;background:currentColor;transition:width var(--dur-3) var(--ease)}
.sps-nav ul a:hover,.sps-nav ul a[aria-current="true"]{color:var(--tx)}
.sps-nav[data-over="media"] ul a:hover{color:#fff}
.sps-nav ul a:hover::after,.sps-nav ul a[aria-current="true"]::after{width:100%}
.sps-nav ul a.dl{color:var(--tx);border:1.5px solid currentColor;padding:.5rem .85rem}
.sps-nav ul a.dl:hover{background:var(--tx);color:var(--bg)}
.sps-nav ul a.dl::after{display:none}

/* ---- Film card ---- */
.sps-film{position:relative;display:block;overflow:hidden;background:var(--sunk);aspect-ratio:16/9;cursor:pointer;border:0;padding:0;width:100%;color:inherit;text-align:left}
.sps-film img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-4) var(--ease),filter var(--dur-4);filter:grayscale(1) brightness(.72)}
.sps-film:hover img,.sps-film:focus-visible img{transform:scale(1.04);filter:grayscale(0) brightness(.6)}
.sps-film .meta{position:absolute;inset:auto 0 0;padding:1.1rem 1.2rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;background:linear-gradient(transparent,rgba(17,19,22,.88));color:#F2F3F4}
.sps-film .ttl{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:700;letter-spacing:0;font-size:.875rem;line-height:1.3}
.sps-film time{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;flex-shrink:0;color:#C3C8CD}
.sps-film .play{position:absolute;inset:14px;opacity:0;transition:opacity var(--dur-3),inset var(--dur-3) var(--ease);color:#F2F3F4;pointer-events:none}
.sps-film .play i{position:absolute;width:18px;height:18px;border:0 solid currentColor}
.sps-film .play i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.sps-film .play i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.sps-film .play i:nth-child(3){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.sps-film .play i:nth-child(4){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.sps-film .play b{position:absolute;top:0;right:30px;display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-weight:500;font-size:.625rem;letter-spacing:.14em}
.sps-film .play b::before{content:'';width:7px;height:7px;background:var(--signal)}
.sps-film:hover .play,.sps-film:focus-visible .play,.sps-film[data-show-play="true"] .play{opacity:1;inset:18px}

/* ---- Project card ---- */
.sps-project{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--dur-3),transform var(--dur-3) var(--ease);cursor:pointer}
.sps-project:hover{border-color:var(--tx);transform:translateY(-3px)}
.sps-project img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.35);transition:filter var(--dur-4)}
.sps-project:hover img{filter:none}
.sps-project .b{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.6rem}
.sps-project h3{font-family:var(--font-brand);font-stretch:118%;font-weight:700;letter-spacing:0;font-size:1rem;line-height:1.25;margin:0;color:var(--tx);text-transform:uppercase}
.sps-project .what{color:var(--tx2);font-size:.9375rem;line-height:1.55}
.sps-project .tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.2rem 0 0;padding:0}
.sps-project .tags li{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);border:1px solid var(--line-strong);padding:.3rem .5rem}
.sps-project .more{margin-top:auto;padding-top:.4rem;color:var(--tx);font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.sps-project:hover .more{color:var(--signal)}

/* ---- Doc card ---- */
.sps-doc{display:grid;grid-template-columns:104px 1fr;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color var(--dur-3),transform var(--dur-3) var(--ease)}
.sps-doc:hover{border-color:var(--tx);transform:translateY(-3px)}
.sps-doc img{width:100%;height:100%;aspect-ratio:8.5/11;object-fit:cover;object-position:top;filter:grayscale(1);transition:filter var(--dur-4);display:block}
.sps-doc:hover img{filter:none}
.sps-doc .b{padding:1.15rem 1.35rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem}
.sps-doc h3{font-family:var(--font-brand);font-stretch:118%;font-weight:700;font-size:.9375rem;margin:0;text-transform:uppercase}
.sps-doc .a{display:flex;gap:1rem}
.sps-doc .a a{font-family:var(--font-label);font-weight:600;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);transition:color var(--dur-2)}
.sps-doc .a a:hover{color:var(--tx)}

/* ---- Client strip ---- */
.sps-clients{display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:center;grid-template-columns:repeat(auto-fill,minmax(min(50%,120px),1fr))}
.sps-clients img{width:100%;max-height:40px;object-fit:contain;filter:grayscale(1) contrast(1.15);opacity:.55;transition:opacity var(--dur-3)}
[data-theme="dark"] .sps-clients img{filter:grayscale(1) brightness(2.4) contrast(.5);opacity:.5}
.sps-clients img:hover{opacity:1}

/* ---- SAGE ops — brand type and colour, dense audit layout ---- */
.ops-root{--o-bg:#EEEBE5;--o-surface:#F7F5F1;--o-ink:#1B1F1D;--o-muted:#56605A;--o-line:rgba(27,31,29,.14);--o-accent:#1B1F1D;--o-accent-bg:#E6E2DA;--o-signal:#EE5A2C;--o-danger:#B42318;--o-danger-bg:#FCEDEB;--o-ok:#2E7D4F;--o-code:rgba(17,19,22,.06);
  background:var(--o-bg);color:var(--o-ink);font:15px/1.5 'Hanken Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ops-root[data-theme="dark"]{--o-bg:#121513;--o-surface:#1A1E1B;--o-ink:#F2F0EB;--o-muted:#A6ADA8;--o-line:rgba(242,243,244,.14);--o-accent:#F2F3F4;--o-accent-bg:#21252A;--o-danger:#FF8A7A;--o-danger-bg:#2E1A18;--o-ok:#6FD49A;--o-code:rgba(242,243,244,.08)}
.ops-root h1,.ops-root h2{font-weight:300;letter-spacing:-.02em}
.ops-root code{font:.88em/1.4 'Geist Mono',ui-monospace,monospace;background:var(--o-code);padding:1px 4px}
.ops-root a{color:var(--o-ink);text-decoration:underline;text-underline-offset:3px}
.ops-meta{color:var(--o-muted);font-size:13px}
.ops-nav{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--o-line);width:max-content}
.ops-nav a,.ops-nav span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--o-muted);background:var(--o-surface);cursor:pointer;border-right:1px solid var(--o-line)}
.ops-nav a:hover{color:var(--o-ink)}
.ops-nav span{color:var(--o-ink)}
.ops-nav span::before{content:'';width:7px;height:7px;background:var(--o-signal)}
.ops-tile{min-width:0;background:var(--o-surface);border:1px solid var(--o-line);padding:14px 16px}
.ops-tile .k{display:block;font-size:12px;color:var(--o-muted)}
.ops-tile .v{display:block;font-size:28px;line-height:1.1;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}
.ops-tile .n{display:block;font-size:12px;color:var(--o-muted)}
.ops-card{background:var(--o-surface);border:1px solid var(--o-line);padding:16px;list-style:none}
.ops-card[data-tone="you"]{border-color:var(--o-ink);box-shadow:inset 3px 0 0 var(--o-signal)}
.ops-card[data-tone="dim"]{opacity:.6}
.ops-card .row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ops-card .row strong{flex:1 1 200px;font-weight:600}
.ops-light{display:inline-block;width:10px;height:10px;flex:0 0 10px}
.ops-meter{position:relative;height:4px;background:var(--o-code);overflow:hidden;margin:10px 0 0}
.ops-meter span{position:absolute;inset:0 auto 0 0;background:var(--o-ink)}
.ops-meter[data-state="over"] span{background:var(--o-danger)}
.ops-meter[data-state="done"] span{background:var(--o-muted)}
.ops-chip{display:inline-block;font:12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;padding:8px 10px;border:1px solid var(--o-line);background:var(--o-surface)}
.ops-callout{border:1px solid var(--o-line);border-left:3px solid var(--o-danger);background:var(--o-danger-bg);padding:12px 16px}
.ops-callout[data-tone="accent"]{border-left-color:var(--o-ink);background:var(--o-accent-bg)}