:root {
    --tomato: #F4472F;
    --cyan: #12B5CB;
    --butter: #FFE66D;
    --cream: #FFF4D8;
    --ink: #181414;
    --sepia: #A56A43;
    --pink: #FF8AC7;
    --display: "Bungee", sans-serif;
    --serif: "Fraunces", serif;
    --body: "Nunito Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
}

/* DESIGN FONT NOTE: IBM Plex Mono* Mono** used sparingly for contact-sheet numbering annotations. */

* { box-sizing: border-box; }

html { background: var(--ink); color: var(--ink); }

body {
    margin: 0;
    font-family: var(--body);
    background:
        radial-gradient(circle at 18px 18px, rgba(24,20,20,.12) 2px, transparent 3px) 0 0 / 36px 36px,
        linear-gradient(135deg, var(--cream), #ffeab4);
    overflow-x: hidden;
}

.magazine { position: relative; }

.spread {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    isolation: isolate;
    border-bottom: 8px solid var(--ink);
    background: var(--cream);
    overflow: hidden;
}

.spread::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(244,71,47,.08), transparent 28%, transparent 72%, rgba(18,181,203,.08)),
        radial-gradient(circle, rgba(24,20,20,.08) 1px, transparent 1.5px) 0 0 / 12px 12px;
    mix-blend-mode: multiply;
    z-index: 0;
}

.page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fold-gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 5;
    width: 24px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--ink) 0 14px, var(--butter) 14px 28px);
    border-left: 4px solid var(--tomato);
    border-right: 4px solid var(--cyan);
    box-shadow: 10px 0 0 rgba(244,71,47,.25), -10px 0 0 rgba(18,181,203,.25);
}

.fold-gutter span {
    position: sticky;
    top: 42vh;
    display: block;
    transform: rotate(90deg) translateX(18px);
    transform-origin: center;
    white-space: nowrap;
    font: 700 .72rem/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cream);
    text-shadow: 2px 2px 0 var(--ink);
}

.fold-gutter.dashed { background: repeating-linear-gradient(180deg, var(--cyan) 0 18px, var(--cream) 18px 30px); }
.fold-gutter.pink { background: repeating-linear-gradient(180deg, var(--pink) 0 18px, var(--ink) 18px 32px); }

.cover-spread {
    background:
        linear-gradient(90deg, var(--butter) 0 50%, var(--pink) 50% 100%);
}

.issue-label {
    position: absolute;
    z-index: 6;
    top: 1rem;
    left: 1rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: .8rem .55rem;
    background: var(--ink);
    color: var(--cream);
    font: 700 .75rem/1.1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
}

.animated-frame {
    position: relative;
    border: 5px solid var(--ink);
    box-shadow: 9px 9px 0 var(--cyan), -9px -9px 0 var(--tomato);
}

.cover-frame {
    position: absolute;
    inset: clamp(1rem, 3vw, 2.4rem);
    z-index: 1;
    pointer-events: none;
    border-style: double;
    animation: frameChase 4s linear infinite;
}

.kicker, .annotation {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(4.5rem, 18vw, 15rem);
    line-height: .78;
    letter-spacing: -.07em;
    color: var(--cream);
    text-shadow: 7px 7px 0 var(--ink), 13px 13px 0 var(--cyan), -8px -8px 0 var(--tomato);
}

.hero-copy h1 span { display: block; }

h2 {
    margin: 0 0 1.2rem;
    font-family: var(--serif);
    font-variation-settings: "wght" var(--fluid-weight, 780);
    font-size: clamp(2.6rem, 7.5vw, 7rem);
    line-height: .9;
    max-width: 11ch;
}

p { font-size: clamp(1.05rem, 1.65vw, 1.45rem); line-height: 1.45; max-width: 36rem; }

.deck { font-weight: 900; font-size: clamp(1.2rem, 2vw, 1.8rem); }

.photo-strip {
    display: grid;
    gap: 1rem;
    width: min(34rem, 82%);
    transform: rotate(-4deg) translateY(var(--parallax, 0px));
}

.hero-strip { grid-template-columns: 1fr 1fr; align-items: end; }
.hero-strip .tall-photo { grid-row: span 2; min-height: 30rem; }
.hero-strip .skinny-photo { min-height: 14rem; }

.vintage-photo {
    position: relative;
    margin: 0;
    padding: .7rem .7rem 2.2rem;
    background: var(--cream);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--sepia);
    overflow: hidden;
}

.vintage-photo::after {
    content: "";
    position: absolute;
    inset: .7rem .7rem 2.2rem;
    background: radial-gradient(circle, rgba(24,20,20,.18) 1px, transparent 1.5px) 0 0 / 7px 7px;
    mix-blend-mode: multiply;
}

.photo-scene {
    display: block;
    min-height: 16rem;
    background:
        linear-gradient(135deg, rgba(18,181,203,.62), rgba(244,71,47,.55)),
        radial-gradient(circle at 52% 32%, var(--cream) 0 9%, transparent 10%),
        radial-gradient(circle at 48% 45%, var(--sepia) 0 17%, transparent 18%),
        linear-gradient(145deg, #7d5134, #f0b078);
    filter: sepia(.25) contrast(1.1) saturate(1.35);
}

.scene-street { background: linear-gradient(135deg, rgba(18,181,203,.5), rgba(255,230,109,.45)), repeating-linear-gradient(90deg, #72462f 0 18px, #d49b68 18px 26px, #3c332e 26px 30px); }
.scene-booth, .scene-face-a, .scene-face-b, .scene-face-c { background: radial-gradient(circle at 50% 32%, #f7c996 0 13%, transparent 14%), radial-gradient(circle at 50% 50%, #7b4e32 0 24%, transparent 25%), linear-gradient(135deg, var(--cyan), var(--tomato)); }
.scene-family { min-height: 22rem; background: radial-gradient(circle at 30% 40%, #f2c188 0 11%, transparent 12%), radial-gradient(circle at 55% 35%, #ffe2ad 0 10%, transparent 11%), radial-gradient(circle at 72% 44%, #8a5637 0 12%, transparent 13%), linear-gradient(135deg, var(--sepia), var(--butter)); }
.scene-face-b { filter: hue-rotate(30deg); }
.scene-face-c { filter: hue-rotate(-35deg); }

figcaption {
    position: absolute;
    left: .9rem;
    bottom: .55rem;
    font: 700 .75rem/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bubble-note {
    position: relative;
    display: inline-block;
    padding: 1rem 1.25rem;
    border: 4px solid var(--ink);
    border-radius: 45% 55% 52% 48% / 58% 44% 56% 42%;
    background: var(--cream);
    box-shadow: 6px 6px 0 var(--tomato), -5px -5px 0 var(--cyan);
    font-weight: 900;
}

.bubble-note::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    right: 18%;
    bottom: -16px;
    background: inherit;
    border-right: 4px solid var(--ink);
    border-bottom: 4px solid var(--ink);
    transform: rotate(32deg);
}

.hero-bubble { max-width: 20rem; margin: 1rem 0; background: var(--butter); }
.floating-bubble { position: absolute; z-index: 7; animation: bubbleDrift 5s ease-in-out infinite alternate; }
.bubble-one { left: 44%; top: 20%; background: var(--cyan); }
.bubble-two { right: 8%; bottom: 10%; background: var(--cream); animation-delay: -2s; }

.caption-sticker {
    display: inline-block;
    padding: .75rem 1rem;
    border: 3px solid var(--ink);
    font: 900 1rem/1.1 var(--body);
    transform: rotate(3deg);
    box-shadow: 5px 5px 0 var(--ink);
}
.red-sticker { background: var(--tomato); color: var(--cream); }
.cyan-sticker { background: var(--cyan); color: var(--ink); }

.center-spread { background: linear-gradient(90deg, var(--cream) 0 50%, var(--cyan) 50%); }
blockquote {
    margin: 2rem 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 850;
    line-height: .95;
    color: var(--tomato);
    text-shadow: 3px 3px 0 var(--ink);
}

.halftone-panel {
    padding: 1.3rem;
    border: 5px solid var(--ink);
    background:
        radial-gradient(circle, rgba(24,20,20,.25) 1.5px, transparent 2px) 0 0 / 14px 14px,
        var(--butter);
    box-shadow: 8px 8px 0 var(--ink);
}
.cyan-panel { background-color: var(--cyan); transform: rotate(-2deg); }
.butter-panel { background-color: var(--butter); max-width: 34rem; }

.collage-page { align-items: center; }
.tilted-frame { width: min(36rem, 88%); transform: rotate(5deg); background: var(--cream); padding: 1rem; }
.wide-photo { box-shadow: none; }
.connector-bubble { margin-top: -1rem; margin-left: -8rem; background: var(--pink); z-index: 3; }
.letter-crop {
    position: absolute;
    right: -8vw;
    bottom: -4vw;
    font-family: var(--display);
    font-size: clamp(8rem, 23vw, 21rem);
    color: rgba(255,244,216,.42);
    -webkit-text-stroke: 5px var(--ink);
}

.notes-spread { background: linear-gradient(90deg, var(--pink) 0 50%, var(--cream) 50%); }
.note-grid { display: grid; gap: 1.2rem; max-width: 34rem; }
.note-card { border-radius: 2rem; background: var(--cream); transform: rotate(-2deg); }
.note-card.yellow { background: var(--butter); transform: rotate(2deg); }
.note-card.blue { background: var(--cyan); transform: rotate(-1deg); }
.note-card strong { font-family: var(--display); font-size: 2rem; margin-right: .8rem; }

.booth-page { align-items: center; }
.booth-strip {
    width: min(21rem, 78%);
    padding: 1rem;
    background: var(--ink);
    border: 6px solid var(--cream);
    box-shadow: 10px 10px 0 var(--tomato);
    transform: rotate(3deg) translateY(var(--parallax, 0px));
}
.booth-photo { box-shadow: none; }
.booth-photo .photo-scene { min-height: 12rem; }

.back-page { background: linear-gradient(90deg, var(--cyan) 0 50%, var(--butter) 50%); }
.back-copy h2 { color: var(--cream); text-shadow: 5px 5px 0 var(--ink), 9px 9px 0 var(--tomato); }
.burst-page { align-items: center; gap: 2rem; }
.comic-burst {
    display: grid;
    place-items: center;
    width: min(31rem, 84vw);
    aspect-ratio: 1;
    padding: 2rem;
    background: var(--tomato);
    color: var(--cream);
    font-family: var(--display);
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: .9;
    text-align: center;
    clip-path: polygon(50% 0%, 59% 26%, 85% 12%, 74% 39%, 100% 50%, 74% 61%, 85% 88%, 59% 74%, 50% 100%, 41% 74%, 15% 88%, 26% 61%, 0% 50%, 26% 39%, 15% 12%, 41% 26%);
    filter: drop-shadow(8px 8px 0 var(--ink)) drop-shadow(-7px -7px 0 var(--cyan));
    animation: popPulse 2.5s ease-in-out infinite;
}

.is-visible .animated-frame,
.is-visible.animated-frame { animation: frameChase 2.8s linear infinite; }

.bubble-note:hover { animation: wiggle .38s ease-in-out; }

@keyframes frameChase {
    0% { box-shadow: 9px 9px 0 var(--cyan), -9px -9px 0 var(--tomato); }
    50% { box-shadow: 13px -7px 0 var(--tomato), -12px 8px 0 var(--cyan); }
    100% { box-shadow: 9px 9px 0 var(--cyan), -9px -9px 0 var(--tomato); }
}

@keyframes bubbleDrift {
    from { transform: translateY(0) rotate(-2deg); }
    to { transform: translateY(18px) rotate(3deg); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg) translateY(-2px); }
    75% { transform: rotate(-2deg) translateY(2px); }
}

@keyframes popPulse {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.04) rotate(2deg); }
}

@media (max-width: 820px) {
    .spread { grid-template-columns: 1fr; }
    .page { min-height: auto; padding: 5rem 1.25rem; }
    .fold-gutter { left: auto; right: .9rem; width: 16px; }
    .cover-frame { inset: .6rem; }
    .hero-copy h1 { font-size: clamp(4rem, 24vw, 8rem); }
    .photo-strip { width: 100%; }
    .floating-bubble { display: none; }
    .center-spread, .notes-spread, .back-page, .cover-spread { background: var(--cream); }
    .connector-bubble { margin-left: 0; }
}