@import url('../fonts/gta-sv/fonts.css');

body.gta-project-page {
  color-scheme: dark;
  --bg: #1c1c1f;
  --text: #f0e8ce;
  --muted: #c2c6c4;
  --line: #45495d;
  --accent: #dcb64f;
  background: var(--bg);
  color: var(--text);
}
.page-shell.gta-project-shell { max-width: 1200px; padding-top: 0; }
.gta-project-nav, .gta-project {
  --gta-mono: 'IBM Plex Mono', 'Shedletsky Cascadia Mono', monospace;
  --gta-display: 'Changa One', Impact, sans-serif;
  --gta-slate: #45495d;
  --gta-panel: #2e3343;
  --gta-ink: #111821;
  --gta-text: #f0e8ce;
  --gta-muted: #c2c6c4;
  --gta-accent: #dcb64f;
  --gta-selection: #708e6c;
  --gta-green: #b9d59b;
  --gta-rule: #62697b;
  font-family: var(--gta-mono);
}
.gta-project-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gta-slate);
  font-size: 13px;
  font-weight: 500;
}
.gta-project-nav a { padding: 8px 14px; color: var(--gta-muted); text-decoration: none; }
.gta-project-nav a:hover { color: var(--gta-text); background: var(--gta-panel); }
.gta-project-nav [aria-current] { color: var(--gta-ink); background: var(--gta-selection); font-weight: 600; }
.gta-project-nav [aria-current]::before { content: '› '; }
.gta-project { color: var(--gta-text); font-size: 14px; line-height: 1.8; }
.gta-project p { margin-top: 0; }
.gta-project a { color: var(--gta-accent); }
.gta-project a:hover { color: var(--gta-text); }
.gta-project a:focus-visible, .gta-project-nav a:focus-visible { outline: 3px solid var(--gta-accent); outline-offset: 4px; }
.gta-project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 32px;
  padding: 22px 28px;
  margin: 20px 0 24px;
  background: var(--gta-panel);
  border: 1px solid var(--gta-rule);
  border-left: 6px solid var(--gta-accent);
}
.gta-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .1em; line-height: 1.6; margin: 0 0 10px; color: var(--gta-muted); }
.gta-project h1 {
  font: 400 clamp(32px, 3.6vw, 46px)/.98 var(--gta-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--gta-text);
  text-shadow: 3px 3px 0 var(--gta-ink);
  overflow-wrap: anywhere;
  margin: 0 0 14px;
}
.gta-project h1 span { display: block; margin-top: 8px; font: 500 14px/1.4 var(--gta-mono); letter-spacing: .2em; color: var(--gta-accent); text-shadow: none; }
.gta-project .gta-deck { font-size: 16px; line-height: 1.6; font-weight: 500; margin-bottom: 14px; color: var(--gta-green); }
.gta-project-hero p:not(.gta-eyebrow) { max-width: 65ch; }
.gta-hero-copy > p:last-child { margin-bottom: 0; font-size: 13px; line-height: 1.7; }
.gta-project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 0 0 12px; }
.gta-project-actions a { font-weight: 600; font-size: 13px; }
.gta-project-actions .gta-play { background: var(--gta-accent); color: var(--gta-ink); padding: 12px 24px; border: 1px solid var(--gta-accent); border-radius: 2px; text-decoration: none; }
.gta-project-actions .gta-play:hover { background: #edca6a; border-color: #edca6a; color: var(--gta-ink); }
.gta-prototype-note, .gta-view-help { font-size: 11px; line-height: 1.8; color: var(--gta-muted); }
.gta-project .gta-prototype-note { margin-bottom: 0; }
.gta-world-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; border: 1px solid var(--gta-rule); border-left: 4px solid var(--gta-selection); background: var(--gta-ink); padding: 10px 16px; margin-bottom: 12px; }
.gta-world-status .gta-eyebrow { color: var(--gta-green); margin: 0; font-size: 11px; }
.gta-world-status strong { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--gta-text); white-space: nowrap; }
.gta-world-status small { font-size: 12px; font-weight: 400; color: var(--gta-muted); }
.gta-world-status dl { display: flex; flex: 1; flex-wrap: wrap; gap: 12px 24px; margin: 0; }
.gta-world-status dl div { display: flex; gap: 8px; }
.gta-controls div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--gta-slate); padding: 9px 0; }
.gta-world-status dt, .gta-world-status dd { font-size: 12px; margin: 0; }
.gta-world-status dd { font-weight: 500; color: var(--gta-green); font-variant-numeric: tabular-nums; }
.gta-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.gta-section-heading > span { font-size: 11px; color: var(--gta-muted); }
.gta-project h2 { font: 400 36px/1.15 var(--gta-display); letter-spacing: -.01em; color: var(--gta-text); margin: 0 0 18px; text-shadow: 2px 2px 0 var(--gta-ink); }
.gta-section-heading h2 { margin: 0; }
.gta-section-heading .gta-eyebrow { margin-bottom: 8px; }
.gta-live-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 1px solid var(--gta-rule); border-top: 4px solid var(--gta-accent); border-radius: 2px; background: var(--gta-ink); }
.gta-view-help { margin: 12px 0; }
.gta-information-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 1px solid var(--gta-slate); margin-top: 40px; padding: 40px 0; }
.gta-controls { margin: 0; padding: 18px 24px; align-self: start; background: var(--gta-panel); border: 1px solid var(--gta-rule); }
.gta-controls div:first-child { border-top: 0; }
.gta-controls dt, .gta-controls dd { font-size: 12px; margin: 0; }
.gta-controls dd { color: var(--gta-muted); text-align: right; }
.gta-controls kbd { font: 600 12px var(--gta-mono); color: var(--gta-accent); }
.gta-about { border-top: 1px solid var(--gta-slate); padding: 40px 0 16px; max-width: 82ch; }
.gta-offline-panel { display: grid; place-content: center; min-height: 280px; text-align: center; background: var(--gta-panel); border: 1px solid var(--gta-rule); padding: 32px; }
.gta-offline-panel strong { font-size: 18px; font-weight: 500; }
.gta-offline-panel p { max-width: 55ch; font-size: 13px; color: var(--gta-muted); }
.gta-unavailable { font-weight: 500; color: var(--gta-muted); }
.gta-project-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; background: var(--gta-accent); color: var(--gta-ink); font-size: 11px; font-weight: 500; padding: 10px 16px; margin-top: 24px; }
.gta-live-section, .gta-information-grid, .gta-about { scroll-margin-top: 90px; }
@media (max-width: 800px) {
  .gta-project-hero { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .gta-world-status { padding: 10px 14px; gap: 10px 18px; }
  .gta-world-status strong { font-size: 24px; }
  .gta-world-status dl { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
  .gta-hero-entry { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
  .gta-project-actions { margin: 0; }
  .gta-information-grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; margin-top: 32px; }
  .gta-section-heading { align-items: start; flex-direction: column; gap: 10px; }
  .gta-project-nav { gap: 2px; font-size: 12px; }
  .gta-project-nav a { padding: 8px 10px; }
  .gta-live-frame { aspect-ratio: 4/3; }
  .gta-about { padding-top: 32px; }
}
@media (max-width: 440px) {
  .gta-live-frame { aspect-ratio: 3/4; }
  .gta-project-hero { padding: 22px 18px; border-left-width: 4px; }
  .gta-project h1 { font-size: 36px; }
  .gta-project-actions { gap: 18px; }
  .gta-controls { padding: 14px 18px; }
}