/* ============================================================================ josephlouis.sg — shared foundation ---------------------------------------------------------------------------- Tokens, base, grid, chrome. Every page links this, then adds only the rules for components that page alone owns. This is not a build step. It is one plain stylesheet, cached across the site. It exists because nine pages were each carrying their own copy of the same 200 lines, and the copies had already drifted apart once. Canonical reference: design.md at the repo root. Amend that file whenever you amend this one. ========================================================================= */ @font-face{font-family:"Newsreader";src:url("/assets/newsreader-normal.woff2") format("woff2"); font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"Newsreader";src:url("/assets/newsreader-italic.woff2") format("woff2"); font-weight:300 700;font-style:italic;font-display:swap} :root{ /* ground */ --oat:#f3efe8; --paper:#fbf8f1; --white:#fdfbf6; /* ink */ --ink:#2a2720; --body:#4a463c; --navy:#22314a; --deep:#16233a; --navy-btn:#1f3a5f; /* accent · --tan draws rules, --tan-ink sets tan TEXT. Never swap them. */ --tan:#8d7f5e; --tan-ink:#75694e; --muted:#6a665c; --hair:#e6e0d0; --hair2:#e0d9c6; /* the two marks, and the only two non-palette colours on the site */ --yes:#4e6b43; --no:#96503f; --pad:clamp(20px,5vw,48px); --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* TYPE · 7 steps and a display tier. Nothing in between these values. */ --t-cap:12px; /* sans, uppercase rails and labels */ --t-sm:14px; /* sans, captions, footnotes */ --t-body:17px; /* serif body */ --t-lead:21px; /* the one sentence that matters */ --t-h2:clamp(27px,3.3vw,40px); --t-h1:clamp(38px,6.1vw,78px); --t-num:clamp(52px,7.4vw,92px); /* LEADING · two body values and a display value. That is all. */ --lh-body:1.68; --lh-lead:1.45; --lh-display:0.98; --radius-control:2px; --radius-card:8px; } *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} html,body{overflow-x:clip} body{background:var(--oat);color:var(--ink);font-family:var(--serif);font-optical-sizing:auto; font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--navy)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:2px solid var(--navy-btn);outline-offset:3px} /* ── measure ─────────────────────────────────────────────────────────── */ .shell{max-width:1140px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .shell.narrow{max-width:760px} /* ── the grid · label in the left rail, content in 4-12 ──────────────── */ .g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,34px)} .rail{grid-column:1/4} .main{grid-column:4/13} .mid{grid-column:4/11} @media (max-width:880px){ .rail{grid-column:1/-1;margin-bottom:20px} .main,.mid{grid-column:1/-1} } .lab,.eyebrow{font-family:var(--sans);font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase; color:var(--tan-ink);font-weight:600;line-height:1.5} .rail .lab{position:sticky;top:26px} @media (max-width:880px){.rail .lab{position:static}} /* ── rhythm ──────────────────────────────────────────────────────────── */ section{border-top:1px solid var(--hair)} .inner{padding-top:clamp(56px,8.5vw,120px);padding-bottom:clamp(56px,8.5vw,120px)} /* ── type ────────────────────────────────────────────────────────────── */ h1{font-size:clamp(33px,4.4vw,54px);line-height:1.06;font-weight:300;color:var(--deep); letter-spacing:-.028em;text-wrap:balance} /* the display tier · opt in, for a page whose headline IS the page */ h1.display{font-size:var(--t-h1);line-height:var(--lh-display);letter-spacing:-.035em} h2{font-size:var(--t-h2);line-height:1.12;font-weight:400;color:var(--navy); letter-spacing:-.021em;max-width:20ch;text-wrap:balance;margin-bottom:22px} h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25} p{color:var(--body);max-width:60ch;text-wrap:pretty} .lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink);max-width:46ch; letter-spacing:-.008em;text-wrap:pretty} .sm{font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--muted)} strong,b{font-weight:600} /* ── buttons · serif at reading size, per design.md 27 Sep ───────────── */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:16.5px; font-weight:500;background:var(--deep);color:#f4f0e6;padding:14px 28px; border-radius:var(--radius-control);text-decoration:none;white-space:nowrap} .ghost,.btn-ghost{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:16.5px; font-weight:500;color:var(--navy);border:1px solid var(--navy);padding:13px 26px; border-radius:var(--radius-control);text-decoration:none;background:transparent} /* UNSCOPED ON PURPOSE. A .wa with no width fills its container: it once rendered 1,000px tall on /second-opinion. Never scope this rule. */ svg.wa{width:18px;height:18px;fill:#25D366;flex:0 0 auto} .acts{display:flex;gap:13px;flex-wrap:wrap;align-items:center} @media (prefers-reduced-motion:no-preference){ .btn{transition:transform .15s ease,opacity .15s ease} .btn .arr{transition:transform .18s ease} .btn:hover{transform:translateY(-1px);opacity:.93} .btn:hover .arr{transform:translateX(3px)} .ghost,.btn-ghost{transition:background .15s ease,color .15s ease} .ghost:hover,.btn-ghost:hover{background:var(--navy);color:#f4f0e6} .ghost:hover .wa,.btn-ghost:hover .wa{fill:#f4f0e6} } /* ── the two marks ───────────────────────────────────────────────────── */ .mk{width:15px;height:15px;margin-top:4px;flex:0 0 auto} .mk.yes{color:var(--yes)} .mk.no{color:var(--no)} /* ── SITE CHROME · BEGIN ────────────────────────────────────────────── Nav and footer. A page that replaces its own