/* ═══════════════════════════════════════════
   SVAMZ — Main Stylesheet

   Brand palette (client-mandated, do not extend with new hues):
     red  #D32F2F   ·  blue #2E5FA7  ·  white #FFFFFF  ·  ink #1A1D23
   Typefaces: Playfair Display (display) · Poppins (UI) · JetBrains Mono (data)
              Material Symbols Sharp (icons)

   Surface language: hairline rules, not shadows. Square plates, not glass.
   Motion language: see MOTION. Reference implementation is hero-film.css —
   its eyebrow, tracking set, easing curves and .odo are propagated here.
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════
   TOKENS — LAYER 1: PRIMITIVES
   Ramps of the mandated hues only. Nothing here invents a colour.
   ═══════════════════════════════════════════ */
:root {
  /* Channel triples, so every rgba(211,47,47,x) becomes rgb(var(--red-rgb)/x)
     and the brand red has exactly one source of truth. */
  --red-rgb:  211 47 47;
  --blue-rgb: 46 95 167;
  --ink-rgb:  26 29 35;

  /* Neutral ramp — hue-matched to the mandated #1A1D23 (cool, near-zero sat).
     Five steps are anchored on values already in this file, so the semantic
     aliases below re-point with zero visual change. */
  --ink-985: #060607;   /* = hero-film.css --film-bg */
  --ink-950: #0E1014;
  --ink-900: #14171C;
  --ink-850: #1A1D23;   /* ← --text   */
  --ink-700: #2B2F37;
  --ink-600: #3D424C;
  --ink-500: #5C6270;   /* ← --text2  */
  --ink-400: #7C8393;
  --ink-300: #A3A9B5;
  --ink-200: #C9CDD5;
  --ink-150: #DFE2E8;
  --ink-100: #E5E7EB;   /* ← --border */
  --ink-050: #F1F2F5;
  --ink-025: #F7F8FA;   /* ← --bg2    */
  --ink-000: #FFFFFF;

  /* Red ramp — the mandated #D32F2F is the 600 step. */
  --red-900: #7F1111;
  --red-800: #9B1A1A;
  --red-700: #B71C1C;   /* ← --red-dark */
  --red-600: #D32F2F;   /* ← --red, the brand red */
  --red-500: #E8493F;   /* ← hero-film.css --accent — promoted, not invented */
  --red-a04: rgb(var(--red-rgb) / .04);
  --red-a06: rgb(var(--red-rgb) / .06);
  --red-a10: rgb(var(--red-rgb) / .10);
  --red-a16: rgb(var(--red-rgb) / .16);
  --red-a25: rgb(var(--red-rgb) / .25);

  /* Blue ramp — promoting the previously decorative --blue to a functional
     secondary: prose links, institutional/FIVA context, map & registry UI.
     Never for CTAs. Red owns action. */
  --blue-800: #1D3E70;
  --blue-700: #25508C;
  --blue-600: #2E5FA7;  /* ← --blue */
  --blue-500: #4478C4;
  --blue-a08: rgb(var(--blue-rgb) / .08);

  /* Ink on dark — folds 45 rgba(255,255,255,x) occurrences / 30 distinct. */
  --on-dark-95: rgb(255 255 255 / .95);
  --on-dark-88: rgb(255 255 255 / .88);
  --on-dark-72: rgb(255 255 255 / .72);  /* hero-film.css .fb-lead    */
  --on-dark-62: rgb(255 255 255 / .62);  /* hero-film.css .fb-eyebrow */
  --on-dark-55: rgb(255 255 255 / .55);  /* hero-film.css .fb-micro   */
  --on-dark-45: rgb(255 255 255 / .45);
  --on-dark-30: rgb(255 255 255 / .30);

  /* Rules — the primary surface device on this site. A hairline, not a shadow. */
  --rule:        var(--ink-100);
  --rule-strong: var(--ink-200);
  --rule-dark:   rgb(255 255 255 / .10);
  --rule-dark-2: rgb(255 255 255 / .16);
  --rule-red:    var(--red-600);   /* the 1px eyebrow rule */

  /* Elevation — 43 literals fold to 6. 39 of the 43 were the same
     `0 Y 3Y rgba(0,0,0,.0X)` formula and snap by Y-value.
     --e-0 is the default: plates and rows get a rule instead.
     Kept on true black to match every literal being replaced; switch
     --shadow-rgb to var(--ink-rgb) if an ink-tinted shadow is ever wanted. */
  --shadow-rgb: 0 0 0;
  --e-0: none;
  --e-1: 0 1px 2px   rgb(var(--shadow-rgb) / .04);
  --e-2: 0 4px 12px  rgb(var(--shadow-rgb) / .06);
  --e-3: 0 16px 40px rgb(var(--shadow-rgb) / .08);   /* ← --shadow */
  --e-4: 0 28px 72px rgb(var(--shadow-rgb) / .12);
  --e-red: 0 6px 26px rgb(var(--red-rgb) / .42);     /* the ONLY coloured shadow */

  /* Radius — 19 values fold to 5. A certifying body's documents have square
     corners; rounding is reserved for interactive controls. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 10px;        /* .btn-primary — the hero's value */
  --r-pill: 999px;
  --r-circle: 50%;

  /* Spacing — 4px base. 14 tokens cover all 53 padding/gap values. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;  --sp-9: 48px;  --sp-10: 64px;
  --sp-11: 80px; --sp-12: 96px; --sp-13: 112px; --sp-14: 128px;
  --edge: max(24px, 5.5vw);     /* the film's own gutter */

  /* Z-index. Also fixes a latent bug: #navbar was 1000 but the drawer
     .nav-links was 999, so the drawer sat UNDER the bar and only worked
     because of its own padding-top. */
  --z-base: 0;
  --z-raise: 1;
  --z-sticky: 10;
  --z-hero-chrome: 60;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-nav: 1100;

  /* Motion — the hero's curves, nothing added.
     Durations sit inside the 150-200ms (hover) / 300-450ms (reveal) bands. */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);   /* arrive. everything appearing */
  --ease-inout: cubic-bezier(.4, 0, .2, 1);    /* crossfade, colour, state    */
  --ease-snap:  cubic-bezier(.2, .9, .25, 1);  /* small UI: buttons, chips    */
  --dur-1: 150ms;   /* colour / border / opacity state */
  --dur-2: 240ms;   /* small transform                 */
  --dur-3: 400ms;   /* block reveal — keeps --transition byte-identical */
  --dur-4: 640ms;   /* rule draw                       */
  --stagger: 70ms;
  --m-rise-s: 10px; --m-rise: 18px; --m-rise-l: 28px; --m-rise-w: .55em;

  /* Type — 7 body steps + 2 display, ~1.22 ratio off a 1rem base.
     Collapses ~46 ad-hoc font-sizes, including the 0.84/0.85/0.86/0.87rem
     band, which was four visually identical values. */
  --fs-0: 0.6875rem;   /* 11px — mono micro: dates, 01/02/03, eyebrows, labels */
  --fs-1: 0.8125rem;   /* 13px — mono meta, captions, nav, chips              */
  --fs-2: 0.9375rem;   /* 15px — small body, card desc, index rows            */
  --fs-3: 1.0625rem;   /* 17px — body, leads.  = hero-film.css .fb-lead       */
  --fs-4: 1.3125rem;   /* 21px — card title, h4                              */
  --fs-5: 1.625rem;    /* 26px — h3                                          */
  --fs-6: 2.125rem;    /* 34px — h2 small                                    */
  --fs-7: clamp(2rem, 3.4vw, 2.875rem);   /* h2 — section titles             */
  --fs-8: clamp(2.6rem, 5.4vw, 4.4rem);   /* h1 — = hero-film.css .fb-head   */

  /* Tracking — lifted verbatim from hero-film.css. This set IS the hero's. */
  --ls-tight:  -.025em;   /* Playfair at --fs-6 and above */
  --ls-tight2: -.012em;   /* Playfair at --fs-4 / --fs-5  */
  --ls-0:       0;
  --ls-wide:   .16em;     /* mono meta    */
  --ls-widest: .3em;      /* mono eyebrow */

  /* Leading */
  --lh-display: .99;
  --lh-tight:  1.25;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  /* 300 is a loaded Poppins cut but only holds up on dark ground. */
  --w-lead-dark:  300;
  --w-lead-light: 400;

  /* Breakpoints are documentation — @media cannot read custom properties.
     Two only: 900px (the film's own) and 600px. Retired: 1024, 768, 480. */
  --bp-md: 900px;
  --bp-sm: 600px;
}

/* ═══════════════════════════════════════════
   TOKENS — LAYER 2: SEMANTIC ALIASES
   The original 19 names, re-pointed at the ramps. Values are byte-identical
   to before, so no selector in style.css / clanstvo.css / skupnost.css
   changes behaviour. novice.css keeps its separate --sv-* namespace.
   ═══════════════════════════════════════════ */
:root {
  --bg:        var(--ink-000);
  --bg2:       var(--ink-025);
  --text:      var(--ink-850);
  --text2:     var(--ink-500);
  --red:       var(--red-600);
  --red-dark:  var(--red-700);
  --blue:      var(--blue-600);
  --dark:      var(--ink-950);   /* the one intentional shift: #111111 → #0E1014 */
  --border:    var(--ink-100);
  --glass-bg:  rgba(255, 255, 255, 0.65);   /* retired in the glass sweep */
  --glass-border: rgba(255, 255, 255, 0.8);
  --shadow:    var(--e-3);
  /* Plates are square. A body that issues certificates, inspection reports
     and registry entries has square corners; 14px rounding on every surface
     is the house style of a SaaS dashboard. Rounding is now reserved for
     interactive controls, which keep var(--r-3). */
  --radius:    var(--r-1);
  --nav-h:     106px;
  --transition: var(--dur-3) var(--ease-out);
  --ease: var(--ease-out);
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════
   BASE TYPE
   There were no h1–h6 rules anywhere in this file: every size was bolted to
   a component class, so any heading without one fell back to browser
   defaults. Component classes still win (0-1-0 beats 0-0-1); these only
   catch what was previously unstyled.

   h5/h6 are deliberately NOT smaller headings. They are mono labels — the
   institutional register this organisation actually writes in.
   ═══════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-8); line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-7); line-height: 1.06;              letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-5); line-height: var(--lh-tight);   letter-spacing: var(--ls-tight2); font-weight: 600; }
h4 { font-size: var(--fs-4); line-height: var(--lh-tight);   letter-spacing: var(--ls-tight2); font-weight: 600; }
h5, h6 {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text2);
}
h5 { font-size: var(--fs-1); }
h6 { font-size: var(--fs-0); }

/* Data, dates, registry numbers, catalogue codes. Tabular so columns of
   figures line up and an odometer digit never changes the line's width. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════
   MECHANISMS — the odometer

   Moved here from hero-film.css because it is now shared between the hero
   beats and the membership stat band. The JS lives in odo.js.

   Each figure gets a cell TALLER than the glyph (1.24em vs ~.75em), so there
   is real clear space between consecutive digits. One digit is framed at
   rest, its neighbours sit fully outside the slot, and the mask only ever
   fades empty space — or a glyph that is genuinely travelling. The negative
   margins keep the taller box from altering the line's layout height.
   ═══════════════════════════════════════════ */
.odo {
  display: inline-flex; align-items: flex-start;
  line-height: .92; vertical-align: top;
  height: 1.24em; margin-top: -.075em; margin-bottom: -.245em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.odo .sep { width: .34em; text-align: center; position: relative; top: .075em; }
.odo .col { position: relative; width: .62em; height: 1.24em; text-align: center; }
.odo .col i {
  position: absolute; left: 0; right: 0; top: 0;
  font-style: normal;
  transform: translate3d(0, calc(var(--x, 0) * -1.24em), 0);
  filter: blur(calc(var(--b, 0) * 1em));   /* motion blur while the figure turns */
  will-change: transform, filter;
}
.odo .col i b { display: block; height: 1.24em; line-height: 1.24; font-weight: inherit; }
/* When the scroll stops, columns ease onto a whole digit — a mechanism
   coming to rest, never a figure frozen halfway between two. */
.odo .col i.snap { transition: transform .34s var(--ease-out); }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: var(--r-1); }

/* ─── UTILITY ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.accent-red { color: var(--red-600); }
/* `.accent-glow` was used on skupnost.html:45 but declared only in
   clanstvo.css, which that page never loads — the hero's accent word
   rendered as plain white. Declared here so it works everywhere. */
.accent-glow { font-style: italic; font-weight: 600; color: var(--red-600); }
.page-hero .accent-glow, .sk-hero .accent-glow, .cl-hero .accent-glow,
.plate--dark .accent-glow { color: var(--red-500); }

/* Skip link — every page carries a 7-item fixed navbar, so keyboard users
   need a way past it. Visible only on focus. */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1200;
  background: var(--text); color: #fff;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 20px; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--red); outline-offset: 2px; }

/* Async failure copy (articles.js). Was an inline var(--sv-steel), which is
   defined only in novice.css and so resolved to nothing on article.html. */
.cover-error { font-size: 1rem; line-height: 1.6; color: var(--text2); }
/* `.section-eyebrow` and `.section-title` are the subpage equivalents of
   `.plate-eyebrow` / `.plate-title`. Rather than rewrite four subpages'
   markup, the signature is adopted here: the subpages keep their own
   layouts and inherit one eyebrow, one display size and one tracking set.
   That is the 80/20 — share the typographic signature, not the layout. */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-eyebrow::before {
  content: '';
  width: 36px; height: 1px;
  background: var(--rule-red);
  flex: none;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-7);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin-bottom: var(--sp-5);
}
/* Keep the accent as the hero writes it — an italic serif in red. `<em>` is
   the correct markup; `.accent-red` and `.accent-glow` are what the
   subpages use today, so both are honoured. */
.section-title em,
.section-title .accent-red,
.section-title .accent-glow {
  font-style: italic;
  font-weight: 600;
  color: var(--red-600);
}

/* ═══════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  transition: box-shadow var(--transition);
}
/* The bar's glass lives on this pseudo-element, never on #navbar itself.
   A backdrop-filter (like transform or filter) makes an element the
   containing block for its position:fixed descendants, and the phone
   drawer (.nav-links) is one: on any scrolled page it was squeezed into
   the 106px bar instead of filling the screen. */
#navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: background var(--transition);
}

/* Default: transparent — sits over dark hero, use white text */
#navbar.transparent {
  background: transparent;
  box-shadow: none;
}
#navbar.transparent .logo-img { filter: none; }
/* Light links only while they sit on the bar. On phones they live in the
   white drawer, where white-on-white made them disappear. */
@media (min-width: 901px) {
  #navbar.transparent .nav-btn { color: rgba(255,255,255,0.88); }
  #navbar.transparent .nav-btn:hover,
  #navbar.transparent .nav-btn.active { color: #fff; background: rgba(255,255,255,0.10); }
}
#navbar.transparent .hamburger span { background: #fff; }
/* Dark glass: the light-on-dark bar over a dark section once the page has
   scrolled (pages opt in with data-nav="dark"; see main.js). */
#navbar.transparent.nav-dark-glass { box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
#navbar.transparent.nav-dark-glass::before {
  background: rgb(14 16 20 / .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Scrolled: glassmorphism — back to dark text */
#navbar.scrolled {
  box-shadow: var(--e-2);
  border-bottom: 1px solid var(--glass-border);
}
#navbar.scrolled::before {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* The crest has two variations; this is the solid one, for light ground.
   68% of the mark is white strokes — the outer ring, the circumscribed
   legend, the pistons, the wheel, the "19 99" date — so the normal version
   all but disappears on a light bar. Going solid brings the whole crest
   back, and the "SVAMZ" lettering survives because it is a knockout in the
   swoosh rather than painted white: turn the swoosh black and the letters
   read as the bar showing through.
   No shadow — a solid mark on white does not need one, and a soft shadow
   under it only muddies the outer ring. */
#navbar.scrolled .logo-img {
  filter: brightness(0);
  height: 92px;
}
#navbar.scrolled .nav-btn { color: var(--text); }
#navbar.scrolled .nav-btn:hover,
#navbar.scrolled .nav-btn.active { color: var(--red); background: rgb(var(--red-rgb) / 0.06); }
#navbar.scrolled .hamburger span { background: var(--text); }

.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Logo */
.logo {
  text-decoration: none; flex-shrink: 0; display: flex; align-items: center;
}
/* logo.png carries ~12% transparent padding vertically, so the rendered
   height is not the mark's height: the ink is only 0.88 of it. At the old
   82px the crest read as 72px in a 106px bar and looked undersized.
   104px puts the ink at ~91px, which fills the bar properly. */
.logo-img {
  height: 104px; width: auto; display: block;
  transition: height var(--transition), filter var(--transition);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / .5));
}
.logo-img-footer {
  height: 120px;
  margin-bottom: 20px;
}

/* Nav links container */
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
}

/* Shared button / link style */
.nav-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text); letter-spacing: 0.02em;
  padding: 8px 12px; border-radius: var(--r-2);
  display: flex; align-items: center; gap: 4px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap; text-decoration: none;
}
.nav-btn:hover, .nav-btn.active { color: var(--red); background: rgb(var(--red-rgb) / 0.06); }

.nav-btn .chevron {
  font-size: 0.9rem; transition: transform var(--transition); display: inline-block;
}


.nav-btn.plain { text-decoration: none; }

/* Between the drawer breakpoint and ~1150px the long labels
   ("Društva in koledar dogodkov") would push Kontakt off-screen. */
@media (min-width: 901px) and (max-width: 1150px) {
  .nav-btn { font-size: 0.76rem; padding: 8px 7px; letter-spacing: 0; }
  .nav-cta { padding: 8px 14px; }
}

/* CTA button */
.nav-cta {
  background: var(--red); color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 8px 18px; border-radius: var(--r-2);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap; margin-left: 6px;
  box-shadow: var(--e-red);
}
.nav-cta:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: var(--e-red);
}

/* Nav item (for positioning dropdowns) */


/* ─── DROPDOWNS ─── */


.wide-dropdown { min-width: 280px; }

/* Arrow on dropdown */


/* ─── HAMBURGER ─── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: var(--r-2);
  transition: background var(--transition);
}
.hamburger:hover { background: rgb(var(--red-rgb) / 0.07); }
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); border-radius: var(--r-1);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile overlay */
/* The scrim behind the phone drawer. On phones it is always in the layout
   (display:block), full-screen at z-index 998 — so while the drawer is
   closed it must be hidden AND let taps through. With only opacity:0 it
   sat invisibly over every page and swallowed every tap on every link and
   button. visibility waits for the fade-out before hiding it. */
.nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 998;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), visibility 0s linear var(--dur-3);
}
.nav-overlay.visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--transition), visibility 0s;
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */


/* Subtle grid overlay */


/* Glowing orb */


/* ─── WORD-BY-WORD ANIMATION ─── */


.btn-primary {
  background: var(--red); color: #fff;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.04em;
  padding: 14px 30px; border-radius: var(--r-3);
  text-decoration: none;
  box-shadow: var(--e-red);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: var(--e-red);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: var(--e-red);
}

.btn-ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-family: var(--font-sans);
  font-weight: 500; font-size: 0.9rem;
  padding: 14px 30px; border-radius: var(--r-3);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-2px);
}
.btn-ghost:active {
  transform: translateY(1px) scale(0.96);
}

/* Hero badge */


/* Sleek Vertical Scroll Hint */


/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   GLASS CARD
   ═══════════════════════════════════════════ */
/* Was `backdrop-filter: blur(16px) saturate(160%)` over a STATIC background
   — a promoted compositor layer per card, blurring a flat colour, i.e. real
   cost for no visible effect. Glassmorphism is also the most dated surface
   on the page: it dresses everything as the same translucent slab, which is
   the opposite of what a page of documents, dates and registry numbers
   wants. A plate with a hairline says more with less.

   One backdrop-filter survives in this file, on #navbar.scrolled, where the
   bar genuinely sits over moving content. */
.glass-card {
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  box-shadow: var(--e-0);
  transition: border-color var(--dur-1) var(--ease-inout),
              background var(--dur-1) var(--ease-inout);
}
.glass-card:hover { border-color: var(--rule-strong); }

/* ═══════════════════════════════════════════
   DOSSIER — a front page

   Was a 7/5 grid of a lead story (whose photo never showed: featuredImage
   is a map, not a URL, and the lead <img> was lazy while hidden) and a
   dated index of text rows. Now the lead carries its real photograph, and
   beside it the newest from each other part of the site — Zgodovina,
   Dogodki, and the two standing Upravne zadeve entries — each a whole-row
   link with a photo, or an icon tile where there is no article. The only
   motion answers the pointer: a slow photo settle and a drawn underline.
   ═══════════════════════════════════════════ */
.front {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 var(--sp-10);
  align-items: start;
}

/* LEAD */
.front-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--sp-5);
  background: var(--ink-050);
}
/* no photo → no empty plate; while one loads, keep its space (no jump) */
.front-media:has(img[hidden]) { display: none; }
.front-lead.is-loading .front-media { display: block; }
.front-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-inout), transform 1.2s var(--ease-out);
}
.front-media img.is-ready { opacity: 1; }
.front-lead:hover .front-media img { transform: scale(1.035); }
/* small originals: shown near their own size, over a softened copy of themselves */
.front-media.is-small { position: relative; display: grid; place-items: center; }
.front-media.is-small::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: var(--img) center / cover no-repeat;
  filter: blur(22px) saturate(1.1);
  opacity: .5;
}
.front-media.is-small img {
  position: relative;
  width: auto;
  height: 74%;
  max-width: 80%;
  object-fit: contain;
  box-shadow: 0 18px 40px -18px rgb(var(--ink-rgb) / .55);
}
.front-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text2);
}
.front-meta time { color: var(--red-600); font-variant-numeric: tabular-nums; }
.front-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-6);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
}
.front-title a {
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-3) var(--ease-out);
}
.front-lead:hover .front-title a,
.front-title a:focus-visible { background-size: 100% 1px; }
.front-lead .card-desc {
  max-width: 52ch;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-3);
  line-height: var(--lh-loose);
  color: var(--text2);
}

/* SIDE LIST — whole-row links */
.front-list { list-style: none; border-top: 1px solid var(--rule); }
.front-row { border-bottom: 1px solid var(--rule); }
.front-row-link {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  color: inherit;
  text-decoration: none;
}
.front-row-link:focus-visible { outline: 2px solid var(--red-600); outline-offset: 4px; }
.front-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-050);
}
.front-thumb .material-symbols-sharp { font-size: 28px; color: var(--red-600); }
.front-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-inout), transform 1.2s var(--ease-out);
}
.front-thumb img.is-ready { opacity: 1; }
.front-row-link:hover .front-thumb img { transform: scale(1.06); }
.front-row-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text2);
}
.front-row-meta time,
.front-row-meta > span:last-child:not(.card-cat) { color: var(--ink-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.front-row-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  transition: color var(--dur-1) var(--ease-inout);
}
.front-row-link:hover .front-row-title,
.front-row-link:focus-visible .front-row-title { color: var(--red-700); }

/* ─── Card primitives: the category label, excerpt and the lead's button. ─── */
.card-cat {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text2);
}
/* ─── Category badges (news-meta.js). One hue per category, the client's:
   Slovenija green, tujina blue, izpostavljeno red, zgodovina brown,
   novice yellow, video purple. Ink is a darker step of the hue so the
   text passes contrast on the pale tint. ─── */
[data-tone="green"]  { --tone: 46 125 79;  --tone-ink: #1F5E3A; }
[data-tone="blue"]   { --tone: 42 98 184;  --tone-ink: #1D4B91; }
[data-tone="red"]    { --tone: 211 47 47;  --tone-ink: #A61E1E; }
[data-tone="brown"]  { --tone: 138 90 43;  --tone-ink: #6B4420; }
[data-tone="yellow"] { --tone: 214 160 0;  --tone-ink: #7A5A00; }
[data-tone="purple"] { --tone: 112 72 196; --tone-ink: #553199; }
[data-tone="plain"]  { --tone: 92 98 112;  --tone-ink: #3D424C; }
.cat-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font: 600 0.68rem/1.3 'Poppins', sans-serif; letter-spacing: .01em;
  color: var(--tone-ink); background: rgb(var(--tone) / .11);
  box-shadow: inset 0 0 0 1px rgb(var(--tone) / .22);
  white-space: nowrap;
}
.cat-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--tone)); box-shadow: 0 0 0 2px rgb(var(--tone) / .18);
}
/* on photographs and dark panels the tint turns to glass */
.on-dark .cat-badge {
  color: #fff; background: rgb(var(--tone) / .32);
  box-shadow: inset 0 0 0 1px rgb(var(--tone) / .55);
  backdrop-filter: blur(6px);
}
/* the homepage's mono category labels just take the hue and a dot */
.card-cat[data-tone] { display: inline-flex; align-items: center; gap: 7px; color: var(--tone-ink); }
.card-cat[data-tone]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--tone)); }

/* Video articles: YouTube's play mark over the thumbnail; it warms to
   the brand red when the card is hovered. */
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 44px;
  transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.yt-play svg { width: 100%; height: 100%; display: block; }
.yt-play-bg { fill: rgba(20,23,28,.82); transition: fill .3s; }
.is-video:hover .yt-play, .is-video:focus-visible .yt-play { transform: translate(-50%, -50%) scale(1.1); }
.is-video:hover .yt-play-bg, .is-video:focus-visible .yt-play-bg { fill: var(--red); }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }

.card-desc  { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--text2); margin-bottom: var(--sp-5); }
.card-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-1); font-weight: 600;
  color: var(--ink-000); background: var(--red-600);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-1);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-inout);
}
.card-cta .material-symbols-sharp {
  font-size: 18px;
  transition: transform var(--dur-2) var(--ease-snap);
}
.card-cta:hover { background: var(--red-700); }
.card-cta:hover .material-symbols-sharp { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   MEMBER — the membership plate

   Was a 2×2 grid of glass cards, each carrying a single emoji as its icon
   (💳 📜 🏁 🗺) at 1.5rem, sitting directly below a 360-frame cinematic
   hero. Emoji render as someone else's artwork in someone else's style, at
   the mercy of the platform's font; they are the single loudest tell that a
   page was assembled rather than designed.

   Then: a hairline list of benefits beside the copy, and a dark band with
   the organisation's actual numbers on the hero's own odometer and the four
   affiliation marks.

   Now the section leads with one object: a membership card whose number
   counts up past today's members and stops on the next one (main.js →
   MEMBER CARD). The benefits become a quiet row of real links beneath it —
   no 01–04, they are not a sequence. The dark band is unchanged, except
   that its figures now show on phones too.
   ═══════════════════════════════════════════ */
.member-top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "copy card" "perks perks";
  gap: var(--sp-11) var(--sp-10);
  align-items: center;
  padding-bottom: var(--sp-12);
}
.member-copy { grid-area: copy; }
.member-lead {
  font-size: var(--fs-3);
  line-height: var(--lh-loose);
  font-weight: var(--w-lead-light);
  color: var(--text2);
  max-width: 48ch;
  margin: var(--sp-5) 0 var(--sp-7);
}

/* ─── the membership card (ID-1 proportions) ─── */
.mcard-wrap { grid-area: card; justify-self: end; width: min(100%, 25rem); margin: 0; }
.mcard {
  position: relative;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: 14px;
  overflow: hidden;
  color: var(--ink-000);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--blue-rgb) / .42), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, rgb(var(--red-rgb) / .22), transparent 60%),
    repeating-radial-gradient(circle at 18% 120%, rgb(255 255 255 / .05) 0 1px, transparent 1px 6px),
    var(--ink-900);
  box-shadow: 0 34px 60px -28px rgb(var(--ink-rgb) / .55),
              inset 0 0 0 1px rgb(255 255 255 / .07);
}
/* Plastic sheen and foil both read --kin (SV.scrub on the card), so they
   move with the scroll rather than on a timer. */
.mcard::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .13) 50%, transparent 58%);
  transform: translate3d(calc((var(--kin, .5) - .5) * 70%), 0, 0);
  pointer-events: none;
}
.mcard-top { display: flex; align-items: center; justify-content: space-between; }
.mcard-crest { width: 3.1rem; height: auto; }
.mcard-kind { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--on-dark-72); }
.mcard-label { margin-top: auto; font-size: var(--fs-0); color: var(--on-dark-45); }
.mcard-no {
  display: block;
  margin: .15em 0 .55em;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.2vw, 2.9rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.mcard-foot { display: flex; align-items: flex-end; gap: var(--sp-6); }
.mcard-foot p { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-1); }
.mcard-foot span { font-size: var(--fs-0); color: var(--on-dark-45); }
.mcard-foot em { font-family: var(--font-serif); font-style: italic; color: var(--on-dark-62); }
.mcard-foot strong { font-weight: 500; color: var(--on-dark-88); }
.mcard-holo {
  margin-left: auto;
  width: 2.6rem;
  height: 2rem;
  border-radius: 5px;
  background: conic-gradient(from calc(var(--kin, 0) * 300deg),
    var(--red-500), var(--ink-000), var(--blue-500), var(--ink-000), var(--red-500));
  opacity: .7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3);
}
.mcard-wrap figcaption {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-3);
  color: var(--text2);
}

/* ─── benefits: a row of real links ─── */
.perks {
  grid-area: perks;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.perks li:not(:last-child) { border-right: 1px solid var(--rule); }
.perks a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-inout);
}
.perks li + li a { padding-left: var(--sp-5); }
/* the answer to a pointer or a focus ring: a red rule draws along the top */
.perks a::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-4) var(--ease-out);
}
.perks .material-symbols-sharp {
  font-size: 26px;
  color: var(--red-600);
  transition: transform var(--dur-2) var(--ease-snap);
}
.perks a:hover, .perks a:focus-visible { color: var(--red-700); }
.perks a:hover::before, .perks a:focus-visible::before { transform: scaleX(1); }
.perks a:hover .material-symbols-sharp,
.perks a:focus-visible .material-symbols-sharp { transform: translateY(-3px); }
.perks a:focus-visible { outline: 2px solid var(--red-600); outline-offset: 4px; }

@media (max-width: 900px) {
  .member-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "card" "perks";
    gap: var(--sp-9);
    padding-bottom: var(--sp-10);
  }
  .mcard-wrap { justify-self: start; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perks li:nth-child(2) { border-right: 0; }
  .perks li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .perks li:nth-child(3) a { padding-left: 0; }
}
@media (max-width: 600px) {
  .perks { grid-template-columns: minmax(0, 1fr); }
  .perks li:not(:last-child) { border-right: 0; }
  .perks li + li { border-top: 1px solid var(--rule); }
  .perks li + li a { padding-left: 0; }
  .perks a { flex-direction: row; align-items: center; padding-block: var(--sp-5); }
}

/* The dark band. It gives the section a dark foot that runs straight into
   the footer — one dark mass, no white gap — and carries two things: the
   organisation's figures, each in a hairline arc, and the
   international memberships as plaques. */
.member-band { background: var(--ink-950); padding: var(--sp-11) 0 var(--sp-10); }

/* ─── the figures ───
   Three large figures, each inside a hairline arc: a gauge reduced to its
   one gesture. When the band comes into view the red arc sweeps round while
   the odometer rolls to the figure (main.js → MEMBERSHIP STAT BAND).
   Without JS, or under reduced motion, both are simply complete. */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.gauge { --d: .15s; margin: 0; text-align: center; }
.gauge:nth-child(2) { --d: .3s; }
.gauge:nth-child(3) { --d: .45s; }
.gauge-dial {
  position: relative;
  width: min(100%, 12.5rem);
  aspect-ratio: 200 / 160;                  /* cropped just below the arc's ends */
  margin: 0 auto;
}
.gauge-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-track, .g-fill { fill: none; stroke-width: 3; stroke-linecap: round; }
.g-track { stroke: rgb(255 255 255 / .1); }
.g-fill {
  stroke: var(--red-500);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
  transition: stroke-dashoffset 1.6s var(--ease-out) var(--d);
}
/* the arcs wait for main.js (MEMBERSHIP STAT BAND), which starts them
   together with the numbers once the band is well in view */
.js-reveal .gauges:not(.is-live) .g-fill { stroke-dashoffset: 1; }
.gauge-num {
  position: absolute;
  left: 0; right: 0; top: 62.5%;            /* the arc's centre */
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: var(--ls-tight);
  color: var(--ink-000);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "5.200+": the plus rides high and small, in the brand red */
.gauge-plus { display: inline-block; margin-left: .04em; font-size: .56em; vertical-align: .62em; color: var(--red-500); font-weight: 600; }
.gauge figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-dark-55);
}

/* ─── the memberships: plaques ─── */
.partners { margin-top: var(--sp-11); padding-top: var(--sp-9); border-top: 1px solid var(--rule-dark); }
.partners-title { margin-bottom: var(--sp-7); font-size: var(--fs-5); color: var(--ink-000); }
.partners-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7); }
.partners-list a { display: block; color: inherit; text-decoration: none; }
.partner-mark {
  display: grid;
  place-items: center;
  height: 6.5rem;
  border-radius: var(--r-2);
  background: var(--ink-000);
  box-shadow: 0 18px 30px -20px rgb(0 0 0 / .85);
  transition: transform var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap);
}
.partner-mark img { width: auto; height: auto; max-width: 72%; max-height: 3.4rem; object-fit: contain; }
.partner-mark img.is-tall { max-height: 5rem; }
.partner-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--ink-000);
  transition: color var(--dur-1) var(--ease-inout);
}
.partner-name em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-0); font-weight: 500; letter-spacing: .08em; color: var(--red-500); }
.partner-desc { display: block; margin-top: var(--sp-1); font-size: var(--fs-1); line-height: 1.5; color: var(--on-dark-55); }
.partners-list a:hover .partner-mark,
.partners-list a:focus-visible .partner-mark {
  transform: translateY(-4px);
  box-shadow: 0 26px 36px -20px rgb(0 0 0 / .9), 0 0 0 2px var(--red-500);
}
.partners-list a:hover .partner-name { color: var(--red-500); }
.partners-list a:focus-visible { outline: 2px solid var(--red-500); outline-offset: 6px; }

@media (max-width: 900px) {
  .partners-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
}
@media (max-width: 700px) {
  .gauges { gap: var(--sp-3); }
  .gauge-num { font-size: 1.55rem; }
  .gauge figcaption { font-size: .6rem; letter-spacing: .1em; }
}

/* ═══════════════════════════════════════════
   MOTION — reveal primitives

   Replaces a system whose own banner read "EXTREME SCROLL ANIMATIONS":
   fly-left was translateX(-300px) rotateY(35deg) scale(0.7) + blur(8px),
   applied to section eyebrows and headings. Four values were ever used
   (fly-left/right/up, zoom-spin); flip and rise-tilt were dead.

   Budget: 10 / 18 / 28px on Y, plus .55em for words. No X travel, no
   rotation, no scale, no blur. Blur on text re-rasters the glyph atlas every
   frame and rotateY disables subpixel antialiasing for the whole transition;
   300px of travel on a content card reads as a slide deck, not an archive.

   The [data-scroll] attribute API is retained deliberately — skupnost.js
   calls window.scrollRevealObserver.observe() on Firestore-injected cards
   that carry it, so the markup contract must not change. Only the
   implementation and the state class (.revealed → .is-in) change.

   Gated on .js-reveal, set by an inline <head> script before first paint.
   Without JS the class never lands and every element is simply visible.
   ═══════════════════════════════════════════ */

.js-reveal [data-reveal],
.js-reveal [data-scroll] {
  opacity: 0;
  transform: translate3d(0, var(--m, var(--m-rise)), 0);
  transition: opacity   var(--dur-3) var(--ease-inout) var(--d, 0ms),
              transform var(--dur-3) var(--ease-out)   var(--d, 0ms);
}

/* 1 — RISE (the default). All three legacy fly-* directions map here:
       one gesture for the whole page, not four. */
[data-scroll="fly-left"],
[data-scroll="fly-right"],
[data-scroll="fly-up"]  { --m: var(--m-rise); }
[data-reveal="rise-sm"] { --m: var(--m-rise-s); }
[data-reveal="rise-lg"] { --m: var(--m-rise-l); }

/* 2 — RULE: a hairline draws in rather than flying. Replaces zoom-spin on
       the step connectors and the old .section-title::after underline. */
.js-reveal [data-reveal="rule"],
.js-reveal [data-scroll="zoom-spin"] {
  --m: 0px;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-4) var(--ease-out) var(--d, 0ms);
}

/* 3 — DWELL: opacity only. For images and any large raster, where
       translating a decoded bitmap repaints the whole layer. */
.js-reveal [data-reveal="dwell"] { --m: 0px; transform: none; }

/* 4 — WORDS: per-word stagger, reusing the hero's own .w contract
       (hero-film.css) but driven by a class rather than scroll position. */
.js-reveal [data-reveal="words"] .w {
  opacity: 0;
  transform: translate3d(0, var(--m-rise-w), 0);
  transition: opacity   var(--dur-3) var(--ease-inout),
              transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* Revealed state — one class, and no !important anywhere. */
[data-reveal].is-in,
[data-scroll].is-in,
[data-reveal="words"].is-in .w {
  opacity: 1;
  transform: none;
}

/* Stagger — keeps the existing data-delay API. 70ms, not the old 150ms:
   beyond ~0.1s per item a stagger reads as a queue, not one gesture. */
[data-delay="1"] { --d: 70ms;  }
[data-delay="2"] { --d: 140ms; }
[data-delay="3"] { --d: 210ms; }
[data-delay="4"] { --d: 280ms; }

/* ═══════════════════════════════════════════
   PLATE — the one section primitive

   Replaces three near-identical stacks (container → eyebrow → title → grid),
   each at `padding: 100px 0`, which gave the whole page below the hero a
   single unvarying rhythm. The three plates now differ deliberately in
   vertical measure, and each one is a different kind of document.
   ═══════════════════════════════════════════ */
.plate { position: relative; }
.plate--light { background: var(--bg); }
.plate--tint  { background: var(--ink-025); }
.plate--dark  { background: var(--ink-950); color: var(--on-dark-72); }

/* Vertical rhythm — three values, not one. */
.dossier { padding: var(--sp-13) 0 var(--sp-12); }   /* 112 / 96 */
.spec    { padding: var(--sp-14) 0; }                /* 128 — densest, most formal */
.member  { padding: var(--sp-11) 0 0; }              /* 80 / 0 — butts into the footer */

.plate-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-9);
  border-bottom: 1px solid var(--rule);
}
.plate--dark .plate-head { border-bottom-color: var(--rule-dark); }

/* The eyebrow — lifted from hero-film.css: mono, .3em tracking, uppercase,
   preceded by a 36px hairline in the seal red. This one element carries
   more of the hero's voice than anything else on the page. */
.plate-eyebrow {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.plate-eyebrow::before {
  content: '';
  width: 36px; height: 1px;
  background: var(--rule-red);
  flex: none;
}
.plate--dark .plate-eyebrow { color: var(--on-dark-62); }

.plate-title {
  grid-column: 1;
  font-size: var(--fs-7);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
}
/* The hero's accent is an italic serif in red, not a roman word in red. */
.plate-title em { font-style: italic; font-weight: 600; color: var(--red-600); }
.plate--dark .plate-title { color: var(--ink-000); }
.plate--dark .plate-title em { color: var(--red-500); }

.plate-more {
  grid-column: 2;
  align-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-inout);
}
.plate--dark .plate-more { color: var(--on-dark-45); }
.plate-more:hover { color: var(--red-600); }
.plate-more .material-symbols-sharp {
  font-size: 18px;
  transition: transform var(--dur-2) var(--ease-snap);
}
.plate-more:hover .material-symbols-sharp { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   SPEC — the certification process, and the document it produces

   Was a four-column specification table (number, title, facts, link):
   correct, but static — and SVAMZ issues documents for a living. Now the
   steps run down a rail on the left while a sample certificate is pinned on
   the right and completes itself as each step becomes current: typed vehicle
   fields (1), the commissioner's ticks and signature (2), stamp and issue
   date (3). One orchestrated moment, driven by scroll (main.js →
   CERTIFICATE PATH), so it also runs backwards.

   Every hidden state is gated on .js-reveal: without JS, and under reduced
   motion, the certificate is simply complete.
   ═══════════════════════════════════════════ */
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: var(--sp-12);
  align-items: start;
}

/* ─── the steps, on a rail ─── */
.spec-steps { list-style: none; }
.spec-step {
  --node: 2.25rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  gap: var(--sp-6);
  min-height: clamp(220px, 40vh, 360px);
  padding-bottom: var(--sp-9);
  transition: opacity var(--dur-3) var(--ease-inout);
}
/* The last step keeps enough height that the pinned certificate is still
   in place, whole, when its stamp lands. */
.spec-step:last-child { min-height: 20rem; padding-bottom: 0; }

/* The rail between two nodes belongs to the upper step and is filled by the
   lower step's approach (--seg 0→1, written by main.js). */
.spec-step:not(:last-child)::before,
.spec-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--node) / 2 - .5px);
  top: var(--node);
  bottom: 0;
  width: 1px;
  background: var(--rule-dark-2);
}
.spec-step:not(:last-child)::after {
  background: var(--red-500);
  transform-origin: top;
  transform: scaleY(var(--seg, 1));
}
.js-reveal .spec-step { --seg: 0; }

.spec-node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dark-2);
  background: var(--ink-950);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--on-dark-45);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-3) var(--ease-inout),
              border-color var(--dur-3) var(--ease-inout),
              color var(--dur-3) var(--ease-inout);
}
.spec-step.is-done .spec-node { border-color: var(--red-500); color: var(--red-500); }
.spec-step.is-current .spec-node { background: var(--red-600); border-color: var(--red-600); color: var(--ink-000); }

.spec-body { padding-top: .1rem; }
.spec-body h3 {
  font-size: var(--fs-5);
  line-height: 1.15;
  color: var(--ink-000);
  margin-bottom: var(--sp-3);
}
.spec-body p {
  font-size: var(--fs-2);
  line-height: var(--lh-loose);
  color: var(--on-dark-55);
  max-width: 42ch;
}
.spec-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
}
.spec-facts div { display: flex; flex-direction: column; gap: 2px; }
.spec-facts dt { color: var(--on-dark-45); }
.spec-facts dd { color: var(--on-dark-88); }

.spec-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--red-500);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-inout);
}
.spec-link:hover { color: var(--ink-000); }
.spec-link:focus-visible { outline: 2px solid var(--red-500); outline-offset: 4px; }
.spec-link .material-symbols-sharp {
  font-size: 18px;
  transition: transform var(--dur-2) var(--ease-snap);
}
.spec-link:hover .material-symbols-sharp { transform: translateX(3px); }

/* Focus follows the reader: on wide screens the step being read is lit,
   finished ones stay legible, the ones ahead wait in the dark. */
@media (min-width: 901px) {
  .js-reveal .spec-step { opacity: .34; }
  .js-reveal .spec-step.is-done { opacity: .62; }
  .js-reveal .spec-step.is-current,
  .js-reveal .spec-step:focus-within { opacity: 1; }
}

/* ─── the certificate ─── */
.cert {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-7));
  margin: 0;
}
/* The security band: a fine blue cross-hatch, the vernacular of official
   paper, in the mandated blue. Pen marks are blue too; the stamp is red. */
.cert-paper {
  padding: 10px;
  background:
    repeating-linear-gradient(45deg,  rgb(var(--blue-rgb) / .28) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgb(var(--blue-rgb) / .28) 0 1px, transparent 1px 5px),
    var(--ink-000);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7);
}
.cert-sheet {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  background: var(--ink-000);
  border: 1px solid rgb(var(--blue-rgb) / .35);
  color: var(--ink-850);
}
.cert-sheet::before {                       /* crest watermark */
  content: '';
  position: absolute;
  inset: 14% 18%;
  background: url('../images/logo.png') center / contain no-repeat;
  filter: brightness(0);
  opacity: .045;
  pointer-events: none;
}

.cert-head {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink-150);
}
.cert-crest { width: 2.75rem; height: auto; filter: brightness(0); opacity: .85; }
.cert-org { font-size: var(--fs-0); line-height: 1.3; color: var(--ink-500); }
.cert-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-850);
}
.cert-no { align-self: start; text-align: right; font-size: var(--fs-0); line-height: 1.5; color: var(--ink-500); }
.cert-no b { display: block; font-family: var(--font-sans); font-weight: 500; color: var(--blue-700); }

.cert-sheet dt { font-size: var(--fs-0); color: var(--ink-500); }
.cert-sheet dd {
  min-height: 1.3em;
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-850);
}
.cert-fields div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dotted var(--ink-200);
}

.cert-exam { margin-top: var(--sp-5); }
.cert-exam > p { font-size: var(--fs-0); color: var(--ink-500); margin-bottom: var(--sp-2); }
.cert-checks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: .8rem;
  color: var(--ink-700);
}
.cert-checks li { display: inline-flex; align-items: center; gap: 7px; }
.cert-box {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-500);
}
.cert-box svg { width: 15px; height: 15px; overflow: visible; }

.cert-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
  margin-top: var(--sp-5);
}
.cert-sig { display: block; width: 9.5rem; height: 2.6rem; }
.cert-sign span {
  display: block;
  padding-top: 4px;
  border-top: 1px solid var(--ink-300);
  font-size: var(--fs-0);
  color: var(--ink-500);
}
.cert-issued { text-align: right; }

/* pen ink: ticks and signature draw themselves */
.cert-checks path,
.cert-sig path {
  fill: none;
  stroke: var(--blue-800);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 260ms var(--ease-out) var(--d, 0ms),
              opacity 1ms linear var(--d, 0ms);
}
.cert-checks li:nth-child(2) path { --d: 150ms; }
.cert-checks li:nth-child(3) path { --d: 300ms; }
.cert-sig path {
  --d: 480ms;
  stroke-width: 1.6;
  transition-duration: 1000ms, 1ms;
  transition-timing-function: var(--ease-inout), linear;
}

/* typed values: revealed one character at a time */
.cert-type {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 0 0 0);
  transition: clip-path calc(var(--n, 10) * 38ms) steps(var(--n, 10), end) var(--d, 0ms);
}
.cert-fields div:nth-child(2) .cert-type { --d: 460ms; }
.cert-fields div:nth-child(3) .cert-type { --d: 640ms; }
.cert-issued .cert-type { --d: 620ms; }

/* the stamp: lands over the tail of the signature, clear of the issue date,
   and the sheet takes the impact */
.cert-stamp {
  --d: 250ms;
  position: absolute;
  left: 44%;
  bottom: var(--sp-3);
  width: 6.5rem;
  height: 6.5rem;
  color: var(--red-600);
  font-family: var(--font-sans);
  opacity: .88;
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
  transition: opacity 120ms linear var(--d),
              transform 300ms cubic-bezier(.55, 0, .85, .35) var(--d);
  pointer-events: none;
}
.spec-grid.s3 .cert-sheet { animation: certThud 240ms var(--ease-out) 540ms; }
@keyframes certThud { 40% { transform: translateY(2px); } }

/* hidden states — only with JS, only until the step is reached */
.js-reveal .spec-grid:not(.s1) .cert-fields .cert-type,
.js-reveal .spec-grid:not(.s3) .cert-issued .cert-type { clip-path: inset(0 100% 0 0); }
.js-reveal .spec-grid:not(.s2) .cert-checks path,
.js-reveal .spec-grid:not(.s2) .cert-sig path { stroke-dashoffset: 1; opacity: 0; }
.js-reveal .spec-grid:not(.s3) .cert-stamp {
  opacity: 0;
  transform: translateY(-16px) rotate(-12deg) scale(1.2);
}

.spec-foot {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-dark-30);
}

/* Phones: the certificate leads, unpinned, and plays its three states once
   when it comes into view; the steps follow as a plain list on the rail. */
@media (max-width: 900px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .cert { position: relative; top: auto; order: -1; width: 100%; max-width: 28rem; }
  .spec-step { min-height: 0; gap: var(--sp-4); padding-bottom: var(--sp-8); }
  .spec-step:last-child { min-height: 0; }
}
@media (max-width: 600px) {
  .cert-sheet { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .cert-title { font-size: 1.1rem; }
  .cert-fields div { grid-template-columns: 5.75rem minmax(0, 1fr); }
  .cert-sig { width: 8rem; }
  .cert-stamp { width: 5.5rem; height: 5.5rem; left: 36%; }
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer {
  background: var(--dark); color: rgba(255,255,255,0.7);
  padding-top: 72px;
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 48px;
}
.footer-brand .logo { color: #fff; font-size: 1.6rem; }
.footer-brand p { margin-top: 10px; font-size: 0.8rem; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 200px; }

/* Footer column heads are LABELS, not headings — mono, not the display
   serif. Playfair at 11px uppercase loses its thin strokes entirely. */
.footer-links h4, .footer-contact h4, .footer-h {
  font-family: var(--font-mono);
  font-size: var(--fs-0); font-weight: 500; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--on-dark-45);
  margin-bottom: var(--sp-5);
}
.footer-links a {
  display: block; font-size: 0.84rem; color: rgba(255,255,255,0.6);
  text-decoration: none; margin-bottom: 10px;
  transition: color var(--transition), padding-left var(--transition);
}
.footer-links a:hover { color: var(--red); padding-left: 4px; }

.footer-contact p { font-size: 0.84rem; margin-bottom: 8px; color: rgba(255,255,255,0.6); }
.footer-contact a { color: inherit; text-decoration: none; transition: color var(--transition); }
.footer-contact a:hover { color: var(--red); }

/* Phone numbers: never the browser's blue. iOS also turns plain numbers
   into links of its own (x-apple-data-detectors). */
a[href^="tel:"], a[x-apple-data-detectors] {
  color: inherit !important; font: inherit !important;
  text-decoration: none !important; white-space: nowrap;
}
a[href^="tel:"] { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .3s, color .2s; }
a[href^="tel:"]:hover, a[href^="tel:"]:focus-visible { background-size: 100% 1px; }

/* Social links: hairline rings that fill with red from below on hover;
   the account's handle slides in, centred under the icon. */
.socials {
  position: relative; display: flex; gap: 10px;
  list-style: none; margin: 22px 0 0; padding: 0 0 30px;
}
.socials li { position: relative; }
.socials a {
  position: static; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: rgba(255,255,255,0.7); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  background: linear-gradient(var(--red), var(--red)) no-repeat bottom / 100% 0;
  transition: background-size .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)), color .25s, box-shadow .25s, transform .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.socials svg { width: 17px; height: 17px; fill: currentColor; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.socials a:hover, .socials a:focus-visible {
  background-size: 100% 100%; color: #fff; box-shadow: inset 0 0 0 1px var(--red);
  transform: translateY(-2px);
}
.socials a:hover svg, .socials a:focus-visible svg { transform: scale(1.08); }
.socials a:focus-visible { outline: 2px solid var(--red-500); outline-offset: 3px; }
.soc-handle {
  position: absolute; left: 50%; top: 48px; translate: -50% 0;
  font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: .04em;
  color: rgba(255,255,255,0.55); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1);
}
.socials a:hover .soc-handle, .socials a:focus-visible .soc-handle { opacity: 1; transform: none; }
.socials li:first-child .soc-handle { left: 0; translate: 0 0; }   /* no spill past the column edge */
@media (prefers-reduced-motion: reduce) {
  .socials a, .socials svg, .soc-handle { transition: none; }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  /* the rule runs full width; the content lines up with .container */
  padding: 18px max(24px, calc((100% - 1152px) / 2));
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.75rem; color: rgba(255,255,255,0.55);
}
.footer-credit { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--on-dark-45); }

/* The maker's credit as a classic enamel number plate: black, a white rim
   set in from the edge, two screws, embossed lettering. On hover or focus
   it lifts a little and a glint of light runs across it. */
.credit-plate {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: .34rem 1.25rem .32rem;
  border-radius: 4px;
  background:
    radial-gradient(circle at 8px 50%, #d9dce2 0 1.4px, #5d626b 1.5px 2.3px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 8px) 50%, #d9dce2 0 1.4px, #5d626b 1.5px 2.3px, transparent 2.4px),
    linear-gradient(180deg, #1a1c21, #07080a);
  box-shadow:
    inset 0 0 0 2px #07080a,
    inset 0 0 0 3.5px rgb(255 255 255 / .82),
    0 6px 14px -6px rgb(0 0 0 / .8);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: #f3f3f1;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgb(0 0 0 / .7), 0 1px 0 rgb(255 255 255 / .14);
  transition: transform var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap);
}
.credit-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
.credit-plate:hover,
.credit-plate:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #07080a,
    inset 0 0 0 3.5px rgb(255 255 255 / .92),
    0 12px 20px -8px rgb(0 0 0 / .9);
}
.credit-plate:hover::after,
.credit-plate:focus-visible::after { transform: translateX(120%); }
.credit-plate:focus-visible { outline: 2px solid var(--red-500); outline-offset: 3px; }
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════
   PAGE HERO (sub-pages, no full-height)
   ═══════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}


.page-hero-content {
  position: relative; z-index: 2;
}
.page-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 4.5rem); /* made it slightly larger */
  font-weight: 800; color: var(--text); line-height: 1.1;
  margin: 12px 0 16px;
}
.page-hero-sub {
  font-size: 1.05rem; font-weight: 400; line-height: 1.7;
  color: var(--text2); max-width: 560px;
}

/* O nas: the header is the start of the night drive. A darkened road
   photograph at dusk whose foot fades into exactly the history section's
   ink, so the page runs dark → light once instead of light → dark → light. */
.page-hero--night {
  display: flex;
  align-items: flex-end;
  min-height: clamp(28rem, 74vh, 46rem);
  padding: calc(var(--nav-h) + var(--sp-10)) 0 var(--sp-10);
  background: var(--ink-950);
  border-bottom: 0;
}
.page-hero--night .page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 16 20 / .55) 0%, rgb(14 16 20 / .25) 38%, rgb(14 16 20 / .72) 80%, var(--ink-950) 100%),
    linear-gradient(90deg, rgb(14 16 20 / .8) 0%, rgb(14 16 20 / .35) 55%, transparent 80%),
    url('../images/backgrounds/mountain-road-coupe-1920.webp') center 58% / cover no-repeat;
}
/* phones get the 900px picture (o-nas.html preloads the same one) */
@media (max-width: 900px) {
  .page-hero--night .page-hero-bg {
    background:
      linear-gradient(to bottom, rgb(14 16 20 / .55) 0%, rgb(14 16 20 / .25) 38%, rgb(14 16 20 / .72) 80%, var(--ink-950) 100%),
      linear-gradient(90deg, rgb(14 16 20 / .8) 0%, rgb(14 16 20 / .35) 55%, transparent 80%),
      url('../images/backgrounds/mountain-road-coupe-900.webp') center 58% / cover no-repeat;
  }
}
.page-hero--night .page-hero-content { width: 100%; }
.page-hero--night .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--on-dark-62);
}
.page-hero--night .hero-eyebrow::before { content: ''; flex: none; width: 36px; height: 1px; background: var(--rule-red); }
.page-hero--night .page-hero-title {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-000);
  text-shadow: 0 2px 30px rgb(0 0 0 / .45);
}
.page-hero--night .page-hero-title .accent-red { color: var(--red-500); font-style: italic; font-weight: 600; }
.page-hero--night .page-hero-sub { max-width: 44ch; color: var(--on-dark-72); text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.page-hero--night + .road-plate { padding-top: var(--sp-10); }
@media (max-width: 900px) {
  .page-hero--night { min-height: clamp(24rem, 64vh, 34rem); padding-bottom: var(--sp-8); }
  .page-hero--night .page-hero-bg { background-position: center, center, 72% 50%; }
  .page-hero--night .hero-eyebrow { letter-spacing: .14em; }
}

/* Arrival: the photograph comes up out of the dark with a slow settle, the
   red rule draws, then the lettering rises in — once, on load. Under
   reduced motion the global rule lands every animation on its last frame. */
@keyframes nightPhotoIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes nightRise    { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes nightRule    { from { transform: scaleX(0); } to { transform: none; } }
.page-hero--night .page-hero-bg { transform-origin: 60% 50%; animation: nightPhotoIn 1.6s var(--ease-out) both; }
.page-hero--night .hero-eyebrow { animation: nightRise .8s var(--ease-out) .35s both; }
.page-hero--night .hero-eyebrow::before { transform-origin: left center; animation: nightRule .7s var(--ease-out) .45s both; }
.page-hero--night .page-hero-title { animation: nightRise .9s var(--ease-out) .5s both; }
.page-hero--night .page-hero-title .accent-red { display: inline-block; animation: nightRise .9s var(--ease-out) .68s both; }
.page-hero--night .page-hero-sub { animation: nightRise .9s var(--ease-out) .9s both; }

/* active nav link on sub-pages */
.active-page { color: var(--red) !important; }

/* ═══════════════════════════════════════════
   O NAS — ZGODOVINA: a night drive down the history

   Was eight glass cards alternating on a hairline with a red→blue progress
   fill. The section title is the brief — "na kolesih zgodovine" — so the
   milestones now stand beside a road that runs the length of the history,
   and a small open car drives down it as the page scrolls. The car is
   position:sticky, so CSS alone moves it. Each milestone has a roadside
   delineator post; its reflector lights up in the car's headlights and the
   entry comes up to full contrast (main.js → ROAD).
   ═══════════════════════════════════════════ */
.road-plate { padding: var(--sp-14) 0 var(--sp-12); }
.road-lead {
  max-width: 60ch;
  font-size: var(--fs-3);
  line-height: var(--lh-loose);
  color: var(--on-dark-62);
}

.road {
  --lane: 4.5rem;
  --gut: clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  margin-top: var(--sp-10);
}

/* the lane: asphalt that fades in and out of the dark at both ends */
.road-lane {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - var(--lane) / 2);
  width: var(--lane);
  background: linear-gradient(to bottom, transparent, var(--ink-900) 5rem, var(--ink-900) calc(100% - 5rem), transparent);
}
.road-lane::before,
.road-lane::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.road-lane::before {                        /* centre dashes */
  left: calc(50% - 1px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .38) 0 1.1rem, transparent 1.1rem 2.5rem);
}
.road-lane::after {                         /* edge lines */
  left: .4rem; right: .4rem;
  border-inline: 2px solid rgb(255 255 255 / .2);
}

/* the car keeps right: heading down the page, that is the viewer's left half */
.road-car {
  position: sticky;
  top: 55vh;
  z-index: 1;
  display: block;
  width: 1.7rem;
  margin-left: calc(25% - .85rem);
}
.road-car svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .5)); }
.car-body { fill: var(--red-600); }
.car-dark { fill: var(--ink-950); }
.road-beam {
  position: absolute;
  top: 92%; left: 50%;
  width: 6.5rem; height: 11rem;
  margin-left: -3.25rem;
  background: linear-gradient(to bottom, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 85%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* the milestones: pairs share a row, the right one set lower, so the eye
   zig-zags down the road in date order */
.road-stops {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lane) minmax(0, 1fr);
  column-gap: var(--gut);
  row-gap: var(--sp-6);
  padding-block: var(--sp-9) var(--sp-12);
}
.stop { position: relative; }
.stop--l { grid-column: 1; text-align: right; }
.stop--r { grid-column: 3; margin-top: 9rem; }

/* a delineator post: white, a black band, a red reflector */
.stop-post {
  position: absolute;
  top: .55rem;
  width: .6rem;
  height: 2.1rem;
  border-radius: 3px 3px 1px 1px;
  background: var(--ink-150);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45);
}
.stop--l .stop-post { right: calc(-1 * var(--gut) + .5rem); }
.stop--r .stop-post { left: calc(-1 * var(--gut) + .5rem); }
.stop-post::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: .45rem;
  height: .5rem;
  background: var(--ink-850);
}
.stop-post::after {
  content: '';
  position: absolute;
  left: .12rem; right: .12rem; top: .55rem;
  height: .3rem;
  border-radius: 1px;
  background: var(--red-800);
  transition: background var(--dur-3) var(--ease-inout), box-shadow var(--dur-3) var(--ease-inout);
}
.stop.is-lit .stop-post::after {
  background: var(--red-500);
  box-shadow: 0 0 8px 2px rgb(var(--red-rgb) / .8), 0 0 26px 6px rgb(var(--red-rgb) / .35);
}

.stop-year {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--red-500);
  transition: color var(--dur-3) var(--ease-inout);
}
.stop-new {
  margin-inline: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--on-dark-62);
}
.stop h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-4);
  line-height: 1.25;
  color: var(--ink-000);
}
.stop p:not(.stop-year) {
  max-width: 40ch;
  font-size: var(--fs-2);
  line-height: var(--lh-loose);
  color: var(--on-dark-55);
}
.stop--l p:not(.stop-year) { margin-left: auto; }
.stop strong { color: var(--on-dark-88); font-weight: 600; }
.stop-marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.stop--l .stop-marks { justify-content: flex-end; }
.stop-marks img {
  height: 2rem;
  width: auto;
  max-width: 7rem;
  object-fit: contain;
  padding: .3rem .55rem;
  border-radius: var(--r-2);
  background: var(--ink-000);
}
/* vertical lockups (Europa Nostra) need the height to stay legible */
.stop-marks img.is-tall { height: 3.25rem; padding: .2rem .35rem; }

/* ahead of the car the road is dark; reached milestones are lit */
/* Milestones not reached yet are muted in colour, not faded: faded text
   would drop below readable contrast. The year and title brighten as the
   road reaches them; the post's glow (.is-lit) does the rest. */
.js-reveal .stop .stop-year, .js-reveal .stop h3 { transition: color var(--dur-3) var(--ease-inout); }
.js-reveal .stop:not(.is-reached) .stop-year { color: var(--on-dark-45); }
.js-reveal .stop:not(.is-reached) h3 { color: var(--on-dark-62); }

@media (max-width: 900px) {
  .road { --lane: 2.75rem; --gut: 1.5rem; }
  .road-lane { left: 0; }
  .road-car { width: 1.35rem; margin-inline: auto; }
  .road-beam { width: 4.5rem; margin-left: -2.25rem; height: 9rem; }
  .road-stops { grid-template-columns: var(--lane) minmax(0, 1fr); row-gap: var(--sp-9); }
  .stop--l, .stop--r { grid-column: 2; margin-top: 0; text-align: left; }
  .stop--l .stop-post { right: auto; left: calc(-1 * var(--gut) + .5rem); }
  .stop--l p:not(.stop-year) { margin-left: 0; }
  .stop--l .stop-marks { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .road-car { position: absolute; top: auto; bottom: 4rem; left: 0; right: 0; }
}

/* ═══════════════════════════════════════════
   O NAS — ORGANIZACIJA: a lacquered panel with hand-painted coachlines

   Was cards with chips, then a masthead list, then a blueprint that read as
   engineering rather than heritage. Now the structure sits on a deep ink
   panel, like a classic car's door, and each body is framed the way a
   pinstriper lines that door: a thick red line with a thin one inside it.
   A symmetrical pinstripe ornament heads the panel.

   The one moment: as each frame comes into view its coachlines paint
   themselves round it (a registered --ps angle sweeping a conic mask), the
   ornament paints outward from its centre, then the names appear. Every
   hidden state is gated on .js-reveal, so without JS or under reduced
   motion the panel is simply complete. Browsers without @property skip
   the sweep and show the lines at once.
   ═══════════════════════════════════════════ */
@property --ps {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

.orgplate { padding: var(--sp-13) 0 var(--sp-12); }

.ps {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: 22px;
  color: var(--ink-000);
  background:
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .045) 42%, transparent 54%),  /* polish */
    radial-gradient(120% 70% at 15% 0%, rgb(255 255 255 / .08), transparent 60%),
    linear-gradient(170deg, var(--ink-850), var(--ink-950) 75%);
  box-shadow: 0 50px 80px -50px rgb(var(--ink-rgb) / .75), inset 0 1px 0 rgb(255 255 255 / .08);
}

/* the ornament: painted outward from the centre */
.ps-orn { display: block; width: 15rem; height: auto; margin: 0 auto calc(-1 * var(--sp-2)); }
.ps-orn path {
  fill: none;
  stroke: var(--red-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease-inout) 250ms;
}
.ps-orn .ps-orn-core { transition-delay: 0ms; transition-duration: 500ms; }

/* a coachlined frame: thick outer line, thin inner line */
.ps-frame {
  --stripe: var(--red-500);
  position: relative;
  padding: 1.6rem 1.75rem 1.7rem;
  border-radius: 16px;
}
.ps-frame::before,
.ps-frame::after {
  --ps: 360deg;
  content: '';
  position: absolute;
  pointer-events: none;
  -webkit-mask: conic-gradient(from 0deg, #000 var(--ps), transparent 0);
          mask: conic-gradient(from 0deg, #000 var(--ps), transparent 0);
  transition: --ps 1100ms var(--ease-inout) var(--t, 0ms);
}
.ps-frame::before { inset: 0; border: 2px solid var(--stripe); border-radius: 16px; }
.ps-frame::after {
  inset: 6px;
  border: 1px solid var(--stripe);
  border-radius: 11px;
  opacity: .7;
  transition-delay: calc(var(--t, 0ms) + 180ms);
}
.ps-frame > * { transition: opacity var(--dur-3) var(--ease-inout) calc(var(--t, 0ms) + 550ms); }

/* sign-written titles, plain names */
.ps-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-000);
}
.ps-t span { font-family: var(--font-sans); font-size: var(--fs-1); font-style: normal; font-weight: 400; color: var(--on-dark-55); }
.ps-names { list-style: none; font-size: var(--fs-2); line-height: 1.35; color: var(--on-dark-88); }
.ps-names li { padding-block: .22rem; break-inside: avoid; }
.ps-names--cols { columns: 2 9.5rem; column-gap: var(--sp-6); }

.ps-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.ps-roles div { display: flex; flex-direction: column; gap: var(--sp-1); }
.ps-roles dt { font-size: var(--fs-1); color: var(--on-dark-55); }
.ps-roles dd { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--ink-000); }

.ps-pairs { display: flex; flex-direction: column; gap: var(--sp-3); }
.ps-pairs dt { font-size: var(--fs-1); color: var(--on-dark-55); }
.ps-pairs dd { font-size: var(--fs-2); font-weight: 500; color: var(--ink-000); }
.ps-mark {
  display: block;
  height: 1.9rem;
  width: auto;
  margin-top: var(--sp-5);
  padding: .25rem .5rem;
  border-radius: var(--r-2);
  background: var(--ink-000);
}

/* presidents are a sequence: a fine red rule runs down the list */
.ps-chain { list-style: none; position: relative; padding-left: 1.1rem; font-size: var(--fs-2); line-height: 1.35; color: var(--on-dark-88); }
.ps-chain::before { content: ''; position: absolute; left: .2rem; top: .55rem; bottom: .55rem; width: 1px; background: rgb(var(--red-rgb) / .55); }
.ps-chain li { position: relative; padding-block: .22rem; }
.ps-chain li::before {
  content: '';
  position: absolute;
  left: -1.1rem; top: .62rem;
  width: .45rem; height: .45rem;
  margin-left: -.02rem;
  border: 1px solid var(--red-500);
  border-radius: 50%;
  background: var(--ink-900);
}
.ps-chain li[aria-current] { color: var(--ink-000); font-weight: 600; }
.ps-chain li[aria-current]::before { background: var(--red-500); }
.ps-chain em { margin-left: .4rem; font-style: normal; font-size: var(--fs-0); font-weight: 500; letter-spacing: .06em; color: var(--red-500); }

.ps-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: stretch; }
.ps-row--foot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.ps-credit { text-align: center; font-size: var(--fs-1); color: var(--on-dark-55); }
.ps-credit strong { color: var(--on-dark-88); font-weight: 600; }

/* ── not yet painted (JS on, frame not reached) ── */
.js-reveal [data-reveal="paint"] { opacity: 1; transform: none; }
.js-reveal .ps-frame:not(.is-in)::before,
.js-reveal .ps-frame:not(.is-in)::after { --ps: 0deg; }
.js-reveal .ps-frame:not(.is-in) > * { opacity: 0; }
.js-reveal .ps-orn:not(.is-in) path { stroke-dashoffset: 1; }

@media (max-width: 900px) {
  .orgplate { padding: var(--sp-11) 0 var(--sp-10); }
  .ps { padding: 1.75rem 1.1rem; gap: var(--sp-5); border-radius: 18px; }
  .ps-orn { width: 11rem; }
  .ps-frame { padding: 1.35rem 1.35rem 1.45rem; }
  .ps-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-row, .ps-row--foot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}
@media (max-width: 480px) {
  .ps-roles { grid-template-columns: minmax(0, 1fr); }
}

/* .chip is shared with Novice, Skupnost and the admin pages; it lived in
   this block and is kept verbatim. */
.chip-group {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-block;
  background: #f8f9fa;
  color: var(--text);
  font-size: 0.78rem; font-weight: 500;
  padding: 6px 14px; border-radius: var(--r-2);
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.chip:hover {
  background: var(--red); color: #fff; border-color: var(--red);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--e-red);
}
.chip:active {
  transform: translateY(1px) scale(0.96);
}
.chip-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.chip-outline:hover { background: var(--red); color: #fff; border-color: var(--red); }
.chip-active {
  background: var(--red); color: #fff;
}

/* ═══════════════════════════════════════════
   O NAS — PUBLIKACIJE

   The magazine feature keeps its layout and cover, minus two tells: a
   cursor:grab on a cover nothing can drag, and a pulsing dot beside a
   static sentence. The archive was six identical "Prihaja kmalu" cards;
   it now holds every issue face out, each cover opening its PDF, and the
   feature shows the newest real cover. The list is published from the
   admin (Vsebine → Revije) and rendered by js/revije-live.js.
   ═══════════════════════════════════════════ */
.pub-section { background: var(--bg); }
.pub-feature {
  display: flex; align-items: center;
  gap: 64px; padding: 100px 24px 60px;
  background: none;
  max-width: 100%;
}
.pub-section .container { max-width: 1200px; margin: 0 auto; }
.pub-text { flex: 1; min-width: 0; }
.pub-quote {
  font-size: 1.15rem; font-style: italic; font-weight: 300;
  color: var(--text2); line-height: 1.6;
  border-left: 3px solid var(--red); padding-left: 18px;
  margin-bottom: 28px;
}
.pub-body {
  font-size: 0.9rem; line-height: 1.8; color: var(--text2);
  margin-bottom: 16px;
}
.pub-body strong { color: var(--text); font-weight: 600; }
.pub-perk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text2);
}
.pub-perk .material-symbols-sharp { font-size: 22px; color: var(--red-600); }
.pub-perk strong { color: var(--text); font-weight: 700; }

/* ── The newest issue: its real cover ── */
.pub-cover-wrap { flex-shrink: 0; padding: var(--sp-6) var(--sp-8); }
.pub-latest { display: block; width: 15rem; color: var(--text2); text-decoration: none; }
.pub-latest img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 50px -28px rgb(var(--ink-rgb) / .6), 0 0 0 1px rgb(0 0 0 / .06);
  transition: transform var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap);
}
.pub-latest:hover img,
.pub-latest:focus-visible img {
  transform: translateY(-6px);
  box-shadow: 0 40px 60px -30px rgb(var(--ink-rgb) / .65), 0 0 0 1px rgb(0 0 0 / .06);
}
.pub-latest:focus-visible { outline: 2px solid var(--red-600); outline-offset: 8px; }
.pub-latest span { display: block; margin-top: var(--sp-4); text-align: center; font-size: var(--fs-1); }
.pub-latest b { color: var(--text); font-weight: 600; }

/* ── The archive: every issue face out, each cover opens its PDF ── */
.shelf-wrap { padding: var(--sp-8) 24px var(--sp-14); }
.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-8);
  margin-bottom: var(--sp-8);
}
.shelf-title { font-size: var(--fs-6); color: var(--text); }
.shelf-note { max-width: 44ch; font-size: var(--fs-2); line-height: var(--lh-loose); color: var(--text2); }
.rack {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--sp-9) var(--sp-6);
}
.rack a { display: block; color: var(--text); text-decoration: none; }
.rack img,
.rack-blank {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 673;
  object-fit: cover;
  background: var(--ink-050);
  box-shadow: 0 16px 26px -18px rgb(var(--ink-rgb) / .55), 0 0 0 1px rgb(0 0 0 / .06);
  transition: transform var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap);
}
.rack-blank { display: grid; place-items: center; font-family: var(--font-serif); font-size: var(--fs-4); color: var(--ink-400); }
.rack a:hover img, .rack a:focus-visible img,
.rack a:hover .rack-blank, .rack a:focus-visible .rack-blank {
  transform: translateY(-6px);
  box-shadow: 0 26px 36px -20px rgb(var(--ink-rgb) / .6), 0 0 0 1px rgb(0 0 0 / .06);
}
.rack a:focus-visible { outline: 2px solid var(--red-600); outline-offset: 6px; }
.rack-no {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 600;
  transition: color var(--dur-1) var(--ease-inout);
}
.rack a:hover .rack-no, .rack a:focus-visible .rack-no { color: var(--red-700); }
.rack-meta { display: block; font-size: var(--fs-1); color: var(--text2); }

@media (max-width: 900px) {
  .pub-feature { flex-direction: column; gap: var(--sp-8); }
  .pub-cover-wrap { display: flex; justify-content: center; }
  .pub-latest { width: 12rem; }
  .rack { grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: var(--sp-7) var(--sp-4); }
}

/* ═══════════════════════════════════════════
   ANIMATIONS — ENHANCEMENTS
   ═══════════════════════════════════════════ */

/* 1 — Hero word reveal */

/* eyebrow and actions still use simple fade-up */


/* word-mask reveal for title and subtitle */


/* 2 — Badge spin-in */


/* 3 — Button shimmer sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(100%); }


/* 5 — Navbar red accent line on scroll */
#navbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--red), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#navbar.scrolled::after { transform: scaleX(1); }

/* REMOVED — `.section-title::after`, a 3px red underline that drew via a
   .title-drawn class only ever added to .cards-section and .membership-teaser
   titles (main.js). 13 of the 16 .section-title instances site-wide therefore
   carried a permanently collapsed scaleX(0) underline. The design as actually
   rendered has no underline; that is what ships.

   REMOVED — `.section-eyebrow { opacity: 0 }`, restored only by a JS observer
   scoped to two homepage sections. Every section eyebrow on o-nas.html and
   clanstvo.html (8 in total) was invisible forever. On the homepage it was
   propped up by [data-scroll].revealed plus a runtime !important injection,
   so this deletion must land together with that injection's removal — which
   it does. Reveal is now the motion engine's job, not a visibility hack.

   REMOVED — `.cards-grid{perspective}` + `.card{will-change:transform}`, the
   prerequisites for a 3D mouse-tilt that the !important injection made a
   no-op. And the .perk staggered reveal, superseded by [data-reveal]. */

/* Footer columns reveal via [data-reveal] now — no bespoke observer,
   and no `.footer-revealed` class to restore what nothing hides. */

/* Reduced motion is handled in one place — see the end of this file. */

/* ═══════════════════════════════════════════
   RESPONSIVE

   Two breakpoints, not four. This file previously used 1024 / 768 / 480
   while hero-film.css used 900, so there were bands where the shared grid
   had collapsed and the hero's had not (and vice versa). 900px is the
   film's own breakpoint — the best-built file on the site uses exactly
   one, so this matches it, with 600px for the final single-column step.

   These two blocks are the LAST rules in the file apart from the
   reduced-motion contract. The old `RESPONSIVE` banner sat mid-file with
   ~780 lines of component CSS after it, so component rules silently
   outranked their own media queries.
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Nav → drawer */
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: -100%; bottom: 0;
    z-index: var(--z-drawer);          /* was 999, i.e. UNDER the 1000 navbar */
    width: min(320px, 85vw);
    background: rgba(255,255,255,0.97);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--nav-h) + var(--sp-4)) var(--sp-4) var(--sp-7);
    overflow-y: auto;
    transition: right var(--transition);
    box-shadow: var(--e-4);
  }
  .nav-links.open { right: 0; }
  /* The ✕ has to stay above the open drawer, or tapping it hits the
     drawer instead; and it is dark, because the drawer behind it is white. */
  .hamburger { position: relative; z-index: calc(var(--z-drawer) + 1); }
  #navbar .hamburger.open span { background: var(--text); }
  .nav-overlay { display: block; }
  .nav-btn { width: 100%; justify-content: space-between; padding: var(--sp-3) 14px; border-radius: var(--r-3); }
  .nav-cta { margin: var(--sp-4) 0 0; width: 100%; text-align: center; padding: 13px; }

  /* Plates */
  .plate-head { grid-template-columns: 1fr; }
  .plate-more { grid-column: 1; justify-self: start; }
  .dossier { padding: var(--sp-11) 0 var(--sp-10); }
  .spec    { padding: var(--sp-11) 0; }
  .member  { padding: var(--sp-10) 0 0; }

  .front { grid-template-columns: 1fr; gap: var(--sp-9); }
  .front-row-link { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-4); }


  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }

}

@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-7); text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { max-width: 240px; margin-left: auto; margin-right: auto; }
  .socials { justify-content: center; }
  .socials li:first-child .soc-handle { left: 50%; translate: -50% 0; }
  .footer-links a:hover { padding-left: 0; }
}

/* ═══════════════════════════════════════════
   ARTICLES & DOGODKI
   ═══════════════════════════════════════════ */
.articles-list-section {
  padding: 80px 0;
  background: var(--bg2);
  min-height: 50vh;
}

.article-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  min-height: 100vh;   /* the footer starts below the fold: the article arriving doesn't push it */
}

.article-header {
  margin-bottom: 40px;
  text-align: left;
}

.back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  margin-bottom: 24px;
  transition: transform var(--transition);
}
.back-link:hover {
  transform: translateX(-4px);
}

.article-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 16px;
}

.article-meta .cat-badges { display: inline-flex; margin-right: 12px; vertical-align: middle; }
.article-meta {
  font-size: 0.95rem;
  color: var(--text2);
  font-weight: 500;
}

/* The article body itself lives in article-prose.css — the same file the
   Studio editor loads for its canvas and its Predogled overlay, so what an
   admin approves before publishing is what a reader gets. Do not restyle
   .article-content here; it would beat the shared file and reopen the drift.
   Everything above this point is page chrome, outside the prose. */

.loading-spinner {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text2);
  padding: 40px;
}

.error-message {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid rgb(var(--red-rgb) / 0.2);
}
.error-message p {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 24px;
}

/* ── Controls: Search & Filters ── */
.controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
}
.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--text2);
  pointer-events: none;
  opacity: 0.6;
}
.search-input {
  width: 100%;
  padding: 18px 24px 18px 56px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  box-shadow: var(--e-2);
  transition: all var(--transition);
  outline: none;
}
.search-input::placeholder {
  color: var(--text2);
  opacity: 0.7;
}
.search-input:focus {
  border-color: rgb(var(--red-rgb) / 0.4);
  box-shadow: var(--e-red);
  background: #fff;
}

.filters-wrapper {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none; /* Firefox */
}
.filters-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.filter-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 10px 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--e-red);
}
.filter-chip.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: var(--e-red);
}

/* ── Skeleton Loaders ── */


/* REMOVED — the third competing card-reveal system. `.cards-grid .card`
   carried `opacity: 0` restored only by a `.revealed` class, so with
   JavaScript disabled the homepage's three cards were invisible. Reveal is
   the motion engine's job now, via the [data-reveal] attribute, which is
   gated on .js-reveal and therefore inert when JS is absent.

   Also removed the card image hover-zoom: it targeted `.skeleton-img` and
   `> div:first-child`, neither of which exists in the card markup. */


/* ═══════════════════════════════════════════
   CLANSTVO / MEMBERSHIP PAGE
   ═══════════════════════════════════════════ */
.clanstvo-bg {
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/backgrounds/mountain-road-coupe-1920.webp');
}

.clanstvo-section {
  padding: 80px 24px;
  text-align: center;
}

.komisarji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}

.komisar-card {
  padding: 30px;
  background: var(--bg);
  border-radius: var(--radius);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.komisar-card h4 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.komisar-card .phone {
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.komisar-card .region {
  font-size: 0.9rem;
  color: var(--text2);
}
.komisar-card.accent-card {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}
.komisar-card.accent-card h4, 
.komisar-card.accent-card .phone, 
.komisar-card.accent-card .region {
  color: #fff;
}

.info-alert {
  margin-top: 50px;
  padding: 24px 30px;
  background: rgb(var(--red-rgb) / 0.05);
  border: 1px solid rgb(var(--red-rgb) / 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.info-alert .icon {
  font-size: 2rem;
  color: var(--red);
}
.info-alert p {
  font-weight: 600;
  color: var(--text);
  font-size: 1.1rem;
}

.dokumenti-section {
  background: var(--bg2);
  padding: 80px 24px;
}
.docs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
}

.docs-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doc-group h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0,0,0,0.05);
}
.doc-note {
  font-size: 0.85rem;
  color: var(--text2);
  margin-bottom: 16px;
  font-style: italic;
}

.doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg);
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--e-2);
}
.doc-link .icon {
  font-size: 1.4rem;
}
.doc-link:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--e-red);
}

.povezave-section {
  padding: 80px 24px;
}
.povezave-card {
  padding: 40px;
  text-align: center;
}
.povezave-card h3 {
  font-family: var(--font-serif);
  font-size: 2rem;
  margin-bottom: 30px;
}
.links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.links-grid a {
  padding: 12px 24px;
  background: var(--bg2);
  color: var(--blue);
  text-decoration: none;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.links-grid a span {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.links-grid a:hover {
  background: var(--blue);
  color: #fff;
}
.links-grid a:hover span {
  transform: translate(2px, -2px);
}

/* ═══════════════════════════════════════════
   HERO — v2 "cinematic restraint" (overrides earlier hero block)
   Let the vehicle breathe · side-grade · editorial italic accent ·
   quiet meta bar · Google Material Symbols (Sharp)
   ═══════════════════════════════════════════ */
.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; vertical-align: middle;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* neutralise the old glowing-orb pseudo-elements */


/* Side grade: opaque where the words are, clear over the car */


@keyframes heroRise { from { opacity: 0; transform: translateY(22px); }
                      to   { opacity: 1; transform: translateY(0); } }


/* Buttons (shared with membership section) — self-contained so icons align */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
  padding: 14px 28px; border-radius: var(--r-3); text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: var(--e-red);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px);
  box-shadow: var(--e-red); }
.btn-primary:active { transform: translateY(1px) scale(0.98); }
.btn-primary .material-symbols-sharp { font-size: 20px; transition: transform var(--transition); }
.btn-primary:hover .material-symbols-sharp { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem;
  padding: 14px 28px; border-radius: var(--r-3); text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-ghost:hover { background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
.btn-ghost .material-symbols-sharp { font-size: 20px; }

/* Quiet meta bar */
.hero-meta {
  position: relative; z-index: 4; width: 100%; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  opacity: 0; animation: heroRise 1s var(--ease) 1.5s forwards;
}
.hero-meta-inner {
  max-width: 1340px; margin: 0 auto; padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hero-meta-est {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-meta-est .material-symbols-sharp { font-size: 18px; color: var(--red); }
.hero-meta-stats { display: flex; align-items: center; gap: 34px; }
/* Serif figure + mono label + hairline divider. Inherited from the retired
   hero-v2 meta bar; the membership stat band builds on these. */
.hmstat { display: flex; align-items: baseline; gap: var(--sp-2); }
.hmstat b {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ink-000); line-height: 1;
}
/* Direct child only — `.odo` is a <span> nested in the <b>, and a
   descendant selector here shrank the figure to label size. */
.hmstat > span {
  font-size: var(--fs-0);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-45);
}
.hmdiv { width: 1px; height: 26px; background: rgb(255 255 255 / .12); }

/* Affiliation / membership logos */
.hero-affil { display: flex; align-items: center; gap: 12px; }
.hero-affil-label {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); white-space: nowrap; margin-right: 2px;
}
.affil-logo {
  height: 34px; width: auto; max-width: 108px; object-fit: contain;
  background: #fff; border-radius: var(--r-2); padding: 6px 10px;
  box-shadow: var(--e-2);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.affil-logo:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
/* vertical lockups (e.g. Europa Nostra) get slightly tighter padding so the mark reads larger */
.affil-logo--tall { padding: 3px 6px; }

/* The card primitives (.card-cat / .card-title / .card-desc / .card-cta)
   moved up into the DOSSIER block, so `.card-cta--quiet` can override the
   base. They were defined down here, after --quiet, and at equal
   specificity source order won: every index row rendered as a solid red
   button. */

@media (max-width: 900px) {
  .hero-meta-stats { display: none; }
  /* location on its own row; affiliation logos wrap to a full-width row below */
  .hero-meta-inner { padding: 13px 24px; gap: 10px 12px; flex-wrap: wrap; }
  .hero-affil-label { display: none; }
  .hero-affil { flex-basis: 100%; gap: 10px; }
  .affil-logo { height: 27px; padding: 4px 7px; max-width: 78px; box-shadow: var(--e-1); }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION — the whole contract, one block, last word in the file.

   Replaces three scattered blocks that between them covered none of the
   infinite animations and left the unconditional inline `transition:` writes
   from main.js untouched.

   Why not `animation: none`: on a forwards-filled animation, `none` reverts
   the element to its PRE-animation state. `.film-skip` (hero-film.css) is
   `opacity:0` with `animation: fadeIn … forwards`, so `none` would hide the
   hero's skip control permanently — the exact bug hero-film.css already
   works around with `display:none`. `1ms` + a single iteration applies the
   END state instantly instead, which is what "no motion" should mean.
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal primitives land on their final state, never their hidden one. */
  [data-reveal], [data-scroll],
  [data-reveal] .w, [data-scroll] .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* The odometer's mask and per-digit motion blur are the two parts that
     read as motion even when static. Mirrors hero-film.css. */
  .odo { -webkit-mask-image: none; mask-image: none; }
  .odo .col i { filter: none; }
}