/* RADAR-FILE-S — frame 938:1909 and its interactive states. */
:root { --u: 1px; }
[hidden] { display: none !important; }
button, input, textarea { font-family: inherit; }
.hero::after { display: none; }
.hero-background { mix-blend-mode: normal; object-position: center; }
.hero-word { letter-spacing: 0; line-height: 260px; bottom: -46px; left: -21px; }
.hero-card { padding: 24px 24px 0; }
.about { border: 0; }
.about-title { letter-spacing: 0; }
.track-artwork {
  position: absolute;
  right: calc(100% + var(--track-badge-space, 0px));
  bottom: 100%;
  width: calc(186 * var(--u));
  height: calc(186 * var(--u));
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) rotate(-4deg) scale(0.95);
  transition: opacity 350ms var(--motion-ease), transform 650ms var(--motion-ease), visibility 350ms;
}
.is-current:hover .track-artwork,
.is-current:is(:focus-visible, :has(:focus-visible)) .track-artwork { opacity: 1; visibility: visible; transform: none; }
.track-list li { column-gap: var(--track-badge-gap); }
.track-release-meta { gap: calc(4 * var(--u)); position: absolute; right: calc(100% + 8 * var(--u)); }
.track-list.is-enhanced .is-current:hover .track-release-meta,
.track-list.is-enhanced .is-current:is(:focus-visible, :has(:focus-visible)) .track-release-meta { transform: translateX(calc(-1 * var(--track-meta-shift, 0px))); }
.track-release-meta > small { opacity: 0; transition: opacity 350ms var(--motion-ease); }
.is-current:hover .track-release-meta > small,
.is-current:is(:focus-visible, :has(:focus-visible)) .track-release-meta > small { opacity: 1; }
/* The release name stays in place as the sticker/controls recenter. */
.countdown { min-height: 1000px; padding: 100px 0 0; isolation: isolate; overflow: hidden; background: #fff; }
.countdown-inner { position: relative; z-index: 2; }
.release-sticker { padding: 20px; }
.preview-actions { display: flex; align-items: stretch; pointer-events: none; }
.preview-action { position: relative; min-width: 0; padding: 20px; color: #fff; }
.preview-control { flex-shrink: 0; }
.preview-progress { display: none; position: absolute; inset: auto 0 0; height: 8px; padding: 2px; background: var(--signal-yellow); }
.preview-progress > span { display: block; width: 100%; height: 4px; background: #ff0805; transform: scaleX(0); transform-origin: left; }
.is-preview-playing .preview-progress,
.has-preview-started .preview-progress { display: block; }
.preview-note { display: flex; align-items: center; gap: 10px; border: 4px solid #171717; border-left: 0; padding: 16px; background: #fff; color: #e80000; font-size: 24px; font-weight: 500; line-height: 24px; text-decoration: underline; white-space: nowrap; cursor: pointer; pointer-events: auto; }
.preview-note .ph { font-size: 24px; }
:is(.has-preview-finished, .has-preview-paused) .release-preview-group { transform: none; }
:is(.has-preview-finished, .has-preview-paused) .preview-action { opacity: 1; visibility: visible; transform: none; padding: 16px; border: 4px solid #171717; }
.has-preview-finished .preview-control { flex-direction: row-reverse; gap: 8px; }
.has-preview-finished [data-preview-label] { text-decoration: none; }
.has-preview-finished .release-sticker { padding: 20px 40px; }
.has-preview-finished .preview-progress { display: none; }
.countdown:has(.release-preview-group :focus-visible),
.countdown:has(.release-preview-group:hover) { background: #fff; }
.preview-note:focus-visible, .feedback-more:focus-visible, .activity-more:focus-visible { outline: 2px solid #ef6700; outline-offset: 4px; }
.feedback-wall { position: absolute; z-index: 0; inset: 0 0 auto; height: calc(1000 * var(--u)); pointer-events: none; contain: paint; }
.feedback-columns { position: absolute; inset: 0 24px; background: repeating-linear-gradient(to right, #e8e8e8 0 1px, transparent 1px calc(100% / 3)); border-right: 1px solid #e8e8e8; }
.listener-note { margin: 0; padding-left: 16px; border-left: 1px solid #c70a0a; text-transform: uppercase; }
.listener-note p { overflow-wrap: anywhere; margin: 0 0 24px; font-size: 20px; font-weight: 500; line-height: 24px; text-align: justify; }
.listener-note cite { color: #d4d4d4; font-size: 20px; font-style: normal; line-height: 20px; }
.feedback-wall .listener-note { position: absolute; width: 30.17%; }
.note-1 { top: calc(694 * var(--u)); left: 0; }
.note-2 { top: calc(650 * var(--u)); left: 66.667%; }
.note-3 { top: calc(944 * var(--u)); left: 0; }
.note-4 { top: calc(790 * var(--u)); left: 33.333%; }
.note-5 { top: calc(1040 * var(--u)); left: 33.333%; }
.note-6 { top: calc(886 * var(--u)); left: 66.667%; }
.note-7 { top: calc(1104 * var(--u)); left: 66.667%; }
.feedback-wall .note-extra {
  top: calc(var(--note-top) * var(--u));
  left: var(--note-left);
  filter: blur(8px);
}
/* Keep the two highest notes readable; increase blur in visual row order. */
.feedback-wall :is(.note-1, .note-2) { z-index: 1; }
.feedback-wall .note-4 { filter: blur(3px); }
.feedback-wall .note-6 { filter: blur(4.5px); }
.feedback-wall .note-3 { filter: blur(6px); }
.feedback-wall .note-5 { filter: blur(7px); }
.feedback-wall .note-7 { filter: blur(8px); }
.feedback-wall::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(to bottom, transparent 64%, rgb(241 241 241 / 30%) 78%, rgb(241 241 241 / 70%) 90%, #f1f1f1 100%);
}
/* Figma "Blur-Bot" (994:704 → 993:59): one pink-to-white wash with a 6px background blur
   above the streams, present from the first view. The mask mirrors the fill alpha, so the
   blur fades out where the wash is clear and the readable band of notes below the release
   copy stays sharp at the scroll endpoint. */
.countdown.is-feedback-stacked .feedback-wall::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: '';
  background: linear-gradient(180deg, #f7e7e7 1.024%, #fdf8f8 51.322%, #fff 72.199%, #fff 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 1.024%, rgb(0 0 0 / 52%) 51.322%, transparent 72.199%, #000 100%);
  mask-image: linear-gradient(180deg, #000 1.024%, rgb(0 0 0 / 52%) 51.322%, transparent 72.199%, #000 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
/* The first view (994:704) keeps its lower region 52% white; it clears as the notes rise. */
.countdown.is-feedback-stacked .feedback-wall::after {
  z-index: 3;
  background: linear-gradient(180deg, transparent 51.322%, rgb(255 255 255 / 52%) 72.199%, transparent 100%);
  opacity: calc(1 - var(--feedback-wash, 0));
}
.countdown.is-feedback-stacked {
  height: var(--feedback-stage-height);
  min-height: 0;
}
.countdown.is-feedback-stacked .feedback-wall { height: 100%; }
/* Figma 993:118: PRE-SAVE NOW (red) and SHOW MORE FEEDBACK (dark) sit in one centered row,
   68px above the frame bottom. The first view (994:645) has no buttons, so the whole row
   fades in at the scroll endpoint. */
.countdown-actions { position: absolute; z-index: 2; bottom: calc(68 * var(--u)); left: 50%; width: max-content; max-width: calc(100% - 32px); display: flex; column-gap: calc(12 * var(--u)); align-items: center; transform: translateX(-50%); white-space: nowrap; }
.release-presave, .feedback-more { display: flex; align-items: center; justify-content: center; padding: calc(16 * var(--u)) calc(20 * var(--u)); border: 0; color: #fff; font-size: calc(20 * var(--u)); font-weight: 500; line-height: 20px; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.release-presave { background: #e80000; }
.release-presave:focus-visible { outline: 2px solid #ef6700; outline-offset: 4px; }
.feedback-more { background: #171717; }
.countdown.is-feedback-stacked:not(.has-feedback-ended) .countdown-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
}
.countdown.is-feedback-stacked .countdown-actions {
  transition: opacity 350ms var(--motion-ease), transform 400ms var(--motion-ease), visibility 350ms;
}
/* Figma 996:1128: "ALL FEEDBACK" modal — a 100px title, then three 420px columns (44px apart)
   with a hairline down their left edge; notes stack 120px apart, the middle column starting
   52px lower. The dialog itself scrolls. */
.feedback-modal { position: fixed; margin: auto; width: min(1392px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 24px; border: 0; overflow: auto; background: #fff; color: #171717; }
.feedback-modal::backdrop { background: rgb(23 23 23 / 35%); }
/* The title and close sit in a sticky, full-bleed header; the columns scroll beneath it. */
.feedback-modal-head { position: sticky; top: -24px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: -24px -24px 44px; padding: 24px; background: #fff; }
.feedback-modal h3 { margin: 0; font-size: 100px; font-weight: 400; line-height: 100px; text-transform: uppercase; }
.feedback-modal .dialog-close { position: static; flex: 0 0 auto; }
.feedback-modal-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 420px)); column-gap: 44px; align-items: start; }
.feedback-modal-column { display: flex; flex-direction: column; gap: 120px; min-height: 100%; border-left: 1px solid #e8e8e8; }
.feedback-modal-column:nth-child(2) { padding-top: 52px; }
.feedback-modal-column .listener-note { position: relative; margin-left: -1px; }


/* Fixed end-state proportions from Figma 978:4457 (1440 × 1000). */
@media (min-width: 1001px) {
  .countdown {
    --signal-u: calc(100vw / 1440);
    --u: var(--signal-u);
    height: calc(1000 * var(--signal-u));
    min-height: 0;
    padding: calc(100 * var(--signal-u)) 0 0;
  }
  /* --signal-p scrubs from the first view (994:645: content centered, 280px PEMIMPI in a
     240px box, 56px to the copy) to the scroll endpoint (978:4457: label at 100px, 240px
     PEMIMPI in a 200px box, 24px to the copy). Static and reduced-motion views show the endpoint. */
  .countdown { --signal-p: 1; }
  .countdown-inner { width: calc(1156 * var(--signal-u)); --release-display-size: calc(280 * var(--signal-u)); transform: translateY(calc((1 - var(--signal-p)) * 152 * var(--signal-u))); }
  .signal-label { font-size: calc(24 * var(--signal-u)); line-height: calc(24 * var(--signal-u)); }
  .release-visual { height: calc((240 - 40 * var(--signal-p)) * var(--signal-u)); margin-top: calc(24 * var(--signal-u)); }
  /* PEMIMPI is centred in its box (993:69), so the sticker sits on the glyphs' centre at any progress. */
  .release-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #171717; line-height: 1; letter-spacing: calc(-8 * var(--signal-u)); transform: scale(calc(1 - 0.142857 * var(--signal-p))); }
  /* Helvetica Neue's caps sit ~2% below the line box centre; lift them onto the sticker. */
  .release-name > * { transform: translateY(-0.021em); }
  .release-sticker, .preview-action { padding: calc(20 * var(--signal-u)); font-size: calc(24 * var(--signal-u)); line-height: calc(24 * var(--signal-u)); }
  /* 993:65/75/77: the endpoint tightens the copy stack (44 / 24) and the timer (40px, 12 gap). */
  .countdown-footer { width: calc(488 * var(--signal-u)); margin-top: calc((56 - 12 * var(--signal-p)) * var(--signal-u)); gap: calc((32 - 8 * var(--signal-p)) * var(--signal-u)); }
  .release-summary { font-size: calc(20 * var(--signal-u)); line-height: calc(20 * var(--signal-u)); }
  .timer { width: calc(447 * var(--signal-u)); }
  .timer div { gap: calc((16 - 4 * var(--signal-p)) * var(--signal-u)); }
  .timer strong { font-size: calc((44 - 4 * var(--signal-p)) * var(--signal-u)); line-height: calc((44 - 4 * var(--signal-p)) * var(--signal-u)); }
  .timer span { font-size: calc(20 * var(--signal-u)); line-height: calc(20 * var(--signal-u)); }
  .feedback-columns { inset-inline: calc(24 * var(--signal-u)); }
  .feedback-wall .listener-note { padding-left: calc(16 * var(--signal-u)); }
  .feedback-wall .listener-note p { font-size: calc(20 * var(--signal-u)); line-height: calc(24 * var(--signal-u)); margin-bottom: calc(24 * var(--signal-u)); }
  .feedback-wall .listener-note cite { font-size: calc(20 * var(--signal-u)); line-height: calc(20 * var(--signal-u)); }
  .release-presave, .feedback-more { line-height: calc(20 * var(--signal-u)); }
}
.whats-next { position: relative; height: 1000px; overflow: hidden; isolation: isolate; background: #171717; color: #fff; }
.whats-next.is-scroll-stacked, .about.is-scroll-stacked { z-index: 0; }
/* Everything after a held panel stacks above it, since it is moved by transform while covered. */
.whats-next.is-scroll-stacked ~ *, .about.is-scroll-stacked ~ * { position: relative; z-index: 1; }
.about.is-scroll-stacked .about-title { will-change: transform; }
@media (min-width: 1001px) {
  /* Fill taller viewports while held, so the next panel does not peek in below. */
  .about.is-scroll-stacked { min-height: max(885px, 100svh); }
}
.radartivity.is-stack-cover { position: relative; z-index: 1; background: #fff; }

#radartivity-title.is-pinned-heading {
  position: relative;
  z-index: 3;
  isolation: isolate;
}
#radartivity-title.is-pinned-heading::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--heading-inset)) calc(-1 * var(--heading-inset)) -20px;
  z-index: -1;
  background: #fff;
  pointer-events: none;
}
.schedule-background { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.whats-next > h2 { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; justify-content: space-between; margin: 0; font-size: 100px; font-weight: 400; line-height: 100px; letter-spacing: -8px; }
.schedule-intro { position: absolute; top: 124px; right: 378px; width: 422px; margin: 0; color: #dadada; font-size: 20px; line-height: 24px; text-align: right; text-transform: uppercase; }
.schedule-month { position: absolute; left: 24px; top: 778px; display: flex; flex-direction: column; gap: 16px; }
.schedule-month span { color: #666; font-size: 62px; line-height: 62px; }
.schedule-month strong { font-size: 120px; font-weight: 400; line-height: 120px; }
.schedule-list { position: absolute; top: 472px; right: 24px; display: flex; width: 686px; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.schedule-list li { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 24px; border: 0; margin-top: calc(8 * var(--u)); position: relative; }
.schedule-list li::before { position: absolute; top: calc(-9 * var(--u)); left: 0; right: 0; height: 0.8px; background: rgb(255 255 255 / 30%); content: ''; }
.schedule-show { background: rgb(232 0 0 / 32%); }
.schedule-list time, .schedule-date { flex-shrink: 0; font-size: 20px; font-weight: 500; line-height: 20px; }
.schedule-list li > div { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.schedule-list h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 32px; font-weight: 500; line-height: 32px; white-space: nowrap; }
.schedule-list h3 small { font-size: 16px; font-weight: 400; line-height: 16px; }
.schedule-list p { margin: 0; font-size: 16px; line-height: 16px; }
.schedule-list p span { margin-inline: 8px; }
.schedule-list .workshop-copy { max-width: 457px; font-size: 14px; }
#radartivity-title { letter-spacing: 0; }
.activity-row { min-height: 0; grid-template-columns: 482px 1fr; align-items: start; gap: 108px; padding-block: 0; padding-bottom: 24px; margin-bottom: 24px; border: 0; position: relative; }
.activity-row:not(:last-child)::after { position: absolute; inset: auto 0 0; height: 1px; background: #e2e2e2; content: ''; }
.activity-row:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
.activity-meta { min-height: 270px; }
.activity-more { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 0; border: 0; background: none; color: #171717; font-size: 16px; font-weight: 500; line-height: 16px; cursor: pointer; }
.activity-more .ph { font-size: 16px; }
.activity-gallery-modal, .note-modal { position: fixed; margin: auto; padding: 24px; border: 0; max-height: calc(100dvh - 48px); overflow: auto; background: #fff; color: #171717; }
.activity-gallery-modal { width: min(1392px, calc(100vw - 48px)); max-width: none; }
.activity-gallery-modal::backdrop { background: rgb(23 23 23 / 35%); }
.note-modal::backdrop { background: transparent; }
.gallery-modal-heading { display: flex; min-height: 300px; flex-direction: column; justify-content: space-between; gap: 40px; text-transform: uppercase; }
.gallery-modal-heading > span { font-size: 20px; font-weight: 500; line-height: 20px; }
.gallery-modal-heading h3 { max-width: 701px; margin: 0 0 16px; font-size: clamp(32px, 6.25vw, 90px); font-weight: 400; line-height: 1; white-space: pre-line; }
.gallery-modal-heading p { margin: 0; color: #666; font-size: 16px; line-height: 20px; }
.gallery-modal-images { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.gallery-modal-image-row { display: flex; align-items: stretch; gap: 4px; }
.gallery-modal-image-row:nth-child(2) { justify-content: flex-end; }
.gallery-modal-image-row:nth-child(3) { justify-content: center; }
.activity-gallery-modal[data-activity="kamar"] .gallery-modal-image-row { gap: 0; }
.activity-gallery-modal[data-activity="blok"] .gallery-modal-image-row:nth-child(3) { justify-content: flex-end; }
.gallery-modal-image-row img { width: calc(var(--photo-width, 260) / 1344 * 100%); height: auto; aspect-ratio: var(--photo-width, 260) / 260; object-fit: cover; }
.gallery-modal-side { display: contents; }
.gallery-strip-item { display: block; flex: 0 0 auto; padding: 0; border: 0; background: #e8e8e8; cursor: pointer; overflow: hidden; opacity: 0.2; transition: opacity 400ms var(--motion-ease); }
.gallery-strip-item.is-active { opacity: 1; cursor: default; }
.gallery-strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-strip-item:focus-visible { outline: 2px solid #ef6700; outline-offset: 2px; opacity: 1; }
.gallery-stage-photo { margin: 0; overflow: hidden; background: #e8e8e8; }
.gallery-stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-modal-caption { display: flex; flex-direction: column; gap: 24px; text-transform: uppercase; }
.gallery-modal-caption h4 { margin: 0; font-size: 28px; font-weight: 500; line-height: 28px; }
.gallery-modal-caption p { margin: 0; color: #666; font-size: 16px; line-height: 20px; }
/* Figma 995:821 (landscape) / 995:855 (portrait), @BSD / BLOK-M "Show More": a 1392 × 900
   two-column modal. Left (560px): year, close, and the bottom-aligned title. Right: a 160px
   thumbnail column at 20% opacity (the active one opaque, held in the third slot) beside a
   stage that shows the active photo full width — 400px tall for landscape, 717px for
   portrait — with the caption pinned to the bottom. --gm-s scales the fixed layout to fit
   shorter or narrower viewports. */
@media (min-width: 1001px) {
  .activity-gallery-modal[data-layout="strip"] { --gm-s: 1; }
  /* Only while open: a closed <dialog> must keep the UA's display: none. */
  .activity-gallery-modal[data-layout="strip"][open] { display: grid; grid-template-columns: calc(560px * var(--gm-s)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: calc(12px * var(--gm-s)); box-sizing: border-box; height: calc(900px * var(--gm-s)); padding: 24px; overflow: hidden; }
  /* 995:891: the year sits 120px above the title in one bottom-aligned group; the close is top-left. */
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-heading { min-height: 0; height: 100%; justify-content: flex-end; gap: calc(120px * var(--gm-s)); }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-heading h3 { max-width: none; font-size: calc(90px * var(--gm-s)); }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-side { display: flex; align-items: stretch; gap: calc(16px * var(--gm-s)); height: 100%; overflow: clip; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-images { flex: 0 0 calc(160px * var(--gm-s)); justify-content: flex-start; width: calc(160px * var(--gm-s)); height: 100%; margin: 0; gap: 4px; transform: translateY(var(--strip-y, 0px)); transition: transform 600ms var(--motion-ease); }
  .activity-gallery-modal[data-layout="strip"] .gallery-strip-item { width: calc(160px * var(--gm-s)); height: calc(160px * var(--gm-s)); }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-images.is-jumping, .activity-gallery-modal[data-layout="strip"] .gallery-modal-images.is-jumping .gallery-strip-item { transition: none; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-stage { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; }
  .activity-gallery-modal[data-layout="strip"] .gallery-stage-photo { width: 100%; height: calc(400px * var(--gm-s)); transition: height 600ms var(--motion-ease); }
  .activity-gallery-modal[data-layout="strip"] .gallery-stage-photo.is-portrait { height: calc(717px * var(--gm-s)); }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-caption { gap: calc(24px * var(--gm-s)); }
  .activity-gallery-modal[data-layout="strip"] .dialog-close { top: 24px; right: auto; left: 24px; width: 20px; height: 20px; }
  .activity-gallery-modal[data-layout="strip"] .dialog-close img { width: 20px; height: 20px; }
}
@media (max-width: 1000px) {
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-side { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-stage { display: flex; flex-direction: column; gap: 16px; order: -1; }
  .activity-gallery-modal[data-layout="strip"] .gallery-stage-photo { width: 100%; aspect-ratio: 4 / 3; }
  .activity-gallery-modal[data-layout="strip"] .gallery-stage-photo.is-portrait { aspect-ratio: 3 / 4; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-images { flex-direction: row; gap: 4px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-images::-webkit-scrollbar { display: none; }
  .activity-gallery-modal[data-layout="strip"] .gallery-strip-item { width: 96px; height: 96px; }
  .activity-gallery-modal[data-layout="strip"] .gallery-strip-item:not([data-copy="1"]) { display: none; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-caption { gap: 8px; }
  .activity-gallery-modal[data-layout="strip"] .gallery-modal-caption h4 { font-size: 22px; line-height: 24px; }
}
.dialog-close { position: absolute; top: 20px; right: 20px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; background: #fff; cursor: pointer; }
.dialog-close img { width: 24px; height: 24px; }
.note-modal { width: min(708px, calc(100vw - 32px)); max-width: none; }
.note-modal h3 { margin: 0 0 62px; font-size: 32px; font-weight: 500; line-height: 32px; }
.note-form { display: flex; flex-direction: column; gap: 16px; }
.note-form label { font-size: 16px; font-weight: 500; line-height: 20px; }
.note-form input, .note-form textarea { width: 100%; min-width: 0; padding: 0 0 6px; border: 0; border-bottom: 1px solid #e2e2e2; border-radius: 0; background: #fff; color: #171717; font-size: 16px; line-height: 16px; resize: vertical; }
.note-form input::placeholder, .note-form textarea::placeholder { color: #666; opacity: 1; }
.note-form button { margin-top: 8px; padding: 16px; border: 0; background: #171717; color: #fff; font-size: 16px; font-weight: 500; line-height: 16px; cursor: pointer; }
.note-status { margin: 0; font-size: 14px; }
.note-status:not(:empty) { margin-top: 16px; }
body.dialog-open { overflow: hidden; }

/* Footer — Figma 938:2006, 1440 × 1000. */
@media (min-width: 1001px) {
  .contact { --footer-u: calc(100vw / 1440); height: calc(1000 * var(--footer-u)); min-height: 0; padding: 0; }
  .contact > h2 { position: absolute; top: calc(-19 * var(--footer-u)); left: 50%; width: max-content; margin: 0; padding: 0; transform: translateX(-50%); font-size: calc(244 * var(--footer-u)); line-height: calc(200 * var(--footer-u)); letter-spacing: 0; }
  .contact .contact-intro { position: absolute; top: calc(435 * var(--footer-u)); left: calc(24 * var(--footer-u)); width: calc(936 * var(--footer-u)); margin: 0; font-size: calc(62 * var(--footer-u)); line-height: calc(62 * var(--footer-u)); letter-spacing: 0; }
  .contact-links { position: absolute; right: 0; bottom: 0; left: 0; }
  .contact .contact-grid { border: calc(1 * var(--footer-u)) solid rgb(255 255 255 / 32%); }
  .contact .contact-grid a { min-width: 0; min-height: 0; height: calc(278 * var(--footer-u)); padding: calc(24 * var(--footer-u)); }
  .contact .contact-grid a + a { border-left-width: calc(1 * var(--footer-u)); }
  .contact-grid > a > span, .social-grid > a > span { font-size: calc(20 * var(--footer-u)); line-height: calc(20 * var(--footer-u)); }
  .contact .contact-grid strong { font-size: calc(40 * var(--footer-u)); line-height: calc(40 * var(--footer-u)); }
  .contact .social-grid { margin: 0; border: calc(1 * var(--footer-u)) solid rgb(255 255 255 / 32%); }
  .contact .social-grid a { min-width: 0; min-height: 0; padding: calc(24 * var(--footer-u)); border-bottom-width: calc(1 * var(--footer-u)); }
  .contact .social-grid a + a { border-left-width: calc(1 * var(--footer-u)); }
  .contact .social-grid strong { font-size: calc(24 * var(--footer-u)); line-height: calc(24 * var(--footer-u)); }
}

@media (min-width: 1001px) {
  :root { --u: calc(100vw / 1440); }
  .site-header { min-height: calc(130 * var(--u)); padding: calc(24 * var(--u)); }
  .brand { width: calc(71.667 * var(--u)); height: calc(20 * var(--u)); }
  .site-nav { position: absolute; top: calc(24 * var(--u)); left: calc(50% + calc(13 * var(--u))); gap: calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: normal; }
  .nav-column { min-width: calc(200 * var(--u)); gap: calc(12 * var(--u)); }
  .nav-column:last-child { min-width: 0; }
  .join-link { font-size: calc(16 * var(--u)); text-decoration: none; }
  .nav-coming-soon { gap: calc(8 * var(--u)); }
  .nav-coming-soon small, .track-list small { padding: calc(4 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
  .hero { height: calc(912 * var(--u)); }
  .hero-word { font-size: calc(246 * var(--u)); line-height: calc(260 * var(--u)); bottom: calc(-46 * var(--u)); left: calc(-21 * var(--u)); }
  .hero-card { width: calc(498 * var(--u)); height: calc(404 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) 0; }
  .hero-manifesto { font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); }
  .hero-intro { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .about { min-height: calc(885 * var(--u)); padding: calc(32 * var(--u)); }
  .section-label { margin-bottom: calc(32 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .about-copy { width: calc(798 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); }
  .member-strip { position: absolute; left: calc(32 * var(--u)); top: calc(371 * var(--u)); margin: 0; }
  .member-strip figure { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
  .about-title { right: calc(32 * var(--u)); bottom: calc(32 * var(--u)); width: calc(659 * var(--u)); font-size: calc(100 * var(--u)); line-height: calc(100 * var(--u)); }
  .tracks { height: calc(1000 * var(--u)); }
  .tracks-title { top: calc(24 * var(--u)); left: calc(24 * var(--u)); font-size: calc(120 * var(--u)); line-height: calc(108 * var(--u)); letter-spacing: calc(-8 * var(--u)); }
  .tracks-copy { top: calc(676 * var(--u)); bottom: auto; left: calc(24 * var(--u)); width: calc(439 * var(--u)); }
  .tracks-copy h3 { margin-bottom: calc(24 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); }
  .tracks-copy p { margin-bottom: calc(72 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .tracks-copy a { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .track-list { width: calc(668 * var(--u)); }
  .track-list li { min-height: calc(76 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); --track-badge-gap: calc(32 * var(--u)); }
  .track-list li:nth-child(1), .track-list li:nth-child(7) { --track-badge-gap: calc(10 * var(--u)); }
  .track-list .is-current { --track-badge-gap: calc(4 * var(--u)); gap: calc(32 * var(--u)); }
  .track-list li:first-child { min-width: calc(167 * var(--u)); }
  .track-list span { font-size: calc(52 * var(--u)); line-height: calc(52 * var(--u)); letter-spacing: calc(-4 * var(--u)); }
  .track-status { left: calc(calc(24 * var(--u)) - var(--track-badge-space, 0px)); }
  .track-list .is-current small { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .track-spotify { left: calc(100% + calc(4 * var(--u))); padding: calc(4 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); }
  .countdown { min-height: calc(1200 * var(--u)); padding-top: calc(88 * var(--u)); }
  .countdown-inner { --release-display-size: calc(280 * var(--u)); width: calc(1156 * var(--u)); }
  .signal-label { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .release-visual { height: calc(200 * var(--u)); margin-top: calc(24 * var(--u)); }
  .release-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #171717; line-height: 1; letter-spacing: calc(-8 * var(--u)); transform: scale(0.857143); }
  .release-sticker { padding: calc(20 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .preview-action { padding: calc(20 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .preview-action .ph, .preview-note .ph { font-size: calc(24 * var(--u)); flex: 0 0 auto; }
  .preview-control, .preview-note { gap: calc(10 * var(--u)); }
  .preview-note { padding: calc(16 * var(--u)); border-width: calc(4 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .has-preview-finished .release-sticker { padding: calc(20 * var(--u)) calc(40 * var(--u)); }
  :is(.has-preview-finished, .has-preview-paused) .preview-action { padding: calc(16 * var(--u)); border-width: calc(4 * var(--u)); }
  .countdown-footer { width: calc(488 * var(--u)); margin-top: calc(24 * var(--u)); gap: calc(32 * var(--u)); }
  .release-summary { font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .timer { width: calc(447 * var(--u)); }
  .timer div { gap: calc(16 * var(--u)); }
  .timer strong { font-size: calc(44 * var(--u)); line-height: calc(44 * var(--u)); }
  .timer span { font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .feedback-columns { inset-inline: calc(24 * var(--u)); }
  .listener-note { padding-left: calc(16 * var(--u)); }
  .listener-note p { margin-bottom: calc(24 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .listener-note cite { font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .release-presave, .feedback-more { line-height: calc(20 * var(--u)); }
  .radartivity { padding: calc(100 * var(--u)) calc(24 * var(--u)); }
  #radartivity-title { margin-bottom: calc(60 * var(--u)); font-size: calc(120 * var(--u)); line-height: calc(120 * var(--u)); }
  .radartivity sup { margin-left: calc(8 * var(--u)); font-size: calc(62 * var(--u)); line-height: calc(62 * var(--u)); }
  .activity-row { grid-template-columns: calc(482 * var(--u)) 1fr; gap: calc(108 * var(--u)); padding-bottom: calc(24 * var(--u)); margin-bottom: calc(24 * var(--u)); }
  .activity-row:last-child { margin-bottom: 0; padding-bottom: 0; }
  .activity-meta { min-height: calc(270 * var(--u)); }
  .activity-meta time, .activity-meta h3 { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .activity-meta h3 { margin-bottom: calc(16 * var(--u)); }
  .activity-meta p { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .activity-more { gap: calc(8 * var(--u)); margin-top: calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .activity-more .ph { font-size: calc(16 * var(--u)); }
  .activity-gallery { width: calc(802 * var(--u)); height: calc(270 * var(--u)); gap: calc(8 * var(--u)); }
}

@media (max-width: 1000px) {
  .tracks { height: 1300px; }
  .hero-word { letter-spacing: -0.04em; line-height: 1; }
  .hero-card { padding-bottom: 0; }
  .about-copy { line-height: 1.3; }
  .track-artwork { width: 130px; height: 130px; right: auto; left: -90px; }
  .countdown { padding-top: 72px; }
  .preview-action, .preview-note { font-size: 18px; line-height: 20px; }
  .preview-action { padding: 16px; }
  .preview-note { padding: 12px; }
  .has-preview-finished .release-sticker { padding: 16px; }
  .feedback-wall .listener-note p { font-size: 16px; line-height: 20px; text-align: left; }
  .release-presave, .feedback-more { padding: 14px 18px; font-size: 18px; line-height: 20px; }
  .feedback-modal-head { margin-bottom: 32px; }
  .feedback-modal h3 { font-size: 64px; line-height: 64px; }
  .feedback-modal-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .feedback-modal-column { gap: 64px; }
  .feedback-modal-column:nth-child(2) { padding-top: 32px; }
  .whats-next { height: 1000px; }
  .whats-next > h2 { font-size: 10vw; line-height: 1; letter-spacing: -0.06em; }
  .schedule-intro { top: 130px; right: 24px; width: min(422px, calc(100% - 48px)); }
  .schedule-month { top: 280px; }
  .schedule-month span { font-size: 40px; line-height: 1; }
  .schedule-month strong { font-size: 80px; line-height: 1; }
  .schedule-list { top: 480px; width: calc(100% - 48px); }
  .activity-row { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 24px; }
  .activity-meta { min-height: 270px; }
  .activity-meta h3 { overflow-wrap: anywhere; font-size: 20px; }
  .activity-gallery { width: 100%; height: 270px; }
  .gallery-modal-heading { min-height: 240px; }
}
@media (max-width: 620px) {
  .tracks { height: 1180px; }
  .hero-word { bottom: 342px; }
  .release-preview-group { flex-direction: column; }
  .preview-actions { pointer-events: auto; }
  .preview-action { padding: 12px; opacity: 1; visibility: visible; transform: none; font-size: 14px; line-height: 16px; }
  .preview-note { padding: 8px; font-size: 12px; line-height: 16px; }
  .preview-note .ph { font-size: 18px; }
  .has-preview-finished .release-sticker { padding: 12px; }
  :is(.has-preview-finished, .has-preview-paused) .preview-action { padding: 8px; }
  .track-release-meta { position: relative; right: auto; }
  .track-release-meta > small { opacity: 1; }
  .track-list.is-enhanced .is-current:hover .track-release-meta { transform: none; }
  .track-artwork { width: 100px; height: 100px; left: 0; bottom: 100%; }
  .countdown { min-height: 1050px; }
  .feedback-wall { height: 1050px; }
  .feedback-columns { inset-inline: 20px; }
  .feedback-wall .listener-note { width: 46%; }
  .feedback-wall :is(.note-5, .note-6, .note-7) { display: none; }
  .feedback-wall .note-extra {
    top: calc(var(--note-mobile-top) * 1px);
    left: var(--note-mobile-left);
  }
  .note-1 { top: 620px; }
  .note-2 { top: 660px; left: 52%; }
  .note-3 { top: 840px; }
  .note-4 { top: 880px; left: 52%; }
  .countdown-actions { bottom: 48px; column-gap: 8px; }
  .release-presave, .feedback-more { padding: 12px 14px; font-size: 14px; line-height: 20px; }
  .feedback-modal { width: calc(100vw - 24px); padding: 20px; }
  .feedback-modal-head { top: -20px; margin: -20px -20px 24px; padding: 20px; }
  .feedback-modal h3 { font-size: 13vw; line-height: 1; }
  .feedback-modal-columns { grid-template-columns: 1fr; }
  .feedback-modal-column { gap: 40px; }
  .feedback-modal-column:nth-child(2) { padding-top: 0; }
  .feedback-modal .listener-note p { font-size: 16px; line-height: 20px; text-align: left; }
  .whats-next { height: 1030px; }
  .schedule-list { top: 450px; right: 20px; width: calc(100% - 40px); }
  .schedule-list li { padding: 20px 8px; gap: 12px; }
  .schedule-list h3 { font-size: 22px; line-height: 26px; flex-wrap: wrap; justify-content: flex-end; }
  .schedule-list h3 small { font-size: 12px; }
  .schedule-list time, .schedule-date { font-size: 14px; }
  .schedule-list p { font-size: 13px; line-height: 16px; }
  .schedule-list .workshop-copy { font-size: 12px; }
  .schedule-list p span { margin-inline: 3px; }
  .activity-row { grid-template-columns: 1fr; gap: 24px; }
  .activity-meta { min-height: 180px; }
  .activity-gallery { width: 100%; height: auto; aspect-ratio: 446 / 300; overflow: hidden; }
  .activity-more { min-height: 32px; }
  .gallery-modal-heading { min-height: 180px; }
  .activity-gallery-modal { width: calc(100vw - 24px); padding: 20px; }
  .gallery-modal-images { gap: 4px; margin-top: 24px; }
  .gallery-modal-heading h3 { font-size: 8vw; }
  .gallery-modal-heading p { font-size: 13px; line-height: 17px; }
  .note-modal h3 { margin-bottom: 40px; }
}
@media (hover: none) {
  .activity-photo img { opacity: 1; transform: none; }
}
.tracks.is-stacked {
  height: 100svh;
  min-height: 0;
}
.tracks.is-stacked .track-list li:is(:hover, :focus-visible, :has(:focus-visible)) { opacity: 1 !important; }
/* Figma 941:2449 / 941:2236: preserve the 1440 × 1000 proportions,
   fitting the pinned composition to shorter desktop viewports. The background
   covers the full viewport; on wider screens it must lose some height, so it is
   anchored towards the bottom to keep the runner and the track list intact and
   crop the skyline instead. */
@media (min-width: 1001px) {
  .tracks { --u: calc(100vw / 1440); height: calc(1000 * var(--u)); }
  .tracks.is-stacked { --u: min(calc(100vw / 1440), calc(100svh / 1000)); height: 100svh; }
  /* What's Next scales the same 1440 × 1000 frame (Figma 941:2236 / 995:955). */
  .whats-next { --u: calc(100vw / 1440); height: calc(1000 * var(--u)); }
  /* Figma 995:955/957: while pinned the section fills the viewport at its true (width-based)
     scale; the list keeps its real size and reveals row by row as it scrolls up. */
  .whats-next.is-scroll-stacked { height: 100svh; }
  .whats-next.is-scroll-stacked .schedule-month { top: auto; bottom: calc(24 * var(--u)); }
  .whats-next.is-scroll-stacked .schedule-list { will-change: transform; }
  .whats-next > h2 { top: calc(24 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); font-size: calc(100 * var(--u)); line-height: calc(100 * var(--u)); letter-spacing: calc(-8 * var(--u)); }
  .schedule-intro { top: calc(124 * var(--u)); right: calc(378 * var(--u)); width: calc(422 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .schedule-month { top: calc(778 * var(--u)); left: calc(24 * var(--u)); gap: calc(16 * var(--u)); }
  .schedule-month span { font-size: calc(62 * var(--u)); line-height: calc(62 * var(--u)); }
  .schedule-month strong { font-size: calc(120 * var(--u)); line-height: calc(120 * var(--u)); }
  .schedule-list { top: calc(472 * var(--u)); right: calc(24 * var(--u)); width: calc(686 * var(--u)); gap: calc(8 * var(--u)); }
  .schedule-list li { padding: calc(24 * var(--u)); gap: calc(24 * var(--u)); }
  .schedule-list time, .schedule-date { font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .schedule-list li > div { gap: calc(8 * var(--u)); }
  .schedule-list h3 { gap: calc(8 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); }
  .schedule-list h3 small { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .schedule-list p { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .schedule-list p span { margin-inline: calc(8 * var(--u)); }
  .schedule-list .workshop-copy { max-width: calc(457 * var(--u)); font-size: calc(14 * var(--u)); }
  .tracks.is-stacked .tracks-background { object-position: 50% 70%; }
  .tracks .tracks-title { top: calc(24 * var(--u)); left: calc(24 * var(--u)); font-size: calc(120 * var(--u)); font-weight: 400; line-height: calc(108 * var(--u)); letter-spacing: calc(-8 * var(--u)); }
  .tracks .tracks-copy { top: auto; bottom: calc(24 * var(--u)); left: calc(24 * var(--u)); width: calc(439 * var(--u)); }
  .tracks .tracks-copy h3 { margin-bottom: calc(24 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); white-space: nowrap; }
  .tracks .tracks-copy p { margin-bottom: calc(72 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); }
  .tracks .tracks-copy a { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .tracks .track-list { bottom: 0; width: calc(668 * var(--u)); }
  .tracks .track-list li { --track-badge-gap: calc(32 * var(--u)); min-height: calc(76 * var(--u)); height: calc(76 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); }
  .tracks .track-list li:nth-child(1), .tracks .track-list li:nth-child(7) { --track-badge-gap: calc(10 * var(--u)); }
  .tracks .track-list li:first-child { min-width: calc(167 * var(--u)); }
  .tracks .track-list li:nth-child(7) { min-width: calc(590 * var(--u)); }
  .tracks .track-list li > span { font-size: calc(52 * var(--u)); font-weight: 400; line-height: calc(52 * var(--u)); letter-spacing: calc(-4 * var(--u)); }
  .tracks .track-status { left: calc(24 * var(--u) - var(--track-badge-space, 0px)); padding: calc(4 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); }
  .tracks .track-release-meta { flex-direction: row; }
  .tracks .track-release-meta > small { padding: 0; font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .tracks .track-spotify { left: calc(100% + 4 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); }
}
@media (max-width: 1000px) {
  .tracks.is-stacked .tracks-title { top: 20px; left: 20px; font-size: clamp(32px, 7vw, 64px); }
  .tracks.is-stacked .tracks-copy { top: 20px; right: 20px; bottom: auto; left: auto; width: 44%; }
  .tracks.is-stacked .tracks-copy h3 { font-size: clamp(14px, 2.8vw, 22px); margin-bottom: 12px; }
  .tracks.is-stacked .tracks-copy p { font-size: 12px; margin-bottom: 12px; }
  .tracks.is-stacked .track-list { bottom: 0; width: 100%; }
  .tracks.is-stacked .track-list li { min-height: 0; height: min(56px, calc((100svh - 260px) / 8)); padding: 4px 20px; }
  .tracks.is-stacked .track-list li > span { font-size: clamp(14px, min(5.2vw, calc((100svh - 324px) / 8)), 36px); letter-spacing: -0.06em; }
  .tracks.is-stacked .track-list small { font-size: 10px; line-height: 12px; }
  .tracks.is-stacked .track-release-meta { gap: 4px; }
}
@media (max-width: 1000px) and (max-height: 600px) {
  .tracks.is-stacked .tracks-copy p { display: none; }
  .tracks.is-stacked .track-list li { height: min(40px, calc((100svh - 180px) / 8)); padding-block: 2px; }
  .tracks.is-stacked .track-list li > span { font-size: clamp(12px, min(5.2vw, calc((100svh - 212px) / 8)), 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .track-artwork, .activity-photo img, .preview-action, .release-preview-group { transition: none; }
}