/* ==========================================================================
   REBORN CORE

   The shared half of the homepage redesign: the colour/type/space scale, the
   page base, and the chrome every non-CRM page draws (site-chrome header and
   footer, the contact dialog, the theme toggle). It was originally written
   inside home-redesign.css for index.html alone; everything in this file is
   page-agnostic, so it now lives on its own and the homepage loads it first.

   Load order on every page is: the page's own stylesheets, then this file,
   then reborn-pages.css (secondary pages) or home-redesign.css (index).

   Everything is scoped to `.frontline-reborn` on <body> except the token
   blocks and the <html> base, which have nowhere else to live.
   ========================================================================== */

:root {
  color-scheme: light;
  /* `--accent` is read by site-chrome.css (scrollbar); the rest of the page
     works off the --reset-* scale below. */
  --accent: #9e5c0a;
  --reset-bg: #fcfcff;
  --reset-panel: #f7f3ec;
  --reset-panel-raised: #fffdf8;
  /* Kept the `cream` name because it is the page's single ink token — on a
     white ground that ink is dark, and it still paints both type and borders. */
  --reset-cream: #17130d;
  /* A secondary surface for chips, modal chrome and raised controls. */
  --reset-surface: #ffffff;
  /* Controls on saturated tiles must stay light in both themes so their dark
     label keeps the same contrast against every tile colour. */
  --reset-control-surface: #ffffff;
  --reset-muted: #6b6155;
  --reset-line: rgba(23, 19, 13, .14);
  --reset-line-strong: rgba(23, 19, 13, .3);
  /* Tile fills are unchanged — their contrast against --reset-tile-ink is what
     the whole colour-tile system was tuned around. */
  --reset-sun: #ffc02e;
  --reset-rose: #d27b9d;
  --reset-sky: #67afd1;
  --reset-coral: #ff6b43;
  /* Those same hues are unreadable as *type* on white (sun is ~2:1), so text
     and icons use these darkened twins. Each clears 4.5:1 against the *panel*
     (#f7f3ec) — the darker of the two grounds they land on — not just the page,
     because most of this accent text is 12px HUD copy inside a card. */
  --reset-ink-sun: #9e5c0a;
  --reset-ink-coral: #c53a10;
  --reset-ink-sky: #1f6c90;
  --reset-ink-rose: #a4386a;
  /* Status hues follow the same rule: a fill for tiles and a darkened twin for
     type. Secondary pages carry far more state than the homepage did —
     subscriptions expire, payments fail, downloads succeed. */
  --reset-ok: #46c98b;
  --reset-ink-ok: #1c7b52;
  --reset-warn: #ffc02e;
  --reset-ink-warn: #8a5a06;
  --reset-danger: #f06a6a;
  --reset-ink-danger: #b32626;
  --reset-shadow: #1e1810;
  /* Type that sits on an image scrim stays light — those tiles keep their dark
     gradient so the artwork underneath still reads. */
  --reset-on-image: #f7f2e8;
  /* Single ink for every saturated tile: at full strength it clears 5.6:1 on
     the weakest tile (rose), so tile copy never needs to be faded. */
  --reset-tile-ink: #241d14;
  --reset-header-bg: #fcfcff;
  /* Channel list, not a colour: the art scrims below fade the page ground in at
     several alpha stops and need to build those rgba() values themselves. */
  --reset-bg-rgb: 252, 252, 255;
  --reset-panel-rgb: 247, 243, 236;
  /* Game art is dark and saturated. On the white page it has to sit back far
     enough to read as a texture; in dark mode it can carry more of itself. */
  --reset-art-opacity: .3;
  --reset-dot: rgba(23, 19, 13, .085);
  --reset-news-fade: rgba(247, 243, 236, .95);
  --reset-scroll-track: #f1ece2;
  --reset-scroll-thumb: #cdc4b4;
  --reset-logo-disc: var(--reset-cream);
  --reset-footer-logo-filter: invert(1);
  --reset-border: 2px solid var(--reset-cream);
  /* Rubik, not Baloo 2: Baloo ships latin/latin-ext/vietnamese/devanagari and
     no Cyrillic, so every Russian heading silently fell back to a system face
     while the Latin words beside it stayed Baloo — two typefaces on one line.
     Rubik draws both scripts, so a mixed line is finally one voice. */
  --heading-font-family: Rubik, "Segoe UI", system-ui, sans-serif;
  --body-copy-font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --fl-orange: var(--reset-coral);
  --fl-amber: var(--reset-sun);
  --fl-bg: var(--reset-bg);

  /* ===== Fluid type scale =====
     One clamp per step, tuned to land at its minimum around 360px and at its
     maximum around 1280px. Sizes below reference these steps instead of fixed
     rem values, so the breakpoints further down only have to fix layout — no
     media query re-states a font-size. */
  --fs-2xs: clamp(.6rem, .55rem + .2vw, .7rem);
  --fs-xs: clamp(.7rem, .65rem + .22vw, .82rem);
  --fs-sm: clamp(.82rem, .78rem + .22vw, .94rem);
  --fs-base: clamp(.95rem, .91rem + .24vw, 1.08rem);
  --fs-md: clamp(1.02rem, .95rem + .34vw, 1.22rem);
  --fs-lg: clamp(1.15rem, 1.03rem + .55vw, 1.5rem);
  --fs-xl: clamp(1.4rem, 1.15rem + 1.05vw, 2rem);
  --fs-2xl: clamp(1.7rem, 1.2rem + 2.5vw, 3.5rem);
  --fs-3xl: clamp(2.1rem, 1.35rem + 3.4vw, 4.4rem);

  /* ===== Content shell =====
     One token for every centred container on the page. It was a hard 900px,
     which on a 1440–1920px display left more empty margin than content and made
     the artwork read as thumbnails. The shell now grows with the viewport and
     the gutter grows with it, so the page fills a wide monitor without the
     reading measure running away — paragraphs are still capped in `ch` further
     down, so only the layout gets wider, not the line length. */
  --shell-max: 1280px;
  --shell-gutter: clamp(1rem, 3.4vw, 3.5rem);
  --shell: min(var(--shell-max), calc(100% - var(--shell-gutter) * 2));
  /* The masthead may run a little wider than the content it sits above. */
  --shell-wide: min(1400px, calc(100% - var(--shell-gutter) * 2));
  /* Blocks that deliberately break out of the shell — photo grids, galleries,
     screenshots — run the full width of the window and keep only this much air
     at the edges. Reading measure is capped in `ch` further down, so nothing
     that carries a paragraph should use it. */
  --bleed-gutter: clamp(1rem, 2.6vw, 2.5rem);
}

:root[data-home-theme="dark"] {
  color-scheme: dark;
  --accent: #ffd166;
  --reset-bg: #0c0d11;
  --reset-panel: #15171d;
  --reset-panel-raised: #1d2027;
  --reset-cream: #f3eee7;
  --reset-surface: #20232b;
  --reset-muted: #b9b0a5;
  --reset-line: rgba(243, 238, 231, .14);
  --reset-line-strong: rgba(243, 238, 231, .34);
  --reset-ink-sun: #ffd166;
  --reset-ink-coral: #ff9675;
  --reset-ink-sky: #82d0f2;
  --reset-ink-rose: #efa3c3;
  --reset-ink-ok: #6fdba7;
  --reset-ink-warn: #ffd166;
  --reset-ink-danger: #ff8f8f;
  --reset-shadow: #000000;
  --reset-header-bg: #0c0d11;
  --reset-bg-rgb: 12, 13, 17;
  --reset-panel-rgb: 21, 23, 29;
  --reset-art-opacity: .46;
  --reset-dot: rgba(243, 238, 231, .09);
  --reset-news-fade: rgba(21, 23, 29, .96);
  --reset-scroll-track: #0c0d11;
  --reset-scroll-thumb: #3b3e47;
  --reset-logo-disc: #17130d;
  --reset-footer-logo-filter: none;
}

html {
  overflow-x: clip;
  /* The page is mostly Tailwind's rem-based utilities, so scaling the root is
     what makes *everything* — type, padding, gaps — breathe with the viewport
     instead of only the handful of sizes named below. Deliberately narrow: the
     range is 15px on a phone to 17px from ~1050px up. */
  font-size: clamp(15px, 14.4px + .25vw, 17px);
  background: var(--reset-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html::-webkit-scrollbar-track { background: var(--reset-scroll-track); }
html::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--reset-scroll-thumb); }
html::-webkit-scrollbar-thumb:hover { background: var(--reset-ink-sun); }

body.frontline-reborn {
  margin: 0;
  overflow-x: clip;
  color: var(--reset-cream);
  background: var(--reset-bg);
  font-family: var(--body-copy-font-family);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* Long Cyrillic compounds ("бронирование", "аналитика") are the words that
   overflow first once a heading is set fluid — balance the ragged edge and let
   the extreme case break rather than push the layout sideways. */
.frontline-reborn :is(h1, h2, h3, .hero-title, .sec-title, .price-num) {
  overflow-wrap: break-word;
  text-wrap: balance;
}

.frontline-reborn::before { display: none; }
.frontline-reborn ::selection { color: #241b0b; background: var(--reset-sun); }
/* Media overlays keep their own dark scrim, so the icon on top stays white
   rather than following the page ink. */
.frontline-reborn .media-frame .text-white { color: #fff !important; }

/* ===== Shared chrome =====
   Header, footer and contact dialog become a quiet masthead rather than a
   glowing HUD. Every non-CRM page mounts the same three custom elements, so
   this block is the single largest reason the theme is portable at all. */
.frontline-reborn site-chrome-header,
.frontline-reborn site-chrome-footer,
.frontline-reborn site-contact-dialog {
  --site-chrome-bg: var(--reset-bg);
  --site-chrome-panel: var(--reset-panel);
  --site-chrome-panel-raised: var(--reset-panel-raised);
  --site-chrome-ink: var(--reset-cream);
  --site-chrome-muted: var(--reset-muted);
  --site-chrome-line: var(--reset-line-strong);
  --site-chrome-orange: var(--reset-ink-sun);
  --site-chrome-orange-soft: var(--reset-ink-sun);
  --site-chrome-cyan: var(--reset-ink-sky);
  font-family: var(--body-copy-font-family);
}

.frontline-reborn site-chrome-header .site-chrome__header,
.frontline-reborn site-chrome-header.is-scrolled .site-chrome__header {
  border-bottom: 1px solid var(--reset-line);
  background: var(--reset-header-bg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.frontline-reborn site-chrome-header .site-chrome__header::after,
.frontline-reborn site-chrome-header .site-chrome__signal { display: none; }
.frontline-reborn site-chrome-header .site-chrome__inner {
  width: var(--shell-wide);
  gap: 18px;
}
.frontline-reborn site-chrome-header .site-chrome__brand { gap: 12px; color: var(--reset-cream); }
/* minilogo.png is a white glyph on transparent — on a light ground it vanishes,
   so the mark itself becomes the dark disc it was drawn for. Same for the
   footer lockup and the contact dialog, which reuse the same file. */
.frontline-reborn site-chrome-header .site-chrome__brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: var(--reset-border);
  border-radius: 50%;
  background: var(--reset-logo-disc);
  box-shadow: 3px 3px 0 var(--reset-shadow);
  clip-path: none;
}
.frontline-reborn site-chrome-header .site-chrome__brand-mark::before,
.frontline-reborn site-chrome-header .site-chrome__brand-mark::after { display: none; }
.frontline-reborn site-chrome-header .site-chrome__brand-name {
  color: var(--reset-cream);
  /* site-chrome.css paints this word with a white→cream gradient clipped to the
     glyphs; on a white page that is an invisible wordmark. */
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--heading-font-family);
  font-size: clamp(1.05rem, .88rem + .55vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: none;
}
.frontline-reborn site-chrome-header .site-chrome__brand-subtitle {
  color: var(--reset-muted);
  font-size: var(--fs-2xs);
}
.frontline-reborn site-chrome-header .site-chrome__brand-subtitle i { color: var(--reset-ink-sun); }
.frontline-reborn site-chrome-header .site-chrome__link {
  min-height: 42px;
  padding-inline: 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--reset-muted);
  font-family: var(--heading-font-family);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
}
.frontline-reborn site-chrome-header .site-chrome__link::before,
.frontline-reborn site-chrome-header .site-chrome__link::after,
.frontline-reborn site-chrome-header .site-chrome__link-label::after { display: none; }
.frontline-reborn site-chrome-header .site-chrome__link-index {
  color: var(--reset-ink-sun);
  font-size: var(--fs-2xs);
  transform: none;
}
.frontline-reborn site-chrome-header .site-chrome__link:hover,
.frontline-reborn site-chrome-header .site-chrome__link:focus-visible,
.frontline-reborn site-chrome-header .site-chrome__link[aria-current="page"] {
  border-color: var(--reset-cream);
  color: var(--reset-cream);
  background: var(--reset-panel);
  text-shadow: none;
}
.frontline-reborn site-chrome-header .site-chrome__actions { padding-left: 8px; }
.frontline-reborn site-chrome-header .site-chrome__actions::before { display: none; }
.frontline-reborn site-chrome-header button.site-chrome__contact,
.frontline-reborn site-chrome-header button.site-chrome__language-toggle,
.frontline-reborn site-chrome-header button.site-chrome__profile-toggle,
.frontline-reborn site-chrome-header a.site-chrome__account-link,
.frontline-reborn site-chrome-header button.home-theme-toggle {
  min-height: 42px;
  border: 1.5px solid var(--reset-cream);
  border-radius: 999px;
  color: var(--reset-cream);
  background: transparent;
  box-shadow: 3px 3px 0 var(--reset-shadow);
  clip-path: none;
  filter: none;
  font-family: var(--heading-font-family);
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  text-transform: lowercase;
}
.frontline-reborn site-chrome-header button.home-theme-toggle {
  /* The other header buttons get their centring from site-chrome.css via their
     own classes; this one is built by home-theme.js and has none of them, so it
     fell back to a block box. `text-align: center` does not centre a block-level
     child, and the icon is exactly that — an 18px grid — so it sat flush against
     the left border of the 44px circle and read as a clipped glyph. */
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--reset-cream);
  background: var(--reset-surface);
}
.frontline-reborn .home-theme-toggle__icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}
.frontline-reborn .home-theme-toggle__icon svg { width: 18px; height: 18px; }
.frontline-reborn .home-theme-toggle__sun { display: none; }
:root[data-home-theme="dark"] .frontline-reborn .home-theme-toggle__sun { display: block; }
:root[data-home-theme="dark"] .frontline-reborn .home-theme-toggle__moon { display: none; }
.frontline-reborn site-chrome-header .home-theme-toggle__label { display: none; }
.frontline-reborn site-chrome-header button.site-chrome__contact {
  color: #2a200e;
  background: var(--reset-sun);
}
.frontline-reborn site-chrome-header a.site-chrome__account-link {
  color: #2d1610;
  background: var(--reset-coral);
}
.frontline-reborn site-chrome-header button.site-chrome__contact:hover,
.frontline-reborn site-chrome-header button.site-chrome__language-toggle:hover,
.frontline-reborn site-chrome-header button.site-chrome__profile-toggle:hover,
.frontline-reborn site-chrome-header a.site-chrome__account-link:hover,
.frontline-reborn site-chrome-header button.home-theme-toggle:hover {
  color: #241b0c;
  background: var(--reset-sky);
  box-shadow: 1px 1px 0 var(--reset-shadow);
  filter: none;
  transform: translate(2px, 2px);
}
.frontline-reborn site-chrome-header .site-chrome__ping {
  background: var(--reset-coral);
  box-shadow: none;
}
.frontline-reborn site-chrome-header .site-chrome__language-menu,
.frontline-reborn site-chrome-header .site-chrome__profile-menu,
.frontline-reborn site-chrome-header .site-chrome__account-menu {
  overflow: hidden;
  border: var(--reset-border);
  border-radius: 14px;
  color: var(--reset-cream);
  background: var(--reset-panel);
  box-shadow: 5px 5px 0 var(--reset-shadow);
  clip-path: none;
}
.frontline-reborn site-chrome-header .site-chrome__language-menu::before { display: none; }
/* The two menus render their rows as plain anchors/buttons; without this they
   keep site-chrome's white-on-dark ink and vanish on the light panel. */
.frontline-reborn site-chrome-header :is(.site-chrome__language-menu, .site-chrome__profile-menu, .site-chrome__account-menu) :is(a, button) {
  color: var(--reset-cream);
}
.frontline-reborn site-chrome-header :is(.site-chrome__language-menu, .site-chrome__profile-menu, .site-chrome__account-menu) :is(a, button):hover {
  color: var(--reset-cream);
  background: var(--reset-surface);
}
/* Подписи в списке дверей: заголовок блока и вторая строка каждой двери
   читаются приглушённо, но по шкале reborn, а не по тёмной шкале шапки. */
.frontline-reborn site-chrome-header :is(.site-chrome__account-menu-title, .site-chrome__door-hint) {
  color: var(--reset-muted);
}
.frontline-reborn site-chrome-header .site-chrome__door .site-chrome__icon {
  color: var(--reset-ink-coral);
}

/* ===== Footer and contact dialog ===== */
.frontline-reborn site-chrome-footer .site-chrome__footer {
  border-top: 1px solid var(--reset-line);
  color: var(--reset-cream);
  background: var(--reset-panel);
}
.frontline-reborn site-chrome-footer .site-chrome__footer-inner { width: var(--shell); }
.frontline-reborn site-chrome-footer .site-chrome__footer-brand,
.frontline-reborn site-chrome-footer .site-chrome__footer-title { color: var(--reset-cream); }
.frontline-reborn site-chrome-footer .site-chrome__footer-brand { font-family: var(--heading-font-family); }
/* The footer lockup has no disc behind it — invert the white glyph instead. */
.frontline-reborn site-chrome-footer .site-chrome__footer-brand img { filter: var(--reset-footer-logo-filter); }
.frontline-reborn site-chrome-footer .site-chrome__footer-copy,
.frontline-reborn site-chrome-footer .site-chrome__footer-links a,
.frontline-reborn site-chrome-footer .site-chrome__footer-bottom,
.frontline-reborn site-chrome-footer .site-chrome__footer-bottom a { color: var(--reset-muted); }
.frontline-reborn site-chrome-footer .site-chrome__footer-links a:hover,
.frontline-reborn site-chrome-footer .site-chrome__footer-bottom a:hover { color: var(--reset-cream); }
.frontline-reborn site-chrome-footer .site-chrome__socials a,
.frontline-reborn site-chrome-footer button.site-chrome__footer-contact-button {
  border: 1.5px solid var(--reset-cream);
  border-radius: 999px;
  color: #241d14;
  background: var(--reset-sun);
  box-shadow: 3px 3px 0 var(--reset-shadow);
  clip-path: none;
}
.frontline-reborn site-contact-dialog .site-contact__backdrop { background: rgba(23, 19, 13, .58); }
.frontline-reborn site-contact-dialog .site-contact__panel {
  border: var(--reset-border);
  border-radius: 16px;
  color: var(--reset-cream);
  background: var(--reset-panel);
  box-shadow: 7px 7px 0 var(--reset-shadow);
  clip-path: none;
}
/* The dialog heading needs its colour named here, not just its face.
   site-chrome.css paints it #fff for the black theme, and this is the only
   layer index.html loads — the secondary pages happen to be rescued by
   reborn-pages.css's blanket h1–h6 rule, so on the homepage alone the title
   sat white on the light panel. */
.frontline-reborn site-contact-dialog .site-contact__title,
.frontline-reborn site-contact-dialog #siteContactTitle {
  color: var(--reset-cream);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: -.018em;
  text-transform: none;
}
.frontline-reborn site-contact-dialog .site-contact__head p { color: var(--reset-muted); }
.frontline-reborn site-contact-dialog .site-contact__mark {
  border: 1.5px solid var(--reset-cream);
  border-radius: 14px;
  color: var(--reset-tile-ink);
  background: var(--reset-sky);
  box-shadow: 3px 3px 0 var(--reset-shadow);
  clip-path: none;
}
.frontline-reborn site-contact-dialog .site-contact__close {
  border: 1.5px solid var(--reset-cream);
  border-radius: 14px;
  color: var(--reset-cream);
  background: var(--reset-surface);
  clip-path: none;
}
.frontline-reborn site-contact-dialog .site-contact__eyebrow,
.frontline-reborn site-contact-dialog .site-contact__section-title {
  color: var(--reset-ink-sun);
}
/* The contact rows. site-chrome.css draws them for a black panel — a 3%-white
   fill, a 10%-white hairline and a near-white label — so on the light panel the
   row had no visible edge and its label ("Звонок · Россия") disappeared
   entirely, leaving the phone number floating alone. */
.frontline-reborn site-contact-dialog .site-contact__link {
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 14px;
  color: var(--reset-cream);
  background: var(--reset-surface);
  clip-path: none;
}
.frontline-reborn site-contact-dialog .site-contact__link:hover {
  border-color: var(--reset-cream);
  background: var(--reset-panel-raised);
}
.frontline-reborn site-contact-dialog .site-contact__link-copy strong {
  color: var(--reset-cream);
  font-family: var(--heading-font-family);
}
.frontline-reborn site-contact-dialog .site-contact__link-copy span {
  color: var(--reset-muted);
}
.frontline-reborn site-contact-dialog .site-contact__link-icon {
  border: 1.5px solid var(--reset-cream);
  border-radius: 12px;
  color: var(--reset-tile-ink);
  background: var(--reset-sky);
  box-shadow: 2px 2px 0 var(--reset-shadow);
}
.frontline-reborn site-contact-dialog .site-contact__link-arrow { color: var(--reset-muted); }
.frontline-reborn site-contact-dialog .site-contact__note {
  /* Its divider was a 7%-white hairline — invisible on the light surface. */
  border-top: 1.5px solid var(--reset-line);
  border-radius: 12px;
  color: var(--reset-muted);
  background: var(--reset-surface);
}
.frontline-reborn site-contact-dialog .site-contact__status-dot { background: var(--reset-ok); }

/* ===== Cookie consent =====
   script.js builds this banner on every page that loads it, so it belongs with
   the shared chrome rather than in a per-page layer. It shipped as a dark
   glass slab, which on the light page left the whole notice black — and its
   secondary "Настроить" button, now transparent with dark ink, invisible
   against it. */
.frontline-reborn .cookie-banner__inner {
  border: 2px solid var(--reset-cream);
  border-radius: 18px;
  color: var(--reset-cream);
  background: var(--reset-panel);
  box-shadow: 6px 6px 0 var(--reset-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.frontline-reborn .cookie-banner__icon { filter: none; }
.frontline-reborn .cookie-banner__text strong {
  color: var(--reset-cream);
  font-family: var(--heading-font-family);
}
.frontline-reborn .cookie-banner__text p { color: var(--reset-muted); }
.frontline-reborn .cookie-banner__text a {
  color: var(--reset-ink-coral);
  font-weight: 700;
}

/* The theme's whole physical idea is a card sitting above the page on a hard
   shadow, so pressing a control should visibly put it down. */
.frontline-reborn site-chrome-header button.site-chrome__contact:active,
.frontline-reborn site-chrome-header a.site-chrome__account-link:active,
.frontline-reborn site-chrome-header button.home-theme-toggle:active {
  box-shadow: 0 0 0 var(--reset-shadow);
  transform: translate(3px, 3px);
}

.frontline-reborn a:focus-visible,
.frontline-reborn button:focus-visible,
.frontline-reborn :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--reset-ink-coral);
  outline-offset: 3px;
}

/* ===== Mobile chrome =====
   site-chrome collapses its nav below 1120px; the drawer is a separate set of
   controls that never inherits any of the desktop rules above. */
@media (max-width: 1120px) {
  .frontline-reborn site-chrome-header .site-chrome__inner { width: var(--shell); }
  .frontline-reborn site-chrome-header button.site-chrome__menu-toggle {
    border: 1.5px solid var(--reset-cream);
    border-radius: 12px;
    background: var(--reset-panel);
    box-shadow: 3px 3px 0 var(--reset-shadow);
    clip-path: none;
  }
  .frontline-reborn site-chrome-header .site-chrome__menu-toggle span { background: var(--reset-cream); }
  .frontline-reborn site-chrome-header .site-chrome__mobile {
    border-bottom: 1px solid var(--reset-line);
    color: var(--reset-cream);
    background: var(--reset-surface);
    box-shadow: 0 5px 0 var(--reset-shadow);
  }
  .frontline-reborn site-chrome-header .site-chrome__mobile a,
  .frontline-reborn site-chrome-header .site-chrome__mobile button { color: var(--reset-cream); }
  .frontline-reborn site-chrome-header .site-chrome__mobile a:hover,
  .frontline-reborn site-chrome-header .site-chrome__mobile button:hover { background: var(--reset-panel); }
  .frontline-reborn site-chrome-header .site-chrome__mobile-index { color: var(--reset-ink-sun); }
  .frontline-reborn site-chrome-header .site-chrome__mobile button.site-chrome__mobile-contact {
    border: 1.5px solid var(--reset-cream);
    border-radius: 999px;
    color: #2a200e;
    background: var(--reset-sun);
    box-shadow: 3px 3px 0 var(--reset-shadow);
  }
  .frontline-reborn site-chrome-header .site-chrome__mobile button.home-theme-toggle--mobile {
    display: flex;
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px;
    border: 1.5px solid var(--reset-line-strong);
    border-radius: 12px;
    color: var(--reset-cream);
    background: var(--reset-panel);
    box-shadow: none;
  }
  .frontline-reborn site-chrome-header .site-chrome__mobile .home-theme-toggle__label { display: inline; }
  .frontline-reborn site-chrome-header .site-chrome__mobile .site-chrome__mobile-account {
    border: 1.5px solid var(--reset-cream);
    border-radius: 999px;
    color: var(--reset-cream);
    background: transparent;
  }
  .frontline-reborn site-chrome-header .site-chrome__mobile-language button {
    border: 1.5px solid var(--reset-line-strong);
    border-radius: 12px;
    color: var(--reset-muted);
    background: var(--reset-panel);
  }
  .frontline-reborn site-chrome-header .site-chrome__mobile-language button.is-active {
    border-color: var(--reset-cream);
    color: #2a170f;
    background: var(--reset-coral);
  }
}

@media (max-width: 640px) {
  .frontline-reborn site-chrome-header .site-chrome__brand-mark { width: 42px; height: 42px; }
  .frontline-reborn site-chrome-header .site-chrome__brand-subtitle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frontline-reborn *,
  .frontline-reborn *::before,
  .frontline-reborn *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}