/* =====================================================================
   theme-english.css — english.html only ("Marginalia").
   Loaded after styles.css. Theme-scoped rules and English page classes
   only: no shared tokens or shared component geometry are redefined.

   E1 inked wordmark          E6 paper-stack roadmap + sticky note
   E2 red-pen hero stage      E7 band: hand-to-hand statement
   E4 stat highlighter        E8 "draft becomes essay" story sheet
   E5 lab sheets un-stack     §14.3 personal plan · professionals · test prep

   Rule 10: every hidden starting state, every one-shot entrance and the
   sticky paper stack live in the single @media screen and
   (prefers-reduced-motion:no-preference) block at the END of this file.
   Everything above it is the final frame (no JS, reduced motion, print).
   ===================================================================== */

/* ------------------------------------------------------------ motif */
/* The English motif's red margin rule sits 63px into a surface. On full-width
   surfaces that is inside the text column, so it is moved into the page
   margin (left of .wrap) — or off-screen when the gutter is narrow. */
body[data-theme="english"] { --en-margin-x: calc(max(var(--gutter), (100vw - var(--wrap)) / 2) - 90px); }
body[data-theme="english"] .page-hero.motif-fade::before,
body[data-theme="english"] .section.motif:not(.bg-band) { background-position: var(--en-margin-x) 0, 0 0; background-repeat: no-repeat, repeat; }

/* ------------------------------------------------------------ E1 */
.wm-english .wm-text { padding-right: .14em; }
.wm-english .wm-flourish { inset: auto 0 -14% 0; }
.wm-flourish .draw { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.wm-english .wm-blot {
  width: clamp(10px, .1em, 14px); height: clamp(10px, .1em, 14px);
  right: calc(.06em - 6px); bottom: calc(.01em - 5px);
}

/* ------------------------------------------------------------ E2 */
/* red-pen page on the inkwell stage; views: draft · pen (default) · clean */
.pen-fig { isolation: isolate; }
.pen-fig > .pen-views { grid-row: 1; grid-column: 1; }
.pen-fig > .hv-paper {
  grid-row: 2; grid-column: 1; justify-self: center; z-index: 1; margin-top: 40px;
  container-type: inline-size;
  rotate: calc(var(--pe) * -2deg);           /* scroll-exit pose; rest (p = 1) = final */
}
.pen-fig > .paper-under {
  grid-row: 2; grid-column: 1; justify-self: center; align-self: stretch; z-index: 0;
  width: min(100%, 30rem); margin-top: 40px; padding: 0;
  rotate: 2.5deg; translate: 0 calc(var(--pe) * -18px);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.pen-fig > .btn-tag { grid-row: 3; grid-column: 1; }
.pen-fig .hv-paper p { font-size: 1.0625rem; }
.pen-fig del {
  color: var(--danger); text-decoration: none;
  background: linear-gradient(var(--pen), var(--pen)) no-repeat 0 58% / 100% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color var(--dur-ui) var(--ease-out), background-size var(--dur-ui) var(--ease-out);
}
.pen-fig ins { transition: color var(--dur-ui) var(--ease-out); }
.pen-fig .margin-note {
  display: block; width: fit-content; max-width: 19rem; margin: var(--s-3) 0 0 auto; padding: 2px 0 2px 12px;
  font-size: 1rem; line-height: 1.45; box-shadow: inset 2px 0 0 var(--accent); rotate: -1.5deg;
}
html.js .pen-fig[data-view="draft"] del { color: var(--text); background-size: 0% 2px; }
html.js .pen-fig[data-view="draft"] ins,
html.js .pen-fig[data-view="clean"] del { display: none; }
/* the margin note keeps its space (blank ruled paper) so switching views
   does not resize the stage and shove the page below it */
html.js .pen-fig:not([data-view="pen"]) .margin-note { visibility: hidden; }
html.js .pen-fig[data-view="clean"] ins { color: var(--text); font-style: normal; }
/* "Revise again" replays the red-pen marking, which only exists in the
   "pen" view — hide it (keeping its space) in the other two views so it is
   never a dead control. */
html.js .pen-fig:not([data-view="pen"]) > .btn-tag { visibility: hidden; }
@media (forced-colors: active) { .pen-fig del { text-decoration: line-through; } }

/* ------------------------------------------------------------ E4 */
/* a highlighter swipe beneath each number (rest = swiped) */
[data-theme="english"] .stat-num { width: fit-content; isolation: isolate; }
[data-theme="english"] .stat-num::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .02em; height: .42em; z-index: -1;
  border-radius: 3px 6px 4px 8px; background: var(--hl); transform-origin: left;
}

/* ------------------------------------------------------------ E5 */
.lab-stack > .lab:first-child { z-index: 1; }
.lab-under { z-index: 0; }

/* ------------------------------------------------------------ E6 */
/* stage numbers: serif italic inside a hand-drawn red-pen circle */
[data-theme="english"] .roadmap .stage-num {
  box-shadow: none; background: var(--paper); color: var(--accent-text);
  font: italic 500 1.25rem/1 var(--font-serif);
}
[data-theme="english"] .roadmap .stage-num::after {
  content: ""; position: absolute; inset: 1px; border: 1.5px solid var(--mark); border-radius: 48% 52% 45% 55%; rotate: -8deg;
}
/* cards are cream sheets with a red margin rule (solid behind the text) */
[data-theme="english"] .roadmap .stage-body {
  background-color: var(--cream);
  background-image: linear-gradient(90deg, transparent 16px, var(--margin-rule) 16px 17.5px, transparent 17.5px);
  padding-left: calc(clamp(24px, 1.5rem + 1vw, 40px) + 8px);
}
@media (min-width: 900px) {
  .roadmap--stack .stage-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .roadmap--stack .stage-head { grid-column: 1; grid-row: 1; }
  .roadmap--stack .stage-body > p { grid-column: 1; grid-row: 2; margin: 0; }
  .roadmap--stack .topic-chips { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
}
/* "Not on this list?" — a yellow sticky note with a strip of tape */
.note-sticky {
  --card-bg: var(--hl); --text: var(--ink); --text-2: var(--ink-2); --line: rgba(20,20,19,.08);
  max-width: 36rem; margin: var(--s-8) 0 0 auto; border-radius: 4px 4px 22px 4px;
  background: var(--hl); color: var(--ink-2); rotate: 1.5deg;
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
}
.note-sticky::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; rotate: -3deg;
  background: rgba(250,249,245,.62); box-shadow: inset 0 0 0 1px rgba(20,20,19,.06);
}
.note-sticky h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.note-sticky p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------ §14.3 personal */
.personal-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .personal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-8); } }
.promise-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.promise { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); margin: 0; }
.promise-icon {
  grid-row: 1 / span 2; width: 44px; height: 44px; padding: 10px; overflow: visible;
  border-radius: 48% 52% 45% 55%; background: var(--card-bg); box-shadow: inset 0 0 0 1.5px var(--mark);
}
.promise-icon .draw { stroke: var(--accent-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.promise h3 { margin: 9px 0 .3em; font-size: 1.1875rem; line-height: 1.3; }
.promise p { margin: 0; color: var(--text-2); }

.plans { min-width: 0; }
.plans-head { margin: 0 0 var(--s-3); color: var(--accent-text); }
.plan-tabs { display: grid; width: 100%; margin-bottom: var(--s-5); }
/* the plan is written on ruled paper: every line sits on a rule */
.plan-card { padding-bottom: var(--rule-h); }
/* without JS the three example plans stack: keep the sheets apart */
html:not(.js) .plan-card + .plan-card { margin-top: var(--s-5); }
.plan-card .plan-title { margin: 0; font: 600 1.1875rem/var(--rule-h) var(--font-sans); letter-spacing: -.008em; color: var(--text); }
.plan-facts { margin: 0; }
.plan-facts > div { margin: 0; }
.plan-facts dt { font: 600 var(--fs-meta)/var(--rule-h) var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.plan-facts dd { margin: 0; line-height: var(--rule-h); color: var(--text); }
@media (min-width: 480px) {
  .plan-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--s-3); }
}
.plan-card .plan-sub { margin: var(--rule-h) 0 0; line-height: var(--rule-h); color: var(--accent-text); }
.plan-steps { margin: 0; padding-left: 1.4em; }
.plan-steps li { margin: 0; line-height: var(--rule-h); color: var(--text); }
.plan-steps li::marker { color: var(--accent-text); font-style: italic; }
.plans-note { margin: var(--s-4) 0 0; font-size: var(--fs-small); color: var(--text-3); }

/* ------------------------------------------------------------ §14.3 professionals */
.pro-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); }
/* 4 tiles: 1 → 2 → 4 columns (never a 3 + 1 orphan row) */
@media (min-width: 640px) { .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pro-grid > li { display: flex; margin: 0; }
.pro-tile { flex: 1 1 auto; justify-content: flex-start; padding-left: 46px; background-position: -40px 0, 0 0; background-repeat: no-repeat, repeat; }
.pro-tile .tile-sub { flex: 1 1 auto; }
@media (hover: hover) { .pro-tile:hover { translate: none; box-shadow: inset 0 0 0 1px var(--line-strong); } }
.pro-foot { display: grid; gap: var(--s-4) var(--s-7); margin-top: var(--s-7); padding-top: var(--s-6); box-shadow: inset 0 1px 0 var(--line); }
@media (min-width: 900px) { .pro-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.pro-pull { margin: 0; font: italic 500 var(--fs-h3)/1.25 var(--font-serif); color: var(--text); }
.pro-pull::before { content: "“"; content: "“" / ""; margin-right: .06em; color: var(--accent-text); }
.pro-pull::after { content: "”"; content: "”" / ""; margin-left: .03em; color: var(--accent-text); }
.pro-cred { margin: 0; color: var(--text-2); }
.pro-cred .link-arrow { display: flex; width: fit-content; margin-top: var(--s-3); }

/* ------------------------------------------------------------ §14.3 test prep */
.exam-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); }
/* 6 exams: 1 → 2 → 3 columns (never a 4 + 2 orphan row) */
@media (min-width: 640px) { .exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .exam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.exam-card {
  --exam-tab: var(--hl);
  position: relative; margin: 0; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-tile);
  background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); color: var(--text-2);
}
.exam-card:nth-child(3n + 2) { --exam-tab: var(--hl-evidence); }
.exam-card:nth-child(3n) { --exam-tab: var(--hl-analysis); }
.exam-card::before { content: ""; position: absolute; top: 0; left: var(--s-5); width: 56px; height: 8px; border-radius: 0 0 4px 4px; background: var(--exam-tab); }
.exam-level { margin: 0 0 8px; color: var(--accent-text); }
.exam-card h3 { margin: 0 0 .35em; font-size: 1.1875rem; line-height: 1.3; }
.exam-card p:last-child { margin: 0; font-size: 15px; }

.prep-method { display: grid; margin-top: var(--s-8); }
.prep-head { grid-row: 1; grid-column: 1; margin: 0 0 var(--s-5); color: var(--accent-text); }
.prep-steps { grid-row: 2; grid-column: 1; position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.prep-steps > li { margin: 0; }
.prep-steps h3 { margin: var(--s-4) 0 .3em; font-size: 1.1875rem; line-height: 1.3; }
.prep-steps p { margin: 0; color: var(--text-2); }
.prep-num {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface);
  font: italic 500 1.375rem/1 var(--font-serif); color: var(--accent-text);
}
.prep-num::after { content: ""; position: absolute; inset: 1px; border: 1.5px solid var(--mark); border-radius: 48% 52% 45% 55%; rotate: -8deg; }
.prep-line { display: none; }
@media (min-width: 720px) {
  .prep-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prep-line {
    display: block; grid-row: 2; grid-column: 1; align-self: start; z-index: 0; height: 24px; margin: 10px 0 0 22px; overflow: visible;
    width: calc((100% - 2 * var(--s-6)) * 2 / 3 + 2 * var(--s-6));
  }
  .prep-line .draw { stroke: var(--mark); stroke-width: 2; stroke-linecap: round; }
}

/* ------------------------------------------------------------ E7 */
.h2h { max-width: 52rem; margin: 0 0 var(--head-gap); padding: var(--s-2) 0 var(--s-2) var(--s-6); box-shadow: inset 3px 0 0 var(--mark); }
.h2h-kicker { margin: 0 0 var(--s-3); color: var(--accent-text); }
.h2h-text { margin: 0; max-width: 40em; font: italic 400 var(--fs-h3)/1.4 var(--font-serif); color: var(--text); }
.h2h-key { position: relative; white-space: nowrap; }
.h2h-line { position: absolute; left: 0; bottom: -.3em; width: 100%; height: .4em; overflow: visible; pointer-events: none; }
.h2h-line .draw { stroke: var(--mark); stroke-width: 3; stroke-linecap: round; }

/* ------------------------------------------------------------ E8 */
/* a white ruled sheet; text sits on the 32px rules of the English motif */
.essay-fig { --ess-lh: 32px; padding-top: var(--ess-lh); padding-bottom: var(--ess-lh); font: 400 1.0625rem/var(--ess-lh) var(--font-serif); color: var(--text); }
.essay-fig > p, .essay-fig > ul { margin: 0; max-width: none; }
.essay-fig ul { list-style: none; padding: 0; }
.essay-fig li { margin: 0; }
.ess-label { line-height: var(--ess-lh); color: var(--accent-text); }
.ess-prompt { color: var(--text); }
.ess-prompt .ring-host > svg { left: -26%; top: -12%; width: 152%; height: 124%; }
.ess-ring .draw { stroke: var(--mark); stroke-width: 1.8; stroke-linecap: round; }
.essay-fig mark.tp-hl { white-space: nowrap; }
.ess-outline li { display: flex; align-items: flex-start; gap: 8px; }
.ess-bullet { flex: none; width: 16px; height: 16px; margin-top: calc((var(--ess-lh) - 16px) / 2); overflow: visible; }
.ess-bullet .draw { stroke: var(--ink-blue); stroke-width: 2.2; stroke-linecap: round; }
.ess-out { display: inline-block; color: var(--ink-blue); font-style: italic; }
.ess-line { display: inline-block; }
.ess-draft del { text-decoration: none; color: var(--text-2); }
.ess-cut { position: relative; display: inline-block; }
.ess-caret { display: inline-block; width: 0; overflow: visible; translate: -.12em .42em; font: 700 1.1em/1 var(--font-sans); color: var(--ink-blue); }
.ess-insert { padding-left: 1.4em; }
.ess-insert ins { display: inline-block; text-decoration: none; font-style: italic; color: var(--ink-blue); }
.ess-check { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.ess-check li { display: inline-flex; align-items: center; gap: 6px; font: 500 .9375rem/var(--ess-lh) var(--font-sans); color: var(--text-2); }
.ess-tick { flex: none; width: 18px; height: 18px; overflow: visible; }
.ess-tick .draw { stroke: var(--mark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ess-spark {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--spark-tint);
  box-shadow: inset 3px 0 0 var(--spark); font: italic 400 .9375rem/1.5 var(--font-serif); color: var(--spark-text);
}
.ess-spark .t-meta { display: block; font-style: normal; color: var(--spark-text); }
.ess-spark .t-meta::before { content: "✦ "; content: "✦ " / ""; }
.ess-note { font: 500 var(--fs-small)/var(--ess-lh) var(--font-sans); color: var(--text-3); }
@media (max-width: 599px) {
  .essay-fig {
    --ess-lh: 26px; padding-left: 52px; font-size: .9375rem;
    background-image:
      linear-gradient(90deg, transparent 38px, var(--margin-rule) 38px 40px, transparent 40px),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--ess-lh) - 1px), var(--rule) calc(var(--ess-lh) - 1px) var(--ess-lh));
  }
  .ess-check li { font-size: .875rem; }
  .ess-spark { font-size: .875rem; }
}

/* =====================================================================
   RULE-10 BLOCK (English) — hidden starting states, one-shot entrances
   and the sticky paper stack. Print, reduced motion, the footer toggle
   and no-JS never see any of it.
   ===================================================================== */
@keyframes en-pen-glide {
  0%   { opacity: 0; translate: 2rem 2.4rem; }
  12%  { opacity: 1; translate: 2rem 2.4rem; }
  62%  { translate: calc(100cqi - 9rem) 2.4rem; }
  100% { translate: 0 0; }
}
@keyframes en-strike  { from { background-size: 0% 2px; color: var(--text); } }
@keyframes en-note-in { from { opacity: 0; translate: 24px 0; rotate: 2deg; } }
@keyframes en-hl      { from { background-size: 0% .62em; } }

@media screen and (prefers-reduced-motion: no-preference) {

  /* E1 — the nib writes the word, the flourish follows, the blot lands */
  .motion-ok .wm-english .wm-text { animation: write-in 1.1s var(--ease-pencil) both; }
  .motion-ok .wm-english .wm-flourish .draw { animation: draw-on .8s var(--ease-pencil) .9s both; }
  .motion-ok .wm-english .wm-blot { animation: pop-in 360ms var(--ease-pop) 1.7s both; }

  /* E2 — pencil glides, red pen strikes, ink-blue inserts write in, the
     margin note lands. Keyed on the "pen" view, so choosing "Red pen"
     replays the marking; "Revise again" replays it too. */
  .motion-ok .pen-fig[data-view="pen"] .hv-pencil { animation: en-pen-glide 1.5s var(--ease-in-out) both; }
  .motion-ok .pen-fig[data-view="pen"] .hv-paper p:nth-of-type(1) del { animation: en-strike 380ms var(--ease-out) 600ms both; }
  .motion-ok .pen-fig[data-view="pen"] .hv-paper p:nth-of-type(2) del { animation: en-strike 380ms var(--ease-out) 1500ms both; }
  .motion-ok .pen-fig[data-view="pen"] .hv-paper p:nth-of-type(1) ins { animation: fade-in 700ms var(--ease-pencil) 1000ms both; }
  .motion-ok .pen-fig[data-view="pen"] .hv-paper p:nth-of-type(2) ins { animation: fade-in 700ms var(--ease-pencil) 1900ms both; }
  .motion-ok .pen-fig[data-view="pen"] .margin-note { animation: en-note-in 560ms var(--ease-pop) 2700ms both; }

  /* E4 — the highlighter swipes once the odometer lands */
  .motion-ok [data-theme="english"] .stat-num:not(.is-done)::after { transform: scaleX(0); }
  .motion-ok [data-theme="english"] .stat-num::after { transition: transform 520ms var(--ease-out); }

  /* E5 — the second lab sheet slides out from under the first */
  .motion-ok .lab-under { translate: 0 calc((1 - var(--pe)) * -40px); rotate: calc((1 - var(--pe)) * 1.5deg); }

  /* E6 — sticky note peels in */
  .motion-ok .note-sticky.reveal {
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), rotate 700ms var(--ease-pop) 120ms;
  }
  .motion-ok .note-sticky.reveal:not(.is-visible) { rotate: 6deg; }

  /* E6 — paper stack: sheets stick and pile up; the one underneath darkens
     and shrinks slightly as the next arrives (opacity + scale only). */
  @media (min-width: 900px) and (min-height: 760px) {
    .motion-ok .roadmap--stack { gap: var(--s-6); }
    .motion-ok .roadmap--stack::before { display: none; }
    .motion-ok .roadmap--stack > li {
      position: sticky; top: calc(var(--stick-top-ui) + 24px + var(--i) * 14px); display: block;
      max-height: calc(100svh - var(--stick-top) - 140px); overflow-y: auto; overscroll-behavior: contain;
      border-radius: var(--r-tile); box-shadow: var(--shadow-2);
      rotate: calc((var(--i) - 2) * .35deg); transform-origin: 50% 0;
      scale: calc(1 - clamp(0, var(--step) + var(--step-p) - var(--i) - 1, 1) * .04);
    }
    .motion-ok .roadmap--stack > li::after {
      content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #141413; pointer-events: none;
      opacity: calc(clamp(0, var(--step) + var(--step-p) - var(--i) - 1, 1) * .06);
    }
    .motion-ok .roadmap--stack > li > .stage-num { position: absolute; left: 12px; top: 26px; }
    .motion-ok .roadmap--stack .stage-body {
      min-height: 100%; padding-left: 84px;
      background-image: linear-gradient(90deg, transparent 68px, var(--margin-rule) 68px 69.5px, transparent 69.5px);
    }
    .motion-ok .roadmap--stack > li:hover > .stage-body { translate: none; }
    /* every sheet as tall as the tallest, so no lower sheet peeks out underneath */
    .motion-ok .roadmap--stack { grid-auto-rows: 1fr; }
    /* sheets slide in but are never see-through over the stuck sheet */
    .motion-ok .roadmap--stack > li.reveal, .motion-ok .roadmap--stack > li.reveal:not(.is-visible) { opacity: 1; }
  }

  /* §14.3 personal — the goal is highlighted each time a plan is shown,
     and its first three sessions are written in. */
  .motion-ok .plans:not(.is-in) .plan-card .hl { background-size: 0% .62em; }
  .motion-ok .plans:not(.is-in) .plan-steps li { opacity: 0; }
  .motion-ok .plans.is-in .seg-panel:not([hidden]) .hl { animation: en-hl 640ms var(--ease-out) 380ms both; }
  .motion-ok .plans.is-in .seg-panel:not([hidden]) .plan-steps li { animation: rise-in 420ms var(--ease-out) calc(460ms + var(--li) * 90ms) both; }

  /* E7 — the red-pen underline lands after the statement fades in */
  .motion-ok .h2h .draw { transition-delay: 500ms; }

  /* E8 — coarse pointers use plain fades instead of per-line clips.
     Full lesson text stays visible; motion.js checks whether pinning fits. */
  @media (pointer: coarse) {
    .motion-ok .story:is(.is-pinned, .is-player) .essay-fig .tp-write { clip-path: none; }
  }
}