/* ============================================================
   The Aeverest Report — About (about.html)
   Page-specific styles. Design tokens live in colors.css,
   typography.css, and styles.css.
   ============================================================ */

body { background: var(--surface-sand); }
#root { min-height: 100vh; }

/* ============================================================
   Brand seal / mark (shared)
   ============================================================ */
.mark { display: block; flex: none; }
.mark-ae       { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 44; }
.mark-ae--base { fill: var(--navy-800); }
.mark-ae--cap  { fill: var(--mark-summit); }
.mark--cream .mark-ae--base { fill: var(--paper-050); }
.mark--cream .mark-ae--cap  { fill: var(--mark-summit-on-ink); }

/* ============================================================
   Masthead (shared crest)
   ============================================================ */
.masthead { background: var(--paper-000); border-bottom: 1px solid var(--line); }
.masthead__utility { background: var(--slate-700); }
.masthead__utility-inner { max-width: 1200px; margin: 0 auto; padding: 9px clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; }
.masthead__date, .masthead__credential { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; }
.masthead__date { color: #cdd8e6; }
.masthead__credential { color: var(--gold-300); }
.masthead__bar { max-width: 1200px; margin: 0 auto; padding: clamp(18px,2.4vw,24px) clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.masthead__lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.masthead__wordmark { display: flex; flex-direction: column; line-height: 1.0; }
.masthead__the { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 5px; }
.masthead__name { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 60, "wght" 500; font-size: clamp(19px, 2vw, 22px); letter-spacing: -0.005em; color: var(--navy-800); }
.masthead__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.nav-item { text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--navy-800); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav-item--active { color: var(--clay-600); font-weight: 600; border-bottom-color: var(--clay-600); }

/* ============================================================
   Section rule (shared)
   ============================================================ */
.section-rule {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; border-top: 1.5px solid var(--navy-800); padding-top: 11px;
}
.section-rule--clay { border-top-color: var(--clay-600); }
.section-rule__label {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; font-size: 11.5px; color: var(--clay-600); white-space: nowrap;
}
.section-rule__meta {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
}

/* Underlined arrow link (shared) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  color: var(--navy-800); text-decoration: none;
  border-bottom: 2px solid var(--gold-400); padding-bottom: 3px;
}
.link-arrow__icon { font-family: var(--font-mono); color: var(--gold-500); }

/* ============================================================
   About hero
   ============================================================ */
.about-hero { max-width: 1200px; margin: 0 auto; padding: clamp(44px,5vw,72px) clamp(24px,5vw,72px) clamp(20px,3vw,28px); }
.about-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px,4vw,64px); align-items: start; margin-top: 34px; }
.about-hero__headline {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(32px,4.6vw,58px);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--navy-800); margin: 0 0 24px;
}
.about-hero__headline em { color: var(--gold-500); }
.about-hero__lede {
  font-family: var(--font-sans); font-size: 20px; line-height: 1.6;
  color: var(--ink-700); margin: 0 0 18px; max-width: 54ch;
}
.about-hero__body {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.65;
  color: var(--ink-500); margin: 0; max-width: 54ch;
}

.glance { border-top: 1.5px solid var(--navy-800); padding-top: 20px; }
.glance__eyebrow {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 11px; color: var(--clay-600); margin-bottom: 20px;
}
.glance__row { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.glance__row--first { border-top: none; }
.glance__key {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 10.5px; color: var(--text-muted);
}
.glance__val { font-family: var(--font-sans); font-size: 15px; color: var(--ink-800); line-height: 1.4; }

/* ============================================================
   Origin story (clay band)
   ============================================================ */
.origin { background: var(--clay-050); border-top: 1px solid #e6d2c5; border-bottom: 1px solid #e6d2c5; margin-top: clamp(28px,4vw,44px); }
.origin__inner { max-width: 1200px; margin: 0 auto; padding: clamp(52px,6vw,84px) clamp(24px,5vw,72px); }
.origin__grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: clamp(32px,5vw,72px); align-items: start; margin-top: 40px; }
.origin__aside { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.origin__word { font-family: var(--font-display); font-style: italic; font-size: clamp(40px,6vw,60px); color: var(--navy-800); line-height: 1; }
.origin__caption {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 10.5px; color: var(--clay-600); line-height: 1.8;
}
.origin__body { max-width: 60ch; }
.origin__lead {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,2.5vw,30px);
  line-height: 1.4; color: var(--ink-800); margin: 0 0 24px;
}
.origin__lead em { color: var(--navy-800); }
.origin__p { font-family: var(--font-sans); font-size: 17px; line-height: 1.75; color: var(--ink-700); margin: 0 0 18px; }
.origin__p:last-child { margin-bottom: 0; }
.origin__p strong { font-weight: 600; color: var(--navy-800); }
.origin__ae { font-style: normal; color: var(--gold-600); }
.italic { font-style: italic; }

/* ============================================================
   Our Standard (green band, shared layout)
   ============================================================ */
.standard {
  background: radial-gradient(135% 115% at 24% 6%, #37684f 0%, #275040 44%, #1b3a2d 100%);
  position: relative; overflow: hidden; scroll-margin-top: 20px;
}
.standard__watermark { position: absolute; width: clamp(480px, 50vw, 900px); height: auto; right: -120px; top: -150px; opacity: 0.05; }
.watermark-ring { fill: none; stroke: var(--paper-000); stroke-width: 2; }
.watermark-ae   { fill: var(--paper-000); font-family: var(--font-display); font-weight: 600; }
.standard__inner { max-width: 1200px; margin: 0 auto; padding: clamp(40px,4vw,60px) clamp(24px,5vw,72px); position: relative; }
.standard__eyebrow {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; font-size: 11px; color: var(--clay-300); margin-bottom: 18px;
}
.standard__lead-row { display: flex; gap: clamp(20px,3vw,34px); align-items: stretch; max-width: 34ch; }
.standard__lead-rule { width: 3px; flex: none; background: var(--gold-400); border-radius: 2px; }
.standard__lead {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,2.8vw,34px);
  line-height: 1.2; letter-spacing: -0.015em; color: var(--paper-000); margin: 0;
}
.standard__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px,3vw,40px); border-top: 1px solid var(--line-on-ink);
}
.tenet {
  display: flex; flex-direction: column;
  padding: clamp(22px,2.4vw,28px) clamp(20px,3vw,40px) 4px;
  border-left: 1px solid var(--line-on-ink);
}
.tenet--first { border-left: none; }
.tenet__no {
  font-family: var(--font-display); font-weight: 500; font-size: 28px;
  color: var(--gold-300); margin-bottom: 12px; line-height: 1;
}
.tenet__title {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1.2; color: var(--paper-000); margin-bottom: 10px;
}
.tenet__body { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: #cddfd3; }

/* ============================================================
   About the Editor
   ============================================================ */
.editor { max-width: 1200px; margin: 0 auto; padding: clamp(52px,6vw,84px) clamp(24px,5vw,72px); }
.editor__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: start; margin-top: 36px; }
.editor__card {
  background: linear-gradient(157deg, var(--navy-900) 0%, var(--slate-800) 66%, var(--slate-700) 100%); border-radius: var(--radius-lg);
  padding: clamp(30px,3.5vw,42px); display: flex; flex-direction: column;
  gap: 22px; align-items: flex-start; position: static;
}
.editor__quote {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(21px,2.5vw,29px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--paper-000); margin: 0;
}
.editor__quote em { font-style: normal; color: var(--gold-300); }
.editor__rule { height: 1px; width: 48px; background: var(--gold-400); }
.editor__byline {
  font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; color: var(--gold-300);
}
.editor__head {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(27px,3.1vw,40px);
  line-height: 1.1; letter-spacing: -0.015em; color: var(--navy-800); margin: 0 0 20px;
}
.editor__p { font-family: var(--font-sans); font-size: 18px; line-height: 1.7; color: var(--ink-700); margin: 0 0 18px; max-width: 56ch; }
.editor__p--muted { font-size: 16px; color: var(--ink-500); margin: 0; }

/* ============================================================
   Contact (navy band)
   ============================================================ */
.contact { background: var(--navy-800); scroll-margin-top: 20px; }
.contact__inner { max-width: 1200px; margin: 0 auto; padding: clamp(28px,3vw,44px) clamp(24px,5vw,72px); }
.contact__rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1.5px solid var(--line-on-ink); padding-top: 11px; }
.contact__rule-label { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; font-size: 11.5px; color: var(--gold-300); white-space: nowrap; }
.contact__rule-meta { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11.5px; color: var(--sage-300); white-space: nowrap; }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: start; margin-top: 20px; }
.contact__head { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.4vw,44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--paper-000); margin: 0 0 12px; }
.contact__intro { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--navy-100); margin: 0; max-width: 44ch; }
.contact__row { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: clamp(16px,2vw,28px); padding: 11px 0; border-top: 1px solid var(--line-on-ink); }
.contact__row-desc { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--navy-100); margin-bottom: 6px; }
.contact__row-key { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--clay-300); padding-top: 3px; }
.contact__email { font-family: var(--font-mono); font-size: 14px; color: var(--gold-300); text-decoration: none; border-bottom: 1px solid var(--gold-400); padding-bottom: 2px; }
.contact__email:hover { color: var(--gold-200); border-bottom-color: var(--gold-200); } /* overrides global a:hover (navy-800), which vanishes on the navy contact band */

/* ============================================================
   Site footer (shared)
   ============================================================ */
.site-footer {
  background: var(--navy-900); border-top: 3px solid var(--gold-400);
  padding: clamp(44px,5vw,56px) clamp(24px,5vw,72px) 36px;
}
.site-footer__inner { max-width: 1200px; margin: 0 auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px,4vw,40px); }
.site-footer__brand-row { display: flex; align-items: center; gap: 13px; }
.site-footer__brand-text { line-height: 1; }
.site-footer__brand-the {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 9px; color: var(--gold-300);
}
.site-footer__brand-name {
  font-family: var(--font-display); font-weight: 450; font-variation-settings: "opsz" 60, "wght" 450; font-size: 17px;
  letter-spacing: -0.005em; color: var(--paper-000); margin-top: 5px;
}
.site-footer__tagline {
  font-family: var(--font-display); font-style: italic; font-size: 17px;
  color: var(--gold-300); margin: 18px 0 0;
}
.site-footer__col-head {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 10px; color: var(--slate-300); margin-bottom: 14px;
}
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__link {
  font-family: var(--font-sans); font-size: 14px; color: var(--paper-050);
  text-decoration: none; opacity: 0.85;
}
.site-footer__fine {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.6;
  color: var(--slate-300); margin: 36px 0 0;
  border-top: 1px solid var(--line-on-ink); padding-top: 20px;
}