/* Tofu Ads blog: post cards and the article extras (key takeaways, tables, callouts, sources).
   Layers on /assets/site.css, which holds the shell, the hero band, the reading card and the prose styles. */

/* ---------- listing: cream cards on the pale page ---------- */
.listing{padding:clamp(4px,1vw,16px) var(--gutter) 0}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.post-grid>li{display:flex;min-width:0}
.post-card{display:flex;flex-direction:column;width:100%;padding:24px 24px 20px;border-radius:24px;background:var(--cream);box-shadow:var(--shadow-tile);
  color:var(--ink);text-decoration:none;transition:transform .2s ease,background-color .2s ease}
.post-card:hover{transform:translateY(-2px);background:#FFFFFF}
.post-card:focus-visible{outline:3px solid var(--midnight);outline-offset:3px;border-radius:24px}
.post-card .eyebrow{margin-bottom:16px}
.pc-title{margin:0;font-weight:700;font-size:clamp(21px,1.75vw,25px);line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
.pc-ex{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px;font-size:14px;font-weight:500;color:var(--muted)}
.pc-foot .go{margin-left:auto}
.post-card:hover .go{transform:translateX(3px)}
.related .pc-title{font-size:clamp(19px,1.5vw,21px);line-height:1.18}
.related .pc-foot{padding-top:16px}
.empty{margin:0;padding:30px 0;font-size:18px;color:var(--ink-2)}

/* ---------- article extras ---------- */
.post-hero{margin:0 0 30px}
.post-hero img{display:block;width:100%;height:auto;border-radius:18px}
.keytakeaways{margin:0 0 36px;padding:22px 26px 6px;border-radius:20px;background:var(--page)}
.keytakeaways .kt-h{margin:0 0 14px;color:var(--ink)}
.keytakeaways ul{margin:0 0 16px}
.keytakeaways li{font-size:17px;line-height:1.55;color:var(--ink)}
.keytakeaways li:last-child{margin-bottom:0}

/* tables: an ink header row, hairline rows, scrolling sideways on phones instead of the page */
.table-wrap{margin:28px 0 30px;overflow-x:auto;border-radius:18px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair),0 14px 30px -24px rgba(24,56,40,.45);-webkit-overflow-scrolling:touch}
.post table{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.post th,.post td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.post thead th{border-top:0;background:var(--midnight);color:var(--cream);font-family:var(--display);font-weight:650;font-size:15px;letter-spacing:-.005em}
.post tbody th{font-weight:620;color:var(--ink)}
.post td{color:var(--ink-2)}
.post tbody td:first-child{font-weight:600;color:var(--ink)}
.post caption{caption-side:bottom;padding:11px 16px 12px;border-top:1px solid var(--hair);font-size:14px;line-height:1.4;color:var(--muted);text-align:left}

/* callouts: cream on midnight, the lead-in in Spring */
.post .callout,.post .note,.post .stat{margin:30px 0;padding:24px 26px;border-radius:20px;background:var(--midnight);color:rgba(255,252,245,.86)}
.post .callout p,.post .note p,.post .stat p{color:inherit}
.post .callout p:last-child,.post .note p:last-child,.post .stat p:last-child{margin-bottom:0}
.post .callout strong,.post .note strong,.post .stat strong,.post .callout b,.post .note b{color:var(--spring)}
.post .callout a,.post .note a,.post .stat a{color:var(--spring);text-decoration-color:rgba(197,240,88,.5)}
.post .callout a:focus-visible,.post .note a:focus-visible{outline-color:var(--spring)}

/* sources */
.sources{font-size:15px;line-height:1.5}
.sources li{margin-bottom:8px}
.sources a{font-weight:520}

@media (max-width:1080px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .post-card{padding:20px 20px 18px;border-radius:22px}
  .pc-title{font-size:21px}
  .keytakeaways{padding:18px 18px 4px;border-radius:18px}
  .keytakeaways li{font-size:16.5px}
  .post .callout,.post .note,.post .stat{padding:20px 20px;border-radius:18px}
  .table-wrap{margin:24px 0;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .post-card{transition:none}
}

/* ---------- each post's own 3D scene: a split banner. The heading sits on the plain page colour; the scene fills the right
   side of the banner, top to bottom and out to the edge, with a crisp rounded corner (the scenes keep their props right
   of centre). Phones and portrait tablets get it as a full-width band above the heading. ---------- */
.pbanner{position:relative;overflow:hidden;min-height:clamp(440px,38vw,620px);display:flex;align-items:center;padding:calc(var(--navh) + 32px) var(--gutter) clamp(36px,4vw,56px)}
.pbanner-bg{position:absolute;top:0;right:0;bottom:0;width:54%;height:100%;display:block;object-fit:cover;object-position:80% 60%;border-radius:0 0 0 44px;background:#DCE6DC}
.pbanner + .doc{margin-top:clamp(24px,2.6vw,40px)}
.pbanner .pghead-in{width:100%;max-width:1240px;margin:0 auto}
.pbanner .eyebrow,.pbanner h1,.pbanner .meta{max-width:min(540px,40vw)}
.post-card .pc-img{display:block;margin:-24px -24px 20px;aspect-ratio:1600/840;overflow:hidden;border-radius:24px 24px 0 0;background:#DCE6DC}
.post-card .pc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .pc-img img{transform:scale(1.03)}
@media (max-width:900px),(max-aspect-ratio:17/20){
  .pbanner{display:block;min-height:0;padding:0 0 4px}
  .pbanner + .doc{margin-top:18px}
  .pbanner-bg{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:min(44svh,440px);min-height:240px;object-position:72% 55%;border-radius:0 0 32px 32px}
  .pbanner .pghead-in{position:relative;padding:26px var(--gutter) 0}
  .pbanner .eyebrow,.pbanner h1,.pbanner .meta{max-width:none}
}
@media (max-width:760px){
  .post-card .pc-img{margin:-20px -20px 16px;border-radius:22px 22px 0 0}
}
@media (prefers-reduced-motion:reduce){ .post-card .pc-img img{transition:none} }