/* Oluna blog post components (2026-09-20). Linked by every generated post after flair.css.
   Source of truth: templates/blog/blog-post.css in the hub; deployed to /assets/blog-post.css. */

/* --- expert quote: a quoted source inside an article, attributed with a small avatar, name and title --- */
.prose .xq{position:relative;overflow:hidden;margin:var(--space-6) 0;padding:var(--space-5) var(--space-6) var(--space-5);background:var(--surface-inset);border:1px solid var(--sage-100);border-left:3px solid var(--sage-500);border-radius:var(--radius-lg)}
.prose .xq::after{content:"\201D";position:absolute;right:24px;bottom:-64px;font-family:var(--font-display);font-size:150px;line-height:1;color:var(--sage-200);opacity:.6;pointer-events:none}
.prose .xq blockquote{all:unset;display:block;position:relative;z-index:1}
.prose .xq blockquote p{font-family:var(--font-display);font-style:italic;font-weight:var(--weight-light);font-size:var(--text-xl);line-height:1.4;color:var(--forest-800);margin:0 0 var(--space-3);max-width:none}
.prose .xq blockquote p:last-child{margin-bottom:0}
.prose .xq figcaption{position:relative;z-index:1;margin-top:var(--space-4);padding-right:96px;min-height:40px}
.prose .xq-who{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.prose .xq-who img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;margin:0}
.prose .xq-name{display:block;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--forest-800);line-height:1.2}
.prose .xq-role{display:block;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted);line-height:1.3}
.prose .xq-who:hover .xq-name{text-decoration:underline}

/* --- interview answer panel: her photo sits beside her name; a pale quotation mark says "quote" without marks on every line --- */
.qa-a .qa-a-side{display:none!important}
.qa-a .qa-a-panel{position:relative;overflow:hidden;padding-bottom:44px!important}
.qa-a .qa-a-panel::after{content:"\201D";position:absolute;right:24px;bottom:-68px;font-family:var(--font-display);font-size:160px;line-height:1;color:var(--sage-200);opacity:.6;pointer-events:none}
.qa-a .qa-a-name{display:flex!important;align-items:center;gap:10px;position:relative;z-index:1}
.qa-a .qa-a-name img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;margin:0;flex-shrink:0}
.qa-a .qa-a-name .qa-who{display:flex;flex-direction:column;line-height:1.25}
.qa-a .qa-a-body{position:relative;z-index:1}

/* --- sidebar people: author and expert source with titles --- */
.toc-people-row .tp-title{display:block;font-size:11px;color:var(--text-muted);line-height:1.3}
.toc-author-chip .tac-text{display:flex;flex-direction:column;line-height:1.2}
.toc-author-chip .tac-title{font-size:10px;font-weight:400;color:var(--text-muted)}

/* --- byline "with" line --- */
.byline-with{display:block;font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
.byline-with a{color:var(--forest-700);font-weight:600;text-decoration:none}

/* --- FAQ accordion at the end of a post (content stays in the HTML; FAQ schema mirrors it) --- */
.prose .post-faq{margin:var(--space-4) 0 var(--space-8)}
.prose .post-faq details.expandable{margin:0 0 var(--space-2)}

/* --- image slot: an image still to be produced. Hidden on the live page unless the URL carries ?photos=1 --- */
.img-slot{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;margin:var(--space-6) 0;padding:var(--space-6);border:2px dashed var(--sage-500);border-radius:var(--radius-lg);background:var(--surface-inset);text-align:center}
.show-slots .img-slot{display:flex}
.img-slot .is-label{font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-700)}
.img-slot .is-file{font-family:var(--font-mono,monospace);font-size:13px;font-weight:700;color:var(--ink-900)}
.img-slot .is-prompt{font-size:13px;line-height:1.5;color:var(--text-body);max-width:60ch}

/* --- cite line and tables inside posts --- */
.prose p.cite{font-size:var(--text-sm);color:var(--text-muted);margin-top:calc(var(--space-2) * -1);border-left:0!important;padding-left:0!important}
.prose .stat-row + p.cite,.prose .stat-highlight + p.cite{margin-top:var(--space-3);text-align:center}


/* --- question headings (FAQ shell): a solid number badge and a heading that holds its own on a phone --- */
.prose .faq-qa-q{font-size:var(--text-3xl)!important;line-height:1.18!important;gap:18px!important;align-items:center!important;color:var(--ink-900)}
.prose .faq-qa-q::before{content:counter(faq)!important;display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;margin-top:0!important;border-radius:16px;background:var(--forest-800);color:#fff!important;font-family:var(--font-display);font-style:normal!important;font-weight:400!important;font-size:30px!important;line-height:1}
@media (max-width:640px){.prose .faq-qa-q{font-size:var(--text-2xl)!important;gap:14px!important;align-items:flex-start!important}.prose .faq-qa-q::before{width:44px;height:44px;min-width:44px;font-size:24px!important;border-radius:14px}}
.prose h2{font-size:var(--text-3xl)}
@media (max-width:640px){.prose h2{font-size:var(--text-2xl)}}

/* --- the short answer: solid, sans, unmistakably ours; quotes stay pale, serif and italic --- */
.prose .faq-qa-direct{background:var(--forest-800)!important;border-left:0!important;border-radius:16px!important;padding:20px 24px!important;color:var(--cream-50)!important;font-family:var(--font-sans)!important;font-weight:500!important;font-size:var(--text-lg)!important;line-height:1.5!important}
.prose .faq-qa-direct::before{color:var(--gold-soft,#E9D9B0)!important}
.prose .faq-qa-direct a{color:var(--cream-50)}

/* --- featured stat with a sentence-length value --- */
.prose .stat-highlight.sh-long .sh-value{font-size:var(--text-3xl)!important;line-height:1.15!important;max-width:22ch;margin:0 auto}

/* --- tables --- */
.prose .tbl{margin:var(--space-6) 0;border:1px solid var(--sage-200);border-radius:var(--radius-lg);overflow-x:auto;background:#fff;box-shadow:0 10px 30px -22px rgba(22,36,27,.35)}
.prose .tbl table{margin:0;border-collapse:collapse;width:100%;font-size:var(--text-sm)}
.prose .tbl th,.prose .tbl td{border:0;border-bottom:1px solid var(--sage-100);padding:14px 16px;vertical-align:top}
.prose .tbl thead th{background:var(--forest-800)!important;color:var(--cream-50)!important;font-family:var(--font-display)!important;font-weight:400!important;font-size:var(--text-xl)!important;letter-spacing:0!important;text-transform:none!important;border-bottom:0!important;padding:16px}
.prose .tbl tbody td:first-child{background:var(--sage-100)!important;font-weight:700;color:var(--forest-800);min-width:9ch}
.prose .tbl tbody tr:last-child td{border-bottom:0}
.prose .tbl tbody tr:nth-child(even) td:not(:first-child){background:var(--cream-50)}

/* --- comparison cards, built on the page (never an image of text) --- */
.prose .cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin:var(--space-6) 0}
.prose .cmp-card{background:var(--forest-800);color:var(--cream-50);border-radius:var(--radius-lg);padding:28px 24px 26px;position:relative;overflow:hidden}
.prose .cmp-card::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;border:26px solid rgba(203,218,201,.07)}
.prose .cmp-t{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--text-4xl);line-height:1;color:#fff}
.prose .cmp-s{display:block;font-size:var(--text-sm);font-weight:600;color:var(--gold-soft,#E9D9B0);margin:8px 0 18px}
.prose .cmp-l{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-300);margin-top:14px}
.prose .cmp-v{display:block;font-size:var(--text-base);line-height:1.4;margin-top:4px}

/* --- dictionary-style definition --- */
.prose .dict{margin:var(--space-5) 0 var(--space-6);padding:26px 28px;background:#fff;border:1px solid var(--sage-200);border-radius:var(--radius-lg);border-top:5px solid var(--forest-800)}
.prose .dict-term{font-family:var(--font-display);font-weight:400;font-size:var(--text-4xl);line-height:1;color:var(--forest-800)}
.prose .dict-term small{font-family:var(--font-sans);font-size:var(--text-base);font-weight:500;color:var(--text-muted);margin-left:10px}
.prose .dict-pos{display:block;font-family:var(--font-display);font-style:italic;color:var(--sage-500);margin:8px 0 12px}
.prose .dict ol{margin:0;padding-left:1.3em}.prose .dict li{margin:0 0 8px;font-size:var(--text-lg);line-height:1.5}
.prose .dict-eg{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--sage-200);font-size:var(--text-sm);color:var(--text-muted)}

/* --- small-multiple line charts --- */
.prose .chart{margin:var(--space-6) 0;padding:24px;background:#fff;border:1px solid var(--sage-200);border-radius:var(--radius-lg)}
.prose .chart-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2;color:var(--ink-900);margin:0 0 16px}
.prose .chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.prose .chart-panel h4{margin:0 0 2px;font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;color:var(--ink-900)}
.prose .chart-panel p{margin:0 0 8px;font-size:var(--text-sm);color:var(--text-muted)}
.prose .chart svg{display:block;width:100%;height:auto;overflow:visible}
.prose .chart-note{margin:14px 0 0;font-size:var(--text-xs);color:var(--text-muted)}
.prose .chart .pt:hover{r:7}

/* --- references (APA) --- */
.prose .post-refs{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--sage-200)}
.prose .post-refs h2{font-size:var(--text-xl)!important;margin-bottom:var(--space-3)}
.prose .post-refs ol{list-style:none;padding:0;margin:0}
.prose .post-refs li{font-size:var(--text-sm);line-height:1.55;color:var(--text-body);padding-left:2.2em;text-indent:-2.2em;margin:0 0 10px;word-break:break-word}
.prose .post-refs li a{color:var(--forest-700)}

/* --- a wide two-person frame keeps its own shape --- */
.prose .post-figure.frame-strip{margin:var(--space-6) 0}
.prose .post-figure.frame-strip img{width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain;border-radius:var(--radius-lg);display:block}

/* --- the admissions funnel, built on the page --- */
.prose .fn{margin:var(--space-6) 0;padding:26px 22px 20px;background:#fff;border:1px solid var(--sage-200);border-radius:var(--radius-lg)}
.prose .fn-rows{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto}
.prose .fn-row{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:82px;padding:10px 16%;color:var(--cream-50);clip-path:polygon(var(--a) 0,calc(100% - var(--a)) 0,calc(100% - var(--b)) 100%,var(--b) 100%)}
.prose .fn-row b{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.1}
.prose .fn-row span{font-size:var(--text-sm);opacity:.92;margin-top:4px}
.prose .fn-row:nth-child(1){--a:0%;--b:8.5%;background:#1E3326}.prose .fn-row:nth-child(2){--a:9.2%;--b:17.5%;background:#2B4534}
.prose .fn-row:nth-child(3){--a:18.2%;--b:26.5%;background:#4A6B53}.prose .fn-row:nth-child(4){--a:27.2%;--b:33%;background:var(--gold-500,#B8924E);color:#fff}
/* --- numbered points in a row --- */
.prose .stps{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:var(--space-6) 0}
.prose .stp{background:#fff;border:1px solid var(--sage-200);border-radius:var(--radius-lg);padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.prose .stp i{font-style:normal;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--forest-800);color:#fff;font-family:var(--font-display);font-size:22px}
.prose .stp b{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);line-height:1.15;color:var(--ink-900)}
.prose .stp span{font-size:var(--text-sm);color:var(--text-muted);line-height:1.4}

/* --- table refinements (2026-09-20): padded first column, column rules, header cells aligned with their columns --- */
.live-page .prose .tbl th,.live-page .prose .tbl td{padding:14px 18px!important;border-right:1px solid var(--sage-200)!important;text-align:left!important;vertical-align:top}
.live-page .prose .tbl th:first-child,.live-page .prose .tbl td:first-child{padding-left:18px!important}
.live-page .prose .tbl th:last-child,.live-page .prose .tbl td:last-child{border-right:0!important}
.live-page .prose .tbl thead th{vertical-align:middle!important;line-height:1.15!important;padding:16px 18px!important;border-right:1px solid rgba(250,248,242,.18)!important}
.live-page .prose .tbl thead th:empty{background:var(--forest-900,#16241B)!important}

/* --- a still of the speaker joined to their quote (2026-09-20): one card, photo on top, words below; no caption --- */
.prose .xq.xq-still{padding:0}
.prose .xq-still .xq-img{display:block;width:100%;height:auto;aspect-ratio:2.1/1;object-fit:cover;object-position:center 22%;margin:0;border-radius:0}
.prose .xq-still .xq-in{position:relative;padding:var(--space-5) var(--space-6)}
.prose .post-figure figcaption{display:none}

/* --- "In this article" on a phone: items need air and a marker --- */
.toc-mobile ul{list-style:none;padding:6px 0 4px!important;margin:0}
.toc-mobile li{position:relative;padding:9px 0 9px 20px!important;margin:0!important;border-bottom:1px solid var(--sage-100);line-height:1.35}
.toc-mobile li:last-child{border-bottom:0}
.toc-mobile li::before{content:"";position:absolute;left:4px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--sage-500)}

/* --- tables on a phone: each row becomes a labelled card (no sideways scrolling) --- */
@media (max-width:640px){
  .live-page .prose .tbl{border:0;background:none;box-shadow:none;overflow:visible}
  .live-page .prose .tbl table,.live-page .prose .tbl tbody,.live-page .prose .tbl tr,.live-page .prose .tbl td{display:block;width:100%;box-sizing:border-box}
  .live-page .prose .tbl thead{display:none}
  .live-page .prose .tbl tr{margin:0 0 14px;border:1px solid var(--sage-200);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
  .live-page .prose .tbl td{border-right:0!important;border-bottom:1px solid var(--sage-100)!important;padding:10px 16px!important;background:#fff!important}
  .live-page .prose .tbl td:first-child{background:var(--forest-800)!important;color:var(--cream-50)!important;font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);padding:12px 16px!important}
  .live-page .prose .tbl td:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-500);margin-bottom:2px}
  .live-page .prose .tbl tr td:last-child{border-bottom:0!important}
}

/* --- funnel rows: side padding grows as the row narrows, so text never meets the slanted edge --- */
.prose .fn-row:nth-child(1){padding-inline:14%}.prose .fn-row:nth-child(2){padding-inline:22%}
.prose .fn-row:nth-child(3){padding-inline:30%}.prose .fn-row:nth-child(4){padding-inline:36%}
.prose .fn-row{min-height:88px}
.prose .fn-row span{font-size:var(--text-xs);line-height:1.3}
@media (max-width:640px){.prose .fn-row b{font-size:var(--text-xl)}.prose .fn-row:nth-child(4){padding-inline:33%}}

/* ===== 2026-09-21 ===== */
/* --- quotation marks never sit behind text: in a quote the text wraps around the mark; in an interview panel it sits in the name row --- */
.prose .xq::after,.qa-a .qa-a-panel::after{content:none!important}
.prose .xq blockquote::before{content:"\201D";float:right;font-family:var(--font-display);font-style:normal;font-size:110px;line-height:.78;height:56px;margin:0 0 4px 22px;color:var(--sage-200);opacity:.8}
.prose .xq figcaption{padding-right:0;min-height:0}
.qa-a .qa-a-panel{padding-bottom:var(--space-5)!important}
.qa-a .qa-a-name::after{content:"\201D";margin-left:auto;padding-left:16px;font-family:var(--font-display);font-size:96px;line-height:.62;height:40px;color:var(--sage-200);opacity:.8}

/* --- the context line under an interview question --- */
.qa-q .qa-q-ctx{display:block;margin-top:8px;font-family:var(--font-sans)!important;font-size:var(--text-base)!important;line-height:1.5!important;font-weight:400;color:var(--text-muted)!important;letter-spacing:0}

/* --- numbered points: full width, stacked --- */
.prose .stps{grid-template-columns:1fr!important;gap:10px}
.prose .stp{flex-direction:row;align-items:center;gap:16px;padding:16px 18px}
.prose .stp i{flex:none;width:44px;height:44px;font-size:24px}
.prose .stp b{flex:none;width:34%;min-width:9ch}
.prose .stp span{flex:1}
@media (max-width:640px){.prose .stp{flex-wrap:wrap;align-items:flex-start}.prose .stp b{width:auto;flex:1}.prose .stp span{flex-basis:100%;padding-left:60px;margin-top:-6px}}

/* --- name plates on a multi-person still --- */
.prose .post-figure{position:relative}
.prose .pf-plate{position:absolute;bottom:10px;margin-left:10px;background:var(--forest-800);color:#fff;font-family:var(--font-sans);font-size:11px;font-weight:600;line-height:1;padding:5px 9px;border-radius:6px;letter-spacing:.01em;white-space:nowrap}
@media (max-width:640px){.prose .pf-plate{font-size:9px;padding:4px 6px;bottom:6px;margin-left:6px}}

/* --- byline: expert sources as their own left-aligned list --- */
.byline-experts{margin-top:14px;padding-top:12px;border-top:1px solid var(--sage-200)}
.byline-experts .bx-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-500);margin-bottom:6px}
.byline-experts ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.byline-experts li{position:relative;padding-left:14px;font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}
.byline-experts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--sage-500)}
.byline-experts a{color:var(--forest-700);font-weight:600;text-decoration:none}
@media (max-width:640px){.byline-experts ul{flex-direction:column;gap:2px}}

/* --- sidebar: expert rows tinted, apart from the author --- */
.toc-people .toc-people-row.is-expert{background:var(--sage-50);border:1px solid var(--sage-100);border-radius:12px;padding:8px 10px;margin-top:8px}

/* --- end of post with several expert sources: the author on top, the experts in an even row --- */
.post-author-full.post-people-multi{display:block}
.post-author-full.post-people-multi > .author-profile{margin-bottom:var(--space-4)}
.post-author-full.post-people-multi .xp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:stretch}
.post-author-full.post-people-multi .xp-row.xp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.post-author-full.post-people-multi .xp-row .author-profile{height:100%;margin:0;box-sizing:border-box}
@media (max-width:800px){.post-author-full.post-people-multi .xp-row,.post-author-full.post-people-multi .xp-row.xp-3{grid-template-columns:1fr}}
.post-author-full.post-people-multi .author-profile{max-width:none!important;width:100%;box-sizing:border-box}
.post-author-full.post-people-multi .xp-row .author-profile{display:flex;flex-direction:column;gap:14px}
.post-author-full.post-people-multi .xp-row .ap-bio{font-size:var(--text-sm)}

/* ===== 2026-09-21 (b) ===== */
/* --- end of post with several expert sources: the block runs the full page width (into the sidebar column): author full, experts half each --- */
.post-author-full.post-people-multi{max-width:none!important;width:100%}
/* --- byline: one divider between the author and the expert sources, not two --- */
.byline-experts{border-top:0;margin-top:0;padding-top:10px}
.post-byline:has(+ .byline-experts){border-bottom:0!important;padding-bottom:6px!important}
.byline-experts{border-top:1px solid var(--sage-200);padding-bottom:4px;border-bottom:0}
/* --- sidebar: expert rows share one tinted block, edge to edge in the card --- */
.toc-people{overflow:hidden;padding-bottom:0!important}
.toc-people .toc-experts{margin:0 -18px;padding:4px 18px 8px;background:var(--sage-50);border-top:1px solid var(--sage-100)}
.toc-people .toc-experts .toc-people-row.is-expert{background:none;border:0;border-radius:0;margin:0;padding:10px 0}
.toc-people .toc-experts .toc-people-row + .toc-people-row{border-top:1px solid var(--sage-100)}
.toc-people:not(:has(.toc-experts)){padding-bottom:16px!important}
/* --- numbered question headings: the badge lines up with the first line of the title --- */
.prose .faq-qa-q{align-items:flex-start!important}
.prose .faq-qa-q::before{margin-top:2px!important}
/* --- interview panel: the quotation mark has room above it --- */
.qa-a .qa-a-name{align-items:flex-start!important}
.qa-a .qa-a-name::after{line-height:1!important;height:52px;overflow:hidden;margin-top:-2px;align-self:flex-start}
.qa-a .qa-a-panel{padding-top:var(--space-5)!important}

/* ===== 2026-09-21 (c): the post's video and audio ===== */
.interview-media{margin:var(--space-6) 0}
.im-audio-live button.im-audio-play{border:0;cursor:pointer;padding:0;font:inherit;display:inline-flex;align-items:center;justify-content:center}
.im-audio-live .ic-pause{display:none}.im-audio-live[data-playing] .ic-pause{display:block}.im-audio-live[data-playing] .ic-play{display:none}
.im-audio-live .im-audio-bar{cursor:pointer}
.im-audio-live .im-audio-progress{transition:width .25s linear}
.im-video-live{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--forest-900,#16241B)}
.im-video-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}