/* The site's pages around the map (the user, 2026-10-07: "a landing page and a basic site structure"; the
   Flemish Roads brand brief, 2026-10-08): index (the landing), classics, about, support, contact, privacy,
   terms, news, 404, and the road pages scripts/road_pages.py writes (climbs/, cobbles/, routes/, classics/). Same tokens, font and
   components as the map; these are the page layout. The map is map.html (/map). */
@layer layout {
  /* the map's paper ground (app.js MAP_COLORS.ground): only inside the pictures of the map, never a page background (the user, 2026-10-08: "way too beige") */
  .s-page { --paper: #f3eedb; }
  body.s-page { height: auto; min-height: 100%; display: flex; flex-direction: column; background: var(--color-surface); }
  .s-wrap { width: min(1100px, 100% - 2 * var(--space-4)); margin-inline: auto; }
  .s-skip { position: absolute; left: -999px; top: var(--space-2); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--color-action); color: var(--color-action-text); }
  .s-skip:focus { left: var(--space-2); }

  /* header: the logo, the pages, Open the map */
  .s-head { position: sticky; top: 0; z-index: 5; background: rgb(255 255 255 / 0.94); backdrop-filter: blur(6px); border-bottom: var(--border-width) solid var(--color-border); }
  .s-head .s-wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; }
  .s-brand { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--color-action); text-decoration: none; letter-spacing: -0.01em; }
  .s-brand img { width: 30px; height: 30px; }
  .s-nav { display: flex; align-items: center; gap: var(--space-1); }
  .s-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control, 6px); text-decoration: none; font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .s-nav a:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .s-nav a[aria-current="page"] { color: var(--color-action); font-weight: var(--font-weight-bold); }
  .s-head .c-button--primary { text-decoration: none; }
  @media (max-width: 720px) { .s-nav { display: none; } }

  .s-main { flex: 1 0 auto; }
  .c-button.s-cta { height: 48px; padding: 0 var(--space-6); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); text-decoration: none; }
  a.c-button { text-decoration: none; }

  /* the landing (the brand brief, 2026-10-08): hero, things to click, the three ideas, local discovery,
     the Classics, how it works, the last word. The map is the product: the pictures are the map's own
     (img/*.svg from scripts/site-art.py, img/shot-*.webp screenshots), every picture opens it. */
  .s-hero { background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
  .s-hero__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-10); align-items: center; padding-block: var(--space-12); }
  .s-hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.6rem); line-height: 1.02; font-weight: var(--font-weight-bold); letter-spacing: -0.035em; color: var(--color-action); text-wrap: balance; }
  .s-lead { margin-top: var(--space-4); font-size: var(--font-size-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 32em; }
  .s-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .s-textlink { display: inline-block; margin-top: var(--space-4); font-weight: var(--font-weight-medium); color: var(--color-action); text-decoration: none; }
  .s-textlink:hover { text-decoration: underline; }
  .s-textlink span { display: inline-block; transition: transform var(--duration-fast) var(--easing); }
  .s-textlink:hover span { transform: translateX(3px); }

  /* a map picture (from site-art.py) */
  .s-mapfig { position: relative; margin: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-overlay); background: var(--paper); }
  .s-mapfig__bg, .s-mapfig__bg img { display: block; width: 100%; height: auto; }
  .s-coords { position: absolute; left: var(--space-3); top: var(--space-3); padding: 2px 6px; background: rgb(255 255 255 / 0.88); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--color-text-muted); }

  /* a demo video of the app (vid/*.mp4, 1600 x 1000, silent, looping): framed like the screenshots */
  .s-video { display: block; margin: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-overlay); background: var(--color-surface-alt); }
  .s-video a { display: block; }
  .s-video__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

  /* sections */
  .s-section { padding-block: var(--space-16); }
  .s-section--alt { background: var(--color-surface-alt); border-block: var(--border-width) solid var(--color-border); }
  .s-h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.1; font-weight: var(--font-weight-bold); letter-spacing: -0.025em; color: var(--color-text); text-wrap: balance; }
  .s-sub { margin-top: var(--space-2); font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 40em; }
  .s-kicker { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-accent); }

  /* things to click: famous roads, each opening the map */
  .s-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
  .s-card { height: 100%; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-muted); text-decoration: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
  .s-card:hover { border-color: var(--color-action); box-shadow: var(--shadow-overlay); }
  .s-card b { margin-top: var(--space-3); font-size: var(--font-size-lg); letter-spacing: -0.01em; color: var(--color-text); }
  .s-card__profile { width: 100%; height: 72px; background: var(--color-surface-alt); border-radius: var(--radius-control); }
  .s-card__nums { color: var(--color-text); font-variant-numeric: tabular-nums; }
  .s-card__go { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: var(--space-3); font-weight: var(--font-weight-bold); color: var(--color-action); }

  /* the three ideas: words beside a screenshot of the map */
  .s-ideas { display: flex; flex-direction: column; gap: var(--space-16); }
  .s-idea { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-10); align-items: center; }
  .s-idea--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .s-idea--flip .s-idea__text { order: 2; }
  .s-idea__text p:not(.s-kicker) { margin-top: var(--space-3); font-size: var(--font-size-md); line-height: 1.6; color: var(--color-text-muted); max-width: 30em; }
  .s-idea__text .s-h2 { margin-top: var(--space-2); }
  .s-idea__text .c-button { margin-top: var(--space-5); }
  .s-shot { display: block; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-overlay); background: var(--paper); }
  .s-shot img { display: block; width: 100%; height: auto; transition: transform var(--duration-slow) var(--easing); }
  .s-shot:hover img { transform: scale(1.015); }

  /* local discovery: the brand green, a dense map */
  .s-local { background: var(--color-action); color: var(--color-action-text); }
  .s-local__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-10); align-items: center; padding-block: var(--space-16); }
  .s-local .s-h2 { color: inherit; }
  .s-local__text p { margin-top: var(--space-3); font-size: var(--font-size-lg); line-height: 1.5; opacity: 0.88; }
  .s-local .c-button--primary { margin-top: var(--space-6); background: var(--color-surface); color: var(--color-action); border-color: var(--color-surface); }
  .s-local .c-button--primary:hover { background: var(--color-surface-selected); }
  .s-local .s-mapfig { border-color: transparent; }

  /* the Classics */
  .s-classics { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
  .s-classic { height: 100%; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-4) var(--space-4); border-top: 4px solid var(--color-action); background: var(--color-surface-alt); color: var(--color-text-muted); text-decoration: none; line-height: 1.45; }
  .s-classic b { font-size: var(--font-size-lg); letter-spacing: -0.01em; color: var(--color-text); }
  .s-classic small { margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-action); font-weight: var(--font-weight-bold); }
  a.s-classic small:empty::before { content: "Open on the map"; }
  .s-classic:hover { background: var(--color-surface-selected); }

  /* how it works */
  .s-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
  .s-steps li { counter-increment: s; display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-muted); line-height: 1.5; }
  .s-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-action); color: var(--color-action-text); font-weight: var(--font-weight-bold); }
  .s-steps b { color: var(--color-text); }
  .s-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
  .s-stats div { display: flex; flex-direction: column-reverse; }
  .s-stats dd, .r-stats dd { margin: 0; }
  .s-stats dd { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; color: var(--color-action); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .s-stats dt { color: var(--color-text-muted); }
  .s-section--alt .s-textlink { margin-top: var(--space-6); }

  /* the last word, over the map */
  .s-final { position: relative; overflow: hidden; background: var(--color-surface); }
  .s-final__map { position: absolute; inset: 0; }
  .s-final__map img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
  .s-final__map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0.97) 0%, rgb(255 255 255 / 0.85) 45%, rgb(255 255 255 / 0) 80%); }
  .s-final__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding-block: 120px; }
  .s-final__line { max-width: 10em; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.02; font-weight: var(--font-weight-bold); letter-spacing: -0.035em; color: var(--color-action); }

  /* phones: Open map stays in reach once the header button scrolls out */
  .s-fab { display: none; }
  @media (max-width: 760px) {
    .s-hero__grid, .s-idea, .s-idea--flip, .s-local__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .s-hero__grid { padding-block: var(--space-8); }
    .s-idea--flip .s-idea__text { order: 0; }
    .s-section, .s-local__grid { padding-block: var(--space-12); }
    .s-ideas { gap: var(--space-12); }
    .s-cards { grid-template-columns: minmax(0, 1fr); }
    .s-classics, .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-final__map::after { background: rgb(255 255 255 / 0.85); }
    .s-final__text { padding-block: 80px; }
    .s-home .s-fab:not([hidden]) { display: inline-flex; position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 6; height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-pill); box-shadow: var(--shadow-modal); font-weight: var(--font-weight-bold); }
  }
  @media (min-width: 761px) and (max-width: 1000px) { .s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-classics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* a text page: about, support, privacy, ... */
  .s-doc { max-width: 720px; padding-block: var(--space-10, 40px) var(--space-12); }
  .s-doc h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
  .s-doc h2 { margin-top: var(--space-8); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
  .s-doc p, .s-doc ul, .s-doc dl { margin-top: var(--space-3); line-height: 1.6; color: var(--color-text); }
  .s-doc ul, .s-doc ol { padding-left: 1.2em; }
  .s-doc ol { margin-top: var(--space-3); line-height: 1.6; }
  .s-doc li + li { margin-top: var(--space-1); }
  .s-doc .s-meta { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .s-doc details { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
  .s-doc details[open] { background: var(--color-surface-alt); }
  .s-doc summary { cursor: pointer; font-weight: var(--font-weight-medium); }
  .s-doc details p { margin-top: var(--space-2); }
  .s-note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-accent-tint); font-size: var(--font-size-sm); }
  .s-news li { list-style: none; }
  .s-news section + section { margin-top: var(--space-6); }

  /* a road page (scripts/road_pages.py): a climb, a cobbled sector, a route or a Classic; one main
     action, Open in Flemish Roads */
  .r-page { padding-block: var(--space-10) var(--space-16); }
  .r-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-action); }
  .r-kicker .c-seal { width: 18px; height: 18px; }
  .r-tag { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-surface-selected); color: var(--color-action); text-decoration: none; font-weight: var(--font-weight-medium); }
  .r-tag:hover { text-decoration: underline; }
  .r-page h1 { margin-top: var(--space-2); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.04; font-weight: var(--font-weight-bold); letter-spacing: -0.035em; color: var(--color-action); }
  .r-roads { margin-top: var(--space-1); color: var(--color-text-muted); }
  .r-line { margin-top: var(--space-3); font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; color: var(--color-text); }
  .r-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
  .r-fig { margin: 0; }
  .r-fig--wide { margin-top: var(--space-8); }
  .r-fig svg { display: block; width: 100%; height: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .r-fig figcaption { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .r-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-8); padding-block: var(--space-5); border-block: var(--border-width) solid var(--color-border); }
  .r-stats div { display: flex; flex-direction: column-reverse; }
  .r-stats dt { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
  .r-stats dd { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .r-stats small { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
  .r-facts { margin-top: var(--space-6); max-width: 44em; font-size: var(--font-size-lg); line-height: 1.55; }
  .r-page h2 { margin-top: var(--space-10); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
  .r-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); margin-top: var(--space-3); }
  .r-list li { display: flex; align-items: center; gap: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
  .r-list a { flex: 1; display: flex; flex-direction: column; padding-block: var(--space-3); text-decoration: none; color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .r-list a b { font-size: var(--font-size-md); color: var(--color-text); }
  .r-list a:hover b { color: var(--color-action); text-decoration: underline; }
  .r-diff { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--d); color: var(--color-text-inverse); font-style: normal; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-shadow: 0 0 2px rgb(0 0 0 / 0.5); }
  .r-more { margin-top: var(--space-10); }
  @media (max-width: 760px) { .r-grid, .r-list { grid-template-columns: minmax(0, 1fr); } }

  /* the Classics page */
  .s-classics--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-classic__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-sm); }
  .s-classic__more .s-textlink { margin-top: 0; }
  @media (max-width: 760px) { .s-classics--page { grid-template-columns: minmax(0, 1fr); } }

  /* footer */
  .s-foot { margin-top: auto; border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-alt); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .s-foot .s-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-8) var(--space-6); }
  .s-foot__brand { display: flex; flex-direction: column; gap: var(--space-1); }
  .s-foot__brand .s-brand { font-size: var(--font-size-md); color: var(--color-action); }
  .s-foot__brand .s-brand img { width: 24px; height: 24px; }
  .s-foot__brand .s-brand:hover { text-decoration: none; }
  .s-foot__credit { flex-basis: 100%; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-xs); }
  .s-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .s-foot a { color: var(--color-text-muted); text-decoration: none; }
  .s-foot a:hover { color: var(--color-text); text-decoration: underline; }
}