/* ============================================================
   console-pages.css — the Live Ops Console language applied to
   the interior pages (work / blog / books / photos / cv).
   Loaded AFTER console.css, which owns tokens, the status bar,
   panels, footer, buttons, and the modal/lightbox.
   ============================================================ */

/* ── Page header plate (shared by every interior page) ── */
.page-head { padding: 76px 0 30px; }
.page-head .op-tag { margin-bottom: 16px; }
.page-title { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7.5vw, 92px); line-height: 0.92; letter-spacing: -0.032em; }
.page-sub { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.6; color: var(--ink2); max-width: 60ch; margin-top: 18px; }
.page-sub b { color: var(--ink); font-weight: 500; }
.page-metaline { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--grid); font-family: var(--display); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0.1em; color: var(--ink3); text-transform: uppercase; }
.page-metaline b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Data figures (work telemetry) as framed panels ── */
.figpanels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
@media (max-width: 900px) { .figpanels { grid-template-columns: 1fr; } }
.figpanel { border: 1px solid var(--grid); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.figpanel .fp-img { background: var(--ink); position: relative; overflow: hidden; }
.figpanel .fp-img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; filter: grayscale(.15) contrast(1.03); transition: opacity .4s ease; }
html.js .figpanel .fp-img img { opacity: 0; }
html.js .figpanel .fp-img img.loaded { opacity: 1; }
.figpanel figcaption { padding: 15px 17px 17px; border-top: 1px solid var(--grid); }
.fp-no { display: block; font-family: var(--display); font-size: var(--fs-2); font-weight: 500; letter-spacing: 0.12em; color: var(--ink3); text-transform: uppercase; margin-bottom: 7px; }
.fp-cap { font-family: var(--body); font-size: var(--fs-5); line-height: 1.5; color: var(--ink2); }
.fp-cap b { color: var(--ink); font-weight: 500; }

/* ── Lately / changelog list ── */
.changelog { }
.clog-row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 15px 16px; border-top: var(--hair); }
.clog-row:first-child { border-top: none; }
.clog-date { font-family: var(--mono); font-size: var(--fs-3); letter-spacing: 0.06em; color: var(--ink3); text-transform: uppercase; padding-top: 3px; }
.clog-body { font-family: var(--body); font-size: var(--fs-5); line-height: 1.55; color: var(--ink2); }
.clog-body b { color: var(--ink); font-weight: 500; font-family: var(--display); font-size: var(--fs-5); letter-spacing: -0.01em; display: block; margin-bottom: 3px; }

/* ── Collection toolbar (blog / books / photos filters) ── */
.ctoolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 20px; padding: 13px 18px; border-bottom: 1px solid var(--grid); background: none; }
.ctoolbar .clabel { font-family: var(--display); font-size: var(--fs-2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }
.ctoolbar .filt { /* inherits .filt from console.css */ }
.ctoolbar .csearch { justify-self: end; position: relative; display: inline-flex; }
.ctoolbar .csearch::before { content: ">"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: var(--fs-4); color: var(--ink3); pointer-events: none; }
.ctoolbar .csearch input { font-family: var(--mono); font-size: var(--fs-4); color: var(--ink); background: var(--panel); border: 1px solid var(--grid2); border-radius: var(--r-sm); padding: 7px 11px 7px 24px; width: 220px; max-width: 100%; }
.ctoolbar .csearch input:focus { outline: none; border-color: var(--signal); }
.ctoolbar .csearch input::placeholder { color: var(--ink3); }

/* Toolbar standing on its own above a card grid (blog index) rather than
   capping a panel — it needs the full frame, and the grid needs the gap. */
.ctoolbar-solo { border: 1px solid var(--grid); border-radius: var(--r); margin-bottom: var(--gut); }
@media (max-width: 760px) {
  .ctoolbar { grid-template-columns: 1fr; }
  .ctoolbar .csearch { justify-self: stretch; }
  .ctoolbar .csearch input { width: 100%; }
}

/* ── Loadout / library grid (books.html) reuses .loadout + .slot from console.css ── */
.lib-groups { }
.lib-grp { border-top: var(--hair2); }
.lib-grp:first-child { border-top: none; }
.lib-grp-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 13px; background: none; border-bottom: 1px solid var(--grid); }
.lib-grp-name { font-family: var(--display); font-weight: 500; font-size: var(--fs-5); letter-spacing: -0.005em; }
.lib-grp-meta { font-family: var(--display); font-weight: 500; font-size: var(--fs-2); letter-spacing: 0.12em; color: var(--ink3); text-transform: uppercase; }
.lib-grp .loadout { border: none; }

/* ── Capture buffer grid (photos.html) reuses .buffer + .cap from console.css ── */

/* ── Article / reading page (blog posts) ── */
.reader { max-width: 760px; margin: 0 auto; padding: 0 var(--gut); }
.reader-head { padding: 44px 0 0; }
.reader-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 24px; }
.reader-back:hover { color: var(--hot-text); }
.reader-kicker { font-family: var(--display); font-size: var(--fs-3); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }
.reader h1, .reader-title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 52px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 16px; }
.reader-sub { font-family: var(--body); font-style: italic; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink2); margin-bottom: 18px; }
.reader-meta { font-family: var(--display); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 13px 0; margin-bottom: 40px; }
.reader-body { font-family: var(--body); }
.reader-body p { font-size: var(--fs-read); line-height: 1.75; color: var(--ink); margin: 0 0 22px; }
.reader-body h2 { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: var(--fs-3); letter-spacing: 0.14em; color: var(--ink3); margin: 52px 0 18px; padding-top: 18px; border-top: 1px solid var(--grid); }
.reader-body h3 { font-family: var(--display); font-weight: 500; font-size: var(--fs-read-h); letter-spacing: -0.01em; margin: 28px 0 11px; }
.reader-body a:not(.reader-back) { color: var(--hot-text); text-decoration: underline; text-underline-offset: 3px; }
.reader-body blockquote { border-left: 1px solid var(--ink); padding: 2px 0 2px 22px; margin: 30px 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.3; color: var(--ink); }
.reader-body ul, .reader-body ol { font-size: var(--fs-read); line-height: 1.7; color: var(--ink); margin: 0 0 22px; padding-left: 24px; }
.reader-body li { margin-bottom: 8px; }
.reader-body img { width: 100%; height: auto; border-radius: var(--r); margin: 34px 0; transition: opacity .4s ease; }
html.js .reader-body img { opacity: 0; }
html.js .reader-body img.loaded { opacity: 1; }
.reader-body code { font-family: var(--mono); font-size: var(--fs-5); background: var(--panel-alt); border: 1px solid var(--grid); border-radius: var(--r-sm); padding: 1px 5px; }
.reader-body pre { background: var(--ink); color: var(--bg); border-radius: var(--r); padding: 22px; overflow-x: auto; margin: 0 0 24px; font-size: var(--fs-5); line-height: 1.6; }
.reader-end { text-align: center; margin: 56px 0 8px; font-family: var(--display); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0.3em; color: var(--ink3); }
.progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--ink); z-index: 101;
  transform: scaleX(0); transform-origin: left; transition: transform .1s linear; }

/* ── CV page ── */
.cv-grid { display: grid; grid-template-columns: 1fr; gap: var(--gut); }
.cv-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
@media (max-width: 820px) { .cv-two { grid-template-columns: 1fr; } }
.cv-entry { padding: 16px; border-top: var(--hair); }
.cv-entry:first-child { border-top: none; }
.cv-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cv-entry-role { font-family: var(--display); font-weight: 500; font-size: var(--fs-6); letter-spacing: -0.01em; }
.cv-entry-org { font-family: var(--display); font-weight: 500; font-size: var(--fs-3); color: var(--ink3); letter-spacing: 0.1em; text-transform: uppercase; }
.cv-entry-date { font-family: var(--mono); font-size: var(--fs-3); color: var(--ink3); letter-spacing: 0.04em; white-space: nowrap; }
.cv-entry p { font-family: var(--body); font-size: var(--fs-5); line-height: 1.55; color: var(--ink2); margin-top: 8px; }
.cv-entry ul { list-style: none; margin-top: 10px; }
.cv-entry li { font-family: var(--body); font-size: var(--fs-5); line-height: 1.5; color: var(--ink2); padding-left: 16px; position: relative; margin-bottom: 5px; }
.cv-entry li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: var(--ink3); }
.cv-skills { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; }
.cv-skill { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink); background: var(--panel-alt); border: 1px solid var(--grid); border-radius: var(--r-sm); padding: 5px 10px; }

/* ── Author credential (article foot) ──────────────────────────────
   The site has no portfolio section any more. This is where the proof
   does its work: at the end of an argument, when the reader is deciding
   whether the person making it knows the subject. Deliberately quiet —
   a credential, not a second dashboard. */
.byline { margin-top: 52px; border: 1px solid var(--grid); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.byline-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px 13px;
  background: none; border-bottom: 1px solid var(--grid); }
.byline-h h2 { font-family: var(--display); font-weight: 500; font-size: var(--fs-5); letter-spacing: 0.005em; }
.byline-h .plink { margin-left: auto; font-family: var(--display); font-size: var(--fs-3); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hot-text); }
.byline-h .plink:hover { text-decoration: underline; text-underline-offset: 3px; }
.byline-b { padding: 22px 20px 0; }
.byline-name { font-family: var(--display); font-weight: 500; font-size: var(--fs-7); letter-spacing: -0.015em; }
.byline-name span { color: var(--ink3); font-weight: 400; font-size: 0.66em; letter-spacing: 0; }
.byline-role { font-family: var(--display); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink3); margin-top: 8px; line-height: 1.5; }
.byline-lead { font-family: var(--body); font-size: var(--fs-5); line-height: 1.6; color: var(--ink2);
  margin-top: 12px; max-width: 58ch; }
.byline-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px -20px 0;
  border-top: 1px solid var(--grid); }
.byline-stats > div { padding: 15px 20px 17px; border-left: 1px solid var(--grid); min-width: 0; }
.byline-stats > div:first-child { border-left: none; }
.byline-stats dt { font-family: var(--mono); font-size: var(--fs-1); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink3); }
.byline-stats dd { font-family: var(--mono); font-weight: 700; font-size: var(--fs-7); line-height: 1;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.byline-stats dd i { font-style: normal; font-size: 0.5em; color: var(--ink3); }
@media (max-width: 520px) {
  .byline-stats { grid-template-columns: 1fr; }
  .byline-stats > div { border-left: none; border-top: var(--hair); }
  .byline-stats > div:first-child { border-top: none; }
}

/* ── Related posts (article foot) ── */
.reader-more { margin-top: 40px; }
.reader-more h2 { font-size: var(--fs-read-h); }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
@media (max-width: 640px) { .related { grid-template-columns: 1fr; } }
.rel { border: 1px solid var(--grid); border-radius: var(--r); padding: 16px 17px 18px; background: var(--panel); transition: border-color .15s; }
.rel:hover { border-color: var(--ink3); }
.rel-cat { display: block; font-family: var(--display); font-size: var(--fs-2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; }
.rel-t { font-family: var(--display); font-weight: 500; font-size: var(--fs-5); line-height: 1.2; color: var(--ink); }
.rel:hover .rel-t { color: var(--hot-text); }

/* ── Resource row (books.html — Courses / Podcasts / Blogs) ──
   Lighter than a Loadout slot: a ruled list, no cover art, since
   these don't have real cover images to show (and CLAUDE.md rules
   out stock provider logos). Title + source on one line, an
   optional note below, a link-out arrow at the end. ── */
.reslist { display: flex; flex-direction: column; }
.res-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--grid); text-decoration: none; transition: background-color .15s, filter .1s ease-out, opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.reslist .res-row:last-child { border-bottom: none; }
.res-row:hover { background: var(--panel-alt); }
.res-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink3); transition: color .15s; }
.res-icon svg { display: block; width: 100%; height: 100%; }
.res-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--grid);
  transition: opacity .4s ease; }
/* a real chosen image earns real presence — a proper square thumbnail, not
   the tiny type-glyph a plain icon gets. The row stays a compact list either way. */
.res-icon:has(img) { width: 56px; height: 56px; margin-top: 0; }
.res-icon:has(img) img { border-radius: var(--r); }
html.js .res-icon img { opacity: 0; }
html.js .res-icon img.loaded { opacity: 1; }
.res-row:hover .res-icon { color: var(--hot-text); }
.res-body { flex: 1 1 0%; min-width: 0; }
.res-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; line-height: 1.2; }
.res-t { font-family: var(--display); font-weight: 500; font-size: var(--fs-5); color: var(--ink); }
.res-row:hover .res-t { color: var(--hot-text); }
.res-src { font-family: var(--mono); font-size: var(--fs-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.res-note { font-family: var(--body); font-size: var(--fs-5); line-height: 1.5; color: var(--ink2); margin-top: 4px; }
.res-go { flex: none; align-self: center; font-family: var(--mono); font-size: var(--fs-3); color: var(--ink3); }
.res-row:hover .res-go { color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .reader-body img, .figpanel .fp-img img, .res-icon img, .progress-bar { transition: none !important; }
}