/* www.reneshideout.com — one stylesheet for the page and its three subpages. */
:root {
  --ink: #0d1411;
  --ink-2: #131c17;
  --panel: #1a2620;
  --line: #2a3a31;
  --text: #e9ede6;
  --mute: #9cab9f;
  --dim: #6d7d71;
  --ribbon: #7d90ff;
  --moss: #8dbb7a;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 6vw, 96px);
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--ink);
  font-family: var(--body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 7vw, 6.2rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
p { margin: 0; max-width: 60ch; }
a { color: var(--ribbon); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ribbon); outline-offset: 3px; }
.eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 44ch; }
.muted { color: var(--mute); }

/* ---- top bar: the whole menu, on every page, staying in view ---- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  padding: 14px var(--gutter);
  background: rgba(13, 20, 17, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.top .mark { color: var(--text); font-weight: 500; }
.top .mark:hover { text-decoration: none; }
.top nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.top nav a { color: var(--text); opacity: 0.92; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ribbon); opacity: 1; text-decoration: none; }
/* Too narrow for the whole menu on one line (site.js measures it): a burger
   at the right opens it as a list under the bar. */
.top .burger { display: none; width: 40px; height: 40px; padding: 0; place-items: center; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--text); cursor: pointer; }
.top .burger span, .top .burger span::before, .top .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s, background 0.2s; }
.top .burger span { position: relative; }
.top .burger span::before, .top .burger span::after { content: ""; position: absolute; left: 0; }
.top .burger span::before { top: -6px; }
.top .burger span::after { top: 6px; }
.top.open .burger span { background: transparent; }
.top.open .burger span::before { transform: translateY(6px) rotate(45deg); }
.top.open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
.top.narrow { flex-wrap: nowrap; }
.top.narrow .burger { display: grid; }
.top.narrow nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 6px var(--gutter) 14px; background: rgba(13, 20, 17, 0.97); border-bottom: 1px solid var(--line); }
.top.narrow.open nav { display: flex; }
.top.narrow nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.top.narrow nav a:last-child { border-bottom: 0; }

/* ---- a file dragged over the page: where it goes (site.js) ---- */
.drophint {
  position: fixed; inset: 12px; z-index: 100; display: none; place-items: center; padding: 24px; pointer-events: none;
  border: 2px dashed var(--ribbon); border-radius: 8px; background: rgba(13,20,17,0.72);
  font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--text);
}
.drophint.on { display: grid; }

/* ---- buttons ---- */
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--ribbon); border-radius: 4px; color: var(--text); background: rgba(13,20,17,0.35); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.cta:hover { background: rgba(125,144,255,0.16); text-decoration: none; }
.cta.quiet { border-color: rgba(233,237,230,0.35); }
.sound, .cta.icon { font: inherit; padding: 11px; }
.sound svg, .cta.icon svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* An icon button's words, beside it while a pointer rests on it. */
.cta.icon { position: relative; }
.cta.icon[data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; color: var(--text); font-size: 0.78rem; letter-spacing: 0.08em;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.cta.icon[data-tip]:hover::after, .cta.icon[data-tip]:focus-visible::after { opacity: 1; }
.sound[aria-pressed="true"] { border-color: var(--moss); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- full-bleed film: the hero and the three scenes ---- */
.bleed { position: relative; min-height: calc(100svh - 52px); display: grid; align-content: end; overflow: hidden; background: var(--ink-2); }
.bleed.scene { min-height: 88svh; }
.bleed video, .bleed img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,20,17,0.35) 0%, rgba(13,20,17,0) 30%); }
/* No shade under the hero's words: a shadow on the letters carries them over the film instead. */
.bleed:not(.scene) .over { text-shadow: 0 1px 3px rgba(13,20,17,0.75), 0 0 28px rgba(13,20,17,0.55); }
.bleed.scene .shade { background: linear-gradient(180deg, rgba(13,20,17,0.5) 0%, rgba(13,20,17,0) 18%, rgba(13,20,17,0) 82%, rgba(13,20,17,0.5) 100%); }
.bleed .over { position: relative; z-index: 2; display: grid; gap: 18px; padding: clamp(40px, 8vh, 88px) var(--gutter); }
/* The hero's headline is a quote: smaller than a slogan, its author under it. */
.motto { margin: 0; display: grid; gap: 12px; }
.motto h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); max-width: 22ch; letter-spacing: -0.02em; }
.motto figcaption { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); opacity: 0.85; }
.motto figcaption::before { content: "\2014\2002"; }
.bleed .sound.corner { position: absolute; right: var(--gutter); bottom: clamp(18px, 4vh, 40px); z-index: 3; }


/* ---- the strengths, a rule between each part ---- */
.rule { border: 0; border-top: 1px solid var(--line); margin: clamp(10px, 1.8vh, 22px) var(--gutter) clamp(8px, 2vh, 24px); }
/* The blocks keep their own padding below them; under the hero the gap stays full. */
.bleed + .rule { margin-top: clamp(56px, 10vh, 120px); }
/* Under each rule, a quote for the part below it; more than one take turns
   in the same place, which is as tall as the longest, so nothing below moves. */
.quotes { display: grid; padding: clamp(16px, 3vh, 36px) var(--gutter) 0; }
.quotes figure {
  grid-area: 1 / 1; margin: 0; display: grid; gap: 10px; align-content: start;
  opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.quotes figure.on { opacity: 1; visibility: visible; transition: opacity 0.8s ease, visibility 0s; }
.quotes blockquote { margin: 0; max-width: 46ch; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1.25; text-wrap: balance; }
.quotes figcaption { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.quotes figcaption::before { content: "\2014\2002"; }
.band {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 4vw, 64px);
  align-items: center; padding: clamp(28px, 6vh, 64px) var(--gutter);
}
.band.flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.band.flip .media { order: 2; }
.band .words { display: grid; gap: 12px; }
.band .words p { color: var(--mute); }
.media { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); }
.media video, .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.statement { padding: clamp(64px, 12vh, 140px) var(--gutter); display: grid; gap: 20px; justify-items: start; }
.statement h2 { max-width: 20ch; }

/* ---- carousels: one feature at a time, each for one cycle, dots to pick ---- */
.carousel { padding: clamp(20px, 4vh, 48px) var(--gutter) clamp(28px, 6vh, 64px); }
.carousel .slides { display: grid; }
.carousel .slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 4vw, 64px); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.carousel .slide.on { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.carousel .words { display: grid; gap: 12px; align-content: center; }
.carousel .words p { color: var(--mute); }
.dots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.dots button {
  width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); transition: background 0.2s, transform 0.2s; }
.dots button[aria-selected="true"]::before { background: var(--ribbon); transform: scale(1.25); }
.dots button:hover::before { background: var(--text); }
/* A swipe across the films picks the next or previous (site.js); the page
   still scrolls and zooms under a finger. */
.carousel .slides { touch-action: pan-y pinch-zoom; }
/* Narrow only (site.js moves the words there): every title stacked above the
   films, every rest of the words under the dots, the one showing lit. */
.carousel .heads, .carousel .subs { display: none; }

/* A listed carousel: on a wide screen every title stacked beside the film,
   the one showing lit with its line under it; narrow, the slide's own words. */
.carousel.listed { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(20px, 4vw, 64px); align-items: center; }
.carousel.listed .slides { grid-column: 1; grid-row: 1; }
.carousel.listed .dots, .carousel.listed .dotrow { grid-column: 1; grid-row: 2; }
/* A carousel's sound button ends its row of dots; a scene with a place in
   the viewer opens it on a press. */
.dotrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.dotrow .dots { margin-top: 0; }
.slide[data-view] .media { cursor: pointer; }
.carousel.listed .slide { grid-template-columns: minmax(0, 1fr); }
.carousel.listed .slide .words { display: none; }
.toc { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6vh, 18px); }
.toc h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.15rem, 1.7vw, 1.7rem); }
.toc h3 button { font: inherit; letter-spacing: inherit; color: var(--dim); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; transition: color 0.3s; }
.toc h3 button:hover { color: var(--mute); }
.toc li.on h3 button { color: var(--text); }
.toc p { color: var(--mute); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease; }
.toc li.on p { max-height: 8em; opacity: 1; margin-top: 6px; }
.toc .eye { opacity: 0.45; }
.toc li.on .eye { opacity: 1; }

/* ---- the eye: open the scene's place in the viewer ---- */
.eye { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; vertical-align: middle; color: var(--ribbon); border-radius: 50%; }
.eye svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.eye:hover { background: rgba(125,144,255,0.16); text-decoration: none; }
h2 .eye { font-size: 0.7em; }
.eye.big { width: 52px; height: 52px; border: 1px solid rgba(233,237,230,0.35); }
.eye.big svg { width: 26px; height: 26px; }
.share { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.share .qr { width: 132px; height: 132px; border-radius: 4px; display: block; }

/* ---- the instruments: switched on one by one, named underneath ---- */
.cues { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.cues button { display: inline-flex; align-items: center; gap: 9px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; transition: color 0.3s; }
.cues button:hover { color: var(--mute); }
.cues .check { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 3px; display: grid; place-items: center; }
.cues .check::after { content: ""; width: 7px; height: 4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); opacity: 0; transition: opacity 0.2s; }
.cues li.lit button { color: var(--text); }
.cues li.lit .check::after { opacity: 1; }
.cues li.now button { color: var(--ribbon); }

/* ---- the 3D box: the exported model, turned and zoomed by hand ---- */
.media.model { cursor: grab; touch-action: none; }
.media.model:active { cursor: grabbing; }
.media.model canvas { display: block; width: 100%; height: 100%; }
.media.model .hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); pointer-events: none; }

/* ---- YouTube films ---- */
/* The player never sees the pointer: no title bar on hover, no pause and so
   no "More videos"; prev/next are the only controls. The slate covers the
   player from each load until YouTube's start-up chrome (title, pause
   button, logo) has faded, then dissolves. */
.media.films iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.media.films .slate { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 10px; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at center, var(--panel) 0%, var(--ink-2) 70%); pointer-events: none; transition: opacity 0.7s ease; }
.media.films .slate.off { opacity: 0; }
.filmnav { display: flex; gap: 18px; }
.filmnav button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--mute); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.filmnav button:hover { color: var(--text); }

/* ---- the coverage page: the viewer's map framed under the bar ---- */
body.framed-page { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
body.framed-page main { flex: 1; display: flex; min-height: 0; }
iframe.coverage { flex: 1; width: 100%; border: 0; display: block; background: #1a1d21; }

/* ---- the end of the page ---- */
.closing { padding: clamp(72px, 14vh, 160px) var(--gutter); display: grid; gap: 22px; justify-items: start; border-top: 1px solid var(--line); }
.contact { padding: clamp(56px, 10vh, 120px) var(--gutter); display: grid; gap: 18px; background: var(--panel); border-top: 1px solid var(--line); }
.contact .who { font-family: var(--mono); font-size: 0.85rem; line-height: 1.9; color: var(--mute); }
.contact .who a { color: var(--text); }
footer { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px var(--gutter); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--mute); }

/* ---- subpages ---- */
.doc { padding: clamp(48px, 9vh, 110px) var(--gutter); display: grid; gap: clamp(28px, 5vh, 56px); }
.doc .head { display: grid; gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; align-content: start; }
.card .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ribbon); text-transform: uppercase; }
.card p, .card li { color: var(--mute); font-size: 0.95em; }
.card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.card .names { font-size: 0.92em; color: var(--mute); line-height: 1.6; }
.pair { display: grid; gap: 8px; }
/* Before and after in one picture: René's Routes left of the handle, the drape right of it. */
/* As wide as the main page's films: the 7 of a 7 : 4 band, full width where the bands stack. */
.wipe { width: calc((100% - clamp(20px, 4vw, 64px)) * 7 / 11); margin-inline: auto; }
@media (max-width: 860px) { .wipe { width: 100%; } }
.wipe { --x: 50%; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wipe img { position: absolute; inset: 0; pointer-events: none; }
.wipe .after { clip-path: inset(0 0 0 var(--x)); }
.wipe .handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--text); box-shadow: 0 0 6px rgba(13,20,17,0.6); }
.wipe .handle::after {
  content: "\2039\2002\203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13,20,17,0.7); border: 2px solid var(--text); color: var(--text); font-size: 1.1rem; line-height: 1;
}
.wipe:focus-visible { outline: 2px solid var(--ribbon); outline-offset: 3px; }
.wipe .tag { position: absolute; top: 12px; padding: 5px 9px; border-radius: 3px; background: rgba(13,20,17,0.6); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); pointer-events: none; }
.wipe .tag.left { left: 12px; }
.wipe .tag.right { right: 12px; }
.pair .cap { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.9em; }
th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); background: var(--ink-2); }
th.us, td.us { background: rgba(125,144,255,0.08); }
td.us { color: var(--text); font-weight: 500; }
td.no { color: var(--dim); }
tbody tr:last-child td { border-bottom: 0; }
.note { font-size: 0.85em; color: var(--dim); max-width: 80ch; }

@media (max-width: 860px) {
  .band, .band.flip, .carousel .slide { grid-template-columns: 1fr; }
  .carousel.listed { display: block; }
  .toc, .share .qr { display: none; }
  /* Narrow: the title (and its eye) above the video, then the dots, then
     the rest of the words. Titles and rests each take turns in one place as
     tall as the longest, the title down against the video, so the video and
     the dots never move. */
  .carousel .slide { gap: 14px; }
  .carousel .slide .words, .carousel.listed .slide .words { display: contents; }
  .carousel .heads, .carousel .subs { display: grid; }
  .carousel .heads { align-items: end; margin-bottom: 14px; }
  .carousel .subs { margin-top: 12px; }
  .carousel .heads > div, .carousel .subs > div {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  }
  .carousel .heads > .on, .carousel .subs > .on { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
  .carousel .subs > div { display: grid; gap: 12px; align-content: start; }
  .carousel .subs p { color: var(--mute); }
  .dots, .dotrow { margin-top: 2px; }
  .band .words { order: -1; }
  .band.flip .media { order: 0; }
  .grid3 { grid-template-columns: 1fr; }
  .bleed.scene { min-height: 62svh; }
}
@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .top { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .quotes figure, .quotes figure.on { transition: none; }
}

/* ---- /scenes and /trails: a picture per place, by country ---- */
.pick-group { display: grid; gap: 14px; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px 18px; }
.picks li { display: grid; align-content: start; position: relative; }
.pick { display: grid; gap: 10px; color: var(--text); }
.pick:hover, .pick:focus-visible { text-decoration: none; }
.pick .media { display: block; transition: border-color 0.2s; }
.pick:hover .media, .pick:focus-visible .media { border-color: var(--ribbon); }
.pick .media img { transition: transform 0.4s ease; }
.pick:hover .media img { transform: scale(1.03); }
.pick .words { display: grid; gap: 4px; }
.pick:hover h3 { color: var(--ribbon); }
.pick .what { color: var(--mute); font-size: 0.92em; }
.pick .km { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
/* The trail's source, in the corner of its map. */
.picks .src { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 3px; background: rgba(13,20,17,0.78); color: var(--text); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.picks .src:hover { color: var(--ribbon); text-decoration: none; }
.credit { color: var(--dim); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .pick .media img { transition: none; } .pick:hover .media img { transform: none; } }