/* ============================================================
   ΕΟΔ — Εταιρεία Οικογενειακού Δικαίου
   Design system & global styles
   ============================================================ */

/* ============================================================
   Self-hosted fonts (was Google Fonts CDN).
   Local woff2 = no external request, no GDPR IP leak to Google,
   faster first paint. Subsets: greek, greek-ext, latin, latin-ext.
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-400-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colors — derived from the ΕΟΔ logo (olive-gold family mark).
     Variable names kept historical (claret/ink) but values are now olive:
     "claret" = deep olive primary, "ink" = warm olive-charcoal dark surface,
     "gold" = the logo's olive-gold accent. All pairs verified WCAG AA. */
  --c-claret:        #56580F; /* deep olive — primary (links, headings accent, buttons, header bg) */
  --c-claret-dark:   #3F410A;
  --c-claret-light:  #7D7F21; /* logo's darker olive */
  --c-ink:           #2B2A16; /* warm olive-charcoal — utility bar + footer + dark text */
  --c-ink-soft:      #4A4A2E;
  --c-gold:          #9B9827; /* logo olive-gold — borders, decoration, accents */
  --c-gold-soft:     #D6D166; /* lighter gold — links/highlights on dark surfaces */
  --c-cream:         #FAF7F2;
  --c-cream-deep:    #F1ECE1;
  --c-paper:         #FFFFFF;
  --c-text:          #1F2937;
  --c-text-muted:    #5B5A55;
  --c-text-faint:    #6C6B63; /* WCAG AA: 5.0:1 on cream, 5.4:1 on white (was #8A8983 = 3.3:1, failed) */
  --c-border:        #E6DFD3;
  --c-border-soft:   #F0E9DC;
  --c-link:          #56580F;
  --c-link-hover:    #3F410A;
  --c-focus:         #7D7F21;
  --c-success:       #2E7D5B;
  --c-danger:        #B2362E;

  /* Spacing scale — 4pt base */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;

  /* Typography */
  --ff-serif: 'Cormorant Garamond', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ff-body:  'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ff-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Sizing */
  --container: 72rem;
  --container-narrow: 52rem;
  --container-wide: 84rem;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(43,42,22,.06);
  --shadow:    0 2px 8px rgba(43,42,22,.08), 0 1px 2px rgba(43,42,22,.04);
  --shadow-lg: 0 10px 30px rgba(43,42,22,.10), 0 4px 10px rgba(43,42,22,.06);

  /* Motion */
  --t-fast: 120ms ease;
  --t:      200ms ease;
  --t-slow: 400ms ease;
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-cream);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-link-hover); }
a:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 600; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.5em; }
li { margin-bottom: var(--sp-2); }

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-claret);
  background: var(--c-cream-deep);
  font-style: italic;
  color: var(--c-ink-soft);
}

hr {
  border: 0;
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-6) 0;
}

/* ============ Accessibility helpers ============ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px; top: var(--sp-2);
  background: var(--c-ink);
  color: var(--c-cream);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  left: var(--sp-2);
  color: var(--c-cream);
  outline: 3px solid var(--c-gold);
}

/* ============ Layout ============ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-4); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) {
  .container, .container-narrow, .container-wide { padding: 0 var(--sp-6); }
}

main { min-height: 60vh; }

/* ============ Top banner / utility bar ============ */
.utility-bar {
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--ff-ui);
  font-size: .82rem;
  padding: var(--sp-2) 0;
}
.utility-bar a { color: var(--c-cream); text-decoration: none; }
.utility-bar a:hover { color: var(--c-gold-soft); }
.utility-bar .row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
}
.utility-bar .links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.utility-bar .contact-strip { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.utility-bar .contact-strip span { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---- Header search (inside utility-bar) ---- */
.header-search {
  display: flex; align-items: stretch;
  background: rgba(250,247,242,.10);
  border: 1px solid rgba(250,247,242,.18);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.header-search input[type="search"] {
  background: transparent;
  border: 0;
  color: var(--c-cream);
  padding: .3rem .6rem;
  font: inherit;
  font-size: .82rem;
  min-width: 11rem;
  width: 14rem;
  outline: none;
}
.header-search input[type="search"]::placeholder { color: rgba(250,247,242,.55); }
.header-search input[type="search"]:focus { background: rgba(250,247,242,.08); box-shadow: 0 0 0 2px var(--c-gold-soft); border-radius: 4px; }
.header-search button {
  background: transparent;
  border: 0; border-left: 1px solid rgba(250,247,242,.18);
  color: var(--c-cream);
  padding: 0 .6rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-search button:hover { background: rgba(250,247,242,.10); color: var(--c-gold-soft); }
@media (max-width: 760px) {
  .header-search { width: 100%; }
  .header-search input[type="search"] { width: 100%; min-width: 0; flex: 1; }
}

/* ---- Search results page ---- */
.search-results-list mark {
  background: var(--c-gold-soft, #f6e6c8);
  color: inherit;
  padding: 0 .15em;
  border-radius: 2px;
}
.search-results-list li .meta {
  font-family: var(--ff-ui);
  font-size: .82rem;
  color: var(--c-claret); /* primary olive — WCAG AA 7:1 on cream */
  margin: .1rem 0 .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============ Site header ============ */
.site-header {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.site-header .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--c-ink);
}
.brand:hover { color: var(--c-claret); }
.brand-mark {
  height: 52px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.brand-name {
  font-family: var(--ff-serif);
  line-height: 1.15;
}
.brand-name .ttl { font-size: 1.2rem; font-weight: 600; display: block; color: var(--c-ink); }
.brand-name .sub { font-size: .78rem; font-family: var(--ff-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-claret); font-weight: 600; display: block; margin-top: 2px; }

/* ============ Nav ============ */
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-claret); color: var(--c-cream);
  border: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-ui); font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .95rem;
}
.nav-toggle:hover { background: var(--c-claret-dark); }
.nav-toggle:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.nav-toggle .icon { width: 20px; height: 20px; }
@media (min-width: 980px) { .nav-toggle { display: none; } }

.primary-nav {
  font-family: var(--ff-ui);
  font-size: .95rem;
}
.primary-nav > ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
}
.primary-nav > ul > li { margin: 0; position: relative; }
.primary-nav > ul > li > a,
.primary-nav > ul > li > button {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > button:hover,
.primary-nav > ul > li.is-active > a,
.primary-nav > ul > li[aria-current="page"] > a {
  color: var(--c-claret);
  border-bottom-color: var(--c-claret);
}
.primary-nav .caret { width: 12px; height: 12px; opacity: .65; }
/* Top-level item that is BOTH a real link AND a submenu parent (e.g. «Ανακοινώσεις»
   → links to /notices/, caret opens «Επικαιρότητα»). It renders as <a> + a separate
   .sub-toggle button; without this both would inherit the full sp-4 side padding and
   leave a wide gap before the caret. Keep the caret snug, and underline both together
   when the whole item is hovered so it reads as one menu entry. */
.primary-nav > ul > li.has-sub > a { padding-right: var(--sp-1); }
.primary-nav > ul > li.has-sub > button.sub-toggle { padding-left: 0; }
.primary-nav > ul > li.has-sub:hover > a,
.primary-nav > ul > li.has-sub:hover > button.sub-toggle,
.primary-nav > ul > li.has-sub:focus-within > a,
.primary-nav > ul > li.has-sub:focus-within > button.sub-toggle {
  color: var(--c-claret); border-bottom-color: var(--c-claret);
}
/* Home shows as icon only on desktop (the logo already links home too);
   on mobile it shows "🏠 Αρχική". Caret stays inline, right of each label. */
@media (min-width: 980px) {
  .nav-home-label { display: none; }
}
.primary-nav .submenu {
  list-style: none; padding: var(--sp-2); margin: 0;
  position: absolute; left: 0; top: 100%;
  min-width: 16rem;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-claret);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  display: none;
  z-index: 200;
}
.primary-nav .submenu li { margin: 0; }
.primary-nav .submenu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.primary-nav .submenu a:hover, .primary-nav .submenu a:focus { background: var(--c-cream-deep); color: var(--c-claret); }
.primary-nav .has-sub:hover > .submenu,
.primary-nav .has-sub:focus-within > .submenu,
.primary-nav .has-sub[aria-expanded="true"] > .submenu { display: block; }

/* Nested submenu — has-sub items in the dropdown.
   On desktop: hover/focus opens submenu — carets are visual noise → hide them.
   On mobile (handled in media query below): show carets/buttons as toggles. */
.primary-nav .submenu .has-sub {
  display: flex;
  align-items: stretch;
  position: relative;     /* anchor for nested submenu */
}
.primary-nav .submenu .has-sub > a {
  flex: 1 1 auto; min-width: 0;
}
/* Single-button case: render the button to look exactly like a regular anchor */
.primary-nav .submenu .has-sub > button {
  flex: 1 1 auto;
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-ink); font: inherit; font-weight: 500;
  border-radius: var(--radius-sm);
  text-align: left;
}
.primary-nav .submenu .has-sub > button:hover,
.primary-nav .submenu .has-sub > button:focus {
  background: var(--c-cream-deep); color: var(--c-claret);
}
/* Hide carets / sub-toggle buttons on desktop (hover opens submenu naturally) */
.primary-nav .submenu .has-sub > button .caret,
.primary-nav .submenu .has-sub > button.sub-toggle { display: none; }
/* Nested submenu (flyout) — NOT in document flow. Opens to the LEFT of its parent
   dropdown: the menu is right-aligned, so the parent dropdowns (Ανακοινώσεις,
   Δημοσιεύσεις) sit right-of-centre and a rightward flyout (esp. the 9-item
   Νομολογία list) would overflow the viewport. right:100% anchors the flyout's
   right edge to the dropdown's left edge → it grows leftward, always on-screen. */
.primary-nav .submenu .submenu {
  position: absolute; right: 100%; left: auto; top: -1px;
  border-top: 3px solid var(--c-claret);
  flex: none;
}
@media (max-width: 979px) {
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-paper);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    padding: var(--sp-3);
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav > ul { flex-direction: column; }
  .primary-nav > ul > li { width: 100%; }
  .primary-nav > ul > li > a,
  .primary-nav > ul > li > button {
    width: 100%; justify-content: space-between;
    border-bottom: 1px solid var(--c-border-soft);
    padding: var(--sp-3) var(--sp-2);
  }
  /* Home (icon + "Αρχική"): keep them grouped left, not split apart */
  .primary-nav > ul > li:not(.has-sub) > a { justify-content: flex-start; gap: var(--sp-2); }
  /* Top-level item that is a link + a separate caret toggle (Ανακοινώσεις): both
     children would otherwise be width:100% and stack on two rows. Lay them on one
     row — link fills, caret sits right — with the submenu wrapping to the next row.
     Single-button parents (Προφίλ, Δημοσιεύσεις) keep their full-width button. */
  .primary-nav > ul > li.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav > ul > li.has-sub > a { flex: 1 1 auto; width: auto; }
  .primary-nav > ul > li.has-sub > button.sub-toggle {
    flex: 0 0 auto; width: auto; padding: var(--sp-3) var(--sp-2);
  }
  .primary-nav > ul > li.has-sub > .submenu { flex: 1 0 100%; }
  .primary-nav .submenu {
    position: static; box-shadow: none; border: 0; border-top: 0;
    padding-left: var(--sp-5);
    background: var(--c-cream-deep);
    border-radius: 0;
    min-width: 0;
  }
  /* Nested submenu must flow in the accordion on mobile. The desktop rule sets it
     position:absolute (right:100% flyout) at higher specificity than the generic
     mobile `.submenu{position:static}`, so reset it explicitly here. */
  .primary-nav .submenu .submenu { position: static; right: auto; left: auto; padding-left: var(--sp-5); }
  /* A has-sub row inside a dropdown (e.g. Επικαιρότητα, Νομολογία) is display:flex
     so its label/caret share a row; let the nested submenu WRAP to its own full
     row below instead of sitting beside the label as a flex sibling. */
  .primary-nav .submenu .has-sub { flex-wrap: wrap; }
  .primary-nav .submenu .has-sub > .submenu { flex: 1 0 100%; }
  .primary-nav .has-sub.is-open > .submenu { display: block; }
  /* On mobile, show toggle buttons so user can tap to expand */
  .primary-nav .submenu .has-sub > button .caret,
  .primary-nav .submenu .has-sub > button.sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .primary-nav .submenu .has-sub > button.sub-toggle {
    flex: 0 0 auto; padding: var(--sp-2) var(--sp-3);
    background: transparent; border: 0; color: var(--c-ink); font: inherit; cursor: pointer;
  }
  .primary-nav .submenu .has-sub > button { justify-content: space-between; display: flex; }
}

/* ============ Hero ============ */
.hero {
  background: linear-gradient(180deg, var(--c-cream-deep) 0%, var(--c-cream) 100%);
  padding: var(--sp-9) 0 var(--sp-8);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at top right, rgba(86,88,15,.08), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(182,136,66,.06), transparent 55%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: var(--container-narrow); }
.hero .eyebrow {
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-claret);
  margin-bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.hero .eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--c-claret); display: inline-block;
}
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 42rem;
  margin-bottom: var(--sp-6);
}
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .95rem;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--c-claret);
  background: var(--c-claret);
  color: var(--c-cream);
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.btn:hover { background: var(--c-claret-dark); border-color: var(--c-claret-dark); color: var(--c-cream); }
.btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--c-claret);
}
.btn--ghost:hover { background: var(--c-claret); color: var(--c-cream); }
.btn--ink {
  background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream);
}
.btn--ink:hover { background: var(--c-ink-soft); border-color: var(--c-ink-soft); }

/* ============ Page header (interior) ============ */
.page-header {
  background: linear-gradient(180deg, var(--c-cream-deep), var(--c-cream));
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-7) 0 var(--sp-5);
}
.page-header h1 { margin-bottom: var(--sp-3); }
.page-header h1 sup { font-size: 0.55em; vertical-align: super; line-height: 0; }
.page-header .lede { color: var(--c-ink-soft); max-width: 48rem; font-size: 1.1rem; }

/* ============ Breadcrumbs ============ */
.breadcrumbs {
  font-family: var(--ff-ui);
  font-size: .85rem;
  padding: var(--sp-3) 0;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-border-soft);
}
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
}
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before {
  content: "›"; color: var(--c-text-faint); padding: 0 var(--sp-1);
}
.breadcrumbs a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-claret); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* ============ Article layout ============ */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding: var(--sp-7) 0 var(--sp-9);
}
@media (min-width: 980px) {
  .layout { grid-template-columns: 1fr 18rem; }
}
.layout--narrow .article { max-width: 44rem; }
/* WCAG 1.4.10 Reflow: let grid items shrink to their track instead of forcing
   horizontal scroll at narrow widths (long words/links no longer overflow). */
.layout > * { min-width: 0; }

/* WCAG 2.2 AA 2.5.8 Target Size — ensure secondary text links are at least 24px
   tall to tap; primary mobile nav links get a comfortable 44px. */
.breadcrumbs a, .utility-bar a, .footer-col a, .footer-bottom a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.widget li a { min-height: 24px; }
@media (max-width: 979px) {
  .primary-nav .submenu a { min-height: 44px; display: flex; align-items: center; }
  .primary-nav > ul > li > a,
  .primary-nav > ul > li > button { min-height: 44px; }
}

.article {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .article { padding: var(--sp-8) var(--sp-7); }
}
.article > :first-child { margin-top: 0; }
.article > :last-child { margin-bottom: 0; }
.article h2 { margin-top: var(--sp-6); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border-soft); }
.article h3 { margin-top: var(--sp-5); color: var(--c-claret); }

.lede-text {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  font-style: italic;
  border-left: 3px solid var(--c-gold);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.article-date {
  font-family: var(--ff-ui);
  font-size: .82rem;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-5);
}
.item-hero {
  margin: 0 0 var(--sp-6);
  text-align: center;
}
.item-hero img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ============ Sidebar ============ */
.sidebar { display: grid; gap: var(--sp-5); align-content: start; }
.widget {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.widget h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-claret);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-claret);
  font-family: var(--ff-ui);
  font-weight: 700;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--c-border-soft); }
.widget li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.widget li a { color: var(--c-ink); text-decoration: none; font-weight: 600; line-height: 1.35; display: block; }
.widget li a:hover { color: var(--c-claret); }
.widget li .meta { display: block; font-family: var(--ff-ui); font-size: .78rem; color: var(--c-text-faint); margin-top: 2px; }
.widget .excerpt { font-size: .92rem; color: var(--c-text-muted); margin: var(--sp-2) 0 0; line-height: 1.45; }
.widget .more { font-family: var(--ff-ui); font-size: .85rem; color: var(--c-claret); font-weight: 600; }

/* ============ Cards & lists ============ */
.card-list { display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .card-list--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .card-list--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-claret); }
.card .kicker {
  font-family: var(--ff-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-claret);
  margin-bottom: var(--sp-2);
}
.card h3 { margin-bottom: var(--sp-3); font-size: 1.18rem; }
.card h3 a { color: var(--c-ink); text-decoration: none; }
.card h3 a:hover { color: var(--c-claret); }
.card p { color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.card .more {
  font-family: var(--ff-ui); font-weight: 600; font-size: .9rem; color: var(--c-claret);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.card .more:hover { color: var(--c-claret-dark); }
.card .more::after { content: "→"; transition: transform var(--t); }
.card .more:hover::after { transform: translateX(4px); }

/* List of legal documents / items */
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.doc-list > li {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--t), box-shadow var(--t);
  margin: 0;
}
.doc-list > li:hover { border-color: var(--c-claret); box-shadow: var(--shadow-sm); }
.doc-list h2, .doc-list h3 { font-size: 1.1rem; margin: 0 0 var(--sp-2); font-weight: 600; }
.doc-list .doc-date { font-family: var(--ff-ui); font-size: .82rem; color: var(--c-text-faint); margin: 0 0 var(--sp-2); }
.doc-list h2 a, .doc-list h3 a { color: var(--c-ink); text-decoration: none; }
.doc-list h2 a:hover, .doc-list h3 a:hover { color: var(--c-claret); text-decoration: underline; text-decoration-color: var(--c-gold); }
.doc-list .summary { color: var(--c-text-muted); margin: 0; font-size: .98rem; line-height: 1.55; }
.doc-list .badge {
  display: inline-block;
  font-family: var(--ff-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px;
  background: var(--c-cream-deep); color: var(--c-claret);
  margin-right: var(--sp-2);
}
.doc-list .meta { font-family: var(--ff-ui); font-size: .82rem; color: var(--c-text-faint); margin-top: var(--sp-2); }

/* ============ Pillars (homepage section grid) ============ */
.pillars {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--c-claret); color: var(--c-ink); }
.pillar .pillar-icon {
  width: 44px; height: 44px;
  background: var(--c-cream-deep);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--c-claret);
  margin-bottom: var(--sp-4);
}
.pillar h3 { margin: 0 0 var(--sp-2); font-size: 1.1rem; }
.pillar p { margin: 0; color: var(--c-text-muted); font-size: .95rem; flex: 1; }

/* ============ Section ============ */
.section {
  padding: var(--sp-9) 0;
}
.section--alt {
  background: var(--c-cream-deep);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.section-head { margin-bottom: var(--sp-6); }
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--ff-ui); font-weight: 700; font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-claret);
  margin-bottom: var(--sp-3);
}
.section-head h2 { margin: 0 0 var(--sp-3); }
.section-head p { color: var(--c-text-muted); max-width: 50rem; margin: 0; }

/* ============ Contact / definition list ============ */
.contact-card {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-claret);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
}
.contact-card dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); margin: 0; }
.contact-card dt {
  font-family: var(--ff-ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-claret); align-self: start; padding-top: 3px;
}
.contact-card dd { margin: 0; }
.contact-card a { color: var(--c-ink); }
.contact-card a:hover { color: var(--c-claret); }

/* ============ Tables ============ */
table { border-collapse: collapse; width: 100%; margin: var(--sp-5) 0; }
caption { caption-side: bottom; font-size: .9rem; color: var(--c-text-muted); padding-top: var(--sp-2); text-align: left; }
th, td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-border); }
th { font-family: var(--ff-ui); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink); background: var(--c-cream-deep); }
tbody tr:hover { background: var(--c-cream); }

/* ============ Members list (board) ============ */
.members {
  list-style: none; padding: 0; margin: var(--sp-4) 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .members { grid-template-columns: 1fr 1fr; } }
.members li {
  background: var(--c-cream-deep);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-gold);
  margin: 0;
}
.members .role { display: block; font-family: var(--ff-ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-claret); font-weight: 700; margin-bottom: 2px; }
.members .name { font-weight: 600; color: var(--c-ink); }
.members .desc { display: block; font-size: .9rem; color: var(--c-text-muted); margin-top: 2px; }

/* ============ Links page sections ============ */
.linkgroup { margin-bottom: var(--sp-7); }
.linkgroup h3 {
  font-size: 1.15rem; color: var(--c-claret);
  border-bottom: 2px solid var(--c-claret); padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.linkgroup ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 700px) { .linkgroup ul { grid-template-columns: 1fr 1fr; } }
.linkgroup li { margin: 0; }
.linkgroup li a {
  display: block; padding: var(--sp-3) var(--sp-4);
  background: var(--c-cream-deep);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 500;
  transition: background var(--t), transform var(--t-fast);
}
.linkgroup li a:hover { background: var(--c-claret); color: var(--c-cream); transform: translateX(4px); }

/* ============ Newsletter ============ */
.newsletter {
  background: var(--c-cream-deep);
  border-top: 3px solid var(--c-gold);
}
.newsletter-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-6) var(--sp-8);
  padding-block: var(--sp-8);   /* keep .container horizontal padding intact */
}
.newsletter-copy { flex: 1 1 19rem; }
.newsletter-copy h2 { margin: var(--sp-1) 0 var(--sp-2); }
.newsletter-copy p { margin: 0; color: var(--c-text-muted); max-width: 34rem; }
.newsletter-form { flex: 1 1 21rem; max-width: 30rem; }
.nl-row { display: flex; gap: var(--sp-3); }
.nl-row input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-paper); color: var(--c-text); font: inherit;
}
.nl-row input[type="email"]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.nl-row .btn { white-space: nowrap; flex: 0 0 auto; }
.nl-consent {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin-top: var(--sp-4); font-size: .85rem; line-height: 1.45;
  color: var(--c-text-muted);
}
.nl-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; accent-color: var(--c-claret); }
.nl-consent a { color: var(--c-link); }
.nl-msg { margin: var(--sp-2) 0 0; font-size: .9rem; min-height: 1.2em; font-weight: 600; }
.nl-msg.is-ok  { color: var(--c-success); }
.nl-msg.is-err { color: var(--c-danger); }
@media (max-width: 640px) {
  .nl-row { flex-wrap: wrap; gap: var(--sp-4); }   /* clearer vertical gap when stacked */
  .nl-row .btn { width: 100%; }
}

/* ============ Footer ============ */
.site-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: var(--sp-8) 0 var(--sp-5);
  /* No margin-top: the newsletter band sits flush above the footer site-wide.
     The footer's own top padding (sp-8) supplies the breathing room — a
     margin here would leave a stray page-background strip between the
     cream newsletter band and the dark footer. */
}
.site-footer a { color: var(--c-cream); }
.site-footer a:hover { color: var(--c-gold-soft); }
.footer-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-col h2 {
  color: var(--c-cream);
  font-family: var(--ff-ui);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(250,247,242,.18);
}
.footer-col p { color: rgba(250,247,242,.78); font-size: .95rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { text-decoration: none; font-size: .95rem; color: rgba(250,247,242,.85); }
.footer-col a:hover { color: var(--c-gold-soft); text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(250,247,242,.15);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  font-family: var(--ff-ui);
  font-size: .85rem;
  color: rgba(250,247,242,.7);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  align-items: center;
}
.footer-meta {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.footer-meta .sep { opacity: .5; }
.footer-meta .cookie-note { opacity: .75; }
@media (max-width: 760px) {
  .footer-meta { flex-basis: 100%; }
}

/* ============ Pagination ============ */
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center;
  font-family: var(--ff-ui);
  margin: var(--sp-7) 0 0;
}
.pagination a, .pagination span {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .9rem;
  color: var(--c-ink);
  background: var(--c-paper);
}
.pagination a:hover { background: var(--c-claret); color: var(--c-cream); border-color: var(--c-claret); }
.pagination .current { background: var(--c-claret); color: var(--c-cream); border-color: var(--c-claret); font-weight: 700; }

/* ============ Conference / event ============ */
.conference {
  background: linear-gradient(135deg, var(--c-claret), var(--c-claret-dark));
  color: var(--c-cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin: var(--sp-5) 0;
}
.conference h3 { color: var(--c-cream); margin-bottom: var(--sp-3); font-size: 1.4rem; }
.conference .when { font-family: var(--ff-ui); letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; opacity: .85; }
.conference p { color: rgba(250,247,242,.92); }
.conference a { color: var(--c-gold-soft); }

/* ============ Notice (404 etc.) ============ */
.notice-page {
  text-align: center;
  padding: var(--sp-10) 0;
}
.notice-page .code {
  font-family: var(--ff-serif);
  font-size: clamp(5rem, 4rem + 5vw, 9rem);
  color: var(--c-claret);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.04em;
}

/* ============ Form ============ */
form .row { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 700px) { form .row.two { grid-template-columns: 1fr 1fr; } }
label {
  display: block;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
label .req { color: var(--c-claret); margin-left: 2px; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  padding: var(--sp-3);
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-claret);
  box-shadow: 0 0 0 3px rgba(86,88,15,.18);
}
textarea { min-height: 8rem; resize: vertical; }
.help { font-size: .85rem; color: var(--c-text-muted); margin-top: var(--sp-2); }

/* ============ Utility ============ */
.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }

/* ============ Print ============ */
@media print {
  .site-header, .site-footer, .utility-bar, .breadcrumbs, .nav-toggle, .primary-nav, .skip-link, .sidebar { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  .article { border: 0; box-shadow: none; padding: 0; }
  a { color: black; text-decoration: underline; }
  .article a[href]::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
}

/* ============ Dark mode (respects system pref) ============ */
@media (prefers-color-scheme: dark) {
  :root {
    --c-cream:       #15171B;
    --c-cream-deep:  #1C1F25;
    --c-paper:       #1F232B;
    --c-text:        #E8E4DC;
    --c-text-muted:  #B0ACA3;
    --c-text-faint:  #8A867E;
    --c-ink:         #F2E8DC;
    --c-ink-soft:    #D7CFC1;
    --c-border:      #2F343D;
    --c-border-soft: #262A32;
    --c-claret:      #B7B642;
    --c-claret-dark: #9A9A33;
    --c-claret-light:#CFCD6E;
    --c-gold:        #D6D166;
    --c-gold-soft:   #E6E18A;
    --c-link:        #CFCD6E;
    --c-link-hover:  #E2DF80;
  }
  body { color-scheme: dark; }
  .hero { background: linear-gradient(180deg, #1C1F25, var(--c-cream)); }
  .conference { background: linear-gradient(135deg, #2E2E14, #1C1C0B); }
}


/* ---- Large viewport scaling (1920px+, 2560px+, 3200px+) ---- */
@media (min-width: 1920px) {
  :root {
    font-size: 18px;
    --container: 78rem;       /* ~1404px */
    --container-wide: 90rem;  /* ~1620px */
  }
}
@media (min-width: 2560px) {
  :root {
    font-size: 20px;
    --container: 84rem;       /* ~1680px */
    --container-wide: 96rem;  /* ~1920px */
  }
}
@media (min-width: 3200px) {
  :root {
    font-size: 22px;
    --container: 88rem;       /* ~1936px */
    --container-wide: 104rem; /* ~2288px */
  }
}