/* tokens: extracted from src/index.css at build time */
:root, .dark {
  --base:#0A0A0C; --raised:#141417; --overlay:#1B1B20;
  --ink:#F4F3F0; --muted:#8E8E96;
  --hair:rgba(255,255,255,.10); --hair-strong:rgba(255,255,255,.16);
  --gold:#FFD9A8; --sig:#9C3D3A; --sig-btn:#B0473F; --sig-link:#C56A60;
  --fill:rgba(255,255,255,.06); --fill-hover:rgba(255,255,255,.12); --skeleton:rgba(255,255,255,.08);
  /* RGB triples (kept in sync with the hex tokens above) so Tailwind opacity
     modifiers (bg-sig/15, border-gold/40, …) can emit real CSS — the raw hex
     vars stay for direct var() reads (accent-[var(--sig)], canvas code, etc.). */
  --base-rgb:10 10 12; --raised-rgb:20 20 23;
  --ink-rgb:244 243 240; --muted-rgb:142 142 150;
  --gold-rgb:255 217 168; --sig-rgb:156 61 58; --sig-btn-rgb:176 71 63; --sig-link-rgb:197 106 96;
  /* A restrained gold halo for the ONE phrase on a surface that must read at a
     glance (today: the Trip Pass credit amount). Derived from --gold-rgb so it
     can never drift from the token, and tuned per theme: on the dark base the
     gold is pale (#FFD9A8) and can carry a wider, stronger bloom; the light
     theme's gold is a dark amber, so it gets a tighter, fainter one or it reads
     as a smudge behind the text rather than a glow around it. */
  --glow-gold:0 0 12px rgb(var(--gold-rgb) / .55);
  --shadow-soft:0 1px 2px rgba(0,0,0,.4), 0 12px 40px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 30px 80px -28px rgba(0,0,0,.8);
  color-scheme: dark;
}
/* Landing article (static island). Plain CSS on the theme tokens, scoped to [data-landing-article],
   so the markup in article.html stays class-free for authors. Tokens flip with html.dark / html.light. */
[data-landing-article] { color: rgb(var(--ink-rgb) / 0.86); }
.la { padding: 2rem 1.5rem 5rem; }
.la-inner { max-width: 68ch; margin: 0 auto; border-top: 1px solid var(--hair); padding-top: 3.5rem; font-size: 1.0625rem; line-height: 1.75; }
.la p { margin: 0 0 1.25rem; }
.la a { color: rgb(var(--sig-link-rgb)); text-decoration: underline; text-underline-offset: 3px; }
.la strong { color: rgb(var(--ink-rgb)); font-weight: 600; }
.la h2, .la h3 { font-family: Fraunces, Georgia, serif; color: rgb(var(--ink-rgb)); letter-spacing: -0.01em; scroll-margin-top: 1.5rem; }
.la h2 { font-weight: 500; font-size: clamp(1.75rem, 4.2vw, 2.4rem); line-height: 1.1; margin: 4rem 0 1.25rem; }
.la h3 { font-weight: 500; font-size: 1.35rem; line-height: 1.25; margin: 2.25rem 0 0.5rem; }
.la ul, .la ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
/* Tailwind preflight resets list-style; put it back for article prose. */
.la ul { list-style: disc; }
.la ol { list-style: decimal; }
.la li { margin: 0 0 0.5rem; padding-left: 0.25rem; }
.la li::marker { color: rgb(var(--gold-rgb)); }

/* === toc (seo-faqtoc) === */
/* One <nav> of plain anchors. Narrow screens: a sticky row of links that scrolls sideways (below), no box, no numbers.
   >= 80rem: a rail in the left gutter that sticks while you read; enhance.ts marks the current section
   (aria-current) and sets data-hidden just before the full-width comparison table reaches it, so the rail
   fades out over the table. It stacks above the table, so it fades whole instead of being cut off. */
.la { --la-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.la-toc { margin: 0 0 0.5rem; }
.la-toc-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.4rem; }
.la .la-toc-title { margin: 0; font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: rgb(var(--gold-rgb)); }
.la .la-toc ol { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; }
.la .la-toc li { margin: 0; padding: 0; }
.la .la-toc a { color: rgb(var(--ink-rgb) / 0.72); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--ink-rgb) / 0.2); text-underline-offset: 5px; transition: color 0.2s, text-decoration-color 0.2s; }
.la .la-toc a:hover { color: rgb(var(--ink-rgb)); text-decoration-color: rgb(var(--gold-rgb)); }
.la .la-toc a:focus-visible { outline: 2px solid rgb(var(--gold-rgb)); outline-offset: 3px; border-radius: 4px; }

/* Below the rail breakpoint: one row that sticks to the top of the viewport while you read and scrolls sideways
   (bleeds to the screen edges, faded at both ends). Links show their data-short label; the full label stays the
   link text, so the accessible name and the crawled HTML are unchanged. The current section gets the same gold
   marker as the rail, laid flat under the word; enhance.ts sets it, scrolls it into view and sets data-stuck,
   which adds the hairline (and data-scrolled on the row, which widens the left fade). The background is drawn
   by border-image outset, so it spans the viewport without widening the page. */
@media (max-width: 79.99rem) {
  .la h2 { scroll-margin-top: 4.25rem; }
  .la-toc {
    position: sticky; top: 0; z-index: 3; margin: -0.75rem -1.5rem 0;
    border-image: linear-gradient(rgb(var(--base-rgb)) 0 0) fill 0 // 0 100vw;
  }
  .la-toc[data-stuck] { border-image-source: linear-gradient(to top, var(--hair) 1px, rgb(var(--base-rgb)) 1px); }
  .la-toc-in {
    flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding: 0 2.5rem 0 1.5rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 1.5rem; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 2.5rem), transparent);
  }
  .la-toc-in::-webkit-scrollbar { display: none; }
  .la-toc-in[data-scrolled] {
    -webkit-mask-image: linear-gradient(to right, transparent 1.25rem, #000 3rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent 1.25rem, #000 3rem, #000 calc(100% - 2.5rem), transparent);
  }
  .la .la-toc-title { flex: none; font-size: 1rem; white-space: nowrap; scroll-snap-align: start; }
  .la .la-toc ol { flex: none; flex-wrap: nowrap; gap: 0; }
  .la .la-toc li { flex: none; scroll-snap-align: start; }
  .la .la-toc a { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.65rem; white-space: nowrap; text-decoration: none; color: rgb(var(--muted-rgb)); }
  .la .la-toc a[data-short] { font-size: 0; }
  .la .la-toc a[data-short]::before { content: attr(data-short); content: attr(data-short) / ""; font-size: 0.9375rem; }
  .la .la-toc a::after { content: ""; position: absolute; left: 0.65rem; right: 0.65rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: rgb(var(--gold-rgb)); transform: scaleX(0); transition: transform 0.3s var(--la-ease); }
  .la .la-toc a:hover, .la .la-toc a[aria-current] { color: rgb(var(--ink-rgb)); }
  .la .la-toc a[aria-current]::after { transform: scaleX(1); }
  .la .la-toc a:focus-visible { outline-offset: -2px; border-radius: 8px; }
}

@media (min-width: 80rem) {
  .la-inner { position: relative; }
  /* top: the title lines up with the first <h2> (padding 3.5rem + h2 margin 4rem). */
  .la-toc { position: absolute; z-index: 2; top: 7.75rem; bottom: 0; right: calc(100% + 2.5rem); width: 11rem; margin: 0; }
  .la-toc-in { position: sticky; top: 2.5rem; display: block; transition: opacity 0.25s ease, visibility 0.25s; }
  .la-toc[data-hidden] .la-toc-in { opacity: 0; visibility: hidden; }
  .la .la-toc-title { margin: 0 0 0.85rem; font-size: 1rem; }
  .la .la-toc ol { display: block; border-left: 1px solid var(--hair); font-size: 0.875rem; line-height: 1.4; }
  .la .la-toc a { position: relative; display: block; padding: 0.42rem 0 0.42rem 1rem; text-decoration: none; color: rgb(var(--muted-rgb)); }
  .la .la-toc a::before { content: ""; position: absolute; left: -1px; top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: rgb(var(--gold-rgb)); transform: scaleY(0); transition: transform 0.3s var(--la-ease); }
  .la .la-toc a:hover { color: rgb(var(--ink-rgb)); }
  .la .la-toc a[aria-current] { color: rgb(var(--ink-rgb)); }
  .la .la-toc a[aria-current]::before { transform: scaleY(1); }
}

/* === figures (seo-frames) === */
/* Screenshots come already inside an iPhone frame with a transparent background (scripts/build-shots.mjs),
   so the img gets no border, radius or shadow of its own. width/height attrs reserve the box (no layout shift).
   Mobile: phone centred, caption under it. Desktop: caption beside the phone, sides alternating. */
.la-shot { margin: 2.25rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.la-shot picture { display: block; flex: none; }
.la-shot img { display: block; width: min(68vw, 270px); height: auto; }
.la-shot figcaption { max-width: 18rem; text-align: center; font-size: 13px; line-height: 1.5; color: rgb(var(--muted-rgb)); text-wrap: pretty; }
@media (min-width: 768px) {
  .la-shot { flex-direction: row; justify-content: center; gap: 2.25rem; margin: 3rem 0; }
  .la-shot img { width: 270px; }
  .la-shot figcaption { max-width: 15rem; text-align: left; font-size: 14px; padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid rgb(var(--gold-rgb) / 0.45); }
  .la-shot:nth-of-type(even) { flex-direction: row-reverse; }
  .la-shot:nth-of-type(even) figcaption { text-align: right; padding: 0.15rem 1rem 0.15rem 0; border-left: 0; border-right: 2px solid rgb(var(--gold-rgb) / 0.45); }
}

/* === compare table (seo-table) === */
/* Generic article tables scroll sideways inside their own box instead of widening the page. */
.la-table { margin: 0 0 1.5rem; overflow-x: auto; }
.la table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.5; }
.la th, .la td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }

/* Comparison table. Desktop: breaks out of the 68ch text column (centred, never wider than the
   viewport), Passage is the gold-edged second column. Under 64rem every feature row becomes a card
   with labelled lines (td[data-label]), so phones and tablets never scroll sideways. Verdicts are real words;
   the marks are decorative masks with empty content, so colour and shape never carry meaning alone. */
.la-cmp { --cmp-half: min(33rem, 50vw - 1.5rem); margin: 2.25rem calc(50% - var(--cmp-half)) 2rem; }
.la-cmp .la-table { margin: 0; scrollbar-width: thin; }
.la-cmp table { min-width: 44rem; table-layout: fixed; font-size: 0.9rem; }
.la-cmp caption { caption-side: bottom; padding: 1rem 0 0; text-align: left; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; line-height: 1.6; color: rgb(var(--muted-rgb)); }
.la-cmp th, .la-cmp td { padding: 1rem 0.9rem 1.05rem; border-bottom: 1px solid var(--hair); }
.la-cmp thead th { padding-top: 1.1rem; padding-bottom: 0.9rem; border-bottom-color: var(--hair-strong); font-family: "General Sans", system-ui, sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: rgb(var(--ink-rgb)); white-space: nowrap; }
.la-cmp thead th:first-child { width: 9.5rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--muted-rgb)); vertical-align: bottom; }
.la-cmp tbody th { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ink-rgb) / 0.78); }
.la-cmp tbody tr:last-child > * { border-bottom: 0; }
.la-cmp th:first-child { position: sticky; left: 0; z-index: 1; background: rgb(var(--base-rgb)); }

/* Passage pillar: tinted column with gold side rules, rounded at both ends. */
.la-cmp tr > :nth-child(2) { background: rgb(var(--gold-rgb) / 0.055); box-shadow: inset 1px 0 rgb(var(--gold-rgb) / 0.32), inset -1px 0 rgb(var(--gold-rgb) / 0.32); }
.la-cmp thead th:nth-child(2) { border-radius: 14px 14px 0 0; box-shadow: inset 1px 0 rgb(var(--gold-rgb) / 0.32), inset -1px 0 rgb(var(--gold-rgb) / 0.32), inset 0 2px rgb(var(--gold-rgb)); color: rgb(var(--gold-rgb)); }
.la-cmp tbody tr:last-child > :nth-child(2) { border-radius: 0 0 14px 14px; box-shadow: inset 1px 0 rgb(var(--gold-rgb) / 0.32), inset -1px 0 rgb(var(--gold-rgb) / 0.32), inset 0 -1px rgb(var(--gold-rgb) / 0.32); }

/* Cell: verdict line (mark + word), then an optional quieter detail line. */
.la-cmp-v { display: flex; align-items: flex-start; gap: 0.45rem; font-weight: 500; line-height: 1.35; color: rgb(var(--ink-rgb)); }
.la-cmp-d { display: block; margin-top: 0.3rem; font-size: 13px; line-height: 1.45; color: rgb(var(--muted-rgb)); }
.la-cmp-v[data-m]::before { content: ""; content: "" / ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.1em; background-color: currentColor; -webkit-mask: var(--cmp-icon) center / 100% no-repeat; mask: var(--cmp-icon) center / 100% no-repeat; }
.la-cmp-v[data-m="y"]::before { --cmp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.la-cmp-v[data-m="n"]::before { --cmp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 4.8l6.4 6.4M11.2 4.8l-6.4 6.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.la-cmp-v[data-m="p"]::before { --cmp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E"); }
.la-cmp-v[data-m="-"]::before { --cmp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8h6.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.la-cmp-v[data-m="y"] { color: rgb(var(--ink-rgb)); }
.la-cmp-v[data-m="n"], .la-cmp-v[data-m="-"] { font-weight: 400; color: rgb(var(--muted-rgb)); }
.la-cmp td:nth-child(2) .la-cmp-v[data-m="y"]::before { color: rgb(var(--gold-rgb)); }

@media (max-width: 63.99rem) {
  .la-cmp { margin: 2rem 0; }
  .la-cmp .la-table { overflow: visible; }
  .la-cmp table, .la-cmp tbody, .la-cmp tr, .la-cmp th, .la-cmp td, .la-cmp caption { display: block; }
  .la-cmp table { display: flex; flex-direction: column; min-width: 0; }
  .la-cmp caption { order: 1; }
  .la-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .la-cmp caption { padding: 0.25rem 0 0; }
  .la-cmp tbody tr { margin: 0 0 0.875rem; border: 1px solid var(--hair); border-radius: 16px; background: rgb(var(--raised-rgb)); overflow: hidden; }
  .la-cmp tbody tr:last-child > * { border-bottom: 1px solid var(--hair); }
  .la-cmp tbody tr > :last-child { border-bottom: 0; }
  .la-cmp tbody th { position: static; padding: 0.85rem 1rem 0.7rem; background: none; border-bottom: 1px solid var(--hair); }
  .la-cmp td { display: grid; grid-template-columns: 6.25rem 1fr; column-gap: 0.75rem; padding: 0.7rem 1rem; }
  .la-cmp td::before { content: attr(data-label); grid-row: 1 / span 2; padding-top: 0.05rem; font-size: 0.85rem; font-weight: 500; line-height: 1.35; color: rgb(var(--muted-rgb)); }
  .la-cmp .la-cmp-v, .la-cmp .la-cmp-d { grid-column: 2; }
  .la-cmp-d { margin-top: 0.2rem; }
  /* Passage line leads each card. */
  .la-cmp tr > :nth-child(2), .la-cmp tbody tr:last-child > :nth-child(2) { border-radius: 0; background: rgb(var(--gold-rgb) / 0.07); box-shadow: inset 2px 0 rgb(var(--gold-rgb)); }
  .la-cmp td:nth-child(2)::before { color: rgb(var(--gold-rgb)); font-weight: 600; }
}

/* === faq (seo-faqtoc) === */
/* Native <details>, readable with no JS and no CSS support. Open/close is animated two ways:
   - interpolate-size + ::details-content (Chromium): pure CSS, below.
   - elsewhere enhance.ts animates .la-a's height with the Web Animations API (data-closing = mid-close). */
.la-q { border-top: 1px solid var(--hair); }
.la-faq .la-q:last-of-type { border-bottom: 1px solid var(--hair); }
.la-q summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; font-weight: 500; color: rgb(var(--ink-rgb)); }
.la-q summary::-webkit-details-marker { display: none; }
.la-q summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--hair-strong);
  background: linear-gradient(rgb(var(--gold-rgb)) 0 0) center / 11px 1.5px no-repeat, linear-gradient(rgb(var(--gold-rgb)) 0 0) center / 1.5px 11px no-repeat;
  transition: transform 0.28s var(--la-ease), border-color 0.2s, background-color 0.2s;
}
.la-q[open]:not([data-closing]) summary::after { transform: rotate(45deg); border-color: rgb(var(--gold-rgb) / 0.45); background-color: rgb(var(--gold-rgb) / 0.08); }
@media (hover: hover) { .la-q summary:hover::after { border-color: rgb(var(--gold-rgb) / 0.6); } }
.la-q summary:focus-visible { outline: 2px solid rgb(var(--gold-rgb)); outline-offset: 2px; border-radius: 6px; }
.la-a { overflow: hidden; }
.la .la-a p { margin: 0; padding: 0 0 1.35rem; color: rgb(var(--muted-rgb)); }
@media (min-width: 40rem) { .la .la-a p { padding-right: 3.25rem; } }

/* Gate on interpolate-size alone: autoprefixer cannot parse selector() in @supports. */
@supports (interpolate-size: allow-keywords) {
  .la-faq { interpolate-size: allow-keywords; }
  .la-q::details-content { block-size: 0; opacity: 0; overflow-y: clip; transition: block-size 0.28s var(--la-ease), opacity 0.22s ease, content-visibility 0.28s allow-discrete; }
  .la-q[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .la-q summary::after, .la-toc-in, .la .la-toc a::before, .la .la-toc a::after { transition: none; }
  .la-q::details-content { transition: none; }
}

.la .la-badge { margin: 3rem 0 0; text-align: center; }
.la-badge a { display: inline-block; margin: 0.75rem; border-radius: 9px; }
.la-badge img { display: block; }

/* Blog-only rules (header, breadcrumb, byline, listing, CTA, footer), on the same theme tokens as the app.
   Post prose is styled by src/landing-article/article.css (.la), concatenated in front of this file by
   build/blog.mjs buildBlogCss(). Edit article.css only through the landing-article tests. */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--base); -webkit-text-size-adjust: 100%; }
body.bp { margin: 0; background: var(--base); color: rgb(var(--ink-rgb)); font-family: "General Sans", "Satoshi", system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
body.bp img, body.bp picture { max-width: 100%; height: auto; display: block; }
body.bp h1, body.bp h2, body.bp h3, body.bp p, body.bp ul, body.bp ol, body.bp figure { margin: 0; }
body.bp ul, body.bp ol { padding: 0; list-style: none; }
body.bp a { color: inherit; }

.bp-head { display: flex; align-items: center; justify-content: space-between; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
.bp-logo { font-family: Fraunces, Georgia, serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; text-decoration: none; }
.bp-head nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.875rem; }
.bp-head nav a:not(.bp-pill) { text-decoration: none; color: rgb(var(--ink-rgb) / 0.8); }
.bp-head nav a:not(.bp-pill):hover { color: rgb(var(--ink-rgb)); }
.bp-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--sig-btn); color: #fff !important; padding: 0.55rem 1.15rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.bp-pill:hover { filter: brightness(1.08); }

main { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 3rem; }
.bp-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); margin: 0.5rem auto 1.5rem; max-width: 68ch; }
.bp-crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bp-crumbs [aria-current] { color: rgb(var(--ink-rgb) / 0.7); }
.bp-post, .bp-indexhead, .bp-404 { max-width: 68ch; margin: 0 auto; }
.bp-title { font-family: Fraunces, Georgia, serif; font-weight: 500; letter-spacing: -0.015em; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08; }
.bp-byline { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }
.bp-byline a { text-decoration: underline; text-underline-offset: 3px; }

/* Post prose lives in .la (article.css). Undo its landing-page-only framing. */
.bp-prose.la { padding: 1.5rem 0 1rem; color: rgb(var(--ink-rgb) / 0.86); }
.bp-prose .la-inner { max-width: none; border-top: 0; padding-top: 0; }
.bp-prose.la h2:first-child, .bp-prose .la-inner > h2:first-child { margin-top: 1rem; }
.bp-prose .bp-credit { margin: 0.75rem 0 0; font-size: 0.8125rem; color: rgb(var(--muted-rgb)); }
.bp-prose .bp-credit a { color: inherit; }
.bp-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--hair); border-radius: 14px; background: var(--fill); }
.bp-toc .bp-toc-title { font-family: Fraunces, Georgia, serif; font-style: italic; color: rgb(var(--gold-rgb)); margin: 0 0 0.6rem; }
.bp-toc ol { display: grid; gap: 0.5rem; margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.bp-toc li { margin: 0; padding: 0; }
.bp-toc a { color: rgb(var(--ink-rgb) / 0.78); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / 0.2); text-underline-offset: 4px; }
.bp-toc a:hover { color: rgb(var(--ink-rgb)); text-decoration-color: rgb(var(--gold-rgb)); }
.la-photo img { border-radius: 14px; width: 100%; }

.bp-cta { margin-top: 2rem; padding: 1.75rem; border: 1px solid var(--hair-strong); border-radius: 18px; background: var(--raised); }
.bp-cta h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.bp-cta p { margin-top: 0.75rem; color: rgb(var(--ink-rgb) / 0.8); }
.bp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.bp-related { margin-top: 2.5rem; }
.bp-related h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.35rem; margin-bottom: 0.75rem; }
.bp-related li { margin-bottom: 0.5rem; }
.bp-related a { color: rgb(var(--sig-link-rgb)); text-decoration: underline; text-underline-offset: 3px; }

.bp-draft { background: #7a1f1c; color: #fff; text-align: center; font-size: 0.8125rem; letter-spacing: 0.06em; padding: 0.5rem 1rem; font-weight: 600; }
.bp-chip, .bl-chip { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #7a1f1c; color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.bp-indexhead { margin-bottom: 2rem; }
.bp-indexhead p { margin-top: 0.75rem; color: rgb(var(--ink-rgb) / 0.8); font-size: 1.0625rem; }
.bp-indexhead a { color: rgb(var(--sig-link-rgb)); text-decoration: underline; text-underline-offset: 3px; }
.bp-list { display: grid; gap: 2rem; max-width: 68ch; margin: 0 auto; }
.bp-item { display: grid; gap: 1rem; }
.bp-item img { border-radius: 14px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bp-item h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.bp-item h2 a { text-decoration: none; }
.bp-item h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bp-item p { margin-top: 0.5rem; color: rgb(var(--ink-rgb) / 0.78); }
.bp-item .bp-meta { font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 768px) { .bp-item { grid-template-columns: 16rem 1fr; align-items: start; } }

.bp-404 { padding: 4rem 0; }
.bp-404 p { margin-top: 1rem; color: rgb(var(--ink-rgb) / 0.8); }
.bp-404 a:not(.bp-pill) { text-decoration: underline; text-underline-offset: 3px; margin-left: 0.75rem; }

.bp-foot { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--hair); }
.bp-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.bp-foot a { color: var(--muted); text-decoration: none; }
.bp-foot a:hover { color: rgb(var(--ink-rgb)); }
a:focus-visible { outline: 2px solid rgb(var(--gold-rgb)); outline-offset: 3px; border-radius: 4px; }