/* 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: #ece6da;         /* live site cream, kept */
  --paper-2: #FBF7ED;
  --paper-hover: #f6f4ef;
  --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(--on-dark); }

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(--on-dark); }
.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(--on-dark); }

/* ---------- 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-hover); }
.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-hover); }
.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-hover); }
.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(--on-dark); }
.prose a.btn.solid:hover { color: var(--on-dark); }
.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-hover); }
.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-hover) !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-hover); 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(--on-dark); 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(--on-dark) !important; }
.ne .cookieadmin_btn:hover { background: var(--burg-deep) !important; color: var(--on-dark) !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(--on-dark);
    -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-hover); }

/* ---------- 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; } }

/* Sticky footer: on tall windows the footer sits at the bottom instead of leaving a light strip below it (owner remark) */
body.ne { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.ne > main { flex: 1 0 auto; }
body.ne > .foot { flex: none; }
.admin-bar body.ne { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media (max-width: 782px) { .admin-bar body.ne { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); } }
/* Home cover: the quote's source is a small, unlinked note under the quote, at its right edge (owner remark) */
.statement cite { font: 500 0.875rem/1.3 var(--f-ui); text-align: right; margin-top: 12px; }

/* Reading text 1 px smaller (17 to 16 px, also inside accordions); post accordion titles 2 px smaller (18.4 to 16.4 px) (owner remark) */
.prose { font-size: 1rem; }
.accomplish .acc-body { font-size: 1rem; }
.ne-read .aab__accordion_title { font-size: calc(1.15rem - 2px) !important; }

/* Optional-section box on posts (a native details block whose title is a whole paragraph): normal reading size, dark text, bold burgundy key words, accordion-style arrow on the right (owner chose variant A) */
.ne-read .prose details > summary { list-style: none; position: relative; cursor: pointer; font: 400 1rem/1.5 var(--f-read); color: var(--ink); padding: 14px 52px 14px 22px; letter-spacing: 0; }
.ne-read .prose details > summary::-webkit-details-marker { display: none; }
.ne-read .prose details > summary::marker { content: ''; }
.ne-read .prose details > summary strong { font-weight: 700; color: var(--burg); }
.ne-read .prose details > summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--burg); border-bottom: 2px solid var(--burg); transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease, ease); }
.ne-read .prose details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }

/* Spectral instead of Lora for all titles below the big home title (owner choice, 2026-10-12). Title letters tightened a little more than Lora's. */
:root { --f-head: "Spectral Head", "Spectral", "Georgia", serif; }
.band h1, .door h2, .hub-section > h2, .hub-block > h2, .complete-card h2, .banner h3, .pager .pn, .prose h2 { letter-spacing: -0.03em; }
.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, .preamble .strong-lede, .prose .strong-lede { letter-spacing: -0.02em; }

/* Site name and numerals in Spectral too (owner choice, 2026-10-12): DM Serif Display is no longer used. Site name letters closer together. */
:root { --f-display: "Spectral Head", "Spectral", "Georgia", serif; }
.brand-text strong, .foot strong { letter-spacing: -0.035em; }

/* Titles a step tighter (owner remark): large titles -0.045em, smaller titles and accordion titles -0.035em, site name -0.045em */
.band h1, .door h2, .hub-section > h2, .hub-block > h2, .complete-card h2, .banner h3, .pager .pn, .prose h2 { letter-spacing: -0.045em; }
.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, .preamble .strong-lede, .prose .strong-lede { letter-spacing: -0.035em; }
.brand-text strong, .foot strong { letter-spacing: -0.045em; }

/* 2026-10-14 (owner, same as nouaromania.eu): menu bar hides smoothly (0.6s ease-in-out) and returns gently (0.5s ease-out) */
.mast { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.mast-away .mast { transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1); }
/* logged-in admins under 600px: WordPress lets its admin bar scroll away there, so the menu bar sticks at 0 (no see-through gap) */
@media (max-width: 600px) { .admin-bar .mast { top: 0; } }

/* 2026-10-14 (owner, same as nouaromania.eu): on small screens the jump list sticks under the menu bar, full width, thin, centred title with a curved arrow,
   opens as a drop-down over the text and hides/returns with the bar; desktop unchanged */
.layout > .rail-mark { display: none; }
@media (max-width: 960px) {
  html, body { overflow-x: clip; }
  .layout:has(> .rail) { container-type: inline-size; padding-top: 0; }
  .layout > .rail { position: sticky; top: var(--stick, 0px); z-index: 30; background: var(--paper); width: 100vw; max-width: 100vw; justify-self: start;
    margin: 0 0 8px calc(50cqw - 50vw); box-sizing: border-box; border-radius: 0; box-shadow: 0 6px 14px -12px rgba(59, 26, 40, 0.5);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
  html.mast-away .layout > .rail.is-stuck { transform: translateY(calc(-100% - 12px)); pointer-events: none; transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1), top 0.6s cubic-bezier(0.45, 0, 0.55, 1); }
  .layout > .rail > summary { justify-content: center; gap: 6px; text-transform: none; letter-spacing: 0.005em; font-size: 0.875rem; line-height: 1.3;
    padding: 7px calc(50vw - 50cqw + 18px); border-radius: 0; border-bottom: 1px solid var(--paper-3); }
  .layout > .rail > summary::after { width: 16px; height: 16px; flex: none; border: 0; transform: translateY(2px); background: var(--burg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h8a6 6 0 0 1 6 6v7'/%3E%3Cpath d='M14 15.5l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h8a6 6 0 0 1 6 6v7'/%3E%3Cpath d='M14 15.5l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.3s; }
  .layout > .rail[open] > summary::after { transform: translateY(2px) scaleY(-1); }
  .layout > .rail[open] { z-index: 45; }
  .layout > .rail[open] .rail-body { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper-2); box-shadow: 0 14px 24px -14px rgba(59, 26, 40, 0.45);
    padding: 8px calc(50vw - 50cqw + 4px) 4px; max-height: calc(100dvh - var(--stick, 0px) - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .layout > .rail-mark { display: block; height: 0; margin: 0; }
}
/* 2026-10-14 (owner): justified text with English hyphenation (done by the browser) on the long-text pages; summaries stay left; on phones list items stay left */
body.ne-hub .prose :is(p, li):not([class*="has-text-align"]), body.ne-pillar .prose :is(p, li):not([class*="has-text-align"]),
body.ne-complete .prose :is(p, li):not([class*="has-text-align"]), body.ne-read .prose :is(p, li):not([class*="has-text-align"]) {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; }
body.ne .prose summary, body.ne .prose summary * { text-align: left; }
@media (max-width: 680px) { body.ne .prose li:not([class*="has-text-align"]) { text-align: left; } }
/* 2026-10-14 (owner): mobile jump list title arrow = the standard accordion V chevron (was the curved arrow) */
@media (max-width: 960px) {
  .layout > .rail > summary::after { width: 7px; height: 7px; background: none; -webkit-mask: none; mask: none; border-right: 2px solid var(--burg); border-bottom: 2px solid var(--burg); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s; }
  .layout > .rail[open] > summary::after { transform: translateY(2px) rotate(225deg); }
}

/* 111. Big numeral too strong at 861-960px (2026-10-14): same soft opacity and layering as wider screens */
@media (min-width: 681px) and (max-width: 960px) {
  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; }
}
@media (min-width: 681px) and (max-width: 860px) {
  body:has(.layout:not(.single):not(.wide)) .band .bignum { opacity: 0.28; }
}


/* card titles: fill the first line instead of balancing the lines (owner, 2026-10-14: 'for a Fair and' fits on line 1) */
@media (min-width: 681px) { .card h2 { text-wrap: pretty; } }
/* phones keep balanced lines, so a single word is not left alone on the last line */

/* card subtitles use the full card width, like the titles (was max-width 62ch) (owner, 2026-10-14) */
.card p { max-width: none; text-wrap: pretty; }


/* 121. Long titles on posts use the wide banner like Pillar titles (2026-10-15, owner; selectors made stronger than the generic single-column rule, which set the band to 720px): from 961px the title block starts at the text's left edge and may run wider; from 1340px it sits under the globe at the menu bar's width */
@media (min-width: 961px) {
  html body:has(.layout.single .prose):has(.band h1.long) .band-in { max-width: calc(1000px + 2 * var(--gutter)); margin-left: calc((100% - 720px - 2 * var(--gutter)) / 2); margin-right: 0; }
  html body:has(.layout.single .prose):has(.band h1.long) .band h1.long { max-width: min(34ch, 100%); }
  html body:has(.layout.single .prose):has(.band h1.long) .band .lede { max-width: min(66ch, 100%); }
}
@media (min-width: 1340px) {
  html body:has(.layout.single .prose):has(.band h1.long) .band-in { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
}


/* 123. Article videos 1.5x wider and closer to the banner (2026-10-15, owner): from 961px a video in a single-column article is 150% of the text column (never wider than the window minus the side gutters) and stays centred on it; an article that opens with a video starts it closer under the title banner */
@media (min-width: 961px) {
  .layout.single .prose > figure.wp-block-embed { width: min(150%, 100vw - 2 * var(--gutter)); margin-left: calc((100% - min(150%, 100vw - 2 * var(--gutter))) / 2); max-width: none; }
}
.layout.single:has(.prose > figure.wp-block-embed:first-child) { padding-top: clamp(18px, 2.2vw, 30px); }
.layout.single .prose > figure.wp-block-embed:first-child { margin-top: 0; }


/* Image viewer (owner, 2026-10-15; ported from nouaromania.eu): pictures open over the page, the page stays visible behind a semi-transparent burgundy veil */
.ne .prose img:not(a img):not(.emoji) { cursor: zoom-in; }
.ne-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 56px 64px 40px; background: rgba(38, 16, 26, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ne-lb.on { display: flex; animation: ne-lb-in 0.18s ease-out; }
@keyframes ne-lb-in { from { opacity: 0; } to { opacity: 1; } }
html.ne-lb-open { overflow: hidden; }
.ne-lb-f { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.ne-lb-f img { display: block; max-width: min(1400px, 100%); max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 6px; border: 6px solid rgba(246, 244, 239, 0.35); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); background: #f6f4ef; }
.ne-lb-f figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; align-items: baseline; max-width: 900px; color: #f3e9dc; font: 400 0.95rem/1.45 var(--f-read); text-align: center; }
.ne-lb-n { font: 500 0.8rem/1 var(--f-ui); color: rgba(243, 233, 220, 0.7); }
.ne-lb-o { font: 500 0.8rem/1 var(--f-ui); color: #e8c97a; text-decoration: underline; text-underline-offset: 3px; }
.ne-lb button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(246, 244, 239, 0.35); border-radius: 999px; background: rgba(246, 244, 239, 0.12); color: #f6f4ef; font: 400 30px/1 var(--f-ui); cursor: pointer; }
.ne-lb button:hover, .ne-lb button:focus-visible { background: rgba(246, 244, 239, 0.25); outline: none; }
.ne-lb-x { top: 12px; right: 14px; }
.ne-lb-p { left: 12px; top: 50%; transform: translateY(-50%); }
.ne-lb-nx { right: 12px; top: 50%; transform: translateY(-50%); }
.ne-lb button[hidden] { display: none; }
@media (max-width: 680px) {
  .ne-lb { padding: 56px 10px 24px; }
  .ne-lb-f img { max-height: calc(100vh - 170px); border-width: 4px; }
  .ne-lb-p, .ne-lb-nx { top: auto; bottom: 14px; transform: none; }
}

/* A picture at the end of an accordion (Migration article): no extra space under it (owner, 2026-10-15) */
.prose .aab__accordion_component > figure.wp-block-image:last-child { margin-bottom: 0; }


/* 124. Home cover without the quote (2026-10-15, owner chose version 4): the subtitle runs on one line and a size larger; the start tile is exactly as wide as the subtitle. Below 860px the subtitle wraps as before. */
.cover-in { grid-template-columns: fit-content(100%); justify-content: start; }
.cover h1 .sub { max-width: none; font-size: clamp(1.1rem, 1.55vw, 1.25rem); }
.cover .cover-cta { width: auto; min-width: min(23.5rem, 100%); max-width: none; }
@media (min-width: 861px) { .cover h1 .sub { white-space: nowrap; } }


/* 125. Home start tile (2026-10-15, owner): from 861px it is as wide as one of the two tiles below it (half the column space minus half the gap) and thinner (less space above and below the text). The subtitle above keeps its one long line. */
@media (min-width: 861px) {
  .cover-in { grid-template-columns: minmax(0, 1fr); }
  .cover .cover-cta { width: calc((100% - clamp(14px, 2vw, 28px)) / 2); min-width: 0; max-width: none; }
}
.start-tile { padding-block: 13px; }


/* 126. No scrollbar on short pages when the window is zoomed out (2026-10-15, owner): the sticky-footer rule made the page exactly one window tall, and at browser zoom levels the rounding of pixels makes it a hair taller, which switches the scrollbar on. The page is now 3px shorter than the window and the strip below the footer is the footer's own colour, so nothing shows. */
html { background-color: var(--burg-deep); }
body.ne { min-height: calc(100vh - 3px); min-height: calc(100dvh - 3px); }
.admin-bar body.ne { min-height: calc(100vh - 35px); min-height: calc(100dvh - 35px); }
@media (max-width: 782px) { .admin-bar body.ne { min-height: calc(100vh - 49px); min-height: calc(100dvh - 49px); } }


/* 127. Logged-in administrators (2026-10-15, owner): WordPress puts the class admin-bar on the BODY itself, so the older selectors written as `.admin-bar body.ne` never matched. WordPress pushes the page down by the admin bar (32px, 46px on small screens), so a window-tall body made the page 32px too tall and the scrollbar never went away. */
body.ne.admin-bar { min-height: calc(100vh - 35px); min-height: calc(100dvh - 35px); }
@media (max-width: 782px) { body.ne.admin-bar { min-height: calc(100vh - 49px); min-height: calc(100dvh - 49px); } }


/* 128. Language accordion under a video (2026-10-15, owner): a native Details block with class ne-lang. Arrow on the left, gear icon on the right, same colours as the other accordions; the language lists are normal list blocks shown as small chips. From 961px it is as wide as the video above it. */
.prose details.ne-lang { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 2px; margin: 0 0 1.8em; color: var(--burg-deep); }
.prose details.ne-lang > summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; font: 500 1rem/1.45 var(--f-ui); color: var(--burg-deep); }
.prose details.ne-lang > summary::-webkit-details-marker { display: none; }
.prose details.ne-lang > summary::before { content: ''; flex: none; width: 9px; height: 9px; margin: 0 4px 3px 2px; border-right: 2px solid var(--burg); border-bottom: 2px solid var(--burg); transform: rotate(45deg); transition: transform 0.25s; }
.prose details.ne-lang[open] > summary::before { transform: rotate(225deg); margin-bottom: 0; margin-top: 3px; }
.prose details.ne-lang > summary::after { content: ''; flex: none; margin-left: auto; width: 24px; height: 24px; background: var(--burg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose details.ne-lang > summary strong { font-weight: 700; }
.prose details.ne-lang > :not(summary) { margin-left: 16px; margin-right: 16px; }
.prose details.ne-lang[open] > summary { border-bottom: 1px solid var(--paper-3); margin-bottom: 14px; }
.prose details.ne-lang > :last-child { margin-bottom: 18px; }
.prose details.ne-lang .ne-lang-h { margin-top: 18px; margin-bottom: 8px; font: 500 1rem/1.4 var(--f-ui); }
.prose details.ne-lang .ne-lang-note { margin-top: 10px; margin-bottom: 4px; font: 400 0.9rem/1.5 var(--f-ui); color: var(--ink-2); }
.prose details.ne-lang .ne-lang-how { margin-top: 16px; font: 400 0.95rem/1.5 var(--f-ui); }
.prose ul.ne-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin-top: 0; margin-bottom: 0; }
.prose ul.ne-chips li { margin: 0; padding: 3px 11px; border: 1px solid var(--paper-3); border-radius: 999px; background: var(--paper); font: 500 0.85rem/1.4 var(--f-ui); color: var(--burg-deep); }
.prose figure.wp-block-embed:has(+ details.ne-lang) { margin-bottom: 14px; }
@media (min-width: 961px) {
  .layout.single .prose > details.ne-lang { width: min(150%, 100vw - 2 * var(--gutter)); margin-left: calc((100% - min(150%, 100vw - 2 * var(--gutter))) / 2); max-width: none; }
}


/* 129. Language chips in the accordion are buttons (2026-10-15, owner): pressing one shows the how-to-switch text in that language */
.prose details.ne-lang ul.ne-chips li[data-lang] { cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.prose details.ne-lang ul.ne-chips li[data-lang]:hover { border-color: var(--burg); }
.prose details.ne-lang ul.ne-chips li[data-lang]:focus-visible { outline: 2px solid var(--burg); outline-offset: 2px; }
.prose details.ne-lang ul.ne-chips li.on { background: var(--burg); border-color: var(--burg); color: var(--on-dark); }


/* 130. Language accordion: small gap between the how-to line and the machine-made note, and air under the note (2026-10-15, owner) */
.prose details.ne-lang .ne-lang-how { margin-bottom: 0; }
.prose details.ne-lang .ne-lang-how + .ne-lang-note { margin-top: 8px; }
.prose details.ne-lang > .ne-lang-note:last-child { margin-bottom: 18px; }


/* 131. Menu icons in the language accordion's how-to text (2026-10-15, owner): gear, CC and speaking-person icons with YouTube's own menu words, drawn like small menu items */
.prose details.ne-lang .ne-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.22em; }
.prose details.ne-lang .ne-ic-gear { margin: 0 0.1em; color: var(--burg); }
.prose details.ne-lang .ne-mi { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; margin: 1px; border: 1px solid var(--paper-3); border-radius: 6px; background: var(--paper); color: var(--burg-deep); font-weight: 600; white-space: nowrap; }
.prose details.ne-lang .ne-mi .ne-ic { vertical-align: 0; color: var(--burg); }


/* 132. Language box header on two or more lines (2026-10-16, owner): the text ran over the gear icon because summary was a flex row. The summary is now an ordinary block; the arrow and the gear are placed absolutely in reserved side padding, so long headers wrap without touching them. */
.prose details.ne-lang > summary { display: block; position: relative; padding: 14px 58px 14px 46px; }
.prose details.ne-lang > summary::before { position: absolute; left: 18px; top: 50%; margin: -7px 0 0 0; }
.prose details.ne-lang[open] > summary::before { margin: -3px 0 0 0; }
.prose details.ne-lang > summary::after { position: absolute; right: 16px; top: 50%; margin: -12px 0 0 0; }

/* 133. Language box header on phones: at most 3 lines (2026-10-16), the rest is cut with an ellipsis; the full list of words is on wider screens */
@media (max-width: 680px) { .prose details.ne-lang > summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } }

/* 134. Phones: the cut-off 4th line showed in the padding under the 3-line header (2026-10-16). The vertical spacing is now a transparent border (outside the clipped area), so nothing of a 4th line can show. */
@media (max-width: 680px) {
  .prose details.ne-lang > summary { padding-top: 0; padding-bottom: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
  .prose details.ne-lang[open] > summary { border-bottom: 14px solid transparent; box-shadow: 0 1px 0 var(--paper-3); margin-bottom: 15px; }
}

/* 135. Language box header: at most 2 lines on wide screens, 3 lines up to 960px wide (2026-10-16, owner). Cut with an ellipsis; the vertical spacing is a transparent border so no sliver of a hidden line can show. */
.prose details.ne-lang > summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: 0; padding-bottom: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.prose details.ne-lang[open] > summary { border-bottom: 14px solid transparent; box-shadow: 0 1px 0 var(--paper-3); margin-bottom: 15px; }
@media (max-width: 960px) { .prose details.ne-lang > summary { -webkit-line-clamp: 3; } }

/* 136. Donation banner = synced pattern "Donation banner" (wp_block 516): the NouaRomania banner rebuilt in English as live text (2026-10-23, owner chose design C). White box, green border, blue text, seedling picture on the right. The title link stretches over the whole box, so any tap opens /donations/. Phones (under 768px): bigger text, shorter line (ne-don-narrow instead of ne-don-wide). */
.prose .ne-donate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto auto; align-items: center; column-gap: 8px; background: #fff; border: 2px solid #8aaa00; border-radius: 0; margin: 2em 0; padding: 14px 8px 14px 22px; transition: box-shadow .2s ease; }
.prose .ne-donate > .wp-block-group__inner-container { display: contents; }
.prose .ne-donate p { grid-column: 1; margin: 0; color: #314aa3; text-align: center !important; hyphens: manual !important; -webkit-hyphens: manual !important; }
.prose .ne-donate p.ne-don-title { align-self: end; font-family: "Cabin", system-ui, sans-serif; font-weight: 700; font-size: 1.45rem; line-height: 1.2; }
.prose .ne-donate p.ne-don-title a { color: inherit; text-decoration: none; }
.prose .ne-donate p.ne-don-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prose .ne-donate p.ne-don-wide, .prose .ne-donate p.ne-don-narrow { align-self: start; margin-top: 10px; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.prose .ne-donate p.ne-don-narrow { display: none; }
.prose .ne-donate figure.ne-don-pic { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.prose .ne-donate figure.ne-don-pic img { display: block; width: 100%; height: auto; border-radius: 0; }
.prose .ne-donate:hover { box-shadow: 0 3px 14px rgba(49, 74, 163, .14); }
.prose .ne-donate:focus-within { outline: 2px solid #314aa3; outline-offset: 3px; }
.prose .ne-donate p.ne-don-title a:focus-visible { outline: none; }
@media (max-width: 767px) {
  .prose .ne-donate { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 4px; padding: 12px 6px 12px 12px; }
  .prose .ne-donate p.ne-don-title { font-size: 1.32rem; }
  .prose .ne-donate p.ne-don-wide { display: none; }
  .prose .ne-donate p.ne-don-narrow { display: block; margin-top: 6px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .prose .ne-donate { transition: none; } }
/* 137. Curated feed on Media & Articles (2026-10-23, owner approved: draft Outputs\external-materials\nove-europa-feed-v1.html).
   Only used while ne_cur_feed_active(); classes start with ncf- so nothing else on the site is touched. */
.ncf-wrap { max-width: 1100px; margin: 0 auto; padding: 30px var(--gutter) 60px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.ncf-fbox { position: sticky; top: calc(var(--mast-h, 84px) + 14px); background: var(--paper-2); border: 1px solid var(--burg); border-radius: 2px; box-shadow: 0 8px 18px -10px rgba(29, 20, 24, 0.35); }
.ncf-fhead { display: grid; grid-template-columns: 48px minmax(0, 1fr); border-bottom: 1px solid var(--paper-3); }
.ncf-handle { background: var(--burg); color: var(--gold-soft); display: grid; place-items: center; }
.ncf-handle svg { width: 20px; height: 20px; }
.ncf-mt { padding: 12px 14px; color: var(--burg); font: 600 15px/1.3 var(--f-ui); }
.ncf-mbar { display: none; }
.ncf-filters { padding: 14px 10px 12px; font: 15px/1.4 var(--f-ui); max-height: calc(100vh - var(--mast-h, 84px) - 110px); overflow-y: auto; }
.ncf-group { margin-bottom: 20px; }
.ncf-group h2 { font: 500 13px/1.3 var(--f-ui); color: var(--ink-2); margin: 0 0 8px; letter-spacing: 0.02em; }
.ncf-group label { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 2px; cursor: pointer; color: var(--ink); }
.ncf-group label:has(input:checked) { background: var(--paper); color: var(--burg); }
.ncf-group input { accent-color: var(--burg); margin-top: 4px; }
.ncf-n { margin-left: auto; color: var(--ink-2); font-size: 13px; }
.ncf-mode { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.ncf-seg { display: inline-flex; border: 1px solid var(--paper-3); border-radius: 2px; overflow: hidden; }
.ncf-seg button { background: transparent; border: 0; color: var(--ink-2); padding: 3px 10px; cursor: pointer; font: inherit; }
.ncf-seg button[aria-pressed="true"] { background: var(--burg); color: var(--on-dark); }
.ncf-clear, .ncf-clear2 { background: none; border: 0; color: var(--burg); text-decoration: underline; cursor: pointer; padding: 0 8px; font: inherit; }
.ncf-done { display: none; }
.ncf-tip { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 2px; padding: 10px 40px 10px 14px; position: relative; font: 15px/1.5 var(--f-ui); color: var(--ink); margin: 0 0 14px; }
.ncf-tipx { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.ncf-count { color: var(--ink-2); font: 14px/1.4 var(--f-ui); margin: 0 0 14px; }
.ncf-feed { list-style: none; margin: 0; padding: 0; }
.ncf-card { background: var(--paper-2); padding: 26px 30px; margin: 0 0 18px; border-radius: 2px; font-family: var(--f-read); }
.ncf-card[hidden] { display: none; }
.ncf-card h3 { font: 400 21px/1.3 var(--f-display); color: var(--burg); margin: 0 0 3px; text-wrap: pretty; }
.ncf-card h3 a { color: inherit; text-decoration: none; }
.ncf-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ncf-sub { margin: 0 0 10px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.ncf-go { display: inline-flex; gap: 8px; align-items: center; color: var(--burg); font-weight: 500; text-decoration: none; }
.ncf-go svg { width: 18px; height: 18px; }
.ncf-src { display: flex; justify-content: space-between; gap: 10px; font: 14px/1.4 var(--f-ui); color: var(--ink-2); margin: 0 0 8px; }
.ncf-src b { font-weight: 500; color: var(--burg); }
.ncf-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #2b1f24; overflow: hidden; border-radius: 2px; margin: 0 0 14px; border: 0; padding: 0; cursor: pointer; }
.ncf-media.ncf-tall, .ncf-media.ncf-tiktok, .ncf-media.ncf-instagram { aspect-ratio: 9 / 16; max-width: 340px; }
.ncf-media.ncf-instagram { aspect-ratio: auto; min-height: 420px; background: transparent; }
.ncf-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.94; }
.ncf-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Reddit's own player after the click (owner, 2026-10-28): its frame has a header above the video; the height follows the frame's own message (ne-feed.js) */
.ncf-media.ncf-reddit { aspect-ratio: auto; height: 680px; max-width: 420px; background: transparent; cursor: auto; }
.ncf-pic { cursor: default; }
.ncf-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--on-dark-2); font: 400 48px/1 var(--f-display); }
.ncf-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(59, 26, 40, 0.88); border: 1.5px solid var(--gold); display: grid; place-items: center; }
.ncf-play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--on-dark); }
.ncf-media:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ncf-langwrap { max-width: none; font-size: 15px; margin: -4px 0 14px; }
.ncf-langwrap details.ne-lang { margin: 0; background: var(--paper); }
.ncf-langwrap + .ncf-src { margin-top: -11px; }
.ncf-acc { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; font: 500 15px/1.4 var(--f-ui); color: var(--burg); margin-top: 4px; }
.ncf-acc svg { width: 16px; height: 16px; transition: transform 0.2s; }
.ncf-acc[aria-expanded="true"] svg { transform: rotate(90deg); }
.ncf-acc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ncf-panel { margin-top: 8px; padding: 12px 14px; background: var(--paper); border-left: 2px solid var(--gold); }
.ncf-panel p { margin: 0 0 6px; }
.ncf-panel small { color: var(--ink-2); font-size: 13px; }
.ncf-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ncf-btn { font: 500 14px/1.3 var(--f-ui); text-decoration: none; color: var(--burg); border: 1px solid var(--burg); border-radius: 2px; padding: 6px 12px; }
.ncf-btn.ncf-solid { background: var(--burg); color: var(--on-dark); }
.ncf-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 12px; font: 14px/1.4 var(--f-ui); color: var(--ink-2); }
.ncf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ncf-pill { display: inline-block; font-size: 13px; line-height: 1.3; padding: 2px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--paper-3); color: var(--ink-2); }
.ncf-pill.ncf-cat { color: var(--burg); border-color: #cdb9a9; }
.ncf-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.ncf-flag svg { width: 12px; height: 12px; opacity: 0.8; }
.ncf-flag:hover, .ncf-flag:focus-visible { color: var(--burg); text-decoration: underline; text-underline-offset: 2px; }
.ncf-more[hidden], .ncf-tip[hidden] { display: none; }
.ncf-more { display: block; margin: 8px auto 0; background: var(--paper-2); border: 1px solid var(--burg); color: var(--burg); border-radius: 2px; padding: 8px 18px; font: 500 15px var(--f-ui); cursor: pointer; }
@media all {
  .ncf-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .ncf-fbox { top: var(--stick, 0px); z-index: 30; background: var(--paper); border: 0; border-bottom: 1px solid var(--paper-3); border-radius: 0; box-shadow: none; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 10px var(--gutter); transition: top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .ncf-fhead { display: none; }
  .ncf-mbar { display: block; }
  .ncf-toggle { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; text-align: left; background: var(--paper-2); border: 1px solid var(--burg); border-radius: 2px; padding: 0; overflow: hidden; color: var(--burg); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(29, 20, 24, 0.35); font: inherit; }
  .ncf-toggle .ncf-handle { grid-row: 1 / 3; align-self: stretch; }
  .ncf-toggle .ncf-mt { padding: 10px 0 0; }
  .ncf-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 11px; }
  .ncf-chip { font: 13px/1 var(--f-ui); padding: 4px 8px; border-radius: 2px; background: #f6eeda; color: var(--burg); border: 1px solid var(--gold); white-space: nowrap; }
  .ncf-chev { grid-column: 3; grid-row: 1 / 3; width: 20px; height: 20px; margin-right: 14px; transition: transform 0.2s; }
  .ncf-toggle[aria-expanded="true"] .ncf-chev { transform: rotate(180deg); }
  .ncf-filters { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 11px); max-height: calc(100vh - 100px); padding: 14px 14px 0; background: var(--paper-2); border: 1px solid var(--burg); border-top: 0; box-shadow: 0 14px 24px -8px rgba(29, 20, 24, 0.3); }
  .ncf-filters.ncf-open { display: block; }
  .ncf-done { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 12px; box-shadow: 0 -10px 0 var(--paper-2); background: var(--burg); color: var(--on-dark); border: 0; border-radius: 2px; padding: 10px; font: 500 15px var(--f-ui); cursor: pointer; }
  .ncf-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ncf-acc svg, .ncf-chev, .ncf-fbox { transition: none; } }

/* 138. Articles (owner request 2026-10-23): light reading column; on wide screens the title block is a box 60% wider than the text, centred over it (like NouaRomania). */
body.single-post article.prose { background: #FBF7ED; border-radius: 4px; margin-left: -14px; margin-right: -14px; padding: 20px 14px 28px; }
body.single-post article.prose .wp-block-aab-accordion-block { border: 2px solid #DDD4C2 !important; }
body.single-post article.prose .aab__accordion_body { border-top-width: 2px !important; border-top-color: #DDD4C2 !important; }
body.single-post article.prose .aab__accordion_body .wp-block-aab-accordion-block, body.single-post article.prose .aab__accordion_body .wp-block-aab-accordion-block > .aab__accordion_head { background: #FBF7ED !important; }
@media (min-width: 961px) { body.single-post article.prose { box-sizing: content-box; margin-left: -40px; margin-right: -40px; padding: 28px 40px 40px; } }
@media (min-width: 1340px) {
  body.single-post:has(.layout:not(.single):not(.wide)) .band-in { box-sizing: border-box; width: 965px; max-width: 965px; margin-left: calc(50% - 541px); margin-right: 0; padding-left: 0; padding-right: 0; }
  body.single-post:has(.layout:not(.single):not(.wide)) .band h1 { max-width: none; }
}

/* 139. Pages get the same light reading card as articles (owner, cloud session). Plain pages, pillars and the complete Charter: their reading column; the Charter hub: one card around all its blocks (preamble, sections, pillar entries), padding inside so it does not reach the side list. Home and the Articles list unchanged. */
body.page:not(.ne-home):not(.ne-hub) article.prose { background: #FBF7ED; border-radius: 4px; margin-left: -14px; margin-right: -14px; padding: 20px 14px 28px; }
@media (min-width: 961px) { body.page:not(.ne-home):not(.ne-hub) article.prose { box-sizing: content-box; margin-left: -40px; margin-right: -40px; padding: 28px 40px 40px; } body.page.ne-pillar:not(.ne-home):not(.ne-hub) article.prose, body.page.ne-complete:not(.ne-home):not(.ne-hub) article.prose { margin-left: -24px; padding-left: 24px; } }
body.ne-hub .hubflow { background: #FBF7ED; border-radius: 4px; box-sizing: border-box; margin-left: -14px; margin-right: -14px; padding: 20px 14px 28px; }
@media (min-width: 961px) { body.ne-hub .hubflow { margin-left: 0; margin-right: 0; padding: 28px 40px 40px; } }

/* 140. Inner accordions: light everywhere (owner). The old rule .ne .aab__accordion_body .aab__accordion_body { var(--paper) } turned dark beige when --paper became #ECE6DA (section 154a); inner accordion boxes, heads and bodies are #FBF7ED on every page and post. */
.ne .aab__accordion_body .aab__accordion_container, .ne .aab__accordion_body .aab__accordion_head, .ne .aab__accordion_body .aab__accordion_body { background: #FBF7ED !important; }

/* 141. Article cards (/articles/ and anywhere .ncf-card is used): the 'Read ->' link sits at the lower right, on the same row as the tags, and is smaller (15px instead of 18px) (owner). */
.ncf-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
.ncf-card > * { grid-column: 1 / -1; }
.ncf-card > .ncf-go { grid-column: 2; grid-row: 99; justify-self: end; align-self: end; margin: 12px 0 0 !important; font-size: 15px !important; }
.ncf-card > .ncf-go svg { width: 15px; height: 15px; }
.ncf-card > .ncf-meta { grid-column: 1; grid-row: 99; margin-top: 12px !important; }

/* 142. Spacing as on nouaromania.eu (owner): donation banner 24px above/below (was 32); nothing extra after the last block of the reading card (only its padding, 40 / 28px), empty paragraphs next to the banner or at the end hidden; 40px (phones 28px) under the card and under the chapter pager (were ~94 / 48px). */
.ne .prose > .ne-donate { margin-top: 24px !important; margin-bottom: 24px !important; }
.ne article.prose > p:empty:has(+ .ne-donate), .ne article.prose > .ne-donate + p:empty, .ne article.prose > p:empty:last-child { display: none !important; }
.ne article.prose > :nth-last-child(1 of :not(p:empty)), .ne article.prose > :is(ul, ol):last-child > li:last-child, body.ne-hub .hubflow > :last-child, body.ne-hub .hubflow > :last-child > :last-child { margin-bottom: 0 !important; }
body.single-post.ne .layout, body.page.ne:not(.ne-home) .layout, .ne .pager { padding-bottom: 40px !important; }
@media (max-width: 960px) { body.single-post.ne .layout, body.page.ne:not(.ne-home) .layout, .ne .pager { padding-bottom: 28px !important; } }

/* 143. Warmer light colour (owner): every #FFFDF8 (cards, accordions, --paper-2, editor) replaced by #FBF7ED, in place. */

/* 144. /articles/: two columns from tablet width (768px) up; cards keep their natural height and flow down the left column, then the right (owner chose 'free-flowing columns', 2026-10-25). Phones stay one column. */
@media (min-width: 768px) {
  .ncf-feed { column-count: 2; column-gap: 18px; }
  .ncf-card { break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; padding: 20px 22px; }
  .ncf-card h3 { font-size: 19px; }
  .ncf-media.ncf-tall, .ncf-media.ncf-tiktok { max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* 145. /articles/ (owner, 2026-10-25): the filter bar sits on top at every width, as on the phone (the phone rules of section 137 now apply everywhere: its media query is 'all'); on wide screens the open panel lays Show / Kind / Topics side by side. The two columns are centred and about 660px each (page width 1338px + gutters). Language bar text in the cards 14px (was 16px). Card titles get the same tight letter spacing as the other titles of the site (-0.035em, like h3 in articles); 21px from 1100px wide. */
.ncf-wrap { max-width: calc(1338px + 2 * var(--gutter)); }
.ncf-card h3 { letter-spacing: -0.035em; }
.ncf-langwrap details.ne-lang summary { font-size: 14px; }
@media (min-width: 1100px) { .ncf-card h3 { font-size: 21px; } }
@media (min-width: 861px) {
  .ncf-filters.ncf-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .ncf-filters .ncf-clear, .ncf-filters .ncf-done { grid-column: 1 / -1; }
  .ncf-filters .ncf-clear { justify-self: start; margin-top: 6px; }
}

/* 146. /articles/ filter bar (owner, 2026-10-25): thinner on screens from 600px up - the chosen-filter label ('All') sits to the right of the text, one row; the text is 17px (was 15px). Phones keep the two-row bar. */
@media (min-width: 600px) {
  .ncf-toggle { grid-template-columns: 52px auto minmax(0, 1fr) auto; }
  .ncf-toggle .ncf-handle { grid-row: 1; }
  .ncf-toggle .ncf-mt { grid-column: 2; grid-row: 1; padding: 12px 0; font-size: 17px; white-space: nowrap; }
  .ncf-chips { grid-column: 3; grid-row: 1; padding: 0 0 0 16px; }
  .ncf-chev { grid-column: 4; grid-row: 1; }
}

/* 147. /articles/ cards tighter (owner, 2026-10-25): less loose space around the text and above the bottom row. Top/bottom padding 16px (was 20px), no gap under the text paragraph, line height 1.4, bottom row (tags / read more / external link) 8px under the text (was 22px). */
.ncf-card { padding-top: 16px; padding-bottom: 16px; }
.ncf-card .ncf-sub { margin-bottom: 0; line-height: 1.4; }
.ncf-card > .ncf-meta, .ncf-card > .ncf-go { margin-top: 8px !important; }

/* 148. Articles (posts): more air between the text and the edge of the reading card, left and right: 72px (was 40px, 180% of it) from 961px wide (owner, 2026-10-25). The text width stays the same; the card grows 32px on each side. Pages (Charter, About...) unchanged. */
@media (min-width: 961px) { body.single-post article.prose { margin-left: -72px; margin-right: -72px; padding-left: 72px; padding-right: 72px; } }

/* 149. Articles (posts), 768-960px wide (owner, 2026-10-25: at about 900px the text sat 14px from the card edge while wider windows had 72px): the side space of the reading card grows smoothly from 34px at 768px to 72px at 844px and up, text width unchanged (content-box like from 961px). Under 768px unchanged (14px). */
@media (min-width: 768px) and (max-width: 960px) { body.single-post article.prose { --ne-pad: clamp(14px, calc((100vw - 700px) / 2), 72px); box-sizing: content-box; margin-left: calc(-1 * var(--ne-pad)); margin-right: calc(-1 * var(--ne-pad)); padding-left: var(--ne-pad); padding-right: var(--ne-pad); } }

/* 150. Articles (posts): the reading column is centred on the page and the card has more side space in windows 480-767px wide (owner, 2026-10-25). The text column (54ch) sat at the left of its 68ch track, so on wide screens the card was about 58px left of the page centre while the title above was centred; the layout track is now centred and the article centred inside it. 480-767px: card as wide as the track (+14px each side), side padding grows from 14px at 480px to 34px at 768px (joins section 149). Phones under 480px unchanged. Pages unchanged. */
@media (min-width: 480px) { body.single-post .layout.single:not(.wide-list) { justify-content: center; } }
@media (min-width: 768px) { body.single-post .layout.single:not(.wide-list) > article.prose { width: 100%; justify-self: center; } }
@media (min-width: 480px) and (max-width: 767px) { body.single-post .layout.single:not(.wide-list) > article.prose { width: calc(100% + 28px); max-width: none; justify-self: center; padding-left: clamp(14px, calc(14px + (100vw - 480px) * 0.0694), 34px); padding-right: clamp(14px, calc(14px + (100vw - 480px) * 0.0694), 34px); } }

/* 151. Reading text 1px larger on the whole site (owner, 2026-10-25, from a picture of an article): body text, lists, the italic note under the summary title, and the h4 sub-headings (was 16px / 17.6px, now 17px / 18.6px); the same for the Charter accordion bodies and h5 headings. Undoes the earlier 'reading text 1px smaller' for the same elements. Menus, buttons, cards and other small text unchanged. */
.prose { font-size: calc(1rem + 1px); }
.accomplish .acc-body { font-size: calc(1rem + 1px); }
.prose h4 { font-size: calc(1.1rem + 1px); }
.prose h5 { font-size: calc(1rem + 1px); }
.prose .sublede { font-size: calc(1.1rem + 1px); }

/* 152. Articles WITH the jump list ('On this page', e.g. the Migration post) (owner, 2026-10-25: the column stayed at the left and the jump-list text overlapped the card). Cause: section 148 gave every post a 72px card side space, which pulled the card 72px to the left, over the jump list that hangs 28px left of the text column; and the text column sat at the left of its track. Now: from 1340px the card is centred on the page, the jump list hangs 24px + the card padding left of the card (padding grows 14px -> 72px between 1352px and 1468px, as far as the window has room for the list); 961-1339px card side space 28px (the list is a grid column there); 768-960px and 480-767px the card is centred like on posts without a list. Posts only. */
@media (min-width: 961px) and (max-width: 1339px) { body.single-post .layout:has(> .rail):not(.single) > article.prose { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; } }
@media (min-width: 1340px) {
  body.single-post .layout:has(> .rail):not(.single):not(.wide) { --ne-p: clamp(14px, calc(50vw - 662px), 72px); justify-content: center; }
  body.single-post .layout:has(> .rail):not(.single):not(.wide) > .rail { margin-right: calc(24px + var(--ne-p)); }
  body.single-post .layout:has(> .rail):not(.single):not(.wide) > article.prose { margin-left: calc(-1 * var(--ne-p)); margin-right: calc(-1 * var(--ne-p)); padding-left: var(--ne-p); padding-right: var(--ne-p); width: 100%; justify-self: center; }
}
@media (min-width: 768px) and (max-width: 960px) { body.single-post .layout:has(> .rail):not(.single) > article.prose { width: 100%; justify-self: center; } }
@media (min-width: 480px) and (max-width: 767px) { body.single-post .layout:has(> .rail):not(.single) > article.prose { width: calc(100% + 28px); max-width: none; justify-self: center; padding-left: clamp(14px, calc(14px + (100vw - 480px) * 0.0694), 34px); padding-right: clamp(14px, calc(14px + (100vw - 480px) * 0.0694), 34px); } }

/* 153. Articles: title block centred over the reading card from 768px wide (owner, 2026-10-25). The script at the end of site.js measures the longest line of the title / text / reading time and sets --ne-tshift; the path above moves with them so the four parts keep one left edge. Without the script nothing moves. */
@media (min-width: 768px) { body.single-post .band-in > .crumbs, body.single-post .band-in > h1, body.single-post .band-in > .lede, body.single-post .band-in > .facts { transform: translateX(var(--ne-tshift, 0px)); } }

/* 154. Articles without a long title (e.g. the Draghi video article) get the same wide title box as articles with a long title (owner, 2026-10-25: short titles wrapped in a narrow 668px box, 3 tight lines, while the Tulsi article looked right). Same three rules as the '.long' ones, for every post with a single reading column; from 961px wide. Posts with the jump list and pages are not reached. */
@media (min-width: 961px) { html body.single-post:has(.layout.single .prose) .band-in { max-width: calc(1000px + 2 * var(--gutter)); margin-left: calc((100% - 720px - 2 * var(--gutter)) / 2); margin-right: 0; } html body.single-post:has(.layout.single .prose) .band h1 { max-width: min(34ch, 100%); } html body.single-post:has(.layout.single .prose) .band .lede { max-width: min(66ch, 100%); } }
@media (min-width: 1340px) { html body.single-post:has(.layout.single .prose) .band-in { max-width: var(--wrap); margin-left: auto; margin-right: auto; } }


/* 155. Curated video cards: the opened "Full caption" fold continues the card text, so same size and spacing as that text (2026-10-25, log 193) */
.ncf-card .ncf-cap p { font-size: 16px; line-height: 1.4; margin: 0 0 8px; }
.ncf-card .ncf-cap p:last-child { margin-bottom: 0; }


/* 156. Curated video cards: the caption shows about 4 lines fading into the card; "Show full caption" slides the same text open (owner chose variant B, 2026-10-25, log 194). Replaces the "Full caption" fold of 155. */
.ncf-card .ncf-cap { position: relative; }
.ncf-card .ncf-cap .ncf-sub { margin: 0 0 8px; }
.ncf-card .ncf-cap .ncf-sub:last-child { margin-bottom: 0; }
.ncf-card .ncf-clamp .ncf-capbody { max-height: 90px; overflow: hidden; transition: max-height 0.35s ease; }
.ncf-card .ncf-fits .ncf-capbody { max-height: none; }
.ncf-card .ncf-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none; background: linear-gradient(to bottom, rgba(251, 247, 237, 0), var(--paper-2) 85%); transition: opacity 0.25s; }
.ncf-card .ncf-capopen .ncf-fade, .ncf-card .ncf-fits .ncf-fade { opacity: 0; }
.ncf-capbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; justify-self: start; font: 500 15px/1.4 var(--f-ui); color: var(--burg); }
.ncf-capbtn:hover span { text-decoration: underline; }
.ncf-capbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ncf-capbtn .ncf-chev { width: 16px; height: 16px; margin: 0; grid-column: auto; grid-row: auto; transition: transform 0.2s; }
.ncf-capbtn[aria-expanded="true"] .ncf-chev { transform: rotate(180deg); }
.ncf-capbtn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ncf-card .ncf-capbody, .ncf-capbtn .ncf-chev, .ncf-card .ncf-fade { transition: none; } }


/* 157. /articles/ "Follow this feed": wine card at the top of the feed and a bar that slides up from the bottom (owner chose bar + card, wording approved, 2026-10-25, log 195). */
.ncf-card.ncf-follow { background: var(--burg); color: #fff; }
.ncf-card.ncf-follow h3 { color: #fff; margin: 0 0 4px; }
.ncf-follow .ncf-fsub { margin: 0 0 14px; font: 15px/1.45 var(--f-ui); color: #E9D29A; }
.ncf-fways { display: grid; gap: 8px; }
.ncf-fway { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(233, 210, 154, 0.35); color: #fff; text-decoration: none !important; }
.ncf-fway:hover { background: rgba(233, 210, 154, 0.14); }
.ncf-fway:focus-visible, .ncf-fbtn:focus-visible, .ncf-fbar-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ncf-fway .ncf-fi { width: 22px; height: 22px; flex: none; margin-top: 1px; color: #E9D29A; }
.ncf-fwt b { display: block; font: 600 15.5px/1.3 var(--f-ui); color: #fff; }
.ncf-fwt span { display: block; margin-top: 2px; font: 14px/1.4 var(--f-ui); color: #e8dccd; }

.ncf-fbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: var(--burg); color: #fff; box-shadow: 0 -6px 20px rgba(40, 15, 25, 0.25); transform: translateY(110%); visibility: hidden; transition: transform 0.35s ease, visibility 0s linear 0.35s; }
.ncf-fbar.ncf-on { transform: none; visibility: visible; transition: transform 0.35s ease; }
.ncf-fbar-in { max-width: 1338px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.ncf-fbar-t { font: 600 15px/1.2 var(--f-ui); color: #E9D29A; margin-right: 6px; white-space: nowrap; }
.ncf-fbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(233, 210, 154, 0.65); color: #fff; font: 500 15px/1.2 var(--f-ui); white-space: nowrap; text-decoration: none !important; }
.ncf-fbtn:hover { background: rgba(233, 210, 154, 0.14); }
.ncf-fbtn .ncf-fi { width: 18px; height: 18px; flex: none; color: #E9D29A; }
.ncf-fbtn .ncf-fs { display: none; }
.ncf-fbar-x { all: unset; cursor: pointer; margin-left: auto; padding: 4px 8px; font-size: 22px; line-height: 1; color: #E9D29A; }
body.ncf-fbar-room { padding-bottom: 60px; }
body.ncf-fbar-on .generate-back-to-top { bottom: 72px !important; }
@media (max-width: 760px) {
  .ncf-fbar-in { gap: 6px; padding: 8px 10px; }
  .ncf-fbar-t { display: none; }
  .ncf-fbtn { flex: 1; justify-content: center; padding: 9px 6px; font-size: 14px; gap: 6px; }
  .ncf-fbtn .ncf-fl { display: none; }
  .ncf-fbtn .ncf-fs { display: inline; }
}

.ncf-fpop { position: fixed; z-index: 9000; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 16px; background: var(--paper-2); border: 1px solid var(--burg); border-radius: 4px; box-shadow: 0 12px 34px rgba(40, 15, 25, 0.28); font: 15px/1.45 var(--f-ui); color: var(--ink); }
.ncf-fpop h4 { margin: 0 0 6px; font: 600 17px/1.3 var(--f-ui); color: var(--burg); }
.ncf-fpop p { margin: 0 0 12px; }
.ncf-fpop small { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.ncf-fpop-x { all: unset; cursor: pointer; position: absolute; top: 8px; right: 10px; font-size: 22px; line-height: 1; color: var(--ink-2); }
.ncf-fpop-row { display: flex; gap: 8px; }
.ncf-fpop-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #b9a98f; border-radius: 3px; background: #fff; font: 15px/1.2 var(--f-ui); color: var(--ink); }
.ncf-fcopy { all: unset; cursor: pointer; padding: 10px 14px; border-radius: 3px; background: var(--burg); color: #fff; font: 600 14px/1.2 var(--f-ui); }
.ncf-fcopy:focus-visible, .ncf-fpop-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ncf-fbar, .ncf-fbar.ncf-on { transition: none; } }

/* 157b. "Notifications in browser" on the Follow card and bar (owner approved the look and words, 2026-10-26, log 206). Both states are in the page; html.ncf-push-on (set by ne-feed.js) shows the "on" words, filled bell and green dot; browsers that cannot show notifications never see the button (html.ncf-nopush). */
.ncf-fwt .ncf-poff, .ncf-fwt .ncf-pon { display: inline; margin: 0; font: inherit; color: inherit; }
html:not(.ncf-push-on) .ncf-pon, html.ncf-push-on .ncf-poff, html.ncf-nopush .ncf-push { display: none !important; }
.ncf-fwt .ncf-pdot { display: inline-block; width: 8px; height: 8px; margin: 0 7px 2px 0; border-radius: 50%; background: #8fcf9a; vertical-align: middle; }
html.ncf-push-on .ncf-push .ncf-bell { fill: currentColor; }
html.ncf-push-on .ncf-fway.ncf-push { background: rgba(233, 210, 154, 0.16); border-color: rgba(233, 210, 154, 0.7); }
html.ncf-push-on .ncf-fbtn.ncf-push { background: rgba(233, 210, 154, 0.2); border-color: #E9D29A; }
.ncf-fpop ol { margin: 0 0 4px; padding-left: 20px; }
.ncf-fpop li { margin: 0 0 4px; }
.ncf-fghost { all: unset; cursor: pointer; padding: 9px 13px; border-radius: 3px; border: 1px solid var(--burg); color: var(--burg); font: 600 14px/1.2 var(--f-ui); }
.ncf-fghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ncf-fcopy:disabled, .ncf-fghost:disabled { opacity: 0.6; cursor: wait; }
/* Phones: in some languages the short word is long ("Benachrichtigungen"), so this one button may wrap, with the language's own word breaks (log 209). */
@media (max-width: 760px) {
  .ncf-fbtn.ncf-push { min-width: 0; white-space: normal; text-align: center; line-height: 1.15; -webkit-hyphens: auto; hyphens: auto; }
  .ncf-fbar .ncf-fbtn { align-self: stretch; } /* RSS as tall as a two-line Notifications button */
  body.ncf-fbar-room { padding-bottom: 72px; } /* room for the two-line bar (68px) */
}

/* 158. /articles/ cards: a 1px line above the labels row separates the caption (or summary) from the labels below (owner, 2026-10-25, log 198). */
.ncf-card .ncf-meta { border-top: 1px solid var(--paper-3); padding-top: 12px; margin-top: 14px; }
/* 159. Own article cards: the line of 158 runs the full card width, under "read more" too (it sits in its own column beside the labels) (owner, 2026-10-25, log 199). */
.ncf-card:has(> .ncf-go) > .ncf-meta { border-top: 0; }
.ncf-card:has(> .ncf-go)::after { content: ""; grid-column: 1 / -1; grid-row: 98; height: 1px; background: var(--paper-3); margin-top: 8px; }
.ncf-card:has(> .ncf-go) > .ncf-meta, .ncf-card:has(> .ncf-go) > .ncf-go { padding-top: 12px; margin-top: 0 !important; }
/* 159b. Cards without "read more" (video cards): the labels row and its line span the full width, not stopping 16px short at the empty "read more" column (log 199). */
.ncf-card:not(:has(> .ncf-go)) > .ncf-meta { grid-column: 1 / -1; }
/* 160. /articles/ two columns: the first card dealt to the right column starts it (set by ne-feed.js), so the browser no longer re-balances cards between the columns when a box opens (owner, 2026-10-25, log 200). */
.ncf-feed > .ncf-colbreak { break-before: column; }
/* 161. /articles/ wide screens: the cards sit in two real columns made by ne-feed.js (li.ncf-col > ul.ncf-colul), because Firefox ignores the column break of 160; a card that grows only pushes down its own column (owner, 2026-10-25, log 201). */
.ncf-feed.ncf-dealt { column-count: auto; display: flex; gap: 18px; align-items: flex-start; }
.ncf-feed.ncf-dealt > .ncf-col { flex: 1 1 0; min-width: 0; }
.ncf-colul { list-style: none; margin: 0; padding: 0; }

/* 162. /articles/ video cards: tall (TikTok) pictures show the whole creator cover; a cover shorter than the tall box gets dark bands above and below instead of losing its sides. Play button fill half as solid (0.88 -> 0.44); gold ring and triangle unchanged (owner, 2026-10-26, log 214). */
.ncf-media.ncf-tall img { object-fit: contain; }
.ncf-play { background: rgba(59, 26, 40, 0.44); }
/* 163. /articles/ video cards: play button bigger (58 -> 76px circle, triangle 22 -> 29px); gold ring and white triangle at 65% strength, circle fill 0.44 -> 0.38 (owner, 2026-10-26, log 216). */
.ncf-play { width: 76px; height: 76px; background: rgba(59, 26, 40, 0.38); border-color: rgba(203, 166, 82, 0.65); }
.ncf-play svg { width: 29px; height: 29px; margin-left: 4px; fill: rgba(246, 244, 239, 0.82); } /* triangle 0.65 -> 0.82 (owner, 2026-10-26) */
/* 164. /articles/ TikTok cards: a "Watch on TikTok" link under every opened TikTok player, because TikTok's in-page players fail in some browsers (owner, 2026-10-26, log 220). */
.ncf-watch { display: block; width: max-content; margin: -4px auto 14px; font: 500 14px/1.3 var(--f-ui); color: var(--burg); text-decoration: underline; text-underline-offset: 3px; }
.ncf-watch:hover { color: var(--ink); }
.ncf-watch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* "Edit" link on each card, only for the owner while logged in (2026-10-28) */
.ncf-edit { margin-left: auto; font-size: 12.5px; color: var(--burg); text-decoration: underline; text-underline-offset: 2px; }
.ncf-edit:hover { color: var(--ink); }
.ncf-edit + .ncf-flag { margin-left: 14px; }

/* Tall video pictures (TikTok, Reddit, Instagram) centred at every width; before, only from 768px up (owner, 2026-10-28) */
.ncf-media.ncf-tall, .ncf-media.ncf-tiktok, .ncf-media.ncf-instagram, .ncf-media.ncf-reddit { margin-left: auto; margin-right: auto; }

/* Menu bar stays on screen: full at the top of the page, slimming step by step with the scroll (no motto, smaller globe); on phones the menu rows fade into a three-line button (owner, 2026-10-28; it used to slide away).
   The script sets --p on the bar (0 = full, 1 = slim) and keeps the bar's box at the full height; the contents sit at its bottom. */
html.mast-away .mast, html.mast-away.has-progress .mast { transform: none; }
html.mast-js .mast { display: flex; flex-direction: column; justify-content: flex-end; transition: none; padding-top: calc(var(--pull, 0px) * var(--p, 0)); }
html.mast-js .mast > .mast-in { width: 100%; margin-block: auto; position: relative; padding-block: calc(12px - 6px * var(--p, 0)); }
html.mast-js .brand img { width: calc(72px - 34px * var(--p, 0)); height: calc(72px - 34px * var(--p, 0)); }
html.mast-js .brand-text strong { font-size: calc(1.5rem - 0.2rem * var(--p, 0)); }
html.mast-js .brand-text small { overflow: hidden; max-height: calc(3.2em * (1 - var(--p, 0))); max-width: calc(34ch * clamp(0, (1 - var(--p, 0)) * 2, 1)); opacity: clamp(0, 1 - 1.6 * var(--p, 0), 1); margin-top: calc(2px * (1 - var(--p, 0))); }
.mast-burger { display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--on-dark); cursor: pointer; place-items: center; }
.mast-burger svg { width: 24px; height: 24px; }
.mast-burger:hover, html.mast-menu .mast-burger { background: rgba(246, 244, 239, 0.14); }
@media (max-width: 680px) {
  html.mast-js .mast > .mast-in { padding-block: calc(10px - 2px * var(--p, 0)); }
  html.mast-js .brand { position: relative; }
  html.mast-js .brand img { width: calc(60px - 26px * var(--p, 0)); height: calc(60px - 26px * var(--p, 0)); }
  html.mast-js .brand-text { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap; pointer-events: none; opacity: clamp(0, (var(--p, 0) - 0.4) * 2.5, 1); }
  html.mast-js .brand-text strong { font-size: 1.2rem; }
  html.mast-js .mast nav { overflow: hidden; max-height: calc((1 - var(--p, 0)) * var(--nav-h, 6em)); opacity: clamp(0, 1 - 2.5 * var(--p, 0), 1); }
  html.mast-slim .mast nav { visibility: hidden; }
  html.mast-js .mast-burger { display: grid; position: absolute; right: calc(var(--gutter) - 8px); top: 50%; transform: translateY(-50%); pointer-events: none; opacity: clamp(0, (var(--p, 0) - 0.4) * 2.5, 1); }
  html.mast-slim .mast-burger { pointer-events: auto; }
  html.mast-slim.mast-menu .mast nav { visibility: visible; opacity: 1; max-height: calc(100dvh - var(--stick, 60px) - 8px); overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; position: absolute; left: 0; right: 0; top: 100%; z-index: 55; margin: 0; padding: 4px var(--gutter) 10px; background: var(--burg); box-shadow: 0 14px 24px -14px rgba(29, 20, 24, 0.6); font-size: 1.05rem; gap: 0; }
  html.mast-slim.mast-menu .mast nav a { font-size: 1em; padding: 11px 0; width: 100%; border-top: 1px solid rgba(246, 244, 239, 0.14); }
  html.mast-slim.mast-menu .mast nav a:first-child { border-top: 0; }
  html.mast-slim.mast-menu .mast nav a::after { right: auto; width: 3em; }
}
html.mast-still .mast, html.mast-still .mast * { transition: none !important; }
/* Menu bar, Varianta C (owner, 2026-10-29): where the browser can tie animations to the scroll, the script writes them (style#mast-c-anim)
   and the bar keeps its full layout (--p stays 0). Here: the motto is never cut (on tablets it needs three lines; Varianta B cut the third),
   and the one-row copy of the menu, used on tablets whose full bar needs two menu rows; the copy never takes part in the bar's layout. */
html.mast-c .brand-text small { max-height: calc(99em * (1 - var(--p, 0))); }
html.mast-js .mast > .mast-in > nav.mast-nav1 { display: none !important; position: absolute; margin: 0; flex-wrap: nowrap; white-space: nowrap; z-index: 1; }
@media (min-width: 681px) { html.mast-c.mast-wrap:not(.mast-still) .mast > .mast-in > nav.mast-nav1 { display: flex !important; } }