/* ==========================================================================
   MiGoGraphy - Editorial Typography System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700&family=Syne:wght@500;600;700;800&display=swap');

:root {
  /* Fluid Typographic Scale */
  --text-hero-giant: clamp(2.9rem, 6.5vw + 1rem, 8.5rem);
  --text-hero-sub: clamp(1.25rem, 2.5vw + 0.5rem, 2.5rem);
  --text-section-title: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  --text-display-md: clamp(1.75rem, 3.2vw + 0.4rem, 3.25rem);
  --text-heading: clamp(1.25rem, 1.8vw + 0.5rem, 2rem);
  --text-body-lg: clamp(1.05rem, 1.1vw + 0.75rem, 1.35rem);
  --text-base: clamp(0.925rem, 0.35vw + 0.825rem, 1.05rem);
  --text-sm: clamp(0.8rem, 0.2vw + 0.725rem, 0.875rem);
  --text-meta: clamp(0.68rem, 0.15vw + 0.65rem, 0.75rem);
}

/* Base Font Stacks */
body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Giant Hero Headline */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero-giant);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-hero-sub);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Section Headlines */
.section-headline {
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.section-subhead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

/* Editorial Metadata & Photographic Labels */
.meta-label {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

.issue-tag {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.photo-tech-data {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: 0.6;
  text-transform: uppercase;
}

.chapter-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  opacity: 0.25;
  transition: opacity var(--duration-snap) var(--ease-snap);
}

/* Text on Yellow Canvas */
.text-on-yellow {
  color: var(--ink);
}

.text-on-yellow .meta-label {
  color: rgba(8, 8, 8, 0.75);
}

/* Text on Dark Canvas */
.text-on-dark {
  color: var(--paper);
}

.text-on-dark .meta-label {
  color: rgba(244, 241, 234, 0.6);
}

/* Text on Paper Canvas */
.text-on-paper {
  color: var(--ink);
}

.text-on-paper .meta-label {
  color: rgba(8, 8, 8, 0.7);
}

/* ==========================================================================
   Arabic (Egyptian Native) Typography Overrides
   ========================================================================== */

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: var(--font-arabic) !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .font-display,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-headline,
html[dir="rtl"] .contact-headline,
html[dir="rtl"] .card-title,
html[dir="rtl"] .chapter-main-title,
html[dir="rtl"] .menu-link-label,
html[dir="rtl"] .moment-text,
html[dir="rtl"] .footer-giant-farewell {
  font-family: var(--font-arabic) !important;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0 !important;
  text-transform: none;
}

html[dir="rtl"] .hero-title {
  font-size: clamp(2.2rem, 5.5vw + 0.8rem, 6rem);
  line-height: 1.2;
}

html[dir="rtl"] .hero-subtitle {
  font-family: var(--font-arabic) !important;
  font-size: clamp(1.1rem, 1.8vw + 0.3rem, 1.85rem);
  line-height: 1.5;
  letter-spacing: 0 !important;
}

html[dir="rtl"] .meta-label,
html[dir="rtl"] .photo-tech-data,
html[dir="rtl"] .issue-tag,
html[dir="rtl"] .card-category,
html[dir="rtl"] .card-disciplines,
html[dir="rtl"] .channel-label,
html[dir="rtl"] .filter-btn,
html[dir="rtl"] .nav-link-item {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .chapter-number,
html[dir="rtl"] .card-index,
html[dir="rtl"] .menu-link-index {
  font-family: var(--font-display);
}