/* Journey marketing site. Tokens are copied from the app's design system
   (Palette-Holdings/Journey: DESIGN.md, design/tokens.css). Re-copy when they change. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #222222;
  --muted: #6a6a6a;
  --surface: #ffffff;
  --fill: #f7f7f7;
  --fill-strong: #f2f2f2;
  --border: #dddddd;
  --hairline: #ebebeb;
  --sans: "Figtree", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --radius-thumb: 15px;
  --radius-card: 28px;
  --gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}
h1,
h2 {
  text-wrap: balance;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.muted {
  color: var(--muted);
}
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 17px/24px var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost {
  height: 40px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  font: 500 15px/21px var(--sans);
}

/* ---------- banner (part of the page, not a floating pill) ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.brand span {
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.28em;
}

/* ---------- home: hero ---------- */
.hero {
  padding: 28px 0 40px;
  text-align: center;
}
.hero h1 {
  font: 400 38px/40px var(--serif);
}
.hero p {
  margin-top: 8px;
  color: var(--muted);
}

/* ---------- home: the route ---------- */
.route {
  max-width: 560px;
  margin-inline: auto;
  padding-inline: 12px;
}
.stop {
  --a: #fdc99d;
  --b: #f298a0;
  position: relative;
  padding-bottom: 48px;
}
.stop:nth-of-type(2) {
  --a: #f298a0;
  --b: #b37cca;
}
.stop:nth-of-type(3) {
  --a: #b37cca;
  --b: #717ae6;
}
.stop:nth-of-type(4) {
  --a: #717ae6;
  --b: #4682f0;
}
.stop:nth-of-type(5) {
  --a: #4682f0;
  --b: #3287f3;
}
.stop.end {
  --a: #3287f3;
  padding: 0 0 52px;
}
.dot {
  display: none;
}
.stop .txt {
  padding-inline: 8px;
  text-align: center;
}
.stop .label {
  font: 600 14px/20px var(--sans);
  color: var(--muted);
}
.stop h2 {
  margin: 2px 0 6px;
  font: 600 25px/30px var(--sans);
}
.stop .txt p:not(.label) {
  color: var(--muted);
}
/* The card is as tall as the whole app screen plus a margin, so the phone is never cut off. */
.vis {
  position: relative;
  margin-top: 20px;
  padding: 40px 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.vis .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vis .phone {
  position: relative;
  width: 214px;
  height: auto;
  margin: 0 auto;
}
/* Phone: the space above the closing heading matches the space between its text and the button. */
.stop.end .txt p {
  margin: 6px 0 41px;
}
.stop.end .btn {
  display: flex;
}

/* ---------- home: the route on a phone ----------
   One line down the left edge with a dot beside each heading. Without a script the whole rail is
   simply there. With one (.rail, set in index.html) each stretch is clipped to how far you have
   scrolled (--f, 0 to 1 per stop) and a dot appears when the line reaches it. */
@media (max-width: 959.98px) {
  .route {
    padding-left: 42px;
  }
  .stop .txt {
    padding-inline: 2px 8px;
    text-align: left;
  }
  .stop h2 {
    text-wrap: pretty;
  }
  .stop::before {
    content: "";
    position: absolute;
    left: -22.5px;
    top: 10px;
    bottom: -10px;
    width: 3px;
    background: linear-gradient(180deg, var(--a), var(--b));
  }
  .stop:nth-of-type(5) {
    padding-bottom: 36px;
  }
  .stop:nth-of-type(5)::before {
    bottom: -17px;
  }
  .stop.end::before {
    display: none;
  }
  .dot {
    display: block;
    position: absolute;
    z-index: 1;
    left: -28px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--a);
  }
  .stop.end .dot {
    left: -32px;
    top: 4px;
    width: 22px;
    height: 22px;
  }
  .rail .stop::before {
    clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0);
  }
  .rail .dot {
    transform: scale(0);
    transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .rail .stop.on .dot {
    transform: scale(1);
  }
}
@media print {
  .rail .stop::before {
    clip-path: none;
  }
  .rail .dot {
    transform: none;
  }
}

/* ---------- content appears as you scroll (home) ----------
   .js is set by a small script in index.html. Without it everything is visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}
.js .vis.reveal {
  transition-delay: 0.12s;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media print {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--hairline);
  padding: 26px 0 34px;
  text-align: center;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 16px 0;
  font: 500 15px/21px var(--sans);
}
.foot nav a {
  text-decoration: none;
}
.foot nav a:hover {
  text-decoration: underline;
}
.foot small {
  font: 400 13px/18px var(--sans);
  color: var(--muted);
}
/* Home page, phone and tablet: the route's line takes room on the left, so the closing button sits
   12px right of the page's middle. The footer moves with it so the two line up. */
@media (max-width: 959.98px) {
  .foot.home .container {
    padding-left: calc(var(--gutter) + 24px);
  }
}

/* ---------- Terms, Privacy, Help ---------- */
.doc {
  max-width: 720px;
  margin-inline: auto;
  padding: 28px 0 72px;
}
.doc h1 {
  font: 400 38px/40px var(--serif);
}
.doc .meta {
  margin-top: 8px;
  color: var(--muted);
  font: 400 15px/21px var(--sans);
}
.doc h2 {
  margin: 44px 0 10px;
  font: 700 22px/28px var(--sans);
  text-wrap: pretty;
}
.doc h3 {
  margin: 28px 0 8px;
  font: 600 17px/24px var(--sans);
}
.doc p,
.doc li {
  font: 400 17px/26px var(--sans);
}
.doc p + p,
.doc p + ul,
.doc ul + p,
.doc p + .table,
.doc .table + p,
.doc ul + .table {
  margin-top: 14px;
}
.doc ul {
  padding-left: 22px;
}
.doc li + li {
  margin-top: 6px;
}
.doc a {
  text-underline-offset: 3px;
}
.doc strong {
  font-weight: 600;
}
.doc .table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-thumb);
}
.doc table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font: 400 15px/22px var(--sans);
}
.doc th,
.doc td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.doc th {
  font-weight: 600;
  background: var(--fill);
}
.doc tr:last-child td {
  border-bottom: 0;
}
.doc td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
.notfound {
  padding: 96px 0 120px;
  text-align: center;
}
.notfound h1 {
  font: 400 38px/40px var(--serif);
}
.notfound p {
  margin: 10px 0 28px;
  color: var(--muted);
}

/* ---------- tablet ---------- */
@media (min-width: 600px) {
  :root {
    --gutter: 32px;
  }
  .hero {
    padding: 44px 0 56px;
  }
  .hero h1,
  .doc h1,
  .notfound h1 {
    font-size: 56px;
    line-height: 58px;
  }
  .hero p {
    margin-top: 12px;
    font-size: 20px;
    line-height: 28px;
  }
  .vis {
    padding: 48px 0;
  }
  .vis .phone {
    width: 248px;
  }
  .doc {
    padding-top: 44px;
  }
}

/* ---------- computer: the route runs down the middle, stops alternate ---------- */
@media (min-width: 960px) {
  :root {
    --gutter: 40px;
  }
  .top {
    height: 92px;
  }
  .brand img {
    width: 32px;
    height: 32px;
  }
  .brand span {
    font-size: 14px;
  }
  .hero {
    padding: 72px 0 88px;
  }
  .hero h1 {
    font-size: clamp(64px, 6.6vw, 84px);
    line-height: 1;
  }
  .hero p {
    margin-top: 14px;
    font-size: 22px;
    line-height: 30px;
  }
  .route {
    max-width: 1200px;
    padding-inline: var(--gutter);
  }
  .stop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(96px, 14vw, 176px);
    align-items: start;
    padding-bottom: 96px;
  }
  .stop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 38px;
    bottom: -38px;
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(180deg, var(--a), var(--b));
  }
  .dot {
    display: block;
    position: absolute;
    left: 50%;
    top: 27px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: var(--a);
  }
  .js .stop::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s cubic-bezier(0.6, 0, 0.25, 1) 0.2s;
  }
  .js .stop.in::before {
    transform: scaleY(1);
  }
  .js .dot {
    transform: scale(0);
    transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .js .stop.in .dot {
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .js .stop::before,
    .js .dot {
      transform: none;
      transition: none;
    }
  }
  .stop .txt {
    max-width: 400px;
    padding: 28px 0 0;
    text-align: left;
  }
  .stop:nth-of-type(odd) .txt {
    justify-self: end;
  }
  .stop:nth-of-type(even) .vis {
    order: -1;
  }
  .stop h2 {
    margin: 6px 0 12px;
    font-size: 38px;
    line-height: 43px;
  }
  .stop .txt p:not(.label) {
    font-size: 20px;
    line-height: 28px;
  }
  .vis {
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
  }
  .vis .photo {
    position: relative;
    inset: auto;
    height: 420px;
    border-radius: var(--radius-card);
  }
  .vis .phone {
    width: 240px;
    margin: -280px auto 0;
  }
  .stop.end {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 104px;
    text-align: center;
  }
  .stop.end::before {
    display: none;
  }
  .stop.end .dot {
    top: 22px;
    width: 32px;
    height: 32px;
    margin-left: -16px;
  }
  .stop.end .txt,
  .stop.end:nth-of-type(odd) .txt {
    justify-self: center;
    max-width: none;
    padding-top: 92px;
    text-align: center;
  }
  .stop.end h2 {
    margin: 0;
  }
  .stop.end .txt p {
    margin: 10px 0 32px;
    font-size: 17px;
    line-height: 24px;
  }
  .stop.end .btn {
    display: inline-flex;
    padding: 0 40px;
  }
  .foot {
    padding: 32px 0 40px;
    text-align: left;
  }
  .foot .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  /* The links sit in the exact middle of the page, in line with the download button. */
  .foot .container {
    position: relative;
  }
  .foot nav {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
  .doc {
    padding: 56px 0 104px;
  }
  .doc h1,
  .notfound h1 {
    font-size: 64px;
    line-height: 66px;
  }
}

/* ---------- FAQ ---------- */
.crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  font: 500 14px/20px var(--sans);
  color: var(--muted);
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
/* Topic chips: one row that swipes sideways on a phone, wraps on a computer. */
.jump {
  display: flex;
  gap: 8px;
  margin: 24px calc(var(--gutter) * -1) 0;
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.jump::-webkit-scrollbar {
  display: none;
}
.jump a {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 15px/36px var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.jump a:hover {
  background: var(--fill);
}
.qs {
  scroll-margin-top: 16px;
}
/* Section headings: a dot and the heading text in the same gradient, taken from the home page's
   route. Each section moves one step along it. */
.qs {
  --a: #fdc99d;
  --b: #f298a0;
}
.qs:nth-of-type(2) { --a: #f298a0; --b: #b37cca; }
.qs:nth-of-type(3) { --a: #b37cca; --b: #717ae6; }
.qs:nth-of-type(4) { --a: #717ae6; --b: #4682f0; }
.qs:nth-of-type(5) { --a: #4682f0; --b: #3287f3; }
.qs:nth-of-type(6) { --a: #3287f3; --b: #717ae6; }
.qs:nth-of-type(7) { --a: #b37cca; --b: #f298a0; }
.qs:nth-of-type(8) { --a: #f298a0; --b: #fdc99d; }
.qs h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qs h2::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a), var(--b));
}
.qs h2 span {
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media print {
  .qs h2 span {
    color: var(--ink);
    background: none;
  }
}
/* Open answers, one after another: no dropdowns, no dividers. */
.faq .q {
  margin-top: 26px;
  scroll-margin-top: 16px;
}
.faq .q h3 {
  margin: 0 0 6px;
  font: 600 18px/25px var(--sans);
  text-wrap: pretty;
}
.faq .q p {
  color: #4a4a4a;
}
.faq .qs + .qs {
  margin-top: 64px;
}
.faq .qs h2 {
  margin-bottom: 0;
}
.faq .ask {
  margin-top: 56px;
  padding: 32px 24px;
  border-radius: var(--radius-card);
  background: var(--fill);
  text-align: center;
}
.faq .ask h2 {
  margin: 0 0 8px;
}
.faq .ask p {
  margin-bottom: 24px;
  color: var(--muted);
}
@media (min-width: 960px) {
  .jump {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
  }
  .faq .q h3 {
    font-size: 19px;
    line-height: 26px;
  }
}
@media print {
  .jump,
  .faq .ask .btn {
    display: none;
  }
}

/* ---------- Guides (/guides and /guides/<city>) ----------
   Built by tools/build_guides.py. Reuses .doc, .faq, .qs, .q, .crumbs and .jump from above. */
.guide .cover {
  position: relative;
  margin: 20px 0 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.guide .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Who took the photo, bottom left on the photo: "Name / Unsplash", both linked. */
.guide .cover .credit {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 500 12px/18px var(--sans);
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.guide .cover .credit a {
  color: #fff;
  text-decoration: none;
}
.guide .cover .credit a:hover {
  text-decoration: underline;
}
.guide .tagline {
  margin-top: 16px;
  font: 400 18px/28px var(--sans);
}
.guide .tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.guide .tile {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 13px 15px;
}
.guide .tile small {
  display: block;
  font: 500 13px/18px var(--sans);
  color: var(--muted);
}
.guide .tile b {
  display: block;
  margin-top: 2px;
  font: 600 17px/23px var(--sans);
}
.guide .tile i {
  display: block;
  margin-top: 2px;
  font: 400 13px/18px var(--sans);
  font-style: normal;
  color: var(--muted);
}
.guide .days3 {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
}
.guide .days3 li {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.guide .days3 li:last-child {
  border-bottom: 0;
}
.guide .days3 b {
  display: block;
  font: 600 17px/24px var(--sans);
}
.guide .days3 span {
  display: block;
  color: #4a4a4a;
  font: 400 16px/24px var(--sans);
}
.guide .months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.guide .months span {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: 500 14px/36px var(--sans);
  text-align: center;
  color: var(--muted);
}
.guide .months .best {
  border: 1.5px solid transparent;
  color: var(--ink);
  font-weight: 600;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(115deg, #f4b79c, #dfa6c6 52%, #97a3e2) border-box;
}
.guide .more {
  display: flex;
  gap: 10px;
  margin: 14px calc(var(--gutter) * -1) 0;
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.guide .more::-webkit-scrollbar {
  display: none;
}
.guide .more a {
  flex: none;
  width: 150px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
}
.guide .more b {
  display: block;
  font: 600 17px/23px var(--sans);
}
.guide .more small {
  font: 400 13px/18px var(--sans);
  color: var(--muted);
}
.guide .cta {
  margin-top: 56px;
  padding: 26px 22px;
  border-radius: var(--radius-card);
  background: var(--fill);
  text-align: center;
}
.guide .cta h2 {
  margin: 0 0 6px;
  font: 600 22px/28px var(--sans);
}
.guide .cta p {
  margin-bottom: 18px;
  color: var(--muted);
  font: 400 16px/24px var(--sans);
}
.guide .cta .btn {
  display: flex;
}
.guide .how {
  margin-top: 28px;
  color: var(--muted);
  font: 400 14px/21px var(--sans);
}
/* Guides index: the cards, and one Filter button that opens Best in, Region and Vibe. No script:
   each choice is a radio button and the cards that don't match are hidden with :has(). */
.guide .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.guide .grid a {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
}
.guide .grid a:hover {
  background: var(--fill);
}
.guide .grid b {
  display: block;
  font: 600 18px/24px var(--sans);
}
.guide .grid small {
  display: block;
  font: 400 13px/18px var(--sans);
  color: var(--muted);
}
.flt {
  margin-top: 20px;
}
.flt summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 15px/21px var(--sans);
  list-style: none;
  cursor: pointer;
}
.flt summary::-webkit-details-marker {
  display: none;
}
.flt[open] summary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.flt:not([open]):has(input:not([id$="-all"]):checked) summary {
  border: 1.5px solid transparent;
  font-weight: 600;
  background:
    linear-gradient(115deg, #fdf2ec, #f7f1f6 52%, #f2f0fc) padding-box,
    linear-gradient(115deg, #f4b79c, #dfa6c6 52%, #97a3e2) border-box;
}
.fpanel {
  margin-top: 10px;
  padding: 4px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
}
.flabel {
  margin-top: 14px;
  font: 600 13px/18px var(--sans);
  color: var(--muted);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.filters input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filters label {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 15px/36px var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.filters input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filters input:focus-visible + label {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.clr {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 15px/21px var(--sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fform:not(:has(input:not([id$="-all"]):checked)) .clr {
  color: #b0b0b0;
  text-decoration: none;
}
.gindex:has(#s-spring:checked) .grid a:not(.s-spring),
.gindex:has(#s-summer:checked) .grid a:not(.s-summer),
.gindex:has(#s-autumn:checked) .grid a:not(.s-autumn),
.gindex:has(#s-winter:checked) .grid a:not(.s-winter),
.gindex:has(#r-europe:checked) .grid a:not(.r-europe),
.gindex:has(#r-asia:checked) .grid a:not(.r-asia),
.gindex:has(#r-americas:checked) .grid a:not(.r-americas),
.gindex:has(#r-mea:checked) .grid a:not(.r-mea),
.gindex:has(#v-warm:checked) .grid a:not(.v-warm),
.gindex:has(#v-slow:checked) .grid a:not(.v-slow),
.gindex:has(#v-food:checked) .grid a:not(.v-food),
.gindex:has(#v-city:checked) .grid a:not(.v-city),
.gindex:has(#v-by_the_sea:checked) .grid a:not(.v-by_the_sea),
.gindex:has(#v-nature:checked) .grid a:not(.v-nature),
.gindex:has(#v-adventure:checked) .grid a:not(.v-adventure),
.gindex:has(#v-culture:checked) .grid a:not(.v-culture),
.gindex:has(#v-nightlife:checked) .grid a:not(.v-nightlife),
.gindex:has(#v-romantic:checked) .grid a:not(.v-romantic),
.gindex:has(#v-shopping:checked) .grid a:not(.v-shopping) {
  display: none;
}
@media (min-width: 960px) {
  .guide .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
  .guide .months {
    grid-template-columns: repeat(12, 1fr);
  }
  .guide .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .guide .cta .btn {
    display: inline-flex;
    padding: 0 40px;
  }
  .guide .more {
    margin-inline: 0;
    padding-inline: 0;
  }
}
@media print {
  .flt,
  .guide .cta .btn {
    display: none;
  }
}
/* Guides: sourced fact lists and the source list. */
.guide .facts,
.guide .srcs {
  list-style: none;
  padding: 0;
}
.guide .facts li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.guide .facts li:last-child {
  border-bottom: 0;
}
.guide .facts b {
  display: block;
  font: 600 15px/21px var(--sans);
}
.guide .facts span {
  display: block;
  color: #4a4a4a;
  font: 400 16px/24px var(--sans);
}
.guide .note {
  margin-top: 8px;
  color: var(--muted);
  font: 400 13px/19px var(--sans);
}
.guide .srcs {
  margin-top: 14px;
  columns: 2;
  column-gap: 20px;
}
.guide .srcs li {
  margin: 0 0 8px;
  break-inside: avoid;
  font: 400 15px/21px var(--sans);
  overflow-wrap: anywhere;
}
/* Guides: a sentence with a link to the app, inside a section. */
.guide .plug {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--fill);
  color: #4a4a4a;
  font: 400 16px/24px var(--sans);
}
.guide .plug a {
  color: var(--ink);
  font-weight: 600;
}