/* Moodora public surface — design tokens and the whole stylesheet.
 *
 * ONE file, served by WhiteNoise, cached hard. The plan flags that the tokens are
 * already forked three ways (web/tailwind.config.mjs, app/tailwind.config.ts, and
 * an inline :root block in templates/web/shared_trip.html); this is deliberately
 * not a fourth inline copy. When the shared token package lands, this file becomes
 * its Django consumer and nothing here has to be hunted down inside a template.
 *
 * Values mirror web/tailwind.config.mjs. `coral-deep` exists because plain coral
 * on cream does not clear 4.5:1 — use it for any coral TEXT.
 *
 * The page must be fully readable to a crawler and to someone on a train with one
 * bar of signal, so nothing here depends on JavaScript. Two small scripts enhance
 * it — save.js paints button state, gallery.js adds arrows and a counter — and
 * both are additive: with them blocked the page still reads, the photos still
 * scroll, and the lightbox still opens.
 */

:root {
  /* Light, and only light. Every other Moodora client commits to the warm palette
   * — iOS forces `.preferredColorScheme(.light)`, Android ships no dark scheme,
   * and the web app opts in by `[data-theme="dark"]` rather than by OS setting.
   * This page following `prefers-color-scheme` made it the ONE surface that went
   * black on a reader whose laptop was in dark mode, which read as a different
   * product than the app they had just come from. */
  color-scheme: light;

  --coral: #ea8479;
  --coral-deep: #d86a5e;
  --coral-light: #fbd5cd;
  --pink-soft: #fbe8e4;

  --bg: #fbf5f0;
  --card: #ffffff;
  --chip: #f6f2ed;
  --line: #f0e4df;

  --ink: #1d232b;
  --navy: #1d232b;
  --muted: #707379;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 12px 40px rgba(216, 106, 94, 0.1);
  --shadow-sm: 0 6px 20px rgba(216, 106, 94, 0.06);
  /* The landing's `shadow-soft` — neutral, not coral-tinted, because it sits
   * under navy and white surfaces rather than under coral ones. */
  --shadow-soft: 0 2px 8px rgba(29, 35, 43, 0.04), 0 10px 30px rgba(29, 35, 43, 0.06);

  --measure: 720px;
}


/* --- Type -----------------------------------------------------------------
 *
 * The same two faces the marketing site uses, self-hosted from the same source
 * files. A reader arriving from the landing page must not feel they left the
 * product, and a Google Fonts request on a crawled page is a third-party round
 * trip on the critical path plus a privacy question nobody asked for.
 *
 * `latin-ext` is not optional here: the six published languages need ă ș ț ă î
 * and ü ñ, and the base latin subset carries none of them — a Romanian title
 * would render in the fallback face mid-word.
 *
 * `swap`, so the text is readable while the face loads. A crawled page that
 * paints nothing for 300ms is a page that measures badly for no benefit. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* A skip link has to be REACHABLE and INVISIBLE until it is used. This one had
 * no rule at all, so it rendered as the first thing on every page — the one
 * accessibility affordance on the surface, sitting above the logo announcing
 * itself to everyone. Hidden off-canvas rather than `display:none`, which would
 * take it out of the tab order and defeat the point. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--coral);
  color: #1d232b;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* --- Header ---------------------------------------------------------------
 *
 * The landing's nav is a floating PILL, not a bar: `container-tm` with
 * `rounded-full px-4 py-2`, transparent until you scroll past 24px, then frosted
 * with a hairline border and a soft shadow. Reproduced here without the
 * scroll listener — these pages are read top to bottom rather than scrolled
 * through as a story, so the frosted state is simply always on. The alternative
 * was shipping JavaScript to a surface whose whole premise is not needing any.
 *
 * The wordmark is NAVY (`text-navy` in the landing's Logo), not coral. Coral is
 * for the pin and for accents; a coral wordmark reads as a different brand
 * sitting next to the same logo. */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 12px;
  /* Cream behind the pill so the page does not show through above it. */
  background: var(--bg);
}
.head-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) {
  .head-shell {
    padding: 0 32px;
  }
}
.head-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(251, 245, 240, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(29, 35, 43, 0.07);
  box-shadow: 0 10px 30px rgba(29, 35, 43, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.brand img {
  /* The pin is 190x256 trimmed; height drives, width follows. */
  width: 22px;
  height: 30px;
}
.brand span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.head-nav {
  display: none;
  gap: 28px;
}
/* First thing to drop on a narrow screen: the brand gets you home and the CTA is
 * the point of the header, so neither may wrap. */
@media (min-width: 760px) {
  .head-nav {
    display: flex;
  }
}
.head-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(29, 35, 43, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.head-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  border-radius: 999px;
  background: var(--coral);
  transition: width 0.3s ease;
}
.head-nav a:hover {
  color: var(--navy);
}
.head-nav a:hover::after {
  width: 100%;
}

/* The landing's `primary` button: navy on cream, not coral. Coral is the
 * secondary. Same radius, same lift, same shadow. */
.head-cta {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.head-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* --- Breadcrumbs -------------------------------------------------------- */

.crumbs {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.crumbs li::after {
  content: "›";
  margin-left: 6px;
  color: var(--line);
}
.crumbs li:last-child::after {
  content: "";
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--coral-deep);
}

/* --- Post head ---------------------------------------------------------- */

.posthead {
  margin-top: 18px;
}
h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, Cambria, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
}
.byline {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  background: var(--chip);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
}
.chip a {
  color: inherit;
  text-decoration: none;
}
.summary {
  margin-top: 18px;
  font-size: 18px;
  color: var(--muted);
}

/* --- Action bar (save / use) -------------------------------------------- */

.actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.action {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  /* Reserve the widest label so flipping Save -> Saved does not shift the row. */
  min-width: 108px;
  text-align: center;
}
.action:hover {
  border-color: var(--coral);
}
.action.primary {
  background: var(--coral);
  border-color: var(--coral);
  /* Ink, and 6.4:1 against coral. White here measures 3.1:1 and fails AA.
   * `coral-deep` is documented in the brand config as coral TEXT on cream — it is
   * not a background colour, which is the mistake this replaces. */
  color: #1d232b;
}
.action.is-on {
  background: var(--pink-soft);
  border-color: var(--coral);
  color: var(--coral-deep);
}
.claimbar {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.claimbar a {
  color: var(--coral-deep);
}

/* --- Gallery ------------------------------------------------------------ */

/* The hero breaks out of the text column to the full measure, which is what makes
 * the page feel like a travel story rather than a form. `--measure` is the prose
 * width; the hero gets a little more. */
.hero {
  margin: 22px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--chip);
  box-shadow: var(--shadow);
  position: relative;
}
.hero img {
  display: block;
  width: 100%;
  /* `height: auto` is load-bearing, not tidiness. The intrinsic width/height
   * attributes on the element are presentation hints, so the height attribute
   * sets a definite height — and `aspect-ratio` is ignored the moment BOTH
   * dimensions are definite. Without this the hero renders at the photo's full
   * natural height, which for a portrait shot is a screen and a half of one
   * image. The attributes still have to stay: they are what reserves the box
   * before the bytes land. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 18px 14px;
  font-size: 13px;
  color: #fff;
  /* A scrim rather than a solid bar: the caption stays legible over any photo
   * without hiding the third of the image people actually look at. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

/* --- Gallery ------------------------------------------------------------
 *
 * A carousel, not a mosaic. A mosaic crops every photo to fit a grid cell, which
 * is fine for a contact sheet and wrong for travel photography — the composition
 * someone framed is the thing worth showing. Here each photo gets a full slide at
 * its own aspect ratio, with the caption underneath rather than burned over the
 * part of the image people look at.
 *
 * The mechanics are CSS: scroll-snap for the slides, `:target` for the lightbox.
 * Both work with JavaScript off, so the enhancement script only adds arrows,
 * keyboard control and the position counter — nothing load-bearing. */

.gallery {
  margin: 20px 0 0;
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Bleed to the viewport edges on phones so the strip reads as continuous
   * rather than as a boxed widget, then pad back so the first slide still
   * lines up with the text column. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(20px, calc(50vw - var(--measure) / 2));
  padding-bottom: 10px;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 780px) {
  .gallery-track {
    margin-inline: 0;
    padding-inline: 0;
  }
}

.gallery-slide {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
  /* Sized by height so portrait and landscape photos sit on one visual line —
   * matching widths instead would make a portrait shot tower over the row. */
  max-width: 88vw;
}
@media (min-width: 780px) {
  .gallery-slide {
    max-width: 100%;
  }
}

.gallery-slide a {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--chip);
  box-shadow: var(--shadow-sm);
  outline-offset: 3px;
}
.gallery-slide img {
  display: block;
  height: 320px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}
@media (min-width: 780px) {
  .gallery-slide img {
    height: 420px;
  }
}
.gallery-slide figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  max-width: 46ch;
}

.gallery-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.gallery-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gallery-nav {
  margin-left: auto;
  display: none;
  gap: 8px;
}
/* Arrows appear only once the script is running: without it they would be
 * buttons that do nothing, which is worse than a strip you can simply swipe. */
.js .gallery-nav {
  display: flex;
}
.gallery-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gallery-nav button:hover:not(:disabled) {
  border-color: var(--coral);
  background: var(--pink-soft);
}
.gallery-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Lightbox. `:target` means the open state lives in the URL, so Back closes it
 * and a shared link opens on the right photo — both things a JS-only overlay
 * has to reimplement badly. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 15, 0.92);
}
.lightbox:target {
  display: flex;
}
.lightbox figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: 88vh;
}
.lightbox img {
  max-width: 100%;
  /* Leaves room for the caption underneath, so a long one never pushes the photo
   * off the top of the screen. */
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
}
/* Under the photo, on the backdrop — not over it. A caption burned onto the image
 * is legible until the first bright sky, and there is no scrim that fixes that
 * without covering the part of the picture worth enlarging. */
.lightbox figcaption {
  text-align: center;
  color: #f6efe9;
  font-size: 14px;
  max-width: 56ch;
}
/* The whole backdrop is the close target, so a tap anywhere outside the photo
 * dismisses it — the gesture people already expect. */
.lightbox-close {
  position: absolute;
  inset: 0;
  display: block;
}
.lightbox-x {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    scroll-behavior: auto;
  }
}

/* --- Prose -------------------------------------------------------------- */

.prose {
  margin-top: 28px;
  font-size: 17px;
}
.prose p {
  margin: 0 0 16px;
}

/* --- Itinerary ---------------------------------------------------------- */

.dayhdr {
  margin: 34px 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.daytitle {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 2px 0;
}
.daynote {
  margin: 8px 0 14px;
  padding: 12px 16px;
  background: var(--pink-soft);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.act {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.act .time {
  flex: 0 0 54px;
  font-weight: 800;
  font-size: 14px;
  color: var(--coral-deep);
}
.act .t {
  font-weight: 700;
  font-size: 15px;
}
.act .s {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}

/* --- Scrapbook ---------------------------------------------------------- */

.cards {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.card .emoji {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 10px;
}
.card .slot {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.card .text {
  margin-top: 6px;
  font-size: 15px;
}

/* --- Hub listing -------------------------------------------------------- */

.hublead {
  margin-top: 16px;
  font-size: 18px;
  color: var(--muted);
}
.grid {
  margin-top: 26px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .tile {
    transition: none;
  }
  .tile:hover {
    transform: none;
  }
}
.tile img {
  display: block;
  width: 100%;
  /* `height: auto` for the same reason as the hero: the width/height attributes
   * are presentation hints, so both dimensions are definite and `aspect-ratio`
   * is ignored without this. The attributes still have to stay — they are what
   * reserves the box before the bytes land. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--chip);
}
.tile .body {
  padding: 14px 16px 16px;
}
.tile h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.tile .sub {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}

.tile .excerpt {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  /* Two lines: enough to tell one trip from another, few enough that the cards in
   * a row stay the same height and the grid does not go ragged. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A card with no photo still needs a top: an empty white rectangle reads as a
 * broken image rather than as a trip nobody photographed. */
.tile .noimg {
  height: 96px;
  background: linear-gradient(135deg, var(--pink-soft), var(--chip));
}

/* --- Destination globe ---------------------------------------------------
 *
 * The list is the content and the globe is the decoration, so the layout puts the
 * list first in the source and only moves the globe beside it when there is room.
 * On a phone the globe never loads at all — 46KB of geometry to decorate a page
 * someone is reading on mobile data is not a trade worth making. */

.globe-block {
  margin-top: 26px;
  display: grid;
  gap: 22px;
  align-items: start;
}
@media (min-width: 860px) {
  .globe-block {
    grid-template-columns: 420px 1fr;
  }
  .globe {
    order: -1;
  }
}

.globe {
  display: flex;
  justify-content: center;
  /* `cursor: grab` on a thing you cannot grab is a lie, so it comes with the
   * script that makes it draggable — the element is `hidden` until then. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.globe:active {
  cursor: grabbing;
}
.globe canvas {
  display: block;
  max-width: 100%;
}

.globe-search {
  display: block;
  margin: 12px 0 14px;
}
.globe-search input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
.globe-search input:focus {
  outline: none;
  border-color: var(--coral);
}

.places {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Capped and scrollable rather than unbounded: a long list would push the CTA
   * and everything after it off the bottom of a page whose job is to send people
   * somewhere. */
  max-height: 420px;
  overflow-y: auto;
}
.places a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.places a:hover {
  background: var(--card);
}
.place-name {
  font-weight: 600;
  font-size: 15px;
}
.place-n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--chip);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* Visible to a screen reader, invisible on screen — the search field's label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Filters -------------------------------------------------------------
 *
 * Plain links, not a form. Every state is a URL, which means a filtered view can
 * be shared, opened in a new tab, and reached with the Back button — and it works
 * with JavaScript off, which on this surface is the baseline rather than a
 * fallback. The pages themselves are `noindex, follow`: real for a reader, but the
 * product of four facets is a URL space no hub should mint into the index. */

.filters {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 62px;
}
.facet {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.facet:hover {
  border-color: var(--coral);
}
.facet[aria-pressed="true"] {
  background: var(--coral);
  /* Same reasoning as the primary action: ink on coral, not white. */
  color: #1d232b;
  border-color: var(--coral);
}
.facet .n {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.facet[aria-pressed="true"] .n {
  color: rgba(29, 35, 43, 0.62);
}
.facet-clear {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
}
.facet-clear:hover {
  text-decoration: underline;
}

.hub-empty {
  margin-top: 26px;
  padding: 34px 20px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hub-empty p {
  margin: 0 0 12px;
  color: var(--muted);
}

/* --- Related / footer --------------------------------------------------- */

.section-title {
  margin: 44px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.cta {
  margin-top: 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cta h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}
.cta p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
}
.btn {
  display: inline-block;
  background: var(--coral);
  /* Same reasoning as .action.primary — see the note there. */
  color: #1d232b;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
}
/* --- Footer ---------------------------------------------------------------
 *
 * Mirrors `web/src/components/sections/Footer.astro` — same columns, same
 * tagline, same base line. Full-bleed and OUTSIDE `.wrap`: a footer constrained
 * to the 720px text column reads as the end of the article rather than the end
 * of the site, which is exactly the wrong signal at the bottom of a post. */

.site-foot {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px 24px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .foot-inner {
    padding-inline: 32px;
  }
}
@media (min-width: 768px) {
  .foot-inner {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
  }
}
.foot-brand p {
  margin: 14px 0 0;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.foot-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot-col ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.foot-col a:hover {
  color: var(--coral-deep);
}
/* Three items, centred on a phone and spread on a desktop — the landing's exact
 * bottom row, including the "Made with care" line, which is the one piece of
 * voice in the whole footer and the reason it does not read like boilerplate. */
.foot-base {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(29, 35, 43, 0.08);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
@media (min-width: 640px) {
  .foot-base {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 32px;
    text-align: left;
  }
  /* Centre item on desktop, last on mobile — same order swap the landing does. */
  .foot-made {
    order: 0;
  }
}
.foot-made {
  order: 1;
}
.foot-base p {
  margin: 0;
}
.foot-base a {
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease;
}
.foot-base a:hover {
  color: var(--coral-deep);
}