/* Nove Europa prototype: a printed civic charter.
   Burgundy cloth, gold-stamped numerals, cream pages. */

:root {
  --burg: #592c3c;          /* live site burgundy, kept */
  --burg-2: #4b2333;
  --burg-deep: #3b1a28;
  --burg-ink: #26101a;
  --paper: #f6f4ef;         /* live site cream, kept */
  --paper-2: #ece6da;
  --paper-3: #ddd4c2;
  --ink: #1d1418;
  --ink-2: #5b4650;
  --gold: #cba652;          /* from the logo's stars; numerals, rules, focus on dark only */
  --gold-soft: #e6d3a1;
  --on-dark: #f6f4ef;
  --on-dark-2: #eadbd3;

  --f-display: "DM Serif Display", "Georgia", serif;
  --f-read: "Cabin", system-ui, sans-serif;
  --f-ui: "Cabin", system-ui, sans-serif;

  --measure: 68ch;
  --gutter: clamp(20px, 4vw, 48px);
  --wrap: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: var(--burg);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mast-h, 84px) + 28px);
  scrollbar-color: var(--burg) var(--paper-2);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--f-read);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--burg);
}

::selection { background: var(--burg); color: var(--paper); }

img { max-width: 100%; display: block; }
a { color: var(--burg); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark { --focus: var(--gold); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--burg); padding: 10px 16px;
  font: 600 0.95rem var(--f-ui); transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 50;
  background: var(--burg);
  color: var(--on-dark);
  --focus: var(--gold);
}
.mast-in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; min-width: 0; }
.brand img { width: 46px; height: 46px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font: 400 1.5rem/1.1 var(--f-display); letter-spacing: 0.005em; }
.brand-text small {
  font: 500 0.72rem/1.3 var(--f-ui); color: var(--on-dark-2);
  max-width: 34ch; margin-top: 2px;
}
.mast nav { display: flex; gap: clamp(16px, 2.6vw, 36px); flex-wrap: wrap; justify-content: flex-end; }
.mast nav a {
  font: 600 0.95rem/1 var(--f-ui); color: var(--on-dark); text-decoration: none;
  padding: 10px 2px; position: relative; letter-spacing: 0.01em;
}
.mast nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.mast nav a:hover::after, .mast nav a[aria-current="page"]::after { transform: scaleX(1); }

.progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(255, 255, 255, 0.12);
}
.progress i {
  display: block; height: 100%; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- shared buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 1rem/1 var(--f-ui); letter-spacing: 0.01em;
  padding: 18px 26px; text-decoration: none; border-radius: 2px;
  background: var(--paper); color: var(--burg-deep);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--gold-soft); text-decoration: none; }
.btn svg { width: 22px; height: 22px; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn.ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(246, 244, 239, 0.55); }
.btn.ghost:hover { background: rgba(246, 244, 239, 0.1); }
.btn.solid { background: var(--burg); color: var(--paper); }
.btn.solid:hover { background: var(--burg-deep); }
.btn.line { background: transparent; color: var(--burg); box-shadow: inset 0 0 0 1.5px var(--burg); }
.btn.line:hover { background: var(--burg); color: var(--paper); }

/* ---------- home: the cover ---------- */
.cover { background: var(--burg-deep); color: var(--on-dark); --focus: var(--gold); }
.cover-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 5.5vw, 80px) var(--gutter) 0; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.cover h1 { margin: 0; font: 400 clamp(2.8rem, 6.2vw, 5.6rem)/0.9 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.cover h1 .sub {
  display: block; margin-top: clamp(20px, 2.4vw, 32px);
  font: 500 clamp(1rem, 1.5vw, 1.2rem)/1.45 var(--f-ui); letter-spacing: 0.005em;
  color: var(--on-dark-2); max-width: 28.5rem; text-wrap: pretty;
}
.statement { margin: 0; max-width: 30ch; padding-bottom: 6px; }
.statement p { margin: 0; font: italic 500 clamp(1.65rem, 3vw, 2.4rem)/1.2 "Cormorant Garamond", Georgia, serif; text-wrap: balance; }
.statement cite { display: block; margin-top: 14px; font: 600 1rem/1 var(--f-ui); letter-spacing: 0.01em; text-transform: none; color: var(--gold); font-style: normal; }
.statement cite a { color: inherit; }
.cover-cta { margin-top: clamp(28px, 3.4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px; }

.numerals { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(203, 166, 82, 0.45); }
.numerals li { border-left: 1px solid rgba(203, 166, 82, 0.22); }
.numerals li:first-child { border-left: 0; }
.numerals a {
  display: block; height: 100%; padding: 22px 16px 30px; color: var(--on-dark); text-decoration: none;
  transition: background 0.3s var(--ease);
}
.numerals a:hover { background: rgba(246, 244, 239, 0.07); text-decoration: none; }
.numerals .n { display: block; font: 400 clamp(2.6rem, 5vw, 4.4rem)/1 var(--f-display); color: var(--gold); transition: transform 0.5s var(--ease); }
.numerals a:hover .n { transform: translateY(-6px); }
.numerals .t { overflow-wrap: break-word; display: block; margin-top: 12px; font: 600 0.78rem/1.35 var(--f-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-dark-2); }

@media (prefers-reduced-motion: no-preference) {
  .numerals li { animation: rise 0.9s var(--ease) both; }
  .numerals li:nth-child(1) { animation-delay: 0.05s; }
  .numerals li:nth-child(2) { animation-delay: 0.12s; }
  .numerals li:nth-child(3) { animation-delay: 0.19s; }
  .numerals li:nth-child(4) { animation-delay: 0.26s; }
  .numerals li:nth-child(5) { animation-delay: 0.33s; }
  .numerals li:nth-child(6) { animation-delay: 0.4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- home: the two doors ---------- */
.doors {
  max-width: var(--wrap); margin: clamp(20px, 3vw, 40px) auto clamp(48px, 7vw, 96px);
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px);
}
.door {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  min-height: clamp(230px, 20vw, 280px); padding: clamp(22px, 2.6vw, 38px);
  text-decoration: none; border-radius: 2px;
  transition: transform 0.5s var(--ease);
}
.door:hover { transform: translateY(-4px); text-decoration: none; }
.door .ghost {
  position: absolute; right: 0.02em; top: -0.12em; font: 400 clamp(11rem, 19vw, 19rem)/1 var(--f-display);
  pointer-events: none; user-select: none; transition: transform 0.7s var(--ease);
}
.door:hover .ghost { transform: translate(-10px, 6px); }
.door h2 { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--f-display); letter-spacing: -0.005em; text-wrap: balance; max-width: 22ch; position: relative; }
.door p { margin: 14px 0 0; max-width: 40ch; font: 400 1.1rem/1.5 var(--f-read); position: relative; }
.door .latest { margin-top: 10px; font: 600 0.9rem/1.4 var(--f-ui); position: relative; }
.door .go { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 12px; font: 700 1rem/1 var(--f-ui); position: relative; }
.door .go svg { width: 24px; height: 24px; transition: transform 0.4s var(--ease); }
.door:hover .go svg { transform: translateX(6px); }
.door.migration { background: var(--paper-2); color: var(--burg-deep); }
.door.migration .ghost { color: var(--burg); opacity: 0.09; }
.door.migration p { color: var(--ink); }
.door.media { background: var(--burg); color: var(--on-dark); --focus: var(--gold); }
.door.media .ghost { color: var(--gold); opacity: 0.16; }
.door.media p, .door.media .latest { color: var(--on-dark-2); }
.door.media .go { color: var(--gold); }

/* ---------- document pages: header band ---------- */
.band { background: var(--burg-deep); color: var(--on-dark); position: relative; overflow: hidden; --focus: var(--gold); }
.band-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(32px, 4vw, 56px); position: relative; }
.crumbs { font: 500 0.86rem/1.3 var(--f-ui); color: var(--on-dark-2); margin-bottom: clamp(24px, 3vw, 40px); }
.crumbs a { color: var(--on-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 8px; opacity: 0.6; }
.band h1 { margin: 0; font: 400 clamp(2.4rem, 5vw, 4.4rem)/1.02 var(--f-display); letter-spacing: -0.012em; max-width: 18ch; text-wrap: balance; position: relative; }
.band h1.wide { max-width: 20ch; }
.band .lede { margin: clamp(18px, 2.4vw, 30px) 0 0; max-width: 52ch; font: 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.5 var(--f-read); color: var(--on-dark); position: relative; }
.band .facts { margin: 22px 0 0; font: 600 0.9rem/1.4 var(--f-ui); color: var(--gold); letter-spacing: 0.02em; position: relative; }
.band .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.band .bignum {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-42%); font: 400 clamp(9rem, 19vw, 18rem)/1 var(--f-display);
  color: var(--gold); opacity: 0.92; pointer-events: none; user-select: none; letter-spacing: -0.03em;
}

/* ---------- document pages: layout ---------- */
.layout {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(48px, 7vw, 100px);
  display: grid; grid-template-columns: 250px minmax(0, var(--measure)); gap: clamp(16px, 2vw, 28px);
}
.layout.single { grid-template-columns: minmax(0, var(--measure)); }
.rail { position: sticky; top: calc(var(--mast-h, 84px) + 14px); align-self: start; max-height: calc(100vh - var(--mast-h, 84px) - 34px); overflow-y: auto; overflow-x: hidden; padding-right: 8px; margin-left: -12px; padding-left: 12px; }
.rail > summary, .rail h2 { font: 700 0.78rem/1.3 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; cursor: default; list-style: none; }
.rail > summary::-webkit-details-marker { display: none; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li a {
  display: grid; grid-template-columns: 2.2em 1fr; gap: 4px; padding: 10px 12px; margin-left: -12px;
  font: 500 0.95rem/1.35 var(--f-ui); color: var(--ink-2); text-decoration: none; border-radius: 2px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rail li a .n { font: 700 0.9rem/1.35 var(--f-ui); color: var(--burg); }
.rail li a:hover { background: var(--paper-2); color: var(--ink); }
.rail li a[aria-current="true"] { background: var(--paper-2); color: var(--burg-deep); font-weight: 700; }
.rail .group { margin-top: 20px; font: 700 0.78rem/1.3 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--paper-3); }
.rail .group a { color: var(--burg); text-decoration: none; }
.switch { display: flex; gap: 4px; margin: 0 0 22px; padding: 0; list-style: none; flex-wrap: wrap; }
.rail .switch li a {
  display: grid; place-items: center; width: 30px; height: 36px; margin: 0; padding: 0; grid-template-columns: none;
  font: 400 1.05rem/1 var(--f-display); color: var(--burg); text-decoration: none; background: var(--paper-2); border-radius: 2px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rail .switch li a:hover { background: var(--paper-3); }
.rail .switch li a[aria-current="page"] { background: var(--burg); color: var(--gold-soft); }
.rail .back { display: inline-block; margin-top: 14px; font: 600 0.9rem/1.3 var(--f-ui); }

/* ---------- reading column ---------- */
.prose { max-width: var(--measure); min-width: 0; font-size: 1.0625rem; line-height: 1.7; }
.prose p { margin: 0 0 1.1em; }
.prose strong { font-weight: 650; }
.prose h2 {
  margin: clamp(56px, 7vw, 88px) 0 18px; font: 400 clamp(1.5rem, 2.1vw, 1.95rem)/1.12 var(--f-display);
  color: var(--burg); letter-spacing: -0.005em; text-wrap: balance;
}
.prose h2:first-child, .prose > section:first-child h2 { margin-top: 0; }
.prose h2::before { content: ""; display: block; width: 56px; height: 3px; background: var(--gold); margin-bottom: 22px; }
.prose h3 { margin: 2.2em 0 0.6em; font: 400 1.3rem/1.2 var(--f-display); color: var(--burg); }
.prose .lede {
  font: italic 400 1.15rem/1.5 var(--f-read); color: var(--ink-2);
  margin: 0 0 1.6rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--paper-3);
}
.prose .sublede { font: italic 400 1.1rem/1.45 var(--f-read); color: var(--ink-2); margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--paper-3); }
.prose p.clause { margin-top: 1.7em; padding-left: 1.7em; text-indent: -1.7em; }
.prose ol, .prose ul { margin: 0.4em 0 1.2em; padding-left: 1.5em; }
.prose ol ol, .prose ul ul, .prose li > ol, .prose li > ul { margin: 0.5em 0 0.4em; }
.prose li { margin: 0.5em 0; padding-left: 0.25em; }
.prose li::marker { color: var(--burg); font: 700 0.92em var(--f-ui); }
.prose .table-wrap { overflow-x: auto; margin: 1.5em 0 2em; border: 1px solid var(--paper-3); border-radius: 2px; }
.prose table { border-collapse: collapse; width: 100%; min-width: 640px; font: 400 0.95rem/1.45 var(--f-ui); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--paper-3); }
.prose thead td, .prose thead th { background: var(--paper-2); font-weight: 700; color: var(--burg-deep); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 650; }
.prose .appendix { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--paper-3); font: 400 1.05rem/1.3 var(--f-ui); letter-spacing: 0.03em; color: var(--burg-deep); }
.prose .appendix::before { display: none; }

/* preamble block (hub) */
.preamble { max-width: var(--measure); }
.preamble h2 { margin-top: 0; }
.preamble .strong-lede { font: 400 clamp(1.55rem, 2.6vw, 2.05rem)/1.28 var(--f-display); color: var(--burg); margin: 0 0 1.2em; text-wrap: balance; }

/* ---------- hub: pillar banners ---------- */
.hub-section { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) 0; }
.hub-section > h2 { margin: 0 0 clamp(20px, 3vw, 36px); font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--f-display); color: var(--burg); }
.banners { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.banner {
  display: grid; grid-template-columns: clamp(80px, 12vw, 168px) 1fr auto; gap: clamp(16px, 3vw, 44px); align-items: center;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px);
  background: var(--burg); color: var(--on-dark); text-decoration: none; border-radius: 2px; --focus: var(--gold);
  transition: background 0.35s var(--ease), transform 0.45s var(--ease);
}
.banners li:nth-child(even) .banner { background: var(--burg-2); }
.banner:hover { background: var(--burg-deep); transform: translateX(6px); text-decoration: none; }
.banner .num { font: 400 clamp(3.6rem, 9vw, 7.4rem)/0.9 var(--f-display); color: var(--gold); text-align: center; letter-spacing: -0.02em; }
.banner h3 { margin: 0; font: 400 clamp(1.5rem, 2.8vw, 2.4rem)/1.08 var(--f-display); text-wrap: balance; }
.banner p { margin: 10px 0 0; max-width: 56ch; font: 400 1.02rem/1.5 var(--f-read); color: var(--on-dark-2); }
.banner .meta { margin: 12px 0 0; font: 600 0.82rem/1.4 var(--f-ui); letter-spacing: 0.04em; color: var(--gold); }
.banner svg { width: 34px; height: 34px; color: var(--gold); transition: transform 0.4s var(--ease); }
.banner:hover svg { transform: translateX(8px); }

.accomplish { max-width: var(--measure); }
.accomplish details { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 2px; margin-bottom: 10px; }
.accomplish summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font: 400 1.2rem/1.3 var(--f-display); color: var(--burg);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.accomplish summary::-webkit-details-marker { display: none; }
.accomplish summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--burg); border-bottom: 2px solid var(--burg); transform: rotate(45deg) translateY(-3px); transition: transform 0.3s var(--ease); }
.accomplish details[open] > summary::after { transform: rotate(225deg); }
.accomplish summary:hover { background: var(--paper-3); }
.accomplish details[open] > summary { border-bottom: 1px solid var(--paper-3); }
.accomplish .acc-body { padding: 18px 22px 22px; }
.accomplish .acc-body ol { padding-left: 1.4em; }

.complete-card {
  margin-top: clamp(40px, 6vw, 80px); padding: clamp(24px, 4vw, 48px); background: var(--paper-2); border-radius: 2px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.complete-card h2 { margin: 0 0 8px; font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--f-display); color: var(--burg); }
.complete-card p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 1.05rem; }
.complete-card .acts { display: flex; flex-wrap: wrap; gap: 12px; }

.noticebox { margin: 0 0 2.4rem; padding: 16px 18px; background: var(--paper-2); font: 500 0.95rem/1.5 var(--f-ui); color: var(--ink-2); border-radius: 2px; }
.noticebox strong { color: var(--burg-deep); }

/* ---------- pager ---------- */
.pager { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 190px;
  padding: clamp(20px, 3vw, 36px); background: var(--burg); color: var(--on-dark); text-decoration: none; border-radius: 2px; --focus: var(--gold);
  transition: background 0.35s var(--ease), transform 0.45s var(--ease);
}
.pager a:hover { background: var(--burg-deep); text-decoration: none; transform: translateY(-3px); }
.pager .dir { font: 700 0.85rem/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.pager .dir svg { width: 20px; height: 20px; }
.pager .next { text-align: right; }
.pager .next .dir { justify-content: flex-end; }
.pager .pn { font: 400 clamp(1.5rem, 2.8vw, 2.3rem)/1.1 var(--f-display); text-wrap: balance; }
.pager .pn small { display: block; font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-display); color: var(--gold); margin-bottom: 6px; }

/* ---------- footer ---------- */
.foot { background: var(--burg-deep); color: var(--on-dark-2); --focus: var(--gold); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 44px var(--gutter) 48px; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.foot strong { display: block; font: 400 1.5rem/1.2 var(--f-display); color: var(--on-dark); margin-bottom: 6px; }
.foot p { margin: 0; font: 500 0.92rem/1.5 var(--f-ui); max-width: 40ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot nav a { font: 600 0.92rem/1.4 var(--f-ui); color: var(--on-dark); text-decoration: none; padding: 6px 0; }
.foot nav a:hover { text-decoration: underline; }


/* placeholder pages */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card-list a { display: block; padding: 24px 26px; background: var(--paper-2); border-radius: 2px; text-decoration: none; color: var(--ink); transition: background 0.25s var(--ease); }
.card-list a:hover { background: var(--paper-3); }
.card-list h3 { margin: 0 0 6px; font: 400 1.5rem/1.2 var(--f-display); color: var(--burg); }
.card-list p { margin: 0; font-size: 1.02rem; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (min-width: 961px) { .rail > summary { pointer-events: none; } }
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; overflow: visible; padding: 0; margin: 0 0 8px; }
  .rail > summary { cursor: pointer; padding: 16px 18px; margin: 0; background: var(--paper-2); border-radius: 2px; display: flex; justify-content: space-between; align-items: center; color: var(--burg-deep); }
  .rail > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--burg); border-bottom: 2px solid var(--burg); transform: rotate(45deg) translateY(-3px); }
  .rail[open] > summary::after { transform: rotate(225deg); }
  .rail .rail-body { padding: 18px 4px 4px; }
  .layout .prose { max-width: none; }
}
@media (max-width: 860px) {
  .cover-grid { grid-template-columns: 1fr; }
  .statement { max-width: 36ch; }
  .doors { grid-template-columns: 1fr; }
  .numerals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numerals li:nth-child(4) { border-left: 0; }
  .numerals li:nth-child(n + 4) { border-top: 1px solid rgba(203, 166, 82, 0.22); }
  .banner { grid-template-columns: 64px 1fr; }
  .banner svg { display: none; }
  .complete-card { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager a { min-height: 150px; }
  .band .bignum { font-size: 9rem; opacity: 0.28; top: 56%; }
}
@media (max-width: 680px) {
  .band .bignum { display: none; }
  .numerals a { padding: 18px 10px 22px; }
  .numerals .t { font-size: 0.75rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .prose h2 { font-size: 1.4rem; hyphens: auto; overflow-wrap: break-word; }
  .brand-text small { display: none; }
  .mast-in { flex-wrap: wrap; row-gap: 2px; padding-block: 10px 4px; }
  .mast nav { gap: 6px 18px; justify-content: flex-start; }
  .mast nav a { font-size: 0.88rem; padding: 8px 0; }
  body { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

@media print {
  .mast, .rail, .pager, .foot, .proto-note, .band .actions, .noticebox { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { background: #fff; color: #000; }
  .band h1, .prose h2 { color: #000; }
  .band .bignum { display: none; }
  .layout { display: block; padding: 0; }
  .prose h2 { page-break-after: avoid; }
}

/* ---------- WordPress production additions ---------- */
.admin-bar .mast { top: 32px; }
.admin-bar .rail { top: calc(var(--mast-h, 116px) + 14px); }

@media (max-width: 782px) { .admin-bar .mast { top: 46px; } }
.preamble.prose h2 { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--f-display); color: var(--burg); margin: 0 0 0.7em; }
.preamble.prose h2::before { display: none; }
.preamble.prose { max-width: var(--measure); }
.prose .strong-lede { font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.3 var(--f-display); color: var(--burg); margin: 0 0 1.2em; text-wrap: balance; }
.prose h3.art { margin: clamp(40px, 5vw, 64px) 0 14px; font: 400 clamp(1.3rem, 1.7vw, 1.55rem)/1.15 var(--f-display); color: var(--burg); }
.accomplish .acc-body p { margin: 0 0 0.9em; }
.ne .prose img { height: auto; }

/* ---------- Preamble (hub) page uses the Pillar page shell ---------- */
.layout.wide { grid-template-columns: 250px minmax(0, 1fr); }
.hubflow { min-width: 0; }
.hubflow .preamble { max-width: var(--measure); }
.hub-block { margin-top: clamp(48px, 6vw, 80px); }
.hub-block > h2 { margin: 0 0 clamp(18px, 2.4vw, 28px); font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--f-display); color: var(--burg); }
.hubflow .accomplish { max-width: var(--measure); }
.hubflow .banner { grid-template-columns: clamp(64px, 8vw, 104px) 1fr auto; }
.hubflow .banner .num { font-size: clamp(3rem, 5.5vw, 4.8rem); }
.hubflow .complete-card { margin-top: 0; }
.pager .next:only-child { grid-column: 2; }
@media (max-width: 960px) { .layout.wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .pager .next:only-child { grid-column: auto; } .hubflow .banner { grid-template-columns: 64px 1fr; } }

/* ---------- Posts, ordinary pages, article list ---------- */
.prose figure { margin: 1.8em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 2px; }
.prose figcaption { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.5em; }
.prose .wp-block-embed { margin: 1.8em 0; }
.prose .wp-block-embed iframe, .prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.prose h4 { margin: 1.9em 0 0.5em; font: 700 1.1rem/1.3 var(--f-read); color: var(--burg); }
.prose h5 { margin: 1.6em 0 0.5em; font: 700 1rem/1.3 var(--f-read); color: var(--ink); }
.prose a { color: var(--burg); }
.prose a.btn { text-decoration: none; }
.prose a.btn.solid { color: var(--paper); }
.prose a.btn.solid:hover { color: var(--paper); }
.prose p.cta { margin: 1.6em 0; }
.prose hr, .prose .wp-block-separator { border: 0; border-top: 1px solid var(--paper-3); margin: 2.4em 0; }
.prose sup { font-size: 0.72em; line-height: 0; }
.prose blockquote { margin: 1.6em 0; padding: 18px 22px; background: var(--paper-2); border-radius: 2px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .wp-block-spacer { height: 12px !important; }
.prose details { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 2px; margin: 0 0 10px; }
.prose details > summary { padding: 16px 22px; cursor: pointer; font: 400 1.2rem/1.3 var(--f-display); color: var(--burg); }
.prose details > summary:hover { background: var(--paper-3); }
.prose details > :not(summary) { margin-left: 22px; margin-right: 22px; }
.prose details > :last-child { margin-bottom: 20px; }
.prose .wp-block-social-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 1em 0; list-style: none; }
.prose .wp-social-link a { text-decoration: none; }
.prose table { min-width: 0; }

/* the Advanced Accordion plugin blocks (Migration post): same panel look as the Charter accordions */
.ne .aab__accordion_container { border: 1px solid var(--paper-3) !important; background: var(--paper-2) !important; margin: 0 0 10px !important; border-radius: 2px; }
.ne .aab__accordion_head { background: var(--paper-2) !important; border: 0 !important; padding: 14px 22px !important; }
.ne .aab__accordion_head:hover { background: var(--paper-3) !important; }
.ne .aab__accordion_title { font: 400 1.2rem/1.3 var(--f-display) !important; color: var(--burg) !important; margin: 0 !important; }
.ne .aab__accordion_title strong { font-weight: 400; }
.ne .aab__accordion_body { background: var(--paper-2) !important; border-top: 1px solid var(--paper-3) !important; padding: 8px 22px 16px !important; }
.ne .aab__accordion_body .aab__accordion_container { background: var(--paper) !important; }
.ne .aab__accordion_body .aab__accordion_head, .ne .aab__accordion_body .aab__accordion_body { background: var(--paper) !important; }

/* article list */
.layout.single.wide-list { max-width: var(--wrap); grid-template-columns: minmax(0, 1fr); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card { display: block; padding: clamp(22px, 3vw, 36px); background: var(--paper-2); border-radius: 2px; color: var(--ink); text-decoration: none; transition: background 0.25s var(--ease), transform 0.4s var(--ease); }
.card:hover { background: var(--paper-3); transform: translateY(-3px); text-decoration: none; }
.card h2 { margin: 0 0 10px; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--f-display); color: var(--burg); text-wrap: balance; }
.card p { margin: 0 0 12px; font: 400 1.05rem/1.6 var(--f-read); color: var(--ink); max-width: 62ch; }
.card .meta { display: block; font: 700 0.85rem/1.4 var(--f-ui); letter-spacing: 0.04em; color: var(--ink-2); }
.card .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font: 700 1rem/1 var(--f-ui); color: var(--burg); }
.card .go svg { width: 22px; height: 22px; transition: transform 0.35s var(--ease); }
.card:hover .go svg { transform: translateX(5px); }

/* forms (contact form and comments) */
.ne .prose input[type="text"], .ne .prose input[type="email"], .ne .prose input[type="url"], .ne .prose textarea,
.ne #comments input[type="text"], .ne #comments input[type="email"], .ne #comments input[type="url"], .ne #comments textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--paper-3) !important; background: #fff; color: var(--ink); border-radius: 2px; box-shadow: none;
}
.ne .prose input:focus, .ne .prose textarea:focus, .ne #comments input:focus, .ne #comments textarea:focus { outline: 3px solid var(--burg); outline-offset: 1px; }
.ne .prose label, .ne #comments label { display: block; margin: 1em 0 0.35em; font: 700 0.95rem/1.3 var(--f-ui); color: var(--ink); }
.ne .prose button[type="submit"], .ne .prose .wp-block-jetpack-button button, .ne .prose .wp-block-button__link,
.ne #comments input[type="submit"], .ne #comments .submit {
  background: var(--burg); color: var(--paper); border: 0; border-radius: 2px; padding: 14px 24px; font: 700 1rem/1 var(--f-ui); cursor: pointer; transition: background 0.25s var(--ease);
}
.ne .prose button[type="submit"]:hover, .ne #comments input[type="submit"]:hover { background: var(--burg-deep); }
.comments-layout { padding-top: 0; }
.comments-wrap { max-width: var(--measure); }
.ne #comments h2, .ne #comments h3 { font: 400 1.5rem/1.2 var(--f-display); color: var(--burg); margin: 0 0 14px; }
.ne #comments ol, .ne #comments ul { list-style: none; padding: 0; margin: 0 0 24px; }
.ne #comments .comment-body { padding: 16px 0; border-top: 1px solid var(--paper-3); }
.ne #comments .comment-reply-link { font: 700 0.9rem var(--f-ui); }
.ne #comments p.form-submit { margin-top: 1em; }

/* ---------- cookie notice: same text and same three buttons, new look ---------- */
.ne .cookieadmin_consent_inside { background: var(--paper) !important; border: 0 !important; border-top: 3px solid var(--gold) !important; border-radius: 0 !important; box-shadow: 0 -10px 36px rgba(38, 16, 26, 0.22) !important; }
.ne #cookieadmin_notice_title { color: var(--burg-deep) !important; font: 400 1.4rem/1.2 var(--f-display) !important; }
.ne #cookieadmin_notice, .ne .cookieadmin_notice_con p { color: var(--ink) !important; font: 400 1rem/1.55 var(--f-read) !important; }
.ne .cookieadmin_btn { font: 700 0.95rem/1 var(--f-ui) !important; border-radius: 2px !important; padding: 13px 22px !important; border: 1.5px solid var(--burg) !important; background: transparent !important; color: var(--burg) !important; cursor: pointer; }
.ne .cookieadmin_accept_btn, .ne .cookieadmin_reject_btn { background: var(--burg) !important; color: var(--paper) !important; }
.ne .cookieadmin_btn:hover { background: var(--burg-deep) !important; color: var(--paper) !important; border-color: var(--burg-deep) !important; }
.ne .cookieadmin_btn:focus-visible { outline: 3px solid var(--burg) !important; outline-offset: 2px !important; }

/* ---------- Contact form (Jetpack) and hidden elements ---------- */
.ne [hidden] { display: none !important; }
.ne .prose .wp-block-jetpack-contact-form { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 16px !important; }
.ne .prose .wp-block-jetpack-contact-form > * { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; }
.ne .prose .wp-block-jetpack-contact-form .wp-block-jetpack-button { width: auto !important; }
.ne .prose textarea { min-height: 170px !important; height: 190px !important; max-height: 420px; resize: vertical; }
.ne .prose .required, .ne .prose label span { font-weight: 400; color: var(--ink-2); }
.ne .prose .contact-form { margin: 1.2em 0 2em; }

.ne .contact-form-submission { display: none; }
.ne .contact-form.submission-success .contact-form-submission, .ne .contact-form-submission.is-visible { display: block; }

.ne-page .prose h2 { margin-top: clamp(36px, 4.5vw, 56px); }
.ne-page .prose h2:first-child { margin-top: 0; }

/* Keep band text clear of the big numeral: the text area always stops before the numeral begins */
.band { --num: clamp(9rem, 19vw, 18rem); }
.band .bignum { font-size: var(--num) !important; }
.band:has(.bignum) h1 { max-width: min(18ch, calc(100% - var(--num) * 0.95 - 40px)); }
.band:has(.bignum) h1.wide { max-width: min(20ch, calc(100% - var(--num) * 0.95 - 40px)); }
.band:has(.bignum) .lede { max-width: min(66ch, calc(100% - var(--num) * 0.95 - 40px)); }
.band:has(.bignum) .facts { max-width: calc(100% - var(--num) * 0.95 - 40px); }
@media (max-width: 860px) { .band:has(.bignum) h1 { max-width: 18ch; } .band:has(.bignum) h1.wide { max-width: 20ch; } .band:has(.bignum) .lede { max-width: 52ch; } .band:has(.bignum) .facts { max-width: none; } }

/* ---------- Home: one start tile, one-page link below the boxes ---------- */
.cover-in { padding-bottom: clamp(48px, 6vw, 84px); }
.cover-cta { display: block; }
.start-tile { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: none; padding: 20px 24px; background: var(--paper); color: var(--burg-deep); border-radius: 2px; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: transform 0.45s var(--ease), background 0.25s var(--ease); }
.start-tile strong { display: block; font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.1 var(--f-display); font-weight: 400; }
.start-tile .sub { display: block; margin-top: 6px; font: 500 0.92rem/1.4 var(--f-ui); color: var(--ink-2); }
.start-tile svg { width: 32px; height: 32px; flex: none; color: var(--burg); transition: transform 0.4s var(--ease); }
.start-tile:hover { transform: translateY(-3px); background: #fff; text-decoration: none; }
.start-tile:hover svg { transform: translateX(6px); }
.doors { margin-bottom: clamp(48px, 7vw, 96px); }
.home-more { max-width: none; margin: 20px 0 0; font: 500 0.92rem/1.5 var(--f-ui); color: var(--on-dark-2); }
.home-more a { color: var(--on-dark); text-underline-offset: 0.25em; }
@media (max-width: 560px) { .start-tile { padding: 22px; gap: 16px; } .start-tile svg { width: 30px; height: 30px; } }

/* Home tile: sized by its own content so its texts stay on one line; the link line below is exactly as wide */
.cover-cta { width: fit-content; max-width: 100%; }
@media (min-width: 700px) { .start-tile strong, .start-tile .sub, .home-more { white-space: nowrap; } }

/* Title + subtitle: the subtitle is exactly as wide as the title above it and breaks into balanced lines */
.band .titleblock { width: fit-content; max-width: 100%; }
.band .titleblock .lede { width: 0; min-width: 100%; max-width: none; text-wrap: pretty; }

/* Home top: the subtitle and the start tile share one width (28.5 rem), so they line up */
.cover .cover-cta { min-width: min(28.5rem, 100%); }

/* ---------- Menu bar tucks away while reading; floating jump buttons on small screens ---------- */
.mast { transition: transform 0.4s var(--ease); will-change: transform; }
html.mast-away .mast { transform: translateY(-100%); }
html.mast-away.has-progress .mast { transform: translateY(calc(-100% + 3px)); }
@media (min-width: 961px) {
  .rail { top: calc(var(--stick, var(--mast-h, 84px)) + 14px); max-height: calc(100vh - var(--stick, var(--mast-h, 84px)) - 34px); transition: top 0.4s var(--ease); }
  .admin-bar .rail { top: calc(var(--stick, var(--mast-h, 116px)) + 14px); }
}
.jump { display: none; }
@media (max-width: 960px) {
  .jump {
    --focus: var(--gold);
    position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
    display: flex; flex-direction: column; overflow: hidden; border-radius: 30px;
    background: rgba(89, 44, 60, 0.8); color: var(--paper);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 22px rgba(59, 26, 40, 0.3);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .jump.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .jump button { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .jump button:focus-visible { outline-offset: -4px; }
  .jump button + button { border-top: 1px solid rgba(246, 244, 239, 0.22); }
  .jump button:active:not(:disabled) { background: rgba(246, 244, 239, 0.16); }
  .jump button:disabled { opacity: 0.35; cursor: default; }
  .jump svg { width: 26px; height: 26px; }
  .jump .bar { stroke: var(--gold); }
}
@media print { .jump { display: none !important; } }

/* Light buttons share the beige of the Migration card (--paper-2) */
.start-tile, .btn { background: var(--paper-2); }
.start-tile:hover { background: var(--paper); }

/* ---------- Donations and About pages ---------- */
.prose dl.pay { margin: 0 0 1.4em; padding: 0 24px; background: var(--paper-2); border-radius: 2px; }
.prose dl.pay dt { margin: 0 0 4px; padding-top: 18px; font: 700 0.78rem/1.3 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.prose dl.pay dd + dt { margin-top: 18px; border-top: 1px solid var(--paper-3); }
.prose dl.pay dd { margin: 0; padding-bottom: 18px; font: 600 1.2rem/1.45 var(--f-ui); color: var(--burg-deep); overflow-wrap: anywhere; user-select: all; }
.prose .note { font: 500 0.95rem/1.5 var(--f-ui); color: var(--ink-2); }
.prose .qr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 1.4em; }
.prose .qr { margin: 0; padding: 24px; background: var(--paper-2); border-radius: 2px; }
.prose .qr img { width: 200px; max-width: 100%; height: auto; margin: 0; border-radius: 2px; background: #fff; }
.prose .qr figcaption { margin-top: 16px; }
.prose .qr strong { display: block; margin-bottom: 4px; font: 700 0.78rem/1.3 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.prose .qr code { display: block; padding: 0; background: none; font: 600 0.98rem/1.5 ui-monospace, Consolas, monospace; color: var(--burg-deep); overflow-wrap: anywhere; user-select: all; }

/* Start tile title in the interface font (Cabin bold), like the other buttons */
.start-tile strong { font: 700 1.3rem/1.2 var(--f-ui); letter-spacing: 0.005em; }

/* Cover quote: tighter line spacing (was 1.2) */
.statement p { line-height: 1.08; }

/* Accordion top line in the interface font (Cabin medium, red) instead of the headline font. Only on posts (Migration, Draghi): there the top line is a long sentence. The Charter accordions have short titles and keep the headline font. */
.ne-read .prose details > summary { font: 500 1.15rem/1.5 var(--f-ui); color: var(--burg); letter-spacing: 0.005em; }
.ne-read .prose details > summary strong { font-weight: 700; }

/* Plus-sign accordions on posts (Migration): same Cabin look as the arrow accordion above */
.ne-read .aab__accordion_title { font: 500 1.15rem/1.5 var(--f-ui) !important; letter-spacing: 0.005em; }
.ne-read .aab__accordion_title strong { font-weight: 700; }

/* Article text: line spacing 1.5 (was 1.7) */
.prose { line-height: 1.5; }

/* Accordions: tighter line spacing (titles 1.35, text of the Preamble-page accordions 1.5) */
.ne-read .aab__accordion_title { line-height: 1.35 !important; }
.ne-read .prose details > summary { line-height: 1.35; }
.accomplish .acc-body { line-height: 1.5; }

/* Menu bar badge 20% bigger (46 px to 55 px) */
.brand img { width: 72px; height: 72px; }
@media (max-width: 680px) { .brand img { width: 60px; height: 60px; } }

/* ---------- Lora headings: bold serif for headings below headline size (headline-size titles stay DM Serif Display) ---------- */
:root { --f-head: "Lora", "Georgia", serif; }
.prose h2 { font: 700 clamp(1.55rem, 2.2vw, 1.9rem)/1.2 var(--f-head); }
.prose h3 { font: 700 1.4rem/1.25 var(--f-head); }
.prose h3.art { font: 700 clamp(1.4rem, 1.9vw, 1.6rem)/1.2 var(--f-head); }
.prose details > summary { font: 700 1.1rem/1.3 var(--f-head); }
.accomplish summary { font: 700 1.1rem/1.3 var(--f-head); }
.card h2 { font: 700 clamp(1.35rem, 2.1vw, 1.8rem)/1.2 var(--f-head); }
.card-list h3 { font: 700 1.35rem/1.2 var(--f-head); }
.ne #comments h2, .ne #comments h3 { font: 700 1.4rem/1.2 var(--f-head); }
.ne #cookieadmin_notice_title { font: 700 1.3rem/1.2 var(--f-head) !important; }

/* Preamble title and lead in Lora (trial, owner request) */
.preamble.prose h2 { font: 700 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--f-head); }
.preamble .strong-lede, .prose .strong-lede { font: 700 clamp(1.35rem, 2.1vw, 1.75rem)/1.3 var(--f-head); }

/* Lora for all remaining titles (owner request); numerals, Roman-numeral buttons and the Nove Europa name in menu and footer stay DM Serif Display */
.cover h1 { font: 700 clamp(2.5rem, 5.6vw, 5rem)/1 var(--f-head); letter-spacing: -0.015em; }
.band h1 { font: 700 clamp(2.2rem, 4.5vw, 3.9rem)/1.1 var(--f-head); letter-spacing: -0.01em; max-width: 20ch; }
.door h2 { font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.15 var(--f-head); letter-spacing: 0; }
.hub-section > h2, .hub-block > h2, .complete-card h2 { font: 700 clamp(1.45rem, 2.2vw, 2rem)/1.15 var(--f-head); }
.banner h3 { font: 700 clamp(1.4rem, 2.5vw, 2.1rem)/1.15 var(--f-head); }
.pager .pn { font: 700 clamp(1.4rem, 2.5vw, 2rem)/1.15 var(--f-head); }

/* Subtitle under the titles: softer and a bit smaller (owner's choice B) */
.cover h1 .sub { font: 400 clamp(1rem, 1.4vw, 1.1rem)/1.5 var(--f-read); color: #d9c9c2; }
.band .lede { font: 400 clamp(1rem, 1.4vw, 1.1rem)/1.55 var(--f-read); color: #d9c9c2; }

/* Home title in Lora semibold; start box title in Cabin semibold, smaller (owner's choices B and B) */
.cover h1 { font-weight: 600; }
.start-tile strong { font: 600 1.15rem/1.2 var(--f-ui); letter-spacing: 0.005em; }

/* Home title letter spacing -0.02 em, with hand-tuned pairs from the layout code (owner's choice D, adjusted) */
.cover h1 { letter-spacing: -0.02em; }

/* Preamble page title matches the home title: semibold, letter spacing -0.02 em (pair tuning is in the layout code) */
.ne-hub .band h1 { font-weight: 600; letter-spacing: -0.02em; }

/* Preamble title and lead: tighter letters (owner request) */
.preamble.prose h2 { letter-spacing: -0.025em; }
.preamble .strong-lede, .prose .strong-lede { letter-spacing: -0.02em; }

/* Gentle letter tightening on all Lora headings: -0.02 em for large ones, -0.015 em for smaller ones (owner request) */
.band h1, .door h2, .hub-section > h2, .hub-block > h2, .complete-card h2, .banner h3, .pager .pn, .prose h2 { letter-spacing: -0.02em; }
.prose h3, .prose h3.art, .prose details > summary, .accomplish summary, .card h2, .card-list h3, .ne #comments h2, .ne #comments h3, .ne #cookieadmin_notice_title { letter-spacing: -0.015em; }
.preamble.prose h2 { letter-spacing: -0.025em; }

/* Migration accordions: lines closer (titles 1.25, text inside 1.4) */
.ne-read .aab__accordion_title { line-height: 1.25 !important; }
.ne-read .prose details > summary { line-height: 1.25; }
.ne-read .aab__accordion_body, .ne-read .prose details > :not(summary) { line-height: 1.4; }

/* Inside all accordions: paragraph lines closer (1.4), more air between list items */
.accomplish .acc-body, .prose details > :not(summary), .aab__accordion_body { line-height: 1.4; }
.accomplish .acc-body li, .prose details li, .aab__accordion_body li { margin: 0.75em 0; }
.accomplish .acc-body ol, .accomplish .acc-body ul { margin-top: 0.9em; }

/* Accordions: smaller gaps around divider lines and sub-headings */
.prose .aab__accordion_body hr, .prose .aab__accordion_body .wp-block-separator, .prose details hr, .prose details .wp-block-separator, .accomplish .acc-body hr { margin: 0.8em 0; }
.aab__accordion_body h4, .aab__accordion_body h5, .aab__accordion_body h6, .prose details h4, .prose details h5, .prose details h6, .accomplish .acc-body h4, .accomplish .acc-body h5 { margin: 0.7em 0 0.4em; }
.aab__accordion_body ul, .aab__accordion_body ol, .prose details ul, .prose details ol { margin-top: 0.4em; margin-bottom: 0.6em; }
.aab__accordion_body p:empty, .prose details p:empty { display: none; }

/* Article column 20% narrower: 68ch to 54ch (owner request) */
:root { --measure: 54ch; }

/* Centred content block on wide screens (owner request): breadcrumbs, title, subtitle and text share one centred block; menu bar and footer unchanged */
@media (min-width: 961px) {
  .layout.single:not(.wide-list), body:has(.layout.single:not(.wide-list)) .band-in { max-width: calc(720px + 2 * var(--gutter)); }
  .layout:not(.single):not(.wide), body:has(.layout:not(.single):not(.wide)) .band-in, body:has(.layout:not(.single):not(.wide)) .pager { max-width: calc(919px + 2 * var(--gutter)); }
}

/* Jump menu hangs left of the centred article on wide screens (owner request): the article sits exactly where it does on single-column pages; the menu is glued to its left and aligned to nothing above. Narrower windows keep the combined block. */
@media (min-width: 1340px) {
  .layout:not(.single):not(.wide), body:has(.layout:not(.single):not(.wide)) .pager { max-width: calc(720px + 2 * var(--gutter)); }
  body:has(.layout:not(.single):not(.wide)) .band-in { max-width: calc(1000px + 2 * var(--gutter)); margin-left: calc((100% - 720px - 2 * var(--gutter)) / 2); margin-right: 0; }
  .layout:not(.single):not(.wide) { grid-template-columns: 0 minmax(0, var(--measure)); }
  .layout:not(.single):not(.wide) { column-gap: 0; }
  .layout:not(.single):not(.wide) > .rail { width: 262px; justify-self: end; margin-right: 28px; }
}

/* Big Nove Carta Europa titles (home and Preamble page) in Spectral Regular 400, letter spacing -0.05 em (owner's choice E); the N-o pair is tuned in the layout code */
.cover h1 { font: 400 clamp(2.75rem, 6.1vw, 5.5rem)/1 "Spectral", "Georgia", serif; letter-spacing: -0.05em; }
.ne-hub .band h1 { font: 400 clamp(2.4rem, 4.9vw, 4.3rem)/1.08 "Spectral", "Georgia", serif; letter-spacing: -0.05em; }

/* Phones: the big titles scale with the screen width so they stay on one line with some air at the right */
.cover h1 { font-size: min(10.2vw, clamp(2.75rem, 6.1vw, 5.5rem)); }
.ne-hub .band h1 { font-size: min(10.2vw, clamp(2.4rem, 4.9vw, 4.3rem)); }

/* Very narrow phones: Pillar banners fit (long word Constitutional) */
@media (max-width: 380px) {
  .hubflow .banner { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding-inline: 16px; }
  .banner h3 { font-size: 1.25rem; overflow-wrap: break-word; }
}

/* Cover: the start box and the subtitle share a width that shrinks with the window (28.5 rem on wide screens, never below 23.5 rem), so the box never reaches into the quote's area */
.cover { --cta-w: min(28.5rem, max(23.5rem, 46vw)); }
.cover .cover-cta { width: min(var(--cta-w), 100%); min-width: 0; max-width: 100%; }
.cover h1 .sub { max-width: min(var(--cta-w), 100%); }

/* Preamble page joins the centred arrangement of the Pillar pages (owner remark): same article position, jump menu hanging to its left; the Pillar banners follow the article width */
@media (min-width: 961px) {
  .layout.wide, body:has(.layout.wide) .band-in { max-width: calc(919px + 2 * var(--gutter)); }
}
@media (min-width: 1340px) {
  .layout.wide { max-width: calc(720px + 2 * var(--gutter)); grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
  .layout.wide > .rail { width: 262px; justify-self: end; margin-right: 28px; }
  body:has(.layout.wide) .band-in { max-width: calc(1000px + 2 * var(--gutter)); margin-left: calc((100% - 720px - 2 * var(--gutter)) / 2); margin-right: 0; }
}

/* Big Pillar numeral moves left (owner request): 130 px closer to the title on wide windows */
@media (min-width: 1340px) {
  body:has(.layout:not(.single):not(.wide)) .band { --num: 12rem; }
  body:has(.layout:not(.single):not(.wide)) .band .bignum { right: calc(100% - var(--gutter) - 780px); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1 { max-width: min(20ch, calc(780px - var(--num) * 0.95 - 56px)); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .lede { max-width: min(66ch, calc(780px - var(--num) * 0.95 - 56px)); }
}

/* Pillar title area back under the globe (owner remark): on wide windows the breadcrumbs, title, subtitle and the big numeral use the same width as the menu bar again (original design); the article text below stays centred with the jump menu hanging to its left */
@media (min-width: 1340px) {
  body:has(.layout:not(.single):not(.wide)) .band-in { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
  body:has(.layout:not(.single):not(.wide)) .band { --num: clamp(9rem, 19vw, 18rem); }
  body:has(.layout:not(.single):not(.wide)) .band .bignum { right: var(--gutter); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1.wide { max-width: min(30ch, calc(100% - var(--num) * 0.95 - 40px)); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .lede { max-width: min(66ch, calc(100% - var(--num) * 0.95 - 40px)); }
}

/* Pillar titles use the full banner width (owner remark): the big numeral may sit softly behind the end of a line */
@media (min-width: 961px) {
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1.wide { max-width: min(34ch, 100%); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .lede { max-width: min(66ch, 100%); }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .facts { max-width: none; }
  body:has(.layout:not(.single):not(.wide)) .band .bignum { opacity: 0.42; z-index: 0; }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .crumbs, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .lede, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .facts { position: relative; z-index: 1; }
}

/* Subtitle no longer tied to the width of the title (owner remark): the title is shorter now, so the subtitle gets its own comfortable width */
.band .titleblock { width: auto; max-width: 100%; }
.band .titleblock .lede { width: auto; min-width: 0; max-width: min(100%, 44rem); }

/* Preamble title and lead use the full column width (owner remark): no forced narrow, evenly balanced lines */
.preamble.prose h2, .preamble .strong-lede, .prose .strong-lede { text-wrap: pretty; max-width: none; }

/* Compact mode (960 px and narrower) keeps the text column at the same comfortable width instead of stretching to the window (owner remark); the collapsed menu bar and the banners follow it */
@media (max-width: 960px) {
  .layout .prose { max-width: var(--measure); }
  .layout > .rail, .layout .hubflow { max-width: 641px; }
}

/* Compact mode: the text block and the title area above it are centred (owner request); the Media & Articles card list keeps its full width */
@media (min-width: 681px) and (max-width: 960px) {
  .layout:not(.wide-list), body:not(:has(.wide-list)) .band-in { max-width: calc(641px + 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
  body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) h1.wide, body:has(.layout:not(.single):not(.wide)) .band:has(.bignum) .lede { max-width: 100%; }
}

/* Plus-sign accordions: equal space above and below (about 14 px each; was 19 above and 10 below) */
.ne .prose > .aab__accordion_container { margin: -0.3em 0 0.8em !important; }

/* Home cover: smaller title (about 20% less, stays on one line), less space above, title and quote start at the same height (owner remark) */
.cover h1 { font-size: min(10.2vw, clamp(2.4rem, 5vw, 4.5rem)); }
.cover-in { padding-top: clamp(28px, 3.6vw, 56px); }
@media (min-width: 861px) { .cover-grid { align-items: start; } }

/* Home cover: button rises under the title on wide screens, so the quote no longer sets the height of the burgundy area (owner remark) */
@media (min-width: 861px) {
  .cover-in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); align-items: start; }
  .cover-grid { display: contents; }
  .cover-grid > h1 { grid-column: 1; grid-row: 1; }
  .cover-grid > .statement { grid-column: 2; grid-row: 1 / span 2; }
  .cover-in > .cover-cta { grid-column: 1; grid-row: 2; }
}

/* Home cover: title sized from its own column so it always stays on one line, at any window width or zoom (owner remark) */
.cover-in { container-type: inline-size; }
@media (min-width: 861px) {
  .cover h1 { font-size: min(4.5rem, calc((100cqw - clamp(28px, 5vw, 80px)) * 0.6078 / 8.4)); }
}

/* Home cover: subtitle closer to the title (owner remark) */
.cover h1 .sub { margin-top: clamp(4px, 0.8vw, 12px); }

/* Accordion text same size as article text (17px; the accordions on the hub and Pillar pages were 18px) (owner remark) */
.accomplish .acc-body { font-size: 1.0625rem; }

/* Phones: calmer top bar (no site name next to the globe, menu sits to the right of the globe) and the cover title fills the screen width (owner remark) */
@media (max-width: 680px) {
  .mast-in { flex-wrap: nowrap; align-items: center; gap: 14px; row-gap: 0; padding-block: 10px; }
  .brand { flex: none; }
  .brand img { width: 60px; height: 60px; }
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mast nav { flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: 0 16px; }
  .mast nav a { font-size: 0.92rem; padding: 6px 0; }
  .cover h1 { font-size: min(5rem, calc(100cqw / 7.8)); }
}

/* Phones: menu spans the full width next to the globe, so both rows end flush at the right edge in every browser (owner remark: Chrome and Yandex looked left-aligned) */
@media (max-width: 680px) {
  .mast nav { justify-content: space-between; gap: 0 12px; }
}
@media (max-width: 340px) { .mast nav { gap: 0 10px; } .mast nav a { font-size: 0.82rem; } }

/* Phones: menu text scales with the space beside the globe, so both rows fill it evenly in every browser (the spread layout looked split in the middle on wider phones) (owner remark) */
@media (max-width: 680px) {
  .mast nav { justify-content: space-between; column-gap: 1.1em; font-size: clamp(0.82rem, calc((100vw - 2 * var(--gutter) - 74px) / 15.7), 1.15rem); }
  .mast nav a { font-size: 1em; }
}
/* Larger phones and small tablets (431 to 680px): plain left-packed menu, normal size (the scaling above is for normal phones) */
@media (min-width: 431px) and (max-width: 680px) { .mast nav { justify-content: flex-start; column-gap: 16px; font-size: 0.88rem; } }