/* ============================================================
   XC_Travel_v1.css — TravelTips/List and TravelTips/Detail

   Additive, like XC_Auth_v1.css and XC_Tracker_v1.css: it redefines
   no token and no .btn. It sits on top of

       XC_Home_v4.css   tokens, .btn, .wrap, .section, .band, .rise,
                        .num, .sr-only, masthead, footer

   and adds only the destination index — the page head, the filter
   bar, and the plate.

   THESIS. This is not a photo gallery of nice places. It is the index
   of every destination Xc Exchange can put cash in your hand for, so
   each entry prints the currency of the place and today's rate for it
   beside the picture rather than hiding both a click away. The
   photograph earns the click; the rate line is why this page belongs
   to a currency house and not to a travel blog.

   FORM. A contact sheet, not a card grid. The photograph is the only
   filled object; the caption beneath it sits on the page ground,
   ruled off by a hairline, the way a plate is captioned in print.
   That keeps the house rule — cards are not a structural device —
   while letting the photography do the work an index of places needs
   it to do.

   COLOUR LOGIC. Blue is structure: the rule under a plate on hover,
   the read-the-guide arrow, the active filter. Amber is reserved for
   the rate figure, which is the one number on the page that moves and
   the only reason a traveller is reading an index rather than a map.
   Neutrals carry everything else so the photographs are the
   only colour competing.
   ============================================================ */

/* ============================================================
   PAGE HEAD

   Asymmetric on purpose: the ask on the left at reading measure, the
   two standing facts on the right in mono, hairline-ruled off it.
   They are a count and a timestamp, not a metric display — they answer
   "how much of this is there, and how fresh is it".
   ============================================================ */
.tt-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  padding-bottom: 2.25rem;
}

.tt-head h1 {
  /* the ask is one sentence and reads as one line: the size scales with the
     viewport instead of wrapping, so "Where are you going?" never breaks */
  /* Inter sets this line about 16% wider than Source Serif did, which
     left 9px of slack at the two-column breakpoint -- one stray metric
     from wrapping. The sizes come down to put the room back. */
  font-size: clamp(1.5rem, 6.4vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
  white-space: nowrap;
}

.tt-lede {
  margin-top: 1.15rem;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.62;
  color: var(--body);
  max-width: 54ch;
}

.tt-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}
.tt-facts dt {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  /* the house label voice is --muted (DESIGN.md, Type), but --muted on
     --ground measures 3.92:1 and this is text a reader has to read. The
     voice is the font, size, tracking and case; the colour steps up one
     token to clear 4.5:1. The same swap is owed to .eyebrow system-wide. */
  color: var(--body);
}
.tt-facts dd {
  margin: .45rem 0 0;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

/* ============================================================
   FILTER BAR

   One row: the search field, the region buttons, the live count.
   Not sticky. A sticky bar on a page whose whole body is one grid
   buys nothing and can sit over a keyboard-focused plate, which is
   the failure WCAG 2.2 names focus-not-obscured.
   ============================================================ */
.tt-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.tt-search {
  position: relative;
  flex: 0 1 302px;
  display: flex;
  align-items: center;
}
.tt-search-icn {
  position: absolute;
  left: .68rem;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
  transition: color .18s ease;
}
.tt-search input {
  width: 100%;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: .58rem 2.1rem .58rem 2.1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.tt-search input::placeholder { color: var(--muted); }
.tt-search input:hover { border-color: var(--muted); }
.tt-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .1);
}
.tt-search input:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.tt-search:focus-within .tt-search-icn { color: var(--brand); }

/* the browser's own clear affordance is removed so the drawn one is
   the only one, and so the field does not carry two crosses */
.tt-search input::-webkit-search-cancel-button,
.tt-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.tt-search-clear {
  position: absolute;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.tt-search-clear svg { width: 13px; height: 13px; }
.tt-search-clear:hover { color: var(--ink); background: var(--surface-2); }

.tt-regions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-right: auto;
}
.tt-chip {
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  /* 24px CSS px is the WCAG 2.2 floor; this clears it in both axes */
  padding: .58rem .7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.tt-chip:hover { color: var(--ink); background: var(--surface-2); border-color: var(--muted); }
.tt-chip.is-on {
  color: var(--surface);
  background: var(--brand);
  border-color: var(--brand);
}

.tt-count {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  /* --body, not --muted: on the light ground --muted lands at 3.92:1,
     and this line is a live result count, not a field label */
  color: var(--body);
  white-space: nowrap;
}

/* ============================================================
   THE INDEX

   auto-fill rather than auto-fit: with one destination left after a
   filter, auto-fit stretches it across the full 1240px and the page
   reads as broken. auto-fill keeps the column width the grid
   promised and leaves the empty tracks empty.
   ============================================================ */
.tt-index-wrap { padding: 2.25rem 0 4.5rem; }

.tt-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 2.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-item.is-out { display: none; }

.tt-plate {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
}

/* ---------- the photograph ---------- */
.tt-shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
/* the direct child only: the stamp's flag is also an img inside
   .tt-shot, and a descendant selector here sizes it to the plate */
.tt-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), filter .35s ease;
}

/* a floor of contrast under the stamp, drawn only where the stamp
   sits — a veil across the whole photograph would flatten every
   picture to make room for one small label */
.tt-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 6, 46, .46), rgba(0, 6, 46, 0));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
/* on its own, never grouped: a browser without :has() must drop this
   rule alone. The stamp is legible without the gradient anyway — it
   carries its own sheet and hairline — so the absence degrades to
   "slightly less grounded", not to "unreadable". */
.tt-shot:has(.tt-stamp)::after { opacity: 1; }

/* currency stamp — flag plus code, the destination's money named on
   the picture itself */
.tt-stamp {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .27rem .45rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(0, 6, 46, .12);
  box-shadow: 0 1px 3px rgba(0, 10, 77, .22);
  /* the sheet is near-white in both themes, so the stamp fixes its own
     ink rather than inheriting a light one in dark mode */
  color: #05082A;
}
.tt-stamp .num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: #05082A;
}
.tt-flag {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 1px;
}

/* ---------- the caption ---------- */
.tt-body {
  display: grid;
  align-content: start;
  gap: .3rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-strong);
  position: relative;
}

/* the hairline the caption hangs from becomes brand blue on hover,
   drawn from the left. The one authored moment on this surface, and
   it moves a transform, never a width. */
.tt-body::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

.tt-titleline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.tt-name {
  font-family: var(--f-display);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
  transition: color .18s ease;
}
/* the affordance, carried by the name instead of by a repeated CTA
   line. Always drawn — an arrow that only exists on hover tells a
   touch user nothing — and it travels on hover. */
.tt-arw {
  width: 12px;
  height: 12px;
  margin-left: .3rem;
  vertical-align: baseline;
  color: var(--muted);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), color .18s ease;
}
.tt-region {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--body);
  white-space: nowrap;
  flex: none;
}

/* the rate. Amber is the figure and only the figure. */
.tt-rate {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem;
}
.tt-rate-from { font-weight: 500; letter-spacing: .02em; }
.tt-rate b {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  /* the amber is the underline beneath the figure, not the figure's
     own colour: amber is never body text on light */
  box-shadow: inset 0 -.34em 0 var(--accent-wash);
}
.tt-rate-code { font-weight: 500; color: var(--body); }
.tt-rate-none { font-style: normal; color: var(--body); }

/* ---------- states ---------- */
.tt-plate:hover .tt-shot > img { transform: scale(1.055); }
.tt-plate:hover .tt-body::before { transform: scaleX(1); }
.tt-plate:hover .tt-arw { transform: translateX(3px); color: var(--brand); }
.tt-plate:hover .tt-name { color: var(--brand); }

/* the focus ring belongs on the whole plate, not on the anchor's
   inline box, or a keyboard user sees a ring around the caption and
   no indication which photograph they are on */
.tt-plate:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 4px;
  border-radius: var(--r);
}
.tt-plate:focus-visible .tt-body::before { transform: scaleX(1); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.tt-empty {
  margin-top: 1rem;
  padding: 2.4rem 1.75rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.tt-empty-h {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.tt-empty-h b { font-weight: 600; color: var(--brand); }
.tt-empty-p {
  margin: .6rem auto 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
.tt-empty-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.35rem;
}

/* ============================================================
   CLOSING BAND
   Two columns on the navy field, same construction as the home
   page's bands so the page closes in the house's voice.
   ============================================================ */
.tt-band-in,
.td-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: center;
  padding: 3rem 0;
}
.tt-band-in h2,
.td-band-in h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  color: var(--on-navy);
}
.tt-band-in p,
.td-band-in p {
  margin-top: .7rem;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-navy-dim);
}
.tt-band-act,
.td-band-act { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .tt-head {
    grid-template-columns: 1fr;
    gap: 1.9rem;
    align-items: start;
  }
  .tt-facts { gap: 1rem; }
}

@media (max-width: 760px) {
  .tt-index { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 2rem 1.25rem; }
  .tt-filter { gap: .7rem; }
  .tt-search { flex: 1 1 100%; }
  .tt-regions { margin-right: 0; }
  .tt-count { width: 100%; }
  .tt-band-in,
  .td-band-in { grid-template-columns: 1fr; padding: 2.4rem 0; }
}

@media (max-width: 520px) {
  /* one column below this: two 150px-wide photographs side by side
     stop being photographs of anywhere */
  .tt-index { grid-template-columns: 1fr; gap: 1.9rem; }
  /* one column: at this width "24 destinations, 24 priced" breaks
     mid-phrase in a half-width track while the other half sits empty */
  .tt-facts { grid-template-columns: 1fr; row-gap: 1.05rem; }
  .tt-band-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tt-shot > img,
  .tt-body::before,
  .tt-arw,
  .tt-search-icn,
  .tt-chip,
  .tt-search input { transition-duration: .01ms; }
  .tt-plate:hover .tt-shot > img { transform: none; }
  .tt-body::before { transform: scaleX(1); background: var(--line-strong); }
  .tt-plate:hover .tt-body::before { background: var(--brand); }
}

/* ============================================================
   ============================================================
   TravelTips/Detail — one destination guide
   ============================================================

   THESIS. A destination guide written by a currency house has one
   thing a travel blog does not: the rate. So every local price is
   printed twice — what the guide records locally, and what that
   costs in Australian dollars at today's server-priced rate. The
   photograph sets the place; the second column is the reason the
   page belongs to us.

   FORM. An asymmetric opener: the money on the left at reading
   measure, the place on the right. Below it, three plain measures —
   a fact list, a table and a numbered list — separated by hairlines
   and nothing else. No panel, no tile, no card. The only filled
   objects on the page are the photographs and the two buttons.

   COLOUR LOGIC. Identical to the index. Blue is structure and the
   icon set; amber is spent only on figures that move — the rate and
   the Australian column — and always as a wash under the number,
   never as ink.
   ============================================================ */

/* the browser's own surfaces belong to the design too */
.td-hero ::selection,
.td-money ::selection,
.td-costs ::selection,
.td-tips-wrap ::selection,
.td-gal-wrap ::selection { background: var(--accent-fill); color: var(--accent-ink); }

/* ------------------------------------------------------------
   OPENER
   ------------------------------------------------------------ */
.td-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-top: clamp(2.4rem, 4vw, 3.6rem);
  padding-bottom: clamp(2.6rem, 4vw, 4rem);
}

.td-crumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--body);
}
.td-crumb svg { width: 11px; height: 11px; color: var(--muted); flex: none; }
.td-crumb a {
  text-decoration: none;
  color: var(--body);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.td-crumb a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.td-crumb [aria-current] { color: var(--ink); }

.td-hero h1 {
  margin-top: 1.15rem;
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.028em;
  color: var(--ink);
}

.td-lede {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.62;
  color: var(--body);
}

/* the one figure the page exists to attach to a place */
.td-rate {
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-strong);
}
.td-rate-fig {
  font-family: var(--f-mono);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--body);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
}
.td-rate-from { font-size: .5em; font-weight: 500; letter-spacing: .02em; }
.td-rate-fig b {
  font-weight: 600;
  color: var(--ink);
  /* amber as a wash under the figure, never as ink on light */
  box-shadow: inset 0 -.3em 0 var(--accent-wash);
}
.td-rate-code { font-size: .52em; font-weight: 500; letter-spacing: .04em; }
.td-rate-none { color: var(--body); }
.td-rate-note {
  margin-top: .65rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--body);
  max-width: 48ch;
}
.td-rate-act {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.35rem;
}

.td-shot { position: relative; margin: 0; }
.td-shot picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.td-shot picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* the one authored moment on this surface: the place settles into
     place once, on arrival. Transform and opacity only. */
  animation: td-settle .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes td-settle {
  from { transform: scale(1.055); opacity: .001; }
  to   { transform: none;         opacity: 1; }
}

/* same stamp as the index plates, so a destination is labelled the
   same way whether it is one of twenty-four or on its own page */
.td-stamp {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .55rem;
  background: rgba(255, 255, 255, .93);
  color: #05082A;
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
}
.td-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 1px;
  display: block;
}
.td-stamp-sep {
  width: 1px;
  height: 11px;
  background: rgba(5, 8, 42, .28);
}

/* ------------------------------------------------------------
   SECTIONS — hairline separation, nothing else
   ------------------------------------------------------------ */
.td-money,
.td-costs,
.td-tips-wrap,
.td-gal-wrap { border-top: 1px solid var(--line); }

.td-sec-head {
  max-width: 64ch;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
}
.td-sec-head h2 {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.td-sec-head p {
  margin-top: .8rem;
  font-size: 15px;
  line-height: 1.62;
  color: var(--body);
}

/* ------------------------------------------------------------
   THE MONEY
   ------------------------------------------------------------ */
.td-money-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.td-facts { margin: 0; }
.td-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.td-facts > div:first-child { border-top: 1px solid var(--line-strong); }
.td-facts dt {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  /* --muted measures 3.92:1 on --ground; label text steps up to --body */
  color: var(--body);
}
.td-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

.td-dens h3 {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--body);
}
.td-den-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .75rem 0 1.6rem;
}
.td-den-list li {
  padding: .42rem .72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
/* coins are context, not stock: the same object, unfilled */
.td-den-coins li {
  background: none;
  border-color: var(--line);
  color: var(--body);
}
.td-den-note {
  max-width: 48ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------------------
   WHAT THINGS COST — the local figure, and the same figure in AUD
   ------------------------------------------------------------ */
.td-cost {
  width: 100%;
  border-collapse: collapse;
}
.td-cost th,
.td-cost td {
  text-align: left;
  padding: .95rem .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.td-cost th:first-child,
.td-cost td:first-child { padding-left: 0; }
.td-cost th:last-child,
.td-cost td:last-child { padding-right: 0; }

.td-cost thead th {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--body);
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-strong);
}

/* the icon and the label share an inner flex line rather than turning the
   cell itself into a flex container: a th that stops being a table-cell
   stops sharing the row height, and each cell then paints its hairline at
   its own baseline */
.td-cost tbody th.td-cost-what {
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.td-cost-lineup {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.td-cost-icn {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand);
}

.td-cost .td-cost-local,
.td-cost .td-cost-aud { text-align: right; white-space: nowrap; }
/* the two figure columns are held narrow and to the right, so a number
   never drifts a third of the page away from the label it belongs to */
.td-cost .td-cost-local { width: 17%; color: var(--body); font-size: 14.5px; }
.td-cost .td-cost-aud { width: 19%; }
.td-cost-aud b {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  box-shadow: inset 0 -.32em 0 var(--accent-wash);
}
.td-cost-none { color: var(--body); }

/* the column label rides each figure only in the stacked layout */
.td-cost-lbl { display: none; }

.td-cost tbody tr { transition: background-color .16s ease; }
.td-cost tbody tr:hover th,
.td-cost tbody tr:hover td { background: var(--surface); }

.td-cost-foot {
  margin-top: 1.15rem;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.62;
  color: var(--body);
}

/* ------------------------------------------------------------
   BEFORE YOU GO
   ------------------------------------------------------------ */
.td-tips {
  list-style: none;
  counter-reset: td-tip;
  padding: 0;
  margin: 0;
  max-width: 80ch;
}
.td-tips li {
  counter-increment: td-tip;
  position: relative;
  padding: 1.05rem 0 1.05rem 2.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body);
}
.td-tips li:first-child { border-top: 1px solid var(--line-strong); }
.td-tips li::before {
  content: counter(td-tip);
  position: absolute;
  left: 0;
  top: 1.2rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--brand);
}

/* ------------------------------------------------------------
   THE PLACE — the no-script floor: a scroll strip. The deck that
   replaces it once the script runs is at the foot of this file.
   ------------------------------------------------------------ */
.td-gal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}
.td-gal-head h2 {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.td-gal-nav { display: flex; gap: .5rem; flex: none; }
.td-gal-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.td-gal-btn svg { width: 16px; height: 16px; }
.td-gal-btn:hover { color: var(--brand); border-color: var(--brand); }
.td-gal-btn[disabled] { color: var(--muted); border-color: var(--line); cursor: default; }
.td-gal-btn[disabled]:hover { color: var(--muted); border-color: var(--line); }

.td-gal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 33.5%);
  gap: 1.25rem;
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  padding: 0 0 1.1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* the scrollbar is part of this component, not a browser default */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--surface-2);
}
.td-gal::-webkit-scrollbar { height: 6px; }
.td-gal::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 3px; }
.td-gal::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.td-gal::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.td-gal:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 6px; }

.td-gal > li { scroll-snap-align: start; }
.td-gal figure { margin: 0; }
.td-gal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.td-gal figcaption {
  margin-top: .65rem;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--body);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .td-hero {
    grid-template-columns: 1fr;
    gap: 1.9rem;
  }
  /* the place first at this width: the photograph is the fastest way
     to confirm you are on the right guide */
  .td-shot { order: -1; }
  .td-shot picture img { aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .td-money-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* the table stacks: each row keeps its name on one line and puts the
     two figures side by side underneath, each carrying its own label */
  .td-cost,
  .td-cost tbody,
  .td-cost tr,
  .td-cost th,
  .td-cost td { display: block; }
  .td-cost thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .td-cost tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: .55rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
  }
  .td-cost tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .td-cost th,
  .td-cost td { padding: 0; border: 0; }
  .td-cost tbody th.td-cost-what { grid-column: 1 / -1; }
  .td-cost .td-cost-local { width: auto; text-align: left; }
  .td-cost .td-cost-aud { width: auto; text-align: right; }
  .td-cost-lbl {
    display: inline;
    margin-right: .4rem;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--body);
  }
  .td-cost tbody tr:hover th,
  .td-cost tbody tr:hover td { background: none; }

  .td-gal { grid-auto-columns: minmax(230px, 82%); }
  .td-gal-head { flex-wrap: wrap; }
  .td-rate-act .btn,
  .td-band-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .td-shot picture img { animation: none; }
  .td-gal { scroll-behavior: auto; }
  .td-crumb a,
  .td-gal-btn,
  .td-cost tbody tr { transition-duration: .01ms; }
}

/* ------------------------------------------------------------
   THE DECK — the strip above, turned in perspective

   The scroll strip is the no-script floor and stays exactly as it
   is. Once xc-travel_v1.js runs it adds .is-deck and the same list
   becomes a deck of frames fanned away from the centre one, which
   opens full size. Only transform and opacity are animated, and the
   whole thing collapses back to a row of flat photographs under
   prefers-reduced-motion.
   ------------------------------------------------------------ */
.td-gal.is-deck {
  /* one card width drives the stage height and every offset, so the
     deck scales as one object rather than six loose numbers */
  --cw: clamp(240px, 31vw, 440px);
  display: block;
  position: relative;
  width: 100%;
  margin-inline: 0;
  /* the floor the reflection stands on is a share of the frame, not a
     fixed slab: a fixed one leaves a phone-sized deck floating in it */
  height: calc(var(--cw) * .667 + var(--cw) * .18);
  padding: 0;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 38%;
  scroll-snap-type: none;
  overflow-x: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.td-gal.is-deck:active { cursor: grabbing; }

.td-gal.is-deck > li {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  scroll-snap-align: none;
  transition:
    transform .62s cubic-bezier(.22, .61, .36, 1),
    opacity .4s ease;
  will-change: transform;
}
.td-gal.is-deck figcaption { display: none; }

.td-frame { display: block; text-decoration: none; }
.td-gal.is-deck .td-frame {
  border-radius: var(--r);
  overflow: hidden;
  /* kept light on purpose: a deep shadow pools under the deck and
     swallows the reflection the frames are standing on */
  box-shadow:
    0 18px 34px -26px rgba(0, 10, 77, .50),
    0 1px 3px rgba(0, 10, 77, .08);
  /* the deck stands on its own reflection. Webkit-only, and the deck
     reads correctly without it, so it stays an enhancement. */
  -webkit-box-reflect: below 5px linear-gradient(rgba(0, 0, 0, .42), transparent 38%);
  transition: box-shadow .35s ease;
}
.td-gal.is-deck img { border: 0; }
.td-gal.is-deck [data-active] .td-frame {
  box-shadow:
    0 26px 46px -28px rgba(0, 10, 77, .55),
    0 2px 5px rgba(0, 10, 77, .10);
}
/* the centre frame is the one that opens; the others only step forward */
.td-gal.is-deck [data-active] .td-frame { cursor: zoom-in; }
.td-frame:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; }

/* one caption for the deck, under the centre frame */
.td-deck-cap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.35rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--body);
}
.td-deck-cap .num { color: var(--body); }
/* a hairline between the name and the count, so an image called
   "Bangla Road 1" does not run into "3 / 6" as one string */
.td-deck-sep {
  width: 1px;
  align-self: center;
  height: 11px;
  background: var(--line-strong);
}

/* ------------------------------------------------------------
   THE VIEWER — a native dialog, so Escape, the backdrop and the
   focus trap are the browser's job rather than ours
   ------------------------------------------------------------ */
.td-lb {
  width: min(1240px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-navy);
  overflow: visible;
}
.td-lb::backdrop {
  background: rgba(0, 6, 46, .88);
  backdrop-filter: blur(7px);
}
.td-lb-in { position: relative; }
.td-lb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--navy-deep);
}
.td-lb-cap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .85rem;
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--on-navy);
}
.td-lb-cap .num { color: var(--on-navy-dim); }
.td-lb-cap .td-deck-sep { background: rgba(221, 225, 247, .35); }
.td-lb-in:focus { outline: none; }

.td-lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px clears the touch-target floor without a hit-area hack */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(221, 225, 247, .30);
  border-radius: var(--r);
  background: rgba(0, 6, 46, .62);
  color: var(--on-navy);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.td-lb-btn svg { width: 19px; height: 19px; }
.td-lb-btn:hover { background: rgba(221, 225, 247, .14); border-color: var(--on-navy); }
.td-lb-btn[disabled] { opacity: .35; cursor: default; }
.td-lb-btn[disabled]:hover { background: rgba(0, 6, 46, .62); border-color: rgba(221, 225, 247, .30); }

.td-lb-x    { top: -3.4rem; right: 0; }
.td-lb-prev { top: 50%; left: 1rem;  transform: translateY(-50%); }
.td-lb-next { top: 50%; right: 1rem; transform: translateY(-50%); }

@media (max-width: 700px) {
  .td-gal.is-deck { --cw: clamp(200px, 68vw, 320px); }
  .td-lb { width: 96vw; }
  .td-lb-prev { left: .5rem; }
  .td-lb-next { right: .5rem; }
  .td-lb-x { top: -3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* no fan, no travel: the deck lies flat and the frames simply change */
  .td-gal.is-deck > li,
  .td-gal.is-deck .td-frame { transition-duration: .01ms; }
}

/* ------------------------------------------------------------
   THE CLOSE

   This was a full-bleed navy field, which put two near-blacks against
   each other where it met the footer. It now makes the same move the
   home page makes: the page's last section is its brightest surface,
   so the footer's solid #000 reads as a deliberate close rather than
   the band dissolving into it.

   The container has no fill of its own -- the page ground shows
   through it. A hairline and the house radius are the whole thing,
   and the amber button is the only filled object left down here.
   ------------------------------------------------------------ */
.tt-band,
.td-band {
  background: none;
  border: 0;
  color: var(--body);
  /* the room under the card is what keeps the ground, not the card,
     against the footer */
  padding: clamp(1.25rem, 2.6vw, 2.25rem) 0 clamp(3.5rem, 6vw, 5rem);
}

/* the band ran wider than the page grid to give the home page's map
   room to breathe. This one pulls in well inside it: a closing card is
   one last thing to read, not another full-width section, and the
   ground either side of it is what makes it read as a card at all. */
.tt-band .wrap,
.td-band .wrap { width: min(880px, 100% - 3rem); }

.tt-band-in,
.td-band-in {
  /* less top and bottom than side: the card holds two short lines and
     a pair of buttons, and square padding left it standing taller than
     it has anything to say */
  padding: clamp(1.35rem, 2.1vw, 1.75rem) clamp(1.75rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}

.tt-band-in h2,
.td-band-in h2 { color: var(--ink); }

.tt-band-in p,
.td-band-in p { color: var(--body); }

@media (max-width: 760px) {
  /* the stacked rule above this zeroes the side padding, which a framed
     card cannot do */
  .tt-band-in,
  .td-band-in { padding: clamp(1.4rem, 5vw, 1.9rem); }
}