/* ============================================================ ABHISHEK RUNGTA — TOKEN LAYER Derived 2026-08-21 from: · input/Design System/ColorPalette.png (colour, authoritative) · input/Website Design Questionnaire.docx (typeface + icons, authoritative) · input/Inspiration/chrisducker.png (form language, via research/slices/) Every value below traces to one of those three. See research/findings.md § Stage 3 for the mechanism each one encodes. ============================================================ */ :root{ /* ---- COLOUR ------------------------------------------------ The supplied Figma palette offers 35 values across five ramps. We use the four the client's own footer chip names, and nothing else. A personal site that reaches for a fifth starts looking like a component library. (Mechanism #5) Contrast, measured: ink on paper 20.11:1 ink on field 16.92:1 accent on paper 8.42:1 accent on field 7.09:1 <- AAA small text, which is what makes the accent affordable as 12px kicker copy. muted on paper 8.42:1 muted on field 7.09:1 No darker small-text variant was needed. That is unusual and worth saying out loud: the brand colour did not have to be compromised. ------------------------------------------------------------- */ --ink: #040712; /* all body and display text */ --accent: #2344AC; /* the ONLY accent. see the prohibition block */ --accent-deep: #12276B; /* hover / pressed only. never a fill of its own */ --accent-faint: #A7B3E0; /* 1px vertical rules in the credential triad */ --field: #E4EDF0; /* the alternating ground. mechanism #1 */ --paper: #FFFFFF; --muted: #4C4D53; /* meta, dates, captions */ --hair: #D6DBF0; /* row separators INSIDE a list only, never between sections */ /* ---- TYPE -------------------------------------------------- Google Sans, specified by the client and binding. Variable 400-700, roman + italic, latin/latin-ext, vendored to assets/fonts/ so the standalone output has no network dependency. Scale measured off cd-02 (display 44 / body 19 = 2.3) and opened up to 3.3:1 for a 60px display. A mid tier exists at 22px and is used — the reference has one and a scale without it collapses into "huge or small", which is a tell. ------------------------------------------------------------- */ --font: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-display: 3.75rem; /* 60 */ --fs-h2: 2.375rem; /* 38 */ --fs-h3: 1.375rem; /* 22 */ --fs-body: 1.125rem; /* 18 — the current site sets 13px. mechanism, and audit finding 3 */ --fs-small: 0.875rem; /* 14 */ --fs-kicker: 0.75rem; /* 12 */ --ls-display: -0.02em; --ls-body: 0; --ls-kicker: 0.14em; --lh-display: 1.08; --lh-head: 1.18; --lh-body: 1.62; --w-regular: 400; --w-medium: 500; --w-bold: 700; /* ---- SPACE ------------------------------------------------- Section rhythm is generous because division is by ground change alone (mechanism #1) — with no rules to mark an edge, the space IS the edge. Measured off cd-02/cd-05: ~120px above a section head. ------------------------------------------------------------- */ --section-y: 5.5rem; /* 88 — was 120. Bands were reading airy rather than compact; with division carried by ground change the edge is legible at 88 and the page tightens by ~25%. */ --section-y-tight: 3.5rem; --shell-max: 1200px; --shell-read: 1040px; /* long-form + furniture. Keeps prose at its measure without opening a void between it and the sidebar. */ --shell-pad: 2rem; --gutter: 2.5rem; --measure: 62ch; /* long-form line length */ --aside-w: 240px; /* furniture columns are sized to their content, not to a fraction of the grid. See mechanism #10. */ --bar-h: 82px; /* the masthead's own height. The hero is pulled up by exactly this so it sits UNDER the sticky bar, which is what lets the bar be transparent. */ --hero-zoom: 1.34; /* the clip is sky-heavy; the massif needs enlarging rather than re-cropping. Tuned by eye at 1440. */ --hero-gap: clamp(3rem, 8vh, 6rem); /* retained for the non-centred fallback */ --hero-dim: .80; /* Uniform darkening of the clip. NOT a scrim: a flat filter, so prohibition 3 (zero gradients) holds. Moving the type off-centre and onto the left axis bought back contrast, so the clip no longer needs crushing to .70. Measured at .80 with the type left: title 6.04:1, subtext 5.64:1. */ --marquee-dur: 46s; /* slow enough to read a mark as it passes */ --overlap: 64px; /* mechanism #4. the single most characteristic number here */ /* ---- FORM -------------------------------------------------- Mechanism #2. Uniform 0 on every rectangle, the button included. The ONLY round object on this site is a human face. Note this is not the previous project's rule — there, radius 0 was structural and the button was the exception. Here the exception has moved from the control to the person. ------------------------------------------------------------- */ --r-structural: 0; --r-interactive: 0; --r-portrait: 50%; /* ---- DEPTH ------------------------------------------------- Method: OVERLAP + GROUND CHANGE. Not shadow, not hairline. There is no --shadow token because there is no shadow. ------------------------------------------------------------- */ --rule-w: 1px; --rule-w-live: 3px; /* the grown state. mechanism #12 */ /* ---- MOTION ------------------------------------------------ */ --dur: 140ms; --ease: cubic-bezier(.2,0,.2,1); /* no overshoot. ever. */ } @media (max-width: 900px){ :root{ --fs-display: 2.5rem; --fs-h2: 1.75rem; --fs-h3: 1.25rem; --section-y: 3.5rem; --section-y-tight: 2.5rem; --shell-pad: 1.25rem; --gutter: 2rem; --overlap: 32px; /* Origin is the bottom edge, so a BIGGER zoom lifts the massif into the type — narrow viewports need less, not more. At 1.0 with a tall band the subtext clears the horizon glow and measures 5.4:1; every zoom above 1.0 drops it under AA, whatever the height. Measured, not guessed. */ --hero-zoom: 1; --hero-gap: 2rem; } } @media (prefers-reduced-motion: reduce){ :root{ --dur: 0ms; } } /* ============================================================ PROHIBITIONS — machine-checked before ship. Each line is a Gate 3 rejection or a Gate 1 mechanism, restated as something a script can falsify. assets/js/verify.js runs them. 1. box-shadow must be 'none' on every element 2. border-radius must be '0px' on every element except .portrait (50%) 3. linear-gradient / radial-gradient must appear zero times in CSS 4.
borders must be 0 on all four edges (division is by ground, not rule) 5. font-size must be >= 16px on every

, except .meta and .closer__credit (captions) 6. hue no orange, warm, purple, pink or neon value in the stylesheet 6b. centred composition NONE. The hero was centred at the client's direction on 2026-08-22 and put back on the left axis on 2026-08-28, so mechanism 7 now holds site-wide with no exception at all. 7. dark grounds no element background darker than the field tint, footer included. Two named exceptions, both deliberate: · .docbar — chrome of the internal deliverables, not pages of the site · .vhero — the client-directed video hero (2026-08-22). Overrides Gate 3 rejection 5. · .closer — the client-directed photographic closing band (2026-08-22). Same override. Both are darkened IN THE FILE rather than by a runtime overlay, so prohibition 3 still holds. 8. in a heading at most one per heading, and never the whole heading 8b. stock photography none, EXCEPT the closing band's field (unsplash.com/photos/Hlkuojv_P6I, engin akyurt), client-directed 2026-08-22. Overrides Gate 3 rejection 9. Attributed in the band. Every other image on the site is client-supplied. 9. splits never symmetric. Two ratios only: 7fr/5fr content-to-content, and 1fr/--aside-w content-to-furniture 10. carousels zero elements with overflow-x:scroll carrying primary content. The homepage marquee is NOT one: every mark passes unprompted, all are in the DOM at once, and it pauses on hover. Under prefers-reduced-motion it stops and becomes scrollable so nothing is unreachable. 10b. autonomous motion none, EXCEPT .marquee__track (client-directed 2026-08-22). Overrides mechanism 12, which allowed only a rule growing and a ground change. 11. icons never inside a circular container, never with a fill other than none 12. images every src resolves; zero external hosts ============================================================ */