/* Ocean preview: independent film, ordinary scrolling, no chapter controls. */
:root{color-scheme:light;--ink:#173b61;--muted:#50657b;--paper:#eef5fa;--gold:#076b79;--rule:#c4d5e2;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--paper)}.page-shell{max-width:none;margin:0;padding:0}.page-shell main{max-width:none;padding:0}
a{color:var(--ink)}button,a,input,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #076b79;outline-offset:5px}
.masthead{position:fixed;inset:0 0 auto;z-index:20;height:80px;padding:0 4vw;background:#eef5fa;border-bottom:1px solid var(--rule)}.wordmark{font-size:25px;color:var(--ink)}.brand-mark{color:var(--ink)!important;border-color:var(--ink)!important}.masthead nav{display:flex;gap:24px;align-items:center;font-size:16px}.masthead nav a,.display-menu summary{display:flex;align-items:center;min-height:44px}.display-menu{position:relative}.display-menu summary{cursor:pointer;list-style:none}.display-menu summary::after{content:'⌄';margin-left:8px}.display-options{position:absolute;top:100%;right:0;width:245px;padding:16px;background:#fff;box-shadow:0 8px 30px #173b6126;border:1px solid #c4d5e2;border-radius:8px}.display-options label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16px}.display-options input{width:20px;height:20px;accent-color:#076b79}.display-options button{display:block;width:100%;min-height:44px;background:var(--paper);border:1px solid #c4d5e2;border-radius:4px;color:var(--ink);font-size:16px;margin-top:8px}
.scene-column{position:fixed;inset:0;height:100svh;pointer-events:none}.scene-sticky,.theater{height:100%}.theater{border:0;background:var(--paper)}.viewport{height:100%;aspect-ratio:auto;background:#e1edf5;container-type:normal;isolation:isolate}.world{width:max(100vw,177.7svh);height:max(100svh,56.28vw);left:50%;top:50%;margin-left:min(-50vw,-88.85svh);margin-top:min(-50svh,-28.14vw);transform-origin:50% 50%}.shade{background:linear-gradient(90deg,#eef5fae0,transparent 45%),linear-gradient(0deg,#173b6133,transparent 30%)}
.opening,.transport,.start,.scene-hint{display:none!important}
/* Projection is outside the camera transform so text keeps its readable size. */
body[data-independent-film] .projection{z-index:2;left:auto;right:5vw;top:23svh;width:min(42vw,640px);min-height:0;padding:22px 26px;transform:none;border:1px solid #a5dce6;border-radius:12px;background:#173b61;box-shadow:0 0 32px #55c6dc55;color:#fff;text-shadow:none;overflow:visible;text-align:left;visibility:hidden}
body[data-independent-film] .projection:after{display:none}.projection-kicker{font:600 1rem/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:.03em!important;color:#c3f1f5!important;text-shadow:none!important;margin:0 0 10px}.projection-text{font:500 clamp(1.375rem,1.75vw,1.75rem)/1.45 Arial,Helvetica,sans-serif!important;color:#fff!important;min-height:0;text-wrap:pretty}.projection-text .pending{color:#fff;text-shadow:none}.projection-answer{font:400 1.125rem/1.6 Arial,Helvetica,sans-serif!important;color:#fff;margin-top:14px}.answer-graph,.answer-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin:10px 0}.answer-graph span,.answer-list span{padding:6px 8px;border:1px solid #87bdcf;border-radius:4px}.projection-answer>div+div{margin-top:10px}
body[data-independent-film] .closing{display:block!important;left:44%;right:4%;top:26svh;z-index:3;color:#fff;background:#173b61;padding:28px;border-radius:12px;font:400 clamp(1.625rem,2.8vw,2.75rem)/1.4 Georgia,serif;letter-spacing:-.02em;text-shadow:none;text-align:left}.closing span:last-child{color:#c3f1f5;font-style:normal}
.chapters{position:relative;z-index:4;width:35%;padding:0 0 0 4vw;pointer-events:none}.scroll-chapter{min-height:105svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 100px;scroll-margin-top:80px;pointer-events:auto}.scroll-chapter h2{font-size:clamp(2rem,3vw,3.5rem);line-height:1.15;letter-spacing:-.04em;text-wrap:balance;color:var(--ink)}.scroll-chapter>p:not(.kicker){font-size:1.25rem;line-height:1.7;color:var(--ink);margin:0}.scroll-chapter .kicker{font-size:1rem;line-height:1.6;letter-spacing:.07em;color:#076b79;margin:0 0 20px}.scroll-chapter>*{background:#eef5fa;margin:0;padding:12px 20px}.scroll-chapter>.kicker{padding-top:20px;margin-bottom:0}.scroll-chapter>h2{margin:0}.scroll-chapter>p:last-child,.scroll-chapter>.chapter-note:last-child{padding-bottom:20px}.chapter-note{font-size:1.125rem;line-height:1.6;color:var(--ink);padding-top:18px}
.scroll-reminder{position:fixed;bottom:20px;left:4vw;z-index:10;display:flex;gap:20px;align-items:center;min-height:44px;padding:8px 14px;background:#eef5fa;color:var(--ink);font-size:1rem;text-decoration:none;border:1px solid #c4d5e2;border-radius:4px}.scroll-reminder[hidden]{display:none}.skip-link{position:fixed;background:#173b61;color:#fff;z-index:30}
dialog{width:min(760px,calc(100% - 32px));max-height:85svh;border:1px solid #c4d5e2;border-radius:12px;background:#eef5fa;color:#173b61;padding:28px}dialog::backdrop{background:#102d4ecc}dialog form{text-align:right}dialog button{font-size:1rem;min-height:44px;padding:8px 20px;border:1px solid #173b61;border-radius:4px;color:#173b61;background:#fff}dialog h2{font-size:2rem;line-height:1.3;margin-top:16px}.transcript{max-width:none;margin:0;color:#173b61;font:1.125rem/1.7 Arial,Helvetica,sans-serif}.error{pointer-events:auto}
@media(max-width:900px){.masthead{height:72px;padding:0 16px}.wordmark{font-size:20px}.masthead nav{gap:14px;font-size:16px}.brand-mark{width:26px!important;height:26px!important}.world{width:100vw;height:56.28vw;left:0;top:72px;margin:0}.shade{background:linear-gradient(0deg,#eef5fa 35%,transparent 76%)}body[data-independent-film] .projection{top:calc(56.28vw + 88px);right:16px;left:16px;width:auto;padding:18px;max-height:calc(100svh - 56.28vw - 100px);overflow:auto;pointer-events:auto}.projection-text{font-size:1.375rem!important}.projection-kicker{font-size:1rem!important}body[data-independent-film] .closing{left:16px;right:16px;top:calc(56.28vw + 88px);padding:20px;font-size:1.625rem}.chapters{width:100%;padding:0 16px}.scroll-chapter{justify-content:flex-start;padding:calc(56.28vw + 420px) 0 80px;min-height:110svh}.scroll-chapter h2{font-size:2rem}.scroll-chapter>p:not(.kicker){font-size:1.125rem}.scroll-chapter>*{background:#eef5fa}.scroll-reminder{left:16px;bottom:12px}.display-options{right:-70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-height:550px){.scroll-chapter{min-height:auto;padding-top:150px}.scene-column{opacity:.25}body[data-independent-film] .closing,body[data-independent-film] .projection{display:none!important}.chapters{width:100%;max-width:760px;padding:0 20px}.scroll-chapter>*{background:#eef5fa}}
/* Text enlargement and spacing must reflow rather than clip. */
.scroll-chapter h2,.scroll-chapter p,.chapter-note,.projection-kicker,.projection-text,.projection-answer,.closing,dialog{overflow-wrap:anywhere}
.projection-answer span{max-width:100%}.masthead nav{flex-shrink:0}.display-options{max-width:calc(100vw - 32px)}
@media(max-width:900px){.masthead{height:auto;min-height:72px;flex-wrap:wrap;padding:8px 16px;gap:2px 16px}.masthead nav{flex-wrap:wrap;justify-content:flex-end;max-width:100%;margin-left:auto}.world{top:var(--header-height,100px)}body[data-independent-film] .projection,body[data-independent-film] .closing{top:calc(56.28vw + var(--header-height,100px) + 16px)}body[data-independent-film] .projection{max-height:calc(100svh - 56.28vw - var(--header-height,100px) - 28px)}.scroll-chapter{padding-top:calc(56.28vw + var(--header-height,100px) + 340px)}.display-options{right:0}}
/* Mobile is a static introduction, independent of the desktop film. */
.mobile-introduction{display:none}
@media(max-width:900px){
  .scroll-story,.desktop-heading,.scroll-reminder{display:none!important}
  .masthead{position:relative;height:auto;min-height:72px}
  .mobile-introduction{display:block;background:#eef5fa}
  .mobile-archive-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
  .mobile-copy{max-width:650px;padding:28px 24px 48px;margin:auto;color:#173b61}
  .mobile-copy h1{font:400 clamp(1.875rem,6vw,2.5rem)/1.2 Georgia,serif;letter-spacing:-.025em;margin:0 0 24px;overflow-wrap:anywhere}
  .mobile-copy h1 em{color:#076b79;font-style:normal}
  .mobile-copy p{font:400 1.125rem/1.7 Arial,Helvetica,sans-serif;margin:0 0 24px;overflow-wrap:anywhere}
  .mobile-begin{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:16px 18px;background:#173b61;color:white;font-size:1.125rem;line-height:1.5;border-radius:6px;text-decoration:none;margin:28px 0 40px}
  .mobile-copy section{border-top:1px solid #c4d5e2;padding:28px 0 0;margin-top:28px}
  .mobile-copy h2{font:400 1.625rem/1.25 Georgia,serif;letter-spacing:-.02em;margin:0 0 16px;overflow-wrap:anywhere}
}

@media(max-width:900px){.mobile-begin{overflow-wrap:anywhere}.mobile-begin span{flex-shrink:0}}

@media(max-width:900px){.masthead nav>a:first-child{display:flex}}
@media(max-width:900px){
  .masthead{position:static;inset:auto}
  .masthead nav>a:first-child{background:#173b61;color:#fff;padding:10px 16px;min-height:44px;border-radius:6px;text-decoration:none;white-space:nowrap}
  .masthead nav>a:first-child:hover{background:#28577b}
}

@media(max-width:900px){.masthead{position:sticky;top:0;z-index:20}}