/* ══════════════════════════════════════════════════════
   BASE — Reset · Fonts · Layout · Shared structure
   Depends on: tokens.css (must load first)
   
   Font paths: relative to this file's location
   ../../Design-System/Fonts/ → up from assets/css/ to project root
══════════════════════════════════════════════════════ */

@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../../Design-System/Fonts/Poppins/Poppins-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: 'Noto Sans'; src: url('../../Design-System/Fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans'; src: url('../../Design-System/Fonts/Noto_Sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }

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

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

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
  overflow-x: hidden;
}

/* ── Default text-link styling (DS Buttons §09) ──
   Taupe, weight 600, underlined. Component-styled links
   (.btn-*, .nav-*, .sidebar-name, .preview-card, .ds-link-card,
   .blog-preview-cell, etc.) opt out via their own declarations. */
a {
  color: var(--c-taupe);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-taupe);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-primary);
}

/* ── Layout ───────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}

.section {
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--border);
}

.section.bg-sand  { background: var(--c-sand); }
.section.bg-peach { background: var(--c-peach); }
.section.bg-black { background: var(--c-black); }

/* ── Section header (DS pages) ────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 48px;
}

.section-number {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  color: var(--accent);
  line-height: 1;
}

.section-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  color: var(--text-secondary);
  text-transform: uppercase;
  line-height: 1;
}

/* ── DS Hero (shared by all 4 DS pages) ────────────── */
.hero {
  padding-top: calc(56px + 80px);
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; right: -200px;
  width: 900px; height: 700px;
  background: radial-gradient(ellipse at 70% 30%,
    rgba(255,233,214,0.55) 0%,
    rgba(238,237,235,0.28) 45%,
    transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeUp 0.5s ease both;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 136px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 40px;
  animation: fadeUp 0.5s 0.06s ease both;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeUp 0.5s 0.12s ease both;
}

/* ── Animations ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .section    { padding: 64px 0; }
}
@media (max-width: 640px) {
  .container  { padding: 0 16px; }
  .hero-title { font-size: 56px; }
  .section    { padding: 60px 0; }
}