/* ================================================================
   STORY Magazine G2 — Base Styles
   Phase 2 Foundation
   Source: TYPOGRAPHY-SYSTEM.md, FONT-FORENSICS.md,
           NAVIGATION-SYSTEM.md, GRID-SYSTEM.md
   Decisions: C-2 Body Typography, C-3 Colour Palette
   ================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--story-font);
  color: var(--story-ink);
  background: var(--story-paper);
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* SOURCE: FONT-FORENSICS.md §Font Rendering Settings.
     Measured: -webkit-font-smoothing: antialiased;
              text-rendering: optimizeLegibility; */
}

body {
  margin: 0;
  background: var(--story-paper);
  font: var(--font-body-weight) var(--font-body-size)/var(--font-body-leading) var(--story-font);
  /* SOURCE: TYPOGRAPHY-SYSTEM.md §Body Default.
     Decision: C-2 — 16px / 1.5 baseline.
     Weight: 400 (Body Default). Article reading blocks may override to 300. */
  text-rendering: optimizeLegibility;
}

body.story-menu-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Screen-reader-only utility */
.story-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip Link
   SOURCE: NAVIGATION-SYSTEM.md §Skip Link */
.story-skip-link {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: var(--z-skip-link);
  padding: 10px 14px;
  background: var(--color-black);
  color: var(--color-white);
  font: var(--font-weight-medium) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  text-transform: uppercase;
  transform: translate(-50%, -100px);
  opacity: 0;
  transition: transform var(--duration-button) var(--ease-in-out),
              opacity var(--duration-button) var(--ease-in-out);
}

.story-skip-link:focus {
  transform: translate(-50%, 200px);
  opacity: 1;
}

body {
  padding-bottom: var(--story-bottom-nav);
}

.story-page {
  min-height: 100vh;
}

/* Container */
.story-container {
  width: min(100%, var(--story-page-max));
  margin-inline: auto;
  padding-inline: var(--story-gutter);
}

/* Reading measure */
.story-reading {
  width: min(calc(100% - 40px), var(--story-reading));
  margin-inline: auto;
}

/* Breakout / wide measure */
.story-wide {
  width: min(calc(100% - 40px), var(--story-wide));
  margin-inline: auto;
}

/* Label
   SOURCE: TYPOGRAPHY-SYSTEM.md "Label" row.
   14px / 500 / 16px / uppercase. */
.story-label {
  margin: 0;
  font: var(--font-weight-medium) var(--font-nav-size)/var(--font-nav-leading) var(--story-font);
  text-transform: uppercase;
}

/* Meta
   SOURCE: TYPOGRAPHY-SYSTEM.md §Body Small (base).
   Specific meta styling applied per component. */
.story-meta {
  margin: 0;
  color: var(--story-muted);
  font: var(--font-weight-normal) var(--text-sm)/var(--text-sm--line-height) var(--story-font);
}

/* Card title
   NOTE: Preserved at 18px/1.22/500 for BUG-007 card geometry protection.
   Will migrate to 24/28/300 token in Phase 4/5 component rebuild. */
.story-card-title {
  margin: 0;
  font: 500 18px/1.22 var(--story-font);
}

/* Empty state */
.story-empty-state {
  max-width: var(--story-reading);
  margin: var(--story-space-24) auto;
  padding-inline: var(--story-gutter);
  text-align: center;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */

/* Mobile: ensure reading/wide don't overflow */
@media (max-width: 639px) {
  .story-reading,
  .story-wide {
    width: calc(100% - 40px);
  }
}

/* Tablet: bounded container widens */
@media (min-width: 640px) and (max-width: 1023px) {
  .story-reading {
    width: min(calc(100% - 64px), var(--story-reading-tablet));
  }
}

/* Desktop: full bounded width */
@media (min-width: 1024px) {
  .story-reading {
    width: min(calc(100% - 80px), var(--story-reading-tablet));
  }
}

/* Desktop: footer replaces bottom nav */
@media (min-width: 1280px) {
  body {
    padding-bottom: var(--story-footer);
  }
}

/* ----------------------------------------------------------------
   Accessibility & Print
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
  }
}

@media print {
  .story-skip-link,
  .story-header,
  .story-mobile-menu,
  .story-bottom-nav,
  .story-footer {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    background: #fff;
    color: #000;
  }
}