/* ==========================================================================
   KontorBund
   --------------------------------------------------------------------------
   Warm, civic, community. The logo sets the whole thing: EU blue, EU gold, a
   K holding the circle of stars and a B that is a heart. So the page is built
   from soft cards, generous rounding and plenty of white — closer to a
   community noticeboard than to a compliance product.

   No serif faces anywhere. Rubik for headings (friendly, slightly rounded,
   the register civic projects actually use) and Nunito Sans for reading.
   ========================================================================== */

:root {
  /* Official EU flag values, used as the brand rather than approximated. */
  --eu-blue:      #003399;
  --eu-blue-700:  #002a7d;
  --eu-blue-900:  #001b52;
  --eu-gold:      #ffcc00;
  --eu-gold-soft: #ffe89a;

  --ink:    #14213d;
  --slate:  #59668a;
  --paper:  #ffffff;
  --mist:   #eef3fc;   /* tinted band */
  --blush:  #fff8e0;   /* gold-tinted highlight card */
  --line:   #d5e0f3;

  --head: "Rubik", system-ui, -apple-system, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, sans-serif;

  --shell: 1160px;
  --gut: clamp(20px, 5vw, 44px);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --lift: 0 1px 2px rgba(20, 33, 61, 0.05), 0 10px 26px -16px rgba(20, 33, 61, 0.3);
  --lift-hi: 0 4px 8px rgba(20, 33, 61, 0.06), 0 22px 46px -18px rgba(0, 51, 153, 0.3);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.7;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: var(--eu-blue); }

:focus-visible {
  outline: 3px solid var(--eu-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* --- shared type ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.14;
  margin: 0;
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--eu-blue);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--eu-gold);
}

.lede { color: var(--slate); font-size: clamp(16.5px, 1.5vw, 19.5px); max-width: 60ch; }

.band { padding-block: clamp(58px, 7.4vw, 96px); }
.band-mist { background: var(--mist); }

/* Section heads run as a two-column editorial block: title left, standfirst
   right, sharing the full measure. Previously the head was a single 40rem
   column, which left the right half of every section empty and made the whole
   page read as an unfinished wireframe. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  gap: 10px clamp(28px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.band-head .eyebrow { grid-column: 1 / -1; margin-bottom: 6px; }
.band-head h2 { grid-column: 1; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.028em; }
.band-head p { grid-column: 2; margin: 0; padding-bottom: 7px; max-width: none; font-size: clamp(16px, 1.4vw, 18px); }
@media (max-width: 860px) {
  .band-head { grid-template-columns: 1fr; gap: 14px; }
  .band-head h2, .band-head p { grid-column: 1; }
}
/* Heads with no standfirst keep a deliberate measure instead of a full-bleed
   line of 90-character type. */
.band-head.solo { grid-template-columns: 1fr; }
.band-head.solo h2 { max-width: 20ch; }

/* ==========================================================================
   Header
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.masthead.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(20, 33, 61, 0.4); }
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; display: block; }
.brand-name { font-family: var(--head); font-size: 20.5px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.brand-name span { color: var(--eu-blue); }

.masthead nav { display: flex; align-items: center; gap: 28px; }
.masthead nav a {
  font-family: var(--head); font-size: 15px; font-weight: 500;
  color: var(--slate); text-decoration: none; transition: color 0.18s;
}
.masthead nav a:hover { color: var(--eu-blue); }
@media (max-width: 900px) { .masthead nav { display: none; } }

/* ==========================================================================
   Buttons — pill shaped, friendly
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--head); font-size: 15.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.btn-primary { background: var(--eu-blue); color: #fff; }
.btn-primary:hover { background: var(--eu-blue-700); transform: translateY(-2px); box-shadow: var(--lift-hi); }
.btn-gold { background: var(--eu-gold); color: var(--eu-blue-900); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(255, 204, 0, 0.9); }
.btn-outline { background: var(--paper); color: var(--eu-blue); border-color: #c2d2f0; }
.btn-outline:hover { border-color: var(--eu-blue); background: var(--mist); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 14.5px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; padding-block: clamp(44px, 6vw, 78px) clamp(56px, 7vw, 92px); overflow: hidden; }
/* Two soft washes rather than a hard gradient band, so the page starts warm
   without the header sitting on a coloured slab. */
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(560px 420px at 78% 22%, rgba(0, 51, 153, 0.09), transparent 70%),
    radial-gradient(460px 380px at 12% 8%, rgba(255, 204, 0, 0.16), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  gap: clamp(30px, 5vw, 58px);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(35px, 5.1vw, 61px); font-weight: 700; margin-bottom: 24px; max-width: 19ch; letter-spacing: -0.03em; }
.hero h1 b { color: var(--eu-blue); font-weight: 700; }
.hero-sub { margin: 0 0 30px; font-size: clamp(17px, 1.6vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 30px; font-size: 14.5px; color: var(--slate);
}
.hero-meta b { color: var(--ink); font-weight: 700; font-family: var(--head); }

/* --- the star ring ----------------------------------------------------- */

.ring { position: relative; display: grid; place-items: center; }
.ring svg { width: min(100%, 520px); height: auto; display: block; }
/* Dots, not stars. The logo already carries the circle of twelve stars, so a
   second ring of them read as two competing EU flags. These are members
   gathering around it instead — same twelve positions, different meaning. */
.ring-dot { fill: var(--eu-gold); }
.ring-dot:nth-child(3n) { fill: var(--eu-blue); opacity: 0.85; }
.ring-plate {
  position: absolute;
  width: 46%; aspect-ratio: 1;
  display: grid; place-items: center;
}
.ring-plate img { width: 100%; height: auto; display: block; }

.js .ring-spin { animation: spin 90s linear infinite; transform-origin: 200px 200px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Each star fades up in turn on load — twelve small arrivals, which is the
   whole idea of the association in one gesture. */
.js .ring-dot { opacity: 0; animation: dotIn 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes dotIn { from { opacity: 0; r: 0; } to { opacity: 1; r: 9; } }

/* ==========================================================================
   Deadline strip
   ========================================================================== */

.strip { background: var(--eu-gold); color: var(--eu-blue-900); }
.strip-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; padding-block: 15px;
  font-family: var(--head); font-weight: 500; font-size: 15.5px; text-align: center;
}
.strip-in b { font-weight: 700; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 38px);
  box-shadow: var(--lift);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 26px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.pillar { transition: transform 0.22s, box-shadow 0.22s; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); }
.pillar-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--mist);
  margin-bottom: 20px;
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 { font-size: 25px; margin-bottom: 11px; }
.pillar p { margin: 0; color: var(--slate); font-size: 16.5px; }

/* --- fee comparison ----------------------------------------------------- */

.fee-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 22px; }
.fee-card.is-small { background: var(--blush); border-color: #f4e2a8; }

.meter { margin-bottom: 20px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.meter-top span { font-size: 14.5px; color: var(--slate); }
.meter-top b { font-family: var(--head); font-size: 16px; font-weight: 700; }
.meter-track { height: 14px; background: rgba(20, 33, 61, 0.07); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; width: var(--w); border-radius: 999px; transition: width 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s; }
.js .meter-fill { width: 0; }
.is-shown .meter-fill { width: var(--w); }
.fill-vol { background: var(--eu-blue); }
/* Gold on the blush card is nearly the same value, so the bar carries a
   darker edge to stay readable against it. */
.fill-cost { background: var(--eu-gold); box-shadow: inset 0 0 0 1px rgba(160, 120, 0, 0.45); }
/* 40 kg is 0.4% of the track — about a pixel, which reads as a broken graphic
   rather than as "almost nothing". The exact figures sit in the label. */
.meter-fill[style*="0.4%"] { min-width: 6px; }

.punch {
  margin-top: clamp(26px, 3.4vw, 38px);
  background: var(--eu-blue);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px);
}
.punch p { margin: 0; font-size: clamp(17px, 1.9vw, 21px); max-width: 66ch; }
.punch b { color: var(--eu-gold); }

/* A single deep-blue band mid-page. Without it the homepage was seven
   consecutive white/mist sections with the same head-then-cards rhythm, and
   nothing anchored the eye anywhere. */
.band-blue { background: var(--eu-blue); color: #fff; }
.band-blue h2, .band-blue h3 { color: #fff; }
.band-blue .lede, .band-blue p { color: #c9d8f6; }
.band-blue .eyebrow { color: var(--eu-gold); }
.band-blue .eyebrow::before { background: var(--eu-gold); }
.band-blue .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.band-blue .pillar:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.band-blue .pillar-icon { background: rgba(255, 255, 255, 0.12); }
.band-blue .pillar-icon svg { stroke: var(--eu-gold); }

/* ==========================================================================
   Voices wall — the signature. A community noticeboard of what sellers
   actually posted in public when they closed EU shipping.
   ========================================================================== */

.wall { columns: 3; column-gap: clamp(14px, 2vw, 22px); }
@media (max-width: 900px) { .wall { columns: 2; } }
@media (max-width: 580px) { .wall { columns: 1; } }

.note {
  break-inside: avoid;
  margin-bottom: clamp(14px, 2vw, 22px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 24px 20px;
  box-shadow: var(--lift);
  transition: transform 0.22s, box-shadow 0.22s;
}
.note:hover { transform: translateY(-3px) rotate(-0.35deg); box-shadow: var(--lift-hi); }
.note p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.note-gold { background: var(--blush); border-color: #f4e2a8; }
.note-blue { background: var(--eu-blue); border-color: var(--eu-blue); color: #fff; }
.note-blue .note-tag { color: var(--eu-gold-soft); }
.note-tag {
  display: block; margin-top: 14px;
  font-family: var(--head); font-size: 13px; font-weight: 500; color: var(--slate);
}
.note-quote { font-size: 30px; line-height: 1; color: var(--eu-gold); font-family: var(--head); font-weight: 700; }

.wall-note {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 14.5px;
  color: var(--slate);
}

/* ==========================================================================
   Country desks
   ========================================================================== */

.desks { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.desk {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.desk:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: #c3d3f2; }
.desk-code { font-family: var(--head); font-size: 25px; font-weight: 700; display: block; letter-spacing: -0.01em; }
.desk-name { font-size: 14px; color: var(--slate); display: block; margin-bottom: 12px; }
.desk-state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-size: 12.5px; font-weight: 600; }
.desk-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.desk-open { border-color: #bcd0f5; background: linear-gradient(180deg, #f5f8ff, #fff); }
.desk-open .desk-state { color: var(--eu-blue); }
.desk-want .desk-state { color: #a9924a; }

/* ==========================================================================
   Limits
   ========================================================================== */

.limit { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; }
.limit + .limit { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.limit-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blush); display: grid; place-items: center;
}
.limit-mark svg { width: 20px; height: 20px; }
.limit h3 { font-size: 18px; margin-bottom: 6px; }
.limit p { margin: 0; color: var(--slate); font-size: 16px; }

/* ==========================================================================
   Join
   ========================================================================== */

.join-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(22px, 3vw, 34px); align-items: start; }
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--head); font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--body); font-size: 16.5px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--eu-blue); outline: none;
  box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.1);
}
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2359668a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }

/* Honeypot: reachable to bots, invisible and unfocusable to people. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 14px; color: var(--slate); margin: 14px 0 0; }
.form-msg { margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-size: 15.5px; display: none; }
.form-msg.is-shown { display: block; }
.form-msg.ok { background: #eaf3ff; border: 1px solid #b9d3fb; }
.form-msg.bad { background: var(--blush); border: 1px solid #f0dca0; }

.side { background: var(--eu-blue); color: #fff; border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 38px); }
.side h3 { color: #fff; font-size: 25px; margin-bottom: 12px; }
.side p { color: #cfdcf7; margin: 0 0 22px; font-size: 16px; }
.side .btn-gold { width: 100%; }
.side-list { list-style: none; margin: 24px 0 0; padding: 0; font-size: 15.5px; color: #d8e3fa; }
.side-list li { padding: 11px 0 11px 30px; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.side-list li::before {
  content: ""; position: absolute; left: 4px; top: 16px;
  width: 6px; height: 11px;
  border-right: 2.5px solid var(--eu-gold); border-bottom: 2.5px solid var(--eu-gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { background: var(--mist); padding-block: 48px 56px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; }
.foot p { margin: 12px 0 0; font-size: 14.5px; color: var(--slate); max-width: 46ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--head); font-size: 15px; font-weight: 500; }
.foot nav a { color: var(--slate); text-decoration: none; }
.foot nav a:hover { color: var(--eu-blue); }

/* ==========================================================================
   Reveal + reduced motion
   ========================================================================== */

/* Gated behind .js, which is set before first paint. Without it every section
   keeps its natural opacity, so a blocked script can never blank the page. */
.js .rise { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .rise.is-shown { opacity: 1; transform: none; }
.js .rise[data-delay="1"] { transition-delay: 0.08s; }
.js .rise[data-delay="2"] { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .rise { opacity: 1; transform: none; }
  .js .ring-dot { opacity: 1; }
  .js .meter-fill { width: var(--w); }
}

/* ==========================================================================
   Sub-pages — The Observatory, The Library
   --------------------------------------------------------------------------
   Same system as the front page. Everything below is additive: no rule here
   overrides a base rule, so the two page types can never drift apart.
   ========================================================================== */

.page-hero { position: relative; padding-block: clamp(40px, 5.4vw, 68px) clamp(34px, 4.4vw, 54px); overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%; height: 160%;
  background:
    radial-gradient(520px 400px at 84% 16%, rgba(0, 51, 153, 0.08), transparent 70%),
    radial-gradient(420px 340px at 6% 0%, rgba(255, 204, 0, 0.15), transparent 68%);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { font-size: clamp(33px, 4.6vw, 54px); font-weight: 700; max-width: 20ch; }
.page-hero .lede { margin: 20px 0 0; }

/* Breadcrumb back to the front page. */
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 14.5px; font-weight: 500;
  color: var(--slate); text-decoration: none; margin-bottom: 18px;
}
.crumb:hover { color: var(--eu-blue); }
.crumb svg { width: 15px; height: 15px; }

/* --- status badges -----------------------------------------------------
   Three states, and the page is honest about which is which: a plan that
   looks like a publication is worse than an empty shelf. */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--head); font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-live    { background: #e7f0ff; color: var(--eu-blue); }
.badge-open    { background: var(--blush); color: #8a6d00; }
.badge-soon    { background: #f1f3f8; color: var(--slate); }

/* --- article + entry cards --------------------------------------------- */

.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2.2vw, 24px); }
/* Four cards on a three-up track leave a lone orphan on row two. Sections with
   an even, fixed number of entries opt into two columns instead. */
.entries-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .entries-2 { grid-template-columns: 1fr; } }

.entry {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 30px);
  box-shadow: var(--lift);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
a.entry { text-decoration: none; color: inherit; }
a.entry:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); border-color: #c3d3f2; }
.entry-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.entry h3 { font-size: 20px; margin-bottom: 10px; line-height: 1.28; }
.entry p { margin: 0; color: var(--slate); font-size: 15.5px; }
.entry-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--head); font-size: 13.5px; font-weight: 500; color: var(--slate);
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.entry-kind { color: var(--eu-blue); }

/* A card that is deliberately not yet a thing — reads as an invitation. */
.entry-empty {
  border-style: dashed; border-color: #c9d6f0; background: #fbfcff;
  box-shadow: none;
}
.entry-empty:hover { transform: none; box-shadow: none; }

/* --- method: a genuine sequence, so it is genuinely numbered ------------ */

.method { counter-reset: step; display: grid; gap: 14px; }
.method-step {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 24px;
}
.method-step::before {
  counter-increment: step; content: counter(step);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--eu-blue); color: #fff;
  font-family: var(--head); font-weight: 700; font-size: 18px;
  display: grid; place-items: center;
}
.method-step h3 { font-size: 18px; margin-bottom: 5px; }
.method-step p { margin: 0; color: var(--slate); font-size: 15.5px; }

/* --- figures ----------------------------------------------------------- */

.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.fig {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px;
}
.fig b { display: block; font-family: var(--head); font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; color: var(--eu-blue); line-height: 1.05; }
.fig span { display: block; margin-top: 8px; font-size: 15px; color: var(--slate); }
.fig-gold { background: var(--blush); border-color: #f4e2a8; }
.fig-gold b { color: #8a6d00; }

/* --- data template block ------------------------------------------------ */

.snippet {
  background: var(--eu-blue-900); color: #dce7ff;
  border-radius: var(--r-md); padding: 24px 26px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14.5px; line-height: 2; overflow-x: auto;
}
.snippet span { color: var(--eu-gold); }

/* --- topic filter chips ------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(24px, 3vw, 34px); }
.chip {
  padding: 9px 17px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper);
  font-family: var(--head); font-size: 14.5px; font-weight: 500; color: var(--slate);
  cursor: pointer; transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.chip:hover { border-color: #c2d2f0; color: var(--eu-blue); }
.chip.is-on { background: var(--eu-blue); border-color: var(--eu-blue); color: #fff; }

.entry.is-hidden { display: none; }

.no-match {
  display: none; text-align: center; color: var(--slate);
  padding: 40px 20px; font-size: 16px;
}
.no-match.is-shown { display: block; }

/* ==========================================================================
   Country desk pages
   --------------------------------------------------------------------------
   A desk is a reference document, not a pitch. It is built to be scanned by
   someone who is mid-panic, and to survive being cited: every claim sits next
   to its legal basis, and the whole page carries the date it was checked.
   ========================================================================== */

.desk-hero { position: relative; padding-block: clamp(34px, 4.6vw, 56px) clamp(24px, 3vw, 34px); overflow: hidden; }
.desk-hero::before {
  content: "";
  position: absolute; inset: -50% -10% auto -10%; height: 180%;
  background:
    radial-gradient(520px 400px at 86% 10%, rgba(0, 51, 153, 0.08), transparent 70%),
    radial-gradient(400px 320px at 4% 0%, rgba(255, 204, 0, 0.16), transparent 68%);
  pointer-events: none;
}
.desk-hero > * { position: relative; }

.desk-title { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.desk-flag {
  width: 58px; height: 42px; border-radius: 7px; flex: none;
  border: 1px solid var(--line); overflow: hidden;
  display: grid; grid-template-rows: 1fr 1fr 1fr;
  box-shadow: var(--lift);
}
.desk-flag i { display: block; }
/* The flag is the real thing, not three CSS stripes. Croatia has a chequy and a
   crown, Cyprus has the island and two olive branches, and half the north is a
   cross rather than bands — approximating those looked careless at any size.
   SVGs are local (/images/flags), from lipis/flag-icons, MIT licensed. */
.desk-flag { display: block; padding: 0; }
.desk-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk-title h1 { font-size: clamp(31px, 4.3vw, 50px); font-weight: 700; }

/* Provenance bar — who checked this, when, and how much to trust it. */
.provenance {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 22px; padding: 16px 20px;
  background: var(--mist); border-radius: var(--r-md);
  font-size: 14.5px;
}
.provenance div { display: flex; align-items: center; gap: 8px; }
.provenance b { font-family: var(--head); font-weight: 600; color: var(--ink); }
.provenance span { color: var(--slate); }

/* --- the one-sentence answer ------------------------------------------- */

.answer {
  background: var(--eu-blue); color: #fff;
  border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 40px);
  margin-top: clamp(24px, 3vw, 34px);
}
.answer p:first-child {
  margin: 0 0 14px;
  font-family: var(--head); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--eu-gold);
}
.answer p:last-child { margin: 0; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.5; }
.answer b { color: var(--eu-gold); }

/* --- contents rail ------------------------------------------------------ */

.doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
/* minmax(0,1fr), not 1fr: a grid track defaults to min-width:auto, so the
   min-width on the cost tables was forcing the whole column wider than the
   viewport and scrolling the page sideways on phones. */
@media (max-width: 900px) { .doc { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
.doc > * { min-width: 0; }

.toc { position: sticky; top: 96px; }
.toc p {
  margin: 0 0 12px; font-family: var(--head); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate);
}
.toc a {
  display: block; padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  font-size: 15px; color: var(--slate); text-decoration: none;
  transition: color 0.18s, border-color 0.18s;
}
.toc a:hover { color: var(--eu-blue); border-left-color: var(--eu-blue); }

/* --- document sections -------------------------------------------------- */

.sec { scroll-margin-top: 96px; }
.sec + .sec { margin-top: clamp(40px, 5.4vw, 68px); }
.sec > h2 {
  font-size: clamp(24px, 3vw, 32px);
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 2px solid var(--eu-gold);
}
.sec p { margin: 0 0 16px; }
.sec p:last-child { margin-bottom: 0; }

/* --- fact rows ---------------------------------------------------------- */

.facts { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.fact {
  display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 4px 24px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
}
.fact:last-child { border-bottom: 0; }
.fact:nth-child(odd) { background: #fafbff; }
@media (max-width: 700px) { .fact { grid-template-columns: 1fr; gap: 4px; } }
.fact dt { font-family: var(--head); font-size: 14.5px; font-weight: 600; color: var(--slate); margin: 0; }
.fact dd { margin: 0; font-size: 16px; }
.fact dd b { font-weight: 700; }
.fact code {
  font-family: ui-monospace, Menlo, monospace; font-size: 13.5px;
  background: var(--mist); color: var(--eu-blue);
  padding: 2px 7px; border-radius: 5px;
  white-space: nowrap;
  /* Long citations must be allowed to break rather than widen the page. */
  overflow-wrap: anywhere;
}

/* --- cost table --------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.grid { width: 100%; border-collapse: collapse; min-width: 460px; }
table.grid th, table.grid td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15.5px; }
table.grid th { font-family: var(--head); font-size: 14px; font-weight: 600; background: var(--mist); color: var(--ink); white-space: nowrap; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td b { font-family: var(--head); font-weight: 700; }

/* --- traps -------------------------------------------------------------- */

.trap-card {
  background: var(--blush); border: 1px solid #f0dca0;
  border-radius: var(--r-md); padding: 22px 24px;
}
.trap-card + .trap-card { margin-top: 12px; }
.trap-card h3 { font-size: 17px; margin-bottom: 6px; }
.trap-card p { margin: 0; color: #6b5a1e; font-size: 15.5px; }

/* A question that used to be open and now has an answer. Deliberately a
   different colour from .trap-card: a reader scanning the page should be able
   to tell "we settled this" from "don't rely on this" without reading. */
.settled-card {
  background: #edf8f1; border: 1px solid #b9dfc8;
  border-radius: var(--r-md); padding: 22px 24px;
}
.settled-card + .settled-card { margin-top: 12px; }
.settled-card h3 { font-size: 17px; margin-bottom: 6px; color: #14532d; }
.settled-card p { margin: 0; color: #2f5741; font-size: 15.5px; }
.settled-card p + p { margin-top: 10px; }
.settled-card code {
  background: #dcefe3; color: #14532d;
  border-radius: 4px; padding: 1px 5px;
  font-size: 0.86em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- sources ------------------------------------------------------------ */

.sources { counter-reset: src; list-style: none; margin: 0; padding: 0; }
.sources li {
  counter-increment: src;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.sources li:last-child { border-bottom: 0; }
.sources li::before {
  content: counter(src);
  font-family: var(--head); font-size: 13px; font-weight: 700;
  color: var(--eu-blue); background: var(--mist);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
}
.sources a { word-break: break-word; }
.sources span { display: block; color: var(--slate); font-size: 14px; margin-top: 2px; }

/* --- inline note -------------------------------------------------------- */

.note-inline {
  border-left: 3px solid var(--eu-blue);
  background: var(--mist);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  font-size: 15.5px;
}
.note-inline b { font-family: var(--head); }

/* ==========================================================================
   Print / PDF
   --------------------------------------------------------------------------
   A country desk is a reference document, so it has to survive being printed
   or saved. This sheet is what the downloadable PDF is rendered from, so it
   is a design surface in its own right, not an afterthought: navigation and
   controls come out, the provenance block stays, source URLs become visible
   because a printed link that doesn't say where it goes is useless, and
   nothing that belongs together is allowed to break across a page.
   ========================================================================== */

.print-only { display: none; }

@media print {
  @page { margin: 18mm 16mm 20mm; }

  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Screen furniture that means nothing on paper. */
  .masthead, .toc, .crumb, .btn, .hero-actions,
  .foot nav, .no-match, .chips, #help { display: none !important; }

  .hero::before, .page-hero::before, .desk-hero::before { display: none !important; }

  .print-only { display: block; }

  .shell { max-width: none; padding-inline: 0; }
  .doc { display: block; }
  /* Zeroing the band padding outright pressed the first section heading up
     against the summary box. Sections need their own air on paper, where
     there is no scroll to separate things. */
  .band, .desk-hero { padding-block: 0 !important; }
  .desk-hero { margin-bottom: 34pt; }
  .sec > h2 { margin-top: 0; padding-top: 0; }
  .sec + .sec { margin-top: 26pt; }
  .sec > h2 { margin-bottom: 14pt; }

  /* Masthead of the printed document. */
  .print-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 10px; margin-bottom: 18px;
    border-bottom: 2pt solid #003399;
  }
  .print-head img { width: 30px; height: 30px; }
  .print-head b { font-family: var(--head); font-size: 13pt; color: #003399; }
  .print-head span { margin-left: auto; font-size: 9pt; color: #444; text-align: right; }

  .desk-title h1 { font-size: 22pt; }
  .desk-flag { box-shadow: none; }

  .provenance { background: #f2f5fa !important; border: 1pt solid #ccd6ea; }

  .answer {
    background: #fff !important; color: #111 !important;
    border: 2pt solid #003399; border-radius: 4pt;
    padding: 12pt 14pt;
  }
  .answer p:first-child { color: #003399 !important; }
  .answer b { color: #003399 !important; }

  .sec > h2 { font-size: 14pt; color: #003399; border-bottom: 1.5pt solid #ffcc00; }
  .sec + .sec { margin-top: 20pt; }

  /* Nothing that reads as one unit may be split across a page — but a whole
     section is NOT such a unit. Marking .sec atomic pushed any section that
     didn't fit onto a fresh page and left half-empty pages behind, turning a
     six-page document into nine. Sections flow; rows, cards and tables don't
     split. */
  .fact, .trap-card, .settled-card, .method-step, .note-inline, .answer,
  .provenance, .sources li, tr { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  .facts, .tablewrap { border-color: #ccd6ea; }
  /* On screen a fact list is a bordered card. On paper that container paints
     its border down to the page break and leaves an empty stub under the last
     row that fitted. Drop the outer box for print and let each row carry its
     own rule — the list then breaks across pages invisibly. */
  .facts { overflow: visible; border: 0; border-radius: 0; }
  .fact { border-bottom: 0.75pt solid #ccd6ea; }
  .fact:first-child { border-top: 0.75pt solid #ccd6ea; }
  .fact:nth-child(odd) { background: #f8fafd !important; }
  .fact code { background: #eef3fc !important; color: #003399 !important; }
  table.grid { min-width: 0; }
  table.grid th { background: #eef3fc !important; }
  table.grid th, table.grid td { padding: 7pt 9pt; font-size: 9.5pt; }
  /* A legal citation that wraps mid-reference ("§ 79 Abs." / "2") reads as a
     typo. Keep the first column's citations on one line. */
  table.grid td:first-child code, table.grid td code { white-space: nowrap; }

  .trap-card { background: #fff8e0 !important; border: 1pt solid #e8d494; }
  .settled-card { background: #edf8f1 !important; border: 1pt solid #b9dfc8; }
  .settled-card code { background: #dcefe3 !important; color: #14532d !important; }
  .note-inline { background: #f2f5fa !important; }
  .method-step::before { background: #003399 !important; color: #fff !important; }

  /* A printed link has to say where it points. */
  .sources a::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt; color: #444; word-break: break-all; font-weight: 400;
  }
  .sources a { text-decoration: none; color: #003399; }

  .foot { background: #fff !important; border-top: 1pt solid #ccd6ea; padding-block: 10pt 0; }
  .foot p { font-size: 8.5pt; }

  /* Reveal animations must never leave printed content invisible. */
  .js .rise, .rise { opacity: 1 !important; transform: none !important; }
  .js .meter-fill { width: var(--w) !important; }
}