@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: hamburger disclosure on small screens (full-height overlay panel),
     inline row from 768px (js forces the disclosure open) */
  .nav-disclosure > summary {
    list-style: none;
    cursor: pointer;
    inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  .nav-disclosure > summary::-webkit-details-marker { display: none; }
  .nav-icon { display: block; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-icon line {
    /* M28 (D9): fill-box makes transform-origin: center each line's own centre,
       not the SVG's, which is what Safari needs to draw a straight X. */
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  /* open state: the three lines morph into an X (the universal close) */
  .nav-disclosure[open] .nav-icon__top { transform: translateY(6px) rotate(45deg); }
  .nav-disclosure[open] .nav-icon__mid { opacity: 0; }
  .nav-disclosure[open] .nav-icon__bot { transform: translateY(-6px) rotate(-45deg); }
  /* absolute (not fixed): the header's backdrop-filter makes it the containing
     block for fixed descendants, which would clip the panel to the header.
     M22: the panel holds the link list and a foot (the next evening, the social links). */
  .nav-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--header-h);
    block-size: calc(100svh - var(--header-h));
    z-index: var(--z-overlay);
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--gutter) max(var(--space-xl), env(safe-area-inset-bottom));
    background: var(--color-bg);
  }
  .nav-panel > ul { display: grid; gap: var(--space-xs); }
  .nav-panel > ul a {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--fs-2);
    font-weight: 600;
  }
  .nav-panel > ul a:hover { color: var(--color-accent); }
  .nav-panel > ul a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  .nav-foot { display: grid; gap: var(--space-md); border-block-start: var(--border); padding-block-start: var(--space-lg); }
  .nav-foot__label { font-size: var(--fs--1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
  body.panel-open { overflow: hidden; }
  /* M28 (D9): the panel slides and fades in, its links cascading behind it, and
     the close reverses it (js/nav.js holds the disclosure open for the closing
     animation). Reduced motion gets a panel that is simply there. */
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .nav-disclosure[open] .nav-panel { animation: nav-panel-in var(--dur-mid) var(--ease) both; }
    .nav-disclosure[open] .nav-panel > ul > li,
    .nav-disclosure[open] .nav-panel .nav-foot { animation: nav-item-in var(--dur-mid) var(--ease) both; }
    .nav-disclosure[open] .nav-panel > ul > li:nth-child(1) { animation-delay: 60ms; }
    .nav-disclosure[open] .nav-panel > ul > li:nth-child(2) { animation-delay: 100ms; }
    .nav-disclosure[open] .nav-panel > ul > li:nth-child(3) { animation-delay: 140ms; }
    .nav-disclosure[open] .nav-panel > ul > li:nth-child(4) { animation-delay: 180ms; }
    .nav-disclosure[open] .nav-panel > ul > li:nth-child(5) { animation-delay: 220ms; }
    .nav-disclosure[open] .nav-panel .nav-foot { animation-delay: 260ms; }
    .nav-disclosure.is-closing .nav-panel { animation: nav-panel-out var(--dur-fast) var(--ease) both; }
    .nav-disclosure.is-closing .nav-panel > ul > li,
    .nav-disclosure.is-closing .nav-panel .nav-foot { animation: nav-item-out var(--dur-fast) var(--ease) both; animation-delay: 0s; }
  }
  @keyframes nav-panel-in { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: none; } }
  @keyframes nav-panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-1rem); } }
  @keyframes nav-item-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
  @keyframes nav-item-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(.5rem); } }
  @media (min-width: 768px) {
    .nav-disclosure > summary { display: none; }
    .nav-panel {
      position: static;
      block-size: auto;
      display: block;
      background: none;
      padding: 0;
      overflow: visible;
    }
    .nav-panel > ul { display: flex; gap: var(--space-lg); }
    .nav-panel > ul a {
      min-block-size: 44px;
      font-family: var(--font-body);
      font-size: var(--fs-0);
      font-weight: 500;
    }
    .nav-foot { display: none; }
  }

  /* language toggle: two letters (M7); since M22 a plain link (shareable, opens in a new tab), left of the hamburger */
  .lang-switch {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs--1);
    font-weight: 600;
    letter-spacing: .04em;
  }
  @media (min-width: 768px) {
    .site-nav { order: 1; margin-inline-start: auto; }
    .lang-switch { order: 2; margin-inline-start: 0; }
  }
  .lang-switch: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); }
  .btn--small { font-size: var(--fs--1); padding-inline: var(--space-md); }
  .btn--large { font-size: var(--fs-1); min-block-size: 56px; padding: var(--space-sm) var(--space-xl); }  /* M32: the About page's closing action */

  /* hero */
  /* viewport-tall with the copy at the foot: 60svh, then 86svh from 900 px. The height
     holds while the window narrows and steps once, instead of drifting with the width. */
  .hero {
    position: relative;
    min-block-size: 60svh;
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-2xl) var(--space-xl);
    isolation: isolate;
    overflow: clip;
    background: var(--color-ink);
  }
  @media (min-width: 900px) {
    .hero { min-block-size: 86svh; padding-block-end: var(--space-2xl); }
  }
  .hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--color-ink), transparent 15%), color-mix(in oklab, var(--color-ink), transparent 45%)); }
  .hero .logo-mark { inline-size: clamp(3.5rem, 2.5rem + 5vw, 6rem); color: var(--color-cream); margin-block-end: var(--space-lg); }
  .hero h1 { max-inline-size: 22ch; color: var(--color-cream); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-xl); }
  .hero__actions .btn--ghost { color: var(--color-cream); }
  /* M22: the focus ring on the two dark grounds: cream ring (15:1 on ink), ink halo keeps it off the picture */
  .hero, .site-footer { --color-focus: var(--color-cream); --color-focus-halo: var(--color-ink); }
  /* M30, generalised in M32: the point of a picture kept in view on every screen (SiteImage.image_focus_x/y, in steps of 5) */
  .focus { object-position: var(--fx, 50%) var(--fy, 50%); }
  .focus--x0 { --fx: 0%; }
  .focus--x5 { --fx: 5%; }
  .focus--x10 { --fx: 10%; }
  .focus--x15 { --fx: 15%; }
  .focus--x20 { --fx: 20%; }
  .focus--x25 { --fx: 25%; }
  .focus--x30 { --fx: 30%; }
  .focus--x35 { --fx: 35%; }
  .focus--x40 { --fx: 40%; }
  .focus--x45 { --fx: 45%; }
  .focus--x50 { --fx: 50%; }
  .focus--x55 { --fx: 55%; }
  .focus--x60 { --fx: 60%; }
  .focus--x65 { --fx: 65%; }
  .focus--x70 { --fx: 70%; }
  .focus--x75 { --fx: 75%; }
  .focus--x80 { --fx: 80%; }
  .focus--x85 { --fx: 85%; }
  .focus--x90 { --fx: 90%; }
  .focus--x95 { --fx: 95%; }
  .focus--x100 { --fx: 100%; }
  .focus--y0 { --fy: 0%; }
  .focus--y5 { --fy: 5%; }
  .focus--y10 { --fy: 10%; }
  .focus--y15 { --fy: 15%; }
  .focus--y20 { --fy: 20%; }
  .focus--y25 { --fy: 25%; }
  .focus--y30 { --fy: 30%; }
  .focus--y35 { --fy: 35%; }
  .focus--y40 { --fy: 40%; }
  .focus--y45 { --fy: 45%; }
  .focus--y50 { --fy: 50%; }
  .focus--y55 { --fy: 55%; }
  .focus--y60 { --fy: 60%; }
  .focus--y65 { --fy: 65%; }
  .focus--y70 { --fy: 70%; }
  .focus--y75 { --fy: 75%; }
  .focus--y80 { --fy: 80%; }
  .focus--y85 { --fy: 85%; }
  .focus--y90 { --fy: 90%; }
  .focus--y95 { --fy: 95%; }
  .focus--y100 { --fy: 100%; }
  /* M18: the admin-managed hero images crossfade (js/hero.js toggles is-active) */
  .hero__images { position: absolute; inset: 0; z-index: -2; }
  .hero__images .hero__image { opacity: 0; transition: opacity 1.5s ease; }
  .hero__images .hero__image.is-active { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .hero__images .hero__image { transition: none; }
  }

  /* M18: the Instagram strip on the home page, photos only */
  .insta-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .insta-grid img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); display: block; }

  /* M22: the home page's « Ce qui se passe ici » and the two kinds of evening */
  .lede { font-size: var(--fs-1); max-inline-size: 40ch; }
  .home-more { display: flex; justify-content: flex-end; }

  /* ---------- M32: the About page as an editorial spread ---------- */
  /* Same words, re-set on a twelve-column grid from 900 px: a typographic
     opening, the group photo at the feature width, the mission as a poster,
     the values in three columns, a full-bleed band, two portraits
     and one button. Square corners on every picture here (D15.1). The two
     placements whose frame changes with the screen wear the .focus classes
     (the point kept in view); the values and the portraits are cut at 4:5.
     Full bleed comes from a section with no side padding, never from a viewport width
     (reset.css keeps the scrollbar gutter stable).
     2026-09-12: « Le lieu » (the group photo and its two paragraphs) is gone
     for good, by the User's own choice; the classes it alone used go with it. */
  .about .section { padding-block: 0; }
  .about > .section + .section { margin-block-start: var(--space-section); }
  /* Reviewed design (2026-09-12): the opening is the copy in the page container
     with the « En-tête » picture full width beneath it. The copy carries
     .container in the markup, so its width and gutter are the page's, the
     header's and the footer's. */
  .about-hero__copy { padding-block-start: var(--space-xl); display: grid; gap: var(--space-lg); justify-items: start; }
  .about-more { display: inline-flex; align-items: center; gap: var(--space-md); font-size: var(--fs--1); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: inherit; margin-block-start: var(--space-md); }
  .about-more:hover .about-more__arrow { transform: translateY(0.25rem); }
  .about-more__arrow { transition: transform .3s ease; }
  .about-hero__media { margin-block-start: var(--space-xl); }
  .about-title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; }
  .about-intro { font-size: var(--fs-1); max-inline-size: 36rem; display: grid; gap: var(--space-md); }
  .about-intro p { max-inline-size: none; }
  .about-heading { font-size: var(--fs-5); margin-block-end: var(--space-xl); }
  /* The mission band (reviewed design, 2026-09-12): sand across the whole window,
     square corners and no rule, with the heading and the statement in the page
     container, so the colour reaches both window edges while the words keep the
     page's left and right edges. The section wins its own padding back from
     .about .section, which zeroes it; the double class matches that specificity. */
  .about .about-mission { background: var(--color-surface); padding-block: var(--space-3xl); }
  .about-mission__inner { display: grid; gap: var(--space-lg); align-items: start; }
  .about-mission__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-5); line-height: 1.05; letter-spacing: -0.02em; }
  .about-mission__text { font-family: var(--font-body); font-size: var(--fs-1); display: grid; gap: var(--space-md); }
  .about-mission__text p { max-inline-size: none; }
  .about-photo { display: block; inline-size: 100%; object-fit: cover; border-radius: 0; }
  .about-photo--header { aspect-ratio: 4 / 3; }
  .about-photo--wide { aspect-ratio: 3 / 2; }
  .about-photo--portrait { aspect-ratio: 4 / 5; }
  .about-bleed { width: 100%; }
  .values, .hosts { display: grid; gap: var(--space-2xl) var(--space-lg); }
  .value, .host { display: grid; gap: var(--space-md); align-content: start; }
  .value h3, .host h3 { font-size: var(--fs-2); margin-block-start: var(--space-xs); }
  .host__photo--empty { display: grid; place-items: center; background: var(--color-surface); color: var(--color-text-muted); }
  .host__photo--empty .logo-mark { inline-size: 3rem; block-size: auto; }
  .about-close { text-align: center; }
  @media (min-width: 900px) {
    .about-hero__copy { padding-block: var(--space-2xl) 0; }
    /* the mission band's two columns: the heading on the left of the container,
       the statement from the halfway line to the container's right edge */
    .about-mission__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); }
    .about-mission__title { grid-column: 1 / span 5; }
    .about-mission__text { grid-column: 7 / span 6; }
    /* the opening picture: wide rather than tall on a big screen, and capped so a
       1920 px window does not turn it into a full page of photograph */
    .about-photo--header { aspect-ratio: 21 / 9; max-block-size: 72svh; }
    .about-photo--wide { aspect-ratio: 21 / 9; }
    .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* M39.1: the contact page as the mockup draws it (ideas/local-design/contact/index.html): one
     two-column section from 700 px, the display title, the address as one accent line with
     an arrow, the two networks named beside their icons at the column's foot, and the picture
     in its arch, a fixed height per width with the point kept in view (the .focus classes) */
  .contact { display: grid; gap: 2.125rem; align-items: stretch; }
  .contact__info { display: flex; flex-direction: column; align-items: flex-start; }
  .contact__title { font-size: 4.375rem; line-height: 1.08; letter-spacing: -.055em; margin-block-end: 1.875rem; }
  .contact__intro { display: grid; gap: var(--space-md); margin-block-end: var(--space-lg); }
  .contact__email { display: inline-flex; align-items: center; gap: 1.375rem; max-inline-size: 100%; color: var(--color-accent); font-size: 1.4375rem; letter-spacing: -.04em; text-decoration: none; padding-block-end: .9375rem; border-block-end: 1px solid var(--color-accent); overflow-wrap: anywhere; }
  .contact__email:hover { text-decoration: none; }
  .contact__arrow { flex: 0 0 auto; transition: transform var(--dur-mid) var(--ease); }
  .contact__email:hover .contact__arrow { transform: translate(4px, -4px); }
  .social-row--named { padding-block-start: 1.6875rem; gap: 2rem; }
  .social-link--named { display: inline-flex; align-items: center; gap: .75rem; min-block-size: 44px; color: inherit; font-size: var(--fs--1); text-decoration: none; }
  .social-link--named .icon { inline-size: 1.5rem; block-size: 1.5rem; margin-inline-end: 0; color: var(--color-accent); }
  .social-link--named:hover { text-decoration: underline; text-underline-offset: .3em; }
  .contact__photo { margin: 0; block-size: 22.5rem; overflow: hidden; border-radius: 8.75rem 8.75rem 4px 4px; background: var(--color-surface); }
  .contact__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .contact__photo--empty { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: var(--color-text-muted); }
  .contact__photo--empty .logo-mark { inline-size: 4rem; block-size: auto; }
  @media (min-width: 700px) {
    .contact { grid-template-columns: 1.04fr 1fr; column-gap: 6%; }
    .contact__info { padding-block: 1.875rem .75rem; }
    .contact__title { font-size: clamp(4.0625rem, 7.5vw, 6.75rem); margin-block-end: 3.3125rem; }
    .contact__email { font-size: clamp(1.1875rem, 2.15vw, 1.8125rem); gap: .9375rem; }
    .social-row--named { margin-block-start: auto; padding-block-start: 5rem; gap: 1.375rem; }
    .contact__photo { block-size: 27.5rem; border-radius: 10rem 10rem 4px 4px; }
  }
  @media (min-width: 900px) {
    .contact { column-gap: 8%; }
    .contact__email { gap: 1.625rem; }
    .social-row--named { gap: 2rem; }
    .contact__photo { block-size: 31rem; }
  }
  @media (min-width: 1500px) {
    .contact__info { padding-block-start: 2.8125rem; }
    .contact__photo { block-size: 35.625rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .contact__arrow { transition: none; }
    .contact__email:hover .contact__arrow { transform: none; }
  }

  /* M18: the one « Légal » page */
  .legal-toc ul { display: flex; flex-wrap: wrap; gap: var(--space-md); }
  .legal-section { scroll-margin-block-start: var(--space-xl); display: grid; gap: var(--space-md); }  /* M22: the bodies are not .prose, so the gap lives here */
  .legal-section h2, .legal-section h3 { margin-block-start: var(--space-lg); }
  .legal-section + .legal-section { margin-block-start: var(--space-2xl); padding-block-start: var(--space-xl); border-block-start: 1px solid color-mix(in oklab, var(--color-ink), transparent 85%); }

  /* event rows (M7): a month-grouped list, never a grid; the whole row is the link */
  .event-month { margin-block-start: var(--space-lg); font-size: var(--fs-1); }
  /* M23: a reading measure for the row. The category chip is aligned to the
     row's right edge, so the row's width is what sets how far it sits from the
     text: 40 rem keeps it near without cramping a long title (the User's call). */
  .event-list { display: grid; max-inline-size: 40rem; }
  .event-row { border-block-end: var(--border); }
  .event-row__link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease);
  }
  .event-row__link:hover .event-row__title,
  .event-row__link:focus-visible .event-row__title { color: var(--color-accent); }
  .event-row__link:hover { color: var(--color-accent); }
  .event-row__img {
    flex: 0 0 auto;
    inline-size: 7rem;   /* M30: the 16:9 thumbnail rendition (480 by 270) */
    block-size: 3.9375rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .event-row__img--empty {
    display: grid;
    place-items: center;
    border: var(--border);
    color: var(--color-text-muted);
  }
  .event-row__img--empty .logo-mark { inline-size: 1.75rem; block-size: auto; }
  /* M23: flex: 1 so the text column fills the row whatever the title's length,
     which is what puts every category chip in the same place down the list */
  .event-row__text { flex: 1; display: grid; gap: var(--space-2xs); min-inline-size: 0; }
  .event-row__when { color: var(--color-text); font-weight: 500; font-size: var(--fs--1); }
  /* M23: base.css balances headings, which centres a wrapped title well short
     of the column and leaves the right-aligned chip stranded past it; a row
     title fills its line instead, so the text wraps where the chip sits */
  .event-row__title { font-size: var(--fs-1); color: var(--color-text); text-wrap: pretty; transition: color var(--dur-fast) var(--ease); }
  @media (min-width: 768px) {
    .event-row__img { inline-size: 9rem; block-size: 5.0625rem; }
  }
  /* M22: the « En bref » line and the meta line (price, category, places) */
  .event-row__summary { color: var(--color-text); }
  .event-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); color: var(--color-text-muted); font-size: var(--fs--1); }
  .event-row__price { color: var(--color-text); font-weight: 500; }
  .event-row__host { color: var(--color-text); font-weight: 500; }  /* M30: « Par <organisateur> » */
  /* M23: the category chip flush right, the same column down the whole list */
  .event-row__cat { margin-inline-start: auto; }

  /* M26: a series shows once a month; its dates sit under the row as square
     buttons, each its own evening. The event page uses the same button. */
  .event-row__dates,
  .event-series__dates { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-block-end: var(--space-md); }
  .event-row__dates { padding-inline-start: 7.6rem; margin-block-start: calc(-1 * var(--space-sm)); }
  .event-series { margin-block-start: var(--space-md); }
  .event-series__label { color: var(--color-text-muted); font-size: var(--fs--1); margin-block-end: var(--space-2xs); }
  .event-date {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    min-inline-size: 3.25rem;
    min-block-size: 3.25rem;
    padding: var(--space-2xs);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .event-date:hover, .event-date:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
  .event-date__wd, .event-date__mo { font-size: var(--fs--1); color: var(--color-text-muted); line-height: 1.1; }
  .event-date__day { font-size: var(--fs-1); font-weight: 500; line-height: 1.1; }
  .event-date__state { font-size: var(--fs--1); color: var(--color-text-muted); line-height: 1.1; }
  /* M28 rider: the date being read is the marked one, on the event page as in
     the list's rows. The border carries it, so it reads without colour alone. */
  .event-date--now { background: var(--color-surface); font-weight: 500; border-color: var(--color-text); }
  .event-date--now .event-date__wd, .event-date--now .event-date__mo { color: var(--color-text); }
  @media (max-width: 767px) {
    .event-row__dates { padding-inline-start: 0; }
  }
  /* ---------- M38: the events page in the staff list's shape ---------- */
  /* The staff list (admin.css, M36 and M37) mapped onto the public tokens: its
     paper is --color-paper, its hairline --color-border, its soft fill
     --color-surface, its quiet ink --color-text-muted. */
  .event-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
  .event-tools__search { flex: 1 1 14rem; min-inline-size: 0; }
  .event-tools__select { flex: 0 1 14rem; max-inline-size: 14rem; }  /* the recipe sets width: 100%; the flex basis sizes it here */
  .event-tools__clear { font-size: var(--fs--1); }
  @media (max-width: 440px) { .event-tools__select { flex: 1 1 100%; max-inline-size: none; } }
  /* M58: the live search hides what does not match, and these two boxes each
     set a display of their own, which outranks the browser's own [hidden] rule
     (the M25 lesson from the staff side). */
  .event-list[hidden], .event-tabs ~ .event-month[hidden] { display: none; }
  .event-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); border-block-end: 1px solid var(--color-border); }
  .event-tabs__tab { display: inline-flex; align-items: center; gap: var(--space-2xs); min-block-size: 44px; padding-block: var(--space-sm); border-block-end: 2px solid transparent; margin-block-end: -1px; color: var(--color-text-muted); font-size: var(--fs--1); font-weight: 500; text-decoration: none; }
  .event-tabs__tab:hover { color: var(--color-text); }
  .event-tabs__tab[aria-current="page"] { color: var(--color-accent); border-block-end-color: var(--color-accent); }
  .event-tabs__count { padding: .1rem .35rem; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: .7rem; font-weight: 500; line-height: 1.3; }
  @media (max-width: 440px) { .event-tabs { gap: 0 var(--space-md); } }
  /* M59: the events list when nothing answers the filters. It takes the place
     of the cards, in the cards' own paper, so an empty tab reads as an answer
     rather than a blank page. Never animated: the as-you-type search shows and
     hides it on every keystroke. */
  .event-empty { display: grid; justify-items: center; gap: var(--space-2xs); margin-block-start: var(--space-lg); padding: var(--space-2xl) var(--space-lg); border: var(--border); border-radius: var(--radius-md); background: var(--color-paper); text-align: center; }
  .event-empty__mark { display: block; margin-block-end: var(--space-md); color: var(--color-ochre); opacity: .5; }
  .event-empty__mark .logo-mark { inline-size: 1.75rem; block-size: auto; }
  .event-empty__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-1); font-weight: 500; line-height: 1.25; text-wrap: balance; }
  .event-empty__text { max-inline-size: 38ch; margin: 0; color: var(--color-text-muted); font-size: var(--fs--1); line-height: 1.7; text-wrap: pretty; }
  .event-empty__action { margin-block-start: var(--space-lg); }
  @media (max-width: 440px) { .event-empty { padding: var(--space-xl) var(--space-md); } }
  .event-list--cards { max-inline-size: none; gap: var(--space-sm); }
  .event-tabs ~ .event-month { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-lg); font-family: var(--font-body); font-size: var(--fs--1); font-weight: 500; color: var(--color-text-muted); }
  .event-tabs ~ .event-month::after { content: ""; flex: 1; block-size: 1px; background: var(--color-border); }
  .event-tabs + .event-month { margin-block-start: var(--space-xs); }
  .event-row--card { border-block-end: 0; padding: var(--space-md); background: var(--color-paper); border: var(--border); border-radius: var(--radius-md); }
  .event-row--card .event-row__link { padding-block: 0; }
  .event-row__date { flex: 0 0 auto; display: grid; justify-items: center; padding-inline-end: var(--space-sm); border-inline-end: 1px solid var(--color-border); text-align: center; line-height: 1.15; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
  .event-row__date-day { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0; text-transform: none; line-height: 1.1; }
  .event-row--card .event-row__dates { padding-inline-start: calc(7rem + 3.125rem + 2 * var(--space-md)); padding-block-end: 0; margin-block-start: var(--space-xs); }
  @media (min-width: 768px) {
    .event-row--card { padding: var(--space-lg) var(--space-xl); }
    .event-row--card .event-row__img { inline-size: 10rem; block-size: 5.625rem; }
    .event-row__date { padding-inline-end: var(--space-md); }
    .event-row--card .event-row__dates { padding-inline-start: calc(10rem + 3.125rem + 2 * var(--space-md)); }
  }
  @media (max-width: 440px) {
    .event-row--card { padding: var(--space-sm); }
    .event-row--card .event-row__dates { padding-inline-start: 0; }
  }
  .chip--soon { color: var(--color-accent); }
  .chip {
    display: inline-block;
    justify-self: start;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    font-size: var(--fs--1);
    font-weight: 600;
    letter-spacing: .02em;
  }
  .chip--soldout { color: var(--color-accent); }
  .chip--cancelled { color: var(--color-text-muted); text-decoration: line-through; }
  .registration-list__address { color: var(--color-text-muted); font-size: var(--fs--1); }

  /* inline social icons (M7): drawn in currentColor, sized to the text line */
  .icon { inline-size: 1em; block-size: 1em; vertical-align: -.125em; margin-inline-end: .4em; }
  .social-link { white-space: nowrap; }

  /* icon-only social links (M10): one row, each a 44 px tap target */
  .social-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
  .social-link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    min-block-size: 44px;
  }
  .social-link--icon .icon { inline-size: 1.75rem; block-size: 1.75rem; margin-inline-end: 0; vertical-align: middle; }

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

  /* forms */
  .field { display: grid; gap: var(--space-2xs); }
  .field label { font-weight: 600; }
  .field :where(input:not([type="checkbox"], [type="radio"]), textarea, select), .event-tools :where(input, select) {
    min-block-size: 44px;
    padding-inline: var(--space-md);
    border: 1px solid var(--color-control-border);  /* M22: 3.22:1, WCAG 1.4.11 */
    border-radius: var(--radius-sm);
    background: #FFFDF8;
    appearance: none;
    width: 100%;
    font-size: max(1rem, var(--fs-0));
  }
  .field :where(input, textarea):focus-visible, .event-tools :where(input, select):focus-visible { border-color: var(--color-accent); }
  /* M58: the month select draws its own chevron. The recipe just above sets
     appearance: none, which takes the browser's arrow away, and the User read
     the bare box as a label rather than a menu. Two small gradients make the V,
     so there is no image file and no extra element; the box keeps room for it
     at the end. This rule sits after the recipe on purpose: the recipe's
     background shorthand would wipe an image set before it. */
  .event-tools__select {
    padding-inline-end: calc(var(--space-md) + 1.25rem);
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    /* whole pixels, the two halves one pixel over each other: at fractional
       sizes the browser rounds them apart and the V shows a seam */
    background-position: right calc(var(--space-md) + 6px) top 50%, right var(--space-md) top 50%;
    background-size: 7px 7px;
    background-repeat: no-repeat;
  }
  .field [aria-invalid="true"] { border-color: var(--color-danger); }
  .field--choice {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-sm);
  }
  .field--choice input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--color-accent); }
  .field--choice label { font-weight: 500; }
  .field--choice .field__help, .field--choice .field__error { grid-column: 2; }
  .field__error { color: var(--color-danger); font-size: var(--fs--1); }
  .field__help { color: var(--color-text-muted); font-size: var(--fs--1); }
  /* interest lists (M6): a compact vertical checkbox list, 44 px rows */
  .field--choices { border: 0; padding: 0; margin: 0; min-inline-size: 0; gap: 0; }
  .field--choices legend { font-weight: 600; padding: 0; margin-block-end: var(--space-2xs); }
  .choice {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-sm);
    align-items: center;
    min-block-size: 44px;
    font-weight: 500;
    cursor: pointer;
  }
  .choice input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--color-accent); }
  .choice small { grid-column: 2; color: var(--color-text-muted); font-size: var(--fs--1); }
  .form__error { color: var(--color-danger); }
  .form-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; }
  .form-row .field { flex: 1 1 16rem; }
  .form-row .field--choices { flex-basis: 100%; }
  .form-stack { display: grid; gap: var(--space-lg); }
  .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
  .form-actions:empty { display: none; }
  .form-note { color: var(--color-text-muted); font-size: var(--fs--1); }
  .btn--danger { background: var(--color-danger); }
  .btn--danger:hover { background: color-mix(in oklab, var(--color-danger), #000 12%); }

  /* inline status / alerts (django messages, allauth notes, form-level errors) */
  .messages { margin-block-start: var(--space-lg); display: grid; gap: var(--space-sm); }
  /* M47: with js/toast.js running, the strip is replaced by the cards */
  html.js .messages { display: none; }
  .alert {
    background: var(--color-surface);
    border: var(--border);
    border-inline-start: 4px solid var(--color-success);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    max-inline-size: none;
  }
  .alert--error { border-inline-start-color: var(--color-danger); }
  .alert--error p { max-inline-size: none; }
  .alert--warning { border-inline-start-color: var(--color-ochre-deep); }
  .badge {
    display: inline-block;
    margin-inline-start: var(--space-xs);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: var(--border);
    font-size: var(--fs--1);
    font-weight: 500;
  }

  /* M44: the event page in the mock's shape (project/milestone-contexts/M44-brief.md, section A).
     The DOM order is the phone order; from 900 px the areas put the panel on the right, pinned
     under the sticky header. The photo is the thumb's window (16:9) at the story's width. */
  .event-back { font-size: var(--fs--1); color: var(--color-text-muted); margin-block-end: var(--space-lg); }
  .event-back a { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: 32px; text-decoration: none; }
  .event-back a:hover { color: var(--color-accent); }
  .event-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); }
  .event-head h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.75rem); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; max-inline-size: 18ch; }
  .event-kind { margin: 0; }
  .event-kind .chip--cat { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0; border: 0; font-size: var(--fs--1); font-weight: 600; letter-spacing: .02em; }
  .event-kind .chip--cat::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
  .event-layout { display: grid; gap: var(--space-lg); align-items: start; }
  .event-poster { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); }
  .event-poster img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
  .event-booking { display: grid; gap: var(--space-md); }
  .booking { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper); border: var(--border); border-radius: var(--radius-md); box-shadow: 0 7px 20px rgb(66 51 32 / .03); }
  .booking .event-meta { gap: var(--space-md); color: var(--color-text-muted); }
  .booking__when { display: flex; align-items: center; gap: var(--space-md); }
  .date-tile { flex: 0 0 auto; inline-size: 4rem; display: grid; text-align: center; border: var(--border); border-radius: var(--radius-sm); overflow: hidden; padding-block-end: var(--space-xs); margin: 0; line-height: 1.2; color: var(--color-text); }
  .date-tile__mo { background: var(--color-surface); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding-block: 3px; }
  .date-tile__day { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-3); line-height: 1.2; margin-block-start: var(--space-2xs); }
  .date-tile__wd { font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; margin-block-start: 3px; }
  .booking__dates { display: grid; gap: var(--space-2xs); }
  .booking__date { color: var(--color-text); font-weight: 500; }
  .booking__hours { color: var(--color-text); font-size: var(--fs--1); }
  .booking .registration { padding-block: 0; border-block: 0; }
  .booking .btn { inline-size: 100%; border-radius: var(--radius-sm); justify-content: space-between; padding-inline: var(--space-lg); }
  .booking .btn::after { content: "↗"; font-size: 1.1em; }
  .booking .btn--ghost::after { content: none; }

  /* M61: the panel redrawn from ideas/event-contribution. The venue sits in the date
     block, the run's dates fold away, the picker is full-width rows, and one summary
     line states what is about to be charged. */
  .booking__place, .booking .event-host { color: var(--color-text-muted); font-weight: 400; font-size: var(--fs--1); }
  .booking__note { color: var(--color-text-muted); font-size: var(--fs--1); }

  .booking__dates-list { container-type: inline-size; margin-block: var(--space-md); padding-block-end: var(--space-md); border-block-end: var(--border); }
  .booking__dates-list > summary { display: flex; align-items: center; gap: var(--space-xs); min-block-size: 44px; cursor: pointer; list-style: none; font-size: var(--fs--1); font-weight: 500; }
  .booking__dates-list > summary::-webkit-details-marker { display: none; }
  .booking__dates-list > summary::before { content: ""; inline-size: 7px; block-size: 7px; flex: 0 0 auto; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
  .booking__dates-list[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
  .booking__dates-count { margin-inline-start: auto; color: var(--color-text-muted); font-weight: 400; }
  .booking__months { display: grid; padding-block-start: var(--space-xs); }
  .booking__month { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding-block: var(--space-xs); border-block-start: var(--border); }
  .booking__month:first-child { border-block-start: 0; }
  .booking__month-label { color: var(--color-text-muted); font-size: .65rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
  .booking__month-dates { display: grid; grid-template-columns: repeat(5, 44px); justify-content: start; gap: var(--space-2xs); }
  .booking__month .event-date { min-inline-size: 0; inline-size: 44px; min-block-size: 44px; padding: var(--space-2xs) 2px; border-color: transparent; background: var(--color-surface); }
  .booking__month .event-date__mo { display: none; }
  .booking__month .event-date__wd { font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; }
  .booking__month .event-date__day { font-size: var(--fs-0); font-variant-numeric: tabular-nums; }
  .booking__month .event-date__state { font-size: .55rem; letter-spacing: .03em; text-transform: uppercase; }
  .booking__month .event-date--now { background: var(--color-paper); border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
  .booking__month .event-date--full { color: var(--color-text-muted); }
  .booking__month .event-date--full .event-date__day { text-decoration: line-through; }
  @container (max-width: 320px) {
    .booking__month { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  }

  .tiers { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; }
  .tiers__legend { font-family: var(--font-heading); font-size: var(--fs-2); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; padding: 0; }
  .tiers__intro { color: var(--color-text-muted); font-size: var(--fs--1); line-height: 1.6; margin-block: var(--space-xs) var(--space-md); }
  .tiers__choices { display: grid; gap: var(--space-xs); }
  .tiers__option { position: relative; display: grid; cursor: pointer; min-inline-size: 0; }
  .tiers__option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
  .tiers__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-block-size: 5rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .tiers__option:hover .tiers__row { border-color: var(--color-accent); }
  .tiers__option input:checked + .tiers__row { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-paper)); }
  .tiers__option input:focus-visible + .tiers__row { outline: 2px solid var(--color-text); outline-offset: 3px; }
  .tiers__amount { font-size: var(--fs-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .tiers__name { font-weight: 500; }
  .tiers__row > .tiers__name { display: grid; gap: var(--space-2xs); }
  .tiers__row small { font-size: var(--fs--1); font-weight: 400; line-height: 1.4; text-align: end; }
  .tiers__row > .tiers__name small { text-align: start; color: var(--color-text-muted); }
  .tiers__option--full { cursor: not-allowed; }
  .tiers__option--full .tiers__row { background: var(--color-surface); color: var(--color-text-muted); }
  .tiers__option--full .tiers__amount { text-decoration: line-through; font-size: var(--fs-1); }
  .tiers__option--full .tiers__row > .tiers__name small { display: inline-block; border: 1px solid var(--color-control-border); border-radius: 3px; padding: 1px 6px; }
  .tiers__open { margin-block-start: var(--space-sm); padding-block-start: var(--space-xs); border-block-start: var(--border); }
  .tiers__open-choice { display: flex; align-items: center; gap: var(--space-xs); min-block-size: 44px; font-size: var(--fs--1); cursor: pointer; }
  .tiers__open-choice input { inline-size: 1.0625rem; block-size: 1.0625rem; accent-color: var(--color-accent); margin: 0; }
  .tiers__input { display: flex; align-items: center; gap: var(--space-xs); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); padding-inline: var(--space-sm); }
  .tiers__input:focus-within { border-color: var(--color-text); box-shadow: 0 0 0 2px rgb(66 51 32 / .14); }
  .tiers__input input { inline-size: 100%; min-inline-size: 0; border: 0; background: transparent; padding-block: var(--space-xs); box-shadow: none; outline: none; font: inherit; }
  .tiers__input span:last-child { font-size: var(--fs--1); color: var(--color-text-muted); }
  .tiers__help { font-size: var(--fs--1); line-height: 1.6; color: var(--color-text-muted); margin-block-start: var(--space-2xs); }

  .booking__form { display: grid; }
  .booking__summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--fs--1); margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: var(--border); }
  .booking__summary strong { font-size: var(--fs-1); font-weight: 500; font-variant-numeric: tabular-nums; }
  .booking__summary small { font-size: .7rem; font-weight: 400; color: var(--color-text-muted); }
  .booking__form .btn { margin-block-start: var(--space-sm); }
  .booking__next { color: var(--color-text-muted); font-size: .8rem; line-height: 1.5; margin-block-start: var(--space-xs); }
  .booking .registration .form-note:first-of-type { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: var(--border); }
  .event-body { min-inline-size: 0; }
  .event-section { padding-block-start: var(--space-xl); }
  .event-section h2, .event-highlight__title { font-size: var(--fs-2); letter-spacing: -.03em; margin-block-end: var(--space-md); }
  .event-highlight { display: flex; gap: var(--space-md); margin-block-start: var(--space-xl); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-sm); }
  .event-highlight__mark { font-size: 1.9rem; line-height: 1; color: var(--color-success); }
  .event-highlight__inner { display: grid; gap: var(--space-xs); min-inline-size: 0; }
  .event-highlight__title { font-size: var(--fs-1); margin-block-end: var(--space-2xs); }
  .event-highlight__body { font-size: var(--fs--1); color: var(--color-text-muted); line-height: 1.8; display: grid; gap: var(--space-xs); }
  .event-schedule__rows { margin: 0; display: grid; }
  .event-schedule__row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-md); padding-block: var(--space-md); border-block-start: var(--border); }
  .event-schedule__row dt { color: var(--color-accent); font-size: var(--fs--1); font-variant-numeric: tabular-nums; }
  .event-schedule__row dd { margin: 0; display: grid; gap: var(--space-2xs); font-size: var(--fs--1); }
  .event-schedule__row dd strong { font-weight: 500; font-size: var(--fs-0); }
  .event-schedule__row dd span { color: var(--color-text-muted); }
  /* M45: a text table, two columns of equal weight (project/milestone-contexts/M45-brief.md, section C4) */
  .event-table__rows { margin: 0; display: grid; }
  .event-table__row { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-block-start: var(--border); }
  .event-table__row dt, .event-table__row dd strong { color: var(--color-text); font-weight: 500; font-size: var(--fs-0); line-height: 1.5; }
  .event-table__row dd { margin: 0; display: grid; gap: var(--space-2xs); font-size: var(--fs--1); }
  .event-table__row dd span { color: var(--color-text-muted); }
  /* M48: a photo, a silent loop and a video inside the story. Each fills the
     story column and keeps its own shape: a story photo has no fixed frame, so
     there is no crop, no focus point and no zoom. The caption is the small
     muted type the page already uses for its notes. */
  .event-media { display: grid; gap: var(--space-md); }
  .event-figure { margin: 0; display: grid; gap: var(--space-sm); }
  .event-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-md); background: var(--color-surface); }
  .event-figure figcaption, .event-figure__caption { font-size: var(--fs--1); color: var(--color-text-muted); line-height: 1.7; margin: 0; }
  .event-loop, .event-video, .event-video__player { inline-size: 100%; block-size: auto; display: block; border-radius: var(--radius-md); background: var(--color-surface); }
  .event-video { position: relative; overflow: hidden; }
  .event-video__button { display: block; inline-size: 100%; padding: 0; border: 0; background: var(--color-surface); cursor: pointer; border-radius: var(--radius-md); overflow: hidden; }
  .event-video__still { display: block; inline-size: 100%; block-size: auto; }
  .event-video__mark { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: 4rem; block-size: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font-size: 1.25rem; padding-inline-start: .2rem; }
  .event-video__player { aspect-ratio: auto; }
  .event-video--playing { background: var(--color-ink); }
  /* M48.1: with the sticky phone bar gone, this is the phone's second offer of the action, at the foot of the story */
  .event-end { margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: var(--border); }
  .event-end .btn { inline-size: 100%; border-radius: var(--radius-sm); }
  .event-end form { display: contents; }
  @media (min-width: 900px) {
    .event-layout { grid-template-columns: minmax(0, 1.8fr) minmax(19rem, 1fr); grid-template-areas: "poster booking" "body booking"; gap: var(--space-xl); column-gap: clamp(var(--space-xl), 4vw, 3.5rem); }
    .event-layout:not(.event-layout--poster) { grid-template-areas: "body booking"; }
    .event-poster { grid-area: poster; }
    .event-booking { grid-area: booking; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); }
    .event-body { grid-area: body; }
    .event-end { display: none; }
  }
  @media (min-width: 900px) and (max-height: 700px) { .event-booking { position: static; } }
  @media (max-width: 480px) { .event-schedule__row { grid-template-columns: 7rem 1fr; gap: var(--space-sm); } .event-table__row { grid-template-columns: minmax(4.5rem, .7fr) 1fr; gap: var(--space-sm); } .event-highlight { padding: var(--space-md); gap: var(--space-sm); } }
  .event-summary { font-size: var(--fs-1); color: var(--color-text-muted); }
  .event-places { color: var(--color-accent); font-weight: 600; }
  /* the registration state as a card (the .alert pattern), success for confirmed, accent for a hold */
  .state { background: var(--color-surface); border: var(--border); border-inline-start: 4px solid var(--color-text-muted); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-weight: 500; max-inline-size: none; }
  .state--success { border-inline-start-color: var(--color-success); }
  .state--accent { border-inline-start-color: var(--color-accent); }
  .registration__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  /* M28 (D7): the contribution call to action, just above the button */
  .registration__contribution { color: var(--color-text-muted); }
  /* the confirmed member's ticket */
  .ticket { background: var(--color-surface); border: var(--border); border-inline-start: 4px solid var(--color-success); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: var(--space-xs); }
  .ticket__title { font-size: var(--fs-1); }
  .ticket__code { font-family: var(--font-heading); font-size: var(--fs-2); }
  /* account page: three stacked cards (M10) */
  .account-card {
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: grid;
    gap: var(--space-md);
  }
  .account-card > h2 { font-size: var(--fs-1); }
  .account-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .account-card__head h2 { font-size: var(--fs-1); }
  .account-card__security {
    border-block-start: var(--border);
    padding-block-start: var(--space-md);
  }

  /* account: identity + attendance history */
  .identity { display: grid; gap: var(--space-xs); }
  .identity__row { display: grid; gap: var(--space-2xs); }
  .identity dt { font-weight: 600; }
  .identity dd a { margin-inline-start: var(--space-xs); }
  .attendance-list { display: grid; }
  .attendance-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--border);
  }
  .attendance-list time { color: var(--color-text-muted); font-size: var(--fs--1); }
  /* M28 (D8): the thumbnail and the link on a past evening, the event_row shape */
  .attendance-list__item { display: block; }
  .attendance-list__link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text);
    text-decoration: none;
  }
  a.attendance-list__link:hover .attendance-list__title { color: var(--color-accent); }
  .attendance-list__img {
    flex: 0 0 auto;
    inline-size: 5rem;   /* M30: the 16:9 thumbnail rendition */
    block-size: 2.8125rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .attendance-list__img--empty { display: grid; place-items: center; border: var(--border); color: var(--color-text-muted); }
  .attendance-list__img--empty .logo-mark { inline-size: 1.5rem; block-size: auto; }
  .attendance-list__text { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2xs) var(--space-md); min-inline-size: 0; }
  .attendance-list__title { font-weight: 500; transition: color var(--dur-fast) var(--ease); }

  /* registration (M8): the button block on the event page, the list on the account page */
  .event-price { color: var(--color-text); font-weight: 600; }
  .event-policy { font-size: var(--fs--1); }
  .registration { display: grid; gap: var(--space-sm); padding-block: var(--space-md); border-block: var(--border); }
  .registration form { display: contents; }
  .registration-list { display: grid; }
  .registration-list__item { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-block-end: var(--border); }
  .registration-list__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
  .registration-list__head time { color: var(--color-text-muted); font-size: var(--fs--1); }
  .registration-list__status { color: var(--color-text-muted); font-size: var(--fs--1); }

  /* M12: the « add to your calendar » links under a confirmed ticket */
  .calendar-links { font-size: var(--fs--1); }

  /* holding page (parked domain) */
  .holding {
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-fluid) var(--gutter);
  }
  .holding .logo-mark { inline-size: clamp(3.5rem, 2.5rem + 5vw, 6rem); color: var(--color-accent); }
  .holding__status { font-family: var(--font-heading); font-size: var(--fs-1); }
  .holding p { max-inline-size: 40ch; color: var(--color-text-muted); }

  /* 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;
  }
  /* M16: the public category, a text chip in its own colour on the rows and
     the event page; the colour follows the category, the text is the signal */
  .chip--cat { font-weight: 600; }
  .chip--cat-danse { color: var(--color-cat-danse); }
  .chip--cat-connect { color: var(--color-cat-connect); }
  h1 .chip--cat { vertical-align: middle; font-size: var(--fs--1); }

  /* ---------- M29: the scroll reveal (D1, D2) ---------- */
  /* js/reveal.js arms only the blocks below the first screen; no script,
     no arming, nothing ever hidden. is-in must come after is-armed here:
     equal specificity, source order decides the settled state. */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal].is-armed,
    [data-reveal-stagger].is-armed > * { opacity: 0; transform: translateY(16px); }
    [data-reveal].is-in,
    [data-reveal-stagger].is-in > * {
      opacity: 1; transform: none;
      transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
    }
    [data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 60ms; }
    [data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 120ms; }
    [data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 180ms; }
    [data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 240ms; }
    [data-reveal-stagger].is-in > :nth-child(n+6) { transition-delay: 300ms; }
  }

  /* ---------- M29: photos zoom slightly under a real pointer (D3) ---------- */
  @media (hover: hover) and (pointer: fine) {
    .insta-grid li { border-radius: var(--radius-lg); overflow: hidden; }
    .insta-grid img { transition: transform var(--dur-slow) var(--ease); }
    .insta-grid li:hover img { transform: scale(1.03); }
    img.event-row__img { transition: transform var(--dur-slow) var(--ease); }
    .event-row__link:hover img.event-row__img { transform: scale(1.03); }
  }

  /* M47: the public site's skin for the shared card (css/toast.css). The card is
     paper on the parchment, in the site's own body face, and the terracotta is the
     focus ring. Measured on the card's own fill #FFFCF7: the title tones are
     success #3D5A3A 7.54:1, error #8F2F1D 7.92:1, info #2B2521 14.77:1 and warning
     #8F5F2C 5.34:1 (the plain --color-ochre measures 3.14:1 and tokens.css marks it
     decorative only, so the card uses the deepened token); the body #6C6155 is
     5.90:1 and the close glyph reads at the same value. The icon is a graphic and
     needs only 3:1. The region takes .toasts.toasts--brand so the skin beats the
     neutral defaults on specificity rather than on file order. */
  .toasts.toasts--brand {
    --toast-bg: var(--color-paper);
    --toast-fg: var(--color-text-muted);
    --toast-line: var(--color-border);
    --toast-radius: var(--radius-md);
    --toast-shadow: var(--shadow-2);
    --toast-z: var(--z-toast);
    --toast-focus: var(--color-focus);
    --toast-undo-color: var(--color-text);
    --toast-close-color: var(--color-text-muted);
    --toast-close-hover-bg: var(--color-surface);
    --toast-close-hover-color: var(--color-text);
  }
  .toasts--brand .toast-card--success { --toast-tone: var(--color-success); --toast-tone-line: #C6D3C3; }
  .toasts--brand .toast-card--info { --toast-tone: var(--color-text); --toast-tone-line: var(--color-border); }
  .toasts--brand .toast-card--warning { --toast-tone: var(--color-ochre-deep); --toast-tone-line: #E3D2B8; }
  .toasts--brand .toast-card--error { --toast-tone: var(--color-danger); --toast-tone-line: #E8CCC5; }
  /* the one control a visitor has to dismiss an error on a phone: a 44 px target
     from the box, the glyph unchanged (the logged rule tap-target-never-from-line-height) */
  @media (max-width: 42.5rem) {
    .toasts--brand .toast-card__close::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  }
}