:root {
    --ink: #171814;
    --paper: #f6f0dd;
    --acid: #dfeb83;
    --red: #ef492d;
    --mx: 0;
    --my: 0
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Arial, Helvetica, sans-serif
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

button {
    border: 0
}

a {
    color: inherit
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 5px
}

button:disabled {
    cursor: default
}

img {
    max-width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none
}

.skip-link {
    position: fixed;
    z-index: 100;
    left: 15px;
    top: -90px;
    background: white;
    padding: 16px
}

.skip-link:focus {
    top: 10px
}

.masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    padding: 24px 3.1%;
    display: flex;
    align-items: center;
    gap: 28px;
    z-index: 50;
    pointer-events: none
}

.masthead>* {
    pointer-events: auto
}

.brand {
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-weight: 900;
    line-height: .79;
    letter-spacing: -2px;
    font-size: 36px;
    text-decoration: none;
    transform: rotate(-4deg);
    display: flex;
    flex-direction: column;
    position: relative
}

.brand-dot {
    position: absolute;
    top: 1px;
    right: -14px;
    font: 14px Arial;
    letter-spacing: 0
}

.edition {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.65;
    letter-spacing: .5px
}

.edition span {
    font-size: 10px;
    letter-spacing: 1.3px
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 17px 23px;
    border-radius: 3px;
    min-height: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    transition: background .2s, transform .2s;
    line-height: 1.3
}

.pill span {
    font-size: 21px;
    line-height: 1
}

.pill.dark {
    background: var(--ink);
    color: var(--paper)
}

.pill:hover {
    background: var(--red);
    transform: translateY(-3px)
}

.icon-button {
    display: flex;
    gap: 9px;
    align-items: center;
    background: rgba(246, 240, 221, .82);
    font-size: 11px;
    font-weight: bold;
    min-height: 42px;
    padding: 10px
}

.icon-button {
    font-size: 20px
}

.journey {
    height: 620vh;
    position: relative
}

.stage {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    overflow: hidden
}

.track {
    display: flex;
    height: 100%;
    width: 500%;
    will-change: transform
}

.scene {
    width: 20%;
    height: 100%;
    flex: none;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.scene-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -5;
    transform: scale(1.035)
}

.bg-lab {
    background-image: url('assets/laboratorium.webp');
    filter: saturate(.7) brightness(1.05)
}

.bg-garden {
    background-image: url('assets/ogrod.webp')
}

.bg-space {
    background-image: url('assets/statek.webp')
}

.bg-town {
    background-image: url('assets/torun.webp')
}

.paper-glow {
    position: absolute;
    inset: 0;
    z-index: -4;
    background: linear-gradient(90deg, rgba(238, 234, 191, .95) 0%, rgba(238, 234, 191, .82) 22%, rgba(238, 234, 191, .2) 50%, transparent 70%)
}

.chapter-label {
    position: absolute;
    left: 3.2%;
    top: 137px;
    font: 11px 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 1.3px;
    padding-bottom: 10px;
    border-bottom: 1px solid currentColor;
    z-index: 15
}

.hero-copy {
    position: absolute;
    left: 7.5%;
    top: 25%;
    z-index: 10
}

.eyebrow {
    font: 11px 'Courier New', monospace;
    letter-spacing: 1.2px;
    font-weight: bold;
    margin: 0 0 15px
}

h1,
h2 {
    margin: 0;
    font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif;
    letter-spacing: -.035em;
    line-height: .95;
    font-weight: 900
}

h1 {
    font-size: clamp(70px, min(7.8vw, 13vh), 145px)
}

h1>span,
h2>span {
    display: block;
    width: max-content;
    max-width: 100%
}

.tilted {
    transform: rotate(-4deg);
    background: var(--acid);
    padding: 1px 12px 5px;
    margin-left: -10px;
    margin-top: 3px;
    box-shadow: 2px 5px 0 rgba(0, 0, 0, .07)
}

h1 .tilted {
    background: var(--red);
    color: var(--paper);
    /* width: 50%; */
    width: fit-content;
}

.intro,
.garden-copy p:not(.eyebrow),
.product-copy p:not(.eyebrow),
.battle-copy p:not(.eyebrow),
.final-copy p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.5;
    margin: 25px 0 20px;
    width: fit-content;
}

.layer {
    position: absolute;
    transform: translate3d(calc(var(--mx) * var(--depth, 0) * 1px), calc(var(--my) * var(--depth, 0) * 1px), 0);
    will-change: transform;
    pointer-events: none
}

.layer img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.layer.hotspot,
.layer.product-open {
    pointer-events: auto;
    background: none;
    padding: 0
}

.hotspot:hover {
    filter: brightness(1.12)
}

.lab-scientist {
    height: 70%;
    width: 32%;
    bottom: 1%;
    z-index: 3
}

.scientist-one {
    left: 34%;
    rotate: -8deg
}

.scientist-two {
    right: -1%;
    rotate: 8deg
}

.lab-apple {
    width: 17%;
    right: 16%;
    bottom: 15%;
    z-index: 9
}

.lab-sampler {
    width: 31%;
    right: 1%;
    bottom: 3%;
    z-index: 8;
    rotate: -9deg
}

.lab-machine {
    width: 23%;
    height: 55%;
    right: 18%;
    top: 24%;
    z-index: 4
}

.lab-branch {
    width: 34%;
    left: -11%;
    bottom: -13%;
    rotate: 18deg;
    z-index: 12
}

.lab-coffee {
    width: 11%;
    right: 27%;
    top: 18%;
    rotate: -20deg;
    z-index: 7
}

.stamp {
    position: absolute;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    width: 125px;
    height: 125px;
    background: var(--acid);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 12px 'Courier New', monospace;
    rotate: 12deg;
    z-index: 11;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, .11)
}

.stamp strong {
    font: 25px Impact, 'Arial Black', sans-serif
}

.stamp small {
    font-size: 11px;
    margin-top: 6px
}

.lab-stamp {
    right: 5%;
    top: 21%
}

.scene-caption {
    position: absolute;
    left: 3.2%;
    bottom: 115px;
    font: 10px 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: .6px;
    z-index: 18;
    background: var(--paper);
    padding: 7px 11px;
    rotate: -1deg
}

.scene-caption span {
    color: #77776b;
    margin-right: 12px
}

.garden-copy {
    position: absolute;
    text-align: center;
    top: 22%;
    left: 35%;
    z-index: 9
}

.garden-copy h2 {
    font-size: clamp(65px, 7.4vw, 140px)
}

.garden-copy h2>span {
    margin-left: auto;
    margin-right: auto
}

.garden-copy p:not(.eyebrow) {
    background: var(--paper);
    padding: 10px;
    display: inline-block;
    rotate: 2deg
}

.garden-tree {
    height: 83%;
    width: 44%;
    bottom: -14%;
    z-index: 3
}

.left-tree {
    left: -13%;
    rotate: -8deg
}

.right-tree {
    right: -9%;
    rotate: 10deg
}

.flyer {
    width: 35%;
    z-index: 5
}

.flyer img:first-child {
    animation: float 6s ease-in-out infinite
}

.flyer-one {
    top: 25%;
    left: 7%;
    rotate: -9deg
}

.flyer-two {
    bottom: 24%;
    right: 3%;
    scale: -1 1;
    rotate: 12deg;
    width: 29%;
    z-index: 8
}

.flyer-basket {
    position: absolute;
    left: 0;
    top: 30%;
    width: 17% !important;
    height: auto !important;
    rotate: 10deg
}

.garden-lemon {
    width: 14%;
    left: 41%;
    bottom: 16%;
    rotate: 13deg;
    z-index: 5
}

.garden-coffee {
    width: 25%;
    left: 11%;
    bottom: -15%;
    z-index: 9;
    rotate: 14deg
}

.garden-orange {
    width: 23%;
    right: -4%;
    bottom: -4%;
    rotate: -15deg;
    z-index: 9
}

.garden-cherries {
    width: 12%;
    right: 25%;
    top: 18%;
    rotate: -20deg;
    z-index: 2
}

.garden-stamp {
    left: 29%;
    bottom: 20%;
    rotate: -13deg;
    background: #f4af92
}

.garden-stamp strong {
    font-size: 20px
}

.space-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(246, 240, 221, .94), rgba(246, 240, 221, .88) 32%, transparent 60%);
    z-index: -3
}

.product-copy {
    position: absolute;
    left: 7%;
    top: 28%;
    z-index: 12
}

.product-copy h2 {
    font-size: clamp(48px, 5.5vw, 98px)
}

.product-can {
    width: 39%;
    height: 79%;
    top: 8%;
    right: 12%;
    z-index: 7;
    rotate: 8deg
}

.orbit-tag {
    position: absolute;
    right: 5%;
    top: 26%;
    rotate: 8deg;
    background: var(--acid);
    border: 1px solid var(--ink);
    padding: 18px;
    font: 18px Impact, sans-serif;
    z-index: 13
}

.orbit-tag strong {
    font-size: 32px
}

.orbit-tag span {
    display: block;
    font: 9px 'Courier New';
    margin-top: 8px
}

.space-leaf {
    width: 31%;
    right: -11%;
    bottom: -3%;
    rotate: -30deg;
    z-index: 14
}

.space-scientist {
    height: 55%;
    width:  18%;
    bottom: -2%;
    z-index: 9
}

.s-one {
    right: 37%;
    rotate: -12deg
}

.s-two {
    right: 20%;
    rotate: 5deg
}

.s-three {
    right: 4%;
    rotate: 15deg
}

.lab-note {
    position: absolute;
    padding: 18px 20px;
    background: #f5edcd;
    box-shadow: 2px 4px 6px #0002;
    font: 12px/1.6 'Courier New';
    z-index: 8
}

.lab-note b {
    font-size: 16px
}

.note-one {
    right: 36%;
    top: 16%;
    rotate: -12deg
}

.note-two {
    right: 2%;
    bottom: 34%;
    rotate: 15deg
}

.battle-wash {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(90deg, rgba(246, 240, 221, .98), rgba(246, 240, 221, .85) 30%, transparent 65%)
}

.battle-copy {
    position: absolute;
    left: 7%;
    top: 27%;
    z-index: 15
}

.battle-copy h2 {
    font-size: clamp(48px, 5.8vw, 108px)
}

.battle-copy h2 .tilted {
    background: var(--red);
    color: var(--paper)
}

.interaction-hint {
    font-size: 12px !important;
    font-family: 'Courier New';
    max-width: 300px
}

.villain {
    right: 6%;
    height: 72%;
    width: 48%;
    top: 12%;
    z-index: 3;
    transition: rotate 1.4s cubic-bezier(.2, .8, .5, 1), top 1.4s, scale 1.4s;
    transform-origin: 60% 70%
}

.battle[data-hits="1"] .villain {
    rotate: -5deg
}

.battle[data-hits="2"] .villain {
    rotate: 9deg
}

.battle[data-hits="3"] .villain {
    rotate: 80deg;
    top: 28%;
    scale: .8
}

.rope {
    position: absolute;
    width: 42%;
    height: 4px;
    right: 3%;
    top: 65%;
    background: #88663b;
    box-shadow: 0 1px 0 #e6c594;
    transform-origin: right center;
    scale: 0 1;
    transition: scale .5s;
    z-index: 8;
    pointer-events: none
}

.rope-one {
    rotate: 20deg
}

.rope-two {
    rotate: -15deg;
    top: 58%
}

.rope-three {
    rotate: 45deg;
    top: 74%
}

.battle[data-hits="1"] .rope-one,
.battle[data-hits="2"] .rope-one,
.battle[data-hits="2"] .rope-two,
.battle[data-hits="3"] .rope {
    scale: 1 1
}

.squad {
    position: absolute;
    bottom: 4%;
    right: 1%;
    width: 56%;
    display: flex;
    align-items: end;
    z-index: 10;
    height: 28%;
    gap: 0
}

.squad img {
    width: 23%;
    height: 100%;
    object-fit: contain;
    rotate: -12deg;
    animation: march 1.8s ease-in-out infinite
}

.squad img:nth-child(even) {
    rotate: 10deg;
    animation-delay: -.9s
}

.battle-leaf {
    width: 25%;
    right: -9%;
    bottom: -6%;
    rotate: -40deg;
    z-index: 14
}

.final-copy {
    position: absolute;
    top: 23%;
    left: 10%;
    z-index: 14
}

.final-copy h2 {
    font-size: clamp(58px, 7.6vw, 145px)
}

.final-copy .tilted {
    background: var(--paper);
    color: var(--ink)
}

.final-copy p:not(.eyebrow) {
    max-width: 440px
}

.final-actions {
    display: flex;
    align-items: center;
    gap: 22px
}

.text-button {
    padding: 14px 0;
    background: none;
    border-bottom: 1px solid;
    font-size: 14px
}

.fallen-villain {
    position: absolute;
    height: 60%;
    width: 45%;
    right: 13%;
    bottom: -4%;
    rotate: 85deg;
    z-index: 2;
    filter: saturate(.5)
}

.fallen-villain img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.winner-can {
    width: 39%;
    height: 80%;
    right: 1%;
    top: 9%;
    rotate: 12deg;
    z-index: 10
}

.final-scientist {
    height: 42%;
    width: 23%;
    left: 1%;
    bottom: 0;
    rotate: -10deg;
    z-index: 8
}

.final-branch {
    width: 29%;
    left: -9%;
    bottom: -10%;
    rotate: -15deg;
    z-index: 11
}

.final-sampler {
    width: 28%;
    right: 14%;
    bottom: -6%;
    rotate: -8deg;
    z-index: 13
}

.party-particles {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    overflow: hidden
}

.party-particles i {
    position: absolute;
    width: 8px;
    height: 17px;
    background: var(--red);
    left: var(--x);
    top: -30px;
    animation: confetti var(--duration) linear infinite;
    animation-delay: var(--delay)
}

.party-particles i:nth-child(3n) {
    background: #f3f0d9
}

.party-particles i:nth-child(3n+1) {
    background: #4e652d
}

.navigation-shell {
    position: fixed;
    z-index: 40;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 26px 3.2%;
    pointer-events: none;
    background: linear-gradient(0deg, #f4eedee8, transparent)
}

.navigation-shell>* {
    pointer-events: auto
}

.scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 10px/1.4 'Courier New';
    font-weight: bold;
    flex: 1
}

.scroll-arrow {
    font-size: 28px
}

.chapter-nav {
    display: flex;
    position: relative;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 4px 5px 0 #17181420;
    padding: 6px;
    gap: 2px
}

.chapter-nav button {
    position: relative;
    background: none;
    padding: 16px 18px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transition: background .2s
}

.chapter-nav button span {
    font: 10px 'Courier New';
    opacity: .6;
    margin-right: 8px
}

.chapter-nav button.active {
    background: var(--ink);
    color: var(--paper)
}

.chapter-nav button:not(.active):hover {
    background: var(--acid)
}

.nav-progress {
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--red);
    width: 0
}

.page-count {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex: 1;
    justify-content: flex-end
}

.page-count strong {
    font: 42px Impact, sans-serif
}

.page-count span {
    font: 12px 'Courier New'
}

.toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%, 20px) rotate(-2deg);
    padding: 15px 23px;
    color: var(--paper);
    background: var(--ink);
    z-index: 80;
    font: 14px 'Courier New';
    box-shadow: 5px 5px var(--red);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    max-width: 80%;
    text-align: center
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-2deg)
}

dialog {
    padding: 0;
    border: 1px solid var(--ink);
    width: min(980px, 94vw);
    max-height: 90svh;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 14px 14px 0 #0004;
    overflow: auto
}

dialog[open] {
    display: grid;
    grid-template-columns: 45% 55%
}

dialog::backdrop {
    background: #141910bb;
    backdrop-filter: blur(5px)
}

.dialog-close {
    position: absolute;
    right: 16px;
    top: 10px;
    background: var(--paper);
    font-size: 36px;
    z-index: 3;
    width: 44px;
    height: 44px
}

.dialog-art {
    background: var(--acid);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center
}

.dialog-art>img:first-of-type {
    width: 135%;
    max-width: none;
    margin-left: -17%;
    rotate: -10deg;
    z-index: 1
}

.dialog-art .dialog-apple {
    position: absolute;
    width: 55%;
    right: -12%;
    bottom: -3%;
    z-index: 2;
    rotate: 20deg
}

.dialog-sticker {
    position: absolute;
    left: 20px;
    top: 25px;
    rotate: -8deg;
    font: 24px Impact, sans-serif;
    z-index: 2
}

.dialog-copy {
    padding: 55px 45px 40px
}

.dialog-copy h2 {
    font-size: 60px
}

.dialog-copy>p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.55
}

.dialog-copy dl {
    margin: 25px 0;
    border-top: 1px solid #17181450
}

.dialog-copy dl div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #17181450;
    padding: 12px 0;
    font-size: 14px
}

.dialog-copy dt {
    font: 11px 'Courier New';
    align-self: center
}

.product-notice {
    font-size: 12px !important;
    color: #575b4c
}

.dialog-return {
    font-size: 10px;
    margin-top: 10px
}

.floating img {
    animation: float 5.7s ease-in-out infinite
}

.drift {
    animation: drift 7s ease-in-out infinite
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
    animation-play-state: paused !important;
    transition-duration: 0s !important
}

.scene:not(.in-view) * {
    animation-play-state: paused
}

.scene.in-view * {
    animation-play-state: running
}

.motion-paused .layer {
    transform: none !important
}

.party-particles {
    contain: strict
}

@keyframes float {
    50% {
        transform: translateY(-15px) rotate(3deg)
    }
}

@keyframes drift {
    50% {
        translate: 10px -12px;
        rotate: 5deg
    }
}

@keyframes march {
    50% {
        translate: 0 -12px;
        rotate: 6deg
    }
}

@keyframes confetti {
    to {
        translate: 60px 110vh;
        rotate: 460deg
    }
}

@media(min-width:1700px) {
    .hero-copy {
        top: 24%
    }

    .intro {
        font-size: 20px
    }

    .chapter-label {
        top: 155px
    }

    .scene-caption {
        bottom: 130px
    }

    .pill {
        font-size: 14px
    }

    .chapter-nav button {
        font-size: 13px
    }
}

@media(max-width:1050px) and (min-width:761px) {
    .edition {
        display: none
    }

    .chapter-nav button {
        padding: 15px 10px
    }

    .chapter-nav {
        gap: 0
    }

    .chapter-nav button span {
        display: none
    }

    .scroll-cue {
        max-width: 80px
    }

    .hero-copy {
        left: 5%
    }

    .scientist-one {
        left: 38%
    }

    .lab-stamp {
        width: 100px;
        height: 100px;
        right: 2%
    }

    .garden-copy {
        left: 30%
    }

    .product-copy {
        left: 5%
    }

    .product-copy p:not(.eyebrow) {
        max-width: 330px
    }

    .product-copy h2 {
        font-size: 5.4vw
    }

    .orbit-tag {
        right: 2%;
        font-size: 13px
    }

    .orbit-tag strong {
        font-size: 24px
    }
}



@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    .layer {
        transform: none !important
    }
}

/* Original MonoBrew artwork, framed without altering the source. */
.brand {
    width: 126px;
    height: 70px;
    flex: none;
    background: url('assets/brand-cover.webp') center 49%/145px auto no-repeat;
    filter: invert(1);
    mix-blend-mode: multiply;
    transform: rotate(-4deg)
}

.brand>span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
}

.product-can img,
.winner-can img {
    position: absolute;
    width: 175%;
    height: 175%;
    max-width: none;
    left: -37.5%;
    top: -37.5%;
    object-fit: contain
}



/* Two independent axes: horizontal world and vertical chapter pages. */
html,
body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none
}

.journey {
    position: fixed;
    inset: 0;
    height: 100%;
    transition: transform 950ms cubic-bezier(.76, 0, .24, 1), filter 950ms;
    transform-origin: 50% 0
}

.stage {
    position: relative;
    top: auto;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior: none;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory
}

.stage::-webkit-scrollbar {
    display: none
}

.track {
    display: flex;
    width: 500%;
    height: 100%;
    transform: none !important;
    will-change: auto
}

.scene {
    width: 20%;
    height: 100%;
    min-height: 0;
    flex: none;
    scroll-snap-align: start;
    scroll-snap-stop: always
}

.scene .layer {
    translate: calc(var(--travel, 0) * var(--depth, 0) * .8px) 0
}

.scene-enter {
    position: absolute;
    left: 50%;
    bottom: 114px;
    z-index: 25;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 13px 12px 22px;
    border: 1px solid var(--ink);
    border-radius: 60px;
    background: var(--paper);
    box-shadow: 3px 4px 0 #17181420;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    transition: background .2s, translate .2s
}

.scene-enter b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 50%;
    font-size: 25px;
    font-weight: 400
}

.scene-enter:hover {
    background: var(--acid);
    translate: -50% 4px
}

.scene-caption {
    bottom: 186px;
    max-width: 38%;
    font-size: 10px
}

.panorama-arrow {
    position: fixed;
    top: 52%;
    width: 42px;
    height: 42px;
    z-index: 30;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    font-size: 24px
}

.panorama-arrow.prev {
    left: 16px
}

.panorama-arrow.next {
    right: 16px
}

.panorama-arrow:disabled {
    opacity: 0;
    pointer-events: none
}

.chapter-content {
    position: fixed;
    inset: 0;
    z-index: 45;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background: var(--paper);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 950ms cubic-bezier(.76, 0, .24, 1), visibility 950ms;
    scrollbar-color: var(--ink) var(--paper)
}

.reading .chapter-content {
    transform: translateY(0);
    visibility: visible
}

.reading .journey {
    transform: translateY(-32%);
    filter: brightness(.75)
}

.reading .navigation-shell {
    transform: translateY(130%);
    opacity: 0
}

.navigation-shell {
    transition: transform .7s, opacity .5s
}

.reading .edition {
    visibility: hidden
}

.reading .masthead {
    background: var(--paper)
}

.chapter-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 114px 4% 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--paper);
    border-bottom: 1px solid #17181433;
    font: 12px 'Courier New', monospace
}

.back-to-world {
    padding: 12px 18px;
    border: 1px solid var(--ink);
    background: none;
    border-radius: 30px;
    font-size: 12px;
    font-weight: bold
}

.back-to-world:hover {
    background: var(--acid)
}

.detail-direction {
    margin-left: auto
}

.reading-progress {
    position: fixed;
    z-index: 60;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: var(--red);
    transform-origin: left;
    scale: 0 1;
    pointer-events: none;
    opacity: 0
}

.reading .reading-progress {
    opacity: 1
}

.chapter-story[hidden] {
    display: none !important
}

.story-intro {
    position: relative;
    isolation: isolate;
    padding: 90px 23% 100px;
    min-height: 78svh;
    text-align: center;
    overflow: hidden;
    background: #e4eb9b
}

.story-intro h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(60px, 7.8vw, 132px);
    outline: none
}

.story-intro .eyebrow {
    position: relative;
    z-index: 2
}

.story-lead {
    position: relative;
    z-index: 2;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.65;
    max-width: 620px;
    margin: 35px auto
}

.read-down {
    display: inline-block;
    margin-top: 20px;
    font: 12px 'Courier New', monospace
}

.story-cutout {
    position: absolute;
    z-index: -1;
    width: 34%;
    height: 88%;
    object-fit: contain;
    bottom: -9%;
    pointer-events: none
}

.cutout-one {
    left: -7%;
    rotate: -12deg
}

.cutout-two {
    right: -9%;
    rotate: 15deg
}

.story-1 .story-intro {
    background: #d6e3b5
}

.story-2 .story-intro {
    background: #eedab2
}

.story-3 .story-intro {
    background: #ec9274
}

.story-4 .story-intro {
    background: var(--acid)
}

.story-2 .cutout-one,
.story-3 .cutout-two,
.story-4 .cutout-two {
    width: 52%;
    left: -18%
}

.story-3 .cutout-two,
.story-4 .cutout-two {
    left: auto;
    right: -19%
}

.story-landscape {
    height: 68svh;
    min-height: 340px;
    background-size: cover;
    background-position: center;
    position: relative
}

.story-landscape span {
    position: absolute;
    bottom: 25px;
    left: 4%;
    padding: 10px;
    background: var(--paper);
    font: 12px 'Courier New', monospace
}

.story-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8%;
    padding: 110px 9%;
    min-height: 85svh
}

.story-body h3,
.story-outro h3 {
    font-family: Impact, 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: clamp(44px, 5.5vw, 90px);
    line-height: 1.03;
    letter-spacing: -.035em;
    margin: 20px 0 30px
}

.story-body p:not(.eyebrow) {
    font-size: 18px;
    line-height: 1.75;
    max-width: 560px
}

.story-object {
    display: grid;
    place-items: center;
    min-height: 350px;
    background: var(--acid);
    border-radius: 50%;
    aspect-ratio: 1;
    rotate: -7deg
}

.story-object img {
    width: 110%;
    max-height: 480px;
    object-fit: contain;
    max-width: 110%
}

.story-note {
    font: 12px/1.5 'Courier New', monospace !important
}

.story-outro {
    padding: 90px 8% 0;
    text-align: center;
    background: var(--ink);
    color: var(--paper)
}

.story-outro>.pill {
    background: var(--acid);
    color: var(--ink);
    margin: 15px 0 70px
}

.return-world {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 35px 0;
    border-top: 1px solid #f6f0dd55;
    background: none;
    color: var(--paper);
    text-align: left;
    font: 14px 'Courier New', monospace
}

.return-world span {
    font-size: 40px
}

.return-world:hover {
    color: var(--acid)
}



@media(max-height:700px) and (min-width:761px) {
    .chapter-label {
        top: 112px
    }

    .hero-copy,
    .product-copy,
    .battle-copy,
    .final-copy {
        top: 23%
    }

    .intro,
    .product-copy p:not(.eyebrow),
    .battle-copy p:not(.eyebrow) {
        margin: 15px 0;
        font-size: 14px
    }

    .scene-enter {
        bottom: 91px
    }

    .scene-caption {
        display: none
    }

    .navigation-shell {
        padding-top: 14px;
        padding-bottom: 14px
    }

    .hero-copy h1 {
        font-size: 11vh
    }

    .product-copy h2,
    .battle-copy h2 {
        font-size: 8vh
    }
}

@media(prefers-reduced-motion:reduce) {

    .journey,
    .chapter-content,
    .navigation-shell {
        transition: none
    }

    .scene .layer {
        translate: none
    }
}

/* Requested visual revisions, keeping the edited copy and navigation. */
#space-title,
#space-title>span {
    color: #fff;
    text-shadow: 0 2px 5px #111b, 0 5px 22px #1117
}

#space-title>.tilted {
    background: #253322;
    box-shadow: 2px 5px 0 #0002
}

.lab-synth {
    width: 37%;
    right: 18%;
    bottom: 1%;
    z-index: 8;
    rotate: 4deg
}

.lab-machine-extra {
    width: 16%;
    height: 42%;
    right: 1%;
    top: 26%;
    z-index: 2;
    rotate: 7deg
}

.lab-cable {
    width: 23%;
    height: 49%;
    object-fit: contain;
    z-index: 6;
    pointer-events: none
}

.cable-a {
    right: 11%;
    bottom: 1%;
    rotate: 49deg
}

.cable-b {
    right: 33%;
    bottom: 1%;
    rotate: -65deg
}

.cable-c {
    right: -2%;
    bottom: 12%;
    rotate: -36deg;
    scale: -1 1
}

.lab-extra-apple {
    object-fit: contain;
    z-index: 9
}

.apple-a {
    width: 8%;
    right: 42%;
    bottom: 7%;
    rotate: 16deg
}

.apple-b {
    width: 10%;
    right: 28%;
    bottom: 4%;
    rotate: -19deg
}

.lab-extra-bean {
    object-fit: contain;
    z-index: 7
}

.bean-a {
    width: 5%;
    right: 41%;
    top: 25%;
    rotate: 35deg
}

.bean-b {
    width: 4%;
    right: 15%;
    top: 38%;
    rotate: -48deg
}

.bean-c {
    width: 6%;
    right: 3%;
    bottom: 22%;
    rotate: 75deg
}

.final-actions {
    flex-wrap: wrap
}

.final-actions .contact-open {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink)
}

.final-actions .contact-open:hover {
    background: var(--acid)
}

#contact-dialog {
    width: min(900px, 94vw);
    max-height: 90svh;
    padding: 0;
    overscroll-behavior: contain
}

#contact-dialog[open] {
    display: grid;
    grid-template-columns: 42% 58%
}

.contact-close {
    position: absolute;
    right: 14px;
    top: 10px;
    z-index: 5;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 28px
}

.contact-heading {
    background: var(--acid);
    padding: 60px 30px 40px
}

.contact-heading h2 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1
}

.contact-heading p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.6;
    margin: 28px 0
}

.contact-heading a {
    font-size: 15px;
    overflow-wrap: anywhere;
    text-underline-offset: 4px
}

#contact-form {
    padding: 65px 35px 25px;
    position: relative
}

#contact-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 18px
}

#contact-form input,
#contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #17181480;
    border-radius: 0;
    background: #fffdf5;
    color: var(--ink);
    font: 16px/1.5 Arial, sans-serif;
    padding: 10px 12px;
    margin-top: 7px
}

#contact-form textarea {
    resize: vertical;
    min-height: 120px;
    max-height: 320px
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: 2px solid var(--ink);
    outline-offset: 2px
}

.contact-purpose {
    font-size: 12px;
    line-height: 1.5
}

.contact-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.contact-submit {
    width: 100%
}

.contact-submit:disabled {
    opacity: .6;
    cursor: wait
}

#contact-status {
    font-size: 14px;
    line-height: 1.5;
    min-height: 22px;
    margin-bottom: 0
}



/* Move the selected laboratory apple left by 30% of the scene width. */
.lab-apple {
    right: 46%
}



/* Syntezator przesunięty za jabłko: jabłko pozostaje na pierwszym planie. */
.lab-synth {
    right: 42%;
    z-index: 7
}

.lab-apple {
    z-index: 12
}



.lab-synth {
    right: 26%
}



/* Cofnięcie ostatniej zmiany położenia syntezatora. */
.lab-synth {
    right: 42%
}



/* Syntezator przesunięty w lewo o 40% względem poprzedniej pozycji. */
.lab-synth {
    translate: -40% 0
}



/* Sampler w laboratorium przesunięty w lewo o 40%. */
.laboratory .lab-sampler {
    translate: -40% 0
}



/* Laboratorium: biały gradient nachodzący na tło od lewej strony. */
.paper-glow {
    background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .84) 22%, rgba(255, 255, 255, .22) 50%, transparent 70%)
}



/* Laboratorium: ekstraktor i naukowiec 02 przesunięci w lewo o 40%. */
.laboratory .lab-machine,
.laboratory .lab-machine-extra,
.laboratory .scientist-two {
    translate: -40% 0
}



/* Receptura: puszka zmniejszona o 30%. */
.space .product-can {
    scale: .7
}

/* Toruń: biały gradient nachodzący na tło od lewej strony. */
.battle-wash {
    background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86) 30%, rgba(255, 255, 255, 0) 68%)
}



/* Finał: puszka MonoBrew zmniejszona o 40%. */
.finale .winner-can {
    scale: .6
}

/* Finał: białe litery i czarna ramka hasła. */
.finale #final-title>span {
    color: #fff
}

.finale #final-title>.tilted {
    color: #fff;
    background: #171814;
    border: 2px solid #171814;
    box-shadow: 2px 5px 0 rgba(0, 0, 0, .2)
}

/* Finał: kontrastowe, białe elementy zgodnie z korektą art direction. */
.edition,
.edition span {
    color: #fff
}

.header-actions .product-open {
    display: none
}

.finale .chapter-label,
.finale .final-copy p:not(.eyebrow) {
    color: #fff
}

.finale .final-actions .contact-open {
    background: #fff;
    color: #171814;
    border-color: #171814
}

.finale .final-actions .product-open {
    color: #fff
}

.finale .scene-enter {
    background: #fff;
    color: #171814
}

.panorama-arrow {
    background: #fff
}

.finale .scene-background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0) 44%)
}



/* Nawigacja rozdziałów: białe wypełnienie kontenera. */
.chapter-nav {
    background: #fff
}

/* Toruń: dolny gradient nawigacji jest biały. */
.navigation-shell {
    background: linear-gradient(0deg, #fff, transparent)
}

/* Finał: powalony Energol przesunięty w dół o 30% wysokości ilustracji. */
.finale .fallen-villain {
    translate: 0 30%
}

/* Finał: puszka MonoBrew niżej, zgodnie z korektą kompozycji. */
.finale .winner-can {
    translate: 0 25%
}

/* Finał: nowe hasło końcowe. */
.finale #final-title>span {
    font-size: 0
}

.finale #final-title>span::after {
    display: block;
    font-size: clamp(58px, 7.6vw, 145px);
    line-height: .95;
    color: #fff
}

.finale #final-title>span:first-child::after {
    content: "AKYSZ!"
}

.finale #final-title>span:nth-child(2)::after {
    content: "PODŁY ENERGOLU"
}



/* Finał: czarna ramka hasła skrócona o 30%, bez zmniejszania tekstu. */
.finale #final-title>.tilted {
    background: linear-gradient(#171814, #171814) left center/70% 100% no-repeat;
    border-color: transparent
}

/* Logo MonoBrew: czarne tło i białe litery. */
.brand {
    background: #171814;
    color: #fff;
    padding: 8px 12px 10px
}

.brand .brand-dot {
    color: #fff
}

/* Przywrócone oryginalne logo MonoBrew. */
.brand {
    background: none;
    color: var(--ink);
    padding: 0
}

.brand .brand-dot {
    color: var(--ink)
}

/* Logo wymuszony jako widoczny element nagłówka. */
.masthead .brand {
    display: flex;
    flex-direction: column;
    visibility: visible !important;
    opacity: 1 !important;
    color: #171814 !important;
    font-size: 36px !important;
    z-index: 51;
    background: transparent !important
}

.masthead .brand>span {
    display: block;
    color: #171814 !important
}

/* Logo z dostarczonego pliku SVG — zachowuje czarne tło i białą grafikę. */
.masthead .brand {
    width: 132px;
    height: 79px;
    background: url('assets/monobrew-logo.svg') center/contain no-repeat !important;
    font-size: 0 !important;
    padding: 0 !important;
    display: block !important
}

.masthead .brand>span {
    display: none !important
}

/* Finał: czarna ramka bez cienia. */
.finale #final-title>.tilted {
    box-shadow: none !important
}

/* Bitwa: białe elementy przycisków. */
#battle-button {
    color: #fff
}

#bitwa .scene-enter {
    background: #fff
}

.brew-gallery {
    padding: 75px 5%;
    background: #fff
}

.brew-gallery>h2 {
    font-size: clamp(42px, 5vw, 76px);
    margin-bottom: 45px
}

.brew-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px
}

.brew-card {
    border: 1px solid #171814;
    background: #fff;
    min-width: 0
}

.brew-card figure {
    margin: 0;
    background: #f6f0dd;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 25px
}

.brew-card figure img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.brew-card figcaption {
    position: absolute;
    bottom: 8px;
    font-size: 13px;
    background: #fff;
    padding: 4px 8px
}

.brew-info {
    padding: 28px
}

.brew-info h3 {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 40px;
    margin: 0
}

.brew-info h4 {
    font-size: 23px;
    margin: 8px 0 20px
}

.brew-description {
    font-size: 16px;
    line-height: 1.6;
    min-height: 70px
}

.brew-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 14px;
    line-height: 1.45
}

.brew-table th,
.brew-table td {
    padding: 12px 8px;
    border: 1px solid #171814;
    text-align: left;
    overflow-wrap: anywhere
}

.brew-table thead {
    background: #171814;
    color: #fff
}

.brew-table th:first-child {
    width: 44%
}

.brew-table tbody th {
    font-weight: 400
}

.brew-note {
    font-size: 14px;
    color: #555
}

.brew-info .eyebrow {
    font-size: 12px
}



/* Lokale z MonoBrew: osiem logotypów na miasto. */
.venues {
    padding: 80px 24px;
    background: #fff;
    color: #171814
}

.venues>h2 {
    max-width: 1260px;
    margin: 0 auto 64px;
    font-size: clamp(48px, 7vw, 100px)
}

.venue-city {
    max-width: 1260px;
    margin: 0 auto 70px
}

.venue-city:last-child {
    margin-bottom: 0
}

.venue-city h3 {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    margin: 0 0 24px
}

.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 300px));
    justify-content: center;
    gap: 20px
}

.venue-tile {
    display: block;
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1;
    border: 1px solid #171814;
    overflow: hidden;
    background: #fff;
    color: #171814;
    text-decoration: none
}

.venue-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.venue-tile span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 14px 'Courier New', monospace;
    color: #777
}

.venue-tile[href]:hover {
    outline: 2px solid #171814;
    outline-offset: 3px
}

.venue-tile[aria-disabled="true"] {
    cursor: default
}



/* Profile marki we wspólnym nagłówku wszystkich rozdziałów. */
.masthead .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    background: #fff;
    color: #171814;
    border: 1px solid #171814;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .2s
}

.social-link:hover {
    transform: translateY(-2px)
}

.social-link svg {
    display: block
}

.masthead .header-actions {
    gap: 10px
}



/* Laboratorium: białe wypełnienie przycisku odkrywania rozdziału. */
#laboratorium .scene-enter {
    background: #fff
}

/* Sad: białe wypełnienie przycisku rozdziału. */
#ogrod .scene-enter {
    background: #fff
}

/* Receptura: czarne napisy i białe tła. */
#space-title>span:first-child,
#space-title>span:nth-child(3) {
    color: #000;
    text-shadow: none
}

#receptura .scene-enter {
    background: #fff
}

#receptura .space-wash {
    background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .88) 32%, rgba(255, 255, 255, 0) 60%)
}



/* Bitwa: animowane tło dostarczone przez użytkownika. */
#bitwa .bg-town {
    background-image: url('assets/torun_city.webp')
}

/* Bitwa: biały gradient o 35% mniej intensywny. */
#bitwa .battle-wash {
    opacity: .65
}

/* Bitwa: usunięte białe przejście tonalne z lewej strony. */
#bitwa .battle-wash {
    display: none
}

.menu-toggle {
    display: none
}

/* Telefon: pięć slajdów historii w pionie oraz reszta strony dopasowana do wąskiego ekranu. */