/* ---------------------------------------------------------------------
   Self-hosted fonts. No external request is made for type: the previous
   Google Fonts link exposed every visitor's IP address to a third party.
   All three families are variable -- required, not cosmetic: h1 is set at
   font-weight 560, which only resolves on a variable face.
   Subsets are limited to what the site writes: latin + latin-ext for the
   Latin faces, arabic for the Naskh. unicode-range keeps the browser from
   fetching a file it has no character for.
   Fraunces, Inter and Noto Naskh Arabic are SIL OFL 1.1 -- see fonts/OFL.txt.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/fraunces-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/fraunces-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Noto Naskh Arabic';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/noto-naskh-arabic-arabic-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ==========================================================================
   Tharan Foundation — Stichting Tharan (i.o.)
   Shared stylesheet for all 11 pages.
   Palette is cream-led; navy and terracotta are accents, never the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ink */
  --ink:#22201B;
  --ink-2:#4A463E;
  --muted:#5A5347;   /* 6.70:1 on cream, 7.4:1 on paper */
  /* --soft is used for small text (stat sources, field hints, placeholders).
     Darkened from #948C7C, which failed WCAG AA at those sizes: this value
     clears 4.5:1 on both paper and cream. */
  --soft:#726B5E;

  /* paper — these lead the page */
  --paper:#FEFCF7;
  --cream:#F6F0E4;
  --cream-2:#EFE7D6;
  --sand:#F2E9D6;

  /* accents — punctuation only */
  --navy:#1B3A4B;
  --navy-2:#2A4E60;
  --navy-d:#122A37;
  --navy-l:#3B5766;
  --terra:#B5502F;
  --terra-d:#9A3F22;   /* text-safe on cream (5.9:1) */
  --gold:#C08A2D;
  --gold-ink:#7A5615;  /* text-safe on cream (5.8:1) */
  --gold-lt:#D9B978;   /* text-safe on navy (6.3:1) */

  /* lines */
  --line:#E4D8C0;
  --line-2:#D9CBAE;
  --line-navy:rgba(246,240,228,.18);

  /* metrics */
  --max:1200px;
  --gut:28px;
  --r-s:8px;
  --r-m:12px;
  --r-l:18px;

  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --ar:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;

  /* shadow */
  --sh-s:0 1px 3px rgba(27,58,75,.05),0 4px 12px rgba(27,58,75,.05);
  --sh-m:0 6px 16px rgba(27,58,75,.07),0 12px 32px rgba(27,58,75,.07);
  --sh-l:0 20px 50px rgba(27,58,75,.13);

  /* motion */
  --e:cubic-bezier(.2,.8,.3,1);
}

/* --------------------------------------------------------------------------
   2. Sadu weave motif
   The signature texture: interlocking zig-zag diamonds, Yemeni sadu-weave.
   Applied as a background image so it can repeat anywhere without SVG id
   collisions. Kept faint — it should whisper, never speak.
   -------------------------------------------------------------------------- */
.weave{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9L9 1L18 9L27 1L36 9M0 9L9 17L18 9L27 17L36 9' fill='none' stroke='%23B5502F' stroke-width='1'/%3E%3C/svg%3E");
  background-size:36px 18px;
  opacity:.09;
}
/* gold variant — for cream panels that sit next to terracotta */
.weave.gold{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9L9 1L18 9L27 1L36 9M0 9L9 17L18 9L27 17L36 9' fill='none' stroke='%23C08A2D' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.14;
}
/* light variant — for navy bands */
.weave.light{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='24' viewBox='0 0 46 24'%3E%3Cpath d='M0 12L11.5 2L23 12L34.5 2L46 12M0 12L11.5 22L23 12L34.5 22L46 12' fill='none' stroke='%23D9B978' stroke-width='1'/%3E%3C/svg%3E");
  background-size:46px 24px;
  opacity:.10;
}
/* wide variant — big, slow, for hero corners */
.weave.wide{background-size:54px 27px;opacity:.07}
/* density variants for the design panels, so repeated panels do not read
   as identical: dense = tighter weave, soft = open weave */
.weave.dense{background-size:22px 11px;opacity:.17}
.weave.soft{background-size:64px 32px;opacity:.10}

/* a horizontal weave rule used as a section divider */
.weave-rule{
  height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9L9 1L18 9L27 1L36 9M0 9L9 17L18 9L27 17L36 9' fill='none' stroke='%23C08A2D' stroke-width='1'/%3E%3C/svg%3E");
  background-size:36px 18px;
  opacity:.3;
  margin:0 auto;
  max-width:220px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:1.03rem;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 0;
}
h1{font-size:clamp(2.35rem,4.9vw,3.65rem);font-weight:560;line-height:1.08}
h2{font-size:clamp(1.75rem,3.1vw,2.45rem)}
h3{font-size:1.22rem}
h4{font-size:1rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--terra-d);text-decoration:none}
a:hover{color:var(--terra-d)}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px;margin:0 auto}
/* Hidden by clipping, not by off-screen positioning: a -9999px offset
   overflows toward the inline end under dir="rtl" and adds a 10,000px scroll
   region. Clipping costs 1px and behaves identically in both directions. */
.skip{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  inset-inline-start:16px;top:12px;z-index:300;
  background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:var(--r-s);
}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   4. Typographic helpers
   -------------------------------------------------------------------------- */
/* Block-level (flex, not inline-flex) with fit-content width: the eyebrow must
   own its line. Section headings are inline-block so their underline matches
   the text width — if the eyebrow were inline-level too, a short heading would
   sit up beside it on the same line. */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  width:-moz-fit-content;width:fit-content;max-width:100%;
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--gold);flex:none}
.eyebrow.on-navy{color:var(--gold-lt)}
.eyebrow.on-navy::before{background:var(--gold-lt)}

.lede{font-size:1.17rem;line-height:1.72;color:var(--muted)}
.muted{color:var(--muted)}
.ar{font-family:var(--ar);direction:rtl;line-height:2}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
header.site{
  position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:100;
  background:rgba(254,252,247,.85);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--e),border-color .4s,background .4s;
}
header.site.scrolled{
  box-shadow:var(--sh-s);
  border-color:var(--line);
  background:rgba(254,252,247,.97);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand .txt b{
  display:block;font-family:var(--serif);font-size:1.16rem;font-weight:600;
  color:var(--ink);line-height:1.02;letter-spacing:-.01em;
}
.brand .txt span{
  display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;margin-top:3px;
}

nav.main{display:flex;align-items:center;gap:0}
nav.main a{
  color:var(--ink-2);font-size:.8rem;font-weight:500;
  padding:9px 7px;border-radius:var(--r-s);position:relative;
  transition:color .2s;white-space:nowrap;
}
nav.main a::after{
  content:"";position:absolute;inset-inline-start:7px;inset-inline-end:7px;bottom:5px;height:2px;
  background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e);
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after,nav.main a.on::after{transform:scaleX(1)}
nav.main a.on{color:var(--terra-d);font-weight:600}

.hgroup{display:flex;align-items:center;gap:12px;flex:none}
.lang{
  display:flex;border:1px solid var(--line-2);border-radius:22px;
  overflow:hidden;font-size:.72rem;font-weight:600;
}
.lang a{padding:6px 12px;color:var(--muted);background:transparent;transition:.2s}
.lang a.active{background:var(--navy);color:#fff}
.lang a:not(.active):hover{background:var(--cream);color:var(--ink)}
.cta-btn{
  background:var(--terra);color:#fff;padding:10px 18px;border-radius:9px;
  font-size:.85rem;font-weight:600;white-space:nowrap;
  transition:transform .2s var(--e),box-shadow .25s,background .2s;
}
.cta-btn:hover{
  background:var(--terra-d);color:#fff;
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(181,80,47,.28);
}
/* The NL toggle has no pages behind it yet, so it explains itself
   rather than failing silently. */
.lang-note{
  position:fixed;top:88px;inset-inline-end:24px;z-index:120;
  max-width:300px;margin:0;
  background:var(--navy);color:#E9E2D2;
  font-size:.8rem;line-height:1.5;
  padding:12px 16px;border-radius:var(--r-s);
  box-shadow:var(--sh-m);
}
.lang-note[hidden]{display:none}
@media(max-width:560px){.lang-note{inset-inline-start:16px;inset-inline-end:16px;max-width:none}}

.burger{
  display:none;background:none;border:1px solid var(--line-2);
  border-radius:9px;padding:10px 11px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:.3s var(--e)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* The Contact CTA is the header's only conversion path, so it may not simply
   vanish in the drawer breakpoint the way it used to. This copy lives inside
   the nav and is shown only there; the .hgroup one is hidden at the same
   width, so exactly one is ever in the accessibility tree. */
nav.main .nav-cta{display:none}

/* The nav needs enough width to sit inline without colliding with the brand
   and the language toggle. Verified by a width sweep after the nav dropped
   from nine items to five: at 1040 both gaps are still 28px, at 1020 they
   collapse to 18. So 1040 is the first width with real headroom, and below
   it the drawer takes over. Re-run the sweep if an item is ever added. */
@media(max-width:1040px){
  nav.main{
    position:fixed;top:76px;inset-inline-start:0;inset-inline-end:0;
    flex-direction:column;align-items:stretch;
    background:var(--paper);padding:16px var(--gut) 26px;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-l);
    transform:translateY(-150%);transition:transform .42s var(--e);
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  nav.main.open{transform:none}
  nav.main a{padding:13px 10px;font-size:.95rem;border-bottom:1px solid var(--cream-2)}
  nav.main a::after{display:none}
  nav.main a.on{color:var(--terra-d);background:var(--cream)}
  .burger{display:block;order:3}
  .hgroup .cta-btn{display:none}
  nav.main .nav-cta{
    display:block;margin-top:16px;padding:14px 10px;border-bottom:0;
    background:var(--terra);color:#FEFCF7;border-radius:10px;
    text-align:center;font-weight:600;
  }
  nav.main .nav-cta:hover{background:var(--terra-d);color:#FEFCF7}
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
main{padding-top:76px}
.blk{padding:clamp(76px,9vw,124px) 0;position:relative}
.blk.tight{padding:clamp(56px,6vw,84px) 0}
.blk.tint{background:var(--cream)}
.blk.sand{background:var(--sand)}
.blk.paper{background:var(--paper)}
.blk.navy{background:var(--navy);color:#E9E2D2;position:relative;overflow:hidden}
.blk.navy h1,.blk.navy h2,.blk.navy h3,.blk.navy h4{color:#FEFCF7}
.blk.navy p{color:#CFC8B8}
.blk.navy .lede{color:#DED7C6}

.section-head{max-width:720px;margin-bottom:clamp(40px,4.5vw,62px)}
.section-head.center{margin-inline-start:auto;margin-inline-end:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center;margin-inline-start:auto;margin-inline-end:auto}
.section-head h2{margin-bottom:20px;position:relative;display:inline-block}
/* the underline draws in on reveal */
.section-head h2::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-12px;height:2px;width:100%;
  background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e) .15s;
}
.section-head.center h2::after{transform-origin:center}
.section-head.rv-in h2::after{transform:scaleX(1)}
.blk.navy .section-head h2::after{background:var(--gold-lt)}
.section-head > p{margin-top:26px;font-size:1.14rem;line-height:1.74;color:var(--muted)}
.blk.navy .section-head > p{color:#CFC8B8}

/* --------------------------------------------------------------------------
   7. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.phero{
  background:var(--cream);
  padding:clamp(64px,8vw,104px) 0 clamp(56px,6vw,84px);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.phero .weave{
  inset-inline-start:auto;width:min(46%,520px);
  -webkit-mask-image:linear-gradient(to left,#000,transparent);
  mask-image:linear-gradient(to left,#000,transparent);
}
.phero .wrap{position:relative;z-index:1}
.phero h1{margin-bottom:22px;max-width:16ch}
.phero .lede{max-width:62ch}
.crumb{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;margin-bottom:16px;
}
.crumb a{color:var(--gold-ink)}
.crumb a:hover{color:var(--terra-d)}

/* --------------------------------------------------------------------------
   8. Home hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 62%,var(--paper) 100%);
  padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px);
}
.hero .weave{
  inset-inline-start:auto;inset-inline-end:0;width:min(52%,640px);
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 72%);
  mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 72%);
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
.status{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--line-2);
  padding:7px 15px 7px 12px;border-radius:22px;
  font-size:.76rem;font-weight:600;color:var(--ink-2);
  margin-bottom:26px;box-shadow:var(--sh-s);
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--terra);flex:none}
.hero h1{margin-bottom:24px}
.hero h1 .accent{color:var(--terra-d);font-style:italic;font-variation-settings:'SOFT' 40,'WONK' 1}
.hero .sub{font-size:1.16rem;line-height:1.74;color:var(--muted);max-width:56ch;margin-bottom:32px}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--terra);color:#fff;
  padding:13px 24px;border-radius:10px;
  font-size:.93rem;font-weight:600;
  transition:transform .2s var(--e),box-shadow .25s,background .2s;
}
.btn:hover{
  background:var(--terra-d);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(181,80,47,.28);
}
.btn .arr{transition:transform .25s var(--e)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--terra);box-shadow:var(--sh-s)}
.btn.light{background:var(--paper);color:var(--navy)}
.btn.light:hover{background:#fff;color:var(--navy-d);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--navy-d);box-shadow:0 10px 26px rgba(27,58,75,.3)}

/* hero visual */
.hero-visual{position:relative}
.hv-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:11px;box-shadow:var(--sh-m);
}
.hv-inner{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:4/5;background:var(--sand);
  display:grid;place-items:center;
}
/* Badge sits top-left and the tag bottom-right, so neither collides with
   the placeholder caption that runs along the bottom of the frame. */
.hv-badge{
  position:absolute;inset-inline-start:-24px;top:42px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:14px 18px;box-shadow:var(--sh-m);
  display:flex;align-items:center;gap:12px;max-width:236px;
}
.hv-badge b{
  font-family:var(--serif);font-size:1.8rem;color:var(--terra-d);
  line-height:1;flex:none;
}
.hv-badge span{font-size:.74rem;color:var(--muted);line-height:1.4}
.hv-tag{
  position:absolute;inset-inline-end:-14px;bottom:-16px;
  background:var(--navy);color:#fff;
  border-radius:22px;padding:8px 16px;
  font-size:.75rem;font-weight:600;
  display:flex;align-items:center;gap:8px;box-shadow:var(--sh-m);
}
.hv-tag svg{width:14px;height:14px;flex:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{max-width:440px;margin:0 auto 26px;width:100%}
  .hv-badge{inset-inline-start:-10px}
  .hv-tag{inset-inline-end:-4px}
}
@media(max-width:420px){
  .hv-badge{inset-inline-start:0;max-width:210px}
  .hv-tag{inset-inline-end:0}
}

/* --------------------------------------------------------------------------
   9. Yemeni design panels
   Where photographs would sit, the panels carry two motifs from Yemeni visual
   culture instead: a sadu-weave ground (the zig-zag/diamond textile pattern
   used across the site) and a stylised qamariya — the pointed-arch fanlight
   of old Sana'a, its radiating segments filled with the site palette at low
   opacity. Restrained on purpose: heritage that whispers.
   -------------------------------------------------------------------------- */
.qamariya{
  position:relative;z-index:1;
  height:70%;width:auto;max-width:62%;
  /* the motif is already low-contrast; this keeps it sitting in the ground
     rather than floating on top of it */
  mix-blend-mode:multiply;
}
@media(max-width:560px){.qamariya{height:66%;max-width:70%}}

/* --------------------------------------------------------------------------
   10. Trust strip
   -------------------------------------------------------------------------- */
.trust{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust .item{display:flex;align-items:center;gap:11px;font-size:.83rem;color:var(--muted);line-height:1.45}
.trust .item svg{width:20px;height:20px;color:var(--gold);flex:none}
.trust .item b{color:var(--ink);font-weight:600;display:block}
@media(max-width:900px){.trust .row{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:520px){.trust .row{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   11. Pillar / card grids
   -------------------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillars.two{grid-template-columns:repeat(2,1fr);gap:24px}
.pillars.three{grid-template-columns:repeat(3,1fr);gap:22px}

.pillar{
  position:relative;overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:30px 26px 28px;
  transition:transform .32s var(--e),box-shadow .32s var(--e),border-color .32s;
}
/* the accent bar reveals on hover */
.pillar::before{
  content:"";position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:3px;
  background:var(--terra);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--e);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--sh-m);border-color:var(--line-2)}
.pillar:hover::before{transform:scaleX(1)}
.pillar .num{
  position:absolute;top:22px;inset-inline-end:24px;
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  /* --gold tops out near 2.9:1 on cream even at full opacity, so the numerals
     use the darker ochre (same family, same role as the eyebrow labels). */
  color:var(--gold-ink);opacity:.75;letter-spacing:-.03em;
}
.pillar .ico{
  width:46px;height:46px;border-radius:11px;
  background:var(--cream);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:20px;
  transition:background .3s,border-color .3s;
}
.pillar .ico svg{width:22px;height:22px}
.pillar:hover .ico{background:var(--sand);border-color:var(--line-2)}
.pillar h3{margin-bottom:11px;letter-spacing:-.015em}
.pillar p{font-size:.93rem;line-height:1.68;color:var(--muted);margin-bottom:16px}
.pillar .tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:600;color:var(--gold-ink);
  letter-spacing:.04em;
}
.pillar .tag .arr{transition:transform .25s var(--e)}
.pillar:hover .tag .arr{transform:translateX(4px)}

@media(max-width:1000px){.pillars{grid-template-columns:repeat(2,1fr)}.pillars.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){
  .pillars,.pillars.two,.pillars.three{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   12. Split (text + visual)
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
/* Forms sit next to a taller text column; centring them leaves the form
   floating out of line with the heading it belongs to. */
.split.top{align-items:start}
/* .rev sections put the visual first in the DOM; leaving it at order 0 is what
   actually flips it to the left column and gives the pages their alternating
   rhythm. (An order:2 here silently cancelled the reversal.) */
.split.rev .visual{order:0}
.visual{position:relative}
.vframe{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:11px;box-shadow:var(--sh-m);
}
.vinner{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:5/4;background:var(--sand);display:grid;place-items:center}
/* Top-right, never bottom: the placeholder caption runs along the bottom of
   every frame, and a bottom-anchored badge lands on top of the caption text
   as soon as that text is more than a couple of words long. */
.vbadge{
  position:absolute;inset-inline-end:-18px;top:-18px;
  background:var(--navy);color:#fff;
  border-radius:var(--r-m);padding:16px 20px;box-shadow:var(--sh-m);
  max-width:220px;
}
.vbadge b{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:3px}
.vbadge span{font-size:.75rem;color:#BFB8A8;line-height:1.45}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:44px}
  /* Stacked, every section should read text-then-image, including .rev ones. */
  .split.rev .visual{order:2}
  .vbadge{inset-inline-end:6px;top:-14px}
}

.feature-list{list-style:none;padding:0;margin:26px 0 30px}
.feature-list li{
  position:relative;padding-inline-start:32px;margin-bottom:16px;
  font-size:.97rem;line-height:1.66;color:var(--muted);
}
.feature-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;
  width:14px;height:14px;border-radius:3px;
  border:1.5px solid var(--gold);
  background:linear-gradient(135deg,transparent 45%,var(--gold) 45%,var(--gold) 55%,transparent 55%);
}
.feature-list li b{color:var(--ink)}
.blk.navy .feature-list li{color:#CFC8B8}
.blk.navy .feature-list li b{color:#FEFCF7}

/* --------------------------------------------------------------------------
   13. Direction band (navy) — the 10-year arc
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
/* .three: a 3-column variant for grids that lost an item (governance funding).
   Scoped so the 4-item step grids on index/about keep repeat(4). Higher
   specificity than the base .steps media rules below, so it needs its own
   mobile stack. */
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.steps.three{grid-template-columns:1fr}}
.step{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-navy);
  border-radius:var(--r-m);
  padding:26px 22px;
}
.step .n{
  width:34px;height:34px;border-radius:9px;
  background:var(--gold);color:var(--navy-d);
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:1.02rem;
  margin-bottom:16px;
}
.step h3{margin-bottom:8px;font-size:1.14rem}
.step p{font-size:.88rem;line-height:1.6;margin:0}
.claim{
  margin-top:38px;text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--gold-lt) !important;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   14. Stats
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:28px 24px;text-align:center;
}
.stat b{
  display:block;font-family:var(--serif);
  font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600;
  color:var(--terra-d);line-height:1;margin-bottom:10px;letter-spacing:-.03em;
}
.stat span{display:block;font-size:.84rem;color:var(--muted);line-height:1.5}
.stat .src{display:block;margin-top:10px;font-size:.68rem;color:var(--soft);letter-spacing:.04em}
.stats.three{grid-template-columns:repeat(3,1fr)}
/* the 3-up row needs wide columns to keep each stat's description to a few
   lines; below that it goes full-width one-per-row rather than cramping. */
@media(max-width:1000px){.stats.three{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
/* Arabic stats: a Latin isolate (KIS/SCP/Pharos) inside a stat description must
   stay INLINE. The shared `.stat span{display:block}` also matches these nested
   <span dir="ltr"> isolates and would stack each acronym on its own line. Scoped
   to rtl; English stat descriptions carry no dir="ltr" isolates, so untouched. */
html[dir="rtl"] .stat span[dir="ltr"]{display:inline}

/* --------------------------------------------------------------------------
   15. Timeline / method steps
   -------------------------------------------------------------------------- */
.method{display:grid;gap:0;counter-reset:m}
.mstep{
  display:grid;grid-template-columns:88px 1fr;gap:28px;
  padding:34px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.mstep:last-child{border-bottom:0}
.mstep .mn{
  font-family:var(--serif);font-size:2.6rem;font-weight:600;
  color:var(--gold-ink);opacity:.8;line-height:1;letter-spacing:-.04em;
}
.mstep h3{margin-bottom:12px;font-size:1.35rem}
.mstep p{color:var(--muted);margin-bottom:0;max-width:66ch}
.mstep .mout{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  background:var(--cream);border:1px solid var(--line);
  border-radius:20px;padding:6px 14px;
  font-size:.76rem;font-weight:600;color:var(--gold-ink);
}
@media(max-width:640px){
  .mstep{grid-template-columns:1fr;gap:10px}
  .mstep .mn{font-size:2rem}
}

/* --------------------------------------------------------------------------
   16. Audience blocks (For Partners)
   -------------------------------------------------------------------------- */
.aud{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:34px 32px;margin-bottom:20px;
  position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.aud:hover{border-color:var(--line-2);box-shadow:var(--sh-s)}
.aud::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--terra);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--e);
}
.aud:hover::before{transform:scaleY(1)}
.aud-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.aud-head .ico{
  width:42px;height:42px;border-radius:10px;flex:none;
  background:var(--cream);border:1px solid var(--line);
  display:grid;place-items:center;
}
.aud-head .ico svg{width:20px;height:20px;color:var(--gold-ink)}
.aud-head h3{font-size:1.28rem}
.aud > p{color:var(--muted);max-width:74ch}
.aud ul{
  list-style:none;padding:0;margin:18px 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px;
}
.aud ul li{
  position:relative;padding-inline-start:22px;
  font-size:.9rem;color:var(--ink-2);line-height:1.55;
}
.aud ul li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;width:8px;height:8px;
  border:1.5px solid var(--gold);transform:rotate(45deg);
}
@media(max-width:700px){.aud ul{grid-template-columns:1fr}.aud{padding:28px 22px}}

/* --------------------------------------------------------------------------
   17. Prose blocks / callouts
   -------------------------------------------------------------------------- */
.prose h2{margin:2.6rem 0 1rem}
.prose h3{margin:2rem 0 .7rem}
.prose > :first-child{margin-top:0}
.prose p{color:var(--ink-2);margin-bottom:1.15em}
.prose ul{padding-inline-start:0;list-style:none;margin:0 0 1.4em}
.prose ul li{position:relative;padding-inline-start:26px;margin-bottom:11px;color:var(--ink-2)}
.prose ul li::before{
  content:"";position:absolute;inset-inline-start:2px;top:9px;width:8px;height:8px;
  border:1.5px solid var(--gold);transform:rotate(45deg);
}

.callout{
  background:var(--cream);border:1px solid var(--line);
  border-inline-start:3px solid var(--gold);
  border-radius:var(--r-s);padding:26px 28px;margin:32px 0;
}
.callout.terra{border-inline-start-color:var(--terra)}
.callout h4{margin-bottom:10px;font-size:1.08rem}
.callout p{color:var(--ink-2);margin-bottom:0}
.callout p + p{margin-top:.9em}

.quote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.44;
  color:var(--ink);margin:0;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}
.quote-wrap{
  border-inline-start:3px solid var(--terra);
  padding:8px 0 8px 30px;margin:36px 0;
}
.quote-wrap cite{
  display:block;margin-top:16px;font-family:var(--sans);font-style:normal;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;
}

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:30px 0}
.faq-item h3{
  margin-bottom:14px;font-size:1.28rem;
  display:flex;gap:14px;align-items:baseline;
}
.faq-item h3::before{
  content:"?";flex:none;
  font-family:var(--serif);color:var(--gold-ink);font-weight:700;
  font-size:1.3rem;line-height:1;
}
.faq-item p{color:var(--muted);margin-bottom:0;padding-inline-start:28px;max-width:74ch}
.faq-item p + p{margin-top:.9em}

/* --------------------------------------------------------------------------
   19. Governance tables (ANBI publication)
   -------------------------------------------------------------------------- */
.dl{
  border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;background:var(--paper);
}
.dl-row{
  display:grid;grid-template-columns:250px 1fr;
  border-bottom:1px solid var(--line);
}
.dl-row:last-child{border-bottom:0}
.dl-row > dt{
  padding:20px 24px;background:var(--cream);
  font-weight:600;font-size:.88rem;color:var(--ink);
  border-inline-end:1px solid var(--line);
}
.dl-row > dd{
  padding:20px 24px;margin:0;
  font-size:.94rem;color:var(--ink-2);line-height:1.65;
  max-width:88ch; /* keep the reading measure sane on wide screens */
}
.dl-row > dd p{margin-bottom:.7em}
.dl-row > dd p:last-child{margin-bottom:0}
@media(max-width:700px){
  .dl-row{grid-template-columns:1fr}
  .dl-row > dt{border-inline-end:0;border-bottom:1px solid var(--line);padding:14px 20px}
  .dl-row > dd{padding:16px 20px}
}

.pending{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--sand);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 9px;
  font-size:.75rem;font-weight:600;color:var(--gold-ink);
  font-family:var(--sans);
}

.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:28px 24px;
}
.role .ico{
  width:40px;height:40px;border-radius:10px;margin-bottom:16px;
  background:var(--cream);border:1px solid var(--line);
  display:grid;place-items:center;
}
.role .ico svg{width:19px;height:19px;color:var(--gold-ink)}
.role h3{font-size:1.1rem;margin-bottom:8px}
.role .who{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terra-d);font-weight:700;margin-bottom:12px;
}
.role p{font-size:.9rem;color:var(--muted);margin:0}
@media(max-width:820px){.role-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   20. Knowledge hub cards
   -------------------------------------------------------------------------- */
.kcard{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .32s var(--e),box-shadow .32s var(--e);
}
.kcard:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.kcard .ktop{
  position:relative;overflow:hidden;
  height:150px;background:var(--sand);
  display:grid;place-items:center;
}
.kcard .ktop .ksym{
  position:relative;z-index:1;
  font-family:var(--serif);font-size:2.2rem;color:var(--gold-ink);opacity:.75;
}
.kcard .kbody{padding:26px 24px;display:flex;flex-direction:column;flex:1}
.kcard .kmeta{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;
}
.chip{
  display:inline-flex;align-items:center;
  background:var(--cream);border:1px solid var(--line);
  border-radius:20px;padding:3px 11px;
  font-size:.7rem;font-weight:600;color:var(--gold-ink);
  letter-spacing:.05em;text-transform:uppercase;
}
.chip.soon{background:var(--sand);color:var(--terra-d);border-color:var(--line-2)}
.chip.live{background:#EAF1EC;color:#2F5D42;border-color:#CBDDD1}
.kcard h3{font-size:1.14rem;margin-bottom:10px;line-height:1.3}
.kcard p{font-size:.9rem;color:var(--muted);margin-bottom:16px;flex:1}
.kcard .klink{
  font-size:.78rem;font-weight:600;color:var(--gold-ink);
  display:inline-flex;align-items:center;gap:6px;
}
.kcard .klink.dim{color:var(--soft)}

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */
.form-wrap{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(28px,3.5vw,44px);
  box-shadow:var(--sh-s);
}
.demo-note{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--sand);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:14px 16px;margin-bottom:30px;
}
.demo-note svg{width:18px;height:18px;color:var(--gold-ink);flex:none;margin-top:2px}
.demo-note p{font-size:.83rem;color:var(--ink-2);margin:0;line-height:1.55}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{
  display:block;font-size:.83rem;font-weight:600;
  color:var(--ink);margin-bottom:7px;
}
.field label .req{color:var(--terra-d);margin-inline-start:2px}
.field .hint{font-size:.76rem;color:var(--soft);font-weight:400;margin-top:5px;display:block}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:.94rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:12px 14px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236E685C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-inline-end:38px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--terra);
  box-shadow:0 0 0 3px rgba(181,80,47,.12);
  background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:var(--soft)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#B23B3B;box-shadow:0 0 0 3px rgba(178,59,59,.1);
}
.err{
  display:none;font-size:.76rem;color:#9B2C2C;margin-top:6px;font-weight:500;
}
.err.on{display:block}

.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px}
.field > .check{margin-bottom:0}
.field > .check + .err{margin-top:8px}
/* Contact form: the reason dropdown's helper box (gold-accent, sand ground).
   A generic form class -- logical properties, so it mirrors under dir="rtl".
   The dynamic extra field reuses .field and toggles the native [hidden]. */
.form-helper{
  margin-top:10px;padding:12px 14px;background:var(--sand);
  border-inline-start:3px solid var(--gold);border-radius:8px;
  font-size:.9rem;line-height:1.7;color:var(--muted);
}
.check input{
  width:17px;height:17px;flex:none;margin-top:3px;
  accent-color:var(--terra);cursor:pointer;
}
.check label{font-size:.84rem;color:var(--muted);font-weight:400;line-height:1.55;margin:0}

.form-ok{
  display:none;
  background:#EAF1EC;border:1px solid #CBDDD1;
  border-radius:var(--r-s);padding:18px 20px;margin-bottom:24px;
}
.form-ok.on{display:flex;gap:12px;align-items:flex-start}
.form-ok svg{width:19px;height:19px;color:#2F5D42;flex:none;margin-top:2px}
.form-ok p{font-size:.88rem;color:#2A4A38;margin:0}
.form-ok:focus-visible,.form-err:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* Shown only if the send fails — the reader still gets a way to reach us. */
.form-err{
  display:none;
  background:#F6E9E4;border:1px solid #E2C4B8;
  border-radius:var(--r-s);padding:18px 20px;margin-bottom:24px;
}
.form-err.on{display:flex;gap:12px;align-items:flex-start}
.form-err svg{width:19px;height:19px;color:#8A3A1E;flex:none;margin-top:2px}
.form-err p{font-size:.88rem;color:#7A3419;margin:0}
.form-err a{color:#8A3A1E;font-weight:600;text-decoration:underline}

/* Web3Forms honeypot: never shown, never focusable, never announced. */
.botcheck{
  display:none !important;
  position:absolute !important;inset-inline-start:-9999px !important;
}

@media(max-width:640px){.frow{grid-template-columns:1fr;gap:0}}

/* contact details column */
.cdetail{margin-bottom:26px}
.cdetail h4{
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:8px;font-family:var(--sans);font-weight:700;
}
.cdetail p{font-size:.95rem;color:var(--ink-2);margin:0}
.cdetail a{font-weight:500}

/* --------------------------------------------------------------------------
   22. CTA band
   -------------------------------------------------------------------------- */
/* Warm, not navy. On pages that also carry the navy direction band, a navy CTA
   would put direction + CTA + footer into one unbroken dark run down the whole
   bottom of the page — navy is punctuation here, not the page. Sand keeps the
   band distinct from both the cream sections above it and the dark footer below. */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--sand);color:var(--ink);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding:clamp(64px,7.5vw,100px) 0;
  text-align:center;
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:var(--ink);margin-bottom:18px}
.cta-band p{
  color:var(--muted);max-width:62ch;margin:0 auto 32px;
  font-size:1.08rem;line-height:1.7;
}
/* The weave reads stronger here than anywhere else on the page — this band is
   where the motif is allowed to be visible rather than subliminal. */
.cta-band .weave.light{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='24' viewBox='0 0 46 24'%3E%3Cpath d='M0 12L11.5 2L23 12L34.5 2L46 12M0 12L11.5 22L23 12L34.5 22L46 12' fill='none' stroke='%23C08A2D' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.2;
}
/* Reuse of .btn.light inside the band: on sand it becomes the navy primary. */
.cta-band .btn.light{background:var(--navy);color:#fff}
.cta-band .btn.light:hover{background:var(--navy-d);color:#fff;box-shadow:0 10px 26px rgba(27,58,75,.28)}
.cta-band .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.cta-band .btn.ghost:hover{background:var(--paper);border-color:var(--terra);color:var(--ink)}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
footer.site{background:var(--navy-d);color:#B8B1A2;padding:clamp(56px,6vw,80px) 0 30px}
footer.site .cols{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);
}
.brand-f{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.brand-f .mark{width:36px;height:36px}
.brand-f b{font-family:var(--serif);font-size:1.2rem;color:#FEFCF7;font-weight:600}
footer.site p{font-size:.88rem;line-height:1.7;color:#9E9787;max-width:42ch}
footer.site .ar{
  margin-top:16px;font-size:.95rem;color:#B8B1A2;
  border-top:1px solid rgba(255,255,255,.08);padding-top:16px;
}
/* Footer column labels. These are navigation labels, not document outline —
   as <h4> after an <h2> they registered as a heading-level skip on any page
   whose last content heading was an h2. Styled by class so the tag is free
   to be a <p> and the visual result is unchanged. */
footer.site h4,footer.site .fcol-h{
  color:#FEFCF7;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px;font-weight:700;
}
footer.site .cols a{
  display:block;color:#9E9787;font-size:.88rem;
  padding:5px 0;transition:color .2s,transform .2s var(--e);
}
footer.site .cols a:hover{color:var(--gold-lt);transform:translateX(3px)}
/* #847D6E only reached 3.6:1 on the footer navy — below AA for this size. */
footer.site .disc{
  font-size:.76rem;color:#9E9787;margin-top:16px;line-height:1.6;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
}
footer.site .base{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:26px;flex-wrap:wrap;
  font-size:.8rem;color:#9E9787;
}
footer.site .base .motto{font-family:var(--serif);font-style:italic;color:var(--gold-lt)}
/* Utility strip in the base row. Not part of .cols, so it needs its own link
   rule — the column rule sets display:block, which would stack these. */
footer.site .futil{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
footer.site .futil a{color:#9E9787;transition:color .2s}
footer.site .futil a:hover{color:var(--gold-lt)}
@media(max-width:900px){
  footer.site .cols{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:560px){
  footer.site .cols{grid-template-columns:1fr}
  footer.site .base{flex-direction:column;align-items:flex-start;gap:8px}
}

/* --------------------------------------------------------------------------
   24. Back to top
   -------------------------------------------------------------------------- */
.totop{
  position:fixed;inset-inline-end:24px;bottom:24px;z-index:90;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;cursor:pointer;
  font-size:1.05rem;line-height:1;
  box-shadow:var(--sh-m);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s var(--e),background .2s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--terra)}
@media(max-width:560px){.totop{inset-inline-end:16px;bottom:16px;width:40px;height:40px}}

/* --------------------------------------------------------------------------
   25. Scroll reveal
   -------------------------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
[data-rv].rv-in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   26. Reduced motion — everything above degrades to instant
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1;transform:none}
  .section-head h2::after{transform:scaleX(1)}
  .pillar:hover,.kcard:hover{transform:none}
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print{
  header.site,.totop,.cta-band,.burger,.lang{display:none}
  main{padding-top:0}
  body{background:#fff;font-size:11pt}
  .blk{padding:18pt 0}
  [data-rv]{opacity:1;transform:none}
  a{color:#000;text-decoration:underline}
}

/* ==========================================================================
   28. Feitenkaart report page
   Long-form report with a sticky section nav and interactive charts.
   Uses the same tokens as the rest of the site — no new palette.
   ========================================================================== */

/* --- publication status band: unmissable, not alarming ------------------ */
/* Was a terracotta draft warning while the
   Feitenkaart was a working publication; now that verification is complete it
   reads as a verified notice. The green is the one already used by .chip.live
   -- no new colour is introduced. */
.status-band{
  background:var(--sand);
  border-bottom:1px solid var(--line-2);
  border-top:3px solid #2F5D42;
  padding:18px 0;
}
.status-band .inner{display:flex;gap:14px;align-items:flex-start}
.status-band .ico{
  width:26px;height:26px;border-radius:7px;flex:none;
  background:#2F5D42;color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.78rem;
  font-family:var(--sans);
}
.status-band b{
  display:block;font-family:var(--serif);font-size:1.02rem;
  color:var(--ink);margin-bottom:4px;
}
.status-band p{font-size:.87rem;color:var(--ink-2);margin:0;line-height:1.6;max-width:92ch}

/* --- report layout: sticky nav + content -------------------------------- */
.fk-layout{
  display:grid;grid-template-columns:236px 1fr;
  gap:clamp(32px,4vw,60px);align-items:start;
}
/* Grid items default to min-width:auto, so a wide data table inside would set
   the column's minimum to its own min-content and blow the layout past the
   viewport — the .tbl-scroll wrappers could never take over. */
.fk-layout > *{min-width:0}
.fk-nav{position:sticky;top:96px}
.fk-nav h4{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:700;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.fk-nav ol{list-style:none;margin:0;padding:0;counter-reset:fk}
.fk-nav li{counter-increment:fk}
/* Scoped to the list: the download link also lives in .fk-nav and must not
   pick up a section counter. */
.fk-nav ol a{
  display:flex;gap:9px;align-items:baseline;
  padding:6px 8px;border-radius:6px;
  font-size:.82rem;color:var(--muted);line-height:1.35;
  border-inline-start:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.fk-nav ol a::before{
  content:counter(fk);flex:none;
  font-size:.7rem;font-weight:700;color:var(--gold-ink);min-width:12px;
}
.fk-nav ol a:hover{color:var(--ink);background:var(--cream)}
.fk-nav ol a.on{color:var(--terra-d);border-inline-start-color:var(--terra);font-weight:600;background:var(--cream)}
.fk-dl{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* Mobile: the sidebar becomes a plain menu above the report. */
@media(max-width:900px){
  .fk-layout{grid-template-columns:1fr;gap:8px}
  .fk-nav{position:static;margin-bottom:26px}
  .fk-nav ol{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
  .fk-nav a{border-inline-start:0;border-bottom:1px solid var(--cream-2)}
}
@media(max-width:520px){.fk-nav ol{grid-template-columns:1fr}}

/* --- report sections ---------------------------------------------------- */
.fk-sec{padding-top:14px;margin-bottom:clamp(52px,6vw,82px);scroll-margin-top:96px}
.fk-sec > h2{margin-bottom:18px;position:relative;padding-bottom:14px}
.fk-sec > h2::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;width:56px;height:2px;background:var(--terra);
}
.fk-sec .snum{
  display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:10px;
}
.fk-sec h3{margin:32px 0 12px;font-size:1.22rem}
.fk-sec h4{margin:24px 0 8px;font-size:1rem;font-family:var(--serif)}
.fk-sec p{color:var(--ink-2);margin-bottom:1.1em;max-width:76ch}
.fk-sec ul{list-style:none;padding:0;margin:0 0 1.3em}
.fk-sec ul li{position:relative;padding-inline-start:24px;margin-bottom:10px;color:var(--ink-2);max-width:76ch}
.fk-sec ul li::before{
  content:"";position:absolute;inset-inline-start:2px;top:9px;width:7px;height:7px;
  border:1.5px solid var(--gold);transform:rotate(45deg);
}
.fk-lede{font-size:1.1rem;line-height:1.7;color:var(--muted);max-width:74ch}

/* --- feitenkaart interactive section ------------------------------------ */
.fk-sec .snum.alt{color:var(--terra-d)}
.fk-data-controls{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px 22px;margin:22px 0 24px;box-shadow:var(--sh-s)}
.fk-field{min-inline-size:0}
.fk-field > label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
#fk-data .chart-head h3{
  font-family:var(--serif);font-size:1.24rem;line-height:1.3;color:var(--navy);
  margin:0 0 10px;text-wrap:balance}
#fk-data .chart-head p{font-size:.93rem;line-height:1.62;color:var(--ink-2);margin:0;max-width:76ch}
@media (max-width:700px){
  .fk-data-controls{grid-template-columns:1fr;padding:16px}
}

/* --- chart card --------------------------------------------------------- */
.chart-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:clamp(18px,2.4vw,28px);
  margin:30px 0;box-shadow:var(--sh-s);
}
.chart-card.lead{border-color:var(--line-2);box-shadow:var(--sh-m)}
.chart-head{margin-bottom:18px}
.chart-head h3{margin:0 0 6px;font-size:1.16rem}
.chart-head p{font-size:.88rem;color:var(--muted);margin:0;max-width:80ch}
.chart-box{position:relative;width:100%;height:clamp(280px,38vw,400px)}
.chart-box.tall{height:clamp(320px,42vw,440px)}

/* source + own-calculation labelling — never stripped */
.chart-source{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--cream-2);
  font-size:.76rem;line-height:1.6;color:var(--muted);
}
.chart-source .lbl{
  display:inline-block;font-weight:700;color:var(--gold-ink);
  letter-spacing:.06em;text-transform:uppercase;font-size:.67rem;margin-inline-end:5px;
}
.chart-source + .chart-source{border-top:0;padding-top:6px;margin-top:6px}
.owncalc{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--sand);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 8px;
  font-size:.68rem;font-weight:700;color:var(--gold-ink);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.unverified{
  display:inline-flex;align-items:center;gap:5px;
  background:#F6E9E4;border:1px solid #E2C4B8;
  border-radius:5px;padding:2px 8px;
  font-size:.68rem;font-weight:700;color:#8A3A1E;
  letter-spacing:.05em;text-transform:uppercase;
}

/* --- data table toggle: the numbers are always reachable ---------------- */
.data-toggle{margin-top:14px;border-top:1px solid var(--cream-2);padding-top:12px}
.data-toggle summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;color:var(--terra-d);
  padding:4px 6px;border-radius:5px;
}
.data-toggle summary::-webkit-details-marker{display:none}
.data-toggle summary::before{
  content:"";width:0;height:0;flex:none;
  border-inline-start:5px solid var(--terra);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .2s var(--e);
}
.data-toggle[open] summary::before{transform:rotate(90deg)}
.data-toggle summary:hover{color:var(--terra-d);background:var(--cream)}
.tbl-scroll{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
table.data{
  width:100%;border-collapse:collapse;font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
table.data caption{text-align:start;font-size:.76rem;color:var(--muted);padding-bottom:8px}
table.data th,table.data td{
  padding:8px 12px;text-align:end;
  border-bottom:1px solid var(--cream-2);white-space:nowrap;
}
table.data th:first-child,table.data td:first-child{text-align:start}
table.data thead th{
  background:var(--cream);color:var(--ink);font-weight:600;
  border-bottom:1px solid var(--line);
}
table.data td{color:var(--ink-2)}
table.data tbody tr:hover td{background:var(--cream)}
table.data .dim{color:var(--soft)}

/* --- province gradation tiers ------------------------------------------ */
.tiers{display:grid;gap:16px;margin:26px 0}
.tier{
  background:var(--paper);border:1px solid var(--line);
  border-inline-start:4px solid var(--line-2);
  border-radius:var(--r-s);padding:20px 22px;
}
.tier.high{border-inline-start-color:var(--terra)}
.tier.low{border-inline-start-color:var(--gold)}
.tier.none{border-inline-start-color:var(--navy)}
.tier h4{margin:0 0 4px;font-size:1.02rem;font-family:var(--serif)}
.tier .meta{font-size:.72rem;color:var(--muted);margin-bottom:12px}
.tier .provs{display:flex;flex-wrap:wrap;gap:7px}
.tier .provs span{
  background:var(--cream);border:1px solid var(--line);
  border-radius:20px;padding:4px 12px;font-size:.78rem;color:var(--ink-2);
}
.tier.none .provs span{background:var(--navy);border-color:var(--navy);color:#fff}

/* --- warning / caution blocks carried from the document ---------------- */
.fk-warn{
  background:var(--cream);border:1px solid var(--line);
  border-inline-start:3px solid var(--terra);
  border-radius:var(--r-s);padding:22px 24px;margin:26px 0;
}
.fk-warn h4{
  margin:0 0 10px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra-d);font-family:var(--sans);font-weight:700;
}
.fk-warn p{font-size:.9rem;color:var(--ink-2);margin-bottom:.8em;max-width:80ch}
.fk-warn p:last-child{margin-bottom:0}
.fk-warn ul{margin-bottom:0}
.fk-warn.gold{border-inline-start-color:var(--gold)}
.fk-warn.gold h4{color:var(--gold-ink)}
.fk-warn.navy{background:var(--navy);border-color:var(--navy-2);border-inline-start-color:var(--gold-lt)}
.fk-warn.navy h4{color:var(--gold-lt)}
.fk-warn.navy p{color:#CFC8B8}
.fk-warn.navy b{color:#FEFCF7}
.fk-warn.navy li{color:#CFC8B8}

/* --- the two figures that must not be repeated -------------------------- */
.badfig{
  background:var(--paper);border:1px solid #E2C4B8;
  border-radius:var(--r-s);padding:22px 24px;margin-bottom:18px;
}
.badfig .fig{
  font-family:var(--serif);font-size:1.6rem;color:#9B2C2C;
  margin-bottom:4px;text-decoration:line-through;text-decoration-thickness:2px;
}
.badfig .what{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:12px;
}
.badfig p{font-size:.88rem;color:var(--ink-2);margin-bottom:.8em;max-width:80ch}
.badfig p:last-child{margin-bottom:0}

/* --- key-figure strip --------------------------------------------------- */
.kf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.kf .k{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:22px 20px;
}
.kf .k b{
  display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--terra-d);line-height:1;margin-bottom:8px;letter-spacing:-.02em;
}
.kf .k span{display:block;font-size:.8rem;color:var(--muted);line-height:1.5}
@media(max-width:760px){.kf{grid-template-columns:1fr}}

/* --- sources section ---------------------------------------------------- */
.src-group{margin-bottom:32px}
.src-list{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.src-row{
  display:grid;grid-template-columns:190px 1fr 150px;
  border-bottom:1px solid var(--line);font-size:.82rem;
}
.src-row:last-child{border-bottom:0}
.src-row > div{padding:14px 16px}
.src-row .s-name{background:var(--cream);font-weight:600;color:var(--ink)}
.src-row .s-ref{color:var(--ink-2);line-height:1.55;word-break:break-word}
.src-row .s-date{color:var(--muted);border-inline-start:1px solid var(--line)}
@media(max-width:820px){
  .src-row{grid-template-columns:1fr}
  .src-row .s-date{border-inline-start:0;border-top:1px solid var(--cream-2)}
  .src-row .s-name{border-bottom:1px solid var(--cream-2)}
}

/* --- download button ---------------------------------------------------- */
/* NB: not `.btn.dl` — `.dl` is the governance definition-list class, which
   sets a paper background and is declared later in this file. At equal
   specificity it won, and the button rendered white-on-white. */
/* Sits in the narrow sticky sidebar, so it wraps to two lines on purpose
   rather than shrinking the label. Terracotta: this is the one action on
   the page we actively want a reader to take. */
.btn.download{
  width:100%;
  justify-content:center;
  text-align:center;
  gap:10px;
  font-size:.82rem;
  line-height:1.35;
  padding:13px 16px;
}
.btn.download svg{width:17px;height:17px;flex:none}
.btn.download:hover svg{animation:dl-nudge .5s var(--e)}
@keyframes dl-nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2px)}
}
.dl-note{
  font-size:.72rem;color:var(--muted);
  margin-top:9px;line-height:1.5;text-align:center;
}
@media (prefers-reduced-motion:reduce){
  .btn.download:hover svg{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .data-toggle summary::before{transition:none}
}

/* Linked knowledge-hub card: the Feitenkaart card now leads to the report. */
.kcard h3 a{color:var(--ink);transition:color .2s}
.kcard:hover h3 a{color:var(--terra-d)}
.kcard a.ktop{text-decoration:none}
.kcard a.klink{color:var(--gold-ink);font-weight:600}
.kcard a.klink:hover{color:var(--terra-d)}

/* --- citable source block ---------------------------------------------
   The Eurostat dataset is the official public source behind the
   recognition-rate figures. It is presented as a citation a reader can
   act on, with the raw API query kept available but folded away so it
   does not read as a mysterious technical link. */
.src-cite{
  background:var(--paper);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--gold);
  border-radius:var(--r-s);
  padding:20px 22px;
  margin:22px 0;
}
.src-cite-link{
  display:flex;gap:12px;align-items:flex-start;
  text-decoration:none;color:var(--ink);
  padding:2px;border-radius:6px;
}
.src-cite-ico{
  flex:none;width:22px;height:22px;border-radius:6px;
  background:var(--gold-ink);color:var(--paper);
  display:grid;place-items:center;
  font-size:.72rem;font-weight:700;line-height:1;
  transition:background .2s,transform .2s var(--e);
}
.src-cite-link b{
  display:block;font-family:var(--serif);font-size:1.02rem;
  color:var(--terra-d);line-height:1.3;
  text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;transition:text-decoration-color .2s;
}
.src-cite-link:hover b{color:var(--terra-d);text-decoration-color:var(--terra-d)}
.src-cite-link:hover .src-cite-ico{background:var(--terra);transform:translate(1px,-1px)}
.src-cite-sub{
  display:block;margin-top:4px;
  font-size:.78rem;color:var(--muted);line-height:1.5;
}
.src-cite-note{
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--cream-2);
  font-size:.8rem;line-height:1.62;color:var(--ink-2);
}
.src-cite-query{
  margin:12px 0 0;
  font-size:.74rem;line-height:1.6;
  word-break:break-all;
  background:var(--cream);border:1px solid var(--line);
  border-radius:6px;padding:11px 13px;
}
.src-cite-query code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-2);
}
.src-cite .data-toggle{border-top:0;padding-top:0}

/* ==========================================================================
   Yemeni Nationals in Europe — comparative baseline explorer.
   Written with CSS logical properties throughout so a later dir="rtl" mirrors
   cleanly without a rewrite.
   ========================================================================== */

/* --- intro caveats ----------------------------------------------------- */
.eu-caveats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.eu-caveat{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 24px 24px;box-shadow:var(--sh-s);
}
.eu-caveat .cvnum{
  font-family:var(--serif);font-size:.86rem;font-weight:600;letter-spacing:.14em;
  color:var(--gold-ink);display:block;margin-bottom:10px;
}
.eu-caveat h3{font-size:1.06rem;margin:0 0 10px;line-height:1.3}
.eu-caveat p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.65}
.eu-caveat b{color:var(--ink)}

/* --- filters ----------------------------------------------------------- */
.eu-filters{
  display:grid;grid-template-columns:1.1fr 1fr;gap:22px 28px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px;box-shadow:var(--sh-s);
}
.eu-field{margin-bottom:0}
.eu-field > label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px;
}
.eu-field-col{display:flex;flex-direction:column;gap:18px}
.eu-field-wide{grid-row:span 2}
.eu-field-years{grid-column:1 / -1}
.eu-hint{font-size:.78rem;color:var(--soft);margin:7px 0 0}
.eu-select{
  width:100%;font-family:var(--sans);font-size:.92rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:11px 13px;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.eu-select:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(181,80,47,.14)}
.eu-check{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.eu-check input{margin-block-start:3px;accent-color:var(--terra);inline-size:15px;block-size:15px;flex:none}

/* country picker */
.eu-picker{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--paper);overflow:hidden}
.eu-picker-search{
  width:100%;border:0;border-bottom:1px solid var(--line);padding:11px 14px;
  font-family:var(--sans);font-size:.9rem;color:var(--ink);background:var(--cream)}
.eu-picker-search:focus{outline:none;background:var(--paper)}
.eu-picker-list{max-block-size:236px;overflow-y:auto;padding:6px}
.eu-opt{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;
  font-size:.88rem;color:var(--ink-2);cursor:pointer;transition:background .15s}
.eu-opt:hover{background:var(--cream)}
.eu-opt input{accent-color:var(--terra);inline-size:15px;block-size:15px;flex:none}
.eu-picker-actions{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-block-start:1px solid var(--line);background:var(--cream)}
.eu-mini{
  background:transparent;border:0;color:var(--terra-d);font-family:var(--sans);
  font-size:.8rem;font-weight:600;cursor:pointer;padding:0}
.eu-mini:hover{text-decoration:underline}
.eu-picker-count{font-size:.78rem;color:var(--soft)}

/* year range: two thumbs over one track */
.eu-year-readout{
  font-family:var(--serif);font-weight:600;color:var(--terra-d);
  letter-spacing:0;text-transform:none;margin-inline-start:8px}
.eu-range{position:relative;block-size:34px;margin-block-start:4px}
.eu-range-track{
  position:absolute;inset-block-start:15px;inset-inline:8px;block-size:5px;
  background:var(--line-2);border-radius:4px}
.eu-range-fill{position:absolute;inset-block:0;background:var(--terra);border-radius:4px}
.eu-range input[type=range]{
  position:absolute;inset-block-start:0;inset-inline:0;inline-size:100%;
  margin:0;background:transparent;-webkit-appearance:none;appearance:none;
  pointer-events:none;block-size:34px}
.eu-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  inline-size:20px;block-size:20px;border-radius:50%;background:var(--paper);
  border:3px solid var(--terra);box-shadow:var(--sh-s);cursor:pointer;margin-block-start:0}
.eu-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;inline-size:18px;block-size:18px;border-radius:50%;
  background:var(--paper);border:3px solid var(--terra);box-shadow:var(--sh-s);cursor:pointer}
.eu-range input[type=range]::-webkit-slider-runnable-track{background:transparent;block-size:34px}
.eu-range input[type=range]::-moz-range-track{background:transparent}
.eu-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(181,80,47,.25)}

/* --- chart card extras -------------------------------------------------- */
.chart-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.eu-field-inline{display:flex;align-items:center;gap:10px;flex:none}
.eu-field-inline label{margin:0}
.eu-field-inline .eu-select{width:auto;min-inline-size:92px}
.eu-emptynote{
  margin:10px 0 0;padding:14px 16px;background:var(--sand);
  border:1px dashed var(--line-2);border-radius:var(--r-s);
  font-size:.85rem;color:var(--ink-2)}

/* --- external chart tooltip (HTML, so the source can be a link) --------- */
.eu-tip{
  position:absolute;z-index:60;pointer-events:auto;
  max-inline-size:260px;background:var(--navy);color:#EDE6D6;
  border:1px solid var(--navy-2);border-radius:10px;
  padding:11px 13px;box-shadow:var(--sh-l);
  font-size:.8rem;line-height:1.5;opacity:0;transition:opacity .12s;
  transform:translateY(-50%)}
.eu-tip-h{display:flex;align-items:center;gap:7px;font-weight:600;color:#FEFCF7;margin-bottom:2px}
.eu-tip-swatch{inline-size:9px;block-size:9px;border-radius:2px;flex:none}
.eu-tip-yr{font-size:.72rem;color:var(--gold-lt);text-transform:uppercase;letter-spacing:.06em}
.eu-tip-v{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:#fff;margin:3px 0}
.eu-tip-cav{color:#CFC8B8;font-size:.74rem;margin-block-start:3px}
.eu-tip-src{color:#A9A392;font-size:.72rem;margin-block-start:6px}
.eu-tip-link{display:inline-block;margin-block-start:6px;color:var(--gold-lt);font-weight:600;font-size:.76rem}
.eu-tip-link:hover{color:#fff;text-decoration:underline}

/* --- recognition-rate mini cards --------------------------------------- */
.eu-recog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.eu-recog-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 18px 16px;box-shadow:var(--sh-s)}
.eu-recog-card h4{font-size:1rem;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.eu-rc-yr{font-size:.74rem;color:var(--soft);font-family:var(--sans);font-weight:500}
.eu-rc-row{display:flex;gap:10px}
.eu-rc-cell{flex:1;text-align:start;background:var(--cream);border-radius:8px;padding:10px 11px}
.eu-rc-num{display:block;font-family:var(--serif);font-size:1.28rem;font-weight:600;color:var(--terra-d);line-height:1.1}
.eu-rc-lbl{display:block;font-size:.68rem;color:var(--muted);margin-block-start:4px;line-height:1.3}

/* --- data table -------------------------------------------------------- */
.eu-table-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.eu-table-count{font-size:.86rem;color:var(--muted);font-weight:600}
.eu-table-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn.small{padding:9px 15px;font-size:.82rem;border-radius:8px}
.btn.small.download{background:var(--navy)}
.btn.small.download:hover{background:var(--navy-d)}
.btn.small.download svg{width:15px;height:15px}
.eu-table-scroll{max-block-size:560px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.eu-data-table{margin:0;font-size:.82rem;width:100%}
.eu-data-table thead th{position:sticky;inset-block-start:0;z-index:2}
.eu-th{cursor:pointer;user-select:none;white-space:nowrap;transition:background .15s}
.eu-th:hover{background:var(--navy-d)}
.eu-th.on{background:var(--navy-d)}
.eu-data-table td{vertical-align:top}
.eu-num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.eu-np{color:var(--soft);font-style:italic;font-size:.78rem}
.eu-flag{display:inline-block;font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap}
.eu-flag-ok{background:#EAF1EC;color:#2F5D42}
.eu-flag-rounded_to_5{background:var(--sand);color:var(--gold-ink)}
.eu-flag-not_published{background:#F4E4E0;color:var(--terra-d)}
.eu-flag-own_calculation{background:#E7EDF1;color:var(--navy)}
.eu-flag-cannot_exist{background:#E8E4DC;color:#5A5347}
.eu-flag-definition_differs{background:#EFE7D6;color:var(--ink-2)}

/* --- method / sources -------------------------------------------------- */
.eu-method{max-width:none}
.eu-method h3{font-family:var(--serif);font-size:1.2rem;margin:34px 0 12px}
.eu-method h3:first-child{margin-top:0}
.eu-method p{color:var(--ink-2);margin:0 0 12px;max-width:78ch}
.eu-method ul{color:var(--ink-2);margin:0 0 12px;padding-inline-start:22px}
.eu-method li{margin-bottom:7px}
.eu-src-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0 0 12px}
.eu-src-list li{background:var(--paper);border:1px solid var(--line-2);border-radius:20px;padding:6px 14px;font-size:.82rem;color:var(--ink-2)}
.eu-src-list code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82em}
.eu-src-list a{color:var(--navy)}
.eu-src-list a:hover{color:var(--terra-d)}
.eu-flags{margin:0 0 12px}
.eu-flags > div{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:9px 0;border-block-end:1px solid var(--line)}
.eu-flags dt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:var(--terra-d);font-weight:600}
.eu-flags dd{margin:0;font-size:.88rem;color:var(--ink-2)}
.eu-recog-caveat code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--sand);padding:1px 5px;border-radius:4px}

/* --- country dropdown (collapsed multi-select) ------------------------- */
.eu-dd{position:relative}
.eu-dd-btn{
  inline-size:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);text-align:start;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:11px 13px;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.eu-dd-btn:focus-visible{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(181,80,47,.14)}
.eu-dd.open .eu-dd-btn{border-color:var(--terra)}
.eu-dd-caret{
  inline-size:0;block-size:0;flex:none;
  border-inline:5px solid transparent;border-block-start:6px solid var(--soft);
  transition:transform .2s}
.eu-dd.open .eu-dd-caret{transform:rotate(180deg)}
.eu-dd-panel{
  position:absolute;inset-inline:0;inset-block-start:calc(100% + 6px);z-index:40;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-m);
  box-shadow:var(--sh-m);overflow:hidden}
.eu-mini.strong{color:var(--navy);font-weight:700}

/* --- year dropdowns ---------------------------------------------------- */
.eu-year-selects{display:flex;align-items:center;gap:10px;max-inline-size:420px}
.eu-year-selects .eu-select{flex:1}
.eu-year-sep{font-size:.84rem;color:var(--soft);flex:none}

/* --- guided story views ------------------------------------------------ */
.eu-stories{display:flex;flex-direction:column;gap:22px}
.eu-story{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px 34px;
  align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--sh-s)}
.eu-story:nth-child(even){background:var(--cream)}
.eu-story-txt{min-inline-size:0}
.eu-story-n{
  display:block;font-family:var(--serif);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold-ink);margin-bottom:8px}
.eu-story h3{
  font-family:var(--serif);font-size:1.24rem;line-height:1.28;color:var(--navy);
  margin:0 0 12px;text-wrap:balance}
.eu-story-body{font-size:.93rem;line-height:1.62;color:var(--ink-2);margin:0 0 16px}
.eu-story-link{
  background:transparent;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--terra-d)}
.eu-story-link:hover{text-decoration:underline}
.eu-story-link:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px}
.eu-story-chart{min-inline-size:0}
.eu-story-chart .chart-box{block-size:250px;margin:0}
.eu-story-chart .chart-source{margin-block-start:10px}
.eu-stories-foot{
  font-size:.82rem;color:var(--soft);margin:18px 0 0;max-width:80ch}

/* --- companion cross-links --------------------------------------------- */
.eu-companion,.fk-companion{
  background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--terra);
  border-radius:var(--r-m);padding:18px 20px;margin-block-start:26px}
.fk-companion{margin-block-start:18px}
.eu-companion-lbl,.fk-companion-lbl{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 7px}
.eu-companion p,.fk-companion p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.fk-companion p{font-size:.84rem}

/* --- responsive -------------------------------------------------------- */
@media (max-width:900px){
  .eu-caveats{grid-template-columns:1fr}
  .eu-filters{grid-template-columns:1fr}
  .eu-field-wide{grid-row:auto}
  .eu-recog-grid{grid-template-columns:1fr}
  .eu-story{grid-template-columns:1fr;gap:20px;padding:22px}
  .eu-story-chart{order:2}
  .eu-story-txt{order:1}
}
@media (max-width:560px){
  .eu-recog-grid{grid-template-columns:1fr}
  .chart-head-row{flex-direction:column;align-items:flex-start}
  .eu-flags > div{grid-template-columns:1fr;gap:2px}
  .eu-table-actions{width:100%}
  .btn.small{flex:1;justify-content:center}
  .eu-story{padding:18px 16px}
  .eu-story h3{font-size:1.08rem}
  .eu-story-chart .chart-box{block-size:210px}
  .eu-year-selects{max-inline-size:none}
}

/* --- language toggle: built vs not-yet-built ---------------------------- */
.lang button,.lang a{padding:6px 12px;font:inherit;line-height:1.4}
.lang-na{
  background:transparent;border:0;color:var(--soft);cursor:pointer;
  position:relative;transition:color .2s,background .2s}
.lang-na::after{
  content:"";position:absolute;inset-block-end:4px;inset-inline:10px;
  height:1px;background:currentColor;opacity:.35}
.lang-na:hover{background:var(--cream);color:var(--ink-2)}
.lang-na:focus-visible{outline:2px solid var(--terra);outline-offset:-2px}
.lang-note{
  position:fixed;inset-block-start:88px;inset-inline-end:24px;z-index:120;
  max-width:280px;margin:0;padding:11px 14px;
  background:var(--navy);color:var(--cream);border-radius:9px;
  font-size:.8rem;line-height:1.45;box-shadow:var(--sh-m);
  opacity:0;transform:translateY(-6px);transition:opacity .22s,transform .22s}
.lang-note.on{opacity:1;transform:translateY(0)}
@media(max-width:560px){.lang-note{inset-inline:16px;max-width:none}}

/* --- Arabic pages: bind the house Arabic face ---------------------------
   Scoped to html[dir="rtl"], so it can never reach an English page. The
   footer's single Arabic line on an English page carries dir="rtl" too and is
   deliberately NOT matched -- it already sets its own face via .ar.

   Noto Naskh goes in FRONT of the existing stacks rather than replacing them.
   Its @font-face declares an Arabic-only unicode-range, so a Latin character
   inside an Arabic line -- AVG, begeleider, info@tharan.nl -- falls straight
   through to Inter or Fraunces and keeps the house type. One rule, both
   scripts, no second stylesheet. */
html[dir="rtl"]{
  --sans:'Noto Naskh Arabic','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Noto Naskh Arabic','Fraunces',Georgia,'Times New Roman',serif;
}

/* Latin display typography that Arabic script cannot take.
   Arabic is cursive: letter-spacing prises the joining strokes apart and the
   word reads as stretched rather than set. And Arabic has no italic -- the
   browser fakes one by slanting the Naskh, which is not a style, it is a
   rendering fault. Both are dropped here and NOTHING else is: the gold of the
   eyebrow, its size, weight and uppercase all still come from the shared
   rules above, so the identity is unchanged and only the tracking is gone.
   Scoped to html[dir="rtl"], so no English page can be reached -- the one
   Arabic line in the English footer carries dir="rtl" on the <p> itself and
   is deliberately not matched.
   !important is deliberate and is the right tool exactly once. The rules that
   set tracking are scattered and of every specificity -- .eyebrow is (0,1,0),
   .brand .txt b is (0,2,1), footer.site .base .motto is (0,3,1) -- so a
   selector that beats all of them today would be a guess that quietly loses
   the next time a rule is added. This is not a style preference being forced
   through: Arabic script cannot carry either property, so there is no case in
   any language where a declaration below should win. Confining it to
   html[dir="rtl"] is what keeps it safe. */
html[dir="rtl"] *{letter-spacing:normal !important;font-style:normal !important}

/* --- RTL: the few cases logical properties cannot express ---------------
   Everything else mirrors automatically now that the stylesheet uses logical
   properties. These three need direction-aware values because transform,
   transform-origin and gradient directions have no logical keyword with
   dependable support. Arabic then needs translation only, not CSS work. */
[dir="rtl"] .nav-underline,
[dir="rtl"] .section-head h2::after,
[dir="rtl"] .card::after{transform-origin:right}
[dir="rtl"] .weave{-webkit-mask-image:linear-gradient(to right,#000,transparent);
  mask-image:linear-gradient(to right,#000,transparent)}
/* The select chevron. Its padding is logical and mirrors on its own, but
   background-position takes physical keywords only -- so in RTL the arrow
   stayed at the right edge and was drawn straight over the first word of the
   option, while the 38px of reserved space sat empty on the left. Found on
   the Arabic contact page, 22 Jul 2026. This is the only physical-side
   declaration left in the stylesheet. */
[dir="rtl"] .field select{background-position:left 14px center}
[dir="rtl"] .btn:hover .arr,
[dir="rtl"] .pillar:hover .tag .arr{transform:translateX(-4px)}
[dir="rtl"] footer.site .cols a:hover{transform:translateX(-3px)}
/* arrow glyphs are content, not chrome: mirror them so "→" reads correctly */
[dir="rtl"] .arr,[dir="rtl"] .klink span[aria-hidden]{display:inline-block;transform:scaleX(-1)}

/* Arabic product name shown beside its English title */
.kcard-ar{
  font-family:'Noto Naskh Arabic',serif;font-size:1rem;color:var(--gold-ink);
  margin:-4px 0 10px;line-height:1.7}




/* VISUAL LAYER:start */

/* ==========================================================================
   VISUAL LAYER — geometry only, drawn from the two house motifs.

   The sadu weave already lives in .weave. This adds the qamariya arc as a
   second, equally restrained device, plus dividers and card accents built
   from the same two shapes.

   Rules held throughout: palette colours only, opacity in the .05-.16 band,
   and one motif per view — a header carrying the arc hides its weave, so the
   two never compete in the same screenful. Everything here is a
   pseudo-element or a background, so it is invisible to assistive technology
   and needs no aria-hidden of its own.
   ========================================================================== */

/* --- the qamariya arc, as a scalable background ------------------------- */
:root{
  --qarc-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23C08A2D' stroke-width='.9'%3E%3Cpath d='M2 58A48 48 0 0 1 98 58'/%3E%3Cpath d='M20 58A30 30 0 0 1 80 58'/%3E%3Cpath d='M8.4 34L24 43M29 16.4L35 32M50 10L50 28M71 16.4L65 32M91.6 34L76 43'/%3E%3Cpath d='M50 20L54 24L50 28L46 24Z'/%3E%3C/g%3E%3C/svg%3E");
  --qarc-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%231B3A4B' stroke-width='.9'%3E%3Cpath d='M2 58A48 48 0 0 1 98 58'/%3E%3Cpath d='M20 58A30 30 0 0 1 80 58'/%3E%3Cpath d='M8.4 34L24 43M29 16.4L35 32M50 10L50 28M71 16.4L65 32M91.6 34L76 43'/%3E%3Cpath d='M50 20L54 24L50 28L46 24Z'/%3E%3C/g%3E%3C/svg%3E");
  --qarc-terra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23B5502F' stroke-width='.9'%3E%3Cpath d='M2 58A48 48 0 0 1 98 58'/%3E%3Cpath d='M20 58A30 30 0 0 1 80 58'/%3E%3Cpath d='M8.4 34L24 43M29 16.4L35 32M50 10L50 28M71 16.4L65 32M91.6 34L76 43'/%3E%3Cpath d='M50 20L54 24L50 28L46 24Z'/%3E%3C/g%3E%3C/svg%3E");
  --corner-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23C08A2D' stroke-width='1'%3E%3Cpath d='M48 24A24 24 0 0 0 24 0'/%3E%3Cpath d='M48 36A36 36 0 0 0 12 0'/%3E%3Cpath d='M30 6L34 10L30 14L26 10Z'/%3E%3C/g%3E%3C/svg%3E");
  --corner-terra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23B5502F' stroke-width='1'%3E%3Cpath d='M48 24A24 24 0 0 0 24 0'/%3E%3Cpath d='M48 36A36 36 0 0 0 12 0'/%3E%3Cpath d='M30 6L34 10L30 14L26 10Z'/%3E%3C/g%3E%3C/svg%3E");
  --sadu-terra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9L9 1L18 9L27 1L36 9M0 9L9 17L18 9L27 17L36 9' fill='none' stroke='%23B5502F' stroke-width='1'/%3E%3C/svg%3E");
}

/* --- the gold rule above the navigation -------------------------------- */
/* Matches the bar across the top of the branded share images. It lives
   inside the fixed header, so it stays put on scroll, and it is drawn as an
   overlay rather than added to the header box — the header keeps its 76px
   height and no page content shifts down. */
header.site::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:4px;background:var(--gold);z-index:2;pointer-events:none;
}

/* --- page headers: one motif each, treated differently per page --------- */
.phero::after{
  content:"";position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;z-index:0;
}
.phero > .wrap{position:relative;z-index:1}

/* The house header treatment, used on every page. Presence comes from scale,
   not from darkness: the arc is large and pale rather than small and dark.
   The negative block-end offset runs the springing line off the bottom of the
   band so the crown of the arch stays whole — a flat-topped fan of ribs is
   not a qamariya. Anchored to the inline end horizontally. */
.phero.hdr-arc-right::after{
  background-image:var(--qarc-gold);
  inline-size:min(74%,860px);block-size:min(40vw,470px);
  /* Crop a fixed 26% of the ARC, not of the band: a percentage inset would
     resolve against the band's height, which varies with the length of the
     lede, and the arch would show at a different proportion on every page. */
  inset-inline-end:0;inset-block-end:calc(min(40vw,470px) * -0.26);
  opacity:.16;
  /* Fade the arc out before it reaches the text. The lede sits at 4.87:1 on
     plain cream — already close to the 4.5:1 floor — so a gold line crossing
     behind a glyph would push it under. The arch keeps full strength at the
     outer edge, where nothing is set over it, and is gone by the time it
     reaches the words. Scale carries the presence; the type stays legible. */
  -webkit-mask-image:linear-gradient(to left,#000 44%,transparent 78%);
  mask-image:linear-gradient(to left,#000 44%,transparent 78%);
}
/* arc lower left, smaller — for the lighter, invitational pages */
.phero.hdr-arc-left::after{
  background-image:var(--qarc-navy);
  inline-size:min(30%,330px);block-size:min(18vw,198px);
  inset-inline-start:2%;inset-block-end:-1px;opacity:.09;
}
/* arc centred and wide, very faint — for the two evidence products */
.phero.hdr-arc-center::after{
  background-image:var(--qarc-gold);
  inline-size:min(74%,860px);block-size:min(40vw,470px);
  inset-inline-start:50%;transform:translateX(-50%);
  inset-block-end:-26%;opacity:.07;
}
/* a small arc tucked into the top corner — quietest of the set */
.phero.hdr-arc-corner::after{
  background-image:var(--qarc-terra);
  inline-size:132px;block-size:80px;
  inset-inline-end:6%;inset-block-start:14px;opacity:.11;
}
/* weave-led headers keep the band and draw no arc */
.phero.hdr-weave-band::after,.phero.hdr-weave-full::after{display:none}
.phero.hdr-weave-full .weave{
  inline-size:100%;background-size:64px 32px;opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
  mask-image:linear-gradient(to bottom,#000,transparent);
}
/* one motif per view: an arc header suppresses the weave beneath it */
.phero[class*="hdr-arc"] .weave{display:none}
[dir="rtl"] .phero.hdr-arc-center::after{transform:translateX(50%)}
/* mirror the arc and its fade when the page runs right-to-left */
[dir="rtl"] .phero.hdr-arc-right::after{
  -webkit-mask-image:linear-gradient(to right,#000 44%,transparent 78%);
  mask-image:linear-gradient(to right,#000 44%,transparent 78%);
}

/* --- section dividers: a sadu rule between consecutive blocks ----------- */
/* CSS-only, so no decorative element is added to any page's markup. */
.blk + .blk::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:14px;pointer-events:none;
  background-image:var(--sadu-terra);
  background-size:28px 14px;background-repeat:repeat-x;
  opacity:.10;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
}
/* a tinted or navy band is already a division; it needs no rule as well */
.blk + .blk.tint::before,.blk + .blk.sand::before,
.blk + .blk.navy::before,.blk + .blk.paper::before{display:none}

/* --- card and callout accents ------------------------------------------ */
.kcard{position:relative}
.kcard::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  inline-size:48px;block-size:48px;pointer-events:none;
  background-image:var(--corner-gold);background-repeat:no-repeat;
  opacity:.16;transition:opacity .3s var(--e);
}
.kcard:hover::after{opacity:.30}
[dir="rtl"] .kcard::after{transform:scaleX(-1)}

.stat{position:relative;overflow:hidden}
.stat::after{
  content:"";position:absolute;inset-inline-start:50%;inset-block-end:-46px;
  transform:translateX(-50%);
  inline-size:150px;block-size:90px;pointer-events:none;
  background-image:var(--qarc-gold);background-repeat:no-repeat;background-size:contain;
  opacity:.07;
}

.callout{position:relative;overflow:hidden}
.callout::after{
  content:"";position:absolute;inset-block-start:-8px;inset-inline-end:-8px;
  inline-size:52px;block-size:52px;pointer-events:none;
  background-image:var(--corner-gold);background-repeat:no-repeat;
  opacity:.13;
}
.callout.terra::after{background-image:var(--corner-terra)}
[dir="rtl"] .callout::after{transform:scaleX(-1)}

/* --- chart framing: corner ticks, not a border -------------------------- */
.chart-card{position:relative}
.chart-card::before,.chart-card::after{
  content:"";position:absolute;inline-size:22px;block-size:22px;
  pointer-events:none;border-color:var(--gold);opacity:.34;
}
.chart-card::before{
  inset-block-start:10px;inset-inline-start:10px;
  border-inline-start:1px solid;border-block-start:1px solid;
  border-start-start-radius:4px;
}
.chart-card::after{
  inset-block-end:10px;inset-inline-end:10px;
  border-inline-end:1px solid;border-block-end:1px solid;
  border-end-end-radius:4px;
}

@media (max-width:560px){
  /* on a phone the motif competes with the words — pull it back */
  /* .10 measured 4.47:1 behind the lede — just under the 4.5:1 floor. On a
     phone the text runs the full width, so the horizontal fade cannot help
     and the opacity has to carry it. */
  .phero.hdr-arc-right::after{opacity:.08}
  .phero.hdr-arc-left::after{opacity:.07}
  .phero.hdr-arc-center::after{opacity:.05}
  .phero.hdr-arc-corner::after{inline-size:92px;block-size:56px;opacity:.08}
  .kcard::after{inline-size:38px;block-size:38px;background-size:38px 38px}
  .chart-card::before,.chart-card::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kcard::after{transition:none}
}

/* ==========================================================================
   v4 BRAND TOUCHES — Arabic site. THREE changes, restraint is the rule.
   Motif paths lifted verbatim from Canvas v4.dc.html + the agreed
   VISUAL-REFERENCE mockups (no approximation). Component classes are shared
   (English may adopt later); the rhythm changes are scoped to
   html[dir="rtl"] so no English page is touched.
   ========================================================================== */

/* The v4 navy-tinted low card shadow -- the one spacing value not already in
   the token set (Change 1: "add only what's missing"). */
:root{--sh-card:0 2px 8px rgba(27,58,75,.06),0 12px 30px rgba(27,58,75,.08)}

/* Change 1 -- v4 rhythm on the Arabic site. Max width (1200), gutters (28) and
   radii (8/12/18) already match v4; only the vertical rhythm was over-large
   (~230px between sections). Tightened to read intentional, not empty. Scoped
   to the Arabic site alone -- English keeps its spacing until it adopts v4. */
html[dir="rtl"] .blk{padding:clamp(26px,3vw,36px) 0}
html[dir="rtl"] .phero{padding:clamp(40px,5vw,60px) 0 clamp(28px,3.5vw,40px)}
html[dir="rtl"] .cta-band{padding:clamp(36px,4.5vw,56px) 0}
html[dir="rtl"] .section-head{margin-bottom:clamp(16px,2vw,24px)}
html[dir="rtl"] .pillars.two{gap:20px}

/* Pull-quotes on the Arabic pages: compact and centred, not a big left-ruled
   block. Short elegant line -- centred, max 640px, tight margins, no side
   rule. Scoped to rtl so English pull-quotes keep their current treatment. */
html[dir="rtl"] .quote-wrap{
  border-inline-start:0;max-width:640px;margin-inline:auto;
  margin-block:clamp(16px,2.4vw,26px);padding:0;text-align:center;
}
html[dir="rtl"] .quote-wrap cite{margin-top:10px}

/* ---- Colour zones on the Arabic site: navy hero band, light-navy card
   panels, warm CTA band -- so the page reads as one coherent navy+cream
   identity, calm not loud. COLOUR/SHADING ONLY: layout, structure and the
   existing gold header arch are unchanged. Scoped to rtl so English stays
   byte- and pixel-identical. ---- */

/* Override 1 (29 Jul 2026, Wael): the Arabic page-hero now MATCHES the English
   hero colour -- the earlier navy-gradient treatment is reverted, so .phero on
   the Arabic pages renders in cream exactly like every English .phero. The
   design's navy now lives in `blk navy` feature bands (English parity), not the
   hero. Only the hero recolour was removed; the RTL padding/spacing above stays. */

/* Change 2 -- card panels. Coming-soon = ONE light-navy veil over cream, navy
   number; the gold line-arch is kept. The single LIVE card ("الدليل") = full
   navy panel with gold-light number and arch, so it reads as the clickable one. */
html[dir="rtl"] .kv5-panel{background:linear-gradient(160deg,rgba(27,58,75,.10),rgba(27,58,75,.04)),var(--cream)}
html[dir="rtl"] .kv5-panel .num{color:var(--navy)}
html[dir="rtl"] a.kv5-panel{background:linear-gradient(160deg,var(--navy),var(--navy-l));border-block-end-color:var(--navy-l)}
html[dir="rtl"] a.kv5-panel .num{color:var(--gold-lt)}
html[dir="rtl"] a.kv5-panel .arch g{stroke:var(--gold-lt)}

/* Change 3 -- the live "متاح الآن" tag reads GREEN (go / available), while
   "قيد الإعداد" stays solid gold-light and the category tag stays gold-outline. */
html[dir="rtl"] .kv5:has(a.kv5-panel) .kv5-tag.solid{background:#3B7A4B;color:#fff}

/* Pre-footer CTA band -- warm sand -> gold-tint gradient with a navy heading
   (the button is already navy), distinct from the plain page and navy footer. */
html[dir="rtl"] .cta-band{background:linear-gradient(135deg,var(--sand) 0%,#F4ECDD 60%,#EFE0C2 100%)}
html[dir="rtl"] .cta-band h2{color:var(--navy)}

/* The "V5" knowledge card. Paper card + cream top panel
   carrying a thin gold qamariya line-arch (opacity .5) and a gold Fraunces
   number; body with ONE solid + ONE hollow tag. The cream+gold line is the
   single brand moment per card -- no navy panel, no lattice. */
.kv5{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-card);display:flex;flex-direction:column;
  transition:transform .32s var(--e),box-shadow .32s var(--e)}
.kv5:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.kv5-panel{position:relative;height:150px;display:flex;align-items:center;
  justify-content:center;background:var(--cream);
  border-block-end:1px solid var(--line);text-decoration:none}
.kv5-panel .arch{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.kv5-panel .num{position:relative;z-index:2;font-family:var(--serif);
  font-weight:600;font-size:48px;line-height:1;color:var(--gold)}
.kv5-body{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.kv5-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-bottom:12px}
.kv5-tag{font-size:12px;font-weight:600;line-height:1.5;border-radius:5px;padding:4px 11px}
.kv5-tag.solid{background:var(--gold-lt);color:var(--navy-d)}
.kv5-tag.hollow{background:transparent;color:var(--gold);border:1px solid var(--gold-lt)}
.kv5-body h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.6}
.kv5-body p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.8}
.kv5-soon{margin-top:12px;color:var(--soft);font-size:13px}
.kv5-link{margin-top:14px;font-weight:600;font-size:14.5px;color:var(--gold-ink)}
.kv5-link:hover{color:var(--terra-d)}
@media(max-width:660px){
  .kv5-panel{height:132px}
  .kv5-panel .num{font-size:42px}
}
/* VISUAL LAYER:end */

/* dataset version marker, stamped at build time by tools/sync_dataset.py */
.eu-dataset-version{
  font-size:.82rem;color:var(--soft);margin:10px 0 0;
  padding-inline-start:12px;border-inline-start:2px solid var(--gold)}
.eu-dataset-version a{color:var(--navy);font-weight:600}
.eu-dataset-version a:hover{color:var(--terra-d)}




/* --- knowledge hub article ---------------------------------------------- */
.article-body h2{
  font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:var(--navy);
  margin:2.4em 0 .7em;text-wrap:balance}
.article-body h2:first-child{margin-block-start:0}
.article-body p{margin:0 0 1.15em;max-width:70ch}
.article-body .feature-list{margin:1.2em 0 1.6em}
.article-body .chart-card{margin:2.2em 0}
.article-sources{
  font-size:.84rem;line-height:1.65;color:var(--muted);
  background:var(--cream);border-inline-start:3px solid var(--gold);
  border-radius:var(--r-s);padding:16px 20px;margin-block-start:2.4em;max-width:none}
.article-sources code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--sand);padding:1px 5px;border-radius:4px}


/* HX:start — generated by tools/fix_headings.py, do not edit by hand */
.hx-3,.hx-4{font-family:var(--serif);
  color:var(--ink);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 0;}
.hx-3{font-size:1.22rem}
.hx-4{font-size:1rem}
.blk.navy .hx-3,.blk.navy .hx-4{color:#FEFCF7}
.pillar .hx-3{margin-bottom:11px;letter-spacing:-.015em}
.step .hx-3{margin-bottom:8px;font-size:1.14rem}
.mstep .hx-3{margin-bottom:12px;font-size:1.35rem}
.aud-head .hx-3{font-size:1.28rem}
.prose .hx-3{margin:2rem 0 .7rem}
.callout .hx-4{margin-bottom:10px;font-size:1.08rem}
.faq-item .hx-3{margin-bottom:14px;font-size:1.28rem;
  display:flex;gap:14px;align-items:baseline;}
.faq-item .hx-3::before{content:"?";flex:none;
  font-family:var(--serif);color:var(--gold-ink);font-weight:700;
  font-size:1.3rem;line-height:1;}
.role .hx-3{font-size:1.1rem;margin-bottom:8px}
.kcard .hx-3{font-size:1.14rem;margin-bottom:10px;line-height:1.3}
.cdetail .hx-4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:8px;font-family:var(--sans);font-weight:700;}
footer.site .hx-4{color:#FEFCF7;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px;font-weight:700;}
.fk-nav .hx-4{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:700;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.fk-sec .hx-3{margin:32px 0 12px;font-size:1.22rem}
.fk-sec .hx-4{margin:24px 0 8px;font-size:1rem;font-family:var(--serif)}
#fk-data .chart-head .hx-3{font-family:var(--serif);font-size:1.24rem;line-height:1.3;color:var(--navy);
  margin:0 0 10px;text-wrap:balance}
.chart-head .hx-3{margin:0 0 6px;font-size:1.16rem}
.tier .hx-4{margin:0 0 4px;font-size:1.02rem;font-family:var(--serif)}
.fk-warn .hx-4{margin:0 0 10px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra-d);font-family:var(--sans);font-weight:700;}
.fk-warn.gold .hx-4{color:var(--gold-ink)}
.fk-warn.navy .hx-4{color:var(--gold-lt)}
.kcard:hover .hx-3 a{color:var(--terra-d)}
.eu-caveat .hx-3{font-size:1.06rem;margin:0 0 10px;line-height:1.3}
.eu-recog-card .hx-4{font-size:1rem;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.eu-method .hx-3{font-family:var(--serif);font-size:1.2rem;margin:34px 0 12px}
.eu-method .hx-3:first-child{margin-top:0}
.eu-story .hx-3{font-family:var(--serif);font-size:1.24rem;line-height:1.28;color:var(--navy);
  margin:0 0 12px;text-wrap:balance}
.eu-story .hx-3{font-size:1.08rem}
/* HX:end */



/* COVERAGE:start */

/* ==========================================================================
   COVERAGE CALLOUT — used on both data pages.

   Readers skip prose and read boxes, so the statement of what period each
   figure covers is a panel, not a sentence. Same family as .eu-caveat: cream
   ground, gold rule, small-caps eyebrow.

   The two pages carry DIFFERENT content deliberately. The European page runs
   on Eurostat's harmonised release cycle; the Feitenkaart runs on CBS and IND,
   which publish sooner. Conflating them is the error the boxes exist to stop.
   ========================================================================== */
.eu-coverage{
  background:var(--cream);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--gold);
  border-radius:var(--r-m);
  padding:clamp(22px,2.6vw,32px);
  margin-block-start:28px;
  position:relative;overflow:hidden;
}
.eu-coverage-eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 8px;
}
.eu-coverage h2,.eu-coverage h3{
  font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:var(--navy);
  margin:0 0 12px;text-wrap:balance;
}
.eu-coverage-lede{
  font-size:.95rem;line-height:1.6;color:var(--ink-2);margin:0 0 20px;max-width:76ch;
}

.eu-coverage-list{margin:0 0 18px}
.eu-coverage-list > div{
  display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:6px 22px;
  padding:13px 0;border-block-start:1px solid var(--line);
}
.eu-coverage-list > div:first-child{border-block-start:0;padding-block-start:0}
.eu-coverage-list dt{
  font-weight:700;font-size:.9rem;color:var(--navy);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.eu-coverage-list dd{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.eu-coverage-list code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
  background:var(--sand);padding:1px 5px;border-radius:4px;font-weight:400;
}

/* completeness tag — the thing a reader must not miss */
.cov-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;white-space:nowrap;
}
.cov-tag.ok{background:#EAF1EC;color:#2F5D42}
.cov-tag.partial{background:#F4E4E0;color:var(--terra-d)}

.eu-coverage-note{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:16px 18px;margin-block-end:16px;
}
.eu-coverage-note p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:80ch}
.eu-coverage-ret{margin:0;font-size:.8rem;color:var(--muted)}

@media (max-width:640px){
  .eu-coverage-list > div{grid-template-columns:1fr;gap:6px}
  .eu-coverage-list dt{margin-block-end:2px}
}

/* --- provisional / break-in-series markers ------------------------------ */
/* Eurostat's own quality flags, surfaced where the figure is read rather
   than only in the method panel. */
.eu-prov{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap;
  background:#F4E4E0;color:var(--terra-d);margin-inline-start:6px;
}
.eu-prov.brk{background:#EFE7D6;color:var(--gold-ink)}
.eu-tip-prov{
  margin-block-start:6px;font-size:.72rem;font-weight:600;
  color:#E7B9A6;letter-spacing:.03em;text-transform:uppercase;
}
/* COVERAGE:end */

/* LOADING:start */

/* ==========================================================================
   LOADING STATE — both data pages read a 13.4 MB file at runtime.

   On a mid-range phone that parse is a real window, and until now the page
   showed populated-looking chrome with empty controls and blank chart boxes:
   a reader could click a filter that could not answer. The markup ships with
   data-state="loading" and every control disabled; the scripts flip the state
   and enable them once the rows are in.
   ========================================================================== */

/* --- chart areas: a plain skeleton with an honest label ----------------- */
[data-state="loading"] .chart-box{
  position:relative;
  background:
    repeating-linear-gradient(
      100deg,
      var(--cream) 0 42px,
      var(--paper) 42px 84px
    );
  border-radius:var(--r-s);
}
[data-state="loading"] .chart-box canvas{visibility:hidden}
[data-state="loading"] .chart-box::after{
  content:"Loading data…";
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--sans);font-size:.84rem;letter-spacing:.04em;
  color:var(--muted);background:rgba(254,252,247,.72);
  border-radius:var(--r-s);
}
/* a slow, low-contrast pulse — never a spinner, never fast */
@media (prefers-reduced-motion:no-preference){
  [data-state="loading"] .chart-box::after{animation:tharan-pulse 1.8s ease-in-out infinite}
}
@keyframes tharan-pulse{0%,100%{opacity:.82}50%{opacity:.55}}

/* --- the table and its count line --------------------------------------- */
[data-state="loading"] .eu-table-scroll{min-block-size:120px;position:relative}
[data-state="loading"] .eu-table-scroll::after{
  content:"Loading rows…";
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.84rem;color:var(--muted);
}

/* --- controls: visibly not yet usable ----------------------------------- */
[data-state="loading"] .eu-filters,
[data-state="loading"] .fk-data-controls,
[data-state="loading"] .eu-controls-toggle,
[data-state="loading"] .eu-table-actions{opacity:.55}
.eu-select:disabled,.eu-dd-btn:disabled,.eu-controls-toggle:disabled,
.btn.small:disabled{cursor:progress;background:var(--cream)}
.eu-check input:disabled + span{color:var(--soft)}

/* --- a single status line, announced once ------------------------------- */
.eu-loading-note{
  display:none;margin:0 0 14px;font-size:.85rem;color:var(--muted);
}
[data-state="loading"] .eu-loading-note{display:block}
/* LOADING:end */

/* WORKSPACE:start */

/* ==========================================================================
   DATA WORKSPACE — a horizontal sticky strip, matching the Feitenkaart.

   This was a two-column layout with a ~330px sticky sidebar. Because that
   sidebar was pinned, it stayed on screen after the charts ended and covered
   the left edge of every section below them.

   The controls now sit in a thin full-width bar above the charts and stick
   just below the header, exactly as .fk-controls does: same 92px offset, same
   cream ground, same collapse behaviour on mobile. Nothing is pinned to the
   side of the page and the charts take the full column width.

   The markup did not change — .eu-controls and .eu-results are still the two
   children of .eu-workspace. Only the box they sit in did.
   ========================================================================== */

.eu-workspace{
  display:block;                  /* was: grid, 330px sidebar + charts */
  margin-block-start:22px;
}
.eu-results{min-inline-size:0}
/* the three download buttons refuse to shrink; let them wrap rather than
   stretch the column past the viewport */
.eu-table-actions{min-inline-size:0;flex-wrap:wrap}
.eu-table-bar{min-inline-size:0;flex-wrap:wrap}

/* --- the sticky strip — same treatment as .fk-controls ------------------ */
.eu-controls{
  position:sticky;
  inset-block-start:92px;         /* clears the 76px header + gold rule */
  z-index:30;
  background:var(--cream);
  padding-block:10px;
  margin-block:0 14px;
  min-inline-size:0;
}

/* the filter card becomes a row that wraps, not a stacked panel */
.eu-workspace .eu-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px 18px;
  align-items:start;
  padding:14px 16px;
  margin:0;
}
/* .eu-field-col stacked four controls for the sidebar; in a strip its
   children should be siblings in the row */
.eu-workspace .eu-field-col{display:contents}
.eu-workspace .eu-field-wide{grid-row:auto}
.eu-workspace .eu-field-years{grid-column:auto}
.eu-workspace .eu-field > label{margin-bottom:5px;font-size:.66rem}
.eu-workspace .eu-year-selects{max-inline-size:none}
/* keep the bar thin: hints stay in the DOM for assistive tech but are
   clamped to two lines so a long one cannot balloon the strip */
.eu-workspace .eu-hint{
  font-size:.71rem;margin-block-start:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.eu-workspace .eu-check{align-self:end;padding-block-end:6px}

/* the expand/collapse control is mobile-only */
.eu-controls-toggle{display:none}

/* --- results panels: cards in a full-width column ----------------------- */
.eu-panel{padding:0;margin:0 0 24px;position:relative;background:none}
.eu-panel:last-child{margin-block-end:0}
.eu-panel > .wrap{max-inline-size:none;padding:0;margin:0}
.eu-panel .chart-card{margin:0 0 18px;background:var(--paper)}
.eu-panel .section-head{margin-block-end:18px}
.eu-panel .section-head h2{font-size:1.5rem}
.eu-results .eu-panel + .eu-panel::before{display:none}

@media (max-width:1000px){
  /* identical to .fk-controls at this breakpoint */
  .eu-workspace{margin-block-start:18px}
  .eu-controls{
    inset-block-start:76px;
    margin-inline:-14px;padding-inline:14px;
    border-block-end:1px solid var(--line);
    box-shadow:0 6px 18px -12px rgba(34,32,27,.35);
  }
  .eu-controls-toggle{
    display:flex;align-items:center;gap:10px;inline-size:100%;
    background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-s);
    padding:11px 14px;font-family:var(--sans);font-size:.9rem;color:var(--ink);
    cursor:pointer;text-align:start;
  }
  .eu-controls-toggle:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
  .eu-ct-label{font-weight:700;flex:none}
  .eu-ct-summary{
    color:var(--muted);font-size:.82rem;flex:1;min-inline-size:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eu-controls-toggle .eu-dd-caret{transition:transform .2s}
  .eu-controls[data-open="true"] .eu-controls-toggle .eu-dd-caret{transform:rotate(180deg)}

  /* collapsed until tapped; closes again after a selection */
  .eu-workspace .eu-filters{
    display:none;grid-template-columns:1fr;margin-block-start:10px;
    max-block-size:60vh;overflow-y:auto;
  }
  .eu-controls[data-open="true"] .eu-filters{display:grid}
  .eu-workspace .eu-field-col{display:block}
  .eu-workspace .eu-field-col > .eu-field + .eu-field{margin-block-start:14px}
  .eu-workspace .eu-hint{-webkit-line-clamp:none;display:block}
}

@media (max-width:560px){
  .eu-controls{padding-block:8px}
  .eu-workspace .eu-filters{padding:14px}
}

/* --- Feitenkaart interactive section: same behaviour, simpler structure ---
   Its controls and chart already share a parent, so the control block only
   needs to stick; no restructuring was required. */
.fk-controls{
  position:sticky;inset-block-start:92px;z-index:30;
  background:var(--cream);
  padding-block:10px;margin-block:18px 14px;
}
.fk-controls .fk-data-controls{margin:0}
#fk-data .chart-card{margin-block-start:0}

@media (max-width:1000px){
  .fk-controls{
    inset-block-start:76px;
    margin-inline:-14px;padding-inline:14px;
    border-block-end:1px solid var(--line);
    box-shadow:0 6px 18px -12px rgba(34,32,27,.35);
  }
  .fk-controls .fk-data-controls{display:none;margin-block-start:10px}
  .fk-controls[data-open="true"] .fk-data-controls{display:grid}
}
/* WORKSPACE:end */