/* ==============================================================
   Leone — Component stylesheet
   Built on tokens.css.  All component classes are namespaced `.l-*`.
   Tokens stay `--l-*`.  Container queries (no @media) per §11.
   ============================================================== */

/* ── SAFE-AREA INSETS (iOS notch / Dynamic Island / home-bar) ──
   `viewport-fit=cover` in the <meta viewport> tag (set in inc/setup.php)
   exposes env(safe-area-inset-*) values on devices with non-rectangular
   displays.  These default to 0 on devices without insets, so the rules
   below are safe everywhere. */
:root {
  --l-safe-top:    env(safe-area-inset-top, 0px);
  --l-safe-bottom: env(safe-area-inset-bottom, 0px);
  --l-safe-left:   env(safe-area-inset-left, 0px);
  --l-safe-right:  env(safe-area-inset-right, 0px);
}

/* ── ROOT / CONTAINER QUERY ───────────────────────────────────── */
.wp-site-blocks,
.l-root,
.l-au-root,
.l-st-root {
  container-type: inline-size;
  container-name: page;
}

/* Tighter mobile rhythm — both page gutter and vertical section
   padding shrink. Target direct children of the page container
   so the variables cascade to every section (declaring on the
   container itself has no effect — @container rules style
   DESCENDANTS only, not the containment context itself).
   Container-type is NOT applied to body because that breaks
   position:sticky on the header — the sticky element gets clipped
   to the body's containment context. */
@container page (max-width: 700px) {
  .wp-site-blocks > *,
  .l-root > *,
  .l-au-root > *,
  .l-st-root > * {
    --l-page-x: var(--l-page-x-mobile);
    --l-section-y: 40px;
  }
}

html { box-sizing: border-box; overflow-x: clip; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--l-paper);
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: var(--l-text-base);
  line-height: var(--l-leading-normal);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── HEADINGS ─────────────────────────────────────────────────── */
.l-display {
  font-family: var(--l-font-display);
  font-weight: 500;
  line-height: var(--l-leading-tight);
  letter-spacing: var(--l-tracking-tight);
}
.l-editorial-italic {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--l-tracking-tight);
}
.l-longform {
  font-family: var(--l-font-longform);
  font-size: 19px;
  line-height: var(--l-leading-relaxed);
}
.l-mono {
  font-family: var(--l-font-mono);
  font-feature-settings: "ss01";
}

/* ── TAGS · EYEBROWS · PILLS ──────────────────────────────────── */
.l-tag {
  font-family: var(--l-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-2);
}
.l-tag--blue   { color: var(--l-blue-500); }
.l-tag--paper  { color: rgba(250, 248, 243, 0.7); }
.l-tag--gold   { color: var(--l-gold); }

.l-eyebrow {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
}

.l-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--l-radius-pill);
  background: rgba(14, 63, 140, 0.1);
  color: var(--l-blue-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.l-pill .l-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: currentColor;
}
.l-pill--on-dark {
  background: rgba(14, 63, 140, 0.2);
  color: var(--l-blue-light, #a8c4ec);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.l-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--l-radius-pill);
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--l-dur) var(--l-ease-out), color var(--l-dur) var(--l-ease-out), border-color var(--l-dur) var(--l-ease-out);
}
.l-cta--primary { background: var(--l-ink); color: var(--l-paper); }
.l-cta--primary:hover { background: var(--l-blue-500); color: var(--l-paper); }
.l-cta--blue    { background: var(--l-blue-500); color: var(--l-paper); }
.l-cta--blue:hover { background: var(--l-blue-600); }
.l-cta--gold {
  background: var(--l-gold);
  color: var(--l-blue-950);
}
.l-cta--gold:hover { background: var(--l-gold-lt); color: var(--l-blue-950); }
.l-cta--ghost {
  background: transparent;
  color: var(--l-ink);
  border-color: var(--l-ink);
}
.l-cta--ghost:hover { background: var(--l-ink); color: var(--l-paper); }
.l-cta--ghost-on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--l-paper);
  border-color: rgba(255, 255, 255, 0.4);
}
.l-cta--ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
}
.l-cta--sm { padding: 10px 18px; font-size: 13px; }
.l-cta--xs { padding: 7px 14px; font-size: 12px; }

/* Override the default WP button colour inside dark sections. */
.l-on-dark .wp-block-button__link {
  background: var(--l-blue-500);
  color: var(--l-paper);
}

/* ── LINKS ───────────────────────────────────────────────────── */
.l-link {
  color: var(--l-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--l-dur) var(--l-ease-out), border-color var(--l-dur) var(--l-ease-out);
}
.l-link:hover { color: var(--l-blue-500); }
.l-link--on-dark { color: var(--l-blue-light, #a8c4ec); }

/* ── RULES / HAIRLINES ─────────────────────────────────────── */
.l-rule        { border: 0; border-top: 1px solid var(--l-rule);   margin: 0; }
.l-rule--thin  { border-top-width: 0.5px; }
.l-rule--gold  { border-top-color: var(--l-gold); }

/* ── CARDS ──────────────────────────────────────────────────── */
.l-card {
  background: var(--l-paper);
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius);
  overflow: hidden;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-card:hover { transform: translateY(-2px); }
.l-card--lg { border-radius: var(--l-radius-lg); }

/* ── PAGE GUTTERS · SECTIONS ────────────────────────────────── */
.l-section {
  padding: var(--l-section-y) var(--l-page-x);
}
.l-section--sm { padding: var(--l-section-y-sm) var(--l-page-x); }

/* Tighten the gap between the dark hero and the first content section.
   88px after the hero feels like a "forehead" — drop to 40-48px so the
   chapter heading or first paragraph sits closer to the title above. */
main > .wp-block-group.l-section:first-child,
main > .l-section:first-child {
  padding-top: 40px;
}
.l-section--dark {
  background: var(--l-blue-950);
  color: var(--l-paper);
}
.l-section--blue-deep {
  background: var(--l-blue-800);
  color: var(--l-paper);
}
.l-section--panel { background: var(--l-paper-2); }
.l-section--ink   { background: var(--l-ink); color: var(--l-paper); }

.l-container {
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-measure {
  max-width: var(--l-text-max);
  margin-inline: auto;
}

/* Inside dark sections, swap text/rule tokens. */
.l-section--dark, .l-section--blue-deep, .l-section--ink, .l-on-dark {
  --l-ink:    var(--l-paper);
  --l-ink-2:  rgba(250, 248, 243, 0.78);
  --l-ink-3:  rgba(250, 248, 243, 0.55);
  --l-rule:   rgba(250, 248, 243, 0.18);
  --l-rule-2: rgba(250, 248, 243, 0.08);
}

/* ── NAV (header) ──────────────────────────────────────────── */
.l-nav {
  /* position: fixed — bulletproof against the iOS Safari +
     container-type interaction that can leave position: sticky
     drifting mid-scroll. Anchored to viewport, not to .wp-site-blocks
     (which carries container-type for the responsive layout
     queries). Solid paper background — no frosted-glass alpha so
     dark hero content can't bleed through. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--l-paper);
  border-bottom: 1px solid var(--l-rule);
  z-index: var(--l-z-nav);
  /* iOS notch / Dynamic Island clearance */
  padding-top: var(--l-safe-top);
}
/* Push the page below the fixed nav so the first hero starts
   cleanly underneath, not behind, the nav. Standard fixed-nav
   pattern — same as Apple News / NYT / every modern news app. */
body { padding-top: 64px; }
@supports (padding: max(0px)) {
  body { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}
/* WP admin bar behaviour by viewport width:
     · ≥783px: fixed 32px tall    — nav top: 32, body padding +32
     · 600–782px: fixed 46px tall  — nav top: 46, body padding +46
     · ≤599px: position: absolute, scrolls away — nav top: 0,
       body padding does NOT add the bar height (the bar takes its
       own space at the top of the document flow once, then scrolls
       out of view). This was the launch-blocker: previously the
       nav was being pushed down 46px on logged-in phones, but the
       admin bar wasn't actually pinned there, so body content
       scrolled visibly through the 46px gap above the header. */
body.admin-bar .l-nav { top: 32px; }
body.admin-bar { padding-top: calc(64px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .l-nav { top: 46px; }
  body.admin-bar { padding-top: calc(64px + 46px); }
}
@media screen and (max-width: 599px) {
  body.admin-bar .l-nav { top: 0; }
  body.admin-bar { padding-top: 64px; }
  @supports (padding: max(0px)) {
    body.admin-bar { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  }
}
.l-nav__inner {
  display: flex;
  align-items: center;
  padding: 18px max(var(--l-page-x), var(--l-safe-right)) 18px max(var(--l-page-x), var(--l-safe-left));
  gap: 48px;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--l-ink);
  text-decoration: none;
}
.l-nav__brand-text { display: flex; flex-direction: column; }
.l-nav__brand-name {
  font-family: var(--l-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--l-ink);
  white-space: nowrap;
}
/* "Leone" in the brand name lifts to bold weight as the visual
   anchor — the rest of the wordmark stays medium so "Leone"
   reads as the punctuation of the line. Applied consistently
   across header, mobile nav panel, footer brand. */
.l-nav__brand-name b {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.l-nav__brand-meta {
  font-family: var(--l-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-top: 4px;
}
/* A.D. 1863 is part of the brand name — kept on every viewport.
   The brand-text flex-column stacks it under the brand name so
   there's no crowding next to the burger. */

/* ── CREST ───────────────────────────────────────────────────
   Single-colour PNG mask, painted in `currentColor` so the crest
   adopts ink on paper surfaces and paper on dark surfaces with
   zero JS.  Sized in five steps to match the JSX mockups. */
.l-crest {
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  -webkit-mask: url('../images/crest.png') no-repeat center / contain;
          mask: url('../images/crest.png') no-repeat center / contain;
}
.l-crest--sm { width: 24px; }
.l-crest--md { width: 36px; }
.l-crest--lg { width: 56px; }
.l-crest--xl { width: 96px; }
.l-crest--2xl { width: 160px; }
.l-crest--gold { color: var(--l-gold-lt); }

/* ── DONATIONS page ────────────────────────────────────── */
.l-donate {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px var(--l-page-x);
  text-align: center;
}
.l-donate__eyebrow {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-blue-500);
  margin-bottom: 22px;
}
.l-donate__intro {
  font-family: var(--l-font-display);
  font-size: clamp(20px, 2.4cqi, 26px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--l-ink);
  margin: 0 auto 40px;
  max-width: 580px;
}
.l-donate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.l-donate__paypal {
  background: #003087;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 22px;
  text-decoration: none;
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.l-donate__paypal:hover { background: #001f5c; }
.l-donate__paypal svg { color: #fff; flex-shrink: 0; }
.l-donate__form { display: flex; justify-content: center; margin: 0; }
.l-donate__alt {
  font-family: var(--l-font-body);
  font-size: 14px;
  color: var(--l-ink-2);
  margin: 24px 0 0;
}
.l-donate__alt a { color: var(--l-ink); text-decoration: underline; }
.l-donate__alt a:hover { color: var(--l-blue-500); }
button.l-donate__paypal { border: none; cursor: pointer; }

/* ── 404 (not found) page ──────────────────────────────── */
.l-notfound {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(80px, 8cqi, 140px) var(--l-page-x);
  text-align: center;
}
.l-notfound__digits {
  font-family: var(--l-font-display);
  font-size: clamp(120px, 22cqi, 256px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--l-blue-500);
  opacity: 0.18;
  margin: 0;
}
.l-notfound__title {
  font-family: var(--l-font-display);
  font-size: clamp(28px, 3.4cqi, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 8px 0 12px;
  color: var(--l-ink);
}
.l-notfound__lede {
  font-family: var(--l-font-body);
  font-size: 16px;
  color: var(--l-ink-2);
  margin: 0 auto 32px;
  max-width: 520px;
}
.l-notfound__search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 48px;
  max-width: 480px;
}
.l-notfound__search input {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--l-rule);
  border-radius: 999px;
  font-family: var(--l-font-body);
  font-size: 15px;
  background: var(--l-paper);
}
.l-notfound__search button {
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--l-ink);
  color: var(--l-paper);
  font-family: var(--l-font-body);
  font-size: 16px;
  cursor: pointer;
}
.l-notfound__links {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  text-align: left;
}
.l-notfound__links li {
  border-top: 1px solid var(--l-rule);
  padding: 14px 0;
  font-family: var(--l-font-display);
  font-size: 17px;
}
.l-notfound__links li:last-child { border-bottom: 1px solid var(--l-rule); }
.l-notfound__links a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.l-notfound__links a:hover { color: var(--l-blue-500); }

/* ── PAGE HERO (dark, design-system cover) ─────────────────
   Used at the top of info/storja pages. Blue-950 bg with a soft
   radial glow, breadcrumb, large display title, optional italic
   lede, optional 5-cell meta strip. When the page has a featured
   image, the hero shifts into "cinematic" mode — the photo
   becomes a full-bleed background with a dark gradient overlay,
   per the design-system cinematic hero spec. */
.l-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--l-blue-950);
  color: var(--l-paper);
  padding: clamp(80px, 10cqi, 160px)
           max(var(--l-page-x), var(--l-safe-left))
           clamp(72px, 8cqi, 120px)
           max(var(--l-page-x), var(--l-safe-right));
  /* Break out of any constrained ancestor — full-bleed. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.l-hero--cinematic {
  /* Same padding rhythm as the default hero so the title sits in the
     same place — only the background swaps. Photo behind, dark
     gradient overlay on top, content flows from the same anchor. */
  background: var(--l-blue-950) center / cover no-repeat;
}
.l-hero--cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 10, 29, 0.55) 0%, rgba(2, 10, 29, 0.85) 100%);
  z-index: 0;
  pointer-events: none;
}
.l-hero--cinematic .l-hero__glow { display: none; }
.l-hero__glow {
  position: absolute;
  right: -240px;
  top: -240px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--l-blue-500) 0%, transparent 65%);
  opacity: 0.40;
  pointer-events: none;
  z-index: 0;
}
.l-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--l-content-max);
  margin-inline: auto;
  padding-inline: var(--l-page-x);
}
.l-hero__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.l-hero__brand-text { line-height: 1.4; }

/* Breadcrumb (replaces the old static eyebrow). All items render in
   gold; linked items are subtly underlined on hover; the Fergħat
   crumb and the current page render as the same visual style as the
   links (sans underline). Separator is " / " in a slightly dimmer
   gold so the chain reads top-down. */
/* Breadcrumb (on the dark hero) — gold, slash separator, one
   colour, single line. Subtle editorial accent, not the main
   point of the hero. */
.l-hero__crumbs {
  margin-bottom: 36px;        /* clear breathing room before the title */
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
}
.l-hero__crumbs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;          /* keep crumbs on one line */
  align-items: center;
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Muted gold — visible accent, doesn't compete with the title. */
  color: var(--l-gold);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-hero__crumb { display: inline; }
.l-hero__crumb + .l-hero__crumb::before {
  content: "/";
  margin: 0 10px;
  color: var(--l-gold);
  opacity: 0.5;
}
.l-hero__crumb-link,
.l-hero__crumb-text {
  color: inherit;
  text-decoration: none;
}
.l-hero__crumb-link:hover {
  color: var(--l-gold-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.l-hero__eyebrow {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-blue-200, #a8c4ec);
}
.l-hero__subline {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--l-blue-300, #7ea2d6);
  margin-top: 4px;
}
.l-hero__title {
  font-family: var(--l-font-display);
  font-style: normal;
  font-weight: 700;
  /* Scale aggressively with the container so the hero feels editorial —
     128px ceiling matches the design-system cinematic spec ("Tosca"
     reference at 124px). Floor at 36px so mobile stays readable.
     cqi = inline-size of the page container query. */
  font-size: clamp(36px, 11cqi, 128px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--l-paper);
  margin: 0;
  /* Keep whole words together — no mid-word breaks, no hyphenation.
     Multi-word titles ("Il-Banda Leone u l-Festa…") wrap on spaces. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
}
.l-hero__title em,
.l-hero__title i {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
}
/* Two-line muted-second pattern: titles can include <span class="l-hero__title-muted">
   on the second line to drop opacity, e.g. "Tliet kolonni,<br>
   <span class='l-hero__title-muted'>istituzzjoni waħda.</span>" */
.l-hero__title-muted {
  color: var(--l-blue-200, #a8c4ec);
}
.l-hero__lede {
  /* Editorial italic lede in Source Serif — the wow detail from the
     design system. Big-italic-serif under a sans display title is the
     signature contrast that anchors the brand in opera-house territory. */
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6cqi, 30px);
  line-height: 1.4;
  color: var(--l-blue-100, #c8d8ef);
  letter-spacing: -0.01em;
  margin: 28px 0 0;
  max-width: 760px;
}
.l-hero__lede p { margin: 0 0 14px; }
.l-hero__lede p:last-child { margin-bottom: 0; }
.l-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 64px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(168, 192, 230, 0.22);
}
.l-hero__meta-label {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-blue-300, #7ea2d6);
}
.l-hero__meta-value {
  font-family: var(--l-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--l-paper);
  margin-top: 6px;
}
@container page (max-width: 700px) {
  .l-hero { padding-block: 56px 48px; }
  .l-hero__brand { gap: 12px; margin-bottom: 18px; }
  .l-hero__lede { margin-top: 18px; }
  .l-hero__meta { gap: 18px 32px; margin-top: 36px; padding-top: 20px; }
}
@supports not (mask-image: url('')) {
  /* Fallback: just show the white PNG (visible on dark surfaces only). */
  .l-crest {
    background: url('../images/crest.png') no-repeat center / contain;
    background-color: transparent;
  }
}

/* ── WATERMARK PLACEHOLDER ─────────────────────────────────
   When a real photograph hasn't been uploaded, surfaces fall back
   to this watermark — the full crest at scale 110%, cropping at
   the edges, ink-2 tint on paper-2. Drop into any element with
   `aspect-ratio` set. */
.l-watermark {
  background-color: var(--l-paper-2);
  background-image: url('../images/crest.png');
  background-repeat: no-repeat;
  background-position: center;
  /* Slightly larger than the container so edges crop dramatically */
  background-size: 110% auto;
  /* The crest PNG is white-on-transparent.  We need to tint it ink-2
     for visibility on paper-2.  Achieved by a colour overlay via
     mix-blend-mode on a pseudo, plus a base fill. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.l-watermark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--l-ink-2);
  -webkit-mask: url('../images/crest.png') no-repeat center / 110% auto;
          mask: url('../images/crest.png') no-repeat center / 110% auto;
  opacity: 0.42;
  pointer-events: none;
}
.l-watermark > .l-crest { display: none; } /* legacy markup compatibility */
/* Variant for dark surfaces */
.l-on-dark .l-watermark,
.l-watermark--on-dark {
  background-color: var(--l-blue-900);
}
.l-on-dark .l-watermark::before,
.l-watermark--on-dark::before {
  background-color: var(--l-paper);
  opacity: 0.10;
}
/* When the watermark sits behind hero text, push it off-centre so it
   doesn't compete with the headline. */
.l-slider__media.l-watermark--on-dark {
  background-position: 75% center;
  background-size: 80% auto;
}
.l-slider__media.l-watermark--on-dark::before {
  -webkit-mask-position: 75% center;
          mask-position: 75% center;
  -webkit-mask-size: 80% auto;
          mask-size: 80% auto;
}
.l-nav__links {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 500;
}
.l-nav__links > a,
.l-nav__menu-trigger {
  color: var(--l-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l-nav__links a[aria-current="page"] { color: var(--l-blue-500); }

/* Dropdown menu — Informazzjoni */
.l-nav__menu { position: relative; }
.l-nav__menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 1000px;
  max-width: min(1200px, 96vw);
  background: var(--l-paper);
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  box-shadow: var(--l-shadow-lg);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 28px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--l-dur) var(--l-ease-out), transform var(--l-dur) var(--l-ease-out), visibility 0s linear var(--l-dur);
}
/* Invisible bridge over the 14px gap between trigger and panel.
   Without this, moving the cursor from the trigger toward the panel
   crosses dead space where :hover is lost and the panel collapses. */
.l-nav__menu-panel::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 22px;
}
.l-nav__menu:hover .l-nav__menu-panel,
.l-nav__menu:focus-within .l-nav__menu-panel,
.l-nav__menu .l-nav__menu-trigger[aria-expanded="true"] + .l-nav__menu-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.l-nav__menu-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.l-nav__menu-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--l-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--l-ink);
  text-decoration: none;
  border-radius: var(--l-radius);
}
.l-nav__menu-section:hover {
  background: var(--l-paper-2);
  color: var(--l-blue-500);
}
.l-nav__menu-section span { color: var(--l-ink-3); }
.l-nav__menu-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 0 14px;
  margin: 4px 0 8px;
  border-left: 1px solid var(--l-rule);
  margin-left: 14px;
}
.l-nav__menu-sub a {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--l-ink-2);
  text-decoration: none;
  border-radius: var(--l-radius-sm);
}
.l-nav__menu-sub a:hover {
  color: var(--l-blue-500);
  background: var(--l-paper-2);
}

/* Mobile panel — nested details */
.l-nav__panel details {
  border-bottom: 1px solid var(--l-rule);
}
.l-nav__panel details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--l-ink);
  cursor: pointer;
}
.l-nav__panel details summary::-webkit-details-marker { display: none; }
.l-nav__panel details summary::after {
  content: '+';
  font-family: var(--l-font-mono);
  font-size: 22px;
  color: var(--l-ink-3);
  font-weight: 400;
  margin-left: 16px;
  flex-shrink: 0;
  transition: color var(--l-dur) var(--l-ease-out);
}
.l-nav__panel details[open] summary::after {
  content: '−';
  color: var(--l-ink);
}
.l-nav__panel details ul {
  padding: 0 0 14px 16px;
  border-bottom: 0;
}
.l-nav__panel details ul a {
  font-size: 17px;
  border-bottom: 0;
  padding: 8px 0;
}
.l-nav__panel details details summary {
  font-size: 17px;
  padding: 10px 0;
  border-bottom: 1px solid var(--l-rule-2);
}
.l-nav__utility {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.l-nav__locale {
  font-family: var(--l-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--l-ink-3);
}
.l-nav__locale b {
  color: var(--l-ink);
  font-weight: 600;
}
.l-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--l-rule);
  background: transparent;
  color: var(--l-ink);
  cursor: pointer;
  padding: 0;
  /* Push to the right edge on mobile — the only other visible flex
     child in the nav is the brand, so margin-left: auto stretches
     the gap and anchors the burger to the gutter. */
  margin-left: auto;
  transition: background var(--l-dur) var(--l-ease-out),
              border-color var(--l-dur) var(--l-ease-out);
}
.l-nav__burger:hover {
  background: var(--l-paper-2);
  border-color: var(--l-ink);
}
.l-nav__burger svg {
  display: block;
}
/* Mobile nav panel. Sits over the page; fade + slight slide-in so
   it doesn't snap. Always rendered (no `display: none`) so the
   transition can run on both directions; visibility + pointer-events
   gate interaction. prefers-reduced-motion bypasses the transition
   entirely (handled below). */
.l-nav__panel {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--l-paper);
  z-index: var(--l-z-overlay);
  padding:
    calc(24px + var(--l-safe-top))
    max(var(--l-page-x-mobile), var(--l-safe-right))
    calc(32px + var(--l-safe-bottom))
    max(var(--l-page-x-mobile), var(--l-safe-left));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity 220ms var(--l-ease-out),
    transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 260ms;
}
.l-nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 240ms var(--l-ease-out),
    transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 0s;
}
/* Panel head — brand on the left + close button on the right.
   Anchors the user and provides the visible close affordance. */
.l-nav__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--l-rule);
}
.l-nav__panel-head .l-nav__brand {
  flex: 1;
  min-width: 0;
}
.l-nav__panel-head .l-nav__brand-name {
  font-size: 14px;
  white-space: normal;
}
.l-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--l-rule);
  background: transparent;
  color: var(--l-ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--l-dur) var(--l-ease-out),
              color var(--l-dur) var(--l-ease-out),
              border-color var(--l-dur) var(--l-ease-out);
}
.l-nav__close:hover {
  background: var(--l-ink);
  color: var(--l-paper);
  border-color: var(--l-ink);
}
.l-nav__panel ul { list-style: none; padding: 0; margin: 0; }
.l-nav__panel > ul > li > a {
  display: block;
  padding: 14px 0;
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--l-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--l-rule);
}
body.l-nav-open { overflow: hidden; }

/* ── FOOTER ────────────────────────────────────────────────── */
/* Footer — dark editorial panel matching the design system's
   "Developer / For Claude Code" pattern: blue-950 bg, paper text,
   blue-200 eyebrows, gold accents on the crest and the brand line. */
.l-footer {
  background: var(--l-blue-950);
  color: var(--l-paper);
  padding:
    72px
    max(var(--l-page-x), var(--l-safe-right))
    calc(36px + var(--l-safe-bottom))
    max(var(--l-page-x), var(--l-safe-left));
  border-top: 1px solid rgba(168, 192, 230, 0.18);
}
.l-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-footer__brand .l-crest { color: var(--l-paper); }
.l-footer__brand .l-nav__brand-name { color: var(--l-paper); }
.l-footer__brand .l-nav__brand-meta { color: rgba(250, 248, 243, 0.55); }
.l-footer__cell h4 {
  all: unset;
  display: block;
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-blue-200, #a8c4ec);
}
.l-footer__cell ul { list-style: none; padding: 0; margin: 18px 0 0; }
.l-footer__cell li {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--l-paper);
}
.l-footer__cell a {
  color: var(--l-paper);
  text-decoration: none;
  transition: color var(--l-dur) var(--l-ease-out);
}
.l-footer__cell a:hover { color: var(--l-gold-lt); }
.l-footer__socials { display: flex; gap: 12px; margin-top: 22px; }
.l-footer__socials a {
  width: 44px; height: 44px; border-radius: 22px;
  border: 1px solid rgba(168, 192, 230, 0.30);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--l-paper); text-decoration: none;
  transition: background var(--l-dur) var(--l-ease-out),
              color var(--l-dur) var(--l-ease-out),
              border-color var(--l-dur) var(--l-ease-out);
}
.l-footer__socials a:hover {
  background: var(--l-gold);
  color: var(--l-blue-950);
  border-color: var(--l-gold);
}
.l-footer__socials a svg { display: block; }
.l-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(168, 192, 230, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(250, 248, 243, 0.6);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-footer__bottom a { color: inherit; text-decoration: none; }
.l-footer__bottom a:hover { color: var(--l-gold-lt); }

/* ── FOLIO MARK ────────────────────────────────────────────── */
.l-folio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--l-page-x);
  border-bottom: 1px solid var(--l-rule);
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-folio__numeral {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--l-gold);
  text-transform: none;
}
.l-folio__sep {
  width: 24px;
  border-top: 1px solid var(--l-rule);
}

/* ── SLIDER ──────────────────────────────────────────────────
   Crossfade transition between slides.  Slides stack absolutely
   inside .l-slider; only .is-active is visible (opacity-driven).
   Mobile gets a swipe gesture via JS. */
.l-slider {
  position: relative;
  aspect-ratio: 12 / 5;
  min-height: 380px;
  max-height: 640px;
  isolation: isolate;
  background: var(--l-blue-950);
  color: var(--l-paper);
  --l-ink:   var(--l-paper);
  --l-ink-2: rgba(250, 248, 243, 0.78);
  --l-ink-3: rgba(250, 248, 243, 0.55);
  overflow: hidden;
  /* Break out of any constrained ancestor so the slider is full-bleed.
     Use 100svw — 100vw includes the scrollbar in some Chromium builds
     and provokes a horizontal scroll. svw excludes it. */
  width: 100svw;
  max-width: 100svw;
  margin-left: calc(50% - 50svw);
  margin-right: calc(50% - 50svw);
}
.l-slider__track {
  position: absolute;
  inset: 0;
}
.l-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  /* Cinematic crossfade — slower than a UI transition; the slow
     blend gives the slider a "premium hero" feel rather than a
     snappy ad rotator. */
  transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 1400ms;
  pointer-events: none;
}
.l-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
  z-index: 1;
}
.l-slider__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.l-slider__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Ken Burns effect — slow zoom + tiny pan on the active slide's
     image. Direction alternates per slide (1st zooms in, 2nd pans
     across, 3rd zooms out) so the sequence doesn't feel
     mechanical. Animation duration intentionally longer than
     autoplay-ms so each slide reveals fresh motion every cycle. */
  transform: scale(1.04);
  transform-origin: center center;
  will-change: transform;
}
.l-slider__slide.is-active .l-slider__media img {
  animation: leone-kb-in 10s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.l-slider__slide:nth-child(2).is-active .l-slider__media img {
  animation-name: leone-kb-pan;
}
.l-slider__slide:nth-child(3).is-active .l-slider__media img {
  animation-name: leone-kb-out;
}
.l-slider__slide:nth-child(4).is-active .l-slider__media img {
  animation-name: leone-kb-pan-rev;
}
@keyframes leone-kb-in {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
@keyframes leone-kb-pan {
  from { transform: scale(1.10) translate(1.8%, 0.6%); }
  to   { transform: scale(1.05) translate(-1.8%, -0.6%); }
}
@keyframes leone-kb-out {
  from { transform: scale(1.18) translate(0.5%, -1%); }
  to   { transform: scale(1.04) translate(-0.5%, 0.5%); }
}
@keyframes leone-kb-pan-rev {
  from { transform: scale(1.06) translate(-1.5%, -0.5%); }
  to   { transform: scale(1.14) translate(1.5%, 0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .l-slider__slide.is-active .l-slider__media img { animation: none; transform: scale(1.02); }
  .l-slider__slide { transition: opacity 320ms ease, visibility 0s linear 320ms; }
}
/* Slider: image-only. No scrim, no text overlay (per operator). */

/* Arrows — paper-tinted at rest, gold edge on hover (editorial detail). */
.l-slider__arrow {
  position: absolute;
  top: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.08);
  color: var(--l-paper);
  border: 1px solid rgba(250, 248, 243, 0.22);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transform: translateY(-50%);
  transition: background var(--l-dur) var(--l-ease-out), border-color var(--l-dur) var(--l-ease-out), color var(--l-dur) var(--l-ease-out), transform var(--l-dur) var(--l-ease-out);
}
.l-slider__arrow:hover {
  background: rgba(212, 176, 89, 0.14);
  border-color: var(--l-gold-lt);
  color: var(--l-gold-lt);
}
.l-slider__arrow:focus-visible {
  outline: 2px solid var(--l-gold-lt);
  outline-offset: 3px;
}
.l-slider__arrow:active { transform: translateY(-50%) scale(0.96); }
.l-slider__arrow--prev { left: max(var(--l-page-x), var(--l-safe-left)); }
.l-slider__arrow--next { right: max(var(--l-page-x), var(--l-safe-right)); }

/* Dots — paper hairlines at rest, paper bar marks the active slide.
   Each dot is a 3px tall visual but the button has 14px tap padding
   above/below (background-clip: content-box) so the touch target is
   the iOS-spec 44px high without changing the visual. Active uses
   paper (not gold — DS reserves gold for crest + breadcrumb +
   editorial detail). */
.l-slider__dots {
  position: absolute;
  bottom: calc(14px + var(--l-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.l-slider__dot {
  width: 32px;
  height: 31px;             /* tap area 32×31 */
  padding: 14px 0;          /* visual bar = 32×3 inside */
  background-color: rgba(250, 248, 243, 0.32);
  background-clip: content-box;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  transition: background-color var(--l-dur) var(--l-ease-out), width var(--l-dur) var(--l-ease-out);
}
.l-slider__dot:hover { background-color: rgba(250, 248, 243, 0.6); }
.l-slider__dot:focus-visible {
  outline: 2px solid var(--l-paper);
  outline-offset: 2px;
}
.l-slider__dot.is-active {
  background-color: var(--l-paper);
  width: 56px;
}

/* Reduced motion / mobile tweaks */
@container page (max-width: 900px) {
  .l-slider { min-height: 280px; aspect-ratio: 16 / 9; }
  .l-slider__arrow { display: none; }
  .l-slider__dots { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-slider__slide { transition: none; }
}

/* ── MOSAIC — homepage editorial hero ──────────────────────
   Three-tile asymmetric composition replacing the auto-rotating
   slider. One large lead tile (left, full height) + two stacked
   secondaries (right). Tiles are slides from the `slide` CPT —
   the operator curates 3 stories rather than authoring a carousel.
   Reads as one composed editorial block: an FT / Apple front,
   not a "wait for the slide I want" widget.

   Heights are viewport-bound at desktop so the mosaic fills the
   first screen under the fixed 64px nav, and stack into a column
   of fixed-height tiles on mobile. */
.l-mosaic {
  background: var(--l-paper);
  padding: 0 max(var(--l-page-x), var(--l-safe-left));
  width: 100svw;
  max-width: 100svw;
  margin-left: calc(50% - 50svw);
  margin-right: calc(50% - 50svw);
}

/* Eyebrow strip — A.D. 1863 left rail / Maltese month + place right.
   Reads as the "edition" line for the whole page front. Sits on
   paper background above the mosaic, not on dark. Hides on narrow
   widths so it doesn't wrap into the cramped two-line mess that
   was the cause of the "looks bad on mobile" feedback. */
.l-mosaic__eyebrow {
  max-width: var(--l-content-max);
  margin: 0 auto;
  padding: 28px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  white-space: nowrap;
}
.l-mosaic__eyebrow-id { color: var(--l-gold-dk); display: inline-flex; align-items: center; gap: 12px; }
.l-mosaic__eyebrow-dash {
  display: inline-block; width: 24px; height: 1px; background: var(--l-gold);
  flex: none;
}
.l-mosaic__eyebrow-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin: 0 8px 2px;
}
.l-mosaic__eyebrow-place { color: var(--l-ink-3); }
.l-mosaic__grid {
  max-width: var(--l-content-max);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  /* Default (3 tiles): lead 1.55fr left spanning both rows, two
     secondaries stacked on the right. */
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(100svh - 64px - 36px);
  min-height: 560px;
  max-height: 760px;
}
/* Layout adapts when fewer slides exist. */
.l-mosaic__grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.l-mosaic__grid--2 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr; }

/* Shared tile baseline. */
.l-mosaic__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--l-radius-lg);
  isolation: isolate;
  color: var(--l-paper);
  background: var(--l-blue-900);
  text-decoration: none;
  display: block;
  transition: transform .4s var(--l-ease-out);
}
.l-mosaic__tile:hover { transform: translateY(-3px); }
.l-mosaic__tile:focus-visible {
  outline: 2px solid var(--l-gold-lt);
  outline-offset: 3px;
}

.l-mosaic__media { position: absolute; inset: 0; z-index: 0; }
.l-mosaic__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--l-ease-out);
}
.l-mosaic__tile:hover .l-mosaic__media img { transform: scale(1.06); }

/* Scrim — guarantees readable text regardless of the underlying
   photo. The bottom ~50% of every tile is heavily darkened by a
   nearly-solid gradient so the kicker, title, lede, and CTA stay
   legible on ANY image — bright fireworks, sun-lit facades, dark
   theatre interiors, future photos we can't predict. The top half
   stays untouched so the image still reads as a magazine cover. */
.l-mosaic__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2,10,29,0)    0%,
      rgba(2,10,29,0)    35%,
      rgba(2,10,29,0.55) 55%,
      rgba(2,10,29,0.88) 80%,
      rgba(2,10,29,0.95) 100%);
}

/* Heraldic crest watermark on the lead tile only — top-right,
   monochrome paper at 55% so it's a quiet brand stamp, not a
   billboard. Removed below the 700px container breakpoint
   because it competes with the title for space. */
.l-mosaic__crest {
  position: absolute;
  top: 32px; right: 36px;
  width: 60px; height: 60px;
  z-index: 2;
  background: url("../images/crest.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  pointer-events: none;
}

.l-mosaic__body {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 30px;
}

.l-mosaic__kicker {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold-lt);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  width: max-content; max-width: 100%;
}
.l-mosaic__kicker::before {
  content: ""; width: 22px; height: 1px; background: var(--l-gold-lt); flex: none;
}

.l-mosaic__title {
  font-family: var(--l-font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: #faf8f3;
  /* Subtle insurance — the scrim does the heavy lifting; this just
     softens letter edges against unusual photo content. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
/* Plain title — any <em>/<i> inside the title renders identically
   to the surrounding text. The previous Source Serif italic +
   gold accent introduced two extra fonts and a third colour to
   the hero, which read as noisy. Operators don't need to think
   about wrapping words in <em>. */
.l-mosaic__title em,
.l-mosaic__title i {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.l-mosaic__title em,
.l-mosaic__title i {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--l-gold-lt);
  letter-spacing: -0.015em;
}

.l-mosaic__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 248, 243, 0.92);
  max-width: 44ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.l-mosaic__cta {
  margin-top: 18px;
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Hard-coded paper hex — same reason as .l-mosaic__title above. */
  color: #faf8f3;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0.92;
}
.l-mosaic__cta::after {
  content: "→";
  transition: transform .22s var(--l-ease-out);
}
.l-mosaic__tile:hover .l-mosaic__cta::after { transform: translateX(4px); }

/* Lead tile — fills both grid rows on the left. */
.l-mosaic__tile--lead { grid-row: 1 / span 2; }
.l-mosaic__tile--lead .l-mosaic__body { padding: 44px 48px; }
.l-mosaic__tile--lead .l-mosaic__title {
  font-size: clamp(36px, 4.4cqi, 64px);
  max-width: 14ch;
}
.l-mosaic__tile--lead .l-mosaic__lede { font-size: 17px; }

/* Secondary tiles — smaller heading scale. */
.l-mosaic__tile--sm .l-mosaic__title {
  font-size: clamp(20px, 2cqi, 30px);
  max-width: 16ch;
}

/* When only 1 slide exists the lead occupies a single row, so
   undo the row-span that would leave a dead bottom-right cell. */
.l-mosaic__grid--1 .l-mosaic__tile--lead,
.l-mosaic__grid--2 .l-mosaic__tile--lead {
  grid-row: auto;
}

/* Container-query mobile rhythm. The site uses @container page
   (not @media) so a section embedded in a constrained context
   still adapts to its real width.

   Mobile layout: full-width lead tile on top, then the two
   secondaries side-by-side underneath. That keeps the hero one
   "screen unit" — a phone visitor sees the lead first, then a
   quick row of teasers, instead of scrolling through three
   stacked panels before reaching the news. */
@container page (max-width: 900px) {
  .l-mosaic {
    padding: 0 var(--l-page-x-mobile);
  }
  /* The eyebrow's two segments wrapped into a cramped 2-up grid
     on narrow widths and looked broken. Brand identity is already
     in the fixed nav above; the edition line is a desktop-only
     editorial flourish. */
  .l-mosaic__eyebrow {
    display: none;
  }
  .l-mosaic__grid,
  .l-mosaic__grid--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "lead lead" "a b";
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 10px;
  }
  .l-mosaic__grid--2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "lead" "a";
  }
  .l-mosaic__grid--1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "lead";
  }
  .l-mosaic__tile--lead {
    grid-area: lead;
    grid-row: auto;
    height: 62svh;
    min-height: 420px;
    max-height: 560px;
  }
  .l-mosaic__tile--sm { height: 180px; }
  .l-mosaic__tile--sm:nth-of-type(2) { grid-area: a; }
  .l-mosaic__tile--sm:nth-of-type(3) { grid-area: b; }
  .l-mosaic__tile--lead .l-mosaic__body { padding: 26px 24px; }
  .l-mosaic__tile--lead .l-mosaic__title {
    font-size: clamp(32px, 9vw, 48px);
  }
  .l-mosaic__tile--lead .l-mosaic__lede { font-size: 15px; }
  /* Secondary tiles get smaller padding and a tighter type ramp
     because they sit two-up on a phone — kicker + title only, no
     CTA (the whole tile is the link). */
  .l-mosaic__tile--sm .l-mosaic__body { padding: 16px 16px 18px; }
  .l-mosaic__tile--sm .l-mosaic__kicker {
    font-size: 9.5px; letter-spacing: 0.18em; margin-bottom: 8px;
  }
  .l-mosaic__tile--sm .l-mosaic__kicker::before { width: 14px; }
  .l-mosaic__tile--sm .l-mosaic__title { font-size: 16px; line-height: 1.1; }
  .l-mosaic__tile--sm .l-mosaic__cta { display: none; }
  .l-mosaic__crest { width: 40px; height: 40px; top: 20px; right: 20px; }
}

/* Very narrow phones (iPhone SE / smaller Androids) — switch the
   two secondaries to a 1-col stack rather than cramming them into
   a 2-col grid where each cell is < 150px wide. iPhone 13/14/15
   (390-393px) still gets the side-by-side row. */
@container page (max-width: 360px) {
  .l-mosaic__grid--3 {
    grid-template-columns: 1fr;
    grid-template-areas: "lead" "a" "b";
  }
  .l-mosaic__tile--sm { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .l-mosaic__tile,
  .l-mosaic__media img,
  .l-mosaic__cta::after { transition: none; }
  .l-mosaic__tile:hover { transform: none; }
  .l-mosaic__tile:hover .l-mosaic__media img { transform: scale(1.02); }
}

/* ── HERO — CINEMATIC ─────────────────────────────────────── */
.l-hero-cinematic {
  position: relative;
  min-height: 680px;
  isolation: isolate;
  color: var(--l-paper);
  --l-ink:   var(--l-paper);
  --l-ink-2: rgba(250, 248, 243, 0.78);
  --l-ink-3: rgba(250, 248, 243, 0.55);
}
.l-hero-cinematic__media,
.l-hero-cinematic__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.l-hero-cinematic__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 12, 12, 0.35) 0%, rgba(20, 12, 12, 0.75) 100%);
}
.l-hero-cinematic__inner {
  position: relative;
  padding:
    calc(64px + var(--l-safe-top))
    max(var(--l-page-x), var(--l-safe-right))
    calc(56px + var(--l-safe-bottom))
    max(var(--l-page-x), var(--l-safe-left));
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-hero-cinematic__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.l-hero-cinematic__main h1,
.l-hero-cinematic__main .l-hero-title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 11vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--l-paper);
  margin: 0;
}
.l-hero-cinematic__subtitle {
  font-family: var(--l-font-display);
  font-size: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 14px;
  letter-spacing: -0.01em;
  max-width: 920px;
}
.l-hero-cinematic__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.l-hero-cinematic__meta {
  display: flex;
  gap: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  flex-wrap: wrap;
}
.l-hero-cinematic__meta dt {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.l-hero-cinematic__meta dd {
  font-family: var(--l-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--l-paper);
  margin: 0;
}

/* ── PLATE (page-storja) ─────────────────────────────────── */
.l-plate {
  padding: 48px var(--l-page-x) 56px;
  border-bottom: 1px solid var(--l-rule);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-plate__tag {
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--l-tracking-widest);
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.l-plate__tag::before {
  content: '';
  width: 18px;
  border-top: 1px solid var(--l-gold);
}
.l-plate__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 9cqi, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--l-ink);
}
.l-plate__kicker {
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-blue-500);
  margin-bottom: 18px;
}
.l-plate__lede {
  font-family: var(--l-font-display);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--l-ink-2);
  max-width: 720px;
  margin: 0 0 32px;
}
.l-plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--l-rule);
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-ink-3);
}
.l-plate__meta b { color: var(--l-ink); font-weight: 500; }
.l-plate__hero-image {
  margin-top: 40px;
  position: relative;
}
.l-plate__hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.l-plate__hero-caption {
  margin-top: 14px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Plate variant: index (roster-led) — see page-storja "Surmastrijiet" */
.l-plate--index .l-plate__meta { margin-top: 12px; }

/* Plate variant: year-led — see page-storja "Festa 2009" */
.l-plate--year {
  position: relative;
  padding-top: 56px;
}
.l-plate__year {
  position: absolute;
  right: var(--l-page-x);
  top: 36px;
  font-family: var(--l-font-display);
  font-size: clamp(96px, 18cqi, 256px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(14, 63, 140, 0.08);
  pointer-events: none;
}

/* ── STORJA PROSE (chapter typography for page-storja) ────
 * Pages that use page-storja.html wrap post-content in
 * .l-storja-prose. Body H3s become rule-above section titles;
 * H4s become small-caps eyebrows (blue-500). This keeps the
 * scraped chapter breaks ("Fundaturi | 1820 –", "Ismijiet
 * distinti", "Għeluq", …) visually distinct from body
 * paragraphs without inventing copy.
 */
.l-storja-prose > .wp-block-post-content > h2,
.l-storja-prose > .wp-block-post-content > h3,
.l-storja-prose > .wp-block-post-content > h4,
.l-storja-prose > h2,
.l-storja-prose > h3,
.l-storja-prose > h4 {
  font-family: var(--l-font-display);
  color: var(--l-ink);
  margin: 56px 0 14px;
  text-wrap: balance;
}
.l-storja-prose > .wp-block-post-content > h2:first-child,
.l-storja-prose > .wp-block-post-content > h3:first-child,
.l-storja-prose > .wp-block-post-content > h4:first-child,
.l-storja-prose > h2:first-child,
.l-storja-prose > h3:first-child,
.l-storja-prose > h4:first-child {
  margin-top: 8px;
}
.l-storja-prose > .wp-block-post-content > h2,
.l-storja-prose > h2 {
  font-size: clamp(26px, 3.4cqi, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.l-storja-prose > .wp-block-post-content > h3,
.l-storja-prose > h3 {
  font-size: clamp(22px, 2.6cqi, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-top: 18px;
  border-top: 1px solid var(--l-rule);
}
.l-storja-prose > .wp-block-post-content > h4,
.l-storja-prose > h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--l-tracking-wider, 0.12em);
  text-transform: uppercase;
  color: var(--l-blue-500);
  line-height: 1.3;
}

/* Lede sentence — the first paragraph of the body sits a notch
   larger / heavier than the rest, giving the page an editorial
   "opening" without depending on the first letter being a wide
   capital. Universally applied; pages that start with a heading
   (chapter marker) opt out automatically. */
.l-storja-prose > .wp-block-post-content > p:first-child,
.l-storja-prose > p:first-child {
  font-size: clamp(17px, 1.6cqi, 19px);
  line-height: 1.55;
  color: var(--l-ink);
}

/* Pull quote — blue-500 left rule + italic Source Serif at 26-32px.
   Replaces the flat-default blockquote render with a signature
   editorial moment when an article quotes a source or a member. */
.l-storja-prose blockquote,
.l-storja-prose .wp-block-quote {
  margin: 48px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--l-blue-500);
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6cqi, 30px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--l-ink);
}
.l-storja-prose blockquote p,
.l-storja-prose .wp-block-quote p {
  margin: 0 0 14px;
}
.l-storja-prose blockquote cite,
.l-storja-prose .wp-block-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--l-font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-ink-2);
}

/* ── PRODUCTION LISTING (chronological data list) ─────────────
   Replaces fixed-width legacy HTML tables (e.g. produzzjonijiet
   oħrajn — 79 rows of date · production · venue · type). Aligned
   four-column grid on desktop; on mobile each row stacks into a
   card with the date as a gold mono kicker, the production bold,
   and venue · type as a muted meta line — no invented header
   labels, native list reading. */
.l-prod-list {
  margin: 32px 0;
  border-top: 1px solid var(--l-rule);
}
.l-prod-list__row {
  display: grid;
  grid-template-columns: 150px 1.5fr 1fr 0.95fr;
  gap: 20px;
  align-items: baseline;
  padding: 16px 4px;
  border-bottom: 1px solid var(--l-rule);
}
.l-prod-list__date {
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--l-blue-500);
  line-height: 1.35;
}
.l-prod-list__title {
  font-family: var(--l-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--l-ink);
}
.l-prod-list__venue,
.l-prod-list__type {
  font-family: var(--l-font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--l-ink-2);
}
.l-prod-list__type { color: var(--l-ink-3); }

@container page (max-width: 860px) {
  .l-prod-list__row { grid-template-columns: 130px 1.4fr 1fr; }
  /* type folds under venue on medium widths */
  .l-prod-list__type { grid-column: 2 / -1; font-size: 13px; }
}
@container page (max-width: 600px) {
  .l-prod-list__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
  }
  .l-prod-list__date { order: -1; font-size: 11px; letter-spacing: 0.08em; }
  .l-prod-list__title { font-size: 17px; margin-top: 2px; }
  .l-prod-list__venue { font-size: 14px; }
  .l-prod-list__type { grid-column: auto; font-size: 13px; }
}

/* ── PORTRAIT GRID (presidenti, surmastrijiet) ────────────────
   Re-introduces the historic 3:4 portraits (recovered from the
   legacy media library) that the launch build stripped. Auto-fit
   grid: ~6 across on desktop, 2 across on phones. Faces sit toward
   the top of the crop. Caption = name (display) + years (mono
   muted). All names verbatim from the source. */
.l-portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 20px;
  margin: 36px 0 12px;
}
.l-portraits__item { margin: 0; }
.l-portraits__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--l-radius);
  box-shadow: 0 0 0 1px var(--l-rule), 0 6px 18px rgba(11, 31, 59, 0.07);
  background: var(--l-paper-2, #efeae0);
  display: block;
}
.l-portraits__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 11px;
}
.l-portraits__name {
  font-family: var(--l-font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--l-ink);
}
.l-portraits__years {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--l-ink-3);
}
@container page (max-width: 600px) {
  .l-portraits {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }
}

/* ── INNIJIET (hymns: lyrics + audio) ─────────────────────────
   The festa-hymns section, rebuilt from the legacy site: each
   hymn carries its category, composer/lyricist credit, an audio
   player (where a recording exists), the verses set in editorial
   serif, and any historical note. Lyrics and credits are verbatim
   from the source. */
.l-innijiet {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l-inni {
  padding: 30px 0;
  border-top: 1px solid var(--l-rule);
}
.l-inni:first-child { border-top: 0; padding-top: 6px; }
.l-inni__cat {
  /* Pill in the site's gold accent register — a soft gold-tint fill
     keeps it premium rather than a loud solid chip. */
  display: inline-block;
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-gold);
  background: color-mix(in srgb, var(--l-gold) 12%, transparent);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.l-inni__title {
  font-family: var(--l-font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4cqi, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--l-ink);
  margin: 0 0 8px;
}
.l-inni__credit {
  font-family: var(--l-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--l-ink-3);
  margin: 0 0 20px;
}
/* Audio player — design-system multimedia "reel" language: an open
   strip on the page (no pill), a solid high-contrast ink play mark and
   a waveform whose bars fill with gold as the track plays. */
.l-inni__player {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  max-width: 40rem;
}
.l-inni__play {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: var(--l-ink);
  color: var(--l-paper);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 14, 26, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.l-inni__play:hover { transform: scale(1.05); box-shadow: 0 8px 22px rgba(10, 14, 26, 0.24); }
.l-inni__play svg { width: 22px; height: 22px; }
.l-inni__play .l-inni__icon-play { margin-left: 3px; } /* optical centring of the triangle */
.l-inni__wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  cursor: pointer;
  overflow: hidden;
}
.l-inni__wave span {
  flex: 1 1 auto;
  min-width: 2px;
  background: var(--l-ink);
  border-radius: 1.5px;
  opacity: 0.22;
  transition: opacity 0.1s linear, background-color 0.1s linear;
}
.l-inni__wave span.is-on { background: var(--l-gold); opacity: 1; }
.l-inni__time {
  flex: 0 0 auto;
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--l-ink-3);
  min-width: 36px;
  text-align: right;
}
@container page (max-width: 600px) {
  .l-inni__player { gap: 14px; }
  .l-inni__play { width: 48px; height: 48px; }
  .l-inni__play svg { width: 20px; height: 20px; }
  .l-inni__wave { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-inni__play, .l-inni__wave span { transition: none; }
}
.l-inni__lyrics {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 38rem;
}
.l-inni__stanza {
  margin: 0;
  font-family: var(--l-font-editorial);
  font-size: 17px;
  line-height: 1.62;
  color: var(--l-ink);
}
.l-inni__note {
  margin: 22px 0 4px;
  font-family: var(--l-font-body);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--l-ink-3);
  max-width: 38rem;
}

/* ── INNIJIET INDEX (hymns ladder on the listing page) ─────────
   Typographic recordings-ladder: number, play glyph, type pill +
   title + credit, trailing arrow. Each row links to the hymn page. */
.l-innijiet-index { padding-block: 8px 0; }
.l-innijiet-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--l-content-max);
  margin-inline: auto;
  border-top: 1px solid var(--l-rule);
}
.l-innijiet-index__row { margin: 0; }
.l-innijiet-index__link {
  display: grid;
  grid-template-columns: 44px 40px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--l-rule);
  text-decoration: none;
  color: var(--l-ink);
  transition: background-color 0.14s ease;
}
.l-innijiet-index__link:hover { background: var(--l-paper-2); }
.l-innijiet-index__num {
  font-family: var(--l-font-mono);
  font-size: 12px;
  color: var(--l-gold);
}
.l-innijiet-index__play {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--l-ink);
  color: var(--l-paper);
  flex: 0 0 auto;
}
.l-innijiet-index__play:empty { background: transparent; box-shadow: inset 0 0 0 1px var(--l-rule); }
.l-innijiet-index__play svg { margin-left: 2px; }
.l-innijiet-index__main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.l-innijiet-index__title {
  font-family: var(--l-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6cqi, 23px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.l-innijiet-index__credit {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--l-ink-3);
}
.l-innijiet-index__arrow {
  font-size: 18px;
  color: var(--l-ink-3);
  transition: transform 0.14s ease, color 0.14s ease;
}
.l-innijiet-index__link:hover .l-innijiet-index__arrow { color: var(--l-gold); transform: translateX(3px); }
@container page (max-width: 600px) {
  .l-innijiet-index__link { grid-template-columns: 30px 1fr auto; gap: 12px; }
  .l-innijiet-index__play { display: none; }
}

/* ── INNU REEL (single-hymn featured player hero) ──────────────
   Mirrors the Design System multimedia "reel": dark editorial panel,
   big italic title, prominent play control, gold-accent waveform,
   credits strip. Explicit dark colours (not token-flipped) so the
   paper play disc never collides with the panel on iOS. */
.l-innu-reel {
  background: var(--l-blue-800);
  color: var(--l-paper);
  padding: max(96px, calc(64px + var(--l-safe-top))) max(var(--l-page-x), var(--l-safe-left)) 64px;
  padding-right: max(var(--l-page-x), var(--l-safe-right));
}
.l-innu-reel__inner { max-width: var(--l-content-max); margin-inline: auto; }
.l-innu-reel__crumbs {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l-gold-lt);
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.l-innu-reel__crumbs a { color: var(--l-gold-lt); text-decoration: none; opacity: 0.85; }
.l-innu-reel__crumbs a:hover { opacity: 1; }
.l-innu-reel__crumbs span[aria-hidden] { opacity: 0.5; }
.l-innu-reel__crumb-current { color: rgba(250, 248, 243, 0.7); }
.l-innu-reel__eyebrow {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l-gold-lt);
  margin-bottom: 14px;
}
.l-innu-reel__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 9cqi, 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--l-paper);
  margin: 0 0 40px;
}
/* Reel player — large, on dark. */
.l-innu-reel__player { gap: 22px; max-width: none; margin: 0 0 36px; }
.l-innu-reel__player .l-inni__play {
  width: 72px; height: 72px;
  background: var(--l-paper);
  color: var(--l-blue-800);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.l-innu-reel__player .l-inni__play svg { width: 26px; height: 26px; }
.l-innu-reel__player .l-inni__icon-play { margin-left: 4px; }
.l-innu-reel__player .l-inni__wave { height: 88px; gap: 3px; }
.l-innu-reel__player .l-inni__wave span { background: rgba(250, 248, 243, 0.34); }
.l-innu-reel__player .l-inni__wave span.is-on { background: var(--l-gold-lt); }
.l-innu-reel__player .l-inni__time {
  font-size: 14px;
  color: rgba(250, 248, 243, 0.85);
  min-width: 46px;
}
.l-innu-reel__meta {
  display: flex; flex-wrap: wrap; gap: 14px 56px;
  margin: 0; padding-top: 30px;
  border-top: 1px solid rgba(250, 248, 243, 0.18);
}
.l-innu-reel__meta-cell dt {
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.6);
  margin-bottom: 5px;
}
.l-innu-reel__meta-cell dd {
  margin: 0;
  font-family: var(--l-font-body);
  font-size: 15px;
  color: rgba(250, 248, 243, 0.95);
}
@container page (max-width: 600px) {
  .l-innu-reel__player .l-inni__play { width: 60px; height: 60px; }
  .l-innu-reel__player .l-inni__wave { height: 64px; }
}

/* ── INNU BODY (single-hymn lyrics + history) ─────────────────── */
.l-innu-body { max-width: 720px; margin-inline: auto; }
.l-innu-body__h {
  font-family: var(--l-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l-gold);
  opacity: 0.85;
  margin: 0 0 22px;
}
.l-innu-body__history { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--l-rule); }
.l-innu-body__prose p {
  margin: 0 0 18px;
  font-family: var(--l-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--l-ink-2);
}

/* ── EDITORIAL PROSE ─────────────────────────────────────── */
.l-prose {
  max-width: var(--l-text-max);
  margin-inline: auto;
  padding: 40px var(--l-page-x);
  font-family: var(--l-font-longform);
  font-size: 19px;
  line-height: 1.65;
  color: var(--l-ink);
}
.l-prose p { margin: 0 0 22px; }
.l-prose h2, .l-prose h3 {
  font-family: var(--l-font-display);
  margin: 40px 0 18px;
}
.l-prose h2 { font-size: 32px; letter-spacing: -0.025em; }
.l-prose h3 { font-size: 22px; letter-spacing: -0.015em; }
.l-prose blockquote {
  margin: 32px 0;
  padding-left: 22px;
  /* DS pull-quote spec — 2px blue-500 left rail. Gold is reserved
     for crest / register hairline / decorative numerals only. */
  border-left: 2px solid var(--l-blue-500);
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--l-ink-2);
}
.l-prose__margin {
  position: relative;
}
.l-prose__margin .l-prose__note {
  position: absolute;
  left: calc(100% + 32px);
  width: 220px;
  top: 0;
  font-family: var(--l-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--l-ink-3);
  text-transform: none;
}

/* ── FIGURE ───────────────────────────────────────────────── */
.l-figure { margin: 32px 0; }
.l-figure img { width: 100%; height: auto; display: block; }
.l-figure figcaption {
  margin-top: 12px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--l-ink-3);
}
.l-figure--wide { max-width: 1200px; margin-inline: auto; }

/* ── PULLQUOTE ───────────────────────────────────────────── */
.l-pullquote {
  margin: 56px auto;
  max-width: 880px;
  padding: 0 var(--l-page-x);
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 5cqi, 48px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--l-ink);
  text-align: center;
}
.l-pullquote cite {
  display: block;
  margin-top: 22px;
  font-family: var(--l-font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
}

/* ── SECTION BREAK (roman numeral) ───────────────────────── */
.l-section-break {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px var(--l-page-x);
  text-align: center;
}
.l-section-break__numeral {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-size: 56px;
  color: var(--l-gold);
}
.l-section-break__rule {
  width: 64px;
  border-top: 1px solid var(--l-rule);
}
.l-section-break__label {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
}

/* ── FICHE (one roster entry) ───────────────────────────── */
.l-fiche {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--l-rule);
}
.l-fiche__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--l-paper-2);
}
.l-fiche__photo img { width: 100%; height: 100%; object-fit: cover; }
.l-fiche__name {
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.l-fiche__dates {
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 14px;
}
.l-fiche__bio {
  font-family: var(--l-font-longform);
  font-size: 17px;
  line-height: 1.6;
  color: var(--l-ink-2);
  margin: 0;
}

/* ── ASYMMETRIC GRID ─────────────────────────────────────── */
.l-asym {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 40px var(--l-page-x);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-asym__cell { overflow: hidden; }
.l-asym__cell img { width: 100%; height: 100%; object-fit: cover; }
.l-asym__cell--lg { grid-column: span 7; aspect-ratio: 4 / 3; }
.l-asym__cell--md { grid-column: span 5; aspect-ratio: 4 / 3; }
.l-asym__cell--sq { grid-column: span 4; aspect-ratio: 1 / 1; }
.l-asym__cell--wd { grid-column: span 8; aspect-ratio: 16 / 9; }

/* ── PROGRAMME LADDER (day-by-day) ───────────────────────── */
.l-programme { padding: 40px var(--l-page-x); max-width: var(--l-content-max); margin-inline: auto; }
.l-programme__day {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--l-rule);
}
.l-programme__day-label {
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l-blue-500);
}
.l-programme__row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  padding: 10px 0;
  align-items: baseline;
}
.l-programme__time {
  font-family: var(--l-font-mono);
  font-size: 14px;
  color: var(--l-ink);
}
.l-programme__piece {
  font-family: var(--l-font-display);
  font-size: 17px;
  font-weight: 500;
}
.l-programme__composer {
  font-size: 13px;
  color: var(--l-ink-2);
}
.l-programme__duration {
  font-family: var(--l-font-mono);
  font-size: 12px;
  color: var(--l-ink-3);
}

/* ── REGISTER (closing index of related pages) ──────────────
   Editorial chip-style list of sibling / child pages. Sits on
   paper (not paper-2) so it reads as an extension of the article
   rather than a separate panel. Gold top hairline as the only
   editorial accent. Titles are italic Source Serif — the same
   register article titles use for highlighted proper nouns. */
.l-register {
  padding: 56px var(--l-page-x) 64px;
  background: var(--l-paper);
  max-width: 920px;
  margin-inline: auto;
  border-top: 1px solid var(--l-gold);
}
.l-register__title {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: 24px;
}
.l-register ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  row-gap: 0;
}
.l-register li {
  padding: 0;
  border-top: 1px solid var(--l-rule-2);
  font-size: 19px;
}
.l-register li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--l-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--l-ink);
  text-decoration: none;
  transition: color var(--l-dur) var(--l-ease-out);
}
.l-register li a::after {
  content: '→';
  font-family: var(--l-font-mono);
  font-style: normal;
  font-size: 15px;
  color: var(--l-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--l-dur) var(--l-ease-out), transform var(--l-dur) var(--l-ease-out);
}
.l-register li a:hover {
  color: var(--l-gold-dk);
}
.l-register li a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── NEWS GRID & LEAD LIST ──────────────────────────────── */
.l-news {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  padding: 0 var(--l-page-x);
}
.l-news__lead {
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  overflow: hidden;
  background: var(--l-paper);
}
.l-news__lead img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.l-news__lead-body { padding: 28px 32px 32px; }
.l-news__lead-title {
  font-family: var(--l-font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 14px 0;
}
.l-news__rest { display: flex; flex-direction: column; gap: 16px; }
.l-news__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--l-rule);
}
.l-news__item:first-child { border-top: 1px solid var(--l-rule); }
.l-news__item img { aspect-ratio: 1 / 1; object-fit: cover; }
.l-news__item h4 {
  font-family: var(--l-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.l-news__item p {
  font-size: 13px;
  color: var(--l-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── HIDE AUTHOR EVERYWHERE ─────────────────────────────── */
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-author-avatar,
.wp-block-post-author-biography,
.entry-meta .author,
.byline { display: none !important; }

/* ── ARTICLE (single post) ─────────────────────────────
   Shared 1200px container for header + hero + body so the left
   edge stays consistent.  Body uses a 3-column grid: TOC sidebar
   (sticky on desktop) · prose · right aside for inline callouts. */
.l-article {
  --l-article-max:   1200px;
  --l-article-prose: 720px;
  --l-article-aside: 200px;
  --l-article-gap:   48px;
}
.l-article > .l-crumbs,
.l-article > .l-article__head,
.l-article > .l-article__hero,
.l-article > .l-article__body {
  max-width: var(--l-article-max);
  margin-inline: auto;
}
.l-article__head {
  padding: 16px var(--l-page-x) 32px;
}
.l-article__meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.l-article__meta > * { margin: 0 !important; }
/* Article category — same muted gold treatment as the hero
   breadcrumb so pages and posts share one accent register
   above the title (consistency across all pages + posts). */
.l-article__category {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-gold);
  opacity: 0.78;
  margin: 0;
}
.l-article__category a {
  color: inherit;
  text-decoration: none;
  border: 0;
}
.l-article__category a:hover { color: var(--l-gold-lt); opacity: 1; }
/* Per the design-system spec for single news article titles:
   default to Hanken Grotesk bold (sans) — italic Source Serif is
   reserved for proper nouns inside the title that the editor wraps
   in <em> (e.g. "<em>Tosca</em> tagħlaq l-istaġun..."). */
h1.l-article__title,
.l-article__title.wp-block-post-title,
.l-article__title {
  font-family: var(--l-font-display) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 7cqi, 80px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 20px 0 24px;
  color: var(--l-ink);
}
.l-article__title em,
.l-article__title i {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
}
/* Lede in italic Source Serif — the editorial flourish from the
   design system's news-article reference. */
.l-article__lede {
  font-family: var(--l-font-editorial);
  font-size: clamp(18px, 2cqi, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--l-ink-2);
  letter-spacing: -0.005em;
  margin: 0 0 32px;
  max-width: 720px;
}
.l-article__lede em,
.l-article__lede i {
  font-style: normal;
}
.l-article__hero-caption {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin: 12px auto 0;
  max-width: 1200px;
  padding: 0 var(--l-page-x);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.l-article__hero-caption b { color: var(--l-ink); font-weight: 500; }
.l-article__date {
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-ink-3);
}
.l-article__hero {
  margin: 0 auto 56px;
  max-width: 1200px;
}
.l-article__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Article body grid — TOC | prose | aside. The DS treats the article
   as a three-column read on desktop; the prose track is the only
   sized column, the asides shrink to fit. Mobile collapses to a
   single prose column and hides the TOC entirely (the inline floating
   "Indiċi" label was always a noop on phone). */
.l-article__body {
  display: grid;
  /* Prose fills the content frame — the same width as the header and
     hero above — so the body never reads as a narrow strip floating in
     the page. A post with an auto-TOC gets a left rail; the related
     aside (empty unless the editor adds a callout) is dropped. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--l-article-gap);
  padding-inline: var(--l-page-x);
}
.l-article__body > * { min-width: 0; }
.l-article__body:has( .l-toc__list ) {
  grid-template-columns: minmax(0, var(--l-article-aside)) minmax(0, 1fr);
}
.l-article__toc   { position: sticky; top: 96px; align-self: start; }
.l-article__prose { max-width: none; }
.l-article__aside { display: none; }

/* Article body reads at 17px / 1.6 — the design-system 15px base is
   comfortable for cards and UI but runs small for long-form on a
   phone. Same DM Sans, just sized for sustained reading. Scoped to
   the prose track so cards, captions, and meta keep their sizes. */
.l-article__prose p,
.l-article__prose li {
  font-size: 17px;
  line-height: 1.6;
}

@container page (max-width: 1024px) {
  .l-article__body { grid-template-columns: minmax(0, 1fr); }
  .l-article__toc { display: none; }
}

/* Full-bleed hero on mobile — the 4:3 ratio reads better than the
   desktop 16:9 for portrait subject matter (shrines, processions,
   theatre interiors). */
@container page (max-width: 700px) {
  .l-article__hero {
    margin: 0 0 32px;
    max-width: none;
    padding-inline: 0;
  }
  .l-article__hero img {
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
  .l-article__head { padding: 28px var(--l-page-x) 20px; }
}

/* Article TOC — JS scroll-spy populates an <ol class="l-toc__list">
   inside this aside. When the post has no h2/h3, the aside stays
   empty and we hide it server-side so the "Indiċi" label doesn't
   flash before JS runs. Modern browsers only (Chrome 105+, Safari
   15.4+, Firefox 121+); older browsers will see the bare label,
   which is acceptable. */
.l-article__toc:not(:has(.l-toc__list)) {
  display: none;
}

/* ── LEGACY (blue-950 editorial moment) ─────────────────── */
.l-legacy {
  background: var(--l-blue-950);
  color: var(--l-paper);
  padding:
    104px
    max(var(--l-page-x), var(--l-safe-right))
    112px
    max(var(--l-page-x), var(--l-safe-left));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.l-legacy__glow {
  position: absolute;
  top: -200px; right: -200px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--l-blue-500) 0%, transparent 65%);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.l-legacy__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 64px;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-legacy__eyebrow {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* DS on-dark eyebrow = blue-200 (matches hero eyebrow + DS
     editorial-dark hero spec). Keeps eyebrows site-wide on the
     blue family, not split across blue/gold. */
  color: var(--l-blue-200, #a8c4ec);
}
.l-legacy__hairline {
  flex: 1;
  border-top: 1px solid rgba(184, 146, 58, 0.40);
  max-width: 220px;
}
.l-legacy__sub {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 192, 230, 0.85);
}
.l-legacy__body {
  max-width: 880px;
  margin-inline: auto;
}
.l-legacy__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 9cqi, 112px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  color: var(--l-paper);
}
.l-legacy__summary {
  font-family: var(--l-font-body);
  font-size: clamp(17px, 1.5cqi, 20px);
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.85);
  max-width: 680px;
  margin: 0;
}
@container page (max-width: 700px) {
  .l-legacy { padding-top: 72px; padding-bottom: 80px; }
  .l-legacy__head { margin-bottom: 40px; }
  .l-legacy__title { margin-bottom: 24px; }
}

/* ── TRINITY (Banda · Teatru · Festa cards) ─────────────
   Three editorial cards closing the homepage. Per-section card with a
   kicker (01 · 03), a factual stat (Mit-1864 / Mill-1976 / 15 ta'
   Awwissu), the page title, an intro paragraph pulled from the page
   body, and an Esplora link. Optional photo on top when the linked
   page has a featured image (cinematic carrier). */
.l-trinity {
  padding: var(--l-section-y) max(var(--l-page-x), var(--l-safe-left));
  padding-right: max(var(--l-page-x), var(--l-safe-right));
  background: var(--l-paper);
}
.l-trinity__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-trinity__card {
  display: flex;
  flex-direction: column;
  background: var(--l-paper);
  /* 0-spread box-shadow as the border — iOS Safari antialiases
     1px borders on rounded corners unevenly at high DPR so the
     line appears to thin out / vanish in places. A shadow paints
     uniformly. */
  box-shadow: 0 0 0 1px var(--l-rule);
  border: 0;
  border-radius: 12px;
  color: var(--l-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--l-dur-slow) var(--l-ease-out),
              box-shadow var(--l-dur-slow) var(--l-ease-out);
}
.l-trinity__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(10, 14, 26, 0.22), var(--l-shadow);
}
.l-trinity__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--l-paper-2);
  overflow: hidden;
}
.l-trinity__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.l-trinity__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
}
.l-trinity__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.l-trinity__kicker {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-ink-3);
}
.l-trinity__stat {
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--l-blue-500);
}
.l-trinity__title {
  font-family: var(--l-font-display);
  font-size: clamp(26px, 3cqi, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--l-ink);
  margin: 0 0 10px;
}
.l-trinity__intro {
  font-family: var(--l-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--l-ink-2);
  margin: 0;
}
.l-trinity__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--l-rule);
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--l-ink);
}
.l-trinity__cta svg { transition: transform var(--l-dur) var(--l-ease-out); }
.l-trinity__card:hover .l-trinity__cta svg { transform: translateX(3px); }

/* Below 1000px (tablet + mobile): horizontal swipe carousel with
   scroll snap. Three cards in a row crowd the long Maltese titles
   ("Teatru tal-Opra Aurora", "Festa ta' Santa Marija") under that
   width; a 2-col grid leaves a lone empty cell. The carousel is
   the cleanest, most premium fallback. */
@container page (max-width: 1000px) {
  .l-trinity {
    padding-left: 0;
    padding-right: 0;
  }
  .l-trinity__inner {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--l-page-x) 8px;
    scrollbar-width: none;
  }
  .l-trinity__inner::-webkit-scrollbar { display: none; }
  .l-trinity__card {
    flex: 0 0 60%;
    max-width: 420px;
    scroll-snap-align: center;
  }
}
@container page (max-width: 700px) {
  .l-trinity__inner { padding: 0 var(--l-page-x-mobile) 8px; }
  .l-trinity__card {
    flex: 0 0 84%;
    max-width: 340px;
  }
  .l-trinity__body { padding: 24px 22px 22px; }
}

/* ── NEWS SPOTLIGHT — 4-card grid of recent posts ─────────────────────── */
.l-news-spotlight {
  /* The mosaic hero butts right up against the news section — the
     section eyebrow rule is the visual break, not vertical air.
     Bottom keeps the full section rhythm into the next module. */
  padding-top: 40px;
  padding-bottom: var(--l-section-y);
  /* The __head and __grid manage their own max-width + page-x gutter,
     so the inherited .l-section side padding would double the inset and
     push the eyebrow + first card right of the section rule. Zero it
     out so content sits at a single, consistent left gutter. */
  padding-inline: 0;
}
@container page (max-width: 700px) {
  .l-news-spotlight { padding-top: 28px; }
}
.l-news-spotlight__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--l-content-max);
  margin: 0 auto 32px;
  padding: 0 var(--l-page-x) 22px;
  border-bottom: 1px solid var(--l-rule);
}
.l-news-spotlight__head .l-tag {
  font-size: 12px;
  letter-spacing: 0.20em;
}

/* 4-up grid of news cards — the homepage editorial "lead" beat is now
   the mosaic hero above. Cards are visually 1:1 here, image-on-top,
   kicker + title underneath. Collapses to 2-up on tablet and 1-up
   on mobile via container queries below. */
.l-news-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: var(--l-content-max);
  margin-inline: auto;
  padding: 0 var(--l-page-x);
}

.l-news-spotlight__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--l-ink);
  background: var(--l-paper);
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  overflow: hidden;
  transition: transform var(--l-dur-slow) var(--l-ease-out), box-shadow var(--l-dur-slow) var(--l-ease-out);
}
.l-news-spotlight__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--l-shadow);
}
.l-news-spotlight__item-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--l-paper-2);
  position: relative;
}
.l-news-spotlight__item-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-news-spotlight__item:hover .l-news-spotlight__item-media img { transform: scale(1.03); }
/* Empty media state for cards without an attached image. */
.l-news-spotlight__item-media--empty {
  background: linear-gradient(180deg, var(--l-paper-2), var(--l-paper-3));
}
.l-news-spotlight__item-body {
  padding: 18px 20px 20px;
}
.l-news-spotlight__item-meta {
  display: flex;
  gap: 12px;
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 10px;
}
.l-news-spotlight__item-meta span:first-child { color: var(--l-blue-500); }
.l-news-spotlight__item-title {
  font-family: var(--l-font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--l-ink);
}
/* Editorial accent — `<em>` inside any title renders Source Serif italic.
   Plain titles (the majority) stay sans Hanken — design-system rule:
   "italic is the accent, not the foundation". */
.l-news-spotlight__item-title em,
.l-news-spotlight__item-title i {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
}
.l-news-spotlight__item:hover .l-news-spotlight__item-title { color: var(--l-blue-500); }

/* Responsive grid — 4 across on desktop, 2 across on tablet,
   1 across (vertical stack) on phone. */
@container page (max-width: 1024px) {
  .l-news-spotlight__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
/* Mobile — edge-to-edge horizontal snap-scroll rail. The mosaic
   hero above provides the editorial lead, so on phones the news
   block is a single tease row: 4 compact cards, swipe horizontally
   to advance. First card aligns to the page padding; the next card
   peeks off the right edge to signal "swipe for more" — native iOS
   carousel feel (App Store / Apple News). */
@container page (max-width: 700px) {
  .l-news-spotlight__grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 8px 0 12px;
    margin-inline: 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--l-page-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .l-news-spotlight__grid::-webkit-scrollbar { display: none; }
  .l-news-spotlight__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
    border: 0;
    box-shadow: var(--l-shadow-sm);
  }
  .l-news-spotlight__item:first-child { margin-left: var(--l-page-x); }
  .l-news-spotlight__item:last-child  { margin-right: var(--l-page-x); }
  .l-news-spotlight__item-media { aspect-ratio: 16 / 10; }
  .l-news-spotlight__item-body  { padding: 16px 18px 20px; }
  .l-news-spotlight__item-title { font-size: 16px; line-height: 1.22; }
}

@container page (max-width: 700px) {
  /* Header — keep the tag and the "more" link on a single row,
     left/right aligned. */
  .l-news-spotlight__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 var(--l-page-x) 14px;
    margin-bottom: 20px;
    text-align: left;
  }
  .l-news-spotlight__head .l-tag { margin: 0; }
  .l-news-spotlight__head .l-link { font-size: 12px; }
}

/* ── SECTIONS INDEX (typographic ladder) ─────────────────── */

/* ── SECTIONS INDEX (typographic ladder) ─────────────────── */
.l-sections-index {
  background: var(--l-paper);
  padding: var(--l-section-y) max(var(--l-page-x), var(--l-safe-left));
  padding-right: max(var(--l-page-x), var(--l-safe-right));
}
.l-sections-index__row {
  display: grid;
  grid-template-columns: 56px 2.5fr 3fr 1.4fr 96px;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--l-rule);
  color: var(--l-ink);
  text-decoration: none;
  transition: padding-left var(--l-dur) var(--l-ease-out), background var(--l-dur) var(--l-ease-out);
}
.l-sections-index__row:last-child { border-bottom: 1px solid var(--l-rule); }
.l-sections-index__row:hover { padding-left: 12px; }
.l-sections-index__roman {
  font-family: var(--l-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--l-gold);
}
.l-sections-index__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.l-sections-index__sub {
  font-size: 14.5px;
  color: var(--l-ink-2);
}
.l-sections-index__stat {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  text-align: right;
}
.l-sections-index__thumb {
  width: 96px;
  aspect-ratio: 4 / 3;
  background: var(--l-paper-2);
  overflow: hidden;
}
.l-sections-index__thumb img { width: 100%; height: 100%; object-fit: cover; }
@container page (max-width: 1024px) {
  .l-sections-index__row { grid-template-columns: 44px 1fr 80px; }
  .l-sections-index__sub,
  .l-sections-index__stat { display: none; }
  .l-sections-index__title { font-size: 26px; }
}
@container page (max-width: 700px) {
  .l-sections-index__row { grid-template-columns: 36px 1fr; gap: 18px; padding: 22px 0; }
  .l-sections-index__thumb { display: none; }
  .l-sections-index__title { font-size: 22px; }
}

/* ── NEWS SPOTLIGHT (homepage lead + secondary grid) ───── */
.l-spotlight {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 0 var(--l-page-x);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-spotlight__lead {
  display: block;
  text-decoration: none;
  color: var(--l-ink);
}
.l-spotlight__lead-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--l-paper-2);
  position: relative;
}
.l-spotlight__lead-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-spotlight__lead:hover .l-spotlight__lead-media img { transform: scale(1.025); }
.l-spotlight__lead-meta {
  display: flex;
  gap: 14px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 14px;
}
.l-spotlight__lead-meta span:first-child { color: var(--l-blue-500); }
.l-spotlight__lead-title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4cqi, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.l-spotlight__lead:hover .l-spotlight__lead-title { color: var(--l-blue-500); }
.l-spotlight__lead-excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--l-ink-2);
  margin: 0;
  max-width: 580px;
}
.l-spotlight__rest {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--l-rule);
}
.l-spotlight__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--l-rule);
  text-decoration: none;
  color: var(--l-ink);
  transition: opacity var(--l-dur) var(--l-ease-out);
}
.l-spotlight__item:hover { opacity: 0.7; }
.l-spotlight__item-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--l-paper-2);
}
.l-spotlight__item-media img { width: 100%; height: 100%; object-fit: cover; }
.l-spotlight__item-kicker {
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-blue-500);
  margin-bottom: 4px;
}
.l-spotlight__item-title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.l-spotlight__item-date {
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--l-ink-3);
}
@container page (max-width: 1024px) {
  .l-spotlight { grid-template-columns: 1fr; gap: 40px; }
}
@container page (max-width: 700px) {
  .l-spotlight { padding: 0 var(--l-page-x-mobile); }
  .l-spotlight__item { grid-template-columns: 80px 1fr; gap: 14px; }
  .l-spotlight__lead-title { font-size: 28px; }
}

/* ── HOMEPAGE — HIGHLIGHTS / MILESTONES STRIP ─────────── */
.l-highlights {
  background: var(--l-paper-2);
  padding: var(--l-section-y) var(--l-page-x);
}
.l-highlights__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--l-content-max);
  margin: 0 auto 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--l-rule);
}
.l-highlights__head h2 {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4cqi, 40px);
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.l-highlights__strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  max-width: var(--l-content-max);
  margin: 0 auto;
}
.l-highlights__item {
  padding: 22px 0;
  border-top: 1px solid var(--l-ink);
}
.l-highlights__year {
  font-family: var(--l-font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--l-blue-500);
  font-variant-numeric: lining-nums tabular-nums;
}
.l-highlights__event {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  margin-top: 14px;
  color: var(--l-ink);
}
@container page (max-width: 1024px) {
  .l-highlights__strip { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@container page (max-width: 700px) {
  .l-highlights__strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .l-highlights__year { font-size: 26px; }
  .l-highlights__event { font-size: 14px; }
}

/* ── SECTION LINKS (homepage: Soċjetà / Banda / Teatru / Festa / Fergħat) */
.l-sections {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 0 var(--l-page-x);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-sections__card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  color: var(--l-paper);
  text-decoration: none;
  background: var(--l-blue-950);
  isolation: isolate;
}
.l-sections__card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-sections__card:hover img { transform: scale(1.04); }
.l-sections__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 10, 29, 0.25) 0%, rgba(2, 10, 29, 0.85) 100%);
}
.l-sections__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
}
.l-sections__card-kicker {
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--l-blue-light, #a8c4ec);
  margin-bottom: 8px;
}
.l-sections__card-title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4cqi, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--l-paper);
  margin: 0;
}
@container page (max-width: 1024px) {
  .l-sections { grid-template-columns: repeat(3, 1fr); }
  .l-sections__card:nth-child(4),
  .l-sections__card:nth-child(5) { grid-column: span 1; }
}
@container page (max-width: 700px) {
  .l-sections { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 var(--l-page-x-mobile); }
  .l-sections__card:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 8 / 5; }
}

/* ── NEWS ROW (homepage) ─────────────────────────────────── */
.l-news-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--l-rule);
}
.l-news-row__head .l-tag {
  font-size: 12px;
  letter-spacing: 0.18em;
}
.l-news-row__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.l-news-row__card { display: flex; flex-direction: column; }
.l-news-row__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--l-paper-2);
  margin-bottom: 20px;
  position: relative;
}
.l-news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-news-row__card:hover .l-news-row__media img { transform: scale(1.03); }
.l-news-row__meta {
  display: flex;
  gap: 14px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 14px;
}
.l-news-row__meta span:first-child { color: var(--l-blue-500); }
.l-news-row__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.l-news-row__title a {
  color: var(--l-ink);
  text-decoration: none;
  transition: color var(--l-dur) var(--l-ease-out);
}
.l-news-row__title a:hover { color: var(--l-blue-500); }
.l-news-row__excerpt {
  font-family: var(--l-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--l-ink-2);
  margin: 0;
}
@container page (max-width: 1024px) {
  .l-news-row__grid { grid-template-columns: repeat(2, 1fr); }
  .l-news-row__card:nth-child(3) { grid-column: 1 / -1; }
  .l-news-row__card:nth-child(3) .l-news-row__media { aspect-ratio: 21 / 9; }
}
@container page (max-width: 700px) {
  .l-news-row__grid { grid-template-columns: 1fr; gap: 32px; }
  .l-news-row__card:nth-child(3) .l-news-row__media { aspect-ratio: 4 / 3; }
  .l-news-row__title { font-size: 24px; }
}

.l-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 var(--l-page-x);
}
.l-news-grid article {
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius);
  overflow: hidden;
  background: var(--l-paper);
}
.l-news-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
.l-news-grid__body { padding: 20px 22px 26px; }
.l-news-grid h3 {
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  margin: 12px 0 6px;
}

/* ── PAGE HEAD (archive landing — Aħbarijiet, etc.) ─────────
   Spans the same 1440px content area as the grid below so the
   title sits at the grid's left edge instead of being centered
   in a 720px contentSize box. */
.l-page-head {
  padding: 40px 0 32px;
  text-align: left;
}
.l-page-head__inner {
  max-width: 1640px;          /* match the news-archive grid below
                                  so the title aligns with the first
                                  card column on wide screens. */
  margin-inline: auto;
  padding: 0 var(--l-page-x);
}
.l-page-head__kicker {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Same muted gold as the hero breadcrumb so every page label
     above the title reads in one consistent accent register. */
  color: var(--l-gold);
  opacity: 0.78;
  margin-bottom: 12px;
}
.l-page-head__title {
  font-family: var(--l-font-display);
  font-size: clamp(40px, 5.4cqi, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--l-ink);
}

/* ── NEWS ARCHIVE (Aħbarijiet listing) ─────────────────── */
.l-news-archive {
  padding: 0 0 var(--l-section-y);
}
.l-news-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  /* Wider than the global 1440px content-max — at 1920px the
     stock 1440 container left ~240px of dead paper each side,
     making the 3 cards feel stranded. Each card is now ~500px
     wide on a 1920 monitor, comfortable for the title type. */
  max-width: 1640px;
  margin-inline: auto;
  padding: 0 var(--l-page-x);
}
.l-news-archive__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--l-ink);
  background: var(--l-paper);
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  overflow: hidden;
  transition: transform var(--l-dur-slow) var(--l-ease-out), box-shadow var(--l-dur-slow) var(--l-ease-out);
}
.l-news-archive__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--l-shadow);
}
.l-news-archive__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--l-paper-2);
}
.l-news-archive__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-news-archive__item:hover .l-news-archive__media img { transform: scale(1.03); }
.l-news-archive__media--empty {
  background: linear-gradient(180deg, var(--l-paper-2), var(--l-paper-3));
}
/* Text-only archive — no card has a featured image. */
.l-news-archive__grid--textonly .l-news-archive__item {
  background: transparent;
}
.l-news-archive__grid--textonly .l-news-archive__body {
  padding: 26px 26px 28px;
  min-height: 180px;
}
.l-news-archive__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
  min-height: 200px;
}
.l-news-archive__meta {
  display: flex;
  gap: 12px;
  font-family: var(--l-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 12px;
}
.l-news-archive__meta span:first-child { color: var(--l-blue-500); }
.l-news-archive__title {
  font-family: var(--l-font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--l-ink);
}
.l-news-archive__title em,
.l-news-archive__title i {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
}
.l-news-archive__item:hover .l-news-archive__title { color: var(--l-blue-500); }
.l-news-archive__excerpt {
  font-family: var(--l-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--l-ink-2);
  margin: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pagination — chip style per DS Components (32×32, 16px radius,
   ink bg active). Reserve bottom padding so the floating Donate
   pill (when present) doesn't sit on top of the last page number. */
.l-news-archive__pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
  padding: 0 var(--l-page-x) calc(56px + var(--l-safe-bottom));
  flex-wrap: wrap;
}
.l-news-archive__pagination a,
.l-news-archive__pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--l-rule);
  border-radius: 16px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--l-ink);
  text-decoration: none;
  background: var(--l-paper);
}
.l-news-archive__pagination a:hover {
  background: var(--l-paper-2);
  border-color: var(--l-ink);
}
.l-news-archive__pagination .current {
  background: var(--l-ink);
  color: var(--l-paper);
  border-color: var(--l-ink);
}
@container page (max-width: 1024px) {
  .l-news-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@container page (max-width: 700px) {
  .l-news-archive__grid { grid-template-columns: 1fr; gap: 20px; }
  .l-news-archive__body { min-height: 0; }
  .l-page-head { padding: 24px 0 24px; }
  .l-page-head__inner { padding: 0 var(--l-page-x); }
}

/* ── EVENT ROW · LADDER ─────────────────────────────────── */
.l-events {
  display: flex; flex-direction: column;
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  overflow: hidden;
}
.l-events__row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  border-top: 1px solid var(--l-rule);
}
.l-events__row:first-child { border-top: 0; }
.l-events__row--featured { background: rgba(14, 63, 140, 0.04); }
.l-events__date {
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.l-events__day {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--l-blue-500);
  margin-top: 4px;
}
.l-events__title {
  font-family: var(--l-font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.l-events__venue { font-size: 13px; color: var(--l-ink-2); margin-top: 3px; }
.l-events__time {
  font-family: var(--l-font-display);
  font-size: 15px;
  color: var(--l-ink-2);
}

/* ── OPERA SEASON STRIP (dark) ──────────────────────────── */
.l-season {
  background: var(--l-ink);
  color: var(--l-paper);
  padding: var(--l-section-y) var(--l-page-x);
}
.l-season__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.l-season__title {
  font-family: var(--l-font-display);
  font-size: clamp(40px, 7cqi, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--l-paper);
  margin: 0;
}
.l-season__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.l-season__card {
  background: #211e18;
  border-radius: var(--l-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.l-season__card img { aspect-ratio: 3 / 4; object-fit: cover; }
.l-season__media { position: relative; }
.l-season__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  border-radius: var(--l-radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--l-paper);
  font-family: var(--l-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.l-season__tag--blue { background: var(--l-blue-500); }
.l-season__roman {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.l-season__body { padding: 20px; }
.l-season__composer { font-family: var(--l-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.l-season__opera {
  font-family: var(--l-font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
  color: var(--l-paper);
}
.l-season__dates {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* ── THREE PILLARS ──────────────────────────────────────── */
.l-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 var(--l-page-x);
}
.l-pillars__card {
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius);
  overflow: hidden;
  background: var(--l-paper);
  transition: transform var(--l-dur-slow) var(--l-ease-out);
}
.l-pillars__card:hover { transform: translateY(-2px); }
.l-pillars__card img { aspect-ratio: 4 / 3; object-fit: cover; }
.l-pillars__body { padding: 24px 24px 26px; }
.l-pillars__head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.l-pillars__stat {
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--l-blue-500);
}
.l-pillars__stat-label { font-size: 11px; color: var(--l-ink-3); margin-left: 4px; }
.l-pillars__title {
  font-family: var(--l-font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 14px 0 6px;
}
.l-pillars__sub { color: var(--l-ink-2); font-size: 14px; margin: 0; }
.l-pillars__foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--l-rule);
  display: flex; justify-content: space-between;
}

/* ── SUPPORT STRIP (donation CTA) ────────────────────────
   On paper-2 with a hairline above/below — per the design system's
   "never a full-blue page" rule.  The visual rhythm of paper →
   paper-2 → paper between sections is the design system's editorial
   transition.  Title and CTA still command attention via type. */
.l-support {
  background: var(--l-paper-2);
  color: var(--l-ink);
  padding:
    var(--l-section-y)
    max(var(--l-page-x), var(--l-safe-right))
    var(--l-section-y)
    max(var(--l-page-x), var(--l-safe-left));
  border-top: 1px solid var(--l-rule);
  border-bottom: 1px solid var(--l-rule);
}
.l-support__inner {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.l-support__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 36px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-blue-500);
}
.l-support__hairline {
  display: block;
  width: 56px;
  border-top: 1px solid var(--l-rule);
}
.l-support__title {
  font-family: var(--l-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 7cqi, 88px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--l-ink);
  margin: 0 0 24px;
}
.l-support__body {
  font-family: var(--l-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--l-ink-2);
  max-width: 620px;
  margin: 0 auto 36px;
}
.l-support__body p { margin: 0; }
.l-support__actions {
  display: flex;
  justify-content: center;
}

/* ── HISTORY SPLIT (panel section) ─────────────────────── */
.l-history {
  background: var(--l-paper-2);
  padding: var(--l-section-y) var(--l-page-x);
}
.l-history__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-history__title {
  font-family: var(--l-font-display);
  font-size: clamp(48px, 10cqi, 88px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 16px 0 28px;
}
.l-history__lede {
  font-size: 17px;
  color: var(--l-ink-2);
  max-width: 480px;
  line-height: 1.55;
  margin: 0 0 36px;
}
.l-history__milestones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.l-history__milestones > div {
  background: var(--l-paper);
  border-radius: var(--l-radius);
  padding: 18px;
  border: 1px solid var(--l-rule);
}
.l-history__milestones > div:nth-child(odd) { transform: translateY(20px); }
.l-history__milestones > div:nth-child(even) { transform: translateY(-20px); }
.l-history__milestones img { aspect-ratio: 4 / 3; border-radius: 4px; }
.l-history__y {
  font-family: var(--l-font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 14px 0 4px;
}

/* ── DEPARTMENT DIRECTORY (contact) ────────────────────── */
.l-directory {
  display: block;
}
.l-directory__row {
  display: grid;
  grid-template-columns: 240px 1fr minmax(220px, auto);
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--l-rule);
  align-items: baseline;
}
.l-directory__row:last-child {
  border-bottom: 1px solid var(--l-rule);
}
.l-directory__role {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
  line-height: 1.4;
}
.l-directory__name {
  font-family: var(--l-font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.l-directory__sub { font-size: 13px; color: var(--l-ink-2); margin-top: 2px; }
.l-directory__email {
  font-family: var(--l-font-mono);
  font-size: 12px;
  color: var(--l-blue-500);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container page (max-width: 700px) {
  .l-directory__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .l-directory__email { text-align: left; }
}

/* ── PJAZZA / ADDRESS CARD ─────────────────────────────────
   Card with the Society's real address. The address itself is a
   tap-to-maps link (mobile opens native Maps); phone is tel:; emails
   are mailto:. Keep the visual ink-on-paper but make every line a
   native action. */
.l-pjazza { background: var(--l-paper-2); border-radius: var(--l-radius-lg); overflow: hidden; }
.l-pjazza svg { width: 100%; height: auto; display: block; }
.l-pjazza__legend {
  padding: 18px 22px;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  border-top: 1px solid var(--l-rule);
}
.l-pjazza__address {
  display: block;
  font-family: var(--l-font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--l-ink);
  text-decoration: none;
}
.l-pjazza__address:hover { color: var(--l-blue-500); }
.l-pjazza__contacts {
  margin-top: 24px;
  border-top: 1px solid var(--l-rule);
  padding-top: 18px;
  font-family: var(--l-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--l-ink-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l-pjazza__contacts a {
  display: block;
  min-height: 32px;
  padding: 6px 0;
  color: var(--l-blue-500);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.l-pjazza__contacts a:hover { text-decoration: underline; }

/* ── FORMS ─────────────────────────────────────────────── */
.l-form { display: flex; flex-direction: column; gap: 20px; }
.l-form label {
  display: block;
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-ink-2);
  margin-bottom: 8px;
}
.l-form input[type=text],
.l-form input[type=email],
.l-form input[type=tel],
.l-form input[type=search],
.l-form textarea,
.l-form select {
  width: 100%;
  padding: 12px 14px;
  background: var(--l-paper);
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius);
  font-family: var(--l-font-body);
  /* 16px floor — iOS Safari auto-zooms on focus for inputs <16px.
     DS spec is 14px (a desktop figure); iOS behavior wins for form
     fields. */
  font-size: 16px;
  color: var(--l-ink);
}
.l-form input:focus, .l-form textarea:focus, .l-form select:focus {
  outline: 2px solid var(--l-blue-500);
  outline-offset: 1px;
  border-color: transparent;
}
.l-form button[type=submit] {
  align-self: flex-start;
  background: var(--l-ink);
  color: var(--l-paper);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--l-radius-pill);
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.l-form button[type=submit]:hover { background: var(--l-blue-500); }

/* ── MULTIMEDIA: WAVEFORM, RECORDINGS, VIDEO REEL ─────── */
.l-waveform {
  background: var(--l-blue-800);
  color: var(--l-paper);
  border-radius: var(--l-radius-lg);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 32px;
  align-items: center;
}
.l-waveform__cover {
  width: 220px;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.04);
  border-radius: var(--l-radius);
}
.l-waveform__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.l-waveform__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 64px;
  margin: 18px 0;
}
.l-waveform__bars span {
  display: block;
  width: 3px;
  background: var(--l-blue-light, #a8c4ec);
  border-radius: 1.5px;
  opacity: 0.7;
}
.l-waveform__title {
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--l-paper);
}
.l-waveform__meta {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.l-waveform__play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--l-paper); color: var(--l-blue-800);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
}

.l-recordings { padding: 0; }
.l-recordings__row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 80px 80px;
  gap: 18px;
  padding: 18px var(--l-page-x);
  border-top: 1px solid var(--l-rule);
  align-items: center;
}
.l-recordings__num { font-family: var(--l-font-mono); font-size: 12px; color: var(--l-ink-3); }
.l-recordings__title { font-family: var(--l-font-display); font-size: 17px; font-weight: 500; }
.l-recordings__composer { font-size: 13px; color: var(--l-ink-2); }
.l-recordings__year { font-family: var(--l-font-mono); font-size: 12px; color: var(--l-ink-3); }
.l-recordings__time { font-family: var(--l-font-mono); font-size: 12px; color: var(--l-ink-3); text-align: right; }

.l-video-reel {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  padding: 0 var(--l-page-x);
}
.l-video-reel article {
  position: relative;
  border-radius: var(--l-radius);
  overflow: hidden;
  background: var(--l-blue-950);
  color: var(--l-paper);
  aspect-ratio: 16 / 10;
}
.l-video-reel article:first-child { grid-row: span 2; aspect-ratio: 4 / 5; }
.l-video-reel article img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.l-video-reel__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.l-video-reel__caption h4 {
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--l-paper);
}

.l-galleries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 var(--l-page-x);
}
.l-galleries__cell {
  border-radius: var(--l-radius);
  overflow: hidden;
  background: var(--l-paper-2);
}
.l-galleries__cell img { aspect-ratio: 4 / 3; object-fit: cover; }
.l-galleries__cell-body {
  padding: 14px 18px 18px;
}
.l-galleries__title { font-family: var(--l-font-display); font-size: 18px; font-weight: 500; }
.l-galleries__count { font-family: var(--l-font-mono); font-size: 11px; color: var(--l-ink-3); margin-top: 4px; }

/* ── MEMBERSHIP TIERS ─────────────────────────────────── */
.l-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 var(--l-page-x);
}
.l-tiers__card {
  border: 1px solid var(--l-rule);
  border-radius: var(--l-radius-lg);
  padding: 32px 32px 28px;
  background: var(--l-paper);
  display: flex;
  flex-direction: column;
}
.l-tiers__card--featured {
  background: var(--l-ink);
  color: var(--l-paper);
  border-color: var(--l-ink);
}
.l-tiers__name {
  font-family: var(--l-font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
}
.l-tiers__price {
  font-family: var(--l-font-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 14px 0;
}
.l-tiers__price small {
  font-size: 16px;
  font-weight: 400;
  color: var(--l-ink-3);
}
.l-tiers__features {
  list-style: none; padding: 0; margin: 18px 0 24px;
  flex: 1;
}
.l-tiers__features li {
  font-size: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--l-rule);
}
.l-tiers__features li::before {
  content: '·';
  margin-right: 8px;
  color: var(--l-blue-500);
}

/* ── TICKET CARD (sticky sidebar on production single) ─ */
.l-ticket {
  position: sticky;
  top: 96px;
  border: 1px solid var(--l-ink);
  border-radius: var(--l-radius-lg);
  padding: 28px;
  background: var(--l-paper);
}
.l-ticket__title {
  font-family: var(--l-font-mono);
  font-size: 11px;
  letter-spacing: var(--l-tracking-wider);
  text-transform: uppercase;
  color: var(--l-ink-3);
  margin-bottom: 14px;
}
.l-ticket__price {
  font-family: var(--l-font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--l-blue-500);
}

/* ── BREADCRUMBS (on-paper) ──────────────────────────────
   Single muted ink colour throughout, slash separator. Same
   anatomy as the hero breadcrumb just inverted for light bg. */
.l-crumbs {
  font-family: var(--l-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  padding: 18px var(--l-page-x);
  max-width: var(--l-content-max);
  margin-inline: auto;
}
.l-crumbs a { color: inherit; text-decoration: none; }
.l-crumbs a:hover { color: var(--l-ink); text-decoration: underline; text-underline-offset: 3px; }
.l-crumbs__sep { margin: 0 8px; opacity: 0.45; }

/* ── PAGINATION ────────────────────────────────────────── */
.l-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 48px var(--l-page-x);
}
.l-pagination a,
.l-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-family: var(--l-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--l-ink);
  text-decoration: none;
  border: 1px solid var(--l-rule);
}
.l-pagination .current,
.l-pagination [aria-current="page"] {
  background: var(--l-ink);
  color: var(--l-paper);
  border-color: var(--l-ink);
}
.l-pagination a:hover { border-color: var(--l-ink); }

/* ── FILTER CHIPS ──────────────────────────────────────── */
.l-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.l-chips button, .l-chips a {
  padding: 8px 16px;
  border-radius: var(--l-radius-pill);
  background: transparent;
  color: var(--l-ink);
  border: 1px solid var(--l-rule);
  font-family: var(--l-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.l-chips .is-active,
.l-chips [aria-current="page"] {
  background: var(--l-ink);
  color: var(--l-paper);
  border-color: var(--l-ink);
}

/* ── ACCESSIBILITY ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--l-blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.l-skip {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--l-ink);
  color: var(--l-paper);
  padding: 10px 14px;
  border-radius: var(--l-radius);
  z-index: 1000;
}
.l-skip:focus { top: 8px; }

/* ── RESPONSIVE (container queries — §11) ──────────────── */
@container page (max-width: 1024px) {
  .l-nav__inner { padding: 14px 32px; gap: 24px; }
  .l-nav__links { gap: 18px; font-size: 13px; }
  .l-news       { grid-template-columns: 1fr; }
  .l-pillars    { grid-template-columns: repeat(3, 1fr); }
  .l-season__grid { grid-template-columns: repeat(2, 1fr); }
  .l-news-grid  { grid-template-columns: repeat(2, 1fr); }
  .l-tiers      { grid-template-columns: 1fr; }
  .l-history__grid { grid-template-columns: 1fr; gap: 40px; }
  .l-support__grid { grid-template-columns: 1fr; gap: 32px; }
  .l-galleries  { grid-template-columns: repeat(2, 1fr); }
  .l-directory  { grid-template-columns: 1fr; }
}

@container page (max-width: 900px) {
  /* WP's `.is-layout-flex` injects display:flex with 0,2,0 specificity,
     so the mobile hides need a matching selector to win.  Using
     .l-nav as a parent puts us at 0,2,0 (last declared wins). */
  .l-nav .l-nav__links,
  .l-nav .l-nav__utility { display: none !important; }
  .l-nav .l-nav__burger  { display: inline-flex !important; }
  .l-nav__inner  { padding: 12px var(--l-page-x-mobile); }
  .l-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .l-footer__grid > .l-footer__brand { grid-column: 1 / -1; }
}

@container page (max-width: 700px) {
  :root {
    --l-page-x: var(--l-page-x-mobile);
    --l-section-y: 56px;
  }
  .l-hero-cinematic        { min-height: 540px; }
  .l-hero-cinematic__inner { padding: 32px var(--l-page-x-mobile); min-height: 540px; }
  .l-hero-cinematic__meta  { gap: 24px; }
  .l-pillars               { grid-template-columns: 1fr; }
  .l-season__grid          { grid-template-columns: 1fr; }
  .l-news-grid             { grid-template-columns: 1fr; }
  .l-galleries             { grid-template-columns: 1fr; }
  .l-fiche                 { grid-template-columns: 1fr; }
  .l-register ul           { grid-template-columns: 1fr; }
  .l-events__row           { grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 20px; }
  .l-events__row > :nth-child(3),
  .l-events__row > :nth-child(4) { grid-column: 1 / -1; }
  .l-waveform              { grid-template-columns: 1fr; text-align: left; }
  .l-waveform__cover       { width: 160px; }
  .l-video-reel            { grid-template-columns: 1fr; }
  .l-video-reel article:first-child { grid-row: auto; }
  .l-programme__day        { grid-template-columns: 1fr; gap: 16px; }
  .l-programme__row        { grid-template-columns: 56px 1fr; }
  .l-programme__duration   { grid-column: 1 / -1; }
  .l-recordings__row       { grid-template-columns: 24px 1fr auto; }
  .l-recordings__composer,
  .l-recordings__year      { display: none; }
  .l-asym                  { grid-template-columns: 1fr; gap: 12px; }
  .l-asym__cell--lg,
  .l-asym__cell--md,
  .l-asym__cell--sq,
  .l-asym__cell--wd        { grid-column: span 1; aspect-ratio: 4 / 3; }
  .l-prose__margin .l-prose__note {
    position: static;
    width: auto;
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--l-paper-2);
    border-left: 2px solid var(--l-gold);
  }
  .l-ticket { position: static; }
  /* Sticky → static on mobile per §11. */
  .l-st-root [style*="position:sticky"],
  .l-st-root [style*="position: sticky"],
  .l-au-root [style*="position:sticky"],
  .l-au-root [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* Reduced motion handled in tokens.css too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── FLOATING CTA — app-style donate pill (mobile only) ────────
   Sits over the page content at the bottom of the viewport so
   the primary action is always one tap away. Hidden on tablet+
   where the nav already exposes a Donate pill. */
.l-floating-cta {
  display: none;
  position: fixed;
  right: max(16px, var(--l-safe-right));
  bottom: calc(16px + var(--l-safe-bottom));
  z-index: 15;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--l-blue-500);
  color: var(--l-paper);
  font-family: var(--l-font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(10, 14, 26, 0.18),
    0 8px 24px rgba(10, 14, 26, 0.22);
  transition: transform var(--l-dur) var(--l-ease-out),
              background var(--l-dur) var(--l-ease-out),
              opacity 240ms var(--l-ease-out);
}
.l-floating-cta:hover,
.l-floating-cta:focus-visible {
  background: var(--l-blue-600, #0a3070);
  transform: translateY(-1px);
}
.l-floating-cta:active {
  transform: translateY(0);
}
.l-floating-cta svg {
  flex-shrink: 0;
}
/* Hide on body.l-nav-open so the mobile panel covers cleanly. */
body.l-nav-open .l-floating-cta { display: none !important; }
/* Fade out when the footer is in view so the pill doesn't sit on top
   of the footer's own donation links. Toggled by JS via
   IntersectionObserver. */
body.l-near-footer .l-floating-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@container page (max-width: 700px) {
  .l-floating-cta { display: inline-flex; }
}

/* ── IMAGE SKELETON LOADERS ────────────────────────────────────
   A shimmer placeholder behind any content photo until it loads,
   so lazy/slow images never flash an empty box. Applied to the
   <img> element itself (opaque photos paint over the shimmer on
   load); JS adds .l-img-skel only to not-yet-loaded photos and
   adds .is-loaded on load. Scoped by selector in JS so logos,
   icons and SVGs are never touched. */
@keyframes l-img-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.l-img-skel:not(.is-loaded) {
  background-color: var(--l-paper-2);
  background-image: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0) 25%,
    var(--l-paper-3) 45%,
    var(--l-paper-3) 55%,
    rgba(0, 0, 0, 0) 75%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: l-img-skel-shimmer 1.4s ease-in-out infinite;
}
/* On dark surfaces the shimmer reads in the inverse register. */
.l-on-dark .l-img-skel:not(.is-loaded),
.l-mosaic__media .l-img-skel:not(.is-loaded),
.l-season__media .l-img-skel:not(.is-loaded) {
  background-color: rgba(250, 248, 243, 0.06);
  background-image: linear-gradient(
    100deg,
    rgba(250, 248, 243, 0) 25%,
    rgba(250, 248, 243, 0.12) 45%,
    rgba(250, 248, 243, 0.12) 55%,
    rgba(250, 248, 243, 0) 75%
  );
}
.l-img-skel.is-loaded { animation: none; background: none; }
@media (prefers-reduced-motion: reduce) {
  .l-img-skel:not(.is-loaded) { animation: none; }
}