:root{
  --bg:#0a0b0d;
  --ink:#e9e6df;
  --read:rgba(233,230,223,.80);
  --read-hi:#f3f0e8;
  --dim:rgba(233,230,223,.42);
  --faint:rgba(233,230,223,.30);
  --hair:rgba(233,230,223,.14);
  --glow:rgba(233,230,223,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,
    rgba(233,230,223,.035) 0%, rgba(233,230,223,0) 55%);
}

#grain{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;
  mix-blend-mode:overlay;opacity:.08;image-rendering:auto;
}
#veil{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(10,11,13,.18) 25%, rgba(6,7,8,.74) 100%);
}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.4rem,5vw,3rem);
  pointer-events:none;
}
.mark{
  pointer-events:auto;
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:1.45rem;letter-spacing:.2em;text-indent:.2em;
  color:var(--ink);text-decoration:none;opacity:.92;
  transition:opacity .5s ease;
}
.mark:hover{opacity:1}
.back{
  pointer-events:auto;
  font-weight:300;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;
  font-size:.62rem;color:var(--dim);text-decoration:none;transition:color .5s ease;
}
.back:hover{color:var(--ink)}

.doc{
  position:relative;z-index:5;
  max-width:46rem;margin:0 auto;
  padding:clamp(7rem,18vh,11rem) clamp(1.6rem,6vw,2rem) clamp(5rem,12vh,8rem);
}

.kicker{
  font-weight:300;text-transform:uppercase;
  letter-spacing:.5em;text-indent:.5em;font-size:1.06rem;
  color:rgba(233,230,223,.58);margin-bottom:2.4rem;
}

.lede{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.32;
  letter-spacing:.005em;color:var(--ink);
  margin-bottom:2.8rem;text-wrap:balance;
}
.lede em{font-style:italic;color:var(--read-hi)}

.body p{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.5rem,2.9vw,1.72rem);line-height:1.78;
  letter-spacing:.004em;color:var(--read);
  margin-bottom:1.5rem;text-wrap:pretty;
}
.body p:first-child{margin-top:0}
.body em{font-style:italic;color:var(--ink)}
.body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);
  transition:border-color .4s ease}
.body a:hover{border-color:var(--ink)}

.label{
  font-family:'Jost',sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.42em;text-indent:.42em;
  font-size:.94rem;color:var(--faint);
  margin:3.4rem 0 1.4rem;
}
.label:first-child{margin-top:0}

.lede,.body p,.label,.coda{
  transition:color .5s ease, text-shadow .5s ease;
}
.lede:hover{color:#f7f4ed;text-shadow:0 0 26px var(--glow)}
.body p:hover{color:var(--read-hi);text-shadow:0 0 22px var(--glow)}
.label:hover{color:var(--dim);text-shadow:0 0 18px rgba(233,230,223,.10)}
.coda:hover{color:#f7f4ed;text-shadow:0 0 24px var(--glow)}

.rule{
  border:0;height:1px;margin:3.4rem 0;
  background:linear-gradient(90deg,
    rgba(233,230,223,0) 0%,
    rgba(233,230,223,.22) 50%,
    rgba(233,230,223,0) 100%);
}

.close{margin-top:3.4rem;text-align:center;}
.close .coda{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.42rem,3.2vw,1.78rem);line-height:1.4;color:var(--ink);
  margin-bottom:2.4rem;
}
.doorways{display:flex;align-items:center;justify-content:center;gap:1.9rem;}
.door{
  position:relative;font-family:'Jost',sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;font-size:.82rem;
  color:var(--dim);text-decoration:none;padding:.4em 0;transition:color .6s ease;
}
.door::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;
  background:var(--ink);transform:translateX(-50%);
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.door:hover{color:var(--ink)}
.door:hover::after{width:100%}
.sep{width:1px;height:1.15em;background:var(--hair)}

.doc>*{opacity:0;transform:translateY(14px);
  animation:rise 1.4s cubic-bezier(.2,.7,.2,1) forwards;}
.doc>*:nth-child(1){animation-delay:.15s}
.doc>*:nth-child(2){animation-delay:.30s}
.doc>*:nth-child(n+3){animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

@media (max-width:560px){
  .doorways{flex-direction:column;gap:1.1rem}
  .sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .doc>*{animation:none;opacity:1;transform:none}
}