/* =========================================================
   Thoughts — a commonplace book.
   A quiet sticky column names the section; the stream runs newest
   first, broken by years. One-liners are set large in italic, longer
   thoughts step down, poems keep their line breaks.
   ========================================================= */

.page-thoughts { background: var(--room); }
.tg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px); }

.tg__side { position: sticky; top: 96px; align-self: start; display: grid; gap: 28px; }
.tg__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(3.4rem, 2rem + 5vw, 7rem); line-height: .9; letter-spacing: -.03em; margin: 0; }
.tg__title em { font-style: italic; font-weight: 400; color: var(--accent); }
.tg__deck { margin: 0; font-size: 1.12rem; color: #CFC6B8; max-width: 34ch; }
.tg__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.tg__facts div { padding: 12px 0; display: grid; gap: 2px; }
.tg__facts b { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; text-transform: none; }
.tg__facts span { color: var(--muted); }
.tg__feed { justify-self: start; color: var(--muted); text-decoration: none; }
.tg__feed:hover { color: var(--accent); }

.tg__stream { min-width: 0; }
.tg__yr { display: flex; align-items: center; gap: 14px; margin: 0; padding: 40px 0 8px; color: var(--muted); font-weight: 400; }
.tg__stream > section:first-child .tg__yr { padding-top: 0; }
.tg__yr span { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: 0; color: var(--accent); font-variant-numeric: lining-nums; }
.tg__yr::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* One thought */
.th { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px; }
.th__no { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-decoration: none; padding-top: .7em; font-variant-numeric: tabular-nums; }
a.th__no:hover { color: var(--accent); }
.th__body { display: grid; gap: 12px; min-width: 0; }
.th__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.th--s .th__text { font-family: var(--f-display); font-style: italic; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; max-width: 22ch; }
.th--m .th__text { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.25; text-wrap: pretty; max-width: 34ch; }
.th--l .th__text { font-family: var(--f-book); font-size: 1.12rem; line-height: 1.6; color: #CFC6B8; max-width: 60ch; }
.th__text.is-poem { font-family: var(--f-book); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--fg); }
.th__title { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; text-wrap: balance; }
.th__by { margin: -4px 0 0; color: var(--muted); font-size: .92rem; }
.th__img { margin: 4px 0 0; max-width: min(360px, 100%); }
.th__img img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px #EEE7DA1f, 0 24px 40px -24px #000; }
.th__meta { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); }
.th__meta a { text-decoration: none; }
.th__meta a:hover { color: var(--accent); }

/* A thought's own page */
.tg--single { grid-template-columns: minmax(0, 1fr); max-width: 980px; gap: 40px; min-height: calc(100svh - 55px - 120px); align-content: center; }
.th--single { border-bottom: 0; padding: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.th--single .th__no { padding-top: 0; color: var(--accent); }
.th--single.th--s .th__text { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.4rem); line-height: 1.02; max-width: 18ch; }
.th--single.th--m .th__text { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem); max-width: 28ch; }
.th--single .th__img { max-width: min(520px, 100%); }
.tg__pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; border-top: 1px solid var(--rule); padding-top: 18px; }
.tg__pager a { text-decoration: none; color: var(--muted); }
.tg__pager a:hover { color: var(--accent); }
.tg__pager [rel="next"] { justify-self: end; }

@media (max-width: 880px) {
  .tg { grid-template-columns: minmax(0, 1fr); }
  .tg__side { position: static; }
  .th { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .th__no { padding-top: 0; }
}