/* Kit v3 Home as the website home page (decision D117/D119, 2026-11-06): the shell (name logo, spine, header with the
   Menu and the section bar), then the page hero for the place (placelens.js), then the sections (sections.js) and the
   footer: the one layout of docs/design/PAGE_TYPES.md. The map explorers live in the Observatory. The page scrolls;
   the header bar and the spine stay fixed where the shell puts them. Scoped to .pl-shell. */
html:has(.pl-shell) body { overflow-x: clip; }
.pl-shell > .bar, .pl-shell > .spine { position: fixed; }
.pl-band--hero { padding-block-start: calc(var(--top) + 12px); align-content: start; }
@media (max-width: 760px) { .pl-band--hero { padding-block-start: calc(var(--top) + 8px); } }
/* the Peoples and Lenses stage is the hero (owner, 2026-11-06): full bleed, no text hero; placelens.css lays it out */
.pl-band--hero.pl-band--stage { padding: 0; }

/* The approved Peoples and Lenses hero as the first screen (owner ruling, 2026-11-06, LESSONS_AND_HANDOVER 5b; audit of
   7 Nov, docs/site/HOMEPAGES_AUDIT.md): the Site Kit's own hero in a same-site frame with the page's lens. One navigation
   for the whole page: the header bar fixed at the top (the name logo, short name over the host, above the kit's spine;
   the labelled groups; search, language, theme, Sign in, Join and Menu). The frame starts under the bar, fills the rest
   of the first screen and is as tall as its hero (platform.js sizes it), so nothing scrolls inside it. */
html.pf-kit-hero { scroll-padding-block-start: 64px; }
.kh { position: relative; display: block; inline-size: 100%; block-size: calc(100svh - 56px); min-block-size: 360px; margin: 56px 0 0; border: 0; background: var(--bg); color-scheme: normal; }
.kh-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.pf-kit-hero .pl-shell { display: contents; }
html.pf-kit-hero .pl-shell > .spine, html.pf-kit-hero .pl-shell > .rail { display: none; }
html.pf-kit-hero .kh-bar, html.pf-kit-hero .pl-shell > .bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 40; block-size: 56px; margin: 0;
  display: flex; align-items: center; gap: 8px; padding-inline: 0 12px;
  background: var(--bg); border: 0; border-block-end: 1px solid var(--line); border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.pf-kit-hero .bar .tools { display: contents; }
html.pf-kit-hero .bar .brand { flex: none; inline-size: 92px; display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--ink); text-decoration: none; }
html.pf-kit-hero .bar .brand .mark { display: block; min-inline-size: 0; block-size: auto; padding: 0; background: none; color: var(--ink); border-radius: 0; font: 800 15px/1 var(--f); letter-spacing: -.02em; }
html.pf-kit-hero .bar .brand__t { display: block; text-align: center; }
html.pf-kit-hero .bar .brand__t b { display: none; }
html.pf-kit-hero .bar .brand__t span { display: block; font: 400 9px/1 ui-monospace, "IBM Plex Mono", monospace; color: var(--ink-3); }
html.pf-kit-hero .bar .nav-bar { order: 1; margin-inline-end: auto; }
html.pf-kit-hero .bar .cmd { order: 2; flex: 0 1 200px; min-inline-size: 0; block-size: 34px; margin-inline-start: auto; }
html.pf-kit-hero .bar .nav-bar ~ .cmd, html.pf-kit-hero .bar .nav-bar ~ * .cmd { margin-inline-start: 0; }
html.pf-kit-hero .bar .tools > * { order: 3; flex: none; }
html.pf-kit-hero .bar .tools > .nav-bar { order: 1; }
html.pf-kit-hero .bar .tools > .cmd { order: 2; flex: 0 1 200px; }
html.pf-kit-hero .bar .tools > .nav-menu { order: 9; }
html.pf-kit-hero .bar .cmd .kbd { margin-inline-start: auto; }
.kh-lang { position: relative; }
.kh-lang > summary { list-style: none; cursor: pointer; }
.kh-lang > summary::-webkit-details-marker { display: none; }
.kh-lang__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 50; inline-size: 260px; max-block-size: 60vh; overflow: auto; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg-1, var(--bg)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.kh-lang__list a { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-size: 13px; }
.kh-lang__list a:hover, .kh-lang__list a[aria-current] { background: var(--bg-2); color: var(--ink); }
.kh-lang__list small { color: var(--ink-3); font-size: 10px; }
@media (max-width: 820px) {
  html.pf-kit-hero .bar .brand { inline-size: auto; justify-items: start; padding-inline-start: 14px; margin-inline-end: auto; }
  html.pf-kit-hero .bar .brand__t { text-align: start; }
  html.pf-kit-hero .bar .tools > .cmd, html.pf-kit-hero .bar .cmd { flex: none; inline-size: 34px; padding: 0; justify-content: center; margin-inline-start: 0; }
  html.pf-kit-hero .bar .cmd > span { display: none; }
}
@media (max-width: 420px) { html.pf-kit-hero .bar .kh-lang, html.pf-kit-hero .bar .tools > .btn[aria-label="Language"] { display: none; } }
/* on a built home page the page under the frame and the theme's chrome sleep, as they do under the kit; the page tour
   lives in the hero, once */
html.pf-kit-hero body:has(> .v3-home) > :not(.v3-home):not(#v3-nav):not(.nav-menu--float):not(.nexus-consent):not(.nexus-consent-root):not(.nxd):not([class*="nexus-a11y"]):not([id*="nexus-a11y"]):not(script):not(style):not(link) { display: none !important; }
html.pf-kit-hero body:has(> .v3-home) { margin: 0; padding: 0; background: var(--bg); }
html.pf-kit-hero .pf-explain-slot, html.pf-kit-hero .pf-explain { display: none !important; }
/* the home's sections show real items, not counters (owner critique, 7 Nov) */
html.pf-kit-hero .sec-stats { display: none; }
html.pf-kit-hero .bar .brand__t br { display: none; }

/* The home sections (D119, owner, 2026-11-07; revision of 7 Nov: "text-on-screen and generic"). Every card carries a
   visual drawn from data: maps from Natural Earth outlines and the map stack of the place pages, script covers from
   the letters of the language register, sites rendered from their 3D stages. The whole card is the link: no inner
   button, no grey card fill. One button system (v4 kit): primary ink, secondary outline, red only for Join; 48 px.
   Card sets are rows; on a phone they scroll sideways with scroll-snap and the page never does. Scoped to the home. */
@font-face { font-family: "HmArab"; src: url(vendor/fonts/vazirmatn-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "HmArab"; src: url(vendor/fonts/vazirmatn-arabic-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "HmCyr"; src: url(vendor/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "HmCyr"; src: url(vendor/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "HmCyrX"; src: url(vendor/fonts/ibm-plex-sans-cyrillic-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "HmCyrX"; src: url(vendor/fonts/ibm-plex-sans-cyrillic-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "HmArmn"; src: url(vendor/fonts/noto-sans-armenian-armenian-400-normal.woff2) format("woff2"); font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: "HmGeor"; src: url(vendor/fonts/noto-sans-georgian-georgian-400-normal.woff2) format("woff2"); font-display: swap; unicode-range: U+10A0-10FF, U+2D00-2D2F; }
@font-face { font-family: "HmHebr"; src: url(vendor/fonts/noto-sans-hebrew-hebrew-400-normal.woff2) format("woff2"); font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: "HmLatX"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "HmLatX"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.sec-root { --hm-f: "Plex", "HmLatX", "HmCyr", "HmCyrX", "HmArab", "HmArmn", "HmGeor", "HmHebr", system-ui, sans-serif; font-family: var(--hm-f); }
.sec-root .sec-t, .sec-root .sec-l { font-family: var(--hm-f); }

/* buttons: primary ink, secondary outline, red for Join; 48 px, one radius */
.sec-root .btn.hm-btn, .sec-root .sec-hd__r .btn, .sec-root .sec-acts .btn { min-block-size: 48px; block-size: auto; padding: 0 20px; gap: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); font: 500 15px/1.2 var(--hm-f); text-decoration: none; }
.sec-root .hm-btn--sec, .sec-root .sec-hd__r .btn, .sec-root .sec-hd__r .btn--solid { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.sec-root .hm-btn--sec:hover, .sec-root .sec-hd__r .btn:hover { background: var(--ink); color: var(--bg); }
.sec-root .hm-btn--pri { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.sec-root .hm-btn--red { background: var(--red); color: var(--red-ink); border: 1px solid var(--red); font-weight: 600; }
.sec-root .hm-btn svg { flex: none; }
.sec-root .sec-ctx:empty { display: none; }

/* rows of cards: a grid on wide screens, a sideways row with scroll-snap on phones */
.hm-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.hm-row > li { min-inline-size: 0; }
.hm-row > li > a, .hm-row > li > .hm-off__hd { color: inherit; text-decoration: none; }
.hm-row > li > a { display: flex; flex-direction: column; gap: 12px; block-size: 100%; }
.hm-row > li > a:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hm-row > li > a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hm-cc__t, .hm-way__t { display: grid; gap: 4px; min-inline-size: 0; }
.hm-cc__t b, .hm-way__t b { font: 600 17px/1.3 var(--hm-f); overflow-wrap: anywhere; }
.hm-cc__t small, .hm-way__t small { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.hm-h3 { margin: 40px 0 16px; font: 600 18px/1.3 var(--hm-f); }
.hm-src { margin: 16px 0 0; color: var(--ink-3); font-size: 12px; }

/* visuals */
.hm-way__v, .hm-cover, .hm-story__v { display: block; aspect-ratio: 16 / 9; inline-size: 100%; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); position: relative; }
.hm-way__v > img, .hm-story__v > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hm-way__v > .hm-cover { border: 0; border-radius: 0; block-size: 100%; aspect-ratio: auto; }
.hm-smap { display: block; inline-size: 100%; block-size: 100%; background: var(--bg); }
.hm-land { fill: var(--bg-2); stroke: var(--bg); stroke-width: .6; vector-effect: non-scaling-stroke; }
.hm-land.on { fill: color-mix(in srgb, var(--ink) 28%, var(--bg)); stroke: var(--bg); }
.hm-land.sel { fill: var(--ink); stroke: var(--bg); }
.hm-dot { fill: var(--red); stroke: var(--bg); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hm-dot.big { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.hm-land.sel ~ .hm-dot, .hm-smap .hm-dot { paint-order: stroke; }
.hm-smap--lang { aspect-ratio: 2 / 1; block-size: auto; border-radius: var(--r); }
.hm-smap--lang .hm-dot.big { fill: var(--red); }
/* the script cover: one large letter over a line of its neighbours */
.hm-cover { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 12px; color: var(--ink); background: var(--bg); }
.hm-cover b { font: 600 clamp(56px, 7vw, 88px)/1 var(--hm-f); }
.hm-cover i { font: 400 15px/1.4 var(--hm-f); font-style: normal; color: var(--ink-2); letter-spacing: .08em; white-space: nowrap; overflow: hidden; max-inline-size: 100%; }
.hm-cover--ink, .hm-cover--fill { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hm-cover--ink i, .hm-cover--fill i { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
/* the native-script specimen */
.hm-spec { display: grid; align-content: center; gap: 4px; block-size: 100%; padding: 16px 20px; }
.hm-spec b { font: 600 clamp(22px, 2.4vw, 30px)/1.25 var(--hm-f); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-spec b[dir="rtl"] { text-align: end; }
/* a sourced figure */
.hm-fig { display: grid; align-content: center; gap: 4px; block-size: 100%; padding: 16px 20px; }
.hm-fig > span { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.hm-fig b { font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--hm-f); letter-spacing: -.01em; }
.hm-fig small { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.hm-fig small + small { color: var(--ink-3); }

/* 1. find your way */
.hm-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 2. near you: the live map beside the place */
.hm-near { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.hm-near__map { margin: 0; min-inline-size: 0; }
.hm-near__slot { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--bg-1); }
.hm-near__slot > .hm-smap, .hm-gl { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hm-near__map figcaption, .hm-split__map figcaption { margin-block-start: 8px; color: var(--ink-3); font-size: 12px; }
.hm-pin { display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font: 600 12px/1 var(--hm-f); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg); white-space: nowrap; }
.hm-pin i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg); flex: none; }
.hm-near__side { display: grid; gap: 20px; min-inline-size: 0; }
.hm-near__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hm-near__hd h3 { margin: 0 auto 0 0; font: 600 24px/1.2 var(--hm-f); }
.hm-near__hd .fl { inline-size: 36px; block-size: 24px; }
.hm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink); font: 500 14px/1 var(--hm-f); }
.hm-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.hm-chip:hover { border-color: var(--ink); }
.hm-chip .fl { inline-size: 18px; block-size: 12px; }
.hm-cols { display: grid; gap: 20px; }
.hm-col h3 { margin: 0 0 8px; font: 600 13px/1.3 var(--hm-f); color: var(--ink-2); }
.hm-col .sec-list, .hm-col .sec-dates { margin: 0; }
.hm-dl { list-style: none; margin: 0; padding: 0; display: grid; }
.hm-dl a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
.hm-dl a:hover b { text-decoration: underline; }
.hm-dl__d { display: grid; justify-items: center; padding: 6px 0; border: 1px solid var(--ink); border-radius: var(--r); }
.hm-dl__d b { font: 600 18px/1 var(--hm-f); }
.hm-dl__d small { font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; }
.hm-dl a > span:last-child { display: grid; gap: 2px; }
.hm-dl a > span:last-child b { font: 500 15px/1.3 var(--hm-f); }
.hm-dl a > span:last-child small { color: var(--ink-2); font-size: 13px; }

/* 3. courses and languages */
.hm-courses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-langs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-lt > a { padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r); gap: 8px !important; }
.hm-lt > a:hover { border-color: var(--ink); }
.hm-lt__n { font: 600 clamp(28px, 2.8vw, 38px)/1.2 var(--hm-f); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-lt__n[dir="rtl"] { text-align: end; }
.hm-lt__e { color: var(--ink); font-size: 14px; font-weight: 500; }
.hm-lt__w { color: var(--ink-2); font-size: 13px; line-height: 1.4; }

/* 4. heritage: full-bleed cards, the name over the image */
.hm-her { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-hc > a { position: relative; display: block !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: #1a1a1a; }
.hm-hc img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.hm-hc > a:hover img { transform: scale(1.03); }
.hm-hc__t { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 4px; padding: 48px 20px 18px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); color: #fff; }
.hm-hc__t b { font: 600 22px/1.2 var(--hm-f); }
.hm-hc__t small { font-size: 14px; color: rgba(255,255,255,.86); }
@media (prefers-reduced-motion: reduce) { .hm-hc img { transition: none; } }

/* 5. one band: coverage, an example record, the actions */
.hm-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 40px; padding: 32px; border-block: 1px solid var(--ink); }
.hm-band--wide { grid-template-columns: minmax(0, 1fr); }
.hm-band h3 { margin: 0 0 16px; font: 600 18px/1.3 var(--hm-f); }
.hm-cov { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hm-band--wide .hm-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.hm-cov a { display: grid; grid-template-columns: 9em minmax(0, 1fr) 3.2em; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-block-size: 32px; }
.hm-cov b { text-align: match-parent; font: 600 15px/1.2 var(--hm-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cov small { text-align: end; color: var(--ink-2); font-size: 13px; }
.hm-bar { display: flex; block-size: 12px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.hm-bar i, .hm-legend i { display: block; block-size: 100%; }
.hm-k5 { background: var(--ink); } .hm-k4 { background: var(--ink-2); } .hm-k3 { background: var(--pastel); } .hm-k2 { background: var(--ink-3); } .hm-k1 { background: var(--line-2); } .hm-k0 { background: var(--bg-2); }
.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; color: var(--ink-2); font-size: 12.5px; }
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hm-legend i { inline-size: 14px; block-size: 10px; border-radius: 2px; border: 1px solid var(--line); }
.hm-rec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r); color: inherit; text-decoration: none; }
.hm-rec:hover { border-color: var(--ink); }
.hm-rec__d { align-self: start; display: grid; justify-items: center; align-content: start; min-inline-size: 64px; padding: 10px 8px; border: 1px solid var(--ink); border-radius: var(--r); }
.hm-rec__d b { font: 600 30px/1 var(--hm-f); }
.hm-rec__d small { font-size: 12px; color: var(--ink-2); margin-block-start: 4px; white-space: nowrap; }
.hm-rec__b { display: grid; gap: 6px; min-inline-size: 0; }
.hm-rec__b > b { font: 600 18px/1.25 var(--hm-f); }
.hm-rec__b > small { color: var(--ink-2); font-size: 13.5px; }
.hm-rec dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.hm-rec dt { color: var(--ink-3); }
.hm-rec dd { margin: 0; overflow-wrap: anywhere; }
.hm-rec dd .fl { inline-size: 16px; block-size: 11px; margin-inline-end: 4px; vertical-align: -1px; }
.hm-band__act { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.hm-band__act p { margin: 0 0 4px; color: var(--ink-2); font-size: 14px; }

/* the Academy home */
.hm-facs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-paths { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hm-path { padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r); display: grid; gap: 16px; }
.hm-path__hd { display: grid; gap: 2px; }
.hm-path__hd b { font: 600 34px/1.2 var(--hm-f); }
.hm-path__hd b[dir="rtl"] { text-align: start; }
.hm-path__hd span { color: var(--ink-2); font-size: 14px; }
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.hm-steps li { --h: calc(56px + var(--i) * 28px); }
.hm-steps a { display: grid; align-content: end; gap: 4px; min-block-size: var(--h); padding: 12px; border-radius: var(--r); background: var(--ink); color: var(--bg); text-decoration: none; }
.hm-steps li:nth-child(1) a { background: color-mix(in srgb, var(--ink) 55%, var(--bg)); }
.hm-steps li:nth-child(2) a { background: color-mix(in srgb, var(--ink) 78%, var(--bg)); }
.hm-steps__lv { font: 600 18px/1 var(--hm-f); }
.hm-steps b { font: 500 12.5px/1.3 var(--hm-f); }
.hm-steps small { font-size: 11.5px; opacity: .8; }

/* the Heritage home */
.hm-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; margin-block-end: 32px; }
.hm-split__map { margin: 0; min-inline-size: 0; }
.hm-split__map .hm-smap { aspect-ratio: 3 / 2; block-size: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.hm-names { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.hm-names a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 0; border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
.hm-names a:hover b { text-decoration: underline; }
.hm-names b { font: 600 15px/1.3 var(--hm-f); }
.hm-names small { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.hm-names .fl { inline-size: 18px; block-size: 12px; grid-row: span 2; }
.hm-stories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-story__v .hm-smap { aspect-ratio: auto; }
.hm-tl { list-style: none; margin: 0; padding: 24px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x proximity; border-block-start: 2px solid var(--ink); scrollbar-width: thin; }
.hm-tl li { position: relative; scroll-snap-align: start; padding-inline-end: 24px; }
.hm-tl li::before { content: ""; position: absolute; inset-block-start: -31px; inset-inline-start: 0; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.hm-tl a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.hm-tl a:hover b { text-decoration: underline; }
.hm-tl .num { font: 600 22px/1.1 var(--hm-f); }
.hm-tl b { font: 500 15px/1.3 var(--hm-f); }
.hm-tl small { color: var(--ink-3); font-size: 12.5px; }
.hm-days { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hm-day > a { flex-direction: row !important; align-items: flex-start; }
.hm-day__d { display: grid; justify-items: center; align-content: center; flex: none; inline-size: 80px; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: var(--r); }
.hm-day__d b { font: 600 32px/1 var(--hm-f); }
.hm-day__d small { font-size: 12px; color: var(--ink-2); margin-block-start: 4px; }
.hm-flags { display: flex; gap: 4px; margin-block-start: 4px; }
.hm-flags .fl { inline-size: 18px; block-size: 12px; }

/* the Languages home */
.hm-scripts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-script__g { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r); }
.hm-script__g i { font: 400 24px/1.6 var(--hm-f); font-style: normal; text-align: center; color: var(--ink); }

/* the Research and other homes */
.hm-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-figc > a { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; gap: 0 !important; }
.hm-figc > a:hover { border-color: var(--ink); }
.hm-figc .hm-smap { aspect-ratio: 16 / 7; block-size: auto; }
.hm-figc .hm-fig { padding: 16px; }
.hm-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-paper > a { padding: 20px 0 0; border-block-start: 2px solid var(--ink); gap: 8px !important; }
.hm-paper__y { color: var(--ink-3); font: 500 13px/1 var(--hm-f); }
.hm-paper b { font: 600 16px/1.35 var(--hm-f); }
.hm-paper small { color: var(--ink-2); font-size: 13px; }
.hm-offs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-off { padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r); }
.hm-off__hd { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; }
.hm-off__hd .fl { inline-size: 36px; block-size: 24px; }
.hm-off__hd b { font: 600 17px/1.2 var(--hm-f); }
.hm-off ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hm-off li { display: flex; justify-content: space-between; gap: 8px; }
.hm-off li a { color: var(--ink); }
.hm-off li small { color: var(--ink-3); white-space: nowrap; }
.hm-progs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-prog > a { padding: 20px 0 0; border-block-start: 2px solid var(--ink); gap: 8px !important; }
.hm-prog__n { font: 600 28px/1 var(--hm-f); color: var(--ink-3); }
.hm-prog b { font: 600 18px/1.3 var(--hm-f); }
.hm-prog small { color: var(--ink-2); font-size: 14px; }
.hm-state { align-self: flex-start; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 12px; color: var(--ink-2); }

/* the map footnote of the map stack belongs to full map pages; the home's maps carry their own caption */
html.pf-kit-hero .v3-mapfoot { display: none; }

@media (max-width: 1100px) {
  .hm-ways, .hm-her { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-courses, .hm-langs, .hm-facs, .hm-figs, .hm-offs, .hm-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-near, .hm-split { grid-template-columns: minmax(0, 1fr); }
  .hm-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-band__act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hm-band__act p { flex-basis: 100%; }
}
/* phones: card sets become sideways rows with scroll-snap inside the section; the page itself never scrolls sideways */
@media (max-width: 760px) {
  .hm-row { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .hm-row::-webkit-scrollbar { display: none; }
  .hm-row > li { flex: 0 0 76%; scroll-snap-align: start; }
  .hm-row.hm-ways > li, .hm-row.hm-her > li, .hm-row.hm-courses > li, .hm-row.hm-facs > li { flex-basis: 72%; }
  .hm-row.hm-langs > li, .hm-row.hm-days > li { flex-basis: 64%; }
  .hm-row.hm-paths > li { flex-basis: 86%; }
  .hm-cc__t small, .hm-way__t small { font-size: 13px; }
  .hm-cover b { font-size: 56px; }
  .hm-h3 { margin-block-start: 24px; }
  .hm-near { gap: 16px; }
  .hm-near__slot { aspect-ratio: 4 / 3; }
  .hm-near__hd h3 { font-size: 20px; }
  .hm-near__hd .btn { inline-size: 100%; }
  .hm-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .hm-chips::-webkit-scrollbar { display: none; }
  .hm-chip { flex: none; }
  .hm-cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .hm-cols::-webkit-scrollbar { display: none; }
  .hm-col { flex: 0 0 82%; scroll-snap-align: start; }
  .hm-band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0; }
  .hm-band--wide .hm-cov { grid-template-columns: minmax(0, 1fr); }
  .hm-band__act { flex-direction: column; align-items: stretch; }
  .hm-cov a { grid-template-columns: 7.5em minmax(0, 1fr) 3em; }
  .hm-split { gap: 16px; }
  .hm-names { display: none; }
  .hm-hc__t b { font-size: 19px; }
  .sec-root .sec-hd__r .btn { min-block-size: 44px; }
  .hm-steps a { padding: 10px 8px; }
  .hm-steps b { display: none; }
  .hm-band__act p { flex-basis: auto; }
  .hm-chips, .hm-cols { scroll-padding-inline: 16px; }
  .hm-cov li:nth-child(n+5), .hm-band .hm-src, .hm-rec__b > small, .hm-lt__w { display: none; }
  .hm-band { gap: 20px; padding: 20px 0; }
  .hm-band h3 { margin-block-end: 10px; }
  .hm-rec { padding: 14px; }
  .sec-root .sec-sec { padding-block: 24px 28px; }
  .sec-root .sec-hd { margin-block-end: 16px; }
  .hm-lt > a { padding: 14px; }
  .hm-lt__n { font-size: 26px; }
  .sec-root .sec-foot__langs { display: none; }
  .sec-root .sec-foot__col { padding-block-start: 10px; }
  .hm-near__slot { aspect-ratio: 16 / 10; }
  .hm-near__hd .btn { inline-size: auto; min-block-size: 44px; padding: 0 14px; }
  .hm-near__side { gap: 14px; }
  .hm-dl li:nth-child(n+3), .hm-col .sec-list li:nth-child(n+3) { display: none; }
  .hm-band__act h3, .hm-band__act p, .hm-band__act a[href="translate.html"] { display: none; }
  .hm-band__act { flex-direction: row !important; flex-wrap: wrap; }
  .hm-band__act > * { flex: 1 1 40%; }
  .hm-legend { margin-block-start: 8px; }
  .hm-courses .hm-cover, .hm-facs .hm-cover { aspect-ratio: 2 / 1; }
  .hm-cover b { font-size: 44px; }
  .sec-root .sec-foot__col p { display: none; }
  .sec-root .sec-foot__col b { margin-block-start: 4px; }
  .sec-root .sec-hd > .eyebrow { display: none; }
  .sec-root .sec-t { margin-block-start: 0; }
  .sec-root .sec-hd__r { margin-block-start: 10px; }
  .hm-smap--lang { aspect-ratio: 5 / 2; }
  .sec-root .sec-foot__nav { display: none; }
  /* the footer on a phone: the page list and languages as compact wrapping lines */
  .sec-root .sec-foot { padding-block: 24px; }
  .sec-root .sec-foot__grid { gap: 14px; }
  .sec-root .sec-foot__nav { gap: 2px 14px; }
  .sec-root .sec-foot__col p { margin: 4px 0 8px; }
  .sec-root .sec-foot__ll { gap: 2px 12px; }
}

/* ---------- v5 (owner, 2026-11-07, D123/D125): the sections continue the hero. Fine lines, mono labels, a heavy tight
   title, the hero's outlined chips; a numbered index on the left and one working instrument on the right; no card
   grids, no fills, no thumbnails. Every home, main and subsites. ---------- */
.sec-root { counter-reset: v5; --v5-pad: clamp(20px, 8.9vw, 128px); }
.sec-root > .sec-sec { counter-increment: v5; display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; padding: 72px var(--v5-pad) 80px; }
.sec-root > .sec-sec::before { background: var(--ink); opacity: .9; inset-inline: var(--v5-pad); height: 1px; }
.sec-root > .sec-sec > .sec-hd { position: sticky; inset-block-start: 88px; display: block; margin: 0; }
.sec-root > .sec-sec > .sec-hd > .eyebrow { display: flex; gap: 14px; font: 500 11px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sec-root > .sec-sec > .sec-hd > .eyebrow::before { content: counter(v5, decimal-leading-zero); color: var(--ink); }
.sec-root > .sec-sec .sec-t { margin: 18px 0 0; font: 800 clamp(34px, 3.6vw, 52px)/1 var(--f); letter-spacing: -.035em; }
.sec-root > .sec-sec .sec-l { margin: 16px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sec-root > .sec-sec .sec-hd__r { display: block; margin-block-start: 24px; }
.sec-root > .sec-sec .sec-hd__r .btn { min-block-size: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 500 15px/1 var(--f); gap: 8px; border-block-end: 1px solid var(--ink); padding-block-end: 6px; border-radius: 0; }
.sec-root > .sec-sec .sec-hd__r .btn:hover { background: none; color: var(--red); border-color: var(--red); }
.sec-root > .sec-sec > .sec-bd { min-width: 0; padding-block-start: 6px; }

/* the ruled list: number, title over one line, a mono tag, an arrow; hairlines between rows */
.v5-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line-2); }
.v5-list li { border-block-end: 1px solid var(--line-2); }
.v5-list a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 24px; gap: 20px; align-items: baseline; padding: 22px 0; color: var(--ink); text-decoration: none; }
.v5-n { font: 400 12px/1 var(--m); color: var(--ink-3); letter-spacing: .04em; }
.v5-t b { display: block; font: 600 clamp(19px, 1.6vw, 23px)/1.2 var(--f); letter-spacing: -.015em; }
.v5-t small { display: block; margin-block-start: 6px; font-size: 14px; color: var(--ink-2); }
.v5-m { font: 400 11px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.v5-arr { display: inline-flex; align-self: center; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.v5-list a:hover .v5-t b, .v5-list a:focus-visible .v5-t b { color: var(--red); }
.v5-list a:hover .v5-arr { color: var(--red); transform: translateX(4px); }
[dir="rtl"] .v5-list a:hover .v5-arr { transform: translateX(-4px) scaleX(-1); }

/* the hero's outlined chips */
.v5-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; }
.v5-chip { min-block-size: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink); font: 400 15px/1 var(--f); cursor: pointer; }
.v5-chip:hover { border-color: var(--ink); }
.v5-chip[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* your place: the map in fine lines beside the agenda */
.v5-near, .v5-her { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.v5-near__map, .v5-her__map { margin: 0; }
.v5-map { display: block; inline-size: 100%; block-size: auto; }
.v5-map .hm-land { fill: none; stroke: var(--ink-3); stroke-width: .5; opacity: .7; vector-effect: non-scaling-stroke; }
.v5-map .hm-land.sel { stroke: var(--ink); stroke-width: 1.25; opacity: 1; fill: none; }
.v5-map .hm-dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.v5-map .hm-dot.big { fill: var(--red); stroke: none; }
.v5-cap { margin-block-start: 12px; font: 400 11px/1.4 var(--m); letter-spacing: .04em; color: var(--ink-3); }
.v5-place { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v5-place h3 { margin: 0; font: 800 32px/1 var(--f); letter-spacing: -.03em; }
.v5-link { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); font: 500 14px/1 var(--f); text-decoration: none; border-block-end: 1px solid var(--ink); padding-block-end: 5px; }
.v5-link:hover { color: var(--red); border-color: var(--red); }
.v5-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 20px; }
.v5-tabs button { padding: 6px 0; border: 0; border-block-end: 1px solid transparent; background: none; color: var(--ink-2); font: 400 14px/1.2 var(--f); cursor: pointer; }
.v5-tabs button:hover { color: var(--ink); }
.v5-tabs button[aria-pressed="true"] { color: var(--ink); border-block-end-color: var(--red); }
.v5-near .v5-list a, .v5-her .v5-list a { grid-template-columns: 56px minmax(0, 1fr) auto 20px; padding: 16px 0; }
.v5-near .v5-t b, .v5-her .v5-t b { font-size: 17px; }
.v5-none { color: var(--ink-3); margin: 0; }

/* the languages as a type specimen */
.v5-spec { display: flex; flex-wrap: wrap; gap: 8px 40px; padding-block-end: 36px; margin-block-end: 8px; }
.v5-spec a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.v5-spec b { font: 600 clamp(30px, 3.2vw, 46px)/1.15 var(--f); letter-spacing: -.02em; }
.v5-spec small { font: 400 11px/1 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.v5-spec a:hover b { color: var(--red); }

.v5-join { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-block-start: 18px; }

/* subsite homes: the same frame; their card rows become ruled lists and lose every thumbnail and cover */
.sec-root .hm-row { display: block; list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line-2); overflow: visible; }
.sec-root .hm-row > li { inline-size: auto; border: 0; border-block-end: 1px solid var(--line-2); background: none; box-shadow: none; border-radius: 0; }
.sec-root .hm-row > li > a { display: block; padding: 18px 0; background: none; border: 0; color: var(--ink); text-decoration: none; }
.sec-root .hm-row img, .sec-root .hm-row .hm-cover, .sec-root .hm-row .hm-way__v, .sec-root .hm-row .hm-smap, .sec-root .hm-row .hm-hc__img { display: none !important; }
.sec-root .hm-row b { font: 600 19px/1.25 var(--f); letter-spacing: -.01em; }
.sec-root .hm-row small { display: block; margin-block-start: 4px; color: var(--ink-2); font-size: 14px; }
.sec-root .hm-row > li > a:hover b { color: var(--red); }

@media (max-width: 960px) {
  .sec-root > .sec-sec { grid-template-columns: 1fr; padding: 56px 20px 64px; }
  .sec-root > .sec-sec::before { inset-inline: 20px; }
  .sec-root > .sec-sec > .sec-hd { position: static; margin-block-end: 28px; }
  .v5-near, .v5-her { grid-template-columns: 1fr; }
  .v5-list a, .v5-near .v5-list a, .v5-her .v5-list a { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; }
  .v5-m { display: none; }
  .v5-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .v5-chip { flex: none; }
}

.v5-map .hm-dot { r: 4.5px; }
.v5-map .hm-dot.big { r: 5.5px; }
.v5-near .v5-list a, .v5-her .v5-list a { grid-template-columns: 64px minmax(0, 1fr) 20px; }
@media (max-width: 960px) {
  .sec-root > .sec-sec { padding: 48px 20px 56px; }
  .v5-her__map { display: none; }
  .v5-her .v5-list li:nth-child(n+5), .sec-root [data-sec="learn"] .v5-list li:nth-child(n+4) { display: none; }
  .v5-spec { gap: 6px 24px; padding-block-end: 24px; }
  .v5-list a { padding: 16px 0; }
}