/* Good Time To Go — the one stylesheet. Every colour is a token; every token is contrast-measured. Zero hex literals in components (§15 of the pack). */ @font-face{ font-family:'Fraunces'; src:url('/fonts/fraunces-latin.woff2') format('woff2-variations'); font-weight:600 800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; } :root{ /* Native widget chrome — select popups, date pickers, checkboxes, scrollbars, autofill — is drawn by the BROWSER, not this stylesheet. color-scheme is how the page tells it which way to draw them; without it, dark mode gets a browser-default popup with the page's light text painted into it, which is the illegible dropdown Philip photographed on /countries. Mirrored in all three theme blocks exactly like the variables. */ color-scheme:light; --brand:#0FA3A3; --brand-ink:#0A6B6B; --brand-deep:#075252; --accent:#F0A202; --accent-ink:#8F5A00; /* ── THE GROUND, and it is the bigger half of "boring in light mode" ────── 18 Aug 2026, with Claude Design. I had diagnosed the map's dark fills. The other half, and the larger one: PURE WHITE IS THE ENEMY. On white a fill has to go dark to be seen at all, and dark is where chroma dies. Off white, the same fill can sit at mid-lightness where chroma actually lives - so the ground has to move before the fills can. The old --surf #F4F7F7 failed for two reasons: it was 1% off white, so it was not a real step, and it was COOL. A surface has to be a real step and a warm one. Warm paper is also half of "travel-inspired", which is substantially a warm feeling rather than a subject. */ --ink:#14201F; --muted:#5A6B6B; --bg:#FAF8F4; --surf:#F1EDE4; --line:#6E8686; --line-soft:#E2DDD3; --good:#1D6639; --good-bg:#DCF2E4; --cheap:#8F5A00; --cheap-bg:#FCEFCE; --avoid:#A6321F; --avoid-bg:#FAE3DE; /* AREA FILLS, a different job from the three above - 18 Aug 2026. Philip: "especially when I open it and I look at it in LIGHT MODE. It's just so boring." The diagnosis: --good/--cheap/--avoid were chosen to pass 4.5:1 as TEXT, then used to fill whole COUNTRIES on the world map. A country is not text. Dark forest, brown and brick across a white map is exactly the drab it looked. Dark mode never had the problem because its three are already vivid, which is why the same map looks alive there. Splitting them is safe HERE AND NOWHERE ELSE, because the site's standing rule is that COLOUR NEVER CARRIES MEANING ALONE - every state also has a glyph and words - so a fill owes legibility, not text contrast. Text keeps --good/--cheap/--avoid. */ /* TEAL IS PROMOTED: it stops being decoration and becomes the "good" state. The identity colour and the primary data state are the same thing - which is the name of the site. Amber becomes a data hue (the cheap sweet spot), which is why it can no longer also be the button. */ /* The FINAL set from the handoff, not the first proposal. Claude Design recomputed these against both the paper AND the land tone so every fill clears 3:1 as a graphical object (WCAG 1.4.11) on either ground - the first set cleared paper and not land. Deliberately NOT recording the ratios here: it published them as literal text on its own handoff frame and every palette change silently invalidated them. A number in a comment rots. Recompute from the hexes if you need it. */ /* cheap-fill recomputed 18 Aug 2026 (BRAND-PACKAGE.md): hue 38->42, saturation to 100% - as golden as the contrast guard allows. 3.70:1 on paper, 3.04:1 on land, both verified independently twice. Lightness had no headroom. */ --good-fill:#0B8C8C; --cheap-fill:#AA7700; --avoid-fill:#C4441F; --land-fill:#E7E2D6; --sp-xs:16px; --sp-sm:28px; --sp-md:52px; --sp-lg:88px; --r-chip:8px; --r-btn:10px; --r-card:14px; --display:'Fraunces',Georgia,'Times New Roman',serif; --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ink:#E6EDED; --muted:#9BB0B0; --bg:#0E1414; --surf:#151E1E; --line:#5F7878; --brand-deep:#125A5A; --line-soft:#2A3838; --brand-ink:#0FA3A3; --accent-ink:#F0A202; --good:#4ADE80; --good-bg:#12301F; --cheap:#FBBF24; --cheap-bg:#332608; --avoid:#F87171; --avoid-bg:#3A1512; --good-fill:#2BD4D4; --cheap-fill:#FBBF24; --avoid-fill:#FF7A5C; --land-fill:#17403F; } } [data-theme="dark"]{ color-scheme:dark; --ink:#E6EDED; --muted:#9BB0B0; --bg:#0E1414; --surf:#151E1E; --line:#5F7878; --brand-deep:#125A5A; --line-soft:#2A3838; --brand-ink:#0FA3A3; --accent-ink:#F0A202; --good:#4ADE80; --good-bg:#12301F; --cheap:#FBBF24; --cheap-bg:#332608; --avoid:#F87171; --avoid-bg:#3A1512; --good-fill:#2BD4D4; --cheap-fill:#FBBF24; --avoid-fill:#FF7A5C; --land-fill:#17403F; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:opacity .01ms!important} } body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--body); -webkit-font-smoothing:antialiased} .wrap{max-width:1120px;margin:0 auto;padding:0 20px} a{color:var(--brand-ink)} :focus-visible{outline:2px solid var(--line);outline-offset:2px;border-radius:4px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- header ---------- */ header.site{position:sticky;top:0;background:var(--bg);z-index:30; border-bottom:1px solid transparent;transition:border-color .2s} header.site.stuck{border-bottom-color:var(--line)} .bar{display:flex;align-items:center;gap:14px;min-height:64px} .lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto} .lockup svg{flex:0 0 auto} .lockstack{display:flex;flex-direction:column;gap:1px} /* THE tagline (BRAND-PACKAGE.md): permanent brand furniture beside the wordmark. Never a page H1, never a campaign headline. Hidden on narrow navs - the wordmark carries the nav alone below ~600px. */ .lockup .tagline{font-size:10.5px;color:var(--muted);letter-spacing:.01em;white-space:nowrap} @media (max-width:600px){ .lockup .tagline{display:none} } .name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em; color:var(--brand-ink);white-space:nowrap} nav.main{display:flex;gap:4px;align-items:center} nav.main a{color:var(--ink);text-decoration:none;font-weight:650;font-size:14.5px; padding:9px 11px;border-radius:var(--r-chip)} nav.main a:hover{background:var(--surf)} nav.main a[aria-current="page"]{color:var(--brand-ink);background:var(--surf)} .themebtn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--r-btn); width:40px;height:40px;cursor:pointer;display:grid;place-items:center;font-size:16px;flex:0 0 auto} /* ---------- the menu on small screens ---------- MEASURED, 9 Aug 2026, not guessed: the six links need 365px, and the bar has 218px at 320px wide rising to 378px at 480px. So "Method" and the whole light/dark button were pushed off the right of every phone screen, and at 600px it was worse still because the wordmark reappears at 561px and takes the room back. Below 700px the links now live behind a button. A real