/* Your site's own type and colors. */
:root { --ink: #ecebe7; --muted: #bfc1c9; --line: rgba(236, 235, 231, .2); --art: #e0a371; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Quicksand', system-ui, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #02030a; color: var(--ink); font: 500 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
#lake { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#lake:active { cursor: grabbing; }
#squares { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
#ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#ui a, #ui button, .intro h1 { pointer-events: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.04; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid rgba(236, 235, 231, .75); outline-offset: 3px; border-radius: 4px; }

.mark { position: fixed; z-index: 8; top: calc(18px + env(safe-area-inset-top)); right: 20px; width: 38px; height: 38px; display: grid; place-items: center; }
.mark svg { width: 24px; height: 24px; fill: var(--ink); filter: drop-shadow(0 1px 7px rgba(0, 0, 0, .7)); transition: transform .4s var(--ease); }
.mark:hover svg { transform: scale(1.2); }
/* The small i beside the drop. */
.info { position: fixed; z-index: 8; top: calc(18px + env(safe-area-inset-top)); right: 60px; width: 38px; height: 38px; display: grid; place-items: center; opacity: .78; transition: opacity .3s; }
.info:hover, .info[aria-expanded='true'] { opacity: 1; }
.info svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
.info svg .dot { fill: var(--ink); stroke: none; }
.howto { position: fixed; z-index: 8; top: calc(62px + env(safe-area-inset-top)); right: 20px; width: min(310px, calc(100vw - 40px)); padding: 15px 18px; border-radius: 14px; background: rgba(5, 7, 15, .66); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; animation: appear .35s ease both; }
.howto[hidden] { display: none; }
.howto p { margin: 0; }
.howto p + p { margin-top: 8px; }
.howto strong { font: italic 500 18px var(--serif); }
body.sheet-on .mark, body.sheet-on .info, body.sheet-on .howto, body.sheet-on .caption, body.sheet-on .intro { visibility: hidden !important; }
.sheet:focus { outline: 0; }

.intro { position: absolute; left: clamp(22px, 5vw, 76px); bottom: clamp(60px, 10vh, 110px); text-shadow: 0 2px 26px rgba(2, 3, 10, .7); }
.intro h1 { font-size: clamp(58px, 10.5vw, 150px); cursor: pointer; width: fit-content; user-select: none; transition: opacity .15s; }
.intro h1.broken { opacity: 0; }
.intro.faded h1 { pointer-events: none !important; cursor: default; }
.role { margin: 12px 0 0 4px; font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .3em; font-weight: 600; }
.hint { margin: 6px 0 0 4px; font-size: clamp(10px, .95vw, 13px); letter-spacing: .3em; opacity: .75; }

.chapter { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 18px; font: 400 clamp(52px, 9.5vw, 140px)/1 var(--serif); text-shadow: 0 2px 40px rgba(0, 0, 0, .65); pointer-events: none; opacity: 0; }

.caption { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(28px + env(safe-area-inset-bottom)); width: fit-content; max-width: 92vw; display: flex; align-items: baseline; gap: 14px; padding: 6px 12px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none !important; text-shadow: 0 1px 14px #000, 0 0 5px rgba(0, 0, 0, .8); }
.caption.on { opacity: 1; transform: none; pointer-events: auto !important; }
.caption strong { font: 400 clamp(26px, 3vw, 40px)/1.05 var(--serif); }
.caption span { font: italic 500 clamp(17px, 1.6vw, 21px) var(--serif); opacity: .85; border-bottom: 1px solid rgba(236, 235, 231, .5); }

.ending { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.ending a { font: 400 clamp(46px, 7.5vw, 104px)/1.12 var(--serif); pointer-events: none !important; text-shadow: 0 2px 18px rgba(40, 16, 8, .85), 0 0 3px rgba(40, 16, 8, .5); transition: letter-spacing .5s var(--ease); }
.ending .return { margin-top: 26px; font: italic 500 clamp(21px, 2.3vw, 29px)/1.3 var(--serif); opacity: .9; border-bottom: 1px solid rgba(236, 235, 231, .5); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.ending .return:hover { letter-spacing: 0; opacity: 1; }
.ending.on { opacity: 1; }
.ending.on a { pointer-events: auto !important; }
.ending a:hover { letter-spacing: .03em; }

.drift { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(26px + env(safe-area-inset-bottom)); width: 1px; height: 38px; background: rgba(236, 235, 231, .25); overflow: hidden; transition: opacity .8s; }
.drift span { position: absolute; left: 0; width: 1px; height: 14px; background: var(--ink); animation: fall 2.2s ease-in-out infinite; }
.drift.gone { opacity: 0; }
@keyframes fall { from { top: -14px; } to { top: 38px; } }

/* ----- Sheets over the world ----- */
#overlay { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#overlay.on { pointer-events: auto; }
.sheet { position: absolute; inset: 0; overflow-y: auto; animation: appear .7s var(--ease) both; -webkit-overflow-scrolling: touch; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.close { position: fixed; z-index: 3; top: calc(14px + env(safe-area-inset-top)); left: 16px; font: 300 40px/40px var(--serif); width: 44px; height: 44px; text-shadow: 0 1px 12px #000; }

.map { background: rgba(4, 5, 10, .78); backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2); padding: calc(74px + env(safe-area-inset-top)) clamp(24px, 6vw, 90px) 50px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(44px, 6vw, 72px) clamp(40px, 6vw, 88px); max-width: 1320px; margin: 0 auto; }
.map h2 { font-size: clamp(32px, 3vw, 42px); line-height: 1.08; margin-bottom: 14px; }
.map section > a { display: block; padding: 3px 0; font-size: 15.5px; opacity: .82; overflow-wrap: anywhere; }
.map section > a:hover { opacity: 1; }

.work { background: #05060b; }
.wash { position: fixed; inset: -8%; background-size: cover; background-position: center; filter: blur(50px) saturate(1.3) brightness(.42); }
.work-in { position: relative; max-width: 1100px; margin: 0 auto; padding: calc(30px + env(safe-area-inset-top)) clamp(18px, 4vw, 40px) 90px; }
.hero { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto 38px; box-shadow: 0 34px 100px rgba(0, 0, 0, .75); }
.eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.work h1 { font-size: clamp(52px, 9vw, 122px); text-shadow: 0 2px 26px rgba(0, 0, 0, .6); }
.lede { font: 400 clamp(23px, 2.6vw, 33px)/1.3 var(--serif); margin: 16px 0 52px; max-width: 830px; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.outlink { display: inline-block; margin: -30px 0 52px; font: italic 500 clamp(21px, 2.2vw, 27px)/1.3 var(--serif); border-bottom: 1px solid rgba(236, 235, 231, .55); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); transition: border-color .25s; }
.outlink:hover { border-color: var(--ink); }
.media { display: flex; flex-direction: column; gap: clamp(26px, 5vw, 60px); align-items: center; }
.media img, .media video { display: block; max-width: 100%; max-height: 88vh; box-shadow: 0 26px 74px rgba(0, 0, 0, .7); }
.film { width: 100%; aspect-ratio: 16 / 9; box-shadow: 0 26px 74px rgba(0, 0, 0, .7); }
.film iframe { width: 100%; height: 100%; border: 0; display: block; }
.next { display: block; margin-top: 90px; text-align: right; font: 400 clamp(34px, 5vw, 66px)/1.05 var(--serif); transition: transform .5s var(--ease); }
.next span { display: block; font: 600 12px var(--sans); letter-spacing: .28em; text-transform: uppercase; margin-bottom: 8px; opacity: .8; }
.next:hover { transform: translateX(-10px); }

.page { background: radial-gradient(ellipse at 74% 0, #2c3f6c, #0a0f20 42%, #03040b 80%); }
.page-in { max-width: 780px; margin: 0 auto; padding: calc(84px + env(safe-area-inset-top)) 24px 90px; }
.wide .page-in { max-width: none; padding-left: 0; padding-right: 0; }
.wide h1, .show h2, .when { padding-left: clamp(24px, 6vw, 90px); padding-right: 24px; }
.page h1 { font-size: clamp(60px, 10vw, 128px); margin-bottom: 26px; }
.about-part { margin-top: clamp(56px, 8vw, 92px); }
.about-part:first-of-type { margin-top: clamp(30px, 4vw, 44px); }
.about-part h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 18px; }
.statement { font: 400 clamp(23px, 2.5vw, 31px)/1.42 var(--serif); margin: 0; }
.bio { margin: 0; font-size: 17px; line-height: 1.75; }
.page-in > .links { margin-top: clamp(40px, 5vw, 56px); }
.links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.links a { border-bottom: 1px solid var(--line); }
.cv-title { font-size: clamp(36px, 5vw, 56px); margin: clamp(90px, 12vw, 140px) 0 18px; }
.cv-title a { font: italic 500 19px var(--serif); margin-left: 14px; border-bottom: 1px solid var(--line); vertical-align: 7px; }
.cv h3 { font-size: 28px; margin: 52px 0 12px; }
.cv-row { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 5px 0; font-size: 15px; }
.cv-row span { color: var(--muted); }
.cv-row p { margin: 0; }
.show { margin-bottom: clamp(70px, 9vw, 110px); }
.show h2 { font-size: clamp(38px, 5.4vw, 72px); }
.when { margin: 4px 0 18px; font: italic 500 20px var(--serif); color: var(--muted); }
.scroller { position: relative; }
.row { display: flex; gap: 14px; overflow-x: auto; padding: 8px clamp(24px, 6vw, 90px) 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(236, 235, 231, .45) transparent; cursor: grab; outline-offset: -4px; }
.row::-webkit-scrollbar { height: 5px; }
.row::-webkit-scrollbar-thumb { background: rgba(236, 235, 231, .45); border-radius: 9px; }
.row.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.row.dragging img { pointer-events: none; }
.nudge { position: absolute; z-index: 2; top: calc(50% - 32px); width: 50px; height: 50px; border-radius: 50%; font: 300 25px/1 var(--serif); background: rgba(5, 7, 15, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line); transition: opacity .3s, background .25s; }
.nudge:hover { background: rgba(5, 7, 15, .85); }
.nudge.back { left: clamp(10px, 2vw, 26px); }
.nudge.on { right: clamp(10px, 2vw, 26px); }
.nudge.hide { opacity: 0; pointer-events: none; }
.row img { height: min(58vh, 70vw); flex: none; scroll-snap-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }

/* ----- A sketch from the Playground: it fills the whole world ----- */
.play { overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #16264a, #05070f 72%); }
.play-stage { position: absolute; inset: 0; }
.play-stage .canvas-holder { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; }
.play-stage canvas { display: block; }
.play-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: italic 500 28px var(--serif); pointer-events: none; }
.play-label { position: absolute; left: clamp(20px, 4vw, 54px); bottom: calc(24px + env(safe-area-inset-bottom)); pointer-events: none; text-shadow: 0 1px 14px #000, 0 0 4px rgba(0, 0, 0, .8); transition: opacity 1.4s 4s; }
.play.live .play-label { opacity: .28; }
.play-label h1 { font-size: clamp(34px, 5vw, 64px); }
.play-label p { margin: 4px 0 0; font-size: 14px; }
.play-next { position: absolute; right: clamp(18px, 3vw, 44px); bottom: calc(24px + env(safe-area-inset-bottom)); font: italic 500 clamp(19px, 2vw, 25px) var(--serif); text-shadow: 0 1px 12px #000; opacity: .85; }
.play-next:hover { opacity: 1; }
.chapter small { display: block; max-width: 620px; margin: 22px auto 0; font: 500 clamp(15px, 1.5vw, 19px)/1.55 var(--sans); }

/* ----- For people who ask for less motion, or have no 3D ----- */
body.plain, body.plain #ui { position: static; overflow: visible; height: auto; }
html:has(body.plain) { overflow: auto; }
body.plain { overflow: auto; background: radial-gradient(ellipse at 74% 0, #2c3f6c, #0a0f20 42%, #03040b 80%) fixed; }
body.plain #lake, body.plain .chapter, body.plain .caption, body.plain .ending, body.plain .drift { display: none; }
body.plain #ui { pointer-events: auto; }
body.plain .intro { position: static; padding: 80px 24px 10px; }
.plain-list { padding: 20px 24px 60px; max-width: 1200px; }
.plain-list h2 { font-size: 46px; margin: 40px 0 16px; }
.plain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.plain-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.plain-grid span { display: block; margin-top: 8px; font: 400 24px var(--serif); }
.plain-more { display: flex; gap: 24px; margin-top: 50px; font: 400 32px var(--serif); }
@media (prefers-reduced-motion: reduce) { .sheet, .drift span { animation: none; } }
@media (max-width: 800px) { .cv-row { grid-template-columns: 86px 1fr; } .hint, .role { letter-spacing: .22em; } }