@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

:root {
  --bg:        #fbfaf7;
  --surface:   #ffffff;
  --border:    #bcbab0; /* warm gray, ~1.8:1 on --bg: visible but still quiet (was #e2e2e2, ~1.2:1) */
  --ink:       #1c1b18;
  --ink-mid:   #5a5952;
  --ink-faint: #777465;
  --accent:    #1e3a8a; /* Deep, sophisticated Tailwind Navy (blue-900) */
  --accent-bg: #c3d2f4; /* Soft matching tinted navy wash for subtle contrast */
  --toggle-bg:  #dbd9cf;     /* selected theme button: warm neutral, ~1.35:1 on --bg */
  --toggle-ink: var(--ink);  /* selected icon; try var(--ink-mid) for softer */
  --serif: 'IBM Plex Serif', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
  --sans: system-ui, -apple-system, sans-serif;
  --rail: 4rem;      /* date / label column width, shared by .item and .now-row */
  --rail-gap: 2.5rem;
  --day-pad: 2.25rem;  /* space above/below each day's block (the divider sits in the middle) */
  --post-gap: 2.25rem; /* space between posts that share a day */
  --split-width: 22rem; /* widest a right-aligned history line gets; smaller = year sits closer to the title */
}

/* Smooth scrolling only for visitors who haven't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html { 
    scroll-behavior: smooth; 
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Custom Bespoke Typography & Links ── */
a { 
  color: var(--ink); 
  text-decoration: none;
  position: relative;
  font-weight: 500;
  transition: color 0.2s ease;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.25s ease-out;
}

a:hover {
  color: var(--accent);
}

a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom center;
}

/* Specific resets for the H1 site title link */
.brand-link {
  color: inherit;
  font-weight: inherit;
}

.brand-link::after {
  display: none !important; /* Removes animated underline on the title */
}

.brand-link:hover {
  color: var(--accent);
}

/* ── Links inside posts, lists and the Now block ── */
/* Post links: accent colour plus a thin always-on underline, so a link never
   relies on colour alone (about 9.9:1 on light, 6.4:1 on dark). The underline
   thickens on hover. The site-wide animated underline is switched off here so
   the two don't double up. Link cards have their own styling. */
.item-body a:not(.link-card) {
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.item-body a:not(.link-card):hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

.item-body a:not(.link-card)::after {
  display: none;
}

/* Now block and history: titles keep the main text colour with a faint dotted
   underline, so a column of titles reads as a list instead of a column of blue
   links. Hover turns them accent with a solid underline. */
.now a {
  font-weight: 400;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
}

.now a:hover {
  color: var(--accent);
  text-decoration-style: solid;
  text-decoration-color: var(--accent);
}

.now a::after {
  display: none;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-mid);
}

::selection {
  background: var(--accent-bg);
  color: var(--accent);
}

/* ── Main Layout Frame ── */
/* Centered: max-width + auto side margins, border-box so the 1.5rem
   side padding is included in the 660px. */
.page {
  max-width: 660px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

/* ── Header ── */
header {
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 2rem;
}

header h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: left;
}

header p {
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.6rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.35rem; /* Tighter gap for typographic icon pairing */
}

.bullet-spacer {
  user-select: none;
  color: var(--ink-faint);
}

/* Precise sizing engine for the inline SVG pin */
.geo-pin {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--ink-faint);
  flex-shrink: 0;
  position: relative;
  top: -1px; /* Subtle optical alignment adjustment */
}

/* ── Feed Stream ── */
.feed {
  display: flex;
  flex-direction: column;
}

/* ── Day Blocks ── */
/* Spacing model, one rule per relationship (feed.php wraps each date in a .day):
   - space between days  -> .day padding (--day-pad) + the divider line
   - space between posts on the same day -> .day gap (--post-gap)
   Nothing depends on a post's neighbours, so no combination of posts can
   lose its padding. */
.day {
  display: flex;
  flex-direction: column;
  gap: var(--post-gap);
  padding: var(--day-pad) 0;
  border-top: 1px solid var(--border);
}

/* The "Blog" label sits above the feed, in the rail, whether or not there are posts */
.feed-label {
  padding-bottom: 0.25rem;
}

/* The newest day sits right under the label (or, on the 404 / 403 pages, right
   under the header): no line, tighter top */
.feed-label + .day,
.day:first-child {
  border-top: none;
  padding-top: 1rem;
}

/* ── Two-Column Grid Item ── */
.item {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 var(--rail-gap);
  align-items: start;
}

/* ── Empty State (no posts yet) ── */
/* Left-aligned in the content column, like every other row on the page. */
.item-body .empty-note {
  color: var(--ink-mid);
}

/* The rail label ("Blog") stands in for the date. Same look as the Now labels. */
.empty-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* The 404 / 403 code in the rail: a touch larger than the other rail labels */
.err-code {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ── Left-Aligned Rails ── */
.item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--mono);
  text-transform: uppercase;
  white-space: nowrap;

  /* Optical tuning for posts that start with a normal paragraph:
     drops the metadata by 4px so the capital-letter ceilings line up. */
  padding-top: 4px; 
}

/* Posts that open with a title: align the date to the title's BASELINE
   instead of nudging by hand. This stays correct at any title size.
   Scoped with :has() on purpose: a post that starts with an image has its
   baseline at the image's bottom edge, which would drag the date down. */
.item:has(.item-body > :is(h1, h2, h3, h4, .item-title):first-child) {
  align-items: first baseline;
}

.item:has(.item-body > :is(h1, h2, h3, h4, .item-title):first-child) .item-meta {
  padding-top: 0;
}

.date-string {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.time-string {
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums; /* Keeps numbers perfectly columns-aligned */
}

/* Same-day posts repeat the date on mobile only (see the mobile block).
   On desktop the rail shows just the time, since the date is already above. */
.date-repeat {
  display: none;
}

/* ── Content Blocks ── */
.item-body { 
  min-width: 0; 
  text-align: left;
  overflow-wrap: break-word; /* long URLs / unbroken strings wrap instead of widening the page */
}

.item-body p { 
  font-size: 1rem; 
  color: var(--ink); 
  margin-bottom: 0.85rem; 
  text-align: left; 
}

.item-body p:last-child { 
  margin-bottom: 0; 
}

/* ── Post Titles ── */
/* Markdown headings (# Title) and .item-title share one style. Without this,
   h1–h4 fall back to browser-default sizes (h1 ≈ 2em), which is what made
   "Sidewalks" nearly as large as the site name. */
.item-title,
.item-body h1,
.item-body h2,
.item-body h3,
.item-body h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin-bottom: 0.6rem !important;
}

/* A heading in the middle of a post gets breathing room above it */
.item-body :is(h1, h2, h3, h4):not(:first-child) {
  margin-top: 1.5rem;
}

/* Inline Code Elements */
.item-body code {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: #f4f3ef;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  color: #b85c00;
}

/* ── Content Lists (Unordered & Ordered Native Alignment Engine) ── */
.bullets-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

/* Unified Layout Container for any stream lists */
.bullets ul, .item-body ul,
.bullets ol, .item-body ol {
  margin: 1rem 0;
  padding-left: 1.25rem; /* Native, rock-solid vertical alignment rail */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Unordered Lists: Standard consistent disc, tinted to your rich Navy */
.bullets ul, .item-body ul {
  list-style-type: disc;
}
.bullets ul::marker, .item-body ul::marker {
  color: var(--accent); /* Beautifully tints the native dot to Navy */
}

/* Ordered Lists: Standard numerals, tinted to your rich Navy */
.bullets ol, .item-body ol {
  list-style-type: decimal;
}
.bullets ol::marker, .item-body ol::marker {
  color: var(--accent);
  font-family: var(--mono); /* Keeps the numbers looking clean and structural */
  font-size: 0.85rem;
}

/* Global List Item Spacing Profile */
.bullets li, .item-body li {
  font-size: 0.95rem;
  color: var(--ink-mid); /* Softens the text weight completely */
  line-height: 1.6;
  padding-left: 0.25rem; /* Clean breathing room between the marker and the text */
}

/* ── Tables (Markdown) ── */
/* feed.php wraps each table in .table-wrap. The table sizes itself to its
   content (so columns never get squeezed into one-word lines) and the wrapper
   scrolls sideways when it's wider than the post. Short tables still stretch
   to the full width. Long text in a cell wraps at 20rem. */
.table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
  overflow-wrap: normal;
  /* Soft edge shadows that only appear on a side that has more to scroll to */
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left,  var(--bg) 30%, transparent) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   var(--border), transparent) left center  / 0.6rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--border), transparent) right center / 0.6rem 100% no-repeat scroll;
}

.table-wrap:first-child { margin-top: 0; }
.table-wrap:last-child  { margin-bottom: 0; }

.item-body table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.item-body th,
.item-body td {
  min-width: 4.5rem;
  max-width: 20rem;
  padding: 0.55rem 1.5rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--border);
}

.item-body th:last-child,
.item-body td:last-child {
  padding-right: 0.5rem;
}

/* Header cells match the mono labels used elsewhere */
.item-body th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.item-body tbody tr:last-child td {
  border-bottom: none;
}

/* ── Fluid Markdown Image Engine with subtle asymmetric protrusion ── */
.item-body img {
  display: block;
  max-width: calc(100% + 1rem);
  margin: 2rem 0 2rem -0.5rem; 
  height: auto;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(28, 27, 24, 0.03); 
  transition: transform 0.3s ease;
}

.item-body img:hover {
  transform: scale(1.01);
}

/* ── Fast Image Zoom Structural Alignment Overrides ── */
.image-zoom-wrapper {
  max-width: calc(100% + 1rem);
}

.image-zoom-wrapper img {
  margin: 0 !important;
  max-width: 100% !important;
}

/* The library draws its backdrop with .image-zoom-wrapper::after and paints it
   white. The extra .page makes this win over the library's own <style>, which
   is injected after this file. Theme colour + blur, with a solid fallback. */
.page .image-zoom-wrapper::after {
  background-color: var(--bg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page .image-zoom-wrapper::after {
    background-color: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Clean Inline Link Blocks */
.link-card {
  position: relative;
  padding-right: 2.4rem; /* room for the corner arrow */
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1.1rem;
  margin-top: 1rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0 4px 4px 0;
}

/* The site-wide animated underline doesn't belong on a card */
.link-card::after {
  display: none;
}

/* Corner arrow: a quiet "this is clickable" cue that lights up on hover */
.link-card::before {
  content: "↗";
  position: absolute;
  top: 0.8rem;
  right: 0.95rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--ink-faint);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover / keyboard focus: an inner accent outline and a faint tint */
.link-card:hover,
.link-card:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
  background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}

.link-card:hover::before,
.link-card:focus-visible::before {
  color: var(--accent);
  transform: translate(1px, -1px);
}

.link-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lc-domain {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
  letter-spacing: 0.04em;
}

.lc-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.lc-desc {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-mid);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Embed Blocks */
.embed-wrap { 
  margin-top: 1rem; 
  border-radius: 4px; 
  overflow: hidden; 
}

.embed-wrap iframe { 
  display: block; 
  width: 100%; 
  border: none; 
}

.embed-wrap.video iframe { 
  aspect-ratio: 16/9; 
}

.embed-wrap.music iframe { 
  height: 152px; 
}

.embed-caption { 
  display: block; 
  font-family: var(--mono); 
  font-size: 0.7rem; 
  color: var(--ink-faint); 
  margin-top: 0.4rem; 
}

/* Inline Metadata Tags */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  margin-right: 0.4rem;
  margin-top: 0.6rem;
}

/* ── Footer ── */
footer {
  border-top: 1px dashed var(--border);
  padding-top: 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

footer p { 
  margin-bottom: 0.4rem; 
}

/* Footer links: lighter weight and softer ink so they sit with the
   mono labels instead of shouting. Hover still turns accent + underline. */
footer a {
  font-weight: 400;
  color: var(--ink-mid);
}

/* Links on the left, "Back to top" on the right of the same row */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
}

.to-top[hidden] {
  display: none;
}

/* The artwork fills its box (see the viewBox in index.php), and an inline svg's
   bottom edge sits on the text baseline, so the arrow lines up with the capitals. */
.to-top svg {
  width: 0.73em;
  height: 0.73em;
  margin-left: 0.35rem;
  vertical-align: baseline;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Responsive Viewports ── */
@media (max-width: 580px) {
  :root {
    --day-pad: 2.5rem;
    --post-gap: 2rem;
  }

  .item { 
    grid-template-columns: 1fr; 
    gap: 0.35rem 0; 
  }
  
  .item-meta { 
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    margin-bottom: 1rem;
    padding-top: 0; /* Row layout needs no optical nudge */
  }
  
  /* Injects a clean vertical pipe divider between date and time on mobile.
     Only when a time actually follows, so posts without a time don't get
     a dangling bar. */
  .date-string:has(+ .time-string)::after {
    content: "|";
    margin-left: 8px;
    color: var(--border);
  }

  .date-string, .time-string {
    margin-bottom: 0;
    line-height: 1;
  }

  .date-string {
    font-size: 0.82rem;
  }
  
  .time-string {
    font-size: 0.75rem;
  }
  
  /* Same-day posts repeat the date, dimmer, so every post opens with the same
     kind of line (OCT 15 | 9:30 AM) instead of relying on a divider. */
  .date-repeat {
    display: block;
    font-weight: 400;
    color: var(--ink-faint);
  }
  
  .item-body img, .image-zoom-wrapper {
    max-width: 100%;
    margin: 0;
  }

  /* The empty state's "Blog" label sits just above its title on phones */
  .item-empty .item-meta {
    margin-bottom: 0.25rem;
  }

  /* The 404 / 403 code sits just above the title on phones */
  .item-error .item-meta {
    margin-bottom: 0.25rem;
  }
  
  .bullets ul, .item-body ul,
  .bullets ol, .item-body ol {
    padding-left: 1.1rem; /* Marginally tighter indentation for small displays */
  }
}

/* ── Now Block (pinned between header and feed) ── */
/* Shares --rail / --rail-gap with .item so values line up with post content. */
.now {
  padding-bottom: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}

/* display:grid on rows would otherwise override the hidden attribute */
.now[hidden],
.now-row[hidden] {
  display: none;
}

.now-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.now-row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 var(--rail-gap);
  align-items: baseline;
}

.now-row dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.now-row dd {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.now-by {
  color: var(--ink-mid);
}

.now-ago {
  margin-left: 0.3rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Live indicator: a tiny three-bar equalizer, shown inside the label while a
   track is actually playing. It lives in the label (not the margin), so it
   behaves the same on desktop and mobile and never changes where the track
   title starts. The middle bar is the element's own background; the outer two
   are its pseudo-elements. */
.now-live {
  position: relative;
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-left: 0.5rem;
  background: linear-gradient(var(--ink-faint), var(--ink-faint)) 50% 100% / 2px 100% no-repeat;
  animation: now-eq-mid 0.9s ease-in-out infinite;
}

.now-live::before,
.now-live::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: var(--ink-faint);
  transform-origin: 50% 100%;
  animation: now-eq 1s ease-in-out infinite;
}

.now-live::before { left: 0;  animation-delay: -0.35s; }
.now-live::after  { right: 0; animation-delay: -0.7s; animation-duration: 0.85s; }

@keyframes now-eq     { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes now-eq-mid { 0%, 100% { background-size: 2px 100%; } 50% { background-size: 2px 35%; } }

/* Reduced motion: hold the bars still at uneven heights so it still reads as
   an equalizer */
@media (prefers-reduced-motion: reduce) {
  .now-live,
  .now-live::before,
  .now-live::after { animation: none; }

  .now-hist,
  .now-chev { transition: none; }

  .now-live         { background-size: 2px 100%; }
  .now-live::before { transform: scaleY(0.55); }
  .now-live::after  { transform: scaleY(0.8); }
}

/* ── Now history: expands in place under its row ── */
.now-row dt button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.now-row dt button:hover {
  color: var(--accent);
}

.now-row dt button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.now-chev {
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 0.2s;
  opacity: 0.8;
}

.now-row.open .now-chev {
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Slides open by animating the grid row from 0fr to 1fr; visibility keeps the
   closed list out of the tab order and away from screen readers. */
.now-hist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s 0.25s;
}

.now-row.open .now-hist {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.now-hist > div {
  overflow: hidden;
  min-height: 0;
}

.now-hist-in {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0 0.4rem;
}

/* Month sits in the rail, titles in the content column (same grid as the feed) */
.now-hist-row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 var(--rail-gap);
  align-items: baseline;
}

.now-hist-start {
  margin-top: 0.5rem;
}

.now-hist-month {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.now-hist-val {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.now-hist-val a {
  font-weight: 400;
  color: var(--ink-mid);
}

.now-hist-val a:hover {
  color: var(--accent);
}

.now-hist-val .now-by {
  color: var(--ink-faint);
}

/* "@secondary: right" in a history file: title on the left, year / season
   flush with the right edge of the content column. */
.now-hist-val.is-split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: var(--split-width);
}

.now-hist-title {
  min-width: 0;
}

/* "@secondary: below": the year / author sits on its own line under the title */
.now-hist-val.is-stacked .now-hist-title,
.now-hist-val.is-stacked .now-hist-side {
  display: block;
}

.now-hist-val.is-stacked .now-hist-side {
  line-height: 1.4;
}

/* Author, year and season all share one style: the serif at the title's size,
   in the faint colour. (Mono stays for dates and the "12m ago" timestamp.) */
.now-hist-side {
  flex-shrink: 0;
  color: var(--ink-faint);
  white-space: nowrap;
}

.now-updated {
  margin-top: 1rem;
  padding-left: calc(var(--rail) + var(--rail-gap));
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 580px) {
  .now-list { gap: 0.9rem; }
  .now-row { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .now-hist-row { grid-template-columns: 4.4rem 1fr; gap: 0 0.75rem; }

  /* On phones the author / year goes on its own line under the title instead
     of wrapping mid-sentence. Right-aligned lists keep their layout. */
  .now-hist-val:not(.is-split) .now-by {
    display: block;
    line-height: 1.4;
  }

  .now-updated { padding-left: 0; }
}

/* ── Print Profile ── */
@media print {
  body { background: #fff; color: #000; }
  header, footer, .now, .image-zoom-wrapper-zoomed { display: none !important; }
  .page { max-width: 100%; padding: 0; }
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg:        #1c1a16;
  --surface:   #242118;
  --border:    #494539; /* ~1.8:1 on dark --bg, matching the light theme (was #39352c, ~1.4:1) */
  --ink:       #e8e4d8;
  --ink-mid:   #a8a498;
  --ink-faint: #8F8064;
  --accent:    #7b9fd4;
  --accent-bg: #263350;
  --toggle-bg:  var(--accent-bg);
  --toggle-ink: var(--accent);
}

/* Smooth transition when theme switches */
body, .link-card, .item-body code, .tag {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Theme Switch (segmented icon control) ── */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-shrink: 0;
}

.theme-switch button {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.theme-switch button svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-switch button:hover {
  color: var(--ink);
}

.theme-switch button[aria-checked="true"] {
  background: var(--toggle-bg);
  color: var(--toggle-ink);
}

.theme-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Native form controls and scrollbars follow the theme too */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

@media print {
  .theme-switch { display: none !important; }
}

/* ── Dark mode specific overrides ── */
[data-theme="dark"] .item-body code {
  background: #2e2b22;
  color: #d4956a;
}

[data-theme="dark"] blockquote {
  color: var(--ink-mid);
}

/* ── Header top row (title + toggle) ── */
.header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}