:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}html[data-theme=dark] body{background:#333333;color:#ecebe6}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* QARAVAN design system 2026-09 (tokens.css without @font-face, then components/bundle.css), copied unchanged */
/* QARAVAN — generated from tokens.json */
:root, [data-theme="light"] {
  --q-red: #ff3333; /* Brand red, sampled from the wordmark. Education & culture: its headline field (white headline, large text only: 3.6:1) and its dab. Never a ground for reading text and never small text: a red action is an ink button with a red dab. */
  --q-orange: #ff9933; /* Brand orange. Community: its headline field (ink headline, 5.9:1) and its dab; the few-seats-left mark. Text on orange is always ink; white on orange is 2.1:1. */
  --q-yellow: #f8f36e; /* Brand yellow: the Q&A final field, giant glyphs, and the Action & pride dab. Ink text on it (10.9:1). Its marks on white have no edge (2026-10). The wordmark's yellow letter keeps its own artwork colours. */
  --q-yellow-soft: #f9f694; /* Soft yellow: the Action & pride headline field, with an ink headline (11.2:1). Chosen over the brand yellow for large fields because it is calmer at full bleed; marks stay q-yellow. */
  --q-green: #66cc66; /* Brand green: the Switch when on, success marks, and the ink-text green button. Ink text on it (6.3:1); white on green is 2.0:1. Not an event category colour; covers may use it as a field. */
  --q-sky: #0099cc; /* Brand sky: Resource navigation (its headline field with a white headline, large text only: 3.3:1, and its dab), focus rings (3px solid, 3.3:1 on white) and link underlines. Never small text and never a ground for reading text: a sky action is an ink button with a sky dlag. */
  --q-purple: #7668aa; /* Brand purple. Support groups: its headline field (white headline, 4.9:1) and its dab. Like red and sky, a purple action is an ink button with a purple dab, so every coloured button reads the same way. */
  --q-black: #000000; /* Pure black: the wordmark's q on light surfaces, nothing else. Text and UI use q-ink. */
  --q-ink: #333333; /* Ink: all text and UI (borders, active tabs, the footer band, buttons) and the logo plaque («графит»). 12.6:1 on white. The one ground for white reading text besides photos. */
  --q-white: #ffffff; /* White: the page, cards, fields and the headline on purple, red and sky fields; text on ink and over photos. */
  --q-paper: var(--q-white); /* The page ground: white. Since the 2026-09-25 colour defaults the page and the cards are the same white (the warm paper #fffdf5 is retired), so cards are set off by the q-line hairline, not by a change of ground. */
  --q-muted: #5e5a53; /* Secondary text: the second-language line, hints, captions, placeholders, disabled labels. 6.9:1 on white, 5.6:1 on q-line. At least 15px in UI and 11px at phone size in artwork. */
  --q-line: #ece8de; /* The hairline: 1px dividers and card borders, inactive tracks, and the one fill for hover, pressed and disabled states. Decorative as an edge (1.2:1 on white), so never the only edge of a control (use q-edge). Ink text on it 10.3:1, q-muted 5.6:1. */
  --q-edge: #8a857b; /* Control edges that must be seen: unchecked boxes, input borders at rest, the off Switch track, disabled outline buttons. 3.7:1 on white (the 3:1 rule for boundaries). */
  --q-quiet: var(--q-line); /* Hover and pressed fills for outline and ghost controls, the active menu row (alias of q-line: one hairline colour for edges and quiet fills). */
  --q-disabled: var(--q-line); /* Disabled fills (buttons, inputs): alias of q-line. Pair with q-disabled-ink; disabled controls also lose their pointer. */
  --q-disabled-ink: var(--q-muted); /* Text on q-disabled: alias of q-muted (5.6:1). */
  --q-tab: var(--q-ink); /* The logo plaque (alias of q-ink, «графит»): off by default. Turned on by hand behind the wordmark on a busy photo, from the left edge with clear space equal to the letter a (space-logo-clear) above, below and after the letters. Level, square, never tilted or shadowed; it comes in this one colour. */
  --surface-page: var(--q-paper); /* Page background (alias of q-paper, which is white). */
  --surface-card: var(--q-white); /* Card and field background (alias of q-white). Cards take the q-line hairline, so they still read on the white page. */
  --surface-desk: #e9e6dc; /* Canvas backdrop behind artboards in design tools. Never inside a design. */
  --text-body: var(--q-ink); /* Body text color (alias of q-ink), on white and on q-line. */
  --text-muted: var(--q-muted); /* Muted text (alias of q-muted), on white and on q-line. */
  --accent: var(--q-sky); /* Focus rings (alias of q-sky): 3px solid, 3.3:1 on white. */
  --positive: var(--q-green); /* Success fills and the Switch on state (alias of q-green). Pair with a word: color alone never carries the meaning. */
  --danger: var(--q-red); /* Error and cancel marks (alias of q-red): the square before an error message, the invalid field's border (3.6:1). Error text itself is ink on white. */
  --link: var(--q-ink); /* Link text (alias of q-ink), weight 600–700, with a 2px q-sky underline; on hover the underline turns ink and thickens to 3px. */
  --surface-tab: var(--q-tab); /* The logo plaque ground (alias of q-tab). */
  --text-secondary-line: var(--q-muted); /* The second-language line (alias of q-muted) on white. Over photos and on ink it is white at 88%. */
  --shadow-card: none; /* Cards take a 1px q-line hairline instead of a shadow. */
  --shadow-pop: 0 18px 48px rgba(28,28,27,0.22); /* Dialogs and menus only: anything lifted above the page. */
}
:root {
  --space-1: 4px; /* Tightest step: label-to-hint gaps, pill nudges. */
  --space-2: 8px; /* Gap between pills, badges and icon plus label. */
  --space-3: 12px; /* Gap inside stacks: badge to title, alert rows. */
  --space-4: 16px; /* Card grid gaps, field stacks. */
  --space-5: 24px; /* Gap between blocks inside a section; dialog padding. */
  --space-6: 32px; /* Desktop page gutter; gap between content blocks. */
  --space-7: 48px; /* Section spacing on web pages. */
  --space-8: 64px; /* Largest step: space above a page footer, hero padding. */
  --space-logo-clear: 0.557em; /* The logo clear space: the height of the wordmark letter a (0.557 of the letter size), kept free above, below and after the letters, with or without the plaque. */
  --radius-sm: 0; /* Square. Was 8px: tiles, checkboxes, swatches. */
  --radius-md: 0; /* Square. Was 12px: inputs, selects, textareas. */
  --radius-lg: 0; /* Square. Was 16px: cards. */
  --radius-xl: 0; /* Square. Was 24px: dialogs and large panels. */
  --radius-pill: 0; /* Square. Was 999px: buttons, chips, badges, tabs. Pills are retired; a Radio dot stays round. */
  --text-xs: 12px; /* Fine print only; never under 12px in UI. */
  --text-sm: 15px; /* Second-language lines, hints, small buttons. */
  --text-base: 16px; /* Body copy. */
  --text-md: 18px; /* Lead lines, large buttons 19px. */
  --text-lg: 22px; /* Card and block titles. */
  --text-xl: 28px; /* Section titles. */
  --text-display: 40px; /* Display headlines. */
  --text-hero: 56px; /* Hero titles and Stat numerals. */
  --leading-tight: 1.08; /* Display and title line height. */
  --leading-body: 1.5; /* Body copy line height. */
  --tracking-display: -0.005em; /* Condensed headlines are set almost at zero; never squeeze letters to fit a shape (the shape grows instead). */
  --tracking-caps: 0.08em; /* Wide tracking for uppercase category labels and eyebrows. */
  --border-bold: 2px solid #333333; /* Outlined controls: inputs in focus, outline buttons, the RU/EN toggle. The source writes it over var(--q-ink). */
  --border-edge: 2px solid #8a857b; /* Resting control edges that must be visible (q-edge, 3.7:1 on white). */
  --border-hairline: 1px solid #ece8de; /* Dividers and card edges (q-line). */
  --font-brand: "Fira Sans", "FiraGO", "QV Sans A", "QV Sans R", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Fira Sans Condensed", "FiraGO", "QV Head A", "QV Head R", "Arial Narrow", "Fira Sans", Arial, sans-serif;
  --font-mark: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text-title-xl: 700 28px/1.12 var(--font-head); /* Section and slide titles (SectionHeader size lg). */
  --text-numeral: 800 56px/1 var(--font-head); /* Impact numbers (Stat) and the poster days, tabular figures: ink on white (the Stat's colour is the bar above it), white or ink on a colour field. Decoration: never the only place a fact appears. */
  --text-lead: 500 18px/1.4 var(--font-brand); /* The main description: the what, when and where in the main language. */
  --text-second-line: 400 15px/1.4 var(--font-brand); /* The secondary line: the title in the other language plus the first sentence of its description, in text-muted, after the main copy and before the practical block. Set lang on it. */
  --text-status: 600 16px/1.35 var(--font-brand); /* A status sentence moved into the practical block, once in both languages. */
  --text-caps: 700 14px/1.2 var(--font-head); /* Tracked capitals for section eyebrows and the «Key point» label, main language only; set text-transform uppercase. Event category names are sentence case, never caps. */
  --text-eyebrow: 600 13px/1 var(--font-head); /* Uppercase eyebrow after a colour dab (SectionHeader). */
  --text-button: 600 17px/1.15 var(--font-head); /* Button and action-bar labels (sm 15px, lg 19px). Worded as a step that works where the reader is. */
}
.hero {
  font-family: var(--font-head);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.display {
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.title-xl {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0;
}
.numeral {
  font-family: var(--font-head);
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--font-brand);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.second-line {
  font-family: var(--font-brand);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.status {
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.caps {
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.eyebrow {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.button {
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.01em;
}














/* ── base rules ── */
body {
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); font-weight: 600; text-decoration-color: var(--q-sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 3px; }

/* ── components (2026-09 revision): qv-* classes, every value from tokens.css ── */
:where([class*="qv-"]),:where([class*="qv-"]) *,:where([class*="qv-"]) *::before,:where([class*="qv-"]) *::after{box-sizing:border-box}
:where([class*="qv-"]) :where(h1,h2,h3,h4,p,figure,blockquote){margin:0}
:where([class*="qv-"]) :where(button,input,select,textarea){font:inherit;color:inherit}
:where([class*="qv-"]):focus-visible,:where([class*="qv-"]) :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qv-flag{display:inline-block;flex:none;width:.62em;height:.62em;background:var(--f,var(--q-ink))}
/* yellow disappears on white: every yellow mark keeps a thin ink edge */
.qv-flag.y{box-shadow:inset 0 0 0 1px var(--q-ink)}

/* ---- buttons: one geometry, three sizes; a colour fill only under ink text (orange, green, yellow); red, sky and purple
   are ink buttons with the colour as a flag at the left edge ---- */
.qv-btn{--bg:var(--q-ink);--fg:var(--q-white);--bd:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:8px 18px;
  border:2px solid var(--bd);border-radius:0;background:var(--bg);color:var(--fg);font:600 17px/1.15 var(--font-head);letter-spacing:.01em;text-align:left;cursor:pointer;
  transition:background-color .15s ease-out,box-shadow .15s ease-out,transform .05s}
.qv-btn:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.14)}
.qv-btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 999px rgba(0,0,0,.24)}
.qv-btn.sm{min-height:32px;padding:4px 12px;font-size:15px;gap:.4em}
.qv-btn.lg{min-height:52px;padding:10px 24px;font-size:19px}
.qv-btn.outline{background:transparent;color:var(--oc,var(--q-ink));--bd:var(--oc,var(--q-ink))}
.qv-btn.outline:hover{box-shadow:none;background:var(--q-line)}
.qv-btn.outline:active{background:var(--q-line);box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
.qv-btn.ghost{background:transparent;color:var(--q-ink);--bd:transparent;padding-inline:10px}
.qv-btn.ghost:hover{box-shadow:none;background:var(--q-line)}
.qv-btn:disabled,.qv-btn[aria-disabled="true"]{background:var(--q-disabled);color:var(--q-disabled-ink);--bd:var(--q-disabled);cursor:not-allowed;box-shadow:none;transform:none}
.qv-btn.outline:disabled{background:transparent;--bd:var(--q-edge);color:var(--q-muted)}
.qv-btn .qv-ico{width:1em;height:1em;flex:none}
.qv-btn.is-loading{cursor:progress}
/* working: three squares that light in turn (one indicator for buttons and panels; static when motion is reduced) */
.qv-dots{display:inline-flex;gap:3px;align-items:center}
.qv-dots i{width:5px;height:5px;background:currentColor;opacity:.25;animation:qpdot 1.2s ease-out infinite}
.qv-dots i:nth-child(2){animation-delay:.2s}.qv-dots i:nth-child(3){animation-delay:.4s}
@keyframes qpdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.qv-btn{transition:none}.qv-dots i{animation:none;opacity:.7}}
.qv-btn.c-red{--c:var(--q-red)}
.qv-btn.c-sky{--c:var(--q-sky)}
.qv-btn.c-purple{--c:var(--q-purple)}
.qv-btn.c-green{--bg:var(--q-green);--fg:var(--q-ink);--c:var(--q-green)}
.qv-btn.c-orange{--bg:var(--q-orange);--fg:var(--q-ink);--c:var(--q-orange)}
.qv-btn.c-yellow{--bg:var(--q-yellow);--fg:var(--q-ink);--bd:var(--q-ink);--c:var(--q-yellow)}
.qv-btn.c-green:hover,.qv-btn.c-orange:hover,.qv-btn.c-yellow:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.08)}
/* the flag: the colour as a bar at the left edge of an ink button (over the border) or inside an outline */
.qv-btn.flag{position:relative;--fw:8px;padding-left:calc(18px + var(--fw))}
.qv-btn.flag.sm{--fw:6px;padding-left:calc(12px + var(--fw))}
.qv-btn.flag.lg{--fw:10px;padding-left:calc(24px + var(--fw))}
.qv-btn.flag::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:var(--fw);background:var(--c)}
.qv-btn.outline.flag::before{left:0;top:0;bottom:0}
.qv-btn.outline.flag.c-yellow::before{box-shadow:1px 0 0 var(--q-ink)}
.qv-btn.flag:disabled::before,.qv-btn.flag[aria-disabled="true"]::before{background:var(--q-edge)}

/* ---- badges: white with a colour bar at the left, ink text; the underline variant carries the colour under the words ---- */
.qv-badge{--c:var(--q-ink);display:inline-flex;align-items:center;min-height:24px;padding:2px 8px 2px 12px;background:var(--q-white);border:1px solid var(--q-line);box-shadow:inset 4px 0 0 var(--c);color:var(--q-ink);font:600 13.5px/1.3 var(--font-brand);white-space:nowrap}
.qv-badge.y{border-left-color:var(--q-ink);box-shadow:inset 4px 0 0 var(--q-yellow),inset 5px 0 0 var(--q-ink)}
.qv-badge.u{background:linear-gradient(var(--c),var(--c)) left bottom/100% 4px no-repeat;border:0;box-shadow:none;padding:0 0 6px;min-height:0;font-weight:600;font-size:16px}
.qv-badge.u.y{background:linear-gradient(var(--q-yellow),var(--q-yellow)) 1px calc(100% - 1px)/calc(100% - 2px) 4px no-repeat,linear-gradient(var(--q-ink),var(--q-ink)) left bottom/100% 6px no-repeat;padding-bottom:8px}

/* ---- chips: the reply-word tiles. Selected: orange, green and yellow fill under ink text; red, sky, purple and ink are
   ink tiles with the colour flag at the left. Not selected: an ink outline on white with the colour flag. ---- */
.qv-chip{--c:var(--q-ink);position:relative;display:inline-flex;align-items:center;min-height:36px;padding:4px 14px 4px 22px;border:2px solid var(--q-ink);background:var(--q-ink);color:var(--q-white);font:700 15px/1.1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.qv-chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--c)}
.qv-chip.k{padding-left:14px}.qv-chip.k::before{display:none}
.qv-chip.fill{background:var(--c);border-color:var(--c);color:var(--q-ink);padding-left:14px}
.qv-chip.fill::before{display:none}
.qv-chip.fill.y{border-color:var(--q-ink)}
.qv-chip.off{background:var(--q-white);color:var(--q-ink)}
.qv-chip.off.y::before{box-shadow:1px 0 0 var(--q-ink)}
button.qv-chip{cursor:pointer}
button.qv-chip:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.1)}
button.qv-chip.off:hover{box-shadow:none;background:var(--q-line)}

/* ---- segmented tabs ---- */
.qv-tabs{display:inline-flex;border:2px solid var(--q-ink);background:var(--q-white)}
.qv-tab{min-height:40px;padding:6px 16px;border:0;background:transparent;color:var(--q-ink);font:600 16px/1.15 var(--font-head);letter-spacing:.01em;cursor:pointer}
.qv-tab+.qv-tab{box-shadow:inset 2px 0 0 var(--q-line)}
.qv-tab:hover{background:var(--q-line)}
.qv-tab[aria-selected="true"]{background:var(--q-ink);color:var(--q-white);box-shadow:none}
.qv-tab[aria-selected="true"]+.qv-tab{box-shadow:none}
.qv-tab:focus-visible{outline-offset:-5px;outline-color:var(--accent)}
.qv-tab[aria-selected="true"]:focus-visible{outline-color:var(--q-yellow)}

/* ---- checkbox, radio, switch: label is the target ---- */
.qv-check,.qv-radio,.qv-switch{display:inline-flex;align-items:center;gap:12px;min-height:32px;font:400 16px/1.35 var(--font-brand);cursor:pointer;position:relative}
.qv-check input,.qv-radio input,.qv-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.qv-box{flex:none;width:22px;height:22px;border:2px solid var(--q-ink);background:var(--q-white);display:grid;place-items:center}
.qv-check input:checked+.qv-box{background:var(--cf);border-color:var(--cf)}
.qv-check.y input:checked+.qv-box{border-color:var(--q-ink)}
.qv-box svg{width:14px;height:14px;opacity:0}
.qv-check input:checked+.qv-box svg{opacity:1}
.qv-check:hover .qv-box,.qv-radio:hover .qv-dot{box-shadow:0 0 0 4px var(--q-line)}
.qv-check input:focus-visible+.qv-box,.qv-radio input:focus-visible+.qv-dot,.qv-switch input:focus-visible+.qv-track{outline:3px solid var(--accent);outline-offset:2px}
.qv-dot{flex:none;width:22px;height:22px;border:2px solid var(--q-ink);border-radius:50%;background:var(--q-white);display:grid;place-items:center}
.qv-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cf);transform:scale(0);transition:transform .12s ease-out}
.qv-radio input:checked+.qv-dot::after{transform:scale(1)}
.qv-radio.y .qv-dot::after{box-shadow:inset 0 0 0 1px var(--q-ink)}
.qv-track{flex:none;width:46px;height:26px;border:2px solid var(--q-ink);background:var(--q-white);position:relative;transition:background-color .15s ease-out}
.qv-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--q-ink);transition:transform .15s ease-out}
.qv-switch input:checked+.qv-track{background:var(--q-green)}
.qv-switch input:checked+.qv-track::after{transform:translateX(20px)}
.qv-switch:hover .qv-track{box-shadow:0 0 0 4px var(--q-line)}

/* ---- fields: label, hint, control, error as one group ---- */
.qv-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.qv-label{font:600 15px/1.3 var(--font-brand);color:var(--q-ink)}
.qv-req{color:var(--q-ink);margin-left:2px}
.qv-hint{font:400 14px/1.4 var(--font-brand);color:var(--q-muted)}
.qv-err{display:flex;gap:8px;align-items:baseline;font:600 14px/1.4 var(--font-brand);color:var(--q-ink)}
.qv-err::before{content:"";flex:none;width:10px;height:10px;background:var(--q-red);transform:translateY(1px)}
.qv-input,.qv-select,.qv-textarea{width:100%;min-height:44px;padding:9px 12px;border:2px solid var(--q-edge);border-radius:0;background:var(--q-white);font:400 16px/1.4 var(--font-brand);color:var(--q-ink);transition:border-color .12s}
.qv-input::placeholder,.qv-textarea::placeholder{color:var(--q-muted)}
.qv-input:hover,.qv-select:hover,.qv-textarea:hover{border-color:var(--q-ink)}
.qv-input:focus-visible,.qv-select:focus-visible,.qv-textarea:focus-visible{border-color:var(--q-ink);outline:3px solid var(--accent);outline-offset:0}
.qv-input[aria-invalid="true"]{border-color:var(--q-red)}
.qv-input:disabled,.qv-select:disabled,.qv-textarea:disabled{background:var(--q-disabled);color:var(--q-disabled-ink);border-color:var(--q-line);cursor:not-allowed}
.qv-textarea{resize:vertical;min-height:96px}
.qv-selwrap{position:relative}
.qv-select{appearance:none;padding-right:40px;cursor:pointer}
.qv-selwrap svg{position:absolute;right:14px;top:50%;width:14px;height:14px;transform:translateY(-50%);pointer-events:none}
/* ddSelect: the design system's Select at rest, its Dropdown open (white panel, ink top edge, shadow-pop, 46px rows,
   hover in the hairline colour, the choice in 600 with a dab and a drawn check). */
.dd-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:9px 12px;border:2px solid var(--q-edge);border-radius:0;background:var(--q-white);color:var(--q-ink);font:400 16px/1.4 var(--font-brand);text-align:left;cursor:pointer}
.dd-btn:hover,.dd-btn[aria-expanded="true"]{border-color:var(--q-ink)}
.dd-btn:focus-visible{border-color:var(--q-ink);outline:3px solid var(--accent);outline-offset:0}
.dd-btn.empty .dd-val{color:var(--q-muted)}
.dd-val{flex:1;min-width:0}
.dd-chev{width:14px;height:14px;flex:none}.dd-btn[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.dd-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:min(440px,calc(100vh - 120px));overflow:auto;margin:0;padding:6px 0;list-style:none;background:var(--q-white);border:1px solid var(--q-line);border-top:4px solid var(--q-ink);box-shadow:0 18px 48px rgba(28,28,27,.22)}
.dd-list:focus{outline:none}
.dd-group{padding:14px 16px 6px 22px;font:600 12.5px/1.2 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--q-muted)}
.dd-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:46px;padding:10px 16px 10px 22px;color:var(--q-ink);font:500 17px/1.3 var(--font-brand);cursor:pointer;user-select:none}
.dd-opt.act{background:var(--q-line)}
.dd-list:focus-visible .dd-opt.act{outline:3px solid var(--accent);outline-offset:-3px}
.dd-opt[aria-selected="true"]{font-weight:600}
.dd-opt[aria-selected="true"]::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:4px;margin-top:-2px;background:var(--q-sky)}
.dd-txt{flex:1;min-width:0}
.dd-check{width:16px;height:16px;flex:none;visibility:hidden}.dd-opt[aria-selected="true"] .dd-check{visibility:visible}

/* ---- tooltip ---- */
.qv-tipwrap{position:relative;display:inline-flex}
.qv-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);background:var(--q-ink);color:var(--q-white);font:600 14px/1.35 var(--font-brand);padding:6px 10px;white-space:nowrap;z-index:5}
.qv-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--q-ink)}

/* ---- alert ---- */
/* white with a colour bar at the left: the colour marks the kind, the words stay ink on white */
.qv-alert{--c:var(--q-sky);display:flex;flex-direction:column;gap:4px;padding:14px 18px 15px 24px;background:var(--q-white);border:1px solid var(--q-line);box-shadow:inset 6px 0 0 var(--c);color:var(--q-ink);max-width:440px}
.qv-alert.y{border-left-color:var(--q-ink);box-shadow:inset 6px 0 0 var(--q-yellow),inset 7px 0 0 var(--q-ink)}
.qv-alert b{font:700 16px/1.3 var(--font-brand)}
.qv-alert div{font:400 15px/1.45 var(--font-brand)}

/* ---- dialog ---- */
.qv-backdrop{position:absolute;inset:0;background:rgba(28,28,27,.46);display:grid;place-items:center;padding:16px;z-index:10}
.qv-dialog{background:var(--q-white);width:min(100%,var(--w,440px));padding:26px 28px 24px;border-top:6px solid var(--q-ink);box-shadow:0 18px 48px rgba(28,28,27,.22);display:flex;flex-direction:column;gap:10px}
.qv-dialog h2{font:700 26px/1.1 var(--font-head)}
.qv-dialog .qv-dbody{font:400 16px/1.5 var(--font-brand)}
.qv-dialog .qv-dact{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}

/* ---- card ---- */
.qv-card{background:var(--q-white);border:1px solid var(--q-line);padding:var(--pad,22px)}
/* accent: a colour bar along the top of the white card */
.qv-card.acc{padding-top:calc(var(--pad,22px) + 6px);box-shadow:inset 0 6px 0 var(--c)}
.qv-card.acc.y{border-top-color:var(--q-ink);box-shadow:inset 0 6px 0 var(--q-yellow),inset 0 7px 0 var(--q-ink)}

/* ---- accordion ---- */
.qv-acc{--c:var(--q-sky);border-top:2px solid var(--q-ink)}
.qv-acc-item{border-bottom:1px solid var(--q-line)}
.qv-acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 14px 12px 14px;border:0;background:transparent;text-align:left;font:600 17px/1.35 var(--font-brand);cursor:pointer}
.qv-acc-h:hover{background:var(--q-line)}
/* the open question: a colour bar at its left, still ink on white */
.qv-acc-h[aria-expanded="true"]{box-shadow:inset 6px 0 0 var(--c);padding-left:22px}
.qv-acc.y .qv-acc-h[aria-expanded="true"]{box-shadow:inset 6px 0 0 var(--q-yellow),inset 7px 0 0 var(--q-ink)}
.qv-acc-h svg{width:16px;height:16px;flex:none;transition:transform .15s ease-out}
.qv-acc-h[aria-expanded="true"] svg{transform:rotate(180deg)}
.qv-acc-p{padding:12px 14px 20px;display:flex;flex-direction:column;gap:8px;max-width:640px}
.qv-acc-p .a{font:400 16px/1.5 var(--font-brand)}
.qv-acc-p .en{font:400 14px/1.45 var(--font-brand);color:var(--q-muted)}

/* ---- event type filter ---- */
.qv-filter{display:flex;flex-wrap:wrap;gap:8px}
.qv-fchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:2px solid var(--q-line);background:var(--q-white);font:600 15px/1.2 var(--font-brand);color:var(--q-ink);cursor:pointer}
.qv-fchip:hover{border-color:var(--q-ink)}
.qv-fchip[aria-pressed="true"]{background:var(--q-ink);border-color:var(--q-ink);color:var(--q-white)}

/* ---- stat ---- */
/* the number in ink; the colour is a bar above it */
.qv-stat{--c:var(--q-sky);display:flex;flex-direction:column}
.qv-stat::before{content:"";width:48px;height:6px;margin-bottom:18px;background:var(--c)}
.qv-stat.y::before{box-shadow:inset 0 0 0 1px var(--q-ink)}
.qv-stat .n{font:700 72px/.9 var(--font-head);letter-spacing:-.01em;color:var(--q-ink)}
.qv-stat .l{margin-top:14px;font:600 17px/1.35 var(--font-brand)}
.qv-stat .en{margin-top:6px;font:400 14px/1.45 var(--font-brand);color:var(--q-muted)}

/* ---- event card: one idea per line (category, title, when, where, one link); nothing side by side, nothing boxed ---- */
.qv-ev{background:var(--q-white);border:1px solid var(--q-line);display:flex;flex-direction:column;padding:22px 24px 20px;min-height:100%}
.qv-ev .type{display:flex;align-items:center;gap:8px;font:600 14px/1.25 var(--font-brand);color:var(--q-ink)}
.qv-ev .type .qv-flag{font-size:16px}
.qv-ev h3{margin-top:12px;font:700 24px/1.1 var(--font-head);letter-spacing:-.005em;text-wrap:balance}
.qv-ev .when{margin:14px 0 0;font:600 16px/1.3 var(--font-head);letter-spacing:.01em}
.qv-ev .place{margin:2px 0 0;font:400 15px/1.4 var(--font-brand);color:var(--q-muted)}
.qv-ev .foot{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.qv-ev-note{font:400 15px/1.3 var(--font-brand);color:var(--q-muted)}
.qv-ev-note.full{font-weight:600;color:var(--q-ink)}
.qv-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;font:600 16px/1.2 var(--font-brand);color:var(--q-ink);text-decoration:underline;text-decoration-color:var(--q-sky);text-decoration-thickness:2px;text-underline-offset:4px}
.qv-link:hover{text-decoration-color:currentColor;text-decoration-thickness:3px}
.qv-link svg{width:14px;height:14px}

/* ---- person card, quote ---- */
.qv-person{background:var(--q-white);border:1px solid var(--q-line);padding:18px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.qv-person .nm{font:700 23px/1.1 var(--font-head)}
.qv-person .rl{font:400 15px/1.4 var(--font-brand);color:var(--q-muted)}
.qv-quote{border-top:4px solid var(--c);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.qv-quote.y{box-shadow:0 -1px 0 var(--q-ink),inset 0 1px 0 var(--q-ink)}
.qv-quote blockquote{margin:0;font:400 21px/1.42 var(--font-brand)}
.qv-quote .by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:400 15px/1.4 var(--font-brand);color:var(--q-muted)}
.qv-quote .by b{font-weight:600;color:var(--q-ink)}

/* ---- section header ---- */
.qv-sh{display:flex;flex-direction:column;align-items:flex-start}
.qv-sh.center{align-items:center;text-align:center}
.qv-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase}
.qv-sh .t{margin-top:12px;font:700 46px/1.04 var(--font-head);letter-spacing:-.01em;text-wrap:balance}
.qv-sh.lg .t{font-size:32px;line-height:1.08;margin-top:10px}
.qv-sh .en{margin-top:14px;font:400 18px/1.5 var(--font-brand);color:var(--q-muted);max-width:40em}

/* ---- site header, footer, donate ---- */
.qv-hdr{display:flex;align-items:center;gap:28px;padding:14px 24px;background:var(--q-white);border-bottom:1px solid var(--q-line)}
.qv-hdr nav{display:flex;gap:4px;flex:1}
.qv-nav{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:600 16px/1.2 var(--font-brand);color:var(--q-ink);text-decoration:none;box-shadow:inset 0 -3px 0 transparent}
.qv-nav:hover{box-shadow:inset 0 -3px 0 var(--q-line)}
.qv-nav[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--c,var(--q-ink))}
.qv-nav.y[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--q-yellow),inset 0 -5px 0 var(--q-ink)}
.qv-hdr .end{display:flex;align-items:center;gap:12px;margin-left:auto}
.qv-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border:2px solid var(--q-ink);background:transparent;color:var(--q-ink);cursor:pointer}
.qv-iconbtn:hover{background:var(--q-line)}
.qv-iconbtn svg{width:18px;height:18px}
.qv-ftr{background:var(--q-ink);color:var(--q-white);padding:36px 32px 22px;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px 32px}
.qv-ftr .tag{margin-top:16px;font:400 15px/1.5 var(--font-brand);color:rgba(255,255,255,.82);max-width:26em}
.qv-ftr h4{font:600 13px/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.qv-ftr ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.qv-ftr a{display:inline-flex;min-height:32px;align-items:center;font:500 16px/1.3 var(--font-brand);color:var(--q-white);text-decoration:none}
.qv-ftr a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.qv-ftr .base{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font:400 14px/1.4 var(--font-brand);color:rgba(255,255,255,.8)}
.qv-ftr :focus-visible{outline-color:var(--q-yellow)}
/* white with a colour bar at the left; the ink tab slides in from the edge over it */
.qv-donate{--c:var(--q-red);position:relative;background:var(--q-white);border:1px solid var(--q-line);box-shadow:inset 6px 0 0 var(--c);padding:0 28px 28px 34px;display:flex;flex-direction:column;align-items:flex-start}
.qv-donate.y{border-left-color:var(--q-ink);box-shadow:inset 6px 0 0 var(--q-yellow),inset 7px 0 0 var(--q-ink)}
.qv-donate .tab{margin-left:-34px;background:var(--q-ink);color:var(--q-white);padding:9px 16px 10px 34px;font:600 14px/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase}
.qv-donate h3{margin-top:22px;font:700 30px/1.08 var(--font-head);letter-spacing:-.005em;text-wrap:balance}
.qv-donate .tx{margin-top:12px;font:500 16px/1.5 var(--font-brand)}
.qv-donate .en{margin-top:8px;font:400 14px/1.45 var(--font-brand);color:var(--q-muted)}
.qv-donate .act{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qv-amts{display:inline-flex;border:2px solid var(--q-ink);background:var(--q-white)}
.qv-amt{min-width:64px;min-height:48px;padding:0 14px;border:0;background:transparent;font:600 17px/1 var(--font-head);cursor:pointer}
.qv-amt+.qv-amt{box-shadow:inset 2px 0 0 var(--q-line)}
.qv-amt:hover{background:var(--q-line)}
.qv-amt[aria-checked="true"]{background:var(--q-ink);color:var(--q-white);box-shadow:none}
.qv-amt:focus-visible{outline-offset:-5px}

/* ---- forced states, for the states strips only ---- */
.qv-btn.is-hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.14)}
.qv-btn.outline.is-hover{box-shadow:none;background:var(--q-line)}
.qv-btn.is-active{transform:translateY(1px);box-shadow:inset 0 0 0 999px rgba(0,0,0,.24)}
.is-focus.qv-btn,.is-focus.qv-chip,.is-focus.qv-fchip{outline:3px solid var(--accent);outline-offset:2px}
.qv-tab.is-hover{background:var(--q-line)}
.qv-tab.is-focus{outline:3px solid var(--q-yellow);outline-offset:-5px}
.qv-input.is-hover{border-color:var(--q-ink)}
.is-focus.qv-input,.is-focus.qv-select,.is-focus.qv-textarea{border-color:var(--q-ink);outline:3px solid var(--accent);outline-offset:0}
.qv-check.is-hover .qv-box{box-shadow:0 0 0 4px var(--q-line)}
.qv-check.is-focus .qv-box,.qv-radio.is-focus .qv-dot,.qv-switch.is-focus .qv-track{outline:3px solid var(--accent);outline-offset:2px}
.qv-chip.off.is-hover{background:var(--q-line)}
.qv-fchip.is-hover{border-color:var(--q-ink)}
.qv-states{margin:4px 20px 22px;padding-top:14px;border-top:1px dashed var(--q-line)}
.qv-states-t{font:600 12.5px/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--q-muted);margin-bottom:12px}
.qv-states-g > div{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
.qv-st{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.qv-st-l{font:400 12.5px/1.2 var(--font-brand);color:var(--q-muted)}
.qv-st .qv-input,.qv-st .qv-textarea,.qv-st .qv-selwrap{width:180px}
.qv-ico20{width:20px;height:20px}

/* ---- the second language inside components: a quieter supporting line under the main text, still at reading size ---- */
.qv-label .qv-lsep{margin:0 .35em;color:var(--q-muted);font-weight:400}
.qv-acc-p .en{margin-top:8px;font:400 15px/1.45 var(--font-brand);color:var(--q-muted)}
.qv-stat .en{margin-top:4px;font:400 15px/1.35 var(--font-brand);color:var(--q-muted)}
.qv-donate .en{margin-top:8px;font:400 15px/1.45 var(--font-brand);color:var(--q-muted)}

/* ---- links styled as buttons; photo variants; the compact header's drawer; narrow screens ---- */
a.qv-btn{text-decoration:none}
a.qv-btn[aria-disabled="true"]{background:var(--q-disabled);color:var(--q-disabled-ink);--bd:var(--q-disabled);pointer-events:none}
.qv-ev.photo{position:relative;isolation:isolate;min-height:380px;justify-content:flex-end;background-color:var(--q-ink);background-size:cover;background-position:center;border-color:transparent;color:var(--q-white)}
.qv-ev.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(38,38,38,0) 15%,rgba(38,38,38,.74) 45%,rgba(38,38,38,.92) 100%)}
.qv-ev.photo .type,.qv-ev.photo h3,.qv-ev.photo .when{color:var(--q-white)}
.qv-ev.photo .place,.qv-ev.photo .qv-ev-note{color:rgba(255,255,255,.88)}
.qv-ev.photo .qv-ev-note.full{color:var(--q-white)}
.qv-ev.photo .foot{margin-top:0}
.qv-ev.photo .qv-link{color:var(--q-white)}
.qv-person.photo{position:relative;isolation:isolate;aspect-ratio:4/5;justify-content:flex-end;background-color:var(--q-ink);background-size:cover;background-position:center;border-color:transparent;color:var(--q-white)}
.qv-person.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(38,38,38,0) 40%,rgba(38,38,38,.85) 78%,rgba(38,38,38,.92) 100%)}
.qv-person.photo .rl{color:rgba(255,255,255,.88)}
.qv-home{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.qv-hdrwrap{background:var(--q-white);border-bottom:1px solid var(--q-line)}
.qv-hdrwrap .qv-hdr{border-bottom:0}
.qv-hdr.compact{padding:12px 16px}
.qv-drawer{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:4px 16px 20px}
.qv-drawer nav{display:flex;flex-direction:column;align-self:stretch;gap:0}
.qv-drawer .qv-nav{border-top:1px solid var(--q-line);box-shadow:none}
.qv-drawer .qv-nav[aria-current="page"]{box-shadow:inset 4px 0 0 var(--c,var(--q-ink))}
.qv-drawer .qv-nav.y[aria-current="page"]{box-shadow:inset 4px 0 0 var(--q-yellow),inset 5px 0 0 var(--q-ink)}
@media (max-width:640px){.qv-ftr{grid-template-columns:1fr;padding:28px 16px 20px}.qv-ftr .base{flex-direction:column;gap:6px}}

/* ---- Dropdown (2026-09-25): a square button, a panel with an ink top edge, the choice marked by a sky flag ---- */
/* Georgian comes from FiraGO (Fira Sans extended by the same designers): declared here as well as in tokens.css,
   so the language names render wherever bundle.css and the fonts folder are served. Kazakh letters are in Fira. */
@font-face{font-family:"FiraGO";src:url("/fonts/FiraGO-Regular-Georgian.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F}
@font-face{font-family:"FiraGO";src:url("/fonts/FiraGO-Medium-Georgian.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F}
@font-face{font-family:"FiraGO";src:url("/fonts/FiraGO-SemiBold-Georgian.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F}
@font-face{font-family:"FiraGO";src:url("/fonts/FiraGO-Bold-Georgian.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F}
.qv-dd{position:relative;display:inline-block;vertical-align:middle}
.qv-dd-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px 8px 14px;border:2px solid var(--q-ink);border-radius:0;background:transparent;color:var(--q-ink);font:600 16px/1.15 var(--font-head),"FiraGO";letter-spacing:.01em;text-align:left;cursor:pointer;transition:background-color .12s,color .12s}
.qv-dd-btn:hover{background:var(--q-line)}
.qv-dd-btn[aria-expanded="true"]{background:var(--q-ink);color:var(--q-white)}
.qv-dd-btn:disabled{background:var(--q-disabled);color:var(--q-disabled-ink);border-color:var(--q-line);cursor:not-allowed}
.qv-dd-btn .qv-dd-mark{width:18px;height:18px;flex:none}
.qv-dd-btn .qv-dd-chev{width:14px;height:14px;flex:none;margin-left:2px;transition:transform .15s}
.qv-dd-btn[aria-expanded="true"] .qv-dd-chev{transform:rotate(180deg)}
.qv-dd-val{white-space:nowrap}
.qv-dd.dark .qv-dd-btn{border-color:var(--q-white);color:var(--q-white)}
.qv-dd.dark .qv-dd-btn:hover{background:rgba(255,255,255,.12)}
.qv-dd.dark .qv-dd-btn[aria-expanded="true"]{background:var(--q-white);color:var(--q-ink)}
.qv-dd.dark .qv-dd-btn:focus-visible{outline-color:var(--q-yellow)}
.qv-dd-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:max(100%,248px);max-height:min(440px,calc(100vh - 72px));overflow:auto;margin:0;padding:6px 0;list-style:none;
  background:var(--q-white);border:1px solid var(--q-line);border-top:4px solid var(--q-ink);box-shadow:var(--shadow-pop,0 18px 48px rgba(28,28,27,.22));animation:qv-dd-in .12s ease-out}
.qv-dd.end .qv-dd-list{left:auto;right:0}
.qv-dd-list:focus,.qv-dd-list:focus-visible{outline:none}
.qv-dd-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:46px;padding:10px 16px 10px 22px;color:var(--q-ink);font:500 17px/1.3 var(--font-brand),"FiraGO";cursor:pointer;user-select:none}
.qv-dd-opt.act{background:var(--q-line)}
.qv-dd-opt[aria-selected="true"]{font-weight:600}
.qv-dd-opt[aria-selected="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--q-sky)}
.qv-dd-txt{flex:1;min-width:0}
.qv-dd-opt .qv-dd-check{width:16px;height:16px;flex:none;color:var(--q-ink)}
.qv-dd-list:focus-visible .qv-dd-opt.act{outline:3px solid var(--accent);outline-offset:-3px}
@keyframes qv-dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qv-dd-list{animation:none}.qv-dd-btn,.qv-dd-btn .qv-dd-chev{transition:none}}
@media (forced-colors:active){.qv-dd-opt[aria-selected="true"]::before{background:Highlight}.qv-dd-opt.act{outline:2px solid CanvasText;outline-offset:-2px}}


/* ==== Marks (2026-10): the coloured stripe at the left edge is retired. ====
   Colour is carried by hand marks drawn with one chisel-tip marker: the dab marks a block, the dot a list item, the tick
   something done or to take, the ring the one thing to notice, the highlight the key words, the star a condition, the
   arrow the next step. Each mark has one job; a piece uses at most two kinds and one ring. The yellow mark has no edge. */
:root{--q-m-dab-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M2.4 1.5 L11.2 0.7 L20.0 0.4 L28.8 0.2 L37.6 -0.6 L37.6 17.8 L28.8 18.2 L20.0 18.7 L11.2 18.2 L2.4 18.8 Z'/%3E%3C/svg%3E");--q-m-dab-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M2.0 0.8 L11.0 0.4 L20.0 0.5 L29.0 0.2 L38.0 -0.1 L38.0 17.9 L29.0 17.9 L20.0 18.2 L11.0 19.0 L2.0 18.8 Z'/%3E%3C/svg%3E");--q-m-dab-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M2.3 1.4 L11.2 0.5 L20.0 1.1 L28.8 0.6 L37.7 -0.3 L37.7 18.8 L28.8 18.2 L20.0 18.4 L11.2 18.7 L2.3 19.1 Z'/%3E%3C/svg%3E");--q-m-dot-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M14.9 17.2 Q14.9 17.2 12.0 17.7 Q9.1 18.2 6.5 17.1 Q3.9 16.0 2.6 13.9 Q1.4 11.7 1.2 9.2 Q1.0 6.6 3.0 4.6 Q5.0 2.7 7.9 2.3 Q10.9 1.9 13.5 2.9 Q16.1 3.9 17.4 6.1 Q18.6 8.3 18.2 10.6 Q17.8 12.9 16.3 15.1 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-dot-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M9.8 2.3 Q9.8 2.3 12.4 3.0 Q15.0 3.7 17.0 5.5 Q18.9 7.3 18.6 9.7 Q18.2 12.2 17.0 14.5 Q15.9 16.8 13.0 17.6 Q10.2 18.5 7.7 17.3 Q5.1 16.1 3.0 14.4 Q0.9 12.7 1.0 10.2 Q1.1 7.7 2.7 5.5 Q4.3 3.4 7.0 2.9 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-dot-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M18.6 10.6 Q18.6 10.6 17.8 12.9 Q16.9 15.1 14.6 16.6 Q12.3 18.1 9.5 17.6 Q6.7 17.0 4.7 15.5 Q2.6 13.9 1.9 11.7 Q1.2 9.4 1.9 7.0 Q2.6 4.5 5.3 3.6 Q8.0 2.6 10.8 2.4 Q13.7 2.2 15.9 3.9 Q18.1 5.6 18.4 8.1 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-tick-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' preserveAspectRatio='none'%3E%3Cpath d='M0.03 14.86 C0.01 15.77 1.69 16.76 2.52 17.71 C3.34 18.66 3.76 19.60 5.00 20.55 C6.24 21.51 8.69 23.84 9.96 23.45 C11.22 23.05 11.90 19.70 12.62 18.19 C13.33 16.69 13.63 15.68 14.24 14.42 C14.85 13.15 15.52 11.89 16.27 10.63 C17.02 9.36 17.83 8.10 18.73 6.83 C19.63 5.57 21.33 3.81 21.66 3.03 C21.99 2.25 21.49 1.75 20.72 2.15 C19.95 2.54 18.22 4.28 17.07 5.40 C15.91 6.51 14.82 7.66 13.80 8.84 C12.78 10.02 11.82 11.22 10.95 12.46 C10.07 13.70 9.03 15.22 8.54 16.28 C8.05 17.33 8.05 18.65 8.02 18.79 C8.00 18.93 8.80 17.82 8.37 17.14 C7.95 16.46 6.45 15.51 5.49 14.69 C4.53 13.87 3.52 12.21 2.61 12.24 C1.70 12.27 0.04 13.95 0.03 14.86 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-tick-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' preserveAspectRatio='none'%3E%3Cpath d='M-0.69 12.61 C-0.83 13.55 0.77 14.83 1.50 15.94 C2.22 17.05 2.53 18.10 3.68 19.27 C4.83 20.45 7.03 23.24 8.40 23.01 C9.77 22.77 10.99 19.36 11.89 17.85 C12.78 16.35 13.13 15.27 13.77 13.97 C14.41 12.68 15.07 11.38 15.74 10.07 C16.42 8.77 17.11 7.46 17.82 6.15 C18.54 4.84 19.84 2.99 20.02 2.20 C20.20 1.42 19.60 0.98 18.92 1.43 C18.23 1.87 16.90 3.70 15.92 4.85 C14.95 6.00 13.99 7.16 13.06 8.34 C12.13 9.51 11.23 10.69 10.35 11.89 C9.47 13.08 8.34 14.51 7.79 15.51 C7.25 16.51 7.11 17.77 7.09 17.89 C7.07 18.01 8.02 16.99 7.67 16.22 C7.33 15.44 5.91 14.23 5.02 13.24 C4.14 12.25 3.33 10.37 2.38 10.26 C1.42 10.16 -0.54 11.66 -0.69 12.61 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-tick-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' preserveAspectRatio='none'%3E%3Cpath d='M0.56 11.99 C0.54 12.96 2.29 14.35 3.16 15.54 C4.03 16.72 4.54 17.86 5.76 19.08 C6.98 20.30 9.08 23.10 10.47 22.86 C11.86 22.63 13.12 19.22 14.08 17.69 C15.04 16.16 15.49 15.03 16.24 13.70 C16.99 12.37 17.77 11.05 18.58 9.72 C19.39 8.39 20.23 7.07 21.10 5.74 C21.97 4.42 23.53 2.56 23.82 1.77 C24.11 0.98 23.60 0.54 22.87 0.98 C22.14 1.42 20.55 3.26 19.44 4.43 C18.34 5.60 17.26 6.78 16.21 7.99 C15.17 9.19 14.16 10.42 13.19 11.66 C12.22 12.90 11.01 14.35 10.38 15.43 C9.76 16.51 9.60 18.02 9.42 18.13 C9.24 18.25 9.83 17.00 9.31 16.13 C8.79 15.26 7.30 14.00 6.29 12.93 C5.29 11.86 4.23 9.88 3.27 9.72 C2.32 9.57 0.57 11.02 0.56 11.99 Z' fill='%23000'/%3E%3C/svg%3E");--q-m-star-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M9.7 2.3 L9.9 17.8' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3Cpath d='M3.4 6.3 L16.5 13.2' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3Cpath d='M15.9 6.0 L3.5 14.2' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3C/svg%3E");--q-m-star-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M10.3 2.1 L9.6 17.3' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3Cpath d='M2.8 7.1 L16.6 13.1' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3Cpath d='M16.2 6.0 L4.0 13.8' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3C/svg%3E");--q-m-arrow-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26' preserveAspectRatio='none'%3E%3Cpath d='M4.0 2.2 C3.6 15.6 13.5 21.3 31.0 20.0' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M23.4 12.7 L32.4 19.8 L23.0 27.3' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1.00'/%3E%3C/svg%3E");--q-m-hl-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M11.7 2.9 L34.7 2.0 L57.8 3.4 L80.8 1.4 L103.8 2.1 L126.9 1.7 L149.9 1.6 L173.0 0.7 L196.0 0.3 L196.0 34.4 L161.3 34.0 L138.2 34.8 L115.2 35.0 L92.2 36.4 L69.1 36.0 L46.1 35.6 L23.0 35.8 L0.0 36.7 Z'/%3E%3C/svg%3E");--q-m-hl-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M7.2 2.3 L30.8 2.2 L54.4 2.8 L78.0 1.4 L101.6 1.6 L125.2 1.0 L148.8 2.2 L172.4 1.0 L196.0 0.3 L196.0 34.5 L165.2 35.6 L141.6 35.0 L118.0 36.2 L94.4 35.6 L70.8 35.7 L47.2 37.2 L23.6 35.8 L-0.0 37.8 Z'/%3E%3C/svg%3E");--q-m-hl-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M8.6 3.8 L32.1 2.9 L55.5 2.4 L78.9 2.4 L102.3 2.4 L125.7 1.7 L149.2 0.3 L172.6 1.7 L196.0 -0.4 L196.0 33.7 L163.9 34.1 L140.5 34.9 L117.1 35.7 L93.7 35.0 L70.3 35.3 L46.8 36.3 L23.4 37.4 L-0.0 36.1 Z'/%3E%3C/svg%3E");--q-m-ring-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M29.3 16.8 L49.0 11.0 L72.7 7.7 L97.6 7.1 L121.4 8.8 L142.3 12.5 L159.9 17.5 L174.1 23.5 L184.5 30.5 L190.3 38.3 L190.5 46.6 L183.7 54.8 L169.9 62.1 L150.0 67.5 L126.2 70.5 L101.2 70.7 L77.6 68.7 L56.8 64.7 L39.3 59.4 L25.4 53.0 L15.2 45.8 L9.5 37.7 L9.7 29.1 L16.7 20.7 L30.9 13.3 L51.1 7.7 L75.0 4.7' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--q-m-ring-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M41.4 17.8 L60.1 13.2 L81.1 9.9 L104.2 8.3 L128.3 8.7 L151.8 11.4 L172.1 16.6 L186.7 23.7 L193.9 32.1 L193.5 40.6 L186.3 48.6 L173.9 55.5 L157.8 61.0 L139.0 65.3 L117.8 68.3 L94.7 69.6 L70.5 68.9 L47.2 65.8 L27.1 60.3 L12.8 52.8 L5.9 44.2 L6.7 35.4 L14.2 27.2 L26.8 20.2 L43.0 14.4 L61.9 9.9 L83.2 6.8' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.qv-mark{display:inline-block;flex:none;vertical-align:-.08em;background:var(--c,var(--q-ink));-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-mark.dab{--m:var(--q-m-dab-a);width:1.45em;height:.72em;margin-right:.5em}
.qv-mark.dab.v2{--m:var(--q-m-dab-b)} .qv-mark.dab.v3{--m:var(--q-m-dab-c)}
.qv-mark.dot{--m:var(--q-m-dot-a);width:.5em;height:.5em;margin-right:.55em;vertical-align:.08em}
.qv-mark.dot.v2{--m:var(--q-m-dot-b)} .qv-mark.dot.v3{--m:var(--q-m-dot-c)}
.qv-mark.tick{--m:var(--q-m-tick-a);width:1.1em;height:1em;margin-right:.5em;vertical-align:-.16em}
.qv-mark.tick.v2{--m:var(--q-m-tick-b)} .qv-mark.tick.v3{--m:var(--q-m-tick-c)}
.qv-mark.star{--m:var(--q-m-star-a);width:.62em;height:.62em;margin-right:.4em;vertical-align:.12em}
.qv-mark.star.v2{--m:var(--q-m-star-b)}
.qv-mark.arrow{--m:var(--q-m-arrow-a);width:1.5em;height:1.08em;margin-right:.45em;vertical-align:-.12em}
/* the highlight: translucent marker behind the words, ink letters on top; strength per colour keeps the ink at 3.4:1 or more.
   For short phrases in large type only (22px bold and up). */
.qv-hl{--c:var(--q-yellow);--p1:100%;--p2:92%;--p3:60%;position:relative;isolation:isolate;white-space:nowrap}
.qv-hl::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.22em;top:.06em;bottom:-.04em;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) var(--p1),transparent),color-mix(in srgb,var(--c) var(--p2),transparent) 70%,color-mix(in srgb,var(--c) var(--p3),transparent));
  --m:var(--q-m-hl-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-hl.v2::before{--m:var(--q-m-hl-b)} .qv-hl.v3::before{--m:var(--q-m-hl-c)}
.qv-hl.c-orange{--p1:95%;--p2:87%;--p3:57%} .qv-hl.c-green{--p1:92%;--p2:85%;--p3:55%} .qv-hl.c-sky{--p1:90%;--p2:83%;--p3:54%}
.qv-hl.c-red{--p1:88%;--p2:81%;--p3:53%} .qv-hl.c-purple{--p1:78%;--p2:72%;--p3:47%}
/* the ring: a loose hand circle around the one thing to notice */
.qv-ring{--c:var(--q-red);position:relative;display:inline-block;padding:0 .18em}
.qv-ring::after{content:"";position:absolute;left:-.32em;right:-.32em;top:-.32em;bottom:-.3em;pointer-events:none;background:var(--c);--m:var(--q-m-ring-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-ring.v2::after{--m:var(--q-m-ring-b)}
/* lists: .qv-list-dots > li (equal items, a dot each), .qv-list-ticks > li (done or to take, a tick each) */
.qv-list-dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.qv-list-dots>li{display:flex;align-items:baseline}
.qv-list-dots>li::before{content:"";flex:none;width:.5em;height:.5em;margin-right:.6em;transform:translateY(-.05em);background:var(--c,var(--q-ink));--m:var(--q-m-dot-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-list-dots>li:nth-child(3n+2)::before{--m:var(--q-m-dot-b)} .qv-list-dots>li:nth-child(3n)::before{--m:var(--q-m-dot-c)}
.qv-list-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em}
.qv-list-ticks>li{display:flex;align-items:baseline}
.qv-list-ticks>li::before{content:"";flex:none;width:1.1em;height:1em;margin-right:.55em;transform:translateY(.15em);background:var(--c,var(--q-green));--m:var(--q-m-tick-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-list-ticks>li:nth-child(3n+2)::before{--m:var(--q-m-tick-b)} .qv-list-ticks>li:nth-child(3n)::before{--m:var(--q-m-tick-c)}

/* the stripe replaced: a dab at the start of the first line */
.qv-alert,.qv-alert.y{box-shadow:none;border-left-color:var(--q-line);padding-left:18px}
.qv-alert>:first-child::before{content:"";display:inline-block;width:1.45em;height:.72em;margin-right:.55em;vertical-align:-.06em;background:var(--c);--m:var(--q-m-dab-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-alert:nth-of-type(3n+2)>:first-child::before{--m:var(--q-m-dab-b)} .qv-alert:nth-of-type(3n)>:first-child::before{--m:var(--q-m-dab-c)}
.qv-badge,.qv-badge.y{box-shadow:none;border-left-color:var(--q-line);padding-left:8px}
.qv-badge::before{content:"";display:inline-block;width:1.15em;height:.58em;margin-right:.45em;background:var(--c);--m:var(--q-m-dab-b);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-acc-h[aria-expanded="true"],.qv-acc.y .qv-acc-h[aria-expanded="true"]{box-shadow:none;padding-left:14px}
.qv-acc-h[aria-expanded="true"]>:first-child::before{content:"";display:inline-block;width:1.4em;height:.7em;margin-right:.55em;vertical-align:-.05em;background:var(--c);--m:var(--q-m-dab-c);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-donate,.qv-donate.y{box-shadow:none;border-left-color:var(--q-line)}
.qv-donate h3::before{content:"";display:inline-block;width:1.2em;height:.6em;margin-right:.4em;vertical-align:.08em;background:var(--c);--m:var(--q-m-dab-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.qv-drawer .qv-nav[aria-current="page"],.qv-drawer .qv-nav.y[aria-current="page"]{box-shadow:none}
.qv-drawer .qv-nav[aria-current="page"]::before{content:"";display:inline-block;width:1.2em;height:.6em;margin-right:.5em;background:var(--c,var(--q-ink));--m:var(--q-m-dab-b);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
/* buttons: no colour flag on the edge; a coloured button that cannot be a fill gets a dab before its label */
.qv-btn.flag{padding-left:18px} .qv-btn.flag.sm{padding-left:12px} .qv-btn.flag.lg{padding-left:24px}
.qv-btn.flag::before,.qv-btn.outline.flag::before,.qv-btn.outline.flag.c-yellow::before{position:static;display:inline-block;flex:none;width:1.2em;height:.6em;margin-right:.55em;left:auto;top:auto;bottom:auto;box-shadow:none;background:var(--c);--m:var(--q-m-dab-a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}

/* the flag mark (SectionHeader eyebrow, menus, filters) is a dab too (2026-10); yellow has no edge */
.qv-flag{width:1.3em;height:.65em;-webkit-mask:var(--q-m-dab-a) center/100% 100% no-repeat;mask:var(--q-m-dab-a) center/100% 100% no-repeat}
.qv-flag.y{box-shadow:none}

/* chips: the 8px bar becomes a dab before the label; yellow marks have no ink edge (2026-10) */
.qv-chip::before{position:static;display:inline-block;flex:none;width:1.15em;height:.58em;margin-right:.45em;left:auto;top:auto;bottom:auto;box-shadow:none;background:var(--c);-webkit-mask:var(--q-m-dab-c) center/100% 100% no-repeat;mask:var(--q-m-dab-c) center/100% 100% no-repeat}
.qv-chip.off.y::before{box-shadow:none}
.qv-card.acc.y{border-top-color:var(--q-line);box-shadow:inset 0 6px 0 var(--q-yellow)}
.qv-quote.y{box-shadow:none}
.qv-chip{padding-left:12px}
.qv-btn.flag::before,.qv-btn.outline.flag::before{margin-right:0}

/* Layout: photo-led pages on a 1200px grid. Full-bleed photos carry white headlines on the system's one shade; brand colours appear as headline fields and flags; reading text stays ink on white. */
/* QARAVAN design system, 2026-09 revision: one deliberate light theme (the brand is six colours on white). */
@font-face{font-family:"Fira Sans";src:url("/fonts/FiraSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("/fonts/FiraSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("/fonts/FiraSans-SemiBold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Fira Sans Condensed";src:url("/fonts/FiraSansCondensed-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fira Sans Condensed";src:url("/fonts/FiraSansCondensed-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
/* While Fira is still loading (a slow phone connection), text is drawn in the phone's own Arial or Roboto, sized to take the same width as Fira, so
   nothing jumps when Fira arrives (owner, 2026-11-07: "not moving in different directions"). Widths measured against the real files, on English and Russian lines
   of the site: Fira Sans Condensed Bold is 85.4% of Arial Bold, and of Roboto Bold 91.6% in Latin, 88.5% in Cyrillic (so Roboto has a face per script);
   Fira Sans regular is about Arial's and Roboto's width; Fira Sans SemiBold 93.9% of Arial Bold. Ascent and descent are Fira's (0.935, 0.265) over the size. A phone without Arial (Android) skips to the Roboto face; Liberation Sans (Linux) has Arial's widths. */
@font-face{font-family:"QV Head A";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:100 900;size-adjust:85.4%;ascent-override:109.5%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:"QV Head R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;size-adjust:91.6%;ascent-override:102.1%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:"QV Head R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;size-adjust:88.5%;ascent-override:105.6%;descent-override:29.9%;line-gap-override:0%;unicode-range:U+0400-052F,U+1C80-1C8F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:"QV Sans A";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");font-weight:100 550;size-adjust:100.6%;ascent-override:92.9%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:"QV Sans A";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:551 900;size-adjust:93.9%;ascent-override:99.6%;descent-override:28.2%;line-gap-override:0%}
@font-face{font-family:"QV Sans R";src:local("Roboto"),local("Roboto-Regular");font-weight:100 550;size-adjust:102%;ascent-override:91.7%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"QV Sans R";src:local("Roboto"),local("Roboto-Regular");font-weight:100 550;size-adjust:98.9%;ascent-override:94.5%;descent-override:26.8%;line-gap-override:0%;unicode-range:U+0400-052F,U+1C80-1C8F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:"QV Sans R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:551 900;size-adjust:100.6%;ascent-override:92.9%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:"QV Sans R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:551 900;size-adjust:97.3%;ascent-override:96.1%;descent-override:27.2%;line-gap-override:0%;unicode-range:U+0400-052F,U+1C80-1C8F,U+2DE0-2DFF,U+A640-A69F}
:root{
  color-scheme:light;
  --red:#ff3333; --orange:#ff9933; --yellow:#f8f36e; --yellow-soft:#f9f694; --green:#66cc66; --sky:#0099cc; --purple:#7668aa;
  --ink:#333333; --white:#ffffff; --muted:#5e5a53; --line:#ece8de; --edge:#8a857b; --on-dark:rgba(255,255,255,.88);
  --shade:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.84) 100%);
  --font-brand:"Fira Sans","QV Sans A","QV Sans R","Helvetica Neue",Arial,sans-serif;
  --font-head:"Fira Sans Condensed","QV Head A","QV Head R","Arial Narrow","Fira Sans",Arial,sans-serif;
  --gut:16px;
}
@media (min-width:720px){:root{--gut:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:manipulation; scroll-padding-top:96px}
/* Phones hold still (owner, 2026-11-07: "not resizing easily and moving in different directions"): no double-tap zoom (touch-action above; pinch zoom
   stays, people who need it keep it), form fields 16 px or more (iOS zooms in on a smaller field and stays zoomed), and the page never pans sideways:
   on the root only, so scrollWidth still shows an overflow to the checks and the sticky header keeps working */
@media (pointer:coarse){ html{overflow-x:hidden; overflow-x:clip} }
body{margin:0; background:var(--white); color:var(--ink); font:400 17px/1.55 var(--font-brand); -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--white)}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit}
img{display:block; max-width:100%}
button,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--sky); outline-offset:2px}
::selection{background:var(--line); color:var(--ink)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; left:16px; top:-100px; z-index:100; background:var(--ink); color:var(--white); border:0; padding:12px 16px; font:600 16px/1 var(--font-brand); cursor:pointer} .skip:focus{top:16px}
.wrap{max-width:calc(1200px + 2 * var(--gut)); margin:0 auto; padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
.narrow{max-width:calc(760px + 2 * var(--gut))}

/* Marks and fields */
.flag{display:inline-block; flex:none; width:.62em; height:.62em; background:var(--f,var(--ink))}
.flag.y{box-shadow:inset 0 0 0 1px var(--ink)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 13px/1.2 var(--font-head); letter-spacing:.1em; text-transform:uppercase}
.eyebrow .flag{font-size:16px}
.dab{position:relative; padding-left:22px}
.dab{padding-left:calc(1.45em + .5em)} .dab::before{content:""; position:absolute; left:0; top:.36em; width:1.45em; height:.72em; background:var(--f,var(--sky)); -webkit-mask:var(--q-m-dab-a) center/100% 100% no-repeat; mask:var(--q-m-dab-a) center/100% 100% no-repeat}
.f-purple{background:var(--purple); color:var(--white)} .f-sky{background:var(--sky); color:var(--white)} .f-red{background:var(--red); color:var(--white)}
.f-orange{background:var(--orange); color:var(--ink)} .f-yellow{background:var(--yellow-soft); color:var(--ink)} .f-green{background:var(--green); color:var(--ink)}
.f-ink{background:var(--ink); color:var(--white)}
.f-purple{--f:var(--purple)} .f-sky{--f:var(--sky)} .f-red{--f:var(--red)} .f-orange{--f:var(--orange)} .f-yellow{--f:var(--yellow)} .f-green{--f:var(--green)} .f-ink{--f:var(--ink)}
/* Quiet cards: colour is a 4px rule on top, not a block (colour blocks stay for program tiles and one highlight per page) */
.role-card .rf, .tf, .need .nf, .poster .pf{background:none; color:var(--ink); box-shadow:inset 0 4px 0 var(--f)}

/* Type */
.h-hero{font:700 40px/1.04 var(--font-head); letter-spacing:-.01em; text-wrap:balance}
.h-display{font:700 30px/1.08 var(--font-head); letter-spacing:-.006em; text-wrap:balance}
.h-title{font:700 24px/1.12 var(--font-head); letter-spacing:-.005em; text-wrap:balance}
.h-card{font:700 20px/1.15 var(--font-head); letter-spacing:-.003em; text-wrap:balance}
.lead{font:400 18px/1.55 var(--font-brand); max-width:36em}
.muted{color:var(--muted)}
.small{font-size:15px; line-height:1.45}
@media (min-width:720px){ .h-hero{font-size:52px} .h-display{font-size:40px} .h-title{font-size:28px} .lead{font-size:19px} }
@media (min-width:1100px){ .h-hero{font-size:60px} }
.prose{max-width:40em; display:grid; gap:16px; font-size:17px; line-height:1.6}
.prose a, .tlink{font-weight:600; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}

/* Buttons */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:10px 22px; border:2px solid var(--ink); background:var(--ink); color:var(--white);
  font:600 19px/1.15 var(--font-head); letter-spacing:.01em; text-decoration:none; cursor:pointer}
.btn:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.18)}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px; height:14px; flex:none}
.btn.out{background:var(--white); color:var(--ink)}
.btn.out:hover{box-shadow:none; background:var(--line)}
.btn.light{background:var(--white); color:var(--ink); border-color:var(--white)}
.btn.light:hover{box-shadow:none; background:var(--line)}
.btn.ghost{background:transparent; color:var(--white); border-color:var(--white)}
.btn.ghost:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.14)}
.btn.sm{min-height:42px; padding:6px 14px; font-size:16px}
.go{display:inline-flex; align-items:center; gap:8px; min-height:24px; font:600 18px/1.2 var(--font-head); letter-spacing:.01em; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:5px}
@media (pointer:coarse){ .go{min-height:44px} .crumbs .go{min-height:32px} }
.go:hover{text-decoration-color:currentColor; text-decoration-thickness:3px}
.go svg{width:14px; height:14px; flex:none}
.on-photo :focus-visible, .f-ink :focus-visible, .ink :focus-visible{outline-color:var(--white)}

/* Prototype strip and header */
.proto{background:var(--ink); color:var(--white); font:400 14px/1.35 var(--font-brand)}
.proto .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; min-height:36px; padding-block:6px}
.proto b{font:600 13px/1.2 var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--white)}
/* the team's Edit button (editStub): a white ring so it still shows over the ink footer */
.qv-edit-btn{position:fixed; left:16px; bottom:16px; z-index:70; min-height:44px; padding:10px 16px; background:var(--ink); color:var(--white); border:0; font:600 16px/1 var(--font-head); letter-spacing:.02em; cursor:pointer; box-shadow:0 0 0 2px var(--white)} .qv-edit-btn:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
/* the button sits in a box with its "×" (owner, 2026-11-05: "make it possible to hide it"): hidden on this device until the switch on /manage/ or My profile turns it back on */
.qv-edit-box{position:fixed; left:16px; bottom:16px; z-index:70; display:flex; gap:2px} .qv-edit-box .qv-edit-btn{position:static}
.nav .qv-edit-in{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 12px; background:none; border:0; color:var(--ink); font:600 17px/1.15 var(--font-head); letter-spacing:.01em; cursor:pointer; text-decoration:underline dotted 2px; text-underline-offset:5px}
.nav .qv-edit-in:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
/* tablet widths: the pencil alone (its word stays for screen readers), so the Russian header never runs past the screen (Team G's review: 1024 px) */
/* the word next to the pencil from 1240 px (the quick exit no longer takes the room, 2026-11-05); below 1024 the menu folds, and in it the word always shows (Team G's review) */
@media (min-width:1024px) and (max-width:1239px){ .nav .qv-edit-in{padding:6px 10px; min-width:44px; justify-content:center} .nav .qv-edit-in span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} }
.qv-edit-x{min-width:44px; min-height:44px; padding:0; background:var(--ink); color:var(--white); border:0; font:600 22px/1 var(--font-head); cursor:pointer; box-shadow:0 0 0 2px var(--white)} .qv-edit-x:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
.qv-edit-note{position:fixed; left:16px; bottom:16px; z-index:70; max-width:min(440px, calc(100vw - 32px)); padding:12px 16px; background:var(--ink); color:var(--white); font-size:15px; line-height:1.45; box-shadow:0 0 0 2px var(--white)}
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--white); border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:20px; min-height:72px}
.home{display:inline-flex; align-items:center; min-height:44px; flex:none}
.home img{width:140px; height:auto}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{display:inline-flex; align-items:center; min-height:44px; padding:6px 12px; font:600 17px/1.15 var(--font-head); letter-spacing:.01em; text-decoration:none}
.nav a:hover{background:var(--line)}
.nav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--ink)}
.hdr-end{display:flex; align-items:center; gap:12px; flex:none}
.tabs{display:inline-flex; border:2px solid var(--ink)}
.tab{min-height:40px; min-width:46px; padding:6px 12px; border:0; background:var(--white); color:var(--ink); font:600 16px/1.15 var(--font-head); cursor:pointer; text-decoration:none; display:grid; place-items:center}
.tab+.tab{box-shadow:inset 2px 0 0 var(--line)}
.tab:hover{background:var(--line)}
.tab[aria-current="true"]{background:var(--ink); color:var(--white); box-shadow:none}
.menu{display:none; width:44px; height:44px; border:2px solid var(--ink); background:var(--white); cursor:pointer; place-items:center; padding:0}
.menu svg{width:18px; height:18px}
.hdr .btn.sm{min-height:44px}
@media (max-width:1023px){
  .hdr .wrap{flex-wrap:wrap; gap:12px}
  .nav{order:5; display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; margin:0 0 12px; border-top:2px solid var(--ink)}
  .hdr.open .nav{display:flex}
  .hdr.open .wrap{padding-top:12px}   /* the first row stays where it was when the menu opens (it jumped up 12 px) */
  .nav a{min-height:52px; border-bottom:1px solid var(--line); font-size:20px}
  .nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--q-yellow); text-decoration-thickness:4px; text-underline-offset:6px}
  .hdr-end{margin-left:auto}
  .menu{display:grid}
  .hdr-end{gap:8px}
  .hdr .btn.sm.hdr-cta{padding:6px 14px; font-size:17px}
}
/* Phones up to 560 px (430 px iPhones included): one header row, the other language only (owner, 2026-11-03: two rows at 430 px). */
@media (max-width:560px){ .home img{width:100px} .hdr .wrap{gap:10px; flex-wrap:nowrap} .hdr-end{gap:6px} .tab{min-width:44px; padding:6px 8px} .tab[aria-current="true"]{display:none} .hdr .btn.sm.hdr-cta{padding:6px 10px; font-size:16px}
  /* the open menu drops to its own row again (nowrap squeezed it into the first row, wider than the screen); the one language box as tall as Donate and the menu button, 44 px, not 48 */
  .hdr.open .wrap{flex-wrap:wrap; padding-top:14px} .hdr .tabs{border:0} .hdr .tab{min-height:44px; border:2px solid var(--ink); box-shadow:none} }
@media (max-width:370px){ .home img{width:88px} .hdr .btn.sm.hdr-cta{font-size:15px; padding:6px 8px} }
@media (max-width:330px){ .hdr-cta{display:none} }

/* Sections */
main{display:block; min-height:60vh}
/* Spacing scale: --sec between blocks and inside colour bands, --blk between parts of one block, --head from a heading to its content, --gap for small steps. */
:root{--sec:64px; --blk:40px; --head:32px; --gap:20px}
@media (min-width:720px){ :root{--sec:120px; --blk:64px; --head:48px; --gap:24px} }
section{padding-block:calc(var(--sec) / 2)}
section.ink{padding-block:var(--sec)}
section.split{padding:0}
:is(.ink, .split, .fhead) + section:not(.ink):not(.split):not(.intro){padding-top:var(--sec)}
section:not(.ink):not(.split):not(.fhead):has(+ :is(.ink, .split)){padding-bottom:var(--sec)}
#main > section:last-child:not(.ink):not(.split){padding-bottom:var(--sec)}
.fhead + .intro{padding-top:var(--blk)}
.fhead + section:not(.ink):not(.split):not(.intro){padding-top:var(--blk)}
.sec-head{display:grid; gap:16px; margin-bottom:var(--head); max-width:44em}
.mt-blk{margin-top:var(--blk)} .mt-sec{margin-top:var(--sec)} .mb-gap{margin-bottom:var(--gap)}
.h-sub{margin:var(--blk) 0 var(--head)}
.chips-bar{margin:var(--blk) 0 var(--gap)}
.mt-blk > .eyebrow:first-child{margin-bottom:var(--gap)}
.give{align-items:stretch; gap:32px}
.ask{display:grid; align-content:start; border:1px solid var(--line)} .ask-f{margin:0; padding:28px 24px; font:700 28px/1.12 var(--font-head); color:var(--white)} .ask-b{display:grid; gap:14px; padding:24px; font-size:17px; line-height:1.55} .ask-b .btns{margin-top:8px}
@media (min-width:720px){ .ask-f{font-size:36px; padding:36px 32px} .ask-b{padding:28px 32px} }
@media (max-width:719px){ .shop3{grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--line)} .shop3 .pcard{display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:center; padding:12px 0; border:0; border-bottom:1px solid var(--line)} .shop3 .img img{aspect-ratio:1; object-fit:cover} .shop3 .body{padding:0; gap:4px} .shop3 .h-card{font-size:17px} .shop3 .h-title{font-size:18px} .shop3 .foot{display:none} }
.impact .btns{margin-top:28px}
.facts{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); align-self:start}
.facts li{display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line)}
.facts b{font:600 18px/1.3 var(--font-brand)} .facts span{color:var(--muted)}
.dh2{display:flex; align-items:center; gap:12px}
.na-gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 10px} .na-gal img{display:block; width:100%; aspect-ratio:1; object-fit:cover}
@media (min-width:720px){ .na-gal{grid-template-columns:repeat(4,minmax(0,1fr))} }
.na-gal.two{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .na-gal.two img{aspect-ratio:4/3} .na-gf{margin:0} .na-gf figcaption{margin-top:6px; font-size:14px; color:var(--muted)} .na-hr{border:0; border-top:1px solid var(--line); margin:40px 0} .vq.na-rq{margin:32px 0} .na-body .prose h3{margin:16px 0 0} .na-sec{margin:40px 0 8px} .vq.na-q{margin:48px 0 32px}
.f{display:grid; gap:28px; max-width:560px} .f-step{display:grid; gap:24px} .f-step[hidden], .f-q[hidden]{display:none}
fieldset.qv-field{border:0; padding:0; margin:0} fieldset.qv-field legend{padding:0; margin-bottom:6px}
.f-opts{display:grid; gap:6px; margin-top:2px} .f-opts .qv-check, .f-opts .qv-radio{align-items:flex-start; font-size:17px} .f-opts .qv-box, .f-opts .qv-dot{margin-top:1px}
.f-note{display:block; margin-top:2px} .qv-check > span:last-child, .qv-radio > span:last-child{padding-top:1px}
.f-q.bad .qv-check .qv-box, .f-q.bad .qv-radio .qv-dot{border-color:var(--q-red)}
.f-nav{display:flex; gap:12px; flex-wrap:wrap} .f [hidden]{display:none !important} .f-list{margin:0 0 8px; font-size:16px; line-height:1.5} .f-hp{position:absolute; left:-9999px; width:1px; height:1px} .f-ts{margin:0 0 16px} .f-ts:empty{display:none}
.ev-cta{margin-top:24px; display:grid; gap:12px} .ev-dates{margin:0}
.qv-tel{display:flex; gap:8px; max-width:420px} .qv-tel .tel-cc{flex:0 0 72px; width:72px; color:var(--q-muted); text-align:center} .qv-tel .tel-cc[readonly]{background:var(--q-line)} .qv-tel .tel-num{flex:1; min-width:0}
.ev-su{display:grid; gap:20px} .ev-su .f{gap:20px} .su-spots{margin:0; font-weight:600} .su-who{margin:0} .su-names{display:grid; gap:20px} @media (min-width:600px){ .su-names{grid-template-columns:1fr 1fr} } .su-err{margin:0} .su-done{display:grid; gap:8px} .su-done p{margin:0}
.ac-list{list-style:none; margin:0; padding:0; display:grid; gap:24px} .ac-row{display:grid; gap:4px; padding-bottom:24px; border-bottom:1px solid var(--line)} .ac-row p, .ac-row h2, .ac-row h3{margin:0} .ac-add summary{cursor:pointer; font-weight:600} .ac-add .f{margin-top:16px}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer} .linkbtn:disabled{color:var(--q-muted); text-decoration:none; cursor:default} select.qv-input{max-width:120px}
/* Account journey (2026-11-03): a status line after each action, confirm in place, 44px targets on phones */
.su-msg{margin:0; padding:12px 16px; border:1px solid var(--line); font-weight:600} .su-msg:focus{outline:none} .su-msg:focus-visible{outline:2px solid var(--ink); outline-offset:0} .su-msg.su-plain{border:0; padding:0 0 12px; font-weight:600}
.su-sure{margin:0 0 12px; font-weight:600} .su-cx, .ac-cx{margin-top:4px} .btn.bsm{min-height:40px; padding:8px 14px; font-size:15px}
.su-re .linkbtn:disabled{text-decoration:underline dotted; text-underline-offset:3px; cursor:not-allowed} .su-mail .qv-field + .btn{margin-top:12px} .ac-nw{white-space:nowrap}
.ac-row h3 .go{display:inline} .ac-row h3 .go svg{display:inline-block; vertical-align:-2px; margin-left:6px}
.su-in{margin:0} .su-priv{margin:0} .su-priv a{color:inherit} .su-re{margin:0} .su-sent{margin:0} .su-mail{margin:8px 0 0} .su-nl-lang{border:0;padding:0;margin:6px 0 0 36px;min-width:0} .su-nl-lang[hidden]{display:none} .su-nl-lang legend{padding:0;margin:0 0 2px} .su-nl-lang .f-opts{display:flex;flex-wrap:wrap;gap:0 24px}
.ac-h{margin-top:32px} .ac-facts{margin:0; display:grid; gap:8px} .ac-fact{display:grid; grid-template-columns:minmax(0,7em) minmax(0,1fr); gap:12px; align-items:baseline} .ac-fact dt{color:var(--q-muted)} .ac-fact dd{margin:0; overflow-wrap:anywhere}
/* Team G 11-05: the name form takes the row's whole width on a phone (it was squeezed beside "Name"); the fold that adds a phone or
   email shows that it opens; a message shown beside what was pressed keeps its own space. */
@media (max-width:600px){ .ac-fact:has(.ac-nm){grid-template-columns:minmax(0,1fr)} .ac-fact:has(.ac-nm) > dt{display:none} }
.ac-add summary{list-style:none} .ac-add summary::-webkit-details-marker{display:none}
.ac-add summary::after{content:""; display:inline-block; width:7px; height:7px; margin-left:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .15s}
.ac-add[open] summary::after{transform:translateY(1px) rotate(225deg)}
@media (prefers-reduced-motion:reduce){ .ac-add summary::after{transition:none} }
.ac-facts + .su-msg, .ac-add + .su-msg, h2.h-title + .su-msg{margin-top:12px}
.ac-texts{display:grid; gap:16px} .ac-saved{margin:0; min-height:1.4em} .ac-signout{margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px} .ac-outall{min-height:44px} .ac-nm{display:grid; gap:16px; margin-top:8px}
/* a box beside a label of several lines sits by its first line, not in the middle of the paragraph (consents, My profile) */
@media (max-width:600px){ .qv-check{align-items:flex-start} .qv-check .qv-box{margin-top:1px} }
@media (max-width:600px){ .linkbtn, .ac-add summary, .su-cx .btn, .ac-cx .btn, .btn.bsm{min-height:44px} .sl-pg .more-link a{display:inline-flex; align-items:center; min-height:44px} .linkbtn{display:inline-flex; align-items:center} .ac-add summary{display:flex; align-items:center} .qv-radio, .qv-check{min-height:44px} }
.prose.doc h2{margin:32px 0 8px} .prose.doc .qv-list-dots{margin:0 0 1em} .prose.doc h2:first-child{margin-top:0} #fbox{margin-top:32px}
.f-privacy{max-width:none}
.f-done{display:grid; gap:16px}
.st-pdf{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:32px} .st-pdf .btn{max-width:100%} .st-size{font:400 16px/1.4 var(--font-brand); color:var(--muted)}
.st-text ul{display:grid; gap:10px; padding-left:22px; list-style:disc} .st-text p, .st-text li{overflow-wrap:anywhere}
/* Resources, on the design system: white cards with a hairline (qv-card), colour only as marks (dab, ticks) and the topic tile; no stripes, no tinted grounds */
.g-tile{display:inline-grid; place-items:center; width:56px; height:56px; flex:none} .g-tile.lg{width:76px; height:76px}
.emerg{list-style:none; margin:0 0 var(--blk); padding:0; display:grid; gap:12px}
.emerg a{display:grid; gap:6px; height:100%; color:var(--q-ink); text-decoration:none; transition:border-color .12s} .emerg a:hover{border-color:var(--q-ink)}
.emerg b{display:flex; align-items:center; font:700 44px/1 var(--font-head)} .emerg b .qv-mark{font-size:22px} .emerg span{font-size:16px; line-height:1.45}
@media (min-width:900px){ .emerg{grid-template-columns:repeat(3,minmax(0,1fr))} }
.g-cards{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.g-acc-h,.g-h{scroll-margin-top:96px}   /* a section's address is on its heading (TASKS 17, 33): a jump lands below the sticky header */
.g-cp{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:16px 0 0; padding:0; border:0; background:none; font:400 15px/1.3 var(--font-brand); color:var(--q-muted); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; cursor:pointer}
.g-cp:hover{color:var(--q-ink)}
.g-cp.ok{color:var(--q-ink); text-decoration:none}
.g-cp svg{width:16px; height:16px; flex:none}
.gs{margin:0 0 28px; max-width:760px}
.gs > label{display:block; margin:0 0 8px}
.gs-st{margin:10px 0 0; color:var(--q-muted); font-size:15px}
.gs-st:empty{display:none}
.gs-res{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.gs-res:empty{display:none}
.gs-res a{display:grid; gap:4px; padding:14px 16px; color:var(--q-ink); text-decoration:none}
.gs-hub{font-size:14px; font-weight:400; color:var(--q-muted)}
.gs-ex{font-size:15px; line-height:1.45; font-weight:400; color:var(--q-ink)}
.gs-sec{font-size:15px; font-weight:600; color:var(--q-ink)}
.gs-ex mark{background:var(--q-yellow); color:var(--q-ink); padding:0 1px}
.g-cards a{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:start; height:100%; color:var(--q-ink); text-decoration:none; transition:border-color .12s}
.g-cards a{align-items:center} .g-cards .ht{font:700 22px/1.2 var(--font-head); align-self:center} .g-cards .hl{grid-column:2; color:var(--q-muted); font-size:16px; line-height:1.45}
.g-cards a:hover{border-color:var(--q-ink)} .g-cards a:hover .ht{text-decoration:underline; text-decoration-color:var(--q-sky); text-decoration-thickness:2px; text-underline-offset:4px}
@media (min-width:700px){ .g-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .g-cards{grid-template-columns:repeat(3,minmax(0,1fr))} .g-cards a{grid-template-columns:1fr} .g-cards .g-tile{grid-row:auto; margin-bottom:10px} .g-cards .hl{grid-column:1} }
.quiz-sec .quiz-frame{display:block; width:100%; min-height:320px; border:1px solid var(--q-line)}
/* the education guide's own blocks (owner, 2026-11-06: "issues with the spacing between different blocks"): the pages, the PDF and the
   quiz each one block, 48 px apart (56 on a desktop), the PDF a card with a file mark, Open in a new tab and Download */
.g-body .narrow > .g-pages, .g-body .narrow > .g-pdf, .g-body .narrow > .quiz-sec{margin-top:48px; margin-bottom:0}
.g-body .narrow > .quiz-sec{padding-block:0}   /* every section gets padding-block from the page rule: here the margins alone set the gap */
.g-body .narrow > .quiz-sec + *{margin-top:48px}
@media (min-width:720px){ .g-body .narrow > .g-pages, .g-body .narrow > .g-pdf, .g-body .narrow > .quiz-sec{margin-top:56px} }
.g-pdf{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; padding:24px; border:1px solid var(--q-line); scroll-margin-top:96px}
.g-pdf-ic{display:flex; align-items:center; justify-content:center; width:56px; height:72px; border:2px solid var(--q-ink); font:700 15px/1 var(--font-head); letter-spacing:.04em; color:var(--q-ink); position:relative}
.g-pdf-ic::after{content:""; position:absolute; top:-2px; right:-2px; width:16px; height:16px; background:var(--q-red)}
.g-pdf h2{margin:0 0 10px} .g-pdf p{margin:0 0 16px; font-size:17px; line-height:1.5} .g-pdf .btns{margin:0; display:flex; flex-wrap:wrap; gap:10px}
.quiz-sec{scroll-margin-top:96px}
@media (max-width:520px){ .g-pdf{grid-template-columns:1fr; padding:20px} .g-pdf-ic{width:48px; height:60px} }
.g-head{padding:40px 0 8px} .g-title{display:flex; align-items:center; gap:20px; margin-top:16px} .g-title h1{margin:0}
.g-body .narrow > *{margin-bottom:var(--blk)} .g-body .lead{margin-bottom:8px}
.g-how{display:grid; gap:12px; font-size:18px; line-height:1.6} .g-intro{font-size:18px; line-height:1.6; margin:4px 0 18px; max-width:44em}
.g-first h2{margin:0 0 14px} .g-first .qv-list-ticks{font-size:17px; line-height:1.5}
.g-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.g-toc a{display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border:1px solid var(--q-line); color:var(--q-ink); text-decoration:none; font:600 16px/1.3 var(--font-brand)} .g-toc a:hover{border-color:var(--q-ink)}
.g-toc a b{font:700 18px/1 var(--font-head)}
.g-accs{margin-top:var(--blk); border-top:2px solid var(--q-ink)}
.g-acc{border-bottom:1px solid var(--q-line); scroll-margin-top:80px}
.g-acc > summary{list-style:none; display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 0; cursor:pointer}
/* guide sections (TASKS 47 #14): h2 > button, drawn exactly like the summary row it replaced */
.g-acc-h{margin:0; font-size:21px} .g-acc-h button{display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 0; margin:0; border:0; border-radius:0; background:none; text-align:left; letter-spacing:inherit; word-spacing:inherit; text-transform:inherit; text-wrap:inherit; cursor:pointer}
.g-acc-h b{flex:none; min-width:1.5em; font:700 28px/1 var(--font-head)} .g-acc-h .g-acc-t{flex:1}
.g-acc-h svg{flex:none; width:18px; height:18px; transition:transform .2s} .g-acc-h [aria-expanded="true"] svg{transform:rotate(180deg)}
.g-acc-h button:hover .g-acc-t{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.g-acc-d > summary{display:none}
.g-acc > summary::-webkit-details-marker{display:none}
.g-acc > summary b{flex:none; min-width:1.5em; font:700 28px/1 var(--font-head)}
.g-acc > summary .h-title{flex:1; margin:0; font-size:21px}
.g-acc > summary svg{flex:none; width:18px; height:18px; transition:transform .2s}
.g-acc[open] > summary svg{transform:rotate(180deg)}
.g-acc > summary:hover .h-title{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.g-acc-b{padding:4px 0 32px}
@media (min-width:720px){ .g-acc > summary .h-title, .g-acc-h{font-size:24px} }
@media print{ .g-acc-b{display:block!important} }
.g-sec{scroll-margin-top:96px} .g-h{display:flex; align-items:baseline; gap:14px} .g-h b{font:700 44px/1 var(--font-head); color:var(--q-ink)}
.g-items{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px} .g-items li{display:grid; gap:8px} .g-items p{max-width:44em; margin:0}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0}
.g-meta{display:grid; gap:8px; margin-top:4px; font:500 15.5px/1.4 var(--font-brand); color:var(--q-ink)} .g-meta > span{display:flex; align-items:flex-start; gap:10px} .g-meta > span > span{display:block} .g-meta svg{flex:none} .g-meta a{font-weight:600}
.g-steps{list-style:none; counter-reset:s; margin:8px 0 20px; padding:0}
.g-steps li{counter-increment:s; position:relative; padding:0 0 22px 56px} .g-steps li::before{content:counter(s); position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; border:2px solid var(--q-ink); background:var(--q-white); font:700 18px/1 var(--font-head)}
.g-steps li::after{content:""; position:absolute; left:17px; top:38px; bottom:2px; width:2px; background:var(--q-line)} .g-steps li:last-child::after{display:none} .g-steps h3{margin:6px 0 4px} .g-steps p{max-width:42em; margin:0} .g-body a[target="_blank"], .g-intro a[target="_blank"]{overflow-wrap:anywhere}
.g-cmp{margin:8px 0 20px} .g-cmp-cap{font:600 15px/1.4 var(--font-brand); color:var(--q-muted); margin:0 0 8px} .g-cmp-scroll{overflow-x:auto}
.g-cmp table{border-collapse:collapse; min-width:520px; width:100%; font-size:15.5px; line-height:1.4} .g-cmp th,.g-cmp td{border:1px solid var(--q-line); padding:10px 12px; text-align:left; vertical-align:top}
.g-cmp thead th{background:var(--q-ink); color:var(--q-white); font:700 15.5px/1.25 var(--font-head); border-color:var(--q-ink)} .g-cmp tbody th{font-weight:600}
.g-terms dl{margin:12px 0 0; display:grid; gap:10px} .g-terms dt{font:700 17px/1.3 var(--font-head)} .g-terms dd{margin:4px 0 0}
@media (min-width:760px){ .g-terms dl{grid-template-columns:repeat(2,minmax(0,1fr))} }
.g-pages{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:12px}
.g-pages a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px; align-items:center; color:var(--q-ink); text-decoration:none}
.g-pages b{grid-row:1 / span 2; font:700 40px/1 var(--font-head); min-width:1.2em} .g-pages .pt{font:700 21px/1.2 var(--font-head)} .g-pages .pl{grid-column:2; color:var(--q-muted); font-size:16px; line-height:1.45} .g-pages svg{grid-row:1 / span 2; grid-column:3; width:20px; height:20px}
.g-pages a:hover{border-color:var(--q-ink)} .g-pages a:hover .pt{text-decoration:underline; text-decoration-color:var(--q-sky); text-decoration-thickness:2px; text-underline-offset:4px}
.g-pn{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:var(--blk)} .g-pn a{display:grid; grid-template-columns:minmax(0,1fr); gap:4px; color:var(--q-ink); text-decoration:none} .g-pn a:hover{border-color:var(--q-ink)}
.g-pn small{color:var(--q-muted); font:600 13px/1.2 var(--font-head); text-transform:uppercase; letter-spacing:.08em} .g-pn span{font:700 18px/1.25 var(--font-head); overflow-wrap:break-word; hyphens:auto} .g-next{text-align:right; grid-column:2}
.g-src summary{cursor:pointer; font:600 15px/1.3 var(--font-brand); color:var(--q-muted); padding-block:3px}   /* 25.5 px: WCAG 2.2 target size (24) */ .g-src ul{margin:12px 0 0; padding-left:20px; display:grid; gap:6px; font-size:14px; color:var(--q-muted)}
.dp-wrap{position:relative} .dp-wrap .qv-input{padding-right:52px}
.dp-btn{position:absolute; right:2px; top:2px; bottom:2px; width:46px; display:grid; place-items:center; border:0; background:transparent; color:var(--q-ink); cursor:pointer} .dp-btn:hover{background:var(--q-quiet,var(--q-line))} .dp-btn:focus-visible{outline:3px solid var(--accent); outline-offset:0}
.dp{position:absolute; z-index:20; left:0; top:calc(100% + 6px); width:min(100%, 336px); padding:12px; background:var(--q-white); border-top:4px solid var(--q-ink); box-shadow:var(--shadow-pop); font-family:var(--font-brand)}
.dp-head{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; margin-bottom:6px} .dp-head b{text-align:center; font:700 19px/1.2 var(--font-head)}
.dp-nav{width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:var(--q-ink); cursor:pointer} .dp-nav:hover{background:var(--q-quiet,var(--q-line))}
.dp-wd, .dp-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))} .dp-wd span{font:600 12px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--q-muted); text-align:center; padding:6px 0}
.dp-grid button{height:42px; border:0; background:transparent; color:var(--q-ink); font:500 16px/1 var(--font-brand); cursor:pointer} .dp-grid button:hover{background:var(--q-quiet,var(--q-line))}
.dp-grid button.today{font-weight:700; text-decoration:underline; text-decoration-color:var(--q-sky); text-decoration-thickness:2px; text-underline-offset:4px}
.dp-grid button.on{background:var(--q-ink); color:var(--q-white)} .dp-grid button:focus-visible, .dp-nav:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
.ev-gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} .ev-gal figure{margin:0} .ev-gal img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 25%}
.ev-gal.n3 figure:last-child:nth-child(odd){grid-column:1 / -1} .ev-gal.n3 figure:last-child:nth-child(odd) img{aspect-ratio:16/9}
@media (min-width:900px){ .ev-gal.n3{grid-template-columns:repeat(6,minmax(0,1fr))} .ev-gal.n3 figure{grid-column:span 2}
  .ev-gal.n3 figure:last-child:nth-child(odd){grid-column:span 2} .ev-gal.n3 figure:last-child:nth-child(odd) img{aspect-ratio:4/3}
  .ev-gal.n3 figure:last-child:nth-child(3n+1){grid-column:1 / -1} .ev-gal.n3 figure:last-child:nth-child(3n+1) img{aspect-ratio:16/9}
  .ev-gal.n3 figure:nth-last-child(2):nth-child(3n+1),.ev-gal.n3 figure:last-child:nth-child(3n+2){grid-column:span 3} }
.ev-gal.n1{justify-items:start}
/* one photo: shown whole, as wide as the text column allows, never a small square at the left */
.ev-gal.n1{grid-template-columns:minmax(0,1fr)} .ev-gal.n1 img{aspect-ratio:auto; max-height:80vh; width:auto; max-width:100%}
/* event page (TASKS 11): cover, facts block, "Add to calendar" */
.evp-cover{margin:0} .evp-cover img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 25%}
.evp-field{display:grid; place-items:center; aspect-ratio:2/1; background:var(--f)} .evp-field .picto{width:min(22%, 120px); height:auto}   /* no photo: the host program's field, lower than a photo so the title and the sign-up stay high */
.evp-facts{display:grid; gap:10px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.evp-fact{display:grid; grid-template-columns:minmax(0, 104px) minmax(0, 1fr); gap:12px; align-items:baseline}
.evp-k{font:600 13px/1.3 var(--font-brand); color:var(--muted); text-transform:uppercase; letter-spacing:.05em} .evp-v{font:600 17px/1.35 var(--font-head)} .evp-more{font-weight:400; color:var(--muted)}
.evp-acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px} .evp-acts .btn{min-height:44px} .evp-cal{position:relative}
.evp-calmenu{position:absolute; left:0; top:calc(100% + 4px); z-index:5; display:grid; min-width:260px; background:var(--white); border:2px solid var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.12)}
.evp-calopt{display:flex; align-items:center; min-height:44px; padding:10px 16px; box-sizing:border-box; font:600 16px/1.3 var(--font-head); color:var(--ink); text-decoration:none} .evp-calopt+.evp-calopt{border-top:1px solid var(--line)} .evp-calopt:hover,.evp-calopt:focus-visible{background:var(--line)}
.evp-head .ev-cta{margin-top:4px} .evp-sub{margin:32px 0 12px} .evp-prog{margin-top:24px}
@media (max-width:520px){ .evp-fact{grid-template-columns:1fr; gap:2px} }
.rc-link{display:block; color:var(--q-ink); text-decoration:none} .rc-link:hover figcaption{text-decoration:underline; text-decoration-color:var(--q-sky); text-decoration-thickness:2px; text-underline-offset:4px}
.st-part{margin:40px 0 32px; display:grid; gap:14px} .st-qa{display:grid; gap:6px; margin-top:10px} .st-q{font:700 19px/1.3 var(--font-head)} .st-qa p{font-size:18px; line-height:1.6}
a.plain{color:inherit; text-decoration:none} a.plain:hover{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.about-box{margin:40px 0 32px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:8px; color:var(--muted)} .about-box h2{color:var(--ink)}
.voices{display:grid; gap:40px}
.vq{margin:0; display:grid; gap:14px; align-content:start; padding-top:20px; border-top:4px solid var(--purple)}
.vq blockquote{margin:0} .vq blockquote p{font:600 22px/1.35 var(--font-head); text-wrap:pretty}
.vq figcaption{font:500 15px/1.4 var(--font-brand); color:var(--muted)}
.voices .vq:nth-child(2){border-top-color:var(--orange)} .voices .vq:nth-child(3){border-top-color:var(--sky)}
@media (min-width:900px){ .voices{grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px} }
.news-list a.noimg{grid-template-columns:1fr}
.orgs.f4{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; gap:12px 16px} .orgs.f4::after{display:none}
@media (min-width:800px){ .orgs.f4{grid-template-columns:repeat(4,minmax(0,1fr))} }

.g-body .narrow > *{margin-bottom:var(--blk)} .g-body .lead{margin-bottom:8px}
.nf-grid{display:grid; gap:32px}
.nf-main{display:grid; gap:10px; align-content:start; color:var(--ink); text-decoration:none}
.nf-img img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:6px}
.nf-main{padding:28px 0; border-top:2px solid var(--ink)} .nf-main .nf-t{font:700 30px/1.15 var(--font-head)} .nf-main .nf-l{color:var(--muted); max-width:40em}
.nf-main:hover .nf-t, .nf-list a:hover .nf-t, .news-list a:hover .nt{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.when{display:block; font:500 14px/1.3 var(--font-brand); color:var(--muted)}
.nf-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); align-self:start}
.nf-list li{border-bottom:1px solid var(--line)} .nf-list a{display:grid; gap:4px; padding:18px 0; color:var(--ink); text-decoration:none}
.nf-list .nf-t{font:700 19px/1.25 var(--font-head)}
@media (min-width:900px){ .nf-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px} }
.news-list{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:2px solid var(--ink)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:24px 0; color:var(--ink); text-decoration:none; align-items:start}
.news-list .ni img{display:block; width:120px; aspect-ratio:4/3; object-fit:cover} @media (min-width:720px){ .news-list a{grid-template-columns:200px minmax(0,1fr); gap:28px} .news-list .ni img{width:200px} } .news-list .ni.none{width:120px; aspect-ratio:4/3; background:var(--line)}
.news-list .nb{display:grid; gap:6px} .news-list .nt{font:700 20px/1.25 var(--font-head)} .news-list .nl{color:var(--muted)}
@media (min-width:720px){ .news-list a{grid-template-columns:240px minmax(0,1fr); gap:32px} .news-list .ni img, .news-list .ni.none{width:240px} .news-list .nt{font-size:24px} }
.na-head{padding-bottom:0} .na-head .wrap{display:grid; gap:14px} .crumbs{font:600 15px/1.3 var(--font-brand)}
.na-fig{margin:0 0 32px} .na-fig img{display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; background:var(--line)} .na-fig figcaption{margin-top:8px; font-size:14px; color:var(--muted)} .na-fig img.na-share{max-height:none; aspect-ratio:1200/630; object-fit:cover; background:none; outline:1px solid var(--q-line); outline-offset:-1px}
.na-body .prose{display:grid; gap:18px; font-size:18px; line-height:1.6; margin-bottom:32px}
.evf-in{position:relative; overflow:hidden; isolation:isolate} .evf .evf-in{padding-right:min(38%, 250px)} .evf-in > :not(.evf-deco){position:relative; z-index:1}
.evf-icon{position:absolute; z-index:0; right:32px; top:50%; width:min(30%, 180px); height:auto; margin-top:calc(min(30%, 180px) / -2); pointer-events:none}
.evf-turkey{animation:evf-bob 2.4s ease-in-out infinite alternate} @keyframes evf-bob{from{transform:translateY(4px)} to{transform:translateY(-4px)}}
.evf-ball{transform-origin:50% 0; animation:evf-sway 4s ease-in-out infinite alternate} @keyframes evf-sway{from{transform:rotate(-4deg)} to{transform:rotate(4deg)}}
.evf-newyear .evf-in{background:#d92b2b} .evf-newyear .evf-in, .evf-newyear .evf-in .when{color:var(--white)} .evf-newyear .evf-in .btn{background:var(--white); color:var(--ink)}
@media (prefers-reduced-motion: reduce){.evf-icon{animation:none !important}}
@media (max-width:520px){.evf .evf-in{padding-right:32px} .evf-icon{top:auto; bottom:12px; right:16px; margin-top:0; width:80px}}
.evf-auto{padding-top:40px} .evf-auto .evf-row{margin-bottom:0}
.evv-tabs{display:inline-flex; border:2px solid var(--ink); margin:0 0 24px} .evv-t{font:600 16px/1 var(--font-head); padding:12px 20px; min-height:44px; background:var(--white); color:var(--ink); border:0; cursor:pointer}
.evv-t[aria-pressed="true"]{background:var(--ink); color:var(--white)} .evv-t:focus-visible, .evm-nav:focus-visible, [data-day]:focus-visible{outline:3px solid var(--sky); outline-offset:2px}
.evv-mh{font:700 26px/1.2 var(--font-head); margin:32px 0 16px} .evv-list > .evv-mh:first-child{margin-top:8px}
.evm-head{display:flex; align-items:center; gap:16px; margin-bottom:12px} .evm-head .evv-mh{margin:0; min-width:10ch; text-align:center}
.evm-nav{width:44px; height:44px; border:2px solid var(--ink); background:var(--white); font:600 20px/1 var(--font-head); cursor:pointer}
.evm-g{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.evm-n{font:600 13px/1 var(--font-brand); color:var(--muted); padding:10px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.evm-c{min-height:112px; padding:8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0}
.evm-x{background:transparent} .evm-past .evm-d, .evm-past .evm-e{opacity:.5} .evm-d{font:600 14px/1 var(--font-brand)} .evm-today .evm-d{display:inline-grid; place-items:center; width:26px; height:26px; background:var(--ink); color:var(--white)}
.evm-e{display:block; font-size:13px; line-height:1.3; color:var(--ink); text-decoration:none; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical}
.evm-e::before{content:""; display:inline-block; width:10px; height:10px; margin-right:6px; background:var(--f); vertical-align:0}
.evm-e:hover{text-decoration:underline} .evm-none{margin:16px 0 0; color:var(--muted)} .evm-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .evm-day h4{scroll-margin-top:96px} .evm-day h4:focus{outline:none} .evm-day h4:focus-visible{outline:3px solid var(--sky); outline-offset:4px} .evm-e b{font-weight:600} .evm-dots{display:none} .evm-tbd{margin:0 0 12px} .evm-day{margin-top:24px; display:grid; gap:20px} .evm-day h4{font:700 20px/1.2 var(--font-head); margin:0}
@media (max-width:760px){.evm-c{min-height:56px; padding:6px; align-items:center} .evm-e{display:none} .evm-dots{display:flex; gap:3px; flex-wrap:wrap; justify-content:center} .evm-dots i{width:8px; height:8px; background:var(--f)}
  [data-day]{cursor:pointer} .evm-pick{background:var(--line)} .evm-n{text-align:center; padding:8px 2px}}
.evf-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:24px; margin-bottom:48px}
.evf-in{display:grid; gap:12px; align-content:start; height:100%; padding:32px; background:var(--f); color:var(--ink); text-decoration:none}
.evf .evf-in .when{font:600 17px/1.3 var(--font-brand); color:inherit; opacity:1} .evf h3{margin:0; font-size:clamp(30px, 4vw, 44px); line-height:1.05}
.evf .where{font-size:17px} .evf .btn{justify-self:start; margin-top:8px} .evf-in:hover h3{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px}
.evc{display:grid; gap:8px; align-content:start; padding-top:18px; border-top:4px solid var(--f)}
.evc .when{font:600 15px/1.3 var(--font-brand); color:var(--muted)}
.evc h3 a{color:inherit; text-decoration:none} .evc h3 a:hover{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.evc .where{font-size:15px; color:var(--muted)}
.recent{display:grid; grid-template-columns:1fr; gap:32px 24px}
@media (max-width:639px){ .recent.many{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px} .recent.many figcaption{font-size:15px} }
.recent figure{margin:0; display:grid; gap:12px; align-content:start}
.recent img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 25%}   /* people photos: keep the heads (owner, 2026-11-03); a focus point saved on the team page (POS) wins */
.recent figcaption{display:grid; gap:4px; font:600 17px/1.3 var(--font-head)}
.recent .when{font:500 14px/1.3 var(--font-brand); color:var(--muted)}
@media (min-width:640px){ .recent{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .recent{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mosaic{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.mosaic figure{margin:0; position:relative; overflow:hidden}
.mosaic img{display:block; width:100%; height:100%; object-fit:cover}
.mosaic .m0{grid-column:1 / -1; aspect-ratio:4/3}
.mosaic .m1, .mosaic .m2{aspect-ratio:1}
@media (min-width:900px){
  .mosaic{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; height:clamp(420px, 40vw, 560px)}
  .mosaic .m0{grid-column:1; grid-row:1 / span 2; aspect-ratio:auto}
  .mosaic .m1, .mosaic .m2{aspect-ratio:auto}
}
.orgs{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 48px}
.orgs li{display:flex}
.orgs a, .orgs li > span{display:flex; align-items:center; justify-content:center; width:150px; height:72px; text-decoration:none; color:var(--ink)}
.orgs img{display:block; max-width:150px; max-height:56px; width:auto; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.15); transition:filter .2s}
.orgs.f4 li{width:100%; justify-content:center} .orgs.f4 a, .orgs.f4 li > span{width:100%; height:84px} @media (min-width:800px){ .orgs.f4 a, .orgs.f4 li > span{height:112px} } .orgs img.sized{max-width:none; max-height:none}
.orgs img[src*="safe-asylum"], .orgs img[src*="rif-asylum"], .orgs img[src*="coney-island"], .orgs img[src*="rude-mechanical"], .orgs img[src*="russian-seattle"], .orgs img[src*="international-rescue"], .orgs img[src*="camba"], .orgs img[src*="national-queer"], .orgs img[src*="awita"], .orgs img[src*="ny4ca"], .orgs img[src*="russian-refugee"], .orgs img[src*="pflag"], .orgs img[src*="cbst"]{max-height:72px}
.orgs a:hover img, .orgs a:focus-visible img{filter:none; opacity:1}
.orgs li.dark a{background:var(--ink); padding:0 12px}
.orgs .txt{font:600 16px/1.3 var(--font-head); text-align:center}
@media (min-width:1000px){ .orgs{justify-content:space-between} .orgs::after{content:""; flex:auto} }
.facts li.seal{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:20px} .facts li.seal > span{display:grid; gap:4px} .facts li.seal img{display:block; width:125px; height:125px}
.dh2 .flag, .dh2 > span:first-child{flex:none}
@media (min-width:900px){ .give{gap:64px} }
.hub{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px 32px; padding:32px 28px; color:var(--white); text-decoration:none}
.hub-t{font:700 40px/1 var(--font-head)} .hub-d{grid-column:1; font:600 20px/1.35 var(--font-brand); max-width:34em} .hub-a{grid-row:1 / span 2; grid-column:2; align-self:center}
.hub-a svg{width:36px; height:36px} .hub:hover .hub-t{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px}
@media (min-width:720px){ .hub{padding:48px 48px} .hub-t{font-size:52px} }
/* Photo viewer (NN/g: enlarge on request, at least 2x; visible close; Esc and Back close; no auto-advance) */
img.zoomable{cursor:zoom-in}
img.zoomable:focus-visible{outline:3px solid var(--sky); outline-offset:3px}
figure:has(> img.zoomable){position:relative}
figure:has(> img.zoomable)::after{content:""; position:absolute; top:10px; right:10px; width:36px; height:36px; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M11 3h4v4M7 15H3v-4M15 3l-5 5M3 15l5-5' fill='none' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") center/18px no-repeat; opacity:0; transition:opacity .15s; pointer-events:none}
figure:has(> img.zoomable:hover)::after, figure:has(> img.zoomable:focus-visible)::after{opacity:1}
.lb{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#262626; color:var(--white)}
.lb::backdrop{background:transparent}
.lb[open]{display:grid; grid-template-rows:auto minmax(0,1fr) auto}
.lb .lb-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px max(12px, env(safe-area-inset-left,0px))}
.lb .lb-count{font:600 15px/1 var(--font-brand); font-variant-numeric:tabular-nums; color:var(--on-dark)}
.lb button{display:inline-grid; place-items:center; width:52px; height:52px; border:2px solid var(--white); background:transparent; color:var(--white); cursor:pointer}
.lb button:hover{background:var(--white); color:var(--ink)}
.lb button:focus-visible{outline:3px solid var(--white); outline-offset:3px}
.lb button svg{width:20px; height:20px}
.lb .lb-stage{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:0; padding:0 max(12px, env(safe-area-inset-left,0px))}
.lb figure{display:grid; justify-items:center; align-content:center; gap:12px; min-height:0; height:100%; margin:0}
.lb img{max-width:100%; max-height:calc(100dvh - 190px); width:auto; height:auto; object-fit:contain; background:#222}
.lb figcaption{max-width:60ch; text-align:center; font:600 16px/1.4 var(--font-brand)}
.lb figcaption span{display:block; font-weight:400; color:var(--on-dark)}
.lb .lb-prev svg{transform:rotate(180deg)}
.lb .lb-bottom{height:16px}
/* PhotoSwipe (TASKS 30) in the viewer's own look (.pswp.lb-ps: one class more than photoswipe.css, which loads later and would win a tie): the dark ground, square white-edged buttons, the count top left, the caption under the photo; on phones the arrows sit at the bottom, within reach */
.pswp.lb-ps{--pswp-bg:#262626; --pswp-placeholder-bg:#262626; --pswp-icon-color:#fff; --pswp-icon-color-secondary:#262626; --pswp-icon-stroke-color:#262626; --pswp-icon-stroke-width:0; --pswp-error-text-color:#fff; --pswp-root-z-index:1000}
.pswp.lb-ps .pswp__top-bar{height:76px; padding:0 max(6px, env(safe-area-inset-right,0px)) 0 max(12px, env(safe-area-inset-left,0px))}
.pswp.lb-ps .lb-ps-count{align-self:center; margin-right:auto; font:600 15px/1 var(--font-brand); font-variant-numeric:tabular-nums; color:var(--on-dark); pointer-events:none}
.pswp.lb-ps .pswp__button{width:52px; height:52px; margin:12px 6px; border:2px solid #fff; opacity:1; background:transparent}
.pswp.lb-ps .pswp__button .pswp__icn{top:8px; left:8px; width:32px; height:32px}
.pswp.lb-ps .pswp__button:hover, .pswp.lb-ps .pswp__button:focus-visible{background:#fff; --pswp-icon-color:#262626; opacity:1}
.pswp.lb-ps .pswp__button:focus-visible{outline:3px solid #fff; outline-offset:3px}
.pswp.lb-ps .pswp__button--arrow{visibility:visible; width:52px; height:52px; margin-top:-26px}
.pswp.lb-ps .pswp__button--arrow .pswp__icn{margin-top:0; top:8px; left:8px; width:32px; height:32px; background:none; border-radius:0}
.pswp.lb-ps .pswp__button--arrow--prev{left:12px} .pswp.lb-ps .pswp__button--arrow--next{right:12px}
.pswp.lb-ps .lb-ps-cap{position:absolute; left:0; right:0; bottom:0; max-width:60ch; margin:0 auto; padding:14px 16px max(18px, env(safe-area-inset-bottom,0px)); text-align:center; font:600 16px/1.4 var(--font-brand); color:#fff; pointer-events:none}
.pswp.lb-ps .lb-ps-cap span{display:block; font-weight:400; color:var(--on-dark)}
.pswp.lb-ps:not(.pswp--ui-visible) .lb-ps-cap, .pswp.lb-ps:not(.pswp--ui-visible) .lb-ps-count{opacity:0}
@media (max-width:699px){
  .pswp.lb-ps .pswp__button--arrow{top:auto; bottom:max(16px, env(safe-area-inset-bottom,0px)); margin:0}
  .pswp.lb-ps .pswp__button--arrow--prev{left:calc(50% - 64px)} .pswp.lb-ps .pswp__button--arrow--next{right:auto; left:calc(50% + 12px)}
  .pswp.lb-ps .lb-ps-cap{bottom:84px; padding-bottom:10px}
}
@media (max-width:719px){ .lb .lb-stage{grid-template-columns:minmax(0,1fr)} .lb .lb-stage > button{display:none} .lb .lb-bottom{display:flex; justify-content:center; gap:16px; height:auto; padding:12px 0 max(16px, env(safe-area-inset-bottom,0px))} .lb img{max-height:calc(100dvh - 230px)} }
@media (min-width:720px){ .lb .lb-bottom > button{display:none} .lb .lb-stage > figure{grid-column:2} }
@media (prefers-reduced-motion:no-preference){ .lb[open] figure{animation:lbIn .18s ease-out} @keyframes lbIn{from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none}} }

.rule-top{border-top:1px solid var(--line)}
.ink{background:var(--ink); color:var(--white)}
.ink .muted{color:var(--on-dark)}
.grid{display:grid; gap:16px}
@media (min-width:640px){ .g2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} }
@media (min-width:1000px){ .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.more-link{margin-top:var(--gap)}

/* Photo hero and banners: white type on the system's one shade */
.on-photo{position:relative; display:grid; align-items:end; overflow:hidden; background:var(--ink); color:var(--white); isolation:isolate}
.on-photo > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.on-photo::before{content:""; position:absolute; inset:0; background:var(--shade); z-index:-1}
.on-photo .wrap{width:100%; padding-block:40px}
.on-photo .lead, .on-photo .muted{color:var(--on-dark)}
.hero{min-height:clamp(560px, 76vh, 820px)}
.hero .inner{display:grid; gap:20px; max-width:62em}
.hero .lead{max-width:40em}
.trust{display:flex; flex-wrap:wrap; gap:6px 18px; font:500 15px/1.4 var(--font-brand); color:var(--on-dark)}
.photo-cap{position:absolute; right:max(var(--gut), env(safe-area-inset-right,0px)); top:16px; padding:4px 10px; background:rgba(0,0,0,.5); color:var(--white); font:500 13px/1.3 var(--font-brand)}
.banner{min-height:clamp(340px, 50vh, 560px)}
.banner .inner{display:grid; gap:16px; max-width:52em}
.intro .lead{color:var(--ink)}
@media (min-width:720px){ .on-photo .wrap{padding-block:64px} }
@media (prefers-reduced-motion:no-preference){
  .hero .inner > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .hero .inner > *:nth-child(2){animation-delay:.08s} .hero .inner > *:nth-child(3){animation-delay:.16s} .hero .inner > *:nth-child(4){animation-delay:.24s} .hero .inner > *:nth-child(5){animation-delay:.32s}
}
@keyframes rise{from{opacity:.001; transform:translateY(14px)}to{opacity:1; transform:none}}

/* Field page head (no photo) */
.fhead{padding-block:0}
.fhead .field{display:grid; align-content:end; gap:16px; padding:40px max(var(--gut), env(safe-area-inset-left,0px)) 32px} .fhead .field h1{font-size:clamp(30px, 9vw, 36px)}
@media (min-width:720px){ .fhead .field{padding:72px max(32px, calc((100vw - 1200px) / 2)) 48px} .fhead .field h1{font-size:56px} }

/* Stats on ink */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px}
@media (min-width:900px){ .stats{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr)} }
.stat{display:grid; gap:10px; align-content:start}
.stat::before{content:""; width:48px; height:8px; background:var(--f,var(--sky))}
.stat .num{font:700 48px/.95 var(--font-head); letter-spacing:-.015em; font-variant-numeric:tabular-nums}
.stat .lbl{font:500 16px/1.35 var(--font-brand)}
.ink .stat .lbl{color:var(--on-dark)}
@media (min-width:720px){ .stat .num{font-size:76px} }

/* Photo cards */
.pcard{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); text-decoration:none; overflow:hidden}
.pcard .img{overflow:hidden; aspect-ratio:4/3; background:var(--line)}
.pcard .img img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .img img{transform:scale(1.04)}
.pcard .body{display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1}
.pcard .type{display:flex; align-items:center; gap:8px; font:600 14px/1.25 var(--font-brand)}
.pcard .type .flag{font-size:15px}
.pcard .foot{margin-top:auto; padding-top:8px}
.pcard:hover{border-color:var(--ink)}
.pcard.ruc{background:var(--ink); color:var(--white); border-color:var(--ink); justify-content:space-between}
.pcard.ruc .body{justify-content:flex-end}
.pcard.ruc .big{font:700 32px/1 var(--font-head)}
.pcard.ruc .go{color:var(--white); text-decoration-color:var(--white)}
@media (prefers-reduced-motion:reduce){ .pcard .img img, .bento img{transition:none} }

/* Theory of change as colour fields */
.toc{display:grid; gap:16px}
@media (min-width:640px){ .toc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} }
@media (min-width:1000px){ .toc{grid-template-columns:repeat(4,minmax(0,1fr))} .toc.t3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.toc li{display:flex; flex-direction:column; gap:0} .toc .txt{margin-top:14px}
.tf{display:flex; align-items:baseline; gap:10px; padding:16px 0 0}
.tp{margin:0}.tp img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.tf .big{font:700 28px/1 var(--font-head); font-variant-numeric:tabular-nums}
.tf h3{font:700 20px/1.15 var(--font-head)}
.toc .txt{font-size:17px; line-height:1.5; color:var(--ink)}
.toc .txt ul{display:grid; gap:6px; color:var(--ink)}

/* Theory of change told as stories (home page; owner's design "Told as stories", 2026-11-02). One framed card holds the
   photo, the text and, along its bottom, the controls: pause or play first (the carousel pattern), previous, next, then the six numbered steps whose
   line fills while a step is shown (Team G, 2026-11-05: the controls read as part of the player, each step stays up
   long enough to read slowly). */
.tsp-root{container-type:inline-size}
.tsp-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"photo side" "ctrl ctrl";height:560px;border:1px solid var(--q-ink);background:var(--q-white)}
.tsp-photo{grid-area:photo;position:relative;overflow:hidden;background:#333;margin:0}
.tsp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease-out}
.tsp-photo img.grey{filter:grayscale(1)}
.tsp-zoom{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:var(--white);color:var(--ink);cursor:zoom-in}
.tsp-zoom:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.tsp-side{grid-area:side;display:flex;flex-direction:column;justify-content:center;padding:32px 40px;min-width:0;min-height:0}
.tsp-tw{display:grid;align-content:start;min-height:0}
.tsp-text{grid-area:1/1;margin:0;max-width:30em;font:600 clamp(22px, 2.5cqi, 30px)/1.32 var(--font-head);letter-spacing:-.005em;text-wrap:pretty;color:var(--q-ink)}
.tsp-text:not(.tsp-ghost){align-self:center}   /* a short step sits in the middle of the box, not on top of an empty band */
.tsp-ghost{visibility:hidden}   /* every step laid out unseen in the same place: the box is as tall as the longest step, so nothing jumps or is cut */
.tsp-text.grey{color:var(--q-muted)}
.tsp-key{background-image:linear-gradient(transparent 56%,rgba(248,243,110,.9) 56%,rgba(248,243,110,.9) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;color:#333}
html[data-theme="dark"] .tsp-key{background-image:linear-gradient(#f8f36e,#f8f36e)}   /* dark: the whole line yellow, ink on it */
.tsp-ctrl{grid-area:ctrl;display:flex;align-items:center;gap:24px;padding:12px 24px;border-top:1px solid var(--q-line)}
.tsp-nav{display:flex;gap:8px;flex:none}
.tsp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 14px;border:2px solid var(--q-ink);background:var(--q-white);color:var(--q-ink);font:600 16px/1 var(--font-head);cursor:pointer}
.tsp-btn svg{flex:none}
.tsp-play{min-width:112px;background:var(--q-ink);color:var(--q-white)}   /* the one ink button: pause and play */
.tsp-btn:hover{background:var(--q-line);color:var(--q-ink)}
.tsp-steps{flex:1 1 auto;display:flex;min-width:0}
.tsp-step{flex:1 1 0;min-width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 3px;margin:0;border:0;background:none;color:var(--q-muted);font:600 15px/1 var(--font-head);font-variant-numeric:tabular-nums;text-align:left;cursor:pointer}
.tsp-step[aria-current]{color:var(--q-ink)}
.tsp-step:hover .tsp-track{background:var(--q-edge)}
.tsp-track{display:block;height:4px;background:var(--q-line);overflow:hidden}
.tsp-fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--q-ink)}   /* scaled, not resized: no layout on every frame */
.tsp-btn:focus-visible,.tsp-step:focus-visible{outline:3px solid var(--q-sky);outline-offset:2px}
.tsp-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Phones and narrow screens: the whole player fits one screen under the header (photo, text, steps, buttons); the
   photo takes what the text leaves, and the text size follows the screen's height and width. */
@container (max-width:760px){
.tsp-card{display:flex;flex-direction:column;height:clamp(320px, max(calc((100svh - 92px) * .74), min(400px, calc(100svh - 92px))), 600px)}   /* about three quarters of the screen, so the heading and the whole player show together (owner, 2026-11-03); at least 400 px or the whole screen on short ones (story-fit: 320x568, 320x460, 375x553) */
.tsp-photo{flex:1 1 auto;min-height:90px}
.tsp-side{flex:none;padding:14px 16px 12px}
.tsp-text{font-size:clamp(15px, min(2.5svh, 5.2cqi), 22px);line-height:1.3}
.tsp-ctrl{flex-wrap:wrap;justify-content:center;gap:4px 0;padding:4px 12px 10px}
.tsp-steps{flex:1 0 100%}
}
/* Short screens (phones on their side, small laptops): photo beside the text again, as tall as the screen allows. */
@media (max-height:640px) and (orientation:landscape){
.tsp-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:max(300px, calc(100svh - 84px))}
.tsp-side{padding:12px 20px}
.tsp-text{font-size:clamp(16px, 4.2svh, 28px);line-height:1.26}
.tsp-ctrl{flex-wrap:nowrap;gap:16px;padding:6px 16px}
.tsp-steps{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .tsp-photo img{transition:none} }

/* Feature with quote over photo */
.feature-photo{min-height:clamp(520px, 72vh, 760px)}
.feature-photo .inner{display:grid; gap:20px; max-width:44em}
.quote{display:grid; gap:12px; padding-top:18px; border-top:6px solid var(--f,var(--white))}
.quote p{font:600 24px/1.35 var(--font-brand)}
.quote cite{font:600 15px/1.3 var(--font-brand); font-style:normal}
@media (min-width:720px){ .quote p{font-size:30px} }

/* Bento of photos */
.bento{display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:170px; grid-auto-flow:dense}
@media (min-width:800px){ .bento{grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:240px; gap:12px} }
.bento figure{position:relative; overflow:hidden; background:var(--ink)}
.bento img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bento figure:hover img{transform:scale(1.04)}
.bento .b2{grid-column:span 2; grid-row:span 2} .bento .w{grid-column:span 2} .bento .t{grid-row:span 2}
.bento figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 14px 12px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.76)); color:var(--white); font:600 15px/1.3 var(--font-brand)}
.bento figcaption span{display:block; font-weight:400; font-size:13px; color:var(--on-dark)}

/* Press */
.wall{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:2px solid var(--ink)}
.wall span{display:flex; align-items:center; min-height:72px; padding:12px 12px 12px 0; border-bottom:1px solid var(--line); font:700 20px/1.1 var(--font-head); letter-spacing:.005em}
@media (min-width:800px){ .wall{grid-template-columns:repeat(4,minmax(0,1fr))} .wall span{min-height:96px; font-size:30px} }
.story{position:relative; display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:4px solid var(--f,var(--red))}
.story .meta{font:600 14px/1.3 var(--font-brand); color:var(--muted)}
.story h3{font:700 20px/1.2 var(--font-head)} .story h3 a{text-decoration:none; color:inherit}
.story a::after{content:""; position:absolute; inset:0}
.story:hover h3{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.press-list{border-top:2px solid var(--ink)} .press-contact{margin:24px 0 32px; font-size:17px} .press-contact a{font-weight:600}
.press-item{display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line)}
.press-item .meta{display:flex; flex-wrap:wrap; gap:4px 14px; font:600 14px/1.3 var(--font-brand); color:var(--muted)}
.press-item .meta b, .press-item .meta .outlet{color:var(--ink); font-weight:600}
.press-item .meta .outlet{font:600 14px/1.3 var(--font-brand); text-decoration:underline; text-decoration-color:var(--edge); text-underline-offset:3px}
.press-item .meta .outlet:hover{text-decoration-color:var(--sky); text-decoration-thickness:2px}
.outlets{list-style:none; margin:0; padding:0; columns:2 220px; column-gap:32px; border-top:2px solid var(--ink)}
.outlets li{break-inside:avoid; border-bottom:1px solid var(--line)}
.outlets a{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; font:600 16px/1.3 var(--font-brand); text-decoration:none; color:var(--ink)}
.outlets a:hover span:first-child, .outlets a:hover{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.outlets a[aria-current=page]{font-weight:700; text-decoration:underline; text-decoration-color:var(--q-red); text-decoration-thickness:3px; text-underline-offset:5px}
.outlets .n{font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums}
.outlet-logo{margin:0 0 28px}.outlet-logo img{height:40px; width:auto}
@media (min-width:800px){ .outlets{columns:4 200px} }
.press-item a{font:600 18px/1.35 var(--font-brand); text-decoration:none}
.press-item a:hover{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.press-item .alt{font-size:15px; color:var(--muted)}
@media (min-width:800px){ .press-item{grid-template-columns:200px minmax(0,1fr); gap:24px} .press-item .meta{flex-direction:column; gap:2px} }

/* Event posters: the date as a giant numeral on the category's colour field */
.poster{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); background:var(--white)}
.poster .pf{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:24px 20px 0}
.poster .day{font:700 56px/.82 var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.poster .mon{font:700 20px/1.05 var(--font-head); text-align:right}
.poster .body{display:flex; flex-direction:column; gap:10px; padding:20px; flex:1}
.poster .type{display:flex; align-items:center; gap:8px; font:600 14px/1.25 var(--font-brand)}
.poster .type .flag{font-size:14px}
.poster .foot{margin-top:auto; padding-top:8px}

/* Chips and filters */
.chip{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:6px 14px; border:2px solid var(--line); background:var(--white); font:600 15px/1.2 var(--font-brand); cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--white)}
.chip .flag{font-size:14px}
.chip .n{font-weight:400; opacity:.75}
.search{width:100%; max-width:440px; min-height:52px; padding:10px 14px; border:2px solid var(--edge); background:var(--white); font:400 17px/1.3 var(--font-brand)}
.search:hover{border-color:var(--ink)}
.search:focus{border-color:var(--ink); outline:3px solid var(--sky); outline-offset:2px}

/* Chart */
.chart{position:relative; display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:2px; align-items:end; height:260px; padding-top:30px; border-bottom:2px solid var(--ink)}
.bar{position:relative; height:var(--h); min-height:2px; background:var(--ink); outline-offset:3px}
.bar:hover, .bar:focus-visible{background:var(--sky)}
.bar .v{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); font:700 16px/1 var(--font-head); white-space:nowrap}
.bar[data-tip]:hover::after, .bar[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; z-index:3; bottom:calc(100% + 32px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--white); padding:6px 10px; font:500 14px/1.3 var(--font-brand); white-space:nowrap; box-shadow:0 18px 48px rgba(28,28,27,.22)}
.bar:first-child[data-tip]::after{left:0; transform:none}
.bar:last-child[data-tip]::after{left:auto; right:0; transform:none}
.axis{display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:2px; margin-top:8px; font:500 13px/1 var(--font-brand); color:var(--muted); font-variant-numeric:tabular-nums}
.axis span{text-align:center}
.cap{margin-top:10px; font:400 14px/1.4 var(--font-brand); color:var(--muted)}
@media (max-width:719px){ .axis span:not(.k){visibility:hidden} .chart{height:190px} .axis span.k{text-align:left; white-space:nowrap} }

/* Archive */
.acc{border-top:2px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 14px; font:700 20px/1.25 var(--font-head); cursor:pointer; list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--line)}
.acc summary .n{margin-left:12px; font:400 16px/1.2 var(--font-brand); color:var(--muted)}
.acc summary svg{width:16px; height:16px; flex:none; transition:transform .15s ease-out}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc details[open] summary{box-shadow:inset 0 -1px 0 var(--line)}
.rows{display:grid}
.row{display:grid; gap:2px 16px; padding:12px 14px; border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .d{font:600 15px/1.35 var(--font-head); letter-spacing:.01em; color:var(--muted); font-variant-numeric:tabular-nums}
.row .t{display:flex; align-items:baseline; gap:10px; font:600 17px/1.35 var(--font-brand)}
.row .t .flag{font-size:13px; position:relative; top:-1px}
.row .p{font-size:15px; color:var(--muted)}
.row a{font-size:15px}
@media (min-width:800px){ .row{grid-template-columns:150px minmax(0,1fr) auto; align-items:baseline} .row .p{grid-column:2} .row .lnk{grid-column:3; grid-row:1} }
@media (prefers-reduced-motion:reduce){ .acc summary svg{transition:none} }

/* Timeline with dated photos */
.timeline{border-top:2px solid var(--ink)}
.timeline li{display:grid; gap:10px 32px; padding:24px 0; border-bottom:1px solid var(--line)}
.timeline .yr{font:700 36px/.9 var(--font-head); font-variant-numeric:tabular-nums}
.timeline p{font-size:18px; line-height:1.5; max-width:40em}
.timeline img{width:100%; aspect-ratio:3/2; object-fit:cover}
@media (min-width:800px){ .timeline li{grid-template-columns:140px minmax(0,1fr) 300px; align-items:start} .timeline li:not(.has-ph) p{grid-column:2 / span 2} .timeline .yr{font-size:56px} }

/* Team */
.team{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px}
@media (min-width:720px){ .team{grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px} }
@media (min-width:1080px){ .team{grid-template-columns:repeat(4,minmax(0,1fr))} }
.person{display:grid; gap:6px; align-content:start}
.person img{width:100%; aspect-ratio:1; object-fit:cover; background:var(--line); margin-bottom:8px}
.person .nm{font:700 20px/1.15 var(--font-head)}
.badge{justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid var(--line); font:500 13px/1.4 var(--font-brand)}
.badge .flag{font-size:10px}
.person .role{font:600 15px/1.35 var(--font-brand)}
.person .bio{font-size:15px; line-height:1.45; color:var(--muted)}
.join{display:flex; flex-direction:column; justify-content:center; gap:12px; grid-column:span 2; aspect-ratio:2/1; padding:24px; box-shadow:inset 0 0 0 2px var(--ink); color:var(--ink); text-decoration:none}
.join .eb{display:inline-flex; align-items:center; gap:8px; font:600 13px/1.2 var(--font-brand); text-transform:uppercase; letter-spacing:.06em}
.join .jt{font:700 22px/1.15 var(--font-head)}
.join .jd{font-size:15px; line-height:1.45; color:var(--muted); max-width:44ch}
.join .btn{align-self:flex-start}
.join:hover{background:var(--line)}
@media (max-width:719px){ .join{aspect-ratio:auto} }
@media (min-width:720px) and (max-width:1079px){ .join{grid-column:span 1; aspect-ratio:auto} .join .jd{display:none} }

/* Help tiles (Russian home): a colour field with the headline, the detail on white */
.needs{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:600px){ .needs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} }
@media (min-width:1000px){ .needs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.need{display:flex; flex-direction:column; padding:0; border:1px solid var(--line); background:var(--white); text-align:left; cursor:pointer}
.need .nf{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:22px 20px 0; font:700 20px/1.15 var(--font-head)}
.need .nf svg{width:18px; height:18px; flex:none; margin-bottom:4px}
.need .ns{padding:8px 20px 18px; font:400 16px/1.4 var(--font-brand); color:var(--muted)}
.need:hover .ns{background:var(--line)}
.alert{display:grid; gap:6px; padding:20px 22px; border:1px solid var(--line); margin-top:24px}
.alert .dab{font:700 20px/1.2 var(--font-head)}
.dir{display:grid; gap:72px}
.dir-sec{display:grid; gap:24px; scroll-margin-top:96px}
.dh{display:grid; grid-template-columns:1fr}
.dh .df{display:flex; align-items:flex-end; min-height:180px; padding:24px}
.dh .df h2{font:700 30px/1.08 var(--font-head); letter-spacing:-.005em}
.dh img{width:100%; height:200px; object-fit:cover}
@media (min-width:800px){ .dh{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .dh .df{min-height:260px; padding:32px} .dh .df h2{font-size:48px} .dh img{height:100%; min-height:260px} }
.items{display:grid; gap:16px}
@media (min-width:720px){ .items{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} }
@media (min-width:1100px){ .items.i3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.item{display:flex; flex-direction:column; gap:8px; padding:22px 24px; border:1px solid var(--line)}
.item .h-card{font-size:22px}
.item p{font-size:16px; line-height:1.5}
.item .foot{margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px}
.topics{display:flex; flex-wrap:wrap; gap:6px}
.topics span{padding:2px 8px; border:1px solid var(--line); font:500 14px/1.4 var(--font-brand)}

/* Programs: alternating photo rows */
.zz{display:grid; gap:64px}
.zz article{display:grid; gap:20px; align-items:center}
.zz img{width:100%; aspect-ratio:4/3; object-fit:cover}
.zz .txt{display:grid; gap:14px}
@media (min-width:900px){ .zz{gap:96px} .zz article{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px} .zz article:nth-child(even) .ph{order:2} }

/* Program page */
.impact{display:grid; align-content:end; gap:16px; min-height:260px; padding:32px}
.impact p{font:700 24px/1.2 var(--font-head); max-width:22em; text-wrap:balance}
@media (min-width:720px){ .impact{padding:48px} .impact p{font-size:44px} }

/* Roles (volunteer pages) */
.role-card{display:flex; flex-direction:column; border:1px solid var(--line)}
.role-card .rf{display:flex; align-items:flex-end; padding:24px 20px 0; font:700 20px/1.15 var(--font-head)}
.role-card p{padding:10px 20px 22px; color:var(--muted)}

/* Shop */
.prod .img{aspect-ratio:1; background:#000}

/* Program tiles, as on qaravan.org/programs */
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 16px}
@media (min-width:800px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr)); gap:56px 28px} }
.tile{display:grid; gap:14px; align-content:start; text-decoration:none}
.tile .box{display:grid; place-items:center; overflow:hidden; aspect-ratio:1}
.picto{width:60%; height:60%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; overflow:visible; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover .picto{transform:scale(1.06) rotate(-2deg)}
.tile .nm{display:flex; align-items:baseline; gap:10px; font:700 19px/1.15 var(--font-head)}
.tile .nm .flag{font-size:14px; position:relative; top:-2px}
.tile:hover .nm span:last-child{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.tile .box.word{display:flex; align-items:flex-end; padding:20px; background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); font:700 24px/1.1 var(--font-head)}
@media (min-width:800px){ .tile .nm{font-size:24px} .tile .box.word{font-size:34px; padding:24px} }
@media (prefers-reduced-motion:reduce){ .picto{transition:none} .tile:hover .picto{transform:none} }
@media (max-width:799px){ .tiles{grid-template-columns:1fr; gap:0; border-top:1px solid var(--line)} .tile{grid-template-columns:64px minmax(0,1fr); align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)} .tile .box{width:64px} .tile:has(.box.word){display:none} .tile .nm{font-size:20px} }
.subs{display:flex; flex-wrap:wrap; gap:8px 28px}

/* Program page: the tile beside About the program, What we do, Our impact */
.prog{display:grid; gap:40px}
.prog .side .ptile{display:grid; place-items:center; width:100%; max-width:240px; aspect-ratio:1}
@media (max-width:799px){ .prog .side{display:none} }
.psec{display:grid; gap:16px; padding-block:36px; border-top:1px solid var(--line)}
.psec:first-child{border-top:0; padding-top:0}
.psec p{font-size:19px; line-height:1.6; max-width:36em}
.psec .said{font:500 24px/1.4 var(--font-brand); max-width:30em; padding-top:20px; border-top:8px solid var(--f,var(--sky))}
@media (min-width:900px){ .prog{grid-template-columns:280px minmax(0,1fr); gap:96px; align-items:start} .prog .side{position:sticky; top:120px} .prog .side .ptile{max-width:none} .psec{padding-block:48px} .psec .said{font-size:28px} }

/* Photo beside an ink panel: type never sits on a busy picture */
.split{display:grid; background:var(--ink); color:var(--white)}
.split .sp-img{position:relative; aspect-ratio:4/3}
.split .sp-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split .panel{display:flex; align-items:center; padding:40px 24px}
.split .inner{display:grid; gap:24px; max-width:34em}
.split .lead{color:var(--on-dark)}
.split .quote p{font-size:22px}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); min-height:480px}
  .split .sp-img{aspect-ratio:auto; min-height:100%}
  .split .panel{padding:56px}
  .split.flip .sp-img{order:2}
  .split .quote p{font-size:26px}
}

/* Press logos, each a link to the story */
.logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 36px}
@media (min-width:1100px){ .logos{flex-wrap:nowrap; justify-content:space-between; gap:32px} }
.logo{display:flex; align-items:center; justify-content:center; min-height:48px; padding:6px 0; text-decoration:none}
.logo img{display:block; height:24px; width:auto; max-width:100%; filter:grayscale(1); opacity:.85; transition:filter .2s, opacity .2s}
.logo:hover img, .logo:focus-visible img{filter:none; opacity:1}
.logo.more{gap:8px; font:600 17px/1.1 var(--font-head)}
.logo.more svg{width:14px; height:14px}
@media (min-width:800px){ .logo img{height:24px} }

/* Funders and partners */
.funders{display:grid; grid-template-columns:1fr; border-top:1px solid rgba(255,255,255,.3)}
@media (min-width:640px){ .funders{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px} }
@media (min-width:1000px){ .funders{grid-template-columns:repeat(4,minmax(0,1fr))} }
.funders a{display:flex; align-items:center; min-height:84px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.3); font:600 18px/1.2 var(--font-head); text-decoration:none}
.funders a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
section:not(.ink) .funders{border-top-color:var(--ink)} section:not(.ink) .funders a{border-bottom-color:var(--line)}

/* Since 2008: a vertical year list; each year shows its milestone, a strip of its own photos and its events and press, expandable */
.tl{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.tl > li{display:grid; gap:14px 40px; padding:32px 0; border-bottom:1px solid var(--line)}
@media (min-width:900px){ .tl > li{grid-template-columns:150px minmax(0,1fr)} }
.tl .yr{font:700 56px/.9 var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tl .tb{display:grid; gap:16px; align-content:start; min-width:0}
.tl .mt{font:400 19px/1.5 var(--font-brand); max-width:44em}
.tl .strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-width:760px}
@media (min-width:640px){ .tl .strip{grid-template-columns:repeat(5,minmax(0,1fr))} }
.tl .strip figure{margin:0} .tl .strip img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.tl .from{font:400 15px/1.5 var(--font-brand); color:var(--muted); max-width:52em} .tl .from a{padding-block:2px; color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:3px}
.tl .more{display:grid; gap:0; max-width:760px; border-top:1px solid var(--line)}
.tl details{border-bottom:1px solid var(--line)}
.tl summary{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; cursor:pointer; list-style:none; font:600 17px/1.2 var(--font-head)}
.tl summary::-webkit-details-marker{display:none} .tl summary svg{width:14px; height:14px; transition:transform .15s} .tl details[open] summary svg{transform:rotate(180deg)}
.tl .ev{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:6px; font-size:15px; line-height:1.45}
.tl .ev li{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:12px} .tl .ev .d{color:var(--muted); font-variant-numeric:tabular-nums}
.tl .ev a{color:var(--ink); font-weight:600}
/* Gallery: albums by year; an album page shows every photo; the viewer stays inside one album */
.gyears{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--blk)}
.gyr + .gyr{margin-top:var(--blk)}
.gyr > h2{margin-bottom:20px}
.albums{list-style:none; margin:0; padding:0; display:grid; gap:28px 16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .albums{grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 24px} }
.alb{display:grid; gap:6px; align-content:start; color:var(--ink); text-decoration:none}
.alb img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:4px}
.alb .at{font:700 18px/1.2 var(--font-head)} .alb .am{font:400 14px/1.4 var(--font-brand); color:var(--muted)} .alb .an{font:600 12px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase}
.alb:hover .at{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.ahead{display:grid; gap:10px; margin-bottom:var(--head)} .ahead .meta{font:400 17px/1.5 var(--font-brand); color:var(--muted)} .ahead .links{display:flex; flex-wrap:wrap; gap:8px 24px}
.agrid{display:grid; gap:6px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){ .agrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} }
@media (min-width:1100px){ .agrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.agrid figure{margin:0} .agrid img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.apn{display:grid; gap:12px; margin-top:var(--blk)} @media (min-width:720px){ .apn{grid-template-columns:1fr 1fr} }
.apn a{display:grid; gap:4px; padding:18px 20px; color:var(--ink); text-decoration:none} .apn small{font:600 12px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)} .apn span{font:700 19px/1.25 var(--font-head)} .apn .nx{text-align:right}
/* Since 2008: one card per milestone, a dated photo or a colour block with the year */
.years{display:grid; grid-template-columns:1fr; gap:48px 24px}
@media (min-width:640px){ .years{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .years{grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px 32px} }
.yc{display:grid; gap:12px; align-content:start}
.yc .media{display:flex; align-items:flex-end; aspect-ratio:3/2; overflow:hidden}
.yc .media img{width:100%; height:100%; object-fit:cover}
.yc .media span{padding:18px 22px; font:700 64px/.8 var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.yc .y{margin-top:6px; font:700 22px/1 var(--font-head); font-variant-numeric:tabular-nums}
.yc p{font-size:17px; line-height:1.5}

/* Page heads and home heroes: text on white beside the photo; nothing is laid over a picture */
.phead{padding-block:var(--blk) calc(var(--sec) / 2)}
.phead .wrap{display:grid; gap:28px; align-items:center}
.ph-text{display:grid; gap:18px; align-content:center}
.ph-img img{width:100%; aspect-ratio:3/2; object-fit:cover}
.ph-img figcaption{margin-top:8px; font:400 14px/1.4 var(--font-brand); color:var(--muted)}
.phead.is-home .h-hero{font-size:clamp(40px, 4.4vw, 60px)}
@media (min-width:900px){ .phead .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px} .phead.is-home .ph-img img{aspect-ratio:4/3} }
@media (min-width:900px){ .phead.is-home .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)} }
/* Home: one captioned photo beside the headline, then where to start (help routes), then news with photos */
.hero2{padding-block:var(--blk) calc(var(--blk) * .6)}
.hero2 .wrap{display:grid; gap:24px}
.hero2 .h-hero{font-size:clamp(38px, 4.4vw, 60px)}
.hero2 .ph-text{display:grid; gap:16px; align-content:center}
.hero2 figure{margin:0}
.hero2 figure img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.hero2 figcaption{margin-top:8px; font:400 14px/1.4 var(--font-brand); color:var(--muted)}
@media (min-width:900px){ .hero2 .wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:56px; align-items:center} .hero2 figure img{aspect-ratio:3/2; max-height:min(58vh,540px)} }
@media (max-width:899px){ .hero2 .btns .btn{padding-inline:16px; font-size:18px} }
section.help{padding-top:0}
/* Homepage hero: the headline on a colour field (the design system's headline field), the photo running to the page edge */
.hero2.hf{padding:0; margin-bottom:var(--blk)}
.hero2.hf .wrap{max-width:none; padding:0; gap:0}
.hero2.hf .ph-text{background:var(--hf); color:var(--hft); padding:36px var(--gut) 32px; gap:18px}
.hero2.hf .ph-text .lead{color:var(--hft)}
.hero2.hf .btns{margin-top:4px}
.hero2.hf[style*="--white"] .btn{background:var(--white); color:var(--ink); border-color:var(--white)} .hero2.hf[style*="--white"] .btn.out{background:transparent; color:var(--white)}
.hero2.hf .btn.out{background:transparent}
.hero2.hf figure img{aspect-ratio:3/2; max-height:none}
.hero2.hf figcaption{padding:8px var(--gut) 0}
@media (max-width:899px){ .hero2.hf[style*="--white"] figure img{aspect-ratio:2/1} }
@media (min-width:900px){ .hero2.hf .btn{padding-inline:18px} }
@media (min-width:900px){ .hero2.hf .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch}
  .hero2.hf .ph-text{padding:72px 32px 64px max(32px, calc((100vw - 1200px) / 2)); align-content:center}
  /* the photo fills the colour block's height and the caption sits on the photo's bottom edge, so both end on one line in light and dark (owner via Team C, 2026-11-05) */
  .hero2.hf figure{position:relative; min-height:520px} .hero2.hf figure img{position:absolute; inset:0; height:100%; aspect-ratio:auto; max-height:none}
  .hero2.hf figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; padding:40px max(32px, calc((100vw - 1200px) / 2)) 14px 16px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.5) 60%, rgba(0,0,0,0)); text-shadow:0 1px 2px rgba(0,0,0,.5)} }
/* Resource finder: one question per screen, big square options, then the assembled page */
#finder{min-height:50vh} section.fd-head{padding-bottom:0} section.fd-body{padding-top:24px}
.reps{display:grid; gap:32px 24px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-bottom:40px}
.rep > a:first-child{display:grid; gap:8px; text-decoration:none; color:inherit}
.rep img{width:100%; height:auto; border:1px solid var(--line)}
.rep a:hover .h-card{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.rep-org{font:400 17px/1.5 var(--font-brand); margin-bottom:24px; max-width:40em}
.rep .rep-pdf{margin-top:6px; font-size:15px; display:inline-block; padding-block:6px} .rep .rep-pdf svg{display:inline; margin-left:6px; vertical-align:-1px}   /* the arrow follows the last word when the line wraps */
.rp-secs{list-style:none; margin:32px 0; padding:0; border-top:2px solid var(--ink)}
.rp-secs a{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none}
.rp-secs img, .rp-n{width:96px; aspect-ratio:4/3; object-fit:cover; display:grid; place-items:center; border:1px solid var(--line); font:700 28px/1 var(--font-head)}
.rp-secs a:hover .h-card{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.rp-secs svg{width:16px; height:16px}
.rp-body{display:grid; gap:18px; font-size:18px; line-height:1.6; margin-bottom:var(--blk)} .rp-body h2{margin-top:16px}
.rp-list{display:grid; gap:8px; padding-left:1.2em; list-style:disc} .rp-list li::marker{color:var(--muted)}
.rp-stats{list-style:none; padding:0; margin:8px 0; display:grid; gap:24px 20px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rp-stats li{display:grid; gap:4px; padding-top:12px; border-top:2px solid var(--ink)} .rp-stats b{font:700 40px/1 var(--font-head)} .rp-stats span{font-size:16px; line-height:1.4}
.rp-months{list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--line)} .rp-months li{display:grid; grid-template-columns:64px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)} .rp-months b{font:600 15px/1.5 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.rp-tw{overflow-x:auto} .rp-t{border-collapse:collapse; width:100%; font-size:16px} .rp-t th, .rp-t td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top} .rp-t thead th{border-bottom:2px solid var(--ink); font:600 15px/1.3 var(--font-head)} .rp-t td{text-align:right; white-space:nowrap}
.rp-fig{margin:0} .rp-fig img{display:block; width:100%; height:auto} .rp-fig figcaption{margin-top:8px; font-size:15px; color:var(--muted)} .rp-open{margin-bottom:28px}
.rp-q{margin:8px 0}
@media (max-width:640px){ .reps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px} }
.fd-intro{display:grid; gap:20px; justify-items:start}
.fd-entry{display:grid; gap:12px; justify-items:start; padding:24px; margin-bottom:var(--blk); border:2px solid var(--ink); color:var(--ink); text-decoration:none; font:400 17px/1.5 var(--font-brand)}
.fd-entry:hover .btn{box-shadow:inset 0 0 0 999px rgba(0,0,0,.18)}
@media (min-width:800px){ .fd-entry{grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:32px; padding:28px 32px} .fd-entry .btn{grid-column:2; grid-row:1 / span 2} }
.fd-priv{max-width:40em; font:400 16px/1.5 var(--font-brand)} .fd-priv b{font-weight:600}
.fd-q{display:grid; gap:20px}
.fd-prog{height:4px; background:var(--line)} .fd-prog span{display:block; height:100%; background:var(--ink); transition:width .25s ease-out}
.fd-n{font:600 13px/1.2 var(--font-head); letter-spacing:.1em; color:var(--muted)}
.fd-opts{display:grid; gap:10px}
@media (min-width:720px){ .fd-opts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fd-opt{display:flex; align-items:center; gap:14px; min-height:60px; padding:14px 18px; border:2px solid var(--line); background:var(--white); color:var(--ink); font:500 18px/1.3 var(--font-brand); text-align:left; cursor:pointer}
.fd-opt:hover{border-color:var(--edge)} .fd-opt[aria-checked="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.fd-box{flex:none; width:22px; height:22px; border:2px solid var(--edge); display:grid; place-items:center}
.fd-opt[role="radio"] .fd-box{border-radius:50%}
.fd-opt[aria-checked="true"] .fd-box{background:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 4px var(--white)}
.fd-nav{display:flex; justify-content:space-between; gap:12px; margin-top:8px}
.fd-nav .btn[disabled]{background:var(--line); border-color:var(--line); color:var(--muted); cursor:not-allowed; box-shadow:none}
.fd-res{display:grid; gap:var(--blk)}
.fd-top{display:grid; gap:20px; padding-top:var(--gap); border-top:2px solid var(--ink)} .fd-pp{font-weight:400}
.fd-note{max-width:44em;margin:24px 0 0;font-weight:600}
.fd-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px} .fd-chips li{padding:6px 12px; border:1px solid var(--edge); font:500 15px/1.3 var(--font-brand)}
.fd-g{display:grid; gap:16px}
.fd-p{display:grid; gap:12px; padding:24px; border:1px solid var(--line); background:var(--white)}
.fd-st{margin:8px 0 0; font:600 15px/1.3 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.fd-steps{margin:0; padding-left:1.4em; display:grid; gap:8px; font-size:16px; line-height:1.5}
.fd-items{list-style:none; margin:0; padding:0; display:grid; gap:12px}
@media (min-width:720px){ .fd-items{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fd-it{display:grid; gap:4px; padding:14px 0 0; border-top:1px solid var(--line); font-size:15.5px; line-height:1.45} .fd-it b{font:700 17px/1.25 var(--font-head)} .fd-meta{color:var(--muted)} .fd-meta a{color:var(--ink); font-weight:600}
@media print{ .hdr, .ftr, .fd-top .btns, .fhead{display:none!important} }
.hero-help{font:400 16px/1.5 var(--font-brand); color:var(--muted)} .hero-help .go{font-size:16px}
section.proof{padding-top:0}
.help .sec-head{margin-bottom:20px}
.routes{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.routes a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; height:100%; min-height:76px; padding:18px 20px; border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; transition:border-color .12s}
.routes a:hover{border-color:var(--ink)}
.routes .rt{font:700 21px/1.2 var(--font-head)}
.routes .rd{grid-column:1; font:400 16px/1.45 var(--font-brand); color:var(--muted)}
.routes a > svg{grid-column:2; grid-row:1; align-self:center; width:16px; height:16px}
@media (min-width:640px){ .routes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .routes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.urgent{margin-top:18px; max-width:52em; font:400 16px/1.5 var(--font-brand)} .urgent b{font-weight:600} .urgent a{font-weight:600; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
.nf2{display:grid; gap:32px}
.nf2-main{display:grid; gap:12px; align-content:start; color:var(--ink); text-decoration:none}
.nf2-main img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.nf2-main .nf-t{font:700 28px/1.15 var(--font-head)} .nf2-main .nf-l{color:var(--muted); max-width:40em}
.nf2-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); align-self:start}
.nf2-list li{border-bottom:1px solid var(--line)}
.nf2-list a{display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; padding:16px 0; color:var(--ink); text-decoration:none; align-items:start}
.nf2-list img{display:block; width:112px; aspect-ratio:4/3; object-fit:cover}
.nf2-list .nb{display:grid; gap:4px} .nf2-list .nf-t{font:700 18px/1.25 var(--font-head)}
.nf2-main:hover .nf-t, .nf2-list a:hover .nf-t{text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
@media (min-width:900px){ .nf2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px} .nf2-main .nf-t{font-size:32px} .nf2-list a{grid-template-columns:136px minmax(0,1fr)} .nf2-list img{width:136px} }

/* Gallery grid: every photo the same shape, caption under it */
.gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px}
@media (min-width:800px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 20px} .gal.g4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gal figcaption{margin-top:8px; font:600 15px/1.35 var(--font-brand)}
.gal figcaption span{display:block; font-weight:400; font-size:14px; color:var(--muted)}

/* Footer */
.ftr{background:var(--ink); color:var(--white)}
.ftr .wrap{padding-block:64px 28px; display:grid; gap:40px}
.ftr .top{display:grid; gap:32px}
@media (min-width:700px){ .ftr .top{grid-template-columns:repeat(var(--fc,3),minmax(0,1fr))} .ftr .top > :first-child{grid-column:1/-1} }
@media (min-width:1100px){ .ftr .top{grid-template-columns:minmax(0,1.3fr) repeat(var(--fc,3),minmax(0,1fr))} .ftr .top > :first-child{grid-column:auto} }
.ftr .ftr-me{margin:16px 0 0; display:flex; flex-wrap:wrap; gap:0 24px}
.ftr .base a{font-family:inherit; font-weight:400; font-size:14px; line-height:1.4; color:var(--on-dark); min-height:0} .ftr .base .cp{margin-right:12px} .ftr .base .lg{display:flex; flex-wrap:wrap; gap:4px 24px}
.ftr img{width:170px; height:auto}
.ftr .tag{margin-top:16px; font-size:15px; line-height:1.5; color:var(--on-dark); max-width:24em}
.ftr h3{font:600 13px/1.2 var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:10px}
.ftr ul{display:grid; gap:2px}
.ftr a{display:inline-flex; align-items:center; min-height:32px; font:500 16px/1.3 var(--font-brand); text-decoration:none}
.ftr a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.ftr :focus-visible{outline-color:var(--white)}
.ftr .base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22); font-size:14px; color:var(--on-dark)}
.qv-ftr .base a{margin-right:16px} .ftr .nw{white-space:nowrap}
/* Phones (owner, 2026-11-04: "more compact, it's super long"): the link columns two by two, tighter spacing, links still easy to tap (38 px) */
.ftr summary{display:block; list-style:none} .ftr summary::-webkit-details-marker{display:none}
@media (min-width:700px){ .ftr summary{cursor:default} }
@media (max-width:699px){ .ftr .wrap{padding-block:32px 20px; gap:20px} .ftr img{width:132px} .ftr .tag{margin-top:10px; font-size:14px} .ftr .ftr-me{margin-top:6px}
  .ftr .top{grid-template-columns:minmax(0,1fr); gap:0} .ftr .top > :first-child{padding-bottom:20px}
  .ftr .fcol{border-top:1px solid rgba(255,255,255,.2)} .ftr .fcol:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
  .ftr summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; cursor:pointer}
  .ftr summary h3{margin:0; font:600 16px/1.3 var(--font-brand); letter-spacing:0; text-transform:none; color:var(--white)}
  .ftr summary::after{content:""; flex:none; width:9px; height:9px; margin:-4px 6px 0 0; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s}
  .ftr details[open] summary::after{margin-top:4px; transform:rotate(-135deg)}
  .ftr .top ul{display:grid; gap:0; padding-bottom:12px} .ftr .top ul a{min-height:40px; font-size:15px; line-height:1.25; color:var(--on-dark)}
  .ftr .base{flex-direction:column; gap:10px; padding-top:0; border-top:0; font-size:13px}
  .ftr .base .lg{gap:0 20px} .ftr .base a{display:inline-flex; align-items:center; min-height:40px} }
@media (max-width:699px) and (prefers-reduced-motion:reduce){ .ftr summary::after{transition:none} }

/* Review fixes, 2026-11-01: no coloured bars on cards (a hairline instead, colour only as a small mark), tap targets of 44px, phone tables as cards */
.qv-card.acc, .qv-card.acc.y{padding-top:var(--pad,22px); box-shadow:none; border-top-color:var(--q-line)}
.role-card .rf, .tf, .need .nf, .poster .pf{box-shadow:none}
.tf{border-top:1px solid var(--line)}
.vq, .qv-quote{border-top:1px solid var(--line)}
.evc{border-top:1px solid var(--line)} .evc .when::before{content:""; display:inline-block; width:10px; height:10px; margin-right:8px; background:var(--f); vertical-align:1px}
.nf2-list a.noimg{grid-template-columns:minmax(0,1fr)}
.nillus{display:grid; place-items:center; aspect-ratio:4/3}
.nillus.nshare{aspect-ratio:1200/630; display:block; box-shadow:inset 0 0 0 1px var(--q-line); background:var(--q-white,#fff)} .nillus.nshare img{display:block; width:100%; height:100%; object-fit:contain} .na-tpl img{background:none; box-shadow:inset 0 0 0 1px var(--q-line)} .na-tpl{margin:8px 0 0}
.ncover{position:relative; overflow:hidden; background:var(--q-white,#fff); box-shadow:inset 0 0 0 1px var(--q-line)} .ncover img{position:absolute; height:72%; width:auto; max-width:84%; left:50%; top:14%; transform:translateX(-50%)}   /* the whole letter inside the frame: cut off at the edge it read as a hole */ .nillus .picto{width:auto; height:56%}
.nf2-main .nillus, .na-fig .nillus{width:100%; aspect-ratio:16/9} .nf2-main .nillus .picto, .na-fig .nillus .picto{height:46%}
.nf2-list .nillus{width:112px} .news-list .ni .nillus{width:120px}
@media (min-width:720px){ .nf2-list .nillus{width:136px} .news-list .ni .nillus{width:240px} }
.tel{white-space:nowrap; font-weight:600; color:inherit; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:3px}
@media (pointer:coarse){
  .ftr a{min-height:44px}
  .crumbs a, .lang a, .tab{display:inline-flex; align-items:center; min-height:44px}
  .more-link a, .g-meta a, .tel, .evc h3 a{padding-block:10px}
  .qv-chip, .chip, .filters button{min-height:44px}
  .outlets a{padding-block:12px}
}
@media (max-width:719px){
  .g-cmp-scroll{overflow:visible} .g-cmp table{min-width:0; display:block} .g-cmp thead{display:none}
  .g-cmp tbody, .g-cmp tr{display:block} .g-cmp tr{border:1px solid var(--q-line); margin-bottom:12px}
  .g-cmp th, .g-cmp td{display:block; border:0; border-top:1px solid var(--q-line)} .g-cmp tbody th{border-top:0; background:var(--q-ink); color:var(--q-white); font:700 16px/1.3 var(--font-head)}
  .g-cmp td[data-l]::before{content:attr(data-l); display:block; margin-bottom:2px; font:600 13px/1.3 var(--font-brand); color:var(--q-muted)}
  .rp-tw{overflow:visible}
}
.rp-t thead th + th{text-align:right}
.fd-g .g-accs{margin-top:0} .fd-acc > summary .h-card{flex:1; margin:0; font-size:19px}
.fd-acc .qv-list-ticks{font-size:16.5px; line-height:1.5; margin-bottom:12px}
.fd-tag{flex:none; font:600 13px/1.2 var(--font-brand); color:var(--muted)}
.fd-own{list-style:none; margin:0; padding:0; display:grid; gap:12px}
@media (min-width:720px){ .fd-own{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fd-own a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:14px 18px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font:700 18px/1.25 var(--font-head)} .fd-own a:hover{border-color:var(--ink)} .fd-own svg{flex:none; width:16px; height:16px}
@media (max-width:719px){ .fd-nav{position:sticky; bottom:0; z-index:5; background:var(--white); padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px)); margin:0; border-top:1px solid var(--line)} }
.fd-res{max-width:100%; overflow-wrap:anywhere}
.fd-save:empty{display:none} .fd-save{margin-top:16px} .fd-ans{margin-top:12px} .fd-keep{margin:8px 0 0; max-width:40em} .sl-gone{margin:8px 0; color:var(--muted)} .sl-tools{margin:12px 0} .sl-pg summary .when{margin-left:auto; padding-right:8px} .fd-in{border-top:1px solid var(--line); padding-top:16px; max-width:34em} .fd-in .h-title{margin:0 0 8px} .fd-saved{font-weight:600}
.sl{border-top:1px solid var(--line)} .sl > summary{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 0; cursor:pointer; list-style:none} .sl > summary::-webkit-details-marker{display:none} .sl > summary svg{width:20px; height:20px; margin-left:auto; flex:none; transition:transform .2s} .sl[open] > summary svg{transform:rotate(180deg)} .sl-h{font:700 20px/1.2 var(--font-head)} .sl > summary .when{margin:0} .sl-b .h-title{font-size:22px} .sl-b{margin:16px 0} .sl-b .h-card{margin:0 0 8px} .sl-p{padding:8px 0 4px; border-bottom:1px solid var(--line)} .sl-t{font-weight:600; margin:0 0 6px} .sl-steps{list-style:none; margin:0 0 6px; padding:0; display:grid; gap:6px} .sl-steps .qv-check{align-items:flex-start}
.g-note{margin:16px 0 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:400 15px/1.5 var(--font-brand); color:var(--muted); max-width:44em}
.stat .lbl a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:2px; text-underline-offset:4px} .stat .lbl a:hover{text-decoration-color:var(--sky)}
.crumbs{margin-bottom:8px}
.g-items > li, .g-items > li > *{min-width:0} .g-meta span{min-width:0} .g-meta span > span{min-width:0; overflow-wrap:anywhere}
@media (max-width:719px){ .g-items{grid-template-columns:minmax(0,1fr)} .g-items > li{grid-template-columns:minmax(0,1fr)}
  /* Phone review, 2026-11-03: Previous / Next of guides and reports one under the other (side by side a title like "Lost, damaged or wrong immigration documents" broke as "immi-gration" in a half-width card) */
  .g-pn{grid-template-columns:minmax(0,1fr)} .g-pn > span:empty{display:none} .g-pn .g-next{grid-column:auto}
  /* year groups of the gallery: 104 px between one row of albums and the next year was mostly air */
  .gyr{padding-block:0} .gyr:first-child{padding-top:calc(var(--sec) / 2)} .gyr:last-child{padding-bottom:calc(var(--sec) / 2)} .gyr + .gyr{margin-top:48px}
  /* About, Since 2008: "All N photos" sat on the photos' bottom edge */
  .tl .ph{display:grid; gap:10px} }
.mt-gap{margin-top:24px} .emerg.cmp{margin:24px 0 0} .emerg.cmp a{grid-template-columns:72px minmax(0,1fr); align-items:center; gap:12px; padding:14px 18px} .emerg.cmp b{font-size:34px} .emerg.cmp span{font-size:15px; line-height:1.4}
@media (max-width:719px){ .fd-res{gap:48px} .fd-res .emerg{gap:8px; margin:0} .fd-res .emerg a{grid-template-columns:76px minmax(0,1fr); align-items:center; gap:12px; padding:14px 16px} .fd-res .emerg b{font-size:34px} .fd-res .emerg b .qv-mark{display:none} .fd-res .emerg span{font-size:15px; line-height:1.4} }

/* Dark theme (owner, 2026-11-04; palette approved by Team C 2026-11-05): <html data-theme="dark">, set before the first paint by
   the inline script in the head (Auto follows the device, or the visitor's choice in qv-theme). Only the neutrals flip; the brand
   colours stay. Colour fields, photos, the ink footer and other fixed-ground boxes keep the light tokens inside them, so their
   text keeps its colour (white on purple, sky, red and photos; ink on orange, yellow and green). */
html[data-theme="dark"]{color-scheme:dark;--white:#333333;--ink:#ecebe6;--muted:#c4bfb5;--line:#55534d;--edge:#a09b91;--q-white:#333333;--q-paper:#333333;--q-ink:#ecebe6;--q-muted:#c4bfb5;--q-line:#55534d;--q-edge:#a09b91;--q-black:#ecebe6}
html[data-theme="dark"] body{background:#333333;color:#ecebe6}
/* on the footer's own grey-black, the footer and the ink fields are set off by a hairline (owner via Team C, 2026-11-05) */
html[data-theme="dark"] .f-ink{box-shadow:inset 0 0 0 1px #6a6862}
html[data-theme="dark"] :is(.f-purple,.f-sky,.f-red,.f-orange,.f-yellow,.f-green,.f-ink,.on-photo,.photo-cap,.bento figure,.lb,.ftr,.hub,.ask-f,.split,.pcard.ruc,.evf-in,.proto,.hero2.hf .ph-text,.logo-band,.logo-band-in){--white:#fff;--ink:#333;--muted:#5e5a53;--line:#ece8de;--edge:#8a857b;--q-white:#fff;--q-paper:#fff;--q-ink:#333;--q-muted:#5e5a53;--q-line:#ece8de;--q-edge:#8a857b;--q-quiet:#ece8de;--q-disabled:#ece8de;--q-disabled-ink:#5e5a53;--q-tab:#333;--surface-page:#fff;--surface-card:#fff;--text-body:#333;--text-muted:#5e5a53;--link:#333;--text-secondary-line:#5e5a53;--surface-tab:#333;color-scheme:light}
html[data-theme="dark"] .hero2.hf[style*="--hft:var(--ink)"]{--hft:#333!important}
html[data-theme="dark"] .hero2.hf[style*="--hft:var(--white)"]{--hft:#fff!important}
html[data-theme="dark"] .qv-hl{color:#333}
html[data-theme="dark"] .ftr{box-shadow:inset 0 1px 0 #6a6862}
/* the header wordmark: the light-on-dark artwork from the first paint (the app also swaps the file) */
html[data-theme="dark"] #home-link img{content:url("/img/logo-wordmark-dark.svg?v=hdr")}
/* field classes used only for their colour mark (a title over a card, no field behind it) keep the page's text colour */
html[data-theme="dark"] :is(.rf,.tf,.need .nf,.poster .pf){color:#ecebe6}
/* the on-page editor always shows the page as the build draws it: light */
html[data-theme="dark"] body.qve-editing{--white:#fff;--ink:#333;--muted:#5e5a53;--line:#ece8de;--edge:#8a857b;--q-white:#fff;--q-paper:#fff;--q-ink:#333;--q-muted:#5e5a53;--q-line:#ece8de;--q-edge:#8a857b;--q-quiet:#ece8de;--q-disabled:#ece8de;--q-disabled-ink:#5e5a53;--q-tab:#333;--surface-page:#fff;--surface-card:#fff;--text-body:#333;--text-muted:#5e5a53;--link:#333;--text-secondary-line:#5e5a53;--surface-tab:#333;color-scheme:light;background:#fff;color:#333}
/* logo walls (partners, funders, the press strip): one warm light band in dark, the logos as in light mode, no box of their own (owner via Team C, 2026-11-05) */
html[data-theme="dark"] body:not(.qve-editing) :is(section.logo-band,.logo-band-in){background:#E6E3DC; color:#333}
html[data-theme="dark"] body:not(.qve-editing) .logo-band-in{padding:24px}
#pv-note{margin:0; padding:8px var(--gut, 16px); background:var(--ink); color:var(--white); font:600 15px/1.3 var(--font-head); text-align:center}
.ftr .ftr-thm{margin:12px 0 0;font-size:14px;color:var(--on-dark)}
.thm-t{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.thm-t:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* narrow phones: the theme button joins the row (logo, theme, RU/EN, Donate, menu) without pushing it past the screen; every target stays 44 px */
@media (max-width:420px){ #hdr .wrap{gap:6px} .hdr-end{gap:2px} #home-link img{width:78px;height:auto} #hdr-cta{padding-left:7px;padding-right:7px;font-size:14px} }
@media (max-width:360px){ #home-link img{width:70px} .hdr-end .tab{min-width:40px} }
/* the first desktop widths: the full menu, the theme button and Donate share one row (Team G's review) */
@media (min-width:1024px) and (max-width:1180px){ .nav a, .nav .qv-edit-in{padding-left:8px; padding-right:8px; font-size:16px} #hdr .wrap{gap:8px} .hdr-end{gap:4px} }
.thm[hidden]{display:none} .thm-t .thm-moon{display:none} html[data-theme="dark"] .thm-t .thm-sun{display:none} html[data-theme="dark"] .thm-t .thm-moon{display:block}
/* the Candid seal (owner, 2026-11-05): Candid's own picture as it is, no plate around it (owner, 2026-11-06: "this weird white border"; the seal draws its own white) */
.ftr .ftr-seal{margin:20px 0 0}
.ftr .ftr-seal a{display:inline-block;min-height:0}
.ftr .ftr-seal img{width:auto;height:94px;display:block}
@media (max-width:719px){.ftr .ftr-seal img{height:78px}}
/* the seal when Candid's widget doesn't load: its plain link instead (TASKS 48) */
.seal-a .seal-txt{display:none} .seal-a.seal-gone img{display:none!important} .seal-a.seal-gone .seal-txt{display:inline}
.ftr .thm button{color:var(--white);font-size:14px;min-height:40px}
.ftr .base a{min-height:24px}   /* WCAG 2.2 target size: 24 px at least with a mouse too */
@media (pointer:coarse){ .ftr .top ul a, .ftr .base a, .ftr .thm button{min-height:44px} }   /* footer links 44 px on touch screens (Team G's review: they were 40) */
.ftr .thm button:first-of-type{padding-left:8px}
/* the comments section's own top space: `.evc` alone is also every event card's class, and gave each card 48 px on top (Team G's review, 2026-11-05) */
#ev-cm{margin-top:48px}
.evc .evc-who{color:var(--muted);font-size:15px}
.evc-f{display:grid;gap:8px;margin:16px 0 24px}
.evc-f label{display:grid;gap:6px;font-weight:600}
.evc-err:empty{display:none}
.evc-err{color:var(--ink);margin:0}
.evc-l,.evc-r{list-style:none;margin:0;padding:0}
.evc-l>.evc-c{border-top:1px solid var(--line);padding:16px 0}
.evc-r{margin:12px 0 0 24px;border-left:1px solid var(--line);padding-left:16px}
.evc-r>.evc-c{padding:8px 0}
.evc-h{margin:0 0 4px}
.evc-t{color:var(--muted);font-size:14px}
.evc-b{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.evc-c.gone>.evc-b{color:var(--muted);font-style:italic}
.evc-acts{display:flex;gap:20px;margin:6px 0 0}
.evc-acts:empty{display:none}
.evc-acts .linkbtn{min-height:32px;font-size:15px}
.evc-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
@media (max-width:719px){.evc-r{margin-left:8px;padding-left:12px}.evc-acts .linkbtn{min-height:44px}}
/* Theory of change blocks (TASKS 22p): classes, not inline styles, so a page published from the editor keeps them (cleanHtml) */
.stats.fit{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.ptext{align-items:center;gap:48px}
.ac-thm{margin:24px 0 0;font-size:16px}
.thm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.thm button{font:inherit;color:inherit;background:none;border:0;padding:0 6px;min-height:32px;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.thm button[aria-pressed="true"]{font-weight:700;text-decoration-color:var(--sky);text-decoration-thickness:2px}
.thm button:hover{text-decoration-color:currentColor}
@media (max-width:719px){.thm button,.ftr .thm button{min-height:44px}}