/* heyfi.io/blog, the merged design (Joe, 30 Oct): A's layout with B's dark ink bands and bolder type.
   The masthead, the quote band, the hub header and the post hero sit in the hatched ink band.
   The featured post, the four F's engravings and the latest episode keep the homepage's double-rule frame.
   Drawings stay ink on paper (visual-direction.md). v2 retires the A/B switch. */

.bx-wrap { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 var(--pad); }
.bx-section-label { margin: 0 0 1.5rem; font-size: 15px; }
.bx .rule-link { font-weight: 500; }

/* ---------- Index: masthead in the ink band ---------- */
.bx-mast { background-color: var(--ink); background-image: url(/hatch.svg); color: var(--paper); padding: 48px 0 64px; }
.bx-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 8vw + 1rem, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.bx-wealth { font-family: var(--serif); font-size: clamp(1.5rem, 1.5vw + 1rem, 2.15rem); line-height: 1.28; margin: 0 0 1.25rem; max-width: 34rem; }
.bx-lede { font-size: 1.05rem; line-height: 1.6; color: var(--muted-dark); margin: 0 0 1.75rem; max-width: 32rem; }
.bx-mast .blog-search { max-width: 32rem; margin: 0; }
.bx-mast .pagefind-ui { --pagefind-ui-text: #F2F4F8; --pagefind-ui-background: #0B0F1A; --pagefind-ui-border: #3A4560; }
.bx-mast-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .bx-mast { padding: 56px 0 88px; }
  .bx-mast-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
}

/* The featured post, in the double-rule frame on the ink band. */
.bx-feature { display: block; text-decoration: none; color: inherit; position: relative; border: 1px solid var(--slate); padding: 8px; background: rgba(11, 15, 26, 0.35); }
.bx-feature::before { content: ""; position: absolute; inset: 8px; border: 3px double var(--slate); pointer-events: none; }
.bx-feature-img { display: block; line-height: 0; padding: 14px 14px 0; }
.bx-feature-img img { display: block; width: 100%; height: auto; border-bottom: 3px solid var(--signal); }
.bx-feature.is-quote .bx-feature-img img { aspect-ratio: 1080 / 1150; object-fit: cover; }
.bx-feature-text { display: block; padding: 1.1rem 1.4rem 1.4rem; }
.bx-feature-kicker { display: block; margin: 0 0 0.5rem; color: var(--slate); }
.bx-feature-title { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.3vw + 1.1rem, 2.2rem); line-height: 1.15; margin: 0 0 0.6rem; }
.bx-feature-desc { display: block; font-size: 0.98rem; line-height: 1.55; color: var(--muted-dark); margin: 0 0 1rem; }
.bx-feature-go { display: inline-block; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bx-feature:hover .bx-feature-go, .bx-feature:focus-visible .bx-feature-go { color: var(--signal); }
.bx-feature:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }

/* ---------- Cards: the newest nine in mixed sizes, then the same rhythm on every list ---------- */
.bx-latest { padding: 56px 0 24px; }
.bx .post-cards, .blog-page .page-inner .post-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.bx .post-cards li { margin: 0; }
.bx .post-cards .post-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.5rem; }
.bx .post-cards .post-title a { text-decoration: none; }
.bx .post-cards .post-title a:hover, .bx .post-cards .post-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bx .card-desc { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.55; }
.bx .post-cards a.post-card-img { position: relative; border-bottom: 3px solid var(--signal); }
.bx .card-quote img { aspect-ratio: 1080 / 1150; object-fit: cover; }
@media (min-width: 900px) {
  .bx .post-cards, .blog-page .page-inner .post-cards { grid-template-columns: repeat(12, 1fr); gap: 3rem 2.5rem; }
  .bx .post-cards > li { grid-column: span 6; }
  .bx .post-cards > li:nth-child(9n+1), .bx .post-cards > li:nth-child(9n+4), .bx .post-cards > li:nth-child(9n+8) { grid-column: span 7; }
  .bx .post-cards > li:nth-child(9n+2), .bx .post-cards > li:nth-child(9n+3), .bx .post-cards > li:nth-child(9n+9) { grid-column: span 5; }
  .bx .post-cards > li:nth-child(9n+5), .bx .post-cards > li:nth-child(9n+6), .bx .post-cards > li:nth-child(9n+7) { grid-column: span 4; }
  .bx .post-cards > li:nth-child(9n+1) .post-title, .bx .post-cards > li:nth-child(9n+8) .post-title { font-size: 1.9rem; }
  .bx .post-cards > li:nth-child(9n+5) .post-title, .bx .post-cards > li:nth-child(9n+6) .post-title, .bx .post-cards > li:nth-child(9n+7) .post-title { font-size: 1.3rem; }
  /* A quote card in a wide slot sits beside its text instead of towering over the row. */
  .bx .post-cards > li.card-quote:nth-child(9n+1), .bx .post-cards > li.card-quote:nth-child(9n+4), .bx .post-cards > li.card-quote:nth-child(9n+8) { display: grid; grid-template-columns: 5fr 7fr; gap: 1.75rem; align-items: center; }
  .bx .post-cards > li.card-quote:nth-child(9n+1) a.post-card-img, .bx .post-cards > li.card-quote:nth-child(9n+4) a.post-card-img, .bx .post-cards > li.card-quote:nth-child(9n+8) a.post-card-img { margin-bottom: 0; }
  /* Three across, even, for the per-F rows. */
  .bx .post-cards.post-cards-even > li { grid-column: span 4 !important; }
  .bx .post-cards.post-cards-even .post-title { font-size: 1.3rem !important; }
}

/* ---------- Index: the four F's, framed engravings with a count ---------- */
.bx-fs { padding: 56px 0 64px; border-top: 1px solid var(--slate); }
.bx-f-list, .page-inner .bx-f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.bx-f { margin: 0; }
.bx-f a { display: block; height: 100%; text-decoration: none; color: inherit; }
.bx-f-art { display: block; line-height: 0; background: #fff; border: 1px solid var(--ink); padding: 6px; position: relative; }
.bx-f-art::before { content: ""; position: absolute; inset: 6px; border: 3px double var(--ink); pointer-events: none; }
.bx-f-art img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 470; object-fit: contain; }
.bx-f-name { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem); line-height: 1.1; margin: 1rem 0 0.35rem; }
.bx-f-line { display: block; font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
.bx-f-count { display: block; margin-top: 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--signal); }
.bx-f a:hover .bx-f-name, .bx-f a:focus-visible .bx-f-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 960px) { .bx-f-list, .page-inner .bx-f-list { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* ---------- Index: the quote band ---------- */
.bx-break-quote { padding: 80px 0 88px; }
.bx-bigquote { margin: 0 auto; max-width: 58rem; text-align: center; }
.bx-bigquote p { font-family: var(--serif); font-size: clamp(2rem, 3.6vw + 1rem, 3.9rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1.5rem; }
.bx-bigquote p::before { content: "\201C"; display: block; font-size: 1.6em; line-height: 0.6; color: var(--signal); margin-bottom: 0.1em; }
.bx-bigquote footer { color: var(--muted-dark); }
.bx-bigquote footer .seal-label { color: var(--paper); margin-right: 0.75rem; }
.bx-bigquote footer a { color: var(--paper); }

/* ---------- Index: a row per F ---------- */
.bx-row { padding: 56px 0 8px; }
.bx-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; border-top: 3px double var(--ink); padding-top: 1rem; }
.bx-row-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1; margin: 0; }
.bx-row-title .sig { color: var(--signal); }

/* ---------- Index: the latest episode ---------- */
.bx-episode { padding: 64px 0 24px; }
.bx-ep { display: grid; gap: 1.5rem; text-decoration: none; color: inherit; border: 1px solid var(--ink); padding: 8px; position: relative; }
.bx-ep::before { content: ""; position: absolute; inset: 8px; border: 3px double var(--ink); pointer-events: none; }
.bx-ep-img { display: block; line-height: 0; padding: 14px 14px 0; }
.bx-ep-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--signal); }
.bx-ep-text { display: block; padding: 0 1.4rem 1.4rem; }
.bx-ep-title { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.3rem); line-height: 1.15; margin: 0.4rem 0 0.6rem; }
.bx-ep-desc { display: block; color: var(--muted); line-height: 1.55; margin: 0 0 1rem; }
@media (min-width: 900px) {
  .bx-ep { grid-template-columns: 7fr 5fr; align-items: center; gap: 2rem; }
  .bx-ep-img { padding: 14px 0 14px 14px; }
  .bx-ep-text { padding: 1rem 1.4rem 1rem 0; }
}

/* ---------- Index: the fire terrace break ---------- */
.bx-break-art { padding: 48px var(--pad) 72px; text-align: center; }
.bx-art-band { max-width: 60rem; margin: 0 auto; line-height: 0; }
.bx-art-band img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 370; object-fit: cover; object-position: center bottom; }
.bx-art-line { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw + 1rem, 3rem); line-height: 1.2; margin: 2rem 0 0; }

/* ---------- Index: more posts, the pills, the pager ---------- */
.bx-more { padding: 8px 0 72px; }
.bx-more-link { margin: 0 0 2rem; display: flex; align-items: baseline; gap: 1rem; }
.bx-more .blog-nav { margin-top: 1rem; }
.bx-pager { display: flex; align-items: baseline; gap: 1.25rem; margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--slate); }

/* ---------- Hub pages: the ink header ---------- */
.bx-hub.blog-page { padding-top: 0; }
.bx-hub-band { background-color: var(--ink); background-image: url(/hatch.svg); color: var(--paper); margin: 0 0 2.5rem; padding: clamp(36px, 3vw, 44px) 0 48px; }
.bx-hub-band .crumb, .bx-hub-band .crumb a { color: var(--muted-dark); }
.bx-hub-band .lede { color: var(--muted-dark); }
.bx-hub-intro { max-width: 40rem; margin: 1.25rem 0 1rem; font-size: 1.05rem; line-height: 1.6; }
.bx-hub-head { display: grid; gap: 1.5rem; margin: 0; }
.bx-hub-title { margin: 0 0 1rem; }
.bx-hub-f { display: block; font-size: clamp(3.4rem, 7vw + 1rem, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.bx-hub-f .sig { color: var(--signal); }
.bx-hub-line { display: block; font-size: clamp(1.25rem, 1vw + 1rem, 1.7rem); line-height: 1.3; margin-top: 0.85rem; color: var(--paper); }
.bx-hub-count { color: var(--slate); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.bx-hub-art { line-height: 0; background: #fff; border: 1px solid var(--slate); padding: 6px; position: relative; }
.bx-hub-art::before { content: ""; position: absolute; inset: 6px; border: 3px double var(--ink); pointer-events: none; }
.bx-hub-art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .bx-hub-head { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; } }

/* ---------- Post pages: the ink hero, the video across its edge, pull quotes as ink bands ---------- */
.post .page-title { font-size: clamp(2.4rem, 3.6vw + 1.2rem, 4rem); line-height: 1.06; letter-spacing: -0.015em; }
.post.blog-page { padding-top: 0; overflow-x: clip; }
.bx-post-hero { background-color: var(--ink); background-image: url(/hatch.svg); color: var(--paper); margin: 0 calc(50% - 50vw); padding: clamp(36px, 3vw, 44px) var(--pad) 0; }
.bx-post-hero .crumb, .bx-post-hero .crumb a, .bx-post-hero .post-meta { color: var(--muted-dark); }
.bx-post-hero .post-kicker { color: #7FA9E6; }
.bx-post-head { padding-bottom: 2rem; }
.post-video { margin: 0 auto -1px; max-width: 62rem; }
.post-video .caption { color: var(--muted-dark); padding-bottom: 1.5rem; margin-bottom: 0; }
.post-body blockquote { position: relative; background: var(--ink) url(/hatch.svg); color: var(--paper); border: 0; margin: 3rem calc(50% - 50vw); padding: 3.5rem max(var(--pad), calc(50vw - 19rem)) 3rem; font-size: clamp(1.7rem, 2vw + 1rem, 2.6rem); line-height: 1.18; text-align: left; }
.post-body blockquote::before { content: "\201C"; display: block; font-family: var(--serif); font-size: 4.5rem; line-height: 0.5; color: var(--signal); margin-bottom: 0.15em; }
.post-body blockquote .cite { color: var(--slate); }

/* ---------- Preview only: the sample view and its switch ---------- */
html[data-sample="1"] [data-real-only] { display: none; }
html[data-sample="1"] [data-sample-only][hidden] { display: block; }
.sample-stamp { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px; background: var(--signal); color: var(--paper); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.design-switch { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--ink); color: var(--paper); font-size: 13px; border-radius: 999px; box-shadow: 0 2px 10px rgba(11, 15, 26, 0.25); }
.design-switch span { padding: 0 8px 0 10px; color: var(--muted-dark); }
.design-switch a { color: var(--paper); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.design-switch a[aria-current] { background: var(--signal); }