:root{--ink:#141414;--paper:#fff;--muted:#45433d;--line:#8a877f;--mono:'DM Mono',ui-monospace,monospace;--slab:'Zilla Slab',Georgia,serif;--body:'Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}
a{color:var(--ink)}a:hover{color:#6b4a00}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{max-width:1440px;margin:0 auto;padding:36px 72px 56px;display:flex;flex-direction:column;gap:36px}
.mono{font-family:var(--mono);letter-spacing:.08em}

/* header */
.top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:24px}
.strap{margin:0;font:13px/1.5 var(--mono);color:var(--muted)}
.logo{justify-self:center;display:flex;align-items:flex-end;gap:8px;text-decoration:none}
.logo b{font:400 78px/.9 'Lilita One','Arial Black',sans-serif;letter-spacing:-1px;color:var(--ink);text-shadow:-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 0 #fff,0 3px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,0 -3px 0 #fff,6px 7px 0 var(--ink)}
.logo i{margin-bottom:10px;padding:3px 9px;border:1.5px solid var(--ink);border-radius:999px;font:normal 12px var(--mono);letter-spacing:.06em;transform:rotate(-6deg);background:#ffc43d}
.nav{justify-self:end;display:flex;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;font:500 13px var(--mono);letter-spacing:.08em;text-decoration:none;box-shadow:3px 3px 0 var(--ink);background:#fff;white-space:nowrap}
.pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}

/* filter bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.find{display:flex;align-items:center;gap:10px}
.find input{width:240px;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:6px;font:13px var(--mono);background:#fff;color:var(--ink)}
.filters{display:flex;gap:18px;align-items:center}
.filters button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;font:500 13px var(--mono);letter-spacing:.08em;color:var(--ink);cursor:pointer;white-space:nowrap}
.filters button:hover{background:#f1efe9}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.filters button[aria-pressed=true] svg{stroke:#fff}
.filters svg{flex:none}

/* feature */
.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:center}
.shot{grid-column:span 7;position:relative;padding:44px 44px 64px;display:block}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;box-shadow:0 0 0 2px var(--ink);background:#222}
.shot .inset{position:absolute;right:-20px;bottom:-28px;width:34%;box-shadow:0 0 0 2px var(--ink),6px 6px 0 var(--ink);transform:rotate(3deg)}
.shot .tag{position:absolute;right:20%;bottom:26%;padding:4px 10px;background:var(--ink);color:#fff;font:11px var(--mono);letter-spacing:.1em;transform:rotate(3deg)}
.copy{grid-column:span 5;display:flex;flex-direction:column;gap:18px}
.meta{display:flex;align-items:center;gap:12px}
.num{padding:4px 12px;border:1.5px solid var(--ink);border-radius:999px;font:500 13px var(--mono)}
.num.next{border-style:dashed}
.new{padding:4px 10px;background:var(--ink);color:#ffc43d;border-radius:999px;font:12px var(--mono);letter-spacing:.08em}
.when{margin-left:auto;font:13px var(--mono);letter-spacing:.08em}
.feature h1{margin:0;font:700 104px/.9 var(--slab);letter-spacing:-2px}
.say{margin:0;font:600 24px var(--slab);color:var(--muted)}
.pitch{margin:0;font-size:19px;line-height:1.5;max-width:30em}
.facts{margin:0;font:13px var(--mono);letter-spacing:.06em;color:var(--muted)}
.ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.go{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;background:var(--ink);color:#fff;border-radius:999px;font:500 15px var(--mono);letter-spacing:.08em;text-decoration:none;box-shadow:4px 4px 0 var(--accent,#ffc43d),4px 4px 0 2px var(--ink)}
.go:hover{color:#fff;transform:translate(-1px,-1px)}
.ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border:2px solid var(--ink);border-radius:999px;font:500 14px var(--mono);letter-spacing:.08em;text-decoration:none}
.small{margin:0;font-size:14px;color:var(--muted)}

/* grid */
.every{display:flex;flex-direction:column;gap:22px;margin-top:18px}
.every-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;padding-top:22px;border-top:2px solid var(--ink)}
.every-head h2{margin:0;font:700 40px var(--slab)}
.every-head span{font:13px var(--mono);letter-spacing:.06em;color:var(--muted)}
.every-head span:last-child{margin-left:auto;color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.card{display:flex;flex-direction:column;gap:12px}
.card[hidden]{display:none}
.card .row{display:flex;align-items:center;justify-content:space-between}
.card .row span:last-child{font:13px var(--mono);letter-spacing:.08em}
.card .row .ws{color:var(--muted)}
.plate{display:block;padding:34px 30px;text-decoration:none}
.plate img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;box-shadow:0 0 0 2px var(--ink);background:#222}
a.plate{transition:transform .15s}
a.plate:hover{transform:rotate(-1deg) translateY(-2px)}
.card h3{margin:4px 0 0;font:700 32px/1 var(--slab)}
.card h3 a{text-decoration:none}
.card p{margin:0;font-size:16px;line-height:1.45;color:#2b2a26}
.card .labels{font:12px var(--mono);letter-spacing:.06em;color:var(--muted)}
.none{margin:0;font:14px var(--mono);color:var(--muted)}

/* about + footer */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:24px;border-top:2px solid var(--ink)}
.about h2{grid-column:span 4;margin:0;font:700 40px var(--slab)}
.about div{grid-column:span 7;display:flex;flex-direction:column;gap:12px;max-width:40em}
.about p{margin:0}
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:24px;border-top:2px solid var(--ink)}
.foot p{grid-column:span 6;margin:0;font-size:15px;line-height:1.5}
.foot .rule{grid-column:8/span 5;justify-self:end;text-align:right;font:12px/1.7 var(--mono);letter-spacing:.04em;color:var(--muted)}

@media (max-width:1100px){
  .page{padding:28px 32px 48px}
  .filters{gap:6px}
  .feature h1{font-size:80px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page{padding:18px 16px 36px;gap:24px}
  .top{grid-template-columns:1fr auto}
  .strap{display:none}
  .logo{justify-self:start}
  .logo b{font-size:50px;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,4px 5px 0 var(--ink)}
  .logo i{font-size:10px;margin-bottom:6px;padding:2px 7px}
  .nav .hide-s{display:none}
  .pill{min-height:44px;padding:0 14px;font-size:12px}
  .bar{flex-direction:column;align-items:stretch;gap:12px}
  .find input{width:100%;flex:1}
  .filters{overflow-x:auto;padding:0 0 4px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .filters button{border:1.5px solid var(--ink);scroll-snap-align:start}
  .feature{grid-template-columns:1fr;gap:28px}
  .shot{grid-column:auto;padding:22px 22px 40px}
  .shot .inset{right:-6px;bottom:-18px;width:44%}
  .shot .tag{right:24%;bottom:30%}
  .copy{grid-column:auto;gap:14px}
  .feature h1{font-size:72px}
  .say{font-size:20px}
  .pitch{font-size:17px}
  .ctas{flex-direction:column;align-items:stretch}
  .go,.ghost{justify-content:center;white-space:nowrap}
  .every-head span:last-child{display:none}
  .cards{grid-template-columns:1fr;gap:36px}
  .plate{padding:22px}
  .about,.foot{grid-template-columns:1fr}
  .about h2,.about div,.foot p,.foot .rule{grid-column:auto}
  .foot .rule{justify-self:start;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
