/* ========================================
   HRMNY Website Styles
   ======================================== */

/* Fonts */
@font-face {
    font-family: 'Sohne-Halbfett';
    src: url('assets/Sohne-Halbfett.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Sohne-Buch';
    src: url('assets/Sohne-Buch.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Disable window scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Scroll Container */
.scroll-container {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    /* JS controls scroll behavior - no CSS snap */
}

/* ========================================
   Header
   ======================================== */

.site-header {
    position: fixed;
    top: 40px;
    left: 40px;
    right: 40px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    /* Allow interaction with content below if needed, though nav-items will re-enable */
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    /* Spacing from icon */
    gap: 40px;
}

.nav-item {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    pointer-events: auto;
    transition: color 0.5s ease-in-out;
}

/* Text nav items need overflow hidden for slide-up mask */
.header-right .nav-item {
    overflow: hidden;
}

/* Text links slide-up animation (mask effect) */
.header-right .nav-item a,
.header-right .nav-item span {
    display: block;
    transform: translateY(100%);
    animation: slideUpMask 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Icon container - overflow hidden creates the mask for slide-up */
.header-left .nav-item {
    overflow: hidden;
}

/* Once animation completes, allow overflow for heartbeat scaling */
.header-left .nav-item.loaded {
    overflow: visible;
}

/* Icon link wrapper - just a clickable container */
.header-left .nav-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Header Icon - gets the slide-up mask animation */
.header-icon {
    width: 24px;
    height: auto;
    transform-origin: center;
    transform: translateY(150%);
    animation: slideUpMask 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 1.1s;
}



/* Disable header animations on events page */
.events-page .header-right .nav-item a,
.events-page .header-right .nav-item span,
.events-page .header-icon {
    animation: none;
    transform: translateY(0);
}

/* Text link specific styles */
.header-right .nav-item a {
    text-decoration: none;
    color: inherit;
    position: relative;
    padding-bottom: 2px;
    cursor: pointer;
}

/* Premium hover effect: Underline slide-in from left (text links only) */
.header-right .nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-right .nav-item a:hover::after {
    transform: scaleX(1);
}

/* Subtle lift on hover (text links only) */
.header-right .nav-item a:hover {
    transform: translateY(-1px);
    transition: transform 0.3s ease;
}

/* Heartbeat animation on hover - only works after .loaded is applied */
.header-left .nav-item.loaded .header-icon {
    animation: none;
    transform: translateY(0);
}

.header-left .nav-item.loaded:hover .header-icon,
.header-left .nav-item.loaded a:hover .header-icon {
    animation: heartbeat 2s ease-in-out infinite;
}

.header-icon path {
    transition: fill 0.5s ease-in-out;
}

/* Header Black State (Light Backgrounds) */
.site-header.header-black .nav-item {
    color: #000000;
}

.site-header.header-black .header-icon path {
    fill: #EF504C;
}



.nav-item:nth-child(1) a {
    animation-delay: 1.2s;
}

.nav-item:nth-child(2) a {
    animation-delay: 1.3s;
}

.nav-item:nth-child(3) a {
    animation-delay: 1.4s;
}

.nav-item:nth-child(4) a {
    animation-delay: 1.5s;
}

/* ========================================
   Hero Section
   ======================================== */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

/* Hero Background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/Artworks/hrmny_artwork_hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Dark Overlay - 20% opacity for brightness reduction */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wordmark Container - Creates mask for slide-in animation */
.wordmark {
    width: 180px;
    height: auto;
    overflow: hidden;
}

/* Wordmark SVG - Slides up from below */
.wordmark img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(150%);
    animation: slideUpMask 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

/* ========================================
   Vision Container (Sections B & C combined)
   ======================================== */

.vision-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Left side: Stacked images */
.vision-images {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.vision-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.vision-image.active {
    opacity: 1;
}

.vision-image.pink {
    background-image: url('assets/Artworks/hrmny_artwork_pink.jpg');
}

.vision-image.purple {
    background-image: url('assets/Artworks/hrmny_artwork_purple.jpg');
}

/* Right side: Text area */
.vision-right {
    flex: 1;
    background-color: #E3E3E0;
    display: flex;
    align-items: flex-end;
    padding: 60px;
    position: relative;
}

.vision-text {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 32px;
    line-height: 1.2;
    color: #000000;
    max-width: 700px;
}

.vision-text p {
    margin-bottom: 32px;
}

.vision-text p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Welcome Section
   ======================================== */

/* ========================================
   Welcome & Footer Wrapper (Shared Background)
   ======================================== */

.welcome-footer-wrapper {
    position: relative;
    width: 100%;
}

.welcome-footer-background {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: url('assets/Artworks/hrmny_artwork_red1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    overflow: hidden;
}

/* ========================================
   Welcome Section
   ======================================== */

.welcome-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: transparent;
    /* Background is now in wrapper */
    overflow: hidden;
    /* Ensure content sits above the sticky background */
    margin-top: -100vh;
    z-index: 1;
}

.welcome-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.2;
    max-width: 1000px;
    /* transition for scroll up effect */
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.8s ease;
}

.welcome-text p {
    margin-bottom: 24px;
}

/* State when footer is active (overlay) */
.welcome-section.footer-active .welcome-text {
    transform: translateY(-25vh);
    /* Move up 25% of viewport */
}

/* Allow clicks to pass through to footer when active */
.welcome-section {
    pointer-events: none;
}

.welcome-text {
    pointer-events: auto;
}

.welcome-text p:first-child {
    font-family: 'Sohne-Buch', sans-serif;
}

.welcome-text p:last-child {
    font-family: 'Sohne-Halbfett', sans-serif;
    margin-bottom: 0;
}

/* ========================================
   Animations
   ======================================== */

@keyframes slideUpMask {
    from {
        transform: translateY(150%);
    }

    to {
        transform: translateY(0);
    }
}

/* Heartbeat animation - two beats then rest */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    /* First beat */
    3% {
        transform: scale(1.12);
    }

    6% {
        transform: scale(1);
    }

    /* Second beat (slightly delayed) */
    10% {
        transform: scale(1.12);
    }

    13% {
        transform: scale(1);
    }

    /* Rest for remainder of animation (1.5s of 2s total = 75%) */
    100% {
        transform: scale(1);
    }
}

/* ========================================
   Utility Classes
   ======================================== */

/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* For Firefox */
* {
    scrollbar-width: none;
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    /* Half height overlay */
    background-color: transparent;
    color: #ffffff;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    /* High z-index to overlay content */
    pointer-events: none;
    /* Initially allow clicks to pass through */
}

/* Footer Animation States */
.footer-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    /* Reduced gap for half height */
    flex: 1;
    opacity: 0;
    transform: translateY(100%);
    /* Start hidden below fold */
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer.animate-in {
    pointer-events: auto;
    /* Enable interaction when visual */
}

.site-footer.animate-in .footer-container {
    opacity: 1;
    transform: translateY(0);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 40px;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-link {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 300px;
}

.newsletter-label {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    opacity: 0.7;
}

.newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 8px;
    transition: border-color 0.3s ease;
}

.newsletter-form:focus-within {
    border-bottom-color: #ffffff;
}

.newsletter-form input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 16px;
    width: 100%;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.newsletter-form button {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    transition: transform 0.3s ease;
}

.newsletter-form button:hover {
    transform: translateX(4px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12px;
    opacity: 0.5;
    padding-bottom: 20px;
}

.footer-info p {
    margin-bottom: 4px;
}

.footer-info p:last-child {
    margin-bottom: 0;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 20px;
        min-height: auto;
    }

    .footer-top {
        flex-direction: column;
        gap: 60px;
    }

    .footer-newsletter {
        width: 100%;
        min-width: unset;
    }
}

/* ========================================
   Footer — inner-page variant
   Same brand footer, in normal document flow (no scroll-jack reveal),
   for every non-home page: events, shop, product, cart, checkout, etc.
   It carries the light tonal ground of the page it closes, so only the
   home page keeps the black overlay footer.
   ======================================== */

.site-footer--static {
    position: relative;
    height: auto;
    min-height: 0;
    bottom: auto;
    /* inherits the body ground, so the footer always matches its page */
    background-color: inherit;
    color: var(--shell-ink, #101010);
    border-top: 1px solid var(--shell-hairline, rgba(16, 16, 16, 0.1));
    pointer-events: auto;
}

/* The dark scrim belongs to the home reveal, never to a light page */
.site-footer--static::before {
    display: none;
}

.site-footer--static .footer-container {
    opacity: 1;
    transform: none;
    transition: none;
    flex: none;
}

.site-footer--static .footer-link {
    color: var(--shell-ink, #101010);
}

.site-footer--static .footer-link:hover {
    color: var(--shell-accent, #EF504C);
    opacity: 1;
}

.site-footer--static .newsletter-label {
    color: var(--shell-muted, rgba(16, 16, 16, 0.55));
    opacity: 1;
}

.site-footer--static .newsletter-form {
    border-bottom-color: rgba(16, 16, 16, 0.22);
}

.site-footer--static .newsletter-form:focus-within {
    border-bottom-color: var(--shell-ink, #101010);
}

.site-footer--static .newsletter-form input {
    color: var(--shell-ink, #101010);
}

.site-footer--static .newsletter-form input::placeholder {
    color: var(--shell-faint, rgba(16, 16, 16, 0.38));
}

.site-footer--static .newsletter-form button {
    color: var(--shell-ink, #101010);
}

.site-footer--static .footer-bottom {
    color: var(--shell-muted, rgba(16, 16, 16, 0.55));
    opacity: 1;
}

@media (max-width: 768px) {
    .site-footer--static {
        padding: 40px 20px calc(24px + env(safe-area-inset-bottom));
    }
}

/* ========================================
   Events Page
   ======================================== */

.events-page {
    background-color: #E3E3E0;
    overflow: auto;
}

/* ========================================
   Merchandise Page
   ======================================== */

.merchandise-page {
    background-color: #E3E3E0;
    overflow: auto;
    width: 100%;
    min-height: 100vh;
}

.merchandise-main {
    padding-top: 100px;
    /* Header space */
    padding-bottom: 60px;
    width: 100%;
}

.merch-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.merch-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 100px;
    /* Big impact like Vision text */
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: #000000;
    margin-bottom: 80px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .merch-title {
        font-size: 60px;
        margin-bottom: 60px;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Product Image Area */
.product-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #f0f0f0;
    /* Light gray bg for transparent images */
    position: relative;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.6s ease;
    display: block;
}

.img-front {
    position: relative;
    z-index: 10;
}

.img-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 0;
}

.product-card:hover .img-back {
    opacity: 1;
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

.placeholder-img {
    width: 100%;
    height: 100%;
    /* Gradient to simulate a premium product shot lighting */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.5, 1);
}

.product-card:hover .placeholder-img {
    transform: scale(1.05);
}

/* Product Details */
.product-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.product-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
}

.product-price {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 16px;
    color: #000000;
    opacity: 0.6;
    margin: 0;
}

/* Order Button */
.merch-button {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
    padding: 14px 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 120px;
}

.merch-button:hover {
    background-color: #000000;
    color: #FFFFFF;
}

.events-wall {
    width: 100%;
    min-height: 100vh;
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

@media (max-width: 1000px) {
    .events-wall {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .events-wall {
        grid-template-columns: 1fr;
    }
}

/* Event Card */
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Event Poster */
.event-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.event-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.5, 1);
}

/* Subtle zoom on hover */
.event-card:hover .event-poster img {
    transform: scale(1.02);
}

/* Event Details - Always visible, horizontal layout */
.event-details {
    background-color: #FFFFFF;
    padding: 20px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-grow: 1;
}

/* Event Info (title + date wrapper) */
.event-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Typography */
.event-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

.event-date {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.5;
    margin: 0;
}

/* Ticket Button - Filled Red */
.event-button {
    display: inline-block;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background-color: #EF504C;
    color: #FFFFFF;
    padding: 14px 24px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.5, 0, 0.5, 1),
        transform 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}

.event-button:hover {
    background-color: #d94440;
    transform: translateY(-2px);
}

/* Sold Out State */
.event-button.sold-out {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.4);
    cursor: default;
}

.event-button.sold-out:hover {
    background-color: transparent;
    transform: none;
}

/* ========================================
   Contact Page
   ======================================== */

.contact-page {
    background-color: #E3E3E0;
    color: #000000;
    height: 100vh;
    overflow: hidden;
    /* Prevent body scroll if container handles it or fits in view */
}

.contact-main {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    /* Match header padding */
}

/* Split Layout */
.contact-split {
    display: flex;
    width: 100%;
    max-width: 1200px;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 100px;
    /* Space from header */
}

/* Left Side */
.contact-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 80px;
    /* Big Statement */
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
}

.contact-email {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 24px;
    color: #000000;
    /* Dark text */
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.contact-email:hover {
    opacity: 1;
}

/* Right Side */
.contact-right {
    flex: 1;
    max-width: 500px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-group {
    position: relative;
    width: 100%;
}

/* Screen reader only label utility if not present */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    /* Dark border */
    color: #000000;
    /* Dark text */
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 16px;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
    border-radius: 0;
    /* Strict square corners */
}

.contact-form textarea {
    resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    /* Dark placeholder */
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-bottom-color: #000000;
}

.contact-submit {
    align-self: flex-start;
    background-color: transparent;
    border: 1px solid #000000;
    /* Dark border */
    color: #000000;
    /* Dark text */
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: 0;
    /* Strict square corners */
}

.contact-submit:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .contact-split {
        flex-direction: column;
        gap: 60px;
        align-items: stretch;
    }

    .contact-title {
        font-size: 48px;
    }

    .contact-right {
        max-width: 100%;
    }

    .contact-main {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding-bottom: 40px;
    }
}

/* Past Event Treatment */
.event-past .event-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: background 0.4s ease;
}

.event-past .event-poster img {
    filter: grayscale(40%) contrast(0.95);
    transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.5, 0, 0.5, 1);
}

/* Past event hover - bring some color back */
.event-past:hover .event-poster::after {
    background: rgba(0, 0, 0, 0.15);
}

.event-past:hover .event-poster img {
    filter: grayscale(20%) contrast(0.98);
}
/* ============================================================
   SHELL PAGES (Events / Shop / Contact / Cart)
   A cleaner, lighter tonal ground than the old cement grey,
   with a translucent blended header bar.
   ============================================================ */

.page-shell {
    --shell-bg: #F5F4F1;
    --shell-surface: #FCFBF9;
    --shell-ink: #101010;
    --shell-muted: rgba(16, 16, 16, 0.55);
    --shell-faint: rgba(16, 16, 16, 0.38);
    --shell-hairline: rgba(16, 16, 16, 0.1);
    --shell-accent: #EF504C;
    background-color: var(--shell-bg);
    color: var(--shell-ink);
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

html:has(body.page-shell) {
    overflow-y: auto;
}

/* Header bar: full-width, translucent, blends with the page */
.page-shell .site-header {
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 40px;
    background-color: rgba(248, 247, 244, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border-bottom: 1px solid var(--shell-hairline);
}

/* No entry animations on inner pages */
.page-shell .header-right .nav-item a,
.page-shell .header-right .nav-item span,
.page-shell .header-icon {
    animation: none;
    transform: translateY(0);
}

/* Current page indicator */
.page-shell .header-right .nav-item a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Cart affordance — robust, beautifully engineered, zero layout shift */
.header-right .nav-item-cart,
.header-right .nav-item:has(.header-cart) {
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-right .nav-item-cart a,
.header-right .nav-item:has(.header-cart) a {
    overflow: visible;
    transform: none !important;
}

/* No underline hover effect on cart icon */
.header-right .nav-item-cart a::after,
.header-right .nav-item:has(.header-cart) a::after {
    display: none !important;
}

.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 1;
    text-decoration: none;
    transform: none !important;
    transition: opacity 0.2s ease;
    vertical-align: middle;
}

.header-cart:hover,
.header-cart:focus-visible {
    opacity: 0.75;
    transform: none !important;
}

.cart-icon-svg {
    display: block;
    width: 17px;
    height: 19px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform: none !important;
}

.header-cart:hover .cart-icon-svg,
.header-cart:focus-visible .cart-icon-svg {
    transform: scale(1.06) !important;
}

/* Badge: Engineered with love — docked precisely to top-right corner */
.header-right .nav-item .cart-count {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 0;
    border-radius: 999px;
    background-color: var(--shell-accent, #EF504C);
    color: #ffffff;
    pointer-events: none;
    animation: none;
    transform: none;
    box-shadow: 0 0 0 1.5px rgba(248, 247, 244, 0.98);
    z-index: 2;
}

.header-black .header-cart .cart-count {
    box-shadow: 0 0 0 1.5px #F8F7F4;
}

body:not(.page-shell) .header-cart .cart-count {
    box-shadow: 0 0 0 1.5px #050505;
}

.header-right .nav-item .cart-count.is-bumped {
    animation: cartPop 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cartPop {
    0% {
        transform: scale(0.65);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.header-right .nav-item .cart-count[hidden],
.cart-count[hidden] {
    display: none !important;
}

/* Focus visibility on shell pages */
.page-shell :focus-visible {
    outline: 2px solid var(--shell-accent);
    outline-offset: 3px;
}

/* ---------- Shared shell layout ---------- */

.shell-main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 136px 40px 96px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.page-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-muted);
    margin-bottom: 14px;
}

.page-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background-color: var(--shell-accent);
}

.page-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
}

.page-meta {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-faint);
    white-space: nowrap;
    padding-bottom: 6px;
}

/* Buttons */
.btn-solid,
.btn-ghost {
    display: inline-block;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 15px 28px;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.35s cubic-bezier(0.5, 0, 0.5, 1),
        color 0.35s cubic-bezier(0.5, 0, 0.5, 1),
        transform 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}

.btn-solid {
    background-color: var(--shell-accent);
    border: 1px solid var(--shell-accent);
    color: #ffffff;
}

.btn-solid:hover:not(:disabled) {
    background-color: #d94440;
    border-color: #d94440;
    transform: translateY(-2px);
}

.btn-solid:disabled {
    opacity: 0.45;
    cursor: default;
}

.btn-ghost {
    background-color: transparent;
    border: 1px solid var(--shell-ink);
    color: var(--shell-ink);
}

.btn-ghost:hover {
    background-color: var(--shell-ink);
    color: #ffffff;
}

/* Notices / status messages */
.notice {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
    padding: 14px 18px;
    margin-bottom: 28px;
}

.notice strong {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-weight: normal;
}

.notice-accent {
    border-left: 2px solid var(--shell-accent);
}

.state-line {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    color: var(--shell-muted);
    padding: 48px 0;
    text-align: center;
}

/* ============================================================
   EVENTS
   ============================================================ */

.events-main {
    padding-top: 120px;
    padding-bottom: 96px;
}

.events-head {
    display: none;
}

.events-section {
    margin-top: 8px;
}

.events-section+.events-section {
    margin-top: 56px;
}

.events-section-head {
    max-width: 1440px;
    margin: 0 auto 18px;
    padding: 0 40px;
    display: flex;
    align-items: center;
}

.events-section-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

.events-section-count {
    display: none;
}

/* Poster walls — full-bleed, thin seams */
.events-grid {
    display: grid;
    gap: 2px;
    background-color: transparent;
}

.events-grid.upcoming {
    grid-template-columns: repeat(2, 1fr);
}

.events-grid.archive {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
    .events-grid.archive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {

    .events-grid.upcoming,
    .events-grid.archive {
        grid-template-columns: 1fr;
    }
}

/* Poster placeholders (no artwork supplied yet) — tonal, on-brand,
   mirror the layout of the real posters and are replaced from Admin. */
.poster-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7% 7.5%;
    color: #ffffff;
    overflow: hidden;
}

.poster-ph .ph-wordmark {
    width: 26%;
    min-width: 90px;
    height: auto;
    display: block;
}

.poster-ph .ph-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.poster-ph .ph-title {
    position: absolute;
    left: 7.5%;
    right: 7.5%;
    top: 48%;
    transform: translateY(-50%);
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}

.poster-ph .ph-meta {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: clamp(11px, 1.1vw, 15px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
}

.poster-ph .ph-heart {
    width: clamp(34px, 4vw, 56px);
    height: auto;
    flex-shrink: 0;
}

/* Tonal fields — soft blurred colour like the artwork language */
.poster-ph.tone-red {
    background:
        radial-gradient(90% 70% at 82% 12%, rgba(255, 214, 190, 0.55) 0%, rgba(255, 214, 190, 0) 60%),
        radial-gradient(120% 90% at 18% 82%, #5b0f0c 0%, rgba(91, 15, 12, 0) 70%),
        radial-gradient(140% 110% at 70% 60%, #ef504c 0%, #a2231f 55%, #6d1512 100%);
}

.poster-ph.tone-sand {
    background:
        radial-gradient(80% 60% at 80% 16%, rgba(255, 250, 240, 0.75) 0%, rgba(255, 250, 240, 0) 60%),
        radial-gradient(110% 90% at 15% 85%, #b4552e 0%, rgba(180, 85, 46, 0) 65%),
        radial-gradient(150% 120% at 55% 55%, #eec489 0%, #dd9557 55%, #c26a35 100%);
}

.poster-ph.tone-teal {
    background:
        radial-gradient(80% 60% at 78% 18%, rgba(210, 250, 245, 0.4) 0%, rgba(210, 250, 245, 0) 60%),
        radial-gradient(110% 90% at 20% 85%, #93275f 0%, rgba(147, 39, 95, 0) 60%),
        radial-gradient(150% 120% at 55% 55%, #1f9e97 0%, #12716d 55%, #0a4a49 100%);
}

.poster-ph.tone-violet {
    background:
        radial-gradient(80% 60% at 80% 15%, rgba(240, 220, 255, 0.45) 0%, rgba(240, 220, 255, 0) 60%),
        radial-gradient(110% 90% at 18% 85%, #2a0f4d 0%, rgba(42, 15, 77, 0) 65%),
        radial-gradient(150% 120% at 55% 55%, #8e4cc0 0%, #5d2a8c 55%, #341257 100%);
}

/* Event detail bar */
.event-details {
    align-items: flex-start;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-meta-line {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-muted);
    margin: 0;
}

.event-meta-line.place {
    color: var(--shell-faint);
}

.event-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.event-chip {
    display: inline-block;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--shell-hairline);
    color: var(--shell-faint);
}

.event-chip.upcoming {
    border-color: rgba(239, 80, 76, 0.4);
    color: var(--shell-accent);
}

.event-button.soon {
    background-color: transparent;
    border: 1px solid rgba(16, 16, 16, 0.3);
    color: rgba(16, 16, 16, 0.55);
    cursor: default;
}

.event-button.soon:hover {
    background-color: transparent;
    transform: none;
}

/* Tickets are on sale, the link is not published yet: announced, not clickable */
.event-button.pending {
    background-color: transparent;
    border: 1px solid rgba(239, 80, 76, 0.45);
    color: var(--shell-accent);
    cursor: default;
}

.event-button.pending:hover {
    background-color: transparent;
    transform: none;
}

/* ============================================================
   SHOP — index
   Each product is one tactile object: image on top, a same-width
   off-white panel directly below carrying name, price and action.
   Mobile keeps the single-column rhythm; desktop (≥1100px) becomes a
   left-aligned, staggered editorial composition on the page grid.
   ============================================================ */

.shop-main {
    padding-bottom: 96px;
}

.shop-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

/* Hairline under the page head, closed by the item count */
.shop-rule {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(32px, 3.5vw, 48px);
}

.shop-rule .rule-line {
    flex: 1;
    height: 1px;
    background-color: var(--shell-hairline);
}

.shop-rule-count {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--shell-faint);
}

/* Left-aligned editorial grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 370px));
    gap: 40px;
    justify-content: start;
    align-items: start;
    max-width: none;
    margin: 0;
}

/* ---- Polaroid Product Object ---- */
.shop-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: #FFFFFF;
    padding: 14px 14px 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
    overflow: hidden;
}

/* Subtle red hairline wipe on bottom chin on hover */
.shop-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--shell-accent, #EF504C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-card:hover,
.shop-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.14);
}

.shop-card:hover::after,
.shop-card:focus-visible::after {
    transform: scaleX(1);
}

/* Polaroid Photo Frame */
.shop-card .product-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #ECEAE4;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.shop-card .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    display: block;
}

.shop-card:hover .img-back,
.shop-card:focus-visible .img-back {
    opacity: 1;
}

.shop-card:hover .product-img,
.shop-card:focus-visible .product-img {
    transform: scale(1.03);
}

/* Polaroid White Card Chin (sticked directly underneath the photo) */
.shop-card-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 2px 20px 2px;
    background-color: #FFFFFF;
}

.shop-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shop-card-price {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--shell-ink, #000000);
    margin: 0;
}

.shop-card-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.shop-card-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shop-card-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--shell-ink, #000000);
    margin: 0;
    line-height: 1.15;
}

.shop-card-variant {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    color: var(--shell-muted, #666666);
    margin: 0;
}

/* Action tile in polaroid chin */
.shop-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--shell-hairline);
    color: var(--shell-ink);
    border-radius: 2px;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

.shop-card-action svg {
    display: block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-card:hover .shop-card-action,
.shop-card:focus-visible .shop-card-action {
    background-color: var(--shell-accent, #EF504C);
    border-color: var(--shell-accent, #EF504C);
    color: #FFFFFF;
}

.shop-card:hover .shop-card-action svg,
.shop-card:focus-visible .shop-card-action svg {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .shop-grid {
        grid-template-columns: minmax(0, 360px);
        gap: 32px;
        justify-content: start;
    }
}
/* The grid holds text nodes too (loading / error / empty states) */
.shop-grid>.state-line {
    grid-column: 1 / -1;
    text-align: left;
}

/* ============================================================
   SHOP — product page
   ============================================================ */

.product-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.pdp-stage {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 74vh;
    margin: 0 auto;
    overflow: hidden;
    background-color: #ECEAE4;
}

.pdp-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.pdp-stage img.active {
    opacity: 1;
}

.pdp-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: center;
}

.pdp-thumb {
    width: 64px;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdp-thumb[aria-pressed="true"] {
    border-color: var(--shell-ink);
}

.pdp-info {
    padding-top: 8px;
    max-width: none;
    display: flex;
    flex-direction: column;
}

.pdp-eyebrow {
    display: none;
}

.pdp-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.pdp-variant {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    color: var(--shell-muted);
    margin: 0 0 18px;
}

.pdp-price {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 20px;
    margin: 0 0 24px;
}

.pdp-description {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--shell-muted);
    margin: 0 0 28px;
}

.pdp-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 24px;
}

.pdp-label {
    display: flex;
    justify-content: space-between;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
    margin-bottom: 12px;
}

.size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.size-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.size-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 13px 10px;
    border: 1px solid var(--shell-hairline);
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    background-color: var(--shell-surface);
}

.size-option input:checked+span {
    background-color: var(--shell-ink);
    border-color: var(--shell-ink);
    color: #ffffff;
}

.size-option input:focus-visible+span {
    outline: 2px solid var(--shell-accent);
    outline-offset: 3px;
}

.size-option:hover span {
    border-color: var(--shell-ink);
}

.pdp-onesize {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    color: var(--shell-muted);
    margin: 0 0 24px;
}

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
}

.qty-stepper button {
    width: 42px;
    border: none;
    background: none;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 17px;
    cursor: pointer;
    color: var(--shell-ink);
    transition: background-color 0.2s ease;
    padding: 11px 0;
}

.qty-stepper button:hover {
    background-color: rgba(16, 16, 16, 0.05);
}

.qty-stepper output {
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
}

.pdp-buy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 30px 0 8px;
}

.pdp-buy .btn-solid {
    width: 100%;
    padding: 17px 28px;
    font-size: 12px;
}

.pdp-feedback {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    color: var(--shell-muted);
    min-height: 20px;
}

.pdp-feedback a {
    color: var(--shell-ink);
}

.pdp-details {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--shell-hairline);
}

.pdp-details li {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    color: var(--shell-muted);
    padding: 12px 0;
    border-bottom: 1px solid var(--shell-hairline);
}

.pdp-shipnote {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-faint);
    margin-top: 16px;
}

.pdp-back {
    display: inline-block;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-muted);
    text-decoration: none;
    margin-bottom: 28px;
}

.pdp-back:hover {
    color: var(--shell-ink);
}

/* Desktop product page: the image and its information panel share an edge —
   the same device the featured event uses — so the page reads as one
   authored object instead of two stacked columns.
   Below 1180px the panel would be much taller than the image and the shot
   would have to be cropped hard, so narrower screens keep the stacked
   layout with the photograph at its full aspect ratio. */
@media (min-width: 1180px) {
    .product-main {
        grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
        gap: 0;
        max-width: 1210px;
        align-items: stretch;
    }

    .pdp-media {
        position: relative;
    }

    .pdp-stage {
        aspect-ratio: auto;
        height: 100%;
        min-height: 660px;
        max-height: none;
        margin: 0;
    }

    /* Side switcher sits in the image, bottom-left, on a blurred plate */
    .pdp-thumbs {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        margin: 0;
        padding: 10px;
        gap: 8px;
        justify-content: flex-start;
        background-color: rgba(248, 247, 244, 0.88);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
        border-top: 1px solid var(--shell-hairline);
        border-right: 1px solid var(--shell-hairline);
    }

    .pdp-thumb {
        width: 52px;
    }

    .pdp-info {
        background-color: var(--shell-surface);
        border: 1px solid var(--shell-hairline);
        border-left: none;
        padding: clamp(30px, 3.2vw, 48px);
    }

    .pdp-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--shell-muted);
        margin: 0 0 22px;
    }

    .pdp-eyebrow::before {
        content: '';
        width: 22px;
        height: 2px;
        flex-shrink: 0;
        background-color: var(--shell-accent);
    }

    .pdp-eyebrow a {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .pdp-eyebrow a:hover {
        color: var(--shell-accent);
    }

    .pdp-back {
        display: none;
    }

    .pdp-name {
        font-size: clamp(28px, 2.9vw, 38px);
    }

    .pdp-price {
        padding-bottom: 22px;
        border-bottom: 1px solid var(--shell-hairline);
    }

    .pdp-description {
        margin-top: 22px;
    }

    /* Details + shipping note settle against the bottom of the panel */
    .pdp-foot {
        margin-top: auto;
        padding-top: 32px;
    }

    .pdp-foot .pdp-details {
        margin-top: 0;
    }
}

/* ============================================================
   CART & CHECKOUT
   ============================================================ */

.cart-main {
    max-width: 980px;
}

.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--shell-hairline);
}

.cart-line {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--shell-hairline);
}

.cart-thumb {
    width: 88px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background-color: #ECEAE4;
}

.cart-line-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.cart-line-name a {
    color: inherit;
    text-decoration: none;
}

.cart-line-meta {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    color: var(--shell-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cart-size-select {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
    color: var(--shell-ink);
    border-radius: 0;
}

.cart-line-total {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 15px;
    text-align: right;
    min-width: 72px;
}

.cart-remove {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--shell-faint);
    padding: 10px;
    transition: color 0.2s ease;
}

.cart-remove:hover {
    color: var(--shell-accent);
}

.cart-summary {
    margin-left: auto;
    max-width: 380px;
    padding-top: 28px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    color: var(--shell-muted);
    padding: 7px 0;
}

.cart-summary-row.total {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 16px;
    color: var(--shell-ink);
    border-top: 1px solid var(--shell-hairline);
    margin-top: 10px;
    padding-top: 16px;
}

.cart-summary .btn-solid {
    width: 100%;
    margin-top: 22px;
    padding: 17px 28px;
    font-size: 12px;
}

.cart-shipnote {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-faint);
    margin-top: 14px;
    text-align: right;
}

.cart-empty {
    text-align: center;
    padding: 70px 0 40px;
}

.cart-empty p {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 16px;
    color: var(--shell-muted);
    margin-bottom: 28px;
}

@media (max-width: 720px) {
    .cart-line {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        row-gap: 10px;
    }

    .cart-thumb {
        width: 72px;
        grid-row: span 2;
    }

    .cart-line .qty-stepper {
        grid-column: 2;
        justify-self: start;
    }

    .cart-line-total {
        grid-column: 3;
        text-align: right;
    }

    .cart-summary {
        max-width: none;
    }
}

/* Success page */
.success-main {
    max-width: 640px;
    text-align: center;
}

.success-main .page-title {
    margin-bottom: 12px;
}

.success-heart {
    width: 44px;
    height: auto;
    margin: 0 auto 26px;
    display: block;
}

.success-sub {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--shell-muted);
    margin: 0 auto 34px;
    max-width: 440px;
}

.success-summary {
    text-align: left;
    border-top: 1px solid var(--shell-hairline);
    margin-bottom: 34px;
}

.success-summary .cart-summary {
    max-width: none;
}

.order-ref {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-faint);
    margin-bottom: 30px;
}

.order-ref-id {
    text-transform: none;
}

.test-badge {
    display: inline-block;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-accent);
    border: 1px solid rgba(239, 80, 76, 0.4);
    padding: 6px 10px;
    margin-bottom: 24px;
}

/* ============================================================
   CONTACT — refinements
   ============================================================ */

.page-shell.contact-page {
    background-color: var(--shell-bg);
}

.contact-block {
    margin-top: 8px;
}

.contact-block-label {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-faint);
    margin: 0 0 10px;
}

.contact-demo-link {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 18px;
    color: var(--shell-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.contact-demo-link:hover {
    color: var(--shell-accent);
    border-bottom-color: currentColor;
}

.contact-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.social-link-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--shell-hairline);
    background-color: #FFFFFF;
    color: var(--shell-ink);
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.social-link-item .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-ink);
    transition: color 0.25s ease;
}

.social-link-item .social-handle {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--shell-ink);
    transition: color 0.25s ease;
}

.social-link-item:hover {
    transform: translateX(4px);
    border-color: var(--shell-accent, #EF504C);
    box-shadow: 0 4px 12px rgba(239, 80, 76, 0.12);
}

.social-link-item:hover .social-icon,
.social-link-item:hover .social-handle {
    color: var(--shell-accent, #EF504C);
}

.contact-status {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13.5px;
    min-height: 20px;
    color: var(--shell-muted);
}

.contact-status.error {
    color: var(--shell-accent);
}

/* ============================================================
   Shared responsive header tweaks + reduced motion
   ============================================================ */

@media (max-width: 720px) {
    .page-shell .site-header {
        padding: 14px 20px;
    }

    .page-shell .header-right {
        gap: 16px;
    }

    .page-shell .nav-item {
        font-size: 10.5px;
        letter-spacing: 0.06em;
    }

    .shell-main,
    .events-head {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 108px;
    }

    .events-section-head {
        padding: 0 20px;
    }

    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

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

    .page-shell *,
    .page-shell *::before,
    .page-shell *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Featured (next-up) event — poster + adjacent info panel */
.event-featured {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: 0;
}

.event-featured .event-poster {
    aspect-ratio: 4 / 5;
}

.event-featured-info {
    background-color: var(--shell-surface);
    border: 1px solid var(--shell-hairline);
    border-left: none;
    padding: clamp(28px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 6px;
}

.event-featured-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 10px 0 14px;
}

.event-featured-info .event-meta-line {
    font-size: 13px;
}

.event-featured-actions {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .event-featured {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .event-featured-info {
        border-left: 1px solid var(--shell-hairline);
        border-top: none;
        padding: 24px;
    }
}

/* Upcoming grid gets page gutters when it follows the featured card */
.events-grid.upcoming {
    max-width: 1440px;
    margin: 24px auto 0;
    padding: 0 40px;
    gap: 24px;
}

@media (max-width: 720px) {
    .events-grid.upcoming {
        padding: 0 20px;
    }
}

/* ============================================================
   MINI-CART — shop-context drawer shown after add-to-cart
   Slides from the right on desktop, rises as a sheet on phones.
   ============================================================ */

.mini-cart {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.mini-cart[hidden] {
    display: none;
}

.mini-cart-scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(16, 16, 16, 0.34);
    border: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.5, 0, 0.5, 1);
}

.mini-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(424px, 100%);
    display: flex;
    flex-direction: column;
    background-color: var(--shell-surface);
    border-left: 1px solid var(--shell-hairline);
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.5, 0, 0.5, 1);
}

.mini-cart.is-open .mini-cart-scrim {
    opacity: 1;
}

.mini-cart.is-open .mini-cart-panel {
    transform: translateX(0);
}

.mini-cart-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 26px 20px;
    border-bottom: 1px solid var(--shell-hairline);
}

.mini-cart-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shell-accent);
    margin: 0 0 8px;
}

.mini-cart-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background-color: var(--shell-accent);
}

.mini-cart-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.mini-cart-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--shell-hairline);
    color: var(--shell-ink);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mini-cart-close:hover {
    background-color: var(--shell-ink);
    border-color: var(--shell-ink);
    color: #ffffff;
}

.mini-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 26px;
}

.mini-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mini-cart-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--shell-hairline);
}

.mini-cart-line.is-new {
    animation: miniLineIn 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes miniLineIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mini-cart-thumb {
    width: 64px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background-color: #ECEAE4;
}

.mini-cart-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.mini-cart-meta {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    color: var(--shell-muted);
    margin: 0;
}

.mini-cart-price {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
}

.mini-cart-foot {
    padding: 20px 26px 26px;
    border-top: 1px solid var(--shell-hairline);
    background-color: #FFFFFF;
}

.mini-cart-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 14px;
    margin-bottom: 6px;
}

.mini-cart-note {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-faint);
    margin: 0 0 18px;
}

.mini-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-cart-actions .btn-solid,
.mini-cart-actions .btn-ghost {
    width: 100%;
    padding: 16px 24px;
    font-size: 12px;
}

.mini-cart-continue {
    background: none;
    border: none;
    padding: 6px 0 0;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-muted);
    cursor: pointer;
    align-self: center;
    transition: color 0.3s ease;
}

.mini-cart-continue:hover {
    color: var(--shell-ink);
}

.mini-cart-empty {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 15px;
    color: var(--shell-muted);
    padding: 40px 0;
}

@media (max-width: 640px) {
    .mini-cart-panel {
        top: auto;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 86vh;
        border-left: none;
        border-top: 1px solid var(--shell-hairline);
        transform: translateY(100%);
    }

    .mini-cart.is-open .mini-cart-panel {
        transform: translateY(0);
    }

    .mini-cart-head {
        padding: 20px 20px 16px;
    }

    .mini-cart-body {
        padding: 4px 20px;
    }

    .mini-cart-foot {
        padding: 16px 20px 22px;
    }
}

/* ============================================================
   CHECKOUT — stepped order flow
   ============================================================ */

.checkout-main {
    max-width: 1200px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 1000px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
        gap: clamp(32px, 3.6vw, 56px);
    }
}

/* ---- prototype banner ---- */

.co-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid rgba(239, 80, 76, 0.35);
    border-left: 2px solid var(--shell-accent);
    background-color: var(--shell-surface);
    padding: 15px 18px;
    margin-bottom: 26px;
}

.co-banner-tag {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-accent);
    white-space: nowrap;
    padding-top: 1px;
}

.co-banner p {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shell-muted);
    margin: 0;
}

/* ---- steps ---- */

.co-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.co-step {
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
    transition: border-color 0.4s ease, background-color 0.4s ease;
}

.co-step.is-active {
    border-color: rgba(16, 16, 16, 0.24);
    background-color: #FFFFFF;
}

.co-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.co-step-num {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--shell-faint);
    width: 20px;
    flex-shrink: 0;
}

.co-step.is-active .co-step-num {
    color: var(--shell-accent);
}

.co-step-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.co-step-summary {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    color: var(--shell-muted);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-step-edit {
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.co-step-edit::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.co-step-edit:hover {
    color: var(--shell-ink);
}

.co-step-edit:hover::after {
    transform: scaleX(1);
}

.co-step-body {
    padding: 2px 20px 24px;
}

.co-step-body[hidden] {
    display: none;
}

.co-step.is-todo .co-step-head {
    opacity: 0.45;
}

@media (min-width: 1000px) {
    .co-step-head {
        padding: 20px 26px;
    }

    .co-step-body {
        padding: 2px 26px 28px;
    }
}

/* ---- fields ---- */

.co-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.field {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.field-3 {
    grid-column: span 6;
}

.field-4 {
    grid-column: span 6;
}

.field-5 {
    grid-column: span 12;
}

.field-6 {
    grid-column: span 12;
}

.field-8 {
    grid-column: span 12;
}

/* On a phone some fields must never sit half-width (city, country name…) */
@media (max-width: 619px) {
    .field.field-wide {
        grid-column: span 12;
    }
}

@media (min-width: 620px) {
    .field-3 {
        grid-column: span 3;
    }

    .field-4 {
        grid-column: span 4;
    }

    .field-5 {
        grid-column: span 5;
    }

    .field-6 {
        grid-column: span 6;
    }

    .field-8 {
        grid-column: span 8;
    }
}

.field label {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
}

.field .optional {
    font-family: 'Sohne-Buch', sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--shell-faint);
}

.field input,
.field select {
    width: 100%;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 15px;
    color: var(--shell-ink);
    background-color: #FFFFFF;
    border: 1px solid var(--shell-hairline);
    border-radius: 0;
    padding: 13px 14px;
    outline: none;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.field select {
    /* chevron drawn inline so no extra asset is needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23101010' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.field input:hover,
.field select:hover {
    border-color: rgba(16, 16, 16, 0.28);
}

.field input:focus,
.field select:focus {
    border-color: var(--shell-ink);
}

.field input::placeholder {
    color: rgba(16, 16, 16, 0.3);
}

.field-hint {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12px;
    color: var(--shell-faint);
    margin: 0;
}

.field-error {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-accent);
    margin: 0;
    min-height: 0;
}

.field-error[hidden] {
    display: none;
}

.field.has-error input,
.field.has-error select {
    border-color: var(--shell-accent);
}

.co-error-summary {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shell-accent);
    border: 1px solid rgba(239, 80, 76, 0.4);
    background-color: rgba(239, 80, 76, 0.05);
    padding: 12px 16px;
    margin: 0 0 18px;
}

.co-error-summary[hidden] {
    display: none;
}

.co-step-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.co-step-actions .btn-solid {
    padding: 16px 34px;
    font-size: 12px;
}

.co-back-link {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shell-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.co-back-link:hover {
    color: var(--shell-ink);
}

/* ---- delivery + payment option rows ---- */

.co-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

.co-option {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--shell-hairline);
    background-color: #FFFFFF;
    padding: 15px 18px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.co-option:hover {
    border-color: rgba(16, 16, 16, 0.3);
}

.co-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.co-option-mark {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 1px solid rgba(16, 16, 16, 0.35);
    position: relative;
}

.co-option input:checked~.co-option-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    background-color: var(--shell-accent);
}

.co-option:has(input:checked) {
    border-color: var(--shell-ink);
}

.co-option input:focus-visible~.co-option-mark {
    outline: 2px solid var(--shell-accent);
    outline-offset: 3px;
}

.co-option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Not uppercased: these carry third-party brand names (iDEAL, Apple Pay) */
.co-option-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.co-option-note {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-muted);
}

.co-option-price {
    margin-left: auto;
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    white-space: nowrap;
    padding-left: 12px;
}

.co-placeholder-note {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-faint);
    margin: 14px 0 0;
}

/* ---- review ---- */

.co-review {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--shell-hairline);
}

.co-review li {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--shell-hairline);
}

.co-review-key {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
    padding-top: 2px;
}

.co-review-value {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}

@media (max-width: 560px) {
    .co-review li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .co-review-key {
        grid-column: 1 / -1;
    }
}

/* ---- processing overlay ---- */

.co-processing {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background-color: rgba(245, 244, 241, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 40px;
}

.co-processing[hidden] {
    display: none;
}

.co-processing img {
    width: 42px;
    height: auto;
    animation: heartbeat 1.6s ease-in-out infinite;
}

.co-processing-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}

.co-processing-note {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13.5px;
    color: var(--shell-muted);
    margin: 0;
    max-width: 320px;
}

/* ---- order summary rail ---- */

.co-summary {
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
    padding: 24px;
}

@media (min-width: 1000px) {
    .co-summary {
        position: sticky;
        top: 120px;
        padding: 28px;
    }
}

.co-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.co-summary-title {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.co-summary-edit {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.co-summary-edit:hover {
    color: var(--shell-ink);
    border-bottom-color: currentColor;
}

.co-summary-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--shell-hairline);
}

.co-summary-line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--shell-hairline);
}

.co-summary-line img {
    width: 56px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background-color: #ECEAE4;
}

.co-summary-name {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 5px;
}

.co-summary-meta {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12.5px;
    color: var(--shell-muted);
    margin: 0;
}

.co-summary-amount {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 13.5px;
    white-space: nowrap;
}

.co-summary-totals {
    padding-top: 16px;
}

.co-summary-totals .cart-summary-row {
    padding: 6px 0;
}

.co-summary-note {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 12px;
    color: var(--shell-faint);
    margin: 14px 0 0;
}

/* Confirmation additions */
.success-details {
    text-align: left;
    border: 1px solid var(--shell-hairline);
    background-color: var(--shell-surface);
    padding: 22px 24px;
    margin-bottom: 30px;
    display: grid;
    gap: 16px;
}

@media (min-width: 700px) {
    .success-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.success-detail-key {
    font-family: 'Sohne-Halbfett', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shell-muted);
    margin: 0 0 6px;
}

.success-detail-value {
    font-family: 'Sohne-Buch', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   MOBILE NAVIGATION  (mobile-only — the desktop header is untouched)

   The trigger and the panel are injected by js/nav.js on every public
   page and are display:none until the mobile media rules below apply.
   ============================================================ */

.nav-toggle,
.mobile-nav {
    display: none;
}

/* Mobile condition: narrow, or a short *touch* viewport — a rotated phone.
   `pointer: coarse` keeps every short desktop window on the desktop design.
   js/nav.js matches this exact query. */
@media (max-width: 820px), (max-height: 540px) and (pointer: coarse) {

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* ---- the desktop row collapses to: mark ......... [cart] MENU ---- */

    .header-right .nav-item:not(.nav-item-cart):not(:has(.header-cart)) {
        display: none;
    }

    .header-right {
        gap: 18px;
    }

    /* The shop's cart stays in the header row — perfectly aligned, zero jump */
    .header-right .header-cart {
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .header-right .header-cart svg {
        width: 17px;
        height: 19px;
    }

    .header-right .nav-item .cart-count {
        top: -2px;
        right: -3px;
    }

    body:not(.page-shell) .site-header {
        top: calc(16px + env(safe-area-inset-top));
        left: 20px;
        right: 20px;
    }

    .page-shell .site-header {
        padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
    }

    /* ---- trigger ----------------------------------------------------- */

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: -13px -4px;
        padding: 13px 4px;
        background: none;
        border: 0;
        border-radius: 0;
        color: #ffffff;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.5s ease-in-out;
    }

    .site-header.header-black .nav-toggle {
        color: #000000;
    }

    .nav-toggle-mask {
        display: block;
        overflow: hidden;
    }

    .nav-toggle-label {
        display: block;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 11.5px;
        letter-spacing: 0.16em;
        line-height: 1;
        text-transform: uppercase;
    }

    .nav-toggle-rule {
        display: block;
        height: 1px;
        background-color: currentColor;
        opacity: 0.55;
        transform: scaleX(0.55);
        transform-origin: right center;
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
    }

    .nav-toggle:active .nav-toggle-rule,
    .nav-toggle[aria-expanded="true"] .nav-toggle-rule {
        transform: scaleX(1);
        opacity: 1;
    }

    /* The homepage has no shell focus styles of its own, and a default ring
       is invisible on the artwork. */
    .nav-toggle:focus-visible {
        outline: 2px solid #EF504C;
        outline-offset: 5px;
    }

    /* Homepage only: the trigger joins the header's entrance choreography. */
    body:not(.page-shell) .nav-toggle-label {
        transform: translateY(150%);
        animation: slideUpMask 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.25s forwards;
    }

    body:not(.page-shell) .nav-toggle-rule {
        animation: navRuleWipe 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.15s backwards;
    }

    @keyframes navRuleWipe {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(0.55);
        }
    }

    /* ---- scroll lock -------------------------------------------------- */

    /* A lock has to win outright: the shell pages scroll on <html>, and their
       own overflow rule is more specific than this class. */
    html.nav-open,
    html.nav-open body {
        overflow: hidden !important;
    }

    /* Belt and braces for iOS, which can still pan a locked document.
       Pinch-zoom stays available. */
    html.nav-open body {
        touch-action: pinch-zoom;
    }

    /* ---- panel ------------------------------------------------------- */

    .mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 300;
        padding: calc(16px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
        background-color: #EF504C; /* Flat brand red */
        color: #ffffff; /* White elements */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
        visibility: hidden;
        transform: translateY(-101%);
        transition: transform 0.55s cubic-bezier(0.5, 0, 0.5, 1), visibility 0s linear 0.55s;
    }

    .mobile-nav.is-open {
        visibility: visible;
        transform: translateY(0);
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
    }

    /* Flat brand red background: no gradient wash */
    .mnav-wash {
        display: none;
    }

    /* Header row of the panel */
    .mnav-bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 0 20px;
        min-height: 18px;
        flex: 0 0 auto;
    }

    .mnav-mark {
        display: block;
        margin: -13px;
        padding: 13px;
        color: #ffffff;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-mark svg {
        display: block;
        width: 24px;
        height: 18px;
    }

    .mnav-mark svg path {
        fill: #ffffff;
    }

    .mnav-close {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: -13px -4px;
        padding: 13px 4px;
        background: none;
        border: 0;
        border-radius: 0;
        color: #ffffff;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-close-label {
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 11.5px;
        letter-spacing: 0.16em;
        line-height: 1;
        text-transform: uppercase;
        color: #ffffff;
    }

    .mnav-cross {
        position: relative;
        display: block;
        width: 12px;
        height: 12px;
    }

    .mnav-cross i {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1.5px;
        background-color: #ffffff;
    }

    .mnav-cross i:first-child {
        transform: rotate(45deg);
    }

    .mnav-cross i:last-child {
        transform: rotate(-45deg);
    }

    /* ---- panel links ------------------------------------------------- */

    .mnav-body {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        padding: 26px 20px 0;
    }

    .mnav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .mnav-list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mnav-list li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mnav-list li:has(a[aria-current="page"]) {
        border-bottom-color: #ffffff;
    }

    .mnav-list a {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 15px 0;
        color: #ffffff;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }

    .mnav-list a:active {
        transform: translateX(6px);
        opacity: 0.8;
    }

    .mnav-index {
        flex: 0 0 auto;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 10px;
        letter-spacing: 0.16em;
        line-height: 1;
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.4s ease;
    }

    .mnav-list a[aria-current="page"] .mnav-index {
        color: #ffffff;
    }

    .mnav-word {
        display: block;
        overflow: hidden;
        min-width: 0;
    }

    .mnav-word-in {
        display: block;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: clamp(27px, 9vw, 42px);
        line-height: 1.1;
        letter-spacing: -0.005em;
        text-transform: uppercase;
        color: #ffffff;
        transform: translateY(110%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-nav.is-open .mnav-word-in {
        transform: translateY(0);
        transition-delay: calc(0.14s + var(--i, 0) * 0.055s);
    }

    .mnav-here {
        flex: 0 0 auto;
        align-self: center;
        margin-left: auto;
        width: 14px;
        height: 11px;
        color: #ffffff;
    }

    .mnav-here path {
        fill: #ffffff;
    }

    .mnav-cart-count {
        flex: 0 0 auto;
        align-self: center;
        margin-left: auto;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 10px;
        line-height: 1;
        min-width: 17px;
        padding: 4px 5px 3px;
        text-align: center;
        border-radius: 999px;
        background-color: #ffffff;
        color: #EF504C;
        font-weight: 700;
    }

    .mnav-cart-count[hidden] {
        display: none;
    }

    /* ---- panel footer ------------------------------------------------ */

    .mnav-foot {
        position: relative;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 28px 20px 0;
    }

    .mnav-foot>* {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-nav.is-open .mnav-foot>* {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.34s;
    }

    /* Finger-sized mail link with clean white underline */
    .mnav-mail {
        position: relative;
        font-family: 'Sohne-Buch', sans-serif;
        font-size: 15px;
        color: #ffffff;
        text-decoration: none;
        padding: 6px 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-mail::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* Creative mobile socials presentation with handle and icon */
    .mnav-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .mnav-social {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background-color: transparent;
        color: #ffffff;
        font-family: 'Sohne-Halbfett', sans-serif;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-decoration: none;
        border-radius: 2px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .mnav-social-icon {
        display: block;
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        color: #ffffff;
        transition: color 0.2s ease;
    }

    .mnav-social-handle {
        color: #ffffff;
        line-height: 1;
        transition: color 0.2s ease;
    }

    .mnav-social:active,
    .mnav-social:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #EF504C;
    }

    .mnav-social:active .mnav-social-icon,
    .mnav-social:active .mnav-social-handle,
    .mnav-social:hover .mnav-social-icon,
    .mnav-social:hover .mnav-social-handle {
        color: #EF504C;
    }

    .mnav-legal {
        font-family: 'Sohne-Buch', sans-serif;
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.7);
        margin: 0;
    }

    .mobile-nav :focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }
}

/* ============================================================
   HOMEPAGE — MOBILE COMPOSITION
   The desktop split-screens become stacked, full-bleed acts; the
   transition choreography (crossfade, line masks, footer lift) stays.
   ============================================================ */

.hero-cue,
.vision-progress {
    display: none;
}

@media (max-width: 820px), (max-height: 540px) and (pointer: coarse) {

    /* Dynamic viewport units: the sections must fit the *visible* area,
       and the scroll container's own height is what renderer.js steps by. */
    .scroll-container,
    .hero-section,
    .vision-container,
    .welcome-footer-background,
    .welcome-section {
        height: 100dvh;
    }

    .welcome-section {
        margin-top: -100dvh;
    }

    /* ---- A · hero ---------------------------------------------------- */

    /* Same 20% scrim, weighted to the top band: on a narrow crop the header
       sits over the palest part of the artwork. */
    .hero-overlay {
        background-color: transparent;
        background-image: linear-gradient(180deg,
                rgba(0, 0, 0, 0.44) 0%,
                rgba(0, 0, 0, 0.22) 22%,
                rgba(0, 0, 0, 0.18) 100%);
    }

    .wordmark {
        width: min(52vw, 190px);
    }

    .hero-cue {
        display: block;
        position: absolute;
        left: 50%;
        bottom: calc(28px + env(safe-area-inset-bottom));
        z-index: 3;
        width: 1px;
        height: 34px;
        margin-left: -0.5px;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.26);
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    body[data-section]:not([data-section="0"]) .hero-cue {
        opacity: 0;
    }

    .hero-cue::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 12px;
        background-color: #ffffff;
        animation: cueTravel 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    @keyframes cueTravel {
        0% {
            transform: translateY(-13px);
            opacity: 0;
        }

        22% {
            opacity: 1;
        }

        78% {
            opacity: 1;
        }

        100% {
            transform: translateY(34px);
            opacity: 0;
        }
    }

    /* ---- B/C · vision: image above, statement below ------------------- */

    .vision-container {
        flex-direction: column;
    }

    .vision-images {
        flex: 0 0 auto;
        width: 100%;
        height: 42dvh;
        min-height: 180px;
    }

    .vision-image {
        background-position: center 36%;
    }

    .vision-right {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        gap: 20px;
        padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
    }

    .vision-text {
        /* Matches the panel's real content width, which is also the width
           renderer.js measures when it splits the copy into masked lines
           (2px under the box so sub-pixel rounding can never rewrap a line). */
        max-width: calc(100vw - 46px);
        font-size: clamp(19px, 5.7vw, 25px);
        line-height: 1.28;
    }

    /* A masked line is one line by construction: never let a half-pixel of
       rounding turn it into two and break the reveal. */
    .vision-text .line-content,
    .welcome-text .line-content {
        white-space: nowrap;
    }

    .vision-text p {
        margin-bottom: 18px;
    }

    /* Two-beat indicator: this section holds two statements. Sits with the
       copy it belongs to, not adrift at the top of the panel. */
    .vision-progress {
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
    }

    .vision-progress i {
        display: block;
        width: 16px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.18);
        transition: background-color 0.7s ease;
    }

    .vision-container[data-vision="b"] .vision-progress i:first-child,
    .vision-container[data-vision="c"] .vision-progress i:last-child {
        background-color: #EF504C;
    }

    /* ---- D · welcome -------------------------------------------------- */

    /* On a phone the statement and the footer both land on the brightest part
       of the artwork. The same 20% scrim the hero uses, shaped so the copy
       bands are the darkest and the artwork keeps its heat in the middle. */
    .welcome-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.42) 0%,
                rgba(0, 0, 0, 0.30) 48%,
                rgba(0, 0, 0, 0.12) 66%,
                rgba(0, 0, 0, 0.30) 100%);
        pointer-events: none;
    }

    .welcome-section {
        align-items: center;
        padding: 0 22px calc(19dvh + env(safe-area-inset-bottom));
    }

    .welcome-text {
        max-width: calc(100vw - 44px);
        font-size: clamp(20px, 5.7vw, 26px);
    }

    .welcome-text p {
        margin-bottom: 18px;
    }

    /* The statement recedes as the footer rises over it. */
    .welcome-section.footer-active .welcome-text {
        transform: translateY(-9dvh);
        opacity: 0.5;
    }

    /* ---- footer ------------------------------------------------------- */

    .site-footer {
        height: auto;
        padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
    }

    /* Ground for the footer: it rises with the panel and gives the links a
       legible field without hiding the artwork it sits on. */
    .site-footer::before {
        content: '';
        position: absolute;
        inset: -70px 0 0;
        z-index: -1;
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.5) 42%,
                rgba(0, 0, 0, 0.76) 100%);
        opacity: 0;
        transition: opacity 0.8s ease;
        pointer-events: none;
    }

    .site-footer.animate-in::before {
        opacity: 1;
    }

    .footer-container {
        gap: 22px;
    }

    .footer-top {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-top: 0;
    }

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

    .footer-link {
        padding: 11px 0;
        touch-action: manipulation;
    }

    .footer-newsletter {
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    /* Finger-sized field and submit; the hairline stays on the field. */
    .newsletter-form {
        padding-bottom: 0;
    }

    .newsletter-form input {
        padding: 12px 0 11px;
    }

    .newsletter-form button {
        margin-right: -10px;
        padding: 14px 10px;
        touch-action: manipulation;
    }

    .footer-bottom {
        align-items: flex-end;
        padding-bottom: 0;
    }
}

/* ---- short screens (landscape phones) -------------------------------- */

@media (max-width: 820px) and (max-height: 540px), (max-height: 540px) and (pointer: coarse) {
    .mnav-body {
        align-items: flex-start;
        padding-top: 16px;
    }

    .mnav-word-in {
        font-size: clamp(20px, 6.2vh, 30px);
    }

    .mnav-list a {
        padding: 10px 0;
    }

    .mnav-foot {
        gap: 12px;
        padding-top: 16px;
    }

    .mnav-social {
        width: 40px;
        height: 40px;
    }

    /* A landscape phone is wide and short: the desktop's side-by-side split
       is the right composition again, at mobile type sizes. */
    .vision-container {
        flex-direction: row;
    }

    .vision-images {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
    }

    .vision-image {
        background-position: center;
    }

    .vision-right {
        flex: 1 1 0;
        justify-content: flex-end;
        gap: 14px;
        padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
    }

    .vision-text {
        max-width: calc(50vw - 42px);
        font-size: clamp(15px, 3.6vh, 19px);
        line-height: 1.26;
    }

    .vision-text p {
        margin-bottom: 12px;
    }

    .welcome-section {
        padding-bottom: calc(13dvh + env(safe-area-inset-bottom));
    }

    .welcome-text {
        font-size: clamp(17px, 4vh, 22px);
    }

    /* There is no room for both here, so the statement yields to the footer
       instead of colliding with it. */
    .welcome-section.footer-active .welcome-text {
        transform: translateY(-6dvh);
        opacity: 0;
    }

    .footer-container {
        gap: 14px;
    }

    .footer-link {
        padding: 9px 0;
    }

    .hero-cue {
        height: 22px;
    }
}

/* ============================================================
   REDUCED MOTION — homepage choreography and mobile menu
   ============================================================ */

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

    .wordmark img,
    .header-icon,
    .header-right .nav-item a,
    .header-right .nav-item span,
    .nav-toggle-label,
    .nav-toggle-rule {
        animation: none !important;
        transform: none !important;
    }

    .header-left .nav-item.loaded:hover .header-icon,
    .header-left .nav-item.loaded a:hover .header-icon {
        animation: none !important;
    }

    .hero-cue::after {
        animation: none;
        transform: translateY(11px);
        opacity: 1;
    }

    .mobile-nav,
    .mobile-nav.is-open,
    .mnav-word-in,
    .mnav-foot>*,
    .welcome-text,
    .footer-container,
    .vision-image,
    .line-content,
    .site-header .nav-item,
    .nav-toggle {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .mobile-nav.is-open .mnav-word-in,
    .mobile-nav.is-open .mnav-foot>* {
        transition-delay: 0s !important;
    }
}