/* ===========================
   GRID SYSTEM
   Voice from the Basement
=========================== */

/* Base spacing unit: 8px */
:root {
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  /* Grid */
  --cols:        12;
  --gutter:      24px;
  --margin:      100px;
  --max-width:   1200px;

  /* Section spacing — max gap between sections */
  --section-gap: 124px;

  /* Header height — used for sticky offset calculations */
  --header-h: 56px;
}

/* ===========================
   TYPOGRAPHY & COLOR TOKENS
=========================== */
:root {
  /* Single typeface */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* Colors — light backgrounds */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #333333;
  --color-text-caption:   #666666;

  /* Colors — dark backgrounds */
  --color-text-light:     #EAEAEA;
  --color-text-light-2:   #BDBDBD;
  --color-text-light-3:   #F2F2F2;

  /* Accent */
  --color-accent: #C21F10;
}

/* ===========================
   CONTAINER
=========================== */
.container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* ===========================
   GRID
=========================== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
}

/* ===========================
   COLUMN SPANS
=========================== */

/* Text — primary (7 cols) */
.col-text {
  grid-column: span 7;
}

/* Text — narrow (6 cols) */
.col-text-narrow {
  grid-column: span 6;
}

/* Image — large */
.col-img-large {
  grid-column: span 10;
}

/* Image — medium */
.col-img-mid {
  grid-column: span 8;
}

/* Image — inline */
.col-img-inline {
  grid-column: span 5;
}

/* Full width */
.col-full {
  grid-column: 1 / -1;
}

/* Full bleed — edge to edge */
.full-bleed {
  width: 100vw;
  margin-inline: calc(-1 * var(--margin));
  max-width: none;
}

/* ===========================
   SECTION SPACING
=========================== */
.section {
  padding-block: var(--section-gap);
}

.section--sm {
  padding-block: var(--space-10);
}

/* Section label bar */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding-block: var(--space-2);
  background: #000;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-label .label-num {
  color: rgba(255, 255, 255, 0.35);
  margin-right: var(--space-1);
}

/* ===========================
   TYPOGRAPHY SCALE
   Single typeface: Inter
   Documentary / long-read tone
=========================== */

/* H1 — hero title */
.t-h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* H2 — section titles */
.t-h2 {
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* H3 — subheadings */
.t-h3 {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* Body — narrative text */
.t-body {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  max-width: 63ch;
}

/* Quote — memory accent */
.t-quote {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: #222;
  max-width: 48ch;
  margin-block: clamp(80px, 8vw, 120px);
}

/* Voice — testimony / diary */
.t-voice {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  max-width: 63ch;
}

/* Caption — photo labels */
.t-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-caption);
}

/* UI / navigation */
.t-ui {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
}

/* Label / section number */
.t-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-caption);
}

/* Display — hero quote (large) */
.t-display {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ===========================
   VERTICAL RHYTHM
=========================== */

/* Paragraph spacing — no indent, gap between */
.t-body p + p,
.t-voice p + p {
  margin-top: 1.35em;
}

/* ===========================
   IMAGES
=========================== */
.img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===========================
   TABLET — 8 columns
=========================== */
@media (max-width: 1024px) {
  :root {
    --cols:        8;
    --gutter:      20px;
    --margin:      40px;
    --section-gap: 72px;
  }

  .col-text        { grid-column: span 6; }
  .col-text-narrow { grid-column: span 6; }
  .col-img-large   { grid-column: span 8; }
  .col-img-mid     { grid-column: span 8; }
  .col-img-inline  { grid-column: span 5; }

  .full-bleed {
    margin-inline: calc(-1 * var(--margin));
  }
}

/* ===========================
   MOBILE — 4 columns
=========================== */
@media (max-width: 768px) {
  :root {
    --cols:        4;
    --gutter:      12px;
    --margin:      16px;
    --section-gap: 48px;
  }

  .col-text,
  .col-text-narrow,
  .col-img-large,
  .col-img-mid,
  .col-img-inline {
    grid-column: 1 / -1;
  }

  .full-bleed {
    margin-inline: calc(-1 * var(--margin));
  }

  .t-body,
  .t-voice {
    max-width: 100%;
    font-size: 16px;
  }

  .t-quote {
    font-size: clamp(18px, 4.5vw, 22px);
    margin-block: clamp(56px, 8vw, 80px);
  }
}

/* ===========================
   SMALL MOBILE
=========================== */
@media (max-width: 390px) {
  :root {
    --margin: 16px;
    --gutter: 12px;
  }
}