/* The landing page. Its look is the app's own: app/art.css and app/style.css
   give it the inks, the type, the paper, the cards, the buttons and the
   section headings, by day and by night. This sheet only lays the page out,
   wider than the app's single column, and adds the few pieces it has of its
   own: the store buttons, the rites' frieze and the drawings' plates. */

/* The paper's grain, by its full address: a url() in a custom property is read
   against the sheet that uses it, and this page uses it from two folders. */
:root { --grain: url(/app/paper-grain.png) 0 0 / 80px 80px; }
:root[data-theme="dark"] { --grain: url(/app/paper-grain-night.png) 0 0 / 80px 80px; }

.landing { overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Below the top bar, when a link lands on them. */
[id] { scroll-margin-top: 72px; }

main.landing-main { max-width: none; margin: 0; padding: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- the top bar
   Out of sight while the title shows; it comes down once the title has gone. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: var(--paper) var(--grain);
  box-shadow: 0 1px 0 var(--ink), 0 3px 0 var(--paper), 0 4px 0 var(--ink);
  transform: translateY(calc(-100% - 6px));
  transition: transform 0.25s ease;
}
.topbar.shown { transform: none; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 6px 20px; }
.topbar-home { display: block; flex: 0 1 220px; min-width: 0; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.topbar-home .wordmark { width: 100%; margin: 0; }
.topbar-get { flex: none; margin-right: -14px; }

/* ---------------------------------------------------------------- the hero */
.hero { display: grid; gap: 0; max-width: 1180px; margin: 0 auto; }
.hero-poster { position: relative; }
/* The Climb: never cut, so the man keeps his head; as tall as its drawing for the width. */
.poster-frame .scene { height: auto; aspect-ratio: 400 / 340; }
.hero-text { padding: 26px 20px 8px; text-align: center; }
.hero-text .kicker { margin: 0 0 14px; }
.hero-title { display: grid; justify-items: center; width: min(100%, 460px); margin: 0 auto 18px; font: 600 34px/1.1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.hero-wordmark { display: block; width: 100%; }
.hero-title .wordmark { width: 100%; }
/* The name's second line: THE CLIMB between two rules, as the app's home has it. */
.hero-title .title-sub { width: 88%; margin-top: 10px; font-size: 15px; }
.hero-text .lead { max-width: 34em; margin: 0 auto 10px; font-size: 21px; }
.hero-pace { max-width: 34em; margin: 0 auto 22px; color: var(--sub); }
.hero-text .fine { margin-top: 12px; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: 48px; padding: max(56px, env(safe-area-inset-top)) 40px 24px; }
  .hero-text { order: -1; padding: 0; text-align: left; }
  .hero-title { margin-left: 0; }
  .hero-text .lead, .hero-pace { margin-left: 0; }
  /* By a wide window, the poster stands framed like a print: a cream mat inside a double rule. */
  .hero-poster { padding: 12px; background: var(--card) var(--grain); border: 4px double var(--rule); }
  .poster-frame { overflow: hidden; }
  .hero-poster .double-rule { margin-top: 10px; }
}

/* ---------------------------------------------------------------- where to get it */
.platforms { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.platforms li { margin: 0; }
.platform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 10px 12px 10px 16px;
  background: var(--card) var(--grain);
  border: 4px double var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
}
.platform-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.platform .label { color: var(--accent); }
.platform-name { font: 400 22px/1.1 var(--serif); }
.platform-go { flex: none; min-height: 46px; padding: 0 16px; font-size: 12.5px; }
a.platform.live:hover .platform-go, a.platform.live:focus-visible .platform-go { filter: brightness(1.08); }
a.platform.live:active .platform-go { transform: translateY(1px); }
.platform.soon { cursor: default; }
.platform.soon .platform-name { color: var(--sub); }

/* "Coming soon", inked on with a rubber stamp. */
.stamp {
  flex: none;
  padding: 7px 10px 6px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--lapis);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
  opacity: 0.85;
}

@media (min-width: 900px) {
  .hero .platforms { margin: 0; }
  .platforms-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 16px; }
  .platforms-wide .platform { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 170px; padding: 18px; }
  .platforms-wide .platform-name { font-size: 28px; }
  .platforms-wide .stamp, .platforms-wide .platform-go { align-self: flex-start; }
}

/* ---------------------------------------------------------------- sections */
.band { padding: 22px 0 8px; }
.landing h2 { margin: 26px 0 14px; }
.section-lead { max-width: 36em; margin: 0 auto 22px; text-align: center; color: var(--sub); }

/* The five rites, each on a saffron disc, as the app's rite cards show them. */
.rites-frieze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 10px; margin: 0; padding: 0; list-style: none; }
.rites-frieze li { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.rite-disc { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: 0 0 8px; border-radius: 50%; background: var(--badge); color: var(--badge-ink); }
.rite-disc .pictogram { width: 66px; height: 66px; }
.rites-frieze .label { color: var(--accent); }
.rite-name { font: 400 19px/1.25 var(--serif); }
@media (max-width: 860px) { .rite-name { font-size: 17px; } }
@media (max-width: 560px) {
  .rites-frieze { grid-template-columns: 1fr; gap: 10px; max-width: 360px; margin: 0 auto; }
  .rites-frieze li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: end; text-align: left; }
  .rite-disc { grid-row: span 2; width: 64px; height: 64px; margin: 0; }
  .rite-disc .pictogram { width: 46px; height: 46px; }
  .rite-name { align-self: start; }
}

/* A feature: its drawing and its words, side by side on a wide window, one over the other on a phone. */
.feature { display: grid; gap: 22px; max-width: 1080px; margin: 0 auto; padding: 44px 20px 12px; }
.feature + .feature { border-top: 1px solid var(--rule); margin-top: 32px; }
.feature-text h3 { margin: 6px 0 12px; font: 400 30px/1.15 var(--serif); text-wrap: balance; }
.feature-text .kicker { margin: 0; }
.feature-text h3 .line { display: inline-block; }
.feature-art { display: flex; justify-content: center; }
@media (min-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 56px 40px 20px; }
  .feature.flip .feature-art { order: 2; }
  .feature-text h3 { font-size: 34px; }
}

.ticks { margin: 14px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; margin: 0 0 10px; padding-left: 26px; font-size: 16.5px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }

/* The practice screen's sun, with the rites' figures in turn standing before it. */
.sun-stage { position: relative; width: min(100%, 300px); aspect-ratio: 1; }
@media (min-width: 820px) { .sun-stage { width: min(100%, 380px); } }
.sun-stage > .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-figure { position: absolute; inset: 31%; color: var(--ink); }
.cycle { position: absolute; inset: 0; }
.cycle .pictogram { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s ease; }
.cycle .pictogram.off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cycle .pictogram { transition: none; } }

/* The drawings on a plate: a card's double rule round a poster, the map, the seal. */
.map-plate, .banner-plate, .vignette-plate { width: min(100%, 420px); padding: 10px; background: var(--card) var(--grain); border: 4px double var(--rule); border-radius: 2px; }
.map-plate .route { margin: 0; }
.banner-plate .scene { height: auto; aspect-ratio: 390 / 230; }
.vignette-plate { width: min(100%, 460px); }
.vignette-plate .scene { height: auto; aspect-ratio: 350 / 160; }
/* The safety icon on a big saffron disc, as a tab page's heading has it. */
.big-badge { display: flex; align-items: center; justify-content: center; width: min(60vw, 230px); aspect-ratio: 1; border-radius: 50%; background: var(--badge); color: var(--badge-ink); box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px var(--rule); }
.big-badge .icon { width: 50%; height: 50%; stroke-width: 1.3; }

/* The three grounds of the climb, each a small crossing half-way across. */
.grounds { display: grid; gap: 12px; margin: 18px 0 6px; padding: 0; list-style: none; }
.grounds li { display: grid; grid-template-columns: minmax(0, 150px) 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; font-size: 16.5px; line-height: 1.35; }
@media (min-width: 480px) { .grounds li { grid-template-columns: minmax(0, 190px) 1fr; } }
.ground { grid-row: span 2; display: block; }
.ground .crossing { margin: 0; }
.grounds .label { align-self: end; color: var(--accent); }

/* The library's shelf, in short. */
.shelf { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.shelf li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 20px; line-height: 1.2; }
.shelf .label { color: var(--accent); }

.theme-switch { max-width: 280px; margin-top: 18px; }
.theme-switch button { min-height: 40px; }

/* The rest, in short: three cards. */
.facts { display: grid; gap: 4px; }
@media (min-width: 820px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.fact { margin: 8px 0; }
.fact h3 { margin: 10px 0 8px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.fact p { margin: 0; font-size: 16.5px; line-height: 1.45; }
.fact-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--badge); color: var(--badge-ink); }
.fact-icon .icon { width: 24px; height: 24px; }

.get { padding: 18px 0 28px; }

/* ---------------------------------------------------------------- the foot of the page */
footer.landing-footer {
  margin: 28px 0 0;
  padding: 26px 0 max(28px, env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--card) var(--grain);
  box-shadow: inset 0 3px 0 var(--ink), inset 0 5px 0 var(--card), inset 0 6px 0 var(--ink);
  text-align: center;
}
.footer-seal { display: block; width: 76px; height: 76px; margin: 6px auto 14px; }
.footer-seal .seal { width: 100%; height: 100%; }
.landing-footer .caution { max-width: 40em; margin: 0 auto 12px; }
.landing-footer nav { margin: 0 0 8px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.landing-footer p { margin: 0 auto 6px; }

/* ---------------------------------------------------------------- the privacy page
   The app's own reading column. */
main.legal { padding-top: max(18px, env(safe-area-inset-top)); }
main.legal .kicker { margin: 8px 0 6px; }