/* Shared by both pages. Layers: nav 20, grain 40. Dialogs sit in the top layer. */
@font-face{font-family:"Switzer";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/switzer.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 400;font-display:swap;src:url("assets/fonts/newsreader-italic.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 400;font-display:swap;src:url("assets/fonts/jetbrains-mono.woff2") format("woff2")}
:root{
  --ox:#4a140d;
  --ground:#2a0b07;
  --text:#f4e4d0;
  --gold:#d9b47c;
  --cream:#f4e4d0;
  --soft:#f4e4d0;
  --ink:#1e0906;
  --line:rgb(244 228 208 / .24);
  --green:#1f3319;
  --rust:#d4702a;
  --gut:clamp(20px,3.4vw,52px);
  --col:clamp(12px,1.5vw,22px);
  --sans:"Switzer",system-ui,sans-serif;
  --accent:"Newsreader",Georgia,serif;
  --grain:url("assets/grain-ground.webp");
  --grain-ox:url("assets/grain-ox.webp");
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground) var(--grain);scroll-padding-top:90px;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ground) var(--grain);color:var(--text);font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.55;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,blockquote,ul,figure{margin:0;padding:0;font-weight:400}
ul{list-style:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.skip{position:fixed;left:var(--gut);top:-60px;z-index:50;background:var(--cream);color:var(--ground);padding:8px 14px}
.skip:focus{top:12px}

/* Type: Switzer does the work, with one word in Newsreader italic to give a line its voice */
em{font-family:var(--accent);font-style:italic;font-weight:300;font-size:1.08em;letter-spacing:-.022em;font-optical-sizing:auto}
.display{font-size:clamp(2.95rem,7.4vw,7rem);font-weight:500;line-height:1;letter-spacing:-.04em}
.lead{font-size:clamp(1.45rem,2.3vw,2.15rem);font-weight:400;line-height:1.28;letter-spacing:-.016em}
.label{font-size:.9375rem;font-weight:500;line-height:1.3;letter-spacing:-.005em}

/* Film grain on a fixed layer, so scrolling never repaints it */
.grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.paper{background:#5c1e14 url("assets/paper.webp") center/cover}

/* Liquid glass header. A web approximation, not an Apple component.
   Blur, tint and light work everywhere. Edge refraction only applies in Chromium browsers.
   It is large at rest, slims down while you scroll down, stretches with scroll speed,
   catches light from the cursor, and turns dark over light sections. */
.nav{--gx:30%;--gy:0%;--sx:1;--sy:1;--dx:0px;--dy:0px;position:fixed;left:50%;width:max-content;top:18px;z-index:20;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(var(--sx),var(--sy));isolation:isolate;display:flex;align-items:center;gap:36px;height:60px;padding:0 30px;border-radius:999px;overflow:hidden;color:var(--cream);
  background:rgb(42 11 7 / .46);
  box-shadow:inset 0 0 0 1px rgb(255 250 245 / .16),inset 0 1px 0 rgb(255 250 245 / .22),0 10px 34px rgb(0 0 0 / .22);
  -webkit-backdrop-filter:blur(6px) saturate(190%) brightness(1.06);backdrop-filter:blur(6px) saturate(190%) brightness(1.06);
  transition:height .6s var(--ease),padding .6s var(--ease),gap .6s var(--ease),top .6s var(--ease),color .5s,background-color .5s}
.nav.refract{-webkit-backdrop-filter:url(#lens) blur(2.5px) saturate(190%) brightness(1.06);backdrop-filter:url(#lens) blur(2.5px) saturate(190%) brightness(1.06)}
/* Light that follows the cursor across the glass */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(130px 80px at var(--gx) var(--gy),rgb(255 250 245 / .2),transparent 72%);opacity:0;transition:opacity .4s;pointer-events:none}
.nav:hover::before{opacity:1}
.logo{display:block;flex:none;line-height:0}
.logo img{height:18px;width:auto;transition:height .6s var(--ease),filter .5s}
.nav ul{position:relative;display:flex;align-items:center;gap:6px}
.nav li{position:relative;z-index:1}
.nav li a{display:block;padding:10px 13px;font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;color:inherit;transition:font-size .6s var(--ease),padding .6s var(--ease)}
/* A bead of glass slides to whichever link you're on */
.bead{position:absolute;left:0;top:50%;height:38px;width:60px;margin-top:-19px;border-radius:999px;background:rgb(255 248 240 / .12);opacity:0;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s,height .6s var(--ease),margin .6s var(--ease)}
.nav.small{height:50px;padding:0 22px;gap:22px;top:12px}
.nav.small .logo img{height:16px}
.nav.small li a{font-size:.875rem;padding:8px 11px}
.nav.small .bead{height:30px;margin-top:-15px}
/* Over light sections the glass flips to dark text */
.nav.on-light{color:var(--ink);background:rgb(30 9 6 / .05);box-shadow:inset 0 0 0 1px rgb(30 9 6 / .14)}
.nav.on-light .logo img{filter:brightness(.26) saturate(1.4)}
.nav.on-light .bead{background:rgb(30 9 6 / .1)}
@media (prefers-reduced-transparency:reduce){.nav,.nav.refract{background:#180a08;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Text animation: words rise out of a mask, one after another */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .18em;margin:-.08em -.03em -.18em}
.w i{display:inline-block;font-style:inherit}
.fade-words .w{overflow:visible}

/* Dialogs */
dialog{max-width:none;padding:0;border:0;background:#000;color:var(--cream);overflow:visible}
dialog::backdrop{background:rgb(10 4 3 / .95)}
.close{position:absolute;right:0;bottom:calc(100% + 8px);min-height:44px;padding:0 4px;border:0;background:none;color:var(--text);font:400 .9375rem var(--sans);cursor:pointer}
#player{width:min(1280px,calc(100vw - 32px),calc((100dvh - 128px) * 2.353))}
#player video{width:100%;aspect-ratio:2.353;background:#000}

@media (prefers-reduced-motion:no-preference){
  .grain{animation:jitter .9s steps(5) infinite}
  @keyframes jitter{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-2%,3%)}80%{transform:translate(4%,-1%)}}

  .js [data-split] .w i{transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i) * 70ms)}
  .js [data-split].in .w i{transform:none}
  .js .fade-words[data-split] .w i{transform:translateY(.35em);opacity:0;transition:transform .9s var(--ease),opacity .9s ease;transition-delay:calc(var(--i) * 12ms)}
  .js .fade-words[data-split].in .w i{transform:none;opacity:1}

  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1.2s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
}

@media (max-width:767px){
  .nav{top:12px;width:calc(100vw - 20px);justify-content:space-between;gap:10px;height:56px;padding:0 20px}
  .logo img{height:16px}
  .nav ul{gap:0}
  .nav li a{font-size:.875rem;padding:9px 8px}
  .nav .wide-only{display:none}
  .nav.small{height:46px;padding:0 16px;gap:8px;top:8px}
  .nav.small .logo img{height:14px}
  .nav.small li a{font-size:.8125rem;padding:7px 7px}
}

/* Custom cursor: a gold dot, a ring on links, a labelled disc over the work, oxblood on cream */
.has-cursor,.has-cursor *{cursor:none!important}
.cur{--c:var(--gold);position:fixed;left:0;top:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cur.show{opacity:1}
.cur.light{--c:#6e1f12}
.cur i{position:absolute;left:0;top:0;display:grid;place-items:center;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgb(14 9 8 / .28);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background-color .25s,box-shadow .25s}
.cur.link i{width:36px;height:36px;margin:-18px 0 0 -18px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.cur.tag i{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--c);box-shadow:none}
.cur b{font:500 .875rem var(--sans);color:var(--ink);opacity:0;transition:opacity .2s}
.cur.tag b{opacity:1}
.cur.down i{scale:.86}

/* Page transition: fade through dark, like a cut in a film */
.veil{position:fixed;inset:0;z-index:70;background:var(--ground);opacity:0;pointer-events:none}
.enter .veil{animation:veil-out .75s .05s ease both}
@keyframes veil-out{from{opacity:1}to{opacity:0}}
.leaving .veil{opacity:1;pointer-events:auto;transition:opacity .42s ease}

/* Custom scrollbar: the browser's own is hidden on devices with a mouse */
.has-rail{scrollbar-width:none}
.has-rail::-webkit-scrollbar{display:none}
.rail{position:fixed;top:0;right:0;bottom:0;z-index:30;width:16px}
.rail::before{content:"";position:absolute;top:0;bottom:0;right:7px;width:1px;background:rgb(244 228 208 / .1);transition:background-color .3s}
.rail i{position:absolute;top:0;right:6px;width:3px;border-radius:999px;background:var(--gold);transition:width .3s var(--ease),right .3s var(--ease),background-color .3s}
.rail:hover i,.rail.held i{right:5px;width:5px}
.rail.light::before{background:rgb(30 9 6 / .12)}
.rail.light i{background:#6e1f12}
.rail.none{display:none}