#studio {
  background: var(--black);
  padding: 110px 64px;
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  isolation: isolate;
}
.studio-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.studio-left h2 { font-family: var(--serif); font-size: 42px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cream); margin-bottom: 20px; }
.studio-left h2 em { display: block; font-family: var(--italic); font-style: italic; font-weight: 300; color: var(--gold-pale); font-size: 30px; text-transform: none; margin-bottom: 4px; }
.studio-left p { font-family: var(--italic); font-size: 18px; font-weight: 300; color: var(--sub); line-height: 1.85; margin-bottom: 18px; }
.studio-values { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 36px; }
.val-item { padding: 20px 22px; background: rgba(26,18,8,0.4); border: 0.5px solid rgba(200,134,10,0.12); }
.val-ttl { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: 6px; }
.val-body { font-family: var(--italic); font-size: 14px; font-weight: 300; color: var(--cream); line-height: 1.6; }

.studio-glance {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 0;
  border: 0.5px solid rgba(200,134,10,0.18); border-radius: 3px;
  margin-bottom: 24px; background: rgba(26,18,8,0.35);
}
.glance-item { padding: 18px 22px; border-right: 0.5px solid rgba(200,134,10,0.12); border-bottom: 0.5px solid rgba(200,134,10,0.12); }
.glance-item:nth-child(2n) { border-right: none; }
.glance-item:nth-last-child(-n+2) { border-bottom: none; }
.glance-k { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.glance-v { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--cream); letter-spacing: 0.02em; }
.glance-v small { font-family: var(--italic); font-style: italic; font-size: 13px; font-weight: 300; color: var(--sub); margin-left: 4px; }

.roles-panel { background: rgba(26,18,8,0.45); border: 0.5px solid rgba(200,134,10,0.22); border-radius: 3px; overflow: hidden; }
.roles-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: rgba(200,134,10,0.08); border-bottom: 0.5px solid rgba(200,134,10,0.2); }
.roles-hdr .ttl { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-pale); display: flex; align-items: center; gap: 10px; }
.roles-hdr .ttl .dot { width: 6px; height: 6px; background: var(--gold-bright); border-radius: 50%; box-shadow: 0 0 10px var(--gold-bright); animation: pulse-dot 2s ease-in-out infinite; }
.roles-hdr .count { font-family: var(--serif); font-size: 11px; letter-spacing: 0.15em; color: var(--gold); }
.role-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 0.5px solid rgba(200,134,10,0.1); text-decoration: none; transition: background .25s, padding-left .25s; }
.role-row:last-child { border-bottom: none; }
.role-row:hover { background: rgba(200,134,10,0.06); padding-left: 28px; }
.role-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--cream); letter-spacing: 0.02em; margin-bottom: 4px; }
.role-meta { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.role-meta .sep { width: 2px; height: 2px; background: var(--gold); border-radius: 50%; }
.role-tag { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-pale); border: 0.5px solid rgba(200,134,10,0.3); padding: 4px 10px; border-radius: 2px; white-space: nowrap; }
.role-arrow { color: rgba(200,134,10,0.5); font-size: 16px; transition: transform .25s, color .25s; }
.role-row:hover .role-arrow { transform: translateX(4px); color: var(--gold-bright); }
.roles-footer { padding: 16px 22px; background: rgba(8,6,10,0.5); border-top: 0.5px solid rgba(200,134,10,0.15); display: flex; justify-content: space-between; align-items: center; }
.roles-footer .note { font-family: var(--italic); font-size: 13px; font-style: italic; color: var(--muted); }
.roles-footer a { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); text-decoration: none; }
.roles-footer a:hover { color: var(--gold-pale); }

/* Responsive */
@media (max-width: 1024px) {
  #studio { padding: 70px 32px; }
  .studio-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .studio-values { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}

/* Light theme */
body.light-theme #studio { background: #F8EED7; }
body.light-theme .studio-left h2 { color: #1F0A02; }
body.light-theme .studio-left h2 em { color: #A4111B; }
body.light-theme .studio-left p { color: rgba(31,10,2,0.78); }
body.light-theme .studio-glance { background: #FFFFFF; border-color: rgba(140,89,8,0.28); box-shadow: 0 4px 16px rgba(31,10,2,0.06); }
body.light-theme .glance-item { border-right-color: rgba(140,89,8,0.2); border-bottom-color: rgba(140,89,8,0.2); }
body.light-theme .glance-k { color: #B85C00; }
body.light-theme .glance-v { color: #1F0A02; }
body.light-theme .glance-v small { color: rgba(31,10,2,0.6); }
body.light-theme .roles-panel { background: #FFFFFF; border-color: rgba(140,89,8,0.28); box-shadow: 0 4px 16px rgba(31,10,2,0.06); }
body.light-theme .roles-hdr { background: rgba(184,92,0,0.1); border-bottom-color: rgba(140,89,8,0.3); }
body.light-theme .roles-hdr .ttl { color: #A4111B; }
body.light-theme .roles-hdr .ttl .dot { background: #B85C00; box-shadow: 0 0 10px #B85C00; }
body.light-theme .roles-hdr .count { color: #B85C00; }
body.light-theme .role-row { border-bottom-color: rgba(140,89,8,0.15); }
body.light-theme .role-row:hover { background: rgba(184,92,0,0.06); }
body.light-theme .role-title { color: #1F0A02; }
body.light-theme .role-meta { color: rgba(31,10,2,0.6); }
body.light-theme .role-meta .sep { background: #B85C00; }
body.light-theme .role-tag { color: #B85C00; border-color: rgba(140,89,8,0.35); background: rgba(184,92,0,0.05); }
body.light-theme .role-arrow { color: rgba(140,89,8,0.5); }
body.light-theme .role-row:hover .role-arrow { color: #B85C00; }
body.light-theme .roles-footer { background: #F8EED7; border-top-color: rgba(140,89,8,0.25); }
body.light-theme .roles-footer .note { color: rgba(31,10,2,0.65); }
body.light-theme .roles-footer a { color: #B85C00; }
body.light-theme .roles-footer a:hover { color: #A4111B; }
body.light-theme .val-item { background: #FFFFFF; border-color: rgba(140,89,8,0.28); }
body.light-theme .val-ttl { color: #A4111B; }
body.light-theme .val-body { color: rgba(31,10,2,0.7); }