/* The Frame — blog surfaces */
[data-bf]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-bf].bf-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-bf]{opacity:1;transform:none}}
button.u{background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* covers */
.bf-cover{position:relative;overflow:hidden;aspect-ratio:16/9;background:#1a1716}
.bf-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.bf-cover img.in{opacity:1;transform:scale(1)}
a:hover .bf-cover img.in{transform:scale(1.035)}
.bf-ph{position:absolute;inset:0;background:linear-gradient(135deg,#1d1916,#121010)}

/* index header */
.bf-headx{padding-top:clamp(150px,15vw,220px);padding-bottom:clamp(40px,5vw,72px)}
.bf-title{font-size:clamp(44px,7vw,104px);margin:18px 0 0;letter-spacing:.01em}
.bf-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(32px,4vw,56px)}
.bf-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bf-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.bf-chip:hover{border-color:rgba(255,255,255,.5);color:var(--fg)}
.bf-chip[aria-pressed="true"]{border-color:var(--fg);color:#0F0F0F;background:var(--fg)}

/* lead + rows */
.bf-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(32px,4vw,56px) 0 clamp(64px,7vw,104px);border-top:1px solid var(--line)}
.bf-lead-t{display:flex;flex-direction:column;gap:20px}
.bf-h{font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.01em;margin:0;text-wrap:balance;transition:color .4s var(--ease)}
.bf-h-lg{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.02em}
a:hover .bf-h,a:hover .bf-card-t{color:var(--fg)}
a:hover .bf-read{color:var(--red)}
.bf-ex{font-size:16px;line-height:1.7;color:#BDBDBD;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bf-meta{display:flex;flex-wrap:wrap;gap:8px 20px}
.bf-read{margin-top:8px;transition:color .4s var(--ease)}
.bf-row{display:grid;grid-template-columns:72px minmax(0,1fr) 240px;gap:clamp(16px,3vw,56px);align-items:start;padding:44px 0;border-top:1px solid var(--line)}
.bf-row:last-child{border-bottom:1px solid var(--line)}
.bf-row-t{display:flex;flex-direction:column;gap:14px;max-width:720px}
.bf-row .bf-cover{aspect-ratio:4/3}
.bf-more-wrap{display:flex;justify-content:center;padding:56px 0 0}
.bf-empty{font-size:18px;color:#BDBDBD;padding:64px 0;border-top:1px solid var(--line);margin:0}
.bf-err{color:#E2E2E2}
@media (max-width:860px){
  .bf-lead{grid-template-columns:1fr}
  .bf-row{grid-template-columns:1fr;gap:18px;padding:36px 0}
  .bf-row .bf-cover{order:-1;aspect-ratio:16/9}
  .bf-num{display:none}
}

/* skeletons */
.bf-skel .bf-cover{animation:bfpulse 1.6s ease-in-out infinite}
.bf-lines{display:flex;flex-direction:column;gap:14px}
.bf-lines span,.bf-row.bf-skel>span{display:block;height:14px;border-radius:2px;background:#1c1a19;animation:bfpulse 1.6s ease-in-out infinite}
.bf-lines span:first-child{width:30%}.bf-lines span:nth-child(2){width:90%;height:28px}.bf-lines span:nth-child(3){width:70%}
@keyframes bfpulse{50%{opacity:.45}}

/* cards (home + related) */
.bf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:40px 24px}
.bf-card{display:flex;flex-direction:column;gap:16px}
.bf-card-t{font-size:clamp(18px,1.5vw,22px);line-height:1.25;font-weight:500;letter-spacing:-.005em;text-wrap:balance;transition:color .4s var(--ease)}

/* post */
.bp-head{padding-top:clamp(140px,14vw,200px);padding-bottom:clamp(48px,6vw,88px)}
.bp-back{display:inline-block;margin-bottom:clamp(40px,5vw,72px)}
.bp-eyebrow{margin:0 0 24px}
.bp-title{font-size:clamp(34px,4.8vw,72px);font-weight:500;line-height:1.04;letter-spacing:-.03em;max-width:1120px;margin:0;text-wrap:balance}
.bp-sub{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:32px 64px;align-items:end;margin-top:clamp(32px,4vw,56px)}
.bp-ex{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:#A9A9A9;margin:0;max-width:760px}
.bp-meta{justify-content:flex-end;text-align:right}
@media (max-width:860px){.bp-sub{grid-template-columns:1fr}.bp-meta{justify-content:flex-start;text-align:left}}
.bp-band{position:relative;overflow:hidden;height:clamp(320px,56vw,86vh)}
.bp-band img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;opacity:0;transform:translateY(var(--py,0%)) scale(1.04);transition:opacity 1.2s var(--ease)}
.bp-band img.in{opacity:1}
@media (max-width:700px){.bp-band{height:auto;aspect-ratio:4/3;max-height:45vh}}

.prose{max-width:calc(680px + 2 * var(--gut));margin:0 auto;padding:clamp(72px,9vw,128px) var(--gut) clamp(56px,6vw,88px)}
.prose>*:first-child{margin-top:0}
.prose p{font-size:clamp(17px,1.2vw,19px);line-height:1.8;color:#D4D4D4;margin:0 0 1.3em}
.prose h2{font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--fg);margin:2.8em 0 1em;text-wrap:balance}
.prose h3{font-family:"Azeret Mono",ui-monospace,monospace;font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:2.6em 0 1.1em}
.prose h2+h3{margin-top:1.4em}
.prose p:has(> strong:only-child){margin:1.9em 0 .45em}
.prose strong,.prose b{color:#fff;font-weight:600}
.prose em{color:#e8e8e8}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.prose a:hover{color:var(--red);text-decoration-color:var(--red)}
.prose ul,.prose ol{list-style:none;padding:0;margin:.4em 0 1.8em;border-top:1px solid var(--line);counter-reset:li}
.prose li{position:relative;padding:16px 0 16px 36px;border-bottom:1px solid var(--line)}
.prose li p{margin:0}
.prose ul>li::before{content:"—";position:absolute;left:0;top:16px;color:var(--red);font-size:17px;line-height:1.8}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:"Azeret Mono",monospace;font-size:11px;color:var(--red)}
.prose blockquote{margin:2em 0;padding:0 0 0 24px;border-left:1px solid var(--red)}
.prose blockquote p{font-size:clamp(20px,1.8vw,26px);line-height:1.4;color:var(--fg)}
.prose hr{border:0;border-top:1px solid var(--line);margin:3em 0}
.prose img{width:100%;height:auto;margin:2em 0}

.bp-topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:calc(680px + 2 * var(--gut));padding-bottom:clamp(64px,7vw,104px)}
.bp-topics .mono.mut{margin-right:8px}
.bp-call{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);border-top:1px solid var(--line)}
.bp-call-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:16px;align-items:center;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bp-call-row span:last-child{justify-self:end;font-size:22px}
.bp-related{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(80px,9vw,140px);border-top:1px solid var(--line)}
.bp-rel-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:40px}
.bp-cta{padding:clamp(80px,9vw,120px) var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
/* Monument Extended for titles */
.bf-h,.bf-card-t,.bp-title,.prose h2{font-family:'Monument Extended',Archivo,sans-serif;font-weight:300;letter-spacing:0}
.bp-title{font-size:clamp(28px,3.8vw,58px);line-height:1.12}