@font-face{font-family:Fraunces;src:url('../assets/experiments/fraunces.ttf') format('truetype');font-display:swap}
:root{--paper:#eee8db;--ink:#2a2a2a;--quiet:#c7c7c7;--line:rgba(231,231,231,.3);color-scheme:dark;font-family:Georgia,'Times New Roman',serif;color:var(--paper);background:#2e2e2e}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #d6d6d6;outline-offset:5px}button{min-height:44px;background:transparent;border:1px solid var(--line);color:inherit;padding:9px 18px;border-radius:2px;transition:background .2s,border-color .2s}button:hover{background:rgba(232,232,232,.1);border-color:var(--paper)}button[aria-pressed=true]{background:var(--paper);color:var(--ink)}a{color:inherit;text-underline-offset:4px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}
#experience{position:relative;width:100%;height:100svh;min-height:500px;overflow:hidden}#sea,#orca-3d{position:absolute;inset:0;width:100%;height:100%}#sea{touch-action:none;outline-offset:-5px}#orca-3d{pointer-events:none}.paper-grain{pointer-events:none;position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.masthead{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:25px 4.5%;gap:20px;color:var(--ink)}.back{font-size:15px;text-decoration:none}.back span{margin-right:9px}.edition,.eyebrow,.intro-footer,.place-label,.steer-hint,.small-print,.credit{font-family:Arial,sans-serif}.edition{font-size:10px;letter-spacing:2px}.edition span{margin:0 15px;opacity:.5}.plain{border:0;padding:8px 2px;font-size:14px}.plain:hover{background:transparent;text-decoration:underline}.masthead .plain{font-size:13px}.welcome{position:absolute;left:8%;top:22%;width:min(430px,44%)}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:500;line-height:1.7;margin:0 0 20px}.welcome>.eyebrow{color:#2a2a2a}h1,h2{font-family:Fraunces,Georgia,serif;font-weight:400}h1{font-size:clamp(58px,6.6vw,100px);line-height:.99;letter-spacing:-4px;margin:0 0 24px;text-shadow:0 1px 18px #2a2a2a20}h1 em,h2 em{font-weight:400}h1::first-line{color:#2a2a2a}.little-rule{width:45px;height:1px;background:var(--paper);opacity:.65;margin:25px 0}.invitation{font-size:19px;line-height:1.5;margin:0 0 28px}.primary{background:var(--paper);border-color:var(--paper);color:var(--ink);padding:14px 23px;font-size:15px;min-height:50px}.primary span{margin-left:25px}.primary:hover{background:#f6f6f6;color:#262626;border-color:#f6f6f6}.small-print{font-size:11px;line-height:1.8;color:#d3d3d3;margin-top:19px}.bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 4.5% max(20px,env(safe-area-inset-bottom));border-top:1px solid #dedede16;background:linear-gradient(transparent,#23232390)}.intro-footer{font-size:9px;letter-spacing:2px;color:#c5c5c5}.settings,.swim-controls{display:flex;gap:9px;align-items:center}.settings button{border-color:transparent;font:11px Arial,sans-serif;letter-spacing:.4px;padding:8px 11px}.swim-controls button{font-size:13px}.swim-controls #call span{font-size:20px;vertical-align:-1px;margin-right:6px}.place-label{position:absolute;right:5%;top:37%;font-size:10px;letter-spacing:1.1px;line-height:1.8;text-align:right;opacity:.78;pointer-events:none}.place-label i{font-size:9px;letter-spacing:.2px}.compass{display:block;margin-bottom:13px;font-size:14px}.chapter{position:absolute;top:17%;left:5%;max-width:440px;pointer-events:none}.chapter .eyebrow{color:#373737;margin-bottom:8px}.chapter h2{font-size:clamp(29px,3vw,45px);color:#343434;margin:0 0 17px;line-height:1.15}.chapter>p:last-child{font-size:15px;line-height:1.6;max-width:370px;background:#2f2f2fd6;padding:10px 15px;margin-top:34px;border-left:1px solid #cdcdcd60}.steer-hint{position:absolute;bottom:87px;left:4.5%;font-size:11px;letter-spacing:.3px;color:#d9d9d9;pointer-events:none}.landmark{position:absolute;right:5%;bottom:120px;max-width:240px;text-align:right;font-style:italic;color:#d9d9d9;font-size:18px;pointer-events:none}.return-wrap{position:absolute;bottom:155px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}.return-wrap span{display:block;font-style:italic;font-size:13px;margin-top:13px}.return-wrap .primary span{display:inline}.ending{position:absolute;left:8%;top:24%}.ending h2{font-size:clamp(46px,6vw,82px);line-height:1.04;margin:12px 0}.ending>p:not(.eyebrow){font-size:18px;margin:25px 0}.ending>div{display:flex;gap:24px;align-items:center;margin-top:30px}.pause-overlay{position:absolute;inset:0;background:#222222bb;backdrop-filter:blur(8px);display:grid;place-items:center;text-align:center}.pause-overlay h2{font-size:48px;margin:10px 0 35px}.pause-overlay .plain{display:block;margin:16px auto}.pause-overlay .eyebrow{color:#d5d5d5}.no-script{position:absolute;inset:20%;background:#2a2a2a;padding:30px;line-height:1.7}
dialog{width:min(610px,calc(100% - 30px));max-height:85svh;overflow:auto;border:0;background:#eee8db;color:#323232;padding:46px;border-radius:3px;box-shadow:0 20px 90px #0006}dialog::backdrop{background:#1e1e1ebb;backdrop-filter:blur(5px)}dialog .eyebrow{margin-bottom:9px}dialog h2{font-size:36px;margin:0 0 23px}dialog p{font-size:15px;line-height:1.75}dialog .close{position:absolute;top:7px;right:10px;border:0;color:#2a2a2a;font-size:25px;padding:2px 12px}dialog .sources{list-style:none;padding:0;font-size:13px;line-height:2}.credit{font-size:11px!important;color:#595959;border-top:1px solid #b5b5b5;padding-top:17px;margin-top:24px}details{border-top:1px solid #b5b5b5;margin-top:16px;padding-top:14px}summary{cursor:pointer;min-height:35px;font-size:15px}dialog a:hover{color:#636363}
@media(min-width:1500px){.welcome{top:24%}.chapter{top:20%}}
@media(max-width:760px){#experience{min-height:580px}.masthead{padding:15px 5%;gap:12px}.edition{display:none}.back{font-size:13px}.welcome{left:7%;top:20%;width:80%}.welcome>.eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:66px;letter-spacing:-3px;margin-bottom:15px}.little-rule{margin:16px 0}.invitation{font-size:16px;line-height:1.4;margin-bottom:20px}.small-print{font-size:10px;margin-top:12px}.place-label{top:81%;right:6%;font-size:8px}.place-label i{font-size:8px}.compass{display:none}.intro-footer{font-size:8px;letter-spacing:1px;max-width:120px;line-height:1.8}.bottom-bar{padding:12px 4% max(12px,env(safe-area-inset-bottom));gap:3px;flex-wrap:wrap}.swim-controls{gap:5px}.swim-controls button{font-size:12px;padding:8px 12px}.settings{gap:0;margin-left:auto}.settings button{font-size:10px;padding:8px}.chapter{top:14%;left:6%;max-width:88%}.chapter h2{font-size:32px}.chapter>p:last-child{max-width:280px;font-size:13px;margin-top:34px;padding:8px 12px}.chapter .eyebrow{font-size:9px}.steer-hint{bottom:116px;left:6%;font-size:10px;max-width:250px;line-height:1.7}.steer-hint span{display:none}.landmark{bottom:165px;font-size:15px;max-width:180px}.ending{left:7%;top:21%}.ending h2{font-size:58px}.ending>div{gap:15px;flex-wrap:wrap}.ending .eyebrow{font-size:9px}.ending>p:not(.eyebrow){font-size:17px}dialog{padding:35px 25px}.return-wrap{bottom:170px}}
@media(max-height:600px) and (min-width:600px){#experience{min-height:360px}.masthead{padding:9px 4%}.welcome{top:20%;left:7%;width:50%}h1{font-size:52px;line-height:.96}.welcome .eyebrow{font-size:8px;margin-bottom:8px}.little-rule,.small-print{display:none}.invitation{font-size:14px;margin:10px 0}.invitation br{display:none}.primary{padding:10px 18px;min-height:44px}.bottom-bar{padding:8px 4%}.chapter{top:17%}.chapter h2{font-size:28px}.chapter>p:last-child{margin-top:10px;font-size:12px;padding:6px 10px}.steer-hint{bottom:65px}.ending{top:20%}.ending h2{font-size:44px}.ending>p:not(.eyebrow){margin:10px 0}.ending>div{margin-top:12px}.ending .eyebrow{margin-bottom:8px}.landmark{bottom:85px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
@media(max-width:360px){.welcome{top:19%;width:86%}h1{font-size:52px;letter-spacing:-2.5px}.invitation{font-size:14px}.welcome .eyebrow{font-size:7px;letter-spacing:1.3px}.little-rule{margin:13px 0}.small-print{font-size:9px}.welcome .primary{min-height:46px;padding:11px 18px}.place-label{display:none}.chapter h2{font-size:28px}.chapter>p:last-child{font-size:12px}.ending h2{font-size:49px}}
.ending h2::first-line{color:var(--ink)}
@media(max-width:760px){.chapter>p:last-child{margin-top:18px}}
.ending{top:calc(32% - 30px)}.ending .eyebrow{color:var(--ink)}.ending h2::first-line{color:var(--paper)}

/* Ink and paper, with a clear reading surface while diving. */
:root{--paper:#eee8db;--ink:#202020;--quiet:#c8c8c8;--line:rgba(240,240,240,.32);background:#242424}
.is-playing .masthead{background:linear-gradient(#eee8dbf2,#eee8dbd9,transparent)}
.is-deep .masthead{background:#eee8dbed}
.is-deep .chapter h2,.is-deep .chapter .eyebrow{color:var(--paper)}
.depth-note{position:absolute;right:5%;top:95px;display:flex;flex-direction:column;gap:6px;text-align:right;font:10px Arial,sans-serif;letter-spacing:1.6px;pointer-events:none;color:#343434}
.depth-note span{font:italic 13px Georgia,serif;letter-spacing:0}
.is-deep .depth-note{color:var(--paper)}
#power[aria-pressed=true]{background:#eee8db;color:#181818}
@media(max-width:760px){.swim-controls{width:100%;justify-content:space-between;gap:4px}.swim-controls button{font-size:11px;padding:8px 9px}.swim-controls #call span{font-size:15px;margin-right:3px}.depth-note{top:74px;font-size:8px}.depth-note span{font-size:10px}.is-deep .chapter{top:17%}.settings{margin-left:auto}.chapter>p:last-child{max-width:260px}}
@media(max-height:600px) and (min-width:600px){.swim-controls{width:auto}.depth-note{top:65px}.is-deep .chapter{top:20%}}
#power,#follow{transition:border-color .2s}

@media(min-width:761px){.place-label{top:auto;bottom:115px}}