/* KOBRA NØIR — one shared visual system for every route and screen. */
@layer reset, tokens, layout, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-color: #604375 #0b090f; }
  body { margin: 0; }
  img, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, textarea, select { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  a { color: inherit; }
  button:disabled { cursor: wait; opacity: .65; }
  [hidden] { display: none !important; }
  h1, h2, h3, h4, p, figure { margin: 0; }
  dialog { margin: auto; }
  ::selection { background: #b576ec; color: #11091b; }
  :focus-visible { outline: 2px solid #dfbbff; outline-offset: 5px; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #0b090f;
    --surface: #131018;
    --surface-raised: #1a1422;
    --ink: #f5eff9;
    --muted: #b5aabd;
    --subtle: #93839f;
    --purple: #a963f2;
    --lavender: #d6b2ef;
    --line: #cec0e025;
    --line-strong: #b78bcc55;
    --gradient: linear-gradient(115deg, #e0bdf5 0%, #c68bff 48%, #a365ef 100%);
    --shadow: 0 18px 55px #0005;
    --radius: 16px;
    --header-h: 86px;
    --gutter: clamp(22px, 5.2vw, 96px);
    --section-space: clamp(76px, 9vw, 152px);
    --ease: cubic-bezier(.22, .68, .2, 1);
    --player-space: 90px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--player-space) + env(safe-area-inset-bottom, 0px));
  }
  h1, h2, h3, h4 { color: var(--ink); font-weight: 450; line-height: 1.08; text-wrap: balance; }
  h1 { font-size: clamp(44px, 6.8vw, 94px); letter-spacing: -.055em; }
  h2 { font-size: clamp(34px, 4.3vw, 64px); letter-spacing: -.045em; }
  h3 { font-size: clamp(23px, 2.1vw, 32px); letter-spacing: -.03em; }
  h4 { font-size: 19px; letter-spacing: -.015em; }
  p { color: var(--muted); }
  small { font-size: 13px; }
  em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--lavender); }
  a { text-decoration: none; text-underline-offset: .25em; }
  p a:not(.button), .prose a { text-decoration: underline; text-decoration-color: #b58ec17a; }
  .icon { width: 24px; height: 24px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
  .muted { color: var(--muted); }
  .small-copy { font-size: 14px; color: var(--subtle); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@layer layout {
  main { overflow: clip; }
  .container { width: min(100% - var(--gutter) * 2, 1440px); margin-inline: auto; }
  .section { position: relative; padding-block: var(--section-space); isolation: isolate; }
  .section + .section { border-top: 1px solid #b597ce12; }
  .section::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 10% -15% 0 28%;
    background: radial-gradient(ellipse at 70% 60%, #752a9b0c, transparent 66%);
  }
  .section:nth-of-type(even)::before { inset: 0 25% 5% -20%; }
  .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(32px, 4vw, 60px); }
  .section-heading h2 { max-width: 850px; }
  .section-heading > p { max-width: 380px; }
  .section-heading > .text-link { flex-shrink: 0; margin-bottom: 5px; }
  .grid { display: grid; gap: 24px; }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
  .stack { display: grid; gap: 24px; }
  .section-copy, .lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.75; max-width: 720px; }
  .page-hero { padding-block: clamp(50px, 7vw, 110px) clamp(45px, 5vw, 76px); position: relative; isolation: isolate; }
  .page-hero::before { content: ""; position: absolute; inset: -15% -10% -25% 25%; background: radial-gradient(ellipse, #7d39b51c, transparent 66%); z-index: -1; pointer-events: none; }
  .page-hero .lead { margin-top: 28px; }
  .page-title { max-width: 1080px; }
  .page-title em { display: inline-block; }
  .page-hero + .section { padding-top: 20px; border-top: 0; }
  .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--subtle); margin-bottom: 36px; }
  .breadcrumbs a:hover { color: var(--ink); }
  .breadcrumbs .icon { width: 12px; height: 12px; }
}

@layer components {
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 500; padding: 12px 20px; background: var(--lavender); color: #110c18; transform: translateY(-150%); }
  .skip-link:focus { transform: translateY(0); }
  .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--lavender); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.55; }
  .eyebrow .icon { width: 19px; height: 19px; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px #b573f877; display: inline-block; flex-shrink: 0; }
  .button { position: relative; isolation: isolate; display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 54px; padding: 15px 24px; border: 1px solid transparent; border-radius: 9px; font-size: 15px; font-weight: 550; line-height: 1.35; text-align: center; overflow: hidden; transition: transform .24s var(--ease), border-color .24s, box-shadow .24s; }
  .button .icon { width: 19px; height: 19px; }
  .button.primary { background: var(--gradient); color: #1a092c; box-shadow: 0 4px 22px #9d51d91f; }
  .button.primary::after { content: ""; z-index: -1; position: absolute; inset: 0; width: 180%; background: linear-gradient(105deg, transparent 35%, #f7e7ff7a 50%, transparent 65%); transform: translateX(-100%); }
  .button.secondary { color: var(--ink); background: #23172c50; border-color: var(--line-strong); }
  .button.small { min-height: 44px; padding: 10px 17px; font-size: 14px; }
  .text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--lavender); font-size: 15px; line-height: 1.4; }
  .text-link .icon { width: 19px; height: 19px; transition: transform .25s var(--ease); }
  .icon-button { width: 44px; height: 44px; display: inline-flex; justify-content: center; align-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #19121f90; transition: background .2s, border-color .2s, transform .2s; flex-shrink: 0; }
  .icon-button .icon { width: 20px; height: 20px; }
  .tag, .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--line-strong); color: var(--lavender); border-radius: 100px; line-height: 1.6; }
  .chip { text-transform: none; letter-spacing: 0; font-size: 13px; }
  .card { background: linear-gradient(145deg, #21162c70, #111016); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }

  /* Navigation stays usable while listening or scrolling long articles. */
  .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: #0c0910f5; border-bottom: 1px solid #b994d31a; }
  .header-inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .brand { display: inline-flex; flex-direction: column; width: fit-content; align-items: center; color: var(--ink); line-height: 1; flex-shrink: 0; }
  .brand > span:first-child, .brand > strong { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; letter-spacing: .22em; padding-left: .22em; }
  .brand > span:last-child, .brand > small { font-size: 9px; letter-spacing: .62em; padding-left: .62em; margin-top: 9px; color: var(--lavender); }
  .desktop-nav { display: flex; gap: clamp(15px, 1.8vw, 27px); align-items: center; }
  .desktop-nav a { color: var(--muted); font-size: 14px; white-space: nowrap; position: relative; padding-block: 17px; }
  .desktop-nav a::after { content: ""; position: absolute; bottom: 8px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--purple), #c9a5e0); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
  .desktop-nav a[aria-current="page"] { color: var(--ink); }
  .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .language-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 11px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
  .language-button .icon { width: 19px; height: 19px; }
  .menu-button { display: none; }
  .mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 99; padding: 26px var(--gutter) calc(var(--player-space) + 28px); background: #100c16fa; overflow-y: auto; }
  .mobile-menu nav { display: grid; gap: 8px; max-width: 640px; margin-inline: auto; }
  .mobile-menu nav a { display: flex; align-items: center; gap: 17px; padding: 17px 14px; min-height: 62px; border-bottom: 1px solid var(--line); font-size: 21px; letter-spacing: -.02em; }
  .mobile-menu nav a .icon { color: var(--lavender); width: 21px; height: 21px; }
  .mobile-menu nav a .icon:last-child { margin-left: auto; width: 17px; height: 17px; }
  .mobile-menu .social-grid { margin-top: 24px; }

  /* Hero: original photograph and transparent support share one coordinate space. */
  .hero { position: relative; isolation: isolate; min-height: min(790px, calc(100svh - var(--header-h))); padding-block: clamp(42px, 5vw, 90px) 48px; display: grid; align-items: center; background: #0d0b11; }
  .hero-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(36px, 4vw, 72px); align-items: center; position: relative; z-index: 1; }
  .hero-copy { padding-bottom: 20px; }
  .hero-copy .eyebrow { margin-bottom: clamp(25px, 3vw, 45px); font-size: 11px; letter-spacing: .22em; }
  .hero-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(82px, 9.8vw, 146px); letter-spacing: -.025em; line-height: .91; font-weight: 400; }
  .hero-title > span { display: block; }
  .hero-title > span + span { margin-top: 10px; color: var(--lavender); }
  .hero-title .icon { width: .23em; height: .23em; vertical-align: top; margin: .13em 0 0 .1em; color: var(--lavender); }
  .hero-copy > p:not(.eyebrow) { max-width: 390px; margin-top: 28px; font-size: 16px; }
  .hero-copy .actions { margin-top: 36px; gap: 20px; }
  .hero-copy .text-link { color: #d4c3df; }
  .hero-visual { position: relative; min-width: 0; align-self: center; display: flex; justify-content: center; }
  .hero-portrait { width: min(100%, 417px); aspect-ratio: 853 / 1356; position: relative; }
  .hero-portrait > img { width: 100%; height: auto; aspect-ratio: 853 / 1280; object-fit: contain; mask: url('/media/portrait-mask.png') center top / contain no-repeat; -webkit-mask: url('/media/portrait-mask.png') center top / contain no-repeat; position: relative; z-index: 1; }
  .hero-footing { position: absolute; inset: 0; background: url('/media/hero-footing.webp') center top / contain no-repeat; }
  .hero-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 80% 42%, #2f233d48, transparent 65%), linear-gradient(115deg, #0d0b11, #141018 60%, #0c0a11); }
  .hero-atmosphere::before { content: ""; position: absolute; inset: 0; background: url('/media/slate.jpg') center 58% / cover; opacity: .19; mask-image: radial-gradient(ellipse 76% 70% at 63% 47%, #000, transparent 86%); -webkit-mask-image: radial-gradient(ellipse 76% 70% at 63% 47%, #000, transparent 86%); }
  .hero-atmosphere::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(transparent, var(--bg)); }
  .orb { position: absolute; width: min(70vw, 1000px); height: min(48vw, 630px); left: 30%; top: 3%; background: radial-gradient(ellipse, #9657cd2e 0%, #6a387319 40%, transparent 69%); transform: translate3d(-6%, 0, 0); }
  .orb:nth-child(2) { left: -25%; top: 36%; width: 65%; height: 60%; opacity: .55; }
  .signal-lines { position: absolute; width: min(1300px, 110%); height: 24%; top: 58%; left: -12%; color: #aa7dc8; opacity: .12; pointer-events: none; }
  .signal-lines svg { width: 100%; height: 100%; overflow: visible; }
  .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--subtle); position: relative; z-index: 2; }
  .hero-bottom > a { display: flex; align-items: center; gap: 12px; }
  .hero-bottom .icon { width: 15px; height: 15px; }
  .motion-toggle { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; background: transparent; border: 0; color: var(--subtle); font-size: 11px; letter-spacing: .05em; }
  .frequency-strip { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding-block: 25px; border-block: 1px solid var(--line); color: var(--subtle); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
  .frequency-strip .icon { width: 17px; height: 17px; color: #a778c4; }
  .ambient-decoration { position: absolute; z-index: -1; pointer-events: none; width: clamp(150px, 25vw, 360px); height: auto; color: #c09cd0; opacity: .035; right: -4%; top: 10%; transform: rotate(-10deg); }
  .ambient-decoration .icon { width: 100%; height: auto; }
  .ambient-word { font-family: Georgia, serif; font-size: clamp(100px, 22vw, 320px); letter-spacing: -.05em; color: #cfaff4; opacity: .025; position: absolute; z-index: -1; inset: auto auto 0 -3%; line-height: 1; pointer-events: none; }

  /* Record and music cards. The disc never protrudes above the sleeve. */
  .release-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: clamp(50px, 8vw, 135px); }
  .release-layout h2 { font-size: clamp(55px, 6vw, 96px); line-height: 1; }
  .release-layout h2 em { display: block; }
  .release-layout .lead { margin-top: 28px; font-size: 18px; }
  .vinyl-stage { width: 100%; position: relative; aspect-ratio: 1.38; padding-right: 27.5%; isolation: isolate; display: flex; align-items: center; }
  .record-sleeve { width: 100%; aspect-ratio: 1; position: relative; z-index: 2; box-shadow: 8px 8px 30px #0008; border: 1px solid #d9b7e91a; }
  .record-sleeve img { width: 100%; height: 100%; object-fit: cover; }
  .vinyl { position: absolute; width: 68.5%; aspect-ratio: 1; top: 2.4%; left: 2%; border-radius: 50%; background: repeating-radial-gradient(circle at center, #17141c 0 2px, #27202e 2.8px, #100e13 4px); border: 1px solid #a58ba54a; z-index: 1; box-shadow: 5px 7px 18px #0008; transform: translateX(44%); }
  .vinyl::before { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle, #0b090f 0 6%, #b581c75c 7% 8%, #291b36 9% 54%, #794d9366 55% 57%, #25172e 58%); border: 1px solid #c6a4d326; }
  .vinyl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 30deg, transparent, #d4bed61c 12%, transparent 27%, transparent 53%, #d4bed618 66%, transparent 82%); }
  .release-platforms { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: var(--subtle); font-size: 13px; }
  .release-platforms a { min-height: 44px; display: inline-flex; gap: 7px; align-items: center; }
  .release-platforms .icon { width: 16px; height: 16px; }
  .track-card { position: relative; min-width: 0; }
  .track-cover { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); position: relative; background: #1c1425; }
  .track-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .track-cover::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #0c0718b8); pointer-events: none; }
  .track-cover .icon-button, .track-cover .play-button { position: absolute; z-index: 1; right: 17px; bottom: 17px; width: 47px; height: 47px; color: #170d22; background: var(--lavender); border: 0; }
  .duration { position: absolute; z-index: 1; bottom: 19px; left: 18px; font-size: 12px; color: #e2d7ec; }
  .track-meta { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding-block: 22px 10px; }
  .track-meta h3 { font-size: 23px; }
  .track-meta p { font-size: 13px; margin-top: 8px; }
  .track-meta .icon { width: 18px; height: 18px; color: var(--lavender); }
  .track-card > .text-link { font-size: 13px; }
  .track-list { display: grid; gap: 12px; }
  .track-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #151019; }
  .track-row > img { width: 58px; height: 58px; object-fit: cover; border-radius: 6px; }
  .track-row h3 { font-size: 18px; }
  .track-row p { font-size: 13px; margin-top: 5px; }

  /* People, platforms and invitations. */
  .about-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
  .about-portrait { position: relative; }
  .about-portrait img { width: 100%; object-fit: contain; }
  .about-portrait.dj { aspect-ratio: 1254 / 1136; overflow: hidden; }
  .about-portrait.dj img { aspect-ratio: 1; width: 100%; height: auto; }
  .about-copy > p:not(.eyebrow) { margin-top: 28px; font-size: 18px; line-height: 1.85; }
  .signature { display: block; margin-top: 32px; font: italic 42px Georgia, serif; letter-spacing: -.045em; color: var(--lavender); }
  .social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .social-card { display: flex; align-items: center; gap: 15px; min-height: 88px; padding: 20px; border: 1px solid var(--line); background: linear-gradient(125deg, #2115298f, #141017); border-radius: 12px; transition: border-color .3s, transform .3s var(--ease); }
  .social-card > .icon:first-child { width: 24px; height: 24px; color: var(--lavender); }
  .social-card > .icon:last-child:not(:first-child) { width: 16px; height: 16px; margin-left: auto; color: var(--subtle); }
  .social-card strong { display: block; font-size: 16px; font-weight: 500; }
  .social-card small { display: block; margin-top: 3px; color: var(--subtle); font-size: 12px; }
  .platforms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-card { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #28163365, #121015 70%); overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
  .service-art { height: 185px; position: relative; margin: -28px -28px 28px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 90%, #a359c326, transparent 66%), #121016; border-bottom: 1px solid #d4c2e013; }
  .service-art > .icon { width: 82px; height: 82px; stroke-width: .7; color: #d5b0ec; position: relative; z-index: 1; }
  .service-art::before, .service-art::after { content: ""; position: absolute; width: 175px; aspect-ratio: 1; border: 1px solid #bd93d425; border-radius: 50%; transform: rotateX(62deg); bottom: -38px; }
  .service-art::after { width: 255px; bottom: -62px; opacity: .6; }
  .service-art > img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
  .service-card .eyebrow { font-size: 10px; margin-bottom: 18px; }
  .service-card h3 { font-size: 27px; }
  .service-card p { font-size: 15px; margin-top: 20px; }
  .service-card .text-link { margin-top: auto; padding-top: 24px; }
  .service-card .button { margin-top: 26px; align-self: start; }
  .step { position: relative; padding: 30px; border-top: 1px solid var(--line-strong); background: linear-gradient(160deg, #21142a50, transparent 85%); }
  .step > span { display: block; color: var(--purple); font-size: 12px; margin-bottom: 40px; letter-spacing: .15em; }
  .step h3 { font-size: 25px; }
  .step p { margin-top: 18px; font-size: 15px; }
  .creator-panel { position: relative; overflow: hidden; border: 1px solid #c197da38; background: radial-gradient(ellipse at 85% 0%, #8537bd22, transparent 65%), #151019; border-radius: 20px; padding: clamp(28px, 5vw, 72px); }
  .creator-panel .ambient-decoration { opacity: .08; width: 240px; right: 4%; top: -50px; }
  .creator-panel > p { max-width: 680px; margin-top: 24px; font-size: 18px; }
  .credit-box { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px; background: #0d0a12; border: 1px solid var(--line); border-radius: 12px; margin-top: 30px; }
  .credit-box pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: 15px; color: #dfcbea; }
  .credit-box p { font-size: 13px; }
  .credit-box .button { flex-shrink: 0; }
  .creator-track-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 24px; }
  .creator-track-picker button { border: 1px solid var(--line); border-radius: 10px; color: var(--muted); padding: 15px; background: #15101d; }
  .creator-track-picker button[aria-pressed="true"] { color: var(--ink); border-color: var(--purple); background: #392045; }

  /* Journal: compact personal notes beside an editorial two-column feed. */
  .journal-layout { display: grid; grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .notes-column { display: grid; gap: 24px; position: sticky; top: calc(var(--header-h) + 30px); }
  .notes-column .eyebrow { margin: 0; font-size: 11px; }
  .note { position: relative; border-left: 1px solid #ae77cf6b; padding-left: 20px; }
  .note::before { content: ""; position: absolute; left: -3px; top: 7px; width: 5px; height: 5px; background: var(--lavender); border-radius: 50%; }
  .note p { font-size: 15px; line-height: 1.7; color: #c5b7cc; }
  .note small { color: var(--subtle); font-size: 11px; display: block; margin-top: 10px; }
  .article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 25px; }
  .article-card { min-width: 0; }
  .article-cover { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--line); background: #1a1221; margin-bottom: 22px; }
  .article-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .article-cover .tag { position: absolute; bottom: 17px; left: 17px; background: #0d0919d9; }
  .article-card .eyebrow { font-size: 10px; margin-bottom: 13px; }
  .article-card h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; }
  .article-card > p { font-size: 15px; margin-top: 16px; }
  .article-card .text-link { margin-top: 14px; font-size: 13px; }
  .article-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); gap: clamp(36px, 5vw, 88px); justify-content: center; align-items: start; }
  .article-nav { position: sticky; top: calc(var(--header-h) + 34px); font-size: 13px; display: grid; gap: 14px; padding-right: 15px; border-right: 1px solid var(--line); color: var(--subtle); }
  .article-nav strong { margin-bottom: 8px; color: var(--ink); font-weight: 500; }
  .article-nav a { padding: 4px 0; }
  .article-nav a:hover { color: var(--lavender); }
  .article-hero-image { width: 100%; max-height: 620px; aspect-ratio: 16/8; object-fit: cover; border-radius: 18px; margin-bottom: 60px; }
  .prose { max-width: 760px; font-size: 18px; line-height: 1.85; color: var(--muted); }
  .prose > * + * { margin-top: 24px; }
  .prose h2 { font-size: clamp(29px, 3vw, 41px); margin-top: 60px; scroll-margin-top: calc(var(--header-h) + 34px); }
  .prose h3 { font-size: 25px; margin-top: 38px; }
  .prose li + li { margin-top: 12px; }
  .prose ul, .prose ol { padding-left: 25px; }
  .prose blockquote { margin: 35px 0; padding: 8px 0 8px 26px; border-left: 2px solid #a563d6; font-size: 25px; color: #dac8e6; }
  .prose .notice { font-size: 15px; }

  /* Contact and readable legal pages. */
  .contact-layout { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
  .contact-intro { position: sticky; top: calc(var(--header-h) + 35px); }
  .contact-intro .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .contact-email { display: inline-flex; gap: 12px; align-items: center; font-size: clamp(19px, 2vw, 28px); letter-spacing: -.025em; color: var(--lavender); overflow-wrap: anywhere; margin-top: 25px; }
  .contact-email .icon { width: 21px; height: 21px; }
  .contact-form { padding: clamp(24px, 3vw, 44px); border: 1px solid #b994d334; border-radius: 18px; background: linear-gradient(140deg, #27162d6e, #131017); }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 18px; }
  .field { display: grid; gap: 9px; min-width: 0; font-size: 13px; color: #d5c4df; }
  .full { grid-column: 1 / -1; }
  .field input, .field select, .field textarea, .dialog input[type="search"] { width: 100%; min-width: 0; border: 1px solid #997aaf38; border-radius: 8px; padding: 13px 14px; min-height: 49px; background: #0e0b13b8; color: var(--ink); font-size: 16px; transition: border-color .2s; }
  .field textarea { resize: vertical; min-height: 148px; line-height: 1.6; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: #b584cf70; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: #c28fe7; outline: 2px solid #9d62c43b; outline-offset: 2px; }
  .field input::placeholder, .field textarea::placeholder { color: #84768c; font-size: 14px; }
  .field small { font-size: 12px; color: var(--subtle); }
  .check-field { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.65; margin-block: 25px; }
  .check-field input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: #ba7af0; flex-shrink: 0; }
  .check-field a { text-decoration: underline; }
  .form-status { margin-top: 18px; color: #d7b7ef; font-size: 14px; }
  .form-status:empty { display: none; }
  .form-status[data-error="true"] { color: #efb0c7; }
  .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .legal-card { border: 1px solid var(--line); border-radius: 14px; background: #15111b; padding: 30px; }
  .legal-card .icon { color: var(--lavender); width: 30px; height: 30px; margin-bottom: 26px; }
  .legal-card h3 { font-size: 25px; }
  .legal-card p { margin-top: 16px; font-size: 15px; }
  .notice { border-left: 2px solid #a56cce; background: #22132e54; padding: 20px 24px; border-radius: 0 10px 10px 0; color: var(--muted); font-size: 15px; }
  .notice strong { color: var(--ink); }
  .accordion { border-block-end: 1px solid var(--line); }
  .accordion summary { list-style: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 30px; cursor: pointer; font-size: 19px; }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary .icon { width: 19px; height: 19px; color: var(--lavender); transition: transform .2s; }
  .accordion[open] summary .icon { transform: rotate(180deg); }
  .accordion > p, .accordion > div { padding-bottom: 26px; max-width: 850px; font-size: 16px; }

  .merch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px 28px; }
  .merch-card { min-width: 0; }
  .image-zoom { display: block; padding: 0; width: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #17101d; position: relative; }
  .image-zoom img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--ease); }
  .image-zoom .icon-button, .image-zoom > .icon { position: absolute; bottom: 18px; right: 18px; }
  .image-zoom > .icon { background: #100a17b8; padding: 10px; box-sizing: content-box; border-radius: 50%; border: 1px solid #d4b7e657; }
  .merch-card figcaption { display: flex; justify-content: space-between; gap: 25px; align-items: end; padding-top: 23px; }
  .merch-card h3 { font-size: 29px; letter-spacing: .025em; }
  .merch-card .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .merch-card figcaption p { font-size: 13px; text-align: right; max-width: 240px; }
  .community-panel { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 10%, #70319c3b, transparent 65%), #151019; border: 1px solid var(--line); border-radius: 22px; padding: clamp(35px, 6vw, 85px); text-align: center; }
  .community-panel h2 { max-width: 850px; margin-inline: auto; }
  .community-panel .eyebrow, .community-panel .actions { justify-content: center; }
  .community-panel p:not(.eyebrow) { max-width: 650px; margin: 25px auto 0; }

  .site-footer { position: relative; padding-block: 70px 28px; border-top: 1px solid var(--line); background: #0e0b12; }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
  .footer-grid h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #d0b8dd; margin-bottom: 23px; }
  .footer-grid nav { display: grid; gap: 9px; }
  .footer-grid nav a { width: fit-content; color: var(--subtle); font-size: 13px; min-height: 28px; }
  .footer-grid > div > p { max-width: 215px; font-size: 13px; margin-top: 23px; }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line); margin-top: 55px; padding-top: 25px; color: var(--subtle); font-size: 11px; }
  .footer-bottom a { color: #bba4c8; }
  .footer-socials { display: flex; gap: 9px; margin-top: 22px; }
  .footer-socials .icon-button { width: 39px; height: 39px; }

  .dialog { width: min(620px, calc(100% - 30px)); border: 1px solid #ac7dce66; border-radius: 18px; background: #15101c; color: var(--ink); padding: clamp(24px, 4vw, 40px); max-height: calc(100svh - 40px); overflow-y: auto; box-shadow: 0 25px 80px #0008; }
  .dialog::backdrop { background: #06040bd9; }
  .dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
  .dialog h2 { font-size: 30px; }
  .dialog > p { font-size: 15px; margin-block: 17px; }
  .language-options { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .language-option { display: flex; gap: 15px; align-items: center; width: 100%; padding: 17px 19px; background: #291b34; border: 1px solid #b783d579; border-radius: 10px; color: var(--ink); }
  .language-option .icon:last-child { margin-left: auto; width: 19px; height: 19px; }
  .language-option small { color: var(--subtle); margin-left: auto; }
  .language-flag { width: 24px; height: 17px; border-radius: 3px; background: linear-gradient(#fff 0 33.333%, #4063b2 33.333% 66.666%, #b34c5d 66.666%); border: 1px solid #ffffff25; }
  .image-dialog { width: min(1400px, calc(100% - 24px)); padding: 15px; }
  .image-dialog .dialog-heading { padding: 8px 10px; margin-bottom: 10px; }
  .image-dialog img { max-height: 78svh; width: 100%; object-fit: contain; border-radius: 9px; }
  .cookie-bar { position: fixed; z-index: 180; bottom: calc(var(--player-space) + 18px + env(safe-area-inset-bottom, 0px)); left: 22px; width: min(480px, calc(100% - 44px)); border: 1px solid #a67dc95c; border-radius: 15px; padding: 23px; background: #1b1223f5; box-shadow: var(--shadow); }
  .cookie-bar h3 { font-size: 20px; }
  .cookie-bar p { font-size: 13px; margin-top: 12px; }
  .cookie-bar .actions { margin-top: 18px; gap: 10px; }
  .cookie-bar .button { min-height: 44px; padding: 11px 14px; font-size: 13px; }
}

@layer motion {
  /* Only transform and opacity animate continuously; no particle canvas or moving blur. */
  @keyframes aurora-drift { from { transform: translate3d(-9%, 1%, 0) scale(.95); opacity: .55; } to { transform: translate3d(12%, -5%, 0) scale(1.12); opacity: 1; } }
  @keyframes signal-drift { from { transform: translate3d(-3%, 3%, 0); opacity: .07; } to { transform: translate3d(8%, -2%, 0); opacity: .16; } }
  @keyframes record-slide { 0%, 12%, 100% { transform: translateX(5%); } 42%, 65% { transform: translateX(43%); } }
  @keyframes button-light { 0%, 58% { transform: translateX(-100%); opacity: 0; } 63% { opacity: .8; } 80%, 100% { transform: translateX(70%); opacity: 0; } }
  @keyframes pulse-halo { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: .8; transform: scale(1.3); } }
  .orb { animation: aurora-drift 14s ease-in-out infinite alternate; }
  .orb:nth-child(2) { animation-duration: 19s; animation-direction: alternate-reverse; }
  .signal-lines { animation: signal-drift 17s ease-in-out infinite alternate; }
  .vinyl { animation: record-slide 8s var(--ease) infinite; }
  .hero .button.primary::after { animation: button-light 11s ease-in-out infinite; }
  .pulse-mark { position: relative; width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--lavender); }
  .pulse-mark::before { content: ""; position: absolute; inset: -7px; border: 1px solid #a45edf64; border-radius: inherit; animation: pulse-halo 4s ease-in-out infinite; }
  .motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .motion-ready .reveal.is-visible { opacity: 1; transform: none; }
  .motion-ready .grid > .reveal:nth-child(2), .motion-ready .article-grid > .reveal:nth-child(2) { transition-delay: 70ms; }
  .motion-ready .grid > .reveal:nth-child(3) { transition-delay: 140ms; }
  html[data-motion-paused] *, html[data-motion-paused] *::before, html[data-motion-paused] *::after, html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
  html[data-motion-paused] .reveal, html.motion-paused .reveal { opacity: 1; transform: none; transition: none; }
  @media (hover: hover) {
    .button:hover { transform: translateY(-2px); box-shadow: 0 9px 30px #7e3db72b; }
    .button.secondary:hover { border-color: #b887da; }
    .button.primary:hover::after { animation: button-light 1.4s ease-out 1; }
    .text-link:hover .icon { transform: translate(3px, -2px); }
    .desktop-nav a:hover { color: var(--ink); }
    .desktop-nav a:hover::after { transform: scaleX(1); }
    .icon-button:hover { background: #392344; border-color: #ac79cf; }
    .social-card:hover, .service-card:hover { transform: translateY(-4px); border-color: #b883d171; }
    .track-card:hover .track-cover img, .article-card:hover .article-cover img, .image-zoom:hover img { transform: scale(1.035); }
    .footer-grid nav a:hover { color: var(--lavender); }
  }
  @media (prefers-reduced-motion: reduce) {
    html:not([data-motion-explicit]) { scroll-behavior: auto; }
    html:not([data-motion-explicit]) *, html:not([data-motion-explicit]) *::before, html:not([data-motion-explicit]) *::after { animation: none !important; transition: none !important; }
    html.motion-ready:not([data-motion-explicit]) .reveal { opacity: 1; transform: none; }
    html:not([data-motion-explicit]) .vinyl { transform: translateX(35%); }
    html:not([data-motion-explicit]) .orb { opacity: .55; }
  }
}

@layer responsive {
  @media (min-width: 1900px) {
    :root { --header-h: 100px; }
    .container { width: min(100% - var(--gutter) * 2, 1600px); }
    .hero { min-height: 840px; }
    .hero-title { font-size: 165px; }
    .hero-portrait { width: 460px; }
    .desktop-nav a { font-size: 16px; }
  }
  @media (min-width: 2500px) {
    :root { --header-h: 112px; }
    .container { width: min(100% - var(--gutter) * 2, 1840px); }
    body { font-size: 19px; }
    .hero { min-height: 1000px; }
    .hero-title { font-size: 195px; }
    .hero-portrait { width: 545px; }
    .hero-copy .eyebrow { font-size: 15px; }
    .hero-copy > p:not(.eyebrow) { font-size: 20px; max-width: 490px; }
    .button { font-size: 18px; min-height: 62px; }
    .section-copy, .lead { font-size: 25px; }
  }
  @media (max-width: 1200px) {
    :root { --gutter: 40px; }
    .header-inner { gap: 20px; }
    .desktop-nav { gap: 17px; }
    .desktop-nav a { font-size: 12px; }
    .header-actions .button { display: none; }
    .hero-title { font-size: 10vw; }
    .hero-copy .actions { gap: 12px; }
    .hero-copy .actions .button { font-size: 13px; padding-inline: 17px; }
    .hero-copy .text-link { font-size: 13px; }
    .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platforms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-card { padding: 23px; }
    .service-art { margin: -23px -23px 25px; }
    .contact-intro .social-grid { grid-template-columns: 1fr; }
    .journal-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 35px; }
  }
  @media (max-width: 980px) {
    :root { --header-h: 76px; --gutter: 30px; }
    .desktop-nav { display: none; }
    .menu-button { display: inline-flex; }
    .hero { min-height: 620px; padding-top: 42px; }
    .hero-grid { gap: 26px; grid-template-columns: 1.08fr .92fr; }
    .hero-copy .eyebrow { letter-spacing: .15em; font-size: 9px; }
    .hero-title { font-size: 10.5vw; }
    .hero-copy .actions { align-items: start; flex-direction: column; gap: 8px; }
    .hero-portrait { width: min(100%, 340px); }
    .section-heading { align-items: start; }
    .section-heading > p { max-width: 270px; font-size: 15px; }
    .release-layout { gap: 48px; }
    .release-layout h2 { font-size: 7vw; }
    .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.three { gap: 18px; }
    .track-meta h3 { font-size: 19px; }
    .service-card h3 { font-size: 23px; }
    .service-art { height: 150px; }
    .service-art > .icon { width: 68px; height: 68px; }
    .service-card p { font-size: 14px; }
    .about-layout { gap: 40px; }
    .about-copy > p:not(.eyebrow) { font-size: 16px; }
    .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
    .footer-grid > :last-child { grid-column: 2/4; }
    .article-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 35px; }
    .contact-layout { gap: 35px; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); }
    .contact-email { font-size: 18px; }
    .contact-form { padding: 24px; }
    .form-grid { gap: 18px 13px; }
  }
  @media (max-width: 740px) {
    :root { --gutter: 23px; --section-space: 76px; }
    .hero { min-height: 0; padding-block: 42px 20px; }
    .hero-grid { grid-template-columns: 1fr; gap: 22px; }
    .hero-copy { text-align: center; padding-bottom: 0; }
    .hero-copy .eyebrow { justify-content: center; margin-bottom: 26px; letter-spacing: .17em; font-size: 10px; }
    .hero-title { font-size: clamp(76px, 16vw, 116px); line-height: .9; }
    .hero-title > span + span { margin-top: 9px; }
    .hero-copy > p:not(.eyebrow) { margin-inline: auto; font-size: 15px; margin-top: 23px; max-width: 320px; }
    .hero-copy .actions { flex-direction: row; align-items: center; justify-content: center; margin-top: 25px; gap: 12px; }
    .hero-copy .actions .button { font-size: 13px; min-height: 50px; padding-inline: 18px; }
    .hero-copy .actions .text-link { font-size: 13px; }
    .hero-visual { width: 100%; }
    .hero-portrait { width: min(100%, 283px); }
    .hero-atmosphere::before { background-size: auto 100%; background-position: 62% center; opacity: .16; }
    .orb { top: 37%; left: -28%; width: 150%; height: 55%; }
    .orb:nth-child(2) { top: 5%; left: 25%; }
    .signal-lines { top: 62%; width: 170%; height: 20%; }
    .hero-bottom { margin-top: 13px; font-size: 9px; letter-spacing: .1em; }
    .hero-bottom .motion-toggle span { max-width: 95px; line-height: 1.5; text-align: left; }
    .frequency-strip { justify-content: center; flex-wrap: wrap; gap: 13px 19px; padding-block: 20px; font-size: 8px; letter-spacing: .12em; }
    .frequency-strip .icon { width: 11px; height: 11px; }
    .section-heading { flex-direction: column; gap: 20px; margin-bottom: 32px; }
    .section-heading > p { max-width: 600px; }
    .section-heading > .text-link { margin-top: -7px; }
    .eyebrow { font-size: 10px; margin-bottom: 18px; }
    .grid.three, .grid.two { grid-template-columns: 1fr; gap: 28px; }
    .grid.three.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .release-layout { grid-template-columns: 1fr; gap: 40px; }
    .vinyl-stage { width: min(100%, 480px); margin-inline: auto; }
    .release-layout h2 { font-size: clamp(56px, 11vw, 78px); }
    .release-layout .lead { margin-top: 20px; font-size: 17px; }
    .release-platforms { margin-top: 22px; }
    .track-cover { aspect-ratio: 16/9; }
    .track-meta { padding-top: 20px; }
    .track-meta h3 { font-size: 24px; }
    .track-card { margin-bottom: 7px; }
    .about-layout { grid-template-columns: 1fr; gap: 34px; }
    .about-portrait { max-width: 500px; width: 100%; margin-inline: auto; }
    .about-copy > p:not(.eyebrow) { font-size: 17px; }
    .service-art { height: 200px; }
    .service-art > .icon { width: 85px; height: 85px; }
    .service-card { padding: 28px; }
    .service-art { margin: -28px -28px 27px; }
    .service-card h3 { font-size: 28px; }
    .service-card p { font-size: 16px; }
    .service-card .text-link { padding-top: 25px; }
    .step > span { margin-bottom: 25px; }
    .creator-panel { border-radius: 16px; }
    .creator-panel > p { font-size: 16px; }
    .credit-box { flex-direction: column; align-items: start; gap: 20px; padding: 22px; }
    .creator-track-picker { grid-template-columns: 1fr; }
    .journal-layout { grid-template-columns: 1fr; gap: 35px; }
    .notes-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
    .notes-column > .eyebrow { grid-column: 1 / -1; }
    .note p { font-size: 14px; }
    .article-grid { gap: 35px 20px; }
    .article-card h3 { font-size: 23px; }
    .article-card > p { font-size: 14px; }
    .article-cover .tag { bottom: 10px; left: 10px; font-size: 8px; }
    .article-layout { grid-template-columns: 1fr; gap: 35px; }
    .article-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; padding: 22px; font-size: 12px; }
    .article-nav strong { grid-column: 1 / -1; margin: 0; }
    .article-hero-image { margin-bottom: 36px; border-radius: 12px; aspect-ratio: 16/10; }
    .prose { font-size: 17px; }
    .prose h2 { margin-top: 44px; }
    .prose blockquote { font-size: 23px; padding-left: 19px; }
    .contact-layout { grid-template-columns: 1fr; gap: 35px; }
    .contact-intro { position: static; }
    .contact-intro .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-email { font-size: clamp(19px, 4.5vw, 26px); }
    .legal-grid { grid-template-columns: 1fr; }
    .merch-grid { grid-template-columns: 1fr; gap: 40px; }
    .merch-card figcaption p { max-width: 180px; font-size: 12px; }
    .social-card { min-height: 78px; padding: 16px; gap: 11px; }
    .social-card strong { font-size: 14px; }
    .social-card small { font-size: 11px; }
    .platforms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 25px; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
    .footer-grid > :last-child { grid-column: auto; }
    .footer-grid > div > p { max-width: 260px; }
    .footer-bottom { align-items: start; flex-direction: column; gap: 14px; margin-top: 35px; }
    .cookie-bar { bottom: calc(var(--player-space) + 10px + env(safe-area-inset-bottom, 0px)); left: 12px; width: calc(100% - 24px); padding: 20px; }
  }
  @media (max-width: 420px) {
    :root { --gutter: 19px; --header-h: 70px; }
    .header-inner { gap: 15px; }
    .brand > span:first-child, .brand > strong { font-size: 23px; }
    .header-actions { gap: 3px; }
    .language-button { padding: 8px; }
    .hero { padding-top: 34px; }
    .hero-copy .eyebrow { font-size: 8px; gap: 8px; }
    .hero-copy .eyebrow .icon { width: 15px; height: 15px; }
    .hero-title { font-size: 20vw; }
    .hero-copy .actions { flex-direction: column; gap: 5px; }
    .hero-portrait { width: 262px; }
    .social-card { padding: 15px 13px; gap: 10px; }
    .social-card > .icon:first-child { width: 20px; height: 20px; }
    .social-card > .icon:last-child:not(:first-child) { display: none; }
    .article-grid { grid-template-columns: 1fr; }
    .article-card h3 { font-size: 27px; }
    .notes-column { grid-template-columns: 1fr; }
    .grid.four { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 22px 19px; }
    .button { width: 100%; }
    .actions .text-link { justify-content: center; }
    .hero .button { width: auto; }
    .cookie-bar .button { width: auto; flex: 1; }
    .footer-grid { gap: 35px 20px; }
    .merch-card figcaption { align-items: start; }
    .merch-card figcaption p { max-width: 135px; font-size: 11px; }
  }
  @media (max-height: 540px) and (min-width: 741px) {
    .hero { min-height: 520px; padding-block: 35px; }
    .hero-portrait { max-width: 265px; }
    .hero-title { font-size: clamp(75px, 8vw, 105px); }
    .hero-copy .eyebrow { margin-bottom: 25px; }
    .hero-copy > p:not(.eyebrow) { margin-top: 20px; }
    .hero-copy .actions { margin-top: 25px; }
  }
  @media print {
    body { padding: 0; color: #111; background: #fff; }
    .site-header, .site-footer, .hero-atmosphere, .ambient-decoration, .ambient-word, .cookie-bar, #player-root, .actions, .motion-toggle { display: none !important; }
    p, h1, h2, h3, .prose { color: #111; }
    .container { width: 100%; }
    .section, .page-hero { padding: 30px 0; }
    .article-layout { display: block; }
    .article-nav { display: none; }
    .reveal { opacity: 1 !important; transform: none !important; }
  }
}