/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4
 * Hallmark · macrostructure: Split Studio · theme: existing Carret identity
 * genre: playful · tone: warm and practical · nav: shared N1b · footer: shared Ft5
 * audience: parents and school leaders · enrichment: generated studio concept illustrations
 * motion: existing link feedback only · review: browser review by owner
 * source audit: named tokens, upright headings, real links, no imitation chrome
 * section rhythm: soft blue App, soft orange Game, soft purple AI; neutral foundation
 */

.studios-page { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.studios-page h1, .studios-page h2, .studios-page h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.studios-page h2 { font-size: var(--text-heading); line-height: 1.15; letter-spacing: -.035em; }
.studios-page p { color: var(--color-muted); }
.studios-page a:focus-visible, .studios-page button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.studios-page .hm-footer { background: var(--color-blue-soft); padding-block: var(--space-2xl) var(--space-lg); }
.studios-page .hm-footer-invite p, .studios-page .hm-colophon { color: var(--color-blue-dark); }

html:has(body.studios-page) { scroll-padding-top: calc(var(--height-site-nav) + var(--height-studio-nav) + var(--space-lg)); }
.st-hero { padding-block: var(--space-xl); }
.st-hero-intro { display: grid; gap: var(--space-lg); }
.st-hero h1 { font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -.04em; max-width: 20ch; }
.st-hero h1 span { color: var(--color-accent); }
.st-hero-intro > p { font-size: var(--text-base); max-width: 46ch; }
.st-index-bar { position: sticky; top: var(--height-site-nav); z-index: var(--z-section-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.st-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); height: var(--height-studio-nav); }
.st-index a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; min-height: 44px; min-width: 0; white-space: nowrap; }
.st-index strong { display: block; font: 700 var(--text-sm)/1.3 var(--font-display); }
.st-index small { display: none; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.st-index .icon { display: none; color: var(--color-accent); width: 20px; height: 20px; flex-shrink: 0; transform: rotate(90deg); }
.st-index a:active strong { text-decoration: underline; text-underline-offset: .2em; }

.st-detail { padding-block: var(--space-2xl); scroll-margin-top: 0; }
.st-detail-app { background: var(--color-blue-soft); }
.st-detail-game { background: var(--color-orange-soft); }
.st-detail-ai { background: var(--color-purple-soft); }
.st-detail-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.st-detail-copy { min-width: 0; }
.st-detail-copy > .hm-link { margin-top: var(--space-lg); }
.st-detail .st-lead { color: var(--color-ink); font-size: var(--text-md); font-weight: 800; margin-block: var(--space-md); }
.st-detail-copy > p:not(.st-lead) { max-width: 50ch; font-size: var(--text-base); }
.st-learning { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 0; }
.st-learning > div { display: grid; gap: var(--space-2xs); }
.st-learning dt { font-size: var(--text-base); font-weight: 800; }
.st-learning dd { margin: 0; color: var(--color-muted); font-size: var(--text-base); }
.st-illustration { margin: 0; min-width: 0; }
.st-illustration figcaption { padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.studios-page .st-detail-app p, .st-detail-app dd, .st-detail-app figcaption { color: var(--color-blue-dark); }
.studios-page .st-detail-game p, .st-detail-game dd, .st-detail-game figcaption { color: var(--color-ink); }
.studios-page .st-detail-ai p, .st-detail-ai dd, .st-detail-ai figcaption { color: var(--color-purple); }
.st-studio-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--radius-card); background: var(--color-paper); }

.st-foundation { background: var(--color-surface); padding-block: var(--space-2xl); }
.st-foundation-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.st-foundation p { max-width: 48ch; margin-top: var(--space-lg); color: var(--color-blue-dark); }
.st-foundation .hm-link { margin-top: var(--space-md); }
.st-perspectives { display: grid; gap: var(--space-lg); margin: 0; }
.st-perspectives > div { display: grid; gap: var(--space-xs); }
.st-perspectives dt { color: var(--color-blue-dark); font-size: var(--text-sm); font-weight: 800; }
.st-perspectives dd { margin: 0; color: var(--color-blue-dark); font: 700 var(--text-lg)/1.4 var(--font-display); max-width: 30ch; }

.st-home { padding-block: var(--space-2xl); background: var(--color-blue-soft); }
.home-page .st-home .hm-section-head h2 { max-width: 24ch; }
.st-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
/* Each studio is one card, and the whole card follows the studio link. */
.st-home-studio { position: relative; min-width: 0; display: grid; align-content: start; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); }
.st-home-studio > div { overflow: hidden; }
.st-home-studio .st-studio-image { border-radius: 0; transition: transform var(--dur-panel) var(--ease-out); }
.st-home-studio h3 { margin: var(--space-md) var(--space-lg) 0; }
.st-home-studio h3 a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; font-size: var(--text-lg); line-height: 1.3; white-space: nowrap; }
.st-home-studio h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.home-page .st-home-studio h3 a:focus-visible { outline: 0; }
.st-home-studio h3 a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.st-home-studio h3 .icon { color: var(--color-accent); width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-short) var(--ease-out); }
.st-home-studio > p { margin: var(--space-2xs) var(--space-lg) var(--space-lg); font-size: var(--text-base); max-width: 44ch; }
.st-home-studio h3 a:active { text-decoration: underline; text-underline-offset: .2em; }

@media (hover: hover) and (pointer: fine) {
  .st-index a:hover strong { text-decoration: underline; text-underline-offset: .2em; color: var(--color-accent); }
  .st-home-studio:hover h3 a { color: var(--color-accent); }
  .st-home-studio:hover h3 .icon { transform: translateX(3px); }
  .st-home-studio:hover .st-studio-image { transform: scale(1.03); }
}
@media (min-width: 40rem) {
  .st-hero { padding-top: var(--space-2xl); }
  .st-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .st-index a { padding-block: var(--space-md); }
  .st-index strong { font-size: var(--text-md); }
  .st-index small, .st-index .icon { display: block; }
  .st-home-grid { grid-template-columns: minmax(0, 1fr); }
  .st-home-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; }
  .st-home-studio > div { grid-column: 1; grid-row: 1 / 3; }
  .st-home-studio h3, .st-home-studio > p { grid-column: 2; }
  .st-home-studio h3 { align-self: end; }
}
@media (min-width: 60rem) {
  .st-hero { padding-block: var(--space-2xl); }
  .st-hero-intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
  .st-hero-intro > p { max-width: 38ch; font-size: var(--text-md); }
  .st-index { gap: var(--space-xl); }
  .st-index strong { font-size: var(--text-lg); }
  .st-detail { padding-block: var(--space-3xl); }
  .st-detail-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); }
  .st-detail-game .st-detail-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .st-detail-game .st-detail-copy { grid-column: 2; grid-row: 1; }
  .st-detail-game .st-illustration { grid-column: 1; grid-row: 1; }
  .st-foundation { padding-block: var(--space-3xl); }
  .studios-page .hm-footer { padding-block: var(--space-3xl) var(--space-lg); }
  .st-foundation-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
  .st-home { padding-block: var(--space-3xl); }
  .st-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .st-home-studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; }
  .st-home-studio > div, .st-home-studio h3, .st-home-studio > p { grid-column: auto; grid-row: auto; }
  .st-home-studio h3 { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .st-home-studio .st-studio-image, .st-home-studio h3 .icon { transition: none; }
  .st-home-studio:hover .st-studio-image, .st-home-studio:hover h3 .icon { transform: none; }
}