/* Strategic Online Corp — interior page system (single / archive / page).
   Ported from the mockup interior stylesheet: masthead, breadcrumb, filter row,
   featured card, pager, article + prose, TOC rail, author card, split lead,
   FAQ accordion, and in-article media blocks + sidebar promos. */

/* ---------- interior page system ---------- */
.masthead{background:linear-gradient(147deg,#0B1030 0%,#241a5e 52%,#4B2BB8 104%);
  position:relative;overflow:hidden;padding:88px 0 76px}
.masthead .grid{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 112px);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 76%,transparent)}
.masthead .shell{position:relative;z-index:1}
.masthead h1{color:#fff;max-width:20ch;font-size:clamp(38px,4.6vw,58px)}
.masthead .kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:#A9AFD0;margin:0 0 20px}
.masthead p.sub{color:#C3C9E2;font-size:20px;line-height:1.55;max-width:56ch;margin-top:22px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8A91B2;margin:0 0 18px}
.crumb a{color:#8A91B2;text-decoration:none}
.crumb a:hover{color:var(--action)}

/* ---------- filter row ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--rule)}
.chip{font-family:Inter,sans-serif;font-size:16px;font-weight:500;padding:9px 18px;border-radius:100px;
  border:1px solid var(--rule);background:var(--surface);color:var(--body);cursor:pointer;
  transition:all .18s ease}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sortbar{margin-left:auto;display:flex;align-items:center;gap:12px}
.sortbar label{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--annotation)}
.sortbar select{font-family:Inter,sans-serif;font-size:16px;padding:9px 14px;border-radius:5px;
  border:1px solid var(--rule);background:var(--surface);color:var(--body)}

/* ---------- featured post ---------- */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--rule);
  border-radius:10px;overflow:hidden;margin-top:44px;background:var(--surface)}
.feature .thumb{height:100%;min-height:320px}
.feature .fbody{padding:44px 46px}
.feature h2{font-size:34px;line-height:1.15;margin:14px 0 16px}
.feature p{font-size:18px;line-height:1.6;color:var(--body)}
.meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--annotation)}

/* ---------- pagination ---------- */
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:56px}
.pager a{min-width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:5px;text-decoration:none;color:var(--body);
  font-size:17px;background:var(--surface);transition:all .18s ease}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .gap{color:var(--annotation);padding:0 6px}

/* ---------- article ---------- */
.article{max-width:none}
.article-grid{display:grid;grid-template-columns:1fr 250px;gap:64px;align-items:start}
.prose{max-width:68ch}
.prose p{font-size:20px;line-height:1.72;color:#33394F;margin:0 0 1.35rem;max-width:none}
.prose h2{font-size:31px;margin:52px 0 16px;letter-spacing:-.02em}
.prose h3{font-size:23px;margin:38px 0 12px}
.prose ul,.prose ol{font-size:20px;line-height:1.7;color:#33394F;padding-left:26px;margin:0 0 1.35rem}
.prose li{margin-bottom:10px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--brand);text-underline-offset:3px}
.prose blockquote{margin:38px 0;padding:6px 0 6px 30px;border-left:4px solid var(--action)}
.prose blockquote p{font-family:Sora,sans-serif;font-weight:500;font-size:24px;line-height:1.45;
  color:var(--ink);letter-spacing:-.015em;margin:0}
.callout{background:var(--canvas);border:1px solid var(--rule);border-left:5px solid var(--brand);
  border-radius:0 10px 10px 0;padding:30px 34px;margin:40px 0}
.callout p:last-child{margin-bottom:0}
.callout .mono{color:var(--brand);font-size:13px;display:block;margin-bottom:12px}
.toc ul{display:block;gap:0}
/* the rail holds the contents list AND the promo cards. a sticky contents
   list slides down over the promos as the page scrolls, so the whole rail
   stays in normal flow instead. */
.article-grid aside .toc{position:static;top:auto}
.article-grid aside{position:static}
.toc{position:sticky;top:112px;border-top:2px solid var(--ink);padding-top:20px}
.toc p{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--annotation);margin:0 0 14px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:11px}
.toc a{font-size:16px;line-height:1.4;color:var(--body);text-decoration:none;display:block}
.toc a:hover{color:var(--brand)}
.author{display:flex;gap:24px;align-items:flex-start;margin-top:60px;padding-top:34px;
  border-top:1px solid var(--rule)}
.author .av{flex:none;width:78px;height:78px;border-radius:100px;
  background:linear-gradient(150deg,#2A1C6B,#6D3FF5)}
.author h4{font-family:Sora;font-size:20px;color:var(--ink);margin:0 0 6px;font-weight:600;
  letter-spacing:-.01em;text-transform:none}
.author p{font-size:17px;line-height:1.55;color:var(--body);margin:0;max-width:58ch}

/* ---------- generic page blocks ---------- */
.split-block{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split-block h2{max-width:14ch}
.faq{border-top:1px solid var(--rule);margin-top:38px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:Sora,sans-serif;font-weight:600;font-size:21px;color:var(--ink);
  padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--action);font-weight:700;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:19px;line-height:1.65;color:var(--body);margin:0 0 26px;max-width:70ch}

@media(max-width:980px){
  .article-grid,.feature,.split-block{grid-template-columns:1fr;gap:30px}
  .toc{position:static}
  .feature .thumb{min-height:200px}
  .masthead{padding:60px 0 52px}
}


/* ===== next style block ===== */

/* ---------- in-article media blocks ---------- */
figure.media{margin:44px 0}
figure.media img{width:100%;display:block;border-radius:10px;border:1px solid var(--rule)}
figure.media figcaption{font-size:16px;line-height:1.5;color:var(--annotation);margin-top:14px;
  padding-left:16px;border-left:3px solid var(--action)}
figure.media.wide{margin-left:-90px;margin-right:-90px}
figure.media.wide figcaption{padding-left:106px}
.imgph{width:100%;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--rule);
  background:linear-gradient(150deg,#E7EAF2,#D3D9E6);display:flex;align-items:center;justify-content:center}
.imgph span{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#7C8398}

/* video / embed — NotebookLM, YouTube, Vimeo, anything iframe-based */
.embed{margin:44px 0}
.embed .frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,#101538,#2A1C6B);border:1px solid var(--rule)}
.embed .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.embed .lab{position:absolute;left:22px;bottom:18px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#B4BAD4}
.embed figcaption{font-size:16px;line-height:1.5;color:var(--annotation);margin-top:14px;
  padding-left:16px;border-left:3px solid var(--brand)}

/* podcast / audio */
.audioblk{margin:44px 0;background:var(--ink);border-radius:10px;padding:28px 30px;
  display:flex;gap:22px;align-items:center}
.audioblk .disc{flex:none;width:64px;height:64px;border-radius:100px;
  background:linear-gradient(150deg,#6D3FF5,#F5A524);display:flex;align-items:center;justify-content:center}
.audioblk .txt{flex:1}
.audioblk .mono{color:var(--action);font-size:12.5px;display:block;margin-bottom:8px}
.audioblk h4{font-family:Sora;font-weight:600;font-size:20px;color:#fff;margin:0 0 10px;
  letter-spacing:-.01em;text-transform:none}
.audioblk .bar{height:6px;background:rgba(255,255,255,.16);border-radius:4px;overflow:hidden}
.audioblk .bar i{display:block;height:100%;width:34%;background:var(--action);border-radius:4px}
.audioblk .time{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8A91B2;margin-top:9px;
  display:flex;justify-content:space-between}

@media(max-width:1100px){
  figure.media.wide{margin-left:0;margin-right:0}
  figure.media.wide figcaption{padding-left:16px}
}
@media(max-width:640px){
  .audioblk{flex-direction:column;align-items:flex-start;gap:16px}
}


/* ===== next style block ===== */

/* ---------- image ratios ---------- */
figure.media.square .imgph{aspect-ratio:1/1}
figure.media.square{max-width:560px;margin-left:auto;margin-right:auto}
figure.media.portrait .imgph{aspect-ratio:4/5}
figure.media.portrait{max-width:460px;margin-left:auto;margin-right:auto}
figure.media.square figcaption,figure.media.portrait figcaption{padding-left:16px}

/* ---------- vertical short-form video ---------- */
.embed.short{max-width:340px;margin-left:auto;margin-right:auto}
.embed.short .frame{aspect-ratio:9/16;border-radius:14px}
.embed.short .lab{left:16px;bottom:14px;font-size:11.5px}
.embed.short figcaption{padding-left:16px}

/* ---------- sidebar promos ---------- */
.promo{border-radius:10px;padding:26px;margin-bottom:22px;border:1px solid var(--rule)}
.promo .plab{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 12px;display:block}
.promo h4{font-family:Sora;font-weight:600;font-size:21px;margin:0 0 10px;letter-spacing:-.015em;
  text-transform:none;line-height:1.25}
.promo p{font-size:16.5px;line-height:1.55;margin:0 0 18px}
.promo .btn{width:100%;text-align:center;font-size:16px;padding:12px 18px}

.promo-dark{background:var(--ink);border-color:var(--ink)}
.promo-dark .plab{color:var(--action)}
.promo-dark h4{color:#fff}
.promo-dark p{color:#B4BAD4}

.promo-amber{background:linear-gradient(130deg,#F5A524,#FFCB5C);border-color:#E8A317}
.promo-amber .plab{color:#6B4C05}
.promo-amber h4{color:#180F00}
.promo-amber p{color:#3A2705}
.promo-amber .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.promo-amber .btn:hover{background:#161C46;border-color:#161C46}

.promo-house{background:var(--surface)}
.promo-house .plab{color:var(--brand)}
.promo-house .strip{height:112px;border-radius:5px;margin-bottom:18px;
  background:linear-gradient(140deg,#2A1C6B,#8B63FF);display:flex;align-items:flex-end;padding:14px}
.promo-house .strip span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
.promo-house h4{color:var(--ink)}
.promo-house p{color:var(--body)}
.promo-house .btn{background:transparent;color:var(--action-deep);border-color:var(--action-deep)}
.promo-house .btn:hover{background:var(--action);border-color:var(--action);color:#160F00}