@font-face{font-family:'Lora';src:url('../fonts/lora-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-400i.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-700.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-700.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
:root{--paper:#F7F7F5;--ink:#151515;--red:#D7261E;--gray:#CFCFCB;--amber:#F2A33A;--gut:clamp(16px,4vw,56px);--serif:'Lora',Georgia,serif;--mono:'Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.62 var(--serif);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;font-family:var(--mono)}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.top{border-bottom:1px solid var(--ink);background:var(--paper);position:relative;z-index:30}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);max-width:1500px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:italic 700 1.7rem/1 var(--serif);letter-spacing:-.02em}
.brand svg{width:26px;height:26px}
.nav{display:flex;gap:26px}
.nav a{font:400 .85rem/1 var(--mono);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--ink);color:var(--ink)}
.nav a[aria-current=page]{border-color:var(--red)}
.burger{display:none;background:none;border:1px solid var(--ink);width:46px;height:46px;cursor:pointer;color:var(--ink)}
.burger-bars,.burger-bars::before,.burger-bars::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;margin:auto;content:""}
.burger-bars::before{position:absolute;top:-6px;left:0}.burger-bars::after{position:absolute;top:6px;left:0}
@media(max-width:820px){
 .burger{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--ink);padding:6px var(--gut) 14px}
 .nav.open{display:flex}
 .nav a{padding:16px 0;border-bottom:1px solid var(--gray);font-size:1rem}
}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--gut);overflow-x:clip}
.hd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gut);padding:clamp(28px,5vw,72px) 0 clamp(20px,3vw,40px);align-items:end}
.hd h1{font-size:clamp(2.6rem,6.4vw,6rem);font-style:italic;font-weight:400;line-height:.98}
.hd h1 b{font-weight:700;font-style:normal;box-shadow:inset 0 -.14em 0 var(--amber)}
.hd p{max-width:26em}
@media(max-width:820px){.hd{grid-template-columns:1fr;gap:18px}}
.counter{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0;margin-bottom:26px}
.btn{font:400 .85rem/1 var(--mono);background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:12px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--paper)}
/* film strips: signature */
.film{background:var(--ink);padding:26px 14px 34px;margin-bottom:14px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,var(--paper) 0 10px,transparent 10px 22px);opacity:.92;-webkit-mask:linear-gradient(#000,#000);}
.film::before{top:8px}.film::after{bottom:8px}
.film-t{position:absolute;left:14px;bottom:20px;font:400 .66rem/1 var(--mono);color:var(--amber);display:none}
.fr{position:relative;margin:0}
.fr>button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.fr img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#333}
.fr .no{display:block;font:400 .72rem/1 var(--mono);color:var(--amber);margin-top:8px;text-align:left}
.fr .mark{position:absolute;inset:-7% -7% 14% -7%;pointer-events:none;opacity:0;transition:opacity .15s}
.fr .mark path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fr[data-on="1"] .mark{opacity:1}
.fr[data-on="1"] .no::after{content:" · отмечен";color:#ff7b72}
@media(max-width:820px){.film{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:24px 10px 30px}}
/* gallery */
.tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;margin-bottom:26px}
.chip{font:400 .85rem/1 var(--mono);padding:10px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tools input,.tools select{font:400 .9rem var(--mono);padding:10px 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);min-width:0}
.gal{list-style:none;margin:0;padding:0 0 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 22px}
.gal li[hidden]{display:none}
.gal .fr img{border:1px solid var(--ink)}
.gal .fr .no{color:var(--ink);margin-top:10px}
.gal h3{font-size:1.15rem;margin:.3em 0 0;font-weight:400;font-style:italic}
.empty{border:1px dashed var(--ink);padding:28px;max-width:560px;margin:0 0 60px}
.empty h2{font-size:1.8rem;margin-bottom:.4em}
dialog{border:1px solid var(--ink);padding:0;background:var(--paper);color:var(--ink);max-width:min(1100px,96vw);width:100%}
dialog::backdrop{background:rgba(21,21,21,.82)}
.lb{padding:16px}
.lb-img{position:relative}
.lb-img img{display:block;width:100%;max-height:68vh;object-fit:contain;background:var(--ink)}
.lb-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:14px}
.lb h2{font-size:1.5rem;font-weight:400;font-style:italic}
/* series */
.ser{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--gut);padding:34px 0;border-top:1px solid var(--ink)}
.ser h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.ser .mini{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:18px}
.ser .mini img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media(max-width:820px){.ser{grid-template-columns:1fr;gap:12px}.ser .mini{grid-template-columns:repeat(3,1fr)}}
pre{background:var(--ink);color:#f3efe6;padding:18px;overflow-x:auto;font:400 .85rem/1.6 var(--mono);margin:0 0 1.4em;border-left:6px solid var(--amber)}
.prose{max-width:46em;padding-bottom:60px}
.prose h2{font-size:1.9rem;margin:1.6em 0 .5em}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--gray);padding:1px 5px}
.foot{border-top:1px solid var(--ink);padding:26px var(--gut);margin-top:40px}
.foot-in{max-width:1500px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between}
.nf{padding-top:clamp(30px,6vw,90px);padding-bottom:clamp(30px,6vw,90px)}
.nf h1{font-size:clamp(4.5rem,20vw,15rem);font-style:italic;font-weight:400;line-height:.85;position:relative;display:inline-block;padding:0 .12em}
.nf h1 svg{position:absolute;inset:-4% -2%;width:104%;height:108%;pointer-events:none}
.nf h1 path{fill:none;stroke:var(--red);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}