@font-face { font-family:Bricolage;src:url('./assets/bricolage.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap; }
@font-face { font-family:'Caveat Brush';src:url('./assets/caveat-brush.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap; }
:root { --font-hand:'Caveat Brush',cursive;--font-read:Bricolage,Figtree,sans-serif;font-family:var(--font-read);font-optical-sizing:auto;--ease-out:cubic-bezier(.23,1,.32,1);--ease-stage:cubic-bezier(.77,0,.175,1); }
button { font-variation-settings:'opsz' 14,'wdth' 100; }
.series-wordmark { margin:0;font:inherit;letter-spacing:inherit; }
.series-descriptor { margin:14px 0 0 4px;font-family:var(--font-hand);font-size:clamp(20px,2vw,30px);font-weight:400;line-height:1.1;letter-spacing:.015em;white-space:nowrap;text-shadow:0 2px 6px #24172780; }
.about-panel .production-note { max-width:480px;margin:0 auto 26px;text-align:center;font-family:var(--font-read);font-size:14px;line-height:1.5;color:#66575d; }
.theatre[data-mode="home"] .home-invitation { font-family:var(--font-hand);font-size:clamp(26px,2.25vw,36px);font-weight:400;letter-spacing:0;line-height:1.12; }
.quiet-button { font-weight:500; }
.watch-button { border-radius:2px 5px 3px 2px; }
#tv-hotspot[data-rig="tv"] { transform:none;border-radius:8px; }
#tv-hotspot .hotspot-dot,#tv-hotspot .hotspot-label { display:none; }
.tv-invitation { position:absolute;width:112px;left:calc(var(--tv-cue-x) - 22px);top:calc(var(--tv-cue-y) - 3px);transform:translateY(-100%);text-align:right;pointer-events:auto;color:#fff0cd;filter:drop-shadow(0 2px 3px #573332); }
.tv-invitation > span { display:block;padding-right:7px;font-family:var(--font-hand);font-size:38px;line-height:1;white-space:nowrap;font-weight:400;transform:rotate(7deg); }
/* The arrow keeps its registered aim independently of the enlarged button.
   Keeping this drawing in the TV rig preserves its aim through camera moves. */
.tv-invitation svg { display:block;width:112px;height:96px;fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;animation:tv-hint 2.4s var(--ease-out) infinite; }
@keyframes tv-hint { 0%,62%,100%{transform:translateY(0) rotate(0)} 68%,80%{transform:translateY(6px) rotate(3deg)} 74%,88%{transform:translateY(0) rotate(-1deg)} }
.theatre[data-paused="true"] .tv-invitation svg { animation-play-state:paused; }
.theatre[data-branch="rusty"] .tv-invitation,.theatre[data-branch="reaction"] .tv-invitation { opacity:0; }
.scene-bridge { position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:#3d2330;display:grid;place-items:center; }
.scene-bridge > span { font-size:clamp(24px,3.5vw,48px);font-weight:500;letter-spacing:-.035em;opacity:0;color:#f4dfb8; }
.scene-bridge[data-kind="dust"] { background:radial-gradient(ellipse at 76% 72%,#df9f65,#b37855 70%); }
.scene-bridge[data-kind="time-jump"] > span { opacity:1; }
.masthead,.transport { z-index:5; }

/* A field-guide spread, not a text drawer. Art remains the primary voice. */
.about-panel { inset:12px;width:auto;padding:clamp(38px,5vw,78px) clamp(26px,6vw,95px) 35px;background:#eee5d4;color:#392d36;box-shadow:0 10px 80px #28162699;border-radius:3px 6px 2px 4px;isolation:isolate; }
.about-panel::before { content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:url('./assets/layers/sky.png');background-size:1200px;mix-blend-mode:soft-light;mask-image:linear-gradient(#0002,transparent 32%,#0002); }
.about-close { position:fixed;right:32px;top:26px;z-index:2; }
.pair-introduction { position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:end;max-width:1130px;margin:auto; }
.about-panel .pair-introduction h2 { font-family:var(--font-hand);font-size:clamp(44px,5.8vw,78px);font-weight:400;line-height:.95;letter-spacing:-.015em;margin:0;transform:rotate(-2deg); }
.pair-introduction h2 em { font-style:normal; }
.about-panel .pair-introduction p { margin:0;max-width:380px;font-size:17px;line-height:1.55; }
.pair-spread { position:relative;display:grid;grid-template-columns:1.08fr 1fr;max-width:1180px;margin:36px auto 0;gap:8%; }
.character-study { min-width:0;position:relative; }
.rusty-study { padding-top:25px; }
.study-art { position:relative;height:clamp(295px,40vh,410px); }
.study-art img { position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 5px #62493415); }
.rusty-study .study-art img { width:76%;margin-left:10%; }
.study-note { position:absolute;left:-1%;top:0;font-family:var(--font-hand);font-size:24px;line-height:1.04;transform:rotate(-8deg);color:#765d7c; }
.rusty-study .study-note { left:auto;right:0;top:10%;transform:rotate(6deg);text-align:right; }
.study-arrow { position:absolute;left:4%;top:19%;width:89px;height:55px;fill:none;stroke:#765d7c;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round; }
.rusty-study .study-arrow { left:auto;right:0;top:30%;transform:scaleX(-1) rotate(15deg); }
.study-copy { display:grid;grid-template-columns:105px 1fr;column-gap:18px;margin:8px 0 0;padding-top:8px; }
.study-copy h3 { grid-row:span 2;margin:0;font-family:var(--font-hand);font-size:53px;font-weight:400;line-height:1;letter-spacing:0;color:#2c7298;transform:rotate(-6deg); }
.rusty-study .study-copy h3 { color:#9f492f;transform:rotate(5deg); }
.about-panel .study-copy p { font-size:15px;line-height:1.5;margin:0;max-width:320px; }
.about-panel .study-copy .character-tagline { font-weight:650;font-size:17px;margin-bottom:7px; }
.about-panel .pair-coda { text-align:center;font-family:var(--font-hand);font-size:clamp(28px,3vw,42px);letter-spacing:0;line-height:1.1;margin:48px 0 24px;transform:rotate(-1deg); }
.pair-coda strong { font-weight:400; }
.about-watch { flex-direction:row;justify-content:center;align-items:center;gap:28px; }
.about-footer { display:flex;justify-content:space-between;gap:24px;max-width:1130px;margin:45px auto 0; }
.about-footer p { flex-shrink:0; }
.studio-credit { display:grid;justify-items:start;gap:10px; }
.studio-credit > span { font-size:12px; }
.studio-credit img { display:block;width:200px;height:auto;filter:brightness(0) saturate(100%);opacity:.8; }
.about-panel .studio-credit p { margin:2px 0 0;font-size:13px; }
.about-footer nav { justify-content:flex-end;align-content:flex-start; }
.about-panel a { text-decoration-color:#9f492f90; }
.about-panel a:hover { text-decoration-color:currentColor; }
.theatre[data-tv-focus="true"] .tv-invitation { display:none; }
.cinema { background:#140f17; }
.tv-modal-controls { display:flex;gap:24px;align-items:center; }
.screen-expansion { position:fixed;inset:0;width:100vw;height:100svh;z-index:2;transform-origin:0 0;overflow:hidden;opacity:0;pointer-events:none;background:#140f17; }
.screen-expansion #film { width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;margin:0; }
.cinema-shell { padding:0;height:100svh; }
.cinema-header { z-index:2;padding:12px 18px;top:12px;left:18px;right:18px;border-radius:3px;background:linear-gradient(90deg,#140f17cc,transparent 50%,#140f17cc); }
.cinema-header #cinema-title { display:grid;gap:5px;margin:0; }
.cinema-header .series-name { font-family:Collage,sans-serif;font-size:23px;line-height:1.05;font-weight:400;color:#fff0cd; }
.cinema-header .episode-name { font-family:var(--font-hand);font-size:32px;line-height:1;font-weight:400;color:#fff0cd; }
#film { width:100%;height:100svh;max-width:none;max-height:none;object-fit:contain; }
.film-note,.film-fallback { position:absolute;bottom:62px;left:0;right:0;padding:8px;background:#140f17cc; }
/* The opaque paper and original illustrations can scroll as ordinary content.
   Avoid a masked blend surface and filtered character images on mobile GPUs. */
@media (max-width: 800px), (pointer: coarse) {
  .about-panel::before { display: none; }
  .study-art img { filter: none; }
}
@media (max-width:700px) {
  .series-descriptor { margin-top:10px;font-size:22px; }
  .tv-focus-header { align-items:flex-start; }.tv-modal-controls { flex-wrap:wrap;gap:0 16px;justify-content:flex-end; }.tv-modal-controls #tv-focus-back { flex-basis:100%;justify-content:flex-end; }.tv-modal-controls .quiet-button { font-size:12px;min-height:36px; }
  .tv-invitation { width:96px;left:calc(var(--tv-cue-x) - 20px); }.tv-invitation > span { font-size:32px; }.tv-invitation svg { width:96px;height:82px; }
  .theatre[data-mode="home"] .home-invitation { font-size:clamp(23px,5.7vw,30px);line-height:1.08; }
  .about-panel { inset:7px;padding:74px 24px 26px; }.about-close { top:19px;right:18px; }
  .pair-introduction { grid-template-columns:1fr;gap:22px; }.about-panel .pair-introduction h2 { font-size:49px; }
  .about-panel .pair-introduction p { font-size:16px; }
  .pair-spread { grid-template-columns:1fr;gap:38px;margin-top:32px; }.study-art { height:310px; }.study-copy { grid-template-columns:1fr;gap:8px; }.study-copy h3 { grid-row:auto;font-size:43px;margin:0 0 5px;transform:none; }.rusty-study .study-copy h3 { transform:none; }
  .rusty-study { padding-top:0; }.study-note { left:0;top:0;font-size:22px; }.rusty-study .study-note { right:0;top:-3%; }.study-arrow { top:18%;width:72px; }.rusty-study .study-arrow { top:17%; }
  .about-panel .pair-coda { font-size:26px;margin-top:36px; }.about-watch,.about-footer { flex-direction:column; }.about-footer nav { justify-content:flex-start; }
}
@media (max-width:380px) {
  .about-panel { padding-left:19px;padding-right:19px; }
  .about-panel .pair-introduction h2 { font-size:44px; }
  .study-art { height:285px; }.study-note { font-size:21px; }
  .study-copy { grid-template-columns:1fr;gap:9px; }.study-copy h3 { grid-row:auto;margin-bottom:3px;transform:none; }.rusty-study .study-copy h3 { transform:none; }
  .cinema-header { left:0;right:0;gap:12px;padding:10px 14px; }.cinema-header .series-name { font-size:19px; }.cinema-header .episode-name { font-size:28px; }
}
@media (max-width:800px) and (max-aspect-ratio:9/10) {
  .theatre[data-mode="home"] .series-descriptor { font-size:clamp(18px,2.5svh,22px);margin-top:9px; }
  .theatre[data-mode="home"] .home-invitation { font-size:clamp(16px,2.6svh,23px);line-height:1.08; }
}
@media (prefers-reduced-motion:reduce) { .tv-invitation svg { animation:none; } }