/* ============================================================================
   СКАРЫНА — chrome.css  ·  LANE 1 (masthead + colophon only)   hub#4233
   ----------------------------------------------------------------------------
   This sheet owns the CHROME and nothing else. It is lifted from
   work/comps/css/site.css sections 0 (the four helpers the chrome uses), 1, 2,
   3 and 10, plus the WordPress reconciliation the comps could not know about.

   WHAT L2 / L3 / L4 MUST DROP from their bundle so nothing is defined twice
   (exact selector list — if you keep them, the later copy silently wins):
     .sk-container .sk-container--wide .sk-visually-hidden .sk-toggle
     .sk-header .sk-masthead__inner .sk-brand .sk-brand__emblem .sk-wordmark
     .sk-iconbtn .sk-burger .sk-nav .sk-nav__list .sk-nav-scrim
     .sk-searchbar .sk-searchbar__inner .sk-searchbar__input .sk-searchbar__submit
     .sk-footer .sk-endpiece .sk-endpiece__rule .sk-endpiece__word
     .sk-colophon .sk-wordmark--footer .sk-colophon__line .sk-colophon__tag
     .sk-colophon__places .sk-colophon__head .sk-colophon__col
     .sk-footer__base .sk-footer__legal .sk-footer__meta
     .sk-skip (the chrome now owns the skip link — see section W)
   NOT claimed here (they are page components, keep them): .sk-grid
     .sk-listrow__thumb .hero__bookmark .sk-card .sk-btn .sk-chip …

   ★ site.css groups four selectors in ONE rule:
        .sk-iconbtn svg, .sk-searchbar__submit svg,
        .sk-listrow__thumb svg, .hero__bookmark svg { fill: none; }
     Only the first two are chrome. The rule is split below; L2/L4 MUST keep
     `.sk-listrow__thumb svg, .hero__bookmark svg { fill: none }` in their sheet
     or those two page components lose their stroke-only icons.

   ★ HARD DEPENDENCY — the `--slovo-*` token layer.
     Measured 2026-08-11 against the live site: `/` and `/about/` contain
     ZERO `--slovo-*` custom properties. Live global styles publish the palette
     as `--wp--preset--color--*` only. Every colour, space and duration below
     is a `var(--slovo-*)` and there are DELIBERATELY NO FALLBACK VALUES: a
     missing token layer must fail loudly (an obviously unstyled masthead), not
     quietly (a masthead that is 4 px off and ships). Enqueue the token layer
     BEFORE this sheet. `assets/css/chrome-tokens-fallback.css` in this lane
     defines exactly the 31 names used here (32 with the transitive closure),
     values lifted verbatim from work/comps/css/tokens.css — use it ONLY if no
     lane ships tokens.css.
   ============================================================================ */


/* ───────────────────────────────────────────────────────────────────────────
   W.  WORDPRESS RECONCILIATION  (new — the comps could not know about this)
   ─────────────────────────────────────────────────────────────────────────── */

/* The template is `arneiron`; all 18 of its templates render the chrome as
   <!-- wp:template-part {"slug":"header","tagName":"header"} /-->, which WP
   wraps in <header class="wp-block-template-part">. Two consequences:
     1. <header> inside <header> — an HTML content-model violation, and two
        `banner` landmarks. So parts/header.html's root is a <div class="sk-header">
        and the WRAPPER supplies the landmark: exactly one <header> per page.
     2. `.sk-header{position:sticky;top:0}` would be trapped inside that wrapper
        and could only "stick" within its own height, i.e. not at all.
   `display:contents` removes the wrapper's box, so .sk-header sits in the page
   flow exactly as it does in the comps and sticky behaves identically.
   The parent's `header-mobile` part renders as <div class="wp-block-template-part">
   and is deliberately NOT matched by these tag-qualified selectors. */
header.wp-block-template-part,
footer.wp-block-template-part { display: contents; }

/* core/group emits `is-layout-flow`, whose core-block-supports CSS adds
   `> * + * { margin-block-start: 24px }`. Inside the masthead flex row that
   pushes the nav and the action icons down. Neutralised for the chrome only. */
.sk-header .is-layout-flow > *,
.sk-header .is-layout-flow > * + * { margin-block-start: 0; margin-block-end: 0; }

/* Skip link. WP block themes already print TWO of their own — measured on
   /about/ they both read `Skip to content`, in ENGLISH, because the site's
   WPLANG is `en_US` even though every word of the journal is Russian (that
   also makes <html lang="en-US"> wrong; separate site-settings defect, not
   this lane's to fix). Dropping the comps' Russian `.sk-skip` in favour of
   core's would therefore have made the page WORSE, so it is ported as
   designed and core's duplicates should be suppressed — one line, in
   _handoff/enqueue-chrome.php. Both rules are shipped so the page is correct
   whether or not that snippet is taken. */
.sk-skip {
  position: absolute; left: var(--slovo-space-3); top: -4rem;
  z-index: var(--slovo-z-max);
  background: var(--slovo-oxblood); color: var(--slovo-ivory);
  padding: var(--slovo-space-2) var(--slovo-space-4);
  font-family: var(--slovo-font-meta);
  letter-spacing: var(--slovo-tracking-label);
  text-transform: uppercase; text-decoration: none;
  transition: top var(--slovo-dur) var(--slovo-ease);
}
.sk-skip:focus { top: var(--slovo-space-3); }
.skip-link.screen-reader-text:focus {
  background-color: var(--slovo-oxblood);
  color: var(--slovo-ivory);
  font-family: var(--slovo-font-meta);
  letter-spacing: var(--slovo-tracking-label);
  text-transform: uppercase;
}


/* ───────────────────────────────────────────────────────────────────────────
   0.  LAYOUT HELPERS the chrome consumes
   ─────────────────────────────────────────────────────────────────────────── */
.sk-container {
  width: 100%;
  max-width: var(--slovo-container-max);
  margin-inline: auto;
  padding-inline: var(--slovo-margin);
}
.sk-container--wide { max-width: 1280px; }

.sk-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* the two hidden checkboxes that drive nav + search (no JS) */
.sk-toggle { position: absolute; opacity: 0; pointer-events: none; }


/* ───────────────────────────────────────────────────────────────────────────
   1.  MASTHEAD HEADER  (p01 + p04)  — sticky black bar, gold hairline underline
   ─────────────────────────────────────────────────────────────────────────── */
.sk-header {
  position: sticky; top: 0;
  z-index: var(--slovo-z-header);
  background: var(--slovo-ink);
  color: var(--slovo-ivory);
  border-bottom: 1px solid var(--slovo-gold-line);
}
.sk-masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--slovo-space-4);
  min-height: 66px;
}

/* brand lockup ------------------------------------------------------------- */
.sk-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--slovo-space-3);
  text-decoration: none;
  color: var(--slovo-ivory);
  padding-inline: var(--slovo-space-1);
  position: relative;
}
.sk-brand__emblem { flex: 0 0 auto; width: 40px; height: 38px; display: block; }
.sk-brand__emblem svg { width: 100%; height: 100%; overflow: visible; }
.sk-wordmark {
  font-family: "Carina AI Antiqua", var(--slovo-font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--slovo-ivory);
  padding-left: var(--slovo-space-3);
  border-left: 1px solid var(--slovo-gold-line);
}
.sk-brand:hover .sk-wordmark { color: var(--slovo-gold-line); }

/* header action icons (search + account) ----------------------------------- */
.sk-masthead__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--slovo-space-2);
}
.sk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--slovo-ivory);
  background: transparent; border: 0;
  text-decoration: none; cursor: pointer;
  transition: color var(--slovo-dur) var(--slovo-ease);
}
.sk-iconbtn svg { width: 20px; height: 20px; }
/* stroke-only line icons must not inherit base.css `svg{fill:currentColor}`.
   Chrome half of the split rule — see the ★ note in the banner. */
.sk-iconbtn svg,
.sk-searchbar__submit svg { fill: none; }
.sk-iconbtn:hover { color: var(--slovo-gold-line); }
#sk-searchtoggle:checked ~ .sk-masthead .sk-iconbtn[for="sk-searchtoggle"] { color: var(--slovo-gold-line); }

/* hamburger (mobile only) -------------------------------------------------- */
.sk-burger {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; cursor: pointer;
}
.sk-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--slovo-ivory);
  transition: transform var(--slovo-dur) var(--slovo-ease),
              opacity var(--slovo-dur) var(--slovo-ease);
}
#sk-navtoggle:checked ~ .sk-masthead .sk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#sk-navtoggle:checked ~ .sk-masthead .sk-burger span:nth-child(2) { opacity: 0; }
#sk-navtoggle:checked ~ .sk-masthead .sk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ───────────────────────────────────────────────────────────────────────────
   2.  PRIMARY NAV  — inline on desktop, slide-in drawer on mobile
       The comps hand-wrote <ul class="sk-nav__list">. The port renders a real
       wp_navigation post through core/navigation with overlayMenu:"never", so
       the menu stays editable, gets aria-current for free and — because
       is_responsive() is false — emits NO overlay button and loads NO
       interactivity script module. `.sk-nav` is MY group wrapper: putting the
       className on the navigation block itself copies it onto the <ul> as well
       (core does this), which would have produced a second nested drawer.
       Both selector families are kept so either header variant renders.
   ─────────────────────────────────────────────────────────────────────────── */
.sk-nav { margin-inline: var(--slovo-space-4); }
.sk-nav__list,
.sk-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.35rem);
  list-style: none; margin: 0; padding: 0;
}
.sk-nav__list a,
.sk-nav .wp-block-navigation-item__content {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--slovo-font-meta);
  font-size: var(--slovo-fs-caption);
  letter-spacing: var(--slovo-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slovo-ivory);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--slovo-dur) var(--slovo-ease),
              border-color var(--slovo-dur) var(--slovo-ease);
}
.sk-nav__list a:hover,
.sk-nav .wp-block-navigation-item__content:hover { color: var(--slovo-gold-line); }
.sk-nav__list a[aria-current="page"],
.sk-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--slovo-gold-line);
  border-bottom-color: var(--slovo-gold-line);
}
/* core/navigation nests the label in a span; keep the underline on the <a>. */
.sk-nav .wp-block-navigation-item__label { display: inline; }
/* core's own gap/justification on the block wrapper must not fight the row.
   ★ M-e (merge correction, Phase A 2026-08-11): this rule read
       .sk-nav .wp-block-navigation { gap: 0 }
   and core copies `wp-block-navigation` onto the <ul> as well as the <nav>
   (this file's own section-2 comment documents that copy for className, but
   the rule below did not account for it).  The <ul> therefore carries BOTH
   `wp-block-navigation__container` and `wp-block-navigation`, both selectors
   match at specificity (0,2,0), and this one is LATER - so it beat the
   clamp() gap 32 lines above and the seven menu items rendered as one
   unbroken word ("ГЛАВНАЯТЕКУЩИЙ ВЫПУСКАРХИВ...") on every page.
   Measured live before the fix: computed gap on .sk-nav ul = 0px.
   Qualifying the selector with the element name keeps the author's intent
   (kill the gap on the <nav> wrapper) and can never reach the <ul>.
   TO REVERT: restore the single line above. */
.sk-nav nav.wp-block-navigation { gap: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   PHASE B · step 8 — the nav column was 10px short, so the 7 curated items
   wrapped onto a second row and the masthead stood at 147px (107px once the
   WooCommerce customer-account injection was suppressed) against a ~85px design.

   .sk-masthead__inner is a flex row and .sk-nav is a flex ITEM that took
   flex: 0 1 auto, i.e. it was allowed to shrink below its content width even
   though the row had ~120px of slack (measured: brand 230 + nav 570 + actions 96
   + gaps 32 = 960 of 1080). Shrunk to 570 against a 572.5px max-content, the
   list wrapped by ~2.5px.

   Refusing the shrink lets the item take its natural width. Measured on the live
   page with the rule injected, at 1440/1280/1100/1025/1024/1023: masthead 67px,
   ONE row, no horizontal overflow, list still inside the container at every one.
   67px matches the min-height: 66px declared by .sk-masthead__inner in this
   same file, and L1's WordPress-free harness measurement. At <=900px the drawer rule below takes over and is unaffected
   (measured 67px there too, before and after).

   TO REVERT: delete the single declaration below.
   ─────────────────────────────────────────────────────────────────────────── */
.sk-nav { flex: 0 0 auto; }

/* scrim behind the mobile drawer (label toggles the nav checkbox off) */
.sk-nav-scrim { display: none; }

@media (max-width: 900px) {
  .sk-burger { display: inline-flex; }
  .sk-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(78vw, 320px);
    margin: 0;
    background: var(--slovo-ink);
    border-right: 1px solid var(--slovo-gold-line);
    padding: calc(66px + var(--slovo-space-5)) var(--slovo-space-5) var(--slovo-space-6);
    transform: translateX(-102%);
    transition: transform var(--slovo-dur-slow) var(--slovo-ease);
    z-index: var(--slovo-z-dropdown);
    overflow-y: auto;
  }
  .sk-nav__list,
  .sk-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; }
  .sk-nav__list li,
  .sk-nav .wp-block-navigation-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .sk-nav__list a,
  .sk-nav .wp-block-navigation-item__content { width: 100%; padding-block: var(--slovo-space-3); border-bottom: 0; }
  .sk-nav__list a[aria-current="page"],
  .sk-nav .wp-block-navigation-item__content[aria-current="page"] { border-bottom: 0; }

  #sk-navtoggle:checked ~ .sk-masthead .sk-nav { transform: translateX(0); }

  /* ★ FIX 1 — in the comps the scrim label was a SIBLING OF <header> while the
     checkbox lives INSIDE it, so `#sk-navtoggle:checked ~ .sk-nav-scrim` could
     never match and the click-outside-to-close affordance was dead in all six
     pages. parts/header.html moves the label inside .sk-header, next to the
     checkbox, which makes the sibling combinator resolve.
     ★ FIX 2 — with the scrim finally rendering, the comps' z-order becomes
     visible as a second bug: --slovo-z-overlay (400) is ABOVE
     --slovo-z-dropdown (300), so the scrim would cover the drawer it is meant
     to sit behind and every menu link would be unclickable. Pinned one below
     the drawer instead. */
  #sk-navtoggle:checked ~ .sk-nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(17, 17, 17, 0.55);
    z-index: calc(var(--slovo-z-dropdown) - 1);
  }
  .sk-masthead__inner { gap: var(--slovo-space-2); }
}


/* ───────────────────────────────────────────────────────────────────────────
   3.  SEARCH BAR  (p04)  — revealed by #sk-searchtoggle
   ─────────────────────────────────────────────────────────────────────────── */
.sk-searchbar {
  max-height: 0; overflow: hidden;
  background: var(--slovo-charcoal);
  transition: max-height var(--slovo-dur-slow) var(--slovo-ease);
}
#sk-searchtoggle:checked ~ .sk-searchbar { max-height: 120px; }
.sk-searchbar__inner {
  display: flex; align-items: stretch;
  gap: 0;
  padding-block: var(--slovo-space-3);
}
.sk-searchbar__input {
  flex: 1 1 auto;
  background: var(--slovo-parchment);
  color: var(--slovo-ink);
  border: 1px solid var(--slovo-ink);
  border-right: 0;
  padding: var(--slovo-space-3) var(--slovo-space-4);
  font-family: var(--slovo-font-body);
  font-style: italic;
}
.sk-searchbar__input::placeholder { color: var(--slovo-text-muted); font-style: italic; }
.sk-searchbar__submit {
  flex: 0 0 auto;
  width: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--slovo-ink); color: var(--slovo-ivory);
  border: 1px solid var(--slovo-ink);
  cursor: pointer;
  transition: background var(--slovo-dur) var(--slovo-ease);
}
.sk-searchbar__submit:hover { background: var(--slovo-oxblood); border-color: var(--slovo-oxblood); }
.sk-searchbar__submit svg { width: 20px; height: 20px; }


/* ───────────────────────────────────────────────────────────────────────────
   10.  FOOTER / COLOPHON  (p01 + p16)
   ─────────────────────────────────────────────────────────────────────────── */
.sk-footer {
  margin-top: var(--slovo-space-9);
  background: var(--slovo-ink);
  color: var(--slovo-ivory);
  padding-block: var(--slovo-space-8) var(--slovo-space-6);
  border-top: 2px solid var(--slovo-gold-line);
}

/* engraved FINIS endpiece */
.sk-endpiece { display: flex; flex-direction: column; align-items: center; gap: var(--slovo-space-2); margin-bottom: var(--slovo-space-7); }
.sk-endpiece__rule { width: min(100%, 620px); height: auto; }
.sk-endpiece__word {
  font-family: "Carina AI Antiqua", var(--slovo-font-display);
  letter-spacing: 0.32em; font-size: var(--slovo-fs-caption);
  color: var(--slovo-gold-line);
  padding-left: 0.32em;
}

/* colophon columns */
.sk-colophon {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--slovo-space-6);
  padding-bottom: var(--slovo-space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.sk-wordmark--footer {
  color: var(--slovo-ivory);
  border-left: 0; padding-left: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  display: block; margin-bottom: var(--slovo-space-3);
}
.sk-colophon__line {
  font-family: var(--slovo-font-meta);
  font-size: var(--slovo-fs-caption);
  letter-spacing: var(--slovo-tracking-label);
  text-transform: uppercase;
  color: var(--slovo-gold-line);
  max-width: none;
}
.sk-colophon__tag { font-style: italic; color: var(--slovo-text-2); margin-top: var(--slovo-space-3); max-width: 34ch; }
.sk-colophon__places {
  margin-top: var(--slovo-space-3);
  font-family: var(--slovo-font-meta);
  font-size: var(--slovo-fs-caption);
  letter-spacing: var(--slovo-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sk-colophon__head {
  font-family: var(--slovo-font-meta);
  font-size: var(--slovo-fs-caption);
  letter-spacing: var(--slovo-tracking-label);
  text-transform: uppercase;
  color: var(--slovo-gold-line);
  margin-bottom: var(--slovo-space-3);
}
.sk-colophon__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--slovo-space-2); }
.sk-colophon__col a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--slovo-fs-body);
}
.sk-colophon__col a:hover { color: var(--slovo-gold-line); }

.sk-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--slovo-space-3);
  padding-top: var(--slovo-space-5);
}
.sk-footer__legal, .sk-footer__meta {
  font-family: var(--slovo-font-meta);
  font-size: var(--slovo-fs-caption);
  letter-spacing: var(--slovo-tracking-label);
  color: rgba(255, 255, 255, 0.55);
  max-width: none; margin: 0;
}

@media (max-width: 900px) {
  .sk-colophon { grid-template-columns: 1fr 1fr; }
  .sk-colophon__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sk-colophon { grid-template-columns: 1fr; }
  .sk-footer__base { flex-direction: column; }
}