/* ============================================================
   PAGE HARNESS. Not the deliverable.

   Two jobs. One: put a plausible GB landing page behind the gates,
   because a welcome gate that looks fine on a blank screen and
   wrong over a dark hero film has not been reviewed. Two: give the
   reviewer a workbench that is unmistakably NOT part of the page,
   so nothing on the rail can be misread as design.

   Tokens below are lifted verbatim from 36c-forge:
   brands/gb/tokens.css and chassis/assets/css/core.css. They are
   copied rather than invented so a gate that looks right here
   looks identical when it lands on the chassis.
   ============================================================ */

@font-face {
  font-family: 'AdihausDIN';
  src: url('../fonts/AdihausDIN-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AdihausDIN';
  src: url('../fonts/AdihausDIN-Medium.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AdihausDIN Condensed';
  src: url('../fonts/AdihausDIN-CnBold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- GB brand pack ---- */
  --brand-font-display: 'AdihausDIN Condensed', 'Barlow Condensed', Impact, sans-serif;
  --brand-font-body: 'AdihausDIN', system-ui, sans-serif;
  --brand-display-transform: uppercase;

  --brand-ink-strong: #1A1A1A;
  --brand-ink: #333333;
  --brand-bg: #FCFCFC;
  --brand-bg-muted: #EDEDED;
  --brand-surface-dark: #1A1A1A;
  --brand-surface-muted: #333333;
  --brand-ink-on-dark: #FCFCFC;

  --brand-accent-bright: #27A5FF;
  --brand-accent: #0074C8;
  --brand-accent-ink: #0074C8;

  --brand-cta-bg: #E2211C;
  --brand-cta-bg-hover: #7C1313;
  --brand-cta-bg-active: #5E0F0F;
  --brand-cta-ink: #FFFFFF;
  --brand-cta-radius: 5px;
  --brand-quiet-ink: #333333;

  /* ---- chassis core ---- */
  --f-text-micro:   0.75rem;
  --f-text-caption: 0.8125rem;
  --f-text-small:   1.0625rem;
  --f-text:         1.125rem;
  --f-text-lead:    1.25rem;

  --f-h5: clamp(1.2rem,   0.75vw + 0.9rem, 1.406rem);
  --f-h4: clamp(1.35rem,  1.5vw  + 0.8rem, 1.758rem);
  --f-h3: clamp(1.5rem,   2.5vw  + 0.7rem, 2.197rem);
  --f-h2: clamp(1.875rem, 3.5vw  + 0.6rem, 2.747rem);
  --f-h1: clamp(2.25rem,  4.5vw  + 0.6rem, 3.433rem);
  --f-display: clamp(2.75rem, 7vw, 5rem);

  --f-lh-display: 1.05; --f-lh-h1: 1.1; --f-lh-h2: 1.2; --f-lh-h3: 1.25;
  --f-lh-h4: 1.3; --f-lh-h5: 1.35; --f-lh-body: 1.6; --f-lh-small: 1.55;

  --f-track-display: -0.025em; --f-track-h1: -0.02em;
  --f-track-h2: -0.015em; --f-track-h3: -0.01em; --f-track-eyebrow: 0.12em;

  --f-space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --f-space-xs:  clamp(0.5rem,  1vw,   0.75rem);
  --f-space-s:   clamp(0.75rem, 1.5vw, 1.25rem);
  --f-space-m:   clamp(1.5rem,  3vw,   2.5rem);
  --f-space-l:   clamp(3rem,    6vw,   5rem);
  --f-space-xl:  clamp(5rem,    10vw,  8rem);

  --f-measure-narrow: 55ch; --f-measure: 65ch; --f-measure-wide: 80ch;

  /* --f-spring (the chassis overshoot curve) is deliberately NOT
     copied across: nothing in these five gates should bounce, and
     leaving the token here is an invitation to reach for it. */
  --f-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --f-cta-pad: 62px;
  --f-header-h: 84px;
  --f-accent-ink: var(--brand-accent-ink);
  --f-ink-base: var(--brand-ink-strong);
  --f-quiet-ink: var(--brand-quiet-ink);
  --f-card-bg: var(--brand-bg-muted);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-ink);
  font-family: var(--brand-font-body);
  font-size: var(--f-text);
  line-height: var(--f-lh-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 260px; /* the rail */
}
h1, h2, h3 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  text-transform: var(--brand-display-transform);
  color: var(--brand-ink-strong);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--f-display); line-height: var(--f-lh-display); letter-spacing: var(--f-track-display); }
h2 { font-size: var(--f-h2); line-height: var(--f-lh-h2); letter-spacing: var(--f-track-h2); }
p { margin: 0 0 1em; max-width: var(--f-measure); text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 2px; }

/* ---- the shared CTA, straight from core.css ---- */
.f-cta {
  position: relative; overflow: hidden; display: inline-block;
  background: var(--brand-cta-bg); color: var(--brand-cta-ink);
  font-family: var(--brand-font-body);
  font-size: var(--f-text); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; text-align: center;
  padding: 15px var(--f-cta-pad);
  border: 0; border-radius: var(--brand-cta-radius);
  cursor: pointer;
}
.f-cta:active { background: var(--brand-cta-bg-active); }
.f-cta::before, .f-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg) translateX(-160%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .f-cta:hover::after, .f-cta:focus-visible::after { animation: f-sheen 0.7s var(--f-ease); }
  .f-cta.f-glint::before { animation: f-sheen 0.9s var(--f-ease); }
}
@keyframes f-sheen {
  from { transform: skewX(-18deg) translateX(-160%); }
  to   { transform: skewX(-18deg) translateX(320%); }
}
.f-cta-lg { font-size: var(--f-text-lead); padding: 17px 52px; }
@media (max-width: 900px) {
  .f-cta { display: block; width: 100%; padding-inline: 20px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.pg-header {
  position: absolute; inset-inline: 0; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  min-height: var(--f-header-h);
  padding: 0 clamp(16px, 4vw, 40px);
  color: #FCFCFC;
}
.pg-logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  font-size: var(--f-text-small); letter-spacing: 0.02em;
}
.pg-logo svg { width: 30px; height: 23px; color: var(--brand-cta-bg); flex: none; }
.pg-logo b { font-weight: 500; }
.pg-nav { margin-left: auto; }
.pg-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.pg-nav a {
  color: rgba(255,255,255,0.86); text-decoration: none;
  font-size: var(--f-text-caption); text-transform: uppercase; letter-spacing: 0.09em;
}
.pg-nav a:hover { color: #fff; }
.pg-header-cta { flex: none; padding-inline: 34px; font-size: var(--f-text-caption); }
@media (max-width: 900px) {
  .pg-nav { display: none; }
  .pg-header-cta { display: inline-block; width: auto; margin-left: auto; }
}

/* ============================================================
   HERO
   ============================================================ */
.pg-hero {
  position: relative;
  min-height: min(680px, 78svh);
  display: grid; align-items: end;
  padding: calc(var(--f-header-h) + 40px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 72px);
  background: #1A1A1A url('../media/hero-poster.jpg') center / cover no-repeat;
  color: #FCFCFC;
  isolation: isolate;
}
.pg-hero-film {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(12,12,12,0.92) 0%, rgba(12,12,12,0.55) 42%, rgba(12,12,12,0.34) 100%);
}
.pg-hero-inner { width: min(1200px, 100%); margin-inline: auto; }
.pg-kicker {
  margin: 0 0 var(--f-space-s);
  font-size: var(--f-text-caption); text-transform: uppercase;
  letter-spacing: var(--f-track-eyebrow); color: var(--brand-accent-bright);
}
.pg-hero h1 { color: #FCFCFC; margin-bottom: var(--f-space-s); max-width: 12ch; }
.pg-lead {
  font-size: var(--f-text-lead); color: rgba(255,255,255,0.86);
  max-width: 46ch; margin-bottom: var(--f-space-m);
}
.pg-hero .f-cta { max-width: 340px; }
.pg-scroll-note {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(40px, 6vw, 72px);
  margin: 0; font-size: var(--f-text-caption); color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.1em;
}
@media (max-width: 900px) { .pg-scroll-note { display: none; } }

/* ============================================================
   BAND
   ============================================================ */
.pg-band { padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px); }
.pg-band-inner { width: min(1200px, 100%); margin-inline: auto; }
.pg-band p { font-size: var(--f-text); max-width: 62ch; }

/* ============================================================
   THE RAIL. System chrome, on purpose: near-black with an amber
   edge, the same register the forge staging banner uses, so it
   reads as a tool sitting on top of the page rather than as part
   of the school's site.
   ============================================================ */
.rail {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: #111214;
  border-top: 2px solid #FFD166;
  color: #FCFCFC;
  font-size: var(--f-text-caption);
  box-shadow: 0 -18px 44px rgba(0,0,0,0.34);
}
.rail-body {
  width: min(1240px, 100%); margin-inline: auto;
  padding: 16px clamp(14px, 3vw, 28px) 18px;
  display: grid; gap: 14px;
}
.rail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rail-title {
  margin: 0; font-family: var(--brand-font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1.05rem; color: #FFD166;
}
.rail-sub { margin: 0; color: rgba(255,255,255,0.62); max-width: 70ch; }

.rail-collapse {
  position: absolute; top: -34px; right: clamp(14px, 3vw, 28px);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 0;
  border-radius: 6px 6px 0 0;
  background: #111214; color: #FFD166;
  border-top: 2px solid #FFD166;
  font: 500 12px/1 var(--brand-font-body);
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
}
.rail-collapse svg { width: 14px; height: 14px; transition: rotate 0.3s var(--f-ease); }
.rail[data-collapsed] .rail-collapse svg { rotate: 180deg; }
.rail[data-collapsed] .rail-body { display: none; }

.rail-buttons {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, 1fr);
}
.rail-btn {
  display: grid; gap: 3px;
  padding: 11px 13px 12px;
  text-align: left;
  background: #1C1E22;
  border: 1px solid #2E3238;
  border-radius: 7px;
  color: #FCFCFC;
  font-family: var(--brand-font-body);
  cursor: pointer;
  transition: background-color 0.2s var(--f-ease), border-color 0.2s var(--f-ease), translate 0.2s var(--f-ease);
}
.rail-btn:hover { background: #24272C; border-color: #FFD166; translate: 0 -2px; }
.rail-btn-n {
  font: 700 11px/1 var(--brand-font-display);
  letter-spacing: 0.12em; color: #FFD166;
}
.rail-btn-t { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; }
.rail-btn-d { font-size: 0.75rem; color: rgba(255,255,255,0.55); line-height: 1.35; }

.rail-meta {
  display: grid; gap: 10px 26px;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #2A2D32;
}
.rail-field { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rail-field label { color: rgba(255,255,255,0.62); }
.rail-field input[type="date"] {
  background: #1C1E22; border: 1px solid #2E3238; border-radius: 5px;
  color: #FCFCFC; font: inherit; padding: 5px 8px;
  color-scheme: dark;
}
.rail-link {
  background: none; border: 0; padding: 2px 0;
  color: #8FD0FF; font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.rail-link:hover { color: #C8E8FF; }
.rail-deadline { margin: 0; color: rgba(255,255,255,0.78); max-width: none; }
.rail-deadline b { color: #FFD166; font-weight: 500; }
/* 0.45 measured 4.37:1 on this ground at 12px, which is under the
   floor; 0.55 is 5.9:1. Harness chrome still has to be readable. */
.rail-rule { display: block; color: rgba(255,255,255,0.55); font-size: 0.75rem; }
.rail-field-auto { grid-column: 1 / -1; gap: 16px; }
.rail-check { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.72); cursor: pointer; }
.rail-check input { accent-color: #FFD166; width: 15px; height: 15px; }
.rail-check select {
  background: #1C1E22; border: 1px solid #2E3238; border-radius: 4px;
  color: #FCFCFC; font: inherit; padding: 2px 5px;
}

@media (max-width: 1080px) {
  .rail-buttons { grid-template-columns: repeat(3, 1fr); }
  .rail-meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { padding-bottom: 340px; }
  .rail-buttons { grid-template-columns: repeat(2, 1fr); }
  .rail-btn-d { display: none; }
  .rail-body { max-height: 62svh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-btn, .rail-collapse svg { transition: none !important; }
  .f-cta::before, .f-cta::after { animation: none !important; }
}