@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(/fonts/instrument-serif-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:300 800;src:url(/fonts/inter-var.woff2) format("woff2");font-display:swap}
:root{--bg:#0b0a09;--fg:#e9e3d7;--dim:#8d877c;--faint:#4a463f;--acc:#d4a24c;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,64px);--slow:1.4s cubic-bezier(.2,.6,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:300 16px/1.6 var(--sans);text-align:center;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:51;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
a{color:inherit;text-decoration:none}
.label,.wordmark,.wr summary,.home{font:500 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.bar{position:absolute;top:0;left:0;right:0;z-index:5;padding:26px var(--pad);text-align:left}
.wordmark{color:var(--dim);letter-spacing:.24em;text-transform:none}

.enc{min-height:100svh;padding:calc(50svh - 150px) var(--pad) 18svh;display:flex;flex-direction:column;align-items:center}
.label{color:var(--dim);margin:0 0 34px}
.label i{font-style:normal;color:var(--faint)}
.setup{margin:0;max-width:20em;font:italic 400 clamp(34px,4.8vw,64px)/1.1 var(--serif);text-wrap:balance}
.hmb{margin:clamp(40px,7vh,64px) 0 0;font:italic 400 clamp(24px,2.4vw,30px)/1 var(--serif);color:var(--acc);background:transparent;
  border:1px solid rgba(212,162,76,.55);border-radius:999px;padding:16px 36px 18px;cursor:pointer;transition:background .6s,border-color .6s,color .6s}
.hmb:hover{background:rgba(212,162,76,.08);border-color:var(--acc)}
.hmb:focus-visible{outline:1px solid var(--acc);outline-offset:6px}
.hmb:active{transform:translateY(1px)}
.hmb.held{border-color:rgba(212,162,76,.22)}
html:not(.js) .hmb{display:none}

.after{width:100%;display:flex;flex-direction:column;align-items:center}
.js .after:not(.open){display:none}
.reveal{margin:clamp(48px,8vh,80px) auto 0;max-width:22em;font:400 clamp(24px,2.6vw,34px)/1.25 var(--serif);text-wrap:balance;scroll-margin-top:22vh}
.vid{margin:clamp(40px,7vh,64px) auto 0;width:min(880px,100%)}
.stage{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden;border-radius:2px;outline:1px solid #1f1d1a}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%)}
.stage svg{display:block;width:100%;height:100%}
.nojs{margin:0;padding:12% 10%;font:italic 400 20px/1.4 var(--serif);color:var(--dim)}
.wr{margin:36px auto 0;max-width:34em}
.wr summary{list-style:none;cursor:pointer;color:var(--faint);display:inline-block;padding:6px 2px;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.wr summary::-webkit-details-marker{display:none}
.wr summary:hover,.wr[open] summary{color:var(--dim);border-color:var(--faint)}
.wr summary:focus-visible{outline:1px solid var(--dim);outline-offset:4px}
.wr p{margin:18px auto 0;font-size:14px;line-height:1.7;color:var(--dim);text-wrap:pretty}

/* slow, plain fades */
.js .after.open .reveal{animation:fade var(--slow) both}
.js .after.open .vid{animation:fade var(--slow) .9s both}
.js .after .wr{opacity:0;transition:opacity 1.2s}
.js .after.done .wr{opacity:1}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.foot{padding:0 var(--pad) 60px;color:var(--dim)}
.sibs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:12px}
.sibs a{color:var(--dim);border-bottom:1px solid var(--faint)}
.sibs a:hover{color:var(--fg)}
.fine{margin:14px auto 0;font-size:12px;color:var(--faint)}
.nf .reveal{margin-top:40px}
.home{display:inline-block;margin-top:44px;color:var(--dim);border-bottom:1px solid var(--faint);padding-bottom:6px}

@media (max-width:640px){
  .enc{padding-top:calc(50svh - 170px)}
  .vid{width:calc(100% + 2*var(--pad));margin-inline:calc(-1*var(--pad))}
  .label{letter-spacing:.24em;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .js .after.open .reveal,.js .after.open .vid{animation:none}
  .js .after .wr{opacity:1;transition:none}
  .hmb{transition:none}
}