/* ────────────────────────────────────────────────────────────────────────
   Ashford Partners — blog post styles.

   Shared by every page in /blog/. This is the one place in the project with
   an external stylesheet: index.html and book.html inline their CSS, but blog
   posts are generated per-article, so a shared file keeps them consistent and
   lets the browser cache it across posts.

   Tokens mirror index.html exactly — keep them in sync.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --canvas: #ffffff;
  --surface-soft: #f1f4f7;
  --ink-deep: #0a1317;
  --ink: #1c1e21;
  --charcoal: #444950;
  --steel: #5d6c7b;
  --stone: #8595a4;
  --hairline: #ced0d4;
  --hairline-soft: #dee3e9;
  --accent: #f97316;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --r-lg: 8px; --r-full: 100px;
  --s-xs: 8px; --s-sm: 10px; --s-md: 12px; --s-base: 16px; --s-lg: 20px;
  --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 40px; --s-sec: 64px; --s-sec-lg: 80px;
  --font: "Inter", "Optimistic VF", Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
  --measure: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--ink-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blue); }

/* Keyboard users land here first; visible only when focused. */
.skip-link {
  position: absolute; left: -9999px; top: var(--s-base);
  background: var(--ink-deep); color: #fff; padding: var(--s-md) var(--s-base);
  border-radius: 5px; z-index: 100; text-decoration: none;
}
.skip-link:focus { left: var(--s-base); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--s-xl); }

/* Header — mirrors the index.html nav */
.site-nav { border-bottom: 1px solid var(--hairline-soft); background: var(--canvas); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--s-lg); }
/* Same logo asset and height as index.html. */
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 21px; width: auto; }
.nav-links { display: flex; gap: var(--s-lg); }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--steel); text-decoration: none; }
.nav-links a:hover { color: var(--ink-deep); }

/* Breadcrumb */
.crumbs { padding: var(--s-lg) 0 0; font-size: 13.5px; color: var(--stone); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-xs); margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: var(--s-xs); color: var(--hairline); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--steel); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }

/* Post header */
.post-head { max-width: var(--measure); margin: 0 auto; padding: var(--s-xxl) 0 var(--s-xl); }
h1 {
  margin: var(--s-base) 0 0; font-size: 42px; font-weight: 800;
  letter-spacing: -1.4px; line-height: 1.1; color: var(--ink-deep);
}
.post-meta { margin-top: var(--s-base); font-size: 14.5px; color: var(--steel); }
.post-meta b { color: var(--ink-deep); font-weight: 700; }
.post-updated { color: var(--stone); }

/* Hero image */
.post-hero { margin: var(--s-xl) auto var(--s-xxl); max-width: var(--measure); }
.post-hero img { display: block; width: 100%; border-radius: var(--r-lg); }
.credit, .credit a { font-size: 12.5px; color: var(--stone); }
.credit { margin: var(--s-sm) 0 0; }

/* Body */
.post-body { max-width: var(--measure); margin: 0 auto; }
.post-body h2 {
  margin: var(--s-sec) 0 var(--s-base); font-size: 28px; font-weight: 800;
  letter-spacing: -0.8px; line-height: 1.2; color: var(--ink-deep); scroll-margin-top: var(--s-lg);
}
.post-body h3 {
  margin: var(--s-xxl) 0 var(--s-sm); font-size: 20px; font-weight: 700;
  letter-spacing: -0.4px; color: var(--ink-deep);
}
.post-body p { margin: 0 0 var(--s-lg); color: var(--charcoal); }
.post-body strong { color: var(--ink-deep); font-weight: 700; }
.post-body ul, .post-body ol { margin: 0 0 var(--s-lg); padding-left: var(--s-xl); color: var(--charcoal); }
.post-body li { margin-bottom: var(--s-sm); }
.post-body figure { margin: var(--s-xxl) 0; }
.post-body figure img { border-radius: var(--r-lg); }
.post-body blockquote {
  margin: var(--s-xxl) 0; padding: var(--s-base) var(--s-xl);
  border-left: 3px solid var(--hairline); background: var(--surface-soft);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; color: var(--charcoal);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body pre {
  margin: 0 0 var(--s-lg); padding: var(--s-base); overflow-x: auto;
  background: var(--ink-deep); color: #e6edf3; border-radius: var(--r-lg);
  font-size: 14px; line-height: 1.55;
}
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  background: var(--surface-soft); padding: 2px 5px; border-radius: 4px;
}
.post-body pre code { background: none; padding: 0; color: inherit; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-lg); font-size: 15px; }
.post-body th, .post-body td { text-align: left; padding: var(--s-sm) var(--s-md); border-bottom: 1px solid var(--hairline-soft); }
.post-body th { color: var(--ink-deep); font-weight: 700; }
/* Wide tables scroll inside their own container rather than the page. */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s-lg); }

/* Table of contents */
.toc {
  max-width: var(--measure); margin: 0 auto var(--s-xxl);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--s-lg) var(--s-xl);
  background: var(--canvas);
}
.toc h2 { margin: 0 0 var(--s-sm); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-deep); }
.toc ol { margin: 0; padding-left: var(--s-lg); }
.toc li { margin-bottom: 6px; font-size: 15px; }
.toc a { color: var(--charcoal); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }

/* FAQ */
.faq { max-width: var(--measure); margin: var(--s-sec) auto 0; }
.faq h2 { margin-bottom: var(--s-lg); }
.faq details { border-bottom: 1px solid var(--hairline-soft); padding: var(--s-base) 0; }
.faq summary {
  cursor: pointer; font-size: 17px; font-weight: 700; color: var(--ink-deep);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-base);
  min-height: 48px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--steel); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: var(--s-sm) 0 0; color: var(--charcoal); }

/* Book promo — the conversion block on every post. The whole card links to
   the book page; the Amazon button takes over its own click. */
.book-promo { max-width: var(--measure); margin: var(--s-sec) auto 0; }
.book-promo-card {
  display: flex; gap: var(--s-xxl); text-decoration: none; color: inherit;
  border: 1px solid var(--hairline-soft); border-radius: 5px; padding: var(--s-xxl);
  transition: box-shadow .25s;
}
.book-promo-card:hover { box-shadow: 0 8px 24px -16px rgba(10,19,23,0.35); color: inherit; }
/* Centred rather than top-aligned: whichever of the cover and the text column
   is shorter gets its slack split evenly, so the two read as a balanced pair. */
.book-promo-card img { flex: 0 0 150px; align-self: center; border-radius: 5px; box-shadow: 0 0 0 1px rgba(10,19,23,0.08); }
.book-promo .pk { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--blue); }
/* line-height is set explicitly: headings would otherwise inherit body's 1.65,
   which only shows once the title wraps. */
.book-promo h2 { margin: var(--s-sm) 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; color: var(--ink-deep); }
.book-promo .by { margin: var(--s-xs) 0 0; font-size: 15px; color: var(--charcoal); }
.book-promo .actions { margin-top: var(--s-lg); }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border-radius: 5px; font-size: 14.5px; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background .15s;
}
.btn-dark { background: var(--ink-deep); color: #fff; }
.btn-dark:hover { background: var(--charcoal); color: #fff; }
/* Amazon wordmark alignment.
   The wordmark's viewBox is 0 0 603 182. The word glyphs end at y=107.4 (their
   baseline, since "amazon" has no descenders) and the smile hangs from y=109.7
   to y=181.7. So the word's baseline sits at 107.4/182 = 59% of the height, and
   41% of the box hangs below it.

   With align-self: baseline the SVG's bottom edge lands on the text baseline,
   which puts the word 41% of its height too high. Nudge it back down by exactly
   that. Tied to --amz-h so it stays correct if the logo is resized. */
.btn-amazon { align-items: baseline; gap: 7px; line-height: 48px; }
.btn-amazon .amz {
  --amz-h: 17px;
  height: var(--amz-h); width: auto;
  align-self: baseline;
  transform: translateY(calc(var(--amz-h) * 0.41));
}
.btn-amazon .amz .word { fill: #fff; }
.btn-amazon .amz .smile { fill: var(--accent); }

/* Sources */
.sources { max-width: var(--measure); margin: var(--s-xxl) auto 0; font-size: 14.5px; color: var(--charcoal); }
.sources h2 { margin: 0 0 var(--s-sm); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--steel); }
.sources ul { margin: 0; padding-left: var(--s-lg); }

/* Back to top */
.to-top {
  position: fixed; right: var(--s-lg); bottom: var(--s-lg);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink-deep); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 18px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--charcoal); }

/* Footer */
.site-footer { margin-top: var(--s-sec-lg); border-top: 1px solid var(--hairline-soft); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-base); flex-wrap: wrap; padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
.site-footer .copy { font-size: 13.5px; color: var(--stone); }
.site-footer nav { display: flex; gap: var(--s-lg); flex-wrap: wrap; }
.site-footer a { font-size: 13.5px; font-weight: 600; color: var(--steel); text-decoration: none; }
.site-footer a:hover { color: var(--ink-deep); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 var(--s-base); }
  h1 { font-size: 30px; letter-spacing: -1px; }
  .post-body h2 { font-size: 23px; margin-top: var(--s-xxxl); }
  /* Keep the promo horizontal on phones. Stacking it pushed the card past
     450px tall and left the cover stranded above a column of text. A smaller
     cover beside the text reads as one unit and roughly halves the height. */
  .book-promo { margin-top: var(--s-xxxl); }
  .book-promo-card { gap: var(--s-base); padding: var(--s-lg); }
  .book-promo-card img { flex: 0 0 100px; width: 100px; }
  .book-promo h2 { font-size: 20px; letter-spacing: -0.4px; }
  .book-promo .by { font-size: 14px; }
  .book-promo .actions { margin-top: var(--s-base); }
  .site-nav .wrap { height: auto; padding-top: var(--s-md); padding-bottom: var(--s-md); }
}

/* Very narrow phones: the cover and the Amazon button stop fitting side by
   side, so let the text column take the full width below the cover. */
@media (max-width: 340px) {
  .book-promo-card { flex-direction: column; gap: var(--s-base); }
  .book-promo-card img { flex: none; width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}