: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;
  /* Height of the sticky tab bar. Measured in app.js on every render and on
     resize: it changes with the language, the pinned group and the viewport,
     and the second tab row has to stick directly underneath it. */
  --tabsbar-h: 0px;
}
* {
  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 the city, clay for the trips out,
   slate for everything that applies to the whole trip. */
.tab[data-group="porto"] {
  background: #e2e9e6;
  border-color: #cfd9d4;
}
.tab[data-group="trips"] {
  background: #ece4de;
  border-color: #dccec4;
}
.tab[data-group="general"] {
  background: #e6e7e9;
  border-color: #d4d7da;
}
.tab.active,
.subtab.active {
  color: white;
}
.tab[data-group="porto"].active {
  background: #46635c;
  border-color: #46635c;
}
.tab[data-group="trips"].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;
}
/* The second row sticks under the first rather than replacing it, so the reader
   can always see both which section and which subsection they are in. For this
   to work the bar must be a sibling of the panels it switches, not a child of
   the heading card: a sticky element only sticks inside its own container. */
.subtabs {
  position: sticky;
  top: var(--tabsbar-h);
  z-index: 900;
  display: flex;
  gap: 7px;
  overflow: auto;
  margin-bottom: 14px;
  padding: 9px 0;
  background: rgba(242, 238, 228, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(24, 49, 47, 0.07);
  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;
}
.subtab[data-trip="aveiro"] { background: #e4e9e7; }
.subtab[data-trip="douro"] { background: #ebe5d7; }
.subtab[data-trip="guimaraes"] { background: #e6e8de; }
.subtab[data-trip="braga"] { background: #ebe3dd; }
.subtab[data-trip="coimbra"] { background: #e5e6e9; }
.subtab[data-trip="viana"] { background: #e1e8e8; }
.subtab[data-trip="amarante"] { background: #eae3df; }
.subtab[data-trip="geres"] { background: #e3e8e1; }
.subtab[data-trip="arouca"] { background: #e8e4dc; }
.subtab.active { background: #6d6555; border-color: #6d6555; }
.subtab[data-trip="aveiro"].active { background: #55716c; border-color: #55716c; }
.subtab[data-trip="douro"].active { background: #7c6a43; border-color: #7c6a43; }
.subtab[data-trip="guimaraes"].active { background: #616b52; border-color: #616b52; }
.subtab[data-trip="braga"].active { background: #7d6154; border-color: #7d6154; }
.subtab[data-trip="coimbra"].active { background: #5f6472; border-color: #5f6472; }
.subtab[data-trip="viana"].active { background: #526f74; border-color: #526f74; }
.subtab[data-trip="amarante"].active { background: #7a6259; border-color: #7a6259; }
.subtab[data-trip="geres"].active { background: #556e5c; border-color: #556e5c; }
.subtab[data-trip="arouca"].active { background: #6f6555; border-color: #6f6555; }
.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;
}

/* ---------------------------------------------------------------------------
   The currency picker, at the foot of every page. Prices are authored once in
   the currency you pay in; this chooses what appears beside them, and lets the
   reader overwrite the published rate with the one they actually get.
   --------------------------------------------------------------------------- */
.fx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.fx-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}
.fx-select,
.fx-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  background: #fbf9f3;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
}
.fx-select {
  min-height: 38px;
  cursor: pointer;
}
.fx-input {
  width: 11ch;
  min-height: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fx-rate,
.fx-unit {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
}
.fx-reset {
  padding: 8px 13px;
  border: 1px solid var(--sea);
  border-radius: 999px;
  background: transparent;
  color: var(--sea);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.fx-reset:hover {
  background: var(--sea);
  color: white;
}
.fx-note {
  color: var(--muted);
  font-size: 0.8rem;
}
.fx-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 720px;
}
@media (max-width: 560px) {
  .fx-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .fx-field {
    justify-content: space-between;
  }
  .fx-select {
    flex: 1;
    min-width: 0;
  }
}

@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;
  }
}