/* Blog: article, index and topic pages. Loads LAST, after page-hero-la-carte.css.
   Uses the site's tokens only (skin-blocks + calm): navy = surface,
   gold = accent, red = punctuation. The article body styles Ghost's own
   markup, including its kg-* cards. */

/* ---------- Blog bar: sticky under the fixed site nav ----------
   --nav-h is measured by blog.js; the fallbacks match site.css's nav at each
   breakpoint (padding + logo + 1px border). */
:root{ --nav-h:85px; }
@media (max-width:1180px){ :root{ --nav-h:78px; } }
@media (max-width:980px){ :root{ --nav-h:63px; } }

.blog-bar{
 position:sticky; top:calc(var(--nav-h) - 1px); z-index:40;
 background:rgba(250,248,244,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
 border-bottom:1px solid var(--hair);
}
.bb-inner{ display:flex; align-items:center; gap:clamp(18px,3vw,44px); padding:0 clamp(20px,4vw,56px); min-height:58px; }
.bb-home{ display:flex; align-items:baseline; gap:10px; flex:none; color:var(--ink); padding-right:clamp(18px,3vw,44px); border-right:1px solid var(--hair); }
.bb-kicker{ font-family:var(--ui); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.bb-name{ font-family:var(--display); font-size:24px; line-height:1; }
.bb-home:hover .bb-name{ color:var(--red); }
.bb-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.bb-links::-webkit-scrollbar{ display:none; }
.bb-links a{
 flex:none; position:relative; padding:19px 0 17px;
 font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--body);
 transition:color .25s;
}
.bb-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; background:var(--ink); transition:right .35s ease; }
.bb-links a:hover{ color:var(--ink); }
.bb-links a:hover::after,.bb-links a.on::after{ right:0; }
.bb-links a.on{ color:var(--ink); }
.bb-progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; }
.bb-progress span{ display:block; height:100%; background:var(--gold-mid); transform:scaleX(0); transform-origin:0 50%; }
#selection,.gh-content h2,.gh-content h3{ scroll-margin-top:calc(var(--nav-h) + 76px); }

/* ---------- Heroes ---------- */
.page-hero .hero-shot img.img{ width:100%; height:100%; object-fit:cover; display:block; }

/* front page: the newest article is the cover */
.blog-cover h1.bc-masthead{
 font-size:inherit; line-height:1; max-width:none; text-shadow:0 1px 18px rgba(9,14,26,.7);
 display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px;
}
.bc-masthead .bc-name{ font-family:var(--display); font-weight:400; font-size:clamp(34px,4vw,56px); color:#fff; }
.bc-masthead .bc-name .it{ color:var(--gold-sun); }
.bc-masthead .bc-sub{ font-family:var(--ui); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.bc-kicker{ font-family:var(--ui); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-sun); margin-bottom:18px; text-shadow:0 1px 18px rgba(9,14,26,.8); }
.bc-kicker .rule{ background:var(--gold-sun); opacity:.9; }
.bc-title{
 font-family:var(--display); font-weight:400; color:#fff;
 font-size:clamp(40px,5.2vw,88px); line-height:.98; letter-spacing:-.015em;
 max-width:18ch; margin:0 0 24px; text-shadow:0 2px 48px rgba(9,14,26,.5);
}
.bc-title a:hover{ color:var(--gold-sun); }

/* cover carousel: photos cross-fade, texts stack in one grid cell (the
   tallest sets the height, so nothing jumps), tabs sit in the navy plinth */
.blog-cover .bc-slide{ opacity:0; transition:opacity 1.2s ease; }
.blog-cover .bc-slide.is-active{ opacity:1; }
.bc-texts{ display:grid; }
.bc-text{ grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1), visibility 0s linear .6s; }
.bc-text.is-active{ opacity:1; visibility:visible; transform:none; transition-delay:.18s,.18s,0s; }
.bc-texts{ opacity:0; animation:plc-in 1.5s .28s cubic-bezier(.22,.61,.36,1) forwards; }
.blog-cover .bc-text .lede{ opacity:1; animation:none; margin-bottom:22px; }
.bc-read{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; margin-bottom:clamp(28px,5vh,54px); }
.bc-read a{ display:inline-flex; align-items:center; gap:12px; font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; border-bottom:1px solid var(--gold-sun); padding-bottom:4px; }
.bc-read a:hover{ color:var(--gold-sun); }
.bc-read .ar{ font-family:var(--display); font-style:italic; font-size:20px; line-height:0; color:var(--gold-sun); }
.bc-when{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); text-shadow:0 1px 14px rgba(9,14,26,.8); }

.page-hero .meta-row.bc-tabs{ position:relative; grid-template-columns:repeat(var(--n),minmax(0,1fr)); padding-top:0; }
.bc-tab{
 position:relative; display:flex; flex-direction:column; gap:6px;
 padding:clamp(18px,2.6vh,28px) clamp(14px,1.8vw,32px) 0; border-left:1px solid rgba(253,251,246,.17);
 color:rgba(255,255,255,.52); transition:color .35s;
}
.bc-tab:first-child{ padding-left:0; border-left:0; }
.bc-tab:hover,.bc-tab.is-active{ color:#fff; }
.bc-bar{ position:absolute; top:0; left:clamp(14px,1.8vw,32px); right:clamp(14px,1.8vw,32px); height:2px; background:rgba(255,255,255,.16); overflow:hidden; }
.bc-tab:first-child .bc-bar{ left:0; }
.bc-bar i{ display:block; height:100%; background:var(--gold-sun); transform:scaleX(0); transform-origin:0 50%; }
.bc-tab.is-active .bc-bar i{ transform:scaleX(1); }
.blog-cover.js .bc-tab.is-active .bc-bar i{ transform:scaleX(0); animation:bc-fill var(--dur,7000ms) linear forwards; }
.blog-cover.js.is-paused .bc-tab.is-active .bc-bar i{ animation-play-state:paused; }
@keyframes bc-fill{ to{ transform:scaleX(1); } }
.bc-n{ font-family:var(--display); font-style:italic; font-size:22px; line-height:1; color:var(--gold-sun); }
.bc-tab strong{ font-family:var(--ui); font-size:9.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(215,187,133,.9); }
.bc-tt{ font-family:var(--serif); font-size:clamp(14px,1.2vw,17px); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:0 0 auto; padding-top:clamp(8px,2vh,24px); }
/* the masthead and the story never touch: the texts sit at the bottom, and
   this gap is kept even when a long title or a short screen pushes them up */
.blog-cover .bc-texts{ margin-top:clamp(48px,9vh,112px); }
@media (min-width:1025px){ .blog-cover,.blog-cover .frame{ min-height:86svh; } }
.blog-cover .bc-top > .bc-masthead{ margin:0; padding:0; }
.bc-arrows{ display:none; gap:10px; flex:none; }
.blog-cover.js .bc-arrows{ display:flex; }
.bc-arrows button{
 width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
 background:rgba(9,15,28,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
 color:#fff; font-family:var(--display); font-size:20px; line-height:1; display:grid; place-items:center;
 transition:background .25s, border-color .25s, color .25s;
}
.bc-arrows button:hover{ background:var(--gold-sun); border-color:var(--gold-sun); color:var(--ink); }
.bc-arrows button:focus-visible{ outline:2px solid var(--gold-sun); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
 .bc-texts{ animation:none; opacity:1; }
 .blog-cover.js .bc-tab.is-active .bc-bar i{ animation:none; transform:scaleX(1); }
 .blog-cover .bc-slide,.bc-text{ transition:none; }
}

.post-hero h1{ font-size:clamp(40px,5.6vw,98px); line-height:.98; max-width:18ch; }
.post-hero .meta-row time{ display:block; }

/* ---------- Article body ---------- */
.post-main{ background:var(--p0); padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,128px); --gutter:6vw; }

.gh-content{
 display:grid;
 grid-template-columns:
  [full-start] minmax(var(--gutter),1fr)
  [wide-start] minmax(0,190px)
  [main-start] min(680px,calc(100% - 2 * var(--gutter)))
  [main-end] minmax(0,190px)
  [wide-end] minmax(var(--gutter),1fr) [full-end];
 font-family:var(--serif); font-size:20px; line-height:1.72; color:var(--body);
}
.gh-content > *{ grid-column:main; margin:0 0 1.15em; }
.gh-content > .kg-width-wide{ grid-column:wide; }
.gh-content > .kg-width-full{ grid-column:full; }
.gh-content > .kg-width-full img{ width:100%; }
.gh-content > p:first-child{ font-size:1.18em; line-height:1.6; color:var(--ink); }

.gh-content h2{
 font-family:var(--display); font-weight:400; color:var(--ink);
 font-size:clamp(30px,3.4vw,46px); line-height:1.06; letter-spacing:-.01em;
 margin:1.9em 0 .55em;
}
.gh-content h3{
 font-family:var(--display); font-style:italic; font-weight:400; color:var(--ink);
 font-size:clamp(24px,2.3vw,30px); line-height:1.12;
 margin:1.5em 0 .45em;
}
.gh-content h4{ font-family:var(--ui); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:1.8em 0 .6em; }
.gh-content strong{ color:var(--ink); font-weight:600; }
.gh-content a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold-mid); text-underline-offset:.2em; text-decoration-thickness:1px; transition:color .25s, text-decoration-color .25s; }
.gh-content a:hover{ color:var(--red); text-decoration-color:var(--red); }

.gh-content ul,.gh-content ol{ padding-left:0; list-style:none; }
.gh-content li{ position:relative; padding-left:30px; margin:0 0 .7em; }
.gh-content ul > li::before{ content:""; position:absolute; left:4px; top:.72em; width:12px; height:1px; background:var(--gold-mid); }
.gh-content ol{ counter-reset:li; }
.gh-content ol > li{ counter-increment:li; }
.gh-content ol > li::before{ content:counter(li,decimal-leading-zero); position:absolute; left:0; top:.2em; font-family:var(--ui); font-size:12px; letter-spacing:.08em; color:var(--gold); }

.gh-content blockquote{
 margin:1.4em 0 1.6em; padding:6px 0 6px 28px;
 border-left:2px solid var(--gold-mid);
 font-family:var(--display); font-style:italic; font-size:clamp(24px,2.4vw,31px); line-height:1.28; color:var(--ink);
}
.gh-content blockquote.kg-blockquote-alt{ border-left:0; padding:0; text-align:center; font-size:clamp(28px,3vw,38px); }
.gh-content blockquote p{ margin:0; }

.gh-content hr{ border:0; height:1px; width:64px; background:var(--gold-mid); margin:2.6em auto; }
.gh-content code{ font-family:var(--mono); font-size:.82em; background:var(--p2); padding:.1em .35em; }
.gh-content pre{ font-family:var(--mono); font-size:14px; line-height:1.6; background:var(--ink); color:#f4f0e8; padding:22px 24px; overflow-x:auto; }
.gh-content pre code{ background:none; padding:0; }

/* figures */
.gh-content figure{ margin:1.8em 0 2em; }
.gh-content > .kg-width-wide,.gh-content > .kg-width-full{ margin-top:2.2em; margin-bottom:2.4em; }
.gh-content figure img{ width:100%; height:auto; display:block; }
.gh-content figcaption{
 margin-top:12px; font-family:var(--ui); font-size:12px; letter-spacing:.06em; line-height:1.5;
 color:var(--mute); text-align:center; padding:0 var(--gutter);
}
.post-credit{ grid-column:main; max-width:680px; margin:0 auto 28px; padding:0 var(--gutter); font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

/* gallery: flex ratios are written at build time (lib/transform.js) */
.kg-gallery-container{ display:flex; flex-direction:column; gap:10px; }
.kg-gallery-row{ display:flex; gap:10px; }
.kg-gallery-image{ flex:1 1 0%; }
.kg-gallery-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* mid-article invitation (inserted by the renderer, never written in Ghost) */
.gh-content .mid-cta{
 margin:2.2em 0; padding:24px 28px 22px;
 background:var(--p1); border-top:2px solid var(--blue);
}
.mid-cta .mc-text{ margin:0 0 16px; font-size:18px; line-height:1.55; color:var(--body); }
.mid-cta .mc-text strong{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(21px,1.9vw,25px); line-height:1.2; color:var(--ink); margin-bottom:4px; }
.mid-cta .mc-actions{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin:0; }
.gh-content .mid-cta a{ text-decoration:none; font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.gh-content .mid-cta .mc-primary{ background:var(--blue); color:#fff; padding:13px 20px; transition:background .25s; }
.gh-content .mid-cta .mc-primary:hover{ background:var(--red); color:#fff; }
.gh-content .mid-cta .mc-secondary{ color:var(--ink); border-bottom:1px solid var(--gold-mid); padding-bottom:3px; }
.gh-content .mid-cta .mc-secondary:hover{ color:var(--red); border-color:var(--red); }
.mid-cta .ar{ font-family:var(--display); font-style:italic; font-size:16px; }
.mid-cta .mc-primary .ar{ color:var(--gold-sun); }
.mid-cta .mc-secondary .ar{ color:var(--gold); }

/* callout */
.gh-content .kg-callout-card{
 display:flex; gap:16px; align-items:flex-start;
 background:var(--p2); border-left:3px solid var(--gold-mid);
 padding:22px 26px; font-size:18px; line-height:1.6; color:var(--ink);
}
.kg-callout-emoji{ font-size:22px; line-height:1.3; }
.kg-callout-text{ flex:1; }

/* table (html / markdown card) */
.gh-content .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gh-content table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.45; }
.gh-content th{
 text-align:left; font-family:var(--ui); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
 color:var(--ink); border-bottom:1px solid var(--ink); padding:0 16px 12px 0; white-space:nowrap;
}
.gh-content td{ border-bottom:1px solid var(--hair); padding:14px 16px 14px 0; vertical-align:top; }
.gh-content td:first-child{ color:var(--ink); font-weight:600; }

/* toggle card, rendered as <details> */
.gh-content details.kg-toggle-card{ border-top:1px solid var(--hair); margin:0; }
.gh-content details.kg-toggle-card:last-of-type{ border-bottom:1px solid var(--hair); margin-bottom:1.4em; }
.gh-content details summary{
 list-style:none; cursor:pointer; position:relative;
 padding:20px 44px 20px 0;
 font-family:var(--display); font-size:clamp(21px,2vw,25px); line-height:1.2; color:var(--ink);
}
.gh-content details summary::-webkit-details-marker{ display:none; }
.gh-content details summary::after{
 content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
 font-family:var(--ui); font-size:24px; font-weight:300; color:var(--gold);
}
.gh-content details[open] summary::after{ content:"−"; }
.gh-content details .kg-toggle-content{ padding:0 0 18px; }
.gh-content details .kg-toggle-content p{ margin:0; }

/* button, embed, bookmark cards */
.gh-content .kg-button-card{ text-align:center; }
.gh-content .kg-button-card.kg-align-left{ text-align:left; }
.gh-content .kg-btn{
 display:inline-flex; align-items:center; gap:14px; text-decoration:none;
 background:var(--blue); color:#fff; border:1px solid var(--blue);
 font-family:var(--ui); font-size:13px; letter-spacing:.1em; text-transform:uppercase; padding:18px 26px;
}
.gh-content .kg-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.gh-content .kg-embed-card iframe{ width:100%; aspect-ratio:16/9; height:auto; border:0; display:block; }
.gh-content .kg-bookmark-card a{ display:flex; text-decoration:none; border:1px solid var(--hair); }
.gh-content .kg-bookmark-content{ flex:1; padding:18px 20px; font-size:15px; line-height:1.45; }
.gh-content .kg-bookmark-title{ font-family:var(--display); font-size:20px; color:var(--ink); }
.gh-content .kg-bookmark-description,.gh-content .kg-bookmark-metadata{ font-size:13px; color:var(--mute); margin-top:6px; }
.gh-content .kg-bookmark-thumbnail{ width:32%; max-width:220px; }
.gh-content .kg-bookmark-thumbnail img{ width:100%; height:100%; object-fit:cover; }
.gh-content .kg-bookmark-icon{ width:16px; height:16px; display:inline-block; vertical-align:middle; margin-right:6px; }

/* ---------- Article foot ---------- */
.post-foot{ max-width:calc(680px + 2 * 6vw); margin:clamp(40px,6vw,72px) auto 0; padding:0 6vw; }
.post-updated{ font-family:var(--ui); font-size:12px; letter-spacing:.08em; color:var(--mute); margin:0 0 22px; }
.post-topics{ display:flex; flex-wrap:wrap; gap:10px; padding-top:28px; border-top:1px solid var(--ink); margin-bottom:28px; }
.post-back{ display:inline-flex; align-items:center; gap:10px; margin:0 0 36px; font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.post-back .ar{ font-family:var(--display); font-style:italic; font-size:20px; line-height:0; color:var(--gold); transition:margin .3s; }
.post-back:hover{ color:var(--red); }
.post-back:hover .ar{ margin-right:6px; }

.post-pager{
 display:grid; grid-template-columns:1fr 1fr; gap:0;
 max-width:1040px; margin:clamp(56px,7vw,88px) auto 0; padding:0 6vw;
}
.post-pager a{ display:flex; flex-direction:column; gap:10px; padding:28px 0; border-top:1px solid var(--ink); color:var(--ink); }
.post-pager .pp-prev{ padding-right:clamp(16px,3vw,40px); }
.post-pager .pp-next{ text-align:right; align-items:flex-end; padding-left:clamp(16px,3vw,40px); border-left:1px solid var(--hair); }
.post-pager span:empty{ border-top:1px solid var(--ink); }
.pp-label{ font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.pp-title{ font-family:var(--display); font-size:clamp(20px,2vw,26px); line-height:1.15; max-width:26ch; transition:color .25s; }
.post-pager a:hover .pp-title{ color:var(--red); }
.post-company{ background:var(--blue); color:rgba(255,255,255,.86); padding:32px 34px 30px; }
.post-company .label{ color:var(--gold-sun); margin-bottom:14px; }
.post-company p{ font-family:var(--serif); font-size:18px; line-height:1.6; margin:0 0 18px; }
.post-company p strong{ font-family:var(--display); font-weight:400; font-size:21px; color:#fff; }
.post-company .em{ font-family:var(--display); font-style:italic; color:var(--gold-sun); }
.post-company a{ font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; border-bottom:1px solid var(--gold-sun); padding-bottom:3px; }
.post-company a:hover{ color:var(--gold-sun); }
.post-company .ar{ color:var(--gold-sun); }

/* ---------- Topic chips ---------- */
.topic-chip{
 display:inline-block; font-family:var(--ui); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
 color:var(--ink); border:1px solid var(--hair); padding:9px 14px 8px; transition:background .25s, color .25s, border-color .25s;
}
.topic-chip:hover{ border-color:var(--ink); color:var(--ink); }
.topic-chip.on{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- Magazine ---------- */
/* the blocks after the hero (latest, recommends, topics): tight rhythm, a hairline between them */
.blog-list{ background:#fff; padding:clamp(48px,5vw,72px) 8vw clamp(36px,4vw,56px); }
.blog-list + section,.mag-archive + section{ border-top:1px solid var(--hair); }

.mag-hdr{
 display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:14px 24px;
 border-bottom:1px solid var(--ink); padding-bottom:18px; margin-bottom:clamp(28px,3vw,40px);
}
.mag-hdr .label{ color:var(--gold); flex-basis:100%; }
.mag-hdr h2{ font-family:var(--display); font-weight:400; font-size:clamp(34px,4vw,58px); line-height:1; color:var(--ink); margin:0; }
.mag-hdr h2 .it{ color:var(--red); }
.mag-seeall{ font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.mag-seeall .ar{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--gold); }
.mag-seeall:hover{ color:var(--red); }

.pc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.pc-topic{ color:var(--red); }
.pc-topic::after{ content:""; display:inline-block; width:14px; height:1px; background:var(--hair); vertical-align:middle; margin-left:12px; }

/* lead story + numbered side column */
.mag-lead{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); }
.mag-lead.solo{ grid-template-columns:1fr; }
.mag-feature{ display:flex; flex-direction:column; color:var(--ink); }
.mag-feature .pc-img{ aspect-ratio:3/2; }
.mag-feature .pc-meta{ margin:22px 0 14px; }
.mag-feature h3{ font-family:var(--display); font-weight:400; font-size:clamp(32px,3.5vw,54px); line-height:1.02; letter-spacing:-.01em; margin:0 0 16px; transition:color .25s; }
.mag-feature p{ font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--body); margin:0 0 20px; max-width:60ch; }
.mag-feature:hover h3{ color:var(--red); }
.mag-feature:hover .pc-img img{ transform:scale(1.03); }
.mag-lead.solo .mag-feature{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
.mag-lead.solo .mag-feature .pc-meta{ margin-top:0; }

.mag-side{ display:flex; flex-direction:column; border-top:1px solid var(--ink); }
.mag-side-item{ display:grid; grid-template-columns:auto minmax(0,1fr) 96px; gap:18px; align-items:start; padding:22px 0; border-bottom:1px solid var(--hair); color:var(--ink); }
.msi-n{ font-family:var(--display); font-style:italic; font-size:34px; line-height:.9; color:var(--gold-mid); min-width:1.4em; }
.msi-body .pc-meta{ margin:2px 0 8px; }
.mag-side-item h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,1.7vw,24px); line-height:1.12; margin:0; transition:color .25s; }
.mag-side-item:hover h3{ color:var(--red); }
.msi-img{ aspect-ratio:1; overflow:hidden; background:var(--p2); }
.msi-img img{ width:100%; height:100%; object-fit:cover; display:block; }


/* small text-only articles under the lead block */
.mag-strip{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); margin-top:clamp(28px,3vw,44px); border-top:1px solid var(--hair); }
.ms-item{ text-align:center; padding:28px clamp(14px,2vw,30px) 4px; border-left:1px solid var(--hair); }
.ms-item:first-child{ border-left:0; }
.ms-topic{ display:inline-block; font-family:var(--ui); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--red); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; margin-bottom:12px; }
.ms-topic:hover{ color:var(--ink); }
.ms-item h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,1.7vw,24px); line-height:1.18; margin:0 0 12px; }
.ms-item h3 a{ color:var(--ink); transition:color .25s; }
.ms-item h3 a:hover{ color:var(--red); }
.ms-meta{ font-family:var(--ui); font-size:12px; letter-spacing:.04em; color:var(--mute); }
.ms-meta .sep{ display:inline-block; margin:0 8px; color:var(--gold-mid); }


/* topics in columns, like a newspaper's section pages */
.mag-columns{ background:var(--p1); padding:clamp(40px,4.5vw,64px) 8vw; }
.mc-grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); border-left:1px solid var(--hair); }
.mc-col{ display:flex; flex-direction:column; padding:0 clamp(18px,2vw,32px); border-right:1px solid var(--hair); }
.mc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:18px 0 16px; border-top:3px solid var(--ink); margin-bottom:22px; color:var(--ink); }
.mc-name{ font-family:var(--display); font-weight:400; font-size:clamp(26px,2.4vw,34px); line-height:1; }
.mc-name .it{ color:var(--red); }
.mc-count{ font-family:var(--ui); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.mc-head:hover .mc-name{ color:var(--red); }
.mc-lead{ display:flex; flex-direction:column; color:var(--ink); }
.mc-lead .pc-img{ aspect-ratio:3/2; }
.mc-lead .pc-meta{ margin:14px 0 8px; }
.mc-lead h3{ font-family:var(--display); font-weight:400; font-size:clamp(21px,1.8vw,25px); line-height:1.12; margin:0; transition:color .25s; }
.mc-lead:hover h3{ color:var(--red); }
.mc-lead:hover .pc-img img{ transform:scale(1.04); }
.mc-list{ list-style:none; margin:18px 0 0; padding:0; }
.mc-list li a{ display:flex; flex-direction:column; gap:6px; padding:14px 0; border-top:1px solid var(--hair); color:var(--ink); }
.mc-t{ font-family:var(--serif); font-size:16.5px; line-height:1.35; transition:color .25s; }
.mc-list time{ font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.mc-list li a:hover .mc-t{ color:var(--red); }
.mc-col > .mag-seeall{ margin-top:auto; padding-top:20px; }

/* topic page foot: the other topics as photo cards */
.topic-others{ background:#fff; padding:clamp(40px,4.5vw,64px) 8vw clamp(48px,5vw,72px); }
.to-grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:clamp(28px,3vw,48px); }
.to-card{ display:flex; flex-direction:column; color:var(--ink); }
.to-img{ aspect-ratio:3/2; overflow:hidden; background:var(--p2); }
.to-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.to-body{ display:flex; flex-direction:column; flex:1; padding-top:22px; border-bottom:1px solid var(--hair); padding-bottom:22px; }
.to-count{ font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.to-name{ font-family:var(--display); font-weight:400; font-size:clamp(26px,2.4vw,34px); line-height:1.05; margin:0 0 12px; transition:color .25s; }
.to-name .it{ color:var(--red); }
.to-desc{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--body); margin:0 0 18px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.to-more{ font-family:var(--ui); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.to-more .ar{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--gold); display:inline-block; transition:transform .3s; }
.to-card:hover .to-img img{ transform:scale(1.04); }
.to-card:hover .to-name{ color:var(--red); }
.to-card:hover .to-more .ar{ transform:translateX(5px); }

/* archive: 8 small text-only articles on 2 rows of 4, picked at random by
   blog.js (the strip's .ms-item styles). Without JS, the first 8 show. */
.mag-archive{ background:#fff; padding:clamp(40px,4.5vw,64px) 8vw clamp(36px,4vw,56px); }
.mag-archive .mag-hdr{ margin-bottom:0; }
.ma-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.ma-grid:not(.js) > :nth-child(n+9){ display:none; }
.ma-grid > .ms-item{ border-left:1px solid var(--hair); padding-bottom:26px; }
.ma-grid > .ms-item:nth-child(4n+1){ border-left:0; }
.ma-grid > .ms-item:nth-child(n+5){ border-top:1px solid var(--hair); }

/* ---------- Standard cards ---------- */
.post-card{ display:flex; flex-direction:column; color:var(--ink); }
.pc-img{ aspect-ratio:4/3; overflow:hidden; background:var(--p2); }
.pc-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pc-img-empty{ background:radial-gradient(90% 80% at 80% 20%,rgba(215,187,133,.25),transparent 60%),var(--blue); }
.post-card:hover .pc-img img{ transform:scale(1.04); }
.pc-body{ display:flex; flex-direction:column; flex:1; }
.pc-meta{ font-family:var(--ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:20px 0 12px; }
.post-card h3{ font-family:var(--display); font-weight:400; font-size:clamp(24px,2.1vw,30px); line-height:1.08; margin:0 0 12px; transition:color .25s; }
.post-card:hover h3{ color:var(--red); }
.post-card p{
 font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--body); margin:0 0 18px; flex:1;
 display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-more{ font-family:var(--ui); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.pc-more .ar{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--gold); transition:margin .3s; }
.post-card:hover .pc-more .ar{ margin-left:6px; }

.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(44px,5vw,64px) clamp(24px,3vw,40px); }

/* ---------- Related + practice ---------- */
.blog-related{ background:var(--p2); padding:clamp(80px,9vw,128px) 8vw; }

@media (min-width:1025px){
 .blog-practice .cross-grid.n1{ grid-template-columns:1fr; }
 .blog-practice .cross-grid.n2{ grid-template-columns:repeat(2,1fr); }
 .blog-practice .cross-grid.n3{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
 .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mag-lead,.mag-lead.solo .mag-feature{ grid-template-columns:1fr; }
 .mc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px; }
 .to-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* phones: the cover tabs shrink to numbered progress bars, arrows appear */
@media (max-width:880px){
 .page-hero .meta-row.bc-tabs{ grid-template-columns:repeat(var(--n),minmax(0,1fr)); padding:0 var(--hpad) 18px; }
 .page-hero .meta-row.bc-tabs > .bc-tab{ border-top:0; padding:16px 10px 0; border-left:0; }
 .page-hero .meta-row.bc-tabs > .bc-tab:first-child{ padding-left:0; }
 .bc-bar{ left:10px; right:10px; }
 .bc-tab strong,.bc-tt{ display:none; }
 .bc-n{ font-size:18px; }
 .bc-arrows button{ width:44px; height:44px; font-size:18px; }
}
@media (max-width:760px){
 .gh-content{ font-size:18px; }
 .gh-content > p:first-child{ font-size:1.12em; }
 .gh-content .kg-callout-card{ padding:18px 20px; font-size:17px; }
 .post-grid{ grid-template-columns:1fr; }
 .blog-list,.blog-related,.mag-archive,.mag-columns,.topic-others{ padding-left:6vw; padding-right:6vw; }
 .mc-grid{ grid-template-columns:1fr; border-left:0; row-gap:44px; }
 .mc-col{ padding:0; border-right:0; }
 .to-grid{ grid-template-columns:1fr; gap:36px; }
 .post-company{ padding:26px 24px; }

 .bb-inner{ gap:16px; padding:0 6vw; min-height:52px; }
 .bb-home{ padding-right:16px; }
 .bb-kicker{ display:none; }
 .bb-name{ font-size:21px; }
 .bb-links a{ padding:17px 0 15px; font-size:11px; }

 .bc-masthead .bc-sub{ display:none; }
 .bc-title{ font-size:clamp(34px,9vw,52px); }
 .blog-cover .bc-texts{ margin-top:40px; }

 .mag-side-item{ grid-template-columns:auto minmax(0,1fr) 72px; gap:14px; }
 .msi-n{ font-size:28px; }

 .ma-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ma-grid > .ms-item:nth-child(n){ border-left:1px solid var(--hair); border-top:1px solid var(--hair); }
 .ma-grid > .ms-item:nth-child(odd){ border-left:0; }
 .ma-grid > .ms-item:nth-child(-n+2){ border-top:0; }
 .mag-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ms-item{ padding:22px 12px 8px; }
 .ms-item:nth-child(odd){ border-left:0; }
 .ms-item:nth-child(n+3){ border-top:1px solid var(--hair); }
 .ms-item h3{ font-size:18px; }

 .post-pager{ grid-template-columns:1fr; }
 .post-pager .pp-next{ border-left:0; padding-left:0; }
 .post-pager .pp-prev{ padding-right:0; }
}
@media (max-width:560px){
 .kg-gallery-row{ flex-direction:column; }
 .kg-gallery-image{ flex:none !important; }
 .gh-content td,.gh-content th{ padding-right:12px; }
}

/* ---------- Mock only (never rendered by the real build) ---------- */
.mock-flag{
 position:fixed; left:16px; bottom:16px; z-index:90;
 background:var(--red); color:#fff; padding:8px 12px;
 font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
 pointer-events:none;
}