/* Sovana — the blog article (blog-*.html), 2026-09-28.
   Layout after wilde.com/blog/our-run-club-in-vienna; the sticky
   "On this page" list after praglasraya.co.id. Layered on tokens.css +
   styles-alt.css — type is the site's .t-* scale, nothing new. */

/* ── the split hero · after Wilde ────────────────────────────────────────
   Photograph on the left, running to the page edge; the title on the right,
   top-aligned, with the date at the foot of the column. Below the solid nav,
   90svh tall. */
.post-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 90svh;                    /* 90svh, by request (2026-09-28) */
  margin-top: 93px;                 /* the fixed solid nav */
  background: var(--ivory);
}
.post-hero__media { margin: 0; overflow: hidden; }
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-hero__text {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(48px, 7vw, 125px) var(--frame-vw) clamp(32px, 4vw, 56px) clamp(32px, 5vw, 96px);
}
.post-hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.post-hero__head h1 { margin: 0; color: var(--green); text-wrap: balance; }
.post-hero__meta { margin: 0; color: var(--muted); }

/* ── article + contents ──────────────────────────────────────────────────
   Three tracks: the contents on the left, the reading column in the MIDDLE
   (so the text sits on the page's centre line, as Wilde's does), and an
   empty right track that keeps it there. */
.post__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.post__toc {
  grid-column: 1; position: sticky; top: 125px;
  max-width: 280px;
}
.post__toc-label { margin: 0 0 20px; color: var(--muted); }
.post__toc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* BULLETS, not numbers (2026-09-28, by request) — the site's own point
   marker: a small gold square, as in "What your rate covers". */
.post__toc-list li { position: relative; padding-left: 20px; }
.post__toc-list li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px;
  background: var(--gold);
}
/* Inactive at .65 — the filters' own convention; the section in view is
   full strength with the gold hairline under it. */
.post__toc-list a {
  position: relative; color: var(--green); opacity: .65; text-wrap: pretty;
  transition: opacity var(--dur-quick) var(--ease-out);
}
.post__toc-list a:hover, .post__toc-list a.is-current { opacity: 1; }
.post__toc-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}
.post__toc-list a.is-current::after { transform: scaleX(1); }
.post__toc-list a:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 3px; }

.post__body { grid-column: 2; min-width: 0; }
.post__body > p { margin: 0 0 24px; color: var(--ink); }
/* Lists in the article, as praglasraya.co.id sets them: the site's gold
   square marker, the lead phrase in green. */
.post__list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post__list li { position: relative; padding-left: 22px; color: var(--ink); }
.post__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--gold); }
.post__list b { font-weight: var(--weight-regular); color: var(--green); }
.post__lede { color: var(--green) !important; margin-bottom: 28px !important; text-wrap: pretty; }
.post__body h2 {
  margin: 48px 0 8px; color: var(--green); text-wrap: balance;   /* 48 above, 8 below — by request (2026-09-28) */
  scroll-margin-top: 125px;           /* clears the nav when jumped to */
}
/* pictures a step wider than the text, as Wilde's are */
.post__figure { margin: 48px -40px; }
.post__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.post__figure figcaption { margin-top: 12px; padding-inline: 40px; color: var(--muted); }

/* ── related articles (2026-09-28, by request) ─────────────────────────
   Three cards, 20px apart like every card on the site; picture 3:2, then
   category, title and one line. A card becomes a link once its article
   exists (a.rel__card): the picture scales and the title takes the gold
   underline, the same as the collection cards. */
.rel__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: var(--head-gap); }
.rel__head h2 { margin: 0; color: var(--green); }
.rel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rel__card { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.rel__media { margin: 0 0 12px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ivory); }
.rel__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale var(--duration) var(--ease-out); }
.rel__cat { margin: 0; color: var(--gold-700); }
.rel__title { margin: 0; color: var(--green); text-wrap: balance; }
.rel__line { margin: 0; color: var(--muted); }
.rel__soon { margin: 4px 0 0; color: var(--muted); }
a.rel__card:hover .rel__media img { scale: 1.03; }
a.rel__card:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 4px; }

/* ── narrower ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* the contents stop floating: a numbered list above the article */
  .post__grid { grid-template-columns: minmax(0, 1fr); }
  .post__toc, .post__body { grid-column: 1; }
  .post__toc { position: static; max-width: none; padding-bottom: 32px; margin-bottom: 8px; border-bottom: var(--hairline); }
  .post__figure { margin-inline: 0; }
  .post__figure figcaption { padding-inline: 0; }
}
@media (max-width: 900px) {
  .post-hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .post-hero__media { aspect-ratio: 4 / 3; }
  .post-hero__text { padding: 40px var(--frame-vw); }
  .rel__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}


/* ══ JOURNAL INDEX · blog.html · after sanfelice.com/en/news ════════════
   Left: eyebrow, title, one line — STICKY under the nav (San Felice's
   scrolls away). Right: two columns of white cards on the ivory page —
   picture (about 2:1), then the title, the date at the card's foot. */
.journal {
  display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  column-gap: clamp(40px, 5vw, 80px); align-items: start;
  padding-top: calc(93px + var(--section-y));   /* the fixed solid nav */
}
.journal__side {
  position: sticky; top: 125px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.journal__side h1 { margin: 0; color: var(--green); text-wrap: balance; }
.journal__side p { margin: 0; color: var(--muted); max-width: 40ch; }
.journal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }   /* 20 both ways, by request (2026-09-28) */
.jcard {
  display: flex; flex-direction: column; color: inherit;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
}
.jcard__media { margin: 0; aspect-ratio: 15 / 7; overflow: hidden; background: var(--ivory); }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale var(--duration) var(--ease-out); }
.jcard__body {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  min-height: 190px; padding: 24px;
}
.jcard__cat { margin: 0; color: var(--gold-700); }
.jcard__title { margin: 0; color: var(--green); text-wrap: balance; }
.jcard__meta { margin: auto 0 0; padding-top: 16px; color: var(--muted); }
/* date left, "Read article" right, on the card's foot. The action is the
   collection cards' "Discover more" (.unit__more) — a span, since the whole
   card is already the link; hovering the card draws its gold underline. */
.jcard__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jcard__foot .jcard__meta { margin: 0; padding: 0; }
.jcard__foot .unit__more { margin: 0; }
a.jcard:hover .unit__more::after { transform: scaleX(1); }
a.jcard:hover .jcard__media img { scale: 1.03; }
a.jcard:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 4px; }

@media (max-width: 1080px) {
  .journal { grid-template-columns: minmax(0, 1fr); row-gap: var(--head-gap); }
  .journal__side { position: static; }
}
@media (max-width: 720px) {
  .journal__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}