/* ============================================================
   Hybrid — landing-page-only sections (index.html).
   Three treatments on Slab tokens: Poster (hero/close),
   Program Sheet (numbered body sections), Schematic (engine).
   ============================================================ */

/* ---- Poster hero ---- */
.hero-poster {
  /* padding-top/bottom only — a `padding` shorthand here would wipe the
     horizontal gutters .container provides, putting text against the screen
     edge on phones. Same reason .sheet uses longhand below. */
  padding-top: clamp(56px, 9vw, 110px); padding-bottom: 72px;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 44px; align-items: center;
}
.giant {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7.5vw, 88px); line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.giant__out { color: var(--bg); -webkit-text-stroke: 2px var(--ink); }
.giant__slab {
  display: inline-block; background: var(--blue); color: var(--blue-ink);
  padding: 0.04em 0.18em; transform: rotate(-1.2deg); margin-top: 0.06em;
}
.hero-poster__copy .lede { max-width: 44ch; margin: 22px 0 28px; }
.hero-poster__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-poster__note { margin-top: 16px; font-size: 13px; color: var(--faint); }

.hero-meta { display: flex; gap: 34px; margin-top: 36px; border-top: 2px solid var(--ink); padding-top: 16px; flex-wrap: wrap; }
.hero-meta__cell b { font-family: var(--font-display); font-weight: 400; font-size: 28px; display: block; }
.hero-meta__cell span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* Screenshot frame + halo (hero + loop) */
.shotwrap { position: relative; display: flex; justify-content: center; }
.shot-halo { position: absolute; inset: 9% -5% -8% -5%; background: var(--blue-soft); border-radius: 32px; }
.shot {
  position: relative; width: min(300px, 78vw);
  border: 2px solid var(--ink); border-radius: 34px; overflow: hidden;
  background: var(--raise); box-shadow: 0 18px 40px rgba(45, 45, 45, 0.14);
}
.shot img { width: 100%; height: auto; }

/* ---- Program Sheet rows ---- */
.sheet { padding-top: 72px; padding-bottom: 24px; }
.sheet__row { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--line-strong); }
.sheet__row:last-child { border-bottom: 1px solid var(--line-strong); }
.sheet__num { font-family: var(--font-mono); font-size: 13px; color: var(--faint); padding: 26px 0; letter-spacing: 0.05em; }
/* min-width:0 lets the 1fr track shrink below its content's min-content width,
   so .week-table-wrap's overflow-x scrolls the table instead of widening the page. */
.sheet__body { padding: 22px 0 34px 28px; border-left: 1px solid var(--line); min-width: 0; }
.sheet__body h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); text-transform: uppercase;
  letter-spacing: 0.02em; margin-bottom: 10px;
}
.sheet__body > p { font-size: 15px; max-width: 58ch; }
.sheet__note { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.week-table-wrap { overflow-x: auto; }
.week-table { margin-top: 16px; width: 100%; max-width: 500px; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.week-table td { border-top: 1px solid var(--line); padding: 8px 14px 8px 0; white-space: nowrap; color: var(--ink); }
.week-table td:last-child { color: var(--blue-text); text-align: right; padding-right: 0; }

/* ---- Engine schematic ---- */
.engine-panel {
  margin: 48px 0;
  background-image: radial-gradient(rgba(45, 45, 45, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--line); border-radius: var(--corner);
  padding: clamp(24px, 4vw, 40px);
}
.engine-panel .label-slab { margin-bottom: 8px; }
.engine-panel__lede { font-size: 14.5px; max-width: 58ch; margin-bottom: 26px; }

.flow { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 14px; }
.flow__node {
  background: var(--raise); border: 1.5px solid var(--ink); border-radius: 8px;
  padding: 14px 18px; min-width: 170px; position: relative; flex: 1 1 170px; max-width: 260px;
}
.flow__tag { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-text); margin-bottom: 6px; }
.flow__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.flow__detail { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.flow__annot {
  position: absolute; top: -11px; right: 12px;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em;
  padding: 5px 8px; border-radius: 4px;
}
.flow__arrow { display: flex; align-items: center; padding: 0 10px; color: var(--ink); }
.flow__cap { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--muted); margin-top: 22px; letter-spacing: 0.03em; }
.flow__cap b { color: var(--blue-text); font-weight: 500; }

/* ---- Weekly loop ---- */
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.loop-step { border: 1px solid var(--line); border-radius: var(--corner); background: var(--raise); padding: 16px; }
.loop-shot { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 14px; background: var(--bg); }
.loop-shot img { width: 100%; height: auto; }
.loop-step h4 { font-size: 14.5px; margin-bottom: 4px; }
.loop-step p { font-size: 12.5px; }

/* ---- Poster close ---- */
.close-poster { padding: 96px 0; text-align: center; border-top: 2px solid var(--ink); }
.close-poster__giant {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 5.5vw, 60px); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase; margin-bottom: 26px;
}
.close-poster__giant .accent { color: var(--blue); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .loop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero-poster { grid-template-columns: 1fr; gap: 36px; }
  /* Drop the halo's horizontal bleed — at narrow widths it pushed past the
     viewport and gave the page a horizontal scrollbar. */
  .shot-halo { inset: 9% 0 -8% 0; }
  .sheet__row { grid-template-columns: 56px 1fr; }
  .sheet__body { padding-left: 18px; }
  .flow { flex-direction: column; align-items: flex-start; }
  /* flex: 0 0 auto — once the flow stacks, the 170px flex-basis from the row
     layout would apply to height instead of width and lock every node to
     170px tall regardless of content. */
  .flow__node { max-width: none; width: 100%; flex: 0 0 auto; }
  .flow__arrow { transform: rotate(90deg); padding: 6px 0; margin-left: 24px; }
}
@media (max-width: 600px) {
  .loop-grid { grid-template-columns: 1fr; }
}