/* ============================================================================
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', '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); }