/* =============================================================
   SkiAllDay — landing page
   Loaded after resort.css, which owns every token, the top bar,
   the footer, the section rhythm and the theme switch. Nothing
   here redefines a colour or a typeface; it adds the handful of
   components only the landing page has.
   ============================================================= */

/* ---------- hero ---------- */

/* .rhero carries the scene, the scrim and the isolation context. This is the
   same hero a resort gets, with room for a headline that is a sentence rather
   than a place name, and for the two buttons under it. */
.rhero--home .rhero-inner {
  padding-bottom: clamp(140px, 15vw, 220px);
  max-width: 1180px;
}

/* A resort hero carries a name and a line under it, so the vertical wash in
   resort.css is enough. This one carries a headline, a paragraph, two buttons
   and a key, and the route drawn down the range has to stay readable beside all
   of it — so above 860px the text is a column on the left and the wash goes
   with it, leaving the right of the range, and the route on it, unwashed.
   Below that there is no wash at all: resort.css drops the scene to a band at
   the foot of every hero, and the text sits on plain paper. */
.rhero--home {
  --paper-rgb: 247, 244, 238;
}
@media (min-width: 860px) {
  .rhero--home {
    --hero-scrim:
      linear-gradient(96deg,
        rgba(var(--paper-rgb), .97) 0%, rgba(var(--paper-rgb), .95) 30%,
        rgba(var(--paper-rgb), .62) 48%, rgba(var(--paper-rgb), .12) 64%,
        rgba(var(--paper-rgb), 0) 74%),
      linear-gradient(180deg,
        rgba(var(--paper-rgb), .75) 0%, rgba(var(--paper-rgb), .25) 12%,
        rgba(var(--paper-rgb), 0) 26%);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rhero--home { --paper-rgb: 9, 13, 20; }
}
:root[data-theme='dark'] .rhero--home { --paper-rgb: 9, 13, 20; }

.hero-kicker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 26px; color: var(--hero-soft);
}
.hero-kicker span { white-space: nowrap; }
.hero-kicker .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }


.hero-line {
  display: block; font-size: clamp(2.5rem, 8.4vw, 5.25rem);
  line-height: 0.98; letter-spacing: -0.035em;
}

.hero-lede {
  font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6;
  color: var(--hero-soft); max-width: 46ch; margin: 24px 0 0;
}
.hero-lede strong { color: var(--hero-ink); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 32px 0 0; }

.rhero--home .btn-solid, .rhero--home .btn-ghost {
  display: inline-block; padding: 13px 26px; text-decoration: none;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--hero-ink); transition: background .15s, color .15s;
}
.rhero--home .btn-solid { background: var(--hero-ink); color: var(--paper); }
.rhero--home .btn-solid:hover { background: transparent; color: var(--hero-ink); }
.rhero--home .btn-ghost { background: transparent; color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 34%, transparent); }
.rhero--home .btn-ghost:hover { border-color: var(--hero-ink); }

/* The stat bar is the resort component; only the linked chip is new. */
.resort .chip a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.resort .chip a:hover { border-bottom-color: var(--ink); }

/* ---------- the route drawn across the range ---------- */

/* Lift up, piste down, graded blue to black — the one thing the app does,
   drawn onto the page's own mountain rather than described beside it. The
   geometry comes from the same ridgeline the voxel generator produced, so the
   line lands on terrain instead of floating over it. */

/* These do not follow the theme. The rest of the page sits on paper, which
   inverts in dark mode; this route sits on snow, which does not — the voxel
   snow is near-white under both themes. Reading the theme tokens here rendered
   a dark-mode black run in the light grey the resort pages use for one, on top
   of a white snowfield, which is no colour at all. The route keeps the
   on-snow palette in both, exactly as the share card does. */
.rhero--home {
  --rt-casing: #ffffff;
  --rt-ink: #16202c;
}

.rt-casing { fill: none; stroke: var(--rt-casing); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.rt-seg { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rt-seg--blue  { stroke: #2f6db3; }
.rt-seg--red   { stroke: #b8382b; }
.rt-seg--black { stroke: #23252a; }

.rt-lift { fill: none; stroke: var(--rt-ink); stroke-width: 3; }
.rt-pylon { stroke: var(--rt-ink); stroke-width: 3; stroke-linecap: round; }
.rt-station { fill: var(--rt-casing); stroke: var(--rt-ink); stroke-width: 3; }
.rt-node { fill: var(--rt-casing); stroke: #23252a; stroke-width: 3; }

/* Drawn on, in the order you would ride it: up the lift first, then down. */
.rt-draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rt-draw 1s cubic-bezier(.4, .1, .2, 1) forwards;
  animation-delay: var(--d, 0s);
}
.rt-pop { opacity: 0; animation: rt-pop .45s ease-out forwards; animation-delay: var(--d, 0s); }

@keyframes rt-draw { to { stroke-dashoffset: 0; } }
@keyframes rt-pop { to { opacity: 1; } }

/* resort.css switches every animation off for a reader who asked for less
   motion, which would leave these dashed to nothing. Land them finished. */
@media (prefers-reduced-motion: reduce) {
  .rt-draw { stroke-dashoffset: 0; }
  .rt-pop { opacity: 1; }
}

/* A key, so the line reads as a diagram rather than as a squiggle. */
.hero-key {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 30px 0 0; padding: 0; list-style: none;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--hero-soft);
}
.hero-key li { display: flex; align-items: center; gap: 8px; }
.hero-key i { width: 16px; height: 3px; flex: none; }
.hero-key .k-lift { height: 0; border-top: 2px solid currentColor; }
/* Same fixed on-snow palette as the line it keys. */
.hero-key .k-blue { background: #2f6db3; }
.hero-key .k-red { background: #b8382b; }
.hero-key .k-black { background: #23252a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero-key .k-black { background: #4a5260; }
}
:root[data-theme='dark'] .hero-key .k-black { background: #4a5260; }

/* ---------- screen plates ---------- */

/* App screens are shown as plates in a document, framed by a hairline the same
   way a trail map is. No device mockup, no drop shadow, no perspective. */
.shots {
  display: grid; gap: 20px; margin: 34px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.shots--pair { max-width: 660px; }
.shots--one { max-width: 320px; }

/* <figure> carries a 40px UA side margin; without this the plate sits inside
   its own cell by 80px and the screenshot renders three quarters size. */
.shot { margin: 0; border: 1px solid var(--rule); background: var(--paper-raised); min-width: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border-bottom: 1px solid var(--rule);
  /* The source crop keeps a sliver of the mockup's rounded bezel in each
     corner; the radius cuts exactly that away. */
  border-radius: 7px 7px 0 0;
}
.shot figcaption {
  padding: 11px 13px 13px; font-family: var(--sans);
  font-size: 0.78rem; line-height: 1.45; color: var(--ink-mid);
}
.shot-label {
  display: block; font-size: 0.625rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}

/* ---------- the two-routes figure ---------- */

/* Three cells divided by hairlines, the way the metric grid on a resort page
   divides its figures. Explicit columns rather than auto-fit: with auto-fit an
   842px column fits two cells, and the third wrapped to a half-width orphan
   with a hole beside it. Three or one, never two-and-a-bit. */
.routefig { margin: 32px 0 0; }
.rf-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
@media (max-width: 880px) { .rf-grid { grid-template-columns: minmax(0, 1fr); } }
.rf-cell {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 20px 20px; min-width: 0;
}
.rf-head {
  margin: 0 0 6px; font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft);
}
.rf-cell svg { display: block; width: 100%; height: auto; }
.rf-note {
  margin: 4px 0 0; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5;
  color: var(--ink-mid); max-width: 40ch;
}

/* The unlit network stays legible but recedes; the chosen route is the only
   thing in full colour, which is the entire point of the pair. */
.rf-edge { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.rf-casing { fill: none; stroke: var(--paper); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.rf-run { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rf-run--blue { stroke: var(--piste-blue); }
.rf-run--red { stroke: var(--piste-red); }
.rf-run--black { stroke: var(--piste-black); }
.rf-node { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.5; }
.rf-node--end { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; }
/* 13px in a 336-wide viewBox, because at three across the panel renders about
   240px wide and 11px arrived as 8. */
.rf-text {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; fill: var(--ink-soft);
}
/* A run that is shut today: the edge recedes further than an unused one and
   takes a cross, so "not chosen" and "not available" never read the same. */
.rf-edge--shut { stroke-dasharray: 4 4; opacity: .45; }
.rf-shut path { stroke: var(--ink-mid); stroke-width: 2; stroke-linecap: round; fill: none; }

.routefig .ribbon-legend { margin-top: 16px; }

/* ---------- spec list ---------- */

.speclist {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0 44px;
}
.speclist li {
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--ink-mid);
}
.speclist b { display: block; font-weight: 600; color: var(--ink); }

/* ---------- what a session records ---------- */

.records {
  /* auto-fit, not auto-fill: six cells in an eight-column track leaves two
     empty columns, and the container's top border runs across them. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  margin: 30px 0 0;
}
.records div { padding: 14px 15px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.records dt {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.records dd { margin: 0; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; color: var(--ink-mid); }

/* ---------- coverage ---------- */

.cov-note { margin: 10px 0 0; }
.idx-table td.cov-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.idx-table td.cov-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cov-plain { color: var(--ink-mid); }

/* ---------- responsive ---------- */

/* The scene becoming a band at the foot of the hero below 860px is in
   resort.css, which owns the hero — it is the same fix for the same reason on
   both pages. Only the padding under the headline is home's own: the rule there
   is (0,1,0) and the base rule above is (0,2,0), so the generic value has to be
   restated here to clear the band. */
@media (max-width: 859px) {
  .rhero--home .rhero-inner { padding-bottom: clamp(215px, 37vh, 310px); }
  .hero-lede { max-width: none; }
  .hero-key { margin-top: 24px; }
}

@media (max-width: 700px) {
  .hero-kicker { gap: 8px; margin-bottom: 20px; }
  .hero-actions { gap: 10px 12px; margin-top: 26px; }
  .rhero--home .btn-solid, .rhero--home .btn-ghost { padding: 12px 18px; font-size: 0.875rem; }
  .shots { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .shot figcaption { padding: 9px 11px 11px; font-size: 0.75rem; }
  .speclist { gap: 0; }
  .rf-cell { padding: 15px 16px 17px; }
}

/* Two plates side by side stay readable down to about 150px each; below that
   the run numbers and the stat labels in the screenshots stop being legible,
   which is the whole reason they are on the page. */
@media (max-width: 400px) {
  .shots--pair { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
}