:root{--bg:#ffffff;--ink:#17191b;--mute:#6b7075;--line:#dcdee0;--panel:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Hanken Grotesk",system-ui,sans-serif}
a{color:inherit}
header{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding:28px clamp(20px,4vw,56px)}
.brand{font:300 28px/1 "Newsreader",Georgia,serif;text-decoration:none;letter-spacing:.01em}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--mute);font-size:15px;padding:4px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
nav a.book{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
main{padding:0 clamp(20px,4vw,56px) 80px;max-width:1500px;margin:0 auto}
.view{display:none}.view.on{display:block}
h1,h2{font:300 clamp(34px,5vw,60px)/1.08 "Newsreader",Georgia,serif;margin:12px 0 10px;letter-spacing:-.01em}
.lede{color:var(--mute);max-width:52ch;margin:0 0 36px}
.grid{columns:3 320px;column-gap:14px}
.tile{break-inside:avoid;margin:0 0 14px;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.tile .ph,.tile img{display:block;width:100%;height:auto}
.tile .ph{background:var(--g)}
h2.more{font-size:clamp(26px,3vw,36px);margin:72px 0 0}
.tile{transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tile:hover,.tile:focus-visible{transform:scale(1.1);z-index:5;box-shadow:0 14px 40px rgba(0,0,0,.28)}}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vw,14px);margin:0 0 clamp(6px,1vw,14px)}
.row .tile{margin:0;aspect-ratio:2/3;overflow:hidden}
.row .tile img{height:100%;object-fit:cover}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px;margin-bottom:36px}
.vid{display:block}
.vcard{display:block;text-decoration:none;color:var(--ink);transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s}
.vthumb{position:relative;aspect-ratio:16/9;background:#17191b;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{width:0;height:0;border-style:solid;border-width:16px 0 16px 28px;border-color:transparent transparent transparent #fff;opacity:.95;position:absolute;top:50%;left:50%;margin:-16px 0 0 -12px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.vlabel{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:15px}
.vlabel span{color:var(--mute);font-size:14px}
.vid button{font:inherit;font-size:14px;background:none;border:0;color:var(--mute);cursor:pointer;padding:0;margin-top:6px;text-decoration:underline}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.vcard:hover{transform:scale(1.04)}}
.vempty{color:var(--mute);margin:0 0 24px}
#vf{max-width:560px;grid-template-columns:1fr}
#vf[hidden]{display:none}
.cats{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.cat{display:inline-block;text-decoration:none;border:1px solid var(--ink);padding:12px 26px;background:none;color:var(--ink)}
.cat:hover{background:var(--ink);color:var(--bg)}
.cat span{font-size:16px}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px;margin-top:20px}
.about dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px}
.about dt{color:var(--mute)}.about dd{margin:0}
form{display:grid;gap:18px;grid-template-columns:1fr 1fr;background:var(--panel);padding:clamp(20px,3vw,36px);border:1px solid var(--line);max-width:760px}
form .full{grid-column:1/-1}
@media(max-width:560px){form{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:14px;color:var(--mute)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:11px 12px;border-radius:0;width:100%}
textarea{min-height:110px;resize:vertical}
button.cta{font:inherit;background:var(--ink);color:var(--bg);border:0;padding:14px 28px;cursor:pointer;justify-self:start}
button.cta:hover{opacity:.85}
.note{font-size:14px;color:var(--mute);margin:0}
#ok{display:none;max-width:760px;border:1px solid var(--line);padding:18px 22px;margin-top:18px;background:var(--panel)}
footer{border-top:1px solid var(--line);padding:26px clamp(20px,4vw,56px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mute);font-size:14px}
#lb{position:fixed;inset:0;background:rgba(10,11,12,.94);display:none;align-items:center;justify-content:center;z-index:10;padding:5vw}
#lb.on{display:flex}
#lb .big{width:min(88vw,calc(78vh*var(--r)));aspect-ratio:var(--r);background:var(--g);max-height:82vh}
#lb img{max-width:90vw;max-height:84vh}
#lb button{position:absolute;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;padding:14px}
#lb .x{top:max(10px,env(safe-area-inset-top));right:10px}#lb .p{left:6px}#lb .n{right:6px}