/* ============================================================
   recycle.games - Art Deco Industrial Occultism
   Color Palette:
     #0A1F12 - Recycled Midnight (primary dark)
     #2D5A3D - Verdigris (structural green)
     #8B6B3D - Patina Brass (deco gold)
     #3A7D52 - Moss Glow (hover/secondary)
     #E8DFD0 - Aged Ivory (text/light)
     #B87333 - Tarnished Copper (accent)
     #0D2B18 - Forest Obsidian (deep bg)
     #4A6E55 - Weathered Sage (surface)
     #C9943A - bright gold (gradient accent)
   Fonts:
     Poiret One - headlines/display
     Spectral - body/reading
     Familjen Grotesk - accent/labels
   ============================================================ */

/* === BASE RESET & GLOBALS === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    background-color: #0A1F12;
    color: #E8DFD0;
    font-family: 'Spectral', Georgia, serif;
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
}

/* === LEATHER TEXTURE BACKGROUNDS === */
.leather-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* Fine grain leather: tiny radial-gradient dots at 3% opacity */
    background:
        radial-gradient(circle at 20% 30%, rgba(139,107,61,0.03) 1px, transparent 1px),
        radial-gradient(circle at 60% 70%, rgba(139,107,61,0.02) 1.5px, transparent 1.5px),
        radial-gradient(circle at 80% 20%, rgba(139,107,61,0.03) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(139,107,61,0.02) 2px, transparent 2px),
        /* Tooled leather: medium geometric overlay */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(45,90,61,0.04) 10px,
            rgba(45,90,61,0.04) 11px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(45,90,61,0.03) 10px,
            rgba(45,90,61,0.03) 11px
        ),
        /* Distressed: large-scale irregular opacity */
        radial-gradient(ellipse at 25% 25%, rgba(139,107,61,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(184,115,51,0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(139,107,61,0.02) 0%, transparent 60%);
    background-size:
        4px 4px,
        6px 6px,
        5px 5px,
        3px 3px,
        14px 14px,
        14px 14px,
        100% 100%,
        100% 100%,
        100% 100%;
}

.leather-bg-deep {
    background-color: #0A1F12;
}

/* === PLATE BASE === */
.plate {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plate-coda {
    min-height: 50vh;
}

/* === PILASTERS (margin decorative lines) === */
.pilaster {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(45, 90, 61, 0.3);
    z-index: 2;
    pointer-events: none;
}

.pilaster-left {
    left: calc(100% / 12);
}

.pilaster-right {
    right: calc(100% / 12);
}

/* === TRANSOM DIVIDERS === */
.transom {
    position: relative;
    height: 4rem;
    background: #0D2B18;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 5;
}

.chevron-border {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, #8B6B3D 25%, transparent 25%) -1rem 0,
        linear-gradient(225deg, #8B6B3D 25%, transparent 25%) -1rem 0,
        linear-gradient(315deg, #8B6B3D 25%, transparent 25%),
        linear-gradient(45deg, #8B6B3D 25%, transparent 25%);
    background-size: 2rem 2rem;
    background-color: transparent;
    opacity: 0.15;
}

/* === PLATE 1: HERO === */
.plate-hero {
    background: #0A1F12;
    flex-direction: column;
}

/* Sunburst */
.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120vmax;
    height: 120vmax;
    z-index: 1;
    pointer-events: none;
}

.sunburst-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 60vmax;
    transform-origin: 0 0;
    transform: rotate(calc(var(--ray-index) * 15deg));
    background: linear-gradient(
        to bottom,
        rgba(139, 107, 61, 0.35) 0%,
        rgba(139, 107, 61, 0.08) 40%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sunburst-ray.visible {
    opacity: 1;
}

/* Inverted sunburst for coda */
.sunburst-inverted .sunburst-ray {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(139, 107, 61, 0.08) 40%,
        rgba(139, 107, 61, 0.3) 80%,
        rgba(201, 148, 58, 0.15) 100%
    );
    width: 3px;
}

/* Hero title */
.hero-title-container {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-title {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: #E8DFD0;
    text-shadow:
        0 0 40px rgba(139, 107, 61, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5);
    transition: letter-spacing 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.hero-title.expanded {
    letter-spacing: 0.15em;
}

.hero-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8B6B3D, #C9943A, #8B6B3D, transparent);
    margin: 1rem auto 0;
    opacity: 0;
    transition: opacity 0.8s ease 0.6s;
}

.hero-title.expanded::after {
    opacity: 1;
}

/* Hero navigation hexagons */
.hero-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 600px);
    height: min(80vw, 600px);
    z-index: 4;
    pointer-events: none;
}

.nav-hex {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    pointer-events: all;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-hex-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.nav-hex-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.nav-hex-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.nav-hex-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.hex-shape {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #8B6B3D 0%, #C9943A 50%, #8B6B3D 100%);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
    position: absolute;
}

.hex-label {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #E8DFD0;
    opacity: 0;
    position: absolute;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-hex-top .hex-label { top: -1.5rem; }
.nav-hex-right .hex-label { right: -5rem; }
.nav-hex-bottom .hex-label { bottom: -1.5rem; }
.nav-hex-left .hex-label { left: -5rem; }

.nav-hex:hover .hex-shape {
    transform: rotate(30deg);
    filter: brightness(1.15);
}

.nav-hex:hover .hex-label {
    opacity: 1;
}

/* === PLATE 2: EDITORIAL === */
.plate-editorial {
    background: #0A1F12;
    align-items: stretch;
}

.editorial-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    width: calc(100% - 2 * (100% / 12));
    margin: 0 auto;
    padding: 4rem 2rem;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

.editorial-text {
    padding: 2rem 3rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Section markers */
.section-marker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.marker-label {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #8B6B3D;
}

.marker-line {
    flex: 0 0 3rem;
    height: 1px;
    background: linear-gradient(90deg, #8B6B3D, transparent);
}

.marker-text {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #4A6E55;
}

/* Text block */
.text-block {
    position: relative;
}

.text-block p {
    font-family: 'Spectral', serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    color: #E8DFD0;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.text-block p.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Drop cap */
.drop-cap-paragraph::first-letter {
    font-family: 'Poiret One', sans-serif;
    font-size: 4.5rem;
    float: left;
    line-height: 0.8;
    padding-right: 0.5rem;
    padding-top: 0.1rem;
    color: #B87333;
    text-shadow:
        1px 1px 0 rgba(10, 31, 18, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 0 rgba(184, 115, 51, 0.3);
}

/* Pull quote */
.pull-quote {
    position: relative;
    padding: 2rem 3rem;
    margin: 2rem 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: repeating-linear-gradient(
        90deg,
        #8B6B3D 0px,
        #8B6B3D 8px,
        transparent 8px,
        transparent 16px,
        #8B6B3D 16px,
        #8B6B3D 24px,
        transparent 24px,
        transparent 32px
    ) 2;
}

.pull-quote p {
    font-family: 'Spectral', serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.6;
    font-style: italic;
    color: #E8DFD0;
}

.quote-mark {
    font-family: 'Spectral', serif;
    font-weight: 600;
    font-size: 4rem;
    color: #8B6B3D;
    line-height: 1;
    position: absolute;
}

.quote-mark-open {
    top: -0.5rem;
    left: -0.5rem;
}

.quote-mark-close {
    bottom: -1.5rem;
    right: 0.5rem;
}

/* Editorial deco panel */
.editorial-deco {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
}

.deco-facet {
    width: 80%;
    aspect-ratio: 1;
    max-width: 120px;
    position: relative;
    transition: transform 0.6s ease;
}

.deco-facet-1 {
    background: conic-gradient(from 0deg, transparent 0deg, rgba(139,107,61,0.2) 15deg, transparent 30deg, transparent 60deg, rgba(139,107,61,0.15) 75deg, transparent 90deg, transparent 120deg, rgba(139,107,61,0.2) 135deg, transparent 150deg, transparent 180deg, rgba(139,107,61,0.15) 195deg, transparent 210deg, transparent 240deg, rgba(139,107,61,0.2) 255deg, transparent 270deg, transparent 300deg, rgba(139,107,61,0.15) 315deg, transparent 330deg, transparent 360deg);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.deco-facet-2 {
    background: repeating-conic-gradient(
        rgba(45,90,61,0.25) 0deg 10deg,
        transparent 10deg 20deg
    );
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.deco-facet-3 {
    background: conic-gradient(from 45deg, rgba(184,115,51,0.2), transparent 30deg, rgba(184,115,51,0.15) 60deg, transparent 90deg, rgba(184,115,51,0.2) 120deg, transparent 150deg, rgba(184,115,51,0.15) 180deg, transparent 210deg, rgba(184,115,51,0.2) 240deg, transparent 270deg, rgba(184,115,51,0.15) 300deg, transparent 330deg, rgba(184,115,51,0.2) 360deg);
    border-radius: 50%;
}

.deco-facet-4 {
    width: 60%;
    max-width: 90px;
    background: linear-gradient(135deg, rgba(139,107,61,0.3), rgba(201,148,58,0.15));
    clip-path: polygon(
        10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%
    );
}

.deco-facet-5 {
    width: 70%;
    max-width: 100px;
    background: repeating-linear-gradient(
        0deg,
        rgba(45,90,61,0.2) 0px,
        rgba(45,90,61,0.2) 2px,
        transparent 2px,
        transparent 8px
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.deco-facet-6 {
    width: 50%;
    max-width: 80px;
    background: conic-gradient(from 0deg at 50% 100%, rgba(139,107,61,0.3) 0deg, transparent 30deg, rgba(139,107,61,0.2) 60deg, transparent 90deg, rgba(139,107,61,0.3) 120deg, transparent 150deg, transparent 180deg, transparent 360deg);
}

/* === PLATE 3: GALLERY === */
.plate-gallery {
    background: #0D2B18;
    flex-direction: column;
    padding: 4rem 2rem;
}

.gallery-marker {
    margin-bottom: 3rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    width: calc(100% - 2 * (100% / 12));
    max-width: 1000px;
    position: relative;
    z-index: 2;
}

.gallery-tile {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.tile-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(10, 31, 18, 0.6);
    border: 1px solid rgba(45, 90, 61, 0.3);
    transition: border-color 0.3s ease, filter 0.2s ease;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, filter 0.2s ease;
}

.tile-inner.revealed {
    opacity: 1;
    transform: scale(1);
}

.gallery-tile:hover .tile-inner {
    border-color: rgba(139, 107, 61, 0.5);
    filter: brightness(1.15);
}

.tile-label {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #8B6B3D;
    opacity: 0.7;
}

/* Tile patterns */
.tile-pattern {
    width: 70%;
    height: 70%;
    position: relative;
}

.tile-sunburst-fragment {
    background: conic-gradient(
        from 0deg at 50% 100%,
        rgba(139,107,61,0.3) 0deg,
        transparent 15deg,
        rgba(139,107,61,0.2) 30deg,
        transparent 45deg,
        rgba(139,107,61,0.3) 60deg,
        transparent 75deg,
        rgba(139,107,61,0.2) 90deg,
        transparent 105deg,
        rgba(139,107,61,0.3) 120deg,
        transparent 135deg,
        transparent 180deg,
        transparent 360deg
    );
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.tile-chevron-stack {
    background:
        linear-gradient(135deg, transparent 40%, rgba(45,90,61,0.4) 40%, rgba(45,90,61,0.4) 42%, transparent 42%),
        linear-gradient(225deg, transparent 40%, rgba(45,90,61,0.4) 40%, rgba(45,90,61,0.4) 42%, transparent 42%),
        linear-gradient(135deg, transparent 30%, rgba(139,107,61,0.3) 30%, rgba(139,107,61,0.3) 32%, transparent 32%),
        linear-gradient(225deg, transparent 30%, rgba(139,107,61,0.3) 30%, rgba(139,107,61,0.3) 32%, transparent 32%),
        linear-gradient(135deg, transparent 20%, rgba(45,90,61,0.3) 20%, rgba(45,90,61,0.3) 22%, transparent 22%),
        linear-gradient(225deg, transparent 20%, rgba(45,90,61,0.3) 20%, rgba(45,90,61,0.3) 22%, transparent 22%);
}

.tile-lozenge-web {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 12px,
            rgba(139,107,61,0.25) 12px,
            rgba(139,107,61,0.25) 14px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            rgba(184,115,51,0.2) 12px,
            rgba(184,115,51,0.2) 14px
        );
}

.tile-ziggurat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.tile-ziggurat::before {
    content: '';
    display: block;
    width: 30%;
    height: 20%;
    background: linear-gradient(135deg, #8B6B3D 0%, #C9943A 50%, #8B6B3D 100%);
    opacity: 0.35;
}

.tile-ziggurat::after {
    content: '';
    display: block;
    width: 60%;
    height: 20%;
    background: linear-gradient(135deg, #8B6B3D 0%, #C9943A 50%, #8B6B3D 100%);
    opacity: 0.25;
    margin-top: -1px;
}

.tile-radial-echo {
    background:
        radial-gradient(circle at center, transparent 20%, rgba(45,90,61,0.3) 21%, transparent 22%),
        radial-gradient(circle at center, transparent 35%, rgba(139,107,61,0.25) 36%, transparent 37%),
        radial-gradient(circle at center, transparent 50%, rgba(45,90,61,0.2) 51%, transparent 52%),
        radial-gradient(circle at center, transparent 65%, rgba(139,107,61,0.15) 66%, transparent 67%),
        radial-gradient(circle at center, transparent 80%, rgba(45,90,61,0.1) 81%, transparent 82%);
}

.tile-mobius-abstract {
    position: relative;
}

.tile-mobius-abstract::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border: 2px solid rgba(139,107,61,0.3);
    clip-path: polygon(50% 0%, 100% 87%, 0% 87%);
}

.tile-mobius-abstract::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    border: 2px solid rgba(184,115,51,0.25);
    clip-path: polygon(50% 100%, 0% 13%, 100% 13%);
}

/* === PLATE 4: MANIFESTO === */
.plate-manifesto {
    background: #0A1F12;
    flex-direction: column;
}

.manifesto-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 90%;
    padding: 4rem 0;
}

.manifesto-marker {
    margin-bottom: 3rem;
}

.manifesto-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manifesto-line {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #E8DFD0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    line-height: 1.3;
}

.manifesto-line.revealed {
    opacity: 1;
    transform: translateY(0);
}

.manifesto-line-accent.revealed {
    color: #B87333;
    text-shadow: 0 0 30px rgba(184, 115, 51, 0.3);
}

/* === PLATE 5: CODA === */
.plate-coda {
    background: #0D2B18;
    flex-direction: column;
}

.coda-text {
    position: relative;
    z-index: 3;
    text-align: center;
}

.coda-phrase {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #E8DFD0;
    opacity: 0;
    transition: opacity 1s ease;
}

.coda-phrase.revealed {
    opacity: 1;
}

.coda-sub {
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #8B6B3D;
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.coda-sub.revealed {
    opacity: 1;
}

/* === DIAGONAL CLIP-PATH TRANSITIONS === */
.plate-editorial {
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    margin-top: -2rem;
    margin-bottom: -2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.plate-gallery {
    clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
    margin-top: -1rem;
    margin-bottom: -1rem;
}

.plate-manifesto {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    margin-top: -1rem;
    margin-bottom: -1rem;
}

/* === HOVER TARNISHED-TO-POLISHED === */
.nav-hex .hex-shape,
.gallery-tile .tile-inner,
.deco-facet {
    filter: saturate(0.7);
    transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, border-color 0.3s ease, opacity 0.5s ease;
}

.nav-hex:hover .hex-shape,
.gallery-tile:hover .tile-inner,
.deco-facet:hover {
    filter: saturate(1) brightness(1.15);
}

/* === RESPONSIVE === */

/* Tablet */
@media (max-width: 768px) {
    .pilaster {
        display: none;
    }

    .editorial-grid {
        grid-template-columns: 1fr;
        width: 90%;
        padding: 3rem 1rem;
    }

    .editorial-deco {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .deco-facet {
        width: 60px;
        max-width: 60px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 90%;
    }

    .hero-nav {
        width: min(90vw, 400px);
        height: min(90vw, 400px);
    }

    .plate-editorial,
    .plate-gallery,
    .plate-manifesto {
        clip-path: none;
        margin: 0;
    }

    .editorial-text {
        padding: 1rem 0;
    }
}

/* Mobile */
@media (max-width: 480px) {
    body {
        line-height: calc(1.75 * 1.5);
    }

    .hero-nav {
        width: 85vw;
        height: 85vw;
    }

    .nav-hex {
        width: 36px;
        height: 36px;
    }

    .hex-shape {
        width: 30px;
        height: 30px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .manifesto-content {
        width: 95%;
        padding: 2rem 0;
    }

    .pull-quote {
        padding: 1.5rem 1rem;
    }

    .quote-mark {
        font-size: 2.5rem;
    }

    .quote-mark-open {
        top: -0.3rem;
        left: -0.2rem;
    }
}