/* Cittàdel MARKET — styles */

/* ---------- self-hosted fonts (Google Fonts, SIL OFL) ---------- */
/* Big Shoulders Display normal latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display normal latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big Shoulders Display normal latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display normal latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big Shoulders Display normal latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display normal latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big Shoulders Display normal latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display normal latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/bigshouldersdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces italic latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces italic latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --paper:#F7F1E1;
  --paper-deep:#EDE3CA;
  --ink:#221D14;
  --ink-soft:#4A4234;
  --green:#008C45;
  --green-deep:#00612F;
  --green-light:#5CC98D;
  --red:#CD212A;
  --red-deep:#A11820;
  --highlight:#F0D23B;
  --line:rgba(34,29,20,0.14);
  --shadow:0 18px 40px rgba(34,29,20,0.16);
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Fraunces', Georgia, serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* tilted polaroids/clippings must never create sideways scrolling (iOS ignores body overflow-x) */
main{overflow-x:clip;}

/* subtle newsprint grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2000;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.display{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:0.92;
  margin:0;
  color:var(--ink);
}

a{color:inherit;}
img{max-width:100%; height:auto; display:block;} /* width/height attrs only reserve space (no layout shift) */

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.mark{background:linear-gradient(120deg, var(--highlight) 0%, var(--highlight) 100%); background-repeat:no-repeat; background-size:100% 0.5em; background-position:0 78%; padding:0 0.05em;}

/* brand asterisk — Cittàdel* = Responsible */
.ast{color:var(--red); font-weight:900; margin-left:0.02em;}

/* placeholder slot — shown until the client sends the real asset */
.ph-slot{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px dashed rgba(34,29,20,0.28);
  background:
    repeating-linear-gradient(135deg, rgba(34,29,20,0.045) 0 10px, transparent 10px 20px),
    var(--paper-deep);
  color:var(--ink-soft);
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; font-size:0.8rem; padding:12px;
}
.ph-slot::before{content:"✱"; display:block; color:var(--red); font-size:1.1rem; margin-bottom:6px;}
.ph-slot span{display:block;}

/* ---------- ticker ---------- */
.ticker{
  background:var(--paper); overflow:hidden; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.ticker-track{display:flex; width:max-content; animation:ticker-scroll 30s linear infinite;}
.ticker-group{
  display:flex; align-items:center; gap:20px; flex-shrink:0;
  padding:9px 20px 9px 0;
  font-family:'Big Shoulders Display', sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.06em; font-size:0.9rem;
}
.ticker-group .w-g{color:var(--green-deep);}
.ticker-group .w-r{color:var(--red-deep);}
.ticker-group .dot{width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:0.4; flex-shrink:0;}
.ticker-group .icon-sep{
  width:16px; height:16px; flex-shrink:0; color:var(--ink); opacity:0.5;
  display:inline-flex; align-items:center; justify-content:center;
}
.ticker-group .icon-sep svg{width:100%; height:100%;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(247,241,225,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:54px; width:auto;}
nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
nav a{
  text-decoration:none; font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; text-transform:uppercase; font-size:0.92rem;
  letter-spacing:0.04em; color:var(--ink); position:relative; padding:4px 0;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--red); transition:width 0.25s ease;
}
nav a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:30px;}
.header-socials{display:flex; align-items:center; gap:10px;}
.header-socials a{
  width:30px; height:30px; border-radius:50%; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:color 0.2s ease, background-color 0.2s ease;
}
.header-socials a:hover{color:var(--red-deep); background:rgba(34,29,20,0.07);}
.header-socials svg{width:16px; height:16px; fill:currentColor;}
.header-socials a.soon{opacity:0.42;}
.nav-toggle{display:none; background:none; border:2px solid var(--ink); border-radius:var(--radius); width:42px; height:38px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink);}

/* ---------- hero (dark, video background) ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(88vh, 760px);
  display:flex; align-items:center;
  padding:96px 28px 104px;
  background:var(--ink);
  color:var(--paper);
}
.hero-media{position:absolute; inset:0; z-index:-1;}
/* still fallback: shown until the hero video exists (and for reduced-motion users) */
.hero-still{
  position:absolute; inset:-24px;
  background:url("assets/hero-poster.jpg") center/cover no-repeat;
  filter:blur(4px) sepia(0.3) brightness(0.7);
  transform:scale(1.04);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:sepia(0.2) contrast(1.08) brightness(1.15);
}
.hero-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(34,29,20,0.05) 0%, rgba(34,29,20,0.5) 75%),
    linear-gradient(90deg, rgba(34,29,20,0.72) 0%, rgba(34,29,20,0.3) 60%, rgba(34,29,20,0.4) 100%);
}
.hero-shade::after{
  content:""; position:absolute; inset:0; opacity:0.18;
  background:radial-gradient(circle, var(--paper) 0.8px, transparent 1.2px) 0 0/22px 22px;
}
.hero-inner{
  width:100%; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.86rem; line-height:1.35;
  color:var(--highlight); margin-bottom:18px; max-width:48ch;
}
.eyebrow::before{content:"●"; color:var(--red); font-size:0.6rem; flex-shrink:0;}
.hero h1{
  font-size:clamp(2.5rem, 6vw, 4.4rem);
  color:var(--paper);
  text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--green-light);}
.hero p.lede{
  font-family:'Fraunces', serif; font-size:1.22rem; font-style:italic;
  color:rgba(247,241,225,0.88); max-width:44ch; margin:22px 0 32px; line-height:1.5;
}
.hero p.lede em{color:var(--highlight); font-style:italic;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.03em; font-size:1rem;
  padding:14px 26px; text-decoration:none; border-radius:var(--radius);
  border:2px solid var(--ink); transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-solid{background:var(--green-deep); color:var(--paper); border-color:var(--green-deep);} /* deep green: 7:1 contrast with cream text */
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-red{background:var(--red); color:var(--paper); border-color:var(--red-deep);}
.btn:hover, .btn.is-active{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink);}
.btn-solid:hover, .btn-solid.is-active{box-shadow:4px 4px 0 var(--green-deep);}
.btn-red:hover, .btn-red.is-active{box-shadow:4px 4px 0 var(--ink);}
.hero .btn-outline{color:var(--paper); border-color:rgba(247,241,225,0.8);}
.hero .btn-outline:hover, .hero .btn-outline.is-active{box-shadow:4px 4px 0 var(--red);}
.hero .btn-solid:hover, .hero .btn-solid.is-active{box-shadow:4px 4px 0 var(--paper);}

.hero-badge{
  position:relative; justify-self:center;
  width:min(400px, 74vw); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
}
.hero-badge::before{
  content:""; position:absolute; inset:11%; border-radius:50%;
  background:var(--paper);
  box-shadow:0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 6px var(--paper-deep);
}
.stamp-ring{
  position:absolute; inset:4%;
  border-radius:50%; border:3px dashed var(--red);
  animation:spin-slow 40s linear infinite;
}
.hero-logo{position:relative; width:70%; height:auto;}
/* variant: no cream disc, logo sits directly on the video (remove the class in the HTML to go back) */
.hero-badge--clear::before{display:none;}
.hero-badge--clear .hero-logo{
  width:84%;
  filter:drop-shadow(0 0 2px rgba(247,241,225,0.55)) drop-shadow(0 4px 18px rgba(0,0,0,0.65));
}
@keyframes spin-slow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---------- ticket divider ---------- */
.ticket-edge{
  height:22px;
  background-image:radial-gradient(circle at 11px 0, var(--paper) 10px, transparent 10.5px);
  background-size:22px 22px;
  background-repeat:repeat-x;
  background-color:var(--paper-deep);
}
.ticket-edge.flip{transform:rotate(180deg);}
.ticket-edge.on-dark{background-image:radial-gradient(circle at 11px 0, var(--ink) 10px, transparent 10.5px); background-color:var(--paper);}

/* ---------- section shell ---------- */
section{padding:84px 0; scroll-margin-top:60px;}
.section-alt{background:var(--paper-deep);}
.kicker{
  font-family:'Big Shoulders Display', sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em; font-size:0.85rem;
  color:var(--green-deep); margin-bottom:10px; display:block;
}
h2.title{font-size:clamp(2rem, 4.2vw, 3rem); color:var(--ink); margin-bottom:18px; text-wrap:balance;}
.lead-text{font-size:1.08rem; line-height:1.65; color:var(--ink-soft); max-width:62ch; margin:0 0 16px;}
.sub-title{
  display:flex; align-items:center; gap:18px;
  font-size:clamp(1.4rem, 2.6vw, 1.8rem); margin:72px 0 30px;
}
.sub-title::after{content:""; flex:1; height:2px; background:var(--ink); opacity:0.85;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
/* the 4 pills always share one line: their size follows the column width (container units) */
.about-badges{display:flex; flex-wrap:nowrap; gap:8px; margin-top:22px; container-type:inline-size;}
.about-badges .pill{
  white-space:nowrap; flex:0 1 auto;
  font-size:clamp(0.6rem, calc((100cqi - 30px) * 0.0236), 0.88rem); padding:0.6em 1.05em;
}
.pill{
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; font-size:0.88rem; padding:8px 16px; border-radius:999px;
  border:2px solid var(--ink); background:var(--paper);
}
.pill.red{border-color:var(--red-deep); color:var(--red-deep);}
.pill.green{border-color:var(--green-deep); color:var(--green-deep);}
/* clickable pills: fill with their colour on hover, stay filled while their topic is open */
.pill-btn{
  --c:var(--green-deep); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pill-btn.red{--c:var(--red-deep);}
.pill-btn::after{content:"+"; font-weight:800; font-size:1.05em; line-height:1; transition:transform 0.25s ease;}
.pill-btn:hover,.pill-btn.is-active,.pill-btn[aria-expanded="true"]{
  background:var(--c); color:var(--paper); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink);
}
.pill-btn[aria-expanded="true"]::after{transform:rotate(45deg);}
.pill-btn:focus-visible{outline:3px solid var(--highlight); outline-offset:3px;}
.where{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
}
.where address{
  font-style:normal; font-size:0.98rem; line-height:1.45; color:var(--ink-soft);
}
.where address strong{
  display:block; font-family:'Big Shoulders Display', sans-serif; text-transform:uppercase;
  letter-spacing:0.06em; font-size:0.82rem; color:var(--red-deep);
}
.about-side{display:grid; gap:40px; justify-items:center;}
.quote-card{
  background:var(--ink); color:var(--paper); padding:34px 32px 30px; border-radius:var(--radius);
  transform:rotate(1.4deg); box-shadow:var(--shadow); position:relative; width:100%;
}
.quote-card::before{
  content:"“"; position:absolute; top:-30px; left:18px;
  font-family:'Fraunces', serif; font-size:6rem; line-height:1; color:var(--red);
}
.quote-card p{font-family:'Fraunces', serif; font-style:italic; font-size:1.18rem; line-height:1.6; margin:0 0 14px;}
.quote-card .who{font-family:'Big Shoulders Display', sans-serif; text-transform:uppercase; font-weight:700; font-size:0.85rem; letter-spacing:0.08em; color:var(--highlight);}
.quote-card .who small{display:block; color:rgba(247,241,225,0.6); letter-spacing:0.06em; margin-top:2px;}

/* press clippings */
.press-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.clip{
  background:#FBF8EE; padding:22px 22px 20px; position:relative;
  border-top:5px double var(--ink); border-bottom:1px solid var(--ink);
  box-shadow:0 8px 22px rgba(34,29,20,0.1);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.clip:nth-child(1){transform:rotate(-0.8deg);}
.clip:nth-child(2){transform:rotate(0.6deg);}
.clip:nth-child(3){transform:rotate(-0.4deg);}
.clip:hover, .clip.is-active{transform:rotate(0) translateY(-4px); box-shadow:0 16px 30px rgba(34,29,20,0.16);}
.clip-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.clip-masthead{font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:1.05rem;}
.clip-year{font-family:'Big Shoulders Display', sans-serif; font-weight:900; color:var(--red); letter-spacing:0.06em;}
.clip h3{font-family:'Fraunces', serif; text-transform:none; font-weight:600; font-size:1.18rem; line-height:1.3; margin-bottom:10px;}
.clip a{
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; font-size:0.88rem; color:var(--green-deep); text-decoration:none;
  border-bottom:2px solid var(--green);
}
.clip{display:flex; flex-direction:column;}
.clip-dek{margin:0 0 18px; font-size:0.95rem; line-height:1.5; color:var(--ink-soft); flex:1;}
.clip a{align-self:flex-start;}
.clip a::before{content:""; position:absolute; inset:0;} /* whole clipping is clickable */
.clip a::after{content:" →"; transition:margin-left 0.2s ease;}
.clip:hover a::after, .clip.is-active a::after{margin-left:4px;}
.clip:hover h3, .clip.is-active h3{color:var(--green-deep);}
.clip h3{transition:color 0.2s ease;}

/* artwork photo */
.art-photo{margin:0; max-width:420px;}
.art-photo img{filter:sepia(0.12) contrast(1.04); aspect-ratio:4/3; object-fit:cover; width:100%;}
.zoomable{all:unset; display:block; cursor:zoom-in;}
.zoomable:focus-visible{outline:3px solid var(--green); outline-offset:3px;}

/* ---------- polaroid (shared) ---------- */
.pinboard{position:relative; display:flex; justify-content:center;}
.polaroid{
  background:#fff; padding:14px 14px 46px; box-shadow:var(--shadow);
  transform:rotate(-4deg); max-width:340px; width:100%; position:relative;
}
.polaroid img{filter:grayscale(0.15) contrast(1.03);}
.polaroid .ph-slot{aspect-ratio:4/3;}
.polaroid.tilt-r{transform:rotate(3deg);}
.tape{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:110px; height:34px; background:rgba(240,210,59,0.55);
  border:1px solid rgba(34,29,20,0.08); box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.polaroid .cap{
  position:absolute; bottom:12px; left:14px; right:14px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:0.85rem; color:var(--ink-soft); letter-spacing:0.02em; text-align:center;
}

/* ---------- editions ---------- */
.event-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.latest-tag{
  display:inline-block; background:var(--red); color:var(--paper);
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:0.1em; font-size:0.8rem; padding:6px 12px; margin-bottom:14px;
  transform:rotate(-1.5deg);
}
.event-grid h3{font-size:clamp(1.7rem, 3.2vw, 2.4rem);}
.event-facts{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px;}
.event-facts li{
  display:flex; gap:14px; align-items:flex-start; font-size:1.02rem; color:var(--ink-soft);
}
.event-facts .ico{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; color:var(--red);
  font-size:0.85rem; text-transform:uppercase; min-width:78px; padding-top:2px;
  border-bottom:2px solid var(--red); letter-spacing:0.04em;
}
.note-flag{
  margin-top:28px; padding:16px 18px; border-left:3px solid var(--green);
  background:rgba(31,122,61,0.07); font-size:0.95rem; color:var(--ink-soft); line-height:1.55;
}

.flyer-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:34px 26px; padding-top:10px; align-items:center;
}
.flyer{
  margin:0; background:#fff; padding:10px 10px 38px; position:relative;
  box-shadow:0 10px 24px rgba(34,29,20,0.14);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.flyer:nth-child(4n+1){transform:rotate(-2.2deg);}
.flyer:nth-child(4n+2){transform:rotate(1.6deg);}
.flyer:nth-child(4n+3){transform:rotate(-0.8deg);}
.flyer:nth-child(4n+4){transform:rotate(2.4deg);}
.flyer:hover, .flyer.is-active{transform:rotate(0) translateY(-6px) scale(1.02); box-shadow:0 20px 36px rgba(34,29,20,0.2); z-index:2;}
.flyer-frame{overflow:hidden; background:var(--paper-deep);}
.flyer-frame img{width:100%; height:auto;} /* natural shape: square and portrait flyers, never cropped */
.flyer-frame.ph-slot{aspect-ratio:3/4;}
.flyer button{
  all:unset; display:block; width:100%; cursor:zoom-in;
}
.flyer button:focus-visible{outline:3px solid var(--green); outline-offset:3px;}
.flyer figcaption{
  position:absolute; bottom:10px; left:10px; right:10px; text-align:center;
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:0.8rem; letter-spacing:0.04em; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:3000; display:none;
  align-items:center; justify-content:center; padding:28px;
  background:rgba(20,17,12,0.88); cursor:zoom-out;
}
.lightbox.open{display:flex;}
.lightbox figure{margin:0; max-width:min(960px, 100%); text-align:center;}
.lightbox img{max-height:80vh; max-width:100%; width:auto; margin:0 auto; background:#fff; padding:10px; box-shadow:0 30px 70px rgba(0,0,0,0.5);}
.lightbox figcaption{
  margin-top:14px; color:var(--paper); font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.lightbox-close{
  position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(247,241,225,0.6); background:none; color:var(--paper);
  font-size:1.4rem; cursor:pointer;
}

/* ---------- categories ---------- */
.cat-intro{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--ink-soft); margin:0;}
.cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:44px;}
.cat-card{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  position:relative; overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-card:hover, .cat-card.is-active{transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--green);}
.cat-card:nth-child(even):hover, .cat-card:nth-child(even).is-active{box-shadow:5px 5px 0 var(--red);}
.cat-photo{aspect-ratio:4/3; border-bottom:2px solid var(--ink);}
.cat-photo img{width:100%; height:100%; object-fit:cover;}
.cat-photo.ph-slot{border:0; border-bottom:2px solid var(--ink);}
.cat-body{padding:20px 22px 24px;}
.cat-card .num{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:0.85rem;
  color:var(--red); letter-spacing:0.06em;
}
.cat-card h3{font-size:1.35rem; margin:8px 0 8px; text-transform:none; font-family:'Fraunces', serif; font-weight:600; line-height:1.15;}
.cat-card p{margin:0; color:var(--ink-soft); font-size:0.95rem; line-height:1.5;}

/* tall card: swing (vertical video), spans two rows in the last column */
.cat-grid{grid-template-columns:repeat(4, 1fr);}
.cat-card.tall{
  grid-column:4; grid-row:1 / span 2;
  display:flex; flex-direction:column;
  background:var(--ink); color:var(--paper);
}
.cat-card.tall:hover, .cat-card.tall.is-active{box-shadow:5px 5px 0 var(--red);}
.cat-card.tall h3{color:var(--paper);}
.cat-card.tall p{color:rgba(247,241,225,0.8);}
.feature-media{position:relative; flex:1; min-height:320px; background:#000; border-bottom:2px solid var(--ink); overflow:hidden;}
.feature-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.sound-toggle{
  position:absolute; right:12px; bottom:12px; width:42px; height:42px; border-radius:50%;
  border:2px solid rgba(247,241,225,0.85); background:rgba(34,29,20,0.55); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(4px); transition:background-color 0.2s ease, transform 0.2s ease;
}
.sound-toggle:hover{background:var(--red); transform:scale(1.06);}
.sound-toggle:focus-visible{outline:3px solid var(--highlight); outline-offset:2px;}
.sound-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.sound-toggle .spk{fill:currentColor;}
.sound-toggle .on{display:none;}
.sound-toggle[aria-pressed="true"] .on{display:inline;}
.sound-toggle[aria-pressed="true"] .off{display:none;}

/* ---------- instagram ---------- */
.ig-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:44px;}
/* static Instagram cards: no Meta script, no cookies — each card links to the post */
.ig-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.ig-card:hover, .ig-card.is-active{transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--red);}
.ig-card:focus-visible{outline:3px solid var(--green); outline-offset:3px;}
.ig-card-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line);}
.ig-card-head img{width:32px; height:32px; border-radius:50%; border:2px solid var(--red);}
.ig-user{font-family:'Big Shoulders Display', sans-serif; font-weight:800; letter-spacing:0.03em; font-size:0.95rem; display:block; line-height:1.1;}
.ig-loc{font-size:0.75rem; color:var(--ink-soft); display:block;}
.ig-card-img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;}
.ig-card-foot{
  display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line);
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; font-size:0.88rem; color:var(--green-deep);
}
.ig-card-foot svg{width:18px; height:18px; fill:currentColor;}
.ig-card:hover .ig-card-foot, .ig-card.is-active .ig-card-foot{color:var(--red-deep);}
.ig-follow{margin-top:34px; text-align:center;}
@media (max-width:900px){.ig-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto;}}

/* utilities (replace inline style attributes so the CSP can forbid inline styles) */
.pos-30{object-position:center 30%;}
.pos-35{object-position:center 35%;}
.pos-40{object-position:center 40%;}
.pos-45{object-position:center 45%;}
.pos-60{object-position:center 60%;}
.mt-16{margin-top:16px;}
.vendor .kicker{color:var(--highlight);}
.socials a.soon{opacity:0.55;}

/* ---------- vendor CTA ---------- */
.vendor{
  background:var(--green-deep); color:var(--paper); border-radius:var(--radius);
  padding:64px 48px; position:relative; overflow:hidden;
}
.vendor::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; border:3px dashed rgba(240,210,59,0.5);
}
.vendor-inner{position:relative; z-index:2; max-width:640px;}
.vendor h2{color:var(--paper);}
.vendor h2 .ast{color:var(--highlight);}
.vendor p{font-size:1.05rem; line-height:1.6; color:rgba(247,241,225,0.86); max-width:56ch;}
.vendor .btn-solid{background:var(--highlight); color:var(--ink); border-color:var(--highlight);}
.vendor .btn-solid:hover, .vendor .btn-solid.is-active{box-shadow:4px 4px 0 var(--red);}
.vendor .fine{font-size:0.85rem; color:rgba(247,241,225,0.65); margin-top:14px;}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:64px auto 0;}
.faq-item{border-top:2px solid var(--ink);}
.faq-item:last-child{border-bottom:2px solid var(--ink);}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; font-family:'Fraunces', serif; font-weight:600; font-size:1.22rem; line-height:1.3;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--red); color:var(--red);
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:1.3rem;
  transition:transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg); background:var(--red); color:var(--paper);}
.faq-item summary:focus-visible{outline:3px solid var(--green); outline-offset:2px;}
.faq-answer{padding:0 4px 26px; font-size:1.04rem; line-height:1.65; color:var(--ink-soft); max-width:68ch;}
.faq-answer p{margin:0 0 12px;}
.faq-answer .big-ast{
  float:left; font-family:'Big Shoulders Display', sans-serif; font-weight:900;
  font-size:4.4rem; line-height:0.8; color:var(--red); margin:4px 14px 0 0;
}

/* closing statement under the "Cosa si trova" grid */
.cat-outro{max-width:860px; margin:84px auto 0; padding:0 8px; text-align:center;}
.cat-outro-mark{
  display:flex; align-items:center; gap:20px; margin:0 0 26px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:5.4rem; line-height:1; height:0.55em; color:var(--red);
}
.cat-outro-mark::before,.cat-outro-mark::after{content:""; flex:1; border-top:2px dashed var(--line); transform:translateY(-0.3em);} /* the glyph sits high in its box */
.cat-outro-lead{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:clamp(1.45rem, 2.8vw, 2.05rem);
  line-height:1.35; color:var(--ink); margin:0 0 22px; text-wrap:balance;
}
.cat-outro p:not(.cat-outro-lead){font-size:1.1rem; line-height:1.75; color:var(--ink-soft); margin:0 auto; max-width:68ch; text-wrap:pretty;}
.cat-outro mark{
  background:linear-gradient(transparent 58%, rgba(240,210,59,0.6) 58%); color:var(--ink); font-weight:600; padding:0 2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ---------- topic panels (opened by the about pills) ---------- */
.topic{
  --c:var(--green-deep); --c-soft:rgba(0,97,47,0.08);
  margin-top:56px; background:#FFFCF3; border:2px solid var(--ink); box-shadow:8px 8px 0 var(--c);
  scroll-margin-top:100px; animation:topic-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.topic.t-red{--c:var(--red-deep); --c-soft:rgba(161,24,32,0.07);}
.topic[hidden]{display:none;}
@keyframes topic-in{from{opacity:0; transform:translateY(-18px);} to{opacity:1; transform:none;}}
.topic-band{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--c); color:var(--paper); padding:12px 22px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; font-size:0.85rem;
}
.topic-close{
  all:unset; cursor:pointer; font-family:inherit; font-weight:800; letter-spacing:0.08em;
  display:inline-flex; align-items:center; gap:8px; padding:4px 2px;
}
.topic-close span{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  border:2px solid currentColor; font-size:1rem; transition:transform 0.25s ease, background-color 0.2s ease;
}
.topic-close:hover span{transform:rotate(90deg); background:rgba(255,255,255,0.18);}
.topic-close:focus-visible{outline:3px solid var(--highlight); outline-offset:3px;}
.topic-grid{display:grid; grid-template-columns:minmax(240px, 0.8fr) minmax(0, 1.6fr); gap:56px; padding:44px 48px 52px;}
.topic-side{position:sticky; top:110px; align-self:start;}
.topic-title{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem, 4.4vw, 3.6rem); line-height:0.92; color:var(--c); margin:0;
}
.topic-sub{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--ink); margin:12px 0 34px; text-wrap:balance;}
.topic-photos{position:relative; padding-left:6px;}
.topic-photos .polaroid{max-width:250px; padding:10px 10px 38px;}
.topic-photos .polaroid img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover;}
.topic-photos .tape{width:84px; height:26px; top:-12px;}
.topic-photos .cap{bottom:10px; font-size:0.78rem;}
.topic-photos.duo .polaroid{max-width:200px;}
.topic-photos.duo .polaroid + .polaroid{margin:-70px 0 0 auto; margin-right:4px;}
.topic-body{font-size:1.06rem; line-height:1.7; color:var(--ink-soft); max-width:66ch;}
.topic-body p{margin:0 0 16px;}
.topic-body strong{color:var(--ink);}
.topic-lead{font-family:'Fraunces', serif; font-size:1.22rem; line-height:1.55; color:var(--ink) !important;}
.topic-lead.drop::first-letter{
  float:left; font-family:'Big Shoulders Display', sans-serif; font-weight:900; color:var(--c);
  font-size:3.9em; line-height:0.82; margin:6px 10px 0 0;
}
.topic-question{font-style:italic; font-size:1.45rem !important; line-height:1.4 !important; padding-left:18px; border-left:4px solid var(--c);}
.topic-body h4{
  display:flex; align-items:baseline; gap:14px; margin:40px 0 14px; padding-top:18px; border-top:1px dashed var(--line);
  font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem; line-height:1.25; color:var(--ink);
}
.topic-body h4:first-child{margin-top:0; padding-top:0; border-top:0;}
.topic-body h4 .n{font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:1.05rem; color:var(--c); letter-spacing:0.06em;}
.topic-cards{list-style:none; padding:0; margin:22px 0 8px; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; counter-reset:card;}
.topic-cards li{
  counter-increment:card; position:relative; background:var(--c-soft); border-left:4px solid var(--c);
  padding:16px 18px 16px; font-size:0.97rem; line-height:1.55;
}
.topic-cards li::before{
  content:"0" counter(card); position:absolute; top:12px; right:14px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:1.5rem; color:var(--c); opacity:0.35;
}
.topic-cards strong{
  display:block; margin-bottom:6px; padding-right:34px;
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; font-size:1rem; color:var(--c);
}
.topic-stat{
  display:flex; align-items:center; gap:22px; margin:26px 0 28px; padding:20px 24px;
  background:var(--c); color:var(--paper); transform:rotate(-1deg); box-shadow:5px 5px 0 var(--ink);
}
.topic-stat .big{font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:clamp(2.8rem, 6vw, 4rem); line-height:1;}
.topic-stat span:last-child{font-size:1rem; line-height:1.45;}
.topic-stat strong{color:var(--highlight);}
.topic-stat .label{display:block; margin-bottom:4px; font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; font-size:1.15rem;}
.topic-stat small{display:block; margin-top:4px; font-size:0.78rem; opacity:0.75; letter-spacing:0.04em;}
.topic-swaps{list-style:none; padding:0; margin:6px 0 24px; display:flex; flex-wrap:wrap; gap:10px;}
.topic-swaps li{
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; font-size:0.92rem;
  padding:7px 14px; border:2px dashed var(--c); color:var(--ink); background:#fff;
}
.topic-swaps li:nth-child(odd){transform:rotate(-1.5deg);}
.topic-swaps li:nth-child(even){transform:rotate(1.2deg);}
.topic-swaps span{color:var(--c); font-weight:900; margin:0 4px;}
.topic-quote{
  position:relative; margin:38px 0 0; padding:26px 0 0 0; border-top:3px solid var(--ink);
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:clamp(1.3rem, 2.3vw, 1.65rem); line-height:1.4; color:var(--ink);
}
.topic-quote::before{
  content:"“"; position:absolute; top:-0.42em; left:-4px; padding-right:10px; background:#FFFCF3;
  font-family:'Fraunces', serif; font-style:normal; font-weight:700; font-size:3.4rem; line-height:1; color:var(--c);
}

/* ---------- la nostra storia (accordion rows with a polaroid that drops in on open) ---------- */
.story-body{
  max-width:none; display:grid; grid-template-columns:minmax(0, 68ch) minmax(220px, 300px);
  justify-content:space-between; align-items:start; gap:56px; padding-bottom:40px;
}
.story-photo{position:sticky; top:120px; margin:14px 18px 0 0; max-width:300px; --tilt:-4deg; transform:rotate(var(--tilt));}
.story-photo.tilt-r{--tilt:3deg; transform:rotate(var(--tilt));}
.story-photo img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;}
@media (min-width:901px){.story-body:has(.landscape){grid-template-columns:minmax(0, 62ch) minmax(260px, 400px);}}
.story-photo.landscape{max-width:400px; width:100%;}
.story-photo.landscape img{aspect-ratio:auto;}
/* closed <details> content is display:none, so the animation replays every time a row opens */
.story details[open] .story-photo{animation:story-drop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;}
.story details[open] .story-text{animation:story-fade 0.45s ease both;}
@keyframes story-drop{
  from{opacity:0; transform:translateY(-26px) rotate(calc(var(--tilt) * -2.5));}
  to{opacity:1; transform:rotate(var(--tilt));}
}
@keyframes story-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--paper); padding:56px 0 28px;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px;}
footer .brand-foot img{height:46px; width:auto;}
.socials{display:flex; gap:14px;}
.socials a{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:2px solid rgba(247,241,225,0.35); border-radius:50%; text-decoration:none;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.socials a:hover{border-color:var(--highlight); transform:translateY(-2px);}
.socials svg{width:19px; height:19px; fill:var(--paper);}
.foot-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(247,241,225,0.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.82rem; color:rgba(247,241,225,0.55);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  nav ul{
    position:fixed; top:66px; right:0; left:0; background:var(--paper);
    flex-direction:column; padding:24px 28px; gap:20px; border-bottom:1px solid var(--line);
    transform:translateY(-130%); visibility:hidden; transition:transform 0.3s ease, visibility 0s linear 0.3s; z-index:400;
  }
  nav ul.open{transform:translateY(0); visibility:visible; transition:transform 0.3s ease;}
  .header-socials{display:none;}
  .nav-right{gap:0;}
  .nav-toggle{display:flex;}
  .hero{min-height:0;}
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .eyebrow{justify-content:center; margin-left:auto; margin-right:auto;}
  .hero p.lede{margin-left:auto; margin-right:auto;}
  .cta-row{justify-content:center;}
  .hero-badge{margin-top:0; width:min(230px, 62vw); order:-1;}
  .about-grid,.event-grid{grid-template-columns:1fr;}
  .quote-card{transform:none; margin-top:10px;}
  .press-grid{grid-template-columns:1fr;}
  .clip:nth-child(n){transform:none;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .cat-card.tall{grid-column:2; grid-row:1 / span 2;}
  .vendor{padding:44px 26px;}
  .footer-grid{flex-direction:column;}
  .story-body{grid-template-columns:1fr; gap:34px;}
  .topic-grid{grid-template-columns:1fr; gap:30px; padding:30px 22px 36px;}
  .topic-side{position:relative; top:auto;}
  .topic-sub{margin-bottom:26px;}
  .topic-photos{display:flex; justify-content:center; gap:14px;}
  .topic-photos .polaroid,.topic-photos.duo .polaroid{max-width:min(210px, 44vw);}
  .topic-photos.duo .polaroid + .polaroid{margin:24px 0 0;}
  .topic-photos .tape{width:60px; height:22px;}
  .topic{box-shadow:5px 5px 0 var(--c);}
  .topic-stat{flex-direction:column; align-items:flex-start; gap:8px;}
  .story-photo{position:relative; top:auto; order:-1; justify-self:center; margin:22px 0 0; width:min(250px, 70vw);}
  .story-photo.landscape{width:min(360px, 88vw);}
}
@media (max-width:560px){
  .polaroid{transform:rotate(-2deg);}
  .polaroid.tilt-r{transform:rotate(1.5deg);}
  .cat-grid{grid-template-columns:1fr;}
  .hero{padding:56px 20px 72px;}
  section{padding:60px 0;}
  .wrap{padding:0 20px;}
  .flyer-grid{grid-template-columns:repeat(2, 1fr); gap:24px 16px;}
  .cat-card.tall{grid-column:auto; grid-row:auto;}
  .feature-media{flex:none; aspect-ratio:9/16; max-height:78vh;}
  .faq-item summary{font-size:1.08rem;}
  /* phones: one line would make the text unreadable, so an even 2x2 grid */
  .about-badges{display:grid; grid-template-columns:1fr 1fr;}
  .about-badges .pill{font-size:0.82rem; justify-content:center;}
}

/* touch screens: the element crossing the middle of the screen gets .is-active (= the desktop hover look, set in app.js); taps get a quick press */
@media (hover:none){
  .btn:active{transform:translate(1px,1px); box-shadow:none;}
  .clip:active,.cat-card:active,.ig-card:active,.flyer:active{transform:scale(0.98); transition-duration:0.1s;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .ticker-track,.stamp-ring{animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
  .story details[open] .story-photo,.story details[open] .story-text,.topic{animation:none;}
}