/*
Theme Name: Tino Aftermath — Parallax Storytelling
Theme URI: https://example.com/tino-aftermath
Author: Your Newsroom
Author URI: https://example.com
Description: A high-contrast, News/Urgent parallax storytelling theme built to report on the aftermath of Typhoon Tino in the Philippines. White/Black/Alert-Silver palette, scroll-driven parallax panels, and a "Story" custom post type for field reporting.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tino-aftermath
Tags: news, one-column, custom-colors, custom-menu, full-width-template
*/

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
:root{
  --c-black: #000000;
  --c-white: #FFFFFF;
  --c-silver: #C7CCD1;        /* Alert Silver — CTAs, timeline nodes, map markers */
  --c-silver-bright: #EDEFF1; /* tints / hover fills on light chrome */
  --c-silver-deep: #8E959C;   /* borders + secondary text, keeps AA contrast on white */
  --c-grey-900: #111111;
  --c-grey-700: #2b2b2b;
  --c-grey-400: #9a9a9a;
  --c-hairline: #e2e2e2;
  --c-overlay: rgba(0,0,0,.62);
  --font-display: "Archivo Black", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1180px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-black);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em; line-height:1.05; margin:0 0 .5em; }
p{ margin:0 0 1em; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--c-black);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--c-silver);
}