/* ============================================================================
   cinematic-shell.css — THE AMAZING SITE. Calm dark + warm gold. The polarity
   field as recurring signature. One focal thing per screen. Cinematic motion.
   ============================================================================ */
.cs-screen {
  max-width: 920px; margin: 0 auto; padding: clamp(32px, 6vw, 80px) clamp(20px, 4vw, 48px);
  min-height: 70vh;
}
.cs-eyebrow {
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent, #c9a25c); margin-bottom: 14px;
}
.cs-display {
  font-family: var(--display, 'Fraunces', serif); font-weight: 300;
  font-size: clamp(38px, 6vw, 60px); letter-spacing: -.03em; line-height: 1.02;
  margin: 0; color: var(--bone, #f4ece0);
}
.cs-display em { font-style: italic; font-weight: 600; color: var(--accent-hi, #e0bd76); }
.cs-lede {
  color: var(--bone-dim, #bdab98); font-size: clamp(15px, 2vw, 18px); font-weight: 300;
  margin-top: 16px; max-width: 580px; line-height: 1.6;
}
.cs-head { margin-bottom: clamp(32px, 5vw, 56px); }
.cs-empty { color: var(--muted, #857668); font-size: 15px; padding: 48px 0; text-align: center; }

/* ---- COORDINATE 1: THRESHOLD — the ring draws itself, breathing ---------- */
.cs-threshold { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 86vh; }
.cs-thresh-field { width: clamp(180px, 30vw, 260px); margin-bottom: 40px; }
.cs-ring-draw { width: 100%; height: auto; overflow: visible; }
.cs-ring { fill: none; stroke: var(--accent, #c9a25c); stroke-width: 1.2;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: cs-draw 1.8s cubic-bezier(.16,1,.3,1) forwards, cs-breathe 6s ease-in-out 2s infinite; }
.cs-ring.r2 { stroke-width: 1; opacity: .7; animation-delay: .25s, 2.2s; }
.cs-ring.r3 { stroke-width: 1; opacity: .5; animation-delay: .5s, 2.4s; }
.cs-ring-core { fill: var(--accent-hi, #e0bd76); stroke: none; opacity: 0;
  animation: cs-core 1s ease 1.4s forwards; filter: drop-shadow(0 0 12px var(--accent-glow, rgba(201,162,92,.4))); }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-core { to { opacity: 1; } }
@keyframes cs-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.cs-threshold .cs-display { margin-top: 4px; }
.cs-enter {
  margin-top: 36px; background: var(--accent, #c9a25c); color: var(--accent-ink, #1a1206);
  border: none; border-radius: 12px; padding: 15px 34px; font-family: var(--body, sans-serif);
  font-weight: 600; font-size: 15px; cursor: pointer; letter-spacing: .01em;
  transition: transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s;
  opacity: 0; animation: cs-fade-up .8s ease 1.6s forwards;
}
.cs-enter:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--accent-glow, rgba(201,162,92,.3)); }
@keyframes cs-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- COORDINATE 2: CONSTELLATION — clients as living fields -------------- */
.cs-node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.cs-node {
  background: var(--surface, #16100e); border: 1px solid var(--hairline, rgba(245,230,210,.07));
  border-radius: 18px; padding: 26px 22px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
  animation: cs-fade-up .6s ease both;
}
.cs-node:hover { transform: translateY(-5px); border-color: var(--accent-deep, #8f6f33);
  box-shadow: 0 22px 50px rgba(0,0,0,.45); }
.cs-node-field { width: 72px; height: 72px; }
.cs-mini-field polygon { fill: var(--accent-glow, rgba(201,162,92,.18)); stroke: var(--accent, #c9a25c);
  stroke-width: 1.5; transition: fill .4s; }
.cs-node:hover .cs-mini-field polygon { fill: var(--accent-glow, rgba(201,162,92,.32)); }
.cs-node-name { font-family: var(--display, serif); font-size: 17px; font-weight: 600; color: var(--bone, #f4ece0); }
.cs-node-meta { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #857668); }

/* ---- COORDINATE 3: READING — radar, audio, staggered narrative ---------- */
.cs-reading-audio, .cs-reading-radar { margin-bottom: 24px; }
.cs-reading-narrative { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.cs-narr-block {
  border-left: 2px solid var(--accent-deep, #8f6f33); padding-left: 22px;
  opacity: 0; animation: cs-fade-up .6s ease forwards; animation-delay: var(--d, 0ms);
}
.cs-narr-axis { font-family: var(--display, serif); font-size: 20px; font-weight: 600; color: var(--bone, #f4ece0); }
.cs-narr-band { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent, #c9a25c); margin: 4px 0 8px; }
.cs-narr-read { color: var(--bone-dim, #bdab98); font-size: 14.5px; line-height: 1.6; }
.cs-noticed-wrap { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.cs-noticed {
  background: linear-gradient(100deg, var(--accent-glow, rgba(201,162,92,.14)), transparent);
  border: 1px solid var(--accent-deep, #8f6f33); border-radius: 14px; padding: 18px 22px;
  font-size: 14.5px; color: var(--bone, #f4ece0); line-height: 1.55;
  opacity: 0; animation: cs-fade-up .7s ease forwards; animation-delay: var(--d, 0ms);
}
.cs-noticed-tag { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-hi, #e0bd76); display: block; margin-bottom: 6px; }

/* ---- COORDINATE 4: FORGE — instruments ---------------------------------- */
.cs-instr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cs-instrument {
  background: var(--surface, #16100e); border: 1px solid var(--hairline, rgba(245,230,210,.07));
  border-radius: 18px; padding: 26px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.cs-instrument:hover { transform: translateY(-4px); border-color: var(--accent-deep, #8f6f33);
  box-shadow: 0 20px 46px rgba(0,0,0,.4); }
.cs-instr-name { font-family: var(--display, serif); font-size: 19px; font-weight: 600; color: var(--bone, #f4ece0); }
.cs-instr-registers { display: flex; gap: 8px; align-items: center; }
.cs-reg { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--accent-glow, rgba(201,162,92,.18)); color: var(--accent-hi, #e0bd76); }
.cs-consent { font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .08em; color: var(--muted, #857668); }
.cs-instr-purpose { color: var(--bone-dim, #bdab98); font-size: 13.5px; line-height: 1.5; }
.cs-instr-run { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .06em; color: var(--accent, #c9a25c); margin-top: 6px; }
.cs-forge-output:not(:empty) { margin-top: 32px; background: var(--surface, #16100e);
  border: 1px solid var(--hairline); border-radius: 18px; padding: 30px; }

/* ---- COORDINATE 5: DIALOGUE --------------------------------------------- */
.cs-dialogue-surface { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cs-ring, .cs-ring-core, .cs-enter, .cs-node, .cs-narr-block, .cs-noticed { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* ---- COORDINATE 3 DEEP: the full assessment layers ---- */
.cs-assessment-layers { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.cs-layer { background: var(--surface, #16100e); border: 1px solid var(--hairline, rgba(245,230,210,.07)); border-radius: 16px; padding: 22px 24px; }
.cs-layer-primary { border-left: 3px solid var(--accent, #c9a25c); }
.cs-layer-eyebrow { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #c9a25c); margin-bottom: 8px; }
.cs-layer-body { color: var(--bone-dim, #bdab98); font-size: 14px; line-height: 1.6; }
.cs-layer-metric { font-family: var(--display, serif); font-size: 28px; font-weight: 600; color: var(--accent-hi, #e0bd76); margin-top: 10px; }
.cs-deeper { background: var(--surface, #16100e); border: 1px solid var(--hairline); border-radius: 16px; padding: 4px 24px; }
.cs-deeper-summary { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .04em; color: var(--bone-dim, #bdab98); cursor: pointer; padding: 18px 0; list-style: none; }
.cs-deeper-summary::-webkit-details-marker { display: none; }
.cs-deeper-summary::before { content: "▸ "; color: var(--accent, #c9a25c); }
.cs-deeper[open] .cs-deeper-summary::before { content: "▾ "; }
.cs-deeper-body { padding-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.cs-layer-deep { background: var(--ground-deep, #070405); }

/* ---- AUDIO REPORT save actions ---- */
.ar-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ar-save { background: var(--accent, #c9a25c); color: var(--accent-ink, #1a1206); border: none; border-radius: 10px; padding: 9px 16px; font-family: var(--mono, monospace); font-size: 12px; cursor: pointer; transition: transform .2s; }
.ar-save:hover { transform: translateY(-2px); }
.ar-save.ghost { background: transparent; border: 1px solid var(--hairline, rgba(245,230,210,.12)); color: var(--bone-dim, #bdab98); }
.ar-save:disabled { opacity: .5; cursor: wait; }

/* ---- F.P.A. PRESENTATION DECK ---- */
.deck { display: flex; flex-direction: column; gap: 16px; }
.deck-slide { background: var(--surface, #16100e); border: 1px solid var(--hairline, rgba(245,230,210,.08)); border-radius: 14px; padding: 32px; position: relative; min-height: 180px; }
.deck-shush .deck-slide { border-left: 3px solid var(--accent, #c9a25c); }
.deck-title-slide { text-align: center; padding: 40px 0; }
.deck-title-slide h1 { font-family: var(--display, serif); font-weight: 300; font-size: 36px; color: var(--bone, #f4ece0); }
.deck-eyebrow { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #c9a25c); }
.deck-slide h2 { font-family: var(--display, serif); font-size: 24px; color: var(--bone, #f4ece0); margin-bottom: 14px; }
.deck-charge { font-size: 15px; line-height: 1.6; color: var(--bone, #f4ece0); }
.deck-want, .deck-dyn { font-size: 13px; color: var(--bone-dim, #bdab98); margin-top: 8px; }
.deck-consent { font-size: 12px; color: var(--accent, #c9a25c); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline, rgba(245,230,210,.06)); }
.deck-note { font-size: 13px; font-style: italic; color: var(--accent, #c9a25c); margin-top: 12px; }
.deck-pageno { position: absolute; bottom: 12px; right: 16px; font-family: var(--mono, monospace); font-size: 10px; color: var(--muted, #857668); }