/* Maximal Bharat — from the "Maximal Bharat Design System": peacock ink #4A2356 and gold
   #DFAB4A on cream #F7F0E4; night plum #1D0F20 with night cream #F1E5CB. Syne throughout;
   the nameplate is Syne 750, caps, +6% tracking, never gold. Two grounds only. */
.channel--mb {
  --c-bg: #F7F0E4; --c-ink: #4A2356;
  --mb-ink: #4A2356; --mb-gold: #DFAB4A; --mb-gold-deep: #A8813A; --mb-cream: #F7F0E4; --mb-night: #1D0F20; --mb-night-cream: #F1E5CB;
  font: 400 1.0625rem/1.55 "Syne", var(--text);
}
.channel--mb h1, .channel--mb h2, .channel--mb h3 { font-family: "Syne", var(--text); text-transform: none; letter-spacing: 0; line-height: 1.1; }
.channel--mb h2 { font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.mb-caption { font: 600 .75rem/1.3 "Syne", var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mb-gold-deep); }
.mb-night .mb-caption { color: var(--mb-gold); }

/* hero: the stacked lockup, the front door */
.mb-hero { padding-block: clamp(40px, 8vw, 104px); text-align: center; display: grid; justify-items: center; gap: 22px; }
.mb-hero img { width: clamp(120px, 18vw, 190px); height: auto; }
.mb-name { display: grid; justify-items: stretch; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; line-height: 1.05; margin: 0; color: var(--mb-ink); }
.mb-name span:first-child { font-size: clamp(2.4rem, 8vw, 5.6rem); }
.mb-name span:last-child { display: flex; align-items: center; gap: .45em; font-size: clamp(1.97rem, 6.56vw, 4.6rem); }
.mb-name span:last-child::before, .mb-name span:last-child::after { content: ""; flex: 1; height: max(3px, .06em); background: var(--mb-gold); }
.mb-hero .channel-line { font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45; max-width: 34ch; margin: 0; }

/* the prelaunch state: a quiet plate, not a dead button */
.mb-prelaunch { display: grid; justify-items: center; gap: 12px; border-top: 2px solid var(--mb-gold); border-bottom: 2px solid var(--mb-gold); padding: 18px clamp(12px, 3vw, 28px); margin-top: 8px; max-width: 520px; }
.channel--mb .mb-status { margin: 0; min-height: 0; padding: 0; border: 0; background: none; color: var(--mb-ink); cursor: default; font: 700 1.05rem/1 "Syne", var(--text); letter-spacing: .18em; text-transform: uppercase; }
.channel--mb .mb-status::before { display: none; }
.channel--mb .mb-status:hover { color: var(--mb-ink); background: none; }
.mb-prelaunch p:last-child { margin: 0; font-size: .95rem; }

/* the house: an architectural plan, at night */
.mb-night { background: var(--mb-night); color: var(--mb-night-cream); padding-block: clamp(44px, 7vw, 96px); }
.mb-night h2 { color: var(--mb-night-cream); margin: 8px 0 12px; }
.mb-house { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; margin-top: 28px; }
.mb-plan {
  display: grid; gap: 0; border: 3px solid var(--mb-gold);
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(88px, auto));
  grid-template-areas: "bed bed lib lib" "kit court court tre" "ver ver gar gar";
}
.room-btn {
  position: relative; background: none; color: var(--mb-night-cream); border: 1px solid rgba(223,171,74,.45); cursor: pointer;
  display: grid; align-content: space-between; justify-items: start; gap: 8px; padding: 12px; text-align: left;
  font: 700 clamp(.95rem, 1.8vw, 1.15rem)/1.1 "Syne", var(--text); transition: background-color var(--dur-3) var(--ease), color var(--dur-1) var(--ease);
}
.room-btn small { font: 600 .625rem/1 "Syne", var(--text); letter-spacing: .18em; color: var(--mb-gold); }
.room-btn:hover { background: rgba(223,171,74,.12); }
.room-btn[aria-pressed="true"] { background: var(--mb-gold); color: var(--mb-night); }
.room-btn[aria-pressed="true"] small { color: var(--mb-night); }
.room-btn[data-area="court"] { grid-area: court; }
.room-btn[data-area="kit"] { grid-area: kit; } .room-btn[data-area="lib"] { grid-area: lib; }
.room-btn[data-area="bed"] { grid-area: bed; } .room-btn[data-area="gar"] { grid-area: gar; }
.room-btn[data-area="ver"] { grid-area: ver; } .room-btn[data-area="tre"] { grid-area: tre; }
.room-btn[data-area="court"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 28%; height: 34%; border: 1px dashed rgba(223,171,74,.6); pointer-events: none; }
.mb-plan-note { margin-top: 10px; }
.mb-rooms:not(.is-js) .mb-plan { display: none; }
.mb-rooms:not(.is-js) .mb-house { grid-template-columns: 1fr; }
.room { display: grid; gap: 12px; align-content: start; padding-bottom: 24px; }
.mb-rooms:not(.is-js) .room + .room { border-top: 1px solid rgba(223,171,74,.45); padding-top: 24px; }
.room:focus { outline: none; }
.room.is-cut { animation: mb-reveal var(--dur-3) var(--ease); }
@keyframes mb-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.room-no { font: 600 .75rem/1 "Syne", var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mb-gold); }
.room-name { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: var(--mb-night-cream); }
.room p { margin: 0; }
.entry { margin: 8px 0 0; border-left: 3px solid var(--mb-gold); padding: 4px 0 4px 18px; display: grid; gap: 8px; }
.entry blockquote { margin: 0; font: 700 clamp(1.05rem, 2vw, 1.25rem)/1.4 "Syne", var(--text); }
.entry figcaption { font: 600 .6875rem/1.3 "Syne", var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mb-gold); }
@media (max-width: 860px) {
  .mb-house { grid-template-columns: 1fr; }
  .mb-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(64px, auto); grid-template-areas: "court court" "kit lib" "bed bed" "gar ver" "tre tre"; }
}

/* series in the making: a numbered archive */
.mb-series { padding-block: clamp(40px, 7vw, 88px); }
.mb-series .series-list { border-top: 2px solid var(--mb-gold); margin-top: 20px; counter-reset: s; }
.mb-series .series-list li { counter-increment: s; display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(74,35,86,.2); font: 700 clamp(1.3rem, 3vw, 1.9rem)/1.15 "Syne", var(--text); }
.mb-series .series-list li::before { content: "Series"; font: 600 .6875rem/1 "Syne", var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mb-gold-deep); }