/* Backstage, the opening moment. Three materials: exercise book cover board, the white name label, green pen ink. */
@font-face { font-family: "Vollkorn"; src: url("fonts/vollkorn-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("fonts/vollkorn-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --board: #116149;        /* the cover. Never red (schools tell teachers not to mark in it) and never blue (her school's logo colour) */
  --board-deep: #0b4533;
  --on: #fff;              /* type on the cover */
  --teach: #17181c;        /* the teacher's margin notes */
  --teach-deep: #000;
  --label: #f7f7f3;        /* the name label */
  --page: #fcfcfa;
  --ink: #17181c;
  --soft: #54565e;
  --pen: #0a7d4f;          /* green pen */
  --pen-wash: #e6f3ec;
  --line: rgba(23, 24, 28, .2);
  --serif: "Vollkorn", Georgia, "Times New Roman", serif;
  --sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(1.25rem, 4.6vw, 4.75rem);
  --r: 8px;
}

/* cover colours to choose between (add ?cover=yellow to the address); green is the default */
html[data-board="yellow"] { --board: #f5c52b; --board-deep: #c99a0c; --on: #17181c; }
html[data-board="plum"] { --board: #6a2c8c; --board-deep: #4c1d66; --teach: #6a2c8c; --teach-deep: #4c1d66; }
html[data-board="orange"] { --board: #ec7a1c; --board-deep: #c45f0c; --on: #17181c; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--board); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.cover :focus-visible, .end :focus-visible { outline-color: var(--on); }

/* ------------------------------------------------------------ the pinned stage */
.moment { position: relative; height: 1150vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; perspective: 240vw; perspective-origin: 16% 50%; background: var(--page); }

/* ------------------------------------------------------------ the cover */
.cover {
  position: absolute; inset: 0; z-index: 2; color: var(--on); background-color: var(--board);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 16px 16px 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  grid-template-areas: "brand by" "head label" "cta note"; column-gap: clamp(1.5rem, 5vw, 5rem); row-gap: 1.25rem;
  padding: clamp(1.4rem, 3.4vw, 3rem) var(--pad) clamp(1.6rem, 3.8vw, 3.25rem) calc(var(--pad) + 14px);
}
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0)); pointer-events: none; }
.staple { position: absolute; left: 9px; width: 4px; height: 34px; border-radius: 2px; background: linear-gradient(90deg, #7f8389, #eceef0 45%, #9a9ea4); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.staple.a { top: 22%; } .staple.b { bottom: 22%; }
.cover-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(6, 22, 16, .1), rgba(6, 22, 16, .62)); opacity: 0; pointer-events: none; }

.brand { grid-area: brand; font: 700 clamp(1.35rem, 1.9vw, 1.7rem)/1 var(--serif); letter-spacing: -.005em; }
.by { grid-area: by; justify-self: end; align-self: center; font-size: .95rem; }
.head { grid-area: head; align-self: center; font: 560 clamp(2.5rem, 6.3vw, 6.1rem)/.98 var(--serif); letter-spacing: -.018em; text-wrap: balance; max-width: 13.5em; }
.label { grid-area: label; align-self: center; justify-self: end; width: min(100%, 26rem); background: var(--label); color: var(--ink); padding: 7px; border-radius: 3px; transform: rotate(-1.4deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .22), 0 10px 22px -14px rgba(6, 26, 19, .7); }
.label dl { border: 2px solid var(--board); border-radius: 2px; padding: 1rem 1.15rem 1.15rem; display: grid; gap: .7rem; }
.label dl > div { display: grid; grid-template-columns: 4.4rem 1fr; align-items: baseline; border-bottom: 1px solid rgba(23, 24, 28, .38); padding-bottom: .15rem; }
.label dt { font-size: .82rem; font-weight: 500; color: var(--soft); }
.label dd { font: 500 clamp(1.3rem, 1.9vw, 1.6rem)/1.2 var(--serif); }
.head h1 { font: inherit; letter-spacing: inherit; }
.for-courses { text-wrap: balance; max-width: 30em; margin-top: clamp(.8rem, 1.6vw, 1.4rem); font: 500 clamp(1.05rem, 1.55vw, 1.4rem)/1.3 var(--sans); letter-spacing: 0; }
.note { grid-area: note; justify-self: end; align-self: end; max-width: 23.5rem; font-size: .95rem; text-align: right; }
.cta { grid-area: cta; align-self: end; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: var(--r); border: 2px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn:active { transform: translateY(2px) scale(.985); }
.btn-label { background: var(--label); color: var(--ink); box-shadow: 0 3px 0 rgba(6, 26, 19, .45); }
.btn-label:hover { box-shadow: 0 5px 0 rgba(6, 26, 19, .45); transform: translateY(-2px); }
.btn-label:active { box-shadow: 0 1px 0 rgba(6, 26, 19, .45); transform: translateY(2px); }
.btn-line { background: transparent; color: var(--on); border-color: var(--on); }
.btn-line:hover { background: var(--on); color: var(--board); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink); }

/* ------------------------------------------------------------ inside the book */
.inside { position: absolute; inset: 0; z-index: 1; background: var(--page); overflow: hidden; }
.inside-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(6, 22, 16, .62), rgba(6, 22, 16, .2) 42%, rgba(6, 22, 16, 0) 78%); }
.sheet { min-height: 100%; display: grid; grid-template-columns: minmax(15.5rem, 29%) minmax(0, 1fr); grid-template-areas: "margin work"; will-change: transform; }

.work { grid-area: work; align-self: center; width: 100%; max-width: 58rem; padding: clamp(1.25rem, 3vh, 2.5rem) var(--pad) clamp(1.25rem, 3vh, 2.5rem) clamp(1.5rem, 4vw, 4rem); }
.who { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.who-name { font: 600 1.15rem/1.2 var(--serif); }
.who-lesson { font-size: .92rem; color: var(--soft); }
.steps { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .8rem; font-size: .92rem; color: var(--soft); }
.steps li { display: inline-flex; align-items: center; gap: .35rem; }
.steps .tick { width: .85em; height: .85em; }
.steps .tick path { stroke-dashoffset: 0; }
.steps .now { color: var(--ink); font-weight: 600; box-shadow: 0 2px 0 var(--board); }
.q-label { margin-top: clamp(.9rem, 2.6vh, 1.75rem); font: 600 clamp(1.7rem, 3.1vw, 2.9rem)/1.1 var(--serif); letter-spacing: -.01em; }
.q-text { margin-top: .45rem; max-width: 62ch; font-size: clamp(1.0625rem, 1.2vw, 1.2rem); }

.answer { display: block; width: 100%; margin-top: clamp(.8rem, 2vh, 1.25rem); padding: .95rem 1.15rem 1.05rem; border: 2px solid var(--line); border-radius: var(--r); background: #fff; font: 400 clamp(1.1rem, 1.56vw, 1.5rem)/1.5 var(--serif); color: var(--ink); transition: border-color .3s; }
.answer .green { color: var(--pen); }
textarea.answer { resize: vertical; }
textarea.answer:focus-visible { outline-offset: 0; border-color: var(--ink); }
[data-state="green"] .answer, [data-state="done"] .answer { border-color: var(--pen); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: currentColor; animation: blink 1.05s steps(1) infinite; }
[data-state="green"] .caret { background: var(--pen); }
[data-state="handed"] .caret, [data-state="done"] .caret { visibility: hidden; }
@keyframes blink { 50% { opacity: 0; } }

.tick { width: 1em; height: 1em; flex: none; }
.tick path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.3, .7, .2, 1) .08s; }

.checks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem .32rem .6rem; border: 2px dashed var(--line); border-radius: var(--r); font-size: .95rem; color: var(--soft); transition: color .3s, border-color .3s, background-color .3s; }
.chip.ok { border-style: solid; border-color: var(--pen); color: var(--pen); background: var(--pen-wash); animation: pop .5s cubic-bezier(.2, 1.4, .3, 1); }
.chip.ok .tick path { stroke-dashoffset: 0; }
@keyframes pop { 0% { transform: scale(.94); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin-top: .9rem; }
.count { font-size: .95rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.foot-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hand { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: var(--r); border: 2px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600; line-height: 1.2; transition: background-color .3s, color .3s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.hand .tick { width: 0; transition: width .3s; }
[data-state="handed"] .hand, [data-state="green"] .hand, [data-state="done"] .hand { background: transparent; color: var(--ink); transform: translateY(1px); }
[data-state="handed"] .hand .tick, [data-state="green"] .hand .tick, [data-state="done"] .hand .tick { width: 1em; }
[data-state="handed"] .hand .tick path, [data-state="green"] .hand .tick path, [data-state="done"] .hand .tick path { stroke-dashoffset: 0; }
[data-try] { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .4s, border-color .2s; }
[data-state="done"] [data-try], [data-state="own"] [data-try] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-state="own"] .hand { display: none; }

/* ------------------------------------------------------------ the teacher's margin */
.margin { grid-area: margin; border-right: 2px solid var(--board); padding: clamp(1.25rem, 3vh, 2.5rem) clamp(1.1rem, 2.2vw, 2.25rem) clamp(1.25rem, 3vh, 2.5rem) calc(var(--pad) * .7 + 14px); display: flex; flex-direction: column; justify-content: center; color: var(--teach); }
.m-title { font: 600 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--serif); }
.m-wait { margin-top: .5rem; font-size: .95rem; color: var(--soft); transition: opacity .3s; }
.m-mark { display: grid; opacity: 0; transform: translateX(-14px); transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1); }
.m-k { margin-top: 1.1rem; font-size: .92rem; color: var(--soft); }
.band { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; font: 700 clamp(3.1rem, 6.4vw, 6.2rem)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.band-now { display: inline-block; }
.band-now.flip { animation: flip .6s cubic-bezier(.2, 1.3, .3, 1); }
@keyframes flip { 0% { transform: translateY(.3em) rotate(-2deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.band-was { font: 500 1rem/1.2 var(--sans); letter-spacing: 0; color: var(--soft); text-decoration: line-through; text-decoration-color: var(--teach); }
.band-was:empty { display: none; }
.ideas { margin-top: .4rem; display: grid; gap: .3rem; font-size: clamp(1.0625rem, 1.2vw, 1.2rem); }
.ideas li { display: flex; align-items: baseline; gap: .5rem; color: var(--soft); transition: color .35s; }
.ideas li .tick { transform: translateY(.14em); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .3s; }
.ideas li.shown { color: var(--teach); }
.ideas li.shown .tick { box-shadow: none; }
.ideas li.shown .tick path { stroke-dashoffset: 0; }
.ideas li.pen { color: var(--pen); }
.ideas small { font-size: .85rem; color: var(--soft); white-space: nowrap; }
.ideas li.shown small { display: none; }
.next { margin-top: .2rem; color: var(--ink); max-width: 30ch; min-height: 6.4rem; }
.btn-agree { justify-self: start; margin-top: 1.1rem; background: var(--teach); color: #fff; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s, transform .16s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s; }
.btn-agree:hover { background: var(--teach-deep); }
.btn-agree .tick { width: 0; transition: width .3s; }
[data-state="done"] .btn-agree { opacity: 1; visibility: visible; transition-delay: 0s; }
.margin.agreed .btn-agree { background: transparent; color: var(--teach); border-color: var(--teach); cursor: default; }
.margin.agreed .btn-agree .tick { width: 1em; }
.margin.agreed .btn-agree .tick path { stroke-dashoffset: 0; }

[data-state="handed"] .m-mark, [data-state="green"] .m-mark, [data-state="done"] .m-mark, [data-state="own"]:not([data-empty]) .m-mark { opacity: 1; transform: none; }
[data-state="handed"] .m-wait, [data-state="green"] .m-wait, [data-state="done"] .m-wait, [data-state="own"]:not([data-empty]) .m-wait { display: none; }

.margin > [data-try] { align-self: flex-start; margin-top: .8rem; }
/* beside the writing, the margin is one screen tall and stays put while the sheet slides, so its notes stay centred on screen */
@media (min-width: 821px) { .margin { align-self: start; height: 100vh; height: 100dvh; } }
/* short laptop screens: the margin has to fit seven key ideas and the button */
@media (min-width: 821px) and (max-height: 760px) {
  .margin { padding-top: 1rem; padding-bottom: 1rem; }
  .band { font-size: clamp(2.8rem, 4.6vw, 4rem); }
  .m-k { margin-top: .65rem; }
  .ideas { grid-template-columns: 1fr 1fr; gap: .15rem .9rem; font-size: .95rem; }
  .ideas small { display: none; }
  .fb-draft { font-size: .95rem; line-height: 1.4; }
  [data-step="green"] .m-fb, [data-step="done"] .m-fb { display: none; }
  .next { min-height: 4.8rem; font-size: 1rem; }
  .btn-agree { margin-top: .7rem; }
}

/* ------------------------------------------------------------ the lesson's three views: game, evidence, writing */
.panel { display: none; }
[data-view="game"] .p-game, [data-view="evidence"] .p-evidence, [data-view="write"] .p-write { display: block; animation: panel-in .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.steps li.done .tick path { stroke-dashoffset: 0; }
.steps li .tick { display: none; } .steps li.done .tick { display: block; }

.game { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 2rem); margin-top: clamp(.8rem, 2vh, 1.25rem); align-items: start; }
.game video { display: block; width: 100%; aspect-ratio: 1040 / 650; object-fit: cover; border-radius: var(--r); background: #231b5e; }
.quiz-q { font: 600 clamp(1.15rem, 1.5vw, 1.45rem)/1.25 var(--serif); }
.quiz-opts { display: grid; gap: .5rem; margin-top: .75rem; }
.opt { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 3rem; padding: .6rem .9rem; text-align: left; font-size: 1rem; line-height: 1.3; background: #fff; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .2s, background-color .25s, color .25s, transform .16s cubic-bezier(.2, .8, .2, 1); }
.opt:hover { border-color: var(--ink); }
.opt:active { transform: translateY(2px) scale(.99); }
.opt .tick { width: 0; transition: width .25s; }
.opt.right { border-color: var(--pen); background: var(--pen-wash); color: var(--pen); animation: pop .5s cubic-bezier(.2, 1.4, .3, 1); }
.opt.right .tick { width: 1em; } .opt.right .tick path { stroke-dashoffset: 0; }
.opt.wrong { border-color: var(--ink); border-style: dashed; color: var(--soft); }
.quiz-why { margin-top: .75rem; min-height: 3em; color: var(--ink); }

.ev { display: grid; gap: .6rem; margin-top: clamp(.8rem, 2vh, 1.25rem); max-width: 44rem; }
.ev li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .7rem .95rem; border: 2px dashed var(--line); border-radius: var(--r); color: var(--soft); transition: border-color .3s, color .3s, background-color .3s; }
.ev li .tick { margin-top: .22em; color: var(--pen); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.ev li.in { border-style: solid; border-color: var(--pen); color: var(--ink); background: #fff; }
.ev li.in .tick { box-shadow: none; } .ev li.in .tick path { stroke-dashoffset: 0; }
.ev small { display: block; font-size: .88rem; color: var(--soft); }
.sketch { display: none; margin-top: .6rem; max-width: 25rem; }
.ev li.in .sketch { display: block; animation: panel-in .5s cubic-bezier(.2, .8, .2, 1); }
.sketch svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sketch figcaption { margin-top: .45rem; min-height: 1.5em; font: 400 1.08rem/1.4 var(--serif); color: var(--ink); }

/* the teacher's comment: drafted in the margin, then it lands above the student's answer */
.fb-note { display: none; margin-top: clamp(.7rem, 1.8vh, 1.1rem); padding: .75rem 1rem .8rem; border-left: 4px solid var(--teach); border-radius: 0 var(--r) var(--r) 0; background: #f0f0ec; }
[data-step="sent"] .fb-note, [data-step="green"] .fb-note, [data-step="done"] .fb-note { display: block; animation: panel-in .55s cubic-bezier(.2, .8, .2, 1); }
.fb-note .m-k { margin-top: 0; }
.fb-note p + p { margin-top: .2rem; }
.fb-ask { font-weight: 600; color: var(--pen); }
.m-next { display: none; }
[data-state="own"] .m-next { display: block; }
.m-fb { visibility: hidden; }
[data-step="feedback"] .m-fb, [data-step="sent"] .m-fb, [data-step="green"] .m-fb, [data-step="done"] .m-fb { visibility: visible; animation: panel-in .5s cubic-bezier(.2, .8, .2, 1); }
[data-state="own"] .m-fb { display: none; }
.fb-draft { margin-top: .2rem; color: var(--ink); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.45; max-width: 34ch; }
[data-step="feedback"] .fb-draft .caret { visibility: visible; }
.fb-draft .caret { visibility: hidden; }
.send { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; min-height: 2.75rem; padding: .55rem 1.1rem; border: 2px solid var(--teach); border-radius: var(--r); background: var(--teach); color: #fff; font-weight: 600; line-height: 1.2; transition: background-color .3s, color .3s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.send .tick { width: 0; transition: width .3s; }
[data-step="sent"] .send, [data-step="green"] .send, [data-step="done"] .send { background: transparent; color: var(--teach); transform: translateY(1px); }
[data-step="sent"] .send .tick, [data-step="green"] .send .tick, [data-step="done"] .send .tick { width: 1em; }
[data-step="sent"] .send .tick path, [data-step="green"] .send .tick path, [data-step="done"] .send .tick path { stroke-dashoffset: 0; }
/* once it is sent, the comment lives above the student's answer, so the margin keeps only the sent mark */
[data-step="green"] .fb-draft, [data-step="done"] .fb-draft, [data-step="green"] .m-fb .m-k, [data-step="done"] .m-fb .m-k { display: none; }
.btn-agree { margin-top: .7rem; }

/* ------------------------------------------------------------ the end note (prototype only) */
.end { background: var(--board); color: var(--on); padding: clamp(3rem, 9vw, 7rem) var(--pad); display: grid; gap: 1.25rem; justify-items: start; }
.end p { font: 500 clamp(1.3rem, 2.2vw, 1.9rem)/1.25 var(--serif); max-width: 30ch; }

/* ------------------------------------------------------------ phones and narrow windows */
@media (max-width: 820px) {
  .stage { perspective: 300vw; }
  .cover { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "brand" "head" "label" "note" "cta"; row-gap: 1rem; border-radius: 0 12px 12px 0; padding-left: calc(var(--pad) + 16px); }
  .by { display: none; }
  .brand::after { content: " by Amy Garside Media"; font: 400 .9rem var(--sans); letter-spacing: 0; white-space: nowrap; }
  .head { align-self: start; margin-top: .75rem; font-size: clamp(2.3rem, 10.6vw, 3.6rem); }
  .label { justify-self: start; align-self: center; width: min(100%, 19.5rem); }
  .label dl { padding: .8rem .95rem .95rem; gap: .55rem; }
  .note { justify-self: start; text-align: left; }
  .cta .btn { flex: 1 1 auto; }

  .sheet { grid-template-columns: 1fr; grid-template-areas: "work" "margin"; align-content: start; }
  .work { align-self: start; padding: 1.1rem var(--pad) 1rem; }
  .who-name { font-size: 1.05rem; }
  .steps { gap: .2rem .9rem; margin-top: .6rem; font-size: .88rem; }
  .q-label { margin-top: .8rem; font-size: 1.55rem; }
  .q-text { font-size: 1rem; line-height: 1.45; }
  .m-title { font-size: 1.15rem; }
  .answer { padding: .75rem .9rem .85rem; font-size: 1.08rem; line-height: 1.45; }
  .chip { font-size: .9rem; }
  .foot { margin-top: .7rem; }
  .margin { border-right: 0; border-top: 2px solid var(--board); padding: 1rem var(--pad) 1.5rem; justify-content: start; }
  .m-k { margin-top: .8rem; }
  .band { font-size: 2.9rem; }
  .ideas { grid-template-columns: 1fr 1fr; gap: .3rem 1rem; font-size: .95rem; }
  .ideas small { display: none; }
  .next { max-width: none; font-size: 1rem; line-height: 1.4; min-height: 4.2rem; }
  .btn-agree { margin-top: .8rem; }
  .game { grid-template-columns: 1fr; gap: .9rem; }
  .quiz-why { min-height: 4.2em; }
  .m-fb { display: none; visibility: visible; }
  [data-step="feedback"] .m-fb, [data-step="sent"] .m-fb, [data-step="green"] .m-fb, [data-step="done"] .m-fb { display: block; }
  .fb-draft { max-width: none; }
  [data-try] { display: none; }
  [data-state="done"] [data-try], [data-state="own"] [data-try] { display: inline-flex; }
}

/* ------------------------------------------------------------ no scroll driven motion: plain sections, everything shown */
.static .moment { height: auto; }
.static .stage { position: static; height: auto; overflow: visible; perspective: none; }
.static .cover { position: relative; min-height: 100vh; min-height: 100dvh; border-radius: 0; }
.static .inside { position: relative; }
.static .inside-shade, .static .cover-shade { display: none; }
.static .panel { display: block; margin-top: 2rem; }
.static .fb-note, .static .m-fb { display: block; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ============================================================ the page below the opening */
main { background: var(--page); }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
.grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.sec { max-width: 92rem; margin-inline: auto; padding: clamp(4.5rem, 10.5vw, 9.5rem) var(--pad) 0; }
.sec h2, .inner-cover h2, .send-sec h2 { font: 560 clamp(2.1rem, 4.7vw, 4.1rem)/1.02 var(--serif); letter-spacing: -.016em; text-wrap: balance; }
.sec-text { max-width: 44rem; }
.sec-text p, .price-notes p, .sci-after p, .inner-lede, .send-text p { margin-top: 1.1rem; max-width: 62ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }
p.fine, .fine { font-size: .98rem; color: var(--soft); line-height: 1.45; }

/* play it yourself: two books to pick up */
.play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem clamp(2rem, 6vw, 6.5rem); align-items: center; }
.play .fine { grid-column: 1; margin-top: 0; }
.books { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.6vw, 2.25rem); perspective: 1500px; }
.book { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; aspect-ratio: 3 / 4; padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.7rem) calc(clamp(1rem, 2vw, 1.6rem) + 12px); border-radius: 0 12px 12px 0; color: #fff; text-decoration: none; background-color: var(--board); transform-origin: 0 50%; box-shadow: 0 1px 0 rgba(0, 0, 0, .22), 16px 20px 32px -20px rgba(8, 30, 22, .6); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s cubic-bezier(.2, .8, .2, 1); }
.book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-radius: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); pointer-events: none; }
.book-staff { background-color: #23252b; }
.book:hover, .book:focus-visible { transform: rotateY(-14deg) translateY(-6px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22), 30px 26px 40px -22px rgba(8, 30, 22, .65); }
.book:active { transform: rotateY(-6deg) translateY(0); }
.book-label { align-self: flex-start; max-width: 100%; padding: .85rem 1.05rem .95rem; background: var(--label); color: var(--ink); border-radius: 3px; transform: rotate(-1.3deg); box-shadow: inset 0 0 0 5px var(--label), inset 0 0 0 7px var(--board), 0 1px 0 rgba(0, 0, 0, .2); }
.book-staff .book-label { box-shadow: inset 0 0 0 5px var(--label), inset 0 0 0 7px #23252b, 0 1px 0 rgba(0, 0, 0, .2); }
.book-k { display: block; font-size: .88rem; color: var(--soft); }
.book-t { display: block; font: 600 clamp(1.25rem, 2.3vw, 2rem)/1.08 var(--serif); letter-spacing: -.01em; }
.book-note { max-width: 20ch; font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.35; }

/* courses and the two films */
.courses { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 2rem clamp(2rem, 6vw, 6.5rem); align-items: start; }
.courses .sec-text { position: sticky; top: clamp(1.5rem, 6vh, 4rem); }
.films { display: grid; gap: clamp(1.75rem, 3.4vw, 3rem); }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #1d1b3a; }
.film figcaption { margin-top: .7rem; max-width: 54ch; }
.film-t { display: block; font: 600 clamp(1.2rem, 1.6vw, 1.45rem)/1.2 var(--serif); }
.film-b { margin-left: clamp(0rem, 7vw, 6rem); }

.sci-after { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.sci-after p { margin-top: 0; padding-left: 1.1rem; border-left: 4px solid var(--pen); }

/* the facts printed inside the back cover */
.inner-cover { margin-top: clamp(4.5rem, 10.5vw, 9.5rem); padding: clamp(3.5rem, 8vw, 7.5rem) var(--pad); background-color: var(--board); color: var(--on); }
.inner-wrap { max-width: 74rem; margin-inline: auto; }
.inner-cover :focus-visible, .send-text :focus-visible, .foot-page :focus-visible { outline-color: #fff; }
.facts { margin-top: clamp(1.75rem, 3.5vw, 3rem); border-top: 2px solid currentColor; }
.facts > div { display: grid; grid-template-columns: minmax(11rem, 19rem) minmax(0, 1fr); gap: .35rem clamp(1.5rem, 4vw, 4rem); padding: 1.1rem 0 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.facts dt { font: 600 clamp(1.15rem, 1.5vw, 1.4rem)/1.25 var(--serif); }
.facts dd { max-width: 58ch; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); }

/* the price list, on label stock */
.price { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 6vw, 6.5rem); align-items: start; }
.price-card { padding: 8px; background: var(--label); border-radius: 3px; transform: rotate(.6deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .16), 0 22px 36px -26px rgba(8, 30, 22, .55); }
.prices { padding: .4rem clamp(1rem, 2vw, 1.6rem); border: 2px solid var(--board); border-bottom: 0; border-radius: 2px 2px 0 0; }
.prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid rgba(23, 24, 28, .32); }
.prices > div:last-child { border-bottom: 0; }
.prices dt { max-width: 26ch; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); }
.prices dd { font: 600 clamp(1.6rem, 2.9vw, 2.5rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pilot { padding: 1rem clamp(1rem, 2vw, 1.6rem) 1.1rem; border: 2px solid var(--board); border-radius: 0 0 2px 2px; background: var(--pen-wash); color: #075c3a; font-weight: 600; }
.price-notes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 6vw, 6.5rem); }

/* who builds it */
.about { display: grid; grid-template-columns: minmax(12rem, 21rem) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6.5rem); align-items: center; }
.about-photo { display: block; width: 100%; height: auto; border: 8px solid var(--label); border-radius: 3px; transform: rotate(-1.6deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .16), 0 22px 36px -26px rgba(8, 30, 22, .55); }

/* questions */
.faq-list { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 62rem; border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.15rem 0; font: 600 clamp(1.15rem, 1.75vw, 1.5rem)/1.25 var(--serif); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 400 1.6rem/1 var(--sans); color: var(--pen); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover span { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
.faq-list p { max-width: 62ch; padding: 0 0 1.3rem; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); }

/* send me one unit: a fresh cover with a blank label */
.send-sec { margin-top: clamp(4.5rem, 10.5vw, 9.5rem); padding: clamp(4rem, 9vw, 8rem) var(--pad); background-color: var(--board); color: var(--on); }
.send-wrap { max-width: 86rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 2rem clamp(2rem, 6vw, 6.5rem); align-items: start; }
.send-form.label { grid-area: auto; justify-self: stretch; align-self: start; width: 100%; padding: 8px; transform: none; }
.send-fields { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: baseline; padding: clamp(1.1rem, 2.4vw, 1.9rem); border: 2px solid var(--board); border-bottom: 0; border-radius: 2px 2px 0 0; }
.send-fields label { font-size: .95rem; font-weight: 500; color: var(--soft); }
.send-fields input, .send-fields textarea { width: 100%; min-height: 2.75rem; padding: .4rem .1rem; border: 0; border-bottom: 1.5px solid rgba(23, 24, 28, .5); border-radius: 0; background: transparent; color: var(--ink); font: 500 clamp(1.1rem, 1.5vw, 1.3rem)/1.3 var(--serif); }
.send-fields textarea { padding: .6rem .7rem; border: 1.5px solid rgba(23, 24, 28, .5); border-radius: 4px; resize: vertical; line-height: 1.45; }
.send-fields input:focus-visible, .send-fields textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.help { grid-column: 2; margin-top: -.2rem; font-size: .92rem; color: var(--soft); }
.send-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1.1rem, 2.4vw, 1.9rem); border: 2px solid var(--board); border-radius: 0 0 2px 2px; }
.btn-send { background: var(--board); color: #fff; box-shadow: 0 3px 0 var(--board-deep); }
.btn-send:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--board-deep); }
.btn-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--board-deep); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.foot-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem clamp(1.5rem, 4vw, 3rem); padding: 1.75rem var(--pad) 2rem; background: var(--board-deep); color: #fff; font-size: .98rem; }
.foot-brand { font: 700 1.25rem/1 var(--serif); }
.foot-brand span { font: 400 .95rem var(--sans); }
.foot-page a { display: inline-block; padding: .5rem 0; }
.credit span { color: #ff6fb5; }

@media (max-width: 820px) {
  .play, .courses, .price, .about, .send-wrap { grid-template-columns: minmax(0, 1fr); }
  .play .fine { grid-column: 1; }
  .books { grid-column: 1; grid-row: auto; }
  .courses .sec-text { position: static; }
  .film-b { margin-left: 0; }
  .facts > div { grid-template-columns: 1fr; }
  .price-card { transform: none; }
  .price-notes { grid-template-columns: 1fr; }
  .about-photo { max-width: 15rem; }
  .send-fields { grid-template-columns: 1fr; gap: .15rem; }
  .send-fields label { margin-top: .7rem; }
  .help { grid-column: 1; margin-top: .2rem; }
  .foot-page { flex-direction: column; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .book:hover, .book:focus-visible { transform: none; } }

/* the two small pages: thank you and not found */
.plain { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: 1.2rem; padding: var(--pad); padding-left: calc(var(--pad) + 14px); background-color: var(--board); color: #fff; }
.plain h1 { font: 560 clamp(2.4rem, 6vw, 5rem)/1 var(--serif); letter-spacing: -.016em; max-width: 14em; text-wrap: balance; }
.plain p { max-width: 52ch; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); }
.plain .brand { margin-bottom: 1rem; }
.plain :focus-visible { outline-color: #fff; }

.film figcaption { font-size: 1.0625rem; line-height: 1.5; }

/* the game clip can always be paused */
.clip { position: relative; }
.clip-hold { position: absolute; right: .6rem; bottom: .6rem; min-height: 2.75rem; padding: .45rem .9rem; border: 2px solid #fff; border-radius: var(--r); background: rgba(23, 24, 28, .82); color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background-color .2s, transform .16s cubic-bezier(.2, .8, .2, 1); }
.clip-hold:hover { background: #17181c; }
.clip-hold:active { transform: translateY(2px); }
.clip-hold:focus-visible { outline-color: #fff; outline-offset: 2px; }
.static .clip-hold { display: none; }

/* ============================================================ spacing pass, 10 Nov: more air between the parts */
.who { padding-bottom: .9rem; }
.steps { margin-top: 1.15rem; gap: .45rem 1.5rem; }
.q-label { margin-top: clamp(1.5rem, 4.2vh, 2.75rem); }
.q-text { margin-top: .9rem; line-height: 1.55; }
.game, .ev { margin-top: clamp(1.25rem, 3vh, 2rem); }
.quiz-opts { gap: .7rem; margin-top: 1rem; }
.quiz-why { margin-top: 1rem; }
.ev { gap: .85rem; }
.ev li { padding: .9rem 1.1rem; }
.fb-note { margin-top: clamp(1.1rem, 2.6vh, 1.75rem); padding: 1rem 1.25rem 1.05rem; }
.fb-note p + p { margin-top: .45rem; }
.answer { margin-top: clamp(1.1rem, 2.6vh, 1.75rem); padding: 1.15rem 1.35rem 1.25rem; line-height: 1.6; }
.under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.25rem; margin-top: 1.15rem; }
.under .checks { margin-top: 0; gap: .65rem; }
.chip { padding: .42rem .9rem .42rem .7rem; }
.gloss-open { min-height: 2.75rem; padding: .5rem 1.05rem; }
.foot { margin-top: 1.35rem; }
.m-wait { margin-top: .7rem; }
.m-k { margin-top: 1.6rem; }
.ideas { margin-top: .6rem; gap: .5rem; }
.fb-draft { margin-top: .45rem; line-height: 1.55; }
.margin .send { margin-top: 1rem; }
.btn-agree { margin-top: 1.1rem; }
.sec-text p, .price-notes p, .inner-lede, .send-text p { margin-top: 1.4rem; line-height: 1.6; }
.sec-text p.fine { margin-top: 1.1rem; }
.facts > div { padding: 1.35rem 0 1.4rem; }
.prices > div { padding: 1.2rem 0; }
.faq-list summary { padding: 1.35rem 0; }
.faq-list p { padding-bottom: 1.6rem; line-height: 1.6; }
.film figcaption { margin-top: 1rem; }
.film-t { margin-bottom: .25rem; }
.price-notes { margin-top: 1rem; }

/* the glossary panel */
.gloss { width: min(46rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100dvh - 2rem)); padding: 0; border: 0; border-radius: 12px; background: var(--page); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(8, 30, 22, .6); overflow: auto; }
.gloss::backdrop { background: rgba(8, 30, 22, .55); }
.gloss-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem clamp(1.1rem, 3vw, 2rem) 1rem; background: var(--page); border-bottom: 1px solid var(--line); }
.gloss-head h2 { font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--serif); }
.gloss-lede, .gloss-find, .gloss input, .gloss-list { margin-inline: clamp(1.1rem, 3vw, 2rem); }
.gloss-lede { margin-top: 1.1rem; color: var(--soft); }
.gloss-find { display: block; margin-top: 1.2rem; font-size: .95rem; font-weight: 500; }
.gloss input { display: block; width: calc(100% - 2 * clamp(1.1rem, 3vw, 2rem)); min-height: 3rem; margin-top: .4rem; padding: .5rem .8rem; border: 2px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; color: var(--ink); }
.gloss input:focus-visible { outline-offset: 0; border-color: var(--ink); }
.gloss-list { padding-bottom: 2rem; }
.gloss-list h3 { margin-top: 1.8rem; font: 600 1.25rem/1.2 var(--serif); color: var(--pen); }
.gloss-list dl > div { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.gloss-list dt { font-weight: 600; }
.gloss-list dd { margin-top: .2rem; max-width: 62ch; line-height: 1.55; }
.gloss-list p { margin-top: 1.5rem; }

@media (max-width: 820px) {
  .work { padding-top: 1.35rem; }
  .steps { margin-top: .9rem; gap: .35rem 1.1rem; }
  .q-label { margin-top: 1.3rem; }
  .answer { padding: .95rem 1.05rem 1.05rem; line-height: 1.55; }
  .foot { margin-top: 1.1rem; }
  .margin { padding-top: 1.4rem; padding-bottom: 2rem; }
  .m-k { margin-top: 1.25rem; }
  .ideas { gap: .45rem 1rem; }
}
/* short laptop screens keep the tighter fit so the margin's last button stays on screen */
@media (min-width: 821px) and (max-height: 760px) {
  .q-label { margin-top: 1rem; }
  .q-text { margin-top: .5rem; line-height: 1.45; }
  .answer { margin-top: .8rem; padding: .8rem 1rem .9rem; line-height: 1.5; }
  .fb-note { margin-top: .7rem; padding: .7rem 1rem; }
  .under { margin-top: .7rem; }
  .foot { margin-top: .7rem; }
  .m-k { margin-top: .65rem; }
  .ideas { margin-top: .3rem; gap: .15rem .9rem; }
  .btn-agree, .margin .send { margin-top: .7rem; }
}

/* audit fixes, 10 Nov: the journal is not painted until it is ready (no layout jump behind the cover), and the footer is
   dark enough for the pink in the designer credit to pass contrast */
.inside { visibility: hidden; }
.inside[data-ready] { visibility: visible; }
.foot-page { background: #073426; }

.send-hours { margin-top: 1.1rem; max-width: 46ch; font-size: 1rem; line-height: 1.5; }

/* ============================================================ review fixes, 10 Nov */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .7rem 1rem; border-radius: var(--r); background: var(--label); color: var(--ink); font-weight: 600; transition: top .15s; }
.skip:focus-visible { top: 1rem; outline-color: var(--ink); }
.narr { color: var(--soft); }
/* the lesson's own buttons are real: pressing one plays the run on */
button.hand, button.send { font: inherit; font-weight: 600; cursor: pointer; }
button.hand:active, button.send:active { transform: translateY(2px); }
[data-state="handed"] button.hand, [data-state="green"] button.hand, [data-state="done"] button.hand, [data-step="sent"] button.send, [data-step="green"] button.send, [data-step="done"] button.send { cursor: default; }
.steps button { min-height: 2.75rem; padding: .3rem 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.steps button:hover { text-decoration-color: currentColor; }
.steps .now button { text-decoration: none; }
.steps li { min-height: 2.75rem; }
/* when the band is agreed, the cover's name label comes back blank: the one thing to do next */
.mini-label { display: none; margin-top: 1.4rem; max-width: 17rem; padding: .9rem 1rem 1rem; border-radius: 3px; background: var(--label); color: var(--ink); text-decoration: none; transform: rotate(-1.2deg); box-shadow: inset 0 0 0 5px var(--label), inset 0 0 0 7px var(--board), 0 1px 0 rgba(0, 0, 0, .16), 0 14px 24px -18px rgba(6, 26, 19, .6); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
[data-state="done"] .mini-label { display: block; animation: panel-in .6s cubic-bezier(.2, .8, .2, 1); }
.mini-label:hover { transform: rotate(0deg) translateY(-2px); }
.ml-lines { display: grid; gap: .45rem; }
.ml-lines span { padding-bottom: .1rem; border-bottom: 1px solid rgba(23, 24, 28, .38); font-size: .82rem; color: var(--soft); }
.ml-go { display: block; margin-top: .7rem; font: 600 1.2rem/1.2 var(--serif); color: var(--board); }
.gloss { margin: auto; }
.card-cta { padding: 1rem clamp(1rem, 2vw, 1.6rem) .6rem; }
.foot-page a { padding: .75rem 0; }

/* the whole class on one page: a mark book on label stock */
.class { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 6vw, 6.5rem); align-items: start; }
.class .class-note { grid-column: 1; }
.markbook { grid-column: 2; grid-row: 1 / span 2; padding: 8px; border-radius: 3px; background: var(--label); box-shadow: 0 1px 0 rgba(0, 0, 0, .16), 0 22px 36px -26px rgba(6, 26, 19, .55); }
.markbook > .fine { padding: 1.5rem; }
.mb-q { padding: 1rem clamp(1rem, 2vw, 1.5rem); border: 2px solid var(--board); border-bottom: 0; border-radius: 2px 2px 0 0; font-size: .98rem; line-height: 1.5; color: var(--soft); }
.mb-q span { display: block; font: 600 1.2rem/1.2 var(--serif); color: var(--ink); }
.mb-list { border: 2px solid var(--board); border-bottom: 0; }
.mb-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(8.5rem, auto); gap: .25rem 1rem; align-items: baseline; padding: .62rem clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid rgba(23, 24, 28, .2); }
.mb-list li:last-child { border-bottom: 0; }
.mb-name { font-weight: 500; }
.mb-words { font-size: .92rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.mb-band { justify-self: end; text-align: right; font: 600 1.15rem/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; opacity: 0; transform: translateX(-8px); transition: opacity .4s calc(var(--i) * 70ms), transform .5s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms); }
.markbook.in .mb-band { opacity: 1; transform: none; }
.mb-band small { display: block; font: 400 .85rem/1.3 var(--sans); color: var(--soft); }
.mb-list .you { background: var(--pen-wash); }
.mb-list .you .mb-band { color: var(--pen); }
.mb-list .you .mb-band small { color: #075c3a; }
.mb-list .you .tick { margin-right: .3rem; vertical-align: -.1em; }
.markbook.in .you .tick path { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 70ms + .3s); }
.mb-sum { padding: 1rem clamp(1rem, 2vw, 1.5rem) 1.05rem; border: 2px solid var(--board); border-radius: 0 0 2px 2px; font-weight: 600; }

.facts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1.75rem; }
.facts-said { font-size: .98rem; }
@media (max-width: 820px) {
  .class { grid-template-columns: minmax(0, 1fr); }
  .markbook { grid-column: 1; grid-row: auto; }
  .mb-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .mb-words { grid-column: 1; grid-row: 2; }
  .mb-band { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .mini-label { max-width: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mb-band { opacity: 1; transform: none; } }
/* printing the data facts on their own page, for a data protection lead */
@media print {
  .print-data body > *:not(main), .print-data main > *:not(#data) { display: none !important; }
  .print-data #data { margin: 0; padding: 0; background: #fff !important; color: #000; }
  .print-data .facts { border-top-color: #000; } .print-data .facts > div { border-bottom-color: #999; break-inside: avoid; }
  .print-data .facts-tools { display: none; }
  .print-data #data::after { content: "Backstage by Amy Garside Media. amy@amygarsidemedia.com"; display: block; margin-top: 2rem; font-size: 10pt; }
}

/* the evidence step: her two photographs beside each other, then the sketch */
.ev { grid-template-columns: 1fr 1fr; max-width: 52rem; }
.ev li { grid-template-columns: auto minmax(0, 1fr); align-content: start; }
.ev li:nth-child(3) { grid-column: 1 / -1; }
.ev-photo { display: none; margin-top: .7rem; }
.ev li.in .ev-photo { display: block; animation: panel-in .5s cubic-bezier(.2, .8, .2, 1); }
.ev-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #2b2b2b; }
.ev-photo figcaption { margin-top: .45rem; font: 400 1.02rem/1.4 var(--serif); color: var(--ink); }
.ev li:nth-child(3) > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .3rem 1.25rem; align-items: start; }
.ev li:nth-child(3) > div > span, .ev li:nth-child(3) > div > small { grid-column: 1; }
.ev li:nth-child(3) .sketch { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
@media (max-width: 820px) {
  .ev { gap: .6rem; }
  .ev li { padding: .7rem .75rem; gap: .45rem; }
  .ev li span { font-size: .95rem; line-height: 1.3; }
  .ev small { display: none; }
  .ev li:nth-child(3) > div { grid-template-columns: 1fr; }
  .ev li:nth-child(3) .sketch { grid-column: 1; grid-row: auto; margin-top: .5rem; }
  .ev li > div { line-height: 1.3; }
  .ev-photo, .ev li:nth-child(3) .sketch { margin-left: calc(-1em - .45rem); }
  .ev-photo figcaption, .sketch figcaption { font-size: .98rem; }
}
@media (min-width: 821px) and (max-height: 760px) { .ev-photo img { aspect-ratio: 16 / 9; } }

/* Amy, 10 Nov: the price card sits straight */
.price-card { transform: none; }

/* ============================================================ the menu across the top, 10 Nov */
:root { --bar: 3.75rem; }
[id] { scroll-margin-top: calc(var(--bar) + .75rem); }
#top { scroll-margin-top: var(--bar); }
main { padding-top: var(--bar); }
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--bar); display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.75rem); padding: 0 var(--pad) 0 calc(var(--pad) + 14px); background: var(--board); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px -18px rgba(6, 26, 19, .9); }
.bar :focus-visible { outline-color: #fff; }
.bar-brand { margin-right: auto; display: inline-flex; align-items: center; min-height: 2.75rem; font: 700 1.4rem/1 var(--serif); letter-spacing: -.005em; text-decoration: none; }
.bar-nav { display: flex; gap: clamp(.7rem, 1.5vw, 1.6rem); }
.bar-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .98rem; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s; }
.bar-nav a:hover, .bar-nav a[aria-current] { box-shadow: inset 0 -2px 0 #fff; }
.bar-cta { min-height: 2.75rem; padding: .5rem 1.05rem; background: var(--label); color: var(--ink); box-shadow: 0 2px 0 rgba(6, 26, 19, .5); }
.bar-cta:hover { transform: translateY(-1px); }
.bar-menu { display: none; min-height: 2.75rem; padding: .5rem .9rem; border: 2px solid #fff; border-radius: var(--r); background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.stage { top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); }
.cover .brand, .cover .by { display: none; }
.cover { grid-template-rows: 1fr auto; grid-template-areas: "head label" "cta note"; }
.static .cover { min-height: calc(100vh - var(--bar)); min-height: calc(100dvh - var(--bar)); }
.skip { z-index: 30; }
@media (max-width: 1080px) {
  .bar { gap: .6rem; }
  .bar-menu { display: inline-flex; align-items: center; }
  .bar-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: .5rem var(--pad) 1rem calc(var(--pad) + 14px); background: var(--board); box-shadow: 0 18px 28px -16px rgba(6, 26, 19, .9); }
  .bar.open .bar-nav { display: flex; }
  .bar-nav a { min-height: 3rem; font-size: 1.1rem; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .bar-nav a:hover, .bar-nav a[aria-current] { box-shadow: none; text-decoration: underline; text-underline-offset: .25em; }
}
@media (max-width: 820px) {
  .cover { grid-template-rows: auto 1fr auto auto; grid-template-areas: "head" "label" "note" "cta"; }
  .head { margin-top: 0; }
}
@media (max-width: 400px) {
  .bar { gap: .45rem; padding-left: 1.1rem; padding-right: .9rem; }
  .bar-brand { font-size: 1.12rem; }
  .bar-cta { padding: .45rem .6rem; font-size: .9rem; }
  .bar-menu { padding: .45rem .6rem; font-size: .95rem; }
}
@media print { .bar { display: none; } }

/* beside the writing, the margin is exactly as tall as the stage under the menu bar */
@media (min-width: 821px) { .margin { height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); } }

/* the narrowest phones: the two demo books sit one above the other so nothing is wider than the screen */
@media (max-width: 420px) { .books { grid-template-columns: minmax(0, 1fr); } .book { aspect-ratio: 5 / 3; gap: 1rem; } }

/* the site's name in the bar: on one line where there is room, on two lines beside the Menu button on a phone */
.bar-brand { gap: .27em; }
@media (max-width: 560px) {
  .bar-brand { display: grid; align-content: center; gap: 0; font-size: 1.02rem; line-height: 1.04; }
  .bar-brand span { display: block; }
}

/* ------------------------------------------------------------ Amy Garside Media's own branding round the journal (10 Nov 2026).
   The Backstage journal stays green and its layout is untouched. The bar that holds the menu is the brand's paper white
   with the real logo, the bar's button is the brand's magenta and the logo sits in the footer as well. */
.bar { background: rgba(243, 244, 241, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1F2125; box-shadow: 0 1px 0 #DCDEDA, 0 12px 24px -22px rgba(31, 33, 37, .55); }
.bar :focus-visible { outline-color: #D6006F; }
.bar-brand { gap: .9rem; font: 600 1rem/1.15 var(--sans); letter-spacing: 0; color: #1F2125; }
.bar-brand img { display: block; width: auto; height: 2.05rem; }
.bar-brand .bar-mono { display: none; }
.bar-brand span { display: inline; padding-left: .9rem; border-left: 1px solid #A7ABB2; }
.bar-nav a:hover, .bar-nav a[aria-current] { box-shadow: inset 0 -2px 0 #D6006F; }
.bar-cta { background: #D6006F; color: #fff; box-shadow: none; }
.bar-cta:hover { background: #A8005A; }
.bar-menu { border-color: #1F2125; color: #1F2125; }
@media (max-width: 1340px) { .bar-brand span { display: none; } }
@media (max-width: 1080px) {
  .bar-nav { background: #F3F4F1; box-shadow: 0 18px 28px -16px rgba(31, 33, 37, .45); }
  .bar-nav a { border-bottom-color: #DCDEDA; }
}
@media (max-width: 560px) {
  .bar-brand { display: inline-flex; }
  .bar-brand .bar-logo { display: none; }
  .bar-brand .bar-mono { display: block; height: 2.6rem; }
}
.foot-logo { display: inline-block; margin-bottom: 1.1rem; }
.foot-logo img { display: block; width: auto; height: 2.4rem; }