/* ============================================================
   JUNO PORTALS · destinations.css
   The quieter editorial scale, in the voice of the MAG: mixed case,
   smaller, lighter. Hairlines instead of frames, a centred masthead
   instead of a poster.

   Loaded after styles.css and editorial.css on:
     body.dest   · /destinations/ and every /destinations/[place]/
     body.quiet  · /about/ and /partner/ · the type only, the pages
                   keep their own layout

   Everything is scoped to one of those two classes, so a page
   without them is untouched.
   ============================================================ */

/* ---------- the masthead ----------
   Centred, like the MAG front page. No longer a full screen. */
body.dest .hero{
  min-height:0;display:block;
  padding:var(--s-6) 0 var(--s-5);
  text-align:center;
}
body.dest .hero .wrap{max-width:760px}
body.dest .hero .label{
  font-size:.72rem;letter-spacing:.2em;
}
body.dest .h-hero,body.quiet .h-hero{
  text-transform:none;
  letter-spacing:-0.04em;
  font-size:clamp(2.4rem,7vw,4.6rem);
  line-height:1.02;
}
body.dest .hero .lede{
  max-width:34em;margin-left:auto;margin-right:auto;
  font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.55;
}
body.dest .hero .copy{max-width:34em;margin-left:auto;margin-right:auto}
body.dest .hero .btn-stack{max-width:420px;margin-left:auto;margin-right:auto}
body.dest .hero .statement{color:var(--color-accent)}

/* ---------- headings and held sentences ----------
   The size of "More stories" on the MAG, not of a poster. */
body.dest .h-section,body.quiet .h-section{
  text-transform:none;
  letter-spacing:-0.04em;
  font-size:clamp(1.7rem,4vw,2.4rem);
  line-height:1.08;
}
body.dest .statement,body.quiet .statement{
  letter-spacing:-0.04em;
  font-size:clamp(1.5rem,4.2vw,2.2rem);
  line-height:1.2;
}

/* the questions · a title, not a headline */
body.dest #faq .display,body.quiet #faq .display{
  text-transform:none;
  font-family:var(--font-display);letter-spacing:-0.04em;
  font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.2;
}

/* the steps · a quieter number */
body.dest .step-no,body.quiet .step-no{font-size:22px}

/* ---------- the portals of a place ----------
   A contents page rather than a framed card. Each portal is a row:
   its number and name small and in the accent, the place as a title
   in the display face, the note quiet underneath. */
body.dest .journeymap,body.quiet .journeymap{
  background:none;border:0;padding:0;
  margin-top:var(--s-5);
}
body.dest .journeymap-place,body.quiet .journeymap-place{
  text-transform:none;letter-spacing:-0.04em;
  font-size:clamp(1.4rem,3.4vw,1.8rem);line-height:1.1;
  padding-bottom:var(--s-3);
}
body.dest .journeymap-entry,body.quiet .journeymap-entry{padding:var(--s-4) 0}
body.dest .journeymap-entry:first-of-type,body.quiet .journeymap-entry:first-of-type{margin-top:0}
body.dest .journeymap-entry:last-child,body.quiet .journeymap-entry:last-child{border-bottom:1px solid var(--color-line-soft)}
body.dest .journeymap-name,body.quiet .journeymap-name{font-size:.72rem;letter-spacing:.2em}
body.dest .journeymap-where,body.quiet .journeymap-where{
  margin-top:6px;
  font-family:var(--font-display);letter-spacing:-0.04em;
  font-size:clamp(1.3rem,3.4vw,1.6rem);line-height:1.15;
}
body.dest .journeymap-when,body.quiet .journeymap-when{margin-top:8px}
body.dest .journeymap .body,body.quiet .journeymap .body{margin-top:6px !important}

/* ---------- the index of places ----------
   /destinations/ · one place per row, like "More stories": a number,
   the country and count, the name in the display face, one line
   about it, and an arrow that follows the pointer. */
.dest-index{list-style:none;margin:var(--s-5) 0 0;padding:0}
.dest-index li{margin:0}
.dest-row{
  display:grid;grid-template-columns:auto 1fr auto;
  column-gap:var(--s-4);align-items:baseline;
  padding:var(--s-4) 0;
  border-top:1px solid var(--color-line-soft);
  color:var(--color-text);text-decoration:none;
}
.dest-index li:last-child .dest-row{border-bottom:1px solid var(--color-line-soft)}
.dest-no{
  font-size:11px;font-weight:400;letter-spacing:.1em;
  color:var(--color-disabled);font-variant-numeric:tabular-nums;
}
.dest-kicker{
  display:flex;flex-wrap:wrap;gap:4px 14px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.dest-country{color:var(--color-accent)}
.dest-count{color:var(--color-disabled)}
.dest-name{
  display:block;margin-top:8px;
  font-family:var(--font-display);letter-spacing:-0.04em;font-weight:400;
  font-size:clamp(1.6rem,4.5vw,2.3rem);line-height:1.05;
  transition:color .2s ease;
}
.dest-excerpt{display:block;margin-top:8px;line-height:1.5;font-size:.95rem}
.dest-arrow{
  align-self:center;color:var(--color-accent);
  transition:transform .2s ease;
}
.dest-row:hover .dest-name,.dest-row:focus-visible .dest-name{color:var(--color-accent)}
.dest-row:hover .dest-arrow{transform:translateX(4px)}
.dest-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}

@media (min-width:760px){
  .dest-row{column-gap:var(--s-5);padding:var(--s-5) 0}
  .dest-excerpt{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  .dest-name,.dest-arrow{transition:none}
}

/* ---------- the pages that keep their own layout ----------
   /about/ and /partner/ are left-aligned as they were. Only the
   type comes down to the size the MAG uses. */
/* the column keeps its width even when the lines are short.
   Without this the hero block shrinks to its longest line and the
   automatic margins centre it, which is why /about/ sat further to
   the right than /partner/ on a wide screen. */
body.quiet .hero .wrap{width:100%}

body.quiet .h-hero{margin-bottom:var(--s-2)}

/* the litany · still a rhythm, no longer a wall of capitals */
body.quiet .litany li{
  text-transform:none;letter-spacing:-0.04em;
  font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.35;
}
body.quiet .litany--label li{
  font-family:var(--font-body);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-size:13px;line-height:2.1;
}

/* the partner page · the kinds of partner, the scenarios, the line
   a hotel could print on a card */
body.quiet .partner-kind{
  text-transform:none;letter-spacing:-0.04em;
  font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.1;
}
body.quiet .scenario-name{
  text-transform:none;letter-spacing:-0.04em;
  font-size:clamp(1.35rem,3.2vw,1.7rem);line-height:1.1;
}
body.quiet .quoted{
  letter-spacing:-0.04em;
  font-size:clamp(1.2rem,3vw,1.5rem);line-height:1.3;
}