/* ======================================================================
   AMSP 002 — DEV02.3 EDITORIAL / UI BASE (PRIVATE CANDIDATE)
   Composed over verified DEV02.2, never edits music manifests or shell source.
   Claude / Pre-Build 005 owns SVG/motion treatment independently.
   Editorial rules are scoped to Room 002 and Edition 002 only.
   Palette: neutral smoky graphite, not warm parchment. Yellow = emphasis.
   ====================================================================== */

/* 00. Site chrome, original photographic hero, and room background. */
body.room002-page--dev02 {
  --dev023-ground:#25282a;
  --dev023-field:#191b1d;
  --dev023-surface:#2d3032;
  --dev023-white:#f2f1ec;
  --dev023-muted:#c0c5c6;
  --dev023-line:rgba(242,241,236,.23);
  background:var(--dev023-ground);
  color:var(--dev023-white);
}
.room002-page--dev02 .room-nav {
  background:#141617;
  color:var(--dev023-white);
  border-bottom:1px solid var(--dev023-line);
}
.room002-page--dev02 .room002-hero {
  background:radial-gradient(ellipse at 86% 14%,#34393a 0%,#202426 48%,#171a1d 100%);
  color:var(--dev023-white);
  min-height:auto;
  padding:clamp(68px,8vw,122px) 0 clamp(70px,8vw,120px);
}
.room002-page--dev02 .room002-hero .eyebrow,
.room002-page--dev02 .room002-hero .small { color:var(--dev023-muted); }
.room002-page--dev02 .room002-hero .eyebrow {
  margin:0 0 clamp(28px,4.2vw,54px);
  padding-top:14px;
  border-top:1px solid var(--dev023-line);
  font:600 .72rem/1.5 var(--mono,"IBM Plex Mono",monospace);
  letter-spacing:.07em;
}
.room002-page--dev02 .room002-hero .eyebrow a { color:var(--dev023-white); }
.room002-page--dev02 .dev023-hero__grid {
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(225px,.84fr);
  align-items:center;
  gap:clamp(28px,4vw,72px);
}
.room002-page--dev02 .dev023-hero__words { min-width:0; }
.room002-page--dev02 .room002-hero h1 {
  font-family:var(--display,"Libre Baskerville",Georgia,serif);
  font-size:clamp(3.25rem,4.5vw,5.25rem);
  font-weight:700;
  line-height:1.015;
  letter-spacing:-.044em;
  text-wrap:balance;
  color:var(--dev023-white);
  margin:0 0 clamp(34px,4.4vw,54px);
  max-width:13em;
}
.room002-page--dev02 .room002-hero .lede {
  font:500 clamp(1.12rem,1.7vw,1.6rem)/1.5 var(--body,Montserrat,Arial,sans-serif);
  max-width:30em;
  margin:0 0 clamp(21px,2.3vw,32px);
  color:var(--dev023-white);
}
.room002-page--dev02 .room002-hero__how {
  display:block;
  font:400 clamp(.82rem,1.05vw,.95rem)/1.6 var(--mono,"IBM Plex Mono",monospace);
  padding-top:16px;
  border-top:1px solid var(--dev023-line);
  max-width:52ch;
  letter-spacing:.012em;
  margin:0;
}
.room002-page--dev02 .dev023-hero__photo {
  position:relative;
  margin:0;
  min-width:0;
  isolation:isolate;
  background:#0b0d0b;
  align-self:stretch;
  min-height:clamp(290px,37vw,580px);
  max-height:680px;
  overflow:hidden;
}
.room002-page--dev02 .dev023-hero__photo img {
  display:block;
  width:100%;height:100%;
  object-fit:cover;object-position:55% 42%;
  filter:none;
}
.room002-page--dev02 .dev023-hero__photo figcaption {
  position:absolute;bottom:0;left:0;right:0;
  padding:15px 18px;
  color:#f2f1ec;
  background:linear-gradient(0deg,rgba(10,12,12,.83),rgba(10,12,12,.0));
  font:600 .64rem/1.5 var(--mono,"IBM Plex Mono",monospace);
  letter-spacing:.1em;text-transform:uppercase;
}
/* Claude will mount its authentic shell in this named slot. A zero-height
   placeholder does not fake motion or steal editorial space while awaiting it. */
.room002-page--dev02 #dev023-pyramid-integration:empty{display:none}
.room002-page--dev02 #dev023-pyramid-integration:not(:empty){margin-top:clamp(22px,3vw,38px)}

/* 01. Neutral field around the real music instrument; don't retint photos. */
.room002-page--dev02 .room002-instrument {
  background:var(--dev023-ground);
  border-top:1px solid #3b3d40;
  padding:clamp(34px,5vw,70px) 0;
}
.room002-page--dev02 .mi {
  --mi-paper:#2d3032;
  --mi-white:#f2f1ec;
  --mi-dim:rgba(242,241,236,.84);
  --mi-panel:#17191a;
  --mi-bezel:#252729;
  --f-paper:#f2f1ec;
  --f-flat:rgba(24,26,27,.9);
  --f-glass:rgba(25,28,29,.75);
  --f-glass-solid:#232629;
  background:#181b1d;
}
/* No parchment art card inside optional Visual Window, either. */
.room002-page--dev02 .mi-r-artwork { background:#333638; color:#f2f1ec; }
.room002-page--dev02 .mi-r-artwork__label{color:#d5d6d5}
.room002-page--dev02 .mi-r-artwork__rule{background:var(--mi-lemon);border-color:rgba(242,241,236,.65)}

/* 02. Five-skin legacy A/B/C navigation: quiet functional fallback.
   Claude’s 004.1/005 optical key will eventually occupy the separate hero slot.
   Avoid creating another large yellow segmented dashboard in this interim UI. */
.room002-page--dev02 .mi-navigation { top:0; padding-top:0; margin:0; }
.room002-page--dev02 .mi .amsp-abc--field {
  width:100%;max-width:none;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;padding:6px 0;
  background:rgba(20,22,23,.92);
  border:0;border-top:1px solid rgba(242,241,236,.29);
  border-bottom:1px solid rgba(242,241,236,.29);
  border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__graphic,
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__eyebrow,
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__caption { display:none!important; }
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__keys {
  grid-column:1;grid-row:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key {
  min-width:0;min-height:54px;
  border:0;border-bottom:3px solid transparent;
  border-radius:0;
  background:transparent;
  padding:9px 6px 8px;
  color:#e9eae8;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key + .amsp-abc__key {
  border-left:1px solid rgba(242,241,236,.16);
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key-letter {
  font:750 clamp(1.14rem,2vw,1.55rem)/1 var(--body,Montserrat,sans-serif);
  letter-spacing:-.04em;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key-name {
  font:.6rem/1.15 var(--mono,"IBM Plex Mono",monospace);
  font-weight:500;letter-spacing:.065em;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key[aria-pressed="true"] {
  background:rgba(240,226,15,.075);
  color:#f3f2ed;
  border-bottom-color:#f0e20f;
}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key[aria-pressed="true"] .amsp-abc__key-letter{color:#f0e20f}
.room002-page--dev02 .mi .amsp-abc--field .amsp-abc__key:hover {background:rgba(242,241,236,.1)}

/* 03. Primary listening button, more dimensional, no decorative animation.
   Existing destination URLs, providers and disabled states are untouched. */
.room002-page--dev02 .mi {
  --mi-key:clamp(72px,7.5vw,92px);
  --mi-disc:clamp(146px,26vw,210px);
}
.room002-page--dev02 .mi-controls {
  grid-template-columns:var(--mi-key) minmax(var(--mi-disc),1fr) var(--mi-key);
  gap:clamp(8px,1.6vw,18px);
  align-items:center;
  margin:0 auto;
  max-width:680px;
}
.room002-page--dev02 .mi-key {
  width:var(--mi-key);height:var(--mi-key);
  border:1.5px solid rgba(242,241,236,.83);
  border-radius:14px;
  color:#f6f5ef;
  background:rgba(27,30,31,.55);
  font:700 clamp(.84rem,1.25vw,.98rem)/1.05 var(--mi-mono);
  letter-spacing:.025em;
  gap:5px;
  text-transform:none;
}
.room002-page--dev02 .mi-key svg{width:clamp(30px,4.4vw,40px);height:clamp(30px,4.4vw,40px)}
.room002-page--dev02 .mi-key span{font-weight:700;margin:0}
.room002-page--dev02 .mi-key:hover{background:#eeeeea;color:#17191a}
.room002-page--dev02 .mi-listen:not([aria-disabled="true"]):not([data-kind="open"]) {
  background:radial-gradient(circle at 36% 24%, #fff6a6 0%, #fff373 16%, #f4e519 45%, #e7c900 69%, #bb9300 100%);
  color:#111313;
  border:1px solid rgba(255,251,198,.7);
  box-shadow:inset 0 -7px 14px rgba(56,45,0,.22),
             inset 0 3px 8px rgba(255,255,231,.32),
             0 0 0 5px rgba(241,224,20,.12),
             0 9px 26px rgba(0,0,0,.28);
  font-size:clamp(1.5rem,2.8vw,2rem);
  letter-spacing:.018em;
  text-decoration:none;
}
.room002-page--dev02 .mi-listen:not([aria-disabled="true"]):not([data-kind="open"]):hover {
  transform:translateY(-2px) scale(1.025);
  box-shadow:inset 0 -7px 14px rgba(56,45,0,.2),
             0 0 0 7px rgba(241,224,20,.15),0 13px 26px rgba(0,0,0,.3);
}
.room002-page--dev02 .mi-listen:focus-visible,.room002-page--dev02 .mi-key:focus-visible{outline:3px solid #f0e20f;outline-offset:5px}
.room002-page--dev02 .mi-listen small{font-size:clamp(.74rem,1.35vw,.94rem)}
.room002-page--dev02 .mi-providers{margin-top:4px}
.room002-page--dev02 .mi-hint{line-height:1.65;max-width:40em;margin:auto;color:rgba(242,241,236,.9)}

/* 04. Visual Window collapsed on first view at ALL sizes, including desktop.
   Disclosure state (aria-expanded, hidden region) handled in dev02/disclosure.js. */
.room002-page--dev02 .mi-dc--window {
  margin:0;
  background:rgba(25,28,30,.85);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-radius:8px;
  border-color:rgba(242,241,236,.26);
}
.room002-page--dev02 .mi-dc--window[data-open="0"] .mi-dc__toggle {
  min-height:48px;
  padding:6px 14px;
}
.room002-page--dev02 .mi-dc--window[data-open="0"] .mi-dc__summary {
  font:400 .77rem/1.35 var(--mi-mono);
  letter-spacing:0;
  color:var(--dev023-muted);
  white-space:normal;
}
@media(min-width:980px){
  .room002-page--dev02 .mi-deck:has(.mi-dc--window[data-open="0"]){
    grid-template-columns:minmax(0,1fr);
  }
  .room002-page--dev02 .mi-deck:has(.mi-dc--window[data-open="0"]) .mi-deck__side{
    grid-column:1;
  }
  .room002-page--dev02 .mi-deck:has(.mi-dc--window[data-open="0"]) .mi-deck__main{
    max-width:780px;
    margin-inline:auto;
    width:100%;
  }
}

/* 05. Two strong editorial exits instead of bare links on parchment. */
.room002-page--dev02 .room002-elsewhere {
  background:#252729;
  color:#f2f1ec;
  border-top:1px solid rgba(242,241,236,.18);
  padding:clamp(55px,8vw,110px) 0;
}
.room002-page--dev02 .room002-elsewhere::before{display:none}
.room002-page--dev02 .room002-elsewhere .split {
  display:grid;
  grid-template-columns:minmax(175px,.35fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);
}
.room002-page--dev02 .room002-elsewhere .eyebrow{
  color:#f0e20f;
  font:600 .72rem/1.5 var(--mono,monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.room002-page--dev02 .room002-elsewhere h2 {
  font:700 clamp(2.4rem,5vw,5.4rem)/1.04 var(--display,Georgia,serif);
  letter-spacing:-.04em;
  color:#f2f1ec;
  max-width:12ch;
  margin:0 0 clamp(24px,3vw,40px);
}
.room002-page--dev02 .room002-elsewhere__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2vw,24px);
  margin:0;
}
.room002-page--dev02 .room002-elsewhere__list li {
  list-style:none;
  border-top:3px solid #f0e20f;
  border-bottom:1px solid rgba(242,241,236,.3);
  padding:clamp(17px,2.2vw,30px);
  background:#1a1d1f;
  min-width:0;
}
.room002-page--dev02 .room002-elsewhere__list a {
  font:400 clamp(1.2rem,2.15vw,2.1rem)/1.22 var(--display,Georgia,serif);
  letter-spacing:-.024em;
  color:#f2f1ec;
  text-decoration:none;
  min-height:70px;
  padding:0;
}
.room002-page--dev02 .room002-elsewhere__list a:hover,
.room002-page--dev02 .room002-elsewhere__list a:focus-visible {
  color:#f0e20f;
  text-decoration:underline;
  text-underline-offset:.15em;
}
.room002-page--dev02 .room002-elsewhere__list .small {
  color:#d3d4d2;
  font:400 .82rem/1.65 var(--mono,"IBM Plex Mono",monospace);
  margin-top:20px;
  max-width:50ch;
}
.room002-page--dev02 .room002-about-data {
  margin-top:clamp(36px,5vw,64px);
  border-top:1px solid rgba(242,241,236,.22);
  color:#f2f1ec;
}
.room002-page--dev02 .room002-about-data summary{color:#f2f1ec;font-size:.8rem}
.room002-page--dev02 .room002-about-data .small{color:#d3d4d2}

/* 06. Closing page: enormous typography, authentic marks, restrained rules. */
.room002-page--dev02 .amsp-foot--listening {
  background:#151719;
  color:#f2f1ec;
  padding-top:clamp(50px,7vw,100px);
  border-top:1px solid rgba(242,241,236,.25);
}
.room002-page--dev02 .amsp-foot--listening::before{display:none!important}
.room002-page--dev02 .amsp-foot--listening .amsp-foot__mark {
  font:700 clamp(3.2rem,8.5vw,8.7rem)/.94 var(--display,Georgia,serif);
  letter-spacing:-.065em;
  max-width:11ch;
  margin:clamp(30px,5vw,65px) 0 clamp(32px,5vw,65px);
  color:#f2f1ec;
}
.room002-page--dev02 .amsp-foot--listening .amsp-foot__mark::after {
  content:".";
  color:#f0e20f;
}
.room002-page--dev02 .amsp-foot--listening .credits {color:#c1c3c3}
/* Both marks are authentic original black PNGs, optically reversed in CSS
   for dark presentation. Binary assets remain untouched. */
.room002-page--dev02 .nav-publisher-mark img,
.room002-page--dev02 .amsp-foot__publisher-logo img {filter:brightness(0) invert(1)}

/* 07. Edition 002 landing: editorial type, not a second invented identity. */
.edition002-page--dev02 {
  background:#222426;
  color:#f2f1ec;
}
.edition002-page--dev02 .edition002-hero{
  background:linear-gradient(145deg,#202325 0%,#292c2d 66%,#1a1c1d 100%);
  padding:clamp(72px,7vw,120px) 0 clamp(70px,7vw,120px);
}
.edition002-page--dev02 .edition002-title {
  font-size:clamp(5.5rem,11.8vw,12.5rem);
  line-height:.84;
  letter-spacing:-.075em;
  margin-bottom:clamp(32px,3vw,52px);
  color:#f2f1ec;
}
.edition002-page--dev02 .edition002-subtitle {
  font-size:clamp(2rem,3.5vw,4.25rem);
  line-height:1.12;
  letter-spacing:-.04em;
  margin:0 0 clamp(34px,4vw,60px);
  color:#f0e20f;
  max-width:16ch;
}
.edition002-page--dev02 .edition002-copy{
  max-width:34rem;
  color:#f2f1ec;
  font-size:clamp(1.12rem,1.6vw,1.45rem);
  line-height:1.52;
  margin-bottom:clamp(32px,3.5vw,50px);
}
.edition002-page--dev02 .edition002-actions a{
  border-color:rgba(242,241,236,.75);
  min-height:54px;
  transition:transform .18s ease,background .18s ease;
}
.edition002-page--dev02 .edition002-actions a:hover{transform:translateY(-2px)}
.edition002-page--dev02 .edition002-sidea {
  background:#181b1c;
  border:1px solid rgba(242,241,236,.22);
  border-top:3px solid #f0e20f;
}
.edition002-page--dev02 .edition002-sidea h2{color:#f0e20f}
.edition002-page--dev02 .edition002-sidea li{border-color:rgba(242,241,236,.2)}
.edition002-page--dev02 .edition002-fields__note{color:#c0c4c4}
.edition002-page--dev02 .edition002-note{color:#c8cbcb;border-color:rgba(242,241,236,.2)}
/* Header logo on Edition 002 is also the genuine black source, CSS-reversed. */
body:has(.edition002-page--dev02) .amsp-nav .nav-publisher-mark img{filter:brightness(0) invert(1)}

/* 08. Mobile-first. Keep all listening targets ≥58px on 320px screens. */
@media(max-width:900px){
  .room002-page--dev02 .dev023-hero__grid{grid-template-columns:1fr;gap:clamp(32px,6vw,62px)}
  .room002-page--dev02 .dev023-hero__photo{min-height:clamp(290px,64vw,520px);max-height:520px}
  .room002-page--dev02 .room002-hero h1{font-size:clamp(3.1rem,9.6vw,6.2rem);max-width:15ch}
  .room002-page--dev02 .room002-elsewhere .split{grid-template-columns:1fr;gap:18px}
}
@media(max-width:650px){
  .room002-page--dev02 .room002-hero{padding:clamp(50px,7vw,68px) 0 clamp(52px,8vw,72px)}
  .room002-page--dev02 .room002-hero h1{font-size:clamp(2.65rem,9.6vw,4.15rem);margin-bottom:clamp(26px,8vw,38px);line-height:1.045}
  .room002-page--dev02 .room002-hero .lede{font-size:clamp(1.12rem,4.9vw,1.38rem);line-height:1.48;margin-bottom:26px}
  .room002-page--dev02 .room002-hero__how{font-size:.81rem}
  .room002-page--dev02 .dev023-hero__photo{min-height:290px;max-height:420px}
  .room002-page--dev02 .mi{--mi-key:clamp(62px,18vw,76px);--mi-disc:clamp(126px,37vw,168px)}
  .room002-page--dev02 .mi-controls{gap:clamp(5px,1.9vw,10px)}
  .room002-page--dev02 .mi-key{border-radius:12px;font-size:clamp(.8rem,3vw,.94rem)}
  .room002-page--dev02 .mi-key svg{width:30px;height:30px}
  .room002-page--dev02 .mi-listen:not([aria-disabled="true"]):not([data-kind="open"]){font-size:clamp(1.46rem,5.8vw,1.85rem)}
  .room002-page--dev02 .room002-elsewhere__list{grid-template-columns:1fr;gap:14px}
  .room002-page--dev02 .room002-elsewhere__list li{padding:22px}
  .room002-page--dev02 .room002-elsewhere__list a{min-height:52px;font-size:clamp(1.35rem,5vw,1.85rem)}
  .room002-page--dev02 .amsp-foot--listening .amsp-foot__mark{font-size:clamp(2.9rem,12vw,5rem)}
  .edition002-page--dev02 .edition002-title{font-size:clamp(5.25rem,19vw,9rem)}
}
@media(max-width:359px){
  .room002-page--dev02 .mi{--mi-key:58px;--mi-disc:118px}
  .room002-page--dev02 .mi-controls{gap:5px}
  .room002-page--dev02 .mi-key{font-size:.78rem}
  .room002-page--dev02 .mi-key svg{width:26px;height:26px}
  .room002-page--dev02 .room002-hero h1{font-size:clamp(2.5rem,10.2vw,3.1rem)}
}
@media(prefers-reduced-motion:reduce){
  .room002-page--dev02 .mi-listen,
  .room002-page--dev02 .mi-key,
  .edition002-page--dev02 .edition002-actions a{transition:none!important;animation:none!important;transform:none!important}
}

/* 09. Development release warning is readable but no longer a lemon slab. */
.dev023-review-note {
  background:#282b2d;color:#f0e20f;
  border-block:1px solid rgba(242,241,236,.18);
  padding:10px clamp(18px,4vw,54px);
  margin:0;
  font:600 .67rem/1.5 var(--mono,"IBM Plex Mono",monospace);
  letter-spacing:.075em;
  text-transform:uppercase;
}
/* Opt-in 004.1 prototype: no parchment frame while awaiting Claude's return. */
.room002-page--dev02 .room002-pyramid-preview {
  background:#25282a;
  color:#f2f1ec;
  border-color:#737778;
}
.room002-page--dev02 .room002-pyramid-preview__label{color:#d2d5d4}
.room002-page--dev02 .room002-pyramid-preview__mount {
  --lj-paper:#2d3032;
  --lj-ink:#f2f1ec;
  --lj-muted:#bfc5c5;
  --lj-border:#7e8283;
  --lj-lemon-soft:#f0e20f;
}
.room002-page--dev02 .room002-pyramid-preview .shell-open {
  background:#202325;
  color:#f2f1ec;
  border-color:#747a7a;
}