/* БОРБА™ v19 — THE SITE, in the home's language ("d · the opening"): the paper, its rules, the covers, the doors.
   Shared by d.html (home), archive.html, films.html, world.html — on top of base.css.
   Brand laws (HANDOFF §1): alabaster + ink, yellow only over photography, БОРБА™ never transformed,
   6px on imagery, no pinning, nothing ever empty, reduced motion = the finished page. */

/* header — the page you are on keeps its underline */
.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
/* the header gives way while you read down and comes back on the way up — over the reading it is set on the paper,
   so it never lies across a line; at the top of a page it is the inverting mark again (2026-11-07) */
.hdr{transition:transform .55s var(--e-out),background-color .35s var(--e-out),box-shadow .35s var(--e-out)}
.hdr.away{transform:translate3d(0,-110%,0)}
.hdr.solid{mix-blend-mode:normal;color:var(--ink);background:rgba(249,247,242,.9);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 1px 0 var(--rule)}
.hdr.solid .logo img{filter:invert(1)}
.where{transition:opacity .4s var(--e-out),transform .55s var(--e-out)}
.where.away{transform:translate(-50%,-60px)}
.back{transition:transform .5s var(--e-out),opacity .35s var(--e-out)}
.back.away{transform:translateY(64px);opacity:0;pointer-events:none}
/* a translated term: the English and the German share one cell, so switching never moves the line */
.tr{display:inline-grid;vertical-align:top}
.tr>span{grid-area:1/1}
.tr .tr-s{visibility:hidden}
.tr.de .tr-v{color:var(--g1)}
.tr-v{transition:color .3s var(--e-out)}
/* a title set letter by letter still breaks only between its words */
.wd{display:inline-block;white-space:nowrap}

/* the paper's furniture */
.rl{display:block;height:1px;background:var(--ink);transform-origin:left}
.rl.thin{background:var(--rule2)}
.rl.dbl{height:4px;background:none;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.dateline{display:flex;justify-content:space-between;gap:12px;padding:10px 0;flex-wrap:wrap}
.nw{white-space:nowrap}

/* the section front — every page opens the way the home's banner ends: rules, a dateline, the word, the double rule */
.front{padding:calc(64px + clamp(8px,2vw,28px)) var(--pad) 0}
.front .ttl{margin:0;padding:clamp(12px,1.8vw,26px) 0 clamp(6px,1vw,14px);font-family:var(--sans);font-weight:900;font-style:italic;letter-spacing:-.045em;line-height:.8;font-size:clamp(88px,19vw,330px);white-space:nowrap;overflow:hidden}
.front .ttl .ch{display:inline-block;will-change:transform}
.front .strap{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;padding:clamp(12px,1.6vw,20px) 0 0}
.front .strap p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.9vw,28px);line-height:1.25}

/* THE PRESS (2026-11-07) — the newspaper as inspiration, never as a copy. Print is pressure before it is colour:
   on this paper a word arrives first as an impression — pressed, no ink, only a shade on its upper rim and light on
   its lower one — and the ink follows in one pass, left to right, the way a press passes. What is now is inked;
   what was never inked stays pressed (the silence). The hand inks what it touches. Reading text is pressed too,
   and inks as it is reached. No dots, no grain, no old paper: the alabaster, lit from above. */
:root{--blind:#EBE7DC}
.press{position:relative}
.press .bl{color:var(--blind);text-shadow:0 calc(-1 * max(1px,.011em)) 0 rgba(13,11,8,.2),0 max(1px,.013em) 0 #fff,0 max(2px,.028em) max(2px,.05em) rgba(255,255,255,.8)}
.press .ik{position:absolute;inset:0;padding:inherit;color:var(--ink);clip-path:inset(0 100% 0 0);transition:clip-path 1.25s cubic-bezier(.65,0,.3,1);text-shadow:0 max(1px,.012em) 0 rgba(255,255,255,.55);pointer-events:none}
.press.inked .ik{clip-path:inset(0 0 0 0)}
.doors b.press .ik{transition-duration:.55s}
.rv{transition:color 1.1s var(--e-out),text-shadow 1.1s var(--e-out)}
.rv.pre:not(.inked){color:var(--blind);text-shadow:0 -1px 0 rgba(13,11,8,.15),0 1px 0 #fff}
/* a photograph's place is pressed into the paper before the picture arrives (never an empty box) */
.plate-wait{background:var(--blind);box-shadow:inset 0 1px 0 rgba(13,11,8,.12),inset 0 -1px 0 #fff}

/* THE CUT — a cover that opens like a slit in the paper: its upper wall shades the picture, its lower one catches the light */
.cov.slit{clip-path:inset(47% 0 47% 0);transition:clip-path 1.7s cubic-bezier(.7,0,.2,1)}
.cov.slit.open{clip-path:inset(0 0 0 0)}
.cov .lip{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 30px 40px -22px rgba(0,0,0,.8),inset 0 -26px 34px -22px rgba(0,0,0,.55),inset 0 -2px 0 rgba(249,247,242,.28)}
.cov .midline{position:absolute;top:50%;left:0;width:1px;height:1px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.press .ik,.rv,.cov.slit{transition:none}}

/* chapter covers — the films' language: fade from black, the title letter by letter, yellow over the photograph */
.cov{position:relative;height:min(92svh,980px);min-height:520px;margin-top:clamp(90px,12vw,170px);overflow:hidden;background:var(--ink)}
.cov img,.cov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;max-width:none!important}
.cov .veil{position:absolute;inset:0;background:var(--ink)}
.cov .stack{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vh,64px);color:var(--yellow);display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.cov .nm{font-family:var(--mono);font-size:12px;display:block;margin-bottom:10px}
.cov h2{margin:0;font-family:var(--sans);font-weight:900;font-style:italic;font-size:clamp(64px,11vw,190px);line-height:.82;letter-spacing:-.035em}
.cov h2 .ch,.cov .ttl .ch{display:inline-block}
.cov .facts{font-family:var(--mono);font-size:12px;text-align:right;display:grid;gap:2px}
.cov::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,11,8,.62) 0%,rgba(13,11,8,0) 46%);pointer-events:none}
/* the lens: every cover falls off to its edges, as projected light does; the title carries a little of the dark under it */
.cov::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 95% 85% at 50% 42%,rgba(13,11,8,0) 52%,rgba(13,11,8,.42) 100%)}
.cov .stack{z-index:2}
.cov h2{text-shadow:0 2px 2px rgba(13,11,8,.18),0 14px 48px rgba(13,11,8,.38)}
/* a cover with no photograph is a black frame — its type is the paper's colour, never yellow (yellow lives only over photography) */
.cov.dark .stack{color:var(--bg)}
.cov.dark::after{display:none}

/* a quiet line — the serif, alone */
.quiet{padding:clamp(110px,15vw,220px) var(--pad) 0;text-align:center}
.quiet p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.4vw,68px);line-height:1.05}
.quiet .mono{display:block;margin-top:16px}
/* the answer to the silence: the same line, set right under chapter ii's cover */
.quiet.ret{padding-top:clamp(70px,9vw,130px)}

/* an end line under a chapter: hairline, mono, both ends */
.endline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:clamp(60px,8vw,110px) var(--pad) 0;padding-top:12px;border-top:2px solid var(--ink)}

/* the doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(110px,14vw,200px) var(--pad) 0;border-top:2px solid var(--ink)}
.doors a{position:relative;padding:22px 18px 40px;border-right:1px solid var(--rule)}
.doors a:first-child{padding-left:0}.doors a:last-child{border-right:0}
.doors b{display:block;font-family:var(--sans);font-weight:900;font-style:italic;font-size:clamp(40px,5vw,84px);line-height:.88;letter-spacing:-.03em;margin-top:10px;transition:transform .5s var(--e-out)}
.doors a:hover b{transform:translateX(10px)}
.colo{padding:clamp(70px,9vw,130px) var(--pad) 40px}
.colo .mh2{font-family:var(--sans);font-weight:900;letter-spacing:-.05em;line-height:.8;font-size:clamp(64px,15vw,250px);padding:16px 0 10px;white-space:nowrap}
.colo .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:12px}

/* reading reveal — the base state is the finished page; JS only lifts it from a little lower */
.rv{will-change:transform,opacity}

/* leaving a page: the paper clears before the next one is set */
body.leave main,body.leave .where{opacity:0;transition:opacity .22s var(--e-out)}

/* where you are — a mono line set in the header's middle, inverting over anything (desktop only) */
.where{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:51;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .4s var(--e-out);white-space:nowrap}
.where.on{opacity:.85}
@media (max-width:900px){.where{display:none}}

@media (max-width:760px){
  .cov{height:78svh}
  .doors{grid-template-columns:1fr}
  .doors a{border-right:0;border-bottom:1px solid var(--rule);padding-left:0}
  .front .dateline span:nth-child(2){display:none}
}