/* ============================================================================
   THE NEW GUARDIANS OF THE RURAL RENAISSANCE
   base.css — tokens, typography, header, footer, shared components.
   Page-specific layout lives in pages.css.
   ========================================================================== */

:root{
  /* paper */
  --paper:    #F4EFE6;
  --paper-2:  #EDE7DA;
  --paper-3:  #E3DBCB;
  /* ink */
  --ink:      #171410;
  --ink-80:   rgba(23,20,16,.80);
  --ink-60:   rgba(23,20,16,.60);
  --ink-45:   rgba(23,20,16,.45);
  --ink-25:   rgba(23,20,16,.25);
  --ink-12:   rgba(23,20,16,.12);
  --ink-06:   rgba(23,20,16,.06);
  /* small text needs more weight than a hairline does: 4.8:1 on paper */
  --ink-lbl:  rgba(23,20,16,.62);
  /* field */
  --olive:    #4C5539;
  --clay:     #9A6842;          /* rules, accents, large type */
  --clay-text:#8A5A38;          /* the same accent, legible at label sizes */
  --wine:     #6B2436;
  /* night (apply page) */
  --night:    #141312;
  --night-2:  #1E1C19;
  --night-ink:#F0E9DC;
  --night-60: rgba(240,233,220,.62);
  --night-lbl:rgba(240,233,220,.52);   /* small text on the dark page: 4.8:1 */
  --night-30: rgba(240,233,220,.32);   /* hairlines and non-text only */
  --night-14: rgba(240,233,220,.15);
  --night-line:rgba(240,233,220,.38);  /* borders of controls: 3:1 */
  --clay-night:#C08A5E;                /* clay that holds up on the dark page */

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Plex Mono has no Greek, so Noto Sans Mono covers it: unicode-range
     means it is only fetched when Greek is on screen. */
  --mono:  "IBM Plex Mono", "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* editorial, not monumental */
  --fs-hero:  clamp(42px, 1.5rem + 3vw, 74px);
  --fs-h1:    clamp(31px, 1.35rem + 1.85vw, 52px);
  --fs-h2:    clamp(23px, 1.2rem + 1vw, 34px);
  --fs-h3:    clamp(22px, 1.15rem + .8vw, 30px);
  --fs-lead:  clamp(18px, .98rem + .45vw, 23px);
  --fs-body:  clamp(16px, .96rem + .1vw, 17.5px);
  --fs-small: clamp(15.5px, .94rem + .1vw, 16.5px);
  --fs-label: clamp(12px, .7rem + .15vw, 13.5px);

  --pad:  clamp(20px, 4.6vw, 76px);
  --maxw: 1280px;
  --gap:  clamp(20px, 2.4vw, 40px);
  --sec:  clamp(54px, 6.4vw, 100px);
  --head: 68px;

  --ease: cubic-bezier(.22,.68,.16,1);
  --line: 1px solid var(--ink-12);
}

@media (max-width:720px){ :root{ --head:58px } }

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 16px) }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:380;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,dl,dd,figure,blockquote,fieldset{ margin:0 }
h1,h2,h3,h4{ font-weight:400 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--clay); color:var(--paper) }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px }

/* longer translated strings must never overflow */
h1,h2,h3,h4,p,li,dt,dd,label,a,button,input,textarea,select{ overflow-wrap:break-word; hyphens:manual }

/* ── layout ──────────────────────────────────────────────────────────── */
/* viewport-fit=cover extends the page into the display cutout, so every
   full-width container has to keep clear of it in landscape */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right)) }
.section{ padding-block:var(--sec) }
.section--tight{ padding-block:calc(var(--sec) * .62) }
.section--rule{ border-top:var(--line) }
.prose{ max-width:52ch }
.stack{ display:grid; gap:clamp(14px,1.6vw,22px) }

/* ── type ────────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--clay-text);
  display:block;
}
.eyebrow--muted{ color:var(--ink-lbl) }
.h1,.h2,.h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.018em; text-wrap:balance }
.h1{ font-size:var(--fs-h1); line-height:1.06 }
.h2{ font-size:var(--fs-h2); line-height:1.12 }
.h3{ font-size:var(--fs-h3); line-height:1.2 }
.lead{ font-family:var(--serif); font-size:var(--fs-lead); line-height:1.44; max-width:34ch }
.small{ font-size:var(--fs-small); line-height:1.55 }
.dim{ color:var(--ink-60) }
.meta{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl);
}
.num{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1 }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
a.sr:focus{
  position:fixed; top:12px; left:12px; z-index:2000;
  width:auto; height:auto; margin:0; padding:14px 20px; clip:auto; clip-path:none; overflow:visible;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}

/* ── grain (kept, but subconscious) ──────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.042; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.night .grain{ mix-blend-mode:screen; opacity:.03 }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:50px; padding:14px 24px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:26px; height:8px; flex:0 0 auto; overflow:visible }
.btn--primary{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn--primary:hover{ background:var(--clay); border-color:var(--clay) }
.btn--ghost{ border-color:var(--ink-25); color:var(--ink) }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink-06) }
.btn--light{ background:var(--night-ink); color:var(--night); border-color:var(--night-ink) }
.btn--light:hover{ background:var(--clay); border-color:var(--clay); color:var(--night-ink) }
.btn--outline-light{ border-color:var(--night-30); color:var(--night-ink) }
.btn--outline-light:hover{ border-color:var(--night-ink) }

.link{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding-block:8px; color:var(--ink);
  border-bottom:1px solid var(--clay);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link svg{ width:24px; height:8px; color:var(--clay); overflow:visible }
.link:hover{ gap:18px; color:var(--clay) }

/* ── header ──────────────────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:500;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-head.is-solid{
  background:rgba(244,239,230,.94);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom-color:var(--ink-12);
}
body.night .site-head{ background:transparent }
body.night .site-head.is-solid{ background:rgba(20,19,18,.92); border-bottom-color:var(--night-14) }

.head-in{
  max-width:var(--maxw); margin-inline:auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
  min-height:var(--head);
  display:flex; align-items:center; gap:clamp(16px,2vw,36px);
}
.brand{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; flex:0 0 auto;
  display:inline-flex; align-items:center; min-height:44px;
}
.brand i{ font-style:normal; color:var(--ink-lbl) }
body.night .brand i{ color:var(--night-lbl) }

.mainnav{ display:flex; align-items:center; gap:clamp(14px,1.7vw,30px); margin-inline:auto }
.mainnav a{
  position:relative; padding:6px 0;
  font-size:12.5px; font-weight:450; letter-spacing:.085em; text-transform:uppercase;
  color:var(--ink-60); transition:color .25s var(--ease); white-space:nowrap;
}
.mainnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.mainnav a:hover{ color:var(--ink) }
.mainnav a:hover::after{ transform:scaleX(1) }
.mainnav a[aria-current="page"]{ color:var(--ink) }
.mainnav a[aria-current="page"]::after{ transform:scaleX(1) }
body.night .mainnav a{ color:var(--night-60) }
body.night .mainnav a:hover,body.night .mainnav a[aria-current="page"]{ color:var(--night-ink) }

.head-actions{ display:flex; align-items:center; gap:clamp(10px,1.2vw,20px); flex:0 0 auto }
.head-apply{
  min-height:44px; padding:12px 18px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center;
  transition:background-color .25s var(--ease);
}
.head-apply:hover{ background:var(--clay) }
body.night .head-apply{ background:var(--night-ink); color:var(--night) }
body.night .head-apply:hover{ background:var(--clay); color:var(--night-ink) }

/* language */
.lang{ position:relative }
.lang__btn{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--ink-60);
  transition:color .25s var(--ease);
}
.lang__btn:hover,.lang__btn[aria-expanded="true"]{ color:var(--ink) }
.lang__btn svg{ width:9px; height:6px; transition:transform .25s var(--ease) }
.lang__btn[aria-expanded="true"] svg{ transform:rotate(180deg) }
body.night .lang__btn{ color:var(--night-60) }
body.night .lang__btn:hover,body.night .lang__btn[aria-expanded="true"]{ color:var(--night-ink) }
.lang__menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px; z-index:10;
  background:var(--paper); border:var(--line); padding:6px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  box-shadow:0 20px 40px -30px rgba(23,20,16,.55);
}
body.night .lang__menu{ background:var(--night-2); border-color:var(--night-14) }
.lang.open .lang__menu{ opacity:1; visibility:visible; transform:none }
.lang__menu button{
  display:flex; width:100%; align-items:baseline; gap:10px; padding:10px 14px; min-height:42px;
  font-size:13px; color:var(--ink-60); text-align:left;
}
.lang__menu button:hover{ background:var(--paper-2); color:var(--ink) }
.lang__menu button[aria-current="true"]{ color:var(--ink) }
body.night .lang__menu button{ color:var(--night-60) }
body.night .lang__menu button:hover{ background:rgba(255,255,255,.05); color:var(--night-ink) }
body.night .lang__menu button[aria-current="true"]{ color:var(--night-ink) }
.lang__code{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-lbl); min-width:22px }
body.night .lang__code{ color:var(--night-lbl) }

/* burger */
.burger{
  display:none; align-items:center; gap:9px; min-height:44px; min-width:44px; justify-content:flex-end; padding:8px 0 8px 12px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.burger i{ font-style:normal }
.burger span{ display:block; width:18px; height:9px; position:relative }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:0 } .burger span::after{ top:8px }
body.menu-open .burger span::before{ top:4px; transform:rotate(45deg) }
body.menu-open .burger span::after{ top:4px; transform:rotate(-45deg) }
body.night .burger{ color:var(--night-ink) }

/* ── mobile menu ─────────────────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:480;
  background:var(--paper);
  padding:calc(var(--head) + 20px)
          max(var(--pad), env(safe-area-inset-right))
          calc(28px + env(safe-area-inset-bottom))
          max(var(--pad), env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:24px;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
  overflow-y:auto;
}
body.night .menu{ background:var(--night) }
.menu.open{ opacity:1; visibility:visible }
.menu__nav{ display:grid }
.menu__nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:var(--line);
  font-family:var(--serif); font-size:clamp(24px,7vw,30px); line-height:1.1;
}
/* iPhone SE and similar: the overlay was taller than the screen */
@media (max-height:720px){
  .menu{ gap:14px; padding-top:calc(var(--head) + 10px) }
  .menu__nav a{ padding-block:11px }
}
body.night .menu__nav a{ border-color:var(--night-14) }
.menu__nav a .n{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-lbl) }
.menu__nav a[aria-current="page"]{ color:var(--clay) }
.menu__foot{ margin-top:auto; display:grid; gap:18px }
.menu__langs{ display:flex; flex-wrap:wrap; gap:8px }
.menu__langs button{
  min-height:44px; padding:11px 15px; border:var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-60);
}
.menu__langs button[aria-current="true"]{ border-color:var(--ink); color:var(--ink) }

@media (max-width:999px){
  .mainnav{ display:none }
  .burger{ display:inline-flex }
  .lang__btn svg{ display:none }
  .head-in{ justify-content:space-between; gap:14px }
  .head-actions{ gap:14px }
}
/* If the translated navigation cannot fit the width (Bulgarian and Croatian
   labels are far longer than the English ones), the header falls back to the
   menu button instead of overflowing. Measured at runtime, per language. */
body.nav-compact .mainnav{ display:none }
body.nav-compact .burger{ display:inline-flex }
body.nav-compact .head-in{ justify-content:space-between; gap:14px }
@media (min-width:1000px){ body:not(.nav-compact) .menu{ display:none } }

/* ── reveal (short, never blocks reading) ────────────────────────────── */
.js .rv{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.js .rv.in{ opacity:1; transform:none }
.js .rv[data-d="1"]{ transition-delay:.06s }
.js .rv[data-d="2"]{ transition-delay:.12s }
.js .rv[data-d="3"]{ transition-delay:.18s }

/* ── shared blocks ───────────────────────────────────────────────────── */
.page-head{ padding-block:clamp(40px,5.4vw,84px) clamp(30px,4vw,56px) }
.page-head .h1{ margin-top:10px }
.page-head .lead{ margin-top:clamp(16px,2vw,26px) }

.figure{ margin:0 }
.figure__frame{
  position:relative; overflow:hidden; background:var(--paper-2);
  border:1px dashed var(--ink-25);
  aspect-ratio:16/10; display:grid; place-items:center;
}
.figure__frame.filled{ border:0; background:var(--paper-3) }
.figure__frame img{ width:100%; height:100%; object-fit:cover }
.figure__frame::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-lbl); text-align:center; padding:12px;
}
.figure__frame.filled::after{ content:none }
.figure figcaption{ margin-top:10px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-lbl) }

/* definition list used for accommodation / food / travel */
.dl{ display:grid; grid-template-columns:minmax(140px,26%) minmax(0,1fr); column-gap:0 }
.dl dt{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-lbl); padding:14px clamp(16px,2.4vw,40px) 0 0; border-top:1px solid var(--ink-06);
}
.dl dd{ padding:12px 0 16px; border-top:1px solid var(--ink-06); font-size:var(--fs-small); line-height:1.6; max-width:46ch }
.dl > dt:first-of-type,.dl > dd:first-of-type{ border-top:0 }
.dl dd.tbc{ color:var(--ink-25); font-family:var(--mono); font-size:11px; letter-spacing:.28em }
.dl dd ul li{ padding:2px 0 }
.dl dd a{ border-bottom:1px solid var(--ink-25) }
.dl dd a:hover{ border-color:var(--ink) }
/* On a phone a row that is still waiting for its value sits on ONE line,
   label left and the mark right, so an unfilled sheet stays compact. */
@media (max-width:720px){
  .dl{ grid-template-columns:minmax(0,1fr) auto; column-gap:0 }
  .dl dt{ padding:13px 16px 13px 0; border-top:1px solid var(--ink-06); align-self:center }
  .dl dd{ grid-column:1 / -1; border-top:0; padding:0 0 15px }
  .dl dd.tbc{
    grid-column:2; align-self:center; text-align:right;
    border-top:1px solid var(--ink-06); padding:13px 0;
  }
  .dl > dt:first-of-type,.dl > dd:first-of-type{ border-top:0 }
}

/* small tag chips */
.tags{ display:flex; flex-wrap:wrap; gap:8px }
.tags li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-60); border:1px solid var(--ink-12); padding:6px 10px;
}

/* ── footer ──────────────────────────────────────────────────────────── */
.site-foot{ border-top:var(--line); background:var(--paper) }
body.night .site-foot{ background:var(--night); border-top-color:var(--night-14) }
.foot-in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(40px,5vw,72px)
          max(var(--pad), env(safe-area-inset-right))
          calc(clamp(28px,3vw,44px) + env(safe-area-inset-bottom))
          max(var(--pad), env(safe-area-inset-left));
  display:grid; gap:clamp(28px,3.4vw,52px);
}
.foot-top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,3vw,56px); align-items:start }
.foot-disc{ font-size:12.5px; line-height:1.6; color:var(--ink-60); max-width:70ch }
.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--gap) }
/* the other three columns open with a label; this one starts at its baseline */
.foot-cols #footNav{ margin-top:calc(1em + 8px); gap:0 }
#footNav a{ display:inline-block; padding-block:9px }
.foot-cols .foot-h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl); font-weight:400; margin-bottom:8px }
.foot-cols p,.foot-cols a{ font-size:15px; line-height:1.6 }
.foot-cols li a:hover{ color:var(--clay) }
.foot-cols .code{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; line-height:1.7 }
.foot-end{
  border-top:var(--line); padding-top:18px;
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-lbl);
}
body.night .foot-end{ border-top-color:var(--night-14) }
@media (max-width:860px){ .foot-top{ grid-template-columns:minmax(0,1fr) } }

/* ── analytics consent ───────────────────────────────────────────────────
   A strip, not a wall: the site stays readable and usable behind it, and
   body gets exactly its height as padding so it never covers the footer or
   the submit button. Same paper, same hairline, same buttons as everything
   else; on the apply page it takes the dark ground with it.              */
.consentbar{
  position:fixed; left:0; right:0; bottom:0; z-index:470;
  background:var(--paper); border-top:var(--line);
  transform:translateY(101%);
  transition:transform .32s var(--ease);
}
.consentbar.in{ transform:none }
.consentbar__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(16px,2vw,22px)
          max(var(--pad), env(safe-area-inset-right))
          calc(clamp(16px,2vw,22px) + env(safe-area-inset-bottom))
          max(var(--pad), env(safe-area-inset-left));
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(14px,3vw,44px);
}
.consentbar__words{ flex:1 1 300px; min-width:0 }
/* the heading carries a sentence now, so it is set like the site's other
   headings rather than as a tracked-out label */
.consentbar__h{
  font-family:var(--serif); font-size:clamp(19px,1.6vw,23px);
  line-height:1.2; font-weight:400; letter-spacing:-.018em; text-wrap:balance;
  color:var(--ink); max-width:52ch;
}
.consentbar__p{
  margin-top:8px; font-size:var(--fs-small); line-height:1.5;
  color:var(--ink-60); max-width:66ch;
}
/* the analytics-only line: a supporting note, not a warning. Same accent the
   heading used to carry, one step down in size, a little more weight. */
.consentbar__note{
  margin-top:8px; font-size:clamp(13px, .8rem + .1vw, 14px); line-height:1.45;
  font-weight:500; color:var(--clay-text); max-width:66ch;
}
.consentbar__acts{ display:flex; gap:10px; flex:0 0 auto }
/* Accept and Decline are one choice with two answers, so they are drawn
   with the same weight. A filled yes beside a hairline no is a nudge,
   and a hairline border is also only 1.7:1 against the paper.        */
.consentbar__btn{
  min-height:46px; padding:12px 22px; font-size:12px;
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.consentbar__btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
/* the choice already on record, without a second sentence to say it */
.consentbar__btn[aria-pressed="true"]::before{
  content:""; flex:0 0 auto; width:6px; height:6px;
  border-radius:50%; background:currentColor;
}
body.consentbar-open{ padding-bottom:var(--consentbar-h, 0px) }

@media (max-width:900px){
  .consentbar__acts{ width:100% }
  .consentbar__btn{ flex:1 1 auto }
}
@media (max-width:640px){
  .consentbar__in{ padding-block:14px calc(14px + env(safe-area-inset-bottom)) }
  .consentbar__h{ font-size:clamp(17px,4.6vw,19px) }
  .consentbar__p{ font-size:14.5px; line-height:1.45; margin-top:6px }
  .consentbar__note{ font-size:12.5px; margin-top:7px }
  .consentbar__acts{ width:100% }
  .consentbar__btn{ flex:1 1 0; padding:12px 8px; letter-spacing:.05em }
}
/* the narrowest phones, where the longest translations run to seven lines */
@media (max-width:360px){
  .consentbar__h{ font-size:16.5px }
  .consentbar__p{ font-size:14px; line-height:1.42 }
  .consentbar__note{ font-size:12px }
}
/* Short screens, mostly a phone turned sideways. Capping the whole text block
   pushed the analytics-only line out of sight, because it is the last child.
   So the paragraph is set smaller and, only if it is still too tall, it is the
   one thing that scrolls: heading, note and buttons always stay on screen. */
@media (max-height:620px){
  .consentbar__in{ padding-block:12px calc(12px + env(safe-area-inset-bottom)) }
  .consentbar__h{ font-size:17px }
  .consentbar__p{ font-size:13.5px; line-height:1.4; margin-top:6px; max-height:32vh; overflow-y:auto }
  .consentbar__note{ font-size:12px; margin-top:6px }
}

body.night .consentbar{ background:var(--night-2); border-top-color:var(--night-14) }
body.night .consentbar__h{ color:var(--night-ink) }
body.night .consentbar__note{ color:var(--clay-night) }
body.night .consentbar__p{ color:var(--night-60) }
body.night .consentbar__btn{ background:transparent; color:var(--night-ink); border-color:var(--night-ink) }
body.night .consentbar__btn:hover{ background:var(--night-ink); color:var(--night); border-color:var(--night-ink) }

/* reopening the choice from the footer, as easily as it was made */
.foot-consent{
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  background:none; border:0; cursor:pointer;
  padding:16px 8px; margin:-16px -8px;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:var(--ink-25);
}
.foot-consent:hover{ color:var(--ink); text-decoration-color:currentColor }
body.night .foot-consent{ text-decoration-color:var(--night-30) }
body.night .foot-consent:hover{ color:var(--night-ink) }

@media print{
  .consentbar{ display:none }
  body.consentbar-open{ padding-bottom:0 }
}

@media (prefers-reduced-motion:reduce){
  .consentbar{ transition:none }
}

/* night page inversion */
body.night{ background:var(--night); color:var(--night-ink) }
body.night .dim{ color:var(--night-60) }
body.night .meta,body.night .eyebrow--muted{ color:var(--night-lbl) }
body.night .eyebrow{ color:#C08A5E }
body.night .foot-h{ color:var(--night-lbl) }
body.night .foot-disc{ color:var(--night-60) }

body.night .foot-end{ color:var(--night-lbl) }
body.night ::selection{ background:var(--clay); color:var(--night) }

/* ── no javascript ───────────────────────────────────────────────────── */
.noscript{ padding-block:clamp(24px,4vw,44px); border-bottom:var(--line) }
.noscript p{ font-size:15.5px; line-height:1.6; max-width:56ch }
.noscript p + p{ margin-top:.8em; color:var(--ink-60) }
.noscript nav{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px }
.noscript nav a{ border-bottom:1px solid var(--ink-25); font-size:15px }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.15s !important }
  .js .rv{ transform:none }
}

/* ── narrow phones: the header must survive the longest translations ──
   (Bulgarian "Кандидатствай", Croatian "Izbornik" …)                    */
/* When the translated header still does not fit (Bulgarian "Кандидатствай",
   Croatian "Izbornik"), the row sheds its optional parts instead of
   overflowing. Measured at runtime, so every language gets what it needs. */
body.head-tight .head-in{ gap:10px }
body.head-tight .brand i{ display:none }
body.head-tight .head-apply{ padding:12px 13px; font-size:11px; letter-spacing:.06em }
body.head-min .head-apply{ display:none }
body.head-tight .burger{ gap:0 }
body.head-tight .burger i{          /* keep the accessible name, drop the width */
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ── Greek typography ─────────────────────────────────────────────────
   EB Garamond's Greek is a calligraphic Grecs-du-Roi design: beautiful,
   but it reads as an italic next to the upright Latin. The Greek edition
   therefore uses Literata for the same role, and IBM Plex Mono, which has
   no Greek at all, hands the labels to Noto Sans Mono. Same system, faces
   chosen per script. */
html:lang(el){
  --serif: "Literata", "EB Garamond", Georgia, serif;
  --mono: "Noto Sans Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html:lang(el) .h1,html:lang(el) .h2,html:lang(el) .h3,
html:lang(el) .hero__title,html:lang(el) .day__title,html:lang(el) .partner__name{
  letter-spacing:-.012em;
}