/* EU Inc reference — design system "European legal instrument, modernised".
 * IBM Plex superfamily (self-hosted), deep EU blue + muted star-gold accent.
 * Light + dark, reduced-motion aware. No framework. */

/* ---------- Fonts (self-hosted woff2, latin subset) ---------- */
@font-face { font-family:"Plex Sans"; src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Serif"; src:url("/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Serif"; src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Serif"; src:url("/fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --paper:#F7F6F2; --surface:#FFFFFF; --surface-2:#F1EFE8;
  --ink:#15171C; --ink-soft:#565B66; --ink-faint:#888D97;
  --blue:#0B2E6F; --blue-link:#1A4FCE; --blue-wash:#EEF1FA;
  --cta-bg:#0B2E6F; --cta-fg:#FFFFFF; --cta-sub:#CDD7F0;
  --gold:#B5870B; --gold-wash:#F6EEDA;
  --line:#E4E2DA; --line-strong:#CFCcC1;
  --ok:#1F6B3B; --ok-bg:#E3F1E7; --warn:#8A5A0B; --warn-bg:#F7ECD6;
  --no:#9B2C2C; --no-bg:#F6E0DF; --unknown:#5A6069; --unknown-bg:#ECEAE3;
  --max:54rem; --wide:64rem;
  --r:10px; --r-sm:7px;
  --font-display:"Plex Serif",Georgia,"Times New Roman",serif;
  --font-body:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --shadow:0 1px 2px rgba(11,46,111,.04), 0 8px 24px -12px rgba(11,46,111,.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0E1117; --surface:#161B24; --surface-2:#1C222D;
    --ink:#ECEEF1; --ink-soft:#A2A9B5; --ink-faint:#727A86;
    --blue:#9DB8FF; --blue-link:#8DA8FF; --blue-wash:#172138;
    --cta-bg:#152648; --cta-fg:#FFFFFF; --cta-sub:#B7C2DC;
    --gold:#E0B147; --gold-wash:#2A2415;
    --line:#252B36; --line-strong:#333A48;
    --ok:#7FD79B; --ok-bg:#13251A; --warn:#E5B871; --warn-bg:#2A2113;
    --no:#F0908B; --no-bg:#2A1718; --unknown:#9098A4; --unknown-bg:#1E232D;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.62;
  font-feature-settings:"kern","liga"; -webkit-font-smoothing:antialiased;
}
body::before { content:""; display:block; height:3px; background:linear-gradient(90deg,var(--blue) 0 72%,var(--gold) 72% 100%); }
::selection { background:var(--gold-wash); color:var(--ink); }
main { max-width:var(--max); margin:0 auto; padding:2.5rem 1.25rem 4rem; }
img { max-width:100%; height:auto; }

h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.14; letter-spacing:-.012em; color:var(--ink); }
h1 { font-size:clamp(2.1rem,1.5rem+2.6vw,3.1rem); line-height:1.06; margin:.1em 0 .35em; }
h2 { font-size:clamp(1.4rem,1.15rem+1vw,1.85rem); margin:2.2em 0 .5em; }
h3 { font-size:1.18rem; margin:1.6em 0 .35em; }
p,li { color:var(--ink); }
a { color:var(--blue-link); text-decoration:none; text-underline-offset:2px; }
a:hover { text-decoration:underline; }
strong { font-weight:600; }
code { font-family:var(--font-mono); font-size:.88em; background:var(--surface-2); padding:.1em .38em; border-radius:5px; }
hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
:focus-visible { outline:2px solid var(--blue-link); outline-offset:2px; border-radius:3px; }

/* ---------- Eyebrow / labels (mono signature) ---------- */
.eyebrow {
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem;
}
.status-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
@media (prefers-reduced-motion: no-preference) { .status-dot { animation:pulse 2.6s ease-in-out infinite; } }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 3px var(--gold-wash);} 50%{ box-shadow:0 0 0 6px transparent; } }

/* ---------- Header ---------- */
.site-header {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.25rem;
  max-width:var(--wide); margin:0 auto; padding:1.4rem 1.25rem;
  border-bottom:1px solid var(--line);
}
.brand { display:flex; flex-direction:column; line-height:1.05; color:var(--ink); margin-right:auto; }
.brand:hover { text-decoration:none; }
.brand-mark { font-family:var(--font-display); font-weight:600; font-size:1.32rem; letter-spacing:-.01em; }
.brand-sub { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:.18rem; }
.main-nav { display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-self:center; }
.main-nav a { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); }
.main-nav a:hover { color:var(--blue-link); text-decoration:none; }
.lang-switch { display:flex; gap:.5rem; align-self:center; font-family:var(--font-mono); font-size:.74rem; }
.lang-switch a { color:var(--ink-faint); }
.lang-switch [aria-current] { color:var(--gold); font-weight:500; }

/* ---------- Hero ---------- */
.hero {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
  padding:1rem 0 2rem; border-bottom:1px solid var(--line); margin-bottom:2.5rem;
}
.hero h1 { margin-top:.1em; }
.hero .lede { font-size:1.22rem; line-height:1.5; color:var(--ink-soft); max-width:40ch; }
.hero-mark { font-family:var(--font-mono); font-weight:500; color:var(--line-strong); display:flex; align-items:flex-start; line-height:.8; user-select:none; }
.hero-mark .num { font-size:clamp(4rem,3rem+6vw,7.5rem); }
.hero-mark .sup { font-size:1.6rem; color:var(--gold); margin-top:.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-body, .hero-mark { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .hero-mark { animation-delay:.08s; }
}
@keyframes rise { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- Prose ---------- */
.prose .lede,.section-intro { font-size:1.18rem; line-height:1.55; color:var(--ink-soft); }
.prose blockquote { margin:1.6rem 0; padding:.4rem 0 .4rem 1.2rem; border-left:3px solid var(--gold); font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink); }
.prose table { border-collapse:collapse; width:100%; margin:1.5rem 0; font-size:.92rem; }
.prose th,.prose td { border-bottom:1px solid var(--line); padding:.65rem .75rem; text-align:left; vertical-align:top; }
.prose thead th { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); border-bottom:1.5px solid var(--line-strong); }
.prose tbody th { font-weight:600; }
.prose tbody tr:hover { background:var(--surface-2); }

.breadcrumb { font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); margin-bottom:1.4rem; }
.breadcrumb a { color:var(--ink-faint); }
.breadcrumb a:hover { color:var(--blue-link); }
.breadcrumb [aria-current] { color:var(--ink-soft); }
.page-meta { font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); margin:-.2em 0 1.6em; }
.intention { color:var(--gold); }
.status-note { background:var(--gold-wash); border:1px solid color-mix(in srgb,var(--gold) 30%,transparent); color:var(--ink); padding:.7rem .9rem; border-radius:var(--r-sm); font-size:.9rem; }

/* ---------- Cards / pillars ---------- */
.card-list,.pillars { list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); }
.card a,.pillar {
  display:flex; flex-direction:column; gap:.3rem; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.2rem; color:var(--ink); transition:border-color .15s, transform .15s, box-shadow .15s;
}
.card a:hover,.pillar:hover { text-decoration:none; border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
.card strong,.pillar h2 { font-family:var(--font-display); font-size:1.16rem; font-weight:600; margin:0; }
.pillar h2 { letter-spacing:-.01em; }
.card span,.pillar p { color:var(--ink-soft); font-size:.92rem; margin:0; }
.card .intention { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.4rem; }
.pillars .pillar { position:relative; }

/* ---------- Tracker timeline ---------- */
.tracker .stage { font-family:var(--font-mono); }
.timeline { list-style:none; padding:0; margin:1.5rem 0; }
.milestone { position:relative; padding:0 0 1.8rem 1.75rem; border-left:2px solid var(--line); margin-left:.4rem; }
.milestone::before { content:""; position:absolute; left:-7px; top:.15rem; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--line-strong); }
.milestone.status-done::before { background:var(--blue); border-color:var(--blue); }
.milestone.status-current::before { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
.milestone.status-current { border-left-color:var(--gold); }
.milestone time { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink-soft); }
.milestone h3 { margin:.2rem 0 .25rem; font-size:1.08rem; }
.milestone .source { font-family:var(--font-mono); font-size:.72rem; }
.state-table td:first-child { font-weight:500; }

/* ---------- Badges ---------- */
.badge { display:inline-block; padding:.14rem .55rem; border-radius:999px; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.03em; }
.badge-in,.badge-yes { background:var(--ok-bg); color:var(--ok); }
.badge-leaning,.badge-debating { background:var(--warn-bg); color:var(--warn); }
.badge-out,.badge-no { background:var(--no-bg); color:var(--no); }
.badge-unknown { background:var(--unknown-bg); color:var(--unknown); }

/* ---------- News digest ---------- */
.news-list { list-style:none; padding:0; margin:1.5rem 0; }
.news-item { padding:1.3rem 0; border-bottom:1px solid var(--line); }
.news-item time { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--gold); }
.news-item h3 { margin:.3rem 0 .35rem; font-size:1.22rem; }
.news-item p { margin:.25rem 0; color:var(--ink-soft); }
.news-item .src { font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); }
.news-single .page-meta { color:var(--gold); }
.source-link { margin-top:1.8rem; font-family:var(--font-mono); font-size:.84rem; font-weight:500; }

/* ---------- Newsletter ---------- */
.newsletter { background:var(--cta-bg); color:var(--cta-fg); border-radius:var(--r); padding:1.8rem; margin:3rem 0 1rem; }
.newsletter h2 { color:var(--cta-fg); margin:0 0 .35rem; font-size:1.45rem; }
.newsletter p { color:var(--cta-sub); margin:0 0 1.1rem; font-size:.98rem; }
.newsletter-form { display:flex; flex-wrap:wrap; gap:.55rem; }
.newsletter-form input { flex:1 1 15rem; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; border-radius:var(--r-sm); font:inherit; }
.newsletter-form input::placeholder { color:#9fb0d8; }
.newsletter-form input:focus-visible { outline-color:var(--gold); background:rgba(255,255,255,.14); }
.newsletter-form button { padding:.7rem 1.3rem; background:var(--gold); color:#1a1405; border:0; border-radius:var(--r-sm); font:inherit; font-weight:600; cursor:pointer; transition:filter .15s; }
.newsletter-form button:hover { filter:brightness(1.07); }

/* ---------- Tool widget ---------- */
.tool { border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; margin:1.8rem 0; background:var(--surface); }
.tool .controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.tool .controls > span { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.tool label.chip { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; padding:.3rem .8rem; font-size:.85rem; cursor:pointer; user-select:none; transition:background .15s,border-color .15s; }
.tool label.chip:hover { border-color:var(--blue-link); }
.tool label.chip input { margin-right:.4rem; accent-color:var(--blue-link); }
.tool .share { font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); margin-top:.9rem; }

/* ---------- Related / footer ---------- */
.related { margin-top:3rem; border-top:1px solid var(--line); padding-top:1.2rem; }
.related h2 { font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin:0 0 .6rem; }
.related ul { padding-left:1.1rem; }
.site-footer { max-width:var(--wide); margin:4rem auto 0; padding:2rem 1.25rem 3.5rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-soft); }
.footer-nav { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.8rem 0; font-family:var(--font-mono); font-size:.76rem; }
.footer-nav a { color:var(--ink-soft); }
.disclaimer { font-style:italic; max-width:60ch; }
.copyright { font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Dossier hero (home) ---------- */
.dossier .hero-body { min-width:0; }
.dossier-refs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0; }
.dossier-refs .ref {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--ink-soft);
  border:1px solid var(--line-strong); border-radius:6px; padding:.26rem .6rem; white-space:nowrap;
}
.dossier-refs .ref-lead { color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,transparent); background:var(--gold-wash); }
.dossier-mark { font-family:var(--font-mono); font-weight:500; color:var(--line-strong); display:flex; align-items:flex-start; line-height:.8; user-select:none; margin:0; }
.dossier-mark .num { font-size:clamp(4rem,3rem+6vw,7.5rem); }
.dossier-mark .sup { font-size:1.6rem; color:var(--gold); margin-top:.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .dossier .hero-body, .dossier-mark { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .dossier-mark { animation-delay:.08s; }
}

/* ---------- Procedure rail (the signature) ---------- */
.procedure-rail {
  list-style:none; margin:.25rem 0 3rem; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
}
.prs { position:relative; padding:1.65rem .35rem 0; text-align:center; min-width:0; }
.prs::before { /* connector into this stage from the previous one */
  content:""; position:absolute; top:11px; left:-50%; width:100%; height:2px;
  background:var(--line-strong); z-index:0;
}
.prs:first-child::before { display:none; }
.prs-done::before, .prs-current::before { background:var(--blue); }
.prs-mark {
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line-strong); z-index:1;
}
.prs-done .prs-mark { background:var(--blue); border-color:var(--blue); }
.prs-current .prs-mark { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
.prs-label {
  display:block; font-family:var(--font-mono); font-size:.72rem; line-height:1.3;
  letter-spacing:.02em; color:var(--ink-faint);
}
.prs-done .prs-label { color:var(--ink-soft); }
.prs-current .prs-label { color:var(--ink); font-weight:500; }
@media (prefers-reduced-motion: no-preference) {
  .prs-current .prs-mark { animation:pulse 2.6s ease-in-out infinite; }
}

/* ---------- Home sections ---------- */
.section-eyebrow {
  font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 1rem;
}
.home-intro { margin:0 0 1rem; }
.home-block { margin:3rem 0; }
.home-cols { display:grid; gap:1.25rem; grid-template-columns:1fr 1fr; margin:3rem 0; }
.home-cols .home-block { margin:0; }
.snapshot { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.35rem; height:100%; }
.snapshot-stage { font-family:var(--font-display); font-size:1.08rem; line-height:1.42; margin:0 0 .7rem; color:var(--ink); }
.snapshot-next { font-size:.9rem; color:var(--ink-soft); margin:.5rem 0; }
.snapshot-next .tag, .next-up .tag {
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:5px; padding:.1rem .4rem; margin-right:.35rem;
}
.snapshot-next time, .next-up time { font-family:var(--font-mono); font-size:.82em; color:var(--ink); }
.snapshot-meta { font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); display:flex; align-items:center; gap:.5rem; margin:.9rem 0 1rem; }
.snapshot-cta { font-family:var(--font-mono); font-size:.8rem; font-weight:500; }
.news-list.compact { margin:0 0 1rem; }
.news-list.compact .news-item { padding:.7rem 0; }
.news-list.compact .news-item:first-child { padding-top:0; }
.news-list.compact .news-item h3 { font-size:1rem; margin:.15rem 0 0; }
.news-list.compact .news-item time { color:var(--gold); }

/* ---------- Tracker: next-up banner + legend ---------- */
.next-up {
  background:var(--blue-wash); border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
  border-radius:var(--r-sm); padding:.7rem .9rem; font-size:.95rem; color:var(--ink); margin:0 0 2rem;
}
.tl-legend { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; padding:0; margin:0 0 1.2rem; }
.tl-legend li { font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); display:flex; align-items:center; gap:.45rem; }
.tl-legend li::before { content:""; width:11px; height:11px; border-radius:50%; border:2px solid var(--line-strong); background:var(--paper); }
.tl-legend .status-done::before { background:var(--blue); border-color:var(--blue); }
.tl-legend .status-current::before { background:var(--gold); border-color:var(--gold); }
.milestone.status-planned time { color:var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (max-width:720px) {
  .home-cols { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .hero { grid-template-columns:1fr; }
  .hero-mark, .dossier-mark { display:none; }
  main { padding-top:1.8rem; }
  .procedure-rail { grid-auto-flow:row; grid-auto-columns:auto; gap:.1rem; }
  .prs { text-align:left; padding:.2rem 0 .2rem 1.6rem; }
  .prs::before { top:-50%; left:6px; width:2px; height:100%; }
  .prs:first-child::before { display:block; top:50%; }
  .prs-mark { top:50%; left:6px; transform:translate(-50%,-50%); }
}