/* Tsundoku landing — from flutter_handover_2026-09-20/Tsundoku Landing.dc.html
   and tokens.css. Marketing is loud: 3px ink outlines and the landing-only
   offset shadows (decision 23). */
:root {
  --ground: #FDF3E7; --ground-tint: #F7E7D2; --surface: #FFFFFF; --sunk: #F2E6D6;
  --ink: #141414; --body: #4A4238; --muted: #6E6155; --line: #EDE0CE; --dot-idle: #E0CFB8;
  --yellow: #FFD43B; --yellow-hover: #F5C525; --orange: #F28C0F; --orange-text: #8A5208;
  --purple: #C9A7F5; --on-ink: #E5DFCF; --ink-hover: #2A2622;
  --error-bg: #FBE9E5; --error-line: #E7C4BC; --error-fg: #8F2716;
  --shadow-ink: 5px 5px 0 var(--ink); --shadow-card: 6px 6px 0 var(--ink);
  --shadow-modal: 10px 10px 0 var(--purple);
  --shadow-orange: 8px 8px 0 var(--orange); --shadow-yellow: 6px 6px 0 var(--yellow);
  --shadow-purple: 6px 6px 0 var(--purple);
  --display: 'Dela Gothic One', sans-serif; --text: 'Outfit', system-ui, sans-serif;
  --pad-x: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange-text); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
*:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.page { background: var(--ground); color: var(--ink); min-height: 100vh; overflow-x: hidden; }

/* Banner */
.banner { background: var(--ink); color: var(--ground); padding: 12px 24px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.banner-pill { background: var(--yellow); color: var(--ink); font-family: var(--display); font-size: 11px; padding: 4px 11px; border-radius: 999px; letter-spacing: 0.08em; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: var(--ground); border-bottom: 3px solid var(--ink); padding: 14px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* The logo is the masthead (3 Oct 2026): mascot and wordmark, both
   fluid, nothing else. Acceptance check 9 — it appears exactly once,
   and the hero carries no second logo or wordmark. */
.brand { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.brand-mark { width: clamp(84px, 9vw, 128px); height: auto; display: block; }
.brand-word { font-family: var(--display); font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.nav-signin { font: inherit; font-weight: 600; background: none; border: none; padding: 8px 4px; cursor: pointer; color: var(--ink); border-bottom: 3px solid var(--orange); }
.nav-signin:hover { color: var(--orange-text); border-color: var(--orange-text); }

/* Hero (patch v2, 2026-10-03). One centred column, not two.
   v1 put the copy beside a card; in production the two columns came out
   different heights and left a gap around "See how it works". A single column
   cannot do that.

   The section is a container so the headline can size against its own width
   rather than the viewport's — that is what keeps line 1 on one line down to a
   390px phone without wrapping. */
.hero { position: relative; container-type: inline-size; border-bottom: 3px solid var(--ink); overflow: hidden; }
.hero-copy { padding: clamp(48px, 8cqw, 104px) clamp(16px, 4cqw, 56px) 0; display: flex; flex-direction: column;
             align-items: center; gap: clamp(18px, 2cqw, 24px); text-align: center; }
.hero-tag { background: var(--purple); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 16px;
            font-size: clamp(11px, 1cqw, 13px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* nowrap is the point: "Photograph your shelf." must never break, which is why
   the size is a container query unit and not a viewport one. */
.hero h1 { font-family: var(--display); font-weight: 400; font-size: min(88px, 6.8cqw); line-height: 1.15;
           letter-spacing: -0.02em; white-space: nowrap; }
/* 0.32em of top margin so the highlight clears the descenders on the line above. */
.hero-mark { display: inline-block; white-space: nowrap; background: var(--yellow); padding: 0.06em 0.14em 0.2em;
             margin: 0.32em 0 0 0; border-radius: 16px; line-height: 1; }
.hero-copy p { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.6; max-width: 52ch; color: var(--body); text-wrap: pretty; }
.hero-link { font-weight: 600; font-size: 17px; padding: 10px 8px; border-bottom: 3px solid var(--ink); }

/* The shelf: sixteen spines with the cat asleep in the middle, standing on the
   section's bottom edge. Drawn, not photographed — the pictures this replaces
   went out of date within a fortnight of being taken.

   Spines keep their drawn sizes at every width and the row clips at both edges
   rather than wrapping or shrinking, so the shelf always reads as continuing
   past the screen. */
.shelf-row { margin-top: clamp(40px, 5cqw, 64px); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.spine { flex: none; box-sizing: border-box; margin-right: -3px; border: 3px solid var(--ink); border-bottom: none;
         border-radius: 5px 5px 0 0; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center;
         font-family: 'Special Elite', monospace; font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; }
/* Regular weight only — faux bold ruins the worn look of this face. */
.spine-cream  { background: var(--sunk); color: var(--ink); }
.spine-white  { background: var(--surface); color: var(--ink); }
.spine-orange { background: var(--orange); color: var(--ink); }
.spine-yellow { background: var(--yellow); color: var(--ink); }
.spine-lilac  { background: var(--purple); color: var(--ink); }
.spine-ink    { background: var(--ink); color: var(--ground); }
.shelf-cat { flex: none; width: clamp(120px, 14cqw, 180px); height: auto; display: block; margin: 0 10px 0 13px; }
/* The shelf itself, and the hero's bottom edge. */
.shelf-bar { height: 14px; background: var(--ink); }

.slot { border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--sunk); }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phone screenshots are taller than their slots: keep the top of the screen in view, crop the bottom. */
.inside-grid .slot img { object-position: top; }

/* Sections */
.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
.section-head h2, .features h2, .faq h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; }
.section-head p { font-size: 17px; max-width: 40ch; }

.how { padding: clamp(48px, 6vw, 88px) var(--pad-x); background: var(--orange); border-bottom: 3px solid var(--ink); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.how-card { border: 3px solid var(--ink); border-radius: 24px; background: var(--ground); padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
.how-num { width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 999px; display: grid; place-items: center; font-family: var(--display); font-size: 20px; }
.num-yellow { background: var(--yellow); } .num-purple { background: var(--purple); } .num-ground { background: var(--ground); }
.how-card h3 { font-family: var(--display); font-weight: 400; font-size: 23px; }
.how-card p { font-size: 16px; line-height: 1.6; color: var(--body); }

.features { padding: clamp(48px, 6vw, 88px) var(--pad-x); background: var(--ink); color: var(--ground); border-bottom: 3px solid var(--ink); }
.features h2 { margin-bottom: clamp(24px, 3vw, 44px); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.feature { border: 3px solid var(--ground); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.feature-eyebrow { font-family: var(--display); font-size: 14px; letter-spacing: 0.08em; }
.eyebrow-yellow { color: var(--yellow); } .eyebrow-purple { color: var(--purple); }
.feature h3 { font-size: 21px; font-weight: 600; }
.feature p { font-size: 16px; line-height: 1.6; color: var(--on-ink); }

.inside { padding: clamp(48px, 6vw, 88px) var(--pad-x); border-bottom: 3px solid var(--ink); }
.inside .section-head p { color: var(--body); }
.inside-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.inside-grid .slot { border-radius: 24px; aspect-ratio: 9 / 16; }
.slot-s1 { box-shadow: var(--shadow-purple); } .slot-s2 { box-shadow: var(--shadow-yellow); }
.slot-s3 { box-shadow: 6px 6px 0 var(--orange); } .slot-s4 { box-shadow: var(--shadow-card); }

.why { padding: clamp(48px, 6vw, 88px) var(--pad-x); background: var(--purple); border-bottom: 3px solid var(--ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
/* The section ground is lilac, and the cat is lilac — on it the cat
   disappears. The handover is explicit: on lilac it goes on an apricot
   card with an ink border. That is what this card is for. */
.why-mark { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vw, 24px);
            background: var(--ground); border: 3px solid var(--ink); border-radius: 28px;
            box-shadow: 8px 8px 0 var(--ink); padding: clamp(20px, 3vw, 36px); }
.why-cat { width: clamp(180px, 24vw, 320px); max-width: 100%; height: auto; display: block; }
.why-kanji { font-family: var(--display); font-size: clamp(56px, 9vw, 130px); line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); }
.why-copy { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; }
.why-copy h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.why-copy p { font-size: 18px; line-height: 1.65; }

.faq { padding: clamp(48px, 6vw, 88px) var(--pad-x); border-bottom: 3px solid var(--ink); }
.faq h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq details { border: 3px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 18px 24px; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 19px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { font-family: var(--display); font-size: 22px; transition: transform 0.15s; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--body); }

/* Closing band (designer's list 2026-09-21, item 6): headline only, no button — decision 11 revisited. */
.closing { padding: clamp(48px, 6vw, 88px) var(--pad-x); background: var(--yellow); border-bottom: 3px solid var(--ink); }
.closing h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5.2vw, 68px); line-height: 1.02; max-width: 20ch; }

/* Store buttons, greyed out (web test cycle 1, added 3 Oct 2026). Plain
   buttons, not the official badges: both stores' guidelines forbid the badge
   until a public listing exists. At launch these are replaced by the real
   badges and the note below them goes. */
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.store { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px;
         background: var(--ink); color: var(--ground); border: 3px solid var(--ink); border-radius: 16px;
         opacity: 0.45; cursor: not-allowed; }
.store-copy { display: flex; flex-direction: column; line-height: 1.1; }
.store-copy small { font-size: 12px; font-weight: 500; }
.store-copy strong { font-size: 19px; font-weight: 600; }
.stores-note { margin-top: 14px; font-size: 15px; font-weight: 500; }
.footer { padding: clamp(36px, 5vw, 64px) var(--pad-x); background: var(--purple); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.footer-lockup { display: flex; align-items: center; gap: 14px; }
.footer-chip { flex: none; width: 64px; height: 64px; display: grid; place-items: center;
               background: var(--ground); border: 3px solid var(--ink); border-radius: 16px; }
.footer-chip img { width: 52px; height: auto; display: block; }
.footer-logo { font-family: var(--display); font-size: 20px; }
.footer-brand p { font-size: 15px; line-height: 1.65; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-eyebrow { font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 999px; background: var(--ground); display: grid; place-items: center; }
.footer-social a:hover { background: var(--yellow); }
.footer-social img { width: 20px; height: 20px; display: block; }
.footer-legal { grid-column: 1 / -1; border-top: 3px solid var(--ink); padding-top: 18px; font-size: 14px; }

/* Sign-in modal */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 20, 0.45); display: grid; place-items: center; padding: 20px; overflow: auto; }
.scrim[hidden] { display: none; }
.modal { width: min(100%, 490px); /* drawn as content-box 420px + 32px padding + 3px border */ background: var(--ground); border: 3px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow-modal); padding: clamp(22px, 4vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-face { flex: none; width: 52px; height: 52px; display: block; }
.modal-head h3 { flex: 1; }
.modal h3 { font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.1; }
.modal-close { font: inherit; font-size: 20px; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 999px; background: var(--ground); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.modal-close:hover { background: var(--orange); }
.modal form { display: flex; flex-direction: column; gap: 16px; }
.modal label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.modal input { font: inherit; font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 13px 16px; border: 3px solid var(--ink); border-radius: 16px; background: var(--surface); }
.modal input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.modal-cta { font-family: var(--display); font-size: 17px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 15px; cursor: pointer; }
.modal-cta:hover { background: var(--yellow-hover); }
.modal-cta:disabled { opacity: 0.45; cursor: default; }
.modal-error { background: var(--error-bg); border: 1.5px solid var(--error-line); border-radius: 14px; padding: 13px 15px; font-size: 14px; font-weight: 600; color: var(--error-fg); }
.modal-error[hidden] { display: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or span { flex: 1; height: 3px; background: var(--line); }
.modal-social { font: inherit; font-size: 15px; font-weight: 600; background: var(--surface); border: 3px solid var(--ink); border-radius: 999px; padding: 13px; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px; }
.modal-social:hover { background: var(--ground-tint); color: var(--ink); }
.modal-social img { width: 18px; height: 18px; display: block; }
.modal-note { text-align: center; font-size: 14px; color: var(--muted); }