.collection-intro {display:grid;grid-template-columns:1.2fr 1fr;gap:5%;align-items:end;padding:58px 0 44px}
.collection-intro h1 {font-size:clamp(42px,5vw,76px);letter-spacing:-.055em;line-height:1.04;max-width:12ch}
.collection-intro p {max-width:56ch}
.collection-intro .lead {font-size:21px;line-height:1.45}
.preview-note {font-size:12px;color:var(--dim);margin-bottom:0}
#views {display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--line);padding:0 0 17px}
#views button {padding:9px 15px;background:transparent;border-color:transparent}
#views button[aria-current="step"] {border-color:var(--pink);color:var(--pink);background:var(--panel)}
.workbench {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:610px;border-bottom:1px solid var(--line)}
.contact-sheet {padding:25px 30px 25px 0;min-width:0}
.sheet-heading {display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-bottom:14px}
.sheet-heading h2 {font-size:18px}.sheet-heading span {font-size:12px;color:var(--pink)}
.images {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.image {min-width:0;background:var(--inset);border:1px solid var(--line);position:relative;border-radius:3px;overflow:hidden}
.image.focal {border:2px solid var(--pink)}
.image svg {width:100%;height:auto;display:block;aspect-ratio:1.15}
.image-label {padding:5px 8px 8px;display:flex;flex-direction:column;gap:2px}
.image-label strong {font:14px Tech,monospace;font-weight:400}.image-label span {font-size:11px;min-height:15px;color:var(--dim)}
.image.focal .image-label strong {color:var(--pink)}
.image.in-set::after {content:'In set';position:absolute;top:6px;right:6px;font-size:10px;background:var(--panel);color:var(--blue);border:1px solid var(--blue);padding:3px 5px;border-radius:3px}
.group-badge {font-size:11px;color:var(--blue);padding:0 8px 6px}
#group-key {font-size:12px;color:var(--blue);min-height:25px;margin-bottom:7px}
.sheet-caption {color:var(--dim);font-size:12px;margin:14px 0 0}
.explanation {border-left:1px solid var(--line);padding:30px 0 30px 32px;min-width:0}
.explanation h2 {font-size:clamp(25px,2.6vw,36px);line-height:1.12;margin-bottom:17px;letter-spacing:-.025em}
.explanation p {font-size:15px;max-width:58ch}.explanation .small {font-size:12px;color:var(--dim)}
.explanation h3 {font-size:16px;margin:23px 0 10px}
.actions {display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.actions button {padding:9px 12px;font-size:13px;min-height:44px}
.actions .primary {border-color:var(--blue);color:var(--blue)}
.actions .decision {border-color:var(--pink);color:var(--pink)}
.branches {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:19px 0}
.branch {border-top:2px solid var(--blue);padding-top:12px}.branch h3 {margin:0 0 7px}.branch p {font-size:13px;margin-bottom:8px}
.branch button {font-size:12px;padding:7px 9px}
.annotation {padding:10px;background:var(--inset);font-size:12px;line-height:1.7;margin:12px 0 0}
.ref-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.ref-row b {color:var(--blue)}
.candidates {display:flex;gap:12px;margin:20px 0}.candidate {flex:1;border:1px solid var(--line);padding:16px;border-radius:4px}.candidate b{font-size:32px;display:block;font-weight:500}.candidate span{font-size:12px;color:var(--dim)}.candidate.current{border-color:var(--pink)}.candidate.excluded{text-decoration:line-through;opacity:.65}
.decision-state {margin:22px 0;border-left:3px solid var(--pink);padding:5px 0 5px 16px}.decision-state strong {font-size:24px;font-weight:500}.decision-state p {font-size:13px;margin:7px 0 0}
.record {padding:21px 0;display:grid;grid-template-columns:1fr 2.5fr;gap:30px;border-bottom:1px solid var(--line)}
.record h2 {font-size:15px;line-height:1.5;max-width:20ch}.record dl {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}.record dt {color:var(--dim);font-size:11px;margin-bottom:5px}.record dd {margin:0;font-size:14px;overflow-wrap:anywhere}
.announcement {font-size:13px;min-height:48px;padding-top:15px;color:var(--blue);margin:0;max-width:100ch}
.story-controls {display:flex;gap:10px;align-items:center;padding:12px 0 32px;flex-wrap:wrap}.story-controls button {padding:8px 12px;font-size:12px}.story-controls span {font-size:12px;color:var(--dim);margin:0 6px}.story-controls #reset {margin-left:auto;border-color:transparent;text-decoration:underline}
.reading {display:grid;grid-template-columns:1fr 1.5fr;gap:10%;padding:38px 0;border-top:1px solid var(--line)}
.reading h2 {font-size:27px;margin-bottom:16px;letter-spacing:-.03em}.reading p {font-size:15px;max-width:64ch}.review-scopes {margin:0}.review-scopes div {margin-bottom:18px}.review-scopes dt {font-size:16px;color:var(--blue)}.review-scopes dd {margin:7px 0 0;font-size:14px;line-height:1.65;max-width:58ch}
.work-links {list-style:none;margin:0;padding:0}.work-links li{padding:0 0 17px;display:flex;flex-direction:column;gap:5px}.work-links span{color:var(--dim);font-size:12px}
.boundaries {border-top:1px solid var(--line);padding:24px 0 40px}.boundaries p {font-size:13px;max-width:85ch;margin-top:14px}.boundaries summary{cursor:pointer;font-size:14px}
.set-list {padding:0;list-style:none}.set-list li{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.set-list button{font-size:12px;padding:6px 9px}.set-choice{display:flex;align-items:center;gap:14px;margin:12px 0}.set-choice label{font-size:13px}
.draft {padding:15px;border:1px solid var(--blue);margin-top:17px}.draft h3{margin-top:0}.draft p{font-size:13px;margin:0}
:root[data-theme="field-guide"] .collection-intro h1 {font-family:Georgia,serif;letter-spacing:-.05em}
@media(max-width:1000px){main,.masthead,footer{padding-left:25px;padding-right:25px}.workbench{grid-template-columns:1fr 1fr}.contact-sheet{padding-right:20px}.explanation{padding-left:22px}.images{gap:8px}.sheet-heading{display:block}.sheet-heading h2{margin-bottom:6px}.record{grid-template-columns:1fr}.record h2{max-width:none}.collection-intro h1{font-size:52px}}
@media(max-width:700px){main,.masthead,footer{padding-left:18px;padding-right:18px}.masthead{align-items:start;gap:18px;flex-wrap:wrap}.brand span{display:block;margin:5px 0 0}.appearance{font-size:11px;gap:8px}.appearance select{max-width:145px}.collection-intro{grid-template-columns:1fr;padding:32px 0 26px;gap:22px}.collection-intro h1{font-size:clamp(39px,10vw,60px);max-width:15ch}.collection-intro .lead{font-size:19px}.workbench{grid-template-columns:1fr;min-height:0}.contact-sheet{padding:22px 0}.explanation{border-left:0;border-top:1px solid var(--line);padding:26px 0}.image svg{aspect-ratio:1.35;object-fit:cover}.image-label{padding:5px}.image-label span{font-size:10px}.record{gap:14px}.record dl{grid-template-columns:1fr 1fr;gap:18px}.reading{grid-template-columns:1fr;gap:12px;padding:28px 0}.story-controls{gap:6px}.story-controls #reset{margin-left:0}.story-controls button{padding:7px 9px}#views{gap:2px}#views button{font-size:12px;padding:8px 9px}.announcement{min-height:65px}footer{gap:12px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.narration-panel {border:1px solid var(--line);background:var(--panel);padding:18px 20px;margin-bottom:24px;border-radius:5px}
.narration-controls {display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.narration-controls button {padding:9px 14px;font-size:13px}
#narration-play {color:var(--blue);border-color:var(--blue);min-width:140px}
.narration-controls label {display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
#narration-time {font-size:12px;color:var(--dim);margin-left:auto}
.narration-seek {display:flex;align-items:center;gap:12px;font-size:12px;margin-top:15px;color:var(--dim)}
.narration-seek input {flex:1;min-width:70px;accent-color:var(--pink)}
#narration-status {font-size:12px;margin:10px 0;color:var(--dim)}
#narration-transcript summary {font-size:13px;cursor:pointer}
#narration-text {padding-top:14px;max-width:80ch}
#narration-text p {font-size:14px;padding-left:14px;border-left:2px solid transparent}
#narration-text p[aria-current=true] {border-left-color:var(--blue)}
@media(max-width:700px){.narration-panel{padding:14px}.narration-controls{gap:8px}#narration-time{margin-left:0;width:100%}.narration-seek{font-size:11px;gap:7px}}