/* parent16 — the brand's visual language, shared by every page of the brand: landing, sign-in and account.
   Palette, type, pill buttons, the capsule header and the footer. Landing sections live in site.css, sign-in in auth.css.
   Interim: it redefines core tokens in CSS until tokens.json can describe system fonts, radii and shadows (design/README.md).
   Performance rule: continuous animations touch only transform and opacity; the header is the only element with backdrop-filter. */

@view-transition { navigation: auto; }

@layer site {
  :root {
    /* Palette: deep postal blue with a yellow accent on clean white (README.md#цвет). Yellow marks "protected" and the key;
       on white it is only a fill with --l-on-accent inside, as text it appears only on blue. Warnings keep their own red. */
    --l-ink: oklch(19% 0.02 262);
    --l-ink-2: oklch(40% 0.02 262);
    --l-ink-3: oklch(52% 0.018 262);
    --l-bg: oklch(99.2% 0.003 255);
    --l-bg-2: oklch(96.6% 0.012 255);
    --l-line: oklch(91% 0.012 255);
    --l-brand: oklch(38% 0.15 262);
    --l-brand-2: oklch(44% 0.17 262);
    --l-brand-ink: oklch(46% 0.17 262);
    --l-night: oklch(20% 0.06 265);
    --l-accent: oklch(91% 0.18 105);
    --l-accent-ink: oklch(91% 0.18 105);
    --l-tint: oklch(95.5% 0.03 255);
    --l-stage-edge: oklch(86% 0.08 255);
    --l-dark-glow: oklch(45% 0.15 262 / 0.5);
    --l-on-brand: oklch(97% 0.01 255);
    --l-on-accent: oklch(22% 0.05 262);
    --l-shadow: 0 1px 2px oklch(20% 0.03 262 / 0.06), 0 18px 40px -24px oklch(20% 0.04 262 / 0.3);
    --l-shadow-lg: 0 2px 6px oklch(20% 0.03 262 / 0.05), 0 40px 80px -36px oklch(20% 0.05 262 / 0.45);

    /* Core components read these names, so buttons and the language menu follow the page. */
    --color-paper: var(--l-bg);
    --color-paper-2: var(--l-bg-2);
    --color-field: oklch(100% 0 0);
    --color-ink: var(--l-ink);
    --color-ink-2: var(--l-ink-2);
    --color-ink-3: var(--l-ink-3);
    --color-rule: var(--l-line);
    --color-rule-strong: oklch(78% 0.012 262);
    --color-on-ink: oklch(100% 0 0);
    --color-focus: var(--l-brand-ink);
    --font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
    --font-text: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
    --font-ui: var(--font-text);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

    --page: 76rem;
    --gutter: 1.5rem;
    --head-h: 4.25rem;
  }

  html { scroll-padding-block-start: calc(var(--head-h) + 1.5rem); }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body { background: var(--l-bg); font-family: var(--font-text); text-rendering: optimizeLegibility; }
  :where(h1, h2, h3, h4) { hyphens: manual; }
  .sprite { position: absolute; }
  .wrap { inline-size: 100%; max-inline-size: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
  .addr { font-family: var(--font-mono); font-size: 0.875em; direction: ltr; }
  :focus-visible { outline-offset: 3px; }

  .skip {
    position: absolute; z-index: 40; inset-block-start: -3rem; inset-inline-start: 1rem;
    padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--l-brand); color: var(--color-on-ink); text-decoration: none;
  }
  .skip:focus { inset-block-start: 0.75rem; }

  /* Buttons: core classes, landing shape and colour. */
  .btn { gap: 0.5rem; border-radius: 999px; font-weight: 650; letter-spacing: -0.005em; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
  .btn--primary, .btn--ink { background: var(--l-brand); color: var(--color-on-ink); }
  .btn--primary:hover, .btn--ink:hover { background: var(--l-brand-2); color: var(--color-on-ink); }
  .btn--line { border: 1.5px solid currentColor; background: transparent; color: var(--l-brand); }
  .btn--line:hover { background: color-mix(in oklch, var(--l-brand) 8%, transparent); }
  .btn--lg { min-block-size: 3.375rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
  .btn .icon { transition: translate 0.2s; }
  .btn:hover .icon--flip, .link-more:hover .icon--flip { translate: 3px 0; }
  [dir="rtl"] .btn:hover .icon--flip, [dir="rtl"] .link-more:hover .icon--flip { translate: -3px 0; }

  /* Header: a wide transparent bar that tightens into a floating capsule as soon as the page scrolls. */
  .site-head { position: sticky; inset-block-start: 0; z-index: 30; padding: 0.75rem var(--gutter) 0; }
  .site-head__bar {
    display: flex; align-items: center; gap: 1.25rem; max-inline-size: 60rem; min-block-size: 3.5rem; margin-inline: auto;
    padding-inline: 0.5rem; border-radius: 999px;
    background: oklch(100% 0 0 / 0.84); box-shadow: 0 0 0 1px var(--l-line), 0 12px 32px -18px oklch(20% 0.04 262 / 0.35);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  }
  .brand { gap: 0.625rem; font: 720 1.0625rem/1 var(--font-display); letter-spacing: -0.025em; }
  .brand img { inline-size: 1.875rem; block-size: 1.875rem; }
  /* Brand mark: the chosen courier logo on transparency (logo.webp, cut from design_mascot/logo_new6.png). */
  .brand__mark { display: block; flex: none; inline-size: 1.875rem; block-size: 1.875rem; }
  .site-nav { position: relative; isolation: isolate; display: flex; gap: 0.125rem; margin-inline: auto; }
  .site-nav a { padding: 0.5rem 0.875rem; border-radius: 999px; color: var(--l-ink-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none; transition: color 0.2s; }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--l-ink); }
  /* Current page: set by design/tools/blocks.py from the shared header's data-nav links. */
  .site-nav a[aria-current="page"] { color: var(--l-ink); text-decoration: underline 2px var(--color-rubric); text-underline-offset: 0.45em; }
  @supports (anchor-name: --a) {
    /* One highlight slides between links: CSS anchor positioning, no script. */
    .site-nav a:hover, .site-nav a:focus-visible { anchor-name: --l-nav; }
    .site-nav::before {
      content: ""; position: absolute; z-index: -1; position-anchor: --l-nav;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      border-radius: 999px; background: var(--l-tint); opacity: 0;
      transition: inset 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s;
    }
    .site-nav:has(a:hover, a:focus-visible)::before { opacity: 1; }
  }
  @supports not (anchor-name: --a) {
    .site-nav a:hover { background: var(--l-tint); }
  }
  .site-head__actions { display: flex; align-items: center; gap: 0.25rem; }
  .site-head__actions .btn { white-space: nowrap; }
  .site-head__lang [data-locale-current] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .site-head__bar { animation: l-head linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    }
  }
  @keyframes l-head {
    from {
      max-inline-size: var(--page); background: oklch(100% 0 0 / 0);
      box-shadow: 0 0 0 1px oklch(20% 0.03 262 / 0), 0 12px 32px -18px oklch(20% 0.04 262 / 0);
    }
  }

  /* Mascot: the illustrated pigeon-courier, one WebP per pose in mascot/ (design/landing/mascot.md).
     Shown as plain images: the poses are full-colour, so they are neither recoloured nor mirrored. */
  .mascot { display: block; block-size: auto; max-inline-size: 100%; }

  /* Footer: brand and social links on the left; link columns wrap by themselves, so new pages and sections fit without a redesign. */
  .site-foot { padding-block: 4rem 2.5rem; border-block-start: 1px solid var(--l-line); color: var(--l-ink-2); font-size: 0.9375rem; }
  .site-foot__grid { display: grid; grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 3fr); gap: 2.5rem 3rem; }
  .site-foot__about p { max-inline-size: 22em; margin-block-start: 1rem; line-height: 1.55; }
  .site-foot__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .site-foot__social a {
    display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
    background: var(--l-bg-2); box-shadow: inset 0 0 0 1px var(--l-line); transition: background-color 0.2s, color 0.2s;
  }
  .site-foot__social a:hover { background: var(--l-brand); color: var(--l-on-brand); }
  .site-foot__social .icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .site-foot__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; }
  .site-foot h2 { margin-block-end: 0.875rem; color: var(--l-ink); font-size: 0.875rem; font-weight: 700; }
  .site-foot nav ul { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
  .site-foot a:not(.brand) { color: var(--l-ink-2); text-decoration: none; }
  .site-foot a:not(.brand):hover { color: var(--l-ink); }
  .site-foot__social a:not(.brand):hover { color: var(--l-on-brand); }
  .site-foot__bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-block-start: 3rem; padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--l-line); color: var(--l-ink-3); font-size: 0.875rem;
  }
  .site-foot__langs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
  .site-foot__langs a { padding: 0.25rem 0.625rem; border-radius: 999px; }
  .site-foot__langs a[aria-current] { background: var(--l-bg-2); color: var(--l-ink); font-weight: 650; }

  @media (max-width: 68rem) {
    .site-nav { display: none; }
    .site-head__actions { margin-inline-start: auto; }
    .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 48rem) {
    :root { --gutter: 1rem; }
    .site-foot__langs { margin-inline-start: 0; }
    .site-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
    .site-head__create { display: none; }
  }

  @media (forced-colors: active) {
    .site-head__bar { border: 1px solid CanvasText; }
  }
}