/* =========================================================================
   Pencil Pocket — stylesheet
   Warm, simple, high-contrast. Targets WCAG 2.1 AA.
   All colour pairs used for text have been checked to >= 4.5:1 on their
   background (>= 3:1 for large text and UI borders).
   ========================================================================= */

:root{
  /* warm neutrals */
  --cream:#fffcf6;
  --cream-2:#fdf6ea;
  --card:#ffffff;
  --line:#e7ddcb;
  --line-strong:#c9bba2;

  /* ink — warm near-black, 14.8:1 on cream */
  --ink:#241d16;
  --ink-2:#5c5145;   /* 7.4:1 on cream */
  --ink-3:#6f6355;   /* 5.6:1 on cream */

  /* brand */
  --clay:#c1462a;        /* 5.5:1 on cream — safe for text */
  --clay-dark:#9c3521;
  --clay-soft:#fdeee9;
  --sage:#2f6b4f;        /* 6.2:1 on cream */
  --sage-soft:#e8f2ec;
  --sun:#f2b134;
  --sun-deep:#8a5a00;    /* text-safe amber */
  --sky:#2b5f92;         /* 6.6:1 on cream */
  --plum:#6a4a8f;

  --r:12px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(36,29,22,.06), 0 10px 24px rgba(36,29,22,.07);
  --shadow-lg:0 2px 6px rgba(36,29,22,.07), 0 26px 56px rgba(36,29,22,.14);
  --maxw:1120px;
  --focus:#1d4ed8;
}

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

/* The hidden attribute must win. Any `display:` rule on a class beats the
   user-agent `[hidden]{display:none}`, which silently leaves "hidden"
   elements — success messages, revealed panels — on screen the whole time.
   verify.js checks for this. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.15; margin:0 0 .5rem; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.45rem,2.7vw,2.05rem)}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 1rem}
img{max-width:100%;height:auto}
ul,ol{margin:0 0 1rem; padding-left:1.3rem}
li{margin-bottom:.35rem}

a{color:var(--clay); text-underline-offset:3px}
a:hover{color:var(--clay-dark)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:760px}
.muted{color:var(--ink-2)}
.small{font-size:.9rem}
.tiny{font-size:.8rem}
.center{text-align:center}
.mt0{margin-top:0}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
.skip{
  position:absolute; left:8px; top:-60px; background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 10px 10px; z-index:200; font-weight:800; text-decoration:none;
  transition:top .15s;
}
.skip:focus{top:0; color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:800; cursor:pointer; text-decoration:none;
  border:2px solid transparent; border-radius:999px; padding:.7rem 1.3rem;
  background:var(--clay); color:#fff; box-shadow:0 2px 0 var(--clay-dark);
  transition:transform .12s, box-shadow .12s, background .15s;
}
.btn:hover{background:var(--clay-dark); color:#fff; transform:translateY(-1px)}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn.ghost{background:var(--card); color:var(--ink); border-color:var(--line-strong); box-shadow:none}
.btn.ghost:hover{background:var(--cream-2); color:var(--ink); border-color:var(--ink-3)}
.btn.dark{background:var(--ink); box-shadow:0 2px 0 #0d0a07}
.btn.dark:hover{background:#0d0a07}
.btn.sm{padding:.42rem .9rem; font-size:.87rem}
.btn.block{width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,252,246,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.hbar{display:flex; align-items:center; gap:.9rem; min-height:64px; flex-wrap:wrap; padding:.4rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-weight:900; font-size:1.3rem; letter-spacing:-.03em}
.brand:hover{color:var(--ink)}
/* Sized in CSS, not in the SVG attributes, so it can shrink on a phone
   without shipping a second copy of the mark. */
.brand svg{flex:none; width:44px; height:44px}
@media (max-width:560px){ .brand{font-size:1.18rem} .brand svg{width:36px; height:36px} }
.nav{display:flex; gap:.1rem; flex-wrap:wrap}
.nav a{
  text-decoration:none; color:var(--ink-2); font-weight:700; font-size:.94rem;
  padding:.45rem .7rem; border-radius:9px;
}
.nav a:hover{background:var(--cream-2); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink); color:#fff}
.grow{flex:1 1 auto}

/* ---------- hero ---------- */
.hero{padding:52px 0 20px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-160px -20% auto -20%; height:440px;
  background:
    radial-gradient(560px 240px at 20% 62%, rgba(242,177,52,.22), transparent 72%),
    radial-gradient(520px 240px at 80% 32%, rgba(47,107,79,.14), transparent 72%);
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--card);
  border:2px solid var(--line); border-radius:999px; padding:.3rem .85rem;
  font-size:.82rem; font-weight:800; color:var(--ink-2); margin-bottom:1rem;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none}
.lede{font-size:1.13rem; color:var(--ink-2); max-width:60ch}
.cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem}

/* audience toggle */
.aud{display:inline-flex; background:var(--cream-2); border:1px solid var(--line); padding:5px; border-radius:999px; gap:4px; margin-bottom:1rem}
.aud button{
  font:inherit; font-weight:800; font-size:.88rem; cursor:pointer; border:0; border-radius:999px;
  padding:.42rem 1rem; background:transparent; color:var(--ink-2);
}
.aud button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* chips */
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{
  font:inherit; font-weight:800; font-size:.9rem; cursor:pointer; color:var(--ink);
  background:var(--card); border:2px solid var(--line-strong); border-radius:999px;
  padding:.45rem 1rem; text-decoration:none; display:inline-block;
}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- sections ---------- */
section{padding:52px 0}
.band{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem}
.sec-head p{margin:0; color:var(--ink-2); max-width:62ch}
.kicker{font-size:.78rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:var(--clay); margin:0 0 .35rem}

/* ---------- generator ---------- */
.maker{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg)}
.maker h2{color:#fff}
.maker p{color:#ddd3c6}
.maker .kicker{color:var(--sun)}
.maker-grid{display:grid; grid-template-columns:290px minmax(0,1fr); gap:24px; align-items:start; margin-top:1.3rem}
/* Grid items default to min-width:auto, i.e. min-content. Once the grid
   collapses to one column on a phone, the worksheet preview's min-content
   width stretched the track past the viewport and the whole page scrolled
   sideways on a 320px screen. Both children must be allowed to shrink; the
   preview scrolls inside its own shell instead. testsuite.js checks this. */
.maker-grid > *{min-width:0}
/* Shown only when the chosen question count cannot fit on one page. */
.cap-note{margin:.45rem 0 0; font-size:.8rem; font-weight:700; color:var(--sun); line-height:1.35}
.panel{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--r); padding:18px}
.field{margin-bottom:.9rem}
.field:last-child{margin-bottom:0}
.field > label,.field legend{
  display:block; font-size:.74rem; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; color:#cbbfae; margin-bottom:.35rem; padding:0;
}
.field fieldset{border:0; padding:0; margin:0}
.field select,.field input[type=text]{
  width:100%; font:inherit; font-size:.94rem; font-weight:700; color:#fff;
  background:#3a2f24; border:1px solid rgba(255,255,255,.28); border-radius:10px; padding:.55rem .7rem;
}
.field select option{background:#3a2f24; color:#fff}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  flex:1 1 auto; min-width:38px; white-space:nowrap; font:inherit; font-weight:800; font-size:.8rem;
  cursor:pointer; color:#e6ddd1; background:#3a2f24; border:1px solid rgba(255,255,255,.28);
  border-radius:9px; padding:.42rem .3rem;
}
.seg button[aria-pressed="true"]{background:var(--sun); color:#3a2600; border-color:var(--sun)}
.check{
  display:flex; align-items:flex-start; gap:.55rem; cursor:pointer;
  font-size:.88rem; font-weight:700; color:#ece3d7; text-transform:none; letter-spacing:0;
}
.check input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--sun)}
.maker-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1rem}
.sheet-code{font-size:.85rem; color:#cbbfae; font-weight:700}

/* the printable sheet */
.sheet-shell{background:#ded6c8; border-radius:var(--r); padding:18px; overflow:auto; max-height:740px}
.sheet{
  background:#fff; color:#111; max-width:760px; margin:0 auto; padding:36px 38px 40px;
  border-radius:4px; box-shadow:0 10px 28px rgba(0,0,0,.2);
}
.sheet + .sheet{margin-top:18px}
.sheet-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; border-bottom:3px solid #111; padding-bottom:9px}
/* Masthead lockup.
   The mark is 32 units tall but the BOWL of the P only occupies units 3.7-22.3
   — the rest is pencil, tip above and body below. Centring the whole box
   therefore centres the pencil, not the letter, and the eye reads the tip as
   the thing lining up with the heading. So: align to the top of the title
   block and nudge by margin-top so the BOWL is what brackets the heading.
   Sized in CSS, not in the SVG attributes, so one number tunes it everywhere:
   screen, browser print, and the workbook PDFs (which render this same markup). */
.sheet-brand{display:flex; align-items:flex-start; gap:.7rem}
.sheet-brand svg{flex:none; display:block; width:46px; height:46px; margin-top:-3px}
.sheet-brand > div{min-width:0}
/* Colour mark on screen, black line art on paper — see logo_svg(variant="print") */
.mark-screen{display:block; line-height:0}
.mark-print{display:none; line-height:0}
.sheet-head h3{margin:0; font-size:1.45rem; color:#111}
.sheet-head .sub{font-size:.78rem; font-weight:700; color:#444}
.namerow{display:flex; gap:22px; margin:12px 0 22px; font-size:.85rem; font-weight:700; color:#333}
.namerow span{flex:1; border-bottom:1.5px dotted #888; padding-bottom:3px}
.problems{display:grid; gap:15px 24px}
.prob{display:flex; align-items:baseline; gap:.45rem; font-size:1.15rem; font-weight:700; padding:5px 3px}
.prob .n{min-width:22px; font-size:.8rem; font-weight:800; color:#5f5f5f}
.ans{display:inline-block; min-width:56px; border-bottom:2px solid #222; margin-left:4px}
.ans.filled{border-bottom:2px solid #2f6b4f; color:#215139; font-weight:900; text-align:center}
/* Clock problems: the drawn face sits above a short prompt and the answer
   line, so a row of them reads like a row of clocks rather than a paragraph. */
/* ---------- reading comprehension ---------- */
.passage{
  border:2px solid #111; border-radius:8px; padding:13px 16px; margin:0 0 14px;
  background:#fff; break-inside:avoid; page-break-inside:avoid;
}
.sheet .passage h4{margin:0 0 .45rem; font-size:1.05rem; color:#111}
.sheet .passage p{margin:0 0 .55rem; font-size:.95rem; line-height:1.55; color:#111}
.sheet .passage p:last-child{margin-bottom:0}
.passage-2col .passage-body{column-count:2; column-gap:22px; column-rule:1px solid #ddd}
.passage-2col .passage-body p{break-inside:auto}   /* let prose flow between columns, or the columns cannot balance */
@media (max-width:620px){ .passage-2col .passage-body{column-count:1} }
.rq{list-style:decimal; padding-left:1.5rem; margin:0; counter-reset:none}
.rq > li{margin-bottom:11px; break-inside:avoid; page-break-inside:avoid}
.sheet .rq-q{margin:0 0 .3rem; font-weight:800; font-size:.93rem; color:#111}
.rq-opts,.rq-seq{list-style:none; padding:0; margin:0; display:grid; gap:2px 14px}
.rq-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sheet .rq-opts li,.sheet .rq-seq li{margin:0; font-size:.9rem; color:#111; display:flex; gap:.35rem}
.rq-opts b{font-weight:900}
.rq-seq li{align-items:center; gap:.5rem}
.rq-seq .box{
  flex:none; width:19px; height:19px; border:1.5px solid #111; border-radius:3px; display:inline-block;
}
.rq-keys{margin-top:10px; border-top:2px solid #215139; padding-top:6px}
.sheet .rq-keys > b{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#215139}
.rq-keys ol{margin:.2rem 0 0; padding-left:1.35rem; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
.sheet .rq-keys li{font-size:.82rem; font-weight:800; color:#215139; margin:0}
@media (max-width:560px){ .rq-keys ol{grid-template-columns:1fr} }
@media (max-width:560px){ .rq-opts{grid-template-columns:1fr} }
.sheet .instruct{font-size:.9rem; font-weight:700; color:#444; margin:0 0 12px}
.clockprob{display:flex; align-items:flex-start; gap:.4rem; padding:6px 3px; font-size:1rem; font-weight:700}
.clockprob > span:last-child{display:flex; flex-direction:column; align-items:center; gap:.25rem}
.clock{width:92px; height:92px; display:block}
.sheet .clockprob .cq{font-size:.7rem; font-weight:800; color:#444; text-align:center}
.clockprob .ans{min-width:76px}
.wordprob{font-size:1rem; font-weight:600; line-height:1.6; padding:7px 3px; display:flex; gap:.45rem; align-items:baseline}
.wordprob .ans{min-width:80px}
.trace{position:relative; height:74px; margin-bottom:13px; border-top:1.5px solid #aaa; border-bottom:1.5px solid #aaa}
.trace::after{content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px dashed #ccc}
.trace .glyphs{
  position:absolute; inset:0; display:flex; align-items:center; gap:24px; padding-left:10px;
  font-size:3rem; letter-spacing:.1em; color:#c4c4c4; font-weight:700;
  font-family:"Edu NSW ACT Foundation","Andika","Nunito",sans-serif;
}
.trace .glyphs .solid{color:#111}
.bank{border:2px dashed #999; border-radius:10px; padding:11px 15px; margin-bottom:18px; font-size:1rem; font-weight:800; color:#111}
.bank b{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#555; margin-bottom:5px}
.sheet-foot{margin-top:24px; padding-top:9px; border-top:1px solid #ddd; display:flex; justify-content:space-between; gap:1rem; font-size:.7rem; font-weight:700; color:#666}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px; list-style:none; padding:0; margin:0}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; margin:0;
}
.card:hover{box-shadow:var(--shadow-lg)}
.card .thumb{position:relative; height:132px; padding:14px 16px; border-bottom:1px solid var(--line); overflow:hidden}
.card .thumb .rows{display:flex; flex-direction:column; gap:8px; margin-top:24px}
.card .thumb .rows i{display:block; height:7px; border-radius:4px; background:#e6dcc9}
.card .tag{
  position:absolute; top:10px; left:14px; color:#fff; font-size:.63rem; font-weight:900;
  letter-spacing:.07em; text-transform:uppercase; padding:.18rem .5rem; border-radius:999px;
}
.card .pages{
  position:absolute; bottom:10px; right:12px; background:var(--card); border:1px solid var(--line);
  border-radius:999px; font-size:.68rem; font-weight:900; color:var(--ink-2); padding:.12rem .5rem;
}
.card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:.4rem; flex:1}
.card .body h3{margin:0; font-size:1rem}
.card .body h3 a{text-decoration:none; color:var(--ink)}
.card .body h3 a:hover{color:var(--clay); text-decoration:underline}
.meta{display:flex; gap:.35rem; flex-wrap:wrap; font-size:.72rem; font-weight:800; color:var(--ink-2); list-style:none; padding:0; margin:0}
.meta li{background:var(--cream-2); border-radius:999px; padding:.12rem .5rem; margin:0}
.card .go{margin-top:auto; padding-top:.7rem}

/* ---------- filters ---------- */
.filters{display:flex; gap:1.3rem; flex-wrap:wrap; margin-bottom:1.2rem}
.fgroup h2{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .45rem}
.searchbox{
  display:flex; align-items:center; gap:.5rem; background:var(--card); border:2px solid var(--line-strong);
  border-radius:999px; padding:.35rem .5rem .35rem .9rem; max-width:340px;
}
.searchbox input{border:0; outline:0; background:transparent; font:inherit; font-size:.92rem; width:100%; color:var(--ink)}
.empty{padding:42px; text-align:center; color:var(--ink-2); border:2px dashed var(--line-strong); border-radius:var(--r)}

/* ---------- milestones ---------- */
.mile-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:1rem}
.mile-col h2{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .5rem}
.mile-col ul{margin:0; padding-left:1.05rem; color:var(--ink-2); font-size:.95rem}
.callout{
  background:#fdf3e0; border:1px solid #e9d3a3; border-left:5px solid var(--sun);
  border-radius:var(--r); padding:14px 16px; margin:1.2rem 0;
}
.callout.sage{background:var(--sage-soft); border-color:#bcd9c9; border-left-color:var(--sage)}
.callout.clay{background:var(--clay-soft); border-color:#f2cdc1; border-left-color:var(--clay)}
.callout p:last-child{margin-bottom:0}

/* ---------- generic grid ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px; list-style:none; padding:0; margin:0}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow); margin:0;
}
.tile .emoji{font-size:1.6rem; line-height:1}
.tile .when{font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); margin:.4rem 0 .2rem}
.tile h3{margin:.1rem 0 .35rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; text-align:center; box-shadow:var(--shadow); margin:0}
.stat b{display:block; font-size:1.8rem; letter-spacing:-.03em}

/* ---------- table ---------- */
table{border-collapse:collapse; width:100%; font-size:.94rem; margin-bottom:1.2rem}
/* A table's min-content width can exceed a small phone, which used to drag the
   whole page sideways on a 320px screen. First try to make it fit — tighter
   type and padding, and allow long words to break — because a column the
   reader has to discover by swiping is a column most readers never see.
   The scroll is only the fallback for a table that still cannot fit.
   .compare has its own scroll wrapper. testsuite.js checks for this. */
@media (max-width:600px){
  table:not(.compare){display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
                      font-size:.8rem}
  table:not(.compare) th,
  table:not(.compare) td{padding:.45rem .4rem; overflow-wrap:break-word; hyphens:auto}
}
th,td{border:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top}
th{background:var(--cream-2); font-weight:800}

/* ---------- prose pages ---------- */
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.4rem}
.prose{max-width:74ch}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.85rem; color:var(--ink-2); padding:1rem 0 0; margin:0; list-style:none; display:flex; gap:.4rem; flex-wrap:wrap}
.crumbs li{margin:0}
.crumbs li+li::before{content:"›"; margin-right:.4rem; color:var(--ink-3)}

/* ---------- newsletter ---------- */
.news{background:linear-gradient(135deg,#fdf0df,#fbe6ec); border:1px solid #f0d6c3; border-radius:var(--r-lg); padding:32px; text-align:center}
.news form{display:flex; gap:.6rem; max-width:450px; margin:1rem auto 0; flex-wrap:wrap}
.news input{flex:1 1 200px; font:inherit; padding:.7rem 1rem; border-radius:999px; border:2px solid #ecc9b2; background:#fff; color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#cec3b5; padding:44px 0 26px; margin-top:24px}
.site-footer h2{color:#fff; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:.6rem}
.site-footer a{color:#c3b6a5; text-decoration:none; display:block; padding:.15rem 0; font-size:.89rem}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:0}
.fgrid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:24px}
.legal{border-top:1px solid rgba(255,255,255,.14); margin-top:26px; padding-top:16px; font-size:.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ---------- no-JS ---------- */
.nojs{display:none}
.no-js .nojs{display:block}
.no-js .needs-js{display:none}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .maker-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .nav{order:3; width:100%; border-top:1px solid var(--line); padding-top:.4rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .fgrid{grid-template-columns:1fr}
  .sheet{padding:22px 18px}
  .maker{padding:20px}
  section{padding:38px 0}
}

/* ---------- print ---------- */
/* Print is a WHITELIST, not a blacklist.
   The old rule hid a list of known page furniture, which meant every section
   added afterwards printed too — the whole home page came out instead of one
   worksheet. app.js now clones the sheets into #pp-print and sets
   .pp-printing on <body>; here we hide every other top-level child. Any new
   section is hidden automatically, forever, because it is not #pp-print. */
#pp-print{display:none}

/* ---------------------------------------------- "this app can't print" note
   Shown only inside a social app's built-in browser, where window.print() does
   nothing at all. Deliberately calm rather than alarming: it is not an error,
   it is a signpost. */
.pp-help{
  margin:.9rem 0 0; padding:.95rem 1.1rem;
  background:var(--card); border:2px solid var(--clay); border-radius:var(--r);
  box-shadow:var(--shadow); max-width:34rem;
}
.pp-help p{margin:0 0 .45rem; font-size:.92rem; line-height:1.45; color:var(--ink-2)}
.pp-help .pp-help-t{font-weight:800; color:var(--ink); font-size:1rem}
.pp-help .pp-help-how{color:var(--ink)}
.pp-help-row{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.pp-help-url{
  width:100%; margin-top:.55rem; font:inherit; font-size:.8rem;
  padding:.4rem .55rem; border-radius:8px; color:var(--ink-2);
  border:1px solid var(--line); background:var(--cream-2);
}

@media print{
  *{background:transparent !important; box-shadow:none !important; color:#000 !important}
  body{background:#fff; font-size:12pt}
  @page{margin:14mm}

  /* Nothing prints unless it is a worksheet. */
  body.pp-printing > *{display:none !important}
  body.pp-printing > #pp-print{display:block !important}

  /* Fallback for any page that prints without going through the button. */
  body:not(.pp-printing) .site-header,
  body:not(.pp-printing) .site-footer,
  body:not(.pp-printing) .no-print,
  body:not(.pp-printing) .skip,
  body:not(.pp-printing) nav,
  body:not(.pp-printing) form{display:none !important}

  #pp-print .sheet{max-width:none; padding:0; border-radius:0; margin:0; border:0}
  #pp-print .sheet + .sheet{page-break-before:always; margin-top:0}
  /* Density: word problems are the only layout that can spill onto a second
     sheet at Letter size. Tightened here only — the screen stays roomy. */
  .mark-screen{display:none !important}
  .mark-print{display:block !important}
  #pp-print .problems{gap:11px 24px}
  /* Reading sheets are dense by nature — one passage plus questions. Tighten
     for paper only; the screen stays comfortable to read. */
  #pp-print .sheet .instruct{font-size:.82rem; margin-bottom:7px}
  #pp-print .passage{padding:8px 12px; margin-bottom:9px}
  #pp-print .sheet .passage h4{font-size:.98rem; margin-bottom:.22rem}
  #pp-print .sheet .passage p{font-size:.85rem; line-height:1.4; margin-bottom:.32rem}
  #pp-print .rq > li{margin-bottom:6px}
  #pp-print .sheet .rq-q{font-size:.86rem; margin-bottom:.12rem}
  #pp-print .rq-opts,#pp-print .rq-seq{gap:0 16px}
  #pp-print .sheet .rq-opts li,#pp-print .sheet .rq-seq li{font-size:.83rem; line-height:1.32}
  #pp-print .rq-keys{margin-top:7px; padding-top:4px}
  #pp-print .sheet .rq-keys li{font-size:.76rem; line-height:1.3}
  #pp-print .wordprob{line-height:1.45; padding:3px 3px}
  #pp-print .sheet-foot{margin-top:16px}
  #pp-print li,#pp-print .prob,#pp-print .wordprob,
  #pp-print .trace,#pp-print .bank{break-inside:avoid; page-break-inside:avoid}
  .ans.filled{color:#215139 !important; border-bottom-color:#215139 !important}
  .trace .glyphs{color:#bbb !important}
  .trace .glyphs .solid{color:#000 !important}
}

/* =========================================================================
   Signup, shop and product pages
   ========================================================================= */

/* ---------------------------------------------------------------- signup */
/* One email field and a button on one line. It was previously a two-field
   block at 620px with a full-width button — sized for a weekly sheet matched to
   a child's year. With one short question to ask, that much furniture reads as
   a bigger commitment than it is. */
.signup{margin:1.1rem auto 0; max-width:440px; text-align:left}
.signup-blurb{max-width:46ch; margin-left:auto; margin-right:auto}
.signup-row{display:flex; gap:.5rem; flex-wrap:wrap}
.signup input{
  flex:1 1 200px; min-width:0;
  font:inherit; font-size:.92rem; padding:.5rem .8rem; border-radius:10px;
  border:2px solid var(--line-strong); background:var(--card); color:var(--ink);
}
.signup input:focus{border-color:var(--ink-3)}
.signup .btn{flex:0 0 auto; padding:.5rem 1.1rem; font-size:.92rem}
.signup .consent{margin:.6rem 0 0; text-align:center}
.signup-inline{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; margin:1.5rem 0; text-align:center;
}
.signup-inline h2{font-size:1.35rem}
@media (max-width:420px){ .signup .btn{width:100%} }
[data-news-done]{font-weight:800; color:var(--sage); text-align:center; display:block; margin-top:1rem}

/* ------------------------------------------------------------------ shop */
.card.product .product-cover{display:block; border-bottom:1px solid var(--line); background:var(--cream-2); line-height:0}
.card.product .product-cover img{width:100%; height:auto; display:block}
.card.product .price{font-size:1.15rem; font-weight:900; margin:0 0 .1rem; color:var(--accent,var(--clay))}
.tag-free{
  font-size:.63rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  background:var(--sage-soft); color:var(--sage); padding:.18rem .5rem; border-radius:999px;
  vertical-align:middle; margin-left:.35rem;
}
.card.product.featured{border:2px solid var(--sage)}

.product-hero{display:grid; grid-template-columns:300px minmax(0,1fr); gap:34px; align-items:start}
.product-shot img{
  width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
}
.price-big{font-size:2rem; font-weight:900; letter-spacing:-.03em; margin:.6rem 0 .2rem; color:var(--accent,var(--clay))}
.ticks{list-style:none; padding:0; margin:1.4rem 0 0}
.ticks li{position:relative; padding-left:1.6rem; margin-bottom:.45rem; color:var(--ink-2)}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--sage); font-weight:900;
}
.btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none}
.btn[disabled]:hover{transform:none; background:var(--clay)}
code{background:var(--cream-2); border:1px solid var(--line); border-radius:5px; padding:.05rem .3rem; font-size:.88em}

@media (max-width:760px){
  .product-hero{grid-template-columns:1fr}
  .product-shot{max-width:260px}
}
@media print{ .signup,.signup-inline,.product-shot{display:none !important} }

/* ---------- pinterest save block ---------- */
.pin-block{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow);
}
.pin-img{
  width:100%; height:auto; display:block; border-radius:var(--r);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.pin-block h2{font-size:1.3rem}
.pin-block p{margin:0 0 .6rem; color:var(--ink-2)}
@media (max-width:640px){ .pin-block{grid-template-columns:1fr} .pin-img{max-width:200px} }
@media print{ .pin-block{display:none !important} }

/* ---------- the free sample block ---------- */
.freebie{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:34px; align-items:center;
  background:var(--card); border:2px solid var(--sage); border-radius:var(--r-lg);
  padding:26px 30px; box-shadow:var(--shadow);
}
.freebie .kicker{color:var(--sage)}
.freebie h2{margin-bottom:.4rem}
.freebie p{color:var(--ink-2)}
.freebie-shot img{
  width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
}
.freebie .meta{margin-top:1rem}
@media (max-width:700px){ .freebie{grid-template-columns:1fr} .freebie-shot{max-width:200px} }

/* ---------- feedback ---------- */
.feedback{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin:1.6rem 0;
}
.feedback fieldset{border:0; margin:0; padding:0}
.feedback legend{font-weight:800; font-size:1rem; padding:0; margin-bottom:.6rem}
.fb-buttons{display:flex; gap:.5rem; flex-wrap:wrap}
.fb-more{margin-top:.9rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start}
.fb-more label{font-size:.88rem; font-weight:800}
.fb-more .opt{font-weight:700; color:var(--ink-3)}
.feedback textarea{
  width:100%; font:inherit; font-size:.94rem; padding:.6rem .8rem; border-radius:10px;
  border:2px solid var(--line-strong); background:var(--card); color:var(--ink); resize:vertical;
}
.fb-note{margin:.7rem 0 0}
.fb-thanks{font-weight:800; color:var(--sage); margin:0}
@media print{ .feedback{display:none !important} }

/* ---------- launch welcome band ---------- */
.welcome{
  background:linear-gradient(180deg,var(--cream-2),var(--cream));
  border-bottom:1px solid var(--line);
  padding:34px 0 30px;
}
.welcome-inner{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start;
  background:var(--card); border:2px solid var(--sage); border-radius:var(--r-lg);
  padding:26px 30px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.welcome-inner::before{
  content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--sage);
}
.welcome-mark{
  width:82px; height:82px; border-radius:18px; background:var(--cream-2);
  display:grid; place-items:center; flex:none; margin-left:6px;
}
.welcome-mark svg{width:54px;height:54px}
.welcome-kicker{
  font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sage); margin:0 0 .3rem;
}
.welcome h2{font-size:clamp(1.35rem,2.5vw,1.85rem); margin:0 0 .5rem}
.welcome-body{color:var(--ink-2); max-width:64ch; margin:0 0 1rem}
.welcome-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin:0}
.welcome-foot{
  font-size:.87rem; color:var(--ink-3); margin:.9rem 0 0; font-weight:700;
  border-top:1px solid var(--line); padding-top:.8rem;
}
@media (max-width:620px){
  .welcome-inner{grid-template-columns:1fr; padding:22px 20px 22px 24px}
  .welcome-mark{display:none}
}
@media print{ .welcome{display:none !important} }

/* ---------- comparison table ---------- */
.compare-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare{width:100%; border-collapse:collapse; background:var(--card); min-width:520px}
.compare thead th{
  background:var(--ink); color:#fff; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.75rem 1rem; border-color:var(--ink);
}
.compare thead th:last-child{background:var(--sage); border-color:var(--sage)}
.compare td{padding:.85rem 1rem; vertical-align:top}
.compare tbody tr:nth-child(odd) td{background:var(--cream-2)}
.compare td:first-child{color:var(--ink-2); width:48%}
.compare td:last-child{border-left:3px solid var(--sage)}

/* ---------- founder byline on the about page ---------- */
.prose .byline{
  font-size:1.18rem; border-left:5px solid var(--clay); padding:.1rem 0 .1rem 1.1rem;
  margin:1.4rem 0 1.2rem;
}

/* ---------- authorship byline ---------- */
.byline-box{
  background:var(--cream-2); border:1px solid var(--line); border-left:5px solid var(--clay);
  border-radius:var(--r); padding:12px 16px; margin:1.2rem 0;
}
.byline-box p{margin:0 0 .3rem; font-size:.92rem}
.byline-box .tiny{color:var(--ink-2)}