:root {
  --navy:#071126;
  --ink:#101A35;
  --steel:#4B5568;
  --silver:#C8D0DA;
  --coral:#FF5A6A;
  --cyan:#3EE7F2;
  --violet:#7D5CFF;
  --parchment:#F2E3C6;
  --sulfur:#F5D547;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body {
  margin: 0;
  color: var(--silver);
  font-family: "Libre Baskerville", serif;
  background: var(--navy);
  overflow-x: hidden;
}

.trial-shell { position: relative; min-height: 100vh; background: radial-gradient(circle at 15% 12%, rgba(62,231,242,.12), transparent 34%), linear-gradient(120deg, var(--navy), #030814 68%); }
.watercolor-field { position: fixed; inset: -18%; pointer-events: none; z-index: 0; opacity: .8; mix-blend-mode: screen; filter: blur(18px) saturate(130%); background: radial-gradient(ellipse at var(--mx, 18%) 20%, rgba(255,90,106,.32), transparent 24%), radial-gradient(ellipse at 74% var(--my, 36%), rgba(125,92,255,.36), transparent 28%), radial-gradient(ellipse at 45% 72%, rgba(62,231,242,.2), transparent 30%), radial-gradient(ellipse at 82% 82%, rgba(242,227,198,.14), transparent 22%); transition: background-position .2s linear; }
main, .trial-index, .rumor-particles { position: relative; z-index: 2; }

.chapter { min-height: 100vh; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2vw; padding: clamp(28px, 5vw, 78px); overflow: hidden; border-bottom: 1px solid rgba(200,208,218,.13); isolation: isolate; }
.chapter::before { content: attr(data-chapter); position: absolute; top: 3vw; right: 5vw; font-family: "Space Mono", monospace; color: color-mix(in srgb, var(--chapter-accent) 70%, transparent); font-size: clamp(52px, 10vw, 148px); opacity: .18; z-index: -1; }
.chapter::after { content: ""; position: absolute; inset: 8% 7%; border: 1px solid rgba(75,85,104,.35); clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 16% 100%, 0 84%); z-index: -2; }

h1, h2 { font-family: "Bricolage Grotesque", sans-serif; margin: 0; text-transform: uppercase; letter-spacing: -.04em; line-height: .78; color: var(--parchment); }
h1 { grid-column: 1 / 12; align-self: center; font-size: clamp(86px, 18vw, 260px); filter: drop-shadow(0 0 30px rgba(62,231,242,.12)); }
h1 span { display: block; }
h2 { font-size: clamp(58px, 11vw, 170px); color: color-mix(in srgb, var(--chapter-accent) 54%, var(--parchment)); }
p { font-size: clamp(17px, 1.35vw, 24px); line-height: 1.75; }

.chapter-tag, .final-id, .coordinate-stack, .docket-card small, .quote-shard span, .interrogation-grid small, .trial-index a::after, .diagonal-rail { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.chapter-tag { grid-column: 1 / 4; color: var(--cyan); align-self: start; }
.hero-copy { grid-column: 7 / 11; grid-row: 1 / 3; align-self: end; max-width: 520px; color: var(--silver); }
.blade-shard { position: absolute; background: linear-gradient(135deg, #C8D0DA, #4B5568 45%, #F2E3C6 70%, #071126); color: var(--navy); clip-path: polygon(7% 0, 100% 17%, 85% 100%, 0 72%); box-shadow: 0 0 0 1px var(--cyan), 0 30px 90px rgba(0,0,0,.45); font-family: "Space Mono", monospace; }
.title-shard { right: 9vw; top: 36vh; width: min(390px, 34vw); padding: 34px; transform: rotate(-9deg); }
.title-shard b, .title-shard em { display:block; font-style: normal; }
.summons-card { grid-column: 2 / 5; grid-row: 2; align-self: end; padding: 24px; background: rgba(242,227,198,.08); border: 1px solid rgba(255,90,106,.5); backdrop-filter: blur(10px); }
.summons-card strong { display:block; margin-top: 10px; color: var(--parchment); font-size: 1.25rem; }

.memphis-cluster span, .p { position: absolute; display: block; }
.hero-cluster span:nth-child(1) { width: 90px; height: 90px; background: var(--coral); left: 6vw; top: 24vh; clip-path: polygon(50% 0,100% 100%,0 100%); }
.hero-cluster span:nth-child(2) { width: 140px; height: 26px; background: repeating-linear-gradient(90deg, var(--sulfur) 0 18px, transparent 18px 34px); right: 20vw; top: 18vh; transform: rotate(18deg); }
.hero-cluster span:nth-child(3) { width: 110px; height: 55px; border-radius: 90px 90px 0 0; border: 18px solid var(--cyan); left: 46vw; bottom: 14vh; }
.hero-cluster span:nth-child(4) { width: 160px; height: 18px; background: var(--violet); left: 18vw; bottom: 22vh; transform: rotate(-31deg); }

.trial-index { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 20; }
.trial-index a { width: 13px; height: 13px; border: 1px solid var(--silver); transform: rotate(45deg); background: var(--navy); position: relative; }
.trial-index a.active { background: var(--chapter-active, var(--cyan)); box-shadow: 0 0 18px var(--chapter-active, var(--cyan)); }
.trial-index a::after { content: attr(data-label); position: absolute; right: 22px; top: -6px; transform: rotate(-45deg); white-space: nowrap; color: var(--silver); opacity: 0; font-size: 11px; transition: opacity .25s; }
.trial-index a:hover::after { opacity: 1; }

.p { width: 18px; height: 18px; left: var(--x, 50%); top: var(--y, 50%); opacity: .85; transition: transform .9s cubic-bezier(.2,.8,.2,1), border-radius .9s, clip-path .9s; }
.coral { background: var(--coral); } .cyan { background: var(--cyan); } .yellow { background: var(--sulfur); } .violet { background: var(--violet); }
.dot { border-radius: 50%; } .rect { width: 34px; height: 12px; } .dash { width: 48px; height: 7px; } .tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .ring { background: transparent; border: 4px solid var(--cyan); border-radius: 50%; } .semi { border-radius: 999px 999px 0 0; }
body.verdict-mode .p { transform: translate(var(--snap-x), var(--snap-y)) rotate(45deg) scale(.85); border-radius: 0; clip-path: polygon(15% 0,100% 15%,85% 100%,0 82%); }

.editorial h2 { grid-column: 2 / 8; align-self: end; }
.copy-column { grid-column: 2 / 6; align-self: center; }
.quote-shard { grid-column: 7 / 12; align-self: center; margin: 0; padding: 44px; color: var(--navy); background: var(--parchment); clip-path: polygon(0 10%, 88% 0, 100% 76%, 18% 100%); font-size: clamp(25px, 3vw, 48px); line-height: 1.15; box-shadow: inset 0 0 0 2px var(--cyan); }
.quote-shard span { display: block; margin-top: 24px; color: var(--steel); font-size: 12px; }
.vertical-verdict { writing-mode: vertical-rl; font-family: "Syne", sans-serif; font-size: clamp(48px, 7vw, 110px); color: rgba(255,90,106,.72); grid-column: 12; align-self: center; }
.vertical-verdict.left { grid-column: 1; grid-row: 1 / 3; color: rgba(200,208,218,.55); }
.evidence-board { grid-column: 6 / 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: end; font-family: "Space Mono", monospace; color: var(--cyan); }
.evidence-board div { border: 1px solid rgba(62,231,242,.4); padding: 14px; background: rgba(16,26,53,.74); }
.lens-word { position: absolute; left: 16vw; bottom: 12vh; font-family: "Space Mono", monospace; color: var(--cyan); padding: 18px 28px; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 35px rgba(62,231,242,.35); }

.spectral { align-items: center; }
.spectral h2 { grid-column: 2 / 11; z-index: 2; }
.spectral-copy { grid-column: 7 / 11; z-index: 2; background: rgba(7,17,38,.68); padding: 30px; border-left: 2px solid var(--violet); }
.spectral-lens { position: absolute; width: var(--lens-size, 250px); height: var(--lens-size, 250px); border: 3px solid var(--cyan); border-radius: 50%; left: calc(50% - var(--lens-size, 250px)/2); top: calc(50% - var(--lens-size, 250px)/2); backdrop-filter: blur(6px) contrast(135%); box-shadow: inset 0 0 80px rgba(62,231,242,.18), 0 0 90px rgba(125,92,255,.45); z-index: 1; }
.spectral-lens span { position: absolute; inset: 48% auto auto 50%; transform: translate(-50%,-50%); font-family: "Space Mono", monospace; color: var(--cyan); text-transform: uppercase; }
.coordinate-stack { grid-column: 2 / 5; display: grid; gap: 12px; color: var(--silver); z-index: 2; }
.annotation { position: absolute; inset: auto 5vw 12vh auto; width: 42vw; fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(255,90,106,.5)); }

.cross h2 { grid-column: 3 / 12; align-self: start; }
.interrogation-grid { grid-column: 3 / 10; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-self: center; }
.interrogation-grid article { min-height: 260px; padding: 24px; border: 1px solid var(--steel); background: linear-gradient(180deg, rgba(200,208,218,.08), rgba(16,26,53,.75)); }
.interrogation-grid p { font-size: clamp(18px, 1.7vw, 28px); line-height: 1.35; color: var(--parchment); }
.diagonal-rail { position: absolute; left: -8vw; right: -8vw; bottom: 18vh; padding: 16px; background: var(--coral); color: var(--navy); transform: rotate(-8deg); text-align: center; font-weight: 700; }

.verdict { align-items: center; }
.verdict h2 { grid-column: 1 / 7; color: var(--sulfur); }
.verdict-copy { grid-column: 2 / 6; grid-row: 2; }
.verdict-shards { grid-column: 7 / 12; grid-row: 1 / 3; height: 70vh; position: relative; }
.shard { position: absolute; display: grid; place-items: center; font-family: "Syne", sans-serif; color: var(--navy); background: linear-gradient(135deg, #C8D0DA, #4B5568 45%, #F2E3C6 70%, #071126); clip-path: polygon(12% 0, 100% 24%, 78% 100%, 0 68%); border: 1px solid var(--cyan); box-shadow: 0 22px 80px rgba(0,0,0,.5); }
.s1 { width: 330px; height: 170px; left: 5%; top: 8%; transform: rotate(-8deg); }
.s2 { width: 220px; height: 190px; right: 0; top: 28%; transform: rotate(12deg); }
.s3 { width: 260px; height: 150px; left: 18%; bottom: 12%; transform: rotate(19deg); }
.s4 { width: 170px; height: 170px; right: 28%; bottom: 30%; color: var(--sulfur); }

.afterimage { place-items: center; text-align: center; }
.afterimage h2 { grid-column: 2 / 12; }
.afterimage p { grid-column: 4 / 10; max-width: 780px; color: var(--parchment); }
.final-id { grid-column: 1 / 13; color: var(--cyan); }
.constellation { position: absolute; inset: 12% 18%; }
.constellation i { position: absolute; width: 8px; height: 8px; background: var(--silver); border-radius: 50%; box-shadow: 0 0 18px var(--cyan); }
.constellation i:nth-child(1){left:10%;top:42%}.constellation i:nth-child(2){left:25%;top:18%}.constellation i:nth-child(3){left:39%;top:62%}.constellation i:nth-child(4){left:54%;top:28%}.constellation i:nth-child(5){left:68%;top:70%}.constellation i:nth-child(6){left:78%;top:36%}.constellation i:nth-child(7){left:90%;top:54%}
.constellation::before { content:""; position:absolute; inset:0; background: linear-gradient(24deg, transparent 10%, rgba(200,208,218,.25) 10.2%, transparent 10.8% 30%, rgba(62,231,242,.18) 30.2%, transparent 31%), linear-gradient(147deg, transparent 35%, rgba(200,208,218,.2) 35.2%, transparent 36%); }

@media (max-width: 820px) {
  .chapter { display: block; padding: 76px 24px; }
  .trial-index { right: 10px; }
  h1 { font-size: 22vw; }
  h2 { font-size: 18vw; margin-bottom: 24px; }
  .title-shard, .vertical-verdict, .diagonal-rail { display: none; }
  .hero-copy, .copy-column, .spectral-copy, .verdict-copy, .afterimage p { max-width: none; }
  .quote-shard { margin: 28px 0; padding: 28px; }
  .evidence-board, .interrogation-grid { grid-template-columns: 1fr; display: grid; }
  .verdict-shards { height: 520px; }
}