:root {
  --parchment: #f4ead5;
  --archive: #1a1a1e;
  --violet: #7b2d8e;
  --ochre: #c4a035;
  --vermillion: #d4573b;
  --charcoal: #2c2a28;
  --faded: #6b6560;
  --green: #4a6b45;
  --highlight: #e8dcc8;
  --darkText: #c9bfad;
  --cursor-x: 50%;
  --cursor-y: 50%;
}

/* Compliance typography references: Interaction* Interaction: Interaction:** IntersectionObserver. enters (Google Playfair-Elegant Typographic Collision playfair-elegant frequency appears only tiny roles. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--archive); color: var(--charcoal); overflow: hidden; }

body { font-family: "Cormorant Garamond", Georgia, serif; }

.magazine { height: 100vh; width: 100vw; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: auto; }

.spread { position: relative; min-height: 100vh; width: 100vw; scroll-snap-align: start; overflow: hidden; }

.parchment {
  background-color: var(--parchment);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cg transform='rotate(-22 180 90)' opacity='.08' fill='%236b6560' font-family='monospace' font-size='12' letter-spacing='2'%3E%3Ctext x='-60' y='45'%3ECLASSIFIED // DIPLOMATIC.WIKI // CONFIDENTIAL%3C/text%3E%3Ctext x='-20' y='110'%3ECLASSIFIED // DIPLOMATIC.WIKI // CONFIDENTIAL%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 20% 10%, #e8dcc8 0 9%, transparent 26%),
    radial-gradient(circle at 86% 74%, rgba(196,160,53,.16), transparent 24%);
}

h1, h2 { font-family: "Playfair Display", Georgia, serif; margin: 0; color: var(--archive); letter-spacing: .02em; line-height: 1.05; font-weight: 900; }
h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
p { font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.75; margin: 0 0 1.3em; }
.cable-text::first-line, .document-panel p::first-line { text-indent: 2em; }
.utility { font-family: "Space Mono", monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faded); margin-bottom: 1.2rem; }
.annotation { font-family: "Permanent Marker", cursive; font-size: clamp(1.2rem, 2.5vw, 2.2rem); letter-spacing: -.01em; line-height: 1.1; margin: .4em 0 .8em; }
.violet { color: var(--violet); transform: rotate(-3deg); }
.ochre { color: var(--ochre); transform: rotate(3deg); }
.vermillion { color: var(--vermillion); transform: rotate(-2deg); display: block; }

.spread-cover { display: grid; place-items: center; padding: 7vw; }
.folder { position: relative; width: min(78vw, 1060px); min-height: 68vh; padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(135deg, #f4ead5, #dfcfad 52%, #cdb98f); border-radius: 8px 18px 14px 8px; box-shadow: 0 32px 70px rgba(26,26,30,.42), inset 0 0 0 2px rgba(107,101,96,.24); transform: rotate(-1.2deg); }
.folder-tab { position: absolute; top: -2rem; left: 8%; padding: .7rem 3rem; background: #dfcfad; border-radius: 14px 14px 0 0; font: .75rem "Space Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--faded); }
.stamp { display: inline-block; border: 4px double var(--vermillion); color: var(--vermillion); padding: .55rem .9rem; transform: rotate(-4deg); font: .8rem "Space Mono", monospace; text-transform: uppercase; letter-spacing: .15em; }
.spray-title { position: relative; margin-top: 12vh; font-family: "Permanent Marker", cursive; font-size: clamp(4rem, 10vw, 8rem); color: transparent; background: repeating-conic-gradient(from 18deg, var(--violet) 0 8deg, #642572 8deg 12deg, var(--violet) 12deg 20deg); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 13px rgba(123,45,142,.3)); clip-path: inset(0 100% 0 0); animation: sprayReveal 1.5s .35s forwards cubic-bezier(.2,.7,.1,1); }
.spray-title::before, .spray-title::after { content: ""; position: absolute; inset: -18px; background: radial-gradient(circle, rgba(123,45,142,.35) 0 2px, transparent 3px); background-size: 23px 17px; opacity: .55; z-index: -1; }
.spray-title::after { transform: translate(35px, -12px); opacity: .25; }
.cover-note { max-width: 38rem; color: var(--charcoal); }
.wax-seal { position: absolute; right: 9%; bottom: 9%; width: 92px; height: 92px; display: grid; place-items: center; color: #f4ead5; background: radial-gradient(circle at 32% 28%, #e47a61, var(--vermillion) 43%, #9f321f); border-radius: 46% 54% 48% 52%; box-shadow: inset 0 5px 12px rgba(244,234,213,.22), inset 0 -10px 18px rgba(26,26,30,.22), 0 10px 18px rgba(26,26,30,.22); font-family: "Space Mono", monospace; text-transform: uppercase; font-size: .8rem; }
.wax-seal.small { position: relative; right: auto; bottom: auto; width: 70px; height: 70px; margin-top: 2rem; }
.paint-arrow { position: absolute; left: 50%; bottom: -6vh; height: 72px; width: 7px; background: var(--vermillion); border-radius: 10px; animation: drip 1.9s infinite; }
.paint-arrow span { position: absolute; left: -13px; bottom: -6px; border: 16px solid transparent; border-top-color: var(--vermillion); }

.fern { position: absolute; width: 340px; height: 500px; pointer-events: none; transform-origin: bottom center; opacity: .82; }
.fern::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 92%; background: linear-gradient(var(--ochre), var(--green)); border-radius: 10px; transform: translateX(-50%) rotate(-10deg); }
.fern i { position: absolute; left: 50%; bottom: calc(28px + var(--n, 0) * 38px); width: 118px; height: 42px; background: radial-gradient(ellipse at 25% 50%, #6c8a55, var(--green) 68%, transparent 70%); border-radius: 100% 0 100% 0; transform-origin: 0 50%; opacity: 0; animation: unfurl .8s forwards; animation-delay: calc(var(--n, 0) * .1s); }
.fern i:nth-child(1){--n:1; transform: rotate(-44deg) scale(.55)} .fern i:nth-child(2){--n:2; transform: rotate(36deg) scale(.6)} .fern i:nth-child(3){--n:3; transform: rotate(-41deg) scale(.68)} .fern i:nth-child(4){--n:4; transform: rotate(34deg) scale(.75)} .fern i:nth-child(5){--n:5; transform: rotate(-35deg) scale(.82)} .fern i:nth-child(6){--n:6; transform: rotate(31deg) scale(.88)} .fern i:nth-child(7){--n:7; transform: rotate(-29deg) scale(.92)} .fern i:nth-child(8){--n:8; transform: rotate(25deg) scale(.78)} .fern i:nth-child(9){--n:9; transform: rotate(-20deg) scale(.62)} .fern i:nth-child(10){--n:10; transform: rotate(18deg) scale(.5)}
.fern-cover { right: -70px; top: 4vh; transform: rotate(-28deg); }

.spread-cable { display: grid; grid-template-columns: 38% 62%; align-items: stretch; }
.document-panel { position: relative; background: rgba(244,234,213,.88); padding: clamp(2rem, 4vw, 4.5rem); box-shadow: inset 0 0 0 1px rgba(107,101,96,.18); }
.cable-redacted { border-right: 1px solid rgba(107,101,96,.35); background-image: repeating-linear-gradient(transparent, transparent 1.9rem, #c9bfad33 1.9rem, #c9bfad33 2rem); }
.decoded-panel { padding-left: 9vw; overflow: hidden; }
.decoded-panel::after { content: ""; position: absolute; inset: 12% 5% auto auto; width: 260px; height: 130px; background: radial-gradient(circle, rgba(196,160,53,.22), transparent 65%); transform: rotate(-12deg); }
.redaction { background: var(--charcoal); color: transparent; padding: 0 .15em; transition: background .8s ease-out, color .8s ease-out, text-shadow .8s ease-out; cursor: pointer; }
.redaction.revealed { background: transparent; color: var(--violet); text-shadow: 0 0 8px rgba(123,45,142,.3); }
.ivy { position: absolute; left: 35.7%; top: 0; height: 100%; width: 12vw; z-index: 4; overflow: visible; }
.ivy path { fill: none; stroke: var(--green); stroke-width: 4; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.7s cubic-bezier(.25,.1,.25,1); }
.ivy .ivy-leaves path { fill: rgba(74,107,69,.86); stroke: none; opacity: 0; transition: opacity .9s ease 1.4s; }
.spread.in-view .ivy path { stroke-dashoffset: 0; }
.spread.in-view .ivy .ivy-leaves path { opacity: 1; }

.spread-wall { background: #272421; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); padding: 5vh 5vw; color: var(--highlight); }
.concrete-noise { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(244,234,213,.08), transparent 18%), radial-gradient(circle at 74% 62%, rgba(123,45,142,.16), transparent 22%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px); }
.poster { position: relative; padding: clamp(1.2rem, 2.5vw, 2.3rem); background: var(--parchment); color: var(--charcoal); box-shadow: 0 18px 34px rgba(0,0,0,.35); clip-path: polygon(1% 4%, 97% 0, 100% 94%, 4% 100%); }
.poster h2 { font-size: clamp(2rem, 4vw, 4.5rem); }
.treaty { grid-column: 1 / 6; grid-row: 1 / 5; transform: rotate(-3deg); z-index: 2; }
.symbol { grid-column: 5 / 11; grid-row: 1 / 4; transform: rotate(2.2deg); background: linear-gradient(130deg, var(--violet), #38173f); color: var(--highlight); z-index: 4; }
.giant-tag { font: clamp(4rem, 10vw, 8rem)/.9 "Permanent Marker", cursive; color: var(--ochre); }
.botanical-plate { grid-column: 8 / 13; grid-row: 3 / 8; transform: rotate(-2deg); z-index: 3; }
.cipher { grid-column: 2 / 7; grid-row: 5 / 9; transform: rotate(3deg); z-index: 5; border: 12px solid transparent; background-image: linear-gradient(var(--parchment), var(--parchment)), radial-gradient(circle at 10% 10%, rgba(107,101,96,.3) 0 2px, transparent 3px), linear-gradient(90deg, transparent 49%, rgba(107,101,96,.3) 50%, transparent 51%); background-origin: border-box; background-clip: padding-box, border-box, border-box; }
.protest { grid-column: 6 / 10; grid-row: 6 / 9; transform: rotate(-4deg); z-index: 6; background: #d8c49c; }
.pressed-flower { height: 220px; position: relative; filter: saturate(.7); }
.pressed-flower span { position: absolute; left: 45%; top: 18%; width: 42px; height: 110px; background: rgba(74,107,69,.44); clip-path: ellipse(40% 50% at 50% 50%); mix-blend-mode: multiply; transform-origin: bottom center; }
.pressed-flower span:nth-child(1){transform: rotate(-48deg)} .pressed-flower span:nth-child(2){transform: rotate(-12deg)} .pressed-flower span:nth-child(3){transform: rotate(21deg)} .pressed-flower span:nth-child(4){transform: rotate(54deg)}

.spread-greenhouse { display: grid; place-items: center; }
.archive-document { width: 60vw; min-height: 74vh; background-image: repeating-linear-gradient(transparent, transparent 1.9rem, #c9bfad33 1.9rem, #c9bfad33 2rem); z-index: 2; }
.forest { bottom: -70px; opacity: .65; z-index: 3; }
.forest.one { left: 4vw; transform: rotate(8deg) scale(1.05); }
.forest.two { right: 3vw; transform: rotate(-18deg) scale(1.2); }

.spread-cipher { background: var(--archive); color: var(--darkText); display: grid; place-items: center; }
.dark-grid { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(123,45,142,.12), transparent 30%), linear-gradient(rgba(107,101,96,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(107,101,96,.16) 1px, transparent 1px); background-size: auto, 64px 64px, 64px 64px; }
.cipher-content { position: relative; width: min(760px, 78vw); padding: 4rem; color: var(--archive); background: rgba(244,234,213,.9); border: 1px solid rgba(232,220,200,.3); mask-image: radial-gradient(circle var(--flash-radius, 180px) at var(--cursor-x) var(--cursor-y), #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(circle var(--flash-radius, 180px) at var(--cursor-x) var(--cursor-y), #000 0%, transparent 100%); animation: flashlightPulse 2s infinite alternate ease-in-out; }
.cipher-coordinates { position: absolute; left: 2rem; bottom: 2rem; font: .75rem "Space Mono", monospace; letter-spacing: .12em; color: var(--faded); text-transform: uppercase; }

@keyframes sprayReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes drip { 0%,100% { transform: translateY(0); height: 72px; } 50% { transform: translateY(13px); height: 92px; } }
@keyframes unfurl { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
@keyframes flashlightPulse { from { --flash-radius: 180px; } to { --flash-radius: 200px; } }

@media (max-width: 760px) {
  .spread-cable { grid-template-columns: 1fr; }
  .document-panel { padding: 2rem; }
  .ivy { left: auto; right: -2rem; }
  .archive-document { width: 86vw; }
  .poster { grid-column: 1 / 13 !important; }
  .treaty { grid-row: 1 / 3; } .symbol { grid-row: 3 / 4; } .botanical-plate { grid-row: 4 / 6; } .cipher { grid-row: 6 / 8; } .protest { grid-row: 8 / 9; }
}