/* Stone Studio (house.html): the path-traced room on the left, the design panel on the right. */
.studio-intro { padding: calc(var(--header-h) + clamp(26px, 4vw, 56px)) var(--gutter) clamp(18px, 2.4vw, 30px); max-width: 1180px; }
.studio-intro .display { font-size: clamp(42px, 5.4vw, 88px); margin: 12px 0 14px; }
.studio-intro .display em { font-style: italic; color: var(--terracotta); }
.studio-intro .lede { max-width: 62ch; }

.studio { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); grid-template-areas: "stage panel" "note panel"; gap: 0 clamp(14px, 1.6vw, 24px);
  padding: 0 var(--gutter) clamp(50px, 6vw, 90px); align-items: start; }
.studio-stage { grid-area: stage; position: sticky; top: calc(var(--header-h) + 12px); background: #1b1916; overflow: hidden; }
.studio-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; transition: opacity 0.5s var(--ease), filter 0.5s var(--ease); }
.studio.is-loading canvas { opacity: 0.55; filter: blur(4px); }
.studio-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; background: rgba(246, 243, 237, 0.92); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.studio.is-loading .studio-loading { opacity: 1; }
.studio-rooms { position: absolute; z-index: 2; left: 14px; top: 14px; display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(246, 243, 237, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.studio-rooms button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink-soft); transition: background-color 0.3s, color 0.3s; }
.studio-rooms button[aria-pressed="true"] { background: var(--ink); color: var(--limestone); }
.studio-options-ab { position: absolute; z-index: 2; right: 14px; top: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(27, 25, 22, 0.62);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.studio-options-ab button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.studio-options-ab button[aria-pressed="true"] { background: var(--terracotta); color: #fff; }
.studio-line { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); max-width: 70ch; }
.studio-disclaimer { grid-area: note; margin: 10px 0 0; font-size: 12px; color: var(--mute); max-width: 90ch; }

.studio-panel { grid-area: panel; display: grid; gap: 16px; padding: 18px; background: #fbf9f5; border: 1px solid var(--line); }
.studio-block { display: grid; gap: 10px; }
.studio-block > .mono { color: var(--terracotta); }
.studio-block > .mono small { font-size: 10px; color: var(--mute); letter-spacing: 0.06em; text-transform: none; margin-left: 6px; }
.studio-surfaces { display: grid; gap: 6px; }
.studio-surfaces button { display: flex; align-items: center; gap: 10px; padding: 7px; text-align: left; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.studio-surfaces button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.studio-surfaces i { flex: none; width: 38px; height: 38px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.studio-surfaces strong { display: block; font-family: var(--serif); font-weight: 520; font-size: 16px; line-height: 1.15; }
.studio-surfaces small { display: block; font-size: 11.5px; color: var(--mute); }
.studio-stones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.studio-stones button { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.2s; }
.studio-stones button:hover { transform: translateY(-2px); }
.studio-stones button[aria-pressed="true"] { border-color: var(--terracotta); }
.studio-stones span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: 9.5px; font-weight: 700; line-height: 1.15; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); }
.studio-stones em { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 10px; background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.studio-layouts { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-layouts button { min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.studio-layouts button[aria-pressed="true"] { background: var(--ink); color: var(--limestone); border-color: var(--ink); }
.studio-layouts button:disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; }
.studio-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.studio-options { display: grid; gap: 8px; }
.studio-options .opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.studio-options .opt > span { font-size: 12px; font-weight: 700; color: var(--mute); }
.studio-options .seg-mini { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: var(--bone); }
.studio-options .seg-mini button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.studio-options .seg-mini button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3); }
.studio-estimate { display: grid; gap: 6px; }
.studio-estimate > div { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; font-size: 13px; }
.studio-estimate > div span { font-weight: 600; }
.studio-estimate > div b { font-family: var(--serif); font-weight: 520; font-size: 16px; }
.studio-estimate > div small { grid-column: 1 / -1; font-size: 11.5px; color: var(--mute); }
.studio-estimate .fine { margin: 4px 0 0; }
.studio-actions { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.studio-actions .btn { justify-content: center; }
.studio-proposal { position: relative; display: grid; gap: 4px; padding: 16px 48px 16px 16px; color: var(--limestone); text-decoration: none; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, rgba(184, 92, 56, 0.55), transparent 60%), #1d1a17; transition: transform 0.4s var(--ease); }
.studio-proposal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(./assets/magrade/onix-lavared-512.webp) center / cover; opacity: 0.16; mix-blend-mode: screen; transition: opacity 0.5s var(--ease), transform 1.2s var(--ease); }
.studio-proposal:hover { transform: translateY(-2px); }
.studio-proposal:hover::after { opacity: 0.3; transform: scale(1.06); }
.studio-proposal .mono { color: #e9b89f; font-size: 10px; }
.studio-proposal strong { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; }
.studio-proposal small { font-size: 12px; line-height: 1.45; color: rgba(246, 243, 237, 0.72); }
.studio-proposal i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; transition: transform 0.4s var(--ease); }
.studio-proposal:hover i { transform: translate(4px, -50%); }
.studio-small { display: flex; flex-wrap: wrap; gap: 14px; }
.studio-small button { border: 0; background: none; padding: 0; cursor: pointer; font-size: 13px; }

@media (max-width: 1000px) {
  .studio { grid-template-columns: 1fr; grid-template-areas: "stage" "panel" "note"; }
  .studio-stage { position: sticky; top: var(--header-h); z-index: 5; margin: 0 calc(-1 * var(--gutter)); }
  .studio-panel { margin-top: 14px; }
}
@media (max-width: 760px) {
  .studio-intro { padding-top: calc(var(--header-h) + 18px); }
  .studio-intro .display { font-size: clamp(36px, 10vw, 48px); }
  .studio-intro .lede { font-size: 15px; }
  .studio-stage canvas { aspect-ratio: 4 / 5; max-height: 46svh; object-fit: cover; }
  .studio-rooms { left: 10px; top: 10px; }
  .studio-rooms button { min-height: 32px; padding: 0 12px; font-size: 12px; }
  .studio-options-ab { top: auto; bottom: 10px; right: 10px; }
  .studio-options-ab button { min-height: 30px; padding: 0 12px; font-size: 11.5px; }
  .studio-options-ab { position: absolute; z-index: 2; right: 14px; top: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(27, 25, 22, 0.62);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.studio-options-ab button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.studio-options-ab button[aria-pressed="true"] { background: var(--terracotta); color: #fff; }
.studio-line { display: none; }
  .studio-panel { padding: 14px; border-left: 0; border-right: 0; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .studio-stones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .studio-stones::-webkit-scrollbar { display: none; }
  .studio-surfaces { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .studio-surfaces::-webkit-scrollbar { display: none; }
}