@layer reset, base, layout, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  button, input, textarea, select { font: inherit; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
}

@layer base {
  :root {
    --ink: #090909;
    --ink-soft: #161616;
    --paper: #f3f1e9;
    --orange: #f2a31b;
    --orange-hot: #ffb126;
    --gray: #b6b2aa;
    --line: rgba(243, 241, 233, 0.32);
    --display: "Anton", Impact, "Arial Narrow", sans-serif;
    --script: "Caveat", "Segoe Print", cursive;
    --body: "DM Sans", system-ui, sans-serif;
    --header-h: 74px;
    --page-pad: clamp(20px, 4vw, 66px);
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
  }

  body.menu-open { overflow: hidden; }
  ::selection { color: var(--ink); background: var(--orange); }
  :focus-visible { outline: 3px solid var(--orange-hot); outline-offset: 5px; }

  .skip-link {
    position: fixed;
    z-index: 999;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: var(--ink);
    background: var(--paper);
    transform: translateY(-150%);
  }

  .skip-link:focus { transform: translateY(0); }

  .display-title {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.83;
    text-transform: uppercase;
  }

  .script-title {
    position: relative;
    z-index: 3;
    color: var(--orange);
    font-family: var(--script);
    font-weight: 700;
    line-height: 0.75;
    transform: rotate(-4deg);
  }

  .eyebrow {
    color: var(--orange);
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
}

@layer layout {
  .poster-section {
    position: relative;
    min-height: clamp(760px, 100svh, 1100px);
    overflow: hidden;
    isolation: isolate;
    padding: calc(var(--header-h) + 40px) var(--page-pad) clamp(64px, 8vw, 120px);
    border-bottom: 0;
    background: var(--ink);
  }

  .paper-layer {
    position: absolute;
    z-index: -4;
    inset: 0;
    background:
      linear-gradient(105deg, rgba(0,0,0,.12), rgba(0,0,0,.5)),
      url("../images/black-crumpled-paper.webp") center / cover;
  }

  .paper-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: repeating-linear-gradient(90deg, transparent 0 99px, rgba(255,255,255,.035) 100px);
    pointer-events: none;
  }

  .solid-layer {
    position: absolute;
    z-index: -4;
    inset: 0;
  }

  .music-layer { background: #11100f; }
  .platform-layer { background: var(--orange); }
  .contact-layer { background: #080808; }

  .poster-meta {
    position: absolute;
    z-index: 6;
    top: calc(var(--header-h) + 18px);
    left: var(--page-pad);
    right: var(--page-pad);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: var(--gray);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .scribble {
    position: absolute;
    z-index: -1;
    width: clamp(440px, 66vw, 1050px);
    pointer-events: none;
    user-select: none;
  }
}

@layer components {
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--header-h);
    padding: 0 var(--page-pad);
    border-bottom: 1px solid transparent;
    transition: background-color .35s ease, border-color .35s ease, min-height .35s ease;
  }

  .site-header.is-scrolled {
    min-height: 62px;
    border-color: rgba(243,241,233,.18);
    background: rgba(9,9,9,.87);
    backdrop-filter: blur(14px);
  }

  .brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .brand-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid var(--orange);
    color: var(--orange);
    font-family: var(--display);
    font-size: 1rem;
    transform: rotate(-6deg);
  }

  .site-nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 44px); }

  .site-nav a {
    position: relative;
    color: #d8d5cf;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    background: var(--orange);
    transition: right .25s ease;
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current="true"]::after { right: 0; }

  .header-cta {
    justify-self: end;
    padding: 7px 18px 6px;
    border: 1px solid var(--paper);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .header-cta:hover { color: var(--ink); background: var(--paper); transform: rotate(-2deg); }
  .menu-toggle { display: none; }

  /* Hero */
  .hero {
    --video-y: 0px;
    --video-scale: 1.06;
    --title-y: 0px;
    --title-scale: 1;
    --title-opacity: 1;
    --shade-opacity: .58;
    display: grid;
    align-items: center;
    min-height: clamp(760px, 100svh, 1080px);
    background: #000;
  }

  .hero-video-bg {
    position: absolute;
    z-index: -3;
    inset: -8%;
    overflow: hidden;
    transform: translate3d(0, var(--video-y), 0) scale(var(--video-scale));
    transform-origin: center center;
    will-change: transform;
  }

  .hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(.78) contrast(1.08);
  }

  .hero-video-shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: rgba(0, 0, 0, var(--shade-opacity));
    box-shadow: inset 0 -220px 180px -120px rgba(0,0,0,.72);
    pointer-events: none;
    will-change: background-color;
  }

  .hero-doodles {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 50%;
    width: min(64vw, 980px);
    opacity: .42;
    pointer-events: none;
    transform: translateX(-50%) rotate(2deg);
  }

  .hero-floaters {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-floater {
    position: absolute;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 5px 5px 0;
    background: var(--paper);
    box-shadow: 0 22px 44px rgba(0,0,0,.52);
  }

  .hero-floater img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
  .hero-floater figcaption { padding: 5px 2px 4px; color: var(--ink); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .hero-floater-one { bottom: 8%; left: 3.5%; width: clamp(110px, 11vw, 185px); height: clamp(145px, 14vw, 225px); transform: rotate(-7deg); }
  .hero-floater-two { top: 17%; right: 3.4%; width: clamp(105px, 10vw, 170px); height: clamp(140px, 13vw, 210px); transform: rotate(6deg); }
  .hero-floater-three { right: 10%; bottom: 7%; width: clamp(150px, 16vw, 270px); height: clamp(100px, 10.5vw, 170px); transform: rotate(-3deg); }

  .hero-social-rail {
    position: absolute;
    z-index: 7;
    bottom: 33%;
    left: var(--page-pad);
    display: grid;
    gap: 8px;
  }

  .hero-social-rail a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(243,241,233,.48);
    background: rgba(9,9,9,.28);
    backdrop-filter: blur(8px);
    transition: border-color .22s ease, background .22s ease, transform .22s ease;
  }

  .hero-social-rail img { width: 17px; height: 17px; }
  .hero-social-rail a:hover { border-color: var(--orange); background: var(--orange); transform: translateX(6px) rotate(-3deg); }
  .hero-social-rail a:hover img { filter: brightness(0); }

  .hero-meta { top: calc(var(--header-h) + 28px); }

  .hero-copy {
    position: relative;
    z-index: 3;
    width: min(100%, 1260px);
    margin: 4vh auto 0;
    text-align: center;
  }

  .hero-copy .eyebrow { margin-bottom: 20px; color: var(--paper); font-size: .72rem; }

  .hero .display-title {
    font-size: clamp(6.5rem, 18.5vw, 19rem);
    letter-spacing: -.025em;
    text-shadow: 0 8px 0 rgba(0,0,0,.25);
    white-space: nowrap;
    opacity: var(--title-opacity);
    transform: translate3d(0, var(--title-y), 0) scale(var(--title-scale));
    transform-origin: center;
    will-change: transform, opacity;
  }

  .hero-intro {
    width: min(480px, 90%);
    margin: clamp(30px, 4vw, 54px) auto 0;
    color: #eeeae2;
    font-size: clamp(.9rem, 1.1vw, 1.08rem);
    line-height: 1.65;
    text-shadow: 0 2px 16px rgba(0,0,0,.85);
  }

  .hero-scroll {
    position: absolute;
    z-index: 6;
    right: var(--page-pad);
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  .scroll-line { display: block; width: 1px; height: 54px; background: linear-gradient(var(--orange), transparent); }

  /* Kinetic strip */
  .kinetic-strip {
    overflow: hidden;
    padding: 10px 0 7px;
    border-bottom: 0;
    color: var(--ink);
    background: var(--orange);
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: 1;
    white-space: nowrap;
  }

  .kinetic-track { display: flex; width: max-content; align-items: center; gap: 30px; }
  .kinetic-track i { font-family: var(--body); font-size: .5em; font-style: normal; }

  /* About */
  .about {
    display: grid;
    grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: clamp(30px, 7vw, 120px);
    min-height: 920px;
    padding-bottom: 150px;
  }

  .about-copy { position: relative; z-index: 3; align-self: center; }
  .about-copy .display-title { margin: 24px 0 36px; font-size: clamp(4.6rem, 8.8vw, 9.7rem); }
  .about-script { position: absolute; top: clamp(120px, 12vw, 190px); left: clamp(100px, 12vw, 220px); font-size: clamp(4rem, 7vw, 7.5rem); }
  .about-copy > p:not(.eyebrow):not(.script-title) { max-width: 550px; color: #c7c3bc; }
  .about-copy .about-lead { margin-bottom: 20px; color: var(--paper) !important; font-size: clamp(1.12rem, 1.65vw, 1.55rem); line-height: 1.35; }

  .drawn-link {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    margin-top: 34px;
    padding: 11px 0 8px;
    border-bottom: 2px solid var(--orange);
    color: var(--paper);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .drawn-link span:last-child { color: var(--orange); font-size: 1.35rem; transition: transform .25s ease; }
  .drawn-link:hover span:last-child { transform: translate(5px, 5px); }

  .about-portrait {
    position: relative;
    z-index: 2;
    align-self: end;
    height: min(76vw, 780px);
    min-height: 600px;
  }

  .about-portrait > img {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -1px;
    width: min(94%, 620px);
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    transform-origin: center bottom;
    translate: var(--tilt-x, 0) var(--tilt-y, 0);
    rotate: var(--tilt-r, 0deg);
    transition: translate .22s ease-out, rotate .22s ease-out;
  }

  .portrait-halo {
    position: absolute;
    z-index: 0;
    top: 11%;
    left: 50%;
    width: min(84%, 520px);
    aspect-ratio: 1;
    border: 4px solid var(--orange);
    border-radius: 50%;
    transform: translateX(-50%) rotate(-7deg);
  }

  .portrait-note {
    position: absolute;
    z-index: 4;
    padding: 4px 12px 2px;
    color: var(--ink);
    background: var(--orange);
    font-family: var(--script);
    font-size: 1.6rem;
    font-weight: 700;
    transform: rotate(-8deg);
  }

  .note-one { top: 22%; left: 1%; }
  .note-two { right: 2%; bottom: 24%; transform: rotate(7deg); }
  .scribble-about { top: 13%; right: -28%; opacity: .74; transform: rotate(88deg); }

  .about-disciplines {
    position: absolute;
    z-index: 5;
    right: var(--page-pad);
    bottom: 34px;
    left: var(--page-pad);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .about-disciplines span { padding: 16px 10px; border-right: 1px solid var(--line); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
  .about-disciplines span:last-child { border-right: 0; }

  /* Music */
  .music { min-height: 1060px; }
  .music-doodle { position: absolute; z-index: 0; top: 7%; right: -8%; width: min(54vw, 760px); opacity: .14; pointer-events: none; transform: rotate(11deg); }
  .music-heading { position: relative; width: max-content; max-width: 100%; margin: 50px auto 74px; text-align: center; }
  .music-heading .display-title { font-size: clamp(5rem, 10.5vw, 11.5rem); }
  .music-script { position: absolute; right: -3%; bottom: -8%; font-size: clamp(3rem, 5.8vw, 6.6rem); white-space: nowrap; }

  .music-collage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: clamp(26px, 5vw, 80px);
    align-items: center;
    width: min(1400px, 100%);
    margin: 0 auto;
  }

  .video-stage { position: relative; transform: rotate(-1.5deg); }
  .video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 8px solid var(--paper); background: #000; box-shadow: 18px 18px 0 var(--orange); }
  .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  .tape {
    position: absolute;
    z-index: 4;
    top: -17px;
    left: 50%;
    width: 110px;
    height: 34px;
    background: rgba(243,241,233,.72);
    transform: translateX(-50%) rotate(3deg);
    backdrop-filter: blur(3px);
  }

  .video-caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding-left: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  .video-caption a { color: var(--orange); }

  .genre-stack { position: relative; min-height: 500px; }
  .genre-card {
    position: absolute;
    width: min(100%, 360px);
    min-height: 210px;
    padding: 24px;
    border: 5px solid var(--paper);
    color: var(--paper);
    background: var(--ink-soft) url("../images/black-crumpled-paper.webp") center / 640px;
    box-shadow: 12px 12px 0 rgba(0,0,0,.48);
    transform-origin: center;
    translate: var(--tilt-x, 0) var(--tilt-y, 0);
    rotate: var(--tilt-r, 0deg);
    transition: z-index 0s, transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease;
  }

  .genre-card > span { color: var(--orange); font-size: .7rem; font-weight: 700; }
  .genre-card h3 { margin: 12px 0 15px; font-family: var(--display); font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 400; letter-spacing: -.02em; line-height: .9; }
  .genre-card p { max-width: 250px; color: #c6c1b9; font-size: .85rem; line-height: 1.45; }
  .genre-card:hover { z-index: 10; background-color: #202020; transform: rotate(0deg) translateY(-12px) scale(1.03); }
  .genre-one { z-index: 3; top: 0; left: 0; transform: rotate(4deg); }
  .genre-two { z-index: 2; top: 128px; right: 0; transform: rotate(-5deg); }
  .genre-three { z-index: 1; right: 4%; bottom: 0; transform: rotate(2deg); }

  /* Scroll portal into the visual work */
  .art-portal {
    --portal-mask-scale: 1;
    --portal-mask-opacity: 1;
    --portal-media-scale: 1.04;
    --portal-media-y: 18px;
    --portal-content-opacity: 0;
    --portal-content-y: 70px;
    --portal-hint-opacity: 1;
    position: relative;
    z-index: 3;
    height: 430vh;
    min-height: 2400px;
    background: var(--paper);
  }

  .art-portal-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
  }

  .art-portal-mosaic {
    position: absolute;
    z-index: 0;
    inset: -3%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: clamp(4px, .5vw, 9px);
    background: #16130f;
    transform: translate3d(0, var(--portal-media-y), 0) scale(var(--portal-media-scale));
    transform-origin: center;
    will-change: transform;
  }

  .portal-tile { position: relative; overflow: hidden; background: #231f19; }
  .portal-tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); }
  .portal-tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .portal-tile-2 { grid-column: 3 / 5; grid-row: 1; }
  .portal-tile-3 { grid-column: 3; grid-row: 2 / 4; }
  .portal-tile-4 { grid-column: 4; grid-row: 2 / 4; }
  .portal-tile-5 { grid-column: 1; grid-row: 3; }
  .portal-tile-6 { grid-column: 2; grid-row: 3; }

  .art-portal-shade {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 46%, transparent 24%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.48) 100%),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.05) 55%, rgba(0,0,0,.34));
    pointer-events: none;
  }

  .art-portal-mask {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--portal-mask-opacity);
    will-change: opacity;
    pointer-events: none;
  }

  .art-portal-mask svg { width: 100%; height: 100%; overflow: visible; }
  .art-portal-glyphs {
    transform: scale(var(--portal-mask-scale));
    transform-box: view-box;
    transform-origin: center;
    will-change: transform;
  }
  .portal-mask-mobile { display: none; }

  .art-portal-topline {
    position: absolute;
    z-index: 6;
    top: clamp(88px, 10vh, 120px);
    right: var(--page-pad);
    left: var(--page-pad);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .art-portal-scroll {
    position: absolute;
    z-index: 6;
    bottom: 7%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #fff;
    opacity: var(--portal-hint-opacity);
    transform: translateX(-50%);
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .art-portal-scroll span { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .art-portal-scroll i { width: 1px; height: 38px; background: currentColor; transform-origin: top; animation: portal-scroll-line 1.6s ease-in-out infinite; }

  .art-portal-notes {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: var(--portal-content-opacity);
    transform: translate3d(0, var(--portal-content-y), 0);
    will-change: transform, opacity;
    pointer-events: none;
  }

  .portal-note {
    position: absolute;
    width: clamp(190px, 17vw, 270px);
    min-height: clamp(170px, 14vw, 230px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 14px 18px 34px rgba(0,0,0,.32);
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    font-weight: 600;
    line-height: 1.12;
  }

  .portal-note span { color: #9a6300; font-size: .65rem; font-weight: 700; letter-spacing: .15em; }
  .portal-note-1 { top: 21%; left: 7%; transform: rotate(-4deg); }
  .portal-note-2 { right: 9%; bottom: 12%; transform: rotate(3deg); }
  .portal-note-3 { top: 16%; right: 28%; transform: rotate(-2deg); }

  /* Gallery */
  .visual-arts { padding-bottom: 92px; }
  .gallery-heading { position: relative; z-index: 2; width: min(100%, 800px); margin: 54px 0 80px; }
  .gallery-heading .display-title { margin: 20px 0 30px; font-size: clamp(5rem, 10vw, 11rem); }
  .gallery-heading > p:last-child { width: min(540px, 100%); color: #c7c3bc; }
  .gallery-script { position: absolute; top: clamp(140px, 14vw, 230px); left: clamp(180px, 24vw, 390px); font-size: clamp(3.6rem, 6.4vw, 7rem); white-space: nowrap; }
  .scribble-gallery { top: 5%; right: -17%; opacity: .7; transform: rotate(8deg); }

  .gallery {
    position: relative;
    z-index: 3;
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: clamp(120px, 12vw, 210px);
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(9px, 1.2vw, 18px);
    width: min(1500px, 100%);
    margin: 0 auto;
  }

  .artwork {
    position: relative;
    overflow: visible;
    padding: 5px;
    border: 0;
    background: var(--paper);
    box-shadow: 0 16px 30px rgba(0,0,0,.38);
    cursor: zoom-in;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, z-index 0s;
  }

  .artwork img { width: 100%; height: 100%; object-fit: cover; background: #292929; }
  .artwork:hover { z-index: 9; transform: translateY(-10px) rotate(-1deg) scale(1.025); box-shadow: 0 26px 55px rgba(0,0,0,.58); }
  .artwork:focus-visible { z-index: 9; }
  .artwork-index { position: absolute; right: -7px; bottom: -8px; padding: 3px 7px 2px; color: var(--ink); background: var(--orange); font-size: .62rem; font-weight: 700; }
  .artwork-1 { grid-column: span 5; grid-row: span 2; transform: rotate(-1deg); }
  .artwork-2 { grid-column: span 3; grid-row: span 3; transform: rotate(1.2deg); }
  .artwork-3 { grid-column: span 4; grid-row: span 2; transform: rotate(-.5deg); }
  .artwork-4 { grid-column: span 4; grid-row: span 2; transform: rotate(1deg); }
  .artwork-5 { grid-column: span 5; grid-row: span 2; transform: rotate(-1.4deg); }
  .artwork-6 { grid-column: span 3; grid-row: span 2; transform: rotate(.6deg); }
  .artwork.has-image-error { opacity: .35; pointer-events: none; }
  .gallery-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; }

  .gallery-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 50px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

  .drawn-button {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 12px 22px 10px;
    border: 2px solid var(--paper);
    border-radius: 999px;
    background: transparent;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .drawn-button span { color: var(--orange); font-size: 1.25rem; }
  .drawn-button:hover { color: var(--ink); background: var(--paper); transform: rotate(-2deg); }

  /* Platforms */
  .platforms {
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(400px, .95fr);
    align-items: center;
    gap: clamp(50px, 8vw, 150px);
    min-height: 900px;
    color: var(--ink);
  }

  .platforms .poster-meta { color: rgba(9,9,9,.66); }

  .platform-heading { position: relative; }
  .platform-heading .display-title { font-size: clamp(5rem, 9vw, 10rem); }
  .platform-script { position: absolute; right: 1%; bottom: -7%; font-size: clamp(4rem, 7vw, 8rem); white-space: nowrap; }
  .platform-script { color: var(--paper); }
  .platform-list { border-top: 2px solid var(--ink); }

  .platform-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 2px 11px;
    border-bottom: 1px solid rgba(9,9,9,.25);
    font-family: var(--display);
    font-size: clamp(2rem, 3.3vw, 3.8rem);
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
    transition: color .2s ease, padding .25s ease, background .25s ease;
  }

  .platform-list a span:last-child { color: var(--orange); font-family: var(--body); font-size: .68rem; font-weight: 700; letter-spacing: .09em; }
  .platforms .platform-list a span:last-child { color: var(--ink); }
  .platform-list a:hover { padding-right: 12px; padding-left: 12px; color: var(--paper); background: var(--ink); }
  .platform-list a:hover span:last-child { color: var(--paper); }

  /* Support */
  .support {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(90px, 11vw, 170px) var(--page-pad);
    border-bottom: 0;
    background: #131210;
  }

  .support-doodle { position: absolute; z-index: 0; top: 2%; left: -8%; width: min(64vw, 850px); opacity: .36; pointer-events: none; transform: rotate(-12deg); }

  .support-paper {
    position: relative;
    z-index: 1;
    width: min(1120px, 92%);
    margin: 0 auto;
    padding: clamp(50px, 7vw, 100px);
    color: var(--ink);
    background: var(--paper);
    box-shadow: 22px 24px 0 rgba(0,0,0,.72);
    transform: rotate(-1deg);
  }

  .support-paper::before,
  .support-paper::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 120px;
    height: 36px;
    background: rgba(242,163,27,.68);
  }

  .support-paper::before { top: -15px; left: 11%; transform: rotate(-5deg); }
  .support-paper::after { right: 9%; bottom: -14px; transform: rotate(7deg); }
  .support-paper .eyebrow { margin-bottom: 28px; color: #8c5c07; }
  .support-paper .display-title { font-size: clamp(4.8rem, 9vw, 10rem); }
  .support-copy { width: min(530px, 100%); margin: 36px 0 42px; font-size: clamp(1rem, 1.3vw, 1.25rem); }
  .support-form { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .support-form > span { color: #59544c; font-size: .72rem; font-weight: 600; text-transform: uppercase; }

  .ink-button {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 14px 22px 12px;
    border: 2px solid var(--ink);
    color: var(--paper);
    background: var(--ink);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .ink-button:hover { color: var(--ink); background: var(--orange); transform: translate(-3px,-3px); }

  /* Contact */
  .contact { display: flex; flex-direction: column; justify-content: center; min-height: clamp(980px, 112svh, 1220px); padding-bottom: 250px; text-align: center; }
  .contact-main { position: relative; z-index: 3; width: min(1400px, 100%); margin: auto; }
  .contact-main .eyebrow { margin-bottom: 34px; }
  .contact-main .display-title { font-size: clamp(5rem, 13.5vw, 14.5rem); }
  .contact-script { width: max-content; margin: clamp(-20px, -2vw, -8px) auto 46px; font-size: clamp(4.5rem, 8vw, 9rem); }
  .scribble-contact { z-index: 0; top: 3%; left: 50%; opacity: .65; transform: translateX(-50%) rotate(176deg); }

  .contact-float {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    padding: 5px;
    background: var(--paper);
    box-shadow: 0 20px 44px rgba(0,0,0,.55);
    pointer-events: none;
  }

  .contact-float img { width: 100%; height: 100%; object-fit: cover; }
  .contact-float-one { top: 29%; left: 3.5%; width: clamp(100px, 11vw, 180px); aspect-ratio: .78; transform: rotate(-7deg); }
  .contact-float-two { top: 20%; right: 3.5%; width: clamp(110px, 12vw, 195px); aspect-ratio: 1.08; transform: rotate(6deg); }

  .contact-button {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding: 12px 25px 10px;
    border: 2px solid var(--paper);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .contact-button img { width: 18px; height: 18px; }
  .contact-button:hover { color: var(--ink); background: var(--paper); transform: rotate(-2deg) scale(1.04); }
  .contact-button:hover img { filter: brightness(0); }

  .social-links {
    position: absolute;
    z-index: 4;
    right: var(--page-pad);
    bottom: 28px;
    left: var(--page-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .social-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 14px;
    min-height: 102px;
    padding: 18px clamp(12px, 2vw, 28px);
    border-right: 1px solid var(--line);
    color: var(--paper);
    text-align: left;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .social-card:last-child { border-right: 0; }
  .social-icon { grid-row: 1 / 3; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(243,241,233,.34); }
  .social-icon img { width: 22px; height: 22px; }
  .social-name { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 2rem); letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
  .social-card small { color: #99958d; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .social-card:hover { z-index: 2; color: var(--ink); background: var(--orange); transform: translateY(-7px); }
  .social-card:hover small { color: rgba(9,9,9,.7); }
  .social-card:hover .social-icon { border-color: rgba(9,9,9,.35); }
  .social-card:hover img { filter: brightness(0); }

  /* Footer */
  .site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 86px;
    padding: 20px var(--page-pad);
    color: var(--ink);
    background: var(--orange);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .footer-brand { justify-self: start; font-family: var(--display); font-size: 1.75rem; letter-spacing: .02em; }
  .site-footer p { justify-self: center; }
  .site-footer > a:last-child { justify-self: end; }

  /* Lightbox */
  .lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(64px, 8vw, 100px) clamp(20px, 5vw, 70px);
    border: 0;
    color: var(--paper);
    background: rgba(5,5,5,.96);
  }

  .lightbox[open] { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; }
  .lightbox::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(10px); }
  .lightbox figure { display: grid; place-items: center; height: 100%; min-height: 0; }
  .lightbox img { max-width: 100%; max-height: calc(100vh - 140px); border: 6px solid var(--paper); object-fit: contain; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
  .lightbox figcaption { margin-top: 12px; color: var(--gray); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .lightbox-close { position: fixed; z-index: 2; top: 22px; right: 24px; padding: 8px 12px; border: 1px solid var(--paper); background: transparent; cursor: pointer; }
  .lightbox-nav { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--paper); border-radius: 50%; background: transparent; font-size: 1.35rem; cursor: pointer; }
  .lightbox button:hover { color: var(--ink); background: var(--orange); }
}

@layer motion {
  [data-scroll-float] {
    --scroll-y: 0px;
    --scroll-r: 0deg;
    translate: 0 var(--scroll-y);
    rotate: var(--scroll-r);
  }

  [data-scroll-float].is-scroll-active { will-change: translate, rotate; }

  .js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  .js .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .js .artwork.reveal { transform: translateY(40px) rotate(var(--art-rotation, 0deg)); }
  .js .artwork.reveal.is-visible { transform: translateY(0) rotate(var(--art-rotation, 0deg)); }
  .js .artwork.reveal.is-visible:hover { transform: translateY(-10px) rotate(-1deg) scale(1.025); }
  .artwork-1 { --art-rotation: -1deg; }
  .artwork-2 { --art-rotation: 1.2deg; }
  .artwork-3 { --art-rotation: -.5deg; }
  .artwork-4 { --art-rotation: 1deg; }
  .artwork-5 { --art-rotation: -1.4deg; }
  .artwork-6 { --art-rotation: .6deg; }

  .kinetic-track { animation: ticker 26s linear infinite; }
  .hero-floater-one { animation: frame-drift-one 8s ease-in-out infinite; }
  .hero-floater-two { animation: frame-drift-two 9.5s ease-in-out infinite; }
  .hero-floater-three { animation: frame-drift-three 10.5s ease-in-out infinite; }
  .contact-float-one { animation: contact-drift-one 9s ease-in-out infinite; }
  .contact-float-two { animation: contact-drift-two 10s ease-in-out infinite; }
  .scroll-line { animation: scroll-pulse 1.8s ease-in-out infinite; transform-origin: top; }

  @keyframes ticker { to { transform: translateX(-50%); } }
  @keyframes frame-drift-one { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-13px); } }
  @keyframes frame-drift-two { 0%,100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(11px); } }
  @keyframes frame-drift-three { 0%,100% { transform: rotate(-3deg) translateX(0); } 50% { transform: rotate(-1deg) translateX(-12px); } }
  @keyframes contact-drift-one { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(-3deg) translateY(-10px); } }
  @keyframes contact-drift-two { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(3deg) translateY(12px); } }
  @keyframes scroll-pulse { 0%,100% { transform: scaleY(.2); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
  @keyframes portal-scroll-line { 0%,100% { transform: scaleY(.22); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

  @supports (animation-timeline: view()) {
    .gallery-heading .display-title,
    .platform-heading .display-title {
      animation: title-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 48%;
    }

    @keyframes title-drift { from { transform: translateX(-7vw); } to { transform: translateX(0); } }
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .site-nav { gap: 20px; }
    .about { grid-template-columns: minmax(300px,.9fr) minmax(360px,1.1fr); }
    .about-copy .display-title { font-size: clamp(4.5rem, 8.5vw, 7.8rem); }
    .music-collage { grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); }
    .platforms { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 900px) {
    :root { --header-h: 66px; }

    .site-header { grid-template-columns: 1fr auto; }
    .menu-open .site-header.is-scrolled {
      min-height: var(--header-h);
      border-color: transparent;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .header-cta { display: none; }
    .menu-toggle {
      position: relative;
      z-index: 102;
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      border: 0;
      background: transparent;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      min-width: 48px;
      min-height: 48px;
      justify-content: flex-end;
    }

    .brand { min-height: 48px; }

    .menu-lines { display: grid; gap: 6px; width: 26px; }
    .menu-lines i { display: block; height: 2px; background: var(--paper); transition: transform .25s ease; }
    .menu-toggle[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(4px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-4px) rotate(-45deg); }

    .site-nav {
      position: fixed;
      z-index: 101;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 2px;
      padding:
        max(clamp(100px, 18vh, 160px), calc(env(safe-area-inset-top) + 76px))
        var(--page-pad)
        max(40px, env(safe-area-inset-bottom));
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      visibility: hidden;
      opacity: 0;
      background: var(--ink) url("../images/black-crumpled-paper.webp") center / cover;
      transform: translateY(-3%);
      transition: opacity .28s ease, transform .28s ease, visibility .28s;
    }

    .site-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
    .site-nav a { display: flex; flex: 0 0 auto; align-items: center; width: 100%; min-height: 48px; font-family: var(--display); font-size: clamp(3.1rem, 10vw, 5rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; }
    .site-nav a::after { bottom: 0; }

    .about { display: block; min-height: auto; padding-bottom: 150px; }
    .about-copy { width: min(620px, 100%); padding-top: 80px; }
    .about-portrait { width: min(680px, 100%); height: min(105vw, 750px); margin: 70px auto 0; }
    .about-disciplines { grid-template-columns: repeat(3,1fr); }
    .about-disciplines span:nth-child(3) { border-right: 0; }
    .about-disciplines span:nth-child(n+4) { border-top: 1px solid var(--line); }

    .music { min-height: auto; }
    .music-collage { grid-template-columns: 1fr; }
    .genre-stack { min-height: 560px; width: min(600px,100%); margin: 20px auto 0; }
    .genre-card { width: min(76%, 390px); }

    .art-portal { height: 370vh; min-height: 2100px; }
    .portal-note { width: min(230px, 26vw); min-height: 180px; padding: 20px; }
    .portal-note-1 { left: 5%; }
    .portal-note-2 { right: 5%; }
    .portal-note-3 { right: 30%; }

    .gallery { grid-auto-rows: clamp(110px, 21vw, 190px); grid-template-columns: repeat(8,1fr); }
    .artwork-1 { grid-column: span 5; }
    .artwork-2 { grid-column: span 3; }
    .artwork-3 { grid-column: span 4; }
    .artwork-4 { grid-column: span 4; }
    .artwork-5 { grid-column: span 5; }
    .artwork-6 { grid-column: span 3; }

    .platforms { display: block; min-height: auto; }
    .platform-heading { margin: 80px 0 100px; }
    .platform-list { width: min(720px,100%); margin-left: auto; }

    .hero-floater-three { display: none; }
    .hero-social-rail { bottom: 25%; }
    .contact { min-height: 1200px; padding-bottom: 330px; }
    .contact-float { opacity: .68; }
    .social-links { grid-template-columns: repeat(2, 1fr); }
    .social-card:nth-child(2) { border-right: 0; }
    .social-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }

  @media (max-width: 640px) {
    :root { --page-pad: 20px; }
    .poster-section { min-height: auto; padding-top: 120px; padding-bottom: 82px; border-bottom-width: 5px; }
    .poster-meta { top: 82px; gap: 12px; font-size: .56rem; }
    .poster-meta span:last-child { text-align: right; }
    .brand-mark { width: 27px; height: 27px; }
    .brand > span:last-child { display: none; }
    .menu-label { display: none; }

    .hero { min-height: 760px; padding-top: 100px; }
    .hero .display-title { font-size: clamp(4.2rem, 20vw, 7rem); white-space: normal; }
    .hero-copy .eyebrow { width: 70%; margin-right: auto; margin-left: auto; line-height: 1.5; }
    .hero-intro { margin-top: 62px; font-size: .88rem; }
    .hero-scroll { display: none; }
    .hero-doodles { top: 15%; width: 760px; opacity: .3; }
    .hero-floater-one { bottom: 100px; left: -22px; width: 96px; height: 128px; opacity: .82; }
    .hero-floater-two { top: 145px; right: -20px; width: 90px; height: 122px; opacity: .78; }
    .hero-social-rail { bottom: 24px; left: 20px; display: flex; }
    .hero-social-rail a { width: 38px; height: 38px; }

    .kinetic-strip { border-bottom-width: 5px; font-size: 2.3rem; }
    .kinetic-track { gap: 20px; }

    .about { padding-bottom: 210px; }
    .about-copy { padding-top: 38px; }
    .about-copy .display-title { margin-top: 18px; font-size: clamp(4.2rem, 21vw, 6.4rem); }
    .about-script { top: 130px; left: 28%; font-size: 4rem; }
    .about-portrait { min-height: 0; height: 125vw; max-height: 620px; margin-top: 48px; }
    .portrait-halo { top: 10%; width: 88%; }
    .about-disciplines { grid-template-columns: 1fr 1fr; bottom: 28px; }
    .about-disciplines span { min-height: 48px; }
    .about-disciplines span:nth-child(2n) { border-right: 0; }
    .about-disciplines span:nth-child(3) { border-right: 1px solid var(--line); }
    .about-disciplines span:nth-child(n+3) { border-top: 1px solid var(--line); }
    .about-disciplines span:last-child { grid-column: 1 / -1; }

    .music-heading { margin: 36px auto 72px; }
    .music-heading .display-title { font-size: clamp(4.2rem, 19vw, 6rem); }
    .music-script { right: 0; bottom: -10%; font-size: 3.2rem; }
    .video-frame { border-width: 4px; box-shadow: 9px 10px 0 var(--orange); }
    .video-caption { font-size: .58rem; }
    .genre-stack { min-height: 620px; margin-top: 38px; }
    .genre-card { width: 88%; min-height: 205px; padding: 22px; }
    .genre-card h3 { font-size: 3rem; }
    .genre-two { top: 170px; }

    .art-portal { height: 330vh; min-height: 1700px; }
    .art-portal-mosaic { inset: -4%; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
    .portal-tile-1 { grid-column: 1; grid-row: 1 / 3; }
    .portal-tile-2 { grid-column: 2; grid-row: 1; }
    .portal-tile-3 { grid-column: 2; grid-row: 2 / 4; }
    .portal-tile-4 { grid-column: 1; grid-row: 3 / 5; }
    .portal-tile-5 { grid-column: 2; grid-row: 4; }
    .portal-tile-6 { display: none; }
    .portal-mask-desktop { display: none; }
    .portal-mask-mobile { display: inline; }
    .art-portal-topline { top: 82px; font-size: .5rem; }
    .art-portal-topline span:last-child { display: none; }
    .art-portal-scroll { bottom: 5%; }
    .portal-note { width: 44vw; min-height: 150px; padding: 18px; font-size: .9rem; }
    .portal-note-1 { top: 18%; left: 5%; }
    .portal-note-2 { right: 5%; bottom: 10%; }
    .portal-note-3 { top: 44%; right: 8%; }

    .gallery-heading { margin: 30px 0 70px; }
    .gallery-heading .display-title { font-size: clamp(4.5rem, 21vw, 6.5rem); }
    .gallery-script { top: 138px; left: 25%; font-size: 3.5rem; }
    .gallery { grid-auto-rows: 118px; grid-template-columns: repeat(2,1fr); gap: 8px; }
    .artwork-1, .artwork-2, .artwork-3, .artwork-4, .artwork-5, .artwork-6 { grid-column: span 1; grid-row: span 2; }
    .artwork-1, .artwork-4 { grid-column: span 2; }
    .gallery-footer { align-items: flex-start; flex-direction: column; }

    .platform-heading { margin: 40px 0 86px; }
    .platform-heading .display-title { font-size: clamp(4rem, 19vw, 6rem); }
    .platform-script { right: 0; font-size: 4rem; }
    .platform-list a { font-size: 2.25rem; }

    .support { padding: 76px 20px 86px; border-bottom-width: 5px; }
    .support-paper { width: 95%; padding: 44px 26px; box-shadow: 12px 14px 0 rgba(0,0,0,.72); }
    .support-paper .display-title { font-size: clamp(4rem, 19vw, 6rem); }
    .support-form { align-items: flex-start; flex-direction: column; }

    .contact { min-height: 1120px; padding-bottom: 420px; }
    .contact-main .display-title { font-size: clamp(4.2rem, 20vw, 6.7rem); }
    .contact-script { margin-top: 5px; margin-bottom: 44px; font-size: 4.3rem; }
    .contact-float { display: none; }
    .social-links { right: 20px; bottom: 28px; left: 20px; }
    .social-card { grid-template-columns: 40px 1fr; min-height: 94px; padding: 14px 10px; gap: 2px 10px; }
    .social-icon { width: 38px; height: 38px; }
    .social-icon img { width: 19px; height: 19px; }
    .social-name { font-size: 1.2rem; }
    .social-card small { font-size: .5rem; }
    .support-doodle { width: 900px; opacity: .24; }
    .site-footer { grid-template-columns: 1fr 1fr; }
    .site-footer p { display: none; }

    .lightbox { padding: 70px 14px 40px; }
    .lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) auto; }
    .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
    .lightbox-prev { grid-column: 1; grid-row: 2; justify-self: end; }
    .lightbox-next { grid-column: 2; grid-row: 2; justify-self: start; }
    .lightbox img { max-height: calc(100vh - 170px); border-width: 3px; }
  }

  @media (max-width: 900px) and (max-height: 520px) {
    .site-nav {
      padding:
        max(70px, calc(env(safe-area-inset-top) + 56px))
        var(--page-pad)
        max(22px, env(safe-area-inset-bottom));
    }

    .site-nav a {
      min-height: 52px;
      font-size: clamp(2.2rem, 12vh, 3.35rem);
      line-height: .96;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
    [data-scroll-float] { translate: none !important; rotate: none !important; }
    .art-portal {
      --portal-mask-opacity: .24;
      --portal-content-opacity: 1;
      --portal-content-y: 0px;
      --portal-hint-opacity: 0;
      height: 100svh;
      min-height: 720px;
    }
    .art-portal-sticky { position: relative; }
  }
}