/* Hlégarður 1956–2026 — v2, the light edition.
   Cream page, dark hero; a handful of dark sections where they carry weight.
   Typography after opensubscriptionplatforms.com: Inter, bold headings with
   tight tracking at 1.15, large calm body text at ~1.6. */

:root {
  /* light ground */
  --cream:    #F2EFE8;   /* page and header */
  --cream-2:  #EAE5DA;   /* alternate band */
  --cream-3:  #cdc7b9;   /* food hero */
  --card:     #FBF9F4;   /* card surface, a shade lifted off the cream */
  --ink:      #16150F;   /* headings */
  --body:     #4F4C44;   /* running text — warm slate */
  --muted:    #6B675E;   /* labels; 4.9:1 on cream */
  --hair:     rgba(22,21,15,.10);

  /* brand */
  --red:       #BE4B45;
  --red-dark:  #A83E38;
  --green:     #4E8F6D;
  --green-ink: #3D7558;  /* green dark enough for text on cream (4.7:1) */
  --rose:      #E0A9A4;
  --mint:      #7FBE9C;

  /* dark sections */
  --dark:    #0C0C0D;
  --dark-2:  #131315;
  --dark-3:  #17171A;
  --on-dark: #F2EFE8;
  --on-dark-body: rgba(242,239,232,.80);
  --band:    #0B0B0C;

  /* Cards: no border, no radius — a barely-there two-layer shadow. */
  --shadow: 0 1px 3px rgba(40,30,10,.06), 0 22px 32px -26px rgba(40,30,10,.28);

  /* Thin rules between items inside a section. On high-density screens
     (phones, most laptops) they are half a CSS pixel — one physical pixel. */
  --rule-w: 1px;
  --rule-c: rgba(22,21,15,.20);

  /* Cards: a very slight rounding. */
  --radius: 4px;

  --display: "Clarendon", "Clarendon URW", "Bitter", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4.4vw, 64px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
@media (min-resolution: 2dppx) { :root { --rule-w: .5px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Keep in-page anchors clear of the pinned header. */
main [id] { scroll-margin-top: 104px; }
@media (max-width: 960px) { main [id] { scroll-margin-top: 86px; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--ink);
}
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--cream); padding: 14px 20px; font-size: 16px;
}
.skip:focus { left: 0; }

/* Icons: one sprite, stroked in the current text colour. */
.ico {
  width: 28px; height: 28px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Per-line black band behind text on the photograph. */
.hl {
  background: var(--band);
  padding: .1em 0;
  box-shadow: .32em 0 0 var(--band), -.32em 0 0 var(--band);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- dark sections ---------- */

.dark {
  background: var(--dark);
  color: var(--on-dark-body);
  --hair: rgba(242,239,232,.14);
  --rule-c: rgba(242,239,232,.24);
}
.dark.two { background: var(--dark-2); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.dark a { color: var(--rose); }
.dark a:hover { color: var(--on-dark); }
.dark .prose, .dark .lead { color: var(--on-dark-body); }
.dark .eyebrow { color: var(--rose); }
.dark .eyebrow.green { color: var(--mint); }
.dark .muted { color: rgba(242,239,232,.58); }

/* ---------- top rule (hidden) + masthead ---------- */

.rule { display: none; height: 5px; position: sticky; top: 0; z-index: 21; }
.rule span { flex-grow: 1; }
.rule span:nth-child(1) { background: var(--red); }
.rule span:nth-child(2) { background: #FFFFFF; }
.rule span:nth-child(3) { background: var(--green); }

/* On a cream page the cream header needs its own edge: a very soft shadow. */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: var(--cream);
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 3vw, 40px);
  padding: 14px var(--gutter);
  box-shadow: 0 1px 0 rgba(22,21,15,.05), 0 10px 24px -18px rgba(22,21,15,.28);
}
.masthead a:not(.btn) { color: var(--ink); }
.masthead a:not(.btn):hover { color: var(--red); }

.brand { display: flex; align-items: center; gap: 18px; }
.brand img { height: clamp(48px, 6vw, 68px); width: auto; display: block; }
.brand .divider { width: 1px; height: 40px; background: rgba(22,21,15,.22); }
.brand .org {
  font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}

.mainnav {
  display: flex; align-items: center;
  gap: clamp(16px, 2.2vw, 30px); font-size: 16px; font-weight: 500;
}

.navtoggle {
  display: none;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.navtoggle span {
  display: block; width: 26px; height: 2px; background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .navtoggle span { transition: none; } }

.mast-right { display: flex; align-items: center; gap: 20px; }
.lang { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.lang .on { font-weight: 600; border-bottom: 2px solid var(--red); padding-bottom: 2px; color: var(--ink); }
.lang .sep { color: rgba(22,21,15,.3); }
.lang a { color: var(--muted); }

/* ---------- buttons, pills ---------- */

/* A shorter label for the header ticket button on the narrowest phones. */
.lbl-short { display: none; }

.btn {
  display: inline-block;
  background: var(--red); color: var(--cream);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  padding: 13px 24px;
  border: 1px solid var(--red);
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--cream); }
.btn-lg { font-size: 17px; padding: 16px 30px; }
.btn-ghost { background: rgba(11,11,12,.72); border-color: rgba(242,239,232,.5); color: var(--cream); }
.btn-ghost:hover { background: rgba(11,11,12,.9); border-color: var(--cream); color: var(--cream); }
.btn-invert { background: var(--cream); color: var(--red); border-color: var(--cream); }
.btn-invert:hover { background: var(--card); color: var(--red-dark); border-color: var(--card); }

/* Quick links take half the page width on a wide screen. */
.quicklinks { max-width: 50%; }
@media (max-width: 900px) { .quicklinks { max-width: none; } }

/* Outlined, fully rounded pills — for quick links and small labels. */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 20px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
}
a.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pill.red { color: var(--red); }
a.pill.red:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
.pill.green { color: var(--green-ink); }

/* ---------- hero (dark photograph, light type) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 62vw, 740px);
  display: flex;
  align-items: center;
  background-color: var(--dark-3);
  background-image: url("hlegardur.jpg");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,12,13,0) 72%, rgba(12,12,13,.55) 100%),
    linear-gradient(90deg, rgba(10,10,11,.42) 0%, rgba(10,10,11,.24) 52%, rgba(10,10,11,.12) 100%);
}
@media (max-width: 780px) {
  .hero { background-position: 50% 46%; align-items: flex-start; }
  .hero::after {
    background: linear-gradient(180deg, rgba(10,10,11,.16) 0%, rgba(10,10,11,.24) 55%, rgba(10,10,11,.7) 100%);
  }
}

.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px;
  padding: clamp(44px, 6vw, 96px) var(--gutter);
  max-width: 1020px;
}
.hero-food {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 62vw, 740px);
  display: flex;
  align-items: center;
  background-color: var(--dark-3);
  background-image: var(--bg-image-mobile);
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  padding: 60px;
}
@media (min-width: 1200px) {
  .hero-food {
    background-image: var(--bg-image-desktop);
  }

}
.hero-food.two { background: var(--dark-2); }
.hero-food h1, .hero-food h2, .hero-food h3 { color: var(--cream-3); }
.hero-food a { color: var(--rose); }
.hero-food a:hover { color: var(--cream-3); }
.hero-food .prose, .hero-food .lead { color: var(--cream-3); }
.hero-food .eyebrow { color: var(--rose); }
.hero-food .eyebrow.green { color: var(--cream-3); }
.hero-food .muted { color: rgba(242,239,232,.58); }


.kicker { font-size: clamp(13px, 1.2vw, 14px); font-weight: 500; letter-spacing: .26em; line-height: 1.7; }
.kicker .hl { color: var(--rose); }

.hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: 1.26;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero h1 .hl { color: var(--on-dark); }

.hero-when { font-size: clamp(16px, 1.45vw, 18px); font-weight: 500; line-height: 1.7; }
.hero-when .hl { color: var(--on-dark); }
.hero-when .date { font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; }

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

.section { padding: clamp(64px, 8vw, 112px) var(--gutter); }
.section.alt { background: var(--cream-2); }
.section.slim { padding-top: clamp(34px, 4vw, 52px); padding-bottom: clamp(34px, 4vw, 52px); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

.section-head {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  max-width: 980px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.faq-section .wrap {
  max-width: 900px;
}
.faq-section .section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

.h2 { font-size: clamp(30px, 3.4vw, 44px); }
.h3 { font-size: clamp(22px, 2.1vw, 28px); }
.eyebrow {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  overflow-wrap: anywhere;
}
.eyebrow.green { color: var(--green-ink); }
.eyebrow.muted { color: var(--muted); }
.lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.55; color: var(--body); max-width: 780px; }
.prose { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.6; color: var(--body); }
.prose + .prose { margin-top: 1em; }
.muted { color: var(--muted); font-size: 16px; }
.footnote { margin-top: 20px; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 780px; }
.subhead { margin-top: clamp(44px, 5vw, 68px); }
.subhead .lead { margin-bottom: clamp(18px, 2vw, 26px); }

/* ---------- info cards ---------- */

.cards {
  display: grid;
  gap: clamp(28px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.cards2 {
  display: grid;
  gap: clamp(28px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.cards.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cards.five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 2.3vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 50px;
}

.card-bottom {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 2.3vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 50px;
  padding-top: 15px;
}

.card .ico { color: var(--red); margin-bottom: 6px; }
.card .ico.green { color: var(--green-ink); }
.card h3 {
  font-size: clamp(18px, 1.55vw, 20px); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3;
}
.card p { font-size: clamp(16px, 1.3vw, 17px); line-height: 1.6; color: var(--body); }
.card ul { list-style: none; margin: 0; padding: 0; }
.card li { font-size: clamp(16px, 1.35vw, 18px); color: var(--ink); padding: 2px 0; }
/* Performer groups: titles held to two lines and bottom-aligned, so the
   names beneath them start on one line across the row. */
.people .eyebrow {
  font-size: 12px; letter-spacing: .07em;
  line-height: 1.35;            /* pinned: the general card-text rule would set 1.6 */
  min-height: calc(2 * 1.35em); /* room for exactly two lines */
  display: flex; align-items: flex-end;
}
.card-bottom .eyebrow {
  font-size: 12px; letter-spacing: .07em;
  line-height: 1.35;            /* pinned: the general card-text rule would set 1.6 */
  min-height: calc(2 * 1.35em); /* room for exactly two lines */
  display: flex; align-items: flex-end;
}
.card .big {
  font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.3; color: var(--ink);
}

/* ---------- featured block: story card left, key facts right ---------- */

.feat {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: start;
  max-width: var(--maxw); margin: 0 auto;
}
/* The key facts come first in the source, so phones and screen readers
   meet them first; on a wide screen the story card takes the left side. */
.feat .featcard { order: 1; }
.feat .featlist { order: 2; position: sticky; top: 120px; }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat .featcard, .feat .featlist { order: 0; }
  .feat .featlist { position: static; }
}

.featcard { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.featcard .body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }

.listhead {
  font-size: clamp(20px, 1.8vw, 24px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--dark-2);
}
.featlist .meta { font-size: 16px; color: var(--muted); padding: 14px 0 12px; }
.featlist ul { list-style: none; margin: 0; padding: 0; }
.featlist { container-type: inline-size; }
.featlist li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0;
  border-top: var(--rule-w) solid var(--rule-c);
}
.featlist li:last-child { border-bottom: var(--rule-w) solid var(--rule-c); }
.featlist .what { font-size: clamp(17px, 1.5vw, 19px); font-weight: 600; line-height: 1.35; color: var(--ink); }
/* "Free" sits inline as a small tinted tag, so every row keeps one height. */
.badge {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; background: rgba(61,117,88,.13);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.5;
  color: var(--green-ink); white-space: nowrap; vertical-align: 2px;
}
.badge-red {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; background: rgba(175, 142, 142, 0.178);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.5;
  color:  rgba(146, 95, 95, 0.651); white-space: nowrap; vertical-align: 2px;
}
/* When the key-facts column is narrow, time goes above the name on every
   row — still one height for all rows, and nothing wraps. */
@container (max-width: 440px) {
  .featlist li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .featlist .when { order: -1; font-size: 15px; color: var(--muted); }
}
.featlist .when { font-size: 17px; font-weight: 500; color: var(--body); white-space: nowrap; /*font-variant-numeric: tabular-nums;*/ }
.deadline { margin: 20px 0 22px; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--red); }

/* Alternating stills from the documentary. CSS-only; one frame holds when
   motion is reduced. */
.stills { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark-3); }
.stills img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  animation: still-cycle 18s infinite;
}
.stills img:nth-child(1) { animation-delay: 0s; }
.stills img:nth-child(2) { animation-delay: 6s; }
.stills img:nth-child(3) { animation-delay: 12s; }
@keyframes still-cycle {
  0%, 100% { opacity: 0; }
  2%, 31%  { opacity: 1; }
  34%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stills img { animation: none; opacity: 0; }
  .stills img:nth-child(1) { opacity: 1; }
}
.stills-credit {
  padding: 10px clamp(24px, 3vw, 40px);
  font-size: 13px; line-height: 1.5; color: var(--muted);
  border-bottom: 1px solid var(--hair);
}

/* ---------- programme cards ---------- */

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

.pcard {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--red);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
}
.pcard.free { border-top-color: var(--green); }
.pcard .ptime {
  font-size: 15px; font-weight: 600; letter-spacing: .1em;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.pcard.free .ptime { color: var(--green-ink); }
.pcard h3 {
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  margin-bottom: 4px;
}
.pcard p { font-size: clamp(16px, 1.3vw, 17px); line-height: 1.6; }
.pcard .actions { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- menu (dark) ---------- */

.menu-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); text-align: center; }
.courses { display: flex; flex-direction: column; }
.course {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 0;
  border-bottom: var(--rule-w) solid var(--rule-c);
}
.course:last-child { border-bottom: 0; }
.course .label { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: rgba(242,239,232,.55); }
.course .dish { font-weight: 700; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -.015em; line-height: 1.2; color: var(--on-dark); }
.course .desc { font-size: 17px; color: rgba(242,239,232,.66); }

/* ---------- location ---------- */

.loc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (max-width: 900px) { .loc { grid-template-columns: 1fr; } }
.address { display: flex; flex-direction: column; gap: 2px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; line-height: 1.4; color: var(--ink); margin-bottom: 18px; }
.mapframe { position: relative; aspect-ratio: 16 / 10; background: var(--cream-2); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(90%);
    -moz-filter:    grayscale(90%);
    -ms-filter:     grayscale(90%);
    -o-filter:      grayscale(90%);
    filter: gray;}
.mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- tickets band (red) ---------- */

.tickets {
  background: var(--red);
  padding: clamp(40px, 5vw, 68px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px 40px;
}
.tickets h2 { font-size: clamp(26px, 3vw, 40px); color: var(--cream); }
.tickets p { font-size: clamp(17px, 1.5vw, 19px); color: rgba(242,239,232,.9); margin-top: 10px; }

/* ---------- sign-up lane (dark: the Flodesk form is styled for dark) ---------- */

.signup-lane {
  background: var(--dark-2);
  padding: clamp(24px, 3.5vw, 48px) var(--gutter);
}
/* One typeface across the site: the Flodesk form arrives with its own fonts
   (a Clarendon heading, Roboto and Helvetica), so it is set to Inter here.
   Delete this rule to let the form use the fonts chosen in Flodesk. */
.signup-lane [data-ff-el="root"],
.signup-lane [data-ff-el="root"] * { font-family: var(--sans) !important; }

/* ---------- FAQ ---------- */

.faq { max-width: 900px; }
.faq details { border-top: var(--rule-w) solid var(--rule-c); }
.faq details:last-child { border-bottom: var(--rule-w) solid var(--rule-c); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 52px 20px 0;
  font-size: clamp(18px, 1.6vw, 20px); font-weight: 600; line-height: 1.4; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 28px; font-weight: 300; line-height: 1; color: var(--green-ink);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--red); }
.faq .a { padding: 0 0 22px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--body); max-width: 780px; }

/* ---------- contact, sponsors ---------- */

.email {
  font-size: clamp(21px, 2.1vw, 26px); font-weight: 600;
  border-bottom: 2px solid currentColor; align-self: flex-start;
}
.logo-slot {
  min-height: 96px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(22,21,15,.24); border-radius: 3px; padding: 16px; text-align: center;
}
.thanks { margin-top: clamp(28px, 3vw, 40px); font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--body); max-width: 780px; }

/* Placeholder text still to be supplied — easy to spot, easy to search for
   (class="todo"). */
.todo {
  color: #7A4E00; background: #F6E3BA;
  padding: .05em .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dark .todo { color: #E8C07A; background: none; padding: 0; }

/* ---------- footer (dark) ---------- */

footer.site {
  background: var(--dark);
  padding: clamp(32px, 4vw, 48px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px 40px;
}
.footbrand { display: flex; align-items: center; gap: 22px; }
.footplate { display: flex; align-items: center; }
.footplate img { height: 58px; width: auto; display: block; }
.footbrand .org { font-size: 15px; line-height: 1.5; color: rgba(242,239,232,.66); }
.footlinks { display: flex; flex-wrap: wrap; gap: 14px 30px; font-size: 15px; }
.footlinks a { color: rgba(242,239,232,.72); }
.footlinks a:hover { color: var(--on-dark); }

/* ---------- header breakpoints ---------- */

@media (max-width: 1160px) {
  .brand .divider, .brand .org { display: none; }
}

@media (max-width: 960px) {
  .navtoggle[hidden] { display: flex; }
  .masthead { gap: 10px 12px; }
  .mast-right { gap: 12px; }
  .mast-right .btn { font-size: 14px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .mainnav {
    display: none; order: 3; width: 100%;
    flex-direction: column; gap: 0;
    border-top: 1px solid rgba(22,21,15,.14);
    margin-top: 6px; padding-top: 4px;
  }
  .mainnav.open { display: flex; }
  .mainnav a {
    padding: 15px 0; font-size: 18px;
    border-bottom: 1px solid rgba(22,21,15,.1);
  }
}

@media (max-width: 380px) {
  .masthead { padding-left: 16px; padding-right: 16px; }
  .brand img { height: 44px; }
  .lang { gap: 5px; font-size: 13px; }
  .mast-right { gap: 8px; }
  .mast-right .btn { font-size: 13px; padding: 0 10px; }
}

@media (max-width: 360px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
}