:root{
  --ink:#121212; --bone:#F2EDE3; --red:#E8431A; --mute-ink:#9C978D; --mute-bone:#5E5A52;
  --ph:#FFE14D;
  --gut:clamp(20px,5vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px;background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:'Archivo','Arial Black','Segoe UI',system-ui,sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:420;-webkit-text-size-adjust:100%}
a{color:inherit}
h1,h2,h3{font-weight:850;letter-spacing:-.02em;line-height:.98}
h1{font-size:clamp(64px,13vw,200px);font-stretch:85%}
h2{font-size:clamp(48px,8vw,120px);font-stretch:88%}
h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.01em;line-height:1.05}
.dot{color:var(--red)}
.red .dot{color:var(--bone)}
.rule{height:8px;width:clamp(72px,9vw,140px);background:currentColor;margin-bottom:clamp(20px,3vw,36px)}

.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gut);background:var(--ink);border-bottom:4px solid var(--bone)}
.name{font-weight:850;font-stretch:85%;text-decoration:none;font-size:20px;letter-spacing:-.01em}
.bar nav{display:flex;gap:clamp(14px,3vw,32px)}
.bar nav a{font-weight:700;text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.bar nav a:hover,.bar nav a:focus-visible{border-bottom-color:var(--red)}

.slide{padding:clamp(56px,9vw,130px) var(--gut)}
.wrap{max-width:1400px;margin:0 auto}
.ink{background:var(--ink);color:var(--bone)}
.bone{background:var(--bone);color:var(--ink)}
.red{background:var(--red);color:var(--ink)}

.hero{min-height:calc(100svh - 58px);display:flex;align-items:center}
.lead{font-size:clamp(20px,2.2vw,34px);line-height:1.28;max-width:30em;margin-top:clamp(24px,3vw,40px)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.btn{display:inline-block;background:var(--red);color:var(--ink);font-weight:800;font-size:18px;padding:12px 22px;text-decoration:none;border:3px solid var(--red)}
.btn.line{background:none;color:var(--bone);border-color:var(--bone)}
.btn:hover,.btn:focus-visible{background:var(--bone);border-color:var(--bone);color:var(--ink)}

.grid{display:grid;gap:clamp(32px,4vw,56px) clamp(28px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:clamp(32px,5vw,64px)}
.item{border-top:8px solid currentColor;padding-top:22px;display:flex;flex-direction:column;gap:10px}
.item p{max-width:32em}
.role{font-weight:800;color:var(--red)}
.bone .role{color:var(--red)}
.link{margin-top:auto;padding-top:10px;font-weight:800;text-decoration:none;border-bottom:3px solid var(--red);align-self:flex-start}
.link:hover,.link:focus-visible{background:var(--red);color:var(--ink)}

.logo{height:150px;display:flex;align-items:center;justify-content:center;padding:22px;margin-bottom:8px;position:relative}
.logo img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.logo img.nc{max-height:100%}
.logo img.cg{max-height:90px}
.logo img.etf{max-height:100px}
.ink-tile{background:var(--ink)}
.bone-tile{background:#fff;border:3px solid var(--ink)}
.bone-tile img{max-height:60px}
.ph-tile{border:3px dashed var(--mute-ink);flex-direction:column;gap:10px}
.outline-tile{border:3px solid var(--mute-ink)}
.word{font-weight:850;font-stretch:85%;font-size:28px;letter-spacing:-.02em;text-align:center}
.ph{background:var(--ph);color:#121212;padding:2px 10px;font-weight:700;font-size:.8em;display:inline-block;line-height:1.3}

.contact{list-style:none;margin-top:clamp(32px,5vw,64px)}
.contact li{border-top:8px solid var(--ink);padding:18px 0 22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 32px}
.contact span{font-weight:800;flex-basis:100%}
@media (min-width:760px){.contact span{flex-basis:6em}}
.contact a{font-weight:850;font-stretch:88%;font-size:clamp(20px,5.6vw,64px);letter-spacing:-.02em;line-height:1.05;text-decoration:none;overflow-wrap:anywhere}
.contact a:hover,.contact a:focus-visible{background:var(--ink);color:var(--bone)}

.foot{padding:28px var(--gut);font-weight:500;font-size:15px;color:var(--mute-ink)}

:focus-visible{outline:3px solid var(--ph);outline-offset:3px}

/* motion: headline words rise, logos fade in */
.js .rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.js .rise .w>span{display:inline-block;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}
.js .rise.in .w>span{transform:none}
.js .logo img,.js .logo .word,.js .logo .ph{opacity:0;transition:opacity .8s ease .15s}
.js .item.in .logo img,.js .item.in .logo .word,.js .item.in .logo .ph{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise .w>span{transform:none;transition:none}
  .js .logo img,.js .logo .word,.js .logo .ph{opacity:1;transition:none}
}
@media (max-width:520px){
  .bar nav a{font-size:15px}
  .name{font-size:17px}
  .logo{height:120px}
}

/* dev page */
.bar nav a[aria-current]{border-bottom-color:var(--red)}
.project{max-width:760px;margin-top:clamp(28px,4vw,48px)}
.shots{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:clamp(32px,5vw,64px)}
.shots figure{border-top:8px solid currentColor;padding-top:18px}
.shots img{display:block;width:100%;height:auto;border:3px solid var(--ink)}
.shots figcaption{font-weight:800;margin-top:12px}
.js .shots img{opacity:0;transition:opacity .8s ease .15s}
.js .shots .item.in img{opacity:1}
@media (prefers-reduced-motion:reduce){.js .shots img{opacity:1;transition:none}}

/* media page */
.years{display:grid;gap:clamp(32px,4vw,56px);margin-top:clamp(32px,5vw,64px)}
.year{border-top:8px solid currentColor;padding-top:18px}
.eps{list-style:none}
.eps li{border-top:3px solid currentColor}
.eps li:first-child{margin-top:10px}
.eps a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding:14px 0;text-decoration:none}
.eps .t{font-weight:800;font-size:clamp(18px,1.8vw,24px);line-height:1.2;max-width:34em}
.eps .m{font-weight:600;color:var(--mute-bone);white-space:nowrap}
.eps a:hover .t,.eps a:focus-visible .t{background:var(--red);color:var(--ink)}