/* Public server-rendered pages — guide profiles and the application form.
   Same palette and type system as the standard and the guide page, so the three
   read as one site. Light and dark both defined at token level; body paints an
   explicit background so it never borrows the host's. */

:root {
  --ground: #f6f8f7;
  --surface: #fff;
  --surface-alt: #eff3f1;
  --ink: #141d1a;
  --ink-soft: #3a4642;
  --muted: #5e6b67;
  --rule: #dce3e0;
  --rule-strong: #c3cfca;
  --accent: #0e5b4d;
  --accent-ink: #0b463c;
  --accent-soft: #e2efea;
  --warn: #855312;
  --warn-soft: #f6ecdc;
  --none: #6b7773;
  --none-soft: #eaeeec;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e1513;
    --surface: #151e1b;
    --surface-alt: #1b2622;
    --ink: #e7eeeb;
    --ink-soft: #c3cfca;
    --muted: #97a5a0;
    --rule: #28352f;
    --rule-strong: #3a4b45;
    --accent: #63c4ab;
    --accent-ink: #8ad8c3;
    --accent-soft: #16332c;
    --warn: #dca75e;
    --warn-soft: #2e2415;
    --none: #8a9793;
    --none-soft: #202b27;
  }
}

:root[data-theme="dark"] {
  --ground: #0e1513;
  --surface: #151e1b;
  --surface-alt: #1b2622;
  --ink: #e7eeeb;
  --ink-soft: #c3cfca;
  --muted: #97a5a0;
  --rule: #28352f;
  --rule-strong: #3a4b45;
  --accent: #63c4ab;
  --accent-ink: #8ad8c3;
  --accent-soft: #16332c;
  --warn: #dca75e;
  --warn-soft: #2e2415;
  --none: #8a9793;
  --none-soft: #202b27;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 3.5rem) clamp(1.1rem, .6rem + 2.4vw, 2rem) 5rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--surface);
  color: var(--ink);
  padding: .6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  z-index: 10;
}

h1, h2 {
  font-family: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.7rem); line-height: 1.1; }
h2 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.55rem); font-weight: 600; margin-top: 2.2rem; }

p { color: var(--ink-soft); max-width: var(--measure); }
.lede {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.5;
}
.latin { color: var(--muted); margin-top: -.4rem; }

a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mono, .meta span, .record .mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  color: var(--muted);
  border-block: 1px solid var(--rule);
  padding-block: .7rem;
  margin-block: 1.2rem;
  max-width: none;
}

/* ---------- verification record ---------- */

.record { margin-block: 2rem; }
.record table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  font-size: .92rem;
}
.record th, .record td {
  text-align: start;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.record tr:last-child th, .record tr:last-child td { border-bottom: 0; }
.record th { color: var(--muted); font-weight: 500; width: 10rem; text-transform: capitalize; }
.record-standard { font-size: .86rem; color: var(--muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 2px;
  white-space: nowrap;
}
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.chip--verified, .chip--under_review { color: var(--accent); background: var(--accent-soft); }
.chip--lapsed { color: var(--warn); background: var(--warn-soft); }
.chip--withdrawn { color: var(--none); background: var(--none-soft); }

/* Mandatory on every profile — GVS §5. Styled to be read, not skipped. */
.notchecked {
  background: var(--surface-alt);
  border-inline-start: 3px solid var(--none);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  border-radius: 0 3px 3px 0;
  max-width: none;
}

.mt-notice {
  background: var(--warn-soft);
  border-inline-start: 3px solid var(--warn);
  padding: .7rem 1rem;
  font-size: .9rem;
  border-radius: 0 3px 3px 0;
}

/* ---------- application form ---------- */

.apply .why {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.3rem;
  margin-block: 1.6rem;
}
.apply .why h2 { margin: 0 0 .4rem; font-size: 1rem; font-family: inherit; font-weight: 600; }

form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.6rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin: 0; max-width: 34rem; }
.field label { font-size: .92rem; font-weight: 500; color: var(--ink); }
.field .opt { color: var(--muted); font-weight: 400; }
.field abbr { color: var(--accent); text-decoration: none; }
.field small { color: var(--muted); font-size: .82rem; }

input, textarea, button {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .55rem .7rem;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; }

.field--bad input, .field--bad textarea { border-color: var(--warn); }
.err {
  background: var(--warn-soft);
  color: var(--warn);
  border-inline-start: 3px solid var(--warn);
  padding: .7rem 1rem;
  border-radius: 0 3px 3px 0;
}
.req { font-size: .88rem; color: var(--muted); }

button[type="submit"] {
  background: var(--accent);
  color: var(--ground);
  border-color: transparent;
  font-weight: 600;
  padding: .7rem 1.4rem;
  cursor: pointer;
  align-self: flex-start;
}
button[type="submit"]:hover { background: var(--accent-ink); }

/* honeypot — must be unreachable for people but present for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- browse cards ---------- */

ul.cards {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .8rem;
}
ul.cards li { margin: 0; }
ul.cards a {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink-soft);
  height: 100%;
  transition: border-color .15s ease;
}
ul.cards a:hover { border-color: var(--accent); }
ul.cards strong { color: var(--ink); font-size: 1.05rem; }
ul.cards .chip { align-self: flex-start; margin-top: .2rem; }

.dashnav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.6rem;
  font-size: .92rem;
}
.dashnav form { margin: 0; }
.linkish {
  background: none;
  border: 0;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}
a.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--ground);
  padding: .6rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}
a.btn:hover { background: var(--accent-ink); }

.switcher {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: .6rem .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: .9rem;
}
.switcher label { color: var(--muted); }
select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .4rem .6rem;
}

/* ============================================================================
   SITE CHROME
   ----------------------------------------------------------------------------
   Added because there was none: `Layout` rendered a bare <main>, so every page
   opened on an <h1> floating over an empty background with no way to get
   anywhere else. A stylesheet cannot fix a missing header.
   ========================================================================== */

.site {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.site-in {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, .6rem + 2.4vw, 2rem);
}
.site .site-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.7rem;
  flex-wrap: wrap;
}

/* The wordmark carries the identity, so it gets the serif and the accent — the
   one place on a utility page where the type is allowed to be a voice. */
.mark {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--accent); }

/* Which network you are on, next to the wordmark.

   Set small, uppercase and in the muted ink: a visitor who arrived on
   cities.tours from a search result needs to know it belongs to something
   larger, but the network name is not what they came to read. It sits beside
   the mark rather than under it so the header keeps one baseline. */
.mark-net {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .63rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3, #6B7A75);
  border: 1px solid var(--rule, #DCE3E0);
  border-radius: 2px;
  padding: .16rem .38rem;
  margin-inline-start: -.9rem;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, .3rem + 1.2vw, 1.5rem);
  font-size: .92rem;
  flex-wrap: wrap;
}
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-nav .lang {
  color: var(--muted);
  font-size: .84rem;
  padding-inline-start: clamp(.7rem, .3rem + 1.2vw, 1.5rem);
  border-inline-start: 1px solid var(--rule);
}
.btn--sm { padding: .42rem .85rem; font-size: .86rem; }
.site-nav .btn, .site-nav .btn:hover { color: var(--ground); }

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
  padding-block: 2rem 2.6rem;
  margin-top: 4rem;
}
.foot-claim {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
  max-width: 46ch;
}
.foot-fine { font-size: .82rem; color: var(--muted); margin: 0; max-width: none; }

/* ---------------------------------------------------------------- wide mode
   Documents keep the 52rem measure. Product surfaces get room for a grid — a
   browse page laid out at reading width is a list wearing card borders. */
body.wide main { max-width: 76rem; }
body.wide main > h1,
body.wide main > .lede,
body.wide main > p { max-width: 62ch; }

/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(.6rem, .2rem + 1.4vw, 1.4rem) clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.hero h1 { margin-bottom: .5rem; }
.hero .lede { margin: 0 0 1.4rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin: 0;
  padding: 0;
}
.hero-stats div { display: flex; flex-direction: column; gap: .15rem; }
.hero-stats dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  order: 2;
}
.hero-stats dd {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: clamp(1.6rem, 1.4rem + .8vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
  margin: 0;
  order: 1;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- rich cards
   The card was a bordered box holding a name and a count. These carry what the
   product actually knows — where a place is, and what has been checked. There
   is no photography in the schema, and dressing the grid in stock imagery
   would misrepresent what the platform holds. */

ul.cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
ul.cards a {
  gap: .5rem;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 29, 26, .04);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
ul.cards a:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 29, 26, .06), 0 12px 28px -18px rgba(20, 29, 26, .5);
}
ul.cards strong {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* The coordinate line. Every destination has lat/lon and almost nothing else,
   so the honest ornament is the data itself, set in mono. */
.coord {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.coord::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  flex: none;
}
.card-foot {
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .84rem;
  color: var(--muted);
}
.card-foot .n { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* --------------------------------------------------------- section heading */
.sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  margin: 2.6rem 0 1.1rem;
  padding-bottom: .5rem;
}
.sec h2 { margin: 0; }
.sec .count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- dashboard app
   A portal is operated, not read. The public pages stay documents; this one
   gets tabs with an active state and panels that carry status at a glance. */

.dashnav {
  gap: 0;
  padding-block: 0;
  margin-bottom: 2rem;
  align-items: stretch;
}
.dashnav a {
  padding: .7rem 0;
  margin-inline-end: 1.4rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dashnav a:hover { color: var(--accent); }
.dashnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.dashnav form { margin-inline-start: auto; align-self: center; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.3rem 1.4rem;
  margin-block: 1.2rem;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel h2 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.muted { color: var(--muted); }

.dest-search {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.4rem 0 0;
  padding: .75rem .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: .9rem;
}
.dest-search label { color: var(--muted); }
.dest-search input { flex: 1 1 12rem; min-width: 0; }
.dest-search button {
  background: var(--surface);
  border-color: var(--rule-strong);
  cursor: pointer;
  padding: .5rem 1rem;
}
.dest-search button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------- guide profile */
.guide .headline {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin-block: .2rem 1.2rem;
  max-width: 48ch;
}
.guide .story { white-space: pre-wrap; }

@media (max-width: 34rem) {
  .site .site-in { min-height: 0; padding-block: .7rem; }
  .site-nav { gap: .8rem; font-size: .88rem; }
  .site-nav .lang { padding-inline-start: .8rem; }
  .hero-stats { gap: 1.4rem; }
}

/* ------------------------------------------------------------- photographs */
.shots {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .8rem;
}
.shots li {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--surface-alt);
  display: block;
}
.shots form { margin: 0; }
.shots .chip { align-self: flex-start; }

/* Tour and destination card imagery. Fixed ratio so the grid does not reflow
   as pictures arrive, and a tinted placeholder so a missing one is a quiet
   gap rather than a collapsed card. */
.shot {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 5px;
  background: var(--surface-alt);
  margin: -1.15rem -1.2rem .3rem;
  width: calc(100% + 2.4rem);
  max-width: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 5px 5px 0 0;
}
/* Credit line for anything that is not the guide's own photograph. Small, but
   never hidden: an uncredited licensed image is a licence breach, and a stock
   city shot presented as a guide's own is a lie about what we hold. */
.credit {
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ============================================================================
   PERSONALITY DIALS
   ----------------------------------------------------------------------------
   Lifted from the gleam theme in hydrogen-themes, which is the working proof
   that this is worth doing: four numbers from which every radius, shadow and
   gap derives, so density and softness become settings rather than a fork of
   the stylesheet.

   Why it matters here: a guide's site has to feel like theirs. Without dials
   the only thing they could change was the accent colour, which is why the
   whole thing read as one template wearing different paint.

   Deliberately NOT lifted: gleam's seven commerce-bright accents. This product
   carries verification marks, and a page in hot pink devalues them. Restraint
   is part of what is being sold, so the dials personalise within a range
   rather than opening the whole gamut.

   Every value below is a multiplier with a neutral of 1, so leaving them
   untouched reproduces the current design exactly.
   ========================================================================== */

:root {
  --round: 1;    /* corner radius      0.2 sharp … 1.6 soft   */
  --space: 1;    /* density            0.9 tight … 1.15 airy  */
  --elev: 1;     /* shadow strength    0 flat    … 1.6 lifted */
  --motion: 1;   /* transition speed   0 off     … 1.4 slow   */

  /* Derived. Nothing below should hard-code a radius or a shadow again. */
  --r-sm: calc(3px * var(--round));
  --r-md: calc(6px * var(--round));
  --r-lg: calc(8px * var(--round));
  --r-pill: calc(999px * var(--round));

  --shadow-1: 0 1px 2px rgba(20, 29, 26, calc(.05 * var(--elev)));
  --shadow-2: 0 1px 2px rgba(20, 29, 26, calc(.05 * var(--elev))),
              0 12px 30px -22px rgba(20, 29, 26, calc(.4 * var(--elev)));
  --shadow-3: 0 2px 4px rgba(20, 29, 26, calc(.06 * var(--elev))),
              0 12px 28px -18px rgba(20, 29, 26, calc(.5 * var(--elev)));

  --t-fast: calc(.16s * var(--motion));
  --t-slow: calc(.3s * var(--motion));
}

/* Shadows read differently on a dark ground — the same alpha over near-black
   is invisible. Redefined at token level so components never branch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, calc(.4 * var(--elev)));
    --shadow-2: 0 1px 2px rgba(0, 0, 0, calc(.4 * var(--elev))),
                0 12px 30px -22px rgba(0, 0, 0, calc(.9 * var(--elev)));
    --shadow-3: 0 2px 4px rgba(0, 0, 0, calc(.5 * var(--elev))),
                0 12px 28px -18px rgba(0, 0, 0, calc(.95 * var(--elev)));
  }
}
:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, calc(.4 * var(--elev)));
  --shadow-2: 0 1px 2px rgba(0, 0, 0, calc(.4 * var(--elev))),
              0 12px 30px -22px rgba(0, 0, 0, calc(.9 * var(--elev)));
  --shadow-3: 0 2px 4px rgba(0, 0, 0, calc(.5 * var(--elev))),
              0 12px 28px -18px rgba(0, 0, 0, calc(.95 * var(--elev)));
}

/* `--motion: 0` is a setting; prefers-reduced-motion is not negotiable, so it
   wins regardless of what a site chose. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}

/* ---- components rewired onto the dials ---------------------------------- */

ul.cards a {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  gap: calc(.5rem * var(--space));
  padding: calc(1.15rem * var(--space)) calc(1.2rem * var(--space)) calc(1.1rem * var(--space));
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}
ul.cards { gap: calc(1rem * var(--space)); }
ul.cards a:hover {
  transform: translateY(calc(-2px * var(--elev)));
  box-shadow: var(--shadow-3);
}
.shot {
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin: calc(-1.15rem * var(--space)) calc(-1.2rem * var(--space)) .3rem;
  width: calc(100% + (2.4rem * var(--space)));
}

.panel, .band, .urlmap { border-radius: var(--r-lg); }
.hero { padding-block: calc(.6rem * var(--space)) calc(1.6rem * var(--space)); }
.sec { margin: calc(2.6rem * var(--space)) 0 calc(1.1rem * var(--space)); }

input, textarea, button, select { border-radius: var(--r-sm); }
a.btn, button[type="submit"] { border-radius: var(--r-sm); }
.chip { border-radius: var(--r-sm); }
.dest-search, .switcher { border-radius: var(--r-md); }
.shots img { border-radius: var(--r-md); }

/* ---- breadcrumb --------------------------------------------------------- */
.crumb {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .04em;
  margin: 0 0 .6rem;
  color: var(--muted);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb a::before { content: "\2190\00a0"; }

/* ---------------------------------------------------------- what to see
   Editorial notes about a place. Styled as prose rather than as cards on
   purpose: a card looks like a product, and these are not for sale. */
.seelist { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.seelist li {
  padding: calc(1rem * var(--space)) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  max-width: var(--measure);
}
.seelist li:last-child { border-bottom: 0; }
.seelist h3 {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-weight: 500;
  font-size: 1.16rem;
  margin: 0 0 .25rem;
  color: var(--ink);
}
.seelist p { margin: 0; }
.seelist .dur { color: var(--muted); font-size: .74rem; letter-spacing: .03em; }

/* -------------------------------------------------------------- enquiry
   Given a surface of its own, not a link in a footer. On a destination with
   no guides yet this is the only thing a reader can act on. */
.enquire { margin-block: 2rem; }
.enquire h2 {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 .4rem;
}
.enquire form { margin-top: 1.1rem; gap: calc(.9rem * var(--space)); }
.enquire .row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.9rem * var(--space));
}
.enquire .row .field { flex: 1 1 9rem; max-width: none; }
.enquire textarea { max-width: 34rem; }
.enquire .req { margin: 0; }

/* Secondary form: a destination that already lists guides should lead with
   them. Quieter surface, smaller heading — an offer to look further, not the
   main event. */
.enquire--alt { background: var(--surface-alt); box-shadow: none; }
.enquire--alt h2 { font-size: 1.12rem; }

/* ============================================================================
   PHOTO CARDS
   ----------------------------------------------------------------------------
   With a real photograph the image IS the card and the text sits on it. That
   is what travel sites do, and it is the difference between a directory and
   something someone looks at for more than a second.

   Only applied when there is actually a picture — `.photo` is set in the view.
   A card with no image keeps the quiet bordered treatment, because white text
   on a white box is not a design, it is a bug.
   ========================================================================== */

ul.cards a.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  justify-content: flex-end;
  padding: 1rem 1.1rem;
  border: 0;
  overflow: hidden;
  /* A dark ground so a slow image reveals as a fade, not a white flash. */
  background: #0e1513;
  box-shadow: var(--shadow-2);
}

ul.cards a.photo .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: auto;
  transition: transform calc(.5s * var(--motion)) ease;
}

/* The scrim. Two stops rather than a flat overlay so the top of the image
   stays as bright as the photographer left it and only the text area darkens.
   Without it, light photographs eat the city name. */
ul.cards a.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 12, 10, .82) 0%,
    rgba(6, 12, 10, .55) 26%,
    rgba(6, 12, 10, .06) 58%,
    rgba(6, 12, 10, 0) 100%
  );
}

ul.cards a.photo > * { position: relative; z-index: 1; }

ul.cards a.photo strong {
  color: #fff;
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  line-height: 1.1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
ul.cards a.photo .latin {
  color: rgba(255, 255, 255, .78);
  margin: 0;
  font-size: .84rem;
}
ul.cards a.photo .card-foot {
  border-top: 0;
  padding-top: .35rem;
  color: rgba(255, 255, 255, .82);
}
ul.cards a.photo .card-foot .n { color: #fff; }

/* Attribution has to stay legible without competing. Top-right, out of the
   way of the name, and it is a requirement of the licence rather than a
   flourish — so it never gets hidden on small screens. */
ul.cards a.photo .credit {
  position: absolute;
  top: .55rem;
  right: .7rem;
  bottom: auto;
  font-size: .62rem;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
ul.cards a.photo .credit a { color: inherit; text-decoration: none; }
ul.cards a.photo .credit a:hover { text-decoration: underline; }

/* Movement on the image, not the card. A whole tile lifting is a UI gesture;
   a photograph easing closer is the thing itself. */
ul.cards a.photo:hover { transform: none; box-shadow: var(--shadow-3); }
ul.cards a.photo:hover .shot { transform: scale(1.045); }
ul.cards a.photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Bigger tiles once there is something worth looking at. */
ul.cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
@media (max-width: 34rem) {
  ul.cards { grid-template-columns: 1fr; }
  ul.cards a.photo { aspect-ratio: 16 / 10; }
}