/* ==========================================================================
   Piepildi vēlēšanos — design comp v02 (work in progress; v01 frozen in versions/v01)
   Responsive: 1200px content on desktop, fluid below it, one column on phones (RESPONSIVE at the end).
   Light palettes only — no black: every colour comes from the palette tokens below.
   Motion: scroll reveals + count-ups + idle drift (see MOTION at the end), the "Ziedot" pulse and the rowing boat.
   ========================================================================== */

/* ==========================================================================
   COLOURS — "Kraft papīrs": kraft paper, white, light grey, warm charcoal + coffee brown.
   (The other palettes compared in v02 are kept in archive/palettes.css.)
     --paper / --grey-*  surfaces + warm neutral scale (--grey-100 = light-grey band)
     --ink               text and drawings (warm charcoal, not black)
     --tint              kraft-paper colour field (about, calendar, CTA, footer)
     --accent            buttons, progress, highlighted words, logos (white text on it ≈ 5:1)
     --accent-soft       pale kraft wash (done cards, donate cell)
     --sun               stars, moon, small highlights
     --cta               third accent for donating: "Ziedot" buttons, donate amounts, phone line
                         (Terakota)
   ========================================================================== */
:root {
  --paper: #FFFFFF;
  --grey-50: #F7F6F4;  --grey-100: #EEECE8; --grey-200: #E0DCD5; --grey-300: #C9C1B5; --grey-400: #A0968A;
  --grey-500: #6F665C; --grey-600: #5A5149; --grey-700: #433C36; --grey-800: #2F2A26; --grey-900: #221E1B;
  --ink: #231F1C;
  --tint: #E4D6C1;
  --accent: #8A6542;  --accent-soft: #F1E8DA;
  --sun: #B38E62;
  --cta: #C65A35;
}

:root {
  /* ---- Derived from the palette (don't edit per palette) -------------------- */
  --on-accent: #FFFFFF;
  --on-cta: #FFFFFF;                                  /* text on --cta (the picker switches it to --ink on light colours) */
  --art: var(--ink);
  --art-soft: var(--grey-300);
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --track: color-mix(in srgb, var(--ink) 10%, transparent);

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out: entrances */
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);       /* easeInOutSine: gentle idle loops */
  --reveal-dur: 900ms;
  --reveal-step: 70ms;                                /* stagger between siblings */

  /* ---- Type --------------------------------------------------------------- */
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto Condensed", "Roboto", "Arial Narrow", sans-serif;   /* biggest titles only */

  /* ---- Layout ------------------------------------------------------------- */
  --wrap: 1200px;
  --side: 40px;                                       /* smallest side margin around .wrap */
  --gutter: 24px;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --r-xl: 40px;
  --sec-pad: 128px;
  --header-h: 128px;
}

/* ---- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }   /* #anchors land below the sticky header */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Art (js/art.js): every drawing is inline SVG filled with currentColor → follows the palette */
.art { display: block; line-height: 0; color: var(--art); }
.art svg { display: block; width: 100%; height: auto; fill: currentColor; }
.scene { display: block; width: 100%; height: auto; color: var(--art); fill: currentColor; overflow: visible; }
.scene use { fill: currentColor; }
.c-sun { color: var(--sun); }
.c-accent { color: var(--accent); }
/* Doodles: small hand-drawn accents, absolutely placed inside a section's .wrap */
.doodle { position: absolute; display: block; line-height: 0; pointer-events: none; color: var(--art); z-index: 1; }
.doodle svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.doodle--ink { color: var(--art); }
.doodle--sun { color: var(--sun); }
.doodle--accent { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--side)); margin: 0 auto; position: relative; }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }

/* ---- Sections ------------------------------------------------------------- */
.sec { padding: var(--sec-pad) 0; position: relative; }
.sec--tight { padding: 88px 0; }
.sec--feature { background: var(--tint); --grey-500: var(--grey-600); }   /* light colour field; small grey text stays ≥ 4.5:1 */
.sec--band { background: var(--grey-100); }
.dim { color: var(--grey-500); }

/* ---- Type ----------------------------------------------------------------- */
/* Tracking tightens as size grows; small caps labels open up. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
}
.eyebrow b { font-weight: 500; color: var(--grey-500); }
.eyebrow i { width: 28px; height: 1px; background: currentColor; opacity: .5; }

.label {
  font: 500 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500);
}

.h2 { font: 800 84px/1 var(--font-display); letter-spacing: -.012em; text-wrap: balance; }
.h3 { font: 700 28px/1.2 var(--font); letter-spacing: -.02em; }
.lead { font: 400 22px/1.5 var(--font); letter-spacing: -.01em; }

.sec-head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: end; margin-bottom: 80px;
}
.sec-head__title { grid-column: 1 / 8; }
.sec-head--wide .sec-head__title { grid-column: 1 / 13; }   /* headers without side text */
.sec-head__title .eyebrow { margin-bottom: 28px; }
.sec-head__aside { grid-column: 9 / 13; color: var(--grey-600); font-size: 18px; line-height: 1.55; padding-bottom: 10px; }
.sec-head__lead { margin-top: 28px; max-width: 640px; font-size: 20px; line-height: 1.5; color: var(--grey-600); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 500 16px/1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }                 /* feedback on press, instant */
.btn--lg { height: 64px; padding: 0 34px; font-size: 18px; }
.btn--sm { height: 44px; padding: 0 22px; font-size: 15px; }
.btn--accent { background: var(--cta); color: var(--on-cta); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.btn--accent:hover { filter: brightness(1.08); }

/* ---- "Ziedot" pulse — the one looping motion on the page -------------------
   Gentle breathe (scale 1 → 1.035) + a soft ring that fades out, ~0.4 Hz.
   Uses the independent `scale` property so the instant :active press still works.
   Pauses while hovered/focused so the target holds still; off for reduced motion. */
.btn--pulse { animation: ziedot-pulse 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.btn--pulse:hover, .btn--pulse:focus-visible { animation-play-state: paused; }
@keyframes ziedot-pulse {
  0%   { scale: 1;     box-shadow: 0 0 0 0    color-mix(in srgb, var(--cta) 45%, transparent); }
  45%  { scale: 1.035; }
  70%  {               box-shadow: 0 0 0 14px color-mix(in srgb, var(--cta) 0%, transparent); }
  100% { scale: 1;     box-shadow: 0 0 0 0    color-mix(in srgb, var(--cta) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
}

.btn--ink { background: var(--ink); color: #fff; transition: background-color 200ms ease; }
/* hover: coffee brown — also when the pointer is anywhere on its story card, together with the title */
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover, .tone-zone:hover .btn--ink { background: var(--accent); }
}
.btn--line { border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); background: transparent; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn--line:hover { background: var(--accent); border-color: var(--accent); color: #fff; }   /* fills coffee brown, like the chips */
}

.chip {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; font: 500 14px/1 var(--font);
  text-decoration: none; cursor: pointer;
}
.chip { transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; }
/* hover: every chip fills coffee brown with white text */
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .chip.is-active:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
.chip:active { transform: scale(.97); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.stories [hidden] { display: none; }                 /* story filter (js/site.js) — beats .story-lead's grid */

/* ---- placeholder note: links with no page yet say so instead of jumping (js/site.js) ----
   Enters and leaves the same way (up + fade / down + fade), 200 ms; re-clicks just retarget. */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60; translate: -50% 12px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 14%, transparent);
  font: 500 15px/1.3 var(--font);
  transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out);
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.toast.is-on { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .toast { translate: -50% 0; } }

/* podcast video (js/data.js): a <dialog> over a dark backdrop, 16:9, close button above the right corner */
.video-modal { width: min(960px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.video-modal::backdrop { background: rgb(20 18 16 / .86); }
.video-modal__frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-m); overflow: hidden; }
.video-modal__frame iframe, .video-modal__frame video { display: block; width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); font: 400 28px/1 var(--font); cursor: pointer;
}
.video-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Header — translucent material, content scrolls underneath
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.site-header__in { display: flex; align-items: center; gap: 48px; }
.site-header__brands { display: flex; align-items: center; gap: 48px; transform-origin: left center; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 28px; transform-origin: right center; }
/* Compact on scroll (js/motion.js toggles .is-compact): the bar slides up 20% (128 → 102 px visible) and
   logos + button scale to 80%. Transforms only, so the page under it never shifts. */
.site-header, .site-header__in { transition: translate 450ms var(--ease-out); }
.site-header__brands { transition: scale 450ms var(--ease-out); }
.site-header__actions { transition: scale 450ms var(--ease-out); }
.site-header.is-compact { translate: 0 calc(var(--header-h) * -0.2); }
.site-header.is-compact .site-header__in { translate: 0 calc(var(--header-h) * 0.1); }   /* re-centre in the visible bar */
.site-header.is-compact .site-header__brands { scale: .8; }
.site-header.is-compact .site-header__actions { scale: .8; }
.brand-tvnet .art { width: 214px; color: var(--ink); }   /* 51px tall */

/* Donation phone line next to "Ziedot" */
.phone { margin: 0; display: grid; justify-items: end; gap: 5px; text-align: right; white-space: nowrap; }
.phone__label { font: 600 14px/1 var(--font); color: var(--cta); }
.phone__num { font: 800 30px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; text-decoration: none; }
.phone__num:hover { color: var(--cta); }
.phone__note { font: 400 12px/1 var(--font); color: var(--grey-500); }
.phone--hero { display: none; }                      /* phones only (RESPONSIVE) */

/* Piepildi vēlēšanos logo — hourglass + "PAR MĀJU" in --accent, wordmark in --ink (follows the palette) */
.pv-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.pv-logo svg { display: block; height: 48px; width: auto; fill: currentColor; }
.pv-logo svg > use { fill: currentColor; }   /* not the mask's shapes */
.site-header .pv-logo svg { height: 76px; }   /* ≈ 193px wide */

/* Section menu (js/site.js). The ☰ button sits after "Ziedot" but takes no room until the header turns compact:
   then it widens in (Ziedot slides left) on the header's own 450ms curve. Its menu drops from under the header,
   right-aligned with the content (full width on phones), and turns the ☰ into an ✕. */
.site-header__actions { --act-gap: 28px; gap: var(--act-gap); }
.menu-btn {
  flex: none; position: relative; width: 0; height: 48px; margin-left: calc(var(--act-gap) * -1); padding: 0;
  border: 0; border-radius: var(--r-s); background: none; color: var(--accent); cursor: pointer;
  opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent;
  transition: width 450ms var(--ease-out), margin-left 450ms var(--ease-out), opacity 250ms ease, visibility 0s 450ms;
}
.site-header.is-compact .menu-btn {
  width: 48px; margin-left: 0; opacity: 1; visibility: visible;
  transition: width 450ms var(--ease-out), margin-left 450ms var(--ease-out), opacity 250ms ease 100ms, visibility 0s;
}
.menu-btn span {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 4px; margin: -2px 0 0 -17px; border-radius: 2px;
  background: currentColor; transition: translate 200ms var(--ease-out), rotate 200ms var(--ease-out), opacity 150ms ease;
}
.menu-btn span:nth-child(1) { translate: 0 -11px; }
.menu-btn span:nth-child(3) { translate: 0 11px; }
.menu-open .menu-btn span:nth-child(1) { translate: 0 0; rotate: 45deg; }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { translate: 0 0; rotate: -45deg; }
.menu-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover { color: var(--ink); }
}

.site-menu {
  position: absolute; top: calc(100% + 8px); right: max(var(--side), (100% - var(--wrap)) / 2); width: 320px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper);
  box-shadow: 0 18px 48px rgba(35, 31, 28, .14);
  transform-origin: top right; opacity: 0; scale: .97; translate: 0 -6px; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, scale 180ms var(--ease-out), translate 180ms var(--ease-out), visibility 0s 180ms;
}
.menu-open .site-menu {
  opacity: 1; scale: 1; translate: 0 0; visibility: visible; pointer-events: auto;
  transition: opacity 220ms var(--ease-out), scale 220ms var(--ease-out), translate 220ms var(--ease-out), visibility 0s;
}
.site-menu ul { margin: 0; padding: 0; list-style: none; }
.site-menu a {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-s);
  font: 500 14px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.site-menu a b { flex: none; width: 20px; font-weight: 500; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.site-menu a[aria-current] { color: var(--accent); }
.site-menu a[aria-current] b { color: var(--accent); }
.site-menu a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .site-menu a:hover { background: var(--accent-soft); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn, .site-header.is-compact .menu-btn { transition: opacity 200ms ease, visibility 0s; }
  .site-menu, .menu-open .site-menu { scale: 1; translate: 0 0; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { background: var(--paper); border-bottom-color: var(--ink); }
}

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.hero { --hero-bg: color-mix(in srgb, var(--tint) 12%, var(--paper)); padding-top: 146px; padding-bottom: 112px; background: var(--hero-bg); }   /* barely-there cream (Kraft ≈ #FCFAF8); follows the palette */
/* previous: soft tint fade → background: linear-gradient(180deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 45%, var(--paper)) 100%); */
.hero__top { position: relative; display: grid; grid-template-columns: 170px 1fr; column-gap: 176px; align-items: stretch; }   /* wide gap: the oars reach far past the boat slot */
/* Rowing boat, bow up — a looping video (assets/boat_anim/boat-row_03.mp4, 60 fps, 1080 × 1474, black ink on white).
   The slot stretches to the text block (title + lead); the hull is 1.4× that height (140cqh) and centred,
   so it reaches a little above the title and below the lead, whatever the copy. In the video the hull is
   1420 px of the 1474 px frame and sits 32 px right of centre → the frame is 145.3cqh tall, nudged to match.
   Two blend layers over the video tint it to the palette: black ink → --art (screen), white → the hero's cream
   (multiply). Isolated, so it works inside the fade-in too. */
.hero__boat { position: relative; container-type: size; }
.boat-video {
  position: absolute; left: 50%; top: 50%; height: 145.3cqh; aspect-ratio: 1080 / 1474;
  transform: translate(calc(-50% + 1.3cqh), calc(-50% + .5cqh)); isolation: isolate; pointer-events: none;
}
/* layers, bottom → top: the water (cream + black marks flowing past) · the video, multiplied (white shows the
   water, ink stays ink). The ink stays the video's own black — tinting it to --art with a screen layer drew a thin
   dark line along the group's soft outer edge. */
/* the boat: the video itself is multiplied onto the water (a blend on a wrapper around it gets skipped — the browser
   then draws the video as a solid layer over the water). It surges with the strokes (js/motion.js), and trims 2px
   of its own edge: browsers blend a sliver of dark into a scaled video's outermost pixels (a faint frame). */
.boat-video video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; mix-blend-mode: multiply; clip-path: inset(2px); }

/* water flowing past the boat, bow → stern — just enough to feel it moving: two ripples and one fish (never more
   than three marks, never two fish), each taking turns between a lane left and right of the hull (--l / --r, in the
   frame beside the hull, which spans 37–70% of it) on unrelated cycles. Positions count from the water's top edge,
   64 px (≈21cqh) above the frame; the water also reaches 40 px (≈13cqh) below it — no further: the Airē māju logo
   starts ≈50 px below. A mark never touches either edge while it's visible: it appears inside the water, fades in
   above the bow, stays solid down past the stern tip (≈163cqh) and is gone before the bottom edge (≈179cqh). */
.boat-water { position: absolute; inset: -64px 0 -40px; z-index: 0; overflow: hidden; background: var(--hero-bg); }
.boat-water svg {
  position: absolute; top: 0; left: 0; width: var(--w); height: auto; overflow: visible; fill: #000;
  opacity: 0; animation: stream var(--dur) linear var(--delay) infinite;
}
.boat-water .flip { scale: -1 1; }
@keyframes stream {                     /* a pass down the left lane, a pause, a pass down the right lane, a pause */
  0%           { translate: var(--l) 2cqh; opacity: 0; }     /* each pass: 2 → 169cqh (the mark's top edge) */
  3.3%, 36%    { opacity: 1; }                               /* solid from ≈16cqh (above the bow) to ≈156cqh */
  39%          { translate: var(--l) 169cqh; opacity: 0; }   /* gone with its bottom ≈177cqh, inside the water */
  39.1%, 50%   { translate: var(--r) 2cqh; opacity: 0; }
  53.3%, 86%   { opacity: 1; }
  89%, 100%    { translate: var(--r) 169cqh; opacity: 0; }
}
@keyframes drift-by { 0% { translate: 100cqw 0; } 72%, 100% { translate: calc(-100% - 4px) 0; } }   /* a pass, then a pause off-screen */
@media (prefers-reduced-motion: reduce) {
  .cta__water svg { animation: none; translate: var(--x) 0; }
  .boat-water svg { animation: none; opacity: 1; translate: var(--l) 40cqh; }
  .boat-water .flip { translate: var(--r) 100cqh; }
}
.hero__title {
  margin: 0; max-width: 1140px;
  font: 700 62px/1.06 var(--font); letter-spacing: -.035em;
}
/* Variant: hero title in the section-title font (remove class .hero__title--display to go back to Roboto) */
.hero__title--display { font: 800 80px/1 var(--font-display); letter-spacing: -.012em; text-wrap: balance; }
[data-titles="upper"] .hero__title--display { text-transform: uppercase; font-size: 60px; line-height: 1.15; letter-spacing: -.015em; }   /* 60px = 3 lines; 1.15 so Ņ's cedilla clears Ī's macron on the next line */
/* Lead under the title; line break before the highlighted phrase is fixed with <br> */
.hero__lead { margin-top: 16px; font: 400 30px/1.36 var(--font); letter-spacing: -.017em; color: var(--grey-700); }
.hero__lead em { font-style: normal; color: var(--accent); }

/* Airē māju block — part of the hero itself (no card). Big hand-drawn logo + line from the page's left
   edge, the drawing on the right; the row starts where the boat above ends. */
.brand-panel {
  position: relative; margin-top: 66px;
  display: grid; grid-template-columns: 1fr 514px; column-gap: var(--gutter); align-items: center;
}
.brand-panel__text { grid-column: 1; }
.brand-panel__logo { width: 560px; margin: 0 0 28px; color: var(--accent); }   /* coffee brown in Kraft */
.brand-panel__desc { max-width: 560px; font-size: 20px; line-height: 1.55; color: var(--grey-600); }
.brand-panel__desc + .brand-panel__desc { margin-top: 16px; font-size: 17px; }
.brand-panel__art { grid-column: 2; position: relative; margin-right: 24px; }
.brand-panel__art .scene { width: 490px; }

.meter { margin-top: 44px; max-width: 440px; }
.meter__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.meter__val { font: 900 40px/1 var(--font); letter-spacing: -.04em; }
.meter__goal { font: 500 14px/1 var(--font); color: var(--grey-500); }
.meter__bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: 99px; }

/* ==========================================================================
   02 — Ceļš līdz mājām (draggable route)
   ========================================================================== */
.road .sec-head { margin-bottom: 16px; }            /* chart sits close under the lead text */
.road__canvas { position: relative; }
.road__svg { --ms-step: 16; width: 100%; height: auto; display: block; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.road__handle { touch-action: none; }                /* touch: only the boat drags (js/road.js); elsewhere the page scrolls */
.road__hint { display: none; }
.road__svg text { font-family: var(--font); }
.road__svg .ms-name { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.road__svg .ms-amt { font-size: 13px; font-weight: 400; fill: var(--grey-600); }
.road__svg .ms-halo { stroke: var(--grey-100); stroke-width: 7px; paint-order: stroke; stroke-linejoin: round; }
.road__svg .ax-amt { font-size: 12px; font-weight: 500; fill: var(--grey-600); }
.road__svg .ax-km { font-size: 11px; font-weight: 400; fill: var(--grey-500); }
.road__svg .tip-text { font-size: 15px; font-weight: 700; fill: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.road__svg .tip-chev { font-size: 20px; font-weight: 400; fill: rgba(255, 255, 255, .6); }
.road__svg .now-text { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; fill: var(--on-accent); }
.road__svg .end-name { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.road__svg .end-amt { font-size: 22px; font-weight: 900; letter-spacing: -.03em; fill: var(--ink); }
.road__handle { cursor: grab; outline: none; }
.road__handle:active { cursor: grabbing; }
.road__handle:focus-visible .road__focus { opacity: 1; }
.road__handle[data-pointer] .road__focus { opacity: 0; }
.road__focus { opacity: 0; fill: none; stroke: var(--accent); stroke-width: 3; pointer-events: all; }   /* also the boat's grab area */

.readout {
  margin-top: 38px; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr;
  background: var(--paper); border-radius: var(--r-l); border: 1px solid var(--line);
}
.readout__cell { padding: 36px 36px 34px; border-right: 1px solid var(--line); min-width: 0; }
.readout__cell:last-child { border-right: 0; }
.readout__big { margin-top: 14px; font: 900 44px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout__big svg { display: inline-block; width: 36px; height: 36px; vertical-align: -5px; margin-left: 6px; color: var(--ink); }
.readout__big--text { font-size: 30px; letter-spacing: -.035em; line-height: 1.05; min-height: 44px; display: flex; align-items: flex-end; white-space: normal; }
.readout__sub { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--grey-600); font-variant-numeric: tabular-nums; }
/* "incl. Kārlis's family's donation" — the dot matches that stretch of the route (--sun) */
.readout__sub--family { margin-top: 6px; }
.readout__sub--family::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sun); vertical-align: 1px; }
.readout__sub--family b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.readout__cell--cta { background: var(--accent); border-radius: var(--r-l) 0 0 var(--r-l); border-right-color: transparent; }   /* coffee brown */
.readout__cell--cta .label { color: var(--on-accent); }
.readout__cell--cta .donate a { border-color: transparent; }
.donate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.donate a {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.donate a b { font: 900 22px/1 var(--font); letter-spacing: -.03em; color: var(--cta); }
.donate a span { font: 400 12px/1.2 var(--font); color: var(--grey-600); }
.donate a:hover { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.donate a:hover b, .donate a:hover span { color: var(--on-cta); }
.donate a:active { transform: scale(.97); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: 500 14px/1 var(--font); text-decoration: underline; text-underline-offset: 4px; color: var(--grey-600); }
.linkbtn:hover { color: var(--ink); }

/* ==========================================================================
   03 — Stāsti
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.ph {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-m); color: var(--grey-600);
  background: linear-gradient(160deg, var(--grey-100), var(--grey-200));
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px));
}
.ph__tag {
  position: absolute; left: 16px; bottom: 14px; padding: 6px 9px; border-radius: 6px;
  font: 500 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--grey-700);
}
.play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
.play svg { width: 22px; height: 22px; margin-left: 3px; }
.badge {
  position: absolute; left: 16px; top: 16px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 99px; background: var(--ink); color: #fff; font: 500 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
}
.badge--new { background: var(--paper); color: var(--ink); }   /* light chip — reads on the brown-toned photos */

.story { display: block; }
.story__media { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-m); }
.story__meta { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font: 500 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500); }
.story__meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.story__meta .src { color: var(--ink); }
.story__title { font: 700 23px/1.22 var(--font); letter-spacing: -.022em; }
.story__title a { text-decoration: none; transition: color 200ms ease; }
/* hover: the title turns coffee brown (no underline) — anywhere on the card, like the photo turning to colour */
@media (hover: hover) and (pointer: fine) {
  .story__title a:hover, .tone-zone:hover .story__title a { color: var(--accent); }
}
.story__excerpt { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--grey-600); }

.story-lead { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; margin-bottom: 80px; }
.story-lead .story__media { grid-column: 1 / 8; aspect-ratio: 16 / 10; border-radius: var(--r-l); }
.story-lead__body { grid-column: 8 / 13; padding-left: 40px; }   /* ≈64px from the photo, like Par projektu */
.story-lead__body .story__meta { margin-top: 0; }
.story-lead .story__title { font-size: 42px; line-height: 1.08; letter-spacing: -.035em; }
.story-lead .story__excerpt { font-size: 18px; margin-top: 20px; }
.story-lead .btn { margin-top: 32px; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px var(--gutter); }
.stories__more { position: relative; display: flex; justify-content: center; margin-top: 80px; }

/* ==========================================================================
   04 — Par projektu
   ========================================================================== */
.about__statement { margin-top: 36px; max-width: 1080px; font: 700 52px/1.1 var(--font); letter-spacing: -.035em; }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); margin-top: 88px; align-items: start; }
.about__figure { grid-column: 1 / 7; margin: 0; }
.about__media { aspect-ratio: 4 / 3; border-radius: var(--r-l); }   /* photo pre-cropped to 4:3 around the people */

/* Photo tone — the photo in the page's own shades (white → cream → brown → dark, SVG filter #tone-kraft
   in index.html) laid over the colour original; hovering the photo — or the whole .tone-zone around it
   (e.g. photo + text) — fades the tone away to full colour. */
.tone { position: relative; overflow: hidden; }
.tone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tone__map { position: absolute; inset: 0; filter: url(#tone-kraft); transition: opacity 450ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tone:hover .tone__map, .tone-zone:hover .tone__map { opacity: 0; }
}
/* photo swap — a second photo (.tone__next) fades in over the first and back out, on a slow loop:
   first photo 40% · crossfade 10% · second photo 40% · crossfade 10% (14 s). Keeps going while the pointer is over
   the block (in colour too); doesn't run with reduced motion (the first photo stays). The house photo is 16:10,
   cropped to the 4:3 frame a little right of centre, so the whole house stays in. */
.tone__next { position: absolute; inset: 0; opacity: 0; animation: photo-swap 14s ease-in-out infinite; }
.tone__next img { object-position: 72% 50%; }
@keyframes photo-swap { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes photo-swap-out { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
/* the credit swaps with the photo: both captions in one spot, on the same 14 s clock */
.about__figure figcaption { display: grid; }
.about__figure figcaption > span { grid-area: 1 / 1; animation: photo-swap-out 14s ease-in-out infinite; }
.about__figure figcaption > .cap-next { animation-name: photo-swap; opacity: 0; }
/* slow zoom (Ken Burns): each photo drifts in by 6% while it's on screen (fade-in + hold + fade-out, 60% of the
   cycle, linear), and snaps back to 100% only while the other photo fully covers it — the jump is never seen.
   First photo: on 90% → 50% of the next cycle; second photo: on 40% → 100%. */
.about__media > img { animation: photo-zoom-a 14s linear infinite; }
.tone__next img     { animation: photo-zoom-b 14s linear infinite; }
@keyframes photo-zoom-a { 0% { scale: 1.01; } 50% { scale: 1.06; } 50.1%, 90% { scale: 1; } 100% { scale: 1.01; } }
@keyframes photo-zoom-b { 0%, 40% { scale: 1; } 100% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) {
  .tone__next, .about__media img, .about__figure figcaption > span { animation: none; }
}
.about__figure figcaption { margin-top: 12px; font-size: 13px; color: var(--grey-500); }
.about__body { grid-column: 7 / 13; padding-left: 40px; display: grid; gap: 22px; font-size: 18px; line-height: 1.65; color: var(--grey-600); }
.about__body p:first-child { font-size: 22px; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.about__motto { font: 700 26px/1.25 var(--font); letter-spacing: -.025em; color: var(--accent); }

/* "Lasīt vairāk" — native <details>; the plus turns into a close cross, the text fades up */
.more summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font: 600 15px/1 var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 6px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary svg { width: 18px; height: 18px; transition: rotate 200ms var(--ease-out); }
.more[open] summary svg { rotate: 45deg; }
.more__close, .more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }
.more__body { display: grid; gap: 18px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.more[open] .more__body { animation: more-in 320ms var(--ease-out); }
@keyframes more-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) {
  .more summary svg { transition: none; }
  .more[open] .more__body { animation-name: more-fade; }
  @keyframes more-fade { from { opacity: 0; } }
}

/* ==========================================================================
   05 — TVNET GRUPA row / logo tiles
   ========================================================================== */
.group__label { text-align: center; }
/* a faint line across the content width marks the start of the group row (the section's top padding moves inside) */
.group { padding-top: 0; }
.group .wrap { padding-top: 88px; border-top: 1px solid var(--line); }
.logo-grid { display: grid; gap: 16px; margin-top: 36px; }
/* Group brands — no frames; one shared baseline, sizes balanced optically (see the note in index.html).
   Change --cap to scale the whole row. */
.brand-row {
  --cap: 18px;
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 44px 0 0; padding: 0 24px calc(var(--cap) * .8); list-style: none;
}
.brand { display: block; margin-bottom: calc(var(--kd, 0) * var(--cap) * -1); color: var(--ink); transition: color 200ms ease; }
.brand .art { color: inherit; }
.brand .art svg { width: auto; height: calc(var(--k) * var(--cap)); }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { color: var(--accent); }
}
.logo-grid--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.logo-tile {
  position: relative; display: grid; place-items: center; height: 120px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--paper); text-decoration: none;
}
.logo-tile .art { width: 168px; }
.logo-tile__logo { display: block; width: auto; height: auto; max-width: 72%; max-height: 64px; }   /* partner logo from js/data.js */
.logo-tile__ph { text-align: center; color: var(--grey-500); }
.logo-tile__ph b { display: block; font: 700 22px/1 var(--font); letter-spacing: -.03em; color: var(--grey-600); }
.logo-tile__ph small { display: block; margin-top: 8px; font: 500 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
a.logo-tile { text-decoration: none; transition: border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { a.logo-tile:hover { border-color: var(--ink); } }
.logo-tile--cta { border-style: dashed; border-color: var(--grey-300); color: var(--ink); background: transparent; }
.logo-tile--cta b { font: 500 16px/1.2 var(--font); letter-spacing: -.01em; display: inline-flex; gap: 8px; align-items: center; color: var(--ink); }
.logo-tile--cta svg { width: 18px; height: 18px; }
.logo-tile--cta:hover { border-color: var(--ink); border-style: solid; }

/* ==========================================================================
   06 — Mūsu darbi / plāni
   ========================================================================== */
.plan__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.plan__goal { grid-column: 1 / 6; position: relative; }   /* scrolls with the budget table (no sticky); relative = anchors its drawings under the meter */
.plan__goal .plan__big { max-width: none; color: var(--ink); margin: 18px 0 24px; font: 900 112px/.95 var(--font); letter-spacing: -.06em; }
.plan__goal .plan__big .cur { font-size: .6em; letter-spacing: -.04em; margin-left: .04em; }
.plan__goal p { max-width: 420px; color: var(--grey-600); font-size: 18px; line-height: 1.6; }
.plan__goal .meter { margin-top: 40px; }
.plan__goal .meter__val { font-size: 32px; }

.plan__split { grid-column: 7 / 13; }
.plan__split-label { margin-bottom: 18px; }
.ladder { border-top: 1.5px solid var(--ink); }
.ladder__row {
  display: grid; grid-template-columns: 44px 1fr auto; column-gap: 16px; align-items: start;
  padding: 28px 0 26px; border-bottom: 1px solid var(--line);
}
.ladder__n { font: 500 14px/1.6 var(--font); color: var(--grey-500); font-variant-numeric: tabular-nums; }
.ladder__name { font: 700 26px/1.15 var(--font); letter-spacing: -.028em; }
.ladder__sub { margin-top: 6px; font-size: 15px; color: var(--grey-600); }
.ladder__amt { text-align: right; font: 700 22px/1.15 var(--font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ladder__state { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; font: 500 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-500); }
.ladder__state svg { width: 16px; height: 16px; }
.ladder__bar { grid-column: 2 / 4; margin-top: 18px; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.ladder__bar i { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: 99px; }   /* brown, like the progress bar (.meter) */
.ladder__row.is-now .ladder__bar i { background: var(--accent); }
.ladder__row.is-now .ladder__state { color: var(--ink); }
.ladder__row.is-now .ladder__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ladder__row.is-done .ladder__state { color: var(--ink); }
.ladder__row.is-wait .ladder__name, .ladder__row.is-wait .ladder__amt { color: var(--grey-500); }
.ladder__row--final .ladder__name { font-size: 30px; }
.ladder__row--final .ladder__amt { font-size: 26px; }
.plan__fine { margin-top: 22px; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--grey-600); }
.plan__fine + .plan__fine { margin-top: 10px; }

.steps { margin-top: 120px; }
.steps__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 36px; }
.steps__head .h3 { font: 800 44px/1.05 var(--font-display); letter-spacing: -.008em; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.step { position: relative; padding: 32px; min-height: 280px; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__n { font: 500 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.step__state { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 99px; font: 500 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); color: var(--grey-600); }
.step__state svg { width: 14px; height: 14px; }
.step__amt { margin-top: 36px; font: 900 56px/1 var(--font); letter-spacing: -.055em; }
.step__km { margin-top: 8px; font-size: 16px; color: var(--grey-600); }
.step__txt { margin-top: auto; padding-top: 28px; font-size: 15px; line-height: 1.5; color: var(--grey-600); }
.step--done { background: var(--accent-soft); border-color: transparent; }
.step--done .step__state { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step--now .step__state { border-color: var(--ink); color: var(--ink); }
.step--now .meter__bar { margin-top: 24px; }
.step--next { background: transparent; border-style: dashed; border-color: var(--grey-300); }

/* ==========================================================================
   07 — Kalendārs
   ========================================================================== */
.calendar { overflow: hidden; }
.events { border-top: 1px solid var(--line); }
.event {
  display: grid; grid-template-columns: 150px 1fr 220px 150px 56px; column-gap: var(--gutter); align-items: center;
  padding: 36px 0; border-bottom: 1px solid var(--line);
}
.event__date { display: flex; align-items: baseline; gap: 10px; }
.event__date b { font: 900 84px/.9 var(--font); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.event__date span { font: 500 14px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-500); }
.event__main h3 { font: 700 30px/1.15 var(--font); letter-spacing: -.03em; }
.event__main p { margin-top: 8px; font-size: 16px; color: var(--grey-600); max-width: 460px; }
.event__when { font: 500 17px/1.4 var(--font); }
.event__when span { display: block; font-weight: 400; font-size: 14px; color: var(--grey-500); margin-top: 2px; }
.tag { justify-self: start; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 99px; border: 1px solid var(--line); font: 500 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-700); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.round {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink); background: var(--paper);
}
.round svg { width: 22px; height: 22px; }
.round:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.round:active { transform: scale(.94); }
.event--empty { opacity: .6; border-bottom-style: dashed; }
.event--empty .event__date b { color: var(--grey-300); }

/* ==========================================================================
   08 — Partneri
   ========================================================================== */
.partners__note { margin-top: 28px; font-size: 14px; color: var(--grey-500); }

/* ==========================================================================
   Closing CTA + footer
   ========================================================================== */
.cta { position: relative; overflow: hidden; padding: 144px 0 136px; }
.cta__title { max-width: 980px; font: 800 120px/.96 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
/* Accent highlight: wrap words in <em> inside any big title/statement */
.cta__title em, .h2 em, .hero__title em, .about__statement em { font-style: normal; color: var(--accent); }

/* ---- Uppercase title variant: <html data-titles="upper"> -------------------
   Caps sit taller and have no descenders → slightly smaller size, tighter leading,
   tracking tightened a touch for a denser, poster-like block. Remove the attribute to go back. */
[data-titles="upper"] .h2 { text-transform: uppercase; font-size: 76px; line-height: .96; letter-spacing: -.022em; }
[data-titles="upper"] .steps__head .h3 { text-transform: uppercase; font-size: 40px; line-height: 1; letter-spacing: -.012em; }
[data-titles="upper"] .cta__title { text-transform: uppercase; font-size: 76px; line-height: .96; letter-spacing: -.022em; }   /* same as the section titles (.h2) */
.cta__row { display: flex; flex-direction: column; align-items: flex-start; gap: 44px; margin-top: 60px; }   /* button, then the note under it */
.cta__note { max-width: 640px; display: grid; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--grey-600); }
.cta__note a { color: var(--ink); text-underline-offset: 3px; }
/* Illustration centred on the text block (eyebrow → button row) */
.cta__art.scene { position: absolute; right: 0; top: 50%; width: 360px; transform: translateY(-50%); pointer-events: none; }
.cta__boat { display: none; }                         /* phones only (RESPONSIVE) */

.site-footer { background: var(--tint); color: var(--ink); padding: 0 0 56px; --grey-500: var(--grey-600); }
.site-footer__in { --logo-w: 126px; display: flex; align-items: center; gap: calc(var(--logo-w) * 48 / 214); padding-top: 40px; }
.site-footer__in .art { width: var(--logo-w); }   /* TVNET GRUPA width : PV logo height : gap = 214 : 76 : 48 */
.site-footer__in .pv-logo svg { height: calc(var(--logo-w) * 76 / 214); }
.site-footer__contacts { margin-left: auto; display: grid; justify-items: end; gap: 6px; font-size: 14px; color: var(--grey-600); }
.site-footer__contacts .label { margin-bottom: 4px; }
.site-footer__contacts a { color: var(--ink); text-decoration: none; }
.site-footer__contacts a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__copy { margin-top: 28px; font-size: 13px; color: var(--grey-500); }
@media (min-width: 1200px) {   /* desktop: the footer logos 1.4× bigger */
  .site-footer__in { --logo-w: 176px; }
}

/* ==========================================================================
   MOTION
   1) Reveal on scroll — elements with [data-reveal] start hidden only when <html class="motion">
      (set in <head>), and get .is-in once from js/motion.js. Uses the independent `translate` /
      `scale` properties so it never fights an element's own `transform`.
      [data-reveal]          fade + rise 28px
      [data-reveal="rise"]   titles: rise through an invisible baseline (clip-path)
      [data-reveal="scale"]  illustrations / photos: fade + settle from 96%
      [data-reveal="boat"]   hero boat: glides up from further below
      --i on an element (or set by [data-stagger] on its parent) = stagger step.
   2) Idle drift — doodles wander slightly in place forever, each on its own random rhythm; stars twinkle.
   3) Depth — doodles shift slightly with the scroll (parallax).
   Reduced motion: reveals become a short fade, nothing drifts or shifts, stars only fade a little.
   ========================================================================== */
.motion [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    translate var(--reveal-dur) var(--ease-out),
    scale var(--reveal-dur) var(--ease-out),
    clip-path calc(var(--reveal-dur) + 150ms) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}
.motion [data-reveal="rise"]  { translate: 0 0.6em; clip-path: inset(100% -6% -30% -6%); }
.motion [data-reveal="scale"] { translate: 0 16px; scale: 0.96; }
.motion [data-reveal="boat"]  { translate: 0 90px; }
.motion [data-reveal].is-in   { opacity: 1; translate: none; scale: none; }
.motion [data-reveal="rise"].is-in { clip-path: inset(-30% -6% -30% -6%); }

/* readout bar: the bar arrives as one solid piece; only the text in each cell follows, cell by cell */
.motion .readout .readout__cell > * { opacity: 0; translate: 0 10px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
.motion .readout.is-in .readout__cell > * { opacity: 1; translate: none; }
.motion .readout.is-in .readout__cell:nth-child(1) > * { transition-delay: 200ms; }
.motion .readout.is-in .readout__cell:nth-child(2) > * { transition-delay: 270ms; }
.motion .readout.is-in .readout__cell:nth-child(3) > * { transition-delay: 340ms; }
.motion .readout.is-in .readout__cell:nth-child(4) > * { transition-delay: 410ms; }

/* progress bars grow to their value once their block is in */
.motion .ladder__bar i,
.motion .meter__bar i { scale: 0 1; transform-origin: left center; transition: scale 1400ms var(--ease-out) 300ms; }
.motion .is-in .ladder__bar i,
.motion .is-in .meter__bar i { scale: none; }

/* ---- idle drift (doodles + hero boat) ----------------------------------
   Every doodle wanders in place on three unrelated slow sines — sideways (--dx), up-down (--dy), tilt (--tilt) —
   each with its own random period and start (js/motion.js), so the path never repeats and no two move together.
   Stars also twinkle: fade to 40% and shrink to 80%, then back — never out.
   The road chart's doodles are each centred on (0,0) inside a positioned <g> (index.html), so they turn around themselves. */
.doodle svg, #road [data-drift] {
  --dx: 4px; --dy: 3px; --tilt: 2deg;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation-name: drift-x, drift-y, drift-r;
  animation-duration: var(--dur-x, 4.5s), var(--dur-y, 3.7s), var(--dur-r, 5.5s), var(--dur-t, 1.7s);
  animation-delay: var(--delay-x, 0s), var(--delay-y, 0s), var(--delay-r, 0s), var(--delay-t, 0s);
  animation-timing-function: var(--ease-sine);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#road [data-drift] { transform-origin: 0 0; }
.doodle[data-d="star"] svg, #road [data-drift="star"] { --dx: 2px; --dy: 2px; --tilt: 10deg; animation-name: drift-x, drift-y, drift-r, twinkle; }
.doodle[data-d="moon"] svg, #road [data-drift="moon"] { --dx: 2px; --dy: 3px; --tilt: 6deg; }              /* rocks */
.doodle[data-d="bird"] svg                            { --dx: 7px; --dy: 3px; --tilt: 4deg; }              /* glides and banks */
.doodle[data-d="fish"] svg, #road [data-drift="fish"] { --dx: 3px; --dy: 4px; --tilt: 7deg; }              /* bobs */
.doodle[data-d="palm"] svg, #road [data-drift="palm"] { --dx: 1px; --dy: 0px; --tilt: 3.5deg; }            /* sways from its foot */
.doodle[data-d="palm"] svg { transform-origin: 50% 100%; }

@keyframes drift-x { from { translate: calc(var(--dx) * -1) 0; } to { translate: var(--dx) 0; } }
@keyframes drift-y { from { transform: translateY(calc(var(--dy) * -1)); } to { transform: translateY(var(--dy)); } }
@keyframes drift-r { from { rotate: calc(var(--tilt) * -1); } to { rotate: var(--tilt); } }
@keyframes twinkle { from { opacity: 1; scale: 1.04; } to { opacity: .4; scale: .8; } }
@keyframes glow    { to { opacity: .55; } }                                                        /* reduced motion: stars only fade a little */

/* ---- depth: doodles shift slightly with the scroll (parallax) ------------------------------------
   Scroll-linked in CSS (no scroll listener): a doodle is pushed down by --depth as it enters the screen and up by
   --depth as it leaves, so it sits exactly where it's placed while it's in the middle of the screen.
   --depth (js/motion.js): negative = lags behind the page, as if far away (sky: stars, moon, birds);
   positive = runs a little ahead, as if near (water: fish, waves, curls, palms).
   The road chart's doodles follow the chart's own pass through the screen (--road). Browsers without
   scroll-linked animations simply don't get it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .doodle { animation: depth linear both; animation-timeline: view(); }
    .road__svg { view-timeline: --road; }
    #road .depth { animation: depth linear both; animation-timeline: --road; }
  }
}
@keyframes depth { from { translate: 0 var(--depth, 0px); } to { translate: 0 calc(var(--depth, 0px) * -1); } }

/* ---- logo: drops build the house, then each drop makes it grow a little ----------
   The hourglass's holes (top chamber, house, drop) are a <mask> in the logo's svg, so they
   show whatever is behind the logo; the drop is only visible while it crosses solid colour.
   First view (js/motion.js): fast drops fill the house from the floor up (.pv-cover steps away).
   Then .is-built → every 4.5 s a drop falls through the waist (≈1.1 s); as it reaches the roof
   (≈22% of the cycle) the house grows 10% taller and settles back so slowly you barely see it. */
.pv-cover { visibility: hidden; }
.motion .pv-logo:not(.is-built) .pv-cover { visibility: visible; }
.pv-drip { animation: pv-drop 4.5s .8s infinite; }
.pv-house { transform-box: fill-box; transform-origin: 50% 100%; animation: pv-house 4.5s .8s infinite; }
.motion .pv-logo:not(.is-built) :is(.pv-drip, .pv-house) { animation: none; }
@keyframes pv-drop {
  0%            { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }  /* gravity: accelerates */
  18%           { scale: .85 1.25; }                                                                       /* stretches with speed */
  24%           { translate: 0 48px; scale: 1; }                                                           /* inside the house */
  24.01%, 100%  { translate: 0 0; }                                                                        /* back up, unseen */
}
@keyframes pv-house {
  0%, 22%   { scale: 1; animation-timing-function: var(--ease-out); }   /* drop reaches the roof */
  27%       { scale: 1 1.1; animation-timing-function: var(--ease-sine); }
  95%, 100% { scale: 1; }                                               /* ≈3 s back down */
}

/* ---- house chimney smoke (road chart) -------------------------------------------------
   Follows the original drawing (a-house): puffs rise from the chimney along the same short diagonal,
   through the three spots where the drawing has its puffs (70% → 90% → 105% size, touching like the drawn chain), then shrink and fade.
   Four copies of one puff (d-puff), 4 s each, one every second → at any moment a chain like the drawing:
   tiny at the chimney, bigger further up. Positions are relative to the puff's home at the chimney top. */
.smoke .puff {
  transform-origin: 0 0; opacity: 0;   /* (0,0) = the puff's centre (see the wrapping group in index.html) */
  animation: smoke 4s linear infinite;
}
.smoke .puff--2 { animation-delay: -1s; }
.smoke .puff--3 { animation-delay: -2s; }
.smoke .puff--4 { animation-delay: -3s; }
@keyframes smoke {
  0%   { opacity: 1;  transform: translate(0, 5px)        scale(.45) rotate(0deg); }   /* inside the chimney mouth — grows out of it */
  22%  {              transform: translate(2.3px, 1.4px)  scale(.72) rotate(2deg); }   /* 1st drawn puff, still touching the chimney */
  48%  {              transform: translate(10px, -4px)    scale(.9)  rotate(4deg); }   /* 2nd */
  72%  { opacity: 1;  transform: translate(18.5px, -8.7px) scale(1.05) rotate(6deg); }  /* 3rd — full size */
  100% { opacity: 0;  transform: translate(24px, -12.5px) scale(.5)  rotate(8deg); }   /* shrinks and fades */
}

@media (prefers-reduced-motion: reduce) {
  .pv-drip, .pv-house, .smoke .puff { animation: none; }
  /* still: the three puffs exactly where the original drawing has them */
  .smoke .puff--1 { opacity: 1; transform: translate(2.3px, 1.4px)   scale(.72); }
  .smoke .puff--2 { opacity: 1; transform: translate(10px, -4px)     scale(.9); }
  .smoke .puff--3 { opacity: 1; transform: translate(18.5px, -8.7px) scale(1.05); }
  .site-header, .site-header__in, .site-header__brands, .site-header__actions { transition: none; }
  .motion [data-reveal],
  .motion [data-reveal="rise"],
  .motion [data-reveal="scale"],
  .motion [data-reveal="boat"] { translate: none; scale: none; clip-path: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .motion .ladder__bar i, .motion .meter__bar i { scale: none; transition: none; }
  .motion .readout .readout__cell > * { translate: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .doodle svg, #road [data-drift] { animation: none; }
  .doodle[data-d="star"] svg, #road [data-drift="star"] { animation: glow 3s var(--ease-sine) var(--delay-t, 0s) infinite alternate; }
}


/* ==========================================================================
   RESPONSIVE
   ≥1200px  the desktop comp as designed (everything above).
   ≤1199px  fluid: the 12-column grids just narrow; fixed-width pieces (hero, Airē māju block, titles) scale down.
   ≤999px   the road chart becomes a sideways-scrolling strip at a readable size (+ a hint under it);
            the hero and the budget block stack into one column.
   ≤760px   phones: one column, compact header (logos + Ziedot; the phone line moves under the hero lead),
            the boat under the hero text, doodles hidden (their spots are placed for the desktop layout).
   ========================================================================== */
/* the hero boat's oars reach ≈80px past its slot on the left: keep that much margin wherever the boat sits beside the text */
@media (min-width: 1000px) and (max-width: 1359px) {
  :root { --side: 80px; }
  [data-titles="upper"] .hero__title--display { font-size: 54px; }   /* keeps 3 lines in the narrower column (the boat grows with the text) */
}

@media (max-width: 1199px) {
  :root { --sec-pad: 104px; }
  .hero__top { column-gap: 120px; }
  [data-titles="upper"] .hero__title--display { font-size: 48px; }
  .hero__lead { font-size: 24px; }
  .brand-panel { grid-template-columns: 1fr 42%; }
  .brand-panel__logo { width: 100%; max-width: 560px; }
  .brand-panel__art { margin-right: 0; }
  .brand-panel__art .scene { width: 100%; }
  .about__statement { font-size: 40px; }
  [data-titles="upper"] .h2 { font-size: 60px; }
  .readout { grid-template-columns: 1fr 1fr; }
  .readout__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .readout__cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .readout__cell:nth-last-child(-n + 2) { border-bottom: 0; }
  .readout__cell--cta { border-radius: var(--r-l) 0 0 0; }
  .story-lead .story__title { font-size: 34px; }
  .plan__goal .plan__big { font-size: 88px; }
  [data-titles="upper"] .cta__title { font-size: 64px; }
  .cta__art.scene { width: 280px; }
  .brand-row { --cap: 15px; padding: 0 0 calc(var(--cap) * .8); }
}

@media (max-width: 999px) {
  .road__canvas {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .road__canvas::-webkit-scrollbar { display: none; }
  .road__svg { width: 1000px; max-width: none; }
  .road__hint { display: block; margin-top: 10px; font-size: 13px; color: var(--grey-500); }
  /* the hero stacks: title + lead, then the boat (side by side, the text column got too narrow and the boat too tall) */
  .hero__top { display: flex; flex-direction: column; }
  .hero__text { order: -1; }
  .hero__boat { height: 300px; margin: 150px 0 120px; }   /* the boat frame reaches ≈68px past the slot, its water 64px above / 40px below that */
  .brand-panel { margin-top: 0; }
  .plan__grid { display: block; }
  .plan__split { margin-top: 56px; }
  .story-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --side: 20px; --gutter: 16px; --sec-pad: 72px; --header-h: 68px; }
  body { font-size: 16px; }
  .doodle { display: none; }

  /* header: logos + Ziedot */
  .site-header__in { gap: 12px; }
  .site-header__brands { gap: calc(var(--logo-w) * 48 / 214); }   /* same 214 : 76 : 48 as everywhere */
  .site-header { --logo-w: 96px; }
  .brand-tvnet .art { width: var(--logo-w); }
  .site-header .pv-logo svg { height: calc(var(--logo-w) * 76 / 214); }
  .site-header .phone { display: none; }
  .site-header__cta { height: 40px; padding: 0 16px; font-size: 13px; }
  .site-header__actions { --act-gap: 6px; }
  .site-header.is-compact .menu-btn { width: 40px; }
  .menu-btn { height: 40px; }
  .menu-btn span { width: 26px; height: 3px; margin: -1.5px 0 0 -13px; }
  .menu-btn span:nth-child(1) { translate: 0 -8px; }
  .menu-btn span:nth-child(3) { translate: 0 8px; }
  .site-menu { left: var(--side); right: var(--side); width: auto; }

  /* hero: title, lead, phone line, then the boat; then the Airē māju block */
  .hero { padding-top: 40px; padding-bottom: 64px; }
  .hero__top { display: flex; flex-direction: column; }
  .hero__text { order: -1; }
  .hero__boat { height: 250px; margin: 128px 0 104px; }   /* the boat frame reaches ≈56px past the slot, its water 64px above / 40px below that */
  /* hero title: sized to the screen so it breaks into four full lines — SNIEDZ NEDZIEDINĀMI / SLIMIEM IESPĒJU BŪT /
     MĀJĀS, SAŅEMT APRŪPI / UN TURPINĀT DZĪVOT (the widest, line 3, is 343px at 34px type) */
  .hero__text { container-type: inline-size; }                         /* the title sizes to the text column (cqw), scrollbar or not */
  [data-titles="upper"] .hero__title--display { font-size: min(34px, 9.8cqw); line-height: 1.14; text-wrap: wrap; }
  .hero__title em { white-space: nowrap; }                             /* "turpināt dzīvot" stays on one line */
  /* the lead fills three lines to the title's width: Pirmā HOSPISS aprūpes māja / Latvijā vēl tikai top, un Tu vari /
     atbalstīt un palīdzēt tai tapt! (≈22px on a 390px phone; sized to the column like the title) */
  .hero__lead { margin-top: 16px; font-size: min(26px, 6.6cqw); line-height: 1.38; text-wrap: wrap; }
  .hero__lead br { display: none; }                                   /* the sentence flows on; the highlighted part keeps its colour */
  .phone--hero { display: grid; justify-items: start; text-align: left; margin-top: 24px; }
  .brand-panel { margin-top: 0; grid-template-columns: 1fr; row-gap: 40px; }
  .brand-panel__art { grid-column: 1; }
  .brand-panel__logo { margin-bottom: 20px; }
  .brand-panel__desc { font-size: 17px; }
  .brand-panel__desc + .brand-panel__desc { font-size: 15px; }

  /* section heads */
  .sec-head { display: block; margin-bottom: 40px; }
  .sec-head__title .eyebrow { margin-bottom: 18px; }
  [data-titles="upper"] .h2 { font-size: 38px; line-height: 1; }
  .h2 br { display: none; }                                            /* desktop line breaks don't fit here — titles wrap on their own */
  .sec-head__lead { margin-top: 18px; font-size: 17px; }
  .sec-head__aside { margin-top: 20px; padding: 0; font-size: 16px; }

  /* par projektu */
  .about__statement { margin-top: 24px; font-size: 26px; line-height: 1.2; }
  .about__grid { display: block; margin-top: 40px; }
  .about__media { border-radius: var(--r-m); }
  .about__body { margin-top: 32px; padding-left: 0; gap: 18px; font-size: 16px; }
  .about__body p:first-child { font-size: 19px; }
  .about__motto { font-size: 22px; }

  /* road chart: drawn upright on phones (js/road.js, PHONE) — fits the column, no sideways strip */
  .road__canvas { overflow: visible; margin: 0; padding: 0; }
  .road__svg { width: 100%; max-width: 360px; margin: 0 auto; }
  .road__hint { display: none; }
  .readout { grid-template-columns: 1fr; margin-top: 24px; }
  .readout__cell, .readout__cell:nth-child(odd) { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .readout__cell:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .readout__cell:last-child { border-bottom: 0; }
  .readout__cell--cta { border-radius: var(--r-l) var(--r-l) 0 0; }
  .readout__big { font-size: 36px; }
  .readout__big--text { font-size: 26px; min-height: 0; }

  /* stāsti */
  .chips { flex-wrap: nowrap; gap: 6px; margin-top: 22px; }                 /* filter chips: one compact row */
  .chip { height: 34px; padding: 0 13px; font-size: 13px; }
  .story-lead { display: block; margin-bottom: 48px; }
  .story-lead .story__media { border-radius: var(--r-m); }
  .story-lead__body { margin-top: 22px; padding-left: 0; }
  .story-lead .story__title { font-size: 26px; }
  .story-lead .story__excerpt { font-size: 16px; }
  .story-lead .btn { margin-top: 24px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story__title { font-size: 20px; }
  .stories__more { margin-top: 48px; }
  .stories__more .btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }

  /* group brands: two centred rows */
  .group { padding: 0 0 48px; }                                         /* compact, with a hairline above */
  .group .wrap { padding-top: 44px; border-top: 1px solid var(--line); }   /* the line spans the content width, not the screen */
  .brand-row { --cap: 13px; flex-wrap: wrap; justify-content: center; gap: 26px 30px; margin-top: 22px; padding: 0 0 8px; }   /* rows: room for "GRUPA" hanging under its logo */

  /* kur nonāks katrs eiro */
  .plan__grid { display: block; }
  .plan__goal .plan__big { font-size: 64px; }
  .plan__goal p { font-size: 16px; }
  .plan__split { margin-top: 48px; }
  .ladder__row { grid-template-columns: 30px 1fr auto; column-gap: 10px; padding: 20px 0 18px; }
  .ladder__name { font-size: 18px; }
  .ladder__amt { font-size: 16px; }
  .ladder__row--final .ladder__name { font-size: 20px; }
  .ladder__row--final .ladder__amt { font-size: 18px; }
  .ladder__bar { margin-top: 12px; }

  /* partneri */
  .logo-grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .logo-tile { height: 96px; padding: 0 12px; }
  .logo-tile--cta b { font-size: 14px; text-align: center; }

  /* ziedot */
  .cta { padding: 64px 0 64px; }
  .cta__art.scene { display: none; }                                   /* phones: just the boat, at the bottom */
  /* the rowing video turned 90° (bow → right): the box is the turned frame (1474 × 1080 → 300 × 220); the video is
     multiplied onto the kraft background (white disappears) and trims 2px of its scaled edge, like the hero */
  .cta__boat { display: block; position: relative; width: 300px; max-width: 100%; aspect-ratio: 1474 / 1080; margin: 40px auto 0; }
  .cta__boat video {
    position: absolute; left: 50%; top: 50%; width: calc(100% * 1080 / 1474); height: calc(100% * 1474 / 1080);
    translate: calc(-50% + var(--surge, 0px)) -50%; rotate: 90deg; mix-blend-mode: multiply; clip-path: inset(2px);
  }                                                    /* --surge: forward (right) with each stroke (js/motion.js) */
  /* the water drifts right → left past the boat, across the full screen width; marks stay upright, in lanes above
     (7%) and below (≈80%) the hull, each on its own speed — slide in and out at the screen edges */
  .cta__water { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; container-type: inline-size; overflow: hidden; pointer-events: none; }
  .cta__water svg {
    position: absolute; left: 0; top: var(--t); width: var(--w); height: auto; overflow: visible; fill: #000;
    translate: 100cqw 0; animation: drift-by var(--dur) linear var(--delay) infinite;
  }
  [data-titles="upper"] .cta__title { font-size: 40px; }
  .cta__row { margin-top: 32px; gap: 28px; }
  .cta__row .btn--lg { width: 100%; height: auto; min-height: 58px; padding: 14px 22px; font-size: 15px; white-space: normal; text-align: left; }
  .cta__note { font-size: 15px; }

  /* footer */
  .site-footer__in { flex-wrap: wrap; row-gap: 20px; }
  .site-footer__contacts { margin-left: 0; width: 100%; justify-items: start; font-size: 13px; }
  .site-footer__contacts p { overflow-wrap: anywhere; }

  .toast { max-width: calc(100% - 40px); bottom: 20px; }
}

/* the smallest phones (≈320px): the filter chips tighten a little more to stay on one row */
@media (max-width: 359px) {
  .chips { gap: 5px; }
  .chip { padding: 0 10px; font-size: 12px; }
}

/* ==========================================================================
   TABLET (761–1199px) — fixes for the tablet layout only; phone (≤760) and desktop (≥1200) stay as approved
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1199px) {
  /* header logos: scale together in the desktop proportion (TVNET 214px wide ↔ PV 76px tall) — neither shrinks alone */
  .site-header { --logo-w: clamp(150px, 18vw, 214px); }
  .site-header__brands { gap: calc(var(--logo-w) * 48 / 214); }
  .site-header__brands > * { flex: none; }
  .brand-tvnet .art { width: var(--logo-w); }
  .site-header .pv-logo svg { height: calc(var(--logo-w) * 76 / 214); max-width: none; }

  /* hero: the title starts closer under the header */
  .hero { padding-top: 88px; }

  /* Airē māju block: more air between the text and the drawing */
  .brand-panel { grid-template-columns: 1fr 38%; column-gap: clamp(40px, 6vw, 72px); }
  /* …and its ripple leaves the text's edge for the open water under the drawing */
  .brand-panel__art .doodle[data-d="ripple"] { left: 48px !important; top: calc(100% + 40px) !important; }

  /* Par projektu: the statement runs wider here — the moon + star rise above the eyebrow (margin, as the spots are inline) */
  #par-projektu .doodle[data-d="moon"] { margin-top: -94px; }
  #par-projektu .doodle[data-d="star"] { margin-top: -24px; }

  /* Par projektu: photo + the first paragraph side by side (closer, both bigger); the rest of the text runs
     full width underneath (the body's children join the grid via display: contents) */
  .about__grid { grid-template-columns: 1.1fr 1fr; column-gap: 36px; row-gap: 24px; }
  .about__figure { grid-column: 1; grid-row: 1; }
  .about__body { display: contents; }
  .about__body > p:first-child { grid-column: 2; grid-row: 1; font-size: 21px; }
  .about__body > :not(:first-child) { grid-column: 1 / -1; }
  .about__body > :nth-child(2) { margin-top: 12px; }

  /* Stāsti: the title runs on one line (its header has no side text, so the title takes the full width) */
  #stasti .sec-head__title { grid-column: 1 / -1; }
  #stasti .h2 { white-space: nowrap; }
  #stasti > .wrap > .doodle[data-d="curl"] { right: 0 !important; }      /* …so its curl + star step aside to the right */
  #stasti > .wrap > .doodle[data-d="star"] { right: 120px !important; }

  /* Stāsti: the lead story's placeholder excerpt is dropped — meta, title and "Lasīt" beside the photo */
  .story-lead .story__excerpt { display: none; }
  /* text beside the photo: closer to it, meta on the photo's top edge, a bigger title and the compact "Lasīt" right under it */
  .story-lead { align-items: start; }
  .story-lead__body { padding-left: 0; }
  .story-lead .story__title { font-size: clamp(26px, 3.8vw, 38px); }
  .story-lead .btn { margin-top: 24px; height: 42px; padding: 0 20px; font-size: 15px; }

  /* Partneri: the title runs on one line, its side text drops underneath */
  #partneri .sec-head { display: block; margin-bottom: 56px; }
  #partneri .h2 { white-space: nowrap; }
  #partneri .sec-head__aside { max-width: 560px; margin-top: 24px; padding: 0; }

  /* Ziedot: as on phones — the drawn boat scene gives way to the rowing video on its side under the text, with the
     water drifting past across the whole section (the phone rules, ≤760, with a bigger boat and marks) */
  .cta { padding-bottom: 88px; }
  .cta__art.scene { display: none; }
  .cta__boat { display: block; position: relative; width: clamp(380px, 50vw, 520px); aspect-ratio: 1474 / 1080; margin: 64px auto 0; }
  .cta__boat video {
    position: absolute; left: 50%; top: 50%; width: calc(100% * 1080 / 1474); height: calc(100% * 1474 / 1080);
    translate: calc(-50% + var(--surge, 0px)) -50%; rotate: 90deg; mix-blend-mode: multiply; clip-path: inset(2px);
  }
  .cta__water { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; container-type: inline-size; overflow: hidden; pointer-events: none; }
  .cta__water svg {
    position: absolute; left: 0; top: var(--t); width: calc(var(--w) * 1.5); height: auto; overflow: visible; fill: #000;
    translate: 100cqw 0; animation: drift-by var(--dur) linear var(--delay) infinite;
  }

  /* Plāni: the goal's eyebrow stays on one line */
  .plan__goal .label { max-width: none; white-space: nowrap; }
  /* Plāni: the palm + star sit up in the eyebrow row, clear of the title (spots are inline styles, hence !important) */
  #plans > .wrap > .doodle[data-d="palm"] { right: 0 !important; top: -44px !important; }
  #plans > .wrap > .doodle[data-d="star"] { right: 72px !important; top: -6px !important; }

  /* group brands: two centred rows (4 + 3) at the desktop size instead of one cramped row.
     The ::after is a full-width break after the 4th logo (its height is the row gap; the 5th–7th logos are ordered after it) */
  .brand-row { --cap: 18px; flex-wrap: wrap; justify-content: center; column-gap: clamp(40px, 6vw, 64px); row-gap: 0; padding: 0 0 calc(var(--cap) * .8); }
  .brand-row::after { content: ""; flex-basis: 100%; height: 44px; order: 1; }
  .brand-row > li:nth-child(n + 5) { order: 2; }
}

/* reduced motion: the drifting water marks stand still (this comes after the phone and tablet rules that start the drift) */
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .cta__water svg { animation: none; translate: var(--x) 0; }
}

/* tablet, narrow (761–999px): the road chart fits the column instead of scrolling sideways; drawn at ≈60–90%,
   so its text is set larger to stay readable */
@media (min-width: 761px) and (max-width: 999px) {
  /* header: tighter gaps, so the section-menu ☰ fits beside "Ziedot" once the header turns compact */
  .site-header__in { gap: 16px; }
  .site-header__actions { --act-gap: 16px; }
  .site-header.is-compact .menu-btn { width: 44px; }

  .road__canvas { overflow: visible; margin: 0; padding: 0; }
  .road__svg { width: 100%; max-width: none; }
  .road__hint { display: none; }
  .road__svg { --ms-step: 20; }                        /* label line spacing (js/road.js) */
  .road__svg .ms-name { font-size: 15px; }
  .road__svg .ms-amt { font-size: 16px; }
  .road__svg .ax-amt { font-size: 15px; }
  .road__svg .ax-km { font-size: 13px; }
  .road__svg .tip-text { font-size: 19px; }
  .road__svg .tip-chev { font-size: 24px; }
  .road__svg .now-text { font-size: 15px; }
  .road__svg .end-name { font-size: 15px; }
  .road__svg .end-amt { font-size: 25px; }

  /* Plāni, stacked: the goal's three drawings would hang into the budget table — they move into the empty space
     right of the big number instead */
  .plan__goal .doodle { left: auto !important; }
  .plan__goal .doodle[data-d="moon"] { right: 40px; top: 70px; bottom: auto !important; }
  .plan__goal .doodle[data-d="curl"] { right: 110px; top: 190px; bottom: auto !important; }
  .plan__goal .doodle[data-d="fish"] { right: 20px; bottom: 10px !important; }
  /* Ceļš: the title's first line runs to the right edge here — its star moves up beside the eyebrow */
  #cels > .wrap > .doodle[data-d="star"] { top: -24px !important; }
}

/* tablet, narrowest (761–799px): logos a touch smaller (still locked together) so the header + ☰ fit */
@media (min-width: 761px) and (max-width: 799px) {
  .site-header { --logo-w: 18vw; }
  .site-header__actions { --act-gap: 12px; }
}

/* tablet, wide (1000–1199px): the goal sits in a narrow column beside the table — its one-line eyebrow is set smaller to fit */
@media (min-width: 1000px) and (max-width: 1199px) {
  .plan__goal .label { font-size: 14px; }
}