/* Simon and the Cats — styles
   Tokens mirror the design system: https://claude.ai/artifact/84VPLnNs4C7PpamXQjpEgb */

@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --ground: #161514;
  --ground-raised: #201e1c;
  --ground-sunk: #0e0d0c;
  --line: #f3eee524;
  --line-strong: #f3eee566;
  --ink: #f3eee5;
  --ink-muted: #a39c91;
  --brass: #e4a93a;
  --brass-soft: #3a2c12;
  --on-brass: #161514;
  --alert: #ff8c73;
  --focus: var(--brass);
  --shadow-float: 0 1px 0 0 #f3eee514 inset, 0 16px 40px -16px #000000b3, 0 4px 12px -4px #00000066;

  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-label: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-0: 0;
  --radius-sm: 2px;
  --radius-full: 999px;

  --gutter: var(--space-4);
  --max: 1320px;
  --section: var(--space-16);
  --nav-top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms;
  --dur: 400ms;
  --dur-slow: 900ms;
}

[data-theme="paper"] {
  color-scheme: light;
  --ground: #f3f1ec;
  --ground-raised: #fbfaf7;
  --ground-sunk: #e7e3db;
  --line: #1b19161f;
  --line-strong: #1b19168c;
  --ink: #1b1916;
  --ink-muted: #5e5850;
  --brass: #7d540b;
  --brass-soft: #e8d3a6;
  --on-brass: #ffffff;
  --alert: #b03a1e;
  --focus: var(--brass);
  --shadow-float: 0 16px 40px -20px #3b2a0a4d, 0 4px 12px -6px #3b2a0a26;
}

@media (min-width: 768px) { :root { --section: var(--space-24); --gutter: var(--space-8); } }
@media (min-width: 1024px) { :root { --gutter: var(--space-12); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: clip;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.menu-open { overflow: hidden; }
img, video, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, figure { margin: 0; }
a { color: inherit; }
p a { color: var(--brass); text-underline-offset: 3px; }
p a:hover { color: var(--ink); }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); background: var(--ground); color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 200; }
.skip-link:focus { top: var(--space-4); }

/* ---------- Type ---------- */
.eyebrow { font-family: var(--font-label); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.display-1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7vw, 64px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.display-2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 5vw, 40px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.display-3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: 20px; line-height: 32px; max-width: 60ch; }
.body-text { max-width: 65ch; }
.small { font-size: 14px; line-height: 22px; }
.muted { color: var(--ink-muted); }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, iframe:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  font-family: var(--font-label); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-0); cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary { position: relative; isolation: isolate; overflow: hidden; background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
/* Ink fill rises from the bottom edge on hover */
.btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 450ms var(--ease); }
.btn--primary:hover, .btn--primary:focus-visible { border-color: var(--ink); color: var(--ground); }
.btn--primary:hover::before, .btn--primary:focus-visible::before { transform: scaleY(1); }

/* ---------- Arrow link ---------- */
.arrow {
  display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-label); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.arrow svg { width: 56px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur) var(--ease); }
.arrow:hover { color: var(--brass); }
.arrow:hover svg { transform: translateX(6px); }
.arrow:active svg { transform: translateX(10px); }

/* ---------- Nav ---------- */
.site-header { position: fixed; top: var(--nav-top); left: 0; right: 0; z-index: 50; padding-inline: var(--gutter); pointer-events: none; transition: transform 500ms var(--ease); }
/* Slides away while scrolling down (set in main.js); keyboard focus always brings it back */
.site-header.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - var(--space-2))); }
.site-header:focus-within { transform: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  margin-inline: auto; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--ground-raised); border: 1px solid var(--line); box-shadow: var(--shadow-float);
}
.nav__brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease); }
.nav__brand:hover, .footer__brand:hover { color: var(--brass); }
.nav__brand:active, .footer__brand:active { opacity: .7; }
.nav { position: relative; }
/* Scroll progress: brass line along the nav's bottom edge (scroll-driven, see Motion) */
.nav::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.nav__links { display: none; gap: var(--space-6); padding: 0; list-style: none; }
.nav__links a {
  position: relative; display: inline-block; padding-block: var(--space-1);
  color: var(--ink-muted); text-decoration: none;
  font-family: var(--font-label); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__links a:active { opacity: .7; }
.nav__toggle { min-height: 44px; padding: 0 var(--space-4); }

@media (min-width: 768px) {
  .nav { width: max-content; max-width: 100%; padding: var(--space-3) var(--space-6); }
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  padding: var(--nav-top) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--space-8));
  background: var(--ground-raised);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.menu.is-open { opacity: 1; }
.menu:not(.is-open) { pointer-events: none; }
/* Same box metrics as .nav, so brand and button stay put when the menu opens */
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid transparent; }
.menu__links { display: grid; gap: var(--space-4); margin-top: var(--space-16); padding: 0; list-style: none; }
.menu__links a { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: -.015em; text-decoration: none; transition: transform var(--dur) var(--ease); }
.menu__links a:hover { color: var(--brass); transform: translateX(var(--space-2)); }
.menu__links a:active { transform: translateX(var(--space-2)) scale(.98); }
.menu__foot { margin-top: auto; width: 100%; }
/* Links and the button arrive one after another; on close they leave together */
.menu__links li, .menu .menu__foot { opacity: 0; transform: translateY(var(--space-6)); transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.menu.is-open .menu__links li, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-open .menu__foot:active { transform: translateY(1px) scale(.98); }
.menu.is-open .menu__links li:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__links li:nth-child(2) { transition-delay: 110ms; }
.menu.is-open .menu__links li:nth-child(3) { transition-delay: 160ms; }
.menu.is-open .menu__links li:nth-child(4) { transition-delay: 210ms; }
.menu.is-open .menu__foot { transition-delay: 280ms; }
@media (min-width: 768px) { .menu { display: none !important; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 640px; padding-top: 112px; padding-bottom: var(--space-12); background: var(--ground-sunk); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__media::before { content: ""; position: absolute; inset: 0; background: var(--brass); mix-blend-mode: multiply; opacity: .22; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ground) 0%, rgb(22 21 20 / .75) 38%, rgb(22 21 20 / .2) 70%, rgb(22 21 20 / .55) 100%),
    radial-gradient(120% 80% at 80% 30%, transparent 40%, rgb(0 0 0 / .45) 100%);
}
.hero__letters {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 96px;
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(88px, 21vw, 260px); line-height: .8; letter-spacing: -.02em;
  color: var(--ink); opacity: .92;
}
.hero__side { position: absolute; left: var(--space-2); top: 55%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; white-space: nowrap; color: var(--ink-muted); display: none; }
.hero__body { display: grid; gap: var(--space-8); }
.hero__title { display: grid; gap: var(--space-2); }

@media (min-width: 768px) {
  .hero { min-height: 720px; }
  .hero__letters { top: 104px; }
  .hero__side { display: block; }
}
@media (min-width: 1440px) { .hero { min-height: 800px; } }

/* Entrance: letters, then title, then meta row. Fill mode "backwards" hands transform back to hover afterwards */
@media (prefers-reduced-motion: no-preference) {
  .hero__letters span { display: inline-block; animation: rise 800ms var(--ease) backwards; }
  .hero__letters span:nth-child(2) { animation-delay: 60ms; }
  .hero__letters span:nth-child(3) { animation-delay: 120ms; }
  .hero__letters span:nth-child(4) { animation-delay: 180ms; }
  .hero__media video { animation: settle 1800ms var(--ease) backwards; }
  .hero__title { animation: rise var(--dur-slow) var(--ease) 280ms backwards; }
  .hero .meta { animation: rise var(--dur-slow) var(--ease) 420ms backwards; }
  .hero__side { animation: fade 1200ms var(--ease) 700ms backwards; }
}
/* Each letter hops when the cursor passes over it */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__letters span { transition: transform 600ms var(--spring); }
  .hero__letters span:hover { transform: translateY(-.06em) rotate(-3deg); }
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes settle { from { transform: scale(1.08); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Gig meta row ---------- */
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); border-top: 1px solid var(--line-strong); padding-top: var(--space-6); }
.meta__item { display: grid; gap: var(--space-1); align-content: start; }
.meta__value { font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.meta__action { grid-column: 1 / -1; }
.meta__action .btn { width: 100%; }
@media (min-width: 768px) {
  .meta { grid-template-columns: repeat(2, auto) 1fr; gap: 0; align-items: end; }
  .meta__item { padding-inline: var(--space-8); border-left: 1px solid var(--line); }
  .meta__item:first-child { padding-left: 0; border-left: 0; }
  .meta__action { grid-column: auto; justify-self: end; }
  .meta__action .btn { width: auto; }
}

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-12); }
.section-head__title { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 5fr 7fr; align-items: end; gap: var(--space-12); margin-bottom: var(--space-16); }
}

/* ---------- Intro ---------- */
.intro { display: grid; gap: var(--space-8); }
.intro__lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -.015em; max-width: 30ch; text-wrap: balance; }
@media (min-width: 1024px) { .intro { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ---------- Gig list ---------- */
.gigs { padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gig { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3) var(--space-6); align-items: center; padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.gig__date { display: grid; gap: var(--space-1); grid-row: span 2; align-self: start; }
.gig__day { font-family: var(--font-label); font-size: 40px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.gig__where { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.gigs-foot { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 768px) {
  .gig { grid-template-columns: 96px 1fr auto; }
  .gig__date { grid-row: auto; align-self: center; }
  .gig__day { font-size: 44px; }
  .gigs-foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ground-sunk); overflow: hidden; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__facade { position: absolute; inset: 0; display: block; color: var(--ink); text-decoration: none; }
.video__facade video, .video__facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.video__facade::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--brass); mix-blend-mode: multiply; opacity: .2; }
.video__facade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent 55%); }
.video__play { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2; display: flex; align-items: center; gap: var(--space-4); }
.video__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: var(--brass); color: var(--on-brass); transition: transform var(--dur) var(--ease); }
/* Slow breathing ring around the play button */
.video__icon::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--brass); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .video__icon::before { animation: ring 2800ms var(--ease) infinite; } }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.video__icon svg { width: 18px; height: 18px; fill: currentColor; transform: translateX(2px); }
.video__facade:hover video, .video__facade:hover img { transform: scale(1.03); }
.video__facade:hover .video__icon { transform: scale(1.06); }
.video__facade:active .video__icon { transform: scale(.96); }
.video__facade:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.video-notes { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 768px) {
  .video__play { left: var(--space-8); bottom: var(--space-8); }
  .video__icon { width: 72px; height: 72px; }
  .video-notes { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Members ---------- */
.members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); padding: 0; list-style: none; }
@media (min-width: 768px) { .members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); } }
.member__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-sunk); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
/* Brass color treatment, faded in on hover */
.member__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--brass); mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
@media (hover: hover) {
  .member:hover .member__photo::before { opacity: .3; }
  .member:hover .member__photo img { transform: scale(1.04); }
}
.member__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent 45%); }
.member figcaption { display: grid; gap: var(--space-1); padding-top: var(--space-3); }
.member .display-3 { font-size: clamp(20px, 2vw, 26px); text-wrap: balance; }
.guests { display: grid; gap: var(--space-8); margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.guests__text { display: grid; gap: var(--space-3); align-content: start; }
@media (min-width: 768px) { .guests { grid-template-columns: 1fr 3fr; } .guests .members { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Booking ---------- */
.booking { display: grid; gap: var(--space-12); }
.checklist { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.checklist .eyebrow { padding-top: 5px; }
.contact { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8); background: var(--ground-raised); border: 1px solid var(--line); }
.contact__value { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.todo { color: var(--alert); }
@media (min-width: 1024px) { .booking { grid-template-columns: 7fr 5fr; align-items: start; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ground-sunk); color: var(--ink); padding-block: var(--space-16) var(--space-8); }
.footer__grid { display: grid; gap: var(--space-12); }
.footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -.02em; text-decoration: none; }
/* Links get 44px tap height; negative margin keeps the column's visual top/bottom edge */
.footer__links { display: grid; gap: 0; margin-block: calc(-1 * var(--space-3)); padding: 0; list-style: none; }
.footer__links a { display: inline-block; padding-block: var(--space-3); line-height: 20px; font-family: var(--font-label); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); }
.footer__links a:hover { color: var(--ink); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer--slim { padding-block: var(--space-6); }
.site-footer--slim .footer__bottom { margin-top: 0; }
.footer__legal { display: flex; gap: var(--space-6); margin-block: -11px; padding: 0; list-style: none; }
.footer__legal a { display: inline-block; padding-block: 11px; color: var(--ink-muted); text-decoration: none; transition: opacity var(--dur) var(--ease); }
.footer__legal a:hover, .footer__legal a[aria-current="page"] { color: var(--ink); }
.footer__legal a:active { opacity: .6; }

/* ---------- 404 ---------- */
body:has(> .notfound), body:has(> .legal) { min-height: 100dvh; display: flex; flex-direction: column; }
.notfound { flex: 1; min-height: 640px; display: flex; align-items: flex-end; padding-top: 160px; padding-bottom: var(--space-16); }
.notfound__code { font-family: var(--font-display); font-weight: 600; font-size: clamp(120px, 30vw, 320px); line-height: .8; letter-spacing: -.03em; color: var(--brass); }
.notfound__body { display: grid; gap: var(--space-6); }

/* ---------- Legal pages ---------- */
.legal { flex: 1; padding-top: 160px; padding-bottom: var(--section); }
.legal__grid { display: grid; gap: var(--space-12); }
.legal__head { display: grid; gap: var(--space-3); align-content: start; }
.legal__body { display: grid; gap: var(--space-12); max-width: 68ch; }
.legal__block { display: grid; gap: var(--space-4); scroll-margin-top: 112px; }
.legal__block ul { display: grid; gap: var(--space-1); padding-left: 1.2em; margin: 0; }
.legal__block li::marker { color: var(--brass); }
.legal address { font-style: normal; }
@media (min-width: 1024px) {
  .legal { padding-top: 200px; }
  .legal__grid { grid-template-columns: 5fr 7fr; gap: var(--space-12); }
  .legal__head { position: sticky; top: 140px; }
}

/* ---------- Motion ---------- */
/* Scroll reveals. main.js sets data-reveal (and --i for the stagger) only when motion is allowed,
   so without JS everything is simply visible */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.video[data-reveal] { transform: scale(.96); }
.video[data-reveal].is-visible { transform: none; }
[data-reveal]:not(.is-visible) .member__photo img { transform: scale(1.12); }

/* Intro line: word by word */
[data-reveal="words"] { opacity: 1; transform: none; }
[data-reveal="words"] .word { display: inline-block; opacity: .12; transform: translateY(.35em); transition: opacity 600ms var(--ease), transform 800ms var(--ease); transition-delay: calc(var(--w, 0) * 45ms); }
[data-reveal="words"].is-visible .word { opacity: 1; transform: none; }

/* Magnetic elements: main.js writes `translate`, kept separate from `transform` so hover/active still work */
[data-magnetic] { transition: transform var(--dur) var(--ease), translate 600ms var(--ease); }

/* Scroll-linked: hero letters drift and fade, footage zooms, nav shows progress. CSS only, off the main thread */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__letters { animation: drift linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .hero__media { animation: zoom linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .nav::after { animation: progress linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes drift { to { transform: translate3d(0, 35%, 0); opacity: .1; } }
@keyframes zoom { to { transform: scale(1.1); opacity: .55; } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}