/* ============================================================
   NEEL SATYAVOLU — BROADCAST JOURNALISM PORTFOLIO
   colors_and_type.css — design tokens (base + semantic)

   Direction: "Terminal Newsroom" — dark-first monospace
   minimalism inspired by the xAI reference system. Near-black
   blue-undertone canvas (#1f2228), pure white as the voice,
   Geist Mono as display + button face, Geist sans for reading,
   sharp 0px corners, opacity-based borders, NO shadows, NO
   gradients. A single restrained blue is the only accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@300;400;500&display=swap');

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace; /* display + buttons + labels */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;          /* body + reading + section heads */

  /* ---------- CANVAS & SURFACES ---------- */
  --bg: #000000;                       /* pure black canvas (per request) */
  --bg-deep: #000000;                  /* video letterbox / deepest wells */
  --surface-1: rgba(255,255,255,0.04); /* subtle card surface */
  --surface-2: rgba(255,255,255,0.06); /* raised card */
  --surface-hover: rgba(255,255,255,0.09);

  /* ---------- BORDERS (opacity, not ink lines) ---------- */
  --border: rgba(255,255,255,0.10);    /* default 1px */
  --border-strong: rgba(255,255,255,0.20); /* active / emphasized / button outline */
  --border-faint: rgba(255,255,255,0.06);

  /* ---------- TEXT (white is the voice) ---------- */
  --fg: #ffffff;                       /* headings, body, labels */
  --fg-2: rgba(255,255,255,0.70);      /* descriptions, supporting text */
  --fg-3: rgba(255,255,255,0.50);      /* muted labels, timestamps, hover-dim target */
  --fg-4: rgba(255,255,255,0.30);      /* disabled, placeholders, faint annotation */
  --on-blue: #ffffff;
  --on-white: #1f2228;

  /* ---------- ACCENT — monochrome. White IS the accent. ----------
     Per the xAI system: no color accents. White carries emphasis;
     blue survives ONLY as the keyboard focus ring (accessibility). */
  --blue: #ffffff;                     /* "solid" marks → white */
  --blue-bright: #ffffff;              /* links/emphasis → full white */
  --blue-dim: rgba(255,255,255,0.88);  /* pressed */
  --ring: rgba(59,130,246,0.55);       /* keyboard / input focus ring ONLY */

  /* ---------- STATUS (used only when semantically necessary) ---------- */
  --live: #ff4d4d;                     /* on-air dot — the one functional exception */
  --success: #5db872;

  /* ---------- RADII (sharp by default) ---------- */
  --r-0: 0px;     /* default — buttons, cards, inputs, video frames */
  --r-sm: 2px;    /* tiny softening, dropdowns */
  --r-md: 4px;    /* secondary containers only */
  --r-pill: 9999px; /* reserved — used sparingly */

  /* ---------- SPACING (8px grid, sparse scale) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-section: 96px;

  /* ---------- MOTION (quiet, quick) ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ---------- LAYOUT ---------- */
  --maxw: 1200px;
  --maxw-prose: 680px;
  --gutter: 24px;
}

/* ============================================================
   TYPE SCALE — semantic helpers
   Display + buttons + labels = Geist Mono.
   Section heads + body + reading = Geist sans.
   ============================================================ */

.display {            /* hero statement — monospace as luxury, light weight at scale */
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.display-sm {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.h1 {                 /* section heads — clean sans contrast */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fg);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--fg-2);
}

.prose {              /* long-form reflections — sans, comfortable measure */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.72;
  color: var(--fg-2);
}

.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}

.label {              /* uppercase tracked mono — the "command-line" voice */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.label-blue {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.timecode {           /* timestamps / dates — mono, tabular */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.btn-label {          /* button text spec */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ============================================================
   BASELINE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(59,130,246,0.32); color: var(--fg); }

a { color: var(--blue-bright); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--fg); }

/* ============================================================
   PHOTOGRAPHY
   Full-bleed scroll-snap slideshow in the Terminal Newsroom system.
   ============================================================ */

.photo-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  outline: none;
  scrollbar-width: none;
}

.photo-track::-webkit-scrollbar {
  display: none;
}

.photo-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 70vh;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-meta {
  width: 100%;
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.photo-ticks {
  display: flex;
  gap: 6px;
  align-items: center;
}

.photo-tick {
  flex: 1 1 0;
  height: 2px;
  min-width: 8px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--border-strong);
  transition: background var(--dur) var(--ease);
}

.photo-tick[data-on] {
  background: var(--fg);
}

/* ============================================================
   RESPONSIVE KIT OVERRIDES
   The prototype is built from inline React styles. These hooks keep
   the same visual system while preventing small-screen overflow.
   ============================================================ */

html,
body {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-grid,
  .footer-grid,
  .major-card {
    grid-template-columns: 1fr !important;
  }

  .hero-grid {
    gap: 40px !important;
  }

  .portrait-card {
    width: 100% !important;
    max-width: 420px;
  }

  .video-grid,
  .reflection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .nav-shell {
    height: auto !important;
    min-height: 64px;
    padding: 16px 20px !important;
    align-items: flex-start !important;
    gap: 16px;
    flex-wrap: wrap;
  }

  .nav-brand {
    max-width: 170px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .nav-links {
    width: 100%;
    gap: 12px !important;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .nav-links button,
  .footer-actions button {
    padding: 11px 14px !important;
  }

  .site-hero section {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  .photo-frame {
    aspect-ratio: 4 / 5;
  }

  .display {
    font-size: clamp(52px, 15vw, 70px);
    line-height: 1.03;
  }

  .lead {
    font-size: 17px;
    max-width: 100% !important;
  }

  .portrait-meta {
    align-items: flex-start !important;
    gap: 12px;
  }

  .portrait-meta .timecode {
    text-align: right;
    overflow-wrap: anywhere;
  }

  .work-head {
    align-items: flex-start !important;
  }

  .chip-row {
    gap: 8px !important;
  }

  .chip-row button {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .feature-tile {
    aspect-ratio: 1 / 1 !important;
  }

  .feature-tile h3 {
    font-size: 26px !important;
  }

  .feature-tile p {
    display: none;
  }

  .video-grid,
  .reflection-grid {
    grid-template-columns: 1fr !important;
  }

  .reflection-card {
    min-height: 210px !important;
    padding: 24px !important;
  }

  .major-card {
    gap: 24px !important;
    padding: 28px 24px !important;
  }

  .footer-grid {
    gap: 32px !important;
    margin-top: 32px !important;
  }

  .social-row {
    align-items: flex-start !important;
    gap: 16px;
  }

  .social-row .timecode {
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    align-items: flex-start !important;
  }

  .reader-panel {
    padding: 20px 22px 72px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .reader-panel h1 {
    font-size: 32px !important;
  }
}