/* ============ Tokens ============ */
:root{
  --bg:#FFFFFF;
  --bg-2:#F3F3F1;
  --bg-3:#E9E9E6;
  --ink:#1A1B1D;
  --ink-2:#55585D;
  --ink-3:#8B8E93;
  --line:#E3E3E0;
  --accent:#2E5877;
  --accent-2:#E6EDF2;
  --on-accent:#FFFFFF;
  --warn:#8A5A2B;
  --warn-bg:#F6EFE6;
  --k-S:#2E5877; --k-W:#4D6C49; --k-D:#7A6544; --k-B:#937A3E; --k-P:#6A6682; --k-O:#9A9CA0; --k-N:#8C5E5E;
  --r-s:8px; --r-m:12px; --r-l:20px;
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);
  --shadow:0 1px 2px rgba(20,22,25,.06),0 8px 24px rgba(20,22,25,.08);
  --font:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17181A; --bg-2:#202124; --bg-3:#2A2B2F; --ink:#ECECEA; --ink-2:#B3B5B8; --ink-3:#83868B; --line:#2F3034;
    --accent:#8DB2CF; --accent-2:#22313D; --on-accent:#10161B; --warn:#D9AE7E; --warn-bg:#2C241B;
    --k-S:#8DB2CF; --k-W:#9BBB95; --k-D:#C6AE86; --k-B:#D2B66E; --k-P:#ABA7C6; --k-O:#8E9095; --k-N:#C99A9A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#17181A; --bg-2:#202124; --bg-3:#2A2B2F; --ink:#ECECEA; --ink-2:#B3B5B8; --ink-3:#83868B; --line:#2F3034;
  --accent:#8DB2CF; --accent-2:#22313D; --on-accent:#10161B; --warn:#D9AE7E; --warn-bg:#2C241B;
  --k-S:#8DB2CF; --k-W:#9BBB95; --k-D:#C6AE86; --k-B:#D2B66E; --k-P:#ABA7C6; --k-O:#8E9095; --k-N:#C99A9A;
  color-scheme:dark;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:140px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--font);font-feature-settings:"palt" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3;letter-spacing:.01em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============ Header ============ */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px}
.brand{font-weight:700;color:var(--ink);font-size:16px;white-space:nowrap}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink-2);padding:6px 12px;border-radius:999px;font-size:15px;white-space:nowrap}
.nav a:hover{background:var(--bg-2);text-decoration:none;color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-2);font-weight:500}
@media (max-width:720px){
  .top-in{height:auto;flex-direction:column;align-items:stretch;gap:2px;padding-top:12px;padding-bottom:8px}
  .nav{margin:0 calc(var(--gut)*-1);padding:0 calc(var(--gut) - 12px)}
}

/* ============ Buttons / chips ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);font-weight:500;font-size:15px;white-space:nowrap}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:var(--bg-2);color:var(--ink)}
.btn.ghost:hover{background:var(--bg-3);filter:none}
.ib{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--bg);display:inline-grid;place-items:center;font-size:22px;line-height:1;color:var(--ink-2)}
.ib:hover{background:var(--bg-2);color:var(--ink)}
.ib:disabled{opacity:.35;cursor:default}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip b{font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] b{color:inherit;opacity:.7}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-3))}

/* ============ Hero ============ */
.hero{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(28px,4vw,48px)}
.hero h1{font-size:clamp(30px,5.2vw,58px);line-height:1.22;letter-spacing:.005em;max-width:16em}
.hero .lede{margin:20px 0 0;max-width:38em;font-size:clamp(16px,1.6vw,18px);color:var(--ink-2);line-height:1.85}
.hero .lede b{color:var(--ink);font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:28px 0 0;padding:0;list-style:none}
.facts a{display:flex;flex-direction:column;color:var(--ink);padding:2px 0}
.facts a:hover{text-decoration:none}
.facts a:hover span{color:var(--ink)}
.facts strong{font-size:clamp(22px,2.6vw,30px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.facts span{font-size:13px;color:var(--ink-3)}

/* ============ Shelves ============ */
.shelf-sec{padding:clamp(20px,3vw,36px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head h2{font-size:clamp(20px,2.2vw,26px)}
.sec-head .sub{margin:4px 0 0;color:var(--ink-3);font-size:14px}
.shelf-nav{display:flex;gap:8px}
@media (max-width:720px){.shelf-nav{display:none}}
.shelf{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);padding:4px var(--gut) 12px;scrollbar-width:none;
  max-width:var(--wrap);margin:0 auto}
.shelf::-webkit-scrollbar{display:none}
.shelf>*{scroll-snap-align:start}
@media (min-width:1241px){.shelf{padding-left:var(--gut);padding-right:var(--gut)}}

/* category tile with mosaic */
.cats{grid-auto-columns:minmax(220px,1fr)}
@media (min-width:1000px){.cats{grid-auto-columns:calc((100% - 4*16px)/5)}}
@media (max-width:560px){.cats{grid-auto-columns:64%}}
.cat{display:block;border:0;padding:0;background:none;text-align:left;color:var(--ink)}
.cat .mos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:16/11;border-radius:var(--r-m);overflow:hidden;background:var(--bg-2)}
.cat .mos img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat .mos img:first-child{grid-row:1/3}
.cat:hover .mos img{transform:scale(1.035)}
.cat h3{font-size:16px;margin-top:12px}
.cat p{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.cat p b{font-weight:500;color:var(--ink-2)}

/* editor picks */
.picks{grid-auto-columns:minmax(300px,1fr)}
@media (min-width:1000px){.picks{grid-auto-columns:calc((100% - 2*16px)/3)}}
@media (max-width:560px){.picks{grid-auto-columns:84%}}
.pick{display:block;border:0;padding:0;background:none;text-align:left;color:var(--ink)}
.pick .ph{aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;background:var(--bg-2);position:relative;border:1px solid var(--line)}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pick:hover .ph img{transform:scale(1.03)}
.pick .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:12px}
.pick h3{font-size:17px}
.pick .sum{margin:4px 0 0;font-size:14px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.score{flex:none;font-size:13px;color:var(--ink-3);text-align:right;line-height:1.3}
.score strong{display:block;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ============ All works ============ */
.all{padding:clamp(24px,3vw,40px) 0 64px}
.tools{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);padding:12px 0 10px;margin-bottom:24px}
.tools-in{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.search{flex:1;min-width:0;position:relative}
.search input{width:100%;height:44px;border-radius:999px;border:1px solid transparent;background:var(--bg-2);padding:0 18px 0 42px;font-size:15px;outline:none}
.search input:focus{border-color:var(--accent);background:var(--bg)}
.search::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-8px;border:2px solid var(--ink-3);border-radius:50%}
.search::after{content:"";position:absolute;left:28px;top:50%;width:7px;height:2px;margin-top:5px;background:var(--ink-3);transform:rotate(45deg)}
.sel{height:44px;border-radius:999px;border:1px solid var(--line);background:var(--bg);padding:0 36px 0 16px;font-size:14px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.filter-btn{height:44px;border-radius:999px;border:1px solid var(--line);background:var(--bg);padding:0 16px;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.filter-btn span:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;padding:0 6px}
@media (max-width:720px){#sort{display:none}}

.browse{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.side{position:sticky;top:132px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 150px);overflow:auto;scrollbar-width:thin}
.side .lbl{font-size:13px;color:var(--ink-3);margin:0 0 6px 12px}
.side button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:7px 12px;border-radius:var(--r-s);font-size:15px;color:var(--ink-2)}
.side button b{font-weight:400;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.side button:hover{background:var(--bg-2);color:var(--ink)}
.side button[aria-pressed="true"]{background:var(--bg-2);color:var(--ink);font-weight:500}
@media (max-width:900px){
  .browse{grid-template-columns:1fr;gap:0}
  .side{position:static;flex-direction:row;overflow-x:auto;max-height:none;gap:8px;margin:0 calc(var(--gut)*-1) 16px;padding:0 var(--gut);scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .lbl{display:none}
  .side button{flex:none;height:36px;border:1px solid var(--line);border-radius:999px;padding:0 14px;font-size:14px}
  .side button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .side button[aria-pressed="true"] b{color:inherit;opacity:.7}
}
.count{margin:0 0 16px;color:var(--ink-3);font-size:14px}
.count b{color:var(--ink);font-weight:500}
.count button{border:0;background:none;color:var(--accent);padding:0;margin-left:10px;font-size:14px}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px 20px}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:24px 12px}}
.card{display:block;width:100%;border:0;padding:0;background:none;text-align:left;color:var(--ink)}
.card .ph{position:relative;aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.card:hover .ph img{transform:scale(1.03)}
.card .noimg{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.5}
.card .noimg strong{display:block;color:var(--ink-2);font-size:16px;font-weight:500;margin-bottom:2px}
.vtag{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 8px;border-radius:999px;background:rgba(20,21,23,.72);color:#fff;font-size:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vtag::before{content:"";border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.card h3{font-size:16px;font-weight:700;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .sum{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .ft{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:13px;color:var(--ink-3)}
@media (max-width:560px){.card h3{font-size:15px;margin-top:10px}.card .sum{font-size:13px}.card .ft{font-size:12px}.card .badge{font-size:12px}}
.empty{padding:48px 0;text-align:center;color:var(--ink-2)}

/* ============ Work sheet ============ */
dialog{color:var(--ink)}
.sheet{width:min(1000px,calc(100vw - 48px));max-width:none;height:calc(100vh - 48px);max-height:none;margin:24px auto;padding:0;border:0;border-radius:var(--r-l);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.sheet::backdrop{background:rgba(18,19,21,.5);backdrop-filter:blur(2px)}
.sheet[open]{animation:rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sh{display:flex;flex-direction:column;height:100%}
.sh-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.sh-bar .pos{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sh-bar .acts{display:flex;gap:8px}
.sh-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.sh-body:focus{outline:none}
.sh-in{max-width:840px;margin:0 auto;padding:32px clamp(20px,4vw,48px) 56px}
@media (max-width:720px){
  .sheet{width:100vw;height:100%;max-height:100dvh;height:100dvh;margin:0;border-radius:0}
  .sheet[open]{animation:up .3s cubic-bezier(.2,.8,.2,1)}
  .sh-in{padding-top:24px}
}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

.w-head h2{font-size:clamp(24px,3.4vw,34px);line-height:1.25}
.w-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-size:14px;color:var(--ink-3)}
.w-by a{color:var(--ink-2)}
.w-sum{margin:16px 0 0;font-size:17px;line-height:1.8;color:var(--ink-2)}
.w-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.w-cta .btn{height:42px;font-size:14px}

.qf{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qf>div{padding:14px 12px;text-align:center;border-left:1px solid var(--line)}
.qf>div:first-child{border-left:0}
.qf dt{font-size:12px;color:var(--ink-3)}
.qf dd{margin:2px 0 0;font-size:17px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums}
.qf dd small{display:block;font-size:12px;font-weight:400;color:var(--ink-3)}
@media (max-width:560px){.qf{grid-template-columns:repeat(2,1fr)}.qf>div:nth-child(3){border-left:0}.qf>div:nth-child(n+3){border-top:1px solid var(--line)}}

.gal{margin:28px calc(clamp(20px,4vw,48px)*-1) 0;padding:0 clamp(20px,4vw,48px);display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 clamp(20px,4vw,48px);height:clamp(260px,52vh,460px);scrollbar-width:thin}
.gal>*{flex:none;height:100%;scroll-snap-align:start;position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);padding:0}
.gal img{height:100%;width:auto;max-width:none;object-fit:contain}
.gal button{cursor:zoom-in}
.gal .vid{display:block;color:#fff}
.gal .vid img{filter:brightness(.82)}
.gal .vid .pl{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.gal .vid .pl::before{content:"";width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92) no-repeat 54% 50%/18px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 0l18 10L0 20z' fill='%231A1B1D'/%3E%3C/svg%3E")}
.gal .vid.nop{width:min(420px,80vw);background:#2A2B2F}
.gal .tag{position:absolute;left:8px;top:8px;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(20,21,23,.62);color:#fff}
.gal-note{margin:8px 0 0;font-size:13px;color:var(--ink-3)}

.w-sec{margin-top:44px}
.w-sec>h3{font-size:19px;margin-bottom:12px}
.w-sec p{margin:0;line-height:1.85}
.review{background:var(--bg-2);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 220px;gap:28px}
.review h3{font-size:19px;margin-bottom:10px}
.review p{margin:0;line-height:1.9}
.meters{display:grid;gap:12px;align-content:start}
.meters .big{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.meters .big strong{font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.meters .big span{font-size:13px;color:var(--ink-3)}
.mt{display:grid;grid-template-columns:5em 1fr 1.5em;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.mt .bar{height:6px;border-radius:999px;background:var(--bg-3);overflow:hidden}
.mt .bar i{display:block;height:100%;background:var(--ink);border-radius:999px}
.mt em{font-style:normal;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.mt.na em{color:var(--ink-3)}
@media (max-width:720px){.review{grid-template-columns:1fr}}

.story{display:grid;gap:28px}
.story h4{font-size:15px;color:var(--ink);margin-bottom:6px}
.story p{color:var(--ink-2)}
.note{background:var(--warn-bg);color:var(--ink);border-radius:var(--r-m);padding:16px 20px;font-size:15px;line-height:1.8}
.note strong{display:block;color:var(--warn);font-size:14px;margin-bottom:2px}
.others blockquote{margin:0 0 10px;padding:12px 16px;border-left:3px solid var(--line);color:var(--ink-2);font-size:15px;line-height:1.8;background:none}
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1px solid var(--line)}
.info>div{padding:12px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:13px;color:var(--ink-3)}
.info dd{margin:2px 0 0;font-size:15px;word-break:break-word}
.info .wide{grid-column:1/-1}
@media (max-width:560px){.info{grid-template-columns:1fr 1fr}}
.links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.links a span{color:var(--ink-3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.links a:hover{text-decoration:none}
.links a:hover b{color:var(--accent)}
.links b{font-weight:500}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:720px){.rel{grid-template-columns:1fr 1fr}}
.rel .card h3{font-size:14px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.pn button{border:1px solid var(--line);background:var(--bg);border-radius:var(--r-m);padding:14px 16px;text-align:left;font-size:14px;color:var(--ink);min-height:68px}
.pn button:hover{background:var(--bg-2)}
.pn button span{display:block;font-size:12px;color:var(--ink-3)}
.pn button.nx{text-align:right}

/* ============ Lightbox ============ */
.lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,15,16,.96);color:#fff}
.lb::backdrop{background:rgba(14,15,16,.96)}
.lb-in{position:absolute;inset:0;display:grid;place-items:center;padding:56px 64px}
.lb-in img{width:100%;height:100%;object-fit:contain;touch-action:pinch-zoom}
.lb .ib{position:absolute;background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.lb .ib:hover{background:rgba(255,255,255,.2)}
.lb .x{top:12px;right:12px}
.lb .pv{left:12px;top:50%;margin-top:-20px}
.lb .nx{right:12px;top:50%;margin-top:-20px}
.lb .ct{position:absolute;top:20px;left:0;right:0;text-align:center;font-size:13px;opacity:.75;font-variant-numeric:tabular-nums;pointer-events:none}
@media (max-width:720px){.lb-in{padding:52px 0}.lb .pv,.lb .nx{display:none}}

/* ============ Filter sheet ============ */
.fsheet{width:min(440px,100vw);max-width:none;margin:auto;padding:0;border:0;border-radius:var(--r-l);background:var(--bg);box-shadow:var(--shadow)}
.fsheet::backdrop{background:rgba(18,19,21,.45)}
@media (max-width:720px){.fsheet{margin:auto 0 0;width:100vw;border-radius:var(--r-l) var(--r-l) 0 0;padding-bottom:env(safe-area-inset-bottom)}}
.fs-in{padding:8px 20px 20px}
.fs-in header{display:flex;justify-content:space-between;align-items:center;height:56px}
.fs-in h2{font-size:18px}
.fs-in fieldset{border:0;margin:16px 0 0;padding:0}
.fs-in legend{font-size:13px;color:var(--ink-3);margin-bottom:8px;padding:0}
.fs-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0}
.fs-row span{font-size:15px}
.fs-row select{height:40px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--bg);padding:0 12px}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:15px}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.fs-in footer{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:20px}

/* ============ Footer ============ */
.foot{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 calc(40px + env(safe-area-inset-bottom));font-size:14px;color:var(--ink-3);line-height:1.8}
.foot p{margin:0 0 6px;max-width:46em}
.foot nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.foot nav a{color:var(--ink-2)}

/* ============ Article pages ============ */
.page{max-width:calc(680px + 2*var(--gut));margin:0 auto;padding:clamp(40px,6vw,72px) var(--gut) 0}
.page.wide{max-width:var(--wrap)}
.page-head{margin-bottom:clamp(28px,4vw,48px)}
.page-head h1{font-size:clamp(30px,4.6vw,48px);line-height:1.25}
.page-head p{max-width:40em;margin:16px 0 0;font-size:clamp(17px,1.8vw,19px);line-height:1.85;color:var(--ink-2)}
.page-head .meta{font-size:14px;color:var(--ink-3);margin-top:16px}

.essay,.prose{font-size:18px;line-height:1.9}
@media (max-width:560px){.essay,.prose{font-size:17px;line-height:1.88}}
.essay p,.prose p{margin:0 0 1.1em}
.essay h2,.prose h2{font-size:22px;margin:2.4em 0 .8em;line-height:1.4}
.essay a.w{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.essay a.w:hover{color:var(--accent)}
.essay aside{margin:-.2em 0 1.4em;padding:14px 18px;background:var(--bg-2);border-radius:var(--r-m);font-size:15px;line-height:1.85;color:var(--ink-2)}
.essay .pull{margin:1.8em 0;padding:4px 0 4px 20px;border-left:3px solid var(--ink);font-size:21px;line-height:1.7;font-weight:700;color:var(--ink)}
.essay table{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:15px;line-height:1.65}
.essay th{text-align:left;font-weight:500;color:var(--ink-3);font-size:13px;padding:8px 10px 8px 0;border-bottom:1px solid var(--ink)}
.essay td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.essay td:first-child{font-weight:700;white-space:nowrap}
@media (max-width:560px){
  .essay table,.essay tbody,.essay tr,.essay td{display:block}
  .essay thead{display:none}
  .essay tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .essay td{border:0;padding:2px 0}
}
.essay ol,.essay ul,.prose ul{padding-left:1.4em;margin:0 0 1.2em}
.essay li,.prose li{margin-bottom:.5em}
.essay li p{margin:0}
.sources{margin-top:3em;padding-top:1.5em;border-top:1px solid var(--line)}
.sources h2{font-size:17px;margin:0 0 1em}
.sources ol{font-size:14px;line-height:1.75;color:var(--ink-2);padding-left:1.6em}
.sources li{margin-bottom:.6em;word-break:break-word}

/* voices */
.voices{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.theme{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,4vw,64px)}
.theme:first-child{border-top:0;padding-top:0}
.theme-h h2{font-size:21px}
.theme-h p{margin:10px 0 0;font-size:15px;color:var(--ink-2);line-height:1.8}
.theme-h .n{display:block;margin-top:12px;font-size:13px;color:var(--ink-3)}
.quotes{list-style:none;margin:0;padding:0;columns:2 300px;column-gap:20px}
.quotes li{break-inside:avoid;margin:0 0 20px;padding:20px;background:var(--bg-2);border-radius:var(--r-m)}
.quotes q{display:block;quotes:none;font-size:16px;line-height:1.85;color:var(--ink)}
.quotes .who{margin-top:12px;font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 12px}
.quotes .why{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.7}
@media (max-width:820px){.theme{grid-template-columns:1fr}}

/* method / stats */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.stat{background:var(--bg-2);border-radius:var(--r-l);padding:24px}
.stat h3{font-size:17px}
.stat .note{background:none;padding:0;margin:6px 0 18px;font-size:14px;color:var(--ink-2);line-height:1.7}
.hbars{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;font-size:14px}
.hbars span{color:var(--ink-2);white-space:nowrap}
.hbars .b{height:8px;background:var(--bg-3);border-radius:999px;overflow:hidden}
.hbars .b i{display:block;height:100%;background:var(--c,var(--ink));border-radius:999px}
.hbars em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.prose-wrap{max-width:680px}