/* mujun.art -- gallery of contradiction
   colors: #f5f5f5, #1a1a1a, #ff2d55, #0066ff, #ffcc00, #00cc88, #333333
   fonts: Abril Fatface (display), Work Sans (body), Permanent Marker (labels)
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Work Sans", sans-serif;
    background: #f5f5f5;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 45, 85, 0.04) 0, transparent 38%),
        radial-gradient(circle at 86% 62%, rgba(0, 102, 255, 0.05) 0, transparent 42%),
        radial-gradient(circle at 50% 90%, rgba(255, 204, 0, 0.05) 0, transparent 40%);
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: #ffcc00;
    color: #1a1a1a;
}

/* ===== TOPBAR ===== */
.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2.4rem;
    border-bottom: 3px solid #1a1a1a;
    background: #f5f5f5;
    z-index: 50;
}

.logo-mark {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.logo-kanji {
    font-family: "Abril Fatface", serif;
    font-size: 2.1rem;
    color: #ff2d55;
    line-height: 0.9;
    transform: translateY(2px) rotate(-4deg);
    display: inline-block;
}

.logo-text {
    font-family: "Permanent Marker", cursive;
    font-size: 1.15rem;
    color: #1a1a1a;
}

.nav {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.nav-link {
    font-family: "Permanent Marker", cursive;
    font-size: 1rem;
    padding: 0.2rem 0.6rem;
    border: 2px solid #1a1a1a;
    background: #f5f5f5;
    color: #1a1a1a;
    box-shadow: 3px 3px 0 #333333;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: inline-block;
}

.nav-link--red    { transform: rotate(-2deg); }
.nav-link--blue   { transform: rotate(1.5deg); }
.nav-link--yellow { transform: rotate(-1deg); }
.nav-link--green  { transform: rotate(2deg); }

.nav-link:hover {
    transform: translate(-2px, -2px) rotate(0);
    box-shadow: 5px 5px 0 #333333;
}
.nav-link--red:hover    { background: #ff2d55; color: #f5f5f5; }
.nav-link--blue:hover   { background: #0066ff; color: #f5f5f5; }
.nav-link--yellow:hover { background: #ffcc00; color: #1a1a1a; }
.nav-link--green:hover  { background: #00cc88; color: #1a1a1a; }

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 92vh;
    padding: 6rem 2.4rem 5rem;
    overflow: hidden;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    top: 8%;
    right: -6%;
    width: 32vw;
    height: 32vw;
    background: #ffcc00;
    transform: rotate(18deg);
    z-index: -1;
    opacity: 0.55;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 4%;
    left: -8%;
    width: 28vw;
    height: 28vw;
    background: #00cc88;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.45;
}

.hero-collision {
    position: relative;
    height: clamp(220px, 36vh, 360px);
    margin-top: 2rem;
}

.hero-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    white-space: nowrap;
    transform-origin: center;
    pointer-events: none;
    will-change: transform;
}

.hero-layer--abril {
    font-family: "Abril Fatface", serif;
    font-size: clamp(3rem, 12vw, 9rem);
    color: #1a1a1a;
    transform: translate(-50%, -50%) rotate(-1deg);
    letter-spacing: -0.02em;
    z-index: 2;
}

.hero-layer--work {
    font-family: "Work Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 7.5vw, 5.5rem);
    color: #ff2d55;
    transform: translate(-46%, -40%) rotate(3deg);
    letter-spacing: -0.01em;
    z-index: 3;
    mix-blend-mode: multiply;
}

.hero-layer--marker {
    font-family: "Permanent Marker", cursive;
    font-size: clamp(1.4rem, 4.4vw, 3rem);
    color: #0066ff;
    transform: translate(-58%, -68%) rotate(-5deg);
    z-index: 4;
}

.hero-tag {
    margin: 1.4rem 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
}

.tag-piece {
    font-family: "Abril Fatface", serif;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    line-height: 1;
    padding: 0.05em 0.3em;
    display: inline-block;
}
.tag-piece--a { background: #1a1a1a; color: #f5f5f5; transform: rotate(-2deg); }
.tag-piece--b { color: #ff2d55; transform: rotate(1deg); text-decoration: underline wavy #0066ff; text-underline-offset: 6px; }
.tag-piece--c { background: #ffcc00; color: #1a1a1a; transform: rotate(-1deg); }
.tag-piece--d { font-family: "Permanent Marker", cursive; color: #00cc88; transform: rotate(2deg); }

.hero-sub {
    max-width: 56ch;
    margin-top: 1.4rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1a1a1a;
    border-left: 4px solid #ff2d55;
    padding-left: 1rem;
}

.hero-sub em {
    font-family: "Abril Fatface", serif;
    font-style: normal;
    color: #0066ff;
    font-size: 1.2em;
}

.hero-arrow {
    position: absolute;
    bottom: 2.8rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    transform: rotate(-2deg);
}

.arrow-line {
    width: 2px;
    height: 60px;
    background: #1a1a1a;
    position: relative;
    animation: arrowPulse 2.4s ease-in-out infinite;
}

.arrow-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: translateX(-50%) rotate(45deg);
}

.arrow-label {
    font-family: "Permanent Marker", cursive;
    font-size: 0.85rem;
    color: #ff2d55;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.5; }
}

.hero-stamp {
    position: absolute;
    top: 6rem;
    right: 3rem;
    border: 3px solid #ff2d55;
    color: #ff2d55;
    padding: 0.6rem 1rem;
    transform: rotate(8deg);
    font-family: "Permanent Marker", cursive;
    line-height: 1.25;
    background: rgba(245, 245, 245, 0.6);
}

.stamp-line {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* ===== MANIFESTO ===== */
.manifesto {
    position: relative;
    padding: 6rem 2.4rem 7rem;
    background: #1a1a1a;
    color: #f5f5f5;
    overflow: hidden;
}

.manifesto::before {
    content: "矛盾";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "Abril Fatface", serif;
    font-size: clamp(20rem, 60vw, 60rem);
    color: rgba(255, 45, 85, 0.06);
    transform: translate(-50%, -50%);
    pointer-events: none;
    line-height: 1;
}

.manifesto-frame {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    background: #f5f5f5;
    color: #1a1a1a;
    border: 4px solid #ff2d55;
    box-shadow: 8px 8px 0 #00cc88;
    padding: 2.6rem 2.2rem;
    transform: rotate(-1.2deg);
    z-index: 2;
}

.manifesto-title {
    font-family: "Abril Fatface", serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1;
    margin-bottom: 1.2rem;
    color: #1a1a1a;
}

.manifesto-body {
    font-size: 1.1rem;
    line-height: 1.7;
}

.hi {
    font-family: "Permanent Marker", cursive;
    padding: 0 0.18em;
}
.hi-red    { background: #ff2d55; color: #f5f5f5; }
.hi-blue   { background: #0066ff; color: #f5f5f5; }
.hi-yellow { background: #ffcc00; color: #1a1a1a; }

.manifesto-stamp {
    position: absolute;
    font-family: "Permanent Marker", cursive;
    font-size: 1.4rem;
    padding: 0.6rem 1.2rem;
    border: 3px solid currentColor;
    z-index: 3;
}

.manifesto-stamp--one {
    top: 3.2rem;
    left: 6vw;
    color: #ffcc00;
    transform: rotate(-9deg);
}

.manifesto-stamp--two {
    top: 12rem;
    right: 4vw;
    color: #00cc88;
    transform: rotate(7deg);
}

.manifesto-stamp--three {
    bottom: 4rem;
    left: 12vw;
    color: #ff2d55;
    transform: rotate(-4deg);
    background: #1a1a1a;
}

.manifesto-tape {
    position: absolute;
    width: 110px;
    height: 26px;
    background: rgba(255, 204, 0, 0.78);
    z-index: 4;
}

.manifesto-tape--a {
    top: -10px;
    left: 24%;
    transform: rotate(-7deg);
}

.manifesto-tape--b {
    bottom: -8px;
    right: 18%;
    transform: rotate(11deg);
    background: rgba(0, 102, 255, 0.7);
}

/* ===== GALLERY ===== */
.gallery {
    position: relative;
    padding: 6rem 2rem 4rem;
    background: #f5f5f5;
}

.gallery-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 3px dashed #1a1a1a;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.gallery-title {
    font-family: "Abril Fatface", serif;
    font-size: clamp(2rem, 6vw, 5rem);
    color: #1a1a1a;
    line-height: 1;
}

.gallery-sub {
    font-family: "Permanent Marker", cursive;
    font-size: 1.05rem;
    color: #ff2d55;
    transform: rotate(-1deg);
    display: inline-block;
}

.gallery-board {
    position: relative;
    width: 100%;
    min-height: 1500px;
    max-width: 1280px;
    margin: 0 auto;
}

/* CARD BASE */
.card {
    position: absolute;
    width: clamp(220px, 24vw, 320px);
    background: #f5f5f5;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0 #333333;
    padding: 1.2rem 1.1rem 1rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, z-index 0s;
    cursor: default;
    will-change: transform;
}

.card:hover {
    transform: rotate(0deg) translate(-4px, -4px) scale(1.04) !important;
    box-shadow: 10px 10px 0 #333333;
    z-index: 99 !important;
}

.card-number {
    font-family: "Abril Fatface", serif;
    position: absolute;
    top: -22px;
    right: -16px;
    background: #1a1a1a;
    color: #ffcc00;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transform: rotate(8deg);
    border: 3px solid #f5f5f5;
}

.card-title {
    font-family: "Abril Fatface", serif;
    font-size: 1.55rem;
    line-height: 1.05;
    margin-bottom: 0.6rem;
    color: #1a1a1a;
}

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.7rem;
    border-bottom: 2px dotted #333333;
    padding-bottom: 0.6rem;
}

.card-artist {
    font-family: "Permanent Marker", cursive;
    font-size: 1rem;
    color: #ff2d55;
}

.card-medium {
    font-size: 0.82rem;
    color: #333333;
    font-style: italic;
}

.card-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.8rem;
    color: #1a1a1a;
}

.card-foot {
    font-family: "Permanent Marker", cursive;
    font-size: 0.78rem;
    color: #0066ff;
    letter-spacing: 0.04em;
}

/* TAPE on cards */
.tape {
    position: absolute;
    width: 80px;
    height: 22px;
    background: rgba(255, 204, 0, 0.72);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    z-index: 5;
}

.tape--left   { top: -10px; left: 12%;  transform: rotate(-8deg); }
.tape--right  { top: -10px; right: 10%; transform: rotate(7deg); }
.tape--center { top: -12px; left: 36%;  transform: rotate(-3deg); }

/* PER-CARD POSITIONING and clashing colors */
.card--01 {
    top: 0;
    left: 3%;
    transform: rotate(-4deg);
    z-index: 4;
    background: #ffcc00;
    border-color: #0066ff; /* clash: yellow card / blue border */
}

.card--02 {
    top: 4%;
    left: 42%;
    transform: rotate(3deg);
    z-index: 5;
    border-color: #ff2d55;
}

.card--03 {
    top: 12%;
    left: 70%;
    transform: rotate(-2deg);
    z-index: 3;
    background: #00cc88;
    border-color: #ff2d55; /* clash: green / red */
    color: #1a1a1a;
}

.card--04 {
    top: 30%;
    left: 6%;
    transform: rotate(5deg);
    z-index: 6;
    background: #1a1a1a;
    border-color: #ffcc00;
    color: #f5f5f5;
}
.card--04 .card-title,
.card--04 .card-desc { color: #f5f5f5; }
.card--04 .card-medium { color: #ffcc00; }
.card--04 .card-artist { color: #00cc88; }
.card--04 .card-foot { color: #ff2d55; }

.card--05 {
    top: 38%;
    left: 46%;
    transform: rotate(-5deg);
    z-index: 7;
    background: #ff2d55;
    border-color: #0066ff; /* clash: red / blue */
    color: #f5f5f5;
}
.card--05 .card-title,
.card--05 .card-desc,
.card--05 .card-foot { color: #f5f5f5; }
.card--05 .card-artist { color: #ffcc00; }
.card--05 .card-medium { color: #f5f5f5; opacity: 0.85; }

.card--06 {
    top: 46%;
    left: 74%;
    transform: rotate(2deg);
    z-index: 4;
    border-color: #00cc88;
}

.card--07 {
    top: 64%;
    left: 22%;
    transform: rotate(-3deg);
    z-index: 8;
    background: #0066ff;
    border-color: #ffcc00; /* clash: blue / yellow */
    color: #f5f5f5;
}
.card--07 .card-title,
.card--07 .card-desc { color: #f5f5f5; }
.card--07 .card-artist { color: #ffcc00; }
.card--07 .card-medium { color: #f5f5f5; opacity: 0.85; }
.card--07 .card-foot { color: #ffcc00; }

/* SPLATTERS / DECOR */
.splat {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 48% 52% 38% 62% / 55% 40% 60% 45%;
    z-index: 1;
    pointer-events: none;
}

.splat--a { top: 8%;  left: 38%; background: #ff2d55; opacity: 0.55; }
.splat--b { top: 52%; left: 4%;  background: #ffcc00; opacity: 0.7; transform: rotate(20deg); }
.splat--c { top: 70%; left: 64%; background: #00cc88; opacity: 0.55; }

.sticker {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.sticker--triangle {
    top: 25%;
    left: 92%;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid #0066ff;
    transform: rotate(18deg);
}

.sticker--cross {
    top: 18%;
    left: 26%;
    font-family: "Abril Fatface", serif;
    font-size: 5rem;
    color: #ff2d55;
    line-height: 1;
    transform: rotate(-12deg);
}

.sticker--circle {
    bottom: 8%;
    left: 92%;
    width: 70px;
    height: 70px;
    border: 6px solid #ffcc00;
    border-radius: 50%;
    transform: rotate(0);
}

/* PULL QUOTES inside gallery board */
.pull {
    position: absolute;
    font-family: "Abril Fatface", serif;
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    line-height: 1.05;
    max-width: 320px;
    color: #1a1a1a;
    z-index: 3;
    pointer-events: none;
}

.pull cite {
    display: block;
    font-family: "Permanent Marker", cursive;
    font-size: 0.95rem;
    font-style: normal;
    color: #ff2d55;
    margin-top: 0.6rem;
}

.pull--01 {
    top: 24%;
    left: 30%;
    transform: rotate(-3deg);
    border-top: 4px solid #ff2d55;
    border-bottom: 4px solid #ff2d55;
    padding: 0.6rem 0;
    background: #f5f5f5;
}

.pull--02 {
    top: 58%;
    left: 56%;
    transform: rotate(4deg);
    color: #0066ff;
    text-align: right;
    background: #ffcc00;
    padding: 0.5rem 0.8rem;
    border: 3px solid #1a1a1a;
}

/* ===== ARTISTS ===== */
.artists {
    position: relative;
    padding: 5rem 2.4rem 6rem;
    background: #f5f5f5;
    border-top: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
}

.artists::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 8%;
    width: 140px;
    height: 28px;
    background: rgba(0, 102, 255, 0.7);
    transform: rotate(-5deg);
}

.artists-header {
    margin-bottom: 2.2rem;
}

.artists-title {
    font-family: "Abril Fatface", serif;
    font-size: clamp(2rem, 6vw, 4.4rem);
    color: #1a1a1a;
    line-height: 1;
}

.artists-sub {
    font-family: "Permanent Marker", cursive;
    color: #00cc88;
    font-size: 1rem;
    display: inline-block;
    margin-top: 0.4rem;
    transform: rotate(-1deg);
}

.artists-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 0.9rem;
    align-items: center;
}

.artist-pill {
    font-family: "Permanent Marker", cursive;
    padding: 0.5rem 1rem;
    border: 3px solid #1a1a1a;
    background: #f5f5f5;
    box-shadow: 3px 3px 0 #333333;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
    cursor: default;
}

.artist-pill:nth-child(odd)  { transform: rotate(-2deg); }
.artist-pill:nth-child(even) { transform: rotate(2deg); }
.artist-pill:nth-child(3n)   { transform: rotate(-1deg); }
.artist-pill:nth-child(5n)   { transform: rotate(3deg); }

.artist-pill:hover { transform: translate(-2px, -2px) rotate(0); }

.artist-pill--red    { background: #ff2d55; color: #f5f5f5; }
.artist-pill--blue   { background: #0066ff; color: #f5f5f5; }
.artist-pill--yellow { background: #ffcc00; color: #1a1a1a; }
.artist-pill--green  { background: #00cc88; color: #1a1a1a; }
.artist-pill--black  { background: #1a1a1a; color: #f5f5f5; }

/* ===== CONTACT ===== */
.contact {
    position: relative;
    padding: 6rem 2.4rem;
    background: #ffcc00;
    overflow: hidden;
    min-height: 70vh;
}

.contact::before {
    content: "";
    position: absolute;
    top: 30%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: #ff2d55;
    border-radius: 50%;
    opacity: 0.15;
}

.contact-card {
    position: absolute;
    width: clamp(240px, 26vw, 320px);
    background: #f5f5f5;
    border: 4px solid #1a1a1a;
    box-shadow: 6px 6px 0 #333333;
    padding: 1.6rem 1.4rem 1.4rem;
    z-index: 4;
}

.contact-card--visit {
    top: 12%;
    left: 6%;
    transform: rotate(-3deg);
    border-color: #0066ff;
    background: #f5f5f5;
}

.contact-card--talk {
    top: 6%;
    right: 8%;
    transform: rotate(2deg);
    border-color: #ff2d55;
    background: #1a1a1a;
    color: #f5f5f5;
}
.contact-card--talk .contact-h { color: #ffcc00; }
.contact-card--talk .contact-meta { color: #00cc88; }
.contact-card--talk .contact-mail { color: #ff2d55; border-bottom: 2px dashed #ff2d55; }

.contact-card--mail {
    bottom: 8%;
    left: 32%;
    transform: rotate(-1deg);
    border-color: #00cc88;
    background: #f5f5f5;
}

.contact-tape {
    position: absolute;
    width: 90px;
    height: 22px;
    top: -10px;
    left: 22%;
    background: rgba(0, 102, 255, 0.65);
    transform: rotate(-6deg);
}
.contact-tape--b { background: rgba(0, 204, 136, 0.75); transform: rotate(8deg); left: 50%; }
.contact-tape--c { background: rgba(255, 45, 85, 0.7); transform: rotate(-4deg); left: 35%; }

.contact-h {
    font-family: "Abril Fatface", serif;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    line-height: 1;
    color: #ff2d55;
}

.contact-line {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.15rem;
}

.contact-meta {
    font-style: italic;
    color: #333333;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.contact-mail {
    font-family: "Permanent Marker", cursive;
    color: #0066ff;
    border-bottom: 2px dashed #0066ff;
}

.contact-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.contact-glyph {
    position: absolute;
    font-family: "Abril Fatface", serif;
    font-size: clamp(8rem, 18vw, 18rem);
    line-height: 1;
    color: #1a1a1a;
    opacity: 0.18;
}

.contact-glyph--1 { top: 8%;  left: 38%; transform: rotate(-12deg); }
.contact-glyph--2 { bottom: 4%; right: 6%; transform: rotate(8deg); color: #0066ff; opacity: 0.25; }
.contact-glyph--3 { top: 40%; left: 60%; transform: rotate(-4deg); color: #ff2d55; opacity: 0.22; }
.contact-glyph--4 { bottom: 30%; left: 4%; transform: rotate(20deg); color: #00cc88; opacity: 0.4; }

/* ===== FOOTER ===== */
.footer {
    background: #1a1a1a;
    color: #f5f5f5;
    padding: 2.2rem 2.4rem;
    border-top: 4px solid #ff2d55;
}

.footer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-mark {
    font-family: "Abril Fatface", serif;
    font-size: 2.2rem;
    color: #ff2d55;
    line-height: 1;
}

.footer-text {
    font-family: "Permanent Marker", cursive;
    font-size: 1rem;
}

.footer-text--alt { color: #ffcc00; }

.footer-row--small {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #f5f5f5;
    opacity: 0.7;
    font-family: "Work Sans", sans-serif;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .topbar {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .nav { gap: 0.7rem; }

    .hero-stamp { display: none; }

    .gallery-board {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        padding: 1rem 0;
    }

    .card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 92%;
        margin: 0 auto;
    }

    .card--01 { transform: rotate(-3deg); align-self: flex-start; }
    .card--02 { transform: rotate(2deg);  align-self: flex-end; }
    .card--03 { transform: rotate(-2deg); align-self: flex-start; }
    .card--04 { transform: rotate(3deg);  align-self: flex-end; }
    .card--05 { transform: rotate(-3deg); align-self: flex-start; }
    .card--06 { transform: rotate(2deg);  align-self: flex-end; }
    .card--07 { transform: rotate(-2deg); align-self: center; }

    .pull, .splat, .sticker { display: none; }

    .contact {
        min-height: auto;
        padding: 4rem 1.4rem;
    }

    .contact-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 92%;
        margin: 0 auto 1.6rem;
    }

    .contact-card--visit { transform: rotate(-2deg); }
    .contact-card--talk  { transform: rotate(2deg); }
    .contact-card--mail  { transform: rotate(-1deg); }

    .manifesto-stamp--one,
    .manifesto-stamp--two,
    .manifesto-stamp--three { font-size: 1rem; padding: 0.4rem 0.8rem; }

    .manifesto-stamp--one { top: 1rem; left: 4vw; }
    .manifesto-stamp--two { top: auto; bottom: 28rem; right: 2vw; }
    .manifesto-stamp--three { bottom: 1rem; left: 4vw; }

    .hero-arrow { right: 1.4rem; bottom: 1.4rem; }
}

@media (max-width: 520px) {
    .hero { padding: 4rem 1.4rem 4rem; }
    .manifesto { padding: 4rem 1.4rem; }
    .gallery { padding: 4rem 1rem 3rem; }
    .artists { padding: 3.5rem 1.4rem 4.5rem; }
    .contact { padding: 4rem 1rem; }

    .hero-layer--marker { font-size: clamp(1.2rem, 5vw, 1.8rem); }
    .tag-piece { font-size: clamp(1.2rem, 5vw, 1.8rem); }
}