/* Character Letters: the design system. Direction A, Plain Paper, refined (David, 2026-10-29: "premium ... modern
   and high quality ... don't lean too hard into the off white"). Tokens from docs/design/DESIGN-STUDY-BUILD.md:
   white-first, navy-black ink, one confident accent used only for the next action, hairlines instead of boxes, and
   layered shadows only on what floats (the letter sheet). Instrument Sans for the interface, Source Serif 4 for the
   letter. */

@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2-variations'), url(/fonts/instrument-sans-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-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2-variations'), url(/fonts/instrument-sans-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: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin.woff2) format('woff2-variations'), url(/fonts/source-serif-4-latin.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-display: swap; font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin-italic.woff2) format('woff2-variations'), url(/fonts/source-serif-4-latin-italic.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F7F8FA;
  --surface-2: #F1F3F7;
  --ink: #0F1729;
  --ink-2: #29334A;
  --muted: #5B6475;
  --border: #E3E6EC;
  --hair: rgba(15, 23, 41, .08);
  --border-input: #8A93A3;
  --accent: #2B4BCE;
  --accent-hover: #2139A8;
  --accent-soft: #EEF2FF;
  --accent-line: #C9D3FA;
  --mark: #FFF1B8;
  --mark-line: #C9A227;
  --danger: #B42318;
  --ok: #18794E;

  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-letter: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --fs-display: clamp(2.5rem, 1.55rem + 3.7vw, 4.25rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px;
  --container: 76rem;
  --measure: 36rem;

  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-1: 0 0 0 1px rgba(15,23,41,.06), 0 1px 2px rgba(15,23,41,.04);
  --shadow-2: 0 0 0 1px rgba(15,23,41,.06), 0 1px 2px rgba(15,23,41,.024), 0 3px 6px rgba(15,23,41,.03), 0 8px 14px rgba(15,23,41,.035), 0 16px 28px rgba(15,23,41,.04);
  --shadow-3: 0 0 0 1px rgba(15,23,41,.06), 0 2px 4px rgba(15,23,41,.03), 0 12px 24px rgba(15,23,41,.06), 0 32px 64px rgba(15,23,41,.08);
  --shadow-btn: 0 0 1px rgba(15,23,41,.08), 0 1px 1px rgba(15,23,41,.07), 0 3px 2px rgba(15,23,41,.04), inset 0 1px 0 rgba(255,255,255,.14);
  --ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--font-ui); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.022em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.skip:focus { top: 10px; color: #fff; }

/* ---------- header and footer ---------- */
.head { border-bottom: 1px solid var(--border); background: var(--bg); }
.head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.02em; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 26px; height: 26px; flex: none; }
.head nav { display: flex; align-items: center; gap: var(--s-5); }
.head nav a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.head nav a:hover { color: var(--accent); }
@media (max-width: 639px) { .head nav .hide-sm { display: none; } }

.foot { background: var(--surface); border-top: 1px solid var(--border); margin-top: var(--s-9); padding: var(--s-8) 0 var(--s-7); color: var(--muted); font-size: var(--fs-small); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.foot .brand { margin-bottom: var(--s-3); }
.foot .legal { max-width: 34rem; line-height: 1.55; }
.foot h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot ul a { color: var(--muted); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.foot ul a:hover { color: var(--accent); }
.foot .base { border-top: 1px solid var(--border); margin-top: var(--s-7); padding-top: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 799px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .cols > :first-child { grid-column: 1 / -1; } }
.app-page .foot { margin-top: var(--s-8); }

/* ---------- buttons, links, controls ---------- */
.btn { --bh: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--bh); padding: 0 24px;
  border: 0; border-radius: var(--r-md); background: var(--accent); color: #fff; font: 500 1.0625rem/1 var(--font-ui); letter-spacing: -.005em;
  text-decoration: none; box-shadow: var(--shadow-btn); cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .arrow { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }
.btn.secondary { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.btn.secondary:hover { background: var(--surface); color: var(--ink); }
.btn.quiet { background: transparent; color: var(--accent); box-shadow: none; padding: 0 8px; }
.btn.quiet:hover { background: var(--accent-soft); }
.btn.sm { --bh: 44px; padding: 0 18px; font-size: var(--fs-small); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.textlink { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.textlink:hover { color: var(--accent-hover); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
  min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.back svg { width: 16px; height: 16px; }
.back:hover { color: var(--accent); }

label, .label { display: block; font-weight: 500; font-size: var(--fs-body); color: var(--ink); margin-bottom: var(--s-2); }
.opt { font-weight: 400; color: var(--muted); }
.field { margin-top: var(--s-5); }
.field-hint { color: var(--muted); font-size: var(--fs-small); margin: -4px 0 var(--s-2); }
input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%; min-height: 52px; padding: 13px 14px; border: 1px solid var(--border-input); border-radius: var(--r-sm); background: #fff;
  color: var(--ink); font: 400 1.0625rem/1.4 var(--font-ui); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
input:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end; }
.row2 .field { margin-top: var(--s-5); }
@media (max-width: 519px) { .row2 { grid-template-columns: 1fr; gap: 0; } }

/* choice cards (radio and checkbox): select one thing by seeing it */
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: var(--s-3); font-weight: 500; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-input); color: var(--ink); font-weight: 500; font-size: 1rem; transition: all var(--dur) var(--ease); user-select: none; }
.choice input:hover + span { box-shadow: inset 0 0 0 1px var(--ink-2); }
.choice input:checked + span { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-hover); }
.choice input:focus-visible + span { box-shadow: inset 0 0 0 1.5px var(--accent), var(--ring); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 400; margin: 0; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }

/* ---------- the letter (screen) ---------- */
.sheet { background: #fff; border-radius: var(--r-xs); box-shadow: var(--shadow-2); container-type: inline-size; }
.letter { font-family: var(--font-letter); color: #141821; font-size: max(13px, 1.96cqw); line-height: 1.5; padding: 11.8cqw 11.8cqw 10cqw;
  font-optical-sizing: auto; letter-spacing: 0; word-wrap: break-word; }
.letter p { margin: 0 0 1em; text-wrap: wrap; }
.letter .l-to p { margin: 0; }
.letter .l-to { margin-bottom: 1em; }
.letter .l-sign { margin-bottom: 0; }
.letter .l-sigspace { height: 3.2em; }
.letter .l-name, .letter .l-line { margin: 0; }
.letter .l-para { border-radius: 3px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.letter .l-ph { color: #A3AABA; font-style: italic; }
.letter mark { background: var(--mark); color: inherit; text-decoration: underline wavy var(--mark-line) 1px; text-underline-offset: .22em; padding: 0 .06em; border-radius: 2px; }
.letter.focus .l-para:not(.is-active), .letter.focus .l-date, .letter.focus .l-to, .letter.focus .l-greet, .letter.focus .l-sign,
.letter.focus .l-name, .letter.focus .l-line, .letter.focus .l-sworn { color: #8E95A5; }
.letter.focus .l-para.is-active { background: var(--mark); box-shadow: 0 0 0 .3em var(--mark); }
.letter.focus .l-ph:not(.is-active) { color: #C3C8D2; }
@container (max-width: 520px) { .letter { font-size: 15px; padding: 28px 22px 24px; } }

/* ---------- dialogs ---------- */
dialog { border: 0; padding: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-3); max-width: min(30rem, calc(100vw - 2 * var(--gutter))); width: 100%; color: var(--ink); }
dialog::backdrop { background: rgba(15, 23, 41, .42); backdrop-filter: blur(2px); }
.dlg { padding: var(--s-6) var(--s-6) var(--s-5); }
.dlg h2 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.dlg p { color: var(--ink-2); }
.dlg .actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }
.dlg .actions .btn { width: 100%; }
.dlg .err { color: var(--danger); font-size: var(--fs-small); margin-top: var(--s-3); }
.dlg .ts { min-height: 0; margin-top: var(--s-3); }
@media (max-width: 519px) { .dlg { padding: var(--s-5) var(--s-5) var(--s-4); } }

.blocked-note { margin: 0; background: var(--mark); color: var(--ink); text-align: center; padding: 10px var(--gutter); font-size: var(--fs-small); }
.noscript { background: var(--mark); padding: 12px var(--gutter); text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- round 2 (David, 2026-10-30: "the letter ... is hard to see on the white background ... make it a
   little more attractive"): every letter sits on a soft indigo-grey desk, with a real paper edge and shadow ---------- */
:root { --desk-1: #EEF2FB; --desk-2: #E2E8F5; --desk-line: rgba(15, 23, 41, .06);
  --paper-shadow: 0 0 0 1px rgba(15,23,41,.11), 0 1px 2px rgba(15,23,41,.06), 0 6px 14px rgba(15,23,41,.07), 0 18px 40px rgba(15,23,41,.11); }
.desk { background: linear-gradient(160deg, var(--desk-1), var(--desk-2)); border-radius: var(--r-xl); padding: clamp(16px, 3vw, 40px);
  box-shadow: inset 0 0 0 1px var(--desk-line); }
.desk .sheet, .pv-col .sheet, .pv-dialog .sheet { box-shadow: var(--paper-shadow); }
/* round 2, look review: no grey-out; the highlight alone marks the paragraph being written */
.letter.focus .l-para:not(.is-active), .letter.focus .l-date, .letter.focus .l-to, .letter.focus .l-greet, .letter.focus .l-sign,
.letter.focus .l-name, .letter.focus .l-line, .letter.focus .l-sworn { color: #141821 !important; }
.letter.focus .l-ph:not(.is-active) { color: #8E95A5 !important; }

/* The legal notice (D83, 2026-10-30): plain, readable size, never hidden */
.notice { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-4) 0 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; text-align: left; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.foot .legal { color: var(--ink-2); font-size: 1rem; }