/* /studio page furniture.
 *
 * The Wm Hemphill Reel Console pack owns the console, the cabinet and every
 * control on it. This file only positions the page around that machine and
 * styles the two cards the pack has no opinion about. Colors come from the
 * pack's tokens -- never a raw hex here, or the two halves drift apart the
 * next time the pack is revised.
 */

body{
  margin:0;
  background:var(--pw-color-bg);
  color:var(--pw-color-text);
  font-family:var(--pw-font-body,system-ui,-apple-system,sans-serif);
}

.studio-page{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 72px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* ------------------------------------------------------------- masthead */
.studio-masthead{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.studio-mark{
  width:64px; height:64px; flex:none;
}
.studio-masthead h1{
  margin:0;
  font-family:var(--pw-font-display,var(--pw-font-body,sans-serif));
  font-size:clamp(30px,6vw,50px);
  line-height:.94;
  letter-spacing:2px;
  color:var(--studio-nicotine-ivory);
}
.studio-headline{
  margin:6px 0 0;
  font-family:var(--pw-font-display,inherit);
  font-size:12px;
  letter-spacing:3.4px;
  color:var(--studio-amber-vu);
}
.studio-copy{
  margin:6px 0 0;
  max-width:56ch;
  font-size:14px;
  line-height:1.6;
  color:var(--pw-color-text-muted);
}

/* ----------------------------------------------------------------- cards */
.studio-onair,
.studio-room{
  padding:20px 22px;
}
.studio-onair p,
.studio-room p{
  margin:0 0 12px;
  max-width:68ch;
  font-size:14px;
  line-height:1.65;
  color:var(--pw-color-text-muted);
}
.studio-onair p:last-child,
.studio-room p:last-child{margin-bottom:0}
.studio-onair strong{color:var(--studio-amber-vu)}

/* The pack's .pw-button is styled for buttons; as a link it needs the box
   behavior back so it does not collapse to a text run. */
a.pw-button{
  display:inline-block;
  text-decoration:none;
}

/* Reserve the hub launcher's corner so it never lands on the transport. */
.studio-page{padding-bottom:96px}

@media (max-width:640px){
  .studio-page{padding:18px 12px 96px; gap:18px}
  .studio-mark{width:46px; height:46px}
}