/* The People’s Path — Home, opening screen (header + 00.1 hero), Glaze mode.
   Built only from tokens.css (Manual v2.1, Appendix A). Section numbers refer to the manual.
   Revised 30 Oct 2026 (APAG): the logo is the page title, tagline “A street full of stories
   belongs to you.”, one button, navigation on the left margin. */

/* ---------- Fonts: Anek only, self-hosted (11.1) ---------- */
@font-face {
  font-family: 'Anek Latin';
  src: url(../fonts/AnekLatin-wght-latin.woff2) format('woff2');
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anek Devanagari';
  src: url(../fonts/AnekDevanagari-wght-subset.woff2) format('woff2');
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pp-color-night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pp-bg); color: var(--pp-fg);
  font-family: var(--pp-font-latin); font-size: var(--pp-fs-body-m); line-height: var(--pp-lh-body-m); font-weight: 400;
  font-synthesis: none; font-kerning: normal; font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
h1, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
b { font-weight: 600; }
a { color: inherit; }

/* Devanagari: 1.06 × the Latin size, never tracked or case-transformed (11.5) */
:lang(kok) { font-family: var(--pp-font-deva); letter-spacing: 0 !important; text-transform: none !important; }
.deva { font-size: calc(var(--pp-deva-scale) * 1em); }

:focus-visible { outline: var(--pp-focus-w) solid var(--pp-focus); outline-offset: var(--pp-focus-offset); }
.skip {
  position: absolute; left: var(--pp-margin); top: -100px; z-index: 100;
  padding: 12px 24px; background: var(--pp-color-indigo); color: var(--pp-color-white);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- Grid: 12 / 8 / 4 columns (13.1) ---------- */
.wrap { width: 100%; max-width: calc(var(--pp-container-max) + 2 * var(--pp-margin)); margin-inline: auto; padding-inline: var(--pp-margin); }
.grid { display: grid; grid-template-columns: repeat(var(--pp-cols), minmax(0, 1fr)); column-gap: var(--pp-gutter); }

/* ---------- Type helpers (11.2) ---------- */
.t-meta { font-size: var(--pp-fs-meta); line-height: var(--pp-lh-meta); letter-spacing: var(--pp-ls-meta); font-weight: var(--pp-fw-meta); font-variant-numeric: tabular-nums; }
.t-index { font-size: var(--pp-fs-index); line-height: var(--pp-lh-index); letter-spacing: var(--pp-ls-index); font-weight: var(--pp-fw-index); font-variant-numeric: tabular-nums; }

/* ---------- Icons (24-unit grid, stroke 2, square caps) ---------- */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.icon--24 { width: 24px; height: 24px; }

/* ---------- Button C23, Glaze: 48 px, thin outline, no fill, no radius ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 12px 24px;
  font-family: var(--pp-font-latin); font-size: var(--pp-fs-button); line-height: var(--pp-lh-button);
  font-weight: var(--pp-fw-button); letter-spacing: var(--pp-ls-button);
  color: var(--pp-color-white); text-decoration: none; white-space: nowrap;
  background: transparent; border: 1px solid rgba(180, 190, 213, 0.5); border-radius: 0;
  transition: background-color var(--pp-dur-1) linear, border-color var(--pp-dur-1) linear;
}
.btn:hover { background: var(--pp-color-indigo); border-color: var(--pp-color-indigo-30); }

/* ---------- Header (9.3), Home variant ----------
   The hero logo is this page’s title, so the header carries no logo here (one logo per view).
   ≥ 1200 px: five items on the left margin at 18 px, language toggle on the right edge.
   < 1200 px: Menu button on the right; items live in the full-screen panel. */
.site-header { position: relative; z-index: 20; background: var(--pp-color-night); }
.site-header__in { display: flex; align-items: center; height: var(--pp-header-h); }
.nav, .lang { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px;
  min-width: 74px; height: 44px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--pp-color-white); font-family: var(--pp-font-latin); font-size: 16px; line-height: 24px; font-weight: 600;
}
@media (min-width: 1200px) {
  .menu-btn { display: none; }
  .nav { display: block; }
  .nav ul { display: flex; gap: 32px; }
  .nav a {
    position: relative; display: block; padding: 10px 0; white-space: nowrap; text-decoration: none;
    font-size: var(--pp-fs-body-l); line-height: 24px; font-weight: var(--pp-fw-nav); color: var(--pp-color-indigo-30);
    transition: color var(--pp-dur-1) linear;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--pp-color-indigo-30);
    transform: scaleX(0); transform-origin: left; transition: transform var(--pp-dur-1) var(--pp-ease-out);
  }
  .nav a:hover { color: var(--pp-color-white); }
  .nav a:hover::after { transform: none; }
  .lang { display: flex; align-items: center; gap: 10px; height: 44px; margin-left: auto; font-size: var(--pp-fs-body-l); }
  .lang a { display: block; padding: 10px 0; line-height: 24px; text-decoration: none; color: var(--pp-color-indigo-30); font-weight: 500; }
  .lang a[aria-current] { color: var(--pp-color-white); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .lang .sep { color: var(--pp-color-indigo-55); }
}

/* ---------- Tile field (Ch. 14) ----------
   Every tile is the People’s Path azulejo from the manual’s vector: two symbols in the sprite,
   #ppl (diagonals, knocked out around the bloom) and #ppb (the bloom). Tiles are whole squares
   with 2 px grout; light is a state of a tile: unlit, dawn (is-d), lit (is-l). */
.field-wrap { position: relative; overflow: hidden; pointer-events: none; }
.field {
  position: absolute; top: 0; left: var(--off); width: calc(100% + var(--bleed));
  display: none; grid-template-columns: repeat(var(--n), calc(100% / var(--n) - 2px)); grid-auto-columns: calc(100% / var(--n) - 2px);
  gap: var(--pp-tile-gap); align-content: start; background: var(--pp-color-grout);
}
.field--sm { display: grid; --n: 4; --bleed: 60px; --off: -30px; }   /* 4 across < 600 px */
.field--md { --n: 6; --bleed: 80px; --off: -40px; }                    /* 6 across 600–1199 px */
.field--xl { --n: 10; --bleed: 80px; --off: -40px; }                   /* 10 across ≥ 1200 px */
@media (min-width: 600px) { .field--sm { display: none; } .field--md { display: grid; } }
@media (min-width: 1200px) { .field--md { display: none; } .field--xl { display: grid; } }
@media (min-width: 1600px) { .field--xl { --n: 12; } }                 /* keeps T ≤ 176 px */

.t { position: relative; aspect-ratio: 1; background: var(--pp-color-deep); transition: box-shadow var(--pp-dur-5) var(--pp-ease-in-out); }
.t::before, .t::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--pp-dur-6) var(--pp-ease-in-out); }
.t::before { background: var(--pp-tile-dawn-ground); box-shadow: inset 0 0 0 1px rgba(117, 137, 178, 0.22); }
.t::after { background: var(--pp-tile-lit-ground); box-shadow: var(--pp-tile-edge); transition-duration: var(--pp-dur-5); }
.t > svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.t .ln { stroke: var(--pp-color-indigo-55); stroke-opacity: var(--pp-tile-unlit-ink); fill: none; transition: stroke-opacity var(--pp-dur-6) var(--pp-ease-in-out); }
.t .bl { fill: var(--pp-color-indigo-55); fill-opacity: var(--pp-tile-unlit-ink); transition: fill-opacity var(--pp-dur-6) var(--pp-ease-in-out); }
/* Dawn: neighbours of the lit tile */
.t.is-d::before { opacity: 1; }
.t.is-d .ln { stroke-opacity: var(--pp-tile-dawn-ink); }
.t.is-d .bl { fill-opacity: 0.38; }
/* Lit: one tile per screen; light like daylight on glaze, never neon */
.t.is-l { z-index: 2; box-shadow: var(--pp-tile-halo); }
.t.is-l::after { opacity: 1; }
.t.is-l .ln { stroke: var(--pp-color-indigo-30); stroke-opacity: var(--pp-tile-lit-ink); transition-duration: var(--pp-dur-5); }
.t.is-l .bl { fill: var(--pp-color-white); fill-opacity: 1; filter: drop-shadow(0 0 18px rgba(180, 190, 213, 0.9)); transition-duration: var(--pp-dur-5); }

/* ---------- 00.1 Hero (9.4, option A, revised) ---------- */
.hero {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--pp-color-night);
  min-height: clamp(780px, calc(100svh - var(--pp-header-h)), 904px);   /* phones: at least 780 px */
}
.hero__in { position: relative; z-index: 4; order: 1; padding-top: 40px; }
.hero__copy { grid-column: 1 / -1; container-type: inline-size; }
/* The logo spans the copy column (supplied SVG as <img>; width only, height auto).
   Clear space F = 0.15 × logo width separates it from the tagline, which keeps the tagline
   a page heading rather than a new logo-and-tagline lockup (Fig 10.4). */
.hero__logo { line-height: 0; }
.hero__logo img { width: 100%; height: auto; }
.hero__tagline {
  margin-top: 15cqw; color: var(--pp-color-white);
  font-size: var(--pp-fs-h2); line-height: var(--pp-lh-h2); letter-spacing: var(--pp-ls-h2); font-weight: 300;
}
.hero__tagline > * { display: block; }
.hero__tagline b { font-weight: 600; }
.hero__actions { display: grid; margin-top: 32px; }
.hero__field {
  order: 2; flex: 1 1 auto; min-height: 260px; margin-top: 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 76%, transparent 100%);
}
.hero__meta { display: none; }

@media (min-width: 600px) {
  .hero { min-height: clamp(640px, calc(100svh - var(--pp-header-h)), 904px); }
  .hero__in { padding-top: 64px; }
  .hero__copy { grid-column: 1 / span 6; }
  .hero__actions { display: flex; margin-top: 48px; }
  .hero__field {
    margin-top: 48px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 72%, transparent 100%);
  }
}

@media (min-width: 1200px) {
  .hero { --c: min(100% - 2 * var(--pp-margin), var(--pp-container-max)); }
  /* the logo’s top sits on the first tile joint: one tile pitch = (viewport + 80 px bleed) ÷ 10 */
  .hero__in { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; padding-top: calc((100% + 80px) / 10); }
  .hero__copy { grid-column: 1 / span 5; }
  .hero__actions { margin-top: 48px; }
  /* Field fills the hero behind a flat Night copy area: transparent over columns 1–5 plus
     the logo’s clear space F, fading in over 160 px; fading out toward the foot (hero vignette). */
  .hero__field {
    position: absolute; inset: 0; margin: 0; min-height: 0;
    --copy-w: calc((var(--c) - 11 * var(--pp-gutter)) / 12 * 5 + 4 * var(--pp-gutter));
    --copy-end: calc((100% - var(--c)) / 2 + var(--copy-w));
    --clear: calc(var(--copy-w) * 0.15);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--copy-end) + var(--clear)), #000 calc(var(--copy-end) + var(--clear) + 160px)), linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--copy-end) + var(--clear)), #000 calc(var(--copy-end) + var(--clear) + 160px)), linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero__meta { display: block; margin-top: auto; padding-block: 48px 28px; color: var(--pp-color-indigo-30); }
  .hero__meta b { color: var(--pp-color-white); }
}
@media (min-width: 1600px) { .hero__in { padding-top: calc((100% + 80px) / 12); } }

/* ---------- Menu panel C03 (< 1200 px) ---------- */
.menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; background: var(--pp-color-indigo); }
.menu[hidden] { display: none; }
.menu__bar { flex: none; background: var(--pp-color-night); }
.menu__bar .logo { display: block; margin-right: auto; }
.menu__bar .logo img { width: var(--pp-logo-w); height: auto; }
.menu__panel { padding-block: 32px 48px; }
.menu__list { border-top: 1px solid var(--pp-rule-inverse); }
.menu__list li { border-bottom: 1px solid var(--pp-rule-inverse); }
.menu__list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; min-height: 68px; padding-block: 16px; color: var(--pp-color-white); text-decoration: none; }
.menu__list .n { color: var(--pp-color-indigo-30); }
.menu__list .label { font-size: var(--pp-fs-menu); line-height: var(--pp-lh-menu); letter-spacing: var(--pp-ls-menu); font-weight: var(--pp-fw-menu); }
.menu__extra { margin-top: 40px; }
.menu__extra a { display: block; padding-block: 10px; color: var(--pp-color-white); font-weight: 500; text-decoration: none; }
.menu__lang { display: flex; gap: 16px; margin-top: 32px; }
.menu__lang a { display: block; padding-block: 10px; color: var(--pp-color-white); text-decoration: none; }
.menu__lang a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }
.menu-open, .menu-open body { overflow: hidden; }
@media (min-width: 600px) { .menu__inner { max-width: 640px; } }

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media (prefers-contrast: more) { .t.is-l { box-shadow: none; } }
@media (forced-colors: active) { .btn { border: 1px solid ButtonText; } .field-wrap { display: none; } }
html.is-static *, html.is-static *::before, html.is-static *::after { transition: none !important; }