:root{
  --ink:#000;
  --dim:#8f8a82;
  --text:#c2bcb2;
  --bright:#f2eee7;
  --hair:rgba(242,238,231,.22);
  --fade:1200ms;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--serif);
  font-weight:200;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--hair);outline-offset:.4rem}

/* ---------------------------------------------------------------- index -- */

body.index{min-height:100svh;display:flex;align-items:center}

.veil{
  position:fixed;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 900ms ease;
  pointer-events:none;
}
.veil.on{opacity:.30}
.veil::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.25) 100%);
}

.contents{position:relative;z-index:1;padding:5rem 8vw;width:100%}

.mark{
  font-size:.82rem;font-weight:300;letter-spacing:.34em;
  color:var(--dim);margin:0 0 3.5rem;
}

.titles{list-style:none;margin:0;padding:0;max-width:22ch}
.titles li{margin:0 0 .35em}
.titles a{
  display:inline-block;
  font-size:clamp(2.1rem,5.4vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--text);
  transition:opacity 420ms ease,color 420ms ease;
}
@media (hover:hover){
  .titles:hover a{opacity:.28}
  .titles a:hover,.titles a:focus-visible{opacity:1;color:var(--bright)}
}
.empty{color:var(--dim);font-size:1.1rem;font-style:italic}

/* ---------------------------------------------------------------- story -- */

body.story{height:100svh;overflow:hidden;background:#000}
body.story.hidecursor{cursor:none}

.stage{position:fixed;inset:0;z-index:0;background:#000}
.frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity var(--fade) ease-in-out;
  will-change:opacity;
}
.frame.on{opacity:1}

.curtain,.closing{
  position:fixed;inset:0;z-index:20;
  background:#000;
  display:grid;place-items:center;
  padding:2rem;
  transition:opacity 1400ms ease;
}
.closing{opacity:0;pointer-events:none}
.closing.on{opacity:1;pointer-events:auto}
.curtain.gone{opacity:0;pointer-events:none}

.curtain-inner{text-align:center;max-width:24ch}

.story-title{
  font-style:italic;font-weight:200;
  font-size:clamp(2rem,6vw,4.2rem);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--bright);
  margin:0 0 2.6rem;
}

.enter{
  position:relative;
  background:none;border:0;padding:0 0 .5rem;
  font-family:var(--serif);font-weight:300;font-size:1rem;
  letter-spacing:.24em;
  color:var(--dim);cursor:pointer;
  transition:color 360ms ease;
}
.enter::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:var(--bright);
  transform:translateX(-50%);
  transition:width 520ms cubic-bezier(.2,.7,.2,1);
}
.enter:hover,.enter:focus-visible{color:var(--bright)}
.enter:hover::after,.enter:focus-visible::after{width:100%}
.enter[disabled]{opacity:.4;cursor:default}
.enter[disabled]::after{width:0}

.hint{
  margin:1.6rem 0 0;
  font-size:.78rem;letter-spacing:.2em;
  color:rgba(143,138,130,.7);
}
.hint a{border-bottom:1px solid var(--hair);padding-bottom:.15em}

/* chrome */
.chrome{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  opacity:0;pointer-events:none;
  transition:opacity 420ms ease;
  padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
}
.chrome.on{opacity:1;pointer-events:auto}

.scrub{position:relative;height:12px;display:flex;align-items:flex-end;cursor:pointer}
.scrub::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(242,238,231,.16)}
.scrub-fill{position:relative;height:1px;width:0;background:rgba(242,238,231,.8)}

.chrome-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.5rem 1.1rem;
  font-size:.74rem;letter-spacing:.22em;
}
.leave,.hold{
  background:none;border:0;padding:0;
  font-family:var(--serif);font-weight:300;font-size:.74rem;letter-spacing:.22em;
  color:var(--dim);cursor:pointer;transition:color 300ms ease;
}
.leave:hover,.hold:hover{color:var(--bright)}

@media (prefers-reduced-motion:reduce){
  :root{--fade:1ms}
  .curtain,.closing,.veil,.titles a,.enter::after{transition-duration:1ms}
}