/* =====================================================================
RETELLING TIME — design tokens & core components
Aesthetic: bold monochrome color-BLOCKING (solid filled panels, not
outlines) on bone paper · riso-ink accents for meaning · big heavy
display type · straight angles · sparse soft drop shadows · subtle
grain baked onto solid color blocks.
Load fonts in the HTML :
Fraunces (display serif, heavy) · Space Grotesk (UI + labels)
===================================================================== */
:root{
/* ---- surfaces ---- */
--paper: #EFEBE1; /* primary background — bone */
--paper-2: #E7E2D6; /* light card / recessed panel */
--bone: #F4F1E8; /* text & fills ON dark/color blocks */
--bone-dim: rgba(244,241,232,.72);
/* ---- ink ---- */
--ink: #1B1814; /* near-black — primary block fill + text */
--ink-2: #3D3A33; /* secondary text on light */
/* ---- accents — solid fills, used to carry meaning ---- */
--gold: #CC9633; /* PRIMARY brand accent · highlight · new · CTA */
--gold-ink: #4A3408; /* dark text on gold (gold is light) */
--teal: #2C6168; /* in-progress · informational */
--rust: #B4472B; /* milestone · emphasis (secondary) */
--accent: var(--gold); /* the lead accent, referenced everywhere */
/* legacy aliases */
--ochre: var(--gold);
--ochre-ink: var(--gold-ink);
/* ---- type ---- */
/* strong display sans for headers — swap this one line to change it */
--font-display: "Archivo", "Space Grotesk", system-ui, sans-serif;
--font-ui: "Space Grotesk", system-ui, sans-serif;
/* hand-drawn accent face — Option B: hero names + result-reveal titles only */
--font-art: "Art Plot", "Archivo", sans-serif;
/* type scale — large & heavy */
--t-hero: 84px; /* hero name */
--t-h1: 54px; /* feature headline (e.g. archetype) */
--t-h2: 38px; /* section header */
--t-h3: 30px; /* card title */
--t-body: 17px;
--t-small: 15px;
--t-eyebrow:13px; /* tracked uppercase label (Space Grotesk 500) */
/* ---- structure ---- */
--radius: 0; /* straight angles — always square */
--line-strong: 2px solid rgba(27,24,20,.12); /* thick light divider */
/* sparse soft drop shadows — lift, never outline */
--shadow: 0 22px 34px -18px rgba(27,24,20,.55);
--shadow-sm: 0 14px 22px -14px rgba(27,24,20,.50);
/* subtle grain for solid color blocks (see .tx) */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--maxw: 1140px;
}
/* =====================================================================
HAND-DRAWN FONT — "Art Plot" (woff2 31KB). Use via --font-art / .art.
Option B: hero names + result-reveal titles only; Archivo for UI.
===================================================================== */
@font-face{
font-family:"Art Plot";
src:url("fonts/ArtPlot-Regular.woff2") format("woff2"),
url("fonts/ArtPlot-Regular.woff") format("woff");
font-weight:400; font-style:normal; font-display:swap;
}
/* =====================================================================
BASE — apply `.paper` to
===================================================================== */
.paper{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-ui);
font-size:var(--t-body);
line-height:1.55;
-webkit-font-smoothing:antialiased;
min-height:100vh;
}
/* page grain — fixed overlay, multiply */
.paper::before{
content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
opacity:.45; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
/* =====================================================================
TEXTURE — bake grain onto any solid color block: add class `tx`
===================================================================== */
.tx{background-image:var(--noise);background-blend-mode:soft-light;background-size:120px;}
/* =====================================================================
HAND-DRAWN ACCENTS
Type: wrap a word → place (Art Plot, weight 400)
Shapes: drawn SVGs used as recolorable masks. Set width/height + a
`background` color (defaults to currentColor). e.g.
===================================================================== */
.art{font-family:var(--font-art);font-weight:400;letter-spacing:0;}
/* .drawn + .d-* shape classes live in drawn.css (SVGs embedded as data-URIs
so they render with no external fetch). Link AFTER this file:
*/
/* =====================================================================
TYPE HELPERS
===================================================================== */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:.92;}
.display--black{font-weight:900;}
.subhead{font-family:var(--font-ui);font-weight:500;}
.eyebrow{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.18em;text-transform:uppercase;}
/* accent-dot: append a colored period to a headline → Title.
*/
.dot{color:var(--accent);}
/* marker-highlight: swipe behind words → The Cartographer
*/
.hl{background:var(--gold);color:var(--gold-ink);padding:.02em .22em;
-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hl--teal{background:var(--teal);color:var(--bone);}
.hl--ink{background:var(--ink);color:var(--bone);}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;}
/* =====================================================================
BLOCKS — solid color fills (the core of the system, not outlines)
Pair `.block` with a color modifier + `.tx`. Text is bone, except
on ochre (light) where text is ochre-ink.
===================================================================== */
.block{padding:32px 34px;color:var(--bone);}
.block--ink{background:var(--ink);}
.block--rust{background:var(--rust);}
.block--teal{background:var(--teal);}
.block--ochre{background:var(--ochre);color:var(--ochre-ink);}
.block--light{background:var(--paper-2);color:var(--ink);}
.lift{box-shadow:var(--shadow);} /* sparse — for feature blocks */
.lift-sm{box-shadow:var(--shadow-sm);}/* for card grids */
/* =====================================================================
BUTTONS — solid fill, no outline
===================================================================== */
.btn{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
padding:11px 18px;text-decoration:none;display:inline-block;cursor:pointer;
background:var(--ink);color:var(--bone);transition:transform .04s ease;}
.btn:active{transform:translateY(1px);}
.btn--bone{background:var(--bone);color:var(--ink);} /* on dark/color blocks */
.btn--rust{background:var(--rust);color:var(--bone);}
/* =====================================================================
TAGS — solid bone chips (for use on color blocks)
===================================================================== */
.tag{background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:12px;
letter-spacing:.08em;text-transform:uppercase;padding:8px 13px;display:inline-block;}
.tag--bone{background:var(--bone);color:var(--ink);}
/* =====================================================================
STAT BLOCKS — solid fills on light bg (color blocking)
===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat{background:var(--ink);color:var(--bone);padding:20px 22px;}
.stat--accent{background:var(--gold);color:var(--gold-ink);}
.stat--accent .stat__l{color:rgba(74,52,8,.72);}
.stat__n{font-family:var(--font-display);font-weight:600;font-size:44px;line-height:.9;}
.stat__l{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--bone-dim);margin-top:10px;}
/* =====================================================================
TRAIT SPECTRUM BAR (bipolar, position marker) — inside a light block
===================================================================== */
.bar{height:22px;background:var(--paper);position:relative;}
.bar__fill{position:absolute;top:0;bottom:0;left:0;background:var(--ink);}
.bar__mark{position:absolute;top:-3px;bottom:-3px;width:4px;background:var(--rust);}
.bar__labels{display:flex;justify-content:space-between;font-weight:500;font-size:13px;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;}
/* =====================================================================
PROGRESS METER — sits on a color block, fills with bone
===================================================================== */
.progress{height:10px;background:rgba(244,241,232,.28);position:relative;flex:1;}
.progress__f{position:absolute;inset:0;right:auto;background:var(--bone);}
/* =====================================================================
SECTION HEADER — big heavy headline + plain lead (no mono index)
===================================================================== */
.sec{margin-top:64px;}
.sec__h{font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;
letter-spacing:-.02em;margin:0 0 6px;}
.sec__lead{color:var(--ink-2);font-size:16px;margin:0 0 28px;}
/* =====================================================================
DIVIDER — thick, solid (not dashed)
===================================================================== */
.divider{border:0;border-top:var(--line-strong);margin:0;}