/* ===== Dezenyo blog (Journal) -- layered on proto.css =====
   proto.css supplies the tokens, nav, footer, .cream sections, buttons and the
   fixed-footer reveal. This file adds ONLY the two things the journal needs:
   the index card grid and the long-form .article prose. No stock photos -- the
   covers are typographic gradient panels, so the journal stays fast (no image
   weight, no CLS) and reads intentional. */

/* ---------- index: intro ---------- */
.blog-intro .lede{ max-width:58ch; }

/* ---------- index: card grid ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(2.4rem,4.5vw,3.5rem) clamp(1.6rem,3vw,2.6rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.blog-card{ display:flex; }
.blog-card__link{ display:flex; flex-direction:column; gap:1.15rem; width:100%; }

/* typographic gradient cover -- an italic fragment, no photo */
.blog-card__shot{
  position:relative; overflow:hidden; border-radius:.6rem; aspect-ratio:3 / 2;
  display:flex; align-items:flex-end; padding:clamp(1.2rem,2.4vw,1.75rem);
  background:linear-gradient(152deg, var(--espresso) 0%, var(--oxblood-deep) 68%, var(--oxblood) 118%);
}
/* second treatment so the two covers never read as siblings */
.blog-card__shot--b{
  background:linear-gradient(152deg, var(--oxblood-deep) 2%, var(--oxblood) 58%, var(--honey) 134%);
}
.blog-card__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 92% at 80% 12%, rgba(217,168,92,.22), transparent 60%);
}
.blog-card__fragment{
  position:relative; z-index:1; margin:0;
  font-family:var(--display); font-style:italic; font-weight:340; letter-spacing:-.01em;
  color:var(--paper); font-size:clamp(1.55rem,1rem + 2vw,2.4rem); line-height:1.04;
  max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.3);
}

/* card body */
.blog-card__meta{ display:flex; align-items:center; gap:.6rem; }
.blog-card__type{ color:var(--oxblood); }
.blog-card__sep{ color:var(--ink-soft); }
.blog-card__date{ color:var(--ink-soft); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.blog-card__title{
  font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(1.5rem,1rem + 1.7vw,2.1rem); color:var(--ink); margin:0;
}
.blog-card__link{ transition:transform .45s cubic-bezier(.16,1,.3,1); }
.blog-card__link:hover{ transform:translateY(-4px); }
.blog-card__link:hover .blog-card__title{ color:var(--oxblood); }
.blog-card__title{ transition:color .35s ease; }
.blog-card__excerpt{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.55; max-width:46ch; }
.blog-card__more{
  margin-top:.25rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oxblood); display:inline-flex; align-items:center; gap:.45rem;
}
.blog-card__more i{ width:18px; height:1px; background:currentColor; display:inline-block; transition:width .35s ease; }
.blog-card__link:hover .blog-card__more i{ width:26px; }

/* index foot note */
.blog-foot{ margin:clamp(2.4rem,4.5vw,3.25rem) 0 0; color:var(--ink-soft); font-size:1rem; max-width:60ch; }

/* ---------- post: two-column editorial layout ---------- */
/* A full-bleed .wrap held the article in a 42rem rail pinned hard left, leaving the
   right half of wide screens empty. The post now sits on a centred grid: a sticky
   meta rail + a readable prose column, so it uses the width without stretching the
   line measure past the readable ceiling (~70ch). */
.post{
  display:grid; align-items:start;
  grid-template-columns:[meta] minmax(0,13rem) [body] minmax(0,42rem);
  column-gap:clamp(2.5rem,1rem + 4vw,6.5rem); row-gap:clamp(1.4rem,3vw,2.2rem);
  /* Left-aligned to the page rail -- the byline now sits in the same column as the
     nav logo and every other section, instead of centred (which left a dead band
     between the rail and the content). The grid track maxes bound the width, so the
     right-hand whitespace is the intentional reading-measure margin, not a void. */
}

/* ---------- post: head (in the prose column so its left edge == the prose) ---------- */
.post-head{ grid-column:body; grid-row:1; }
.post-head__crumbs{
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-bottom:1.6rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.post-head__crumbs a{ color:var(--oxblood); }
.post-head__crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.post-head__type{ display:inline-block; color:var(--oxblood); margin-bottom:.7rem; }
.post-head__h{
  font-family:var(--display); font-weight:400; letter-spacing:-.018em; line-height:1.04;
  font-size:clamp(2rem,1rem + 3.4vw,3.4rem); color:var(--ink); margin:0; max-width:24ch;
}

/* ---------- post: sticky meta rail (the left column) ---------- */
.post-rail{
  grid-column:meta; grid-row:1 / 3; align-self:start;
  position:sticky; top:6.5rem; display:flex; flex-direction:column; gap:.95rem;
}
.post-rail__author{ font-family:var(--display); font-size:1.1rem; line-height:1.2; color:var(--ink); }
.post-rail__meta{
  display:flex; flex-direction:column; gap:.3rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- post: article prose ---------- */
.article{
  grid-column:body; grid-row:2; margin-top:clamp(.5rem,1.5vw,1rem);
  font-size:clamp(1.08rem,1rem + .4vw,1.24rem); line-height:1.78; color:var(--ink);
}
/* Flow rhythm. Every direct child starts flush, then the lobotomised owl adds the
   gap, so each block reads as its own beat. (The previous owl lost on specificity to
   `.article p{margin:0}` / `.article ol{margin:0}`, which is why paragraphs and the
   heading+list were touching with a 0px gap.) */
.article > *{ margin:0; }
.article > * + *{ margin-top:1.85em; }                  /* paragraph-to-paragraph beat */
.article > :is(h2,h3) + *{ margin-top:1.05em; }         /* content sits close under its heading (proximity); the larger air goes ABOVE the heading */
.article__lead{ font-size:1.16em; line-height:1.6; color:var(--ink); }
.article h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.01em; line-height:1.16;
  font-size:clamp(1.45rem,1rem + 1.7vw,2.05rem); color:var(--ink); margin-top:2.7em;
}
.article h3{
  font-family:var(--display); font-weight:400; line-height:1.2;
  font-size:clamp(1.2rem,1rem + 1vw,1.55rem); color:var(--ink); margin-top:2.3em;
}
.article ol, .article ul{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.article__steps li{
  position:relative; padding-left:3.1rem; min-height:2rem;
  counter-increment:step;
}
.article__steps{ counter-reset:step; }
.article__steps li::before{
  content:counter(step); position:absolute; left:0; top:-.1em;
  width:2.1rem; height:2.1rem; border-radius:999px; display:grid; place-items:center;
  background:var(--oxblood); color:var(--paper);
  font-family:var(--mono); font-size:.82rem;
}
.article__steps li strong{ color:var(--ink); }
.article strong{ font-weight:600; color:var(--ink); }
.article em{ font-style:italic; }
.article a{ color:var(--oxblood); border-bottom:1px solid currentColor; padding-bottom:1px; transition:opacity .3s; }
.article a:hover{ opacity:.65; }
.article blockquote{
  border-left:3px solid var(--oxblood); padding:.15rem 0 .15rem 1.3rem;
  font-family:var(--display); font-style:italic; font-size:1.18em; line-height:1.4; color:var(--ink);
}

/* ---------- post: foot (back to the journal) ---------- */
.post-foot{
  grid-column:body; grid-row:3; margin-top:clamp(2.6rem,5vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid var(--rule-ink);
}
.post-foot a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oxblood);
  display:inline-flex; align-items:center; gap:.5rem;
}
.post-foot a i{ width:16px; height:1px; background:currentColor; display:inline-block; transition:width .35s ease; }
.post-foot a:hover i{ width:24px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* stack the post in source order: head -> byline -> article -> foot */
  .post{ display:block; max-width:42rem; }
  .post-rail{
    position:static; margin:.2rem 0 1.5rem; display:flex; flex-direction:row;
    flex-wrap:wrap; align-items:baseline; gap:.4rem 1.1rem;
  }
  .post-rail__meta{ flex-direction:row; flex-wrap:wrap; gap:.3rem .9rem; }
}
@media (max-width:860px){
  .blog-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .article__steps li{ padding-left:2.7rem; }
}