/* ==========================================================================
   AMSP 04.65 — Listening Room 002 · The Magnetic Instrument
   Announcer direction (Design Review 001), built on the v0.1.3 architecture.

   Containment: every selector is scoped to .mi (the instrument) or to
   .room002-* (this page). This file is linked from /listening/002/ only.
   Colours and type come from the publication tokens in styles.css; the
   fallbacks below only matter if the instrument is ever mounted elsewhere.
   ========================================================================== */

.mi{
  --mi-ink:var(--ink,#0A0A0A);
  --mi-lemon:var(--signal,#F0E20F);
  --mi-paper:var(--paper,#EBE7DC);
  --mi-white:var(--warm-white,#F7F5F0);
  --mi-rain:var(--rain,#B8D9E5);
  --mi-panel:#121211;
  --mi-bezel:#1E1E1C;
  --mi-dim:rgba(247,245,240,.74);
  --mi-hair:rgba(247,245,240,.18);
  --mi-serif:var(--display,"Libre Baskerville",Georgia,serif);
  --mi-sans:var(--body,"Montserrat",Arial,sans-serif);
  --mi-mono:var(--mono,"IBM Plex Mono",Consolas,monospace);
  --mi-key:72px;
  --mi-disc:136px;
  --mi-radius:22px;
  position:relative;
  color:var(--mi-white);
  background:var(--mi-ink);
  border-radius:calc(var(--mi-radius) + 10px);
  padding:clamp(14px,2.6vw,28px);
  box-shadow:0 0 0 1px #000,0 18px 46px rgba(10,10,10,.28);
  font-family:var(--mi-sans);
}
.mi *,.mi *::before,.mi *::after{box-sizing:border-box}
.mi [hidden]{display:none!important}
.mi-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

:where(.mi) a{color:inherit}
.mi :focus-visible{outline:3px solid var(--mi-lemon);outline-offset:3px}

/* ---- Title row --------------------------------------------------------- */
.mi-title{
  margin:0 0 clamp(12px,2vw,18px);
  font:600 .8125rem/1.3 var(--mi-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mi-lemon);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
}
.mi-title__count{color:var(--mi-dim);letter-spacing:.1em}

/* ---- No-JS fallback (also the pre-hydration state) ---------------------- */
.mi-fallback__meta,.mi-fallback__note{font:400 .8125rem/1.5 var(--mi-mono);letter-spacing:.06em;color:var(--mi-dim);margin:0 0 12px}
.mi-fallback__note{margin:16px 0 0}
.mi-fallback__list{list-style:none;margin:0;padding:0}
.mi-fallback__list li{padding:12px 0;border-top:1px solid var(--mi-hair);font-size:1rem;line-height:1.4}
.mi-fallback__n,.mi-fallback__dur{font:400 .8125rem/1 var(--mi-mono);color:var(--mi-dim)}
.mi-fallback__artist{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.mi-fallback__title{font-family:var(--mi-serif);font-style:italic;color:var(--mi-lemon)}
.mi-fallback__list a{display:inline-flex;min-height:44px;align-items:center;font:600 .8125rem/1 var(--mi-mono);letter-spacing:.08em;text-transform:uppercase;margin-left:6px}

/* ---- Layout ------------------------------------------------------------ */
.mi-body{display:grid;gap:clamp(22px,3vw,34px)}
.mi-deck{display:grid;gap:clamp(14px,2.2vw,22px)}
.mi-deck__top{min-width:0}
.mi-deck__main,.mi-deck__side{display:grid;gap:clamp(12px,2vw,18px);align-content:start;min-width:0}
.mi-lower{display:grid;gap:clamp(22px,3vw,34px)}

/* ---- Announcer display --------------------------------------------------- */
.mi-display{
  position:relative;
  background:var(--mi-panel);
  border:clamp(8px,1.4vw,14px) solid var(--mi-bezel);
  border-radius:var(--mi-radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 18px 40px rgba(0,0,0,.55);
  padding:clamp(16px,3vw,34px) clamp(16px,3vw,36px) clamp(18px,3vw,30px);
  min-height:clamp(260px,46vw,430px);
  display:grid;align-content:space-between;gap:clamp(12px,2vw,20px);
  overflow:hidden;
  container-type:inline-size;
}
.mi-display>*,.mi-display__names,.mi-display__meta{min-width:0}
.mi-display__top{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:center}
.mi-side{
  font:600 .8125rem/1.2 var(--mi-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mi-ink);background:var(--mi-lemon);padding:6px 10px;border-radius:999px;
}
.mi-side[data-side="B"]{background:var(--mi-white)}
.mi-side[data-side="C"]{background:var(--mi-rain)}
.mi-tag{font:400 .8125rem/1.2 var(--mi-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mi-dim)}

.mi-artist{
  margin:0;
  font-family:var(--mi-sans);font-weight:800;
  font-size:clamp(3rem,12.5vw,9rem);
  font-size:clamp(3rem,15cqi,9rem);
  line-height:.9;letter-spacing:-.025em;text-transform:uppercase;
  color:var(--mi-white);
  overflow-wrap:break-word;hyphens:manual;
  text-wrap:balance;
}
.mi-artist[data-fit="1"]{font-size:var(--mi-fit-size)}

.mi-ticker{position:relative;overflow:hidden;white-space:nowrap;padding:.08em 0 .14em;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
.mi-ticker[data-overflow="0"],.mi-ticker[data-phase="done"]{-webkit-mask-image:none;mask-image:none}
.mi-ticker__track{display:inline-block;will-change:transform}
.mi-title-line{
  font-family:var(--mi-serif);font-style:italic;font-weight:400;
  font-size:clamp(2rem,7vw,4.75rem);line-height:1.08;color:var(--mi-lemon);
}
.mi-qualifier{
  margin:0;font:400 .9375rem/1.45 var(--mi-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mi-white);
  display:flex;flex-wrap:wrap;gap:2px 12px;
}
.mi-release{margin:4px 0 0;font:400 .8125rem/1.45 var(--mi-mono);letter-spacing:.06em;color:var(--mi-dim)}
.mi-qualifier span+span::before{content:"·";margin-right:12px;color:var(--mi-dim)}
.mi-flags{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.mi-flag{display:inline-block;font:600 .8125rem/1.2 var(--mi-mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:4px 8px;border-radius:4px;color:var(--mi-rain)}
.mi-relation{margin:0;font:500 1rem/1.45 var(--mi-sans);color:var(--mi-white);max-width:46em}
.mi-relation small{display:block;font:400 .8125rem/1.45 var(--mi-mono);letter-spacing:.06em;color:var(--mi-dim);margin-top:4px}
.mi-status{
  margin:0;padding-top:clamp(10px,1.6vw,14px);border-top:1px dashed var(--mi-hair);
  font:600 .8125rem/1.35 var(--mi-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mi-lemon);
  display:flex;align-items:center;gap:10px;
}
.mi-status::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 0 3px rgba(240,226,15,.18)}
.mi-status[data-state="opened"]{color:var(--mi-white)}
.mi-status[data-state="unavailable"]{color:var(--mi-dim)}

/* ---- Controls: PREV · LISTEN · NEXT ------------------------------------ */
.mi-controls{display:grid;grid-template-columns:var(--mi-key) minmax(var(--mi-disc),1fr) var(--mi-key);align-items:center;justify-items:center;gap:12px}
.mi-key{
  width:var(--mi-key);height:var(--mi-key);border-radius:18px;
  border:2px solid var(--mi-white);background:transparent;color:var(--mi-white);
  display:grid;place-items:center;cursor:pointer;
  font:700 .8125rem/1 var(--mi-mono);letter-spacing:.08em;
  transition:background-color .15s ease,color .15s ease,transform .1s ease;
}
.mi-key svg{width:28px;height:28px;display:block}
.mi-key span{display:block;margin-top:2px}
.mi-key:hover{background:var(--mi-white);color:var(--mi-ink)}
.mi-key:active{transform:translateY(2px)}
.mi-listen{
  width:var(--mi-disc);height:var(--mi-disc);border-radius:50%;
  display:grid;place-items:center;align-content:center;gap:4px;text-align:center;text-decoration:none;
  background:var(--mi-lemon);color:var(--mi-ink);
  box-shadow:inset 0 -6px 0 rgba(10,10,10,.18),0 0 0 6px rgba(240,226,15,.16);
  font:800 1.375rem/1 var(--mi-sans);letter-spacing:.06em;text-transform:uppercase;
  transition:transform .12s ease,box-shadow .12s ease;
}
.mi-listen small{font:600 .8125rem/1.1 var(--mi-mono);letter-spacing:.08em}
.mi-listen:hover{transform:scale(1.03)}
.mi-listen:active{transform:scale(.98);box-shadow:inset 0 4px 0 rgba(10,10,10,.2),0 0 0 6px rgba(240,226,15,.16)}
.mi-listen[data-kind="open"]{background:transparent;color:var(--mi-white);border:3px solid var(--mi-white);box-shadow:none;font-size:1.0625rem}
.mi-listen[data-kind="open"]:hover{background:var(--mi-white);color:var(--mi-ink)}
.mi-listen[aria-disabled="true"]{background:transparent;color:var(--mi-dim);border:3px dashed var(--mi-hair);box-shadow:none;cursor:not-allowed;transform:none}
.mi-listen__ext{font-size:.8125rem;font-family:var(--mi-mono);font-weight:600}

.mi-providers{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;justify-content:center;margin:0;font:400 .8125rem/1.4 var(--mi-mono);letter-spacing:.06em;color:var(--mi-dim)}
.mi-providers a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--mi-white);text-transform:uppercase;letter-spacing:.08em}
.mi-watch{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px}
.mi-watch a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--mi-rain);color:var(--mi-rain);text-decoration:none;font:700 .875rem/1 var(--mi-mono);letter-spacing:.12em;text-transform:uppercase}
.mi-watch a:hover{background:var(--mi-rain);color:var(--mi-ink)}
.mi-watch small{font:400 .8125rem/1.3 var(--mi-mono);color:var(--mi-dim);letter-spacing:.04em}
.mi-return{display:flex;justify-content:center}
.mi-return button{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--mi-lemon);background:transparent;color:var(--mi-lemon);font:700 .875rem/1 var(--mi-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mi-return button:hover{background:var(--mi-lemon);color:var(--mi-ink)}
.mi-hint{margin:0;text-align:center;font:400 .8125rem/1.4 var(--mi-mono);color:var(--mi-dim);letter-spacing:.04em}
@media (hover:none){.mi-hint__keys{display:none}}

/* ---- Visual window ------------------------------------------------------- */
.mi-window{display:grid;gap:10px;min-width:0}
.mi-stage{
  position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;
  border-radius:var(--mi-radius);background:#161614;border:1px solid var(--mi-hair);
  isolation:isolate;
}
.mi-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mi-pause{grid-column:1/-1}
@media (min-width:600px){.mi-modes{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.mi-pause{grid-column:auto}}
.mi-mode,.mi-pause{
  min-height:48px;border-radius:12px;border:1px solid var(--mi-hair);background:transparent;color:var(--mi-white);
  font:600 .8125rem/1 var(--mi-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0 6px;
}
.mi-mode[aria-pressed="true"]{background:var(--mi-white);color:var(--mi-ink);border-color:var(--mi-white)}
.mi-pause{padding:0 12px}
.mi-pause[aria-pressed="true"]{border-color:var(--mi-lemon);color:var(--mi-lemon)}
.mi-stage__caption{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;margin:0;font:400 .8125rem/1.35 var(--mi-mono);letter-spacing:.06em;color:var(--mi-white);text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* ARTWORK — typographic sleeve; no image until rights exist */
.mi-r-artwork{position:absolute;inset:0;display:grid;align-content:space-between;padding:clamp(18px,4vw,34px);background:var(--mi-paper);color:var(--mi-ink)}
.mi-r-artwork__label{font:600 .8125rem/1.3 var(--mi-mono);letter-spacing:.12em;text-transform:uppercase;color:#4C5651}
.mi-r-artwork__release{font-family:var(--mi-serif);font-weight:700;font-size:clamp(1.75rem,6vw,3.5rem);line-height:1.02;margin:0;overflow-wrap:break-word}
.mi-r-artwork__artist{font:800 clamp(1rem,2.4vw,1.375rem)/1.1 var(--mi-sans);text-transform:uppercase;letter-spacing:.02em;margin:10px 0 0}
.mi-r-artwork__year{font:400 .9375rem/1 var(--mi-mono);letter-spacing:.1em}
.mi-r-artwork__yearline{margin:10px 0 0}
.mi-r-artwork__rule{height:10px;background:var(--mi-lemon);border-top:1px solid var(--mi-ink);border-bottom:1px solid var(--mi-ink)}

/* ATMOSPHERE — slow colour fields from the publication palette */
.mi-r-atmos{position:absolute;inset:0;background:var(--mi-ink);overflow:hidden}
.mi-r-atmos__field{position:absolute;width:85%;aspect-ratio:1;border-radius:50%;filter:blur(36px);opacity:.75;mix-blend-mode:screen;animation:mi-drift 38s ease-in-out infinite alternate}
.mi-r-atmos__field:nth-child(1){background:var(--mi-lemon);left:-18%;top:-10%}
.mi-r-atmos__field:nth-child(2){background:var(--mi-rain);right:-25%;bottom:-12%;animation-duration:46s;animation-delay:-12s}
.mi-r-atmos__field:nth-child(3){background:#FF7047;left:20%;bottom:-40%;width:60%;opacity:.38;animation-duration:54s;animation-delay:-24s}
.mi-r-atmos[data-paused="1"] .mi-r-atmos__field{animation-play-state:paused}
@keyframes mi-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(12%,8%,0) scale(1.12)}
  100%{transform:translate3d(-6%,14%,0) scale(.94)}
}

/* WAVEFORM — duration ruler only; no audio analysis exists */
.mi-r-wave{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(16px,4vw,30px);background:#0F0F0E}
.mi-r-wave svg{width:100%;height:auto;display:block;overflow:visible}
.mi-r-wave__total{font:800 clamp(2.5rem,9vw,5rem)/1 var(--mi-sans);color:var(--mi-lemon);margin:0 0 12px;letter-spacing:-.02em}

/* ---- Other signals ------------------------------------------------------- */
.mi-signals h3,.mi-sequence h3{
  margin:0 0 12px;font:600 .8125rem/1.3 var(--mi-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mi-lemon);
  display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;
}
.mi-signals h3 span{color:var(--mi-dim);letter-spacing:.08em}
.mi-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.mi-tile{
  width:100%;min-height:88px;text-align:left;cursor:pointer;
  display:grid;gap:6px;align-content:start;
  padding:14px 16px;border-radius:16px;
  border:2px solid var(--mi-hair);background:#161614;color:var(--mi-white);
  transition:border-color .15s ease,background-color .15s ease,transform .12s ease;
}
.mi-tile:hover{border-color:var(--mi-white);transform:translateY(-2px)}
.mi-tile[aria-current="true"]{border-color:var(--mi-lemon);background:#22210F}
.mi-tile__kind{font:600 .8125rem/1.2 var(--mi-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mi-lemon)}
.mi-tile[data-side="C"] .mi-tile__kind{color:var(--mi-rain)}
.mi-tile[data-role="candidate"] .mi-tile__kind{color:var(--mi-white)}
.mi-tile__artist{font:800 1.0625rem/1.15 var(--mi-sans);text-transform:uppercase;letter-spacing:.01em}
.mi-tile__title{font-family:var(--mi-serif);font-style:italic;font-size:1.0625rem;line-height:1.25}
.mi-tile__note{font:400 .8125rem/1.4 var(--mi-mono);color:var(--mi-dim);letter-spacing:.03em}
.mi-empty{margin:0;padding:18px;border:1px dashed var(--mi-hair);border-radius:16px;font:400 .875rem/1.5 var(--mi-mono);color:var(--mi-dim)}

/* ---- Side A sequence ----------------------------------------------------- */
.mi-seq{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mi-seq button{
  width:100%;min-height:56px;display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  padding:8px 14px;border-radius:12px;border:1px solid var(--mi-hair);background:transparent;color:var(--mi-white);text-align:left;cursor:pointer;
}
.mi-seq button:hover{border-color:var(--mi-white)}
.mi-seq button[aria-current="true"]{background:var(--mi-lemon);color:var(--mi-ink);border-color:var(--mi-lemon)}
.mi-seq button[aria-current="step"]{border:2px dashed var(--mi-lemon)}
.mi-seq__n,.mi-seq__d{font:400 .8125rem/1 var(--mi-mono);letter-spacing:.06em}
.mi-seq__name{display:block;font:700 .9375rem/1.25 var(--mi-sans)}
.mi-seq__name em{font-family:var(--mi-serif);font-weight:400}

/* ---- Breakpoints --------------------------------------------------------- */
@media (max-width:379px){
  /* 320–379px phones: keep PREV · LISTEN · NEXT on one row. Targets stay ≥ 56px. */
  .mi{--mi-key:56px;--mi-disc:120px}
  .mi-controls{gap:8px}
}
@media (min-width:600px){
  .mi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-seq{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .mi{--mi-disc:200px;--mi-key:88px}
  .mi-deck{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
  .mi-deck__top{grid-column:1/-1}
  .mi-stage{aspect-ratio:16/9}
  .mi-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mi-seq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mi-listen{font-size:1.75rem}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .mi *,.mi *::before,.mi *::after{transition:none!important}
  .mi-r-atmos__field{animation:none!important}
  .mi-ticker{white-space:normal;-webkit-mask-image:none;mask-image:none}
  .mi-ticker__track{transform:none!important}
  .mi-tile:hover,.mi-listen:hover{transform:none}
}

/* ==========================================================================
   Room 002 page — scoped to this page's own classes.
   ========================================================================== */
.room002-hero{min-height:auto;padding-bottom:clamp(48px,7vw,84px)}
.room002-hero h1{max-width:12em}
@media (max-width:379px){.room002-hero h1{font-size:13.5vw}}
.room002-hero .eyebrow a{color:inherit}
.room002-instrument{padding:clamp(28px,5vw,58px) 0;background:var(--paper,#EBE7DC)}
.room002-elsewhere__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.room002-elsewhere__list a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}
.room002-elsewhere__list .small{display:block;color:var(--muted-deep,#4C5651)}
.room002-about-data{margin-top:24px;border-top:1px solid var(--line,rgba(10,10,10,.22));padding-top:12px}
.room002-about-data summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.room002-about-data .small{color:var(--muted-deep,#4C5651);max-width:44em}