/* doc.css — journal, articles, legal texts and 404 of the MOS-HOOKAH demo (018, build P6, 28.09, agent pages; map 12, 14).
   Journal after tl news: two columns of photo cards, the date as a big number, tags through «/». Article and legal text
   after tl publication / terms: light paper (--paper, --ink) over the dark site, a cross back. 404 after tl
   «Вы вышли за пределы локации»: one screen of smoke with the client's hookah in the dark.
   Same system as the home page; motion only transform and opacity. */

body[data-page="zhurnal"], body[data-page="statya"], body[data-page="doc"], body[data-page="e404"] { background: var(--bg); }

/* photo that did not load (generation still running): a quiet smoke gradient instead of a broken image */
.ph--none { background: radial-gradient(70% 60% at 30% 35%, rgba(153,33,255,.28), rgba(0,0,0,0) 70%), radial-gradient(55% 55% at 75% 70%, rgba(66,207,245,.14), rgba(0,0,0,0) 70%), #121214; }
img.is-broken { visibility: hidden; }

/* ======================= journal ======================= */
.jr-top { padding: calc(var(--hdr) + 110 * var(--u)) 0 calc(76 * var(--u)); text-align: center; }
.jr-top__h { margin-top: calc(18 * var(--u)); font-size: calc(96 * var(--u)); letter-spacing: .04em; }
.jr-filter { justify-content: center; margin-top: calc(38 * var(--u)); }
.jr-filter .chip { transition: none; }
.jr-filter .chip:hover { color: var(--text); border-color: var(--text-2); }
.jr-feed { padding-bottom: calc(40 * var(--u)); }
.jr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.jcard { position: relative; display: block; aspect-ratio: 1 / .9; overflow: hidden; background: var(--bg-3); isolation: isolate; }
.jcard--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.jcard.is-off { display: none; }
.jcard__ph { position: absolute; inset: 0; }
.jcard__ph img { transition: transform 1.6s var(--ease) .35s; }
.jcard:hover .jcard__ph img { transform: scale(1.05); transition-delay: 0s; }
.jcard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(8,8,9,.92) 0%, rgba(8,8,9,.35) 45%, rgba(8,8,9,0) 70%); }
.jcard__date { position: absolute; left: calc(46 * var(--u)); top: calc(46 * var(--u)); z-index: 2; display: flex; align-items: flex-end; gap: calc(12 * var(--u)); }
.jcard__d { font-size: calc(78 * var(--u)); line-height: .8; }
.jcard__my { padding-bottom: calc(6 * var(--u)); min-width: calc(90 * var(--u)); border-bottom: 1px solid var(--line-2); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; }
.jcard__body { position: absolute; left: calc(46 * var(--u)); right: calc(46 * var(--u)); bottom: calc(42 * var(--u)); z-index: 2; display: block; }
.jcard__tags { display: block; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.jcard__t { display: block; margin-top: calc(14 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.16; letter-spacing: .04em; text-transform: uppercase; }
.jcard--wide .jcard__t { max-width: calc(860 * var(--u)); font-size: calc(36 * var(--u)); }
.jcard__a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(14 * var(--u)); max-width: calc(520 * var(--u)); color: var(--text-2); font-size: var(--t-s); line-height: 1.5; }
.jcard__more { display: inline-block; margin-top: calc(18 * var(--u)); color: var(--cyan); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; }
.jr-sub { background: var(--bg-2); border-top: 1px solid var(--line); overflow: hidden; }
.jr-sub__in { display: grid; grid-template-columns: 6fr 6fr; gap: var(--gap); align-items: center; }
.jr-sub__txt .lead { margin-top: calc(24 * var(--u)); max-width: calc(470 * var(--u)); }
.jr-sub__txt .btn { margin-top: calc(36 * var(--u)); }
.jr-sub__cards { position: relative; height: calc(440 * var(--u)); }
.jr-sub__c { position: absolute; left: 50%; top: 50%; width: calc(250 * var(--u)); aspect-ratio: 1; object-fit: cover; translate: calc(-50% + var(--x)) -50%; rotate: var(--r); border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0,0,0,.5); background: #1c1c1f; }
.jr-sub__c.is-broken { visibility: visible; opacity: 0; }

/* ======================= paper: article and legal text ======================= */
body[data-page="statya"] .hdr::before, body[data-page="doc"] .hdr::before { inset: 0; background: var(--bg); }
.pg--statya, .pg--doc { padding-top: var(--hdr); }
.paper { position: relative; background: var(--paper); color: var(--ink); padding: calc(96 * var(--u)) 0 calc(120 * var(--u)); }
.paper ::selection { background: var(--violet); color: #fff; }
.paper__x { position: absolute; left: 50%; top: calc(26 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); translate: -50% 0; z-index: 2; }
.paper__x i { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.paper__x i::before, .paper__x i::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 1px; background: var(--ink); transform: rotate(45deg); }
.paper__x i::after { transform: rotate(-45deg); }
.paper__x:hover i { transform: rotate(90deg); }

.art-h { padding-top: calc(30 * var(--u)); }
.art-h__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.art-h__date { display: flex; align-items: flex-end; gap: calc(12 * var(--u)); }
.art-h__d { font-size: calc(104 * var(--u)); line-height: .78; }
.art-h__my { padding-bottom: calc(6 * var(--u)); min-width: calc(96 * var(--u)); border-bottom: 1px solid rgba(20,20,20,.3); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; }
.art-h__lead { max-width: calc(330 * var(--u)); color: #3b3b3d; font-size: var(--t-s); line-height: 1.6; }
.art-h__tags { margin-top: calc(96 * var(--u)); text-align: center; color: #6c6c70; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; }
.art-h__t { margin: calc(24 * var(--u)) auto 0; max-width: calc(1040 * var(--u)); text-align: center; font-size: calc(40 * var(--u)); line-height: 1.12; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.art-h__when { margin-top: calc(24 * var(--u)); text-align: center; color: #6c6c70; font-size: var(--t-xs); letter-spacing: .12em; }
.art-ph { margin: calc(72 * var(--u)) auto 0; width: min(calc(100% - 2 * var(--pad)), calc(1120 * var(--u))); aspect-ratio: 16 / 9; }
.art-b { margin: calc(76 * var(--u)) auto 0; width: min(calc(100% - 2 * var(--pad)), calc(660 * var(--u))); color: #26262a; font-size: max(15px, calc(16 * var(--u))); line-height: 1.78; }
.art-b p { margin-top: 1.1em; }
.art-b__first { margin-top: 0 !important; color: var(--ink); font-size: calc(19 * var(--u)); line-height: 1.62; }
.art-b__h { margin-top: 2.3em; color: var(--ink); font-size: calc(19 * var(--u)); line-height: 1.32; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.art-b__fact { margin-top: 2em; color: var(--violet); font-family: var(--f-disp); font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: .02em; }
.art-b__fact + p { margin-top: .6em; }
.art-b__ul { margin-top: 1em; display: grid; gap: .45em; }
.art-b__ul li { position: relative; padding-left: calc(28 * var(--u)); }
.art-b__ul li::before { content: ""; position: absolute; left: 0; top: .86em; width: calc(14 * var(--u)); height: 1px; background: var(--violet); }
.art-b__ul--own li { padding-left: 0; }
.art-b__ul--own li::before { display: none; }
.art-b__warn { margin-top: 2em !important; padding-top: 1.2em; border-top: 1px solid rgba(20,20,20,.16); color: #6c6c70; font-size: var(--t-s); }
.art-b .lnk { color: var(--violet); }
.art-b__cta { margin-top: calc(46 * var(--u)); }
.art-rel { margin-top: calc(100 * var(--u)); }
.art-rel__h { text-align: center; font-size: calc(26 * var(--u)); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.art-rel__row { margin-top: calc(40 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(20,20,20,.18); }
.alink { position: relative; display: block; padding: calc(30 * var(--u)) calc(60 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)); border-bottom: 1px solid rgba(20,20,20,.18); border-left: 1px solid rgba(20,20,20,.18); transition: none; }
.alink:first-child { border-left: 0; padding-left: 0; }
.alink__t { display: block; font-size: calc(15 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.alink__d { display: block; margin-top: calc(10 * var(--u)); color: #55555a; font-size: var(--t-s); line-height: 1.5; }
.alink i { position: absolute; right: calc(24 * var(--u)); top: calc(36 * var(--u)); width: calc(20 * var(--u)); height: 1px; background: var(--ink); transition: transform .5s var(--ease); }
.alink i::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.alink:hover .alink__t { color: var(--violet); }
.alink:hover i { transform: translateX(6px); }

/* the way on after the paper (map 12.B3): order or venue calculation + two articles of the same topic */
.art-next { background: var(--bg); }
.art-next__cta { display: flex; justify-content: center; }
.art-next__head { margin-top: calc(110 * var(--u)); padding-bottom: calc(22 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line); }
.art-next__head .lnk { color: var(--text-2); }
.art-next__row { display: grid; grid-template-columns: 1fr 1fr; }
.rcard { display: grid; grid-template-columns: 1fr calc(210 * var(--u)); grid-template-rows: auto 1fr auto; column-gap: var(--gap); row-gap: calc(18 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) 0; border-right: 1px solid var(--line); }
.rcard + .rcard { padding: calc(40 * var(--u)) 0 calc(40 * var(--u)) calc(40 * var(--u)); border-right: 0; }
.rcard__date { grid-column: 1; display: flex; align-items: flex-end; gap: calc(10 * var(--u)); }
.rcard__d { font-size: calc(58 * var(--u)); line-height: .8; }
.rcard__my { padding-bottom: calc(4 * var(--u)); border-bottom: 1px solid var(--line-2); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; }
.rcard__ph { grid-column: 2; grid-row: 1 / span 3; display: block; aspect-ratio: 1; }
.rcard__tags { grid-column: 1; align-self: end; color: var(--text-3); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; }
.rcard__t { grid-column: 1; font-size: calc(21 * var(--u)); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.rcard:hover .rcard__t { color: var(--cyan); }
.rcard:hover .rcard__ph img { transform: scale(1.06); }

/* legal texts */
.doc-h { text-align: center; padding-top: calc(40 * var(--u)); }
.doc-h__over { color: var(--violet); }
.doc-h__t { margin-top: calc(18 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.12; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.doc-h__sub { margin-top: calc(18 * var(--u)); color: #3b3b3d; font-size: calc(18 * var(--u)); }
.doc-h__nav { margin-top: calc(34 * var(--u)); display: flex; justify-content: center; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.doc-h__a { padding: calc(11 * var(--u)) calc(18 * var(--u)); border: 1px solid rgba(20,20,20,.22); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; transition: none; }
.doc-h__a:hover { border-color: var(--ink); }
.doc-h__a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.doc-b { margin: calc(70 * var(--u)) auto 0; width: min(calc(100% - 2 * var(--pad)), calc(780 * var(--u))); color: #2a2a2e; font-size: max(13.5px, calc(14.5 * var(--u))); line-height: 1.72; }
.doc-b h2 { margin-top: 2.2em; color: var(--ink); font-size: calc(17 * var(--u)); line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.doc-b h3 { margin-top: 1.5em; color: var(--ink); font-size: calc(15 * var(--u)); font-weight: 600; }
.doc-b p { margin-top: .8em; }
.doc-b h2 + p, .doc-b h3 + p { margin-top: .6em; }
.doc-b__ul { margin-top: .6em; display: grid; gap: .35em; }
.doc-b__ul li { position: relative; padding-left: calc(24 * var(--u)); }
.doc-b__ul li::before { content: ""; position: absolute; left: 0; top: .86em; width: calc(10 * var(--u)); height: 1px; background: var(--violet); }
.doc-b__ul--own li { padding-left: 0; }
.doc-b__ul--own li::before { display: none; }

/* ======================= 404 ======================= */
body[data-page="e404"] .pnav { display: none; }
.e404 { position: relative; height: 100vh; min-height: calc(640 * var(--u)); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; background: var(--bg); }
.e404__stage { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 70%, #1a0f2a 0%, #0b0b0c 62%); }
.e404__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.e404__stage.gl-on .e404__gl { opacity: 1; }
.e404__haze { position: absolute; inset: 0; transition: opacity 1.4s var(--ease); }
.e404__stage.gl-on .e404__haze { opacity: 0; }
.e404__haze i { position: absolute; left: 50%; top: 42%; width: calc(760 * var(--u)); aspect-ratio: 1.6; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(153,33,255,.30), rgba(153,33,255,0)); animation: haze 14s ease-in-out infinite alternate; }
.e404__haze i:nth-child(2) { top: 30%; width: calc(560 * var(--u)); background: radial-gradient(closest-side, rgba(66,207,245,.16), rgba(66,207,245,0)); animation-duration: 18s; animation-direction: alternate-reverse; }
.e404__haze i:nth-child(3) { top: 62%; width: calc(980 * var(--u)); background: radial-gradient(closest-side, rgba(255,104,40,.10), rgba(255,104,40,0)); animation-duration: 22s; }
@keyframes haze { from { transform: translate(-6%, 4%) scale(.94); } to { transform: translate(6%, -5%) scale(1.08); } }
.e404__hk { position: absolute; left: 50%; bottom: -6vh; height: 84vh; width: auto; max-width: none; translate: -50% 0; opacity: .28; filter: brightness(.6) saturate(.9) drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.e404__in { position: relative; z-index: 2; }
.e404__h { max-width: calc(1080 * var(--u)); margin: calc(22 * var(--u)) auto 0; }
.e404__btns { margin-top: calc(46 * var(--u)); display: flex; justify-content: center; gap: calc(12 * var(--u)); }