/* ============================================
   NURAYA — base.css
   Design tokens, reset, typography, utilities.
   Loaded on every page.
   ============================================ */

/* ============================================
   SELF-HOSTED FONTS — Jost
   Only the weights used across the site.
   ============================================ */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --forest: #042D22;
  --forest-90: rgba(4, 45, 34, 0.92);
  --amber: #A96717;
  --amber-light: #C47D2A;
  --cream: #F2E4CE;
  --dew: #E5F3ED;
  --offwhite: #FAFAF7;
  --ink: #1A1A1A;
  --muted: #6B6B6B;
  --rule: #D9D9D9;
  --white: #FFFFFF;

  --fs-display: clamp(2.8rem, 5.5vw, 5.5rem);
  --fs-h1: clamp(2.2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.06rem);
  --fs-caption: clamp(0.78rem, 0.9vw, 0.85rem);
  --fs-eyebrow: clamp(0.7rem, 0.8vw, 0.78rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  --max-w: 1200px;
  --max-w-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--offwhite);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ============================================
   UTILITIES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.75rem;
  display: block;
}

.eyebrow--light { color: var(--cream); }

/* ============================================
   ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

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

/* Skip-to-content link — off-screen by default, visible on keyboard focus.
   WCAG 2.1 Level A (2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--forest);
  color: var(--cream);
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
}