/* ROOTED website stylesheet. One file, no framework. Sections:
   1 fonts · 2 tokens · 3 base · 4 layout · 5 header + navigation · 6 buttons, pills, chips · 7 hero + page heads
   8 sections + cards · 9 lists from results.json (media, StoryMaps, publications) · 10 click-to-load embeds
   11 articles + news posts · 12 news page · 13 about + contact + search · 14 footer · 15 picture viewer
   16 display panel + accessibility modes · 17 utilities · 18 responsive · 19 print · 20 parts added with the page templates
   21 touchscreen mode
   Colours: ROOTED logo (#1f4529, #65ac33, #47663b, #58361e, #522f05) + the old site (sage #B5C18E, #A7B281, peach #F7DCB9,
   brown #914F1E, cream #FEFAEF). Text colours checked for WCAG AA on their backgrounds. */

/* ---------- 1 fonts (self-hosted from Google Fonts, SIL Open Font License: /assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/lora-latin.woff2") format("woff2"); 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: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/lora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/lora-italic-latin.woff2") format("woff2"); 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: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/lora-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/notosans-latin.woff2") format("woff2"); 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: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/notosans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/notosans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/notosans-italic-latin.woff2") format("woff2"); 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: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/notosans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/notosans-italic-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ---------- 2 tokens ---------- */
:root {
  /* brand */
  --green: #1f4529; --green-2: #2b6331; --leaf: #65ac33; --moss: #47663b;
  --brown: #58361e; --brown-dark: #522f05; --rust: #914f1e;
  --sage: #b5c18e; --olive: #a7b281; --peach: #f7dcb9; --cream: #fefaef;
  --sage-soft: #eef2e1; --peach-soft: #fbefdc; --leaf-soft: #e3f0d3;
  /* roles (the high-contrast mode swaps these) */
  --bg: var(--cream); --card: #fff; --text: #1d261f; --muted: #4f5a4d; --head: var(--green);
  --link: var(--green-2); --link-hover: var(--rust); --line: #e4dcc6; --line-strong: #c9bd9b;
  --band-1: var(--sage-soft); --band-2: var(--peach-soft); --chip: #fff; --chip-on: var(--green); --chip-on-text: #fff;
  --focus: #b4530a; --kicker: var(--rust); --btn: var(--green); --btn-text: #fff; --btn-2: var(--leaf); --btn-2-text: #13240f;
  --shadow: 0 1px 2px rgba(31, 69, 41, .07), 0 10px 28px -16px rgba(31, 69, 41, .35);
  --shadow-lg: 0 2px 4px rgba(31, 69, 41, .06), 0 22px 48px -24px rgba(31, 69, 41, .45);
  --radius: 18px; --radius-sm: 10px; --radius-lg: 30px;
  --font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --wrap: 74rem; --narrow: 46rem; --gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* ---------- 3 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
html[data-size="112"] { font-size: 126%; }
html[data-size="125"] { font-size: 140.6%; }
html[data-size="150"] { font-size: 168.75%; }
html[data-size="175"] { font-size: 196.9%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; overflow-x: hidden; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--head); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.1rem; }
p, ul, ol, dl, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.35em; }
li + li { margin-top: .35em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
strong, b { font-weight: 650; }
small { font-size: .88rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
abbr[title] { text-decoration: none; }
::selection { background: var(--peach); color: #1d261f; }
main:focus { outline: none; }

/* ---------- 4 layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 2rem); }
.narrow { max-width: calc(var(--narrow) + 4rem); }
.section { padding: clamp(2.75rem, 5vw, 4.75rem) 0; }
.section-tight { padding: 2rem 0; }
.band { background: var(--band-1); position: relative; }
.band-warm { background: var(--band-2); position: relative; }
/* soft organic edges above and below bands */
.band::before, .band-warm::before, .band::after, .band-warm::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.band::before, .band-warm::before { top: -27px; }
.band::after, .band-warm::after { bottom: -27px; transform: scaleY(-1); }
.band::before, .band::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V18C140 6 300 0 470 6s330 22 520 20 300-14 450-24v28z' fill='%23eef2e1'/%3E%3C/svg%3E"); }
.band-warm::before, .band-warm::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V10C180 22 360 26 560 18S920 0 1100 4s250 12 340 18v6z' fill='%23fbefdc'/%3E%3C/svg%3E"); }
.band + .band, .band-warm + .band-warm { margin-top: 0; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
.stack > * + * { margin-top: 1rem; }

/* ---------- 5 header + navigation ---------- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; }
.skip:focus { top: 1rem; color: #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.head-row { display: flex; align-items: center; gap: .75rem 1.25rem; min-height: 5rem; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--head); margin-right: auto; }
.brand img { width: 3rem; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; letter-spacing: .2em; color: var(--brown-dark); }
.brand-sub { font-size: .74rem; color: var(--muted); letter-spacing: .02em; max-width: 15rem; }
.brand:hover .brand-name { color: var(--rust); }
.menu-btn { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--green); background: var(--card); color: var(--green); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; min-height: 2.75rem; }
.menu-btn[aria-expanded="true"] { background: var(--green); color: #fff; }
.nav { display: none; flex-basis: 100%; order: 5; }
.nav.open { display: block; }
.nav-list { list-style: none; margin: 0; padding: .5rem 0 1rem; display: grid; gap: .25rem; }
.nav-list li { margin: 0; }
.nav-list a { display: block; padding: .7rem .9rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; }
.nav-list a:hover { background: var(--band-1); color: var(--green); }
.nav-list a[aria-current="page"] { background: var(--band-1); color: var(--green); box-shadow: inset 4px 0 0 var(--leaf); }
.sub { list-style: none; margin: 0 0 .4rem 1rem; padding: 0 0 0 .6rem; border-left: 2px solid var(--line); }
.sub a { font-weight: 500; padding: .55rem .9rem; }
.sub-btn { display: none; }
.head-tools { display: flex; align-items: center; gap: .4rem; }
.tool { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: .4rem .7rem; border-radius: 999px; color: var(--green); text-decoration: none; font-weight: 600; border: 2px solid transparent; background: none; cursor: pointer; }
.tool:hover, .lang-switch[open] > .tool { background: var(--band-1); color: var(--green); }
.tool[aria-expanded="true"] { background: var(--green); color: #fff; }
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; list-style: none; margin: 0; padding: .4rem; min-width: 12.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lang-switch li { margin: 0; }
.lang-switch a { display: flex; gap: .7rem; align-items: baseline; padding: .55rem .75rem; border-radius: 8px; text-decoration: none; color: var(--text); }
.lang-switch a b { font-size: .78rem; color: var(--muted); width: 1.6rem; letter-spacing: .04em; }
.lang-switch a:hover { background: var(--band-1); }
.lang-switch a[aria-current="true"] { background: var(--band-1); font-weight: 650; color: var(--green); }
.search-bar { background: var(--band-1); border-top: 1px solid var(--line); padding: .9rem 0; }
.search-form { display: flex; gap: .6rem; }
.search-form input, .field { flex: 1; min-width: 0; min-height: 3rem; padding: .55rem 1rem; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--card); }
.search-form input:focus, .field:focus { border-color: var(--green); outline: 3px solid var(--focus); outline-offset: 2px; }
/* the current section of the site, highlighted in the main menu */
.sec-home .nav-home > a, .sec-about .nav-about > a, .sec-articles .nav-articles > a, .sec-media .nav-media > a, .sec-storymaps .nav-storymaps > a,
.sec-publications .nav-publications > a, .sec-news .nav-news > a, .sec-contact .nav-contact > a { color: var(--green); background: var(--band-1); }

/* ---------- 6 buttons, pills, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .65rem 1.4rem; border-radius: 999px; border: 2px solid var(--btn); background: var(--btn); color: var(--btn-text); font-weight: 650; text-decoration: none; line-height: 1.2; text-align: center; transition: background-color .2s, color .2s, transform .2s; }
.btn:hover { background: var(--green-2); border-color: var(--green-2); color: #fff; transform: translateY(-1px); }
.btn-leaf { background: var(--btn-2); border-color: var(--btn-2); color: var(--btn-2-text); }
.btn-leaf:hover { background: #7cc04a; border-color: #7cc04a; color: #13240f; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--band-1); color: var(--green); }
.btn-sm { min-height: 2.6rem; padding: .45rem 1rem; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.more { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.more::after { content: "→"; transition: transform .2s; }
.more:hover::after { transform: translateX(3px); }
.kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); margin-bottom: .7rem; }
.kicker .i { color: var(--leaf); width: 1.15em; height: 1.15em; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.pill, .lang-tag, .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 650; line-height: 1.2; padding: .3rem .7rem; border-radius: 999px; letter-spacing: .01em; }
.pill { background: var(--band-1); color: var(--green); }
.pill::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--dot, var(--leaf)); flex: none; }
.p-BLM { --dot: #0068a8; } .p-HOS { --dot: #00839c; } .p-OTOP { --dot: #6f9c82; } .p-SEO { --dot: #60b030; } .p-ED { --dot: #001868; } .p-ALL { --dot: var(--leaf); }
.lang-tag { border: 1.5px solid var(--line-strong); color: var(--brown); background: var(--card); }
.badge { background: var(--peach); color: var(--brown-dark); }
.badge-live { background: #b42318; color: #fff; }
.badge-live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.meta { color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .6rem; }
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 2rem; box-shadow: var(--shadow); display: grid; gap: .9rem; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; border: 0; }
.filter-label { font-weight: 650; font-size: .9rem; color: var(--muted); min-width: 6.5rem; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .35rem .95rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--chip); color: var(--text); font-size: .92rem; font-weight: 550; }
.chip:hover { border-color: var(--green); }
.chip[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-text); }
.chip .n { font-size: .78rem; opacity: .8; font-weight: 700; }
.filter-row { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
.filter-text { display: flex; align-items: center; gap: .6rem; flex: 1 1 18rem; max-width: 28rem; }
.filter-text .field { min-height: 2.75rem; }
.count { margin: 0; font-weight: 600; color: var(--muted); font-size: .95rem; }
.empty { padding: 1.5rem; border: 2px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ---------- 7 hero + page heads ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 6vw, 5rem); }
.hero::before { content: ""; position: absolute; width: 46rem; height: 46rem; right: -14rem; top: -12rem; border-radius: 58% 42% 51% 49% / 46% 55% 45% 54%; background: radial-gradient(circle at 40% 40%, var(--leaf-soft), var(--sage-soft) 60%, transparent 72%); z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); margin-bottom: .35em; }
.hero-sub { font-family: var(--font-head); font-style: italic; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--brown); margin-bottom: 1.2rem; }
.lede { font-size: 1.12rem; color: var(--text); max-width: 38rem; }
.hero-media { margin: 0; position: relative; }
.hero-media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 46% 54% 40% 60% / 38% 42% 58% 62%; box-shadow: var(--shadow-lg); }
.hero-media figcaption, .credit { font-size: .78rem; color: var(--muted); margin-top: .6rem; }
.hero-media figcaption { text-align: right; padding-right: 1rem; }
.leaf-float { position: absolute; color: var(--leaf); width: 2.6rem; height: 2.6rem; opacity: .9; animation: sway 7s ease-in-out infinite; transform-origin: 20% 90%; }
.leaf-float.l1 { left: -.6rem; top: 8%; }
.leaf-float.l2 { right: 7%; bottom: 2.6rem; width: 1.9rem; height: 1.9rem; color: var(--moss); animation-delay: -3s; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-4px); } }
.page-head { padding: clamp(2rem, 4.5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.5rem); position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: -9rem; top: -10rem; width: 26rem; height: 26rem; border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%; background: var(--band-1); z-index: -1; }
.page-head h1 { max-width: 48rem; }
.page-head .lede { max-width: 46rem; }
.page-head-img { display: grid; gap: 2rem; align-items: center; }
.page-head-img img { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-lg); width: 100%; }
.crumbs { font-size: .92rem; margin-bottom: 1.25rem; }
.crumbs a { text-decoration: none; font-weight: 600; }
.crumbs a::before { content: "← "; }

/* ---------- 8 sections + cards ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.75rem; }
.sec-head h2 { margin: 0; }
.sec-head .kicker { display: flex; width: 100%; margin-bottom: .2rem; }
.sec-intro { max-width: 46rem; color: var(--text); font-size: 1.05rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-img { aspect-ratio: 16 / 10; background: var(--band-1); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .card-img img { transform: scale(1.035); }
.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.card h3 a { color: var(--head); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is one big link */
.card h3 a:hover { color: var(--rust); }
.card a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.card .sub-en { font-size: .88rem; color: var(--muted); font-style: italic; margin: -.2rem 0 .5rem; }
.card-sum { color: var(--muted); font-size: .95rem; margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-by { margin-top: auto; font-size: .85rem; color: var(--muted); margin-bottom: 0; }
.card-date { font-size: .85rem; font-weight: 650; color: var(--rust); margin-bottom: .35rem; }
.tile { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.4rem 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--text); position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--text); }
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--muted); font-size: .95rem; }
.tile .tile-n { font-size: .82rem; font-weight: 700; color: var(--rust); }
.tile-icon { width: 3rem; height: 3rem; border-radius: 50% 50% 50% 12%; display: grid; place-items: center; background: var(--leaf-soft); color: var(--green); margin-bottom: .5rem; font-size: 1.4rem; }
.tile-icon svg { width: 1.6rem; height: 1.6rem; }
.note { background: var(--band-2); border-left: 5px solid var(--peach); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.note-green { background: var(--band-1); border-left-color: var(--sage); }
.todo-box { background: #fff4d6; border: 3px dashed #b4530a; color: #4a2a00; border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-weight: 600; }
.partners-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.75rem; }
.partners-strip li { margin: 0; }
.partners-strip a { display: block; padding: .5rem; border-radius: var(--radius-sm); }
.partners-strip img { height: 3.6rem; width: auto; max-width: 11rem; object-fit: contain; }

/* ---------- 9 lists rendered from results.json ---------- */
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.rlist > li { margin: 0; }
.rlist.rows { grid-template-columns: 1fr; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; display: flex; flex-direction: column; gap: .2rem; scroll-margin-top: 1rem; }
.item:target { outline: 3px solid var(--leaf); outline-offset: 3px; }
.item h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.item .sub-en { font-size: .9rem; color: var(--muted); font-style: italic; margin: 0 0 .5rem; }
.item-head { display: flex; gap: 1rem; align-items: flex-start; }
.item-head > div, .item-wide > div { min-width: 0; }
.item-thumb { width: 5.5rem; flex: none; border-radius: 12px; aspect-ratio: 1; object-fit: cover; background: var(--band-1); }
.item-num { font-size: .8rem; font-weight: 700; color: var(--rust); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .15rem; }
.item-text { color: var(--text); font-size: .95rem; margin: .5rem 0 .25rem; }
.item-text p { margin-bottom: .6em; }
.item-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.item-text.clamp > :not(:first-child) { display: none; }
.text-more { align-self: flex-start; background: none; border: 0; padding: .3rem 0; color: var(--link); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; font-size: .92rem; }
.item-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; align-items: center; }
.item-links .ext { font-size: .9rem; font-weight: 600; }
.file-btn { max-width: 100%; display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; border: 2px solid var(--green); color: var(--green); background: var(--card); text-decoration: none; font-weight: 650; font-size: .92rem; min-height: 2.6rem; }
.file-btn small { font-weight: 500; color: var(--muted); font-size: .8rem; }
.file-btn:hover { background: var(--green); color: #fff; }
.file-btn:hover small { color: #e9eed8; }
.item-wide { display: grid; gap: 1.25rem 1.75rem; grid-template-columns: 1fr; }
.item-cover img, .item-wide > .item-cover img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--band-1); }
.item-cover.portrait img { aspect-ratio: 3 / 4; object-fit: cover; max-width: 18rem; }
.item-cover.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.item audio { width: 100%; margin-top: .75rem; }
.item details { margin-top: .6rem; }
.item summary, .details summary { cursor: pointer; font-weight: 650; color: var(--link); }
.longtext { margin-top: .75rem; padding: 1rem 1.1rem; background: var(--band-1); border-radius: var(--radius-sm); font-size: .95rem; }
.coming { display: grid; place-items: center; text-align: center; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(160deg, var(--leaf-soft), var(--peach-soft)); color: var(--green); padding: 1rem; position: relative; overflow: hidden; }
.coming img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.coming span { position: relative; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; background: rgba(254, 250, 239, .92); padding: .5rem 1.1rem; border-radius: 999px; color: var(--green); }
.loading { color: var(--muted); padding: 1rem 0; }
.group-head { margin: 2.5rem 0 1.25rem; }
.group-head:first-child { margin-top: 0; }

/* ---------- 10 click-to-load embeds ---------- */
.embed { position: relative; border-radius: 12px; overflow: hidden; background: #24352a; color: #fff; margin: .75rem 0 .35rem; }
.embed-16x9 { aspect-ratio: 16 / 9; }
.embed-tall { aspect-ratio: 4 / 3; }
.embed-spotify { min-height: 152px; background: linear-gradient(120deg, #1f4529, #2b4a33 60%, #3c5a2e); }
.embed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.embed-cover { position: relative; z-index: 1; height: 100%; min-height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.25rem; text-align: center; background: linear-gradient(180deg, rgba(20, 35, 24, .15), rgba(20, 35, 24, .7)); }
.embed-load { display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .65rem 1.4rem; border-radius: 999px; border: 0; background: var(--leaf); color: #13240f; font-weight: 700; font-size: 1rem; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); }
.embed-load:hover { background: #7cc04a; }
.embed-load:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.embed-load .i { width: 1.3em; height: 1.3em; }
.embed-note { font-size: .8rem; max-width: 30rem; margin: 0; color: #f1f4ea; line-height: 1.45; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.embed.loaded { background: #fff; }
.embed-spotify.loaded { min-height: 0; height: 152px; background: transparent; }
.embed-spotify.loaded iframe { position: static; height: 152px; }
/* StoryMaps are long scrolling stories: a tall frame before and after loading (phones: section 18; touch mode: section 21) */
.embed-story { aspect-ratio: auto; height: max(32rem, min(75vh, 52rem)); }
.embed-alt { font-size: .88rem; margin: 0 0 .5rem; }
.embed-alt a { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.embed-alt .i { width: 1em; height: 1em; }
video.self { width: 100%; border-radius: 12px; background: #000; margin: .75rem 0 .35rem; }

/* ---------- 11 articles + news posts ---------- */
.post-head { padding: clamp(1.75rem, 4vw, 3.25rem) 0 1.5rem; }
.post-head h1 { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 2.9rem); }
.post-sub { font-family: var(--font-head); font-style: italic; color: var(--brown); font-size: 1.2rem; margin-top: -.2rem; }
.byline { color: var(--muted); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.byline strong { color: var(--text); }
.post-cover { margin: 0 auto 2.5rem; max-width: 64rem; }
.post-cover img { width: 100%; border-radius: var(--radius-lg); max-height: 36rem; object-fit: cover; box-shadow: var(--shadow-lg); }
.post-cover figcaption { font-size: .8rem; color: var(--muted); margin-top: .6rem; padding: 0 .5rem; }
.orig-note { font-size: .92rem; margin-bottom: 2rem; }
.prose { font-size: 1.06rem; line-height: 1.75; }
.prose > * { max-width: var(--narrow); }
.prose h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8rem; }
.prose h4 { margin-top: 1.5rem; }
.prose li { margin-top: .5em; }
.prose blockquote { margin: 1.5rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 4px solid var(--sage); font-family: var(--font-head); font-style: italic; font-size: 1.12rem; color: var(--brown); }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); width: 100%; }
.prose figcaption, .gallery figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; line-height: 1.45; }
figcaption .cr { display: block; font-size: .78rem; }
.prose .embed, .prose .embed-alt, .prose video { max-width: var(--narrow); }
.prose sup { line-height: 0; }
.prose sup a { text-decoration: none; font-weight: 700; padding: 0 .12em; }
.footnotes { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.footnotes h2 { font-size: 1.15rem; margin-top: 0; }
.footnotes ol { padding-left: 1.6em; }
.footnotes li { word-break: break-word; }
.fn-back { text-decoration: none; margin-left: .25rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 2.25rem 0; max-width: 64rem !important; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.zoom { cursor: zoom-in; }
.author-box { display: flex; gap: 1.25rem; align-items: flex-start; margin: 3rem 0 1rem; padding: 1.4rem; background: var(--band-1); border-radius: var(--radius); max-width: var(--narrow); }
.author-box img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.author-box h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.author-box p { margin: 0; font-size: .95rem; }
.author-box .credit { margin-top: .5rem; }
.post-foot { margin-top: 2.5rem; }
.related { margin-top: 1rem; }

/* ---------- 12 news page ---------- */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.events > li { margin: 0; }
.event { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); position: relative; }
.event-date { width: 5.2rem; text-align: center; background: var(--green); color: #fff; border-radius: 14px 14px 14px 4px; padding: .6rem .3rem; line-height: 1.1; align-self: start; }
.event-date .d { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; }
.event-date .m { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.event-date .y { display: block; font-size: .78rem; opacity: .85; }
.event h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.event h3 a { text-decoration: none; color: var(--head); }
.event h3 a::after { content: ""; position: absolute; inset: 0; }
.event h3 a:hover { color: var(--rust); }
.event:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.event p { margin: 0; color: var(--muted); font-size: .95rem; }
.event-thumb { display: none; }
.press { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .25rem; }
.press .outlet { font-weight: 700; color: var(--brown); font-size: .9rem; }
.press a { font-weight: 600; font-size: 1.05rem; }

/* ---------- 13 about, contact, search ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 0; }
.facts div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.facts dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rust); margin-bottom: .2rem; }
.facts dd { margin: 0; font-weight: 600; }
.summary-cols { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.summary-cols > div { background: var(--card); border-radius: var(--radius); padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-top: 5px solid var(--leaf); }
.summary-cols h3 { font-size: 1.2rem; }
.summary-cols p { margin: 0; }
.partners { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.partner { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin: 0; }
.partner-logo { display: grid; place-items: center; background: #fff; border-radius: var(--radius-sm); padding: 1rem; min-height: 8rem; border: 1px solid var(--line); }
.partner-logo img { max-height: 6rem; width: auto; max-width: 100%; object-fit: contain; }
.partner h3 { margin-bottom: .2rem; }
.partner .role { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--rust); margin-bottom: .3rem; }
.partner .local { color: var(--muted); font-size: .95rem; margin-bottom: .6rem; }
.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.contact-card h2 { font-size: 1.35rem; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.link-list li:last-child { border-bottom: 0; }
.link-list .muted { color: var(--muted); font-size: .9rem; }
.search-page .search-form { max-width: 44rem; margin-bottom: 1.5rem; }
.search-results h2 { font-size: 1.3rem; margin-top: 2rem; display: flex; gap: .6rem; align-items: baseline; }
.search-results h2 .n { font-family: var(--font-body); font-size: .9rem; color: var(--muted); font-weight: 600; }
.hits { list-style: none; margin: 0; padding: 0; }
.hits li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.hits a.hit-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.hits p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.hits mark { background: var(--peach); color: inherit; border-radius: 3px; padding: 0 .1em; }
.legal-page .prose h2 { font-size: 1.45rem; }

/* ---------- 14 footer ---------- */
.site-foot { margin-top: clamp(3rem, 6vw, 5rem); }
.foot-funding { background: #fff; border-top: 1px solid var(--line); padding: 2.25rem 0 1.75rem; color: #1d261f; position: relative; }
.foot-funding::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V16C220 2 420 0 640 10s420 18 600 10 200-10 200-10v18z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; }
.funders { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; }
.funders li { margin: 0; }
.funders img { height: 3.6rem; width: auto; max-width: 100%; }
.funders li:last-child img { height: 3.9rem; }
.disclaimer { max-width: 56rem; margin: 0 auto .5rem; text-align: center; font-size: .86rem; line-height: 1.6; color: #2e3a2f; }
.grant { text-align: center; font-size: .86rem; font-weight: 650; margin: 0; color: #2e3a2f; }
.foot-partners { background: var(--band-2); padding: 2rem 0 2.25rem; }
.foot-h { font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brown); text-align: center; margin-bottom: 1.25rem; font-weight: 700; }
.partner-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.1rem; }
.partner-logos li { margin: 0; }
.partner-logos a { display: grid; place-items: center; background: #fff; border-radius: 14px; padding: .6rem 1rem; height: 5rem; min-width: 8.5rem; box-shadow: 0 1px 2px rgba(88, 54, 30, .1); transition: transform .2s; }
.partner-logos a:hover { transform: translateY(-2px); }
.partner-logos img { max-height: 3.6rem; width: auto; max-width: 10rem; object-fit: contain; }
.foot-base { background: var(--green); color: #e9eed8; padding: 2rem 0 2.25rem; --focus: #f7dcb9; }
.foot-base-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }
.foot-brand img { width: 4.2rem; height: auto; }
.foot-text { flex: 1; min-width: 15rem; }
.foot-links { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.foot-links li { margin: 0; }
.foot-base a { color: #fff; font-weight: 600; }
.foot-base a:hover { color: var(--peach); }
.licence, .copy { margin: 0; font-size: .88rem; color: #d8e6c3; }

/* ---------- 15 picture viewer ---------- */
.lb-on, .lb-on body { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(12, 22, 15, .92); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.lightbox.ready img { opacity: 1; }
.lightbox button { position: absolute; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(31, 69, 41, .85); color: #fff; font-size: 1.9rem; line-height: 1; display: grid; place-items: center; padding: 0 0 .15em; }
.lightbox button:hover { background: var(--green-2); }
.lightbox button:focus-visible { outline: 3px solid var(--peach); }
.lb-close { top: .8rem; right: .8rem; }
.lb-prev { left: .8rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .8rem; top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); color: #fff; font-size: .9rem; max-width: 90vw; text-align: center; margin: 0; text-shadow: 0 1px 3px #000; }

/* ---------- 16 display panel ("Display & reading") + modes ----------
   Opened by the emblem button in the header tools (.disp-btn); the panel (.disp, #a11y-panel) is a full-width sheet inside the
   header, right under it, in the sage band style: groups of large tiles (aria-pressed), the text size steps, reset. */
html:not(.js) .disp-btn, html:not(.js) .touch-btn, html:not(.js) .nav-extra { display: none !important; }
.disp-btn .emblem { width: 1.75rem; height: 1.75rem; flex: none; }
.tool.disp-btn[aria-expanded="true"] { background: var(--band-1); color: var(--green); border-color: var(--green); }
.head-touch { display: none; border-color: var(--line-strong); }
.touch-btn .t-off { display: none; }
.nav-extra { margin: .25rem 0 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.disp { position: relative; background: var(--band-1); border-top: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.disp::after { content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 28px; transform: scaleY(-1); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V18C140 6 300 0 470 6s330 22 520 20 300-14 450-24v28z' fill='%23eef2e1'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; }
.disp:focus { outline: none; }
.disp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.disp-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.disp-head h2 .i { color: var(--leaf); width: 1.05em; height: 1.05em; }
.disp-intro { margin: .3rem 0 0; color: var(--text); max-width: 42rem; }
.disp-close { flex: none; }
.disp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
.dgroup { min-width: 0; display: flex; flex-direction: column; }
.g-text, .g-see, .disp-foot { grid-column: 1 / -1; }
.dgroup-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.dgroup-h::before { content: ""; width: .85rem; height: .85rem; border-radius: 0 80% 0 80%; background: var(--leaf); flex: none; }
.dtiles { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.g-move .dtiles, .g-screen .dtiles { grid-template-columns: minmax(0, 1fr); }
.dtile { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; width: 100%; min-height: 7.5rem; padding: .85rem 1rem .95rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); text-align: left; font-weight: 650; line-height: 1.3; box-shadow: var(--shadow); transition: border-color .2s, background-color .2s; }
.dtile:hover { border-color: var(--green); }
.dtile-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50% 50% 50% 12%; background: var(--leaf-soft); color: var(--green); transition: background-color .2s, color .2s; }
.dtile-ic svg { width: 1.55rem; height: 1.55rem; }
.dtile-l { overflow-wrap: break-word; hyphens: auto; }
.dtile-d { margin-top: -.2rem; font-size: .86rem; font-weight: 500; color: var(--muted); }
.dtile-st { display: flex; align-items: center; gap: .55rem; margin-top: auto; padding-top: .2rem; font-size: .88rem; font-weight: 700; color: var(--muted); }
.dtile .st-on, .dtile[aria-pressed="true"] .st-off { display: none; }
.dtile[aria-pressed="true"] .st-on { display: inline; }
.dtile[aria-pressed="true"] { border-color: var(--green); background: #f5f9ec; }
.dtile[aria-pressed="true"] .dtile-ic { background: var(--green); color: #fff; }
.dtile[aria-pressed="true"] .dtile-st { color: var(--green); }
.sw { width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #a9a28e; position: relative; flex: none; transition: background-color .2s; }
.sw::after { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s; }
[aria-pressed="true"] .sw { background: var(--green); }
[aria-pressed="true"] .sw::after { transform: translateX(1.1rem); }
.dsize { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1rem; padding: .9rem 1rem 1rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.dsize-l { font-weight: 650; }
.dsize-v { grid-row: 1; grid-column: 2; font-weight: 700; font-size: 1.05rem; color: var(--green); }
.dsize-row { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; }
.dstep { flex: none; min-width: 3.5rem; min-height: 3.1rem; border-radius: 14px; border: 2px solid var(--green); background: var(--card); color: var(--green); font-weight: 700; font-size: 1.15rem; }
.dstep:hover { background: var(--band-1); }
.dstep:disabled { opacity: .4; cursor: default; }
.dscale { flex: 1; display: flex; align-items: flex-end; gap: .35rem; min-width: 0; }
.dscale span { flex: 1; padding-bottom: .4rem; border-bottom: 5px solid var(--line); border-radius: 0 0 3px 3px; font-family: var(--font-head); font-weight: 700; line-height: 1; text-align: center; color: #8f8a78; cursor: pointer; }
.dscale span:nth-child(1) { font-size: .9rem; } .dscale span:nth-child(2) { font-size: 1.05rem; } .dscale span:nth-child(3) { font-size: 1.25rem; }
.dscale span:nth-child(4) { font-size: 1.5rem; } .dscale span:nth-child(5) { font-size: 1.8rem; }
.dscale .on { color: var(--green); border-bottom-color: var(--leaf); }
.dscale .cur { border-bottom-color: var(--green); }
.disp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.disp-note { margin: 0; font-size: .92rem; color: var(--text); }
@media (min-width: 56em) {
  /* five columns: Text size (3) + 2 tiles · 5 tiles · Movement, Screen, then reset (3); inner gaps = outer column gap, so tiles line up */
  .disp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem .9rem; }
  .g-text .dtiles, .g-see .dtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
  .g-text .dsize { grid-column: span 3; }
  .disp-foot { grid-column: span 3; align-self: end; justify-content: flex-end; padding-bottom: .4rem; }
}
@media (max-width: 40em) {
  /* phones: a full-screen sheet under the header (--head-h is measured by site.js when the panel opens) */
  .disp { min-height: calc(100vh - var(--head-h, 5rem)); min-height: calc(100svh - var(--head-h, 5rem)); }
  .dtile { min-height: 7.75rem; padding: .8rem .85rem .9rem; }
  .dscale { gap: .2rem; }
}
/* modes (classes set on <html> by the inline head script and site.js) */
html.a11y-spacing body { line-height: 1.95; letter-spacing: .05em; word-spacing: .14em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.4em; }
html.a11y-font { --font-body: Verdana, Tahoma, "DejaVu Sans", sans-serif; --font-head: Verdana, Tahoma, "DejaVu Sans", sans-serif; }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .22em; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-still { scroll-behavior: auto; }
html.a11y-still .card:hover, html.a11y-still .tile:hover, html.a11y-still .btn:hover { transform: none; }
html.a11y-contrast {
  --bg: #000; --card: #000; --text: #fff; --muted: #fff; --head: #fff; --link: #ffe14d; --link-hover: #fff; --line: #fff; --line-strong: #fff;
  --band-1: #000; --band-2: #000; --sage-soft: #000; --peach-soft: #000; --leaf-soft: #000; --chip: #000; --chip-on: #ffe14d; --chip-on-text: #000;
  --focus: #ffe14d; --kicker: #ffe14d; --btn: #ffe14d; --btn-text: #000; --btn-2: #ffe14d; --btn-2-text: #000; --brown: #fff; --brown-dark: #fff; --rust: #ffe14d; --green: #fff; --shadow: none; --shadow-lg: none;
}
html.a11y-contrast .card, html.a11y-contrast .item, html.a11y-contrast .tile, html.a11y-contrast .event, html.a11y-contrast .filters, html.a11y-contrast .partner, html.a11y-contrast .contact-card, html.a11y-contrast .summary-cols > div, html.a11y-contrast .facts div { border: 2px solid #fff; }
html.a11y-contrast .pill, html.a11y-contrast .lang-tag, html.a11y-contrast .badge { background: #000; color: #fff; border: 1.5px solid #fff; }
html.a11y-contrast .btn, html.a11y-contrast .embed-load, html.a11y-contrast .file-btn:hover { background: #ffe14d; color: #000; border-color: #ffe14d; }
html.a11y-contrast .btn-ghost, html.a11y-contrast .file-btn, html.a11y-contrast .menu-btn { background: #000; color: #ffe14d; border-color: #ffe14d; }
html.a11y-contrast .event-date, html.a11y-contrast .foot-base { background: #000; color: #fff; border: 2px solid #fff; }
html.a11y-contrast .band::before, html.a11y-contrast .band::after, html.a11y-contrast .band-warm::before, html.a11y-contrast .band-warm::after, html.a11y-contrast .hero::before, html.a11y-contrast .page-head::after { display: none; }
html.a11y-contrast .foot-partners { background: #000; }
html.a11y-contrast .note, html.a11y-contrast .longtext, html.a11y-contrast .author-box { border: 2px solid #fff; }
html.a11y-contrast .embed-cover { background: rgba(0, 0, 0, .8); }
html.a11y-contrast .coming span { background: #000; color: #fff; }
html.a11y-contrast .todo-box { background: #000; color: #ffe14d; border-color: #ffe14d; }
html.a11y-contrast .sw { background: #555; }
html.a11y-contrast [aria-pressed="true"] .sw { background: #ffe14d; }
html.a11y-contrast .disp { border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
html.a11y-contrast .disp::after, html.a11y-contrast .dgroup-h::before { display: none; }
html.a11y-contrast .disp-head h2 .i { color: #ffe14d; }
html.a11y-contrast .dtile, html.a11y-contrast .dsize { background: #000; border-color: #fff; }
html.a11y-contrast .dtile-ic { background: #000; color: #fff; border: 1.5px solid #fff; }
html.a11y-contrast .dtile[aria-pressed="true"] { background: #000; border-color: #ffe14d; box-shadow: inset 0 0 0 2px #ffe14d; }
html.a11y-contrast .dtile[aria-pressed="true"] .dtile-ic { background: #ffe14d; color: #000; border-color: #ffe14d; }
html.a11y-contrast .dtile[aria-pressed="true"] .dtile-st, html.a11y-contrast .dsize-v { color: #ffe14d; }
html.a11y-contrast .dstep { background: #000; color: #ffe14d; border-color: #ffe14d; }
html.a11y-contrast .dscale span { color: #a8a8a8; border-bottom-color: #a8a8a8; }
html.a11y-contrast .dscale .on { color: #ffe14d; border-bottom-color: #ffe14d; }
html.a11y-contrast .dscale .cur { color: #fff; border-bottom-color: #fff; }
html.a11y-contrast .tool.disp-btn[aria-expanded="true"] { background: #000; color: #ffe14d; border-color: #ffe14d; }
html.a11y-contrast .head-touch { border-color: #fff; }
html.a11y-contrast .lightbox button { background: #000; }
html.a11y-contrast .partner-logos a, html.a11y-contrast .partner-logo { border: 2px solid #fff; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("/assets/img/site/cursor-big.svg") 6 3, auto !important; }
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor summary, html.a11y-cursor label, html.a11y-cursor .zoom { cursor: url("/assets/img/site/cursor-big-hand.svg") 17 5, pointer !important; }
.mag-box { position: fixed; z-index: 92; left: 0; top: 0; max-width: min(40rem, calc(100vw - 1.5rem)); padding: .7rem 1rem; background: #fffbea; color: #111; border: 3px solid #1f4529; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3); font-family: var(--font-body); font-size: 1.85rem; line-height: 1.35; font-weight: 500; pointer-events: none; word-wrap: break-word; }
html.a11y-contrast .mag-box { background: #000; color: #fff; border-color: #ffe14d; }
.guide-bar { position: fixed; z-index: 91; left: 0; right: 0; top: 0; height: 2.4em; margin-top: -1.2em; background: rgba(255, 214, 102, .22); border-top: 3px solid rgba(145, 79, 30, .85); border-bottom: 3px solid rgba(145, 79, 30, .85); pointer-events: none; }

/* ---------- 17 utilities ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 2rem; }
.cols-2 { columns: 2 18rem; column-gap: 2.5rem; }
.cols-2 > * { break-inside: avoid; }

/* ---------- 18 responsive ---------- */
@media (min-width: 40em) {
  .item-wide { grid-template-columns: minmax(10rem, 15rem) 1fr; }
  .item-wide.story { grid-template-columns: 1fr; }
  .partner { grid-template-columns: 13rem 1fr; align-items: center; }
  .event-thumb { display: block; }
}
@media (min-width: 56em) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide { grid-template-columns: 1.3fr 1fr; }
  .page-head-img { grid-template-columns: 1.2fr 1fr; }
  .item-wide.pub { grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); }
  .event { grid-template-columns: auto 1fr 11rem; }
  .event-thumb img { width: 11rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
}
/* desktop navigation: two rows (logo + search + languages, then the menu across the full width, so the longer
   translations fit too), dropdown submenus. Not used with large text (a11y-big), where the menu stays a drawer. */
@media (min-width: 75em) {
  html:not(.a11y-big) .menu-btn { display: none; }
  html:not(.a11y-big) .nav { display: block; flex-basis: 100%; order: 5; border-top: 1px solid var(--line); padding-top: .3rem; }
  html:not(.a11y-big) .head-row { flex-wrap: wrap; row-gap: .4rem; padding-bottom: .3rem; }
  html:not(.a11y-big) .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .25rem; padding: 0; margin-left: -.62rem; }
  html:not(.a11y-big) .nav-list > li { position: relative; display: flex; align-items: center; }
  html:not(.a11y-big) .nav-list > li > a { padding: .55rem .62rem; font-size: .95rem; white-space: nowrap; }
  html:not(.a11y-big) .nav-list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--leaf); }
  html:not(.a11y-big) .has-sub > a { padding-right: .15rem; }
  html:not(.a11y-big) .sub-btn { display: grid; place-items: center; width: 1.9rem; height: 2.4rem; padding: 0; border: 0; background: none; color: var(--green); border-radius: 8px; }
  html:not(.a11y-big) .sub-btn .i { width: 1.05rem; height: 1.05rem; transition: transform .2s; }
  html:not(.a11y-big) .sub-btn:hover { background: var(--band-1); }
  html:not(.a11y-big) .sub-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
  html:not(.a11y-big) .sub { display: none; position: absolute; left: 0; top: calc(100% + .35rem); z-index: 60; min-width: 14rem; margin: 0; padding: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-lg); }
  html:not(.a11y-big) .sub.open { display: block; }
  html:not(.a11y-big) .sub a { white-space: nowrap; padding: .6rem .8rem; }
  html:not(.a11y-big) .tool-label { font-size: .92rem; }
  html:not(.a11y-big) .search-toggle .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* the touchscreen-mode switch: in the header tools on desktop, in the menu drawer below 75em */
@media (min-width: 75em) {
  .head-touch { display: inline-flex; }
  .nav-extra { display: none; }
}
@media (max-width: 40em) {
  .event { grid-template-columns: 1fr; }
  .event-date { width: auto; display: flex; gap: .4rem; align-items: baseline; padding: .4rem .8rem; justify-self: start; }
  .event-date .d { font-size: 1.1rem; }
  .author-box { flex-direction: column; }
  .filter-label { min-width: 100%; }
  .brand-sub { display: none; }
  .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .head-row { gap: .5rem; }
  .menu-btn { padding: .45rem .8rem; }
  .funders img { height: 2.9rem; }
  .funders li:last-child img { height: 3.2rem; }
  /* StoryMaps: nearly the whole screen below the header */
  .embed-story { height: max(20rem, calc(100vh - 6.5rem)); height: max(20rem, calc(100svh - 6.5rem)); }
}
@media (max-width: 26em) {
  /* one header row on phones: logo, Menu, then search, display and language as 44 px icon buttons */
  .head-row { column-gap: .4rem; }
  .brand { gap: .45rem; }
  .brand img { width: 2.3rem; }
  .brand-name { font-size: 1.1rem; letter-spacing: .1em; }
  .menu-btn { padding: .45rem .6rem; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .head-tools { gap: .2rem; }
  .tool { min-width: 44px; min-height: 44px; padding: .3rem .4rem; }
  .disp-btn .emblem { width: 1.6rem; height: 1.6rem; }
}
@media (max-width: 24em) {
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (hover: none) {
  .card:hover, .tile:hover { transform: none; }
}
/* without the head script (JS off): respect the system setting */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation: none !important; transition: none !important; }
  html:not(.js) { scroll-behavior: auto; }
}

/* ---------- 19 print ---------- */
@media print {
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .site-head .nav, .menu-btn, .head-tools, .search-bar, .disp, .tmenu, .tbar, .skip, .filters, .embed-cover button, .foot-partners, .foot-base .foot-links, .leaf-float, .text-more, .lightbox { display: none !important; }
  .band, .band-warm, .hero::before, .page-head::after { background: none !important; }
  .band::before, .band::after, .band-warm::before, .band-warm::after, .foot-funding::before { display: none; }
  .card, .item, .tile, .event, .partner { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a { color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .foot-base { background: #fff; color: #000; }
  .foot-base a, .licence, .copy { color: #000; }
  .foot-brand { display: none; }
  .item-text.clamp, .card-sum { -webkit-line-clamp: unset; display: block; }
  .item-text.clamp > :not(:first-child) { display: block; }
}

/* ---------- 20 parts added with the page templates (6 Oct 2026) ---------- */
.plain, .cards, .tiles { list-style: none; margin: 0; padding: 0; }
.plain > li, .cards > li, .tiles > li { margin: 0; }
.m-0 { margin: 0; }
.center-block { margin-left: auto; margin-right: auto; }
.anchor { scroll-margin-top: 1rem; }
.embed-title { position: relative; margin: 0; max-width: 34rem; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.tile .tile-n { align-self: flex-start; margin-top: .5rem; padding: .15rem .7rem; border-radius: 999px; background: var(--band-2); color: var(--brown-dark); }
.tile h3 { font-size: 1.3rem; }
/* home: "Explore" box next to "How did it start?" */
.explore { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow); }
.explore-h { font-size: 1.25rem; margin-bottom: .8rem; }
.explore ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .5rem; }
.explore a { display: flex; align-items: center; gap: .8rem; min-height: 3.6rem; padding: .5rem .7rem; border-radius: 14px; border: 1.5px solid transparent; color: var(--text); font-weight: 650; text-decoration: none; }
.explore a:hover { background: var(--band-1); border-color: var(--sage); color: var(--green); }
.explore .tile-icon { width: 2.6rem; height: 2.6rem; margin: 0; flex: none; }
.explore .tile-icon svg { width: 1.4rem; height: 1.4rem; }
.home-pair { align-items: start; }
/* small cards (home blocks, Media overview) */
.rlist.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.mini { margin: 0; }
.mini a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.mini a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--text); }
.mini-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, var(--leaf-soft), var(--peach-soft)); color: var(--green); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-img > .i { width: 2.8rem; height: 2.8rem; }
.mini-img .badge { position: absolute; left: .7rem; top: .7rem; }
.s-manual .mini-img img, .s-handbooks .mini-img img, .s-podcasts .mini-img img { object-fit: contain; padding: .75rem; filter: drop-shadow(0 4px 10px rgba(31, 69, 41, .25)); }
.mini-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: .9rem 1rem 1.1rem; }
.mini-kind { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }
.mini-body strong { font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--head); }
.mini a:hover strong { color: var(--rust); }
.mini .sub-en { font-size: .85rem; font-style: italic; color: var(--muted); }
.mini .tags { margin: auto 0 0; padding-top: .35rem; }
/* home: partners with names, linked to the About page (inside the "How did it start?" band) */
.partners-row { margin-top: clamp(2rem, 4vw, 3rem); }
.partners-row h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.partners-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .8rem; align-items: stretch; justify-content: stretch; margin-top: 1rem; }
.partners-strip a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .4rem; height: 100%; padding: .9rem .6rem 1rem; border-radius: var(--radius); background: #fff; color: var(--text); text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(88, 54, 30, .12); transition: transform .2s; }
.partners-strip a:hover { transform: translateY(-2px); color: var(--green); }
.partners-strip img { height: 3.1rem; max-width: 100%; }
.ps-name { font-size: .86rem; font-weight: 650; line-height: 1.3; }
.ps-country { font-size: .8rem; color: var(--muted); }
/* lists */
.item-cover a { display: block; }
.s-storymaps .embed, .s-storymaps .coming, .s-live .embed { max-width: 60rem; }
.live-when { display: flex; align-items: center; gap: .5rem; margin: .3rem 0 .4rem; font-weight: 650; color: var(--brown); }
.item.is-target { outline: 3px solid var(--leaf); outline-offset: 3px; }
.text-en { margin-top: .8rem; padding-left: .9rem; border-left: 3px solid var(--sage); }
.text-en-label { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }
.filter-text { margin: 0; }
.filter-text .filter-label { min-width: 0; }
/* about, contact, search */
.facts dd { overflow-wrap: anywhere; }
.mail { font-size: 1.15rem; font-weight: 650; overflow-wrap: anywhere; }
.hits .tags { margin: 0 0 .35rem; }
.hits .sub-en { margin: .15rem 0 0; font-size: .9rem; font-style: italic; }
.search-results > .count { margin: .25rem 0 0; }
.search-page .site-head .search-form { max-width: none; }
/* maps in articles: a light placeholder (no picture) until the visitor loads the map */
.embed-tall:not(.loaded) { aspect-ratio: auto; color: var(--text); border: 1px solid var(--line-strong); background: var(--band-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cg fill='none' stroke='%23a7b281' stroke-width='1.3' opacity='.55'%3E%3Cpath d='M0 22c40-16 80 16 120 0s80-16 120 0'/%3E%3Cpath d='M0 52c40-16 80 16 120 0s80-16 120 0'/%3E%3Cpath d='M0 82c40-16 80 16 120 0s80-16 120 0'/%3E%3C/g%3E%3C/svg%3E"); }
.embed-tall:not(.loaded) .embed-cover { min-height: 13rem; background: none; }
.embed-tall:not(.loaded) .embed-title { color: var(--head); text-shadow: none; }
.embed-tall:not(.loaded) .embed-note { color: var(--muted); text-shadow: none; }
html.a11y-contrast .embed-tall:not(.loaded) { background: #000; color: #fff; border-color: #fff; }
html.a11y-contrast .embed-tall:not(.loaded) .embed-title, html.a11y-contrast .embed-tall:not(.loaded) .embed-note { color: #fff; }
html.a11y-contrast .brand img, html.a11y-contrast .disp-btn .emblem { background: #fff; border-radius: 12px; padding: 3px; }
/* desktop menu: dropdowns also open on hover; a hidden bridge keeps them open while the pointer moves down */
@media (min-width: 75em) and (hover: hover) {
  html:not(.a11y-big) .has-sub:hover > .sub { display: block; }
}
@media (min-width: 75em) {
  html:not(.a11y-big) .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
}
html.a11y-contrast .explore, html.a11y-contrast .mini a, html.a11y-contrast .partners-strip a { border: 2px solid #fff; background: #000; }
html.a11y-contrast .mini-img, html.a11y-contrast .tile .tile-n { background: #000; color: #fff; }
@media print {
  .explore, .rlist.compact, .partners-strip { display: none !important; }
}

/* ---------- 21 touchscreen mode (16 Oct 2026) ----------
   html.touch-mode: large touch displays (32"+, landscape, often a kiosk browser without address bar or back button) in care
   homes. Switched on with ?touch=1 (off: ?touch=0), the header button or the display panel; stored in localStorage
   "rooted-a11y" ({"touch": 1}) and set before the first paint by the head script. Bigger text (125 %, the A+ steps still work
   on top), targets of at least 64 px with 12 px or more between them, no hover menus: a big Menu button opens a full-screen
   menu of tiles (#tmenu), and a fixed bar at the bottom (.tbar) has Back, Home, Menu and Top. */
.tbar, .tmenu { display: none; }
html.touch-mode { font-size: 140.6%; --narrow: 40rem; --tbar-h: clamp(80px, 3.6rem, 100px); scroll-padding-bottom: calc(var(--tbar-h) + 1rem); }
html.touch-mode[data-size="112"] { font-size: 157.5%; }
html.touch-mode[data-size="125"] { font-size: 175.8%; }
html.touch-mode[data-size="150"] { font-size: 210.9%; }
html.touch-mode[data-size="175"] { font-size: 246.1%; }
html.touch-mode body { padding-bottom: calc(var(--tbar-h) + env(safe-area-inset-bottom, 0px)); }
/* header: no menu row and no dropdowns; the big Menu button opens the tile menu; labels stay visible */
html.touch-mode .nav, html.touch-mode .nav-extra { display: none !important; }
html.touch-mode .head-row { gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
html.touch-mode .head-tools { flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
/* the header and the bar grow with the A+ steps only up to about the 150 % size, so that they never fill the screen */
html.touch-mode .brand img { width: min(3rem, 72px); }
html.touch-mode .brand-name { font-size: min(1.45rem, 40px); }
html.touch-mode .menu-btn { display: inline-flex; order: 3; min-height: 64px; padding: .4em 1.2em; font-size: min(1.05rem, 30px); background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
html.touch-mode .menu-btn .i { width: 1.5em; height: 1.5em; }
html.touch-mode .tool { min-height: 64px; min-width: 64px; padding: .4em .95em; font-size: min(1rem, 28px); border: 2px solid var(--line-strong); }
html.touch-mode .head-touch { display: inline-flex; border-color: var(--green); background: var(--card); }
html.touch-mode .touch-btn .t-on { display: none; }
html.touch-mode .touch-btn .t-off { display: inline; }
html.touch-mode .disp-btn .emblem { width: 1.9em; height: 1.9em; }
@media (min-width: 40em) {
  html.touch-mode .head-tools .tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: inherit; }
}
html.touch-mode .brand-sub { display: none; }
@media (max-width: 99.99em) {
  /* below 1600 px the labelled tools do not fit next to the logo: logo + Menu on the first row, the tools on the second */
  html.touch-mode .menu-btn { order: 1; }
  html.touch-mode .head-tools { order: 2; flex-basis: 100%; }
}
/* touch targets: at least 64 px, at least 12 px apart, nothing that needs hover */
html.touch-mode .btn, html.touch-mode .chip, html.touch-mode .file-btn, html.touch-mode .embed-load, html.touch-mode .dstep,
html.touch-mode .search-form input, html.touch-mode .field, html.touch-mode .skip { min-height: 64px; }
html.touch-mode .btn, html.touch-mode .file-btn { padding: .55rem 1.4rem; }
html.touch-mode .btn-sm { font-size: 1rem; }
html.touch-mode .chip { padding: .4rem 1.2rem; font-size: 1rem; }
html.touch-mode .filter-group, html.touch-mode .item-links, html.touch-mode .actions, html.touch-mode .tags { gap: 12px; }
html.touch-mode .crumbs a { gap: .35em; }
html.touch-mode .more, html.touch-mode .crumbs a, html.touch-mode .embed-alt a, html.touch-mode .item-links .ext, html.touch-mode .foot-links a,
html.touch-mode .link-list a, html.touch-mode .press a, html.touch-mode .hits a.hit-title, html.touch-mode .lang-switch a, html.touch-mode .foot-brand,
html.touch-mode .licence a { display: inline-flex; align-items: center; min-height: 64px; }
html.touch-mode .text-more { display: inline-flex; align-items: center; min-height: 64px; padding: .3rem 1.2rem; margin-top: .4rem; border: 2px solid var(--green); border-radius: 999px; text-decoration: none; }
html.touch-mode .prose a, html.touch-mode figcaption a, html.touch-mode p a { padding-top: .3em; padding-bottom: .3em; }   /* links inside running text: a taller hit area without moving the lines */
html.touch-mode .item summary, html.touch-mode .details summary { display: flex; align-items: center; min-height: 64px; }
html.touch-mode .item audio { height: 64px; }
html.touch-mode .foot-links { gap: 12px 28px; }
html.touch-mode .lang-switch li + li { margin-top: 12px; }
html.touch-mode .lang-switch ul { min-width: 15rem; }
html.touch-mode .embed-load { padding: .8rem 2rem; font-size: 1.15rem; }
html.touch-mode .embed-load .i { width: 1.6em; height: 1.6em; }
html.touch-mode .card:hover, html.touch-mode .tile:hover, html.touch-mode .mini a:hover, html.touch-mode .btn:hover,
html.touch-mode .partners-strip a:hover, html.touch-mode .partner-logos a:hover, html.touch-mode .card:hover .card-img img { transform: none; }
/* content: at most 3 columns of cards, bigger pictures and titles, comfortable article text, tall StoryMaps */
html.touch-mode .grid-3, html.touch-mode .grid-4, html.touch-mode .rlist, html.touch-mode .rlist.compact {
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 17rem), calc((100% - 2 * var(--gap)) / 3 - 1px)), 1fr)); }
html.touch-mode .rlist.rows { grid-template-columns: minmax(0, 1fr); }
html.touch-mode .card h3 { font-size: 1.3rem; }
html.touch-mode .mini-body strong { font-size: 1.2rem; }
html.touch-mode .item h3 { font-size: 1.25rem; }
html.touch-mode .item-thumb { width: 6.5rem; }
html.touch-mode .prose { line-height: 1.7; }
html.touch-mode .embed-story { height: 80vh; }
html.touch-mode .lightbox { padding: 6.5rem 1rem; }
html.touch-mode .lightbox button { width: 5rem; height: 5rem; font-size: 2.8rem; border-width: 3px; }
html.touch-mode .lb-close { top: 1rem; right: 1rem; }
html.touch-mode .lb-prev { left: 1rem; }
html.touch-mode .lb-next { right: 1rem; }
/* the bar at the bottom: Back · Home · Menu · Top */
html.touch-mode .tbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  height: calc(var(--tbar-h) + env(safe-area-inset-bottom, 0px)); padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: #1f4529; border-top: 4px solid var(--leaf); box-shadow: 0 -8px 24px rgba(31, 69, 41, .28); --focus: #f7dcb9; }
.tb { display: flex; align-items: center; justify-content: center; gap: .6rem; min-width: 0; min-height: 64px; padding: .2rem .5rem; border: 2px solid rgba(255, 255, 255, .4); border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: min(1.05rem, 28px); line-height: 1.15; text-align: center; text-decoration: none; }
.tb .i { width: 1.6em; height: 1.6em; }
.tb span { overflow-wrap: break-word; min-width: 0; }
.tb:hover, .tb:active { background: rgba(255, 255, 255, .2); color: #fff; }
.tb[disabled] { opacity: .45; cursor: default; background: transparent; }
.tb-menu[aria-expanded="true"] { background: var(--leaf); border-color: var(--leaf); color: #13240f; }
@media (max-width: 56em) {
  .tb { flex-direction: column; gap: .15rem; font-size: .85rem; }
  .tb .i { width: 1.45em; height: 1.45em; }
}
/* the full-screen menu of tiles (above the page, below the bar) */
html.touch-mode.tm-open { overflow: hidden; }
html.touch-mode .tmenu:not([hidden]) { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 70; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 1.1rem 0 1.75rem; }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 1.5rem; margin-bottom: 1rem; }
.tm-h { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.tm-h::before { content: ""; width: 1rem; height: 1rem; border-radius: 0 80% 0 80%; background: var(--leaf); flex: none; }
.tm-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 9.5rem, 230px), calc((100% - 4 * 16px) / 5 - 1px)), 1fr)); }
.tm-tiles li { margin: 0; }
.tm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; height: 100%; min-height: min(6.5rem, 170px); padding: .7em .6em; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--head); box-shadow: var(--shadow); font-weight: 700; font-size: min(1.08rem, 30px); line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.tm-tile svg { width: 2.2em; height: 2.2em; flex: none; color: var(--green); }
.tm-tile small { display: block; margin-top: .2em; font-size: .75em; font-weight: 600; color: var(--muted); }
.tm-tile:hover, .tm-tile:active { border-color: var(--green); background: #f5f9ec; color: var(--head); }
.tm-tile[aria-current="page"] { border-color: var(--leaf); box-shadow: inset 0 -6px 0 var(--leaf), var(--shadow); }
@media (max-height: 56em) {
  /* 1280x800 and similar: flatter tiles, so that more of the menu fits on one screen */
  .tm-tile { min-height: 64px; padding: .5em .6em; gap: .3em; }
  .tm-tile svg { width: 1.7em; height: 1.7em; }
  .tm-head { margin-bottom: .75rem; }
  .tm-more { margin-top: 1.1rem; padding-top: 1rem; }
}
.tm-more { display: grid; gap: 1.25rem 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--line); }
.tm-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font-weight: 700; color: var(--head); }
.tm-search .search-form { gap: 12px; }
.tm-lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tm-lang-list li { margin: 0; }
.tm-lang-list a { display: inline-flex; align-items: center; gap: .5rem; min-height: 64px; padding: .35rem 1.15rem; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--text); font-weight: 600; text-decoration: none; }
.tm-lang-list a b { font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.tm-lang-list a[aria-current="true"] { border-color: var(--green); background: var(--band-1); color: var(--green); }
.tm-exit { margin: 0; }
@media (min-width: 56em) {
  .tm-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .tm-exit { grid-column: 1 / -1; }
}
/* high contrast together with touch mode */
html.a11y-contrast.touch-mode .menu-btn { background: #ffe14d; border-color: #ffe14d; color: #000; }
html.a11y-contrast.touch-mode .tool { border-color: #fff; }
html.a11y-contrast.touch-mode .head-touch, html.a11y-contrast.touch-mode .text-more { background: #000; border-color: #ffe14d; color: #ffe14d; }
html.a11y-contrast .tbar { background: #000; border-top-color: #fff; box-shadow: none; --focus: #fff; }
html.a11y-contrast .tb { background: #000; border-color: #ffe14d; color: #ffe14d; }
html.a11y-contrast .tb[disabled] { border-color: #8a8a8a; color: #a8a8a8; opacity: 1; }
html.a11y-contrast .tb-menu[aria-expanded="true"] { background: #ffe14d; color: #000; }
html.a11y-contrast .tm-tile, html.a11y-contrast .tm-lang-list a { background: #000; border-color: #fff; color: #fff; }
html.a11y-contrast .tm-tile svg { color: #ffe14d; }
html.a11y-contrast .tm-tile small { color: #fff; }
html.a11y-contrast .tm-tile[aria-current="page"], html.a11y-contrast .tm-lang-list a[aria-current="true"] { border-color: #ffe14d; box-shadow: inset 0 -6px 0 #ffe14d; color: #ffe14d; }
html.a11y-contrast .tm-h::before { background: #ffe14d; }
@media print {
  .tbar, .tmenu, .disp, .nav-extra { display: none !important; }
  html.touch-mode body { padding-bottom: 0; }
}

/* ---------- 22 touch mode: back-to-home notice after inactivity (16 Oct 2026) ---------- */
.idle { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.5rem; background: rgba(20, 38, 25, .62); }
.idle[hidden] { display: none; }
.idle-card { width: min(40rem, 100%); max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--card); color: var(--text); border-radius: var(--radius); border-top: 8px solid var(--leaf); box-shadow: var(--shadow-lg); padding: 2rem 2rem 1.75rem; text-align: center; }
.idle-n { width: 6.5rem; height: 6.5rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--band-1); color: var(--green); font-family: var(--font-head); font-size: 3rem; font-weight: 700; line-height: 1; }
.idle-card h2 { margin: 0 0 .6rem; }
.idle-card p { margin: 0 auto 1.4rem; max-width: 32rem; }
.idle-card .idle-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin: 0; }
.idle-actions .btn { min-height: 4rem; padding-left: 1.6rem; padding-right: 1.6rem; font-size: 1.15em; }
html.idle-open { overflow: hidden; }
html.a11y-contrast .idle { background: rgba(0, 0, 0, .85); }
html.a11y-contrast .idle-card { background: #000; color: #fff; border: 3px solid #ffe14d; }
html.a11y-contrast .idle-n { background: #000; color: #ffe14d; border: 3px solid #ffe14d; }
@media print { .idle { display: none !important; } }
@media (max-height: 760px), (max-width: 40em) {
  .idle { padding: .75rem; }
  .idle-card { padding: 1.25rem 1.25rem 1.1rem; max-height: calc(100vh - 1.5rem); }
  .idle-n { width: 4.2rem; height: 4.2rem; font-size: 2rem; margin-bottom: .6rem; }
  .idle-card h2 { font-size: 1.45em; }
  .idle-card p { margin-bottom: 1rem; }
  .idle-actions .btn { min-height: 3.5rem; font-size: 1em; }
}