/* ── assets/css/base.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — base: tokens, fallback faces, type, layout primitives, buttons, forms, header,
   menu sheet, bottom bar. The bake concatenates base → sections → system → home → inner →
   hero → book into ONE assets/site.css (the preview inlines the same text).

   ROUND 3 — „Noćni signal” (docs/HANDOFFS/taar-round3-design.md, approved 2026-09-30):
     · one ground (--bg), the LED panel's black (--panel) for chrome and anything that shows an
       ad, TAAR's red only for "book" and "your 10 seconds", logo white for the selected state;
     · Archivo sets every word (wide headings), Big Shoulders Display every number ≥ 28 px;
     · space instead of lines and boxes: hairlines only on data rows, the kote and the map;
     · no text-shadow, box-shadow, backdrop-filter or decorative gradient anywhere.
   Every colour below is in content/brand.json with its source — change it there first.
   The components (the grid, bars, page top, statement, screen face, the 10 s band, the price
   trio, the ad tiles, photos, spec sheets, the end card, motion) live in system.css.
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── metric-matched fallback faces for Archivo ─────────────────────────────────
   While archivo-var-*.woff2 loads (font-display: swap) the words are set in the local Arial,
   scaled so a line keeps its length — a wide heading does not re-wrap when the webfont
   arrives. size-adjust = Archivo width ÷ Arial width over the site's own copy (every lede and
   heading in both decks, 4–6k characters), measured 2026-09-30 in headless Chrome; the
   overrides are Archivo's hhea metrics (ascent 0.878, descent 0.210, gap 0) ÷ size-adjust.
   Bucketed by weight (Arial / Arial Bold) and by the widths the site uses: 100 (text),
   112 (interface, h3), 118 (h2, bars), 125 (h1). No file is downloaded: local() only. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 100 599;
  font-stretch: 50% 110%;
  size-adjust: 97.88%;
  ascent-override: 89.7%;
  descent-override: 21.45%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 100 599;
  font-stretch: 111% 115%;
  size-adjust: 111.03%;
  ascent-override: 79.08%;
  descent-override: 18.91%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 100 599;
  font-stretch: 116% 121%;
  size-adjust: 117.6%;
  ascent-override: 74.66%;
  descent-override: 17.86%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 100 599;
  font-stretch: 122% 200%;
  size-adjust: 125.29%;
  ascent-override: 70.08%;
  descent-override: 16.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 600 1000;
  font-stretch: 50% 110%;
  size-adjust: 96.22%;
  ascent-override: 91.25%;
  descent-override: 21.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 600 1000;
  font-stretch: 111% 115%;
  size-adjust: 109.37%;
  ascent-override: 80.28%;
  descent-override: 19.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 600 749;
  font-stretch: 116% 121%;
  size-adjust: 117.13%;
  ascent-override: 74.96%;
  descent-override: 17.93%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 750 1000;
  font-stretch: 116% 121%;
  size-adjust: 121.94%;
  ascent-override: 72%;
  descent-override: 17.22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 600 749;
  font-stretch: 122% 200%;
  size-adjust: 124.71%;
  ascent-override: 70.4%;
  descent-override: 16.84%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 750 1000;
  font-stretch: 122% 200%;
  size-adjust: 128.03%;
  ascent-override: 68.58%;
  descent-override: 16.4%;
  line-gap-override: 0%;
}

:root {
  /* ── colour — measured (content/brand.json) ── */
  --bg: #111831; /* the ONLY page ground */
  --panel: #05070c; /* the LED panel's black: header (scrolled), menu, bar, end card, 10 s band, tickets, faces */
  --field: #242d46; /* inputs, segmented options, tool buttons */
  --line: #37445d; /* 1 px on DATA rows only */
  --kote: #525e76; /* dimension lines, the map's coast, the clock's segments */
  --text: #eaeef5; /* every heading and every lede */
  --text-muted: #acb3be; /* metadata only; also the 1 px input edge */
  --signal: #fdfefb; /* the logo's box, the selected state, the paper poster, the focus ring */
  --signal-ink: #111831;
  --sun: #c79f90; /* unused since round 4 (no seasons) — kept as the record of the colour; no rule may use it */
  --red: #dc0a24; /* one primary button per view, TAAR's bars, the LED side, "Vaših 10 s" */
  --red-hover: #b9081e;
  --red-ink: #ffffff;
  --wave-1: #37445d;
  --wave-2: #525e76;
  --wave-3: #344d5c;
  --sea: #1b2a42; /* derived, the map only */
  --road: #2b3552; /* derived, the map only */
  --focus: #fdfefb;
  --focus-on-light: #111831; /* the ring on a white or red ground */
  --hdr-bg: rgba(5, 7, 12, 0.96); /* --panel at 96 % */
  /* LEGACY (round 2) — kept only while hero.css / book.css still name them; new code never
     does: sections no longer alternate grounds. */
  --surface: #1a213a;
  --surface-2: #242d46;

  /* ── type: Archivo sets every word, Big Shoulders Display every number of 28 px and up ── */
  --font-words: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-figures: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --t-mega: clamp(4.5rem, 1.25rem + 12.5vw, 12.5rem); /* 72/116/180/200 — BSD 900, one per section */
  --t-num-xl: clamp(3.5rem, 1rem + 7.5vw, 8.5rem); /* 56/74/112/124 — BSD 900 */
  --t-num-l: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem); /* 40/56/79/84 — BSD 900 */
  --t-num-m: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); /* 28/33/43/44 — BSD 800 */
  --t-h1: clamp(2.5rem, 1rem + 5.4vw, 6rem); /* 40/57/85/94 — Archivo 700 wdth 125 */
  --t-h2: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); /* 32/44/61/67 — Archivo 700 wdth 118 */
  --t-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); /* 22/25/29/30 — Archivo 700 wdth 112 */
  --t-bars: clamp(1.375rem, 0.7rem + 2.5vw, 3rem); /* 22/30/43/47 — Archivo 800 wdth 118, caps */
  --t-lede: clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem); /* 20/23/26/26 */
  --t-body: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem); /* 17/18/18/18 */
  --t-ui: 1rem; /* 16 — Archivo 600–700 wdth 112 */
  --t-nav: 0.9375rem; /* 15 */
  --t-small: 0.9375rem; /* 15 — metadata only, muted */
  --t-btn: 1.0625rem; /* 17 — the button label */
  /* LEGACY (round 2) sizes and names — hero.css / book.css / old sections still use them. */
  --display: var(--font-figures);
  --body: var(--font-words);
  --fs-0: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --fs-1: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem);
  --fs-2: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-3: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-4: clamp(1.84rem, 1.4rem + 1.9vw, 2.66rem);
  --fs-5: clamp(2.2rem, 1.5rem + 3.1vw, 3.55rem);
  --fs-6: clamp(2.65rem, 1.6rem + 4.7vw, 4.75rem);
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --measure: 62ch;

  /* ── space: the ONLY values for margin, gap and padding ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  /* five roles — each at least 1.5× the one below it, so groups read without lines */
  --gap-attached: 8px; /* label↔value, figure↔caption, name↔category, field↔hint */
  --gap-related: clamp(16px, 0.75rem + 1.2vw, 32px); /* heading↔lede, bar rows, paragraphs, fields */
  --gap-group: clamp(32px, 1.5rem + 2vw, 64px); /* lede↔actions, text↔object, block↔block, columns */
  --gap-head: clamp(48px, 2rem + 4vw, 112px); /* a section's head ↔ its body */
  --sec-y: clamp(88px, 3rem + 8.5vw, 192px); /* a standard section */
  --sec-y-lg: clamp(120px, 4rem + 12vw, 272px); /* the finale, statements, the end card */
  --sec-y-sm: clamp(56px, 2.5rem + 3.5vw, 112px); /* booking, FAQ, legal pages, the home proof photo */
  --row-y: 12px; /* dense data rows: price details, calculator, summary, file checks */
  --row-y-lg: 20px; /* specs, the footer links */
  --pad-card: clamp(24px, 1rem + 1.6vw, 40px); /* tickets and sheets only */
  --gap-controls: 12px 16px; /* between rows / between items */
  --nav-gap: 28px; /* the header's six links (spec: 28 px apart) */
  --stack: var(--gap-related); /* LEGACY name (hero.css) */

  /* ── grid ── */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --col-gap: clamp(16px, 1.6vw, 28px);
  --hdr-h: 64px;
  --bar-h: 0px;
  --ptop-pad: calc(var(--hdr-h) + clamp(48px, 6vw, 128px)); /* page tops sit under the header */

  /* ── motion: only the product and the film move ── */
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── shape: square everywhere (the logo's box); only the clock and the ring are round ── */
  --radius: 0;

  color-scheme: dark;
}
@media (min-width: 960px) {
  :root {
    --hdr-h: 72px;
  }
}

/* ─── reset ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + var(--s-3));
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-words);
  font-size: var(--t-body);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  padding-bottom: var(--bar-h);
}
img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--signal);
  color: var(--signal-ink);
}
/* Focus: a 3 px white ring 3 px out; navy where the ground under it is white or red. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.on-light :focus-visible,
.on-red :focus-visible {
  outline-color: var(--focus-on-light);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  left: var(--s-3);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  top: var(--s-3);
  outline-color: var(--focus-on-light);
}

/* ─── type ──────────────────────────────────────────────────────────────────────
   Words: Archivo, wide for headings (lh 1.1 — a Č reaches .891 em and a descender .203 em, so
   a wrapped heading never touches itself). Uppercase only in TAAR's bars, the finale caps and
   the end card's descriptor. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-words);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
h1 {
  font-size: var(--t-h1);
  font-stretch: 125%;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--t-h2);
  font-stretch: 118%;
  letter-spacing: -0.02em;
}
h2:not(.bars) {
  max-width: 18ch;
}
h3 {
  font-size: var(--t-h3);
  font-stretch: 112%;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--t-ui);
  font-stretch: 112%;
  line-height: 1.3;
}
@media (max-width: 599px) {
  h1 {
    font-stretch: 110%;
  }
}
p {
  margin: 0;
  max-width: var(--measure);
}
.lede {
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text); /* a lede is never muted */
  max-width: 34ch;
  text-wrap: pretty;
}
.muted {
  color: var(--text-muted);
}
.small {
  font-size: var(--t-small);
  line-height: 1.45;
}
.num,
.tab {
  font-variant-numeric: tabular-nums lining-nums;
}
/* Figures: Big Shoulders Display, single line, tabular — the roadside-sign voice. */
.n-mega,
.n-xl,
.n-l,
.n-m {
  font-family: var(--font-figures);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.n-mega {
  font-size: var(--t-mega);
}
.n-xl {
  font-size: var(--t-num-xl);
}
.n-l {
  font-size: var(--t-num-l);
}
.n-m {
  font-size: var(--t-num-m);
  font-weight: 800;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
a:hover {
  text-decoration-thickness: 2px;
}
strong {
  font-weight: 600;
}

/* ─── layout primitives ─────────────────────────────────────────────────────────
   New sections use the 12/8/4-column `.g` grid (system.css). `.wrap` and `.split` stay for the
   round-2 builders until the page slices replace them. */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sec {
  position: relative;
  padding-block: var(--sec-y);
}
.sec--lg {
  padding-block: var(--sec-y-lg);
}
.sec--sm {
  padding-block: var(--sec-y-sm);
}
.sec--flush-top {
  padding-top: 0;
}
.sec--panel {
  background: var(--panel);
}
/* Round 3: ONE ground. `.sec--surface` (the round-2 alternation) and `.sec--edge` (the wave
   seam, --edge-mask) have no rules any more — the classes are inert on markup not yet rebuilt,
   and the bake no longer generates the masks. */
/* A round-2 section head: a gap stack, then the section's body --gap-head below it. */
.sec__head {
  display: grid;
  gap: var(--gap-related);
  margin-bottom: var(--gap-head);
  max-width: 62rem;
}
.split {
  display: grid;
  gap: var(--gap-group);
}
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .split--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ─── buttons — one style ───────────────────────────────────────────────────────
   Primary: TAAR's red, white label, square, 52 px (48 on phones) — ONE per view (the phone's
   bottom bar excepted). Secondary: a TEXT LINK (`.linkbtn`, and `.btn--ghost` renders the same
   until the page slices replace it) — 1 px underline at .3em, 2 px on hover, 44 px hit area.
   Tool: `--field` fill, 48 px — flip, copy, share, the calendar arrows, the viewer's arrows.
   No outlines, no shadows, no arrows. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-words);
  font-size: var(--t-btn);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 599px) {
  .btn {
    min-height: 48px;
  }
}
.btn svg,
.linkbtn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn--primary {
  background: var(--red);
  color: var(--red-ink);
}
.btn--primary:hover {
  background: var(--red-hover);
}
/* The tool button (and `.btn--light`, round 2's white box, which renders as a tool now). */
.btn--tool,
.btn--light {
  min-height: 48px;
  padding: 0 var(--s-5);
  background: var(--field);
  color: var(--text);
}
.btn--tool:hover,
.btn--light:hover {
  background: var(--line);
}
.btn--sm {
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--t-ui);
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* The secondary action: a text link with a 44 px hit area. */
.linkbtn,
.btn.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-words);
  font-size: inherit;
  font-weight: 600;
  font-stretch: 100%;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.linkbtn:hover,
.btn.btn--ghost:hover {
  background: none;
  text-decoration-thickness: 2px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
}

/* ─── forms ─────────────────────────────────────────────────────────────────────
   Inputs: 52 px on --field with a 1 px --text-muted edge (6.46:1 — WCAG 1.4.11). Errors are
   white text + a mark + a 3 px white rule; never a colour (--sun was the season's and is unused
   since round 4). */
.field {
  display: grid;
  gap: var(--gap-attached);
}
.field + .field {
  margin-top: var(--gap-related); /* legacy: the booking's fields; new forms stack with gap */
}
.field__label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}
.field__label small,
.field__hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--t-small);
}
.input,
.textarea,
.select {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--field);
  border: 1px solid var(--text-muted);
  border-radius: 0;
  color: var(--text);
  font-size: 1rem; /* 16 px minimum: iOS zooms into anything smaller */
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease);
}
.textarea {
  min-height: 112px;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--text);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--signal);
  border-left-width: 3px;
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-left: var(--s-3);
  border-left: 3px solid var(--signal);
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.45;
}
.field__error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 800;
  line-height: 1;
}
/* An empty error slot (a live region waiting for words) draws nothing but stays in the tree. */
.field__error:empty {
  padding: 0;
  border: 0;
}
.field__error:empty::before {
  content: none;
}
.check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  cursor: pointer;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--signal);
}

/* Segmented control — real radio inputs, so the switch works with no script at all. No outer
   box: each option is a --field tile, the chosen one TAAR's white box. Below 480 px a 2-column
   grid, so a wrapped option can never sit on the one above it. */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.seg legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  background: var(--field);
  font-weight: 600;
  font-stretch: 112%;
  font-size: var(--t-small);
  line-height: 1.25;
  text-align: center;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  user-select: none;
}
.seg label:hover {
  background: var(--line);
}
.seg input:checked + label {
  background: var(--signal);
  color: var(--signal-ink);
}
.seg input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 479px) {
  .seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── header ────────────────────────────────────────────────────────────────────
   64/72 px. Transparent over a page top (.ptop, .cine) until the page scrolls 8 px (core.js
   sets data-scrolled), then --panel at 96 % — no blur, no hairline. The red button shows only
   while the page's own red button ([data-own-cta]) is out of view (core.js → data-cta); with
   no script it always shows. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hdr-h);
  background: var(--hdr-bg);
  view-transition-name: taar-hdr;
  transition: background-color var(--t-fast) var(--ease);
}
:root.js:has(#main > :is(.ptop, .cine, .phero):first-child) .hdr:not([data-scrolled="1"]) {
  background: transparent;
}
/* Round 3d (Ante, 2026-09-30: "top bar napravi prozirnim … dok se ne makne ekran"): while the home
   page's opening is pinned and fills the view, hero.js sets data-over and the header stays clear —
   its --panel would hide the top of the screen during the animation. */
.hdr[data-over="1"] {
  background: transparent;
}
.hdr__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.brand img {
  height: 34px;
  width: auto;
}
@media (min-width: 960px) {
  .brand img {
    height: 38px;
  }
}
.nav {
  display: none;
  align-items: center;
  gap: var(--nav-gap);
  margin-left: auto;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: var(--t-nav);
  font-weight: 600;
  font-stretch: 112%;
  text-decoration: none;
  text-underline-offset: 0.45em;
  white-space: nowrap;
}
.nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.hdr__cta {
  display: none;
  transition:
    opacity var(--t-fast) var(--ease),
    visibility 0s linear 0s;
}
.hdr[data-cta="off"] .hdr__cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease),
    visibility 0s linear var(--t-fast);
}
/* The language switch (round 3d): ONE square chip — a globe and the language you can switch TO
   ("EN" / "HR"), a faint outline that fills with the field on hover. 40 px tall (the header is 64). */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(234, 238, 245, 0.32);
  color: var(--text);
  font-size: var(--t-nav);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.lang:hover {
  background: var(--field);
  border-color: var(--text-muted);
}
.lang svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.hdr__lang {
  margin-left: auto;
}
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-1) 0 var(--s-3);
  border: 0;
  background: none;
  font-weight: 600;
  font-stretch: 112%;
  font-size: var(--t-nav);
  color: var(--text);
}
.menu-btn__bars {
  display: grid;
  gap: 5px;
  width: 22px;
}
.menu-btn__bars span {
  display: block;
  height: 2px;
  background: currentColor;
}
/* Six links need the room: the red button first (≥ 1040 px, where the phone bar goes), the
   links at ≥ 1200 px; in between the menu sheet carries them. */
@media (min-width: 1040px) {
  .hdr__cta {
    display: inline-flex;
    margin-left: auto;
  }
  .hdr__lang {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .nav {
    display: flex;
  }
  .hdr__cta {
    margin-left: 0;
  }
  .menu-btn {
    display: none;
  }
}

/* ─── the phone menu: a FIXED full-screen sheet on --panel that locks nothing (a body overflow
   lock un-pins the sticky header — memory: overflow-hidden-kills-position-sticky). The inner box
   is 1px taller than the sheet so it always scrolls itself and the page behind never does. ─── */
.sheet-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--panel);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet-menu__in {
  min-height: calc(100% + 1px);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
}
.sheet-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hdr-h);
  flex: none;
}
.sheet-menu__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  font-weight: 600;
  font-stretch: 112%;
  font-size: var(--t-nav);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.sheet-menu nav {
  display: grid;
  margin-top: var(--s-4);
}
.sheet-menu nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  font-family: var(--font-words);
  font-weight: 700;
  font-stretch: 125%;
  font-size: min(var(--t-h2), 7.6vw);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
/* The current page: a 4 px red bar in the gutter, level with the words. */
.sheet-menu nav a[aria-current]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gutter));
  top: 50%;
  width: 4px;
  height: 1em;
  transform: translateY(-50%);
  background: var(--red);
}
.sheet-menu__foot {
  margin-top: auto;
  padding-top: var(--s-7);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.sheet-menu__foot .btn--primary {
  justify-self: stretch;
}
.sheet-menu__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--t-num-m);
  line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .sheet-menu[data-open] {
    animation: sheet-in var(--t-med) var(--ease);
  }
  @keyframes sheet-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

/* ─── THE FLOATING ACTION BUTTON (Ante, 2026-09-30: "makni ova dva botuna sticky, kreiraj floating
   action menu s raznim opcijama") — it replaced the phone's bottom bar (WhatsApp + "Rezervirajte")
   on every width. A round red button in the bottom-right corner (round like the ring and the clock
   — the only round things on the site); pressed, the site's quick actions rise above it as square
   rows on the panel's black, the booking in red nearest the thumb. It stands down (data-hidden)
   while the phone menu, the try sheet or the booking holds the screen (core.js).
   --bar-h stays the band it owns at a phone's foot (the bar's 64 px, so the pages keep their
   measures and nothing ever sits under it at the end of a page); --fab-room is how far a thing in
   a wide view's bottom-right corner keeps from it (the opening's pause). ─── */
@media (max-width: 1039px) {
  :root {
    --bar-h: calc(64px + env(safe-area-inset-bottom));
  }
}
:root {
  --fab-size: 56px;
  --fab-inset: 16px;
  --fab-room: 0px;
}
@media (min-width: 1040px) {
  :root {
    --fab-inset: 24px;
    --fab-room: 88px;
  }
}
.fab {
  position: fixed;
  right: max(var(--fab-inset), env(safe-area-inset-right));
  bottom: calc(var(--fab-inset) + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  flex-direction: column-reverse; /* the button first in the DOM, the list above it on screen */
  align-items: flex-end;
  gap: 12px;
  transition:
    opacity var(--t-med) var(--ease),
    translate var(--t-med) var(--ease),
    visibility 0s linear 0s;
}
.fab[data-hidden] {
  opacity: 0;
  translate: 0 24px;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t-med) var(--ease),
    translate var(--t-med) var(--ease),
    visibility 0s linear var(--t-med);
}
.fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--fab-size);
  height: var(--fab-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--red-ink);
  /* the one floating thing on the site: a shadow so it stays apart from a red heading under it */
  box-shadow:
    0 0 0 1px rgba(5, 7, 12, 0.35),
    0 10px 28px rgba(5, 7, 12, 0.45);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fab__btn:hover {
  background: var(--red-hover);
}
.fab__btn:focus-visible {
  outline-offset: 4px;
}
/* "+" that turns into "×" */
/* The icon is a HAMBURGER (round 3d — Ante: "floating actions menu treba bit hamburger ikona, ne
   plus"): the span is the middle bar, ::before / ::after the outer two; open, the middle one goes
   and the outer two turn into ×. */
.fab__icon {
  position: relative;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  transition: background-color var(--t-fast) var(--ease);
}
.fab__icon::before,
.fab__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease);
}
.fab__icon::before {
  transform: translateY(-7px);
}
.fab__icon::after {
  transform: translateY(7px);
}
.fab[data-open] .fab__icon {
  background-color: transparent;
}
.fab[data-open] .fab__icon::before {
  transform: rotate(45deg);
}
.fab[data-open] .fab__icon::after {
  transform: rotate(-45deg);
}
/* The page under an open list steps back (a click on it closes the list). */
.fab__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(5, 7, 12, 0.62);
}
.fab__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse; /* the first action (the booking) nearest the button */
  align-items: flex-end;
  gap: 8px;
  max-height: calc(100vh - var(--hdr-h) - var(--fab-size) - 2 * var(--fab-inset) - 24px);
  max-height: calc(100dvh - var(--hdr-h) - var(--fab-size) - 2 * var(--fab-inset) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fab__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px 0 16px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-words);
  font-size: var(--t-ui);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(5, 7, 12, 0.4);
  transition: background-color var(--t-fast) var(--ease);
}
.fab__item .ico {
  width: 20px;
  height: 20px;
}
.fab__item:hover {
  background: var(--field);
}
.fab__item--book {
  background: var(--red);
  color: var(--red-ink);
}
.fab__item--book:hover {
  background: var(--red-hover);
}
@media (prefers-reduced-motion: no-preference) {
  .fab[data-open] .fab__list > li {
    animation: fab-in var(--t-med) var(--ease) both;
  }
  .fab[data-open] .fab__list > li:nth-child(2) {
    animation-delay: 30ms;
  }
  .fab[data-open] .fab__list > li:nth-child(3) {
    animation-delay: 60ms;
  }
  .fab[data-open] .fab__list > li:nth-child(4) {
    animation-delay: 90ms;
  }
  .fab[data-open] .fab__list > li:nth-child(5) {
    animation-delay: 120ms;
  }
  .fab[data-open] .fab__list > li:nth-child(6) {
    animation-delay: 150ms;
  }
  /* round 4: an e-mail row joined the list — eight rows now */
  .fab[data-open] .fab__list > li:nth-child(7) {
    animation-delay: 180ms;
  }
  .fab[data-open] .fab__list > li:nth-child(8) {
    animation-delay: 210ms;
  }
  @keyframes fab-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}
/* No script: nothing to open — the header and the end card carry every action. */
html:not(.js) .fab {
  display: none;
}

/* ─── the install card (render/chrome.ts → appCard, core.js) — 2026-10-08, the studio standard:
   every platform, at most once an hour, never after install (Ante reversed the 09-29 link-only
   exception). Square like every TAAR box, on the LED panel's black, with the app's own icon, one
   line of what the app gives, the red "Instaliraj" (or the platform's steps) and "Ne sada" as a
   text link. Across the foot of a phone, centred up to its 28rem on a tablet, in the floating
   button's corner from 1040 px — the button stands down while the card is up (taar:bar). ─── */
.taar-app {
  position: fixed;
  left: max(var(--fab-inset), env(safe-area-inset-left));
  right: max(var(--fab-inset), env(safe-area-inset-right));
  bottom: calc(var(--fab-inset) + env(safe-area-inset-bottom));
  z-index: 46;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--panel);
  color: var(--text);
  /* it floats like the button, so it carries the button's edge and shadow */
  box-shadow:
    0 0 0 1px rgba(5, 7, 12, 0.35),
    0 10px 28px rgba(5, 7, 12, 0.45);
}
.taar-app[hidden] {
  display: none;
}
.taar-app__icon {
  flex: none;
  width: 56px;
  height: 56px;
}
.taar-app__body {
  display: grid;
  gap: var(--gap-attached);
  min-width: 0;
}
.taar-app__t {
  margin: 0;
  font-family: var(--font-words);
  font-size: var(--t-ui);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.25;
  color: var(--text);
}
.taar-app__x,
.taar-app__steps {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--text-muted);
}
.taar-app__steps {
  color: var(--text);
  font-weight: 600;
}
.taar-app__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-1);
}
@media (min-width: 1040px) {
  .taar-app {
    left: auto;
    width: 28rem;
    margin-inline: 0;
  }
  /* The home opening's round pause (hero.css .cine__pause: --bar-h + 14 px from the foot, 44 px
     tall) sits under the card's corner on a wide view — it peeked out under the card's edge. There
     the card waits 12 px above it. A phone covers the pause completely, and a tablet's centred card
     misses it. */
  html:has(.cine__pause) .taar-app {
    bottom: calc(var(--bar-h) + 14px + 44px + var(--s-3));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .taar-app:not([hidden]) {
    animation: taar-app-in var(--t-med) var(--ease) both;
  }
  @keyframes taar-app-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}
@media print {
  .taar-app {
    display: none;
  }
}

/* ─── the row of contact and profile icons (render/chrome.ts → reachRow): in the phone menu and in
   the end card on every width (Ante, 2026-09-30: "moderno, s ikonama više nego tekst"). Round
   44 px targets, the icon in white on the field; a profile added to site.json → socials joins the
   row by itself. ─── */
.reach {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reach__i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--field);
  color: var(--text);
  text-decoration: none;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.reach__i .ico {
  width: 20px;
  height: 20px;
}
.reach__i:hover {
  background: var(--signal);
  color: var(--signal-ink);
}
.reach--menu .reach__i {
  width: 48px;
  height: 48px;
}
.reach--end {
  margin-top: var(--gap-related);
}

/* ─── icons ─────────────────────────────────────────────────────────────────── */
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* ─── "more about …" under a round-2 section (a stack's gap spaces it; straight in a .wrap it
   needs its own distance) ─── */
.wrap > .more {
  margin-top: var(--gap-group);
}
.more .linkbtn {
  font-weight: 600;
}

/* ─── reduced motion: nothing moves that was not asked to ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─── how far down the page (round 3f — Ante, 2026-10-01: "makni scroll bar desno i stavi ga
   povise top bara … manje distrakcije, a svakako informira koliko si stranice skrolao") ───
   The page's own scrollbar is hidden (the wheel, a finger and the keys still scroll); a hairline
   in the LED white sits ABOVE the header and grows with the share of the page scrolled (core.js
   sets its scaleX). Below the menu sheet, above the header. */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@media print {
  .progress {
    display: none;
  }
}

/* ── assets/css/sections.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — the round-2 sections the pages still compose from render/sections.ts and
   render/blocks.ts: location + map + gallery + the photograph viewer, the loop clock, the
   price board, the poster side, advertisers + the ad frame, the Sorich block, preparing an
   ad, FAQ, contact, the sub-pages (advertiser, offer/print, terms, privacy, 404).

   Round 3 („Noćni signal”) took out of this file: the section grounds' alternation, the wave
   seams and the photo mask, every outlined box (.board, .poster__face, .sorich, .biz,
   .calc__out, the .adv rule, the .facts top rule, the .plays grid, the .pstrip rules, the
   viewer's chrome), the cabinet's shadows and sheen, the chevron (now a drawn plus). Hairlines
   stay ONLY on data rows (price rows, details, calculator, FAQ, specs, the offer's tables), the
   kote and the map. Spacing uses the scale in base.css (--s-*, the five roles) — no raw px for
   margin, gap or padding. The new components are in system.css.
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── shared lists ──────────────────────────────────────────────────────────── */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.facts li {
  padding-block: var(--s-4);
  max-width: var(--measure);
}
.facts li + li {
  border-top: 1px solid var(--line);
}

/* ─── §7 location ───────────────────────────────────────────────────────────── */
.loc__split {
  align-items: center;
}
.loc__facts {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
}
/* The two directions: the map's own arrow glyph, the side's name and one sentence — red for the
   LED side, white for the poster (the map's colours). The round-2 <dl> form (the offer page)
   still reads through the dt/dd rules below. */
.dirs {
  margin: 0;
  display: grid;
  gap: var(--s-6);
}
.dirs__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--gap-attached);
  align-items: baseline;
}
.dirs__glyph {
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 0.35em;
  color: var(--red);
}
.dirs__row--poster .dirs__glyph {
  color: var(--signal);
}
.dirs__glyph svg {
  width: 40px;
  height: 15px;
}
.dirs__h,
.dirs dt {
  font-size: var(--t-h3);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
}
.dirs__row > p,
.dirs dd {
  margin: 0;
  color: var(--text);
}
.dirs dt,
.dirs dd {
  grid-column: 2;
}
/* the round-2 <dl> rows have no glyph: a 4 px rule in the side's colour stands in */
.dirs__row:not(:has(.dirs__glyph)) {
  grid-template-columns: minmax(0, 1fr);
  padding-left: var(--s-4);
  border-left: 4px solid var(--red);
}
.dirs__row--poster:not(:has(.dirs__glyph)) {
  border-left-color: var(--signal);
}
.dirs__row:not(:has(.dirs__glyph)) :is(dt, dd) {
  grid-column: 1;
}
.loc__stat {
  display: grid;
  gap: var(--gap-attached);
}
.loc__stat p:first-child {
  font-size: var(--t-lede);
  line-height: 1.4;
  max-width: 36ch;
}
.loc__addr {
  display: grid;
  gap: var(--gap-attached);
}

/* The map (round 2b, APPROVED — the drawing and its frame stay as they are): a close-up of the
   screen's stretch of road from OpenStreetMap in the site's own colours. Red = the LED side and
   the traffic that sees it, white = the poster side and its traffic. Round 3 only restyles the
   legend as the figure's caption: 16 px under the frame, the keys 32 px apart. */
.map {
  margin: 0;
}
.map__box {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map__land {
  fill: var(--bg);
}
.map__sea {
  fill: var(--sea);
}
.map__coast path {
  fill: none;
  stroke: var(--kote);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.map__side path {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__road-edge {
  fill: none;
  stroke: var(--wave-1);
  stroke-linejoin: round;
}
.map__road {
  fill: none;
  stroke: var(--road);
  stroke-linejoin: round;
}
.map__centre {
  fill: none;
  stroke: rgba(234, 238, 245, 0.5);
  stroke-width: 1.6;
  stroke-dasharray: 10 9;
}
.map__lane {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__lane--led {
  stroke: var(--red);
}
.map__lane--poster {
  stroke: var(--signal);
}
.map__heads--led {
  fill: var(--red);
}
.map__heads--poster {
  fill: var(--signal);
}
.map__leader {
  stroke: var(--text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.map__screen-bg {
  fill: var(--bg);
}
.map__screen-led {
  fill: var(--red);
}
.map__screen-poster {
  fill: var(--signal);
}
/* The words on the map: a solid ground under each, so no line can ever run through a letter. */
.map__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3px 9px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  pointer-events: none;
}
.map__tag--screen {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
/* "Ekran" as a location PIN (Ante, 2026-09-30: "centrirano povise lokacija, skoro kao pin"): the tag
   stands on its point — labels.screen is the tip, just above the marker — with a tail pointing
   down at the screen. */
.map__pin {
  transform: translate(-50%, calc(-100% - 8px));
  font-weight: 700;
}
.map__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--signal);
}
/* "TROGIR" along the lane from Trogir: white capitals turned to the road's reading angle (--a, from
   map.json). Since round 3d they stand just ABOVE the road, on the ground (Ante: "Trogir povise crte,
   na njoj nije citljivo") — a halo of the ground's own colour keeps a side street under a letter
   from cutting it. */
.map__road-tag {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  padding-left: 0.14em; /* letter-spacing leaves a trailing gap: centre the word itself */
  font-family: var(--font-words);
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--signal);
  text-shadow:
    0 0 2px var(--bg),
    0 0 3px var(--bg),
    0 0 6px var(--bg);
  pointer-events: none;
}
/* Round 4b: the direction arrow inside a road word ("← ŠIBENIK", "TROGIR →") — white like the word,
   with a ground-coloured under-stroke as its halo (the word's text-shadow cannot reach an SVG
   stroke); it turns with the word. prepare-map.mjs ROAD_ARROW counts its ≈ 1.4 em in the box. */
.map__road-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.map__road-arrow {
  flex: none;
  width: 1.15em;
  height: 0.63em;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__road-arrow path {
  stroke: currentColor;
  stroke-width: 2.4;
}
.map__road-arrow .map__road-arrow-halo {
  stroke: var(--bg);
  stroke-width: 6;
}
/* Općina Seget — where the red arrow starts: the dot and its word share the arrow's red. */
.map__hall {
  fill: var(--red);
  stroke: var(--bg);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.map__tag--hall {
  border-color: var(--red);
}
/* The scale bar: exactly 100 m of the drawing wide (its width is set in % of the box). */
.map__scale {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  padding-bottom: 7px;
  border: 1.5px solid var(--text-muted);
  border-top: 0;
  height: 22px;
  align-items: flex-start;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  pointer-events: none;
}
/* the caption: the legend 16 px under the frame, the keys 32 px apart, the credit 8 px under */
.map__legend {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.map__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
}
.map__key svg {
  width: 40px;
  height: 15px;
  flex: none;
}
.map__key--led svg {
  color: var(--red);
}
.map__key--poster svg {
  color: var(--signal);
}
.map__osm {
  margin-top: var(--gap-attached);
  color: var(--text-muted);
}
/* ─── 2026-10-09 — the businesses around the screen (map.json → pois; TAAR: "Studenac, Tommy,
   ljekarna, bankomati, kafići, ali da nije previše i da paše u naš design"). Small round badges
   in the map's own ink: the ground, a hairline like the words' frames, the glyph in the text colour.
   Never red, which is the screen's LED side and the traffic that sees it.
   A badge is HTML at a fixed size like the words, so it covers more of a phone's map than of a wide
   one: prepare-map.mjs places it twice, at Google's pin or straight off the road's band on its own
   side — --x/--y for a narrow map, --xw/--yw from 900 px (WIDE_MIN there). The WORD beside it (the
   business's name, or what it is) shows only on the wide map, where it has room. The legend under
   the map shows each badge once with its word. ─── */
.map__box {
  container-type: inline-size;
}
.map__poi {
  --b: clamp(18px, 2.4cqi, 24px);
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: var(--b);
  height: var(--b);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  pointer-events: none;
}
.map__poi svg,
.map__key .map__poi svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__poi .map__poi-fill {
  fill: currentColor;
  stroke: none;
}
.map__poi-name {
  --b: clamp(18px, 2.4cqi, 24px);
  position: absolute;
  left: var(--xw);
  top: var(--yw);
  display: none;
  transform: translate(calc(var(--b) / 2 + 6px), -50%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-muted);
  text-shadow:
    0 0 2px var(--bg),
    0 0 3px var(--bg),
    0 0 6px var(--bg);
  pointer-events: none;
}
.map__poi-name--w {
  transform: translate(calc(-100% - var(--b) / 2 - 6px), -50%);
}
/* above the badge (north side) or below it (south side): centred, or flush with its left / right edge */
.map__poi-name--n {
  transform: translate(-50%, calc(-100% - var(--b) / 2 - 4px));
}
.map__poi-name--ne {
  transform: translate(calc(var(--b) / -2), calc(-100% - var(--b) / 2 - 4px));
}
.map__poi-name--nw {
  transform: translate(calc(-100% + var(--b) / 2), calc(-100% - var(--b) / 2 - 4px));
}
.map__poi-name--s {
  transform: translate(-50%, calc(var(--b) / 2 + 4px));
}
.map__poi-name--se {
  transform: translate(calc(var(--b) / -2), calc(var(--b) / 2 + 4px));
}
.map__poi-name--sw {
  transform: translate(calc(-100% + var(--b) / 2), calc(var(--b) / 2 + 4px));
}
@container (min-width: 900px) {
  .map__poi {
    left: var(--xw);
    top: var(--yw);
  }
  .map__poi-name {
    display: block;
  }
}
/* in the legend: the same badge standing in the line of text */
.map__key .map__poi--key {
  --b: 22px;
  position: static;
  transform: none;
  flex: none;
}
.map__key--poi {
  gap: var(--s-2);
}
/* the businesses' keys: one row of their own under the arrows, two by two on a phone, four abreast wider */
.map__key-row {
  flex-basis: 100%;
}
.map__legend-pois {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--s-3) var(--s-6);
}
@media (min-width: 640px) {
  .map__legend-pois {
    grid-template-columns: repeat(4, max-content);
  }
}

/* The gallery: photographs uncropped (they are 4:3), full colour, no wave mask (round 3). */
.gal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s-4);
}
.gal-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.gal-item img {
  width: 100%;
  height: auto;
}
.gal-item:focus-visible {
  outline-offset: 4px;
}

/* ─── the photograph viewer — PRODUCT-STANDARD §8 (ported from anin-dvor); its chrome on --panel ── */
.tlb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: var(--panel);
  overscroll-behavior: contain;
}
.tlb[data-open] {
  display: block;
}
.tlb__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.tlb__stage[data-zoomed] {
  cursor: grab;
}
.tlb__subj {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.tlb__subj[data-anim] {
  transition: transform 0.22s var(--ease);
}
.tlb__subj img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.tlb__x,
.tlb__arr {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--field);
  color: var(--text);
  cursor: pointer;
}
.tlb__x svg,
.tlb__arr svg {
  width: 22px;
  height: 22px;
}
.tlb__x {
  position: absolute;
  top: max(var(--s-3), env(safe-area-inset-top));
  right: var(--s-3);
  z-index: 3;
}
.tlb__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0 auto;
  padding: 0 var(--s-5);
  text-align: center;
  font-size: var(--t-small);
  color: var(--text-muted);
  pointer-events: none;
  transition: opacity 0.35s;
}
.tlb__bar {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: max(var(--s-3), env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s-1);
  background: var(--panel);
  transition: opacity 0.35s;
}
.tlb__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}
.tlb__n {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tlb__hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tlb[data-cue="off"] .tlb__bar,
.tlb[data-cue="off"] .tlb__cap {
  opacity: 0;
  pointer-events: none;
}
.tlb[data-cue="off"] .tlb__bar:focus-within {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .tlb__bar {
    display: contents;
  }
  .tlb__arr {
    position: absolute;
    top: 50%;
    z-index: 2;
    margin-top: -24px;
  }
  .tlb__prev {
    left: var(--s-4);
  }
  .tlb__next {
    right: var(--s-4);
  }
  .tlb__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--s-5);
    z-index: 2;
  }
  .tlb__cap {
    bottom: var(--s-8);
  }
  .tlb[data-cue="off"] .tlb__bar,
  .tlb[data-cue="off"] .tlb__cap {
    opacity: 1;
    pointer-events: auto;
  }
  .tlb__x:hover,
  .tlb__arr:hover {
    background: var(--line);
  }
}

/* ─── §8 the loop: the clock (the round-2 table of plays is replaced by the 10 s band) ─── */
.loop__split {
  align-items: center;
}
.plays__h {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}
.plays {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--s-5) var(--s-4);
}
.plays dt {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.plays dd {
  margin: var(--s-1) 0 0;
  font-family: var(--font-figures);
  font-weight: 800;
  font-size: var(--fs-4);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.plays__note {
  margin-top: var(--s-3);
  color: var(--text-muted);
}
/* The clock: segments in --kote, "your 10 s" red, the label white BSD 800. It is a button —
   a click replays the hand's sweep (core.js); the focus ring sits 8 px out. */
.clock {
  margin: 0 auto;
  width: min(100%, 420px);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
}
.clock svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.clock__seg {
  fill: none;
  stroke: var(--kote);
  stroke-width: 18;
}
.clock__seg--yours {
  stroke: var(--red);
}
.clock__hand {
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 120px 120px;
}
.clock__hub {
  fill: var(--text);
}
.clock__yours {
  font-family: var(--font-figures);
  font-weight: 800;
  font-size: var(--t-num-m);
  line-height: 0.9;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.clock__btn {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.clock__btn:focus-visible {
  outline-offset: 8px;
}
.clock__btn:hover .clock__seg--yours {
  stroke: var(--red-hover);
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-loop] .clock__hand {
    transform: rotate(0deg);
  }
  [data-loop].is-on .clock__hand {
    animation: taar-sweep 2.6s var(--ease-io) 1;
  }
  @keyframes taar-sweep {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /* The hand comes home to "your 10 s": the red segment answers with one beat. */
  [data-loop].is-on .clock__seg--yours {
    animation: taar-yours 0.55s var(--ease) 2.45s 1;
  }
  @keyframes taar-yours {
    50% {
      stroke-width: 28;
    }
  }
}

/* ─── §9 the price board ─────────────────────────────────────────────────────
   The side switch is real radios; `:has()` shows the chosen side with no script. Round 3: no
   outer frame; the rows keep their hairlines (data rows). Round 4: no seasons — one price per
   package, so no season switch, no "now" line and no second value in a row. */
.board {
  background: none;
}
.board__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
  padding-bottom: var(--s-5);
}
.board:has(#board-side-led:checked) .board__rows[data-side="poster"],
.board:has(#board-side-poster:checked) .board__rows[data-side="led"] {
  display: none;
}
.board__rows {
  border-top: 1px solid var(--line);
}
.row {
  border-bottom: 1px solid var(--line);
}
.row summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
}
.row summary::-webkit-details-marker {
  display: none;
}
.row__name {
  flex: 1 1 auto;
  font-weight: 700;
  font-stretch: 118%;
  font-size: var(--t-body);
}
.row__price {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--fs-4);
  line-height: 0.9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.row summary .plusx {
  align-self: center;
}
.row__per {
  font-family: var(--font-words);
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--text-muted);
}
.row__body {
  display: grid;
  gap: var(--s-4);
  padding: 0 0 var(--s-5);
}
.row__dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 34rem;
}
.row__dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--row-y);
}
.row__dl > div + div {
  border-top: 1px solid var(--line);
}
.row__dl dt {
  color: var(--text-muted);
}
.row__dl dd {
  margin: 0;
  font-weight: 600;
}
.row__body .btn {
  justify-self: start;
}
.board__note {
  padding-block: var(--s-3);
  color: var(--text-muted);
}
.price__notes {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* ─── changing the ad (render/sections.ts changesBlock) ───
   Round 4: ONE row — "Zamjena reklame · po dogovoru" — with its sentence (muted, the measure)
   under the value; no prices, no Akcijski paket, no link. A spec sheet INSIDE the LED rows (the
   poster tab hides it with them), a group's distance under the last package. Phone first: the
   spec's rows stack label over value below 600 px (system.css); on the pricing page from 1024 px
   the label takes the packages' columns 1–6 and the value the prices' 7–12, so the block reads as
   one more row of the same board. */
.chg {
  padding-top: var(--gap-group);
}
.chg__rows {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chg__hint {
  margin: var(--s-2) 0 0;
  max-width: var(--measure);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 1024px) {
  .in-board .chg__rows .spec__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .in-board .chg__rows .spec__row dt {
    grid-column: 1 / 7;
  }
  .in-board .chg__rows .spec__row dd {
    grid-column: 7 / -1;
  }
}

/* ─── §10 the poster side ────────────────────────────────────────────────────── */
.poster__split {
  align-items: center;
}
.poster__actions {
  margin-block: var(--s-5) var(--s-4);
}
.poster__combo {
  color: var(--text-muted);
}
.poster__face {
  margin: 0;
}
.poster__face img {
  width: 100%;
  aspect-ratio: 1920 / 1097;
  object-fit: cover;
}

/* ─── §11 advertisers + the ad frame ─────────────────────────────────────────── */
.adv-wrap {
  position: relative;
}
.adv-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap-group) var(--col-gap);
}
.adv {
  display: grid;
  align-content: start;
  gap: var(--gap-attached);
}
.adv__link {
  display: grid;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
}
/* ─── the ad frame (round 2b, APPROVED): the real screen, still — its black cabinet, a thin
   border around the lit face (~2 % of the width, measured on ekran-izbliza), the ad in focus, a
   faint LED raster, and the light it throws (a blurred copy of the ad behind the cabinet — the
   ONE glow CSS may draw). Nothing here moves except the ad itself. Round 3: the cabinet is flat
   --panel (its shading and drop shadow went with every other box-shadow), no sheen. ─── */
.ledframe {
  position: relative;
  isolation: isolate;
}
.ledframe__glow {
  position: absolute;
  inset: 6% 4%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.35);
  opacity: 0.42;
  pointer-events: none;
}
.ledframe__cab {
  position: relative;
  padding: 2.1%;
  background: var(--panel);
}
.ledframe__face {
  position: relative;
  aspect-ratio: 3.5 / 2;
  overflow: hidden;
  background: #000;
}
.ledframe__face picture,
.ledframe__face img,
.ledframe__face video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ledframe__face video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.ledframe__face video.is-on {
  opacity: 1;
}
/* (No LED raster over an ad since round 4d — Ante, 2026-10-07: "prikazi reklama ne trebaju imat overlay
   kao da su pixelizirane, lipše će izgledati reklame ako su izvorne": every ad shows exactly as its file.) */
.ledframe__name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-words);
  font-weight: 700;
  font-stretch: 118%;
  font-size: var(--t-h3);
  color: var(--text);
}
/* On the advertiser's own page the frame is the page's picture: big, centred. */
.ledframe--lg {
  max-width: 1040px;
  margin-inline: auto;
}
.ledframe--lg .ledframe__glow {
  inset: 8% 6%;
  filter: blur(60px) saturate(1.35);
  opacity: 0.5;
}
.adv__name {
  font-size: var(--t-h3);
  font-stretch: 118%;
}
.adv__link:hover .adv__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.adv__cat {
  color: var(--text-muted);
}
.adv__out {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--t-small);
}

/* ─── §12 the Sorich block: the logo, one sentence, the link — no frame ──────── */
.sorich {
  display: grid;
  gap: var(--gap-related);
  align-items: center;
  max-width: 60rem;
}
.sorich__logo {
  width: min(240px, 60%);
  height: auto;
}
.sorich .btn,
.sorich .linkbtn {
  justify-self: start;
}
@media (min-width: 800px) {
  .sorich {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--gap-group);
  }
  .sorich__logo {
    width: 200px;
  }
}

/* The partner strip (round 4 — TAAR, 2026-10-07: "sekcija za izradu reklama od strane sorich.hr malo
   istaknuti kao partner za izradu reklama ako ih nemaju"): Sorich as the partner that makes ads, on a
   sheet of the LED panel's black — like the calculator's ticket, tokens only, no shadow, no gradient,
   no red: the logo, a small kicker, the heading, what it makes, ONE link. sorichBlock(ctx, "strip" |
   "booking") — the ad guide, the price page and booking step 3 (which compacts it: book.css
   `.bk-sorich`). The rules sit after the `.sorich` ones above so they win at equal specificity. */
.sorich--strip {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-related);
  padding: var(--pad-card); /* a sheet, not a full-width band: .sorich's 60rem cap stays */
  background: var(--panel);
}
.sorich--strip .sorich__logo {
  width: min(200px, 60%);
}
.sorich__txt {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
  min-width: 0;
}
.sorich__k {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--text-muted);
}
/* an h3 on the pages, an h4 in the booking — one look */
.sorich__h {
  font-size: var(--t-h3);
  font-stretch: 112%;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 28ch;
}
.sorich--strip .sorich__body {
  max-width: 54ch;
}
@media (min-width: 800px) {
  .sorich--strip {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--gap-group);
  }
  .sorich--strip .sorich__logo {
    width: 200px;
  }
}

/* ─── §13 prepare ─────────────────────────────────────────────────────────────── */
.prep__grid {
  display: grid;
  gap: var(--gap-group);
}
@media (min-width: 960px) {
  .prep__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.prep__grid > div {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}
.prep__grid h3,
.prep__h {
  font-size: var(--t-h3);
}
.prep__tplimg {
  display: block;
}
.prep__try {
  margin-top: var(--gap-group);
}

/* ─── §17.1 FAQ: data rows, the question 20 px Archivo 600, a drawn plus that turns into × ─── */
.faq__wrap {
  display: grid;
  gap: var(--gap-group);
}
@media (min-width: 960px) {
  .faq__wrap {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}
.faq__list {
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding-block: var(--s-5);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__a {
  padding: 0 0 var(--s-5);
  color: var(--text);
}
.faq__a p {
  max-width: 62ch;
}
.faq__a p + p {
  margin-top: 0.9em;
}

/* ─── §17 contact ─────────────────────────────────────────────────────────────── */
.contact__where,
.contact__offer,
.contact__socials,
.contact__about {
  display: grid;
  gap: var(--gap-attached);
}
.contact h3,
.biz__h {
  font-size: var(--t-h3);
}
.contact__socials ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}
/* The business data: a plain block (no frame since round 3). */
.biz {
  display: grid;
  gap: var(--s-3);
}

/* ─── sub-pages ─────────────────────────────────────────────────────────────── */
.page-head {
  padding-block: var(--sec-y-sm) var(--s-6);
}
.page-head .wrap {
  display: grid;
  gap: var(--gap-related);
  justify-items: start;
}
.page-head .lede {
  color: var(--text);
}
.crumb {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  color: var(--text-muted);
}
.prose {
  max-width: 70ch;
  display: grid;
  gap: var(--s-4);
}
.prose h2 {
  font-size: var(--t-h3);
  font-stretch: 112%;
  max-width: none;
  margin-top: var(--s-4);
}
.rules {
  margin: 0;
  padding-left: 1.6em;
  display: grid;
  gap: var(--s-4);
  max-width: 70ch;
}
.rules li::marker {
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}
.rules ul {
  margin: var(--s-2) 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--s-1);
}

/* the advertiser page */
.adv-page__stage {
  padding-top: 0;
}
.adv-page__meta {
  display: grid;
  gap: var(--gap-group);
}
.share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.share__done {
  color: var(--text-muted);
  font-size: var(--t-small);
  align-self: center;
}

/* the offer page (screen) */
.offer__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
}
.offer__sec {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
}
.offer__sec h2 {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
}
.offer__cols {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 800px) {
  .offer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.otable {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.otable caption {
  text-align: left;
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-h3);
  padding-bottom: var(--s-2);
}
.otable th,
.otable td {
  padding: var(--row-y) var(--s-2);
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.otable th:first-child,
.otable td:first-child {
  text-align: left;
}
.otable thead th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--t-small);
}
.steps {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--s-2);
}
.offer__qr {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}
.offer__qr svg {
  width: 112px;
  height: 112px;
  background: #fff;
  padding: 6px;
}
.offer__cover {
  display: grid;
  gap: var(--gap-related);
}
.offer__cover img {
  width: 100%;
}

/* 404 */
.e404 {
  min-height: 60vh;
  display: grid;
  align-content: center;
  gap: var(--gap-related);
}
.e404__en {
  margin-top: var(--gap-group);
  display: grid;
  gap: var(--s-3);
}
.e404__en h2 {
  font-size: var(--t-h3);
}

/* ─── print: the offer page becomes a clean A4 document ─────────────────────── */
@page {
  size: A4;
  margin: 14mm 14mm 16mm;
}
@media print {
  :root {
    --bg: #ffffff;
    --panel: #ffffff;
    --field: #f3f5f8;
    --surface: #ffffff;
    --surface-2: #f3f5f8;
    --line: #c7ccd6;
    --kote: #8a93a3;
    --text: #111831;
    --text-muted: #4a5468;
    --signal: #111831;
    --signal-ink: #ffffff;
    --t-h1: 30pt;
    --t-h2: 20pt;
    --t-h3: 13pt;
    --t-lede: 12.5pt;
    --t-body: 10.5pt;
    --t-small: 9pt;
    --t-num-xl: 28pt;
    --t-num-l: 22pt;
    --t-num-m: 16pt;
    --t-mega: 36pt;
    --fs-6: 34pt;
    --fs-5: 26pt;
    --fs-4: 20pt;
    --fs-3: 15pt;
    --fs-2: 12.5pt;
    --fs-1: 10.5pt;
    --fs-0: 9pt;
    --sea: #e6ebf2;
    --road: #c9cfda;
  }
  html,
  body {
    background: #fff !important;
    color: #111831;
  }
  /* wide headings print at wdth 110 on A4 */
  h1 {
    font-stretch: 110%;
  }
  .hdr,
  .fab,
  .skip,
  .offer__tools,
  .sheet-menu,
  .tlb {
    display: none !important;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .offer__sec {
    break-inside: avoid;
    padding-block: 14pt;
  }
  .offer__sec--break {
    break-before: page;
  }
  .map__box {
    background: #fff;
  }
  .map__side path {
    stroke: #e3e7ee;
  }
  .map__centre {
    stroke: #ffffff;
  }
  .map__tag {
    background: #fff;
  }
  .brand-print {
    display: block !important;
  }
}
.brand-print {
  display: none;
}
.brand-print img {
  height: 40px;
  width: auto;
  margin-bottom: var(--s-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   ROUND 2 — the pages' own sections (render/blocks.ts), until the page slices rebuild them.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── the home page's prices (round 2 — replaced by priceTrio in round 3): no rules ─── */
.ptease__side {
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.pstrip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-related) var(--col-gap);
}
.pstrip dt {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.pstrip dd {
  margin: var(--s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
}
.pstrip__from,
.pstrip__per {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.pstrip__v {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--fs-5);
  line-height: 0.9;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .pstrip {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ptease__actions {
  margin-top: var(--gap-group);
}

/* ─── the LED page ─── */
.ledsec .sec__head {
  margin-bottom: var(--gap-group);
}
.galsec .wrap {
  display: grid;
  gap: var(--gap-head);
}
.galsec h2 {
  font-size: var(--t-h2);
}

/* ─── the location page ─── */
.loc__addrh {
  font-size: var(--t-h3);
}

/* ─── the poster page ─── */
.poster__h {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
}
.poster .facts {
  margin-bottom: var(--s-4);
}

/* ─── the calculator: the form, and the result as a --panel ticket ─── */
.calc__grid {
  display: grid;
  gap: var(--gap-group);
}
@media (min-width: 960px) {
  .calc__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}
.calc__form {
  display: grid;
  gap: var(--gap-related);
}
.calc__field {
  display: grid;
  gap: var(--gap-attached);
}
.calc__field .seg {
  justify-self: start;
}
.calc__date {
  max-width: 260px;
  color-scheme: dark;
}
.calc__out {
  display: grid;
  gap: var(--s-4);
  padding: var(--pad-card);
  background: var(--panel);
}
@media (min-width: 960px) {
  .calc__out {
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
}
.calc__h {
  font-size: var(--t-h3);
}
.calc__dl {
  margin: 0;
  display: grid;
}
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--row-y);
  border-bottom: 1px solid var(--line);
}
.calc__row dt {
  color: var(--text-muted);
  font-size: var(--t-small);
}
.calc__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.calc__row--total {
  border-bottom: 0;
  padding-top: var(--s-4);
}
.calc__row--total dt {
  color: var(--text);
  font-weight: 600;
  font-size: var(--t-body);
}
.calc__total {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--t-num-l);
  line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
.calc__final {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-muted);
}
.calc__schedh {
  font-weight: 600;
  font-size: var(--t-small);
  margin-top: var(--s-1);
}
.calc__sched {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-small);
}
.calc__sched li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--text-muted);
}
.js .calc__nojs {
  display: none;
}

/* ─── the ad guide: good and bad, drawn as two screens ─── */
.dd__grid {
  display: grid;
  gap: var(--gap-group) var(--col-gap);
}
@media (min-width: 800px) {
  .dd__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.dd__item {
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.dd__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  align-content: center;
  padding: 7%;
  background: #0b0d14;
  border: 7px solid var(--panel);
  outline: 1px solid var(--line);
  overflow: hidden;
  container-type: inline-size;
}
/* The screen's own raster, faint. */
.dd__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.35) 0.9px, transparent 1.2px);
  background-size: 4px 4px;
}
.dd__item--good .dd__screen {
  background: var(--red);
}
.dd__big {
  margin: 0;
  max-width: none;
  font-family: var(--font-words);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 12cqi;
  line-height: 1;
  color: #fff;
}
.dd__small {
  margin: 0.6em 0 0;
  max-width: none;
  font-weight: 700;
  font-size: 6cqi;
  color: #fff;
}
.dd__tiny {
  margin: 0;
  max-width: none;
  font-size: 2.6cqi;
  line-height: 1.35;
  color: #8f98ab;
}
.dd__item figcaption {
  display: grid;
  gap: var(--gap-attached);
}
.dd__verdict {
  font-weight: 700;
  font-stretch: 118%;
  font-size: var(--t-h3);
  line-height: 1.1;
}
.dd__item--good .dd__verdict {
  color: var(--text);
}
.dd__item--bad .dd__verdict {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.dd__note {
  margin-top: var(--gap-related);
}

/* ─── the FAQ page: the questions in groups ─── */
.faqg {
  display: grid;
  gap: var(--gap-head);
}
.faqg__group {
  display: grid;
  gap: var(--gap-related);
}
@media (min-width: 960px) {
  .faqg__group {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    column-gap: var(--col-gap);
  }
  .faqg__h {
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
}
.faqg__h {
  font-size: var(--t-h3);
  font-stretch: 112%;
}

/* ─── contact ─── */
.contact__h {
  font-size: var(--t-h3);
}
.contact__where {
  margin: 0 0 var(--s-4);
}
.contact__side {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
}

/* ─── the booking's help strip (round 2 — the end card carries it since round 3) ─── */
.help__in {
  display: grid;
  gap: var(--gap-related);
  align-items: center;
}
@media (min-width: 960px) {
  .help__in {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.help__in > div {
  display: grid;
  gap: var(--gap-related);
}
.help__h {
  font-size: var(--t-h2);
}

/* ── assets/css/system.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — system.css: the round-3 components („Noćni signal”, docs/HANDOFFS/taar-round3-design.md).
   Loaded after base.css + sections.css and BEFORE home.css / inner.css (the page slices compose
   pages from what is here and tune them in their own file). Tokens only (base.css :root).

   THE GRID — `.g`: 12 columns ≥ 1024 px, 8 at 600–1023, 4 below; the columns sit between
   [content-start] and [content-end], flanked by gutter tracks [full-start] / [full-end], so an
   object can run to the screen's edge. Every child defaults to `grid-column: content`.
   Place with the named lines, and ONLY inside the media query whose column count you mean
   (a line number past the count creates implicit tracks):
       columns 1–4 of 12 ........ grid-column: col-start 1 / col-start 5
       columns 5–12 ............. grid-column: col-start 5 / content-end
       column 6 to the edge ..... grid-column: col-start 6 / full-end
   `.g` has no row gap of its own — a component sets the one its rows need.

   STACKS — children carry no margins; the container's gap is the space:
       .stack (related) · .stack--attached · .stack--group · .stack--head · .head (h2 + lede)

   COMPONENTS (builders in render/sections.ts and render/blocks.ts — the HTML contract of each
   is in the builder's comment; the classes are here):
       .bars ............ TAAR's slogan bars — bars(ctx, k1, k2, {tag})          sections.ts
       .ptop ............ the page top — pageTop(ctx, {h1, lede, primary, link, object, layout})  blocks.ts
       .statement ....... bars as an h2 over a 16:9 clip — statement(ctx, {k1, k2, clip})  sections.ts
       .clipwin ......... a 16:9 window on a clip (once per entry) — clipWindow(ctx, clip)  sections.ts
       .facemsg / .face . words on the still's LED face — faceMsg(ctx, {k1, k2, …})     sections.ts
       .tenband ......... the full-bleed 10-second band — tenBand(ctx, {figures})      sections.ts
       .tabs ............ a row of radio tabs (the selected one is the white box)
       .figs ............ five figures across (3 + 2, 2 + 2 + 1), no cell borders
       .count ........... a figure that counts up on an aria-hidden twin (core.js)
       .trio ............ Tjedan / Mjesec / Godina — priceTrio(ctx)                     sections.ts
       .tiles / .tile ... the advertisers as still ad frames — adTiles(ctx, {yourTile})   sections.ts
       .adplay / .adbar . an ad frame with its bar (play, seek, time) — adPlayer(…)      sections.ts
       .photo ........... an uncropped 4:3 photograph → the §8 viewer — photoFigure(…)   sections.ts
       .spec ............ label/value rows, 20 px — specSheet(ctx, rows)                sections.ts
       .endcard ......... the end card (every page ends with it) — endCard(ctx, variant)  chrome.ts
       .plusx ........... a drawn plus that turns into × when its <details> opens

   MOTION (core.js adds `.taar-motion` on <html> only when motion is welcome — no reduced
   motion, no Save-Data, IntersectionObserver present — so with no script, or with it failing,
   every hidden state below simply never applies and everything shows its final state):
       [data-kote-draw] → .is-drawn   the kote wipe on (700 ms), the labels 200 ms later
       [data-wipe]      → .is-wiped   a white parallelogram crosses each bar (statements only)
       [data-build]     → .is-built   [data-build-line] children open left to right (the finale)
       [data-count]                   figures count on first view (core.js)
       details                        open over 250 ms where interpolate-size exists
       @view-transition               cross-page: the header stays, taar-object morphs
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── the grid ────────────────────────────────────────────────────────────────── */
.g {
  display: grid;
  column-gap: var(--col-gap);
  grid-template-columns:
    [full-start] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
    [content-start] repeat(4, [col-start] minmax(0, calc((var(--maxw) - 3 * var(--col-gap)) / 4)))
    [content-end] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
    [full-end];
}
@media (min-width: 600px) {
  .g {
    grid-template-columns:
      [full-start] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
      [content-start] repeat(8, [col-start] minmax(0, calc((var(--maxw) - 7 * var(--col-gap)) / 8)))
      [content-end] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
      [full-end];
  }
}
@media (min-width: 1024px) {
  .g {
    grid-template-columns:
      [full-start] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
      [content-start] repeat(12, [col-start] minmax(0, calc((var(--maxw) - 11 * var(--col-gap)) / 12)))
      [content-end] minmax(calc(var(--gutter) - var(--col-gap)), 1fr)
      [full-end];
  }
}
.g > * {
  grid-column: content;
  min-width: 0;
}
.g > .g__full {
  grid-column: full;
}

/* ─── stacks ──────────────────────────────────────────────────────────────────── */
.stack {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}
.stack--attached {
  gap: var(--gap-attached);
}
.stack--group {
  gap: var(--gap-group);
}
.stack--head {
  gap: var(--gap-head);
}
.head {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}

/* ─── the bars: TAAR's own title device ───────────────────────────────────────────
   One bar per line, as in the video: each line is a block row that hugs its words; the words
   are an inline span with box-decoration-break, so a line that has to wrap becomes two bars of
   the same colour, never two lines of capitals in one box. Line 1 white with red letters, line
   2 red with white letters, uppercase (the source text stays sentence case). With lh 1.5 and
   padding .16/.12 em the painted bars leave .13 em between every piece — between two rows and
   inside a wrapped one alike. Used as page type ONLY for the home h1 and TAAR's four slogans,
   never above an h1; on a screen face (`.bars--face`) any message of seven words or fewer. */
.bars {
  display: grid;
  justify-items: start;
  gap: 0;
  margin: 0;
  max-width: 100%;
  font-family: var(--font-words);
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--t-bars);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.bars__row {
  display: block;
  max-width: 100%;
  text-wrap: balance;
}
.bars__l {
  display: inline;
  padding: 0.16em 0.42em 0.12em;
  line-height: 1.5;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bars__l--w {
  background: var(--signal);
  color: var(--red);
}
.bars__l--r {
  background: var(--red);
  color: var(--red-ink);
}
.bars--sm {
  font-size: var(--t-h3);
}
.bars--xl {
  font-size: var(--t-bars);
}
/* A statement's bars: big, capped on a narrow phone so the longest word still fits. */
.bars--lg {
  font-size: min(clamp(1.5rem, 0.6rem + 3.8vw, 4rem), 7.8vw);
}
/* On a screen face: 7.2 % of the face's width (the face is the container). */
.bars--face {
  font-size: 7.2cqi;
}

/* ─── the page top: h1, a lede of ≤ 110 characters, ONE red button, ONE text link, and the
   page's own object in the first view (view-transition-name: taar-object). It sits under the
   transparent header (base.css). Layouts: split (words 1–5 | object 6–12), row (the LED page:
   h1 1–7, lede 9–12 bottom-aligned, the object full width below), plain (no object). ─── */
.ptop {
  position: relative;
  display: grid;
  row-gap: var(--gap-group);
  margin-top: calc(-1 * var(--hdr-h));
  padding-top: var(--ptop-pad);
  padding-bottom: var(--sec-y-sm);
  container-type: inline-size;
}
.ptop__g {
  row-gap: var(--gap-group);
  align-items: start;
}
.ptop__words {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
  justify-items: start;
}
.ptop__text {
  display: grid;
  gap: var(--gap-related);
  justify-items: start;
}
.ptop__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
}
.ptop__side {
  display: grid;
  gap: var(--gap-group);
  align-content: end;
  justify-items: start;
}
.ptop__obj {
  min-width: 0;
  view-transition-name: taar-object;
}
.ptop--row .ptop__g:first-child {
  row-gap: var(--gap-related);
}
@media (min-width: 1024px) {
  .ptop--split .ptop__g {
    align-items: center;
  }
  .ptop--split .ptop__words {
    grid-column: col-start 1 / col-start 6;
  }
  .ptop--split .ptop__obj {
    grid-column: col-start 6 / content-end;
  }
  .ptop--plain .ptop__words {
    grid-column: col-start 1 / col-start 9;
  }
  .ptop--row .ptop__g:first-child {
    align-items: end;
  }
  .ptop--row .ptop__title {
    grid-column: col-start 1 / col-start 8;
  }
  .ptop--row .ptop__title h1 {
    font-size: min(var(--t-h1), 9cqi);
  }
  .ptop--row .ptop__side {
    grid-column: col-start 9 / content-end;
  }
}

/* ─── a 16:9 window on one of TAAR's clips — full colour, no scrim; the <video> plays ONCE per
   entry and rests on its last frame (core.js), never under reduced motion / Save-Data / 2G. ─── */
.clipwin {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
}
.clipwin picture,
.clipwin img,
.clipwin video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.clipwin video {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.clipwin video.is-on {
  opacity: 1;
}
/* TAAR's whole film (the home finale, round 3d) is longer than five seconds: its own pause in the
   window's corner (WCAG 2.2.2) — the ring's two glyphs on a round of the panel's black. */
.clipwin__toggle {
  position: absolute;
  z-index: 1;
  right: var(--s-2);
  bottom: var(--s-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 12, 0.78);
  color: var(--text);
  cursor: pointer;
}
.clipwin__toggle svg {
  width: 30px;
  height: 30px;
}
.clipwin__i-pause {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}
.clipwin__i-play {
  fill: currentColor;
}
.clipwin__toggle[data-state="playing"] .clipwin__i-play,
.clipwin__toggle[data-state="paused"] .clipwin__i-pause {
  display: none;
}
.clipwin__toggle:hover {
  background: var(--panel);
}

/* ─── the statement: TAAR's slogan as the section's h2, starting at column 3 and overlapping the
   lower-left corner of the clip window (columns 5–12) by exactly one bar row (-1.5em). At most
   one per page. ─── */
.statement__g {
  row-gap: 0;
}
.statement__h {
  position: relative;
  z-index: 1;
  margin-top: -1.5em;
}
@media (min-width: 600px) {
  .statement__clip {
    grid-column: col-start 3 / content-end;
  }
  .statement__h {
    grid-column: col-start 2 / content-end;
  }
}
@media (min-width: 1024px) {
  .statement__clip {
    grid-column: col-start 5 / content-end;
  }
  .statement__h {
    grid-column: col-start 3 / content-end;
  }
}

/* ─── the screen face: words set ON the LED face of the still (the manifest's face box →
   --fx/--fy/--fw/--fh), --panel fill, the bars at 7.2 % of the face. No WebGL needed. The
   same `.face` fills an ad frame's face (the "Vaša reklama ovdje" tile); `.face--drop` is the
   red drag-over state. ─── */
.facemsg {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: var(--ar, 1.50305);
}
.facemsg__still {
  position: absolute;
  inset: 0;
}
.facemsg__still img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.facemsg > .face {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
}
.face {
  display: grid;
  align-content: center;
  overflow: hidden;
  background: var(--panel);
  container-type: inline-size;
}
.face .bars {
  font-size: 7.2cqi;
  padding-inline: 7cqi;
}
.ledframe__face > .face {
  position: absolute;
  inset: 0;
}
.face--drop {
  background: var(--red);
}
.face--drop .bars__l--r {
  background: var(--signal);
  color: var(--red);
}

/* ─── the 10-second band: full-bleed --panel; the h2 and lede, the clock (the replay button),
   and the figure — five period tabs over ONE big number (every value is in the HTML; :has()
   shows the chosen one, so it works with no script) — or, `.tenband--row`, all five figures
   across. ─── */
.tenband {
  background: var(--panel);
}
.tenband__g {
  row-gap: var(--gap-head);
  align-items: start;
}
.tenband__head {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}
.tenband__clock {
  width: 100%;
  max-width: 420px;
}
.tenband__clock .clock {
  margin: 0;
}
.tenband__fig {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
  container-type: inline-size;
}
.tenband__note {
  color: var(--text-muted);
}
@media (min-width: 600px) {
  .tenband__clock {
    grid-column: col-start 1 / col-start 4;
  }
  .tenband__fig {
    grid-column: col-start 4 / content-end;
    align-self: center;
  }
}
@media (min-width: 1024px) {
  .tenband__head {
    grid-column: col-start 1 / col-start 9;
  }
  .tenband__clock {
    grid-column: col-start 1 / col-start 5;
  }
  .tenband__fig {
    grid-column: col-start 6 / content-end;
  }
  .tenband--row .tenband__clock {
    grid-column: col-start 1 / col-start 5;
    grid-row: 1;
  }
  .tenband--row .tenband__head {
    grid-column: col-start 6 / content-end;
    grid-row: 1;
    align-self: center;
  }
  .tenband--row .tenband__figs {
    grid-column: content;
    grid-row: 2;
  }
}
/* the tabs: radios + labels; the chosen one is TAAR's white box */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.tabs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tabs label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--t-ui);
  font-weight: 600;
  font-stretch: 112%;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.tabs label:hover {
  color: var(--text);
}
.tabs input:checked + label {
  background: var(--signal);
  color: var(--signal-ink);
}
.tabs input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.tenband__vals {
  display: grid;
}
.tenband__val {
  display: none;
  gap: var(--gap-attached);
  margin: 0;
  max-width: none;
}
.tenband__val[data-period="month"] {
  display: grid;
}
@supports selector(:has(*)) {
  .tenband__val[data-period="month"] {
    display: none;
  }
  .tenband:has(input[value="hour"]:checked) .tenband__val[data-period="hour"],
  .tenband:has(input[value="day"]:checked) .tenband__val[data-period="day"],
  .tenband:has(input[value="week"]:checked) .tenband__val[data-period="week"],
  .tenband:has(input[value="month"]:checked) .tenband__val[data-period="month"],
  .tenband:has(input[value="year"]:checked) .tenband__val[data-period="year"] {
    display: grid;
  }
}
.tenband__n {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: min(var(--t-mega), 26cqi);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.tenband__cap {
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--text);
  max-width: 34ch;
  /* always two lines tall (round 3f — Ante: "promjene u tom tekstu ne smiju utjecati na ostatak
     elemenata"): the week's and the year's captions wrap, the others do not, and the centred
     block moved the number and the tabs with every tab */
  min-height: 2.8em;
}
/* five figures across (≥ 960), 3 + 2 (600–959), 2 + 2 + 1 (phones) — no cell borders */
.tenband__figs {
  display: grid;
  gap: var(--gap-related);
}
.figs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-group) var(--col-gap);
}
.figs__c {
  display: grid;
  gap: var(--gap-attached);
  align-content: start;
  container-type: inline-size;
}
.figs__c:last-child {
  grid-column: 1 / -1;
}
.figs dt {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.figs dd {
  margin: 0;
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: min(var(--t-num-l), 28cqi);
  line-height: 0.9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (min-width: 600px) {
  .figs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .figs__c {
    grid-column: span 2;
  }
  .figs__c:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (min-width: 960px) {
  .figs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .figs__c,
  .figs__c:nth-child(n + 4) {
    grid-column: auto;
  }
}
/* a figure that counts: the real value stays in the HTML (and in the accessibility tree,
   only its ink goes transparent while the aria-hidden twin counts over it) */
.count {
  position: relative;
  display: inline-block;
}
.count__t {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  visibility: hidden;
}
.count.is-counting .count__v {
  color: transparent;
}
.count.is-counting .count__t {
  visibility: visible;
}

/* ─── the price trio: Tjedan / Mjesec / Godina — the price in --t-num-xl (round 4: each at its ONE
   price, no "od") + the price of one guaranteed play (the board's own arithmetic). ─── */
.trio {
  margin: 0;
  display: grid;
  gap: var(--gap-group) var(--col-gap);
}
@media (min-width: 600px) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.trio__c {
  display: grid;
  gap: var(--gap-attached);
  align-content: start;
  container-type: inline-size;
}
.trio__k {
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-ui);
  color: var(--text);
}
.trio__v {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
}
.trio__per {
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--text);
}
.trio__n {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: min(var(--t-num-xl), 34cqi);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.trio__cap {
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* ─── the ad tiles: no cards, only screens — the approved still ad frame with its bar under it
   (.adbar, below), the name (Archivo 700 wdth 118) linked to the advertiser's page, the category
   8 px under it, the external link on a 44 px row, no rule. ALL THE SAME SIZE since round 3c
   (Ante, 2026-09-30: "svi iste veličine uvijek, niko nije posebniji od nekog drugog"): 3 across
   from 1024 px, 2 from 600, 1 below; the last tile is "Vaša reklama ovdje", whose bar row says what
   it does, so every name sits on one line. No hover motion. ─── */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group) var(--col-gap);
  align-items: start;
}
@media (min-width: 600px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tile {
  display: grid;
  gap: var(--gap-attached);
  align-content: start;
}
.tile__link {
  display: grid;
  gap: var(--gap-attached);
  color: inherit;
  text-decoration: none;
}
.tile__name {
  font-size: var(--t-h3);
  font-stretch: 118%;
  font-weight: 700;
}
.tile__name a {
  color: inherit;
  text-decoration: none;
}
.tile__name a:hover,
.tile__link:hover .tile__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.tile__cat {
  color: var(--text-muted);
}
.tile__out {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--t-small);
}
/* the "your ad here" tile: the same cabinet, a --panel face with the bars, no ad-light */
.ledframe--msg .ledframe__face {
  background: var(--panel);
}

/* ─── the bar under an ad (round 3c — Ante, 2026-09-30: "ispod stavi traku i prikaz reklame kao
   YouTube"): ONE play button (▶ paused, ❚❚ playing, ↻ at the end — data-state), the seek bar and
   the time. The track is the white of the selected state over a faint line (the hero's ring uses
   the same pair); the handle is a square (square everywhere). 44 px tall; the range input IS the
   track, so a finger, a mouse and the arrow keys all seek (screen.js). With no script there is no
   bar — nothing would play. `.adbar--try` is the "your ad here" tile's row in the bar's place. ─── */
.adplay {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}
.adbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  min-width: 0;
}
html:not(.js) .adplay > .adbar {
  display: none;
}
.adbar__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.adbar__btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.adbar__btn:hover {
  background: var(--field);
}
.adbar__btn .adbar__i {
  display: none;
}
.adbar__btn[data-state="paused"] .adbar__i--play,
.adbar__btn[data-state="playing"] .adbar__i--pause,
.adbar__btn[data-state="ended"] .adbar__i--replay {
  display: inline;
}
.adbar__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 64px;
  height: 44px;
}
/* the line under the handle, and how far the ad has played */
.adbar__track::before,
.adbar__fill {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  pointer-events: none;
}
.adbar__track::before {
  right: 0;
  background: rgba(234, 238, 245, 0.28);
}
.adbar__fill {
  width: 100%;
  background: var(--signal);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.adbar__seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.adbar__seek::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
}
.adbar__seek::-moz-range-track {
  height: 44px;
  background: transparent;
}
.adbar__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: 15px;
  border: 0;
  border-radius: 0;
  background: var(--signal);
}
.adbar__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--signal);
}
.adbar__seek:focus-visible {
  outline-offset: -3px;
}
.adbar__time {
  flex: none;
  font-size: var(--t-small);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
/* "Vaša reklama ovdje": the bar's place carries what the tile does */
.adbar--try {
  font-weight: 600;
  color: var(--text);
}
.adbar--try .adbar__btn {
  background: var(--field);
  color: var(--text);
  width: 32px;
  height: 32px;
  margin: 6px 4px 6px 0;
}
.adbar--try .adbar__btn svg {
  width: 18px;
  height: 18px;
}
.tile__link:hover .adbar--try .adbar__try {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
/* On an advertiser's own page the frame is the page's picture: the bar keeps to its width. */
.adplay--lg {
  max-width: 1040px;
  margin-inline: auto;
  width: 100%;
}

/* ─── photographs: uncropped 4:3, full colour, no mask, eager with srcset; every one opens the
   §8 viewer (it is a `.gal-item`). `--photo-col` (photoFigure's `cols`) places it in a 12-column
   `.g`. ─── */
.photo {
  margin: 0;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  min-width: 0;
}
@media (min-width: 1024px) {
  .g > .photo {
    grid-column: var(--photo-col, content);
  }
}
.photo__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.photo__btn img {
  width: 100%;
  height: auto;
}
.photo__cap {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 48ch;
}
.photo__cap .linkbtn {
  color: var(--text);
  font-size: var(--t-ui);
}
/* "Fotografije ekrana" opens the viewer — with no script there is no viewer to open */
html:not(.js) [data-gal-open] {
  display: none;
}

/* ─── the spec sheet: label/value rows, 20 px rows, a hairline between rows (data rows). ─── */
.spec {
  margin: 0;
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--row-y-lg);
}
.spec__row + .spec__row {
  border-top: 1px solid var(--line);
}
.spec__row dt {
  color: var(--text-muted);
  font-size: var(--t-small);
}
.spec__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
@media (min-width: 600px) {
  .spec__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--s-5);
    align-items: baseline;
  }
}

/* ─── the end card: every page ends on --panel, like TAAR's video ends on its black card.
   Row 1 the way to act (the lede, the red button, WhatsApp | the phone in BSD 900, the e-mail) —
   on /rezervacija/ the help strip, on /kontakt/ none; row 2 the logo with the serif descriptor and
   three unlabelled columns of pages (the install link included); row 3 the legal line, ©, Made by.
   Print hides row 1. ─── */
.endcard {
  display: grid;
  row-gap: var(--gap-group);
  padding-block: var(--sec-y-lg) var(--s-7);
  background: var(--panel);
}
.endcard--contact {
  padding-top: var(--sec-y);
}
.endcard__r1 {
  row-gap: var(--gap-group);
  padding-bottom: calc(var(--gap-head) - var(--gap-group));
}
.endcard__r2 {
  row-gap: var(--gap-group);
}
.endcard__cta {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
  justify-items: start;
}
.endcard__text {
  display: grid;
  gap: var(--gap-related);
}
.endcard__lede {
  font-size: var(--t-h2);
}
.endcard__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
}
/* Round 4d (Ante, 2026-10-07: "smanji text email i broj, lipo ih udalji i rasporedi da bude clean i
   smooth i ne napadno"): the address and the number as a calm pair — a small muted label over each
   value, ONE size for both (round 4b: "oboje bitni jednako"), Archivo like every word. */
.endcard__reach {
  display: grid;
  gap: var(--gap-related);
  align-content: end;
  justify-items: start;
  margin: 0;
}
.endcard__reach dd {
  margin: 0;
}
.endcard__k {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.endcard__phone,
.endcard__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-words);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.55rem);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.endcard__phone:hover,
.endcard__mail:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
/* Two buttons of ONE size (round 4b: e-mail and WhatsApp, "oboje bitni jednako"). Round 4d: they sit
   side by side only where both fit without wrapping their words (each at least 15rem), and stack, full
   width and still equal, in a narrow column — the contact page's side column, a phone. */
.btn-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap-controls);
  width: min(100%, 36rem);
}
.btn-duo > .btn {
  width: 100%;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .btn-duo > .btn {
    white-space: normal;
  }
}
.endcard__brand {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  justify-items: start;
}
.endcard__logo {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.endcard__logo img {
  height: 56px;
  width: auto;
}
.endcard__desc {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text);
}
.endcard__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  align-content: start;
}
.endcard__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
}
.endcard__nav a,
.endcard__nav .linkbtn {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-ui);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 0.3em;
}
.endcard__nav a:hover,
.endcard__nav .linkbtn:hover,
.endcard__nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.endcard__steps {
  padding-bottom: var(--s-2);
  color: var(--text-muted);
  font-size: var(--t-small);
}
.endcard__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--text-muted);
}
.endcard__legal p {
  max-width: none;
}
.endcard__legal a {
  color: var(--text);
}
@media (min-width: 600px) {
  .endcard__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .endcard__cta {
    grid-column: col-start 1 / col-start 8;
  }
  .endcard__reach {
    grid-column: col-start 8 / content-end;
  }
  .endcard__brand {
    grid-column: col-start 1 / col-start 5;
  }
  .endcard__nav {
    grid-column: col-start 6 / content-end;
  }
}
@media print {
  .endcard {
    padding-block: 14pt 0;
  }
  .endcard__r1,
  .endcard [data-install-item],
  .adplay > .adbar {
    display: none !important;
  }
}

/* ─── the drawn plus: two 2 px bars that turn into × while their <details> is open ─── */
.plusx {
  position: relative;
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
}
.plusx::before,
.plusx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform 200ms var(--ease);
}
.plusx::after {
  transform: rotate(90deg);
}
details[open] > summary .plusx::before {
  transform: rotate(45deg);
}
details[open] > summary .plusx::after {
  transform: rotate(135deg);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   MOTION — only the product and the film move; each movement is tied to scroll or lasts
   ≤ 800 ms, and happens once. Sections never fade up. Every hidden state is guarded by
   `.taar-motion` (core.js), so no script — or reduced motion, or Save-Data — shows the end.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* the kote draw on: the lines wipe in left to right (the width, then the height on the near
   side), the labels follow 200 ms after the lines */
.taar-motion [data-kote-draw] svg[data-kote] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease);
}
.taar-motion [data-kote-draw].is-drawn svg[data-kote] {
  clip-path: inset(0 0 0 0);
}
.taar-motion [data-kote-draw] :is([data-dim-w], [data-dim-h], .kote-label) {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease) calc(var(--t-slow) + 200ms);
}
.taar-motion [data-kote-draw].is-drawn :is([data-dim-w], [data-dim-h], .kote-label) {
  opacity: 1;
}

/* the bars wipe — TAAR's transition at 5 s: a white skewX(-18°) parallelogram crosses each bar
   in 420 ms, the second bar 120 ms later. Statements only, never the LCP. */
.taar-motion [data-wipe] .bars__row {
  position: relative;
  overflow: hidden;
}
.taar-motion [data-wipe] .bars__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: var(--signal);
  transform: translateX(0) skewX(-18deg);
  pointer-events: none;
}
.taar-motion [data-wipe]:not(.is-wiped) .bars__row::after {
  visibility: hidden;
}
.taar-motion [data-wipe].is-wiped .bars__row::after {
  animation: taar-wipe 420ms var(--ease-io) 1 both;
}
.taar-motion [data-wipe].is-wiped .bars__row + .bars__row::after {
  animation-delay: 120ms;
}
@keyframes taar-wipe {
  from {
    transform: translateX(0) skewX(-18deg);
  }
  to {
    transform: translateX(360%) skewX(-18deg);
  }
}

/* the finale build: each [data-build-line] opens left to right, 520 ms, 120 ms apart */
.taar-motion [data-build] [data-build-line] {
  clip-path: inset(0 100% 0 0);
}
.taar-motion [data-build].is-built [data-build-line] {
  clip-path: inset(0 0 0 0);
  transition: clip-path 520ms var(--ease-io);
}
.taar-motion [data-build].is-built [data-build-line]:nth-child(2) {
  transition-delay: 120ms;
}
.taar-motion [data-build].is-built [data-build-line]:nth-child(3) {
  transition-delay: 240ms;
}
.taar-motion [data-build].is-built [data-build-line]:nth-child(4) {
  transition-delay: 360ms;
}
.taar-motion [data-build].is-built [data-build-line]:nth-child(5) {
  transition-delay: 480ms;
}
.taar-motion [data-build].is-built [data-build-line]:nth-child(6) {
  transition-delay: 600ms;
}

/* details (price rows, FAQ answers) open over 250 ms where the browser can animate to auto */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }
  }
}
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    details::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        block-size 250ms var(--ease),
        content-visibility 250ms allow-discrete;
    }
    details[open]::details-content {
      block-size: auto;
    }
  }
}

/* cross-page view transitions (Chrome/Edge 126+, Safari 18.2+; others just navigate): the header
   stays in place, the page's object morphs over 260 ms, the rest crossfades in 220 ms. The
   studio preview (srcdoc) cannot show it; the staging upload can. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(taar-object) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
  }
  ::view-transition-old(taar-hdr) {
    display: none;
  }
  ::view-transition-new(taar-hdr) {
    animation: none;
  }
}

/* ── assets/css/home.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — home.css: the HOME page's own rules (round 3, „Noćni signal” — the home slice owns
   this file and render/home.ts). Loaded after system.css and before inner.css / hero.css /
   book.css, so it may tune a component for the home page (scope every rule to a home-only
   class, e.g. `.hm-…`, or to `[data-page="home"]` on <html>) — never edit system.css for one page.
   Tokens only (base.css :root); the grid lines and the components are documented at the top of
   system.css. The hero (.cine) is styled in hero.css.

   The page (render/home.ts → homeBody), top to bottom:
     .cine       the hero ................................. hero.css
     .hm-where   "Na glavnoj cesti …" — words 1–4, the approved map 5–12
     .hm-proof   the real screen — the daylight photograph, its caption UNDER it (round 3d)
     .tenband    "Vaših 10 sekundi …" .......................... system.css
     .hm-advs    "Oni su već na ekranu" — the ad frames, all the same size, each with its bar
     .hm-price   "Izravno od vlasnika ekrana" — the price trio, the red button, the fine print
     .hm-fin     the finale — TAAR's slogan in stacked caps 1–7, TAAR's whole film 8–12 (round 3d)
     (the end card follows <main> on every page — chrome.ts / system.css)
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── 2 · where: the head, the map, the two directions and the link are four grid items. Below
   1024 px they stack in that order (the map right after the lede, the link last); from 1024 px the
   words take columns 1–4 in three rows and the map spans them in columns 5–12, its top on the
   heading's. When the map is the taller one the last row takes the slack, so the link stays right
   under the directions. ─── */
.hm-where__g {
  row-gap: var(--gap-group);
}
/* tablets: the two directions side by side, on the 4 + 4 columns */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .hm-where__g > .dirs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
@media (min-width: 1024px) {
  .hm-where__g {
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .hm-where__g > .hm-where__head,
  .hm-where__g > .dirs,
  .hm-where__g > .more {
    grid-column: col-start 1 / col-start 5;
  }
  .hm-where__g > .hm-where__head {
    grid-row: 1;
    container-type: inline-size;
  }
  /* Four columns hold only about six ems of --t-h2 per line, so "Seget Donji" (≈ 6.2 em in Archivo
     700 wdth 118, estimated from the fallback faces' size-adjust) would break in two and the
     heading run to four to six lines. Capped to 15 % of its column it keeps to three lines at
     every width from 1024 px ("Na glavnoj / cesti kroz / Seget Donji"), about 9 % under --t-h2. */
  .hm-where__head h2 {
    font-size: min(var(--t-h2), 15cqi);
  }
  .hm-where__g > .dirs {
    grid-row: 2;
  }
  .hm-where__g > .more {
    grid-row: 3;
  }
  .hm-where__g > .map {
    grid-column: col-start 5 / content-end;
    grid-row: 1 / span 3;
  }
}

/* ─── 3 · the real screen: a figure with no heading — since round 3d the daylight photograph, and
   its caption and "Fotografije ekrana" UNDER it on every width (Ante: "i tekst ispod nje"). The
   photograph is a portrait one: it keeps its own proportions (--proof-ar, from home.ts) and is never
   taller than 84 % of the view, so a laptop sees all of it with the words below. ─── */
.hm-proof .photo {
  justify-items: start;
}
.hm-proof .photo__btn {
  width: min(100%, calc(84vh * var(--proof-ar, 0.75)));
  width: min(100%, calc(84svh * var(--proof-ar, 0.75)));
}

/* ─── 5 · the advertisers: the head, then the tiles and the link as one group ─── */
.hm-advs__g {
  row-gap: var(--gap-head);
}

/* ─── 6 · the prices: the head, then the trio → the actions → the fine print, a group apart (the
   small line and the Sorich line are one stack, --gap-related apart — home.ts) ─── */
.hm-price__g {
  row-gap: var(--gap-head);
}

/* ─── 7 · the finale: TAAR's slogan as stacked capitals — the one place the site uses them. The
   heading is the size container: lines 2–3 at min(--t-mega, 19cqi) of it, line 1 at .5×, line 4
   at .7× (as in the video); lh .9, or 1.0 when a later line carries a marked capital (the builder
   adds --tall). Each line hugs its words, so the build (system.css [data-build]) opens it over its
   own width. The clip window's bottom sits on the last line's; on phones the window comes first.
   `overflow-x: clip` keeps a fallback face (before Big Shoulders arrives) from widening the page. ─── */
.hm-fin {
  overflow-x: clip;
}
.hm-fin__g {
  row-gap: var(--gap-group);
  align-items: end;
}
.hm-fin__g > .hm-fin__h {
  --fin: min(var(--t-mega), 19cqi); /* read by the lines: 19cqi of the heading */
  container-type: inline-size;
  display: grid;
  justify-items: start;
  max-width: none;
  margin: 0;
  font-family: var(--font-figures);
  font-weight: 900;
  font-stretch: 100%;
  line-height: 0.9;
  letter-spacing: normal;
  text-transform: uppercase;
  text-wrap: wrap;
  color: var(--text);
}
.hm-fin__g > .hm-fin__h--tall {
  line-height: 1;
}
.hm-fin__l {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--fin);
  letter-spacing: -0.01em;
}
.hm-fin__l--1 {
  font-size: calc(var(--fin) * 0.5);
}
.hm-fin__l--4 {
  font-size: calc(var(--fin) * 0.7);
}
.hm-fin__g > .hm-fin__clip {
  order: -1;
}
@media (min-width: 600px) {
  .hm-fin__g > .hm-fin__clip {
    grid-column: col-start 3 / content-end;
  }
}
@media (min-width: 1024px) {
  .hm-fin__g > .hm-fin__h {
    grid-column: col-start 1 / col-start 8;
    grid-row: 1;
  }
  .hm-fin__g > .hm-fin__clip {
    grid-column: col-start 8 / content-end;
    grid-row: 1;
    order: 0;
  }
}
/* The build's clip region, widened past each line box (system.css clips to the box itself): at
   lh .9 a capital's overshoot — and at lh 1.0 a caron — reaches over the box's top edge, and the
   final state must never cut ink. Same timing and delays as the system's build. */
.taar-motion .hm-fin__h[data-build] .hm-fin__l {
  clip-path: inset(-0.3em 100% -0.3em -0.2em);
}
.taar-motion .hm-fin__h[data-build].is-built .hm-fin__l {
  clip-path: inset(-0.3em -0.2em -0.3em -0.2em);
}

/* ─── print: a finale that never scrolled into view has not been built — print it whole ─── */
@media print {
  .hm-fin__l {
    clip-path: none !important;
  }
}

/* ── assets/css/inner.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — inner.css: the inner pages' own rules (round 3, „Noćni signal” — the inner-pages slice
   owns this file, render/pages.ts, render/inner.ts, book.css and the booking's markup): the LED
   screen, the poster side, the location, the prices and the calculator, the advertisers and each
   advertiser, the booking's page top, the ad guide, the FAQ, contact, 404, the offer and the legal
   pages. Loaded after system.css and home.css, before hero.css / book.css. Every rule here is
   scoped to an inner-page class (`in-*`, set by render/inner.ts and pageTop's `cls`) or to a
   component inside one; system.css is never edited for one page. Tokens only (base.css :root);
   the grid lines and the components are documented at the top of system.css.

   The rhythm every inner page follows (docs/HANDOFFS/taar-round3-design.md):
     · the page top (.ptop) opens on the page's own object — nothing behind it, no bars above h1;
     · a section's head ↔ its body is --gap-head, groups inside a body --gap-group, a heading ↔ its
       text --gap-related, a label ↔ its value --gap-attached — stacks, never margins;
     · the pages that explain something (specs, facts, rules, the template, the FAQ) hang their
       h2 in columns 1–4, sticky under the header, and their body in 5–12 (.in-split);
     · hairlines only on data rows (the spec sheet, the price rows, the calculator, the FAQ).
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ═══ the page tops (pageTop — render/blocks.ts; .ptop in system.css) ════════════════ */

/* The LED page's title row: the h1 is capped at 9 % of its OWN cell (columns 1–7), so a long title
   keeps to two lines from 1024 px (spec: "min(var(--t-h1), 9cqi)" — the cell, not the whole top, is
   the container that 9cqi measures). (An advertiser's page had the same row until 2026-10-01; it is
   the page "Na ekranu" opened on that client now.) */
@media (min-width: 1024px) {
  .in-top--led .ptop__title {
    container-type: inline-size;
  }
}

/* A split top puts the words in five columns (≈ 470 px at 1280): at the full --t-h1 a title like
   "Plakat uz glavnu cestu kroz Seget Donji" would stand five lines tall. The words' cell is the
   container, and the h1 is capped at 13 % of it — three lines at most for the longest titles, two
   for most (the cell is a grid item with a definite width, so the containment is safe). */
@media (min-width: 1024px) {
  .in-top.ptop--split .ptop__words {
    container-type: inline-size;
  }
  .in-top.ptop--split .ptop__h {
    font-size: min(var(--t-h1), 13cqi);
  }
}

/* Cjenik: the words take columns 1–6, the screen showing the price 7–12. */
@media (min-width: 1024px) {
  .in-top--price .ptop__words {
    grid-column: col-start 1 / col-start 7;
  }
  .in-top--price .ptop__obj {
    grid-column: col-start 7 / content-end;
  }
}

/* Ponuda: its long title takes the whole content width, so it keeps to two lines. */
@media (min-width: 1024px) {
  .in-top--offer .ptop__words {
    grid-column: content;
  }
}

/* Rezervacija: h1 + one line, tight, so the ribbon and step 1 share the first screen at 1280 × 720
   (the h1 at h2 size fits one line across the content width). */
.in-top--book {
  padding-top: calc(var(--hdr-h) + var(--s-6));
  padding-bottom: var(--s-6);
}
.in-top--book .ptop__h {
  font-size: var(--t-h2);
}
.in-top--book .ptop__lede {
  max-width: 62ch;
}
@media (min-width: 1024px) {
  .in-top--book .ptop__words {
    grid-column: content;
  }
}

/* Kontakt: the phone number is the page's object — Big Shoulders 900 at --t-num-xl, capped at
   12.5 % of its own paragraph (a size container), so the whole number always fits one line. */
/* Round 4d (Ante, 2026-10-07: "smanji text email i broj, lipo ih udalji i rasporedi da bude clean i smooth
   i ne napadno"): the contact page's object is a calm pair — a small muted label over each value, ONE
   size for both (round 4b: "oboje bitni jednako"), Archivo like every word, set well apart: side by side
   from 720 px, stacked below. */
.in-reach {
  display: grid;
  gap: var(--gap-group);
  margin: 0;
  max-width: none;
}
@media (min-width: 720px) {
  .in-reach {
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(3rem, 7vw, 7rem);
  }
}
.in-reach__item {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.in-reach__k {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.in-reach__v {
  margin: 0;
  font-family: var(--font-words);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.in-reach__v a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.in-reach__v a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* 404: the screen (the h1 is on its face) is first in the DOM and on the right from 1024 px. */
.in-404__en {
  display: grid;
  gap: var(--gap-related);
  justify-items: start;
}
.in-404__en h2 {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
.in-404__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-controls);
}
@media (min-width: 1024px) {
  .in-404 .ptop__obj {
    grid-column: col-start 6 / content-end;
    grid-row: 1;
  }
  .in-404 .ptop__words {
    grid-column: col-start 1 / col-start 6;
    grid-row: 1;
  }
}

/* ═══ the 4 | 8 section: a sticky h2 in columns 1–4, its body in 5–12 ═══════════════ */
.in-split__g {
  row-gap: var(--gap-group);
  align-items: start;
}
.in-split__head {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
  justify-items: start;
}
.in-split__body {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
  min-width: 0;
}
/* the ways on under a heading: text links, one per 44 px row */
.in-links {
  display: grid;
  justify-items: start;
}
@media (min-width: 1024px) {
  .in-split__head {
    grid-column: col-start 1 / col-start 5;
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
  .in-split__body {
    grid-column: col-start 5 / content-end;
  }
}

/* ═══ photographs: 7 + 5 (the second 128 px lower), then 4 + 4 + 4 ═══════════════════
   The set is its own grid on the content column with the same twelve lines as `.g`
   (photoFigure's --photo-col names them); 2 columns on tablets, 1 on phones. */
.in-photos__g {
  row-gap: var(--gap-head);
}
.in-photos__set {
  display: grid;
  gap: var(--gap-group) var(--col-gap);
  align-items: start;
}
@media (min-width: 600px) {
  .in-photos__set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .in-photos__set {
    grid-template-columns: repeat(12, [col-start] minmax(0, 1fr)) [content-end];
  }
  .in-photos__set > .photo {
    grid-column: var(--photo-col, 1 / -1);
  }
  .in-photos__set > .photo:nth-child(2) {
    margin-top: var(--s-10);
  }
}

/* ═══ the LED page ══════════════════════════════════════════════════════════════════ */
/* (the stage and its bar: hero.css; the 10 s band and the statement: system.css) */

/* ═══ the poster page ═══════════════════════════════════════════════════════════════ */
.in-combo {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
}

/* "Tko ga vidi": the words in columns 1–4 (rows 1–3), the map beside them in 5–12 across all
   rows; a last flexible row takes the map's extra height, so the words stay together. */
.in-who__g {
  row-gap: var(--gap-group);
  align-items: start;
}
.in-who__more {
  margin: 0;
}
@media (min-width: 1024px) {
  .in-who__g {
    grid-template-rows: auto auto auto 1fr;
  }
  .in-who__g > * {
    grid-column: col-start 1 / col-start 5;
  }
  .in-who__g > .map {
    grid-column: col-start 5 / content-end;
    grid-row: 1 / -1;
  }
}

/* ═══ the price board (render/inner.ts → priceBoard; its base in sections.css) ═════════ */
.in-board__g {
  row-gap: var(--gap-head);
}
/* the side tab row (round 4: no season tabs and no "now" caption under it) */
.in-board .board__controls {
  gap: var(--s-3) var(--s-6);
  padding-bottom: var(--s-6);
}
/* the rows: 28 px (spec), the name in Archivo, the price in Big Shoulders at --t-num-l */
.in-board .row summary {
  padding-block: calc(var(--s-5) + var(--s-1));
}
.in-board .row__name {
  font-size: var(--t-h3);
  line-height: 1.15;
}
.in-board .row__price {
  font-size: var(--t-num-l);
}
/* from 1024 px the row is the 12-column grid: the name 1–6, the price 7–11, the plus in 12; an open
   row's details and its red button start at column 7, under the price */
@media (min-width: 1024px) {
  .in-board .row summary,
  .in-board .row__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .in-board .row summary {
    align-items: baseline;
  }
  .in-board .row__name {
    grid-column: 1 / 7;
  }
  .in-board .row__price {
    grid-column: 7 / 12;
  }
  .in-board .row summary .plusx {
    grid-column: 12;
    justify-self: end;
  }
  .in-board .row__body > * {
    grid-column: 7 / -1;
  }
}

/* "Dobro je znati": one list; the flat-rate rule behind a drawn plus; the VAT line last */
.in-notes {
  display: grid;
  gap: var(--gap-related);
  max-width: var(--measure);
}
.in-notes__h {
  font-size: var(--t-h3);
}
.in-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.in-notes__vat {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.in-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.in-more summary::-webkit-details-marker {
  display: none;
}
.in-more > p {
  padding-top: var(--s-2);
  color: var(--text-muted);
}

/* ═══ the calculator: the form in columns 1–6, the --panel ticket in 8–12 ══════════════ */
.in-calc__g {
  row-gap: var(--gap-head);
}
.in-calc__ui {
  display: grid;
  gap: var(--gap-group);
  align-items: start;
}
@media (min-width: 1024px) {
  .in-calc__ui {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .in-calc__ui > .calc__form {
    grid-column: 1 / 7;
  }
  .in-calc__ui > .calc__out {
    grid-column: 8 / -1;
  }
}
@media (max-width: 479px) {
  .in-calc .calc__field .seg {
    justify-self: stretch;
  }
}
/* the ticket (sections.css .calc__out: --panel, --pad-card, sticky at header + 24 px) */
.in-calc__ticket {
  gap: var(--gap-related);
}
.in-calc__ticket .calc__row--total {
  display: grid;
  justify-content: stretch;
  gap: var(--s-2);
}
.in-calc__ticket .calc__row--total dd {
  text-align: left;
}
.in-calc__ticket .calc__final {
  padding-top: var(--s-2);
}

/* ═══ the location ══════════════════════════════════════════════════════════════════ */
/* the map at the full content width; under it the two directions (columns 1–8) and the address
   with the only Maps link (9–12) */
.in-where__g {
  row-gap: var(--gap-head);
}
.in-where__body {
  display: grid;
  gap: var(--gap-group) var(--col-gap);
  align-items: start;
}
.in-where__addr {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
}
.in-where__addrh {
  font-size: var(--t-h3);
}
@media (min-width: 600px) {
  .in-where__body > .dirs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
@media (min-width: 1024px) {
  .in-where__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .in-where__body > .map {
    grid-column: 1 / -1;
  }
  .in-where__body > .dirs {
    grid-column: 1 / 9;
  }
  .in-where__body > .in-where__addr {
    grid-column: 9 / -1;
  }
}

/* "Tko prolazi" (round 4 — render/sections.ts → whoPasses; it replaced the tourism figure, whose
   `.in-fig*` rules are archived in private/taar/_archive/2026-10-07-r4/before/): three figures — vehicles
   a day, overnight stays, pedestrians — each a Big Shoulders number over its caption and its source,
   no rules or boxes, space only. Three across from 960 px, stacked below. The LIST is the size
   container, so ONE cap serves all three and they stand at one size: a cell is about a third of the
   list (less the gaps), and the longest figure ("1.1 million", "+ pedestrians") must fit it —
   5.8 % of the list is 18 % of a cell. Stacked, a cell is the whole list. The pedestrians' figure is
   words, not a number, so it may wrap rather than run out of its cell. */
.in-pass__g {
  row-gap: var(--gap-head);
}
.in-pass__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-group) var(--col-gap);
  container-type: inline-size;
}
/* a figure, its caption and its source are ATTACHED (the price trio's rhythm) */
.in-pass__c {
  display: grid;
  gap: var(--gap-attached);
  align-content: start;
  min-width: 0;
}
.in-pass__n {
  margin: 0;
  max-width: none;
}
.in-pass__v {
  display: block;
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: min(var(--t-num-l), 24cqi);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
/* "+ pješaci" is WORDS, not a figure: Archivo wide at the heading size (CLAUDE.md rule 6 — Big
   Shoulders only for figures), on the figures' line. */
.in-pass__v--words {
  font-family: var(--font-words);
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
}
.in-pass__cap {
  margin: 0;
  max-width: 28ch;
  font-size: var(--t-lede);
  line-height: 1.35;
}
.in-pass__src {
  margin: 0;
  max-width: 34ch;
}
@media (min-width: 960px) {
  .in-pass__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .in-pass__v {
    font-size: min(var(--t-num-l), 5.8cqi);
  }
}

/* ═══ the ad guide ══════════════════════════════════════════════════════════════════ */
/* the readability rules: a Big Shoulders numeral beside each rule, the rule in lede size */
.in-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-related);
  counter-reset: rule;
}
.in-rules li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: baseline;
  max-width: 44ch;
  font-size: var(--t-lede);
  line-height: 1.4;
  counter-increment: rule;
}
.in-rules li::before {
  content: counter(rule);
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--t-num-m);
  line-height: 0.9;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
/* good and bad: two screens in the cabinet's black — no outline around them */
.in-dd .dd__screen {
  outline: 0;
  background: var(--panel);
}
.in-dd .dd__item--good .dd__screen {
  background: var(--red);
}
/* the template and its one download */
.in-tpl__img {
  width: 100%;
  height: auto;
}
.in-tpl__text {
  display: grid;
  gap: var(--gap-related);
  justify-items: start;
}
/* Sorich, the partner that makes ads (round 4): the PARTNER STRIP — a sheet of the panel's black
   (sections.css `.sorich--strip`) closing the ad guide and the price page. The section above it
   already ends in its own padding, so the strip sits flush under it and keeps a section's room
   below, before the end card. */
.in-sorich {
  padding-top: 0;
  padding-bottom: var(--sec-y-sm);
}

/* ═══ the FAQ: the group's heading sticky in columns 1–4, the questions in 5–12 ═════════ */
.in-faq {
  display: grid;
  row-gap: var(--gap-head);
}
.in-faq__group {
  row-gap: var(--gap-related);
  align-items: start;
}
.in-faq__h {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
@media (min-width: 1024px) {
  .in-faq__h {
    grid-column: col-start 1 / col-start 5;
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
  .in-faq__list {
    grid-column: col-start 5 / content-end;
  }
}

/* ═══ contact: where the screen is (1–7) | the business data (9–12) ════════════════════ */
.in-contact__g {
  row-gap: var(--gap-head);
  align-items: start;
}
.in-contact__where {
  display: grid;
  gap: var(--gap-group);
}
.in-contact__where h2,
.in-contact__biz h2 {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
.in-contact__biz {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
}
.in-contact__block {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
}
.in-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
}
@media (min-width: 1024px) {
  .in-contact__where {
    grid-column: col-start 1 / col-start 8;
  }
  .in-contact__biz {
    grid-column: col-start 9 / content-end;
  }
}
/* The business data always sits in a narrow column (contact, terms, the offer): each row stacks,
   the label over its value. */
.in-biz .spec__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
}

/* ═══ one advertiser ════════════════════════════════════════════════════════════════ */
/* Since 2026-10-01 a client's page is the page "Na ekranu" opened on that client (render/pages.ts
   advertiserBody); its share row is the screen's ("Podijelite ovu reklamu"). */
.in-share {
  align-items: center;
}
.in-share__k {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-muted);
}
/* "Želite li i Vi ovdje?" */
.in-advcta__g {
  row-gap: var(--gap-group);
}
@media (min-width: 1024px) {
  .in-advcta__g > * {
    grid-column: col-start 1 / col-start 9;
  }
}

/* ═══ Na ekranu (round 3c — render/screen.ts, screen.js) ═════════════════════════════════
   Ante, 2026-09-30: "posebna stranica šta će se prilagoditi ekranu i prikazati najveći element
   vodoravno ili okomito kako ekran dopušta". The top is the booking's (h1 at h2 size + one line,
   tight), so the screen is in the first view. The screen's box is as wide as its column allows
   and never taller than the window: its width is min(100 %, the height left × 1.696 — the frame's
   own aspect: the 3,5 : 2 face plus the cabinet's 2.1 % border). The list sits beside it from
   1024 px (columns 9–12), under it below. Full screen (the API's :fullscreen, or [data-theatre] —
   a fixed black stage where a phone has no API) gives the box the whole screen the same way. ═══ */
.in-top--scr {
  padding-top: calc(var(--hdr-h) + var(--s-6));
  padding-bottom: var(--s-5);
}
.in-top--scr .ptop__h {
  font-size: var(--t-h2);
}
.in-top--scr .ptop__lede {
  max-width: 62ch;
}
@media (min-width: 1024px) {
  .in-top--scr .ptop__words {
    grid-column: content;
  }
}
.in-scr__g {
  row-gap: var(--gap-group);
  align-items: start;
}
@media (min-width: 1024px) {
  .in-scr__stage,
  .in-scr__note {
    grid-column: col-start 1 / col-start 9;
  }
  .in-scr__side {
    grid-column: col-start 9 / content-end;
  }
}
.in-scr__stage {
  /* what the box needs under the frame: "Sada na ekranu" + the bar's two rows + their gaps */
  --scr-chrome: 150px;
  display: grid;
  justify-items: center;
  scroll-margin-top: calc(var(--hdr-h) + var(--s-3));
}
.in-scr__box {
  display: grid;
  gap: var(--s-3);
  width: min(100%, calc((100vh - var(--hdr-h) - var(--scr-chrome) - var(--s-7)) * 1.696));
  width: min(100%, calc((100svh - var(--hdr-h) - var(--scr-chrome) - var(--s-7)) * 1.696));
  min-width: min(100%, 288px);
}
.ledframe--scr .ledframe__glow {
  inset: 8% 6%;
  filter: blur(60px) saturate(1.35);
  opacity: 0.5;
}
/* the ads on the face: one element each, crossfading; the first frame (a <picture>) under them */
.in-scr__poster,
.in-scr__poster img,
.in-scr__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* The change from one ad to the next (2026-10-01 - Ante: "promjena je smooth moderna i premium"):
   a slow crossfade in which the new ad settles from a breath larger and the old one drifts away -
   only the ad moves, never the frame. Reduced motion keeps the plain fade. */
.in-scr__media {
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 0.7s var(--ease),
    transform 1.2s var(--ease);
}
.in-scr__media.is-on {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .in-scr__media {
    transform: none;
    transition: opacity var(--t-med) linear;
  }
}
.in-scr__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  min-height: 24px;
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
.in-scr__air {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--red);
}
.in-scr__next {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-muted);
}
/* the bar: the chapters on top, the controls under them */
.adbar--scr {
  display: grid;
  gap: 0;
}
.adbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}
.adbar__row .adbar__btn {
  margin-left: 0;
}
.adbar__row > .adbar__btn:first-child {
  margin-left: -10px;
}
.adbar__spacer {
  flex: 1 1 auto;
}
.adbar__track--ch::before {
  display: none;
}
.adbar__chs {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  gap: 3px;
  height: 4px;
  margin-top: -2px;
  pointer-events: none;
}
.adbar__ch {
  position: relative;
  flex: 1 1 0;
  min-width: 4px;
  overflow: hidden;
  background: rgba(234, 238, 245, 0.28);
}
.adbar__chfill {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
html:not(.js) .adbar--scr {
  display: none;
}
/* "Sve redom / Samo ova": two tool tabs, the chosen one the white box (the selected state) */
.in-scr__mode {
  display: inline-flex;
}
.in-scr__mode button {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 0;
  background: var(--field);
  color: var(--text-muted);
  font-family: var(--font-words);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.in-scr__mode button[aria-pressed="true"] {
  background: var(--signal);
  color: var(--signal-ink);
}
.in-scr__fullbtn .in-scr__i-exit,
.in-scr__stage[data-full] .in-scr__fullbtn .in-scr__i-full {
  display: none;
}
.in-scr__stage[data-full] .in-scr__fullbtn .in-scr__i-exit {
  display: inline;
}
.in-scr__fullbtn svg {
  fill: currentColor;
}
/* full screen: the stage is the whole screen, black, the box as big as it fits */
.in-scr__stage:fullscreen {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #000;
}
.in-scr__stage:-webkit-full-screen {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #000;
}
.in-scr__stage[data-theatre] {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: #000;
}
html[data-scr-theatre] {
  overflow: hidden;
}
.in-scr__stage[data-full] .in-scr__box {
  width: min(100%, calc((100vh - var(--scr-chrome) - 24px) * 1.696));
  width: min(100%, calc((100svh - var(--scr-chrome) - 24px) * 1.696));
}
/* The player's layout (2026-10-01): a phone on its side in full screen, or a phone held upright
   whose screen was turned (screen.js sets data-wide, and data-turned). The ad as big as it fits and
   always whole - black at its sides, never cropped - with no cabinet around it. The bar is ONE row
   lying over the ad's lower edge, and it steps aside after 2.5 s without a touch while the ad plays
   (data-idle); a touch brings it back. "Sada na ekranu" steps aside. */
.in-scr__stage[data-wide] {
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.in-scr__stage[data-wide] .in-scr__box {
  position: relative;
  gap: 0;
  width: min(100%, calc(100vh * 1.75));
  width: min(100%, calc(100svh * 1.75));
}
.in-scr__stage[data-wide] .ledframe__cab {
  padding: 0;
}
.in-scr__stage[data-wide] .in-scr__now,
.in-scr__stage[data-wide] .adbar__spacer {
  display: none;
}
.in-scr__stage[data-wide] .adbar--scr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-3) max(var(--s-2), env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  transition: opacity var(--t-med) var(--ease);
}
.in-scr__stage[data-wide][data-idle] .adbar--scr {
  opacity: 0;
  pointer-events: none;
}
.in-scr__stage[data-wide] .adbar__track--ch {
  order: 2;
  flex: 1 1 auto;
}
.in-scr__stage[data-wide] .adbar__row {
  order: 1;
  flex-wrap: nowrap;
}
/* Turned (a phone held upright, the turn button - Ante: "okrenuti televiziju da bude vodoravna"):
   the box lies across the screen, as long as the phone is tall (inside its notch and home bar) and
   as wide as it is wide, turned a quarter round about its centre. screen.js draws the turn itself:
   the screen moves from where it stood, leaning back a little on the way. */
.in-scr__stage[data-turned] {
  padding: 0;
  overflow: hidden;
}
.in-scr__stage[data-turned] .in-scr__box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom), (100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) * 1.75);
  width: min(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom), (100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) * 1.75);
  transform: translate(-50%, -50%) rotate(90deg);
}
.in-scr__stage[data-turned] .adbar--scr {
  padding-bottom: var(--s-2);
}
/* The turn button: only where it helps - a phone (a touch screen) held upright. */
.adbar__btn.in-scr__turnbtn {
  display: none;
}
@media (orientation: portrait) and (pointer: coarse) {
  .adbar__btn.in-scr__turnbtn {
    display: grid;
  }
}
.in-scr__turnbtn svg {
  transition: transform var(--t-med) var(--ease);
}
.in-scr__turnbtn[aria-pressed="true"] svg {
  transform: rotate(90deg);
}
/* the list: a thumbnail, the name and the trade, the length; the ad on the face marked */
.in-scr__side {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}
.in-scr__h {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
.in-scr__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* a row: the pick and the client's page beside it; their web site or Instagram under the trade */
.in-scr__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0 2px;
}
.in-scr__pick {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-words);
  font-size: var(--t-ui);
  text-align: left;
  cursor: pointer;
}
@media (min-width: 600px) {
  .in-scr__pick {
    grid-template-columns: 112px minmax(0, 1fr) auto;
  }
}
.in-scr__pick:hover,
.in-scr__pick[aria-current="true"] {
  background: var(--field);
}
.in-scr__pick[disabled] {
  cursor: default;
}
.in-scr__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #000;
}
.in-scr__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.in-scr__name {
  font-weight: 700;
  font-stretch: 112%;
}
.in-scr__pick[aria-current="true"] .in-scr__name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 0.08em;
  background: var(--red);
}
.in-scr__cat,
.in-scr__dur {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.in-scr__dur {
  font-variant-numeric: tabular-nums lining-nums;
}
.in-scr__page {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 44px;
  color: var(--text-muted);
}
.in-scr__page[aria-current="page"] {
  color: var(--text);
}
/* the client's own web site or Instagram (2026-10-01 - the advertisers' tiles had it), lined up
   with the name: the pick's padding + the thumbnail + the gap */
.in-scr__out {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: -6px 0 var(--s-1) calc(var(--s-2) + 88px + var(--s-3));
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.in-scr__out::after {
  content: "\2009\2197";
}
.in-scr__out:hover {
  color: var(--text);
}
@media (min-width: 600px) {
  .in-scr__out {
    margin-left: calc(var(--s-2) + 112px + var(--s-3));
  }
}
/* "Vaša reklama ovdje": the advertisers' page's last tile, now the list's last row - an empty
   screen drawn with a dashed line, to the page "Isprobajte svoju reklamu" */
.in-scr__yours {
  grid-template-columns: 88px minmax(0, 1fr);
  text-decoration: none;
}
@media (min-width: 600px) {
  .in-scr__yours {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}
.in-scr__yours:hover {
  background: var(--field);
}
.in-scr__thumb--yours {
  display: grid;
  place-items: center;
  border: 1px dashed var(--text-muted);
  background: transparent;
}
.in-scr__thumb--yours::before {
  content: "+";
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
}
.in-scr__page:hover {
  background: var(--field);
  color: var(--text);
}
.in-scr__page svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.in-scr__note {
  max-width: 62ch;
}

/* ═══ Isprobajte svoju reklamu (round 3d, its screen remade in round 3f — render/tryad.ts, tryad.js)
   Ante, 2026-09-30 (3d): "poseban page sa ekranom na vrhu i ispod podacima i settingsima". Round 3f:
   "zanemari dan, sumrak, noć i napravi 3D model reklame kao na početnoj stranici" — the screen on top
   is the 3D MODEL (render/hero.ts tryStage; its look lives in hero.css with the LED page's stage,
   .stage--try), not three photographs any more (their CSS — the tabs, .shot*, the day haze and the
   night glow — is archived in private/taar/_archive/2026-09-30-r3f/before/inner.css). The file, the
   checks, the settings, "Izdaleka" and the actions beside it from 1024 px (columns 9–12), under it
   below. ═══ */
.in-tryad__g {
  row-gap: var(--gap-group);
  align-items: start;
}
@media (min-width: 1024px) {
  .in-tryad__stage {
    grid-column: col-start 1 / col-start 9;
  }
  .in-tryad__side {
    grid-column: col-start 9 / content-end;
  }
}
.in-tryad__stage {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}
.in-tryad__stage > .stage {
  width: 100%;
}
.in-tryad__hint {
  margin: 0;
  max-width: 62ch;
}
/* beside (or under) the screen */
.in-tryad__side {
  display: grid;
  gap: var(--gap-group);
  align-content: start;
  min-width: 0;
}
.in-tryad__pick {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.in-tryad__pick p {
  margin: 0;
}
.in-tryad__pick input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* once an ad is on the screen the red belongs to "Rezervirajte s ovom reklamom" */
[data-has-file] .in-tryad__picklabel {
  background: var(--field);
  color: var(--text);
}
[data-has-file] .in-tryad__picklabel:hover {
  background: var(--line);
}
.in-tryad__result {
  display: grid;
  gap: var(--gap-group);
}
.in-tryad__file {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.in-tryad__block {
  display: grid;
  gap: var(--s-2);
}
.in-tryad__block > p {
  margin: 0;
}
.in-tryad__h {
  font-size: var(--fs-1, 1.0625rem);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.3;
}
.in-tryad__noad {
  margin: 0;
  color: var(--text-muted);
}
.in-tryad__noad .linkbtn {
  color: var(--text);
}
/* the checks are data rows: hairlines (moved here from the old sheet, round 3d) */
.try__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.try__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.4;
}
.try__ico {
  grid-row: 1 / span 3;
  padding-top: 1px;
}
.try__i {
  display: none;
  width: 20px;
  height: 20px;
}
.try__row[data-status="ok"] .try__i--ok,
.try__row[data-status="warn"] .try__i--warn,
.try__row[data-status="info"] .try__i--info {
  display: block;
}
.try__i--ok,
.try__i--info {
  color: var(--text-muted);
}
/* warnings: white text and an icon (never a colour — --sun has been unused since round 4) */
.try__i--warn {
  color: var(--text);
}
.try__k {
  font-weight: 600;
  color: var(--text);
}
.try__s {
  justify-self: end;
  font-weight: 600;
  color: var(--text-muted);
}
.try__row[data-status="warn"] .try__s {
  color: var(--text);
}
.try__v,
.try__n {
  grid-column: 2 / 4;
}
.try__v {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.try__n {
  color: var(--text);
}
/* an error: white text on the field, a 3 px white rule */
.try__err {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--text);
  background: var(--field);
  color: var(--text);
}
/* "Izdaleka": the face at the size a 3.5 m screen has from ~40 m (width set by render/tryad.ts) */
.try__farbox {
  box-sizing: content-box;
  max-width: calc(100% - 8px);
  padding: 3px;
  background: var(--bg);
  outline: 1px solid var(--line);
}
.try__farbox canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.try__road {
  display: grid;
  gap: 6px;
}
.try__raster {
  width: 100%;
  height: auto;
  margin-top: 6px;
  image-rendering: pixelated;
}

/* ═══ the legal pages and the offer ═════════════════════════════════════════════════ */
.in-legal__g {
  row-gap: var(--gap-group);
  align-items: start;
}
.in-legal__side {
  display: grid;
  gap: var(--gap-related);
  align-content: start;
}
.in-legal__h {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
@media (min-width: 1024px) {
  .in-legal__main {
    grid-column: col-start 1 / col-start 8;
  }
  .in-legal__side {
    grid-column: col-start 9 / content-end;
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
}
/* terms item 9: the list of what is not accepted, then one more sentence */
.rules__after {
  margin-top: var(--s-2);
}
/* privacy: heading + paragraph pairs, the pairs a group apart */
.in-prose {
  display: grid;
  gap: var(--gap-group);
  max-width: 70ch;
}
.in-prose__b {
  display: grid;
  gap: var(--gap-related);
}
.in-prose__b h2 {
  font-size: var(--t-h3);
  font-stretch: 112%;
  max-width: none;
}
/* the offer (a document to print): the cover, then its sections as stacks */
.in-offer__doc {
  display: grid;
  gap: var(--gap-group);
}
.in-offer__cover {
  display: grid;
  gap: var(--gap-attached);
}
.in-offer__cover img {
  width: 100%;
  height: auto;
}
.in-offer .offer__sec {
  display: grid;
  gap: var(--gap-related);
  padding-block: var(--s-7) 0;
}
.in-offer .offer__sec h2 {
  margin: 0;
}

/* ═══ print: the document, not the machinery ═══════════════════════════════════════ */
@media print {
  .ptop {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 12pt;
  }
  .ptop__acts,
  .ptop .crumb {
    display: none !important;
  }
  .in-offer .offer__sec {
    padding-block: 14pt 0;
  }
}

/* "Podijelite ovu reklamu" on the page "Na ekranu" (round 3d): the advertiser page's share row,
   under the list */
.in-scr__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-2);
}
.in-scr__share .in-share__k {
  flex: 1 0 100%;
  margin: 0;
}

/* ── assets/css/hero.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — the screen, everywhere it is drawn (spec §6, §11): the home page's opening (.cine), the
   LED page's stage (.stage), "Sada na ekranu", a still of the screen for any page (.screen-still)
   and the drop state (.face-drop). (The try-your-ad sheet, .try, is gone since round 3d: "Isprobajte
   svoju reklamu" is a page of its own — inner.css .in-tryad; the old block is archived in
   private/taar/_archive/2026-09-30-r3d/before/hero.css.)

   Round 3 ("Noćni signal", Ante 2026-09-30): one navy ground, the LED panel's black for the sheet,
   no seams, no outlined boxes — the screen is the only light. The home page's OPENING is round 2's
   "ulazimo u ekran" again (Ante, 2026-09-30: "vrati v1 verziju hero section"), with its words on
   plates of the panel's black. Tokens come from base.css; every round-3 token used here carries its
   value as a fallback (var(--panel, #05070c)), so this file never depends on the order the slices
   land in.

   Overlay positions are NOT written here: render/hero.ts puts the stills' measured anchors on
   .cine, .stage and .screen-still as custom properties (--ar the box aspect, --fx/--fy/--fw/--fh the
   LED face, --dwx/--dwy/--dhx/--dhy the kote labels, --hb the room under the housing in box widths
   — from public/uploads/taar/img/hero/manifest.json), and hero.js writes the opening's scroll
   geometry (px) straight onto the layers it moves.
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

.cine,
.stage,
.screen-still {
  --h-panel: var(--panel, #05070c);
  --h-kote: var(--kote, #525e76);
  --h-field: var(--field, #242d46);
  --h-att: var(--gap-attached, 8px);
  --h-rel: var(--gap-related, clamp(16px, 0.75rem + 1.2vw, 32px));
  --h-grp: var(--gap-group, clamp(32px, 1.5rem + 2vw, 64px));
}

/* ─── the sea: the three measured wave lines — a band under the housing only ──── */
.sea {
  position: absolute;
  pointer-events: none;
}
.sea__w {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
}
.sea__w path {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sea__w--0 path {
  stroke: var(--wave-1);
}
.sea__w--1 path {
  stroke: var(--wave-2);
}
.sea__w--2 path {
  stroke: var(--wave-3);
}
/* The LED page's stage: a band behind the housing's lower part and just under it (the home page's
   opening has round 2's own sea, in its block below). */
.stage__sea {
  inset: 0;
}
.stage__sea .sea__w {
  height: 13%;
}
.stage__sea .sea__w--0 {
  top: 58%;
}
.stage__sea .sea__w--1 {
  top: 67%;
}
.stage__sea .sea__w--2 {
  top: 77%;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   THE HOME PAGE'S OPENING — "ulazimo u ekran" (round 2, back by Ante's call on 2026-09-30:
   "vrati v1 verziju hero section … mobile first, sve mi se svidjelo"; the reference is the live
   copy at sorich.hr/test/taar/v1/). Round 2's rules, on round 3's tokens, with ONE change: every
   word of the first screen sits on its own bar of the LED panel's black (TAAR's bars device), so it
   reads over any frame of the video while the video stays visible around it ("samo tekst u prvom
   stadiju se ne vidi … uvijek vidljiv, a pozadina da bude vidljiva").
   data-mode="static"  (the markup; no script, reduced motion, Save-Data, no WebGL): three blocks —
                       TAAR's frame full-bleed under the headline, the still of the screen at
                       night with its kote, the poster side.
   data-mode="scroll"  (hero.js): the section is tall, the view sticks, and the scroll position
                       pulls the camera out of the screen and turns it. data-3d="on" once the
                       canvas can take over from the stills.
   --bar-h is the band the floating action button owns at the foot of a phone (base.css) — the
   same 64 px the phone's bottom bar had, so the opening keeps round 2's measures exactly.
   ⚠ No `overflow: hidden` on any ancestor of .cine (it kills the sticky view; `clip` is fine).
   ═══════════════════════════════════════════════════════════════════════════════════ */
/* --cine-run is how much scroll the three steps take. Round 3f (Ante, 2026-09-30: "uspori malo
   prijelaze … neka malo potraju", and the scroll is the page's own again): 320 view heights on a
   phone, 300 from 960 px (round 3d: 280). The moves themselves got gentler (hero.js apply — one
   smoothstep instead of two eases), so the bulk of each takes about twice the scroll without the
   opening getting much longer; each step holds still over its own stretch (hero.js TL). */
.cine {
  position: relative;
  margin-top: calc(-1 * var(--hdr-h)); /* under the sticky header, which is transparent over it */
  background: var(--bg);
  --cine-run: 320vh;
}
@supports (height: 1svh) {
  .cine {
    --cine-run: 320svh;
  }
}
@media (min-width: 960px) {
  .cine {
    --cine-run: 300vh;
  }
  @supports (height: 1svh) {
    .cine {
      --cine-run: 300svh;
    }
  }
}
.cine__view {
  position: relative;
  isolation: isolate;
}

/* ─── step 1: inside the screen ─── */
.cine__step--1 {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--hdr-h) + 24px) calc(var(--bar-h) + 104px);
  overflow: hidden;
}
@media (min-width: 960px) {
  .cine__step--1 {
    padding-bottom: calc(var(--bar-h) + clamp(88px, 11vh, 132px));
  }
}
.cine__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.cine__wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cine__text--1 {
  display: grid;
  gap: var(--stack);
  justify-items: start;
}
.cine__text--1 .bars {
  max-width: 100%;
  /* the first screen's headline never outgrows a short window */
  font-size: min(clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem), 8.4vh);
}
@supports (height: 1svh) {
  .cine__text--1 .bars {
    font-size: min(clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem), 8.4svh);
  }
}
.cine__lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-lede);
  line-height: 1.62; /* room between the line bars */
  color: var(--text);
}
/* THE PLATE: the words on the panel's black, one bar per line (box-decoration-break), exactly as
   TAAR's bars carry the headline — over any frame of the video, and nothing else covered. */
.cine__plate {
  display: inline;
  padding: 0.14em 0.42em 0.16em;
  background: rgba(5, 7, 12, 0.86); /* --panel at 86 % */
  color: var(--text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cine__actions {
  margin-top: 4px;
}
/* "Isprobajte svoju reklamu": a tool button on the panel's black — never a bare text link over the
   video. Since round 3d a LINK to the page "Isprobajte svoju reklamu" (it works with no script). */
.cine__try {
  background: rgba(5, 7, 12, 0.86);
  color: var(--text);
  text-decoration: none;
}
.cine__try:hover {
  background: var(--panel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* The scroll cue: a thin line that runs down twice (2 × 1.8 s — under WCAG 2.2.2's five seconds)
   beside its words on a plate. */
.cine__cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 2px;
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.cine__cue:hover .cine__plate {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.cine__cue-line {
  position: relative;
  flex: none;
  width: 2px;
  height: 34px;
  overflow: hidden;
  background: rgba(5, 7, 12, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .cine__cue-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -12px;
    width: 2px;
    height: 12px;
    background: var(--text);
    animation: cine-cue 1.8s var(--ease) 0.9s 2 both;
  }
  @keyframes cine-cue {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(48px);
    }
  }
}

/* The face: the opening's loop full-bleed (static; since round 4 the logo over the waves), or the LED
   face at its scroll-driven place (scroll).
   The LCP is the poster frame under the <video>; the video stays transparent until it really plays
   (hero.js adds .is-on), so the frame under it never flashes black. */
.cine__face {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--panel);
}
.cine__poster,
.cine__poster img,
.cine__face > video,
.cine__face > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.cine__face > video,
.cine__face > img {
  filter: brightness(1.12) saturate(1.06); /* the LED pixels take some light; the panel gives it back */
}
.cine__face > video[data-led-video] {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.cine__face > video[data-led-video].is-on {
  opacity: 1;
}

/* The LED pixels: round dots with the panel's black between them — what a screen looks like from
   close by. The cells belong to the face (hero.js sizes them with it) and fade out before they are
   small enough to shimmer. */
.cine__px {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  --px: 4.5px;
  background-image: radial-gradient(circle closest-side, rgba(3, 5, 10, 0) 64%, rgba(3, 5, 10, 0.62) 100%);
  background-size: var(--px) var(--px);
}
.cine__ign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The pixels light once per visit (spec §4.3): the face is dark from the first paint until hero.js
   takes over — and lights by itself after 1.6 s if the script never comes. */
@media (prefers-reduced-motion: no-preference) {
  .js .cine:not([data-lit]) .cine__px::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #04060b;
    animation: cine-dark 0.5s var(--ease) 1.6s forwards;
  }
  @keyframes cine-dark {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
}

/* A LIGHT shade — the words carry their own plates, so the video stays bright: only the header's
   strip and the foot are dimmed a little. (Round 3e: no frame at the view's edges any more — Ante,
   2026-09-30: the first screen is zoomed by whatever the device's shape asks for, so a bezel there is
   never at the screen's scale; the shape and the scale arrive with the scroll. The old rule is
   archived in private/taar/_archive/2026-09-30-r3e/before/hero.css.) */
.cine__scrim {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(17, 24, 49, 0.5) 0%, rgba(17, 24, 49, 0) 18%),
    linear-gradient(0deg, rgba(17, 24, 49, 0.42) 0%, rgba(17, 24, 49, 0) 36%);
}

/* The parts only the scroll mode uses. */
.cine__rig,
.cine__gl,
.cine__livek,
.cine__slot {
  display: none;
}

/* The video's pause (round 3e — Ante, 2026-09-30: the opening plays TAAR's video alone, "bez opcija i
   prikaza u kojoj je minuti"; round 3c's "Sada na ekranu" with its list is archived in
   private/taar/_archive/2026-09-30-r3e/before/hero.css). One round button with the finale film's
   glyphs (system.css .clipwin__toggle), where the ring was: bottom left of a phone above the
   floating button's band, bottom right of a wider view, clear of that button (--fab-room,
   base.css). WCAG 2.2.2 — what moves by itself for longer than five seconds can be stopped; it is
   also the way to start the video where a phone refused to (it then shows the play glyph). */
.cine__pause {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: calc(var(--bar-h) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 12, 0.78);
  color: var(--text);
  cursor: pointer;
}
.cine__pause svg {
  width: 30px;
  height: 30px;
}
.cine__pause-bars {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}
.cine__pause-play {
  fill: currentColor;
}
.cine__pause[data-state="playing"] .cine__pause-play,
.cine__pause[data-state="paused"] .cine__pause-bars {
  display: none;
}
.cine__pause:hover {
  background: var(--panel);
}
@media (min-width: 700px) {
  .cine__pause {
    left: auto;
    right: calc(var(--gutter) + var(--fab-room, 0px));
  }
}
/* No script, no video: nothing to pause. */
html:not(.js) .cine__pause {
  display: none;
}

/* A file dragged over the opening: "Pustite datoteku" as one of TAAR's red bars over the whole
   view (the drop state of hero.css, here fixed to the window rather than on a face). */
.face-drop.cine__drop {
  position: fixed;
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  z-index: 60;
  background: rgba(5, 7, 12, 0.78);
}
.cine__drop .face-drop__bar {
  font-size: clamp(1.25rem, 0.8rem + 2.4vw, 2.75rem);
}

/* ─── steps 2 and 3 as plain blocks (static) ─── */
.cine__step--2,
.cine__step--3 {
  position: relative;
  background: var(--bg);
  padding-block: var(--sec-y-sm);
}
.cine__step--3 {
  padding-top: 0;
}
.cine__grid {
  display: grid;
  gap: var(--gap-group);
  align-items: center;
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 960px) {
  .cine__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(28px, 4vw, 64px);
  }
  .cine__grid > .cine__text {
    grid-column: 1;
    grid-row: 1;
  }
  .cine__grid > .cine__fig {
    grid-column: 2;
    grid-row: 1;
  }
}
.cine__text--2,
.cine__text--3 {
  display: grid;
  gap: var(--gap-related);
  justify-items: start;
  min-width: 0;
  container-type: inline-size; /* caps the size figure and the headings to the column */
}
.cine__fig {
  margin: 0;
  min-width: 0;
}
.cine__figbox {
  position: relative;
  aspect-ratio: var(--ar);
}
.cine__figpic,
.cine__figpic img,
.cine__still,
.cine__still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Steps 2 and 3: a wide heading, one sentence, one text link (round 3's type on round 2's steps). */
.cine__h {
  margin: 0;
  max-width: 18ch;
  font-family: var(--body);
  font-weight: 700;
  font-stretch: 118%;
  font-size: min(var(--t-h2), 12cqi);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cine__h--size {
  display: grid;
  gap: var(--gap-attached);
  justify-items: start;
}
.cine__word {
  display: block;
}
/* "3,5 × 2 m": the number in the roadside face, as big as the column allows. */
.cine__size {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: min(var(--t-num-xl), 24cqi);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.cine__p {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}
.cine__more {
  margin: 0;
}
.cine__more .linkbtn {
  font-weight: 600;
}

/* The kote of a still (the static figure, the scroll rig), and the live ones over the canvas. */
.cine__kote,
.cine__kote-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cine__kote path,
.cine__kote-live path {
  fill: none;
  stroke: var(--wave-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* "3,5 m", "2 m" — on the line, the line knocked out behind the number (a drawing's convention). The
   stage's labels share it (round 3f: they had lost their base rule in round 3b and sat unplaced in
   the box's corner on the LED page). */
.cine__dim,
.stage__dim {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 2px 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  pointer-events: none;
}
.cine__dim--h,
.stage__dim--h {
  padding: 4px 2px;
}
.cine__rig .cine__dim--w,
.cine__figbox .cine__dim--w {
  left: var(--dwx);
  top: var(--dwy);
}
.cine__rig .cine__dim--h,
.cine__figbox .cine__dim--h {
  left: var(--dhx);
  top: var(--dhy);
}

/* ─── the scroll mode ─── */
.cine[data-mode="scroll"] {
  height: calc(100vh + var(--cine-run));
  height: calc(100svh + var(--cine-run));
}
.cine[data-mode="scroll"] .cine__view {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cine[data-mode="scroll"] .cine__step {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: none;
  pointer-events: none;
}
.cine[data-mode="scroll"] .cine__step--2,
.cine[data-mode="scroll"] .cine__step--3 {
  padding: 0;
}
.cine[data-mode="scroll"] .cine__text {
  opacity: 0;
  will-change: opacity, transform;
}
.cine[data-mode="scroll"] .cine__text--1 {
  opacity: 1;
}
.cine[data-mode="scroll"] .cine__step[data-on] .cine__text,
.cine[data-mode="scroll"] .cine__pause {
  pointer-events: auto;
}
.cine[data-mode="scroll"] .cine__fig {
  display: none;
}
.cine[data-mode="scroll"] .cine__rig,
.cine[data-mode="scroll"] .cine__face,
.cine[data-mode="scroll"] .cine__px {
  right: auto;
  bottom: auto;
  transform-origin: 0 0;
  will-change: transform;
}
.cine[data-mode="scroll"] .cine__rig {
  display: block;
  position: absolute;
  z-index: 1;
}
.cine[data-mode="scroll"] .cine__gl,
.cine[data-mode="scroll"] .cine__livek {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cine[data-mode="scroll"] .cine__gl {
  z-index: 3;
  opacity: 0;
}
.cine[data-mode="scroll"] .cine__livek {
  z-index: 5;
  opacity: 0;
}
.cine__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.cine__livek .cine__kote-live,
.cine__livek .cine__dim {
  opacity: 0; /* the scene fades them in with the face (it knows which side faces the viewer) */
}

/* The sea stands in the box's own units, far wider than the box, from behind the housing's lower
   part down past the view — so the camera's pull-back reveals it under the screen. */
.cine__sea {
  left: -100%;
  width: 300%;
  top: 60%;
  height: 70%;
}
.cine__sea .sea__w {
  height: 26%;
}
.cine__sea .sea__w--0 {
  top: 0;
}
.cine__sea .sea__w--1 {
  top: 16%;
}
.cine__sea .sea__w--2 {
  top: 34%;
}
.cine__still--poster {
  opacity: 0;
}

/* Steps 2 and 3 share one layout; its empty slot is where the object stands (hero.js fits the
   still's box into it). Phones: the object on top, the words below; wide screens: words left. */
.cine[data-mode="scroll"] .cine__grid {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: clamp(14px, 2.4vh, 24px);
  padding: calc(var(--hdr-h) + 10px) var(--gutter) calc(var(--bar-h) + 84px);
}
.cine[data-mode="scroll"] .cine__slot {
  display: block;
  grid-row: 1;
  width: 100%;
  aspect-ratio: var(--ar);
  max-height: 48vh;
  max-height: 48svh;
}
.cine[data-mode="scroll"] .cine__grid > .cine__text {
  grid-row: 2;
  grid-column: 1;
}
@media (min-width: 960px) and (min-aspect-ratio: 23/20) {
  .cine[data-mode="scroll"] .cine__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
    padding: calc(var(--hdr-h) + 20px) var(--gutter) calc(var(--bar-h) + 92px) max(var(--gutter), calc((100% - var(--maxw)) / 2));
  }
  .cine[data-mode="scroll"] .cine__slot {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }
  .cine[data-mode="scroll"] .cine__grid > .cine__text {
    grid-column: 1;
    grid-row: 1;
  }
}
/* Short phones in landscape: the words beside the object as well. */
@media (max-width: 959.98px) and (min-aspect-ratio: 3/2) {
  .cine[data-mode="scroll"] .cine__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    padding-bottom: calc(var(--bar-h) + 60px);
  }
  .cine[data-mode="scroll"] .cine__slot {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }
  .cine[data-mode="scroll"] .cine__grid > .cine__text {
    grid-column: 1;
    grid-row: 1;
  }
  .cine[data-mode="scroll"] .cine__h {
    font-size: min(var(--t-h3), 12cqi);
  }
  .cine[data-mode="scroll"] .cine__p {
    font-size: var(--t-ui);
  }
}

/* Short phones (the scroll mode needs a view at least 540 px tall — hero.js): the first screen and
   the steps get compact, so nothing reaches the pause or the floating button's band. */
@media (max-width: 959.98px) and (max-height: 700px) {
  .cine[data-mode="scroll"] .cine__step--1 {
    padding-bottom: calc(var(--bar-h) + 76px);
  }
  .cine[data-mode="scroll"] .cine__lede,
  .cine[data-mode="scroll"] .cine__p {
    font-size: var(--t-ui);
  }
  .cine[data-mode="scroll"] .cine__cue {
    display: none;
  }
  .cine[data-mode="scroll"] .cine__actions .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: var(--t-ui);
  }
  .cine[data-mode="scroll"] .cine__grid {
    padding-bottom: calc(var(--bar-h) + 70px);
  }
  .cine[data-mode="scroll"] .cine__slot {
    max-height: 40vh;
    max-height: 40svh;
  }
  .cine[data-mode="scroll"] .cine__h {
    font-size: min(var(--t-h3), 12cqi);
  }
  .cine[data-mode="scroll"] .cine__size {
    font-size: min(var(--t-num-l), 20cqi);
  }
}

/* Phones (round 3f, "mobile first"): the view is as tall as the LARGE viewport — the address bar
   folded away — so no strip of the page's navy shows under step 1's video when the bar folds while
   scrolling; the steps' words and the object's slot stay in the SMALL viewport, visible whether the
   bar is out or not. hero.js measures the view (now the large viewport) and the slot, so the geometry
   and the run (= --cine-run) stay the same while the bar comes and goes. On a desktop lvh = svh:
   nothing changes. */
@supports (height: 1lvh) {
  .cine[data-mode="scroll"] {
    height: calc(100lvh + var(--cine-run));
  }
  .cine[data-mode="scroll"] .cine__view {
    height: 100lvh;
  }
  .cine[data-mode="scroll"] .cine__step {
    bottom: auto;
    height: 100svh;
  }
  .cine[data-mode="scroll"] .cine__step--1 {
    overflow: visible; /* the view clips; the scene reaches the view's foot */
  }
  .cine[data-mode="scroll"] .cine__scene {
    bottom: calc(100svh - 100lvh);
  }
}

/* The canvas has the object: the stills and their kote step back (the live kote take over). */
.cine[data-3d="on"] .cine__still,
.cine[data-3d="on"] .cine__rig .cine__kote,
.cine[data-3d="on"] .cine__rig .cine__dim {
  opacity: 0 !important;
  transition: opacity 0.35s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   "SADA NA EKRANU" — the LED page's stage (the home page's opening has only its pause since round 3e)
   The ring (the pause for the video and the waves — WCAG 2.2.2; 36 px in a 44 px target), the 8 px
   red on-air square (hollow while paused), the name in white, the time, "Sljedeće". Never a count.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.stage__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  min-height: var(--c-now, 56px);
}
.stage__ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.stage__ring svg {
  width: 36px;
  height: 36px;
}
.stage__ring-track {
  fill: none;
  stroke: var(--h-kote, #525e76);
  stroke-width: 2.5;
}
.stage__ring-bar {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
}
.stage__ring-pause {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.stage__ring-play {
  fill: currentColor;
}
.stage__ring[data-state="playing"] .stage__ring-play,
.stage__ring[data-state="paused"] .stage__ring-pause {
  display: none;
}
.stage__air {
  flex: none;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--red);
  background: var(--red);
}
.stage__now:has(.stage__ring[data-state="paused"]) .stage__air {
  background: transparent;
}
.stage__nowtext {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.stage__nowname {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-ui, 1rem);
  line-height: 1.3;
  color: var(--text);
}
.stage__time {
  margin: 0;
  font-size: var(--t-small, 0.9375rem);
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.stage__next {
  margin: 0 0 0 auto;
  font-size: var(--t-small, 0.9375rem);
  line-height: 1.3;
  color: var(--text-muted);
}
html:not(.js) .stage__ring,
html:not(.js) .stage__time {
  display: none;
}
/* "Pokreni" (the LED page's stage) — only when a phone refuses to autoplay, or under Save-Data /
   reduced motion: a tool button (the field's fill, white). */
.stage__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--h-field, #242d46);
  color: var(--text);
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-ui, 1rem);
  line-height: 1;
  cursor: pointer;
}
.stage__play:hover {
  background: var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   A STILL OF THE SCREEN, FOR ANY PAGE (render/hero.ts → screenStill): the box of the stills' aspect,
   the picture, and HTML on the LED face — a --panel rectangle and a size container (1cqi = 1 % of
   the face's width), for a message set as TAAR's bars. No script, no WebGL.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.screen-still {
  position: relative;
  aspect-ratio: var(--ar);
}
.screen-still__pic,
.screen-still__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.screen-still__face {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--h-panel);
  container-type: inline-size;
}

/* ─── THE MODEL: a visitor's own ad on the screen (the booking's file step) ───
   Ante, 2026-09-30: "prikaz ekrana kao modela i u njemu taj video da se vrti u loopu". The still of
   the 3D screen on the night's navy, the file filling the face as the screen fills it (cover), a
   silent video looping; the pause (WCAG 2.2.2) in the face's corner. */
.model {
  background: var(--bg);
}
.model-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.model-face > video,
.model-face > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: brightness(1.08) saturate(1.04); /* as the page's own screen shows it */
}
/* Round 3f, the try page's rule (book.js modelFit): a picture far from the face's shape is shown
   WHOLE, centred, over a small copy of itself stretched and blurred. */
.model-face > [data-fit="whole"] {
  object-fit: contain;
}
.model-blur {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  filter: blur(14px) brightness(0.5);
}
.model-toggle {
  position: absolute;
  z-index: 1;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 12, 0.78);
  color: var(--text);
  cursor: pointer;
}
.model-toggle svg {
  width: 30px;
  height: 30px;
}
.model-toggle__pause {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}
.model-toggle__play {
  fill: currentColor;
}
.model-toggle[data-state="playing"] .model-toggle__play,
.model-toggle[data-state="paused"] .model-toggle__pause {
  display: none;
}
.model-toggle:hover {
  background: var(--h-panel);
}

/* ─── the drop state: a file dragged over the face — "Pustite datoteku" as a red bar ─── */
.face-drop {
  position: absolute;
  z-index: 6;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  display: grid;
  place-items: center;
  background: var(--h-panel, #05070c);
  container-type: inline-size;
  pointer-events: none;
}
.face-drop__bar {
  display: block;
  padding: 0.16em 0.42em 0.12em;
  background: var(--red);
  color: var(--red-ink, #ffffff);
  font-family: var(--body);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 7.2cqi;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   THE STAGE — the LED page: straight, centred, calm while the ads play (no sway); a hand turns it
   (the link, the arrow keys, a drag); a file dropped on the face opens the try sheet.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.stage {
  position: relative;
  /* The whole content width, never taller than 62 % of the view. */
  --stage-w: min(100%, calc(62vh * var(--ar)));
}
@supports (height: 1svh) {
  .stage {
    --stage-w: min(100%, calc(62svh * var(--ar)));
  }
}
/* A fixed aspect: the still, the card and the canvas all fill this box, so swapping one for
   another can never move the page. */
.stage__box {
  position: relative;
  z-index: 0;
  width: var(--stage-w);
  margin-inline: auto;
  aspect-ratio: var(--ar);
  -webkit-user-select: none;
  user-select: none;
}
/* The still: transparent around the object, so the waves stay behind it. */
.stage__still {
  position: absolute;
  inset: 0;
}
.stage__still img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The flat flip card — exactly on the still's LED face (the no-WebGL page, spec §6.2). */
.stage__fb {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: calc(var(--fx) + var(--fw) / 2) calc(var(--fy) + var(--fh) / 2);
  pointer-events: none;
}
.stage__plate,
.stage__card {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
}
.stage__plate {
  background: var(--h-panel); /* the dark panel the card turns over, hiding the still's face */
}
.stage__card {
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease-io);
}
.stage[data-side="poster"] .stage__card {
  transform: rotateY(180deg);
}
.stage__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--h-panel);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.stage__face--poster {
  transform: rotateY(180deg);
}
.stage__media,
.stage__face > video,
.stage__face > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.stage__name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6%;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-4, 2.4rem);
  line-height: 1;
  text-align: center;
  color: var(--text);
}
/* Reduced motion: the turn is a crossfade (spec §6.2). base.css zeroes every transition under
   reduced motion; an opacity fade is not motion, so it is given back here, more specifically. */
@media (prefers-reduced-motion: reduce) {
  .stage .stage__card {
    transform: none !important;
    transition: none !important;
  }
  .stage .stage__face {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transition: opacity 420ms linear !important;
  }
  .stage .stage__face--poster {
    transform: none;
    opacity: 0;
  }
  .stage[data-side="poster"] .stage__face--poster {
    opacity: 1;
  }
  .stage[data-side="poster"] .stage__face--led {
    opacity: 0;
  }
}
/* A page that opens turned (?side=poster) is turned before the first paint, not animated to it. */
.stage[data-instant] .stage__card {
  transition: none;
}

/* The canvas: mounted invisible, shown the moment its first frame is drawn (data-mode="3d"). */
.stage__gl {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.stage__snap {
  opacity: 0;
  pointer-events: none;
}
.stage[data-mode="3d"] .stage__gl {
  opacity: 1;
}
.stage[data-mode="3d"] .stage__still,
.stage[data-mode="3d"] .stage__fb {
  opacity: 0; /* the card's <video> keeps feeding the canvas: transparent, never display: none */
}
.stage[data-mode="3d"] .stage__card {
  transform: none;
  transition: none;
}

/* The kote: the still's path, and the one the 3D scene redraws every frame. */
.stage__kote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.stage__kote path {
  fill: none;
  stroke: var(--h-kote);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.stage__kote-live {
  display: none;
}
.stage[data-mode="3d"] .stage__kote-still {
  display: none;
}
.stage[data-mode="3d"] .stage__kote-live {
  display: inline;
}
/* The kote measure the LED face; on the poster side (size not confirmed, spec §10) no number points
   at anything. In 3D the scene fades them itself, frame by frame — no CSS transition there. */
.stage:not([data-mode="3d"]) .stage__kote,
.stage:not([data-mode="3d"]) .stage__dim {
  transition:
    opacity var(--t-med) var(--ease),
    visibility 0s linear 0s;
}
.stage[data-side="poster"]:not([data-mode="3d"]) .stage__kote,
.stage[data-side="poster"]:not([data-mode="3d"]) .stage__dim {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-med) var(--ease),
    visibility 0s linear var(--t-med);
}
.stage__dim {
  left: var(--dwx);
  top: var(--dwy);
}
.stage__dim--h {
  left: var(--dhx);
  top: var(--dhy);
}

/* The surface that takes the drag and the arrow keys (the label says so). */
.stage__view {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  touch-action: pan-y; /* a finger moving up or down still scrolls the page */
  -webkit-tap-highlight-color: transparent;
}
.stage__view:active {
  cursor: grabbing;
}
.stage__view:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.stage__play {
  position: absolute;
  z-index: 3;
  left: calc(var(--fx) + var(--fw) / 2);
  top: calc(var(--fy) + var(--fh) / 2);
  transform: translate(-50%, -50%);
}

/* ─── the try page's model (round 3f — render/hero.ts tryStage, assets/js/tryad.js) ───
   The LED page's stage with no loop and no bar. The flat face says "Vaša reklama ovdje" until a
   file is picked, then shows the file by the 3D face's own rule: data-fit "fill" (it covers the
   face — a picture close to its shape) or "whole" (the whole picture, centred, over a small copy of
   it that CSS stretches and blurs). Under the 3D face all of it stays in the page, transparent —
   the file's element feeds the canvas. */
.stage__ph,
.stage__ph > .face {
  position: absolute;
  inset: 0;
}
/* the width the canvas can draw the bars at too (a canvas knows no 118 %), so the hand-over to the
   3D face does not move the words */
.stage__ph .bars {
  font-stretch: 112.5%;
}
.stage__face > .stage__fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.stage__face > .stage__fit[data-fit="fill"] {
  object-fit: cover;
}
.stage__blur {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  filter: blur(14px) brightness(0.5);
}
/* the safe margins on the flat face (the 3D face draws its own) */
.stage__safe {
  position: absolute;
  z-index: 1;
  left: calc(var(--fx) + var(--fw) * 0.05);
  top: calc(var(--fy) + var(--fh) * 0.05);
  width: calc(var(--fw) * 0.9);
  height: calc(var(--fh) * 0.9);
  border: 2px dashed rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.stage[data-mode="3d"] .stage__safe {
  display: none;
}
/* the video's pause at the face's lower right corner, above the drag surface */
.stage__toggle {
  z-index: 4;
  right: calc(100% - var(--fx) - var(--fw) + 8px);
  bottom: calc(100% - var(--fy) - var(--fh) + 8px);
}
.stage--try[data-drag] .stage__box {
  outline: 3px dashed var(--signal);
  outline-offset: 4px;
}

/* The bar under the stage, 24 px under the housing: "Sada na ekranu" from the face's left edge,
   then the red "Rezervirajte LED ekran" and the two text links, ending at the face's right edge. */
.stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  width: var(--stage-w);
  margin: calc(24px - var(--stage-w) * var(--hb, 0.0993)) auto 0;
}
.stage__bar > .stage__now {
  margin-left: var(--fx);
}
.stage__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-right: var(--fx);
}
html:not(.js) .stage__acts button {
  display: none;
}
@media (max-width: 699.98px) {
  .stage__bar {
    justify-content: flex-start;
  }
  .stage__acts {
    margin-left: var(--fx);
  }
}

/* ─── print: the stills and the words, laid out flat, not the machinery ────────────────────── */
@media print {
  .face-drop,
  .model-toggle,
  .stage__view,
  .stage__play,
  .stage__ring,
  .stage__gl,
  .cine__gl,
  .cine__livek,
  .cine__px,
  .cine__scrim,
  .cine__pause,
  .cine__cue,
  .cine__face > video {
    display: none !important;
  }
  .stage[data-mode="3d"] .stage__still {
    opacity: 1;
  }
  .cine[data-mode="scroll"] {
    height: auto !important;
  }
  .cine[data-mode="scroll"] .cine__view,
  .cine[data-mode="scroll"] .cine__step {
    position: relative;
    height: auto;
    inset: auto;
  }
  .cine__text,
  .cine__text * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── assets/css/book.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════
   TAAR — the booking (spec §14): the four steps, the calendar, the summary, the phone's
   bottom bar, the upload progress, the done screen and the manual sending instructions.
   Tokens and primitives only (base.css): .btn, .linkbtn, .field, .input, .check, .seg.
   Every class here is namespaced `bk` so nothing collides with the other slices; book.js finds
   its parts by `data-bk-*` only, so this file changes the look and never the behaviour.

   Two states, both designed:
     · no script  — `.bk` alone: one readable page, every step visible, no summary, no bar;
     · the wizard — `.bk[data-bk-on]` (set by book.js once it has started): one step at a
       time, the sticky summary beside it on a desktop, the bottom bar on a phone
       (`[data-bk-bar]`, only while the form fills the screen).

   Round 3 („Noćni signal”, docs/HANDOFFS/taar-round3-design.md → "Forms and booking"):
     · the ribbon's four numerals in Big Shoulders 900 at 48 px;
     · step 1's tiles show the object — the LED still, the paper poster, both — over a label strip
       (--field) that turns into TAAR's white box when chosen; no outlined boxes anywhere;
     · inputs 52 px on --field with a 1 px --text-muted edge (base.css); errors and warnings are
       white text + a mark + a 3 px white rule (round 4: no seasons, so the calendar carries no
       `--sun` bar either);
     · the summary is a --panel ticket, its total and the order code in Big Shoulders 900;
     · secondary actions are tool buttons (--field) or text links; below 480 px a segmented
       control is a 2-column grid (base.css) that fills its column.
   Made by [sorich.hr](https://sorich.hr/#top)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── layout ─────────────────────────────────────────────────────────────────── */
.bk__grid {
  display: grid;
  gap: var(--gap-group);
}
/* Without the script the steps are one long page: keep the measure readable. */
.bk__form {
  min-width: 0;
  max-width: 52rem;
}
@media (min-width: 960px) {
  .bk[data-bk-on] .bk__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
  .bk[data-bk-on] .bk__form {
    max-width: none;
  }
}

/* ─── the ribbon: four numerals, the current one lit ─────────────────────────── */
.bk-ribbon {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.bk-ribbon__list {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.bk-ribbon__a {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  min-height: 44px;
  padding-top: var(--s-3);
  border-top: 3px solid var(--line);
  color: var(--text-muted);
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.bk-ribbon__a:hover {
  color: var(--text);
}
.bk-ribbon__i[data-state="done"] .bk-ribbon__a {
  border-top-color: var(--text-muted);
  color: var(--text);
}
.bk-ribbon__a[aria-current="step"] {
  border-top-color: var(--signal);
  color: var(--text);
}
.bk-ribbon__n {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: 3rem; /* 48 px (spec) */
  line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
.bk-ribbon__t {
  font-size: var(--t-small);
  line-height: 1.3;
}
.bk-ribbon__of {
  flex: none;
  margin: 0;
  font-size: var(--t-small);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* "Korak 2 od 4" is the ribbon's caption on a phone, where the titles do not fit. On a wider
   screen the titles say it; a screen reader still hears it. Without the script there is no
   "current" step at all, so it is not shown. */
.bk:not([data-bk-on]) .bk-ribbon__of {
  display: none;
}
@media (max-width: 599px) {
  .bk-ribbon__t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (min-width: 600px) {
  .bk-ribbon__of {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ─── a step ─────────────────────────────────────────────────────────────────── */
/* Margins, not a grid gap: the step's error line is an always-present live region (so a
   screen reader hears it the moment it fills) and must take no room while it is empty. */
.bk-step {
  min-width: 0;
}
.bk-step > * + * {
  margin-top: var(--gap-related);
}
.bk-step > .bk-step__err:empty {
  margin-top: 0;
}
/* No script: four steps in a row, a head's distance apart (space, not a rule). */
.bk:not([data-bk-on]) .bk-step + .bk-step {
  margin-top: var(--gap-head);
}
.bk-step__h {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-h3);
  font-stretch: 112%;
  scroll-margin-top: calc(var(--hdr-h) + var(--s-3));
}
/* The only numbering on the site (DESIGN-PLAN): the booking is a real sequence. In the wizard the
   ribbon above shows the numeral, so the heading carries the words alone. */
.bk-step__n {
  flex: none;
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: 1.35em;
  line-height: 0.8;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.bk[data-bk-on] .bk-step__n {
  display: none;
}
.bk-lbl {
  margin: 0;
}

/* ─── step 1: the three tiles — the object itself over a label strip ─────────── */
.bk-cards {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 720px) {
  .bk-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.bk-card {
  position: relative;
  display: grid;
}
.bk-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.bk-card label {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  cursor: pointer;
}
/* The stills are transparent around the object: the night ground shows through. The box is a
   little wider than the stills (1.7 : 1) so it crops the empty sky and road, never the screen. */
.bk-card__pic {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-1);
  aspect-ratio: 1.7;
  overflow: hidden;
}
.bk-card__pic picture,
.bk-card__pic img {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.bk-card__pic img {
  object-fit: cover;
}
.bk-card__pic--both img {
  object-fit: contain;
}
/* the glyph drawn when the stills are not on disk */
.bk-card__g {
  place-self: center;
  width: 44px;
  height: 26px;
}
.bk-card__strip {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding: var(--s-3) var(--s-4);
  background: var(--field);
  color: var(--text);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.bk-card label:hover .bk-card__strip {
  background: var(--line);
}
.bk-card__t {
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-ui);
  line-height: 1.25;
}
.bk-card__d {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--text-muted);
}
/* chosen: the label strip is TAAR's white box */
.bk-card input:checked + label .bk-card__strip {
  background: var(--signal);
  color: var(--signal-ink);
}
.bk-card input:checked + label .bk-card__d {
  color: var(--signal-ink);
}
.bk-card input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* A phone: each tile lies on its side — the object on the left, the strip on the right — so the
   three options fit one screen. */
@media (max-width: 719px) {
  .bk-card label {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: none;
  }
  .bk-card__pic {
    align-self: center;
  }
}

/* ─── step 2: package, start date, payment ───────────────────────────────────── */
.bk-block {
  display: grid;
  gap: var(--gap-attached);
  min-width: 0;
}
/* A grid would stretch the segmented control across the column; it keeps its own width —
   except on a phone, where it is a 2-column grid that fills the column (base.css). */
.bk-block > .seg {
  justify-self: start;
  max-width: 100%;
}
@media (max-width: 479px) {
  .bk-block > .seg {
    justify-self: stretch;
  }
}
/* A package option's wrapper (book.js hides the ones a side does not offer) takes no box of its
   own: its radio and label are the control's own items. */
.bk-opt {
  display: contents;
}

/* The calendar: a month of real buttons, Monday first. The chosen start is TAAR's white box; the
   booked period is tinted. (Round 4: no seasons — no day carries a bar and the legend names only
   the chosen start.) */
.bk-cal {
  max-width: 26rem;
}
.bk-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.bk-cal__title {
  margin: 0;
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-lede);
  line-height: 1.2;
}
/* the arrows are tool buttons */
.bk-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease);
}
.bk-cal__nav svg {
  width: 20px;
  height: 20px;
}
.bk-cal__nav:hover:not([disabled]) {
  background: var(--line);
}
.bk-cal__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}
.bk-cal__wd,
.bk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.bk-cal__wd span {
  padding: var(--s-2) 0;
  text-align: center;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-muted);
}
.bk-cal__day {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.bk-cal__day[data-in] {
  background: var(--field);
}
.bk-cal__day:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) {
  background: var(--line);
}
.bk-cal__day:focus-visible {
  outline-offset: -3px;
  z-index: 1;
}
/* Disabled controls are exempt from contrast (WCAG 1.4.3); still readable, clearly out. */
.bk-cal__day[aria-disabled="true"] {
  color: var(--kote);
  cursor: default;
}
.bk-cal__day[aria-pressed="true"] {
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
}
.bk-cal__day[aria-pressed="true"]:focus-visible {
  outline-color: var(--focus-on-light);
  outline-offset: -5px;
}
.bk-cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0;
  color: var(--text-muted);
}
.bk-cal__key {
  display: inline-block;
  flex: none;
}
.bk-cal__key--sel {
  width: 14px;
  height: 14px;
  background: var(--signal);
}
/* A 320-px phone: the month runs edge to edge so every day stays a full 44-px target. */
@media (max-width: 479px) {
  .bk-cal {
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
  }
  .bk-cal__head,
  .bk-cal__legend {
    padding-inline: var(--gutter);
  }
}

/* ─── step 3: the ad ─────────────────────────────────────────────────────────── */
.bk-ad {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bk-ad + .bk-ad {
  margin-top: var(--gap-group);
}
.bk-ad__legend {
  padding: 0;
  margin: 0 0 var(--s-3);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-h3);
  line-height: 1.15;
}
/* One side booked: the step heading says it all; the group name is for screen readers only. */
.bk[data-bk-on]:not([data-bk-side="both"]) .bk-ad__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The options are data rows: a hairline between them, 52 px each. */
.bk-radio {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
.bk-ad > .bk-radio:first-of-type {
  border-top: 1px solid var(--line);
}
.bk-radio input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--signal);
}
.bk-radio label {
  flex: 1 1 auto;
  padding: var(--s-3) 0;
  font-weight: 500;
  cursor: pointer;
}
.bk-radio:has(input:checked) label {
  font-weight: 600;
}

/* The file panel opens under "I have a finished ad", indented to the option's text (the radio's
   22 px + the row's gap). */
.bk-file {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-5) calc(22px + var(--s-3));
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
.bk-file[data-drag] {
  background: var(--field);
}
.bk-file__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.bk-file__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.bk-file__in:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.bk-file__note {
  margin: 0;
  max-width: 60ch;
  color: var(--text);
}
.bk-file__got {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}
.bk-file__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
}
.bk-file__name {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bk-file__view {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}
@media (min-width: 640px) {
  .bk-file__view {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}
/* The small preview: the ad on the screen's black, the way it will sit on the object (a PDF or a
   ZIP: its name). */
.bk-file__preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--s-1);
  background: var(--panel);
  overflow: hidden;
}
.bk-file__preview > img,
.bk-file__preview > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* An image or a video: the screen MODEL with the file on its face (render/hero.ts → screenStill +
   modelFace, hero.css .model*) — the whole card's width, at most 520 px, above the checks. */
.bk-file__preview[data-model] {
  display: block;
  aspect-ratio: auto;
  width: 100%;
  max-width: 520px;
  padding: 0;
  background: none;
}
.bk-file__view:has(.bk-file__preview[data-model]) {
  grid-template-columns: minmax(0, 1fr);
}
.bk-file__doc {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  color: var(--text-muted);
  font-size: var(--t-small);
  text-align: center;
  overflow-wrap: anywhere;
}
.bk-file__h {
  margin-bottom: var(--s-2);
  font-size: var(--t-ui);
}
/* The checks are data rows at --row-y. */
.bk-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.bk-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-3);
  padding: var(--row-y) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.45;
}
.bk-check__k {
  color: var(--text-muted);
}
.bk-check__s {
  justify-self: end;
  color: var(--text-muted);
}
.bk-check__v,
.bk-check__n {
  grid-column: 1 / -1;
}
.bk-check__v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* A warning: white text, a mark and a 3 px white rule — never a new colour. */
.bk-check[data-status="warn"] {
  padding-left: var(--s-3);
  border-left: 3px solid var(--text);
}
.bk-check[data-status="warn"] .bk-check__s {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  font-weight: 700;
}
.bk-check[data-status="warn"] .bk-check__s::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 800;
  line-height: 1;
}

/* The Sorich block (§12) under "I need an ad made" — since round 4 the PARTNER STRIP (sections.css
   `.sorich--strip`, sorichBlock "booking": the logo, the kicker, the heading, "Odabrali ste izradu …", the
   link), compacted for the narrow step: one column, a smaller sheet, a smaller heading. */
.bk-sorich {
  padding: var(--s-4) 0 var(--s-5) calc(22px + var(--s-3));
  border-bottom: 1px solid var(--line);
}
.bk-sorich .sorich {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.bk-sorich .sorich__logo {
  width: 160px;
}
.bk-sorich .sorich--strip {
  padding: var(--s-5);
}
.bk-sorich .sorich__h {
  font-size: var(--t-body);
}

/* ─── step 4: details and sending ────────────────────────────────────────────── */
.bk-fields {
  display: grid;
  gap: var(--gap-related);
  min-width: 0;
}
/* base.css spaces stacked fields with a top margin; in a grid the gap does it. */
.bk-fields > .field {
  margin-top: 0;
  min-width: 0;
}
@media (min-width: 640px) {
  .bk-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bk-field--wide {
    grid-column: 1 / -1;
  }
}
.bk-terms .check {
  min-height: 44px;
  align-items: center;
}
.bk-terms .check small {
  color: var(--text-muted);
  font-size: var(--t-small);
}
/* The honeypot: in the page for a script to find, out of sight and out of reach for a person. */
.bk-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bk-send > * + * {
  margin-top: var(--s-4);
}
.bk-send > .bk-send__status:empty {
  margin-top: 0;
}
/* Round 4 (Ante, 2026-10-07: "email i kontakt … moraju bit iste veličine jer su oboje bitni jednako"):
   e-mail and WhatsApp are TWO RED BUTTONS OF ONE SIZE — two equal columns, e-mail first; one column,
   full width, on a phone. SMS is gone. */
.bk-send__btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-3);
  max-width: 40rem;
}
.bk-send__btns .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .bk-send__btns .btn {
    white-space: normal;
  }
}
.bk-send[data-busy] .bk-send__btns .btn {
  opacity: 0.45;
  pointer-events: none;
}

/* The upload: a plain bar in TAAR's white on the panel's black, a percentage, and a way out. */
.bk-up {
  display: grid;
  gap: var(--s-3);
  padding: var(--pad-card);
  background: var(--panel);
}
.bk-up__label {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bk-up__track {
  height: 8px;
  background: var(--field);
  overflow: hidden;
}
.bk-up__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--signal);
  transition: width var(--t-fast) linear;
}
.bk-up .btn {
  justify-self: start;
}

/* ─── Back / Next (in the flow; the phone's bottom bar further down) ─────────── */
.bk-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--gap-group);
}
.bk-nav__next {
  margin-left: auto;
}
.bk-nav__info {
  display: none;
}

/* ─── the summary: a --panel ticket ────────────────────────────────────────────── */
.bk-sum {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--pad-card);
  background: var(--panel);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (min-width: 960px) {
  .bk-sum {
    position: sticky;
    top: calc(var(--hdr-h) + var(--s-5));
  }
}
.bk-sum__h {
  font-size: var(--t-h3);
}
.bk-sum__empty,
.bk-sum__note {
  margin: 0;
  color: var(--text-muted);
}
.bk-sum__note {
  margin-top: var(--s-3);
  font-size: var(--t-small);
}
.bk-sum__facts,
.bk-sum__led {
  margin: 0;
  display: grid;
}
.bk-sum__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-3);
  padding: var(--row-y) 0;
  border-bottom: 1px solid var(--line);
}
.bk-sum__facts dt,
.bk-sum__led dt {
  color: var(--text-muted);
  font-size: var(--t-small);
}
.bk-sum__facts dd,
.bk-sum__led dd {
  margin: 0;
}
.bk-sum__lines {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.bk-sum__lines li,
.bk-sum__months li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.bk-sum__lines .num,
.bk-sum__months .num {
  white-space: nowrap;
}
.bk-sum__disc {
  color: var(--text-muted);
}
/* The total: its label, the amount in Big Shoulders 900, "konačna cijena" under it. */
.bk-sum__total {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--text-muted);
}
.bk-sum__tl {
  font-weight: 600;
}
.bk-sum__tv {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--t-num-l);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bk-sum__final {
  font-size: var(--t-small);
  color: var(--text-muted);
}
.bk-sum__led {
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.bk-sum__led > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.bk-sum__led dd {
  font-weight: 600;
  white-space: nowrap;
}
.bk-sum__sched {
  margin-top: var(--s-4);
  font-size: var(--t-small);
}
.bk-sum__sched summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.bk-sum__months {
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
  color: var(--text-muted);
}

/* ─── the phone: one step per screen, the summary as a bar at the bottom ─────── */
@media (max-width: 959px) {
  /* The total rides in the bar; the full summary opens above it on request. */
  .bk[data-bk-on] .bk-sum {
    display: none;
  }
  .bk[data-bk-on][data-bk-sumopen] .bk-sum {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bk-bar-h, 72px);
    z-index: 46;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-5) var(--gutter);
  }
  /* The bar owns the bottom edge while the form fills the screen (core.js hides the page's own
     bar then). It sits above that bar's layer, below the header and the menu sheet. On the
     panel's black, like every bar on the site — no rule, no blur. */
  .bk[data-bk-bar] .bk-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "back info next";
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--panel);
  }
  .bk[data-bk-bar] .bk-nav__back {
    grid-area: back;
  }
  .bk[data-bk-bar] .bk-nav__next {
    grid-area: next;
    margin: 0;
  }
  .bk[data-bk-bar] .bk-nav .btn {
    min-height: 48px;
    padding: 0 var(--s-4);
  }
  .bk[data-bk-bar] .bk-nav__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: var(--s-1) var(--s-2);
    border: 0;
    border-radius: 0;
    background: var(--field);
    color: var(--text);
    text-align: center;
  }
  .bk[data-bk-bar] .bk-nav__info[aria-expanded="true"] {
    background: var(--line);
  }
  /* Room under the step, so its last control scrolls clear of the bar. */
  .bk[data-bk-bar] .bk__form {
    padding-bottom: calc(var(--bk-bar-h, 72px) + var(--s-4));
  }
}
.bk-nav__k {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-small);
  line-height: 1.2;
  color: var(--text-muted);
}
.bk-nav__v {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-ui);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}
.bk-nav__v:empty {
  display: none;
}
/* A focused field must not land behind the fixed bar. */
html[data-bk-bar] {
  scroll-padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom));
}

/* ─── the done screen ───────────────────────────────────────────────────────── */
.bk-done {
  display: grid;
  gap: var(--gap-related);
  max-width: 50rem;
}
.bk-done__h {
  font-size: var(--t-h2);
  font-stretch: 118%;
  scroll-margin-top: calc(var(--hdr-h) + var(--s-3));
}
.bk-done__code {
  display: grid;
  gap: var(--gap-attached);
  margin: 0;
}
.bk-done__codek {
  font-size: var(--t-small);
  color: var(--text-muted);
}
/* The order code in the signage face — the one big number of the booking. */
.bk-done__codev {
  font-family: var(--font-figures);
  font-weight: 900;
  font-size: var(--t-num-l);
  line-height: 0.9;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.bk-done__body,
.bk-done__up {
  margin: 0;
}
.bk-done__up {
  font-weight: 600;
}
/* The e-mail's copy box (round 4 — render/booking.ts doneScreen; book.js fills it and shows it for the
   e-mail channel only): a mailto: opens nothing on a computer with no mail program, so the message itself
   is on the screen — read-only, to copy or to open in Gmail. Plain on the ground: the summary under it
   stays the one sheet. */
.bk-done__copy {
  display: grid;
  gap: var(--gap-attached);
  max-width: 40rem;
}
.bk-done__hint {
  margin: 0 0 var(--s-3);
}
.bk-done__copy > .actions {
  margin-bottom: var(--s-4);
}
.bk-done__msgk {
  font-size: var(--t-small);
  font-weight: 600;
}
.bk-done__msg {
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bk-done__sum {
  padding: var(--pad-card);
  background: var(--panel);
  font-variant-numeric: tabular-nums lining-nums;
}
.bk-done__sum:empty {
  display: none;
}
.bk-done__new {
  margin: 0;
}

/* ─── sending a file by hand (§14.2) ─────────────────────────────────────────── */
.bk-manual {
  display: grid;
  gap: var(--s-4);
}
.bk-manual__title {
  font-size: var(--t-h3);
}
.bk-manual__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.bk-manual__ch {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
/* The channel the message just went through is marked, so it is the one read first. */
.bk-manual__ch[data-used] {
  padding-left: var(--s-3);
  border-left: 3px solid var(--signal);
}
.bk-manual__ill {
  width: 72px;
  height: 48px;
  color: var(--text-muted);
}
.bk-manual__txt {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}
.bk-manual__name {
  margin: 0;
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-ui);
  line-height: 1.25;
}
.bk-manual__os {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-small);
  color: var(--text-muted);
}
@media (max-width: 419px) {
  .bk-manual__ch {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}