/* ════════════════════════════════════════════════════════
   ALLISON TUMAS — v3 shared site styles
   Design language: mapping software, not developer terminal.
   Half programmer, half cartographer. Carried forward from v2 —
   same cream/warm-amber system, evolved for a digital home base
   instead of a consulting site.
   Reused across index / projects / podcast / about / community
   ════════════════════════════════════════════════════════ */

:root {
  --cream:        #FAF7F1;
  --cream-alt:    #F3EDE3;
  --cream-panel:  #F0E9DC;
  --ink:          #1C1917;
  --ink-soft:     #57534E;
  --ink-muted:    #A8A29E;
  --border:       rgba(28,25,23,0.09);
  --border-med:   rgba(28,25,23,0.15);
  --warm:         #B45309;
  --warm-light:   rgba(180,83,9,0.08);
  --sage:         #5A6B55;
  --sage-light:   rgba(90,107,85,0.09);
  --rose:         #A85C5C;
  --rose-light:   rgba(168,92,92,0.09);
  --slate:        #426080;
  --slate-light:  rgba(66,96,128,0.09);
  --sand:         #C4A882;
  --purple:       #7B6FA0;
  --purple-light: rgba(123,111,160,0.09);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* keep anchor targets (#follow, #diagrams) clear of the sticky nav */
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: clip;
  overflow-wrap: break-word;
}

img { max-width: 100%; }
iframe { max-width: 100%; }

a { color: inherit; }

/* ── ENTRANCE ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}
.fade-1 { opacity: 0; animation: fadeUp .7s ease .05s forwards; }
.fade-2 { opacity: 0; animation: fadeUp .7s ease .18s forwards; }
.fade-3 { opacity: 0; animation: fadeUp .7s ease .31s forwards; }
.fade-4 { opacity: 0; animation: fadeUp .7s ease .44s forwards; }
.fade-5 { opacity: 0; animation: fadeUp .7s ease .57s forwards; }
.fade-6 { opacity: 0; animation: fadeUp .7s ease .70s forwards; }
.fade-7 { opacity: 0; animation: fadeUp .7s ease .83s forwards; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,241,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 1.05rem 2.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400;
  color: var(--ink); text-decoration: none; letter-spacing: .01em; flex-shrink: 0;
}
.nav-links {
  display: flex; align-items: center; gap: 1.9rem;
  margin: 0 auto; list-style: none;
}
.nav-link {
  font-size: 11.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); border-color: var(--warm); }
.nav-social { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.nav-social a { color: var(--ink-muted); display: flex; transition: color .15s; }
.nav-social a:hover { color: var(--warm); }
.nav-social svg { width: 15px; height: 15px; display: block; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  /* 44x44 tap target; negative margin keeps the visual 22x16 footprint */
  width: 44px; height: 44px; margin: -14px -11px; position: relative; flex-shrink: 0;
}
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 1.4px; background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-mobile-panel {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream); border-bottom: 1px solid var(--border);
  padding: .5rem 2.25rem 1.1rem;
}
.nav-mobile-panel.open { display: flex; }
.nav-mobile-panel a {
  font-size: 13px; font-weight: 400; color: var(--ink-soft);
  text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.nav-mobile-panel a:last-of-type { border-bottom: none; }
.nav-mobile-social { display: flex; gap: 16px; padding-top: 12px; }
.nav-mobile-social a { border-bottom: none; padding: 0; color: var(--ink-muted); }
.nav-mobile-social svg { width: 16px; height: 16px; }

/* ── PAGE / CONTAINER ── */
.page {
  max-width: 760px; margin: 0 auto;
  padding: 3.5rem 2.25rem 6rem;
  display: flex; flex-direction: column; gap: 3.75rem;
}
.page--narrow { max-width: 640px; }

/* ── PAGE HEADER (non-home pages) ── */
.page-header { display: flex; flex-direction: column; gap: .85rem; }
.page-eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--warm);
}
.page-eyebrow svg { width: 12px; height: 12px; flex-shrink: 0; }
.page-heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(32px, 5.2vw, 50px); line-height: 1.12; color: var(--ink);
}
.page-heading em { font-style: italic; color: var(--ink-soft); }
.page-sub {
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; max-width: 520px;
}

/* split header: text left, small widget (e.g. Spotify) right */
.page-header--split {
  flex-direction: row; align-items: flex-end; gap: 2.5rem;
}
.page-header-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .85rem;
}
.page-header-aside {
  flex: 0 0 270px;
  display: flex; flex-direction: column; gap: .5rem;
}
@media (max-width: 700px) {
  .page-header--split { flex-direction: column; align-items: stretch; }
  .page-header-aside { flex-basis: auto; }
}

/* ── COORDINATE / COMPASS ACCENTS ── */
.coord-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 400; letter-spacing: .03em;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.coord-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── HERO (home only) ── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; padding: 1.5rem 0 .5rem; }
.hero-portrait-wrap { position: relative; flex-shrink: 0; }
.hero-portrait {
  width: 152px; height: 152px; object-fit: cover; border-radius: 50%;
  display: block; border: 2px solid var(--border); filter: grayscale(10%);
}
.hero-compass-ring { position: absolute; inset: -14px; pointer-events: none; }
.hero-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.hero-name {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(48px, 9vw, 80px); line-height: 1.02; letter-spacing: -.01em; color: var(--ink);
}
.hero-tagline {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2.6vw, 25px); color: var(--ink-soft); line-height: 1.4; max-width: 480px;
}
.hero-statement {
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.85; max-width: 460px;
}
.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: .35rem; }
.hero-social { display: flex; align-items: center; gap: 16px; margin-top: .15rem; }
.hero-social a { color: var(--ink-muted); display: flex; transition: color .15s; }
.hero-social a:hover { color: var(--warm); }
.hero-social svg { width: 14px; height: 14px; display: block; }

/* ── ROUTE / MAP DIAGRAM ── */
.route { position: relative; margin: 0; }
.route-track {
  position: absolute; top: 5px; left: 6%; right: 6%; height: 0;
  border-top: 1.5px dashed var(--border-med); z-index: 0;
}
.route-row { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.route-stop { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; min-width: 58px; }
.route-pin {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--warm); border: 2px solid var(--cream); box-shadow: 0 0 0 1px var(--border-med);
}
.route-pin.unmapped {
  background: var(--cream); border: 1.5px dashed var(--border-med); box-shadow: none;
}
.route-stop.unmapped .route-value { color: var(--ink-muted); font-style: italic; }
.route-label {
  font-size: 8.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.route-value {
  font-family: 'Cormorant Garamond', serif; font-size: 14px;
  font-weight: 400; color: var(--ink); text-align: center; line-height: 1.3;
}
.route--lg .route-pin { width: 13px; height: 13px; }
.route--lg .route-track { top: 6.5px; }
.route--lg .route-value { font-size: 16px; }
.route-row--wrap { flex-wrap: wrap; gap: 1.75rem 1rem; }
.route-row--wrap .route-stop { flex: 0 1 18%; min-width: 80px; }
.map-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 8px 14px; background: var(--cream-alt); border-radius: 8px;
  font-size: 9.5px; color: var(--ink-muted); margin-top: 1.25rem;
}
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── BLOCK (section wrapper) ── */
.block { display: flex; flex-direction: column; gap: 1.5rem; }
.block-head { display: flex; align-items: center; gap: 10px; }
.block-pin { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); flex-shrink: 0; }
.block-label {
  font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.block-rule { flex: 1; height: 1px; background: var(--border); }
.block-badge { flex-shrink: 0; }

.section-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3.5vw, 30px); font-weight: 300;
  line-height: 1.25; color: var(--ink); margin-bottom: .35rem;
}
.section-headline em { font-style: italic; color: var(--ink-soft); }
.section-sub {
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--warm); margin-bottom: 1.5rem; display: block;
}
.section-note {
  font-family: 'Caveat', cursive; font-size: 14px; color: var(--ink-muted); display: block;
}

/* ── SERVICE-STYLE CARDS (reused for community categories) ── */
.service-processes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden;
}
.srv { background: var(--cream-alt); padding: 1.4rem 1.35rem; display: flex; flex-direction: column; }
.srv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: .75rem; }
.srv-num {
  font-family: 'Cormorant Garamond', serif; font-size: 28px;
  font-weight: 300; color: rgba(28,25,23,0.1); line-height: 1;
}
.srv-title { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-bottom: 6px; }
.srv-desc  { font-size: 11.5px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 10px; flex: 1; }
.srv-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--border-med); border-radius: 100px;
  padding: 6px 14px; text-decoration: none; background: rgba(255,255,255,0.5);
  transition: background .15s, color .15s;
}
.srv-link:hover { background: white; color: var(--ink); }

.who-panel {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.85;
  padding: 1.1rem 1.35rem; background: var(--cream-alt);
  border-radius: 10px; border-left: 2px solid var(--sand);
}
.who-panel strong { font-weight: 500; color: var(--ink); display: block; margin-bottom: 2px; }

.faq-note {
  font-size: 12.5px; color: var(--ink-muted); font-style: italic;
  padding: .9rem 1.1rem; border: 1px dashed var(--border-med); border-radius: 10px;
}

/* ── CTA ── */
.cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cta-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; background: var(--ink); color: var(--cream);
  font-size: 11.5px; font-weight: 500; letter-spacing: .05em;
  text-decoration: none; border-radius: 100px; transition: opacity .2s;
}
.cta-primary:hover { opacity: .78; }
.cta-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border: 1px solid var(--border-med); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 400; text-decoration: none;
  border-radius: 100px; background: rgba(255,255,255,0.5); transition: background .15s;
}
.cta-ghost:hover { background: white; }

/* ── LOG ENTRIES ── */
.log-entries { display: flex; flex-direction: column; }
.log-entry {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.log-entry:first-child { border-top: 1px solid var(--border); }
.log-entry:hover { opacity: .65; }
.log-entry-num {
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  font-weight: 300; color: rgba(28,25,23,0.1); line-height: 1;
  min-width: 26px; padding-top: 2px; flex-shrink: 0;
}
.log-entry-body { flex: 1; }
.log-entry-name { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 3px; line-height: 1.35; }
.log-entry-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.65; }
.log-entry-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; padding-top: 2px; }

.client-cta {
  padding: 1.2rem 1.4rem; background: var(--cream-alt); border-radius: 12px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.client-cta-text { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.client-cta-text strong { font-weight: 500; color: var(--ink); display: block; margin-bottom: 2px; }

/* ── BADGES (status) ── */
.badge {
  font-size: 9px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px;
  border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.badge-ok      { background: var(--sage-light);   color: var(--sage); }   /* Live */
.badge-run     { background: var(--warm-light);   color: var(--warm); }   /* Building */
.badge-pend    { background: var(--purple-light); color: var(--purple); } /* Exploring */
.badge-client  { background: var(--slate-light);  color: var(--slate); }
.badge-book    { background: rgba(196,168,130,.18); color: #8B6914; }
.badge-podcast { background: var(--purple-light); color: var(--purple); }
.badge-archived{ background: rgba(168,162,158,.16); color: var(--ink-muted); }

/* ── FEATURED PROJECTS / LAB CARDS ── */
.fp-intro-overview { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; max-width: 580px; }
.featured-projects {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border-radius: 12px; overflow: hidden;
}
.fp-card { background: var(--cream-alt); overflow: hidden; }
.fp-card.fp-card--focus { box-shadow: inset 0 0 0 1.5px var(--warm); }
.fp-card-bar {
  background: var(--cream-panel); border-bottom: 1px solid var(--border);
  padding: .55rem 1.2rem; display: flex; align-items: center; gap: 8px;
}
.fp-card-bar svg { width: 11px; height: 11px; color: var(--ink-muted); flex-shrink: 0; }
.fp-pin { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fp-pin-live  { background: var(--sage); }
.fp-pin-build { background: var(--warm); }
.fp-pin-explore { background: var(--purple); }
.fp-pin-archived { background: var(--ink-muted); }
.fp-card-title-bar {
  font-size: 9.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); flex: 1;
}
.fp-header { padding: 1.35rem 1.5rem 1.25rem; }
.fp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: .45rem; }
.fp-name-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 2.6vw, 21px); font-weight: 400;
  color: var(--ink); text-decoration: none; line-height: 1.2;
  border-bottom: 1px solid var(--border-med); transition: border-color .15s, color .15s;
}
.fp-name-link:hover { color: var(--warm); border-color: var(--warm); }
.fp-name-plain {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 2.6vw, 21px); font-weight: 400; color: var(--ink); line-height: 1.2;
}
.fp-subtitle {
  font-size: 9.5px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .5rem;
}
.fp-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.75; margin-bottom: .9rem; }
.fp-delivered-label {
  font-size: 9px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .4rem;
}
.fp-deliverables { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .9rem; }
.fp-deliverable {
  font-size: 10.5px; padding: 2px 10px; border-radius: 100px;
  border: 1px solid var(--border); background: white; color: var(--ink-soft);
}
.fp-result {
  font-size: 11px; font-weight: 500; color: var(--sage);
  background: var(--sage-light); padding: 4px 11px;
  border-radius: 100px; display: inline-block; margin-bottom: 1rem;
}
.fp-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--border-med); border-radius: 100px;
  padding: 6px 14px; background: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.fp-toggle-btn:hover { background: white; color: var(--ink); }
.fp-toggle-btn .toggle-arrow { transition: transform .25s; font-size: 10px; }
.fp-toggle-btn.open .toggle-arrow { transform: rotate(90deg); }

.fp-case-study {
  max-height: 0; overflow: hidden; transition: max-height .45s ease;
  background: white; border-top: 0px solid var(--border);
}
.fp-case-study.open { max-height: 4000px; border-top-width: 1px; }
.fp-case-inner { padding: 1.75rem 1.5rem; }
.cs-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 400; color: var(--ink); margin-bottom: 1.1rem; line-height: 1.3;
}
.cs-section-label {
  font-size: 9px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: .35rem; margin-top: 1.35rem;
}
.cs-section-label:first-child { margin-top: 0; }
.cs-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.85; margin-bottom: .55rem; }
.cs-list { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-bottom: .65rem; }
.cs-list li { font-size: 12px; color: var(--ink-soft); padding-left: 14px; position: relative; line-height: 1.6; }
.cs-list li::before { content: '·'; position: absolute; left: 4px; color: var(--ink-muted); }
.cs-process-steps { display: flex; flex-direction: column; gap: 11px; margin-bottom: .65rem; }
.cs-step { display: flex; gap: 12px; align-items: flex-start; }
.cs-step-num {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-weight: 300; color: rgba(28,25,23,0.12); line-height: 1;
  min-width: 20px; padding-top: 1px; flex-shrink: 0;
}
.cs-step-title { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 3px; line-height: 1.35; }
.cs-step-items { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cs-step-items li { font-size: 11.5px; color: var(--ink-soft); padding-left: 13px; position: relative; line-height: 1.55; }
.cs-step-items li::before { content: '·'; position: absolute; left: 4px; color: var(--ink-muted); }
.cs-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-radius: 10px; overflow: hidden; margin-bottom: .65rem;
}
.cs-col { background: var(--cream-alt); padding: .9rem 1.1rem; }
.cs-col-label { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.cs-col-label.before { color: var(--rose); }
.cs-col-label.after  { color: var(--sage); }
.cs-col-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.cs-col-list li { font-size: 11.5px; color: var(--ink-soft); padding-left: 13px; position: relative; line-height: 1.55; }
.cs-col-list li::before { content: '→'; position: absolute; left: 0; font-size: 9px; top: 1px; color: var(--ink-muted); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .65rem; }
.cs-tag { font-size: 10.5px; padding: 2px 10px; border-radius: 100px; border: 1px solid var(--border); background: white; color: var(--ink-soft); }
.cs-ai-note {
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.7;
  padding: .7rem .9rem; background: var(--cream-alt);
  border-radius: 8px; border-left: 2px solid var(--sand);
  font-style: italic; margin-bottom: .65rem;
}
.cs-insights { display: flex; flex-direction: column; gap: 5px; margin-bottom: .65rem; }
.cs-insight { font-size: 12px; color: var(--ink-soft); padding-left: 16px; position: relative; line-height: 1.65; }
.cs-insight::before { content: '→'; position: absolute; left: 0; font-size: 9px; top: 3px; color: var(--warm); }
.cs-divider { height: 1px; background: var(--border); margin: 1.1rem 0; }

/* ── UNMAPPED / OPEN-SLOT CARD (Future Experiments) ── */
.unmapped-card {
  padding: 1.4rem 1.5rem; border: 1.5px dashed var(--border-med); border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.unmapped-card-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 18px; color: var(--ink-soft);
}
.unmapped-card-desc { font-size: 12.5px; color: var(--ink-muted); line-height: 1.7; }

/* ── SYS-INFO / FIELD NOTES ── */
.sys-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; }
.sys-field { padding: 13px 16px; background: var(--cream-alt); }
.sys-key { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
.sys-val { font-size: 13px; font-weight: 400; color: var(--ink); }

/* ── SPOTIFY ── */
.spotify-widget { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.spotify-widget iframe { display: block; }

/* ── PODCAST ── */
.podcast-feature {
  background: var(--cream-alt); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.podcast-feature-bar {
  background: var(--cream-panel); border-bottom: 1px solid var(--border);
  padding: .55rem 1.2rem; display: flex; align-items: center; gap: 8px;
}
.podcast-feature-bar svg { width: 12px; height: 12px; color: var(--warm); flex-shrink: 0; }
.podcast-feature-label {
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.podcast-feature-body { padding: 1.6rem 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.podcast-show-name {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 400; color: var(--ink); line-height: 1.2;
}
.podcast-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; max-width: 480px; }
.podcast-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .3rem; }
.podcast-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; padding: 7px 15px; border-radius: 100px;
  text-decoration: none; border: 1px solid var(--border-med); color: var(--ink-soft);
  background: rgba(255,255,255,0.55); transition: background .15s, color .15s;
}
.podcast-link:hover { background: white; color: var(--ink); }
.podcast-link.is-soon {
  color: var(--ink-muted); font-style: italic; border-style: dashed; cursor: default;
}
.podcast-link.is-soon:hover { background: rgba(255,255,255,0.55); color: var(--ink-muted); }

/* ── FOLLOW / SOCIAL GRID ── */
.follow-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.follow-pill {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  flex: 0 1 168px; min-width: 130px;
  padding: 1.1rem .75rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--cream-alt); text-decoration: none; color: var(--ink);
  transition: background .15s, border-color .15s, transform .15s;
}
.follow-pill:hover { background: white; border-color: var(--border-med); transform: translateY(-1px); }
.follow-pill svg { width: 19px; height: 19px; color: var(--ink-soft); }
.follow-pill:hover svg { color: var(--warm); }
.follow-pill-label { font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.follow-pill-handle { font-size: 9.5px; color: var(--ink-muted); }

/* ── COMMUNITY CARDS ── */
.community-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-radius: 12px; overflow: hidden;
}
.community-card {
  background: var(--cream-alt); padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.community-card-icon { color: var(--warm); }
.community-card-icon svg { width: 18px; height: 18px; }
.community-card-title { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.community-card-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; flex: 1; }
.community-card-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--border-med); border-radius: 100px;
  padding: 7px 15px; text-decoration: none; background: rgba(255,255,255,0.5);
  transition: background .15s, color .15s;
}
.community-card-link:hover { background: white; color: var(--ink); }

/* ── HIGHLIGHT CARDS (home: two main projects) ── */
.highlight-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-radius: 12px; overflow: hidden;
}
.highlight-card {
  background: var(--cream-alt); padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
  transition: background .15s;
}
.highlight-card:hover { background: #fff; }
.highlight-card-icon { color: var(--warm); }
.highlight-card-icon svg { width: 22px; height: 22px; }
.highlight-card-eyebrow {
  font-size: 9px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: .15rem;
}
.highlight-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 3vw, 25px); font-weight: 400; color: var(--ink); line-height: 1.15;
}
.highlight-card-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; flex: 1; }
.highlight-card-cta {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: .4rem; padding: 9px 18px; background: var(--ink); color: var(--cream);
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; border-radius: 100px; transition: opacity .2s;
}
.highlight-card-cta:hover { opacity: .78; }
.highlight-card-cta svg { width: 13px; height: 13px; }

/* ── DIAGRAM RESOURCES (home #diagrams + portfolio strip) ── */
.diagram-cta {
  padding: 1.75rem 1.6rem; border-radius: 14px;
  background: var(--cream-alt); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .35rem;
}
.diagram-cta-map {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: .6rem;
}
.diagram-node {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--border);
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
}
.diagram-arrow { color: var(--warm); font-size: 12px; }
.resource-list { display: flex; flex-direction: column; gap: 10px; margin-top: .25rem; }
.resource-row {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.2rem; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  transition: border-color .15s;
}
.resource-row:hover { border-color: var(--border-med); }
.resource-icon { color: var(--warm); flex-shrink: 0; }
.resource-icon svg { width: 20px; height: 20px; }
.resource-body { flex: 1; min-width: 0; }
.resource-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18.5px; font-weight: 400; color: var(--ink); line-height: 1.2;
}
.resource-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.65; margin-top: 3px; }
.resource-download {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 18px; background: var(--ink); color: var(--cream);
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; border-radius: 100px; transition: opacity .2s;
}
.resource-download:hover { opacity: .78; }
.resource-download svg { width: 13px; height: 13px; }

/* ── PORTFOLIO PROJECT ACCORDION ── */
.proj-head {
  padding: 1.35rem 1.5rem 1.25rem; cursor: pointer;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.proj-head:hover { background: rgba(255,255,255,0.45); }
.proj-head:focus-visible { outline: 2px solid var(--warm); outline-offset: -2px; }
.proj-head-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: .45rem;
}
.proj-head-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.fp-ext {
  display: flex; color: var(--ink-muted); border: 1px solid var(--border-med);
  border-radius: 50%; width: 28px; height: 28px; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.5); transition: background .15s, color .15s, border-color .15s;
}
.fp-ext:hover { color: var(--warm); border-color: var(--warm); background: #fff; }
.fp-ext svg { width: 13px; height: 13px; }
.proj-chevron { display: flex; color: var(--ink-muted); transition: transform .25s, color .15s; }
.proj-chevron svg { width: 16px; height: 16px; }
.proj-head.open .proj-chevron { transform: rotate(90deg); color: var(--warm); }
.proj-head:hover .proj-chevron { color: var(--ink-soft); }
.proj-soon-badge {
  font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple); background: var(--purple-light);
  padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}

/* ── CONTACT EMAIL CARD ── */
.contact-email-card {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem 1.5rem; border-radius: 14px;
  background: var(--cream-alt); border: 1px solid var(--border);
}
.contact-email-icon {
  color: var(--warm); display: flex; flex-shrink: 0;
}
.contact-email-icon svg { width: 26px; height: 26px; }
.contact-email-body { flex: 1; min-width: 180px; }
.contact-email-label {
  font-size: 9px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px;
}
.contact-email-link {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(19px, 3vw, 24px);
  font-weight: 400; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--border-med); transition: color .15s, border-color .15s;
}
.contact-email-link:hover { color: var(--warm); border-color: var(--warm); }
.contact-email-cta { flex-shrink: 0; }

/* ── BOOK A TIME (Calendly) ── */
.book-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.book-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.5rem 1.5rem; background: var(--cream-alt);
  text-decoration: none; transition: background .15s;
}
.book-card:hover { background: var(--cream-panel); }
.book-card-icon { color: var(--warm); display: flex; flex-shrink: 0; }
.book-card-icon svg { width: 24px; height: 24px; }
.book-card-body { flex: 1; }
.book-card-title {
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  font-weight: 500; color: var(--ink); line-height: 1.2; margin-bottom: .4rem;
}
.book-card-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.book-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warm);
}
.book-card-cta svg { width: 14px; height: 14px; transition: transform .15s; }
.book-card:hover .book-card-cta svg { transform: translate(2px, -2px); }

/* ── FOOTER ── */
.site-footer {
  max-width: 760px; margin: 0 auto; padding: 2rem 2.25rem 3rem;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border);
}
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-soft); }
.footer-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11.5px; color: var(--ink-muted); }
.footer-meta a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social a { color: var(--ink-muted); display: flex; transition: color .15s; }
.footer-social a:hover { color: var(--warm); }
.footer-social svg { width: 14px; height: 14px; display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav { padding: .9rem 1.25rem; position: relative; }
  .nav-mobile-panel { padding: .5rem 1.25rem 1.1rem; }
}
@media (max-width: 620px) {
  .page { padding: 2.25rem 1.25rem 4.5rem; gap: 2.75rem; }
  .site-footer { padding: 1.75rem 1.25rem 2.5rem; }
  .hero-portrait { width: 116px; height: 116px; }
  .hero-name { font-size: clamp(40px, 12vw, 58px); }
  .service-processes { grid-template-columns: 1fr; }
  .sys-info { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: flex-start; }
  .client-cta { flex-direction: column; align-items: flex-start; }
  .cs-two-col { grid-template-columns: 1fr; }
  .fp-case-inner { padding: 1.25rem 1.1rem; }
  .fp-header { padding: 1.1rem 1.1rem; }
  .route-value { font-size: 12.5px; }
  .route-label { font-size: 7.5px; }
  .follow-pill { flex: 0 1 calc(50% - 5px); min-width: 0; }
  .community-grid { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; }
  .proj-head { padding: 1.1rem 1.1rem; }
  .diagram-cta { padding: 1.4rem 1.15rem; }
  .resource-row { flex-wrap: wrap; gap: .75rem 1rem; }
  .resource-body { flex-basis: calc(100% - 20px - 1rem); }
  .resource-download { width: 100%; justify-content: center; }
  .contact-email-cta { width: 100%; justify-content: center; }
  .contact-email-card { padding: 1.2rem 1.2rem; }
  .book-grid { grid-template-columns: 1fr; }
  .book-card { padding: 1.35rem 1.2rem; }
  .highlight-card { padding: 1.35rem 1.2rem; }
  .srv { padding: 1.2rem 1.1rem; }
  .podcast-feature-body { padding: 1.3rem 1.2rem 1.25rem; }
}

/* small phones */
@media (max-width: 440px) {
  .nav { gap: 1rem; }
  .nav-social { display: none; } /* still available in the mobile menu panel */
  .page { padding: 2rem 1rem 4rem; }
  .site-footer { padding: 1.5rem 1rem 2.25rem; }
  .nav-mobile-panel { padding: .5rem 1rem 1.1rem; }
  .hero-cta-row { width: 100%; }
  .hero-cta-row .cta-primary, .hero-cta-row .cta-ghost { flex: 1 1 auto; justify-content: center; }
  .follow-pill { flex-basis: 100%; flex-direction: row; justify-content: flex-start; gap: 12px; padding: .9rem 1.1rem; }
  .follow-pill-handle { margin-left: auto; }
  .diagram-cta { padding: 1.2rem 1rem; }
  .resource-row { padding: .9rem 1rem; }
  .fp-case-inner { padding: 1.1rem .9rem; }
}