/* ============================================================================
SPIN STATE — BRAND DESIGN SYSTEM
One stylesheet. Two page sizes (A4 docs + square brand-book pages).
Every component is built from the same tokens, so a 2-page client recap and
a 24-page Vivid Vision share one visual language.
Real brand type (Degular + Aktiv Grotesk) is wired below via @font-face,
self-hosted from assets/fonts/, so a single HTML file renders identically
offline. Hanken Grotesk / Inter remain ONLY as a last-resort fallback if a
font file goes missing.
========================================================================== */
/* ---- 1. FONTS — real brand type, self-hosted ---------------------------- */
/* Degular (display) + Aktiv Grotesk (body/eyebrow), served from assets/fonts/.
Self-contained: no network needed at render time. Degular ships Regular +
Medium only, so the Medium covers the 500–700 range (headlines never
synthesise an ugly bold). */
@font-face { font-family:'Degular'; font-weight:400; font-style:normal;
src:url('../fonts/Degular-Regular.otf') format('opentype'); }
@font-face { font-family:'Degular'; font-weight:500 700; font-style:normal;
src:url('../fonts/Degular-Medium.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:300; font-style:normal;
src:url('../fonts/AktivGrotesk-Light.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:300; font-style:italic;
src:url('../fonts/AktivGrotesk-LightItalic.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:400; font-style:normal;
src:url('../fonts/AktivGrotesk-Regular.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:400; font-style:italic;
src:url('../fonts/AktivGrotesk-Italic.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:500 600; font-style:normal;
src:url('../fonts/AktivGrotesk-Medium.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:500 600; font-style:italic;
src:url('../fonts/AktivGrotesk-MediumItalic.otf') format('opentype'); }
@font-face { font-family:'Aktiv Grotesk'; font-weight:700; font-style:normal;
src:url('../fonts/AktivGrotesk-Bold.otf') format('opentype'); }
:root {
/* SWAP POINT — these are the real brand faces. Free fallbacks (Hanken
Grotesk / Inter) kept only as a last resort if a font file is missing. */
--font-display: 'Degular', 'Aktiv Grotesk', 'Hanken Grotesk', system-ui, sans-serif; /* headlines */
--font-text: 'Aktiv Grotesk', 'Inter', system-ui, sans-serif; /* body */
--font-eyebrow: 'Aktiv Grotesk', 'Inter', sans-serif; /* tracked caps */
--font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; /* marker / sticky-note layer — drop a real hand font into assets/fonts/ */
/* ---- 2. PALETTE (official Spin State guidelines) ---- */
--forest: #142B2E; /* primary dark */
--forest-2: #1C3A3D; /* raised panel on forest */
--mint: #40BF9E; /* primary accent */
--mint-dark: #2C8C73;
--lilac: #ADB2E0; /* secondary accent */
--paper: #F4F7F6; /* light ground */
--white: #FFFFFF;
--black: #0B1719;
--ink: #142B2E; /* text on light */
--ink-soft: #4A5E60; /* secondary text on light */
--mist: rgba(255,255,255,.72); /* secondary text on dark */
--sand: #D8C09C; /* Transformation / apex — the Vivid Vision's one job for it
(the gold node + the "Transformation" marker). Not a free 4th colour. */
/* ---- 2b. HAND-DRAWN / MARKER TAXONOMY (the Magic Model layer) ----
Functional diagram colours, NOT brand grounds. Used only inside the
hand-drawn system maps + sticky-note labels (Vivid Vision pp14-15). */
--mk-transform: #E8B84B; /* yellow / gold — the goal / transformation */
--mk-obstacle: #E5566B; /* red — obstacles */
--mk-milestone: #40BF9E; /* green / mint — milestones */
--mk-project: #5B8DEF; /* blue — projects / process */
--note-yellow: #FBE7A1; /* sticky-note grounds */
--note-mint: #BFEBDD;
--note-lilac: #D7D9F2;
/* ---- 3. TYPE SCALE (fluid-ish, tuned for print) ---- */
--fs-eyebrow: 11px; --ls-eyebrow: .22em;
--fs-display: 58px; --lh-display: 1.02; /* page titles */
--fs-h1: 40px; --lh-h1: 1.06;
--fs-h2: 27px; --lh-h2: 1.12;
--fs-h3: 18px; --lh-h3: 1.25;
--fs-lede: 20px; --lh-lede: 1.45;
--fs-body: 14.5px; --lh-body: 1.58;
--fs-small: 12.5px;
--fs-stat: 64px;
/* ---- 4. SPACE + SHAPE ---- */
--gut: 18mm; /* page margin */
--r-card: 30px; /* panel radius — David's brand standard: rounded corners on
everything, never a hard square where a corner is visible */
--r-pill: 999px;
--rule: rgba(20,43,46,.12);
}
/* ---- 5. RESET + PRINT FIDELITY ------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: var(--font-text); color: var(--ink);
font-size: var(--fs-body); line-height: var(--lh-body);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
background: #888; }
/* ---- 6. PAGE MODEL ------------------------------------------------------ */
/* .page is the unit. Choose ONE size class per document and keep it. */
.page {
position: relative; overflow: hidden;
background: var(--paper); color: var(--ink);
margin: 10mm auto; padding: var(--gut);
display: flex; flex-direction: column;
box-shadow: 0 6px 30px rgba(0,0,0,.25); /* screen only; ignored in print */
}
.page--a4 { width: 210mm; height: 297mm; } /* client docs */
.page--square { width: 190mm; height: 190mm; } /* brand-book / social */
/* Ground colours */
.is-forest { background: var(--forest); color: var(--white); }
.is-mint { background: var(--mint); color: var(--ink); }
.is-lilac { background: var(--lilac); color: var(--ink); }
.is-paper { background: var(--paper); color: var(--ink); }
.is-white { background: var(--white); color: var(--ink); }
.is-forest .eyebrow, .is-mint .eyebrow, .is-lilac .eyebrow { color: inherit; }
@page { size: A4; margin: 0; }
@media print {
body { background: none; }
.page { margin: 0; box-shadow: none; page-break-after: always; }
}
/* ---- 7. THE ORBIT MOTIF ------------------------------------------------- */
/* The signature mark, oversized and bled off an edge. ONE per page, max.
Uses the real Favicon SVGs; tint via opacity over the page colour. */
.motif {
position: absolute; z-index: 0; pointer-events: none;
width: 62%; opacity: .10; /* soft, lives behind content */
}
.motif--tr { top: -14%; right: -12%; }
.motif--br { bottom: -16%; right: -14%; }
.motif--bl { bottom: -16%; left: -16%; }
.motif--tl { top: -14%; left: -14%; }
.motif--xl { width: 96%; opacity: .14; } /* hero-scale */
.motif--ghost { opacity: .07; }
.page > .layer { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; }
/* Fixed-height print pages must never compress their sections (was clipping the
hero headline + overflowing the closing panel). Nothing shrinks; the spacer
absorbs slack. */
.page > * { flex-shrink: 0; }
.page > .layer > *, .layer.stack > * { flex-shrink: 0; }
/* ---- 8. EYEBROW + HEADLINE (two-tone) ----------------------------------- */
.eyebrow {
font-family: var(--font-eyebrow); font-weight: 600;
font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--mint-dark);
margin-bottom: 14px;
}
.is-forest .eyebrow { color: var(--mint); }
.is-mint .eyebrow { color: var(--forest); }
.is-lilac .eyebrow { color: var(--forest); }
.headline {
font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em;
font-size: var(--fs-display); line-height: var(--lh-display);
}
.headline--h1 { font-size: var(--fs-h1); }
.headline--h2 { font-size: var(--fs-h2); }
/* Two-tone: wrap the second half in .accent. Default mint; .accent--lilac available. */
.headline .accent { color: var(--mint); }
.is-forest .headline { color: var(--white); }
.is-forest .headline .accent { color: var(--mint); }
.is-mint .headline { color: var(--forest); }
.is-mint .headline .accent { color: var(--white); }
.is-lilac .headline { color: var(--forest); }
.is-lilac .headline .accent { color: var(--white); }
.accent--lilac { color: var(--lilac) !important; }
/* ---- 9. PROSE + LEDE ---------------------------------------------------- */
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); font-weight: 500;
margin: 14px 0; max-width: 62ch; }
.is-forest .lede { color: var(--mist); }
.prose p { margin: 0 0 10px; max-width: 64ch; }
.prose p:last-child { margin-bottom: 0; }
.is-forest .prose { color: var(--mist); }
.muted { color: var(--ink-soft); }
.is-forest .muted { color: var(--mist); }
.col-2 { columns: 2; column-gap: 12mm; }
.col-2 p { break-inside: avoid; }
/* ---- 10. BULLET LIST with orbit-dot markers ----------------------------- */
.bullets { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.bullets li { position: relative; padding-left: 22px; max-width: 64ch; }
.bullets li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--mint); box-shadow: 0 0 0 3px rgba(64,191,158,.18);
}
.is-mint .bullets li::before { background: var(--forest); box-shadow: 0 0 0 3px rgba(20,43,46,.15); }
.is-lilac .bullets li::before { background: var(--forest); box-shadow: 0 0 0 3px rgba(20,43,46,.12); }
/* ---- 11. LETTER / CARD panel -------------------------------------------- */
.card { background: var(--paper); border-radius: var(--r-card); padding: 9mm 10mm; }
.is-forest .card { background: var(--forest-2); }
.card .signoff { font-style: italic; color: var(--mint-dark); margin-top: 12px; }
.is-forest .card .signoff { color: var(--mint); }
/* ---- 12. PULL QUOTE ----------------------------------------------------- */
.quote { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
font-size: 32px; line-height: 1.2; max-width: 18ch; }
.quote--center { text-align: center; max-width: 22ch; margin: 0 auto; }
.quote__cite { display: block; margin-top: 18px; font-family: var(--font-eyebrow);
font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em;
color: var(--mint-dark); }
.is-forest .quote { color: var(--white); }
.is-forest .quote__cite { color: var(--mint); }
.quote--bar { padding-left: 20px; border-left: 2px solid var(--mint); }
/* ---- 13. ACTIONS TABLE (owner / task / timing) -------------------------- */
.actions { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.actions td { vertical-align: top; padding: 9px 0; border-top: 1px solid var(--rule); }
.actions tr:first-child td { border-top: 0; }
.actions .who { width: 18%; font-weight: 700; color: var(--mint-dark); }
.actions .what { width: 60%; padding-right: 14px; line-height: 1.5; }
.actions .when { width: 22%; color: var(--ink-soft); }
.actions .done { color: var(--mint-dark); font-weight: 700; }
/* ---- 14. STAT CALL-OUT (big number in orbit ring) ----------------------- */
.stat { display: inline-flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
width: 150px; height: 150px; border-radius: 50%;
border: 5px solid var(--mint); color: var(--white); }
.stat__n { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
line-height: 1; }
.stat__l { font-size: 11px; line-height: 1.25; margin-top: 4px; max-width: 11ch; }
/* ---- 15. NUMBERED TIMELINE (vertical nodes + connector) ----------------- */
/* Block-flow steps (NOT grid/flex): Chrome print only honours
break-inside:avoid on block boxes, so a step never splits across the
page footer. The node is absolutely positioned into the left gutter. */
.timeline { position: relative; }
.tl-step { display: block; position: relative; padding-left: 60px; }
.tl-step + .tl-step { margin-top: 26px; }
.tl-node { position: absolute; left: 0; top: 0;
width: 44px; height: 44px; border-radius: 50%; background: var(--forest);
color: var(--white); display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 17px; z-index: 1; }
.is-mint .tl-node { background: var(--forest); }
.tl-step:not(:last-child)::before {
content: ""; position: absolute; left: 21px; top: 44px; bottom: -26px;
width: 2px; background: var(--white); opacity: .6; }
.tl-h { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
margin-bottom: 3px; }
/* ---- 16. PORTRAIT RING (mint ring-framed headshots) --------------------- */
.portrait-row { display: flex; flex-wrap: wrap; gap: 14px; }
.portrait { width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
border: 4px solid var(--mint); background: var(--forest); }
.portrait--lg { width: 120px; height: 120px; }
/* ---- 17. DUOTONE PHOTO with gradient fade ------------------------------- */
/* Wrap an ![]()
in .photo-duotone; text sits in the faded zone. */
.photo-duotone { position: absolute; inset: 0; z-index: 0; }
.photo-duotone img { width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.35) contrast(1.02); }
.photo-duotone::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--forest) 22%, rgba(20,43,46,.45) 52%, rgba(20,43,46,0) 78%); }
.photo-duotone--up::after {
background: linear-gradient(0deg, var(--forest) 18%, rgba(20,43,46,0) 64%); }
/* ---- 18. HERO header block (for A4 docs) -------------------------------- */
.hero { background: var(--forest); color: var(--white); flex: none;
margin: calc(var(--gut) * -1) calc(var(--gut) * -1) 0;
padding: 22mm var(--gut) 16mm; position: relative; overflow: hidden; }
.hero .eyebrow { color: var(--mint); }
.hero .headline { color: var(--white); font-size: var(--fs-h1); line-height: var(--lh-h1); }
.hero .sub { color: var(--mint); font-size: var(--fs-lede); margin-top: 8px; }
.hero .meta { color: var(--mist); font-size: var(--fs-small); margin-top: 14px; }
/* ---- 19. CLOSING PANEL (dark, with motif) ------------------------------- */
.closing { background: var(--forest); color: var(--white); border-radius: var(--r-card);
padding: 9mm 11mm; position: relative; overflow: hidden; }
.closing .headline { color: var(--white); }
/* ---- 19b. BADGE PILL ---------------------------------------------------- */
.pill { display: inline-block; font-family: var(--font-eyebrow); font-weight: 600;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
padding: 5px 12px; border-radius: var(--r-pill);
background: rgba(64,191,158,.16); color: var(--mint); }
/* ---- 19c. TIER CARDS (pricing / facts row) ------------------------------ */
.tiers { display: flex; border-radius: var(--r-card); overflow: hidden; }
.tier { flex: 1; background: var(--paper); padding: 7mm 6mm; }
.tier + .tier { border-left: 1px solid rgba(20,43,46,.07); }
.tier__l { font-family: var(--font-eyebrow); font-weight: 600; font-size: 10px;
letter-spacing: .12em; text-transform: uppercase; color: var(--mint-dark);
line-height: 1.3; min-height: 2.4em; }
.tier__n { font-family: var(--font-display); font-weight: 600; font-size: 34px;
line-height: 1; margin: 8px 0 3px; }
.tier__s { font-size: var(--fs-small); color: var(--ink-soft); }
.tier--accent { background: var(--forest); color: var(--white); }
.tier--accent .tier__l { color: var(--mint); }
.tier--accent .tier__s { color: var(--mist); }
/* ---- 19d. TIMELINE star finish ------------------------------------------ */
.tl-node--star { background: var(--mint); color: var(--forest); }
/* ---- 20. FOOTER wordmark bar -------------------------------------------- */
.footer { display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 12px; }
.footer img { height: 18px; } /* the SPINSTATE lockup */
.footer .meta { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-soft); }
.is-forest .footer .meta { color: var(--mist); }
.footer--bar { background: var(--forest); color: var(--white);
margin: 0 calc(var(--gut) * -1) calc(var(--gut) * -1);
padding: 9px var(--gut); }
.footer--bar .meta { color: var(--mist); }
/* ---- 20b. DOCUMENT FLOW MODE (Briefs / Reports / Proposals) ------------- */
/* The reliable way to make a text document NEVER clip: let it flow across A4
pages. Pair with `@page { size:A4; margin:16mm 18mm 22mm }` in the document.
Calm spacing is preserved; the doc simply runs to as many pages as it needs.
The footer is a single closing band at the document end (see note below). */
/* Side gutters live on .doc (NOT @page), so the hero/footer can cancel them
with negative margins and bleed to the true page edge. Chrome print clips
negative-margin overflow into the @page margin area, so the document MUST
set `@page { margin: 16mm 0 22mm }` + `@page :first { margin-top: 0 }`,
leaving the left/right page margins at zero for the bleed to land.
NOTE on the footer: a top-bleed hero needs `@page :first` to zero the top
margin, and that margin asymmetry makes a `position: fixed` footer drift off
the bottom on later pages in headless Chrome (verified). So the footer is an
in-flow band that appears ONCE, after the final content — not per page. For a
true repeating + bleeding footer, render with WeasyPrint (paged-media margin
boxes), at the cost of box-shadow / duotone filters. */
.doc { color: var(--ink); padding: 0 var(--gut); }
.doc .hero { /* bleeds to the physical page edge (top + sides) */
margin: 0 calc(var(--gut) * -1) 11mm; padding: 20mm var(--gut) 15mm;
border-radius: 0 0 var(--r-card) var(--r-card); } /* round only the edge meeting the body */
.doc-footer { /* slim closing sign-off, once at the document end */
margin-top: 18mm; /* a deliberate end-mark after the final content */
padding-top: 7mm;
border-top: 1px solid var(--rule);
text-align: center; }
.doc-footer img { height: 15px; } /* use the Forest logo here — sits on white, not a band */
.doc-footer .meta { display: block; margin-top: 6px;
font-size: 10px; letter-spacing: .04em; color: var(--ink-soft); }
/* keep blocks whole across the page break; never split a heading from its body,
a card, a timeline step, or a table row */
.doc .keep, .doc .card, .doc .closing, .doc .tiers,
.doc .timeline, .doc .tl-step, .doc .row, .doc .quote { break-inside: avoid; }
/* Chrome's print engine ignores break-inside:avoid on an individual flex/
grid step but honours it on a whole block, so a .timeline is kept intact
as a unit — a step never lands half across a page break. For a timeline
too tall for one page, split it into two .timeline blocks. */
.doc .eyebrow, .doc .headline, .doc h1, .doc h2 { break-after: avoid; }
.doc .actions tr { break-inside: avoid; }
.doc section + section { margin-top: var(--sec, 12mm); } /* calm section rhythm */
/* ---- 22. VALUE LADDER (ascending offers, orbit spine) ------------------- */
/* Horizontal staircase: each .rung steps up left→right, the rising tops read
as the spine. Drop a low-opacity favicon behind as the literal orbit curve.
Heights are class-driven (.rung--1..6) so there are no one-off inline styles. */
.ladder { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.ladder .rung { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.rung__bar { background: var(--paper); border-radius: var(--r-card);
padding: 7mm 6mm; display: flex; flex-direction: column; justify-content: flex-end; }
.is-forest .rung__bar { background: var(--forest-2); }
.rung--1 .rung__bar { min-height: 30mm; }
.rung--2 .rung__bar { min-height: 42mm; }
.rung--3 .rung__bar { min-height: 54mm; }
.rung--4 .rung__bar { min-height: 66mm; }
.rung--5 .rung__bar { min-height: 78mm; }
.rung--6 .rung__bar { min-height: 90mm; }
.rung__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.1; }
.rung__price { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 4px; }
.rung__note { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 3px; }
.is-forest .rung__note { color: var(--mist); }
.rung--accent .rung__bar { background: var(--mint); color: var(--forest); }
.rung--accent .rung__note { color: rgba(20,43,46,.7); }
/* ---- 23. ECOSYSTEM WHEEL (labelled-block, Vivid Vision p13) ------------- */
/* The gold-standard ecosystem: a Forest hub holding the orbit mark, colour-
coded nodes on a ring, connector lines out to outboard labelled blocks
(.ecocap = name + price + descriptor). Built for a 190mm .page--square with
the wheel centred at (95mm,108mm); drop the elements as direct children of
the .page. Reference: examples/spin-state-ecosystem*.html. */
.ecowheel__line { position: absolute; left: 95mm; top: 108mm; width: 52mm; height: 1.4px;
background: rgba(255,255,255,.32); transform-origin: 0 50%; z-index: 1; }
.l1{transform:rotate(-90deg)}.l2{transform:rotate(-30deg)}.l3{transform:rotate(30deg)}
.l4{transform:rotate(90deg)}.l5{transform:rotate(150deg)}.l6{transform:rotate(210deg)}
.ecowheel__ring { position: absolute; left: 95mm; top: 108mm; transform: translate(-50%,-50%);
width: 56mm; height: 56mm; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.32); z-index: 1; }
.ecowheel__hub { position: absolute; left: 95mm; top: 108mm; transform: translate(-50%,-50%);
width: 34mm; height: 34mm; border-radius: 50%; background: var(--forest-2);
border: 1.5px solid rgba(64,191,158,.55); display: flex; align-items: center; justify-content: center; z-index: 2; }
.ecowheel__hub img { width: 19mm; }
.ecowheel__node { position: absolute; transform: translate(-50%,-50%); width: 12mm; height: 12mm;
border-radius: 50%; border: 2px solid #fff; z-index: 3;
display: flex; align-items: center; justify-content: center; }
.ecowheel__node--white { background: #fff; } .ecowheel__node--lilac { background: var(--lilac); } .ecowheel__node--sand { background: var(--sand); }
/* Per-node icon — one glyph that complements each proposition. Forest stroke
reads cleanly on all three node fills (white / lilac / sand). */
.ecowheel__node svg { width: 6.6mm; height: 6.6mm; display: block; }
.ecowheel__node svg * { stroke: var(--forest); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.n1{left:95mm;top:80mm}.n2{left:119.2mm;top:94mm}.n3{left:119.2mm;top:122mm}.n4{left:95mm;top:136mm}.n5{left:70.8mm;top:122mm}.n6{left:70.8mm;top:94mm}
.ecocap { position: absolute; transform: translate(-50%,-50%); width: 46mm; text-align: center; z-index: 2; }
.ecocap .nm { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #fff; line-height: 1.12; }
.ecocap .pr { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--mint); margin-top: 1.2mm; }
.ecocap .ds { font-family: var(--font-eyebrow); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 1mm; }
.c1{left:95mm;top:51mm}.c2{left:145mm;top:80mm}.c3{left:145mm;top:136mm}.c4{left:95mm;top:165mm}.c5{left:45mm;top:136mm}.c6{left:45mm;top:80mm}
/* ---- 23b. CORNER ORBIT ARCS + foot wordmark ---------------------------- */
/* Cover-style partial rings that bleed off the page corners (one per opposite
corner). Keep them clear of the title and the foot wordmark. */
.arc { position: absolute; border-radius: 50%; border-style: solid; z-index: 0; }
.arc--mint { width: 150mm; height: 150mm; border-width: 14mm; border-color: var(--mint); top: -80mm; right: -76mm; opacity: .85; }
.arc--lilac { width: 132mm; height: 132mm; border-width: 13mm; border-color: var(--lilac); bottom: -90mm; left: -70mm; opacity: .8; }
.eco-foot { position: absolute; right: var(--gut); bottom: 11mm; z-index: 2; }
.eco-foot img { height: 7mm; }
/* ---- 21. UTILITIES ------------------------------------------------------ */
.stack > * + * { margin-top: var(--s, 16px); }
.spacer { flex: 1 0 0; }
.row { display: flex; gap: 24px; }
.row > * { flex: 1; }
.tight { max-width: 54ch; }
.center { text-align: center; }
.divider { height: 1px; background: var(--rule); margin: 14px 0; }
.is-forest .divider { background: rgba(255,255,255,.16); }
/* ---- 24. SPLIT-HEAD LAYOUT (headline left, body right) ------------------ */
/* The Vivid Vision's recurring two-column: a big headline top-left, the body
or list to the right. Pair with a two-tone .headline. */
.split-head { display: flex; gap: 14mm; align-items: flex-start; }
.split-head__head { flex: 0 0 42%; }
.split-head__body { flex: 1; }
.doc .split-head, .split-head { break-inside: avoid; }
/* ---- 25. HALF-BLEED DUOTONE PHOTO (David one side, content the other) --- */
/* Photo covers one half of the page, a Forest gradient fades it into the
content side. .photo-half--l = photo left, --r = photo right. */
.photo-half { position: absolute; top: 0; bottom: 0; width: 56%; z-index: 0; overflow: hidden; }
.photo-half img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.03); }
.photo-half--r { right: 0; }
.photo-half--l { left: 0; }
.photo-half--r::after { content:""; position:absolute; inset:0;
background: linear-gradient(90deg, var(--forest) 0%, rgba(20,43,46,.55) 38%, rgba(20,43,46,0) 75%); }
.photo-half--l::after { content:""; position:absolute; inset:0;
background: linear-gradient(270deg, var(--forest) 0%, rgba(20,43,46,.55) 38%, rgba(20,43,46,0) 75%); }
/* ---- 26. MINT CLOSING LINE (recurring sign-off beat) ------------------- */
/* The short mint line at the foot of a content page ("Founders who sleep,
teams who speak..."). */
.closing-line { font-family: var(--font-display); font-weight: 500;
font-size: var(--fs-lede); line-height: 1.35; color: var(--mint);
max-width: 30ch; margin-top: auto; }
.is-mint .closing-line, .is-lilac .closing-line { color: var(--forest); }
/* ---- 27. HAND-DRAWN LAYER (sticky notes + marker labels) --------------- */
/* The Magic Model texture. NOTE: full marker system-maps (Vivid Vision p15)
are hand-illustrated ASSETS — place them as ![]()
. CSS here covers the
reproducible part: sticky-note labels and marker-coloured text. Needs a
real hand font in --font-hand (none shipped yet — currently a system fallback). */
.note { display: inline-block; font-family: var(--font-hand);
font-size: 18px; line-height: 1.15; color: var(--ink);
background: var(--note-yellow); padding: 7px 12px; border-radius: 4px;
border: 1px solid rgba(0,0,0,.06); transform: rotate(-2.5deg); }
.note--mint { background: var(--note-mint); }
.note--lilac { background: var(--note-lilac); }
.note--r { transform: rotate(2deg); }
.mark { font-family: var(--font-hand); font-weight: 400; }
.mark--transform { color: var(--mk-transform); }
.mark--obstacle { color: var(--mk-obstacle); }
.mark--milestone { color: var(--mk-milestone); }
.mark--project { color: var(--mk-project); }
/* Legend dots for a diagram key (the Magic Model taxonomy) */
.mk-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-small); }
.mk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mk-legend span::before { content:""; width: 12px; height: 12px; border-radius: 50%; }
.mk-legend .t::before { background: var(--mk-transform); }
.mk-legend .o::before { background: var(--mk-obstacle); }
.mk-legend .m::before { background: var(--mk-milestone); }
.mk-legend .p::before { background: var(--mk-project); }
/* Degular is a 69-glyph subset: no apostrophe, no accents, no £, %, &, quotes.
The PDF renders in a Lambda with NO system fonts, so 'Hanken Grotesk',
system-ui and sans-serif behind it resolve to nothing and any missing glyph
comes out as tofu. Aktiv Grotesk (783 glyphs) is loaded and embedded, so it
sits in the stack directly behind Degular and catches the gaps per-glyph.
Found 17 Jul: a taker named O'Neill or José got a broken box in their own
name on page 1 of their report. Not a substitute font, a fallback for glyphs
the primary does not contain. Remove only when Degular ships a full set. */