/* Blog post pages, 2026 redesign. Loaded after assets/v3.css by every post in blog/.
   Same tokens as the blog index: Newsreader titles, Bricolage labels, Source Serif 4 body. */

.post-top { padding-top: 56px; display: flex; flex-direction: column; gap: 22px; }
.post-top > * { max-width: 920px; }
.post-crumb { font-family: var(--f-label); font-size: 15px; font-weight: 500; color: var(--muted); display: flex; gap: 10px; }
.post-crumb a { color: var(--burg); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.post-crumb a:hover { border-bottom-color: var(--gold); }
.post-crumb a:active { opacity: .7; }
.post-hero { margin: 6px 0 10px; width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-photo); }
.post-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-tag { align-self: flex-start; font-family: var(--f-label); font-size: 14px; font-weight: 600; color: var(--burg-deep); background: var(--gold-lt); padding: 6px 14px; border-radius: 999px; }
.post-top .h1 { color: var(--burg-deep); font-size: 58px; }
.post-meta { font-family: var(--f-label); font-size: 16px; font-weight: 500; color: var(--muted); }

.post-wrap { padding-top: 56px; padding-bottom: 104px; display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 80px; align-items: start; }
.post-toc { position: sticky; top: calc(var(--hdr-h) + 32px); font-family: var(--f-label); }
.post-toc b { display: block; font-size: 15px; font-weight: 600; color: var(--burg-deep); padding-bottom: 14px; border-bottom: 2px solid var(--gold); }
.post-toc ol { list-style: none; margin: 0 0 28px; padding: 0; }
.post-toc li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 500; color: var(--body); transition: color .2s ease; }
.post-toc li a:hover { color: var(--burg); }
.post-toc li a:active { opacity: .7; }
.post-toc .btn-gold { width: 100%; }

.post-body { font-size: 20px; line-height: 1.7; color: var(--body); }
.post-body > p:first-child { font-size: 23px; line-height: 1.55; color: var(--ink); }
.post-body p { margin: 0 0 22px; text-wrap: pretty; }
.post-body h2 { margin: 60px 0 20px; padding-top: 26px; border-top: 1px solid var(--rule); font-family: var(--f-title); font-weight: 500; font-size: 38px; line-height: 1.12; letter-spacing: -0.02em; color: var(--burg-deep); text-wrap: balance; }
.post-body h3 { margin: 36px 0 14px; font-family: var(--f-title); font-weight: 500; font-size: 28px; line-height: 1.18; letter-spacing: -0.01em; color: var(--burg-deep); }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body a { border-bottom: 1px solid var(--gold); transition: border-color .2s ease; }
.post-body a:hover { border-bottom-color: var(--burg); }
.post-body a:active { opacity: .75; }

.post-body ul, .post-body ol { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.post-body ul li { position: relative; padding-left: 28px; text-wrap: pretty; }
.post-body ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.post-body ol { counter-reset: step; }
.post-body ol li { position: relative; padding-left: 46px; counter-increment: step; text-wrap: pretty; }
.post-body ol li::before { content: counter(step); position: absolute; left: 0; top: .12em; width: 30px; height: 30px; border-radius: 50%; background: var(--burg); color: var(--egg); font-family: var(--f-label); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* The two up-front cards: why it matters, how tomorrow gets better */
.why-cards { display: flex; flex-direction: column; gap: 20px; margin: 32px 0 34px; }
.why-card { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 6px; padding: 28px 32px; box-shadow: var(--shadow-card); }
.why-card h3 { margin: 0 0 10px; font-family: var(--f-title); font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--burg-deep); }
.why-card p { margin: 0; color: var(--ink); }

.data-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 30px 0 26px; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); font-size: 18px; line-height: 1.5; }
.data-table thead th { background: var(--burg); color: var(--gold-lt); font-family: var(--f-label); font-size: 15px; font-weight: 600; text-align: left; padding: 14px 22px; }
.data-table td { padding: 16px 22px; border-top: 1px solid var(--rule); color: var(--body); vertical-align: top; text-wrap: pretty; }
.data-table td:first-child { font-family: var(--f-label); font-weight: 600; color: var(--burg-deep); }
.data-table col.c-narrow { width: 30%; }
.data-table col.c-wide { width: 70%; }
.data-table col.c-half { width: 50%; }
.data-table col.c-third { width: 33.33%; }

.callout { background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 6px; padding: 24px 28px; margin: 30px 0; box-shadow: var(--shadow-card); }
.callout b { display: block; margin-bottom: 8px; font-family: var(--f-label); font-size: 15px; font-weight: 600; color: var(--gold-dk); }
.callout p { margin: 0; color: var(--ink); }

/* Keep reading */
.post-more { padding-bottom: 112px; }
.post-more__head { padding-bottom: 14px; margin-bottom: 32px; border-bottom: 2px solid var(--gold); }
.post-more__head .eyebrow { font-size: 15px; }
.post-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pcard { display: flex; flex-direction: column; background: var(--white); color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .3s var(--ease-spring), box-shadow .3s ease; }
.pcard:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 26px 48px -28px rgba(78,19,32,.45); }
.pcard:active { transform: translateY(-1px); }
.pcard:focus-visible { outline-offset: 4px; border-radius: 6px; }
.pcard__cover { position: relative; aspect-ratio: 16/9; background: var(--burg); overflow: hidden; }
.pcard__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-spring); }
.pcard:hover .pcard__cover img { transform: scale(1.03); }
.pcard__cover--ph { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 20% 10%, #8A2A3E 0%, var(--burg) 55%, var(--burg-deep) 100%); }
.pcard__mono { font-family: var(--f-brand); font-size: 64px; color: var(--gold-lt); opacity: .9; }
.pcard__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard__title { margin: 0; font-family: var(--f-title); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: var(--burg-deep); text-wrap: balance; }
.pcard__excerpt { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.pcard__more { margin-top: auto; padding-top: 6px; font-family: var(--f-label); font-size: 15px; font-weight: 600; color: var(--burg); }
.pcard__more span { border-bottom: 1px solid var(--gold); padding-bottom: 1px; }

/* Newsletter band form (same as the blog index) */
.nl-form { display: flex; flex-direction: column; gap: 10px; }
.nl-form__row { display: flex; gap: 10px; }
.nl-form .field { font-size: 15px; padding: 13px 18px; background: var(--white); }
.nl-form .consent { font-size: 14px; color: var(--pink); }
.nl-form .consent input { accent-color: var(--gold); }
.nl-form .btn-gold { padding: 14px 24px; font-size: 16px; }
.nl-band .nl-form { max-width: 520px; }
.nl-band .nl-form .btn-gold { align-self: flex-start; }

.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 80; max-width: 460px; display: none; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 10px; box-shadow: 0 24px 50px -24px rgba(78,19,32,.45); }
.cookie.is-on { display: flex; }
.cookie p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.cookie div { display: flex; gap: 10px; }
.cookie button { font-family: var(--f-label); font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, transform .2s var(--ease-spring); }
.cookie button:active { transform: scale(.97); }
.cookie .yes { background: var(--burg); color: var(--egg); border: none; }
.cookie .yes:hover { background: var(--burg-deep); }
.cookie .no { background: none; color: var(--body); border: 1px solid var(--field); }
.cookie .no:hover { border-color: var(--gold); }

@media (max-width: 1100px) {
  .post-wrap { grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; }
  .post-top .h1 { font-size: 48px; }
  .post-more__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .post-wrap { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 80px; }
  .post-toc { display: none; }
  .post-more { padding-bottom: 80px; }
}
@media (max-width: 640px) {
  .post-top { padding-top: 32px; gap: 16px; }
  .post-top .h1 { font-size: 36px; line-height: 1.08; }
  .post-body { font-size: 19px; }
  .post-body > p:first-child { font-size: 21px; }
  .post-body h2 { font-size: 30px; margin-top: 46px; }
  .why-card { padding: 22px; }
  .why-card h3 { font-size: 24px; }
  .data-table { font-size: 17px; }
  .data-table thead th, .data-table td { padding: 12px 14px; }
  .post-more__grid { grid-template-columns: 1fr; }
  .nl-form__row { flex-direction: column; }
  .cookie { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}