*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  text-wrap:balance;line-height:1.15}
h1{font-size:clamp(28px,4.2vw,40px)}
h2{font-size:20px}
h3{font-size:17px}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.spacer{margin-left:auto}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---- header ---------------------------------------------------------- */
.top{background:var(--surface);border-bottom:1px solid var(--rule-2);
  position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:var(--sp-4);height:64px}
.brand{display:flex;align-items:baseline;gap:var(--sp-2);font-family:var(--font-display);
  font-size:19px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.brand small{font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--ink-3);
  letter-spacing:.02em}

/* view switch — two words, no icons to decode */
.viewswitch{display:flex;background:var(--surface-2);border-radius:var(--r-pill);padding:3px}
.viewswitch a{padding:7px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--ink-2);transition:background .18s ease,color .18s ease}
.viewswitch a.on{background:var(--surface);color:var(--ink);box-shadow:var(--e1)}

main{padding:var(--sp-7) 0 var(--sp-8)}
.page-head{margin-bottom:var(--sp-6)}
.page-head .sub{color:var(--ink-2);font-size:15px;margin-top:var(--sp-2);max-width:52ch}

@media (max-width:720px){
  .top .wrap{height:auto;padding-top:var(--sp-3);padding-bottom:var(--sp-3);
    flex-wrap:wrap;gap:var(--sp-3)}
  .viewswitch{order:3;flex-basis:100%}
  .viewswitch a{flex:1;text-align:center}
  main{padding-top:var(--sp-5)}
  .wrap{padding:0 var(--sp-4)}
}