/* Editorial system for about.html + insights.html (agent 13).
   Shared tokens per DESIGN-CONTRACT; values aligned with main.css so
   integration can unify them without visual change. System fonts only,
   no external requests. Motion uses transform + opacity only. */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6; --ink:#0B1220;
  --muted:#5B6472; --paper:#fff; --line:#E5E7EB;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 24px 48px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.15s; --dur-normal:.6s; --dur-slow:.9s;
}
.editorial{--serif:Georgia,"Times New Roman",serif}

/* --- Section rhythm: generous, regular vertical spacing --- */
.editorial main > section:not(.hero){padding:88px 0}
.editorial main > section.alt{padding:88px 0}

/* --- Editorial headings: serif display type, teal rule above --- */
.editorial section > .wrap > h2{
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(28px,3.4vw,38px); line-height:1.15; color:var(--navy);
  margin:0 0 18px; max-width:760px;
}
.editorial section > .wrap > h2::before{
  content:""; display:block; width:44px; height:4px; border-radius:2px;
  background:var(--teal); margin-bottom:18px;
}
/* Card headings stay in the sans family for contrast with display type */
.editorial .card h2{font-family:inherit}
.editorial .card h2::before{display:none}

/* --- Lede + drop cap on the first paragraph after each section heading --- */
.editorial section > .wrap > h2 + p{
  font-size:19px; line-height:1.7; color:#374151; max-width:760px;
}
.editorial section > .wrap > h2 + p::first-letter{
  font-family:var(--serif); font-weight:700; font-size:3.1em; line-height:.85;
  color:var(--navy); float:left; padding:6px 10px 0 0;
}
/* Insights intro paragraph (before the first h2) is the page lede */
.editorial .editorial-lede{font-size:20px; line-height:1.7; color:#374151; max-width:760px}

/* --- Hero motif: abstract geometric SVG, decorative only, reserved space --- */
.editorial-hero .wrap{position:relative}
.editorial-motif{
  position:absolute; top:50%; right:24px; transform:translateY(-50%);
  width:340px; height:300px; opacity:.22; pointer-events:none; z-index:0;
}
.editorial-hero .wrap > :not(.editorial-motif){position:relative; z-index:1}
@media(max-width:1100px){.editorial-motif{width:260px; height:230px; opacity:.16}}
@media(max-width:900px){.editorial-motif{display:none}}

/* --- Insights article cards: top accent bar, serif titles, lift on hover --- */
.editorial .grid .card{position:relative; overflow:hidden; padding-top:28px}
.editorial .grid .card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--navy),var(--teal));
}
.editorial .grid .card h3{
  font-family:var(--serif); font-size:22px; line-height:1.3; color:var(--navy);
}
.editorial .grid .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}

/* --- Charter panel (about): stronger frame, checklist markers --- */
.editorial-charter .card{border-width:2px; border-color:var(--blue); padding:32px}
.editorial-charter .card ul{list-style:none; padding-left:0}
.editorial-charter .card li{position:relative; padding-left:28px; margin:10px 0}
.editorial-charter .card li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--teal); background:transparent;
}

/* --- Reveal motion: hidden ONLY when JS has run (html.js gate) --- */
html.js .editorial .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-normal) var(--ease-out),
             transform var(--dur-normal) var(--ease-out);
}
html.js .editorial .reveal.is-visible{opacity:1; transform:none}
html.js .editorial .grid .card.reveal:nth-child(2){transition-delay:.06s}
html.js .editorial .grid .card.reveal:nth-child(3){transition-delay:.12s}
html.js .editorial .grid .card.reveal:nth-child(4){transition-delay:.18s}
html.js .editorial .grid .card.reveal:nth-child(5){transition-delay:.24s}

@media(max-width:700px){
  .editorial main > section:not(.hero), .editorial main > section.alt{padding:56px 0}
  .editorial section > .wrap > h2 + p{font-size:18px}
  .editorial .editorial-lede{font-size:19px}
  .editorial-charter .card{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  html.js .editorial .reveal{opacity:1; transform:none; transition:none}
  .editorial .grid .card:hover{transform:none}
  .editorial *{transition:none !important; animation:none !important}
}