/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Midnight · enrichment: real-photography (E0) · nav: N9 · footer: Ft5
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 * theme-axes: paper-band=dark · display-style=geometric-sans (Tomorrow) · accent-hue=warm-amber (oklch 78% 0.15 65, pulled from AJI logo)
 * disciplines: 2+1 fonts (Tomorrow · Geist · Geist Mono) · OKLCH only · single accent ≤ atmospheric allowance · prefers-reduced-motion respected
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-2);
  background: var(--color-paper);
  padding-inline: max(0px, env(safe-area-inset-left));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── Reusable ─────────────────────────────────────── */

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.rule {
  border: 0;
  height: var(--rule-fine);
  background: var(--color-rule);
  margin: 0;
}
.rule--slab { height: var(--rule-slab); background: var(--color-accent); }
.rule--fine { background: var(--color-rule); }

/* ─── Nav · N9 Edge-aligned minimal ────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--page-gutter);
  background: color-mix(in oklab, var(--color-paper) 80%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  min-height: var(--banner-height);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-short) var(--ease-out);
}
.nav__mark img { height: 28px; width: auto; }
.nav__mark:hover { opacity: 0.85; }
.nav__mark:active { opacity: 0.7; }
.nav__mark:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--strong-weight);
  letter-spacing: 0.02em;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1;
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.nav__cta-arrow {
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.nav__cta:hover .nav__cta-arrow { transform: translateX(3px); }
.nav__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.nav__cta:active { transform: translateY(1px); }

/* ─── Marquee Hero ─────────────────────────────────── */

.marquee {
  position: relative;
  min-height: calc(100dvh - var(--banner-height));
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: end;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  overflow: clip;
  isolation: isolate;
}

/* Two warm radial blooms — atmospheric genre allows up to two,
   each ~20–30% footprint, fixed-attached, no animation. */
.marquee__bloom {
  position: absolute;
  inset: auto -10% -20% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--color-accent) 28%, transparent),
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.marquee__bloom--two {
  inset: -10% auto auto -15%;
  width: 55%;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--color-accent-2) 18%, transparent),
    transparent 70%
  );
}

.marquee__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-neutral);
  align-self: start;
}
.marquee__kicker em {
  color: var(--color-ink);
  font-style: normal;
  font-weight: var(--strong-weight);
}
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--color-accent) 70%, transparent);
}

.marquee__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-marquee);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-marquee);
  color: var(--color-ink);
  margin: 0;
  align-self: end;
  text-align: left;
  /* Long-word safety per gate 63 */
  overflow-wrap: anywhere;
  min-width: 0;
  /* Single letter-style hairline shadow keeps the type from looking flat
     against the bloom — does NOT animate. */
  text-shadow: 0 1px 0 color-mix(in oklab, var(--color-paper) 80%, black);
}

.marquee__credit {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-neutral);
  max-width: var(--measure);
  margin-block-start: var(--space-lg);
  align-self: end;
}
.marquee__credit a {
  color: var(--color-accent);
  border-bottom: 1px solid color-mix(in oklab, var(--color-accent) 40%, transparent);
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.marquee__credit a:hover { border-color: var(--color-accent); }
.marquee__credit a:active { color: color-mix(in oklab, var(--color-accent) 85%, white); }
.marquee__credit a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ─── Section heads ────────────────────────────────── */

.section-head {
  display: grid;
  gap: var(--section-head-gap);
  padding-block-end: var(--space-xl);
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display-s);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.section-head__title--sm { font-size: var(--text-2xl); }

/* ─── On The Road · feature ────────────────────────── */

.album {
  background: var(--color-paper-2);
  padding: var(--space-3xl) var(--page-gutter);
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 60rem) {
  .album {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-3xl);
    max-width: var(--page-max);
    margin-inline: auto;
  }
}

.album__meta {
  display: grid;
  gap: var(--space-lg);
  max-width: 38rem;
}

.album__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.album__title-emph {
  color: var(--color-accent);
  font-weight: var(--display-weight);
}

.album__lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.album__facts {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}
.album__facts li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  align-items: baseline;
}
.album__facts li:last-child { border-bottom: 1px solid var(--color-rule); }
.album__facts .label { margin: 0; }

.album__notify {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
}
.album__notify input {
  width: 100%;
  padding: var(--space-md) var(--space-md);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-input);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1;
  min-height: 48px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.album__notify input::placeholder { color: var(--color-muted); }
.album__notify input:hover { border-color: var(--color-neutral); }
.album__notify input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.album__notify input:disabled { opacity: 0.5; cursor: not-allowed; }
.album__notify input[aria-invalid="true"] {
  border-color: oklch(60% 0.18 25);
}

.album__notify button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-accent);
  color: oklch(15% 0.02 60);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-weight: var(--strong-weight);
  letter-spacing: 0.01em;
  line-height: 1;
  min-height: 48px;
  white-space: nowrap;
  transition:
    transform var(--dur-short) var(--ease-out),
    background var(--dur-short) var(--ease-out);
}
.album__notify button:hover {
  background: color-mix(in oklab, var(--color-accent) 88%, white);
}
.album__notify button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.album__notify button:active { transform: translateY(1px); }
.album__notify button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (min-width: 36rem) {
  .album__notify {
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
  }
  .album__notify button { padding-inline: var(--space-xl); }
}

.album__portrait {
  margin: 0;
  position: relative;
  display: grid;
  gap: var(--space-sm);
}
.album__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  border: 1px solid var(--color-rule);
}
.album__portrait figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ─── Discography ──────────────────────────────────── */

.discography {
  padding: var(--space-3xl) var(--page-gutter);
  max-width: var(--page-max);
  margin-inline: auto;
}

.discog {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .discog {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-2xl);
  }
}

.track {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 40rem) {
  .track { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}

.track__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0; padding: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.track__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-short) var(--ease-out);
}
.track__play {
  position: absolute;
  inset: auto auto var(--space-xs) var(--space-xs);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-accent);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .track__cover:hover { transform: translateY(-2px); }
  .track__cover:hover .track__play { opacity: 1; }
}
.track__cover:active { transform: translateY(0); }
.track__cover:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.track__cover:focus-visible .track__play { opacity: 1; }

/* Playing state — slot stays square so the page doesn't shift; YouTube
   letterboxes the 16:9 video inside the square. Border lights up amber. */
.track__cover[data-playing] {
  border-color: var(--color-accent);
}
.track__cover[data-playing] img,
.track__cover[data-playing] .track__play { opacity: 0; }

.track__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--color-paper);
}

/* Escape hatch — visible in the corner while playing, in case the embed
   shows "Watch on YouTube" (Error 150/153 = uploader disabled embedding). */
.track__fallback {
  position: absolute;
  inset: var(--space-xs) var(--space-xs) auto auto;
  z-index: 2;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: color-mix(in oklab, var(--color-paper) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-rule-2);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.track__fallback:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.track__fallback:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Missing video ID — brief amber hint, no alert dialog. */
.track__cover[data-missing-id]::after {
  content: "YouTube video ID not set yet";
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: oklch(15% 0.02 60);
  background: var(--color-accent);
  text-align: center;
}

.track__meta {
  display: grid;
  gap: var(--space-xs);
}
.track__index .label { margin-block-end: var(--space-3xs); }

.track__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
}
.track__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.track__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-xs);
}
.track__platforms a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral);
  white-space: nowrap;
  padding-block-end: 2px;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.track__platforms a:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}
.track__platforms a:active { color: var(--color-accent); }
.track__platforms a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ─── Portrait gallery ─────────────────────────────── */

.gallery {
  padding: var(--space-3xl) var(--page-gutter);
  max-width: var(--page-max);
  margin-inline: auto;
}

.section-head--inline {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-xl);
}

.gallery__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 60rem) {
  .gallery__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-xl);
  }
  .gallery__item--quote { align-self: stretch; }
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94);
}
.gallery__item--lead img { aspect-ratio: 4 / 5.4; }

.gallery__item--quote {
  display: grid;
  place-content: center;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--color-paper);
  border-color: var(--color-rule);
  min-height: 18rem;
}
.gallery__item--quote blockquote {
  margin: 0;
  display: grid;
  gap: var(--space-lg);
  max-width: 24ch;
}
.gallery__item--quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.gallery__item--quote em {
  color: var(--color-accent);
  font-style: italic;
}
.gallery__item--quote cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ─── Streaming strip ──────────────────────────────── */

.streaming {
  background: var(--color-paper-2);
  padding: var(--space-2xl) var(--page-gutter);
  display: grid;
  gap: var(--space-lg);
  border-block: 1px solid var(--color-rule);
}
.streaming__label { text-align: center; }

.streaming__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl) var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.streaming__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  opacity: 0.78;
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.streaming__link:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.streaming__link:active { transform: translateY(0); }
.streaming__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Logos normalized by visual height — width follows aspect ratio.
   Per-logo overrides below tune optical balance: each brand kit has
   different padding inside its artboard, so equal pixel-heights don't
   read as equal sizes. These numbers are eyeballed for the row. */
.streaming__logo {
  height: 24px;
  width: auto;
  max-width: none;
  display: block;
}
.streaming__link--apple .streaming__logo { height: 22px; }
.streaming__link--spotify .streaming__logo { height: 22px; }
.streaming__link--amazon .streaming__logo { height: 32px; }
.streaming__link--youtube .streaming__logo { height: 26px; }

/* SoundCloud — official wordmark ships with intrinsic width="1200" height="800"
   attrs that fight its actual viewBox (7.65:1). Lock explicit dimensions so the
   browser renders at the right aspect. Filter forces brand orange to white. */
.streaming__link--soundcloud .streaming__logo {
  height: 24px;
  width: 184px;
  filter: brightness(0) invert(1);
}

/* YouTube Music ships as a light-mode badge (white pill, dark text, red play).
   invert + hue-rotate flips surface to dark while keeping red true to brand. */
.streaming__link--invert .streaming__logo {
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 36rem) {
  .streaming__list { gap: var(--space-lg) var(--space-xl); }
  .streaming__logo { height: 22px; }
  .streaming__link--amazon .streaming__logo { height: 28px; }
  .streaming__link--soundcloud .streaming__logo { height: 22px; width: 168px; }
}

/* ─── Footer · Ft5 Statement ───────────────────────── */

.foot {
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-lg);
  max-width: var(--page-max);
  margin-inline: auto;
}

.foot__line {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: 18ch;
  overflow-wrap: anywhere;
  min-width: 0;
}

.foot__meta {
  display: grid;
  gap: var(--space-lg);
  align-items: baseline;
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 40rem) {
  .foot__meta {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-xl);
  }
}

.foot__mark img {
  height: 22px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--dur-short) var(--ease-out);
}
.foot__mark:hover img { opacity: 1; }
.foot__mark:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
@media (min-width: 40rem) {
  .foot__social { justify-content: center; }
}
.foot__social-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--color-neutral);
  border-radius: 50%;
  transition:
    color var(--dur-short) var(--ease-out),
    background var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.foot__social-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.foot__social-link:hover {
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 10%, transparent);
  transform: translateY(-1px);
}
.foot__social-link:active {
  transform: translateY(0);
  color: var(--color-accent);
}
.foot__social-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.foot__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ─── Mobile refinement ────────────────────────────── */

@media (max-width: 40rem) {
  .marquee {
    grid-template-rows: auto 1fr auto;
    padding-block: var(--space-lg) var(--space-xl);
  }
  .marquee__credit { font-size: var(--text-base); }
  .album { padding-block: var(--space-2xl); }
  .album__title { font-size: var(--text-display-s); }
  .discography, .gallery, .foot { padding-block: var(--space-2xl); }
  .gallery__item--quote { min-height: 14rem; padding: var(--space-xl); }
}

/* ─── Reduced motion respect ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html { scroll-behavior: auto; }
}