/* Fonts are self-hosted; licenses are in fonts/*-OFL.txt. Rubik is the
   variable font, so two files cover every weight. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/rubik-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/rubik-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fredoka-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fredoka-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0f1b26;
  --ink-2: #4a5966;
  --paper: #fbfaf7;
  --line: #ebe8e1;
  --cyan: #33ccff;
  --route: #2fa3f0;
  --closure: #e8423a;
  --hazard: #ffb020;
  --jam-1: #ffc940; /* Waze jam levels 1 and 2 */
  --jam-3: #ff8a1f;
  --jam-4: #e8423a;
  --jam-5: #9b1c1c;
  --police: #2f6fed;
  --accident: #d81b60;
  --ok: #20c06a;

  --card: #fff;
  --tint: #efece5;
  --shadow: 0 1px 0 rgba(15, 27, 38, .06), 0 6px 18px -10px rgba(15, 27, 38, .2);
  --shadow-lg: 0 1px 0 rgba(15, 27, 38, .06), 0 18px 40px -16px rgba(15, 27, 38, .35);
  --radius: 16px;
  --max: 1180px;
  --gutter: 36px;
  --font: Rubik, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: Fredoka, var(--font);
}

@media (max-width: 639.98px) {
  :root { --gutter: 16px; }
}

/* Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

h1 {
  font-size: clamp(34px, 4vw + 20px, 52px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.035em;
}
h1 em { font-style: normal; color: var(--route); }

h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--route);
  outline-offset: 2px;
}


/* Page frame: header, main, footer share the same content width. */

.site-header, .site-main, .site-footer {
  width: 100%;
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}

.site-main {
  flex: 1;
  padding-block: 18px 48px;
}

/* Header */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 18px;
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.logo { display: block; flex: none; }
.wordmark {
  font: 700 22px/1 var(--font-brand);
  letter-spacing: -.01em;
}
.wordmark span { opacity: .55; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover, .nav a.on { color: var(--ink); }

/* SL · EN. It pushes the button and the menu to the right edge. */
.lang-switch {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.lang-switch a, .lang-switch [aria-current] { padding: 10px 5px; }
.lang-switch a { text-decoration: none; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch [aria-current] { font-weight: 700; color: var(--ink); }
.lang-switch .sep { opacity: .5; }

.menu { display: none; }
.menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--tint); }
.menu-icon .close, .menu[open] .menu-icon .bars { display: none; }
.menu[open] .menu-icon .close { display: inline; }

.menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% - 4px);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu-panel a:not(.cta) {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.menu-panel a.on { color: var(--ink); background: var(--paper); }
.menu-panel .cta {
  justify-content: center;
  margin-top: 6px;
  padding: 12px 16px;
  font-size: 16px;
}

/* The full nav and the switch need about 850 px; below 900 px the nav moves
   into the menu. */
@media (max-width: 899.98px) {
  .site-header { gap: 12px; padding-block: 10px; }
  .site-header > .nav, .site-header > .cta { display: none; }
  .menu { display: block; }
}
@media (min-width: 640px) {
  .menu-panel { left: auto; width: 320px; }
}

/* Footer */

.site-footer {
  padding-block: 14px;
  border-top: 1px solid rgba(15, 27, 38, .08);
  font-size: 12px;
  color: var(--ink-2);
}

/* Shared pieces */

.page-head {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-block: 18px 8px;
}

.lead {
  max-width: 60ch;
  font-size: 17px;
  color: var(--ink-2);
}

.not-found-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.closure-scene { display: block; width: min(100%, 420px); height: auto; margin-bottom: 8px; }
.closure-scene text { font: 800 15px var(--font); text-anchor: middle; fill: var(--ink); }
.closure-scene .code { font-size: 28px; }
.closure-scene .sub { font-size: 12px; font-weight: 400; }
/* The resting state, which is also all reduced motion shows: lamps lit. */
.closure-scene .lamp {
  fill: var(--hazard);
  filter: drop-shadow(0 0 5px var(--hazard));
  animation: closure-lamp 1s steps(1) infinite;
}
.closure-scene .late { animation-delay: .5s; }
.closure-scene .arrow { animation: closure-nudge 1.4s ease-in-out infinite; }

@keyframes closure-lamp { 50% { fill: #6b5a2e; filter: none; } }
@keyframes closure-nudge { 50% { transform: translateX(6px); } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.live-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--ok);
  border-radius: 50%;
  animation: ping 1.8s ease-out infinite;
}
.live-dot.stale { background: #a3adb5; }
.live-dot.stale::after { display: none; }

.card {
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.btn-cyan { background: var(--cyan); color: var(--ink); }
.btn-cyan:hover { background: color-mix(in srgb, var(--cyan), var(--ink) 8%); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: color-mix(in srgb, var(--ink), #fff 12%); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: #e3f6ff;
  color: #0b6fa4;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.chip.warn { background: #fff1d6; color: #9a5b00; }
.chip.bad { background: #ffe1de; color: #b3261e; }
.chip.closed { background: #9b1c1c; color: #fff; }

@keyframes ping {
  from { transform: scale(.5); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}

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

/* Promet */

.live-home { overflow-x: clip; }
/* Clip at the gutter, not at the content edge, so the live dot's ring at the
   left edge isn't cut. */
.live-home, .zapore {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: center;
}
.hero-text h1 { margin: 14px 0 26px; }
.hero-text { min-width: 0; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s;
  animation: fade-up .6s ease-out backwards;
}
.stat:nth-child(2) { animation-delay: .08s; }
.stat:nth-child(3) { animation-delay: .16s; }
.stat:nth-child(4) { animation-delay: .24s; }
.stat:hover { transform: translateY(-3px); }
.stat-icon { display: block; flex: none; }
.stat b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat b > :first-child { white-space: nowrap; }
.stat small { font-size: 13px; color: var(--ink-2); }
/* Drops under the number when the card is too narrow for both. */
.trend {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: default;
}
.trend.up { color: #b3261e; }
.trend.down { color: #0d7a3f; }
.trend:focus { outline: none; }
.trend:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; border-radius: 4px; }
.trend::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.trend:hover::after, .trend:focus::after { opacity: 1; }

.state-line {
  min-height: 3em;
  margin-top: 18px;
  color: var(--ink-2);
}
.state-line strong { color: var(--ink); font-weight: 600; }

.map-wrap { min-width: 0; }
.map-box { position: relative; }
.map .hit { fill: transparent; }
/* A report's text over the map, as on the freeway rows. */
.map-tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
}
.map-tip.tip-start { transform: translate(-14px, calc(-100% - 14px)); }
.map-tip.tip-end { transform: translate(calc(-100% + 14px), calc(-100% - 14px)); }
.map { display: block; width: 100%; height: auto; overflow: visible; }
.map .border {
  fill: #eef2f4;
  stroke: #c9d3da;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.map .lines path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) var(--d, 0ms) forwards;
}
.map .casing { stroke: #fff; stroke-width: 7; }
.map .rt { stroke: var(--route); stroke-width: 3.5; }
/* Fades in once the freeways have drawn. */
.map .jams path {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  animation: fade .5s ease-out 1.4s backwards;
}
.map .towns text {
  font: 600 11px var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--ink-2);
  stroke: #eef2f4;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
}

.map .mk .body, .map .mk .ping {
  transform-box: fill-box;
  transform-origin: center;
}
.map .mk .body {
  opacity: 0;
  animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0ms) forwards;
}
.map .mk.out .body { animation: shrink .35s ease-in forwards; }
.map .mk.out .ping { display: none; }
.map .mk-full circle { fill: var(--closure); stroke: #fff; stroke-width: 1.5; }
.map .mk-part circle { fill: var(--jam-3); stroke: #fff; stroke-width: 1.2; }
.map .mk-hz .body circle { fill: var(--hazard); stroke: #fff; stroke-width: 1.2; }
.map .mk-sh .body > circle { fill: var(--hazard); stroke: #fff; stroke-width: 1.5; }
.map .mk-pol .body circle, .map .mk-cam .body > circle { fill: var(--police); stroke: #fff; stroke-width: 2; }
.map .mk-acc .body > circle { fill: #fff; stroke: var(--accident); stroke-width: 1.4; }
.map .glyph { fill: #fff; }
.map .ping {
  fill: none;
  stroke: var(--hazard);
  stroke-width: 1.5;
  opacity: 0;
  animation: ping 2.4s ease-out calc(var(--d, 0ms) + var(--pd, 0ms)) infinite;
}
.map .mk-pol .ping, .map .mk-cam .ping { stroke: var(--police); stroke-width: 2; animation-duration: 2s; }
.map .mk-acc .ping { stroke: var(--accident); stroke-width: 2; animation-duration: 2s; }
.map .mk-pol, .map .mk-cam, .map .mk-acc { cursor: pointer; }
.map .mk-pol:hover .body, .map .mk-cam:hover .body, .map .mk-acc:hover .body { scale: 1.3; transition: scale .15s; }
/* A focused report grows like a hovered one instead of getting a box. */
.map .mk:focus { outline: none; }
.map .mk:focus-visible .body { scale: 1.3; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.map-legend span, .map-legend button { display: inline-flex; align-items: center; gap: 6px; }
/* Chips, so they read as switches; the freeways item stays plain text. */
.map-legend button {
  padding: 4px 10px 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 27, 38, .06);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
}
.map-legend button:hover { border-color: #c9d3da; color: var(--ink); }
.map-legend button.off {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  opacity: .55;
  text-decoration: line-through;
}
/* A slow, soft double beat while it's off. */
.map-legend button.off.hint { animation: beat 4s ease-in-out infinite; }
.map .layer { transition: opacity .2s; }
.map .layer.off { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.map-legend svg { display: block; flex: none; }

.routes-now { margin-top: 28px; }
.routes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.routes-head h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dir-toggle {
  display: flex;
  padding: 4px;
  background: var(--tint);
  border-radius: 999px;
}
.dir-toggle button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.dir-toggle button.on { background: var(--ink); color: #fff; }

.rline {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 104px 112px;
  grid-template-areas: "nm line t chip";
  align-items: center;
  gap: 26px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.rline .nm { grid-area: nm; min-width: 0; font-weight: 600; }
.rline .nm small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}
/* The top 18 px of the line are room for report icons above the bar. */
.rline .line { grid-area: line; position: relative; height: 62px; margin: 0 10px; }
.rline .t {
  grid-area: t;
  /* A long "brez gneče" line grows to the left, into the gap. */
  justify-self: end;
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rline .t[tabindex] { position: relative; cursor: pointer; }
.rline .t small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}
.rline .chip { grid-area: chip; justify-self: end; }
.rline .chip.empty { visibility: hidden; }

.track, .jams {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 8px;
}
.track { border-radius: 99px; background: var(--route); }
.track::after, .jamseg::after {
  content: "";
  position: absolute;
  inset: 2px 3px;
  border-radius: 99px;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 1.3px, transparent 1.8px) 0 50% / 14px 4px repeat-x;
  animation: dots .7s linear infinite;
}
.jamseg::after { animation-duration: var(--spd, .7s); }
.jamseg.stopped::after { content: none; }
.jamseg {
  position: absolute;
  top: -2px;
  z-index: 2;
  min-width: 6px;
  height: 12px;
  border-radius: 99px;
  box-shadow: 0 0 0 2px var(--paper);
  transform-origin: left;
  animation: grow .7s cubic-bezier(.2, .8, .2, 1) backwards;
  cursor: pointer;
}
.jamseg:focus-visible { outline-offset: 3px; }
.jamseg .tip, .rmk .tip, .ramp .tip, .rline .t .tip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 5;
  display: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.jamseg.tip-start .tip, .rmk.tip-start .tip, .ramp.tip-start .tip { left: 0; transform: none; }
.jamseg.tip-end .tip, .rmk.tip-end .tip, .ramp.tip-end .tip { left: auto; right: 0; transform: none; }
.jamseg:hover .tip, .jamseg:focus .tip, .rmk:hover .tip, .rmk:focus .tip,
.ramp:hover .tip, .ramp:focus .tip { display: block; }
/* Above the time, flush with its right edge. */
.rline .t .tip { bottom: calc(100% + 6px); left: auto; right: 0; transform: none; font-weight: 400; }
.rline .t:hover .tip, .rline .t:focus .tip { display: block; }

/* A report above the bar, with a stem down to where it is. */
.rmk {
  position: absolute;
  top: 0;
  z-index: 4;
  transform: translateX(-50%);
  cursor: pointer;
}
.rmk:focus-visible { outline-offset: 3px; }
.rmk svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(15, 27, 38, .35)); }
.rmk::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  background: var(--ink-2);
  opacity: .5;
}
.rmk .cnt {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
}
.rmk .tip { bottom: 26px; }
.rmk .tip span { display: block; }

/* Jammed ramps: a ring on the line, centred on it like the stops. */
.ramp {
  position: absolute;
  top: 23px;
  z-index: 4;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  box-sizing: border-box;
  border: 5px solid var(--ramp);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--paper);
  cursor: pointer;
}
.ramp:focus-visible { outline-offset: 3px; }
.ramp .tip { bottom: 22px; }
.ramp .tip span { display: block; }
.rline.minor .ramp { top: 21px; }

.stop {
  position: absolute;
  top: 24px;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  /* A stop can sit on a jammed stretch; the stretch keeps the hover. */
  pointer-events: none;
}
.stop span {
  position: absolute;
  top: 19px;
  left: 50%;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  transform: translateX(-50%);
}
.stop.first span { left: -3px; transform: none; }
.stop.last span { left: auto; right: -3px; transform: none; }
.stop.quiet span { display: none; }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .stop.quiet-narrow span { display: none; }
}

.rows-minor { margin-top: 10px; }
/* The ring's second way sits under the first, as one row. */
.ring .rline.lane { border-top: 0; padding-top: 0; }
.routes-head.sub { margin: 18px 0 8px; }
/* On the right, where it was beside the heading; a phone keeps it left. */
@media (min-width: 640px) {
  .routes-head.sub { justify-content: flex-end; }
}
.rline.minor { padding: 10px 0 8px; font-size: 13px; }
.rline.minor .t { font-size: 15px; }
.rline.minor .line { height: 56px; }
.rline.minor .track, .rline.minor .jams { top: 27px; height: 6px; }
.rline.minor .jamseg { height: 10px; }
.rline.minor .stop { width: 12px; height: 12px; margin-left: -6px; border-width: 2.5px; }
.rline.minor .stop span { top: 13px; }

.jam-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.jam-legend span { display: inline-flex; align-items: center; gap: 6px; }
.jam-legend i { display: block; width: 18px; height: 6px; border-radius: 9px; }

@keyframes pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shrink {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0); opacity: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes beat {
  0%, 32%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(232, 66, 58, 0); }
  8%, 24% { opacity: .75; box-shadow: 0 0 0 2px rgba(232, 66, 58, .12); }
  16% { opacity: .6; box-shadow: 0 0 0 1px rgba(232, 66, 58, .04); }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes dots { to { background-position: 14px 50%; } }

/* Below 1024 px the line gets the full row width under the name. */
@media (max-width: 1023.98px) {
  .rline {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nm t" "nm chip" "line line";
    gap: 2px 12px;
    padding-bottom: 4px;
  }
  .rline .line { margin-top: 0; }
}
@media (max-width: 899.98px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719.98px) {
  .stop.quiet-phone span { display: none; }
}
@media (max-width: 639.98px) {
  .stats { gap: 8px; }
  .stat { gap: 8px; padding: 12px 10px; }
  .stat-icon { width: 30px; height: 30px; }
  .stat b { font-size: 24px; }
  .stat small { font-size: 12px; }
  .map .towns text { font-size: 20px; stroke-width: 5px; }
  .map .mk .body, .map .mk .ping { scale: 1.5; }
  /* A tapped report grows from there, not back down to the desktop size. */
  .map .mk[role="button"]:hover .body, .map .mk:focus-visible .body { scale: 1.9; }
  .stop { width: 12px; height: 12px; margin-left: -6px; top: 26px; border-width: 2.5px; }
  .stop span { top: 13px; }
  .rline.minor .stop { top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .map .lines path, .map .jams path, .map .mk .body, .stat { animation-delay: 0s !important; }
}

.waze-app {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
  padding: 34px 48px 34px 34px;
  background: var(--cyan);
  border-radius: 28px;
}
.waze-app-text { flex: 1; min-width: 0; }
.waze-app .lead { max-width: 62ch; margin: 8px 0 20px; }
.waze-app-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.waze-app-icon { flex: none; width: 136px; height: auto; }

/* The icon moves above the title so the text keeps the full width. */
@media (max-width: 639.98px) {
  .waze-app {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 20px;
    border-radius: 20px;
  }
  .waze-app-icon { order: -1; width: 56px; }
}

/* Zapore */

/* A tapped card keeps its hover nudge on touch screens; don't let it scroll
   the page sideways. */
.zapore { overflow-x: clip; }

.zap-head { padding-top: 18px; }
.zap-head h1 { margin: 14px 0 10px; }
.zap-sum { max-width: 60ch; font-size: 16px; color: var(--ink-2); }
.zap-sum b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.zap-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 24px 0 16px;
}
.zap-search {
  display: flex;
  flex: 0 1 340px;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #e3e0d8;
  color: var(--ink-2);
  transition: box-shadow .15s;
}
.zap-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.zap-search svg { display: block; flex: none; }
.zap-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  /* 16 px keeps iOS from zooming in on focus. */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.zap-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.zap-filter {
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.zap-filter b { margin-left: 4px; font-weight: 700; }
.zap-filter:hover { background: #e4e0d6; }
.zap-filter.on { background: var(--ink); color: #fff; }

.zap-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.zap-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: #e9f7fd;
  border-radius: var(--radius);
  color: #0b6fa4;
  font-size: 14px;
  line-height: 1.45;
}
.zap-note svg { display: block; flex: none; }
.zap-note p { color: var(--ink); }
.zap-note a { font-weight: 600; }

.zap-obcina {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 4px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.zap-obcina small { font-size: 13px; font-weight: 500; letter-spacing: 0; }

.zap-empty { padding: 50px 0; text-align: center; color: var(--ink-2); }

.zcard {
  margin-bottom: 10px;
  padding: 16px 18px;
  background: var(--card);
  border-left: 5px solid #b8c4cd;
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(15, 27, 38, .06), 0 6px 18px -12px rgba(15, 27, 38, .25);
  transition: transform .15s, box-shadow .15s;
  animation: fade-up .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.zcard.pick { cursor: pointer; }
.zcard.pick:hover { transform: translateX(3px); }
.zcard.sel {
  box-shadow: inset 0 0 0 2px var(--ink), 0 10px 24px -14px rgba(15, 27, 38, .5);
}
.zcard.k-full { border-left-color: var(--closure); }
.zcard.k-alternating { border-left-color: var(--hazard); }
.zcard.k-obstructed { border-left-color: var(--jam-3); }

.zcard-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.zcard .kind, .zcard .until {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.zcard .kind { background: #e7ecef; color: #3c4b57; }
.zcard.k-full .kind { background: #ffe1de; color: #b3261e; }
.zcard.k-alternating .kind { background: #fff1d6; color: #9a5b00; }
.zcard.k-obstructed .kind { background: #ffe9d6; color: #a54a00; }
.zcard .until { background: #f3f1ec; color: var(--ink-2); }
.zcard .until.today { background: #dcf6e7; color: #0d7a3f; }

.zcard h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.zcard h3 button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.zcard h3 small {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}
.zcard .ref { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.zcard .txt { margin-top: 8px; font-size: 14px; line-height: 1.45; }
.zcard .detour { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #0b6fa4; }
.zcard .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.zcard .meta a {
  margin-left: auto;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
}

.zap-map {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  height: min(660px, calc(100vh - 32px));
  overflow: hidden;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.zap-map-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 76px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.zap-map-head > div { flex: 1; min-width: 0; }
.zap-map-head h2 { font-size: 17px; letter-spacing: -.01em; }
.zap-map-head p { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.zap-map-close { display: none; }
.zap-map-body { position: relative; flex: 1; background: #f1efe9; }
.zap-map-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.zap-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  color: var(--ink-2);
  text-align: center;
}
.zap-map-empty .logo { animation: bob 2s ease-in-out infinite; }
.zap-map-foot {
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-2);
}
.zap-backdrop { display: none; }

@keyframes bob { 50% { transform: translateY(-6px); } }

/* Below 900 px the list takes the full width and the map opens as a sheet
   over it. */
@media (max-width: 899.98px) {
  .zap-body { grid-template-columns: minmax(0, 1fr); }
  .zap-map {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    height: 82vh;
    height: 82dvh;
    border-radius: 22px 22px 0 0;
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
  }
  .zap-map.open {
    visibility: visible;
    transform: none;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .zap-map-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .zap-map-close:hover { background: var(--tint); }
  .zap-map-foot { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .zap-backdrop {
    position: fixed;
    z-index: 39;
    inset: 0;
    display: block;
    background: rgba(15, 27, 38, .35);
  }
}
@media (max-width: 639.98px) {
  .zap-search { flex-basis: 100%; }
  .zcard { padding: 14px 14px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .zcard { animation-delay: 0s !important; }
  .zcard.pick:hover { transform: none; }
}

/* Shared: bigger buttons and a bit of text */

.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--tint); }
.btn-white { background: #fff; color: var(--slack); }
.btn-white:hover { background: color-mix(in srgb, #fff, var(--slack) 10%); }
.nowrap { white-space: nowrap; }

/* Za urejevalce */

.editors {
  --slack: #4a154b;
  overflow-x: clip;
}
.editors h2 {
  font-size: clamp(24px, 1.5vw + 18px, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
}
.editors .eyebrow { margin-bottom: 10px; }

.ed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding-top: 18px;
}
.ed-hero h1 { margin-bottom: 18px; }
.ed-hero .lead { margin-bottom: 26px; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ed-scene { overflow: hidden; border-radius: 24px; background: #f1efe9; }

.scene { display: block; width: 100%; height: auto; }
.scene .street { font: 400 12px var(--font); fill: #8a96a0; }
.scene .pill { font: 600 13px var(--font); fill: #fff; text-anchor: middle; }
/* The resting state, which is also all reduced motion shows: fixed. */
.scene .turn { stroke: var(--ok); animation: scene-turn 8s infinite; }
.scene .bad { opacity: 0; animation: scene-bad 8s infinite; }
.scene .good { animation: scene-good 8s infinite; }
.scene .ripple {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  animation: scene-ripple 8s infinite;
}
.scene .car { transform: translate(370px, 180px); animation: scene-car 8s linear infinite; }
.scene .cursor {
  transform: translate(460px, 60px);
  animation: scene-cursor 8s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes scene-turn {
  0%, 36% { stroke: var(--closure); }
  37%, 96% { stroke: var(--ok); }
  100% { stroke: var(--closure); }
}
@keyframes scene-bad {
  0%, 36% { opacity: 1; }
  37%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scene-good {
  0%, 36% { opacity: 0; }
  37%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes scene-ripple {
  0%, 35% { opacity: 0; transform: scale(1); }
  36% { opacity: .7; transform: scale(1.1); }
  45%, 100% { opacity: 0; transform: scale(3.4); }
}
/* Waits at the turn until it's fixed, then drives up and turns right. */
@keyframes scene-car {
  0%, 5% { transform: translate(250px, 380px); }
  30%, 42% { transform: translate(250px, 260px); }
  48% { transform: translate(250px, 200px); }
  50% { transform: translate(255px, 185px); }
  52% { transform: translate(270px, 180px); }
  82%, 100% { transform: translate(560px, 180px); }
}
@keyframes scene-cursor {
  0%, 12% { transform: translate(460px, 60px); }
  33%, 50% { transform: translate(285px, 226px); }
  70% { transform: translate(470px, 70px); }
  100% { transform: translate(460px, 60px); }
}

.ed-section { margin-top: 48px; }

.ed-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ed-step {
  padding: 22px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.ed-step:hover { transform: translateY(-4px); }
.ed-step .n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cyan);
  font-size: 18px;
  font-weight: 800;
}
.ed-step h3 { margin-bottom: 6px; font-size: 18px; font-weight: 700; }
.ed-step p { margin-bottom: 14px; font-size: 14px; color: var(--ink-2); }
.ed-step a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
}

.volunteer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  background: #fff7e0;
  border-radius: 18px;
  font-size: 15px;
}
.volunteer .smiley { display: block; flex: none; }
.volunteer b { font-weight: 600; }

.build {
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.build-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 22px;
}
.editors .build h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.build-answer { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.build-answer b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.build-src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.tl {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.tl-step { position: relative; padding-right: 20px; }
/* The line to the next step; to a running build it fills with progress. */
.tl-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 17px;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--route) var(--p, 0%), #e7ecef var(--p, 0%));
}
.tl-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border: 4px solid #cfd8de;
  border-radius: 50%;
  background: #fff;
}
.tl-dot svg { display: block; }
.tl-step.live .tl-dot { border-color: var(--ok); background: var(--ok); }
.tl-step.building .tl-dot { border-color: var(--route); }
.tl-step.building .tl-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid var(--route);
  border-radius: 50%;
  animation: ping 1.8s ease-out infinite;
}
.tl-step h3 { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.tl-step p { font-size: 13px; color: var(--ink-2); }
.tl-step .chip { margin-top: 8px; }

.ed-section .lead { margin-top: 8px; font-size: 16px; }
.ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.rung {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(190px + var(--i) * 30px);
  padding: 16px 14px;
  background: var(--card);
  border-radius: 18px 18px 6px 6px;
  box-shadow: var(--shadow);
  transition: background-color .2s, color .2s;
}
.rung:hover { background: var(--ink); color: #fff; }
.rung:hover small, .rung:hover p { color: #b9c6d1; }
.rung > b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.rung-name { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; }
.rung small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.rung p { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.rung.you { box-shadow: inset 0 0 0 3px var(--cyan), var(--shadow); }
.rung-you {
  position: absolute;
  display: inline-block;
  top: 18px;
  right: 14px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.promo { max-width: 70ch; margin-top: 14px; font-size: 14px; color: var(--ink-2); }

.ed-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}
.ed-tools li {
  padding: 6px 12px;
  background: var(--card);
  border-radius: 99px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
}

.ed-community {
  margin-top: 48px;
  padding: 34px;
  background: var(--slack);
  border-radius: 28px;
  color: #fff;
}
.ed-community .lead { margin: 8px 0 20px; color: #e9d9ea; }
.ed-community .others { margin-top: 14px; font-size: 13px; color: #d8c2da; }
.ed-community .others a { color: #fff; }

@media (max-width: 899.98px) {
  .ed-hero, .ed-steps { grid-template-columns: minmax(0, 1fr); }
  .ed-scene { max-width: 560px; }
  /* Six columns get too narrow: the steps become rows that widen. */
  .ladder { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rung {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    width: calc(76% + var(--i) * 4.8%);
    min-height: 0;
    padding: 14px 16px;
    border-radius: 6px 18px 18px 6px;
  }
  .rung p { margin-top: 6px; }
  .rung-you { position: static; margin-left: 8px; }
  .rung-name { display: inline; }
}
@media (max-width: 639.98px) {
  .ed-step { padding: 18px; }
  .volunteer { align-items: flex-start; padding: 14px 16px; }
  .volunteer .smiley { width: 32px; height: 32px; }
  .build { padding: 20px 18px; border-radius: 20px; }
  /* The timeline runs down instead of across. */
  .tl { grid-template-columns: minmax(0, 1fr); }
  .tl-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    padding: 0 0 18px;
  }
  .tl-step > :not(.tl-dot) { grid-column: 2; }
  .tl-step h3 { padding-top: 6px; }
  .tl-step .chip { justify-self: start; }
  .tl-dot { grid-row: 1 / span 3; margin: 0; }
  .tl-step:not(:last-child)::before {
    top: 17px;
    left: 15px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--route) var(--p, 0%), #e7ecef var(--p, 0%));
  }
  .rung { width: calc(70% + var(--i) * 6%); }
  .ed-community { padding: 24px 20px; border-radius: 22px; }
}

/* O skupnosti */

.prose { max-width: 68ch; padding-top: 18px; }
.prose h1 { margin-bottom: 8px; }
.prose h2 { margin: 32px 0 8px; font-size: 22px; }
.prose p, .prose ul { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose a {
  font-weight: 500;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose strong { font-weight: 600; }

/* Skripte */

.sc-first {
  margin-top: 18px;
  padding: 16px 20px;
  background: #fff7e0;
  border-radius: 18px;
  font-size: 15px;
}
.sc-first h2 { margin-bottom: 6px; font-size: 16px; }
.sc-first ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.sc-first a, .sc-source {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
}

.sc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.sc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.sc-card h2 { font-size: 18px; }
.sc-card small { font-size: 12px; color: var(--ink-2); }
.sc-card p { font-size: 14px; color: var(--ink-2); }
.sc-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--tint);
  font-size: 12px;
  font-weight: 600;
}
.sc-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 10px;
}
.sc-source { font-size: 14px; }

@media (max-width: 639.98px) {
  .sc-first { padding: 14px 16px; }
  .sc-list { grid-template-columns: minmax(0, 1fr); }
  .sc-card { padding: 18px; }
}