:root{
  --paper:#F7F5F0;
  --paper-2:#EFECE4;
  --ink:#161412;
  --ink-2:#2A2724;
  --red:#C9081F;
  --grey:#8B8579;
  --hairline:rgba(22,20,18,.16);
  --hairline-inv:rgba(247,245,240,.18);
  --serif:"STIX Two Text",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --nav-h:64px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--red);color:var(--paper)}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;
  padding:10px 16px;transition:top .2s;
}
.skip:focus{top:12px}

.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;
  width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045;
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2%,3%)}
  40%{transform:translate(3%,-2%)}
  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(2%,2%)}
}

.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:none;
}
.cur-dot{width:6px;height:6px;background:var(--red)}
.cur-ring{
  width:32px;height:32px;
  border:1px solid var(--ink);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,opacity .3s;
}
body.cur-on .cur-dot,body.cur-on .cur-ring{display:block}
body.cur-hover .cur-ring{width:56px;height:56px;border-color:var(--red)}
body.cur-down .cur-ring{width:22px;height:22px}
body.cur-on.on-dark .cur-ring{border-color:var(--paper)}
body.cur-on.cur-hover.on-dark .cur-ring{border-color:var(--red)}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none!important}}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
  transition:transform .5s var(--ease);
}
.nav.hide{transform:translateY(-100%)}
.nav.inv{
  background:color-mix(in srgb,var(--ink) 80%,transparent);
  border-bottom-color:var(--hairline-inv);
  color:var(--paper);
}
.nav.inv .nav-time{color:var(--paper)}
.nav-mark{
  font-family:var(--serif);font-style:italic;font-size:19px;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:8px;
}
.nav-mark sup{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--red);letter-spacing:.08em}
.nav-links{display:flex;gap:clamp(14px,2.5vw,32px)}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-time{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  display:flex;align-items:center;gap:8px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,8,31,.45)}
  70%{box-shadow:0 0 0 9px rgba(201,8,31,0)}
  100%{box-shadow:0 0 0 0 rgba(201,8,31,0)}
}
@media (max-width:640px){.nav-time{display:none}}

.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;
  padding:calc(var(--nav-h) + 24px) clamp(16px,3vw,40px) 0;
  background-image:
    linear-gradient(var(--hairline) 1px,transparent 1px),
    linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:72px 72px;
  background-position:center top;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 10%,transparent 30%,var(--paper) 78%);
  pointer-events:none;
}
.hero>*{position:relative}

.hero-fig{
  position:absolute;
  right:0;
  bottom:10px;
  width:min(calc((100svh - 150px)*.694),calc(41vw - 68px),620px);
  margin:0;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s var(--ease) .55s,transform 1.1s var(--ease) .55s;
}
.fig-frame{position:relative}
.hero-fig img{
  display:block;width:100%;height:auto;
  opacity:.85;
}
.fig-frame.live picture{display:none}
.fig-frame canvas{display:block;width:100%;height:auto}
@media (max-width:1079px){
  .hero{justify-content:flex-start;padding-top:calc(var(--nav-h) + 14px)}
  .hero-fig{
    order:1;position:static;
    width:calc((100svh - 350px)*.694);
    min-width:228px;max-width:min(92vw,460px);
    margin:0 auto 22px;
  }
  .hero h1{order:2}
  .hero-foot{order:3}
}

.hero h1{
  font-weight:400;
  font-size:clamp(40px,7vw,120px);
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
  max-width:26ch;
}
.hero h1 em{font-style:italic}
.hero h1 .accent{color:var(--red);font-style:italic}

.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line-in{display:inline-block;transform:translateY(115%);transition:transform 1.1s var(--ease)}
.line:nth-child(2) .line-in{transition-delay:.09s}
.line:nth-child(3) .line-in{transition-delay:.18s}