: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);
}
/* The eyebrow and the language switcher share one row. The hero itself is a
   column flexbox, so this row has to be told to stretch — without width:100%
   it shrinks to its content and the switcher stops being hard right. */
.hero-top {
  width: 100%;
  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;
  margin-right: 0;
}
.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;
}
/* One muted family per group. The dark active fill comes first and
   unconditionally, so a group with no colour of its own still renders white
   text on a dark pill rather than white text on the light default. */
.tab[data-group="festival"] {
  background: #f0e4cf;
  border-color: #e0cfae;
}
.tab[data-group="kites"] {
  background: #e6e4ef;
}
.tab[data-group="here"] {
  background: #e2e9e6;
  border-color: #cfd9d4;
}
.tab[data-group="out"] {
  background: #ece4de;
  border-color: #dccec4;
}
.tab[data-group="road"] {
  background: #e4e6ec;
  border-color: #d0d4de;
}
.tab[data-group="general"] {
  background: #e6e7e9;
  border-color: #d4d7da;
}
.tab.active,
.subtab.active {
  background: var(--deep);
  border-color: var(--deep);
  color: white;
}
.tab[data-group="festival"].active {
  background: #8a6a1f;
  border-color: #8a6a1f;
}
.tab[data-group="kites"].active {
  background: #5b5486;
  border-color: #5b5486;
}
.tab[data-group="here"].active {
  background: #46635c;
  border-color: #46635c;
}
.tab[data-group="out"].active {
  background: #7d5c4d;
  border-color: #7d5c4d;
}
.tab[data-group="road"].active {
  background: #55607a;
  border-color: #55607a;
}
.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;
}
/* A numbered variant. The plain .step gives its first column 82px, which is
   right for a year and far too narrow for a step name — the name then stacks
   one letter per line and stretches the row. Here the rail is a number and the
   name sits above its own paragraph, full width. */
.timeline.numbered .step {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
}
.timeline.numbered .step > .n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--deep);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0;
}
.timeline.numbered .step b {
  margin-bottom: 4px;
}
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.active { background: #6d6555; border-color: #6d6555; }
.trip-panel {
  display: none;
}
.trip-panel.active {
  display: block;
}
/* Section-level tab panels, used by the kite and wind pages in kites.js. Same
   control as the day-trip subtabs, keyed by its own attribute so the two sets
   never drive each other. */
.sect-panel {
  display: none;
}
.sect-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;
  }
}

/* --- fixes and additions for this guide ------------------------------------ */

/* Rows the reader should act on. Placed after the zebra rule, which has equal
   specificity, so source order decides. */
.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 it while closed. */
.price-tip:not(.open) {
  inset-inline-end: auto;
  width: 0;
  min-width: 0;
  padding-inline: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   The atlas map: the whole tab tree drawn once at the top of the first page.
   Two renderings of the same data — a dendrogram in SVG and a chip list — with
   CSS choosing between them, because SVG text does not reflow and a 1200-unit
   viewBox squeezed onto a phone is illegible.
   --------------------------------------------------------------------------- */
.atlas-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  overflow: visible;
}
.ag-root rect {
  fill: var(--deep);
}
.ag-root-label {
  fill: var(--paper);
  font-family: "Literata", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}
.ag-group-label {
  fill: white;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ag-leaf-label {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
/* An invisible rectangle over the whole row so the click target is the label
   and the space around it, not a 4.5px dot. */
.ag-hit {
  fill: transparent;
}
.ag-leaf {
  cursor: pointer;
}
.ag-leaf:hover .ag-hit,
.ag-leaf:focus-visible .ag-hit {
  fill: rgba(28, 101, 93, 0.09);
}
.ag-leaf:hover .ag-leaf-label,
.ag-leaf:focus-visible .ag-leaf-label {
  fill: var(--sea);
}
.ag-leaf:focus-visible {
  outline: none;
}
.atlas-graph-list {
  display: none;
}
.ag-row {
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.ag-row:last-child {
  border-bottom: 0;
}
.ag-row-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ag-row-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ag-chip {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ag) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ag) 9%, white);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ag-chip:hover {
  background: var(--ag);
  border-color: var(--ag);
  color: white;
}
.ag-stats {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .atlas-graph-svg {
    display: none;
  }
  .atlas-graph-list {
    display: block;
  }
}

/* Three languages means long single words at display size on a 390 px phone.
   Hyphenate where the browser can — app.js sets documentElement.lang on every
   render — and break only as a last resort. */
.display,
h3,
.timeline .step b,
.compare td {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Dual-currency ranges are long strings; the display size broke them mid-figure
   in the narrow sidebar. */
.big-price {
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  overflow-wrap: break-word;
}

/* Direction arrows on a walked track. */
.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;
}

/* Galleries. The template's own `.gallery` is a fixed five-photo collage with
   two 190 px rows and captions laid over the image. This guide shows dozens of
   photographs per page, so these use their own root class rather than fighting
   that layout's specificity. The lightbox in app.js binds to both. */
.photos {
  display: grid;
  gap: 14px;
}
.photos-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.photos-wide {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.photos figure {
  margin: 0;
  overflow: hidden;
}
.photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  background: #ece7dc;
  cursor: zoom-in;
  transition: transform 0.35s;
}
.photos-wide img {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
}
.photos figure:hover img {
  transform: scale(1.03);
}
.photos figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 9px;
  }
  .photos-wide {
    grid-template-columns: 1fr;
  }
}

/* One card per walk, each with its own map. */
.walk-card + .walk-card {
  margin-top: 18px;
}
.walk-card .map {
  height: 300px;
  margin-top: 12px;
}