/* БОРБА™ v19 — shared base for the three redesign directions.
   Brand laws (HANDOFF §1) carried over: alabaster ground, ink, yellow only over photography,
   6px corners on imagery, БОРБА™ never transformed, no pinning, reduced motion = the finished page. */
/* fonts: linked from each page's <head> (with preconnect) — an @import here held the first paint back by a whole request chain */

:root{
  --bg:#F9F7F2; --paper2:#F1EEE6; --ink:#0D0B08; --g1:#6B6862; --g2:#A5A198;
  --rule:rgba(13,11,8,.16); --rule2:rgba(13,11,8,.32);
  --yellow:#F2C400; --r:6px;
  --pad:clamp(16px,4vw,56px);
  --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --serif:'Source Serif 4',Georgia,serif;
  --e-out:cubic-bezier(.22,.61,.36,1); --e-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto;border-radius:var(--r)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
mark{background:var(--yellow);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.5}
.dim{color:var(--g1)}
.mark{font-family:var(--sans);font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:.82}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header — the official mark via difference blend, three doors */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hdr a,.hdr button{pointer-events:auto}
.hdr .logo img{height:22px;width:auto;border-radius:0}
.hdr nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.hdr nav a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:10px 0;position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-out)}
.hdr nav a:hover::after{transform:scaleX(1)}

/* the dot — inverts over anything */
#dot{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:90;transition:width .25s var(--e-out),height .25s var(--e-out),margin .25s var(--e-out);opacity:0}
body.hasdot{cursor:none}
body.hasdot a,body.hasdot button{cursor:none}
#dot.big{width:38px;height:38px;margin:-19px 0 0 -19px}

/* grain — texture, not motion */
#grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the lightbox — one post, every frame, fixed stage, crossfade */
.lb{position:fixed;inset:0;z-index:70;background:rgba(249,247,242,.97);display:grid;grid-template-rows:auto 1fr auto;padding:64px var(--pad) 24px;opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility 0s .45s}
.lb.on{opacity:1;visibility:visible;transition:opacity .45s var(--e-out)}
.lb .lbh{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.lb .lbt{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,34px)}
.lb .stage{position:relative;margin:18px auto;width:100%;height:100%;min-height:0}
.lb .stage img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;width:auto;height:auto;opacity:0;transition:opacity .7s var(--e-io)}
.lb .stage img.on{opacity:1}
.lb .lbf{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb .lbf button{font-family:var(--mono);font-size:12px;padding:12px 4px;min-width:44px}
.lb .x{font-family:var(--mono);font-size:12px;padding:10px 4px}

/* the strip — chapter i, month by month, drifting (v18 #years, carried over); every month is a door */
#strip{padding:clamp(30px,4vw,60px) 0 0;overflow:hidden}
#strip .headrow{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:clamp(18px,2.4vw,32px)}
#strip .headrow a{border-bottom:1px solid currentColor}
#strip .track{display:flex;gap:clamp(.8rem,2vw,1.6rem);width:max-content;padding:0 var(--pad);align-items:flex-end}
#strip .track.auto{animation:ritual 90s linear infinite}
#strip .track.auto:hover{animation-play-state:paused}
@keyframes ritual{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#strip .m{flex:0 0 auto;display:block}
#strip .m img{height:min(40svh,440px);width:auto;display:block}
#strip .m .lab{display:block;margin-top:.5rem;font-family:var(--mono);font-size:12px;color:var(--g1)}
#strip .m.end .lab{color:var(--ink)}
#strip .m.end img{outline:2px solid #F23700;outline-offset:4px}
@media (max-width:760px){#strip .m img{height:min(32svh,300px)}}

/* the travel — chapter i seen from above (v18, carried over) */
.maplayer{position:fixed;inset:0;z-index:95;overflow:hidden;pointer-events:none}
.maplayer .fveil{position:absolute;inset:0;background:var(--bg);opacity:0}
.mapgrid{position:absolute;top:50%;left:50%;display:grid;grid-template-columns:repeat(8,auto);gap:clamp(1rem,2.4vw,2.2rem);align-items:center;opacity:0}
.mapcard{position:relative}
.mapcard img{height:15.5vh;width:auto;border-radius:4px;max-width:none!important;display:block}
.mapcard .ml{position:absolute;top:calc(100% + .35rem);left:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--g1);white-space:nowrap}
.mapgrid.fly .mapcard:not(.tgt) img{filter:blur(1.6px) brightness(.97);transition:filter .5s linear}
.mapgrid .mapcard.tgt img{box-shadow:0 8px 40px rgba(13,11,8,.18)}
.travelghost{position:fixed;z-index:96;object-fit:cover;object-position:50% 50%;border-radius:var(--r);will-change:transform,width,height,top,left;margin:0;max-width:none!important}
.mapnote{position:absolute;font-family:'Caveat',cursive;font-weight:600;font-size:clamp(34px,4vw,60px);line-height:1;color:#1c1006;opacity:0;pointer-events:none;white-space:nowrap;transform-origin:50% 50%;
  text-shadow:0 0 26px rgba(249,247,242,.98),0 0 14px rgba(249,247,242,.96),0 0 6px rgba(249,247,242,.92),0 1px 0 rgba(249,247,242,.8),0 0 46px rgba(249,247,242,.7)}
.mapnote.lead{font-size:clamp(58px,7.2vw,116px);font-weight:600}
.mapnote .ink{display:inline-block;overflow:hidden;white-space:nowrap;line-height:2.1;padding:0 .7em;vertical-align:middle;will-change:width}
@media (max-width:760px){.mapnote{font-size:clamp(26px,6.4vw,38px)}.mapnote.lead{font-size:clamp(38px,10vw,60px)}}

.back{position:fixed;left:var(--pad);bottom:16px;z-index:60;font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:99px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:760px){.hdr nav{gap:14px}.hdr .logo img{height:18px}}