/* =====================================================================
   baroque.it — Foglio di stile (Home)
   Palette, tipografia e componenti. Variabili in :root.
   Font: Playfair Display (titoli) · Lora (corpo) · Inter (UI)
   ===================================================================== */

:root{
  /* ===== Palette ===== */
  --cerise:#ab3250;
  --cerise-deep:#8e2742;
  --ink:#2A2420;
  --ink-soft:#5C5349;
  --ivory:#FBF8F1;
  --surface:#FFFFFF;
  --gold:#B08D57;
  --gold-soft:#cdb288;
  --label:#5ea2d0;          /* azzurro etichette */
  --azzurro:#5ea2d0;        /* azzurro barra superiore */
  --footer-bg:#0a141b;
  --hairline:#E7DECB;
  --hairline-2:#efe8d8;

  /* ===== Type ===== */
  --serif-display:"Playfair Display", Georgia, serif;
  --serif-body:"Lora", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;

  /* ===== Layout ===== */
  --maxw:1200px;
  --gutter:clamp(18px,4vw,40px);
  --radius:3px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:18px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--cerise);outline-offset:2px;border-radius:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

/* ============================================================
   HEADER
============================================================ */
/* top utility bar (pagine speciali) — azzurro */
.topbar{background:var(--azzurro);}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-block:0;}
.topbar a{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.07em;
  color:#fff;padding:9px 13px;transition:background .15s,color .15s;
  position:relative;
}
.topbar a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:13px;width:1px;background:rgba(255,255,255,.35);}
.topbar a:hover{background:rgba(255,255,255,.18);color:#fff;}
.topbar a.is-yt{color:#fff;font-weight:700;letter-spacing:.1em;}

.masthead{background:var(--surface);border-bottom:1px solid var(--hairline);}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:18px;
}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;}
.brand__img{height:90px;width:auto;flex:none;}
.brand__txt{display:flex;flex-direction:column;line-height:1.1;padding-left:18px;border-left:1px solid var(--hairline);}
.brand__name{font-family:var(--serif-display);font-size:26px;font-weight:700;letter-spacing:.01em;color:var(--ink);}
.brand__tag{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:4px;}
.brand__claim{font-family:var(--serif-body);font-style:italic;font-size:14px;color:var(--ink-soft);max-width:30ch;line-height:1.4;}

.utility{display:flex;align-items:center;gap:14px;font-family:var(--sans);}
.search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--hairline);background:var(--ivory);
  padding:9px 14px;border-radius:999px;color:var(--ink-soft);
  font-size:13px;cursor:text;min-width:200px;
}
.search svg{width:15px;height:15px;color:var(--cerise);flex:none;}
.search input{border:0;background:transparent;font:inherit;color:var(--ink);width:100%;outline:none;}
.search input::placeholder{color:var(--ink-soft);}

.burger{
  display:none;align-items:center;gap:8px;
  background:var(--cerise);color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 14px;border-radius:var(--radius);
}
.burger svg{width:16px;height:16px;}

/* ============================================================
   NAV — cerise bar + mega-menu
============================================================ */
.nav{background:var(--cerise);position:sticky;top:0;z-index:45;box-shadow:0 1px 0 rgba(0,0,0,.04);}
.nav.is-stuck{box-shadow:0 14px 30px -18px rgba(42,36,32,.5);}
.nav__list{
  max-width:var(--maxw);margin:0 auto;padding-inline:calc(var(--gutter) - 14px);
  display:flex;flex-wrap:wrap;list-style:none;
}
.nav__item{position:relative;}
.nav__link{
  display:block;padding:10px 15px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;transition:background .18s,color .18s;
  border-bottom:3px solid transparent;
}
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link{
  background:var(--cerise-deep);color:#fff;
}
.nav__item.is-active > .nav__link{
  background:var(--ink);color:#fff;border-bottom-color:var(--gold);
}
.nav__link .caret{display:inline-block;margin-left:6px;font-size:9px;opacity:.7;transform:translateY(-1px);}
.nav__item--flat .caret{display:none;}

/* dropdown / mega panel */
.mega{
  position:absolute;top:100%;left:0;min-width:230px;
  background:var(--surface);border:1px solid var(--hairline);
  border-top:3px solid var(--cerise);
  box-shadow:0 22px 50px -22px rgba(42,36,32,.45);
  padding:14px 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
.nav__item:hover > .mega,
.nav__item:focus-within > .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega--wide{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:4px 28px;min-width:480px;padding:18px 0;}
.mega__group{padding:6px 22px;}
.mega__head{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cerise);padding-block:6px;border-bottom:1px solid var(--hairline-2);margin-bottom:4px;
}
.mega a{
  display:block;padding:8px 22px;font-family:var(--sans);font-size:14px;color:var(--ink);
  transition:background .15s,color .15s,padding .15s;
}
.mega__group a{padding:6px 0;font-size:13.5px;color:var(--ink-soft);}
.mega a:hover,.mega a:focus{background:var(--ivory);color:var(--cerise);}
.mega__group a:hover,.mega__group a:focus{background:transparent;padding-left:8px;}

/* ============================================================
   HERO
============================================================ */
.hero{padding-block:clamp(46px,8vw,84px);text-align:center;}
.hero__kicker{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--label);margin:0 0 22px;
}
.rule{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);margin:0 auto;max-width:520px;}
.rule::before,.rule::after{content:"";height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);flex:1;}
.rule__glyph{font-family:var(--serif-display);font-size:20px;line-height:1;}
.hero__title{
  font-family:var(--serif-display);font-weight:700;
  font-size:clamp(40px,7vw,76px);line-height:1.04;letter-spacing:-.01em;
  margin:26px auto 22px;max-width:14ch;color:var(--ink);text-wrap:balance;
}
.hero__title em{font-style:italic;color:var(--cerise);}
.hero__claim{
  font-size:clamp(18px,2.3vw,22px);line-height:1.7;color:var(--ink-soft);
  max-width:60ch;margin:0 auto 30px;text-wrap:pretty;
}
.hero__meta{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.hero__meta b{color:var(--cerise);}

/* ============================================================
   SECTION SCAFFOLD
============================================================ */
section{padding-block:clamp(40px,5vw,64px);}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;
  border-bottom:1px solid var(--hairline);padding-bottom:16px;}
.sechead__l{display:flex;flex-direction:column;gap:7px;}
.sechead__eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--label);}
.sechead__title{font-family:var(--serif-display);font-size:clamp(26px,3.6vw,38px);font-weight:600;color:var(--ink);line-height:1;}
.sechead__title .amp{color:var(--cerise);font-style:italic;}
.morelink{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cerise);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
.morelink .arr{transition:transform .2s;}
.morelink:hover .arr{transform:translateX(4px);}

/* ============================================================
   CARDS
============================================================ */
.grid{display:grid;gap:30px 28px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.card{display:flex;flex-direction:column;background:transparent;}
.card__media{position:relative;overflow:hidden;border:1px solid var(--hairline);}
.card__cat{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--cerise);padding:5px 10px;border-radius:2px;
}
.card__title{
  font-family:var(--serif-display);font-weight:600;font-size:22px;line-height:1.2;color:var(--ink);
  margin:16px 0 8px;text-wrap:pretty;transition:color .18s;
}
.card:hover .card__title{color:var(--cerise);}
.card__excerpt{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card__date{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);margin-top:auto;}
.card__media img,.card__media .ph{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__media img,.card:hover .card__media .ph{transform:scale(1.045);}

/* ===== elegant image placeholder ===== */
.ph{
  aspect-ratio:3/2;width:100%;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 50% 0%, #fff 0%, var(--ivory) 55%, #f3ecdd 100%);
  position:relative;color:var(--gold-soft);
}
.ph::before{
  content:"";position:absolute;inset:12px;border:1px solid var(--gold-soft);opacity:.5;
}
.ph__glyph{font-family:var(--serif-display);font-size:clamp(30px,5vw,46px);font-style:italic;color:var(--gold);opacity:.55;line-height:1;}
.ph--tall{aspect-ratio:auto;height:100%;}

/* ============================================================
   FEATURED (category section variant)
============================================================ */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:stretch;}
.feature__main .card__media .ph{aspect-ratio:16/10;}
.feature__main .card__title{font-size:clamp(26px,3vw,34px);}
.feature__main .card__excerpt{-webkit-line-clamp:4;font-size:16.5px;}
.feature__side{display:flex;flex-direction:column;gap:20px;}
.mini{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start;border-top:1px solid var(--hairline);padding-top:18px;}
.mini:first-child{border-top:0;padding-top:0;}
.mini .ph{aspect-ratio:1/1;}
.mini .ph::before{inset:7px;}
.mini__cat{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cerise);}
.mini__title{font-family:var(--serif-display);font-size:18px;font-weight:600;line-height:1.22;margin:6px 0 0;color:var(--ink);transition:color .18s;}
.mini:hover .mini__title{color:var(--cerise);}

/* alt section background */
.band{background:var(--surface);border-block:1px solid var(--hairline);}

/* ============================================================
   FOOTER
============================================================ */
.foot{background:var(--footer-bg);color:#e9e2d6;padding-block:56px 30px;margin-top:24px;}
.foot a{color:#cfc6b7;}
.foot a:hover{color:#fff;}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;}
.foot__brand .brand__name{color:#fff;}
.foot__brand .brand__tag{color:var(--gold-soft);}
.foot__desc{font-size:15px;line-height:1.7;color:#b7ad9e;margin:18px 0 0;max-width:42ch;}
.foot__col h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin:0 0 16px;}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-family:var(--sans);font-size:14px;}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;
  font-family:var(--sans);font-size:12.5px;color:#9c9384;letter-spacing:.04em;}
.foot__bottom .glyph{color:var(--gold-soft);}

/* ============================================================
   MOBILE
============================================================ */
.mobile-nav{display:none;}
@media (max-width:880px){
  .search{display:none;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .feature{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .foot__brand{grid-column:1 / -1;}
}
@media (max-width:760px){
  body{font-size:17px;}
  .topbar{display:none;}
  .masthead{position:sticky;top:0;z-index:60;}
  .masthead__inner{padding-block:12px;}
  .brand__txt{display:none;}
  .brand__img{height:53px;}
  .burger{display:inline-flex;}
  .nav{display:none;}
  .grid--3{grid-template-columns:repeat(2,1fr);gap:22px 14px;}
  .grid--3 .card__title{font-size:16.5px;margin:10px 0 5px;}
  .grid--3 .card__excerpt{font-size:13px;line-height:1.5;-webkit-line-clamp:2;margin:0 0 8px;}
  .grid--3 .card__cat{display:none;}
  .grid--3 .card__date{font-size:9.5px;}
  .grid--4{grid-template-columns:1fr 1fr;}
  .sechead{flex-wrap:wrap;align-items:flex-start;}

  /* mobile nav = fixed overlay */
  .mobile-nav{display:block;position:fixed;inset:0;z-index:80;background:var(--cerise);overflow-y:auto;}
  .mobile-nav[hidden]{display:none;}
  .mnav__bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
    padding:12px var(--gutter);background:var(--cerise);border-bottom:1px solid rgba(255,255,255,.2);}
  .mnav__bar img{height:48px;}
  .mnav__close{background:transparent;border:0;color:#fff;cursor:pointer;display:flex;}
  .mnav__close svg{width:26px;height:26px;}
  .mnav__item{border-top:1px solid rgba(255,255,255,.14);}
  .mnav__top{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:transparent;border:0;cursor:pointer;color:#fff;
    font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    padding:16px var(--gutter);text-align:left;}
  .mnav__top .tog{font-size:18px;line-height:1;color:var(--gold-soft);transition:transform .2s;}
  .mnav__item.open .tog{transform:rotate(45deg);}
  .mnav__sub{display:none;flex-direction:column;background:var(--cerise-deep);padding:4px 0 10px;}
  .mnav__item.open .mnav__sub{display:flex;}
  .mnav__sub a{color:rgba(255,255,255,.86);font-family:var(--sans);font-size:14px;padding:11px var(--gutter) 11px calc(var(--gutter) + 14px);}
  .mnav__sub a:hover{color:#fff;}
}
@media (max-width:430px){
  .grid--4{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr;}
  .mini{grid-template-columns:84px 1fr;}
}