/* ═══════════════════════════════════════════════════════
   Learn While Live — Custom CSS
   Single bundled file (Hugo serves assets/css/main.css)
   ═══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap');

/* ─────────────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────────────── */
:root {
  /* Fonts */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;

  /* Colour palette — light (high contrast) */
  --bg:           #fafafa;
  --surface:      #ffffff;
  --surface-alt:  #f4f4f2;
  --border:       #d6d6d0;
  --border-light: #e8e8e4;

  --text:         #111110;
  --text-2:       #333330;
  --text-3:       #6a6a64;

  --accent:       #2c3e5a;          /* dark slate blue — was #1a3a2e green */
  --accent-2:     #3a5577;          /* lighter hover variant */
  --accent-light: #e8ecf2;          /* pale blue tint */
  --nav-accent:   #4a6fa0;          /* nav brand "While" — lighter blue, same hue as buttons */

  --tag-bg:       #ededea;
  --tag-text:     #3a3a36;

  --notice-primary-bg:     #edf0f4;
  --notice-primary-border: #2c3e5a;
  --notice-info-bg:        #eef3f8;
  --notice-info-border:    #3a6ea0;

  --code-bg:      #f0efeb;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.12);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Layout */
  --max-w:     1400px;
  --prose-w:   700px;
  --nav-h:     60px;
  --radius:    6px;
  --radius-lg: 12px;

  --transition: 200ms ease;
}

/* Auto dark mode (OS preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #141412;
    --surface:     #1e1e1b;
    --surface-alt: #262623;
    --border:      #2e2e2a;
    --border-light: #262623;

    --text:   #e8e6e0;
    --text-2: #a0a09a;
    --text-3: #686860;

    --accent:       #5a9e80;
    --accent-2:     #71b594;
    --accent-light: #1a2e26;
    --nav-accent:   #5a9e80;

    --tag-bg:   #262623;
    --tag-text: #c0c0b8;

    --notice-primary-bg:     #1a2e26;
    --notice-primary-border: #5a9e80;
    --notice-info-bg:        #182030;
    --notice-info-border:    #4a80b0;

    --code-bg: #262623;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  }
}
/* Manual dark mode override (toggle) */
:root[data-theme="dark"] {
    --bg:          #141412;
    --surface:     #1e1e1b;
    --surface-alt: #262623;
    --border:      #2e2e2a;
    --border-light: #262623;

    --text:   #e8e6e0;
    --text-2: #a0a09a;
    --text-3: #686860;

    --accent:       #5a9e80;
    --accent-2:     #71b594;
    --accent-light: #1a2e26;
    --nav-accent:   #5a9e80;

    --tag-bg:   #262623;
    --tag-text: #c0c0b8;

    --notice-primary-bg:     #1a2e26;
    --notice-primary-border: #5a9e80;
    --notice-info-bg:        #182030;
    --notice-info-border:    #4a80b0;

    --code-bg: #262623;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
}

/* ─────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

/* ─────────────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.5em 0;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 500; font-family: var(--font-sans); }

p { margin: 0 0 1.2em 0; }

blockquote {
  border-left: 3px solid var(--accent);
  margin: var(--sp-8) 0;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  color: var(--text-2);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  overflow-x: auto;
  margin: var(--sp-6) 0;
}
pre code { background: none; padding: 0; font-size: 0.875rem; }

/* ─────────────────────────────────────────────────────
   4. UTILITIES
───────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -50px; left: 0;
  background: var(--accent); color: #fff;
  padding: 8px 16px; text-decoration: none; z-index: 999;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.prose {
  max-width: var(--prose-w);
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-6);
}

/* Tag pills */
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--tag-bg);
  color: var(--tag-text);
  padding: 3px 10px;
  border-radius: 99px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.tag:hover {
  background: var(--accent);
  color: #fff;
}

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  line-height: 1.4;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-2); color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* Section label */
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}

/* Notice blocks */
.notice {
  padding: var(--sp-4) var(--sp-6);
  border-left: 4px solid var(--notice-primary-border);
  background: var(--notice-primary-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--sp-8) 0;
  font-size: 0.95rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice--primary {
  border-color: var(--notice-primary-border);
  background: var(--notice-primary-bg);
}
.notice--info {
  border-color: var(--notice-info-border);
  background: var(--notice-info-bg);
}

/* Figure */
figure { margin: var(--sp-8) 0; }
figure.align-center { text-align: center; }
figure.align-center img { margin: 0 auto; max-width: 70%; }
figure.align-right { float: right; margin: 0 0 var(--sp-4) var(--sp-8); max-width: 40%; clear: right; }
figcaption {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: var(--sp-2);
  text-align: center;
  font-style: italic;
}
@media (max-width: 640px) {
  figure.align-right { float: none; max-width: 100%; margin-left: 0; }
}

/* Footnotes */
.footnotes {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-2);
}
.footnotes ol { list-style: decimal; padding-left: 1.5rem; margin: 0; }
.footnotes li { margin-bottom: var(--sp-2); }

/* ─────────────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Scroll-aware nav: slides up out of view on scroll-down, back on scroll-up.
     JS in baseof.html toggles .nav-hidden. Remove this transition + the rule
     below + the JS block to revert to a plain always-visible sticky nav. */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Nav behaviour is chosen by `navBehavior` in hugo.toml → body[data-nav="…"].
   "static" = scroll away (not pinned); the others stay sticky. JS (baseof.html)
   drives the hide/reveal for "top-only" and "hide-on-scroll". */
body[data-nav="static"] .site-nav { position: static; }
.site-nav.nav-hidden { transform: translateY(-100%); }
.site-nav.nav-floating { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }   /* subtle lift once scrolled */
@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

/* Nav inherits --bg and --border from the active theme automatically */

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-brand-accent { color: var(--nav-accent); }
.nav-brand:hover { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Mobile hamburger */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle-label span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 680px) {
  .nav-toggle-label { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) 0;
    box-shadow: var(--shadow-md);
  }
  .nav-links a {
    padding: var(--sp-3) var(--sp-6);
    border-bottom: none;
    border-radius: 0;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ─────────────────────────────────────────────────────
   6. FOOTER
───────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-16);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer-left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.footer-copy {
  font-size: 0.82rem;
  color: var(--text-3);
}
.footer-cv-link {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.footer-cv-link:hover {
  background: var(--nav-accent);
  border-color: var(--nav-accent);
  color: #fff;
}
.footer-social {
  display: flex;
  gap: var(--sp-3);
}
.footer-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.footer-icon-link:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────
   7. HOMEPAGE
───────────────────────────────────────────────────── */
/* ALTERNATIVE HERO (left-aligned text, larger photo with rounded corners) — uncomment to restore:

.hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-8) var(--sp-6); }
.hero-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-12); align-items: center; }
.hero-name { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.1; margin: 0 0 var(--sp-2) 0; color: var(--text); }
.hero-subtitle { font-size: 1rem; color: var(--accent); font-weight: 500; margin-bottom: var(--sp-6); letter-spacing: 0.01em; }
.hero-bio { font-size: 1.05rem; color: var(--text-2); max-width: 520px; line-height: 1.75; margin-bottom: var(--sp-8); }
.hero-bio p { margin-bottom: 0; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero-photo { flex-shrink: 0; }
.hero-photo img { width: 260px; height: 340px; border-radius: 20px; object-fit: cover; object-position: center top; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-photo { order: -1; }
  .hero-photo img { width: 180px; height: 240px; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-bio { max-width: 100%; }
}

*/

/* CURRENT HERO — equal columns, centred text, inspired photographer */
.hero {
  background: var(--surface);
  /* Home divider commented out (line-free home). To restore, soft line is primary:
       border-bottom: 1px solid var(--border-light);
     (original stronger line: border-bottom: 1px solid var(--border);) */
  padding: var(--sp-16) var(--sp-6);
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.hero-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-name {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 var(--sp-2) 0;
  color: var(--text);
}
.hero-subtitle {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--sp-6);
  letter-spacing: 0.01em;
}
.hero-bio {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 420px;
  line-height: 1.75;
  margin-bottom: var(--sp-8);
}
.hero-bio p { margin-bottom: 0; }
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-photo { flex-shrink: 0; display: flex; justify-content: center; }
.hero-photo img {
  width: 100%;
  max-width: 300px;
  height: 380px;
  border-radius: 20px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-photo { order: -1; }
  .hero-photo img { width: 100%; max-width: 220px; height: 280px; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-bio { max-width: 100%; }
}
/* END CURRENT HERO */

/* Home sections */
.home-section {
  padding: var(--sp-12) var(--sp-6);
  max-width: var(--max-w);
  margin: 0 auto;
}
.home-section + .home-section {
  /* Home divider commented out (line-free home). To restore, soft line is primary:
       border-top: 1px solid var(--border-light);
     (original stronger line: border-top: 1px solid var(--border);) */
}
.home-section-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-8);
}
.home-section-hd h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.85rem); }  /* fluid: ~1.5rem on phones, up to 1.85rem on desktop (was fixed 1.5rem) */
.home-section-hd a {
  font-size: 0.875rem;
  color: var(--text-3);
  text-decoration: none;
}
.home-section-hd a:hover { color: var(--accent); }

/* Focus areas strip */
.focus-areas {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-12) var(--sp-6);
}
.focus-areas-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.focus-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.focus-card-icon {
  font-size: 1.75rem;
  color: var(--accent);
  line-height: 1;
  font-family: var(--font-serif);
}
.focus-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.focus-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
}
@media (max-width: 700px) {
  .focus-areas-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* Recent posts 3-col grid */
.recent-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) {
  .recent-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recent-posts { grid-template-columns: 1fr; }
}

/* Featured project */
.home-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* match Recent Posts; home shows first 3 */
  gap: var(--sp-6);
}
.home-project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.home-project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.home-project-card img {
  width: 100%;
  /* Figures, not photos: never crop them to fit the grid. `contain` letterboxes
     into a fixed 4:3 box so every card aligns, and the bars use --surface so
     they stay invisible in both themes. Previous: height: 180px; object-fit: cover. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.home-project-card-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.home-project-card-body h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1.15rem;
}
.home-project-card-body p {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.home-project-card-body .tags { margin-bottom: var(--sp-3); }
@media (max-width: 900px) {
  .home-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-projects-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────
   8. POST CARD
───────────────────────────────────────────────────── */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);

  /* Anchor for the stretched title link below. */
  position: relative;
}

/* ── Whole-card click ("stretched link") ─────────────────────────────────────
   Photography cards wrap the entire tile in one <a>. A post card cannot: it
   contains tag links, and <a> inside <a> is invalid HTML — the browser
   silently breaks the outer anchor. So the anchor stays on the title and an
   invisible ::after is stretched over the card instead.

   The pseudo-element belongs to the title's <a>, so hovering anywhere on the
   card still triggers `.post-card-title a:hover` — the title colour change is
   not lost, it now fires card-wide.

   Tags sit above the overlay (z-index) so they remain independently clickable.

   TO REVERT to title-only clicking: comment out this whole block, plus the
   `position: relative` line added to `.post-card` above. Nothing else changed. */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-card { cursor: pointer; }
.post-card .tags,
.post-card .tags .tag {
  position: relative;
  z-index: 2;
}
/* ─────────────────────────────────────────────────────────────────────────── */
.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.post-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.post-card-img-placeholder {
  height: 8px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.post-card-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.35;
  margin: var(--sp-2) 0 var(--sp-2) 0;
}
.post-card-title a {
  text-decoration: none;
  color: var(--text);
  transition: color var(--transition);
}
.post-card-title a:hover { color: var(--accent); }
.post-card-meta {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
  display: flex;
  gap: var(--sp-3);
}
.post-card-excerpt {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--sp-3);
}

/* ─────────────────────────────────────────────────────
   9. POSTS LIST PAGE
───────────────────────────────────────────────────── */
.posts-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.posts-page-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-light);   /* softened for white theme (was --border) */
}
.posts-page-header h1 { margin: 0 0 var(--sp-2) 0; }
.posts-page-header p { color: var(--text-2); margin: 0; }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

/* Tags cloud */
.tags-filter {
  margin-top: var(--sp-16);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-light);
}
.tags-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

/* ─────────────────────────────────────────────────────
   10. SINGLE POST
───────────────────────────────────────────────────── */
.post-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--sp-12);
  align-items: start;
}
.post-main { min-width: 0; }
.post-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
}

@media (max-width: 960px) {
  .post-layout {
    grid-template-columns: 1fr;
    padding: var(--sp-8) var(--sp-6);
  }
  .post-sidebar {
    position: static;
    order: -1;
  }
}

/* Post header */
.post-header { margin-bottom: var(--sp-8); }
.post-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 var(--sp-4) 0;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}
.post-meta-sep { color: var(--border); }

/* Teaser */
.post-teaser {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-8);
  box-shadow: var(--shadow-md);
}

/* ── Photo series inside a post — the {{< photo-series >}} shortcode ──────────
   DELIBERATELY SELF-CONTAINED. Every selector here is `.ps-` prefixed and
   shares nothing with the .photo-gallery / .gallery-item / .lightbox rules used
   by /photography/. Editing this block cannot affect the galleries, and
   editing the gallery rules cannot affect a post. The duplication is the
   isolation. Only the :root design tokens are shared, which is what they are
   for.
   To delete the whole feature: remove this block, layouts/shortcodes/
   photo-series.html, and the post that calls it. Nothing else references it. */

.ps-series { margin: var(--sp-10) 0; }

/* Break wider than the text column so the grid reads as a set of photographs
   rather than illustrations to the prose — but stay inside the article rather
   than going full-bleed. Below 1100px there is nothing to break out of. */
@media (min-width: 1100px) {
  .ps-series {
    width: calc(100% + 2 * var(--sp-16));
    margin-left: calc(-1 * var(--sp-16));
    margin-right: calc(-1 * var(--sp-16));
  }
}

.ps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  align-items: start;
}
/* JS adds this and spans each item to its image height, giving row-major
   masonry. Without JS it degrades to a plain top-aligned grid. */
.ps-grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; }

@media (max-width: 768px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-item {
  /* margin must stay 0: .ps-item is a <figure> and would inherit the global
     `figure { margin: 2rem 0 }`, breaking the grid. */
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--surface-alt);
  cursor: pointer;
}
.ps-item a { display: block; line-height: 0; }
.ps-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 300ms ease, opacity 300ms ease;
}
.ps-item:hover img { transform: scale(1.03); opacity: 0.88; }

.ps-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
  font-style: normal;
  font-family: var(--font-sans);
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition);
}
.ps-item:hover figcaption { opacity: 1; }

/* Lightbox — light backdrop in both themes, as on the gallery pages, but its
   own rules. See the .lightbox block for why near-white rather than dark. */
.ps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(246, 245, 242, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.ps-lightbox[hidden] { display: none; }

.ps-lb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  padding: 60px 80px;
}
.ps-lb-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  user-select: none;
  -webkit-user-drag: none;
}

.ps-lb-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: rgba(17,17,16,0.55);
  font-size: 2.4rem;
  cursor: pointer; z-index: 10; line-height: 1;
  padding: 4px 10px;
  transition: color 200ms;
}
.ps-lb-close:hover { color: #111110; }

.ps-lb-prev, .ps-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17,17,16,0.05);
  border: none;
  color: rgba(17,17,16,0.5);
  font-size: 2.8rem;
  cursor: pointer; z-index: 10;
  padding: 12px 16px; line-height: 1;
  border-radius: 4px;
  transition: background 200ms, color 200ms;
}
.ps-lb-prev { left: 12px; }
.ps-lb-next { right: 12px; }
.ps-lb-prev:hover, .ps-lb-next:hover {
  background: rgba(17,17,16,0.11);
  color: #111110;
}

.ps-lb-caption {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(17,17,16,0.7);
  font-size: 0.9rem;
  font-family: var(--font-sans);
  text-align: center;
  max-width: 600px;
}
.ps-lb-counter {
  position: absolute;
  top: 20px; left: 24px;
  color: rgba(17,17,16,0.45);
  font-size: 0.8rem;
  font-family: var(--font-sans);
}

@media (max-width: 768px) {
  .ps-lb-wrap { padding: 44px 12px; }
  .ps-lb-caption { font-size: 0.8rem; bottom: 12px; }
  .ps-lb-counter { font-size: 0.7rem; top: 14px; left: 12px; }
  .ps-lb-close { top: 10px; right: 12px; font-size: 2rem; }
}

/* Post body */
.post-body {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.85;
}
.post-body h2, .post-body h3, .post-body h4 { margin-top: 2em; }
.post-body h2 { font-size: 1.5rem; }
.post-body h3 { font-size: 1.2rem; }
.post-body p { margin-bottom: 1.4em; }
.post-body ul, .post-body ol {
  list-style: revert;
  padding-left: 1.75rem;
  margin-bottom: 1.4em;
}
.post-body li { margin-bottom: 0.4em; }
.post-body strong { font-weight: 600; }
.post-body a { color: var(--accent); }

.post-lastmod {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

/* TOC */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-6);
  font-size: 0.82rem;
}
.toc-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.toc nav ul {
  list-style: none;
  padding-left: var(--sp-3);
  margin: 0;
}
.toc nav > ul { padding-left: 0; }
.toc li { margin-bottom: var(--sp-1); }
.toc a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.5;
  display: block;
  padding: 2px 0;
  transition: color var(--transition);
}
.toc a:hover { color: var(--accent); }

/* YouTube embed */
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin: var(--sp-8) 0;
  background: #000;
  box-shadow: var(--shadow-md);
}
.youtube-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Math */
.katex-display { overflow-x: auto; margin: var(--sp-6) 0; }

/* ─────────────────────────────────────────────────────
   11. ABOUT PAGE
───────────────────────────────────────────────────── */
.about-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.about-page h1 { font-size: 2rem; margin-bottom: var(--sp-6); }

.about-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-2);
}
.about-body h2 {
  font-size: 1.3rem;
  margin-top: var(--sp-12);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light);   /* softened for white theme (was --border) */
  color: var(--text);
}
.about-body h3 { font-size: 1.05rem; color: var(--text); margin-top: var(--sp-6); }
.about-body ul, .about-body ol {
  list-style: revert;
  padding-left: 1.5rem;
  margin-bottom: var(--sp-4);
}
.about-body li { margin-bottom: var(--sp-1); }
.about-body p { margin-bottom: var(--sp-4); }
.about-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-6);
  font-style: italic;
  color: var(--text-2);
  margin: var(--sp-6) 0;
}
.about-body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
}
.about-body strong { color: var(--text); }
.about-body a { color: var(--accent); }
mark.lwl-highlight {
  background: var(--accent-light);
  color: var(--accent);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  font-weight: 600;
  font-style: normal;
}
.about-body figure.align-right {
  float: right;
  margin: 0 0 var(--sp-6) var(--sp-8);
  max-width: 40%;
}
.about-body figure.align-right img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}
@media (max-width: 600px) {
  .about-body figure.align-right { float: none; max-width: 100%; margin-left: 0; }
}

/* ─────────────────────────────────────────────────────
   12. PROJECTS PAGE
───────────────────────────────────────────────────── */
.projects-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.projects-page-header {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-light);   /* softened for white theme (was --border) */
}
.projects-page-header h1 { margin: 0 0 var(--sp-2) 0; }
.projects-page-header p { color: var(--text-2); margin: 0; max-width: 580px; }

.project-row {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sp-8);
  /* Divider options (pick one):
     ORIGINAL:   margin/padding --sp-12 + border-bottom 1px var(--border)        (stronger line)
     REFINED:    margin/padding --sp-12 + border-bottom 1px var(--border-light)  (faint line — ACTIVE)
     NO-LINE:    margin-bottom --sp-24, padding-bottom 0, no border              (open whitespace, no line) */
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}
.project-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.project-row-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.project-row-img img {
  width: 100%;
  /* Uniform row rhythm without cropping — see .home-project-card img.
     Previous: height: auto (native ratios, 0.98–1.50, gave uneven rows). */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
  display: block;
}
.project-row-content h2 {
  margin-top: 0;
  font-size: 1.5rem;
}
.project-row-content p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-4) 0;
}
.project-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 1.25rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition);
}
.project-btn:hover { background: var(--accent-2); color: #fff; }

/* Row of card actions — a project may have a page link, a code link, both, or neither */
.project-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.project-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.project-btn-secondary:hover { background: var(--accent-light); color: var(--accent); }

/* Shown instead of the page button when a project exists but isn't published yet */
.project-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .project-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────
   12b. CONTACT
───────────────────────────────────────────────────── */

.contact-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.contact-header { margin-bottom: var(--sp-8); }
.contact-header h1 { margin: 0 0 var(--sp-2) 0; }
.contact-subtitle {
  color: var(--text-2);
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.contact-field textarea { resize: vertical; min-height: 140px; }

/* honeypot — hidden from humans */
.contact-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-btn {
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 0.7rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
}
.contact-btn:hover { background: var(--accent-2); }
.contact-btn:disabled { opacity: 0.6; cursor: default; }

.contact-status { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.contact-status.is-ok  { color: var(--accent); }
.contact-status.is-err { color: #c0392b; }

.contact-notice {
  color: var(--text-2);
  padding: var(--sp-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.contact-alt {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.contact-alt > span { color: var(--text-3); font-size: 0.9rem; }
.contact-social { display: flex; gap: var(--sp-4); }
.contact-social a {
  color: var(--text-2);
  font-size: 1.25rem;
  transition: color var(--transition);
}
.contact-social a:hover { color: var(--accent); }

/* ─────────────────────────────────────────────────────
   13. PHOTOGRAPHY
───────────────────────────────────────────────────── */

/* Section hero banner */
.photo-hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: #111;
}
.photo-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* centred crop, like the Jekyll overlay hero */
  display: block;
}
.photo-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-8) var(--sp-8);
}
.photo-hero-overlay h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 var(--sp-2) 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.photo-hero-overlay p {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
@media (max-width: 640px) {
  .photo-hero { height: 300px; }
  .photo-hero-overlay { padding: var(--sp-5); }   /* 1.25rem — more breathing room on phones */
}

/* Photography hub page */
.photography-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-12);
}
.photography-hub-header {
  text-align: center;
  margin-bottom: var(--sp-4);
}
.photography-hub-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.photography-hub-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-2);
  font-size: 1rem;
  margin: var(--sp-2) 0 0;
}

.photography-hub-intro {
  font-size: 1.2rem;
  color: var(--text-2);
  max-width: 680px;
  margin: 0 auto var(--sp-6);
  text-align: center;
  line-height: 1.8;
}
.photography-hub-intro p { margin-bottom: var(--sp-2); }
.photography-hub-intro a { color: var(--accent); }

/* Gallery statement — body text on a single gallery page, between the hero and
   the grid. Same measure and centring as the hub intro so the two pages read
   as one voice, but a size down: on the gallery the photographs lead and the
   words introduce them, which is the reverse of the hub. */
/* Gallery page heading used when a gallery has no headerImage — the hero, and
   with it the <h1>, is skipped in that case. Matches .photography-hub-header so
   the two page types read as the same family. */
.photo-gallery-header {
  text-align: center;
  margin: 0 0 var(--sp-8);
}
.photo-gallery-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.photo-gallery-header .photography-hub-tagline { margin-top: var(--sp-2); }

.photo-gallery-intro {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 620px;
  margin: 0 auto var(--sp-10);
  text-align: center;
  line-height: 1.75;
}
.photo-gallery-intro p { margin-bottom: var(--sp-3); }
.photo-gallery-intro p:last-child { margin-bottom: 0; }
.photo-gallery-intro a { color: var(--accent); }

/* Photography quote — visually separated below the intro text */
.photo-quote {
  max-width: 560px;
  margin: var(--sp-6) auto var(--sp-8);
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.photo-quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  padding: 0;
  border: none;
  quotes: none;
}
.photo-quote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
}

.photography-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .photography-hub-grid { grid-template-columns: 1fr; }
}

.photo-hub-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.photo-hub-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.photo-hub-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.photo-hub-card:hover img { transform: scale(1.04); }
/* Stand-in for a gallery that has no headerImage yet. Same height as
   .photo-hub-card img so the grid keeps its rhythm, and dark enough in both
   themes for the white caption text over it to stay legible. */
.photo-hub-card-placeholder {
  width: 100%;
  height: 360px;
  display: block;
  background: linear-gradient(135deg, #3a3a36, #262623);
}

.photo-hub-card-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-6) var(--sp-6);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
}
.photo-hub-card-caption h2 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 var(--sp-1) 0;
}
.photo-hub-card-caption p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ── Gallery grid — CSS columns masonry (no JS) ── */
.photo-gallery-page {
  /* Fluid full-bleed with ~4vw side margins — scales with the window instead of a
     fixed cap. Raise/lower the 4vw to make it narrower/wider. */
  padding: var(--sp-6) clamp(var(--sp-8), 4vw, var(--sp-24)) var(--sp-16);
  margin: 0 auto;
}

/* Link to the archive at the foot of a gallery. Deliberately understated —
   it is an offer to go further, not a second front door. */
.gallery-archive-link {
  margin: var(--sp-12) 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.gallery-archive-link a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.gallery-archive-link a:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* Gallery — ROW-MAJOR MASONRY.
   Reads left-to-right (image 1,2,3 across the top, then 4,5,6 …) so the picture
   order matches the front-matter list, like the old site. A small script
   (see photography/single.html) adds `.is-masonry` and sets each item's row span
   to its image height, which gives tight masonry packing without cropping.
   Before the script runs (or if JS is off) it degrades to a plain top-aligned grid.
   TO REVERT to the pure-CSS column masonry: restore the commented `columns` rules,
   delete `.is-masonry`, and remove the data-masonry attr + script in single.html. */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  align-items: start;     /* items size to their image; no stretching */
}
.photo-gallery.is-masonry {
  grid-auto-rows: 1px;    /* fine unit; JS spans each item to image height + gap */
  row-gap: 0;             /* vertical gap is baked into the JS row-span instead */
}
/* Previous pure-CSS column masonry (column-major order — items flowed top-to-bottom
   down each column, which pushed early photos low; replaced for row-major order):
.photo-gallery { columns: 3 240px; column-gap: 8px; } */

.gallery-item {
  /* margin must stay 0: .gallery-item is a <figure>, which inherits the global
     `figure { margin: 2rem 0 }`; leaving it would break the grid spacing. */
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--surface-alt);
  cursor: pointer;
}

.gallery-item a {
  display: block;
  line-height: 0;
}

.gallery-item img {
  width: 100%;
  height: auto;      /* natural ratio = true masonry */
  display: block;
  transition: transform 300ms ease, opacity 300ms ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
  opacity: 0.88;
}

.gallery-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
  font-style: normal;
  font-family: var(--font-sans);
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover figcaption { opacity: 1; }

.photo-instagram-link {
  text-align: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  /* border-top: 1px solid var(--border); */   /* divider line above "See more" — hidden; uncomment to restore */
  font-size: 0.9rem;
  color: var(--text-3);
}
.photo-instagram-link a { color: var(--accent); }

/* ─────────────────────────────────────────────────────
   14. TAGS PAGE
───────────────────────────────────────────────────── */
.tags-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.tags-page h1 { margin-bottom: var(--sp-8); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-cloud a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--text-2);
  transition: all var(--transition);
}
.tag-cloud a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tag-count {
  font-size: 0.8rem;
  opacity: 0.65;
}

/* ─────────────────────────────────────────────────────
   TAXONOMY PAGES (tag detail)
───────────────────────────────────────────────────── */
.taxonomy-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.taxonomy-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.taxonomy-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.taxonomy-header h1 {
  font-size: 1.8rem;
  margin: 0 0 var(--sp-2);
}
.taxonomy-count {
  font-size: 0.9rem;
  color: var(--text-3);
  margin: 0;
}
.taxonomy-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-6);
}

/* ─────────────────────────────────────────────────────
   RESEARCH PAGE
───────────────────────────────────────────────────── */
.research-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.research-page h1 { margin-bottom: var(--sp-2); }
.research-subtitle {
  color: var(--text-3);
  font-size: 1rem;
  margin-bottom: var(--sp-8);
}
.research-page h2 {
  font-size: 1.2rem;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light);   /* softened for white theme (was --border) */
}
.research-page li {
  margin-bottom: var(--sp-4);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────
   COMMENTS
───────────────────────────────────────────────────── */
.post-comments {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.post-comments h2 {
  font-size: 1.3rem;
  margin-bottom: var(--sp-6);
}

/* EchoThread widget — map its tokens onto this site's palette.

   The widget writes --et-color-* as inline styles on .et-widget (via
   style.setProperty with no priority), so these need !important to win.

   Everything resolves to the site's own custom properties, which means both
   themes and the light/dark toggle are handled by the palette itself, with no
   JS. That matters for the accent in particular: the widget reads
   data-accent-color once at init and never re-reads it, so setting the accent
   from markup froze it at whichever theme the page loaded in — blue stayed
   blue after switching to dark, green stayed green after switching to light.
   As a CSS variable it re-resolves on every toggle, so light gets the blue
   accent and dark gets the green one, matching the rest of the site.

   --et-color-bg is the widget's own background: --surface, not --bg, so the
   comment block reads as a card against the page instead of dissolving into
   it (they were previously the identical hex). */
#echothread .et-widget {
  --et-color-bg:           var(--surface) !important;
  --et-color-surface:      var(--surface-alt) !important;
  --et-color-border:       var(--border) !important;
  --et-color-text:         var(--text) !important;
  --et-color-muted:        var(--text-3) !important;
  --et-color-accent:       var(--accent) !important;
  --et-color-accent-hover: var(--accent-2) !important;
}

/* giscus stylesheet sets `color-scheme: light dark` on its iframe, which makes
   it follow the OS rather than this site's theme toggle. With the OS in dark
   mode and the site switched to light, the light theme renders washed out and
   its controls look inert. Pin the iframe's scheme to the site's own theme.
   Scoped to .giscus-frame only — no site colours are affected. */
.giscus-frame { color-scheme: light; }
:root[data-theme="light"] .giscus-frame { color-scheme: light; }
:root[data-theme="dark"]  .giscus-frame { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .giscus-frame { color-scheme: dark; }
}

/* ─────────────────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────────────────── */
/* Light backdrop, in BOTH themes deliberately — this is a viewer, not a page.
   A near-white ground makes a photograph read as a print on a gallery wall and
   stops the site's dark theme competing with the image's own darks. Hardcoded
   rather than tokenised for exactly that reason: it must not follow the theme.
   Not pure #fff — a hair of warmth keeps it from glaring next to the photo.

   Deliberately translucent, not solid: the gallery stays faintly visible
   behind, so the viewer reads as an overlay on the page rather than a new
   screen, and you keep your sense of place in the grid. Blur is light — enough
   to stop the photos behind competing for attention, not so much that they
   turn to mush. Push the alpha much past 0.92 and it goes flat; much below
   0.85 and the background starts fighting the photograph. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(246, 245, 242, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.lightbox[hidden] { display: none; }

.lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 80px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Close button — top right */
.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  color: rgba(17,17,16,0.55);
  font-size: 2.4rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 4px 10px;
  transition: color 200ms;
}
.lightbox-close:hover { color: #111110; }

/* Prev / Next arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17,17,16,0.05);
  border: none;
  color: rgba(17,17,16,0.5);
  font-size: 2.8rem;
  cursor: pointer;
  z-index: 10;
  padding: 12px 16px;
  line-height: 1;
  border-radius: 4px;
  transition: background 200ms, color 200ms;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(17,17,16,0.11);
  color: #111110;
}

/* Caption + counter */
.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(17,17,16,0.7);
  font-size: 0.9rem;
  font-family: var(--font-sans);
  text-align: center;
  max-width: 600px;
}
.lightbox-counter {
  position: absolute;
  top: 20px;
  left: 24px;
  color: rgba(17,17,16,0.45);
  font-size: 0.8rem;
  font-family: var(--font-sans);
}

/* Mobile lightbox fixes consolidated in the mobile section below */

/* ─────────────────────────────────────────────────────
   THEME TOGGLE
───────────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
  margin-left: var(--sp-2);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
/* Icon swap: sun in dark mode, moon in light mode */
.theme-toggle .fa-moon  { display: inline; }
.theme-toggle .fa-sun   { display: none; }
[data-theme="dark"] .theme-toggle .fa-moon  { display: none; }
[data-theme="dark"] .theme-toggle .fa-sun   { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .fa-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .fa-sun  { display: inline; }
}

/* ─────────────────────────────────────────────────────
   13. MEDIA PAGE
───────────────────────────────────────────────────── */
.media-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}

.media-page-header {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-light);   /* softened for white theme (was --border) */
}
.media-page-header h1 { margin: 0 0 var(--sp-2) 0; }
.media-page-tagline {
  color: var(--text-2);
  margin: 0;
  font-size: 1.1rem;
}

/* Section blocks */
.media-section {
  margin-bottom: var(--sp-16);
}
.media-section-eyebrow {
  margin-bottom: var(--sp-3);
}
.media-section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.3em 0.8em;
  border-radius: 999px;
}
.media-section-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin: 0 0 var(--sp-2) 0;
}
.media-section-desc {
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 640px;
  margin: 0 0 var(--sp-8) 0;
}

/* Section nav pills */
.media-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);   /* sits inside the header, above the divider line */
  margin-bottom: 0;          /* header padding-bottom provides the gap before the line */
}
.media-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.45em 1.1em;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.media-nav-pill:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
}

/* Section divider */
.media-section-divider {
  border: none;
  border-top: 1px solid var(--border-light);   /* softened for white theme (was --border) */
  margin: 0 0 var(--sp-16) 0;
}

/* Videos header row: title + channel link side by side */
.media-section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
.media-section-header-row .media-section-title { margin-bottom: var(--sp-1); }
.media-section-header-row .media-section-desc  { margin-bottom: 0; }
.media-channel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--border);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.media-channel-link .fa-youtube { color: #ff0000; font-size: 1em; }
.media-channel-link:hover {
  color: var(--accent);
  border-color: var(--accent-light);
  background: var(--accent-light);
}
.media-channel-link .fa-arrow-right {
  font-size: 0.7em;
  opacity: 0.6;
}

/* ── Writing groups ── */
.writing-group {
  margin-bottom: var(--sp-10);
}
.writing-group:last-child { margin-bottom: 0; }
.writing-group-header {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-light);
}
.writing-group-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.writing-group-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.writing-group-desc {
  color: var(--text-2);
  font-size: 0.9rem;
  margin: 0;
  max-width: 580px;
}

/* ── Video grid ── */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-12);
}
.video-card {
  /* No border or background — embed is the hero */
}

/* Responsive 16:9 embed */
.video-embed-wrap {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.video-embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.video-card-meta {
  padding: 0;
}
.video-year {
  display: block;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.video-card-meta h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.35;
  color: var(--text);
}
.video-card-meta p {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 0;
  line-height: 1.6;
}

/* ── Writing list (row layout) ── */
.writing-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.writing-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}
.writing-entry:last-child { border-bottom: none; }
.writing-entry:hover { background: var(--accent-light); }

.writing-entry-main { min-width: 0; }
.writing-entry-titles {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.writing-entry-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.writing-entry-title-en {
  font-size: 0.82rem;
  color: var(--text-3);
  font-style: italic;
  white-space: nowrap;
}
.writing-entry-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

.writing-entry-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.writing-year {
  font-size: 0.78rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.writing-entry-cta {
  font-size: 0.85rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
}
.writing-entry:hover .writing-entry-cta { opacity: 1; }

.writing-lang {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.2em 0.6em;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES (smartphones ≤ 640px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* -- Tighten global padding -- */
  .hero { padding: var(--sp-6) var(--sp-4); }
  .home-section { padding: var(--sp-8) var(--sp-4); }
  .photo-gallery-page { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .photography-page { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  .posts-page { padding: var(--sp-8) var(--sp-4); }

  /* -- Photo gallery: 2 columns on phones -- */
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }

  /* -- Grids: force single column on narrow screens -- */
  .posts-grid { grid-template-columns: 1fr; }
  .taxonomy-posts { grid-template-columns: 1fr; }

  /* -- Photo hub cards -- */
  .photo-hub-card img { height: 240px; }
  .photo-hub-card-caption h2 { font-size: 1.1rem; }
  .photo-hub-card-caption p { font-size: 0.8rem; }

  /* -- Footer: stack vertically -- */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
  }

  /* -- Notice blocks: tighter padding -- */
  .notice { padding: var(--sp-3) var(--sp-4); }

  /* -- Blockquote: less left padding -- */
  blockquote { padding-left: var(--sp-4); }

  /* -- Photography hub intro: single column text -- */
  .photography-hub-header h1 { font-size: 2rem; }
  .photo-quote { padding: var(--sp-4) var(--sp-3); }

  /* -- Lightbox: tighter padding -- */
  .lightbox-img-wrap { padding: 44px 12px; }
  .lightbox-caption { font-size: 0.8rem; bottom: 12px; }
  .lightbox-counter { font-size: 0.7rem; top: 14px; left: 12px; }
  .lightbox-close { top: 10px; right: 12px; font-size: 2rem; }

  /* -- Research page -- */
  .research-page { padding: var(--sp-8) var(--sp-4); }

  /* -- About page -- */
  .about-page { padding: var(--sp-8) var(--sp-4); }

  /* -- Taxonomy page -- */
  .taxonomy-page { padding: var(--sp-8) var(--sp-4); }

  /* -- Media page -- */
  .media-page { padding: var(--sp-8) var(--sp-4); }
  .videos-grid { grid-template-columns: 1fr; }
  .writing-entry { grid-template-columns: 1fr; gap: var(--sp-2); }
  .writing-entry-aside { flex-direction: row; align-items: center; justify-content: space-between; }
  .writing-entry-title-en { white-space: normal; }
  .media-section-title { font-size: 1.4rem; }
}

/* Extra small screens (≤ 380px, e.g. iPhone SE) */
@media (max-width: 380px) {
  .photo-gallery { grid-template-columns: 1fr; }
  .hero-photo img { width: 140px; height: 186px; }
  .photography-hub-header h1 { font-size: 1.6rem; letter-spacing: 0.03em; }
}

/* ── 404 page ── */
.notfound {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-24) var(--sp-6);
  text-align: center;
}
.notfound-code {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}
.notfound-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: var(--sp-4) 0 0;
}
.notfound-text {
  color: var(--text-2);
  margin: var(--sp-4) auto var(--sp-8);
  max-width: 42ch;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
@media (max-width: 480px) {
  .notfound { padding: var(--sp-16) var(--sp-4); }
}