/* The guides: an article page and the two index pages.
 *
 * Loaded after styles.css and only by the blog, so the nav, the brand and the
 * buttons come from the site and nothing here can reach the landing page.
 *
 * Built around one measure. A guide is 1,500 words of prose someone is
 * reading to decide where to spend money, so the only real job is a
 * comfortable line length, a clear heading hierarchy, and tables that
 * survive a phone.
 */

:root {
  --post-measure: 44rem;   /* ~68 characters at this size */

  /* The design is fluid, not fixed. Both references hold content at 84.5%
     of the viewport — 1217 inside 1440, 1690 inside 2000 — with the gutter
     at 7.75% of the width. Capping it at a pixel figure, which is what the
     last pass did, froze the page at its 1440 size and left a bigger screen
     as the same page with wider margins. The cap here is only a backstop
     for an ultrawide. */
  --front-wrap: 2200px;
  --front-gutter: clamp(20px, 7.75vw, 170px);

  /* Everything on these pages is sized against the viewport, because the
     reference is: a 2000px screen gets a 78px headline and a 58px chip, a
     1440px screen gets 56 and 42. The floors keep a phone readable and the
     ceilings stop an ultrawide from drawing a poster. */
  --f-h1:     clamp(32px, 3.9vw,  82px);
  --f-lede:   clamp(15px, 1.2vw,  25px);
  --f-h2:     clamp(22px, 2.1vw,  44px);
  --f-title:  clamp(16px, 1.3vw,  27px);
  --f-copy:   clamp(13.5px, 1.05vw, 21px);
  --f-small:  clamp(12.5px, .88vw, 18px);
  --f-badge:  clamp(32px, 2.5vw,  52px);
  --f-banner: clamp(96px, 7vw,   146px);
  --f-radius: clamp(18px, 1.2vw,  26px);
}

.guides.wrap--wide,
.post.wrap {
  --wrap: var(--front-wrap);
  --gutter: var(--front-gutter);
}

/* The nav is `position: absolute` in styles.css, so page content starts
 * underneath it. The landing page clears it with the hero's own top padding
 * and every other page has something tall at the top; a guide starts with a
 * heading, which lands on the logo. This is that clearance. */
:root { --nav-clear: clamp(86px, 9vw, 112px); }

/* ----------------------------------------------------------- article --- */

.post__crumbs {
  font: 500 13px/1.4 var(--font-body);
  color: var(--grey);
  margin: 0 auto 18px;
  max-width: var(--post-measure);
}
.post__crumbs a { color: var(--grey); text-decoration: none; }
.post__crumbs a:hover { color: var(--ink); text-decoration: underline; }
.post__crumbs span { opacity: .5; margin: 0 4px; }

.post__body {
  /* The measure, inside its grid column rather than centred in the page. */
  max-width: var(--post-measure);
  padding-bottom: clamp(48px, 7vw, 88px);
  font: 400 17px/1.7 var(--font-body);
  color: var(--ink);
}

.post__body > * + * { margin-top: 1.15em; }

/* The body starts at h2: the title is the page's only h1, and a second one
   would give the document two competing outlines. */
.post__body h2 {
  margin-top: 1.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.post__body h3 {
  margin-top: 1.6em;
  font: 600 19px/1.35 var(--font-body);
  letter-spacing: -.01em;
}

.post__body a { color: var(--brand); text-underline-offset: 2px; }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: .45em; }
.post__body strong { font-weight: 600; }

.post__body blockquote {
  margin-left: 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line, #ece7e8);
  color: var(--grey);
}

.post__body hr {
  border: 0;
  border-top: 1px solid var(--line, #ece7e8);
  margin: 2.2em 0;
}

/* A callout: the one line the writer wants read if nothing else is. */
.post__note {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--paper, #faf8f8);
  border: 1px solid var(--line, #ece7e8);
  border-radius: 14px;
  font-size: 16px;
}
.post__note > span { font-size: 18px; line-height: 1.5; }
.post__note p:first-child { margin-top: 0; }

/* Wide tables scroll inside themselves. A comparison table is the most
   useful thing on a "X vs Y" page and the most likely to burst a phone. */
.post__table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post__table table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}
.post__table th, .post__table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #ece7e8);
  text-align: left;
  vertical-align: top;
}
.post__table th { font-weight: 600; background: var(--paper, #faf8f8); white-space: nowrap; }

/* FAQs. Open by default on a wide screen: a crawler reads the answer either
   way, but a reader should not have to hunt for it, and the summary alone is
   a page of questions with no answers. */
.post__faq {
  border: 1px solid var(--line, #ece7e8);
  border-radius: 14px;
  padding: 14px 18px;
}
.post__faq + .post__faq { margin-top: 10px; }
.post__faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.post__faq summary::-webkit-details-marker { display: none; }
.post__faq summary::after { content: " +"; color: var(--grey); }
.post__faq[open] summary::after { content: " –"; }
.post__faq[open] summary { margin-bottom: 8px; }

.post__body figure { margin: 0; }
.post__body figure img { width: 100%; height: auto; border-radius: 14px; display: block; }
.post__body figcaption {
  margin-top: 8px;
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--grey);
}

.post__body pre {
  overflow-x: auto;
  padding: 14px 16px;
  background: var(--paper, #faf8f8);
  border-radius: 12px;
  font-size: 14px;
}

/* ------------------------------------------------------------ index --- */

.guides { padding-block: var(--nav-clear) clamp(48px, 7vw, 88px); }

.guides h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h1);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
}

.guides__lede {
  margin: clamp(10px, .9vw, 20px) 0 0;
  max-width: 30em;
  font: 400 var(--f-lede)/1.45 var(--font-body);
  color: var(--grey);
}

.guides__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
}
.guides__sections a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line, #ece7e8);
  border-radius: 999px;
  font: 500 14px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.guides__sections a:hover { border-color: var(--ink); }
.guides__sections span { color: var(--grey); font-size: 12.5px; }

/* ---------------------------------------------------------- the cards --- */

/* Four tracks. A card is a photo, a glyph, a title, a line and a way in, and
   at three across the photo gets big enough to upstage the words. */
.guides__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.1vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* A last row of one or two would trail off leaving the rest of the row
   empty, so those stretch to fill it. The build counts them into
   `data-tail`, because CSS cannot see how many children are in the final
   row — :nth-last-child can, but only against a fixed total. */
/* The lead card takes 1.17 of a track, which is what the reference draws:
   457 beside three of 390 inside 1690 of content. */
.guides__list[data-lead="1"] { grid-template-columns: 1.17fr repeat(3, minmax(0, 1fr)); }

.guides__list[data-tail="1"] > .guide:last-child { grid-column: span 4; }
.guides__list[data-tail="2"] > .guide:nth-last-child(-n+2) { grid-column: span 2; }
.guides__list[data-tail="3"] > .guide:nth-last-child(-n+3) { grid-column: span 1; }

.guide a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line, #ece7e8);
  border-radius: var(--f-radius);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast, .18s) var(--ease, ease),
              box-shadow var(--t-fast, .18s) var(--ease, ease),
              transform var(--t-fast, .18s) var(--ease, ease);
}
.guide a:hover {
  border-color: #ddd;
  box-shadow: 0 14px 30px -20px rgba(25, 23, 23, .3);
  transform: translateY(-2px);
}

/* ---- the art ---- */

/* A fixed height, not a ratio. A card that spans two tracks is twice as
   wide, and 16/9 made its banner twice as tall with it — a single-card
   shelf came out as a banner the height of the viewport. Fixed, every
   banner is the same depth whatever width its card happens to be, which is
   also what makes a row of mixed-width cards read as one row. */
.guide__art {
  position: relative;
  display: block;
  height: var(--f-banner);
  background: var(--paper, #faf8f8);
}
.guide__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No photo yet. Four tones so a shelf of six does not read as one flat band
   repeated, and a faint diagonal rule over the top so the panel reads as a
   frame waiting for a picture rather than as a card whose image failed. */
.guide__art--bare {
  display: grid;
  place-items: center;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(130% 150% at 18% 0%, rgba(178, 74, 84, .13), transparent 64%);
}
.guide__art--bare[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 82% 0%, rgba(150, 62, 71, .12), transparent 62%);
}
.guide__art--bare[data-tone="2"] {
  background-image:
    radial-gradient(140% 160% at 50% 110%, rgba(178, 74, 84, .14), transparent 60%);
}
.guide__art--bare[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .13), rgba(178, 74, 84, .02) 62%);
}
.guide__glyph { font-size: calc(var(--f-badge) * .82); line-height: 1; opacity: .42; }

/* The badge sits on the seam between art and body, which is what stops a
   photo-less card from looking like two unrelated blocks. */
.guide__icon {
  position: absolute;
  left: clamp(14px, 1.1vw, 24px);
  bottom: calc(var(--f-badge) * -.5);
  width: var(--f-badge);
  height: var(--f-badge);
  display: grid;
  place-items: center;
  font-size: calc(var(--f-badge) * .46);
  line-height: 1;
  background: #fff;
  border: 1px solid var(--line, #ece7e8);
  border-radius: 50%;
  box-shadow: 0 4px 12px -6px rgba(25, 23, 23, .3);
}

/* ---- the words ---- */

.guide__body { display: block; flex: 1;
  padding: calc(var(--f-badge) * .62) clamp(16px, 1.25vw, 26px) 0; }
.guide h3 {
  margin: 0;
  font: 500 var(--f-title)/1.26 var(--font-body);
  letter-spacing: -.012em;
  color: var(--ink);
}
.guide p {
  margin: clamp(6px, .5vw, 12px) 0 0;
  font: 400 var(--f-copy)/1.5 var(--font-body);
  color: var(--grey);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(13px, 1.1vw, 24px) clamp(16px, 1.25vw, 26px) clamp(15px, 1.25vw, 26px);
}
.guide__read { font: 600 var(--f-small)/1 var(--font-body); color: var(--brand); }
.guide__go {
  width: calc(var(--f-badge) * .78);
  height: calc(var(--f-badge) * .78);
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, #ece7e8);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--t-fast, .18s) var(--ease, ease),
              color var(--t-fast, .18s) var(--ease, ease),
              border-color var(--t-fast, .18s) var(--ease, ease);
}
.guide__go svg { width: 48%; height: 48%; display: block; }
.guide a:hover .guide__go {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---- the one that leads a shelf ---- */

/* One block, not three. The first version of this card was written across
   three separate `.guide--lead a` rules and two `.guide h3` rules scattered
   through the file, and the duplicates quietly beat each other: the card
   rendered white-on-white, then dark with a black title. A selector gets
   stated once. */
.guide--lead a {
  position: relative;
  justify-content: flex-end;
  min-height: 250px;
  border-color: transparent;
  background: var(--ink);
  color: #fff;
}

/* The roundup the others link back to. Its art fills the whole card and the
   words sit on top, so it reads as the way in without being a second kind
   of component. */
/* Fills the card. `height: auto` matters — the base rule pins every banner
   to 104px, so without it the photo covered the top eighth of the card and
   the white text below it sat on nothing. */
.guide--lead .guide__art { position: absolute; inset: 0; height: auto; }
.guide--lead .guide__art img { opacity: .62; }
/* A scrim, because the text is white and the photograph is whatever the
   writer chose. Weighted to the bottom, where the title and the footer are. */
.guide--lead .guide__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 18, .25) 0%,
                                      rgba(20, 17, 18, .62) 48%,
                                      rgba(20, 17, 18, .88) 100%);
}
/* `[data-tone]` in the selector on purpose: the placeholder tones carry an
   attribute and would otherwise outrank this, leaving the lead card a light
   panel with white text on it. */
.guide--lead .guide__art--bare,
.guide--lead .guide__art--bare[data-tone] {
  background-color: #171415;
  background-image:
    radial-gradient(120% 140% at 16% 4%, rgba(178, 74, 84, .55), transparent 64%),
    linear-gradient(160deg, #2A2526, #171415);
}
.guide--lead .guide__glyph { opacity: .3; font-size: 52px; }
.guide--lead .guide__body,
.guide--lead .guide__foot { position: relative; z-index: 1; }
.guide--lead .guide__body { flex: 0 0 auto; padding-top: 18px; }
.guide--lead h3 { color: #fff; font-size: 19px; }
.guide--lead p { color: rgba(255, 255, 255, .72); }
.guide--lead .guide__read { color: #fff; }
.guide--lead .guide__icon {
  left: 16px;
  top: 16px;
  bottom: auto;
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
}
.guide--lead .guide__go { border-color: rgba(255, 255, 255, .34); color: #fff; }
.guide--lead a:hover .guide__go { background: #fff; border-color: #fff; color: var(--ink); }

@media (max-width: 1100px) {
  .guides__list,
  .guides__list[data-lead="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guides__list[data-tail="1"] > .guide:last-child,
  .guides__list[data-tail="2"] > .guide:nth-last-child(-n+2),
  .guides__list[data-tail="3"] > .guide:nth-last-child(-n+3) { grid-column: auto; }
}
@media (max-width: 620px) {
  .guides__list,
  .guides__list[data-lead="1"] { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- shelves --- */

/* A destination is a hub, not a card in a grid. The pillar is the way in and
   its guides hang under it, so the shape on the page matches the shape of
   the site: one strong page per place, with the rest pointing at it. */

.guides__kind {
  margin: clamp(38px, 5vw, 56px) 0 18px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Columns rather than a grid, because the shelves are wildly uneven: Bali
   has nine guides and Bhutan has none. A grid row is as tall as its tallest
   cell, so one long shelf opens a field of white beside it. Columns pack
   instead. The cost is reading order — down each column rather than across
   — which on an index somebody scans for a place name is no cost at all. */
.shelves {
  columns: 320px 3;
  column-gap: 14px;
}
.shelf {
  break-inside: avoid;
  margin-bottom: 14px;
  border: 1px solid var(--line, #ece7e8);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  transition: border-color var(--t-fast, .18s) var(--ease, ease);
}
.shelf:hover { border-color: #ddd; }

.shelf__pillar {
  display: block;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
}
.shelf__pillar h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}
.shelf__pillar p {
  margin: 7px 0 0;
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--grey);
  /* Two lines, so every shelf's head is the same height and the row of
     cards does not look like a broken staircase. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelf__all {
  display: inline-block;
  margin-top: 12px;
  font: 600 13.5px/1 var(--font-body);
  color: var(--brand);
}
.shelf__all::after { content: " →"; }
.shelf__pillar:hover .shelf__all { text-decoration: underline; }

/* A destination whose pillar is not written yet: the head is not a link,
   because there is nowhere for it to go. */
.shelf__pillar--none h3 { color: var(--muted, #5c5357); }

.shelf__kids {
  list-style: none;
  margin: 0;
  padding: 4px 22px 18px;
  border-top: 1px solid var(--line, #ece7e8);
}
.shelf__kids li + li { border-top: 1px solid var(--line, #ece7e8); }
.shelf__kids a {
  display: block;
  padding: 11px 0;
  font: 400 15px/1.4 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.shelf__kids a:hover { color: var(--brand); }
.shelf__kids a::after {
  content: "→";
  float: right;
  color: var(--line, #ece7e8);
}
.shelf__kids a:hover::after { color: var(--brand); }

/* ---------------------------------------------------- the front hero --- */

/* Heading, lede and the jump row on the left; a picture on the right when
   the section has one. The picture is an article's, not decoration, and the
   card on it links there — so the largest thing on the page is a way in
   rather than a mood. */
.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.front:has(.front__art) { grid-template-columns: minmax(0, 1fr) minmax(0, 37.5%); }
.front__crumbs { margin-bottom: 10px; }

.front__words h1 { margin: 0; }
.front__words .post__crumbs { max-width: none; margin: 0 0 14px; }

.front__art {
  position: relative;
  border-radius: 24px;
  overflow: visible;
}
.front__art--bare {
  display: grid;
  place-items: center;
  height: clamp(190px, 17vw, 340px);
  border-radius: 24px;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 76% 0%, rgba(178, 74, 84, .16), transparent 62%);
}
.front__art--bare[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 22% 0%, rgba(150, 62, 71, .15), transparent 60%);
}
.front__art--bare[data-tone="2"] {
  background-image:
    radial-gradient(140% 170% at 50% 115%, rgba(178, 74, 84, .17), transparent 58%);
}
.front__art--bare[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .16), rgba(178, 74, 84, .02) 62%);
}
.front__glyph { font-size: calc(var(--f-badge) * 1.3); line-height: 1; opacity: .4; }

.front__art img {
  width: 100%;
  height: clamp(190px, 17vw, 340px);
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* The card sits across the picture's bottom-left corner, half on and half
   off. Half off is the point: it ties the picture to the column of cards
   below rather than floating inside its own frame. */
.front__pick {
  position: absolute;
  left: -14px;
  bottom: -18px;
  right: 22%;
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, .8vw, 16px);
  padding: clamp(12px, 1vw, 20px) clamp(14px, 1.15vw, 24px);
  background: #fff;
  border: 1px solid var(--line, #ece7e8);
  border-radius: 16px;
  box-shadow: 0 16px 34px -22px rgba(25, 23, 23, .42);
  text-decoration: none;
  transition: transform var(--t-fast, .18s) var(--ease, ease),
              box-shadow var(--t-fast, .18s) var(--ease, ease);
}
.front__pick:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -22px rgba(25, 23, 23, .5);
}
.front__pick-icon {
  flex: none;
  width: calc(var(--f-badge) * .8);
  height: calc(var(--f-badge) * .8);
  display: grid;
  place-items: center;
  font-size: calc(var(--f-badge) * .38);
  background: var(--paper, #faf8f8);
  border-radius: 50%;
}
.front__pick strong {
  display: block;
  font: 600 var(--f-small)/1.3 var(--font-body);
  color: var(--ink);
}
.front__pick em {
  display: block;
  margin-top: 2px;
  font: 400 calc(var(--f-small) * .92)/1.35 var(--font-body);
  font-style: normal;
  color: var(--grey);
}

@media (max-width: 900px) {
  .front:has(.front__art) { grid-template-columns: minmax(0, 1fr); }
  .front__pick { right: 30%; }
}

/* ------------------------------------------------- buckets and chips --- */

/* Every section front splits into named groups with a jump row above them.
   The chips are anchors, not filters: a front with six groups is still one
   page, so a chip that hid the others would be hiding pages a reader could
   reach by looking down — and it would need a script to do it. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .7vw, 14px);
  margin: clamp(18px, 1.7vw, 36px) 0 0;
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: clamp(10px, .95vw, 20px) clamp(14px, 1.35vw, 28px);
  border: 1px solid var(--line, #ece7e8);
  border-radius: 999px;
  font: 500 var(--f-small)/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast, .18s) var(--ease, ease),
              background-color var(--t-fast, .18s) var(--ease, ease);
}
.chip:hover { border-color: var(--ink); }
.chip span { font-size: .86em; color: var(--grey); }
.chip--on {
  background: linear-gradient(90deg, #B24A54 0%, #A91459 100%);
  border-color: transparent;
  color: #fff;
}
.chip--on span { color: rgba(255, 255, 255, .72); }

.bucket { margin-top: clamp(30px, 3.4vw, 44px); }
.bucket > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.bucket__lede {
  margin: clamp(5px, .5vw, 11px) 0 clamp(14px, 1.3vw, 28px);
  font: 400 var(--f-copy)/1.45 var(--font-body);
  color: var(--grey);
}

/* ------------------------------------------------------------- 404 --- */

/* The code, set small and garnet above the sentence that actually explains
   it. A 404 page that leads with a huge numeral tells the reader what
   happened in a language they do not speak. */
.notfound__code {
  margin: 0 0 6px;
  font: 700 var(--f-small)/1 var(--font-body);
  letter-spacing: .14em;
  color: var(--brand);
}

/* ========================================= the destinations front ======= */

/* A hero the width of the content, with the heading on a darkened ground and
   a collage beside it, and the region chips riding its bottom edge. */
.dhero {
  position: relative;
  border-radius: var(--f-radius);
  margin-top: clamp(16px, 1.6vw, 32px);
  /* Half the chip row's height, so the row straddles the bottom edge rather
     than sitting in a band inside it. */
  padding-bottom: clamp(26px, 2.2vw, 40px);
}

/* The ground is a placeholder in the same family as the card art. A
   photograph belongs here and there is not one yet: the only images on the
   site are Wikimedia pictures inside articles, whose licence asks for a
   credit a hero has nowhere to put. */
.dhero__ground {
  position: absolute;
  inset: 0 0 clamp(26px, 2.2vw, 40px);
  border-radius: var(--f-radius);
  background-color: #171415;
  --ground:
    radial-gradient(90% 120% at 78% 10%, rgba(178, 74, 84, .42), transparent 62%),
    linear-gradient(160deg, #2A2526, #141112);
  background-image: var(--ground);
}

.dhero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  /* The reference draws the hero at 518 deep inside 1028 of content — just
     over half its width — so the depth is held against the viewport the way
     everything else on these pages is, rather than falling out of whatever
     the collage and the heading happen to need. */
  min-height: clamp(300px, 38vw, 660px);
  padding: clamp(28px, 3.4vw, 72px) clamp(22px, 3vw, 58px);
}

.dhero__crumbs {
  font: 500 var(--f-small)/1.4 var(--font-body);
  color: rgba(255, 255, 255, .72);
  margin-bottom: clamp(10px, 1vw, 20px);
}
.dhero__crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.dhero__crumbs a:hover { color: #fff; }
.dhero__crumbs span { opacity: .5; margin: 0 5px; }

.dhero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h1);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}
.dhero p {
  margin: clamp(12px, 1.1vw, 22px) 0 0;
  max-width: 30em;
  font: 400 var(--f-lede)/1.45 var(--font-body);
  color: rgba(255, 255, 255, .78);
}

/* Three tiles, the tall one leading. Decorative, so aria-hidden and no
   alternative text to write. */
.dhero__collage {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(10px, 1vw, 20px);
  height: clamp(180px, 25vw, 460px);
}
.dhero__collage span {
  border-radius: calc(var(--f-radius) * .8);
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 20% 0%, rgba(178, 74, 84, .16), transparent 64%);
}
.dhero__collage span:first-child { grid-row: span 2; }
.dhero__collage span[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 80% 0%, rgba(150, 62, 71, .15), transparent 60%);
}
.dhero__collage span[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .17), rgba(178, 74, 84, .03) 62%);
}

/* The chip row sits across the hero's bottom edge, half on and half off. */
.chips--float {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(7px, .6vw, 12px);
  gap: clamp(2px, .3vw, 6px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 18px 40px -26px rgba(25, 23, 23, .5);
}
.chips--float .chip { border-color: transparent; }
.chips--float .chip:hover { background: var(--paper, #faf8f8); }
.chips--float .chip--on:hover { background: var(--brand); }

/* ---- the mosaic ---- */

/* The heading sits above its tiles, not beside them. The directory this
   replaced put the region name in a left-hand column, which is right for a
   list of names and wrong for a mosaic — the tiles lost a fifth of the
   width to a word. Stated here because the older rule is still in the file
   above and would otherwise win on source order alone. */
.region {
  display: block;
  padding: 0;
  border-top: 0;
}
.region + .region { margin-top: clamp(34px, 3.6vw, 64px); }
.region > h2 { margin: 0; }

.tiles {
  list-style: none;
  margin: clamp(14px, 1.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 247 wide by 177 tall in the reference, so a shade under 1.4:1. Held as a
     row height rather than an aspect ratio, because the tall tile spans two
     rows and has to come out exactly twice as deep plus the gap. */
  grid-auto-rows: clamp(132px, 14.5vw, 300px);
  gap: clamp(10px, 1.1vw, 22px);
}
.tile--big  { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--half { grid-column: span 2; grid-row: span 2; }
.tile--full { grid-column: span 4; grid-row: span 2; }

.tile a {
  position: relative;
  display: block;
  height: 100%;
  border-radius: calc(var(--f-radius) * .8);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-fast, .18s) var(--ease, ease),
              box-shadow var(--t-fast, .18s) var(--ease, ease);
}
.tile a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -24px rgba(25, 23, 23, .45);
}
.tile__art { position: absolute; inset: 0; display: block; }
.tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__bare {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 22% 0%, rgba(178, 74, 84, .15), transparent 64%);
}
.tile__bare[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 78% 0%, rgba(150, 62, 71, .14), transparent 62%);
}
.tile__bare[data-tone="2"] {
  background-image:
    radial-gradient(140% 170% at 50% 112%, rgba(178, 74, 84, .16), transparent 58%);
}
.tile__bare[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .16), rgba(178, 74, 84, .02) 62%);
}
.tile__glyph { font-size: calc(var(--f-badge) * 1.1); opacity: .4; line-height: 1; }
.tile--big .tile__glyph,
.tile--half .tile__glyph,
.tile--full .tile__glyph { font-size: calc(var(--f-badge) * 2.1); }

/* A scrim only where the name sits, so a photograph keeps its top half. */
.tile a::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(16, 13, 14, .72));
}
.tile__name {
  position: absolute;
  left: clamp(14px, 1.2vw, 26px);
  bottom: clamp(12px, 1.1vw, 24px);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-title);
  letter-spacing: -.02em;
  color: #fff;
}
.tile--big .tile__name, .tile--full .tile__name { font-size: calc(var(--f-title) * 1.35); }

.tile__count {
  position: absolute;
  top: clamp(10px, .9vw, 20px);
  right: clamp(10px, .9vw, 20px);
  z-index: 1;
  min-width: calc(var(--f-badge) * .62);
  padding: calc(var(--f-badge) * .12) calc(var(--f-badge) * .2);
  text-align: center;
  background: #fff;
  border-radius: 999px;
  font: 500 calc(var(--f-small) * .92)/1.2 var(--font-body);
  color: var(--ink);
}

@media (max-width: 900px) {
  .dhero__inner { grid-template-columns: minmax(0, 1fr); }
  .dhero__collage { height: clamp(150px, 30vw, 240px); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--big, .tile--wide, .tile--half, .tile--full { grid-column: span 2; grid-row: span 1; }
}

/* ============================================= the article page ======== */

/* The hero runs edge to edge, under the nav. `.post` loses the wrap it used
   to carry so the photograph can reach the window; the words inside it take
   their own wrap back. */
.post { padding-block: var(--nav-clear) clamp(48px, 5vw, 96px); }

.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 30vw, 560px);
  /* Deep enough at the foot that the answer card can ride the bottom edge
     without landing on the byline. */
  padding-block: clamp(40px, 4vw, 80px) clamp(64px, 6vw, 120px);
  overflow: hidden;
}
.phero__art { position: absolute; inset: 0; }
.phero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero__bare {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #171415;
  background-image:
    radial-gradient(90% 120% at 76% 8%, rgba(178, 74, 84, .4), transparent 62%),
    linear-gradient(160deg, #2A2526, #141112);
}
/* Weighted to the foot, because that is where the words are and the top of
   a photograph is the part worth keeping. */
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 13, 14, .46) 0%,
                                      rgba(16, 13, 14, .18) 34%,
                                      rgba(16, 13, 14, .82) 100%);
}
.phero__words { position: relative; z-index: 1; }
.phero__crumbs {
  font: 500 var(--f-small)/1.4 var(--font-body);
  color: rgba(255, 255, 255, .78);
  margin-bottom: clamp(8px, .8vw, 16px);
}
.phero__crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.phero__crumbs a:hover { color: #fff; }
.phero__crumbs span { opacity: .5; margin: 0 5px; }
.phero h1 {
  margin: 0;
  max-width: 18em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h1);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}
.phero__by {
  margin: clamp(8px, .8vw, 16px) 0 0;
  font: 400 var(--f-small)/1.4 var(--font-body);
  color: rgba(255, 255, 255, .72);
}

/* ---- the short answer ---- */

/* Lifted out of the prose and set across the hero's bottom edge: it is the
   reply to the query, and a reader who has it may not need the article. */
.answer {
  position: relative;
  margin: calc(clamp(64px, 6vw, 120px) * -0.62) 0 0;
  max-width: 34rem;
  padding: clamp(20px, 1.8vw, 36px) clamp(22px, 2vw, 40px);
  background: #fff;
  border-radius: var(--f-radius);
  box-shadow: 0 24px 50px -30px rgba(25, 23, 23, .5);
}
.answer__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 700 calc(var(--f-small) * .86)/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.answer__label::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand);
}
.answer p { margin: 0; font: 400 var(--f-lede)/1.5 var(--font-body); color: var(--ink); }
.answer p + p { margin-top: .6em; }

/* ---- the sibling tabs ---- */

.tabs {
  display: flex;
  gap: clamp(16px, 1.8vw, 34px);
  margin: clamp(26px, 2.6vw, 52px) 0 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line, #ece7e8);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none;
  padding: 0 0 clamp(10px, .9vw, 16px);
  border-bottom: 2px solid transparent;
  margin-bottom: -3px;
  font: 500 var(--f-small)/1 var(--font-body);
  color: var(--grey);
  text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs__here { color: var(--brand) !important; border-bottom-color: var(--brand); }

/* ---- the two columns ---- */

.post__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 31%);
  gap: clamp(26px, 3.4vw, 68px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 58px);
}
/* The article keeps its own measure inside the column rather than filling
   it: 68 characters is the line length, whatever the grid allows. */
.post__side { position: sticky; top: 24px; display: grid; gap: clamp(14px, 1.4vw, 26px); }

.toc {
  padding: clamp(16px, 1.4vw, 28px) clamp(16px, 1.4vw, 26px);
  border: 1px solid var(--line, #ece7e8);
  border-radius: var(--f-radius);
  background: #fff;
}
.toc h2 {
  margin: 0 0 clamp(10px, 1vw, 18px);
  font: 700 calc(var(--f-small) * .86)/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute, #767272);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { border-left: 2px solid var(--line, #ece7e8); }
.toc a {
  display: block;
  padding: clamp(7px, .6vw, 12px) 0 clamp(7px, .6vw, 12px) 14px;
  font: 400 var(--f-copy)/1.35 var(--font-body);
  color: var(--grey);
  text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc__here { border-left-color: var(--brand); }
.toc__here a { color: var(--ink); font-weight: 500; }

/* ---- the ask ---- */

.plan {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(220px, 20vw, 380px);
  border-radius: var(--f-radius);
  overflow: hidden;
  background: var(--ink);
}
.plan__art {
  position: absolute;
  inset: 0;
  background-color: #171415;
  --ground:
    radial-gradient(110% 130% at 20% 0%, rgba(178, 74, 84, .45), transparent 64%),
    linear-gradient(160deg, #2A2526, #141112);
  background-image: var(--ground);
}
.plan__words { position: relative; z-index: 1; padding: clamp(18px, 1.6vw, 30px); }
.plan h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-title);
  line-height: 1.2;
  color: #fff;
}
.plan p {
  margin: 8px 0 clamp(14px, 1.2vw, 22px);
  font: 400 var(--f-copy)/1.45 var(--font-body);
  color: rgba(255, 255, 255, .74);
}
.plan__cta {
  display: inline-block;
  background: linear-gradient(90deg, #B24A54 0%, #A91459 100%);
  color: #fff;
  border-radius: var(--r-full, 999px);
  padding: clamp(9px, .8vw, 15px) clamp(16px, 1.4vw, 26px);
  font: 600 var(--f-small)/1 var(--font-body);
  text-decoration: none;
}
.plan__cta:hover { filter: brightness(1.08); }

/* ---- onward ---- */

.onward {
  position: relative;
  display: block;
  margin-top: clamp(30px, 3vw, 60px);
  min-height: clamp(150px, 14vw, 260px);
  max-width: var(--post-measure);
  border-radius: var(--f-radius);
  overflow: hidden;
  text-decoration: none;
}
.onward__art { position: absolute; inset: 0; }
.onward__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.onward__bare, .also__bare {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 24% 0%, rgba(178, 74, 84, .16), transparent 64%);
}
.onward::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(180deg, transparent, rgba(16, 13, 14, .82));
}
.onward__label, .onward__title, .onward__go { position: relative; z-index: 1; }
.onward__label {
  position: absolute;
  left: clamp(18px, 1.6vw, 32px);
  bottom: calc(clamp(18px, 1.6vw, 32px) + var(--f-title) * 1.5);
  font: 700 calc(var(--f-small) * .82)/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.onward__title {
  position: absolute;
  left: clamp(18px, 1.6vw, 32px);
  bottom: clamp(18px, 1.6vw, 32px);
  max-width: 68%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-title);
  line-height: 1.2;
  color: #fff;
}
.onward__go {
  position: absolute;
  right: clamp(18px, 1.6vw, 32px);
  bottom: clamp(18px, 1.6vw, 32px);
  padding: clamp(8px, .7vw, 14px) clamp(14px, 1.2vw, 22px);
  background: #fff;
  border-radius: 999px;
  font: 600 var(--f-small)/1 var(--font-body);
  color: var(--ink);
}

/* ---- people also look at ---- */

.also { margin-top: clamp(34px, 3.4vw, 64px); }
.also h2 {
  margin: 0 0 clamp(14px, 1.3vw, 26px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.also ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 22px);
  max-width: var(--post-measure);
}
.also a {
  position: relative;
  display: block;
  transition: transform var(--t-fast, .18s) var(--ease, ease);
  height: clamp(150px, 13vw, 240px);
  border-radius: calc(var(--f-radius) * .8);
  overflow: hidden;
  text-decoration: none;
}
.also img { width: 100%; height: 100%; object-fit: cover; display: block; }
.also a::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(180deg, transparent, rgba(16, 13, 14, .8));
}
/* Named, not `.also a span`: the placeholder is a span inside the same
   anchor, and the loose selector was positioning it as a caption at the
   foot of the card instead of letting it fill the card — so the white
   title sat on near-white with nothing behind it. */
.also__name {
  position: absolute;
  left: clamp(12px, 1vw, 20px);
  right: clamp(12px, 1vw, 20px);
  bottom: clamp(12px, 1vw, 20px);
  z-index: 1;
  font: 600 var(--f-copy)/1.3 var(--font-body);
  color: #fff;
}
.also a:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .post__cols { grid-template-columns: minmax(0, 1fr); }
  .post__side { position: static; }
  .also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================ the trips front ====== */

.thero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding-block: clamp(26px, 3vw, 64px) clamp(18px, 2vw, 40px);
}
.thero__words h1 {
  margin: 0;
  max-width: 11em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h1);
  line-height: 1.04;
  letter-spacing: -.03em;
}

/* Three photographs fanned out, the middle one forward. Placeholders: these
   want pictures of people and the only images on this site are landscapes
   inside articles. */
.thero__fan {
  position: relative;
  height: clamp(200px, 24vw, 420px);
}
.thero__fan span {
  position: absolute;
  top: 50%;
  width: 38%;
  height: 86%;
  border-radius: calc(var(--f-radius) * .9);
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(130% 150% at 24% 0%, rgba(178, 74, 84, .15), transparent 62%);
  box-shadow: 0 20px 44px -28px rgba(25, 23, 23, .5);
}
.thero__fan span:nth-child(1) { left: 2%;  transform: translateY(-50%) rotate(-7deg); }
.thero__fan span:nth-child(3) { right: 2%; transform: translateY(-50%) rotate(7deg); }
/* Forward and taller, so the fan reads as a stack rather than three tiles. */
.thero__fan span:nth-child(2) {
  left: 50%;
  width: 42%;
  height: 104%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-image:
    radial-gradient(140% 160% at 50% 110%, rgba(178, 74, 84, .18), transparent 58%);
}

/* ---- the nine ---- */

.kinds {
  list-style: none;
  margin: clamp(18px, 2vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 24px);
}
.kind a {
  position: relative;
  display: block;
  height: clamp(230px, 24vw, 420px);
  border-radius: var(--f-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-fast, .18s) var(--ease, ease),
              box-shadow var(--t-fast, .18s) var(--ease, ease);
}
.kind a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -26px rgba(25, 23, 23, .45);
}
.kind__art { position: absolute; inset: 0; }
.kind__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kind__bare {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 22% 0%, rgba(178, 74, 84, .15), transparent 64%);
}
.kind__bare[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 78% 0%, rgba(150, 62, 71, .14), transparent 62%);
}
.kind__bare[data-tone="2"] {
  background-image:
    radial-gradient(140% 170% at 50% 112%, rgba(178, 74, 84, .16), transparent 58%);
}
.kind__bare[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .16), rgba(178, 74, 84, .02) 62%);
}
.kind a::after {
  content: "";
  position: absolute;
  inset: 32% 0 0;
  background: linear-gradient(180deg, transparent, rgba(16, 13, 14, .86));
}
.kind__words {
  position: absolute;
  left: clamp(14px, 1.2vw, 26px);
  right: clamp(14px, 1.2vw, 26px);
  bottom: clamp(14px, 1.2vw, 26px);
  z-index: 1;
  display: block;
}
.kind__words strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-title);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
}
.kind__words em {
  display: block;
  margin-top: 5px;
  font: 400 var(--f-copy)/1.4 var(--font-body);
  font-style: normal;
  color: rgba(255, 255, 255, .8);
}
/* A hairline above the places, so the list reads as a footnote to the card
   rather than a third line of the description. */

/* ---- already know where ---- */

.known {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 40px);
  margin-top: clamp(28px, 3vw, 60px);
  padding: clamp(26px, 3vw, 60px) clamp(22px, 2.6vw, 52px);
  border-radius: var(--f-radius);
  overflow: hidden;
}
.known__art {
  position: absolute;
  inset: 0;
  background-color: #171415;
  --ground:
    radial-gradient(100% 140% at 82% 0%, rgba(178, 74, 84, .4), transparent 62%),
    linear-gradient(160deg, #2A2526, #141112);
  background-image: var(--ground);
}
.known__words, .known__go { position: relative; z-index: 1; }
.known h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
}
.known p {
  margin: 8px 0 0;
  font: 400 var(--f-copy)/1.45 var(--font-body);
  color: rgba(255, 255, 255, .74);
}
.known__go { display: flex; gap: clamp(8px, .8vw, 14px); flex-wrap: wrap; }
.known__ghost, .known__cta {
  display: inline-block;
  padding: clamp(10px, .9vw, 17px) clamp(16px, 1.5vw, 28px);
  border-radius: 999px;
  font: 600 var(--f-small)/1 var(--font-body);
  text-decoration: none;
}
.known__ghost { background: #fff; color: var(--ink); }
.known__cta { background: linear-gradient(90deg, #B24A54 0%, #A91459 100%); color: #fff; }
.known__ghost:hover { background: var(--paper, #faf8f8); }
.known__cta:hover { filter: brightness(1.08); }

@media (max-width: 900px) {
  .thero { grid-template-columns: minmax(0, 1fr); }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kinds { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================ the occasion hubs ======== */

/* A hub leads with the question rather than a destination, so its hero is
   centred where an article's is ranged left. */
.phero__words--mid { text-align: center; }
.phero__words--mid h1 { margin-inline: auto; max-width: 14em; }
.phero__words--mid .phero__crumbs span { margin: 0 6px; }
.answer--mid { margin-inline: auto; text-align: center; }
.answer--mid .answer__label { justify-content: center; }

/* ---- where people go ---- */

.where { margin-top: clamp(30px, 3.2vw, 60px); }
.where h2 {
  margin: 0 0 clamp(14px, 1.3vw, 26px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.where ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 22px);
}
.where a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line, #ece7e8);
  border-radius: var(--f-radius);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--t-fast, .18s) var(--ease, ease),
              transform var(--t-fast, .18s) var(--ease, ease);
}
.where a:hover { border-color: #ddd; transform: translateY(-2px); }
.where__art { display: block; height: clamp(110px, 10vw, 190px); }
.where__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.where__bare {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--paper, #faf8f8);
  background-image:
    radial-gradient(120% 150% at 22% 0%, rgba(178, 74, 84, .15), transparent 64%);
}
.where__bare[data-tone="1"] {
  background-image:
    radial-gradient(130% 150% at 78% 0%, rgba(150, 62, 71, .14), transparent 62%);
}
.where__bare[data-tone="2"] {
  background-image:
    radial-gradient(140% 170% at 50% 112%, rgba(178, 74, 84, .16), transparent 58%);
}
.where__bare[data-tone="3"] {
  background-image:
    linear-gradient(118deg, rgba(178, 74, 84, .16), rgba(178, 74, 84, .02) 62%);
}
.where__body {
  display: block;
  flex: 1;
  padding: clamp(13px, 1.1vw, 22px) clamp(14px, 1.2vw, 24px) clamp(14px, 1.2vw, 24px);
}
.where__body strong {
  display: block;
  font: 600 var(--f-title)/1.2 var(--font-body);
  letter-spacing: -.015em;
  color: var(--ink);
}
.where__body em {
  display: block;
  margin-top: 5px;
  font: 400 var(--f-copy)/1.45 var(--font-body);
  font-style: normal;
  color: var(--grey);
}
.where__go {
  display: block;
  margin-top: clamp(10px, .9vw, 18px);
  font: 600 var(--f-small)/1 var(--font-body);
  color: var(--brand);
}

/* ---- other kinds, and the ask ---- */

.kinds-more { margin-top: clamp(30px, 3.2vw, 60px); }
.kinds-more h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-title);
  line-height: 1.2;
}
.kinds-more .chips { margin-top: clamp(12px, 1.1vw, 20px); }
.kinds-more .chips a {
  display: inline-flex;
  align-items: center;
  padding: clamp(9px, .8vw, 16px) clamp(14px, 1.3vw, 26px);
  border: 1px solid var(--line, #ece7e8);
  border-radius: 999px;
  font: 500 var(--f-small)/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.kinds-more .chips a:hover { border-color: var(--ink); }
.kinds-more .chip--go { border-color: transparent !important; color: var(--brand) !important; }

.known--hub { margin-top: clamp(26px, 2.8vw, 54px); }
.known--hub h2 { max-width: 16em; }

@media (max-width: 900px) {
  .where ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .where ul { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================= the cost calculator ==== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The tool sits across the hero's bottom edge, the way the short answer
   does on a guide: it is the thing the page is for, so it comes before the
   prose rather than after it. */
.calc {
  position: relative;
  margin-top: calc(clamp(64px, 6vw, 120px) * -0.62);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 48px);
  /* 4% of the card's own width in the reference, which at this measure is
     about 40px — a good deal more air than the 24 it had. */
  padding: clamp(22px, 3.4vw, 56px);
  background: #fff;
  border-radius: clamp(20px, 2vw, 34px);
  box-shadow: 0 28px 64px -34px rgba(25, 23, 23, .46);
}

.calc__form { display: grid; gap: clamp(12px, 1.1vw, 20px); align-content: start; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.1vw, 20px); }
.calc label, .calc__wide {
  display: block;
  font: 600 var(--f-small)/1 var(--font-body);
  color: var(--ink);
}
.calc select, .calc input {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: clamp(13px, 1.25vw, 22px) clamp(14px, 1.2vw, 22px);
  border: 1px solid var(--line, #ece7e8);
  border-radius: clamp(10px, .95vw, 16px);
  background: #fff;
  font: 400 var(--f-copy)/1.2 var(--font-body);
  color: var(--ink);
}
/* One chevron, drawn here, rather than whatever the platform supplies —
   Chrome on macOS draws a double arrow that reads as a spinner next to a
   number field. `appearance: none` takes the native control off; the
   padding on the right keeps the value clear of the mark. */
.calc select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: clamp(34px, 2.6vw, 48px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23191717' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(14px, 1.2vw, 22px) center;
  background-size: clamp(11px, .9vw, 15px);
  cursor: pointer;
}
/* The stepper arrows are a second control in a field that already has a
   keyboard and a sensible range. */
.calc input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.calc select:focus, .calc input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.calc__go {
  margin-top: clamp(6px, .6vw, 12px);
  padding: clamp(15px, 1.5vw, 26px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #B24A54 0%, #A91459 100%);
  color: #fff;
  font: 600 var(--f-small)/1 var(--font-body);
  cursor: pointer;
}
.calc__go:hover { filter: brightness(1.08); }

.calc__out {
  display: block;
  padding: clamp(20px, 2.2vw, 40px);
  background: #fff;
  border: 1px solid var(--line, #ece7e8);
  border-radius: clamp(16px, 1.6vw, 26px);
}
.calc__head {
  margin: 0;
  font: 700 calc(var(--f-small) * .82)/1.3 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute, #767272);
}
.calc__total {
  margin: clamp(6px, .6vw, 12px) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* About 4% of the card's width in the reference, where the shelf heading
     token lands nearer 2.5 — the number is the page, so it is sized against
     the viewport in its own right. */
  font-size: clamp(30px, 3.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
}
.calc__sub { margin: 4px 0 0; font: 400 var(--f-copy)/1.4 var(--font-body); color: var(--grey); }
.calc dl { margin: clamp(14px, 1.3vw, 26px) 0 0; }
.calc dl dt, .calc dl dd {
  display: inline-block;
  padding: clamp(13px, 1.25vw, 22px) 0;
  font: 400 var(--f-copy)/1.3 var(--font-body);
  border-top: 1px solid var(--line, #ece7e8);
}
.calc dl dt { width: 62%; color: var(--grey); }
.calc dl dd { width: 38%; margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.calc__cta {
  display: block;
  margin-top: clamp(18px, 1.8vw, 32px);
  padding: clamp(15px, 1.5vw, 26px);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  text-align: center;
  font: 600 var(--f-small)/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.calc__cta:hover { border-color: var(--ink); }
.calc__note {
  margin: 10px 0 0;
  text-align: center;
  font: 400 calc(var(--f-small) * .88)/1.3 var(--font-body);
  color: var(--grey);
}
/* Not an error state. A guide that has not published a figure is a fact
   about the writing, so it reads as a sentence rather than a warning. */
.calc__none { margin: 10px 0 0; font: 400 var(--f-copy)/1.5 var(--font-body); color: var(--grey); }
.calc__none a, .calc__source a { color: var(--brand); }
.calc__source { font: 400 calc(var(--f-copy) * .94)/1.5 var(--font-body); color: var(--grey); }

/* The waiting state. An estimate is a model call and takes a few seconds, so
   the card holds the shape of its answer — the number, the caption, a row per
   line item, the button — rather than collapsing to one line of text and
   shoving the form up the page. The bars are sized off the same tokens as the
   real thing. It cannot match the answer exactly, because how many lines come
   back is the model's call, but it lands close enough that the page settles
   rather than lurching. */
.calc__ghost { margin: 0; }
.calc__bar {
  background: linear-gradient(90deg, #efebec 0%, #f8f6f6 50%, #efebec 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: calc-shimmer 1.4s linear infinite;
}
.calc__bar--total {
  height: clamp(30px, 3.4vw, 68px);
  width: 66%;
  margin: clamp(6px, .6vw, 12px) 0 0;
  border-radius: 10px;
}
.calc__bar--sub { height: calc(var(--f-copy) * 1.4); width: 42%; margin: 6px 0 0; }
.calc__ghost__rows { margin: clamp(14px, 1.3vw, 26px) 0 0; }
.calc__ghost__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(13px, 1.25vw, 22px) 0;
  border-top: 1px solid var(--line, #ece7e8);
}
.calc__ghost__row .calc__bar { height: var(--f-copy); }
.calc__ghost__row .calc__bar:first-child { width: 38%; }
.calc__ghost__row .calc__bar:last-child { width: 24%; }
.calc__bar--cta {
  height: clamp(47px, 4.5vw, 78px);   /* the CTA's padding plus its line */
  margin-top: clamp(18px, 1.8vw, 32px);
  border-radius: 999px;
}
.calc__bar--note { height: calc(var(--f-small) * 1.15); width: 58%; margin: 12px auto 0; }
@keyframes calc-shimmer { to { background-position: -200% 0; } }
/* A shimmer is decoration; the layout already says "waiting". */
@media (prefers-reduced-motion: reduce) { .calc__bar { animation: none; } }

/* ---- the two columns under it ---- */

.calc__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 60px);
  margin-top: clamp(30px, 3.2vw, 64px);
}
.calc__cols h2 {
  margin: 0 0 clamp(12px, 1.1vw, 22px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--f-h2);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.calc__how p {
  margin: 0 0 1em;
  font: 400 var(--f-copy)/1.65 var(--font-body);
  color: var(--ink);
}
.calc__faq .post__faq + .post__faq { margin-top: 10px; }

@media (max-width: 900px) {
  .calc, .calc__cols { grid-template-columns: minmax(0, 1fr); }
}

/* The chosen style, under the published span. */
.calc__here {
  margin: clamp(10px, .9vw, 18px) 0 0;
  font: 400 var(--f-copy)/1.4 var(--font-body);
  color: var(--grey);
}
.calc__here strong { color: var(--ink); }

/* Section banners carry photographs now. The frames were tinted spans; where
   a picture exists it fills the frame and the tint underneath never shows. */
.dhero__collage span, .thero__fan span { overflow: hidden; }
.dhero__collage span img, .thero__fan span img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}

/* ----------------------------------------------- banner photographs --- */
/* The three dark banners carried a tinted ground and no picture. The
   photograph goes UNDER the tint rather than replacing it: each ground now
   holds its gradient stack in --ground, so the same stack can be repainted
   as a scrim on ::after, above the picture. The white copy therefore keeps
   exactly the contrast it was drawn against, and a banner whose file is
   missing falls back to the ground that shipped before. */
.plan__art > img,
.known__art > img,
.dhero__ground > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The two colour pictures are cooled a little so the garnet scrim above
     them reads as one wash rather than two competing hues. */
  filter: saturate(.82) contrast(1.04);
}
/* departures-board is already black and white, so it takes no correction. */
.plan__art > img { filter: none; }

.plan__art::after,
.known__art::after,
.dhero__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ground);
  /* At 1 the picture is invisible and there was no point putting one in; at
     much below .7 the white copy starts to sit on raw photograph. Each banner
     sets its own, because what is behind the words differs: the hero carries
     a headline over open sea, the other two carry body copy and a button. */
  opacity: var(--scrim, .78);
}
.dhero__ground::after { border-radius: var(--f-radius); }
/* The hero is the one banner whose picture is meant to be looked at. */
.dhero__ground { --scrim: .70; }
.known__art   { --scrim: .76; }
/* Already black and white, so the scrim only has to darken, not desaturate. */
.plan__art    { --scrim: .74; }

@media (prefers-reduced-motion: no-preference) {
  .plan__art > img,
  .known__art > img,
  .dhero__ground > img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
  .plan:hover .plan__art > img,
  .known:hover .known__art > img { transform: scale(1.03); }
}

/* ======================================================================
   The new design, inside the article and the family pages only
   ----------------------------------------------------------------------
   Ported from web/new-website-design/"cura final website.html". That file
   is the landing page, so there is no article layout in it to copy: what
   comes across is the system, not a page.

   It is scoped to <main> for the same reason home.css scoped the design to
   #main. The nav and the footer are generated outside <main> and styled by
   styles.css, which every other page on the site also loads. Redefining the
   tokens here reaches the blog content and stops at its edges, so nothing
   on the landing page, how-it-works, guides, about or privacy moves.

   These are the site's own token NAMES holding the design's VALUES. blog.css
   already reads --ink 33 times, --font-body 53 times and --line 24 times, so
   remapping the names carries the whole sheet over without rewriting rules.
   ====================================================================== */
main.post,
main.guides {
  /* Ink ramp: design --ink / --ink-2 / --ink-3 */
  --ink:   #141416;
  --grey:  #5C5C64;
  --mute:  #8E8E96;
  --muted: #8E8E96;

  /* Grounds: design --surface-2 for the page tint, --surface for fills.
     --line is derived from --surface rather than invented: a hairline in
     this system is the surface a step down, not a fourth grey. */
  --paper:  #F7F7F8;
  --line:   #E6E6E8;
  --line-2: #F0F0F2;

  /* The design's CTA is a gradient, and the two ends are kept as their own
     tokens so a flat fill can still reach for one. --brand stays the warm
     end, which is what every existing flat use in this sheet expects. */
  --cta-a: #B24A54;
  --cta-b: #CC2974;
  --brand: var(--cta-a);
  --cta: linear-gradient(77deg, var(--cta-a) 3.76%, var(--cta-b) 101.32%);

  --font-body: "Alan Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --f-radius: 24px;          /* design --r-lg */
  --r-md: 16px;
  --shadow: 0 12px 40px rgba(20, 20, 22, .08), 0 2px 8px rgba(20, 20, 22, .04);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Both of these have to be restated here, not just remapped above.
     styles.css sets `color: var(--ink)` and `font-family: var(--font-body)`
     on <body>, and a custom property resolves at the element that USES it.
     Body therefore computes Inter and #191717, and every child inherits
     those computed values rather than re-reading the variables. Declaring
     them again on main is what makes the remap reach ordinary prose instead
     of only the rules in this sheet that name the tokens themselves. */
  color: var(--ink);
  font-family: var(--font-body);
}

/* ---- The gradient, on the things the design puts it on. Scoped to <main>
        so the nav's "Get started" and the footer's Discord button, which
        share the .btn class, are untouched. ---- */
main.post .btn,
main.guides .btn,
main.post .known__cta,
main.guides .known__cta {
  background: var(--cta);
  border-color: transparent;
  color: #fff;
}
main.post .btn:hover,
main.guides .btn:hover,
main.post .known__cta:hover,
main.guides .known__cta:hover { filter: brightness(1.06); }

/* The ghost button beside it stays a ghost: two gradients side by side and
   neither one is the action. */
main.post .known__ghost,
main.guides .known__ghost { background: #fff; color: var(--ink); }

/* ---- Type. The design sets headings in the display face at a normal
        weight with tight tracking, and body copy in Alan Sans. The fluid
        sizes already in this sheet are kept: the design is a fixed 1440
        layout and these pages are not. ---- */
main.post h1, main.post h2, main.post h3,
main.guides h1, main.guides h2, main.guides h3 {
  letter-spacing: -.025em;
  text-wrap: balance;
}
main.post p, main.guides p,
main.post li, main.guides li { text-wrap: pretty; }

/* The design's eyebrow: mono, small, wide, upper. */
main.post .mono, main.guides .mono,
main.post .answer__label, main.guides .answer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Motion: the subtle half only. The design also ships per-character
        headline reveals, a scroll-speed skew and a fixed curtain footer.
        Those are left on the landing page: an article is for reading, and
        animated headings fight the text and move the layout under it. ---- */
@media (prefers-reduced-motion: no-preference) {
  main.post .guide,
  main.guides .guide,
  main.post .tile,
  main.guides .tile { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  main.post .guide:hover,
  main.guides .guide:hover,
  main.post .tile:hover,
  main.guides .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}

/* The hero photo, clipped and tinted.
   The ground carries the radius but had overflow:visible, so the picture's
   square corners punched out past it and the banner read as a rectangle.
   And --ground paints behind the <img>, so with an opaque photo on top the
   tint did nothing at all.
   The overlay is the designer's: dark at the left where the words are,
   easing off to the right where the mosaic sits. Only applied when there is
   a photo to tint — without one the ground's own gradient is already the
   finished surface and does not want darkening twice. */
.dhero__ground { overflow: hidden; }
.dhero__ground:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(8, 5, 8, .80) 0%,
    rgba(8, 5, 8, .55) 45%,
    rgba(8, 5, 8, .15) 100%);
  pointer-events: none;
}

/* The card icons are drawn now, not typed.
   These spans used to hold an emoji, so font-size did the sizing; an <svg>
   needs a box. The proportions are carried over from the font-sizes they
   replace, and stroke:currentColor means each one takes the colour of the
   badge or glyph it sits in rather than bringing its own. */
.guide__icon svg { width: 46%; height: 46%; color: var(--ink); }
.guide__glyph svg { width: calc(var(--f-badge) * .82); height: calc(var(--f-badge) * .82); color: var(--ink); }
.tile__glyph  svg { width: calc(var(--f-badge) * 1.1);  height: calc(var(--f-badge) * 1.1);  color: var(--ink); }
.front__glyph svg { width: calc(var(--f-badge) * 1.3);  height: calc(var(--f-badge) * 1.3);  color: var(--ink); }
.front__pick-icon svg { width: 54%; height: 54%; color: var(--ink); }

/* Two calls to action in the plan card, not one.
   Plan a trip is the filled one because it is the thing being asked for;
   talking to an advisor sits beside it in white, the same pairing the
   "Already know where?" panel already uses. They wrap on a narrow card
   rather than squeezing. */
.plan__go { display: flex; flex-wrap: wrap; gap: clamp(8px, .8vw, 14px); align-items: center; }
/* No .btn class on this one: main.post .btn repaints every button inside an
   article with the filled gradient, at a specificity this cannot reach,
   which is why the secondary call to action came out looking primary. It
   carries its own layout instead. */
.plan__ghost {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-full, 999px);
  padding: clamp(10px, .95vw, 15px) clamp(16px, 1.5vw, 26px);
  font: 600 var(--f-small)/1 var(--font-body);
  text-decoration: none;
  border: 1px solid var(--line, #ece7e8);
}
.plan__ghost:hover { border-color: var(--ink); }