/* Home (docs/studio-experiences.md): the opening film, the bounded mechanical study, the music session, iScope, the
   LumaNorm passage from ink to paper, and the paper close. One rule per component; breakpoints and preferences follow
   each component. */

/* Page: ink and paper grounds, and the edge light every Home control shares. */
body.page-home {
  --home-ink: #080d0e;
  --home-paper: #eceae2;
  --home-parchment: #ece7dc;
  --home-edge-ring-width: 1.25px;
  --home-edge-ring-base: rgba(255, 255, 255, 0.2);
  --home-edge-light-cream: rgba(247, 240, 232, 0.98);
  --home-edge-light-accent: color-mix(in srgb, var(--color-accent) 96%, transparent);
  --home-edge-light-accent-2: color-mix(in srgb, var(--color-accent-2) 94%, transparent);
  --home-edge-sweep-soft: rgba(247, 240, 232, 0.26);
  --home-edge-sweep-core: rgba(247, 240, 232, 0.86);
  --home-edge-sweep-accent: color-mix(in srgb, var(--color-accent) 74%, transparent);
  --home-edge-sweep-accent-2: color-mix(in srgb, var(--color-accent-2) 70%, transparent);
  --home-edge-sweep-tail: rgba(247, 240, 232, 0.8);
  --home-edge-light-glow: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --home-edge-light-glow-2: color-mix(in srgb, var(--color-accent-2) 24%, transparent);
  --home-edge-light-glow-size-1: 10px;
  --home-edge-light-glow-size-2: 22px;
  --home-edge-sweep-duration: 0.86s;
  background: var(--home-paper);
}

.page-home::before {
  content: none;
}

.page-home main {
  position: relative;
  isolation: isolate;
  background: var(--home-paper);
}

.page-home [data-home-stage] {
  position: relative;
}

/* Home is a paper page with ink chapters: controls on the film, the study, the music session and iScope take the
   dark ground's focus ring. */
.page-home :is(.hero, .home-mechanical-study, .music-promo, .iscope-home-banner) {
  --focus-ring-color: var(--focus-ring-on-dark);
}

/* Sections arrive in place: whole panels never move or fade; motion belongs to the bounded inner mechanism. */
.js .page-home [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.page-home :is(.hero, .iscope-home-banner, .luma-banner, .contact)[data-home-stage] :is(.hero-message, .iscope-home-banner__panel, .luma-banner-card, .contact-grid) {
  transform: none;
  opacity: 1;
  will-change: auto;
}

/* Header: ink over the film and the dark chapters; home-experience.js turns it paper over the paper chapters. */
.page-home .site-header {
  --nav-link-color: #bcbfb7;
  --nav-link-hover-color: #fff8e8;
  --nav-active-color: #f0e6cf;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.05);
  --nav-active-bg: rgba(236, 223, 187, 0.08);
  --nav-active-border: rgba(233, 215, 172, 0.3);
  --nav-active-glow: none;
  --nav-indicator: linear-gradient(90deg, #d9bd82, #74ad99);
  background: rgba(8, 13, 14, 0.94);
  border-color: rgba(238, 227, 203, 0.14);
  color: #eee9db;
  box-shadow: none;
  transition:
    background-color var(--motion-quick) var(--ease-standard),
    color var(--motion-quick) var(--ease-standard),
    border-color var(--motion-quick) var(--ease-standard);
}

.page-home .site-header .site-brand {
  color: inherit;
}

.page-home .site-header .nav-toggle {
  color: inherit;
  background: transparent;
  border-color: rgba(230, 230, 214, 0.24);
}

html:not(.js) .page-home .nav-toggle {
  display: none;
}

/* Over paper the lockup's name returns to the ink. */
.page-home[data-home-header="paper"] .site-header {
  --lockup-name: initial;
  --nav-link-color: #58625a;
  --nav-link-hover-color: #19382c;
  --nav-active-color: #19382c;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.4);
  --nav-active-bg: rgba(255, 255, 255, 0.65);
  --nav-active-border: rgba(53, 80, 62, 0.22);
  background: rgba(241, 239, 230, 0.95);
  color: #1e332e;
  border-color: rgba(34, 59, 48, 0.14);
}

@media (max-width: 760px) {
  .page-home .site-nav {
    background: #0e1a18;
    border-color: rgba(232, 219, 185, 0.2);
  }

  .page-home[data-home-header="paper"] .site-nav {
    background: #efeee5;
  }
}

/* Hero: the original film over its own first frame, a contrast scrim, the headline and two actions. */
.page-home .hero {
  position: relative;
  padding: 0;
  min-height: calc(100svh - 64px);
  background: var(--home-ink);
  border-radius: 0;
  isolation: isolate;
  overflow: clip;
}

.page-home .hero::before,
.page-home .hero::after {
  content: none;
}

.page-home .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--home-ink);
}

/* The underlay is the only poster: the film's first frame, or the designed mark still while the film stays dormant. */
.page-home .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-poster-image) center / cover no-repeat;
  transition: opacity var(--motion-medium) var(--ease-standard);
  z-index: 0;
}

.page-home .hero-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: none;
  filter: none;
  animation: none;
  transition: opacity var(--motion-medium) var(--ease-standard);
}

.page-home .hero.is-cinematic-ready .hero-video {
  opacity: 1;
}

.page-home .hero.is-cinematic-ready .hero-media::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero .hero-media::before {
    background-image: var(--hero-poster-still, var(--hero-poster-image));
  }
}

html[data-hero-poster="still"] .page-home .hero .hero-media::before {
  background-image: var(--hero-poster-still, var(--hero-poster-image));
}

.page-home .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Deepest at the foot, held through the headline band, with a soft pool under the copy so the eyebrow and the first
     line keep their contrast over the film's pale paper frames; the upper film stays open. */
  background:
    linear-gradient(0deg, #080d0e 0%, rgba(5, 10, 12, 0.74) 8%, rgba(5, 10, 12, 0.52) 32%, rgba(5, 10, 12, 0.3) 50%, transparent 76%),
    radial-gradient(70% 55% at 22% 66%, rgba(5, 10, 12, 0.34), transparent 100%),
    linear-gradient(90deg, rgba(5, 10, 12, 0.22) 0%, rgba(5, 10, 12, 0.22) 58%, transparent 92%);
  transition: background 0.58s linear;
}

.page-home .hero-accent {
  display: none;
}

.page-home .hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: end;
  min-height: inherit;
  padding: 5rem 0 5.75rem;
}

.page-home .hero-message {
  position: relative;
  max-width: 980px;
  padding: 0;
  margin: 0;
}

/* The eyebrow names the studio in full under the header's DMS: the label tier, set straight on the film. Its ink halo
   is layered: a hairline edge and a tight 3px core hold every glyph over the film's palest paper frames, and a soft
   outer glow blends it into the dark ones. (A feathered pool behind the words was tried and read as a smudge.) */
.page-home .hero .hero-eyebrow {
  margin-bottom: 0.45rem;
  color: #fbf6e9;
  font-size: var(--text-label);
  font-weight: var(--heading-weight);
  letter-spacing: var(--track-label);
  text-shadow: 0 0 1px rgba(8, 13, 14, 0.8), 0 0 3px rgba(8, 13, 14, 0.62), 0 1px 8px rgba(8, 13, 14, 0.5), 0 0 18px rgba(8, 13, 14, 0.4);
}

/* One fluid scale (HOME-03): the headline never shrinks as the screen widens, from 27.5px at 320 to 60px at 1440 and
   64px from about 1580. Below 600px the three authored lines run on as one balanced paragraph; from 600px, where the
   longest fits, each authored line stands on its own. */
.page-home .hero-message-title {
  margin: 0 0 1rem;
  max-width: 100%;
  color: #fbf6e9;
  font-size: clamp(1.72rem, 1.14rem + 2.9vw, 4rem);
  line-height: 1.02;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.24);
}

.page-home .hero-message-line {
  display: inline;
  color: inherit;
}

@media (min-width: 481px) {
  .page-home .hero-message-title {
    line-height: 0.99;
    letter-spacing: var(--track-title);
  }
}

@media (min-width: 600px) {
  .page-home .hero-message-line {
    display: block;
    width: fit-content;
    max-width: 100%;
  }
}

.page-home .hero-message-actions {
  margin-top: 0;
  gap: 0.72rem;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.28));
}

@media (max-width: 760px) {
  .page-home .hero {
    min-height: max(660px, calc(100svh - 76px));
  }

  .page-home .hero-shell {
    padding-bottom: 102px;
  }

  /* On a portrait screen the eyebrow and headline fill up to 62% of the film's height: the scrim holds its depth
     through that band (the film's pale paper frames included) and releases the top third to the film. */
  .page-home .hero-scrim {
    background: linear-gradient(0deg, #080d0e 0%, rgba(5, 10, 12, 0.72) 22%, rgba(5, 10, 12, 0.58) 46%, rgba(5, 10, 12, 0.56) 63%, rgba(5, 10, 12, 0.28) 77%, transparent 91%);
  }
}

/* Phone landscape: the same scale, capped so the headline and both actions share the short screen. */
@media (min-width: 540px) and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .page-home .hero-shell {
    align-items: center;
  }

  .page-home .hero .hero-eyebrow {
    margin-bottom: 0.3rem;
  }

  .page-home .hero-message-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.72rem, 1.14rem + 2.9vw, 2.5rem);
  }

  /* The headline sits mid-screen at the left here, so the scrim leans in from that side. */
  .page-home .hero-scrim {
    background:
      linear-gradient(0deg, #080d0e 0%, rgba(5, 10, 12, 0.42) 34%, transparent 70%),
      linear-gradient(90deg, rgba(5, 10, 12, 0.6) 0%, rgba(5, 10, 12, 0.46) 46%, transparent 80%);
  }
}

/* Controls: every Home button and footer link carries the edge light; the two hero actions have their own. */
.page-home :is(.button, .site-footer .footer-links a) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--home-edge-ring-width));
  border-radius: inherit;
  padding: var(--home-edge-ring-width);
  background:
    conic-gradient(
      from 148deg,
      var(--home-edge-ring-base),
      var(--home-edge-light-accent) 24%,
      var(--home-edge-light-cream) 41%,
      var(--home-edge-light-accent-2) 58%,
      var(--home-edge-light-accent) 78%,
      var(--home-edge-ring-base)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-standard), filter var(--motion-medium) var(--ease-standard);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a)::after {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 31%,
    var(--home-edge-sweep-soft) 40%,
    var(--home-edge-sweep-core) 47%,
    var(--home-edge-sweep-accent) 50%,
    var(--home-edge-sweep-accent-2) 53%,
    var(--home-edge-sweep-tail) 60%,
    rgba(255, 255, 255, 0) 69%
  );
  transform: translateX(-132%) rotate(6deg);
  opacity: 0;
  pointer-events: none;
}

.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a):hover::before,
.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a):focus-visible::before {
  opacity: 1;
  filter:
    drop-shadow(0 0 var(--home-edge-light-glow-size-1) var(--home-edge-light-glow))
    drop-shadow(0 0 var(--home-edge-light-glow-size-2) var(--home-edge-light-glow-2));
}

.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a):hover::after,
.page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a):focus-visible::after {
  opacity: 1;
  animation: home-edge-light-sweep var(--home-edge-sweep-duration) var(--ease-standard) both;
}

.page-home .hero .button {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.86), rgba(236, 227, 214, 0.76)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  color: #0f2530;
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    translate var(--motion-settle) var(--ease-spring),
    box-shadow var(--motion-medium) var(--ease-standard),
    border-color var(--motion-medium) var(--ease-standard),
    filter var(--motion-instant) var(--ease-standard);
}

@supports not (transition-timing-function: linear(0, 1)) {
  .page-home .hero .button {
    transition:
      translate var(--motion-settle) var(--ease-standard),
      box-shadow var(--motion-medium) var(--ease-standard),
      border-color var(--motion-medium) var(--ease-standard),
      filter var(--motion-instant) var(--ease-standard);
  }
}

.page-home .hero .hero-ghost-button {
  background:
    linear-gradient(150deg, rgba(12, 18, 24, 0.52), rgba(10, 14, 20, 0.46)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  color: #f7f0e8;
  border-color: rgba(244, 239, 231, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.page-home .hero-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(132deg, var(--cta-edge-1) 8%, var(--cta-edge-2) 49%, var(--cta-edge-3) 92%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-standard), filter var(--motion-medium) var(--ease-standard);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.page-home .hero-cta::after {
  content: "";
  position: absolute;
  inset: -48%;
  border-radius: inherit;
  background: linear-gradient(106deg, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 0.32) 46%, var(--cta-sheen) 51%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-132%) rotate(5deg);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--home-edge-sweep-duration) var(--ease-standard),
    opacity var(--motion-medium) var(--ease-standard);
}

.page-home .hero-cta:hover::before,
.page-home .hero-cta:focus-visible::before {
  opacity: 0.9;
  filter: drop-shadow(0 0 11px var(--cta-glow));
}

.page-home .hero-cta:hover::after,
.page-home .hero-cta:focus-visible::after {
  transform: translateX(118%) rotate(5deg);
  opacity: 0.64;
}

.page-home .hero-cta--projects {
  --cta-edge-1: rgba(220, 147, 82, 0.72);
  --cta-edge-2: rgba(247, 233, 207, 0.9);
  --cta-edge-3: rgba(125, 177, 224, 0.62);
  --cta-sheen: rgba(255, 245, 228, 0.46);
  --cta-glow: rgba(207, 140, 78, 0.3);
}

.page-home .hero-cta--projects:hover,
.page-home .hero-cta--projects:focus-visible {
  border-color: rgba(255, 246, 236, 0.92);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.page-home .hero-cta--studio {
  --cta-edge-1: rgba(125, 201, 194, 0.66);
  --cta-edge-2: rgba(235, 245, 239, 0.72);
  --cta-edge-3: rgba(121, 163, 215, 0.64);
  --cta-sheen: rgba(227, 244, 240, 0.36);
  --cta-glow: rgba(128, 195, 187, 0.26);
}

.page-home .hero-cta--studio:hover,
.page-home .hero-cta--studio:focus-visible {
  border-color: rgba(225, 245, 240, 0.68);
  box-shadow:
    0 17px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Mechanical study: a stable viewing stage lets the engineered movement be read in full. The sticky viewport never
   transforms or fades; only its inner object responds. */
.page-home .home-mechanical-study {
  position: relative;
  height: 420svh;
  min-height: 1500px;
  background: var(--home-ink);
}

.page-home .home-mechanical-study[hidden] {
  display: none;
}

.page-home .home-mechanical-viewport {
  position: sticky;
  top: 64px;
  height: calc(100svh - 64px);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 52%, #18201e 0%, #0c1212 47%, #080d0e 78%);
}

.page-home .home-mechanical-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

.page-home .home-mechanism {
  position: relative;
  width: min(1100px, 94vw, calc(100svh - 110px));
  aspect-ratio: 1;
  contain: layout paint;
  transform: perspective(1400px) translate3d(var(--mechanism-x, 0px), var(--mechanism-y, 0px), 0)
    rotateX(var(--mechanism-tilt-x, 0deg)) rotateY(var(--mechanism-tilt-y, 0deg)) rotate(var(--mechanism-turn, 0deg));
}

.page-home .home-mechanism :is(img, canvas) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-home .home-mechanism-canvas {
  visibility: hidden;
}

.page-home .home-mechanism.is-ready .home-mechanism-canvas {
  visibility: visible;
}

.page-home .home-mechanism.is-ready .home-mechanism-poster {
  visibility: hidden;
}

html:not(.js) .page-home .home-mechanical-study {
  height: auto;
  min-height: 0;
}

html:not(.js) .page-home .home-mechanical-viewport {
  position: relative;
  top: 0;
}

html:not(.js) .page-home .home-mechanism-poster {
  display: none;
}

@media (max-width: 760px) {
  .page-home .home-mechanical-study {
    height: 380svh;
  }

  .page-home .home-mechanical-viewport {
    top: 76px;
    height: calc(100svh - 76px);
  }

  .page-home .home-mechanism {
    width: min(114vw, 700px, calc(100svh - 130px));
  }
}

@media (max-height: 520px) {
  .page-home .home-mechanical-study {
    height: 380svh;
    min-height: 980px;
  }

  .page-home .home-mechanism {
    width: min(76vw, calc(100svh - 118px));
  }
}

/* Music session: the latest album with its release switch. The panel carries only a blurred wash of the chosen cover
   (the sharp cover used to show through as ghost lettering, HOME-10); home-experience.js sets it as the section nears
   the screen. The title keeps one size for every album (HOME-06); where the cover stacks under it, the title reserves
   two lines, so switching never moves the cover. */
.page-home .music-promo {
  padding: clamp(48px, 7vw, 100px) 0 clamp(44px, 6vw, 80px);
  background: linear-gradient(180deg, var(--home-ink), #101918);
}

.music-promo__panel {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  padding: 1.15rem 1.2rem 1.35rem;
  color: #f7e9cf;
  background:
    linear-gradient(120deg, rgba(8, 11, 8, 0.96), rgba(16, 21, 17, 0.92)),
    radial-gradient(520px 260px at 70% 24%, rgba(215, 164, 86, 0.28), transparent 70%);
  overflow: hidden;
  transition: box-shadow var(--motion-medium) var(--ease-standard), border-color var(--motion-medium) var(--ease-standard);
}

.page-home .music-promo__panel {
  border: 1px solid rgba(228, 210, 176, 0.2);
  border-radius: 20px;
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.2);
}

/* A fine brass grid, fading to the right; the shade under it spans the panel once (it used to tile with the grid). */
.music-promo__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(8, 11, 8, 0.96), rgba(16, 21, 17, 0.87)),
    linear-gradient(90deg, rgba(244, 209, 146, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(244, 209, 146, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 58px 58px, 58px 58px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 76%);
  pointer-events: none;
  z-index: -1;
}

.music-promo__panel::after {
  content: "";
  position: absolute;
  inset: -3rem;
  background: var(--music-promo-bg-image, none) center / cover no-repeat;
  filter: blur(28px) saturate(1.08);
  opacity: 0.26;
  transform: scale(1.08);
  pointer-events: none;
  z-index: -2;
  transition: opacity var(--motion-medium) var(--ease-standard);
}

.music-promo__switch {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem;
  border: 1px solid rgba(244, 209, 146, 0.2);
  border-radius: 999px;
  background: rgba(3, 5, 4, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 244, 211, 0.1);
}

.music-promo__pill {
  appearance: none;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 0.9rem;
  color: rgba(244, 228, 197, 0.72);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background var(--motion-medium) var(--ease-standard),
    color var(--motion-medium) var(--ease-standard),
    box-shadow var(--motion-medium) var(--ease-standard);
}

.music-promo__pill:hover,
.music-promo__pill:focus-visible {
  color: #ffe0a3;
}

.music-promo__pill[aria-selected="true"] {
  color: #071008;
  background: linear-gradient(135deg, #ffe2a4, #c99346);
  box-shadow: 0 12px 28px rgba(215, 164, 86, 0.2);
}

/* Without JavaScript the switch cannot work: the latest album stands alone. */
html:not(.js) .music-promo__switch {
  display: none;
}

.music-promo__viewport {
  position: relative;
  z-index: 1;
}

.music-promo__album {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 280px);
  gap: 2rem;
  align-items: center;
  min-height: 230px;
  padding: 1.35rem 1.1rem 0.1rem;
  border-radius: 14px;
  color: #f7e9cf;
}

.music-promo__copy {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.music-promo__release {
  color: rgba(244, 228, 197, 0.78);
  font-size: 0.95rem;
  font-weight: var(--heading-weight);
  font-variant-numeric: tabular-nums;
}

.music-promo__title {
  display: block;
  color: #fff0cb;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}

@media (min-width: 800px) {
  .music-promo__title {
    letter-spacing: var(--track-title);
  }
}

.music-promo__cta {
  width: fit-content;
  color: #e2b466;
}

.music-promo__visual {
  position: relative;
  display: block;
  width: min(100%, 280px);
  justify-self: end;
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 0.58rem;
  background: linear-gradient(145deg, rgba(244, 209, 146, 0.46), rgba(130, 169, 137, 0.16));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

.music-promo__visual::after {
  content: "";
  position: absolute;
  inset: 0.58rem;
  border: 1px solid rgba(255, 238, 194, 0.34);
  border-radius: 6px;
  pointer-events: none;
}

/* The cover scales inside its own frame, never over the brass mat. */
.music-promo__visual picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.music-promo__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-settle) var(--ease-spring);
}

.music-promo__album:focus-visible .music-promo__visual img {
  transform: scale(1.02);
}

@media (hover: hover) and (pointer: fine) {
  .music-promo__album:hover .music-promo__visual img {
    transform: scale(1.02);
  }
}

@supports not (transition-timing-function: linear(0, 1)) {
  .music-promo__visual img {
    transition: transform var(--motion-settle) var(--ease-standard);
  }
}

/* The cover stands beside the copy down to 700px, then under it. */
@media (max-width: 700px) {
  .music-promo__album {
    grid-template-columns: 1fr;
  }

  .music-promo__visual {
    width: min(100%, 240px);
    justify-self: start;
  }

  /* Stacked, the cover sits under the title: two reserved lines keep it still across releases, and a one-line title
     sits on the lower line, beside its link. */
  .music-promo__title {
    display: flex;
    align-items: flex-end;
    min-height: calc(2 * 1.12em);
  }
}

@media (max-width: 760px) {
  .page-home .music-promo {
    padding-top: 32px;
  }

  .music-promo__panel {
    padding: 1rem;
    min-height: auto;
  }

  .music-promo__album {
    padding: 1.15rem 0.05rem 0;
  }
}

@media (forced-colors: active) {
  .music-promo__panel::after {
    display: none;
  }

  .music-promo__pill[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Project iScope: the live local-time instrument beside its copy. */
.page-home .iscope-home-banner {
  padding: 40px 0 60px;
  background: linear-gradient(180deg, #101918, #17201d);
}

.iscope-home-banner__panel {
  position: relative;
  isolation: isolate;
  contain: paint;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1.06fr);
  align-items: center;
  min-height: 440px;
  overflow: hidden;
  color: #f9f5e9;
  background:
    radial-gradient(760px 430px at 84% 50%, rgba(76, 111, 82, 0.22), transparent 70%),
    radial-gradient(520px 340px at 14% 12%, rgba(217, 176, 96, 0.13), transparent 72%),
    linear-gradient(118deg, #060806 0%, #0a0d09 48%, #11130f 100%);
}

.page-home .iscope-home-banner__panel {
  border: 1px solid rgba(219, 201, 158, 0.23);
  border-radius: 20px;
  box-shadow: 0 40px 75px rgba(0, 0, 0, 0.26);
}

.iscope-home-banner__panel::before,
.iscope-home-banner__panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.iscope-home-banner__panel::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(222, 198, 128, 0.028) 1px, transparent 1px),
    linear-gradient(rgba(116, 212, 171, 0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 78%);
  opacity: 0.7;
}

.iscope-home-banner__panel::after {
  width: 40%;
  aspect-ratio: 1;
  right: 6%;
  top: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 235, 181, 0.13), rgba(218, 184, 104, 0.05) 44%, transparent 72%);
  filter: blur(18px);
}

.iscope-home-banner__copy {
  position: relative;
  z-index: 2;
  padding: clamp(2.4rem, 5vw, 4.6rem) 0 clamp(2.4rem, 5vw, 4.6rem) clamp(2rem, 5.6vw, 5rem);
}

.iscope-home-banner__eyebrow {
  margin: 0 0 0.85rem;
  color: rgba(231, 207, 142, 0.78);
  font-size: var(--text-label);
  font-weight: var(--heading-weight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.iscope-home-banner__copy h2 {
  margin: 0;
  color: #fffdf5;
  font-size: clamp(3rem, 3.2vw + 1.25rem, 5.2rem);
  line-height: 0.92;
  letter-spacing: var(--track-title);
  text-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

.iscope-home-banner__tagline {
  max-width: 37rem;
  margin: 1.15rem 0 0;
  color: rgba(247, 244, 232, 0.76);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.18rem);
  line-height: 1.52;
}

.iscope-home-banner__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem 0.56rem;
  margin: 1.3rem 0 0;
  color: rgba(246, 240, 220, 0.6);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.iscope-home-banner__time img {
  width: 11px;
  height: 11px;
  filter: drop-shadow(0 0 6px rgba(83, 244, 206, 0.4));
}

.iscope-home-banner__time time {
  color: rgba(121, 239, 188, 0.88);
}

.iscope-home-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 1.55rem;
}

.page-home .iscope-home-banner__project-link {
  /* the pill stands exactly as tall as the App Store badge beside it */
  min-height: var(--badge-h);
  padding-block: 0;
  border-color: rgba(231, 207, 142, 0.3);
  background: rgba(244, 236, 210, 0.055);
  color: rgba(255, 251, 238, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.page-home .iscope-home-banner__project-link:hover,
.page-home .iscope-home-banner__project-link:focus-visible {
  border-color: rgba(119, 236, 184, 0.5);
  background: rgba(95, 188, 145, 0.1);
  color: #fffdf5;
}

.iscope-home-banner__visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 0;
  padding: 1.15rem clamp(1.5rem, 4vw, 3.7rem) 1.15rem 0;
}

.iscope-home-banner__visual::before {
  content: "";
  position: absolute;
  width: min(78%, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(227, 204, 139, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 22px rgba(227, 204, 139, 0.018),
    0 0 72px rgba(94, 208, 156, 0.08);
  pointer-events: none;
}

.iscope-home-banner__visual .iscope-clock {
  transition: transform var(--motion-settle) var(--ease-spring), filter var(--motion-settle) var(--ease-standard);
}

.iscope-home-banner__panel:hover .iscope-clock,
.iscope-home-banner__panel:focus-within .iscope-clock {
  transform: scale(1.018);
  filter: brightness(1.035);
}

@media (max-width: 900px) {
  .iscope-home-banner__panel {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.84fr);
  }

  .iscope-home-banner__copy {
    padding-left: 2.4rem;
  }

  .iscope-home-banner__copy h2 {
    font-size: clamp(2.8rem, 6vw, 4.2rem);
  }
}

@media (max-width: 760px) {
  .page-home .iscope-home-banner {
    padding-top: 20px;
    padding-bottom: 24px;
  }
}

@media (max-width: 700px) {
  .iscope-home-banner__panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .iscope-home-banner__copy {
    padding: 2.3rem 1.35rem 0.6rem;
  }

  .iscope-home-banner__copy h2 {
    font-size: clamp(2.65rem, 14vw, 4rem);
  }

  .iscope-home-banner__tagline {
    font-size: 0.98rem;
  }

  .iscope-home-banner__visual {
    min-height: 320px;
    padding: 0.3rem 1rem 1.4rem;
  }

  .iscope-home-banner__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .iscope-home-banner__project-link {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .iscope-home-banner__time span {
    flex-basis: calc(100% - 20px);
  }

  .iscope-home-banner__time time {
    margin-left: 19px;
  }
}

/* LumaNorm: a long static passage from ink through sage to paper, and the product card on it. The whole card is the
   link; hover and keyboard focus answer alike: the card's shadow opens, its glow gathers to the centre, the screenshot
   rises 4px (its picture scaling to 1.02 on fine pointers) and the app tile 6px, on the spring. The visual box is the
   frame's box, so the orb and the tile stay on the frame's corner at every width (HOME-07). */
.page-home .luma-banner {
  padding: clamp(150px, 22svh, 280px) 0 clamp(130px, 19svh, 230px);
  background: linear-gradient(180deg, #17201d 0%, #29312c 16%, #53594c 36%, #959b89 59%, #cdd0bd 81%, var(--home-paper) 100%);
}

.page-home .luma-banner-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem;
  overflow: visible;
  cursor: pointer;
  color: var(--color-ink);
  background: linear-gradient(130deg, #f7f6ee, #e0e5dc);
  border: 1px solid rgba(65, 72, 54, 0.18);
  border-radius: 22px;
  box-shadow: 0 22px 58px rgba(33, 44, 34, 0.09);
  transition: box-shadow var(--motion-settle) var(--ease-standard);
}

/* The copy and the visual stand above the card's washes; the shared pointer light (.fx-interaction-light, main.js)
   keeps its own absolute place above them. */
.page-home .luma-banner-card > :not(.fx-interaction-light) {
  position: relative;
  z-index: 1;
}

.page-home .luma-banner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(640px 320px at 0% 0%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 65%),
    radial-gradient(520px 320px at 100% 15%, color-mix(in srgb, var(--color-accent-2) 18%, transparent), transparent 70%);
  opacity: 0.68;
  pointer-events: none;
  z-index: 0;
}

.page-home .luma-banner-card::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--radius-xl) + 16px);
  background:
    radial-gradient(60% 66% at 18% 22%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 74%),
    radial-gradient(58% 70% at 84% 78%, color-mix(in srgb, var(--color-accent-2) 20%, transparent), transparent 76%),
    radial-gradient(80% 82% at 50% 50%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0));
  opacity: 0.22;
  filter: blur(16px);
  transform: translateX(-20%);
  transition:
    opacity var(--motion-settle) var(--ease-standard),
    transform var(--motion-settle) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.luma-banner-status {
  margin-bottom: 0.8rem;
  color: #50634b;
  font-size: var(--text-label);
  font-weight: var(--heading-weight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.luma-banner-tagline {
  color: var(--color-ink);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
}

.luma-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.6rem;
}

.luma-banner-meta span {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent-2) 12%, transparent);
  color: var(--color-accent-2);
  font-size: var(--text-label);
  font-weight: var(--heading-weight);
}

.luma-banner-link {
  margin-top: 0.6rem;
}

.luma-banner-visual {
  position: relative;
  display: grid;
  justify-self: end;
  width: min(360px, 100%);
}

.luma-banner-orb {
  position: absolute;
  top: -30px;
  right: 30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent);
  opacity: 0.32;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}

.page-home .luma-banner-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 37, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 32px rgba(15, 37, 48, 0.26);
  transition: transform var(--motion-settle) var(--ease-spring);
}

.page-home .luma-banner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 44px rgba(7, 18, 24, 0.34),
    inset 0 -18px 28px rgba(7, 18, 24, 0.28),
    inset 0 10px 20px rgba(255, 255, 255, 0.18);
}

.page-home .luma-banner-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(246, 238, 226, 0.44), rgba(246, 238, 226, 0)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.luma-banner-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--motion-settle) var(--ease-spring);
}

.luma-banner-logo {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-line);
  box-shadow: 0 18px 30px rgba(15, 37, 48, 0.18);
  transition:
    transform var(--motion-settle) var(--ease-spring),
    box-shadow var(--motion-settle) var(--ease-standard);
}

.luma-banner-logo img {
  width: 60px;
  height: 60px;
}

.page-home .luma-banner-card:focus-visible {
  box-shadow: 0 36px 70px rgba(15, 37, 48, 0.17);
}

.page-home .luma-banner-card:focus-visible::after {
  transform: none;
  opacity: 0.74;
}

.page-home .luma-banner-card:focus-visible .luma-banner-frame {
  transform: translateY(-4px);
}

.page-home .luma-banner-card:focus-visible .luma-banner-logo {
  transform: translateY(-6px);
  box-shadow: 0 22px 36px rgba(15, 37, 48, 0.22);
}

@media (hover: hover) {
  .page-home .luma-banner-card:hover {
    box-shadow: 0 36px 70px rgba(15, 37, 48, 0.17);
  }

  .page-home .luma-banner-card:hover::after {
    transform: none;
    opacity: 0.74;
  }

  .page-home .luma-banner-card:hover .luma-banner-frame {
    transform: translateY(-4px);
  }

  .page-home .luma-banner-card:hover .luma-banner-logo {
    transform: translateY(-6px);
    box-shadow: 0 22px 36px rgba(15, 37, 48, 0.22);
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home .luma-banner-card:hover .luma-banner-frame img {
    transform: scale(1.02);
  }
}

/* One column: the screenshot grows to a readable 520px under the copy, on the copy's left edge. */
@media (max-width: 960px) {
  .page-home .luma-banner-card {
    grid-template-columns: 1fr;
  }

  .luma-banner-visual {
    justify-self: start;
    width: min(520px, 100%);
  }
}

@media (max-width: 760px) {
  .page-home .luma-banner-card {
    padding: 1.7rem;
    gap: 2rem;
  }

  .page-home .luma-banner-card::after {
    inset: -10px;
    filter: blur(11px);
  }

  .luma-banner-orb {
    top: -20px;
    right: 12px;
    width: 140px;
    height: 140px;
  }

  .luma-banner-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
  }

  .luma-banner-logo img {
    width: 52px;
    height: 52px;
  }
}

/* Engines without linear() (Safari < 17.2) would drop a transition that names --ease-spring. */
@supports not (transition-timing-function: linear(0, 1)) {
  .page-home .luma-banner-frame,
  .luma-banner-frame img {
    transition: transform var(--motion-settle) var(--ease-standard);
  }

  .luma-banner-logo {
    transition:
      transform var(--motion-settle) var(--ease-standard),
      box-shadow var(--motion-settle) var(--ease-standard);
  }
}

/* Contact: the calm paper close, with the native mailto inside its email_off wrapper (index.njk). */
.page-home .contact {
  padding: clamp(80px, 10vw, 145px) 0;
  background: linear-gradient(180deg, var(--home-paper), var(--home-parchment));
}

.page-home .contact::before,
.page-home .contact::after {
  content: none;
}

.page-home .contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(35px, 7vw, 100px);
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-grid > * {
  position: relative;
  z-index: 1;
}

.page-home .contact-grid h2 {
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  max-width: 11ch;
}

.contact-note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
}

.page-home .contact-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  background: rgba(247, 246, 235, 0.64);
  border: 1px solid rgba(52, 69, 50, 0.19);
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(31, 55, 40, 0.06);
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

.card-title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}

.contact-card .button {
  width: fit-content;
}

.contact-list {
  display: grid;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
}

.contact-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--color-ink-muted);
}

.contact-list li::before {
  content: "";
  position: absolute;
  top: 0.62rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-accent);
  transform-origin: center;
}

/* The closing action reads at body size (HOME-08). Hover and keyboard focus light its edge: a copper-green-blue light
   travels round the rim (the gradient's angle turns, so the rim itself never rotates across the words) and a soft sheen
   crosses the glass beneath the letters, once every 3.2s while the pointer or focus rests there. The button lifts on
   the shared spring (main.css .button). */
@property --contact-email-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.page-home .contact-email-button {
  --contact-email-ring-a: color-mix(in srgb, var(--color-accent) 94%, transparent);
  --contact-email-ring-b: color-mix(in srgb, var(--color-accent-2) 90%, transparent);
  --contact-email-ring-c: rgba(104, 156, 197, 0.86);
  --contact-email-ring-a-soft: color-mix(in srgb, var(--color-accent) 56%, transparent);
  --contact-email-ring-b-soft: color-mix(in srgb, var(--color-accent-2) 52%, transparent);
  --contact-email-ring-c-soft: rgba(104, 156, 197, 0.5);
  max-width: 100%;
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 237, 224, 0.72)) padding-box,
    linear-gradient(132deg, color-mix(in srgb, var(--color-accent) 48%, transparent), color-mix(in srgb, var(--color-accent-2) 42%, transparent), rgba(104, 156, 197, 0.4)) border-box;
  color: #0e2a36;
  font-size: 1rem;
  box-shadow:
    0 14px 26px rgba(15, 37, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -9px 14px color-mix(in srgb, var(--color-accent) 12%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(138%);
  backdrop-filter: blur(10px) saturate(138%);
  transition:
    translate var(--motion-settle) var(--ease-spring),
    box-shadow var(--motion-medium) var(--ease-standard),
    color var(--motion-medium) var(--ease-standard),
    filter var(--motion-instant) var(--ease-standard);
}

.page-home .contact-email-button::before,
.page-home .contact-email-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.page-home .contact-email-button::before {
  padding: 1.2px;
  background: conic-gradient(
    from var(--contact-email-angle),
    var(--contact-email-ring-a),
    var(--contact-email-ring-b),
    var(--contact-email-ring-c),
    var(--contact-email-ring-a)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--motion-medium) var(--ease-standard);
}

.page-home .contact-email-button::after {
  inset: 4%;
  border-radius: calc(16px - 4px);
  background:
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0) 24%,
      var(--contact-email-ring-a-soft) 42%,
      var(--contact-email-ring-b-soft) 50%,
      var(--contact-email-ring-c-soft) 58%,
      rgba(255, 255, 255, 0) 76%
    );
  transform: translateX(-126%) skewX(-18deg);
  opacity: 0;
}

/* The address stands above the sheen. */
.page-home .contact-email-button__label {
  position: relative;
  z-index: 1;
}

.page-home .contact-email-button:focus-visible {
  color: #082434;
  box-shadow:
    0 18px 34px rgba(15, 37, 48, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.62),
    0 0 22px color-mix(in srgb, var(--color-accent) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--color-accent-2) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.page-home .contact-email-button:focus-visible::before {
  opacity: 0.96;
  animation: contact-email-ring-orbit 3.2s linear infinite;
}

.page-home .contact-email-button:focus-visible::after {
  opacity: 0.5;
  animation: contact-email-sheen 3.2s linear infinite;
}

@media (hover: hover) {
  .page-home .contact-email-button:hover {
    color: #082434;
    box-shadow:
      0 18px 34px rgba(15, 37, 48, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.62),
      0 0 22px color-mix(in srgb, var(--color-accent) 16%, transparent),
      0 0 18px color-mix(in srgb, var(--color-accent-2) 12%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .page-home .contact-email-button:hover::before {
    opacity: 0.96;
    animation: contact-email-ring-orbit 3.2s linear infinite;
  }

  .page-home .contact-email-button:hover::after {
    opacity: 0.5;
    animation: contact-email-sheen 3.2s linear infinite;
  }
}

@supports not (transition-timing-function: linear(0, 1)) {
  .page-home .contact-email-button {
    transition:
      translate var(--motion-settle) var(--ease-standard),
      box-shadow var(--motion-medium) var(--ease-standard),
      color var(--motion-medium) var(--ease-standard),
      filter var(--motion-instant) var(--ease-standard);
  }
}

@media (max-width: 960px) {
  .page-home .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-home .contact-grid h2 {
    max-width: 12ch;
  }

  .page-home .contact-card {
    padding: 24px;
  }

  .contact-card .button {
    width: 100%;
  }

  .page-home .contact-email-button {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 1.25;
  }
}

/* The address fits the narrowest card on one line: 16px from 375px, 13px below. */
@media (max-width: 374px) {
  .page-home .contact-email-button {
    padding-inline: 12px;
    font-size: 0.8125rem;
  }
}

/* Footer on Home: parchment (through the chrome tokens), and pill-shaped links that carry the edge light. With a
   fine pointer the pills stand a little apart in their lists; on touch the shared 44px rows already give the air. */
.page-home .site-footer {
  --footer-bg: var(--home-parchment);
  --chrome-line: rgba(29, 51, 38, 0.14);
}

@media not all and (pointer: coarse) {
  .page-home .site-footer .footer-group ul {
    gap: 0.42rem;
  }
}

/* The pill's padding overhangs to the left, so each label stays on its column heading's edge. */
.page-home .site-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-inline-start: -0.62rem;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    color var(--motion-medium) var(--ease-standard),
    border-color var(--motion-medium) var(--ease-standard),
    background var(--motion-medium) var(--ease-standard),
    translate var(--motion-medium) var(--ease-standard);
}

.page-home .site-footer .footer-links a:hover,
.page-home .site-footer .footer-links a:focus-visible {
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.44);
  border-color: rgba(15, 37, 48, 0.18);
  translate: 0 -1px;
}

/* Preferences. Reduced motion keeps every state and drops the movement; forced colours use system colours. */
@media (prefers-reduced-motion: reduce) {
  .page-home .hero .button,
  .page-home .hero .hero-ghost-button {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .page-home :is(.button:not(.contact-email-button):not(.hero-cta), .site-footer .footer-links a)::after,
  .page-home .hero-cta::after {
    animation: none !important;
    opacity: 0 !important;
    transition: none !important;
  }

  .music-promo__panel,
  .music-promo__pill,
  .music-promo__album,
  .music-promo__visual img,
  .contact-list li,
  .contact-list li::before,
  .luma-banner-frame,
  .luma-banner-frame img,
  .luma-banner-logo {
    transition: none;
  }

  .page-home .luma-banner-card,
  .page-home .contact-grid,
  .page-home .contact-card {
    transition: none;
  }

  .page-home .contact-email-button::before,
  .page-home .contact-email-button::after {
    animation: none;
  }

  .iscope-home-banner__visual .iscope-clock,
  .iscope-home-banner__panel:hover .iscope-clock,
  .iscope-home-banner__panel:focus-within .iscope-clock {
    transform: none !important;
    filter: none;
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .page-home .home-mechanical-study {
    display: none;
  }

  .page-home .site-header {
    transition: none;
  }
}

@media (forced-colors: active) {
  .page-home :is(.hero, .music-promo, .iscope-home-banner, .luma-banner, .contact, .site-footer, .site-header) {
    background: Canvas;
    color: CanvasText;
  }

  .page-home .hero-message-title,
  .page-home .site-header .site-nav a,
  .page-home .hero .hero-eyebrow {
    color: CanvasText;
  }

  .page-home .hero-media,
  .page-home .hero-scrim {
    display: none;
  }

  /* The footer pills keep their system-coloured focus ring, not a drawn border on every link. */
  .page-home .site-footer .footer-links a {
    border-style: none;
  }
}

@keyframes home-edge-light-sweep {
  0% {
    transform: translateX(-132%) rotate(6deg);
    opacity: 0;
  }
  24% {
    opacity: 0.92;
  }
  100% {
    transform: translateX(122%) rotate(6deg);
    opacity: 0;
  }
}

@keyframes contact-email-ring-orbit {
  to {
    --contact-email-angle: 360deg;
  }
}

/* The sheen glides across in 1.8s (an even ease in and out, so it is seen crossing the whole address), then rests. */
@keyframes contact-email-sheen {
  0% {
    transform: translateX(-126%) skewX(-18deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  56% {
    transform: translateX(122%) skewX(-18deg);
  }
  100% {
    transform: translateX(122%) skewX(-18deg);
  }
}