/* Journal posts (design 2026-11, direction B). Built by tools/design_post.py from the old posts.
   The sheet opens the post: the headline and its one line, then one large real Sisu photo with a caption, then
   the writer, date and topic in the title strip. The text reads in .prose on eight columns; a rail on the last
   three holds "On this page" and the guide. The planning guide, two more posts with their photos and the band
   follow. Generated pictures inside the text carry a caption that starts with "Render" (design_post.GENERATED). */

.post-sheet .sheet-head { align-items: end; }
.post-sheet .crumb a { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-sheet .ts-name a { text-decoration: none; }
.post-sheet .ts-name a:hover { text-decoration: underline; text-decoration-color: var(--bronze); }

/* ---------- The text and its rail ---------- */

.post-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.post-grid .prose { grid-column: 1 / 9; max-width: 760px; }
.post-side { grid-column: 10 / 13; position: sticky; top: 28px; display: grid; gap: 32px; }
.post-side .rail { position: static; }
.post-toc-h { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.post-toc .rail a { line-height: 1.4; }
.post-toc .rail a:hover { color: var(--ink); }

.post-side-guide { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding-top: 20px; border-top: 1px solid var(--rule); text-decoration: none; font-size: 14px; line-height: 1.4; color: var(--muted); }
.post-side-guide img { width: 64px; border-radius: 3px; box-shadow: 0 0 0 1px var(--hair); }
.post-side-guide b { display: block; margin-bottom: 3px; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--ink); }
.post-side-guide:hover b { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-toc:empty + .post-side-guide, .post-side > .post-side-guide:first-child { padding-top: 0; border-top: 0; }

.prose h2, .prose h3 { scroll-margin-top: 24px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose figure { margin-top: 2em; margin-bottom: 2em; }
.prose figure + * { margin-top: 0; }
.prose figure img { width: 100%; }
.prose .post-gallery { margin: 2em 0; display: flex; flex-direction: column; gap: 28px; }
.prose .post-gallery figure { margin: 0; }
.prose a { color: var(--ink); }
.prose li::marker { color: var(--muted); }
.prose .table-scroll { overflow-x: auto; }

/* ---------- The planning guide: cover, offer and form in one row ---------- */

.pg-grid { display: grid; grid-template-columns: 180px minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: center; }
.pg-cover img { width: 100%; border-radius: 4px; }
.pg-offer { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.pg-form { max-width: none; }
.post-guide .form-done .text-link { display: block; margin-top: 10px; font-family: var(--sans); font-size: 16px; }

/* ---------- Two more posts ---------- */

.post-related { padding-top: var(--space); }
.post-related .strip h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }

/* ---------- Tablet: the rail leaves, the text takes the row ---------- */

@media (max-width: 900px) {
  .post-grid .prose { grid-column: 1 / -1; max-width: none; }
  .post-side { display: none; }
  .pg-grid { grid-template-columns: 132px minmax(0, 1fr); column-gap: 32px; row-gap: 28px; }
  .pg-act { grid-column: 1 / -1; }
}

/* On a narrow window the photo comes right under the headline, and the line follows it: the first screen
   of a phone shows the headline and the photo. */
@media (max-width: 860px) {
  .post-sheet .sheet-body.lead { display: flex; flex-direction: column; }
  .post-sheet .sheet-head { display: contents; }
  .post-sheet .sheet-head > :first-child { order: 1; margin-bottom: 20px; }
  .post-sheet .lead-fig { order: 2; }
  .post-sheet .sheet-head > .lede { order: 3; margin-top: 20px; }
}

/* ---------- Phone ---------- */

@media (max-width: 560px) {
  .post-sheet .lead-fig img { aspect-ratio: 3 / 2; }
  .pg-grid { grid-template-columns: 92px minmax(0, 1fr); column-gap: 18px; }
  .pg-offer { font-size: 15.5px; }
  .pg-form .btn { width: 100%; text-align: center; }
}