/* Journal — archive + post theme.
   Extends interior.css; only uses tokens that file defines
   (--ink --bone --bone-dim --bone-faint --gold --gold-hot --hairline
    --hairline-strong --font-display --font-text --font-mono --ease-out --pad). */

/* ---------- archive ---------- */

.jhero{padding:calc(var(--pad) + 5rem) var(--pad) clamp(2rem,5vw,3.5rem);max-width:64rem}
.jsec{padding:0 var(--pad) clamp(5rem,10vw,8rem)}

.jlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}

.jcard{border-bottom:1px solid var(--hairline)}
/* thumb | date | title+excerpt | cue. Every child is placed explicitly so the
   row stays stable whether or not a given post carries a cover. */
.jcard__link{display:grid;grid-template-columns:clamp(7rem,12vw,10.5rem) 6rem minmax(0,1fr) auto;
  gap:0 clamp(1.5rem,3.5vw,3rem);
  align-items:baseline;padding:clamp(1.8rem,3vw,2.6rem) 0;text-decoration:none;color:inherit;
  transition:background .4s var(--ease-out),padding .4s var(--ease-out)}
.jcard__link:hover{background:rgba(217,164,65,.04);padding-left:1.2rem;padding-right:1.2rem}

.jcard__thumb{grid-column:1;grid-row:1/span 2;align-self:start;display:block;
  aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);
  background:rgba(255,255,255,.02)}
.jcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.82;transform:scale(1.005);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.jcard__link:hover .jcard__thumb img{opacity:1;transform:scale(1.045)}

.jcard__date{grid-column:2;grid-row:1/span 2;color:var(--bone-faint);font-size:.78rem;
  letter-spacing:.06em;padding-top:.45rem;white-space:nowrap}
.jcard__title{grid-column:3;grid-row:1;
  font-family:var(--font-display);font-weight:520;font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.2;color:var(--bone);margin:0;transition:color .35s var(--ease-out)}
.jcard__link:hover .jcard__title{color:var(--gold-hot)}
.jcard__sub{grid-column:3;grid-row:2;margin:.7rem 0 0;color:var(--bone-dim);font-size:1rem;max-width:44rem}
.jcard__cue{grid-column:4;grid-row:1/span 2;color:var(--gold);font-size:.72rem;letter-spacing:.08em;
  opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease-out);padding-top:.5rem}
.jcard__link:hover .jcard__cue{opacity:1;transform:none}

@media(max-width:760px){
  .jcard__link{grid-template-columns:1fr;gap:0;padding-left:0!important;padding-right:0!important}
  .jcard__thumb{grid-column:1;grid-row:auto;width:100%;margin-bottom:1.1rem}
  .jcard__date{grid-column:1;grid-row:auto;padding-top:0;margin-bottom:.6rem}
  .jcard__title{grid-column:1;grid-row:auto}
  .jcard__sub{grid-column:1;grid-row:auto}
  .jcard__cue{grid-column:1;grid-row:auto;opacity:1;transform:none;margin-top:1rem}
}

@media(prefers-reduced-motion:reduce){
  .jcard__thumb img{transition:opacity .45s var(--ease-out);transform:none}
  .jcard__link:hover .jcard__thumb img{transform:none}
}

/* empty state — honest placeholder, not a fake post grid */
.jempty{border:1px solid var(--hairline);border-radius:16px;padding:clamp(2.2rem,5vw,3.4rem);
  max-width:44rem;background:rgba(255,255,255,.015)}
.jempty__lead{font-family:var(--font-display);font-weight:520;font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--bone);margin:0 0 1rem}
.jempty p{color:var(--bone-dim);margin:0 0 1.8rem;font-size:1.05rem}

/* ---------- single post ---------- */

.post{max-width:44rem;margin:0 auto;padding:calc(var(--pad) + 5rem) var(--pad) clamp(4rem,8vw,7rem)}

.post__back{display:inline-block;color:var(--bone-faint);text-decoration:none;font-size:.75rem;
  letter-spacing:.08em;margin-bottom:2.2rem;transition:color .3s}
.post__back:hover{color:var(--gold)}

.post__title{font-family:var(--font-display);font-weight:480;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.015em;color:var(--bone);margin:0}
.post__meta{margin:1.4rem 0 0;color:var(--bone-faint);font-size:.78rem;letter-spacing:.06em}
.post__head{padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--hairline);
  margin-bottom:clamp(2.4rem,5vw,3.4rem)}

/* Cover bleeds a little past the 44rem measure so it reads as an image rather
   than an inline figure. The bleed collapses to 0 on narrow screens, where
   .post's own padding is all the room there is. */
.post__cover{--bleed:clamp(0rem,3.5vw,3.5rem);
  margin:0 calc(var(--bleed) * -1) clamp(2.4rem,5vw,3.4rem);
  border-radius:14px;overflow:hidden;border:1px solid var(--hairline);
  background:rgba(255,255,255,.02)}
.post__cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

.post__body{font-size:1.09rem;line-height:1.72}
.post__body h2{font-family:var(--font-display);font-weight:520;font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.2;color:var(--bone);margin:2.8rem 0 1rem}
.post__body h3{font-family:var(--font-display);font-weight:520;font-size:1.25rem;
  color:var(--bone);margin:2.2rem 0 .8rem}
.post__body p{margin:0 0 1.35rem}
.post__body ul,.post__body ol{margin:0 0 1.35rem;padding-left:1.3rem}
.post__body li{margin:0 0 .55rem}
.post__body a{color:var(--gold);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;transition:color .3s}
.post__body a:hover{color:var(--gold-hot)}
.post__body strong{color:var(--bone);font-weight:600}
.post__body code{font-family:var(--font-mono);font-size:.88em;background:rgba(255,255,255,.05);
  border:1px solid var(--hairline);border-radius:5px;padding:.12em .4em}
.post__body pre{background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:12px;
  padding:1.2rem 1.3rem;overflow-x:auto;margin:0 0 1.6rem}
.post__body pre code{background:none;border:0;padding:0;font-size:.86rem;line-height:1.6}
.post__body blockquote{border-left:2px solid var(--gold);margin:0 0 1.6rem;padding:.2rem 0 .2rem 1.4rem}
.post__body blockquote p{color:var(--bone);font-style:italic;margin:0}
.post__body hr{border:0;border-top:1px solid var(--hairline);margin:2.6rem 0}

.post__foot{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--hairline)}
.post__foot p{color:var(--bone-dim);margin:0 0 1.4rem}