/* ============================================================
Tongueforge — shared design system
"mono-pink risograph": warm bone ground, ink, ONE hot pink,
halftone dot-grain, hard offset shadows, riso stamps/badges.
The ONLY colour exceptions live in page-specific CSS
(--correct/moss is used solely in the honesty-beat gauge on index.html).
Tokens are named by JOB (--primary/--correct/--almost), not hue — one
brand palette; the app carries the same values plus dark variants. Full
reference: /styleguide. ============================================================ */
/* ---------- design tokens ---------- */
:root{
/* The site is deliberately single-scheme (warm bone ground). Opt OUT of any
renderer force-darkening (Chrome "Auto Dark Theme" / dark-mode extensions):
without this, they darken our hot-pink chips toward the ink ground, so the
pink "you" bubble / mic disc / caught chip render as empty dark boxes on the
.section-dark surfaces. There is no dark design to fall back to. */
color-scheme:only light;
/* paper + ink */
--paper:#FAF9F7;
--panel:#F0EDE8;
--ink:#1C1917;
--muted:#78716C;
--faint:#8A8078;
/* signature — the ONE flat hot pink (brand + action). Nickname: pink.
The app calls this act-pink `accent` (and keeps a text-safe #BE185D too);
the site uses the single fill pink for both, having no pink-text surface. */
--primary:#FF2D8B;
/* correct outcome ink (nickname: moss). Warmed from cool teal #0F766E by the
2026-08-11 Fable harmony ruling. Site use: the honesty-beat gauge marker. */
--correct:#4E7A27;
/* almost outcome ink (nickname: gold). Warmed from burnt-amber #B45309. */
--almost:#9A6410;
/* incorrect outcome ink (nickname: coral) — text/diff EMPHASIS ONLY on the
light ground, never a full-opacity fill. */
--incorrect:#B84E33;
/* dark-ground variants of the outcome inks — for use INSIDE .section-dark /
ink chat mocks only; the light values fail contrast on the #1C1917 ground. */
--correct-dark:#8FBE5A;
--almost-dark:#E0A93A;
--incorrect-dark:#E87461;
/* type */
--disp:"Bricolage Grotesque", system-ui, sans-serif;
--body:"Space Grotesk", system-ui, sans-serif;
--mono:ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
/* geometry + rhythm */
--edge:3px; /* the house border weight */
--wrap:1120px; /* max content width */
--wrap-pad:clamp(18px,5vw,44px); /* gutter */
--section-y:clamp(48px,8vw,92px); /* vertical section rhythm */
--head-gap:clamp(26px,4vw,44px); /* section-head → body gap */
/* hard offset shadows (colour is the second token) */
--shadow-c:var(--primary); /* default hard-shadow colour */
--shadow-btn:5px 5px 0 var(--primary);
--shadow-card:6px 6px 0 var(--primary);
}
/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:17px;
line-height:1.55;
overflow-x:hidden;
position:relative;
}
/* halftone / grain texture over the whole page.
Riso identity depends on this reading — dot-grain must be visibly
present on bone (effective ~0.10 under multiply), not a whisper. */
body::before{
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background-image:radial-gradient(var(--ink) 0.6px, transparent 0.9px);
background-size:4px 4px;
opacity:0.11;
mix-blend-mode:multiply;
}
main, header, footer{position:relative; z-index:1}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad)}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{
outline:3px solid var(--ink);
outline-offset:3px;
border-radius:2px;
}
/* halftone-grain background utility — apply to any block that
needs the dot-grain confined to itself (dark or light). */
.halftone{position:relative}
.halftone::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(var(--ink) 0.6px, transparent 0.9px);
background-size:4px 4px; opacity:.11; mix-blend-mode:multiply;
}
/* ---------- riso mis-registration (off-register silkscreen type) ----------
Apply to an element (or inline span) that CONTAINS display text, e.g.:
Remembers you
The real glyphs stay crisp ink on top; two FLAT low-opacity ghost
layers (pink + a hint of ink) sit a few px off-register behind them,
like a plate that didn't quite line up. No gradients, flat inks only.
Degrades gracefully: drop the class and the ink text is unchanged. */
.riso-mis{
color:var(--ink);
/* offset is em-relative so it scales with the type — only reads as real
off-register at large display sizes, never as AA smear on small headings */
text-shadow:
0.045em 0.045em 0 rgba(255,45,139,.55), /* pink plate, low-right */
-0.03em -0.03em 0 rgba(28,25,23,.16); /* faint ink plate, up-left */
}
/* a touch more spread for very large hero type */
.riso-mis--loud{
text-shadow:
0.06em 0.06em 0 rgba(255,45,139,.6),
-0.045em -0.045em 0 rgba(28,25,23,.18);
}
/* ---------- riso dot-screen texture (flat CMYK-ish dots) ----------
Drop onto a hero panel/card for a coarser printed dot-screen than the
page grain. Flat pink dots, no gradients-as-fills (radial-gradient is
only the dot mask). Overlay is non-interactive and clipped to the box. */
.riso-screen{position:relative; overflow:hidden}
.riso-screen::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:radial-gradient(var(--primary) 1.1px, transparent 1.6px);
background-size:8px 8px; opacity:.16;
}
.riso-screen > *{position:relative; z-index:1}
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:.5em;
font-family:var(--body); font-weight:700;
font-size:1rem;
text-decoration:none;
border:var(--edge) solid var(--ink);
background:var(--ink); color:var(--paper);
padding:.72em 1.15em;
cursor:pointer;
box-shadow:var(--shadow-btn);
transition:transform .08s ease, box-shadow .08s ease;
letter-spacing:.01em;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--primary)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--primary)}
/* primary CTA: the LOUDEST pink object on the page — solid pink fill,
heavier weight/size + a bigger hard ink offset so it out-shouts the
decorative pink card/stamp shadows around it. */
.btn--primary{
background:var(--primary); color:var(--ink);
font-weight:800; font-size:1.06rem; letter-spacing:.005em;
padding:.82em 1.4em;
box-shadow:7px 7px 0 var(--ink);
}
.btn--primary:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink)}
.btn--primary:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink)}
/* small primary CTA keeps the pop but at nav scale */
.btn--primary.btn--sm{font-size:.9rem; padding:.58em 1em; box-shadow:5px 5px 0 var(--ink)}
/* secondary: ink outline, no fill */
.btn--secondary{background:transparent; color:var(--ink); box-shadow:none}
.btn--sm{font-size:.85rem; padding:.55em .85em; box-shadow:3px 3px 0 var(--primary)}
/* ---------- header ---------- */
header{
position:sticky; top:0; z-index:100;
border-bottom:var(--edge) solid var(--ink);
background:var(--paper); /* solid bone so content can't bleed through on scroll */
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem}
.brand{
font-family:var(--disp); font-weight:800; font-size:1.35rem;
letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:.4em;
}
.brand .dot{
width:1.32em; height:1.32em; flex:none; border-radius:22%;
background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23FAF9F7' transform='translate(512 512) scale(1.3) translate(-551.5 -503)' d='M893 202.5A198 198 0 0 0 596 374V400H210V522H336V830H470V522H596V830H730V522H893V400H730V374A64 64 0 0 1 826 318.6Z'/%3E%3C/svg%3E") center/100% no-repeat;
box-shadow:.09em .09em 0 var(--ink);
margin-right:.42em;
}
.nav-links{display:flex; gap:1.4rem; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{
text-decoration:none; font-weight:500; font-size:.95rem;
padding:.2em 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--primary)}
/* active-page marker — pink underline + a pink dot so the current page reads */
.nav-links a[aria-current="page"]{
font-weight:700; border-bottom-color:var(--primary);
}
.nav-links a[aria-current="page"]::after{
content:""; display:inline-block;
width:.34em; height:.34em; border-radius:50%;
background:var(--primary); margin-left:.4em; vertical-align:.12em;
}
/* nav CTA visibility: desktop shows the .nav-right button, hides the in-drawer one.
(Both are flipped at the ≤860px breakpoint below.) */
.nav-cta-mobile{display:none}
.nav-cta-desktop{display:inline-flex}
.nav-right{display:flex; align-items:center; gap:1rem}
.menu-btn{
display:none; background:var(--paper); border:var(--edge) solid var(--ink);
font-family:var(--body); font-weight:700; padding:.4em .7em; cursor:pointer;
}
/* ---------- eyebrow (inked poster label) ---------- */
.eyebrow{
display:inline-block;
font-weight:700; text-transform:uppercase; letter-spacing:.16em;
font-size:.74rem;
background:var(--ink); color:var(--paper);
padding:.4em .7em;
border:var(--edge) solid var(--ink);
box-shadow:3px 3px 0 var(--primary);
}
/* ---------- section frame ---------- */
section{padding:var(--section-y) 0; border-top:var(--edge) solid var(--ink)}
.sec-head{margin:0 0 var(--head-gap)}
.sec-kicker{
font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem;
color:var(--primary); margin:0 0 .6em;
}
.sec-title{
font-family:var(--disp); font-weight:800; letter-spacing:-.025em;
font-size:clamp(1.9rem,6vw,3.3rem); line-height:1; margin:0; max-width:14ch;
text-wrap:balance;
}
.sec-sub{max-width:56ch; margin:1em 0 0; font-size:clamp(1rem,2.2vw,1.14rem); color:var(--muted)}
/* ---------- dark (ink) section ---------- */
.section-dark{background:var(--ink); color:var(--paper); position:relative}
.section-dark::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(var(--paper) 0.7px, transparent 1px);
background-size:5px 5px; opacity:.14;
}
.section-dark .sec-kicker{color:var(--primary)}
.section-dark .sec-title{color:var(--paper)}
.section-dark .sec-sub{color:var(--paper); opacity:.82}
/* ---------- bordered card (pink offset shadow) ---------- */
.card{
border:var(--edge) solid var(--ink);
background:var(--paper);
padding:clamp(20px,2.6vw,30px);
box-shadow:var(--shadow-card);
min-width:0; /* never force a grid/flex track wider than the viewport */
}
/* ---------- riso feature stamps ---------- */
.stamps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,30px)}
.stamp{
border:var(--edge) solid var(--ink);
background:var(--paper);
padding:clamp(20px,2.6vw,30px);
position:relative;
box-shadow:var(--shadow-card);
min-width:0; /* never force a grid track wider than the viewport */
}
.stamp .num{
font-family:var(--disp); font-weight:800; font-size:2.4rem; line-height:1;
-webkit-text-stroke:2px var(--primary); color:transparent;
display:block; margin-bottom:.15em;
}
.stamp h3{
font-family:var(--disp); font-weight:700; letter-spacing:-.01em;
font-size:1.35rem; margin:.1em 0 .4em; line-height:1.05;
}
.stamp p{margin:0; font-size:1rem; color:var(--muted)}
/* ---------- riso seal (circular stamp; ONE uniform word inside the ring) ----------
Markup contract (unchanged): the wrappers around the first/last letters
are cosmetically inert — the label reads as a single uniform word.
FROM MEMORY
The label sits centered inside the circle, uppercase, and wraps cleanly at
the SPACE into a tidy two-line stack (FROM / MEMORY, IN / CONTEXT). Whole
words never split (word-break:keep-all), so there are no stray letters. */
.seal{
position:relative;
font-family:var(--disp); font-weight:700; font-size:.58rem; letter-spacing:.02em;
text-transform:uppercase;
border:2px solid var(--primary); color:var(--primary); border-radius:50%;
width:60px; height:60px;
display:flex; align-items:center; justify-content:center; text-align:center;
transform:rotate(-9deg);
line-height:1.15;
padding:0 .6em;
word-break:keep-all; overflow-wrap:normal; hyphens:none;
}
/* the edge-letters render identically to the rest of the word */
.seal i{ font-style:normal; font-weight:inherit; color:inherit; }
/* placement of the seal inside a feature stamp (visual owned by .seal above) */
.stamp .seal{
position:absolute; top:14px; right:14px;
}
/* ---------- tag (inline riso label) ---------- */
.tag{
font-family:var(--disp); font-weight:800; font-size:.72rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--ink); background:var(--primary);
display:inline-block; padding:.3em .6em; margin-bottom:.6em;
}
/* ---------- waitlist / email form (dark section) ---------- */
.waitlist{background:var(--ink); color:var(--paper); border-top:var(--edge) solid var(--ink); position:relative}
.waitlist::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(var(--paper) 0.7px, transparent 1px);
background-size:5px 5px; opacity:.13;
}
.waitlist .sec-kicker{color:var(--primary)}
.waitlist .sec-title{color:var(--paper); max-width:18ch}
.wl-form{
margin-top:clamp(22px,3vw,32px); max-width:620px;
display:grid; gap:14px;
}
.wl-form label{font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:.3em; color:var(--paper)}
.wl-form input, .wl-form select{
width:100%; font-family:var(--body); font-size:1.05rem;
padding:.8em .9em; border:var(--edge) solid var(--paper); background:var(--paper); color:var(--ink);
-webkit-appearance:none; appearance:none;
}
.wl-form .row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
.wl-note{font-size:.95rem; margin:.4em 0 0; font-weight:500; color:var(--paper); opacity:.85}
.wl-actions{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:.4em}
.wl-secondary{text-decoration:none; font-weight:700; color:var(--paper); border-bottom:3px solid var(--primary); padding-bottom:1px}
/* ---------- footer ---------- */
footer.foot{background:var(--ink); color:var(--paper); border-top:var(--edge) solid var(--paper); padding:36px 0}
.foot-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center}
.foot .brand{color:var(--paper)}
.foot small{opacity:.7; font-size:.85rem}
/* ---------- responsive (shared) ---------- */
@media (max-width:860px){
.nav-links{
display:none; position:absolute; left:0; right:0; top:64px;
flex-direction:column; align-items:flex-start; gap:0;
background:var(--paper); border-bottom:var(--edge) solid var(--ink); padding:.5rem 0; z-index:20;
}
.nav-links.open{display:flex}
.nav-links li{width:100%; border-top:2px solid rgba(28,25,23,.12)}
.nav-links a{display:block; padding:.9em var(--wrap-pad); width:100%}
.menu-btn{display:inline-block}
/* flip nav CTAs: desktop button hides, launch-note CTA rides in the drawer */
.nav-cta-desktop{display:none}
.nav-cta-mobile{display:block}
.nav-cta-mobile a{
display:inline-flex; width:auto;
margin:.7em var(--wrap-pad); padding:.6em 1em;
}
.stamps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.wl-form .row2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
*{animation:none !important; transition:none !important}
}