/* One responsive music poster: typography, photographic scraps and the heart
   use separate layers, while all controls retain readable native sizes. */
html { background: #f5d8e3; }
body { --footer-offset: 5.7%; --footer-height: 32px; --footer-gap: 18px; position: relative; background: radial-gradient(ellipse at 62% 44%, #ffe8ee66, transparent 52%), #f5d8e3; }
body::before { opacity: .13; }
body::after { display: none; }
.site-header, .hero, footer { width: 100%; }
.site-header { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100px; padding-left: 4.3%; padding-right: 5%; margin: 0; }
.brand { width: 166px; }
.site-header nav { gap: clamp(28px, 2.9vw, 52px); margin-right: clamp(30px, 3.7vw, 64px); }
.nav-link { color: #752343; }
.motion-toggle { color: #752343; }
.hero { height: 100svh; min-height: 700px; max-height: 1250px; }
.poster-artwork { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.main-composition { --composition-scale: .95; position: absolute; inset: 0; z-index: 20; transform: scale(var(--composition-scale)); transform-origin: center; }
.hero-title { position: absolute; inset: 0; z-index: 40; width: 100%; mix-blend-mode: normal; }
.hero-title h1 { position: absolute; inset: 0; }
.word-fragment { --lettering-scale: .98; position: absolute; display: block; overflow: hidden; transform: rotate(12deg) scale(var(--lettering-scale)); transform-origin: center; }
.word-fragment img { height: auto; max-width: none; filter: drop-shadow(.08cqw .18cqw .04cqw #97526b32) drop-shadow(.3cqw .9cqw .8cqw #8f36572b); }
.lettering-aga { left: 1.8%; top: 16.5%; width: 46%; aspect-ratio: 1223/692; }
.lettering-aga img { width: 100%; }
.lettering-pe { left: 52%; top: 52%; width: 33.5%; aspect-ratio: 1077/692; }
.lettering-pe img { width: 100%; }
.tagline { position: absolute; z-index: 45; pointer-events: none; top: 13.5%; right: 2%; width: max-content; max-width: 40%; margin: 0; padding: 0 2.7em .65em 0; color: #a23d67; font-size: clamp(20px, 1.75cqw, 32px); line-height: 1.3; letter-spacing: .02em; transform: rotate(-12deg); }
.orbit-scene, .keepsakes { left: 25.3%; top: 13.7%; width: 60.5%; }
.keepsakes { translate: 4.5cqw 0; }
.card-back { width: 24.5%; height: 56%; }
.back-one { left: 53%; top: 2%; transform: rotate(15deg); }
.back-two { left: 65%; top: 27%; transform: rotate(23deg); }
.back-three { left: 55%; top: 42%; transform: rotate(-12deg); }
.pencil-note { left: 31.4%; top: 13%; font-size: clamp(26px, 2.5cqw, 44px); scale: .81; transform-origin: left center; }
.pencil-note i { left: 101%; top: 30%; font-size: 80px; }
.doodle-one { display: block; left: 2.2%; top: 20%; font-size: 32px; color: var(--rose); }
.doodle-two { right: 8.2%; top: 38%; font-size: clamp(45px, 4cqw, 68px); }
.music-slip { --music-slip-scale: .92; right: 2.5%; bottom: 8%; width: clamp(330px, 24.5cqw, 460px); min-height: 104px; padding: 18px 20px; gap: 18px; border-radius: 1px; border: 1px solid #fff4f7; background: #fff1f6; box-shadow: 0 9px 20px #813a5512; transform: scale(var(--music-slip-scale)); transform-origin: bottom right; }
.vinyl { width: 68px; height: 68px; }
.song-kicker { font-size: 8px; letter-spacing: .9px; }
.song-copy strong { font-size: 17px; }
.song-status { font-size: 11px; }
.play-button { width: 52px; height: 52px; }
/* Background marks stay beneath every collage, object and text layer. */
.poster-lines { position: absolute; inset: 0; z-index: 0; opacity: .38; pointer-events: none; background: url("assets/collage/poster-lines.svg?v=2") center / 100% 100% no-repeat; }
.collage-print { position: absolute; z-index: 2; margin: 0; background: #edbbce; border: 2px solid #fff3f7; opacity: .62; pointer-events: none; }
.collage-print img { width: 100%; height: 100%; object-fit: cover; filter: url("assets/collage/rose-print.svg#duotone"); mix-blend-mode: multiply; opacity: .84; }
.collage-print::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .08; background: radial-gradient(#76304f .6px, transparent .9px) 0 0 / 3px 3px; }
/* Photo rotation and framing are preserved at every poster scale. */
.city-print { left: -2.5%; bottom: 13.2%; width: 26.5%; aspect-ratio: 1.1; transform: rotate(-15deg); transform-origin: center; }
.city-print img { object-position: 64% center; }
.cloud-print { right: -.5%; bottom: 3%; width: 22%; aspect-ratio: .85; transform: rotate(-18deg); transform-origin: center; }
.cloud-print img { object-position: 76% center; }
.cloud-scrap { right: -8%; top: 24%; width: 15%; aspect-ratio: .85; transform: rotate(-17deg); opacity: .48; }
.cloud-scrap img { object-position: left center; }
.print-smudge { position: absolute; z-index: 1; left: -9%; top: 11%; width: 61%; height: 31%; background: url("https://kiki-static.lightnook.top/kiki-garden/static/Agape/collage-song-infinite-love.30530a0dc8e7b3dc.webp") 0% 0% / cover; transform: rotate(-32deg); opacity: .08; filter: url("assets/collage/rose-print.svg#duotone"); mix-blend-mode: multiply; mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%); pointer-events: none; }
.margin-note { position: absolute; top: 12.1%; left: 4.9%; z-index: 5; color: #73213f; font: 11px/1.65 Georgia, serif; letter-spacing: 2px; }
.side-note { position: absolute; right: 1.2%; top: 51%; z-index: 5; font-family: "KaiTi", "STKaiti", serif; font-size: 13px; letter-spacing: 3px; writing-mode: vertical-rl; color: #642039; }
footer { position: absolute; left: 50%; bottom: var(--footer-offset); translate: -50% 0; height: var(--footer-height); padding-inline: 3.7%; color: #762344; justify-content: flex-start; gap: 30px; }
footer > span:first-child { font-size: 22px; }
.member-index { display: flex; align-items: center; gap: 40px; font: italic 12px Georgia, serif; letter-spacing: 1px; }
.index-track { display: block; position: relative; width: 88px; height: 1px; background: #bd7b965c; }
.index-track i { position: absolute; width: 33.333%; height: 2px; background: var(--rose); top: 0; left: 0; transition: transform .5s var(--ease); }
.hero .member-controls { padding: 4px 6px; border-radius: 999px; background: #fff0f5d9; box-shadow: 0 5px 15px #7c375510; }
/* The page frame follows the viewport; the artwork scales uniformly from
   1672 × 941. The original photo crops, rotations and overlaps stay together. */
@media (min-width: 901px) {
  body { --poster-width: min(100vw, calc(100svh * 1672 / 941)); --footer-height: max(32px, calc(var(--poster-width) * .01914)); }
  .hero { height: 100svh; min-height: 0; max-height: none; }
  .poster-artwork { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--poster-width); height: auto; aspect-ratio: 1672 / 941; }
  .site-header { height: max(76px, calc(var(--poster-width) * .05981)); padding-inline: 4.3%; }
  .brand { width: max(130px, calc(var(--poster-width) * .09928)); }
  .site-header nav { gap: max(26px, calc(var(--poster-width) * .029)); margin-right: max(28px, calc(var(--poster-width) * .037)); }
  .nav-link { font-size: max(13px, calc(var(--poster-width) * .00837)); gap: max(8px, calc(var(--poster-width) * .00598)); letter-spacing: max(1px, calc(var(--poster-width) * .0012)); }
  .nav-link span { font-size: max(8px, calc(var(--poster-width) * .00538)); }
  .motion-toggle { font-size: max(12px, calc(var(--poster-width) * .00778)); }
  .motion-toggle > span:first-child { font-size: max(18px, calc(var(--poster-width) * .01077)); }
  .tagline { font-size: 1.75cqw; }
  .pencil-note { font-size: 2.5cqw; }
  .pencil-note i { font-size: 4.78cqw; }
  .doodle-one { font-size: 1.91cqw; }
  .doodle-two { font-size: 4cqw; }
  .margin-note { font-size: .66cqw; }
  .side-note { font-size: .78cqw; }
  .music-slip { width: 24.5%; min-height: 6.22cqw; padding: 1.08cqw 1.2cqw; gap: 1.08cqw; }
  .music-slip .vinyl { width: 4.07cqw; height: 4.07cqw; }
  .song-copy { gap: .3cqw; }
  .song-kicker { font-size: max(7px, .48cqw); }
  .song-copy strong { font-size: max(12px, 1.02cqw); }
  .song-status { font-size: max(9px, .66cqw); }
  .music-slip .play-button { width: max(44px, 3.11cqw); height: max(44px, 3.11cqw); }
  /* Keep the approved composition: decorative corners may bleed, while the
     three faces in each print sit in the openings around the lettering. */
  .city-print { left: -2.5%; bottom: 13.2%; width: 26.5%; }
  .cloud-print { right: -.5%; bottom: 3%; width: 22%; }
  .cloud-scrap { right: -8%; top: 24%; width: 15%; }
  .collage-print { border-width: .12cqw; }
  .collage-print::after { background-size: .18cqw .18cqw; }
  footer { padding-inline: 4.3%; gap: max(30px, calc(var(--poster-width) * .018)); }
  footer > span:first-child { font-size: max(16px, calc(var(--poster-width) * .01316)); }
  .member-index { font-size: max(10px, calc(var(--poster-width) * .00718)); gap: max(24px, calc(var(--poster-width) * .02392)); }
  .index-track { width: calc(var(--poster-width) * .05263); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .site-header { height: 84px; padding-inline: 5%; }
  .brand { width: 130px; }
  .site-header nav { gap: 26px; margin-right: 28px; }
  .nav-link { font-size: 13px; }
  .motion-toggle { font-size: 12px; }
  .member-tabs button { padding-inline: 8px; font-size: 10px; }
  .member-controls { gap: 5px; }
}
/* Mobile is a portrait poster with overlapping lettering, not a stacked template.
   The bottom control area has a fixed reservation and can scroll on short phones. */
@media (max-width: 900px) {
  body { --footer-offset: 1.2%; --footer-height: 28px; }
  .hero { width: min(100%, 620px); height: max(900px, calc(min(100vw, 620px) + 530px), 100svh); min-height: 900px; max-height: 1180px; }
  .site-header { width: min(100%, 620px); height: 76px; padding-inline: 6%; gap: 16px; }
  .brand { width: clamp(104px, 22vw, 145px); }
  .site-header nav { margin: 0 0 0 auto; gap: clamp(18px, 4vw, 30px); }
  .nav-link { font-size: 13px; letter-spacing: 1px; }
  .nav-link span { display: none; }
  .motion-toggle { position: absolute; right: 6%; top: 68px; min-height: 44px; width: 44px; padding: 0; justify-content: center; background: transparent; }
  .motion-label { display: none; }
  .motion-toggle > span:first-child { font-size: 17px; }
  .lettering-aga { left: 1%; top: 20%; width: 81%; transform: rotate(10deg) scale(var(--lettering-scale)); }
  .lettering-pe { left: 39%; top: 49%; width: 66%; transform: rotate(13deg) scale(var(--lettering-scale)); }
  .orbit-scene, .keepsakes { left: -17%; top: 29%; width: 130%; }
  .card-back { border-width: 6px; }
  .back-one { top: -5%; left: 54%; }
  .back-two { left: 68%; top: 23%; }
  .back-three { left: 56%; top: 41%; }
  .tagline { right: 9%; top: 12%; max-width: 83%; font-size: clamp(18px, 4.8cqw, 27px); letter-spacing: .01em; transform: rotate(-10deg); }
  .pencil-note { display: none; }
  .pencil-note i { font-size: 40px; top: -6%; left: 103%; }
  .city-print { left: 1%; bottom: calc(var(--footer-offset) + var(--footer-height) + var(--footer-gap)); width: 54%; aspect-ratio: 1.08; transform-origin: bottom left; }
  .city-print img { object-position: 78% center; }
  .cloud-print { right: -6%; bottom: max(11%, calc(var(--footer-offset) + var(--footer-height) + var(--footer-gap))); width: 47%; transform-origin: bottom left; }
  .cloud-scrap { top: 16%; right: -12%; width: 28%; }
  .print-smudge { top: 26%; height: 18%; width: 100%; left: -24%; }
  .poster-lines { background-size: auto 100%; background-position: 47% center; opacity: .25; }
  .margin-note { top: 13%; left: 5.7%; font-size: 8px; letter-spacing: 1.5px; }
  .side-note { display: none; }
  .doodle-one { left: 4%; top: 34%; font-size: 25px; }
  .doodle-two { top: 60%; right: 13%; font-size: 39px; }
  .music-slip { right: 6%; bottom: 3.9%; width: 85%; min-height: 90px; padding: 13px 14px; gap: 12px; transform: rotate(-4deg) scale(var(--music-slip-scale)); transform-origin: center; }
  .vinyl { width: 53px; height: 53px; }
  .song-kicker { font-size: 7px; letter-spacing: .7px; }
  .song-copy strong { font-size: 15px; }
  .song-status { font-size: 10px; }
  .play-button { width: 44px; height: 44px; font-size: 15px; }
  .hero .member-controls { gap: 4px; padding-inline: 4px; }
  .member-tabs button { padding-inline: 7px; font-size: 11px; }
  footer { width: min(100%, 620px); padding-inline: 7%; gap: 24px; }
  footer > span:first-child { font-size: 16px; }
  .member-index { gap: 14px; font-size: 10px; }
  .index-track { width: 74px; }
  dialog { padding: 22px; }
  .handwritten { font-size: 17px; }
  dialog h2 { font-size: 24px; }
  .big-vinyl { width: 150px; height: 150px; }
  .big-vinyl i { inset: 43px; }
  .record-art > span { font-size: 17px; }
}
@media (min-width: 560px) and (max-width: 900px) {
  .lettering-aga { top: 17%; width: 73%; }
  .lettering-pe { top: 44%; width: 60%; }
  .orbit-scene, .keepsakes { top: 23%; }
  .pencil-note { top: 21%; }
  .tagline { top: 10%; right: 13%; }
  .music-slip { width: 65%; right: 8%; }
  .city-print { width: 42%; }
  .cloud-print { bottom: 13%; width: 38%; }
}
@media (max-width: 360px) {
  .site-header { gap: 12px; }
  .site-header nav { gap: 17px; }
  .music-slip { gap: 9px; padding-inline: 11px; width: 88%; }
  .vinyl { width: 46px; height: 46px; }
  .song-kicker { font-size: 7px; letter-spacing: .3px; }
  .member-tabs { gap: 0; }
  .member-tabs button { font-size: 10px; padding-inline: 6px; }
}