/* base.css — stili condivisi dalle pagine nuove (estratti da progetto.html). */
  :root{
    /* base neutrals — carta bianca, minimale, per far cantare i colori accesi */
    --stone:#FCFBFE;
    --stone-2:#F3EFFB;
    --limestone:#FFFFFF;
    --limestone-2:#FFFFFF;
    --ash:#635C70;
    --ash-dim:#8D8695;
    --ink:#1A1822;
    --maiolica:#FFFFFF;

    /* accento primario del brand — Viola, e secondario — Fucsia */
    --amber:#8338EC;
    --amber-soft:#FF006E;
    --maiolica-line:#8338EC;
    --brand-grad: linear-gradient(90deg, #8338EC 0%, #FF006E 55%, #FB5607 100%);
    /* gradiente logo — blu, arancio, giallo, come nel riferimento fornito */
    --logo-grad: linear-gradient(90deg, #3A86FF 0%, #FB5607 60%, #FFBE0B 100%);

    /* un colore per pilastro: la palette dà significato al racconto */
    --c-storia:#8338EC;    /* Storia & Cultura — Viola */
    --c-botteghe:#FB5607;  /* Botteghe & Artigiani — Arancio */
    --c-gastro:#FFBE0B;    /* Gastronomia & Tradizioni — Giallo */
    --c-bellezza:#3A86FF;  /* Bellezza Urbana — Azzurro */
    --c-persone:#C77DFF;   /* Persone & Storie — Lilla */
    --c-eventi:#FF006E;    /* Eventi & Vita Locale — Fucsia */
    --c-curiosita:#EF476F; /* Curiosità & Segreti — Rosso leggero */
    --c-luoghi:#06D6A0;    /* Luoghi & Scorci — Verde */

    --display: 'Fraunces', serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;

    --container: 1180px;
    --edge: clamp(24px, 5vw, 64px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    margin:0;
    background:var(--stone);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img,svg{ display:block; max-width:100%; }

  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--amber);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:22px;
    height:1px;
    background:var(--amber);
    opacity:0.7;
  }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--edge);
    padding-right:var(--edge);
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:22px 0;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(252,251,254,0.86);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-bottom:1px solid rgba(131,56,236,0.16);
  }
  .nav:not(.scrolled) .brand{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
  .nav:not(.scrolled) .nav-links a{ color:rgba(255,255,255,0.82); }
  .nav:not(.scrolled) .nav-links a:hover{ color:#fff; }
  .nav:not(.scrolled) .nav-links a::after{ background:#fff; }
  .nav:not(.scrolled) .nav-social a{ border-color:rgba(255,255,255,0.5); color:#fff; }
  .nav:not(.scrolled) .nav-toggle span{ background:#fff; }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .brand{
    font-family:var(--display);
    font-weight:600;
    font-size:19px;
    letter-spacing:0.015em;
    line-height:1;
    background:var(--logo-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .nav-links{
    display:flex;
    gap:32px;
    font-size:13.5px;
    letter-spacing:0.02em;
  }
  .nav-links a{
    color:var(--ash);
    position:relative;
    padding:4px 0;
    transition:color .25s ease;
  }
  .nav-links a:hover{ color:var(--amber); }
  .nav-links a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:1px;
    background:var(--amber);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-social{ display:flex; gap:14px; }
  .nav-social a{
    width:30px; height:30px;
    border:1px solid rgba(131,56,236,0.3);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--ash);
    transition:border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .nav-social a:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
  .nav-social svg{ width:14px; height:14px; }
  .nav-toggle{
    display:none;
    width:36px; height:36px;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
  }
  .nav-toggle span{
    display:block;
    width:22px; height:1.5px;
    background:var(--ink);
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav-toggle.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:99;
    background:rgba(252,251,254,0.98);
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
  }
  .mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .mobile-menu a{
    font-family:var(--display);
    font-size:26px;
    color:var(--ink);
  }
  .mobile-menu a:hover{ color:var(--amber); }
  .mobile-menu-social{ display:flex; gap:18px; margin-top:12px; }
  .mobile-menu-social a{
    width:38px; height:38px;
    border:1px solid rgba(131,56,236,0.3);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--ash);
  }
  .mobile-menu-social svg{ width:16px; height:16px; }
  body.menu-open{ overflow:hidden; }

  @media (max-width: 860px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
  }
  @media (min-width: 861px){
    .mobile-menu{ display:none; }
  }


  .btn{
    font-family:var(--body);
    font-size:14px;
    font-weight:600;
    letter-spacing:0.01em;
    padding:14px 26px;
    border-radius:3px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--brand-grad);
    color:#fff;
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -8px rgba(255,0,110,0.45);
  }
  .btn-ghost{
    border-color:rgba(255,255,255,0.55);
    color:#fff;
  }
  .btn-ghost:hover{
    border-color:#fff;
    background:rgba(255,255,255,0.12);
    transform:translateY(-2px);
  }


  /* ---------- SECTIONS ---------- */
  section{ padding:120px 0; position:relative; scroll-margin-top:100px; }
  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head .eyebrow{ margin-bottom:18px; max-width:none; }
  h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(1.9rem, 3.4vw, 2.6rem);
    line-height:1.18;
    margin:0 0 18px;
    color:var(--ink);
  }
  .section-head p{
    color:var(--ash);
    font-size:15.5px;
    line-height:1.7;
    max-width:480px;
  }

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


  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid rgba(131,56,236,0.16);
    padding:44px 0 32px;
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:32px;
  }
  .footer-brand .footer-logo{
    font-family:var(--display);
    font-weight:600;
    font-size:16px;
    margin-bottom:8px;
    background:var(--logo-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .footer-brand p{
    margin:0;
    font-size:12.5px;
    color:var(--ash-dim);
  }
  .footer-brand strong{ color:var(--ash); font-weight:600; }
  .footer-meta{ text-align:right; }
  .footer-meta p{ margin:0 0 6px; }
  .footer-meta p:last-child{ margin-bottom:0; }
  footer .foot-mono{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.05em;
    color:var(--ash);
  }
  .footer-social{ display:flex; gap:12px; }
  .footer-social a{
    width:28px; height:28px;
    border:1px solid rgba(131,56,236,0.25);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--ash-dim);
    transition:border-color .25s ease, color .25s ease;
  }
  .footer-social a:hover{ border-color:var(--amber); color:var(--amber); }
  .footer-social svg{ width:13px; height:13px; }
  @media (max-width:640px){
    .footer-meta{ text-align:left; }
    footer .wrap{ flex-direction:column; }
  }

  :focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
  }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:95;
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--brand-grad);
    color:#fff;
    cursor:pointer;
    box-shadow:0 10px 24px -8px rgba(131,56,236,0.5);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s, box-shadow .25s ease;
  }
  .back-to-top svg{ width:19px; height:19px; }
  .back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .back-to-top:hover{
    box-shadow:0 14px 30px -8px rgba(131,56,236,0.65);
    transform:translateY(-3px);
  }
  @media (max-width:640px){
    .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
  }

  /* ---------- CURSORE PERSONALIZZATO ---------- */
  @media (hover:hover) and (pointer:fine){
    html.custom-cursor, html.custom-cursor a, html.custom-cursor button,
    html.custom-cursor input, html.custom-cursor label{ cursor:none; }
    .cursor-dot{
      position:fixed;
      top:0; left:0;
      width:7px; height:7px;
      border-radius:50%;
      background:rgba(131,56,236,0.4);
      pointer-events:none;
      z-index:9999;
      transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
      transition:width .22s ease, height .22s ease, background .25s ease, border .25s ease, opacity .2s ease;
      opacity:0;
    }
    html.custom-cursor .cursor-dot{ opacity:1; }
    html.custom-cursor.over-map .cursor-dot{ opacity:0; }
    .cursor-dot.is-hover{
      width:20px;
      height:20px;
      background:var(--logo-grad);
      -webkit-mask:radial-gradient(circle, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px));
      mask:radial-gradient(circle, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px));
    }
    .cursor-dot.is-down{ width:6px; height:6px; }
    /* la mappa mantiene i suoi cursori nativi (grab/pointer di Leaflet) */
    #cosenzaMap, #cosenzaMap *{ cursor:auto !important; }
  }

  /* la nav qui non galleggia su una foto: niente stato trasparente/bianco */
  body.subpage .nav{
    background:rgba(252,251,254,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-bottom:1px solid rgba(131,56,236,0.14);
  }
  body.subpage .nav .brand{
    background:var(--logo-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    text-decoration:none;
  }
  body.subpage .nav .nav-links a{ color:var(--ash); }
  body.subpage .nav .nav-links a:hover{ color:var(--amber); }
  body.subpage .nav .nav-links a::after{ background:var(--amber); }
  body.subpage .nav .nav-social a{ border-color:rgba(131,56,236,0.3); color:var(--ash); }
  body.subpage .nav .nav-social a:hover{ border-color:var(--amber); color:var(--amber); }
  body.subpage .nav .nav-toggle span{ background:var(--ink); }
  body.subpage .nav-links a[aria-current="page"]{ color:var(--amber); }

  .back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--ash);
    margin-bottom:22px;
  }
  .back-link:hover{ color:var(--amber); }
  .back-link svg{ width:14px; height:14px; }

  .page-header{
    padding:150px 0 84px;
    background:linear-gradient(180deg, var(--stone-2) 0%, var(--stone) 100%);
  }
  .page-header .eyebrow{ margin-bottom:18px; }
  .page-header h1{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(2rem, 4.6vw, 3.1rem);
    line-height:1.16;
    color:var(--ink);
    max-width:760px;
    margin:0 0 22px;
  }
  .page-header-lead{
    font-size:16.5px;
    line-height:1.75;
    color:var(--ash);
    max-width:600px;
  }
  .page-header-lead strong{ color:var(--ink); font-weight:600; }