/* /stories/ — the hub and the story pages (VX-271, 2026-11-08). Built by
   tools/stories/build_pages.py. Dark like the rest of the site; the story text
   is set in a book serif on a narrow column so an hour of reading is easy. */
.story-page, .story-hub { --ring: #A78BFA; }
.story-hero { padding: 72px 0 24px; text-align: center; }
.story-hero h1 { font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 700;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.08; margin: 6px 0 14px; letter-spacing: -.01em; }
.story-hero .subtitle { font-family: Charter, "Iowan Old Style", Georgia, serif; font-style: italic;
  color: #C9D3DF; font-size: clamp(19px, 2.4vw, 24px); max-width: 720px; margin: 0 auto 18px; }
.story-hub .story-hero .subtitle { font-style: normal; font-family: inherit; font-size: 19px; color: var(--muted); }
.story-hero .meta { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.story-hero .crumb { font-size: 14px; margin: 0 0 18px; }
.story-hero .crumb a { color: var(--muted); }
.story-hero .ctas, .story-end .ctas, .scard .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.story-page .button, .story-hub .button { background: var(--ring); color: #07111F; }
.story-page .button.ghost, .story-hub .button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ring); }
.story-intro { padding: 24px 0 8px; }
.story-intro .lead { font-size: 19px; color: #C9D3DF; line-height: 1.65; margin: 0 auto; }

/* chapter map */
.chapter-map { padding: 40px 0 24px; }
.chapter-map h2 { font-size: 26px; margin: 0 0 8px; }
.chapter-map h3.part { font-size: 15px; margin: 28px 0 8px; color: var(--text); }
.chapter-map h3.part span { color: var(--ring); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin-right: 6px; }
.chapter-map ol { margin: 0; padding-left: 28px; }
.chapter-map li { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.chapter-map li::marker { color: var(--muted); font-size: 14px; }
.chapter-map a { color: var(--text); display: block; }
.chapter-map a:hover { text-decoration: none; }
.chapter-map a:hover b { color: var(--ring); }
.chapter-map .narr { color: var(--ring); font-size: 14px; margin-left: 4px; }
.chapter-map .sum { display: block; color: var(--muted); font-size: 15px; }
.chapter-map .between { margin: 18px 0 0; }
.chapter-map .between .sum { display: inline; }

/* reader: menu beside the text on a wide screen, a button on a phone */
.reader { padding: 40px 0 72px; }
.reader > .wrap { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 56px; justify-content: center; }
.chapnav { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; font-size: 14px; }
.chapnav-btn { display: none; }
.chapnav ol { list-style: none; margin: 0 0 16px; padding: 0; }
.chapnav li a { display: flex; gap: 8px; padding: 5px 8px; border-radius: 6px; color: var(--muted); line-height: 1.35; }
.chapnav li a:hover { text-decoration: none; color: var(--text); background: #0D1B2E; }
.chapnav li a.on { color: var(--text); background: #0D1B2E; box-shadow: inset 2px 0 0 var(--ring); }
.chapnav .n { flex: 0 0 18px; text-align: right; color: #5F718A; }
.chapnav .pdf { display: inline-block; margin-left: 8px; font-size: 14px; }
.story-page main a:not(.button) { color: var(--ring); }
.story-page main .chapnav li a { color: var(--muted); }
.story-page main .chapnav li a.on, .story-page main .chapnav li a:hover { color: var(--text); }
.story-page main .chapter-map a { color: var(--text); }
.story-page main .chapter-map a:hover b { color: var(--ring); }

.text { font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 19px; line-height: 1.7; color: #DCE4EE; }
.text .chapter { padding: 24px 0 0; border-bottom: 0; scroll-margin-top: 16px; }
.text .chapter + .chapter { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 56px; }
.text .partline { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.text .num { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ring); margin: 0 0 6px; }
.text h2 { font-size: clamp(30px, 4vw, 38px); line-height: 1.15; margin: 0 0 6px; color: #fff; }
.text .narrator { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--muted); font-size: 15px; margin: 0 0 30px; }
.text h2 + p:not(.narrator) { margin-top: 28px; }
.text p { margin: 0 0 1em; }
.text p.memo { margin: 1.1em 0 1.1em 1.4em; padding-left: 16px; border-left: 2px solid var(--line); color: #B7C4D4; }
.text strong { color: #fff; }
.story-end { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); text-align: center; }
.story-end .fine { margin: 18px 0 0; }
.story-end .fiction { font-style: italic; color: var(--muted); font-size: 15px; margin: 28px auto 0; max-width: 520px; }
.story-end .write-to { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

@media (max-width: 900px) {
  .reader { padding-top: 0; }
  .reader > .wrap { display: block; }
  .chapnav { position: sticky; top: 0; z-index: 5; max-height: none; overflow: visible; margin: 0 -24px; padding: 10px 24px;
    background: rgba(7, 17, 31, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
  .chapnav-btn { display: inline-flex; align-items: center; gap: 8px; background: #0D1B2E; color: var(--text); border: 1px solid var(--line);
    border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; }
  .chapnav-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .chapnav ol, .chapnav .pdf { display: none; }
  .chapnav.open ol { display: block; margin: 10px 0 4px; max-height: 60vh; overflow: auto; }
  .chapnav.open .pdf { display: inline-block; margin: 4px 0 6px 8px; }
  .text { font-size: 18px; }
  .text .chapter { scroll-margin-top: 64px; }
}

/* hub */
.story-cards { padding: 24px 0 88px; }
.scard { max-width: 780px; margin: 0 auto; background: #0D1B2E; border: 1px solid var(--line); border-top: 4px solid var(--ring);
  border-radius: 16px; padding: 32px 36px; }
.scard .for { color: var(--ring); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.scard h2 { font-family: Charter, "Iowan Old Style", Georgia, serif; font-size: 36px; margin: 0 0 4px; }
.scard h2 a { color: #fff; }
.scard .subtitle { font-family: Charter, "Iowan Old Style", Georgia, serif; font-style: italic; color: #C9D3DF; font-size: 20px; margin: 0 0 14px; }
.scard p { color: #B7C4D4; }
.scard .ctas { justify-content: flex-start; margin-top: 22px; }
@media (max-width: 600px) { .scard { padding: 24px 20px; } .scard h2 { font-size: 30px; } }

/* /engineer/: the "Why we built Vector Engineer" band */
.why-band { padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0A1626; }
.why-band .wrap { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 860px; }
.why-band h2 { margin: 0 0 10px; }
.why-band p { color: #B7C4D4; margin: 0; max-width: 680px; font-size: 18px; }
.why-band .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.why-band .button .dim { font-weight: 500; opacity: .75; }
@media (max-width: 600px) { .why-band .ctas, .story-hero .ctas, .story-end .ctas, .scard .ctas { flex-direction: column; } .why-band .ctas .button, .story-hero .ctas .button, .story-end .ctas .button, .scard .ctas .button { width: 100%; text-align: center; box-sizing: border-box; } }
/* the countdown line under a title (Close Enough) and a closing dedication */
.text .narrator:has(+ .when) { margin-bottom: 2px; }
.text .when { font-style: italic; color: var(--muted); font-size: 16px; margin: 0 0 30px; }
.text h2 + p.when { margin-top: 2px; }
.text .dedication { font-style: italic; color: var(--muted); text-align: center; font-size: 17px; max-width: 520px; margin: 48px auto 0; }