@font-face{font-family:'Bodoni Moda';src:url('fonts/bodoni-moda-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:Italiana;src:url('fonts/italiana-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Doga Inscription';src:url('fonts/doga-inscription-gbreve.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+011F}
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#eeece5;background:#090e10}*{box-sizing:border-box}body{margin:0}#world{position:relative;isolation:isolate;min-height:max(740px,100svh);overflow:hidden}.pool-bed,.shade{position:absolute;inset:0;z-index:-2}.pool-bed{background:linear-gradient(#06111955,#06111955),url('river-stones.png') center/cover}#water{width:100%;height:100%;display:block;opacity:0;touch-action:pan-y}#water.ready{opacity:1}.shade{z-index:-1;pointer-events:none;background:linear-gradient(90deg,#080e11ee 5%,#080e1177 45%,#080e1111 80%)}header{display:flex;align-items:center;justify-content:space-between;padding:30px 5.5%}.monogram{font:italic 30px Georgia,serif;letter-spacing:-4px}a{color:#cad4d6;text-decoration:none;font-size:12px;letter-spacing:.02em}a span{margin-left:12px}a:focus-visible,button:focus-visible{outline:1px solid #d1e8ef;outline-offset:5px}.identity{position:absolute;left:8%;right:8%;top:31%;pointer-events:none}h1{font-weight:400;font-size:clamp(70px,7.5vw,122px);line-height:1.1;letter-spacing:-.055em;margin:0 0 30px}h1 span{font-family:'Doga Inscription','Bodoni Moda',Georgia,serif;letter-spacing:-.04em}.interests{font-size:clamp(17px,1.6vw,23px);letter-spacing:.01em;line-height:1.6;margin:0;color:#e0e4e2}.affiliation{font-size:12px;line-height:1.9;color:#b4c2c7;margin:28px 0 0;max-width:430px}.firm{white-space:nowrap}.variations{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;background:#0b1419dc;border:1px solid #bccbd326;border-radius:8px;backdrop-filter:blur(20px);white-space:nowrap}.variation-label{font-size:8px;letter-spacing:.15em;color:#9aaeb7;padding:0 14px}button{font:11px 'DM Sans',sans-serif;color:#aebfc5;border:0;background:none;padding:11px 15px;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#d9e7e51a;color:#f2f0e9}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* An all-serif inscription, compact and central, with plenty of open water. */
body[data-design=inscription] .shade{background:radial-gradient(ellipse at 50% 37%,#060d11bc,transparent 85%)}body[data-design=inscription] .identity{top:29%;text-align:center}body[data-design=inscription] h1{font-family:'Doga Inscription','Bodoni Moda',Georgia,serif;font-size:clamp(80px,10vw,160px);letter-spacing:-.045em;margin-bottom:25px}body[data-design=inscription] .interests{font-size:14px;letter-spacing:.12em}body[data-design=inscription] .affiliation{margin:32px auto 0;max-width:600px}
/* A name along the bottom edge; interests and work separated across the top. */
body[data-design=reflection] .shade{background:linear-gradient(#070e1199,transparent 45%,#070e11ed 92%)}body[data-design=reflection] .identity{inset:0 7%;top:0}body[data-design=reflection] h1{position:absolute;bottom:140px;left:0;right:0;font-size:clamp(90px,14.5vw,230px);text-align:center;margin:0}body[data-design=reflection] .interests{position:absolute;top:155px;left:0;font-size:21px;max-width:220px}body[data-design=reflection] .affiliation{position:absolute;right:0;top:155px;margin:0;text-align:right;max-width:270px}body[data-design=reflection] .firm{display:block}
/* A contained oval pool with a restrained editorial masthead. */
body[data-design=cove] .pool-bed{inset:24% 18% 105px;border-radius:50%;box-shadow:0 0 60px #253a4315;overflow:hidden}body[data-design=cove] .shade{background:linear-gradient(#090e10 10%,transparent 45%,#090e1055)}body[data-design=cove] .identity{top:14%;text-align:center}body[data-design=cove] h1,body[data-design=cove] h1 span{font-family:'DM Sans',sans-serif;font-size:clamp(45px,5vw,78px);letter-spacing:-.06em}body[data-design=cove] h1{margin-bottom:15px}body[data-design=cove] .interests{font-size:15px}body[data-design=cove] .affiliation{position:fixed;bottom:110px;left:20px;right:20px;max-width:none;margin:0;text-align:center}
@media(max-width:650px){#world{min-height:max(720px,100svh)}header{padding:25px 7%}.monogram{font-size:27px}.identity{left:7%;right:7%;top:29%}h1{font-size:17vw;max-width:350px}.interests{font-size:15px}.affiliation{font-size:11px;max-width:300px}.firm{display:block}.shade{background:linear-gradient(#08101577,#08101599 40%,#08101522)}.variations{bottom:20px;gap:0;padding:5px;width:calc(100% - 28px);justify-content:space-between}.variation-label{display:none}button{font-size:10px;padding:11px 8px}body[data-design=inscription] .identity{top:30%}body[data-design=inscription] h1{font-size:19vw;max-width:none}body[data-design=inscription] .interests{font-size:12px;letter-spacing:.06em}body[data-design=reflection] h1{font-size:19vw;bottom:145px;max-width:none}body[data-design=reflection] .interests{top:145px;font-size:19px;max-width:170px}body[data-design=reflection] .affiliation{top:220px;left:0;right:auto;text-align:left;max-width:260px;font-size:11px}body[data-design=cove] .pool-bed{inset:29% 6% 145px}body[data-design=cove] .identity{top:16%}body[data-design=cove] h1,body[data-design=cove] h1 span{font-size:12vw;max-width:none}body[data-design=cove] .interests{font-size:13px}body[data-design=cove] .affiliation{position:absolute;top:calc(max(720px,100svh) - 16svh - 139px);bottom:auto;left:0;right:0}}
@media(max-height:550px) and (min-width:651px){#world{min-height:550px}.identity{top:26%}h1{font-size:76px}body[data-design=reflection] .interests,body[data-design=reflection] .affiliation{top:115px}body[data-design=reflection] h1{font-size:110px;bottom:100px}body[data-design=cove] .affiliation{position:absolute;top:340px;bottom:auto}body[data-design=cove] .identity{top:15%}}
.water-controls{position:fixed;right:24px;top:82px;z-index:10;font-size:12px;color:#dfe7e7;max-width:calc(100vw - 32px)}.water-controls summary{list-style:none;cursor:pointer;margin-left:auto;width:max-content;padding:11px 16px;border:1px solid #bccbd339;border-radius:7px;background:#0b1419dc;backdrop-filter:blur(18px);user-select:none}.water-controls summary::-webkit-details-marker{display:none}.water-controls summary span{margin-left:16px;color:#9fb9c2}.water-controls summary:focus-visible{outline:1px solid #d1e8ef;outline-offset:4px}.control-panel{width:310px;max-width:calc(100vw - 32px);margin-top:8px;padding:20px;background:#0b1419f2;border:1px solid #bccbd339;border-radius:10px;backdrop-filter:blur(24px);max-height:calc(100svh - 210px);overflow:auto;overscroll-behavior:contain}.control-heading{display:flex;justify-content:space-between;align-items:center}.control-heading h2{font-size:19px;font-weight:400;margin:0}.control-heading button{padding:5px 0 5px 15px;color:#b7cace}.control-note{font-size:11px;color:#9aadb5;line-height:1.6;margin:8px 0 23px}.water-fields label{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:18px;font-size:12px}.water-fields output{font-variant-numeric:tabular-nums;color:#a7c1ca}.water-fields input{grid-column:1/-1;width:100%;margin:0;height:20px;accent-color:#9bbec7;cursor:pointer}.water-fields select{background:#1c2b31;color:#dce6e3;border:1px solid #52666e;border-radius:4px;padding:5px;font:11px 'DM Sans',sans-serif}.direction-label{align-items:center}#copy-water{padding:9px 0;text-decoration:underline;text-underline-offset:4px}#copy-status{font-size:10px;margin-left:15px;color:#a7c1ca}@media(max-width:650px){.water-controls{right:16px;top:77px}.control-panel{max-height:calc(100svh - 205px);padding:17px}}@media(max-height:550px){.water-controls{top:60px}.control-panel{max-height:calc(100svh - 122px)}}

/* The selected Inscription composition: a quieter name and a personal closing. */
.personal-footer{display:none}
body[data-design=inscription] #world{min-height:max(760px,100svh)}
body[data-design=inscription] .identity{top:25%}
body[data-design=inscription] h1{font-size:clamp(56px,7vw,112px);margin-bottom:24px}
body[data-design=inscription] .personal-footer{display:block;position:absolute;bottom:115px;left:24px;right:24px;text-align:center}
.closing-quote{margin:0 0 88px}
.closing-quote blockquote{transform:translate(var(--quote-x,0px),var(--quote-y,0px));font-family:Italiana,Georgia,serif;font-size:min(calc(clamp(29px,3.3vw,48px) * var(--quote-size,1)),8.3vw);line-height:1.3;letter-spacing:-.015em;margin:0 0 12px;opacity:var(--quote-visibility,1);white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.3em;color:#b2bbb5;text-shadow:1px 1px 1px #02090a}
.quote-submerged .closing-quote blockquote,.quote-submerged .closing-quote figcaption{color:transparent;text-shadow:none}
.closing-quote figcaption{height:16.2px;transform:translate(var(--citation-x,0px),var(--citation-y,0px));font-size:calc(9px * var(--citation-size,1));line-height:1.8;color:#aebdc2;letter-spacing:.035em;opacity:var(--citation-visibility,1);white-space:pre-wrap;overflow-wrap:anywhere}
.closing-quote figcaption span{margin:0 6px}
.closing-quote cite{font-style:italic}
.contact-links{display:flex;justify-content:center;gap:12px}
.contact-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#dee7e7;background:#07121680;border:1px solid #b8cbd34a;border-radius:4px;backdrop-filter:blur(12px)}
.contact-links svg{display:block;width:20px;height:20px}
.contact-links a:hover{background:#b8cbd320;border-color:#b8cbd37a}
@media(max-width:650px){body[data-design=inscription] h1{font-size:15vw}body[data-design=inscription] .identity{top:24%}body[data-design=inscription] .personal-footer{bottom:110px;left:20px;right:20px}.closing-quote blockquote{font-size:min(calc(29px * var(--quote-size,1)),8.3vw)}.closing-quote figcaption{max-width:285px;margin:auto;font-size:calc(9px * var(--citation-size,1))}.closing-quote{margin-bottom:64px}}

.quote-controls{top:130px}
#copy-quote{padding:9px 0;text-decoration:underline;text-underline-offset:4px}
#quote-copy-status{font-size:10px;margin-left:15px;color:#a7c1ca}
.water-controls[open]{z-index:12}
.quote-controls .control-panel{max-height:calc(100svh - 205px)}
body:not([data-design=inscription]) .quote-controls{display:none}
@media(max-width:650px){.quote-controls{top:125px}}
@media(max-height:550px){.quote-controls{top:108px}.quote-controls .control-panel{max-height:calc(100svh - 170px)}}

.citation-controls{top:178px}
#copy-citation{padding:9px 0;text-decoration:underline;text-underline-offset:4px}
#citation-copy-status{font-size:10px;margin-left:15px;color:#a7c1ca}
.citation-controls .control-panel{max-height:calc(100svh - 253px)}
body:not([data-design=inscription]) .citation-controls{display:none}
@media(max-width:650px){.citation-controls{top:173px}}
@media(max-height:550px){.citation-controls{top:156px}.citation-controls .control-panel{max-height:calc(100svh - 218px)}}

.pool-bed{background-image:linear-gradient(#06111955,#06111955),var(--riverbed-image,url('river-stones.png'))}
.riverbed-controls{left:24px;right:auto}
.riverbed-controls summary{margin-left:0}
.riverbed-controls .control-panel{width:360px}
.riverbed-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.riverbed-options button{min-width:0;padding:0 0 12px;overflow:hidden;text-align:left;border:1px solid #bccbd326;background:#0c181d}
.riverbed-options button[aria-pressed=true]{border-color:#a8c8d1;background:#26383e;color:#f2f0e9}
.riverbed-options img{display:block;width:100%;height:78px;object-fit:cover;margin-bottom:11px}
.riverbed-options strong,.riverbed-options span{display:block;margin:0 11px}
.riverbed-options strong{font-size:13px;font-weight:500}
.riverbed-options span{margin-top:5px;font-size:10px;line-height:1.5;color:#aebfc5}
#riverbed-status{margin:16px 0 0;min-height:35px}
.fish-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 10px;padding-top:18px;border-top:1px solid #bccbd326;cursor:pointer}
.fish-toggle small{display:block;color:#aebfc5;font-size:10px;margin-top:7px}
.fish-toggle input{width:18px;height:18px;accent-color:#a8c8d1;cursor:pointer}
#fish-note{margin-bottom:10px}
@media(max-width:650px){.riverbed-controls{left:16px}}
.quote-editor{display:grid;gap:10px;font-size:12px}
.quote-editor textarea{box-sizing:border-box;width:100%;min-height:96px;resize:vertical;padding:10px;background:#111f25;color:#e0e7e7;border:1px solid #52666e;border-radius:5px;font:13px/1.5 'DM Sans',sans-serif}
.quote-editor textarea:focus-visible{outline:1px solid #d1e8ef;outline-offset:3px}
.admission-footer{position:absolute;bottom:10px;left:20px;right:20px;text-align:center;color:#f2f0e9;opacity:var(--admission-opacity,.55);font-size:11px;line-height:1.5;text-shadow:0 1px 3px #000}.admission-footer p{margin:0 auto;max-width:680px}
.variations{bottom:44px}
@media(max-width:650px){.variations{bottom:56px}}
body[data-design=inscription] .admission-footer{bottom:171px}
body[data-design=inscription] .variations{bottom:27px}
@media(max-width:650px){body[data-design=inscription] .admission-footer{bottom:166px}body[data-design=inscription] .variations{bottom:20px}}

.closing-quote blockquote{margin-left:var(--quote-margin-left,0%);margin-right:var(--quote-margin-right,0%);transform:translate(var(--quote-x,0px),var(--quote-safe-y,var(--quote-y,0px)))}
@media(max-height:1200px),(max-width:1000px){.closing-quote blockquote{--quote-safe-y:0px;font-size:min(calc(clamp(29px,3.3vw,48px) * var(--quote-size,1) * .8),8.3vw)}}
@media(max-width:650px){.closing-quote blockquote{font-size:min(calc(25px * var(--quote-size,1)),7.5vw);overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}}
.closing-quote figcaption{margin-left:var(--citation-margin-left,0%);margin-right:var(--citation-margin-right,0%)}
.affiliation a{color:inherit;font:inherit;letter-spacing:inherit;text-decoration:underline;text-decoration-color:#b4c2c759;text-decoration-thickness:1px;text-underline-offset:3px;pointer-events:auto}
.affiliation a:hover,.affiliation a:focus-visible{color:#f2f0e9;text-decoration-color:#b4c2c7b3}
.prod-mode .water-controls,.prod-mode .variations,.prod-mode header a{display:none}
.fishing-kit{position:absolute;left:0;bottom:85px;z-index:3;width:90px;height:110px;transform:translateX(0);transition:left .7s ease,bottom .7s ease,transform .7s ease}
.fishing-active .fishing-kit{left:50%;bottom:225px;transform:translateX(-50%)}
.fishing-kit[hidden],.fishing-caption[hidden]{display:none}
#fishing-rod{display:block;width:90px;height:110px;padding:0;background:none;opacity:var(--rod-idle-opacity,.4);transition:opacity .3s;touch-action:manipulation}
#fishing-rod:hover{opacity:.55;background:none}
#fishing-rod:focus-visible{opacity:1;background:none}
#fishing-rod[aria-pressed=true]{opacity:1;background:none}
#fishing-rod svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 3px 2px #0009);transform:translate(-8px,12px) rotate(-18deg) scale(.58);transition:transform .7s ease}
#fishing-rod[aria-pressed=true] svg{transform:none}
.rod-shadow{fill:none;stroke:#080d0c;stroke-width:6;transform:translate(2px,2px)}
.rod-shaft{fill:none;stroke:#9e8761;stroke-width:2.5;stroke-linecap:round}
.rod-grip{stroke:#594333;stroke-width:5;stroke-linecap:round}
.fishing-caption{position:absolute;right:calc(100% + 12px);bottom:12px;width:min(180px,calc(50vw - 65px));padding:9px 12px;border-radius:6px;background:#071215b8;backdrop-filter:blur(8px);color:#d5dcd4;font-size:11px;line-height:1.6}
.fishing-caption p{margin:0}
.fishing-active .fishing-caption{animation:fishing-reveal .25s .45s both}
@keyframes fishing-reveal{from{opacity:0}to{opacity:1}}
#fishing-action{min-height:44px;padding:9px 0 0;text-decoration:underline;text-underline-offset:4px;font-size:11px;color:#cbd9d7}
#fishing-action:disabled{opacity:.35;cursor:default}
#fishing-line{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;display:none}
.cast-line{fill:none;stroke:#d5dfd1;stroke-opacity:.45;stroke-width:.7}
.float-ring{fill:none;stroke:#b8d0c8;stroke-opacity:.24;stroke-width:.6}
.float-ring-outer{stroke-opacity:.13;transform-origin:0 3px;animation:float-wake 3.2s ease-out infinite}
.float-contact-shadow{fill:#031011;opacity:.35}
.float-submerged{opacity:.24}
.float-meniscus{fill:none;stroke:#d6e1d4;stroke-width:.65;stroke-opacity:.6}
.float.biting .float-ring{stroke-opacity:.48}
.float.biting .float-ring-outer{animation-duration:.85s}
.float[data-mode=casting] .float-surface,.float[data-mode=casting] .float-submerged-wrap{display:none}
.float[data-mode=casting] .float-above{clip-path:none}
@keyframes float-wake{from{transform:scale(.65);opacity:.8}to{transform:scale(1.35);opacity:0}}
.fishing-active{cursor:crosshair}
.fishing-active a,.fishing-active button,.fishing-active summary{cursor:pointer}
@media(max-width:650px){.fishing-kit{bottom:80px;width:66px;height:88px}.fishing-active .fishing-kit{bottom:var(--fishing-active-bottom,225px)}#fishing-rod{width:66px;height:88px}.fishing-caption{top:50%;right:calc(100% + 10px);bottom:auto;width:min(140px,calc(50vw - 55px));padding:8px 10px;transform:translateY(-50%);font-size:10px}}
@media(prefers-reduced-motion:reduce){#fishing-rod,#fishing-rod svg,.fishing-kit{transition:none}.fishing-caption,.float-ring-outer{animation:none}}
#water-fallback{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}#water-fallback.ready{opacity:1}
#river-diagnostics{position:fixed;top:74px;right:24px;z-index:20;max-width:calc(100vw - 48px);padding:16px;background:#0b1419f5;border:1px solid #bccbd339;border-radius:8px;font:12px/1.5 monospace}#river-diagnostics pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:360px}#river-diagnostics summary{cursor:pointer}
@media(max-width:650px){.closing-quote figcaption{max-width:none;margin-left:max(var(--citation-margin-left,0%),calc((100% - 285px + var(--citation-margin-left,0%) - var(--citation-margin-right,0%))/2));margin-right:max(var(--citation-margin-right,0%),calc((100% - 285px + var(--citation-margin-right,0%) - var(--citation-margin-left,0%))/2))}}
/* Top right: a frosted pill to the degree-diameter page, with an outline Clawd that hops on hover. It stays visible in production, where other header links are hidden. */
.header-links{display:flex;align-items:center;gap:18px}
a.shenanigans,.prod-mode header a.shenanigans{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border:0;border-radius:999px;background:#0b141959;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);color:#e3e9e8;font-size:12px;letter-spacing:.06em;text-shadow:0 1px 8px #02090a;transition:background-color .2s}
a.shenanigans:hover{background-color:#0b14198c}
a.shenanigans svg{width:24px;height:14px;flex:none;overflow:visible;color:#cfe3e6;opacity:.38;transition:opacity .2s}
a.shenanigans:hover svg{opacity:.62}
a.shenanigans:hover svg{animation:shenanigans-hop .54s steps(1,end) infinite}
@keyframes shenanigans-hop{0%,100%{transform:translateY(0)}20%,50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){a.shenanigans:hover svg{animation:none}}
