/* The question scene is a shared surface. The objects, not enclosing cards,
   provide its visual identity. This sheet leaves the older family CSS intact. */
.studio-root { scroll-behavior:auto; }
.question-studio {
  --paper:#f7f3e9; --panel:#fffdf7; --text:#222321; --quiet:#686a65;
  --hairline:#d8d8cf; --blue:#28648b; --rust:#b64d36; --ochre:#95641b;
  --wash:#eeece3; --strong:#171a18;
  background:var(--paper); color:var(--text); font-family:var(--font-sans); font-size:17px; line-height:1.45;
  margin:0; min-height:100svh; -webkit-font-smoothing:antialiased;
}
[data-theme="dark"] .question-studio {
  --paper:#111514; --panel:#1a201e; --text:#f1f0e9; --quiet:#b6bbb4;
  --hairline:#37413b; --blue:#89c5e7; --rust:#f2997e; --ochre:#e4be70;
  --wash:#1b2520; --strong:#fffdf5;
}
.question-studio a { color:inherit; text-decoration:none; }
.question-studio button,.question-studio input,.question-studio select { font:inherit; }
.question-studio button { cursor:pointer; color:inherit; }
.question-studio h1,.question-studio h2,.question-studio h3,.question-studio p { margin:0; }
.question-studio h1 { font-family:var(--font-serif); font-weight:500; letter-spacing:-.035em; line-height:1.08; }
.question-studio h2,.question-studio h3 { font-family:var(--font-sans); line-height:1.2; }
.question-studio :focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.question-studio h1:focus { outline:none; }
.question-studio [hidden] { display:none!important; }
.studio-skip { position:fixed;top:-100px;left:20px;z-index:200;padding:12px;background:var(--panel); }
.studio-skip:focus { top:8px; }
.studio-header { height:70px; display:flex; align-items:center; gap:26px; padding:0 clamp(24px,4.1vw,70px); border-bottom:1px solid var(--hairline); background:var(--paper); }
.studio-brand { display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-size:23px;font-weight:600;white-space:nowrap; }
.studio-brand img { flex-shrink:0; }
.studio-header nav { display:flex;gap:30px;margin-left:auto;align-items:center; }
.studio-header nav a { font-size:15px;line-height:24px;padding:10px 0;position:relative; }
.studio-header nav a[aria-current="page"]:after { content:"";position:absolute;bottom:3px;left:0;right:0;height:1.5px;background:currentColor; }
.theme-button { width:40px;height:40px;border:1px solid var(--hairline);border-radius:50%;background:transparent;font-size:24px!important;line-height:1; }
.theme-button:hover { background:var(--wash); }
.studio-main { max-width:1530px;margin:auto;padding:0 clamp(24px,4.1vw,70px); }
.home-view { min-height:calc(100svh - 70px);display:flex;flex-direction:column; }
.scene-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:35px;padding:24px 0 10px; }
.eyebrow { font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.12em;color:var(--quiet); }
.scene-heading h1 { font-size:clamp(30px,2.85vw,43px);margin-top:7px; }
.scene-intro { max-width:345px;font-size:15px;line-height:1.42;color:var(--quiet); }
.scene-intro a { display:block;margin-top:5px;color:var(--text);font-size:13px; }
.scene-intro a:hover { text-decoration:underline;text-underline-offset:3px; }
.question-scene { position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr 1fr;column-gap:26px;row-gap:12px;align-items:center;flex:1;min-height:480px;max-height:720px; }
.door { position:relative;z-index:1;max-width:390px; }
.door--research { grid-column:1/5;grid-row:1;align-self:start;margin-top:10px; }
.door--proofs { grid-column:5/9;grid-row:1;align-self:start;margin-top:24px; }
.door--assistants { grid-column:9/13;grid-row:1;margin-top:30px; }
.door--code { grid-column:5/9;grid-row:2;margin-left:0;margin-top:7px; }
.door--testing { grid-column:9/13;grid-row:2;margin-top:12px; }
.door--explaining { grid-column:1/5;grid-row:2;margin-top:3px; }
.ink-maths { --object-ink:var(--blue); }
.ink-code { --object-ink:var(--rust); }
.ink-explain { --object-ink:var(--ochre); }
.door-open { display:block;border-radius:4px;padding:3px 6px 4px; }
.door-object { color:var(--object-ink);max-width:350px;margin:auto;position:relative; }
.door-object:before { content:"";position:absolute;inset:18% 5%;background:var(--paper);border-radius:50%;z-index:-1; }
.door .specimen { width:100%;height:clamp(122px,11.6vw,174px);overflow:visible;display:block; }
.door h2 { display:flex;justify-content:space-between;gap:13px;font-size:clamp(20px,1.75vw,26px);font-weight:580;letter-spacing:-.025em;max-width:360px; }
.open-arrow { flex-shrink:0;font-family:var(--font-sans);font-size:21px;transition:transform .18s ease; }
.door-open:hover .open-arrow { transform:translate(3px,-3px); }
.door-caption { color:var(--quiet);font-size:13px;line-height:1.35;max-width:350px;position:absolute;left:6px;right:0;top:100%;padding-top:3px;opacity:0;transform:translateY(-3px);transition:opacity .16s,transform .16s;pointer-events:none; }
.door:hover .door-caption,.door:focus-within .door-caption { opacity:1;transform:none; }
.door--research .door-caption { display:none; }
.door-shortcuts { display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px;padding:5px 6px 0; }
.door-shortcuts a { border-bottom:1px solid var(--hairline);padding:2px 0;min-height:26px; }
.door-shortcuts a:hover { border-color:var(--object-ink);color:var(--object-ink); }
.scene-threads { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible; }
.scene-threads path { fill:none;stroke:var(--hairline);stroke-width:1;opacity:.64;transition:stroke .2s,opacity .2s,stroke-width .2s; }
.scene-threads path.is-active { stroke:var(--blue);opacity:.68;stroke-width:1.4;stroke-dasharray:1;animation:thread-reveal .7s ease-out 1; }
.scene-footer { min-height:45px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline);font-size:12px;color:var(--quiet);margin-top:22px;gap:20px; }
.scene-footer a { color:var(--text); }
.specimen { display:block;overflow:visible;width:100%; }
.specimen .obj-solid { fill:currentColor;stroke:none; }
.specimen .obj-paper,.specimen .obj-box rect { fill:var(--paper); }
.specimen .obj-highlight { fill:currentColor;fill-opacity:.14;stroke:none; }
.specimen .obj-faint { opacity:.25; }
.specimen .obj-thread { opacity:.28; }
.specimen .obj-link { stroke-width:2.7; }
.specimen .obj-label { fill:currentColor;stroke:none;font:9px var(--font-sans);font-weight:600;letter-spacing:1.1px; }
.specimen .obj-code { fill:currentColor;stroke:none;font:14px var(--font-sans); }
.specimen .obj-large { fill:currentColor;stroke:none;font:28px var(--font-serif); }
.specimen .obj-query { stroke:none;fill:currentColor;fill-opacity:.28; }
.specimen .obj-signal { stroke-width:1;opacity:0; }
.door:is(:hover,:focus-within) .obj-highlight { fill-opacity:.34;transition:fill-opacity .2s; }
.door:is(:hover,:focus-within) .obj-traveller { animation:follow-line .68s ease-in-out 1; }
.door:is(:hover,:focus-within) .obj-event { animation:event-read .58s ease-out 1; }
.door:is(:hover,:focus-within) .obj-event:nth-child(3) { animation-delay:.1s; }
.door:is(:hover,:focus-within) .obj-event:nth-child(4) { animation-delay:.2s; }
.door:is(:hover,:focus-within) .obj-signal { animation:signal-ring .65s ease-out 1; }
.door:is(:hover,:focus-within) .obj-bug-after { animation:event-read .65s ease-out 1; }
.door:is(:hover,:focus-within) .obj-step { animation:page-lift .6s ease-out 1; }
.door:is(:hover,:focus-within) .obj-step:nth-child(3) { animation-delay:.1s; }
.door:is(:hover,:focus-within) .obj-step:nth-child(4) { animation-delay:.2s; }
.door:is(:hover,:focus-within) .obj-cube { animation:page-lift .6s ease-out 1; }
@keyframes thread-reveal { from{stroke-dashoffset:1}to{stroke-dashoffset:0} }
@keyframes follow-line { 0%{transform:translateX(-33px);opacity:0}30%{opacity:1}100%{transform:translateX(40px);opacity:1} }
@keyframes event-read { 0%{opacity:.35}100%{opacity:1} }
@keyframes signal-ring { from{opacity:.8;transform:translate(0,0)}to{opacity:0;transform:translate(0,-3px)} }
@keyframes page-lift { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
.breadcrumb { min-height:62px;display:flex;align-items:center; }
.back-button { padding:7px 0;border:0;background:none;font-size:14px!important;color:var(--quiet)!important;text-align:left; }
.back-button:hover { color:var(--text)!important; }
.back-button span { margin-right:8px; }
.door-layout { min-height:calc(100svh - 232px);display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center; }
.door-focus h1 { font-size:clamp(38px,4.3vw,62px);margin:12px 0 22px;max-width:550px; }
.door-focus .focus-object { max-width:460px;margin:15px auto;color:var(--object-ink); }
.focus-caption { color:var(--quiet);font-size:16px;max-width:440px; }
.project-choices { padding:15px 0 30px; }
.project-choice { display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 6px 23px 0;border-bottom:1px solid var(--hairline); }
.project-choice strong { display:block;font-size:22px;font-weight:560;letter-spacing:-.015em; }
.project-choice small { display:block;font-size:13px;color:var(--quiet);margin-top:6px; }
.project-choice:hover .choice-arrow { transform:translate(3px,-3px); }
.project-choice:hover strong { color:var(--object-ink); }
.choice-arrow { font-size:23px;transition:transform .2s; }
.choice-group h2 { font-size:12px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--quiet);margin:18px 0 0; }
.choice-group .project-choice { padding:15px 0; }
.choice-group .project-choice strong { font-size:19px; }
.local-connections { display:flex;align-items:center;gap:20px;border-top:1px solid var(--hairline);padding:18px 0 24px;margin-top:16px; }
.local-connections:empty { display:none; }
.local-connections>.eyebrow { min-width:120px; }
.related-route { flex:1;display:flex;gap:10px;align-items:center;font-size:13px; }
.related-route:has(strong) { flex-direction:column;align-items:flex-start;gap:2px; }
.related-route span:first-child { color:var(--quiet); }
.related-route strong { font-size:14px;font-weight:550; }
.related-route:hover { text-decoration:underline;text-underline-offset:4px; }
.project-layout { display:grid;grid-template-columns:1fr 1.05fr;gap:7%;align-items:start; }
.project-story h1 { font-size:clamp(35px,3.3vw,49px);margin:10px 0 18px;max-width:570px; }
.project-answer { font-size:17px;line-height:1.48;max-width:550px; }
.interactive-specimen { max-width:380px;color:var(--object-ink);margin:20px auto 0; }
.interactive-specimen .specimen { max-height:180px; }
.specimen-controls { display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:8px 0; }
.specimen-controls button { border:0;border-bottom:1px solid transparent;padding:7px 10px;background:transparent;font-size:12px; }
.specimen-controls button[aria-pressed="true"] { border-color:var(--object-ink);color:var(--object-ink); }
.demo-caption { max-width:410px;margin:9px auto 0!important;font-size:12px;line-height:1.4;text-align:center;color:var(--quiet);min-height:34px; }
.resource-actions { display:flex;gap:12px;flex-wrap:wrap;margin-top:23px; }
.resource-action { display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:43px;padding:10px 14px;border:1px solid var(--hairline);font-size:14px; }
.resource-action:hover { border-color:var(--text);background:var(--wash); }
.taster-tabs { display:flex;gap:18px;border-bottom:1px solid var(--hairline);margin-bottom:13px; }
.taster-tabs button { border:0;background:transparent;padding:8px 0 9px;font-size:13px;color:var(--quiet); }
.taster-tabs button[aria-pressed="true"] { color:var(--text);box-shadow:0 1.5px var(--text); }
.project-media { padding-top:4px; }
.film-visual { display:block;position:relative;aspect-ratio:16/9;overflow:hidden;width:100%;background:#15191b;border:0;padding:0;text-align:left;color:#fff!important; }
.film-visual img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease; }
.film-visual:hover img { transform:scale(1.025); }
.film-visual__shade { position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72)); }
.film-visual__action { position:absolute;left:18px;bottom:15px;font-size:14px;font-weight:600; }
.film-time { position:absolute;bottom:14px;right:15px;font-size:12px;background:#151515;color:#fff;padding:3px 6px;border-radius:2px; }
.film-availability { position:absolute;top:12px;left:12px;background:rgba(15,18,17,.85);color:#fff;font-size:11px;padding:5px 8px; }
.film-caption { margin-top:16px; }
.film-caption>p:last-child { font-size:16px;line-height:1.45;margin-top:7px; }
.continuations { margin-top:21px; }
.continue-action { display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:var(--text);color:var(--paper)!important;padding:14px 17px;margin-top:9px;font-size:15px;min-height:48px;text-align:left; }
.continue-action:hover { opacity:.88; }
.resource-details { border-top:1px solid var(--hairline);margin-top:36px;padding-top:0; }
.resource-details summary,.contributions-details summary { display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;list-style:none;padding:18px 0; }
.resource-details summary::-webkit-details-marker,.contributions-details summary::-webkit-details-marker { display:none; }
.resource-details[open] summary>span,.contributions-details[open] summary>span,.term-definition[open] summary>span { transform:rotate(45deg); }
.resource-details__grid { display:grid;grid-template-columns:1fr 1fr;gap:28px 45px;padding:10px 0 35px;font-size:14px; }
.resource-details__grid h3 { font-size:15px;margin-bottom:12px; }
.resource-details__grid ul { padding-left:18px;margin:0; }
.resource-details__grid li { margin:9px 0; }
.resource-details__grid li span { display:block;color:var(--quiet);font-size:12px; }
.resource-details__grid p+p { margin-top:12px; }
.resource-details__grid a:hover { text-decoration:underline;text-underline-offset:3px; }
.inline-action,.text-button,.film-title-button { border:0;background:none;padding:0;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline); }
.inline-action:hover { text-decoration-color:currentColor; }
.index-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:10px 0 28px; }
.index-heading h1 { font-size:48px; }
.index-heading>p { max-width:360px;color:var(--quiet);font-size:15px; }
.search-label { display:flex;flex-direction:column;gap:8px;min-width:340px;font-size:12px;color:var(--quiet); }
.search-label input { border:0;border-bottom:1px solid var(--hairline);background:transparent;padding:9px 0;color:var(--text);font-size:17px; }
.project-index-row { display:flex;align-items:center;gap:24px;border-top:1px solid var(--hairline);padding:19px 0; }
.project-index-row:last-child { border-bottom:1px solid var(--hairline); }
.project-index-row>span:nth-child(2) { flex:1; }
.project-index-row strong { display:block;font-weight:550;font-size:21px; }
.project-index-row small { color:var(--quiet);font-size:13px;display:block;margin-top:4px; }
.project-index-row:hover strong { color:var(--object-ink); }
.index-number { font-size:12px;font-variant-numeric:tabular-nums;color:var(--quiet);min-width:30px; }
.index-links { display:flex;gap:30px;flex-wrap:wrap;padding:30px 0 40px;font-size:14px; }
.empty-result { padding:55px 0; }
.empty-result p { margin:15px 0; }
.empty-result button { background:none;border:1px solid var(--hairline);padding:10px 15px; }
.film-filters { display:flex;gap:28px;align-items:center;border-block:1px solid var(--hairline);padding:14px 0;margin-bottom:20px;font-size:13px; }
.film-filters label { display:flex;gap:9px;align-items:center; }
.film-filters select { color:var(--text);background:var(--paper);border:1px solid var(--hairline);padding:7px 10px;font-size:13px; }
.film-filters input { accent-color:var(--blue); }
#film-count { margin-left:auto;color:var(--quiet); }
.film-row { display:grid;grid-template-columns:260px 1fr;gap:30px;max-width:1080px;padding:23px 0;border-bottom:1px solid var(--hairline); }
.film-row h2 { font-size:22px;margin:7px 0 8px; }
.film-title-button { text-decoration:none;font-weight:550; }
.film-row-takeaway { font-size:15px;max-width:700px; }
.film-row-onward { display:flex;align-items:baseline;gap:10px;margin-top:14px;font-size:13px;flex-wrap:wrap; }
.film-row-onward>span { color:var(--quiet); }
.film-project-link { display:inline-block;margin-top:12px;font-size:12px;color:var(--quiet)!important; }
.film-projects { display:flex;gap:8px 20px;flex-wrap:wrap; }
.intro-heading { max-width:650px;margin-bottom:32px; }
.intro-heading h1,.about-heading h1 { font-size:52px;margin:12px 0 22px; }
.intro-heading>p:last-child { font-size:19px; }
.intro-films { display:grid;grid-template-columns:1fr 1fr;gap:40px; }
.intro-films h2 { font-size:20px;margin-bottom:15px; }
.intro-films p { font-size:15px;margin-top:17px; }
.published-intro { margin:30px 0 40px!important;font-size:15px; }
.about-heading { max-width:760px;margin:15px 0 45px; }
.about-heading>p { font-size:19px;margin-top:20px; }
.about-heading .eyebrow { font-size:11px; }
.contact-links { display:flex;gap:10px;flex-wrap:wrap;margin-top:25px; }
.contributions-details { border-top:1px solid var(--hairline); }
.contributions-details>ul { display:grid;grid-template-columns:1fr 1fr;gap:25px 50px;list-style:none;padding:20px 0 35px;font-size:14px; }
.contributions-details p { color:var(--quiet);margin:8px 0; }
.term-trigger { border:0;border-bottom:1px dotted var(--quiet);padding:0 1px;background:transparent;font:inherit!important;line-height:inherit;display:inline;color:inherit; }
.term-trigger:hover,.term-trigger[aria-expanded="true"] { border-color:var(--blue);color:var(--blue); }
.glossary-popover { position:fixed;z-index:110;background:var(--panel);color:var(--text);padding:18px 20px;border:1px solid var(--hairline);box-shadow:0 15px 45px #0002;font-size:14px;max-height:calc(100svh - 32px);overflow:auto; }
.glossary-top { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.glossary-top strong { font-size:17px; }
.glossary-top button { border:0;background:none;font-size:24px;width:30px;height:30px; }
.glossary-popover p { margin:10px 0 0;line-height:1.5; }
.glossary-popover summary { font-size:12px;color:var(--quiet);margin-top:15px;cursor:pointer; }
.all-terms-link { display:inline-block;font-size:12px;margin-top:15px; }
.term-definition { border-top:1px solid var(--hairline);padding:0 0 8px; }
.term-definition summary { display:flex;justify-content:space-between;cursor:pointer;list-style:none;padding:16px 0;font-size:21px; }
.term-definition p { max-width:850px;padding-bottom:14px;font-size:16px; }
.term-definition p+p { color:var(--quiet); }
#film-dialog { color:var(--text);background:var(--panel);width:min(760px,calc(100vw - 32px));max-height:calc(100svh - 48px);border:1px solid var(--hairline);padding:0; }
#film-dialog::backdrop { background:#121614b3;backdrop-filter:blur(4px); }
.dialog-content { padding:32px 40px 40px; }
.dialog-close { float:right;border:0;background:none;font-size:30px!important;width:40px;height:40px; }
#film-dialog h2 { font-size:29px;line-height:1.15;margin:13px 40px 18px 0; }
.transcript-status { font-size:13px;color:var(--quiet);padding-bottom:20px;border-bottom:1px solid var(--hairline); }
.transcript-text { font-size:17px;line-height:1.6; }
.transcript-text p { margin-top:16px; }
.no-js-note { padding:20px;text-align:center; }
.static-index main { max-width:960px;margin:auto;padding:35px 24px; }
.static-index main h1 { font-size:48px;margin-bottom:30px; }
.static-index main section { margin-top:50px; }
.static-index main article { margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline); }
.static-index main h2 { font-size:27px;margin-bottom:13px; }
.static-index main h3 { font-size:21px;margin-bottom:9px; }
.static-index main p { margin:10px 0; }
.static-index main a { text-decoration:underline;text-underline-offset:3px; }
.static-index main li { margin:8px 0; }
.journey-invitation { display:inline-flex;gap:22px;margin-top:22px;font-size:15px;font-weight:600;border-bottom:1px solid var(--hairline);padding:10px 0; }
.journey-invitation:hover { border-color:currentColor; }
.journey-heading { max-width:740px;margin:15px 0 0; }
.journey-heading h1 { font-size:58px;margin:13px 0; }
.journey-heading>p:last-child { font-size:18px;color:var(--quiet); }
.journey-layout { display:grid;grid-template-columns:1.15fr 1fr;gap:8%;position:relative;margin-top:20px; }
.journey-sticky { position:sticky;top:70px;height:500px;color:var(--object-ink);pointer-events:none; }
.journey-frame { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:25px;opacity:0;transform:translateY(18px);transition:opacity .28s,transform .36s; }
.journey-frame.is-current { opacity:1;transform:none; }
.journey-frame-body>img { display:block;width:100%;height:auto;border:1px solid var(--hairline); }
.journey-frame-body .focus-object { max-width:480px;margin:auto; }
.journey-frame .film-visual { pointer-events:none; }
.journey-progress { font-size:12px;letter-spacing:.1em;color:var(--quiet); }
.journey-step { min-height:68svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:40px 0; }
.journey-step h2 { font-family:var(--font-serif);font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.025em;margin:15px 0; }
.journey-step p { font-size:20px;line-height:1.45;max-width:430px;margin-bottom:23px; }
.journey-inline-visual { display:none; }
.journey-end { border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:20px 0 45px;font-size:14px; }
.journey-end .journey-invitation { margin-top:0; }
@media(max-width:800px) {
 .journey-heading h1{font-size:43px}.journey-layout{grid-template-columns:1fr}.journey-sticky{display:none}.journey-step{min-height:0;padding:40px 0;border-bottom:1px solid var(--hairline)}.journey-step h2{font-size:32px}.journey-step p{font-size:18px}.journey-inline-visual{display:block;width:100%;max-width:530px;margin:10px 0 25px;color:var(--object-ink)}.journey-inline-visual>img{width:100%;height:auto}.journey-inline-visual .focus-object{max-width:340px;margin:auto}.journey-end{flex-wrap:wrap}
}
/* State illustrations respond to actual controls, with no continuous loop. */
.project-view .obj-sheet,.project-view .obj-proof,.project-view .obj-event,.project-view .obj-box,.project-view .obj-bug-before,.project-view .obj-bug-after,.project-view .obj-step,.project-view .obj-query { transition:opacity .2s,fill-opacity .2s,transform .3s; }
[data-demo-state="paper"] .obj-proof,[data-demo-state="proof"] .obj-sheet { opacity:.3; }
[data-demo-state="read"] .obj-event:not(:nth-child(2)),[data-demo-state="edit"] .obj-event:not(:nth-child(3)),[data-demo-state="test"] .obj-event:not(:nth-child(4)) { opacity:.25; }
[data-demo-state="parse"] .obj-box:not(:nth-child(2)),[data-demo-state="resolve"] .obj-box:not(:nth-child(3)),[data-demo-state="index"] .obj-box:not(:nth-child(4)) { opacity:.25; }
[data-demo-state="missed"] .obj-bug-after,[data-demo-state="example"] .obj-bug-before { opacity:.25; }
[data-demo-state="proof"] .specimen--funnel .obj-step:not(:nth-child(2)),[data-demo-state="paper"] .specimen--funnel .obj-step:not(:nth-child(3)),[data-demo-state="film"] .specimen--funnel .obj-step:not(:nth-child(4)) { opacity:.25; }
[data-demo-state="arrangement-b"] .obj-spin:nth-child(3n) { opacity:.35; }
[data-demo-state="queries"] .obj-query:nth-child(3n) { fill-opacity:1; }
[data-demo-state="queries"] .obj-query:not(:nth-child(3n)) { fill-opacity:.1; }
::view-transition-group(selected-object) { animation-duration:440ms;animation-timing-function:cubic-bezier(.22,.75,.25,1); }
::view-transition { pointer-events:none; }
::view-transition-old(root) { animation-duration:120ms; }
::view-transition-new(root) { animation-duration:220ms; }
@supports (animation-timeline:scroll()) {
  .studio-header::after { content:"";position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;background:var(--blue);z-index:100;animation:reading-line linear both;animation-timeline:scroll(root); }
  @keyframes reading-line { from{transform:scaleX(0)}to{transform:scaleX(1)} }
}
@media(min-width:1500px) { .question-scene { min-height:580px; }.door h2{font-size:27px}.door--assistants{margin-top:55px} }
@media(max-width:1120px) {
 .studio-header{gap:18px}.studio-header nav{gap:23px}.question-scene{column-gap:17px;min-height:480px}.door--code{margin-left:0}.door h2{font-size:22px}.door-shortcuts{gap:7px 12px;font-size:11px}.scene-heading{gap:24px}.scene-intro{max-width:270px;font-size:13px}.scene-heading h1{font-size:35px}.project-layout{gap:5%}.project-story h1{font-size:38px}.project-answer{font-size:16px}.film-caption>p:last-child{font-size:15px}.door-layout{gap:5%}.project-choice strong{font-size:21px}
}
@media(max-width:800px) {
 .studio-header{padding:0 22px;height:65px;gap:17px}.studio-brand{font-size:20px}.studio-header nav{gap:17px}.studio-header nav a{font-size:13px}.studio-main{padding:0 24px}.scene-heading{display:block;padding-top:24px}.scene-intro{max-width:none;margin-top:13px;font-size:14px}.scene-intro a{display:inline;margin-left:8px}.question-scene{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:35px 30px;margin:25px 0;min-height:0;max-height:none}.door{grid-column:auto!important;grid-row:auto!important;margin:0!important;align-self:start}.door .specimen{height:148px}.door h2{font-size:23px}.door-caption{display:none}.scene-threads{display:none}.scene-footer{margin-top:10px}.home-view{min-height:0}.door-layout{grid-template-columns:1fr;gap:20px;min-height:0}.door-focus h1{font-size:43px;max-width:620px}.door-focus .focus-object{max-width:320px;margin:12px auto}.project-choices{padding-bottom:0}.project-layout{grid-template-columns:1fr;gap:32px}.project-story h1{font-size:43px;max-width:650px}.project-answer{max-width:650px}.interactive-specimen{max-width:330px}.project-media{max-width:650px}.local-connections{flex-wrap:wrap;gap:15px}.local-connections>.eyebrow{width:100%}.index-heading{display:block}.search-label{margin-top:25px;min-width:0}.film-filters{flex-wrap:wrap;gap:14px}.film-row{grid-template-columns:210px 1fr;gap:20px}.film-row h2{font-size:19px}.film-row-takeaway{font-size:14px}.resource-details__grid{gap:25px}.intro-heading h1,.about-heading h1{font-size:44px}
}
@media(max-width:540px) {
 .studio-header{padding:0 18px;gap:14px;flex-wrap:wrap;height:auto;min-height:90px;padding-top:14px;padding-bottom:8px}.studio-brand{margin-right:auto}.studio-header nav{order:3;width:100%;justify-content:space-between;gap:10px}.studio-header nav a{padding:5px 0;font-size:13px}.theme-button{width:32px;height:32px;font-size:21px!important}.studio-main{padding:0 22px}.scene-heading h1{font-size:33px}.scene-intro{font-size:13px}.scene-intro a{display:block;margin:7px 0 0}.question-scene{grid-template-columns:1fr;gap:30px;margin:25px 0}.door{max-width:none;display:grid;grid-template-columns:1fr}.door-open{display:grid;grid-template-columns:128px 1fr;gap:16px;align-items:center;padding:0}.door .specimen{height:92px}.door h2{font-size:21px;line-height:1.2;gap:8px}.open-arrow{font-size:17px}.door-shortcuts{padding:8px 0 0;font-size:12px;gap:14px;justify-content:center}.scene-footer{font-size:11px}.scene-footer>span{max-width:140px}.breadcrumb{min-height:55px}.back-button{font-size:12px!important}.door-focus h1,.project-story h1{font-size:36px}.door-focus .focus-object{max-width:290px}.project-choice strong{font-size:20px}.choice-group .project-choice strong{font-size:18px}.project-answer{font-size:16px}.resource-actions{gap:8px}.resource-action{font-size:13px;padding:10px 11px}.local-connections{display:block}.related-route{margin-top:16px}.resource-details__grid{grid-template-columns:1fr}.index-heading h1{font-size:39px}.project-index-row{gap:14px}.project-index-row strong{font-size:19px}.project-index-row small{font-size:12px}.index-number{min-width:22px}.film-row{grid-template-columns:1fr;gap:15px;padding:24px 0}.film-row .film-visual{max-width:400px}.film-filters{font-size:12px}.film-filters select{font-size:12px}#film-count{margin-left:0}.intro-films{grid-template-columns:1fr;gap:30px}.intro-heading h1,.about-heading h1{font-size:38px}.contributions-details>ul{grid-template-columns:1fr}.dialog-content{padding:24px}.film-visual__action{font-size:13px}.static-index .studio-header nav{order:3}
}
@media(prefers-reduced-motion:reduce) {
 .question-studio *, .question-studio *::before,.question-studio *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
 .studio-header::after { display:none; }
}

/* ---------------------------------------------------------------- short-video strands
   A question opens on its projects' short videos. Under each, one thread joins
   the short video to the full video, the website and the code; on a project
   page the same thread runs down every resource the project has. */
.door-head { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:center;padding:4px 0 26px;border-bottom:1px solid var(--hairline); }
.door-head h1 { font-size:clamp(32px,3.05vw,47px);margin:10px 0 14px;max-width:780px;text-wrap:balance; }
.door-head .focus-caption { font-size:16px;max-width:640px;line-height:1.5; }
.door-head__art { color:var(--object-ink);justify-self:end;width:100%;max-width:400px; }
.door-head__art .focus-object { max-width:none;margin:0; }
.strand-group { font-family:var(--font-sans);font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);margin:30px 0 0; }
.strand-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px;margin-top:24px; }
.strand-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px; }
.strand-grid--1 { grid-template-columns:minmax(0,640px); }
.strand-card { display:flex;flex-direction:column;min-width:0; }
.strand-card .film-visual { border-radius:6px;box-shadow:0 1px 0 var(--hairline),0 18px 36px -26px rgba(20,22,20,.55); }
.strand-card__body { padding-top:15px; }
.strand-card__name { display:inline-flex;gap:8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--object-ink); }
.strand-card__name:hover span:first-child { text-decoration:underline;text-underline-offset:3px; }
.strand-card h2 { font-family:var(--font-serif);font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.22;margin:7px 0 7px; }
.strand-card__take { font-size:14.5px;line-height:1.48;color:var(--quiet); }
.strand { list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px; }
.strand__item { display:flex;align-items:center; }
.strand__item + .strand__item::before { content:"";width:16px;height:1.5px;margin:0 7px;background:color-mix(in srgb,var(--object-ink) 50%,transparent); }
.knot-link { display:inline-flex;align-items:center;gap:7px;padding:6px 0;border:0;background:none;font-size:13px;font-weight:620;color:var(--text);text-align:left;cursor:pointer; }
.knot { flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--object-ink);background:var(--paper);transition:background-color .15s,transform .15s; }
.strand__item--short .knot { background:var(--object-ink); }
.knot-link.is-coming .knot { border-style:dashed; }
.knot-link:hover .knot { transform:scale(1.25);background:var(--object-ink); }
.knot-link:hover .knot-text { text-decoration:underline;text-underline-offset:3px; }
.knot-time { font-weight:500;color:var(--quiet);font-variant-numeric:tabular-nums; }
.knot-go { font-size:10px;color:var(--object-ink); }
.knot-link small { display:none; }
.everything { margin-top:28px;padding-top:18px;border-top:1px solid var(--hairline); }
.strand--vertical { display:block;position:relative;margin-top:10px; }
.strand--vertical::before { content:"";position:absolute;left:4.25px;top:16px;bottom:16px;width:1.5px;background:color-mix(in srgb,var(--object-ink) 40%,transparent); }
.strand--vertical .strand__item { display:block; }
.strand--vertical .strand__item + .strand__item::before { display:none; }
.strand--vertical .knot-link { display:flex;align-items:flex-start;gap:14px;padding:8px 0;font-size:14.5px;line-height:1.35;width:100%;position:relative; }
.strand--vertical .knot { margin-top:4px;position:relative;z-index:1; }
.strand--vertical .knot-go { margin-left:auto;padding-left:12px;margin-top:3px; }
.strand--vertical .knot-link small { display:block;margin-top:2px;font-size:12.5px;font-weight:450;color:var(--quiet); }
.strand--vertical .strand__item--sub .knot { transform:scale(.62); }
.strand--vertical .strand__item--sub .knot-text { font-weight:500; }
.strand--vertical .strand__item--code .knot { border-radius:2px; }
.knot-now { font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--object-ink);margin-left:4px; }
.strand__item.is-current .knot { background:var(--object-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--object-ink) 18%,transparent); }
.strand__item--earlier .knot-text { color:var(--quiet);font-weight:500; }
@media (max-width:1100px) { .strand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .door-head { grid-template-columns:1fr; } .door-head__art { justify-self:start;max-width:340px; } }
@media (max-width:640px) { .strand-grid,.strand-grid--2 { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .knot { transition:none; } }
.door-view .breadcrumb,.project-view .breadcrumb { min-height:50px; }
.door-head { padding-top:0; }
.door-head h1 { font-size:clamp(30px,2.75vw,42px); }
.door-head__art .specimen { max-height:160px; }
.project-view .project-story h1 { font-size:clamp(32px,2.9vw,44px);text-wrap:balance; }
.project-view .everything { margin-top:30px; }
.project-view .interactive-specimen { max-width:440px;margin:30px 0 0; }
.door-videos { display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;font-weight:620;color:var(--object-ink); }
.door-videos .knot { width:8px;height:8px;background:var(--object-ink); }

/* ---------------------------------------------------------------- principles and index */
.scene-heading { align-items:flex-end;padding:22px 0 6px; }
.principles h1 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 44px;margin-top:10px;font-size:clamp(25px,2.25vw,33px);line-height:1.14;letter-spacing:-.025em;max-width:1080px; }
.principle { display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline; }
.principle__n { font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:0;color:var(--paper);background:var(--text);width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;transform:translateY(-4px); }
.principle + .principle .principle__n { background:var(--blue); }
.scene-heading .scene-intro { max-width:300px; }
.scene-footer { display:flex;justify-content:space-between;gap:24px;font-size:13px; }
.scene-footer a { color:var(--text); }
.scene-footer a[data-scroll] { font-weight:650; }
.scene-footer a:hover { text-decoration:underline;text-underline-offset:3px; }

.work-index { border-top:1px solid var(--hairline);margin-top:28px;padding:56px 0 40px; }
.index-intro { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:12px 60px;align-items:end; }
.index-intro .eyebrow { grid-column:1/-1; }
.index-intro h2 { font-family:var(--font-serif);font-size:clamp(30px,2.8vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.08; }
.index-intro p:last-child { color:var(--quiet);font-size:14.5px;line-height:1.5; }
.index-intro a { text-decoration:underline;text-underline-offset:3px; }
.index-cols,.index-row { display:grid;grid-template-columns:minmax(200px,1.05fr) minmax(0,3.3fr);gap:28px; }
.index-row__strand { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.25fr 1.25fr 1fr .9fr;gap:22px;position:relative; }
.index-cols { margin-top:40px;padding-bottom:10px;border-bottom:1px solid var(--hairline);font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet); }
.index-cols { grid-template-columns:minmax(200px,1.05fr) 1.25fr 1.25fr 1fr .9fr;column-gap:22px; }
.index-cols span:first-child { margin-right:6px; }
.index-group { padding-top:26px; }
.index-group h3 { font-family:var(--font-sans);font-size:14px;font-weight:650;color:var(--object-ink);margin:0 0 6px; }
.index-group h3 a:hover { text-decoration:underline;text-underline-offset:3px; }
.index-row { padding:16px 0 18px;border-bottom:1px solid var(--hairline);align-items:start; }
.index-row__name a { font-family:var(--font-serif);font-size:21px;letter-spacing:-.015em; }
.index-row__name a:hover { text-decoration:underline;text-underline-offset:4px; }
.index-row__name p { margin-top:4px;font-size:13.5px;line-height:1.42;color:var(--quiet);max-width:300px; }
.index-row__strand::before { content:"";position:absolute;left:0;right:0;top:calc(var(--thumb-h,58px) / 2);height:1.5px;background:color-mix(in srgb,var(--object-ink) 35%,transparent);z-index:0; }
.cell { position:relative;z-index:1;min-width:0; }
.cell__label { display:none; }
.cell__items { display:flex;gap:8px;flex-wrap:wrap; }
.cell__items--code { flex-direction:column;gap:3px;padding:6px 10px;background:var(--paper);align-self:flex-start;font-size:13px;font-weight:560;width:max-content;max-width:100%; }
.cell__items--code a:hover { text-decoration:underline;text-underline-offset:3px; }
.cell-empty { display:inline-block;padding:6px 10px;font-size:12.5px;color:var(--quiet);background:var(--paper); }
.thumb { position:relative;display:block;width:104px;height:var(--thumb-h,58px);border-radius:4px;overflow:hidden;background:#15191b;box-shadow:0 0 0 1px var(--hairline),0 8px 18px -14px rgba(0,0,0,.6);transition:transform .18s ease,box-shadow .18s ease; }
.thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.thumb:hover,.thumb:focus-visible { transform:translateY(-2px);box-shadow:0 0 0 2px var(--object-ink),0 12px 22px -14px rgba(0,0,0,.6); }
.thumb__time { position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:2px;background:rgba(10,12,12,.82);color:#fff;font-size:10.5px;font-variant-numeric:tabular-nums; }
.thumb__play { position:absolute;left:5px;bottom:3px;color:#fff;font-size:10px;text-shadow:0 1px 3px #000; }
.thumb.is-coming img { filter:saturate(.55) brightness(.9); }
.thumb.is-coming::after { content:"";position:absolute;inset:0;border:1.5px dashed rgba(255,255,255,.55);border-radius:4px; }
.thumb--site { width:132px;background:var(--panel); }
.thumb__site { position:absolute;left:0;right:0;bottom:0;padding:12px 6px 4px;font-size:10.5px;font-weight:650;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.when-dark { display:none!important; }
[data-theme="dark"] .when-dark { display:block!important; }
[data-theme="dark"] .when-light { display:none!important; }
.index-more { display:flex;gap:30px;flex-wrap:wrap;margin-top:28px;font-size:14px;font-weight:600; }
.index-more a:hover { text-decoration:underline;text-underline-offset:3px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .index-row { animation:index-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%; }
    .index-row__strand::before { transform-origin:left;animation:thread-draw linear both;animation-timeline:view();animation-range:entry 10% entry 70%; }
  }
}
@keyframes index-in { from { opacity:0;transform:translateY(14px); } to { opacity:1;transform:none; } }
@keyframes thread-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:1100px) { .index-row,.index-cols { grid-template-columns:1fr; } .index-cols { display:none; } .index-row__strand { grid-template-columns:repeat(2,minmax(0,1fr)); } .cell__label { display:block;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-bottom:5px; } .index-row__strand::before { display:none; } .principles h1 { grid-template-columns:1fr; } }
.scene-heading { display:block;padding:20px 0 4px; }
.principles h1 { grid-template-columns:1fr;gap:4px;font-size:clamp(24px,2.05vw,31px);max-width:none;margin-top:9px; }
.principle { gap:12px; }
.principle__n { width:22px;height:22px;font-size:12px;transform:translateY(-3px); }
.scene-heading .scene-intro { max-width:none;margin-top:12px;font-size:14px; }
.scene-heading .scene-intro a { display:inline;margin-left:10px;font-weight:600; }
.question-studio .knot-link { font-size:13px;font-weight:620;line-height:1.3; }
.question-studio .strand--vertical .knot-link { font-size:14.5px;line-height:1.35; }
.index-row__strand::before { right:calc((100% - 66px) * .9 / 4.4 + 22px); }
@media (min-width:1100px) {
  .home-view .door .specimen { height:clamp(108px,9.6vw,150px); }
  .home-view .question-scene { row-gap:4px;min-height:440px; }
  .home-view .door h2 { font-size:clamp(19px,1.6vw,24px); }
}

/* ---------------------------------------------------------------- home: short videos first */
.home-view--videos { min-height:0; }
.home-view--videos .scene-heading { padding:18px 0 0; }
.home-view--videos .principles h1 { font-size:clamp(21px,1.75vw,26px);gap:14px;margin-top:14px; }
.home-view--videos .principle__n { width:20px;height:20px;font-size:11px; }
.home-view--videos .scene-intro { margin-top:16px; }
.vgrid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 22px;margin:22px 0 18px; }
.vtile { display:flex;flex-direction:column;min-width:0;color:var(--text); }
.vtile--intro { grid-column:span 2;grid-row:span 2; }
.vtile__thumb { position:relative;display:block;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#15191b;box-shadow:0 0 0 1px var(--hairline),0 14px 28px -20px rgba(0,0,0,.65);transition:transform .2s ease,box-shadow .2s ease; }
.vtile__thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.vtile__play { position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:rgba(12,14,14,.62);color:#fff;font-size:15px;opacity:0;transform:scale(.85);transition:opacity .18s ease,transform .18s ease; }
.vtile__time { position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:3px;background:rgba(10,12,12,.84);color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums; }
.vtile:hover .vtile__thumb,.vtile:focus-visible .vtile__thumb { transform:translateY(-3px);box-shadow:0 0 0 2px var(--object-ink),0 20px 34px -22px rgba(0,0,0,.7); }
.vtile:hover .vtile__play,.vtile:focus-visible .vtile__play { opacity:1;transform:none; }
.vtile__name { margin-top:10px;font-family:var(--font-serif);font-size:18px;letter-spacing:-.01em;line-height:1.2; }
.vtile__keys { margin-top:3px;font-size:13px;font-weight:600;color:var(--object-ink);line-height:1.3; }
.vtile--intro .vtile__name { margin-top:14px;font-size:27px; }
.vtile--intro .vtile__keys { font-size:15px; }
.vtile--intro .vtile__play { width:68px;height:68px;margin:-34px 0 0 -34px;font-size:22px;opacity:1;transform:none; }
@media (prefers-reduced-motion: reduce) { .vtile__thumb,.vtile__play { transition:none; } }
@media (max-width:1100px) { .vgrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .vgrid { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px; } .vtile--intro { grid-row:auto; } }

/* YouTube's player, embedded where a published video appears */
.film-player { position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#15191b;border-radius:6px; }
.film-player iframe { position:absolute;inset:0;width:100%;height:100%;border:0;display:block; }
.strand-card .film-player { box-shadow:0 1px 0 var(--hairline),0 18px 36px -26px rgba(20,22,20,.55); }
.film-row .film-player { max-width:520px; }

/* "(my name)" in small type under the name in the header */
.brand-text { display:flex;flex-direction:column;line-height:1.05; }
.name-note { font-family:var(--font-sans);font-size:11px;font-weight:400;letter-spacing:.01em;color:var(--muted);margin-top:3px; }

/* One column: heading, then the player, then everything in the project */
@media (max-width:800px) {
  .project-layout { display:flex;flex-direction:column;gap:0; }
  .project-story { display:contents; }
  .project-story > * { order:0; }
  .project-media { order:1;width:100%;margin:22px 0 30px; }
  .project-story > .everything { order:2; }
}

/* The two principles take the logo's two strands: brick red, then steel blue */
.principle__n { background:#a8443d;color:#fff; }
.principle + .principle .principle__n { background:#4d7fa9; }

/* Home page. Spacing scale: 8, 16, 24, 32, 48, 64, 96. */
.home-view--merged { padding:0 0 96px; }

/* Hero: the two principles beside the introduction */
.hero { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:72px 0 96px; }
.hero__text h1 { display:grid;gap:32px;margin:0;font-size:clamp(28px,2.5vw,38px);line-height:1.22;letter-spacing:-.015em; }
.hero__text .principle { gap:18px; }
.hero__text .principle__n { width:26px;height:26px;font-size:13px;transform:translateY(-5px); }
.hero__text .scene-intro { margin:40px 0 0;max-width:500px;font-size:15.5px;line-height:1.6;color:var(--quiet); }

/* A video and what it shows */
.yt { position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#15191b; }
.yt img { width:100%;height:100%;object-fit:cover;display:block; }
.yt__play { position:absolute;inset:0;margin:auto;width:56px;height:40px;border-radius:10px;background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center;font-size:17px; }
.yt__time { position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:4px;font-variant-numeric:tabular-nums; }
.film-player.yt--big, .hero__intro .film-player, .prow__watch .film-player { border-radius:10px; }
.vkind { display:block;margin-bottom:6px;font-family:var(--font-sans);font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet); }
.vcap { margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--text);max-width:620px; }
.hero__intro .vlines { margin-top:32px; }
.vlines { list-style:none;margin:0;padding:0;display:grid;gap:16px; }
.vline { display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;text-decoration:none;color:var(--text);border-radius:10px;padding:8px;margin:-8px; }
.vline:hover { background:color-mix(in srgb, var(--text) 6%, transparent); }
.vline__thumb { position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#15191b; }
.vline__thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.vline__thumb .yt__time { right:5px;bottom:5px;font-size:10.5px;padding:1px 5px; }
.vline__what { display:block;font-size:14.5px;line-height:1.5; }

/* Topics: cards that open */
.topics-heading { margin:0 0 32px;font-family:var(--font-serif);font-size:32px;font-weight:400;letter-spacing:-.01em;color:var(--text); }
.topics { display:grid;gap:16px; }
.topic { border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--hairline);transition:box-shadow .15s; }
.topic:hover, .topic[open] { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--object-ink, var(--blue)) 50%, transparent); }
.topic > summary { list-style:none;cursor:pointer;display:flex;align-items:center;gap:32px;padding:28px 32px; }
.topic > summary::-webkit-details-marker { display:none; }
.topic__text { flex:1;min-width:0; }
.topic__name { display:block;font-family:var(--font-serif);font-size:28px;line-height:1.15;color:var(--text); }
.topic__projects { display:block;margin-top:8px;font-size:14.5px;color:var(--quiet); }
.topic__thumbs { display:flex;gap:10px;flex:none;align-items:center; }
.topic__thumbs img { width:112px;height:63px;object-fit:cover;border-radius:5px;display:block;flex:none; }
.topic[open] .topic__thumbs { display:none; }
.topic__toggle { flex:none;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:176px;font-size:14.5px;font-weight:650;color:var(--object-ink, var(--blue)); }
.when-open { display:none; }
.topic[open] > summary .when-open { display:inline; }
.topic[open] > summary .when-shut { display:none; }
.chev-ring { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--object-ink, var(--blue)) 16%, transparent); }
.chev { width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s ease; }
.topic[open] > summary .chev { transform:rotate(225deg);margin-top:4px; }
.topic__body { padding:0 32px 16px; }

/* A project, everything visible once its topic is open */
.prow { display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;align-items:start;padding:40px 0 48px;border-top:1px solid color-mix(in srgb, var(--hairline) 70%, transparent); }
.prow__body h3 { margin:0;font-size:30px;line-height:1.15;font-weight:400; }
.prow__body h3 a { color:var(--text);text-decoration:none; }
.prow__body h3 a:hover { color:var(--object-ink, var(--blue)); }
.prow__keys { margin:8px 0 0;font-size:14px;font-weight:650;color:var(--object-ink, var(--blue)); }
.prow__line { margin:16px 0 0;font-size:16px;line-height:1.55;max-width:600px; }
.prow__site { display:block;margin-top:24px;max-width:420px;text-decoration:none;color:var(--blue);font-size:14.5px;font-weight:650; }
.prow__site img { display:block;width:100%;height:auto!important;aspect-ratio:16/9;object-fit:contain!important;border-radius:8px;box-shadow:0 0 0 1px var(--hairline);margin-bottom:10px; }
.prow__site:hover span { text-decoration:underline;text-underline-offset:3px; }
.prow__part { margin-top:40px; }
.prow__part h4 { margin:0 0 16px;font-family:var(--font-sans);font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet); }
.codes { list-style:none;margin:0;padding:0;display:grid;gap:16px; }
.codes li { display:grid;gap:4px; }
.codes a { font-weight:650;color:var(--text);font-size:15px; }
.codes span { font-size:13.5px;color:var(--quiet);line-height:1.5;max-width:600px; }
.codes__none { margin:0;font-size:14px;color:var(--quiet); }

.home-view--merged .scene-footer { display:flex;flex-wrap:wrap;gap:32px;margin-top:48px;padding:0;border:0;font-size:14px; }

@media (max-width:1100px) {
  .hero { grid-template-columns:1fr;gap:48px;padding:48px 0 64px; }
  .topic__thumbs img:nth-child(n+3) { display:none; }
  .prow { grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px; }
}
@media (max-width:800px) {
  .hero { padding:32px 0 48px; }
  .hero__text h1 { gap:24px;font-size:26px; }
  .topic > summary { padding:20px;gap:16px;flex-wrap:wrap; }
  .topic__thumbs { display:none; }
  .topic__name { font-size:23px; }
  .topic__toggle { min-width:0; }
  .topic__body { padding:0 20px 8px; }
  .prow { grid-template-columns:1fr;gap:24px;padding:32px 0; }
  .vline { grid-template-columns:128px minmax(0,1fr);gap:14px; }
}
@media (prefers-reduced-motion:reduce) { .chev,.topic { transition:none; } }
.home-view--merged h2.topics-heading { margin:0 0 32px; }
.prow__watch { position:sticky;top:96px; }
@media (max-width:800px) { .prow__watch { position:static; } }
@media (max-width:800px) {
  .prow { display:flex;flex-direction:column;gap:0; }
  .prow__body { display:contents; }
  .prow__watch { order:1;margin-top:20px; }
  .prow__site, .prow__part { order:2; }
}

/* One type system: serif for every heading, sans for text, plain small labels */
.prow__body h3, .topic__name, .umbrella, .hero__text h1 { font-family:var(--font-serif); }
.prow__body h3 { font-size:30px;font-weight:400;letter-spacing:-.01em; }
.vkind, .prow__part h4, .shared h4 { font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--quiet);margin:0 0 8px; }
.prow__part h4, .shared h4 { font-size:14px;color:var(--text);margin-bottom:16px; }
.vcap { margin-top:20px; }
.umbrella { margin:0 0 24px;font-size:30px;font-weight:400;line-height:1.2;color:var(--text);display:flex;align-items:center;gap:14px; }
.umbrella::before { content:"";width:10px;height:10px;border-radius:50%;background:var(--object-ink, var(--blue)); }
.topics > .umbrella:not(:first-child) { margin-top:64px; }
.shared { padding:32px 0 8px; }
.prow__keys { font-weight:600; }
.hero { padding:72px 0 88px; }
.home-view--merged h2.umbrella { font-family:var(--font-serif);font-size:30px;font-weight:400; }
.home-view--merged .hero__intro p.vcap, .home-view--merged .prow__watch p.vcap { margin-top:20px; }
.prow__site--still { color:var(--quiet);font-weight:500; }