/* Salomone Sansone
   Navy leads, Maltese limestone is the neutral, orange is the accent.
   Headings: EB Garamond (close to the logo's serif). Text: Inter.
   Fonts: @fontsource-variable's latin files, plus small Latin Extended-A subsets
   (U+0100-017F) for the Maltese letters. A changed font gets a new file name,
   because /assets/fonts/ is cached as immutable (vercel.json). */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-wght-normal.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; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-ext-a-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-017F; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-wght-italic.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; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond-latin-ext-a-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-017F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-normal.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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-a-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-017F; }

/* ------------------------------------------------------------ tokens */
:root {
  --navy-950: #0C1127;
  --navy-900: #141A33;
  --navy-800: #1D2549;
  --navy-700: #27305C;
  --navy: #313C6C;            /* the logo navy */
  --navy-400: #5A6696;
  --navy-300: #98A1C4;
  --navy-200: #C8CDE2;
  --navy-100: #E6E8F2;
  --stone-50: #F7F3EC;        /* Maltese limestone, very pale */
  --stone-100: #EFE7DA;
  --stone-300: #D8C3A0;
  /* the stone tablet by the door (css/firm.css) and on /vacancies/: its grain is a tile made by
     tools/build_tablet.py, and --tablet-stone is that tile's mean colour (change them together) */
  --tablet-stone: #E8E2D2;
  --tablet-grain: url("/assets/img/firm-tablet.webp");
  --tablet-lip: rgba(255, 253, 247, .92);  /* the lit lower/right face and lip of a cut */
  --orange: #E5602A;          /* accent on navy, and for lines and dots */
  --orange-btn: #C24A1C;      /* buttons with white text (4.9:1) */
  --orange-ink: #B5441A;      /* orange text on light backgrounds (5:1) */
  --ink: #141A33;
  --text: #3F4766;
  --muted: #5A6696;
  --line: rgba(20, 26, 51, .12);
  --line-light: rgba(255, 255, 255, .14);

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* section headings on inner pages (vacancies, advocate profiles, "More news" under a post) */
  --h2-inner: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 84px;
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 959px) { :root { --header-h: 68px; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Sections land flush under the header (68px on phones, 72px once scrolled on desktop);
   their own top padding keeps the eyebrow clear. */
main > section[id] { scroll-margin-top: -16px; }
@media (min-width: 960px) { main > section[id] { scroll-margin-top: -28px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 400 1rem/1.65 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* The intro doesn't lock the page's scrolling: with classic scrollbars (Windows,
   Linux) the lock would take the scrollbar away, and giving it back as the ground
   lifts would move the whole hero sideways. A scroll, wheel, touch or key ends
   the intro instead (src/intro.js). Meanwhile the scrollbar wears the night
   ground's navy rather than a pale strip down its edge. */
html.intro-on:has(.intro[data-scheme="night"]) { scrollbar-color: rgba(255, 255, 255, .3) var(--navy-900); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
abbr[title] { text-decoration: none; }
::selection { background: rgba(229, 96, 42, .22); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(84px, 11vw, 152px); position: relative; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; background: #fff; color: var(--ink); font-weight: 600; border-radius: var(--radius);
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.icon { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------ type helpers */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  font: 600 .75rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
.eyebrow .dot { display: none; }
.eyebrow-light { color: var(--navy-200); }

h2 { font-size: clamp(2.1rem, 1.25rem + 2.6vw, 3.55rem); line-height: 1.06; }
.lead { margin-top: 24px; font-size: clamp(1.06rem, 1rem + .3vw, 1.19rem); line-height: 1.62; max-width: 36em; }
.note { margin-top: 20px; font-size: .95rem; color: var(--muted); max-width: 34em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  font: 600 .95rem/1.3 var(--sans); color: var(--navy); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-block: 12px 4px; transition: background-size .45s var(--ease);
}
.link-arrow .icon { color: var(--orange-ink); transition: transform .35s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  border-radius: var(--radius); border: 0; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange-btn); color: #fff; }
.btn-primary:hover { background: #AE4118; }
.btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px #fff; }

/* ------------------------------------------------------------ header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  color: #fff;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, height .4s var(--ease), opacity .6s ease;
}
.site-header.is-scrolled {
  color: var(--navy);
  /* near-opaque, so it stays white over the navy sections instead of turning grey */
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
@media (min-width: 960px) { .site-header.is-scrolled { height: 72px; } }
.header-inner { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: block; color: inherit; flex: none; }
.brand .logo { width: clamp(214px, 20vw, 282px); height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 34px; list-style: none; }
.nav a {
  position: relative; display: block; padding: 14.5px 0;   /* 44px tall: the desktop header is also on touch tablets */
  font: 500 .94rem/1 var(--sans); text-decoration: none; color: inherit; opacity: .92;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6.5px; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* the section you are in (News, on the news pages and posts) keeps its rule */
.nav a[aria-current] { opacity: 1; }
.nav a[aria-current]::after { transform: none; }
.btn-header {
  min-height: 44px; padding: 0 20px; font-size: .9rem; color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
}
.btn-header:hover { box-shadow: inset 0 0 0 1px currentColor; }
.site-header.is-scrolled .btn-header { background: var(--navy); color: #fff; box-shadow: none; }
.site-header.is-scrolled .btn-header:hover { background: var(--navy-900); }

.menu-btn {
  display: none; margin-left: auto; position: relative;
  min-height: 44px; padding: 0 2px 0 0; gap: 12px; align-items: center;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 600 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.menu-btn-lines { position: relative; width: 22px; height: 10px; }
.menu-btn-lines::before, .menu-btn-lines::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu-btn-lines::before { top: 0; }
.menu-btn-lines::after { top: 8.5px; }
.menu-btn[aria-expanded="true"] .menu-btn-lines::before { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-lines::after { top: 4.25px; transform: rotate(-45deg); }

/* Language switcher (partials/lang-switch.njk): three small flags at the end of
   the header (src/assets/flags/*.svg, vector so they stay sharp). The current
   language is full strength with an orange rule under it; the others are dimmed
   until hovered. On phones it is in the menu instead, flag + name. */
.lang ul { display: flex; align-items: center; list-style: none; }
.lang li { display: flex; align-items: center; }
.lang a {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 11.5px;   /* 44px square with the flag */
  font: 500 1rem/1 var(--sans); text-decoration: none; color: var(--navy-300); transition: color .3s ease;
}
.lang-flag {
  display: block; flex: none; width: 21px; height: 14px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); opacity: .8;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.lang a:hover .lang-flag, .lang a:focus-visible .lang-flag, .lang a[aria-current] .lang-flag { opacity: 1; }
.lang a:hover .lang-flag { transform: translateY(-1px); }
.lang a:hover, .lang a[aria-current] { color: inherit; }
.lang a[aria-current]::after {
  content: ""; position: absolute; left: 11.5px; width: 21px; bottom: 10px; height: 1px; background: var(--orange);
}
.site-header .lang { margin-left: -22.5px; margin-right: -12.5px; }
.site-header.is-scrolled .lang-flag { box-shadow: 0 0 0 1px rgba(20, 26, 51, .18); }
/* laptops: a little less air between the header items, so the switcher fits beside
   the longer Maltese and Italian labels */
@media (min-width: 960px) and (max-width: 1199px) {
  .header-inner { gap: 28px; }
  .nav ul { gap: 24px; }
  .site-header .lang { margin-left: -16.5px; }
}
/* the narrowest laptops: the 44px flags and the longer Maltese labels need a little more
   room (also with a 15-17px classic scrollbar) */
@media (min-width: 960px) and (max-width: 1023px) {
  .header-inner { gap: 24px; }
  .nav ul { gap: 20px; }
}

@media (max-width: 959px) {
  .nav, .btn-header { display: none; }
  .header-inner { gap: 16px; }
  .menu-btn { display: inline-flex; }
  .site-header .lang { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--navy-900); color: #fff;
  padding-top: calc(var(--header-h) + 24px); overflow-y: auto;
  scroll-padding-top: calc(var(--header-h) + 8px);
  opacity: 0; transition: opacity .35s ease;
}
.menu.is-open { opacity: 1; }
.menu-inner { display: flex; flex-direction: column; min-height: calc(100% - 24px); padding-bottom: 40px; }
.menu-links { list-style: none; }
.menu-links li { border-bottom: 1px solid var(--line-light); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.menu.is-open .menu-links li { opacity: 1; transform: none; }
.menu-links a { display: block; padding: 18px 0; font: 500 2.2rem/1.1 var(--serif); color: #fff; text-decoration: none; }
/* in the menu the switcher gives the full names, English · Malti · Italiano */
.menu .lang { margin-top: 28px; opacity: 0; transition: opacity .5s var(--ease) .3s; }
.menu.is-open .lang { opacity: 1; }
.menu .lang ul { flex-wrap: wrap; }
.menu .lang ul { gap: 4px 18px; }
@media (max-width: 359px) { .menu .lang ul { gap: 4px 12px; } }   /* English, Malti and Italiano share one row at 320px */
.menu .lang a { padding: 0 2px; }
.menu .lang li:first-child a { padding-left: 0; }
.menu .lang a[aria-current]::after { left: 0; right: 0; width: auto; bottom: 8px; }
.menu .lang li:first-child a[aria-current]::after { left: 0; }
.menu-contact { margin-top: auto; padding-top: 40px; display: grid; gap: 8px; color: var(--navy-200); font-size: .95rem; }
.menu-contact a { color: #fff; text-decoration: none; }
body.menu-open { overflow: hidden; }
.no-js .site-header, .js.reveal-all .site-header { position: absolute; background: var(--navy-900); }
/* No JS on phones and tablets: the menu button can't open the sheet, so show the nav as a row under the logo */
@media (max-width: 959px) {
  .no-js .menu-btn, .js.reveal-all .menu-btn { display: none; }
  .no-js .site-header, .js.reveal-all .site-header { height: auto; padding-block: 12px; background: transparent; }
  .no-js .header-inner, .js.reveal-all .header-inner { flex-wrap: wrap; row-gap: 6px; }
  .no-js .nav, .js.reveal-all .nav { display: block; margin-left: 0; width: 100%; }
  .no-js .nav ul, .js.reveal-all .nav ul { gap: 0 22px; flex-wrap: wrap; }
  .no-js .nav a, .js.reveal-all .nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .no-js .hero.hs, .no-js .page-hero, .js.reveal-all .hero.hs, .js.reveal-all .page-hero { padding-top: calc(var(--header-h) + 84px); }
  /* the language switcher sits at the end of the logo's row */
  .no-js .site-header .lang, .js.reveal-all .site-header .lang { display: block; order: 1; margin: 0 -12.5px 0 auto; }
  .no-js .nav, .js.reveal-all .nav { order: 2; }
}
/* the four links stay on one row down to 320px */
@media (max-width: 379px) {
  .no-js .nav ul, .js.reveal-all .nav ul { gap: 0 14px; }
  .no-js .nav a, .js.reveal-all .nav a { font-size: .82rem; }
  /* no room beside the logo: the switcher takes its own row under the links */
  .no-js .site-header .lang, .js.reveal-all .site-header .lang { order: 3; width: 100%; margin: -6px 0 0 -12.5px; }
  .no-js .hero.hs, .no-js .page-hero, .js.reveal-all .hero.hs, .js.reveal-all .page-hero { padding-top: calc(var(--header-h) + 122px); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 359px) {
  .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { min-width: 44px; justify-content: flex-end; }
}
/* navy, not transparent, so menu links that scroll up under the header don't run through the logo */
body.menu-open .site-header { background: var(--navy-900); color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* phone landscape: all five links fit on a 390px-tall screen */
@media (max-height: 520px) {
  .menu { padding-top: calc(var(--header-h) + 8px); }
  .menu-links a { padding: 10px 0; font-size: 1.6rem; }
}

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(1100px 620px at 88% 8%, rgba(70, 82, 138, .42), transparent 62%),
    radial-gradient(800px 480px at 4% 96%, rgba(229, 96, 42, .07), transparent 60%),
    var(--navy-900);
  color: var(--navy-200);
  padding-top: calc(var(--header-h) + clamp(40px, 7vh, 88px));
}
/* six faint verticals: the portico of the Courts of Justice */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / 6 - 1px), rgba(255, 255, 255, .035) calc(100% / 6 - 1px) calc(100% / 6));
}
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(40px, 6vw, 104px); align-items: center; }
.hero-title { color: #fff; font-size: clamp(2.7rem, 1.1rem + 4.6vw, 5.5rem); line-height: .99; letter-spacing: -.022em; }
.hero-title .line { display: block; }
.hero-title em { font-style: italic; color: var(--orange); font-weight: 450; }
.hero-lead { margin-top: 30px; max-width: 33em; font-size: clamp(1.05rem, .98rem + .3vw, 1.19rem); line-height: 1.62; }
.hero-lead a { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(56px, 8vw, 104px) 0 0; border-top: 1px solid var(--line-light);
}
.fact { padding: 28px 28px 40px 0; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line-light); }
.fact dt { font: 500 1.6rem/1.15 var(--serif); color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.fact dd { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--navy-300); text-wrap: pretty; }

/* ------------------------------------------------------------ section heads (news) */
.section-head { max-width: 44rem; margin-bottom: clamp(44px, 6vw, 72px); }
.section-head-split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.section-head-split .link-arrow { margin-top: 0; }
.section-head-split .link-arrow, .prose-back .link-arrow { min-height: 44px; }
/* ------------------------------------------------------------ news */
.news { background: var(--stone-50); }
.news-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-grid > li { display: flex; }
.news-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-height: 300px;
  padding: 32px 30px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s ease;
}
.news-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 28px 48px -28px rgba(20, 26, 51, .38); }
.news-meta { display: flex; align-items: center; gap: 14px; font-size: .86rem; color: var(--muted); }
.tag { padding: 5px 9px 4px; border-radius: 2px; font: 600 .68rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tag-event { background: #FBE7DE; color: var(--orange-ink); }
.tag-news { background: var(--navy-100); color: var(--navy); }
.news-note { margin-top: 14px; }
.news-card h3, .news-card-title { margin-top: 22px; font-size: 1.5rem; line-height: 1.2; }
.news-card h3 a, .news-card-title a { text-decoration: none; }
.news-card h3 a::after, .news-card-title a::after { content: ""; position: absolute; inset: 0; }
.news-card p:not(.news-meta) { margin-top: 12px; font-size: .95rem; }
.news-more { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 10px; font: 600 .88rem/1 var(--sans); color: var(--navy); }
.news-more .icon { color: var(--orange-ink); transition: transform .35s var(--ease); }
.news-card:hover .news-more .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ inner pages */
.page-hero {
  background:
    radial-gradient(1000px 520px at 90% 0%, rgba(70, 82, 138, .4), transparent 62%),
    var(--navy-900);
  color: var(--navy-200);
  padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(56px, 8vw, 96px);
}
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); line-height: 1.04; max-width: 20ch; }
.page-hero .hero-lead { max-width: 36em; }
.page-hero-tall { min-height: 70vh; display: flex; align-items: center; }
.nf-other { margin-top: 14px; font-size: .95rem; color: var(--navy-300); }
.hero-lead + .nf-other { margin-top: 28px; }
.prose { max-width: 46rem; }
/* where the wrap is itself the reading column (the privacy policy, layouts/page.njk):
   46rem wide, on the wrap's left edge with the title, rather than centred in it */
.wrap.prose { margin-inline: max(var(--gutter), (100% - var(--wrap)) / 2) auto; }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.78; }
.prose p + p { margin-top: 1.1em; }
.prose h2 { margin: 2em 0 .6em; font-size: 1.85rem; }
.prose ol, .prose ul { margin: 1em 0; padding-left: 1.3em; }
.prose a { color: var(--navy); text-underline-offset: 3px; }
.prose-back { margin-top: 48px; }
.news-page .news-grid { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--navy-950); color: var(--navy-200); padding: clamp(72px, 9vw, 104px) 0 32px; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: 48px; }
/* the colour sits on the link, so forced-colours modes recolour the logo with it */
.site-footer .brand { color: #fff; }
.footer-brand .logo { width: 250px; }
.footer-brand p { margin-top: 22px; max-width: 22em; color: var(--navy-300); text-wrap: balance; }
.footer-h { margin-bottom: 18px; font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-300); }
.site-footer address { font-style: normal; color: #fff; line-height: 1.7; }
.footer-link, .footer-list a { color: #fff; text-decoration: none; }
/* 44px tap targets throughout the footer */
.footer-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.footer-list { list-style: none; display: grid; gap: 0; }
.footer-list li { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; }
.footer-list a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; overflow-wrap: anywhere; }
/* a link that takes two or three lines (the longer Maltese and Italian office names) keeps
   some air above and below; one-line links stay 44px high */
.footer-list a { padding-block: 6px; }
.footer-list .icon { width: 14px; height: 14px; opacity: .6; }
/* the external links: inline, so when a label wraps (EUIPO in Maltese and Italian) the
   arrow follows its last word (the two share a nowrap span in footer.njk) instead of
   standing at the column's edge; one line is 44px */
.footer-list li > a[target] { display: inline-block; padding-block: 12px; line-height: 20px; }
.footer-list li > a[target] .icon { display: inline-block; vertical-align: -1px; margin-left: 6px; }
.footer-nowrap { white-space: nowrap; }
.footer-list a:hover, .footer-link:hover { color: var(--orange); }
.site-footer .muted { color: var(--navy-300); margin-right: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 24px; margin-top: 72px; padding-top: 12px; border-top: 1px solid var(--line-light); font-size: .84rem; color: var(--navy-300); }
.footer-bottom > p:first-child { padding-block: 12px; }
.footer-bottom-links { display: flex; gap: 0 24px; flex-wrap: wrap; }
.footer-bottom a { display: inline-block; padding-block: 12px; color: var(--navy-200); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1099px) {
  .news-grid, .news-page .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid > li:nth-child(3) { display: none; }
  .news-page .news-grid > li:nth-child(3) { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .news-grid, .news-page .news-grid { grid-template-columns: 1fr; }
  .news-grid > li:nth-child(3) { display: flex; }
  .news-card { min-height: 0; }
  /* the three facts stack as rows: two lines each instead of narrow columns */
  .facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact { padding: 16px 0 18px; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--line-light); }
  .fact dt { font-size: 1.3rem; }
  .fact dd { margin-top: 6px; font-size: .86rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ motion */
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); } }

.js:not(.intro-on) [data-hero] { animation: hero-in 1s var(--ease) both; animation-delay: calc(var(--i) * 75ms + 60ms); }

.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* a block revealed by keyboard focus (script.js) fades in at once, without its stagger delay */
.js [data-reveal]:focus-within { transition-delay: 0s; }
/* set by the head script when script.js never set up the reveals (blocked, failed or threw) */
.js.reveal-all [data-reveal] { opacity: 1; transform: none; }

/* the header arrives after the intro */
.js.intro-on .site-header { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ intro */
/* The logo drawn by hand (src/intro.js). Two colour schemes, set by data-scheme
   on the overlay (partials/intro.njk): "night", the navy hero's own ground with
   white ink (the logo as the header then shows it over the hero), and "paper",
   pale limestone with navy ink, kept only to compare. The overlay is its own
   layer, so the page underneath isn't repainted as the pen moves, and the fade
   at the end stays smooth. (No paper grain: WebKit renders a noise filter slowly
   enough to drop frames.) */
.intro {
  --ink: #313C6C;
  display: none; position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  place-items: center; padding-bottom: 3vh;   /* a touch above centre */
  color: var(--ink);
  background: var(--stone-50);
  will-change: opacity;
  forced-color-adjust: none;
  -webkit-tap-highlight-color: transparent;   /* a tap to skip shouldn't flash the screen */
}
/* The hero's ground (css/hero.css, --hs-ground, on its navy), which intro.js
   lays over the hero's box: when the overlay lifts, only the ink has gone. If a
   scroll skipped it, only that box stays navy, so the page below the hero shows
   at once rather than through a fading navy. */
.intro[data-scheme="night"] {
  --ink: #fff;
  background: var(--hs-ground, none), linear-gradient(var(--navy-900), var(--navy-900)) var(--navy-900);
  background-repeat: no-repeat;
}
.intro.is-scrolled[data-scheme="night"] { background-color: transparent; }
/* The first frames can show before intro.js has measured the hero, so until then
   the ground is laid over the hero's likely box: the whole screen on a desktop,
   about 1160 px tall on phones and tablets, and 880 px on short laptop screens. */
@media (max-width: 959px) { .intro[data-scheme="night"] { background-size: 100% max(100%, 1160px); } }
@media (min-width: 960px) and (max-height: 699px) { .intro[data-scheme="night"] { background-size: 100% max(100%, 880px); } }
html.intro-on .intro { display: grid; }
.intro.is-leaving { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
/* skipped: the ink goes first and fast, and the button at once, before the headline
   rises and the header's Menu button fades in where the button stood */
.intro.is-skipped .intro-logo { opacity: 0; transition: opacity .1s ease-out; }
.intro.is-skipped .intro-skip { opacity: 0; transition: none; }
.intro-logo { display: block; max-width: none; overflow: visible; }
.il-fill { fill: currentColor; opacity: 0; }
.il-line, .il-letter { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.il-line { fill: none; }
.il-letter { fill: currentColor; fill-opacity: 0; fill-rule: evenodd; }
.il-brush { fill: none; stroke: currentColor; }
.intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top));
  min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); color: inherit;
  font: 500 .78rem/1 var(--sans); letter-spacing: .06em; opacity: .86;   /* 6:1 on the paper, 12:1 on the night ground */
  transition: opacity .2s ease, border-color .2s ease;
}
.intro-skip:hover { opacity: 1; border-color: currentColor; }
/* The button goes as the drawing rewinds (nothing is left to skip), so it never
   crosses the header's Menu button or language flags fading in at the same place */
.intro.is-rewinding .intro-skip, .intro.is-leaving .intro-skip { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ forced colours */
@media (forced-colors: active) {
  /* each line gets its own high-contrast backing; at .99 it covers the descenders above */
  .hero-title { line-height: 1.15; }
  /* buttons are drawn with a background and inset shadows, which forced colours remove */
  .btn { border: 1px solid ButtonText; }
}

/* ------------------------------------------------------------ print */
@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header { position: absolute; color: var(--navy); }
  .skip-link, .menu, .menu-btn, .intro, .hs-pause { display: none !important; }
  /* browsers print without backgrounds by default: dark text on white instead of the navy hero */
  .page-hero { background: none; color: #000; padding: calc(var(--header-h) + 8px) 0 16px; }
  .page-hero h1, .page-hero .hero-lead, .page-hero .eyebrow, .post-event { color: #000; }
  .btn-primary { background: none; color: #000; box-shadow: inset 0 0 0 1px #000; }
  /* the navy footer would print as a near-empty last page */
  .site-footer { display: none; }
}