/* ============================================================
   GRAPHICXO — JOURNAL
   Loaded only by blog.php, on top of main.css + pages.css.

   A lead piece, then every other entry as the same card one size down —
   each carrying its cover outright rather than revealing it on hover, which
   showed nothing on a touch screen and nothing at all until you pointed.
   The field (blog.js) is set as type along those same lines — particles are
   carried left to right along an entry and carriage-return to the next one,
   so the swarm reads the page in the order you do.
   ============================================================ */

.jr{position:relative}

/* ------------------------------------------------------------
   THE FIELD
   z-index:-1 keeps it under .main's in-flow content while still painting
   above the body background — a positioned z-index:0 child would paint
   over the text.
   ------------------------------------------------------------ */
.jr-field{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.jr-field.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){ .jr-field{display:none} }

/* ------------------------------------------------------------
   HEAD
   ------------------------------------------------------------ */
.jr-head{position:relative;padding-top:clamp(9rem,18vh,13rem);padding-bottom:clamp(2.5rem,6vh,4rem)}
.jr-head__eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.jr-head__eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)}

.jr-head__title{font-family:var(--serif);font-size:clamp(2.8rem,9.5vw,8rem);line-height:.94;letter-spacing:-.03em}
.jr-head__title em{color:var(--gold);font-style:italic;font-weight:300}
/* Each line rises out of its own mask; the padding stops the overflow
   shaving descenders. */
.jr-head__mask{display:block;overflow:hidden;padding-bottom:.08em}
.jr-head__mask > span{display:block;transform:translateY(115%);transition:transform 1.05s var(--ease)}
.jr-head__title.is-in .jr-head__mask > span{transform:none}
.jr-head__title.is-in .jr-head__mask:nth-child(2) > span{transition-delay:.1s}

.jr-head__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.2rem,4vw,3rem);
  margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--line);
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s;
}
.jr-head__foot.is-in{opacity:1;transform:none}
.jr-head__desc{max-width:50ch;color:var(--grey);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300}
.jr-count{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap}
.jr-count__n{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.jr-count__l{font-size:.62rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-dim)}

/* ------------------------------------------------------------
   THE LEAD
   Extends the .lead-post furniture in pages.css: the cover slot now takes
   a drawn plate when no image has been uploaded, rather than an italic
   monogram floating in an empty rectangle.
   ------------------------------------------------------------ */
.lead-post{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .5s,box-shadow .8s var(--ease)}
.lead-post.is-in{opacity:1;transform:none}
@media (hover:hover){
  .lead-post:hover{box-shadow:0 40px 90px -55px rgba(194,56,79,.9)}
  /* The cover lights with the card, same as the index cards below. Without
     this the lead would be the one card whose picture stays cold while
     everything around it warms. */
  .lead-post:hover .lead-post__visual{
    border-color:rgba(194,56,79,.5);
    box-shadow:0 0 34px -8px rgba(194,56,79,.45);
  }
}
.lead-post__visual{background:
  radial-gradient(120% 92% at 20% 6%, rgba(194,56,79,.42), transparent 64%),
  linear-gradient(158deg, rgba(109,40,255,.24), #0a0a0b 70%)}
.lead-post__visual .plate{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  color:#fff;transition:transform 1.3s var(--ease);
}
@media (hover:hover){.lead-post:hover .plate{transform:scale(1.05)}}
.lead-post__visual .plate--photo{object-fit:cover}
/* A read-through cue that only exists once there is somewhere to go. */
.lead-post__cue{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.lead-post__cue::after{content:"";width:2.2rem;height:1px;background:var(--gold);transition:width .5s var(--ease)}
@media (hover:hover){.lead-post:hover .lead-post__cue::after{width:3.4rem}}

/* ------------------------------------------------------------
   THE INDEX
   Cards, not a list. Each entry is the lead card one size down —
   meta line, title, excerpt, read cue, cover on the right — so the
   page reads as one family of objects instead of a card followed by
   a table. The shared border, radius and gradient are grouped with
   .lead-post in pages.css; what changes here is the proportion.
   ------------------------------------------------------------ */
.post-index{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}

/* The cover takes less of the card than it does on the lead — 30%
   against 34%, floor 200px against 320 — which is most of what makes
   the two read as a hierarchy rather than as the same card twice. */
.post-row{grid-template-columns:minmax(0,1fr) clamp(200px,30%,300px);overflow:visible}
/* box-shadow has to be named in the transition or the glow below snaps on
   instead of rising. blog.css replaces the shared transition in pages.css
   outright rather than adding to it, so it has to carry every property. */
.post-row{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .45s,box-shadow .8s var(--ease)}
.post-row.is-in{opacity:1;transform:none}

/* The glow, in the blog's crimson — the same light the lead card throws,
   scaled to a smaller card: a shorter drop and a tighter spread, so the two
   read as the same effect at two sizes rather than as one card glowing
   harder than the other. The cover picks it up too, on its own border. */
@media (hover:hover){
  .post-row:hover{box-shadow:0 30px 70px -50px rgba(194,56,79,.9)}
  .post-row:hover .post-row__title{color:var(--white)}
  .post-row:hover .post-row__cover{
    border-color:rgba(194,56,79,.5);
    box-shadow:0 0 26px -6px rgba(194,56,79,.45);
  }
}

@media (max-width:1024px){
  .post-row{grid-template-columns:minmax(0,1fr) clamp(160px,26%,220px)}
}
@media (max-width:720px){
  /* Stacked, cover first — the same collapse the lead card makes at 900px.
     Below this a side-by-side split leaves the title in a column too narrow
     to hold three words to a line. */
  .post-row{grid-template-columns:minmax(0,1fr)}
  .post-row__cover{order:-1;aspect-ratio:16/9}
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .jr-head__mask > span,.jr-head__foot,.lead-post,.post-row{opacity:1;transform:none;transition:none}
  .lead-post__visual .plate{transition:none}
  /* The glow itself stays — a colour change is not motion, and it is what
     tells you the card is live. What goes is the movement: with the
     transition off, the lift and the cover's zoom become an instant jump
     rather than a rise, which is exactly the jolt this query exists to
     prevent. :hover needs the higher specificity to beat the rules above. */
  @media (hover:hover){
    .lead-post:hover .plate,
    .post-row:hover .post-row__cover img,
    .post-row:hover .post-row__cover .plate{transform:none}
    .lead-post:hover,
    .post-row:hover{transform:none}
  }
}