/* The section pages (scripts/pages/site.mjs): what the landing's long scroll was, a page each. Written for a
   reader with no JavaScript: the cards, tiles and plates are plain markup. */
:root { --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --card: rgba(10, 14, 20, 0.7); }
/* (the width of every page outside the app is set in site.css) */
.part h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 0 0 16px; text-transform: none; letter-spacing: 0.01em; }
.part .kicker { color: var(--accent); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.part h2 { font-size: 15px; margin: 44px 0 14px; }
.part h3 { font-size: 16px; margin: 0 0 12px; font-family: 'Chakra Petch', Barlow, sans-serif; font-weight: 600; }
[lang="he"] .part h3 { font-family: 'IBM Plex Sans Hebrew', Barlow, sans-serif; }
.landing-text p { font-size: 18px; max-width: 46em; color: var(--ink); }
.landing-gos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }


.part .panel { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.part .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.part .icon * { fill: none; }
.landing-who, .landing-guides { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.landing-who li { display: flex; gap: 14px; align-items: flex-start; }
.landing-who b, .landing-guide b { display: block; font-family: 'Chakra Petch', Barlow, sans-serif; font-size: 17px; margin-bottom: 4px; }
[lang="he"] .landing-who b, [lang="he"] .landing-guide b { font-family: 'IBM Plex Sans Hebrew', Barlow, sans-serif; }
.landing-who span, .landing-guide span { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.landing-news { grid-template-columns: 1fr; }
.landing-news time { display: block; font: 400 12px/1 var(--mono); color: var(--ink-2); letter-spacing: 0.06em; margin-bottom: 8px; }
.landing-guide { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.landing-guide:hover { border-color: var(--accent); }
.landing-guide img { flex: none; width: 96px; height: 96px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
@media (max-width: 520px) { .landing-guide img { width: 72px; height: 72px; } }

.landing-tiles { display: grid; gap: 12px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.landing-tiles .panel { text-align: center; }
.landing-tiles b.mono { display: block; font: 600 32px/1.1 var(--mono); color: var(--ink); }
.landing-tiles span { color: var(--ink-2); font-size: 14px; }

.landing-sources { list-style: none; margin: 32px 0 0; display: grid; gap: 10px; }
.landing-sources li { display: flex; gap: 16px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.landing-sources li:last-child { border-bottom: 0; }
.landing-sources b { flex: none; min-width: 9.5em; font-family: 'Chakra Petch', Barlow, sans-serif; }
[lang="he"] .landing-sources b { font-family: 'IBM Plex Sans Hebrew', Barlow, sans-serif; }
.landing-sources span { color: var(--ink-2); }
.landing-fetched b.mono { font: 600 14px var(--mono); min-width: 0; }
@media (max-width: 560px) { .landing-sources li { flex-direction: column; gap: 2px; } }

.plates { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.plate { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.plate ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plate li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) 64px 2em; gap: 10px; align-items: center; font-size: 15px; }
.plate .rank { font: 400 12px var(--mono); color: var(--ink-2); }
.plate .name { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plate .flag-icon { flex: none; width: 20px; height: 14px; border-radius: 2px; }
.plate .bar { height: 3px; background: var(--line); }
.plate .bar i { display: block; height: 100%; background: var(--accent); }
.plate .score { font: 600 13px var(--mono); text-align: end; }

.cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 56px 0 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.cta .go { margin: 0; }
.cta span { color: var(--ink-2); }

/* A phone: the page's own margins and sizes. */
@media (max-width: 640px) {
  main.wide { padding: 24px 16px 56px; }
  .landing-text p { font-size: 17px; }
  .landing-gos { gap: 8px; }
  .go { padding: 13px 20px; }
  .part h2 { margin-top: 36px; }
  .landing-tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .landing-tiles b.mono { font-size: 26px; }
  .plate li { grid-template-columns: 1.3em minmax(0, 1fr) 44px 1.8em; gap: 8px; font-size: 14.5px; }
  .cta { padding: 18px; margin-top: 40px; }
  .cta .go { width: 100%; text-align: center; box-sizing: border-box; }
}