/*
 * Underskin — Studio page (editorial layout)
 * Sections:
 *   1. .studio-about       — 2 col: text left, vintage-tinted photo slider right
 *   2. .studio-team        — alternating rows (photo <-> text)
 *   3. .studio-cta-band    — recurring booking CTA between sections
 *   4. .studio-timeline    — SVG serpent path with alternating milestone cards
 *   5. .studio-gallery     — masonry grid + lightbox handoff
 *   6. .studio-visit       — contact info + map + hours (kept from previous impl)
 */

.studio-page {
    /* bg gestito dal body — container transparent così il grain body::after
       (z-index -1) trapela sotto i contenuti in-flow. Se qui mettessimo un
       bg-color opaco uguale a --bg coprirebbe il grain (già successo). */
    color: var(--ink);
}

/* Palette-driven per-section overrides — inline style on <section>
   sets --section-bg / --section-heading / --section-subtitle from ACF. */
.studio-page > main > section[style*="--section-bg"] {
    background-color: var(--section-bg);
}
.studio-page .studio-about__title,
.studio-page .studio-section-head__title {
    color: var(--section-heading, inherit);
}
.studio-page .studio-about__lead,
.studio-page .studio-section-head__subtitle {
    color: var(--section-subtitle, inherit);
}

.studio-page + .site-footer,
body:has(.studio-page) .site-footer {
    margin-top: 0;
}

/* Escape grain overlay — same trick as .hero-video video in base.css:
   raise media containers above body::after (grain.css z:1) and
   body.us-texture-paper-grain::after (base.css z:9998). Header stays
   above at z:10001 so no header conflict. Studio images have no
   in-card overlays (unlike artist-card), so bumping z-index is safe. */
.studio-about__figure,
.studio-team__media,
.studio-gallery__item,
.studio-visit__map {
    position: relative;
    z-index: 9999;
}

/* Editorial headings — Claudius display font on eyebrows, main titles,
   and orange labels across the Studio page. Subtitles / lead paragraphs
   stay in the body font for readability.
   Claudius is uppercase-only (69 glyphs, no lowercase) so text-transform
   is mandatory to avoid Helvetica fallback on missing glyphs. */
.studio-about__eyebrow,
.studio-about__title,
.studio-about__lead,
.studio-section-head__eyebrow,
.studio-section-head__title,
.studio-section-head__subtitle,
.studio-team__role,
.studio-team__name,
.studio-timeline__year,
.studio-timeline__step-title,
.studio-visit__label {
    font-family: var(--font-signature);
    font-weight: 400;
    text-transform: uppercase;
}

/* Shared section head used across studio-team, timeline, gallery, visit */
.studio-section-head {
    margin-bottom: var(--space-lg);
    max-width: 720px;
}

.studio-section-head__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}

.studio-section-head__title {
    font-size: var(--font-size-xxl);
    line-height: 1.05;
    margin: 0 0 var(--space-sm);
}

.studio-section-head__subtitle {
    font-size: var(--font-size-lg);
    line-height: 1.5;
    color: color-mix(in oklab, var(--ink) 78%, transparent);
    margin: 0;
    max-width: 60ch;
}

/* -------------------------------------------------------- */
/* 1) About — founders story                                 */
/* -------------------------------------------------------- */
.studio-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

@media (min-width: 1024px) {
    .studio-about__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-xl);
        align-items: center;
    }
}

.studio-about__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}

.studio-about__title {
    font-size: var(--font-size-xxl);
    line-height: 1.05;
    margin: 0 0 var(--space-sm);
}

.studio-about__lead {
    font-size: var(--font-size-lg);
    line-height: 1.5;
    color: color-mix(in oklab, var(--ink) 78%, transparent);
    margin: 0 0 var(--space-md);
    max-width: 55ch;
}

.studio-about__body {
    font-size: var(--font-size-md);
    line-height: 1.75;
    max-width: 55ch;
}

.studio-about__body p + p {
    margin-top: var(--space-sm);
}

.studio-about__body strong {
    color: var(--accent);
}

/* Single photo slot on the right column. Extends beyond the container
   right edge to touch the viewport (bleed right), and auto-cycles
   through the available images with a 1s crossfade every N seconds
   (interval set on data-interval, driven by studio-page.js).
   Vintage sepia filter gives an "old photo" feel. */
.studio-about__figure {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

@media (min-width: 1024px) {
    .studio-about__figure {
        /* Extend past container padding to the viewport right edge.
           % values in a grid item resolve against the CELL width (not
           the container), so we can't use `50% - 50vw` here — must
           compute the distance from cell-right to viewport-right using
           viewport + container tokens only.
             - When container fills viewport: distance = padding-right.
             - When viewport > container-max: distance grows by the
               centering offset (viewport/2 - container-max/2). */
        margin-right: calc(-1 * max(
            var(--container-padding-desktop),
            50vw - (var(--container-max) / 2) + var(--container-padding-desktop)
        ));
        /* Fixed height instead of aspect-ratio: the right-bleed makes
           the figure much wider than its grid cell, so aspect-ratio
           would balloon the height. Fixed height keeps it in check. */
        aspect-ratio: auto;
        height: clamp(420px, 58vh, 640px);
    }
}

.studio-about__figure-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s var(--ease-default);
    /* Vintage photo look — desaturated, tinted, slight contrast lift. */
    filter: grayscale(0.65) sepia(0.35) contrast(0.92) brightness(0.95);
}

.studio-about__figure-img.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .studio-about__figure-img {
        transition: none;
    }
}

/* -------------------------------------------------------- */
/* 2) Team editorial                                         */
/* -------------------------------------------------------- */
/* Block layout (non flex) perché ScrollTrigger `pin: true` sui row non
   funziona bene dentro un flex container — il pinSpacing spacer non
   collabora con flex layout, risultato: row visualmente sovrapposte. */
.studio-team__list {
    display: block;
}
.studio-team__list > .studio-team__row + .studio-team__row {
    margin-top: var(--space-xxl);
}

/* Row-level: pinning gestito da GSAP ScrollTrigger (vedi animations.js).
   Row-pin ospita il grid; ScrollTrigger applica pin+scrub sulla row
   quando entra nel viewport, poi rilascia con `once: true` così scroll
   indietro è normale. */
.studio-team__row {
    position: relative;
}

.studio-team__row-pin {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "name"
        "media"
        "body";
    gap: var(--space-lg);
    align-items: start;
}

.studio-team__row-pin .studio-team__media { grid-area: media; }
.studio-team__row-pin .studio-team__body { grid-area: body; }

@media (min-width: 1024px) {
    .studio-team__row-pin {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas:
            "name  name"
            "media body";
        column-gap: var(--space-xl);
        row-gap: 0;
        align-items: center;
    }

    .studio-team__row--reverse .studio-team__row-pin {
        grid-template-areas:
            "name  name"
            "body  media";
    }
}


/* Nome artista display — Claudius grande, colore accent, spinto a destra
   così da coprire solo una porzione della foto (lato destro) e sconfinare
   leggermente nella col text. Scroll-draw letter animation via animations.js. */
.studio-team__name {
    grid-area: name;
    margin: 0;
    margin-bottom: clamp(-8rem, -6vw, -2rem);
    position: relative;
    z-index: 10000;
    pointer-events: none;
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--accent);
    /* Ancorato a destra bordo container: text-align right + justify-self end
       fanno partire il nome dal bordo destro del row ed estendere a sinistra
       solo per la lunghezza del testo. Wrap consentito per non sforare mai
       il container. Niente translateX (sforerebbe il viewport). */
    text-align: right;
    justify-self: end;
    max-width: 100%;
    overflow-wrap: break-word;
}

.studio-team__row--reverse .studio-team__name {
    text-align: left;
    justify-self: start;
}

@media (max-width: 1023px) {
    /* Azzera row-gap: in CSS Grid il gap non collassa con margin negativo,
       quindi il pull-down del nome sulla foto non funziona con gap attivo. */
    .studio-team__row-pin {
        row-gap: 0;
    }
    .studio-team__name {
        margin-bottom: 0;
        font-size: clamp(2.5rem, 12vw, 5rem);
        justify-self: start;
        text-align: left;
    }
    .studio-team__row--reverse .studio-team__name {
        text-align: left;
        justify-self: start;
    }
    /* Nome sale, foto resta ~ferma → overlap solo su bottom del nome.
       Titolo appare "appoggiato" sul bordo top della foto, mostrato quasi
       tutto sopra e solo la baseline tocca l'immagine. */
    .studio-team__media {
        margin-top: clamp(-2rem, -4vw, -0.75rem);
        position: relative;
        z-index: 1; /* sotto al nome (che è z:10000) */
    }
    /* Spazio dopo la foto verso il body (role/text) — ripristinato manualmente
       visto che row-gap è azzerato. */
    .studio-team__body {
        margin-top: var(--space-md);
    }
}

.studio-team__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface);
}

.studio-team__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-default);
}

.studio-team__row-pin:hover .studio-team__media img {
    transform: scale(1.04);
}

.studio-team__role {
    display: inline-block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}

.studio-team__text {
    font-size: var(--font-size-md);
    line-height: 1.7;
    max-width: 55ch;
    margin-bottom: var(--space-md);
}

.studio-team__text p + p {
    margin-top: var(--space-sm);
}

.studio-team__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* -------------------------------------------------------- */
/* 3) Recurring CTA band                                     */
/* -------------------------------------------------------- */
.studio-cta-band {
    padding-block: var(--space-lg);
    background: var(--surface);
    border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}

.studio-cta-band__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

@media (min-width: 768px) {
    .studio-cta-band__inner {
        flex-direction: row;
        text-align: left;
    }
}

.studio-cta-band__text {
    margin: 0;
    font-size: var(--font-size-xl);
    line-height: 1.2;
    max-width: 40ch;
}

/* -------------------------------------------------------- */
/* 4) Timeline (SVG serpent)                                 */
/* -------------------------------------------------------- */
.studio-timeline__track {
    position: relative;
    padding-block: var(--space-md);
    /* Ink color for the serpent stroke via `currentColor`. */
    color: color-mix(in oklab, var(--accent) 85%, var(--ink) 15%);
}

.studio-timeline__serpent {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(100%, 260px);
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.studio-timeline__serpent-path {
    stroke-dasharray: var(--serpent-length, 4000);
    stroke-dashoffset: var(--serpent-length, 4000);
    transition: stroke-dashoffset 200ms linear;
}

.studio-timeline__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
    position: relative;
    z-index: 1;
}

.studio-timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-default),
                transform var(--duration-slow) var(--ease-default);
}

.studio-timeline__step.is-inview {
    opacity: 1;
    transform: none;
}

.studio-timeline__marker {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 20%, transparent);
    justify-self: center;
}

/* Mobile stack: marker sopra card, ma year tape overflowa in alto del
   card di ~50% altezza tape → copre marker. Aggiungo margin-bottom al
   marker per staccarlo dal tape. */
@media (max-width: 899px) {
    .studio-timeline__marker {
        margin-bottom: var(--space-md);
    }
    /* Grid cell su mobile è full-width: card ha max-width 44ch e senza
       justify-self ripiega a start, risultando left-aligned nel cell.
       Force center → allineato col marker/serpent. */
    .studio-timeline__card {
        justify-self: center;
        width: 100%;
    }
}

@media (min-width: 900px) {
    .studio-timeline__step {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .studio-timeline__step--left .studio-timeline__card {
        grid-column: 1;
        text-align: right;
    }

    .studio-timeline__step--left .studio-timeline__marker {
        grid-column: 2;
    }

    .studio-timeline__step--right .studio-timeline__marker {
        grid-column: 2;
    }

    .studio-timeline__step--right .studio-timeline__card {
        grid-column: 3;
        text-align: left;
    }
}

.studio-timeline__card {
    position: relative;
    max-width: 44ch;
    color: var(--ink);
    /* Nessun clip qui: il year tape (position absolute) può fuoriuscire in
       alto senza essere tagliato. Il clip poster sta su .card-body. */
    transition:
        transform var(--duration-medium) var(--ease-default),
        filter var(--duration-medium) var(--ease-default);
}

/* Poster fantasma: replica del card-body offset in basso-destra, colore + scuro,
   opacity ridotta. Feel "due locandine sovrapposte attaccate al muro". */
.studio-timeline__card::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(7px, 9px);
    background: color-mix(in oklab, var(--ink) 55%, var(--surface));
    clip-path: polygon(
        1% 4%, 6% 1%, 15% 3%, 28% 0%, 42% 3%, 56% 1%, 70% 3%, 84% 0%, 94% 3%, 100% 7%,
        99% 22%, 100% 38%, 98% 52%, 100% 68%, 99% 82%, 100% 94%,
        95% 100%, 82% 98%, 66% 100%, 50% 97%, 34% 100%, 18% 98%, 5% 100%, 0% 95%,
        2% 78%, 0% 62%, 3% 46%, 0% 32%, 2% 16%, 0% 6%
    );
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}

/* Body locandina: bg + torn edges + shadow. Il year tape overflowa sopra
   questo elemento (metà dentro/metà fuori) come scotch attaccato al muro. */
.studio-timeline__card-body {
    position: relative;
    z-index: 1;
    padding: calc(var(--space-lg) + 14px) var(--space-lg) calc(var(--space-lg) + 18px);
    background: var(--surface);
    border: 0;
    clip-path: polygon(
        1% 4%, 6% 1%, 15% 3%, 28% 0%, 42% 3%, 56% 1%, 70% 3%, 84% 0%, 94% 3%, 100% 7%,
        99% 22%, 100% 38%, 98% 52%, 100% 68%, 99% 82%, 100% 94%,
        95% 100%, 82% 98%, 66% 100%, 50% 97%, 34% 100%, 18% 98%, 5% 100%, 0% 95%,
        2% 78%, 0% 62%, 3% 46%, 0% 32%, 2% 16%, 0% 6%
    );
    /* Doppia ombra: ravvicinata (contatto muro) + morbida diffusa (profondità).
       drop-shadow segue il clip-path (a differenza di box-shadow che segue il rect). */
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22))
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.20));
}

/* Decoro angolo top-right: starburst SVG linework (flash tattoo minimal).
   Colore ink, opacity ~35% per stare in secondo piano. */
.studio-timeline__card-body::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='M16 3 V9 M16 23 V29 M3 16 H9 M23 16 H29 M6.5 6.5 L10.5 10.5 M21.5 21.5 L25.5 25.5 M25.5 6.5 L21.5 10.5 M6.5 25.5 L10.5 21.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.38;
    pointer-events: none;
}

/* Edition footer: piccolo tag monospace centrato bottom.
   Placeholder "N° 001 · EDIZIONE" — sostituibile con markup dinamico. */
.studio-timeline__card-body::before {
    content: 'N° 001 · EDIZIONE';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.45;
    pointer-events: none;
    white-space: nowrap;
}


.studio-timeline__card:hover .studio-timeline__card-body {
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.26))
        drop-shadow(0 20px 30px rgba(0, 0, 0, 0.26));
}
.studio-timeline__card:hover {
    transform: translateY(-3px);
}

@media (min-width: 900px) {
    .studio-timeline__step--left .studio-timeline__card {
        justify-self: end;
    }
    .studio-timeline__step--right .studio-timeline__card {
        justify-self: start;
    }
}

.studio-timeline__year {
    display: block;
    font-size: var(--font-size-xxl);
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.02em;
}

/* Anno-dentro-tape: sovrascrive il display normale del year quando serve
   come "sticker" scotch che attacca la locandina in alto. Position absolute
   sopra al top del card, font ridotto per stare dentro la tape. */
.studio-timeline__year.u-tape {
    position: absolute;
    /* Metà sopra il card-body, metà dentro. Card container starts at
       card-body top; muovere year in su di ~50% della sua altezza. */
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    font-size: var(--font-size-xl);
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.5em 0.6em;
    color: var(--bg);
    z-index: 3;
}

.studio-timeline__step-title {
    font-size: var(--font-size-xl);
    line-height: 1.2;
    margin: 0 0 var(--space-xs);
}

.studio-timeline__step-text {
    font-size: var(--font-size-md);
    line-height: 1.6;
    margin: 0;
    color: color-mix(in oklab, var(--ink) 80%, transparent);
}

/* Galleria tatuaggi dentro la locandina — thumbnail griglia con bordi
   torn leggeri, ruotate lievemente per feel "foto attaccate". */
.studio-timeline__tattoos {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
}

.studio-timeline__tattoo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ink);
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.18));
    transition: transform var(--duration-fast) var(--ease-default);
}
.studio-timeline__tattoo:nth-child(odd) {
    transform: rotate(-1.5deg);
}
.studio-timeline__tattoo:nth-child(even) {
    transform: rotate(1.5deg);
}
.studio-timeline__tattoo:hover {
    transform: rotate(0deg) scale(1.03);
    z-index: 3;
}

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

/* -------------------------------------------------------- */
/* 5) Gallery masonry                                        */
/* -------------------------------------------------------- */
.studio-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: var(--space-xs);
}

@media (min-width: 768px) {
    .studio-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
}

@media (min-width: 1200px) {
    .studio-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.studio-gallery__item {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface);
}

.studio-gallery__item--tall {
    grid-row: span 2;
    aspect-ratio: 1 / 2;
}

.studio-gallery__item--wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

.studio-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
}

.studio-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-default);
}

.studio-gallery__item:hover img {
    transform: scale(1.04);
}

/* -------------------------------------------------------- */
/* 6) Visit (contact + hours + map)                          */
/* -------------------------------------------------------- */
.studio-visit__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .studio-visit__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        grid-template-areas:
            "map info"
            "map hours";
        gap: var(--space-lg);
    }
    .studio-visit__map { grid-area: map; }
    .studio-visit__info { grid-area: info; }
    .studio-visit__hours-card { grid-area: hours; }
}

.studio-visit__map {
    aspect-ratio: 4 / 3;
    background: var(--surface);
    overflow: hidden;
}

@media (min-width: 768px) {
    .studio-visit__map {
        aspect-ratio: auto;
        min-height: 380px;
    }
}

.studio-visit__map iframe {
    display: block;
    filter: grayscale(0.3) contrast(1.02);
}

/* Poster wrapper (info + hours): niente bg/padding qui — solo host per
   tape sticker (absolute top) + ghost ::before + body clip-path. */
.studio-visit__poster {
    position: relative;
    padding: 0;
    background: transparent;
    margin-top: clamp(1.75rem, 4vw, 2.5rem); /* respiro per tape sopra */
}

/* Ghost poster dietro — stessa polygon del body, offset basso-destra. */
.studio-visit__poster::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(7px, 9px);
    background: color-mix(in oklab, var(--ink) 55%, var(--surface));
    clip-path: polygon(
        1% 4%, 6% 1%, 15% 3%, 28% 0%, 42% 3%, 56% 1%, 70% 3%, 84% 0%, 94% 3%, 100% 7%,
        99% 22%, 100% 38%, 98% 52%, 100% 68%, 99% 82%, 100% 94%,
        95% 100%, 82% 98%, 66% 100%, 50% 97%, 34% 100%, 18% 98%, 5% 100%, 0% 95%,
        2% 78%, 0% 62%, 3% 46%, 0% 32%, 2% 16%, 0% 6%
    );
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}

/* Tape sticker — assoluto centrato in alto, sopra il body. */
.studio-visit__poster-tape {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    font-family: var(--font-signature);
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font-size-xl);
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.5em 0.6em;
    color: var(--bg);
    z-index: 3;
    white-space: nowrap;
}

/* Body locandina: clip-path torn + surface bg + doppia shadow.
   Stessa ricetta di .studio-timeline__card-body. */
.studio-visit__poster-body {
    position: relative;
    z-index: 1;
    padding: calc(var(--space-lg) + 14px) var(--space-lg) var(--space-lg);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    clip-path: polygon(
        1% 4%, 6% 1%, 15% 3%, 28% 0%, 42% 3%, 56% 1%, 70% 3%, 84% 0%, 94% 3%, 100% 7%,
        99% 22%, 100% 38%, 98% 52%, 100% 68%, 99% 82%, 100% 94%,
        95% 100%, 82% 98%, 66% 100%, 50% 97%, 34% 100%, 18% 98%, 5% 100%, 0% 95%,
        2% 78%, 0% 62%, 3% 46%, 0% 32%, 2% 16%, 0% 6%
    );
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22))
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.20));
}

.studio-visit__label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 var(--space-xxs);
}

.studio-visit__value {
    font-size: var(--font-size-md);
    line-height: 1.5;
    margin: 0;
}

.studio-visit__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
    transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}

.studio-visit__value a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.studio-visit__actions {
    margin-top: var(--space-xs);
}

.studio-visit__hours {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.studio-visit__hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--space-xxs);
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    font-size: var(--font-size-sm);
}

.studio-visit__hours-row:last-child {
    border-bottom: none;
}

.studio-visit__hours-row.is-closed .studio-visit__hours-time {
    color: color-mix(in oklab, var(--ink) 45%, transparent);
    font-style: italic;
}

.studio-visit__hours-day {
    font-weight: 700;
    color: var(--ink);
}

/* Gradient page rimosso → visit sezione ora su bg piatto sand. Fallback
   torna a ink come le altre sezioni. Backend override via ACF vince. */
.studio-visit .studio-section-head__title {
    color: var(--section-heading, inherit);
}

.studio-visit .studio-section-head__subtitle {
    color: var(--section-subtitle, inherit);
}

/* Reduced motion: neutralize slider transitions + timeline animation. */
@media (prefers-reduced-motion: reduce) {
    .studio-about__slide,
    .studio-about__slide-frame img,
    .studio-team__media img,
    .studio-gallery__item img,
    .studio-timeline__serpent-path {
        transition: none;
    }
    .studio-timeline__step {
        opacity: 1;
        transform: none;
    }
}