/* [ALESENSO] AS3.5 — estratto da CSS inline, 20260928-1 */
/* Consolidamento del 23/09/2026: barra, menu e pie' di pagina sono
   stati tolti da qui e vivono solo in base.css. I valori della scala
   tipografica e dei contrasti sono stati scritti dentro le regole a
   cui appartengono, al posto delle correzioni che base.css imponeva
   con selettori gonfiati. */

/* Regole specifiche di opera. Caricato DOPO base.css e comune.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --cream: #F7F3EE; --warm: #EDE7DC; --sand: #D8CEBC; --sand-lt: #EAE3D6; --ink: #1C1916; --ink-mid: #4A433A; --ink-lt: #8C8078; --red: #C0432A; --red-lt: #D9593E; --red-pale: #F5E8E3; --ff-serif: 'Cormorant Garamond', Georgia, serif; --ff-sans: 'DM Sans', system-ui, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--ff-sans); font-weight: 300; line-height: 1.65; overflow-x: hidden; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
.hero { height: 100vh; min-height: 640px; position: relative; overflow: hidden; background: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 55% 35%, rgba(192,67,42,.2), transparent 65%), radial-gradient(ellipse 60% 80% at 20% 70%, rgba(192,67,42,.08), transparent 60%), linear-gradient(160deg, #2A2018 0%, #1C1916 50%, #120F0C 100%); background-size: cover; background-position: center; transform: scale(1.04); transition: transform 8s ease; }
.hero.loaded .hero-bg { transform: scale(1); }
.hero-grain { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.04'/%3E%3C/svg%3E"); opacity: .5; pointer-events: none; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(28,25,22,.5) 0%, transparent 30%, transparent 50%, rgba(28,25,22,.7) 80%, rgba(28,25,22,.95) 100% ); }
.hero-content { position: relative; z-index: 3; padding: 0 3.5rem 4rem; }
.hero-breadcrumb { display: flex; align-items: center; gap: .6rem; font-size:1.05rem; letter-spacing: .15em; text-transform: uppercase; color:rgba(247,243,238,.8); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp .7s var(--ease) .2s forwards; }
.hero-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
.hero-breadcrumb a:hover { color: rgba(247,243,238,.9); }
.hero-breadcrumb .sep { opacity: .4; }
.hero-title { font-family: var(--ff-serif); font-size: clamp(4.5rem, 10vw, 11rem); font-weight: 300; line-height: .9; letter-spacing: -.02em; color: var(--cream); opacity: 0; animation: fadeUp .9s var(--ease) .35s forwards; }
.hero-title em { font-style: italic; color: rgba(217,89,62,.85); }
.hero-meta-strip { display: flex; gap: 3rem; align-items: center; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(247,243,238,.15); opacity: 0; animation: fadeUp .8s var(--ease) .55s forwards; }
.hero-meta-item { }
.hero-meta-label { font-size:1.05rem; letter-spacing:.12em; text-transform: uppercase; color:rgba(247,243,238,.8); margin-bottom: .2rem; }
.hero-meta-value { font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 300; color: rgba(247,243,238,.85); }
.hero-scroll-cue { position: absolute; right: 3.5rem; bottom: 4rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .8rem; font-size:1.05rem; letter-spacing: .15em; text-transform: uppercase; color:rgba(247,243,238,.8); animation: fadeIn 1s var(--ease) 1.2s both; }
.scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(247,243,238,.35), transparent); animation: scrollPulse 2s ease infinite 1.5s; }
@keyframes scrollPulse { 0%,100% { transform: scaleY(1); opacity: .35; } 50% { transform: scaleY(1.4); opacity: .7; } }
.metadata-band { background: var(--ink); border-top: 1px solid rgba(247,243,238,.08); }
.metadata-inner { max-width: 1200px; margin: 0 auto; padding: 0 3.5rem; display: flex; gap: 0; overflow-x: auto; }
.meta-cell { flex: 0 0 auto; padding: 2rem 3rem 2rem 0; margin-right: 3rem; border-right: 1px solid rgba(247,243,238,.08); }
.meta-cell:last-child { border-right: none; }
.meta-cell-label { font-size:1.05rem; letter-spacing:.12em; text-transform: uppercase; color:rgba(247,243,238,.8); margin-bottom: .4rem; }
.meta-cell-value { font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 300; color: rgba(247,243,238,.8); line-height: 1.35; }
.meta-cell-value .highlight { color: var(--red-lt); }
.chapter { position: relative; }
.chapter-marker { position: absolute; left: 3.5rem; top: 3rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.chapter-num { font-family: var(--ff-serif); font-size:1.05rem; font-weight: 300; color: var(--red); letter-spacing: .08em; }
.chapter-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--red), transparent); }
.chapter-body { max-width: 1200px; margin: 0 auto; padding: 6rem 3.5rem 6rem 8rem; }
.chapter-label { display: flex; align-items: center; gap: 1rem; font-size:1.05rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 1.5rem; }
.chapter-label::after { content: ''; flex: 0 0 36px; height: 1px; background: var(--red); }
h2.chapter-title { font-family: var(--ff-serif); font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; margin-bottom: 2.5rem; }
h2.chapter-title em { font-style: italic; color: var(--red); }
.ch-descrizione { background: var(--cream); }
.descrizione-layout { display: grid; grid-template-columns: 1fr 340px; gap: 5rem; align-items: start; }
.descrizione-text { font-size:1.15rem; color: var(--ink-mid); line-height: 1.9; }
.descrizione-text p { margin-bottom: 1.4rem; }
.descrizione-text p:first-of-type::first-letter { font-family: var(--ff-serif); font-size: 4.5rem; font-weight: 500; line-height: .8; float: left; margin-right: .15em; margin-top: .05em; color: var(--red); }
.audio-reader { display: flex; align-items: center; gap: .8rem; margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--sand); font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color:var(--ink-mid); }
.audio-btn { width: 42px; height: 42px; background: var(--ink); color: var(--cream); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .25s, transform .2s; }
.audio-btn:hover { background: var(--red); transform: scale(1.06); }
.audio-btn.playing { background: var(--red); }
.audio-progress { flex: 1; height: 2px; background: var(--sand); border-radius: 1px; position: relative; overflow: visible; }
.audio-bar { height: 100%; background: var(--red); width: 0%; border-radius: 1px; transition: width .5s linear; }
.descrizione-sidebar { background: var(--warm); padding: 2.5rem; border-radius: 3px; position: sticky; top: 6rem; }
.sidebar-img { aspect-ratio: 4/3; background: var(--sand); border-radius: 2px; margin-bottom: 1.8rem; overflow: hidden; position: relative; }
.sidebar-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 55% 40%, rgba(192,67,42,.2), transparent); }
.sidebar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-field { margin-bottom: 1.3rem; }
.sidebar-field:last-child { margin-bottom: 0; }
.sf-label { font-size:1.05rem; letter-spacing: .14em; text-transform: uppercase; color:var(--ink-mid); margin-bottom: .25rem; }
.sf-value { font-family: var(--ff-serif); font-size:1.15rem; font-weight: 300; color: var(--ink); line-height: 1.4; }
.divider-thin { height: 1px; background: var(--sand); margin: 1.3rem 0; }
.map-link { display: flex; align-items: center; gap: .5rem; font-size:1.05rem; letter-spacing: .08em; color:var(--ink-mid); text-decoration: none; margin-top: .4rem; transition: color .2s; }
.map-link:hover { color: var(--red); }
.map-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.ch-genesi { background: var(--warm); }
.genesi-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.content-toggle { display: inline-flex; border: 1px solid var(--sand); border-radius: 3px; overflow: hidden; margin-bottom: 2rem; }
.toggle-btn { padding: .5rem 1.2rem; font-family: var(--ff-sans); font-size:1.05rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--ink-mid); border: none; cursor: pointer; transition: all .2s; }
.toggle-btn.active { background: var(--ink); color: var(--cream); }
.toggle-panel { display: none; }
.toggle-panel.active { display: block; }
/* .body-text e .body-text p: spostati in base.css il 27/09/2026,
   perche' serve anche alla scheda progetto, che non carica questo
   foglio e li riproduceva come stile in linea. */
.opera-section-title { font-family: var(--ff-serif); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 .4rem; letter-spacing: -0.01em; }
.opera-section-title + .body-text { margin-top: 1rem; }
@media (max-width: 760px) { .opera-section-title { font-size: 1.6rem; } }
.video-embed { aspect-ratio: 16/9; background: var(--ink); border-radius: 3px; position: relative; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; cursor: pointer; }
.play-btn { width: 64px; height: 64px; background: rgba(247,243,238,.12); backdrop-filter: blur(6px); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .25s, transform .2s; }
.play-btn:hover { background: var(--red); transform: scale(1.08); }
.play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.video-label { font-size:1.05rem; letter-spacing: .12em; text-transform: uppercase; color:rgba(247,243,238,.8); }
.genesi-quote { font-family: var(--ff-serif); font-size: 1.6rem; font-weight: 300; font-style: italic; line-height: 1.45; color: var(--ink); border-left: 2px solid var(--red); padding-left: 1.8rem; margin-bottom: 2.5rem; }
.genesi-quote cite { display: block; margin-top: .8rem; font-family: var(--ff-sans); font-size:1.05rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color:var(--ink-mid); }
.ch-realizzazione { background: var(--cream); }
.realizzazione-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.realizzazione-layout .media-side { order: -1; }
.process-data { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sand); margin-top: 2.5rem; border: 1px solid var(--sand); }
.process-cell { background: var(--cream); padding: 1.2rem 1.5rem; }
.process-cell-label { font-size:1.05rem; letter-spacing: .14em; text-transform: uppercase; color:var(--ink-mid); margin-bottom: .3rem; }
.process-cell-value { font-family: var(--ff-serif); font-size:1.15rem; font-weight: 300; color: var(--ink); }
.ch-carosello { background: var(--ink); padding: 6rem 0; }
.ch-carosello .chapter-label { color: rgba(217,89,62,.8); }
.ch-carosello .chapter-label::after { background: rgba(217,89,62,.8); }
.ch-carosello .chapter-num { color: rgba(217,89,62,.8); }
.ch-carosello .chapter-line { background: linear-gradient(to bottom, rgba(217,89,62,.8), transparent); }
.ch-carosello h2.chapter-title { color: var(--cream); }
.ch-carosello h2.chapter-title em { color: var(--red-lt); }
.carousel-wrap { position: relative; overflow: hidden; margin-bottom: 1.5rem; }
.carousel-track { display: flex; gap: 1.5rem; transition: transform .5s var(--ease-out); will-change: transform; }
.carousel-slide { flex: 0 0 calc(60% - .75rem); aspect-ratio: 16/9; background: #2A2520; border-radius: 3px; position: relative; overflow: hidden; cursor: pointer; }
.carousel-slide:nth-child(2) { flex: 0 0 calc(35% - .75rem); aspect-ratio: 3/4; align-self: flex-start; }
.carousel-slide:nth-child(3) { flex: 0 0 calc(45% - .75rem); }
.carousel-slide:nth-child(4) { flex: 0 0 calc(30% - .75rem); aspect-ratio: 1; align-self: flex-end; }
.carousel-slide:nth-child(5) { flex: 0 0 calc(55% - .75rem); }
.cs-1 { background: radial-gradient(ellipse 60% 70% at 55% 40%, rgba(192,67,42,.3), #2A2218); }
.cs-2 { background: radial-gradient(ellipse 70% 60% at 40% 60%, rgba(192,67,42,.2), #231E18); }
.cs-3 { background: radial-gradient(ellipse 65% 75% at 60% 35%, rgba(192,67,42,.25), #2A2218); }
.cs-4 { background: radial-gradient(ellipse 80% 60% at 35% 55%, rgba(192,67,42,.18), #231E18); }
.cs-5 { background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(192,67,42,.22), #2A2218); }
.slide-type-badge { position: absolute; top: 1rem; left: 1rem; padding: .25rem .7rem; background: rgba(28,25,22,.7); backdrop-filter: blur(6px); border-radius: 2px; font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,238,.7); }
.slide-type-badge.video { background: rgba(192,67,42,.8); color: #fff; }
.carousel-controls { display: flex; justify-content: space-between; align-items: center; padding: 0 3.5rem 0 8rem; margin-top: 2rem; }
.carousel-count { font-family: var(--ff-serif); font-size: 1.1rem; font-weight: 300; color:rgba(247,243,238,.8); }
.carousel-count span { color: rgba(247,243,238,.8); }
.carousel-nav { display: flex; gap: .8rem; }
.carousel-btn { width: 46px; height: 46px; border: 1px solid rgba(247,243,238,.15); border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; color: rgba(247,243,238,.6); }
.carousel-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.carousel-btn svg { width: 16px; height: 16px; }
.carousel-thumbs { display: flex; gap: .8rem; overflow-x: auto; padding: 0 3.5rem 0 8rem; margin-top: 1.5rem; scrollbar-width: none; }
.carousel-thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 80px; height: 56px; border-radius: 2px; cursor: pointer; opacity: .4; border: 2px solid transparent; transition: all .25s; }
.thumb.active { opacity: 1; border-color: var(--red); }
.thumb-1 { background: var(--cs-1, #3A3028); }
.thumb-2 { background: #2E251C; }
.thumb-3 { background: #352818; }
.thumb-4 { background: #2A2018; }
.thumb-5 { background: #302520; }
.ch-docufilm { background: #100D0B; padding: 7rem 0; }
.ch-docufilm .chapter-label, .ch-docufilm .chapter-num { color: var(--red-lt); }
.ch-docufilm .chapter-label::after { background: var(--red-lt); }
.ch-docufilm .chapter-line { background: linear-gradient(to bottom, var(--red-lt), transparent); }
.docufilm-intro { font-size:1.15rem; color:rgba(247,243,238,.8); max-width: 44ch; line-height: 1.8; margin-bottom: 3.5rem; }
.docufilm-player { aspect-ratio: 16/9; background: #1A1410; border-radius: 4px; position: relative; overflow: hidden; border: 1px solid rgba(247,243,238,.06); }
.docufilm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.docufilm-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: linear-gradient(to bottom, rgba(16,13,11,.4), rgba(16,13,11,.8)); cursor: pointer; transition: opacity .3s; }
.docufilm-overlay:hover { background: rgba(16,13,11,.5); }
.docufilm-title-overlay { font-family: var(--ff-serif); font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 300; color: rgba(247,243,238,.9); text-align: center; max-width: 20ch; }
.docufilm-play { width: 80px; height: 80px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .25s, background .25s; }
.docufilm-play:hover { transform: scale(1.08); background: var(--red-lt); }
.docufilm-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.docufilm-duration { font-size:1.05rem; letter-spacing: .15em; text-transform: uppercase; color:rgba(247,243,238,.8); }
.ch-stampa { background: var(--warm); }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }
.press-card { background: var(--cream); padding: 2rem; border-radius: 3px; border: 1px solid var(--sand-lt); text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.press-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(28,25,22,.08); }
.press-pub { font-size:1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; }
.press-date { font-size:1.05rem; letter-spacing: .08em; color:var(--ink-mid); margin-bottom: 1rem; }
.press-headline { font-family: var(--ff-serif); font-size: 1.15rem; font-weight: 300; font-style: italic; line-height: 1.4; color: var(--ink); flex: 1; margin-bottom: 1.2rem; }
.press-excerpt { font-size:1.15rem; color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.5rem; }
.press-link { display: flex; align-items: center; gap: .4rem; font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color:var(--ink-mid); margin-top: auto; transition: color .2s; }
.press-card:hover .press-link { color: var(--red); }
.press-link svg { width: 12px; height: 12px; }
.related { background: var(--cream); padding: 6rem 0; }
.related-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.related-card { cursor: pointer; text-decoration: none; display: block; }
.related-img { aspect-ratio: 4/3; border-radius: 2px; margin-bottom: 1.1rem; position: relative; overflow: hidden; }
.rc-1 .related-img { background: linear-gradient(135deg, #CFC5B0, #C0B09A); }
.rc-2 .related-img { background: linear-gradient(135deg, #BEB09A, #B0A088); }
.rc-3 .related-img { background: linear-gradient(135deg, #D4C8B2, #C8BC9E); }
.related-img::before { content: ''; position: absolute; inset: 0; background: rgba(28,25,22,0); transition: background .3s; }
.related-card:hover .related-img::before { background: rgba(28,25,22,.15); }
.related-card-tag { font-size:1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: .35rem; }
.related-card-title { font-family: var(--ff-serif); font-size: 1.3rem; font-weight: 300; font-style: italic; color: var(--ink); line-height: 1.2; transition: color .25s; }
.related-card:hover .related-card-title { color: var(--red); }
.related-card-meta { font-size:1.05rem; color:var(--ink-mid); margin-top: .3rem; }
.related-projects { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--sand); }
.related-proj-label { font-size:1.05rem; letter-spacing: .18em; text-transform: uppercase; color:var(--ink-mid); margin-bottom: 1.8rem; }
.proj-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.proj-link { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; background: var(--warm); border: 1px solid var(--sand); border-radius: 3px; text-decoration: none; transition: all .25s; }
.proj-link:hover { background: var(--red-pale); border-color: rgba(192,67,42,.2); }
.proj-link-title { font-family: var(--ff-serif); font-size:1.15rem; font-weight: 300; color: var(--ink); }
.proj-link:hover .proj-link-title { color: var(--red); }
.proj-link-sub { font-size:1.05rem; color:var(--ink-mid); }
.proj-arrow { width: 28px; height: 28px; background: var(--sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; transition: background .25s; }
.proj-link:hover .proj-arrow { background: var(--red); color: #fff; }
.proj-arrow svg { width: 12px; height: 12px; }
.social-section { background: var(--ink); padding: 6rem 0; }
.social-header { margin-bottom: 4rem; }
.social-intro { font-size:1.15rem; color:rgba(247,243,238,.8); max-width: 46ch; line-height: 1.8; margin-top: 1rem; }
.social-tabs { display: flex; gap: .5rem; margin-bottom: 2.5rem; }
.social-tab { padding: .5rem 1.4rem; background: rgba(247,243,238,.06); border: 1px solid rgba(247,243,238,.1); border-radius: 2px; font-family: var(--ff-sans); font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color:rgba(247,243,238,.8); cursor: pointer; transition: all .25s; display: flex; align-items: center; gap: .5rem; }
.social-tab.active, .social-tab:hover { background: rgba(247,243,238,.12); color: rgba(247,243,238,.85); border-color: rgba(247,243,238,.2); }
.social-tab svg { width: 14px; height: 14px; }
.social-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(247,243,238,.05); border: 1px solid rgba(247,243,238,.05); }
.social-post { background: #1C1916; aspect-ratio: 1; position: relative; overflow: hidden; cursor: pointer; }
.sp-bg-1 { background: radial-gradient(ellipse 65% 70% at 55% 40%, rgba(192,67,42,.35), #201A14); }
.sp-bg-2 { background: radial-gradient(ellipse 70% 60% at 35% 60%, rgba(192,67,42,.25), #1A1610); }
.sp-bg-3 { background: radial-gradient(ellipse 60% 80% at 60% 35%, rgba(192,67,42,.3), #201A14); }
.sp-bg-4 { background: radial-gradient(ellipse 75% 65% at 40% 55%, rgba(192,67,42,.2), #1A1610); }
.social-post-overlay { position: absolute; inset: 0; background: rgba(28,25,22,0); display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; transition: background .3s; }
.social-post:hover .social-post-overlay { background: rgba(28,25,22,.75); }
.sp-type { align-self: flex-start; padding: .2rem .6rem; background: rgba(28,25,22,.6); backdrop-filter: blur(4px); border-radius: 2px; font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color:rgba(247,243,238,.8); }
.sp-content { opacity: 0; transform: translateY(6px); transition: all .3s var(--ease); }
.social-post:hover .sp-content { opacity: 1; transform: none; }
.sp-caption { font-family: var(--ff-serif); font-size:1.15rem; font-style: italic; font-weight: 300; color: rgba(247,243,238,.85); line-height: 1.4; margin-bottom: .5rem; }
.sp-meta { display: flex; align-items: center; gap: .8rem; font-size:1.05rem; letter-spacing: .08em; text-transform: uppercase; color:rgba(247,243,238,.8); }
.sp-platform { color: var(--red-lt); }
.social-cta-strip { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.social-cta-btn { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.8rem; border: 1px solid rgba(247,243,238,.12); border-radius: 3px; font-family: var(--ff-sans); font-size:1.05rem; letter-spacing: .1em; text-transform: uppercase; color:rgba(247,243,238,.8); text-decoration: none; transition: all .25s; }
.social-cta-btn:hover { background: rgba(247,243,238,.06); border-color: rgba(247,243,238,.25); color: rgba(247,243,238,.9); }
.social-cta-btn svg { width: 16px; height: 16px; }
.social-tag { color: var(--red-lt); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
@media (max-width: 960px) { .hero-content { padding: 0 1.5rem 3rem; } .hero-meta-strip { flex-wrap: wrap; gap: 1.5rem; } .metadata-inner { padding: 0 1.5rem; } .chapter-marker { display: none; } .chapter-body { padding: 4rem 1.5rem; } .descrizione-layout, .genesi-layout, .realizzazione-layout { grid-template-columns: 1fr; gap: 2.5rem; } .realizzazione-layout .media-side { order: 0; } .press-grid { grid-template-columns: 1fr 1fr; } .related-grid { grid-template-columns: 1fr 1fr; } .social-posts { grid-template-columns: repeat(2, 1fr); } .carousel-controls, .carousel-thumbs { padding-left: 1.5rem; } }
@media (max-width: 600px) { .hero-title { font-size: 4rem; } .press-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .social-posts { grid-template-columns: repeat(2, 1fr); } .carousel-slide { flex: 0 0 85% !important; aspect-ratio: 4/3 !important; } }
@media (max-width: 600px) { .hero-title { font-size: clamp(2.6rem, 13vw, 4rem); overflow-wrap: anywhere; } }
#cms-loader { position: fixed; inset: 0; z-index: 9999; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.2rem; transition: opacity .5s ease, visibility .5s ease; }
#cms-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-wordmark { font-family: var(--ff-serif); font-size: 1.6rem; font-weight: 400; letter-spacing: .08em; color: var(--ink); }
.loader-wordmark span { color: var(--red); }
.loader-bar { width: 120px; height: 1px; background: var(--sand); position: relative; overflow: hidden; }
.loader-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--red); animation: loader-sweep 1.4s ease-in-out infinite; }
@keyframes loader-sweep { 0% { left: -100%; } 50% { left: 0%; } 100% { left: 100%; } }

/* ══════════════════════════════════════════════════════════
   STILI PORTATI QUI DAGLI ATTRIBUTI style DEL MARKUP (27/09/2026)

   Il markup della scheda opera costruiva scheda tecnica, pulsante
   della serie, documenti, citazione, didascalie e rassegna stampa
   con stili scritti in linea. Nessuna media query poteva
   raggiungerli, e la scala tipografica del 23 settembre non li aveva
   toccati: erano rimasti fra 9,9 e 14,1 px, con --ink-lt come colore
   di testo, che su fondo chiaro dà 3,47:1.

   I corpi sono portati alla scala; --ink-lt diventa --ink-mid dove
   è testo. Il resto dei valori è invariato.
   ══════════════════════════════════════════════════════════ */

/* ── Pulsanti di appartenenza: progetto e serie ──────────── */
/* Il pulsante del progetto sta sopra il titolo e usa la stessa forma
   di quello della serie, che resta sotto la descrizione: lì il
   margine superiore lo stacca dal testo, qui serve il contrario. */
.op-rimandi{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem}
.op-rimandi .op-serie{margin-top:0}
.op-serie{display:flex;align-items:center;gap:1rem;margin-top:2rem;
padding:.9rem 1.1rem;border:1px solid var(--sand);border-radius:3px;
text-decoration:none;color:var(--ink);
transition:border-color .2s,transform .2s}
.op-serie:hover{border-color:var(--ink);transform:translateY(-1px)}
.op-serie-testo{display:flex;flex-direction:column;gap:.15rem}
.op-serie-occhiello{font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.op-serie-titolo{font-family:var(--ff-serif);font-size:1.15rem}
.op-serie-freccia{width:12px;height:12px;margin-left:auto;fill:none;
stroke:currentColor;stroke-width:1.5}

/* ── Scheda tecnica ──────────────────────────────────────── */
.op-scheda{padding-top:2rem}
.op-scheda table{width:100%;border-collapse:collapse}
.op-scheda th{padding:.4rem 1rem .4rem 0;color:var(--ink-mid);
font-size:1.05rem;font-weight:400;width:38%;letter-spacing:.1em;
text-transform:uppercase;text-align:left;vertical-align:top;
white-space:nowrap}
.op-scheda td{padding:.4rem 0;color:var(--ink);font-size:1.15rem}

/* Autori e coautori (D132). I collegamenti ai profili esterni
   prendono lo stesso trattamento del resto della scheda: filetto
   sottile, nessun colore d'accento, sottolineatura all'ingresso. */
.op-autori a{color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--sand)}
.op-autori a:hover,.op-autori a:focus-visible{border-bottom-color:var(--ink)}
.op-autori-sep{color:var(--ink-lt)}

/* ── Documenti ───────────────────────────────────────────── */
.op-documenti{margin-top:2rem}
.op-doc{display:inline-flex;align-items:center;gap:.5rem;
padding:.55rem .9rem;border:1px solid var(--sand);border-radius:3px;
font-size:1.05rem;color:var(--ink);text-decoration:none;
margin-right:.5rem;margin-bottom:.5rem}
.op-doc-peso{color:var(--ink-mid);font-size:1.05rem}

/* ── Citazione ───────────────────────────────────────────── */
.op-quote{padding:2rem;border-left:2px solid var(--red);margin-top:3rem}
.op-quote-testo{font-style:italic;font-size:1.5rem;line-height:1.5}
.op-quote-autore{display:block;margin-top:1rem;font-size:1.05rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid)}

/* ── Rassegna stampa ─────────────────────────────────────── */
.op-press{list-style:none;padding:0;margin-top:1.5rem}
.op-press li{padding:.9rem 0;border-bottom:1px solid var(--sand)}
.op-press-testata{font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.op-press-data{font-size:1.05rem;color:var(--ink-mid);margin-left:.6rem}
.op-press-titolo{font-family:var(--ff-serif);font-size:1.45rem;line-height:1.25;margin-top:.3rem}
.op-press-titolo a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sand)}
.op-press-estratto{font-size:1.15rem;color:var(--ink-mid);margin-top:.4rem}

/* ── Corpo del testo redazionale ─────────────────────────── */
/* .op-testo e .op-testo-stretto sono diventati .body-text-stacco e
   .body-text-stretto in base.css: servivano anche alla scheda
   progetto. Resta qui la sola variante delle sezioni libere. */
.op-testo-sez{margin-bottom:1.5rem}
/* Galleria con interspazio maggiore (realizzazione, sezioni). */
.op-galleria-lg{gap:1rem}
.realizzazione-gallery{margin-top:2rem}

/* ══════════════════════════════════════════════════════════
   IMPAGINAZIONE DELLA SCHEDA OPERA (27/09/2026)

   Tutte le sezioni della pagina portavano padding, sfondo e griglia
   come stile scritto in linea. Gli stili in linea non sono
   raggiungibili da una media query: per farli cedere sotto i 960px
   questo foglio doveva usare !important su selettori di discendenza
   (.intro-section > div, #genesi > div, ...). Tolti gli stili dal
   markup, gli !important sono stati ritirati e bastano le classi.

   Fra i selettori scavalcati ce n'erano tre che non esistono in
   AS3.5: #opera-quote-block, #opera-gallery-grid e #opera-videos.
   Erano residui della pagina HTML originale, e per giorni hanno dato
   l'impressione che quel blocco governasse qualcosa.
   ══════════════════════════════════════════════════════════ */
.intro-section{padding:5rem 0 3rem}
.gallery-section{padding:3rem 0;background:var(--warm)}
.opera-video{padding:3rem 0}
#genesi{padding:6rem 0;background:var(--cream)}
#realizzazione{padding:6rem 0;background:var(--warm)}
.opera-sez{padding:4rem 0;border-top:1px solid var(--sand)}
.opera-press{padding:4rem 0;border-top:1px solid var(--sand)}

/* Testo a sinistra, scheda tecnica o citazione a destra. */
.op-griglia{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}

.op-video-stacco{margin-top:2rem}
.op-video-stacco-lg{margin-top:2.5rem}

@media (max-width: 960px) {
  /* La colonna di destra passa sotto quella di sinistra. Il padding
     che la allineava alla colonna accanto diventa spazio sprecato, e
     il margine superiore della citazione si somma all'interspazio
     della griglia: entrambi vanno a zero. */
  .op-griglia{grid-template-columns:1fr;gap:2.5rem}
  .op-scheda{padding-top:0}
  .op-quote{margin-top:0}
}