:root{
  --color-bg: #e3e0d5;
  --color-surface: #f5f5fa;
  --color-text: #47479e;
  --color-border: #d9d9e8;
  --color-brand: #47479e;
  --color-accent: #e35336;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 6px;
  --gutter: 1.25rem;
  /* standard width (header etc.): 40px wider per side than before */
  --max-width: calc(68rem + 80px);
  /* text column: absolute width, independent of --max-width */
  --max-width-narrow: 57.8rem;
  /* side margin inside the text column, left and right, only from 57.8rem up (total, not added to the gutter) */
  --text-margin: 45px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  /* vertical padding above and below each content section */
  --section-pad: 2rem;
  /* dark label colour on the #e35336 buttons (white would not reach AA contrast) */
  --btn-ink: #15151f;
  --color-extra-1: #272837;
}

@media (min-width: 48rem){
  :root{ --gutter: 2rem; }
}
@media (min-width: 80rem){
  :root{ --gutter: 3rem; }
}

*, *::before, *::after{ box-sizing: border-box; }

/* backstop against sideways scroll; body uses clip (not hidden) so it does not become a
   scroll container, which would break the sticky header */
html{ overflow-x: hidden; }
body{ overflow-x: clip; }

/* anchor jumps never end up under the sticky header */
html{ scroll-padding-top: 5rem; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

main{ flex: 1 0 auto; }
footer{ margin-top: auto; }

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

p, li, h1, h2, h3, a, span{ overflow-wrap: break-word; }

.container{
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Narrower content column: absolute maximum width (--max-width-narrow), independent of the
   header width. On screens narrower than that it is as wide as the screen.
   On small screens the content has only the gutter as side margin (inherited from .container).
   From the width of the column upwards the content has a fixed side margin of
   --text-margin (45px) on both sides. */
.container-narrow{
  max-width: var(--max-width-narrow);
}
@media (min-width: 57.8rem){
  .container-narrow{
    padding-inline: var(--text-margin);
  }
}

/* Typography */
h1, h2, h3, .t-h1, .t-h2, .t-h3{
  font-family: var(--font-heading);
  margin: 0 0 var(--space-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1, .t-h1{
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  font-weight: 700;
  color: var(--color-brand);
}
h2, .t-h2{
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-brand);
}
/* an empty heading shows nothing, so it must not cost any space either */
h2:empty{ display: none; }
h3, .t-h3{
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

p{ margin: 0 0 var(--space-2); }

a{
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover{
  color: color-mix(in srgb, var(--color-brand) 75%, black);
  text-decoration-thickness: 2px;
}

:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--color-brand) 80%, white);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.header-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-block: calc(0.75rem - 5px);
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  text-decoration: none;
  color: var(--color-brand);
}
.brand:hover{ color: var(--color-brand); text-decoration: none; }
.brand-logo{
  flex-shrink: 0;
  display: block;
  width: 8.35rem; /* image 7.95rem wide x 2.79rem high: same height as before, ~56% wider */
  padding: 0.2rem;
  background: none; /* no coloured plate; the header itself is white */
  border-radius: var(--radius);
}
.brand-logo img{
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 351;
  object-fit: contain;
}
/* Wordmark: orange #e35336 on every page (value requested by the administrator, written
   directly). 1.2rem bold counts as "large text" (>= 18.66px bold), for which orange on white
   (about 3.8:1) meets WCAG AA (3:1). */
.brand-name{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
  color: #e35336;
}
.brand:hover .brand-name{ color: #e35336; }

.site-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.site-nav a{
  padding: 0.45rem 0.75rem;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.975rem;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--radius);
}
.site-nav a:hover{
  background: var(--color-border);
  color: var(--color-brand);
}
.site-nav [data-nav-link][aria-current="page"]{
  color: var(--color-brand);
  font-weight: 600;
  background: var(--color-border);
  border-radius: var(--radius);
}
.site-nav .nav-members{
  border: 1px solid var(--color-border);
  /* 1px less padding so the bordered button is exactly as tall as the other nav links */
  padding: calc(0.45rem - 1px) calc(0.75rem - 1px);
  color: var(--color-brand);
  font-weight: normal;
}
.site-nav .nav-members:hover{
  background: var(--color-border);
  color: var(--color-brand);
}

/* Hamburger menu (pure CSS, no JavaScript): from 48rem (768px) up the nav is shown as a row
   and the toggle is hidden; below 48rem the nav is collapsed behind a "Menu" button
   (checkbox + label), and opens when the checkbox is checked. */
.nav-toggle-input,
.nav-toggle{
  display: none;
}
@media (max-width: 47.99rem){
  /* Compact header on phones: the brand (logo + name) shrinks and the name wraps, so the
     Menu button stays on the same row instead of dropping to a second row and making the
     sticky header tall enough to cover the page title. */
  .header-inner{
    column-gap: 0.75rem;
  }
  .brand{
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem;
  }
  .brand-logo{
    width: 5rem;
    padding: 0.1rem;
  }
  .brand-name{
    line-height: 1.15;
  }

  /* the checkbox stays focusable (keyboard) but is visually hidden */
  .nav-toggle-input{
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
  }
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: calc(0.45rem - 1px) calc(0.75rem - 1px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-brand);
    font-size: 0.975rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
  }
  .nav-toggle:hover,
  .nav-toggle-input:checked + .nav-toggle{
    background: var(--color-border);
  }
  .nav-toggle-input:focus-visible + .nav-toggle{
    outline: 3px solid color-mix(in srgb, var(--color-brand) 80%, white);
    outline-offset: 3px;
  }
  /* the three bars of the hamburger icon */
  .nav-toggle-icon{
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }
  .site-nav{
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.25rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    padding-bottom: var(--space-1);
  }
  .nav-toggle-input:checked ~ .site-nav{
    display: flex;
  }
  .site-nav a{
    display: block;
    padding-block: 0.65rem;
  }
  .site-nav .nav-members{
    padding-block: calc(0.65rem - 1px);
  }
}

/* Header navigation on pages with an extra palette (e.g. Kerst): the header stays white,
   but in such a palette the text role is light, so the nav would be white on white.
   Give the nav links, the members link and the mobile Menu button the same indigo as on
   the home page (a value requested by the administrator, written directly). */
html[data-palette] .site-header .site-nav a,
html[data-palette] .site-header .site-nav a:hover,
html[data-palette] .site-header .nav-toggle{
  color: #47479e;
}

/* Page header (intro band): full-width background, text uses the full container width,
   1px bottom border in the border colour. This is the ONLY hairline between blocks:
   the sections below have no borders of their own. */
.sg-intro{
  padding-block: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* Sections (also used for the style-guide specimens): no border of their own.
   Vertical padding above and below: --section-pad (2rem), so 4rem between two sections. */
.sg-section{
  padding-block: var(--section-pad);
}
/* Sections with a narrow text column: the margins left and right of the text column
   now have the same colour as the column itself (the page background colour), so the
   section is one flat background-coloured band. The gutter / 45px text margin are padding
   inside the column (on .container-narrow). */
.sg-section-narrow{
  background: var(--color-bg);
}
.sg-label{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-bg));
}
.sg-label::before{
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.sg-note{
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-bg));
}
.sg-intro .sg-note{ font-size: 1.0625rem; max-width: none; }
.specimen-stack{ display: grid; gap: var(--space-3); }
.specimen-stack .t-h1, .specimen-stack .t-h2, .specimen-stack .t-h3{ margin-bottom: 0; }

/* reading measure: running text is never wider than 65 characters, in every layout */
.prose{ max-width: 65ch; }
.prose p:last-child{ margin-bottom: 0; }

/* Swatches */
.swatches{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-2);
}
.swatch{ min-width: 0; }
.swatch-chip{
  display: block;
  height: 4.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.swatch-name{
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Buttons */
.btn-row{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* a button row that directly follows running text gets 1.5rem of space above it
   (not applied when the row follows a label, as in the style guide) */
.prose + .btn-row,
p + .btn-row{ margin-top: var(--space-3); }
.btn{
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  max-width: 100%;
}
.btn:hover{ text-decoration: none; }
/* All buttons (primary, secondary, accent): fill #e35336 as requested by the administrator.
   The label is dark (white on #e35336 would be only about 3.8:1, below WCAG AA). */
.btn-primary,
.btn-secondary,
.btn-accent{
  background: #e35336;
  border-color: #e35336;
  color: var(--btn-ink);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-accent:hover{
  background: color-mix(in srgb, #e35336 85%, white);
  border-color: color-mix(in srgb, #e35336 85%, white);
  color: var(--btn-ink);
}

/* Photo credit: a small, subtle "foto: …" line. Plain dark text, no frame or plate.
   It sits bottom left, directly BELOW the photo, on the page background (dark text would not
   be legible on the dark lower part of the photos). The caption is as wide as the text column
   and uses the same side padding, so its left edge lines up with the text. */
.has-credit{ position: relative; }
.photo-credit{
  display: block;
  width: 100%;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0.4rem var(--gutter) 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-text) 55%, black);
  pointer-events: none;
}
@media (min-width: 57.8rem){
  .photo-credit{
    padding-inline: var(--text-margin);
  }
}
/* Home page hero: from 48rem up the caption hangs directly below the photo's left edge, in
   the free space left of the next-concert block. Below 48rem that block covers the full width
   under the photo, so the caption sits top left on the photo instead (dark text with a faint
   light halo, still no plate). */
.photo-credit-hero{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.4rem 0 0;
}
@media (max-width: 47.99rem){
  .photo-credit-hero{
    top: 0.6rem;
    left: 0.75rem;
    padding: 0;
    text-shadow: 0 0 6px color-mix(in srgb, var(--color-surface) 75%, transparent);
  }
}

/* Cards */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-3);
}
.card{
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
}
.card h3{ margin-bottom: 0.5rem; }
.card p:last-child{ margin-bottom: 0; }
.card-meta{
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* Footer */
.site-footer{
  background: var(--color-extra-1);
  color: var(--color-bg);
  padding-block: var(--space-4);
  font-size: 0.975rem;
}
.site-footer a{ color: inherit; }
.site-footer a:hover{ color: inherit; text-decoration-thickness: 2px; }
.site-footer :focus-visible{ outline-color: var(--color-bg); }
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}
.footer-grid > div{ min-width: 0; }
.footer-title{
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}
.site-footer p{ margin-bottom: 0.4rem; }
.footer-logo{
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
  aspect-ratio: 1000 / 350;
  object-fit: contain; /* whole image, never cropped; transparent background shows the footer colour */
}

/* ---------- Home page: hero ---------- */
/* The photo is a normal in-flow image; the text is a later sibling, positioned over the
   dark lower part of the photo. Legibility comes from placement and text-shadow plus the
   platform's own shade (data-treat-scrim on the img) — no overlay of our own. */
.hero{
  position: relative;
  width: 100%;
}
.hero-img{
  display: block;
  width: 100%;
  height: clamp(26rem, 72vh, 40rem);
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-text-wrap{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding-bottom: var(--space-4);
}
.hero-text-wrap .container{ min-width: 0; }
.hero-title{
  max-width: 18ch;
  margin-bottom: var(--space-1);
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  color: var(--color-surface);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.4);
  animation: heroFadeIn 0.8s ease-out 1s both;
}
.hero-tagline{
  max-width: 34rem;
  margin-bottom: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--color-surface);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.4);
  animation: heroFadeIn 0.8s ease-out 1.4s both;
}
.hero-cta{
  animation: heroFadeIn 0.8s ease-out 1.8s both;
}
.hero-tagline + .hero-cta{ margin-top: var(--space-3); }
@keyframes heroFadeIn{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-tagline, .hero-cta{ animation: none; }
}

/* spacing under section content */
.card-grid + .btn-row{ margin-top: var(--space-3); }
.sg-section-narrow h2{ margin-bottom: var(--space-2); }