/* TheCursiveAlphabet.com
   Layout: every page is a sheet of handwriting paper. A red margin line runs down the left on wide screens and the
   content is written to the right of it, left-aligned. Ruled bands (top line, dashed midline, blue baseline,
   descender line) appear only where cursive is shown. Light theme = practice paper; dark theme = slate chalkboard. */
@font-face { font-family: "Playwrite US Trad"; src: url("/assets/fonts/playwrite-us-trad.woff2") format("woff2"); font-display: swap; }

:root {
  --paper: #f6f8fc;       /* blue-white practice paper */
  --surface: #ffffff;
  --ink: #1b2a4a;         /* blue-black school ink: text and letters */
  --muted: #56627e;
  --rule: #a9c2ea;        /* top, midline and descender rules */
  --rule-base: #4a77c6;   /* baseline */
  --margin: #d5443c;      /* the red margin line; also the pen tip and start marks */
  --ghost: #dfe6f2;       /* the part of a letter not yet written */
  --wash: #e8eef9;        /* selected and current-step fill */
  --edge: #d4ddeb;
  --r0: #d5443c; --r1: #2f6fd0; --r2: #23885a; --r3: #8a3fb5; --r4: #c77700; --r5: #127f8c;
  --font-text: "Andika", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-script: "Playwrite US Trad", "Segoe Script", cursive;
  --step-0: 1.125rem; --step-1: 1.375rem; --step-2: 1.75rem; --step-3: 2.25rem; --step-4: clamp(2.25rem, 5.4vw, 3.5rem);
  --margin-x: 56px;       /* where the margin line sits on wide screens */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1d2a27; --surface: #23322e; --ink: #f1eee5; --muted: #a8b7b1; --rule: #3e5651; --rule-base: #86aea3;
  --margin: #efb757; --ghost: #2e403b; --wash: #2a3c37; --edge: #354a45;
  --r0: #efb757; --r1: #8ec5ff; --r2: #9ee0b1; --r3: #e3a6ff; --r4: #ffb38a; --r5: #7fe0e8;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #1d2a27; --surface: #23322e; --ink: #f1eee5; --muted: #a8b7b1; --rule: #3e5651; --rule-base: #86aea3;
  --margin: #efb757; --ghost: #2e403b; --wash: #2a3c37; --edge: #354a45;
  --r0: #efb757; --r1: #8ec5ff; --r2: #9ee0b1; --r3: #e3a6ff; --r4: #ffb38a; --r5: #7fe0e8;
  color-scheme: dark }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-text); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-color: var(--rule-base); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--margin); }
:focus-visible { outline: 3px solid var(--rule-base); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }

/* ---------- the sheet and its margin line ---------- */
.sheet { position: relative; max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 960px) {
  .sheet { padding-left: calc(var(--margin-x) + 40px); padding-right: 32px; }
  .sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--margin-x); width: 2px; background: var(--margin); opacity: .75; pointer-events: none; }
}
.measure { max-width: 64ch; }

/* ---------- masthead ---------- */
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 18px 14px; border-bottom: 1px solid var(--rule); }
.wordmark { font-family: var(--font-script); font-size: 1.35rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 1.02rem; }
.nav a { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--margin); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 18px; border-radius: 999px;
  font: 700 1.02rem var(--font-text); color: var(--ink); background: var(--surface); border: 2px solid var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--rule-base); border-color: var(--rule-base); }
.btn[aria-pressed="true"] { background: var(--wash); border-color: var(--margin); }
.btn:disabled { opacity: .5; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- ruled guides (shared by svg bands) ---------- */
.rule { stroke: var(--rule); stroke-width: 7; }
.rule.mid { stroke-dasharray: 34 26; stroke-width: 6; }
.rule.base { stroke: var(--rule-base); stroke-width: 11; }

/* ---------- the stroke player ---------- */
.paper { display: block; width: 100%; height: auto; overflow: hidden; }
.paper .ghost { fill: var(--ghost); }
.paper .ink { fill: var(--ink); }
.paper .pen { fill: var(--margin); }
.paper .startmark circle { fill: var(--surface); stroke: var(--margin); stroke-width: 10; }
.paper .startmark text { fill: var(--margin); font: 700 64px var(--font-text); }
.paper .route { display: none; }
.paper.show-route .route { display: inline; }
.paper.show-route .ink, .paper.show-route .ghost { opacity: .22; }
.route .rpath { fill: none; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.route .rmark rect { fill: var(--surface); stroke-width: 10; }
.route .rmark text { font: 700 58px var(--font-text); }
.route .r0 { stroke: var(--r0); } .route .r1 { stroke: var(--r1); } .route .r2 { stroke: var(--r2); }
.route .r3 { stroke: var(--r3); } .route .r4 { stroke: var(--r4); } .route .r5 { stroke: var(--r5); }
.route .rarrow { stroke: none; }
.route .rarrow.r0, .route .rmark.r0 text { fill: var(--r0); } .route .rarrow.r1, .route .rmark.r1 text { fill: var(--r1); }
.route .rarrow.r2, .route .rmark.r2 text { fill: var(--r2); } .route .rarrow.r3, .route .rmark.r3 text { fill: var(--r3); }
.route .rarrow.r4, .route .rmark.r4 text { fill: var(--r4); } .route .rarrow.r5, .route .rmark.r5 text { fill: var(--r5); }

/* ---------- home: hero ---------- */
.hero { padding-block: 40px 0; display: grid; gap: 14px; }
.hero h1 { max-width: 18ch; }
.hero .lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.hero .actions { margin-top: 8px; }
/* full-bleed ruled band; its lines sit exactly where the svg's guide lines would (viewBox y -1120..600) */
.band { position: relative; margin-top: 34px; height: clamp(200px, min(44vh, 62vw), 420px);
  background:
    linear-gradient(var(--rule), var(--rule)) 0 6.98% / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 9px, transparent 9px 16px) 0 36.05% / 100% 1.5px no-repeat,
    linear-gradient(var(--rule-base), var(--rule-base)) 0 65.12% / 100% 2.5px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 94.19% / 100% 1.5px no-repeat; }
.band.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
@media (min-width: 960px) { .band.bleed { margin-left: calc(50% - 50vw - 32px); } }
.hero-writer { position: relative; height: 100%; }
.hero-writer .row { position: absolute; inset: 0 16px; display: flex; justify-content: flex-start; transition: opacity .6s ease; }
.hero-writer .row.fade { opacity: 0; }
.hero-writer .slot { height: 100%; aspect-ratio: 1150 / 1720; flex: none; }
.hero-writer .slot.cap { margin-left: 1.2%; }
.hero-writer .paper { width: 100%; height: 100%; overflow: visible; }
.hero-writer .caption { position: absolute; left: 16px; bottom: 8px; font-size: .95rem; color: var(--muted); }
.hero-writer .caption b { color: var(--ink); font-weight: 700; }
@media (min-width: 960px) {
  .hero-writer .row { left: max(calc(var(--margin-x) + 40px), calc(50vw - 620px + var(--margin-x) + 40px)); right: max(32px, calc(50vw - 588px)); }
  .hero-writer .caption { left: max(calc(var(--margin-x) + 40px), calc(50vw - 620px + var(--margin-x) + 40px)); }
}
@media (prefers-reduced-motion: reduce) { .hero-writer .row { transition: none; } }

/* ---------- section heads written on a baseline ---------- */
.block { padding-block: 56px 0; display: grid; gap: 20px; }
.head { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 2.5px solid var(--rule-base); }
.head p { color: var(--muted); max-width: 60ch; }

/* ---------- alphabet tiles ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0; border-top: 1px solid var(--edge); border-left: 1px solid var(--edge); }
.tiles li { border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.tile { display: grid; gap: 2px; padding: 10px 10px 8px; text-decoration: none; height: 100%; }
.tile svg { display: block; width: 100%; height: auto; }
.tile svg text { font-family: var(--font-script); fill: var(--ink); }
.tile .lbl { font-size: .9rem; color: var(--muted); }
.tile:hover { background: var(--surface); }
.tile:hover .lbl { color: var(--ink); }
.tile:hover .rule.base { stroke: var(--margin); }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* ---------- printable sheets (always white paper, in both themes) ---------- */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 28px 24px; }
.sheet-card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.sheet-card .pg { background: #fff; border: 1px solid var(--edge); box-shadow: 0 1px 0 var(--edge), 0 10px 22px -16px rgba(27, 42, 74, .55); aspect-ratio: 8.5 / 11; overflow: hidden; }
.sheet-card .pg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sheet-card:hover .pg { border-color: var(--rule-base); }
.sheet-card b { display: block; font-size: 1.05rem; }
.sheet-card span { font-size: .95rem; color: var(--muted); }

/* ---------- letter page ---------- */
.crumbs { font-size: .95rem; color: var(--muted); padding-top: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule-base); }
.crumbs a { color: var(--muted); }
.lhead { padding-block: 18px 6px; display: grid; gap: 10px; }
.lhead .lede { color: var(--muted); font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }
.player { display: grid; gap: 18px; margin-top: 18px; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.picker .btn { border-radius: 10px; padding: 6px 14px 6px 12px; font-weight: 700; }
.picker .btn .script { font-size: 1.5rem; line-height: 1; margin-right: 2px; }
.picker.digits .btn { min-width: 56px; justify-content: center; }
.stagebox { background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 8px 8px 14px; display: grid; gap: 12px; position: relative; }
.stagebox .paper { aspect-ratio: 1400 / 1720; max-height: min(64vh, 560px); margin: 0 auto; }
.stagebox::before { content: ""; position: absolute; top: 0; bottom: 0; left: 22px; width: 2px; background: var(--margin); opacity: .5; border-radius: 1px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-inline: 6px; }
@media (min-width: 520px) { .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.controls .btn { padding-inline: 8px; border-width: 1.5px; min-height: 46px; font-size: .98rem; }
.status { min-height: 1.6em; font-size: .95rem; color: var(--muted); padding-inline: 30px 10px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .player-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .player-grid .stagebox { position: sticky; top: 16px; }
}
.howto { display: grid; gap: 18px; align-content: start; }
.where { display: grid; gap: 2px; }
.where b { font-size: .95rem; color: var(--muted); font-weight: 700; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 4px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; border-radius: 10px; }
.steps li::before { content: counter(s); font: 700 1.05rem var(--font-text); width: 30px; height: 30px; margin: 8px 0 0 4px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--rule-base); color: var(--rule-base); font-variant-numeric: tabular-nums; }
.steps li button { all: unset; display: block; padding: 8px 10px 8px 4px; cursor: pointer; line-height: 1.5; border-radius: 8px; }
.steps li button:focus-visible { outline: 3px solid var(--rule-base); }
.steps li.now { background: var(--wash); }
.steps li.now::before { border-color: var(--margin); background: var(--margin); color: var(--surface); }
.lift { font-style: italic; color: var(--muted); }
.note { border-left: 3px solid var(--rule-base); padding: 2px 0 2px 14px; color: var(--muted); }
.mistakes { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.mistakes li::marker { color: var(--margin); }
.pairs { display: flex; flex-wrap: wrap; gap: 8px 36px; }
.col { display: grid; gap: 14px; align-content: start; }
.pairs svg { display: block; height: 112px; width: auto; max-width: 100%; }
.pairs svg text { font-family: var(--font-script); fill: var(--ink); }
.two { display: grid; gap: 40px; }
.three { display: grid; gap: 24px; }
@media (min-width: 760px) { .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.three h3 { margin-bottom: 6px; }
.note.measure { max-width: 62ch; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.print-row { display: grid; gap: 20px; align-items: center; }
@media (min-width: 640px) { .print-row { grid-template-columns: 180px minmax(0, 1fr); } }
.print-row .pg { width: 180px; }

.neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.neighbors a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; text-decoration: none; background: var(--surface); }
.neighbors a:hover { border-color: var(--margin); }
.neighbors .script { font-size: 2.1rem; line-height: 1.2; }
.neighbors small { color: var(--muted); font-size: .9rem; }
.neighbors .next { text-align: right; }

/* ---------- supplies, ads, disclosure ---------- */
.supplies { display: grid; gap: 12px; padding: 18px 20px; border: 1px dashed var(--rule-base); border-radius: 14px; }
.supplies ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.supplies small { color: var(--muted); }
.ad-slot { min-height: 280px; display: grid; place-items: center; margin-block: 40px 0; }
.ad-slot:empty { display: none; }

/* ---------- prose pages ---------- */
.prose { display: grid; gap: 16px; max-width: 66ch; padding-block: 18px 0; }
.prose h2 { margin-top: 18px; font-size: var(--step-1); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- worksheet maker ---------- */
.maker { display: grid; gap: 24px; margin-top: 20px; }
@media (min-width: 960px) { .maker { grid-template-columns: 330px minmax(0, 1fr); align-items: start; } }
.panel { background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 16px; display: grid; gap: 14px; }
.panel label, .panel .lab { font-weight: 700; font-size: 1rem; display: block; margin-bottom: 4px; }
.panel textarea, .panel select, .panel input[type=text] { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--edge); border-radius: 8px; padding: 9px 10px; }
.panel textarea { min-height: 120px; resize: vertical; }
.chk { display: flex !important; gap: 10px; align-items: center; font-weight: 400 !important; margin: 4px 0 0 !important; }
.chk input { width: 20px; height: 20px; accent-color: var(--margin); }
.hint { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.warn { color: var(--margin); font-size: .95rem; }
.scalebox { width: 100%; overflow: hidden; }
.preview { display: grid; gap: 16px; justify-items: start; }
.mk-sheet { width: 816px; height: 1056px; background: #fff; color: #1b1f24; padding: 40px 48px; position: relative; overflow: hidden; box-shadow: 0 1px 0 var(--edge), 0 14px 30px -20px rgba(0,0,0,.6); flex: none; transform-origin: top left; }
.mk-sheet .top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1b1f24; padding-bottom: 6px; margin-bottom: 10px; font-family: Helvetica, Arial, sans-serif; }
.mk-sheet .top h2 { font-size: 22px; margin: 0; letter-spacing: 0; }
.mk-sheet .nm { font-size: 12px; color: #555; } .mk-sheet .nm span { display: inline-block; border-bottom: 1px solid #555; width: 150px; margin-left: 4px; }
.mk-sheet .foot { position: absolute; left: 48px; right: 48px; bottom: 22px; font: 10px Helvetica, Arial, sans-serif; color: #666; display: flex; justify-content: space-between; }
.mk-sheet svg { display: block; margin: 0 0 6px; }

/* ---------- footer ---------- */
.foot-site { margin-top: 80px; padding-block: 28px 40px; border-top: 2.5px solid var(--rule-base); display: grid; gap: 14px; font-size: .98rem; color: var(--muted); }
.foot-site nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-site a { color: var(--muted); }
.foot-site .script { color: var(--ink); font-size: 1.2rem; }

@media print {
  .masthead, .foot-site, .noprint, .ad-slot, .supplies { display: none !important; }
  body { background: #fff; }
  .sheet { padding: 0; max-width: none; } .sheet::before { display: none; }
  .maker { display: block; margin: 0; } .preview { display: block; } .scalebox { overflow: visible; height: auto !important; }
  .mk-sheet { box-shadow: none; transform: none !important; margin: 0 !important; page-break-after: always; break-after: page; }
  .mk-sheet:last-child { page-break-after: auto; break-after: auto; }
  @page { size: Letter; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- guides ---------- */
.prose .lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); }
.prose h3 { margin-top: 10px; font-size: var(--step-0); }
.prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose p, .prose li { line-height: 1.6; }
.glist { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 14px; }
.glist .gitem { padding: 14px 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; }
.glist .gitem h2, .glist .gitem h3 { margin: 0 0 4px; font-size: var(--step-0); }
.glist .gitem p { margin: 0; color: var(--muted); }
.block.prose { max-width: 66ch; }