:root {
  --ink: #0d0e11; --ink-2: #16181d; --ink-3: #22252c;
  --parch: #efe8da; --parch-dim: #b9b2a4; --mute: #7d786e;
  --leaf: #b89b5e; --leaf-dim: #8a7444; --bad: #d08770;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--parch); font-family: var(--body); font-size: 19px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { /* faint vignette + grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(184,155,94,.10), transparent 55%),
              radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}
a { color: var(--leaf); }
.sc { font-variant: all-small-caps; letter-spacing: .18em; font-size: .82rem; color: var(--leaf); }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* Bar */
header { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; }
.mark { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--parch); }
.mark svg { width: 40px; height: 40px; }
.mark span { font-family: var(--display); font-size: 1.15rem; letter-spacing: .32em; text-transform: uppercase; }
@media (max-width: 560px) { header > .sc { display: none; } .mark span { letter-spacing: .22em; } }
header .sc a { color: var(--parch-dim); text-decoration: none; }

/* Hero */
.hero { padding: clamp(40px, 9vh, 110px) 0 30px; text-align: center; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; margin: 18px auto 22px; max-width: 18ch; }
.hero h1 em { color: var(--leaf); font-style: italic; }
.hero p.lede { max-width: 38em; margin: 0 auto; color: var(--parch-dim); font-size: 1.12rem; }
.rule { width: 64px; height: 1px; background: var(--leaf-dim); margin: 34px auto; }
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase;
       padding: 15px 34px; text-decoration: none; border: 1px solid var(--leaf); color: var(--parch); background: transparent; cursor: pointer; transition: background .3s, color .3s; }
.btn:hover, .btn:focus-visible { background: var(--leaf); color: var(--ink); outline: none; }
.btn.ghost { border-color: var(--ink-3); color: var(--parch-dim); }
.btn.ghost:hover { background: var(--ink-3); color: var(--parch); }

/* Continuum line */
.continuum { margin: 60px 0 10px; }
.continuum svg { width: 100%; height: auto; display: block; overflow: visible; }
.continuum .tick text { font-family: var(--display); fill: var(--parch-dim); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.continuum .end text { fill: var(--leaf); }
.continuum .travel { stroke-dasharray: 4 8; animation: drift 6s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -120; } }
@media (prefers-reduced-motion: reduce) { .continuum .travel { animation: none; } }

/* Tenets */
.tenets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 48px); padding: 70px 0 30px; border-top: 1px solid var(--ink-3); margin-top: 60px; }
.tenet .num { font-family: var(--display); font-size: 2.4rem; color: var(--leaf); line-height: 1; }
.tenet h3 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; margin: 10px 0 8px; }
.tenet p { margin: 0; color: var(--parch-dim); }

.schools { text-align: center; padding: 60px 0 10px; border-top: 1px solid var(--ink-3); }
.schools ul { list-style: none; padding: 0; margin: 22px 0 14px; }
.schools li { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.schools li small { display: block; font-family: var(--body); font-size: .95rem; color: var(--parch-dim); font-style: italic; margin-top: 4px; }
.quote { text-align: center; padding: 70px 0; }
.quote blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.3; max-width: 26em; margin: 0 auto; }
.quote cite { display: block; margin-top: 18px; font-style: normal; }

/* Inquiry */
#inquiry { scroll-margin-top: 20px; padding: 40px 0 90px; }
.panel { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--ink-3); padding: clamp(24px, 5vw, 60px); max-width: 820px; margin: 0 auto; position: relative; }
.panel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184,155,94,.14); pointer-events: none; }
.progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.roman { display: flex; gap: 18px; font-family: var(--display); font-size: 1.05rem; color: var(--mute); }
.roman span.on { color: var(--leaf); }
.roman span.done { color: var(--parch-dim); }
.step { display: none; }
.step.on { display: block; animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.step h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 6px; line-height: 1.15; }
.step .sub { color: var(--parch-dim); margin: 0 0 26px; }
.q { margin: 26px 0 10px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.opt { text-align: left; background: transparent; border: 1px solid var(--ink-3); color: var(--parch); padding: 14px 16px; font-family: var(--body); font-size: 1.02rem; cursor: pointer; transition: border-color .2s, background .2s; }
.opt small { display: block; color: var(--mute); font-size: .86rem; margin-top: 2px; font-style: italic; }
.opt:hover { border-color: var(--leaf-dim); }
.opt[aria-pressed="true"] { border-color: var(--leaf); background: rgba(184,155,94,.10); }
.opt[aria-pressed="true"] b::before { content: "✦ "; color: var(--leaf); }
.opt b { font-weight: 500; }
label.f { display: block; margin: 18px 0 0; }
label.f span { display: block; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink-3); color: var(--parch);
  font-family: var(--body); font-size: 1.15rem; padding: 10px 2px; border-radius: 0; }
select option { background: var(--ink-2); }
input:focus, select:focus { outline: none; border-bottom-color: var(--leaf); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
.err { color: var(--bad); font-size: .92rem; min-height: 1.3em; margin-top: 6px; font-style: italic; }
.hp { position: absolute; left: -9999px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; color: var(--parch-dim); font-size: .98rem; cursor: pointer; }
.consent input { accent-color: var(--leaf); margin-top: 6px; }
.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; gap: 12px; flex-wrap: wrap; }
.note { color: var(--mute); font-size: .9rem; font-style: italic; }

/* Done */
#done { display: none; text-align: center; }
#done.on { display: block; animation: rise .7s ease both; }
#done h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.seal { width: 84px; height: 84px; margin: 0 auto; }
.path { text-align: left; margin: 40px auto 0; max-width: 560px; border-left: 1px solid var(--leaf-dim); padding-left: 26px; }
.path div { margin: 0 0 22px; position: relative; }
.path div::before { content: ""; position: absolute; left: -31px; top: 9px; width: 9px; height: 9px; border: 1px solid var(--leaf); background: var(--ink); transform: rotate(45deg); }
.path div.now::before { background: var(--leaf); }
.path b { font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.path p { margin: 2px 0 0; color: var(--parch-dim); }

footer { border-top: 1px solid var(--ink-3); padding: 34px 0 60px; color: var(--mute); font-size: .88rem; }
footer p { max-width: 52em; margin: 0 0 10px; }

/* API drawer (mockup only) */
#apiToggle { position: fixed; right: 18px; bottom: 18px; z-index: 20; font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--ink-2); color: var(--parch-dim); border: 1px solid var(--ink-3); padding: 8px 12px; cursor: pointer; }
#api { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #0a0b0d; border-left: 1px solid var(--ink-3); z-index: 30; transform: translateX(100%); transition: transform .3s; display: flex; flex-direction: column; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
#api.open { transform: none; }
#api header { padding: 14px 16px; border-bottom: 1px solid var(--ink-3); }
#api header button { background: none; border: 0; color: var(--parch-dim); font-size: 18px; cursor: pointer; }
#apiLog { overflow: auto; padding: 10px 16px; }
#apiLog .entry { border-bottom: 1px solid var(--ink-3); padding: 10px 0; }
#apiLog .m { color: var(--leaf); }
#apiLog .s { float: right; color: #8fbf8f; } #apiLog .s.bad { color: var(--bad); }
#apiLog pre { white-space: pre-wrap; word-break: break-all; color: var(--parch-dim); margin: 6px 0 0; }
#apiLog .ev { color: #c9b27a; margin-top: 4px; }

/* ═══ Additions on top of the approved layout (2026-11-03 round 2) ═══ */

/* Harvard red for the headline highlight, lifted slightly so it reads on ink */
:root { --crimson: #c4243c; }
.hero h1 em { color: var(--crimson); }

/* Smaller description under the headline */
.hero p.lede { font-size: .95rem; max-width: 34em; }

/* Background video behind the header + hero, under a heavy ink veil */
.top { position: relative; isolation: isolate; overflow: hidden; }
.top .bg { position: absolute; inset: 0; z-index: -2; }
.top .bg video, .top .bg svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.top .veil { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, rgba(13,14,17,.80), rgba(13,14,17,.92) 60%, rgba(13,14,17,1) 100%); }
@media (prefers-reduced-motion: reduce) { .top .bg video { display: none; } }

/* Logo lockup: larger crest + set wordmark */
.mark .crest { width: 54px; height: 64px; flex: none; }
.lockup { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lockup .w1 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: .34em; margin-right: -.34em; color: var(--parch); }
.lockup .w2 { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .52em; margin-right: -.52em; color: var(--leaf); }
.lockup .w2::before, .lockup .w2::after { content: ""; width: 22px; height: 1px; background: var(--leaf-dim); }
@media (max-width: 560px) { .mark .crest { width: 44px; height: 52px; } .lockup .w1 { font-size: 1.25rem; letter-spacing: .26em; margin-right: -.26em; } .lockup .w2 { font-size: .64rem; letter-spacing: .4em; } }

/* Schools we counsel for: university + its schools */
.schools .uni-sub { height: 1.6em; position: relative; overflow: hidden; font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--parch-dim); margin-top: 6px; }
.schools .uni-sub span { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.schools .uni-sub span.on { opacity: 1; transform: none; }
.schools ul.list { columns: 2 260px; column-gap: 36px; max-width: 760px; margin: 26px auto 26px; text-align: left; }
.schools ul.list li { font-family: var(--body); font-size: 1rem; break-inside: avoid; padding: 7px 0 7px 18px; border-bottom: 1px solid var(--ink-3); position: relative; }
.schools ul.list li::before { content: "✦"; position: absolute; left: 0; top: 9px; font-size: .7rem; color: var(--leaf-dim); }
.schools ul.list a { color: var(--parch); text-decoration: none; }
.schools ul.list a:hover { color: var(--leaf); }

/* School and university pages (same parts as the home page) */
.facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.chip { border: 1px solid var(--ink-3); padding: 3px 12px; font-size: .9rem; color: var(--parch-dim); }
.chip b { font-weight: 400; color: var(--leaf); margin-right: 6px; font-variant: all-small-caps; letter-spacing: .14em; }
.sect { padding: 70px 0 30px; border-top: 1px solid var(--ink-3); }
.sect .head { text-align: center; margin-bottom: 34px; }
.sect .head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: 8px 0; }
.sect .head p { color: var(--parch-dim); max-width: 36em; margin: 0 auto; }
.romanlist { list-style: none; counter-reset: r; padding: 0; max-width: 680px; margin: 0 auto; }
.romanlist li { counter-increment: r; display: grid; grid-template-columns: 60px 1fr; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--ink-3); font-size: 1.1rem; }
.romanlist li::before { content: counter(r, upper-roman); font-family: var(--display); color: var(--leaf); font-size: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--ink-3); padding: 20px; text-decoration: none; color: var(--parch); display: block; transition: border-color .2s; }
.card:hover { border-color: var(--leaf); }
.card h3 { font-family: var(--display); font-weight: 500; font-size: 1.3rem; margin: 6px 0; line-height: 1.2; }
.card p { margin: 0; color: var(--parch-dim); font-size: .95rem; font-style: italic; }

/* Inquiry: done screen as a class (the funnel is now a shared component) */
.done { display: none; text-align: center; }
.done.on { display: block; animation: rise .7s ease both; }
.done .sub.done-body { max-width: 34em; margin: 0 auto; color: var(--parch-dim); }
.done .btn.done-open { margin-top: 22px; }
.sc i.opt-note { text-transform: none; letter-spacing: 0; }
.done h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.opts.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
#api .h { padding: 14px 16px; border-bottom: 1px solid var(--ink-3); display: flex; justify-content: space-between; }
#api .h button { background: none; border: 0; color: var(--parch-dim); font-size: 18px; cursor: pointer; }
.top { min-height: 100svh; }

/* Headline emphasis (round 3): "4 in 100" on a crimson highlight band, "Harvard" in Harvard red */
.hero h1 mark { white-space: nowrap; color: var(--parch); font-style: normal; padding: 0 .14em; margin: 0 .02em;
  background: linear-gradient(180deg, transparent 14%, rgba(165,28,48,.92) 14%, rgba(165,28,48,.92) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero h1 em { color: var(--crimson); font-style: italic; }
.hero p.lede { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--parch-dim); }

/* ═══ Round 5: two-line headline (option A) + load sequence ═══ */
.hero h1.hl { font-weight: 300; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.1; letter-spacing: -.005em; max-width: none; margin: 18px auto 24px; font-variant-numeric: lining-nums; }
.hero h1.hl .l1, .hero h1.hl .l2 { display: block; }
.hero h1.hl mark { color: var(--parch); font-weight: 500; padding: 0 .14em; white-space: nowrap;
  background: linear-gradient(180deg, transparent 10%, rgba(165,28,48,.88) 10%, rgba(165,28,48,.88) 94%, transparent 94%); }
.hero h1.hl .adm { background-image: linear-gradient(var(--leaf), var(--leaf)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 2px; transition: background-size 1s cubic-bezier(.6,.05,.2,1); }
.hero h1.hl .adm.drawn { background-size: 100% 2px; }
.hero h1.hl .school { display: inline-block; text-align: left; white-space: nowrap; }
.hero h1.hl .school b { display: inline-block; font-weight: 600; letter-spacing: .04em; color: var(--crimson); transition: opacity .26s ease, transform .26s ease; }
.hero h1.hl .school b.out { opacity: 0; }
.hero h1.hl .stop { color: var(--crimson); font-weight: 600; }

/* Load sequence: black, words arrive, then meta, then button, then the page lifts */
.hero h1.hl .w { transition: opacity .9s ease, transform .9s ease; }
body.intro .hero h1.hl .w:not(.in) { opacity: 0; transform: translateY(.12em); }
body.intro .hero h1.hl mark.w:not(.in) { transform: none; }
.top .bg, .top .veil, body::before, header, .hero > .sc, .hero .lede, .hero .rule, .hero .btn, .hero .continuum, .top ~ .wrap { transition: opacity 1.6s ease; }
body.intro .top .bg, body.intro .top .veil, body.intro::before, body.intro header, body.intro .hero .continuum, body.intro .top ~ .wrap, body.intro .top ~ .snap, body.intro .dots { opacity: 0; }
body.intro:not(.intro-eyebrow) .hero > .sc, body.intro:not(.intro-sub) .hero .lede { opacity: 0; }
body.intro:not(.intro-cta) .hero .rule, body.intro:not(.intro-cta) .hero .btn { opacity: 0; }
body.intro { background: #000; }
body { transition: background-color 1.6s ease; }
body.intro #apiToggle { opacity: 0; }

/* Round 6: two fixed lines; only the school word changes */
.hero h1.hl .l1, .hero h1.hl .l2 { white-space: nowrap; }
.hero h1.hl.narrow .l1, .hero h1.hl.narrow .l2 { white-space: normal; }
.hero h1.hl.narrow .school { display: block; text-align: center; margin: 0 auto; }
/* "4 in 100" fades in like every other word: no flash, no transform */
.hero h1.hl mark.w { transition: opacity .9s ease; }

/* Round 7: text and button on black, then the page fades to its final state over 5 s */
.hero > .sc, .hero .lede, .hero .rule, .hero .btn { transition: opacity 1.2s ease; }
.top .bg, .top .veil, body::before, header, .hero .continuum, .top ~ .wrap, .top ~ .snap, .dots, #apiToggle { transition: opacity 5s linear; }
body { transition: background-color 5s linear; }

/* Round 8: schools we counsel for = its own section: heading, university link, rotating school line */
.schools { padding: 90px 0 80px; border-bottom: 1px solid var(--ink-3); }
.schools .uni-link { display: inline-block; margin-top: 22px; font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3rem); color: var(--parch); text-decoration: none;
  background-image: linear-gradient(var(--leaf-dim), var(--leaf-dim)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .5s ease, color .3s; }
.schools .uni-link:hover, .schools .uni-link:focus-visible { color: var(--leaf); background-size: 100% 1px; outline: none; }
.schools .uni-sub { margin-top: 10px; }
.schools + .quote { border-top: 0; }

/* Round 9: full-screen section slider (home) */
html.snapper { scroll-snap-type: y mandatory; }
html.snapper .snap { min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
html.snapper section.snap { display: flex; flex-direction: column; justify-content: center; }
html.snapper section.snap > .wrap { width: 100%; }
html:has(body.intro), html.modal-open { overflow: hidden; }
#s-method .tenets { margin: 0; border: 0; padding: 0; }
#s-schools .schools { border: 0; padding: 0; }
#s-quote .quote { padding: 0; }
#s-quote { justify-content: space-between; }
#s-quote > .wrap:first-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#s-quote footer { border-top: 1px solid var(--ink-3); }
.snap + .snap { border-top: 1px solid var(--ink-3); }
.dots { position: fixed; right: clamp(12px, 2vw, 26px); top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 12px; }
.dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--leaf-dim); background: transparent; transform: rotate(45deg); cursor: pointer; transition: background .3s, border-color .3s; }
.dots button.on { background: var(--leaf); border-color: var(--leaf); }
@media (max-width: 560px) { .dots { right: 8px; gap: 10px; } .dots button { width: 7px; height: 7px; }
  #s-method .tenets { gap: 22px; } #s-method .tenet p { font-size: .92rem; } #s-method .tenet .num { font-size: 1.8rem; } #s-method .tenet h3 { font-size: 1.25rem; margin: 4px 0; } }

/* Round 9: the inquiry is a full-screen modal */
.modal { position: fixed; inset: 0; z-index: 40; background: radial-gradient(ellipse at 50% -10%, rgba(184,155,94,.10), transparent 55%), var(--ink);
  overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.modal.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.modal .inner { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(64px, 9vh, 90px) clamp(12px, 4vw, 40px) 40px; }
.modal .inner > div { width: 100%; }
.modal .close { position: fixed; top: 16px; right: 20px; z-index: 2; width: 46px; height: 46px; border: 1px solid var(--ink-3); background: var(--ink); color: var(--parch-dim);
  font-family: var(--display); font-size: 1.8rem; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s; }
.modal .close:hover, .modal .close:focus-visible { border-color: var(--leaf); color: var(--parch); outline: none; }

/* Round 9b: the controller moves one section at a time; snap only realigns. Short screens: hero fits. */
html.snapper { scroll-snap-type: y proximity; overflow-y: hidden; }
html.snapper body { overscroll-behavior: none; }
@media (max-height: 780px) {
  .top header { padding: 18px 0; }
  .hero { padding-top: clamp(18px, 4vh, 40px); }
  .hero .rule { margin: 22px auto; }
  .continuum { margin: 30px 0 0; }
}
/* Rotating school line: the old name leaves before the new one arrives (no overlap) */
.schools .uni-sub span { transition: opacity .45s ease, transform .45s ease; }
.schools .uni-sub span.on { transition-delay: .5s; }

/* Round 10: section 2 (the method): centred, scales with the screen, three across or stacked */
#s-method .tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); align-items: start; }
#s-method .tenet { text-align: center; }
#s-method .tenet .num { font-size: clamp(3rem, min(6.2vw, 10vh), 6.5rem); line-height: 1; }
#s-method .tenet h3 { font-size: clamp(1.5rem, min(2.7vw, 4.6vh), 2.9rem); margin: clamp(10px, 2vh, 22px) 0 clamp(8px, 1.6vh, 16px); }
#s-method .tenet p { font-size: clamp(1.05rem, min(1.55vw, 2.7vh), 1.55rem); line-height: 1.45; max-width: 17em; margin: 0 auto; }
@media (max-width: 760px) {
  #s-method .tenets { grid-template-columns: 1fr; gap: clamp(20px, 4.5vh, 44px); }
  #s-method .tenet .num { font-size: clamp(2.2rem, 7vh, 3.6rem); }
  #s-method .tenet h3 { font-size: clamp(1.35rem, 3.6vh, 1.9rem); margin: 4px 0 6px; }
  #s-method .tenet p { font-size: clamp(1rem, 2.3vh, 1.2rem); }
}
@media (min-width: 761px) {
  #s-method .tenet .num { font-size: clamp(3.4rem, min(7.6vw, 12.5vh), 8rem); }
  #s-method .tenet h3 { font-size: clamp(1.7rem, min(3.3vw, 5.6vh), 3.5rem); }
  #s-method .tenet p { font-size: clamp(1.1rem, min(1.9vw, 3.3vh), 1.9rem); max-width: 16em; }
}
#s-method .tenet p, #s-method .tenet h3 { text-wrap: balance; }

/* Round 11: the method podiums. Generated photographs when assets/tenetN.jpg exists; a CSS plinth until then. */
#s-method .podium { height: clamp(150px, min(24vh, 19vw), 300px); display: flex; align-items: flex-end; justify-content: center; margin: 0 auto clamp(14px, 2.6vh, 30px); position: relative; }
#s-method .podium img { height: 100%; width: auto; max-width: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 50% 55%, #000 55%, transparent 100%); }
#s-method .podium.has-img .plinth { display: none; }
#s-method .plinth { position: relative; width: clamp(84px, min(10vw, 15vh), 150px); display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.05) 39%, transparent 41%, transparent 63%, rgba(255,255,255,.035) 64%, transparent 66%),
    linear-gradient(180deg, #202127 0%, #111216 45%, #0a0a0c 100%);
  border-left: 1px solid rgba(184,155,94,.18); border-right: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 1px 0 rgba(233,211,154,.25), 0 26px 40px -18px rgba(0,0,0,.9), 0 0 60px -20px rgba(184,155,94,.25); }
#s-method .plinth .cap { position: absolute; top: -10px; left: -9px; right: -9px; height: 10px;
  background: linear-gradient(180deg, #e9d39a, #b89b5e 55%, #6f5a30); box-shadow: 0 2px 0 rgba(0,0,0,.5); }
#s-method .plinth::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -4px; height: 4px; background: linear-gradient(180deg, #8a7444, #4a3c1f); }
#s-method .p1 .plinth { height: 42%; } #s-method .p2 .plinth { height: 64%; } #s-method .p3 .plinth { height: 86%; }
#s-method .plinth .num { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, min(3.4vw, 5.4vh), 3.6rem); line-height: 1; letter-spacing: .04em;
  background: linear-gradient(180deg, #f1dea8 0%, #c9a964 45%, #8a6c34 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -1px 0 rgba(255,236,190,.12)); }
@media (max-width: 760px) {
  #s-method .podium { height: clamp(58px, 9.5vh, 96px); margin-bottom: 10px; }
  #s-method .plinth { width: clamp(58px, 16vw, 80px); }
  #s-method .plinth .cap { top: -6px; height: 6px; left: -6px; right: -6px; }
  #s-method .plinth .num { font-size: clamp(1.2rem, 3.2vh, 1.7rem); }
  #s-method .p1 .plinth { height: 52%; } #s-method .p2 .plinth { height: 74%; } #s-method .p3 .plinth { height: 96%; }
}
/* Round 11b: podium photographs larger, edges dissolved into the page */
#s-method .podium.has-img { height: clamp(220px, min(40vh, 26vw), 470px); margin-bottom: clamp(6px, 1.4vh, 18px); }
#s-method .podium img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%); }
#s-method .tenets:has(.has-img) .tenet h3 { margin-top: 0; }
@media (max-width: 760px) {
  #s-method .podium.has-img { height: clamp(96px, 15.5vh, 150px); margin-bottom: 2px; }
  #s-method .tenets:has(.has-img) { gap: clamp(10px, 2.2vh, 26px); }
}
/* Round 12: the method images are three oil paintings from one gallery photograph (same frames, painter, light) */
#s-method .podium img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }

/* ═══ Round 13: method section sizing + gallery lighting ═══ */
#s-method > .wrap { max-width: 1320px; }
#s-method .tenet h3 { font-size: clamp(1.5rem, min(2.5vw, 4.6vh), 2.75rem); white-space: nowrap; line-height: 1.1; margin: clamp(10px, 1.8vh, 20px) 0 clamp(6px, 1.2vh, 12px); }
#s-method .tenet p { font-size: clamp(1.02rem, min(1.4vw, 2.6vh), 1.45rem); max-width: 19em; }
@media (min-width: 761px) { #s-method .tenet h3 { font-size: clamp(1.5rem, min(2.5vw, 4.6vh), 2.75rem); } #s-method .tenet p { font-size: clamp(1.02rem, min(1.4vw, 2.6vh), 1.45rem); max-width: 19em; } }
@media (max-width: 760px) { #s-method .tenet h3 { font-size: clamp(1.35rem, 3.4vh, 1.8rem); } }

/* The painting and its light */
#s-method .art { position: relative; display: inline-block; height: 100%; isolation: isolate; }
#s-method .art img { display: block; height: 100%; width: auto; transition: filter .7s ease; filter: brightness(.82) saturate(.9); }
/* The lamp's light: a bright point at the lamp, a cone washing down over the frame and canvas */
#s-method .art .beam { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background:
    radial-gradient(ellipse 13% 3.2% at 50% 8.5%, rgba(255,236,190,.95), rgba(255,214,150,.35) 55%, transparent 100%),
    radial-gradient(ellipse 58% 40% at 50% 12%, rgba(255,205,135,.30), rgba(255,190,110,.10) 55%, transparent 80%),
    linear-gradient(180deg, rgba(255,200,130,.10) 10%, transparent 70%);
  transition: opacity 1.1s ease, filter .7s ease; }
/* Lamps switch on one after another when the section is reached, then breathe */
#s-method.seen .art .beam { opacity: 1; animation: vc-lamp 6s ease-in-out infinite; }
#s-method.seen .art img { filter: brightness(.95) saturate(.95); }
#s-method.seen .tenet:nth-child(1) .beam, #s-method.seen .tenet:nth-child(1) img { transition-delay: .25s; animation-delay: .25s; }
#s-method.seen .tenet:nth-child(2) .beam, #s-method.seen .tenet:nth-child(2) img { transition-delay: .75s; animation-delay: 1.2s; }
#s-method.seen .tenet:nth-child(3) .beam, #s-method.seen .tenet:nth-child(3) img { transition-delay: 1.25s; animation-delay: 2.1s; }
@keyframes vc-lamp { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.18); } 52% { filter: brightness(1.08); } 60% { filter: brightness(1.16); } }

/* Hover or focus: that painting is spotlit, its title catches the light; the other two dim into the gallery */
#s-method .tenet { transition: opacity .6s ease, filter .6s ease; cursor: default; }
#s-method .tenet h3, #s-method .tenet p { transition: color .5s ease, text-shadow .5s ease; }
@media (hover: hover) {
  #s-method .tenets:has(.tenet:hover) .tenet:not(:hover) { opacity: .38; filter: saturate(.55) brightness(.7); }
  #s-method .tenet:hover .art img { filter: brightness(1.12) saturate(1.08) contrast(1.04); transition-delay: 0s; }
  #s-method .tenet:hover .art .beam { filter: brightness(1.45); animation-play-state: paused; transition-delay: 0s; }
  #s-method .tenet:hover h3 { color: #f6ead0; text-shadow: 0 0 28px rgba(233,211,154,.45), 0 0 2px rgba(233,211,154,.4); }
  #s-method .tenet:hover p { color: var(--parch); }
}
@media (prefers-reduced-motion: reduce) { #s-method .art .beam { animation: none !important; } }
/* Feather the whole painting + light unit so no rectangle shows; keep the cone inside the frame area */
#s-method .podium img { -webkit-mask-image: none; mask-image: none; }
#s-method .art { -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); }
#s-method .art .beam { background:
    radial-gradient(ellipse 12% 3% at 50% 8.5%, rgba(255,236,190,.9), rgba(255,214,150,.3) 55%, transparent 100%),
    radial-gradient(ellipse 44% 34% at 50% 16%, rgba(255,205,135,.26), rgba(255,190,110,.08) 60%, transparent 85%); }

/* Round 14: painting I comes to life on hover. The video is laid exactly over the still: same height, centred,
   so the gilded frame lines up and nothing changes size; it cross-fades in and out. */
#s-method .art video.motion { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%);
  opacity: 0; transition: opacity .55s ease, filter .7s ease; pointer-events: none; filter: brightness(.95) saturate(.95); }
#s-method .art video.motion.on { opacity: 1; }
#s-method .art .beam { z-index: 1; }
@media (hover: hover) { #s-method .tenet:hover .art video.motion { filter: brightness(1.12) saturate(1.08) contrast(1.04); } }
@media (prefers-reduced-motion: reduce) { #s-method .art video.motion { display: none; } }

/* ═══ Round 15: controller-driven sections (no CSS snap); final section = three voices; footer is a last stop ═══ */
html.snapper { scroll-snap-type: none; }
#s-quote { justify-content: center; }
#s-quote > .wrap:first-child { flex: none; display: block; }
.voices { max-width: 46em; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3.2vh, 38px); }
.voice { margin: 0; }
.voice blockquote { margin: 0 auto; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, min(2.5vw, 4.3vh), 2.5rem); line-height: 1.25; max-width: 24em; text-wrap: balance; }
.voice figcaption { margin-top: clamp(8px, 1.4vh, 16px); }
.voice figcaption i { font-style: italic; text-transform: none; letter-spacing: .04em; font-variant: normal; }
.voices .fleuron { color: var(--leaf-dim); font-size: clamp(.9rem, 2vh, 1.2rem); }
.page-foot { border-top: 1px solid var(--ink-3); }
.page-foot footer { border-top: 0; }
body.intro .page-foot { opacity: 0; }
@media (max-width: 560px) { .voice blockquote { font-size: clamp(1.15rem, 3vh, 1.45rem); } }

/* ═══ Round 15b: the inquiry modal always fits one screen ═══
   Fixed panel (progress on top, Back/Continue always visible at the bottom), the step in between;
   answers are compact chips; type and spacing scale with the screen height. */
.modal .inner { min-height: 100%; padding: clamp(52px, 8vh, 72px) clamp(10px, 3vw, 32px) clamp(10px, 2vh, 24px); align-items: center; }
.modal .panel { width: 100%; max-width: 1000px; max-height: calc(100svh - clamp(62px, 10vh, 96px)); display: flex; flex-direction: column;
  padding: clamp(16px, 3.4vh, 44px) clamp(16px, 4vw, 52px); }
.modal .progress { flex: none; margin-bottom: clamp(10px, 2.4vh, 26px); }
.modal form[data-form] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal .step.on { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.modal .step h2 { font-size: clamp(1.35rem, min(3.4vw, 4vh), 2.3rem); margin-bottom: 4px; }
.modal .step .sub { font-size: clamp(.88rem, 1.9vh, 1.02rem); margin: 0 0 clamp(6px, 1.4vh, 16px); }
.modal .q { margin: clamp(10px, 2vh, 22px) 0 clamp(5px, 1vh, 9px); }
.modal .opts, .modal .opts.wide { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vh, 9px); }
.modal .opt { padding: clamp(6px, 1.1vh, 10px) clamp(11px, 1.4vw, 16px); font-size: clamp(.86rem, 1.85vh, 1rem); line-height: 1.25; }
.modal .opt small { display: none; }
.modal .opt[aria-pressed="true"] b::before { content: "✦ "; }
.modal label.f { margin-top: clamp(6px, 1.2vh, 14px); }
.modal .panel input[type=text], .modal .panel input[type=email], .modal .panel input[type=tel], .modal .panel select { font-size: clamp(.95rem, 2vh, 1.12rem); padding: clamp(5px, 1vh, 9px) 2px; }
.modal .err { min-height: 1.1em; margin-top: 3px; font-size: .86rem; }
.modal .consent { margin: clamp(4px, .8vh, 10px) 0; font-size: clamp(.84rem, 1.8vh, .96rem); line-height: 1.4; }
.modal .nav { flex: none; margin-top: clamp(10px, 2vh, 24px); padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid var(--ink-3); }
.modal .btn { padding: clamp(9px, 1.5vh, 14px) clamp(18px, 2.4vw, 30px); font-size: clamp(.92rem, 1.9vh, 1.1rem); }
.modal .done.on { overflow-y: auto; }
.modal .done h2 { font-size: clamp(1.6rem, 4.4vh, 2.6rem); margin: 6px 0; }
.modal .done .path { margin-top: clamp(12px, 2.6vh, 36px); }
.modal .done .path div { margin-bottom: clamp(8px, 1.6vh, 20px); }
.modal .done .path b { font-size: clamp(1rem, 2.4vh, 1.25rem); }
.modal .done .path p { font-size: clamp(.86rem, 1.8vh, 1rem); }
.modal .done .seal { width: clamp(48px, 8vh, 84px); height: auto; }

/* Phones: the inquiry takes the whole screen */
.modal select.pick { width: 100%; }
@media (max-width: 600px) {
  .modal .inner { padding: 0; align-items: stretch; }
  .modal .panel { max-width: none; max-height: none; height: 100svh; border: 0; padding: 14px 16px 12px; box-shadow: none; }
  .modal .panel::before { display: none; }
  .modal .close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 1.4rem; }
  .modal .progress { padding-right: 44px; }
  .modal .roman { gap: 10px; font-size: .95rem; }
  .modal .opts[data-o] select.pick { margin-top: 2px; }
}
@media (max-width: 600px) and (max-height: 760px) { .modal .done .path p { display: none; } .modal .done .sub { font-size: .9rem; } }
/* The overlay reuses the old #inquiry id; drop that section's padding inside the modal */
.modal#inquiry { padding: 0; }
@media (max-width: 600px) {
  .modal .step h2 { font-size: clamp(1.2rem, 3.1vh, 1.6rem); }
  .modal .step .sub { font-size: .86rem; line-height: 1.35; }
  .modal .q { margin: clamp(7px, 1.3vh, 14px) 0 5px; }
  .modal .opts { gap: 5px; }
  .modal .opt { padding: 5px 9px; font-size: clamp(.8rem, 1.9vh, .92rem); }
}
@media (max-width: 600px) and (max-height: 700px) { .modal .step .sub { display: none; } .modal .progress { margin-bottom: 6px; } .modal .nav { margin-top: 6px; padding-top: 6px; } }

/* Round 16: the final section shows one quote at a time, stacked in one place so nothing moves */
.voices { display: grid; place-items: center; gap: 0; max-width: 44em; }
.voices .fleuron { display: none; }
.voice { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 1.1s ease, transform 1.1s ease; }
.voice.on { opacity: 1; transform: none; transition-delay: 1.15s; }
.voice blockquote { font-size: clamp(1.55rem, min(3.1vw, 5.4vh), 3.1rem); max-width: 22em; }
.voice figcaption { margin-top: clamp(14px, 2.4vh, 28px); }
@media (max-width: 560px) { .voice blockquote { font-size: clamp(1.3rem, 3.6vh, 1.75rem); } }

/* ═══ Round 17: hero without the timeline. The header stays at the top; the text block sits in the remaining
   height, a little below the optical centre (more room above than below), so the screen reads balanced. ═══ */
#s-hero > .wrap { min-height: 100svh; display: flex; flex-direction: column; }
#s-hero .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 8vh, 120px) 0 clamp(24px, 6vh, 90px); }
#s-hero .hero .btn { align-self: center; }
@media (max-height: 780px) { #s-hero .hero { padding: clamp(16px, 5vh, 48px) 0 clamp(16px, 3vh, 32px); } }

/* Round 18: inquiry step IV asks who is inquiring; the student's first name shows only for a parent or guardian. */
.modal [data-guardianonly][hidden] { display: none; }

/* ═══ Round 19: the applicant's file (file.html) and the examination ═══ */
.file-page .file-head { padding: clamp(28px, 7vh, 80px) 0 clamp(18px, 4vh, 40px); }
.file-page .file-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 10px 0 8px; }
.file-page .file-head .lede { color: var(--parch-dim); font-family: var(--display); font-style: italic; font-size: 1.25rem; max-width: 36em; margin: 0; }
.stages { list-style: none; margin: 0 0 clamp(40px, 8vh, 90px); padding: 0; border-top: 1px solid var(--ink-3); }
.stage { display: grid; grid-template-columns: clamp(44px, 6vw, 72px) 1fr; gap: 0 clamp(12px, 2vw, 24px); padding: clamp(18px, 3vh, 30px) 0; border-bottom: 1px solid var(--ink-3); }
.stage .num { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--leaf); text-align: center; line-height: 1.2; }
.stage h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; line-height: 1.2; }
.stage .sum { margin: 4px 0 0; color: var(--parch-dim); font-style: italic; }
.stage.past .num::after { content: " ✓"; font-size: .6em; }
.stage.later { opacity: .38; }
.stage .body { margin-top: 10px; }
.stage .body > p { color: var(--parch-dim); max-width: 40em; }
.stage .q { margin: 22px 0 10px; }
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.doc { border: 1px solid var(--ink-3); padding: 20px 22px; display: flex; flex-direction: column; }
.doc.has { border-color: var(--leaf-dim); }
.doc h3 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; margin: 6px 0 6px; }
.doc p { color: var(--parch-dim); font-size: .98rem; margin: 0 0 16px; flex: 1; }
.drop { display: block; border: 1px dashed var(--leaf-dim); padding: 14px 16px; cursor: pointer; text-align: center; }
.drop:hover { background: rgba(184,155,94,.06); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop i { display: block; color: var(--mute); font-size: .86rem; }
.doc.has .drop { border-style: solid; }
.fee { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 760px) { .fee { grid-template-columns: 1fr; } }
.incl { margin: 0; padding-left: 1.2em; color: var(--parch-dim); }
.incl li { margin: 4px 0; }
.pay { border: 1px solid var(--leaf-dim); padding: 22px 24px; background: rgba(13,14,17,.6); }
.pay .amt { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink-3); padding-bottom: 12px; }
.pay .amt b { font-family: var(--display); font-weight: 500; font-size: 1.9rem; }
.pay .row { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pay .btn { width: 100%; justify-content: center; margin-top: 8px; }
.pay .fine { color: var(--mute); font-size: .84rem; text-align: center; margin: 10px 0 0; font-style: italic; }
.stage .body .btn { margin-top: 14px; }
.stage .body .btn[disabled] { opacity: .45; cursor: not-allowed; }
.demo { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--ink-3); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.demo .btn { margin: 0; padding: 8px 14px; font-size: .85rem; }
.verdict { border-left: 2px solid var(--leaf); padding: 6px 0 6px 18px; margin: 4px 0 24px; }
.verdict h3 { font-family: var(--display); font-weight: 500; font-size: 1.9rem; margin: 0; }
.verdict p { margin: 4px 0 0; color: var(--parch-dim); }
.verdict.reapply, .verdict.final { border-left-color: var(--ink-3); }
.score { display: flex; align-items: center; gap: 18px; }
.score div { font-family: var(--display); }
.score b { font-size: 3.4rem; font-weight: 400; color: var(--leaf); }
.score span { color: var(--parch-dim); margin-left: 6px; font-size: 1.3rem; }
.missed { padding-left: 0; list-style: none; margin: 0; }
.missed li { border-top: 1px solid var(--ink-3); padding: 14px 0; }
.missed p { margin: 0 0 6px; }
.missed .ma { color: var(--parch-dim); font-size: .96rem; }
.missed .mw { font-style: italic; color: var(--parch-dim); }
.crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.crit div { border: 1px solid var(--ink-3); padding: 14px 16px; }
.crit h4 { margin: 0 0 6px; font-family: var(--display); font-weight: 500; font-size: 1.15rem; }
.crit p { margin: 0; color: var(--parch-dim); font-size: .95rem; }
.arcs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.assign { margin-top: 18px; }
.assign p { margin: 4px 0 0; color: var(--parch-dim); max-width: 40em; }
/* The examination: full screen, one item at a time, the clock always visible */
.exam { position: fixed; inset: 0; z-index: 60; background: var(--ink); display: none; flex-direction: column; }
.exam.open { display: flex; }
.exam-bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(20px, 5vw, 56px); border-bottom: 1px solid var(--ink-3); }
.exam .clock { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.exam .clock.low { color: var(--bad); }
.exam-body { flex: 1; overflow: auto; width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(20px, 5vh, 60px) clamp(20px, 5vw, 56px); }
.exam-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.3; margin: 10px 0 22px; }
.choices { display: grid; gap: 10px; }
.choices .opt { display: flex; gap: 14px; align-items: baseline; }
.choices .opt b { color: var(--leaf); font-family: var(--display); }
.choices .opt[aria-pressed="true"] b::before { content: none; }
.exam textarea { width: 100%; background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--parch); font-family: var(--body); font-size: 1.08rem; line-height: 1.55; padding: 14px 16px; resize: vertical; }
.exam textarea:focus { outline: none; border-color: var(--leaf-dim); }
.exam .wc { text-align: right; color: var(--mute); font-size: .86rem; margin-top: 6px; }
.exam-nav { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px clamp(20px, 5vw, 56px); border-top: 1px solid var(--ink-3); }
.exam-nav .btn { padding: 10px 20px; font-size: .95rem; }
.pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pip { width: 11px; height: 11px; border: 1px solid var(--leaf-dim); background: transparent; transform: rotate(45deg); padding: 0; cursor: pointer; }
.pip.short { width: 14px; height: 14px; }
.pip.done { background: var(--leaf-dim); }
.pip.on { outline: 1px solid var(--parch); outline-offset: 3px; }
@media (max-width: 600px) { .pips { display: none; } .exam-nav .btn { padding: 9px 14px; font-size: .85rem; } }