/* ==========================================================================
   TRANZIT — oblikovni sistem
   Temno-prvo. Brez zaobljenih vogalov, brez senc. Hairline je konstrukcija.
   ========================================================================== */

/* ------------------------------- ŽETONI ---------------------------------- */
:root {
  --bg-base:       #0e0f12;
  --bg-deep:       #07080a;
  --bg-raised:     #15171b;
  --bg-raised-alt: #191b20;
  --line:          #1c1e23;
  --line-strong:   #23262b;
  --line-muted:    #2c2f35;
  --text-primary:  #f2f1ee;
  --text-on-photo: #ffffff;
  --text-secondary:#d5d6d9;
  --text-body:     #8f9197;
  --text-muted:    #80838a;   /* 4,9:1 na podlagi — dovolj za drobno besedilo (WCAG AA) */
  --text-faint:    #5d6066;   /* le okras (velike številke, črte) — besedilo uporablja muted */
  --accent:        #ff4d3d;
  --accent-soft:   #ff8a80;
  --positive:      #4dd08a;

  --gutter: 44px;
  --edge: 0px;         /* dodatni rob na zelo širokih zaslonih, glej ŠIROKI ZASLONI */
  --sidebar: 340px;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Navpični ritem. Prostor med razdelki je tisto, po čemer se revija loči od
     agregatorja novic — raste z zaslonom, a se nad 1440 px ustavi, ker se tam
     ustavi tudi širina vsebine. */
  --rhythm:     clamp(52px, 5.4vw, 92px);
  --rhythm-sm:  clamp(28px, 2.7vw, 44px);
  --rhythm-xs:  clamp(22px, 2vw, 32px);

  --font-ui: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Newsreader, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --scrim-hero: linear-gradient(180deg, rgba(14,15,18,0) 34%, rgba(10,11,13,0.95) 100%);
  --scrim-tile: linear-gradient(180deg, rgba(14,15,18,0.15) 20%, rgba(10,11,13,0.92) 100%);
  --hatch: repeating-linear-gradient(135deg, var(--bg-raised) 0 8px, var(--bg-raised-alt) 8px 16px);
}

/* Neobvezna svetla tema (v1). Temna ostaja privzeta identiteta. */
[data-theme="light"] {
  --bg-base:       #ffffff;
  --bg-deep:       #f4f3f0;
  --bg-raised:     #f6f5f2;
  --bg-raised-alt: #efeeea;
  --line:          #e2e0da;
  --line-strong:   #d4d2cb;
  --line-muted:    #bfbdb5;
  --text-primary:  #14151a;
  --text-on-photo: #ffffff;
  --text-secondary:#33353c;
  --text-body:     #5c5f66;
  --text-muted:    #686b72;
  --text-faint:    #8a8d93;
  --scrim-hero: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(10,11,13,0.88) 100%);
  --scrim-tile: linear-gradient(180deg, rgba(0,0,0,0.1) 20%, rgba(10,11,13,0.85) 100%);
  --hatch: repeating-linear-gradient(135deg, #f2f1ed 0 8px, #e9e8e3 8px 16px);
}

/* ------------------------------ PODLAGA ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0;
}

.shell { width: 100%; margin: 0 auto; background: var(--bg-base); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--bg-base); padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
.skip:focus { left: 0; }

/* Tipografski pomočniki */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.hair { flex: 1; height: 1px; background: var(--line); min-width: 12px; }

/* ---------------------------- STORITVENA VRSTICA -------------------------- */
.utility {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 0 calc(var(--gutter) + var(--edge)); height: 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted); text-transform: uppercase;
}
.utility__data { display: flex; align-items: stretch; }
.utility__cell {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px; border-right: 1px solid var(--line); white-space: nowrap;
}
.utility__cell:first-child { padding-left: 0; color: var(--text-secondary); }
.utility__cell:last-child { border-right: 0; }
.utility__val { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.up { color: var(--accent); } .down { color: var(--positive); } .flat { color: var(--text-muted); }
.utility__links { display: flex; align-items: center; gap: 22px; color: var(--text-secondary); }
.utility__links a { transition: color 140ms var(--ease); }
.utility__links a:hover { color: var(--accent); }
.utility__links .is-accent { color: var(--accent); }

/* -------------------------------- GLAVA ---------------------------------- */
.masthead {
  background: var(--bg-base); border-bottom: 1px solid var(--line);
  padding: 30px calc(var(--gutter) + var(--edge)) 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark { display: flex; flex-direction: column; gap: 8px; }
.wordmark__row { display: flex; align-items: center; gap: 12px; }
.wordmark__bar { width: 5px; height: 44px; background: var(--accent); flex: none; }
.wordmark__text {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 900;
  letter-spacing: -0.055em; line-height: 0.85; color: var(--text-primary);
}
.wordmark__strap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--text-muted); padding-left: 17px; text-transform: uppercase;
}
.masthead__tools { display: flex; align-items: center; gap: 10px; }
.searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  padding: 12px 16px; width: 260px; color: var(--text-muted); font-size: 13.5px;
  text-align: left; transition: border-color 140ms var(--ease);
}
.searchbar:hover { border-color: var(--line-muted); }
.searchbar__glyph { font-family: var(--font-mono); color: var(--text-faint); display: inline-flex; }
.ico-lupa { flex: none; display: block; }
.condensed__search .ico-lupa { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
/* Iskanje v meniju: tarča 44 × 44, lupa 18 px, ob prehodu rdeča kot povezave menija. */
.nav__searchbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; background: none; border: 0; color: var(--text-secondary); cursor: pointer;
  transition: color 160ms ease;
}
.nav__searchbtn:hover, .nav__searchbtn:focus-visible { color: var(--accent); }
.searchbar__hint {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--line-strong); padding: 2px 6px; color: var(--text-faint);
}
.btn-accent {
  background: var(--accent); color: #0e0f12; padding: 14px 24px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
  display: inline-block; transition: background 160ms var(--ease);
}
.btn-accent:hover { background: var(--text-primary); }
.btn-ghost {
  border: 1px solid var(--line-muted); padding: 12px 22px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--text-primary); display: inline-block; text-transform: uppercase;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #0e0f12; }

/* ---------------------------------- NAV ---------------------------------- */
.nav {
  background: var(--bg-base); border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; padding: 0 calc(var(--gutter) + var(--edge)); height: 50px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.nav__item {
  position: relative; display: flex; align-items: center;
  padding: 0 20px; color: var(--text-secondary);
  transition: color 140ms var(--ease);
}
.nav__item:first-child { padding-left: 0; }
.nav__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 140ms var(--ease);
}
.nav__item:first-child::after { left: 0; }
.nav__item:hover { color: var(--accent); }
.nav__item:hover::after { transform: scaleX(1); }
.nav__item.is-active { color: var(--accent); }
.nav__item.is-active::after { transform: scaleX(1); }
.nav__db {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; color: var(--text-muted);
}
.nav__db:hover { color: var(--accent); }
.nav__burger { display: none; }

/* ----------------------- LEPLJIVA STRNJENA GLAVA -------------------------- */
.condensed {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: 56px; background: var(--bg-base); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 20px; padding: 0 calc(var(--gutter) + var(--edge));
  transform: translateY(-100%); transition: transform 220ms var(--ease);
  will-change: transform;
}
.condensed.is-on { transform: translateY(0); }
.condensed__mark { display: flex; align-items: center; gap: 8px; flex: none; }
.condensed__mark span:first-child { width: 3px; height: 20px; background: var(--accent); }
.condensed__mark span:last-child { font-size: 20px; font-weight: 900; letter-spacing: -0.05em; }
.condensed__nav {
  display: flex; gap: 18px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary);
  overflow: hidden;
}
.condensed__nav a:hover { color: var(--accent); }
.condensed__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.condensed__search {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--line-strong); padding: 7px 10px;
}
.condensed__search:hover { color: var(--accent); border-color: var(--accent); }
.condensed__cta {
  background: var(--accent); color: #0e0f12; padding: 9px 16px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 80ms linear; will-change: transform;
}

/* -------------------------------- HERO ----------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 400px; }
.hero__lead {
  position: relative; display: block; height: 600px; overflow: hidden;
  background: var(--bg-raised); color: var(--text-on-photo);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.hero__lead:hover .hero__img { transform: scale(1.03); }
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.flags {
  position: absolute; top: 28px; left: 32px; display: flex; gap: 1px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700;
  text-transform: uppercase; z-index: 2;
}
.flag { background: rgba(10,11,13,0.75); color: var(--text-primary); padding: 7px 11px; backdrop-filter: blur(6px); }
.flag--accent { background: var(--accent); color: #0e0f12; backdrop-filter: none; }
.hero__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 46px 32px 40px; display: flex; flex-direction: column; gap: 18px;
}
.hero__title {
  font-size: clamp(32px, 4.2vw, 60px); line-height: 0.98; font-weight: 900;
  letter-spacing: -0.042em; max-width: 17ch; color: #fff;
}
.hero__dek {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.45;
  max-width: 56ch; color: #c8cace;
}
.specrail {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(242,241,238,0.16);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: #9a9ca1; text-transform: uppercase;
}
.specrail__by { margin-left: auto; color: var(--text-primary); }

.hero__side { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.hero__sidehead {
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--text-muted); display: flex; justify-content: space-between;
  text-transform: uppercase;
}
.live { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.live__dot { width: 6px; height: 6px; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sidestory {
  padding: 24px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  transition: background 160ms var(--ease);
}
.sidestory:hover { background: var(--bg-raised); }
.sidestory h2 {
  font-size: 22px; line-height: 1.14; font-weight: 700;
  letter-spacing: -0.022em; color: var(--text-primary);
}
.sidestory--photo {
  position: relative; flex: 1; min-height: 200px; overflow: hidden;
  justify-content: flex-end; border-bottom: 0; background: var(--bg-raised);
}
.sidestory--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sidestory--photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim-tile); }
.sidestory--photo > * { position: relative; z-index: 2; }
.sidestory--photo h2 { color: #fff; }
.sidestory--photo:hover { background: var(--bg-raised); }

.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
}
.eyebrow--soft { color: var(--accent-soft); }

/* -------------------------------- TICKER --------------------------------- */
.ticker {
  background: var(--bg-deep); border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; height: 48px;
  padding-left: calc(var(--gutter) + var(--edge)); overflow: hidden;
}
.ticker__chip {
  display: flex; align-items: center; background: var(--accent); color: #0e0f12;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; padding: 0 14px; margin-right: 24px; flex: none;
  text-transform: uppercase;
}
.ticker__viewport { overflow: hidden; display: flex; align-items: center; flex: 1; }
.ticker__track {
  display: flex; align-items: center; gap: 26px; white-space: nowrap;
  font-size: 13.5px; color: #9a9ca1; padding-right: 26px;
  animation: marquee 45s linear infinite;
}
.ticker:hover .ticker__track,
.ticker__track:focus-within { animation-play-state: paused; }
.ticker__track a:first-child { color: var(--text-secondary); }
.ticker__track a:hover { color: var(--accent); }
.ticker__sep { color: var(--line-muted); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------- TELO ---------------------------------- */
.body { display: grid; grid-template-columns: 1fr var(--sidebar); }
/* Strani brez stranske vrstice (npr. poročilo za oglaševalca) ne smejo pustiti
   praznega stolpca. */
.body--solo { grid-template-columns: 1fr; }
.main { border-right: 1px solid var(--line); min-width: 0; }
.section { padding: var(--rhythm) var(--gutter) calc(var(--rhythm) * 0.86); border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.sechead { display: flex; align-items: center; gap: 16px; margin-bottom: var(--rhythm-sm); }
/* Rdeča zareza pred naslovom rubrike — ista poteza kot ob logotipu, da se
   razdelki berejo kot deli iste publikacije, ne kot ločeni bloki. */
.sechead::before {
  content: ""; flex: 0 0 auto; width: 3px; height: 16px;
  background: var(--accent); margin-right: -6px;
}
.sechead h2, .sechead h3 {
  font-family: var(--font-mono); font-size: 15px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary);
}
.sechead__all {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  /* `--text-muted` da pri 11 px razmerje 3.97:1 in pade pod prag AA (4.5:1).
     `--text-body` doseže 6.08:1 in ostane vidno tišji od naslova rubrike. */
  color: var(--text-body); white-space: nowrap; transition: color 140ms var(--ease);
}
.sechead__all:hover { color: var(--accent); }

/* Kartice 3-up */
/* Fotografije ohranijo svoje razmerje, zato so različno visoke. Da se naslovi
   kljub temu poravnajo v isto vrstico, delijo vrstice mreže (subgrid): slika
   visi z vrha, besedilo pa se poravna po najvišji sliki v vrsti. */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rhythm-sm); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rhythm-xs); }
@supports (grid-template-rows: subgrid) {
  .grid3, .grid4 { grid-template-rows: auto auto auto auto; }
  .grid3 > .card, .grid4 > .card {
    grid-row: span 4; grid-template-rows: subgrid; display: grid; gap: 14px;
  }
  .grid3 > .card > .card__media, .grid4 > .card > .card__media { align-self: start; }
}
.card { display: flex; flex-direction: column; gap: 14px; transition: opacity 180ms var(--ease); }
.card:hover { opacity: 0.82; }
/* Vozilo se ne obreže v enotno razmerje: fotografije so posnete tako, da je
   vozilo celo v kadru, in prisilni 16:9 mu odreže streho ali kolesa.
   Ohranimo razmerje izvirnika, omejimo le višino. */
.card__media {
  overflow: hidden; background: var(--bg-raised); position: relative;
  max-height: 260px; display: flex;
}
.card__media img {
  width: 100%; height: auto; object-fit: contain; align-self: flex-start;
  transition: transform 180ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }
.card:hover .eyebrow { color: var(--text-primary); }
.card h3, .card h4 {
  font-size: 20px; line-height: 1.16; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-primary);
  /* Brez osamljene besede v zadnji vrstici naslova. */
  text-wrap: pretty;
}
/* Rdeča črta se ob prehodu izriše pod naslovom. Mirujoče stanje je scaleX(0),
   torej odsotnost črte — pravilno stanje tudi brez JS in brez animacij. */
.card h3::after, .card h4::after {
  content: ""; display: block; height: 2px; margin-top: 8px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.card:hover h3::after, .card:hover h4::after,
.card:focus-visible h3::after, .card:focus-visible h4::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .card h3::after, .card h4::after { transition: none; }
}
.card__dek {
  font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45; color: var(--text-body);
}
.card--sm .card__media { max-height: 190px; }
.card--sm h3, .card--sm h4 { font-size: 17px; line-height: 1.18; letter-spacing: -0.018em; }

/* Vzorčni nadomestek za manjkajočo fotografijo */
.hatch {
  background: var(--hatch);
  display: flex; align-items: flex-end; padding: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  text-transform: uppercase;
}

/* Intervju */
.interview {
  display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line);
}
.interview__panel {
  padding: 44px; display: flex; flex-direction: column; gap: 18px;
  justify-content: center; background: var(--bg-raised);
}
.interview__panel h3 {
  font-size: clamp(24px, 2.6vw, 33px); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.035em; color: var(--text-primary);
}
.interview__dek { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.5; color: #9a9ca1; }
.interview__panel .btn-ghost { align-self: flex-start; margin-top: 8px; }
.interview__photo { min-height: 340px; background: var(--bg-raised); overflow: hidden; }
.interview__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }

/* Oštevilčene vrstice */
.rows { display: flex; flex-direction: column; }
.row {
  position: relative; display: grid; grid-template-columns: 82px 264px 1fr;
  gap: 28px; align-items: center; padding: var(--rhythm-xs) 0;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.row::before {
  content: ""; position: absolute; inset: 0; background: var(--bg-raised);
  transform: scaleX(0); transform-origin: left; z-index: 0;
  transition: transform 160ms var(--ease);
}
.row:hover::before { transform: scaleX(1); }
.row > * { position: relative; z-index: 1; }
/* Uredniška številka vrstice. Velika in tabelarična — v reviji o vozilih se
   številke berejo kot merilnik, zato dobijo težo, ne le vlogo oznake. */
.row__n {
  font-family: var(--font-mono); font-size: 44px; font-weight: 800;
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint); transition: color 160ms var(--ease);
}
.row:hover .row__n { color: var(--accent); }
.row__media { overflow: hidden; background: var(--bg-raised); max-height: 176px; display: flex; }
.row__media img { width: 100%; height: auto; object-fit: contain; align-self: flex-start; }
.row__text { display: flex; flex-direction: column; gap: 8px; }
.row__text h3, .row__text h4 {
  font-size: 23px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.024em; color: var(--text-primary);
  text-wrap: pretty;
}
.row__text p {
  font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45;
  color: var(--text-body); max-width: 60ch;
}
.row__arrow {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); color: var(--accent); opacity: 0;
  transition: opacity 160ms var(--ease); z-index: 1;
}
.row:hover .row__arrow { opacity: 1; }

/* ---------------- 3D NAGIB KARTIC OB KAZALCU ------------------------------
   Edini "3D" učinek na strani: rahel nagib, ki sledi kazalcu, kot da bralec
   dvigne karto s pulta. `perspective` nosi mreža (skupna globinska scena za
   vse kartice v vrsti), ne posamezna kartica — tako se sosednje kartice ne
   "razidejo" vsaka v svojo perspektivo. Kot nastavlja JS prek `--rx`/`--ry`
   (glej site.js); privzeta vrednost 0deg je mirujoče stanje, torej pravilen,
   raven izgled tudi če se skripta ne izvede. Obstoječi `transition: transform`
   na `.card`/`.row` (glej spodaj) že poskrbi za animacijo, zato ga tu ne
   podvajamo. Na dotik ni kazalca, ki bi "sledil" — zato izključno za miško. */
/* ------------------------------ STRANSKI STOLPEC -------------------------- */
.aside { display: flex; flex-direction: column; min-width: 0; }
.block { padding: 28px 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.block:last-child { border-bottom: 0; }
.block__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-muted); text-transform: uppercase;
}
.issue { display: flex; gap: 16px; }
.issue__cover {
  width: 116px; height: 165px; flex: none; object-fit: cover;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
}
.issue__meta { display: flex; flex-direction: column; gap: 8px; }
.issue__meta strong { font-size: 20px; letter-spacing: -0.025em; color: var(--text-primary); }
.issue__meta span { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-body); line-height: 1.4; }
.btn-block {
  background: var(--accent); color: #0e0f12; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-align: center; margin-top: 4px;
  transition: background 160ms var(--ease);
}
.btn-block:hover { background: var(--text-primary); }

.datarow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.datarow:last-child { border-bottom: 0; }
.datarow__k { font-size: 14px; color: var(--text-secondary); }
.datarow__v {
  font-family: var(--font-mono); font-size: 14px; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.datarow__v small { font-size: 11px; }
.datarow.is-flash { animation: flash 900ms var(--ease); }
@keyframes flash { 0% { background: rgba(255,77,61,0.12); } 100% { background: transparent; } }
.stamp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; }

.nlbox { background: var(--bg-raised); gap: 12px; }
.nlbox h3 { font-size: 21px; line-height: 1.1; font-weight: 800; letter-spacing: -0.028em; color: var(--text-primary); }
.nlbox p { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-body); line-height: 1.45; }
.nlform { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.field {
  background: var(--bg-base); border: 1px solid var(--line-strong);
  padding: 11px 13px; font-size: 13.5px; color: var(--text-primary); width: 100%;
  transition: border-color 140ms var(--ease);
}
.field::placeholder { color: var(--text-muted); }
.field:focus { border-color: var(--accent); outline: none; }
/* Prijava na e-novice: isti rdeči gumb kot »Naroči« — bel gumb je bil edini na strani. */
.btn-light {
  background: var(--accent); color: #0e0f12; padding: 11px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-align: center; transition: background 160ms var(--ease);
}
.btn-light:hover { background: #ff5a47; }
.btn-light[disabled] { opacity: 0.55; cursor: progress; }
.consent {
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--text-faint);
}
.consent a { text-decoration: underline; }
.formnote { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; }
.formnote.is-err { color: var(--accent); }
.formnote.is-ok { color: var(--positive); }
.nl-success {
  border-left: 2px solid var(--positive); padding-left: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.nl-success strong { font-size: 17px; letter-spacing: -0.02em; }
.nl-success span { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-body); line-height: 1.45; }

.eventcard { display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--accent); padding-left: 16px; }
.eventcard strong { font-size: 19px; letter-spacing: -0.022em; line-height: 1.15; color: var(--text-primary); }
.eventcard span.serif { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-body); line-height: 1.4; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  border: 1px solid var(--line-strong); padding: 6px 11px;
  font-family: var(--font-mono); font-size: 11px; color: #9a9ca1;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.tag:hover, .tag.is-active { border-color: var(--accent); color: var(--accent); }

/* -------------------------------- OGLASI --------------------------------- */
.ad { display: flex; flex-direction: column; gap: 10px; }
.ad__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--text-faint); text-transform: uppercase;
}
.ad__frame {
  border: 1px solid var(--line-strong); background: var(--hatch);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
  overflow: hidden; position: relative;
}
/* Oglas se nikoli ne obreže: oglaševalčeva slika (besedilo, logotip) mora ostati cela.
   Pasica drugačnega razmerja dobi temna polja zgoraj in spodaj, ne odrezanih robov. */
.ad__frame img { width: 100%; height: 100%; object-fit: contain; }
.ad__frame:has(> a > img) { background: var(--bg-deep); }
.ad--sidebar .ad__frame { height: 250px; }
.ad--leaderboard { padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.ad--leaderboard .ad__frame { height: 250px; max-height: 250px; }
.ad--inarticle .ad__frame { height: 90px; }

/* -------------------------------- NOGA ----------------------------------- */
.footer {
  border-top: 1px solid var(--line); background: var(--bg-deep); color: var(--text-body);
  padding: 52px calc(var(--gutter) + var(--edge)) 26px; display: flex; flex-direction: column; gap: 36px;
  font-size: 13.5px;
}
.footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__mark { display: flex; align-items: center; gap: 10px; }
.footer__mark span:first-child { width: 4px; height: 30px; background: var(--accent); }
.footer__mark span:last-child { font-size: 32px; font-weight: 900; letter-spacing: -0.05em; color: var(--text-primary); }
.footer__mission { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.5; max-width: 36ch; }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col strong {
  color: var(--text-primary); font-size: 10.5px; letter-spacing: 0.16em;
  font-family: var(--font-mono); text-transform: uppercase;
}
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-faint); text-transform: uppercase;
}
.footer__bottom a:hover { color: var(--accent); }

/* ------------------------------- ČLANEK ---------------------------------- */
.article__head { position: relative; }
/* Rezerva za globinski zamik: slika je 18 % višja od okvirja in presega rob
   zgoraj in spodaj, zato premik ±6 % nikoli ne razkrije praznine. Razred `is-par`
   doda JS — brez njega slika sedi točno v okvirju (glej site.js, 12). */
/* Selektorja sta namenoma dvorazredna: `.article__hero img` in `.hero__img`
   imata enako težo, zato bi enorazredni zapis izgubil po vrstnem redu. */
.article__hero.is-par > img,
.hero__lead.is-par > img {
  position: absolute; inset: -9% 0; height: 118%; width: 100%; object-fit: cover;
}
.article__hero { position: relative; height: 520px; overflow: hidden; background: var(--bg-raised); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
/* Naslov je vedno bel, zato zatemnitev ni vezana na temo: navpični preliv, ki se
   zgosti že na sredini (tam začne besedilo), in levi pas, kjer stoji besedilo.
   Na svetli fotografiji (belo pročelje, nebo) je bil sam navpični preliv prešibak.
   Svoja plast (::before nad sliko), ker ::after je podlaga med nalaganjem in
   ga pravilo »STANJE MED NALAGANJEM« prepiše in po nalaganju skrije. */
.article__hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0) 22%, rgba(10, 11, 13, 0.5) 52%, rgba(10, 11, 13, 0.94) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.5) 0%, rgba(10, 11, 13, 0) 62%);
}

/* ---------------- GLOBINSKI ZAMIK — različica brez glavne niti ------------
   `scroll` poslušalec je bil prepovedan (teče vsak okvir na glavni niti);
   namesto njega `view()` časovnico izračuna kompozitor. Ista 118 %/-9 %
   rezerva kot spodnji `.is-par` (JS različica za brskalnike brez podpore),
   zato rob slike nikoli ne pride v okvir, naj teče katerakoli različica.
   Selektor je namerno brez `.is-par`: podpora je lastnost brskalnika, ne
   nekaj, kar doda JS, zato mora veljati tudi če se skripta ne izvede. Pravilo
   stoji za obema osnovnima (`.hero__img`, `.article__hero img` zgoraj), da ju
   po vrstnem redu prepiše. */
@supports (animation-timeline: view()) {
  .hero__lead > img,
  .article__hero > img {
    position: absolute; inset: -9% 0; height: 118%; width: 100%; object-fit: cover;
    animation: globinski-zamik linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  /* -6 % do +6 % višine slike — enak razpon kot `p * 6` v JS različici. */
  @keyframes globinski-zamik {
    0%   { translate: 0 -6%; }
    100% { translate: 0 6%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lead > img, .article__hero > img { animation: none; translate: 0 0; }
}
.article__heroinner {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 46px var(--gutter) 40px; display: flex; flex-direction: column; gap: 18px;
}
.article__title {
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; font-weight: 900;
  letter-spacing: -0.038em; max-width: 20ch; color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
/* Na naslovnici oznake plavajo v kotu fotografije; v glavi članka stojijo v toku nad naslovom. */
.article__heroinner .flags { position: static; align-self: flex-start; margin-bottom: 4px; }
.article__dek {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.45; max-width: 60ch; color: #d6d8dc;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.article__wrap { padding: 44px var(--gutter); }
.article__col { max-width: 74ch; margin-inline: auto; }
.prose {
  max-width: 68ch; margin-inline: auto; font-family: var(--font-serif); font-size: 19px;
  line-height: 1.65; color: var(--text-secondary);
}
/* Navpični ritem po vlogi bloka. Naslov razdelka potrebuje več zraka nad
   seboj kot pod njim — sicer se besedilo bere kot neprekinjen tok. */
.prose > * + * { margin-top: 24px; }
.prose > * + h2 { margin-top: 64px; }
.prose > * + h3 { margin-top: 44px; }
.prose > h2 + *, .prose > h3 + * { margin-top: 18px; }
.prose > * + blockquote, .prose > blockquote + * { margin-top: 40px; }
.prose > * + figure, .prose > figure + * { margin-top: 40px; }
.prose > * + hr, .prose > hr + * { margin-top: 48px; }
/* Uvodni odstavek nosi večjo težo — bralec ga prebere, tudi če ostalo preleti. */
.prose > p:first-of-type { font-size: 21px; line-height: 1.55; color: var(--text-primary); }
.prose h2 {
  font-family: var(--font-ui); font-size: 27px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; color: var(--text-primary);
}
.prose h3 {
  font-family: var(--font-ui); font-size: 21px; font-weight: 700;
  letter-spacing: -0.022em; color: var(--text-primary);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose blockquote {
  margin: 34px 0; padding-left: 22px; border-left: 2px solid var(--accent);
  font-family: var(--font-ui); font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.2; color: var(--text-primary);
}
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
/* Širino narekuje atribut width iz izvorne objave (kot na starem portalu),
   omejena z mero besedila. Brez `width: auto` — to sesuje lazy-loading. */
.prose img {
  max-width: 100%; height: auto; display: block; margin: 32px auto;
  background: var(--bg-raised);
}
/* Samo vodoravno sredinjenje. Navpični ritem določa `.prose > * + figure`
   zgoraj; kratki zapis `margin` bi ga tiho povozil, ker ima enako težo in
   stoji za njim. */
.prose figure { margin-inline: auto; max-width: 100%; }
.prose figure.is-small { max-width: 340px; }
.prose figure.is-wide img { width: 100%; }
.prose figcaption, .prose .caption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-faint); text-transform: uppercase; margin-top: 10px;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.prose th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.byline {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-muted); text-transform: uppercase;
}
.byline strong { color: var(--text-primary); font-weight: 400; }
.share { display: flex; gap: 8px; margin-left: auto; }
.share a, .share button {
  border: 1px solid var(--line-strong); padding: 7px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); }

.spectable {
  border: 1px solid var(--line); margin: 36px auto; max-width: 68ch;
}
.spectable__head {
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-raised);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-muted); text-transform: uppercase;
}
.spectable__row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px;
}
.spectable__row:last-child { border-bottom: 0; }
.spectable__row span:first-child { color: var(--text-muted); }
.spectable__row span:last-child { color: var(--text-primary); }

/* ------------------------- ARHIV / SEZNAMI / TABELA ----------------------- */
.pagehead { padding: 40px var(--gutter) 0; }
.pagehead h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -0.04em; line-height: 1;
}
.pagehead p { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--text-body); max-width: 60ch; margin-top: 14px; }
.pager {
  display: flex; gap: 10px; align-items: center; padding: 32px 0 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
}
.pager a, .pager span {
  border: 1px solid var(--line-strong); padding: 8px 13px; color: var(--text-muted);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .is-current { border-color: var(--accent); color: var(--accent); }

.dbtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dbtable th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.dbtable td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
.dbtable tbody tr { transition: background 140ms var(--ease); }
.dbtable tbody tr:hover { background: var(--bg-raised); }
.dbtable td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.panel {
  background: var(--bg-raised); border: 1px solid var(--line);
  padding: 40px; display: flex; flex-direction: column; gap: 18px;
}
.panel h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.panel p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.55; color: var(--text-body); }
.panel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ratecard { border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.ratecard h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.ratecard .price { font-family: var(--font-mono); font-size: 26px; color: var(--accent); letter-spacing: -0.02em; }
.ratecard ul { margin: 0; padding-left: 18px; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--text-body); }

.covers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.cover { display: flex; flex-direction: column; gap: 8px; transition: opacity 160ms var(--ease); }
.cover:hover { opacity: 0.82; }
.cover__img { aspect-ratio: 212/300; background: var(--hatch); border: 1px solid var(--line-strong); object-fit: cover; width: 100%; }
.cover__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; }

.empty {
  border: 1px dashed var(--line-strong); padding: 44px; text-align: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--text-faint); text-transform: uppercase;
}
/* Pojasnilo pod tabelo: bralcu pove, da stolpci niso izginili po pomoti.
   `--text-body` doseže 6.08:1 in ostane berljivo, a tiše od tabele. */
.dbnote {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.6; letter-spacing: 0.04em; color: var(--text-body);
  border-left: 2px solid var(--line-strong); padding-left: 14px; max-width: 62ch;
}

/* --------------------------- UKAZNA PALETA (ISKANJE) ---------------------- */
.palette {
  position: fixed; inset: 0; z-index: 120; background: rgba(7,8,10,0.94);
  display: none; flex-direction: column; align-items: center; padding-top: 12vh;
  backdrop-filter: blur(2px);
}
.palette.is-open { display: flex; }
.palette__box { width: min(720px, 92vw); border: 1px solid var(--line-strong); background: var(--bg-base); }
.palette__input {
  width: 100%; background: transparent; border: 0; outline: none;
  padding: 22px 24px; font-family: var(--font-mono); font-size: 17px;
  letter-spacing: 0.02em; color: var(--text-primary);
  border-bottom: 1px solid var(--line);
}
.palette__input::placeholder { color: var(--text-faint); }
.palette__results { max-height: 56vh; overflow-y: auto; }
.palette__group {
  padding: 12px 24px 6px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase;
}
.palette__item {
  display: flex; align-items: center; gap: 14px; padding: 13px 24px;
  border-top: 1px solid var(--line); cursor: pointer;
}
.palette__item:hover, .palette__item.is-sel { background: var(--bg-raised); }
.palette__item.is-sel { box-shadow: inset 2px 0 0 var(--accent); }
.palette__item strong { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.palette__item span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-muted); margin-left: auto; text-transform: uppercase; white-space: nowrap;
}
.palette__foot {
  display: flex; gap: 18px; padding: 12px 24px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--text-faint); text-transform: uppercase;
}

/* ------------------------- MOBILNA NAVIGACIJA ----------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 110; background: var(--bg-base);
  display: none; flex-direction: column;
}
.sheet.is-open { display: flex; }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 64px; border-bottom: 1px solid var(--line);
}
.sheet__close { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); }
.sheet a.sheet__item, .sheet .sheet__search {
  display: flex; align-items: center; height: 56px; padding: 0 20px;
  border-bottom: 1px solid var(--line); font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary);
}
.sheet a.sheet__item:active, .sheet .sheet__search:active { background: var(--bg-raised); }

/* ------------------------------ RAZKRIVANJE ------------------------------ */
/* Razkrivanje uporablja samostojno lastnost `translate`, ne `transform`.
   Nagib kartic (glej perspektivo zgoraj) piše v `transform`, tekoča animacija
   pa premaga navadno deklaracijo — če bi oba pisala v isto lastnost, bi
   razkrivanje nagib tiho pobilo. Ločeni lastnosti se seštejeta. */
.reveal { opacity: 0; translate: 0 12px; }
.reveal.is-in {
  opacity: 1; translate: 0 0;
  transition: opacity 420ms var(--ease), translate 420ms var(--ease);
}
/* Različica brez glavne niti: `view()` časovnica sama izračuna napredek ob
   vstopu odseka v okno, JS (`IntersectionObserver`, site.js #2) pa ostane
   nespremenjen kot rezerva za brskalnike brez podpore. Pravilo cilja kar na
   `.reveal`, ne na `.reveal.is-in` — če IO kasneje vseeno doda `is-in`, je to
   neškodljivo (element je že pri končnem stanju). POZOR: to je edino mesto,
   kjer bi napačna zamenjava lahko pustila vsebino trajno nevidno — zato
   pravilo NE sme ostati brez zgornjega mirujočega `opacity: 0` (pravilno stanje
   brez JS/animacije), niti brez spodnjega `prefers-reduced-motion` popravka. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: razkrij linear both;
    animation-timeline: view();
    animation-range: entry 0 entry 100px;
  }
  @keyframes razkrij {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ------------------------------ ODZIVNOST -------------------------------- */
@media (max-width: 1279px) {
  :root { --gutter: 32px; --sidebar: 300px; }
  .hero { grid-template-columns: 1fr 340px; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .covers { grid-template-columns: repeat(4, 1fr); }
  .nav { overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 1023px) {
  .body { grid-template-columns: 1fr; }
  .main { border-right: 0; }
  .aside {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
  }
  .block { border-right: 1px solid var(--line); }
  .block:nth-child(2n) { border-right: 0; }
  .hero { grid-template-columns: 1fr; }
  .hero__lead { height: 440px; }
  .hero__side { border-left: 0; border-top: 1px solid var(--line); }
  .sidestory--photo { min-height: 240px; }
  .row { grid-template-columns: 60px 140px 1fr; gap: 18px; }
  .row__n { font-size: 34px; }
  .interview { grid-template-columns: 1fr; }
  .interview__photo { min-height: 260px; order: -1; }
  .interview__photo img { min-height: 260px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .cols2, .cols3 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .utility { font-size: 10px; }
  /* Na ozkem zaslonu ostaneta datum in prijava; zimska oprema odpade. */
  .utility__cell--winter { display: none; }
  .utility__links { gap: 14px; }
  .utility__links > :nth-child(-n+3) { display: none; }
  .masthead { padding: 20px var(--gutter) 18px; align-items: center; }
  .masthead__tools .searchbar { display: none; }
  .btn-accent { padding: 11px 16px; font-size: 11.5px; }
  .wordmark__strap { font-size: 8.5px; letter-spacing: 0.12em; padding-left: 13px; }
  .nav__item, .nav__db { display: none; }
  .nav { padding: 0 var(--gutter); justify-content: space-between; }
  .nav__burger {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
    color: var(--text-secondary); text-transform: uppercase;
  }
  .nav__searchbtn {
    display: flex; align-items: center; min-height: 44px; margin-left: auto;
    font-family: var(--font-mono); font-size: 15px; color: var(--text-muted);
  }
  .hero__lead { height: 380px; }
  .hero__body { padding: 28px var(--gutter) 26px; gap: 12px; }
  .hero__title { font-size: 34px; }
  .hero__dek { font-size: 16px; }
  .specrail { gap: 14px; font-size: 10px; }
  .specrail__by { margin-left: 0; width: 100%; }
  .grid3, .grid4 { grid-template-columns: 1fr; gap: 28px; }
  .aside { grid-template-columns: 1fr; }
  .block { border-right: 0; }
  .row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .row__n { font-size: 16px; }
  .row__media { max-height: 240px; }
  .row__text h3, .row__text h4 { font-size: 20px; }
  .row__arrow { display: none; }
  .interview__panel { padding: 28px var(--gutter); }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 10px; }
  .article__hero { height: 320px; }
  .article__heroinner { padding: 24px var(--gutter) 24px; }
  .prose { font-size: 17.5px; }
  .prose > p:first-of-type { font-size: 18.5px; }
  .article__col { max-width: none; }
  .prose blockquote { font-size: 22px; }
  .byline { gap: 12px; }
  .share { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .covers { grid-template-columns: repeat(2, 1fr); }
  .dbtable { font-size: 13px; }
  .table-scroll { overflow-x: auto; }
  .condensed { display: none; }
}

/* ------------------------- ZMANJŠANO GIBANJE ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; translate: 0 0; }
  .ticker__track { animation: none; }
}

/* --------------------------------- TISK ---------------------------------- */
@media print {
  .utility, .nav, .ticker, .aside, .footer, .condensed, .share, .ad, .palette { display: none !important; }
  body, .shell { background: #fff; color: #000; }
  .main { border: 0; }
  .article__hero { height: 260px; }
  .prose { max-width: none; color: #000; font-size: 11.5pt; line-height: 1.5; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ---------------------------- GALERIJA SLIK ------------------------------- */
.prose img { cursor: zoom-in; transition: opacity 160ms var(--ease); }
.prose img:hover { opacity: 0.86; }

.lightbox {
  position: fixed; inset: 0; z-index: 140; display: none;
  background: rgba(7, 8, 10, 0.96); backdrop-filter: blur(3px);
  flex-direction: column;
}
.lightbox.is-open { display: flex; }
.lightbox__bar {
  display: flex; align-items: center; gap: 18px; flex: none;
  padding: 0 var(--gutter); height: 54px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.lightbox__count { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lightbox__bar button {
  margin-left: auto; border: 1px solid var(--line-strong); padding: 7px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-secondary); text-transform: uppercase;
}
.lightbox__bar button:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__stage {
  flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: 28px var(--gutter); position: relative;
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border: 1px solid var(--line-strong); background: var(--bg-raised);
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 76px; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 13, 0.72); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 16px; color: var(--text-secondary);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.lightbox__nav:hover { background: var(--accent); color: #0e0f12; border-color: var(--accent); }
.lightbox__nav[hidden] { display: none; }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox__cap {
  flex: none; padding: 14px var(--gutter) 20px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-faint); text-transform: uppercase; min-height: 20px;
}
@media (max-width: 767px) {
  .lightbox__nav { width: 38px; height: 60px; }
  .lightbox__bar { height: 48px; }
}

/* --------------------- PREJŠNJI / NASLEDNJI ČLANEK ------------------------ */
.prevnext {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.prevnext__a {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px var(--gutter); transition: background 160ms var(--ease);
  border-right: 1px solid var(--line);
}
.prevnext__a:last-child { border-right: 0; }
.prevnext__a--next { text-align: right; border-right: 0; }
.prevnext__a:hover { background: var(--bg-raised); }
.prevnext__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.prevnext__a:hover .prevnext__k { color: var(--accent); }
.prevnext__t {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; color: var(--text-primary);
}
@media (max-width: 767px) {
  .prevnext { grid-template-columns: 1fr; }
  .prevnext__a { border-right: 0; border-bottom: 1px solid var(--line); text-align: left; }
  .prevnext__a--next { text-align: left; }
}

/* ------------------------------ ČASOVNI ARHIV ----------------------------- */
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.month {
  background: var(--bg-base); padding: 16px 14px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 10px;
  transition: background 140ms var(--ease);
}
.month:hover { background: var(--bg-raised); }
.month__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.month:hover .month__n { color: var(--accent); }
.month__c { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .months { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .months { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   ZAGON — stran se prižge kot merilnik v vozilu.
   Edini namerni odmik od pravila »brez senc« v predlogi: rdeč soj pod
   besedno znamko. Ostalo je gibanje, ne okras, in izgine pri
   prefers-reduced-motion.
   ========================================================================== */

/* Soj pod znamko: tesen, nizko prekriven, nikoli razmazan. */
.wordmark__row { position: relative; }
/* Sveti samo rdeča črtica — besedna znamka ostane čista.
   Svetloba prihaja iz poudarka, tako kot zasveti kontrolna lučka. */
.wordmark__bar {
  /* Soj je mirujoče stanje, ne konec animacije: če se ta ne izvede
     (zavihek v ozadju, zmanjšano gibanje), mora biti črtica vseeno prižgana. */
  box-shadow: 0 0 18px 2px rgba(255, 77, 61, 0.55);
  animation: ignite 520ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes glow-in { to { opacity: 1; } }

/* Besedna znamka se izpiše črko za črko izpod roba, takoj za vžigom črtice —
   kratka špica ob prihodu, ne okras, ki bi tekel naprej. Razrez na črke naredi
   JS; brez njega (ali pri zmanjšanem gibanju) ostane napis cel in miren. */
.wordmark__text.is-split {
  display: inline-flex; overflow: hidden;
  line-height: 1; padding-block: 0.04em;
}
.wordmark__text.is-split > span {
  display: inline-block; white-space: pre;
  animation: crka-gor 640ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(200ms + var(--i, 0) * 48ms);
}
@keyframes crka-gor {
  from { transform: translateY(102%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Podnapis pride za zadnjo črko, da se špica konča v eni potezi. */
.wordmark.is-split .wordmark__strap {
  animation: glow-in 520ms var(--ease) both; animation-delay: 560ms; opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wordmark__text.is-split > span,
  .wordmark.is-split .wordmark__strap { animation: none; transform: none; opacity: 1; }
}

/* Kontakt: rdeča črtica ob znamki zraste kot ob vžigu. */
.wordmark__bar { transform-origin: bottom; }
@keyframes ignite {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}

/* Storitvena vrstica se prižge celica za celico, kot da se merilniki umerjajo. */
.utility__cell, .utility__links > * {
  animation: cell-in 420ms var(--ease) both;
}
.utility__cell:nth-child(1) { animation-delay: 60ms; }
.utility__cell:nth-child(2) { animation-delay: 130ms; }
.utility__cell:nth-child(3) { animation-delay: 200ms; }
.utility__cell:nth-child(4) { animation-delay: 270ms; }
.utility__links > *:nth-child(1) { animation-delay: 320ms; }
.utility__links > *:nth-child(2) { animation-delay: 360ms; }
.utility__links > *:nth-child(3) { animation-delay: 400ms; }
.utility__links > *:nth-child(4) { animation-delay: 440ms; }
@keyframes cell-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Števke cen se poravnajo kot na števcu — brez poskakovanja širine. */
.utility__val, .datarow__v { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.utility__val.is-rolling { color: var(--accent); }

/* Vrstica navigacije: tanka rdeča črta stече čez, enkrat, ob nalaganju. */
.nav { position: relative; overflow: hidden; }
.nav::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  animation: sweep 1400ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* Živa pika ob »UDARNO DANES« dobi rahel utrip navzven. */
.live__dot { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0.7); animation: pulse 2s infinite, halo 2s infinite; }
@keyframes halo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 77, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark__bar, .utility__cell, .utility__links > *, .nav::after { animation: none; }
  .nav::after { display: none; }
  .live__dot { animation: none; box-shadow: none; }
}

/* Prosto oglasno mesto ponudi samo sebe — namesto praznega okvirja. */
.ad__free {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%; text-align: center; padding: 18px;
  transition: color 160ms var(--ease);
}
.ad__freeline {
  font-family: var(--font-ui); font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-body);
}
.ad__freesize {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.ad__free:hover .ad__freeline { color: var(--text-primary); }
.ad__free:hover .ad__freesize { color: var(--accent); }
.ad--leaderboard .ad__frame { min-height: 170px; }
@media (max-width: 767px) {
  .ad--leaderboard .ad__frame { min-height: 130px; }
  .ad__freeline { font-size: 15px; }
}


/* Zimska oprema stoji ob cenah goriva — ista vrsta podatka, ista vrstica. */
.utility__cell--winter { gap: 7px; }
.utility__since { color: var(--text-faint); }
@media (max-width: 1279px) { .utility__cell--winter .utility__since { display: none; } }

/* ------------------- VODILNI ČLANEK NA STRANEH RUBRIK --------------------- */
.lead {
  position: relative; display: block; height: 380px; overflow: hidden;
  background: var(--bg-raised); margin-bottom: 4px;
}
.lead__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.lead:hover .lead__img { transform: scale(1.03); }
.lead__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.lead__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 32px 30px 28px; display: flex; flex-direction: column; gap: 12px;
}
.lead__title {
  font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -0.035em;
  line-height: 1.04; color: #fff; max-width: 22ch; text-wrap: pretty;
}
.lead__dek {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.45;
  color: #c8cace; max-width: 58ch;
}
@media (max-width: 767px) {
  .lead { height: 280px; }
  .lead__body { padding: 22px var(--gutter) 20px; }
  .lead__dek { display: none; }
}

/* Na ozkih zaslonih naj se strapline ne lomi v dve vrstici. */
@media (max-width: 480px) {
  .strap__since { display: none; }
  .wordmark__strap { white-space: nowrap; }
}

/* ------------------------- POZIV K PRIJAVI NA E-NOVICE -------------------- */
.nlband {
  display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: center;
  background: var(--bg-raised); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 40px var(--gutter);
  position: relative;
}
/* Tanka rdeča črta ob levem robu — isti prijem kot pri napovedniku dogodka. */
.nlband::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.nlband__text { display: flex; flex-direction: column; gap: 12px; }
.nlband__eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.nlband__title {
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.08; color: var(--text-primary); max-width: 20ch;
}
.nlband__dek {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5;
  color: var(--text-body); max-width: 52ch;
}
.nlband__form .nlform { margin-top: 0; gap: 10px; }
.nlband__form .field { padding: 14px 15px; font-size: 15px; }
.nlband__form .btn-light { padding: 14px; font-size: 12px; }

@media (max-width: 1023px) {
  .nlband { grid-template-columns: 1fr; gap: 24px; padding: 32px var(--gutter); }
  .nlband__title { max-width: none; }
}

/* ==========================================================================
   NAPETOST — hairline kot vodnik pod napetostjo.
   Prijem je izposojen s Svitrona: mirno svetlo telo z redkim utripom in
   tok, ki teče po črti. Prevedeno v Tranzitovo rdečo in umirjeno,
   da ostane merilnik in ne neon.
   ========================================================================== */

/* Rdeča črtica ob znamki utripne kot žarilna nitka — redko, komaj opazno. */
.wordmark__bar { animation: ignite 520ms cubic-bezier(0.2, 0, 0, 1) both, spark 7s 1.4s infinite; }
@keyframes spark {
  0%, 91%, 100% { opacity: 1; }
  93%           { opacity: 0.45; }
  95%           { opacity: 1; }
  96.5%         { opacity: 0.7; }
}

/* Po hairlinu pod navigacijo počasi steče tok. */
.nav::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: 22%; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-120%);
  animation: current 9s linear 1.2s infinite;
  opacity: 0.85;
}
@keyframes current { to { transform: translateX(560%); } }

/* Ista napetost teče ob robu poziva k prijavi. */
.nlband::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 30%;
  background: linear-gradient(180deg, transparent, #ff8a80, transparent);
  animation: currentY 6s linear infinite; pointer-events: none;
}
@keyframes currentY { from { transform: translateY(-110%); } to { transform: translateY(440%); } }

/* Poudarjeni gumbi dobijo tesen sij, kot vklopljena tipka. */
.btn-accent, .ticker__chip, .flag--accent {
  box-shadow: 0 0 14px rgba(255, 77, 61, 0.28);
}
.btn-accent:hover { box-shadow: 0 0 22px rgba(255, 77, 61, 0.45); }

/* Živa pika ob »udarno danes« utripne z isto nitko. */
.live__dot { animation: pulse 2s infinite, halo 2s infinite, spark 5s 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .wordmark__bar { animation: none; }
  .nav::after, .nlband::after { display: none; }
  .live__dot { animation: none; }
}

/* ------------------- ISKANJE KOT DIAGNOSTIČNO ORODJE ---------------------- */
.palette__box {
  box-shadow: 0 0 0 1px rgba(255, 77, 61, 0.18), 0 30px 90px -40px rgba(7, 8, 10, 0.95);
}
.palette__input { caret-color: var(--accent); }

.palette__status {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 24px; border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.palette__dot {
  width: 5px; height: 5px; background: var(--positive); flex: none;
  box-shadow: 0 0 8px rgba(77, 208, 138, 0.7);
}
.palette__status.is-busy .palette__dot {
  background: var(--accent); box-shadow: 0 0 8px rgba(255, 77, 61, 0.8);
  animation: spark 1.1s infinite;
}
.palette__ms { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Zadetki se odpirajo v hitrem zaporedju, kot izpis naprave. */
.palette__item { animation: hit-in 220ms var(--ease) both; }
@keyframes hit-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .palette__item { animation: none; }
  .palette__status.is-busy .palette__dot { animation: none; }
}

/* ------------------- NAPREDEK BRANJA KOT ŽARILNA NITKA -------------------- */
.progress {
  box-shadow: 0 0 10px rgba(255, 77, 61, 0.75), 0 0 22px rgba(255, 77, 61, 0.35);
}
/* Svetla konica na čelu črte — kot da se nitka žari tam, kjer bereš. */
.progress::after {
  content: ""; position: absolute; right: -1px; top: -2px; width: 6px; height: 5px;
  background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 20px var(--accent);
}
.condensed__pct {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 42px;
  text-align: right;
}

/* --------------- OŠTEVILČENE VRSTICE SE PRIŽGEJO PO VRSTI ---------------- */
.row__n { transition: color 300ms var(--ease), text-shadow 300ms var(--ease); }
.row.is-in .row__n {
  animation: ordinal 1100ms var(--ease) both;
  animation-delay: calc(var(--ord, 0) * 110ms);
}
@keyframes ordinal {
  0%   { color: var(--text-faint); text-shadow: none; }
  35%  { color: var(--accent); text-shadow: 0 0 14px rgba(255, 77, 61, 0.7); }
  100% { color: var(--line-muted); text-shadow: none; }
}

/* Po zgornjem robu noge steče isti tok kot pod navigacijo. */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 18%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-120%);
  animation: current 11s linear 2s infinite; opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .row.is-in .row__n { animation: none; }
  .footer::before { display: none; }
  .progress::after { display: none; }
}

/* ==========================================================================
   UREDNIŠKA POSTAVITEV ČLANKA
   Mera besedila ostane pri 68 znakih, prostor ob njej pa ni prazen: v levem
   robu stojijo podatki, citati in fotografije pa smejo prestopiti mero.
   ========================================================================== */
.article__col { position: relative; }

/* Pas se poravna z isto 44px mrežo kot vse drugo na strani, ne na oko. */
.railmeta {
  position: absolute; left: -166px; top: 4px; width: 150px;
  display: flex; flex-direction: column; gap: 3px;
}
@supports (position: sticky) { .railmeta { position: sticky; float: left; margin-left: -166px; top: 84px; } }
.railmeta__k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 12px;
}
.railmeta__k:first-child { margin-top: 0; }
.railmeta__v { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); letter-spacing: 0.04em; }
.railmeta__rule { height: 1px; background: var(--line); margin: 18px 0 4px; }
/* Deljenje kot kratek seznam s polnimi imeni — kratice FB / IN / WA so bile uganke. */
.railmeta__share { display: flex; flex-direction: column; margin-top: 2px; }
.railmeta__share a, .railmeta__share button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px;
  padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-align: left;
  color: var(--text-secondary);
  transition: color 140ms var(--ease);
}
.railmeta__share a::after { content: "↗"; color: var(--text-faint); transition: color 140ms var(--ease); }
.railmeta__share a:hover, .railmeta__share button:hover,
.railmeta__share a:hover::after { color: var(--accent); }

/* Levi rob besedila je zaseden: tam stoji lepljiva letvica z metapodatki
   (.railmeta, 44–194 px). Karkoli sega čez mero na levo, se zaleti vanjo, zato
   citat in fotografije prestopijo mero na desno, kjer je prostor prazen.
   Skupna širina ostane enaka, poravnava na bralni rob pa se ohrani. */
.prose blockquote {
  margin-left: 0; margin-right: -40px; padding-left: 30px;
  border-left-width: 3px;
}
/* Fotografije v besedilu smejo biti širše od stolpca. */
.prose figure { margin-left: 0; margin-right: -120px; max-width: none; }
.prose figure img { width: 100%; }

@media (max-width: 1279px) {
  .railmeta { display: none; }
  .prose blockquote { margin-left: 0; margin-right: 0; padding-left: 22px; }
  .prose figure { margin-left: 0; margin-right: 0; }
}


/* ==========================================================================
   ZRNO IN DROBNE POTEZE
   Ravna temna ploskev deluje sterilno; tanka plast šuma ji da površino,
   kot bi bila natisnjena. Plast ne lovi klikov in se ne premika.
   ========================================================================== */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { opacity: 0.05; mix-blend-mode: multiply; }

/* Gladko drsenje ob skoku na sidro. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Fizični odziv na pritisk — gumb se rahlo udre. */
.btn-accent:active, .btn-ghost:active, .btn-block:active,
.btn-light:active, .tag:active, .sechead__all:active {
  transform: translateY(1px);
}
.btn-accent, .btn-ghost, .btn-block, .btn-light, .tag {
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), transform 90ms var(--ease),
              box-shadow 160ms var(--ease);
}

/* Pregled kode: 45 pravil :hover proti 3 pravilom :active — enak pritisk
   manjka na navigaciji, karticah, vrsticah, storitveni vrstici, deljenju in
   straneh. Isti fizični odziv kot pri gumbih zgoraj, samo razširjen nabor. */
.nav__item:active,
.utility__links a:active,
.card:active,
.row:active,
.share a:active, .share button:active,
.railmeta__share a:active, .railmeta__share button:active,
.pager a:active {
  transform: translateY(1px);
}
.nav__item { transition: color 140ms var(--ease), transform 90ms var(--ease); }
.utility__links a { transition: color 140ms var(--ease), transform 90ms var(--ease); }
.card { transition: opacity 180ms var(--ease), transform 90ms var(--ease); }
.row { transition: transform 90ms var(--ease); }
.share a, .share button {
  transition: border-color 140ms var(--ease), color 140ms var(--ease), transform 90ms var(--ease);
}
.railmeta__share a, .railmeta__share button {
  transition: color 140ms var(--ease), transform 90ms var(--ease);
}
.pager a { transition: border-color 140ms var(--ease), color 140ms var(--ease), transform 90ms var(--ease); }

/* ==========================================================================
   VRSTA ČLANKA — test, intervju in reportaža se ločijo že v seznamu.
   Oznaka stoji pred naslovom, ne nad njim, da ne razbija stolpca.
   ========================================================================== */
.kind {
  display: inline-block; vertical-align: 0.18em; margin-right: 10px;
  padding: 3px 7px; border: 1px solid currentColor;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.kind.is-test   { color: var(--accent); }
.kind.is-talk   { color: var(--text-secondary); }
/* Brez zelene: zelena je na strani le za »uspešno« (prijava, oddano). Vrste se
   ločijo po besedi in obliki — test je rdeč, ostale v barvi besedila. */
.kind.is-report { color: var(--text-primary); }
.card:hover .kind.is-test { box-shadow: 0 0 12px rgba(255, 77, 61, 0.32); }

/* ==========================================================================
   TEHNIČNI PODATKI — vrednost je velika in samostojna.
   Tabela se zlaga 4 → 2 → 1, vrednost ostane pri 32px tudi v enem stolpcu:
   podatek se ne pomanjšuje, ker se zaslon oži.
   ========================================================================== */
.specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 40px 0;
}
.specs__cell {
  background: var(--bg-raised); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.specs__v {
  font-family: var(--font-ui); font-size: 32px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.specs__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  /* --text-muted da le 3.72:1 na dvignjeni ploskvi; drobno besedilo zahteva 4.5:1 */
  text-transform: uppercase; color: var(--text-body);
}
@media (max-width: 1023px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .specs { grid-template-columns: 1fr; } }

/* ==========================================================================
   SODBA UREDNIŠTVA — kar bralec prebere, tudi če ne prebere ničesar drugega.
   ========================================================================== */
.verdict {
  border-left: 3px solid var(--accent); background: var(--bg-raised);
  padding: 28px 30px; margin: 40px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.verdict__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.verdict__t {
  font-family: var(--font-ui); font-size: 27px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.18; color: var(--text-primary);
  max-width: 30ch; text-wrap: pretty;
}
.verdict__price {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-body);
}
.verdict__price strong { color: var(--text-primary); font-weight: 400; }
@media (max-width: 767px) {
  .verdict { padding: 22px 20px; }
  .verdict__t { font-size: 22px; }
}

/* ==========================================================================
   STANJE MED NALAGANJEM
   Fotografije so na tej strani težke in se nalagajo postopoma. Dokler slika
   ne pride, mesto ne sme biti prazna luknja — nosi obliko končne postavitve
   in tiho utripa. Ko se slika naloži, utrip ugasne.
   ========================================================================== */
.card__media, .row__media, .lead, .interview__photo, .article__hero, .sidestory--photo {
  position: relative;
}
.card__media::after, .row__media::after, .lead::after,
.interview__photo::after, .article__hero::after, .sidestory--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    var(--bg-raised) 30%, var(--bg-raised-alt) 50%, var(--bg-raised) 70%);
  background-size: 260% 100%;
  /* Omejeno število ponovitev: leno naložene slike pod pregibom sicer utripajo
     v nedogled zunaj zaslona in po nepotrebnem obremenjujejo grafiko. Po
     osemnajstih sekundah se utrip umiri v mirno ploskev. */
  animation: shimmer 1.5s linear 12;
  transition: opacity 320ms var(--ease);
}
/* Ko je slika naložena, podlaga izgine. */
.is-loaded::after { opacity: 0; animation: none; }
.card__media img, .row__media img, .lead__img,
.interview__photo img, .article__hero img, .sidestory--photo img { position: relative; z-index: 1; }

@keyframes shimmer { to { background-position: -260% 0; } }

/* Preliv na fotografiji mora ostati nad podlago. */
.lead__scrim, .hero__scrim { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .card__media::after, .row__media::after, .lead::after,
  .interview__photo::after, .article__hero::after, .sidestory--photo::after {
    animation: none; background: var(--bg-raised);
  }
}

/* ==========================================================================
   FOKUS NA FOTOGRAFIJI
   Osnovni obroč (:where(...) zgoraj) zadošča na temni ploskvi, na svetli
   fotografiji pa lahko rdeča izgine ob svetlem nebu ali karoseriji. Tu obroč
   preide navznoter in dobi temno podlago tik pod seboj, da ostane berljiv
   ne glede na fotografijo pod njim. */
.hero__lead:focus-visible,
.lead:focus-visible,
.sidestory--photo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px rgba(7, 8, 10, 0.85);
}

/* ======================= PREHOD MED STRANMI ===============================
   Doslej je bil vsak klik trd rez: stran je ugasnila in se na novo prižgala.
   Brskalnik zna posneti staro in novo stran ter ju zliti — brez knjižnice in
   brez enega bajta JavaScripta za sam prehod.

   Kjer podpore ni (danes Firefox), se pravilo preprosto prezre in navigacija
   ostane povsem običajna. Mirujoče stanje je torej pravilno stanje.          */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: var(--ease);
}

/* Naslovna fotografija članka je cilj preleta: fotografija s seznama se
   zlije natanko vanjo. Ime mora biti na strani enolično, zato ga na seznamu
   postavi JS samo tisti sliki, na katero je bralec kliknil (site.js, 13). */
.article__hero img { view-transition-name: fotografija; }

/* Naslovna vrstica se med stranmi ne premika, zato naj tudi ne migeta. */
.masthead .wordmark { view-transition-name: znamka; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------- ARHIV ----------------------------------- */
/* Letnice so mreža enakih polj: bralec skoraj vedno išče leto, ne izdaje. */
/* Ločnice nosijo celice same, ne podlaga mreže. Trik s podlago in enopikselno
   režo bi zadnjo, prazno kolono izrisal kot sivo ploščo — kot da tam nekaj
   manjka. Prazne sledi morajo ostati prazne. */
.yeargrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.yearcell {
  padding: 24px 20px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background 140ms var(--ease);
}
.yearcell:hover { background: var(--bg-raised); }
.yearcell:active { transform: translateY(1px); }
.yearcell__y {
  font-family: var(--font-mono); font-size: 30px; font-weight: 800;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.yearcell__n {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-body);
}
.yearcell:hover .yearcell__y { color: var(--accent); }

.issueyear { margin-bottom: var(--rhythm-sm); }
.issueyear__y {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Pošteno stanje: izdaje niso vnesene. Ne skrivamo se za prazno ploskvijo —
   povemo, zakaj je prazno, in ponudimo pot naprej. */
.notyet { border: 1px solid var(--line-strong); padding: 36px 32px; max-width: 62ch; }
.notyet__lead {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); text-wrap: pretty;
}
.notyet__body {
  margin-top: 10px; font-family: var(--font-serif); font-size: 16px;
  line-height: 1.55; color: var(--text-body); text-wrap: pretty;
}
.notyet__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 560px) {
  .yeargrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .yearcell { padding: 18px 16px; }
  .yearcell__y { font-size: 24px; }
  .notyet { padding: 26px 22px; }
  .notyet__acts .btn-accent, .notyet__acts .btn-ghost { flex: 1; text-align: center; }
}

/* ---------------------------- TISKANA IZDAJA ------------------------------ */
.print {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 4vw, 60px); align-items: center;
  padding: clamp(30px, 5vw, 84px) var(--gutter); border-bottom: 1px solid var(--line);
}
.print__kicker {
  display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.print__title {
  font-family: var(--font-ui); font-weight: 900; font-size: clamp(30px, 4vw, 62px);
  line-height: 0.96; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 16px;
}
.print__lead {
  font-family: var(--font-serif); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5;
  color: var(--text-secondary); max-width: 44ch; margin: 0 0 22px; text-wrap: pretty;
}
.print__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.print__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-primary); border: 1px solid var(--line-strong);
  transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.print__btn:hover { border-color: var(--accent); color: var(--accent); }
.print__btn:active { transform: translateY(1px); }
.print__btn--primary { background: var(--accent); border-color: var(--accent); color: #0a0a0b; font-weight: 700; }
.print__btn--primary:hover { background: #ff5a47; border-color: #ff5a47; color: #0a0a0b; }

/* Oder vtisnjene številke. Privzeti zasuk (-6°, 12°) je mirujoče stanje in že
   pokaže globino, zato je številka pravilna tudi brez JS. */
.print__stage {
  --rx: -6deg; --ry: 12deg; --es: 1;
  position: relative; min-height: clamp(260px, 34vw, 460px);
  display: grid; place-items: center; perspective: 1500px; overflow: hidden;
}
.extrude {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--es));
}
.extrude__layer {
  position: absolute; left: 50%; top: 50%; white-space: nowrap; user-select: none;
  font-family: var(--font-ui); font-weight: 900; font-size: clamp(140px, 19vw, 300px);
  line-height: 0.8; letter-spacing: -0.04em;
  transform: translate(-50%, -50%) translateZ(var(--z));
}
/* ------------------------------- NAROČILO ---------------------------------- */
/* Oznaka nad poljem, ne v njem: vpisano besedilo nikoli ne zbriše navodila. */
.orderform { max-width: 760px; }
.orderform__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px; margin: 18px 0;
}
.orderform__f { display: flex; flex-direction: column; gap: 6px; }
.orderform__f > span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.orderform__f--wide { grid-column: 1 / -1; }
.orderform .field { width: 100%; }
/* Past za robote: iz vidnega polja, a ne display:none — nekateri roboti to preverijo. */
.orderform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Oglas s sliko: okvir se prilagodi oglasu — brez obrezovanja in brez praznih
   polj. Fiksne višine (250 px, 90 px) veljajo samo za prazno mesto »Tu je
   prostor za vaš oglas«. Višina 100 % na sliki v vrstični povezavi se sicer
   tiho vrne na naravno višino, zato je povezava blok, slika pa ima samodejno
   višino. Slika se ne poveča čez svojo naravno velikost, da ne zamegli.
   Dvojni razred (.ad .ad__frame) premaga pravila `.ad--leaderboard .ad__frame`. */
.ad .ad__frame:has(> a > img) {
  height: auto; min-height: 0; max-height: none;
  display: flex; justify-content: center; background: transparent;
}
.ad__frame > a:has(> img) { display: block; max-width: 100%; }
.ad__frame > a > img { display: block; width: auto; max-width: 100%; height: auto; object-fit: contain; }
/* Pravi oglas je sam svoj rob — okvir z obrobo okoli njega bi deloval kot prazno
   mesto, v katerega je nekdo postavil pasico. */
.ad .ad__frame:has(> a > img) { border-color: transparent; }
/* Stranski stolpec ima vedno standardno velikost 300 × 250, zato prostor
   rezerviramo vnaprej: leno naložena slika tako ob prihodu ne potisne vsebine. */
.ad--sidebar .ad__frame > a > img { width: 300px; aspect-ratio: 300 / 250; }

/* ------------------------- NAROČNINA: PAKETI ------------------------------ */
/* Cena je podatek, ne okras: znana cena je velika, neznana je mirna vrstica. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px;
  border: 1px solid var(--line-strong); background: var(--bg-base);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.plan:hover { border-color: var(--text-faint); }
.plan.is-picked { border-color: var(--accent); background: var(--bg-raised); }
.plan.is-picked::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); }
.plan__name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; min-height: 44px; }
.plan__price strong {
  font-family: var(--font-ui); font-size: 40px; font-weight: 900; line-height: 1;
  letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.plan__price span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-body); }
.plan__price .plan__ask { font-family: var(--font-ui); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text-secondary); }
.plan__per { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-body); }
.plan__list { margin: 0; padding-left: 18px; font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--text-body); flex: 1; }
.plan__pick {
  margin-top: 6px; min-height: 44px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}
.plan__pick:hover { border-color: var(--accent); color: var(--accent); }
.plan__pick:active { transform: translateY(1px); }
.plan__pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan.is-picked .plan__pick { background: var(--accent); border-color: var(--accent); color: var(--bg-base); }

/* ------------------------- NAROČNINA: OBRAZEC ----------------------------- */
/* Stran nima splošnega pravila za [hidden], zato ga je `display: flex` na polju
   povozil in »Izvodov« se je kazal tudi pri letni naročnini. */
.orderform [hidden] { display: none !important; }
.orderform { max-width: 820px; }
.orderform__intro { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--text-body); max-width: 60ch; margin: 0 0 22px; }
.orderform__set { border: 0; border-top: 1px solid var(--line); padding: 22px 0 20px; margin: 0; min-width: 0; }
.orderform__set legend {
  padding: 0 10px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.orderform__set > .orderform__f { margin-top: 14px; max-width: 420px; }
.orderform__grid { margin: 14px 0 0; }
.orderform .field[aria-invalid] { border-color: var(--accent); }
.orderform__err { font-family: var(--font-ui); font-size: 13px; line-height: 1.35; color: var(--accent); }
.orderform__foot {
  border-top: 1px solid var(--line); margin-top: 18px; padding-top: 22px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.orderform__sum {
  width: 100%; display: grid; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); background: var(--bg-raised);
}
.orderform__sumk { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); }
.orderform__sum strong { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.orderform__sum span:last-child { font-family: var(--font-serif); font-size: 16px; color: var(--text-secondary); }
.orderform .orderform__consent {
  display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-serif);
  font-size: 15px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-body);
}
.orderform__consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.orderform__submit { min-height: 48px; padding: 0 26px; }
.orderform .formnote { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0; }
.orderform__help { font-family: var(--font-serif); font-size: 15px; color: var(--text-body); }
.orderform__help a { color: var(--accent); }

.orderdone {
  max-width: 820px; display: grid; gap: 8px; padding: 26px 28px;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--positive);
}
.orderdone:focus { outline: none; }
.orderdone__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--positive); }
.orderdone strong { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.orderdone p { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--text-body); margin: 0; }
.orderdone p b { color: var(--text-primary); font-weight: 600; }

/* Udarno danes: tri enake novice brez fotografije. Stolpec si višino razdeli
   enakomerno, zato se spodnji rob poravna z naslovno fotografijo. */
.hero__side .sidestory { flex: 1; justify-content: center; }
.hero__side .sidestory:last-child { border-bottom: 0; }

/* --------------------------- PREGLEDNOST ---------------------------------- */
/* Oznaka vrste (Test, Reportaža) stoji v vrstici z rubriko in datumom, ne v
   naslovu — tako se vsi naslovi v vrsti začnejo na istem mestu. */
.metaline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metaline .kind { margin: 0; vertical-align: baseline; }
/* Stranski stolpec ni prazen do dna strani: oglas in oznake gredo s stranjo.
   Skupaj, da oznake ne zdrsnejo čez oglas. Samo na širokem zaslonu. */
@media (min-width: 1100px) {
  .aside__stick { position: sticky; top: 72px; }
}

/* ------------------------------ PASICA V GLAVI ----------------------------- */
/* Kot na izvirni reviji: znamka levo, oglas 728 × 90 v isti vrstici. Iskalno
   polje se umakne (iskanje je že v meniju), pasica se po potrebi zmanjša. */
.masthead .topad {
  flex: 0 1 728px; min-width: 0; align-self: center; margin: 0 auto;
  gap: 5px; align-items: flex-start;
}
.topad .ad__label { font-size: 9px; letter-spacing: 0.2em; }
.topad > a { display: block; max-width: 100%; }
.topad img { display: block; width: 728px; max-width: 100%; height: auto; aspect-ratio: 728 / 90; }
.masthead:has(.topad) .searchbar { display: none; }
@media (max-width: 1180px) {
  .masthead:has(.topad) { flex-wrap: wrap; row-gap: 18px; }
  .masthead .topad { order: 3; flex-basis: 100%; align-items: center; }
  /* Z ovijanjem se znamka ne bi več krčila in gumb bi zdrsnil v novo vrsto. */
  .masthead:has(.topad) .wordmark { flex: 1 1 0; min-width: 0; }
}

/* ------------------ OB NASLOVNI ZGODBI: ŠTIRI FOTOGRAFIJE ------------------ */
/* Kot na izvirni reviji: 2 × 2 fotografije z naslovom na sliki. Mreža si višino
   stolpca razdeli enakomerno, zato se spodnji rob poravna z naslovno zgodbo. */
.hero { grid-template-columns: minmax(0, 1fr) 480px; }
.tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1px; background: var(--line); }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 150px; background: var(--bg-raised); color: #fff;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 13, 0) 30%, rgba(10, 11, 13, 0.92) 100%); }
.tile__body { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.tile h2 { font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-wrap: pretty; }
@media (max-width: 1279px) { .hero { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .tile { min-height: 130px; }
}
@media (max-width: 480px) { .tile h2 { font-size: 14px; } .tile__body { padding: 12px; } }

/* Na širokem zaslonu fotografije zapolnijo ves stolpec, poravnane z naslovno
   zgodbo zgoraj in spodaj; oznaka »Udarno danes« bi jih porinila navzdol.
   Na telefonu ostane kot naslov razdelka pod glavno zgodbo. */
@media (min-width: 1024px) { .hero__side .hero__sidehead { display: none; } }

/* --------------------------------- ARHIV ---------------------------------- */
.yearcell.is-on { background: var(--bg-raised); box-shadow: inset 0 3px 0 var(--accent); }
.yearcell.is-on .yearcell__y { color: var(--accent); }
.cover:hover { opacity: 1; }
.cover__img { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.cover:hover .cover__img { transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7); }
.cover__sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); opacity: 0; transition: opacity 160ms var(--ease);
}
.cover:hover .cover__sub, .cover:focus-visible .cover__sub { opacity: 1; }
@media (hover: none) { .cover__sub { opacity: 1; } }
.cover__fresh {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-raised); border-color: var(--accent);
}
.cover__fresh b { font-size: 54px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }
.cover__fresh small {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.archmore {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.archmore a { color: var(--text-body); transition: color 140ms var(--ease); }
.archmore a:hover { color: var(--accent); }

/* -------------------------------- BRALNIK --------------------------------- */
.reader { padding: 32px calc(var(--gutter) + var(--edge)) 56px; }
.reader__bar {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 18px 24px; margin-bottom: 22px;
}
.reader__head { display: flex; flex-direction: column; gap: 8px; }
.reader__back, .reader__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.reader__back { transition: color 140ms var(--ease); }
.reader__back:hover { color: var(--accent); }
.reader__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--text-primary); }
.reader__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.reader__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.reader__btn:hover { border-color: var(--accent); color: var(--accent); }
.reader__btn[hidden] { display: none; }

.book {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 34px 64px 22px; border: 1px solid var(--line); outline: none;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #1d1f25 0%, var(--bg-deep) 72%);
}
.book:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.book:fullscreen { justify-content: center; border: 0; padding: 20px 72px; background: #0a0b0d; }
.book__stage {
  position: relative; width: calc(var(--pw, 360px) * 2); height: var(--ph, 509px);
  perspective: 2600px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.book[data-cols="1"] .book__stage { width: var(--pw, 360px); }
.book__spread { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 760ms cubic-bezier(0.3, 0.1, 0.2, 1); }
.book__spread.is-first { transform: translateX(calc(var(--pw, 360px) * -0.5)); }
.book__spread.is-last { transform: translateX(calc(var(--pw, 360px) * 0.5)); }
.leaf {
  position: absolute; top: 0; width: var(--pw, 360px); height: var(--ph, 509px); overflow: hidden;
  background: #f2f1ee; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.leaf[hidden] { display: none; }
.leaf--l { left: 0; }
.leaf--r { left: var(--pw, 360px); }
.book[data-cols="1"] .leaf--r { left: 0; }
.leaf canvas, .leaf__ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.leaf::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.leaf--l::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 9%); }
.leaf--r::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 9%); }
.book[data-cols="1"] .leaf--r::after, .book__spread.is-first .leaf--r::after { background: none; }
.leaf.is-loading canvas { visibility: hidden; }
.leaf.is-loading {
  background: linear-gradient(100deg, #e6e5e1 40%, #f4f3f0 50%, #e6e5e1 60%);
  background-size: 220% 100%; animation: listShimmer 1.3s ease-in-out infinite;
}
@keyframes listShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.flip { position: absolute; top: 0; z-index: 3; width: var(--pw); height: var(--ph); transform-style: preserve-3d; will-change: transform; }
.flip--next { left: var(--pw); transform-origin: left center; }
.flip--prev { left: 0; transform-origin: right center; }
.flip__face {
  position: absolute; inset: 0; overflow: hidden; background: #f2f1ee;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip__back { transform: rotateY(180deg); }
.flip__face canvas { width: 100%; height: 100%; display: block; }
.flip__shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.flip--next .flip__front .flip__shade, .flip--prev .flip__back .flip__shade { background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05)); }
.flip--next .flip__back .flip__shade, .flip--prev .flip__front .flip__shade { background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05)); }
.book__nav {
  position: absolute; top: calc(34px + var(--ph, 509px) / 2); translate: 0 -50%; z-index: 4;
  width: 46px; height: 92px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: rgba(14, 15, 18, 0.72); color: var(--text-primary);
  font-size: 30px; line-height: 1;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), opacity 140ms var(--ease);
}
.book__nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.book__nav:disabled { opacity: 0.2; cursor: default; }
.book__nav--prev { left: 10px; }
.book__nav--next { right: 10px; }
.book:fullscreen .book__nav { top: 50%; }
.book__status {
  position: absolute; top: 9px; left: 50%; translate: -50% 0; z-index: 5; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.book__status[hidden] { display: none; }
.book__status a { color: var(--accent); }
.book__foot { display: flex; align-items: center; gap: 18px; width: min(100%, 640px); margin-top: 24px; }
.book__count {
  min-width: 15ch; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);
}
.book__range { flex: 1; accent-color: var(--accent); }
.reader__more { margin-top: 48px; }
@media (max-width: 767px) {
  .reader { padding: 22px var(--gutter) 40px; }
  .book { padding: 30px 8px 16px; margin: 0 calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
  .book__nav { width: 34px; height: 64px; font-size: 24px; top: calc(30px + var(--ph, 509px) / 2); }
  .book__nav--prev { left: 4px; }
  .book__nav--next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .book__spread { transition: none; }
  .leaf.is-loading { animation: none; }
}

/* ----------------------- GLAVA: ZNAMKA, VRSTICA, ARHIV ---------------------- */
/* Znamka brez podnaslova, navpično na sredini vrstice s pasico in gumbom. */
.masthead { padding-top: 26px; padding-bottom: 26px; }
.utility__cell--link { transition: color 140ms var(--ease); }
.utility__cell--link:hover, .utility__cell--link:hover .utility__val { color: var(--accent); }
@media (max-width: 767px) { .utility__cell--link { display: none; } }

/* Arhiv ni rubrika: od rubrik ga loči tanka navpična črta, prepozna pa se po
   mali naslovnici zadnje številke, ki se ob prehodu poravna in dvigne. */
.nav__item.nav__item--arhiv { gap: 10px; margin-left: 12px; padding-left: 24px; }
.nav__item--arhiv::before {
  content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: var(--line-strong);
}
.nav__item--arhiv::after { left: 24px; }
.nav__thumb {
  width: 15px; height: 21px; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg); transition: transform 200ms var(--ease);
}
.nav__item--arhiv:hover .nav__thumb, .nav__item--arhiv.is-active .nav__thumb { transform: rotate(0deg) translateY(-2px) scale(1.12); }
.condensed__nav a.is-arhiv, .sheet__item--arhiv { color: var(--accent); }

/* Najnovejše v stranskem stolpcu — med obema oglasoma. */
.latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.latest li + li { border-top: 1px solid var(--line); }
.latest__item { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; padding: 12px 0; }
.latest li:first-child .latest__item { padding-top: 4px; }
.latest__item img, .latest__ph {
  display: block; width: 84px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-raised);
  transition: opacity 160ms var(--ease);
}
.latest__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.latest__txt .eyebrow { font-size: 9.5px; }
.latest__t {
  font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--text-primary); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 140ms var(--ease);
}
.latest__item:hover .latest__t { color: var(--accent); }
.latest__item:hover img { opacity: 0.85; }

/* -------------------------------- ZNAMKA ---------------------------------- */
.logo { display: block; width: auto; max-width: 100%; aspect-ratio: 903 / 197; }
/* Izrez je narejen za temno podlago; v svetli temi ga podloži temna ploščica. */
:root[data-theme="light"] .logo { box-sizing: content-box; padding: 5px 10px; background: #0e0f12; }
.wordmark { gap: 10px; }
.wordmark .logo { height: clamp(44px, 4.8vw, 66px); }
.wordmark__strap { padding-left: 4px; }
.condensed__mark .logo { height: 26px; }
.sheet__head .logo { height: 30px; }
.footer__mark .logo { height: 44px; }
.wordmark:hover .logo { filter: brightness(1.1); }
@media (max-width: 767px) {
  .wordmark .logo { height: 36px; }
  .wordmark { gap: 7px; }
}

/* Telefon: logotip večji in na sredini, ob strani le kratek gumb »Naroči«,
   pasica pod njima čez celo širino. */
@media (max-width: 767px) {
  .masthead, .masthead:has(.topad) {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; row-gap: 16px;
  }
  .masthead .wordmark, .masthead:has(.topad) .wordmark { grid-column: 2; flex: none; align-items: center; }
  .wordmark .logo { height: 46px; }
  .wordmark__strap { padding-left: 0; text-align: center; }
  .masthead__tools { grid-column: 3; justify-self: end; }
  .masthead__tools .btn-accent { padding: 9px 10px; font-size: 10.5px; letter-spacing: 0.04em; }
  .btn-accent__more { display: none; }
  .masthead .topad { grid-column: 1 / -1; }
}

/* ---------------------- TABLICE: ZNAMKA, VRSTICA, MENI ---------------------- */
/* Logotip vedno v svojem razmerju: v stolpcu flex bi ga sicer raztegnilo na
   vso širino znamke (tablica, ko se glava prelomi v dve vrsti). */
.wordmark .logo { align-self: flex-start; object-fit: contain; }
@media (max-width: 767px) { .wordmark .logo { align-self: center; } }

/* Meni se nikoli ne lomi v dve vrstici; na ožjih zaslonih se zgosti. */
.nav__item, .nav__db { white-space: nowrap; }
@media (max-width: 1279px) {
  .nav__item { padding: 0 13px; font-size: 12px; }
  .nav__item.nav__item--arhiv { margin-left: 6px; padding-left: 17px; }
  .nav__item--arhiv::after { left: 17px; }
}
@media (max-width: 1180px) {
  .utility__cell--link + .utility__cell--link { display: none; }
  .nav__db { display: none; }
}
/* Tablica pokončno: meni kot na telefonu (»Meni« + iskanje). */
@media (max-width: 1023px) {
  .utility__cell--link { display: none; }
  .nav__item, .nav__db { display: none; }
  .nav { justify-content: space-between; }
  .nav__burger {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
    color: var(--text-secondary); text-transform: uppercase;
  }
  .nav__searchbtn {
    display: flex; align-items: center; min-height: 44px; margin-left: auto;
    font-family: var(--font-mono); font-size: 15px; color: var(--text-muted);
  }
}

/* ------------------------------ ŠIROKI ZASLONI ------------------------------ */
/* Nad 1600 px trakovi (vrstica, glava, meni, trak novic, noga) in naslovna
   zgodba segajo čez ves zaslon; vsebina ostane v sredinskem pasu 1600 px,
   poravnana z logotipom. Fotografije ob naslovni zgodbi rastejo z zaslonom. */
@media (min-width: 1600px) {
  :root { --edge: calc((100vw - 1600px) / 2); }
  .body { padding-inline: var(--edge); }
  .hero { grid-template-columns: minmax(0, 1fr) clamp(480px, 34vw, 880px); }
  .hero__lead { height: clamp(600px, 32vw, 820px); }
}

/* Glava na prenosniku: gumb in podnaslov se ne lomita v dve vrstici. */
.btn-accent { white-space: nowrap; }
.masthead__tools { flex: none; }
.wordmark__strap { white-space: nowrap; }
@media (max-width: 1360px) { .wordmark__strap .strap__since { display: none; } }

/* Tablica (glava v dveh vrsticah): velik logotip na sredini, gumb ob strani,
   pasica pod njima čez vso širino. */
@media (min-width: 768px) and (max-width: 1180px) {
  .masthead, .masthead:has(.topad) {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; row-gap: 18px;
  }
  .masthead .wordmark, .masthead:has(.topad) .wordmark { grid-column: 2; grid-row: 1; flex: none; align-items: center; }
  .wordmark .logo { height: clamp(66px, 8.6vw, 92px); align-self: center; }
  .wordmark__strap { padding-left: 0; text-align: center; }
  .wordmark__strap .strap__since { display: inline; }
  .masthead__tools { grid-column: 3; grid-row: 1; justify-self: end; }
  .masthead .topad { grid-column: 1 / -1; grid-row: 2; }
}

/* Telefon: logotip velik na sredini; gumb »Naroči« je v vrstici na vrhu. */
.utility__order { display: none; }
@media (max-width: 767px) {
  .masthead, .masthead:has(.topad) { grid-template-columns: 1fr; }
  .masthead .wordmark, .masthead:has(.topad) .wordmark { grid-column: 1; grid-row: 1; }
  .masthead__tools { display: none; }
  .masthead .topad { grid-column: 1; grid-row: 2; }
  .wordmark .logo { height: 62px; }
  .utility__links .utility__order {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
    background: var(--accent); color: #0e0f12; font-weight: 700; letter-spacing: 0.08em;
  }
  .utility__links .utility__order:hover { background: var(--text-primary); color: #0e0f12; }
}
/* Znamka se v vrstici glave ne krči — prostor odda pasica. */
.masthead > .wordmark { flex: none; }
/* Naslovna zgodba čez ves zaslon: oznaka in naslov se poravnata s stolpcem logotipa. */
@media (min-width: 1600px) {
  .hero .flags { left: calc(var(--gutter) + var(--edge)); }
  .hero__body { padding-left: calc(var(--gutter) + var(--edge)); }
}

/* Sezonski izbor v stranskem stolpcu (lib/sezona.js) — namesto zadnjih objav. */
.sezona { box-shadow: inset 3px 0 0 var(--accent); }
.sezona .block__label { color: var(--accent); }
.sezona__h { margin-top: -4px; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance; }

/* Poenostavljena glava: brez vrstice nad logotipom (datum, povezave) in brez
   traku novic pod naslovno zgodbo. Na telefonu je »Naroči« v vrstici menija. */
.nav__order { display: none; }
@media (max-width: 767px) {
  .nav__order {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin-left: auto;
    background: var(--accent); color: #0e0f12; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .nav__order + .nav__searchbtn { margin-left: 14px; }
}
.footer__theme { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.footer__theme:hover { color: var(--accent); }
@media (max-width: 767px) { .nav__order { align-self: center; } }
/* Oznaka »Udarno danes / Live« nad fotografijami ni potrebna nikjer —
   fotografije nosijo rubriko in datum same. */
.hero__side .hero__sidehead { display: none; }

/* ------------------------- TELEFON IN TABLICA: RED ------------------------- */
/* Telefon: štiri zgodbe ob naslovni kot čist seznam — sličica levo, naslov desno. */
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; background: none; }
  .tile {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0;
    padding: 14px var(--gutter); background: var(--bg-base); color: var(--text-primary); border-bottom: 1px solid var(--line);
  }
  .tile img { position: static; flex: none; width: 104px; height: 78px; }
  .tile:hover img { transform: none; }
  .tile__scrim { display: none; }
  .tile__body { padding: 0; gap: 5px; min-width: 0; }
  .tile h2 { font-size: 15px; line-height: 1.25; color: var(--text-primary); }
}

/* Tablica: glava uravnotežena — velik logotip levo, gumb desno, pasica pod njima. */
@media (min-width: 768px) and (max-width: 1180px) {
  .masthead, .masthead:has(.topad) { grid-template-columns: 1fr auto; }
  .masthead .wordmark, .masthead:has(.topad) .wordmark { grid-column: 1; justify-self: start; align-items: flex-start; }
  .wordmark .logo { align-self: flex-start; }
  .wordmark__strap { text-align: left; }
  .masthead__tools { grid-column: 2; }
  .masthead .topad { grid-column: 1 / -1; }
}
/* Tablica pokončno: cel meni namesto praznega »Meni«; gumb Meni ostane le na telefonu. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav { justify-content: flex-start; }
  .nav__item { display: flex; padding: 0 8px; font-size: 11px; letter-spacing: 0.06em; }
  .nav__item:first-child { padding-left: 0; }
  .nav__item.nav__item--arhiv { margin-left: 4px; padding-left: 13px; }
  .nav__item--arhiv::after { left: 13px; }
  .nav__burger { display: none; }
  .nav__searchbtn { display: flex; margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 899px) { .nav__thumb { display: none; } }
/* Strnjena glava ob pomikanju: na tablici brez menija (se ne prilega) — logotip, iskanje, Naroči. */
@media (max-width: 1100px) {
  .condensed__nav { display: none; }
  .condensed__tools { margin-left: auto; }
}
/* Do 1180 px vsebina čez vso širino, stranski stolpec pod njo v dveh stolpcih. */
@media (max-width: 1180px) {
  .body { grid-template-columns: 1fr; }
  .main { border-right: 0; }
  .aside { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .block { border-right: 1px solid var(--line); }
  .block:nth-child(2n) { border-right: 0; }
}
@media (max-width: 767px) {
  .aside { grid-template-columns: 1fr; }
  .block { border-right: 0; }
}
/* Tablica pokončno (naslovna zgodba čez vso širino): štiri zgodbe kot seznam v dveh stolpcih. */
@media (min-width: 768px) and (max-width: 900px) {
  .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 0; background: none; }
  .tile {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0;
    padding: 16px var(--gutter); background: var(--bg-base); color: var(--text-primary); border-bottom: 1px solid var(--line);
  }
  .tile:nth-child(odd) { border-right: 1px solid var(--line); }
  .tile img { position: static; flex: none; width: 112px; height: 84px; }
  .tile:hover img { transform: none; }
  .tile__scrim { display: none; }
  .tile__body { padding: 0; gap: 5px; min-width: 0; }
  .tile h2 { font-size: 15px; line-height: 1.25; color: var(--text-primary); }
}

/* ------------------------------ TELEFON: GLAVA ------------------------------ */
/* Ena vrstica kot v aplikacijah za novice: meni levo, logotip na sredini,
   »Naroči« desno; pasica pod njo. Vrstica z datumom, podnaslov in ločena
   vrstica menija na telefonu odpadejo (prijava in iskanje sta v meniju). */
.mhead__menu { display: none; }
/* Gumb v meniju prevzame videz povezav (.sheet__item); ponastavimo le privzeti videz gumba. */
.sheet__search { -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: left; background: none; cursor: pointer; border-width: 0 0 1px; }
@media (max-width: 767px) {
  .utility, .nav { display: none; }
  .masthead, .masthead:has(.topad) {
    display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo cta" "ad ad ad";
    align-items: center; column-gap: 8px; row-gap: 14px; padding: 14px var(--gutter) 16px;
  }
  .mhead__menu {
    grid-area: menu; justify-self: start; display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  }
  .mhead__menu span { display: block; width: 24px; height: 2px; background: var(--text-primary); }
  .masthead .wordmark, .masthead:has(.topad) .wordmark { grid-area: logo; justify-self: center; align-items: center; }
  .wordmark__strap { display: none; }
  .wordmark .logo { height: 44px; }
  .masthead__tools { grid-area: cta; display: flex; justify-self: end; }
  .masthead__tools .btn-accent { padding: 9px 10px; font-size: 10.5px; letter-spacing: 0.04em; }
  .masthead .topad { grid-area: ad; }
}
@media (max-width: 374px) { .wordmark .logo { height: 38px; } .masthead__tools .btn-accent { padding: 8px 8px; font-size: 10px; } }

/* ------------- OB NASLOVNI ZGODBI (RAČUNALNIK): ŠTIRI SLIKE, KOT NA IZVIRNIKU ------------- */
/* Izbrana postavitev (B): 2 × 2 fotografije z naslovom na sliki, kot na izvirni
   reviji, a z ozko režo med njimi, da niso nametane skupaj. Zgornji rob je
   poravnan z naslovno fotografijo; rubrika in datum vedno v eni vrstici. */
@media (min-width: 901px) {
  .hero__side { border-left: 0; padding-left: 6px; }
  .tiles { gap: 6px; background: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-width: 0; }
  .tile__scrim { background: linear-gradient(180deg, rgba(10, 11, 13, 0) 38%, rgba(10, 11, 13, 0.94) 100%); }
  .tile__body { padding: 14px 18px 16px; }
  .tile__body .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; letter-spacing: 0.08em; }
  .tile h2 {
    font-size: 16px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}
@media (min-width: 1600px) {
  .hero__side { padding-left: 8px; }
  .tiles { gap: 8px; }
  .tile h2 { font-size: 18px; }
}
/* Ožje ploščice (tablica ležeče, manjši prenosnik): rubrika z datumom zbitejša, da ostane cela. */
@media (min-width: 901px) and (max-width: 1180px) {
  .tile__body { padding: 12px 14px 14px; }
  .tile__body .eyebrow { font-size: 9.5px; letter-spacing: 0.03em; }
}

/* Strnjena glava pride mehko: daljši premik z blagim zaustavljanjem in prosojnost. */
.condensed {
  opacity: 0; pointer-events: none;
  transition: transform 380ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 280ms ease;
}
.condensed.is-on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .condensed { transform: none; transition: opacity 160ms ease; }
}

/* Strnjena glava sledi pomikanju (site.js 1) — brez časovne animacije. */
.condensed { transition: none; }
/* Samodejno žarišče (site.js 17): prvič se fotografija do žarišča premakne mehko. */
img.is-fokus { transition: object-position 700ms cubic-bezier(0.22, 0.8, 0.24, 1), transform 900ms cubic-bezier(0.22, 0.8, 0.24, 1); }

/* --------------------------------- UČINKI ---------------------------------- */
/* 1) Logotip v glavi: tanek odsev svetlobe vsakih 7 s zdrsne čez kromirane črke
   (maska je sam logotip, zato sije le po črkah), zadaj rahel rdeč sij. */
.logo-fx { position: relative; display: block; width: max-content; max-width: 100%; line-height: 0; perspective: 700px; }
.wordmark .logo-fx { align-self: flex-start; }
.logo-fx .logo {
  filter: drop-shadow(0 0 14px rgba(255, 45, 30, 0.28));
  transition: transform 500ms cubic-bezier(0.22, 0.8, 0.24, 1), filter 500ms ease;
}
.wordmark:hover .logo-fx .logo { filter: drop-shadow(0 0 22px rgba(255, 45, 30, 0.5)); }
.logo-fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url(/assets/img/tranzit-logo.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/tranzit-logo.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen; animation: logoSijaj 7s ease-in-out infinite;
}
@keyframes logoSijaj { 0%, 70% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (max-width: 767px) { .wordmark .logo-fx { align-self: center; } }
@media (min-width: 768px) and (max-width: 1180px) { .wordmark .logo-fx { align-self: flex-start; } }

/* 3) Fotografije: ob miški se slika počasi približa, nad naslovom zraste rdeča črta. */
@media (hover: hover) {
  .tile img, .card__media img { transition: transform 900ms cubic-bezier(0.22, 0.8, 0.24, 1); }
  .tile:hover img, .card:hover .card__media img { transform: scale(1.06); }
  .tile__body::before {
    content: ""; display: block; width: 0; height: 3px; margin-bottom: 8px; background: var(--accent);
    transition: width 500ms cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  .tile:hover .tile__body::before { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-fx::after { animation: none; display: none; }
  .logo-fx .logo, .tile img, .card__media img { transition: none; }
  .tile:hover img, .card:hover .card__media img { transform: none; }
}

/* Sekundo po prihodu na stran se logotip enkrat zasveti: močan rdeč sij in
   odsev svetlobe čez črke; nato ostane le mirno ponavljanje sijaja (vsakih 7 s). */
.logo-fx .logo { animation: logoZasveti 1.6s cubic-bezier(0.22, 0.8, 0.24, 1) 0.9s; }
@keyframes logoZasveti {
  0% { filter: drop-shadow(0 0 14px rgba(255, 45, 30, 0.28)) brightness(1); }
  35% { filter: drop-shadow(0 0 34px rgba(255, 60, 40, 0.9)) brightness(1.28); }
  100% { filter: drop-shadow(0 0 14px rgba(255, 45, 30, 0.28)) brightness(1); }
}
.logo-fx::after { animation: logoSijajUvod 1.3s ease-in-out 1s both, logoSijaj 7s ease-in-out 2.4s infinite; }
@keyframes logoSijajUvod { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-fx .logo { animation: none; }
  .logo-fx::after { animation: none; }
}

/* ------------------------ BERLJIVOST IN DOSTOPNOST ------------------------- */
/* Pregled po WCAG 2.1 AA: drobno besedilo mora imeti vsaj 4,5:1 kontrasta, cilji
   za prst na telefonu naj bodo vsaj ~40 px, brskalnik mora vedeti za temno temo. */
html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
select { background-color: var(--bg-raised); color: var(--text-primary); }
a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }
.palette__results, .sheet > div { overscroll-behavior: contain; }

.stamp { font-size: 10.5px; color: var(--text-muted); }
.consent, .consent a { font-size: 11px; color: var(--text-muted); }
.footer__bottom, .footer__bottom a { color: var(--text-muted); }
.railmeta__k { font-size: 10px; color: var(--text-muted); }
.kind { font-size: 10px; }
.latest__txt .eyebrow { font-size: 10px; }

@media (max-width: 767px) {
  .tag { display: inline-flex; align-items: center; min-height: 40px; padding-left: 14px; padding-right: 14px; }
  .sechead__all, .archmore a { display: inline-flex; align-items: center; min-height: 40px; }
  .masthead__tools .btn-accent { display: inline-flex; align-items: center; min-height: 38px; }
}
@media (max-width: 767px) {
  .footer__col a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 36px; }
  .footer__col { gap: 2px; }
}

/* ------------------------- KARTICE: ENOTNO IN PORAVNANO ------------------------ */
/* Prej se vozilo ni smelo obrezati, zato so bile slike v vrsti različno visoke.
   Zdaj samodejno žarišče (site.js 17) drži vozilo v sredini okvirja, zato imajo
   vse kartice in vrstice enako razmerje 3 : 2 — slike so poravnane, stran pa ob
   nalaganju ne poskakuje več (okvir ima velikost, preden se slika naloži). */
.card__media, .row__media { aspect-ratio: 3 / 2; max-height: none; }
.card__media img, .row__media img { height: 100%; object-fit: cover; align-self: stretch; }
/* Oznaka vrste (REPORTAŽA, TEST, INTERVJU) stoji na sliki, ne v vrstici z rubriko —
   tako so rubrike, datumi in naslovi vseh kartic v vrsti na isti višini. */
.card { position: relative; }
.card .metaline .kind {
  position: absolute; top: 10px; left: 10px; z-index: 1; margin: 0;
  /* Polna ploskev namesto obrobe: tanka obroba z drobnim besedilom se je na
     svetli fotografiji izgubila. */
  border: 0; padding: 5px 8px; background: #f1f1ef; color: #0e0f12;
}
.card .metaline .kind.is-test { background: var(--accent); color: #0e0f12; }

/* ---------------------- NEKOLIKO VEČJE OZNAKE (11 px) ---------------------- */
/* Bralci revije o vozilih so pogosto starejši — 10 px je bilo na meji berljivosti. */
.eyebrow, .block__label, .cover__n, .yearcell__n, .prevnext__k, .nlband__eyebrow, .stamp { font-size: 11px; }
.latest__txt .eyebrow { font-size: 10.5px; }
.eyebrow--h { margin: 0; font-weight: 400; line-height: inherit; }

/* ------------------------ OGLAS OB LOGOTIPU (300 × 250) --------------------- */
/* Drugo mesto v glavi, poleg velike pasice. Mera 300 × 250 je najbolj razširjen
   standard, zato jo oglaševalci že imajo in je v celoti berljiva. Glava je ob
   njej višja, zato so razmiki tesnejši, vse pa je navpično poravnano. */
.masthead:has(.ad--mast) {
  gap: 18px; padding: 18px calc(var(--gutter) * 0.7 + var(--edge)); align-items: center;
}
.masthead:has(.ad--mast) .wordmark .logo { max-width: 232px; }
.masthead:has(.ad--mast) .topad { margin: 0; flex: 0 0 728px; }
.masthead__tools:has(.ad--mast) { flex: 0 0 300px; align-items: flex-start; }
.ad--mast { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex: none; }
.ad--mast .ad__label { font-size: 9px; letter-spacing: 0.2em; }
.ad--mast img { display: block; width: 300px; height: 250px; object-fit: cover; }
@media (max-width: 1180px) { .ad--mast { display: none; } }

/* ------------------------- VIZUALNI PREGLED, SEPTEMBER --------------------------- */
/* Tesna črkovna razdalja pri debelih naslovih skrči tudi presledek, zato so se
   besede zlepile (»PrviSuperPantherjezapustil«). Razmik vrnemo samo med besedami. */
.hero__title, .lead__title, .article__title, .pagehead h1, .reader__title { word-spacing: 0.08em; }

/* Vodilni članek rubrike: enaka zatemnitev kot glava članka (navpično + levi pas),
   rubrika na fotografiji bela — rdeča je na rumenem tovornjaku izginila. */
.lead__scrim {
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0) 22%, rgba(10, 11, 13, 0.5) 52%, rgba(10, 11, 13, 0.94) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.5) 0%, rgba(10, 11, 13, 0) 62%);
}
.lead .eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.lead__title { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }
.lead__dek { color: #d6d8dc; }

/* Samo en sosednji članek: čez celo širino, brez prazne polovice. */
.prevnext > span:empty { display: none; }
.prevnext:has(> span:empty) { grid-template-columns: 1fr; }
.prevnext:has(> span:empty) .prevnext__a { border-right: 0; }

/* Tiskana izdaja na telefonu: gumba enako široka, številka bliže besedilu. */
@media (max-width: 767px) {
  .print { gap: 4px; }
  .print__acts { flex-direction: column; }
  .print__btn { justify-content: center; }
  .print__stage { min-height: 200px; }
}

/* Prehod med razdelki: tanka črta z zmernim zrakom namesto ~150 px praznine. */
.section {
  padding-block: max(36px, calc(var(--rhythm) * 0.6)) max(32px, calc(var(--rhythm) * 0.52));
}

/* ---------------------- POROČILO ZA OGLAŠEVALCA ---------------------------- */
/* Stran vidi oglaševalec, ne bralec: številke morajo biti berljive na prvi
   pogled, zato velike in brez okrasja. */
.rep__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px;
}
.rep__card { background: var(--bg-base); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.rep__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.rep__v { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.rep__n { font-size: 13px; color: var(--text-secondary); }
.rep__tbl { width: 100%; border-collapse: collapse; }
.rep__tbl th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-strong);
}
.rep__tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rep__tbl td:last-child { width: 38%; }
.rep__num { text-align: right; font-variant-numeric: tabular-nums; }
.rep__bar { display: block; height: 10px; min-width: 2px; background: var(--accent); border-radius: 0 3px 3px 0; }
.rep__h { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--text-primary); }
.rep__opomba { margin-top: 32px; font-size: 15px; max-width: 70ch; }
@media (max-width: 600px) {
  .rep__tbl td:last-child, .rep__tbl th:last-child { display: none; }
  .rep__v { font-size: 30px; }
}

/* ------------------------- POMOŽNI RAZREDI (prej slogi v HTML) ------------------------- */
/* Prej zapisano neposredno v predlogah (style="…"). !important ohrani enako
   prednost, kot jo je imel slog v HTML, zato se videz ne spremeni. */
.u-accent { color:var(--accent) !important; }
.u-bb0 { border-bottom:0 !important; }
.u-box { border:1px solid var(--line) !important; }
.u-box { border:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; }
.u-br0 { border-right:0 !important; }
.u-bt { border-top:1px solid var(--line) !important; }
.u-center { align-items:center !important; justify-content:center !important; }
.u-cols1 { grid-template-columns:1fr !important; }
.u-eyebrow-wide { letter-spacing:0.18em !important; font-size:10.5px !important; }
.u-fill { height:100% !important; }
.u-issuecover { width:auto !important; max-height:320px !important; object-fit:contain !important; border:1px solid var(--line-strong) !important; }
.u-issuephoto { display:flex !important; align-items:center !important; justify-content:center !important; background:var(--bg-raised) !important; }
.u-line { border-color:var(--line) !important; }
.u-msgbox { max-width:520px !important; text-align:center !important; display:flex !important; flex-direction:column !important; gap:18px !important; align-items:center !important; }
.u-msgsection { border-bottom:0 !important; min-height:52vh !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.u-msgtext { font-family:var(--font-serif) !important; font-size:17px !important; line-height:1.55 !important; color:var(--text-body) !important; }
.u-msgtitle { font-size:38px !important; font-weight:900 !important; letter-spacing:-0.04em !important; line-height:1.05 !important; }
.u-mt2 { margin-top:2px !important; }
.u-mt20 { margin-top:20px !important; }
.u-mt24 { margin-top:24px !important; }
.u-mt32 { margin-top:32px !important; }
.u-mt36 { margin-top:36px !important; }
.u-mt8 { margin-top:8px !important; }
.u-nfacts { display:flex !important; gap:10px !important; margin-top:8px !important; flex-wrap:wrap !important; }
.u-nfbox { display:flex !important; flex-direction:column !important; gap:16px !important; max-width:640px !important; }
.u-nftext { font-family:var(--font-serif) !important; font-size:18px !important; line-height:1.55 !important; color:var(--text-body) !important; }
.u-nftitle { font-size:clamp(32px,5vw,56px) !important; font-weight:900 !important; letter-spacing:-0.045em !important; line-height:1 !important; }
.u-offscreen { position:absolute !important; left:-9999px !important; }
.u-pointer { cursor:pointer !important; }
.u-primary { color:var(--text-primary) !important; }
.u-row8 { display:flex !important; gap:8px !important; align-items:flex-start !important; }
.u-rowkey { font-family:var(--font-ui) !important; font-size:14px !important; color:var(--text-primary) !important; }
.u-rowval { text-align:right !important; max-width:60% !important; }
.u-scroll { overflow-y:auto !important; }
.u-self-start { align-self:flex-start !important; }
.u-serif { font-family:var(--font-serif) !important; color:var(--text-body) !important; line-height:1.5 !important; }
.u-stack12 { display:flex !important; flex-direction:column !important; gap:12px !important; margin-top:8px !important; }
.u-w560 { max-width:560px !important; }
.u-w680 { max-width:680px !important; }

/* Mere v HTML (width/height) služijo samo razmerju. Kjer CSS določa le širino
   okvirja, mora biti višina samodejna — sicer bi jo prevzel atribut in sličica
   bi se raztegnila v visok trak (seznam »Najnovejše«/»Aktualno«). */
.latest__item img { height: auto; }