/* Atelier Olesia · sito
   Layout: l'atelier di sera. Fondo grafite, gli abiti sono l'unica luce;
   finestre ad arco (lo specchio dell'atelier) incorniciano gli abiti; testo avorio composto come un'etichetta sartoriale. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* colore: un solo mondo, la notte grafite dell'atelier */
  --notte: #121315;          /* colore di base */
  --notte-2: #1b1c1f;        /* superfici rialzate */
  --notte-3: #25262a;        /* superfici incassate, campi */
  --filo: #3a3b3f;           /* filetti */
  --filo-forte: #8a7c70;     /* bordi dei controlli */
  --avorio: #f3ece2;         /* testo */
  --avorio-tenue: #b8ac9e;   /* testo secondario */
  --bronzo: #c9a985;         /* fregio, eyebrow */
  --oro-rosa: #d4a283;       /* dettagli preziosi */
  --giglio: #e3a3b8;         /* link, focus */
  --fiore-peonia: #d9a3a8; --fiore-giglio: #a5466b; --fiore-ortensia: #aebaa8; --fiore-petunia: #a9a7c9;
  --carta: #e9e7e3;          /* fondo neutro dietro le foto da studio */

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --wrap: 1180px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--notte); }
body { margin: 0; background: var(--notte); color: var(--avorio); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: var(--giglio); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--avorio); }
:focus-visible { outline: 2px solid var(--giglio); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); z-index: 50; background: var(--avorio); color: var(--notte); padding: var(--s2) var(--s4); }

/* tipografia */
.eyebrow { font: 500 12px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bronzo); }
.display { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.04; font-weight: 300; }
.h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; }
.h3 { font-size: 26px; line-height: 1.15; font-weight: 500; }
.lead { font: italic 400 clamp(20px, 2.2vw, 24px)/1.45 var(--serif); color: var(--avorio); max-width: 34em; }
.body { max-width: 62ch; color: var(--avorio); }
.body p + p { margin-top: var(--s4); }
.muted { color: var(--avorio-tenue); }
.small { font-size: 14px; line-height: 22px; color: var(--avorio-tenue); }
.script { font-family: var(--script); font-weight: 400; color: var(--avorio); }
.num { font-variant-numeric: tabular-nums; }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--notte); }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--notte) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--filo); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 76px; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a { font: 500 13px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--avorio); text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--bronzo); color: var(--avorio); }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; font: 500 13px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: var(--s3) var(--s4); border: 1px solid var(--filo-forte); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--avorio); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--notte-2); border-bottom: 1px solid var(--filo); padding: var(--s4) var(--gutter-r) var(--s5) var(--gutter-l); display: grid; gap: var(--s1); }
.menu-panel a { font: 400 26px/1.3 var(--serif); color: var(--avorio); text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid var(--filo); }
.menu-panel .btn { margin-top: var(--s4); }
@media (max-width: 980px) { .nav { display: none; } .menu { display: block; } .site-head .wrap { position: relative; } }

/* bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s5); font: 500 13px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn-primario { background: var(--avorio); color: var(--notte); }
.btn-primario:hover { background: var(--giglio); color: #1c1015; }
.btn-secondario { background: transparent; color: var(--avorio); border-color: var(--filo-forte); }
.btn-secondario:hover { border-color: var(--avorio); color: var(--avorio); }
.btn-sm { min-height: 40px; padding: var(--s2) var(--s4); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link-freccia { font: 500 13px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--avorio); text-decoration: none; border-bottom: 1px solid var(--bronzo); padding-bottom: 4px; }
.link-freccia:hover { color: var(--giglio); border-color: var(--giglio); }

/* ornamento */
.ornamento { display: flex; align-items: center; gap: var(--s3); color: var(--bronzo); max-width: 360px; }
.ornamento span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronzo)); }
.ornamento span:last-child { background: linear-gradient(90deg, var(--bronzo), transparent); }
.ornamento svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ornamento.centro { margin-inline: auto; }

/* sezioni */
.sezione { padding-block: clamp(64px, 9vw, 112px); }
.sezione + .sezione { border-top: 1px solid var(--filo); }
.sezione-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); max-width: 760px; }
.fascia { background: var(--notte-2); }

/* hero */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 104px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero-testo { display: grid; gap: var(--s5); min-width: 0; }
.hero-logo { width: min(340px, 80%); height: auto; margin-bottom: var(--s2); }
.fatti { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-top: var(--s4); border-top: 1px solid var(--filo); }
.fatti li { list-style: none; font-size: 14px; color: var(--avorio-tenue); }
.fatti b { color: var(--avorio); font-weight: 500; }
.fatti { margin: 0; padding-left: 0; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-arco { max-width: 440px; justify-self: center; width: 100%; } }

/* arco: la finestra/specchio */
.arco { position: relative; aspect-ratio: 2 / 3; max-width: 100%; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--carta); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.arco::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201,169,133,.55); border-radius: 999px 999px 0 0; pointer-events: none; }
.hero-arco { position: relative; }
.fiore { position: absolute; border-radius: 50%; pointer-events: none; }
.f-peonia { width: 128px; height: 128px; background: var(--fiore-peonia); left: -48px; bottom: 56px; }
.f-ortensia { width: 80px; height: 80px; background: var(--fiore-ortensia); right: -24px; bottom: -20px; }
.f-petunia { width: 30px; height: 30px; background: var(--fiore-petunia); right: 18px; top: 22%; }
.giglio-stella { position: absolute; width: 96px; height: 96px; right: -30px; top: 6%; fill: var(--fiore-giglio); pointer-events: none; }
@media (max-width: 520px) { .f-peonia { width: 88px; height: 88px; left: -24px; } .giglio-stella { width: 72px; height: 72px; right: -12px; } }

/* due colonne */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split > * { min-width: 0; }
.split .testo { display: grid; gap: var(--s5); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.foto { background: var(--carta); aspect-ratio: 2 / 3; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.coppia .foto:nth-child(2) { margin-top: var(--s8); }

/* percorsi */
.galleria.anteprima { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .galleria.anteprima { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); } }
.percorsi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
.percorso { display: grid; align-content: start; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--notte-2); border: 1px solid var(--filo); text-decoration: none; color: var(--avorio); transition: border-color .25s; }
.percorso:hover { border-color: var(--bronzo); color: var(--avorio); }
.percorso .meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 14px; color: var(--bronzo); }
.percorso p { color: var(--avorio-tenue); font-size: 16px; }
.percorso .link-freccia { justify-self: start; margin-top: var(--s2); }

/* galleria */
.filtri { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.filtri button { font: 500 13px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--avorio); background: transparent; border: 1px solid var(--filo-forte); border-radius: 999px; padding: var(--s2) var(--s4); min-height: 40px; cursor: pointer; }
.filtri button[aria-pressed="true"] { background: var(--avorio); color: var(--notte); border-color: var(--avorio); }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s6) var(--s5); }
.capo { display: grid; gap: var(--s3); margin: 0; }
.capo button { all: unset; cursor: zoom-in; display: block; }
.capo button:focus-visible { outline: 2px solid var(--giglio); outline-offset: 4px; }
.capo .foto img { transition: transform .6s var(--ease); }
.capo button:hover .foto img { transform: scale(1.03); }
.capo figcaption { display: grid; gap: 2px; text-align: center; }
.capo .linea { font: 500 11px/16px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronzo); }
.capo .nome { font: 500 20px/1.2 var(--serif); }
.capo[hidden] { display: none; }

/* lightbox */
dialog.luce { width: min(1100px, 100vw); max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; background: var(--notte); color: var(--avorio); }
dialog.luce::backdrop { background: rgba(10,10,12,.86); }
.luce-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.luce-img { background: var(--carta); display: grid; place-items: center; max-height: 92dvh; }
.luce-img img { max-height: 92dvh; width: auto; object-fit: contain; }
.luce-info { padding: var(--s6) var(--s5); display: grid; align-content: start; gap: var(--s4); }
.luce-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.luce-thumbs button { all: unset; cursor: pointer; width: 64px; aspect-ratio: 2/3; background: var(--carta); outline: 1px solid var(--filo); }
.luce-thumbs button[aria-current="true"] { outline: 2px solid var(--bronzo); }
.luce-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.luce-chiudi { position: absolute; top: calc(var(--s3) + env(safe-area-inset-top, 0px)); right: calc(var(--s3) + env(safe-area-inset-right, 0px)); }
@media (max-width: 760px) { .luce-grid { grid-template-columns: minmax(0, 1fr); } .luce-img img { max-height: 62dvh; } .luce-info { padding: var(--s5) var(--gutter-r) var(--s6) var(--gutter-l); } }

/* passi */
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: passo; }
.passi li { counter-increment: passo; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--filo); }
.passi li:last-child { border-bottom: 1px solid var(--filo); }
.passi li::before { content: counter(passo, upper-roman); font: 400 28px/1 var(--serif); color: var(--bronzo); padding-top: 2px; }
.passi h3 { font-size: 24px; font-weight: 500; margin-bottom: var(--s2); }
.passi p { color: var(--avorio-tenue); max-width: 60ch; }

/* citazione */
.citazione { text-align: center; display: grid; gap: var(--s5); justify-items: center; }
.citazione blockquote { margin: 0; font: italic 400 clamp(26px, 3.4vw, 40px)/1.3 var(--serif); max-width: 22em; text-wrap: balance; }
.citazione .firma { font-family: var(--script); font-size: 40px; color: var(--avorio); line-height: 1; }

/* dati / tabella prezzi */
.voci { display: grid; gap: 0; max-width: 720px; }
.voce { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--filo); }
.voce:first-child { border-top: 1px solid var(--filo); }
.voce span:last-child { color: var(--bronzo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.voce span:first-child { min-width: 0; }

/* video */
.video-wrap { position: relative; aspect-ratio: 9 / 16; max-height: 78vh; margin-inline: auto; background: #000; overflow: hidden; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }

/* recensioni */
.voto { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.voto .cifra { font: 300 72px/1 var(--serif); }
.stelle { color: var(--oro-rosa); letter-spacing: .2em; font-size: 18px; }
.lodi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.split .lodi { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.lodi div { border-top: 1px solid var(--bronzo); padding-top: var(--s3); display: grid; gap: var(--s2); }
.lodi b { font: 500 22px/1.2 var(--serif); }
.lodi p { color: var(--avorio-tenue); font-size: 15px; }

/* contatti */
.contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s6); }
.contatti div { display: grid; gap: var(--s2); align-content: start; }
.contatti .eyebrow { margin-bottom: var(--s1); }
.contatti p:not(.eyebrow), .contatti a { font-size: 16px; }
.orari { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); font-size: 16px; }
.orari dt { color: var(--avorio-tenue); }
.orari dd { margin: 0; font-variant-numeric: tabular-nums; }

/* form */
.modulo { display: grid; gap: var(--s5); max-width: 640px; }
.campo { display: grid; gap: var(--s2); }
.campo label, .campo legend { font: 500 13px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--avorio); }
.campo input, .campo select, .campo textarea { font: 400 17px/24px var(--sans); color: var(--avorio); background: var(--notte-3); border: 1px solid var(--filo-forte); border-radius: 2px; padding: var(--s3) var(--s4); width: 100%; min-width: 0; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--giglio); outline-offset: 1px; border-color: var(--giglio); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo .aiuto { font-size: 14px; color: var(--avorio-tenue); }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.scelte label { font: 400 15px/20px var(--sans); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border: 1px solid var(--filo-forte); border-radius: 999px; cursor: pointer; }
.scelte input { accent-color: var(--giglio); width: auto; }
.scelte label:has(input:checked) { border-color: var(--avorio); background: var(--notte-3); }
.avviso { border-left: 2px solid var(--bronzo); padding: var(--s3) var(--s4); background: var(--notte-2); font-size: 15px; color: var(--avorio); }
.dato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.dato code { font: 500 16px/1 var(--sans); color: var(--avorio); user-select: all; }

/* footer */
.site-foot { border-top: 1px solid var(--filo); padding-block: var(--s8) calc(var(--s8) + env(safe-area-inset-bottom, 0px)); background: var(--notte); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.foot-grid > * { min-width: 0; display: grid; gap: var(--s2); align-content: start; }
.foot-grid a { color: var(--avorio); text-decoration: none; font-size: 15px; }
.foot-grid a:hover { color: var(--giglio); }
.foot-grid p:not(.eyebrow) { font-size: 15px; color: var(--avorio-tenue); }
.foot-logo { width: 180px; height: auto; }
.foot-legale { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--filo); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: 13px; color: var(--avorio-tenue); }
.foot-legale a { color: var(--avorio-tenue); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* barra WhatsApp su telefono */
.barra-wa { display: none; }
@media (max-width: 760px) {
  .barra-wa { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: var(--s2); padding: var(--s3) var(--gutter-r) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: var(--notte-2); border-top: 1px solid var(--filo); }
  .barra-wa .btn { flex: 1; min-width: 0; }
  body { padding-bottom: 76px; }
}

/* pagina interna: intestazione */
.intro { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--filo); }
.intro .wrap { display: grid; gap: var(--s5); }
.briciole { font-size: 13px; color: var(--avorio-tenue); }
.briciole a { color: var(--avorio-tenue); text-decoration: none; }
.briciole a:hover { color: var(--avorio); }

/* entrata morbida, dal visibile */
@media (prefers-reduced-motion: no-preference) {
  .hero-testo > * { animation: sale .8s var(--ease) both; }
  .hero-testo > *:nth-child(2) { animation-delay: .08s; } .hero-testo > *:nth-child(3) { animation-delay: .16s; } .hero-testo > *:nth-child(4) { animation-delay: .24s; } .hero-testo > *:nth-child(5) { animation-delay: .32s; }
  .hero-arco .arco img { animation: respiro 1.6s var(--ease) both; }
}
@keyframes sale { from { transform: translateY(10px); } to { transform: none; } }
@keyframes respiro { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }