/* =========================================================
   renezou.com — design tokens
   Palette taken directly from Rene's reference deck.
   Structural pattern (fixed sidebar + scrolling content,
   essay index, essay detail with TOC, stack page) modeled
   on dianaseo.xyz.
   ========================================================= */

:root {
  --ink: #17171a;
  --forest: #2f4f3f;
  --muted: #5b5b58;
  --border: #dcdad2;
  --surface: #f2f1ec;
  --bg: #fbfbf9;

  --live: #ddfb8b;
  --live-ink: #3a4712;
  --progress: #d3bcf7;
  --progress-ink: #4b3169;
  --mint: #72f5af;
  --purple: #d7bbfb;

  /* accent tint — forest at low opacity, used for chips + active states */
  --accent-tint: rgba(47, 79, 63, 0.1);
  --accent-glow: rgba(221, 251, 139, 0.4);

  /* Publication cadence (grey/white cards) — pulled from the Eklipse brand
     guide rather than the site's own forest palette: Starry Nox for the
     "in the works" grey card, Nova Blanc for the "published" white card,
     Alfa Green for the "in the works" label chip, Tertius Lavender (the
     existing --progress token) for the "published" label chip. */
  --pub-progress-bg: rgba(89, 89, 89, 0.06);
  --pub-progress-border: rgba(89, 89, 89, 0.22);
  --pub-progress-label: #595959;
  --pub-published-bg: #ffffff;
  --pub-published-border: var(--border);
  --pub-progress-accent: #60ce95;  /* Alfa Green — "In the works" label */

  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — six sizes, plus one relative accent. */
  --text-xs: 12px;      /* labels, eyebrows, mono metadata, filters */
  --text-sm: 13px;      /* bio, card blurbs, social links */
  --text-md: 15px;      /* body, nav, essay body */
  --text-lg: 19px;      /* ledes, card headings, name, pull quote */
  --text-xl: 26px;      /* page titles */
  --text-2xl: 32px;     /* essay titles */
  --text-accent: 1.1em; /* italic serif accent inside a paragraph */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-label: 0.1em;
  --tracking-tight: 0.02em;

  --sidebar-w: 402px;
  --avatar-size: 58px;
  --identity-gap: 14px;
  --content-max: 700px;
  --gap: 24px;
  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a.underline-link { border-bottom: 1px solid var(--border); }
a.underline-link:hover { border-color: var(--ink); }

img { max-width: 100%; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--forest);
  background: var(--accent-tint);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Shell: sidebar + main ---------- */

.shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  padding: 40px 34px 40px 37px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid var(--border);
}

.sidebar::-webkit-scrollbar { width: 0; }

/* Name + avatar/lines are one block so the sidebar's 26px flex gap doesn't
   open up between them. The name is indented by the avatar column width
   (--avatar-size + --identity-gap) so it sits directly above "Founder",
   matching the reference layout. */
.identity-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.identity-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
  padding-left: calc(var(--avatar-size) + var(--identity-gap));
}

.identity-row {
  display: flex;
  gap: var(--identity-gap);
  align-items: flex-start;
}

.avatar-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: none;
}

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}

/* Small brand-color accent, filling the space left below the avatar (the
   identity-lines column runs taller than the avatar). Reuses the same
   palette already used for the "in the works"/"published" cadence chips
   on the Writing page, so it reads as one consistent accent system. */
.avatar-accents {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  height: 46px;
}

.accent-bar { border-radius: 3px; }
.accent-bar--a { width: 14px; height: 14px; background: var(--pub-progress-accent); }
.accent-bar--b { width: 14px; height: 28px; background: var(--progress); }
.accent-bar--c { width: 14px; height: 46px; background: var(--live); }

.identity-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--muted);
  padding-top: 2px;
}

.identity-lines .label {
  color: var(--forest);
  font-weight: var(--weight-semibold);
  margin-right: 4px;
}

.identity-lines a:hover { color: var(--forest); }

.bio-wrap {
  position: relative;
  border-radius: var(--radius);
}
.bio-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: var(--radius);
  /* --mx/--my are updated from a page-wide mousemove listener (see shell.js),
     not just while hovering this element — the circle's own falloff (it goes
     transparent past 70% of its radius) is what makes the glow fade in as the
     cursor approaches from anywhere on the page and fade out as it leaves.
     The off-screen fallback keeps it invisible before the first mousemove. */
  background: radial-gradient(
    220px circle at var(--mx, -9999px) var(--my, -9999px),
    var(--accent-glow),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.bio {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
}

.bio strong { color: var(--ink); font-weight: var(--weight-semibold); }

nav.primary-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

nav.primary-nav a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

nav.primary-nav a:hover { background: var(--surface); }
nav.primary-nav a.active { background: var(--accent-tint); color: var(--forest); }
nav.primary-nav a .sub { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-regular); }

.meta-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-sm);
}

.meta-row {
  display: flex;
  gap: 10px;
}

.meta-row .k {
  width: 52px;
  flex: none;
  color: var(--muted);
  text-transform: lowercase;
}

.meta-row .v { color: var(--ink); }
.meta-row .dot { color: var(--live-ink); }

.building-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}
.building-badge .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(214,253,120,0.35);
}

.social-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-sm);
}
.social-row a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.social-row a:hover { color: var(--forest); }
.social-row a:hover svg { transform: translate(1px, -1px); }
.social-row svg {
  flex: none;
  width: 11px;
  height: 11px;
  transition: transform 0.15s ease;
}

.newsletter {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
}
.newsletter .nl-title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.newsletter .nl-blurb {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.newsletter form {
  display: flex;
  gap: 6px;
}
.newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg);
  font-family: inherit;
}
.newsletter button {
  padding: 8px 12px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.newsletter button:hover { opacity: 0.85; }
.newsletter .nl-note { font-size: var(--text-xs); color: var(--muted); margin-top: 8px; }

.cmdk-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: var(--text-sm);
  color: var(--muted);
  background: var(--bg);
  margin-top: auto;
}
.cmdk-trigger kbd {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface);
}

/* ---------- Main content ---------- */

main {
  flex: 1;
  min-width: 0;
  padding: 36px 48px 120px;
}

.page-header { margin-bottom: 8px; }
.page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--content-max);
}
.essay-count-badge {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}
.page-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  margin: 4px 0 0;
}
.page-sub {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: 6px;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--muted);
  background: var(--surface);
  width: 100%;
  max-width: var(--content-max);
}

.lede {
  max-width: var(--content-max);
  font-size: var(--text-lg);
  line-height: 1.6;
  margin: 22px 0 32px;
}
.lede em { color: var(--forest); font-style: italic; }

/* featured box */
.featured-box {
  max-width: var(--content-max);
  /* Starry Argent (#eeece3, Eklipse brand guide) — the "start here" highlight */
  border: 1px solid #dcd9cc;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 34px;
  background: #eeece3;
}
.featured-box .fb-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--forest);
  margin-bottom: 12px;
}
.fb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fb-card h3 { font-size: var(--text-md); margin: 0 0 6px; font-weight: var(--weight-semibold); }
.fb-card p { font-size: var(--text-sm); color: var(--muted); margin: 0; line-height: 1.5; }

/* filter pills */
.filters {
  max-width: var(--content-max);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.filters button {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.filters button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.filters button:hover:not(.active) { border-color: var(--ink); color: var(--ink); }

/* essay list */
.essay-list {
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
}
.essay-card {
  display: block;
  padding: 18px 4px;
  border-top: 1px solid var(--border);
}
.essay-list a.essay-card:hover { background: var(--surface); margin: 0 -12px; padding: 18px 16px; border-radius: var(--radius-sm); }
.essay-card:last-child { border-bottom: 1px solid var(--border); }

.essay-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag.status-live { background: var(--live); color: var(--live-ink); }
.tag.status-progress { background: var(--progress); color: var(--progress-ink); }
.tag.category { background: transparent; border: 1px solid var(--border); color: var(--muted); text-transform: none; font-weight: var(--weight-medium); }

.essay-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 4px;
  font-family: var(--font-serif);
}
.essay-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
  max-width: 560px;
}
.essay-card.locked { opacity: 0.72; cursor: default; }
.essay-card.locked h3::after {
  content: "coming soon";
  display: inline-block;
  margin-left: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
  font-family: var(--font-sans);
  text-transform: none;
  vertical-align: middle;
}

/* ---------- Essay detail ---------- */

.essay-shell {
  display: grid;
  grid-template-columns: 160px minmax(0, var(--content-max));
  gap: 40px;
  max-width: 900px;
}
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--ink); }

.essay-toc {
  position: sticky;
  top: 60px;
  align-self: start;
  font-size: var(--text-xs);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}
.essay-toc a { display: flex; align-items: center; gap: 8px; }
.essay-toc a::before { content: "—"; color: var(--border); }
.essay-toc a:hover, .essay-toc a.active { color: var(--ink); }
.essay-toc a.active::before { color: var(--forest); }

.essay-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.essay-meta-row .read-time { font-size: var(--text-xs); color: var(--muted); }
.essay-meta-row .pub-date { font-size: var(--text-xs); color: var(--muted); }
.essay-meta-row .pub-date + .read-time:not(:empty)::before { content: "·"; margin-right: 10px; }

.essay-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  margin: 0 0 16px;
}
.essay-dek {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.essay-body { font-size: var(--text-md); line-height: 1.75; }
.essay-body h2 {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 40px 0 14px;
}
.essay-body p { margin: 0 0 18px; }
.essay-body p.pull {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--ink);
  border-left: 2px solid var(--live);
  padding-left: 18px;
  margin: 28px 0;
}
.essay-body .stat-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0;
}
.essay-body .stat-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 0.8fr;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  border-top: 1px solid var(--border);
}
.essay-body .stat-row:first-child { border-top: none; background: var(--surface); font-weight: var(--weight-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

.essay-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---------- Work page ---------- */

.work-block {
  max-width: var(--content-max);
  margin-bottom: 40px;
}
.work-block h2 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.work-block h2 .diamond { color: var(--forest); }
.work-block p { margin: 0 0 14px; font-size: var(--text-md); line-height: 1.7; color: var(--ink); }
.work-block .lead-p { color: var(--muted); }

/* Small tracked-caps kicker under a work-block h2 (e.g. "The Story"), in the
   same mono-metadata voice as tags/essay-meta elsewhere, deliberately not
   using .eyebrow's pill style so it doesn't compete with the page's own
   top eyebrow badge. */
.story-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -6px 0 14px;
}
/* Same tagline placed directly under a page title (Work page). */
.page-tagline { margin: 12px 0 0; }

/* ---------- Stack page ---------- */

.stack-grid {
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
}
.stack-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stack-card-top { display: flex; align-items: center; gap: 10px; }
.stack-card h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
.stack-card p { font-size: var(--text-sm); color: var(--muted); margin: 0; line-height: 1.6; }
.stack-card .icon-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.loop-diagram {
  max-width: var(--content-max);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  justify-content: center;
}

/* ---------- Placeholder page ---------- */
.placeholder-note {
  max-width: var(--content-max);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--muted);
  font-size: var(--text-md);
}

/* ---------- Command palette modal ---------- */

.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 26, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-panel {
  width: min(520px, 90vw);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(23,23,26,0.18);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-md);
}
.cmdk-list { padding: 8px; max-height: 320px; overflow-y: auto; }
.cmdk-list a {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}
.cmdk-list a:hover, .cmdk-list a:focus { background: var(--surface); }
.cmdk-list .sub { color: var(--muted); font-size: var(--text-xs); }

/* ---------- Footer meta on mobile ---------- */

.mobile-topbar { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: relative;
    width: 100%;
    flex: none;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 24px;
  }
  main { padding: 32px 24px 80px; }
  .essay-shell { grid-template-columns: 1fr; }
  .essay-toc { display: none; }
  .fb-grid { grid-template-columns: 1fr; }
  .essay-title { font-size: var(--text-xl); }
}

/* ===== Cursor spotlight + sidebar scrollbar ===== */
:root {
  --spotlight: rgba(214, 253, 120, 0.26);
  --scroll-thumb: rgba(47, 79, 63, 0.28);
}

.shell { position: relative; z-index: 1; }

.cursor-spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  background: radial-gradient(
    320px circle at var(--sx, -9999px) var(--sy, -9999px),
    var(--spotlight),
    transparent 72%
  );
}

body.spotlight-active .cursor-spotlight { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cursor-spotlight { display: none; }
}

.sidebar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 250ms ease;
}
.sidebar:hover { scrollbar-color: var(--scroll-thumb) transparent; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
  transition: background 250ms ease;
}
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }

/* Serif italic accent phrase in page ledes */
.lede em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-accent);
  letter-spacing: 0.005em;
  color: var(--forest);
}

/* =========================================================
   Diana-reference design pass
   ========================================================= */

:root {
  --hover-card: #ffffff;
}

/* --- Thesis line under the signup form --- */
.nl-thesis {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}

/* --- Expandable search button, in the page header row --- */
.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: none;
  width: auto;
  max-width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  transition: max-width 320ms cubic-bezier(.22,.61,.36,1), background 200ms ease, border-color 200ms ease;
}
.search-toggle .search-icon {
  width: 32px;
  flex: none;
  display: grid;
  place-items: center;
}
.search-toggle .search-icon svg { width: 14px; height: 14px; }
.search-toggle .search-label {
  font-size: var(--text-sm);
  padding-right: 8px;
  opacity: 0;
  transition: opacity 180ms ease 60ms;
}
.search-toggle kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 10px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 180ms ease 60ms;
}
.search-toggle:hover,
.search-toggle:focus-visible {
  max-width: 260px;
  background: var(--hover-card);
  border-color: var(--forest);
  color: var(--forest);
}
.search-toggle:hover .search-label,
.search-toggle:focus-visible .search-label,
.search-toggle:hover kbd,
.search-toggle:focus-visible kbd { opacity: 1; }

.page-header-top { gap: 10px; }

/* --- Links: mono, arrow hard right, white box on hover --- */
/* Indented to align with the "Currently building EKLIPSE" text (after the
   status dot), not with the meta-block's "local"/"based" labels. */
.social-row { gap: 1px; padding-left: 12px; }
.social-row a {
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 9px 10px;
  margin: 0 -10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.social-row a:hover {
  background: var(--hover-card);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(23,23,26,0.05);
  color: var(--ink);
}
.social-row a:hover svg { color: var(--forest); }

/* --- Meta block: mono, wider key column, roomier rows --- */
.meta-block { font-family: var(--font-mono); font-size: var(--text-xs); gap: 11px; }
.meta-row { gap: 12px; }
.meta-row .k { width: 58px; }
.building-badge { font-family: var(--font-mono); font-size: var(--text-xs); }

/* --- Essay list: index line, white hover box, closing note --- */
.list-index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  max-width: var(--content-max);
  margin: 26px 0 2px;
  color: var(--muted);
}
.list-index .li-year { color: var(--forest); font-weight: var(--weight-semibold); }
.list-index .li-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.list-index .li-count { color: var(--muted); }

.essay-list a.essay-card:hover {
  background: var(--hover-card);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(23,23,26,0.06);
  margin: 0 -12px;
  padding: 18px 16px;
}

.list-outro {
  max-width: var(--content-max);
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Framed white card on article hover. Padding drops by 1px to offset the
   border so the row doesn't shift when it appears. */
.essay-list a.essay-card:hover {
  border: 1px solid rgba(220, 218, 210, 0.75);
  padding: 17px 15px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(23, 23, 26, 0.045);
}

/* Count badge and search label in mono, matching the meta block. */
.essay-count-badge { font-family: var(--font-mono); font-size: var(--text-xs); }
.search-toggle .search-label { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Profile intro lines in mono, matching the meta block. Mono runs wider than
   Inter, so the size steps down to keep the lines inside the sidebar. */
.identity-lines {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  gap: 7px;
}

/* Profile intro lines in mono, sized to hold two lines in the 320px column. */
.identity-lines {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  gap: 7px;
}

/* Meta block down from 12px to match the profile intro. */
.meta-block,
.building-badge { font-size: var(--text-xs); }

/* Nav rows get the same white card on hover as the links list. Padding drops
   1px to offset the border so rows don't shift. The active row keeps its green
   tint even while hovered, so it stays identifiable as the current page. */
nav.primary-nav a:hover {
  background: var(--hover-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(23, 23, 26, 0.05);
  padding: 6px 7px;
}
nav.primary-nav a.active:hover {
  background: var(--accent-tint);
  border-color: transparent;
  box-shadow: none;
}

/* Nav rows get the same white card on hover as the links list. Padding drops
   1px to offset the border so rows don't shift. The active row keeps its green
   tint even while hovered, so it stays identifiable as the current page. */
nav.primary-nav a:hover {
  background: var(--hover-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(23, 23, 26, 0.05);
  padding: 6px 7px;
}
nav.primary-nav a.active:hover {
  background: var(--accent-tint);
  border-color: transparent;
  box-shadow: none;
}

/* Type and date at the right of each article's tag row. */
.essay-meta {
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Article titles up a step. */
.essay-card h3 { font-size: var(--text-lg); }

/* Chevron in a left gutter beside each article title, in the site mono.
   Entry content is indented 40px so the chevrons form their own column.
   On hover (published entries only) the chevron darkens to the title
   colour and nudges right; hover padding is 40 + 12 margin - 1 border. */
.essay-card { padding-left: 40px; }
.essay-list a.essay-card:hover { padding-left: 51px; }
.essay-card h3 { position: relative; }
.title-chevron {
  position: absolute;
  left: -30px;
  /* Aligned to the first line's cap-height rather than vertically centered
     on the whole h3 block, so it still sits right next to the title even
     when a longer title wraps to a second line. */
  top: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: #8a8a85;
  transition: color 180ms ease, transform 180ms ease;
}
.essay-list a.essay-card:hover .title-chevron {
  color: var(--ink);
  transform: translate(2px, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .title-chevron { transition: none; }
}

/* Work page closing note: a divider in place of the heading, then the
   paragraph set larger in the serif, and the inbox link styled like the
   sidebar's "Currently building" line (lime dot, mono, thin underline). */
/* Large bio photo: 3:2 frame across the content column. Empty, it shows
   as a plain placeholder card; an <img> inside fills it edge to edge. */
.bio-photo {
  margin: 4px 0 24px;
  width: 100%;
  max-width: var(--content-max);
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two portrait photos side by side; each tile is a 2:3 card, so the pair
   reads as one 4:3 block across the column. */
.bio-photo--pair {
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bio-photo--pair img {
  aspect-ratio: 2 / 3;
  height: auto;
  border-radius: 18px;
  background: var(--surface);
  object-position: center top;
}
@media (max-width: 520px) {
  .bio-photo--pair { gap: 8px; }
  .bio-photo--pair img { border-radius: 12px; }
}

.serif-block p {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.work-block.cta { margin-top: -6px; }
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
}
.cta-link::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(214, 253, 120, 0.35);
}
.cta-link .cta-text {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}
.cta-link:hover .cta-text { border-color: var(--ink); }

/* Stack page loop: each circle lights up as the travelling pulse reaches
   it. The pulse takes 6s per lap and the nodes sit a third of a lap apart,
   so their animations are offset by 2s each. */
.loop-node { animation: loop-light 6s ease-in-out infinite; }
.loop-node.n-ideas     { animation-delay: 0s; }
.loop-node.n-companies { animation-delay: 2s; }
.loop-node.n-capital   { animation-delay: 4s; }
@keyframes loop-light {
  0%, 22%, 100% { fill-opacity: 0.38; stroke-width: 1.4; }
  6%            { fill-opacity: 0.78; stroke-width: 2.4; }
}
@media (prefers-reduced-motion: reduce) {
  .loop-node { animation: none; }
  .loop-pulse { display: none; }
}

/* Accent phrase: the same italic serif in forest green used for the
   emphasised words in page ledes ("global innovation hubs"). */
em.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-accent);
  letter-spacing: 0.005em;
  color: var(--forest);
}


/* Cycle table in "What is an Eklipse?": a narrow number column, equal
   columns for theme and outcome so "Know who you are" stays on one line,
   and the numbers, headers and durations in mono like the rest of the
   site's metadata. On phones the rows stack instead of squeezing. */
.essay-body .stat-table {
  border-radius: 12px;
  margin: 28px 0;
  background: var(--bg);
}
.essay-body .stat-row {
  grid-template-columns: 2.25rem minmax(0, 1.25fr) minmax(0, 1.25fr) 5.5rem;
  column-gap: 20px;
  align-items: baseline;
  padding: 15px 20px;
  font-size: var(--text-md);
  line-height: 1.45;
}
.essay-body .stat-row:first-child {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  padding-block: 11px;
}
.essay-body .stat-row:not(:first-child) > div:nth-child(1) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--forest);
}
.essay-body .stat-row:not(:first-child) > div:nth-child(2) { font-weight: var(--weight-medium); color: var(--ink); }
.essay-body .stat-row:not(:first-child) > div:nth-child(3) {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-accent);
  color: var(--forest);
}
.essay-body .stat-row > div:nth-child(4) { white-space: nowrap; text-align: right; }
.essay-body .stat-row:not(:first-child) > div:nth-child(4) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

@media (max-width: 560px) {
  .essay-body .stat-row:first-child { display: none; }
  .essay-body .stat-row:nth-child(2) { border-top: none; }
  .essay-body .stat-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num theme" "num outcome" "num time";
    row-gap: 2px;
    padding: 14px 16px;
  }
  .essay-body .stat-row > div:nth-child(1) { grid-area: num; }
  .essay-body .stat-row > div:nth-child(2) { grid-area: theme; }
  .essay-body .stat-row > div:nth-child(3) { grid-area: outcome; }
  .essay-body .stat-row > div:nth-child(4) { grid-area: time; text-align: left; }
}
/* 3-column comparison tables (e.g. founder types: who / capital / ambition) */
.essay-body .stat-table.cols-3 .stat-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
}
.essay-body .stat-table.cols-3 .stat-row:not(:first-child) > div:nth-child(1) {
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.essay-body .stat-table.cols-3 .stat-row:not(:first-child) > div:nth-child(2) {
  font-weight: inherit;
  color: inherit;
}
.essay-body .stat-table.cols-3 .stat-row:not(:first-child) > div:nth-child(1) strong { color: var(--forest); }
@media (max-width: 560px) {
  .essay-body .stat-table.cols-3 .stat-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    row-gap: 4px;
  }
  .essay-body .stat-table.cols-3 .stat-row > div { grid-area: auto; }
  .essay-body .stat-table.cols-3 .stat-row:not(:first-child) > div:nth-child(2)::before { content: "Capital — "; color: var(--muted); }
  .essay-body .stat-table.cols-3 .stat-row:not(:first-child) > div:nth-child(3)::before { content: "Ambition — "; font-style: normal; color: var(--muted); }
}

/* ---------- Publication cadence: in-progress (grey) vs published (white) ----------
   Reuses the existing .essay-card / .tag / .locked "coming soon" styling —
   only adds the grid grouping and grey/white card treatment on top, so every
   existing label (status tag, category tag, type · date meta, chevron,
   "coming soon") still renders exactly as it did in the flat list. */
.pub-groups { margin-top: 22px; }
.pub-group { margin-bottom: 30px; }
.pub-group:last-child { margin-bottom: 0; }
.pub-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pub-group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.pub-group--progress .pub-group-label { background: var(--pub-progress-accent); color: var(--live-ink); }
.pub-group--published .pub-group-label { background: var(--progress); color: var(--progress-ink); }
.pub-group-count {
  font-size: var(--text-xs);
  color: var(--muted);
  font-family: var(--font-mono);
}

.pub-grid {
  display: grid;
  gap: 14px;
  align-items: stretch;
}
.pub-grid--progress { grid-template-columns: repeat(3, 1fr); }
.pub-grid--published { grid-template-columns: 1fr; }
@media (max-width: 780px) {
  .pub-grid--progress { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pub-grid--progress { grid-template-columns: 1fr; }
}

.essay-list .pub-card {
  /* min-width: 0 overrides the grid item's default min-width: auto, which
     otherwise sizes each 1fr column to its widest unbreakable content (e.g.
     the "Entrepreneurship" category tag on a nowrap line) instead of an
     even third/half — the classic CSS Grid "blowout" bug. */
  min-width: 0;
  /* No border-top: none cancellation here on purpose — .essay-list .pub-card
     (2 classes) would otherwise out-specificity .pub-card--progress /
     .pub-card--published's own `border: 1px solid ...` shorthand (1 class)
     regardless of source order, silently dropping just the top edge of the
     card's frame. The base .essay-card { border-top: ... } row-separator
     rule is lower specificity than the variants' border, so it loses on
     its own without needing an explicit cancel here. */
  margin: 0;
  padding: 16px 16px 16px 34px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.essay-list .pub-card .essay-card-top { flex-wrap: wrap; row-gap: 5px; }
/* Type · date moves from the tag row (top-right) to the bottom edge of the
   card instead, but only for the "in the works" grid cards — margin-top:
   auto in the card's flex column pushes it down regardless of how long the
   teaser above it runs, so it lines up evenly along the bottom of every
   card in a row. Published cards are stacked full-width now, so their meta
   stays in the top tag row like the original list. */
.essay-list .pub-card--progress .essay-meta {
  margin-left: auto;
  margin-top: auto;
  padding-left: 0;
  padding-top: 12px;
}
.essay-list .pub-card .title-chevron { left: -22px; font-size: var(--text-sm); }
.essay-list .pub-card h3 { font-size: var(--text-md); }
.essay-list .pub-card--progress h3 { font-size: var(--text-sm); letter-spacing: -0.2px; }
.essay-list .pub-card p {
  font-size: var(--text-sm);
  max-width: none;
  /* Clamp instead of letting mismatched teaser lengths stretch some cards
     much taller than their row-mates once the grid columns are even width. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.essay-list .pub-card--published p { -webkit-line-clamp: 4; }
/* The "in the works" cards now carry short, purpose-written cadenceTeaser
   copy (see content/essays.json) rather than the full essay teaser, so they
   get more headroom than the 3-line default — this is a safety cap, not
   meant to visibly truncate that copy. */
.essay-list .pub-card--progress p { -webkit-line-clamp: 10; }

.pub-card--progress {
  border: 1px solid var(--pub-progress-border);
  background: var(--pub-progress-bg);
  padding-left: 28px;
}
.pub-card--progress .title-chevron { left: -18px; }

.pub-card--published {
  border: 1px solid var(--pub-published-border);
  background: var(--pub-published-bg);
}
.essay-list .pub-card--published h3 { font-size: var(--text-lg); }
.essay-list .pub-card--published p { font-size: var(--text-sm); }

.essay-list a.pub-card--published:hover {
  margin: 0;
  padding: 15px 15px 15px 36px;
  border: 1px solid rgba(23, 23, 26, 0.16);
  border-radius: var(--radius);
  background: var(--pub-published-bg);
  box-shadow: 0 3px 14px rgba(23, 23, 26, 0.07);
}



/* Page kicker — light grey, widely tracked mono label above the page title
   (e.g. "WRITING — A WORKING LEDGER"), after dianaseo.xyz. */
.page-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);  /* same grey as the essay count */
}

/* =========================================================
   Mock-up pass (Oct 2026): portrait card + Bio button in the
   sidebar, In Transit mark beside the Writing title.
   ========================================================= */

/* Sidebar identity: tall portrait card on the left; name, mono lines and
   the Bio pill stacked on the right, top-aligned with the photo. */
.identity-block {
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}
.portrait {
  width: 140px;
  height: 207px;
  flex: none;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 18px;
  background: var(--surface);
}
.identity-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.identity-block .identity-name { padding-left: 0; line-height: 1.2; }
.bio-button {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg);
  transition: background 180ms ease, border-color 180ms ease;
}
.bio-button:hover { background: #ffffff; border-color: var(--forest); color: var(--forest); }
.bio-button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* Sidebar bio: smaller and tighter, set across the wider column. */
.bio { font-size: var(--text-xs); line-height: 1.45; }

/* Writing title row: In Transit mark beside a larger title. */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}
.title-mark { width: 72px; height: auto; flex: none; }
.page-title--mark { font-size: var(--text-2xl); margin: 0; line-height: 1.1; }
.page-title-row + * { margin-top: 0; }
.page-header:has(.page-title-row) + .lede { margin-top: 34px; margin-bottom: 48px; }
/* Pages without the title mark (Work, Stack, Investing): same distance
   from the grey kicker to the title as the In Transit header. */
.page-kicker + .page-title { margin-top: 47px; line-height: 1.1; }
@media (max-width: 560px) {
  .page-kicker + .page-title { margin-top: 34px; }
}

@media (max-width: 560px) {
  .portrait { width: 112px; height: 166px; }
  .title-mark { width: 56px; }
  .page-title-row { gap: 18px; margin-top: 28px; }
}

/* Phones: keep "WRITING — A WORKING LEDGER", the essay count and search on
   one line. Type scales with the screen (capped at 11px) and tracking,
   gaps and the search button tighten so the row fits down to ~340px. */
@media (max-width: 560px) {
  .page-header-top { gap: 8px; }
  .page-kicker {
    font-size: clamp(9px, 2.75vw, 11px);
    letter-spacing: 0.08em;
    white-space: nowrap;
    min-width: 0;
  }
  .page-header-right { gap: 8px; flex: none; }
  .essay-count-badge { font-size: clamp(9px, 2.75vw, 11px); }
  .search-toggle { height: 30px; max-width: 30px; }
  .search-toggle .search-icon { width: 28px; }
}

/* =========================================================
   Full-page essay (after dianaseo.xyz): no sidebar, one centered
   680px reading column, mono breadcrumb, section list fixed at the
   left edge on wide screens, thin reading-progress bar on top.
   ========================================================= */
.essay-full .essay-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 34px 24px 96px;
  position: relative;
  z-index: 1;
}
.essay-full .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 40px;
}
.essay-full .breadcrumb a { color: var(--muted); transition: color 180ms ease; }
.essay-full .breadcrumb a:hover { color: var(--forest); }
.essay-full .breadcrumb .here { color: var(--ink); }

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--forest);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
  pointer-events: none;
}

.essay-full .essay-toc {
  position: fixed;
  top: 50%;
  left: max(18px, calc(50vw - 514px));
  transform: translateY(-50%);
  z-index: 40;
  width: 160px;
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}
@media (min-width: 1080px) {
  .essay-full .essay-toc.ready { display: flex; }
}
.essay-full .essay-toc a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--muted);
  transition: color 200ms ease;
}
.essay-full .essay-toc a::before { content: none; }
.essay-full .essay-toc .tick {
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--border);
  transition: background 200ms ease, width 200ms ease;
}
.essay-full .essay-toc .k { min-width: 0; }
.essay-full .essay-toc a:hover { color: var(--ink); }
.essay-full .essay-toc a:hover .tick { background: var(--muted); width: 20px; }
.essay-full .essay-toc a.active { color: var(--forest); }
.essay-full .essay-toc a.active .tick { background: var(--forest); width: 26px; }

@media (max-width: 560px) {
  .essay-full .essay-wrap { padding: 26px 18px 76px; }
  .essay-full .breadcrumb { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .essay-full .essay-toc a, .essay-full .essay-toc .tick { transition: none; }
}

/* Work page: Eklipse logo tile (Starry Argent) on the right of the title. */
.page-title-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 47px;
}
.page-title-logo-row .page-title { margin: 0; line-height: 1.1; }
.title-logo {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 14px;
  border: 1px solid #dcd9cc;
}
@media (max-width: 560px) {
  .page-title-logo-row { margin-top: 34px; gap: 16px; }
  .title-logo { width: 48px; height: 48px; border-radius: 11px; }
}

/* Work page: quiet caption under the photo pair, with the Eklipse line mark. */
.work-block .photo-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -12px 0 24px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.photo-caption img { width: 32px; height: auto; flex: none; }
@media (max-width: 560px) {
  .work-block .photo-caption { gap: 8px; margin-top: -14px; font-size: 10px; letter-spacing: 0; }
  .photo-caption img { width: 22px; }
}

/* Work page: "Our Story" pill opposite the tagline, opening a quiet
   modal panel in the same work-block voice as the rest of the page. */
.page-tagline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}
.page-tagline-row .page-tagline { margin: 0; }
.story-btn {
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.story-btn:hover { border-color: var(--ink); }
.story-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.story-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 32px 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(23, 23, 26, 0.18);
}
.story-dialog::backdrop { background: rgba(23, 23, 26, 0.35); }
.story-dialog .work-block { margin: 0; }
.story-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.story-dialog-close:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 560px) {
  .story-dialog { padding: 26px 20px 12px; }
}