/* Reset, typography, header, masthead band and page layout. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--bar-h) + 16px);-webkit-text-size-adjust:100%}
html.nav-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 var(--body);min-height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
h1,h2,h3{font-family:var(--head);font-stretch:80%;font-weight:800;letter-spacing:.005em;margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,52px)}h2{font-size:21px}h3{font-size:16px;font-stretch:90%}
p{text-wrap:pretty}
.mut{color:var(--mut)}.dim{color:var(--dim)}.sm{font-size:12.5px}.pos{color:var(--good)}.neg{color:var(--bad)}
.lk{color:var(--link);font-weight:600}.lk:hover{text-decoration:underline}
.m0{margin:0}.mt2{margin-top:2px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}
.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}
.ml4{margin-left:4px}.ml6{margin-left:6px}.tc{text-align:center}.clk{cursor:pointer}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--ink-tx);border-bottom:1px solid var(--ink-line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:8px;height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-stretch:78%;font-weight:800;font-size:23px;letter-spacing:.01em;padding:6px 4px;border-radius:8px}
.brand .logo{display:flex;flex:none}.brand .logo svg{display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:20px;flex:1;min-width:0}
.nav-l{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-ctl);border:0;background:transparent;color:var(--ink-mut);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer}
.nav-l:hover,.navdd.open>.nav-l{color:var(--ink-tx);background:var(--ink-hover)}
.nav-l.on{color:var(--ink-tx)}
.nav-l.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-12px;height:3px;border-radius:3px 3px 0 0;background:var(--acc)}
.nav-l svg{transition:transform .18s ease}
.navdd{position:relative;display:flex}
.navdd.open>.nav-l svg{transform:rotate(180deg)}
.navdd-menu{position:absolute;top:calc(100% + 13px);left:0;z-index:60;min-width:270px;padding:6px;display:none;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--pop)}
.navdd.open .navdd-menu{display:block;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.navdd-menu a{display:block;padding:9px 12px;border-radius:var(--r-ctl)}
.navdd-menu a:hover,.navdd-menu a[aria-current="page"]{background:var(--card2)}
.navdd-menu b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.navdd-menu span{display:block;color:var(--mut);font-size:12.5px;line-height:1.35;margin-top:1px}
.navdd-menu .sw{width:10px;height:10px;border-radius:3px;background:var(--pc);flex:none}
.acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.search-btn{display:inline-flex;align-items:center;gap:10px;height:36px;min-width:230px;padding:0 8px 0 12px;border-radius:var(--r-ctl);border:1px solid var(--ink-line);background:var(--ink-2);color:var(--ink-mut);font-size:13.5px;cursor:pointer}
.search-btn:hover{border-color:var(--ink-dim);color:var(--ink-tx)}
.search-btn span{flex:1;text-align:left}
.search-btn kbd{background:transparent;border-color:var(--ink-line);color:var(--ink-mut)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-ctl);border:1px solid var(--ink-line);background:transparent;color:var(--ink-mut);cursor:pointer}
.icon-btn:hover{color:var(--ink-tx);border-color:var(--ink-dim)}
.icon-btn:active,.search-btn:active{transform:translateY(1px)}
.menu-btn{display:none}
@media (max-width:1180px){.search-btn{min-width:0}.search-btn span{flex:none}.search-btn kbd{display:none}}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 1px) 0 0 0;z-index:60;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px clamp(16px,3vw,28px) 40px;overflow-y:auto;background:var(--ink)}
  header.open .nav{display:flex}
  .nav-l{height:46px;padding:0 4px;font-size:16px;color:var(--ink-tx);border-radius:0;border-bottom:1px solid var(--ink-line)}
  .nav-l:hover,.navdd.open>.nav-l{background:transparent}
  .nav-l.on{color:var(--acc-tx)}
  .nav-l.on::after{display:none}
  .navdd{display:block}
  .navdd>.nav-l{width:100%;pointer-events:none;border-bottom:0;height:auto;padding:18px 4px 4px;font-size:12.5px;color:var(--ink-dim)}
  .navdd>.nav-l svg{display:none}
  .navdd>.nav-l.on{color:var(--ink-dim)}
  .navdd-menu{position:static;display:block;min-width:0;padding:0;background:transparent;color:var(--ink-tx);border:0;border-bottom:1px solid var(--ink-line);border-radius:0;box-shadow:none;animation:none}
  .navdd.open .navdd-menu{animation:none}
  .navdd-menu a{padding:10px 4px;border-radius:0}
  .navdd-menu a:hover,.navdd-menu a[aria-current="page"]{background:transparent}
  .navdd-menu a[aria-current="page"] b{color:var(--acc-tx)}
  .navdd-menu b{font-size:16px}
  .navdd-menu span{color:var(--ink-dim)}
}
@media (max-width:520px){.search-btn span{display:none}.search-btn{width:36px;padding:0;justify-content:center}}

/* ---------- masthead band: page titles and the home hero continue the header ---------- */
.band{--tx:var(--ink-tx);--mut:var(--ink-mut);--dim:var(--ink-dim);--link:var(--ink-link);--line:var(--ink-line);--card:var(--ink-2);--card2:var(--ink);
  color:var(--tx);background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
/* full-width hairline under the band; the outset paints past the wrap without adding scroll width */
.band{border-bottom:1px solid transparent;border-image:linear-gradient(var(--ink-line),var(--ink-line)) 1/0 0 1px 0/0 100vmax}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:30px 0 28px;margin-bottom:24px}
.ph .kick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--mut);font-weight:600;font-size:14px;margin-bottom:10px}
.ph .sub{color:var(--mut);margin:12px 0 0;max-width:78ch;font-size:15.5px}
.ph .who{display:inline-flex;align-items:center;gap:14px}
.skin-ico{width:56px;height:56px;flex:0 0 56px;border-radius:10px;object-fit:cover;image-rendering:pixelated;background:var(--card);border:1px solid var(--line)}

/* ---------- layout ---------- */
main{flex:1;padding-bottom:64px}
main>.card{margin-top:24px}
.view{animation:vin .25s ease-out}
@keyframes vin{from{opacity:0}to{opacity:1}}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g21{grid-template-columns:2fr 1fr}.g32{grid-template-columns:3fr 2fr}
@media (max-width:900px){.g2,.g3,.g21,.g32{grid-template-columns:1fr}}
.sec{margin-top:28px}
.sec>h2{margin-bottom:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters.between{justify-content:space-between}
.nav2{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.nav2>div{display:flex;gap:10px;flex-wrap:wrap}

footer.foot{background:var(--ink);color:var(--ink-mut);font-size:13px;border-top:1px solid var(--ink-line)}
.foot-in{display:flex;gap:16px 48px;justify-content:space-between;flex-wrap:wrap;padding-top:26px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.foot p{margin:0;max-width:62ch}
.foot nav{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:flex-start}
.foot nav a{color:var(--ink-tx);font-weight:600}
.foot nav a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .view,.navdd.open .navdd-menu{animation:none}
  *{scroll-behavior:auto!important;transition:none!important}
}