/* ============================================================
   IHLA — International and Heritage Languages Association
   Northern Alberta
   Design system + site styles
   ------------------------------------------------------------
   Type: Minion Variable (serif) + Gotham (sans) in production.
   Web stand-ins here: Source Serif 4 + Montserrat.
   Colour: extended from the logo's #0e6c7c and #14c96e.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand ramp — the logo's own gradient, stepped */
  --green:      #14C96E;   /* logo accent  */
  --mint:       #34E086;
  --sea:        #12A277;
  --teal:       #0E6C7C;   /* logo primary */
  --teal-700:   #0C5A68;
  --deep:       #09343C;   /* dark ground  */
  --ink:        #06232A;   /* deepest      */

  /* Tints */
  --teal-300:   #7FAEB7;
  --teal-100:   #DCEAED;
  --mint-100:   #DCF7E8;

  /* Warm counterpoint — keeps the palette from reading clinical */
  --clay:       #BE5F3B;
  --clay-600:   #A24E2E;
  --clay-100:   #F6E6DC;
  --ochre:      #C1912E;

  /* Neutrals — warm, paper-like */
  --paper:      #FDF5EE;   /* the hero artwork's own ground */
  --bone:       #F5ECE1;
  --sand:       #EFE3D5;
  --rule:       #E7DACA;
  --body:       #3C4E52;
  --muted:      #596A6E;
  --white:      #FFFFFF;

  /* Type */
  --serif: "Source Serif 4","Minion Variable","Minion Pro",Georgia,serif;
  --sans:  "Montserrat","Gotham","Helvetica Neue",Arial,sans-serif;
  /* Multi-script serif stack — every language in the network gets a proper face */
  --serif-multi: "Source Serif 4","Minion Variable","Noto Naskh Arabic",
    "Noto Serif Armenian","Noto Serif Bengali","Noto Serif Devanagari",
    "Noto Serif Ethiopic","Noto Serif Gujarati","Noto Serif Gurmukhi",
    "Noto Serif Tamil","Noto Serif Telugu","Noto Serif SC","Noto Serif KR",Georgia,serif;

  /* Measure + rhythm */
  --wrap: 1280px;
  --wrap-narrow: 860px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec: clamp(64px, 9vw, 132px);

  --radius: 2px;
  --shadow: 0 1px 2px rgba(6,35,42,.05), 0 12px 32px -12px rgba(6,35,42,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4,h5{margin:0; font-weight:400; color:var(--ink)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0}
hr{border:0; border-top:1px solid var(--rule); margin:0}
::selection{background:var(--mint-100); color:var(--ink)}

/* ---------- 3. Type scale ---------- */
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 6.4vw, 5.2rem);
  line-height:1.02; letter-spacing:-.021em; color:var(--ink);
}
.h1{font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.018em}
.h2{font-family:var(--serif); font-size:clamp(1.85rem,3.4vw,2.85rem); line-height:1.14; letter-spacing:-.014em}
.h3{font-family:var(--serif); font-size:clamp(1.35rem,2.1vw,1.75rem); line-height:1.22; letter-spacing:-.01em}
.h4{font-family:var(--sans); font-size:1.02rem; font-weight:600; line-height:1.4; letter-spacing:-.005em; color:var(--ink)}

.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--teal);
  margin:0 0 1.35rem; display:block;
}
.eyebrow--light{color:var(--mint)}
.eyebrow--clay{color:var(--clay)}

.lede{
  font-family:var(--serif); font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.5; color:var(--body); font-weight:400;
}
.small{font-size:.86rem; line-height:1.55}
.tabular{font-variant-numeric:tabular-nums}

/* Editorial prose */
.prose{max-width:70ch}
.prose p{font-size:1.06rem; line-height:1.72}
.prose h3{margin:2.4em 0 .6em}
.prose ul{margin:0 0 1.4em; padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:1.6em; margin-bottom:.55em}
.prose ul li::before{
  content:""; position:absolute; left:.1em; top:.72em;
  width:9px; height:7px; border-radius:50%; background:var(--green);
}
.prose a{color:var(--teal); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:var(--clay)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.grid{display:grid; gap:clamp(24px,3.4vw,56px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,88px); align-items:center}
.split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.stack>*+*{margin-top:1.2rem}
.center{text-align:center}
.flow-end{justify-self:end}

/* Section headers with a rule, museum-catalogue style */
.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:24px; align-items:end; padding-bottom:22px;
  border-bottom:1px solid var(--rule); margin-bottom:clamp(32px,4vw,56px);
}
.sec-head .h2{max-width:22ch}

/* Grounds */
.ground-bone{background:var(--bone)}
/* ---------- Text on a dark ground ----------
   Four dark surfaces (ink, deep, teal, and the two photo bands) with one set of
   roles between them, rather than a patch per surface. The old arrangement gave
   .ground-deep a fuller set of overrides than .ground-ink, so anything using a
   light-ground class inside an ink section kept its light-ground colour: the
   .lede on the home page's Mother Language Day block was --muted on near-black
   at a contrast ratio of 1.88, and its pull-quote attribution 2.9.

   Teal is much lighter than ink or deep, so it needs its own values — mint
   reads at 9.48 on ink and only 3.52 on teal. Hence tokens per ground and one
   set of component rules that consume them. Every value below is measured at
   4.5:1 or better against its own ground. */
.ground-ink,
.ground-deep,
.photoband,
.photohero{
  --on-dark-h:      var(--paper);   /* 15.2 / 12.4 */
  --on-dark-body:   #C7D8DA;        /* 11.1 /  9.1 */
  --on-dark-dim:    #9FB9BD;        /*  7.9 /  6.5 */
  --on-dark-accent: var(--mint);    /*  9.5 /  7.8 */
}
.ground-teal{
  --on-dark-h:      #fff;           /* 6.08 */
  --on-dark-body:   #E4F0F2;        /* 5.2  */
  --on-dark-dim:    #DCEAED;        /* 4.93 */
  --on-dark-accent: #BFF3D8;        /* 4.93 — mint itself is 3.52 here */
}

.ground-deep{background:var(--deep); color:var(--on-dark-body)}
.ground-ink{background:var(--ink); color:var(--on-dark-body)}
.ground-teal{background:var(--teal); color:var(--on-dark-body)}

/* The roles, applied once to every dark surface. Written flat rather than with
   CSS nesting: Safari only supports `&` from 17.2, and on an older one the whole
   block would be dropped — leaving dark text on a dark ground, which is a worse
   failure than any amount of repetition. `:is()` in the ancestor position is
   safe (Safari 14+). */
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) h1,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) h2,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) h3,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) h4,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .h1,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .h2,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .h3,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .h4,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .display,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .pullquote__q{
  color:var(--on-dark-h);
}
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) p,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) li,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .lede,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .hero__lede{
  color:var(--on-dark-body);
}
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .note,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .small,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .pullquote__by,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .feature__date,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) figcaption,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .stat__label{
  color:var(--on-dark-dim);
}
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .eyebrow,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .eyebrow--light,
:is(.ground-ink,.ground-deep,.ground-teal,.photoband,.photohero) .link-arrow{
  color:var(--on-dark-accent);
}

/* ---------- 5. Buttons + links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  padding:1.05em 1.9em; border-radius:var(--radius); border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--teal); color:#fff}
.btn--primary:hover{background:var(--ink)}
.btn--accent{background:var(--green); color:var(--ink)}
.btn--accent:hover{background:var(--mint)}
.btn--ghost{border-color:var(--teal); color:var(--teal); background:transparent}
.btn--ghost:hover{background:var(--teal); color:#fff}
.btn--light{border-color:rgba(255,255,255,.34); color:#fff; background:transparent}
.btn--light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* No rule under these. The colour shift and the arrow sliding right on hover
   are affordance enough, and the border was reading as a divider rather than as
   part of the link. */
.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--teal);
  transition:color .2s var(--ease);
}
.link-arrow:hover{color:var(--clay)}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}
.ground-deep .link-arrow,.ground-ink .link-arrow{color:var(--mint)}
.ground-deep .link-arrow:hover,.ground-ink .link-arrow:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.link-arrow svg{transition:none}}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(253,245,238,.93);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,5vw,64px); min-height:92px}
.brand{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.brand img{width:172px}

.nav{display:flex; align-items:center; gap:clamp(16px,2vw,34px); list-style:none}
.nav a{
  text-decoration:none; font-size:.78rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); padding:.6em 0; position:relative;
  white-space:nowrap; transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--teal)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--teal)}
.header-cta{display:none}

.nav-toggle{
  display:none; background:none; border:1px solid var(--rule); border-radius:var(--radius);
  width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span{display:block; width:20px; height:1.5px; background:var(--ink); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink);
}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

/* ---------- 7. Hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,104px) clamp(56px,7vw,96px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center}
.hero__title{margin-bottom:1.6rem}
.hero__title em{font-style:italic; color:var(--teal)}
.hero__lede{max-width:44ch; margin-bottom:2.4rem}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero__art{position:relative}
.hero__art img{width:100%}
.hero__caption{
  margin-top:1.4rem; font-size:.74rem; letter-spacing:.05em; color:var(--muted);
  max-width:34ch; padding-left:16px; border-left:2px solid var(--green);
}

/* Page hero (inner pages) */
.pagehero{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,92px) clamp(40px,5vw,64px); border-bottom:1px solid var(--rule)}
.pagehero__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(32px,5vw,72px); align-items:end}
.pagehero .lede{max-width:50ch}
.pagehero__art{opacity:.9}

/* ---------- 7b. Photographic page hero ----------
   Full-bleed photograph, darkened, with two heavily-blurred colour fields
   sampled from that page's own image.  Type sits white on top of both.
   --tint / --tint2 are supplied per page as "r,g,b" triples.            */
.photohero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:#fff;
  border-bottom:0;
}
.photohero__media{position:absolute; inset:0; z-index:0; display:block}
/* The section directly under a photo hero gets less air above it than a section
   in the middle of the page. At --sec (132px at desktop) the first line of the
   page could sit below the fold on a laptop screen even though the reveal had
   fired, which reads as an empty page — the same complaint as the reveal bug,
   from a different cause. Three-quarters of the usual gap is still generous
   under a full-bleed image, and it lifts the first line onto the screen. */
.photohero + .section,
.photohero + .section--tight{padding-top:clamp(48px, 6.6vw, 96px)}


.photohero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  display:block; filter:brightness(.36) contrast(1.08) saturate(.90);
}
/* the colour blur + the readability scrim */
.photohero__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(62% 88% at 14% 78%, rgba(var(--tint),.92) 0%, rgba(var(--tint),0) 68%),
    radial-gradient(58% 76% at 88% 8%,  rgba(var(--tint2),.78) 0%, rgba(var(--tint2),0) 70%),
    linear-gradient(100deg, rgba(6,35,42,.88) 0%, rgba(6,35,42,.66) 46%, rgba(6,35,42,.46) 100%),
    linear-gradient(to bottom, rgba(6,35,42,.42) 0%, rgba(6,35,42,0) 38%, rgba(6,35,42,.52) 100%);
  filter:blur(28px); transform:scale(1.14);
}
.photohero__inner{
  position:relative; z-index:2;
  padding-block:clamp(72px,10vw,148px) clamp(64px,8.5vw,124px);
  max-width:min(var(--wrap,1240px), 100%);
}
.photohero__inner > *{max-width:62ch}
.photohero__title{color:#fff; text-shadow:0 1px 34px rgba(0,0,0,.42); max-width:19ch}
.photohero__title em{color:#fff}
.photohero__lede{
  margin-top:1.6rem; color:rgba(255,255,255,.92); max-width:56ch;
  text-shadow:0 1px 22px rgba(0,0,0,.44);
}
.photohero__lede a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.photohero__lede a:hover{color:var(--mint)}
.photohero .hero__actions{margin-top:2.3rem}
.photohero .eyebrow--light{color:rgba(255,255,255,.86); margin-bottom:1rem; display:block}
@media (max-width:760px){
  .photohero__media img{object-position:50% 38%; filter:brightness(.34) contrast(1.08) saturate(.90)}
  .photohero__wash{filter:blur(20px)}
}

/* ---------- 7c. Inline photograph plates ---------- */
.photo-plate{margin:0; position:relative; overflow:hidden; border-radius:3px;
  background:var(--sand); box-shadow:0 18px 44px -26px rgba(6,35,42,.55)}
.photo-plate img{display:block; width:100%; height:auto}
.photo-plate--wide img{aspect-ratio:16/10; object-fit:cover}
.photo-plate--tall img{aspect-ratio:4/5; object-fit:cover; object-position:50% 32%}

/* ---------- 7d. Photographic band (a mid-page section on a photograph) ----------
   Same three layers as .photohero, but the scrim is heavier: body copy sits
   here, not display type.                                                    */
.photoband{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#fff}
.photoband__media{position:absolute; inset:0; z-index:0; display:block}
.photoband__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  display:block; filter:brightness(.32) contrast(1.08) saturate(.88);
}
.photoband__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(64% 90% at 10% 84%, rgba(var(--tint),.90) 0%, rgba(var(--tint),0) 70%),
    radial-gradient(56% 74% at 90% 6%,  rgba(var(--tint2),.72) 0%, rgba(var(--tint2),0) 72%),
    linear-gradient(100deg, rgba(6,35,42,.88) 0%, rgba(6,35,42,.76) 50%, rgba(6,35,42,.70) 100%);
  filter:blur(28px); transform:scale(1.14);
}
.photoband > .wrap{position:relative; z-index:2}
.photoband .h2, .photoband .display{color:#fff}

/* Light text on a dark photographic ground */
.prose--light{color:rgba(255,255,255,.90)}
.prose--light p{color:rgba(255,255,255,.90)}
.prose--light a{color:#fff; text-decoration-color:rgba(255,255,255,.55)}
.prose--light a:hover{color:var(--mint)}
.prose--light ul li::before{background:var(--mint)}
.photoband .badge-award--light,
.photohero .badge-award--light{background:rgba(255,255,255,.10); color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.34)}
.photoband .badge-award--light b,
.photohero .badge-award--light b{color:var(--mint)}
.badge-award--light b{color:var(--mint)}

/* ---------- 8. Stat band ---------- */
.stats{border-block:1px solid rgba(255,255,255,.12)}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(30px,4vw,52px) clamp(16px,2.4vw,34px); border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0; padding-left:0}
.stat__num{
  font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,3.7rem); line-height:1;
  color:var(--mint); letter-spacing:-.02em; display:block; margin-bottom:.45rem;
}
.stat__label{display:block; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:#9FBBBE; line-height:1.5}

/* ---------- 9. Language wall ---------- */
.langwall{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.lang{
  position:relative; padding:1.5rem 1.25rem 1.35rem; text-decoration:none;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--paper); transition:background .3s var(--ease), color .3s var(--ease);
  display:block; min-height:132px;
}
.lang::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.lang:hover{background:var(--white)}
.lang:hover::after{transform:scaleX(1)}
.lang__native{
  font-family:var(--serif-multi); font-size:1.6rem; line-height:1.25; color:var(--teal);
  display:block; margin-bottom:.5rem; word-break:break-word;
}
.lang__en{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.lang__count{position:absolute; top:1.1rem; right:1.1rem; font-size:.68rem; color:var(--teal-300); letter-spacing:.08em}
.no-results{padding:3rem 0; text-align:center; color:var(--muted); border-bottom:1px solid var(--rule)}

/* The wall as a filter inside the directory: same object, tighter. 19 tiles
   land in two rows at desktop width instead of four. */
/* The wall is the directory's only filter, so the native spellings stay large —
   they are the graphic that carries how many languages the network holds.
   Compactness comes from dropping the tile's minimum height and its padding,
   not from shrinking the type. */
.langwall--filter{
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  overflow:hidden;                       /* the height animates between states */
  margin-bottom:clamp(22px,2.6vw,32px);
}
.langwall--filter .lang{padding:1.05rem 1rem .95rem; min-height:0; height:100%}
.langwall--filter .lang__native{font-size:1.45rem; margin-bottom:.3rem; line-height:1.22}
.langwall--filter .lang__en{font-size:.64rem; letter-spacing:.11em}

.lang-cell{position:relative; display:block; transition:opacity .19s var(--ease), transform .19s var(--ease)}
.lang-cell.is-out{opacity:0; transform:scale(.94); pointer-events:none}
.lang-cell[hidden]{display:none}

/* The clear control on the chosen tile. It sits outside the <a>, because a
   button inside a link is neither valid nor operable. */
.lang__clear{
  position:absolute; top:.5rem; right:.5rem; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.4); border-radius:50%;
  background:transparent; color:#fff; cursor:pointer; padding:0;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.lang__clear:hover{background:rgba(255,255,255,.16); border-color:#fff}
.lang__clear[hidden]{display:none}

/* The tile for the language currently filtering the grid. Matched on the value,
   not the bare attribute — otherwise every tile that has ever been set to
   aria-current="false" reads as selected and outranks :hover. */
.lang[aria-current="true"]{background:var(--teal)}
.lang[aria-current="true"] .lang__native{color:#fff}
.lang[aria-current="true"] .lang__en{color:var(--mint)}
.lang[aria-current="true"]::after{transform:scaleX(1); background:var(--mint)}
/* The site-wide wall drops to two columns below 620px; as a filter that would
   be ten rows deep before a single result, so it holds three. The native size
   scales with the viewport rather than stepping, which is what keeps the long
   endonyms (Українська, Ελληνικά) on one line at every width. */
@media (max-width:620px){
  .langwall.langwall--filter{grid-template-columns:repeat(3,1fr)}
  .langwall--filter .lang{padding:.85rem .7rem .8rem}
  .langwall--filter .lang__native{font-size:clamp(.95rem,3.4vw,1.25rem)}
}
@media (prefers-reduced-motion:reduce){
  .lang-cell{transition:none}
}

/* ---------- 10. Cards ---------- */
.card{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.card:hover{border-color:var(--teal-300); transform:translateY(-3px); box-shadow:var(--shadow)}
.card__art{aspect-ratio:16/10; background:var(--bone); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:1.4rem}
.card__art img{width:78%; transition:transform .5s var(--ease)}
a.card:hover .card__art img{transform:scale(1.045)}
.card__body{padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; gap:.85rem; flex:1}
.card__body .h3{margin:0}
.card__meta{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--clay-600); font-weight:600}
.card__foot{margin-top:auto; padding-top:.6rem}

/* Numbered / indexed programme list */
.index-list{list-style:none; border-top:1px solid var(--rule)}
.index-item{border-bottom:1px solid var(--rule)}
.index-item a{
  display:grid; grid-template-columns:74px minmax(0,1fr) minmax(0,1.05fr) 40px;
  gap:clamp(16px,3vw,44px); align-items:start; padding:clamp(24px,3vw,36px) 0;
  text-decoration:none; transition:padding .3s var(--ease), color .3s var(--ease);
}
.index-item a:hover{padding-left:14px}
/* Same list without the leading number — used on the 404 sitemap, where the
   pages are a set rather than a sequence and an empty first column would just
   indent every title by 74px. */
.index-list--plain .index-item a{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 40px}
.index-item__num{font-family:var(--serif); font-size:1rem; color:var(--teal-300); padding-top:.35em; letter-spacing:.04em}
.index-item__title{font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.16; color:var(--ink); letter-spacing:-.012em}
.index-item a:hover .index-item__title{color:var(--teal)}
.index-item__desc{color:var(--body); font-size:.98rem; line-height:1.62; padding-top:.35em}
.index-item__go{
  justify-self:end; align-self:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--rule); display:flex; align-items:center; justify-content:center;
  color:var(--teal); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.index-item a:hover .index-item__go{background:var(--teal); border-color:var(--teal); color:#fff}

/* ---------- 11. Feature / exhibition block ---------- */
.feature{position:relative; overflow:hidden}
.feature__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(36px,5vw,84px); align-items:center}
.feature__tag{
  /* white on --clay is 4.29:1; --clay-600 takes it to 5.73 */
  display:inline-flex; align-items:center; gap:.6em; background:var(--clay-600); color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  padding:.55em 1em; border-radius:var(--radius); margin-bottom:1.5rem;
}
.feature__date{
  font-family:var(--serif); font-size:1.05rem;
  padding-top:1.2rem; margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.16);
}

/* ---------- 12. Quote ---------- */
.pullquote{max-width:24ch}
.pullquote__q{
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.24;
  letter-spacing:-.014em; color:var(--ink); font-style:italic;
}
.pullquote__by{margin-top:1.6rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- 13. Schools directory ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,3.4vw,44px)}
.chip{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:.72em 1.15em; border:1px solid var(--rule);
  background:transparent; color:var(--body); border-radius:100px; cursor:pointer;
  transition:all .22s var(--ease);
}
.chip:hover{border-color:var(--teal); color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}

.school-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.school{background:var(--paper); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; transition:background .25s var(--ease)}
.school:hover{background:var(--white)}
/* A class setting display:flex outranks the UA's [hidden]{display:none}, so a
   filtered-out card would stay on screen. This is the rule that hides it. */
.school[hidden]{display:none}
.school__lang{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:700}
.school__lang span{color:var(--teal)}
.school__name{font-family:var(--serif); font-size:1.24rem; line-height:1.25; color:var(--ink)}
.school__native{font-family:var(--serif-multi); font-size:1rem; color:var(--teal); font-style:italic}

/* Sister organizations reuse the school card; the only real difference is that
   the whole card is a link out. */
.org{text-decoration:none; color:inherit}
.org__go{
  margin-top:auto; padding-top:1.4rem;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:.55em;
}
.org__go svg{transition:transform .25s var(--ease)}
.org:hover .org__go svg{transform:translateX(4px)}
.org:focus-visible{outline:2px solid var(--teal); outline-offset:-2px}

/* ---------- 14. Facts / definition rows ---------- */
.deflist{border-top:1px solid var(--rule)}
.defrow{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:clamp(16px,3vw,44px); padding:1.5rem 0; border-bottom:1px solid var(--rule)}
.defrow dt{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:.3em}
.defrow dd{margin:0; color:var(--ink); font-size:1.02rem}

/* Timeline */
.timeline{list-style:none; border-left:1px solid var(--rule); margin-left:6px}
.timeline li{position:relative; padding:0 0 2.4rem 2.4rem}
.timeline li::before{
  content:""; position:absolute; left:-7px; top:.45rem; width:13px; height:11px;
  border-radius:50%; background:var(--green); border:3px solid var(--paper);
}
.timeline li:last-child{padding-bottom:0}
.ground-bone .timeline li::before{border-color:var(--bone)}
.timeline__year{font-family:var(--serif); font-size:1.5rem; color:var(--teal); display:block; margin-bottom:.35rem; letter-spacing:-.01em}
.timeline__body{font-size:.98rem; max-width:56ch}

/* ---------- 16. Footer ----------
   Three columns, then a base row with two anchors. The previous version was a
   single left-aligned stack — identity, nav, funders, rule, land, copyright —
   which left the right third of the footer empty and gave the eye nothing to
   align to but one edge. */
.site-footer{
  background:var(--ink); color:#93AEB2;
  padding-block:clamp(56px,6.4vw,88px) clamp(26px,3vw,38px);
}
.site-footer a{text-decoration:none; color:#C3D6D8; transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--mint)}

/* Identity | pages | funders. No heading over the nav: six page names need no
   label. The funders keep theirs, because logos without one mean nothing. */
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(30px,4vw,72px);
  padding-bottom:clamp(38px,4.4vw,58px);
}
.footer__brand img{width:180px; margin-bottom:1.35rem}
.footer__blurb{font-size:.92rem; max-width:36ch; line-height:1.65; margin:0}

.footer__nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.72rem;
  font-size:.93rem;
}

/* Funder acknowledgement. Artwork arrives already reversed, so it is placed,
   not recoloured: funder marks are trademarks and altering them is a licensing
   problem, not a design choice. Height is per logo (--logo-h from the build),
   because normalising on width makes marks of different proportions read at
   wildly different weights. */
/* Bottom-aligned: the logos land on the same line as the social icons, which
   gives the row a horizontal relationship instead of a short third column with
   a hole beneath it. */
.footer__support{align-self:end; text-align:right}
.footer__support ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:clamp(22px,2.4vw,36px);
}
.supporter__logo{
  height:calc(var(--logo-h,34px) * var(--logo-scale,1));
  width:auto; display:block;
}
/* Stand-in where no artwork exists yet. */
.supporter__name{
  font-family:var(--serif); font-size:1.02rem; color:var(--paper); opacity:.9;
}

/* The one label in the row. Nudged up a hair so its cap-height sits on the
   same line as the first nav link beside it, rather than its box top. */
.footer__support-h{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#7A9599;
  margin:0 0 1.15rem;
}

/* Land acknowledgement left, legal right — the second anchor the old footer
   never had. */
/* Grid, not flex: with flex the row decides for itself when to wrap, and the
   media query that left-aligns the copyright can never be placed exactly on
   that point — leaving a band of widths where the two halves sit side by side
   with the right one aligned left. One grid breakpoint governs both. */
.footer__base{
  border-top:1px solid rgba(255,255,255,.11);
  padding-top:clamp(22px,2.6vw,32px);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; gap:.9rem clamp(28px,4vw,64px);
}
/* Both halves shrink; without a basis the two natural widths overflow the row
   and space-between silently becomes a stack. */
.footer__land{
  max-width:52ch; margin:0;
  font-size:.86rem; line-height:1.7; color:#93AEB2;
}
.footer__land a{
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); white-space:nowrap;
}
.footer__land a:hover{border-color:currentColor}
.footer__legal{
  max-width:46ch; margin:0;
  font-size:.78rem; line-height:1.65; color:#7A9599; text-align:right;
}

@media (max-width:900px){
  /* Identity across the top, the two lists side by side under it. */
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
  .footer__support{align-self:start}
}
/* Right-aligning the copyright only reads as an anchor while it is actually at
   the right edge, so the stack and the alignment flip together. */
@media (max-width:710px){
  .footer__base{grid-template-columns:1fr}
  .footer__legal{text-align:left}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr; gap:34px}
  .footer__support{--logo-scale:.8; text-align:left}
  .footer__support ul{justify-content:flex-start}
}

.social{display:flex; gap:.9rem; margin-top:1.6rem}
.social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.social a:hover{background:var(--green); border-color:var(--green); color:var(--ink)}

/* Square icon buttons. `aspect-ratio` does not resolve against a stretched
   flex item's cross size in Chromium, so the side is derived from the same
   metrics .btn is built from: its 1.6 line box plus 2 x 1.05em padding plus the
   1px borders, in the button's own em. Change the button padding and these
   follow. */
.btn{line-height:1.6; --btn-side:calc(3.7em + 2px)}
.btn-social{display:contents}
.btn--icon{
  padding:0; width:var(--btn-side); height:var(--btn-side); flex:0 0 auto;
  justify-content:center; gap:0;
  border-color:var(--rule); background:var(--white); color:var(--teal);
}
.btn--icon:hover{background:var(--teal); border-color:var(--teal); color:#fff}
.btn--icon svg{width:17px; height:17px}

/* The social card on Contact carries the same treatment as the class card
   beside it; only the hashtag needs styling of its own. */
.social-invite b{color:var(--teal); font-weight:600; white-space:nowrap}

/* The dated events list — the site's definition rows with the date in the
   label column. */
.eventlist{margin:0}
/* The date track is never allowed to be narrower than the date it holds.
   `.3fr` alone let "21-30 JULY 2023" overflow a track sized as a fraction of
   the row, and because dt is nowrap it ran straight under the event name. */
.eventlist .defrow{grid-template-columns:minmax(max-content,.3fr) minmax(0,1fr); align-items:baseline}
.eventlist dt{white-space:nowrap}
.event__name{
  display:block; font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.25; color:var(--ink); letter-spacing:-.01em;
}
.event__note{display:block; margin-top:.45rem; font-size:.93rem; line-height:1.6; color:var(--muted); max-width:56ch}

/* Directory: the label sits above the language wall, the live result count
   below it, immediately over the cards it describes. */
.dir-head{margin:0 0 clamp(16px,2vw,24px)}
.dir-count{margin:0 0 1rem; color:var(--muted)}

/* ---------- School card disclosure: contact + class times ----------
   A native <details>, so it works with JS off, is keyboard-operable and
   announced correctly without help, and opens for find-in-page. */
.sd{margin-top:.15rem}
.sd__summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:.6em; padding:.2rem 0 .1rem;
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  transition:color .2s var(--ease);
}
.sd__summary::-webkit-details-marker{display:none}
.sd__summary:hover{color:var(--clay-600)}
.sd__i{flex:0 0 auto; opacity:.9}
.sd__body{margin:.5rem 0 .35rem}
.sd__row{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:.6em 1em; padding:.5rem 0; border-bottom:1px solid var(--sand);
}
.sd__row:last-child{border-bottom:0}
.sd__row dt{
  font-size:.66rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); padding-top:.25em;
}
.sd__row dd{margin:0; font-size:.9rem; line-height:1.55; color:var(--body);
  /* revealed addresses are long and unbreakable, and would otherwise run past
     the card edge */
  overflow-wrap:anywhere;}
.sd__row dd a{color:var(--teal); text-decoration:none; border-bottom:1px solid var(--rule)}
.sd__row dd a:hover{color:var(--clay-600); border-color:currentColor}
.school__pending{
  margin-top:.35rem;
  font-size:.82rem; line-height:1.6; color:var(--muted);
}
.school__pending a{color:var(--teal)}

/* ---------- Never two hairlines ----------
   A section head already draws a rule; any ruled list directly under it drops
   its own top border rather than adding a second line a gap below the first.
   Same for lists stacked back to back — the previous list's last row has
   already drawn that line. */
.sec-head + .langwall,      .sec-head + * > .langwall,
.sec-head + .index-list,    .sec-head + * > .index-list,
.sec-head + .reslist,       .sec-head + * > .reslist,
.sec-head + .deflist,       .sec-head + * > .deflist,
.reslist + .reslist,
.archive + .reslist,
.h3 + .reslist,
.archive + * > .reslist,
.reslist + .h3 + .reslist{border-top:0}

/* Standing intro paragraph under a section head. */
.sec-intro{color:var(--muted); font-size:.98rem; line-height:1.7; max-width:64ch}

/* ---------- 17. Misc ---------- */
.ribbon{overflow:hidden; line-height:0}
.ribbon img{width:100%; min-width:1100px}
.note{
  font-size:.8rem; color:var(--muted); border-left:2px solid var(--sand);
  padding-left:1rem; line-height:1.6;
}
.badge-award{
  display:inline-flex; align-items:center; gap:.75em; border:1px solid var(--rule);
  background:var(--white); padding:.8em 1.2em; border-radius:100px;
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--ink);
}
.badge-award b{color:var(--clay); font-weight:700}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:200; background:var(--ink); color:#fff; padding:.8em 1.2em}

/* ---------- 18. Responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .header-cta{display:flex; align-items:center; gap:14px}
  .nav-toggle{display:flex}

  .index-item a{grid-template-columns:56px minmax(0,1fr) 36px}
  .index-item__desc{grid-column:2/4; padding-top:.6em}
}
@media (max-width:900px){
  .hero__grid,.split,.split--7-5,.split--5-7,.feature__grid,.pagehero__grid{grid-template-columns:1fr}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:1px solid rgba(255,255,255,.12); padding-left:clamp(16px,3vw,28px)}
  .stat:nth-child(odd){border-left:0; padding-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .hero__art{max-width:460px; margin-inline:auto}
  .pagehero__art{display:none}
  .sec-head{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr}
  .stat{border-left:0; padding-left:0 !important; border-bottom:1px solid rgba(255,255,255,.12)}
  .stat:last-child{border-bottom:0}
  .defrow{grid-template-columns:1fr; gap:.4rem}
  /* `.eventlist .defrow` outranks the line above on specificity, so the events
     list kept two columns on a phone while every other definition row stacked.
     Restated here at matching specificity, and the date may wrap once stacked. */
  .eventlist .defrow{grid-template-columns:1fr; gap:.35rem}
  .eventlist dt{white-space:normal}
  .sd__row{grid-template-columns:1fr; gap:.25rem}
  .langwall{grid-template-columns:repeat(2,1fr)}
  .brand img{width:140px}
  .site-header__inner{min-height:74px}
}

/* Mobile nav panel */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:90; background:var(--paper);
  padding:24px var(--gutter); overflow-y:auto;
}
.mobile-nav.open{display:block}
.mobile-nav__top{display:flex; justify-content:space-between; align-items:center; min-height:68px; margin-bottom:24px}
.mobile-nav__close{background:none; border:1px solid var(--rule); width:46px; height:46px; border-radius:var(--radius); cursor:pointer; font-size:1.2rem; color:var(--ink)}
.mobile-nav ul{list-style:none; border-top:1px solid var(--rule)}
.mobile-nav li{border-bottom:1px solid var(--rule)}
.mobile-nav a{
  display:block; padding:1.15rem 0; text-decoration:none; font-family:var(--serif);
  font-size:1.5rem; color:var(--ink);
}
.mobile-nav a:hover{color:var(--teal)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Reveal on scroll */
/* 1.1s, paired with the -16% rootMargin in site.js — see the comment there.
   The two are one setting in two files. */
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}


/* ---------- 19. Additions ---------- */
/* Editorial line breaks that only apply on wide screens */
br.br-lg{display:inline}
@media (max-width:900px){ br.br-lg{display:none} }

/* Let long headings find their own rag where the browser supports it */
.display,.h1,.h2,.h3{text-wrap:balance}
.lede,.hero__lede{text-wrap:pretty}

/* Endonyms anywhere in body copy */
.endonym{font-family:var(--serif-multi); font-style:italic; color:var(--teal)}

/* Focus visibility */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:2px;
}
.ground-deep a:focus-visible,.ground-ink a:focus-visible,.ground-teal a:focus-visible{outline-color:var(--mint)}

/* ---------- 20. Frieze hero ----------
   The supplied illustration is a horizontal band of figures standing on a
   ground line, so it is treated like a mural: full-bleed, its own cream
   matched to --bone so the seam above is invisible, and cropped just below
   the feet so the figures stand directly on the statistics band beneath. */
.hero--frieze{
  background:var(--paper);
  padding-block:clamp(56px,7vw,104px) 0;
  text-align:center;
  overflow:hidden;
}
.hero--frieze .hero__intro{padding-bottom:clamp(26px,3.4vw,52px)}
.hero--frieze .hero__title{max-width:24ch; margin-inline:auto; margin-bottom:1.6rem}
.hero--frieze .hero__lede{max-width:58ch; margin-inline:auto; margin-bottom:2.4rem}
.hero--frieze .hero__actions{justify-content:center}

.frieze{margin:0; line-height:0; display:block}
.frieze img{
  width:100%; max-width:2048px; margin-inline:auto;
  display:block; height:auto;
}
/* Beyond the artwork's natural width the matched cream simply continues,
   so the band reads as full-bleed on any monitor. */

/* A frieze detail used inside a layout: its cream ground reads as a plate */
.plate img{width:100%; display:block; border-radius:var(--radius)}

@media (max-width:640px){
  .hero--frieze .hero__title{max-width:none}
  .frieze img{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .frieze img{
    animation:frieze-in 1.1s var(--ease) both;
    animation-delay:.15s;
  }
  @keyframes frieze-in{
    from{opacity:0; transform:translateY(14px)}
    to{opacity:1; transform:none}
  }
}

/* Buttons and arrow links inside .prose must not inherit the prose link styling */
.prose a.btn,.prose a.link-arrow{text-decoration:none}
.prose a.btn--primary,.prose a.btn--light{color:#fff}
.prose a.btn--accent{color:var(--ink)}
.prose a.btn--ghost{color:var(--teal)}
.prose a.btn--ghost:hover{color:#fff}
.prose a.btn--primary:hover,.prose a.btn--accent:hover,.prose a.btn--light:hover{color:var(--ink)}
.prose a.btn--light:hover{color:var(--ink)}
.prose a.link-arrow{color:var(--teal)}
.prose a.link-arrow:hover{color:var(--clay)}
.ground-deep .prose a.link-arrow,.ground-ink .prose a.link-arrow{color:var(--mint)}

/* ---------- 21. Frieze hero — vertical economy ----------
   Goal: the children reach above the fold on a laptop. Three levers, in order
   of how much they cost the design: let the headline use its full measure
   (three lines, not four), trim the scale and the rhythm, and only then crop. */
.hero--frieze{padding-block:clamp(28px,3vw,50px) 0}
.hero--frieze{background:var(--paper)}

.hero--frieze .hero__title{
  /* The line breaks are authored; no measure cap is needed and a cap was
     forcing a fourth line. */
  max-width:none;
  font-size:clamp(2.2rem,4.0vw,3.9rem);
  text-wrap:initial;
  margin-bottom:1.2rem;
}
.hero--frieze .hero__lede{
  max-width:min(74ch,900px);
  font-size:clamp(1.05rem,1.4vw,1.22rem);
  margin-bottom:1.6rem;
}
.hero--frieze .hero__intro{padding-bottom:clamp(16px,1.7vw,26px)}
.hero--frieze .eyebrow{margin-bottom:1rem}

/* The artwork is never cropped. Instead it runs up behind the intro copy and
   dissolves into the paper ground, so the top row of letterforms reads as a
   watermark behind the headline and buttons rather than being sliced at a hard
   edge. The tuck is a percentage of the hero's width, so the children keep the
   same size and stay welded to the top of the statistics band at every size —
   only the top of the picture moves, and it moves under the text. */
.hero--frieze{position:relative}
.hero--frieze .hero__intro{position:relative; z-index:2}

.frieze{position:relative; z-index:1; margin-top:-7%}
.frieze::after{
  content:""; position:absolute; inset:0 0 auto 0; height:54%;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(253,245,238,.985) 0%,
    rgba(253,245,238,.94)  16%,
    rgba(253,245,238,.74)  38%,
    rgba(253,245,238,.40)  62%,
    rgba(253,245,238,.12)  84%,
    rgba(253,245,238,0)   100%);
}
@media (max-width:900px){ .frieze{margin-top:-9%} }

/* Active language filter, set by the language wall rather than a search field */
.chip--active{
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--clay); border-color:var(--clay); color:#fff;
}
.chip--active:hover{background:var(--clay-600); border-color:var(--clay-600); color:#fff}
.chip--active[hidden]{display:none}


/* ---------- 22. Resource library ---------- */
.reslist{list-style:none; border-top:1px solid var(--rule)}
.res{
  display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,auto);
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--rule);
}
.res__kind{
  font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--clay-600); padding-top:.25em;
}
.res__body{display:block}
.res__title{
  display:block; font-family:var(--serif); font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.3; color:var(--ink); letter-spacing:-.008em;
}
.res__desc{display:block; margin-top:.45rem; font-size:.93rem; line-height:1.6; color:var(--muted); max-width:62ch}
.res__act{white-space:nowrap}
/* The resource-list action is the same species as .link-arrow, so it loses its
   rule too. */
.res__go{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--teal);
  transition:color .2s var(--ease);
}
.res__go:hover{color:var(--clay)}
.res__go svg{transition:transform .25s var(--ease)}
.res__go:hover svg{transform:translateX(3px)}

/* Jump links reuse the chip shape but behave as links */
a.chip{text-decoration:none; display:inline-flex; align-items:center}

@media (max-width:760px){
  .res{grid-template-columns:1fr; gap:.5rem; align-items:start}
  .res__kind{padding-top:0}
  .res__act{margin-top:.5rem}
}

/* ---------- 23. Archive components ---------- */

/* Responsive video embed — youtube-nocookie, lazy, no autoplay */
.embed{position:relative; aspect-ratio:16/9; background:var(--ink); border-radius:var(--radius); overflow:hidden}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Newsletter archive: one card per volume */
.archive{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.vol{background:var(--paper); padding:1.1rem 1.1rem 1.3rem; display:flex; flex-direction:column; gap:.15rem}
.ground-bone .vol{background:var(--bone)}
.vol__no{font-family:var(--serif); font-size:1.15rem; color:var(--ink); letter-spacing:-.01em}
.vol__yr{font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.vol__list{list-style:none; display:flex; flex-wrap:wrap; gap:.3rem}
.vol__list a{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; color:var(--teal); background:var(--white);
  border:1px solid var(--rule); border-radius:100px; padding:.25em .7em;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.vol__list a:hover{background:var(--teal); border-color:var(--teal); color:#fff}

/* Year-indexed video list, used for the Mother Language Day archive */
.yearlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); margin-top:clamp(32px,4vw,52px)}
.yr{
  background:var(--deep); padding:1.15rem 1.2rem; text-decoration:none; display:block;
  transition:background .25s var(--ease);
}
.yr:hover{background:var(--ink)}
.yr__year{display:block; font-family:var(--serif); font-size:1.5rem; color:var(--mint); line-height:1; margin-bottom:.4rem}
.yr__title{display:block; font-size:.86rem; line-height:1.45; color:#C7D8DA}
.yr:hover .yr__title{color:var(--paper)}

@media (max-width:620px){
  .archive{grid-template-columns:repeat(2,1fr)}
  .yearlist{grid-template-columns:repeat(2,1fr)}
}

/* The resource list is sometimes placed inside .prose; don't inherit its bullets */
.prose .reslist,.prose .archive,.prose .yearlist{list-style:none}
.prose .reslist li,.prose .vol__list li{padding-left:0; margin-bottom:0}
.prose .reslist li::before,.prose .vol__list li::before{content:none}
.prose .res__go,.prose .vol__list a{text-decoration:none}

/* ---------- 24. Land acknowledgement ----------
   Given room and a quiet frame rather than a feature ground — considered,
   not dramatised. Sits before the history timeline on the About page,
   because the history of this land precedes IHLA's own. */
.ackn{
  /* Left-aligned at the same measure as .prose. It was centred at 66ch, which
     set it and the mandate block apart from every other body block. */
  max-width:70ch;
  padding-block:clamp(32px,4vw,52px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  text-align:left;
}
.ackn .eyebrow{margin-bottom:1.6rem}
.ackn__lead{
  font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.42; color:var(--ink); letter-spacing:-.008em; margin-bottom:1.4rem;
}
.ackn p{font-size:1.02rem; line-height:1.72}
.ackn__foot{margin-top:2rem}
.ackn [lang="cr"]{font-style:italic}

/* Everything else about .footer__land lives in §16; only the Cree italic is
   here, beside the other land-acknowledgement type. */
.footer__land [lang="cr"]{font-style:italic}