/* ═══════════════════════════════════════════════════════════════
   TOUCH THE SKIES ACADEMY: Blog (editorial layer)
   Loaded after styles.css + extra.css on /blog pages only.
   Prefixes: bp- (post), bx- (index), bc / ca (cards + cover art).
   ═══════════════════════════════════════════════════════════════ */

/* ── Category tokens ────────────────────────────────────────── */
.bp, .bx, [data-cat] {
  --cat: #2F86E0; --cat-2: #1E6BD0; --cat-ink: #1E6BD0; --cat-soft: #EAF3FE; --cat-lt: #8CC2F7; --cat-rgb: 47, 134, 224;
}
[data-cat="ai-skills"] { --cat: #7A5CF0; --cat-2: #4F2FD0; --cat-ink: #5B3FD6; --cat-soft: #F1EDFE; --cat-lt: #B9A8FF; --cat-rgb: 122, 92, 240; }
[data-cat="marketing"] { --cat: #2F86E0; --cat-2: #1E6BD0; --cat-ink: #1E6BD0; --cat-soft: #EAF3FE; --cat-lt: #8CC2F7; --cat-rgb: 47, 134, 224; }
[data-cat="design"]    { --cat: #4FBE74; --cat-2: #24946A; --cat-ink: #23804A; --cat-soft: #E9F8EF; --cat-lt: #8FE0AE; --cat-rgb: 79, 190, 116; }
[data-cat="careers"]   { --cat: #F0883E; --cat-2: #D9561F; --cat-ink: #B5501A; --cat-soft: #FEF1E7; --cat-lt: #FFB884; --cat-rgb: 240, 136, 62; }

.bp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icf { width: 1em; height: 1em; display: block; flex-shrink: 0; }

/* ── Kinetic words ──────────────────────────────────────────── */
.kw { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .kw { animation: kwIn .95s var(--ease) both; animation-delay: calc(var(--i, 0) * 42ms + 90ms); }
}
@keyframes kwIn {
  from { opacity: 0; transform: translateY(.5em) rotate(2.5deg); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ═══════════════════════════ POST ═══════════════════════════ */
.bp-wrap { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }

/* Hero */
.bp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(7.25rem, 12vw, 9.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  background:
    radial-gradient(900px 480px at 92% -8%, rgba(var(--cat-rgb), .17), transparent 62%),
    radial-gradient(700px 380px at -6% 110%, rgba(79,190,116,.10), transparent 60%),
    var(--grad-sky);
  border-bottom: 1px solid var(--line);
}
.bp-hero .dot-grid { opacity: .45; }
.bp-ghost {
  position: absolute; right: -.04em; bottom: -.2em; z-index: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1; letter-spacing: -.055em;
  font-size: clamp(5rem, 14vw, 13rem); white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--cat-rgb), .22);
  pointer-events: none; user-select: none;
  transform: translate3d(var(--gx, 0px), 0, 0); will-change: transform;
}
@supports not (-webkit-text-stroke: 1px) { .bp-ghost { color: rgba(var(--cat-rgb), .06); } }
.bp-hero-inner .breadcrumb { margin-bottom: 1.6rem; }
.bp-hero-inner .breadcrumb .cur { max-width: 100%; overflow-wrap: anywhere; }
.bp-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 1.4rem; }
.bp-chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem .38rem .4rem; border-radius: var(--pill);
  background: var(--cat-soft); color: var(--cat-ink); border: 1px solid rgba(var(--cat-rgb), .28);
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.bp-chip .ci { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cat), var(--cat-2)); }
.bp-chip .ci .ic { width: 13px; height: 13px; }
.bp-chip:hover { background: var(--cat-ink); border-color: var(--cat-ink); color: #fff; transform: translateY(-1px); }
.bp-issue { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.bp-hero .post-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink);
  font-size: clamp(2.4rem, 1.35rem + 4.3vw, 4.4rem); line-height: 1.02; letter-spacing: -.038em;
  max-width: 19ch; text-wrap: balance;
}
.bp-dek { margin-top: 1.4rem; max-width: 46rem; font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); line-height: 1.6; color: var(--ink-2); }
.bp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem;
  margin-top: 2rem; padding-top: 1.4rem; max-width: 46rem;
  border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2);
}
.bp-author { display: inline-flex; align-items: center; gap: .75rem; line-height: 1.25; }
.bp-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(var(--cat-rgb), .55); transition: transform .4s var(--ease); }
.bp-author:hover img { transform: scale(1.06) rotate(-3deg); }
.bp-by { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bp-author strong { color: var(--ink); font-weight: 600; transition: color .2s; }
.bp-author:hover strong { color: var(--cat-ink); }
.bp-mi { display: inline-flex; align-items: center; gap: .45rem; }
.bp-mi .ic { width: 16px; height: 16px; color: var(--cat-ink); }

/* Three-column layout */
.bp-layout {
  display: grid; align-items: start;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 720px) minmax(250px, 1fr);
  grid-template-areas: "toc main rail";
  column-gap: clamp(1.75rem, 3vw, 3rem);
  padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(3rem, 6vw, 5rem);
}
.bp-main { grid-area: main; min-width: 0; }
.bp-toc  { grid-area: toc; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; max-width: 250px; padding-left: 8px; scrollbar-width: thin; }
.bp-rail { grid-area: rail; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1rem; max-width: 310px; justify-self: end; width: 100%; }

/* TOC */
.bp-toc summary {
  list-style: none; display: flex; align-items: center; gap: .55rem;
  padding-bottom: 1rem; cursor: default;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.bp-toc summary::-webkit-details-marker { display: none; }
.bp-toc summary .ic { width: 16px; height: 16px; color: var(--cat-ink); }
.bp-toc-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cat-ink); letter-spacing: .04em; }
.bp-toc .bp-toc-chev { display: none; }
.bp-toc nav { position: relative; padding-left: 1.15rem; }
.bp-toc-rail { position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bp-toc-rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--cat), var(--teal) 70%, var(--green)); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }
.bp-toc-list { display: flex; flex-direction: column; counter-reset: toc; }
.bp-toc-list a {
  position: relative; display: flex; gap: .55rem; padding: .45rem 0;
  font-size: .87rem; line-height: 1.4; color: var(--ink-3);
  transition: color .25s var(--ease);
}
.bp-toc-list li.n a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font: 600 .72rem/1.95 'Space Grotesk', sans-serif; color: var(--ink-3); opacity: .7; }
.bp-toc-list a::after {
  content: ''; position: absolute; left: calc(-1.15rem - 3px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--cat); box-shadow: 0 0 0 4px rgba(var(--cat-rgb), .18); transform: scale(0); transition: transform .35s var(--ease);
}
.bp-toc-list a:hover { color: var(--ink); }
.bp-toc-list a.is-active { color: var(--ink); font-weight: 600; }
.bp-toc-list a.is-active::before { color: var(--cat-ink); opacity: 1; }
.bp-toc-list a.is-active::after { transform: scale(1); }

/* Body */
.bp-body { --h2: clamp(1.55rem, 1.15rem + 1.35vw, 2.15rem); font-size: 1.0625rem; color: var(--ink-2); counter-reset: sec; }
.bp-lede { margin: 2.2rem 0 0; font-size: clamp(1.14rem, 1.04rem + .38vw, 1.3rem); line-height: 1.7; color: var(--ink); }
.bp-sec { counter-increment: sec; margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.bp-sec > p { margin: 1.1rem 0 0; line-height: 1.82; }
.bp-sec > p + p { margin-top: 1rem; }
.bp-sec > p a, .bp-sec li a, .bp-sec td a, .bp-lede a, .faq-a a, .tk p a { color: var(--cat-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Headings + hover anchors */
.h-wrap { position: relative; --hs: var(--h2, 2rem); }
.h-wrap h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink);
  font-size: var(--hs); line-height: 1.14; letter-spacing: -.03em; text-wrap: balance;
  scroll-margin-top: 104px;
}
.bp-sec > .h-wrap::before {
  content: counter(sec, decimal-leading-zero); display: flex; width: fit-content; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 1.6rem; padding: 0 .55rem; margin-bottom: .85rem; border-radius: var(--pill);
  font: 700 .74rem/1 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--cat-ink);
  background: var(--cat-soft); border: 1px solid rgba(var(--cat-rgb), .22);
}
.h-anchor {
  position: relative; float: left; width: 1.4rem; margin-left: -1.9rem; text-align: center;
  font: 600 var(--hs)/1.14 'Space Grotesk', sans-serif; color: var(--ink-3);
  opacity: 0; transition: opacity .2s, color .2s, transform .3s var(--ease);
}
.h-anchor::before { content: '#'; }
.h-wrap:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--cat-ink); transform: scale(1.1); }
.h-anchor.is-copied { opacity: 1; color: var(--green-2); }
.h-anchor.is-copied::after {
  content: 'Link copied'; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap;
  font: 600 .7rem/1 'Inter', sans-serif; letter-spacing: 0; color: #fff; background: var(--ink); padding: .42rem .6rem; border-radius: 6px;
}
.h-inline { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .45rem; }
.h-inline .h-anchor { float: none; margin: 0; width: auto; font-size: .9rem; line-height: 1; }

/* Lists */
.bp-ul, .bp-ol { display: flex; flex-direction: column; gap: .75rem; margin: 1.35rem 0 0; padding: 0; }
.bp-ul li, .bp-ol li { position: relative; list-style: none; line-height: 1.7; }
.bp-ul li { padding-left: 1.7rem; }
.bp-ul li::before {
  content: ''; position: absolute; left: .25rem; top: .62em; width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(135deg, var(--cat), var(--teal)); transform: rotate(45deg);
}
.bp-ol { counter-reset: ol; }
.bp-ol li { counter-increment: ol; padding-left: 2.75rem; min-height: 1.9rem; }
.bp-ol li::before {
  content: counter(ol); position: absolute; left: 0; top: .05em; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 .8rem/1 'Space Grotesk', sans-serif; color: var(--cat-ink);
  background: var(--cat-soft); border: 1px solid rgba(var(--cat-rgb), .28);
}

/* Tables */
.bp-table {
  margin: 1.6rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-sm);
  scrollbar-width: thin;
}
.bp-table:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.bp-table .post-table { width: 100%; min-width: calc(var(--cols, 2) * 150px); margin: 0; border: 0; border-radius: 0; border-collapse: collapse; font-size: .94rem; overflow: visible; }
.bp-table thead th {
  background: var(--ink); color: #fff; text-align: left; white-space: nowrap; border: 0;
  padding: .85rem 1.1rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.bp-table thead th:first-child { background: linear-gradient(120deg, var(--cat-2), var(--ink) 85%); }
.bp-table tbody th, .bp-table tbody td { padding: .95rem 1.1rem; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--line); line-height: 1.55; }
.bp-table tbody th { color: var(--ink); font-weight: 600; }
.bp-table tbody td { color: var(--ink-2); }
.bp-table tbody tr:nth-child(even) { background: var(--bg-2); }
.bp-table tbody tr { transition: background .2s; }
.bp-table tbody tr:hover { background: var(--cat-soft); }

/* TL;DR */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tldr {
  --ang: 0deg;
  position: relative; padding: 1.45rem 1.6rem 1.6rem; border-radius: var(--r-lg);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--ang), var(--cat), #34A79A, #4FBE74, #79B6F5, var(--cat)) border-box;
  box-shadow: 0 22px 44px -24px rgba(var(--cat-rgb), .55), var(--sh-sm);
}
.tldr::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 160px at 100% 0%, rgba(var(--cat-rgb), .08), transparent 70%);
}
.tldr-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 .85rem; }
.tldr-badge { font: 700 .76rem/1 'Space Grotesk', sans-serif; letter-spacing: .05em; color: #fff; background: linear-gradient(120deg, var(--cat), var(--cat-2)); padding: .45rem .65rem; border-radius: 8px; box-shadow: 0 6px 14px rgba(var(--cat-rgb), .35); }
.tldr-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bp-body .answer-box { position: relative; z-index: 1; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: clamp(1.06rem, 1rem + .25vw, 1.16rem); line-height: 1.72; font-weight: 500; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .tldr { animation: tldrSpin 9s linear infinite; }
}
@keyframes tldrSpin { to { --ang: 360deg; } }

/* Takeaways */
.bp-body .takeaways { margin: clamp(2.8rem, 5vw, 3.75rem) 0 0; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--line); }
.tk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.4rem 0 0; padding: 0; }
.takeaways .tk {
  list-style: none; display: flex; flex-direction: column; gap: .8rem; padding: 1.15rem 1.2rem 1.25rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.takeaways .tk:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(var(--cat-rgb), .3); }
.tk-top { display: flex; align-items: center; justify-content: space-between; }
.tk-n { font: 700 2.1rem/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(var(--cat-rgb), .75); }
@supports not (-webkit-text-stroke: 1px) { .tk-n { color: var(--cat-ink); } }
.tk-check { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cat), var(--teal)); box-shadow: 0 8px 16px rgba(var(--cat-rgb), .3); }
.takeaways .tk-check .ic { width: 16px; height: 16px; margin: 0; color: #fff; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 0; }
.takeaways .tk p { margin: 0; color: var(--ink); line-height: 1.55; font-size: .98rem; }
@media (prefers-reduced-motion: no-preference) {
  .bjs .takeaways:not(.is-in) .tk-check .ic { stroke-dashoffset: 24; }
  .tk-check .ic { transition: stroke-dashoffset .7s var(--ease); }
  .tk:nth-child(2) .tk-check .ic { transition-delay: .12s; }
  .tk:nth-child(3) .tk-check .ic { transition-delay: .24s; }
  .tk:nth-child(4) .tk-check .ic { transition-delay: .36s; }
  .tk:nth-child(n+5) .tk-check .ic { transition-delay: .48s; }
}

/* Course CTA (in article) */
.bp-body .post-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.6rem 2rem; align-items: stretch;
  margin: clamp(2.6rem, 5vw, 3.5rem) 0 0; padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--r-xl); background: var(--grad-ink); color: #fff; text-align: left; box-shadow: var(--sh-lg);
}
.bp-body .post-cta p { margin: 0; color: inherit; }
.pc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pc-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.pc-orb-1 { width: 360px; height: 360px; top: -160px; right: -90px; background: radial-gradient(circle, rgba(var(--cat-rgb), 1), transparent 70%); opacity: .6; }
.pc-orb-2 { width: 300px; height: 300px; bottom: -170px; left: -60px; background: radial-gradient(circle, #4FBE74, transparent 70%); opacity: .3; }
.pc-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); mask-image: linear-gradient(120deg, transparent 30%, #000); }
@media (prefers-reduced-motion: no-preference) {
  .pc-orb-1 { animation: pcDrift 14s ease-in-out infinite alternate; }
  .pc-orb-2 { animation: pcDrift 18s ease-in-out infinite alternate-reverse; }
}
@keyframes pcDrift { to { transform: translate(-60px, 50px) scale(1.15); } }
.bp-body .post-cta .pc-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FE0AE; }
.pc-kicker .ic { width: 16px; height: 16px; }
.bp-body .post-cta .pc-title { font: 700 clamp(1.7rem, 1.25rem + 1.7vw, 2.55rem)/1.06 'Space Grotesk', sans-serif; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.bp-body .post-cta .pc-text { margin-top: .85rem; max-width: 34rem; color: rgba(255,255,255,.72); line-height: 1.65; }
.pc-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0 0; padding: 0; }
.pc-facts li { list-style: none; font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.88); padding: .36rem .72rem; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.pc-actions .btn .ic { width: 17px; height: 17px; }
.pc-actions .btn:hover .ic { transform: translateX(3px); }
.pc-link { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 600; font-size: .95rem; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .2s, gap .3s var(--ease); }
.pc-link .ic { width: 15px; height: 15px; }
.pc-link:hover { border-color: #fff; gap: .6rem; }
.pc-ticket {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right;
  min-width: 10.5rem; padding-left: 1.8rem; border-left: 1px dashed rgba(255,255,255,.22);
}
.pc-from { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pc-price { margin-top: .35rem; font: 700 clamp(2rem, 1.6rem + 1.4vw, 2.7rem)/1 'Space Grotesk', sans-serif; letter-spacing: -.045em; background: linear-gradient(120deg, #8FE0AE, #79B6F5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-dur { margin-top: .45rem; font-size: .8rem; color: rgba(255,255,255,.6); }

/* FAQ accordions */
.bp-body .post-faq { margin-top: clamp(2.8rem, 5vw, 3.75rem); padding-top: 0; border-top: 0; }
.faq-list { margin-top: 1.3rem; border-top: 1px solid var(--line); }
.faq-d { border-bottom: 1px solid var(--line); scroll-margin-top: 104px; }
.faq-d summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.3rem .15rem; cursor: pointer; border-radius: 8px; }
.faq-d summary::-webkit-details-marker { display: none; }
.faq-q { margin: 0; font: 600 1.08rem/1.42 'Space Grotesk', sans-serif; letter-spacing: -.012em; color: var(--ink); transition: color .2s; }
.faq-d summary:hover .faq-q, .faq-d:target .faq-q { color: var(--cat-ink); }
.faq-ic { position: relative; flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .45s var(--ease), background .3s, border-color .3s; }
.faq-ic::before, .faq-ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: var(--ink-2); transition: transform .45s var(--ease), background .3s; }
.faq-ic::after { transform: rotate(90deg); }
.faq-d summary:hover .faq-ic { border-color: rgba(var(--cat-rgb), .5); }
.faq-d[open]:not(.is-closing) .faq-ic { transform: rotate(180deg); background: linear-gradient(135deg, var(--cat), var(--cat-2)); border-color: transparent; }
.faq-d[open]:not(.is-closing) .faq-ic::before, .faq-d[open]:not(.is-closing) .faq-ic::after { background: #fff; }
.faq-d[open]:not(.is-closing) .faq-ic::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 3.4rem 1.4rem .15rem; line-height: 1.75; color: var(--ink-2); }

/* Author box */
.author-box {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start;
  margin-top: clamp(2.8rem, 5vw, 3.75rem); padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(140deg, #fff 40%, var(--bg-2));
}
.author-box::before { content: ''; position: absolute; width: 260px; height: 260px; right: -110px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--cat-rgb), .16), transparent 70%); pointer-events: none; }
.author-box > img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--cat-rgb), .55), var(--sh-md); }
.ab-main { position: relative; }
.author-box .h-wrap h2.ab-kicker { font: 700 .7rem/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ab-name { margin: .35rem 0 0; font: 700 1.4rem/1.2 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.bp-body .ab-name a { color: inherit; text-decoration: none; }
.bp-body .ab-name a:hover { color: var(--cat-ink); }
.ab-role { margin: .25rem 0 0; font-size: .9rem; font-weight: 600; color: var(--cat-ink); }
.ab-bio { margin: .85rem 0 0; line-height: 1.7; color: var(--ink-2); font-size: .98rem; }
.ab-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .88rem; font-weight: 600; color: var(--ink); transition: gap .3s var(--ease), color .2s; }
.ab-more .ic { width: 15px; height: 15px; }
.ab-more:hover { gap: .65rem; color: var(--cat-ink); }

/* Right rail */
.rail-card {
  position: relative; overflow: hidden; isolation: isolate; padding: 1.45rem;
  border-radius: var(--r-xl); border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(155deg, rgba(var(--cat-rgb), .6), rgba(52,167,154,.35) 45%, rgba(10,18,48,.08)) border-box;
  box-shadow: var(--sh-md);
}
.rail-card::before { content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--cat-rgb), .22), transparent 70%); }
.rc-kicker { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rc-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cat), var(--cat-2)); box-shadow: 0 8px 18px rgba(var(--cat-rgb), .32); }
.rc-ic .ic { width: 19px; height: 19px; }
.rc-name { margin: 1rem 0 0; font: 700 1.2rem/1.2 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rc-price { display: flex; align-items: baseline; gap: .45rem; margin: .7rem 0 0; font: 700 1.65rem/1 'Space Grotesk', sans-serif; letter-spacing: -.035em; color: var(--ink); }
.rc-price small { font: 600 .68rem/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rc-facts { display: flex; flex-direction: column; gap: .5rem; margin: 1.1rem 0 1.3rem; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.rc-facts li { list-style: none; display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.rc-facts .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--green-2); stroke-width: 2.4; }
.rail-card .btn { white-space: normal; text-align: center; }
.rail-card .btn .ic { width: 16px; height: 16px; }
.rc-apply { display: block; margin-top: .75rem; text-align: center; font-size: .85rem; font-weight: 600; color: var(--ink-2); transition: color .2s; }
.rc-apply:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.rail-share { padding: 1.05rem 1.2rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.rs-title { margin: 0 0 .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rs-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.rs-btn {
  position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s;
}
.rs-btn .ic, .rs-btn .icf { width: 17px; height: 17px; }
.rs-btn:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 20px rgba(10,18,48,.18); }
.rs-copy { display: none; }
.bjs .rs-copy { display: grid; }
.rs-copy.is-done { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.rs-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); white-space: nowrap; pointer-events: none;
  font-size: .7rem; font-weight: 600; color: #fff; background: var(--ink); padding: .35rem .55rem; border-radius: 6px;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s, transform .3s var(--ease);
}
.rs-copy.is-done .rs-tip { opacity: 1; transform: translate(-50%, 0); }

/* Previous / next */
.bp-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pn {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.pn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, var(--cat-soft), rgba(255,255,255,0) 75%); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pn-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pn-next::before { transform-origin: right; background: linear-gradient(250deg, var(--cat-soft), rgba(255,255,255,0) 75%); }
.pn:hover { border-color: rgba(var(--cat-rgb), .35); box-shadow: var(--sh-md); transform: translateY(-3px); }
.pn:hover::before { transform: scaleX(1); }
.pn-lbl { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pn-lbl .ic { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.pn-prev:hover .pn-lbl .ic { transform: translateX(-4px); }
.pn-next:hover .pn-lbl .ic { transform: translateX(4px); }
.pn-title { font: 700 1.14rem/1.3 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.pn-cat { font-size: .78rem; font-weight: 600; color: var(--cat-ink); }

/* Related */
.bp-related { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.bp-rel-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.bp-rel-head .h-wrap { --hs: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
.bp-rel-head .h-wrap h2 { letter-spacing: -.04em; line-height: 1.02; }
.bp-all { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--ink); padding: .6rem 1rem; border-radius: var(--pill); border: 1px solid var(--line-2); background: #fff; transition: background .25s, color .25s, border-color .25s, gap .3s var(--ease); }
.bp-all .ic { width: 15px; height: 15px; }
.bp-all:hover { background: var(--ink); color: #fff; border-color: var(--ink); gap: .65rem; }

/* ═════════════════════ CARDS + COVER ART ═════════════════════ */
.bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; }
.bx-grid > li { list-style: none; display: flex; min-width: 0; }
.bc {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.bc:hover { transform: translateY(-6px); border-color: rgba(var(--cat-rgb), .3); box-shadow: 0 28px 54px -26px rgba(var(--cat-rgb), .55), var(--sh-md); }
.bc-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.25rem 1.35rem 1.35rem; }
.bc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0; font-size: .74rem; color: var(--ink-3); }
.bc-cat { font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cat-ink); }
.bc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.bc-title { margin: 0; font: 700 1.16rem/1.28 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bc-title a { transition: color .25s; }
.bc-title a::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bc:hover .bc-title a { color: var(--cat-ink); }
.bc-desc { flex: 1; margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-foot { display: flex; align-items: center; justify-content: space-between; margin: .35rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
.bc-go { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); }
.bc-go .ic { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.bc:hover .bc-go .ic { transform: translateX(4px); }
@supports selector(:has(a)) {
  .bc-title a:focus-visible, .bf-title a:focus-visible, .qa-q a:focus-visible { outline: none; }
  .bc:has(.bc-title a:focus-visible), .bf:has(.bf-title a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
  .qa:has(.qa-q a:focus-visible) { outline: 2px solid #8FE0AE; outline-offset: -5px; }
}

.ca {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.26), transparent 55%),
    linear-gradient(140deg, var(--cat), var(--cat-2));
}
.ca::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(380px circle at var(--mx, 70%) var(--my, 10%), rgba(255,255,255,.28), transparent 45%);
}
.bc:hover .ca::after, .bf:hover .ca::after { opacity: 1; }
.ca-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 0; transform-origin: 60% 40%; transition: transform 1.4s var(--ease); }
.bc:hover .ca-svg, .bf:hover .ca-svg { transform: scale(1.08) rotate(-1.5deg); }
.ca-svg .l { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1.3; }
.ca-svg .g { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 3 7; }
.ca-svg .f { fill: rgba(255,255,255,.16); }
.ca-svg .d { fill: rgba(255,255,255,.72); }
.ca-svg .h { fill: #fff; }
.ca-svg .s { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ca-ic { position: absolute; z-index: 2; top: 1rem; left: 1rem; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .5s var(--ease); }
.ca-ic .ic { width: 20px; height: 20px; }
.bc:hover .ca-ic, .bf:hover .ca-ic { transform: rotate(-8deg) scale(1.06); }
.ca-cat { position: absolute; z-index: 2; top: 1.15rem; right: 1rem; padding: .32rem .62rem; border-radius: var(--pill); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(6,11,34,.26); border: 1px solid rgba(255,255,255,.26); }
.ca-no { position: absolute; z-index: 2; left: 1.05rem; bottom: 1rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ca-num {
  position: absolute; z-index: 2; right: .85rem; bottom: -.16em;
  font: 700 clamp(4rem, 3rem + 3vw, 5.6rem)/1 'Space Grotesk', sans-serif; letter-spacing: -.055em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.9);
  transition: transform .7s var(--ease), color .45s var(--ease);
}
@supports not (-webkit-text-stroke: 1px) { .ca-num { color: rgba(255,255,255,.35); } }
.bc:hover .ca-num, .bf:hover .ca-num { transform: translateY(-.1em); color: rgba(255,255,255,.18); }

/* ═══════════════════════════ INDEX ═══════════════════════════ */
.bx-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(7.5rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 3.5rem); background: var(--grad-sky); }
.bx-hero .dot-grid { opacity: .55; }
.bx-hero .blob { opacity: .4; }
.bx-blob-1 { width: 520px; height: 520px; top: -180px; right: -120px; background: radial-gradient(circle, #79B6F5, transparent 70%); }
.bx-blob-2 { width: 420px; height: 420px; bottom: -220px; left: 18%; background: radial-gradient(circle, #B9A8FF, transparent 70%); opacity: .28; }
.bx-hero-inner { position: relative; z-index: 1; }
.bx-hero .eyebrow { margin-bottom: 1.2rem; }
.bx-title {
  margin: 0; max-width: 15ch; text-wrap: balance;
  font: 700 clamp(2.85rem, 1.4rem + 6.6vw, 7rem)/.98 'Space Grotesk', sans-serif; letter-spacing: -.048em; color: var(--ink);
}
.bx-title .serif { color: var(--blue); letter-spacing: -.02em; font-size: 1.04em; }
.bx-mark { position: relative; white-space: nowrap; }
.bx-swash { position: absolute; left: -2%; bottom: -.04em; width: 104%; max-width: none; height: .26em; overflow: visible; pointer-events: none; }
.bx-swash path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .bx-swash path { animation: swash 1.1s var(--ease) .75s both; }
}
@keyframes swash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.bx-hero-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem 3rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.bx-lede { max-width: 36rem; margin: 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height: 1.65; color: var(--ink-2); }
.bx-stats { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin: 0; }
.bx-stats div { display: flex; flex-direction: column-reverse; gap: .35rem; }
.bx-stats dd { margin: 0; font: 700 1.6rem/1 'Space Grotesk', sans-serif; letter-spacing: -.035em; color: var(--ink); }
.bx-stats dt { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.bx-tools { display: none; }
.bjs .bx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.bx-search { position: relative; flex: 1 1 320px; max-width: 520px; }
.bx-search .ic { position: absolute; left: 1.15rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-3); pointer-events: none; transition: color .2s; }
.bx-search input {
  width: 100%; height: 56px; padding: 0 3.2rem 0 3.1rem; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: inherit; font-size: 1rem; color: var(--ink); box-shadow: var(--sh-md); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .25s;
}
.bx-search input::placeholder { color: var(--ink-3); }
.bx-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft), var(--sh-md); background: #fff; }
.bx-search:focus-within .ic { color: var(--blue); }
.bx-search kbd { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font: 600 .74rem/1 'Inter', sans-serif; color: var(--ink-3); background: #fff; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: .28rem .48rem; transition: opacity .2s; }
.bx-search input:focus ~ kbd, .bx-search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
@media (hover: none) { .bx-search kbd { display: none; } }
.bx-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bx-chip {
  display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .9rem 0 1rem; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.9); font-size: .88rem; font-weight: 600; color: var(--ink-2);
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.bx-chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.bx-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.bx-chip .n { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); background: var(--bg-2); border-radius: var(--pill); padding: .16rem .46rem; transition: background .25s, color .25s; }
.bx-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 22px rgba(10,18,48,.18); }
.bx-chip[data-cat][aria-pressed="true"] { background: var(--cat-ink); border-color: var(--cat-ink); box-shadow: 0 10px 22px rgba(var(--cat-rgb), .32); }
.bx-chip[aria-pressed="true"] .n { background: rgba(255,255,255,.18); color: #fff; }
.bx-chip[aria-pressed="true"] .dot { background: #fff; }

/* Topic marquee */
.bx-marquee {
  position: relative; overflow: hidden; padding: clamp(1.1rem, 2.4vw, 1.9rem) 0; background: #fff; border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bx-mq-row { display: flex; width: max-content; }
.bx-mq-row + .bx-mq-row { margin-top: .35rem; }
.bx-mq-row span {
  display: inline-flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); padding-right: clamp(1.1rem, 2.4vw, 2.1rem);
  font: 700 clamp(1.7rem, .9rem + 3.3vw, 3.5rem)/1.12 'Space Grotesk', sans-serif; letter-spacing: -.04em; color: var(--ink); white-space: nowrap;
}
.bx-mq-row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.3px rgba(10,18,48,.38); }
@supports not (-webkit-text-stroke: 1px) { .bx-mq-row span:nth-child(even) { color: var(--ink-3); } }
.bx-mq-row span::after { content: ''; flex: 0 0 auto; width: .36em; height: .36em; background: var(--grad); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (prefers-reduced-motion: no-preference) {
  .bx-mq-row { animation: bxScroll 52s linear infinite; }
  .bx-mq-row + .bx-mq-row { animation-duration: 64s; animation-direction: reverse; }
  .bx-marquee:hover .bx-mq-row { animation-play-state: paused; }
}
@keyframes bxScroll { to { transform: translateX(-50%); } }

/* Featured */
.bx-featured { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.bx-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.2rem; font: 700 .74rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.bx-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.bf {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border-radius: var(--r-xl); background: var(--grad-ink); color: #fff; box-shadow: var(--sh-lg);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.bf:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(var(--cat-rgb), .55), var(--sh-lg); }
.bf .ca-xl { aspect-ratio: auto; min-height: 100%; }
.ca-xl .ca-num { font-size: clamp(7rem, 4rem + 9vw, 13rem); -webkit-text-stroke-width: 2px; }
.ca-xl .ca-ic { top: 1.4rem; left: 1.4rem; width: 52px; height: 52px; border-radius: 15px; }
.ca-xl .ca-ic .ic { width: 26px; height: 26px; }
.ca-xl .ca-cat { top: 1.7rem; right: 1.4rem; }
.ca-xl .ca-no { left: 1.45rem; bottom: 1.4rem; }
.bf-body { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 4vw, 3rem); }
.bf-body::before { content: ''; position: absolute; z-index: -1; width: 380px; height: 380px; right: -140px; bottom: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--cat-rgb), .5), transparent 70%); filter: blur(30px); opacity: .55; }
.bf-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0; font-size: .8rem; color: rgba(255,255,255,.62); }
.bf-new { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: #8FE0AE; padding: .32rem .6rem; border-radius: var(--pill); }
.bf-cat { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cat-lt); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); padding: .3rem .6rem; border-radius: var(--pill); }
.bf-title { margin: 0; font: 700 clamp(1.75rem, 1.15rem + 2.2vw, 3rem)/1.04 'Space Grotesk', sans-serif; letter-spacing: -.038em; color: #fff; text-wrap: balance; }
.bf-title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.bf-desc { margin: 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.bf-answer { position: relative; margin: 0; padding: .95rem 1.1rem; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-size: .93rem; line-height: 1.65; }
.bf-answer span { display: block; margin-bottom: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FE0AE; }
.bf-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); }
.bf-author { display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; color: rgba(255,255,255,.75); }
.bf-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.bf-go { display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 1.15rem; border-radius: 12px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; transition: gap .3s var(--ease); }
.bf-go .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.bf:hover .bf-go .ic { transform: translateX(4px); }

/* All guides */
.bx-all { padding: clamp(3rem, 6vw, 5rem) 0; }
.bx-all-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.bx-h2 { margin: 0; font: 700 clamp(2rem, 1.35rem + 2.5vw, 3.2rem)/1.02 'Space Grotesk', sans-serif; letter-spacing: -.042em; color: var(--ink); }
.bx-count { margin: .55rem 0 0; font-size: .9rem; color: var(--ink-3); }
.bx-rss { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: border-color .2s, color .2s, background .2s; }
.bx-rss .ic { width: 15px; height: 15px; color: #F0883E; }
.bx-rss:hover { border-color: var(--ink); color: var(--ink); }
.bx.is-filtering .bx-marquee, .bx.is-filtering .bx-featured { display: none; }
.bx-grid > li[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .bx-grid > li.bc-pop { animation: bcPop .55s var(--ease) both; }
}
@keyframes bcPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.bx-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; text-align: center; border: 1.5px dashed var(--line-2); border-radius: var(--r-xl); color: var(--ink-2); }
.bx-empty p { margin: 0; font: 600 1.15rem/1.4 'Space Grotesk', sans-serif; color: var(--ink); }

/* Most asked questions (dark block) */
.bx-faq { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--grad-ink); color: #fff; }
.bx-faq .dot-grid { background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.2px); }
.bx-faq::before { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; top: -220px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(122,92,240,.45), transparent 70%); filter: blur(40px); }
.bx-faq .container { position: relative; z-index: 1; }
.bx-faq-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 1rem 3rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.bx-faq-head .bx-h2 { color: #fff; }
.bx-faq-head .serif { color: #8FE0AE; letter-spacing: -.01em; }
.bx-faq-head > p { margin: 0; max-width: 30rem; color: rgba(255,255,255,.66); line-height: 1.7; }
.bx-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-xl); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.bx-qa > li { list-style: none; display: flex; min-width: 0; }
.qa { position: relative; display: flex; flex-direction: column; gap: .75rem; width: 100%; padding: clamp(1.35rem, 2.8vw, 2rem); background: #0A1433; transition: background .35s var(--ease); }
.qa::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--cat), var(--cat-lt)); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.qa:hover { background: #0F1D48; }
.qa:hover::before { transform: scaleY(1); }
.qa-top { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.qa-n { font-family: 'Space Grotesk', sans-serif; font-size: .8rem; letter-spacing: .04em; color: var(--cat-lt); }
.qa-q { margin: 0; font: 600 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.3 'Space Grotesk', sans-serif; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.qa-q a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.qa-a { flex: 1; margin: 0; font-size: .93rem; line-height: 1.65; color: rgba(255,255,255,.68); }
.qa-from { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; font-weight: 600; color: var(--cat-lt); }
.qa-from .ic { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.qa:hover .qa-from .ic { transform: translateX(4px); }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width: 1099.98px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "main" "rail"; row-gap: 2rem; max-width: 820px; }
  .bp-hero-inner, .bp-pn { max-width: 820px; }
  .bp-toc, .bp-rail { position: static; max-height: none; overflow: visible; max-width: none; }
  .bp-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; justify-self: stretch; }
  .bp-toc { padding-left: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); }
  .bp-toc summary { padding: 1rem 1.15rem; cursor: pointer; color: var(--ink); font-size: .74rem; }
  .bp-toc .bp-toc-chev { display: block; color: var(--ink-3); transition: transform .35s var(--ease); }
  .bp-toc[open] .bp-toc-chev { transform: rotate(180deg); }
  .bp-toc nav { margin: 0 1.15rem 1.1rem 1.25rem; }
  .h-anchor { float: right; margin: 0 0 0 .6rem; width: 1.2rem; opacity: .35; }
  .h-inline .h-anchor { float: none; margin: 0; }
  .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bf { grid-template-columns: minmax(0, 1fr); }
  .bf .ca-xl { aspect-ratio: 16 / 9; min-height: 0; }
  .bx-faq-head, .bx-qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .bp-rail { grid-template-columns: minmax(0, 1fr); }
  .bx-grid { grid-template-columns: minmax(0, 1fr); }
  .bp-pn { grid-template-columns: minmax(0, 1fr); }
  .pn-next { grid-column: auto; }
  .tk-list { grid-template-columns: minmax(0, 1fr); }
  .bp-body .post-cta { grid-template-columns: minmax(0, 1fr); }
  .pc-ticket { align-items: flex-start; text-align: left; min-width: 0; padding: 1.2rem 0 0; border-left: 0; border-top: 1px dashed rgba(255,255,255,.22); }
  .author-box { grid-template-columns: minmax(0, 1fr); }
  .author-box > img { width: 80px; height: 80px; }
  .faq-a p { padding-right: .15rem; }
  .bx-stats { gap: 1rem 1.8rem; }
  .bx-search { flex-basis: 100%; max-width: none; }
}
@media (max-width: 420px) {
  .bp-meta { gap: .8rem 1.1rem; }
  .bx-chip { height: 38px; padding: 0 .75rem 0 .85rem; font-size: .84rem; }
  .bp-body .post-cta .pc-actions .btn { width: 100%; }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .kw, .tldr, .pc-orb, .bx-mq-row, .bx-swash path, .bx-grid > li.bc-pop { animation: none !important; }
  .bp-ghost { transform: none; }
  .bc:hover, .bf:hover, .pn:hover, .takeaways .tk:hover { transform: none; }
  .bc:hover .ca-svg, .bf:hover .ca-svg, .bc:hover .ca-num, .bf:hover .ca-num { transform: none; }
}