:root {
  --paper: #f2efe7; --paper-deep: #e7e1d4; --ink: #171815; --graphite: #5c5d57; --line: #aaa89d;
  --acid: #c9f43d; --white: #fffdf7; --serif: "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", Arial, sans-serif; --hand: "Caveat", "Segoe Print", cursive;
  --shell: min(1240px, calc(100vw - 64px)); --rule: 1px solid var(--line);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans); text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"); }
a { color: inherit; } button, input, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--acid); color: var(--ink); } :focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 12px 18px; background: var(--acid); font-weight: 600; }.skip-link:focus { top: 16px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }.page-shell { width: var(--shell); margin-inline: auto; }
.scene { position: relative; border-bottom: 1px solid var(--ink); }.scene-number, .eyebrow { margin: 0; font: 600 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.site-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 82px; padding-inline: max(32px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; background: rgba(242,239,231,.94); border-bottom: 1px solid var(--ink); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; line-height: 1; letter-spacing: -.05em; }.brand-core { font: 600 1.26rem/1 var(--sans); }.brand-sub { padding: 4px 6px; background: var(--acid); font: 600 .62rem/1 var(--sans); letter-spacing: .13em; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: .82rem; }.site-nav a { text-decoration: none; background-image: linear-gradient(var(--acid), var(--acid)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 6px; transition: background-size .22s ease; }.site-nav a:hover { background-size: 100% 6px; }
.site-nav .nav-apply { min-height: 44px; padding: 11px 14px; display: inline-flex; align-items: center; gap: 28px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); }
.nav-toggle { display: none; min-height: 44px; border: 0; background: transparent; color: var(--ink); align-items: center; gap: 9px; cursor: pointer; }.menu-lines { width: 22px; height: 15px; position: relative; }.menu-lines i { position: absolute; left: 0; width: 22px; height: 1px; background: currentColor; transition: transform .2s, top .2s; }.menu-lines i:first-child { top: 3px; }.menu-lines i:last-child { top: 11px; }.nav-toggle[aria-expanded="true"] i:first-child { top: 7px; transform: rotate(45deg); }.nav-toggle[aria-expanded="true"] i:last-child { top: 7px; transform: rotate(-45deg); }
.scene-question { min-height: 100svh; padding: 82px 0 0; display: flex; }.question-layout { min-height: calc(100svh - 82px); position: relative; display: flex; flex-direction: column; justify-content: center; padding-block: 80px 60px; }.question-layout .eyebrow { position: absolute; top: 50px; left: 0; }
.question-layout h1 { max-width: 1120px; margin: 0; font: 500 clamp(4.6rem, 10.2vw, 10.3rem)/.86 var(--serif); letter-spacing: -.065em; text-wrap: balance; }.marked-word { position: relative; display: inline-block; white-space: nowrap; }
.doodle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }.loop { position: absolute; width: 104%; height: 95%; left: -2%; top: 12%; stroke-width: 1.6; transform: rotate(-2deg); }
.margin-note { margin: 0; font: 500 1.45rem/1.05 var(--hand); color: var(--graphite); transform: rotate(-4deg); }.note-one { position: absolute; right: 1%; bottom: 16%; }
.continue-link { position: absolute; left: 0; bottom: 36px; display: flex; align-items: center; gap: 15px; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }.continue-link i { width: 72px; height: 1px; background: var(--ink); position: relative; }.continue-link i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
.scene-answer { min-height: 94svh; display: flex; align-items: center; background: var(--ink); color: var(--paper); }.answer-layout { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 48px; align-items: start; }.scene-answer .scene-number { padding-top: 16px; color: var(--acid); }
.answer-copy h2 { margin: 0; font: 500 clamp(7rem, 18vw, 18rem)/.72 var(--serif); letter-spacing: -.075em; }.answer-copy p { margin: .38em 0 0; max-width: 900px; font: 400 clamp(2.1rem, 5.4vw, 5.6rem)/1 var(--serif); letter-spacing: -.045em; }
.answer-arrow { position: absolute; width: 125px; right: 4%; bottom: -95px; color: var(--acid); transform: rotate(14deg); }.note-two { position: absolute; right: 1%; top: -70px; color: var(--paper-deep); }
.scene-observation { padding-block: clamp(100px, 13vw, 190px); }.editorial-heading { display: grid; grid-template-columns: 170px minmax(0, 1fr) 310px; gap: 48px; align-items: start; }.editorial-heading .scene-number { padding-top: 13px; }.editorial-heading h2 { margin: 0; font: 500 clamp(3.5rem, 7.2vw, 7.2rem)/.9 var(--serif); letter-spacing: -.055em; text-wrap: balance; }.editorial-heading h2 em { font-weight: 400; }.editorial-heading > p:last-child { margin: 14px 0 0; color: var(--graphite); }
.observation-ledger { margin-top: clamp(80px, 10vw, 130px); border-top: 1px solid var(--ink); }.ledger-item { display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px; gap: 48px; align-items: baseline; padding: 30px 0; border-bottom: var(--rule); }.ledger-item > span { font: 500 .75rem var(--sans); }.ledger-item p { margin: 0; max-width: 820px; font: 400 clamp(1.5rem, 2.5vw, 2.7rem)/1.12 var(--serif); letter-spacing: -.025em; }.ledger-item strong { font-weight: 500; box-shadow: inset 0 -.22em var(--acid); }.ledger-item small { font-size: .72rem; color: var(--graphite); text-transform: uppercase; letter-spacing: .08em; }.ledger-footnote { width: fit-content; margin: 38px 0 0 auto; font: 500 1.35rem var(--hand); transform: rotate(-1deg); }
.scene-approach { padding-block: clamp(100px, 13vw, 190px); background: var(--white); }.approach-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(70px, 10vw, 150px); }.approach-statement { align-self: start; position: sticky; top: 130px; }.approach-statement h2 { margin: 38px 0 0; font: 500 clamp(3rem, 5.7vw, 6rem)/.96 var(--serif); letter-spacing: -.05em; }.strike { position: relative; color: var(--graphite); }.strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 3px; background: var(--ink); transform: rotate(-3deg); }
.hand-note { width: fit-content; margin: 55px 8% 0 auto; padding: 9px 15px; border: 1.5px solid var(--ink); font: 500 1.4rem/1.05 var(--hand); transform: rotate(3deg); }.approach-notes { border-top: 1px solid var(--ink); }.approach-note { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 34px 0 42px; border-bottom: var(--rule); }.approach-note > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 48% 52% 45% 55%; font: 600 .76rem var(--sans); }.approach-note:nth-child(even) > span { transform: rotate(6deg); border-radius: 55% 45% 52% 48%; }.approach-note h3 { margin: 0 0 10px; font: 500 clamp(1.6rem, 2.2vw, 2.3rem)/1 var(--serif); }.approach-note p { margin: 0; color: var(--graphite); }
.interlude { background: var(--acid); border-bottom: 1px solid var(--ink); }.interlude-inner { min-height: 55svh; padding-block: 90px; display: grid; grid-template-columns: 170px 1fr; gap: 48px; align-items: center; }.star { width: 74px; transform: rotate(-8deg); }.interlude p { max-width: 980px; margin: 0; font: 500 clamp(2.8rem, 5.7vw, 6rem)/.95 var(--serif); letter-spacing: -.045em; }.interlude em { font-weight: 400; }
.scene-paths { padding-block: clamp(100px, 13vw, 190px); }.paths-grid .editorial-heading { margin-bottom: 80px; }.path-list { margin-left: 218px; border-top: 1px solid var(--ink); }.path-list a { min-height: 120px; display: grid; grid-template-columns: 55px minmax(0, 1fr) 45px; gap: 28px; align-items: center; border-bottom: var(--rule); text-decoration: none; transition: background .2s, padding .2s; }.path-list a:hover, .path-list a:focus-visible { padding-inline: 20px; background: var(--white); }.path-list span { font-size: .72rem; }.path-list strong { max-width: 820px; font: 400 clamp(1.5rem, 2.5vw, 2.65rem)/1.1 var(--serif); }.path-list i { font: 400 1.8rem var(--serif); }
.scene-application { padding-block: clamp(100px, 12vw, 170px); background: var(--paper-deep); }.application-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(70px, 10vw, 150px); }.application-copy { position: relative; align-self: start; }.application-copy h2 { margin: 36px 0 26px; font: 500 clamp(3.2rem, 6vw, 6rem)/.94 var(--serif); letter-spacing: -.05em; }.application-copy > p:not(.scene-number):not(.form-side-note) { max-width: 540px; color: var(--graphite); }
.form-side-note { width: fit-content; max-width: 330px; margin: 50px 0 0 auto; padding: 10px 14px; border: 1px solid var(--ink); font: 500 1.25rem/1.1 var(--hand); transform: rotate(-2deg); opacity: 0; transition: opacity .2s; }.form-side-note.has-note { opacity: 1; }.form-arrow { position: absolute; width: 95px; right: -5%; bottom: -50px; transform: rotate(35deg); }
.application-form { padding: clamp(30px, 5vw, 64px); background: var(--white); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }.form-row { margin-bottom: 30px; }.form-row label, legend { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 600; }
input:not([type="radio"]), textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 2px; background: transparent; color: var(--ink); } textarea { border: 1px solid var(--ink); padding: 12px; resize: vertical; } input:focus, textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 3px 0 var(--acid); } textarea:focus { box-shadow: inset 0 0 0 3px var(--acid); }.form-row small { display: block; margin-top: 7px; color: var(--graphite); }
fieldset { margin: 0 0 30px; padding: 0; border: 0; }.reason-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.reason-options label { position: relative; cursor: pointer; }.reason-options input { position: absolute; opacity: 0; }.reason-options span { min-height: 64px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid var(--line); font-size: .78rem; line-height: 1.3; transition: background .18s, border-color .18s; }.reason-options input:checked + span { background: var(--acid); border-color: var(--ink); }.reason-options input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }.submit-button { width: 100%; min-height: 58px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 600; cursor: pointer; transition: color .2s, background .2s; }.submit-button:hover { background: var(--acid); color: var(--ink); }.submit-note { margin: 13px 0 0; color: var(--graphite); font-size: .72rem; }
.site-footer { padding-block: 64px; background: var(--ink); color: var(--paper); }.footer-grid { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 40px; align-items: start; }.brand-light .brand-sub { color: var(--ink); }.footer-grid p { margin: 0; color: var(--paper-deep); }.footer-grid nav { display: flex; gap: 24px; font-size: .8rem; }.copyright { grid-column: 3; text-align: right; font-size: .74rem; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.8,.26,1); }.reveal.is-visible { opacity: 1; transform: none; }.draw-on-view path, .draw-on-view use { stroke-dasharray: 430; stroke-dashoffset: 430; transition: stroke-dashoffset 1s ease .25s; }.is-visible .draw-on-view path, .is-visible .draw-on-view use, .draw-on-view.is-visible path, .draw-on-view.is-visible use { stroke-dashoffset: 0; }
@media (max-width: 980px) {
  :root { --shell: min(100% - 40px, 760px); }.site-header { padding-inline: max(20px, calc((100vw - 760px)/2)); }.nav-toggle { display: flex; }.site-nav { display: none; position: absolute; top: 81px; left: 20px; right: 20px; padding: 12px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); flex-direction: column; align-items: stretch; gap: 0; }.site-nav[data-open] { display: flex; }.site-nav a { min-height: 48px; padding: 12px; display: flex; align-items: center; }.site-nav .nav-apply { justify-content: space-between; }
  .question-layout h1 { font-size: clamp(4.2rem, 13vw, 7.5rem); }.answer-layout, .editorial-heading { grid-template-columns: 130px 1fr; gap: 30px; }.editorial-heading > p:last-child { grid-column: 2; max-width: 520px; }.ledger-item { grid-template-columns: 80px 1fr; gap: 24px; }.ledger-item small { grid-column: 2; }.approach-grid, .application-grid { grid-template-columns: 1fr; }.approach-statement { position: static; }.approach-notes { margin-left: 130px; }.interlude-inner { grid-template-columns: 100px 1fr; }.path-list { margin-left: 160px; }.application-copy { max-width: 670px; }.form-arrow { display: none; }
}
@media (max-width: 620px) {
  :root { --shell: calc(100% - 32px); } body { font-size: 16px; }.site-header { height: 70px; padding-inline: 16px; }.site-nav { top: 69px; left: 16px; right: 16px; } html { scroll-padding-top: 76px; }.scene-question { min-height: 100svh; padding-top: 70px; }.question-layout { min-height: calc(100svh - 70px); padding-block: 84px 72px; }.question-layout .eyebrow { top: 28px; }.question-layout h1 { font-size: clamp(3.35rem, 15vw, 4.7rem); line-height: .9; }.marked-word { white-space: normal; }.note-one { right: 0; bottom: 18%; font-size: 1.15rem; }.continue-link { bottom: 25px; }
  .scene-answer { min-height: 90svh; }.answer-layout { display: block; }.scene-answer .scene-number { margin-bottom: 65px; }.answer-copy h2 { font-size: 28vw; }.answer-copy p { font-size: 12vw; }.note-two { top: 10px; font-size: 1.15rem; }.answer-arrow { right: 0; bottom: -90px; width: 90px; }
  .scene-observation, .scene-approach, .scene-paths, .scene-application { padding-block: 90px; }.editorial-heading { display: block; }.editorial-heading h2 { margin-top: 30px; font-size: clamp(3.3rem, 15vw, 5rem); }.editorial-heading > p:last-child { margin-top: 28px; }.observation-ledger { margin-top: 65px; }.ledger-item { grid-template-columns: 35px 1fr; gap: 13px; padding: 24px 0; }.ledger-item p { font-size: 1.55rem; }.ledger-item small { grid-column: 2; }.ledger-footnote { margin-top: 28px; max-width: 84%; font-size: 1.15rem; }
  .approach-statement h2 { font-size: clamp(3rem, 14vw, 4.7rem); }.approach-notes { margin-left: 0; }.approach-note { grid-template-columns: 42px 1fr; gap: 15px; }.hand-note { margin-right: 0; }.interlude-inner { min-height: 58svh; display: block; padding-block: 75px; }.star { width: 56px; margin-bottom: 40px; }.interlude p { font-size: clamp(2.6rem, 12vw, 4rem); }
  .paths-grid .editorial-heading { margin-bottom: 55px; }.path-list { margin-left: 0; }.path-list a { min-height: 110px; grid-template-columns: 27px 1fr 25px; gap: 10px; }.path-list strong { font-size: 1.45rem; }.path-list a:hover, .path-list a:focus-visible { padding-inline: 8px; }.application-copy h2 { font-size: clamp(3.2rem, 15vw, 5rem); }.form-side-note { margin-left: 0; }.application-form { padding: 28px 20px; box-shadow: 6px 6px 0 var(--ink); }.reason-options { grid-template-columns: 1fr; }.reason-options span { min-height: 52px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > p:not(.copyright) { text-align: right; }.footer-grid nav { grid-column: 1 / 3; border-top: 1px solid #54554f; padding-top: 24px; }.copyright { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }.draw-on-view path, .draw-on-view use { stroke-dashoffset: 0; } }

/* Second art direction: a working-paper surface with hand-made wayfinding. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 8% 7%, rgba(201,244,61,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(23,24,21,.06) 0 1px, transparent 2px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(23,24,21,.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(23,24,21,.02) 47px 48px);
  background-size: 34px 34px, 27px 27px, auto, auto;
}
main { overflow: clip; }
.scene-number, .eyebrow { display: none; }

.site-header {
  top: 14px; left: 50%; right: auto; width: var(--shell); height: 62px; padding: 9px 13px 9px 18px;
  transform: translateX(-50%) rotate(-.12deg); border: 1.5px solid var(--ink); border-radius: 45% 55% 48% 52% / 14% 18% 16% 20%;
  background: rgba(255,253,247,.93); box-shadow: 4px 5px 0 rgba(23,24,21,.95); backdrop-filter: blur(12px);
}
.site-header::before { content: ""; position: absolute; z-index: -1; inset: -4px 4px 3px -3px; border: 1px solid var(--ink); border-radius: 52% 48% 45% 55% / 19% 14% 20% 15%; transform: rotate(.22deg); pointer-events: none; }
.brand { position: relative; padding-bottom: 5px; }
.brand-scribble { position: absolute; left: 0; bottom: -7px; width: 89px; height: 25px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.site-nav { gap: clamp(18px, 2.4vw, 34px); font: 500 1.12rem/1 var(--hand); }
.site-nav a { background-size: 0 5px; }
.site-nav .nav-apply { min-height: 40px; padding: 9px 15px; border: 0; border-radius: 48% 52% 45% 55% / 20% 18% 23% 17%; box-shadow: 2px 2px 0 var(--acid); }

.scene-question { padding-top: 90px; isolation: isolate; }
.scene-question::before { content: ""; position: absolute; z-index: -1; width: min(54vw, 760px); aspect-ratio: 1.7; left: -11vw; top: 21%; border: 1px solid rgba(23,24,21,.13); border-radius: 47% 53% 50% 46%; transform: rotate(-14deg); }
.scene-question::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 190px; right: -55px; top: 20%; background: repeating-linear-gradient(-13deg, transparent 0 10px, rgba(23,24,21,.08) 10px 11px); clip-path: polygon(12% 5%, 96% 0, 85% 92%, 0 100%); transform: rotate(6deg); }
.question-layout { min-height: calc(100svh - 90px); padding-block: 48px 76px; }
.question-layout h1 { position: relative; z-index: 1; max-width: 1180px; }
.developer-note { position: absolute; left: 1%; bottom: 12%; margin: 0; padding: 10px 15px 9px; background: var(--white); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 500 1.02rem/1.08 var(--hand); transform: rotate(-2deg); }
.developer-note span { display: inline-block; padding-inline: 3px; background: var(--acid); }
.hero-plus { position: absolute; left: 29%; bottom: 12%; width: 40px; transform: rotate(11deg); }
.note-one { bottom: 17%; }
.continue-link { left: 50%; transform: translateX(-50%); }

.answer-layout { display: block; }
.answer-copy { margin-left: clamp(0px, 8vw, 120px); }
.answer-copy::before { content: "✳"; position: absolute; left: 1%; top: 0; color: var(--acid); font: 400 clamp(2rem, 5vw, 5rem) var(--hand); transform: rotate(14deg); }

.scene-observation { background-image: radial-gradient(circle at 88% 14%, rgba(201,244,61,.22) 0 5%, transparent 5.2%), linear-gradient(102deg, transparent 0 73%, rgba(255,253,247,.6) 73% 100%); }
.editorial-heading { grid-template-columns: minmax(0, 1fr) 220px; gap: 70px; }
.editorial-heading h2 { grid-column: 1; }
.editorial-heading > p:last-child { grid-column: 2; }
.heading-sketch { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 10px; color: var(--graphite); transform: rotate(4deg); }
.heading-sketch svg { width: 88px; }
.heading-sketch span { font: 500 1.22rem var(--hand); }
.observation-ledger { margin-top: clamp(70px, 9vw, 115px); }
.ledger-item { grid-template-columns: 80px minmax(0, 1fr); gap: 32px; }
.ledger-mark { width: 42px; max-height: 42px; justify-self: center; transform: rotate(-8deg); }
.ledger-item:nth-child(even) .ledger-mark { transform: rotate(9deg); }
.ledger-item:nth-child(3n) .ledger-mark { width: 52px; }
.ledger-item p { max-width: 960px; }

.scene-approach { background-image: linear-gradient(rgba(23,24,21,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(23,24,21,.04) 1px, transparent 1px); background-size: 28px 28px; }
.approach-statement { position: sticky; }
.approach-statement h2 { margin-top: 0; }
.hand-note { max-width: 360px; padding: 13px 18px; background: var(--acid); border-radius: 51% 49% 46% 54% / 9% 12% 8% 13%; }

.practice-board { position: relative; padding-block: clamp(90px, 11vw, 150px); background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--ink); overflow: hidden; }
.practice-board::before { content: ""; position: absolute; width: 45vw; height: 1px; right: -3vw; top: 90px; background: var(--paper); transform: rotate(-2deg); box-shadow: 0 5px 0 rgba(242,239,231,.25); }
.practice-intro { display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: end; }
.practice-intro h2 { margin: 0; font: 500 clamp(3.4rem, 6vw, 6.4rem)/.9 var(--serif); letter-spacing: -.055em; }
.practice-intro p { margin: 0; color: #c3c0b8; }
.practice-equation { margin-top: clamp(75px, 10vw, 125px); display: grid; grid-template-columns: 1fr 54px 1fr 54px 1fr 64px 1fr; gap: 22px; align-items: center; }
.equation-term, .equation-result { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 4px; border-block: 1px solid #5d5e57; }
.equation-term b { font: 500 clamp(2.2rem, 4vw, 4.2rem)/1 var(--serif); letter-spacing: -.04em; }
.equation-term span { max-width: 170px; color: #c3c0b8; }
.operator { width: 48px; color: var(--paper); transform: rotate(8deg); }
.operator.equals { width: 58px; transform: rotate(-3deg); }
.equation-result { position: relative; border-color: var(--acid); color: var(--acid); }
.equation-result span { font: 500 1.28rem var(--hand); }
.equation-result b { font: 500 clamp(4rem, 7vw, 7rem)/.8 var(--serif); letter-spacing: -.06em; }
.result-loop { position: absolute; width: 120%; height: 80%; left: -10%; bottom: -2%; stroke-width: 1.4; }

.interlude-inner { position: relative; grid-template-columns: 190px 1fr; }
.interlude-inner::before, .interlude-inner::after { content: ""; position: absolute; left: 12px; top: 50%; width: 135px; height: 78px; border: 1px solid var(--ink); border-radius: 50%; transform: translateY(-50%) rotate(17deg); }
.interlude-inner::after { width: 92px; height: 128px; left: 34px; transform: translateY(-50%) rotate(-24deg); }
.star { position: relative; z-index: 1; justify-self: center; }

.paths-grid .editorial-heading { grid-template-columns: 1fr 310px; }
.path-list { margin-left: 0; }
.path-list a { grid-template-columns: 62px minmax(0, 1fr) 45px; }
.path-list a > svg { width: 38px; max-height: 40px; justify-self: center; transform: rotate(-8deg); }
.path-list a:nth-child(even) > svg { transform: rotate(8deg); }

.scene-application { background-image: radial-gradient(circle at 10% 76%, rgba(201,244,61,.45) 0 7%, transparent 7.2%), repeating-linear-gradient(-12deg, transparent 0 34px, rgba(23,24,21,.035) 34px 35px); }
.application-copy h2 { margin-top: 0; }

@media (max-width: 980px) {
  .site-header { width: calc(100% - 32px); padding-inline: 14px; }
  .site-nav { top: 68px; left: 0; right: 0; font-size: 1.18rem; border-radius: 3px 8px 5px 10px; }
  .question-layout h1 { font-size: clamp(4rem, 12.7vw, 7.2rem); }
  .developer-note { left: 0; bottom: 10%; }.hero-plus { left: 45%; bottom: 12%; }.note-one { bottom: 17%; }
  .editorial-heading { grid-template-columns: 1fr 160px; }
  .approach-statement { position: static; }
  .practice-equation { grid-template-columns: 1fr 42px 1fr; }
  .practice-equation .equation-term:nth-of-type(3), .practice-equation .equation-result { margin-top: 35px; }
  .practice-equation .equals { margin-top: 35px; }
  .practice-intro { grid-template-columns: 1fr 250px; }
}

@media (max-width: 620px) {
  .site-header { top: 9px; height: 57px; border-radius: 12px 18px 10px 15px; }
  .site-header::before { border-radius: 14px 10px 16px 12px; }
  .site-nav { top: 63px; }
  .brand-scribble { width: 77px; }
  .scene-question { padding-top: 76px; }
  .question-layout { min-height: calc(100svh - 76px); padding-block: 32px 90px; justify-content: flex-start; }
  .question-layout h1 { margin-top: 10vh; font-size: clamp(3.2rem, 14.7vw, 4.35rem); }
  .scene-question::before { width: 115vw; left: -42vw; top: 30%; }.scene-question::after { width: 150px; height: 120px; top: 12%; }
  .developer-note { bottom: 10%; font-size: .92rem; }.note-one { bottom: 25%; font-size: 1.12rem; }.hero-plus { left: auto; right: 4%; bottom: 12%; width: 34px; }
  .continue-link { left: auto; right: 0; transform: none; }
  .answer-copy { margin-left: 0; }.answer-copy::before { top: -55px; }.note-two { top: -45px; }
  .editorial-heading, .paths-grid .editorial-heading { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .editorial-heading > p:last-child { grid-column: 1; max-width: 310px; }
  .editorial-heading h2 { margin-top: 0; }.heading-sketch { justify-self: end; margin-right: 8%; }.heading-sketch svg { width: 70px; }
  .ledger-item { grid-template-columns: 42px 1fr; gap: 12px; }.ledger-mark { width: 30px; }.ledger-item:nth-child(3n) .ledger-mark { width: 38px; }
  .practice-intro { display: block; }.practice-intro p { margin-top: 25px; max-width: 290px; }
  .practice-equation { grid-template-columns: 1fr; gap: 14px; margin-top: 60px; }
  .equation-term, .equation-result { min-height: 125px; padding: 19px 5px; }.equation-term span { max-width: none; }.operator, .operator.equals { width: 37px; margin: 0 auto !important; }.practice-equation .equation-term:nth-of-type(3), .practice-equation .equation-result { margin-top: 0; }
  .interlude-inner { grid-template-columns: 1fr; }.interlude-inner::before { width: 96px; height: 58px; left: 5px; top: 105px; }.interlude-inner::after { width: 62px; height: 92px; left: 22px; top: 105px; }.star { justify-self: start; margin-left: 27px; }
  .path-list a { grid-template-columns: 42px 1fr 22px; }.path-list a > svg { width: 29px; }.path-list strong { font-size: 1.38rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transform: translateX(-50%); }
}

/* Content stays readable on direct hash navigation and without JavaScript. */
.reveal { opacity: 1; }

/* Third refinement: question and answer belong to one opening thought. */
.brand-scribble { display: none; }
.hand-qmark { display: inline-block; margin-left: -.1em; font: 600 .82em/.7 var(--hand); letter-spacing: 0; transform: rotate(9deg) translateY(-.03em); transform-origin: bottom left; }
.hero-answer { position: absolute; left: 3%; bottom: 15%; display: flex; align-items: baseline; gap: 22px; max-width: 760px; }
.hero-answer strong { font: 600 clamp(2rem, 3.5vw, 3.7rem)/.9 var(--serif); letter-spacing: -.045em; }
.hero-answer p { margin: 0; font: 400 clamp(1.35rem, 2.3vw, 2.35rem)/1 var(--serif); letter-spacing: -.025em; }
.hero-answer-star { position: absolute; width: 27px; right: -47px; top: -19px; transform: rotate(9deg); }
.note-one { top: 17%; right: 2%; bottom: auto; }
.developer-note { left: auto; right: 1%; bottom: 11%; }
.hero-plus { left: auto; right: 31%; bottom: 12%; }
.continue-link { bottom: 27px; }

.approach-plus { position: absolute; width: 35px; right: 6%; bottom: -78px; color: var(--ink); transform: rotate(12deg); }
.practice-intro { display: block; }
.practice-intro h2 { max-width: 850px; }
.equation-term { min-height: 220px; }
.equation-term span { max-width: 210px; line-height: 1.35; }

@media (max-width: 980px) {
  .question-layout h1 { margin-top: -9vh; }
  .hero-answer { left: 0; bottom: 19%; max-width: 590px; }
  .note-one { top: 15%; }
  .developer-note { right: 0; bottom: 8%; }
  .hero-plus { right: 40%; bottom: 10%; }
  .approach-plus { display: none; }
}

@media (max-width: 620px) {
  .question-layout { justify-content: flex-start; }
  .question-layout h1 { margin-top: 7vh; font-size: clamp(3.05rem, 14vw, 4.15rem); }
  .marked-word { white-space: nowrap; }
  .hand-qmark { font-size: .88em; }
  .hero-answer { position: static; display: block; max-width: 330px; margin-top: 28px; }
  .hero-answer strong { display: block; font-size: 2.15rem; }
  .hero-answer p { margin-top: 7px; font-size: 1.58rem; line-height: 1.02; }
  .hero-answer-star { width: 23px; right: 7px; top: 1px; }
  .note-one { top: auto; right: 0; bottom: 21%; }
  .developer-note { left: 0; right: auto; bottom: 9%; }
  .hero-plus { right: 4%; bottom: 10%; }
  .continue-link { bottom: 20px; }
  .equation-term { min-height: 155px; }
  .equation-term span { max-width: 300px; line-height: 1.35; }
}

/* Fourth refinement: stronger opening beat and hand-drawn approach markers. */
.hero-answer { gap: clamp(16px, 2vw, 28px); }
.hero-answer strong {
  position: relative;
  z-index: 0;
  padding: 0 .12em .02em;
  font-family: var(--hand);
  font-size: clamp(2.65rem, 4.8vw, 5rem);
  font-weight: 600;
  letter-spacing: -.035em;
  transform: rotate(-3deg);
}
.hero-answer strong::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% -.08em 3% -.06em;
  background: var(--acid);
  clip-path: polygon(1% 12%, 98% 0, 100% 88%, 4% 100%);
  transform: rotate(1.5deg);
}
.hero-answer p { line-height: 1.08; }
.answer-focus { position: relative; display: inline-block; white-space: nowrap; font-style: italic; }
.answer-underline { position: absolute; width: 103%; height: 18px; left: -1%; bottom: -13px; stroke-width: 3; transform: rotate(-2deg); }
.hero-answer-star { top: -30px; }

.approach-statement { position: sticky; }
.approach-bracket {
  display: block;
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 142px;
  right: clamp(-106px, -7vw, -72px);
  top: 52%;
  color: var(--graphite);
  stroke-width: 2.4;
}
.approach-note { grid-template-columns: 54px minmax(0, 1fr) 52px; align-items: start; }
.approach-icon { width: 38px; max-height: 42px; margin-top: 4px; justify-self: end; color: var(--ink); transform: rotate(-8deg); stroke-width: 2.4; }
.approach-note:nth-child(even) .approach-icon { transform: rotate(9deg); }
.approach-icon-eye { width: 49px; }
.approach-note:hover .approach-icon { color: #7fa800; }
.equation-result b { font-size: clamp(2.15rem, 3.3vw, 3.45rem); line-height: .88; }
.result-loop { height: 91%; bottom: -7%; }

@media (max-width: 980px) {
  .approach-statement { position: static; }
  .approach-bracket {
    position: relative;
    width: 38px;
    height: 92px;
    right: auto;
    top: auto;
    margin: 20px auto 8px;
    transform: none;
  }
}

@media (max-width: 620px) {
  .hero-answer { max-width: 340px; }
  .hero-answer strong { width: fit-content; font-size: 2.75rem; }
  .hero-answer p { margin-top: 11px; font-size: 1.5rem; }
  .answer-underline { bottom: -11px; height: 15px; }
  .hero-answer-star { top: -4px; right: 2px; }
  .approach-note { grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 13px; }
  .approach-icon { width: 29px; max-height: 34px; }
  .approach-icon-eye { width: 34px; }
  .approach-bracket { margin-top: 16px; margin-bottom: 4px; }
  .equation-result b { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* Fifth refinement: poster-like opening and a scroll-led approach guide. */
.question-layout { justify-content: center; padding-block: 96px 78px; }
.question-layout h1 {
  max-width: 1160px;
  margin: -4vh 0 0;
  font-family: var(--sans);
  font-size: clamp(4.7rem, 9vw, 8.9rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.hero-answer {
  position: relative;
  left: auto;
  bottom: auto;
  display: block;
  width: min(1120px, 94%);
  max-width: none;
  margin-top: clamp(28px, 4vh, 48px);
}
.hero-answer p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(2rem, 4.25vw, 4.35rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.055em;
}
.hero-answer strong {
  display: inline;
  position: relative;
  padding: 0 .1em .02em;
  font: inherit;
  letter-spacing: inherit;
  transform: none;
}
.hero-answer strong::before { inset: 4% -.02em 1%; clip-path: none; transform: rotate(-.7deg); }
.hero-answer p > span { font-style: normal; text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .11em; }
.hero-answer-arrow { position: absolute; width: clamp(86px, 10vw, 135px); right: 1%; bottom: clamp(-66px, -5vw, -48px); color: var(--ink); transform: rotate(13deg); stroke-width: 2.3; }
.note-one { top: 17%; right: 1%; font-size: 1.3rem; }

.analogy-note { position: relative; overflow: hidden; background: var(--paper-deep); border-bottom: 1px solid var(--ink); }
.analogy-note::after { content: ""; position: absolute; width: 260px; height: 150px; right: -45px; bottom: -38px; border: 1px solid rgba(23,24,21,.18); border-radius: 50%; transform: rotate(-13deg); }
.analogy-note-inner { min-height: 66svh; padding-block: clamp(90px, 11vw, 155px); display: grid; grid-template-columns: 90px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.analogy-mark { width: 54px; margin-top: 12px; transform: rotate(-9deg); }
.analogy-note p { max-width: 1090px; margin: 0; font: 500 clamp(2.15rem, 4.4vw, 4.7rem)/1.03 var(--sans); letter-spacing: -.05em; }
.analogy-note strong { font-weight: 500; background-image: linear-gradient(transparent 74%, var(--acid) 74%); }

.approach-grid { grid-template-columns: minmax(0, 1.08fr) 135px minmax(0, .88fr); gap: clamp(24px, 3.2vw, 46px); align-items: start; }
.approach-statement { position: sticky; top: 130px; }
.approach-guide { position: sticky; z-index: 3; top: 34vh; display: grid; grid-template-columns: 45px 1fr; gap: 12px; align-items: center; min-height: 150px; color: var(--graphite); }
.approach-guide .approach-bracket { position: static; width: 44px; height: 144px; margin: 0; color: currentColor; stroke-width: 2.5; transform: none; }
.approach-guide p { margin: 0; font: 600 1rem/1.05 var(--sans); letter-spacing: -.025em; }
.approach-guide p span { display: block; margin-bottom: 10px; color: var(--ink); font-size: .67rem; letter-spacing: .12em; }
.approach-note { transition: opacity .25s ease, transform .25s ease, background .25s ease; }
.approach-note:not([data-guide-active]) { opacity: .55; }
.approach-note[data-guide-active] { opacity: 1; transform: translateX(6px); background: linear-gradient(90deg, rgba(201,244,61,.18), transparent 72%); }

.practice-equation { padding-right: clamp(42px, 5vw, 72px); }
.result-loop { width: 140%; height: 112%; left: -20%; bottom: -11%; stroke-width: 1.7; }

.footer-grid { grid-template-columns: 1fr auto; gap: 34px 48px; align-items: end; }
.footer-question { grid-column: 1 / -1; padding: 0 0 clamp(70px, 9vw, 120px); border-bottom: 1px solid #54554f; color: var(--paper) !important; font: 500 clamp(3.2rem, 7vw, 7.2rem)/.88 var(--sans); letter-spacing: -.065em; }
.footer-question .hand-qmark { color: var(--acid); }
.footer-description { max-width: 420px; }
.footer-grid nav { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
.copyright { grid-column: 1; text-align: left; }

@media (max-width: 980px) {
  .question-layout h1 { margin-top: -2vh; font-size: clamp(4rem, 12vw, 7rem); }
  .hero-answer { width: min(690px, 94%); }
  .hero-answer p { font-size: clamp(2rem, 5.8vw, 3.5rem); }
  .hero-answer-arrow { right: -4%; }
  .approach-grid { grid-template-columns: 1fr; gap: 38px; }
  .approach-statement { position: static; }
  .approach-guide { top: 78px; display: grid; grid-template-columns: 30px 1fr; min-height: 58px; padding: 7px 13px; background: rgba(255,253,247,.95); border-block: 1px solid var(--ink); backdrop-filter: blur(9px); }
  .approach-guide .approach-bracket { width: 24px; height: 44px; }
  .approach-guide p { display: flex; align-items: baseline; gap: 12px; font-size: 1.05rem; }
  .approach-guide p span { margin: 0; }
  .approach-notes { margin-left: 0; }
  .analogy-note-inner { min-height: 55svh; grid-template-columns: 60px 1fr; }
  .footer-question br { display: none; }
  .practice-equation { padding-right: 0; }
}

@media (max-width: 620px) {
  .question-layout { min-height: calc(100svh - 76px); padding-block: 34px 92px; }
  .question-layout h1 { margin-top: 8vh; font-size: clamp(3rem, 13.4vw, 4rem); line-height: .88; letter-spacing: -.065em; }
  .hero-answer { width: 100%; margin-top: 25px; }
  .hero-answer p { margin: 0; font-size: clamp(1.72rem, 8.4vw, 2.15rem); line-height: 1; }
  .hero-answer strong { display: inline; font-size: inherit; }
  .hero-answer-arrow { width: 78px; right: 2%; bottom: -58px; }
  .note-one { top: auto; right: 0; bottom: 21%; max-width: 170px; font-size: 1.05rem; }
  .developer-note { bottom: 8%; }
  .analogy-note-inner { min-height: auto; padding-block: 80px; display: block; }
  .analogy-mark { width: 38px; margin: 0 0 28px; }
  .analogy-note p { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.02; }
  .approach-grid { gap: 28px; }
  .approach-guide { top: 72px; margin-inline: -1px; }
  .approach-note:not([data-guide-active]) { opacity: .72; }
  .approach-note[data-guide-active] { transform: none; }
  .result-loop { width: 122%; height: 108%; left: -11%; bottom: -8%; }
  .site-footer { padding-block: 54px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-question { grid-column: 1; padding-bottom: 58px; font-size: clamp(3rem, 13vw, 4.5rem); }
  .footer-grid > p:not(.copyright) { text-align: left; }
  .footer-grid nav { grid-column: 1; grid-row: auto; flex-wrap: wrap; padding-top: 24px; }
  .copyright { grid-column: 1; }
}