/* ===========================================================================
   <jag/> works — brand v1 site styles

   Works-specific brand-v1 styles. Loaded AFTER tokens.css, base.css, vendor
   CSS, main.css, custom-glassmorphism.css, works-v2.css — so wins the cascade
   for the surfaces it targets. Phase 7 removes the legacy stylesheets;
   afterwards this file + tokens.css + base.css are the site's full surface.

   Loaded by header.php at the very end of the stylesheet chain so all
   declarations here take precedence over both vendor (Bootstrap) and the
   legacy main / glassmorphism / works-v2 layers during the transition.
   ============================================================================ */

/* Anchor scroll lands below the fixed header — clicking nav items should not
   hide the section's top behind the header bar. */
html { scroll-padding-top: 80px; }

/* ===========================================================================
   Design-system-v1 exception — glassmorphism on the navbar + buttons
   ------------------------------------------------------------------
   The design system forbids backdrop-filter ("no frosted glass, no blurred-
   behind nav bars"). This is an explicit override the works subdomain opts
   into — see --documentacion/jag-design-system/README.md for the rationale.

   RGB triplets come from tokens.css (--c-paper-rgb / --c-ink-rgb /
   --c-silver-rgb). Glass on the silver desktop now reads as a paper-tinted
   pane (translucent white) rather than the old bone-on-bone tint. Dark
   variant uses ink-on-ink (same as before — ink is unchanged).
   ============================================================================ */

:root {
  /* Glass surfaces — recomputed per theme via [data-theme] below. */
  --glass-bg:        rgba(var(--c-paper-rgb), 0.72);
  --glass-bg-strong: rgba(var(--c-paper-rgb), 0.85);
  --glass-bg-soft:   rgba(var(--c-paper-rgb), 0.40);
  --glass-border:    rgba(var(--c-ink-rgb),   0.10);
  --glass-blur:      blur(18px) saturate(140%);
  --glass-blur-soft: blur(10px) saturate(120%);
}

[data-theme="dark"] {
  --glass-bg:        rgba(var(--c-ink-rgb),   0.62);
  --glass-bg-strong: rgba(var(--c-ink-rgb),   0.82);
  --glass-bg-soft:   rgba(var(--c-ink-rgb),   0.38);
  --glass-border:    rgba(var(--c-paper-rgb), 0.10);
}

/* ===========================================================================
   Site header (fixed top — stays visible above all content)
   ============================================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  /* Flat silver navbar matching jag3d. The glassmorphism exception we
     opted into earlier was dropped from the navbar so both sites read
     the same. Glass tokens (--glass-bg etc.) are still defined and
     used by the lang/theme toggles and .btn-bracket below. */
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}

/* Brand mark: <jag/> + works_ wordmark suffix. The <jag/> portion uses
   JBM Medium 500 with -0.03em tracking (the canonical mark). The "works_"
   portion is a subordinate wordmark in JBM Regular 400, slightly smaller. */
.site-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mark);
  font-size: 22px;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  padding: 0;
  border-bottom: none;
  /* Fade in/out via .is-hidden-by-footer when the footer (which carries
     its own typographic mark) scrolls into view on any page. The
     observer lives in footer.php so it runs site-wide, not just on
     home. 200ms is brand v1's allowed motion ceiling for opacity. */
  transition: opacity 200ms ease-out;
}
.site-mark:hover,
.site-mark:focus,
.site-mark:visited {
  background: transparent;
  color: var(--fg);
  border-bottom: none;
}
.site-mark.is-hidden-by-footer {
  opacity: 0;
  pointer-events: none;
}
.site-mark__wordmark {
  font-weight: var(--w-regular);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

/* Blinking underscore cursor — continuous oscillation, part of the wordmark
   identity (not an entrance / scroll / parallax animation), so brand v1 allows. */
.blink-cursor {
  animation: brand-cursor-blink 1s steps(1) infinite;
}
@keyframes brand-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ===========================================================================
   Site navigation
   ============================================================================ */

.site-nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.site-nav-item {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: none;
  padding: 0;
  text-transform: lowercase;
  transition: color var(--motion-fast);
}
.site-nav-item:hover,
.site-nav-item:focus,
.site-nav-item.is-active {
  background: transparent;
  color: var(--fg);
  border-bottom: none;
}

/* ===========================================================================
   Site controls (lang toggle + theme toggle)
   ============================================================================ */

.site-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.lang-toggle,
.theme-toggle {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
  text-transform: lowercase;
  transition: color var(--motion-fast);
}
.lang-toggle:hover,
.theme-toggle:hover,
.lang-toggle:focus,
.theme-toggle:focus {
  background: transparent;
  color: var(--fg);
  border-bottom: none;
}

/* ===========================================================================
   Site footer — 3-column grid: brand left, contact center, version right
   ============================================================================ */

.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* auto | 1fr | auto so the center column gets the remaining width and
     its content centers around the visual midline, while the outer columns
     hug their content. */
  grid-template-columns: auto 1fr auto;
  align-items: flex-end;
  gap: var(--s-7);
  padding: var(--s-9) var(--s-5) var(--s-7);
  border-top: 0.5px solid var(--border);
}

/* Center column: email, location, social links */
.site-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}
.site-footer-email {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
}
.site-footer-email a {
  color: var(--fg);
}
.site-footer-location {
  margin: 0;
}
.site-footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--s-4);
}
.site-footer-social a {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg);
}
.site-footer-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-mark);
  font-size: 28px;
  line-height: 1;
  color: var(--fg);
  margin-bottom: var(--s-3);
}
.site-footer-mark .site-mark__wordmark {
  font-weight: var(--w-regular);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.site-footer-summary {
  font-size: var(--t-body);
  color: var(--fg-muted);
  max-width: 52ch;
  margin-top: var(--s-3);
}
.site-footer-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.site-footer-values span {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.site-footer-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

/* ===========================================================================
   Responsive
   ============================================================================ */

@media (max-width: 768px) {
  /* Header: stack vertically on phones so the 5-item nav doesn't strand
     "notas" alone on its own wrapped row alongside the brand + controls. */
  .site-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-2);
  }
  .site-nav { justify-content: center; flex-wrap: wrap; gap: var(--s-3); }
  .site-controls { justify-content: center; gap: var(--s-3); }
  .site-mark { font-size: 18px; }
  .site-footer {
    /* Stack the three columns vertically on mobile */
    grid-template-columns: 1fr;
    padding: var(--s-8) var(--s-4) var(--s-7);
  }
  .site-footer-contact {
    align-items: flex-start;
    text-align: left;
  }
}

/* ===========================================================================
   Glass on buttons (.btn + .btn-ghost)
   ----------------------------------------------------------
   Override base.css's solid var(--fg) background on .btn with a semi-opaque
   variant + light backdrop blur. Glass effects show their character most
   when the underlying surface varies (e.g. behind the fixed nav as content
   scrolls); on hero buttons the effect reads as a subtle tint since the
   hero background is flat. Kept consistent with the navbar treatment for
   visual cohesion across the brand-v1 surfaces.
   ============================================================================ */

.btn {
  background: rgba(var(--c-ink-rgb), 0.88);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
.btn:hover {
  /* base.css transitions opacity on hover; backdrop-filter stays */
  background: rgba(var(--c-ink-rgb), 0.88);
}
[data-theme="dark"] .btn,
[data-theme="dark"] .btn:hover {
  background: rgba(var(--c-paper-rgb), 0.88);
}

.btn-ghost {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  /* base.css sets border: 1px solid var(--fg); keep that for affordance */
}
.btn-ghost:hover {
  background: var(--glass-bg);
}

/* ===========================================================================
   Hero — single-column centered with big display headline
   The 3D rotating mark moved out of the hero (now lives in the closing
   section), so the hero is pure typography centered on the page.
   ============================================================================ */

.site-main { display: block; }

.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* Asymmetric vertical padding: 96px top (clears the ~56-64px fixed
     navbar + ~30px breathing room) / 48px bottom (normal section rhythm). */
  padding: var(--s-9) var(--s-5) var(--s-7);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-content {
  max-width: 760px;
  width: 100%;
  /* Auto margins on a flex item absorb the available flex space
     equally — this centers content vertically while leaving the
     hint to flow below as a normal flex item. Replaces the previous
     `justify-content: safe center` since we now have two children
     (content + scroll hint) with different vertical alignment needs. */
  margin-top: auto;
  margin-bottom: auto;
}
.hero-meta { margin-bottom: var(--s-5); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto;
}
.hero-service-line {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: 1.25;
  color: var(--fg-muted);
  margin: var(--s-5) auto 0;
  max-width: 32ch;
}
.hero .section-rule {
  margin-left: auto;
  margin-right: auto;
}
.hero-body {
  margin: var(--s-5) auto 0;
  max-width: 56ch;
}
.hero-body p {
  font-size: var(--t-body);
  margin: 0 0 var(--s-3);
}
.hero-ctas {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-7);
  flex-wrap: wrap;
  justify-content: center;
}

/* Scroll affordance — anchored to the hero's bottom (position: relative
   on .hero), centered horizontally, pulsing gently in place to invite
   the eye downward. Brand allowance: ASCII ↓ in mono per the §3
   "unavoidable glyph" carveout + continuous oscillation per the
   .blink-cursor precedent. Not an entrance / scroll-triggered effect.
   Reduced-motion users see a static dimmed label. */
.hero-scroll-hint {
  /* No longer absolute — that approach overlapped the body paragraphs
     at full width when the centered hero content was tall enough to
     cross into the hint's bottom-offset zone. As a flex item with the
     content above using auto margins, the hint is guaranteed to sit
     below the content regardless of content height. */
  margin-bottom: var(--s-5);
  display: flex;
  width: 100%;
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  text-decoration: none;
}
.hero-scroll-hint:hover,
.hero-scroll-hint:focus,
.hero-scroll-hint:visited {
  background: transparent;
  border-bottom: none;
}
.hero-scroll-hint__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: lowercase;
  animation: hero-scroll-pulse 1.8s ease-in-out infinite;
}
.hero-scroll-hint:hover .hero-scroll-hint__inner {
  color: var(--fg);
}

@keyframes hero-scroll-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint__inner {
    animation: none;
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  /* Mobile: simpler floor since the hero is no longer min-height: 100vh
     (the mobile media query sets it to auto), so flexbox centering isn't
     a factor. Fixed 24px offset for a tighter mobile layout. */
  .hero-scroll-hint { bottom: var(--s-5); }
}

@media (max-width: 1024px) {
  .hero-title { font-size: var(--t-display-lg); }
}
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--s-8) var(--s-4);
  }
  .hero-title { font-size: var(--t-display-md); max-width: 18ch; }
  .hero-service-line { font-size: var(--t-body-lg); max-width: 32ch; }
}

/* ===========================================================================
   Page sections
   ============================================================================ */

.site-divider {
  max-width: 1200px;
  margin: 0 auto;
  height: 1px;
  background: var(--border);
  border: none;
}

.site-section {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.site-section--narrow { max-width: 720px; }

/* Section heading (label + h2 + optional rule) */
.section-heading { margin-bottom: var(--s-3); }
.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: var(--s-3);
  text-transform: lowercase;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
  max-width: 32ch;
}
.section-title span { display: block; }

.section-rule {
  height: 2px;
  width: 48px;
  background: var(--accent);
  border: none;
  margin: var(--s-5) 0;
}

/* Opening / closing single-line emphasis */
.section-opening,
.section-closing {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: 1.3;
  color: var(--fg);
  margin: var(--s-5) 0;
  max-width: 38ch;
}
.section-closing { margin-top: var(--s-6); color: var(--fg-muted); }

.section-copy {
  margin-top: var(--s-5);
  max-width: 65ch;
}
.section-copy p {
  font-size: var(--t-body);
  margin: 0 0 var(--s-4);
}

/* Aside (note + example) — signal-bordered pull-quote pattern */
.section-note,
.section-example {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-4);
  margin: var(--s-6) 0;
  max-width: 65ch;
}
.section-note__title,
.section-example__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
  text-transform: lowercase;
}
.section-note p,
.section-example p {
  font-size: var(--t-body);
  color: var(--fg-muted);
  margin: 0;
}

/* Closing manifesto section */
.section-closing-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.manifesto {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: 1.2;
  margin: var(--s-5) 0 var(--s-3);
}
.manifesto-subline {
  font-size: var(--t-body-lg);
  color: var(--fg-muted);
  margin: 0 0 var(--s-7);
}
.closing-actions { justify-content: center; }

/* Flex-centered contact line so the email + · + location group visually
   centers as a unit. text-align: center alone reads off-left because the
   signal-color underline only spans the email, dragging the eye leftward. */
.closing-contact-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  margin: var(--s-5) 0 var(--s-2);
}
.closing-contact-line a {
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
}
.contact-micro {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-muted);
  text-align: center;
}

/* 3D <jag/> mark in the closing section — centered above the manifesto,
   sized to feel like a brand-signature centerpiece, not a hero element. */
#jag-3d-mark {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 440px;
  margin: var(--s-7) auto var(--s-5);
  pointer-events: auto;
  overflow: visible;
  cursor: grab;
}
#jag-3d-mark.is-dragging { cursor: grabbing; }
@media (max-width: 1024px) {
  #jag-3d-mark { max-width: 480px; height: 360px; }
}
@media (max-width: 768px) {
  #jag-3d-mark { max-width: 320px; height: 240px; }
}

@media (max-width: 768px) {
  .site-section { padding: var(--s-8) var(--s-4); }
  .section-title { font-size: var(--t-display-sm); }
}

/* ===========================================================================
   Non-home pages (service deep-dives + portfolio details)
   The fixed header overlays the top — pages without a viewport-tall centered
   hero need top padding to push their first content below the header bar.
   ============================================================================ */

body:not(.index-page) .site-main {
  padding-top: var(--s-9);
}
@media (max-width: 768px) {
  body:not(.index-page) .site-main { padding-top: var(--s-8); }
}

/* Breadcrumb (mono lowercase meta strip with · separators) */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: var(--s-5);
  text-transform: lowercase;
}
.page-breadcrumb a {
  color: var(--fg-muted);
  border-bottom: none;
  padding-bottom: 0;
  transition: color var(--motion-fast);
}
.page-breadcrumb a:hover,
.page-breadcrumb a:focus {
  background: transparent;
  color: var(--fg);
  border-bottom: none;
}
.page-breadcrumb .is-current { color: var(--fg); }

/* Page heading + lead (used on service deep-dives and portfolio details) */
.page-title {
  font-family: var(--font-display);
  font-size: var(--t-display-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: 1.1;
  max-width: 22ch;
  margin: 0;
}
.page-lead {
  font-size: var(--t-body-lg);
  color: var(--fg-muted);
  max-width: 52ch;
  margin: var(--s-4) 0 0;
}

/* Section-copy enhancements: h2 subheadings + brand-correct lists */
.section-copy h2,
.section-copy h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: var(--s-7) 0 var(--s-3);
  color: var(--fg);
}
.section-copy h2 { font-size: var(--t-display-sm); }
.section-copy h3 { font-size: var(--t-body-lg); line-height: 1.3; }
.section-copy > h2:first-child,
.section-copy > h3:first-child { margin-top: 0; }

.section-copy ul {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 var(--s-5);
  max-width: 60ch;
}
.section-copy li {
  margin-bottom: var(--s-2);
  padding-left: var(--s-4);
  position: relative;
  font-size: var(--t-body);
  color: var(--fg);
}
.section-copy li::before {
  content: "—";
  color: var(--accent);
  position: absolute;
  left: 0;
}

/* Service-page next-step CTA block (signal-bordered pull-quote with buttons) */
.next-step {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  margin: var(--s-7) 0 0;
  max-width: 65ch;
}
.next-step__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
  text-transform: lowercase;
}
.next-step__title {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0 0 var(--s-3);
  color: var(--fg);
}
.next-step__body {
  font-size: var(--t-body);
  color: var(--fg-muted);
  margin: 0 0 var(--s-5);
}
.next-step__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Case study (portfolio-details.php) — gallery + case info strip */
.case-gallery {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0;
}
.case-gallery figure { margin: 0; }
.case-gallery img {
  width: 100%;
  height: auto;
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  display: block;
}

.case-info {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 0.5px solid var(--border);
}
.case-info-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: lowercase;
  margin: 0 0 var(--s-3);
}
.case-info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  max-width: 60ch;
}
.case-info dt {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-muted);
  text-transform: lowercase;
  margin: 0;
}
.case-info dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg);
}

/* ================================================================== */
/* Notes section — see writing-section.md                              */
/* The /notes/ writing section. Two pages: index (list of cards) and   */
/* single (notes-read.php). Layout reuses the §4.1 article shell       */
/* already defined above; styles below are only what's unique to       */
/* notes. All tokens are mode-aware → light/dark for free.             */
/* ================================================================== */

/* Empty state */
.notes-empty {
  color: var(--fg-muted);
  font-style: italic;
  margin-top: var(--s-6);
}

/* List of cards on notes.php */
.notes-list {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-6);
}

/* One card */
.notes-card {
  display: grid;
  gap: var(--s-3);
}
.notes-card__header {
  display: grid;
  gap: var(--s-3);
}
.notes-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}
.notes-card__title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-display-sm);
  line-height: var(--lh-display);
  margin: 0;
}
.notes-card__title a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--motion-fast);
}
.notes-card__title a:hover,
.notes-card__title a:focus-visible {
  background-size: 100% 1px;
}
.notes-card__summary {
  color: var(--fg-muted);
  font-size: var(--t-body);
  margin: 0;
}

/* Tags as text chips — JBM mono, signal-color hash prefix */
.notes-card__tags,
.notes-post__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.notes-tag {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-muted);
  text-transform: lowercase;
}
.notes-tag::before {
  content: "#";
  color: var(--accent);
  margin-right: 0.15em;
}

/* Single-post meta strip — date · LANG · tags */
.notes-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}
.notes-post__lang {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* Translation-pending banner */
.notes-translation-banner {
  border-left: 2px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-5) 0;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-muted);
  background: rgba(var(--c-ink-rgb), 0.03);
}

/* Body — markdown rendered output. The §4.1 prose styles in one place. */
.notes-body {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg);
  margin-top: var(--s-5);
}
.notes-body > * + * {
  margin-top: var(--s-5);
}
.notes-body h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-display-sm);
  line-height: var(--lh-display);
  margin-top: var(--s-8);
}
.notes-body h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-body-lg);
  margin-top: var(--s-7);
}
.notes-body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}
.notes-body a:hover {
  text-decoration-thickness: 2px;
}
.notes-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(var(--c-ink-rgb), 0.06);
  padding: 0.1em 0.35em;
  border-radius: var(--r-md);
}
.notes-body pre {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  background: rgba(var(--c-ink-rgb), 0.04);
  padding: var(--s-4);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.notes-body pre code {
  background: none;
  padding: 0;
}
.notes-body blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-4);
  color: var(--fg-muted);
  font-style: italic;
}
.notes-body ul,
.notes-body ol {
  padding-left: var(--s-5);
}
.notes-body li + li {
  margin-top: var(--s-3);
}
.notes-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.notes-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body-sm);
}
.notes-body th,
.notes-body td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.notes-body th {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  color: var(--fg-muted);
  text-transform: lowercase;
}