/* ============================================================
   XC_Inspiration_v1.css — Inspiration/Index and the eleven guides

   Additive, in the manner of XC_Auth_v1.css, XC_Tracker_v1.css and
   XC_Travel_v1.css: it redefines no design token and no .btn. Load
   order is XC_Home_v4.css first, this second.

   THESIS. The travel tips pages are an index you read. This one you
   look at. Eleven places, photographed, with the photograph doing the
   deciding — and on each one the single line a travel blog cannot
   print: the currency of the place and today's rate for it.

   FORM. A mosaic, not the contact sheet TravelTips/List uses. There
   the caption sits under the picture on the page ground; here the
   headline is set over the photograph the way a magazine sets a
   contents page, and the two deepest guides run at double width.
   Twenty places against five is a reason one tile can be twice the
   size of its neighbour — the sizes carry information rather than
   decorating the grid.

   COLOUR LOGIC. Over a photograph a colour cannot come from a theme
   token, so the plate hard-codes its ink exactly as .tt-stamp does.
   Amber is the rate figure itself here rather than a wash beneath it:
   the house rule bans amber as body text on light, and this text is
   neither body nor on light.
   ============================================================ */

/* ------------------------------------------------------------
   PAGE HEAD
   Short on purpose. In Experience mode the photographs are what
   should reach the visitor first, so the head says what the page
   is in two lines and gets out of the way.
   ------------------------------------------------------------ */
.ins-head {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.ins-head h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.026em;
  color: var(--ink);
}
.ins-lede {
  margin-top: 1.05rem;
  max-width: 56ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.62;
  color: var(--body);
}

/* ------------------------------------------------------------
   THE MOSAIC
   ------------------------------------------------------------ */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-item { grid-column: span 4; }
.ins-item.is-feature { grid-column: span 6; }

.ins-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  text-decoration: none;
  background: var(--surface-2);
}

/* the veil that deepens on hover. A separate layer rather than a
   change to the plate's gradient, because background-image does not
   interpolate and the transition would simply snap. */
.ins-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 6, 46, .20);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.ins-shot {
  display: block;
  aspect-ratio: 4 / 3;
}
.is-feature .ins-shot { aspect-ratio: 16 / 10; }
.ins-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- the plate the headline sits on ---------- */
.ins-plate {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: block;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(.95rem, 1.5vw, 1.35rem) clamp(.9rem, 1.3vw, 1.15rem);
  /* the ink over a photograph is hard-coded, the same exception
     .tt-stamp takes: no token can know what is underneath it */
  background: linear-gradient(to top,
    rgba(0, 6, 46, .93) 0%,
    rgba(0, 6, 46, .74) 38%,
    rgba(0, 6, 46, 0) 100%);
}

.ins-title {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -.016em;
  color: #FFFFFF;
  text-wrap: balance;
}
.is-feature .ins-title { font-size: clamp(1.45rem, 2.7vw, 2.3rem); }

.ins-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .86);
}
.is-feature .ins-meta { font-size: 11.5px; }

.ins-sep {
  width: 1px;
  height: 11px;
  flex: none;
  background: rgba(255, 255, 255, .32);
}
/* amber as ink, not as a wash: this is neither body text nor on light,
   which is the only place the house lets the accent be the letterform */
.ins-rate b { font-weight: 600; color: var(--accent-fill); }
/* a currency we hold but do not quote online keeps the line, in the
   plate's own ink rather than the accent: there is no figure to mark */
.ins-rate-none { color: rgba(255, 255, 255, .72); }

.ins-arw {
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: auto;
  color: rgba(255, 255, 255, .7);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), color .18s ease;
}

/* ---------- states ---------- */
.ins-tile:hover .ins-shot img { transform: scale(1.045); }
.ins-tile:hover::after { opacity: 1; }
.ins-tile:hover .ins-arw { transform: translateX(3px); color: var(--accent-fill); }

/* the ring goes round the whole tile: a keyboard user needs to see
   which photograph they are on, not which inline box */
.ins-tile:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 3px;
}
.ins-tile:focus-visible .ins-arw { transform: translateX(3px); color: var(--accent-fill); }

.ins-foot {
  margin-top: clamp(1.35rem, 2.4vw, 1.9rem);
  max-width: 74ch;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .01em;
  /* --muted measures 3.92:1 on --ground; the note steps up to --body */
  color: var(--body);
}

/* ------------------------------------------------------------
   THE CLOSE
   The same construction the two TravelTips surfaces end on: no fill
   of its own, a hairline and the house radius, so the page's last
   object sits on the ground and the footer's solid #000 reads as a
   deliberate close rather than a seam.
   ------------------------------------------------------------ */
.ins-band {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.ins-band .wrap { width: min(880px, 100% - 3rem); }

.ins-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding: clamp(1.35rem, 2.1vw, 1.75rem) clamp(1.75rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.ins-band-in h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
}
.ins-band-in p {
  margin-top: .7rem;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}
.ins-band-act { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  /* six columns: a feature runs the full width, everything else pairs */
  .ins-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ins-item { grid-column: span 3; }
  .ins-item.is-feature { grid-column: span 6; }
}

@media (max-width: 760px) {
  .ins-band-in { grid-template-columns: 1fr; padding: clamp(1.4rem, 5vw, 1.9rem); }
}

@media (max-width: 640px) {
  /* one column: two photographs side by side at this width stop being
     photographs of anywhere */
  .ins-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .ins-item,
  .ins-item.is-feature { grid-column: span 1; }
  .ins-shot,
  .is-feature .ins-shot { aspect-ratio: 4 / 3; }
  .ins-band-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ins-shot img,
  .ins-tile::after,
  .ins-arw { transition-duration: .01ms; }
  .ins-tile:hover .ins-shot img { transform: none; }
}

/* ============================================================
   ============================================================
   Inspiration/<guide> — one illustrated guide
   ============================================================

   THESIS. The index is the deciding; this is the arriving. Ninety-six
   places across eleven guides, every one of them a photograph and a
   paragraph — and at the top, the one line a travel blog cannot print:
   what an Australian dollar is worth once you land.

   FORM. A long read, so it is built like one. A headline, a plate, a
   standfirst, then a numbered sequence of places alternating left and
   right so the eye has somewhere to go on a page that can run to twenty
   entries. Hairlines divide; nothing is boxed. The photographs are the
   only filled objects, and each one opens full size.

   MODE. Read. Comprehension first, then make the reading worth staying
   in: 66ch measure, generous leading, the numeral in the margin.
   ============================================================ */

/* ------------------------------------------------------------
   OPENER
   ------------------------------------------------------------ */
.ig-open { padding-bottom: clamp(1.4rem, 2.4vw, 2rem); }

.ig-crumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--body);
}
.ig-crumb svg { width: 11px; height: 11px; color: var(--muted); flex: none; }
.ig-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;
}
.ig-crumb a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.ig-crumb [aria-current] { color: var(--ink); }

.ig-open h1 {
  margin-top: 1.1rem;
  max-width: 20ch;
  font-size: clamp(2.15rem, 5vw, 3.7rem);
  line-height: .99;
  letter-spacing: -.028em;
  color: var(--ink);
}

/* .wrap centres with margin-inline:auto, so a blanket margin:0 here
   un-centred the plate and let it bleed off the left of the grid */
.ig-hero { margin-inline: auto; margin-block: 0; }
.ig-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* the one authored moment: the place settles in once, on arrival */
  animation: ig-settle .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes ig-settle {
  from { transform: scale(1.04); opacity: .001; }
  to   { transform: none;        opacity: 1; }
}

/* ---------- standfirst: the prose left, the money right ---------- */
.ig-standfirst {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
.ig-intro p {
  max-width: 66ch;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.68;
  color: var(--body);
}
/* a guide that never had an introduction gets one sentence of our own
   rather than a gap where the standfirst should be */
.ig-intro-none p { color: var(--body); }

.ig-money { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.ig-money-facts { margin: 0; }
.ig-money-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.ig-money-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 voice steps up to --body */
  color: var(--body);
}
.ig-money-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.ig-money-facts dd b {
  font-weight: 600;
  box-shadow: inset 0 -.32em 0 var(--accent-wash);
}
.ig-money-facts dd span { color: var(--body); font-weight: 500; }

.ig-money-note {
  margin-top: .8rem;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--body);
}
.ig-money .btn { margin-top: 1.1rem; }

/* ------------------------------------------------------------
   THE PLACES
   ------------------------------------------------------------ */
.ig-places ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ig-place;
}

.ig-place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
}
.ig-place:first-child { border-top: 1px solid var(--line-strong); }

/* alternate, so a guide that runs to twenty places has a rhythm rather
   than twenty identical rows */
.ig-place:nth-child(even) .ig-shot { order: 2; }

.ig-shot { margin: 0; }
.ig-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: zoom-in;
}
.ig-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.ig-frame:hover img { transform: scale(1.045); }
.ig-frame:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; }

.ig-copy { min-width: 0; }
.ig-num {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--brand);
}
.ig-copy h2 {
  margin-top: .55rem;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.ig-copy p {
  margin-top: .9rem;
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.68;
  color: var(--body);
}

/* ------------------------------------------------------------
   THE VIEWER
   Same construction as the TravelTips deck viewer: a native dialog,
   so Escape, the backdrop and the focus trap are the browser's job.
   ------------------------------------------------------------ */
.ig-lb {
  width: min(1240px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-navy);
  overflow: visible;
}
.ig-lb::backdrop {
  background: rgba(0, 6, 46, .88);
  backdrop-filter: blur(7px);
}
.ig-lb-in { position: relative; }
.ig-lb-in:focus { outline: none; }
.ig-lb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--navy-deep);
}
.ig-lb-cap {
  margin-top: .9rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--on-navy);
}

.ig-lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}
.ig-lb-btn svg { width: 19px; height: 19px; }
.ig-lb-btn:hover { background: rgba(221, 225, 247, .14); border-color: var(--on-navy); }
.ig-lb-btn[disabled] { opacity: .35; cursor: default; }

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

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .ig-standfirst { grid-template-columns: 1fr; gap: 2rem; }
  .ig-hero img { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .ig-place {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  /* the alternation is meaningless in one column, and leaving it on puts
     half the photographs under the text they belong to */
  .ig-place:nth-child(even) .ig-shot { order: 0; }
  .ig-hero img { aspect-ratio: 4 / 3; }
  .ig-lb { width: 96vw; }
  .ig-lb-prev { left: .5rem; }
  .ig-lb-next { right: .5rem; }
  .ig-lb-x { top: -3.1rem; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ig-hero img { animation: none; }
  .ig-frame img,
  .ig-crumb a,
  .ig-lb-btn { transition-duration: .01ms; }
  .ig-frame:hover img { transform: none; }
}

/* ------------------------------------------------------------
   TYPE

   Inter and sentence case are the whole redesign's now, set by the two
   shared layouts and by the tokens in XC_Home_v4.css. What is left here
   is only what these two surfaces tune for themselves: display sizes,
   which come up a little because Inter sits smaller on the line than
   Source Serif did, and the tracking on the labels this file owns.
   ------------------------------------------------------------ */
.ins-meta      { letter-spacing: .01em; font-size: 11.5px; }
.is-feature .ins-meta { font-size: 12px; }
.ins-foot      { letter-spacing: 0; font-size: 12px; }
.ig-crumb      { letter-spacing: .01em; font-size: 12px; }
.ig-num        { letter-spacing: .02em; font-size: 12px; }
.ig-money-note { letter-spacing: 0; font-size: 11.5px; }
.ig-lb-cap     { letter-spacing: .01em; font-size: 12px; }
.ig-money-facts dt { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

.ins-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.75rem); font-weight: 700; letter-spacing: -.03em; }
.ig-open h1  { font-size: clamp(2.25rem, 5.2vw, 3.85rem); font-weight: 700; letter-spacing: -.032em; }
.ins-title   { font-weight: 600; letter-spacing: -.018em; }
.ig-copy h2  { font-weight: 600; letter-spacing: -.02em; }
.ins-band-in h2 { font-weight: 600; }