/* dzmer.uk — off-season city breaks from the UK
   The palette is a watermelon, because dzmeruk is Armenian for one: red flesh,
   white pith, green rind, dark seeds. Red stays reserved for money and for the
   off-season signal; it is never decoration. Green is structural only — the
   rind under the hero and the rule above the footer — so the page keeps its
   black-and-white severity and the red keeps its job. */

:root {
  --red:    #d81f26;   /* flesh */
  --red-dk: #a81319;
  --green:  #1b7a3e;   /* rind  */
  --seed:   #121212;
  --black:  #000000;
  --white:  #ffffff;
  --grey:   #f0f0f0;
  --rule:   #000000;
  --mute:   #5a5a5a;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);
  --step-4:  clamp(2.9rem, 1.9rem + 4.6vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
}

h1, h2, h3, .display {
  font-family: 'Archivo', system-ui, sans-serif;
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 110, 'wght' 700;
}

a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--red); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose h2 {
  font-size: var(--step-2);
  margin: 2.6em 0 0.5em;
  padding-top: 0.35em;
  border-top: 3px solid var(--black);
}
.prose h3 { font-size: var(--step-1); margin: 1.9em 0 0.3em; font-variation-settings: 'wdth' 100, 'wght' 600; }
.prose ul { padding-left: 1.05em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose strong { font-weight: 700; }
.money { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- masthead ---- */

.masthead { border-bottom: 4px solid var(--black); }
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-block: 0.9rem;
}
.wordmark {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 115, 'wght' 800;
  font-size: var(--step-2);
  letter-spacing: -0.05em;
  text-decoration: none;
  line-height: 1;
}
.wordmark i { font-style: normal; color: var(--red); }
.masthead p { margin: 0; font-size: var(--step--1); color: var(--mute); }

/* ---- hero: one red block ---- */

.hero {
  background: var(--red);
  color: var(--white);
  padding: clamp(2.5rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 54rem) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 {
  font-size: var(--step-4);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  letter-spacing: -0.042em;
  max-width: 14ch;
}
.hero-note { margin: 0; font-size: var(--step-0); line-height: 1.45; max-width: 32ch; }
.hero-note b { font-weight: 700; }

/* ---- the list ---- */

.list { border-bottom: 4px solid var(--black); }
.list-key {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--black);
  font-family: 'Archivo', sans-serif;
  font-size: var(--step--1);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  color: var(--mute);
}
.list-key span:last-child { text-align: right; }
@media (max-width: 54rem) { .list-key { display: none; } }

.row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding-block: clamp(0.9rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--black);
  text-decoration: none;
  color: inherit;
}
.row:last-child { border-bottom: 0; }
a.row:hover { background: var(--black); color: var(--white); }
a.row:hover .price { color: var(--white); }
a.row:hover .sub { color: #bdbdbd; }

.row .name {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: var(--step-3);
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.row .sub { display: block; font-family: 'Newsreader', serif; font-size: var(--step--1); font-weight: 400; color: var(--mute); letter-spacing: 0; margin-top: 0.25rem; }
.row .meta { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.row .price {
  text-align: right;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 105, 'wght' 700;
  font-size: var(--step-1);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.row .price.soon { color: var(--mute); font-variation-settings: 'wdth' 100, 'wght' 400; font-family: 'Newsreader', serif; font-style: italic; font-size: var(--step--1); }

@media (max-width: 54rem) {
  .row { grid-template-columns: 1fr auto; }
  .row .name { grid-column: 1; }
  .row .price { grid-column: 2; grid-row: 1; }
  .row .meta { grid-column: 1 / -1; color: var(--mute); }
  .row .meta + .meta::before,
  .row .meta ~ .meta::before { content: ''; }
}

/* ---- argument strip ---- */

.argument {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-bottom: 4px solid var(--black);
}
.argument > div { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem) 0; }
.argument > div + div { border-left: 1px solid var(--black); padding-left: clamp(1rem, 3vw, 2rem); }
.argument h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.argument p { margin: 0; font-size: var(--step--1); color: var(--mute); }

/* ---- destination page ---- */

.dest-head { padding-block: clamp(2rem, 6vw, 4rem) 1.2rem; }
.dest-head h1 { font-size: var(--step-4); font-variation-settings: 'wdth' 112, 'wght' 800; max-width: 16ch; }
.dest-head .lede { margin: 1.2rem 0 0; font-size: var(--step-1); line-height: 1.45; max-width: 48ch; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
  margin-bottom: 2.5rem;
}
.facts div { padding: 0.9rem 1rem 0.9rem 0; }
.facts div + div { border-left: 1px solid var(--black); padding-left: 1rem; }
.facts dt { margin: 0 0 0.2rem; font-family: 'Archivo', sans-serif; font-size: var(--step--1); font-variation-settings: 'wdth' 100, 'wght' 500; color: var(--mute); }
.facts dd { margin: 0; font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 105, 'wght' 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.facts dd.red { color: var(--red); }

/* ---- planner ---- */

.planner {
  background: var(--black);
  color: var(--white);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  margin-block: 3rem;
  max-width: var(--measure);
}
.planner h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.planner p { margin: 0 0 1.2rem; font-size: var(--step--1); color: #c9c9c9; }
.planner a.go {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 105, 'wght' 700;
  padding: 0.65rem 1.2rem;
  text-decoration: none;
}
.planner a.go:hover { background: var(--white); color: var(--black); }

/* ---- booking ---- */

.book { border: 3px solid var(--black); padding: clamp(1.2rem, 3vw, 1.8rem); max-width: var(--measure); margin-block: 2.5rem; }
.book h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.book ul { list-style: none; padding: 0; margin: 0; }
.book li { padding-block: 0.6rem; border-bottom: 1px solid var(--black); font-size: var(--step--1); }
.book li:last-child { border-bottom: 0; }
.book li a { font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 100, 'wght' 600; color: var(--red); }
.book .note { margin: 1rem 0 0; font-size: var(--step--1); color: var(--mute); }

footer { border-top: 4px solid var(--black); padding-block: 2rem 3rem; font-size: var(--step--1); color: var(--mute); }
footer p { margin: 0 0 0.5rem; max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- city tiles ----
   The grid keeps the ruled-paper feel of the old table: every tile carries its
   own right and bottom hairline, so the whole block reads as one ruled sheet.
   Skylines are stroke-only line art inheriting currentColor, which is what lets
   them invert cleanly when a tile goes black. Red stays reserved for money. */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
  border-bottom: 4px solid var(--black);
}

.tile {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.tile:hover { background: var(--black); color: var(--white); }
.tile:hover .sub,
.tile:hover .tile-meta { color: #bdbdbd; }
.tile:hover .price { color: var(--white); }

.tile-art { display: block; margin-bottom: 0.85rem; }
.tile-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 200;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .tile:hover .tile-art svg { transform: translateY(-4px); }
}

.tile-name {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.tile-name .sub {
  display: block;
  font-family: 'Newsreader', serif;
  font-size: var(--step--1);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: 0;
  color: var(--mute);
  margin-top: 0.3rem;
  transition: color 0.25s ease;
}

.tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.6rem;
  margin-top: 0.9rem;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  transition: color 0.25s ease;
}
.tile-meta span + span::before { content: '·'; margin-right: 0.6rem; }

.tile .price {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 105, 'wght' 700;
  font-size: var(--step-1);
  color: var(--red);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

/* Draw-on. Only armed once the script has run, so the skylines are simply
   visible if JavaScript never arrives. pathLength="1" on every path means one
   dash length works regardless of the path's real geometry. */
.js-draw .tile-art path,
.js-draw .tile-art circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-draw .tile.drawn .tile-art path,
.js-draw .tile.drawn .tile-art circle {
  animation: tile-draw 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tile-draw { to { stroke-dashoffset: 0; } }

.js-draw .tile.drawn .tile-art :nth-child(1)  { animation-delay: 0.00s; }
.js-draw .tile.drawn .tile-art :nth-child(2)  { animation-delay: 0.05s; }
.js-draw .tile.drawn .tile-art :nth-child(3)  { animation-delay: 0.10s; }
.js-draw .tile.drawn .tile-art :nth-child(4)  { animation-delay: 0.15s; }
.js-draw .tile.drawn .tile-art :nth-child(5)  { animation-delay: 0.20s; }
.js-draw .tile.drawn .tile-art :nth-child(6)  { animation-delay: 0.25s; }
.js-draw .tile.drawn .tile-art :nth-child(7)  { animation-delay: 0.30s; }
.js-draw .tile.drawn .tile-art :nth-child(8)  { animation-delay: 0.35s; }
.js-draw .tile.drawn .tile-art :nth-child(9)  { animation-delay: 0.40s; }
.js-draw .tile.drawn .tile-art :nth-child(10) { animation-delay: 0.45s; }
.js-draw .tile.drawn .tile-art :nth-child(11) { animation-delay: 0.50s; }
.js-draw .tile.drawn .tile-art :nth-child(12) { animation-delay: 0.55s; }
.js-draw .tile.drawn .tile-art :nth-child(n+13) { animation-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .js-draw .tile-art path,
  .js-draw .tile-art circle { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .tile-art svg { transition: none; }
  .tile { transition: none; }
}

/* Two tiles across on a phone: one-per-row makes each card enormous and you
   lose the at-a-glance comparison the old table gave. */
@media (max-width: 40rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 0.85rem 0.8rem 1rem; }
  .tile-name { font-size: var(--step-1); }
  .tile-name .sub { margin-top: 0.2rem; }
  .tile-meta { margin-top: 0.6rem; gap: 0.05rem 0.45rem; }
  .tile-meta span + span::before { margin-right: 0.45rem; }
  .tile .price { padding-top: 0.7rem; font-size: var(--step-0); }
  .tile-art { margin-bottom: 0.6rem; }
}
@media (max-width: 20rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---- three sights, on each city page ----
   Same line-art language as the homepage tiles. Stroke is a touch heavier
   because these drawings sit smaller on the page. */

.sights { margin: 3rem 0 0; }
.sights h2 {
  font-size: var(--step-2);
  margin: 0 0 1.2rem;
  padding-top: 0.35em;
  border-top: 3px solid var(--black);
}
.sight-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
  border-bottom: 4px solid var(--black);
}
.sight > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(0.8rem, 2.2vw, 1.3rem);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  text-decoration: none;
  color: inherit;
  background: var(--white);
  transition: background 0.25s ease, color 0.25s ease;
}
.sight > a:hover { background: var(--black); color: var(--white); }

.sight-art { display: block; margin-bottom: 0.7rem; }
.sight-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 160;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .sight > a:hover .sight-art svg { transform: translateY(-4px); }
}

.sight-name {
  margin-top: auto;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 105, 'wght' 600;
  font-size: var(--step--1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.js-draw .sight-art path,
.js-draw .sight-art circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-draw .sight.drawn .sight-art path,
.js-draw .sight.drawn .sight-art circle {
  animation: tile-draw 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.js-draw .sight.drawn .sight-art :nth-child(1) { animation-delay: 0.00s; }
.js-draw .sight.drawn .sight-art :nth-child(2) { animation-delay: 0.06s; }
.js-draw .sight.drawn .sight-art :nth-child(3) { animation-delay: 0.12s; }
.js-draw .sight.drawn .sight-art :nth-child(4) { animation-delay: 0.18s; }
.js-draw .sight.drawn .sight-art :nth-child(5) { animation-delay: 0.24s; }
.js-draw .sight.drawn .sight-art :nth-child(6) { animation-delay: 0.30s; }
.js-draw .sight.drawn .sight-art :nth-child(7) { animation-delay: 0.36s; }
.js-draw .sight.drawn .sight-art :nth-child(8) { animation-delay: 0.42s; }
.js-draw .sight.drawn .sight-art :nth-child(n+9) { animation-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .js-draw .sight-art path,
  .js-draw .sight-art circle { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .sight-art svg, .sight > a { transition: none; }
}

/* ---- city page: sights in the right-hand rail ----
   The prose is capped at its measure, which left a wide empty column on
   desktop. The three sights now live there and follow you down the page. */

.body-grid {
  display: grid;
  /* The prose column is its reading measure, not a greedy 1fr -- otherwise the
     text stops at 62ch and leaves dead space before the rail. The surplus goes
     between the columns, so the rail sits flush with the facts table above. */
  grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 16rem);
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.body-grid > .prose { max-width: var(--measure); }

.body-grid > .sights {
  margin: 0;
  position: sticky;
  top: 1.5rem;
}
.body-grid > .sights h2 {
  font-size: var(--step-0);
  font-variation-settings: 'wdth' 105, 'wght' 700;
  margin: 0 0 0.7rem;
  padding-top: 0.3em;
}
.body-grid .sight-list { grid-template-columns: minmax(0, 1fr); }
.body-grid .sight-art svg { aspect-ratio: 200 / 132; }
.body-grid .sight > a { padding: 0.75rem 0.85rem 0.85rem; }
.body-grid .sight-art { margin-bottom: 0.5rem; }

/* A short viewport can't hold three stacked cards, and a sticky block taller
   than the window gets its foot cut off — so let it scroll away instead. */
@media (max-height: 46rem) {
  .body-grid > .sights { position: static; }
}

/* Below this the rail has no room: prose first, then the three across. */
@media (max-width: 62rem) {
  .body-grid { grid-template-columns: minmax(0, 1fr); }
  .body-grid > .sights { position: static; margin-top: 3rem; }
  .body-grid > .sights h2 { font-size: var(--step-2); margin-bottom: 1.2rem; }
  .body-grid .sight-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .body-grid .sight-art svg { aspect-ratio: 200 / 160; }
}

/* Placeholder text the owner still needs to replace. */
.placeholder { color: var(--red); font-weight: 600; }

/* ---- cookie bar ----
   Accept and reject carry the same weight, which is what the ICO expects:
   refusing must be no harder than agreeing. */

#cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--black);
  color: var(--white);
  border-top: 4px solid var(--red);
}
.cookie-inner {
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(0.9rem, 2.5vw, 1.4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
}
.cookie-inner p {
  margin: 0;
  max-width: 54ch;
  font-size: var(--step--1);
  line-height: 1.5;
}
.cookie-inner a { color: var(--white); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-actions button {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 105, 'wght' 600;
  font-size: var(--step--1);
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--white);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.cookie-actions button[data-consent="granted"] {
  background: var(--red);
  border-color: var(--red);
}
.cookie-actions button:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.cookie-actions button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

@media (max-width: 34rem) {
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions button { flex: 1; }
}

/* ---- watermelon ---- */

.wordmark { display: inline-flex; align-items: center; gap: 0.42em; }
.wordmark .mark { width: 1.1em; height: 1.1em; flex: none; display: block; }

/* The hero is the flesh, so it ends in pith and rind. */
.hero { position: relative; }
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: linear-gradient(to bottom,
    var(--white) 0 5px,
    var(--green) 5px 14px);
}
@media (max-width: 34rem) { .hero::after { height: 10px; background: linear-gradient(to bottom, var(--white) 0 4px, var(--green) 4px 10px); } }

footer { border-top-color: var(--green); }

/* ---- departure-city picker ------------------------------------------- */
/* The only thing on a destination page that changes with where you fly
   from is the flight itself. Rooms, tax, food and the best months do not,
   so the picker rewrites one cell of the facts strip and one line of note
   underneath it -- nothing else. */
.origin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  padding: .9rem 0 0;
}
.origin label {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.origin select {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: .15rem 1.6rem .15rem .1rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right .7rem center, right .35rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
.origin select:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.origin-note {
  flex: 1 1 18rem;
  margin: 0;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--muted);
}
.origin-note b { color: var(--ink); font-weight: 600; }
.origin-note.warn b { color: var(--red); }
.tile.no-direct { opacity: .5; }
.tile.no-direct .price { color: var(--muted); }

/* ---- origin hub pages ------------------------------------------------ */
.hub-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hub-list li { border-bottom: 1px solid var(--rule); }
.hub-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem 1.5rem;
  align-items: baseline;
  padding: .9rem .25rem;
  text-decoration: none;
  color: inherit;
}
.hub-list a:hover { background: var(--ink); color: var(--paper); }
.hub-list a:hover .hub-sub, .hub-list a:hover .hub-price { color: inherit; }
.hub-name { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; }
.hub-name span { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.hub-list a:hover .hub-name span { color: inherit; }
.hub-price { font-family: var(--sans); font-weight: 700; color: var(--red); }
.hub-sub {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--muted);
}
.hub-list li.no-direct .hub-name { color: var(--muted); }
@media (max-width: 34rem) {
  .hub-list a { grid-template-columns: 1fr; }
  .hub-price { grid-row: 1; justify-self: start; }
}