/* Built by tools/build-css.sh from the ITCSS partials — DO NOT edit directly. */

/* ===== settings/tokens.css ===== */
/* Design tokens — single source of truth, lifted 1:1 from the approved Figma.
   Colours are literals (the Figma file carries no variables); everything else
   downstream references these custom properties, never raw values. */

:root {
  /* Surfaces */
  --c-bg: #18191b;          /* every screen except the hero */
  --c-bg-hero: #34302a;     /* warm dark brown, hero only   */
  --c-void: #0e1314;        /* darkest point — frosted field */
  --c-gold: #c5a56e;        /* accent: borders, active state */
  --c-white: #fff;

  /* White text opacity tiers (use as colour, not element opacity) */
  --ink-100: rgb(255 255 255);
  --ink-88: rgb(255 255 255 / 0.88);
  --ink-70: rgb(255 255 255 / 0.7);
  --ink-50: rgb(255 255 255 / 0.5);
  --ink-10: rgb(255 255 255 / 0.1);

  /* Gold alpha variants for hairlines, dividers, highlights */
  --gold-60: rgb(197 165 110 / 0.6);
  --gold-35: rgb(197 165 110 / 0.35);
  --gold-30: rgb(197 165 110 / 0.3);
  --gold-20: rgb(197 165 110 / 0.2);
  --gold-15: rgb(197 165 110 / 0.15);

  /* Type families */
  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans: "e-Ukraine", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout anchors (px values straight from the comp at 1440) */
  --page-max: 1440px;   /* design grid reference */
  --shell-max: 1440px;  /* hard width cap for the whole landing = the comp width */
  --x-words: 80px;     /* outdented hero word "Пилипа"      */
  --x-content: 189px;  /* main left content anchor          */

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slide: 800ms;
  --dur-ui: 300ms;
}

/* ===== settings/breakpoints.css ===== */
/* Breakpoint reference (custom properties can't be used inside media queries,
   so these document the values used across the component partials):

     mobile   ≤ 768px   stage unfolds into a single readable column
     tablet   ≤ 1024px  proportional stage, condensed gutters
     desktop  ≥ 1025px  full comp fidelity, stage capped at 1440px

   Keep media queries in component partials in sync with these. */

/* ===== generic/fonts.css ===== */
/* Self-hosted webfonts. No third-party CDN — the page must stay first-party
   for a government host (privacy, no consent banner, no external SPOF).
   Cormorant Garamond is split by Unicode subset so only the glyphs a visitor
   needs are fetched; e-Ukraine ships as a single Cyrillic+Latin file per weight.

   e-Ukraine © Ministry of Digital Transformation of Ukraine / Fedoriv,
   licensed CC BY 4.0 (see README). */

/* Cormorant Garamond — display serif */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-700-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* e-Ukraine — UI sans (the Ukrainian government typeface) */
@font-face {
  font-family: "e-Ukraine";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/e-ukraine-300.woff2") format("woff2");
}
@font-face {
  font-family: "e-Ukraine";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/e-ukraine-400.woff2") format("woff2");
}
@font-face {
  font-family: "e-Ukraine";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/e-ukraine-500.woff2") format("woff2");
}

/* ===== generic/reset.css ===== */
/* Minimal reset, scoped to the landing root via :where() so it carries zero
   specificity — it can't leak onto a host page, and component classes always
   win over it without specificity battles. */

:where(#orlyk-root) *,
:where(#orlyk-root) *::before,
:where(#orlyk-root) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:where(#orlyk-root) :is(img, picture, svg, video) {
  display: block;
  max-width: 100%;
}

:where(#orlyk-root) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:where(#orlyk-root) a {
  color: inherit;
  text-decoration: none;
}

:where(#orlyk-root) :focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :where(#orlyk-root) *,
  :where(#orlyk-root) *::before,
  :where(#orlyk-root) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== elements/base.css ===== */
/* Base element defaults for the landing root. */

/* Standalone host page only: removes the browser's default 8px body margin
   (the "white frame") and paints the page dark. When this markup is embedded
   inside an existing document (nazk.gov.ua), drop this html/body block — the
   host page owns those elements. */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--c-bg);
}

/* Multi-section page: #orlyk-main is full-width and stacks the screens; each
   screen caps its own content at --shell-max (so a hero/Screen-2 backdrop can
   still bleed full-viewport while the content stays centred at 1440). */
#orlyk-main {
  width: 100%;
  /* Clip horizontal overrun (the hero's over-extended blur backdrop) without a
     scroll container; vertical stays visible so the hero card's shadow can fall
     onto screen 2. */
  overflow-x: clip;
}

#orlyk-root {
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--ink-100);
  background-color: var(--c-bg);
  /* Scoped to the landing wrapper (not :root) so it can't force-dark a light
     host page: tells the browser this subtree is already dark, which stops
     Android/MIUI "force dark" re-tinting it into mystery coloured blocks. */
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link — first focusable element, hidden until focused. */
.orlyk-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-gold);
  color: #1a1207;
  font-weight: 500;
  border-radius: 4px;
  transition: top var(--dur-ui) var(--ease);
}
.orlyk-skip:focus {
  top: 16px;
}

/* ===== objects/layout.css ===== */
/* Layout objects — reusable, content-agnostic structure shared by sections. */

.orlyk-container {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

/* Visually hidden but available to assistive tech. */
.orlyk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== components/hero.css ===== */
/* ─── Hero ───────────────────────────────────────────────────────────────
   Screen 1, full-bleed and full viewport height. The seated Orlyk fills the
   background; the title sits top-left, the timeline is pinned bottom-left, and
   a self-driving gold line grows from era to era, activating each as it
   arrives. Type scales with the viewport but caps at the comp sizes (1440). */

.orlyk-hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--c-bg-hero);
  overflow: hidden;
  isolation: isolate;

  /* Type sizes are fixed (they do NOT shrink) down to the mobile breakpoint.
     Only margins and one horizontal offset move:
       --margin       80→40 across 1440→1067 (then 40)
       --col-indent   109→0 across 1440→1067  ("Орлика", lead and timeline share
                                               this one column, so they always
                                               line up and slide together)
     "Пилипа" stays at the margin; "Конституція" is not on a width-driven offset:
     it right-aligns to "Пилипа" geometrically (see .orlyk-hero__head), so its
     right edge holds at every size, mobile included. */
  --margin: clamp(40px, calc(40px + (100vw - 1067px) * 0.1072), 80px);
  --col-indent: clamp(0px, calc((100vw - 1067px) * 0.2922), 109px);
  /* Title→lead vertical gap — a constant, so the rhythm never animates on
     resize. Vertical give comes from one place only: the centred block, whose
     slack above/below flexes smoothly with the height clamp below. */
  --copy-gap: 64px;

  /* Horizontal framing of the figure (tunable). Holds at 88% on wide screens;
     below ~900 it eases the face further right so the title clears it. */
  --fig-x: clamp(78%, calc(88% - (900px - 100vw) * 0.3), 88%);
}

/* Full-bleed figure. object-position keeps Orlyk's head in frame when the
   viewport is taller/narrower than the source. */
.orlyk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.orlyk-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.orlyk-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored right (see --fig-x) so Orlyk's face stays in frame and clears the
     title as the viewport narrows — the left cityscape crops instead. */
  object-position: var(--fig-x) 18%;
}

/* Era frames stacked in the bg; the timeline (hero.js setActive) crossfades
   them. The hetman holds his position across all three, so only the era behind
   him dissolves.

   No-flicker dissolve: the INCOMING frame snaps to opaque instantly and waits
   UNDERNEATH (z 1); the OUTGOING frame fades 1→0 ON TOP of it (z 2). Because the
   incoming is already fully painted before the outgoing clears, the dark page
   never peeks through between the two — what was a same-time crossfade (both
   semi-transparent at once → dark flash) is now a clean reveal. The snap + fade
   is driven by hero.js (inline opacity/z); this fade duration is the fallback
   for the outgoing frame. .is-active here only paints frame 0 before JS runs. */
.orlyk-hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;          /* dormant/outgoing sit above the active one … */
  /* Gentle film dissolve: a symmetric ease over a slightly longer beat, so the
     outgoing frame fades out evenly instead of snapping then lingering. (The
     easeOutExpo --ease front-loaded the change and read like a store carousel.) */
  transition: opacity 1800ms ease-in-out;
}
.orlyk-hero__frame.is-active {
  opacity: 1;
  z-index: 1;          /* the active frame waits underneath, fully painted */
}
/* Honour reduced-motion: no auto-run (hero.js gate) and no crossfade. */
@media (prefers-reduced-motion: reduce) {
  .orlyk-hero__frame { transition: none; }
}

/* Readability wash over the figure (text side + base). */
.orlyk-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(26 22 18 / 0.7) 0%, rgb(26 22 18 / 0.16) 44%, transparent 66%),
    linear-gradient(0deg, rgb(20 18 16 / 0.5) 0%, transparent 28%);
}

.orlyk-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Floor gap between the copy and the stepper: when the viewport is too short
     for the centring slack, this keeps them from touching (same role as on
     mobile). With room to spare the centred block opens a larger gap on top. */
  gap: 24px;
  /* Top: the gold frame line (16px). Sides: the width-driven margin (free to
     slide horizontally — that's the only width-linked motion). Bottom: a
     constant, so the stepper's distance from the edge never animates. All
     vertical give is handled once, by the height clamp + centred block. */
  padding: 16px var(--margin) 80px;
}

/* Title + lead travel together as one block, centred vertically between the top
   inset (the gold frame on wide screens) and the stepper — the stepper itself
   rides the bottom edge. z-index lifts the copy above the stepper's frost so the
   lead text is never dimmed when space gets tight. */
.orlyk-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--copy-gap);
  margin-block: auto;
}

/* Language switch, pinned to the top-right corner. */
.orlyk-lang {
  position: absolute;
  top: clamp(28px, 6vh, 53px);
  right: var(--margin);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.14em;
}
.orlyk-lang__sep {
  color: var(--ink-50);
}
.orlyk-lang__item {
  color: var(--ink-50);
  transition: color var(--dur-ui) var(--ease);
}
.orlyk-lang__item:hover {
  color: var(--ink-88);
}
.orlyk-lang__item[aria-current="true"] {
  color: var(--c-gold);
}

/* Title: kicker + the two name lines ("Пилипа" hangs left of "Орлика"). */
.orlyk-hero__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
}
/* Wraps "Конституція" + "Пилипа" and shrinks to the wider of the two ("Пилипа"
   always wins), so the right-aligned kicker pins its right edge to "Пилипа"'s —
   exactly as the comps do, at every viewport width. */
.orlyk-hero__head {
  display: block;
  width: fit-content;
}
.orlyk-hero__kicker {
  display: block;
  /* fixed 44.5 down to 825, then eases to the mobile 28 by 375 */
  font-size: clamp(28px, calc(28px + (100vw - 375px) * 0.03667), 44.5px);
  line-height: 0.9;
  color: var(--c-gold);
  margin-bottom: 8px;
  text-align: right;
}
.orlyk-hero__name {
  display: block;
  /* fixed 107 down to 825, then eases to the mobile 64 by 375 */
  font-size: clamp(64px, calc(64px + (100vw - 375px) * 0.09556), 107px);
  line-height: 0.78;
  color: var(--ink-100);
  /* "Орлика" rides the same column as the lead and timeline (--col-indent),
     so the three stay on one vertical line and move together. */
  margin-left: var(--col-indent);
}
/* "Пилипа" hangs at the left margin; "Орлика" shares the lead/timeline column. */
.orlyk-hero__name--out {
  margin-left: 0;
}

/* Intro paragraph. */
.orlyk-hero__lead {
  max-width: 360px;
  margin-left: var(--col-indent);
  font-weight: 300;
  font-size: clamp(12px, calc(12px + (100vw - 375px) * 0.004444), 14px);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--ink-88);
}

/* ─── Era timeline (self-driving) ───────────────────────────────────────── */
.orlyk-era {
  position: relative;
  width: min(100%, 588px);
  margin-left: var(--col-indent);
}

/* Frosted white ellipse behind the timeline: blurs the figure for legibility. */
.orlyk-era__frost {
  position: absolute;
  z-index: 0;
  inset: -40px -24px -56px -48px;
  border-radius: 50%;
  background: rgb(14 19 20 / 0.62); /* --c-void, darkest point on the page */
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .orlyk-era__frost {
    background: rgb(14 19 20 / 0.82);
  }
}

.orlyk-era__items {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
}
/* Connector: dark track + gold progress, both pinned to the node centre line. */
.orlyk-era__items::before,
.orlyk-era__items::after {
  content: "";
  position: absolute;
  top: 10px;
  height: 1px;
  left: var(--era-line-start, 10px);
  -webkit-mask-image: var(--era-line-mask, none);
  mask-image: var(--era-line-mask, none);
}
.orlyk-era__items::before {
  width: var(--era-line-len, calc(100% - 20px));
  background: rgb(0 0 0 / 0.45);
}
.orlyk-era__items::after {
  width: var(--era-progress, 0);
  background: var(--c-gold);
}

.orlyk-era__item {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  color: var(--ink-50);
  transition: color var(--dur-ui) var(--ease);
}

/* Node marker: a ring with a centre mark that morphs circle → four-point star. */
.orlyk-era__node {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
}
.orlyk-era__mark {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orlyk-era__ring {
  fill: var(--c-white);
  fill-opacity: 0.16;
  transition: fill 0.45s var(--ease), fill-opacity 0.45s var(--ease);
}
.orlyk-era__star {
  d: path("M10 13.5C8.067 13.5 6.5 11.933 6.5 10C6.5 8.067 8.067 6.5 10 6.5C11.933 6.5 13.5 8.067 13.5 10C13.5 11.933 11.933 13.5 10 13.5Z");
  fill: var(--c-white);
  fill-opacity: 0.45;
  transition: d 0.55s var(--ease), fill 0.45s var(--ease), fill-opacity 0.45s var(--ease);
}

.orlyk-era__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orlyk-era__year {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(32px, calc(32px + (100vw - 375px) * 0.01778), 40px);
  line-height: 0.8;
  color: inherit;
}
.orlyk-era__cap {
  font-weight: 300;
  font-size: clamp(11px, calc(11px + (100vw - 375px) * 0.006667), 14px);
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--ink-100);
  opacity: 0.5;
}

.orlyk-era__item.is-active {
  color: var(--c-gold);
}
.orlyk-era__item.is-active .orlyk-era__year {
  color: var(--c-gold);
}
.orlyk-era__item.is-active .orlyk-era__cap {
  opacity: 0.88;
}
.orlyk-era__item.is-active .orlyk-era__ring {
  fill: #000;
  fill-opacity: 0.45;
}
.orlyk-era__item.is-active .orlyk-era__star {
  d: path("M10 20C10 14.4772 5.52285 10 0 10C5.52285 10 10 5.52285 10 0C10 5.52285 14.4772 10 20 10C14.4772 10 10 14.4772 10 20Z");
  fill: var(--c-gold);
  fill-opacity: 1;
}

/* ─── Wide screens (>1440): the capped landing becomes a floating card.
   A blurred, dimmed copy of the hero fills the viewport behind it, the card
   gets a deep drop-shadow and an inset hairline-gold frame — so the side
   margins read as a soft backdrop and the card lifts off it. ─── */
.orlyk-backdrop {
  display: none;
}
@media (min-width: 1441px) {
  .orlyk-backdrop {
    display: block;
    position: absolute; /* scoped to the hero screen (multi-section), not fixed */
    inset: -160px;      /* over-extends so the 200px blur never bares the edges */
    z-index: 0;
    background: url("../assets/images/hero-1710.webp") center / cover no-repeat;
    filter: blur(200px) brightness(0.45) saturate(0.85);
    transform: scale(1.1);
    /* Localised glow: opaque around the card, fading to reveal the page colour
       (#18191b on #orlyk-root) at the edges — so the screen-1/2 seam matches and
       the warmth reads as a halo, not a different background. */
    -webkit-mask-image: radial-gradient(68% 58% at 50% 45%, #000 0%, #000 30%, transparent 70%);
    mask-image: radial-gradient(68% 58% at 50% 45%, #000 0%, #000 30%, transparent 70%);
  }
  .orlyk-hero-screen {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* Centre the card in the viewport: it reads as a framed object floating on
       the blurred backdrop. The hero content still sits high because the card
       fills most of the height. */
    justify-content: center;
  }
  .orlyk-hero {
    /* Cap + centre the card itself (was via #orlyk-main; now main is full-width
       so the backdrop can bleed full-viewport). align-self centres it on the
       cross axis of the flex hero-screen; width+max-width caps it (auto margins
       would stop a flex item from filling, so don't use them here). */
    position: relative;
    z-index: 1;
    align-self: center;
    width: 100%;
    max-width: calc(var(--shell-max) - 32px);
    margin-block: 16px;
    border-radius: 24px;
    /* The card shrinks to its inner (capped at 880 below) and is centred in the
       hero screen — drop the full-height floor so it can. */
    min-height: auto;
    /* 5-layer drop shadow, lifted 1:1 from Figma */
    box-shadow:
      0 6px 14px 0 rgb(0 0 0 / 0.49),
      0 25px 25px 0 rgb(0 0 0 / 0.43),
      0 57px 34px 0 rgb(0 0 0 / 0.25),
      0 100px 40px 0 rgb(0 0 0 / 0.07),
      0 157px 44px 0 rgb(0 0 0 / 0.01);
  }
  /* inset hairline-gold frame inside the card (Rectangle 10: inset 16, r16) */
  .orlyk-hero::after {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: 4;
    border: 1px solid var(--c-gold);
    border-radius: 16px;
    pointer-events: none;
  }
  /* min: content always fits (shorter viewports then scroll/crop);
     max: never stretch the card on tall/wide windows. */
  .orlyk-hero__inner {
    min-height: clamp(660px, calc(100svh - 32px), 880px);
  }
}

/* ─── Mobile (≤640): reflow. Figure becomes a top block; content drops below
   on the page colour; type steps down; title colours invert (white kicker,
   gold name) and the words form a staircase, matching the comp. ─── */
@media (max-width: 640px) {
  .orlyk-hero {
    --margin: 20px;
    /* On mobile the portrait is only the top band; the content area below sits
       on the dark page background (#18191b in the Figma 375 frame), not on the
       warm hero tone. */
    background-color: var(--c-bg);
  }
  /* Show the WHOLE prepared portrait (era context up top → figure → writing hand
     & parchment at the bottom): size the band to the image's own aspect (mobile
     master **1290×1128**, the -03 recrop — wider & shorter than -02) so
     object-fit:cover doesn't trim it. Was a 52svh top band anchored high
     (object-position …18%) → it cut the bottom where the hand & writing are. */
  .orlyk-hero__bg {
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 1290 / 1128;   /* ≈ 87vw tall at 100vw wide */
  }
  .orlyk-hero__bg img {
    object-position: center;
  }
  /* Soft fade on the very bottom edge only, so the hand & parchment stay bright
     and the seam into the copy below is smooth. */
  .orlyk-hero__shade {
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 1290 / 1128;
    background: linear-gradient(0deg, var(--c-bg) 3%, transparent 16%);
  }
  /* Copy starts just under the portrait (~84vw); the writing sits near the
     bottom of the -03 crop, so content below it never covers the hand. */
  .orlyk-hero__inner {
    justify-content: flex-start;
    gap: 22px;
    padding: 84vw 20px 36px;
  }
  /* Below the portrait the copy sits at the top of the content area; the
     timeline is pinned to the bottom edge (and crops there once the screen is
     too short to hold everything). */
  .orlyk-hero__copy {
    gap: 22px;
    margin-block: 0;
  }
  .orlyk-era {
    margin-top: auto;
  }
  .orlyk-lang {
    top: 20px;
  }

  /* Type sizes are driven by the global fluid clamps (continuous through this
     breakpoint); here we only invert colours and set the staircase positions.
     The kicker keeps right-aligning to "Пилипа" via .orlyk-hero__head — no
     manual offset needed. */
  .orlyk-hero__kicker {
    color: var(--c-white);
    margin-bottom: -3px;
  }
  .orlyk-hero__name {
    color: var(--c-gold);
  }
  .orlyk-hero__name--out {
    margin-left: 0;
  }
  .orlyk-hero__name:not(.orlyk-hero__name--out) {
    margin-left: 102px;
  }

  .orlyk-hero__lead {
    margin-left: 0;
    max-width: none;
  }

  .orlyk-era {
    width: 100%;
  }
  .orlyk-era__items {
    gap: 8px;
  }
}

/* ─── Scroll cue, ultra-wide only ──────────────────────────────────────────
   On a huge screen the hero card just floats centred with no hint of more
   below. Mirror screen 2's cue (shared .orlyk-cue__* parts, incl. its bob/breathe
   animation), anchored inside the card at the bottom-LEFT — ≥1441 only. Its left
   edge sits 40px in; being a thin vertical strip, that lands it roughly centred
   in the left band between the inset gold frame (16) and the content (--margin
   80). The card is position:relative, so the cue rides its corner regardless of
   how the card is centred in the viewport (no overlap to dodge → no height gate). */
.orlyk-hero__cue { display: none; }
@media (min-width: 1441px) {
  .orlyk-hero__cue {
    display: flex;
    position: absolute;
    left: 40px;
    bottom: 40px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;          /* above the card's inset hairline frame (::after, z-index 4) */
    pointer-events: none; /* decorative (aria-hidden) — never swallow a click */
  }
}

/* ===== components/project.css ===== */
/* ─── Screen 2 — Project / AI-avatar ──────────────────────────────────────
   Video card (left) + scrolling copy (right) on a 4-track fr grid.
   A custom player, a two-dot custom scrollbar, pinned initiator logos and a
   scroll cue. Built standalone first (screen2.html), integrated afterwards.
   Desktop here; responsive lives at the bottom. */

.orlyk-project {
  position: relative;
  z-index: 1; /* content sits above the hero screen … */
  /* … but no own background: the page colour (#18191b on #orlyk-root) shows
     through, so the hero card's shadow can fall softly onto our top edge and the
     whole page reads as one fill. */
  overflow: hidden;
  isolation: isolate;

  /* same grid as the hero: 80→40→20 margins, 12 cols, 24 gutter */
  --pj-margin: clamp(40px, calc(40px + (100vw - 1067px) * 0.1072), 80px);
}

.orlyk-project__inner {
  position: relative;
  max-width: var(--shell-max);
  margin-inline: auto;
  height: 100svh;
  display: grid;
  /* Figma 1440 proportions of the 1280 content: cue-zone 109 · video 516 · gap
     73 · copy 586. Exact at the 1440 cap; proportional through the desktop
     range. Per-breakpoint values for 1067/826 come with the responsive pass. */
  grid-template-columns: 109fr 516fr 73fr 586fr;
  /* Row 1 holds the scroll area (bounded → copy scrolls inside); row 2 is the
     logos footer, so the scroll + custom scrollbar end above the logos. */
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 0;
  align-items: center;
  /* Fixed vertical padding (not vh): the video/title top stays the same distance
     from the top edge no matter the browser height. */
  padding: 64px var(--pj-margin);
}

/* ─── Video card (grid column 2), framed like the hero card ───────────── */
.orlyk-project__media {
  grid-column: 2;
  grid-row: 1 / -1; /* span both rows; top-aligned so its top meets the title's */
  position: relative;
  align-self: start;
}
.orlyk-video {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--gold-60);
  aspect-ratio: 3 / 4;
  /* Stays 3:4 and shrinks with the viewport: the smaller of the column width,
     the height budget (so a short viewport shrinks it instead of overflowing),
     and the 516px design max (=688 tall). Floored at 300px. */
  width: min(100%, max(260px, min(calc((100svh - 152px) * 0.75), 516px)));
  box-shadow:
    0 6px 14px 0 rgb(0 0 0 / 0.49),
    0 25px 25px 0 rgb(0 0 0 / 0.43),
    0 57px 34px 0 rgb(0 0 0 / 0.25),
    0 100px 40px 0 rgb(0 0 0 / 0.07),
    0 157px 44px 0 rgb(0 0 0 / 0.01);
}
.orlyk-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bottom fade — the card's own image overlay from Figma: transparent until
   ~72%, then down to the page colour, so the controls stay legible. */
.orlyk-video__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(24 25 27 / 0) 71.73%, var(--c-bg) 100%);
}

/* Fullscreen — the video is portrait; never crop it. Fill the screen and let it
   letterbox (object-fit: contain) instead of cover. Separate rules per prefix so
   an unknown pseudo doesn't drop the whole selector list. */
.orlyk-video:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}
.orlyk-video:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}
.orlyk-video:fullscreen .orlyk-video__el { object-fit: contain; }
.orlyk-video:-webkit-full-screen .orlyk-video__el { object-fit: contain; }
.orlyk-video:fullscreen .orlyk-video__shade { display: none; }
.orlyk-video:-webkit-full-screen .orlyk-video__shade { display: none; }

/* Blurred static glow behind the card (poster, not live video — cheap) */
.orlyk-project__glow {
  position: absolute;
  z-index: -1;
  inset: 8% -14% -6% 6%;
  border-radius: 24px;
  background: url("../assets/video/orlyk-avatar-poster.jpg") center / cover no-repeat;
  filter: blur(150px) brightness(0.55) saturate(0.9);
  opacity: 0.8;
  pointer-events: none;
}

/* ─── Big centre play (dark glass disc, shown while paused) ─────────────── */
.orlyk-video__bigplay {
  position: absolute;
  inset: 0;
  margin: auto;            /* centre on the video */
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(24 25 27 / 0.65);
  border: 1px solid rgb(255 255 255 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.orlyk-video__bigplay .orlyk-ic { width: 24px; height: 24px; } /* bigger, like the bottom play */
.orlyk-video__bigplay:hover { transform: scale(1.06); }
.orlyk-video--playing .orlyk-video__bigplay { opacity: 0; pointer-events: none; }

/* ─── Custom player ───────────────────────────────────────────────────── */
.orlyk-video__controls {
  position: absolute;
  inset: auto 18px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.orlyk-video__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 100px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color var(--dur-ui, 0.2s) var(--ease, ease), background-color var(--dur-ui, 0.2s) var(--ease, ease);
}
.orlyk-video__play:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.orlyk-video__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  transition: color var(--dur-ui, 0.2s) var(--ease, ease);
}
.orlyk-video__btn:hover { color: #fff; }

/* Captions toggle ("CC") + the custom caption overlay */
.orlyk-video__cc-btn {
  width: auto;
  min-width: 24px;
  padding: 0 3px;
  font: 700 11px/1 var(--ff-mono, monospace);
  letter-spacing: 0.06em;
  border-radius: 3px;
}
.orlyk-video__cc-btn.is-on {
  color: var(--c-gold, #c5a56e);
  box-shadow: inset 0 -2px 0 currentColor;
}
.orlyk-video__cc {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(86%, 46ch);
  padding: 0.15em 0.55em;
  background: rgb(0 0 0 / 0.66);
  color: #fff;
  font-size: clamp(13px, 1.1vw + 8px, 19px);
  line-height: 1.32;
  text-align: center;
  text-wrap: balance;
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}
.orlyk-video__cc[hidden] { display: none; }

.orlyk-video__bar {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.orlyk-video__time {
  flex: none;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: rgb(255 255 255 / 0.7);
}
.orlyk-video__progress {
  position: relative;
  flex: 1 0 0;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  /* the JS owns the drag — stop the browser claiming the horizontal swipe as a
     scroll/pan gesture, which on touch made "drag to seek" just scroll the page */
  touch-action: none;
  /* it's a focusable div (tabindex/role=slider); without this, clicking it drops
     a blinking text caret like an input. No text to select here anyway. */
  -webkit-user-select: none;
  user-select: none;
}
.orlyk-video__progress::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: rgb(143 143 143 / 0.5);
}
.orlyk-video__fill {
  position: absolute;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-gold);
  pointer-events: none;   /* visual only — the pointer goes straight to the bar */
}
.orlyk-video__handle {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;   /* visual only — never swallow the drag */
}

/* ─── Icons as external SVG files, tinted via mask + currentColor ──────── */
.orlyk-ic {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.orlyk-video__play .orlyk-ic { width: 16px; height: 16px; }
.orlyk-ic--play { --ic: url("../assets/icons/play.svg"); }
.orlyk-ic--pause { --ic: url("../assets/icons/pause.svg"); }
.orlyk-ic--volume { --ic: url("../assets/icons/volume.svg"); }
.orlyk-ic--volume-off { --ic: url("../assets/icons/volume-off.svg"); }
.orlyk-ic--maximize { --ic: url("../assets/icons/maximize.svg"); }
.orlyk-ic--minimize { --ic: url("../assets/icons/minimize.svg"); }
.orlyk-ic--link { --ic: url("../assets/icons/external-link.svg"); }

/* ─── Copy column (grid column 4), masked scroll area ─────────────────── */
.orlyk-project__copy {
  grid-column: 4;
  grid-row: 1; /* share the cell with the logos so they overlay its bottom */
  position: relative;
  align-self: stretch;
  display: flex;
  gap: 28px; /* text → scrollbar (Figma) */
  min-width: 0;
  min-height: 0;
}
.orlyk-project__scroll {
  flex: 1 0 0;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* No top padding/fade: the title sits flush at the scroll top so the video can
     align to it. Bottom padding clears the bottom fade so the last line reads. */
  padding-bottom: 48px;
  scrollbar-width: none;
  /* bottom fade only */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 40px);
  mask-image: linear-gradient(to top, transparent 0, #000 40px);
}
.orlyk-project__scroll::-webkit-scrollbar { width: 0; height: 0; }

.orlyk-project__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, calc(40px + (100vw - 1067px) * 0.0642), 64px);
  line-height: 0.86;
}
.orlyk-project__title-g { color: var(--c-gold); }
.orlyk-project__title-w { color: var(--ink-100, #fff); }
.orlyk-project__lead {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(14px, calc(14px + (100vw - 1067px) * 0.008), 17px);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--ink-88, rgb(255 255 255 / 0.88));
}
.orlyk-project__rule {
  flex: none; /* it's an empty flex item — without this it shrinks to 0 height and vanishes */
  width: 72px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.8;
}
.orlyk-project__section {
  display: flex;
  flex-direction: column;
  /* explicit margins (not gap) so the eyebrow sits twice as close to the heading
     (12) as the heading sits to the body (24) — per Figma */
}
.orlyk-project__eyebrow {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.orlyk-project__eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
}
.orlyk-project__h3 {
  margin: 0 0 24px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(30px, calc(30px + (100vw - 1067px) * 0.0268), 40px);
  line-height: 0.9;
  color: var(--ink-100, #fff);
}
.orlyk-project__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: var(--ink-88, rgb(255 255 255 / 0.88));
}
.orlyk-project__body p { margin: 0; }

/* ─── Sources ─────────────────────────────────────────────────────────── */
.orlyk-project__sources {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 16px;
}
/* line — centred gold caption — line */
.orlyk-project__rule-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 0.8;
  color: var(--c-gold);
  white-space: nowrap;
}
.orlyk-project__rule-head > span[aria-hidden]:not(.orlyk-project__rule-dot) {
  flex: 1 0 0;
  height: 1px;
  background: rgb(197 165 110 / 0.45);
}
.orlyk-src-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.orlyk-src-list li + li { border-top: 1px solid rgb(255 255 255 / 0.25); }
.orlyk-src {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  color: var(--ink-88, rgb(255 255 255 / 0.88));
  text-decoration: none;
  transition: color var(--dur-ui, 0.2s) var(--ease, ease);
}
.orlyk-src__emblem {
  flex: none;
  width: 15px;
  height: 24px;
  margin-top: 2px;
  object-fit: contain;
}
.orlyk-src__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.07em;
}
.orlyk-src__ext {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  opacity: 0.5;
  transition: opacity var(--dur-ui, 0.2s) var(--ease, ease);
}
.orlyk-src:hover,
.orlyk-src:focus-visible { color: var(--c-gold); }
.orlyk-src:hover .orlyk-src__ext,
.orlyk-src:focus-visible .orlyk-src__ext { opacity: 1; }

/* ─── Thanks / consultants ────────────────────────────────────────────── */
.orlyk-project__thanks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.orlyk-project__rule-head--dot { justify-content: center; }
.orlyk-project__rule-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
}
.orlyk-project__thanks-head {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 0.8;
  color: var(--c-gold);
}
.orlyk-credit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orlyk-credit__label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.07em;
  color: #8e8a84;
}
.orlyk-credit__name {
  margin: 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 0.9;
  color: var(--ink-100, #fff);
}
.orlyk-credit__muted { color: #8e8a84; }

/* ─── Custom scrollbar (two dots) ─────────────────────────────────────── */
.orlyk-project__scrollbar {
  position: relative;
  flex: none;
  width: 8px;
  align-self: stretch;
  cursor: grab;
  touch-action: none;
}
/* invisible grab zone — same as Screen 3: widen the thin bar into the gutter so
   it's easy to catch and drag even on an overshoot */
.orlyk-project__scrollbar::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -18px;
  right: -6px;
}
.orlyk-project__scrollbar:active { cursor: grabbing; }
.orlyk-sb__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--c-gold);
  border-radius: 2px;
}
/* Thumb: two filled gold dots + a 17px bar between them (gaps 3px), 1:1 Figma.
   A page-colour background + 8px block padding mask the track so there's a clean
   8px gap between the line and the dots (the line is "broken" around the thumb). */
.orlyk-sb__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-block: 8px;
  background: var(--c-bg);
  will-change: transform;
}
.orlyk-sb__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
}
.orlyk-sb__bar {
  width: 1px;
  height: 17px;
  background: var(--c-gold);
  border-radius: 2px;
}

/* ─── Initiator logos ──────────────────────────────────────────────────────
   A footer in row 2 of the text column, so the scroll area + custom scrollbar
   end above it (no overlap, nothing bleeds under the marks). Drops under the
   video at ≤860 by switching to column 1. */
.orlyk-project__logos {
  grid-column: 4;
  grid-row: 2;
  justify-self: stretch;     /* full column width … */
  align-items: flex-start;   /* … while the marks stay left-aligned */
  margin-top: clamp(16px, 2.5vh, 24px); /* gap between the scroll and the footer */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.orlyk-project__logos-label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.orlyk-project__logo-list {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Flat white silhouettes on the dark bg — at 70% so the marks read clearly. */
.orlyk-project__logo-list img {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* ─── Scroll cue (left edge) ──────────────────────────────────────────── */
.orlyk-project__cue {
  position: absolute;
  left: var(--pj-margin);
  bottom: clamp(56px, 9vh, 94px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.orlyk-cue__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
}
.orlyk-cue__line {
  width: 1px;
  height: 37px;
  background: var(--c-gold);
}
.orlyk-cue__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.5);
}

/* Subtle, slow scroll cue: the dot bobs and the line breathes. Off for
   reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .orlyk-cue__dot { animation: orlyk-cue-dot 2.6s ease-in-out infinite; }
  .orlyk-cue__line { transform-origin: bottom; animation: orlyk-cue-line 2.6s ease-in-out infinite; }
}
/* The dot bobs down; the line shrinks from the top (origin bottom) by the same
   amount, so the dot↔line gap stays constant and the label never moves. */
@keyframes orlyk-cue-dot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@keyframes orlyk-cue-line {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.811); }
}

/* ─── Responsive ──────────────────────────────────────────────────────────
   Must live at the very end: these overrides share specificity with the base
   rules above, so source order decides. Breakpoints follow the comps —
   1067 (no cue, video at the margin), 826 (logos drop left under the video),
   mobile ≤640 (single column, the page scrolls). */

/* ≤1150 — tablet: drop the cue, video sits top-left, logos stack under it
   (vertical, centred), text scrolls on the right. Logos move left from 1150
   (per review) — supersedes the old 1067 "logos footer" tier. The left column
   stacks video (row 1) over logos (row 2); the text spans all rows so it still
   scrolls inside the fixed screen. */
@media (max-width: 1150px) {
  .orlyk-project__cue { display: none; }
  .orlyk-project__inner {
    grid-template-columns: 306fr 40px 402fr;  /* video / gap / text */
    grid-template-rows: auto auto 1fr;         /* video · logos · filler */
    /* The left column stacks the video over the vertically-stacked logos. The
       screen is locked to 100svh and clipped, so the video must shrink to leave
       room for the marks — otherwise a short window pushes them out of view.
       Reserve their height + the gap; the same gap var drives the real margin
       below, so the reserve and the spacing can never drift apart. */
    --pj-logos-h: 204px;                    /* label + 21 gap + 3 stacked marks (48/40/32, 24 gaps) */
    --pj-logos-gap: clamp(32px, 6vh, 64px); /* video → logos; floor 32 = marks come no closer */
  }
  .orlyk-project__media { grid-column: 1; grid-row: 1; align-self: start; }
  .orlyk-project__copy { grid-column: 3; grid-row: 1 / -1; }
  /* Height budget = screen − vertical padding (128) − 16 safety − logos − gap,
     so the video and the marks always fit inside the clipped screen with a few
     px of breathing room. Floored at 200 (only an extremely short + wide window
     would reach the floor). */
  .orlyk-video {
    width: min(100%, max(200px, calc((100svh - 144px - var(--pj-logos-h) - var(--pj-logos-gap)) * 0.75)));
  }
  .orlyk-project__logos {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    align-items: center;                 /* centre label + marks under the video */
    gap: 21px;                           /* +30% label→marks when vertical (review) */
    margin-top: var(--pj-logos-gap);     /* same var as the video's reserve above */
    margin-bottom: 0;
  }
  /* marks stack vertically, centred, full size (per the 826 comp) */
  .orlyk-project__logo-list { flex-direction: column; gap: 24px; }
}

/* ≤860 — narrowest tablet: drop the custom scrollbar (no room), per the 826 comp. */
@media (max-width: 860px) {
  .orlyk-project__scrollbar { display: none; }
}

/* ≤640 — mobile: single column, the page scrolls. Flatten the copy/scroll
   (display:contents) and re-order so the full-width video sits between the
   intro and the text sheet. Cue, scrollbar, glow and the rule dashes drop. */
@media (max-width: 768px) {
  .orlyk-project { --pj-margin: 20px; }
  .orlyk-project__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* left-align the stack (not centred) */
    height: auto;
    gap: 32px;
    padding: 46px var(--pj-margin) 56px;
  }
  .orlyk-project__cue,
  .orlyk-project__scrollbar,
  .orlyk-project__glow,
  .orlyk-project__rule { display: none; }
  .orlyk-project__copy,
  .orlyk-project__scroll { display: contents; }
  /* Order: intro (title, lead) → video → initiator logos → the text sheet, so
     the marks sit directly UNDER the video (per review), not trailing the whole
     article. The text sections keep the default order 0, landing after the logos. */
  .orlyk-project__title { order: -4; font-size: clamp(40px, 7vw, 54px); } /* scales up on wide phones */
  .orlyk-project__lead { order: -3; }
  .orlyk-project__media { order: -2; align-self: stretch; width: 100%; }
  /* the page scrolls here, so drop the height-budget cap — video fills the
     column (capped so it doesn't dominate on large phones), centred. */
  .orlyk-video { width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 9 / 16; }
  /* logos sit centred under the centred video (row or stacked — see below) */
  .orlyk-project__logos { order: -1; align-self: center; align-items: center; margin-top: 0; }
  /* Sources heading: left-align on the narrow column so the long gold caption
     ("Посиланнями на офіційні джерела") never overruns the content strip — drop
     the centring side-lines and let it wrap. The dot-separator variant (no text)
     stays centred. */
  .orlyk-project__rule-head:not(.orlyk-project__rule-head--dot) {
    white-space: normal;
    line-height: 1.2;   /* base is 0.8 (tuned for the single-line desktop variant) — too tight once it wraps to two lines */
  }
  .orlyk-project__rule-head:not(.orlyk-project__rule-head--dot) > span[aria-hidden] {
    display: none;
  }
}

/* 641–768 — still the mobile stack, but match screen 1's wider side margin. */
@media (min-width: 641px) and (max-width: 768px) {
  .orlyk-project { --pj-margin: 40px; }
}

/* Mobile, wide enough that the three marks fit on one row (≈444px incl. gaps):
   lay them horizontally under the video instead of stacking, centred under it.
   Below ~520 they fall back to the vertical stack (flex-wrap is just a safety
   net should the marks ever grow). */
@media (min-width: 520px) and (max-width: 768px) {
  .orlyk-project__logo-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
}

/* Desktop with vertical room under the video: drop the logos into that empty
   space (horizontal, centred on the video) instead of the right footer, so they
   use the gap without crowding the text column (which keeps full height).
   Video stays top-aligned (its top meets the title's) — per review, that reads
   better than vertically centring the group, which looked off on scroll-in. */
@media (min-width: 1151px) and (min-height: 950px) {
  .orlyk-project__inner { grid-template-rows: auto auto 1fr; }
  .orlyk-project__media { grid-row: 1; }
  .orlyk-project__copy { grid-row: 1 / -1; }
  .orlyk-project__logos {
    grid-column: 2;
    grid-row: 2;
    align-items: center;                 /* centred on the video */
    margin-top: clamp(32px, 5vh, 56px);
  }
}
/* ===== components/reader.css ===== */
/* ─── Screen 3 — Reader (original scans + modern translation) ───────────────
   Left: original scans with a version toggle (старо-українська / латина) and a
   paginator. Right: the modern translation, scrolling inside a pinned screen,
   with highlighted "active zones" that open a drawer of context. A vertical
   "Завантажити PDF" affordance hugs the right edge until the layout tightens,
   then it lays down horizontally under the text. Inherits Screen 2's grid,
   custom two-dot scrollbar and pinned forced-scroll. Desktop first; responsive
   at the bottom (1150 / 860 / 768, matching Screen 2). */

.orlyk-reader {
  position: relative;
  z-index: 1;            /* above the hero screen, like Screen 2 */
  overflow: hidden;      /* clips the off-screen drawer */
  isolation: isolate;
  --rd-margin: clamp(40px, calc(40px + (100vw - 1067px) * 0.1072), 80px);
}

.orlyk-reader__inner {
  position: relative;
  max-width: var(--shell-max);
  margin-inline: auto;
  height: 100svh;
  display: grid;
  /* IDENTICAL grid to Screen 2 (.orlyk-project__inner): cue · media · gap · copy.
     The scan lives in the media column and the reader in the copy column, so both
     screens share the exact same left edges and widths — they're on one set of
     guides. The vertical PDF sits in the right margin (no gutter carved out). */
  grid-template-columns: 109fr 516fr 73fr 586fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  padding: 64px var(--rd-margin);
}

/* ─── Left — original scans ─────────────────────────────────────────────── */
.orlyk-reader__scan {
  grid-column: 2;          /* the media column — same as Screen 2's video */
  /* top-aligned + left-aligned: the toggle lines up with "1996" on the right and
     the plate's left edge sits at x≈189, exactly on Screen 2's video left edge. */
  align-self: start;
  justify-self: start;
  width: min(100%, 410px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* top row: version toggle + era stamp */
.orlyk-reader__scan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* segmented version toggle (старо-українська / латина) */
.orlyk-seg {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--gold-30);
  border-radius: 100px;
}
.orlyk-seg__btn {
  border: 0;
  background: transparent;
  border-radius: 100px;
  padding: 6px 16px;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ink-50);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.orlyk-seg__btn.is-active {
  background: var(--c-gold);
  color: var(--c-bg);
}

.orlyk-reader__stamp {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.orlyk-reader__scan-top .orlyk-reader__stamp { align-items: flex-end; }
.orlyk-reader__stamp-year {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 0.8;
  color: var(--c-gold);
}
.orlyk-reader__stamp-cap {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}

/* the plate + its blurred glow */
.orlyk-reader__stage {
  position: relative;
  display: grid;
  place-items: center;
}
.orlyk-reader__glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  /* reader.js sets the current scan as the background; the scans are transparent
     cut-outs, so blurring this gives a halo that follows the parchment edge. */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  /* Toned down vs Screen 2 so the seam isn't abrupt: smaller radius + lower
     intensity keep the warm halo close to the parchment instead of bleeding up
     to the top edge, so Screen 3's top stays dark like Screen 2's bottom. */
  filter: blur(64px) saturate(1.05);
  opacity: 0.3;
  transform: scale(1);
  pointer-events: none;
}
.orlyk-reader__plate {
  margin: 0;
  /* Shrink with the viewport height (0.69 = 410/594) so the toggle + plate +
     paginator always fit the pinned screen — a short window scales the plate
     down instead of clipping it. Floored by the 410px design width. */
  width: min(100%, 410px, calc((100svh - 280px) * 0.69));
  aspect-ratio: 410 / 594;
  cursor: zoom-in;
}
.orlyk-reader__plate picture { display: block; width: 100%; height: 100%; }
.orlyk-reader__scan-img {
  display: block;
  width: 100%;
  height: 100%;
  /* transparent cut-out: show the whole parchment; the shadow follows its shape */
  object-fit: contain;
  will-change: opacity, transform;
  filter:
    drop-shadow(0 14px 14px rgb(0 0 0 / 0.45))
    drop-shadow(0 40px 30px rgb(0 0 0 / 0.30));
}

/* paginator */
.orlyk-reader__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.orlyk-reader__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-gold);
  border-radius: 1000px;
  background: transparent;
  color: var(--c-gold);
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.orlyk-reader__nav .orlyk-ic { width: 24px; height: 24px; }
.orlyk-reader__nav:hover { background: rgb(197 165 110 / 0.12); }
.orlyk-reader__nav:disabled { opacity: 0.35; cursor: default; }
.orlyk-reader__nav:disabled:hover { background: transparent; }

.orlyk-reader__pager-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.orlyk-reader__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 15px;
}
.orlyk-reader__dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--gold-30);
  transition: width var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.orlyk-reader__dot.is-active {
  width: 18px;
  background: var(--c-gold);
}
.orlyk-reader__dot--more {
  width: auto;
  height: auto;
  background: none;
  font-family: var(--ff-mono);
  font-size: 10px;
  line-height: 1;
  color: rgb(197 165 110 / 0.4);
}
.orlyk-reader__count {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink-70);
}

/* ─── Right — modern translation column ─────────────────────────────────── */
.orlyk-reader__col {
  grid-column: 4;          /* the copy column — same as Screen 2's text */
  align-self: stretch;
  position: relative;      /* anchors the centred end-of-text PDF button */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.orlyk-reader__col-main {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  gap: 28px;
}
.orlyk-reader__scroll {
  flex: 1 0 0;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* clears the absolutely-positioned end-of-text PDF button (≈42px) and leaves a
     comfortable ~46px gap between the last line and the button */
  padding-bottom: 88px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 40px);
  mask-image: linear-gradient(to top, transparent 0, #000 40px);
}
.orlyk-reader__scroll::-webkit-scrollbar { width: 0; height: 0; }

.orlyk-reader__head {
  display: flex;
  align-items: flex-start;   /* "1996" tops out level with "1710" on the left */
  justify-content: space-between;
  gap: 16px;
}
.orlyk-reader__head .orlyk-reader__stamp { text-align: left; }
.orlyk-reader__head .orlyk-reader__stamp-year { font-size: 48px; }
.orlyk-reader__hint {
  margin: 0;
  /* bottom-aligned to the row so its last line sits on the "Сучасний переклад"
     baseline (which is "Оригінал" / under 1996), per the comp. */
  align-self: flex-end;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-gold);
  opacity: 0.6;
  text-align: left;
  white-space: nowrap;
}
.orlyk-reader__hint-dot {
  flex: none;
  margin-top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--c-gold);
}

.orlyk-reader__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, calc(40px + (100vw - 1067px) * 0.0642), 56px);
  line-height: 0.8;
  display: flex;
  flex-direction: column;
}
.orlyk-reader__title-g { color: var(--c-gold); }
.orlyk-reader__title-w { color: var(--ink-100); }

.orlyk-reader__lead {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(14px, calc(14px + (100vw - 1067px) * 0.008), 17px);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--ink-88);
}
.orlyk-reader__rule {
  flex: none;
  width: 72px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.8;
}
.orlyk-reader__doc {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.orlyk-reader__p {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: var(--ink-88);
}

/* ─── Translation as a зміст: collapsible accordion ─────────────────────────
   reader.js groups the flat doc into Вступ · Статті I–XVI · Присяга. Default:
   everything collapsed (a scannable contents list). JS off → the doc reads flat.
   The hairline sits between rows — never above the first. */
.orlyk-acc {
  display: flex;
  flex-direction: column;
}
.orlyk-acc__item + .orlyk-acc__item {
  border-top: 1px solid var(--gold-15);
}
.orlyk-acc__head {
  width: 100%;
  display: flex;
  align-items: flex-start;   /* chevron rides the top "Стаття N" line, not the middle */
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.orlyk-acc__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.orlyk-acc__num {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.orlyk-acc__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink-100);
  opacity: 0.8;                     /* softened; full strength on hover */
  transition: opacity var(--dur-ui) var(--ease);
}
.orlyk-acc__title--section { color: var(--c-gold); }   /* Вступ · Присяга — gold section markers */
.orlyk-acc__chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--c-gold);
  opacity: 0.65;
  transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.orlyk-acc__chev svg { width: 16px; height: 16px; display: block; }

/* hover / keyboard focus "ignites" the row */
.orlyk-acc__head:hover .orlyk-acc__title,
.orlyk-acc__head:focus-visible .orlyk-acc__title { opacity: 1; }
.orlyk-acc__head:hover .orlyk-acc__chev,
.orlyk-acc__head:focus-visible .orlyk-acc__chev { opacity: 1; }
.orlyk-acc__head:focus-visible { outline: none; }
.orlyk-acc__head:focus-visible .orlyk-acc__title {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* open — chevron flips up, panel grows (grid-rows 0fr → 1fr animates height) */
.orlyk-acc__item.is-open .orlyk-acc__chev { transform: rotate(180deg); opacity: 1; }
.orlyk-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
}
.orlyk-acc__item.is-open .orlyk-acc__panel { grid-template-rows: 1fr; }
.orlyk-acc__panel-inner {
  /* the grid item must stay padding/border-free so the 0fr track collapses fully
     to 0 — the breathing room lives on the content wrapper inside it. */
  overflow: hidden;
  min-height: 0;
}
.orlyk-acc__panel-content {
  display: flex;
  flex-direction: column;
  gap: 24px;              /* same paragraph rhythm as the flat doc */
  padding-bottom: 26px;   /* breathing room before the next hairline */
}

@media (prefers-reduced-motion: reduce) {
  .orlyk-acc__panel { transition: none; }
  .orlyk-acc__chev { transition: none; }
}

/* the highlighted active zone — inline, wraps across lines (clone) */
.orlyk-reader__zone {
  cursor: pointer;
  /* Prominent by default — solid gold with dark text — so "виділений текст" reads
     clearly in the running translation; hover/focus eases it back to the soft 35%
     tint. (Inverted from the first pass, where the faint tint was the default and
     was hard to see.) A touch lighter than --c-gold so the dark text rides at a
     comfortable ~9.9:1 contrast (was ~7.5:1 on --c-gold). Clones across lines. */
  background: #d8c08f;
  color: var(--c-bg);
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.orlyk-reader__zone:hover,
.orlyk-reader__zone:focus-visible {
  background: var(--gold-35);
  color: inherit;
  outline: none;
}
.orlyk-reader__zone.is-active {
  /* the passage whose drawer is open stays prominent (wins over :hover) */
  background: #d8c08f;
  color: var(--c-bg);
}

/* Стаття XI has no drawer/zone, but its passage should read like the gold-
   marked active zones — same highlight, just no interactivity. */
.orlyk-reader__hl {
  background: #d8c08f;
  color: var(--c-bg);
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ─── Keyboard focus rings (a11y) ───────────────────────────────────────── */
.orlyk-reader__nav:focus-visible,
.orlyk-seg__btn:focus-visible,
.orlyk-reader__drawer-close:focus-visible,
.orlyk-reader__pdf:focus-visible,
.orlyk-reader__pdf-h:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
/* the zone already goes solid gold on focus; a contrasting ring marks it clearly */
.orlyk-reader__zone:focus-visible {
  outline: 2px solid var(--ink-100);
  outline-offset: 2px;
}

/* ─── Custom scrollbar (two dots) — shared markup with Screen 2 ──────────── */
.orlyk-reader__scrollbar {
  position: relative;
  flex: none;
  width: 8px;
  align-self: stretch;
  cursor: grab;
  touch-action: none;
}
/* invisible grab zone — widen the thin bar into the gutter so it's easy to catch
   and drag even on an overshoot (the visible thumb stays slim) */
.orlyk-reader__scrollbar::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -18px;
  right: -6px;
}
.orlyk-reader__scrollbar:active { cursor: grabbing; }

/* ─── Vertical PDF affordance (right edge) ──────────────────────────────── */
.orlyk-reader__pdf {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--c-gold);
  border-radius: 8px;
  color: var(--c-gold);
  text-decoration: none;
  background: transparent;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
              opacity var(--dur-ui) var(--ease), visibility var(--dur-ui) var(--ease);
}
.orlyk-reader__pdf .orlyk-ic { width: 24px; height: 24px; flex: none; }
/* hairline between the icons and the vertical label (Figma) */
.orlyk-reader__pdf-rule { width: 100%; height: 1px; background: currentColor; opacity: 0.6; }
.orlyk-reader__pdf-text {
  /* vertical, reading bottom→top (matches Figma's -90° rotation) */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.orlyk-reader__pdf:hover { background: var(--c-gold); color: var(--c-bg); }

/* horizontal PDF button (Figma 194:101) — ONE design, used in the drawer foot
   AND inline under the text when the vertical button doesn't fit. */
.orlyk-reader__pdf-h {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--c-gold);
  border-radius: 8px;
  background: transparent;
  color: var(--c-gold);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.orlyk-reader__pdf-h .orlyk-ic { width: 24px; height: 24px; flex: none; }
.orlyk-reader__pdf-h-rule { flex: none; width: 1px; height: 24px; background: currentColor; opacity: 0.5; }
.orlyk-reader__pdf-h:hover { background: var(--c-gold); color: var(--c-bg); }
/* the inline-under-text instance appears only when the vertical button is hidden */
/* Desktop: the horizontal button floats CENTRED at the foot of the copy column,
   OUT of flow (position:absolute) so toggling it never resizes the scroll area —
   that resize was feeding the ResizeObserver and causing the flicker + content
   jump. Being absolute also stops it stretching full-width (a flex child would).
   It just fades in at the end of the text while the vertical button fades out. */
.orlyk-reader__pdf-h--inline {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease), visibility var(--dur-ui) var(--ease);
}
.orlyk-reader.is-text-end .orlyk-reader__pdf { opacity: 0; visibility: hidden; }
.orlyk-reader.is-text-end .orlyk-reader__pdf-h--inline { opacity: 1; visibility: visible; pointer-events: auto; }

/* Accordion mode — reader.js moved the download button into the doc, at the foot
   of the list. Retire the absolute vertical button + the end-of-text fade so
   nothing floats over the rows; the button now rides in normal flow. */
.orlyk-reader.is-accordion .orlyk-reader__pdf { display: none; }
.orlyk-reader.is-accordion .orlyk-reader__pdf-h--inline {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 8px;
}
.orlyk-reader.is-accordion .orlyk-reader__scroll {
  padding-bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ─── Drawer ────────────────────────────────────────────────────────────── */
.orlyk-reader__overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease), visibility var(--dur-ui) var(--ease);
}
.orlyk-reader.is-drawer-open .orlyk-reader__overlay {
  opacity: 0.81;
  visibility: visible;
}

.orlyk-reader__drawer {
  /* fixed to the viewport (not the max-1440 inner) so it hugs the real right edge
     and the dimmer covers the full width — no black strip on wide screens. Same
     right-slide on every size, mobile included. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border-left: 1px solid var(--gold-30);
  box-shadow: -20px 0 60px 0 rgb(0 0 0 / 0.5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slide) var(--ease), visibility var(--dur-slide) var(--ease);
  will-change: transform;
}
.orlyk-reader.is-drawer-open .orlyk-reader__drawer {
  transform: none;
  visibility: visible;
}

.orlyk-reader__drawer-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 25px;
  border-bottom: 1px solid var(--gold-15);
}
.orlyk-reader__drawer-eyebrow {
  margin: 0 0 4px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.orlyk-reader__drawer-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink-100);
}
.orlyk-reader__drawer-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-white);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease);
}
.orlyk-reader__drawer-close .orlyk-ic { width: 24px; height: 24px; }
.orlyk-reader__drawer-close:hover { opacity: 1; }

.orlyk-reader__drawer-body {
  /* 1 1 auto (not basis-0): on mobile the drawer is auto-height, so a basis-0 body
     collapses to nothing (the "thin strip" bug). Auto basis sizes it to content;
     on desktop it still grows to fill the fixed-height drawer. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-30) transparent;
}
.orlyk-reader__drawer-opis {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--ink-88);
}
.orlyk-reader__sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--gold-20);
}
.orlyk-reader__sec-label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.orlyk-reader__sec-text {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-70);
}
/* a "Закон України …:" sub-header that introduces a bullet group */
.orlyk-reader__sec-sub {
  margin: 4px 0 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink-88);
}
.orlyk-reader__sec-sub + .orlyk-reader__sec-list { margin-top: 10px; }
.orlyk-reader__sec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orlyk-reader__sec-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-70);
}
.orlyk-reader__sec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
}

.orlyk-reader__drawer-foot {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 20px 32px 28px;
  border-top: 1px solid var(--gold-15);
}

/* ─── New icons ─────────────────────────────────────────────────────────── */
.orlyk-ic--chevron-left { --ic: url("../assets/icons/chevron-left.svg"); }
.orlyk-ic--chevron-right { --ic: url("../assets/icons/chevron-right.svg"); }
.orlyk-ic--download { --ic: url("../assets/icons/download.svg"); }
.orlyk-ic--pdf { --ic: url("../assets/icons/file-type-pdf.svg"); }
.orlyk-ic--x { --ic: url("../assets/icons/x.svg"); }

/* ─── Fullscreen scan viewer ────────────────────────────────────────────── */
.orlyk-reader__fs {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease), visibility var(--dur-ui) var(--ease);
}
.orlyk-reader.is-fs-open .orlyk-reader__fs { opacity: 1; visibility: visible; }
.orlyk-reader__fs-backdrop { position: absolute; inset: 0; background: var(--c-bg); opacity: 0.97; }
.orlyk-reader__fs-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 4vw, 40px);
}
.orlyk-reader__fs-head .orlyk-seg { background: rgb(24 25 27 / 0.55); }
.orlyk-reader__fs-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold-30);
  border-radius: 100px;
  background: transparent;
  color: var(--c-white);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.orlyk-reader__fs-close .orlyk-ic { width: 22px; height: 22px; }
.orlyk-reader__fs-close:hover { opacity: 1; border-color: var(--c-gold); }
.orlyk-reader__fs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-gold);
  border-radius: 100px;
  background: transparent;
  color: var(--c-gold);
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.orlyk-reader__fs-arrow .orlyk-ic { width: 28px; height: 28px; }
.orlyk-reader__fs-arrow:hover { background: rgb(197 165 110 / 0.12); }
.orlyk-reader__fs-arrow:disabled { opacity: 0.3; cursor: default; }
.orlyk-reader__fs-arrow:disabled:hover { background: transparent; }
.orlyk-reader__fs-arrow--prev { left: clamp(8px, 2vw, 32px); }
.orlyk-reader__fs-arrow--next { right: clamp(8px, 2vw, 32px); }
.orlyk-reader__fs-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  height: min(86svh, 860px);
  padding: 0 clamp(64px, 9vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orlyk-reader__fs-stage picture { display: block; height: 100%; }
.orlyk-reader__fs-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 45px rgb(0 0 0 / 0.6));
  will-change: opacity, transform;
}
.orlyk-reader__fs-pager {
  position: absolute;
  inset: auto 0 clamp(16px, 4vh, 36px) 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .orlyk-reader__fs-arrow { width: 44px; height: 44px; }
  .orlyk-reader__fs-arrow .orlyk-ic { width: 24px; height: 24px; }
  .orlyk-reader__fs-stage { padding: 0 clamp(48px, 13vw, 64px); height: min(78svh, 900px); }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

/* ≤1150 — tablet: tighter gutters, lay the PDF down under the text. */
@media (max-width: 1150px) {
  /* mirror Screen 2's tablet grid exactly: media · gap · text (cue column drops). */
  .orlyk-reader__inner { grid-template-columns: 306fr 40px 402fr; }
  .orlyk-reader__scan { grid-column: 1; }
  .orlyk-reader__col { grid-column: 3; }
  .orlyk-reader__pdf { display: none; }
  .orlyk-reader__pdf-h--inline { display: inline-flex; align-self: flex-start; position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 24px; }
}

/* ≤860 — drop the custom scrollbar (matches Screen 2). */
@media (max-width: 860px) {
  .orlyk-reader__scrollbar { display: none; }
  .orlyk-reader__col-main { gap: 0; }
}

/* ≤768 — mobile: single column, the page scrolls; the drawer is a bottom sheet. */
@media (max-width: 768px) {
  .orlyk-reader { --rd-margin: 20px; }
  .orlyk-reader__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 40px;
    padding: 46px var(--rd-margin) 56px;
  }
  .orlyk-reader__scan { order: -1; width: 100%; max-width: 440px; margin-inline: auto; }
  /* the page scrolls on mobile — no pinned height, so the plate uses full width */
  .orlyk-reader__plate { width: min(100%, 410px); }
  /* keep the toggle + era stamp on one row on narrow phones (no clipping) */
  .orlyk-reader__scan-top { flex-wrap: wrap; gap: 12px; }
  .orlyk-seg__btn { padding: 6px 12px; font-size: 10px; }
  .orlyk-reader__scan-top .orlyk-reader__stamp-year { font-size: 36px; }
  /* flatten the column to normal flow so the doc expands and the page scrolls
     (desktop's flex:1 basis-0 would otherwise collapse it to 0 here) */
  .orlyk-reader__col { display: block; }
  .orlyk-reader__col-main { display: block; }
  .orlyk-reader__scroll { flex: none; }
  .orlyk-reader__scroll {
    overflow: visible;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 0;
  }
  .orlyk-reader__pdf-h--inline { display: inline-flex; position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 24px; }
  /* the drawer keeps the desktop right-slide on mobile too (per spec) — the base
     rule already handles it (fixed, width min(480px, 92vw)). */
}

@media (min-width: 641px) and (max-width: 768px) {
  .orlyk-reader { --rd-margin: 40px; }
}

/* ≥769 — two columns side by side: with the "1996" number gone, reserve the
   year's height so "Сучасний переклад" still drops onto the "Оригінал" baseline
   on the left, and the hint's last line rides that same line (per the comp). */
@media (min-width: 769px) {
  .orlyk-reader__head .orlyk-reader__stamp { padding-top: 42px; }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────
   Calm the transitions for motion-sensitive users. The wheel scroll-jacking is
   disabled in reader.js under the same media query (falls back to native scroll). */
@media (prefers-reduced-motion: reduce) {
  .orlyk-reader__drawer,
  .orlyk-reader__overlay,
  .orlyk-reader__zone,
  .orlyk-reader__nav,
  .orlyk-seg__btn,
  .orlyk-reader__dot,
  .orlyk-reader__pdf,
  .orlyk-reader__pdf-h,
  .orlyk-reader__drawer-close {
    transition-duration: 0.01ms !important;
  }
}

/* ===== components/outro.css ===== */
/* ─── Final screen — звернення Орлика (16:9 presentation video) ────────────
   A centred closing screen: eyebrow + title, the presentation video (16:9, same
   blurred-glow language as Screen 2's avatar), a short closing line, the PDF
   button and the initiator logos. Native scroll (NOT pinned) — it's the finale,
   so the page just ends here. The video reuses the .orlyk-video player; only the
   aspect changes (--wide). */
.orlyk-outro {
  position: relative;
  z-index: 1;
  isolation: isolate;
  --ot-margin: clamp(40px, calc(40px + (100vw - 1067px) * 0.1072), 80px);
}
.orlyk-outro__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding: clamp(72px, 13vh, 128px) var(--ot-margin);
  text-align: center;
}

/* ── Heading ── */
.orlyk-outro__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 900px;
}
.orlyk-outro__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 0.98;          /* the two lines sit close together */
  color: var(--ink-100, #fff);
}
.orlyk-outro__title-g { color: var(--c-gold); }   /* second line gold (no italic) */

/* ── Video stage — wide 16:9 with the same blurred glow as Screen 2 ── */
.orlyk-outro__stage {
  position: relative;
  width: min(100%, 920px);
}
.orlyk-outro__glow {
  position: absolute;
  z-index: -1;
  inset: -6% -8%;
  border-radius: 24px;
  background: url("../assets/video/orlyk-outro-poster.jpg") center / cover no-repeat;
  filter: blur(150px) brightness(0.55) saturate(0.9);
  opacity: 0.8;
  pointer-events: none;
}
.orlyk-video--wide {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ── Closing line ── */
.orlyk-outro__text {
  margin: 0;
  max-width: 640px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.7;
  color: rgb(255 255 255 / 0.66);
}

/* ── PDF button (reuses .orlyk-reader__pdf-h; the flex column centres it) ── */
.orlyk-outro__pdf { align-self: center; }

/* ── Initiator logos ── */
.orlyk-outro__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.orlyk-outro__logos-label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.orlyk-outro__logo-list {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orlyk-outro__logo-list img {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .orlyk-outro { --ot-margin: 20px; }                 /* match the other screens' mobile margin */
  .orlyk-outro__inner { padding-block: clamp(48px, 8vh, 80px); }
  .orlyk-outro__stage { width: 100%; }
  /* outro stays 16:9 on mobile too — the final presentation video has no vertical cut */
  /* the long «Завантажити Конституцію PDF» pill must fit a narrow phone */
  .orlyk-outro__pdf { font-size: 11px; letter-spacing: 0.08em; padding: 9px 14px; gap: 8px; max-width: 100%; }
  .orlyk-outro__pdf .orlyk-ic { width: 20px; height: 20px; }
  .orlyk-outro__logo-list { flex-direction: column; gap: 20px; }
}