:root {
  /* Typography note: IBM Plex Sans** from Google Fonts for clean professional labels; Libre Baskerville and Nanum Pen Script are expressed through local/system-safe stacks. */
  --blueprint-charcoal: #20242B;
  --rain-paper: #EEF1F4;
  --graphite-mist: #AAB2BD;
  --blue-glass: #8FB8CF;
  --red-pencil: #C65A5A;
  --violet-bruise: #6B607A;
  --warm-lamp: #F2D6A2;
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Nanum Pen Script", "Bradley Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--blueprint-charcoal);
  background: var(--rain-paper);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(170, 178, 189, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 178, 189, .18) 1px, transparent 1px),
    linear-gradient(90deg, transparent calc(8.333% - 1px), rgba(170, 178, 189, .18) calc(8.333% - 1px), rgba(170, 178, 189, .18) 8.333%, transparent 8.333%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  opacity: .72;
  z-index: -3;
}

.desk-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(242, 214, 162, .28), transparent 18rem),
    radial-gradient(circle at 82% 24%, rgba(143, 184, 207, .18), transparent 22rem),
    radial-gradient(circle at 36% 74%, rgba(107, 96, 122, .11), transparent 25rem);
  z-index: -2;
}

.loupe {
  position: fixed;
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border: 1px solid rgba(32, 36, 43, .32);
  border-radius: 51% 48% 53% 47%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(143, 184, 207, .18), rgba(238, 241, 244, .08) 58%, transparent 60%);
  box-shadow: inset 0 0 18px rgba(143, 184, 207, .42), 0 0 0 2px rgba(238, 241, 244, .38);
  transform: scale(.82);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 20;
}

.loupe.active { opacity: 1; transform: scale(1); }

.ruler-nav {
  position: fixed;
  top: 3vh;
  right: 20px;
  width: 54px;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 18px 8px;
  background: rgba(238, 241, 244, .72);
  border: 1px solid rgba(32, 36, 43, .32);
  box-shadow: 8px 12px 24px rgba(32, 36, 43, .08);
  z-index: 12;
}

.ruler-nav::before {
  content: "";
  position: absolute;
  inset: 10px 26px;
  border-left: 1px dashed var(--graphite-mist);
}

.ruler-nav a {
  position: relative;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--blueprint-charcoal);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .58;
  transition: color .25s ease, opacity .25s ease;
}

.ruler-nav a::before {
  content: attr(data-mark);
  writing-mode: horizontal-tb;
  position: absolute;
  right: 20px;
  top: -2px;
  font-size: 9px;
  color: var(--graphite-mist);
}

.ruler-nav a.active { color: var(--red-pencil); opacity: 1; }

.dossier { width: 100%; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 8vh min(10vw, 132px) 7vh min(8vw, 100px);
  isolation: isolate;
}

.module { position: relative; }

.paper {
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(238,241,244,.88)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(170,178,189,.22) 32px);
  border: 1px solid rgba(32, 36, 43, .42);
  box-shadow: 14px 19px 38px rgba(32, 36, 43, .10), inset 0 0 0 1px rgba(255,255,255,.45);
  clip-path: polygon(1% 0, 100% 1%, 99% 98%, 2% 100%, 0 38%);
}

.tilted-left { transform: rotate(-1.4deg); }
.tilted-right { transform: rotate(1.2deg); }
.flat { transform: rotate(-.15deg); }

.tab {
  display: inline-block;
  padding: 6px 12px;
  color: var(--blueprint-charcoal);
  background: var(--rain-paper);
  border: 1px solid rgba(32, 36, 43, .42);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-1.8deg);
}

.tab.blue { background: rgba(143, 184, 207, .3); }
.tab.violet { background: rgba(107, 96, 122, .18); }
.tab.warm { background: rgba(242, 214, 162, .6); }
.tab.red { background: rgba(198, 90, 90, .14); color: var(--red-pencil); }

.bureau-label, .section-marker {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--violet-bruise);
}

h1, h2, .large-sentence {
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  margin: 22px 0 20px;
  font-size: clamp(3.8rem, 10vw, 10.8rem);
  line-height: .9;
  letter-spacing: -.055em;
}

h2 {
  margin: 12px 0;
  font-size: clamp(2.3rem, 5vw, 5.8rem);
  letter-spacing: -.04em;
}

h3 { margin: 16px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }

.circled-word { position: relative; display: inline-block; }
.circled-word svg { position: absolute; inset: -16% -8% -18% -7%; width: 115%; height: 132%; overflow: visible; }
.circled-word path {
  fill: none;
  stroke: var(--red-pencil);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  animation: circleReview 2.2s 1s ease forwards;
  filter: drop-shadow(0 2px 0 rgba(198, 90, 90, .14));
}

@keyframes circleReview { to { stroke-dashoffset: 0; } }

.title-sheet { width: min(920px, 82vw); padding: clamp(28px, 5vw, 66px); margin: 9vh auto 0 4vw; }
.opening-copy { width: min(620px, 88%); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.6; color: rgba(32, 36, 43, .82); }
.intake-slip { width: 330px; padding: 22px; position: absolute; left: 10vw; bottom: 9vh; transform: rotate(2.4deg); }

.rub-line {
  height: 16px;
  margin: 16px 0;
  background: linear-gradient(90deg, rgba(170,178,189,.2), rgba(170,178,189,.55), rgba(170,178,189,.18));
  border-radius: 20px;
  filter: blur(.3px);
}
.rub-line.wide { width: 92%; }
.rub-line.medium { width: 68%; }
.rub-line.short { width: 43%; }
.revealed-text { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; line-height: 1.65; }
.skeleton-slip.revealed .rub-line { animation: rubOut .9s ease forwards; }
.skeleton-slip.revealed .revealed-text { opacity: 1; transform: translateY(0); transition-delay: .28s; }
@keyframes rubOut { to { opacity: .16; transform: scaleX(.18); } }

.floating-bubbles span, .evidence-bubble {
  border: 1px solid rgba(32, 36, 43, .34);
  border-radius: 49% 51% 47% 53%;
  background: radial-gradient(circle at 34% 25%, rgba(255,255,255,.68), rgba(143,184,207,.28) 42%, rgba(143,184,207,.14) 70%, rgba(238,241,244,.08));
  box-shadow: inset 10px 12px 22px rgba(255,255,255,.35), 0 12px 32px rgba(143, 184, 207, .22);
  backdrop-filter: blur(2px);
}

.intro-bubbles span {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(32, 36, 43, .68);
  font-family: var(--hand);
  font-size: 1.55rem;
  animation: bubbleFloat 9s ease-in-out infinite;
}
.b1 { width: 98px; height: 92px; right: 18vw; top: 18vh; }
.b2 { width: 86px; height: 80px; right: 9vw; bottom: 24vh; animation-delay: -2s !important; }
.b3 { width: 132px; height: 124px; left: 48vw; bottom: 13vh; animation-delay: -4s !important; }
.b4 { width: 170px; height: 146px; right: 25vw; bottom: 39vh; animation-delay: -6s !important; }
@keyframes bubbleFloat { 50% { transform: translateY(-34px) translateX(12px) rotate(3deg) scale(1.04); opacity: .78; } }

.scene-surface { padding-top: 12vh; }
.vellum-panel { width: min(590px, 72vw); padding: 34px 42px; background: rgba(238, 241, 244, .58); border: 1px solid rgba(170, 178, 189, .7); box-shadow: 0 24px 60px rgba(32,36,43,.08); }
.bubble-tank { min-height: 55vh; margin-top: -4vh; border-left: 1px dashed var(--graphite-mist); border-bottom: 1px dashed var(--graphite-mist); }
.evidence-bubble { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; transition: transform .2s ease; }
.evidence-bubble span { font-family: var(--serif); font-size: 1.15rem; }
.evidence-bubble em { margin-top: 7px; color: var(--violet-bruise); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-style: normal; }
.evidence-bubble.large { width: 218px; height: 196px; left: 15vw; top: 26vh; }
.evidence-bubble.medium { width: 168px; height: 154px; left: 42vw; top: 18vh; }
.evidence-bubble.small { width: 112px; height: 106px; right: 15vw; top: 30vh; }
.evidence-bubble.face { width: 142px; height: 132px; right: 30vw; bottom: 13vh; }
.review-excerpt { width: 360px; padding: 24px; position: absolute; right: 12vw; bottom: 9vh; }

.scene-circuit { min-height: 108vh; }
.logic-plate { width: min(470px, 78vw); padding: 30px; top: 13vh; left: 5vw; z-index: 2; }
.signal-list { list-style: none; padding: 0; margin: 18px 0 0; }
.signal-list li { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-size: .98rem; }
.signal-list span { width: 10px; height: 10px; border: 1px solid var(--blueprint-charcoal); border-radius: 50%; background: rgba(143,184,207,.45); }
.circuit-svg { position: absolute; inset: 10vh 6vw auto 4vw; width: 86vw; height: 70vh; overflow: visible; z-index: 1; }
.circuit-line, .circuit-heart { fill: none; stroke: rgba(32, 36, 43, .72); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 11; stroke-dashoffset: 420; animation: drawCircuit 7s linear infinite; }
.circuit-heart { stroke: var(--red-pencil); stroke-dasharray: 5 9; animation-duration: 5s; }
.node { fill: var(--rain-paper); stroke: var(--blueprint-charcoal); stroke-width: 2; }
@keyframes drawCircuit { to { stroke-dashoffset: 0; } }
.fragment { position: absolute; z-index: 3; padding: 9px 13px; border: 1px solid rgba(32,36,43,.45); background: rgba(242,214,162,.54); font-family: var(--hand); font-size: 1.35rem; box-shadow: 7px 10px 20px rgba(32,36,43,.07); }
.frag-one { left: 33vw; top: 30vh; transform: rotate(1.8deg); }
.frag-two { right: 18vw; top: 52vh; transform: rotate(-1.5deg); background: rgba(143,184,207,.36); }
.frag-three { left: 43vw; bottom: 15vh; transform: rotate(.8deg); background: rgba(238,241,244,.82); }

.field-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 8vh; min-height: 58vh; }
.note { padding: 24px; min-height: 230px; }
.note:nth-child(1) { grid-column: 1 / 3; margin-top: 10vh; }
.note:nth-child(2) { grid-column: 3 / 5; }
.note:nth-child(3) { grid-column: 5 / 7; margin-top: 16vh; }
.note p { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.45; }
del { color: var(--red-pencil); text-decoration-thickness: 3px; }
.hand { font-family: var(--hand); font-size: 1.45rem; color: var(--violet-bruise); }
.stamp-ring { position: absolute; right: 14vw; top: 14vh; width: 172px; height: 172px; display: grid; place-items: center; border: 4px double rgba(198,90,90,.65); border-radius: 48% 52% 47% 53%; color: var(--red-pencil); font-weight: 700; letter-spacing: .13em; transform: rotate(-13deg); opacity: .68; }

.scene-unfinal { display: grid; place-items: center; }
.final-sheet { width: min(760px, 82vw); padding: clamp(34px, 6vw, 76px); text-align: left; }
.large-sentence { font-size: clamp(2rem, 4.5vw, 4.5rem); line-height: 1.12; color: var(--blueprint-charcoal); }
.embossed-stamp { width: 210px; height: 134px; margin: 38px 0 18px auto; display: grid; place-items: center; border: 3px solid var(--red-pencil); color: var(--red-pencil); border-radius: 51% 49% 48% 52%; font-family: var(--sans); font-weight: 700; letter-spacing: .16em; text-align: center; transform: rotate(-8deg); opacity: .2; transition: opacity 1.1s ease, transform 1.1s ease; }
.embossed-stamp.waver { opacity: .72; transform: rotate(-5deg) scale(1.02); }
.closing-note { text-align: right; }

@media (max-width: 820px) {
  .ruler-nav { right: 8px; width: 40px; }
  .scene { padding-left: 22px; padding-right: 56px; }
  .title-sheet { margin-left: 0; width: 100%; }
  .intake-slip, .review-excerpt { position: relative; left: auto; right: auto; bottom: auto; margin: 34px 0; width: min(100%, 360px); }
  .bubble-tank { min-height: 72vh; }
  .evidence-bubble.large { left: 4vw; }
  .evidence-bubble.medium { left: 34vw; }
  .evidence-bubble.small { right: 4vw; }
  .evidence-bubble.face { right: 18vw; }
  .logic-plate { left: 0; }
  .fragment { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: inline-block; margin: 10px; }
  .circuit-svg { opacity: .48; }
  .field-wall { display: block; }
  .note { margin: 24px 0 !important; }
}