/*
Theme Name: SENSE-WELL
Theme URI: https://sense-well.eu
Description: Sensory-friendly theme for the SENSE-WELL EUniWell project. Follows WCAG 2.2 AA and the NAS/Hassell autism accessibility guidelines. Includes a sensory settings panel.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: sensewell
License: GPL-2.0-or-later
*/
/* Self-hosted fonts (no requests to Google) */
@font-face{font-family:"Red Hat Display";src:url(assets/fonts/red-hat-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url(assets/fonts/red-hat-display-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url(assets/fonts/red-hat-display-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url(assets/fonts/red-hat-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url(assets/fonts/red-hat-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(assets/fonts/red-hat-text-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(assets/fonts/red-hat-text-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(assets/fonts/red-hat-text-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

/* Layout: two-tier header with a colour-mode switch; hero split between headline and a circular "sensory map" framed by the logo's ribbons; bands joined by soft curves; solid brand cards with one square corner. */
:root{
  --bg:#ffffff; --band:#eef1f8; --surface:#ffffff; --ink:#0d2c52; --ink-2:#4a5d74; --line:#d7deea;
  --brand:#1b4f9c; --brand-2:#123c78; --on-brand:#ffffff; --brand-soft:#d9e4f5;
  --teal:#159488; --lav:#8a78d4; --peach:#f08a58; --mint:#7fd0c3; --sun:#f6a06f; --sand:#e6df9c;
  --cta:#0f7f74; --on-cta:#ffffff; --link:#1b4f9c; --focus:#f08a58;
  --map-bg:#f6f8fc; --map-line:#0d2c52;
  --display:"Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --text:"Red Hat Text", "Segoe UI", system-ui, sans-serif;
  --fs:100%; --lh:1.65; --ls:0; --ws:0; --maxw:76rem;
  --rad:22px; --rad-s:12px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0c1726; --band:#111f33; --surface:#16273d; --ink:#e6edf5; --ink-2:#a9b8c9; --line:#2a3c55;
  --brand:#2a63b8; --brand-2:#1c4a8f; --on-brand:#ffffff; --brand-soft:#1b3352;
  --teal:#3fb7a8; --lav:#a596e6; --peach:#f39a6c; --mint:#6cc2b4; --sun:#f3a77d; --sand:#cfc887;
  --cta:#45c1b1; --on-cta:#08201d; --link:#9cc0f2; --focus:#f6a97f;
  --map-bg:#13233a; --map-line:#c9d6e6; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0c1726; --band:#111f33; --surface:#16273d; --ink:#e6edf5; --ink-2:#a9b8c9; --line:#2a3c55;
  --brand:#2a63b8; --brand-2:#1c4a8f; --on-brand:#ffffff; --brand-soft:#1b3352;
  --teal:#3fb7a8; --lav:#a596e6; --peach:#f39a6c; --mint:#6cc2b4; --sun:#f3a77d; --sand:#cfc887;
  --cta:#45c1b1; --on-cta:#08201d; --link:#9cc0f2; --focus:#f6a97f;
  --map-bg:#13233a; --map-line:#c9d6e6; color-scheme:dark }
/* Visitor choices (Sensory settings) override the device theme */
:root.mode-light{
  --bg:#ffffff; --band:#eef1f8; --surface:#ffffff; --ink:#0d2c52; --ink-2:#4a5d74; --line:#d7deea;
  --brand:#1b4f9c; --brand-2:#123c78; --on-brand:#ffffff; --brand-soft:#d9e4f5;
  --teal:#159488; --lav:#8a78d4; --peach:#f08a58; --mint:#7fd0c3; --sun:#f6a06f; --sand:#e6df9c;
  --cta:#0f7f74; --on-cta:#ffffff; --link:#1b4f9c; --focus:#f08a58; --map-bg:#f6f8fc; --map-line:#0d2c52; color-scheme:light }
:root.mode-calm{
  --bg:#f7f7f6; --band:#eeeeec; --surface:#fbfbfa; --ink:#2c3743; --ink-2:#5b6570; --line:#dcdddb;
  --brand:#4d6077; --brand-2:#3e4e62; --on-brand:#ffffff; --brand-soft:#e3e6ea;
  --teal:#6f9590; --lav:#9893ab; --peach:#c09b86; --mint:#a7c4bf; --sun:#cdb09d; --sand:#cfcbaa;
  --cta:#46706b; --on-cta:#ffffff; --link:#3f5873; --focus:#a87b5a; --map-bg:#f1f1ef; --map-line:#3c4752; color-scheme:light }
:root.mode-dark{
  --bg:#0c1726; --band:#111f33; --surface:#16273d; --ink:#e6edf5; --ink-2:#a9b8c9; --line:#2a3c55;
  --brand:#2a63b8; --brand-2:#1c4a8f; --on-brand:#ffffff; --brand-soft:#1b3352;
  --teal:#3fb7a8; --lav:#a596e6; --peach:#f39a6c; --mint:#6cc2b4; --sun:#f3a77d; --sand:#cfc887;
  --cta:#45c1b1; --on-cta:#08201d; --link:#9cc0f2; --focus:#f6a97f; --map-bg:#13233a; --map-line:#c9d6e6; color-scheme:dark }
:root.mode-contrast{
  --bg:#ffffff; --band:#ffffff; --surface:#ffffff; --ink:#000000; --ink-2:#000000; --line:#000000;
  --brand:#002a6b; --brand-2:#001a45; --on-brand:#ffffff; --brand-soft:#ffffff;
  --teal:#000; --lav:#000; --peach:#000; --mint:#000; --sun:#000; --sand:#000;
  --cta:#00413a; --on-cta:#ffffff; --link:#002ea8; --focus:#c24d00; --map-bg:#ffffff; --map-line:#000; color-scheme:light }
:root.size-1{--fs:112.5%} :root.size-2{--fs:125%} :root.size-3{--fs:140%}
:root.space-wide{--lh:1.9; --ls:.035em; --ws:.14em}
:root.font-easy{--display:"Atkinson Hyperlegible", Verdana, sans-serif; --text:"Atkinson Hyperlegible", Verdana, sans-serif}

html{font-size:var(--fs)}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--text); font-size:1.125rem; line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws)}
h1,h2,h3{font-family:var(--display); color:var(--ink); line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-.01em; word-spacing:0}
h1{font-size:clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); font-weight:800; color:var(--brand)}
h2{font-size:clamp(1.6rem, 1.3rem + 1vw, 2.15rem); font-weight:700; color:var(--brand)}
h3{font-size:1.3rem; font-weight:700}
p{margin:0}
a{color:var(--link); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
strong{font-weight:600}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem, 4vw, 2.75rem)}
.inner{max-width:62rem; margin-inline:auto}
.read{max-width:40rem}
.stack{display:flex; flex-direction:column; gap:1rem}
.muted{color:var(--ink-2)}
.small{font-size:.95rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:1rem; top:-5rem; background:var(--surface); color:var(--ink); padding:.7rem 1rem; z-index:60; border:2px solid var(--focus); border-radius:10px}
.skip:focus{top:1rem}
.eyebrow{font-family:var(--display); font-weight:600; color:var(--teal); font-size:1.05rem}
:root.mode-contrast .eyebrow{color:#000}

/* Notice strip */
.proto{background:var(--sand); color:#2b2a14; font-size:.88rem}
:root.mode-dark .proto{color:#1d1c0c}
.proto .wrap{padding-block:.4rem}

/* Header */
header.site{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top, 0px); z-index:30}
.util{display:flex; justify-content:flex-end; align-items:center; gap:1.4rem; font-size:.9rem; padding-top:.5rem}
.util a{color:var(--ink-2); text-decoration:none}
.util a:hover{color:var(--ink); text-decoration:underline}
.modebox{display:flex; align-items:center; gap:.7rem; background:var(--band); border-radius:0 0 14px 14px; padding:.35rem .5rem .35rem .9rem; margin-top:-.5rem; font-size:.78rem; color:var(--ink-2); letter-spacing:.06em}
.switch{all:unset; cursor:pointer; position:relative; width:5.6rem; height:2rem; border-radius:999px; background:var(--brand); color:var(--on-brand); font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:0; display:flex; align-items:center}
.switch .knob{position:absolute; top:3px; width:calc(2rem - 6px); height:calc(2rem - 6px); border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--peach); right:3px}
.switch .knob svg{width:1rem; height:1rem}
.switch .t{padding-left:.75rem}
.switch[aria-checked="true"] .knob{right:auto; left:3px; color:var(--brand)}
.switch[aria-checked="true"] .t{padding-left:2.4rem}
.switch:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.lang{display:flex; gap:.15rem}
.lang button{all:unset; cursor:pointer; padding:.15rem .35rem; border-radius:6px; color:var(--ink-2); font-weight:500}
.lang button[aria-pressed="true"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--teal)}
.lang button:focus-visible{outline:3px solid var(--focus)}
.mainbar{display:flex; align-items:center; gap:1.5rem; padding-block:.55rem 1rem}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand img{width:68px; height:auto; display:block}
.word{font-family:var(--display); font-size:1.6rem; line-height:1; color:var(--ink); white-space:nowrap; letter-spacing:.01em}
.word b{font-weight:800} .word span{font-weight:400; letter-spacing:.06em}
.word small{display:block; font-family:var(--text); font-size:.62rem; letter-spacing:.16em; color:var(--ink-2); margin-top:.4rem; font-weight:500}
nav.main{margin-left:auto}
nav.main ul{list-style:none; display:flex; gap:.2rem; margin:0; padding:0}
nav.main a{display:block; white-space:nowrap; padding:.5rem .75rem; color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:500; font-size:1.06rem; border-radius:10px}
nav.main a:hover{background:var(--band)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--teal)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:0; word-spacing:0;
  padding:.7rem 1.5rem; min-height:46px; border-radius:999px; border:2px solid transparent; background:var(--cta); color:var(--on-cta); text-decoration:none; cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.dark{background:var(--ink); color:var(--bg)}
.btn.light{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.light:hover{background:var(--band)}
.btn.on-brand{background:rgba(255,255,255,.16); color:#fff}
.btn.on-brand:hover{background:rgba(255,255,255,.26)}
:root.mode-contrast .btn.on-brand{background:#fff; color:#000}
.btn svg{width:1.15em; height:1.15em; flex:0 0 auto}
.icon-btn{all:unset; cursor:pointer; display:none; width:46px; height:46px; border-radius:50%; align-items:center; justify-content:center; border:2px solid var(--line); color:var(--ink)}
.icon-btn svg{width:1.4rem; height:1.4rem}
.icon-btn:focus-visible{outline:3px solid var(--focus)}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:2rem; padding-block:3.2rem 5.5rem; position:relative; z-index:1}
.hero .lead{font-size:1.25rem; color:var(--ink-2); max-width:33rem}
.hero .actions{display:flex; gap:.8rem; flex-wrap:wrap}
.hero-vis{position:relative; aspect-ratio:1/1; max-width:540px; width:100%; justify-self:end}
.hero-vis svg{width:100%; height:100%; display:block; overflow:visible}
.hero-curve{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; z-index:2}
.hero-curve path{fill:var(--band)}
.down{position:absolute; left:clamp(1rem, 4vw, 2.75rem); bottom:1.2rem; z-index:3; color:var(--lav)}

/* Bands */
section.band{padding-block:clamp(2.75rem, 5vw, 4.5rem)}
.band.tinted{background:var(--band)}
.band-curve{display:block; width:100%; height:70px; background:var(--band)}
.band-curve path{fill:var(--bg)}
.band-curve.flip{background:var(--bg)} .band-curve.flip path{fill:var(--band)}
.head-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem}
.head-row a{font-family:var(--display); font-weight:600}

.g2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.4rem, 3vw, 2.75rem)}
.g3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem}
.g4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.1rem}
.g2>*,.g3>*,.g4>*{min-width:0}

/* Status panel */
.status{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:clamp(1.3rem, 3vw, 2rem); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2rem; align-items:center; box-shadow:0 1px 0 var(--line)}
.status h2{font-size:1.5rem}
.months{display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:4px; margin-top:1rem}
.months span{height:3rem; border-radius:8px; background:var(--band); display:flex; align-items:flex-end; justify-content:center; padding-bottom:.25rem; font-size:.72rem; color:var(--ink-2); letter-spacing:0; word-spacing:0; position:relative}
.months span::before{content:""; position:absolute; left:6px; right:6px; top:6px; height:5px; border-radius:3px}
.months .p1::before{background:var(--brand)} .months .p2::before{background:var(--lav)} .months .p3::before{background:var(--peach)}
.months .done{background:var(--brand-soft); color:var(--ink)}
.months .now{background:var(--teal); color:#fff; font-weight:700}
.months .now::before{background:#fff}
:root.mode-contrast .months span{border:1px solid #000}
.legend{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.88rem; color:var(--ink-2); margin-top:.7rem}
.legend i{display:inline-block; width:.85rem; height:.85rem; border-radius:3px; margin-right:.35rem; vertical-align:-.08rem}
.facts-now{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem}
.facts-now li{display:grid; grid-template-columns:2.4rem 1fr; gap:.8rem; align-items:start}
.facts-now .dot{width:2.4rem; height:2.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--band); color:var(--brand)}
.facts-now .dot svg{width:1.2rem; height:1.2rem}
.facts-now span{display:block; font-size:.9rem; color:var(--ink-2)}
.facts-now b{font-family:var(--display); font-weight:600}

/* Chips */
.chip{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-size:.82rem; font-weight:600; padding:.2rem .7rem; border-radius:999px; background:var(--band); color:var(--ink); white-space:nowrap; letter-spacing:0; word-spacing:0}
.chip::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--ink-2)}
.chip.now{background:var(--teal); color:#fff} .chip.now::before{background:#fff}
.chip.done::before{background:var(--brand)}
.chip.review::before{background:var(--peach)}
:root.mode-contrast .chip{border:1px solid #000}

/* Phases */
.phase{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.6rem; display:flex; flex-direction:column; gap:.8rem; position:relative; overflow:hidden}
.phase::after{content:""; position:absolute; right:-40px; top:-40px; width:110px; height:110px; border-radius:50%; opacity:.22}
.phase.p1::after{background:var(--brand)} .phase.p2::after{background:var(--lav)} .phase.p3::after{background:var(--peach)}
.phase .when{display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; font-size:.95rem; color:var(--ink-2); position:relative; z-index:1}
.phase h3{color:var(--ink)}
.phase .num{font-family:var(--display); font-weight:800; font-size:.95rem; color:var(--brand)}
.phase.p2 .num{color:var(--lav)} .phase.p3 .num{color:var(--peach)}
:root.mode-calm .phase.p2 .num, :root.mode-calm .phase.p3 .num{color:var(--ink-2)}

/* News cards (solid, NAS-like) */
.news{background:var(--brand); color:var(--on-brand); border-radius:var(--rad) var(--rad) var(--rad) 4px; overflow:hidden; display:flex; flex-direction:column; min-height:100%}
.news:nth-child(3n+2){background:var(--brand-2)}
.news .cover{height:8.5rem; position:relative; overflow:hidden}
.news .cover svg.art{position:absolute; inset:0; width:100%; height:100%}
.news .body{padding:1.2rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.65rem; flex:1}
.news .meta{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.9rem; opacity:.92}
.news .chip{background:rgba(255,255,255,.16); color:#fff} .news .chip::before{background:var(--mint)}
.news h3{color:#fff; font-size:1.35rem}
.news h3 a{color:inherit; text-decoration:none}
.news h3 a:hover{text-decoration:underline}
.news p{color:rgba(255,255,255,.9)}
.news .more{margin-top:auto; padding-top:.6rem}
.news .more a{display:inline-flex; color:#fff; font-family:var(--display); font-weight:700; text-decoration:none; background:rgba(255,255,255,.16); padding:.55rem 1.2rem; border-radius:999px}
.news .more a:hover{background:rgba(255,255,255,.26)}
:root.mode-contrast .news{background:#fff; color:#000; border:2px solid #000}
:root.mode-contrast .news h3, :root.mode-contrast .news p, :root.mode-contrast .news .meta{color:#000}
:root.mode-contrast .news .more a{background:#000; color:#fff}
:root.mode-contrast .news .chip{background:#fff; color:#000}
.filters{display:flex; gap:.5rem; flex-wrap:wrap}
.filters button{font-family:var(--display); font-weight:600; font-size:.98rem; padding:.45rem 1.1rem; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; min-height:44px}
.filters button[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Student block with SENS-E prompt cards */
.join{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:clamp(1.6rem, 4vw, 3rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:2.5rem; align-items:center; position:relative; box-shadow:0 1px 0 var(--line)}
.prompts{position:relative; display:flex; flex-direction:column; gap:.9rem}
.prompt{background:var(--band); border-radius:16px 16px 16px 4px; padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.55rem; max-width:21rem}
.prompt:nth-child(2){align-self:flex-end}
.prompt .q{font-family:var(--display); font-weight:600; font-size:1rem; display:flex; align-items:center; gap:.5rem}
.prompt .q svg{width:1.1rem; height:1.1rem; color:var(--teal)}
.scale{display:flex; gap:.35rem}
.scale span{flex:1; height:1.9rem; border-radius:8px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:600; color:var(--ink-2)}
.scale span.sel{background:var(--teal); color:#fff}
.prompt .t{font-size:.78rem; color:var(--ink-2)}
.dots{position:absolute; inset:0; pointer-events:none}
.dots i{position:absolute; border-radius:50%}

.channels{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0}
.channels li{display:flex; align-items:center; gap:.45rem; font-size:.95rem; font-weight:500; border-radius:999px; padding:.35rem .9rem; background:var(--band)}
.channels svg{width:1.05rem; height:1.05rem; color:var(--teal)}

/* Link tiles (NAS-like services) */
.tile{display:flex; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.4rem 1.5rem; text-decoration:none; color:var(--ink); min-height:8.5rem}
.tile:hover{border-color:var(--brand)}
.tile strong{font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--brand); display:block; line-height:1.2}
.tile span.d{display:block; color:var(--ink-2); font-size:.98rem; margin-top:.4rem}
.tile .arr{width:2rem; height:2rem; border-radius:50%; border:1.5px solid var(--lav); color:var(--lav); flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.tile .arr svg{width:1rem; height:1rem}

/* Partners */
.partners{list-style:none; margin:0; padding:0}
.partner{display:flex; flex-direction:column; gap:.35rem; height:100%; padding:1.3rem 1.4rem; border-radius:var(--rad) var(--rad) var(--rad) 4px; background:var(--surface); border:1px solid var(--line)}
.partner strong{font-family:var(--display); font-size:1.12rem; font-weight:700; line-height:1.25}
.partner .city{font-size:.92rem; color:var(--ink-2)}
.partner .flagbar{display:block; width:2.5rem; height:5px; border-radius:3px; margin-bottom:.4rem}

/* Inner page parts */
.page-head{background:var(--band); padding-block:2.6rem 0}
.page-head .wrap{display:flex; flex-direction:column; gap:1rem; padding-bottom:1.2rem}
.summary{display:flex; gap:.9rem; align-items:flex-start; background:var(--surface); border-radius:16px 16px 16px 4px; padding:1rem 1.2rem; max-width:52rem}
.summary svg{width:1.4rem; height:1.4rem; flex:0 0 auto; margin-top:.2rem; color:var(--teal)}
.obj{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; grid-template-columns:repeat(2, minmax(0,1fr))}
.obj li{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.3rem 1.4rem; display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--line)}
.obj b{font-family:var(--display); font-weight:800; color:#fff; background:var(--brand); border-radius:10px; padding:.2rem .55rem; font-size:.95rem}
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.1rem; margin:0}
.facts div{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.2rem 1.3rem; border:1px solid var(--line)}
.facts dt{font-family:var(--display); font-size:2.3rem; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; line-height:1.1}
.facts dd{margin:.2rem 0 0; color:var(--ink-2)}
.tool{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; border:1px solid var(--line)}
.tool .ic{width:3rem; height:3rem; border-radius:50%; background:var(--band); color:var(--teal); display:flex; align-items:center; justify-content:center}
.tool .ic svg{width:1.5rem; height:1.5rem}
.tool h3{color:var(--brand)}
.tool .tag{font-size:.9rem; color:var(--ink-2)}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.timeline li{display:grid; grid-template-columns:10rem minmax(0,1fr) auto; gap:.3rem 1.2rem; align-items:center; background:var(--surface); border-radius:14px 14px 14px 4px; padding:.85rem 1.2rem; border:1px solid var(--line)}
.timeline li.now{border:2px solid var(--teal)}
.timeline time{font-family:var(--display); font-weight:600; color:var(--brand); font-variant-numeric:tabular-nums}
.person{background:var(--surface); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--line)}
.person strong{font-family:var(--display); font-size:1.2rem; font-weight:700}
.person .role{font-family:var(--display); font-weight:600; color:var(--teal)}
.person .field{font-size:.98rem; color:var(--ink-2)}
.team-group + .team-group{margin-top:2.2rem}
.team-group h3{margin-bottom:1rem; color:var(--brand); display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap}
.team-group h3 span{font-family:var(--text); font-size:.98rem; font-weight:400; color:var(--ink-2)}
.article{padding-block:2.4rem 3.5rem}
.article .crumbs{font-size:.95rem; margin-bottom:1.2rem}
.article header{display:flex; flex-direction:column; gap:1rem; margin-bottom:1.8rem}
.article .body{display:flex; flex-direction:column; gap:1.15rem}
.article .body h2{font-size:1.45rem; margin-top:.6rem}
.article .body ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.35rem}
.note{background:var(--band); border-left:5px solid var(--peach); border-radius:4px 14px 14px 4px; padding:1rem 1.2rem}
details{background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:.2rem 1.2rem}
details + details{margin-top:.7rem}
summary{cursor:pointer; padding:.85rem 0; font-family:var(--display); font-weight:600; font-size:1.08rem}
details[open] summary{border-bottom:1px solid var(--line); margin-bottom:.7rem}
details p{padding-bottom:1rem}
.email{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.email code{font-family:var(--display); font-size:1.3rem; font-weight:700; user-select:all; color:var(--brand)}
ul.plain{padding-left:1.2rem; margin:0; display:flex; flex-direction:column; gap:.45rem}

/* Footer */
.foot-curve{display:block; width:100%; height:70px; background:var(--bg)}
.foot-curve path{fill:#0d2c52}
:root.mode-calm .foot-curve path{fill:#2f3a46} :root.mode-contrast .foot-curve path{fill:#000}
footer.site{background:#0d2c52; color:#e7eef6}
:root.mode-calm footer.site{background:#2f3a46} :root.mode-contrast footer.site{background:#000}
:root.mode-dark footer.site, :root.mode-dark .foot-curve path{background:#08111d; fill:#08111d}
footer.site a{color:#cfe2f7}
footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding-block:1rem 2.6rem}
footer h2{font-size:1.05rem; color:#fff; margin-bottom:.8rem}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.98rem}
footer .word{color:#fff} footer .word small{color:#b8c8d8}
footer .fund{border-top:1px solid rgba(255,255,255,.18); padding-block:1.2rem; font-size:.92rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* Settings drawer */
dialog.settings{margin:0 0 0 auto; height:100%; max-height:100%; width:min(27rem, 100%); max-width:100%; border:0; padding:0; background:var(--surface); color:var(--ink); border-radius:24px 0 0 24px}
dialog.settings::backdrop{background:rgba(13,44,82,.45)}
.drawer{display:flex; flex-direction:column; min-height:100%}
.drawer header{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1}
.drawer h2{font-size:1.4rem}
.drawer .groups{padding:1.2rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:1.5rem}
fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
legend{font-family:var(--display); font-weight:700; font-size:1.05rem; margin-bottom:.5rem; padding:0}
.opts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.55rem}
.opts.four{grid-template-columns:repeat(4, minmax(0,1fr))}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.opt > span{display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; border:2px solid var(--line); border-radius:14px 14px 14px 4px; padding:.7rem .8rem; font-size:.98rem; font-weight:500; min-height:46px; background:var(--bg)}
.opt input:checked + span{border-color:var(--teal); background:var(--band)}
.opt input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.swatch{display:flex; flex-direction:row; gap:4px}
.swatch i{width:1.1rem; height:1.1rem; border-radius:50%; border:1px solid rgba(0,0,0,.18)}
.toggle{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 0}
.toggle input{width:2.6rem; height:1.5rem; accent-color:var(--teal)}
.hint{font-size:.9rem; color:var(--ink-2)}
.drawer footer{margin-top:auto; padding:1rem 1.4rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}

/* Image switch-off (guideline 7.5) */
:root.no-images .deco, :root.no-images .brand img, :root.no-images .news .cover{display:none}
:root.no-images .hero-grid{grid-template-columns:1fr}
:root.no-images .hero-vis{display:none}

@media (prefers-reduced-motion: no-preference){
  :root:not(.no-motion) .btn, :root:not(.no-motion) .tile, :root:not(.no-motion) nav.main a{transition:background-color .15s ease, border-color .15s ease, filter .15s ease}
  :root:not(.no-motion) .switch .knob{transition:left .2s ease, right .2s ease}
}

@media (max-width: 1200px){
  nav.main{order:3; flex-basis:100%; margin-left:0; display:none}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column; padding-bottom:.5rem}
  .mainbar{flex-wrap:wrap}
  .mainbar .cta-top{margin-left:auto}
  .icon-btn{display:inline-flex}
  .g4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){
  .hero-grid, .status, .join, .g2, .g3, .obj{grid-template-columns:1fr}
  .hero-vis{max-width:360px; justify-self:center}
  .timeline li{grid-template-columns:1fr}
  .util .ulinks{display:none}
}
@media (max-width: 520px){
  .g4, .facts, footer .cols{grid-template-columns:1fr}
  .mainbar .cta-top{display:none}
  .word small{display:none}
  .brand img{width:54px}
  .modebox .lbl{display:none}
  .opts.four{grid-template-columns:repeat(2, minmax(0,1fr))}
  .months span{font-size:0}
}
.page-top{padding-block:2.2rem 0}
.status.single{display:block}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--band)}

/* ---------- WordPress parts ---------- */
nav.main ul.menu{list-style:none; display:flex; gap:.2rem; margin:0; padding:0}
nav.main li{margin:0}
.footer-menu{list-style:none}
.page-head{background:var(--band); padding-block:2.6rem 1.8rem}
.page-head .wrap{display:flex; flex-direction:column; gap:1rem}
.page-head h1{max-width:46rem}
.entry{padding-block:2.6rem 3.5rem}
.entry-content{display:flex; flex-direction:column; gap:1.15rem}
.entry-content > *{margin-block:0}
.entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > .wp-block-details{max-width:44rem}
.entry-content h2{margin-top:1.4rem}
.entry-content h3{margin-top:.8rem; color:var(--brand)}
.entry-content ul, .entry-content ol{padding-left:1.25rem; display:flex; flex-direction:column; gap:.4rem}
.entry-content img{height:auto; border-radius:var(--rad) var(--rad) var(--rad) 4px}
.entry-content figcaption{font-size:.92rem; color:var(--ink-2); margin-top:.5rem}
.entry-content blockquote{margin:0; padding:1rem 1.3rem; background:var(--band); border-left:5px solid var(--teal); border-radius:4px 14px 14px 4px}
.entry-content table{border-collapse:collapse; width:100%; font-size:1rem}
.entry-content .wp-block-table{overflow-x:auto}
.entry-content th, .entry-content td{border-bottom:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top}
.entry-content th{font-family:var(--display); font-weight:700}
.wp-block-columns{display:grid !important; grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap:1.4rem; margin:0}
.wp-block-column{min-width:0; display:flex; flex-direction:column; gap:1rem}
.wp-block-column > *{margin:0}
.wp-block-buttons{display:flex; gap:.8rem; flex-wrap:wrap}
.wp-block-button__link, .wp-element-button{display:inline-flex; align-items:center; font-family:var(--display); font-weight:700; padding:.7rem 1.5rem; min-height:46px; border-radius:999px; background:var(--cta); color:var(--on-cta); text-decoration:none; border:2px solid transparent}
.is-style-outline .wp-block-button__link{background:transparent; color:var(--ink); border-color:var(--ink)}
.wp-block-details{background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:.2rem 1.2rem}
.wp-block-details summary{cursor:pointer; padding:.85rem 0; font-family:var(--display); font-weight:600; font-size:1.08rem}
.wp-block-details[open] summary{border-bottom:1px solid var(--line); margin-bottom:.7rem}
.wp-block-details > *:not(summary){padding-bottom:1rem; margin:0}
.wp-block-separator{border:0; border-top:1px solid var(--line); margin:1rem 0}
/* Reusable block styles (add the class in the block's "Advanced" panel) */
.sw-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.4rem 1.5rem}
.sw-card > *{margin:0} .sw-card > * + *{margin-top:.7rem}
.sw-card h3{color:var(--brand)}
.sw-band{background:var(--band); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:clamp(1.3rem, 3vw, 2.2rem)}
.sw-band > *{margin:0} .sw-band > * + *{margin-top:1rem}
.sw-note{background:var(--band); border-left:5px solid var(--peach); border-radius:4px 14px 14px 4px; padding:1rem 1.2rem; max-width:44rem}
.sw-note > *{margin:0}
.sw-lead{font-size:1.25rem; color:var(--ink-2)}
.sw-objectives{list-style:none !important; padding:0 !important; display:grid !important; grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap:1.1rem !important; max-width:none !important; counter-reset:obj}
.sw-objectives li{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.3rem 1.4rem 1.3rem 4.4rem; position:relative; counter-increment:obj}
.sw-objectives li::before{content:"O" counter(obj); position:absolute; left:1.3rem; top:1.25rem; font-family:var(--display); font-weight:800; color:#fff; background:var(--brand); border-radius:10px; padding:.15rem .5rem; font-size:.95rem}
.sw-facts{display:grid !important; grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap:1.1rem}
.sw-facts .wp-block-column{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--rad) 4px; padding:1.2rem 1.3rem; gap:.2rem}
.sw-facts .wp-block-column > p:first-child{font-family:var(--display); font-size:2.3rem; font-weight:800; color:var(--brand); line-height:1.1; font-variant-numeric:tabular-nums}
.sw-facts .wp-block-column > p:last-child{color:var(--ink-2)}
/* News list */
.news .cover img{width:100%; height:100%; object-fit:cover; display:block}
.pager{display:flex; gap:.5rem; justify-content:center; margin-top:2rem; flex-wrap:wrap}
.pager .page-numbers{display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; border-radius:999px; border:2px solid var(--line); text-decoration:none; font-family:var(--display); font-weight:600; color:var(--ink); padding:0 .8rem}
.pager .current{background:var(--brand); color:#fff; border-color:var(--brand)}
.filters a{display:inline-flex; align-items:center; font-family:var(--display); font-weight:600; font-size:.98rem; padding:.45rem 1.1rem; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); min-height:44px; text-decoration:none}
.filters a[aria-current="page"]{background:var(--brand); color:#fff; border-color:var(--brand)}
.article .featured{margin:0 0 1.6rem}
.article .featured img{width:100%; height:auto; border-radius:var(--rad) var(--rad) var(--rad) 4px}
.empty{background:var(--band); border-radius:var(--rad); padding:1.5rem}
.lang a{color:var(--ink-2); text-decoration:none; padding:.15rem .35rem; border-radius:6px; font-weight:500}
.lang a[aria-current="true"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--teal)}
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:0} }
@media (max-width: 1200px){ nav.main ul.menu{flex-direction:column; padding-bottom:.5rem} }
.util ul.ulinks{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0}
.entry-content ol.timeline{padding-left:0; max-width:52rem; gap:.6rem}
.status.single{border:1px solid var(--line)}
.sw-objectives{grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)) !important}
@media (max-width: 860px){ .util ul.ulinks{display:none} .util{gap:.8rem} }
.mainbar .cta-top{white-space:nowrap}