/* =====================================================================
   Sekmadienio kinas

   A dark room and a lit screen. Warm black, bone-white type, one yellow —
   the marquee-bulb yellow IMDb also wears — for the things that move or can
   be pressed. Display type is Anton,
   condensed and set as large as the viewport allows; Instrument Serif in
   italic carries the original titles and asides; Inter Tight does the rest.

   Motion lives in assets/schedule.js and only switches on when the script
   runs and the visitor has not asked for reduced motion — every `data-reveal`
   element is fully visible without it.
   ===================================================================== */
:root {
  --bg: #0b0b0a;
  --bg-2: #141412;
  --ink: #ece6da;
  --dim: #8d877c;
  --line: rgba(236, 230, 218, .14);
  --accent: #f5c518;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #000; }

/* film grain over everything, never in the way */
.kn-grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: knGrain .9s steps(6) infinite;
}
@keyframes knGrain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}

/* --- shared type ------------------------------------------------------ */
/* "Šį sekmadienį / rugsėjo 20 d. · 19:00" is the one line people come for,
   so it reads at a glance rather than as a caption */
.kn-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3em .1em;
  margin: 0; font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.kn-kicker-sep { color: var(--accent); margin: 0 .45em; }
.kn-hero-orig { margin: 18px 0 0; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--dim); }
.kn-hero-orig em { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.25em; margin-right: .3em; }
.kn-hero-dir { display: inline-block; margin-left: .8em; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; }

.kn-rating {
  display: inline-grid; place-items: center; min-width: 2.6em; padding: .25em .5em;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}

.kn-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: .9rem; letter-spacing: .02em;
  position: relative; overflow: hidden; isolation: isolate;
}
.kn-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.kn-btn:hover::before { transform: translateY(0); }
.kn-btn-arrow { transition: transform .6s var(--ease); }
.kn-btn:hover .kn-btn-arrow { transform: translateX(5px); }

.kn-edit {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); border: 1px dashed var(--line); border-radius: 999px; padding: 5px 11px;
}
.kn-edit:hover { color: var(--accent); border-color: var(--accent); }

/* --- hero: the billboard ------------------------------------------------
   Three layers. At the back, the media: the poster blurred into light, and
   over it the trailer, full-bleed, once it is playing. In the middle, the
   shade — dark rising from the bottom and in from the left, where the words
   are, and a little from the top, where the tape is. In front, the words. */
.kn-hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: calc(clamp(104px, 12vw, 168px) + clamp(12px, 3vh, 40px)) var(--gut) clamp(48px, 9vh, 110px);
}
.kn-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.kn-hero-media .kn-vid { transition: opacity 1.6s var(--ease); }
/* the poster, blown up and blurred, as the light in the room */
.kn-hero-bg {
  position: absolute; inset: -10%; z-index: 0;
  background: center/cover no-repeat;
  filter: blur(60px) saturate(1.2) brightness(.45);
  transform: scale(1.1);
}
.kn-film .kn-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 40%, transparent 0%, var(--bg) 75%), linear-gradient(to top, var(--bg) 5%, transparent 60%);
}
.kn-hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(11, 11, 10, .85) 14%, rgba(11, 11, 10, 0) 52%),
    linear-gradient(to right, rgba(11, 11, 10, .88) 0%, rgba(11, 11, 10, .55) 34%, rgba(11, 11, 10, 0) 68%),
    linear-gradient(to bottom, rgba(11, 11, 10, .7) 0%, rgba(11, 11, 10, 0) 26%);
}
.kn-hero-in { position: relative; z-index: 2; width: min(100%, 60rem); }

/* The gap to the date line above looks smaller than it is: the mask each
   line rises out of reaches .16em above the caps and is pulled back up by
   the same amount, which eats into the space at this size. */
.kn-hero-title {
  margin: clamp(26px, 3.4vh, 46px) 0 0;
  font: 400 clamp(3.6rem, 10vw, 11rem)/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 10px 60px rgba(0, 0, 0, .45);
}
.kn-hero-text {
  margin: 18px 0 0; max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; color: rgba(236, 230, 218, .88);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}
.kn-hero-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px clamp(24px, 4vw, 56px);
  margin-top: clamp(24px, 4vh, 44px);
}

.kn-count { display: grid; gap: 6px; }
.kn-count-lab { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kn-count-val { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.kn-count-val b { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--display); }
.kn-count-val i { font-family: var(--serif); font-size: 1.1rem; color: var(--dim); margin-right: 12px; }
.kn-count.is-now .kn-count-val { color: var(--accent); }

/* right edge: the mute toggle, then the age rating on a flag that runs off
   the side of the screen */
.kn-hero-side {
  position: absolute; right: 0; bottom: clamp(56px, 11vh, 130px); z-index: 2;
  display: flex; align-items: center; gap: 14px;
}
.kn-mute {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(236, 230, 218, .6); background: rgba(11, 11, 10, .25); color: var(--ink);
  cursor: pointer; backdrop-filter: blur(4px);
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s var(--ease);
}
.kn-mute:hover { border-color: var(--accent); background: var(--accent); color: #0b0b0a; transform: scale(1.06); }
.kn-mute[hidden] { display: none; }
.kn-mute .kn-mute-on { display: none; }
.kn-mute[aria-pressed="true"] .kn-mute-on { display: block; }
.kn-mute[aria-pressed="true"] .kn-mute-off { display: none; }
.kn-mute:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kn-hero-flag {
  display: flex; align-items: center; min-width: 7.5rem; height: 40px; padding: 0 var(--gut) 0 14px;
  border-left: 3px solid var(--ink); background: rgba(40, 40, 38, .6); backdrop-filter: blur(6px);
  font-size: .95rem; font-weight: 600; letter-spacing: .04em;
}

/* --- the header: two crossed tapes -----------------------------------
   `--p` runs 0 → 1 over the first stretch of scroll (set by the script) and
   every size and angle below is drawn between its two ends: tilted and loud
   at the top of the page, straight and slim once you are reading. Without
   the script `--p` stays 0 and the tapes simply scroll away with the page. */
.kn-tape {
  --p: 0;
  --big: clamp(104px, 12vw, 168px);
  --fs: clamp(1.5rem, 3.4vw, 2.8rem);
  position: absolute; top: 0; left: 0; z-index: 60; width: 100%;
  height: calc(var(--big) * (1 - var(--p)) + 38px * var(--p));
  overflow: hidden; pointer-events: none;
}
.js-motion .kn-tape { position: fixed; }
.admin-bar .kn-tape { top: 32px; }
@media (max-width: 782px) { .admin-bar .kn-tape { top: 46px; } }

.kn-tape-front, .kn-tape-back {
  position: absolute; left: -6%; right: -6%; top: 50%;
  display: block; overflow: hidden; white-space: nowrap;
  font: 400 calc(var(--fs) * (1 - var(--p)) + .92rem * var(--p))/1 var(--display);
  text-transform: uppercase;
}
.kn-tape-front {
  z-index: 2; pointer-events: auto;
  background: var(--accent); color: #0b0b0a;
  padding-block: calc(15px * (1 - var(--p)) + 10px * var(--p));
  transform: translateY(-50%) rotate(calc(-2.2deg * (1 - var(--p))));
  box-shadow: 0 calc(18px * var(--p)) 40px -24px rgba(0, 0, 0, .9);
}
.kn-tape-back {
  z-index: 1;
  background: #1a1916; color: transparent; -webkit-text-stroke: 1px rgba(245, 197, 24, .75);
  padding-block: 13px;
  transform: translateY(-50%) rotate(calc(2.8deg * (1 - var(--p)))) scaleY(calc(1 - var(--p)));
  opacity: calc(1 - var(--p) * 1.6);
}
.kn-tape-track {
  display: inline-flex; align-items: center; gap: .9em; will-change: transform;
  animation: knTape 36s linear infinite;
}
.kn-tape-back .kn-tape-track { animation-direction: reverse; animation-duration: 48s; }
.js-motion .kn-tape-track { animation: none; }
.kn-tape-track em { font-family: var(--serif); font-style: italic; text-transform: none; font-size: 1.15em; letter-spacing: 0; }
.kn-tape-back .kn-tape-track em { -webkit-text-stroke: 0; color: rgba(245, 197, 24, .75); }
.kn-star { font-size: .55em; }
@keyframes knTape { to { transform: translateX(-25%); } }
.kn-tape-front:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.kn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- section heads ---------------------------------------------------- */
.kn-prog { scroll-margin-top: 30px; padding: clamp(70px, 12vh, 150px) var(--gut) clamp(60px, 10vh, 120px); }
.kn-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px;
  padding-bottom: clamp(18px, 3vh, 34px); border-bottom: 1px solid var(--ink);
}
.kn-sec-title { margin: 0; font: 400 clamp(3rem, 10vw, 10rem)/.85 var(--display); text-transform: uppercase; }
.kn-sec-note { margin: 0 0 .6em; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--dim); }

/* --- the programme rows ----------------------------------------------- */
.kn-rows { list-style: none; margin: 0; padding: 0; }
.kn-row { position: relative; border-bottom: 1px solid var(--line); }
.kn-row-link, .kn-row.is-empty {
  display: grid; align-items: center; gap: clamp(12px, 2.4vw, 40px);
  grid-template-columns: 3ch 5.5rem minmax(0, 1fr) auto;
  padding: clamp(18px, 3.2vh, 34px) 0;
  position: relative; isolation: isolate;
}
/* a wash of yellow rises through the row */
.kn-row-link::before {
  content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); z-index: -1; background: var(--accent);
  transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease);
}
.kn-row-link:hover::before, .kn-row-link:focus-visible::before { transform: scaleY(1); }
.kn-row-link:hover, .kn-row-link:focus-visible { color: #0b0b0a; outline: none; }
.kn-row-link:hover .kn-row-sub, .kn-row-link:hover .kn-row-date span { color: rgba(11, 11, 10, .7); }

.kn-row-n { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--dim); }
.kn-row-link:hover .kn-row-n { color: #0b0b0a; }
.kn-row-date { display: grid; line-height: 1; }
.kn-row-date b { font: 400 clamp(2.4rem, 4.4vw, 3.8rem)/.9 var(--display); }
.kn-row-date span { margin-top: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.kn-row-main { min-width: 0; display: grid; gap: 8px; }
.kn-row-title {
  font: 400 clamp(1.9rem, 5.2vw, 5.2rem)/.92 var(--display); text-transform: uppercase;
  transition: transform .8s var(--ease), letter-spacing .8s var(--ease);
}
.kn-row-link:hover .kn-row-title { transform: translateX(clamp(8px, 1.4vw, 22px)); }
.kn-row-sub { font-size: .92rem; color: var(--dim); }
.kn-row-sub em { font-family: var(--serif); font-size: 1.2em; color: inherit; margin-right: .5em; }
.kn-row-link .kn-row-sub em { color: var(--ink); }
.kn-row-link:hover .kn-row-sub em { color: #0b0b0a; }

.kn-row-end { display: flex; align-items: center; gap: 18px; }
.kn-row-time { font: 400 clamp(1.4rem, 2.4vw, 2.2rem)/1 var(--display); }
.kn-row.is-empty .kn-row-title { color: transparent; -webkit-text-stroke: 1px rgba(236, 230, 218, .35); }
.kn-row.is-empty .kn-row-date b, .kn-row.is-empty .kn-row-time { color: var(--dim); }
.kn-row-poster-m { display: none; }
.kn-row > .kn-edit { position: absolute; right: 0; top: 10px; z-index: 2; }


/* the floating poster */
.kn-float {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(180px, 16vw, 260px); aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
  opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
}
.kn-float img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (max-width: 900px) { .kn-float { display: none; } }

/* --- single film ------------------------------------------------------ */
.kn-film { position: relative; overflow: hidden; min-height: 100svh; }
.kn-film-in { position: relative; z-index: 1; padding: calc(clamp(104px, 12vw, 168px) + 12px) var(--gut) clamp(60px, 10vh, 120px); }
/* the way back is the only navigation on a film page, so it is worth seeing */
.kn-back {
  display: inline-flex; align-items: center; gap: .55em;
  margin-bottom: clamp(28px, 4vh, 46px);
  font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.kn-back::before {
  content: "←"; display: inline-block; font-size: 1.15em; line-height: 1;
  transition: transform .5s var(--ease);
}
.kn-back:hover { color: var(--accent); }
.kn-back:hover::before { transform: translateX(-5px); }
.kn-film-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.kn-film-poster {
  position: sticky; top: 64px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--line);
}
.kn-film-poster img { width: 100%; height: 100%; object-fit: cover; }
.kn-film-title { margin: clamp(22px, 2.8vh, 36px) 0 0; font: 400 clamp(3rem, 9vw, 9rem)/.86 var(--display); text-transform: uppercase; }
.kn-film-text { margin-top: 30px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6; max-width: 56ch; }
.kn-film-text p:first-child { margin-top: 0; }
.kn-facts { margin: 40px 0 0; border-top: 1px solid var(--line); }
.kn-facts div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kn-facts dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: .3em; }
.kn-facts dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; }
.kn-film-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 28px; margin-top: 40px; }

/* --- motion hooks ----------------------------------------------------- */
/* The mask a line rises out of. Uppercase Lithuanian carries marks above the
   cap height — the caron on Š, the dot on Ė — and at a .86 line height a
   mask the size of the line box shaves them off, so it reaches up past it. */
.kn-split-line { display: block; overflow: hidden; padding: .16em 0 .04em; margin: -.16em 0 -.04em; }
.kn-split-inner { display: inline-block; will-change: transform; }
.js-motion [data-reveal] { opacity: 0; transform: translateY(40px); }
/* held back until the script has cut it into lines */
.js-motion [data-split] { visibility: hidden; }

/* --- tablets and phones ----------------------------------------------- */
@media (max-width: 900px) {
  .kn-hero { min-height: 92svh; }
  .kn-hero-bg { filter: blur(40px) saturate(1.2) brightness(.4); }
  /* on a narrow screen the words take the whole width, so the shade rises
     higher instead of reaching in from the side */
  .kn-hero-shade {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(11, 11, 10, .9) 30%, rgba(11, 11, 10, .2) 68%, rgba(11, 11, 10, 0) 80%),
      linear-gradient(to bottom, rgba(11, 11, 10, .7) 0%, rgba(11, 11, 10, 0) 24%);
  }
  .kn-hero-side { top: calc(clamp(104px, 12vw, 168px) + 8px); bottom: auto; }
  .kn-hero-text { display: none; }
  .kn-film-grid { grid-template-columns: 1fr; }
  .kn-film-poster { position: relative; top: 0; width: min(70vw, 320px); }
}
@media (max-width: 640px) {
  .kn-row-link, .kn-row.is-empty { grid-template-columns: 3.2rem minmax(0, 1fr) 64px; grid-template-areas: "date main poster" "date end poster"; row-gap: 8px; }
  .kn-row-n { display: none; }
  .kn-row-date { grid-area: date; align-self: start; }
  .kn-row-main { grid-area: main; }
  .kn-row-end { grid-area: end; gap: 12px; }
  .kn-row-poster-m { display: block; grid-area: poster; align-self: start; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; }
  .kn-row-poster-m img { width: 100%; height: 100%; object-fit: cover; }
  .kn-row-time { font-size: 1.2rem; }
  .kn-facts div { grid-template-columns: 1fr; gap: 2px; }
  .kn-count-val i { margin-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-grain, .kn-tape-track { animation: none; }
}

/* --- the trailer inside a poster ---------------------------------------
   The picture underneath is the fallback and the loading state; the video
   fades in over it once it is actually playing. Nothing on it can be
   clicked except the sound button — the poster's own link still works. */
/* (.kn-float is position: fixed, which already contains the video) */
.kn-film-poster { position: relative; }
.kn-vid {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  opacity: 0; transition: opacity .8s var(--ease);
  background: #000;
}
.kn-vid.is-on { opacity: 1; }
.kn-vid iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* a touch of the room's grade over the footage, so it sits with the page */
.kn-vid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 10, .55), transparent 40%);
}

.kn-sound {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(6px);
  font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.kn-sound:hover { background: var(--accent); border-color: var(--accent); color: #0b0b0a; }
.kn-sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.kn-sound-bars i { width: 2px; height: 3px; background: currentColor; }
.kn-sound[aria-pressed="true"] .kn-sound-bars i { animation: knBars .9s ease-in-out infinite; }
.kn-sound[aria-pressed="true"] .kn-sound-bars i:nth-child(2) { animation-delay: .15s; }
.kn-sound[aria-pressed="true"] .kn-sound-bars i:nth-child(3) { animation-delay: .3s; }
@keyframes knBars { 0%, 100% { height: 3px; } 50% { height: 10px; } }

/* --- IMDb ------------------------------------------------------------------
   Their own mark, near enough: black letters on the yellow, squared off. */
.kn-imdb {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px 0 0; height: 44px; border-radius: 6px; overflow: hidden;
  background: rgba(11, 11, 10, .45); border: 1px solid rgba(236, 230, 218, .28); color: var(--ink);
  font-weight: 600; font-size: .85rem; backdrop-filter: blur(4px);
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
}
.kn-imdb b {
  display: grid; place-items: center; height: 100%; padding: 0 9px;
  background: var(--accent); color: #000;
  font: 900 1rem/1 "Arial Black", "Inter Tight", sans-serif; letter-spacing: -.03em;
}
.kn-imdb:hover { border-color: var(--accent); background: rgba(245, 197, 24, .12); transform: translateY(-2px); }
.kn-imdb-arrow { font-size: .9em; opacity: .7; }
.kn-facts dd a { border-bottom: 1px solid var(--line); }
.kn-facts dd a:hover { color: var(--accent); border-color: var(--accent); }