@font-face{font-family:Archivo;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/archivo-300.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500.woff2) format('woff2')}
:root{
  color-scheme:dark;
  --void:    #08090A;
  --void-2:  #101214;
  --void-3:  #191C1F;
  --line:    #262A2E;
  --line-2:  #3A4046;
  --gold:    #E0A33A;
  --gold-hi: #FFD089;
  --text:    #EDEFF0;
  --text-2:  #A8B0B5;
  --text-3:  #8A9398;
  --r:       2px;
  --gut:     clamp(1.25rem, 5vw, 4rem);
  --read:    min(46rem, 100%);
  --prose:   min(36rem, 100%);
  --ease:    cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:var(--void); }
html{ -webkit-text-size-adjust:100%; scrollbar-color:var(--line-2) var(--void); }
body{ margin:0; font-family:"Archivo",ui-sans-serif,system-ui,sans-serif; color:var(--text);
  font-size:clamp(.95rem,.45vw + .85rem,1.0625rem); line-height:1.62; font-synthesis-weight:none; }
::selection{ background:#5A3C0B; color:var(--gold-hi); }
:focus-visible{ outline:1.5px solid var(--gold-hi); outline-offset:3px; border-radius:var(--r); }
a{ color:inherit } figure{ margin:0 } img{ display:block; max-width:100%; height:auto }

.skip{ position:absolute; left:-9999px; top:0; z-index:70; padding:.7rem 1.1rem;
  background:var(--void-3); color:var(--text); font:500 .8rem/1 "JetBrains Mono",monospace }
.skip:focus{ left:1rem; top:1rem }

.top{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:clamp(1.1rem,3vh,1.8rem) var(--gut); }
.mark{ font-size:.95rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; transition:color .25s }
.mark:hover{ color:var(--gold-hi) }
.top-link{ font:500 .74rem/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .25s, border-color .25s }
.top-link:hover{ color:var(--gold-hi); border-color:var(--gold-hi) }

.year{ display:block; margin:0 0 1.2rem; font:400 .72rem/1 "JetBrains Mono",monospace;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }

.wrap{ padding-inline:var(--gut) }

.index-head{ padding:clamp(3.5rem,12vh,7.5rem) 0 0; text-align:center }
.index-head h1{ margin:0; font-size:clamp(2.2rem,6vw,3.6rem); font-weight:400; letter-spacing:.07em;
  text-transform:uppercase; line-height:1.05 }
.index-head p{ margin:1.6rem auto 0; max-width:var(--prose); font-size:clamp(1rem,.6vw + .9rem,1.14rem) }

.posts{ margin:clamp(2.5rem,7vh,4rem) auto 0; max-width:var(--prose); padding:0; list-style:none }
.posts li{ border-top:1px solid var(--line) }
.posts li:last-child{ border-bottom:1px solid var(--line) }
.posts a{ display:block; padding:1.4rem 0; text-decoration:none; color:var(--text-2);
  transition:color .2s, padding-left .25s var(--ease) }
.posts a:hover{ padding-left:.35rem }
.posts b{ display:block; font-size:clamp(1.15rem,1.2vw + .9rem,1.45rem); font-weight:300;
  line-height:1.25; color:var(--text); transition:color .2s }
.posts a:hover b{ color:var(--gold-hi) }
.posts .dek{ display:block; margin-top:.5rem; font-size:.95rem; line-height:1.5 }
.posts time{ display:block; margin-top:.7rem; font:400 .8rem/1.35 "JetBrains Mono",monospace;
  letter-spacing:.06em; color:var(--text-3); transition:color .2s }
.posts a:hover time{ color:var(--gold) }

.post-head{ padding:clamp(3rem,10vh,6.5rem) 0 0; max-width:var(--prose); margin-inline:auto }
.post-head h1{ margin:0; font-size:clamp(2.1rem,5vw,3.5rem); font-weight:300; letter-spacing:.005em;
  line-height:1.15; text-wrap:balance }
.post-head .dek{ margin:1.3rem 0 0; font-size:clamp(1.05rem,.6vw + .95rem,1.22rem); color:var(--text-2); line-height:1.5 }
.byline{ margin:1.8rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  font:400 .8rem/1.5 "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--text-3) }

.body{ max-width:var(--prose); margin:clamp(2.2rem,6vh,3.4rem) auto 0; font-size:clamp(1rem,.35vw + .93rem,1.125rem); line-height:1.72 }
.body > *{ margin:0 0 1.35em }
.body > :last-child{ margin-bottom:0 }
.body h2{ margin:2.4em 0 .8em; font-size:clamp(1.25rem,1.2vw + 1rem,1.6rem); font-weight:400;
  letter-spacing:0; line-height:1.25 }
.body h3{ margin:2em 0 .6em; font-size:1.1rem; font-weight:600; line-height:1.3 }
.body a{ text-decoration:none; border-bottom:1px solid var(--line-2); transition:color .2s, border-color .2s }
.body a:hover{ color:var(--gold-hi); border-color:var(--gold-hi) }
.body strong{ font-weight:600 }
.body ul, .body ol{ padding-left:1.25em }
.body li{ margin:.4em 0 }
.body li::marker{ color:var(--text-3) }
.body blockquote{ margin:2em 0; padding:0 0 0 1.3rem; border-left:2px solid var(--gold);
  font-size:clamp(1.15rem,1vw + .95rem,1.4rem); font-weight:300; line-height:1.4; color:var(--gold-hi) }
.body blockquote p{ margin:0 }
.body figure{ margin:2.4em 0 }
.body figure.wide{ margin-inline:calc((var(--prose) - var(--read)) / 2) }
@media (max-width:48rem){ .body figure.wide{ margin-inline:0 } }
.body figure img{ width:100%; background:var(--void-3) }
.body figcaption{ margin-top:.7rem; font:400 .8rem/1.5 "JetBrains Mono",monospace; letter-spacing:.03em; color:var(--text-3) }
.body hr{ margin:2.6em auto; width:3rem; border:0; border-top:1px solid var(--line-2) }

.more{ max-width:var(--prose); margin:clamp(4rem,12vh,7rem) auto 0 }
.more h2{ margin:0; font:400 .72rem/1 "JetBrains Mono",monospace; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold) }
.more .posts{ margin-top:1.2rem }

.foot{ margin-top:clamp(4.5rem,14vh,8rem); padding:clamp(2.5rem,7vh,4rem) var(--gut) clamp(2.5rem,6vh,3.5rem);
  border-top:1px solid var(--line); text-align:center }
.foot .final{ margin:0 auto; max-width:26rem; font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:300; line-height:1.2 }
.foot p.sign{ margin:1.2rem 0 0; font:400 .74rem/1.5 "JetBrains Mono",monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.foot nav{ margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem 2.2rem }