/* ==========================================================================
   Amir Events — shared component layer (prototype)

   This file holds STRUCTURE and BEHAVIOUR only. Every visual value comes from
   a theme's tokens.css, so the same markup renders as Atelier, Soirée or
   Tag & Nacht.

   Token tiers
     --p-*                         primitives: raw values. Never used here.
     --color-* --type-* --space-*  semantic: what a value is FOR.
     --radius-* --dur-* --ease-*
     --btn-* --field-* --header-*  component: optional overrides. Every use
                                   below falls back to a semantic token.

   Type roles are composite tokens:
     --type-h2: <weight> <size>/<line-height> <family>;
     --type-h2-tracking, --type-h2-case, --type-h2-stretch (optional)

   Inverse surfaces: add .is-inverse to any section. Semantic colours flip,
   and components re-resolve because they read semantic tokens at use site.

   Breakpoints (custom properties can't live in media queries):
     sm 480 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
  background: var(--color-bg);
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking, normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

.skip-link {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-text);
  color: var(--color-bg);
  font: var(--type-button);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Inverse surfaces ---------- */
.is-inverse {
  --color-bg: var(--color-bg-inverse);
  --color-bg-subtle: var(--color-bg-inverse-subtle);
  --color-surface: var(--color-surface-inverse);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-text-subtle: var(--color-text-inverse-subtle);
  --color-border: var(--color-border-inverse);
  --color-border-strong: var(--color-border-inverse-strong);
  --color-accent-text: var(--color-accent-text-inverse);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---------- Type roles ---------- */
.t-display { font: var(--type-display); letter-spacing: var(--type-display-tracking, normal); text-transform: var(--type-display-case, none); font-stretch: var(--type-display-stretch, 100%); text-wrap: balance; }
.t-h1      { font: var(--type-h1);      letter-spacing: var(--type-h1-tracking, normal);      text-transform: var(--type-h1-case, none);      font-stretch: var(--type-h1-stretch, 100%);      text-wrap: balance; }
.t-h2      { font: var(--type-h2);      letter-spacing: var(--type-h2-tracking, normal);      text-transform: var(--type-h2-case, none);      font-stretch: var(--type-h2-stretch, 100%);      text-wrap: balance; }
.t-h3      { font: var(--type-h3);      letter-spacing: var(--type-h3-tracking, normal);      text-transform: var(--type-h3-case, none);      font-stretch: var(--type-h3-stretch, 100%);      text-wrap: balance; }
.t-lead    { font: var(--type-lead);    letter-spacing: var(--type-lead-tracking, normal);    text-transform: var(--type-lead-case, none);    text-wrap: pretty; }
.t-body    { font: var(--type-body);    letter-spacing: var(--type-body-tracking, normal);    text-wrap: pretty; }
.t-small   { font: var(--type-small);   letter-spacing: var(--type-small-tracking, normal);   text-wrap: pretty; }
.t-label   { font: var(--type-label);   letter-spacing: var(--type-label-tracking, normal);   text-transform: var(--type-label-case, uppercase); font-stretch: var(--type-label-stretch, 100%); }
.t-quote   { font: var(--type-quote);   letter-spacing: var(--type-quote-tracking, normal);   text-transform: var(--type-quote-case, none);   font-stretch: var(--type-quote-stretch, 100%);   text-wrap: pretty; }
.t-price   { font: var(--type-price);   letter-spacing: var(--type-price-tracking, normal);   font-stretch: var(--type-price-stretch, 100%);   font-variant-numeric: tabular-nums; }

.t-display em, .t-h1 em, .t-h2 em, .t-h3 em, .t-quote em, .t-lead em {
  font-family: var(--em-family, inherit);
  font-style: var(--em-style, italic);
  font-weight: var(--em-weight, inherit);
  color: var(--em-color, inherit);
  letter-spacing: var(--em-tracking, inherit);
}

.muted  { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.measure { max-width: var(--measure); }

.label {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking, normal);
  text-transform: var(--type-label-case, uppercase);
  font-stretch: var(--type-label-stretch, 100%);
  color: var(--label-color, var(--color-text-muted));
}
.eyebrow { --label-color: var(--color-accent-text); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--content { max-width: calc(var(--container-content) + 2 * var(--gutter)); }
.container--narrow  { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * 0.6); }

/* 1 column on phones; 12 from md. Put grid-column spans in min-width queries. */
.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
}
@media (min-width: 768px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-xs)); }

.rule { border: 0; border-top: 1px solid var(--color-border); }

/* ---------- Buttons ---------- */
.btn {
  --_bg: transparent;
  --_fg: var(--color-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 0.6em);
  min-height: var(--btn-height, 48px);
  padding-inline: var(--btn-pad-x, 20px);
  border: var(--btn-border-width, 1px) solid var(--_bd);
  border-radius: var(--btn-radius, 0);
  background: var(--_bg);
  color: var(--_fg);
  font: var(--type-button);
  letter-spacing: var(--type-button-tracking, normal);
  text-transform: var(--type-button-case, none);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-hover),
    color var(--dur-fast) var(--ease-hover),
    border-color var(--dur-fast) var(--ease-hover),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  --_bg: var(--btn-primary-bg, var(--color-text));
  --_fg: var(--btn-primary-text, var(--color-bg));
}
.btn--secondary {
  --_bd: var(--btn-secondary-border, var(--color-border-strong));
}
.btn--accent {
  --_bg: var(--color-accent);
  --_fg: var(--color-on-accent);
}
.btn--ghost {
  min-height: 44px;
  padding-inline: 0;
  border: 0;
}
.btn--ghost .btn__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-base) var(--ease-out);
}

.btn--sm { --btn-height: var(--btn-height-sm, 40px); --btn-pad-x: var(--btn-pad-x-sm, 16px); }
.btn--lg { --btn-height: var(--btn-height-lg, 56px); --btn-pad-x: var(--btn-pad-x-lg, 28px); }
.btn--block { width: 100%; }

.btn__icon {
  flex: none;
  width: 1em;
  height: 1em;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .btn--primary:hover   { --_bg: var(--btn-primary-bg-hover, color-mix(in oklab, var(--color-text) 84%, var(--color-bg))); }
  .btn--secondary:hover { --_bd: var(--color-text); --_bg: var(--btn-secondary-bg-hover, transparent); }
  .btn--accent:hover    { --_bg: color-mix(in oklab, var(--color-accent) 86%, var(--color-text)); }
  .btn--ghost:hover .btn__label { background-size: 100% 1px; }
  .btn:hover .btn__icon { transform: translateX(3px); }
}

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Inline text link */
.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-border-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-hover);
}
@media (hover: hover) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- Site header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header, 50);
  color: var(--color-text);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    transform var(--dur-slow) var(--ease-out),
    background-color var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out),
    color var(--dur-base) var(--ease-in-out);
}
.site-header[data-over-media]:not([data-solid]) {
  --color-text: var(--header-over-media-text, #fff);
  --color-bg: var(--header-over-media-bg, #000);
  --color-border-strong: var(--header-over-media-border, rgb(255 255 255 / 0.5));
}
.site-header[data-solid] {
  background: var(--header-bg, var(--color-bg));
  border-bottom-color: var(--header-border, var(--color-border));
}
.site-header[data-hidden] { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  height: var(--header-height);
}
.site-header__brand {
  font: var(--type-brand, var(--type-h3));
  letter-spacing: var(--type-brand-tracking, normal);
  text-transform: var(--type-brand-case, none);
  font-stretch: var(--type-brand-stretch, 100%);
  white-space: nowrap;
}
.site-header__nav { display: none; align-items: center; gap: var(--nav-gap, var(--space-m)); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); }
.site-header__cta { display: none; }
.site-header__menu-btn { display: inline-flex; }

@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__menu-btn { display: none; }
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: var(--type-nav, var(--type-button));
  letter-spacing: var(--type-nav-tracking, normal);
  text-transform: var(--type-nav-case, none);
  color: var(--nav-link-color, currentColor);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: var(--nav-indicator, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover::after { transform: scaleX(1); } }

/* ---------- Mobile menu (native <dialog>) ---------- */
.mobile-menu {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    display var(--dur-base) allow-discrete,
    overlay var(--dur-base) allow-discrete;
}
.mobile-menu[open] { opacity: 1; }
@starting-style { .mobile-menu[open] { opacity: 0; } }
.mobile-menu::backdrop { background: transparent; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 var(--gutter) calc(var(--space-l) + env(safe-area-inset-bottom));
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-2xs); margin-block: var(--space-xl) auto; }
.mobile-menu__links a {
  font: var(--type-h2);
  letter-spacing: var(--type-h2-tracking, normal);
  text-transform: var(--type-h2-case, none);
  font-stretch: var(--type-h2-stretch, 100%);
}
.mobile-menu__footer { display: grid; gap: var(--space-s); }

/* ---------- Mobile booking bar ---------- */
.mobile-cta {
  position: fixed;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: calc(var(--space-xs) + env(safe-area-inset-bottom));
  z-index: var(--z-header, 50);
  display: flex;
  gap: var(--space-2xs);
  transform: translateY(calc(100% + 32px));
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-cta[data-visible] { transform: none; }
.mobile-cta > .btn { flex: 1; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* ---------- Media ---------- */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 5);
  border-radius: var(--radius-media, 0);
  background: var(--color-bg-subtle);
}
.media > img, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.media-caption {
  margin-top: var(--space-2xs);
  font: var(--type-small);
  color: var(--color-text-muted);
}

/* ---------- Video hero (video only — DESIGN.md §14) ---------- */
.video-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}
.video-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.42), transparent);
  pointer-events: none;
}

/* ---------- Logo row ---------- */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l) var(--space-xl);
}
.logo-row img {
  width: auto;
  height: var(--logo-height, 44px);
  object-fit: contain;
  filter: var(--logo-filter, grayscale(1));
  opacity: var(--logo-opacity, 0.85);
}

/* ---------- Sticky image journey (DESIGN.md §17, §20) ---------- */
.journey { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) {
  .journey { grid-template-columns: var(--journey-cols, minmax(0, 1fr) minmax(0, 1fr)); align-items: start; }
}
.journey__media { display: none; }
@media (min-width: 1024px) {
  .journey__media {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-m));
    aspect-ratio: var(--journey-ratio, 4 / 5);
    overflow: hidden;
    border-radius: var(--radius-media, 0);
    background: var(--color-bg-subtle);
  }
}
.journey__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.journey__img.is-active,
html:not(.js) .journey__img:first-child { opacity: 1; transform: none; }

.journey__step {
  transition: color var(--dur-base) var(--ease-in-out), border-color var(--dur-base) var(--ease-in-out);
}
.journey__step-media { margin-bottom: var(--space-s); }
@media (min-width: 1024px) {
  .journey__step-media { display: none; }
  .js .journey__step { color: var(--color-text-muted); }
  .js .journey__step.is-active { color: var(--color-text); }
}

/* ---------- Quotes / testimonials ---------- */
.quotes__stage { display: grid; }
.quotes__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.quotes__item.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.quotes__tab { position: relative; text-align: left; min-height: 44px; }
.quotes__progress {
  display: block;
  height: 1px;
  background: var(--color-border);
  overflow: hidden;
}
.quotes__progress > span {
  display: block;
  height: 100%;
  background: var(--quotes-progress, var(--color-text));
  transform: scaleX(0);
  transform-origin: left;
}
.quotes__tab[aria-selected="true"] .quotes__progress > span { transform: scaleX(1); }
.quotes[data-autoplay] .quotes__tab[aria-selected="true"] .quotes__progress > span {
  animation: quote-progress var(--quote-duration, 9000ms) linear forwards;
}
.quotes[data-paused] .quotes__tab[aria-selected="true"] .quotes__progress > span { animation-play-state: paused; }
@keyframes quote-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Segmented control / tabs ---------- */
.segmented {
  position: relative;
  display: inline-flex;
  padding: var(--segmented-pad, 4px);
  border: var(--segmented-border, 0);
  border-radius: var(--segmented-radius, var(--radius-control, 0));
  background: var(--segmented-bg, var(--color-bg-subtle));
  isolation: isolate;
}
.segmented__btn {
  position: relative;
  z-index: 1;
  min-height: var(--segmented-height, 40px);
  padding-inline: var(--space-s);
  border-radius: inherit;
  font: var(--type-button);
  letter-spacing: var(--type-button-tracking, normal);
  text-transform: var(--type-button-case, none);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-in-out);
}
.segmented__btn[aria-selected="true"] { color: var(--segmented-active-text, var(--color-text)); }
.segmented__thumb {
  position: absolute;
  z-index: 0;
  top: var(--segmented-pad, 4px);
  bottom: var(--segmented-pad, 4px);
  left: 0;
  width: var(--w, 0);
  transform: translateX(var(--x, 0));
  border-radius: var(--segmented-thumb-radius, var(--radius-control, 0));
  background: var(--segmented-thumb, var(--color-surface));
  box-shadow: var(--segmented-thumb-shadow, none);
  transition: transform var(--dur-base) var(--ease-in-out), width var(--dur-base) var(--ease-in-out);
}
[role="tabpanel"][hidden] { display: none; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: var(--space-3xs); align-content: start; }
.field__label {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking, normal);
  text-transform: var(--type-label-case, uppercase);
  font-stretch: var(--type-label-stretch, 100%);
  color: var(--color-text-muted);
}
.field__opt { color: var(--color-text-subtle); text-transform: none; letter-spacing: normal; font-weight: inherit; }

.field__control {
  --_bd: var(--field-border, var(--color-border-strong));
  width: 100%;
  min-height: var(--field-height, 52px);
  padding-inline: var(--field-pad-x, 0);
  background: var(--field-bg, transparent);
  border: 0 solid var(--_bd);
  border-width: var(--field-border-widths, 0 0 1px 0);
  border-radius: var(--field-radius, 0);
  font: var(--type-field, var(--type-body));
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--dur-fast) var(--ease-hover),
    box-shadow var(--dur-fast) var(--ease-hover),
    background-color var(--dur-fast) var(--ease-hover);
}
.field__control::placeholder { color: var(--color-text-subtle); opacity: 1; }
@media (hover: hover) { .field__control:hover { --_bd: var(--color-text-muted); } }
.field__control:focus-visible {
  outline: none;
  --_bd: var(--field-border-focus, var(--color-text));
  box-shadow: var(--field-focus-ring, 0 1px 0 0 var(--color-text));
  background: var(--field-bg-focus, var(--field-bg, transparent));
}
.field__control[aria-invalid="true"] { --_bd: var(--color-danger); box-shadow: var(--field-error-ring, 0 1px 0 0 var(--color-danger)); }
.field__control:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.field__control { min-height: 128px; padding-block: var(--space-xs); resize: vertical; }
select.field__control {
  padding-right: calc(var(--field-pad-x, 0px) + 28px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--field-pad-x, 0px) + 4px) center;
}
input[type="date"].field__control::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

.field__hint  { font: var(--type-small); color: var(--color-text-muted); }
.field__error { display: none; font: var(--type-small); color: var(--color-danger); }
.field[data-invalid] .field__error { display: block; }

/* Choice chips (checkbox / radio) */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.choice { position: relative; display: inline-flex; }
.choice > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding-inline: var(--choice-pad-x, 14px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--choice-radius, var(--radius-control, 0));
  font: var(--type-small);
  color: var(--color-text);
  transition:
    background-color var(--dur-fast) var(--ease-hover),
    color var(--dur-fast) var(--ease-hover),
    border-color var(--dur-fast) var(--ease-hover);
}
@media (hover: hover) { .choice:hover > span { border-color: var(--color-text); } }
.choice > input:checked + span {
  background: var(--choice-checked-bg, var(--color-text));
  border-color: var(--choice-checked-bg, var(--color-text));
  color: var(--choice-checked-text, var(--color-bg));
}
.choice > input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Inquiry (date-first, two steps) ---------- */
.inquiry__step { display: none; }
.inquiry[data-current="1"] [data-step="1"],
.inquiry[data-current="2"] [data-step="2"],
.inquiry[data-current="done"] [data-step="done"] { display: grid; }
.inquiry__step { gap: var(--space-m); animation: inquiry-in var(--dur-slow) var(--ease-out); }
@keyframes inquiry-in { from { opacity: 0; transform: translateY(6px); } }
.inquiry__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--section-space); }
.site-footer__wordmark {
  display: block;
  font: var(--type-wordmark, var(--type-display));
  letter-spacing: var(--type-wordmark-tracking, normal);
  text-transform: var(--type-wordmark-case, none);
  font-stretch: var(--type-wordmark-stretch, 100%);
  line-height: 0.85;
  white-space: nowrap;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}