/* Elephant — long-form briefing document. Composes against tokens.css. */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--paper); }

/* screen toolbar */
.docbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 32px; background: var(--paper-veil); backdrop-filter: blur(20px); border-bottom: 1px solid var(--rule); }
.docbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.docbar__brand svg { width: 30px; height: 30px; color: var(--ink); }
.docbar__brand span { font: 400 24px/1 var(--font-display); letter-spacing: -0.01em; }
.docbar__actions { display: flex; gap: 14px; align-items: center; }
.docbar__back { font: 500 var(--text-mono-size)/1 var(--font-text); color: var(--ink); text-decoration: none; opacity: 0.7; }
.docbar__back:hover { opacity: 1; }
.docbar__print { font: 500 var(--text-mono-size)/1 var(--font-text); display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-1); cursor: pointer; transition: opacity var(--dur-hover) linear; }
.docbar__print:hover { opacity: 0.7; }

.doc { max-width: var(--container-prose); margin: 0 auto; padding: var(--s-10) 32px var(--s-11); }
@media (max-width: 720px) { .doc { padding: var(--s-8) 20px var(--s-9); } }

/* masthead */
.doc__eye { font: 500 var(--text-mono-size)/1 var(--font-text); color: var(--ink-3); letter-spacing: .04em; margin-bottom: var(--s-5); }
.doc__title { font: 400 72px/1.0 var(--font-display); letter-spacing: -0.025em; margin: 0; text-wrap: pretty; }
.doc__title em { font-style: italic; }
.doc__dek { font: 400 var(--text-lead-size)/var(--text-lead-lh) var(--font-text); color: var(--ink-2); margin: var(--s-7) 0 0; text-wrap: pretty; }
.doc__meta { font: 500 var(--text-caption-size)/1.4 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 720px) { .doc__title { font-size: 46px; } .doc__dek { font-size: 18px; } }

/* sections */
.doc h2 { font: 400 var(--text-display-s-size)/var(--text-display-s-lh) var(--font-display); letter-spacing: -0.02em; margin: var(--s-10) 0 var(--s-5); text-wrap: pretty; }
.doc h2 em { font-style: italic; }
.doc h2 .ord { display: block; font: 400 var(--text-mono-size)/1 var(--font-mono); color: var(--ink-3); letter-spacing: .08em; margin-bottom: var(--s-4); }
.doc h3 { font: 400 26px/1.2 var(--font-display); letter-spacing: -0.01em; margin: var(--s-8) 0 var(--s-4); }
.doc p { font: 400 18px/1.62 var(--font-text); color: var(--ink-2); margin: 0 0 var(--s-5); text-wrap: pretty; }
.doc p strong { color: var(--ink); font-weight: 500; }
.doc p em { font-style: italic; }
@media (max-width: 720px) { .doc h2 { font-size: 33px; } }

/* lead-in first paragraph */
.doc__lead { font: 400 21px/1.55 var(--font-text); color: var(--ink); margin-bottom: var(--s-6); }

/* pull statistic */
.doc__stat { margin: var(--s-8) 0; padding: var(--s-6) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.doc__stat .n { font: 400 96px/1.0 var(--font-display); letter-spacing: -0.03em; color: var(--ink); display: block; }
.doc__stat .c { font: 400 var(--text-body-size)/1.5 var(--font-text); color: var(--ink-2); margin-top: var(--s-5); max-width: 520px; }
@media (max-width: 720px) { .doc__stat .n { font-size: 64px; } }

/* numbered/route list */
.doc__list { list-style: none; margin: var(--s-6) 0; padding: 0; }
.doc__list li { padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.doc__list li:last-child { border-bottom: 1px solid var(--rule); }
.doc__list .lh { font: 500 var(--text-body-size)/1.4 var(--font-text); color: var(--ink); margin: 0 0 var(--s-2); }
.doc__list .lp { font: 400 16px/1.55 var(--font-text); color: var(--ink-2); margin: 0; }

/* inset pull-quote */
.doc__quote { font: 400 30px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin: var(--s-9) 0; text-wrap: pretty; }
.doc__quote em { font-style: italic; }

.doc__rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-9) 0; }

/* closing CTA */
.doc__cta { margin-top: var(--s-9); padding: var(--s-7); border: 1px solid var(--rule-strong); }
.doc__cta h3 { margin-top: 0; font-size: 30px; }
.doc__cta p { font-size: var(--text-body-size); margin-bottom: var(--s-6); }
.doc__cta a { font: 500 15px/1 var(--font-text); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 14px 22px; background: var(--ink); color: var(--paper); border-radius: var(--r-1); text-decoration: none; transition: opacity var(--dur-hover) linear; }
.doc__cta a:hover { opacity: 0.7; }

.doc__foot { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--rule); font: 500 var(--text-caption-size)/1.6 var(--font-mono); color: var(--ink-3); letter-spacing: .03em; }

/* ----------------------------- print ----------------------------- */
@media print {
  @page { margin: 18mm 16mm; }
  .docbar { display: none; }
  body { background: var(--paper); } /* tokens.css sets --paper to #ffffff in print */
  .doc { max-width: none; margin: 0; padding: 0; }
  .doc__title { font-size: 40pt; }
  .doc h2 { font-size: 22pt; margin-top: 26pt; break-after: avoid; }
  .doc h3 { font-size: 15pt; break-after: avoid; }
  .doc p, .doc__list .lp { font-size: 10.5pt; line-height: 1.5; color: var(--ink); }
  .doc__lead { font-size: 12pt; }
  .doc__stat { break-inside: avoid; }
  .doc__stat .n { font-size: 48pt; }
  .doc__quote { font-size: 18pt; break-inside: avoid; }
  .doc__list li { break-inside: avoid; }
  .doc__cta { break-inside: avoid; }
  .doc__cta a { border: 1px solid var(--ink); color: var(--ink); background: var(--paper); }
  a { color: inherit; text-decoration: none; }
}