/* NeatPrep · page styles. Tokens first, then the seven booklet parts.
   scrollcraft.css is the floor; nothing here restyles .sc-stage or data-sc-*. */

@font-face { font-family: "Sprinter FS"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/sprinter-fs-Regular.woff2") format("woff2"); }
@font-face { font-family: "Sprinter FS"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/sprinter-fs-Medium.woff2") format("woff2"); }
@font-face { font-family: "Sprinter FS"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/sprinter-fs-Bold.woff2") format("woff2"); }

:root {
  --sc-canvas:      #F4F2EC;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #1F1F1F;
  --sc-ink-soft:    #666666;
  --sc-accent:      #2B2B2B;
  --sc-accent-ink:  #FFFFFF;
  --sc-font-display: "Sprinter FS", "Heebo", "Arial Hebrew", system-ui, sans-serif;
  --sc-font-text:    "Sprinter FS", "Heebo", "Arial Hebrew", system-ui, sans-serif;
  --sc-font-mono:    "Sprinter FS", system-ui, sans-serif;
  --sc-shadow-color: 0 0% 8%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --sc-track-tight: -0.02em;
  --sc-track-snug:  -0.012em;
  --sc-track-normal: 0;
  --sc-leading-none: 1.02;
  --sc-leading-tight: 1.1;

  --paper: #F3F2EF;
  --paper-line: rgba(0, 0, 0, .12);
  --graphite: #333333;
  --pencil-yellow: #E9AE1F;
  --np-h1: clamp(2.4rem, 1.4rem + 3.3vw, 4.6rem);
  --np-h2: clamp(2rem, 1.35rem + 2.6vw, 3.8rem);
}
html { scroll-padding-top: 4rem; }
body { background: var(--paper); font-weight: 400; }
.sc-grain { opacity: .03; }
.sc-display { font-weight: 700; }
.sc-body { font-size: var(--sc-t-base); line-height: 1.7; }
strong { font-weight: 700; }
sup { font-size: .62em; line-height: 0; vertical-align: .55em; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* Dark register: restate colour where the tokens are restated. */
.part--dark {
  --sc-canvas: #1E1E1E; --sc-surface: #2A2A2A;
  --sc-ink: #F2F2F0; --sc-ink-soft: #B5B5B2;
  --sc-accent: #E8E8E4; --sc-accent-ink: #1E1E1E;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.part--white { background: var(--sc-surface); }
.part { position: relative; }

/* Buttons: one primary shape for the whole page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.1rem; padding: .8rem 1.5rem; border-radius: var(--sc-r-md);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 500; font-size: var(--sc-t-base); line-height: 1; text-decoration: none;
  border: 0; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--sc-e3), var(--sc-edge); background: color-mix(in oklab, var(--sc-accent) 88%, black); }
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.link {
  color: var(--sc-accent); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .24em;
  transition: text-decoration-color 140ms var(--sc-ease-out);
}
.link:hover { text-decoration-color: transparent; }
.eyebrow { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); letter-spacing: .02em; margin: 0; }

/* The in-page navigation: numbered parts, ticked as the visitor passes them. */
.sheetnav { position: fixed; left: clamp(.6rem, 1.4vw, 1.4rem); top: 50%; translate: 0 -50%; z-index: 59; }
.sheetnav ol { list-style: none; margin: 0; padding: .5rem; display: flex; flex-direction: column; gap: .15rem; background: color-mix(in oklab, #fff 88%, transparent); border-radius: 14px; box-shadow: var(--sc-e1), 0 0 0 1px var(--paper-line); backdrop-filter: blur(8px); }
.sheetnav a { display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem .3rem .4rem; border-radius: 999px; color: var(--sc-ink); text-decoration: none; transition: background-color 140ms var(--sc-ease-out); }
.sheetnav a:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.sheetnav .n { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); display: grid; place-items: center; font-size: .72rem; font-weight: 700; line-height: 1; transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.sheetnav .ck { display: none; width: .8rem; height: .8rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheetnav .lbl { font-size: .86rem; font-weight: 500; white-space: nowrap; }
.sheetnav .is-passed .n { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.sheetnav .is-passed .num { display: none; }
.sheetnav .is-passed .ck { display: block; }
.sheetnav .is-current .n { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }
.sheetnav .is-current .lbl { font-weight: 700; }
.sheetnav .ans { position: absolute; right: -.4rem; top: -.4rem; font-size: .62rem; font-weight: 700; color: var(--graphite); background: var(--pencil-yellow); border-radius: 50%; width: .95rem; height: .95rem; display: grid; place-items: center; scale: 0; transition: scale 260ms var(--sc-ease-out); }
.sheetnav .is-answered .ans { scale: 1; }
@media (max-width: 1100px) { .sheetnav .lbl { display: none; } .sheetnav a { padding: .3rem .4rem; } }
@media (max-width: 860px) { .sheetnav { display: none; } }

/* -------------------------------------------------------------- cover -- */
.cover { height: 100svh; min-height: 38rem; overflow: clip; isolation: isolate;
  background:
    radial-gradient(90rem 60rem at 80% 0%, rgba(0,0,0,.05), transparent 60%),
    var(--paper);
}
.cover__inner { position: relative; height: 100%; max-width: var(--sc-maxw); margin-inline: auto; }
.cover__sheet {
  position: absolute; z-index: 1; left: 18%; right: 8%; top: 10svh; height: 84svh;
  background: var(--sc-surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.6rem - 1px), var(--paper-line) calc(2.6rem - 1px) 2.6rem);
  background-position: 0 4.2rem;
  border-radius: 2px; box-shadow: var(--sc-e3), var(--sc-edge);
  rotate: -1.2deg; transform-origin: 50% 50%;
}
.cover__sheet::before { content: ""; position: absolute; top: 0; bottom: 0; right: 3.2rem; width: 1px; background: rgba(0, 0, 0, .22); }
.cover__shadow { position: absolute; z-index: 2; width: 8rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); filter: blur(3px); translate: -50% -50%; pointer-events: none; }
.cover__copy { position: absolute; z-index: 3; right: 12%; top: 22svh; width: min(40rem, 56%); }
.cover__copy h1 { font-size: var(--np-h1); color: var(--sc-ink); }
.cover__copy h1 span { display: block; }
.cover__copy p { margin: 1.4rem 0 0; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.cover__cta { display: flex; align-items: center; gap: 1.6rem; margin-top: 2rem; flex-wrap: wrap; }
.cover__pencil { position: absolute; z-index: 4; left: 0; top: 0; width: 15rem; pointer-events: none; }
.cover__pencil img { width: 100%; height: auto; max-width: none; filter: drop-shadow(6px 14px 16px rgba(0,0,0,.30)); }
.cover__pencil--flip img { scale: -1 1; }
.cover__front {
  position: absolute; z-index: 5; left: -2%; bottom: -9svh; width: min(30vw, 26rem); height: 22svh;
  background: var(--sc-surface); border-radius: 2px; rotate: 2.5deg;
  box-shadow: var(--sc-e3), var(--sc-edge); padding: 1.4rem 1.6rem;
}
.cover__front .bubbles { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: .55rem 1rem; width: 12rem; font-size: .8rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.cover__front .bubbles i { display: block; width: .95rem; height: .95rem; border: 1px solid var(--paper-line); border-radius: 50%; }
.cover__front .bubbles b { font-weight: 500; }
.cover__front .bubbles i.filled { background: var(--graphite); border-color: var(--graphite); }
.pose { will-change: transform; }

@media (max-width: 860px) {
  .cover { min-height: 34rem; }
  .cover__sheet { left: 6%; right: -6%; top: 8svh; height: 88svh; background-position: 0 3.2rem; }
  .cover__sheet::before { right: 2rem; }
  .cover__copy { right: var(--sc-gutter); left: var(--sc-gutter); width: auto; top: 13svh; }
  .cover__copy h1 { font-size: clamp(2.3rem, 9.5vw, 3.2rem); max-width: none; }
  .cover__copy p { font-size: var(--sc-t-base); max-width: 30ch; }
  .cover__pencil { width: 8.4rem; }
  .cover__front { width: 52vw; height: 22svh; bottom: -8svh; left: auto; right: -6%; padding: 1rem; }
  .cover__front .bubbles { width: 10rem; font-size: .72rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .cover__copy { top: 12svh; }
  .cover__pencil { width: 7rem; }
}

/* ------------------------------------------------------- instructions -- */
.instr { padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 9vw, 8rem); }
.instr__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.instr h2 { font-size: var(--np-h2); max-width: 16ch; margin-top: .6rem; }
.instr__lede { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); max-width: 36ch; margin: 1.6rem 0 0; }
.instr__list { list-style: none; margin: 0; padding: 0; counter-reset: rule; border-top: 1px solid var(--sc-hairline-strong); }
.instr__list li { counter-increment: rule; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); }
.instr__list li::before { content: counter(rule); font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.instr__turn { margin: clamp(4rem, 9vw, 8rem) 0 0; font-size: clamp(3rem, 2rem + 6vw, 8rem); font-weight: 700; line-height: .98; letter-spacing: var(--sc-track-tight); color: var(--sc-accent); }
@media (max-width: 860px) {
  .instr__grid { grid-template-columns: 1fr; }
  .instr__list li { font-size: var(--sc-t-lg); }
}

/* ----------------------------------------------------------- question -- */
.quest { background: var(--paper); }
.quest .sc-stage { background: var(--paper); }
.q-wrap { position: relative; height: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem); }
.q-sheet {
  position: relative; container-type: inline-size; direction: rtl;
  height: min(82svh, 60rem); aspect-ratio: 3 / 4; max-width: 100%; justify-self: start;
  background: var(--sc-surface); border-radius: 2px; box-shadow: var(--sc-e3), var(--sc-edge);
  overflow: visible; color: var(--sc-ink);
}
.q-sheet > * { position: absolute; margin: 0; }
.q-head { top: 5%; right: 6.6%; left: 6.6%; display: flex; justify-content: space-between; font-size: 2.6cqw; font-weight: 500; color: var(--sc-ink-soft); }
.q-rule { top: 10.5%; right: 6.6%; left: 6.6%; height: 1px; background: var(--sc-hairline-strong); }
.q-text { top: 13.5%; right: 6.6%; left: 6.6%; font-size: 4.2cqw; font-weight: 500; line-height: 1.35; }
.q-text .num { font-weight: 700; }
.q-answers { top: 26%; right: 6.6%; left: 6.6%; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; font-size: 3.8cqw; }
.q-answers li { display: flex; align-items: center; justify-content: center; gap: .5em; height: 2.4em; }
.q-answers li b { font-weight: 500; color: var(--sc-ink-soft); font-size: .78em; }
/* the "handwritten" work: graphite, a touch rotated, driven by page JS */
.q-work { inset: 0; pointer-events: none; }
.q-work > * { position: absolute; margin: 0; color: var(--graphite); opacity: 0; transition: opacity 260ms var(--sc-ease-out); font-weight: 500; }
.q-work > .is-on { opacity: 1; }
.wA { top: 39%; left: 10%; right: 10%; text-align: center; direction: ltr; font-size: 4.6cqw; rotate: -1deg; letter-spacing: .04em; }
.wAn { top: 45.4%; right: 10%; font-size: 3cqw; rotate: -1.5deg; }
.wB { top: 52.6%; left: 10%; right: 10%; display: grid; grid-template-columns: repeat(4, 1fr); direction: ltr; font-size: 4cqw; rotate: .6deg; }
.wB span { text-align: right; padding-right: 1.7cqw; }
.wC { top: 61.2%; right: 10%; font-size: 4.1cqw; rotate: -.8deg; }
.wCn { top: 66.8%; right: 10%; font-size: 2.8cqw; color: var(--sc-ink-soft); }
.wD { top: 72.6%; left: 10%; right: 10%; text-align: center; direction: ltr; font-size: 4.1cqw; rotate: .5deg; }
.wDn { top: 78.8%; left: 10%; right: 10%; text-align: center; font-size: 2.8cqw; }
.wE { top: 85%; left: 0; right: 0; text-align: center; font-size: 9cqw; font-weight: 700; line-height: 1; rotate: -3deg; color: var(--graphite); }
.q-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.q-ink path { visibility: hidden; fill: none; stroke: var(--graphite); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.q-ink path.is-on { visibility: visible; }
.q-ink .hl { stroke: var(--pencil-yellow); stroke-width: 34; opacity: .5; stroke-linecap: butt; vector-effect: none; mix-blend-mode: multiply; }
.q-pencil { position: absolute; z-index: 6; left: 0; top: 0; width: 100px; pointer-events: none; will-change: transform; }
.q-pencil img { width: 100%; height: auto; max-width: none; filter: drop-shadow(5px 12px 14px rgba(0,0,0,.28)); }
.q-side { position: relative; z-index: 3; align-self: stretch; }
.q-side p { position: absolute; top: 34%; right: 0; margin: 0; max-width: 26ch; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: 1.32; letter-spacing: var(--sc-track-snug); font-weight: 500; color: var(--sc-ink); }
.q-side p em { font-style: normal; font-weight: 700; color: var(--sc-accent); display: block; font-size: .72em; margin-bottom: .35em; }
.q-side p.q-side--close { font-weight: 700; color: var(--sc-accent); max-width: 22ch; }
.q-side p.q-step { position: absolute; top: 26%; right: 0; max-width: none; line-height: 1.4; margin: 0; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); }

@media (max-width: 860px) {
  .q-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; align-items: start; gap: 1rem; padding-top: calc(3.6rem + 2svh); padding-bottom: 1rem; }
  .q-sheet { height: auto; width: min(100%, 50svh * 0.75); justify-self: center; }
  .q-side { min-height: 9rem; }
  .q-side p { position: absolute; top: 0; translate: none; font-size: clamp(1.05rem, 4.4vw, 1.3rem); max-width: none; left: 0; }
  .q-side p em { display: inline; font-size: 1em; margin: 0 0 0 .35em; }
  .q-side p.q-step { display: none; }
  .q-ink path.is-on { visibility: visible; }
.q-ink .hl { stroke-width: 34; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .q-sheet { width: min(100%, 46svh * 0.75); }
  .q-side p { font-size: clamp(.95rem, 4vw, 1.1rem); }
}

/* ------------------------------------------------------------- method -- */
.method { padding: clamp(5rem, 11vw, 10rem) 0 clamp(4rem, 9vw, 8rem); }
.method h2 { font-size: var(--np-h2); max-width: 18ch; }
.method__lede { max-width: 42ch; margin-top: 1.4rem; font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); }
.principles { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.principles li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 4vw, 4rem); padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); align-items: start; }
.principles h3 { margin: 0; font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: var(--sc-track-snug); line-height: 1.15; }
.principles p { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; line-height: 1.68; }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-top: clamp(3rem, 7vw, 6rem); }
.ledger div { padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.ledger .big { display: block; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: var(--sc-track-tight); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: right; }
.ledger .lab { display: block; margin-top: .6rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-width: 22ch; }
@media (max-width: 860px) {
  .principles li { grid-template-columns: 1fr; gap: .5rem; }
  .ledger { grid-template-columns: 1fr; gap: 1.4rem; }
  .ledger .lab { max-width: none; }
}

/* ------------------------------------------------------------- tracks -- */
.tracks .sc-stage { background: var(--paper); }
.rail-flip { position: absolute; inset: 0; transform: scaleX(-1); }
.rail { direction: ltr; height: 100%; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding-inline: clamp(1.5rem, 6vw, 7rem) clamp(1.5rem, 4vw, 5rem); }
.rail > * { transform: scaleX(-1); direction: rtl; flex: none; }
.rail__lead { width: clamp(17rem, 30vw, 30rem); margin-inline-end: clamp(1rem, 3vw, 3rem); }
.rail__lead h2 { font-size: var(--np-h2); max-width: 12ch; }
.rail__lead p { margin: 1.2rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 26ch; }
.track { width: clamp(17rem, 24vw, 22rem); }
.track__card { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1.4rem, 2vw, 1.9rem); box-shadow: var(--sc-e2), var(--sc-edge); min-height: min(28rem, 60svh); display: flex; flex-direction: column; gap: .9rem; transition: box-shadow 200ms var(--sc-ease-out); }
.track h3 { margin: 0; font-size: var(--sc-t-xl); font-weight: 700; line-height: 1.15; letter-spacing: var(--sc-track-snug); }
.track dl { margin: 0; display: grid; grid-template-columns: 3.2rem 1fr; gap: .45rem .7rem; font-size: var(--sc-t-sm); line-height: 1.5; }
.track dt { color: var(--sc-ink-soft); font-weight: 500; }
.track dd { margin: 0; }
.track__desc { margin: 0; color: var(--sc-ink-soft); line-height: 1.6; flex: 1; }
.track__act { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--sc-hairline); }
.pick { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .5rem .95rem; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink); font-weight: 500; font-size: var(--sc-t-sm); cursor: pointer; transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.pick i { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; }
.pick i::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; scale: 0; transition: scale 160ms var(--sc-ease-out); }
.pick[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.pick[aria-pressed="true"] i::after { scale: 1; }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--sc-accent); } .pick[aria-pressed="true"]:hover { background: color-mix(in oklab, var(--sc-accent) 88%, black); } }
.track.is-picked .track__card { box-shadow: var(--sc-e3), 0 0 0 2px var(--sc-accent); }
.rail__note { width: clamp(16rem, 24vw, 22rem); padding-inline-start: clamp(1rem, 2vw, 2rem); }
.rail__note p { margin: 0 0 1.2rem; font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.3; letter-spacing: var(--sc-track-snug); max-width: 18ch; }
/* Items settle in sequence as the rail travels. Floor 0.55 so a card reads as arriving. */
@media (prefers-reduced-motion: no-preference) {
  .rail > [style*="--k"] { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) - var(--k)) * 7, 1)); }
}
@media (max-width: 860px) {
  .rail { padding-inline: 1.2rem; gap: 1rem; }
  .rail__lead { width: 72vw; margin-inline-end: .5rem; }
  .rail__lead h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .track { width: 76vw; }
  .track__card { min-height: 0; padding: 1.2rem; }
  .rail__note { width: 70vw; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-flip { transform: none; position: static; }
  .rail > * { transform: none; }
  .rail { direction: rtl; }
}

/* ------------------------------------------------------------ teacher -- */
.teacher { padding: clamp(5rem, 11vw, 9rem) 0; }
.teacher__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.teacher h2 { font-size: var(--np-h2); max-width: 18ch; }
.teacher .sc-body { margin-top: 1.6rem; font-size: var(--sc-t-base); }
.teacher__pull { margin: 2rem 0 0; padding-inline-start: 1.2rem; border-inline-start: 2px solid var(--sc-accent); font-size: var(--sc-t-lg); font-weight: 500; line-height: 1.45; max-width: 30ch; }
.teacher__links { margin-top: 2rem; display: flex; gap: 1.6rem; align-items: center; }
.portrait { margin: 0; }
.portrait__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-lg); background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.16); }
.portrait__frame img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; max-width: none; }
.portrait figcaption { margin-top: 1.4rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 860px) {
  .teacher__grid { grid-template-columns: 1fr; }
  .portrait { order: -1; max-width: 22rem; }
}

/* -------------------------------------------------------------- close -- */
.close .sc-stage { background: var(--paper); display: grid; grid-template-rows: 1fr auto; }
.close__wrap { max-width: var(--sc-maxw); width: 100%; margin-inline: auto; padding: clamp(4.5rem, 9svh, 7rem) var(--sc-gutter) 1rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.close h2 { font-size: var(--np-h2); max-width: 14ch; }
.close__lede { margin: 1.2rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; max-width: 32ch; }
.close__you { margin: 1.6rem 0 0; font-size: var(--sc-t-base); color: var(--sc-ink); font-weight: 500; }
.asheet { background: var(--sc-surface); border-radius: 2px; box-shadow: var(--sc-e3), var(--sc-edge); padding: clamp(1.4rem, 3vw, 2.4rem); position: relative; }
.asheet::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2.2rem; width: 1px; background: rgba(0,0,0,.2); pointer-events: none; }
.asheet__head { display: flex; justify-content: space-between; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); padding-bottom: .8rem; border-bottom: 1px solid var(--sc-hairline-strong); margin: 0 0 1.2rem; padding-inline-start: 1.6rem; }
.asheet .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; padding-inline-start: 1.6rem; }
.asheet .grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: #fff; color: var(--sc-ink); font-size: var(--sc-t-base); transition: border-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); }
.field textarea { min-height: 5.4rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.field input:user-invalid { border-color: #A33A33; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.asheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-inline-start: 1.6rem; flex-wrap: wrap; }
.asheet__status { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 1.4em; }
.asheet__status.is-ok { color: var(--sc-accent); font-weight: 500; }
.asheet__status.is-err { color: #A33A33; font-weight: 500; }
.foot { background: #1E1E1E; color: #B5B5B2; padding: clamp(3rem, 6vw, 5rem) 0 1.5rem; --sc-ink: #F2F2F0; --sc-ink-soft: #B5B5B2; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 5rem); }
.foot__mark { width: 9rem; height: auto; }
.foot__brand p { margin: 1.2rem 0 0; max-width: 40ch; line-height: 1.65; font-size: var(--sc-t-sm); }
.foot nav { display: flex; flex-direction: column; gap: .55rem; }
.foot h3 { margin: 0 0 .5rem; font-size: var(--sc-t-sm); font-weight: 700; color: #fff; }
.foot a { color: inherit; text-decoration: none; font-size: var(--sc-t-sm); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__line { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--sc-t-xs); }
@media (max-width: 860px) {
  .close .sc-stage { overflow-y: auto; }
  .close__wrap { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 4.6rem; align-content: start; }
  .close h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .close__lede { display: none; }
  .close__you { margin-top: .4rem; font-size: var(--sc-t-sm); }
  .asheet { padding: 1.1rem; }
  .asheet::before { display: none; }
  .asheet__head, .asheet .grid, .asheet__foot { padding-inline-start: 0; }
  .asheet .grid { grid-template-columns: 1fr; gap: .6rem; }
  .field input, .field select { min-height: 2.7rem; }
  .field textarea { min-height: 3.6rem; }
  .foot__grid { grid-template-columns: 1fr; gap: 2rem; }
  .foot__line { flex-direction: column; gap: .3rem; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .q-work > * { transition: none; }
  .sheetnav .n, .sheetnav .ans { transition: none; }
}