/* Yeevu Blog — article surfaces. The header/footer chrome styles come from
   www.yeevu.com/assets/site-header.css and the footer directory's own <style>. */
:root{--yvb-bg:#06080a;--yvb-surface:#0b0e11;--yvb-border:rgba(255,255,255,.12);--yvb-text:#d1d5db;--yvb-heading:#fff;--yvb-muted:#8b93a7;--yvb-blue:#60a5fa;--yvb-gold:#e5b020;--yvb-max:1180px}
html{background:var(--yvb-bg)}
body{margin:0;background:var(--yvb-bg);color:var(--yvb-text);font-family:"Poppins",system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Montserrat","Poppins",sans-serif;color:var(--yvb-heading);line-height:1.2;margin:0 0 .5em}
a{color:var(--yvb-blue)}
img{max-width:100%;height:auto}
.yvb-container{max-width:var(--yvb-max);margin:0 auto;padding:0 24px}
.yvb-main{padding-bottom:48px}
.yvb-hero{padding:56px 0 28px;border-bottom:1px solid var(--yvb-border);background:linear-gradient(180deg,var(--yvb-surface),var(--yvb-bg))}
.yvb-hero h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.yvb-eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--yvb-gold);margin:0 0 8px}
.yvb-lede{max-width:64ch;color:var(--yvb-muted);margin:0}
/* align-items:start so a card sizes to its own content — a short or bodyless
   post must not stretch to the height of the tallest card in its row. */
.yvb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding-top:40px;align-items:start}
.yvb-card{background:var(--yvb-surface);border:1px solid var(--yvb-border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.yvb-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.yvb-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.yvb-card h2{font-size:1.2rem;margin:0}
.yvb-card h2 a{color:var(--yvb-heading);text-decoration:none}
.yvb-card h2 a:hover,.yvb-card h2 a:focus{color:var(--yvb-blue)}
.yvb-card p{margin:0;color:var(--yvb-muted);font-size:.95rem}
.yvb-meta{font-size:13px;color:var(--yvb-muted);margin:0}
.yvb-meta a{color:var(--yvb-gold);text-decoration:none}
.yvb-meta time+a{margin-left:.6em}
.yvb-more{margin-top:auto;font-weight:600;text-decoration:none}
.yvb-article__head{padding-top:56px;padding-bottom:16px;max-width:860px}
.yvb-article__head h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:12px 0 20px}
.yvb-article__media{margin:0 0 8px}
.yvb-article__media img{border-radius:14px}
.yvb-prose{max-width:860px;font-size:1.05rem}
.yvb-prose h2{font-size:1.6rem;margin-top:2em}
.yvb-prose h3{font-size:1.25rem;margin-top:1.6em}
/* h4 sized above body text; without this it inherits 1em and reads smaller than the prose. */
.yvb-prose h4{font-size:1.05rem;margin-top:1.5em}
.yvb-prose p,.yvb-prose ul,.yvb-prose ol{margin:0 0 1.2em}
.yvb-prose img{border-radius:10px}
.yvb-prose figure{margin:1.4em 0}
.yvb-prose blockquote{margin:1.4em 0;padding:0 0 0 1.2em;border-left:3px solid var(--yvb-gold);color:var(--yvb-muted)}
.yvb-prose code{background:var(--yvb-surface);border:1px solid var(--yvb-border);padding:.1em .35em;border-radius:6px;font-size:.9em}
.yvb-prose pre{background:var(--yvb-surface);border:1px solid var(--yvb-border);padding:16px;border-radius:10px;overflow:auto}
.yvb-prose pre code{background:none;border:0;padding:0}
/* Wide tables scroll inside their own container; the page body never does. */
.yvb-prose .table-wrap{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.yvb-prose table{border-collapse:collapse;width:100%;margin:0 0 1.4em}
.yvb-prose .table-wrap table{margin:0;min-width:520px}
.yvb-prose th,.yvb-prose td{border:1px solid var(--yvb-border);padding:8px 10px;text-align:left}
.yvb-article__foot{max-width:860px;padding-top:32px}
.yvb-cta{background:var(--yvb-surface);border:1px solid var(--yvb-border);border-radius:14px;padding:28px;margin:0 0 28px}
.yvb-cta h2{font-size:1.3rem}
.yvb-cta p{color:var(--yvb-muted);margin:0 0 16px}
.yvb-button{display:inline-block;background:var(--yvb-gold);color:#06080a;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:999px}
.yvb-button:hover,.yvb-button:focus{filter:brightness(1.08)}
.yvb-adjacent{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.95rem}
.yvb-adjacent a{text-decoration:none}
.yvb-pagination{padding-top:32px}
.yvb-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.yvb-pagination a,.yvb-pagination span{padding:8px 12px;border:1px solid var(--yvb-border);border-radius:8px;text-decoration:none}
.yvb-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.yvb-hero{padding-top:36px}.yvb-grid{padding-top:28px}}

/* ---- reading progress ------------------------------------------------- */
.yvb-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none;background:transparent}
.yvb-progress span{display:block;height:100%;background:var(--yvb-gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---- article layout: contents beside the prose ------------------------ */
.yvb-layout{display:block}
.yvb-layout--toc{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.yvb-main-col{min-width:0;max-width:860px}
.yvb-article__head{padding-top:56px;padding-bottom:16px;max-width:860px}
.yvb-terms{margin:0 0 18px;font-size:13px}
.yvb-terms a{color:var(--yvb-gold);text-decoration:none;margin-right:.7em}
@media (min-width:1080px){
  /* The sidebar sits left of the prose so the eye meets the outline first. */
  .yvb-layout--toc{grid-template-columns:250px minmax(0,1fr);gap:48px}
  /* Indent the title block by one sidebar column so it starts on the same
     vertical as the prose it introduces, instead of floating left of it. */
  .yvb-article__head--toc{padding-left:calc(24px + 250px + 48px);max-width:calc(860px + 250px + 48px)}
  .yvb-toc-drawer{display:none}
}

/* ---- table of contents ------------------------------------------------ */
.yvb-aside{position:relative}
.yvb-toc--sidebar{position:sticky;top:96px;max-height:calc(100vh - 140px);overflow:auto;border-left:2px solid var(--yvb-border);padding:2px 0}
.yvb-toc__title{margin:0 0 12px;padding-left:16px;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--yvb-muted)}
.yvb-toc--inline .yvb-toc__title{display:none}
.yvb-toc__list{list-style:none;margin:0;padding:0;counter-reset:none}
.yvb-toc__item{margin:0}
.yvb-toc__list a{display:block;border-left:2px solid transparent;margin-left:-2px;padding:7px 0 7px 16px;font-size:.82rem;line-height:1.4;color:var(--yvb-muted);text-decoration:none;transition:color .15s,border-color .15s}
.yvb-toc__item--h3 a{padding-left:30px;font-size:.79rem}
.yvb-toc__list a:hover,.yvb-toc__list a:focus-visible{color:var(--yvb-heading)}
.yvb-toc__list a.is-current{color:var(--yvb-gold);border-left-color:var(--yvb-gold)}
/* Below the sidebar breakpoint the aside collapses and the drawer takes over,
   so only one copy of the list is ever visible. Both stay in the DOM and the
   scroll-spy updates whichever is on screen. */
@media (max-width:1079px){.yvb-aside{display:none}}

/* Mobile: a drawer above the article rather than a column beside it. */
.yvb-toc-drawer{margin:0 0 28px;border:1px solid var(--yvb-border);border-radius:12px;background:var(--yvb-surface)}
.yvb-toc-drawer summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--yvb-heading);list-style:none}
.yvb-toc-drawer summary::-webkit-details-marker{display:none}
.yvb-toc-drawer summary::after{content:"⌄";float:right;color:var(--yvb-muted)}
.yvb-toc-drawer[open] summary::after{content:"⌃"}
.yvb-toc-drawer .yvb-toc{padding:0 18px 14px}
.yvb-toc-drawer .yvb-toc__list a{border-left:0;margin-left:0;padding-left:0}
.yvb-toc-drawer .yvb-toc__item--h3 a{padding-left:16px}

/* ---- heading anchors -------------------------------------------------- */
.yvb-prose h2,.yvb-prose h3,.yvb-prose h4{scroll-margin-top:96px;position:relative}
.yvb-anchor{position:absolute;left:-.85em;top:0;opacity:0;text-decoration:none;color:var(--yvb-gold);font-weight:400;transition:opacity .15s}
.yvb-prose h2:hover .yvb-anchor,.yvb-prose h3:hover .yvb-anchor{opacity:.7}
@media (max-width:900px){.yvb-anchor{display:none}}

/* ---- card + related placeholders -------------------------------------- */
.yvb-card__media{display:block;line-height:0}
.yvb-card__media img,.yvb-placeholder{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.yvb-related{margin-top:8px}
.yvb-related h2{font-size:1.15rem;letter-spacing:.02em;margin-bottom:16px}
.yvb-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.yvb-related__item{display:block;text-decoration:none;background:var(--yvb-surface);border:1px solid var(--yvb-border);border-radius:12px;overflow:hidden;transition:border-color .15s}
.yvb-related__item:hover,.yvb-related__item:focus-visible{border-color:var(--yvb-gold)}
.yvb-related__media{display:block;line-height:0}
.yvb-related__media img,.yvb-related__media .yvb-placeholder{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.yvb-related__title{display:block;padding:14px 16px 4px;color:var(--yvb-heading);font-weight:600;font-size:.95rem;line-height:1.35}
.yvb-related .yvb-meta{display:block;padding:0 16px 14px}