/* ============================================================
   Balance Codex — Essays index + single article
   Loaded after blog.css. Uses the theme tokens via short aliases.
   Classes here are NOT bct-card/bct-post-hero (those stay defined
   in blog.css); the redesigned card/index/single use these.
   ============================================================ */
:root{
  --bc-charcoal:var(--color-charcoal);
  --bc-charcoal-soft:var(--color-charcoal-soft);
  --bc-warm-white:var(--color-warm-white);
  --bc-warm-cream:var(--color-warm-cream);
  --bc-warm-grey:var(--color-warm-grey);
  --bc-line:var(--color-warm-grey-light);
  --bc-ink:var(--color-ink-blue);
  --bc-font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bc-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --bc-scrim:linear-gradient(to top, rgba(31,29,27,.88) 0%, rgba(31,29,27,.58) 28%, var(--line) 60%, rgba(31,29,27,0) 100%);
  --bc-scrim-hover:linear-gradient(to top, rgba(31,29,27,.92) 0%, rgba(31,29,27,.66) 32%, rgba(31,29,27,.18) 64%, rgba(31,29,27,0) 100%);
}

/* ---------- shared atoms ---------- */
.bce-eyebrow{margin:0 0 16px; font-family:var(--bc-font-mono); font-size:11px; font-weight:500;
             letter-spacing:.15em; text-transform:uppercase; color:var(--bc-ink);}
.bce-eyebrow--section{margin:0 0 26px;}
.bce-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.6em; font-family:var(--bc-font-mono);
          font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bc-charcoal-soft);}
.bce-meta a{color:inherit; text-decoration:none; border-bottom:1px solid var(--bc-line); transition:color .18s ease, border-color .18s ease;}
.bce-meta a:hover{color:var(--bc-ink); border-bottom-color:var(--bc-ink);}
.bce-meta .sep{color:var(--bc-warm-grey);}
.bce-button{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:42px;
            padding:0 20px; border:1px solid var(--bc-charcoal); background:var(--bc-charcoal);
            color:var(--bc-warm-white); font-family:var(--bc-font-mono); font-size:11px; font-weight:500;
            letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; text-decoration:none; transition:filter .18s ease;}
.bce-button:hover{filter:brightness(.88); color:var(--bc-warm-white);}

/* section helper: drop the top divider (featured sits flush under the hero) */
.bct-section--flush{border-top:none;}

/* ---------- index hero (charcoal, background-image ready) ---------- */
/* To add a photo later: set background-image on .bce-hero__bg (Customizer,
   inline style, or a CSS rule). The scrim keeps the text legible. */
.bce-hero{position:relative; overflow:hidden; background:var(--bc-charcoal); color:var(--bc-warm-white);
          padding-block:var(--space-9);}
.bce-hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
.bce-hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,29,27,.34) 0%, rgba(31,29,27,.62) 100%);}
.bce-hero__grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px);
                gap:64px; align-items:end;}
.bce-hero .bce-eyebrow{color:var(--bc-warm-grey);}
.bce-hero__title{max-width:18ch; margin:0; font-family:var(--bc-font-sans); font-weight:500;
                 font-size:2.25rem; line-height:1.05; letter-spacing:-.015em; color:var(--bc-warm-white);}
@media (min-width:768px){ .bce-hero__title{font-size:var(--text-display);} }  /* 46px — same as .bct-hero__h1 */
.bce-hero__facts{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px;}
.bce-hero__facts span{min-height:30px; display:inline-flex; align-items:center; padding:0 12px;
       border:1px solid var(--on-dark-faint); color:var(--bc-warm-grey);
       font-family:var(--bc-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.bce-hero__copy{margin:0; color:var(--sand); font-size:1.0625rem; line-height:1.7;}

/* ---------- compact featured ---------- */
.bce-featured{background:var(--bc-warm-cream); border:1px solid var(--bc-line);
              display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; overflow:hidden;}
.bce-featured__cover{position:relative; display:block; overflow:hidden; text-decoration:none;
                     min-height:clamp(280px,30vw,360px); background:var(--bc-charcoal);}
.bce-featured__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.bce-featured:hover .bce-featured__img{transform:scale(1.03);}
.bce-featured__title{position:absolute; left:clamp(22px,3vw,34px); right:clamp(22px,3vw,34px); bottom:clamp(20px,2.6vw,30px);
                     margin:0; z-index:1; font-family:var(--bc-font-sans); font-weight:500;
                     font-size:clamp(1.55rem,2.7vw,2.2rem); line-height:1.08; letter-spacing:-.01em; color:var(--bc-warm-white);}
.bce-featured__panel{display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vw,44px);}
.bce-featured__panel .bce-eyebrow{margin-bottom:12px;}
.bce-featured__panel .bce-meta{margin-bottom:16px;}
.bce-featured__excerpt{margin:0; color:var(--bc-charcoal-soft); font-size:1.0625rem; line-height:1.7;}
.bce-featured .bce-button{margin-top:26px; align-self:flex-start;}

/* ---------- archive layout ---------- */
.bce-archive{display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:40px; align-items:start;}
.bce-archive__main{min-width:0;}
.bce-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}

/* ---------- overlay card (shared: index, archives, author, related) ---------- */
.essay-card{position:relative; display:flex; flex-direction:column; background:var(--color-white);
            border:1px solid var(--bc-line); transition:border-color .18s ease;}
.essay-card:hover{border-color:var(--bc-charcoal);}
.essay-card__media{position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bc-charcoal); text-decoration:none;}
.essay-card__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.essay-card:hover .essay-card__img{transform:scale(1.04);}
.essay-card__scrim{position:absolute; inset:0; background:var(--bc-scrim); transition:background .25s ease;}
.essay-card:hover .essay-card__scrim{background:var(--bc-scrim-hover);}
.essay-card__title{position:absolute; left:22px; right:22px; bottom:20px; margin:0; z-index:1;
                   font-family:var(--bc-font-sans); font-weight:500; font-size:clamp(1.1rem,1.5vw,1.28rem);
                   line-height:1.18; letter-spacing:-.005em; color:var(--bc-warm-white);}
/* card without a cover image — cycle four brand tones (the v8 look) behind the
   scrim, with the same white title as image cards. Adjacent cards differ; set a
   Featured Image and the photo replaces the tone. */
.essay-card__media--noimg{background:var(--bc-charcoal);}
.essay-card:nth-child(4n+2) .essay-card__media--noimg{background:var(--bc-ink);}
.essay-card:nth-child(4n+3) .essay-card__media--noimg{background:var(--bc-charcoal-soft);}
.essay-card:nth-child(4n+4) .essay-card__media--noimg{background:var(--bc-warm-grey);}
.essay-card__body{display:flex; flex-direction:column; flex:1; padding:18px 24px 22px;}
.essay-card__body .bce-meta{margin-bottom:11px;}
.essay-card__excerpt{margin:0; color:var(--bc-charcoal-soft); font-size:.95rem; line-height:1.62;}
.essay-card__link{margin-top:auto; padding-top:18px; color:var(--bc-ink); font-family:var(--bc-font-mono);
                  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;}
.essay-card__link:hover{text-decoration:underline; text-underline-offset:3px;}
/* text card (post without a featured image) — light, title in the body */
.essay-card--text .essay-card__body{padding-top:24px;}
.essay-card__heading{margin:0 0 12px; font-family:var(--bc-font-sans); font-weight:500;
                     font-size:clamp(1.15rem,1.5vw,1.3rem); line-height:1.2; letter-spacing:-.005em; color:var(--bc-charcoal);}
.essay-card__heading a{color:inherit; text-decoration:none;}
.essay-card__heading a:hover{color:var(--bc-ink);}

/* ---------- pagination (reuse theme spacing; restyle nav links) ---------- */
.bce-pagination{margin-top:48px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
                font-family:var(--bc-font-mono); font-size:13px;}
.bce-pagination .page-numbers{min-width:40px; height:40px; display:inline-flex; align-items:center;
       justify-content:center; padding:0 12px; border:1px solid var(--bc-line); color:var(--bc-charcoal-soft);}
.bce-pagination a.page-numbers:hover{border-color:var(--bc-charcoal); color:var(--bc-charcoal);}
.bce-pagination .page-numbers.current{background:var(--bc-charcoal); border-color:var(--bc-charcoal); color:var(--bc-warm-white);}
.bce-pagination .page-numbers.dots{border-color:transparent; min-width:auto;}

/* ---------- sidebar rail (index + single) ---------- */
.bce-rail{position:sticky; top:84px; display:grid; gap:20px;}
.bce-rail-card{padding:22px 24px; background:var(--color-white); border:1px solid var(--bc-line);}
.bce-rail-card--soft{background:var(--bc-warm-cream);}
.bce-rail-card--dark{background:var(--bc-charcoal); color:var(--bc-warm-white); border-color:var(--bc-charcoal);}
.bce-rail-card__label{margin:0 0 14px; font-family:var(--bc-font-mono); font-size:11px; font-weight:500;
                      letter-spacing:.14em; text-transform:uppercase; color:var(--bc-ink);}
.bce-rail-card--dark .bce-rail-card__label{color:var(--bc-warm-grey);}
.bce-rail-card h3{margin:0 0 10px; font-family:var(--bc-font-sans); font-weight:500; font-size:1.15rem;
                  line-height:1.22; letter-spacing:-.005em; color:var(--bc-charcoal);}
.bce-rail-card--dark h3{color:var(--bc-warm-white);}
.bce-rail-card p{margin:0; font-size:.9rem; line-height:1.6; color:var(--bc-charcoal-soft);}
.bce-rail-card--dark p{color:var(--sand);}
.bce-rail-card__link{display:inline-block; margin-top:14px; color:var(--bc-ink); font-family:var(--bc-font-mono);
                     font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;}
.bce-rail-card--dark .bce-rail-card__link{color:var(--sand);}
.bce-rail-card__link:hover{text-decoration:underline; text-underline-offset:3px;}

/* latest list (index rail) */
.bce-rail-list{display:grid; gap:0; margin:0; padding:0; list-style:none;}
.bce-rail-list li + li{margin-top:14px; padding-top:14px; border-top:1px solid var(--bc-line);}
.bce-rail-list a{display:grid; grid-template-columns:58px minmax(0,1fr); gap:13px; align-items:center; text-decoration:none;}
.bce-rail-list a:hover strong{color:var(--bc-ink);}
.bce-rail-list__thumb{position:relative; aspect-ratio:1/1; width:58px; overflow:hidden; background:var(--bc-charcoal);}
.bce-rail-list__thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bce-rail-list__text{display:grid; gap:5px; min-width:0;}
.bce-rail-list strong{font-family:var(--bc-font-sans); font-weight:500; font-size:.92rem; line-height:1.22; letter-spacing:-.005em; color:var(--bc-charcoal);}
.bce-rail-list__date{color:var(--bc-charcoal-soft); font-family:var(--bc-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}

/* ---------- table of contents (single) ---------- */
.bce-toc[hidden]{display:none;}
.bce-toc__list{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.bce-toc__link{display:block; padding:7px 0 7px 14px; border-left:2px solid var(--bc-line);
               color:var(--bc-charcoal-soft); font-size:.9rem; line-height:1.35; text-decoration:none;
               transition:color .15s ease, border-color .15s ease;}
.bce-toc__link:hover{color:var(--bc-ink);}
.bce-toc__link.is-active{color:var(--bc-charcoal); border-left-color:var(--bc-ink); font-weight:500;}

/* ---------- single: body + sidebar ---------- */
.bce-article-layout{display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:40px; align-items:start;}
.bce-article-layout .bct-article__body{margin:0; max-width:760px;}      /* readable measure, left-aligned; column matches the index */
/* scroll-margin hacks removed in 2.9.1 — the global
   html{scroll-padding-top} in chrome.css clears the sticky header
   for every anchor; keeping these would double the offset. */

/* ---------- related essays ---------- */
.bce-related{border-top:1px solid var(--bc-line); background:var(--bc-warm-cream);}
.bce-related__head{padding-top:clamp(40px,5vw,56px);}
.bce-related__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
                   padding-bottom:clamp(40px,5vw,56px);}
.bce-related__grid .essay-card{background:var(--bc-warm-white);}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .bce-hero__grid,.bce-archive,.bce-featured,.bce-article-layout{grid-template-columns:1fr;}
  .bce-featured .bce-button{margin-top:22px;}
  .bce-rail{position:static; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;}
  .bce-article-layout{gap:40px;}
}
@media (max-width:760px){
  .bce-grid{grid-template-columns:1fr;}
  .bce-related__grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .bce-rail{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .essay-card__img,.essay-card__scrim,.bce-toc__link{transition:none;}
}