/* The FORGE Studio page (studio.html), on top of home.css: the home page's type scale and section rhythm (S102). Light
   only. The hero film plays when asked; the Build, Test, Fly steps drive real Studio footage. */

.st-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  max-width: 1360px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(24px, 3vw, 40px);
  min-height: min(720px, calc(100dvh - var(--header-h) - 40px));
}
.st-hero h1 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.05; letter-spacing: -.036em; font-weight: 600; margin: 0; text-wrap: balance; max-width: 15ch; }
.st-film { margin: 0; }
.st-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--r-media); background: #0d1830; box-shadow: 0 30px 70px rgba(20, 51, 107, .18); }
.st-film figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 900px) {
  .st-hero { grid-template-columns: 1fr; min-height: 0; }
  .st-film { order: -1; }
}

/* ------------------------------------------------------------------------------------------------ hero */
/* The film full width, 21:9, the words over a dark wash in its lower left (S166 taste 5). On a phone the words sit
   under the film, on the page. */
.sx-hero { max-width: 1360px; margin: 0 auto; padding: clamp(16px, 2.4vw, 32px) var(--gutter) 0; }
.sx-stage { position: relative; border-radius: var(--r-media); overflow: hidden; background: #0d1830; aspect-ratio: 21 / 9; box-shadow: 0 30px 70px rgba(20, 51, 107, .16); }
.sx-stage :is(video, .film-picture) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
.sx-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 24, 48, .66) 0%, rgba(13, 24, 48, .5) 36%, rgba(13, 24, 48, .08) 66%, rgba(13, 24, 48, 0) 78%);
}
.sx-copy { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 52px); z-index: 1; max-width: min(560px, 52%); color: #fff; text-shadow: 0 1px 14px rgba(9, 17, 30, .55); }
/* The lighter wash (Ragul 2026-10-19) keeps the words readable with a soft shadow; buttons keep their own colours. */
.sx-copy .btn { text-shadow: none; }
.sx-copy h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; color: #fff; }
.sx-copy .hm-lead { color: #E4EAF3; max-width: 40ch; }
.sx-copy .hm-actions { margin-top: 26px; }
.sx-copy .btn { background: #fff; color: var(--navy); }
.sx-copy .btn:hover { background: var(--navy-50); color: var(--navy); }
.sx-copy .hm-link { color: #fff; }
.sx-copy .hm-link:hover { color: var(--navy-100); }
.sx-copy :focus-visible { outline-color: #fff; }
.sx-stage .hm-play { left: auto; right: 16px; z-index: 2; }
@media (max-width: 900px) {
  .sx-stage { aspect-ratio: 16 / 9; overflow: visible; background: none; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; }
  .sx-stage :is(video, .film-picture) { position: static; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-media); box-shadow: 0 20px 50px rgba(20, 51, 107, .14); }
  .sx-stage::after { content: none; }
  .sx-stage .hm-play { top: 12px; bottom: auto; right: 12px; }
  .sx-copy { position: static; max-width: none; color: var(--ink); margin-top: 24px; }
  .sx-copy h1 { color: var(--ink); }
  .sx-copy .hm-lead { color: var(--ink-2); }
  .sx-copy .btn { background: var(--btn); color: var(--btn-ink); }
  .sx-copy .btn:hover { background: var(--btn-hover); color: var(--btn-ink); }
  .sx-copy .hm-link { color: var(--navy); }
  .sx-copy :focus-visible { outline-color: var(--focus); }
}

/* ------------------------------------------------------------------------------------------------ Inside FORGE Studio */
/* Two columns, so every Studio picture is large enough to read; no box around each part (S166 taste 3, 12). */
.sp-parts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.sp-part { display: flex; flex-direction: column; }
.sp-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-media); }
.sp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-pic-blocks { background: #fff; }
.sp-pic-blocks img { object-fit: contain; object-position: 50% 50%; }
.sp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 2px 0; flex: 1; }
.sp-body b { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.sp-body > span { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; max-width: 52ch; }
.sp-body .hm-link { margin-top: 4px; }
@media (max-width: 700px) { .sp-parts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ AI Helper */
.st-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
/* A callout is a tint, not a coloured stripe (S166 taste 4). */
.st-ask { margin: 28px 0 0; padding: 18px 22px; background: var(--navy-50); border-radius: var(--r-card); font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 52ch; }
.st-rules { display: grid; gap: 22px; }
.st-rules > div { padding: 20px 22px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); }
.st-rules h3 { margin: 0; font-size: 18px; font-weight: 600; }
.st-rules ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) { .st-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ Safety */
/* Four facts in a square, the word large, a hairline between (S166 taste 5). */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 28px 0 0; max-width: 980px; }
.st-grid > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line-2); }
.st-grid dt { font-weight: 600; font-size: 22px; letter-spacing: -.015em; }
.st-grid dd { margin: 0; color: var(--ink-2); font-size: var(--t-body, 16px); line-height: 1.55; }
@media (max-width: 760px) { .st-grid { grid-template-columns: 1fr; } .st-grid > div { grid-template-columns: 1fr; gap: 6px; } }

/* ------------------------------------------------------------------------------------------------ Get FORGE Studio */
.sp-needs { margin-top: 26px; gap: 12px; }
.sp-needs li { font-size: var(--t-body); color: var(--ink-2); }
.sp-price { margin: 24px 0 0; max-width: 48ch; font-size: var(--t-body); line-height: 1.55; color: var(--ink); }
.sp-price a { color: var(--navy); font-weight: 600; }
.sp-board { margin: 18px 0 0; color: var(--ink-2); font-size: var(--t-body); }

/* Students page (students.html): the same hero as Studio, then the three steps in a row. */
.st-steps-wrap { padding: 0 0 clamp(24px, 4vw, 48px); }
.st-steps { margin: 0; }
@media (max-width: 760px) { .st-steps { grid-template-columns: 1fr; } }

/* S172: the 1080p loop film keeps its whole loop in view on a computer: as tall as the frame, on its right, its left edge
   fading into the navy behind the words (as on the home page). On a phone the film sits above the words with no shadow
   on them. */
@media (min-width: 901px) {
  .sx-stage :is(video, .film-picture) { left: auto; right: 0; width: auto; max-width: none; aspect-ratio: 16 / 9; object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
}
@media (max-width: 900px) { .sx-copy { text-shadow: none; } }
/* S172: the Guide picture under the AI request. */
.st-ai-shot { margin: 22px 0 0; }
.st-ai-shot img { width: 100%; height: auto; display: block; border-radius: var(--r-media); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.st-ai-shot figcaption { margin-top: 10px; color: var(--ink-3); font-size: 14px; }