/* Shared studio furniture. Artwork palettes remain part of each design. */
.studio-family-page {
  --studio-surface: #f8f4e9;
  --studio-stage: #eae4d7;
  --studio-border: #b5361230;
  --studio-tint: #b536120b;
  --panel: var(--studio-surface);
}
.studio-family-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Each editor is a continuous sheet with the same preview / settings order. */
.studio-family-page:not(.print-studio-page) .studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  width: 92%;
  max-width: 1700px;
  padding: 0 0 36px;
  margin: 0 auto;
  align-items: start;
}
.studio-family-page:not(.print-studio-page) .studio > .controls { grid-column: 2; grid-row: 1; min-width: 0; border-radius: 0; }
.studio-family-page:not(.print-studio-page) .studio > :is(.preview-area, .artwork-workspace) { grid-column: 1; grid-row: 1; min-width: 0; background: transparent; border: 1px solid var(--studio-border); border-radius: 0; }
.studio-family-page:not(.print-studio-page) .controls { grid-template-columns: 64px minmax(0, 1fr); gap: 0 10px; height: min(780px, calc(100dvh - 100px)); min-height: 520px; }
.studio-family-page :is(.settings-panels, .controls) { background: var(--studio-surface); border-color: var(--studio-border); border-radius: 0; }
.studio-family-page :is(.settings-panel-heading, .workspace-toolbar, .page-heading, .preview-toolbar, .workspace-toolbar, .export-panel, .export-bar) { background: transparent; border-color: var(--studio-border); }
.studio-family-page .settings-panel-heading { background: var(--studio-surface); }
.studio-family-page .settings-card { border-radius: 0; background: var(--studio-tint); color: var(--muted); }
.studio-family-page .settings-card[aria-selected=true] { background: #b5361210; border-color: #b5361266; box-shadow: inset 3px 0 var(--accent); color: var(--accent); }
.studio-family-page :is(.settings-card, .settings-card-label) { font-size: 10px; }
.studio-family-page :is(.preview-stage, .artwork-workspace .preview-stage) { background: var(--studio-stage); background-image: url('/brand/paper-fibres-albedo.png'); background-size: 256px; background-blend-mode: multiply; height: min(650px, 70dvh); min-height: 400px; }
.studio-family-page > .workspace-toolbar,
.studio-family-page.nature-editor .page-heading { width: 92%; max-width: 1700px; margin: 0 auto; padding: 26px 0 24px; gap: 24px; }
.studio-family-page :is(.workspace-toolbar h1, .page-heading h1) { font: 500 clamp(24px, 2.4vw, 34px)/1.2 var(--serif); letter-spacing: -1px; }
.studio-family-page .workspace-toolbar .eyebrow,
.studio-family-page .page-heading .eyebrow { color: var(--accent); font-size: 10px; letter-spacing: 1.7px; }
.studio-family-page :is(input:not([type=checkbox]):not([type=range]):not([type=color]), select) { background-color: #fffcf4; border-color: var(--studio-border); border-radius: 0; min-height: 40px; font-family: var(--sans); }
.studio-family-page input[type=range], .studio-family-page input[type=checkbox] { accent-color: var(--accent); }
.studio-family-page :is(.primary, .primary-button) { background: var(--accent); border-color: var(--accent); color: #fffaf0; border-radius: 0; }
.studio-family-page :is(.secondary, .outline-button, .subject-switch button, .workspace-actions button) { border-color: var(--studio-border); border-radius: 0; }
.studio-family-page :is(.subject-switch button[aria-pressed=true], .segmented button[aria-pressed=true]) { background: #b5361210; color: var(--accent); border-color: #b5361266; border-radius: 0; }
.studio-family-page :is(.hint, .intro, .status-line) { color: var(--muted); }
.studio-family-page .story-section { width: 92%; max-width: 1700px; margin: 0 auto; padding: 40px 0; border-top: 1px solid var(--studio-border); background: transparent; }
.studio-family-page.nature-editor :is(.control-section, .study-facts, .artwork-workspace .workspace-toolbar, .export-bar) { border-color: var(--studio-border); }
.studio-family-page.nature-editor .section-heading h2 { font: 500 21px/1.25 var(--serif); }
.studio-family-page.nature-editor .step { border: 0; border-radius: 0; color: var(--accent); }
.studio-family-page.nature-editor .study-card { background: transparent; border-color: var(--studio-border); border-radius: 0; }
.studio-family-page.nature-editor .study-card[aria-pressed=true] { background: #b5361210; border-color: var(--accent); box-shadow: none; }
.studio-family-page.nature-editor .study-card[aria-pressed=true]::after { background: transparent; color: var(--accent); }
.studio-family-page.nature-editor .field-notes { margin-inline: 4%; border-color: var(--studio-border); }
@media (min-width: 801px) {
  /* Let the artwork set the row height; long tabs scroll inside the sidebar. */
  .studio-family-page:not(.print-studio-page) .studio > .controls {
    align-self: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    contain: size;
  }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .studio-family-page:not(.print-studio-page) .studio { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
}
@media (max-width: 800px) {
  .studio-family-page:not(.print-studio-page) .studio { display: flex; flex-direction: column; gap: 20px; }
  .studio-family-page:not(.print-studio-page) .studio > .controls { order: 2; width: 100%; height: 620px; min-height: 0; }
  .studio-family-page:not(.print-studio-page) .studio > :is(.preview-area, .artwork-workspace) { order: 1; width: 100%; }
  .studio-family-page > .workspace-toolbar, .studio-family-page.nature-editor .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .studio-family-page .toolbar-actions { flex-wrap: wrap; justify-content: flex-start; }
  .studio-family-page .subject-switch { align-self: flex-start; margin-top: 14px; }
  .studio-family-page :is(.preview-stage, .artwork-workspace .preview-stage) { min-height: 320px; height: 480px; max-height: 65dvh; }
  .studio-family-page .export-panel { flex-wrap: wrap; }
}
/* Fullscreen preview must take precedence over the shared workspace grid. */
.studio-family-page.preview-expanded .studio > .controls { display: none; }
.studio-family-page.preview-expanded .studio > :is(.preview-area, .artwork-workspace) { display: flex; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; background-color: var(--paper); }
.studio-family-page.preview-expanded :is(.preview-stage, .artwork-workspace .preview-stage) { height: auto; min-height: 0; max-height: none; flex: 1 1 0; }