:root{
  color-scheme:light;
  --ink:#0B0B0B;
  --paper:#FFFFFF;
  --rule:#DCDCD8;
  --muted:#6C6C68;
  --display:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(32px,6vw,72px);
}
/* ponytail: two tokens flip, everything else is derived from them */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#EDEDEA;
  --paper:#0C0C0C;
  --rule:#2B2B29;
  --muted:#8B8B86;
}
.theme{
  position:fixed;top:14px;right:var(--gut);z-index:9;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:50%;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.theme:hover,.theme:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.theme svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.5}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) transparent}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{padding:0 var(--gut)}

/* ---- utility type ---- */
h2.eyebrow{margin:0;font-weight:500}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pipe{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
  color:var(--muted);
}
.pipe b{font-weight:500;color:var(--ink)}

/* ---- hero ---- */
header{padding:var(--gut) 0 clamp(40px,7vw,76px)}
h1{
  margin:0;
  font-weight:800;font-variation-settings:"wdth" 125;
  font-size:clamp(36px,8vw,92px);line-height:.88;
  letter-spacing:-.025em;text-transform:uppercase;
}
.alias{
  margin:12px 0 0;font-family:var(--mono);font-size:13px;
  letter-spacing:.02em;color:var(--muted);
}
.alias::before{content:"a.k.a. ";color:color-mix(in srgb,var(--muted) 65%,var(--paper))}
.facts{
  margin:7px 0 0;font-family:var(--mono);font-size:12px;
  letter-spacing:.01em;color:var(--muted);
}
.facts b{font-weight:500;color:var(--ink)}
.facts span{padding:0 .35em;color:color-mix(in srgb,var(--muted) 55%,var(--paper))}
.lede{
  max-width:33em;margin:clamp(26px,4vw,40px) 0 0;
  font-size:clamp(18px,2.2vw,23px);line-height:1.45;letter-spacing:-.01em;
}
.lede em{font-style:normal;box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--ink) 9%,transparent)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vw,40px)}
.links a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;text-decoration:none;
  padding:9px 15px;border:1px solid var(--ink);
  transition:background .18s ease,color .18s ease;
}
.links a:hover,.links a:focus-visible{background:var(--ink);color:var(--paper)}
.ico{width:14px;height:14px;flex:none;fill:currentColor}
.ico.rotur{fill:none;stroke:currentColor;stroke-width:14;stroke-linejoin:round}
.ico.mail{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- scroll cue ---- */
/* ponytail: pinned to the viewport, so header content can never push it off-screen */
.scroll{
  position:fixed;left:0;right:0;bottom:22px;z-index:1;pointer-events:none;
  display:flex;justify-content:center;color:var(--muted);
}
.scroll svg{
  width:clamp(44px,7vw,72px);height:auto;
  stroke:currentColor;stroke-width:1;fill:none;opacity:.5;
  stroke-linecap:round;stroke-linejoin:round;
  animation:nudge 1.9s cubic-bezier(.4,0,.4,1) infinite;
}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(5px)}}
/* ponytail: native scroll-driven fade, no JS. Unsupported browsers just keep it visible. */
@supports (animation-timeline:scroll()){
  .scroll{
    animation:fadeout linear both;
    animation-timeline:scroll();animation-range:0 160px;
  }
}
@keyframes fadeout{to{opacity:0}}

/* ---- section frame ---- */
section{padding:clamp(44px,6vw,80px) 0}
.head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.head .count{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---- featured work ---- */
.work{list-style:none;margin:0;padding:0}
.work li{border-bottom:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:1fr;gap:16px;
  padding:clamp(26px,3.4vw,42px) clamp(0px,2vw,26px);
  text-decoration:none;
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.row:hover,.row:focus-visible{
  background:var(--ink);color:var(--paper);outline:none;
}
.row:hover .pipe,.row:focus-visible .pipe,
.row:hover .meta,.row:focus-visible .meta,
.row:hover .status,.row:focus-visible .status{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.row:hover .pipe b,.row:focus-visible .pipe b{color:var(--paper)}
.row:hover .dot,.row:focus-visible .dot{background:var(--paper)}
.row:hover .dot.open,.row:focus-visible .dot.open{background:none;box-shadow:inset 0 0 0 1px var(--paper)}
@media(min-width:820px){
  .row{grid-template-columns:minmax(0,7.5fr) minmax(0,10fr);gap:clamp(24px,4vw,60px)}
  .row:hover,.row:focus-visible{padding-left:26px}
}
.row h3{
  margin:8px 0 0;font-size:clamp(27px,3.6vw,42px);line-height:1.02;
  font-weight:700;font-variation-settings:"wdth" 112;letter-spacing:-.022em;
}
.row p{margin:0;max-width:46em}
.status{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.dot{width:8px;height:8px;background:var(--ink);flex:none}
.dot.open{background:none;box-shadow:inset 0 0 0 1px var(--muted)}
.meta{
  margin-top:16px;font-family:var(--mono);font-size:11.5px;
  color:var(--muted);line-height:1.85;
}

/* ---- secondary grid ---- */
/* ponytail: rules drawn per card, so a half-empty last row leaves no grey block */
.more{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:1px;margin-top:1px;
}
/* ponytail: full-bleed wrap would let auto-fit run to 5+ columns; hold it at 4 */
@media(min-width:900px){.more{grid-template-columns:repeat(4,1fr)}}
.more a,.more article{
  display:flex;flex-direction:column;background:var(--paper);padding:20px;
  box-shadow:0 0 0 1px var(--rule);
  text-decoration:none;transition:background .2s ease,color .2s ease;
}
.more .status{margin-top:auto;padding-top:16px;font-size:11px}
.more a:hover,.more a:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.more a:hover p,.more a:focus-visible p{color:color-mix(in srgb,var(--paper) 66%,transparent)}
.more a:hover .pipe,.more a:focus-visible .pipe{color:color-mix(in srgb,var(--paper) 66%,transparent)}
.more a:hover .dot,.more a:focus-visible .dot{background:var(--paper)}
.more h4{
  margin:0;font-size:18px;font-weight:700;
  font-variation-settings:"wdth" 108;letter-spacing:-.015em;
}
.more p{margin:7px 0 0;font-size:14.5px;color:color-mix(in srgb,var(--ink) 88%,var(--paper));line-height:1.5}
.more .pipe{margin-bottom:10px;display:block;font-size:11.5px}

/* ---- footer ---- */
footer{
  border-top:1px solid var(--ink);padding:clamp(36px,5vw,60px) 0 60px;
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;
  align-items:flex-end;
}
footer .colophon{font-family:var(--mono);font-size:11.5px;color:var(--muted);max-width:30em}

/* ---- entrance ---- */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.rise:nth-child(2){animation-delay:.07s}
.rise:nth-child(3){animation-delay:.14s}
.rise:nth-child(4){animation-delay:.21s}
.rise:nth-child(5){animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .scroll svg{animation:none}
  *{transition:none!important}
}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}