/* ============================================================
   BLOG — index + article styling. Built on the cinema tokens.
   ============================================================ */

/* ---------- shared sticky header / footer ---------- */
.blog-hdr{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); background:rgba(14,17,22,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--hair-2); }
.blog-hdr .brand{ display:flex; align-items:center; gap:12px; }
.blog-hdr .mark{ width:36px; height:36px; border-radius:50%; overflow:hidden; border:1px solid var(--gold); background:#1b1e25; }
.blog-hdr .mark img{ width:100%; height:100%; object-fit:cover; }
.blog-hdr .name{ font-family:var(--serif); font-weight:800; font-size:1.1rem; }
.blog-back{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--paper-2); transition:color .3s; }
.blog-back:hover{ color:var(--gold); }
.blog-ftr{ text-align:center; padding:54px var(--pad); border-top:1px solid var(--hair); color:var(--paper-3); }
.blog-ftr a{ color:var(--gold); }

/* ---------- blog hero ---------- */
.blog-hero{ max-width:var(--container); margin-inline:auto; padding:clamp(56px,10vh,120px) var(--pad) clamp(28px,5vh,56px); }
.blog-hero .tag{ margin-bottom:1.1rem; }
.blog-hero h1{ font-family:var(--serif); font-weight:900; font-size:var(--d-lg); line-height:.96; }
.blog-hero h1 .dot{ color:var(--ink); }
.blog-hero p{ color:var(--paper-2); max-width:54ch; margin-top:1.2rem; font-size:1.12rem; }

/* ---------- post grid (index) ---------- */
.posts{ max-width:var(--container); margin:0 auto; padding:clamp(20px,4vh,40px) var(--pad) clamp(70px,10vh,130px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px); }
@media(max-width:900px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .posts{ grid-template-columns:1fr; } }

.pcard2{ display:flex; flex-direction:column; gap:14px; padding:30px; border:1px solid var(--hair);
  border-radius:var(--radius); background:rgba(20,26,35,.5); transition:transform .5s var(--ease), border-color .5s; }
.pcard2:hover{ transform:translateY(-5px); border-color:rgba(201,162,75,.4); }
.pcard2 .cat{ font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--gold); }
.pcard2 h2{ font-family:var(--serif); font-weight:800; font-size:1.5rem; line-height:1.12; }
.pcard2 p{ color:var(--paper-2); font-size:.98rem; line-height:1.7; }
.pcard2 .row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px; }
.pcard2 .date{ font-size:.82rem; color:var(--paper-3); }
.pcard2 .read{ font-weight:700; color:var(--gold); display:inline-flex; gap:.4em; align-items:center; }
.pcard2:hover .read .ar{ transform:translateX(-5px); }
.pcard2 .read .ar{ transition:transform .4s var(--ease); }

/* ---------- article (reading) ---------- */
.post{ max-width:760px; margin:0 auto; padding:clamp(50px,8vh,110px) var(--pad) clamp(60px,9vh,120px); }
.post__cat{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--gold); }
.post__title{ font-family:var(--serif); font-weight:900; font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; margin:1rem 0 1.1rem; }
.post__meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--paper-3); font-size:.9rem;
  padding-bottom:26px; margin-bottom:36px; border-bottom:1px solid var(--hair); }
.post__meta .by{ color:var(--paper-2); font-weight:600; }
.post__lead{ font-size:1.22rem; line-height:1.75; color:var(--paper); margin-bottom:1.6em; }

.post__body{ font-size:1.08rem; line-height:1.85; color:var(--paper-2); }
.post__body h2{ font-family:var(--serif); font-weight:800; color:var(--paper); font-size:1.7rem; line-height:1.18;
  margin:2.2em 0 .7em; }
.post__body h3{ font-weight:800; color:var(--paper); font-size:1.22rem; margin:1.8em 0 .5em; }
.post__body p{ margin:0 0 1.2em; }
.post__body strong{ color:var(--paper); font-weight:700; }
.post__body a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.post__body ul,.post__body ol{ margin:0 0 1.4em; padding-inline-start:1.3em; }
.post__body li{ margin-bottom:.55em; }
.post__body li::marker{ color:var(--gold); }
.post__body blockquote{ margin:1.6em 0; padding:1.1em 1.4em; border-inline-start:3px solid var(--gold);
  background:rgba(201,162,75,.06); border-radius:var(--radius); color:var(--paper); font-size:1.12rem; }
.post__body blockquote p:last-child{ margin-bottom:0; }

.post__cta{ margin-top:48px; padding:34px; border:1px solid var(--hair); border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(16,29,56,.6), rgba(20,26,35,.5)); text-align:center; }
.post__cta h3{ font-family:var(--serif); font-weight:800; font-size:1.5rem; margin-bottom:.5em; }
.post__cta p{ color:var(--paper-2); margin-bottom:1.4em; }

.post__more{ max-width:760px; margin:0 auto; padding:0 var(--pad) clamp(60px,9vh,120px); }
.post__more h4{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--gold); margin-bottom:18px; }
.post__more .links{ display:flex; flex-direction:column; gap:10px; }
.post__more .links a{ color:var(--paper); font-weight:600; display:inline-flex; gap:.5em; }
.post__more .links a:hover{ color:var(--gold); }