/* ============================================================
 * chrome-print.css — the one Hero Rising chrome in the «Солнечный отпечаток» language.
 *
 * Dresses the canonical chrome that scripts/gen-nav.mjs stamps into every page (hr-nav and hr-footer
 * regions): the header row, the burger drawer and its backdrop, the footer.
 * Markup comes from gen-nav and is never edited by hand; behaviour stays in /nav.js; geometry stays in
 * /chrome.css — row from 1101 px, logo + «Рассчитать профиль» + burger up to 1100 px, row heights
 * 70 / 66 / 64 px, the crest's 34 / 28 / 25 px, the phone note's 44 px line. This file changes the skin
 * only: cotton paper, the process's ink (data-process on <html>; vandyke sepia by default), the print fonts.
 * No glass, no dark slab (ART-BIBLE §2).
 *
 * Link it right after the hr-style region (which carries /chrome.css):
 *   <link rel="stylesheet" href="/lab/print-shared/chrome-print.css">
 * Tokens come from /lab/print-shared/style.css (per process); each fallback is the default vandyke value,
 * so the chrome holds on its own.
 *
 * Dressed here: .hr-nav (its ::before substrate and ::after rule, also .scrolled), .hr-logo (wordmark; the
 * crest .hr-logo-mark is left exactly as chrome.css sizes it), .hr-links a, .hr-acct, .hr-cta (+ arrow),
 * .hr-burger, .hr-backdrop, .hr-menu (a, a small,
 * a[aria-current], .hr-menu-sep, .hr-menu-cta), .hr-footer / .hr-footer--lab, .hr-foot-wrap (width and
 * gutters only), .hr-foot-brand .hr-logo, .hr-foot-motto, .hr-foot-copy, .hr-foot-h, .hr-foot-col a, .hr-foot-sub,
 * .hr-foot-legal, and the focus rings of all of them. Left to chrome.css untouched: .hr-header, .hr-nav-wrap
 * geometry, .hr-calc, .hr-logo-mark. Beside them, three page elements the fixed
 * row decides about: the sticky .dock (CLARITY §3), the .skip link, and a page's own .foot band right before
 * the footer.
 * ============================================================ */

/* ---------- what the fixed row takes from the page ---------------------------------------------
   --hr-head-h  the fixed row's real height: 70 px from 1101 px, 66 px up to 1100, 64 px up to 430.
   --hr-note-h  0: the phone «Сайт в разработке» line that took 44 px of the flow was removed on
                2026-10-23; kept so the pages' calc()s stay valid.
   A first screen that fills the viewport uses calc(100svh - var(--hr-note-h)) and keeps its copy
   below var(--hr-head-h); anything that sticks under the row uses top: var(--hr-head-h). */
:root { --hr-head-h: 70px; --hr-note-h: 0px; }
@media (max-width: 1100px) { :root { --hr-head-h: 66px; } }
@media (max-width: 430px) { :root { --hr-head-h: 64px; } }

/* an anchor jump clears the row (a page's own scroll-margin covers its .dock) */
html { scroll-padding-top: calc(var(--hr-head-h) + 12px); }

/* ---------- the row: the unexposed margin of the sheet ----------------------------------------- */
.hr-nav::before,
.hr-nav.scrolled::before {
  background:
    var(--grain, none),
    var(--paper, #f3ede2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* one thin rule under the row, always (chrome.css shows its brass hairline only after scrolling) */
.hr-nav::after,
.hr-nav.scrolled::after {
  left: 0; right: 0; height: 1px; opacity: 1;
  background: var(--rule, rgba(87, 61, 41, .16));
}

/* brand: the crest stays exactly as the canon draws it; the wordmark is set in Prata, in ink */
.hr-logo {
  font-family: var(--f-display, 'Prata', 'Times New Roman', serif);
  font-weight: 400; font-size: 16px; letter-spacing: .2em;
  color: var(--deep, #49311e);
}
.hr-logo span { opacity: 1; }

/* destinations: Martian Mono, like every label on a plate */
.hr-links a,
.hr-acct {
  font-family: var(--f-mono, 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  color: var(--ink, #573d29); opacity: 1;
  text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.hr-links a:hover,
.hr-acct:hover { opacity: 1; color: var(--deep, #49311e); text-decoration-line: underline; }
.hr-links a[aria-current="page"],
.hr-acct[aria-current="page"] {
  color: var(--deep, #49311e);
  text-decoration-line: underline; text-decoration-thickness: 1.5px;
}

/* the one action: the same deep-ink stencil card as the page's own buttons */
.hr-cta {
  gap: 10px; padding: 0 17px 0 16px; border-radius: 0;
  font-family: var(--f-mono, 'Martian Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--white, #f2f0ef);
  background: var(--deep, #49311e);
  box-shadow: none;
  clip-path: polygon(0 4%, 99.2% 0, 100% 95%, .7% 100%);
  transition: transform .25s var(--ease, ease), background-color .3s ease;
}
.hr-cta::after {
  content: '→'; font: 400 15px/1 var(--f-text, 'Literata', Georgia, serif); letter-spacing: 0;
  transition: transform .3s var(--ease, ease);
}
.hr-cta:hover { background: var(--deep-2, #5a3d27); box-shadow: none; transform: translateY(-1px); }
.hr-cta:hover::after { transform: translateX(4px); }

.hr-burger { color: var(--ink, #573d29); border-radius: 0; }
/* touch targets: 44 px on every width (the row itself is 64–70 px, so it does not grow) */
.hr-logo, .hr-cta { min-height: 44px; }
.hr-burger { width: 44px; height: 44px; }
/* …the row keeps its height (--hr-head-h): the 2 px the targets gained come out of its padding */
.hr-nav-wrap { padding-top: 13px; padding-bottom: 13px; }
@media (max-width: 1100px) { .hr-nav-wrap { padding-top: 11px; padding-bottom: 11px; } }
@media (max-width: 430px) { .hr-nav-wrap { padding-top: 10px; padding-bottom: 10px; } }
.hr-burger span { height: 1.5px; }

/* focus: ink on paper; a clipped card draws its ring inside (clip-path would cut an outer one) */
.hr-nav a:focus-visible,
.hr-burger:focus-visible,
.hr-menu a:focus-visible,
.hr-footer a:focus-visible {
  outline: 2px solid var(--deep, #49311e); outline-offset: 3px; border-radius: 0;
}
.hr-nav .hr-cta:focus-visible,
.hr-menu .hr-menu-cta:focus-visible { outline: 2px solid var(--white, #f2f0ef); outline-offset: -5px; }

/* the long row between 1101 and 1300 px: the mono narrows instead of shrinking under 10.5 px */
@media (max-width: 1300px) {
  .hr-links a,
  .hr-acct { font-size: 10.5px; letter-spacing: .08em; font-stretch: 87.5%; }
}
/* eight destinations since 2026-10-22 (Разборы, Игра): a wider row from 1301 px, and between 1101 and 1300 px
   the mono narrows further and the gaps close, so «Войти» and the action never leave the screen */
@media (min-width: 1101px) { .hr-nav-wrap { max-width: 1360px; } }
@media (min-width: 1101px) and (max-width: 1300px) {
  .hr-nav-wrap { gap: 16px; padding-left: 24px; padding-right: 24px; }
  .hr-links { gap: 12px; }
  .hr-links a,
  .hr-acct { font-stretch: 75%; letter-spacing: .04em; }
  .hr-acct { padding-left: 14px; }
}
@media (max-width: 1100px) {
  .hr-logo { font-size: 15px; letter-spacing: .16em; }
  .hr-cta { font-size: 10.5px; letter-spacing: .1em; padding: 0 14px 0 13px; gap: 8px; }
}
@media (max-width: 480px) {
  .hr-logo { font-size: 13.5px; letter-spacing: .12em; }
  .hr-cta { font-size: 10.5px; letter-spacing: .06em; font-stretch: 75%; padding: 0 12px 0 11px; gap: 6px; }
  .hr-cta::after { font-size: 14px; }
}
/* 360 px phones: the wordmark and the card tighten; under 360 the arrow goes, the label stays */
@media (max-width: 380px) {
  .hr-logo { font-size: 12.5px; letter-spacing: .08em; }
  .hr-cta { letter-spacing: .03em; padding: 0 10px; gap: 5px; }
}
@media (max-width: 359.98px) { .hr-cta::after { display: none; } }

/* ---------- the drawer: a sheet slid in from the right; the backdrop is a wash of ink --------- */
.hr-backdrop { background: rgba(var(--deep-rgb, 73, 49, 30), .34); }
.hr-menu {
  background:
    var(--grain, none),
    var(--paper, #f3ede2);
  border-left: 1px solid var(--rule, rgba(87, 61, 41, .16));
  box-shadow: -30px 0 50px -38px rgba(var(--deep-rgb, 73, 49, 30), .6);
}
.hr-menu a {
  position: relative;
  font-family: var(--f-display, 'Prata', 'Times New Roman', serif);
  font-size: 27px; font-weight: 400; line-height: 1.12;
  color: var(--deep, #49311e);
  border-bottom: 1px dotted rgba(var(--ink-rgb, 87, 61, 41), .28);
  text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.hr-menu a:hover { text-decoration-line: underline; }
.hr-menu a small {
  font: 500 10.5px/1.2 var(--f-mono, 'Martian Mono', ui-monospace, monospace);
  letter-spacing: .14em; color: var(--ink-2, #6a5545);
}
.hr-menu a[aria-current="page"] { color: var(--deep, #49311e); }
/* «you are here»: the sensitized dot the page uses for its own bullets */
.hr-menu a[aria-current="page"]::before {
  content: ''; position: absolute; left: -17px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--sens, #e0d18f); box-shadow: 0 0 0 1px rgba(26, 30, 20, .35);
}
.hr-menu-sep { background: var(--rule, rgba(87, 61, 41, .16)); }
.hr-menu .hr-menu-cta {
  gap: 10px; border-radius: 0; border-bottom: 0;
  font-family: var(--f-mono, 'Martian Mono', ui-monospace, monospace);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--white, #f2f0ef);
  background: var(--deep, #49311e);
  clip-path: polygon(0 4%, 99.4% 0, 100% 95%, .5% 100%);
}
.hr-menu .hr-menu-cta::after { content: '→'; font: 400 16px/1 var(--f-text, 'Literata', Georgia, serif); letter-spacing: 0; }
.hr-menu .hr-menu-cta:hover { text-decoration: none; background: var(--deep-2, #5a3d27); }
@media (max-width: 430px) { .hr-menu a { font-size: 25px; } }

/* ---------- the footer: the back of the sheet -------------------------------------------------- */
.hr-footer,
.hr-footer.hr-footer--lab {
  position: relative; z-index: 1;
  margin-top: clamp(72px, 9vw, 140px);
  padding: 52px 0 calc(58px + env(safe-area-inset-bottom, 0px));
  background:
    var(--grain, none),
    var(--paper-2, #eae2d2);
  border-top: 1px solid var(--rule, rgba(87, 61, 41, .16));
  color: var(--ink-2, #6a5545);
}
/* a page's own band right before the footer (its .foot: prices, a closing line) reads as one block */
.foot + .hr-footer,
.foot + .hr-footer.hr-footer--lab { margin-top: 0; }

.hr-foot-wrap {
  max-width: 1480px;
  padding: 0 var(--gut, clamp(20px, 5.6vw, 92px));
  gap: 32px clamp(28px, 4vw, 64px);
}
.hr-foot-brand .hr-logo { margin-bottom: 12px; }
.hr-foot-motto { font: italic 400 16px/1.45 var(--f-text, 'Literata', Georgia, serif); color: var(--deep, #49311e); margin: 0 0 6px; }
.hr-foot-copy { font: italic 400 15px/1.5 var(--f-text, 'Literata', Georgia, serif); color: var(--ink-2, #6a5545); }
.hr-foot-h {
  margin-bottom: 8px;
  font: 600 10.5px/1.5 var(--f-mono, 'Martian Mono', ui-monospace, monospace);
  letter-spacing: .18em; color: var(--ink-2, #6a5545);
}
.hr-foot-col a {
  padding: 4px 0;
  font: 400 16.5px/1.35 var(--f-text, 'Literata', Georgia, serif);
  color: var(--ink, #573d29);
  text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.hr-foot-col a:hover { color: var(--deep, #49311e); text-decoration-line: underline; }
.hr-foot-col a[aria-current="page"] { color: var(--deep, #49311e); text-decoration-line: underline; text-decoration-thickness: 1.5px; }
.hr-foot-sub {
  max-width: 1480px; padding: 18px var(--gut, clamp(20px, 5.6vw, 92px)) 0;
  border-top: 1px dashed var(--rule, rgba(87, 61, 41, .16));
}
.hr-foot-sub p { font: italic 400 15.5px/1.6 var(--f-text, 'Literata', Georgia, serif); color: var(--ink-2, #6a5545); max-width: 46em; }
.hr-foot-sub a { color: var(--deep, #49311e); }
.hr-foot-legal {
  max-width: 1480px; padding: 14px var(--gut, clamp(20px, 5.6vw, 92px)) 0;
  border-top: 1px solid var(--rule, rgba(87, 61, 41, .16));
}
.hr-foot-legal a {
  font: 500 10.5px/1.4 var(--f-mono, 'Martian Mono', ui-monospace, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2, #6a5545);
}
.hr-foot-legal a:hover { color: var(--deep, #49311e); }
@media (max-width: 520px) {
  .hr-footer, .hr-footer.hr-footer--lab { padding-top: 40px; }
  .hr-foot-wrap, .hr-footer--lab .hr-foot-wrap { gap: 20px 18px; }
}

/* ---------- page elements the fixed row decides about ----------------------------------------- */
/* the skip link surfaces above the fixed row, not under it */
.skip { z-index: 95; display: inline-flex; align-items: center; min-height: 44px; }

/* The page's sticky .dock (CLARITY §3: «Книги и цены» once the first screen is gone) docks right under
   the fixed row instead of sliding beneath it, and keeps only what the row lacks: the row already
   carries the logo and «Рассчитать профиль» at every width, and «Войти»/«Кабинет» from 1101 px. */
:root:has(.hr-header) .dock {
  top: var(--hr-head-h);
  min-height: 44px; padding-top: 0; padding-bottom: 0;
  justify-content: flex-end;
}
:root:has(.hr-header) .dock .brand,
:root:has(.hr-header) .dock .dock-cta { display: none; }
@media (min-width: 1101px) { :root:has(.hr-header) .dock .dock-acc { display: none; } }