/* Sage Tiles site styles, written on tokens.css. Ink on paper, one gold
   point, STIX Two Text throughout. Nothing here names a color outside the
   token set. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* one heading scale for the whole page: every section h2 is the same size,
   weight, and spacing; no section sets its own */
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.1;margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:pretty}
h1{font-size:clamp(2.7rem,4.8vw + .8rem,4.4rem)}
h2{font-size:clamp(2.05rem,2.6vw + 1rem,3.1rem);margin-bottom:18px}
h3{font-size:1.3rem}
/* the small label above a heading, the same everywhere */
.sage-label,.founding-label,.teachers-label{font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--gold-deep)}
.founding-label{color:var(--gold)}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-deep)}
button,input,select{font-family:var(--serif);font-size:1rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{scroll-margin-top:24px}
[hidden]{display:none !important}
.fine{font-size:.92rem;color:var(--muted);line-height:1.5}

/* ── the bar and the lockup ──────────────────────────── */
.bar{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 8px;gap:24px;flex-wrap:wrap}
.lockup{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.lockup .symbol{width:30px;height:30px;flex:none}
.lockup.small .symbol{width:22px;height:22px}
.symbol circle{fill:var(--ink)}
.symbol .gold{fill:var(--gold)}
.wordmark{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.lockup.small .wordmark{font-size:1.1rem}
.bar nav{display:flex;gap:22px;font-size:1rem;flex-wrap:wrap}
.bar nav a{text-decoration:none;color:var(--body);padding:4px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.bar nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ── buttons and focus ───────────────────────────────── */
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink);font-size:1rem;line-height:1.2;cursor:pointer}
.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.btn.quiet{background:transparent;color:var(--ink)}
.btn.quiet:hover{background:var(--paper-deep);color:var(--ink)}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.buttons.small{margin-top:16px}
.buttons.small .btn{padding:9px 16px;font-size:.95rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus)}

/* ── hero ────────────────────────────────────────────── */
.hero{padding:72px 20px 8px}
.hero h1{max-width:16ch}
.hero .kicker{font-size:clamp(1.3rem,1.4vw + .8rem,1.7rem);color:var(--ink);margin-top:10px}
.hero .free{font-size:clamp(1.12rem,1vw + .8rem,1.35rem);color:var(--ink);margin-top:16px;padding-left:16px;border-left:3px solid var(--gold);max-width:52ch}
.hero .lede{font-size:1.25rem;margin-top:20px;max-width:46ch;color:var(--body)}
.hero .fine{margin-top:22px}

/* ── the square: Jae's Meno square, embedded whole ─────── */
.try{padding:56px 20px 24px}
.try-title{margin-bottom:22px}
/* Fixed heights, never tied to the window: Jae's tallest step needs about
   780px at laptop width and 840px at phone width, so the frame never scrolls
   inside itself. If the window is shorter, the page scrolls instead. */
.meno{display:block;width:100%;height:820px;border:0;border-radius:18px;background:var(--paper);box-shadow:var(--shadow)}
@media (max-width:860px){ .meno{height:880px} }
.meno-after{margin-top:20px;max-width:66ch;color:var(--ink);font-size:1.08rem}

/* ── why ─────────────────────────────────────────────── */
.why{padding:72px 20px 24px;border-top:1px solid var(--line);margin-top:48px}
.why h2{max-width:22ch;margin-bottom:24px}
.why-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.why-cols p + p{margin-top:14px}
.mission{color:var(--ink);font-size:clamp(1.35rem,1.2vw + .95rem,1.75rem);font-weight:600;line-height:1.3;border-left:3px solid var(--gold);padding-left:18px;margin:22px 0 !important}

/* ── how ─────────────────────────────────────────────── */
.how{padding:64px 20px 24px}
.how h2{margin-bottom:24px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.steps li{counter-increment:step;position:relative}
.steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem;border:1.5px solid var(--ink-faint)}
.steps li:first-child::before{border-color:var(--gold);color:var(--gold-deep)}
.steps h3{margin-bottom:8px}

/* ── programs ────────────────────────────────────────── */
.programs{padding:72px 20px 24px;border-top:1px solid var(--line);margin-top:48px}

.programs-text{max-width:760px}
.gets{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.gets li{padding-left:22px;position:relative}
.gets li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.gets b{color:var(--ink);font-weight:600}

/* ── talk ────────────────────────────────────────────── */
.talk{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:64px;padding:64px 0}
.talk-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}

.talk .fine{margin-top:14px}
.pform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pform label{display:grid;gap:6px;min-width:0}
.pform label span{font-size:.9rem;color:var(--muted)}
.pform .full{grid-column:1 / -1}
.pform input,.pform select{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);min-width:0}
.pform input::placeholder{color:var(--ink-faint)}
.pform select:invalid{color:var(--ink-faint)}
.pform select:has(option[value=""]:checked){color:var(--ink-faint)}
.talk p[data-for-interest]{margin-top:12px}
.pform option{color:var(--ink)}
.pform button{grid-column:1 / -1;justify-self:start;padding:12px 28px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:500;cursor:pointer;font-size:1rem}
.pform button:hover{background:var(--ink-soft)}
.pform button:disabled{opacity:.6;cursor:default}
.done{color:var(--ink);font-size:1.1rem;padding:18px 0}
.lead-error{grid-column:1 / -1;color:var(--gold-deep)}

/* ── park ────────────────────────────────────────────── */
.park{padding:64px 20px 8px}

.park > p + p{margin-top:8px}
.park > p:first-of-type{font-size:1.15rem;max-width:62ch}
.sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.sort-label{font-size:.95rem;color:var(--muted);margin-right:4px}
.sort button{font-size:.98rem;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer}
.sort button:hover{border-color:var(--ink)}
.sort button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* beside the grouping, the search: what's showing keeps only the instruments with every word typed
   in them; beside the grouping too, the grade, a dropdown of its own, each one's instruments under its
   concepts, under the grouping where the row runs out, the two labels in line (scripts/rooms-list.js;
   Jae, 2026-10-27: "i want a searchbar"; the grades "another section"; 2026-10-28: "change it to a
   drop down instead of all those buttons") */
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;margin-top:26px}
.sorts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}
.tools .sort{margin-top:0}
.tools .sort-label{min-width:4.1em}
.pick{position:relative;display:inline-flex}
.pick select{font-size:.98rem;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:7px 38px 7px 16px;cursor:pointer;line-height:1.2;-webkit-appearance:none;appearance:none}
.pick select:hover{border-color:var(--ink)}
.pick select:focus-visible{outline:none;box-shadow:var(--focus)}
.pick::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pick.on select{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick.on::after{border-color:var(--paper)}
.find{position:relative;display:block;grid-column:2;grid-row:1;width:250px}
.find svg{position:absolute;left:14px;top:50%;width:15px;height:15px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.find input{width:100%;padding:7px 14px 7px 37px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.98rem;line-height:1.4;-webkit-appearance:none;appearance:none}
.find input::placeholder{color:var(--ink-faint)}
.find input:hover{border-color:var(--ink-faint)}
.find input:focus{border-color:var(--ink)}
.rooms-none{margin-top:28px;color:var(--muted)}
.rooms-note{margin-top:12px;font-size:.95rem;color:var(--muted)}
.rooms{margin-top:28px;display:grid;gap:34px}
.family-note{display:block;margin-top:4px;font-size:.85rem;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.room .codes{display:block;margin-top:10px;font-size:.8rem;letter-spacing:.02em;color:var(--muted)}
.room .codes span{white-space:nowrap}
.family-name{font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
/* a course of several grades under its concepts, each a row of its own, between hairlines: its name,
   how many it holds, a turn; pressed, its cards open under it, the turn turning (scripts/rooms-list.js;
   Jae, 2026-10-28: "just break it by thorugh concept"; 2026-10-29: "keep it hiddne or soemthing very
   elqouently and nicely") */
.part{border-top:1px solid var(--line)}
.part:last-child{border-bottom:1px solid var(--line)}
.part-head{display:flex;align-items:center;gap:14px;width:100%;padding:15px 4px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.part-name{flex:1;min-width:0;font-size:1.02rem;font-weight:500;line-height:1.3}
.part-count{min-width:26px;padding:2px 8px;border-radius:999px;background:var(--paper-deep);font-size:.82rem;line-height:1.45;text-align:center;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.part-turn{flex:none;width:12px;height:12px;fill:none;stroke:var(--ink-mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.part-head:hover .part-turn{stroke:var(--ink)}
.part-head:hover .part-count{background:var(--paper-line)}
.part.open .part-turn{transform:rotate(180deg)}
.part-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.part.open .part-body{grid-template-rows:1fr}
.part-inner{min-height:0;overflow:hidden}
.part.shown .part-inner{overflow:visible}
.part-inner .rooms-grid{padding:2px 0 20px}
.park-more{margin-top:14px;font-size:1rem}
/* All instruments, its own page: the list starts near the top */
.park.all{padding-top:40px}
/* ── a room's own page ───────────────────────────────── */
.room-main{padding-top:20px}
.room-back{font-size:.98rem;margin-bottom:22px}
.room-back a{text-decoration:none;color:var(--muted)}
.room-back a::before{content:"\2190  "}
.room-back a:hover{color:var(--ink)}
.room-meta{font-size:.9rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.room-main h1{font-size:clamp(2.1rem,3.2vw + .9rem,3.2rem);max-width:none}
.room-standards{margin-top:8px;font-size:.95rem;color:var(--muted)}
/* the card around the frame carries the padding: inside a frame the room keeps almost none of its own */
.room-box{margin-top:26px;padding:24px 24px 12px;border-radius:18px;background:var(--paper);box-shadow:var(--shadow)}
.room-frame{display:block;width:100%;height:760px;border:0;background:transparent}
/* the room stretched over the page, on a phone with no full screen (it asks: rooms/room.html) */
.room-frame.room-frame-full{position:fixed;inset:0;width:100vw;height:100vh!important;height:100dvh!important;z-index:9999;background:var(--paper)}
html.room-full,html.room-full body{overflow:hidden}
@media (max-width:640px){ .room-box{margin-top:22px;padding:18px 12px 8px} }
.room-sheet{margin-top:14px;font-size:1rem}
.room-more{margin-top:44px}
.room-more-title{font-size:1.45rem;margin-bottom:14px}
.room-more .room small{margin-bottom:0}
.room-after{margin-top:36px;max-width:66ch;color:var(--body)}
.room{display:block;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:18px 18px 20px;text-decoration:none;color:var(--body);position:relative;border:1.5px solid transparent}
.room:hover{border-color:var(--gold);color:var(--body)}
.room-art{display:block;width:100%;height:auto;margin:-4px 0 12px;background:var(--paper);border-radius:10px;padding:8px 0}
.room-art .g-on{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:1.4}
.room-art .g-cell{fill:var(--white);stroke:var(--paper-line);stroke-width:.6}
.room-art .g-cell.on{fill:var(--gold);fill-opacity:.6}
.room-art .g-off{fill:var(--white);stroke:var(--ink);stroke-width:1.4}
.room-art .g-tri{fill:var(--white);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.room-art .g-corner{fill:none;stroke:var(--ink);stroke-width:1.2}
.room-art .g-line{stroke:var(--ink);stroke-width:1.6}
.room-art .g-bar{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.room-art .g-dot{fill:var(--ink)}
.room-art .g-curve{fill:none;stroke:var(--gold-deep);stroke-width:2.4}
.room-art .g-num{font-family:var(--serif);font-size:22px;font-weight:600;fill:var(--ink)}
.room-art .g-floor{stroke:var(--ink-mute);stroke-width:1.2}
.room-art .g-warm{fill:var(--gold-wash);stroke:var(--ink);stroke-width:1.2}
.room-art .g-ghost{fill:var(--paper);stroke:var(--ink-faint);stroke-width:1.1}
.room-art .g-top{fill:var(--gold-wash);stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.room-art .g-side{fill:var(--gold-deep);fill-opacity:.55;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.room-art .g-rule{stroke:var(--ink);stroke-width:.6;stroke-opacity:.55}
.room-art .g-ring{fill:none;stroke:var(--ink-faint);stroke-width:.9}
.room-art .g-held{fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-linecap:round}
/* surface area's: its unit squares, gold, each with a fine edge, its top paler and its side deeper; each face's own edges ink */
.room-art .g-usq{fill:var(--gold);fill-opacity:.5;stroke:var(--ink);stroke-width:.45;stroke-opacity:.55}
.room-art .g-usq.top{fill-opacity:.28}
.room-art .g-usq.side{fill-opacity:.78}
.room-art .g-edge{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.room-art .g-ink{fill:var(--ink)}
.room-art .g-pip-light{fill:var(--paper)}
.room-art .g-wreath{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 2.2}
.room-art .g-wall{fill:none;stroke:var(--ink-soft);stroke-width:1.3;stroke-linejoin:round}
.room-art .g-tick{font-family:var(--serif);font-size:9px;fill:var(--ink-mute)}
.room-art .g-card{font-family:var(--serif);font-size:10px;font-weight:600;fill:var(--ink)}
.room-art .g-suit{font-family:var(--serif);font-size:20px;fill:var(--ink)}
.room-art .red{fill:var(--gold-deep)}
.room b{display:block;color:var(--ink);font-size:1.15rem;font-weight:600;margin-bottom:2px}
.room small{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px}
.room .dot{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0}
/* a room with its pattern on paper: Download the PDF along its card's foot, a link of its own (scripts/rooms-list.js) */
.room-cell{position:relative;display:flex}
.room-cell .room{flex:1;padding-bottom:62px}
.room-pdf{position:absolute;left:18px;bottom:18px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.88rem;line-height:1.2;text-decoration:none}
.room-pdf:hover{border-color:var(--ink)}
.room-pdf:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.room-pdf svg{width:15px;height:15px;display:block;flex:none}
.room.visited .dot{opacity:1}

/* ── about and foot ──────────────────────────────────── */
.about{padding:56px 20px 24px}
.about p{max-width:66ch}

.foot{margin-top:56px;padding:28px 20px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
/* the footer's line: the company, and its Privacy and Terms pages, underlined so they read as links
   (Jae, 2026-10-24: "i think i need a terms and conditions") */
.foot-legal{margin:0}
.foot-legal a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.foot-legal a:hover{color:var(--ink);text-decoration-color:var(--gold)}
/* (after the front page's white band, Let's connect, the footer sits right under its edge: its own line
   and the paper above it made a second line with an empty strip between; Jae, 2026-10-25: the last
   cleanups) */
main:has(> .talk:last-child) + .foot{margin-top:0;border-top:0}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:860px){
  .why-cols,.programs,.talk-grid{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr}
    .hero{padding:48px 20px 8px}
  .why,.programs{margin-top:24px;padding-top:48px}
  .bar nav{gap:16px;font-size:.95rem}
}
@media (max-width:520px){
  .pform{grid-template-columns:1fr}
  .pform .full{grid-column:auto}
  .pform button{grid-column:auto}
  body{font-size:17px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} html{scroll-behavior:auto} }

/* ── the launch: a notice at the top and a full band before the form ── */
.launch{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--gold);color:var(--ink);text-decoration:none;font-size:1rem;line-height:1.3;box-shadow:var(--shadow)}
.launch:hover{background:var(--gold-wash);color:var(--ink)}
.launch-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.founding{background:var(--ink);color:var(--paper);margin-top:64px;padding:72px 0}
.founding-inner > *{max-width:820px}

.founding h2{color:var(--paper)}
.founding p{color:var(--paper-line);font-size:1.15rem;max-width:56ch}
.founding-gets{list-style:none;margin:20px 0 4px;padding:0;display:grid;gap:10px}
.founding-gets li{color:var(--paper);font-size:1.1rem;padding-left:24px;position:relative}
.founding-gets li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.founding .btn{background:var(--gold);border-color:var(--gold);color:var(--ink);font-size:1.05rem;padding:14px 26px}
.founding .btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ink)}
.founding + .talk{margin-top:0}

/* ── teachers: the tester track, a card that stands out ── */
.teachers{padding:56px 20px 24px;margin-top:24px}
.teachers-card{background:var(--gold-wash);border:1.5px solid var(--gold);border-radius:24px;padding:44px 48px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:32px;align-items:center}

.teachers-text > p:not(.teachers-label):not(.buttons){max-width:56ch;font-size:1.12rem;color:var(--ink-soft)}
.teachers .btn{font-size:1.05rem;padding:14px 26px}
.teachers-sage{width:100%;max-width:300px;height:auto;justify-self:center}
@media (max-width:860px){
  .teachers-card{grid-template-columns:1fr;padding:32px 24px;gap:8px}
  .teachers-sage{max-width:180px;order:-1;justify-self:start}
}

/* ── Meet Sage: the character, three ways it works, and its own sign up ── */
.sage{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:64px;padding:72px 0 64px}
.sage-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.sage-portrait{margin:0;display:flex;justify-content:center}
.sage-portrait img{width:100%;max-width:360px;height:auto;display:block}

.sage-text > p + p{margin-top:12px}
.sage-ways{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.sage-ways li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.sage-ways img{width:64px;height:64px;object-fit:contain}
.sage-ways b{display:block;color:var(--ink);font-weight:600}
.sage-ways span{display:block;color:var(--body)}
.sage-cta{margin-top:48px;background:var(--paper);border-radius:18px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.sage-cta .btn{white-space:nowrap}
.sage-cta h3{font-size:1.45rem;margin-bottom:8px}
@media (max-width:860px){
  .sage-grid,.sage-cta{grid-template-columns:1fr;gap:24px}
  .sage-portrait img{max-width:220px}
    }

/* ── phones: the top of the page. The full menu doesn't fit on one line, so
   phones keep the logo, a small menu button (scripts/site.js) and one
   "Let's connect" button, on every page; every section is still
   reached by scrolling. The launch notice wraps as a rounded box, not a pill. ── */
/* (the bar's phone form, on phones only again since October 25, 2026: the menu's five links fit
   beside the logo down to about 600px) */
@media (max-width:640px){
  .bar{flex-wrap:nowrap;padding:16px 20px 4px;gap:12px}
  .bar nav{gap:0}
  .bar nav a{display:none}
  .bar nav a[href$="#talk"]{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px;font-size:.92rem;color:var(--ink)}
}
/* (six links since October 26, 2026, Resources after Philosophy: just above a phone they sit a
   little closer and a little smaller, so they still fit beside the logo) */
@media (min-width:641px) and (max-width:720px){
  .bar{gap:16px}
  .bar nav{gap:10px;font-size:.9rem}
}
@media (max-width:640px){
  .lockup .symbol{width:26px;height:26px}
  .wordmark{font-size:1.3rem}
  .hero{padding:24px 20px 8px}
  .launch{display:flex;align-items:flex-start;border-radius:14px;padding:10px 14px;font-size:.95rem;margin-bottom:18px}
  .launch-dot{margin-top:.42em}
}
/* phones: the free rooms sit two to a row so eighteen cards stay a short scroll */
@media (max-width:640px){
  .rooms{gap:26px}
  .rooms-grid{grid-template-columns:1fr 1fr;gap:10px}
  .part-head{padding:14px 2px;gap:12px}
  .part-name{font-size:.98rem}
  .room{padding:10px 10px 12px;border-radius:14px}
  .room-art{margin:0 0 8px;padding:4px 0;border-radius:8px}
  .room b{font-size:.98rem;line-height:1.25}
  .room small{font-size:.86rem;margin-bottom:4px}
  .room .dot{top:10px;right:10px}
  .room-cell .room{padding-bottom:50px}
  .room-pdf{left:10px;bottom:12px;padding:6px 10px;font-size:.82rem;gap:5px}
  .room-pdf svg{width:13px;height:13px}
  .room .codes{font-size:.82rem;margin-top:6px}
  /* (on a phone, the cards' small words at 13px or more, and the small links that stand alone a thumb's
     press tall, a reach round each that shows nothing; Jae, 2026-10-25: the last cleanups) */
  .foot-legal a,.philo-more a,.room-back a,.park-more a,.room-sheet a,.room-read a,.room-after a{position:relative}
  .foot-legal a::after,.philo-more a::after,.room-back a::after,.park-more a::after,.room-sheet a::after,.room-read a::after,.room-after a::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
  .room-pdf::after{content:"";position:absolute;inset:-8px -4px}
  .sort button{padding:6px 13px;font-size:.92rem}
  .sorts{gap:12px}
  /* (the search under the grade, the width of the page; a phone zooms in on a box whose words are smaller than 16px,
     the grade's dropdown too) */
  .pick select{padding:6px 36px 6px 14px;font-size:16px}
  .tools{grid-template-columns:minmax(0,1fr)}
  .find{grid-column:1;grid-row:auto;width:auto}
  .find input{font-size:16px}
}

/* ── the front page as Jae rewrote it, October 22, 2026 ── */
/* "see" in the headline: the one word that pops, deep gold and italic, with
   one soft glow as the page opens (reduced motion turns it off, above) */
.pop{font-style:italic;color:var(--gold-deep);animation:popglow 1.9s ease .5s 1}
@keyframes popglow{0%{text-shadow:0 0 0 rgba(201,162,39,0)}45%{text-shadow:0 0 26px rgba(201,162,39,.6)}100%{text-shadow:0 0 0 rgba(201,162,39,0)}}
.nw{white-space:nowrap}

/* the instruments: a telescope beside the telescope line (above it on phones),
   then Jae's two favorites, the linear function with its pattern on PDF */
.park.has-telescope .scope-art{float:right;width:290px;height:auto;margin:0 0 12px 44px}
.scope-art .s-tube{fill:var(--white);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.scope-art .s-band{stroke:var(--ink);stroke-width:1;stroke-opacity:.5}
.scope-art .s-lens{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:1.4}
.scope-art .s-mount{fill:var(--paper-deep);stroke:var(--ink);stroke-width:1.3}
.scope-art .s-leg{stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.scope-art .s-leg.back{stroke:var(--ink-faint)}
.scope-art .s-floor{stroke:var(--ink-mute);stroke-width:1.2}
.scope-art .s-halo{fill:var(--gold-wash)}
.scope-art .s-sight{stroke:var(--gold-deep);stroke-width:1.1;stroke-dasharray:3 3}
.scope-art .s-view{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
.scope-art .s-base{stroke:var(--ink-mute);stroke-width:1}
.scope-art .s-on{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:1.1}
.scope-art .s-off{fill:var(--white);stroke:var(--ink);stroke-width:1.1}
/* (Seeing ends at its paragraph since October 24, 2026, Jae: "we were going to get rid of this right after the seeing... we just go straight to mastery"; the telescope's float cleared) */
.park.has-telescope::after{content:'';display:block;clear:both}
/* Jae's walk-through of an instrument, on YouTube, a small link under the
   hero's two buttons: a link out, no player on the page */
.hero .walk{margin-top:16px}
.walk a{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:1rem}
.walk a:hover{color:var(--gold-deep)}
.walk .play{width:0;height:0;border-left:10px solid var(--gold-deep);border-top:6px solid transparent;border-bottom:6px solid transparent}
.walk small{font-size:.85rem;color:var(--muted)}

/* Meet Sage: what it does, and three ways it works */
.sage-lead{max-width:64ch}
.sage-after{margin-top:14px;max-width:66ch;font-size:1.08rem}
.sage-after + .buttons{margin-top:14px}
.sage-ways.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.sage-ways.three li{grid-template-columns:56px 1fr;align-items:start}
.sage-ways.three img{width:56px;height:56px}
.sage-course{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.sage-course p{margin:0;font-size:1.1rem;color:var(--ink)}

/* Mastery: the five steps, each with a small drawing of the linear function
   in the site's ink, paper and gold */
.how .sub{margin:-12px 0 26px;font-size:1.2rem;color:var(--ink)}
/* Philosophy, after Mastery: its question, the newest pieces from the Philosophy page as its cards, and the way there */
.philo{padding:64px 20px 24px;border-top:1px solid var(--line);margin-top:48px}
.philo .sub{margin:-12px 0 0;font-size:1.2rem;color:var(--ink);max-width:640px}
.philo .wr-grid{margin-top:26px;max-width:860px}
.philo-more{margin-top:18px}
.philo-more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
/* (a path, not cards, one column at every width: each step's number in a circle on a line running down
   the page, its name beside it, its words, and then its drawing, in a frame of the paper a shade deeper,
   the five drawings one set, each the same size; Jae, 2026-11-02, of the five across with the drawings in
   a row at the foot: "this looks waaaay to weird", then "isn't it say it and then the sentence and then
   diagram right?" and "let's make it just one column") */
.steps.five{grid-template-columns:minmax(0,1fr);gap:0;max-width:620px}
.steps.five li{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;padding-bottom:36px}
.steps.five li:last-child{padding-bottom:0}
.steps.five li::before{grid-column:1;grid-row:1;align-self:center;z-index:1}
.steps.five li::after{content:"";grid-column:1;grid-row:1 / span 3;justify-self:center;align-self:stretch;width:1.5px;background:var(--ink-faint);margin:0 0 -36px}
.steps.five li:last-child::after{display:none}
.steps.five h3{grid-column:2;grid-row:1;align-self:center;margin:0}
.steps.five p{grid-column:2;grid-row:2;margin-top:6px}
.steps.five .room-art{grid-column:2;grid-row:3;width:min(100%,320px);margin:16px 0 0;padding:0;background:var(--paper-deep);border-radius:14px}
/* Seeing: two instruments' cards, the All instruments page's own, as big as Philosophy's and Resources'
   below, and the way to all of them (Jae, 2026-10-28) */
.seeing-rooms{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:860px;padding-top:30px}
.seeing-rooms .room{padding:18px 18px 20px;border-radius:16px}
.seeing-rooms .room-art{margin:0 0 14px;padding:10px 0;border-radius:10px}
.seeing-rooms .room b{font-size:1.3rem;line-height:1.25}
.seeing-rooms .room small{margin-bottom:0}
.seeing-rooms .wr-play svg{width:16px;height:16px;fill:none;stroke:currentColor}
.seeing-rooms .room:hover .wr-play{background:var(--gold-deep)}
.seeing-rooms .room:active .wr-play{transform:scale(.94)}
.sa-floor{stroke:var(--ink-faint);stroke-width:1.3}
.sa-one{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:1.2}
.sa-x{fill:var(--white);stroke:var(--ink);stroke-width:1.2}
.sa-bubble{fill:var(--white);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.sa-say{font-family:var(--serif);font-style:italic;font-size:14px;fill:var(--ink)}
.sa-panel{fill:var(--white);stroke:var(--ink);stroke-width:1.2}
.sa-rule{stroke:var(--ink-faint);stroke-width:.8}
.sa-head{font-family:var(--serif);font-style:italic;font-size:10.5px;fill:var(--ink-mute)}
.sa-num{font-family:var(--serif);font-size:13px;fill:var(--ink)}
.sa-axis{stroke:var(--ink-mute);stroke-width:1.2}
.sa-fit{stroke:var(--gold-deep);stroke-width:1.6}
.sa-dot{fill:var(--ink)}
.sa-eq{font-family:var(--serif);font-size:14px;fill:var(--ink)}
.sa-spoke{stroke:var(--gold);stroke-width:1.5}
.sa-center{fill:var(--gold)}
.sa-node{fill:var(--white);stroke:var(--ink);stroke-width:1.3}
.sa-fillink{fill:var(--ink)}
.sa-strokeink{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sa-icontext{font-family:var(--serif);font-size:13.5px;fill:var(--ink)}
.sa-big{font-family:var(--serif);font-size:27px;fill:var(--ink)}
.sa-goldtext{fill:var(--gold-deep);font-weight:600}
.sa-tag{stroke:var(--gold-deep);stroke-width:1.3}
.sa-label{font-family:var(--serif);font-style:italic;font-size:14px;fill:var(--gold-deep)}
.mastery{margin-top:26px;font-size:1.2rem;color:var(--ink);max-width:62ch}
.mastery strong{font-weight:600;color:var(--ink)}

/* why we built this: Jae's note, the two founders under it */
.why .sage-label{margin-bottom:6px}
.why .why-text{max-width:66ch}
.why .why-text p + p{margin-top:14px}
.signed{display:flex;align-items:center;gap:16px;margin-top:26px}
.signed img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 40%;box-shadow:var(--shadow)}
.signed p{margin:0;display:grid;gap:2px}
.signed b{color:var(--ink);font-weight:600;font-size:1.1rem}
.signed span{color:var(--muted);font-style:italic}
.team{display:flex;flex-wrap:wrap;gap:20px 56px;margin-top:6px}

@media (max-width:980px){
  .sage-ways.three{grid-template-columns:1fr}
}
@media (max-width:760px){ .park.has-telescope .scope-art{float:none;display:block;width:100%;max-width:240px;margin:0 0 16px} }
@media (max-width:640px){ .seeing-rooms{padding-top:22px} }


/* ── Writing (October 22, 2026): Jae's posts, each with its date. The
   menu's current page, the way in from Mastery and from a room, the
   Writing page, and a post with its drawings ── */
.bar nav a[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}

.read-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;max-width:640px;margin-top:30px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:16px 22px 16px 16px;text-decoration:none;color:var(--body);border:1.5px solid transparent}
.read-card:hover{border-color:var(--gold);color:var(--body)}
.read-card svg{display:block;width:100%;height:auto;background:var(--paper);border-radius:10px;padding:6px 0}
.read-card > span{min-width:0}
.read-card .rk{display:block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.read-card b{display:block;color:var(--ink);font-size:1.35rem;font-weight:600;line-height:1.2}
.read-card i{display:block;margin-top:4px;font-size:1rem}
.room-read{margin-top:8px;font-size:1rem}

.wr{padding-top:40px;padding-bottom:24px}
.wr h1{font-size:clamp(2.4rem,3.4vw + 1rem,3.4rem)}
.wr-lede{margin-top:12px;font-size:clamp(1.2rem,.8vw + 1rem,1.4rem);color:var(--ink);max-width:52ch}
.wr-grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.wr-card{display:block;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:18px 18px 20px;text-decoration:none;color:var(--body);border:1.5px solid transparent}
.wr-card:hover{border-color:var(--gold);color:var(--body)}
.wr-card svg{display:block;width:100%;height:auto;background:var(--paper);border-radius:10px;padding:10px 0;margin-bottom:14px}
.wr-card b{display:block;color:var(--ink);font-size:1.3rem;font-weight:600;line-height:1.25}
.wr-card i{display:block;margin-top:4px}
.wr-card small{display:block;margin-top:10px;color:var(--muted);font-size:.9rem}
/* a post's card reads as something to open: Play at its foot (Jae, October
   25, 2026: "it doesn't look like it could be clickable"; "it's play.
   Because you're not watching anything"; a round play button sat on its
   drawing too that day, till "maybe that play button is enough"). The whole
   card opens the post, but the card itself stays still, only its edge going
   gold under the pointer, and Play answers: gold under the pointer, and
   pressing in as the card is pressed, so the click is Play's (Jae, the same
   day: "when i click the play button it bascially the whole card gets
   clicked"; it lifted under the pointer until then) */
.wr-go{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
.wr-play{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--paper);border-radius:999px;padding:8px 16px 8px 13px;font-weight:600;font-size:.95rem;line-height:1;transition:background-color .2s ease,transform .12s ease}
.wr-card .wr-play svg{width:10px;height:10px;margin:0;padding:0;background:none;border-radius:0;fill:currentColor}
/* (a guide's Read, its open book as a post's Play has its triangle; Jae, 2026-10-27: "play has a little
   play button. read also should have a little emoji no?") */
.wr-card .wr-play svg.wr-book{width:13px;height:13px}
.wr-card .wr-go small{margin-top:0}
a.wr-card{transition:border-color .2s ease}
a.wr-card:hover .wr-play{background:var(--gold-deep)}
a.wr-card:active .wr-play{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){a.wr-card,a.wr-card .wr-play{transition:none}}
/* the mind's eye's drawing: the telescope's view of the pattern, seen inside
   a head in profile, its eye closed */
.me-halo{fill:var(--gold-wash)}
.me-view{fill:var(--white);stroke:var(--ink);stroke-width:1.1}
.me-base{stroke:var(--ink-mute);stroke-width:.8}
.me-on{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:.6}
.me-off{fill:var(--white);stroke:var(--ink);stroke-width:.6}
.me-ink{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.me-lash{stroke-width:1.1}
.me-brow{stroke-width:1.2}

.post{max-width:760px;padding-top:24px;padding-bottom:16px;display:flex;flex-direction:column;gap:20px;font-size:19px}
.post > p,.post > h2,.post > .post-head{max-width:66ch}
.post .room-back{margin:0}
.post-head{display:flex;flex-direction:column;gap:14px}
.post-kicker{font-size:.92rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.post h1{font-size:clamp(2.7rem,4.4vw + 1rem,4rem);line-height:1.04;text-wrap:balance}
.post-dek{font-size:clamp(1.2rem,1vw + .9rem,1.45rem);font-style:italic;color:var(--ink-soft);line-height:1.4}
.post .byline{display:flex;align-items:center;gap:12px;margin-top:4px}
.post .byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 38%;box-shadow:var(--shadow)}
.post .byline p{display:grid;line-height:1.3}
.post .byline b{color:var(--ink);font-weight:600;font-size:1rem}
.post .byline span{color:var(--muted);font-style:italic;font-size:.92rem}
.post h2{font-size:1.6rem;line-height:1.2;margin:18px 0 0}
.post .m{white-space:nowrap}
.post .prompt{font-size:1.3rem;color:var(--ink);border-left:3px solid var(--gold);padding-left:16px;line-height:1.45}
.post .callout{font-size:clamp(1.35rem,1.2vw + 1rem,1.7rem);font-weight:600;color:var(--ink);line-height:1.3;border-left:3px solid var(--gold);padding-left:18px;margin:4px 0}
.fig{margin:6px 0;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:22px 22px 16px;display:grid;gap:12px}
.fig svg{display:block;width:100%;height:auto;max-width:100%}
.fig.first{padding:26px 26px 18px}
.fig figcaption{font-size:.95rem;font-style:italic;color:var(--muted);text-align:center;line-height:1.45}
.fig .mid{max-width:560px;margin:0 auto}
.fig .narrowish{max-width:400px}
.fig .narrow{display:none}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.panel{display:grid;gap:4px;min-width:0;background:var(--paper);border-radius:12px;padding:12px 10px 6px}
.panel-label{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);text-align:center}
.t-grey{fill:var(--paper-line);stroke:var(--ink-soft);stroke-width:1.2}
.t-two{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:1.2}
.t-floor{stroke:var(--ink-mute);stroke-width:1.2}
.t-lab{font-family:var(--serif);font-style:italic;font-size:12.5px;fill:var(--ink-mute)}
.t-num{font-family:var(--serif);font-size:11px;fill:var(--ink-soft)}
.t-gold{font-family:var(--serif);font-style:italic;font-weight:600;font-size:17px;fill:var(--gold-deep)}
.t-brace{fill:none;stroke:var(--ink-mute);stroke-width:1.2}
.t-under{font-family:var(--serif);font-size:19px;fill:var(--ink)}
.eq{font-family:var(--serif);font-size:34px;fill:var(--ink)}
.eq-v{font-style:italic}
.eq-g{fill:var(--gold-deep);font-weight:600}
.b-front{fill:var(--white);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.b-top{fill:var(--paper-deep);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.b-side{fill:var(--paper-line);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.b-rule{stroke:var(--ink);stroke-width:.6;stroke-opacity:.5}
.b-path{fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-dasharray:2.5 4;stroke-linecap:round}
.b-arrow{fill:var(--gold-deep)}
.b-ripple{fill:none;stroke:var(--gold);stroke-width:1.1;stroke-opacity:.8}
.b-touch{fill:var(--gold-wash);stroke:var(--gold-deep);stroke-width:1.2}
.w-bubble{fill:var(--white);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.w-say{font-family:var(--serif);font-style:italic;font-size:17px;fill:var(--ink)}
.w-pick{fill:var(--gold-wash);stroke:var(--gold-deep);stroke-width:2}
.w-arrow{fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round}
/* Privacy and Terms: plain pages to read, in the essays' measure */
.legal .updated{color:var(--muted);font-size:.95rem}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:12px;max-width:66ch}
.legal li b{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}
/* the page that isn't there (404.html, every address in it from the site's root): the telescope looking
   at a view with nothing in it, Philosophy's More to come drawing, its strokes the same; Jae, 2026-10-25:
   the last cleanups */
.lost{padding-top:56px;padding-bottom:40px;max-width:760px}
.lost svg{display:block;width:min(340px,86%);height:auto;margin:0 0 30px}
.lost h1{font-size:clamp(2.4rem,4vw + 1rem,3.6rem);line-height:1.05}
.lost-lede{font-size:1.2rem;color:var(--ink);margin-top:14px}
.lost .buttons{margin-top:26px}
.lost .gt-floor{stroke:var(--ink-faint);stroke-width:1.1;stroke-linecap:round}
.lost .gt-leg{stroke:var(--ink-faint);stroke-width:1.6;stroke-linecap:round}
.lost .gt-back{stroke:var(--paper-line)}
.lost .gt-mount{fill:var(--paper-deep);stroke:var(--ink-faint);stroke-width:1.2}
.lost .gt-tube{fill:var(--white);fill-opacity:.75;stroke:var(--ink-faint);stroke-width:1.4;stroke-linejoin:round}
.lost .gt-band{stroke:var(--ink-faint);stroke-width:.9}
.lost .gt-lens{fill:var(--gold-wash);stroke:var(--ink-faint);stroke-width:1.2}
.lost .gt-halo{fill:var(--gold-wash);opacity:.6}
.lost .gt-sight{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3}
.lost .gt-view{fill:var(--white);fill-opacity:.5;stroke:var(--ink-faint);stroke-width:1.4;stroke-dasharray:4 3.4}
.post .cta{margin-top:18px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:26px 26px 28px;display:grid;gap:10px}
.post .cta h3{font-size:1.45rem}
.post .cta p{font-size:1.05rem}
.post .cta .buttons{margin-top:8px}

@media (max-width:640px){
  .post{font-size:18px;padding-top:12px}
  .fig{padding:16px 12px 12px;border-radius:14px}
  .fig .wide{display:none}
  .fig .narrow{display:block}
  .pair{grid-template-columns:1fr}
}
@media (max-width:520px){
  .read-card{grid-template-columns:1fr;gap:12px;padding:14px}
  .read-card svg{max-width:240px}
}

/* ── phones: the small menu button beside "Let's connect", and the menu it
   opens under the bar (scripts/site.js) ── */
.menu-btn{display:none}
@media (max-width:640px){
  .bar{position:relative}
  .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:none;width:38px;height:38px;margin-left:auto;padding:0;border:1.5px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}
  .menu-btn span{display:block;width:16px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
  .bar.open .menu-btn{border-color:var(--ink)}
  .bar.open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .bar.open .menu-btn span:nth-child(2){opacity:0}
  .bar.open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .menu-panel{position:absolute;top:100%;left:20px;right:20px;z-index:30;display:flex;flex-direction:column;margin-top:8px;padding:6px 0;background:var(--surface);border-radius:14px;box-shadow:var(--shadow)}
  .menu-panel a{padding:12px 18px;font-size:1.05rem;color:var(--ink);text-decoration:none}
  .menu-panel a + a{border-top:1px solid var(--line)}
  .menu-panel a[aria-current="page"]{font-weight:600}
  .bar.open{z-index:31}
  .menu-scrim{position:fixed;inset:0;z-index:29;background:transparent;-webkit-tap-highlight-color:transparent}
  /* (it drops in from under the bar, its links one after another, and folds back up a little faster:
     Jae, 2026-10-24, "make sure to have a nice animation") */
  .menu-panel{transform-origin:75% 0;animation:menu-in .22s cubic-bezier(.2,.8,.2,1)}
  .menu-panel a{animation:menu-link .24s cubic-bezier(.2,.8,.2,1) calc(.03s + var(--i,0) * .025s) backwards}
  .menu-panel.closing{animation:menu-out .17s ease-in forwards}
  .menu-panel.closing a{animation:none}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes menu-out{to{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes menu-link{from{opacity:0;transform:translateY(-5px)}}
@media (min-width:641px){ .menu-btn,.menu-panel{display:none !important} }

/* ── the name: Someta, beside Jae's telescope looking at the math (October 23,
   2026); the mark is drawn inline on every page, styles/someta-mark.svg is its
   browser-tab icon ── */
.lockup .mark{width:44px;height:44px;flex:none}
.lockup.small .mark{width:28px;height:28px}
.mark .tl-tube{fill:var(--white);stroke:var(--ink);stroke-width:5.5;stroke-linejoin:round}
.mark .tl-lens{fill:var(--gold);fill-opacity:.7;stroke:var(--ink);stroke-width:4.5}
.mark .tl-mount{fill:var(--paper-deep);stroke:var(--ink);stroke-width:4.5}
.mark .tl-leg{stroke:var(--ink);stroke-width:7;stroke-linecap:round}
.mark .tl-back{stroke:var(--ink-faint)}
.mark .tl-halo{fill:var(--gold-wash)}
.mark .tl-sight{stroke:var(--gold-deep);stroke-width:4;stroke-dasharray:7 6;stroke-linecap:round}
.mark .tl-view{fill:var(--white);stroke:var(--ink);stroke-width:6.5}
.mark .tl-base{stroke:var(--ink-mute);stroke-width:3}
.mark .tl-on{fill:var(--gold);fill-opacity:.7;stroke:var(--ink);stroke-width:3.2}
.mark .tl-off{fill:var(--white);stroke:var(--ink);stroke-width:3.2}
.mark .tl-dot{fill:var(--gold)}
/* the bar's telescope is the detailed drawing, the squares in its view one by one, a little
   bigger than the footer's simple one */
.lockup .mark.detail{width:54px;height:54px}
.mark.detail .tl-tube{fill:var(--white);stroke:var(--ink);stroke-width:3.6;stroke-linejoin:round}
.mark.detail .tl-lens{fill:var(--gold);fill-opacity:.7;stroke:var(--ink);stroke-width:3.2}
.mark.detail .tl-mount{fill:var(--paper-deep);stroke:var(--ink);stroke-width:3.2}
.mark.detail .tl-leg{stroke:var(--ink);stroke-width:4.2;stroke-linecap:round}
.mark.detail .tl-back{stroke:var(--ink-faint)}
.mark.detail .tl-halo{fill:var(--gold-wash)}
.mark.detail .tl-sight{stroke:var(--gold-deep);stroke-width:2.6;stroke-dasharray:5 4.5;stroke-linecap:round}
.mark.detail .tl-view{fill:var(--white);stroke:var(--ink);stroke-width:4.2}
.mark.detail .tl-base{stroke:var(--ink-mute);stroke-width:2}
.mark.detail .tl-on{fill:var(--gold);fill-opacity:.7;stroke:var(--ink);stroke-width:1.8}
.mark.detail .tl-off{fill:var(--white);stroke:var(--ink);stroke-width:1.8}
.mark.detail .tl-dot{fill:var(--gold)}
@media (max-width:640px){ .lockup .mark{width:38px;height:38px} .lockup .mark.detail{width:46px;height:46px} }

/* ── the front page as the talk, played out (mock, 2026-10-23) ──────── */
/* the walkthrough, a screen of its own right under the first line (Jae,
   2026-10-23: "the height needs to be a lot bigger"; "when they scroll and
   get it to there... it becomes full screen"): on a laptop the page
   settles so it fills the window, the canvas inside a little paper; on a
   phone it runs edge to edge and fills the screen once it has started,
   the × giving the page back */
.walk-screen{position:relative;box-sizing:border-box;height:100vh;height:100dvh;padding:12px;margin-top:28px}
/* (on a laptop, the browser's own snapping lines the walkthrough up with the top of the screen when a scroll
   comes to rest near it; a flick goes on past, as anywhere: Jae, 2026-10-24, "just make sure that it gets
   positioned correctly". Exactly at the top, without the room sections keep above them for the menu's
   jumps (with it, a second resting place 24px short); and the top of the page a resting place of its
   own, so a scroll that ends near the top stays there (on a tall screen the walkthrough's pull would
   reach the top of the page). On a phone, none: it fills the screen at a press. Only on a page with a
   walkthrough, the front page and The mind's eye's: elsewhere the top was the only resting place, and a
   scroll that ended anywhere near it was pulled back up; Jae, 2026-10-26: "the scrolling is a little bit
   weird when i go on the top on the resources") */
@media (min-width:641px){ html:has(.walk-screen){scroll-snap-type:y proximity} .bar{scroll-snap-align:start} .walk-screen{scroll-snap-align:start;scroll-margin-top:0} }
.walk-screen iframe{display:block;width:100%;max-width:1440px;height:100%;margin:0 auto;border:0;background:transparent}
.walkthrough-close{display:none}
@media (max-width:640px){
  .walk-screen{height:72svh;min-height:460px;padding:0;margin-top:20px}
  /* (filling the screen: pinned to the screen itself, between the browser's bars, so all of it can be
     seen and touched, the leave-full-screen button too; and the rest of the page put away until they
     leave, so nothing of it can show under the bars, above or below it (as a newer iPhone's Safari draws
     the page under its clock and under its toolbar: pinned to the page itself instead, its top was under
     the clock); its white to the top, the leave-full-screen button over its corner; Jae, 2026-10-24: "it
     should just take up the entire page"; "it's way too up there... i can't even click on the minimize
     button"; "making the white part go all the way to the top of the phone") */
  html.walkthrough-open body > :not(main),html.walkthrough-open main > :not(#walkthrough){display:none!important}
  .walk-screen.full{position:fixed;inset:0;z-index:60;height:auto;min-height:0;margin:0;padding:0;background:var(--surface)}
  /* (its leave-full-screen button: a white circle on a soft shadow, no outline; it comes in a moment
     after the screen fills, its four corners pulling in once to say what it does, and gives under a
     press, the site's gold ring round it; Jae, 2026-10-24, "you know that minimize button on the top
     right? i really like that could you just make it look nicer". The circle 38px, 10px under the top
     line and 12px from the edge, inside a press of a thumb's size (44px) that shows nothing; Jae,
     2026-10-25: "wayyy to close to the top like it's almost touching that top line") */
  .walk-screen.full .walkthrough-close{display:grid;place-items:center;position:absolute;top:7px;right:9px;z-index:1;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease;animation:close-in .34s cubic-bezier(.2,.9,.3,1.25) .3s backwards}
  .walk-screen.full .walkthrough-close::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px rgba(38,38,43,.05),0 2px 6px rgba(38,38,43,.10),0 10px 24px rgba(38,38,43,.08);transition:box-shadow .15s ease}
  .walk-screen.full .walkthrough-close:focus-visible{box-shadow:none}
  .walkthrough-close svg{position:relative;width:18px;height:18px;display:block;overflow:visible}
  .walkthrough-close path{transition:transform .15s ease}
  .walk-screen.full .walkthrough-close path{animation:corner-in .55s cubic-bezier(.3,.7,.2,1) .55s backwards}
  .walkthrough-close path:nth-child(1){--x:-3px;--y:-3px}
  .walkthrough-close path:nth-child(2){--x:3px;--y:-3px}
  .walkthrough-close path:nth-child(3){--x:3px;--y:3px}
  .walkthrough-close path:nth-child(4){--x:-3px;--y:3px}
  .walk-screen.full .walkthrough-close:active{transform:scale(.92)}
  .walk-screen.full .walkthrough-close:active::before,.walk-screen.full .walkthrough-close:focus-visible::before{box-shadow:var(--focus),0 2px 6px rgba(38,38,43,.10)}
  .walkthrough-close:active path{transform:translate(calc(var(--x) * -.3),calc(var(--y) * -.3))}
  html.walkthrough-open,html.walkthrough-open body{overflow:hidden;overscroll-behavior:none;background:var(--surface)}
}
@keyframes close-in{from{opacity:0;transform:scale(.6)}}
@keyframes corner-in{from{transform:translate(var(--x),var(--y))}}
/* (leaving full screen on a phone, where the browser can: the walkthrough shrinks back into its place
   on the page as the page comes back around it; index.html names it only for that moment) */
.walk-screen.morph{view-transition-name:walk}
::view-transition-group(walk){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1);overflow:clip}
::view-transition-old(walk),::view-transition-new(walk){animation-duration:.45s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* "Oh, I see": its heading is a sentence, so it gets a measure */
#instruments h2{max-width:none;text-wrap:balance}
/* the offers, under the note, in two rows since October 25, 2026 (Jae: "two rows now and coming"):
   available now, the free instruments and Socrato, the AI tutor (the free webinar left November 2, 2026),
   under Jae's line, the bridge from all above to the offers; coming August 2027,
   Socrato, the AI instrument guide, and the math curriculum. Sage and Socrato are named on their cards
   so they are never taken for one another */
.offers{padding:64px 20px 24px;border-top:1px solid var(--line);margin-top:48px}
.offers h2{margin-bottom:24px}
.offers .sub{margin:-12px 0 30px;font-size:1.2rem;color:var(--ink);max-width:640px}
.offer-when{font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:var(--gold-deep)}
.offer-list + .offer-when{margin-top:40px}
.offer-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.offer-list.now,.offer-list.soon{grid-template-columns:repeat(2,minmax(0,1fr))}
.offer-list li{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start}
.offer-list h3{margin-bottom:8px}
.offer-list p{flex:1 0 auto;margin:0 0 18px}
.offer-list p:last-child{margin-bottom:0}
@media (max-width:760px){ .offer-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .offer-list,.offer-list.now,.offer-list.soon{grid-template-columns:1fr} }

/* the offers' pictures: each card says what it is at a glance, and lifts a
   little under the mouse, its picture moving once (Jae, 2026-10-24: "add
   some images... that make it more interactive or stand out more") */
.offer-list li{transition:transform .25s ease, box-shadow .25s ease}
.offer-art{height:96px;width:100%;margin:-4px 0 14px;display:flex;align-items:center;justify-content:flex-start;position:relative}
.art-fan span{position:absolute;top:8px;width:46%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:4px;box-sizing:border-box;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.art-fan span .room-art{display:block;width:100%;height:auto}
.art-fan span:nth-child(1){left:0;transform:rotate(-7deg)}
.art-fan span:nth-child(2){left:22%;transform:rotate(0deg);z-index:1;background:var(--surface)}
.art-fan span:nth-child(3){left:44%;transform:rotate(7deg)}
.art-guide img,.art-jae img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.art-guide img{width:96px;height:96px;object-fit:contain}
.art-jae img{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}
.art-course{gap:6px}
.art-course .course{display:flex;flex-direction:column;gap:2px;width:38%;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:6px 6px 4px;box-sizing:border-box;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.art-course .course b{font-size:.72rem;font-weight:600;color:var(--ink);line-height:1.1}
.art-course .course .room-art{display:block;width:100%;height:auto}
.art-course img{width:54px;height:54px;object-fit:contain;align-self:flex-end;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .offer-list li:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(38,38,43,.06),0 18px 40px rgba(38,38,43,.12)}
  .offer-list li:hover .art-fan span:nth-child(1){transform:rotate(-12deg) translateX(-6px)}
  .offer-list li:hover .art-fan span:nth-child(3){transform:rotate(12deg) translateX(6px)}
  .offer-list li:hover .art-guide img{transform:rotate(-6deg) translateY(-3px)}
  .offer-list li:hover .art-jae img{transform:scale(1.06)}
  .offer-list li:hover .art-course .course:nth-child(2){transform:translateY(-4px)}
  .offer-list li:hover .art-course img{transform:translateY(-6px) rotate(6deg)}
}

.art-fan span{width:40%}
.art-fan span:nth-child(2){left:28%}
.art-fan span:nth-child(3){left:56%}
.art-course .course{width:42%}
/* (in the wider cards of the two rows, the fan and the courses keep their size) */
.art-fan,.art-course{max-width:300px}
.art-course .course b{white-space:nowrap;font-size:.68rem}
.art-course img{width:44px;height:44px}
/* Sage's picture: tutoring, a question and its answer (the gold one is Socrato's face everywhere on
   the site, so Sage has a drawing of its own) */
.art-chat svg{width:126px;height:auto;display:block;overflow:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.art-chat .c-me{fill:var(--surface);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.art-chat .c-tutor{fill:var(--gold);fill-opacity:.35;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.art-chat .c-line{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.art-chat .c-q{fill:var(--gold-deep);font:600 22px var(--serif);text-anchor:middle}
@media (hover:hover){ .offer-list li:hover .art-chat svg{transform:translateY(-3px)} }
/* the offers on a phone, shorter (Zach, October 29, 2026: "you're scrolling
   maybe like three screens down"): every card keeps its picture, smaller,
   the coming ones too, each its own card again (Jae, November 2, 2026, of the
   coming cards with none: "where are all the images that were there", then
   "smaller but still show them") */
@media (max-width:560px){
  .offer-list li{padding:18px 18px}
  .offer-list .offer-art{height:64px;margin:-2px 0 10px}
  .offer-list.now .art-chat svg{width:86px}
  .offer-list.now .art-fan{max-width:200px}
  .offer-list.now .art-fan span{top:2px}
  .offer-list.soon .art-guide img{width:64px;height:64px}
  .offer-list.soon .art-course{max-width:200px;height:auto;min-height:64px}
  .offer-list.soon .art-course img{width:32px;height:32px}
  .offer-list p{margin-bottom:14px}
  .offer-list + .offer-when{margin-top:28px}
}

/* ── a post told by Socrato (The mind's eye, October 24, 2026): his face by
   the byline, and the walkthrough under the title as on the front page; only
   that, no text of it under it (Jae: "no need for that") ── */
.post-top{padding-bottom:0}
.post .byline.told img{width:52px;height:52px;border-radius:0;box-shadow:none;object-fit:contain;object-position:50% 50%}
.post-top + .walk-screen{margin-bottom:28px}
@media (max-width:640px){ .post-top + .walk-screen:not(.full){height:var(--first,72svh)} }

/* ── Philosophy: after the posts, a dashed card, as for what isn't open yet (Jae,
   October 24, 2026: "more to come... since we only have one"): a post card's
   shape, its drawing the front page's telescope, faint, pointed at a view
   that hasn't come in yet, dashed and empty (Jae, October 25, 2026: "could
   do the telescope instrument instead of the blocks"), then its words; on a
   phone one short row ("could we make it look better? both on the phone and
   the desktop") ── */
.wr-soon{background:transparent;box-shadow:none;border:1.5px dashed var(--ink-faint)}
.wr-soon:hover{border-color:var(--ink-faint)}
.wr-card.wr-soon svg{background:transparent;aspect-ratio:200 / 92}
.wr-soon .gt-floor{stroke:var(--ink-faint);stroke-width:1.1;stroke-linecap:round}
.wr-soon .gt-leg{stroke:var(--ink-faint);stroke-width:1.6;stroke-linecap:round}
.wr-soon .gt-back{stroke:var(--paper-line)}
.wr-soon .gt-mount{fill:var(--paper-deep);stroke:var(--ink-faint);stroke-width:1.2}
.wr-soon .gt-tube{fill:var(--white);fill-opacity:.75;stroke:var(--ink-faint);stroke-width:1.4;stroke-linejoin:round}
.wr-soon .gt-band{stroke:var(--ink-faint);stroke-width:.9}
.wr-soon .gt-lens{fill:var(--gold-wash);stroke:var(--ink-faint);stroke-width:1.2}
.wr-soon .gt-halo{fill:var(--gold-wash);opacity:.6}
.wr-soon .gt-sight{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3}
.wr-soon .gt-view{fill:var(--white);fill-opacity:.5;stroke:var(--ink-faint);stroke-width:1.4;stroke-dasharray:4 3.4}
.wr-soon-text{display:block}
.wr-card.wr-soon b{color:var(--ink-mute);font-weight:500}
.wr-card.wr-soon i{color:var(--ink-faint)}
@media (max-width:640px){
  .wr-soon{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px 12px 12px}
  .wr-card.wr-soon svg{margin:0;padding:0;aspect-ratio:292 / 146}
  .wr-card.wr-soon b{font-size:1.15rem}
}

/* ── Resources (October 26, 2026; Jae: "a separate part where it says
   resources"): guides for teachers, each with an instrument and its PDF, in
   Philosophy's form: their cards, on resources.html and the front page, and
   each guide a page of its own in resources/, its PDF beside it. The first,
   The warm-up: its drawing a stopwatch, ten minutes of it in gold, beside the
   pattern ── */
.wu-face{fill:var(--white);stroke:var(--ink);stroke-width:1.1}
.wu-ink{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wu-wedge{fill:var(--gold);fill-opacity:.55}
.wu-dot{fill:var(--ink)}
.wu-base{stroke:var(--ink-mute);stroke-width:.8}
.wu-on{fill:var(--gold);fill-opacity:.55;stroke:var(--ink);stroke-width:.6}
.wu-off{fill:var(--white);stroke:var(--ink);stroke-width:.6}
/* its page in six numbered parts, each a card of Jae's own words and bullets, and under each its
   Why, folded till it's asked for: his Why lines, and an example (Jae, 2026-10-26: "waaay more
   succinct"; "i don't want to make anything absent"; "maybe we even number it?"). Its numbers are
   gold, in the title's serif, no circles (Jae: "instead of a circle we can have a more elegant way of
   showing the numbers"), the six at the top a short list going to the parts; the part's minutes in
   gold; the words to say along a gold rule */
.wu .wu-n{color:var(--gold-deep);font-weight:500;line-height:1;font-style:normal;flex:none}
.wu .wu-get{margin-top:6px}
.wu-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;max-width:66ch;margin:2px 0 6px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:18px}
.wu-jump a{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink-soft);border-radius:8px;padding:6px 10px;margin:-6px -10px;transition:background-color .15s ease,color .15s ease}
/* (under the pointer each one shows it goes somewhere: a soft gold behind it, its number brighter, its
   name underlined in gold; Jae, 2026-10-26: "when i hover over the numbers make it more noticeable that
   those are clickable") */
.wu-jump a:hover{color:var(--ink);background:var(--gold-wash)}
.wu-jump a:hover .wu-n{color:var(--gold)}
.wu-jump a:hover small{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.wu-jump .wu-n{font-size:1.3rem;min-width:.6em}
.wu-jump small{font-size:1rem;line-height:1.3}
.wu-part{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:20px 24px 16px;display:flex;flex-direction:column;gap:12px;max-width:66ch;scroll-margin-top:18px;font-size:18px}
.wu-part h2{display:flex;align-items:baseline;gap:14px;margin:0;font-size:1.45rem;line-height:1.2}
.wu-part h2 .wu-n{font-size:1.7em;min-width:.6em}
.wu-part h2 .wu-min{color:var(--gold-deep);font-weight:500}
.wu-part p,.wu-part blockquote{margin:0}
.wu-part h3{font-size:1.05rem;margin:2px 0 -6px;color:var(--ink)}
.wu-part ul,.wu-part ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.wu-part li > ul{margin-top:8px}
.wu-part blockquote{padding:12px 18px;border-left:3px solid var(--gold);background:var(--paper);border-radius:0 10px 10px 0;color:var(--ink)}
/* the ten minutes, in order and to scale: Think, Share, then the instrument in gold */
.wu-time{display:grid;gap:7px;margin:2px 0}
.wu-row{display:grid;grid-template-columns:8.6em minmax(0,1fr);align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.wu-row:hover .wu-lab{color:var(--gold-deep)}
.wu-lab{font-size:.95rem;font-weight:600}
.wu-track{position:relative;height:18px;border-radius:5px;background:var(--paper)}
.wu-seg{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--white);border:1.5px solid var(--ink)}
.wu-seg.wu-gold{background:color-mix(in srgb,var(--gold) 55%,var(--white))}
.wu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wu-axis{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:12px}
.wu-unit{font-size:.78rem;color:var(--ink-mute);text-align:right}
.wu-ticks{position:relative;height:16px;font-size:.78rem;color:var(--ink-mute)}
.wu-ticks i{position:absolute;top:0;font-style:normal;transform:translateX(-50%);white-space:nowrap}
.wu-ticks i:first-child{transform:none}
.wu-ticks i:last-child{transform:translateX(-100%)}
/* each part's Why: Jae's details as they are, his reasons in italic */
.wu-whys{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.wu-whys summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--ink);border-radius:4px}
.wu-whys summary::-webkit-details-marker{display:none}
.wu-whys summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.wu-whys[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.wu-whys summary:hover{color:var(--gold-deep)}
.wu-whys summary:focus-visible{outline:none;box-shadow:var(--focus)}
.wu-whys p{margin-top:10px;font-style:italic;color:var(--ink-soft);font-size:.94em}
.wu-whys p.wu-eg{font-style:normal}
@media (prefers-reduced-motion:reduce){ .wu-whys summary::after{transition:none} }
@media (max-width:640px){
  .wu-jump{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
  .wu-part{padding:18px 18px 14px;border-radius:14px}
  .wu-part h2{font-size:1.3rem}
  .wu-row,.wu-axis{grid-template-columns:7.4em minmax(0,1fr);gap:10px}
}

/* ── Log in, for students and teachers who come to someta.app to sign in to
   the AI tutor (Zach and Jae, October 27, 2026: the site is the
   front door now, and log in stays quiet beside it, never a button, so
   Let's connect stays the one ask). On a laptop it is the menu's last link,
   set apart by a thin line and in the muted colour; on a phone it is the
   menu panel's last link (scripts/site.js clones it there), never on the
   bar; and it is in every page's footer, beside Privacy and Terms. ── */
.bar nav a.login{color:var(--muted);padding-left:22px;margin-left:-4px;border-left:1px solid var(--line);border-bottom-color:transparent}
.bar nav a.login:hover{color:var(--ink);border-bottom-color:transparent}
/* (one link more than the menu had: where seven wouldn't fit beside the logo, they sit a little closer,
   and just above a phone a touch smaller too, so the menu stays on one line at every width; with Log in
   it wrapped under the logo from 641 to 680 wide and from 721 to 790, an iPad held upright) */
@media (min-width:721px) and (max-width:860px){ .bar:has(.login){gap:20px} .bar nav:has(.login){gap:10px} .bar nav a.login{padding-left:12px} }
@media (min-width:641px) and (max-width:720px){ .bar:has(.login){gap:10px} .bar nav:has(.login){gap:7px;font-size:.84rem} .bar nav a.login{padding-left:7px;margin-left:-2px} }
.menu-panel a.login{color:var(--muted)}