/* =========================================================================
   TGU — site layer: base + responsive
   Inline styles carry the desktop design (from Claude Design);
   this sheet supplies global base rules and mobile/tablet overrides.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); }
::selection { background: var(--acid); color: var(--on-accent); }
a { color: inherit; }
textarea { font-family: var(--font-ui); }
img { max-width: 100%; }

@keyframes tgu-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  [style*="tgu-marq"] { animation: none !important; }
}

/* Focus visibility (keyboard users) */
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* Labels / metadata (used as className in the app) */
.label {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted);
}
.meta {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}

/* ------------------------------------------------------------------
   Responsive overrides. Inline styles win by specificity, so these
   use !important — they only fire below the breakpoints.
   ------------------------------------------------------------------ */

/* Section side padding tightens on small screens */
@media (max-width: 720px) {
  .pad-x { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- Navigation --- */
.nav-desktop { display: flex; align-items: center; gap: 32px; }
.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-burger { display: flex; }
}
.nav-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; padding: 24px 20px;
}

/* --- Grids --- */
@media (max-width: 1024px) {
  .g-home-roster { grid-template-columns: repeat(2, 1fr) !important; }
  .g-team { grid-template-columns: repeat(2, 1fr) !important; }
  .g-offer { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) {
  .g-split, .g-approach, .g-artist, .g-booking, .g-manifesto,
  .g-founder, .g-footer, .g-media { grid-template-columns: 1fr !important; }
  .g-manifesto > div:first-child, .g-founder-side { position: static !important; display: flex; align-items: baseline; gap: 16px; }
  .g-more { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .g-home-roster, .g-team, .g-offer { grid-template-columns: 1fr !important; }
  .g-form-2 { grid-template-columns: 1fr !important; }
}

/* --- Roster index rows --- */
@media (max-width: 860px) {
  .roster-row { grid-template-columns: 44px 1fr 32px !important; gap: 14px !important; padding: 18px 12px !important; }
  .roster-row .row-genres, .roster-row .row-base { display: none !important; }
}

/* Hero headline never overflows */
h1 { overflow-wrap: break-word; }
h1, h2, h3 { overflow-wrap: anywhere; }

/* --- Mobile safety net --------------------------------------------------
   Prevent any stray horizontal overflow from forcing the whole page wider
   than the phone (the "zoomed-out desktop" failure). `clip` (not `hidden`)
   keeps the sticky nav working. Embeds and media stay within the viewport. */
html, body { overflow-x: clip; }
body { max-width: 100%; }
iframe, video, img { max-width: 100%; }

:root { --px: clamp(20px, 5vw, 40px); }