/* SCEN components v2. Tokens only. */
@layer components {
  /* ---------- buttons ---------- */
  .btn { --btn-bg: transparent; --btn-fg: var(--sys-fg); --btn-border: var(--sys-outline-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.6rem; font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-border); border-radius: var(--radius-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); white-space: normal; text-align: center; }
  @media (min-width: 40em) { .btn { white-space: nowrap; } }
  .btn:hover, .btn:focus-visible { transform: translateY(-2px); border-color: var(--sys-fg-2); }
  .btn:active { transform: translateY(0); }
  .btn--primary { --btn-bg: var(--sys-accent); --btn-fg: var(--sys-on-accent); --btn-border: var(--sys-accent); }
  .btn--primary:hover, .btn--primary:focus-visible { background: var(--sys-accent-hover); border-color: var(--sys-accent-hover); box-shadow: var(--glow-accent); }
  .btn--light { --btn-bg: var(--sys-fg); --btn-fg: var(--sys-on-light); --btn-border: var(--sys-fg); }
  .btn--ghost { --btn-border: var(--sys-outline-strong); }
  .btn--ghost:hover { border-color: var(--sys-accent); color: var(--sys-accent); }
  .btn--sm { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--text-xs); }
  .btn--lg { min-height: 3.5rem; padding: 0 2.4rem; font-size: var(--text-base); }
  .btn--block { width: 100%; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; pointer-events: none; }
  .btn .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-fast) var(--ease-out); }
  .btn:hover .icon { transform: translateX(3px); }
  .section--light .btn--ghost { --btn-border: rgba(26, 24, 22, 0.3); --btn-fg: var(--sys-on-light); }
  .btn.is-loading { pointer-events: none; }
  .btn.is-loading .btn__label { visibility: hidden; }
  .btn.is-loading::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon--fill { fill: currentColor; stroke: none; }

  /* ---------- ticker ---------- */
  .ticker { position: sticky; top: 0; z-index: 51; height: var(--ticker-h); background: var(--sys-surface); border-bottom: 1px solid var(--sys-outline); display: flex; align-items: center; overflow: hidden; }
  .ticker__label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 var(--space-4); font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sys-accent); background: linear-gradient(to right, var(--sys-surface) 70%, transparent); }
  .ticker__marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 92%, transparent 100%); padding-left: 5.5rem; }
  .ticker__track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee 60s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  .ticker__item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; color: var(--sys-fg-2); text-decoration: none; white-space: nowrap; }
  .ticker__item:hover { color: var(--sys-fg); }
  .ticker__item .spade { width: 0.55rem; height: 0.55rem; color: var(--sys-accent); }
  .ticker__item b { color: var(--sys-fg); font-weight: 600; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

  /* ---------- header ---------- */
  .header { position: sticky; top: var(--ticker-h); z-index: 50; height: var(--header-h); background: rgba(12, 11, 10, 0.5); transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out); }
  @supports (backdrop-filter: blur(1px)) { .header { backdrop-filter: blur(14px); } }
  .header.is-scrolled { background: rgba(12, 11, 10, 0.92); box-shadow: 0 1px 0 var(--sys-outline); }
  .header.is-hidden { transform: translateY(-100%); }
  .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--sys-fg); }
  .brand__mark { width: 2rem; height: 2rem; color: var(--sys-accent); filter: drop-shadow(0 0 10px rgba(212, 165, 55, 0.35)); }
  .brand__word { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.85; font-size: 1.5rem; letter-spacing: 0.06em; display: grid; }
  .brand__word small { font-family: var(--font-head); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.24em; color: var(--sys-fg-3); text-transform: uppercase; margin-top: 0.2rem; }
  .nav { display: none; }
  .nav a { position: relative; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sys-fg-2); padding: var(--space-2) var(--space-3); transition: color var(--dur-fast); }
  .nav a::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0; height: 2px; background: var(--sys-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
  .nav a:hover { color: var(--sys-fg); }
  .nav a[aria-current="page"] { color: var(--sys-fg); }
  .nav a[aria-current="page"]::after, .nav a:hover::after { transform: scaleX(1); }
  .header__cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-3); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sys-fg); border: 1.5px solid var(--sys-outline-strong); border-radius: var(--radius-sm); }
  @media (min-width: 64em) { .nav { display: flex; gap: var(--space-1); } .header__cta { display: inline-flex; } .menu-btn { display: none; } }

  /* full menu */
  .menu { position: fixed; inset: 0; z-index: 60; background: var(--sys-bg); display: none; flex-direction: column; padding: var(--space-4) var(--gutter) calc(var(--dock-h) + var(--space-4)); overflow: auto; }
  .menu[data-open="true"] { display: flex; }
  .menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
  .menu__list { display: grid; margin-top: var(--space-5); }
  .menu__list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; text-decoration: none; font-family: var(--font-display); font-size: var(--text-2xl); text-transform: uppercase; line-height: 1; letter-spacing: 0.03em; border-bottom: 1px solid var(--sys-outline); color: var(--sys-fg); transition: color var(--dur-fast), padding-left var(--dur-base) var(--ease-out); }
  .menu__list a:hover { color: var(--sys-accent); padding-left: var(--space-3); }
  .menu__list a[aria-current="page"] { color: var(--sys-accent); }
  .menu__list a .mono { color: var(--sys-fg-3); font-size: var(--text-xs); }
  .menu__foot { margin-top: auto; padding-top: var(--space-6); display: grid; gap: var(--space-4); }

  /* ---------- bottom dock ---------- */
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: var(--dock-h); padding-bottom: env(safe-area-inset-bottom); background: rgba(20, 19, 18, 0.92); border-top: 1px solid var(--sys-outline); display: grid; grid-template-columns: repeat(4, 1fr); }
  @supports (backdrop-filter: blur(1px)) { .dock { backdrop-filter: blur(14px); } }
  .dock a, .dock button { display: grid; place-items: center; gap: 0.15rem; text-decoration: none; color: var(--sys-fg-3); font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding-top: var(--space-2); }
  .dock a[aria-current="page"] { color: var(--sys-accent); }
  .dock .icon { width: 1.4rem; height: 1.4rem; }
  @media (min-width: 64em) { .dock { display: none; } }

  /* ---------- pills ---------- */
  .pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.8em; font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: var(--radius-pill); line-height: 1; color: var(--pill-color, var(--sys-fg-2)); }
  .pill::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
  .pill--announced { --pill-color: var(--sys-status-announced); }
  .pill--open { --pill-color: var(--sys-status-open); }
  .pill--soldout { --pill-color: var(--sys-status-soldout); }
  .pill--postponed { --pill-color: var(--sys-status-postponed); }
  .pill--cancelled { --pill-color: var(--sys-status-cancelled); }
  .pill--completed { --pill-color: var(--sys-status-completed); }
  .pill--stamp { background: rgba(12, 11, 10, 0.7); backdrop-filter: blur(6px); }

  /* ---------- the signature event card ---------- */
  .ecard { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--sys-surface-2); color: var(--sys-fg); text-decoration: none; isolation: isolate; container-type: inline-size; box-shadow: var(--elev-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .ecard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-slow) var(--ease-out); }
  .ecard__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12, 11, 10, 0.95) 0%, rgba(12, 11, 10, 0.5) 40%, rgba(12, 11, 10, 0.1) 70%, rgba(12, 11, 10, 0.4) 100%); }
  .ecard__index { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 0; font-family: var(--font-display); line-height: 0.85; color: var(--sys-accent); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
  .ecard__index--tl { top: 4cqi; left: 5cqi; }
  .ecard__index--br { bottom: 4cqi; right: 5cqi; transform: rotate(180deg); }
  .ecard__index .day { font-size: 15cqi; }
  .ecard__index .mon { font-family: var(--font-head); font-size: 3.2cqi; font-weight: 700; letter-spacing: 0.22em; color: var(--sys-fg); margin-top: 0.4cqi; }
  .ecard__index .spade { width: 5cqi; height: 5cqi; margin-top: 1cqi; }
  .ecard__body { position: absolute; z-index: 2; left: 5cqi; right: 22cqi; bottom: 6cqi; display: grid; gap: 2cqi; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
  .ecard__title { font-family: var(--font-display); font-size: 11cqi; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; }
  .ecard__meta { font-family: var(--font-head); font-size: 3.2cqi; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sys-fg-2); display: grid; gap: 0.6cqi; }
  .ecard__status { position: absolute; z-index: 2; top: 5cqi; right: 5cqi; }
  .ecard:hover, .ecard:focus-visible { transform: translateY(-6px); box-shadow: var(--elev-2), var(--glow-accent); }
  .ecard:hover .ecard__img { transform: scale(1.05); }
  .ecard--static { cursor: default; }
  .ecard--static:hover { transform: none; box-shadow: var(--elev-1); }
  .ecard--static:hover .ecard__img { transform: none; }

  /* ---------- stat band ---------- */
  .statband { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .stat { display: grid; gap: 0.15rem; text-align: center; }
  .stat__num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.95; }
  .stat__num em { font-style: normal; color: var(--sys-accent); }
  .stat__label { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sys-fg-2); }
  .stat__src { font-size: var(--text-xs); color: var(--sys-fg-3); }
  .statband--divided > .stat { padding-block: var(--space-4); border-top: 1px solid var(--sys-outline); border-bottom: 1px solid var(--sys-outline); }

  /* ---------- tiles ---------- */
  .tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .tile { position: relative; display: grid; align-content: end; gap: var(--space-2); min-height: 20rem; padding: var(--space-5); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--sys-fg); background: var(--sys-surface-2); isolation: isolate; box-shadow: var(--elev-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-slow) var(--ease-out); }
  .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 11, 10, 0.96), rgba(12, 11, 10, 0.3) 55%, rgba(12, 11, 10, 0.15)); }
  .tile__kicker { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sys-accent); }
  .tile h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .tile p { color: var(--sys-fg-2); font-size: var(--text-sm); }
  .tile__go { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: var(--space-2); }
  .tile:hover { transform: translateY(-6px); box-shadow: var(--elev-2); }
  .tile:hover img { transform: scale(1.05); }

  /* ---------- marquee (light band) ---------- */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
  .marquee__track { display: flex; gap: var(--space-8); width: max-content; animation: marquee 28s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; color: var(--sys-on-light); }
  .marquee__item .spade { width: 0.6em; height: 0.6em; color: var(--sys-accent); }
  @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee { mask-image: none; -webkit-mask-image: none; } }

  /* ---------- panel (offer) ---------- */
  .offer { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--sys-surface); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); transition: background var(--dur-base); }
  .offer:hover { background: var(--sys-surface-2); }
  .offer__partner { font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; }
  .offer__code { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.1em; padding: var(--space-2) var(--space-3); border: 1.5px dashed var(--sys-accent); color: var(--sys-accent); border-radius: var(--radius-sm); width: fit-content; }
  .offer__terms { font-size: var(--text-sm); color: var(--sys-fg-3); }
  .offer__disclosure { font-size: var(--text-xs); color: var(--sys-fg-3); border-top: 1px solid var(--sys-outline); padding-top: var(--space-3); }

  /* ---------- news card (4:5) ---------- */
  .news { display: grid; gap: var(--space-3); text-decoration: none; color: var(--sys-fg); }
  .news__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--sys-surface-2); position: relative; }
  .news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .news:hover .news__media img { transform: scale(1.04); }
  .news__media .pill { position: absolute; top: var(--space-3); left: var(--space-3); background: rgba(12, 11, 10, 0.7); }
  .news__date { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sys-fg-3); }

  /* ---------- gallery ---------- */
  .gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); } }
  .gallery__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--sys-surface-2); padding: 0; display: block; width: 100%; }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .gallery__item:hover img { transform: scale(1.04); }
  .gallery__item::after { content: ""; position: absolute; top: var(--space-3); right: var(--space-3); width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: rgba(12, 11, 10, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ece6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 1rem no-repeat; border: 1px solid var(--sys-outline-strong); pointer-events: none; }
  .gallery__item--tall { grid-row: span 2; aspect-ratio: auto; }
  .gallery__cap { position: absolute; left: var(--space-3); bottom: var(--space-3); right: var(--space-3); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sys-fg); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); text-align: left; }
  .lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94dvh; }
  .lightbox::backdrop { background: rgba(12, 11, 10, 0.94); }
  .lightbox img { max-width: 96vw; max-height: 86dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); margin-inline: auto; }
  .lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; color: var(--sys-fg-2); font-family: var(--font-head); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
  .lightbox__close { color: var(--sys-fg); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-3); border: 1.5px solid var(--sys-outline-strong); border-radius: var(--radius-sm); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }

  /* ---------- spec list ---------- */
  .spec { display: grid; border-top: 1px solid var(--sys-outline); }
  .spec > div { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--sys-outline); }
  @media (min-width: 40em) { .spec > div { grid-template-columns: 11rem 1fr; gap: var(--space-4); } }
  .spec dt { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sys-fg-3); padding-top: 0.25rem; }
  .spec dd { color: var(--sys-fg-2); }
  .spec dd strong { color: var(--sys-fg); }
  .tbd { color: var(--sys-fg-3); font-style: italic; }

  /* ---------- rules ---------- */
  .rules { display: grid; gap: var(--space-3); }
  .rule { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); background: var(--sys-surface); border: 1px solid var(--sys-outline); border-radius: var(--radius-md); transition: background var(--dur-base), border-color var(--dur-base); }
  .rule:hover { background: var(--sys-surface-2); border-color: var(--sys-outline-strong); }
  .rule .icon { color: var(--sys-accent); margin-top: 0.15rem; }
  .rule strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); }
  .rule p { color: var(--sys-fg-2); font-size: var(--text-sm); margin-top: var(--space-1); }
  .rule--no .icon { color: var(--sys-error); }

  /* ---------- FAQ ---------- */
  .faq { border-top: 1px solid var(--sys-outline); }
  .faq details { border-bottom: 1px solid var(--sys-outline); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.6em; line-height: 1; color: var(--sys-accent); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details > div { padding: 0 0 var(--space-4); color: var(--sys-fg-2); max-width: 62ch; }

  /* ---------- timeline ---------- */
  .timeline { display: grid; border-left: 1px solid var(--sys-outline-strong); margin-left: 0.5rem; }
  .timeline > li { position: relative; padding: 0 0 var(--space-6) var(--space-6); }
  .timeline > li::before { content: ""; position: absolute; left: -0.3rem; top: 0.5rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sys-accent); box-shadow: 0 0 0 4px var(--sys-bg), 0 0 14px rgba(212, 165, 55, 0.5); }
  .timeline time { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sys-accent); display: block; margin-bottom: var(--space-1); }
  .timeline h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .timeline p { color: var(--sys-fg-2); font-size: var(--text-sm); margin-top: var(--space-1); }

  /* ---------- callout / empty / pullquote ---------- */
  .callout { display: grid; gap: var(--space-3); padding: var(--space-5); border-left: 3px solid var(--sys-accent); background: var(--sys-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .callout--warn { border-left-color: var(--sys-status-postponed); }
  .callout p { color: var(--sys-fg-2); }
  .empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-7) var(--space-6); border: 1px solid var(--sys-outline); border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 0% 0%, var(--sys-accent-mist), transparent 60%), var(--sys-surface); }
  .empty h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; }
  .empty p { color: var(--sys-fg-2); }
  .pullquote { display: grid; gap: var(--space-3); padding-left: var(--space-5); border-left: 2px solid var(--sys-accent); }
  .pullquote p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; max-width: 24ch; }
  .pullquote cite { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sys-fg-3); font-style: normal; }

  /* ---------- forms ---------- */
  .form { display: grid; gap: var(--space-5); }
  .field { display: grid; gap: var(--space-2); }
  .field label, .fieldset legend { font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; }
  .field .hint { font-size: var(--text-sm); color: var(--sys-fg-3); }
  .field .req { color: var(--sys-accent); }
  .input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: var(--space-3) var(--space-4); background: var(--sys-surface); border: 1.5px solid var(--sys-outline-strong); border-radius: var(--radius-sm); color: var(--sys-fg); transition: border-color var(--dur-fast), background var(--dur-fast); }
  .input:hover, .field select:hover, .field textarea:hover { border-color: var(--sys-fg-3); }
  .field textarea { min-height: 8rem; resize: vertical; }
  .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d4a537' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-8); }
  .input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--sys-accent); box-shadow: var(--focus-ring); }
  .input::placeholder, .field textarea::placeholder { color: var(--sys-fg-4); }
  .field[data-invalid="true"] { padding-left: var(--space-4); border-left: 3px solid var(--sys-error); }
  .field[data-invalid="true"] .input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--sys-error); }
  .error { color: var(--sys-error); font-size: var(--text-sm); font-weight: 600; }
  .error:empty { display: none; }
  .fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
  .choices { display: grid; gap: var(--space-2); }
  .choice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1.5px solid var(--sys-outline); border-radius: var(--radius-sm); background: var(--sys-surface); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
  .choice:hover { border-color: var(--sys-outline-strong); }
  .choice:has(input:checked) { border-color: var(--sys-accent); background: var(--sys-accent-soft); }
  .choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--sys-accent); margin: 0; flex: none; }
  .choice--text { align-items: flex-start; }
  .choice--text > span { line-height: 1.45; }
  .form__summary { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--sys-error); border-left-width: 4px; border-radius: var(--radius-md); background: rgba(255, 92, 92, 0.08); }
  .form__summary[hidden] { display: none; }
  .form__summary h3 { font-size: var(--text-md); }
  .form__summary a { color: var(--sys-fg); }
  .form__status { padding: var(--space-4); border: 1px solid var(--sys-outline); border-radius: var(--radius-md); background: var(--sys-surface); }
  .form__status[hidden] { display: none; }
  .form__status--ok { border-color: var(--sys-success); }
  .form__status--err { border-color: var(--sys-error); }
  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form--inline { display: grid; gap: var(--space-3); }
  @media (min-width: 40em) { .form--inline { grid-template-columns: 1fr auto; align-items: end; } }

  /* ---------- footer ---------- */
  .footer { border-top: 1px solid var(--sys-outline); padding-block: var(--space-9) var(--space-6); background: var(--sys-bg); }
  .footer__top { display: grid; justify-items: center; gap: var(--space-4); padding-bottom: var(--space-7); border-bottom: 1px solid var(--sys-outline); text-align: center; }
  .footer__top .brand__mark { width: 2.75rem; height: 2.75rem; }
  .footer__top .brand__word { font-size: 2rem; }
  .footer__tag { font-style: italic; color: var(--sys-fg-2); font-size: var(--text-md); }
  .footer__soc { display: flex; gap: var(--space-3); }
  .footer__soc a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--sys-outline-strong); border-radius: 50%; color: var(--sys-fg-2); transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
  .footer__soc a:hover { color: var(--sys-accent); border-color: var(--sys-accent); transform: translateY(-2px); }
  .footer__grid { display: grid; gap: var(--space-6); padding-block: var(--space-7); }
  @media (min-width: 48em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
  .footer h3 { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sys-fg-3); margin-bottom: var(--space-3); }
  .footer ul { display: grid; gap: var(--space-2); }
  .footer a { text-decoration: none; color: var(--sys-fg-2); transition: color var(--dur-fast); }
  .footer a:hover { color: var(--sys-accent); }
  .footer__standard { display: grid; gap: var(--space-3); max-width: 36ch; color: var(--sys-fg-2); font-size: var(--text-sm); }
  .footer__standard strong { font-family: var(--font-head); font-weight: 600; font-size: var(--text-md); color: var(--sys-fg); }
  .footer__legal { padding-top: var(--space-5); border-top: 1px solid var(--sys-outline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); font-size: var(--text-xs); color: var(--sys-fg-3); }
}