/* Calm blue ink on white paper, sunny yellow for the one call to action that matters,
   green and red for the start and end dots that also appear on the printed sheets. The same green colours ".com" in the logo. */
/* Fonts are served from this site rather than Google Fonts, so visitors' browsers never contact Google.
   Both are variable fonts under the SIL Open Font License (see /fonts/*-OFL.txt), Latin subset. */
@font-face {
  font-family: 'Nunito';
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2-latin.woff2') format('woff2');
}

:root {
  --ink: #22314A;
  --muted: #5B6B82;
  --brand: #1F4E8C;
  --brand-dark: #163A69;
  --sky: #EEF4FB;
  --mist: #F4F7FB;
  --line: #E3E8F0;
  --sun: #FFC93C;
  --sun-soft: #FFF8E1;
  --sun-ink: #7A5800;
  --start: #2E9E5B;
  --start-soft: #E6F4EC;
  --start-ink: #1E6B3E;
  --end: #D6453D;
  --error: #B3261E;
  --paper: #FFFFFF;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --wrap: 1160px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* A dark ring reads on the white and pale blue pages; the dark blue sign-up band gets a yellow one. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.account :focus-visible { outline-color: var(--sun); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 54px); color: var(--brand); }
h2 { font-size: clamp(26px, 3.2vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--start-ink); }
.lead { font-size: 19px; max-width: 36em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header. Phones and tablets: menu button, logo in the middle, search button; the menu slides in from the left.
   Computers (1200px and up): logo, every menu section in one row with round arrows, and a search box. */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20, 40, 80, 0.05); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.logo svg { width: 30px; height: 30px; }
.logo span { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--brand); white-space: nowrap; }
.logo em { font-style: normal; color: var(--start); }
.logo i { font-style: normal; color: var(--end); }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 12px; background: none; color: var(--brand); cursor: pointer; padding: 0; }
.search-btn { background: #EEF3FA; }
.ico { flex-shrink: 0; }

.nav { font-weight: 700; }
.nav summary { list-style: none; cursor: pointer; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary, .nav-link { display: flex; align-items: center; gap: 12px; color: var(--brand); text-decoration: none; }
.chev { display: grid; place-items: center; border-radius: 50%; background: #EEF3FA; color: var(--brand); flex-shrink: 0; transition: transform 0.15s, background 0.15s; }
.nav details[open] > summary .chev { background: var(--brand); color: #FFFFFF; transform: rotate(180deg); }
.menu { display: none; flex-direction: column; }
.nav details[open] .menu { display: flex; }
.menu a { padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.menu a:hover { background: var(--sky); }
.nav-season { display: none; }

.search { display: none; }
.search-box { display: flex; align-items: center; gap: 8px; border: 2px solid #D5DEEA; border-radius: 12px; padding: 0 6px 0 12px; background: #F6F9FD; color: var(--muted); }
.search-box:focus-within { border-color: var(--brand); background: var(--paper); }
.search-box .ico { width: 18px; height: 18px; }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 0; font: 600 16px/1.2 var(--body); color: var(--ink); outline: none; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-panel { background: var(--paper); border: 1px solid #E2E8F0; border-radius: 18px; box-shadow: 0 20px 40px rgba(31, 78, 140, 0.18); padding: 10px; display: grid; gap: 2px; }
.search-panel[hidden] { display: none; }
.search-panel .q-label { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 2px; }
.search-panel .q-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px 8px; }
.search-panel .q-chips button { border: 1.5px solid #D5DEEA; background: var(--paper); border-radius: 999px; padding: 6px 12px; font: 700 14px/1.2 var(--body); color: var(--brand); cursor: pointer; }
.search-panel .q-chips button:hover { background: var(--sky); }
.search-panel .hit { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.search-panel .hit:hover, .search-panel .hit.on { background: #EEF3FA; color: var(--ink); }
.search-panel .hit img { width: 42px; height: 58px; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); background: var(--paper); }
.search-panel .hit b { display: block; font-size: 15px; line-height: 1.25; }
.search-panel .hit span { font-size: 13px; color: var(--muted); }
.search-panel .all { text-align: center; font-weight: 800; font-size: 14px; padding: 10px; text-decoration: none; }
.search-panel .none { padding: 12px 8px; color: var(--muted); font-weight: 600; }

/* Phones and tablets: the nav is a drawer and search opens over the page. */
@media (max-width: 1199.98px) {
  .bar { padding-inline: 12px; }
  .bar > .logo { margin-inline: auto; }
  .bar > .logo span { font-size: 21px; }
  .nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(86%, 320px);
    display: flex; flex-direction: column; background: var(--paper); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    transform: translateX(-105%); transition: transform 0.2s ease-out; visibility: hidden;
  }
  .nav-open .nav { transform: none; visibility: visible; }
  .nav-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, 0.45); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid #EEF2F7; background: #F6F9FD; }
  .drawer-head .logo span { font-size: 19px; }
  .close-btn { background: var(--paper); border-radius: 50%; width: 36px; height: 36px; color: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  .drawer-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
  .nav summary, .nav-link { padding: 10px 10px 10px 12px; border-radius: 12px; color: var(--ink); font-size: 16px; min-height: 52px; }
  .nav details[open] > summary { background: #EEF3FA; color: var(--brand); }
  .nav-label { flex: 1; }
  .nav-label .short { display: none; }
  .chev { width: 32px; height: 32px; }
  .chev .ico { width: 22px; height: 22px; stroke-width: 2.8; }
  .nav-age > summary > .ico { color: #1F7BC4; }
  .nav-grade > summary > .ico { color: #8A4FC9; }
  .nav-pen > summary > .ico { color: var(--start); }
  .nav-book > summary > .ico { color: #F28C28; }
  .nav-math > summary > .ico { color: var(--end); }
  .nav-shapes > summary > .ico { color: #0E9AA7; }
  .nav-name > .ico { color: var(--brand); }
  .menu { margin: 2px 0 6px 46px; padding-left: 8px; border-left: 2px solid #E2E8F0; }
  .menu a { padding: 7px 10px; font-size: 15px; }
  .nav-season { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 16px; background: #FFF7ED; border: 1px solid #FED7AA; text-decoration: none; }
  .nav-season .pumpkin { font-size: 28px; line-height: 1; }
  .nav-season strong { display: block; font-size: 14px; color: #431407; }
  .nav-season span span { font-size: 12px; color: #C2410C; font-weight: 700; }
  .drawer-foot { padding: 12px 16px; border-top: 1px solid #EEF2F7; background: #F6F9FD; font-size: 12px; font-weight: 600; color: var(--muted); }

  .search-open .search { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.55); padding: 12px; }
  .search-open .search-box { background: var(--paper); border-color: var(--brand); padding-block: 2px; }
  .search-open .search-panel { margin-top: 10px; max-height: calc(100vh - 100px); overflow-y: auto; }
}

/* Computers: one row. Dropdowns are the same simple lists as before. */
@media (min-width: 1200px) {
  .bar { gap: 16px; min-height: 74px; }
  .menu-btn, .search-btn, .search-close, .drawer-head, .drawer-foot, .nav-overlay, .nav-season, .nav summary > .ico, .nav-link > .ico, .nav-label .long { display: none; }
  .nav, .drawer-body { display: flex; align-items: center; gap: 2px; }
  .nav { flex: 1; justify-content: center; }
  .nav details { position: relative; }
  .nav summary, .nav-link { gap: 5px; padding: 8px 7px; border-radius: 10px; font-size: 15.5px; white-space: nowrap; }
  .nav details[open] > summary { background: #EEF3FA; }
  .nav-link .chev { display: none; }
  .chev { width: 22px; height: 22px; }
  .chev .ico { width: 14px; height: 14px; stroke-width: 2.8; }
  .menu {
    position: absolute; z-index: 10; top: 100%; left: -12px; min-width: 210px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
    box-shadow: 0 12px 28px rgba(31, 78, 140, 0.14);
  }
  .search { display: block; position: relative; flex: 0 1 210px; min-width: 160px; }
  .search-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 400px; z-index: 50; }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .nav summary, .nav-link { padding-inline: 4px; font-size: 15px; }
}

/* Buttons and chips */
.btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px;
  padding: 12px 20px; border-radius: 12px; border: 2px solid var(--brand);
  font: 800 17px/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--brand); color: #FFFFFF; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFFFFF; }
.btn-outline { background: var(--paper); color: var(--brand); }
.btn-outline:hover { background: var(--sky); }
.btn-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn small { font-weight: 600; font-size: 13px; opacity: 0.85; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { padding: 10px 18px; border-radius: 999px; border: 2px solid var(--brand); font-weight: 700; text-decoration: none; background: var(--paper); }
.chip:hover { background: var(--sky); }
.chip-solid { background: var(--brand); color: #FFFFFF; }
.chip-solid:hover { background: var(--brand-dark); color: #FFFFFF; }
.tag { padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--sky); color: var(--brand); text-decoration: none; }
.tag-age { background: var(--start-soft); color: var(--start-ink); }

/* Home */
.hero { background: var(--sky); overflow-x: clip; }
.hero > .wrap { padding-block: 22px 40px; display: flex; flex-direction: column; gap: 8px; }

/* The seasonal banner, shown from September 15 to October 31. */
.season-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: 18px; color: #FFFFFF; text-decoration: none;
  background: linear-gradient(90deg, #0F172A, #3B0764, #0F172A); border: 1px solid rgba(107, 33, 168, 0.4);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18);
}
.season-banner:hover { color: #FFFFFF; }
.season-bg { position: absolute; right: 40px; bottom: -22px; font-size: 96px; line-height: 1; opacity: 0.2; }
.season-main { position: relative; display: flex; align-items: center; gap: 14px; }
.season-icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; font-size: 28px; background: rgba(249, 115, 22, 0.2); border: 1px solid rgba(249, 115, 22, 0.4); }
.season-kicker { display: block; font-size: 14px; font-weight: 600; color: #FDBA74; }
.season-pill { margin-right: 6px; padding: 2px 9px; border-radius: 999px; background: #F97316; color: #FFFFFF; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.season-banner strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.season-cta { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 10px 16px; border-radius: 12px; background: #F97316; font-weight: 800; font-size: 15px; }
.season-cta .ico { width: 16px; height: 16px; stroke-width: 3; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 22px; }
.hero-text { display: flex; flex-direction: column; gap: 18px; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; background: #EEF3FA; border: 1px solid rgba(31, 78, 140, 0.25); color: var(--brand); font-size: 14px; font-weight: 700; }
.hero h1 { font-size: clamp(28px, 4.2vw, 50px); line-height: 1.08; }
.hero h1 span { display: block; color: var(--start); }

/* Age and grade picker: tabs, a row of buttons and "Find worksheets". */
.pk { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.pk-tabs { display: flex; gap: 22px; border-bottom: 1px solid #D5DEEA; }
.pk-tabs button { border: 0; background: none; padding: 4px 2px 9px; margin-bottom: -1px; font: 700 17px/1.2 var(--body); color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
.pk-tabs button[aria-selected="true"] { color: var(--brand); font-weight: 800; border-bottom-color: var(--brand); }
.pk-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pk-row[hidden] { display: none; }
.pk-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-row a { padding: 14px 4px; border: 1.5px solid #D5DEEA; border-radius: 12px; background: var(--paper); text-align: center; text-decoration: none; font-weight: 600; font-size: 17px; color: var(--ink); white-space: nowrap; }
.pk-row a:hover { border-color: var(--brand); color: var(--ink); }
.pk-row a.on { background: var(--brand); border-color: var(--brand); color: #FFFFFF; font-weight: 700; }
.pk-go { display: block; padding: 16px; border-radius: 14px; background: var(--brand); color: #FFFFFF; text-align: center; text-decoration: none; font-weight: 800; font-size: 18px; box-shadow: 0 3px 0 var(--brand-dark); }
.pk-go:hover { background: var(--brand-dark); color: #FFFFFF; }

/* Sheets scattered on a desk, each with a coloured tag. */
.desk { position: relative; width: 500px; height: 440px; justify-self: end; }
.desk-sheet { position: absolute; width: 190px; transform: rotate(var(--turn)); transition: transform 0.15s; }
.desk-sheet:nth-child(3), .desk-sheet:nth-child(6) { z-index: 5; }
.desk-sheet:hover { transform: rotate(var(--turn)) translateY(-6px); z-index: 8; }
.desk-sheet img { width: 100%; border-radius: 6px; background: var(--paper); box-shadow: 0 14px 30px rgba(31, 78, 140, 0.22); }
.desk-tag { position: absolute; top: -10px; left: 8px; z-index: 1; padding: 4px 11px; border-radius: 999px; color: #FFFFFF; font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }

/* Picture tiles for each kind of sheet. */
.tiles-section { padding-block: 28px 8px; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 12px 14px; border-radius: 18px; text-decoration: none; color: var(--ink); }
.tile:hover { color: var(--ink); box-shadow: 0 6px 16px rgba(31, 78, 140, 0.15); }
.tile-paper { width: 100%; aspect-ratio: 331 / 300; object-fit: cover; object-position: top; border-radius: 10px; background: var(--paper); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.tile-name { display: grid; place-items: center; font: 700 26px/1 var(--display); letter-spacing: 0.3em; color: #9AA6B8; }
.tile b { font-size: 18px; }
.tiles-lead { margin-top: 26px; }

@media (max-width: 1199.98px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 14px; }
  .desk { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hero > .wrap { padding: 12px 14px 18px; }
  .season-banner { padding: 14px; border-radius: 16px; }
  .season-bg { right: -12px; bottom: -12px; font-size: 60px; }
  .season-main { gap: 12px; }
  .season-icon { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .season-kicker { font-size: 12px; }
  .season-pill { font-size: 10px; padding: 1px 8px; }
  .season-banner strong { font-size: 16px; }
  .season-cta { padding: 0; background: none; color: #94A3B8; font-size: 0; }
  .season-cta .ico { width: 20px; height: 20px; }
  .hero-grid { gap: 12px; }
  .hero-text { gap: 12px; }
  .badge { font-size: 13px; padding: 4px 11px; }
  .hero h1 { font-size: 26px; line-height: 1.15; }
  .pk { gap: 12px; }
  .pk-tabs button { font-size: 15px; }
  .pk-row a { padding: 11px 2px; font-size: 15px; }
  .pk-go { font-size: 17px; padding: 14px; }
  .tiles-section { padding: 16px 14px 8px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 10px 10px 12px; gap: 8px; }
}

.section { padding-block: 44px; }
.section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.section-head.row { flex-direction: row; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }

.pack {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: center;
  padding: 26px 30px; border: 2px dashed var(--sun); border-radius: 18px; background: var(--sun-soft);
}
.pack .eyebrow { color: var(--sun-ink); }
.pack .btn-row { justify-content: flex-end; }

.path { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.step {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0;
  border: 2px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.step:hover { border-color: var(--brand); color: var(--ink); }
.step svg { width: 100%; height: 56px; }
.step-meta { font-size: 13px; font-weight: 700; color: var(--muted); }
.step-name { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; }

.grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.grade {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-width: 0;
  background: var(--mist); border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.grade:hover { background: var(--sky); color: var(--ink); }
.grade strong { font-family: var(--display); font-size: 22px; color: var(--brand); }
.grade span { font-size: 15px; }

.account { background: var(--brand); color: #FFFFFF; }
.account .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 32px; align-items: center; padding-block: 40px; }
.account .eyebrow { color: var(--sun); }

/* Sheet cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
.card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.card:hover { color: var(--ink); }
.card:hover .card-paper { border-color: var(--brand); transform: translateY(-2px); }
.card-paper {
  aspect-ratio: 210 / 297; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(31, 78, 140, 0.08); transition: transform 0.15s ease, border-color 0.15s ease;
}
.card-paper img { width: 100%; height: 100%; object-fit: cover; }
.card-title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.card-meta { font-size: 14px; color: var(--muted); }

/* List pages */
.page-head { background: var(--sky); }
.page-head .wrap { display: flex; flex-direction: column; gap: 12px; padding-block: 36px 40px; }
.crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs ol { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin-right: 8px; }
.group + .group { margin-top: 44px; }

/* Sheet page */
.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; align-items: start; padding-block: 24px 40px; }
.sheet-preview { background: var(--mist); border-radius: 18px; padding: 28px; }
.sheet-preview img { margin: 0 auto; max-width: 440px; width: 100%; box-shadow: 0 10px 28px rgba(31, 78, 140, 0.16); background: var(--paper); }
.sheet-info { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sheet-info h1 { font-size: clamp(30px, 4vw, 42px); }
.download { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 2px solid var(--line); border-radius: 16px; }
.download-label { font-weight: 800; font-size: 15px; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.tips ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.download-bar { display: none; }
@media (max-width: 760px) {
  .download-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--paper);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(31, 78, 140, 0.12); transition: transform 0.2s;
  }
  .download-bar .btn { min-height: 52px; padding: 8px 10px; text-align: center; align-items: center; }
  .download-bar.is-hidden { transform: translateY(110%); }
  body:has(.download-bar) .site-footer { padding-bottom: 84px; }
}
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 16px; border-block: 1px solid var(--line); font-weight: 700; }
.pager a { text-decoration: none; }

/* Name tracing */
.name-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 2px solid var(--line); border-radius: 16px; max-width: 560px; }
.name-form label { font-weight: 800; }
.name-form input[type="text"] {
  font: 700 28px/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 16px; border: 2px solid var(--muted); border-radius: 12px; width: 100%; color: var(--ink); background: var(--paper);
}
.name-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.name-form legend { font-weight: 800; margin-bottom: 8px; }
.radio { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; }
.radio input { width: 20px; height: 20px; accent-color: var(--brand); }
.error { color: var(--error); font-weight: 700; }

.prose { max-width: 42em; display: flex; flex-direction: column; gap: 14px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 24px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 28px; font-size: 14px; color: var(--muted); }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .pack { padding: 20px 18px; }
  .pack .btn-row { justify-content: flex-start; }
  .sheet-preview { padding: 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-paper { transition: none; }
  .chev, .nav { transition: none; }
  .desk-sheet, .download-bar { transition: none; }
}