:root{
  --paper:#FBFBF9;
  --ink:#101010;
  --grey:#8A8A85;
  --red:#E1261C;
  --hair:#E3E3DE;
  --frame-w:2px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}

.mono{
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.red{color:var(--red)}

header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;
  background:linear-gradient(var(--paper) 65%,transparent);
}
header .wordmark{
  font-weight:900;
  font-variation-settings:'wdth' 125;
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;display:flex;align-items:center;gap:9px;
}
header .dot{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block}
nav{display:flex;gap:26px}
nav a{color:var(--ink);text-decoration:none;cursor:pointer}
nav a:hover,nav a:focus-visible{color:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.hero{
  min-height:92vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px 26px;
  position:relative;
}
.hero h1{
  font-weight:900;
  font-variation-settings:'wdth' 125;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.015em;
  font-size:clamp(64px,14.5vw,220px);
  user-select:none;
  overflow:hidden;
}
.hero h1 .row{
  display:block;
  transform:translateY(115%);
  animation:rise .95s cubic-bezier(.16,1,.3,1) forwards;
}
.hero h1 .row:nth-child(2){animation-delay:.14s}
@keyframes rise{to{transform:translateY(0)}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.inview{opacity:1;transform:none}


@media (prefers-reduced-motion:reduce){
  .hero h1 .row{transform:none;animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}
.hero h1 .frames{
  -webkit-text-stroke:var(--frame-w) var(--ink);
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero .strap{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--ink);
  margin-top:28px;padding-top:14px;gap:20px;flex-wrap:wrap;
}
.hero .strap p{max-width:52ch;font-size:15px;line-height:1.5}
.counter{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;white-space:nowrap}
.counter b{color:var(--red);font-weight:700}

.vf{position:absolute;width:26px;height:26px;border:0 solid var(--ink);opacity:.9;pointer-events:none}
.vf.tl{top:78px;left:24px;border-left-width:2px;border-top-width:2px}
.vf.tr{top:78px;right:24px;border-right-width:2px;border-top-width:2px}

.index{padding:60px 0 0}
.index .label{padding:0 24px 14px;display:flex;justify-content:space-between;color:var(--grey)}
.entry{
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:baseline;gap:18px;
  padding:26px 24px;
  border-top:1px solid var(--hair);
  text-decoration:none;color:var(--ink);
  position:relative;cursor:pointer;
}
.entry:last-of-type{border-bottom:1px solid var(--hair)}
.entry .no{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--grey)}
.entry .name{
  font-weight:900;
  font-variation-settings:'wdth' 118;
  text-transform:uppercase;
  font-size:clamp(30px,5.4vw,74px);
  line-height:.95;letter-spacing:-.01em;
  position:relative;display:inline-block;
  transition:color .18s ease;
}
.entry .meta{text-align:right;color:var(--grey);max-width:220px;font-size:13px;line-height:1.4}
.entry .name::before,.entry .name::after{
  content:'';position:absolute;width:16px;height:16px;opacity:0;
  transition:opacity .15s ease;
}
.entry .name::before{top:-10px;left:-16px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.entry .name::after{bottom:-6px;right:-16px;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}
.entry:hover .name::before,.entry:hover .name::after,
.entry:focus-visible .name::before,.entry:focus-visible .name::after{opacity:1}
.entry:hover .no,.entry:focus-visible .no{color:var(--red)}
.entry.soon{pointer-events:none}
.entry.soon .name{color:transparent;-webkit-text-stroke:1.5px var(--hair)}

.about{
  display:grid;grid-template-columns:110px 1fr;gap:18px;
  padding:80px 24px 100px;
}
.about h2{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.about p{
  font-size:clamp(19px,2.6vw,30px);
  line-height:1.35;max-width:34ch;font-weight:500;
}
.about p em{font-style:normal;color:var(--red)}

footer{
  border-top:1px solid var(--ink);
  padding:20px 24px 28px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--grey);
}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--red)}

.page{display:block}
.iv-hero{
  min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px 30px;border-bottom:1px solid var(--ink);
}
.iv-hero .kicker{color:var(--grey);margin-bottom:16px;display:flex;gap:22px;flex-wrap:wrap}
.iv-hero h1{
  font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;
  font-size:clamp(52px,11vw,170px);line-height:.88;letter-spacing:-.015em;
}
.iv-hero .lede{margin-top:22px;max-width:58ch;font-size:16px;line-height:1.55}
.qa{max-width:860px;margin:0 auto;padding:70px 24px 40px}
.q{
  display:grid;grid-template-columns:100px 1fr;gap:20px;
  padding:38px 0;border-top:1px solid var(--hair);
}
.q:first-child{border-top:0}
.q .fno{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;
  color:var(--red);white-space:nowrap;padding-top:6px;
}
.q h3{
  font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(20px,3vw,28px);line-height:1.15;margin-bottom:14px;
}
.q p{font-size:16px;line-height:1.65;color:#3c3c38;max-width:62ch;margin-bottom:12px}
.q p:last-child{margin-bottom:0}
.q p.ph{color:var(--grey);font-style:italic}
.iv-nav{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--ink);padding:22px 24px 40px;
}
.iv-nav a{cursor:pointer;color:var(--ink);text-decoration:none}
.iv-nav a:hover{color:var(--red)}

/* manifesto / essay */
.essay{max-width:760px;margin:0 auto;padding:70px 24px 30px}
.essay p{font-size:17px;line-height:1.7;color:#2e2e2a;max-width:60ch;margin-bottom:20px}
.essay p.small-note{color:var(--grey);font-size:14px}
.essay .sep{
  display:block;text-align:left;margin:44px 0;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--grey);
}
.essay h2{
  font-weight:900;font-variation-settings:'wdth' 118;text-transform:uppercase;
  font-size:clamp(24px,4vw,40px);line-height:1;margin:10px 0 22px;
}
.pull{
  border-left:3px solid var(--red);
  padding:6px 0 6px 22px;margin:38px 0;
}
.pull p{
  font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(20px,3.2vw,30px);line-height:1.2;color:var(--ink);margin:0;
}
.pull .who{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:12px}
.qlist{list-style:none;margin:26px 0 0}
.qlist li{
  display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--hair);
  font-weight:700;font-variation-settings:'wdth' 108;
  font-size:clamp(16px,2.2vw,20px);line-height:1.3;
}
.qlist li:last-child{border-bottom:1px solid var(--hair)}
.qlist .n{font-family:'Space Mono',monospace;font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--red)}
@media(max-width:720px){.qlist li{grid-template-columns:64px 1fr;gap:10px}}

@media(max-width:720px){
  .entry{grid-template-columns:64px 1fr;gap:12px}
  .entry .meta{display:none}
  .about{grid-template-columns:1fr;gap:10px}
  .q{grid-template-columns:1fr;gap:8px}
  nav{gap:16px}
  .vf{display:none}
}