/* ═══════════════════════════════════════════════════════════════════════════════════════════
   editorial.css — THE editorial design system (REDESIGN-PLAN Workstream B)

   Loaded by:  index.html. Every other page joins when it is redesigned (one page at a time).
   Layering:   loads AFTER style.css / atmosphere.css / fx.css and overrides them on pages that opt in,
               so legacy pages are untouched. When the last page has joined, the legacy rules this file
               overrides are deleted from style.css (CANONICAL.md "Editorial layer" keeps that map).
   Rules:      black + warm white + racing red only; red is the only colour event. No backdrop-filter,
               no pill radii, no glass, no --brand-* / --tint-* / --blob-* tokens.
   Page-only rules live in the page's own sheet (home.css), never here.

   CONTENTS — search "§N" to jump between this list and the section
     §1  Fonts               Akatab (sans) — self-hosted, SIL OFL 1.1, licence beside the files
     §2  Tokens              palette, type roles, spacing, easing
     §3  Base type           headings, paragraphs, links
     §4  Atmosphere          grain only (orbs + grid hidden)
     §5  Type atoms          .ed-eyebrow · .ed-title · .ed-num (outline numeral)
     §6  Buttons + links     .cta-button · .cta-button--ink · .cta-link · focus ring
     §7  Nav                 solid on scroll, uppercase sans, mobile panel
     §8  Section shell       .ed-section · .ed-inner · .ed-head
     §9  FAQ                 left-aligned re-fit + "Show N more" (native <details>)
     §10 Footer              .ed-footer
     §11 Reduced motion
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* §1 ── Fonts ─────────────────────────────────────────────────────────────────────────────────
   Sans = Akatab (decided 2026-09-29). Standing rule: nothing on the site may be a litigation surface,
   so only fonts with a verified licence, self-hosted, never hotlinked. Licence: fonts/akatab/. */
@font-face { font-family: 'NRR Akatab'; src: url('../fonts/akatab/akatab-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'NRR Akatab'; src: url('../fonts/akatab/akatab-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'NRR Akatab'; src: url('../fonts/akatab/akatab-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }


/* §2 ── Tokens ──────────────────────────────────────────────────────────────────────────────── */
:root {
  --background: #050505;
  --foreground: #F5F4F0;                        /* warm white, not #fff */
  --text-color: rgba(245, 244, 240, 0.80);
  --text-secondary: rgba(245, 244, 240, 0.55);
  --border: rgba(245, 244, 240, 0.14);
  --hairline: rgba(245, 244, 240, 0.12);
  --card-bg: #0d0d0d;
  --accent: #EA1821;

  --sans: 'NRR Akatab', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body-font: var(--sans);                     /* style.css reads this for body/UI text */
  --heading-font: 'Boska', serif;               /* headline serif: Boska Black (the only cut installed) */
  --head-weight: 800;
  --head-track: -0.02em;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1320px;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
}


/* §3 ── Base type ───────────────────────────────────────────────────────────────────────────── */
html { font-synthesis: none; }                  /* never fake-bold a face that ships one weight */
body { font-weight: 400; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--head-weight); letter-spacing: var(--head-track); }
h1 span, h2 span, h3 span { font-family: inherit; }   /* style.css forces span to the body font */
p { font-size: 1rem; max-width: 62ch; margin-bottom: 0; }
a { color: inherit; }
a:hover { opacity: 1; }


/* §4 ── Atmosphere: grain only ──────────────────────────────────────────────────────────────────
   fx.js still injects the orbs + grid for legacy pages; editorial pages hide them. When every page
   is editorial, delete .atm-orb/.atm-grid from atmosphere.css and from fx.js initAtmosphere(). */
#atmosphere { background-color: var(--background); }
#atmosphere .atm-orb, #atmosphere .atm-grid { display: none; }
html::after { opacity: 0.04; }


/* §5 ── Type atoms ─────────────────────────────────────────────────────────────────────────────
   .ed-eyebrow is THE eyebrow. Legacy copies (.faq-eyebrow, .pricing-eyebrow, .proj-category) retire
   as their pages join this layer. */
.ed-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--body-font); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.ed-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); flex: none; }

.ed-title { font-size: clamp(2rem, 4.4vw, 3.7rem); line-height: 1.04; text-wrap: balance; }

.ed-num {                                       /* the outline-numeral idiom (CANONICAL) */
  font-family: var(--heading-font); font-weight: var(--head-weight); line-height: 0.9;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: transparent; -webkit-text-stroke: 1px rgba(245, 244, 240, 0.28);
  transition: -webkit-text-stroke-color 0.4s ease;
}


/* §6 ── Buttons + links ─────────────────────────────────────────────────────────────────────────
   Overrides style.css .cta-button (48px pill + fadeUp) on editorial pages. */
.cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 16px 28px; margin: 0; border-radius: 2px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--accent); color: var(--foreground);
  opacity: 1; animation: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cta-button:hover { background: var(--foreground); color: var(--background); transform: none; }
.cta-button--ink { background: var(--background); color: var(--foreground); }
.cta-button--ink:hover { background: var(--foreground); color: var(--background); }

.cta-link {
  display: inline-flex; align-items: center; gap: 0.7em; padding-bottom: 7px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--foreground);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.3s ease;
}
.cta-link:hover { color: var(--accent); }
.cta-link .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.cta-link:hover .arr { transform: translateX(4px); }

.cta-link:focus-visible, .cta-button:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }


/* §7 ── Nav ────────────────────────────────────────────────────────────────────────────────────
   Restyled in place; the double-span slide hover is kept. Solid when scrolled, never glass. */
nav { padding: 1.25rem var(--gutter); }
nav.scrolled {
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--hairline);
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.nav-logo a { height: 20px; font-family: var(--heading-font); font-weight: var(--head-weight); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-logo a span { font-family: inherit; line-height: 20px; }
.nav-links { gap: 2.2rem; }
.nav-links a { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foreground); }
.nav-links a span { line-height: 22px; }
.hamburger span { border-radius: 0; }

@media (max-width: 768px) {
  nav { padding: 1.1rem 1.2rem; }
  .nav-links { background: var(--background); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--hairline); }
  .nav-links a { border-bottom: 1px solid var(--hairline); }
}


/* §8 ── Section shell ──────────────────────────────────────────────────────────────────────── */
.ed-section { max-width: none; margin: 0; padding: clamp(72px, 12vh, 150px) var(--gutter); }
.ed-inner { max-width: var(--measure); margin-inline: auto; }
.ed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(36px, 6vh, 72px); }
.ed-head .ed-eyebrow { margin-bottom: 20px; }
.ed-head .ed-title { max-width: 14em; }


/* §9 ── FAQ ────────────────────────────────────────────────────────────────────────────────────
   Existing .faq-* components (style.css), left-aligned and re-fitted to the shared measure. The list
   is generated by tools/build-content.py from content/site.yaml. "Show N more" is a native <details>
   (keyboard-operable; every answer stays in the DOM, so nothing is hidden from crawlers or the JSON-LD). */
.faq-section { max-width: none; margin: 0; padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2)); }
.faq-section > h2 { text-align: left; }
.faq-q { font-size: clamp(1.05rem, 1.8vw, 1.45rem); }
.faq-item { border-top-color: var(--hairline); }
.faq-list > .faq-item:last-of-type, .faq-more > .faq-item:last-child { border-bottom-color: var(--hairline); }
.faq-answer p { color: var(--text-color); }

.faq-show-more {
  display: block; padding: clamp(18px, 2.6vh, 26px) 0; border-top: 1px solid var(--hairline);
  list-style: none; cursor: pointer;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary); transition: color 0.3s ease;
}
.faq-show-more::-webkit-details-marker { display: none; }
.faq-show-more:hover { color: var(--foreground); }
.faq-show-more:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.faq-more[open] > .faq-show-more { display: none; }   /* once opened, the rest simply reads as part of the list */


/* §10 ── Footer ────────────────────────────────────────────────────────────────────────────────
   Square outline social icons and uppercase sans column heads. Markup is generated (site.yaml). */
.ed-footer { max-width: none; margin: 0; padding: clamp(56px, 9vh, 104px) var(--gutter) 32px; }
.ed-footer .footer-grid { max-width: var(--measure); margin-inline: auto; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.ed-footer .footer-col h3 { font-family: var(--body-font); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 22px; }
.ed-footer .footer-col a { color: var(--foreground); font-size: 0.92rem; }
.ed-footer .footer-col a:hover { color: var(--accent); }
.ed-footer .social-icons li a { width: 42px; height: 42px; border-radius: 0; background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.ed-footer .social-icons li a:hover { background: var(--accent); border-color: var(--accent); transform: none; }
.ed-footer .copyright { max-width: var(--measure); margin: clamp(40px, 6vh, 72px) auto 0; border-top-color: var(--hairline); font-size: 0.75rem; letter-spacing: 0.06em; text-align: left; }

@media (max-width: 1024px) { .ed-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ed-footer .footer-grid { grid-template-columns: 1fr; } }


/* §11 ── Reduced motion ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-link .arr { transition: none; }
}