@font-face{font-family:'Uncut Sans';src:url('../assets/UncutSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f7f3ed;--ink:#192723;--muted:#53645e;--rule:#ccd1c9;--white:#f7f3ed;--green:#1c4a40;--alert:#ffd6bb;--space:clamp(1.25rem,4vw,4rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Uncut Sans',sans-serif;font-size:1.125rem;line-height:1.5}main{max-width:1320px;margin:auto;padding:1.75rem var(--space) 2rem}a{color:inherit;text-underline-offset:.3em}header{display:flex;justify-content:space-between;gap:1.5rem;font-size:1rem;padding-bottom:2rem;border-bottom:1px solid var(--rule)}header>a{text-decoration:none}header>span{color:var(--muted)}.intro{display:grid;grid-template-columns:1fr 352px;gap:6rem;align-items:center;padding:2rem 5% 3rem}.intro-copy{max-width:35rem}h1{font-size:clamp(3.4rem,6.5vw,5.5rem);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0 0 1.75rem}h2,h3{font-weight:400;letter-spacing:-.025em;line-height:1.2}.intro-copy>p{font-size:1.3rem;max-width:32rem}.jump{display:inline-flex;gap:2rem;align-items:center;margin:1.25rem 0;font-size:1.125rem;min-height:44px}.intro-copy .disclosure{font-size:1rem;color:var(--muted);max-width:30rem;margin-top:1.25rem}.phone{width:332px;justify-self:center;padding:7px;border-radius:43px;background:#151a18;box-shadow:10px 24px 45px #17292220}.phone-screen{position:relative;border-radius:36px;overflow:hidden;background:#162420;padding-top:0;color:var(--white)}.island{position:absolute;z-index:1;top:12px;left:50%;transform:translateX(-50%);width:82px;height:21px;border-radius:25px;background:#0d1311}.portrait-stage{position:relative;padding-top:48px;height:280px;background:#243e36}.phone .portrait-stage img{display:block;width:100%;height:auto;aspect-ratio:967/405;object-fit:contain;object-position:50% 50%}.portrait-annotations{inset:0;color:#f7f3ed}.portrait-identity{position:absolute;left:20px;bottom:16px;display:flex;flex-direction:column;line-height:1.4}.portrait-identity strong{font-size:1.4rem;font-weight:400}.portrait-identity span{font-size:1rem;color:#d5e7dd}.phone-layer-switch{display:flex!important;align-items:center;gap:.5rem;min-height:44px;margin:0 0 .5rem!important}.phone-layer-switch input{width:1.1rem;height:1.1rem;accent-color:#d5e7dd;cursor:pointer}.phone-title{padding:1.1rem 1.2rem .2rem}.phone-title>span{font-size:.875rem;letter-spacing:.13em}.phone-title p{margin:.35rem 0;font-size:1.25rem}.audio-area{padding:.75rem 1rem 1.4rem}.audio-area label{display:block;font-size:1rem;margin:0 0 .65rem}audio{width:100%;height:44px;color-scheme:dark}.audio-area p{font-size:.8rem;margin:.6rem 0 0;color:#c6d0c8}.board-heading{display:flex;gap:2rem;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding-top:1.5rem;margin:0 0 3rem}.board-heading h2{font-size:1.75rem;margin:0}.layer-switch{display:flex;align-items:center;gap:.6rem;font-size:1rem;cursor:pointer;min-height:44px}.layer-switch input{accent-color:var(--green);width:1.2rem;height:1.2rem}.shot{margin-bottom:5rem}.shot-heading{display:flex;gap:2rem;align-items:baseline;margin-bottom:1rem}.shot-heading>span{font-size:1rem;min-width:7.5rem;color:var(--muted)}.shot-heading h3{font-size:clamp(1.4rem,2.5vw,2rem);margin:0}figure{margin:0}.frame{position:relative;overflow:hidden;container-type:inline-size;background:#162420;aspect-ratio:967/405}.frame>img{display:block;width:100%;height:100%;object-fit:cover}.overlay{position:absolute;pointer-events:none}.layers-off .overlay{visibility:hidden}figcaption{display:grid;grid-template-columns:1fr 17rem;gap:3rem;margin-top:1rem}figcaption p{margin:0;max-width:65ch;font-size:1.125rem}figcaption>span{font-size:1rem;color:var(--muted)}
.city-layer{inset:0 auto 0 0;width:47%;color:var(--green);background:linear-gradient(90deg,#f2f5eabb 0%,#f2f5ea69 60%,#f2f5ea00 100%)}.map-heading{position:absolute;left:10%;top:11%;z-index:1;display:flex;flex-direction:column}.map-heading strong{font-size:clamp(1.2rem,2.6cqw,2.2rem);font-weight:400;letter-spacing:.13em}.map-heading span{font-size:clamp(1rem,1.7cqw,1.4rem)}#city-geography{position:absolute;left:2%;top:25%;width:96%;height:63%;overflow:hidden}.lake-label{position:absolute;bottom:13%;left:10%;font-size:clamp(.8rem,1.25cqw,1.1rem);font-style:italic}.map-key{position:absolute;bottom:8%;right:7%;font-size:clamp(.8rem,1.25cqw,1.1rem);display:flex;align-items:center;gap:.45rem}.key-dot{width:.4rem;height:.4rem;background:var(--green);display:inline-block}
.intake-layer{left:10%;top:17%;width:20%;color:#edfff3;transform:perspective(650px) rotateY(15deg) skewY(-5deg);text-shadow:0 2px 6px #031912;background:linear-gradient(90deg,#102d257a,#16322930);padding:1.3%}.intake-title{font-size:clamp(1rem,1.65cqw,1.4rem);margin-bottom:1rem}.intake-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.6rem 0;border-top:1px solid #c5ead57d;font-size:clamp(.8rem,1.35cqw,1.15rem)}.tick{font-size:1rem}.in-progress{width:.5rem;height:.5rem;border:1px solid #dcffef;border-radius:50%}.scan-line{margin-top:.5rem;height:2px;width:66%;background:#c5ead5}
.belle-layer{left:7%;top:22%;width:32%;color:#eef5ee;text-shadow:0 2px 6px #071b22}.belle-name{font-size:clamp(1rem,1.7cqw,1.5rem);letter-spacing:.15em}.belle-rule{margin:.6rem 0 1rem;border-top:1px solid #dceee89c;width:65%}.vitals{display:flex;flex-direction:column;line-height:1.15}.vitals>span{font-size:clamp(.9rem,1.5cqw,1.2rem)}.vitals strong{font-size:clamp(2rem,5cqw,4rem);font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:.3rem 0 .6rem}.vitals small{font-size:clamp(.9rem,1.5cqw,1.2rem);letter-spacing:0}.flag{font-size:clamp(.9rem,1.5cqw,1.2rem);color:var(--alert);display:flex;gap:.55rem;align-items:center}.flag span{height:.4rem;width:.4rem;background:var(--alert)}.leader{width:100%;height:auto;overflow:visible;fill:none;stroke:#ddeae78c;stroke-width:1}.ending-shade{inset:0;background:linear-gradient(90deg,transparent 43%,#071b1733 58%,#071b17cc 78%,#071b17d9 100%)}.ending-layer{right:5%;top:auto;bottom:12%;color:#fffaf0;width:30%;text-shadow:0 2px 5px #03100ccc;}.ending-layer>span{font-size:clamp(.9rem,1.5cqw,1.2rem);letter-spacing:.13em}.ending-layer p{font-size:clamp(1.35rem,2.8cqw,2.35rem);line-height:1.18;letter-spacing:-.02em;margin:.5rem 0 0}footer{display:flex;justify-content:space-between;gap:2rem;border-top:1px solid var(--rule);padding-top:1rem;font-size:1rem;color:var(--muted)}footer p{margin:0}a:focus-visible,input:focus-visible,audio:focus-visible{outline:3px solid #a6442f;outline-offset:5px}a:hover{color:#a6442f}::selection{color:var(--paper);background:var(--green)}
@media(max-width:800px){.intro{gap:2rem;padding:3rem 0;grid-template-columns:1fr 270px}.phone{width:270px}.intro-copy>p{font-size:1.125rem}.board-heading{align-items:start;flex-direction:column;gap:.5rem}.shot-heading{flex-direction:column;gap:.35rem}figcaption{grid-template-columns:1fr;gap:.6rem}.shot{margin-bottom:3rem}.intake-layer{top:11%;left:8%;width:25%}.intake-row{padding:.35rem 0}.intake-title{margin-bottom:.5rem}.belle-rule{margin:.35rem 0 .6rem}}
@media(max-width:580px){header{font-size:.875rem;gap:1rem}header>span{max-width:13rem;text-align:right}.intro{grid-template-columns:1fr;padding-top:2.5rem;gap:2rem}.intro-copy .disclosure{margin-bottom:0}.phone{width:280px}.intro-copy>p{max-width:32rem}.jump{margin:.5rem 0}.board-heading{margin-bottom:2rem}.frame{aspect-ratio:1.25}.city>img{object-position:48%}.city-layer{width:62%;background:linear-gradient(90deg,#f2f5eac9,#f2f5ea66 70%,transparent)}#city-geography{top:32%;height:45%;width:100%}.map-heading{top:14%}.map-key{bottom:15%;right:6%}.lake-label{bottom:24%;left:6%}.intake>img{object-position:0%}.intake-layer{left:19%;top:14%;width:35%;padding:2%;transform:skewY(-5deg);background:#11292066}.intake-title{font-size:.875rem;white-space:nowrap}.intake-row{font-size:.875rem;padding:.3rem 0}.belle-layer{left:7%;top:19%;width:48%}.belle-rule{margin:.7rem 0}.vitals strong{font-size:2.6rem}.flag{font-size:1rem}.ending>img{object-position:48%}.ending-layer{top:auto;bottom:8%;right:5%;width:45%;color:#f2f5ed;text-shadow:0 2px 8px #102b29}.ending-layer p{font-size:1.3rem}.ending-shade{background:linear-gradient(90deg,transparent 35%,#071b1780 58%,#071b17dd 82%,#071b17dd 100%)}footer{flex-direction:column;gap:1rem}figcaption p{font-size:1rem}.shot-heading h3{font-size:1.45rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Preserve the selected exterior's full composition, with all three people visible. */
.exterior{aspect-ratio:967/544}.exterior>img{object-position:50% 50%}
@media(max-width:580px){.exterior{aspect-ratio:1.25}.exterior>img{object-position:67% 50%}}

.agriculture-structure{inset:0;width:100%;height:100%;fill:none;stroke:#d7f8e2;stroke-opacity:.33;stroke-width:1.2}.agriculture-layer{width:21%;left:9.5%;top:17%;padding:1.1%}.agriculture-layer .intake-title{font-size:clamp(.85rem,1.4cqw,1.15rem);border-bottom:1px solid #c5ead57d;padding-bottom:.5rem;margin-bottom:.6rem}.agriculture-crop{font-size:clamp(1.05rem,1.9cqw,1.6rem)}.agriculture-layer p{font-size:clamp(.8rem,1.2cqw,1rem);line-height:1.35;margin:.45rem 0 0}.companion{aspect-ratio:967/439}.companion-layer{left:4.5%;bottom:5%;width:37%;color:#f7f3ed;text-shadow:0 2px 6px #03100c}.companion-layer p{font-size:clamp(1rem,1.85cqw,1.5rem);line-height:1.35;margin:0}
@media(max-width:580px){.agriculture-layer{left:19%;top:17%;width:35%;padding:2%;background:#11292099}.agriculture-layer .intake-title{font-size:.8rem;white-space:normal;margin-bottom:.4rem;padding-bottom:.35rem}.agriculture-crop{font-size:1rem}.agriculture-layer p{font-size:.8rem;line-height:1.25}.companion{aspect-ratio:1.1}.companion>img{object-position:49% 50%}.companion-layer{left:5%;right:5%;bottom:5%;width:auto}.companion-layer p{font-size:1rem;line-height:1.4}}

/* Wide portrait study: photographic identity and a single personal connection. */
@font-face{font-family:'Bodoni Moda';src:url('../assets/BodoniModa-Regular-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../assets/SourceSerif4-Regular-400.ttf') format('truetype');font-weight:400;font-display:swap}
.demetria-intro{--portrait-ink:#f5efe3;background:#101816;color:var(--portrait-ink);margin:0 calc(-1 * var(--space)) 4rem;padding:2.5rem var(--space) 1.6rem}
.demetria-heading{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.demetria-heading h1{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(3rem,6vw,5.5rem);letter-spacing:-.035em;line-height:1.12;margin:0;font-weight:400}
.demetria-heading p{font-size:1.125rem;color:#d6dfd8;margin:0}
.demetria-canvas{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:967/405;overflow:hidden}
.demetria-image{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.demetria-veil{inset:0;background:linear-gradient(90deg,#06141180,transparent 30%,transparent 72%,#061411a6),linear-gradient(0deg,#0614115c,transparent 45%)}
.demetria-identity{left:4%;bottom:12%;width:27%;color:var(--portrait-ink);text-shadow:0 2px 12px #091a17}
.demetria-identity h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:clamp(2.25rem,4.6cqw,3.75rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 .6rem}
.demetria-identity p{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1rem,1.55cqw,1.25rem);line-height:1.4;margin:0}
.demetria-connection{inset:0;width:100%;height:100%;stroke:#f5efe3b8;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.demetria-connection circle{fill:#f5efe3;stroke:none}
.demetria-belle{right:4%;bottom:11%;width:20%;color:var(--portrait-ink);text-shadow:0 2px 10px #061411}
.demetria-belle h3{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(1.6rem,2.6cqw,2.25rem);line-height:1.1;font-weight:400;margin:0 0 .65rem;letter-spacing:0}
.demetria-belle p{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1rem,1.6cqw,1.3rem);line-height:1.42;margin:0;max-width:22ch;text-wrap:pretty}
.demetria-actions{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.25rem 0;border-bottom:1px solid #f5efe32b}
.conversation-entry{display:flex;align-items:center;gap:1.4rem}
.talk-button{font:inherit;font-size:1.125rem;background:none;color:var(--portrait-ink);padding:.5rem 0;border:0;display:inline-flex;gap:.7rem;align-items:center;cursor:pointer;min-height:44px}
.talk-button svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.2}
.talk-button .talk-arrow{margin-left:.5rem;transition:transform .2s}
.talk-button:hover .talk-arrow{transform:translateX(4px)}
.talk-button:hover{color:#d8eddf}
.conversation-entry>span{color:#bac8c0;font-size:.875rem}
.portrait-switch{display:flex;gap:.6rem;align-items:center;font-size:1rem;min-height:44px;cursor:pointer}.portrait-switch input{accent-color:#c8dacd;width:1.1rem;height:1.1rem}
.conversation-preview{padding:1.75rem 0;border-bottom:1px solid #f5efe32b;max-width:42rem}.conversation-preview[hidden]{display:none}.conversation-preview h3{font:400 1.75rem/1.25 'Instrument Serif',Georgia,serif;margin:0 0 1rem}.conversation-preview ul{padding-left:1.25rem;margin:0;line-height:1.8}.conversation-preview p{font-size:1rem;color:#bac8c0;margin:1.25rem 0 0;max-width:60ch}
.demetria-listening{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.3rem 0 .5rem}.demetria-listening label{font-size:1rem}.demetria-listening p{font-size:.875rem;color:#bac8c0;margin:.25rem 0 0}.demetria-listening audio{width:min(28rem,55%);color-scheme:dark}
.demetria-disclosure{font-size:.875rem;color:#bac8c0;margin:1rem 0 0}
button:focus-visible{outline:2px solid #d8eddf;outline-offset:6px}
@media(max-width:800px){.demetria-canvas{aspect-ratio:967/405}.demetria-belle{width:25%;right:3%;bottom:7%}.demetria-identity{left:3%;bottom:7%}.demetria-connection{display:none}.demetria-heading{gap:1rem}.demetria-heading p{font-size:1rem}.conversation-entry{gap:.75rem}}
@media(max-width:580px){.demetria-intro{padding-top:1.75rem;margin-bottom:2.5rem}.demetria-heading{align-items:start;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}.demetria-heading h1{font-size:3.25rem}.demetria-canvas{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:1.25rem;overflow:visible}.demetria-image{grid-column:1/-1;aspect-ratio:967/405;height:auto;object-fit:contain}.demetria-veil,.demetria-connection{display:none}.demetria-identity,.demetria-belle{position:static;inset:auto;width:auto;text-shadow:none;align-self:start;padding-bottom:1.25rem}.demetria-identity h2{font-size:2rem}.demetria-identity p{font-size:1rem}.demetria-belle h3{font-size:1.5rem;line-height:1.47;margin-bottom:.6rem}.demetria-belle p{font-size:1rem;line-height:1.4}.demetria-actions{align-items:start;gap:.75rem;flex-wrap:wrap;padding:.75rem 0}.conversation-entry{align-items:start;gap:0;flex-direction:column}.conversation-entry>span{padding-left:1.95rem}.portrait-switch{font-size:.875rem;margin-top:.15rem}.demetria-listening{flex-direction:column;align-items:start;gap:1rem}.demetria-listening audio{width:100%}.demetria-disclosure{line-height:1.45}}
@media(prefers-reduced-motion:reduce){.talk-button .talk-arrow{transition:none}}

/* User-directed AR lens treatment, with story-grounded labels. */
.demetria-hud{--ar-cyan:#00e5ff;--ar-dim:rgba(0,229,255,.65);--text-ar:#fff;inset:0}
.ar-reticle{position:absolute;left:86.6667%;top:44.334%;width:24px;height:24px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.ar-reticle::before,.ar-reticle::after{content:'';position:absolute;width:6px;height:6px;border:1px solid var(--ar-cyan)}
.ar-reticle::before{top:0;left:0;border-right:0;border-bottom:0}.ar-reticle::after{bottom:0;right:0;border-left:0;border-top:0}
.ar-center-dot{width:4px;height:4px;background:var(--ar-cyan);border-radius:50%;box-shadow:0 0 8px var(--ar-cyan)}
.ar-connection{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ar-leader-line{stroke:var(--ar-cyan);stroke-width:.75;fill:none;opacity:.8;vector-effect:non-scaling-stroke}
.ar-data-block{position:absolute;left:76%;right:3%;top:60%;font-family:'SFMono-Regular','SF Pro Mono','JetBrains Mono',Menlo,Consolas,monospace;color:var(--text-ar);padding-left:8px;text-shadow:0 2px 7px #061411}
.ar-status-row{display:flex;gap:.5rem;align-items:center;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ar-cyan);margin-bottom:.4rem}
.ar-blink-tag{width:4px;height:4px;border-radius:50%;background:var(--ar-cyan);animation:ar-blink 1.2s steps(2) 3}
.ar-data-block h3{font-family:inherit;font-size:1rem;font-weight:600;margin:0 0 .5rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.ar-data-block p{font-family:inherit;font-size:clamp(.875rem,1.25cqw,1rem);line-height:1.45;margin:0;max-width:26ch;color:#f1f7f6;text-wrap:pretty}
@keyframes ar-blink{50%{opacity:.2}}
@media(max-width:800px){.ar-data-block{left:73%;right:2%;top:48%;padding-left:0}.ar-connection{display:none}.ar-reticle{top:42%;left:86%}.ar-data-block p{font-size:.875rem}.ar-status-row{font-size:.625rem}}
@media(max-width:580px){.demetria-hud{position:static;grid-column:2;align-self:start;padding-bottom:1.25rem}.ar-reticle,.ar-connection{display:none}.ar-data-block{position:static;padding:0;text-shadow:none}.ar-data-block p{font-size:1rem;line-height:1.4}.ar-status-row{font-size:.6875rem}.ar-data-block h3{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.ar-blink-tag{animation:none}}

/* Unified character annotations and an audio control strip. */
.demetria-intro{--ar-cyan:#00e5ff;--ar-mono:'SFMono-Regular','SF Pro Mono','JetBrains Mono',Menlo,Consolas,monospace}
.demetria-identity{padding-top:1rem;bottom:12%;width:25%;font-family:var(--ar-mono)}
.demetria-identity::before{content:'';position:absolute;left:0;top:0;width:3.5rem;height:.45rem;border-top:.75px solid var(--ar-cyan);border-right:.75px solid var(--ar-cyan);opacity:.8}
.demetria-identity h2{font-family:inherit;font-size:clamp(1.125rem,1.65cqw,1.375rem);font-weight:500;text-transform:uppercase;letter-spacing:.075em;line-height:1.3;margin:0 0 .5rem}
.demetria-identity p{font-family:inherit;font-size:clamp(.875rem,1.25cqw,1rem);line-height:1.45;max-width:24ch;color:#f1f7f6}
.talk-button{border:1px solid #c8dacd66;border-radius:6px;padding:.7rem 1rem;background:#ffffff05;transition:border-color .2s,background-color .2s}
.talk-button:hover,.talk-button[aria-expanded=true]{border-color:var(--ar-cyan);background:#00e5ff0a;color:#fff}
.demetria-listening{display:block;padding:1.4rem 0 .5rem}
.trailer-player{display:flex;align-items:center;gap:1.25rem;width:100%}.trailer-player[hidden]{display:none}
.trailer-caption{flex:0 0 15rem}.trailer-caption>span{font-size:1rem}.trailer-caption #audio-status{font-size:.875rem;line-height:1.4;margin:.25rem 0 0;color:#bac8c0}
.audio-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:0;padding:10px;color:#f1f7f6;background:transparent;cursor:pointer;border-radius:50%}
.audio-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;overflow:visible}
.audio-button:hover{color:var(--ar-cyan)}.audio-button:disabled{opacity:.4;cursor:not-allowed}
.audio-play{background:#e8f2ec;color:#11251f}.audio-play:hover{background:var(--ar-cyan);color:#11251f}.audio-play .play-glyph{fill:currentColor;stroke:none}.pause-glyph{display:none;stroke-width:3}
.trailer-player.is-playing .play-glyph{display:none}.trailer-player.is-playing .pause-glyph{display:block}
.audio-timeline{flex:1;min-width:0;padding-top:12px}
.audio-times{display:flex;justify-content:space-between;color:#c6d7cd;font:400 .75rem/1.4 var(--ar-mono);font-variant-numeric:tabular-nums;margin-top:-4px}
.audio-timeline input,.audio-volume input{--progress:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:32px;margin:0;cursor:pointer;background:linear-gradient(90deg,var(--ar-cyan) var(--progress),#52635b var(--progress)) center/100% 2px no-repeat;border:0;border-radius:0;touch-action:pan-y}
.audio-timeline input::-webkit-slider-thumb,.audio-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;background:#e8f2ec;border-radius:50%;border:0}
.audio-timeline input::-moz-range-thumb,.audio-volume input::-moz-range-thumb{width:10px;height:10px;background:#e8f2ec;border-radius:50%;border:0}
.audio-timeline input:disabled{opacity:.45;cursor:wait}.audio-volume{display:flex;align-items:center;gap:.35rem}.audio-volume input{width:64px;--progress:100%}.muted-slash{display:none}.trailer-player.is-muted .sound-waves{display:none}.trailer-player.is-muted .muted-slash{display:block}
.demetria-intro :is(button,input):focus-visible{outline:2px solid var(--ar-cyan);outline-offset:5px}
@media(max-width:800px){.trailer-player{gap:.7rem;flex-wrap:wrap}.trailer-caption{flex-basis:100%}.audio-volume input{width:54px}.demetria-identity{bottom:10%;width:30%}}
@media(max-width:580px){.demetria-identity{width:auto;padding-top:1rem;bottom:auto}.demetria-identity h2{font-size:1.125rem}.demetria-identity p{font-size:1rem}.demetria-actions{gap:1rem}.conversation-entry{gap:.45rem}.conversation-entry>span{padding-left:0}.portrait-switch{margin-top:.3rem}.audio-volume input{width:48px}.audio-times{font-size:.75rem}.audio-timeline{min-width:5rem}.demetria-listening{padding-top:1.25rem}}
@media(prefers-reduced-motion:reduce){.talk-button{transition:none}}

/* Listener-facing annotations with a transparent city model. */
.pura-study{background:#101816;color:#edf3ef;margin-left:calc(-1 * var(--space));margin-right:calc(-1 * var(--space));padding:2rem var(--space);--model-cyan:#00e5ff;--model-mono:'SFMono-Regular','SF Pro Mono','JetBrains Mono',Menlo,Consolas,monospace}
.pura-study .shot-heading{margin-bottom:1.5rem}.pura-study .shot-heading h3{font-size:1.5rem}.pura-study figcaption{border-top:1px solid #b8d1c329;padding-top:1rem;gap:1.5rem}.pura-study figcaption>span{color:#adbbb4}.pura-study figcaption strong{font-weight:400;color:white}
.city-model{aspect-ratio:967/439;isolation:isolate;background:#0c1817}.city-model>img{object-fit:contain;object-position:50% 50%}
.city-dim{inset:0;background:linear-gradient(90deg,#06131180,#06131140 45%,#0613110a 72%)}
.pura-model-layer{inset:0;color:#f2f7f5}.pura-heading{position:absolute;left:5%;top:7%;z-index:2;text-shadow:0 2px 8px #071514}.pura-heading h4{font:500 1.375rem/1.2 var(--model-mono);letter-spacing:.08em;text-transform:uppercase;margin:0}.pura-heading p{font:400 clamp(.875rem,1.25cqw,1rem)/1.4 var(--model-mono);margin:0;color:#e2eae5}
.pura-model{position:absolute;inset:0}.pura-model>svg{width:100%;height:100%;display:block}.blueprint-lines,.blueprint-selected,.blueprint-callout{fill:none;stroke:white;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.blueprint-lines{stroke-opacity:.4}.blueprint-selected,.blueprint-callout{stroke:var(--model-cyan);stroke-opacity:.9}.pura-model path{vector-effect:non-scaling-stroke}
.pura-annotation{position:absolute;isolation:isolate;color:#fff;text-shadow:0 2px 3px #02100fe6;padding:0;border:0}
/* Feathered local exposure adjustment, with no panel edge over the still. */
.pura-annotation::before{content:'';position:absolute;z-index:-1;inset:-2.5rem -2rem;background:radial-gradient(ellipse closest-side at center,#04110fe0 0%,#04110fbf 48%,#04110f66 68%,transparent 100%);pointer-events:none}
.pura-annotation h4{font:500 1.5rem/1.3 var(--model-mono);letter-spacing:.075em;text-transform:uppercase;color:#fff;margin:0 0 .65rem}
.pura-annotation p{font:400 1.25rem/1.45 var(--model-mono);letter-spacing:0;margin:0;color:#fff;max-width:24ch}
.pura-center{left:5%;top:68%;width:34%}.pura-center p{font:400 1.125rem/1.5 var(--model-mono);max-width:29ch}.pura-center p span{white-space:nowrap}
.pura-glass{left:72%;top:13%;width:25%}.pura-resident{left:52.7%;top:76%;width:30%}
.pura-detail-lines{fill:none;stroke:white;stroke-width:.75;stroke-opacity:.65;stroke-linecap:round;stroke-linejoin:round}
.pura-study figcaption{grid-template-columns:1fr}
@media(min-width:801px) and (max-width:1050px){.pura-annotation p{font-size:1.25rem}.pura-center p{font-size:1rem}.pura-annotation h4{font-size:1.375rem}.pura-center{top:67%}.pura-resident{top:73%}}
@media(max-width:800px){.city-model{aspect-ratio:auto;overflow:visible}.city-model>img{height:auto;aspect-ratio:967/439}.city-dim{bottom:auto;height:auto;aspect-ratio:967/439}.pura-model-layer{position:relative;display:grid;grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 0 .5rem}.pura-model{position:absolute;top:auto;bottom:100%;height:auto;aspect-ratio:967/439;width:100%}.pura-heading,.pura-annotation{position:static;width:auto;text-shadow:none}.pura-heading{order:0}.pura-heading h4{font-size:1.125rem}.pura-heading p{display:none}.pura-center{order:1}.pura-glass{order:2}.pura-resident{order:3}.pura-annotation::before{display:none}.pura-annotation h4{font-size:1.375rem}.pura-annotation p{font-size:1.25rem;line-height:1.4}.pura-center p{font-size:1rem;max-width:none}.pura-annotation br{display:none}.pura-study figcaption{font-size:1rem}.pura-study{padding-top:1.5rem;padding-bottom:1.5rem}.blueprint-callout,.pura-detail-lines{display:none}}

/* In a narrow desktop pane, keep the locator on the image and let facts breathe below. */
@media(min-width:581px) and (max-width:800px){.pura-model-layer{position:static;padding-top:1.5rem;gap:1rem}.pura-model{top:0;bottom:auto}.pura-heading{position:absolute;left:5%;top:6%;text-shadow:0 2px 5px #02100f}.pura-center{position:absolute;left:5%;top:30cqw;width:43%;text-shadow:0 2px 3px #02100fe6}.pura-center h4{font-size:1.25rem;margin-bottom:.35rem}.pura-center p{font-size:1rem;line-height:1.35}.pura-center::before{display:block}.blueprint-callout{display:block}.pura-glass p,.pura-resident p{max-width:none}}

/* Belle uses the same AR annotation family as the opening Demetria portrait. */
.belle-study{background:#101816;color:#edf3ef;margin-left:calc(-1 * var(--space));margin-right:calc(-1 * var(--space));padding:2rem var(--space);--belle-mono:'SFMono-Regular','SF Pro Mono','JetBrains Mono',Menlo,Consolas,monospace}
.belle-study .shot-heading h3{font-size:1.5rem}
.belle-frame{aspect-ratio:967/405}.belle-frame>img{object-fit:contain}
.belle-connections{inset:0;width:100%;height:100%;fill:none;stroke:#00e5ff;stroke-width:.75;opacity:.8}.belle-connections path{vector-effect:non-scaling-stroke}.belle-connections circle{fill:#00e5ff;stroke:none}
.belle-note{font-family:var(--belle-mono);color:#f1f7f6;text-shadow:0 2px 7px #061411}
.belle-note h4{font:500 1.125rem/1.35 var(--belle-mono);text-transform:uppercase;letter-spacing:.075em;margin:0 0 .6rem;color:#fff}
.belle-note p{font:400 1.125rem/1.45 var(--belle-mono);margin:0;text-wrap:pretty}
.belle-personal{left:7%;top:17%;width:29%}.belle-growing{right:4%;top:23%;width:25%}.belle-city{left:5%;bottom:6%;width:30%}
@media(min-width:801px) and (max-width:1050px){.belle-note h4,.belle-note p{font-size:1rem}.belle-personal{top:12%;width:32%}.belle-growing{width:28%;top:17%}.belle-city{width:34%;bottom:5%}}
@media(max-width:800px){.belle-frame{aspect-ratio:auto;overflow:visible;display:grid;gap:1.5rem;background:transparent}.belle-frame>img{height:auto;aspect-ratio:967/405}.belle-connections{display:none}.belle-note{position:static;width:auto;text-shadow:none}.belle-note h4,.belle-note p{font-size:1.125rem}.belle-note p{max-width:45ch}.belle-note br{display:none}}

/* Tour overlays (Oct 2026). Demetria's tour of Pura in one voice: serif titles, italic notes, tracked labels, cyan pointers.
   Positions are percentages of each frame; type scales with the frame (cqw) and is clamped for readability. */
.tour{inset:0;color:#fbf6ec;font-family:'Instrument Sans',system-ui,sans-serif;text-shadow:0 1px 14px #061411e6}
.tour-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tour-line{fill:none;stroke:#7ff0ff;stroke-width:.75;stroke-opacity:.8;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.tour-line.on{stroke-dashoffset:0}
.tour-title,.tour-note{position:absolute}
.tour-title h2{margin:0;font:400 clamp(1.5rem,4.17cqw,3.5rem)/1 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.tour-label{margin:0 0 .4em 1px;font:500 clamp(.5625rem,.99cqw,.875rem)/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#fbf6eccc}
.tour-title .tour-label{margin:.65em 0 0 1px}
.tour-label.is-cyan{color:#7ff0ff}
.tour-note h3{margin:0 0 .15em;font:400 clamp(1.125rem,2.5cqw,2.125rem)/1.05 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.tour-note>p:not(.tour-label),.tour-title>p:not(.tour-label){margin:0;font:italic 400 clamp(.875rem,1.77cqw,1.5rem)/1.24 'Instrument Serif',Georgia,serif;color:#fbf6ecf0}
.tour-ring{position:absolute;width:1.875cqw;height:1.875cqw;min-width:14px;min-height:14px;translate:-50% -50%;border:1px solid #7ff0ffb3;border-radius:50%}
.tour-ring::after{content:'';position:absolute;inset:50% auto auto 50%;width:4px;height:4px;translate:-50% -50%;border-radius:50%;background:#7ff0ff;box-shadow:0 0 10px #7ff0ff}
.tour-ring.is-dot{border:0}
[data-at]{opacity:0;transform:translateY(6px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-at].on{opacity:1;transform:none}
.tour-ring[data-at]{transform:scale(1.8)}.tour-ring[data-at].on{transform:none}
.tour-line[data-at]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-at],.tour-line{transition:none}}

/* Demetria */
.demetria-veil{background:linear-gradient(90deg,#06141199,transparent 32%,transparent 68%,#061411b8),linear-gradient(0deg,#06141173,transparent 48%)}
.td-title{left:4.17%;bottom:9.95%}.tour .td-title .tour-label+.tour-label{margin-top:.45em}
.td-ring{left:86.67%;top:44.28%}
.td-note{left:76.25%;top:60.7%;width:20.4%}
.td-past{left:4.17%;top:22%;width:21%}.td-eye{left:36.8%;top:31.5%}.td-eye-line{stroke-dasharray:900;stroke-dashoffset:900}.tour .td-past>p+p{margin-top:.6em}
/* Pura: Belle's map of the domes */
.city-model .city-dim{background:linear-gradient(90deg,#06131194,#06131138 40%,transparent 60%),linear-gradient(270deg,#06131173,transparent 34%),linear-gradient(180deg,#06131180,transparent 38%),linear-gradient(0deg,#0613118c,transparent 38%)}
.pura-domes{inset:0}.pura-domes>svg{width:100%;height:100%;display:block}.pura-domes path{vector-effect:non-scaling-stroke}
.tour-map{fill:none}.tp-restricted{stroke:#c9d3cf;stroke-opacity:.55;stroke-width:.75;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.tp-dots circle{fill:#fff;fill-opacity:.75}.tp-sel-ring,.tp-sel-leader{stroke:#7ff0ff;stroke-width:1;stroke-opacity:.85;vector-effect:non-scaling-stroke}.tp-sel-dot{fill:#7ff0ff}
.tp-title{left:4.17%;top:7.78%}
.tp-domenote{left:3.96%;top:67.96%;width:31.25%}
.tp-sky{left:53.33%;top:5.49%}.tp-sky-note{left:71.88%;top:16.93%;width:24.17%}
.tp-walker{left:45.21%;top:46.91%}.tp-walker-note{left:52.71%;top:76.43%;width:24.17%}
.tp-hit{inset:0}
.tp-dome{position:absolute;width:2.92%;height:6.41%;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto}
.tp-dome:focus-visible{outline:1px solid #7ff0ff;outline-offset:2px}
@media(max-width:800px){.pura-domes,.tp-hit{bottom:auto;height:auto;aspect-ratio:967/439}}

/* Belle */
.tb-title{left:4.17%;top:8.46%;width:17.9%}.tb-title>p{margin-top:.6em}
.tb-ring{left:49.69%;top:63.18%}
.tb-grow{right:3.75%;top:9.95%;width:20.8%;text-align:right}
.tb-purpose{left:4.17%;top:79.1%}
.tour .tour-note>.tb-help{font-size:clamp(1.5rem,3.75cqw,3.125rem);line-height:1;color:#fbf6ec}

/* Rainforest: the next stop on the tour, with "You are here" moved to this dome. Notes sit on the giant trunk at right; the map sits in the quieter forest at left. */
.rainforest-veil{inset:0;background:linear-gradient(0deg,#0614118c,transparent 42%),linear-gradient(90deg,#06141166,transparent 38%)}
.tr-title{left:4.17%;bottom:9.95%;width:34%}.tr-title>p{margin-top:.6em}
.tr-ring{left:41.35%;top:74.4%}
.tr-note{left:66.67%;top:9.95%;width:20%}
.tr-test{left:66.67%;top:29.9%;width:20%}.tr-research{left:66.67%;top:62%;width:22%}
.tour .tr-here{position:absolute;left:4.17%;top:36.3%;margin:0}
.tr-map{position:absolute;left:4.17%;top:41%;width:16%;height:auto}
@media(max-width:800px){.rainforest-frame{aspect-ratio:auto;overflow:visible;display:grid;gap:1.5rem;background:transparent}.rainforest-frame>img{height:auto;aspect-ratio:967/405}.rainforest-veil{bottom:auto;height:auto;aspect-ratio:967/405}}

/* "You hear": the spoken line under each frame, so the overlay visibly adds what the narration does not */
.heard{margin:1rem 0 0;max-width:62ch;font:italic 400 1.125rem/1.45 'Instrument Serif',Georgia,serif;color:#fbf6ecd9}
.heard span{display:block;margin-bottom:.35rem;font:500 .6875rem/1.3 'Instrument Sans',system-ui,sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:#a9b8b2}
figcaption .heard{margin-top:.75rem}

/* One dark page: same ground, headings and captions as the overlays */
body{background:#101816;color:#eef3f0;--ar-cyan:#00e5ff;--portrait-ink:#f5efe3}
header{border-bottom-color:#ffffff1f}header>a{color:inherit}header>span{color:#a9b8b2}
.board-heading{border-top-color:#ffffff1f}
.board-heading h2,.shot-heading h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:0;color:#fbf6ec}
.board-heading h2{font-size:clamp(1.75rem,3vw,2.5rem)}.shot-heading h3{font-size:clamp(1.5rem,2.4vw,2.125rem)}
.layer-switch input{accent-color:#7ff0ff}
figcaption,.pura-study figcaption{display:block;border-top:1px solid #ffffff1f;padding-top:1rem}
figcaption p{font:italic 400 1.1875rem/1.4 'Instrument Serif',Georgia,serif;color:#fbf6ece0}
figcaption strong,.pura-study figcaption strong{font-style:normal;color:#fbf6ec}
footer{border-top-color:#ffffff1f;color:#a9b8b2}footer a{color:inherit}

/* Trailer: a dark listen strip under the title. While it plays and its place has scrolled away, it docks to the bottom of the screen. */
.trailer-player{box-sizing:border-box;background:transparent;color:#fbf6ec;padding:1.25rem 0;border-radius:0;border-top:1px solid #fbf6ec1a;border-bottom:1px solid #fbf6ec1a}
.trailer-caption>span{display:block;font:400 1.75rem/1.1 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.trailer-caption #audio-status{margin:.5rem 0 0;font:500 .6875rem/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#a9b8b2}
.trailer-player .audio-button{color:#fbf6ec}.trailer-player .audio-button:hover{color:#7ff0ff}
.trailer-player .audio-play{width:56px;height:56px;background:transparent;border:1px solid #7ff0ff;color:#7ff0ff;transition:background-color .2s,color .2s}
.trailer-player .audio-play:hover,.trailer-player.is-playing .audio-play{background:#7ff0ff;color:#101816}
.trailer-player .audio-times{font:400 .75rem/1.4 'Instrument Sans',system-ui,sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#a9b8b2}
.trailer-player input[type=range]{background:linear-gradient(90deg,#7ff0ff var(--progress),#fbf6ec33 var(--progress)) center/100% 1px no-repeat}
.trailer-player input[type=range]::-webkit-slider-thumb{background:#fbf6ec}.trailer-player input[type=range]::-moz-range-thumb{background:#fbf6ec}
.audio-close{display:none}
.trailer-player.is-docked{position:fixed;z-index:50;left:50%;bottom:12px;translate:-50% 0;width:min(1206px,calc(100% - 24px));padding:.5rem 1rem;gap:1rem;background:#0f1714eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fbf6ec1f;border-radius:6px}
.is-docked .trailer-caption{flex:0 0 auto}.is-docked .trailer-caption>span{font-size:1.125rem}.is-docked #audio-status{display:none}
.is-docked .audio-play{width:40px;height:40px;padding:8px}.is-docked .audio-timeline{padding-top:6px}
.is-docked .audio-close{display:inline-flex}
body.player-docked{padding-bottom:88px}
@media(max-width:580px){.trailer-player.is-docked{bottom:0;width:100%;border-radius:0;border-width:1px 0 0;flex-wrap:nowrap}.is-docked .audio-volume{display:none}.is-docked .trailer-caption>span{font-size:1rem}}

/* Page structure: setup line, then one capability head per frame (what a visual audiobook offers), one spacing rhythm */
.setup{margin:1.25rem 0 5rem;max-width:52ch;font:italic 400 clamp(1.125rem,1.6vw,1.375rem)/1.4 'Instrument Serif',Georgia,serif;color:#fbf6ece0}
.cap-head{margin:0 0 1.5rem}
.cap-label{margin:0 0 .6rem;font:500 .6875rem/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#a9b8b2}
.cap-line{margin:0;max-width:30ch;font:400 clamp(1.75rem,3.2vw,3rem)/1.1 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.demetria-intro{margin-bottom:10rem}.shot{margin-bottom:10rem}
.pura-study,.belle-study{padding-top:0;padding-bottom:0}
figcaption,.pura-study figcaption{border-top:0;padding-top:0}
.heard,figcaption .heard{margin-top:1.75rem}
.tp-title>p:not(.tour-label){margin-top:.35em}
footer a{white-space:nowrap}
@media(max-width:580px){.setup{margin-bottom:3rem}.demetria-intro,.shot{margin-bottom:6rem}}

/* Type and details: two families (Instrument Serif, Instrument Sans), one cyan, one hairline color */
body{font-family:'Instrument Sans',system-ui,sans-serif;--ar-cyan:#7ff0ff}.demetria-intro{--ar-cyan:#7ff0ff}
header{align-items:center;border-bottom-color:#fbf6ec1a}
header>a,footer a,.overlay-switch,.demetria-heading p{font:500 .6875rem/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase}
header>a{text-decoration:none;color:#fbf6ec}
.overlay-switch{display:flex;align-items:center;gap:.6rem;min-height:44px;cursor:pointer;color:#a9b8b2}
.overlay-switch input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border:1px solid #fbf6ec66;border-radius:2px;cursor:pointer}
.overlay-switch input:checked{background:#7ff0ff;border-color:#7ff0ff}
.overlay-switch input:focus-visible{outline:1px solid #7ff0ff;outline-offset:3px}
.demetria-heading{align-items:baseline}
.demetria-heading h1{font:400 clamp(4.5rem,9vw,8.5rem)/.9 'Instrument Serif',Georgia,serif;letter-spacing:-.02em}
.demetria-heading p{color:#a9b8b2}
.after-frame{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:end;margin-top:1.75rem}
.after-frame .heard{margin:0;max-width:40ch;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.35}
.talk-button{font:400 1.25rem/1 'Instrument Serif',Georgia,serif;padding:.75rem 1.1rem;border:1px solid #fbf6ec33;border-radius:6px;background:transparent;color:#fbf6ec}
.talk-button:hover,.talk-button[aria-expanded=true]{border-color:#7ff0ff;background:#7ff0ff0d;color:#fbf6ec}
.conversation-preview{border-bottom:0;padding:1.5rem 0 0}
footer{border-top-color:#fbf6ec1a;font-size:.8125rem;line-height:1.6;color:#a9b8b2}
footer a{color:#fbf6ec}
@media(max-width:580px){.demetria-heading h1{font-size:3.5rem}.after-frame{grid-template-columns:1fr}.talk-button{width:100%;min-height:48px;justify-content:space-between}}

/* Opening: title and project paragraph, then Demetria. The trailer sits under her portrait; the overlay switch sits beside the first frame. */
header>a{text-transform:none;letter-spacing:0;font-size:.9375rem}
.opening-line{max-width:46ch;margin:0 0 .875rem;font:400 clamp(1.25rem,1.8vw,1.625rem)/1.3 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.opening-intro{max-width:52ch;margin:0 0 4rem;font:400 .9375rem/1.55 'Instrument Sans',system-ui,sans-serif;color:#a9b8b2}
/* Opening follows the studio case-study pattern: title and one line, then the work. The facts and the longer paragraph follow Demetria. */
.opening-sub{max-width:32ch;margin:0 0 3.5rem;font:400 clamp(1.25rem,1.9vw,1.625rem)/1.25 'Instrument Serif',Georgia,serif;color:#fbf6ec}
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem 4rem;align-items:start;margin:0 0 6rem;padding-top:2.5rem;border-top:1px solid #fbf6ec1f}
.brief-facts{display:grid;gap:1.25rem;margin:0}
.brief-facts dt{font:500 .875rem/1.4 'Instrument Sans',system-ui,sans-serif;color:#fbf6ec}
.brief-facts dd{margin:.15rem 0 0;font:400 .9375rem/1.45 'Instrument Sans',system-ui,sans-serif;color:#a9b8b2}
.brief-lead{margin:0;max-width:34ch;font:400 clamp(1.5rem,2.4vw,2.125rem)/1.25 'Instrument Serif',Georgia,serif;color:#fbf6ec}
@media(max-width:800px){.brief{grid-template-columns:1fr}.brief-lead{order:-1}.brief-facts{grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem}}
@media(max-width:580px){.opening-sub{margin-bottom:2.5rem}.brief{margin-bottom:4rem}.brief-lead{font-size:1.375rem}}
/* The opening reads as one tight block, the section lines read as captions for their frames, and the first frame starts inside the first screen. */
.demetria-heading h1{font-size:clamp(3.5rem,7vw,7rem)}.demetria-intro .demetria-heading{margin-bottom:1.5rem}
.cap-head{margin-bottom:1rem}.cap-line{max-width:44ch;font:500 1.375rem/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.005em;color:#fbf6ec;text-wrap:balance}
.conversation-preview .voice-note{font:italic 400 1.1875rem/1.4 'Instrument Serif',Georgia,serif;color:#fbf6ecd9}.conversation-preview .voice-note+p{margin-top:.75rem}
/* The spoken line sits at subtitle scale under the image: quiet proof, not a second headline. */
.after-frame{margin-top:1rem}.after-frame .heard{max-width:52ch;font-size:1.1875rem;line-height:1.4;color:#fbf6ecb8}
.shot .cap-head{padding-top:1.25rem;border-top:1px solid #fbf6ec1f}
.demetria-intro,.shot{margin-bottom:6rem}
#audio-status:empty{display:none}
.demetria-study .demetria-listening{padding:0}
.demetria-study .trailer-player{border-top:0}
.demetria-intro .cap-head{display:flex;justify-content:space-between;align-items:end;gap:2rem}
/* The overlay control reads as a switch, not a label: sentence case beside a small track and knob. */
.overlay-switch{font:400 .9375rem/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fbf6ec;flex-direction:row-reverse}
.overlay-switch input{width:36px;height:20px;border-radius:10px;border:1px solid #fbf6ec66;background:radial-gradient(circle at 9px 50%,#fbf6ec 5.5px,transparent 6px)}
.overlay-switch input:checked{border-color:#7ff0ff;background:radial-gradient(circle at 25px 50%,#101816 5.5px,transparent 6px) #7ff0ff}
@media(max-width:580px){.opening-intro{margin-bottom:3rem}.opening-line{font-size:1.25rem}.cap-line{font-size:1.125rem}.after-frame .heard{font-size:1.0625rem}.demetria-intro,.shot{margin-bottom:4rem}.demetria-intro .cap-head{flex-direction:column;align-items:start;gap:.75rem}}

/* Push in: Demetria's frame leans toward her eyes once per visit while the notes appear, then holds. Picture and notes move together so pointers stay on the ear cuff. */
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .demetria-canvas>.demetria-image,.demetria-canvas>.tour{transform-origin:50% 32%}
  .demetria-canvas.is-pushing>.demetria-image,.demetria-canvas.is-pushing>.tour{transform:scale(1.04);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
  /* The other stops move the same way toward their own point: Pura toward the dome map, Belle toward the chamber, the rainforest up the trunk toward its notes. */
  .frame>img,.frame>.overlay{transform-origin:var(--push-at)}
  .frame.is-pushing>img,.frame.is-pushing>.overlay{transform:scale(1.04);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
  .city-model{--push-at:18% 45%}.belle-frame{--push-at:50% 63%}.rainforest-frame{--push-at:72% 18%}
}

/* Phones: the frame is too small for anchored notes, so the tour reads below the picture. Keep this block last. */
@media(max-width:580px){.tour{position:static;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;padding-top:1rem;text-shadow:none}.tour-lines,.tour-ring{display:none}.tour .tour-title,.tour .tour-note{position:static;width:auto}.tour .tb-grow{text-align:left}.tour .tr-map{position:static;width:min(12rem,100%)}.tour .tr-here{position:static}.tr-title br{display:none}}
/* Phones, final pass: stills run edge to edge, notes read in one column, the rainforest map comes first. */
@media(max-width:580px){
  .demetria-canvas,.frame{margin-inline:calc(-1 * var(--space))}
  .tour{grid-template-columns:1fr;gap:.9rem;padding-inline:var(--space)}
  .tour .tour-note>p:not(.tour-label),.tour .tour-title>p:not(.tour-label){font-size:.9375rem}
  .tour .tr-here{order:-2}.tour .tr-map{order:-1}.tour-rainforest br{display:none}
}

/* Link from the facts column to Multiverse Quad (added when the page moved into the portfolio). */
.brief-facts a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.brief-facts a:hover,.brief-facts a:focus-visible{color:#7ff0ff}
header>a.back-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-left:-.5rem;padding:0 .5rem;text-transform:uppercase;letter-spacing:.18em;font-size:.65625rem;color:#fbf6ecab;transition:color .3s}header>a.back-link span:first-child{font:400 24px/1 Arial,sans-serif}header>a.back-link:hover{color:#fbf6ec}