/* =============================================
   NIHAAN MOHAMMED — PORTFOLIO V3
   Shared stylesheet across all five pages.
   ============================================= */

:root {
  --cream:        #FDFCFA;
  --surface:      #F2EDE7;
  --surface-2:    #EDE6DD;
  --maroon:       #8B1A1A;
  --amber:        #D4842A;
  --amber-dim:    rgba(212, 132, 42, 0.15);
  --text:         #2C2C2C;
  --text-muted:   #6B6560;
  --border:       #E4DDD6;

  --font-serif:   'Fraunces', Georgia, serif;
  --font-sans:    'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --max-w:        1180px;
  --pad:          clamp(1.25rem, 4vw, 2.75rem);

  --transition:   200ms ease;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--amber); text-decoration: none; transition: color var(--transition); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
button { font: inherit; }

/* =============================================
   BLUEPRINT MODE — instant swap, no transition
   ============================================= */
body.blueprint {
  --cream:       #14100c;
  --surface:     #1e1812;
  --surface-2:   #231d16;
  --maroon:      #D4842A;
  --amber:       #D4842A;
  --amber-dim:   rgba(212, 132, 42, 0.12);
  --text:        #F2EDE7;
  --text-muted:  #B0A89E;
  --border:      rgba(212, 132, 42, 0.25);

  background-color: #14100c;
  background-image:
    linear-gradient(rgba(212, 132, 42, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 132, 42, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(212, 132, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 132, 42, 0.04) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  color: #F2EDE7;
}

/* Blueprint mode: color-scheme swap has NO transition (instant, per spec) */
body.blueprint, body.blueprint * { transition-property: none !important; }
body.blueprint .ann, body.blueprint .ann * { transition: none !important; }

.topbar { background: rgba(253, 252, 250, 0.93); }
body.blueprint .topbar { background: rgba(20, 16, 12, 0.94); border-bottom-color: rgba(212, 132, 42, 0.25); }
body.blueprint .card { background: rgba(30, 24, 18, 0.85); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .card:hover { border-color: rgba(212, 132, 42, 0.55); }
body.blueprint .section-label { border-bottom-color: rgba(212, 132, 42, 0.22); }
body.blueprint .chip { background: rgba(212, 132, 42, 0.1); border-color: rgba(212, 132, 42, 0.28); color: #B0A89E; }
body.blueprint #bp-toggle { background: rgba(212, 132, 42, 0.15); border-color: rgba(212, 132, 42, 0.4); color: #D4842A; }
body.blueprint #bp-toggle[aria-checked="true"] { background: #D4842A; color: #14100c; border-color: #D4842A; }
body.blueprint footer { border-top-color: rgba(212, 132, 42, 0.18); }
body.blueprint .nav-link { color: #B0A89E; }
body.blueprint .nav-link:hover, body.blueprint .nav-link.active { color: #D4842A; }
body.blueprint .mark-block { border-color: rgba(212, 132, 42, 0.22); background: rgba(30,24,18,0.6); }
body.blueprint .deep-dive { background: rgba(30, 24, 18, 0.6); border-color: rgba(212, 132, 42, 0.2); }
body.blueprint .product-block { border-color: rgba(212, 132, 42, 0.18); }
body.blueprint .stat-band { background: rgba(35, 29, 22, 0.7); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .exp-entry { border-left-color: rgba(212, 132, 42, 0.3); }
body.blueprint .exp-entry::before { border-color: #14100c; }
body.blueprint .build-item { border-color: rgba(212, 132, 42, 0.18); }
body.blueprint .contact-btn { border-color: #D4842A; color: #D4842A; }
body.blueprint .contact-btn:hover { background: #D4842A; color: #14100c; }
body.blueprint .contact-reveal { background: rgba(30, 24, 18, 0.9); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .resume-row { border-color: rgba(212, 132, 42, 0.2); }
body.blueprint .case-card { background: rgba(30, 24, 18, 0.85); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .case-card:hover, body.blueprint .case-card.is-focused { border-color: rgba(212, 132, 42, 0.55); }
body.blueprint .case-detail { background: rgba(30, 24, 18, 0.6); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .thinking-list li::before { color: var(--amber); }
body.blueprint .img-frame { border-color: rgba(212, 132, 42, 0.4); background: rgba(30, 24, 18, 0.4); }
body.blueprint .persona-card { background: rgba(30, 24, 18, 0.85); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .persona-card:hover { border-color: rgba(212, 132, 42, 0.55); }
body.blueprint .key-strip { background: rgba(20, 16, 12, 0.94); border-top-color: rgba(212, 132, 42, 0.22); }
body.blueprint .kbd { background: rgba(212, 132, 42, 0.12); border-color: rgba(212, 132, 42, 0.4); color: var(--amber); }
body.blueprint .overlay-panel { background: #1e1812; border-color: rgba(212, 132, 42, 0.3); }
body.blueprint .ring-block { border-color: rgba(212, 132, 42, 0.22); background: rgba(30,24,18,0.6); }
body.blueprint .waypoint .dot { background: #14100c; }
body.blueprint .stat-tile { border-color: rgba(212, 132, 42, 0.22); background: rgba(30, 24, 18, 0.6); }
body.blueprint .world-card { background: rgba(30, 24, 18, 0.85); border-color: rgba(212, 132, 42, 0.22); }
body.blueprint .world-card:hover { border-color: rgba(212, 132, 42, 0.55); }
body.blueprint .chapter-frame { border-color: rgba(212, 132, 42, 0.22); }

/* Blueprint-only annotation notes: hidden by default, revealed in dark mode */
.ann { display: none; }
body.blueprint .ann {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--amber);
  background: rgba(212, 132, 42, 0.08);
  border: 1px dashed rgba(212, 132, 42, 0.5);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  margin-top: 1rem;
  max-width: 62ch;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(4px);
  animation: annFade 150ms ease-out forwards;
}
.ann::before {
  content: 'BLUEPRINT NOTE · ';
  letter-spacing: 0.1em;
  opacity: 0.7;
}
@keyframes annFade { to { opacity: 1; transform: translateY(0); } }
body.blueprint .ann:nth-of-type(1) { animation-delay: 0ms; }
body.blueprint .ann:nth-of-type(2) { animation-delay: 20ms; }
body.blueprint .ann:nth-of-type(3) { animation-delay: 40ms; }
body.blueprint .ann:nth-of-type(4) { animation-delay: 60ms; }
body.blueprint .ann:nth-of-type(5) { animation-delay: 80ms; }
body.blueprint .ann:nth-of-type(6) { animation-delay: 100ms; }

@media (prefers-reduced-motion: reduce) {
  body.blueprint .ann { animation: none; opacity: 1; transform: none; }
}

/* =============================================
   LAYOUT
   ============================================= */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
main { flex: 1; }

/* =============================================
   TOPBAR
   ============================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.wordmark svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--maroon); }
body.blueprint .wordmark svg { color: var(--text); }
.wordmark .dot { color: var(--amber); }

.topbar-nav { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); margin-left: auto; }
.nav-link {
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.02em;
  white-space: nowrap; display: flex; align-items: center; gap: 0.35rem;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-key {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--amber); border: 1px solid transparent;
  border-radius: 3px; padding: 0.05rem 0.32rem; letter-spacing: 0.02em;
  opacity: 0; transform: translateY(-2px); transition: opacity 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.nav-link:hover .nav-key, .nav-link:focus-visible .nav-key, .nav-link.active .nav-key {
  opacity: 0.75; transform: none; border-color: var(--border);
}
@media (hover: none) { .nav-key { opacity: 0.4; transform: none; } }
/* phones: keyboard chrome is meaningless on touch — labels are the nav */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; padding-top: 0.55rem; padding-bottom: 0.55rem; row-gap: 0.4rem; }
  .wordmark { font-size: 0.98rem; }
  .topbar-nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav .nav-key { display: none; }
  .nav-link { font-size: 0.78rem; }
}

#bp-toggle {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.28rem 0.6rem; cursor: pointer; white-space: nowrap;
}
#bp-toggle:focus-visible { box-shadow: 0 0 0 2px var(--amber); }
#bp-toggle[aria-checked="true"] { background: var(--amber); color: #fff; border-color: var(--amber); }
#bp-toggle::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-left: 0.4rem; opacity: 0.5; vertical-align: middle;
}
#bp-toggle[aria-checked="true"]::after { opacity: 1; }

/* =============================================
   REVEAL (IntersectionObserver baseline)
   ============================================= */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.1s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-label {
  font-family: var(--font-mono); font-size: 0.63rem; color: var(--text-muted); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 1.25rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border);
}

/* =============================================
   KEY GLYPH / KBD BADGE
   ============================================= */
.kbd {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--maroon); background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.08rem 0.4rem; letter-spacing: 0.02em;
  display: inline-block; line-height: 1.5;
}

/* =============================================
   CONTEXT FOOTER KEY STRIP
   ============================================= */
.key-strip {
  position: sticky; bottom: 0; z-index: 90; background: rgba(253, 252, 250, 0.88); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding: 0.36rem var(--pad); display: flex; align-items: center;
  gap: 0.9rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted);
  letter-spacing: 0.02em; opacity: 0.72; transition: opacity 150ms ease;
}
.key-strip:hover { opacity: 1; }
.key-strip .kbd { font-size: 0.58rem; padding: 0.04rem 0.32rem; opacity: 0.85; }
.key-strip-item { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
/* phones: no keyboard, no key hints (kept after .key-strip so it wins the cascade) */
@media (max-width: 760px) { .key-strip { display: none; } }

/* =============================================
   FOOTER
   ============================================= */
footer {
  padding: 1.5rem var(--pad); border-top: 1px solid var(--border); max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; width: 100%;
}
footer svg { width: 22px; height: 22px; color: var(--maroon); }
body.blueprint footer svg { color: var(--text); }
.footer-copy { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.06em; }

/* =============================================
   SHORTCUT OVERLAY (?)
   ============================================= */
.overlay-backdrop {
  position: fixed; inset: 0; background: rgba(20, 16, 12, 0.55); z-index: 200; display: none;
  align-items: center; justify-content: center; padding: var(--pad);
}
.overlay-backdrop.visible { display: flex; }
.overlay-panel {
  background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.5rem, 4vw, 2.2rem);
  max-width: 520px; width: 100%; max-height: 82vh; overflow-y: auto;
}
.overlay-panel h2 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--maroon); margin-bottom: 1.1rem; }
body.blueprint .overlay-panel h2 { color: var(--text); }
.overlay-list { display: flex; flex-direction: column; gap: 0.65rem; }
.overlay-row { display: flex; align-items: center; gap: 0.9rem; }
.overlay-row .kbd { min-width: 2.4rem; text-align: center; }
.overlay-row span.desc { font-size: 0.86rem; color: var(--text); font-weight: 300; }
.overlay-close-hint { margin-top: 1.3rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }

/* =============================================
   IMAGE PLACEHOLDER FRAME (Blueprint-styled, dashed)
   ============================================= */
.img-frame {
  border: 1.5px dashed var(--border); border-radius: 5px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; min-height: 160px; position: relative;
}
.img-frame::before {
  content: 'IMG · awaiting'; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* =============================================
   PERSONA ENTRY CARDS (home)
   ============================================= */
.persona-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 860px) { .persona-grid { grid-template-columns: 1fr; } }
.persona-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
  text-decoration: none; color: inherit; transition: border-color var(--transition), transform 150ms var(--ease-out);
}
.persona-card:hover { border-color: rgba(212,132,42,0.5); transform: translateY(-2px); }
.persona-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.persona-card-top { display: flex; align-items: center; gap: 0.6rem; }
.persona-card-top .kbd {
  font-size: 0.62rem; color: var(--text-muted); background: transparent; border-color: transparent;
  padding: 0.06rem 0.3rem; transition: color 150ms ease, border-color 150ms ease;
}
.persona-card:hover .persona-card-top .kbd, .persona-card:focus-visible .persona-card-top .kbd {
  color: var(--amber); border-color: var(--border);
}
.persona-card-name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--maroon); }
body.blueprint .persona-card-name { color: var(--text); }
.persona-card-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; font-weight: 300; }

/* =============================================
   STAT TILES (asymmetric, home)
   ============================================= */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile { border: 1px solid var(--border); border-radius: 5px; padding: 0.9rem 1rem; background: var(--surface); }
.stat-tile .num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--maroon); line-height: 1; }
body.blueprint .stat-tile .num { color: var(--text); }
.stat-tile .label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.35rem; }

/* =============================================
   WORK INDEX (condensed, home)
   ============================================= */
.work-index { display: flex; flex-direction: column; }
.work-index-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0;
  border-top: 1px solid var(--border); text-decoration: none; color: inherit;
}
.work-index-row:first-child { border-top: none; }
.work-index-row:hover .work-index-title { color: var(--amber); }
.work-index-title { font-family: var(--font-serif); font-size: 0.98rem; color: var(--maroon); font-weight: 500; }
body.blueprint .work-index-title { color: var(--text); }
.work-index-outcome { font-size: 0.8rem; color: var(--text-muted); font-weight: 300; text-align: right; flex-shrink: 0; }

/* =============================================
   ROUTE TEASER (home)
   ============================================= */
.route-teaser {
  display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.2rem; background: var(--surface);
}
.route-teaser:hover { border-color: rgba(212,132,42,0.5); }
.route-teaser svg { flex-shrink: 0; }
.route-teaser-text { font-family: var(--font-serif); font-size: 0.95rem; color: var(--maroon); }
body.blueprint .route-teaser-text { color: var(--text); }

/* =============================================
   RING BLOCK (about — what's not here)
   ============================================= */
.ring-block {
  border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.3rem, 3.5vw, 1.9rem); background: var(--surface);
}
.ring-block h2 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--maroon); margin-bottom: 0.9rem; }
body.blueprint .ring-block h2 { color: var(--text); }
.ring-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ring-list li { font-size: 0.86rem; color: var(--text); line-height: 1.55; font-weight: 300; padding-left: 1.2rem; position: relative; }
.ring-list li::before { content: '\25CB'; position: absolute; left: 0; color: var(--amber); font-size: 0.65rem; top: 0.35em; }

/* =============================================
   GENERIC CARD (worlds — work.html)
   ============================================= */
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
@media (max-width: 780px) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } }

.world-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem;
  text-decoration: none; color: inherit; transition: border-color var(--transition), transform 150ms var(--ease-out);
}
.world-card:hover { border-color: rgba(212,132,42,0.5); transform: translateY(-2px); }
.world-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.world-card-num { font-family: var(--font-mono); font-size: 0.58rem; color: var(--amber); letter-spacing: 0.12em; opacity: 0.7; }
.world-card-name { font-family: var(--font-serif); font-size: 0.98rem; font-weight: 500; color: var(--maroon); }
body.blueprint .world-card-name { color: var(--text); }
.world-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; font-weight: 300; flex: 1; }

/* =============================================
   DEEP DIVE (work.html)
   ============================================= */
.deep-dive {
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  margin-bottom: 1.2rem; overflow: hidden;
}
.deep-dive-header { padding: 1.4rem 1.6rem 0; }
.deep-dive-world-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--amber); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.5rem; }
.deep-dive-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; color: var(--maroon); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.2rem; }
body.blueprint .deep-dive-title { color: var(--text); }
.deep-dive-sub { font-size: 0.84rem; color: var(--text-muted); font-weight: 300; font-style: italic; padding-bottom: 1.2rem; }
.deep-dive-products { padding: 0 1.6rem; display: flex; flex-direction: column; }
.product-block { padding: 1.2rem 0; border-top: 1px solid var(--border); }
.product-name { font-family: var(--font-serif); font-size: 0.96rem; font-weight: 500; color: var(--maroon); margin-bottom: 0.4rem; }
body.blueprint .product-name { color: var(--text); }
.product-desc { font-size: 0.85rem; color: var(--text); font-weight: 300; line-height: 1.65; max-width: 680px; }
.product-desc a { color: var(--amber); border-bottom: 1px solid transparent; }
.product-desc a:hover { border-bottom-color: var(--amber); }
.stat-band {
  margin: 1.2rem 1.6rem 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.9rem 1.15rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 300; line-height: 1.6; font-style: italic;
}

.deep-dive-imgs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.7rem; padding: 0 1.6rem 1.4rem; }
@media (max-width: 560px) { .deep-dive-imgs { grid-template-columns: 1fr; } }
.deep-dive-imgs .img-frame { min-height: 110px; }

/* =============================================
   CASE FILES (work.html) — keyboard-navigable
   ============================================= */
.case-files { margin-top: 1.6rem; }
.case-files-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.6rem; }
.case-files-intro { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; max-width: 58ch; margin-bottom: 1.2rem; font-weight: 300; }

.case-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 780px) { .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .case-index { grid-template-columns: minmax(0, 1fr); } }

.case-card {
  text-align: left; width: 100%; font-family: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.4rem; cursor: pointer;
  transition: border-color var(--transition), transform 150ms var(--ease-out);
}
.case-card:hover, .case-card.is-focused { border-color: rgba(212,132,42,0.5); transform: translateY(-2px); }
.case-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.case-card-name { font-family: var(--font-serif); font-size: 0.96rem; font-weight: 500; color: var(--maroon); }
body.blueprint .case-card-name { color: var(--text); }
.case-card-teaser { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; font-weight: 300; }
.case-card[aria-expanded="true"] { border-color: var(--amber); }

.case-card.ghost { cursor: default; border-style: dashed; opacity: 0.7; }
.case-card.ghost:hover { transform: none; border-color: var(--border); }
.case-card.ghost .case-card-name { color: var(--text-muted); }
.skel-tag {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-dim); border-radius: 2px; padding: 0.15rem 0.5rem;
  display: inline-block;
}

.case-detail {
  grid-column: 1 / -1; margin-top: 0.7rem; border: 1px solid var(--border); border-radius: 5px;
  padding: clamp(1.1rem, 3vw, 1.6rem); background: var(--surface); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem;
}
.case-detail[hidden] { display: none; }
@media (max-width: 640px) { .case-detail { grid-template-columns: minmax(0, 1fr); } }
.case-part-label {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--amber); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 0.4rem;
}
.case-part-body { font-size: 0.85rem; line-height: 1.6; color: var(--text); }
.case-part-body .chip.proof { color: var(--maroon); border-color: rgba(139,26,26,0.3); font-style: normal; display: inline-block; white-space: normal; }
body.blueprint .case-part-body .chip.proof { color: var(--text); border-color: rgba(212,132,42,0.4); }

.chip {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.3rem 0.6rem; letter-spacing: 0.02em; white-space: nowrap;
}
.chip.stat { color: var(--maroon); border-color: rgba(139,26,26,0.3); }
body.blueprint .chip.stat { color: var(--text); border-color: rgba(212,132,42,0.4); }

/* =============================================
   ROUTE PAGE — chunked chapter view
   ============================================= */
.route-stage { position: relative; min-height: 60vh; display: flex; flex-direction: column; }
.route-intro { max-width: 620px; margin-bottom: 1.5rem; }
.route-intro h1 { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400; color: var(--maroon); margin-bottom: 0.7rem; }
body.blueprint .route-intro h1 { color: var(--text); }
.route-intro p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; }

.chapter-viewport { position: relative; flex: 1; min-height: 320px; }
.chapter {
  display: none;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.chapter.active { display: grid; opacity: 1; }
@media (max-width: 820px) { .chapter { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .chapter { transition: none; } }

.chapter-era {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--amber); letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.6rem;
}
.chapter-era .sector { color: var(--text-muted); font-weight: 300; }
.chapter-title {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500;
  color: var(--maroon); letter-spacing: -0.01em; margin-bottom: 0.8rem; line-height: 1.2;
}
body.blueprint .chapter-title { color: var(--text); }
.chapter-body { font-size: 0.96rem; line-height: 1.7; max-width: 58ch; margin-bottom: 1rem; }
.chapter-body p { margin-bottom: 0.55rem; }
.chapter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.texture-coords {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--amber); letter-spacing: 0.06em;
  border: 1px solid var(--border); border-radius: 3px; padding: 0.3rem 0.6rem; display: inline-block; margin-bottom: 0.85rem;
}
.texture-tick-row {
  display: flex; gap: 0.9rem; margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--text-muted); letter-spacing: 0.05em;
}
.texture-tick-row span::before { content: '\25B8 '; color: var(--amber); }

.chapter-frame { align-self: start; }
.chapter-frame .img-frame { aspect-ratio: 4 / 5; min-height: 200px; }

.route-end { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.2rem; }
.route-end svg { width: 50px; height: 50px; color: var(--maroon); flex-shrink: 0; }
body.blueprint .route-end svg { color: var(--text); }

/* Route chapter nav — prev/next + waypoints */
.route-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.route-nav-btn {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; padding: 0.45rem 0.85rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem; letter-spacing: 0.02em;
}
.route-nav-btn:hover:not(:disabled) { border-color: rgba(212,132,42,0.5); }
.route-nav-btn:disabled { opacity: 0.35; cursor: default; }
.route-waypoints { display: flex; align-items: center; gap: 0.5rem; }
.waypoint { background: none; border: none; cursor: pointer; padding: 0.35rem; }
.waypoint .dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); border: 2px solid var(--amber); transition: transform 150ms ease, background 150ms ease; }
.waypoint:hover .dot, .waypoint:focus-visible .dot { transform: scale(1.3); }
.waypoint.active .dot { background: var(--amber); }
.route-progress { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.06em; }

/* =============================================
   EXPERIENCE STRIP
   ============================================= */
.exp-list { display: flex; flex-direction: column; }
.exp-entry { padding: 1.2rem 0 1.2rem 1.4rem; border-left: 2px solid var(--border); position: relative; }
.exp-entry::before {
  content: ''; position: absolute; left: -5px; top: 1.5rem; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--cream); box-shadow: 0 0 0 1px var(--border);
}
.exp-entry:first-child::before { background: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.exp-title { font-size: 0.94rem; font-weight: 500; color: var(--text); line-height: 1.3; margin-bottom: 0.2rem; }
.exp-org { font-size: 0.84rem; color: var(--text-muted); font-weight: 300; margin-bottom: 0.15rem; }
.exp-date { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.06em; }
.exp-note { font-size: 0.81rem; color: var(--text-muted); font-weight: 300; margin-top: 0.35rem; line-height: 1.5; }

/* =============================================
   HOW I BUILD
   ============================================= */
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.85rem; }
@media (max-width: 640px) { .build-grid { grid-template-columns: minmax(0, 1fr); } }
.build-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.05rem 1.2rem 1.15rem; transition: border-color var(--transition);
}
@media (hover: hover) { .build-item:hover { border-color: var(--amber); } }
body.blueprint .build-item { background: rgba(30, 24, 18, 0.6); border-color: rgba(212, 132, 42, 0.22); }
.build-verb { font-family: var(--font-serif); font-size: 0.88rem; font-weight: 500; color: var(--maroon); margin-bottom: 0.25rem; }
body.blueprint .build-verb { color: var(--text); }
.build-detail { font-size: 0.83rem; color: var(--text-muted); font-weight: 300; line-height: 1.6; }

/* =============================================
   HOW I THINK / CHANGE MY MIND LIST
   ============================================= */
.thinking-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; max-width: 560px; }
.thinking-list li { font-size: 0.92rem; color: var(--text); line-height: 1.6; font-weight: 300; padding-left: 1.2rem; position: relative; }
.thinking-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--amber); font-size: 0.82rem; }

.mind-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; counter-reset: mind; }
.mind-list li { font-size: 0.88rem; color: var(--text); line-height: 1.6; font-weight: 300; padding-left: 1.6rem; position: relative; counter-increment: mind; }
.mind-list li::before {
  content: counter(mind, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--amber);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
}

/* =============================================
   SHELF
   ============================================= */
.shelf-list { display: flex; flex-direction: column; gap: 0.9rem; }
.shelf-entry { border-top: 1px solid var(--border); padding: 0.9rem 0 0; }
.shelf-entry:first-child { border-top: none; padding-top: 0; }
.shelf-author { font-family: var(--font-serif); font-size: 0.94rem; font-weight: 500; color: var(--maroon); }
body.blueprint .shelf-author { color: var(--text); }
.shelf-note { font-size: 0.82rem; color: var(--text-muted); font-weight: 300; line-height: 1.55; margin-top: 0.25rem; max-width: 60ch; }
.shelf-frame-line { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 0.9rem; text-transform: uppercase; }

/* =============================================
   RESUME
   ============================================= */
.resume-lede { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; max-width: 60ch; margin-bottom: 1.6rem; font-weight: 300; }

.resume-sheet-wrap { position: relative; padding: clamp(0.5rem, 2vw, 1.5rem) 0 2.5rem; }
.resume-sheet {
  position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(44,44,44,0.04), 0 12px 32px -18px rgba(44,44,44,0.22);
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.6rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3rem);
  max-width: 760px; margin: 0 auto;
}
body.blueprint .resume-sheet {
  background: rgba(30, 24, 18, 0.55); border: 1px dashed rgba(212, 132, 42, 0.45);
  box-shadow: none;
}
/* Blueprint corner ticks — spec sheet pinned to the drafting grid */
.sheet-tick { display: none; }
body.blueprint .sheet-tick { display: block; position: absolute; width: 14px; height: 14px; }
.sheet-tick.tl { top: -1px; left: -1px; border-top: 1.5px dashed var(--amber); border-left: 1.5px dashed var(--amber); }
.sheet-tick.tr { top: -1px; right: -1px; border-top: 1.5px dashed var(--amber); border-right: 1.5px dashed var(--amber); }
.sheet-tick.bl { bottom: -1px; left: -1px; border-bottom: 1.5px dashed var(--amber); border-left: 1.5px dashed var(--amber); }
.sheet-tick.br { bottom: -1px; right: -1px; border-bottom: 1.5px dashed var(--amber); border-right: 1.5px dashed var(--amber); }

.resume-sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem); padding-bottom: 1.1rem; border-bottom: 1px solid var(--border);
}
.resume-sheet-tag {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase;
}
.resume-download {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--maroon); background: transparent; border: 1px solid var(--maroon); border-radius: 3px;
  padding: 0.42rem 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms var(--ease-out);
}
.resume-download:hover { background: var(--maroon); color: var(--cream); transform: translateY(-1px); }
.resume-download:active { transform: scale(0.97); }
.resume-download svg { width: 12px; height: 12px; flex-shrink: 0; }
body.blueprint .resume-download { color: var(--amber); border-color: var(--amber); }
body.blueprint .resume-download:hover { background: var(--amber); color: #14100c; }

.resume-block { margin-bottom: 1.9rem; }
.resume-block-label {
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--amber); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 0.9rem;
}
.resume-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.8rem 0; border-top: 1px solid var(--border);
}
.resume-row:first-child { border-top: none; }
.resume-role-title { font-size: 0.94rem; font-weight: 500; color: var(--text); }
.resume-role-org { font-size: 0.81rem; color: var(--text-muted); font-weight: 300; margin-top: 0.15rem; }
.resume-role-date { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; }
.resume-detail { font-size: 0.81rem; color: var(--text-muted); font-weight: 300; line-height: 1.55; margin-top: 0.5rem; max-width: 62ch; }
.resume-edu-line { font-size: 0.89rem; color: var(--text); font-weight: 400; }
.resume-edu-sub { font-size: 0.79rem; color: var(--text-muted); font-weight: 300; margin-top: 0.2rem; }
.resume-skills-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0.65rem 1rem; }
@media (max-width: 560px) { .resume-skills-grid { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }
.resume-skills-label { font-family: var(--font-mono); font-size: 0.67rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; padding-top: 0.15rem; }
.resume-skills-value { font-size: 0.84rem; color: var(--text); font-weight: 300; line-height: 1.6; }

/* =============================================
   THE MARK
   ============================================= */
.mark-block {
  display: grid; grid-template-columns: 88px 1fr; gap: clamp(1.1rem, 3.5vw, 1.8rem); align-items: start;
  border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.3rem, 3.5vw, 2rem);
  background: var(--surface);
}
@media (max-width: 560px) { .mark-block { grid-template-columns: 1fr; } }
.mark-block svg { width: 88px; height: 88px; }
.mark-block h2 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; color: var(--maroon); margin-bottom: 0.75rem; }
body.blueprint .mark-block h2 { color: var(--text); }
.mark-block p { font-size: 0.9rem; color: var(--text); line-height: 1.7; max-width: 62ch; }
.mark-block p + p { margin-top: 0.65rem; }
.mark-block p strong { color: var(--amber); font-weight: 500; }

.mark-ring-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.6rem; align-items: start; }
@media (max-width: 780px) { .mark-ring-pair { grid-template-columns: 1fr; } }

/* =============================================
   CONTACT — REVEAL ON INTENT
   ============================================= */
.contact-wrap { position: relative; }
.contact-btn {
  font-family: var(--font-sans); font-size: 0.87rem; font-weight: 400; color: var(--maroon);
  background: transparent; border: 1px solid var(--maroon); border-radius: 3px; padding: 0.58rem 1.25rem;
  cursor: pointer; letter-spacing: 0.02em;
}
.contact-btn:hover { background: var(--maroon); color: var(--cream); }
.contact-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.contact-reveal { display: none; margin-top: 1.4rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.contact-reveal.visible { display: block; animation: fadeUp 200ms ease forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .contact-reveal.visible { animation: none; } }
.contact-links { display: flex; flex-direction: column; gap: 0.6rem; }
.contact-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.contact-label { font-family: var(--font-mono); font-size: 0.63rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; min-width: 90px; }
.contact-value { font-size: 0.87rem; color: var(--text); font-weight: 300; }
.contact-value a { color: var(--amber); border-bottom: 1px solid transparent; }
.contact-value a:hover { border-bottom-color: var(--amber); }

/* =============================================
   DIVIDER MOTIF
   ============================================= */
.divider-motif { display: block; margin: 2rem auto; overflow: visible; }
.divider-motif line { stroke: rgba(139, 26, 26, 0.2); stroke-width: 0.8; }
.divider-motif path { stroke: var(--amber); stroke-width: 1.2; fill: none; }
.divider-motif circle { fill: var(--amber); }
body.blueprint .divider-motif line { stroke: rgba(212, 132, 42, 0.4); }

/* =============================================
   PAGE-LEVEL SPACING
   ============================================= */
main.page-main { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem); }
section { margin-bottom: clamp(2rem, 5vw, 3rem); position: relative; }
h1.page-title { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 400; color: var(--maroon); margin-bottom: 0.5rem; }
body.blueprint h1.page-title { color: var(--text); }
p.page-lede { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; max-width: 60ch; margin-bottom: 1.75rem; font-weight: 300; }

/* Two-column asymmetric layout helper (home) */
.split-2col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .split-2col { grid-template-columns: 1fr; } }

/* =============================================
   MOTION — hover micro-lift, press states, card warm-up
   Ceiling 200ms everywhere. prefers-reduced-motion: complete, still.
   ============================================= */
.persona-card, .world-card, .case-card:not(.ghost), .route-teaser, .stat-tile, .shelf-entry {
  transition: border-color 150ms ease, transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.persona-card:hover, .world-card:hover, .case-card:not(.ghost):hover, .case-card.is-focused,
.route-teaser:hover {
  box-shadow: 0 8px 20px -14px rgba(44,44,44,0.35);
}
body.blueprint .persona-card:hover, body.blueprint .world-card:hover,
body.blueprint .case-card:not(.ghost):hover, body.blueprint .case-card.is-focused,
body.blueprint .route-teaser:hover { box-shadow: none; }

.persona-card:active, .world-card:active, .case-card:not(.ghost):active,
.contact-btn:active, .resume-download:active, #bp-toggle:active,
.route-nav-btn:active:not(:disabled), button:active { transform: scale(0.97); }

#bp-toggle, .contact-btn, .route-nav-btn { transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms var(--ease-out); }

.waypoint .dot { transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.waypoint:hover .dot, .waypoint:focus-visible .dot { box-shadow: 0 0 0 3px var(--amber-dim); }

/* Route chapter transition: small slide + line-draw feel */
.chapter { transform: translateX(6px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.chapter.active { transform: none; }
.route-progress::after {
  content: ''; display: block; height: 1px; margin-top: 0.3rem; background: var(--amber);
  transform: scaleX(0); transform-origin: left; animation: routeLine 200ms var(--ease-out) forwards;
}
@keyframes routeLine { to { transform: scaleX(1); } }

/* Page-enter rhythm: header + first section stagger in on load */
.topbar, h1.page-title, .page-lede, .resume-lede { animation: pageEnter 200ms var(--ease-out) both; }
.page-lede, .resume-lede { animation-delay: 40ms; }

@keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .chapter { transform: none; transition: none; }
  .topbar, h1.page-title, .page-lede, .resume-lede { animation: none; }
  .route-progress::after { animation: none; transform: none; }
  .persona-card, .world-card, .case-card:not(.ghost), .route-teaser, .stat-tile, .shelf-entry,
  .waypoint .dot, #bp-toggle, .contact-btn, .route-nav-btn { transition: none; }
  .persona-card:active, .world-card:active, .case-card:not(.ghost):active,
  .contact-btn:active, .resume-download:active, #bp-toggle:active,
  .route-nav-btn:active:not(:disabled), button:active { transform: none; }
}

/* =============================================
   PRINT — resume.html only. Sheet content, nothing else.
   ============================================= */
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  body { background: #fff !important; display: block; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .topbar, .key-strip, footer, .ann, .resume-lede, .resume-sheet-bar,
  #contact, .overlay-backdrop { display: none !important; }
  main.page-main { padding: 0; }
  .resume-sheet-wrap { padding: 0; }
  .resume-sheet {
    box-shadow: none; border: none; max-width: none; padding: 0;
    background: #fff !important; color: #000 !important;
  }
  .sheet-tick { display: none !important; }
  .resume-block { margin-bottom: 1.1rem; page-break-inside: avoid; }
  .resume-row { padding: 0.4rem 0; page-break-inside: avoid; }
  h1.page-title { display: none; }
}