/* editorial.css — shared type, color, and layout components for content pages
   All classes scoped under .ep (editorial page) root.
   Fonts: var(--font-serif) Noto Serif, var(--font-body) Inter, var(--font-mono) JetBrains Mono */

/* ── Root ── */
.ep, .ep * { box-sizing: border-box; margin: 0; padding: 0; }
.ep {
  font-family: var(--font-body);
  color: var(--text);
  max-width: 100%;
  padding: .5rem 0 1rem;
}

/* ── Eyebrow ── */
/* Small all-caps label. Use above titles or to introduce sections. */
.ep .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* ── Display titles ── */
/* .page-hero  — large intro title (about scale, ~80px max) */
/* .page-title — section/page title (work scale, ~66px max) */
.ep .page-hero {
  font-family: var(--font-serif);
  font-size: clamp(52px, 9vw, 80px);
  line-height: .9;
  letter-spacing: -.015em;
  margin-bottom: 2rem;
  font-weight: 600;
}
.ep .page-title {
  font-family: var(--font-serif);
  font-size: clamp(44px, 7vw, 66px);
  line-height: .95;
  letter-spacing: -.015em;
  margin-bottom: .5rem;
  font-weight: 600;
}
/* Second line: lighter weight, accent color */
.ep .page-hero em,
.ep .page-title em { font-style: normal; font-weight: 300; color: var(--accent); }

/* Caveat renders light — bump weights for visual parity */
[data-font="handwriting"] .ep .page-hero,
[data-font="handwriting"] .ep .page-title { font-weight: 700; }
[data-font="handwriting"] .ep .page-hero em,
[data-font="handwriting"] .ep .page-title em { font-weight: 400; }

/* ── About greeting animation ── */
.about-greeting {
  display: inline-block;
  min-width: 1ch;
}
.about-greeting .g-letter {
  display: inline-block;
  opacity: 0;
  animation: letterSettle 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes letterSettle {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.about-greeting.greeting-exit {
  animation: greetingExit 0.7s ease forwards;
}
@keyframes greetingExit {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-greeting .g-letter      { animation: none; opacity: 1; }
  .about-greeting.greeting-exit  { animation: none; opacity: 1; }
}

/* ── Article meta ── */
/* Row of metadata chips (role, location, date range). */
.ep .article-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: .5px solid var(--border);
  flex-wrap: wrap;
}
.ep .meta-item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: .08em;
}

/* ── Body text ── */
/* .body-text  — standalone paragraph (use per-<p> element) */
/* .article    — multi-paragraph container (wrap <p> elements inside) */
.ep .body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.ep .body-text strong { font-weight: 600; }

.ep .article {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 2rem;
}
.ep .article p + p { margin-top: 1.25rem; }
.ep .article strong { font-weight: 600; }

/* ── Pullquote ── */
/* Italic serif block with accent left border.
   Add .lg for the larger "thesis" variant used as page openers. */
.ep .pullquote {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.8vw, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-left: 2px solid var(--accent);
  margin-bottom: 2rem;
}
.ep .pullquote.lg {
  font-size: clamp(22px, 3.4vw, 30px);
}
.ep .article .pullquote { margin: 2rem 0; }

/* ── Rule ── */
.ep .rule {
  border: none;
  border-top: .5px solid var(--border);
  margin: 2rem 0;
}

/* ── Section label ── */
/* Small all-caps mono label — good for short categorical labels
   (changelog groups, design system tokens). For long-form content
   sub-headings on prose pages, prefer .section-title below. */
.ep .section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* ── Section title (real sub-heading) ── */
/* Use for h2-level sub-sections on long-form content pages where a
   tiny eyebrow label gets lost. Pairs visually with .page-title.
   Explicitly overrides the generic .window-body h2 rule. */
.ep .section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--text);
  margin: 1.75rem 0 1rem;
}
.ep .section-title:first-child { margin-top: 0; }
.ep .section-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* ── Closing ── */
/* Smaller secondary-color paragraph used at end of pages. Links inherit. */
.ep .closing {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 2rem;
}
.ep .closing strong { font-weight: 500; color: var(--text); }
.ep .closing a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Nav row ── */
/* Row of pill-style command links. Used at page bottom. */
.ep .nav-row { display: flex; gap: .625rem; flex-wrap: wrap; }
.ep .nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  padding: .4rem .75rem;
  border: .5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: all .12s;
  /* reset button defaults */
  display: inline-block;
  line-height: normal;
  text-align: left;
  -webkit-appearance: none;
}
.ep .nav-link:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-card);
}

/* ── Mobile typography ── */
@media (max-width: 768px) {
  .ep .eyebrow       { font-size: 11px; }
  .ep .section-label { font-size: 11px; }
  .ep .nav-link      { font-size: 13px; }
  .ep .closing       { font-size: 15px; }
}