/* Страницы «На полях»: галерея и записки */
:root{--black:#050302;--orange:#ff5a00;--amber:#ffb000;--edge:#8a4a00;--mag:#ff2e88;--paper:#ffe2c4;--dim:#d99a3a;color-scheme:dark;
  --mono:Consolas,"Cascadia Mono",Menlo,"DejaVu Sans Mono","Liberation Mono",monospace;--gut:clamp(14px,5vw,72px)}
*{box-sizing:border-box}
html{background:var(--black) url(/assets/fox/bg-noise.webp);scrollbar-color:var(--edge) var(--black)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow-x:clip;color:var(--paper);font:400 clamp(16px,1.15vw,18px)/1.6 var(--mono)}
::selection{background:var(--orange);color:var(--black)}
a{color:var(--amber);text-underline-offset:.2em}
a:hover{color:var(--paper)}
:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

.growth{position:fixed;top:0;bottom:0;width:clamp(70px,14vw,300px);background-repeat:repeat-y;background-size:510px 930px;background-position:50% 0;image-rendering:pixelated;opacity:.55;pointer-events:none;animation:creep 150s linear infinite;z-index:-1}
.g-l{left:0;background-image:url(/assets/fox/growth-a.webp);-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent)}
.g-r{right:0;background-image:url(/assets/fox/growth-b.webp);animation-direction:reverse;-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent);mask-image:linear-gradient(270deg,#000 30%,transparent)}
@keyframes creep{to{background-position:50% -930px}}
.plane{--h:clamp(60px,13vh,140px);position:absolute;left:0;right:0;top:0;height:var(--h);background:url(/assets/fox/plane.webp) repeat-x 0 0/calc(var(--h)*12.776) 100%;opacity:.55;pointer-events:none;z-index:-1}
.plane-b{top:auto;bottom:0;transform:scaleY(-1)}
.scan{position:fixed;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}

.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:clamp(12px,2vw,22px) var(--gut) 0}
.bar a{display:inline-flex;align-items:center;gap:.5em;min-height:38px;padding:.1em .75em;background:var(--black);color:var(--amber);border:1px solid var(--edge);border-bottom-width:3px;border-radius:7px;text-decoration:none;font-weight:700;line-height:1.1}
.bar a:hover{background:var(--amber);border-color:var(--amber);color:var(--black)}
.bar nav{display:flex;gap:8px}
.bar a[href="/gallery/"]:hover{background:#9dff3c;border-color:#9dff3c}
.bar a[href="/notes/"]:hover{background:#56c8ff;border-color:#56c8ff}
.bar a[aria-current]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.back svg{width:.72em;height:.6em;transform:rotate(-90deg)}

main{flex:1;width:100%;padding:clamp(22px,4vh,44px) var(--gut) calc(clamp(60px,13vh,140px) + 28px)}
h1{display:flex;align-items:center;justify-content:center;gap:.6em;width:fit-content;min-width:min(100%,300px);margin:0 auto clamp(22px,4vh,40px);padding:.32em .9em;background:var(--black);border:1px solid var(--amber);color:var(--amber);font:400 clamp(19px,1.6vw,24px)/1.15 var(--mono)}
h1::before,h1::after{content:"";width:0;height:0;border-inline:.32em solid transparent;border-top:.46em solid currentColor}
.empty{text-align:center;color:var(--dim);margin:clamp(40px,12vh,120px) auto}

/* галерея */
.wall{list-style:none;margin:0 auto;padding:0;max-width:1500px;columns:3 300px;column-gap:clamp(10px,1.4vw,20px)}
.wall li{break-inside:avoid;margin-bottom:clamp(10px,1.4vw,20px)}
.wall figure{margin:0;background:var(--black);border:1px solid var(--edge);border-bottom-width:4px;border-radius:7px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.wall figure:hover,.wall figure:focus-within{border-color:var(--amber);box-shadow:0 0 12px rgba(255,176,0,.55)}
.wall a{display:block}
.wall img{display:block;width:100%;height:auto}
.wall figcaption{padding:.55em .75em .6em;font-size:.92em;line-height:1.35;color:var(--amber)}
dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(10px,2vw,28px);border:0;background:rgba(5,3,2,.96);color:var(--paper)}
dialog[open]{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,14px)}
dialog::backdrop{background:var(--black)}
dialog figure{flex:1;min-width:0;height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;pointer-events:none}
dialog img{display:block;max-width:100%;min-height:0;flex:0 1 auto;max-height:100%;object-fit:contain;pointer-events:auto}
dialog figcaption{flex:none;max-width:70ch;text-align:center;color:var(--amber);pointer-events:auto}
dialog figcaption[hidden]{display:none}
dialog button{flex:none;width:44px;height:44px;padding:0;background:var(--black);color:var(--amber);border:1px solid var(--edge);border-bottom-width:3px;border-radius:7px;font:400 26px/1 var(--mono);cursor:pointer}
dialog button:hover{background:var(--amber);border-color:var(--amber);color:var(--black)}
dialog button[hidden]{display:none}
dialog .x{position:absolute;top:clamp(8px,1.4vw,18px);right:clamp(8px,1.4vw,18px);z-index:1}

/* записки */
.notes article[hidden]{display:none}
.notes article{max-width:min(100%,1120px);margin:0 auto clamp(30px,6vh,56px);scroll-margin-top:18px;padding-bottom:clamp(30px,6vh,56px);border-bottom:1px dashed var(--edge)}
.notes article:last-of-type{border-bottom:0;margin-bottom:0}
.notes article:target header time,.notes article:target header h2{color:var(--paper)}
.notes article>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .9em;margin-bottom:.7em}
.notes time{color:var(--dim);font-size:.9em}
.notes article>header h2{flex-basis:100%;order:2;margin:.1em 0 0;color:var(--amber);font:700 1.3em/1.25 var(--mono)}
.pin{margin-left:auto;color:var(--edge);text-decoration:none}
.pin:hover{color:var(--amber)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:-.2em 0 .9em}
.tag{padding:.05em .55em;border:1px solid var(--edge);border-radius:5px;color:#ff8a3c;text-decoration:none;font-size:.86em;line-height:1.5;background:var(--black)}
.tag:hover,.tag.hit{background:#ff8a3c;border-color:#ff8a3c;color:var(--black)}
.md.clamped{max-height:460px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)}
.more{display:block;margin:.7em auto 0;min-height:36px;padding:.15em 1em;background:var(--black);color:var(--amber);border:1px solid var(--edge);border-bottom-width:3px;border-radius:7px;font:700 .95em/1.1 var(--mono)}
.more:hover{background:var(--amber);border-color:var(--amber);color:var(--black)}
.more[hidden]{display:none}
.finder{display:flex;flex-wrap:wrap;gap:6px;max-width:min(100%,1120px);margin:0 auto clamp(26px,5vh,46px);padding-bottom:clamp(18px,3vh,28px);border-bottom:1px dashed var(--edge)}
.finder button{min-height:32px;padding:.1em .65em;background:var(--black);color:#ff8a3c;border:1px solid var(--edge);border-radius:5px;font:400 .9em/1.1 var(--mono)}
.finder small{color:var(--dim);font-size:.82em}
.finder button:hover,.finder button[aria-pressed=true]{background:#ff8a3c;border-color:#ff8a3c;color:var(--black)}
.finder button:hover small,.finder button[aria-pressed=true] small{color:var(--black)}
.md>:first-child{margin-top:0}
.md>:last-child{margin-bottom:0}
.md p,.md ul,.md ol,.md blockquote,.md pre,.md table{margin:0 0 1em}
.md h1,.md h2,.md h3,.md h4{display:block;width:auto;min-width:0;margin:1.5em 0 .5em;padding:0;background:none;border:0;color:var(--amber);font:700 1.1em/1.3 var(--mono)}
.md h1{font-size:1.3em}.md h2{font-size:1.2em}
.md h1::before,.md h1::after{content:none}
.md ul,.md ol{padding-left:1.5em}
.md li{margin-bottom:.25em}
.md li::marker{color:var(--orange)}
.md blockquote{margin-inline:0;padding:.1em 0 .1em 1em;border-left:1px solid var(--orange);color:var(--dim)}
.md code{padding:.05em .3em;background:#1a0f06;border:1px solid #3a2208;border-radius:3px;font-size:.92em}
.md pre{overflow-x:auto;padding:.8em 1em;background:#120a04;border:1px solid var(--edge);border-radius:7px;line-height:1.4}
.md pre code{padding:0;background:none;border:0}
.md hr{height:0;margin:1.8em 0;border:0;border-top:1px dashed var(--edge)}
.md img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;margin:1em 0;border:1px solid var(--edge);border-radius:7px}
.md table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.md th,.md td{padding:.3em .7em;border:1px solid var(--edge);text-align:left}
.md th{color:var(--amber)}
.md strong{color:#fff3e4}
@media print{.finder,.more{display:none}.md.clamped{max-height:none;-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){.growth{animation:none}}
#wave{display:none}