/* The Shape of Learning — global system: type, colour, header, home, atlas, dialog. */
@font-face { font-family:"Instrument Serif"; src:url("../vendor/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("../vendor/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("../vendor/fonts/SourceSerif4-Roman.woff2") format("woff2"); font-weight:350 600; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("../vendor/fonts/SourceSerif4-Italic.woff2") format("woff2"); font-weight:350 600; font-style:italic; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../vendor/fonts/JetBrainsMono-Var.woff2") format("woff2"); font-weight:300 600; font-style:normal; font-display:swap; }

:root {
  color-scheme:dark;
  --night:#07080c;
  --night-2:#0c0e14;
  --night-3:#13161e;
  --ink:#ece6da;
  --ink-2:#b5afa3;
  --ink-3:#827d74;
  --rule:rgba(236,230,218,.13);
  --rule-2:rgba(236,230,218,.22);
  --ember:#ff9e4d;
  --ice:#57c7ff;
  --gold:#ffd680;
  --rose:#ff5775;
  --violet:#8a74ff;
  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,64px);
  --header:60px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
* { box-sizing:border-box; }
html { background:var(--night); scroll-padding-top:calc(var(--header) + 12px); -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--night); color:var(--ink); font:400 17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
a { color:inherit; text-decoration-color:var(--rule-2); text-underline-offset:.22em; text-decoration-thickness:1px; }
a:hover { color:var(--gold); text-decoration-color:currentColor; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
:where(a,button,input,summary,[tabindex]):focus-visible { outline:1.5px solid var(--gold); outline-offset:3px; border-radius:2px; }
main:focus, h1:focus { outline:none; }
::selection { background:rgba(255,158,77,.32); color:#fff; }
[hidden] { display:none !important; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:200; padding:12px 18px; background:var(--ink); color:var(--night); font:500 13px/1 var(--mono); }
.skip-link:focus { top:12px; }
.noscript-note { position:relative; z-index:5; margin:0; padding:100px var(--gutter) 20px; font:17px/1.6 var(--serif); color:var(--ink-2); }
kbd { font:500 10px/1 var(--mono); padding:3px 5px 2px; border:1px solid var(--rule-2); border-radius:3px; color:var(--ink-2); }

/* Header */
.site-header { position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 var(--gutter); background:linear-gradient(to bottom, rgba(7,8,12,.86), rgba(7,8,12,.55) 60%, rgba(7,8,12,0)); pointer-events:none; }
.site-header > * { pointer-events:auto; }
.wordmark { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font:400 21px/1 var(--display); letter-spacing:.005em; white-space:nowrap; }
.wordmark:hover { color:var(--ink); }
.wordmark svg { width:24px; height:24px; flex:none; overflow:visible; }
.site-nav { display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.site-nav a { text-decoration:none; color:var(--ink-2); padding:10px 0; }
.site-nav a:hover, .site-nav a[aria-current=page] { color:var(--ink); }
.site-nav button { background:none; border:1px solid var(--rule-2); border-radius:999px; padding:8px 12px 8px 14px; display:flex; align-items:center; gap:9px; color:var(--ink-2); font:inherit; letter-spacing:inherit; text-transform:inherit; }
.site-nav button:hover { color:var(--ink); border-color:var(--ink-3); }
.site-nav button kbd { border:0; padding:0; color:var(--ink-3); }

/* Views */
.view[hidden] { display:none !important; }
.view { animation:view-in .55s var(--ease) both; }
@keyframes view-in { from { opacity:0; } to { opacity:1; } }

/* Stage */
.stage { position:relative; overflow:hidden; background:var(--night); isolation:isolate; }
.stage-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.stage-frame { position:absolute; pointer-events:none; }
.stage-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; }
.stage-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:24px; z-index:3; }
.stage-fallback p { max-width:420px; font:15px/1.6 var(--serif); color:var(--ink-2); text-align:center; }
.lc { text-transform:none; }
.stage-label { position:absolute; left:0; top:0; white-space:nowrap; font:500 10.5px/1.2 var(--mono); letter-spacing:.05em; color:var(--ink-2); padding:3px 6px; border-radius:3px; background:rgba(7,8,12,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); will-change:transform; }
.stage-label.bare { background:none; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; text-shadow:0 0 6px var(--night), 0 0 2px var(--night); }
.stage-label[data-anchor=left] { translate:14px -50%; }
.stage-label[data-anchor=right] { translate:calc(-100% - 14px) -50%; }
.stage-label[data-anchor=above] { translate:-50% calc(-100% - 14px); }
.stage-label[data-anchor=below] { translate:-50% 14px; }
.stage-label[data-anchor=below-left] { translate:calc(-100% - 8px) 10px; }
.stage-label[data-anchor=below-right] { translate:8px 10px; }
.stage-label[data-anchor=above-left] { translate:calc(-100% - 8px) calc(-100% - 10px); }
.stage-label[data-anchor=above-right] { translate:8px calc(-100% - 10px); }
.stage-label[data-anchor=center] { translate:-50% -50%; }
.stage-label.tone-ember { color:var(--ember); }
.stage-label.tone-ice { color:var(--ice); }
.stage-label.tone-gold { color:var(--gold); }
.stage-label.tone-rose { color:var(--rose); }
.stage-label.tone-ink { color:var(--ink); }
.stage-label.axis { color:var(--ink-3); font-weight:400; }
.stage-label.title { font:italic 400 15px/1.2 var(--serif); letter-spacing:0; color:var(--ink-2); }
.stage-handle { position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; border:0; padding:0; background:transparent; border-radius:50%; pointer-events:auto; cursor:grab; touch-action:none; will-change:transform; }
.stage-handle.dragging { cursor:grabbing; }
.stage-handle-ring { position:absolute; inset:12px; border-radius:50%; border:1.5px solid rgba(255,246,230,.55); box-shadow:0 0 0 4px rgba(7,8,12,.25); transition:inset .2s var(--ease), border-color .2s; }
.stage-handle:hover .stage-handle-ring, .stage-handle:focus-visible .stage-handle-ring, .stage-handle.dragging .stage-handle-ring { inset:8px; border-color:var(--gold); }
.stage-handle:focus-visible { outline:none; }
.stage-handle:focus-visible::after { content:attr(aria-label); position:absolute; left:50%; top:calc(100% + 4px); translate:-50% 0; white-space:nowrap; font:500 10px/1.3 var(--mono); color:var(--gold); background:rgba(7,8,12,.8); padding:4px 7px; border-radius:3px; }

/* Buttons and controls (shared by home and plates) */
.btn { display:inline-flex; align-items:center; gap:.5em; min-height:38px; padding:9px 16px; border-radius:999px; border:1px solid var(--rule-2); background:transparent; color:var(--ink); font:500 12px/1 var(--mono); letter-spacing:.04em; transition:background .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn:hover { border-color:var(--ink-2); }
.btn-primary { background:var(--ink); border-color:var(--ink); color:var(--night); }
.btn-primary:hover { background:var(--gold); border-color:var(--gold); color:var(--night); }
.btn-quiet { border-color:transparent; color:var(--ink-2); padding-left:10px; padding-right:10px; }
.btn-quiet:hover { color:var(--ink); border-color:var(--rule); }
.btn[aria-pressed=true] { background:rgba(255,214,128,.12); border-color:var(--gold); color:var(--gold); }
.btn:disabled { opacity:.38; cursor:default; }

/* Home: frontispiece */
.home-hero { position:relative; height:100svh; min-height:620px; }
.home-hero .stage { position:absolute; inset:0; }
.home-hero .stage-frame { left:40%; right:3%; top:calc(var(--header) + 10px); bottom:7%; }
.home-title { position:absolute; left:var(--gutter); bottom:clamp(108px,17vh,180px); z-index:4; margin:0; max-width:46vw; font:400 clamp(58px,8.6vw,150px)/.86 var(--display); letter-spacing:-.012em; text-wrap:balance; pointer-events:none; }
.home-title em { font-style:italic; color:var(--gold); }
.home-lede { position:absolute; left:var(--gutter); bottom:clamp(58px,9vh,96px); z-index:4; max-width:min(520px,40vw); margin:0; font:italic 400 clamp(17px,1.45vw,21px)/1.45 var(--serif); color:var(--ink-2); }
.home-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:52%; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(7,8,12,.82), rgba(7,8,12,.5) 55%, rgba(7,8,12,0)); }
.frontis-caption { position:absolute; left:var(--gutter); top:calc(var(--header) + clamp(18px,4vh,40px)); z-index:4; max-width:min(380px,30vw); display:grid; grid-template-columns:1fr; gap:3px; font:400 11px/1.6 var(--mono); color:var(--ink-3); }
.frontis-caption b { font-weight:500; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; font-size:10px; margin-top:8px; }
.frontis-caption b:first-child { margin-top:0; }
.frontis-caption p { margin:0; }
.frontis-caption .frontis-stats { color:var(--ink-2); }
.frontis-actions { position:absolute; left:var(--gutter); bottom:22px; z-index:5; display:flex; gap:10px; flex-wrap:wrap; }
.scroll-cue { position:absolute; left:50%; bottom:24px; z-index:4; translate:-50% 0; width:1px; height:42px; background:linear-gradient(var(--ink-3), transparent); }

/* Home: statement */
.statement { padding:clamp(90px,14vh,160px) var(--gutter) clamp(60px,9vh,110px); max-width:1320px; margin:0 auto; }
.statement > p { margin:0; max-width:15.5em; font:400 clamp(36px,4.6vw,72px)/1.04 var(--display); letter-spacing:-.006em; text-wrap:balance; }
.statement > p em { color:var(--gold); }
.principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); margin:clamp(48px,7vh,80px) 0 0; padding:0; list-style:none; }
.principles li { border-top:1px solid var(--rule); padding-top:18px; }
.principles h3 { margin:0 0 10px; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:10px; }
.principles p { margin:0; font:16.5px/1.6 var(--serif); color:var(--ink-2); max-width:30em; }
.swatch { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex:none; }
.swatch-pair { display:inline-flex; gap:4px; }

/* Home: atlas */
.atlas { padding:clamp(40px,7vh,80px) var(--gutter) clamp(70px,10vh,120px); max-width:1440px; margin:0 auto; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-bottom:1px solid var(--rule); padding-bottom:16px; margin-bottom:clamp(30px,5vh,52px); }
.section-head h2 { margin:0; font:400 clamp(40px,5vw,76px)/1 var(--display); letter-spacing:-.01em; }
.section-head p { margin:0; max-width:32em; font:15.5px/1.6 var(--serif); color:var(--ink-2); }
.field-legend { display:flex; flex-wrap:wrap; gap:8px 22px; margin:-26px 0 34px; padding:0; list-style:none; font:500 10.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.field-legend li span { color:var(--ink-2); }
.atlas-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,6vh,72px) clamp(28px,3.4vw,56px); margin:0; padding:0; list-style:none; }
.card { display:block; text-decoration:none; color:var(--ink); }
.card:hover { color:var(--ink); }
.card-still { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--night-2); border-radius:2px; }
.card-still canvas, .card-still img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; filter:brightness(.92) saturate(.96); }
.card:hover .card-still canvas, .card:focus-visible .card-still canvas { transform:scale(1.025); filter:brightness(1.08) saturate(1.05); }
.card-still .card-pending { position:absolute; inset:0; display:grid; place-items:center; font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.card-meta { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:baseline; margin-top:18px; }
.card-numeral { font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--gold); padding-top:4px; }
.card-title { margin:0; font:400 clamp(36px,3.4vw,52px)/1 var(--display); letter-spacing:-.008em; }
.card-question { grid-column:2; margin:6px 0 0; font:italic 18px/1.45 var(--serif); color:var(--ink-2); }
.card-fields { grid-column:2; margin:8px 0 0; font:500 10px/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* Home: connections */
.links { padding:clamp(40px,7vh,80px) var(--gutter); max-width:1440px; margin:0 auto; }
.links-body { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,80px); align-items:start; }
.links-figure { position:sticky; top:calc(var(--header) + 20px); }
.links-figure svg { width:100%; height:auto; display:block; overflow:visible; }
.links-figure .node circle { fill:var(--night); stroke:var(--ink-3); stroke-width:1; }
.links-figure .node text { font:400 15px var(--display); fill:var(--ink-2); }
.links-figure .node .num { font:500 9px var(--mono); letter-spacing:.12em; fill:var(--ink-3); }
.links-figure .chord { fill:none; stroke:var(--ink-3); stroke-width:1; opacity:.45; transition:opacity .3s, stroke .3s; }
.links-figure .chord.lit { stroke:var(--gold); opacity:1; stroke-width:1.5; }
.links-figure .node.lit circle { stroke:var(--gold); fill:#1b1508; }
.links-figure .node.lit text { fill:var(--ink); }
.links-list { margin:0; padding:0; list-style:none; }
.links-list li { display:grid; grid-template-columns:minmax(150px,.42fr) minmax(0,1fr); gap:20px; padding:18px 0; border-top:1px solid var(--rule); transition:background .3s; }
.links-list li:last-child { border-bottom:1px solid var(--rule); }
.links-list li.lit { background:linear-gradient(90deg, rgba(255,214,128,.06), transparent 70%); }
.links-pair { font:400 21px/1.25 var(--display); }
.links-pair a { text-decoration:none; }
.links-pair span { color:var(--ink-3); padding:0 .35em; font-family:var(--serif); font-size:16px; }
.links-list p { margin:0; font:16px/1.6 var(--serif); color:var(--ink-2); }

/* Home: about */
.about { padding:clamp(60px,9vh,110px) var(--gutter) clamp(70px,10vh,120px); max-width:1440px; margin:0 auto; }
.about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,5vw,90px); }
.about-grid h3 { margin:0 0 12px; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.about-grid p { margin:0 0 14px; font:17px/1.65 var(--serif); color:var(--ink-2); max-width:34em; }
.about-grid section { border-top:1px solid var(--rule); padding-top:18px; }
.fields-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); margin:0 0 clamp(50px,7vh,80px); padding:0; list-style:none; }
.fields-grid li { border-top:1px solid var(--rule-2); padding-top:16px; }
.fields-grid .field-num { font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--gold); }
.fields-grid h3 { margin:12px 0 10px; font:400 30px/1.05 var(--display); }
.fields-grid p { margin:0 0 12px; font:16px/1.55 var(--serif); color:var(--ink-2); }
.fields-grid .field-plates { font:500 10.5px/1.7 var(--mono); letter-spacing:.06em; color:var(--ink-3); }
.fields-grid .field-plates a { color:var(--ink-2); }

.site-footer { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:28px var(--gutter) 36px; border-top:1px solid var(--rule); font:500 10.5px/1.6 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.site-footer a { color:var(--ink-2); text-decoration:none; }

/* Index dialog */
.index-dialog { width:min(640px,calc(100vw - 24px)); max-height:min(720px,86dvh); padding:0; border:1px solid var(--rule-2); border-radius:6px; background:rgba(12,14,20,.96); color:var(--ink); box-shadow:0 30px 120px rgba(0,0,0,.6); overflow:hidden; }
.index-dialog::backdrop { background:rgba(4,5,8,.66); backdrop-filter:blur(6px); }
.index-dialog[open] { display:flex; flex-direction:column; }
.index-search { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--rule); }
.index-search input { flex:1; min-width:0; border:0; background:none; outline:none; font:400 24px/1.3 var(--display); color:var(--ink); }
.index-search input::placeholder { color:var(--ink-3); }
.index-close { background:none; border:0; color:var(--ink-3); font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:8px; }
.index-status { margin:0; padding:10px 20px 4px; font:500 10px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.index-results { list-style:none; margin:0; padding:6px 8px 12px; overflow:auto; }
.index-results a { display:grid; grid-template-columns:42px 1fr; gap:2px 12px; padding:12px; border-radius:4px; text-decoration:none; }
.index-results a:hover, .index-results a.active { background:rgba(236,230,218,.06); }
.index-results .ix-num { grid-row:span 2; font:500 11px/1.9 var(--mono); color:var(--gold); }
.index-results strong { font:400 24px/1.1 var(--display); font-weight:400; }
.index-results small { font:15px/1.45 var(--serif); color:var(--ink-2); font-style:italic; }
.index-foot { display:flex; justify-content:space-between; gap:12px; padding:12px 20px; border-top:1px solid var(--rule); font:500 10px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); }

/* Math */
.math-pending { font:13px/1.6 var(--mono); color:var(--ink-3); }
.math-error { font:13px/1.6 var(--mono); color:var(--rose); }
.katex { font-size:1.08em; color:var(--ink); }
.math-display { overflow-x:auto; overflow-y:hidden; padding:6px 0; }
.math-display .katex-display { margin:0; width:max-content; min-width:100%; }

@media (max-width:1023px) {
  .home-hero .stage-frame { left:3%; right:3%; top:12%; bottom:36%; }
  .home-title { max-width:none; right:var(--gutter); bottom:auto; top:58%; font-size:clamp(50px,11.5vw,96px); }
  .home-lede { max-width:none; right:var(--gutter); top:calc(58% + 2.15em * 1); bottom:auto; display:none; }
  .home-hero::before { display:none; }
  .frontis-caption { left:var(--gutter); right:var(--gutter); top:auto; max-width:none; bottom:76px; gap:2px; }
  .frontis-caption b { display:none; }
  .scroll-cue { display:none; }
  .principles { grid-template-columns:1fr; }
  .links-body { grid-template-columns:1fr; }
  .links-figure { position:relative; top:0; max-width:420px; }
  .about-grid { grid-template-columns:1fr; }
  .fields-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:719px) {
  :root { --header:54px; }
  .wordmark { font-size:19px; }
  .site-nav { gap:14px; }
  .site-nav .nav-about { display:none; }
  .site-nav button kbd { display:none; }
  .home-hero { min-height:560px; }
  .home-hero .stage-frame { top:9%; bottom:40%; }
  .home-title { top:auto; bottom:190px; font-size:clamp(46px,13.5vw,76px); }
  .frontis-caption { bottom:72px; font-size:10.5px; }
  .atlas-grid { grid-template-columns:1fr; }
  .section-head { flex-direction:column; align-items:flex-start; }
  .links-list li { grid-template-columns:1fr; gap:6px; }
  .fields-grid { grid-template-columns:1fr; }
  .index-search input { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .view { animation:none; }
  *, *::before, *::after { transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print {
  .site-header, .index-dialog, .skip-link, .frontis-actions, .scroll-cue, .plate-moves, .plate-instrument { display:none !important; }
  body { background:#fff; color:#111; }
}
@media (max-width:1023px) {
  .home-hero::after { content:""; position:absolute; inset:auto 0 0 0; height:58%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,8,12,.94) 35%, rgba(7,8,12,.55) 70%, rgba(7,8,12,0)); }
}