@layer components {
  /* brand lockup */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
  }
  .brand .logo-mark { inline-size: 1.5rem; block-size: auto; color: var(--color-text); }
  .brand__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-0); white-space: nowrap; }
  @media (min-width: 480px) {
    .brand__name { font-size: var(--fs-1); }
  }

  /* nav disclosure: mobile dropdown panel, inline row from 768px (js forces open) */
  .nav-disclosure > summary {
    list-style: none;
    cursor: pointer;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-sm);
    font-weight: 600;
  }
  .nav-disclosure > summary::-webkit-details-marker { display: none; }
  .nav-disclosure > summary::after { content: " ▾"; font-size: .8em; }
  .nav-disclosure[open] > summary::after { content: " ▴"; }
  .nav-disclosure > ul {
    position: absolute;
    inset-inline: 0;
    top: var(--header-h);
    z-index: var(--z-overlay);
    display: grid;
    background: var(--color-bg);
    border-block-end: var(--border);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    gap: var(--space-xs);
  }
  .nav-disclosure a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
  }
  .nav-disclosure a:hover { color: var(--color-accent); }
  .nav-disclosure a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  @media (min-width: 768px) {
    .nav-disclosure > summary { display: none; }
    .nav-disclosure > ul {
      position: static;
      display: flex;
      gap: var(--space-lg);
      background: none;
      border: 0;
      padding: 0;
    }
  }

  /* language toggle — plain POST form */
  .lang-switch button {
    background: none;
    border: var(--border);
    border-radius: var(--radius-pill);
    min-block-size: 44px;
    padding-inline: var(--space-md);
    cursor: pointer;
    color: var(--color-text);
    font-weight: 500;
  }
  .lang-switch button:hover { border-color: var(--color-accent); color: var(--color-accent); }

  /* buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding: var(--space-xs) var(--space-lg);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .btn:hover { background: color-mix(in oklab, var(--color-accent), #000 12%); }
  .btn:active { transform: translateY(1px); }
  .btn--ghost {
    background: transparent;
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .btn--ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

  /* hero */
  .hero { padding-block: var(--space-fluid); }
  .hero .logo-mark { inline-size: clamp(3.5rem, 2.5rem + 5vw, 6rem); color: var(--color-accent); margin-block-end: var(--space-lg); }
  .hero h1 { max-inline-size: 22ch; }
  .hero__lead { font-size: var(--fs-1); color: var(--color-text-muted); margin-block-start: var(--space-md); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-xl); }

  /* event cards */
  .event-grid {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
  .event-card {
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: grid;
    gap: var(--space-xs);
    align-content: start;
  }
  .event-card__date { color: var(--color-text-muted); font-size: var(--fs--1); }
  .event-card h3 a { color: var(--color-text); text-decoration: none; }
  .event-card h3 a:hover { color: var(--color-accent); }

  .event-meta { display: grid; gap: var(--space-2xs); color: var(--color-text-muted); }

  /* forms */
  .field { display: grid; gap: var(--space-2xs); }
  .field label { font-weight: 600; }
  .field input[type="email"] {
    min-block-size: 44px;
    padding-inline: var(--space-md);
    border: var(--border);
    border-radius: var(--radius-sm);
    background: #FFFDF8;
    appearance: none;
    width: 100%;
  }
  .field input[type="email"]:focus-visible { border-color: var(--color-accent); }
  .field__error { color: var(--color-danger); font-size: var(--fs--1); }
  .form-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; }
  .form-row .field { flex: 1 1 16rem; }
  .form-note { color: var(--color-text-muted); font-size: var(--fs--1); }

  /* status blocks (confirmation pages) */
  .status-card {
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: grid;
    gap: var(--space-md);
    justify-items: start;
  }

  /* legal draft banner */
  .draft-banner {
    background: var(--color-surface);
    border: 1px dashed var(--color-ochre);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    margin-block-end: var(--space-lg);
  }
}