/* ==========================================
   bydomenico — ja.mt full clone
   Handwrite logo · hover blur · stagger reveal
   Detail overlay · polaroid stacks
   ========================================== */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display: none !important; }

/* Opt into same-origin cross-document view transitions. When clicking a
   writing entry to its local blog post, the matching `view-transition-name`
   elements (the entry thumb here, the article hero on the post) animate
   between the two pages — ja.mt-style shared-element FLIP. Chrome 126+ /
   Safari 18.2+. Falls back to a regular navigation in browsers without it. */
@view-transition { navigation: auto; }
::view-transition-group(post-hero) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: ease-out;
}
html.theme-ripple-active::view-transition-group(root) {
  animation-duration: .52s;
  animation-timing-function: var(--ease);
}
html.theme-ripple-active::view-transition-old(root),
html.theme-ripple-active::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.theme-ripple-active::view-transition-old(root) { z-index: 1; }
html.theme-ripple-active::view-transition-new(root) {
  z-index: 2;
  clip-path: circle(var(--theme-ripple-radius) at var(--theme-ripple-x) var(--theme-ripple-y));
  animation: theme-ripple .52s var(--ease);
}
html.theme-transition-suppressed,
html.theme-transition-suppressed *,
html.theme-transition-suppressed *::before,
html.theme-transition-suppressed *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
@keyframes theme-ripple {
  from { clip-path: circle(0 at var(--theme-ripple-x) var(--theme-ripple-y)); }
  to { clip-path: circle(var(--theme-ripple-radius) at var(--theme-ripple-x) var(--theme-ripple-y)); }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-ripple-active::view-transition-new(root) { animation: none; }
}

:root {
  --paper: #faf6f2;
  --ink: #1c1917;
  --ink-soft: #73574a;
  --ink-faint: #9a918a;
  --rule: rgba(28,25,23,0.08);
  --rule-strong: rgba(28,25,23,0.14);
  --accent: #e36209;
  --surface: #ffffff;
  --surface-hover: #f5f0e9;
  --shadow-sm: 0 1px 2px rgba(28,25,23,0.06);
  --shadow-md: 0 4px 12px rgba(28,25,23,0.08);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --ease is a softer easeOutQuint, used for unhurried motion (theme,
     handwriting). --ease-out is Material's snappier ease-out, used for
     hover/focus blur and the panel content fade. */
  --ease: cubic-bezier(0.22,1,0.36,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
}

[data-theme="dark"] {
  --paper: #1c1917;
  --ink: #efe9e0;
  --ink-soft: #b8aea3;
  --ink-faint: #877c72;
  --rule: rgba(239,233,224,0.09);
  --rule-strong: rgba(239,233,224,0.18);
  --accent: #e07a5f;
  --surface: #262220;
  --surface-hover: #302c29;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.28);
}

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .4s var(--ease);
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.55;
  color: var(--ink); background: var(--paper); overflow-x: hidden; min-height: 100vh;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  padding: 8px 16px; background: var(--ink); color: var(--paper); border-radius: 6px;
  font-size: 13px; font-weight: 500;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ===========================
   HANDWRITE LOGO
   =========================== */
.top-bar__brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.top-bar__brand-text {
  width: 140px; height: 18px; overflow: visible; display: block;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.top-bar--solid .top-bar__brand-text { opacity: 1; }

.handwrite-text {
  stroke: currentColor; stroke-width: 0.3; stroke-dasharray: 200; stroke-dashoffset: 200;
  fill: currentColor;
  animation: handwrite 1.8s var(--ease-out) forwards;
  animation-delay: 0.3s;
}
@keyframes handwrite {
  0%   { stroke-dashoffset: 200; fill: transparent; }
  60%  { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: currentColor; }
}

.handwrite-glyph { stroke-dasharray: 60; stroke-dashoffset: 60; animation: handwrite-glyph 0.8s var(--ease-out) forwards; animation-delay: 0.1s; }
@keyframes handwrite-glyph {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .handwrite-text { animation: none; stroke-dashoffset: 0; fill: var(--ink); }
  .handwrite-glyph { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ===========================
   TOP BAR
   =========================== */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .35s var(--ease-out);
}
.top-bar--solid { background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.top-bar--hidden { transform: translateY(-100%); }

.top-bar__inner {
  max-width: 550px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.top-bar__brand-glyph { color: var(--accent); flex-shrink: 0; }
.top-bar__trail { display: flex; align-items: center; gap: 22px; }

.top-bar__nav-link, .top-bar__trail > a {
  font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: .02em;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  transition: color .15s;
}
.top-bar__nav-link:hover, .top-bar__trail > a:hover { color: var(--ink); }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: color .15s, background .15s, transform .2s cubic-bezier(.34, 1.3, .64, 1);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--ink); background: var(--rule); transform: scale(1.06); }
.theme-toggle:active { transform: scale(0.96); }

[data-theme="light"] .theme-toggle__moon { display: none; }
[data-theme="dark"]  .theme-toggle__sun  { display: none; }

/* ===========================
   PAGE CONTENT
   =========================== */
.page-content {
  width: 100%; max-width: 550px; margin: 0 auto; padding: 80px 20px 100px;
  display: flex; flex-direction: column; align-items: center;
}

.bio-section { width: 100%; display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; }
.bio-section__meta {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 8px;
  margin-top: 8px;
}
.bio-section__updated {
  font-size: 11px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
}
.bio-section__date { font-size: 13px; color: var(--ink-soft); font-weight: 450; font-variant-numeric: tabular-nums; }
.bio-section__lead {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "wght" 380, "SOFT" 60, "WONK" 0;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: 30ch;
  text-wrap: pretty;
}
.bio-section__text { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; max-width: 58ch; }

/* Hero name — handwritten display */
.hero-name {
  width: 100%;
  max-width: 720px;
  margin: 6px 0 10px;
  line-height: 0;
  color: var(--ink);
}
.hero-name__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-name__text {
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5200;
  stroke-dashoffset: 5200;
  fill: var(--ink);
  fill-opacity: 0;
  paint-order: stroke fill;
  animation: hero-write 2.8s cubic-bezier(.45, 0, .55, 1) 280ms forwards;
  will-change: stroke-dashoffset, fill-opacity;
}
@keyframes hero-write {
  0%   { stroke-dashoffset: 5200; fill-opacity: 0; }
  80%  { stroke-dashoffset: 0;    fill-opacity: 0; }
  100% { stroke-dashoffset: 0;    fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-name__text {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

.content-sections { width: 100%; display: flex; flex-direction: column; gap: 44px; }
.entries-section { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.entries-section__heading {
  font-family: var(--display); font-variation-settings: "opsz" 60, "wght" 380, "SOFT" 80, "WONK" 1;
  font-style: italic; font-size: clamp(28px, 4.4vw, 34px); font-weight: 400; line-height: 1.05;
  color: var(--ink); letter-spacing: -0.018em;
  text-transform: lowercase;
}

/* ===========================
   ENTRIES
   =========================== */
.entries-list { width: 100%; display: flex; flex-direction: column; }

.entry {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 12px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  background: none; border: none; width: 100%; text-align: left;
}
/* Work entries need extra space between the polaroid stack and the title
   so fanned-out cards don't crowd the title at peak hover. */
.entry--work { gap: 28px; }
.entry::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule);
}
.entry:last-child::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--rule);
}

.entry__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.entry__title { font-size: 16px; font-weight: 450; color: var(--ink); line-height: 1.3; min-width: 0; transition: color .2s var(--ease-out); }
.entry > .entry__title { flex: 1; }
.entry__summary {
  font-size: 13px; line-height: 1.35; color: var(--ink-soft);
  max-width: 36ch; text-wrap: pretty;
}
.entry__date { font-size: 13px; font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .01em; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.entry__ext { display: inline-block; font-size: 0.82em; color: var(--ink-faint); margin-left: 6px; transition: transform .2s var(--ease-out), color .2s; }

/* Writing entry layout — thumb (optional) + title + excerpt? + meta */
.entry--text { align-items: flex-start; }
.entry--text .entry__body { gap: 6px; }
.entry__thumb {
  flex-shrink: 0;
  width: 60px; height: 34px;
  /* Polaroid frame to match the work stack — 2.5px white border + soft radius */
  border: 2.5px solid #fff;
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.18);
  /* Rest tilt is set inline by JS; straightens on hover/focus/active */
  transform: rotate(var(--thumb-rot, 0deg));
  transition: transform .32s cubic-bezier(.32, 1.08, .56, 1),
              box-shadow .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.hover-cold) .entry:hover .entry__thumb {
    transform: rotate(0deg) scale(1.04);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
  }
}
/* Keyboard + touch parity (entry--active is only added by JS on touch devices) */
.entry:focus-visible .entry__thumb,
.entry--active .entry__thumb {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
}
.entry__excerpt {
  font-size: 14px; line-height: 1.45; color: var(--ink-soft);
  font-weight: 400; max-width: 60ch;
}
.entry__meta {
  font-size: 11px; line-height: 1; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.entry__meta time { font-variant-numeric: tabular-nums; }

/* ---- HOVER FEEDBACK (pointer-fine only) ---- */
@media (hover: hover) and (pointer: fine) {
  html:not(.hover-cold) .entry:hover .entry__title { color: var(--accent); }
  html:not(.hover-cold) .entry:hover .entry__ext { color: var(--accent); transform: translate(2px, -2px); }
}

/* Keyboard focus: match the hover treatment so j/k navigation feels coherent */
.entry:focus-visible .entry__title { color: var(--accent); }
.entry:focus-visible .entry__ext { color: var(--accent); transform: translate(2px, -2px); }

/* ---- FOCUS BLUR (ja.mt-style: pure CSS via :has(), no JS class toggling) ----
   Only three regions blur: the bio block, the section headings, and the
   non-hovered entries. Top bar, footer, hero, and show-more stay sharp. */
.bio-section,
.entries-section__heading,
.entry {
  transition: filter .25s ease-out, opacity .25s ease-out;
}

/* Desktop hover: pure CSS — :has() re-evaluates the moment the cursor enters
   any entry. No JS event latency, no class-toggling churn, no will-change. */
@media (hover: hover) and (pointer: fine) {
  html:not(.hover-cold) #page-content:has(.entry:hover) .bio-section,
  html:not(.hover-cold) #page-content:has(.entry:hover) .entries-section__heading,
  html:not(.hover-cold) #page-content:has(.entry:hover) .entry {
    filter: blur(2.5px);
    opacity: 0.4;
  }
  html:not(.hover-cold) #page-content:has(.entry:hover) .entry:hover {
    filter: none;
    opacity: 1;
  }
}

/* Keyboard focus: same blur pattern, works on every device */
#page-content:has(.entry:focus-visible) .bio-section,
#page-content:has(.entry:focus-visible) .entries-section__heading,
#page-content:has(.entry:focus-visible) .entry {
  filter: blur(2.5px);
  opacity: 0.4;
}
#page-content:has(.entry:focus-visible) .entry:focus-visible {
  filter: none;
  opacity: 1;
}

/* Touch: JS sets `is-focused` on body and `entry--active` on the tapped entry */
body.is-focused .bio-section,
body.is-focused .entries-section__heading,
body.is-focused .entry:not(.entry--active) {
  filter: blur(2.5px);
  opacity: 0.4;
}
body.is-focused .entry--active {
  filter: none;
  opacity: 1;
}

/* ---- IMAGE STACK (polaroid fan, ja.mt style) ----
   Each card gets its own --rest-tx/ty/rot (so the stack staggers visibly at rest)
   plus --fan-tx/ty/rot (dramatic spread on hover). All set inline by JS at render
   time so every stack on every visit has its own personality. */
.image-stack {
  position: relative; flex-shrink: 0;
  width: 52px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  /* extra room so rotated cards don't get clipped at rest */
  overflow: visible;
}
.image-stack__card {
  position: absolute; width: 49px; height: 36px;
  border: 2.5px solid #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.18);
  background: var(--surface);
  transform: translate(var(--rest-tx, 0px), var(--rest-ty, 0px)) rotate(var(--rest-rot, 0deg));
  transition: transform .42s cubic-bezier(.32, 1.08, .56, 1), box-shadow .35s ease-out;
}
.image-stack__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-stack__card:nth-child(1) { z-index: 1; }
.image-stack__card:nth-child(2) { z-index: 3; }
.image-stack__card:nth-child(3) { z-index: 2; }

@media (hover: hover) and (pointer: fine) {
  html:not(.hover-cold) .entry:hover .image-stack__card {
    transform: translate(var(--fan-tx, 0px), var(--fan-ty, 0px)) rotate(var(--fan-rot, 0deg));
  }
  html:not(.hover-cold) .entry:hover .image-stack__card:nth-child(2) {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
  }
}

/* Keyboard parity */
.entry:focus-visible .image-stack__card {
  transform: translate(var(--fan-tx, 0px), var(--fan-ty, 0px)) rotate(var(--fan-rot, 0deg));
}
.entry:focus-visible .image-stack__card:nth-child(2) {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
}

/* ---- TOUCH: one-shot fan when entry enters viewport ---- */
@media (hover: none), (pointer: coarse) {
  .entry--fanned .image-stack__card {
    animation: fan-pulse 1.25s cubic-bezier(.32, 1.08, .56, 1) both;
  }
  /* Tap-driven feedback: the active entry color shift */
  .entry--active .entry__title { color: var(--accent); }
  .entry--active .image-stack__card {
    transform: translate(var(--fan-tx, 0px), var(--fan-ty, 0px)) rotate(var(--fan-rot, 0deg));
  }
}

@keyframes fan-pulse {
  0%   { transform: translate(var(--rest-tx, 0px), var(--rest-ty, 0px)) rotate(var(--rest-rot, 0deg)); }
  45%  { transform: translate(var(--fan-tx, 0px), var(--fan-ty, 0px)) rotate(var(--fan-rot, 0deg)); }
  100% { transform: translate(var(--rest-tx, 0px), var(--rest-ty, 0px)) rotate(var(--rest-rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .entry--fanned .image-stack__card { animation: none !important; }
}

/* ===========================
   SHOW MORE
   =========================== */
.show-more {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: .04em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.show-more::after { content: '↓'; font-size: 13px; transition: transform .3s var(--ease); }
.show-more:hover { color: var(--ink); }
.show-more--open::after { transform: rotate(180deg); }

/* Text fade-swap when toggling between "Show more" and "Show less" */
.show-more__text {
  display: inline-block;
  transition: opacity .14s ease-out, transform .14s ease-out;
}
.show-more.is-swapping .show-more__text {
  opacity: 0;
  transform: translateY(-3px);
}
.hidden-entry { display: none; }
.hidden-entry--visible { display: flex; }

/* ===========================
   STAGGER REVEAL (ja.mt-style: animation, not transition)
   ===========================
   Using `animation` instead of `transition` is critical for hover smoothness.
   A lingering `.stagger-item` transition spec would apply to every later
   opacity/filter change on the entry — including the hover-blur — making the
   filter and opacity desync on hover. With an animation, the reveal runs once
   and leaves the element's `transition` property untouched. */
.stagger-item { opacity: 0; transform: translateY(10px); }
.stagger-item.is-visible {
  animation: stagger-reveal .35s cubic-bezier(.34, 1.3, .64, 1) forwards;
}
@keyframes stagger-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger-item { opacity: 1; transform: none; }
  .stagger-item.is-visible { animation: none; }
}

/* ===========================
   DETAIL OVERLAY
   =========================== */
.detail-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overflow-x: hidden;
}
.detail-overlay__backdrop {
  position: fixed; inset: 0; background: var(--paper);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.detail-overlay--open .detail-overlay__backdrop { opacity: 1; }

.detail-overlay__panel {
  position: relative; z-index: 1; width: 100%; max-width: 680px;
  padding: 24px 20px 100px;
  /* Panel itself is always visible — the hero owns its own animation (zoom in/out),
     and the content + close button + backdrop fade independently. */
}
/* During the hero zoom, the panel content stays hidden, then fades in once zoom completes */
.detail-overlay__content {
  opacity: 0;
  color: var(--ink-soft); font-size: 16px; line-height: 1.7;
  transition: opacity .38s var(--ease-out);
}
.detail-overlay--zooming .detail-overlay__content,
.detail-overlay--zooming .detail-overlay__close { opacity: 0 !important; transition: none; }
.detail-overlay--open:not(.detail-overlay--zooming) .detail-overlay__content,
.detail-overlay--open:not(.detail-overlay--zooming) .detail-overlay__close { opacity: 1; }

.detail-overlay__close {
  /* Anchored to the left of the centered panel:
     panel is max 680px centered; button sits in the gutter (40px wide + 20px gap)
     to its left. On narrow viewports, falls back to 20px from the viewport edge. */
  position: fixed; top: 24px;
  left: max(20px, calc(50% - 400px));
  z-index: 110;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, border-color .2s, background .2s, opacity .38s var(--ease-out), transform .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-sm);
}
.detail-overlay__close svg { display: block; transition: transform .2s var(--ease-out); }
.detail-overlay__close:hover {
  color: var(--ink); border-color: var(--ink-soft); background: var(--surface-hover);
  transform: scale(1.04);
}
.detail-overlay__close:hover svg { transform: translateX(-2px); }
.detail-overlay__close:active { transform: scale(0.96); }

.detail-overlay__hero {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule-strong); margin-bottom: 28px;
  background: var(--surface);
  will-change: transform;
}
.detail-overlay__hero video, .detail-overlay__hero img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Hide hero opacity flicker while the zoom transform is being set up */
.detail-overlay--zooming .detail-overlay__hero { backface-visibility: hidden; }

/* Audio toggle — bottom-right of the hero, glass over the video */
.detail-overlay__sound {
  position: absolute; bottom: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(28, 24, 21, 0.55); color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease-out, transform .18s ease-out, opacity .25s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.detail-overlay__sound:hover { background: rgba(28, 24, 21, 0.78); transform: scale(1.05); }
.detail-overlay__sound:active { transform: scale(0.96); }
.detail-overlay__sound svg { display: block; }
.detail-overlay__sound[data-state="muted"] .detail-overlay__sound-icon--on { display: none; }
.detail-overlay__sound[data-state="on"] .detail-overlay__sound-icon--muted { display: none; }

/* Fade in with the rest of the panel after the hero zoom completes */
.detail-overlay--zooming .detail-overlay__sound { opacity: 0 !important; transition: none; }
.detail-overlay--open:not(.detail-overlay--zooming) .detail-overlay__sound { opacity: 1; }

.detail-overlay__detail { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); letter-spacing: .03em; margin-bottom: 16px; }

.detail-overlay__header { margin: 4px 0 18px; }
.detail-overlay__eyebrow {
  font-size: 11px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
  margin-bottom: 6px;
}
.detail-overlay__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 70, "WONK" 1;
  font-style: italic; font-size: 34px; font-weight: 420; line-height: 1.05;
  color: var(--ink); letter-spacing: -0.018em;
}
.detail-overlay__subtitle {
  margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink-soft);
}

.detail-overlay__metrics {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 14px;
  border: 1px dashed var(--rule-strong); border-radius: 6px;
  font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin-bottom: 20px;
}
.detail-overlay__metrics span { white-space: nowrap; }
.detail-overlay__content p { margin-bottom: 1em; }
.detail-overlay__content p:last-child { margin-bottom: 0; }

.detail-overlay__pullquote {
  font-family: var(--display); font-variation-settings: "opsz" 36, "wght" 360, "SOFT" 50;
  font-style: italic; font-size: 24px; font-weight: 360; line-height: 1.2;
  color: var(--ink); margin-bottom: 20px; text-indent: -0.22em;
}
.detail-overlay__pullquote::before { content: '\201C'; color: var(--accent); font-size: 1.1em; font-style: normal; margin-right: 0.02em; vertical-align: -0.08em; }
.detail-overlay__credits { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink-faint); margin-bottom: 1.2em; }

.detail-overlay__callout {
  display: block; margin: 28px 0; padding: 0;
  border: 0; background: transparent;
  font-family: var(--display); font-variation-settings: "opsz" 72, "wght" 360, "SOFT" 80, "WONK" 1;
  font-style: italic; font-size: 28px; font-weight: 400; line-height: 1.15;
  color: var(--ink); letter-spacing: -0.018em;
  max-width: 18ch;
}
.detail-overlay__callout::first-letter {
  color: var(--accent);
}

.detail-overlay__stack { display: flex; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin: 22px 0; }
.detail-overlay__stack dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.detail-overlay__stack dt::after { content: ':'; }

.detail-overlay__cta {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--ink);
  padding: 13px 26px; border-radius: 100px;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.detail-overlay__cta:hover { background: var(--accent); transform: scale(1.02); }
.detail-overlay__cta-arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.detail-overlay__cta:hover .detail-overlay__cta-arrow { transform: translateX(3px); }

/* Treatment overrides */
.detail-overlay--sync .detail-overlay__cta { border-radius: 0; }
.detail-overlay--flights .detail-overlay__cta { font-family: var(--mono); letter-spacing: .12em; }
.detail-overlay--mira .detail-overlay__cta { font-family: var(--display); font-style: italic; font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ===========================
   FOOTER
   =========================== */
.site-footer { width: 100%; max-width: 550px; margin: 0 auto; padding: 0 20px 60px; text-align: center; }
.site-footer__inner { padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-footer__copy { font-size: 13px; color: var(--ink-faint); }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
/* Animated underline via interpolatable CSS variable */
@property --link-line {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
.site-footer__links a {
  font-size: 13px; color: var(--ink-soft);
  --link-line: transparent;
  background: linear-gradient(var(--link-line), var(--link-line)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: --link-line .25s cubic-bezier(0, 0, .2, 1), color .15s cubic-bezier(0, 0, .2, 1);
}
.site-footer__links a:hover {
  color: var(--accent);
  --link-line: var(--accent);
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 600px) {
  .page-content { padding: 64px 16px 80px; }
  .top-bar__trail { gap: 14px; }
  .top-bar__inner { padding: 14px 16px; }
  .top-bar__brand-text { width: 110px; height: 16px; }
  .handwrite-text { font-size: 22px; }
  .detail-overlay__panel { padding: 16px 16px 80px; }
  .detail-overlay__hero { border-radius: 8px; }
  .bio-section { gap: 14px; padding-bottom: 36px; }
  .content-sections { gap: 36px; }
  .entry__excerpt { font-size: 13px; }
  .detail-overlay__callout { font-size: 24px; }
}

@media (max-width: 380px) {
  .entry__meta { font-size: 10px; letter-spacing: 0.1em; }
}