/* ==========================================================
   Black Lion Digital · "The hallmark" v3 · Blog (index + the seven posts)
   Page-only. main.css untouched. The .cards / .card-l block is copied from
   about.css (the router), as every chapter page copies its shared blocks.
   ========================================================== */

/* ---------- 01 · cover: a ghost column of type, a gold reading rule ---------- */
.cover--blog,.cover--post{background:#070707}
.cover__type{position:absolute;top:50%;right:9vw;width:min(42vw,620px);height:auto;transform:translateY(-52%);overflow:visible;animation:blogIn 2s var(--ease) .1s both}
.cover__typeDrift{animation:typeDrift 48s var(--io) infinite alternate}
.cover__typeRule{animation:typeRead 39s steps(26,end) infinite;transform-origin:0 0}
@keyframes blogIn{from{opacity:0;transform:translateY(-49%)}to{opacity:1;transform:translateY(-52%)}}
@keyframes typeDrift{from{transform:translateY(0)}to{transform:translateY(-28px)}}
@keyframes typeRead{from{transform:translateY(0)}to{transform:translateY(676px)}}
.cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;opacity:0;animation:coverImgIn 1.8s var(--ease) .1s forwards}
@keyframes coverImgIn{to{opacity:.94}}
.cover--blog .cover__wash,.cover--post .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,.05) 26%,rgba(7,7,7,.05) 50%,rgba(7,7,7,.94) 100%),linear-gradient(90deg,rgba(7,7,7,.96) 0%,rgba(7,7,7,.72) 36%,rgba(7,7,7,.18) 58%,rgba(7,7,7,0) 74%)}
.cover--post .cover__h1{font-size:clamp(36px,4.8vw,76px);max-width:24ch;line-height:.98}
.cover--post .cover__sub{font-size:15px;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.post__by{font-weight:600;color:#fff}
.cover__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .cover__type{right:auto;left:50%;top:46%;width:min(88vw,520px);transform:translate(-50%,-50%);opacity:.42}
  .cover__img{object-position:58% 40%}
  .cover--post .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.6) 0%,rgba(7,7,7,.25) 30%,rgba(7,7,7,.55) 55%,rgba(7,7,7,.97) 100%)}
  @keyframes blogIn{from{opacity:0;transform:translate(-50%,-47%)}to{opacity:.42;transform:translate(-50%,-50%)}}
  .cover--post .cover__h1{font-size:clamp(30px,8.6vw,52px);max-width:none}
}
@media (prefers-reduced-motion:reduce){.cover__typeDrift,.cover__typeRule,.cover__type{animation:none}.cover__img{animation:none;opacity:.94}}

/* ---------- 02 · the posts grid (index) and 03 · more from the blog (posts) ---------- */
.posts{position:relative;background:var(--paper);padding:var(--section) 0;border-top:1px solid var(--line)}
.more{position:relative;background:var(--paper-2);padding:var(--section) 0;border-top:1px solid var(--line)}
.posts__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end}
.posts__head .h2--xl{max-width:11ch}
.posts__intro{max-width:44ch;font-weight:300;color:var(--ink-2);padding-bottom:8px}
/* the editorial list: one row per post, number, 4:3 still, eyebrow, title, opening, read time (Jack, note 63) */
.postlist{margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--line-2)}
.post{border-bottom:1px solid var(--line-2)}
.post__link{display:grid;grid-template-columns:56px minmax(0,320px) minmax(0,1fr) auto;gap:clamp(18px,2.8vw,44px);align-items:center;padding:clamp(22px,3vh,34px) 0;color:var(--ink)}
.post__n{font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--gold-text);align-self:start;padding-top:6px}
.post__fig{margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0B0B0B;box-shadow:0 22px 44px -26px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.06)}
.post__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post__body{display:flex;flex-direction:column;gap:10px;min-width:0}
.post__body i{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.post__body b{font-weight:800;font-size:clamp(22px,2.1vw,32px);letter-spacing:-.03em;line-height:1.05;color:var(--ink);max-width:18ch;text-wrap:balance;transition:color .4s}
.post__x{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:52ch}
.post__read{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap;align-self:center}
.post__arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.post__link:hover .post__fig img,.post__link:focus-visible .post__fig img{transform:scale(1.045)}
.post__link:hover .post__body b,.post__link:focus-visible .post__body b{color:var(--gold-text)}
.post__link:hover .post__arrow,.post__link:focus-visible .post__arrow{transform:translateX(4px)}
.post__link:focus-visible{outline-offset:-3px}
.more .post__link{grid-template-columns:56px minmax(0,240px) minmax(0,1fr) auto}
.more .post__body b{font-size:clamp(20px,1.7vw,26px)}

/* ---------- 02 · the article: sticky dateline + a measured reading column ---------- */
.article{position:relative;background:var(--paper);padding:var(--section) 0;border-top:1px solid var(--line)}
.article__grid{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);gap:clamp(32px,6vw,120px);align-items:start}
.article__aside{position:sticky;top:calc(var(--nav-h) + 24px)}
.article__meta{display:grid;gap:0;border-top:1px solid var(--line-2);max-width:300px}
.article__meta>div{display:grid;grid-template-columns:1fr;padding:14px 0;border-bottom:1px solid var(--line-2)}
.article__meta dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.article__meta dd{margin:4px 0 0;font-weight:500;font-size:15px;color:var(--ink)}
.article__back{display:inline-flex;align-items:center;gap:10px;margin-top:22px;min-height:44px;font-weight:500;color:var(--gold-text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,161,26,.5)}
.chev--back{transform:rotate(-90deg)}
.prose{max-width:68ch;color:var(--body)}
.article__title{font-weight:800;font-size:clamp(30px,3.4vw,50px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);margin-bottom:clamp(28px,3.5vh,44px);padding-bottom:clamp(22px,3vh,36px);border-bottom:1px solid var(--line-2);text-wrap:balance}
.prose p{font-size:clamp(17px,1.15vw,19px);line-height:1.68;font-weight:300;margin:0 0 1.25em}
.prose__lede{font-size:clamp(19px,1.35vw,22px);line-height:1.55;color:var(--ink-2);font-weight:400}
.prose__h{font-weight:800;font-size:clamp(24px,2vw,32px);line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:clamp(40px,5vh,56px) 0 18px;text-wrap:balance}
.prose__h::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:16px}
.prose__list{margin:0 0 1.4em;padding:0;display:grid;gap:10px}
.prose__list li{position:relative;padding-left:26px;font-size:clamp(16.5px,1.1vw,18.5px);line-height:1.6;font-weight:300}
.prose__list li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:10px;border-radius:3px;background:var(--gold);transform:rotate(45deg) scale(.8)}
.prose__end{display:flex;align-items:flex-start;gap:16px;margin:clamp(40px,5vh,56px) 0 0;padding-top:clamp(22px,3vh,32px);border-top:1px solid var(--line-2);font-size:15.5px;line-height:1.55;color:var(--muted)}
.prose__end a{color:var(--gold-text);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prose__mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gold-tint)}
.prose__mark img{width:26px;height:26px}

@media (max-width:1024px){
  .posts__head{grid-template-columns:1fr;align-items:start}
  .posts__head .h2--xl{max-width:none}
  .post__link,.more .post__link{grid-template-columns:minmax(0,220px) minmax(0,1fr);grid-template-areas:"fig body" "fig read";gap:12px 22px;align-items:start}
  .post__n{display:none}
  .post__fig{grid-area:fig}.post__body{grid-area:body}.post__read{grid-area:read;align-self:start}
  .article__grid{grid-template-columns:1fr;gap:36px}
  .article__aside{position:static}
  .article__meta{display:grid;grid-template-columns:repeat(4,auto);gap:0 28px;max-width:none}
  .article__meta>div{border-bottom:0;padding:14px 0}
  .article__meta{border-bottom:1px solid var(--line-2)}
}
@media (max-width:640px){
  .post__link,.more .post__link{grid-template-columns:1fr;grid-template-areas:"fig" "body" "read";gap:14px}
  .post__fig{aspect-ratio:16/10}
  .post__body b{max-width:none}
  .article__meta{grid-template-columns:1fr 1fr}
}