/* ============================================================
   BLOG — the index grid and the detail page.

   Layout measured off haiqu.ai/blog: three cards to a row inside
   the same 1600 container the rest of the site uses, 24px between
   them, and a card that is one image over one block of text with
   the action pinned to its foot.

   The detail page is two grounds stacked. The hero is black, like
   every other page here; the article is a white sheet the hero
   sits on. Everything below the sheet returns to black. Tokens for
   the light half are namespaced --a-* and live only in this file —
   nothing else on the site renders on white.

   TYPE: the blog is set in DM Mono, not the site serif. Headlines,
   excerpts and pullquotes all take --mono, which makes this the one
   place mono carries the reading matter rather than labelling it.
   Two consequences, both handled at every call site:

     · mono runs about a fifth wider per character, so each size
       steps down from what the serif took (26→21, 21→17, 15→13)
       to hold the same measure
     · the 0.1em label tracking does not apply — display sizes take
       --mono-display-track, reading sizes --mono-read-track

   Newsreader is still loaded and still used elsewhere: .display on
   the case-study plates, and .page-title. This change stops at the
   blog and the post page.
   ============================================================ */

:root {
  /* ---- the light sheet ---------------------------------------- */
  --a-paper: #ffffff;
  --a-ink: #16181d;          /* body copy */
  --a-second: #4a4f59;       /* captions, bylines */
  --a-dim: #8b9099;          /* dateline */
  --a-box: #f1efec;          /* the lede callout */
  --a-hair: rgba(0, 0, 0, 0.10);
  --a-blue: #12239e;         /* the one action colour on the sheet */

  /* the index card */
  --card-bg: #121212;
  --card-r: 20px;
  --card-gap: 24px;
  --chip-bg: #c5cbfb;        /* the reference's periwinkle tag */
  --chip-fg: #0c1236;

  --sheet-w: 995px;          /* the plate itself — hero and sheet share it */
  --read-w: 660px;           /* the measure inside it */
}

/* ---------------------------------------------------------------
   1. INDEX
   --------------------------------------------------------------- */

/* One line, and nothing else. The grid below is the page; the head only
   has to name it. */
.blog-head {
  margin-bottom: var(--s5);
  font-family: var(--mono);
  font-size: 21px; line-height: 1.2; letter-spacing: var(--mono-display-track);
  color: var(--t-primary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}

/* ---- a card ---------------------------------------------------- */

.card {
  background: var(--card-bg);
  border-radius: var(--card-r);
  overflow: hidden;                       /* the art is clipped by this */
  /* rises as it comes under the scroll; blog.js sets data-seen */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--reveal) var(--ease-soft),
    transform var(--reveal) var(--ease-soft),
    background var(--fast) var(--ease);
  transition-delay: calc(var(--card-i, 0) * 70ms);
}
.card[data-seen="true"] { opacity: 1; transform: none; }
.card:hover { background: #171717; }

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition-delay: 0s; }
}

/* The whole card is the link. A separate "read more" anchor inside a
   clickable card gives a keyboard user two stops for one destination. */
.card-hit { display: flex; flex-direction: column; height: 100%; }

.card-art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* the placeholder plate — see blog-art.js */
.art {
  display: block; width: 100%; height: 100%;
  background: var(--art-tone, #191919);
  transition: transform var(--slow) var(--ease-soft);
}
.card-hit:hover .art { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .card-hit:hover .art { transform: none; } }

.card-body {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 1;
  padding: 22px 24px 24px;
}

.card-tag {
  padding: 3px 9px;
  border-radius: var(--radius-btn);
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.card-date { margin-top: 18px; color: var(--t-dim); }

.card-title {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 17px; line-height: 1.32; letter-spacing: var(--mono-display-track);
  color: var(--t-primary);
}

.card-excerpt {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px; line-height: 1.55; letter-spacing: var(--mono-read-track);
  color: var(--t-second);
  /* two lines, then an ellipsis — the excerpts are authored short, this
     only catches the ones that are not */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* pinned to the foot, so cards of unequal text still line their actions up */
.card-more {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: auto; padding-top: 26px;
  color: var(--t-second);
  transition: color var(--fast) var(--ease);
}
.card-hit:hover .card-more { color: var(--t-primary); }

/* ---- the arrow ---------------------------------------------------
   Drawn, not typed. The ↗ glyph inherits the mono's weight and rides
   the baseline, so it comes out small and heavy next to 10px caps;
   a stroked path can be larger than the label without outweighing it.
   It leans the way it points on hover — a link answering the pointer. */
/* .arrow itself has moved to app.css — it is drawn on the Models canvas
   too now, and a glyph used by two pages that lives in the stylesheet of
   one of them is a glyph that renders as an empty box on the other. What
   stays here is the card's own behaviour: the arrow leaves in the
   direction it points when the card is hovered. */
.card-hit:hover .arrow { transform: translate(2px, -2px); }

/* ---- the pager -------------------------------------------------- */

.pg {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* A square, not a pill — the page you are on is a held key, and the ones
   you are not are bare numerals. The current page fills grey rather than
   white: it is a position, not the page's one action. */
.pg-num {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: var(--mono-body);
  color: var(--t-dim);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
a.pg-num:hover { background: var(--btn-bg); color: var(--t-primary); }
.pg-num[aria-current="page"] { background: #1e1e1e; color: var(--t-primary); }

/* ---------------------------------------------------------------
   2. DETAIL — hero on black, article on white
   --------------------------------------------------------------- */

/* --sheet-w is the plate, not the container. The gutter is added on top of
   it so the hero and the white sheet measure 995 exactly, rather than 995
   minus whatever the gutter happens to be at this width. */
.post {
  max-width: calc(var(--sheet-w) + 2 * var(--col-pad));
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--s6)) var(--col-pad) 0;
}
.post .back { margin-bottom: var(--s4); }

.hero {
  position: relative;
  aspect-ratio: 16 / 6.4;
  min-height: 280px;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow: hidden;
  display: grid; place-items: center;
}
.hero-art { position: absolute; inset: 0; }
.hero-art .art { transform: none; }

/* The title card floats on the image rather than sitting under it, which
   is the reference's arrangement. Frosted, so whatever the image becomes
   later, the headline stays readable on it. */
.hero-card {
  position: relative;
  max-width: min(440px, 82%);
  padding: 26px 30px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
  animation: hero-card-in var(--slow) var(--ease-soft) both;
}
.hero-title {
  font-family: var(--sans);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.28; letter-spacing: -0.01em;
  color: var(--t-primary);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: 18px;
  color: var(--t-second);
}

@keyframes hero-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none; } }

/* ---- the white sheet -------------------------------------------- */

.sheet-light {
  background: var(--a-paper);
  color: var(--a-ink);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  padding: var(--s7) var(--col-pad);
  /* the sheet is its own selection context — white-on-white would vanish */
  --sel-bg: var(--a-ink);
}
.sheet-light ::selection { background: var(--a-ink); color: var(--a-paper); }

.sheet-inner {
  max-width: var(--read-w);
  margin-inline: auto;
}

.lede-box {
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--a-box);
  font-family: var(--sans);
  font-size: 15px; line-height: 1.6;
  color: var(--a-ink);
}

.a-p {
  margin-top: var(--s4);
  font-family: var(--sans);
  font-size: 15px; line-height: 1.72;
  color: var(--a-ink);
}

.a-h {
  margin-top: var(--s6);
  font-family: var(--mono);
  font-size: 21px; line-height: 1.3; letter-spacing: var(--mono-display-track);
  color: var(--a-ink);
}
.a-h + .a-p { margin-top: var(--s3); }

/* the dateline — the reference sets it small and grey, above the body */
.a-line {
  margin-top: var(--s5);
  color: var(--a-dim);
}

.a-q {
  margin: var(--s6) 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--a-ink);
}
.a-q p {
  font-family: var(--mono);
  font-size: 17px; line-height: 1.5; letter-spacing: var(--mono-display-track);
  color: var(--a-ink);
}
.a-q cite {
  display: block; margin-top: var(--s3);
  font-style: normal;
  color: var(--a-second);
}

/* the named points — a definition list, because that is what it is */
.a-ul { margin: var(--s5) 0 0; display: grid; gap: 1px; }
.a-li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s4);
  padding: 16px 0;
  border-top: 1px solid var(--a-hair);
}
.a-li:last-child { border-bottom: 1px solid var(--a-hair); }
.a-li dt { color: var(--a-ink); }
.a-li dd {
  margin: 0;
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--a-second);
}

.a-fig { margin: var(--s6) 0 0; }
.a-fig-art {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}
.a-fig figcaption {
  margin-top: var(--s3);
  color: var(--a-dim);
}

.a-cta { margin-top: var(--s5); text-align: center; }

/* the sheet's one action, and the only saturated thing on the page */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 34px;
  border-radius: 999px;
  background: var(--a-blue); color: #fff;
  font-family: var(--sans); font-size: 15px;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  box-shadow: 0 6px 22px rgba(18, 35, 158, 0.28);
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(18, 35, 158, 0.34); }
.pill:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .pill:hover { transform: none; } }

.byline {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--a-hair);
  color: var(--a-second);
}

/* ---- back to black: more posts ---------------------------------- */

.post-foot {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s7) var(--col-pad);
}
.post-foot .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hair-soft);
}
.foot-head h2 { color: var(--t-primary); }
.foot-head a { color: var(--t-second); transition: color var(--fast) var(--ease); }
.foot-head a:hover { color: var(--t-primary); }

/* THE RETICLE ON WHITE has moved to app.css, next to the reticle it
   describes. It was never a blog rule: cursor.js flips data-ground on
   any light surface anywhere, and while the inversion lived in this
   file it only worked on the one page that happens to load it — the
   Models canvas got a white cursor on paper. */

/* ---------------------------------------------------------------
   4. NARROWER
   Three up → two up → one. The card itself never changes; only how
   many share a row.
   --------------------------------------------------------------- */

@media (max-width: 1080px) {
  .grid, .post-foot .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid, .post-foot .grid { grid-template-columns: minmax(0, 1fr); }
  .blog-head { align-items: flex-start; }
  .post { padding-top: calc(var(--nav-h) + var(--s5)); }
  .hero { aspect-ratio: 4 / 3; min-height: 0; }
  .sheet-light { padding: var(--s6) var(--s4); }
  .a-li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}