:root {
  /* === COLORS === */
  --color-accent:           #C47C5A;
  --color-accent-light:     #E8B89A;
  --color-accent-lighter:   #F5DDD0;
  --color-accent-dark:      #8F5038;

  --color-bg:               #FDFAF6;
  --color-surface:          #F5EFE6;
  --color-surface-2:        #EDE3D6;
  --color-surface-3:        #E2D4C3;

  --color-text-primary:     #2C1F14;
  --color-text-secondary:   #7A6254;
  --color-text-tertiary:    #B09880;
  --color-text-inverse:     #FDFAF6;

  --color-border:           #EDE3D6;
  --color-border-strong:    #CFC0AD;
  --color-link:             #C47C5A;
  --color-link-hover:       #8F5038;

  /* Gold — side project accent */
  --color-gold:             #D4A017;
  --color-gold-lighter:     #FDF3D9;
  --color-gold-dark:        #9C7410;

  /* Green — shipped status */
  --color-green:            #3F8F5F;
  --color-green-lighter:    #E6F4EC;
  --color-green-dark:       #1E6E3A;

  /* Blue — vision/info accent */
  --color-blue:             #5A86A8;
  --color-blue-lighter:     #EAF0F6;
  --color-blue-dark:        #2E5F82;

  /* === TYPOGRAPHY === */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   20px;
  --text-lg:   28px;
  --text-xl:   40px;
  --text-2xl:  56px;
  --text-3xl:  72px;
  --text-4xl:  96px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* === SPACING === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* === BORDER RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 100px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 4px rgba(44, 31, 20, 0.06);
  --shadow-md: 0 2px 12px rgba(44, 31, 20, 0.08);
  --shadow-lg: 0 8px 32px rgba(44, 31, 20, 0.12);
  --shadow-xl: 0 16px 56px rgba(44, 31, 20, 0.16);

  /* === MOTION === */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:  200ms;
  --duration-base:  350ms;
  --duration-slow:  600ms;
}

/* ── Shared site menu bar (matches the home/work desktop header) ── */
.menubar {
  position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 200;
  display: flex; align-items: center; padding: 0 24px;
  background: rgba(253, 250, 246, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body); font-size: 13px;
}
.menubar-inner { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 22px; }
.menubar-logo { font-weight: var(--weight-semibold); color: var(--color-text-primary); text-decoration: none; letter-spacing: -0.01em; }
.menubar-logo::before { content: "\25C6"; color: var(--color-accent); margin-right: 8px; font-size: 11px; }
.menubar a { color: var(--color-text-secondary); text-decoration: none; cursor: none; transition: color var(--duration-fast) var(--ease-out); }
.menubar a:hover, .menubar a.active { color: var(--color-accent); }
.menubar-cta {
  margin-left: auto; background: var(--color-accent); color: var(--color-text-inverse) !important;
  padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out);
}
.menubar-cta:hover { background: var(--color-accent-dark); color: var(--color-text-inverse) !important; }
@media (max-width: 620px) { .menubar { gap: 14px; font-size: 12px; } .menubar-hide-sm { display: none; } }

/* ── Project pills ────────────────────────────────────────────────
   Three tiers, so a color always means the same thing wherever a
   project is listed (home desktop, work-v2, anywhere later):

     1. Status  - filled, semantic color. Exactly one per project and
                  always first: where the work stands today.
     2. Honor   - accent outline. Optional, at most one, sits second:
                  outside recognition (published, featured, awarded).
                  Outlined rather than filled so it reads as a
                  different kind of fact, not a competing status.
     3. Tag     - neutral fill, no color. Disciplines and topics, as
                  many as the card can carry.

   Only tier 1 and 2 are ever colored. If a new pill isn't a status or
   an outside honor, it's a tag.
   ───────────────────────────────────────────────────────────────── */
.pills, .ch-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
/* 1 - status */
.pill-shipped   { background: var(--color-green-lighter); color: var(--color-green-dark); }
.pill-progress  { background: var(--color-blue-lighter);  color: var(--color-blue-dark); }
.pill-side      { background: var(--color-gold-lighter);  color: var(--color-gold-dark); }
/* 2 - honor (inset ring keeps the box identical to a filled pill) */
.pill-published { background: transparent; color: var(--color-accent-dark);
                  box-shadow: inset 0 0 0 1px var(--color-accent-light); }
/* 3 - tag */
.pill-tag       { background: var(--color-surface-2);     color: var(--color-text-secondary); }

/* ── "Say hello" waves back ────────────────────────────────────────
   Every page hides the native pointer and draws its own: a #cursor dot
   with a trailing #cursor-ring. Hovering the Say hello CTA turns that
   dot into a waving hand, so the button answers before it's clicked.
   Pure CSS via :has() - the same selector the anchor offsets below
   rely on - so it also works on pages that don't load desktop.js.
   ───────────────────────────────────────────────────────────────── */
body:has(.menubar-cta:hover, .nav-cta:hover) #cursor {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  mix-blend-mode: normal;
  font-size: 24px;
  line-height: 1;
}
body:has(.menubar-cta:hover, .nav-cta:hover) #cursor::after {
  content: "\1F44B";
  display: block;
  transform-origin: 70% 85%;
  animation: cursor-wave 620ms ease-in-out infinite;
}
body:has(.menubar-cta:hover, .nav-cta:hover) #cursor-ring { opacity: 0; }
@keyframes cursor-wave {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.menubar-cta:hover, .nav-cta:hover) #cursor::after { animation: none; }
}

/* ── Anchor landing offsets ────────────────────────────────────────
   Deep links (index folders → personal.html#cooking, sub-nav jumps)
   used to land with the section's heading tucked under the fixed menu
   bar, so you arrived mid-content with no title in sight. Reserve the
   chrome's height above every anchor target. Lives here rather than in
   desktop.css so it applies on every page, shell or not.
   ────────────────────────────────────────────────────────────────── */
section[id],
[id].section {
  scroll-margin-top: 68px;
}
/* Pages carrying a fixed sub-nav under the menu bar need more room. */
body:has(#page-nav) section[id],
body:has(#page-nav) [id].section {
  scroll-margin-top: 116px;
}