:root {
  --font-source-note: "from Google Fonts";
  --ink: #1E1B18;
  --manila: #D8C7A5;
  --moss: #6F7354;
  --teal: #47706B;
  --persimmon: #B7664A;
  --violet: #75637A;
  --bone: #F3EBDD;
  --shadow: rgba(30, 27, 24, .28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--ink);
  font-family: "Noto Sans", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  background-image: radial-gradient(var(--ink) .65px, transparent .7px), radial-gradient(var(--bone) .45px, transparent .5px);
  background-size: 17px 19px, 29px 31px;
  mix-blend-mode: multiply;
}

.dossier { position: relative; }

.panel {
  position: relative;
  min-height: 100vh;
  padding: clamp(38px, 6vw, 92px);
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: -1;
}

.green-room {
  background: var(--manila);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  grid-template-columns: .9fr 1.1fr;
  align-items: end;
  margin-bottom: -10vh;
  padding-bottom: 16vh;
}

.green-room::before {
  width: 72vw;
  height: 52vh;
  right: -18vw;
  top: 8vh;
  transform: rotate(-14deg);
  border: 1px solid rgba(71, 112, 107, .34);
  background: repeating-linear-gradient(112deg, transparent 0 28px, rgba(71, 112, 107, .18) 29px 31px);
}

.panel-tag,
.mono,
.paper-note span,
.tape,
.pulse-tags,
.night-notes,
.stamp {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .02em;
}

.panel-tag {
  position: absolute;
  top: 34px;
  left: 42px;
  color: var(--teal);
  transform: rotate(-4deg);
}

.stamp {
  position: absolute;
  right: 9vw;
  bottom: 16vh;
  border: 2px solid var(--persimmon);
  color: var(--persimmon);
  padding: 10px 16px;
  transform: rotate(-9deg);
  font-size: clamp(15px, 2vw, 26px);
  text-transform: uppercase;
  background: rgba(243, 235, 221, .4);
}

h1, h2 {
  margin: 0;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(52px, 9vw, 132px); }
h2 { font-size: clamp(42px, 7vw, 98px); }

p { font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; }

.slanted-title {
  max-width: 790px;
  transform: rotate(-3deg) skewX(-5deg);
  padding: 24px;
  background: rgba(243, 235, 221, .38);
  border-left: 7px solid var(--persimmon);
  box-shadow: 18px 22px 0 rgba(71, 112, 107, .16);
}

.slanted-title > * { transform: skewX(5deg); }
.mono { color: var(--persimmon); font-size: 14px; text-transform: uppercase; }
.lead { max-width: 640px; }

.line-art, .wave-art, .closing-crystal svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rig-art {
  color: var(--teal);
  width: min(58vw, 720px);
  justify-self: end;
  align-self: center;
  filter: drop-shadow(12px 14px 0 rgba(117, 99, 122, .15));
}

.draw-on-view path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.65s ease-out;
}

.draw-on-view.drawn path { stroke-dashoffset: 0; }

.tape {
  position: absolute;
  right: 26vw;
  top: 16vh;
  padding: 9px 18px;
  background: rgba(183, 102, 74, .22);
  color: var(--ink);
  transform: rotate(8deg);
}

.mascot { position: absolute; right: 5vw; top: 42vh; color: var(--violet); font-size: 80px; opacity: .38; }

.schedule {
  background: var(--bone);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  grid-template-columns: .75fr 1.25fr;
  gap: 5vw;
  align-items: center;
  margin-bottom: -10vh;
  padding-top: 18vh;
  padding-bottom: 18vh;
}

.schedule::before {
  left: 11vw;
  top: 0;
  width: 3px;
  height: 120%;
  background: var(--persimmon);
  transform: rotate(61deg);
  box-shadow: 0 0 0 8px rgba(183, 102, 74, .08);
}

.section-copy { transform: rotate(2deg); max-width: 620px; }
.timeline-fracture { position: relative; min-height: 640px; }
.timeline-fracture::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--teal);
  transform: rotate(22deg);
}

.paper-note {
  position: absolute;
  width: min(310px, 36vw);
  padding: 20px 22px 30px;
  background: var(--manila);
  border: 1px solid rgba(30, 27, 24, .3);
  box-shadow: 10px 12px 0 rgba(30, 27, 24, .12);
  transition: transform .22s ease, box-shadow .22s ease;
  clip-path: polygon(2% 0, 100% 3%, 97% 94%, 6% 100%, 0 48%);
}

.paper-note::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 35%;
  width: 74px;
  height: 21px;
  background: rgba(71, 112, 107, .28);
  transform: rotate(-3deg);
}

.paper-note b { display: block; font-size: 24px; margin: 10px 0 7px; }
.paper-note em { display: block; font-style: normal; line-height: 1.35; }
.paper-note small { display: block; color: var(--persimmon); margin-top: 12px; opacity: 0; transform: translateY(8px); transition: .22s ease; }
.paper-note:hover { transform: scale(1.035) rotate(0deg); box-shadow: 16px 18px 0 rgba(183, 102, 74, .18); z-index: 4; }
.paper-note:hover small { opacity: 1; transform: translateY(0); }
.n1 { left: 8%; top: 2%; transform: rotate(-5deg); }
.n2 { right: 8%; top: 19%; transform: rotate(4deg); }
.n3 { left: 18%; top: 51%; transform: rotate(2deg); }
.n4 { right: 3%; top: 68%; transform: rotate(-6deg); }

.cabinet {
  color: var(--bone);
  background: var(--ink);
  clip-path: polygon(0 0, 100% 12%, 100% 91%, 0 100%);
  grid-template-columns: .7fr 1.3fr;
  gap: 5vw;
  align-items: center;
  margin-bottom: -9vh;
  padding-top: 16vh;
  padding-bottom: 16vh;
}

.cabinet::before {
  inset: 12vh 5vw 10vh auto;
  width: 50vw;
  border: 1px solid rgba(216, 199, 165, .22);
  transform: skewX(-13deg);
}

.drawer-stack { display: grid; gap: 18px; transform: rotate(-2deg); }
.drawer {
  appearance: none;
  border: 1px solid rgba(243, 235, 221, .28);
  color: var(--bone);
  text-align: left;
  padding: 24px 32px;
  background: var(--violet);
  font-family: "Noto Sans", sans-serif;
  cursor: pointer;
  clip-path: polygon(0 12%, 94% 0, 100% 82%, 8% 100%);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}
.drawer:nth-child(2n) { background: var(--teal); transform: translateX(6vw); }
.drawer:nth-child(3) { background: var(--moss); transform: translateX(2vw); }
.drawer span { display: block; font-family: "Atkinson Hyperlegible", sans-serif; font-size: clamp(26px, 3vw, 45px); font-weight: 800; letter-spacing: -.04em; }
.drawer small { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: .24s ease; font-size: 16px; color: var(--bone); }
.drawer:hover, .drawer.open { transform: scale(1.03) translateX(1vw); box-shadow: 17px 19px 0 rgba(183, 102, 74, .3); background: var(--persimmon); }
.drawer.open small, .drawer:hover small { max-height: 80px; opacity: 1; margin-top: 9px; }
.crystal-labels { position: absolute; right: 6vw; bottom: 15vh; display: flex; gap: 14px; flex-wrap: wrap; }
.crystal-labels span { border: 1px solid var(--bone); padding: 14px 18px; transform: skewX(-18deg) rotate(-5deg); color: var(--bone); font-family: "IBM Plex Mono", monospace; }

.signal {
  background: var(--teal);
  color: var(--bone);
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 87%);
  align-items: center;
  margin-bottom: -9vh;
}
.signal-band {
  border-top: 2px solid rgba(243, 235, 221, .45);
  border-bottom: 2px solid rgba(243, 235, 221, .45);
  padding: 8vh 0;
  transform: rotate(2deg);
}
.wave-art { width: 100%; height: 42vh; color: var(--bone); margin: 2vh 0; }
.wave-art .main { stroke: var(--manila); stroke-width: 7; }
.wave-art .ghost { stroke: var(--ink); opacity: .55; stroke-width: 4; }
.pulse-tags { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pulse-tags span { padding: 10px 13px; background: rgba(30, 27, 24, .3); }

.archive {
  background: var(--manila);
  color: var(--ink);
  clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 100%);
  grid-template-columns: 1fr .7fr;
  gap: 6vw;
  align-items: center;
  padding-top: 18vh;
}
.archive-card {
  max-width: 860px;
  padding: clamp(28px, 4vw, 60px);
  background: var(--bone);
  clip-path: polygon(1% 0, 99% 2%, 96% 92%, 84% 100%, 2% 96%);
  box-shadow: 20px 22px 0 rgba(111, 115, 84, .2);
}
.closing-crystal { display: flex; align-items: center; gap: 26px; color: var(--violet); font-family: "IBM Plex Mono", monospace; }
.closing-crystal svg { width: 160px; stroke-width: 4; }
.night-notes { display: grid; gap: 18px; transform: rotate(5deg); }
.night-notes span { background: rgba(183, 102, 74, .2); border-left: 5px solid var(--persimmon); padding: 18px 22px; }

.fault-line {
  position: fixed;
  top: 0;
  left: 50%;
  width: 120px;
  height: 100vh;
  z-index: 12;
  pointer-events: none;
  transform: translateX(-50%) rotate(7deg);
  opacity: .72;
  transition: transform .16s linear;
}
.fault-line svg { width: 100%; height: 100%; overflow: visible; }
.fault-line path { fill: none; stroke: var(--persimmon); stroke-width: 3; stroke-dasharray: 18 16; }

@media (max-width: 860px) {
  .panel { padding: 34px 22px; }
  .green-room, .schedule, .cabinet, .archive { grid-template-columns: 1fr; }
  .rig-art { width: 100%; }
  .timeline-fracture { min-height: 820px; }
  .paper-note { width: 76vw; }
  .n1, .n2, .n3, .n4 { left: 7%; right: auto; }
  .n2 { top: 25%; } .n3 { top: 49%; } .n4 { top: 72%; }
  .drawer:nth-child(2n), .drawer:nth-child(3) { transform: none; }
  .stamp { position: relative; right: auto; bottom: auto; width: max-content; margin-top: 30px; }
  .fault-line { left: 86%; opacity: .45; }
}