:root {
  --ink: #18312f;
  --muted: #61716e;
  --deep: #103d38;
  --sea: #1c655d;
  --gold: #dfaa48;
  --rust: #bf6547;
  --cream: #f2eee4;
  --paper: #fffdf8;
  --line: #d9d3c7;
  --sky: #dfeef1;
  --green: #e6f0e8;
  --warn: #f8e7df;
  --shadow: 0 18px 58px rgba(25, 45, 42, 0.12);
  --radius: 24px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}
button,
a {
  font: inherit;
}
a {
  color: inherit;
}
button {
  color: inherit;
}
.wrap {
  max-width: 1280px;
  margin: auto;
  padding-inline: 20px;
}
.hero {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: white;
  /* Drop a photo at assets/images/hero.jpg and swap the gradient for:
     linear-gradient(180deg, rgba(4,24,23,.28), rgba(8,27,25,.88)),
     url("../images/hero.jpg") center 40% / cover no-repeat; */
  background: linear-gradient(160deg, #17403a, #2b4f4a 55%, #6b5a48);
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}
/* margin-left:auto rather than space-between: if the eyebrow ever wraps or is
   empty, the switcher still ends up hard right instead of drifting centre. */
.hero-top .utility {
  margin-left: auto;
}
.hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 8px;
  background: linear-gradient(90deg, var(--gold), #f0ce83, var(--rust));
}
.hero-in {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: clamp(30px, 7vw, 88px) 20px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 700;
  opacity: 0.82;
}
.hero h1,
.display {
  font-family: "Literata", Georgia, serif;
  letter-spacing: -0.04em;
}
.hero h1 {
  font-size: clamp(3.6rem, 9vw, 7.5rem);
  line-height: 0.82;
  margin: 0.14em 0 0.16em;
}
.hero p {
  max-width: 860px;
  margin: 0;
  color: #fffaf1;
  font-size: clamp(1rem, 2vw, 1.28rem);
}
.hero-meta {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.hero-meta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  font-size: 0.83rem;
  font-weight: 600;
}
/* Sits in the header, in normal flow. It used to be position:fixed and covered
   the last tabs once the tab bar stuck to the top. */
.utility {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 5px;
  background: rgba(12, 30, 28, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
.lang {
  border: 0;
  background: transparent;
  padding: 8px 13px;
  border-radius: 999px;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lang.active {
  background: var(--paper);
  color: var(--deep);
}
.tabsbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-top: 22px;
  background: rgba(242, 238, 228, 0.94);
  border-block: 1px solid rgba(24, 49, 47, 0.07);
  backdrop-filter: blur(18px);
}
.tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: auto;
  padding-block: 11px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar,
.subtabs::-webkit-scrollbar {
  display: none;
}
/* The label sits above its row rather than beside it: an inline label eats
   horizontal space in a bar that already scrolls sideways. */
.tab-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 0 0 auto;
}
.tab-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-group + .tab-group {
  padding-left: 16px;
  border-left: 1px solid rgba(24, 49, 47, 0.16);
}
.tab-group-label {
  padding-left: 2px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.pinned-group .tab-group-label {
  color: #8a6a1f;
}
.tab-slot {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
/* Absolutely positioned above the tab so it costs no width, and it overlaps the
   group-label band on purpose — only one badge is ever visible at a time. */
.pin {
  position: absolute;
  bottom: calc(100% + 3px);
  right: 0;
  z-index: 3;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
/* Active tab only. Showing it on hover made the badge flicker along the row as
   the pointer crossed the bar. */
.tab.active ~ .pin,
.pin:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Only the first tab's badge can land on top of the group label, so step the
   label aside just for that case instead of hiding it whenever a badge shows. */
.tab-group:has(.tab-slot:first-child > .tab.active) .tab-group-label {
  visibility: hidden;
}
.pin:hover,
.pin:focus-visible {
  border-color: var(--sea);
  color: var(--sea);
}
.pin.on {
  border-color: #c9a659;
  background: #f4e6c4;
  color: #6f5314;
}
.tab,
.subtab {
  border: 1px solid var(--line);
  background: #faf7f0;
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
/* Muted, one family per group: teal for Łeba itself, clay for getting out,
   slate for everything that applies to the whole trip. */
.tab[data-group="leba"] {
  background: #e2e9e6;
  border-color: #cfd9d4;
}
.tab[data-group="road"] {
  background: #ece4de;
  border-color: #dccec4;
}
.tab[data-group="general"] {
  background: #e6e7e9;
  border-color: #d4d7da;
}
/* The dark fill comes first and unconditionally. The per-group colours below
   only refine it, so a group with no colour of its own still renders white text
   on a dark pill instead of white text on the light default background. */
.tab.active,
.subtab.active {
  background: var(--deep);
  border-color: var(--deep);
  color: white;
}
.tab[data-group="leba"].active {
  background: #46635c;
  border-color: #46635c;
}
.tab[data-group="road"].active {
  background: #7d5c4d;
  border-color: #7d5c4d;
}
.tab[data-group="general"].active {
  background: #58626b;
  border-color: #58626b;
}
main {
  padding-block: 28px 80px;
}
.panel {
  display: none;
  animation: rise 0.24s ease;
}
.panel.active {
  display: block;
}
@keyframes rise {
  from {
    opacity: 0.15;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.surface,
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.surface {
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px);
}
.card {
  border-radius: 19px;
  padding: 20px;
  min-width: 0;
}
.card + .card {
  margin-top: 15px;
}
.display {
  font-size: clamp(2.15rem, 4.4vw, 4.1rem);
  line-height: 1;
  margin: 0.12em 0 0.25em;
}
.lead {
  font-size: 1.08rem;
  color: #40514e;
  max-width: 920px;
}
.note {
  color: var(--muted);
  font-size: 0.9rem;
}
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(285px, 0.62fr);
  gap: 18px;
}
/* Without this, a grid item's automatic minimum size is its content, so a wide
   table pushes the whole page sideways instead of scrolling in .table-wrap. */
.grid > *,
.two > *,
.three > *,
.four > * {
  min-width: 0;
}
.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mt {
  margin-top: 18px;
}
.hero-card {
  min-height: 360px;
  border-radius: 27px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  position: relative;
  padding: clamp(24px, 5vw, 48px);
  color: white;
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
}
.hero-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 16, 15, 0.04),
    rgba(5, 25, 23, 0.88)
  );
}
.hero-card > * {
  position: relative;
  z-index: 1;
}
.hero-card .display {
  color: white;
}
.hero-card p {
  max-width: 820px;
  margin: 0;
  color: #fffaf2;
}
.pill {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9efeb;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill.gold {
  background: #f2dfaf;
}
.pill.blue {
  background: var(--sky);
}
.pill.rust {
  background: var(--warn);
}
.hero-card .pill {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.place-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  max-width: 100%;
}
.map-ref {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--sea);
  text-decoration: none;
  font-size: 0.76rem;
  line-height: 1;
  vertical-align: super;
  opacity: 0.82;
}
.map-ref:hover,
.map-ref:focus-visible {
  color: white;
  background: var(--sea);
  opacity: 1;
  outline: none;
}
.hero-card .map-ref {
  color: white;
  border-color: rgba(255, 255, 255, 0.72);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-block: 16px;
}
.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.metric b {
  display: block;
  font-size: 1.05rem;
}
.metric small {
  color: var(--muted);
}
.rank {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rank:last-child {
  border: 0;
}
.num {
  font-family: "Literata", Georgia, serif;
  font-size: 1.55rem;
  color: var(--gold);
}
.call {
  padding: 13px 14px;
  border-left: 4px solid var(--gold);
  background: #fbf1d9;
  border-radius: 0 13px 13px 0;
  margin: 11px 0;
}
.call.good {
  border-color: #5b9478;
  background: #e8f2ea;
}
.call.warn {
  border-color: var(--rust);
  background: var(--warn);
}
.call.blue {
  border-color: #6093a5;
  background: #e8f1f5;
}
.route {
  padding: 16px;
  border-radius: 17px;
  background: #edf3ee;
  border: 1px solid #d7e0d9;
}
.route-line {
  font-family: "Literata", Georgia, serif;
  font-size: 1.35rem;
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.route-kv {
  padding: 10px;
  background: #fbfcf9;
  border: 1px dashed #cbd7cf;
  border-radius: 12px;
}
.route-kv small {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 700;
}
.route-kv b {
  display: block;
  margin-top: 2px;
}
.timeline {
  display: grid;
}
.step {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
}
.step time {
  font-weight: 700;
  color: var(--deep);
}
.step div {
  border-left: 2px solid #ddcda8;
  padding: 0 0 13px 14px;
}
.step b {
  display: block;
}
.step span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2px;
}
details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf9f3;
  overflow: hidden;
  margin: 9px 0;
}
summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "＋";
}
details[open] summary:after {
  content: "−";
}
.detail {
  padding: 0 14px 14px;
  color: #40514e;
}
.detail ul {
  padding-left: 19px;
}
.detail p:last-child,
.detail ul:last-child {
  margin-bottom: 0;
}
.cost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, auto);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.cost:last-child {
  border: 0;
}
.cost small {
  display: block;
  color: var(--muted);
}
.price {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-align: right;
  font-weight: 700;
  border-bottom: 1px dotted rgba(16, 61, 56, 0.5);
  cursor: help;
  white-space: normal;
  overflow-wrap: anywhere;
}
.price-tip {
  position: fixed;
  z-index: 6000;
  width: 250px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border-radius: 11px;
  background: #112b28;
  color: white;
  text-align: left;
  white-space: pre-line;
  font-size: 0.76rem;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.14s,
    transform 0.14s,
    visibility 0.14s;
  pointer-events: none;
}
.price-tip.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.big-price {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1;
  color: var(--deep);
}
.two-way {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin: 5px 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1dfb1;
  color: #654c17;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 190px 190px;
  gap: 8px;
}
.gallery figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #ddd;
  cursor: zoom-in;
}
.gallery figure:first-child {
  grid-row: 1/3;
}
.gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s;
}
.gallery figure:hover img {
  transform: scale(1.04);
}
.gallery figcaption {
  position: absolute;
  inset: auto 9px 8px;
  color: #fff;
  font-size: 0.72rem;
  text-shadow: 0 1px 6px #000;
}
.map {
  height: 430px;
  border-radius: 17px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #dfe6e1;
}
.map.small {
  height: 340px;
}
.subtabs {
  display: flex;
  gap: 7px;
  overflow: auto;
  padding: 2px 0 14px;
  scrollbar-width: none;
}
/* Flat muted sand and olive, deliberately a different family from the main tabs
   so the two rows never read as the same control. */
.subtab {
  background: #eae7df;
  border-color: #dbd6cb;
}
.trip-panel {
  display: none;
}
.trip-panel.active {
  display: block;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.video {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px;
  border-radius: 13px;
  background: #f3f1ea;
  text-decoration: none;
}
.play {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rust);
  color: white;
}
.video small {
  display: block;
  color: var(--muted);
}
.table-wrap {
  overflow: auto;
}
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 13px;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  min-width: 720px;
}
.compare th,
.compare td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
}
/* Zebra rows plus a hairline between columns: long fare and comparison tables
   are read across, and unruled rows make the eye drop a line. */
.compare tbody tr:nth-child(odd) {
  background: #f7f4ed;
}
.compare tbody tr:hover {
  background: #eef2ee;
}
.compare th + th,
.compare td + td {
  border-left: 1px solid rgba(24, 49, 47, 0.09);
}
.compare tbody td {
  border-top: 1px solid var(--line);
}
.compare td:first-child {
  font-variant-numeric: tabular-nums;
}
.compare th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ece7dc;
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4b5a57;
  white-space: nowrap;
}
.source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.source-list a {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-decoration: none;
  color: var(--sea);
  background: white;
}
.source-list a:hover {
  text-decoration: underline;
}
.location-first {
  padding: 14px;
}
.location-first > div:first-child {
  padding: 5px 7px 12px;
}
.location-first h3 {
  margin: 2px 0 0;
}
.location-first .map.small {
  height: 390px;
}
.featured-choice {
  border-color: #d59478;
  background: linear-gradient(145deg, #fffdf8, #eef8f7 58%, #fae9e1);
}
.reading-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}
.reading-list a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfaf5;
  text-decoration: none;
}
.reading-list a:hover {
  border-color: var(--sea);
}
.reading-list a > span:first-child {
  color: var(--rust);
  font-size: 1.15rem;
}
.reading-list small {
  display: block;
  color: var(--muted);
}
.coffee-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.coffee-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #faf8f2;
}
.coffee-card.garden { background: #eaf0e7; }
.coffee-card.roaster { background: #f0e9e1; }
.coffee-card.view { background: #e6eef0; }
.coffee-card.calm { background: #edeae3; }
.coffee-card.food { background: #f0ece2; }
.coffee-card h4 {
  margin: 9px 0 2px;
  font-size: 1rem;
}
.coffee-card p {
  margin-bottom: 0;
  color: #425653;
  font-size: 0.88rem;
}
.coffee-card small { color: var(--muted); }
.source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.source-strip a {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e7efec;
  color: var(--deep);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.decision {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.decision p { margin: 0; }
.tipline {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.tipline span { color: #4c896c; font-weight: 800; }
.tipline p { margin: 0; }
.phrase-group { margin-top: 12px; }
.phrase-group summary span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 99px;
  background: #e7eee8;
  font-size: 0.75rem;
}
.phrase-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.phrase-table th,
.phrase-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.phrase-table tbody tr:nth-child(odd) {
  background: #f7f4ed;
}
.phrase-table tbody tr:hover {
  background: #eef2ee;
}
.phrase-table tbody td {
  border-top: 1px solid var(--line);
}
.phrase-table th + th,
.phrase-table td + td {
  border-left: 1px solid rgba(24, 49, 47, 0.09);
}
.phrase-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ece7dc;
  color: #4b5a57;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.fav-cell {
  width: 34px;
  padding-right: 0 !important;
}
.fav {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b3b0a6;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.fav:hover,
.fav:focus-visible {
  background: rgba(24, 49, 47, 0.08);
  color: var(--ink);
}
.fav.on {
  color: #c9a13a;
}
.fav-group > summary {
  background: #f6efdd;
}
.fav-group .detail {
  padding: 0 14px 14px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The Portuguese column is what you actually read aloud, so it leads visually. */
.phrase-pt {
  font-weight: 700;
  font-size: 0.95rem;
}
.phrase-say {
  color: #3d524e;
}
.phrase-ipa {
  color: var(--muted);
}
.phrase-table code {
  font-size: 0.78rem;
  white-space: nowrap;
}
.dialogue {
  padding: 4px 14px 14px;
  display: grid;
  gap: 8px;
}
.dialogue-line {
  padding: 10px 13px;
  border-radius: 13px;
  max-width: 86%;
}
.dialogue-line b {
  display: block;
  font-size: 0.98rem;
}
.dialogue-line small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.dialogue-line.you {
  justify-self: start;
  background: #e6efea;
  border-bottom-left-radius: 4px;
}
.dialogue-line.them {
  justify-self: end;
  background: #f0ebe0;
  border-bottom-right-radius: 4px;
}
/* A table cell or heading that navigates: reads as a link, not a control. */
.link-cell {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sea);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.link-cell:hover,
.link-cell:focus-visible {
  text-decoration: underline;
}
h3 > .link-cell {
  font-size: inherit;
  font-family: inherit;
}
.jump {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px solid var(--sea);
  border-radius: 999px;
  background: transparent;
  color: var(--sea);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.jump:hover {
  background: var(--sea);
  color: white;
}
.listen {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e1eeea;
  color: var(--deep);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer {
  padding-block: 22px 46px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.footer-fx {
  font-variant-numeric: tabular-nums;
}
.footer-note {
  margin: 8px 0 0;
  max-width: 720px;
}
.section-head {
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  font-family: "Literata", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.eat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.district-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.district {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.district.best {
  border-color: #b9a06d;
}
.district.careful {
  border-color: #d0bdb2;
}
.district-photo {
  position: relative;
  height: 190px;
  background: #ddd8cf;
}
.district-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.district-photo figcaption {
  position: absolute;
  inset: auto 10px 8px;
  color: white;
  font-size: 0.74rem;
  font-weight: 600;
  text-shadow: 0 1px 6px #000;
}
.district-body {
  padding: 16px 18px 18px;
}
.district-body h3 {
  margin: 9px 0 6px;
}
.district-body p {
  margin-top: 0;
}
.district-body .call {
  margin: 8px 0 0;
  font-size: 0.9rem;
}
.howto {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}
.howto li {
  padding-left: 3px;
}
.eat-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #faf8f2;
}
.eat-card h4 {
  margin: 9px 0 2px;
  font-size: 1rem;
}
.eat-card small {
  color: var(--muted);
}
.eat-card p {
  margin-bottom: 0;
  color: #425653;
  font-size: 0.88rem;
}
.lightbox {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 13, 12, 0.94);
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
}
.lightbox button {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}
@media (max-width: 920px) {
  .brief-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid,
  .two {
    grid-template-columns: 1fr;
  }
  .three {
    grid-template-columns: 1fr 1fr;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 210px 165px;
  }
  .gallery figure:first-child {
    grid-column: 1/3;
    grid-row: auto;
  }
  .route-grid {
    grid-template-columns: 1fr;
  }
  .coffee-grid,
  .eat-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  body {
    overflow-x: hidden;
    font-size: 16px;
  }
  .wrap {
    padding-inline: 13px;
  }
  .hero-in {
    padding-inline: 16px;
  }
  .hero {
    min-height: 46vh;
  }
  .hero-top {
    padding-block: 10px;
    gap: 10px;
  }
  .hero-top .eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .utility {
    padding: 3px;
    gap: 2px;
  }
  .lang {
    padding: 7px 9px;
    font-size: 0.7rem;
  }
  .three,
  .four {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 170px 170px;
  }
  .gallery figure:first-child {
    grid-column: auto;
  }
  .video-grid,
  .source-list,
  .reading-list {
    grid-template-columns: 1fr;
  }
  .cost {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 42%);
  }
  .tabs,
  .subtabs {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }
  .tab,
  .subtab {
    min-height: 44px;
    padding-inline: 15px;
    scroll-snap-align: center;
  }
  summary,
  .video,
  .lang {
    min-height: 44px;
  }
  .map-ref {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  .place-label {
    gap: 0.3rem;
  }
  .price-tip {
    left: 18px !important;
    right: 18px;
    top: auto !important;
    bottom: 18px;
    width: auto;
    max-width: none;
  }
  .map {
    height: 350px;
  }
  .rank {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .rank > .pill {
    grid-column: 2;
    justify-self: start;
  }
  .hero h1 {
    font-size: clamp(3.2rem, 20vw, 5.7rem);
  }
  .display {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }
  .hero-card {
    min-height: 300px;
    padding: 22px;
  }
  .coffee-grid,
  .eat-grid,
  .district-grid {
    grid-template-columns: 1fr;
  }
  .decision {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .location-first .map.small {
    height: 330px;
  }
  .tabs {
    gap: 12px;
  }
  .tab-group {
    gap: 5px;
  }
  .tab-group + .tab-group {
    padding-left: 12px;
  }
  .section-head {
    font-size: 1.3rem;
    margin-top: 26px;
  }
  .footer-row {
    flex-direction: column;
    gap: 4px;
  }
}

/* Rows the reader should act on: the train that fits, the hour it rains.
   Placed after the zebra rule, which has equal specificity, so source order
   decides. The left border carries the meaning when the tint is too faint. */
.compare tbody tr.row-good,
.compare tbody tr.row-good:nth-child(odd) {
  background: var(--green);
}
.compare tbody tr.row-warn,
.compare tbody tr.row-warn:nth-child(odd) {
  background: var(--warn);
}
.compare tbody tr.row-good td:first-child {
  box-shadow: inset 3px 0 0 var(--sea);
}
.compare tbody tr.row-warn td:first-child {
  box-shadow: inset 3px 0 0 var(--rust);
}

/* A fixed tooltip that is only invisible, not removed, still contributes to
   horizontal scroll: on a phone `right: 18px` resolves against the layout
   viewport, which can be wider than the client width. Collapse the box while
   the tooltip is closed so it cannot push the page sideways. The inline width
   the desktop path sets on open outranks this, which is what we want. */
.price-tip:not(.open) {
  inset-inline-end: auto;
  width: 0;
  min-width: 0;
  padding-inline: 0;
  overflow: hidden;
}

/* Four languages means long single words — «Международный», «Międzynarodowy» —
   at display size on a 390 px phone. Hyphenate where the browser can (app.js
   sets documentElement.lang on every render, so the right dictionary applies)
   and break as a last resort, rather than letting one word scroll the page. */
.display,
h3,
.timeline .step b,
.compare td {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Direction arrows on a routed track. A loop drawn as a plain line does not say
   which way round it goes, and here that decides whether the wind helps. */
.route-arrow {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #14514a;
  font-size: 11px;
  line-height: 1;
  text-shadow:
    0 0 3px #fff,
    0 0 3px #fff;
}
/* Elevation profile. Full width, fixed aspect, scales down with the card. */
.profile {
  margin: 14px 0 0;
}
.profile svg {
  display: block;
  width: 100%;
  height: 130px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbf9f4;
}
.profile figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}
/* Bike-path availability: four steps, not a fake percentage. */
.pathmeter {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f7f4ed;
}
.pathmeter-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pathmeter-head small {
  color: var(--muted);
}
.pathmeter p {
  margin: 0;
  font-size: 0.88rem;
}
.dots {
  display: inline-flex;
  gap: 4px;
}
.dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
}
.dots .dot.on {
  background: var(--sea);
  border-color: var(--sea);
}
/* One card per walk, each with its own map. */
.walk-card + .walk-card {
  margin-top: 18px;
}
.walk-card .map {
  height: 300px;
  margin-top: 12px;
}

/* Dual-currency ranges ("120–225 zł (€28–€52)") are long strings, and in the
   narrow sidebar the old display size broke them across lines mid-figure. */
.big-price {
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  overflow-wrap: break-word;
}