/* SYNCED COPY , DO NOT HAND-EDIT.
Source of truth: aihd/01 site/resources-site/design-system/aihd.css
Re-sync after any token change: cp that file over this one. Edit the source,
never this copy, or the site and the design-system cards drift apart again. */
/* ===========================================================================
aihd.css , the canonical AIHD stylesheet (single source of truth) , v2
---------------------------------------------------------------------------
Direction (corrected 2026-06-30): QUIET BY DEFAULT, made by hand, one blue.
Gallery-grade restraint on a neutral-grey field over a visible structural
GRID; a single deep Klein/ultramarine accent used once per view as flat ink
(never a glow); chrome/foil as a graphic material; one raw human hand on the
loud moments. Austere is the default; poster scale + the hand are campaign-
only. Art direction is layout-and-graphic, NOT photography.
Two modes governed by one rule:
default , small type, large grey field, hairlines, numbered indices, grid
campaign , drops only: poster (Expanded) type + one raw-hand scrawl
Every design-system card and the AIHD site this file, so tokens never
drift. Build inlines it (fonts base64'd) for self-contained cards.
Last updated: 2026-06-30 (v2)
=========================================================================== */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-var-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500.woff2") format("woff2")}
:root{
/* greyscale base , NEUTRALISED (blue cast dropped) */
--paper:#ececed; --paper-2:#e4e4e6; --panel:#ffffff;
--ink:#14151a; --ink-2:#2b2d34; --muted:#6a6e76;
--grey-2:#e4e4e6; --grey-3:#cfd1d5; --grey-4:#2b2d34; --grey-5:#15161b;
--line:rgba(20,21,26,.14); --soft:rgba(20,21,26,.045); --hair:rgba(20,21,26,.24);
--dot:rgba(20,21,26,.12); --grid:84px;
/* the structural grid substrate (replaces decorative random dots) */
--gridline:rgba(20,21,26,.075); --gridline-d:rgba(255,255,255,.085);
/* ONE blue , deep Klein/ultramarine, used as flat ink. NO glow. */
--accent:#1d2bd4; --cobalt:#0c2bb0; --accent-press:#0c2bb0;
--accent-soft:rgba(29,43,212,.08); --accent-line:rgba(29,43,212,.34);
/* silver / chrome , the one sanctioned gradient. Industrial, never holographic. */
--silver-hi:#f4f6f8; --silver:#c7ccd2; --silver-edge:#9aa1aa;
--disc:#cdd2d9; --disc-edge:#adb3bb;
--chrome:linear-gradient(176deg,#f7f8fa 0%,#c7ccd2 16%,#ffffff 34%,#9aa1aa 52%,#e6e9ef 70%,#aab1ba 86%,#d7dade 100%);
--chrome-radial:radial-gradient(circle at 33% 23%,#ffffff 0%,rgba(255,255,255,0) 20%),radial-gradient(circle at 38% 28%,#ffffff 0%,#eaedf0 14%,#c7ccd2 40%,#9aa1aa 64%,#cfd3d8 82%,#878d96 100%);
--brush:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 2px);
/* glass (floating UI only) */
--glass:rgba(236,236,237,.62); --glass-2:rgba(236,236,237,.8);
--glass-border:rgba(20,21,26,.1); --glass-hi:rgba(255,255,255,.9);
/* type , Archivo (Expanded = campaign only via .expanded), Inter body, JetBrains mono */
--display:"Archivo",system-ui,sans-serif;
--exp:"Archivo",system-ui,sans-serif;
--font-display:"Archivo",system-ui,sans-serif;
--body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--type-label:.72rem;
/* grid rhythm + motion tokens */
--col:80px; --gutter:24px;
--nav-h:60px; --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1);
--dur-fast:.18s; --dur:.3s; --dur-slow:.6s;
}
/* --- foundations ----------------------------------------------------------- */
.aihd-paper{
background:var(--paper); color:var(--ink); font-family:var(--font);
background-image:radial-gradient(var(--dot) 1.1px,transparent 1.2px);
background-size:30px 30px;
}
.mono{font-family:var(--mono); font-size:var(--type-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.accent{color:var(--accent)} .cobalt{color:var(--cobalt)}
/* registration crosshair , the engineered signature, used sparingly */
.reg{position:absolute; width:14px; height:14px; opacity:.55; color:var(--ink)}
.reg::before,.reg::after{content:""; position:absolute; background:currentColor}
.reg::before{left:6px; top:0; width:1px; height:14px}
.reg::after{top:6px; left:0; width:14px; height:1px}
/* the structural grid , draw it as the substrate; one element may break it */
.glines{position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,1fr); pointer-events:none; z-index:0}
.glines>span{border-left:1px solid var(--gridline)}
.glines>span:first-child{border-left:0}
.glines.d>span{border-left-color:var(--gridline-d)}
.lattice{background-image:radial-gradient(var(--dot) 1.4px,transparent 1.5px); background-size:38px 38px}
/* --- the mark (decided) ----------------------------------------------------
Lowercase aihd. The "i" tittle is the blue accent: a dotless stem + a blue
dot placed on it. That dot detaches as the standalone mark and is the
dot-grid atom. Avatar = dot on a silver disc, NEVER on black. NO glow. */
.aihd-wordmark{font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; color:var(--ink); display:inline-flex; align-items:baseline; line-height:1}
.aihd-wordmark .ii{position:relative; display:inline-block}
.aihd-wordmark .ii::after{content:""; position:absolute; left:50%; transform:translateX(-50%); width:.15em; height:.15em; border-radius:50%; background:var(--accent); top:.03em}
.aihd-wordmark.rev{color:#fff}
.aihd-dot{display:inline-block; border-radius:50%; background:var(--accent)} /* standalone mark , flat, no glow */
.aihd-avatar{border-radius:50%; background:radial-gradient(circle at 38% 30%,#eef1f4,var(--disc) 60%,#b3b9c1); border:1px solid var(--disc-edge); display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.aihd-avatar::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--brush); mix-blend-mode:overlay; opacity:.7}
.aihd-avatar .ad{border-radius:50%; background:var(--accent); position:relative; z-index:2}
.aihd-favicon{background:var(--panel); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px}
.aihd-favicon .fd{border-radius:50%; background:var(--accent)}
/* --- chrome / silver (the one gradient, as a graphic material) ------------- */
.chrome{background:var(--chrome)}
.chrome-text{background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 1px rgba(20,21,26,.22))}
.chrome-rail{height:10px; background:var(--chrome); border:1px solid var(--silver-edge); border-radius:2px; position:relative}
.chrome-rail::after{content:""; position:absolute; inset:0; background:var(--brush); mix-blend-mode:overlay; border-radius:2px}
.chrome-disc{border-radius:50%; background:var(--chrome-radial); box-shadow:0 30px 64px rgba(20,21,26,.3),0 6px 16px rgba(20,21,26,.18),inset 0 3px 6px rgba(255,255,255,.85),inset 0 -10px 24px rgba(20,21,26,.18); position:relative}
.chrome-disc::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--brush); mix-blend-mode:overlay; opacity:.8}
/* --- typography roles ------------------------------------------------------
Default is small + neutral width. Expanded poster is CAMPAIGN-ONLY (.expanded). */
.expanded{font-stretch:125%}
.t-display{font-family:var(--display); font-weight:800; font-stretch:125%; letter-spacing:-.05em; line-height:.84} /* poster, campaign only, treat as image */
.t-h1{font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; line-height:1.05} /* default headline, normal width */
.t-body{font-family:var(--font); font-weight:400; line-height:1.55; max-width:65ch; color:var(--ink-2)}
.t-label{font-family:var(--mono); font-size:var(--type-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
/* --- buttons --------------------------------------------------------------- */
.btn{font-family:var(--font-display); font-weight:600; font-size:.9rem; padding:11px 20px; border-radius:7px;
border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; letter-spacing:-.01em; transition:var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--accent-press); border-color:var(--accent-press)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.chrome{background:var(--chrome); color:var(--ink-2); border-color:var(--silver-edge)}
/* spec pills , metadata as type, no glow */
.specpill{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
border:1px solid var(--line); border-radius:99px; padding:5px 11px}
.specpill.on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
/* glass , floating UI only */
.glass{background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
border:1px solid var(--glass-border); box-shadow:0 6px 20px rgba(20,21,26,.07)}
/* --- numbered index , the core content layout (austere, big numbers) ------- */
.index-head,.index-row{display:grid; grid-template-columns:64px 1fr 1fr 140px; gap:20px; align-items:center}
.index-head{padding:0 0 12px; border-bottom:1px solid var(--ink)}
.index-head span{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.index-row{padding:18px 0; border-bottom:1px solid var(--line); transition:background var(--dur)}
.index-row:hover{background:var(--accent-soft)}
.index-row .ix{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.index-row .ti{font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em}
.index-row .ca{color:var(--muted); font-size:.9rem}
.index-row .st{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:right}
.index-row.live .st,.index-row.live .ix{color:var(--accent)}
/* --- abstract editorial panel , CSS metal + dot field, NEVER an ![]()
------- */
.ed-abstract{position:relative; overflow:hidden; background:var(--grey-5)}
.ed-abstract.metal{background:var(--chrome)}
.ed-abstract::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px); background-size:24px 24px}
.ed-abstract.metal::before{background:var(--brush); mix-blend-mode:overlay}
.ed-abstract .credit,.ed-abstract .tag{z-index:3}
/* dot-grid field , the mark/grid signature; one cell lit = AIHD */
.dotfield{display:grid; gap:14px; place-items:center}
.dotfield i{width:9px; height:9px; border-radius:50%; background:var(--dot)}
.dotfield i.lit{background:var(--accent)}
/* honour reduced motion across every card that opts into motion */
@media (prefers-reduced-motion:reduce){
.anim,.reveal,[data-magnetic],[data-tilt]{transition:none !important; animation:none !important; transform:none !important}
.reveal{opacity:1 !important}
}
/* === Migration notes (delta v1 fashion-editorial -> v2 austere-graphic) =====
CHANGE greys neutralised (#ececed/#14151a/#6a6e76); blue cast dropped
CHANGE accent -> deep Klein #1d2bd4; --glow REMOVED (blue is flat ink)
ADD --gridline + .glines (structural grid substrate) + .lattice
ADD .chrome-disc (tactile metal), .aihd-wordmark .ii (dotless+blue tittle)
CHANGE default headline .t-h1 = normal width; .t-display (Expanded 800) is
CAMPAIGN-ONLY now
REMOVE glow box-shadows from mark/dot/avatar/favicon/pills
REPLACE photography (.ed-photo) -> graphic .ed-abstract (metal/dot)
KEEP Archivo/Inter/JetBrains, glass, dot-grid, index pattern, motion tokens
========================================================================== */