/* TuckJoy site design system: every static page (web/site/) loads this first.

   Ported from the approved home-page mockup (design/flow-mockup/tokens.css, Anurag
   2026-09-23). The tokens and base below are that file as it stands, with the font paths
   pointed at /fonts/; the shell (launch strip, header, footer) and the shared controls
   follow. The signed-in app (/app/) still uses site.css until it is redesigned. */

/* Both faces are OFL; the licences sit beside the files in /fonts/.
   Variable fonts, so one file covers 400–700 and there is no bold to load. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/instrument-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/instrument-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* paper and ink. The paper is "Storybook Paper" (Anurag 2026-09-23): warm ivory,
     a fine grain instead of the old dot grid, and soft colour blooms on the pages
     that are selling something. */
  --paper: #FBF8F1;
  --surface: #FFFFFF;
  --sunk: #F4EFE5;
  --ink: #1C2426;
  --muted: #5F6B6D;
  --faint: #8E9A9B;
  --line: #E3DCD0;
  --line-strong: #D9D1C4;
  --rule: #EFE9DE;

  /* the accent. One variable: the artboards ship four options and render two
     different ones, so this is the single place that decision lives. */
  --accent: #2E7D73;       /* white on it 4.89:1, as link text on paper 4.61:1 */
  --accent-dark: #22625A;
  --accent-tint: #E4F0EC;  /* = the mint bloom */
  --accent-pale: #F2F8F5;
  --accent-lift: #9FCFC4;
  --on-accent: #FFFFFF;
  --ring: 0 0 0 4px rgba(46, 125, 115, .14);

  /* The blooms. Ink reads on every one of them (12.9:1 and up), so words may sit on
     a bloom — but they are washes behind a page, never the fill of a control. */
  --bloom-peach: #F8E4D8;
  --bloom-mint: #E4F0EC;
  --bloom-cream: #F4E8D7;
  /* The one warm spark: stars, a hand-drawn arrow. 1.9:1 on paper, so it is
     decoration only and never carries a word. */
  --spark: #F4A45D;
  /* Paper grain: dark specks at a whisper. Dark mode swaps the colour, not the idea. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  /* Where artwork is being judged, the ground is neutral: a tinted surround shifts
     how you see the picture's own colours, and a picture misjudged is a credit
     spent on a redraw it did not need. */
  --artwell: #FFFFFF;
  --artwell-line: #E6E6E6;

  /* the supporting four. Illustration tints and status colours only — never
     structural, so the page never has to decide what five colours mean at once. */
  --orange: #E86F46; --orange-dark: #C9563A; --orange-tint: #FCE8DF;
  --gold: #E3B04B;   --gold-ink: #B8860B;    --gold-tint: #F3E9D8;
  --blue: #2F6BB0;                            --blue-tint: #E3EEF5;
  --purple: #7A4FB5; --purple-dark: #5B3A8A;  --purple-tint: #EDE7F3;
  --warn: #B4552E;   --warn-soft: #FCE8DF;
  --deep: #143F39;

  /* A dark decorative panel, which is NOT the same thing as the text colour. Using
     --ink as a background made the launch strip invert and the closing band render
     near-white text on near-white — it has to stay dark in both themes. */
  --slab: #1C2426;
  --on-slab: #F6F1E8;

  /* the wordmark's two themed colours, taken from brand/logo.svg and logo-dark.svg */
  --logo-ink: #0E2951;
  --logo-star: #FFFFFF;
  /* The one navy. Storybook Paper proposed #1F2A44 and GPT later #162A44; beside
     the wordmark either would read as a second, slightly-wrong navy. */
  --navy: #0E2951;
  --hand: "Bradley Hand", "Noteworthy", "Chalkboard SE", cursive;

  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --r-rail: 20px; --r-card: 16px; --r-control: 12px; --r-small: 9px; --r-pill: 999px;
  --shadow-rest: 0 1px 2px rgba(28, 36, 38, .04);
  --shadow-rail: 0 16px 40px rgba(28, 36, 38, .07);
  --shadow-book: 0 10px 24px rgba(28, 36, 38, .16);

  /* names the older screens still ask for, so they inherit the new palette
     rather than sitting in the old one until Phase 2 rebuilds them */
  --bg: var(--paper);
  --accent-soft: var(--accent-tint);
  --radius: var(--r-control);

  color-scheme: light;
}

/* The artboards have no dark mode — a warm-paper design does not invert by flipping
   tokens. This is a real palette rather than an inversion: the paper becomes a warm
   dark, the illustration panels keep their own colours because they are artwork. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171614; --surface: #201F1C; --sunk: #272521;
    --ink: #ECE6DB; --muted: #9FAAAB; --faint: #7A8586;
    --line: #34312C; --line-strong: #423E38; --rule: #2A2824;
    --accent: #5FBFAE; --accent-dark: #8FD3C4;
    --accent-tint: #17302C; --accent-pale: #162926; --on-accent: #10201F;
    --bloom-peach: transparent; --bloom-mint: transparent; --bloom-cream: transparent;
    --spark: #E8A060; --navy: #FFFFFF;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
    --artwell: #1E1E1E; --artwell-line: #333333;
    --ring: 0 0 0 4px rgba(95, 191, 174, .18);
    --warn: #E0916B; --warn-soft: #2E2019;
    /* The four extra hues had no dark values, so anything that filled a shape with
       one of their tints stayed daylight-bright on a dark page. Used by the cast
       tints and the home page's step dots. */
    --orange: #F0906B; --orange-tint: #33211A;
    --blue: #6FA3D8;   --blue-tint: #1A2733;
    --purple: #A98AD6; --purple-tint: #241E33;
    --gold: #E3B04B;   --gold-ink: #D9AE5A; --gold-tint: #322A1A;
    --logo-ink: #FFFFFF; --logo-star: #0B1B38;
    --slab: #242C2E;
    --shadow-rail: 0 16px 40px rgba(0, 0, 0, .40);
    --shadow-book: 0 10px 24px rgba(0, 0, 0, .50);
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, .30);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171614; --surface: #201F1C; --sunk: #272521;
  --ink: #ECE6DB; --muted: #9FAAAB; --faint: #7A8586;
  --line: #34312C; --line-strong: #423E38; --rule: #2A2824;
  --accent: #5FBFAE; --accent-dark: #8FD3C4;
  --accent-tint: #17302C; --accent-pale: #162926; --on-accent: #10201F;
    --bloom-peach: transparent; --bloom-mint: transparent; --bloom-cream: transparent;
    --spark: #E8A060; --navy: #FFFFFF;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
    --artwell: #1E1E1E; --artwell-line: #333333;
  --ring: 0 0 0 4px rgba(95, 191, 174, .18);
  --warn: #E0916B; --warn-soft: #2E2019;
  /* The four extra hues had no dark values, so anything that filled a shape with
     one of their tints stayed daylight-bright on a dark page. Used by the cast
     tints and the home page's step dots. */
  --orange: #F0906B; --orange-tint: #33211A;
  --blue: #6FA3D8;   --blue-tint: #1A2733;
  --purple: #A98AD6; --purple-tint: #241E33;
  --gold: #E3B04B;   --gold-ink: #D9AE5A; --gold-tint: #322A1A;
  --logo-ink: #FFFFFF; --logo-star: #0B1B38;
  --slab: #242C2E;
  --shadow-rail: 0 16px 40px rgba(0, 0, 0, .40);
  --shadow-book: 0 10px 24px rgba(0, 0, 0, .50);
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .30);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  background-color: var(--paper);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
}

/* The blooms sit on a fixed layer behind everything, so they stay put while the
   page scrolls — the paper moves under you, the light does not. How much of them a
   page gets is set per screen (draw() in app.js): full where we are selling, a
   trace once you are working, none where you are judging pictures. Dark mode has
   none at all: a watercolour wash on a dark page reads as a stain. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 30vw at 94% 8%, var(--bloom-peach), transparent 70%),
    radial-gradient(34vw 30vw at 2% 96%, var(--bloom-mint), transparent 70%),
    radial-gradient(30vw 26vw at 70% 104%, var(--bloom-cream), transparent 70%),
    radial-gradient(26vw 22vw at -4% 20%, var(--bloom-cream), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
body[data-bloom="full"]::before { opacity: 1; }
body[data-bloom="light"]::before { opacity: .45; }

h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
button, select, input, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* The header is sticky, so an in-page link (/#how) would land its heading under it. */
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; padding: 8px 12px; background: var(--surface); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- shell ---------------- */

/* The launch strip lives above the sticky header, so it scrolls away with the page. */
.strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 8px 16px; background: var(--slab); color: var(--on-slab);
  font-size: 13px; font-weight: 500; text-align: center; flex-wrap: wrap;
}
.strip .pip { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--orange); flex-shrink: 0; }
.strip a { color: var(--on-slab); font-weight: 600; text-underline-offset: 3px; }

.topbar {
  height: 72px; display: flex; align-items: center; gap: 24px;
  padding: 0 48px; border-bottom: 1px solid var(--line);
  /* frosted, so the paper and its blooms carry on under the bar rather than stopping at it */
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}

/* The shipped wordmark, drawn inline with its two themed colours as variables, so "tuck"
   is white in dark mode exactly as brand/logo-dark.svg draws it. */
.brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand .logomark { display: block; height: 34px; width: auto; }

.sitenav {
  display: flex; align-items: center; gap: 32px; margin: 0 auto;
  font-size: 15px; font-weight: 500; min-width: 0;
}
.sitenav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.sitenav a:hover { color: var(--accent); }

/* The header's invitation. Not .btn.primary: it belongs to a menu bar, so it is shorter
   than the buttons that end a page. */
.topbar .go {
  display: flex; align-items: center; height: 44px; padding: 0 20px; flex-shrink: 0;
  border-radius: var(--r-control); background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.topbar .go:hover { background: var(--accent-dark); color: var(--on-accent); }

@media (max-width: 1440px) { .topbar { padding: 0 28px; } }
@media (max-width: 1100px) {
  .topbar { padding: 0 20px; gap: 14px; }
  .sitenav { gap: 20px; font-size: 14px; }
}
/* On a phone the section menu will not fit beside the wordmark and the invitation, and a
   menu that runs off the edge behind a button is worse than no menu. The footer carries
   every link, so the header keeps the two things that matter: who this is, and the way in. */
@media (max-width: 860px) {
  .sitenav { display: none; }
  .topbar .go { margin-left: auto; }
}
@media (max-width: 720px) {
  .topbar { height: 60px; padding: 0 12px; gap: 10px; }
}

/* ---------------- primitives ---------------- */

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-control);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 14px/1 var(--body); cursor: pointer; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--muted); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 16px; height: 54px; padding: 0 22px; border-radius: 14px;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
/* The quiet partner of a primary button: same size, so the pair sits level. */
.btn.large { height: 54px; padding: 0 22px; border-radius: 14px; font-size: 16px; font-weight: 600; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; border: 1px solid var(--line);
  background: var(--accent-tint); color: var(--accent-dark);
}
.tag.warn { background: var(--warn-soft); color: var(--warn); }

.note { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------------- footer ---------------- */

.sitefoot { padding: 56px 0 40px; border-top: 1px solid var(--line); }
.sitefoot > .inner { width: min(1200px, 100% - 96px); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.sitefoot .top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.sitefoot .about { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.sitefoot .about .logomark { height: 30px; width: auto; align-self: flex-start; }
.sitefoot .cols { display: flex; gap: 80px; flex-wrap: wrap; }
.sitefoot .cols > nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sitefoot .cols h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.sitefoot .cols a { color: var(--muted); text-decoration: none; }
.sitefoot .cols a:hover { color: var(--ink); }
.sitefoot .legal {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
@media (max-width: 1080px) { .sitefoot > .inner { width: calc(100% - 56px); } }
@media (max-width: 760px) {
  .sitefoot > .inner { width: calc(100% - 32px); }
  .sitefoot .cols { gap: 36px; }
}