/* ============================================================
   Homepage only. To the Figma Make design, section by section.
   ============================================================ */

/* ---------- hero: the mark on olive, the line on ivory ---------- */
main > section.hero{ padding:0; min-height:calc(100vh - 6.5rem); display:grid; grid-template-columns:.8fr 1.2fr; position:relative; }
.hero-mark{ background:#4e3a27; color:var(--ivory); padding:var(--page); justify-content:center; align-items:center; display:flex; }
.hero-mark .mark{ color:var(--ivory); }
.hero-copy{ padding:var(--page); align-self:center; }
.hero-copy h1{ max-width:11ch; margin:2rem 0 2.5rem; }
.scroll-note{ color:var(--gold-ink); letter-spacing:.12em; bottom:2rem; right:var(--page); text-transform:uppercase; font-size:.7rem; position:absolute; }

/* ---------- the finder ---------- */
.finder{ background:var(--paper); grid-template-columns:.9fr 1.2fr .9fr; gap:3rem; display:grid; padding:var(--section) var(--page); scroll-margin-top:0; }
.finder h2{ margin-top:1rem; max-width:10ch; }
.f-step{ display:none; }
.f-step.is-on{ display:block; }
.finder-options,.f-picks{ border-top:1px solid var(--line); }
.f-pick{
  border:0; border-bottom:1px solid var(--line); font-family:var(--display); letter-spacing:-0.02em; text-align:left; background:none;
  justify-content:space-between; align-items:center; width:100%; padding:1rem 0; font-size:clamp(1.3rem,2vw,1.8rem); display:flex; color:var(--ink);
}
.f-pick .f-pick-s{ display:none; }
.f-pick::after{ content:'\25CB'; color:var(--gold-ink); font-family:var(--sans); font-size:.85rem; }
.f-pick[aria-pressed="true"]{ color:var(--olive); }
.f-pick[aria-pressed="true"]::after{ content:'\25CF'; }
.f-pick:hover{ color:var(--olive); }
.f-back{ margin-top:1.25rem; background:none; border:0; border-bottom:1px solid currentColor; padding:0 0 .3rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }

.finder-result{ border:1px solid var(--line); flex-direction:column; justify-content:center; align-self:stretch; min-height:18rem; padding:2rem; display:flex; }
.finder-result .f-empty{ color:var(--gold-ink); letter-spacing:.13em; text-transform:uppercase; font-size:.7rem; line-height:1.6; }
.rec .f-count{ color:var(--gold-ink); letter-spacing:.13em; text-transform:uppercase; font-size:.7rem; }
.rec h3{ margin:1rem 0 1.5rem; font-size:clamp(2rem,3vw,3.5rem); line-height:1.05; }
.rec h3:focus{ outline:none; }
.rec .f-why{ line-height:1.6; font-size:.9rem; margin-bottom:1.5rem; }
.rec .f-facts{ display:none; }
.rec .f-cta{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.rec .f-more{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.3rem; }
.rec .f-back{ margin-top:1.5rem; }
.finder-static ul{ list-style:none; border-top:1px solid var(--line); }
.finder-static li a{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); text-decoration:none; font-family:var(--display); font-size:clamp(1.1rem,1.6vw,1.4rem); }
.finder-static li a b{ font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); text-align:right; }
.home-live .finder-static{ display:none; }
.finder-live{ display:none; }
.home-live .finder-live{ display:block; }

/* ---------- routes ---------- */
.routes-section{ background:var(--ivory); padding:var(--section) var(--page); }
.route-row{ grid-template-columns:.25fr 1fr 1.35fr 1.1fr .35fr; padding:2.5rem 0; }
.route-number{ color:var(--gold-ink); font-size:.75rem; }
.route-main h3{ font-size:clamp(1.8rem,2.6vw,2.8rem); line-height:1; }
.route-main p,.route-detail{ margin-top:.75rem; font-size:.82rem; line-height:1.55; }
.route-facts{ grid-column:auto; grid-template-columns:repeat(3,1fr); }
.route-detail{ margin:0; }
.route-row .text-link{ place-self:start end; }
.route-row .text-link::after{ content:' \2197'; }
.route-row.is-match{ background:var(--paper); box-shadow:-1rem 0 0 var(--paper),1rem 0 0 var(--paper); }
.route-row.is-match .route-number::after{ content:' Your route'; display:block; margin-top:.3rem; color:var(--olive); letter-spacing:.08em; text-transform:uppercase; }

/* ---------- the working day ---------- */
.hours{ background:var(--ink); color:var(--ivory); padding:var(--section) var(--page); }
.hours h2{ color:var(--ivory); }
.hours .section-title{ margin-bottom:5rem; }
.hours-chart{ margin-left:calc(33.333% + 1rem); }
.time-axis{ border-bottom:1px solid var(--ivory-line); justify-content:space-between; padding-bottom:.75rem; font-size:.75rem; display:flex; }
.chart-row{ border-bottom:1px solid var(--ivory-line-soft); grid-template-columns:9rem 1fr; align-items:center; padding:1.25rem 0; font-size:.85rem; display:grid; text-decoration:none; color:inherit; }
.bar-track{ height:1.5rem; position:relative; }
.bar-track span{ background:var(--gold); height:100%; display:block; transform-origin:left center; transition:transform .9s var(--ease); }
.bar-full{ width:100%; }
.bar-short{ width:45%; }
.bar-class{ opacity:.45; width:11%; margin-left:45%; }
.bar-medium{ width:56%; }
.home-live .hours-chart:not(.is-drawn) .bar-track span{ transform:scaleX(0); }
.chart-row.is-match .bar-track span{ background:var(--ivory); }

/* ---------- editorial pair, not a ladder, promise ---------- */
.editorial-pair,.not-ladder{ grid-template-columns:1fr 1fr; gap:4rem; display:grid; padding:var(--section) var(--page); }
.editorial-pair h2,.not-ladder h2{ margin-top:1rem; font-size:clamp(3.5rem,6vw,7rem); line-height:.95; }
.editorial-copy{ font-family:var(--display); letter-spacing:-0.02em; font-size:clamp(1.6rem,2.8vw,2.8rem); line-height:1.25; }
.editorial-copy p+p{ color:var(--gold); margin-top:2.5rem; }
.not-ladder{ background:var(--paper); }
.not-ladder > div p{ max-width:35rem; margin-top:2rem; font-size:1.1rem; line-height:1.7; }
.promise h2{ margin:2rem auto 3rem; }
.promise .action{ margin:0 auto; color:var(--ivory); }
.promise .action:hover{ background:var(--ivory); color:var(--olive); border-color:var(--ivory); }

@media (prefers-reduced-motion:reduce){
  .home-live .hours-chart:not(.is-drawn) .bar-track span{ transform:none; }
}

/* ---------- phone ---------- */
@media (max-width:800px){
  main > section.hero{ display:flex; flex-direction:column; min-height:auto; }
  .hero-mark{ order:2; min-height:0; padding:3rem var(--page); }
  .hero-copy{ padding:3.5rem var(--page) 3rem; }
  .hero-copy h1{ font-size:clamp(3.7rem,17vw,5rem); }
  .scroll-note{ display:none; }
  .finder,.editorial-pair,.not-ladder{ grid-template-columns:1fr; }
  .finder{ gap:2rem; }
  .finder-result{ min-height:15rem; }
  .route-row{ grid-template-columns:2rem 1fr; gap:1rem; padding:2.5rem 0; }
  .route-main,.route-facts,.route-detail{ grid-column:2; }
  .route-facts{ grid-template-columns:1fr; gap:.8rem; margin-top:1rem; }
  .route-facts div{ border-top:1px solid var(--line); padding-top:.8rem; }
  .route-row .text-link{ grid-column:2; justify-self:start; margin-top:1rem; }
  .route-row.is-match{ box-shadow:-1.25rem 0 0 var(--paper),1.25rem 0 0 var(--paper); }
  .hours-chart{ margin-left:0; }
  .chart-row{ grid-template-columns:6rem 1fr; }
  .editorial-pair,.not-ladder{ gap:2rem; }
}

/* Short screens (phones held sideways): the corner note would sit on top
   of the opening paragraph, so it goes. */
@media (max-height:640px){
  .scroll-note{ display:none; }
  main > section.hero{ min-height:0; }
}

/* Tablets held upright: two full-height columns left a tall empty
   screen with nothing to tap. Stack the opening as on the iPad mini. */
@media (orientation:portrait) and (min-width:801px) and (max-width:1199px){
  main > section.hero{ display:flex; flex-direction:column; min-height:0; }
  .hero-copy{ padding:5rem var(--page) 4rem; }
  .hero-mark{ order:2; padding:3.5rem var(--page); }
  .scroll-note{ display:none; }
}

/* ---------- phones: a composition of their own ---------- */
@media (max-width:800px){
  /* The name is already in the header; the olive band keeps only the
     three practices, so the route finder comes up the screen. */
  .hero-mark{ padding:1.1rem var(--page); }
  .hero-mark .mark__name,.hero-mark .mark__sub{ display:none; }
  .hero-mark .mark__practices{ margin-top:0; gap:1.25rem; font-size:.78rem; }
  .hero-copy{ padding-bottom:2.5rem; }

  /* No empty box under the answers: the verdict box appears with the verdict. */
  .finder-result.is-empty{ display:none; }
  .finder-result{ min-height:0; padding:1.5rem; }
  .rec h3{ margin:.6rem 0 1rem; }
  .rec .f-cta .action{ width:100%; }

  /* Routes: number above the title, and the three facts side by side
     instead of one per row, so four routes no longer take three screens. */
  .route-row{ grid-template-columns:1fr; gap:.6rem; padding:2rem 0; }
  .route-number,.route-main,.route-facts,.route-detail,.route-row .text-link{ grid-column:1; }
  .route-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:.75rem; padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .route-facts div{ border-top:0; padding-top:0; }
  .route-facts dd{ font-size:.85rem; }
  .route-detail{ margin-top:.25rem; }
  .route-row .text-link{ margin-top:.5rem; }
  .route-row.is-match{ box-shadow:-1.25rem 0 0 var(--paper),1.25rem 0 0 var(--paper); }
  .routes-section .section-title{ margin-bottom:2.5rem; }
}