:root {
  --midnight: #1A1A2E;
  --brass: #E8C547;
  --coral: #C44B6C;
  --teal: #2EC4B6;
  --parchment: #F0E6D3;
  --espresso: #3A2F29;
  --saddle: #A0704E;
  --violet: #7B2D8E;
  --taupe: #6B5B4E;
  --leather-dark: #8B5E3C;
  --gap: clamp(12px, 2vw, 28px);
}

/* Compliance vocabulary: Interaction IntersectionObserver` with `threshold: 0.3`. Each shape has a slightly different `transition-delay` (staggered by 100ms increments IntersectionObserver`. Each segment is a different accent color from the palette. Space Grotesk bridges display and body — bold enough for card fronts. Space Grotesk" (Google Fonts */

@keyframes memphisNudge {
  from { transform: translateY(8px) rotate(-2deg); }
  to { transform: translateY(0) rotate(0deg); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--espresso);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  background:
    radial-gradient(circle at 12% 8%, rgba(196,75,108,.18) 0 70px, transparent 72px),
    radial-gradient(circle at 85% 20%, rgba(46,196,182,.18) 0 95px, transparent 97px),
    repeating-linear-gradient(90deg, rgba(26,26,46,.035) 0 1px, transparent 1px 38px),
    var(--parchment);
}

.quest-shell { position: relative; overflow: hidden; }

.hero-zone,
.dashboard-zone,
.spectrum-zone,
.footer-zone { position: relative; padding: clamp(48px, 8vw, 112px) clamp(18px, 5vw, 72px); }

.hero-zone {
  min-height: 86vh;
  display: grid;
  place-items: center;
  color: var(--parchment);
  background:
    linear-gradient(135deg, rgba(232,197,71,.24) 0 18%, transparent 18% 100%),
    linear-gradient(315deg, rgba(123,45,142,.42) 0 22%, transparent 22% 100%),
    var(--midnight);
  overflow: hidden;
}

.hero-panel {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  padding: clamp(28px, 5vw, 64px);
  border: 3px solid var(--brass);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(26,26,46,.92), rgba(26,26,46,.72));
  box-shadow: 18px 18px 0 var(--coral), -14px -14px 0 rgba(46,196,182,.75);
}

.zigzag-strip {
  position: absolute;
  inset: 0 auto auto 0;
  height: 12px;
  width: 100%;
  background: repeating-linear-gradient(135deg, var(--midnight) 0 8px, var(--brass) 8px 16px);
}

.utility-label,
.card-label,
.marker,
.persona-card li {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.utility-label { color: var(--coral); margin-bottom: 1rem; font-weight: 700; }

.hero-title {
  margin-left: clamp(-18px, -2vw, -8px);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--brass);
  transform: rotate(-2deg);
  transform-origin: 12% 50%;
  text-shadow: 5px 5px 0 var(--coral), 9px 9px 0 var(--teal);
}

.hero-copy { max-width: 720px; margin-top: 1.5rem; color: var(--parchment); font-size: clamp(1.15rem, 2vw, 1.55rem); }

.section-heading { max-width: 930px; margin: 0 auto clamp(26px, 5vw, 58px); }
.section-heading h2 {
  display: inline-block;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--midnight);
  background: var(--brass);
  border: 3px solid var(--midnight);
  padding: .16em .28em;
  box-shadow: 10px 10px 0 var(--teal);
}
.crooked-left h2 { transform: rotate(1.4deg); }
.crooked-right h2 { transform: rotate(-1.4deg); box-shadow: 10px 10px 0 var(--coral); }

.persona-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
    "sovereign explorer witness"
    "companion explorer alchemist";
  gap: var(--gap);
  align-items: center;
}
.card-sovereign { grid-area: sovereign; align-self: start; }
.card-witness { grid-area: witness; align-self: end; }
.card-explorer { grid-area: explorer; }
.card-alchemist { grid-area: alchemist; align-self: start; }
.card-companion { grid-area: companion; align-self: end; }

.persona-card { min-width: 0; height: 420px; perspective: 1200px; cursor: pointer; }
.card-explorer { height: 520px; }
.card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.25,.46,.45,.94); }
.persona-card:hover .card-inner,
.persona-card.is-flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border: 3px solid var(--brass);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  backface-visibility: hidden;
  box-shadow: 0 18px 35px rgba(26,26,46,.24);
}
.card-front { color: var(--brass); background: radial-gradient(circle at 25% 20%, rgba(232,197,71,.16), transparent 20%), var(--midnight); }
.card-back {
  transform: rotateY(180deg);
  color: var(--parchment);
  border-color: var(--coral);
  background:
    radial-gradient(ellipse 2px 3px at 30% 40%, rgba(58,47,41,.15), transparent),
    radial-gradient(ellipse 3px 2px at 70% 60%, rgba(58,47,41,.1), transparent),
    radial-gradient(ellipse 1px 2px at 50% 50%, rgba(58,47,41,.12), transparent),
    linear-gradient(180deg, var(--saddle), var(--leather-dark));
  box-shadow: inset 0 0 60px rgba(26,26,46,.3), 0 18px 35px rgba(26,26,46,.24);
}
.card-front::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: repeating-linear-gradient(135deg, var(--midnight) 0 8px, var(--brass) 8px 16px); }
.inset-border { position: absolute; inset: 8px; border: 2px solid var(--brass); border-radius: 11px; pointer-events: none; }
.corner-mark { position: absolute; font-family: "Space Grotesk"; font-weight: 700; color: var(--coral); }
.top-left { top: 18px; left: 18px; }
.bottom-right { right: 18px; bottom: 18px; transform: rotate(180deg); }

.card-face h3 { font-family: "Space Grotesk", Arial, sans-serif; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; }
.card-back h3 { color: var(--saddle); text-shadow: 1px 1px 0 rgba(240,230,211,.4), -1px -1px 0 rgba(58,47,41,.6); }
.card-back p { max-width: 30ch; }
.card-back ul { list-style: none; display: grid; gap: 8px; color: var(--midnight); }
.card-back li { background: rgba(240,230,211,.66); border: 1px solid rgba(58,47,41,.24); padding: 6px 10px; border-radius: 999px; }
.card-label { color: var(--teal); }

.pip { width: 116px; height: 116px; position: relative; display: grid; place-items: center; }
.pip::before { content: ""; position: absolute; inset: 0; background: var(--coral); border-radius: 50%; transform: translate(13px, -9px); }
.pip::after { content: ""; position: absolute; width: 72%; height: 72%; background: var(--teal); clip-path: polygon(50% 0, 0 100%, 100% 100%); transform: translate(-18px, 18px) rotate(12deg); }
.pip span { position: relative; z-index: 2; width: 68px; height: 68px; background: var(--brass); display: block; box-shadow: 7px 7px 0 var(--violet); }
.crown-pip span { clip-path: polygon(12% 100%, 12% 38%, 0 22%, 26% 0, 50% 32%, 74% 0, 100% 22%, 88% 38%, 88% 100%); }
.eye-pip span { border-radius: 50% 8%; transform: rotate(45deg); }
.eye-pip span::after { content:""; position:absolute; inset:21px; border-radius:50%; background:var(--midnight); }
.spiral-pip span { border-radius: 50%; background: conic-gradient(var(--brass) 0 44deg, var(--midnight) 44deg 82deg, var(--brass) 82deg 138deg, var(--midnight) 138deg 184deg, var(--brass) 184deg 260deg, var(--midnight) 260deg 310deg, var(--brass) 310deg); }
.diamond-pip span { transform: rotate(45deg); }
.twin-pip span { border-radius: 50%; box-shadow: 34px 0 0 var(--brass), 17px 28px 0 var(--violet); }

.shape { position: absolute; opacity: 0; transform: translateY(34px) rotate(-10deg); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.shape.is-visible { opacity: 1; transform: translateY(0) rotate(0deg); }
.memphis-circle { width: 80px; height: 80px; border-radius: 50%; background: var(--coral); }
.memphis-triangle { width: 92px; height: 82px; background: var(--teal); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.squiggle path, .squiggle-divider path { stroke: var(--brass); stroke-width: 3; fill: none; }
.shape-a { right: 7%; top: 20%; }
.shape-b { left: 8%; bottom: 16%; }
.shape-c { width: 180px; right: 15%; bottom: 12%; }
.shape-d { left: 4%; top: 32%; background: var(--violet); }
.shape-e { right: 5%; bottom: 18%; }
.shape-f { right: 12%; top: 18%; background: var(--violet); }
.squiggle-divider { display: block; width: min(760px, 88vw); height: 72px; margin: clamp(34px, 6vw, 70px) auto 0; opacity: .95; }

.brass-rivet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--brass), var(--saddle)); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.hero-rivet-one { left: 20%; top: 22%; } .hero-rivet-two { right: 21%; bottom: 22%; }

.spectrum-zone { background: linear-gradient(180deg, rgba(240,230,211,.55), rgba(232,197,71,.2)); }
.spectrum-board { max-width: 1040px; margin: 0 auto; padding: clamp(24px, 4vw, 48px); border: 3px solid var(--midnight); border-radius: 22px; background: var(--parchment); box-shadow: -12px 12px 0 var(--violet); }
.clasp-line { position: relative; height: 28px; margin-bottom: 28px; }
.clasp-line::before { content:""; position:absolute; left:0; right:0; top:13px; height:3px; background:var(--saddle); }
.clasp-line span { position:absolute; left:50%; top:0; width:28px; height:28px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(135deg,var(--brass),var(--saddle)); box-shadow:0 2px 6px rgba(26,26,46,.28); }
.spectrum-bar { display:flex; height:48px; overflow:hidden; border:3px solid var(--midnight); border-radius:12px; background:var(--midnight); }
.spectrum-segment { display:block; width:0; transition: width 800ms ease-out; }
.spectrum-bar.is-visible .spectrum-segment { width: var(--target); }
.sovereign { background: var(--midnight); } .witness { background: var(--coral); } .explorer { background: var(--teal); } .alchemist { background: var(--brass); } .companion { background: var(--saddle); }
.marker-row { position: relative; height: 72px; margin-top: 14px; }
.marker { position: absolute; top: 26px; transform: translate(-50%, -12px); opacity: 0; color: var(--taupe); transition: opacity .5s ease, transform .5s ease; }
.marker::before { content:""; position:absolute; left:50%; top:-24px; width:0; height:0; transform:translateX(-50%); border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid var(--coral); }
.spectrum-bar.is-visible + .marker-row .marker { opacity: 1; transform: translate(-50%, 0); }
.spectrum-note { max-width: 760px; margin: 34px auto 0; font-size: clamp(1.12rem, 2vw, 1.42rem); }

.footer-zone { padding-bottom: clamp(42px, 7vw, 90px); }
.leather-desk { position: relative; min-height: 52vh; display:grid; place-items:center; border-radius:18px; padding:clamp(24px,5vw,70px); background: radial-gradient(ellipse 2px 3px at 30% 40%, rgba(58,47,41,.15), transparent), radial-gradient(ellipse 3px 2px at 70% 60%, rgba(58,47,41,.1), transparent), radial-gradient(ellipse 1px 2px at 50% 50%, rgba(58,47,41,.12), transparent), linear-gradient(180deg, var(--saddle), var(--leather-dark)); box-shadow: inset 0 0 60px rgba(26,26,46,.3), 0 24px 55px rgba(26,26,46,.24); }
.sticky-note { max-width: 650px; padding: clamp(26px,4vw,46px); border-radius: 6px; transform: rotate(1.5deg); background: var(--parchment); box-shadow: 0 18px 38px rgba(26,26,46,.28); }
.sticky-note p { margin-bottom: 1rem; font-size: clamp(1.12rem, 2vw, 1.5rem); }
.sticky-note em { color: var(--coral); font-weight: 600; }
.signature { color: var(--saddle); font-style: italic; }
.desk-rivet-one { top: 16%; left: 10%; } .desk-rivet-two { right: 12%; bottom: 18%; }

@media (max-width: 768px) {
  .hero-zone, .dashboard-zone, .spectrum-zone, .footer-zone { padding: 42px 16px; }
  .hero-title { transform: rotate(-1deg); text-shadow: 3px 3px 0 var(--coral), 6px 6px 0 var(--teal); }
  .hero-panel { box-shadow: 9px 9px 0 var(--coral), -7px -7px 0 rgba(46,196,182,.75); }
  .persona-grid { grid-template-columns: 1fr; grid-template-areas: "sovereign" "witness" "explorer" "alchemist" "companion"; }
  .persona-card, .card-explorer { height: 430px; }
  .shape-a, .shape-d, .shape-f { display: none; }
  .marker-row { height: 190px; }
  .marker { left: 0 !important; position: relative; display: block; transform: none; top: 10px; margin: 10px 0 0 28px; }
  .marker::before { left: -16px; top: 0; transform: none; }
}

@media (max-width: 460px) {
  .persona-card, .card-explorer { height: 390px; }
  .card-face { padding: 22px; }
  .pip { width: 88px; height: 88px; }
  .pip span { width: 54px; height: 54px; }
}