/* ===========================================================
   Marilù Giarè — Cake Design Artist
   Static rebuild · no CMS, no database, no tracking
   Palette: porcellana / prugna / oro — atelier di sugar art
   =========================================================== */

:root{
  --porcelain:#FBF7F2;     /* fondo: zucchero a velo */
  --porcelain-2:#F3EBE2;   /* sezioni alterne */
  --ink:#2B2622;           /* testo */
  --ink-soft:#6B625B;      /* testo secondario */
  --plum:#6E3B5C;          /* accento: prugna / fresco */
  --plum-deep:#4E2842;
  --gold:#C19A53;          /* filetti / dettagli */
  --line:#E2D6C8;
  --max:1180px;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Mulish","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--plum);text-decoration:none}
a:hover{color:var(--plum-deep)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,242,.92);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 24px;max-width:var(--max);margin:0 auto}
.brand{font-family:var(--display);font-weight:600;font-size:1.55rem;
  letter-spacing:.04em;color:var(--ink);line-height:1}
.brand small{display:block;font-family:var(--body);font-weight:600;
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-top:4px}
.menu{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{display:block;padding:8px 12px;color:var(--ink-soft);
  font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;border-radius:2px}
.menu a:hover,.menu a.active{color:var(--plum)}
.menu a.active{box-shadow:inset 0 -2px 0 var(--gold)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;
  font-size:1.5rem;color:var(--ink);padding:4px 8px}

/* ---------- Hero / slider ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.slider{position:relative;height:min(74vh,620px)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  background-size:cover;background-position:center}
.slide.on{opacity:1}
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,38,34,.12),rgba(43,38,34,.55))}
.hero-caption{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 24px 7vh;text-align:center;color:#fff}
.hero-caption h1{font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;margin:0 0 .3em;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-caption p{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
  margin:0;opacity:.92}
.hero-dots{position:absolute;z-index:3;left:0;right:0;bottom:22px;
  display:flex;gap:9px;justify-content:center}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:0;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.hero-dots button.on{background:#fff}

/* ---------- Section scaffolding ---------- */
.section{padding:84px 0}
.section.alt{background:var(--porcelain-2)}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:800;margin:0 0 10px}
.title{font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.05;margin:0 0 .55em;
  color:var(--ink)}
.title .stroke{position:relative;white-space:nowrap}
.title .stroke::after{content:"";position:absolute;left:0;right:-4px;
  bottom:-.12em;height:.34em;background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'>\
<path d='M2 9 C40 2,70 12,110 7 S180 3,198 8' stroke='%23C19A53' \
stroke-width='3.5' fill='none' stroke-linecap='round' opacity='.85'/></svg>") \
left bottom/100% 100% no-repeat}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:60ch}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:54px;align-items:start}
.prose p{margin:0 0 1.05em}
.prose p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:3.4rem;line-height:.8;
  padding:.06em .12em 0 0;color:var(--plum)}
.awards{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:26px 28px}
.awards h3{font-family:var(--display);font-size:1.5rem;margin:.1em 0 .5em;
  color:var(--plum)}
.awards ul{list-style:none;margin:0;padding:0}
.awards li{padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--line);
  font-size:.96rem}
.awards li:last-child{border-bottom:0}
.awards li::before{content:"✦";position:absolute;left:0;color:var(--gold)}

/* ---------- Gallery ---------- */
.intro{max-width:62ch;margin-bottom:42px}
.gallery{columns:4 230px;column-gap:14px}
.gallery figure{margin:0 0 14px;break-inside:avoid;position:relative;
  border-radius:4px;overflow:hidden;background:var(--porcelain-2);cursor:zoom-in}
.gallery img{width:100%;transition:transform .6s ease,filter .6s ease;
  background:var(--porcelain-2)}
.gallery figure:hover img{transform:scale(1.05);filter:brightness(1.04)}
.gallery figure::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(110,59,92,.0);transition:box-shadow .3s}
.gallery figure:hover::after{box-shadow:inset 0 0 0 2px var(--gold)}

.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:5px;padding:18px 22px;color:var(--ink-soft);font-size:.95rem;
  margin-top:34px}

/* ---------- Courses cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:var(--porcelain-2) center/cover}
.card .body{padding:20px 22px}
.card h3{font-family:var(--display);font-size:1.5rem;margin:0 0 .35em;color:var(--plum)}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(30,24,28,.93);
  display:none;align-items:center;justify-content:center;padding:30px}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:86vh;border-radius:3px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:2.4rem;line-height:1;opacity:.8}
.lb button:hover{opacity:1}
.lb .x{top:18px;right:26px}
.lb .prev{left:18px;top:50%;transform:translateY(-50%)}
.lb .next{right:18px;top:50%;transform:translateY(-50%)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#cfc6bd;padding:54px 0 30px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-brand{font-family:var(--display);font-size:1.7rem;color:#fff}
.foot-brand small{display:block;font-family:var(--body);font-size:.6rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot-links a{color:#cfc6bd;font-size:.85rem;letter-spacing:.06em}
.foot-links a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;
  padding-top:18px;font-size:.78rem;color:#8d8379;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- Static content page (cookie) ---------- */
.doc{max-width:78ch}
.doc h2{font-family:var(--display);color:var(--plum);font-size:1.7rem;margin:1.4em 0 .4em}
.doc h3{font-size:1.05rem;margin:1.3em 0 .3em;color:var(--ink)}
.doc p{margin:0 0 1em;color:var(--ink-soft)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr 1fr}
  .gallery{columns:3 180px}
}
@media(max-width:680px){
  .nav-toggle{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--porcelain);border-bottom:1px solid var(--line);
    padding:8px 16px 16px}
  .menu.open{display:flex}
  .cards{grid-template-columns:1fr}
  .gallery{columns:2 140px}
  .section{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}