/* Blog stylesheet — shares the main site's design tokens and type system
   (see index.html's inline <style> :root block) rather than reinventing
   them. Extracted once here instead of re-inlining ~400 lines per post. */

:root {
  --ink:        #f5f3f1;
  --ink-dim:    #cfccc9;
  --ink-muted:  #9d9b99;
  --ink-faint:  #7a7775;
  --ink-ghost:  #5a5856;
  --paper:      #0a0a0a;
  --paper-2:    #0f0f0f;
  --paper-3:    #141414;
  --rule:       rgba(245,243,241,.10);
  --rule-soft:  rgba(245,243,241,.06);
  --rule-hard:  rgba(245,243,241,.22);
  --hairline:   1px solid var(--rule);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink-dim); font-family: 'Noto Serif', serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; }

.display { font-family: 'Newsreader', serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.display .it, .it { font-style: italic; font-weight: 500; }
/* Brand wordmark (docs/BRAND.md § Name & wordmark) — "What" bold upright, "Next" italic regular */
.wm-what { font-weight: 800 !important; font-style: normal !important; }
.wm-next { font-weight: 400 !important; font-style: italic !important; }
.serif { font-family: 'Newsreader', serif; }
.body  { font-family: 'Noto Serif', serif; color: var(--ink-dim); line-height: 1.6; }
.mono  { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; font-size: 11px; color: var(--ink-muted); }
.kicker { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.32em; text-transform: uppercase; font-size: 10px; color: var(--ink-muted); }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 40px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.rule { height: 1px; background: var(--rule); width: 100%; }

/* ── Masthead (shared with main site) ───────────────────────── */
.masthead-strip {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,10,10,.86); backdrop-filter: blur(10px);
  border-bottom: var(--hairline);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 40px; max-width: 1280px; margin: 0 auto;
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-muted); text-transform: uppercase;
}
.masthead-inner .brand { color: var(--ink); letter-spacing: 0.32em; font-weight: 500; text-decoration: none; }
.masthead-inner nav { display: flex; gap: 28px; }
.masthead-inner nav a { text-decoration: none; color: var(--ink-muted); }
.masthead-inner nav a:hover, .masthead-inner nav a.active { color: var(--ink); }

/* ── Blog index ──────────────────────────────────────────────── */
.blog-hero { padding: 64px 0 32px; }
.blog-hero h1 { font-size: clamp(40px, 6vw, 64px); margin: 8px 0 16px; }
.post-list { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.post-list-item { padding: 28px 0; border-bottom: var(--hairline); }
.post-list-item h2 { font-family: 'Newsreader', serif; font-size: 26px; font-weight: 600; color: var(--ink); margin: 6px 0 8px; }
.post-list-item h2 a { text-decoration: none; }
.post-list-item h2 a:hover { color: var(--ink-dim); }
.post-list-item .desc { font-size: 15px; line-height: 1.5; }
.post-list-item .lane-tag { display: inline-block; margin-bottom: 4px; }

/* ── Article ─────────────────────────────────────────────────── */
.article-header { padding: 56px 0 24px; }
.article-header h1 { font-size: clamp(32px, 5vw, 48px); margin: 10px 0 20px; }
.article-meta { display: flex; gap: 16px; align-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); text-transform: uppercase; }

.update-note {
  margin: 20px 0; padding: 14px 18px;
  background: var(--paper-3); border: var(--hairline); border-radius: 4px;
  font-size: 14px; line-height: 1.5; color: var(--ink-muted);
}
.update-note strong { color: var(--ink-dim); font-weight: 600; }

.hero-image {
  display: block; width: 100%; height: auto; margin: 24px 0 16px;
  border-radius: 8px; border: var(--hairline);
}

.quick-answer {
  margin: 24px 0 40px; padding: 20px 24px;
  background: var(--paper-2); border: var(--hairline); border-left: 3px solid var(--ink-faint);
  border-radius: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-dim);
}
.quick-answer .label { display: block; margin-bottom: 8px; }

/* ── Timeline component (embedded raw HTML in post markdown) ── */
/* The dot is a real grid cell (.timeline-spine), not a hand-positioned
   absolute offset — Grid's own row alignment keeps it level with the date
   and title automatically instead of drifting out of sync. Each item's
   spine cell stretches to the row's full height (default grid behavior)
   so its ::after line segment can span top:0 to bottom:0 and chain into
   a continuous line across items. */
.timeline { margin: 32px 0 40px; }
.timeline-item { display: grid; grid-template-columns: 110px 20px 1fr; column-gap: 16px; padding: 22px 0; }
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-date {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  text-align: right; padding-top: 5px;
}
.timeline-spine { position: relative; }
.timeline-spine::before {
  content: '';
  position: absolute; left: 50%; top: 5px;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-muted);
  z-index: 1;
}
.timeline-spine::after {
  content: '';
  position: absolute; left: 50%; width: 1px; margin-left: -0.5px;
  top: 0; bottom: 0;
  background: var(--rule-hard);
}
.timeline-item:first-child .timeline-spine::after { top: 10px; }
.timeline-item:last-child .timeline-spine::after { bottom: calc(100% - 15px); }
.timeline-title { font-family: 'Newsreader', serif; font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.timeline-desc { font-size: 15px; line-height: 1.55; color: var(--ink-dim); margin: 0; }
@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 64px 16px 1fr; column-gap: 10px; }
  .timeline-date { font-size: 9px; }
}

.article-body { font-size: 17px; line-height: 1.75; }
.article-body h2 { clear: both; font-family: 'Newsreader', serif; font-size: 28px; font-weight: 600; color: var(--ink); margin: 56px 0 16px; padding-top: 32px; border-top: var(--hairline); }
.article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.article-body h3 { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; color: var(--ink); margin: 32px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body a { text-decoration: underline; text-decoration-color: var(--rule-hard); }
/* Film titles (marked **bold** in source) — plain bold on the dim body
   color barely registered against the surrounding prose. Newsreader italic
   + var(--ink) (not a literal #fff — every other bright type element on
   this page uses the token, and #fff actually outranked .faq-item .q's
   heading-role styling when it was here) gives them the same visual
   language as the Showroom hook/title treatment elsewhere in the brand, so
   they read as titles, not just emphasis, without out-ranking real
   headings (design review, issue #107 thread). No font-size bump: family +
   italic + weight 600 + the ink-dim→ink color step is already a decisive
   four-signal change from surrounding prose on its own.  */
.article-body strong { font-family: 'Newsreader', serif; font-style: italic; font-weight: 600; color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 20px; }
/* max-width: 320px is the default for a portrait crop that shouldn't run
   full column width (Post 1's onboarding/discover screenshots are the
   reference case this was tuned against). Showroom's landscape Blog
   Row/Blog Hero exports (1600x560, see WNAssetMaker issue #107) are
   exempted below via the img[width="1600"] selector, which drops the cap
   entirely (max-width: none) so they fill the same 700px .wrap column
   .hero-image does — that selector alone is what matches them to the hero,
   independent of whatever this base default is. Bumping this base default
   to 640px instead (2026-08-17, since reverted) was a mistake: it did
   nothing for the width="1600" images, which were already uncapped, and it
   doubled every other inline image on the site including Post 1's portrait
   screenshots, which is why they suddenly looked oversized. */
.article-body img { display: block; max-width: 320px; width: 100%; height: auto; margin: 40px auto; border-radius: 8px; border: var(--hairline); }
.article-body img[width="1600"] { max-width: none; }
/* Right-float variant for a portrait screenshot referenced by nearby prose,
   so the text wraps around it instead of breaking the paragraph flow. Not
   the default because most inline images (e.g. Post 1's screenshots) stand
   alone between paragraphs rather than illustrating a specific sentence.
   Narrower than the 320px block default (240px) so wrapped lines don't get
   squeezed too tight inside the 700px column. Un-floats below 640px, same
   breakpoint as .wrap's own padding collapse, so it doesn't fight the
   already-narrow mobile column. clear: both on .article-body h2 (above) is
   what actually stops a tall float from bleeding into the next section —
   clear on the float itself only affects floats before it, not content
   after, so a float taller than its own paragraphs will otherwise run past
   a divider/heading that doesn't clear. */
.article-body img.img-float-right { float: right; max-width: 240px; margin: -40px 0 20px 28px; }
.article-body img.img-float-left { float: left; max-width: 240px; margin: 4px 28px 20px 0; }
@media (max-width: 640px) {
  .article-body img.img-float-right, .article-body img.img-float-left { float: none; max-width: 320px; margin: 40px auto; }
}
/* height:auto is load-bearing, not redundant: without it, some rendering
   paths apply the height="…" attribute as a literal pixel value instead of
   scaling it with the width="…" attribute, squishing any image whose
   displayed width differs from its native width (confirmed via screenshot —
   a 1600x560 image at ~640px displayed width rendered as ~640x560, nearly
   square, instead of ~640x224). Never rely on implicit UA aspect-ratio
   behavior here. */

.faq { margin-top: 56px; padding-top: 32px; border-top: var(--hairline); }
.faq h2 { font-family: 'Newsreader', serif; font-size: 26px; color: var(--ink); margin: 0 0 24px; }
.faq-item { margin-bottom: 24px; }
.faq-item .q { font-family: 'Newsreader', serif; font-style: italic; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.faq-item .a { font-size: 15px; line-height: 1.6; }

.related-posts { margin-top: 64px; padding-top: 32px; border-top: var(--hairline); }
.related-posts h2 { font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 20px; }
.related-posts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.related-posts a { font-family: 'Newsreader', serif; font-size: 17px; color: var(--ink); text-decoration: none; }
.related-posts a:hover { color: var(--ink-dim); }

/* ── Download CTA (badges match index.html verbatim) ────────── */
.post-cta { margin-top: 64px; padding: 40px; text-align: center; background: var(--paper-2); border: var(--hairline); border-radius: 14px; }
.post-cta p { margin: 0 0 20px; }
.badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 20px 12px 17px; border-radius: 14px;
  background: #141419; color: #fff; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.05);
}
.badge:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.26); border-color: rgba(255,255,255,.1); }
.badge svg { width: 26px; height: 26px; flex: none; fill: #fff; }
.badge .bt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.badge .bt small { font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.04em; opacity: 0.8; font-weight: 500; text-transform: uppercase; }
.badge .bt b { font-family: system-ui, -apple-system, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.badge.disabled { cursor: default; opacity: 0.5; box-shadow: none; }
.badge.disabled:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.05); }

/* ── Footer (shared with main site) ─────────────────────────── */
footer { border-top: var(--hairline); margin-top: 80px; padding: 56px 0 32px; }
footer .colophon { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: var(--rule-soft); font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-ghost); text-transform: uppercase; }

@media (max-width: 640px) {
  .wrap, .wrap-wide { padding: 0 20px; }
  .masthead-inner { padding: 10px 20px; }
  footer .colophon { flex-direction: column; gap: 8px; }
}