/* The home page: a navy band with the promise and the search, then the
   cities. Live cities are navy cards drawn from their rides, told apart by
   their mark, not a colour; cities to come are lighter cards that count a
   want. */
.hero-band {
  color-scheme: dark;
  --background: #0E2240; --text: #F7F3EA; --muted: #C9D6E8; --link: #8AD3DC;
  --surface: #18355E; --rule: #3A5A85; --focus: #F2B544;
  background: var(--background); color: var(--text);
}
/* The share card's art (scripts/city-posters.py hero): Paris's rides faint,
   the Seine loop in rose, a grey start dot. Decoration only: absolutely placed,
   so it never moves the page, and shaded where the words and search sit. */
.hero-band { position: relative; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; z-index: -2; top: 0; right: 0; width: min(62%, 860px); height: 100%; object-fit: cover; object-position: 30% 50%; pointer-events: none; user-select: none; }
.hero-band::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0E2240 38%, rgb(14 34 64 / .55) 62%, rgb(14 34 64 / .1)); }
.hero-sub { color: #FF9EC0; font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 46ch; margin: -20px 0 36px; }
.hero-band .site-header { border-bottom-color: var(--rule); }
.hero-band nav a { color: var(--text); }
.home-page .home { padding-top: 0; }
.hero { padding: clamp(48px, 9vw, 112px) 0 clamp(48px, 8vw, 96px); width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1; margin: 0 0 24px; max-width: 12ch; }
.hero .lede { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 46ch; margin-bottom: 36px; }
.city-search { max-width: 640px; }
.city-search label { display: block; font-weight: 600; margin-bottom: 10px; }
.city-search div { display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); }
.city-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font: 500 1.125rem var(--body); color: var(--text); background: transparent; border: 0; border-radius: 10px; }
.city-search input::placeholder { color: var(--muted); opacity: .8; }
.city-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.city-search button { min-height: 52px; padding: 0 22px; font: 700 1rem var(--body); color: var(--onAction); background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.city-note { min-height: 1.6em; margin: 14px 0 0; font-weight: 600; max-width: 60ch; }
.city-note:empty { min-height: 0; margin: 0; }

.home section { padding-block: clamp(40px, 6vw, 72px) 0; }
.home h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; letter-spacing: -.02em; margin: 0 0 24px; }
.home .caption { margin: 14px 0 0; }
.soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.soon { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; min-height: 180px; padding: 20px; border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; border: 1.5px solid transparent; }
.soon .where { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.soon b { font: 650 1.6rem/1.1 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; }
.soon .blurb { font-size: .9375rem; color: var(--muted); }
.soon em { margin-top: auto; padding-top: 12px; font-style: normal; font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: .25em; }
.soon:hover { border-color: var(--muted); }
.soon:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.soon[aria-pressed="true"] { border-color: var(--text); }
.soon[aria-pressed="true"] em { text-decoration: none; }
.soon[aria-pressed="true"] em::before { content: "✓ "; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: step; border-top: 2px solid var(--text); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.steps li::before { content: counter(step); font: 650 2.5rem/1 var(--display); color: var(--clay); }
.steps b { font: 600 1.3rem/1.25 var(--display); }
.steps span { color: var(--muted); }
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; border-bottom: 1px solid var(--rule); padding-bottom: clamp(40px, 6vw, 72px); }
.trust h2 { margin: 0; }
.trust p { font-size: 1.0625rem; margin: 0; }
.home-page .site-footer { margin-top: 8px; }

@media (max-width: 760px) {
  .hero { width: calc(100% - 40px); }
  /* On a phone the art sits above and behind the headline, fading out before the search. */
  /* On a phone the art gets a band of its own between the menu and the headline,
     fading out above the words so nothing is read across a line. */
  .hero { padding-top: 190px; }
  .hero-art { width: 100%; height: 300px; top: 120px; object-position: 50% 50%; }
  .hero-band::before { background: linear-gradient(180deg, #0E2240 110px, rgb(14 34 64 / .1) 170px, rgb(14 34 64 / .1) 290px, #0E2240 380px); }
  .city-search div { flex-direction: column; }
  .city-search button { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; gap: 16px; }
}
.city-more { margin: 16px 0 0; font-weight: 600; }
/* The see-all link under the home page's featured cities. */
.see-all { margin: 24px 0 0; }
.see-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; color: var(--text); text-decoration: none; border: 1.5px solid var(--text); }
.see-all a:hover { background: var(--text); color: var(--background); text-decoration: underline; }
.see-all a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  /* The page is navy too: the band and the cards keep an edge. */
  .hero-band { border-bottom: 1px solid #3A5A85; }
}
/* City marks (brand study 7): the city's own ride on top, its network art faint behind. */
.city-mark { position: absolute; top: 50%; left: 50%; height: 68%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); color: #F7F3EA; pointer-events: none; }

/* City tiles (rides/listing.py: card), here and on /cities/: drawn from their
   rides where the city has art and a plain wheel where it doesn't yet. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.city-tile { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #0E2240; color: #F7F3EA; text-decoration: none; box-shadow: 0 14px 32px -22px rgb(14 34 64 / .6); transition: transform .2s; }
.city-tile:hover { transform: translateY(-2px); }
.city-tile:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.city-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.tile-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.tile-art .city-mark { height: 78%; }
/* No art yet: the wheel, faint, on the same navy. */
.tile-art.plain { display: grid; place-items: center; background: #18355E; }
.tile-art.plain img { width: 64px; height: 64px; object-fit: contain; opacity: .5; }
.tile-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px 18px; }
.city-tile .where { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C9D6E8; }
.city-tile b { font: 650 1.6rem/1.1 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; letter-spacing: -.01em; }
.city-tile .blurb { color: #DCE6E2; font-size: .9375rem; }
.city-tile .facts, .city-tile .away { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.city-tile .away { color: #8AD3DC; }

@media (max-width: 760px) { .tile-body { padding: 10px 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .city-tile { transition: none; } .city-tile:hover { transform: none; } }
@media (prefers-color-scheme: dark) { .city-tile { box-shadow: 0 0 0 1px #3A5A85; } }

/* "Ride now": the featured cities, four across, two on a phone. */
.tile-grid.featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.featured .city-tile b { font-size: clamp(1.2rem, 2vw, 1.5rem); overflow-wrap: break-word; }
@media (max-width: 900px) { .tile-grid.featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .featured .tile-body { padding: 8px 12px 14px; } .featured .city-tile .facts { font-size: .8125rem; } }
/* Copenhagen fits a 320 px phone's half width whole. */
@media (max-width: 360px) { .featured .city-tile b { font-size: 1rem; } .answer-route { width: 96px; } }
.live-cities .card-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 20px 0 0; font-weight: 600; }
.live-cities .card-areas span { color: var(--muted); }
.live-cities .card-areas a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }

/* The worked example (rides/home.py): one question, the planner's top three. */
.ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 8px; }
.ask span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ask q { font: 600 clamp(1.35rem, 2.6vw, 1.9rem)/1.2 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; quotes: "“" "”"; }
.ask-lede { margin: 0 0 20px; color: var(--muted); }
.answer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.answer-card { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: #0E2240; color: #F7F3EA; text-decoration: none; box-shadow: 0 14px 32px -22px rgb(14 34 64 / .6); transition: transform .2s; }
.answer-card:hover { transform: translateY(-2px); }
.answer-card:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.answer-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.answer-route { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #13294B; }
.answer-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; }
.answer-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #F7F3EA; font-weight: 700; font-size: .875rem; margin-bottom: 4px; }
.answer-card b { font: 650 1.4rem/1.15 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; letter-spacing: -.01em; }
.answer-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.answer-facts { font-size: .9375rem; color: #DCE6E2; font-variant-numeric: tabular-nums; }
.answer-why { margin-top: 6px; font-size: .9375rem; color: #C9D6E8; }
.answer-why::before { content: "✦ "; color: #FF9EC0; }
/* The next step after the example: outlined, as the old city cards' "Plan a ride"; Find rides stays
   the page's one rose fill (docs/brand/README.md). Deep rose on paper, rose on navy. */
.plan-own { margin: 24px 0 0; }
.plan-own a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; color: var(--text); background: transparent; border: 2px solid #C7346F; text-decoration: none; }
.plan-own a:hover { background: var(--text); border-color: var(--text); color: var(--background); text-decoration: underline; }
.plan-own a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 760px) {
  .answer { grid-template-columns: 1fr; gap: 12px; }
  .answer-card { flex-direction: row; }
  .answer-route { width: 120px; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; }
  .answer-body { padding: 12px 14px 14px; min-width: 0; }
  .answer-rank { width: 24px; height: 24px; font-size: .8125rem; }
  .answer-card b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .answer-card { transition: none; } .answer-card:hover { transform: none; } }
@media (prefers-color-scheme: dark) { .answer-card { box-shadow: 0 0 0 1px #3A5A85; } .plan-own a { border-color: #FF9EC0; }
  .plan-own a:hover { border-color: var(--text); } }