/* ============================================================
   Plan Promethee base stylesheet.
   Design tokens, reset and page chrome (header/nav, hero, footer),
   extracted from the minified "Europe 2031" template this site
   started from; everything unused there was dropped. The note's
   own type system and components live in note.css, loaded after
   this file. Fonts: fonts.css (Courier Prime, Oswald) plus the
   Geist Mono faces below (chart and simulator labels).
   ============================================================ */

@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/GeistMono-Regular.woff2) format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/GeistMono-SemiBold.woff2) format("woff2"); }

/* ---------- design tokens ---------- */
:root {
  color-scheme: light;
  --ink: #1D1C1C;
  --ink-soft: #6F777E;
  --paper: #FFFFFC;
  --white: #FFFFFF;
  --blue-800: #002E63;
  --blue-700: #0051AE;
  --blue-600: #406896;
  --blue-100: #DEE6EE;
  --mute: #B1B7CD;
  --rule: #E2E2E2;
  --rail-left: 96px;
  --rail-right: 220px;
  --gutter: 48px;
  --embargo-h: 0px;
  --content-max: 1320px;
  --prose-left-pad: 32px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- reset + paper grain ---------- */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; padding:0; background:var(--white); color:var(--ink); font-family:var(--font-serif); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { min-height:100vh; }
a { color:var(--blue-700); text-decoration:none; }
img { display:block; max-width:100%; }
h1, h2, h3, h4, p { margin:0; }
button { appearance:none; -webkit-appearance:none; background:none; border:0; color:inherit; font:inherit; cursor:pointer; }

/* ---------- sticky header + nav ---------- */
.site-header { position:sticky; top:var(--embargo-h); z-index:30; height:70px; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; background:var(--white); border-bottom:1px solid transparent; transition:border-color .28s var(--ease-out); }
.site-header.show-wordmark { border-bottom-color:var(--blue-100); }
body:not(.has-hero) .site-header { border-bottom-color:var(--blue-100); }
.wordmark { font-family:var(--font-serif); font-weight:700; font-size:28px; line-height:1; letter-spacing:-.03em; color:inherit; white-space:nowrap; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .28s var(--ease-out),transform .28s var(--ease-out); }
.site-header.show-wordmark .wordmark { opacity:1; transform:translateY(0); pointer-events:auto; }
body:not(.has-hero) .wordmark { opacity:1; transform:none; pointer-events:auto; }
.nav { display:flex; align-items:center; gap:36px; }
.nav-cluster { display:flex; align-items:center; gap:28px; }
.mobile-lang-toggle { display:none; }
.nav-link { font-family:var(--font-mono); font-weight:600; font-size:13px; letter-spacing:.12em; color:inherit; text-transform:uppercase; position:relative; padding:6px 0; }
.nav-link:after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor; transition:right .28s var(--ease-out); }
.nav-link:hover:after, .nav-link[aria-current=page]:after { right:0; }
.nav-toggle { display:none; align-items:center; justify-content:center; width:40px; height:40px; margin-right:-8px; padding:0; background:none; border:0; color:inherit; cursor:pointer; }
.nav-toggle-bars { display:inline-flex; flex-direction:column; gap:4px; width:22px; }
.nav-toggle-bars span { height:2px; background:currentColor; border-radius:2px; transform-origin:center; transition:transform .26s var(--ease-out),opacity .24s var(--ease-out); }
.site-header.nav-open .nav-toggle-bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bars span:nth-child(2) { opacity:0; transform:scaleX(.1); }
.site-header.nav-open .nav-toggle-bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-scrim { display:none; }
.nav { scrollbar-width:thin; scrollbar-color:var(--ink-soft) transparent; }
.nav::-webkit-scrollbar { width:9px; }
.nav::-webkit-scrollbar-track { background:transparent; }
.nav::-webkit-scrollbar-thumb { background-color:var(--ink-soft); border-radius:6px; border:2px solid var(--white); background-clip:padding-box; }

/* ---------- hero ---------- */
.hero { padding:80px var(--gutter) 96px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"title illustration" "preamble illustration"; column-gap:56px; row-gap:48px; align-items:start; max-width:var(--content-max); margin:0 auto; }
@media(min-width:1500px) {
  .hero { column-gap:80px; }
}
.hero-title { grid-area:title; display:flex; flex-direction:column; justify-content:center; min-height:max(320px,calc(100vh - 300px)); max-width:620px; padding-left:calc(var(--rail-left) + var(--prose-left-pad) - var(--gutter)); will-change:transform; pointer-events:none; }
.hero-title>* { pointer-events:auto; }
@media(min-width:1025px)and (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes hero-pin {0%{transform:translateZ(0)}to{transform:translate3d(0,var(--hero-entry, 360px),0)}}
    .hero-title { animation:hero-pin linear both; animation-timeline:scroll(root block); animation-range:0 var(--hero-entry, 360px); }
  }
}
.hero-mark { font-family:var(--font-serif); font-weight:700; font-size:clamp(56px,6.4vw,108px); line-height:.95; letter-spacing:-.035em; color:var(--ink); margin:0; white-space:nowrap; }
.hero-sub { margin-top:18px; font-family:var(--font-serif); font-style:normal; font-weight:400; font-size:clamp(22px,2.1vw,30px); line-height:1.2; letter-spacing:-.012em; color:var(--ink); max-width:540px; }
.hero-authors { margin-top:14px; font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(13px,1.05vw,15px); line-height:1.35; letter-spacing:-.005em; color:var(--ink-soft); max-width:540px; will-change:opacity; }
.hero-authors a { color:inherit; text-decoration:none; text-underline-offset:.18em; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); transition:color .16s ease,text-decoration-color .16s ease; }
.hero-authors a:hover, .hero-authors a:focus-visible { color:var(--ink); text-decoration-line:underline; text-decoration-color:color-mix(in srgb,currentColor 55%,transparent); outline:none; }
.hero-date { margin-top:18px; font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.hero-illustration { grid-area:illustration; position:sticky; top:calc(150px + var(--embargo-h)); align-self:start; height:max(240px,calc(100vh - 300px)); display:flex; align-items:center; justify-content:center; width:100%; margin:0 auto; }
.hero-illustration .hero-image { width:100%; max-width:580px; aspect-ratio:1 / 1; max-height:calc(100vh - 300px); height:auto; object-fit:contain; display:block; }

/* ---------- misc shared pieces ---------- */
.chart-title { font-family:var(--font-mono-ch); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600); }
.footer { padding:56px var(--gutter) 20px; background:var(--white); border-top:1px solid var(--blue-100); color:var(--ink); }

/* ---------- responsive ---------- */
@media(min-width:1280px) {
  :root { --prose-left-pad: 64px; --rail-right: 340px; --content-max: 1440px; }
}
@media(min-width:1500px) {
  :root { --content-max: 1600px; }
}
@media(min-width:1800px) {
  :root { --content-max: 1760px; }
}
@media(max-width:1280px) {
  :root { --gutter: 40px; --rail-left: 110px; --rail-right: 340px; --prose-left-pad: 18px; }
}
@media(max-width:1024px) {
  :root { --gutter: 32px; }
  .hero { grid-template-columns:1fr; grid-template-areas:"title" "illustration" "preamble"; row-gap:48px; column-gap:0; min-height:0; padding:48px 32px 64px; }
  .hero-title { max-width:none; padding-left:0; text-align:center; align-items:center; margin:0 auto; min-height:0; }
  .hero-illustration { position:static; height:auto; aspect-ratio:1 / 1; max-width:580px; }
  .hero-sub { margin-left:auto; margin-right:auto; }
}
@media(max-width:880px) {
  .site-header { padding:0 24px; }
  .wordmark { font-size:24px; }
  .nav { gap:18px; }
  .nav-cluster { gap:12px; }
}
@media(max-width:720px) {
  .site-header { padding:0 20px 0 32px; height:60px; }
  .wordmark { font-size:22px; }
  .nav-toggle { display:inline-flex; }
  .mobile-lang-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 8px; font-family:var(--font-mono); font-weight:600; font-size:12px; line-height:1; letter-spacing:.12em; color:inherit; text-transform:uppercase; }
  .mobile-lang-toggle:focus-visible { outline:2px solid var(--blue-700); outline-offset:2px; }
  .nav .lang-toggle { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--white); border-bottom:1px solid var(--blue-100); padding:6px 0 12px; box-shadow:0 16px 28px -20px #00000073; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s; max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain; }
  .site-header.nav-open .nav { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-link { font-size:14px; width:100%; padding:14px 32px; }
  .nav-link:after { display:none; }
  .nav-link[aria-current=page] { color:var(--blue-700); }
  .nav-link-scenario { display:block; }
  .nav-cluster { gap:12px; }
  .nav-scrim { display:block; position:fixed; inset:60px 0 0; background:#0a102057; opacity:0; pointer-events:none; transition:opacity .24s var(--ease-out); }
  .site-header.nav-open .nav-scrim { opacity:1; pointer-events:auto; }
  .hero-mark { font-size:clamp(40px,11vw,56px); }
  .hero-sub { font-size:18px; }
  .footer { padding:48px 20px 56px; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .footer, .nav-toggle { display:none!important; }
  .hero { display:block!important; max-width:none!important; width:auto!important; min-height:0!important; padding-left:0!important; padding-right:0!important; text-align:center!important; }
  .hero-title { min-height:0!important; max-width:none!important; padding:0!important; align-items:center!important; text-align:center!important; }
  .hero-illustration { display:block!important; position:static!important; height:auto!important; width:58%!important; max-width:320px!important; margin:26px auto 4px!important; }
  .hero-illustration .hero-image { width:100%!important; height:auto!important; }
  h1, h2, h3 { break-after:avoid; break-inside:avoid; }
  h1+*, h2+*, h3+* { break-before:avoid; }
  h2:after, h3:after { content:""; display:block; height:4.6em; margin-bottom:-4.6em; }
  body { background:#fff!important; color:#000!important; }
  @page { margin:18mm 16mm; }
}