/* ============================================================
   22 Pyramid Road — blog.css (Aspen Journal)
   The site system applied to long reading: Geist headings, DM Sans body at a comfortable measure, gold kickers, navy
   TL;DR card, 20px photos, arrow links. The floating table-of-contents pill follows the header glass.
   ============================================================ */

/* ---------- Journal index ---------- */
.journal .intro { padding-bottom: var(--s-48); }
.journal-list { padding-top: 0; }
.j-grid { display: grid; gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
@media (min-width: 768px) { .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.j-card { display: grid; align-content: start; gap: var(--s-12); }
.j-card-media { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: var(--s-8); border-radius: var(--r-photo); background: var(--ivory-deep); }
.j-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .j-card:hover .j-card-media img { transform: scale(1.03); } }
.j-dot { margin: 0 4px; }
.j-card-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.j-card-excerpt { color: var(--ink-soft); max-width: 36rem; }

/* ---------- Article ---------- */
.post { padding-top: calc(var(--head-h) + clamp(40px, 6vw, 80px)); }
.post > article, .post-more { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.tldr, .post-body, .post-stay { max-width: 700px; margin-left: auto; margin-right: auto; }
/* The head spans the photo's width and shares its left edge; the title stays on one line (blog.js fits its size). */
.post-head { max-width: 1000px; margin-left: auto; margin-right: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-sans); font-size: var(--xs-size); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.crumbs a { color: var(--gold); }
.post-title { margin-top: var(--s-16); font-family: var(--font-sans); font-weight: 600; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--charcoal); white-space: nowrap; }
.post-meta { margin-top: var(--s-16); font-size: var(--small-size); color: var(--ink-mute); }
.post-hero { max-width: 1000px; margin: clamp(32px, 5vw, 56px) auto 0; overflow: hidden; border-radius: var(--r-photo); aspect-ratio: 16 / 9; background: var(--ivory-deep); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.tldr { margin-top: clamp(32px, 5vw, 56px); padding: clamp(24px, 3.4vw, 36px); border-radius: var(--r-card); background: var(--navy); color: #fff; }
.tldr-label { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sky-soft); }
.tldr ul { display: grid; gap: var(--s-12); margin-top: var(--s-16); }
.tldr li { position: relative; padding-left: 22px; font-size: 1.0625rem; line-height: 1.55; }
.tldr li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

.post-body { margin-top: clamp(40px, 5vw, 64px); font-size: 1.125rem; line-height: 1.75; color: #2d2a26; }
.post-body > * + * { margin-top: 1.2em; }
.post-body h2 { margin-top: 2.2em; font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--charcoal); text-wrap: balance; scroll-margin-top: calc(var(--head-h) + 48px); }
.post-body h3 { margin-top: 1.8em; font-family: var(--font-sans); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--charcoal); scroll-margin-top: calc(var(--head-h) + 48px); }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.6em; }
.post-body strong { font-weight: 600; color: var(--charcoal); }
.post-body a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
.post-body a:hover { color: var(--gold); }

.post-stay { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.4vw, 36px); border-radius: var(--r-card); background: var(--ivory-deep); }
.post-stay-title { margin-top: var(--s-12); font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.post-stay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-32); margin-top: var(--s-24); }

.post-more { margin-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.post-more-title { margin-bottom: var(--s-32); font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; }

/* ---------- Floating table of contents ----------
   A glass pill at the bottom centre of the screen shows the section you are reading and a ring that
   fills as you read. It opens a glass panel listing every section; the current one carries a navy bar. The panel grows
   from the pill and closes faster than it opens. */
.toc { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 31; transform: translateX(-50%); }
.toc[hidden] { display: block; visibility: hidden; }
.toc-pill { display: inline-flex; align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 2 * var(--gutter))); height: 52px; padding: 0 12px 0 22px; border: 1px solid rgba(31, 29, 26, 0.1); border-radius: var(--r-pill); background: rgba(252, 251, 248, 0.94); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 14px 34px -14px rgba(31, 29, 26, 0.38), 0 2px 6px rgba(31, 29, 26, 0.06); color: var(--charcoal); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; cursor: pointer; opacity: 0; transform: translateY(8px) scale(0.97); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), scale 140ms var(--ease-out); }
.toc.is-shown .toc-pill { opacity: 1; transform: none; pointer-events: auto; }
.toc-pill:active { scale: 0.97; }
.toc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.toc-current { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity 160ms var(--ease-out); }
.toc-current.is-swapping { opacity: 0; }
.toc-ring { flex: none; width: 26px; height: 26px; transform: rotate(-90deg); }
.toc-ring circle { fill: none; stroke: rgba(31, 29, 26, 0.14); stroke-width: 2; }
.toc-ring .toc-ring-fill { stroke: var(--navy); stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 62.83; }
.toc-panel { position: absolute; left: 50%; bottom: calc(100% + 10px); width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: min(68vh, 620px); display: flex; flex-direction: column; border: 1px solid rgba(31, 29, 26, 0.08); border-radius: var(--r-card); background: rgba(252, 251, 248, 0.96); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 30px 60px -24px rgba(31, 29, 26, 0.45), 0 2px 8px rgba(31, 29, 26, 0.06); transform-origin: bottom center; visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.97); transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms; }
.toc.is-open .toc-panel { visibility: visible; opacity: 1; transform: translateX(-50%); transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-drawer), visibility 0s; }
.toc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 10px 28px; }
.toc-panel-title { font-family: var(--font-sans); font-size: var(--xs-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.toc-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--charcoal); cursor: pointer; transition: background-color 160ms var(--ease-out); }
.toc-close:hover { background: rgba(31, 29, 26, 0.06); }
.toc-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 22px 14px; }
.toc-list a { position: relative; display: block; padding: 11px 14px; border-radius: 10px; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.35; color: var(--ink-soft); transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.toc-list a.is-sub { padding-left: 34px; font-size: 1rem; }
.toc-list a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--navy); opacity: 0; transition: opacity 160ms var(--ease-out); }
.toc-list a.is-active { color: var(--charcoal); font-weight: 500; }
.toc-list a.is-active::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .toc-list a:hover { background: rgba(31, 29, 26, 0.05); color: var(--charcoal); } }
@media (prefers-reduced-motion: reduce) {
  .toc-pill, .toc.is-shown .toc-pill, .toc-panel, .toc.is-open .toc-panel { transition: opacity 160ms var(--ease) !important; }
  .toc-pill { transform: none; }
  .toc-panel { transform: translateX(-50%); }
}

/* Elegane display headings; reading and interface typography remain separate. */
.post-title { font-family: "Elegane", Georgia, serif; font-weight: 400; font-synthesis: none; text-transform: none; letter-spacing: -0.02em; line-height: 1.08; }
 .post-title { white-space: normal; text-wrap: balance; }

/* Read links on Journal cards: an open-book icon in place of the arrow; it lifts slightly on hover. */
.read-icon { flex: none; width: 18px; height: 18px; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .read-link:hover .read-icon, .j-card:hover .read-icon { transform: translateY(-2px); } }