/* Page « Pour les artistes ». Même identité que la page des CD : tout le socle
   (couleurs, typo, grain, barre, étiquette de survol) vient de css/base.css. */

html {
  height: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 4em;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}

body { overflow-x: clip; }

/* ─── Barre : point qui suit la section, bouton de contact ─── */

.nav__list { position: relative; }
.nav__item--narrow { display: none; }

/* la page défile sous la barre : un fondu sombre apparaît derrière elle dès qu'on quitte le haut */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5em;
  z-index: -1;
  background: linear-gradient(var(--bg) 45%, color-mix(in srgb, var(--bg) 0%, transparent));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

html.is-scrolled .nav::before { opacity: 1; }

.nav__marker {
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.15em;
  border-radius: 50%;
  list-style: none;
  background: var(--accent);
  box-shadow: 0 0 0.6em var(--accent);
  pointer-events: none;
  opacity: 0;
  translate: var(--x, 0) 0;
  transition: translate 0.7s var(--ease), opacity 0.3s var(--ease);
}

.nav__marker.is-on { opacity: 1; }

.nav__cta {
  position: absolute;
  top: 0.6em;
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.62em 1em 0.62em 0.85em;
  border-radius: 999px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint);
  line-height: 1;
  pointer-events: auto;
  animation: nav-in 0.9s var(--ease) 0.55s both;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.nav__cta:hover,
.nav__cta:focus-visible { background: var(--text); color: var(--bg); }

.nav__cta-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.7em var(--accent);
}

/* ─── Briques communes de la page ─── */

/* bouton rond + libellé : le même que « Écouter » sur la page des CD */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex-shrink: 0;
  padding: 0.25em 0.9em 0.25em 0.25em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--muted);
  pointer-events: auto;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.pill:hover,
.pill:focus-visible {
  background: var(--text);
  color: var(--bg);
  box-shadow: inset 0 0 0 0.5px var(--text);
  outline: none;
}

.pill__icon {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.pill:hover .pill__icon,
.pill:focus-visible .pill__icon { background: var(--bg); color: var(--text); }
.pill svg { width: 0.85em; height: 0.85em; fill: currentColor; }

.pill--light { box-shadow: inset 0 0 0 0.5px rgba(236, 235, 230, 0.32); }
.pill--light .pill__icon { background: var(--accent); }
.pill--big { font-size: 1.2em; padding-right: 1.2em; }

/* lignes « libellé — valeur » du panneau d'infos */
.rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.25em;
}

.row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25em;
  padding: 0.38em 0;
}

.row__label {
  flex-shrink: 0;
  padding-top: 0.32em;
  color: var(--muted);
}

.divider {
  position: absolute;
  inset: 0 0 auto;
  height: 0.5px;
  background: var(--faint);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease) 0.15s;
}

.row:first-child .divider { background: var(--text); }

.hint {
  display: flex;
  align-items: center;
  gap: 0.9em;
  color: var(--muted);
}

.hint__sep {
  flex: none;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background: var(--faint);
}

/* les textes masqués montent ligne par ligne, les filets se tracent */
.mask > * { transition: transform 1.1s var(--ease); }
.mask:nth-child(2) > * { transition-delay: 0.07s; }
.mask:nth-child(3) > * { transition-delay: 0.14s; }

html.js [data-section]:not(.is-in) .mask > * { transform: translateY(110%); }
html.js [data-section]:not(.is-in) .divider { transform: scaleX(0); }
html:not(.is-ready) .hero .divider { transform: scaleX(0); }

html.js .reveal {
  opacity: 0;
  translate: 0 1.6em;
  transition: opacity 0.9s var(--ease), translate 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}

html.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ─── Accroche ─── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 42em;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(ellipse 60% 55% at 62% 48%, #1d1d1d 0%, var(--bg) 70%);
}

.hero:active { cursor: grabbing; }

/* la lumière du disque déborde sur la page */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(34% 46% at 62% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
  animation: breathe 7s ease-in-out infinite;
}

@keyframes breathe { 50% { opacity: 0.55; } }

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__canvas canvas { display: block; width: 100%; height: 100%; }

/* voile en dégradé sous les textes, comme sur la page des CD */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 70%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(farthest-side at 0 100%,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 60%, transparent) 50%,
    transparent 100%);
}

.hero__stage {
  position: absolute;
  top: 10%;
  bottom: 26%;
  left: 30%;
  right: 10%;
  pointer-events: none;
}

.panel {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  width: max(20.8333%, 20em);
  pointer-events: none;
}

.panel__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.panel__counter { color: var(--muted); font-variant-numeric: tabular-nums; }

.hero__bottom {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 3.4em;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3em;
  pointer-events: none;
}

.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 700;
  font-size: clamp(3.6em, 8vw, 11em);
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.hero__title .mask { padding-bottom: 0.04em; }

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.3em;
  max-width: 25em;
  pointer-events: auto;
}

.hero__lead {
  font-size: 1.15em;
  line-height: 1.45;
  color: var(--muted);
  text-align: right;
  text-wrap: pretty;
}

/* choix de la sortie présentée */
.switch {
  display: flex;
  gap: 0.25em;
  padding: 0.25em;
  border-radius: 999px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint);
}

.switch__btn {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.6em 1em;
  border-radius: 999px;
  line-height: 1;
  color: var(--muted);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.switch__btn .subheading-xs { opacity: 0.6; }
.switch__btn:hover { color: var(--text); }
.switch__btn[aria-selected="true"] { background: var(--text); color: var(--bg); }

.hero > .hint {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 2;
}

/* entrée de l'accroche : comme la page des CD une fois le rideau levé */
html.js:not(.is-ready) .hero .mask > * { transform: translateY(110%); }
html.js .hero__lead,
html.js .switch,
html.js .hero > .hint,
html.js .panel .pill { transition: opacity 0.9s var(--ease) 0.5s, translate 1.1s var(--ease) 0.5s; }
html.js:not(.is-ready) .hero__lead,
html.js:not(.is-ready) .switch,
html.js:not(.is-ready) .hero > .hint,
html.js:not(.is-ready) .panel .pill { opacity: 0; translate: 0 0.8em; }
html.js .hero__canvas { transition: opacity 1.4s var(--ease) 0.2s; }
html.js:not(.is-ready) .hero__canvas { opacity: 0; }

/* ─── Sections ─── */

.section {
  position: relative;
  padding: clamp(6em, 12vw, 11em) var(--pad) 0;
}

.section__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-top: 0.7em;
  margin-bottom: clamp(2.4em, 5vw, 4.5em);
  color: var(--muted);
}

.section__head .divider { background: var(--text); }

.section__title {
  margin: 0 0 0.6em;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 700;
  font-size: clamp(3em, 6.6vw, 8.6em);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.section__title .mask { padding-bottom: 0.04em; }

/* A1 · Manifeste : les mots s'allument au fil du défilement */
.manifesto__text {
  max-width: 16em;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 700;
  font-size: clamp(2.6em, 5.8vw, 7.6em);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.w { opacity: 0.14; transition: opacity 0.5s var(--ease), color 1.4s var(--ease); }
.w.is-lit { opacity: 1; }
.w.is-accent { color: var(--accent); }

.manifesto__note {
  max-width: 27em;
  margin: 3.2em 0 0 auto;
  font-size: 1.3em;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

/* A2 · L'offre, comme l'Index de la page des CD */
.tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 0.5px solid var(--faint);
}

.track {
  display: grid;
  grid-template-columns: 4em 4.2em minmax(0, 1.1fr) minmax(0, 1fr) 6em;
  align-items: center;
  gap: 1.6em;
  padding: 1.2em 0.6em;
  border-top: 0.5px solid var(--faint);
  transition: background-color 0.4s var(--ease), opacity 0.9s var(--ease), translate 1.1s var(--ease);
}

.track:hover { background: var(--hover); }
.track__num { color: var(--muted); font-variant-numeric: tabular-nums; }

/* mini CD : galette, moyeu argenté, trou */
.track__disc {
  display: block;
  width: 3.6em;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    var(--art, none) center / cover no-repeat,
    radial-gradient(circle closest-side, transparent 0 13%, #d6dbe1 13.6% 22%, #8d939b 22.5% 24%, transparent 24.5%);
  box-shadow: 0 0 0 0.5px rgba(236, 235, 230, 0.28), 0 0.5em 1.2em -0.4em rgba(0, 0, 0, 0.75);
  transition: rotate 1.4s var(--ease);
}

[data-thumb="0"] { --art: var(--art-0); }
[data-thumb="1"] { --art: var(--art-1); }
[data-thumb="2"] { --art: var(--art-2); }

.track:hover .track__disc { rotate: 220deg; }

.track__title {
  margin: 0;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 650;
  font-size: clamp(1.8em, 2.7vw, 3.3em);
  line-height: 0.95;
  text-transform: uppercase;
  transition: translate 0.5s var(--ease), color 0.4s var(--ease);
}

.track:hover .track__title { translate: 0.25em 0; color: var(--accent); }
.track__text { font-size: 1.1em; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.track__tag { justify-self: end; color: var(--muted); }

/* A3 · La démo */
.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2em, 5vw, 6em);
  align-items: start;
}

.demo__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6em;
}

.demo__intro .section__title { margin-bottom: 0; }
.demo__text { max-width: 28em; font-size: 1.25em; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.demo__intro .rows { max-width: 34em; }

.screen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.1em;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint), 0 3em 6em -2em rgba(0, 0, 0, 0.8);
}

.screen__bar {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.75em 1em;
  border-bottom: 0.5px solid var(--faint);
}

.screen__dots { display: flex; gap: 0.4em; }
.screen__dots i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--faint); }

.screen__url {
  flex: 1;
  margin-right: 3.2em;
  padding: 0.45em;
  border-radius: 999px;
  background: rgba(236, 235, 230, 0.04);
  color: var(--muted);
  text-align: center;
  text-transform: none;
}

.screen__view {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}

/* la vraie page, rendue à 1440 × 900 puis réduite */
.screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--k, 0.5));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.screen iframe.is-loaded { opacity: 1; }

/* en attendant (ou sur téléphone) : trois disques en éventail */
.screen__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.screen__poster .track__disc {
  grid-area: 1 / 1;
  width: 34%;
}

.screen__poster .track__disc:nth-child(1) { translate: -42% -6%; rotate: -18deg; }
.screen__poster .track__disc:nth-child(3) { translate: 42% 6%; rotate: 18deg; }

/* lancement à la demande : la page des CD est lourde à démarrer, on ne la charge pas en plein défilement */
.screen__play {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  translate: -50% 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.4s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.screen.is-loading .screen__play { pointer-events: none; }
.screen.is-loading .screen__play .pill__icon { animation: breathe 0.9s ease-in-out infinite; }
.screen.is-live .screen__play { opacity: 0; pointer-events: none; }

.screen__open {
  position: absolute;
  right: 1em;
  bottom: 1em;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  opacity: 0;
  translate: 0 0.5em;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), translate 0.5s var(--ease);
}

.screen.is-live .screen__open { opacity: 1; translate: 0 0; pointer-events: auto; }

/* B1 · Méthode */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.4em 1.8em 2.2em 0;
  border-top: 0.5px solid var(--faint);
}

.step + .step { padding-left: 1.8em; border-left: 0.5px solid var(--faint); }

.step__num {
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 700;
  font-size: clamp(5em, 9vw, 11em);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 75%, transparent);
}

.step__title {
  margin: 0.2em 0 0;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 650;
  font-size: clamp(1.8em, 2.4vw, 2.8em);
  line-height: 0.95;
  text-transform: uppercase;
}

.step__text { max-width: 24em; font-size: 1.1em; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

.step__out {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-top: auto;
  padding-top: 1.4em;
}

.step__out span { color: var(--muted); }

/* B2 · Questions */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2em, 5vw, 6em);
  align-items: start;
}

.faq__list { border-bottom: 0.5px solid var(--faint); }
.qa { border-top: 0.5px solid var(--faint); }

.qa__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  padding: 1.25em 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 600;
  font-size: clamp(1.4em, 1.9vw, 2.2em);
  line-height: 1.05;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}

.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover,
.qa__q:focus-visible { color: var(--accent); outline: none; }

/* « + » qui devient « × » */
.qa__icon { position: relative; flex: none; width: 0.8em; height: 0.8em; transition: rotate 0.5s var(--ease); }

.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
}

.qa__icon::after { rotate: 90deg; }
.qa[open] .qa__icon { rotate: 45deg; }

.qa__a {
  max-width: 38em;
  padding: 0 3em 1.5em 0;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
  animation: qa-in 0.5s var(--ease);
}

@keyframes qa-in { from { opacity: 0; translate: 0 -0.4em; } }

/* B3 · Contact */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2em, 5vw, 6em);
  align-items: start;
}

.contact__intro { display: flex; flex-direction: column; gap: 1.6em; }
.contact__intro .section__title { margin-bottom: 0; }
.contact__text { max-width: 26em; font-size: 1.25em; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.contact__intro .rows { max-width: 30em; }

/* le formulaire reprend la carte du lecteur */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  padding: clamp(1.4em, 2.6vw, 2.4em);
  border-radius: 1.1em;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint);
}

.form__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-bottom: 1.1em;
  border-bottom: 0.5px solid var(--faint);
  color: var(--muted);
}

.form__head .eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.form__head .eq i:nth-child(2) { animation-delay: -0.45s; animation-duration: 0.7s; }
.form__head .eq i:nth-child(3) { animation-delay: -0.2s; animation-duration: 1.1s; }
.form__head .eq i:nth-child(4) { animation-delay: -0.6s; animation-duration: 0.8s; }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6em;
}

.field { display: flex; flex-direction: column; gap: 0.5em; }
.field__label { color: var(--muted); }

.field__input {
  width: 100%;
  padding: 0.45em 0 0.6em;
  border: 0;
  border-bottom: 0.5px solid var(--faint);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1.2em;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s var(--ease);
}

.field__input::placeholder { color: rgba(236, 235, 230, 0.25); }
.field__input:focus { border-bottom-color: var(--accent); }
.field__input--area { min-height: 5.5em; resize: vertical; }
.field.is-invalid .field__input { border-bottom-color: #ff6b6b; }
.field.is-invalid .field__label { color: #ff8a8a; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 1.6em;
  margin-top: 0.4em;
}

.form__status { font-size: 1em; color: var(--muted); }
.form__status.is-error { color: #ff8a8a; }
.form__status.is-ok { color: var(--text); }

/* ─── Pied : le grand MIX ─── */

.end {
  position: relative;
  margin-top: clamp(7em, 14vw, 12em);
  padding: 0 var(--pad) var(--pad);
  overflow: hidden;
}

.end__word {
  display: flex;
  justify-content: center;
  margin: 0 0 0.3em;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 750;
  font-size: 40vw;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* l'approche serrée fait déborder les lettres : on élargit le masque sans décaler le mot */
.end__word .mask { padding: 0.03em 0.06em 0; margin: 0 -0.03em; }

.end__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding-top: 0.9em;
  border-top: 0.5px solid var(--faint);
  color: var(--muted);
}

.end__links { display: flex; align-items: center; gap: 0.9em; }

.end__links a,
.end__links button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 0.3s var(--ease);
}

.end__links a:hover,
.end__links button:hover { color: var(--text); }

/* ─── Écrans moyens ─── */

@media (max-width: 991px) {
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 1.6em; }
  .hero__aside { align-items: flex-start; }
  .hero__lead { text-align: left; }
  .track { grid-template-columns: 3em 3.6em minmax(0, 1fr) 4.5em; }
  .track__text { grid-column: 3 / -1; grid-row: 2; }
  .demo__grid,
  .faq,
  .contact__grid { grid-template-columns: 1fr; }
}

/* ─── Téléphone ─── */

@media (max-width: 767px) {
  .nav__cta { display: none; }
  .nav::before { inset: -2.5em 0 0; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 55%); }
  .nav__list > .nav__item.nav__item--wide { display: none; }
  .nav__list > .nav__item:has(.is-current):not(.nav__item--wide) { display: block; }
  .nav__item--narrow { display: block; }

  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    padding: var(--pad) var(--pad) 6.5em;
  }

  .hero__stage { position: relative; inset: auto; flex: 1; min-height: 14.5em; margin: 0.6em 0; }

  .panel { position: relative; top: 0; left: 0; width: 100%; }
  .hero__bottom { position: relative; left: 0; right: 0; bottom: 0; }
  .hero__title { font-size: clamp(3.2em, 15vw, 5em); }
  .hero > .hint { display: none; }
  .hero::after { width: 100%; height: 55%; }
  .switch { width: 100%; justify-content: space-between; }
  .switch__btn { flex: 1; justify-content: center; }

  .track { grid-template-columns: 3.2em minmax(0, 1fr); gap: 0.4em 1em; padding: 1em 0; }
  .track__num,
  .track__tag { display: none; }
  .track__disc { grid-row: span 2; width: 3.2em; align-self: start; }
  .track__text { grid-column: 2; grid-row: auto; }
  .track__title { font-size: 1.7em; }

  .screen iframe,
  .screen__play { display: none; }
  .screen__open { opacity: 1; translate: 0 0; pointer-events: auto; }
  .steps { grid-template-columns: 1fr; }
  .step,
  .step + .step { padding: 1.3em 0 1.8em; border-left: 0; }
  .form__row { grid-template-columns: 1fr; }
  .end { padding-bottom: 6.5em; }
  .end__row { flex-direction: column; align-items: flex-start; gap: 0.7em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__wash,
  .form__head .eq i { animation: none; }
  .mask > *,
  html.js .reveal { transition: none; }
}