:root{--bg:#000;--menu-bg:#141414;--fg:#fff;--mut:rgba(255,255,255,.6);--line:rgba(255,255,255,.4);--ui-edge:24px}
:root.light{--bg:#fff;--menu-bg:#f5f5f5;--fg:#111;--mut:rgba(0,0,0,.6);--line:rgba(0,0,0,.4)}
@media(max-width:1300px){:root{--ui-edge:16px}}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0}
body{background:var(--bg);color:var(--fg);font:300 1rem/1.6 Manrope,sans-serif;overflow:hidden;transition:background-color .35s,color .35s}
button,:where(a[data-act]){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:where(a[data-act]){text-decoration:none}
#logo,#mt,.cn,.lnk,.mt,#modal .tx a,#nav :is(button,a) span,#menu :is(button,a) span{
 text-decoration-line:underline;
 text-decoration-style:dotted;
 text-decoration-color:var(--line);
 text-decoration-thickness:1px;
 text-underline-offset:6px;
 text-decoration-skip-ink:none;
}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--line)}
.tt,.tt *{transition:background-color .35s,color .35s,border-color .35s!important}
.view{position:fixed;inset:0;overflow-y:auto;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.view.on{opacity:1;visibility:visible;transition:opacity .4s}
/* галерея */
#gal{z-index:15;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:ew-resize;touch-action:none}
#gbg{position:absolute;inset:-60px;background:center/cover;filter:blur(40px);opacity:.55}
:root.light #gbg{opacity:0}
:root.tt #gbg{transition:opacity .35s ease!important}
@media(prefers-reduced-motion:reduce){:root.tt #gbg{transition:none!important}}
#gimg{position:relative;max-width:90%;max-height:72vh;object-fit:contain;transition:opacity .2s}
#grid{z-index:15}
#grid,#modal{overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:80px 72px 100px;max-width:1600px;margin:0 auto}
.gi{display:block;aspect-ratio:16/10;overflow:hidden}.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.gi:hover img{transform:scale(1.04)}
@media(max-width:1300px){#grid{top:56px;bottom:56px}.gg{padding-top:24px;padding-bottom:44px}}
@media(max-width:768px){.gg{padding:14px 20px 34px;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* фиксированный интерфейс */
.fx{position:fixed;z-index:31}
#logo,#mt{top:var(--ui-edge);left:var(--ui-edge);font:700 16px/1.2 Unbounded,sans-serif;letter-spacing:.03em;border-bottom:1px solid transparent;padding-bottom:2px}
@media(min-width:1301px){#logo,#mt{font-size:18px}}
body[data-ov] #logo,body[data-mode=mini] #logo,#mt:empty{display:none}
#mt{display:block}
#nav{top:50%;left:var(--ui-edge);transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start}
#nav :is(button,a),#menu :is(button,a){font-weight:500;padding:3px 16px 3px 0;text-align:left;transition:transform .2s}
#nav :is(button,a):hover{transform:translateX(4px)}
#nav :is(button,a) span,#menu :is(button,a) span{border-bottom:1px solid transparent}
#nav :is(button,a) span,#menu :is(button,a) span{text-decoration-color:transparent}
#nav :is(button,a).act span,#menu :is(button,a).act span{text-decoration-color:var(--line)}
body[data-mode=mini] #nav,body[data-ov] #nav{display:none}
#top{top:calc(var(--ui-edge) - 6px);right:calc(var(--ui-edge) - 6px);z-index:300;display:flex;gap:12px}
.ic{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}.ic[hidden]{display:none}
.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.ic{transition:transform .2s ease}.ic:hover{transform:scale(1.1)}
#gridBtn:hover{transform:translateX(-50%) scale(1.1)}
#close,[data-act=lbclose]{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#close:hover,[data-act=lbclose]:hover{transform:rotate(90deg) scale(1.1)}
#menuBtn path{transform-box:fill-box;transform-origin:center;transition:transform .25s ease,opacity .25s ease}
#menuBtn[aria-expanded=true] path:nth-child(1){transform:translateY(6px) rotate(45deg)}
#menuBtn[aria-expanded=true] path:nth-child(2){opacity:0}
#menuBtn[aria-expanded=true] path:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#close,#menuBtn{display:none}
body[data-ov] #close,body[data-mode=mini] #close{display:inline-flex}
#menu{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:80vw;z-index:250;background:var(--menu-bg);padding:80px 20px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s;box-shadow:-2px 0 12px rgba(0,0,0,.25)}
#menu.open{transform:none}#menu :is(button,a){font-size:18px;padding:12px 0;border-bottom:1px solid transparent}
@media(max-width:1300px){#nav{display:none}body:not([data-mode=mini]):not([data-ov]) #menuBtn{display:inline-flex}}
.cn{bottom:var(--ui-edge);font-weight:500;border-bottom:1px solid transparent;padding:4px 0;display:none}
#home{left:var(--ui-edge)}
#about{right:var(--ui-edge);top:50%;bottom:auto;transform:translateY(-50%)}
body[data-mode=mini] #about{top:auto;bottom:var(--ui-edge);transform:none}
@media(max-width:1300px){#about{top:auto;bottom:var(--ui-edge);transform:none}}
@media(max-width:991px){#about,#home{font-size:14px}}
body:is([data-mode=vnevremeni],[data-mode=vglubine],[data-mode=mini]):not([data-ov]) #about,body[data-mode=mini]:not([data-ov]) #home{display:block}
#gridBtn{bottom:50px;left:50%;transform:translateX(-50%);display:none}
body:is([data-mode=vnevremeni],[data-mode=vglubine]):not([data-ov]) #gridBtn{display:inline-flex}
#copy{bottom:12px;left:0;right:0;z-index:20;display:none;text-align:center;font-size:12px;letter-spacing:.03em;color:var(--mut);pointer-events:none}
body[data-mode=main]:not([data-ov]) #copy{display:block}
/* модалка */
#modal{position:fixed;inset:0;z-index:200;display:flex;overflow-y:auto;padding:70px 20px 40px;background:rgba(0,0,0,.6);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
:root.light #modal{background:rgba(255,255,255,.6)}
#modal.on{opacity:1;visibility:visible;transition:opacity .35s}
#mbox{max-width:800px;width:100%;margin:auto}
.mt{font:700 16px/1.2 Unbounded,sans-serif;display:inline-block;border-bottom:1px solid transparent;padding-bottom:2px;margin-bottom:28px}
.tx{font-weight:200}.tx p{margin-bottom:1.3rem}.tx b{font-weight:700}
.it{font-style:italic;color:var(--mut)}.dis{font-size:12px;font-weight:200;color:var(--mut)}
.row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:1.8rem}
.lnk{border-bottom:1px solid transparent;font-weight:500;line-height:1.2}
/* лайтбокс */
#lb{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .25s;cursor:ew-resize;touch-action:none}
#lb.on{opacity:1;visibility:visible}
#lbimg{max-width:90vw;max-height:80vh;object-fit:contain;transition:opacity .2s}
#lbtop{position:fixed;top:calc(var(--ui-edge) - 6px);right:calc(var(--ui-edge) - 6px);display:flex;gap:12px}
#lbc{position:fixed;top:calc(var(--ui-edge) - 6px);left:var(--ui-edge);line-height:32px;font-size:18px;pointer-events:none}
#lbn{position:fixed;bottom:var(--ui-edge);right:var(--ui-edge);display:flex;gap:1rem}#lbn button{width:48px;height:48px;font:200 2rem monospace}
@media(max-height:500px) and (orientation:landscape){#lb{padding:56px 0 80px}#lbimg{max-height:calc(100vh - 136px);max-height:calc(100dvh - 136px)}}
/* Компактные поля на компьютере */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  :root { --ui-edge: 16px; }
  .gg { max-width: none; padding: 8px 24px; }
  #grid { top: 56px; bottom: 56px; }
  #gridBtn { bottom: 24px; }
  #copy { bottom: 8px; }
  #menu { padding: 64px var(--ui-edge); }
  #modal { padding: 56px var(--ui-edge) 32px; }
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#gg.packed{position:relative;display:block;max-width:none;padding-inline:var(--ui-edge)}
#gg.packed .gi img{object-fit:contain;transform:none}
.series-note{display:none;position:fixed;z-index:31;top:calc(var(--ui-edge) + 33px);left:var(--ui-edge);right:var(--ui-edge);font:300 12px/1.45 Manrope,sans-serif;color:var(--mut);pointer-events:none}
body[data-mode=mini]:not([data-ov]) #mt[href="/vglubine/"]~.note-metro,body[data-mode=mini]:not([data-ov]) #mt[href="/vnevremeni/"]~.note-street{display:block}
#grid{top:82px}
@media(max-width:480px){#grid{top:92px}.series-note{top:calc(var(--ui-edge) + 30px)}}

@media(max-width:1300px){
 body[data-mode=mini]:not([data-ov]) #menuBtn{display:inline-flex}
 #menu{width:240px;padding-inline:16px}
 #menu [data-k=info]{margin-top:20px}
 #menuBtn{width:44px;height:44px;margin:-6px}
 body[data-mode=mini]:not([data-ov]) #close{order:-1}
 body[data-mode=mini]:has(#menu.open) #close{display:none}
}

body[data-mode=mini]:not([data-ov]) #close{display:none}
body[data-mode=mini]:not([data-ov]) #menuBtn{display:inline-flex;width:44px;height:44px;margin:-6px}
body[data-mode=mini] #menu{width:240px;padding-inline:16px}
body[data-mode=mini] #menu [data-k=info]{margin-top:20px}

/* Share the page background under the gallery and its header. */
body[data-mode=mini] #grid{background:transparent}
body[data-mode=mini] #gal:not(.on){visibility:hidden}
#theme{display:inline-grid;place-items:center}
#theme svg{grid-area:1/1}
#theme svg:last-child,:root.light #theme svg:first-child{opacity:0}
:root.light #theme svg:last-child{opacity:1}
.tt #theme svg{transition:opacity .35s ease!important}
@media(prefers-reduced-motion:reduce){.tt #theme svg{transition:none!important}}
.series-essay{max-width:620px;margin:auto}
.series-essay h2{font:600 clamp(29px,4vw,50px)/1.15 Unbounded,sans-serif;letter-spacing:-.04em;margin:0 0 28px}
.essay-lead{max-width:29em;font:400 clamp(19px,2vw,24px)/1.48 Manrope,sans-serif;margin-bottom:14px}
.essay-body{max-width:58ch;font:300 16px/1.7 Manrope,sans-serif}
.series-essay footer{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 24px;margin-top:32px;font-size:14px}
.series-essay footer span{color:var(--mut)}
@media(max-width:500px){.series-essay h2{margin-bottom:22px}.series-essay footer{margin-top:24px}}
#lb{transition:opacity 222ms cubic-bezier(.4,0,.22,1),visibility 0s 222ms}#lb.on{transition:opacity 222ms cubic-bezier(.4,0,.22,1)}
#lb:not(.on){transition:opacity 180ms ease-out,visibility 0s 180ms}