/*
  LOBEE.CA — Shared Design System
  GitHub-style: crisp whites, neutral grays, blue accent
  ══════════════════════════════════════════════════════
  All pages import ONLY this file. No per-page <style> blocks.
  New blog post: tools/post-generator → your-slug.html; card on blogs.html.
  3D press on iOS: include lobee-press.js on every page.
*/

/* ─── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  /* Tell browsers this site manages its own color scheme.
     This opts out of browser-level forced dark mode entirely. */
  color-scheme: light;

  /* Surfaces */
  --color-bg:               #ffffff;
  --color-canvas:           #f6f8fa;
  --color-surface:          #ffffff;
  --color-surface-2:        #f6f8fa;

  /* Borders & Dividers */
  --color-border:           #d0d7de;
  --color-divider:          #d8dee4;

  /* Text */
  --color-text:             #1f2328;
  --color-text-muted:       #636c76;
  --color-text-faint:       #9198a1;

  /* Accent — Slate Blue */
  --color-accent:           #1F5FA8;
  --color-accent-hover:     #16467C;
  --color-accent-bg:        rgba(31, 95, 168, 0.08);
  --color-accent-border:    rgba(31, 95, 168, 0.22);

  /* Card interactions */
  --color-card-bg:          #ffffff;
  --color-card-hover:       #f6f8fa;
  --color-card-border:      #d0d7de;
  --color-card-hover-border:#1F5FA8;
  --color-card-hover-shadow:0 0 0 1px rgba(31, 95, 168, 0.16), 0 3px 12px rgba(31,35,40,0.06);

  /* Header — deeper tone of canvas (#f6f8fa → #eceff3) */
  --color-header-bg:        #eceff3;
  --color-header-text:      var(--color-text);
  --color-header-muted:     var(--color-text-muted);
  --color-header-border:    var(--color-border);
  --color-header-hover:     rgba(31, 35, 40, 0.06);
  --color-header-well-bg:     rgba(31, 35, 40, 0.04);
  --color-header-well-border: var(--color-divider);
  --color-header-active:      rgba(31, 35, 40, 0.08);
  --color-header-elev-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 4px rgba(31, 35, 40, 0.08);
  --color-header-btn-text:      var(--color-text);
  --color-header-btn-text-muted:var(--color-text-muted);

  /* Type scale — vmin keeps fluid type stable when phones rotate (vw jumps in landscape) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vmin, 0.8125rem);
  --text-sm:   clamp(0.8125rem,0.78rem + 0.2vmin,  0.875rem);
  --text-base: clamp(0.875rem, 0.85rem + 0.15vmin, 0.9375rem);
  --text-lg:   clamp(1rem,     0.95rem + 0.3vmin,  1.125rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.8vmin,  1.5rem);
  --text-2xl:  clamp(1.5rem,   1.2rem  + 1.5vmin,  2rem);

  /* Spacing (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Shape */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* Motion */
  --transition: 120ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(31,35,40,0.04);
  --shadow-md: 0 3px 6px rgba(31,35,40,0.10);
  --shadow-lg: 0 8px 24px rgba(31,35,40,0.12);

  /* 3D button depth (flat-modern press) */
  --btn-3d-depth:           3px;
  --btn-3d-face-top:        #ffffff;
  --btn-3d-face-bottom:     #f7f8fa;
  --btn-3d-side:            rgba(31, 35, 40, 0.22);
  --btn-3d-border:          rgba(31, 35, 40, 0.14);
  --btn-3d-highlight:       rgba(255, 255, 255, 0.68);
  --btn-3d-accent-top:      #2F76D5;
  --btn-3d-accent-bottom:   #1F5FA8;
  --btn-3d-accent-side:     #16467C;
  --btn-3d-accent-border:   #16467C;
  --btn-3d-accent-text:     #E5E8F3;
  --btn-3d-press-ms:        90ms;
  --btn-3d-depth-sm:        2px;
  --btn-3d-shadow-raised:
    inset 0 -1px 0 rgba(31, 35, 40, 0.06),
    0 1px 2px rgba(31, 35, 40, 0.06),
    0 var(--btn-3d-depth) 0 var(--btn-3d-side);
  --btn-3d-shadow-raised-sm:
    inset 0 -1px 0 rgba(31, 35, 40, 0.06),
    0 1px 2px rgba(31, 35, 40, 0.05),
    0 var(--btn-3d-depth-sm) 0 rgba(31, 35, 40, 0.18);
  --btn-3d-shadow-pressed:
    inset 0 2px 8px rgba(31, 35, 40, 0.12),
    0 0 0 rgba(0,0,0,0);
  --btn-3d-shadow-accent-raised:
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(31, 35, 40, 0.10),
    0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.78);
  --btn-3d-shadow-accent-pressed: var(--btn-3d-shadow-pressed);

  /* Layout */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --header-h:        56px;

  /* Fonts */
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Explicit light theme — also opts out of forced dark */
[data-theme="light"] {
  color-scheme: light;
}

/* ─── DARK MODE ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Tell the browser this is intentional dark mode — not forced */
  color-scheme: dark;

  --color-bg:               #0B1624;
  --color-canvas:           #0B1624;
  --color-surface:          #111F32;
  --color-surface-2:        #162B44;
  --color-border:           #203A5A;
  --color-divider:          #2A4B70;
  --color-text:             #E7EEFB;
  --color-text-muted:       #B2C0D3;
  --color-text-faint:       #90A4BD;
  --color-accent:           #6EA8FF;
  --color-accent-hover:     #9CC4FF;
  --color-accent-bg:        rgba(110, 168, 255, 0.12);
  --color-accent-border:    rgba(110, 168, 255, 0.26);
  --color-card-bg:          #111F32;
  --color-card-hover:       #162B44;
  --color-card-border:      #203A5A;
  --color-card-hover-border:#6EA8FF;
  --color-card-hover-shadow:0 0 0 1px rgba(110, 168, 255, 0.22), 0 3px 12px rgba(0,0,0,0.25);
  /* Header — subtly lifted from the dark page background */
  --color-header-bg:        #0B1624;
  --color-header-text:      var(--color-text);
  --color-header-muted:     rgba(229, 232, 243, 0.68);
  --color-header-border:    var(--color-border);
  --color-header-hover:     rgba(255, 255, 255, 0.06);
  --color-header-well-bg:     rgba(0, 0, 0, 0.28);
  --color-header-well-border: #2A4B70;
  --color-header-active:      rgba(255, 255, 255, 0.09);
  --color-header-elev-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.20);
  --shadow-md: 0 3px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.40);
  --btn-3d-depth:           3px;
  --btn-3d-depth-sm:        1px;
  /* Match header nav button surface */
  --btn-3d-face-top:        #111F32;
  --btn-3d-face-bottom:     #0B1624;
  --btn-3d-side:            rgba(0, 0, 0, 0.78);
  --btn-3d-side-step:       rgba(110, 168, 255, 0.16);
  --btn-3d-ambient:         rgba(110, 168, 255, 0.12);
  --btn-3d-border:          rgba(229, 232, 243, 0.12);
  --btn-3d-highlight:       rgba(255, 255, 255, 0.10);
  --btn-3d-hover-top:       #152A43;
  --btn-3d-hover-bottom:    #0F1E31;
  --btn-3d-hover-border:    #3F79C7;
  --btn-3d-accent-top:      #2F76D5;
  --btn-3d-accent-bottom:   #1F5FA8;
  --btn-3d-accent-side:     #16467C;
  --btn-3d-accent-side-step:#B2C0D3;
  --btn-3d-accent-ambient:  rgba(110, 168, 255, 0.24);
  --btn-3d-accent-border:   #143A66;
  --btn-3d-accent-text:     #E5E8F3;
  --btn-3d-accent-highlight:rgba(255, 255, 255, 0.32);
  --btn-3d-shadow-raised:
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 var(--btn-3d-depth) 0 var(--btn-3d-side),
    0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.32);
  --btn-3d-shadow-raised-sm:
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 var(--btn-3d-depth-sm) 0 rgba(0, 0, 0, 0.60),
    0 calc(var(--btn-3d-depth-sm) + 1px) 0 rgba(0, 0, 0, 0.28);
  --btn-3d-shadow-pressed:
    inset 0 2px 10px rgba(0, 0, 0, 0.22),
    0 0 0 rgba(0,0,0,0);
  --btn-3d-shadow-accent-raised:
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.84),
    0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.28);
  --btn-3d-shadow-accent-pressed: var(--btn-3d-shadow-pressed);
  /* Dark raised controls — nav bar frame (applied site-wide) */
  --btn-3d-border-frame:    rgba(0, 0, 0, 0.55);
  --btn-3d-shadow-raised-framed:
    var(--btn-3d-shadow-raised),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  /* Header pills — lifted tone above bar */
  /* Keep header controls identical to global 3D controls */
  --btn-3d-header-face-top:   var(--btn-3d-face-top);
  --btn-3d-header-face-bottom:var(--btn-3d-face-bottom);
  --btn-3d-header-side:       var(--btn-3d-side);
  --btn-3d-header-side-step:  var(--btn-3d-side-step);
  --btn-3d-header-ambient:    var(--btn-3d-ambient);
  --btn-3d-header-border:     var(--btn-3d-border);
  --btn-3d-header-highlight:  var(--btn-3d-highlight);
  --color-header-btn-text:      var(--color-header-text);
  --color-header-btn-text-muted:var(--color-header-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-bg:               #0B1624;
    --color-canvas:           #0B1624;
    --color-surface:          #111F32;
    --color-surface-2:        #162B44;
    --color-border:           #203A5A;
    --color-divider:          #2A4B70;
    --color-text:             #E7EEFB;
    --color-text-muted:       #B2C0D3;
    --color-text-faint:       #90A4BD;
    --color-accent:           #6EA8FF;
    --color-accent-hover:     #9CC4FF;
    --color-accent-bg:        rgba(110, 168, 255, 0.12);
    --color-accent-border:    rgba(110, 168, 255, 0.26);
    --color-card-bg:          #111F32;
    --color-card-hover:       #162B44;
    --color-card-border:      #203A5A;
    --color-card-hover-border:#6EA8FF;
    --color-card-hover-shadow:0 0 0 1px rgba(110, 168, 255, 0.22), 0 3px 12px rgba(0,0,0,0.25);
    --color-header-bg:        #0B1624;
    --color-header-text:      var(--color-text);
    --color-header-muted:     rgba(229, 232, 243, 0.68);
    --color-header-border:    var(--color-border);
    --color-header-hover:     rgba(255,255,255,0.06);
    --color-header-well-bg:     rgba(0, 0, 0, 0.28);
    --color-header-well-border: #2A4B70;
    --color-header-active:      rgba(255, 255, 255, 0.09);
    --color-header-elev-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 0 rgba(0,0,0,0.20);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.30);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.40);
    --btn-3d-depth:           3px;
    --btn-3d-depth-sm:        1px;
    /* Match header nav button surface */
    --btn-3d-face-top:        #111F32;
    --btn-3d-face-bottom:     #0B1624;
    --btn-3d-side:            rgba(0, 0, 0, 0.78);
    --btn-3d-side-step:       rgba(110, 168, 255, 0.16);
    --btn-3d-ambient:         rgba(110, 168, 255, 0.12);
    --btn-3d-border:          rgba(229, 232, 243, 0.12);
    --btn-3d-highlight:       rgba(255, 255, 255, 0.10);
    --btn-3d-hover-top:       #152A43;
    --btn-3d-hover-bottom:    #0F1E31;
    --btn-3d-hover-border:    #3F79C7;
    --btn-3d-accent-top:      #2F76D5;
    --btn-3d-accent-bottom:   #1F5FA8;
    --btn-3d-accent-side:     #16467C;
    --btn-3d-accent-side-step:#B2C0D3;
    --btn-3d-accent-ambient:  rgba(110, 168, 255, 0.24);
    --btn-3d-accent-border:   #143A66;
    --btn-3d-accent-text:     #E5E8F3;
    --btn-3d-accent-highlight:rgba(255, 255, 255, 0.32);
    --btn-3d-shadow-raised:
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.22),
      0 var(--btn-3d-depth) 0 var(--btn-3d-side),
      0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.32);
    --btn-3d-shadow-raised-sm:
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.18),
      0 var(--btn-3d-depth-sm) 0 rgba(0, 0, 0, 0.60),
      0 calc(var(--btn-3d-depth-sm) + 1px) 0 rgba(0, 0, 0, 0.28);
    --btn-3d-shadow-pressed:
      inset 0 2px 10px rgba(0, 0, 0, 0.22),
      0 0 0 rgba(0,0,0,0);
    --btn-3d-shadow-accent-raised:
      inset 0 -1px 0 rgba(0, 0, 0, 0.24),
      0 1px 2px rgba(0, 0, 0, 0.22),
      0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.84),
      0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.28);
    --btn-3d-shadow-accent-pressed: var(--btn-3d-shadow-pressed);
    --btn-3d-border-frame:    rgba(0, 0, 0, 0.55);
    --btn-3d-shadow-raised-framed:
      var(--btn-3d-shadow-raised),
      inset 0 0 0 1px rgba(0, 0, 0, 0.35);

    /* Keep header controls identical to global 3D controls */
    --btn-3d-header-face-top:   var(--btn-3d-face-top);
    --btn-3d-header-face-bottom:var(--btn-3d-face-bottom);
    --btn-3d-header-side:       var(--btn-3d-side);
    --btn-3d-header-side-step:  var(--btn-3d-side-step);
    --btn-3d-header-ambient:    var(--btn-3d-ambient);
    --btn-3d-header-border:     var(--btn-3d-border);
    --btn-3d-header-highlight:  var(--btn-3d-highlight);
    --color-header-btn-text:      var(--color-header-text);
    --color-header-btn-text-muted:var(--color-header-muted);
  }
}

/* ─── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS Safari: avoid automatic font inflation/deflation on rotate (esp. landscape), which can diverge heading vs body */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-canvas);
  transition: background-color 200ms ease, color 200ms ease;
  padding-top: var(--header-h);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.3; font-weight: 600; }
p, li { text-wrap: pretty; }
::selection { background: var(--color-accent-bg); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
button { cursor: pointer; background: none; border: none; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
/* Card-like links — no prose-style underline / accent hover on the shell */
a.feed-card,
a.feed-card:hover,
a.card-block,
a.card-block:hover,
a.btn-back,
a.btn-back:hover {
  text-decoration: none;
}
a.feed-card,
a.feed-card:hover { color: var(--color-text); }
a.feed-card.feed-card--featured,
a.feed-card.feed-card--featured:hover { color: #fff; }

/* ─── 3D SURFACE (nav bar is the reference — single source of truth) ─────── */
/*
  All raised controls share this block. Nav links define the look; everything else
  uses the same gradient, depth, dark frame, hover border, and press behavior.
  Add new controls to --btn-3d-control and --btn-3d-control-accent below.
*/
:is(.btn-3d, .btn-3d-surface, .feed-card, .card-block, .btn-back, .contact-chip, .surface-3d, .index-panel, .site-header__link, .site-header__toggle) {
  background: linear-gradient(180deg, var(--btn-3d-face-top) 0%, var(--btn-3d-face-bottom) 100%);
  border: 1px solid var(--btn-3d-border);
  border-radius: var(--radius-md);
  box-shadow: var(--btn-3d-shadow-raised);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--btn-3d-press-ms) cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow var(--btn-3d-press-ms) cubic-bezier(0.16, 1, 0.3, 1),
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}
:is(.btn-3d, .btn-3d-surface, .feed-card, .card-block, .btn-back, .contact-chip, .site-header__link, .site-header__toggle):is(:active, .is-pressed):not(.feed-card--muted):not(:disabled) {
  transform: translateY(var(--btn-3d-depth));
  box-shadow: var(--btn-3d-shadow-pressed);
}
:is(.btn-3d--accent, .btn-3d-surface--accent, .feed-card--featured, .feed-card:has(.feed-card__title.feed-card--featured), .site-header__link[aria-current="page"], .site-header__link--about) {
  background: linear-gradient(180deg, var(--btn-3d-accent-top) 0%, var(--btn-3d-accent-bottom) 100%);
  border-color: var(--btn-3d-accent-border);
}
:is(.btn-3d--accent, .btn-3d-surface--accent, .feed-card--featured, .feed-card:has(.feed-card__title.feed-card--featured), .site-header__link[aria-current="page"], .site-header__link--about):not(:active):not(.is-pressed) {
  box-shadow: var(--btn-3d-shadow-accent-raised);
}
[data-theme="dark"] :is(
  .btn-3d:not(.btn-3d--accent),
  .btn-3d-surface:not(.btn-3d-surface--accent),
  .feed-card:not(.feed-card--featured):not(:has(.feed-card__title.feed-card--featured)),
  .card-block,
  .btn-back,
  .contact-chip,
  .surface-3d,
  .index-panel,
  .site-header__link:not([aria-current="page"]):not(.site-header__link--about),
  .site-header__toggle
):not(:active):not(.is-pressed) {
  border-color: var(--btn-3d-border-frame);
  box-shadow: var(--btn-3d-shadow-raised-framed);
}
[data-theme="dark"] :is(
  .btn-3d:not(.btn-3d--accent),
  .btn-3d-surface:not(.btn-3d-surface--accent),
  .feed-card:not(.feed-card--featured):not(:has(.feed-card__title.feed-card--featured)),
  .card-block,
  .btn-back,
  .contact-chip,
  .surface-3d,
  .index-panel,
  .site-header__link:not([aria-current="page"]):not(.site-header__link--about),
  .site-header__toggle
):hover:not(:active):not(.is-pressed) {
  border-color: var(--color-accent);
  box-shadow: var(--btn-3d-shadow-raised-framed);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) :is(
    .btn-3d:not(.btn-3d--accent),
    .btn-3d-surface:not(.btn-3d-surface--accent),
    .feed-card:not(.feed-card--featured):not(:has(.feed-card__title.feed-card--featured)),
    .card-block,
    .btn-back,
    .contact-chip,
    .surface-3d,
    .index-panel,
    .site-header__link:not([aria-current="page"]):not(.site-header__link--about),
    .site-header__toggle
  ):not(:active):not(.is-pressed) {
    border-color: var(--btn-3d-border-frame);
    box-shadow: var(--btn-3d-shadow-raised-framed);
  }
  :root:not([data-theme]) :is(
    .btn-3d:not(.btn-3d--accent),
    .btn-3d-surface:not(.btn-3d-surface--accent),
    .feed-card:not(.feed-card--featured):not(:has(.feed-card__title.feed-card--featured)),
    .card-block,
    .btn-back,
    .contact-chip,
    .surface-3d,
    .index-panel,
    .site-header__link:not([aria-current="page"]):not(.site-header__link--about),
    .site-header__toggle
  ):hover:not(:active):not(.is-pressed) {
    border-color: var(--color-accent);
    box-shadow: var(--btn-3d-shadow-raised-framed);
  }
}
.surface-3d-inset {
  background: linear-gradient(180deg, var(--btn-3d-face-bottom) 0%, var(--btn-3d-face-top) 100%);
  border: 1px solid var(--btn-3d-border);
  box-shadow: var(--btn-3d-shadow-pressed);
  border-radius: var(--radius-md);
}

/* ─── HEADER ──────────────────────────────────────────────────────────────── */
/*
  Structure:
  <header class="site-header">
    <div class="site-header__inner">
      <a href="index.html" class="site-header__brand">lobee.ca</a>
      <nav class="site-header__nav">
        <a href="..." class="site-header__link" [aria-current="page"]>Home</a>
        <a href="aboutme.html" class="site-header__link site-header__link--about">About</a>
      </nav>
      <button class="site-header__toggle" data-theme-toggle aria-label="..."></button>
    </div>
  </header>
*/
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  box-shadow: var(--color-header-elev-shadow);
  z-index: 100;
}
/* Dark header: lighter raised pills so nav controls read on the bar */
[data-theme="dark"] .site-header {
  --btn-3d-face-top:     var(--btn-3d-header-face-top);
  --btn-3d-face-bottom:  var(--btn-3d-header-face-bottom);
  --btn-3d-side:         var(--btn-3d-header-side);
  --btn-3d-side-step:    var(--btn-3d-header-side-step);
  --btn-3d-ambient:      var(--btn-3d-header-ambient);
  --btn-3d-border:       var(--btn-3d-header-border);
  --btn-3d-highlight:    var(--btn-3d-header-highlight);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header {
    --btn-3d-face-top:     var(--btn-3d-header-face-top);
    --btn-3d-face-bottom:  var(--btn-3d-header-face-bottom);
    --btn-3d-side:         var(--btn-3d-header-side);
    --btn-3d-side-step:    var(--btn-3d-header-side-step);
    --btn-3d-ambient:      var(--btn-3d-header-ambient);
    --btn-3d-border:       var(--btn-3d-header-border);
    --btn-3d-highlight:    var(--btn-3d-header-highlight);
  }
}
.site-header__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
@media (min-width: 640px) { .site-header__inner { padding-inline: var(--space-6); gap: var(--space-4); } }
.site-header__brand {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-header-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  margin-right: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.site-header__brand-logo {
  /* Fill header bar (56px) minus the brand link's vertical padding (space-2 top + space-2 bottom). */
  height: calc(var(--header-h) - (var(--space-2) * 2));
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.site-header__brand:hover {
  background: transparent;
  color: var(--color-header-text);
  text-decoration: none;
}
@media (max-width: 479px) { .site-header__brand { display: none; } }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 1 auto;
  margin-left: auto;
}
/* Nav links + theme toggle — 3D surface via shared block above */
.site-header__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-header-btn-text);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header__link:hover { color: var(--color-header-btn-text); text-decoration: none; }
/* Current page + About — accent surface via shared block above */
.site-header__link[aria-current="page"],
.site-header__link--about {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.site-header__link--about:hover { color: #fff; text-decoration: none; }
.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-header-btn-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-1);
}
.site-header__toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-header__toggle:hover { color: var(--color-header-btn-text); }

/* ─── 404 PAGE ────────────────────────────────────────────────────────────── */
/*
  <body class="page-404"> … <main class="page-wrap page-404__main" id="main-content"> …
  Subtle token-based gradients only — no bitmap background.
*/
body.page-404 {
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(ellipse 115% 75% at 50% -15%, var(--color-accent-bg), transparent 58%),
    radial-gradient(ellipse 50% 38% at 105% 92%, var(--color-accent-bg), transparent 52%);
}
.page-404__main.page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100dvh - var(--header-h));
}
.page-404__main .page-eyebrow { margin-bottom: var(--space-6); }
.page-404__code {
  font-size: clamp(4.25rem, 22vw, 14rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  user-select: none;
}
.page-404__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 36ch;
  margin: 0 0 var(--space-8);
  line-height: 1.55;
}
.page-404__main .btn-back { margin-bottom: 0; }

/* ─── PAGE WRAPPER ────────────────────────────────────────────────────────── */
.page-wrap {
  max-width: var(--content-default);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}
@media (min-width: 640px) { .page-wrap { padding-inline: var(--space-6); padding-top: var(--space-10); } }
@media (min-width: 960px) { .page-wrap { padding-inline: var(--space-8); } }

/* ─── PAGE HEADER BLOCK ───────────────────────────────────────────────────── */
/*
  Shared title pattern for every content page.
  <div class="page-header-block">
    <p class="page-eyebrow">Lobee.ca</p>
    <h1 class="page-title">Emoji Page Name</h1>
  </div>
*/
.page-header-block {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.page-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* ─── FEED CARDS (list rows) ──────────────────────────────────────────────── */
/*
  Used on index / section pages for the navigational card list.
  <div class="feed-list">
    <a href="..." class="feed-card [feed-card--featured] [feed-card--muted]">
      <span class="feed-card__icon">📖</span>
      <div class="feed-card__body">
        <div class="feed-card__title">...</div>
        <div class="feed-card__desc">...</div>
      </div>
      <span class="feed-card__arrow" aria-hidden="true">→</span>
    </a>
  </div>
*/
.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.feed-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}
.feed-card__icon { font-size: 1rem; line-height: 1; flex-shrink: 0; width: 1.5rem; text-align: center; }
.feed-card__body { flex: 1; min-width: 0; }
.feed-card__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.feed-card__arrow { color: var(--color-text-faint); font-size: var(--text-sm); flex-shrink: 0; transition: transform var(--transition), color var(--transition); }
.feed-card:hover .feed-card__arrow { transform: translateX(2px); color: var(--color-accent); }
.feed-card--featured:hover .feed-card__arrow,
.feed-card:has(.feed-card__title.feed-card--featured):hover .feed-card__arrow { color: #fff; }
.feed-card--featured .feed-card__title,
.feed-card:has(.feed-card__title.feed-card--featured) .feed-card__title {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.feed-card--featured .feed-card__desc,
.feed-card:has(.feed-card__title.feed-card--featured) .feed-card__desc {
  color: rgba(255, 255, 255, 0.82);
}
.feed-card--featured .feed-card__icon,
.feed-card:has(.feed-card__title.feed-card--featured) .feed-card__icon,
.feed-card--featured .feed-card__arrow,
.feed-card:has(.feed-card__title.feed-card--featured) .feed-card__arrow {
  color: rgba(255, 255, 255, 0.9);
}
.feed-card--featured .feed-card__arrow,
.feed-card:has(.feed-card__title.feed-card--featured) .feed-card__arrow { color: #fff; }
.feed-card--muted {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ─── SECTION LABEL ───────────────────────────────────────────────────────── */
.feed-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
}

/* ─── BANNER ──────────────────────────────────────────────────────────────── */
.home-banner {
  width: 100%;
  margin: 0;
  background: transparent;
}
.home-banner img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
}

/* ─── CARD BLOCKS (rich cards) ────────────────────────────────────────────── */
/*
  Used for content-heavy grid cards.
  <a href="..." class="card-block">
    <h4>Title</h4><p>Desc</p>
    <span class="card-cta">View →</span>
  </a>
*/
.card-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: var(--space-5) var(--space-5);
  text-decoration: none;
  gap: var(--space-3);
}
.card-block h4 { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.card-block p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.card-cta { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); letter-spacing: 0.01em; margin-top: auto; }
.card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .card-grid--2, .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ─── BTN BACK ────────────────────────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-header-btn-text-muted);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.btn-back:hover { color: var(--color-header-btn-text); }

/* ─── CONTACT CHIP (About page) ──────────────────────────────────────────── */
.contact-chip {
  /* Visual styling comes from .btn-back so it matches existing buttons exactly. */
  width: 100%;
  max-width: 520px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
}
.contact-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-chip__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: var(--color-text-muted);
}
.contact-chip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
  flex: 1;
}
.contact-chip__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.contact-chip__value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-chip__hint {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.contact-chip--copied .contact-chip__hint {
  color: var(--color-accent);
}
.contact-chip--copied .contact-chip__hint::after {
  content: " ✓";
}

/* ─── BLOG POSTS ──────────────────────────────────────────────────────────── */
/*
  Every blog article uses the same shell (see tools/post-generator/template/post.html.template):
    <main class="page-wrap" id="main-content">
      <a href="blogs.html" class="btn-back">← Blogs</a>
      <article class="post">
        <header class="page-header-block">…lobee.ca · Blogs…</header>
        <div class="prose">…</div>
      </article>
    </main>
*/
.post { display: block; }

/* ─── PROSE (article pages) ───────────────────────────────────────────────── */
/*
  Wrap article body in <div class="prose"> (blog posts, about, etc.).
  All such pages load this file only — heading scale below applies everywhere.
*/
.prose { color: var(--color-text); }
.prose h2 {
  font-size: clamp(1.1875rem, 1.04rem + 0.65vmin, 1.375rem);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.prose h3 {
  /* Slightly above body clamp floor (1rem) so subheads never match paragraph size on narrow viewports */
  font-size: clamp(1.0625rem, 0.98rem + 0.45vmin, 1.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.prose p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 72ch; line-height: 1.8; font-size: clamp(1rem, 0.96rem + 0.22vmin, 1.125rem); }
.prose ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); color: var(--color-text-muted); }
.prose li { margin-bottom: var(--space-2); font-size: clamp(1rem, 0.96rem + 0.18vmin, 1.0625rem); line-height: 1.75; }
.prose img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-block: var(--space-6);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.prose img.about-hero-img {
  border: none;
  border-radius: 0;
}
.prose > h3:first-child { margin-top: 0; }
.prose img + h3 { margin-top: var(--space-4); }
.prose-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-block: var(--space-4);
}
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-accent-hover); }
.prose .italic-note { font-style: italic; font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: var(--space-2); }
/* ─── SPACE UTILITY ───────────────────────────────────────────────────────── */
.space-y > * + * { margin-top: var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }

/* ─── INDEX.HTML ONLY — prefix: index- (safe to delete as one block) ─────── */
.index-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.page-wrap--home .home-banner {
  margin-bottom: 0;
}
.page-wrap--home .home-banner img {
  width: 79%;
  max-width: 400px;
  margin-inline: auto;
}
.page-wrap--home .feed-label {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Hero: intro + banner */
.index-hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 720px) {
  .index-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-8);
  }
}
.index-hero__lead {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 28ch;
}
.index-hero__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 42ch;
}
.index-hero .btn-back.index-hero__about {
  margin-top: var(--space-4);
  margin-bottom: 0;
}
.index-banner-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.index-banner-caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: 0 var(--space-2);
}

/* Lobee says + Time row */
.index-duo {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 720px) {
  .index-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
.index-duo .index-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  height: 100%;
}
.index-duo .index-panel {
  flex: 1;
  height: 100%;
}
.index-duo .index-fun__panel {
  flex: 1;
}
.index-duo .index-fun__slot {
  flex: 1;
}
.index-duo .index-clock__display {
  justify-content: center;
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem);
  transition: none;
}

/* Shared panel (clock, etc.) — raised 3D via .surface-3d / .index-panel above */
.index-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
}
.index-panel__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
}
.index-clock {
  gap: var(--space-3);
  align-items: stretch;
}
.index-clock__line {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
.index-clock__display {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.1em;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-accent);
  cursor: default;
  user-select: none;
}
.index-clock__part {
  min-width: 1.1ch;
  text-align: center;
}
.index-clock__colon {
  color: var(--color-text-faint);
  font-weight: 600;
  animation: index-clock-blink 1s step-end infinite;
  padding-inline: 0.05em;
}
.index-clock__colon:nth-of-type(2) {
  animation-delay: 0.5s;
}
@keyframes index-clock-blink {
  50% { opacity: 0.35; }
}
.index-clock__ampm {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.index-clock__tz {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0;
  letter-spacing: 0.02em;
}
/* Pages list */
.index-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Lobee says — random line (index.html only) */
.index-fun__panel {
  gap: var(--space-3);
  align-items: stretch;
  width: 100%;
}
.index-fun__emoji {
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
  height: var(--text-xl);
  margin: 0;
}
.index-fun__slot {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--text-base);
  line-height: 1.55;
  /* fixed to ~3 lines so the panel never jumps */
  min-height: 4.65em;
}
.index-fun__text {
  width: 100%;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text);
}
.index-fun__text--pop {
  animation: index-fun-pop 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes index-fun-pop {
  0% { opacity: 0.45; }
  100% { opacity: 1; }
}
.index-fun__panel:has(.index-fun__text--pop) .index-fun__emoji {
  animation: index-fun-wiggle 320ms ease;
}
@keyframes index-fun-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
/* ─── THEME TOGGLE SCRIPT SNIPPET (shared across pages) ──────────────────── */
/*
  Paste this <script> block at the end of every page <body>:

  <script>
  (function(){
    const btn=document.querySelector('[data-theme-toggle]'),h=document.documentElement;
    let t=localStorage.getItem('lobee-theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');
    h.setAttribute('data-theme',t);
    function icon(v){btn.innerHTML=v==='dark'?'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>':'<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';}
    icon(t);
    btn&&btn.addEventListener('click',()=>{t=t==='dark'?'light':'dark';h.setAttribute('data-theme',t);try{localStorage.setItem('lobee-theme',t);}catch(e){}icon(t);});
  })();
  </script>
*/