/* =============================================
   MAIN CSS
   Studio But Maybe — PW Boilerplate

   TABLE OF CONTENTS
   ─────────────────
   1.  Tokens
   2.  Base
   3.  Accessibility utilities (sr-only, skip-link)
   4.  ty--     Typography utilities
   5.  Layout   (wrap-box, wrap-center, page--content)
   6.  grid--   Grid system
   7.  col--    Column span helpers (grid--12)
   8.  flex--   Flex utilities
   9.  ratio--  Aspect ratio helpers
   10. link--   Link variants
   11. btn--    Buttons
   12. main--   Header & Footer
   13. card     Card component (default, slim, row, feature)
   14. block--  Block molecules
       block--cta, block--meta, block--empty, block--pagination,
       block--accordion, block--map, block--img, block--gallery,
       block--filters, block--aside, block--social
   15. Wysiwyg
   16. form--   Form components
   17. video--  Video embeds
   18. Breadcrumbs
   19. Tags / Badge / Icon
   20. State utilities (is-loading, aria-busy)
   ============================================= */


/* ─────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────
   Breakpoint reference (not usable in @media):
     --bp-s   480px  mobile landscape
     --bp-m   768px  tablet
     --bp-l  1024px  desktop
     --bp-xl 1280px  large desktop
   ───────────────────────────────────────────── */
@font-face {
    font-family: 'Anton';
    src: url('../assets/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: 'Martian';
    src: url('../assets/fonts/MartianMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }

:root {
    /* Spacing */
    --pad-slim: .5rem;
    --pad:      1.2rem;
    --pad-mid:  3rem;
    --pad-big:  6rem;

    /* Grid gutter — single value used by all .grid-- classes */
    --gut:      1.5rem;

    /* Fonts */
    --font-head: 'Anton', sans-serif;
    --font-body: 'Martian', sans-serif;

    /* Type scale */
    --xs: .7rem;
    --s:  .8rem;
    --n:  1rem;
    --m:  1.7rem;
    --l:  3.2rem;
    --xl: 3.8rem;

    @media(min-width:492px)
    {
        --xl: 5.5rem;
        --l:  3.2rem;
    }

    @media(min-width:768px)
    {
        --xs: .7rem;
        --xl: 6.8rem;
    }

    /* Colors */
    --white:     #ffffff;
    --black:     #3A3935;
    --yellow:    #fef5d9;
    --green:     #A79C54;
    --rose:      #FFE0D6;
    --blue:    #cbe0f8;
    --violet:    #f8e2ff;
    --accent:    #000000;

    /* Transitions */
    --ease:      .15s ease;
    --ease-mid:  .25s ease;

    /* Elevation */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;

    /* Layout */
    --max-w:    1400px;
    --radius:   0;
}

/* ─────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────── */

html {
    font-size: calc(14px + .05vw);
    font-family: sans-serif;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--white);
}

@media (min-width: 768px)  { html { font-size: calc(16px + .1vw);  } }
@media (min-width: 1024px) { html { font-size: calc(18px + .05vw); } }
@media (min-width: 1400px) { html { font-size: calc(20px + .1vw);  } }

body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

a,
a:link,
a:visited {
    color: inherit;
    text-decoration: none;
}

/* ─────────────────────────────────────────────
   3. ACCESSIBILITY UTILITIES
   ───────────────────────────────────────────── */

/* Visually hidden but announced by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reveal on focus (e.g. skip-link) */
.sr-only--focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


/* ─────────────────────────────────────────────
   4. ty--  TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────── */

.ty--xs  { font-size: var(--xs); font-family: var(--font-body);}
.ty--s   { font-size: var(--s); font-family: var(--font-body); line-height: 1.35em;}
.ty--n   { font-size: var(--n); font-family: var(--font-body);}
.ty--m   { font-size: var(--m); text-transform: uppercase; text-align: center;}
.ty--l   { font-size: var(--l); font-family: var(--font-head); text-transform: uppercase;}
.ty--xl  { font-size: var(--xl); font-family: var(--font-head); text-transform: uppercase; letter-spacing: -0.032em; line-height: 0.935em; text-align: center;}
.ty--xxl { font-size: var(--xxl); }
.ty--mn  { font-size: var(--mn);  }

.ty--caps  { text-transform: uppercase; letter-spacing: .06em; }
.ty--undrl { text-decoration: underline; }
.ty--light { font-weight: 300; }
.ty--bold  { font-weight: 700; }
.ty--italic { font-style: italic; }

.ty--left   { text-align: left; }
.ty--center { text-align: center; }
.ty--right  { text-align: right; }


/* ─────────────────────────────────────────────
   5. LAYOUT
   ───────────────────────────────────────────── */

/* Horizontal page padding */
/* .wrap-box {
    padding-left:  var(--pad);
    padding-right: var(--pad);
}
@media (min-width: 768px) {
    .wrap-box {
        padding-left:  var(--pad-mid);
        padding-right: var(--pad-mid);
    }
} */

/* Max-width centred container */
.wrap-center {
    max-width: var(--max-w);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--pad);
    padding-right: var(--pad);
}
@media (min-width: 768px) {
    .wrap-center {
        padding-left:  var(--pad-mid);
        padding-right: var(--pad-mid);
    }
}

/* Section vertical rhythm */
.page--content {
    padding-top:    calc(var(--pad-big)*.8);
}


/* ─────────────────────────────────────────────
   6. grid--  GRID SYSTEM

   Content grids   — responsive item layouts
   Gap is always var(--gut) at every breakpoint.
   ┌────────────────────────────────────────────────────┐
   │           mobile   480px   768px   1024px   1280px │
   │ grid--2    1 col           2 col                   │
   │ grid--3    1 col   2 col   3 col                   │
   │ grid--4    1 col   2 col           4 col           │
   │ grid--5    1 col   2 col   3 col   5 col           │
   │ grid--6    1 col   2 col   3 col   6 col           │
   │ grid--7    1 col   2 col   4 col   7 col           │
   │ grid--8    1 col   2 col   4 col   8 col           │
   │ grid--9    1 col   3 col           9 col           │
   │ grid--10   1 col   2 col   5 col   10 col          │
   │ grid--11   1 col   2 col   4 col            11 col │
   └────────────────────────────────────────────────────┘

   Layout grid     — section structure
   grid--12  always 12 cols; rows default to 1 / -1
   ───────────────────────────────────────────── */

/* Shared base for all content grids */
.grid--2,
.grid--3,
.grid--4,
.grid--5,
.grid--6,
.grid--7,
.grid--8,
.grid--9,
.grid--10,
.grid--11 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gut);
}

/* sm — 480px: denser grids start splitting */
@media (min-width: 480px) {
    .grid--3  { grid-template-columns: repeat(2, 1fr); }
    .grid--4  { grid-template-columns: repeat(2, 1fr); }
    .grid--5  { grid-template-columns: repeat(2, 1fr); }
    .grid--6  { grid-template-columns: repeat(2, 1fr); }
    .grid--7  { grid-template-columns: repeat(2, 1fr); }
    .grid--8  { grid-template-columns: repeat(2, 1fr); }
    .grid--9  { grid-template-columns: repeat(3, 1fr); }
    .grid--10 { grid-template-columns: repeat(2, 1fr); }
    .grid--11 { grid-template-columns: repeat(2, 1fr); }
}

/* md — 768px: small grids reach final count; mid grids add intermediate step */
@media (min-width: 768px) {
    .grid--2  { grid-template-columns: repeat(2,  1fr); }
    .grid--3  { grid-template-columns: repeat(3,  1fr); }
    .grid--5  { grid-template-columns: repeat(3,  1fr); }
    .grid--6  { grid-template-columns: repeat(3,  1fr); }
    .grid--7  { grid-template-columns: repeat(4,  1fr); }
    .grid--8  { grid-template-columns: repeat(4,  1fr); }
    .grid--10 { grid-template-columns: repeat(5,  1fr); }
    .grid--11 { grid-template-columns: repeat(4,  1fr); }
}

/* lg — 1024px: most grids reach their final column count */
@media (min-width: 1024px) {
    .grid--4  { grid-template-columns: repeat(4,  1fr); }
    .grid--5  { grid-template-columns: repeat(5,  1fr); }
    .grid--6  { grid-template-columns: repeat(6,  1fr); }
    .grid--7  { grid-template-columns: repeat(7,  1fr); }
    .grid--8  { grid-template-columns: repeat(8,  1fr); }
    .grid--9  { grid-template-columns: repeat(9,  1fr); }
    .grid--10 { grid-template-columns: repeat(10, 1fr); }
}

/* xl — 1280px: grid--11 reaches its final column count */
@media (min-width: 1280px) {
    .grid--11 { grid-template-columns: repeat(11, 1fr); }
}

/* Layout grid — section structure */
.grid--12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gut);
}

/* All direct rows default to full width */
.grid--12 > .row {
    grid-column: 1 / -1;
}

/* Gap modifiers */
.grid--tight { gap: var(--pad-slim) !important; }
.grid--loose { gap: var(--pad-big)  !important; }


/* ─────────────────────────────────────────────
   7. col--  COLUMN SPAN HELPERS
   Use inside grid--12 to place rows precisely.
   All collapse to full width on mobile.
   ───────────────────────────────────────────── */

.col--full         { grid-column: 1 / -1;  }
.col--half         { grid-column: span 6;  }
.col--third        { grid-column: span 4;  }
.col--two-thirds   { grid-column: span 8;  }
.col--quarter      { grid-column: span 3;  }
.col--three-qtr    { grid-column: span 9;  }
.col--offset-1     { grid-column: 2 / -1;  }
.col--offset-2     { grid-column: 3 / -1;  }
.col--offset-3     { grid-column: 4 / -1;  }

@media (max-width: 767px) {
    .col--half,
    .col--third,
    .col--two-thirds,
    .col--quarter,
    .col--three-qtr,
    .col--offset-1,
    .col--offset-2,
    .col--offset-3 {
        grid-column: 1 / -1;
    }
}


/* ─────────────────────────────────────────────
   8. flex--  FLEX UTILITIES
   ───────────────────────────────────────────── */

.flex--all {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex--col {
    display: flex;
    flex-direction: column;
}

.flex--row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex--start {
    display: flex;
    align-items: flex-start;
}

.flex--wrap {
    display: flex;
    flex-wrap: wrap;
}

/* Responsive visibility */
.flex--mbl {
    display: flex;
}
@media (min-width: 768px) {
    .flex--mbl { display: block; }
}

.flex--dsktp {
    display: block;
}
@media (min-width: 768px) {
    .flex--dsktp { display: flex; align-items: center; }
}

.grid--dsktp {
    display: block;
}
@media (min-width: 768px) {
    .grid--dsktp { display: grid; }
}

/* Flex children */
.flex__grow   { flex: 1; }
.flex__shrink { flex-shrink: 0; }
.flex__fixed-30 { flex: 0 0 30%; }
.flex__fixed-50 { flex: 0 0 50%; }


/* ─────────────────────────────────────────────
   9. ratio--  ASPECT RATIO HELPERS
   ───────────────────────────────────────────── */

/* Shared container behaviour */
.ratio--11,
.ratio--45,
.ratio--32,
.ratio--34,
.ratio--169,
.ratio--169-mbl {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}

.ratio--11      { aspect-ratio: 1 / 1;   }
.ratio--45      { aspect-ratio: 4 / 5;   }
.ratio--32      { aspect-ratio: 3 / 2;   }
.ratio--34      { aspect-ratio: 3 / 4;   }
.ratio--169     { aspect-ratio: 16 / 9;  }
.ratio--169-mbl { aspect-ratio: 16 / 9;  }

@media (min-width: 768px) {
    .ratio--169-mbl { aspect-ratio: unset; }
}

/* Shared image fill */
.ratio--11 img,
.ratio--45 img,
.ratio--32 img,
.ratio--34 img,
.ratio--169 img,
.ratio--169-mbl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ─────────────────────────────────────────────
   10. link--  LINK VARIANTS
   ───────────────────────────────────────────── */

/* Shared pseudo-element base */
.link--arrow::after,
.link--arrow-blank::after,
.link--arrow-self::after,
.link--dwnld::before,
.link--vid::before,
.link--anchor::after {
    display: inline;
    font-style: normal;
}

/* External / new tab → diagonal arrow */
.link--arrow::after,
.link--arrow-blank::after { content: ' ↗'; }

/* Internal same-tab → right arrow */
.link--arrow-self::after  { content: ' →'; }

/* Download → down arrow */
.link--dwnld::before      { content: '↓ '; }

/* Video → play symbol */
.link--vid::before        { content: '▶ '; }

/* Anchor → down arrow */
.link--anchor::after      { content: ' ↓'; }


/* ─────────────────────────────────────────────
   11. btn--  BUTTONS
   ───────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pad-slim);
    padding: 0 var(--pad-slim) var(--pad-slim) var(--pad-slim);
    background-color: color-mix(in srgb, var(--white) 93%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--xs);
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition:
            background-color var(--ease),
            color             var(--ease),
            border-color      var(--ease);
    }
    .section--content .content--intro .block--btn .btn {
        transition:
            background-color var(--ease),
            color             var(--ease),
            border-color      var(--ease),
            transform         var(--ease);
    }
}


/* Ghost — no border */
.btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--black);
    padding-left: 0;
    padding-right: 0;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
    text-decoration: underline;
}

/* Shared focus ring */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


/* ─────────────────────────────────────────────
   12. main--  HEADER & FOOTER
   ───────────────────────────────────────────── */

/* ── Skip to content ── */

.skip-link {
    position: absolute;
    top: var(--pad-slim);
    left: var(--pad);
    z-index: calc(var(--z-overlay) + 10);
    padding: var(--pad-slim) var(--pad);
    background-color: var(--black);
    color: var(--white);
    font-size: var(--s);
    letter-spacing: .03em;
    border-radius: var(--radius);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-200%);
}
@media (prefers-reduced-motion: no-preference) {
    .skip-link { transition: transform var(--ease), opacity var(--ease); }
}
.skip-link:focus {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* ── Header ── */


/* ─────────────────────────────────────────────
   13. card  CARD COMPONENT
   Layouts: default | card--slim | card--row | card--feature
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   13B. section--
   ───────────────────────────────────────────── */

/* ── section--hero ── */

.full-h
{
    min-height: 75vh;
}
@media all and (min-width:960px){
    .full-h
{
    min-height: 100vh;
}
}
.fixed
{
    position: fixed;
    z-index: 1;
}

.section--hero.hero--home {
    background-color: var(--yellow) ;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: -1;
}
@media all and (min-width:960px){
.section--hero.hero--home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: -1;
}
}

.section--hero.hero--home .pad{
 padding: var(--pad);
}

.hero--top,
.hero--bottom,
.footer--top,
.footer--bottom {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-left: auto;
    margin-right: auto;
    max-width: 70vw;
}

@media all and (min-width:768px)
{
    .hero--top,
    .hero--bottom,
    .footer--top,
    .footer--bottom{
        max-width: 50vw;
    }
}

.footer--bottom
{
    display: flex;
    flex-direction: column;
}

.hero--top
{
    padding-top: var(--pad);
}

.hero--bottom
{
    padding-bottom: var(--pad);
}

.anchors
{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    width: 75vw;
    font-family: var(--font-head);
}

@media all and (max-width:428px)
{
    .anchors
    {
        flex-direction: column;
    }

    .anchors .pad--a
    {
    padding-top: var(--pad);
    }
    .anchors .pad--s
    {
    padding-top: var(--pad-slim);
    }
}

.hero--svg-top svg,
.hero--svg-bottom svg {
    width: 100%;
    height: auto;
    display: block;
}

.hero--anchors {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.hero--svg-bottom {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.section--hero + * {
    position: relative;
    z-index: 1;
    margin-top: 75vh;
}
@media all and (min-width:960px)
{
.section--hero + * {
    position: relative;
    z-index: 1;
    margin-top: 100vh;
}
}
/* ── section--content-subhero ── */

.section--content.content--subhero
{
    background-color: color-mix(in srgb, #fefefe 93%, transparent);
    padding-top: calc(var(--pad-mid)*.9);
    padding-bottom: calc(var(--pad-mid)*.8);
}

.section--content.content--subhero figcaption
{
    text-align: center;
    padding-bottom: 5px;
}

/* ── section--content-general ── */
.text--epigraph,
.section--content.content--subhero .textarea,
.content--upcycle .content--intro .block--subtitle,
.content--sartoria .content--intro .block--subtitle,
.content--formazione .content--intro .block--subtitle,
.content--upcycle .content--intro .block--info,
.content--sartoria .content--intro .block--info,
.content--formazione .content--intro .block--info {
    text-align: center;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}
@media all and (min-width: 496px) {
    .text--epigraph,
    .section--content.content--subhero .textarea,
    .content--upcycle .content--intro .block--subtitle,
    .content--sartoria .content--intro .block--subtitle,
    .content--formazione .content--intro .block--subtitle,
    .content--upcycle .content--intro .block--info,
    .content--sartoria .content--intro .block--info,
    .content--formazione .content--intro .block--info { width: 70%; }
}
/* @media all and (min-width: 768px) {
    .text--epigraph,
    .section--content.content--subhero .textarea,
    .content--upcycle .content--intro .block--subtitle,
    .content--sartoria .content--intro .block--subtitle,
    .content--formazione .content--intro .block--subtitle,
    .content--upcycle .content--intro .block--info,
    .content--sartoria .content--intro .block--info,
    .content--formazione .content--intro .block--info { width: 60%; }
} */
@media all and (min-width: 1200px) {
    .text--epigraph,
    .section--content.content--subhero .textarea,
    .content--upcycle .content--intro .block--subtitle,
    .content--sartoria .content--intro .block--subtitle,
    .content--formazione .content--intro .block--subtitle,
    .content--upcycle .content--intro .block--info,
    .content--sartoria .content--intro .block--info,
    .content--formazione .content--intro .block--info { max-width: 750px; }
}
 
@media all and (min-width: 1400px) {
    .text--epigraph,
    .section--content.content--subhero .textarea,
    .content--upcycle .content--intro .block--subtitle,
    .content--sartoria .content--intro .block--subtitle,
    .content--formazione .content--intro .block--subtitle,
    .content--upcycle .content--intro .block--info,
    .content--sartoria .content--intro .block--info,
    .content--formazione .content--intro .block--info { max-width: 850px; }
}

.section--content.content--subhero .textarea {
    padding-bottom: calc(var(--pad)*1.4);
}

.section--content.content--subhero .block--img figure {

    width: 75%;
    margin: 0 auto;
    display: block;
}
@media all and (min-width:496px)
{
.section--content.content--subhero .block--img figure {

    width: 55%;
    margin: 0 auto;
    display: block;
}
}

.section--content.content--subhero .block--img figure picture
{
    display: block;
}

/* ── section--content-intro ── */

.content--upcycle .block--content .block--info p,
.content--sartoria .block--content .block--info p,
.content--sartoria .block--formazione .block--info p
{
   line-height: 1.5;
}
.content--sartoria .block--content .block--accordion
{
    padding-top: var(--pad);
}

/* ── section--content-upcycle ── */

.section--content.content--upcycle
{
    background-color: color-mix(in srgb, var(--yellow) 93%, transparent);
}

.section--content .content--intro .block--info
{
padding-top: calc(var(--pad)*1.6);
padding-bottom: var(--pad-mid);
}

.section--content.content--formazione .content--intro,
.section--content.content--upcycle .content--intro,
.section--content.content--sartoria .content--intro
{
    position: relative;
}

.section--content.content--formazione .block--btn,
.section--content.content--upcycle .block--btn,
.section--content.content--sartoria .block--btn {
    position: static;
    margin-left: auto;
    margin-right: auto;
}

@media all and (min-width: 1200px) {
    .section--content.content--formazione .block--btn {
        position: absolute;
        right: 3%;
        bottom: 10%;
    }

    .section--content.content--sartoria .block--btn {
        position: absolute;
        left: 3%;
        bottom: 20%;
    }
}

@media all and (min-width: 1400px) {
    .section--content.content--formazione .block--btn {
        right: 5%;
    }
    .section--content.content--sartoria .block--btn {
        left: 5%;
}
}

/* ── section--content-formazione ── */

.section--content.content--formazione
{
    background-color: color-mix(in srgb, var(--blue) 93%, transparent);
}

/* ── block--repeater ── */

.block--repeater
{
border-top: none;
background-image: repeating-linear-gradient(
    to right,
    var(--black) 0,
    var(--black) 4px,
    transparent 4px,
    transparent 15px
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
}

.section--content .content--intro .block--btn {
    width: 180px;
    height: 90px;
    padding-bottom: var(--pad-mid);
}

.section--content .content--intro .block--btn .btn {
    width: 100%;
    height: 100%;
    border-radius: 0 0 115px 115px;
    display: flex;
    padding-top: 24px;
    align-items: start;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    box-sizing: border-box;
}

@media all and (min-width:768px)
{
    .section--content .content--intro .block--btn {
        width: 230px;
        height: 115px;
    }

    .section--content .content--intro .block--btn .btn {
        border-radius: 0 0 115px 115px;
        padding-top: 32px;
    }
}


.section--content.content--formazione .content--intro .block--btn:hover .btn
{
    transform: rotate(-9deg);
    background-color: #9ebfe0;
}

.section--content.content--sartoria .content--intro .block--btn:hover .btn
{
    transform: rotate(9deg);
    background-color: #eaa7a7;
}

.section--content.content--formazione .content--intro .block--btn .btn
{
    transform: rotate(-9deg);
    
}

.section--content.content--sartoria .content--intro .block--btn .btn
{
    transform: rotate(9deg);
}


/* ── section--content-generic ── */

.section--content.content--sartoria
{
    background-color: color-mix(in srgb, var(--rose) 93%, transparent);
    padding-bottom: var(--pad-mid);
}

/* ── section--404 ── */

.section--404
{
    padding: var(--pad);
}

.section--404 .grid--12 .wrap-box .ty--xl
{
    text-align: left;
    display: inline-block;
}

.section--404 .not--found
{
    padding-top: var(--pad);
    max-width: 80%;
    line-height: 1.3em;
}

.section--404 .block--btn {
    width: 180px;
    height: 90px;
    padding-top: calc(var(--pad-mid)*0.8);
}

.section--404 .block--btn .btn {
    width: 100%;
    height: 100%;
    border-radius: 0 0 115px 115px;
    display: flex;
    padding-top: 24px;
    align-items: start;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    box-sizing: border-box;
    background-color: var(--blue);
    transform: rotate(6deg);
}

.section--404 .block--btn .btn:hover {
        background-color: rgb(146, 167, 220);

}
@media all and (min-width: 768px) {
    .section--404 .block--btn {
        width: 230px;
        height: 115px;
    }
    .section--404 .block--btn .btn {
        padding-top: 32px;
    }
}
/* ── section--prefooter ── */

.section--prefooter
{
    background-color: color-mix(in srgb, var(--yellow) 93%, transparent);
    padding: var(--pad) 0 calc(var(--pad)*1.2);
}

.section--prefooter .stringa
{
    padding-top: calc(var(--pad)*.8);
    max-width: 90vw;
}

.section--prefooter svg
{
    padding-top: calc(var(--pad)*.8);
    max-width: 20vw;
}

@media all and (min-width:768px)
{
    .section--prefooter svg
{
    max-width: 9vw;
}

.section--prefooter .stringa
{
    padding-top: calc(var(--pad)*.8);
    max-width: 52vw;
}
}
.section--prefooter p
{
   line-height: 1.4;
}

.section--prefooter a:hover {
    text-decoration: none;
}

.prefooter--info{
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(var(--pad)*1.2);
    text-align: center;
    padding-bottom: var(--pad-slim);
    max-width: 90%;
}

/* ── section--footer ── */

.section--footer
{
    background-color: var(--blue);
    padding: var(--pad) 0;
}

.section--footer {
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: -1;
}

@media all and (max-width: 768px) {
    .section--footer .anchors {
        flex-direction: column;
    }
    .section--footer .anchors .wrap-box{
        padding-top: calc(var(--pad)*1.3);
    }

}

@media all and (min-width: 960px) {
    .section--footer {
        height: 95vh;
    }
}

/* ── scroll-logo ── */
.scroll-logo {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-110%);
    z-index: 100;
    transition: transform 0.3s ease;
    background-color: var(--white);
    padding: calc(var(--pad-slim)*1.4) calc(var(--pad-slim)*1.5) calc(var(--pad-slim)*1.5) ;
}

.scroll-logo img {
    display: block;
    width: 160px;
    height: auto;
}

.scroll-logo.is-visible {
    transform: translateX(-50%) translateY(0);
}

/* ── section--cookie ── */
.section--cookie
{
    padding: var(--pad) var(--pad) var(--pad-big);
    background-color: var(--yellow);
}

.section--cookie .title
{
    text-align: left;
    padding-bottom: var(--pad);
}

.section--cookie p,
.section--cookie li
{
    line-height: 1.5;
    max-width: 90%;
}
@media all and (min-width:768px){
    .section--cookie p,
    .section--cookie li
    {
    max-width: 50%;
    }
}
.section--cookie .title
{
    padding-bottom: var(--pad-mid);
}

.section--cookie h2
{
    font-size: var(--m);
    padding: calc(var(--pad)*1.2) 0 calc(var(--pad)*0.5) 0 ;
}

.section--cookie .wysiwyg + .wysiwyg
{
    padding-top: var(--pad-big);
}

.section--cookie .privacy
{
    padding: calc(var(--pad-mid)*1) 0 calc(var(--pad-mid)*.5);
}

.section--cookie .cookie
{
    padding-bottom: 0;
}
/* ─────────────────────────────────────────────
   14. block--  BLOCK MOLECULES
   ───────────────────────────────────────────── */

/* ── block--img ── */

.block--img figure {
    border-radius: var(--radius);
    overflow: hidden;
}

figcaption {
    padding-top: var(--pad-slim);
    color: var(--gray);
    font-size: var(--s);
}

/* ── block--gallery ── */

.block--gallery {
    position: relative;
    overflow: hidden;
}

.block--gallery .swiper-wrapper {
    display: flex;
    list-style: none;
}

.block--gallery .swiper-slide {
    flex-shrink: 0;
    width: 100%;
}

.gallery--nav {
    display: flex;
    justify-content: space-between;
    margin-bottom:calc(var(--pad)*.6);
    padding: 0 calc(var(--pad)*.6);
}

.block--gallery .swiper-button-prev,
.block--gallery .swiper-button-next {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--s);
    font-family: var(--font-body);
    text-decoration: underline;
    padding: 0;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.block--gallery .swiper-button-prev:focus-visible,
.block--gallery .swiper-button-next:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ── block--accordion ── */

.block--accordion__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    list-style: none;
    gap: var(--pad);
}

.block--accordion__summary::-webkit-details-marker { display: none; }

.accordion--toggle {
    font-size: var(--s);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-body);
    
}

details > .accordion--toggle { display: none; }
details[open] > .accordion--toggle { display: inline; }

details[open] summary .accordion--toggle { display: none; }

.block--accordion__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.block--accordion__body {
    padding-bottom: var(--pad);
}

@media (prefers-reduced-motion: no-preference) {
    .block--accordion__body {
        animation: accordion-open var(--ease-mid) both;
    }
    @keyframes accordion-open {
        from { opacity: 0; transform: translateY(-.5rem); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── block--gallery-GG 260625 ── */
.swiper-slide.card--sartoria
{
    cursor: grab;
}

.swiper-slide.card--sartoria {
	width: 62vw;
    padding-left: calc(var(--pad)*.4);

}

@media all and (min-width: 768px)
{   
    .swiper-slide.card--sartoria {
    width: 28vw;
    }
}

@media all and (min-width: 1200px)
{   
    .swiper-slide.card--sartoria {
    width: 22vw;
    }
}

.card--sartoria .img--info{
    padding-top: calc(var(--pad)*0.6);
    padding-bottom: 5px;
}

.card--sartoria .img--info .artist{
    padding-top: calc(var(--pad)*0.6);
}

/* ── block--repeater ── */

.block--repeater
{
padding: calc(var(--pad-mid)*.6) calc(var(--pad)*1.5);
}

@media all and (min-width:496px)
{
    .block--repeater
    {
    padding: calc(var(--pad-mid)*0.8) calc(var(--pad-big)*1.2);
    }
}

.block--repeater .block--title
{
    max-width: 90%;
}
.block--repeater .ty--n.event--info
{
    grid-column: span 4;
}

.block--repeater .ty--n.date
{
    grid-column: span 2;
}

.block--accordion.ty--s.grid--6.last,
.block--repeater .ty--n.col--quarter.info
{
    padding-bottom: calc(var(--pad)*0.8);
}

.block--repeater .ty--n.col--quarter.info {
    padding-top: calc(var(--pad)*0.8);
}

.block--repeater .phase
{
padding-top: calc(var(--pad)*0.4);
}

.block--title.col--quarter
{
    max-width: 90%;
}

.block--accordion__summary.ty--n .block--wysiwyg
{
    line-height: 1.5em;
}

.block--accordion .ty--n.wysiwyg
{
    padding-top: calc(var(--pad)*.6);
}

/* ─────────────────────────────────────────────
   15. Wysiwyg
   ───────────────────────────────────────────── */

.wysiwyg p,
.wysiwyg ul,
.wysiwyg ol {
    line-height: 1.5em;
}

.wysiwyg ul,
.wysiwyg ol {
    padding-left: 1.5em;
    list-style: revert;
}

.wysiwyg a {
    text-decoration: underline;
    text-underline-offset: .15em;
}
.wysiwyg a:hover {
    opacity: .7;
}
.wysiwyg a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: .1em;
}

.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4 {
    line-height: 1.2;
    margin-bottom: .5em;
}

.wysiwyg blockquote {
    border-left: 2px solid var(--black);
    padding-left: var(--pad);
    font-style: italic;
    color: var(--gray);
}


/* ─────────────────────────────────────────────
   16. form--  FORM COMPONENTS
   ───────────────────────────────────────────── */

/* Shared input base */
.form--newsletter input[type="email"],
.form--newsletter input[type="text"],
.form--newsletter textarea {
    width: 100%;
    max-width: 24rem;
    padding: var(--pad-slim) var(--pad);
    border: 1px solid var(--black);
    border-radius: var(--radius);
    background: transparent;
    color: var(--black);
    font-size: var(--n);
}

@media (prefers-reduced-motion: no-preference) {
    .form--newsletter input[type="email"],
    .form--newsletter input[type="text"],
    .form--newsletter textarea {
        transition: border-color var(--ease), box-shadow var(--ease);
    }
}

.form--newsletter input:focus,
.form--newsletter textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── form--newsletter ── */

.form--newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
}

.form--newsletter__field {
    display: flex;
    flex-direction: column;
    gap: var(--pad-slim);
}

.form--newsletter__field label {
    font-size: var(--s);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.form--newsletter__feedback {
    font-size: var(--s);
    min-height: 1.5em;
}

/* Honeypot — hidden from view and assistive tech; must never be filled */
.form--newsletter__hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}


/* ─────────────────────────────────────────────
   17. video--  VIDEO EMBEDS
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   18. Breadcrumbs
   ───────────────────────────────────────────── */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15em .4em;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: '/';
    color: var(--gray);
    margin-right: .25em;
}

.breadcrumbs a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}
.breadcrumbs a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.breadcrumbs [aria-current="page"] {
    color: var(--gray);
}


/* ─────────────────────────────────────────────
   19. TAGS / BADGE / ICON
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   20. STATE UTILITIES
   ───────────────────────────────────────────── */

/* AJAX / async loading state */
.is-loading {
    position: relative;
    pointer-events: none;
    min-height: 4rem;
}

@media (prefers-reduced-motion: no-preference) {
    .is-loading { opacity: .4; transition: opacity var(--ease-mid); }
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--black) 6%, transparent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .is-loading::after { animation: none; }
}

/* aria-busy on interactive elements */
[aria-busy="true"] {
    cursor: wait;
}