/* Studio Guglielmo: stessi colori del logo (inchiostro, avorio, ottone) */
:root {
  --fondo: #f6f2ea;
  --carta: #fffdf8;
  --inchiostro: #1e2b3a;
  --testo: #26303b;
  --tenue: #5b6470;
  --linea: #ddd4c4;
  --ottone: #8a6d38;
  --ottone-chiaro: #b79a62;
  --fascia: #1e2b3a;
  --fascia-testo: #f4efe6;
  --focus: #2f6db5;
  --display: "Cormorant Garamond", "Cochin", "Hoefler Text", Georgia, serif;
  --corpo: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --misura: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #141b24; --carta: #1a232e; --inchiostro: #efe9de; --testo: #dcd6cc; --tenue: #a7aab0;
    --linea: #2f3a47; --ottone: #cdb07a; --ottone-chiaro: #cdb07a; --fascia: #0f151c; --fascia-testo: #efe9de; --focus: #8bb8ec;
  }
}
:root[data-theme="dark"] {
  --fondo: #141b24; --carta: #1a232e; --inchiostro: #efe9de; --testo: #dcd6cc; --tenue: #a7aab0;
  --linea: #2f3a47; --ottone: #cdb07a; --ottone-chiaro: #cdb07a; --fascia: #0f151c; --fascia-testo: #efe9de; --focus: #8bb8ec;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.075rem/1.65 var(--corpo); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--inchiostro); text-decoration-color: var(--ottone-chiaro); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--inchiostro); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.salta { position: absolute; left: -999px; top: .5rem; background: var(--carta); padding: .5rem 1rem; z-index: 20; }
.salta:focus { left: 1rem; }
.cornice { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

/* testata */
.testata { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.testata .cornice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.marchio { font-family: var(--display); font-size: 1.65rem; line-height: 1; color: var(--inchiostro); text-decoration: none; letter-spacing: .005em; white-space: nowrap; }
.marchio b { font-weight: 500; font-size: 1.42em; }
.marchio small { display: block; font-family: var(--corpo); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ottone); margin-top: .2rem; }
.menu { display: flex; gap: 1.4rem; align-items: center; }
.menu a { text-decoration: none; font-size: .95rem; color: var(--testo); }
.menu a[aria-current="page"], .menu a:hover { color: var(--inchiostro); box-shadow: inset 0 -1px 0 var(--ottone-chiaro); }
.menu .chiama { border: 1px solid var(--inchiostro); padding: .45rem .9rem; border-radius: 2px; color: var(--inchiostro); }
.menu .chiama:hover { background: var(--inchiostro); color: var(--fondo); box-shadow: none; }
.apri-menu { display: none; background: none; border: 1px solid var(--linea); color: var(--inchiostro); font: inherit; padding: .4rem .7rem; border-radius: 2px; }
@media (max-width: 860px) {
  .apri-menu { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--carta); border-bottom: 1px solid var(--linea); padding: .5rem 1.25rem 1rem; }
  .menu.aperto { display: flex; }
  .menu a { padding: .75rem 0; border-bottom: 1px solid var(--linea); }
  .menu .chiama { margin-top: .75rem; text-align: center; }
}

/* tipografia */
h1, h2, h3 { font-family: var(--display); color: var(--inchiostro); font-weight: 500; line-height: 1.12; text-wrap: balance; margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.25rem); margin-top: 2.2em; }
h3 { font-size: 1.4rem; margin-top: 1.6em; }
p, ul, ol { margin: 0 0 1.1em; }
.occhiello { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone); margin-bottom: 1rem; font-weight: 600; }
.lead { font-size: 1.22rem; line-height: 1.55; color: var(--testo); max-width: 58ch; }
.testo { max-width: var(--misura); }
.testo li { margin-bottom: .45em; }
.nota { font-size: .92rem; color: var(--tenue); }

/* apertura della home */
.apertura { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--linea); }
.apertura .cornice { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.apertura .azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.bottone { display: inline-block; padding: .8rem 1.3rem; border: 1px solid var(--inchiostro); background: var(--inchiostro); color: var(--fondo); text-decoration: none; border-radius: 2px; font-weight: 600; font-size: .98rem; }
.bottone:hover { background: transparent; color: var(--inchiostro); }
.bottone.vuoto { background: transparent; color: var(--inchiostro); }
.bottone.vuoto:hover { background: var(--inchiostro); color: var(--fondo); }
.scheda-studio { background: var(--carta); border: 1px solid var(--linea); padding: 1.5rem 1.6rem; font-size: .98rem; }
.scheda-studio dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; }
.scheda-studio dt { color: var(--tenue); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding-top: .2rem; }
.scheda-studio dd { margin: 0; }
@media (max-width: 860px) { .apertura .cornice { grid-template-columns: 1fr; } }

/* indice delle materie: un registro, non delle carte */
.sezione { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.sezione + .sezione { border-top: 1px solid var(--linea); }
.registro { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--inchiostro); }
.registro li { border-bottom: 1px solid var(--linea); }
.registro a { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr auto; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; text-decoration: none; color: var(--testo); }
.registro a:hover .voce { color: var(--ottone); }
.registro .voce { font-family: var(--display); font-size: 1.45rem; color: var(--inchiostro); line-height: 1.2; }
.registro .freccia { color: var(--ottone); font-size: 1.2rem; }
@media (max-width: 720px) { .registro a { grid-template-columns: 1fr auto; gap: .4rem 1rem; } .registro .descr { grid-column: 1 / -1; grid-row: 2; } }

.fatti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linea); margin-top: 2rem; }
.fatti div { padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--linea); }
.fatti div + div { padding-left: 1.4rem; border-left: 1px solid var(--linea); }
.fatti strong { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--inchiostro); font-weight: 500; margin-bottom: .3rem; }
@media (max-width: 760px) { .fatti { grid-template-columns: 1fr; } .fatti div + div { padding-left: 0; border-left: 0; } }

/* pagine interne */
.intesta { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; border-bottom: 1px solid var(--linea); }
.briciole { font-size: .85rem; color: var(--tenue); margin-bottom: 1.4rem; }
.briciole a { color: var(--tenue); }
.corpo { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: clamp(2rem, 5vw, 4.5rem); padding: 2.5rem 0 4rem; }
.corpo aside { position: sticky; top: 6rem; align-self: start; font-size: .95rem; }
.corpo aside .scatola { border-top: 1px solid var(--inchiostro); padding-top: 1rem; margin-bottom: 2rem; }
.corpo aside h2 { font-size: 1.15rem; margin: 0 0 .7rem; font-family: var(--corpo); font-weight: 600; letter-spacing: .02em; }
.corpo aside ul { list-style: none; padding: 0; }
.corpo aside li { margin-bottom: .5rem; }
@media (max-width: 900px) { .corpo { grid-template-columns: 1fr; } .corpo aside { position: static; } }

.domande { margin-top: 1rem; border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); padding: .2rem 0; }
.domande summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; color: var(--inchiostro); position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: .2rem; top: .9rem; color: var(--ottone); font-size: 1.3rem; font-weight: 400; }
.domande details[open] summary::after { content: "−"; }
.domande details > div { padding: 0 0 1rem; max-width: var(--misura); }

.avvertenza { border-left: 2px solid var(--ottone-chiaro); padding: .3rem 0 .3rem 1rem; color: var(--tenue); font-size: .95rem; max-width: var(--misura); margin: 2rem 0; }

.mappa { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--linea); background: var(--carta); }

/* piede */
.piede { background: var(--fascia); color: var(--fascia-testo); padding: 3.5rem 0 2rem; font-size: .93rem; }
.piede a { color: var(--fascia-testo); text-decoration-color: color-mix(in srgb, var(--fascia-testo) 40%, transparent); }
.piede .cornice { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.piede .marchio { color: var(--fascia-testo); }
.piede h2 { color: var(--fascia-testo); font-family: var(--corpo); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; margin: 0 0 1rem; opacity: .75; }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: .45rem; }
.piede .legale { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--fascia-testo) 18%, transparent); padding-top: 1.4rem; margin-top: 1rem; opacity: .8; font-size: .85rem; }
@media (max-width: 760px) { .piede .cornice { grid-template-columns: 1fr; } }

@media print { .testata, .piede, aside { display: none; } body { background: #fff; } }


.apertura .cornice > *, .corpo > * { min-width: 0; }
.scheda-studio dd, .piede p, .corpo aside p { overflow-wrap: anywhere; }

/* ---------- v3: apertura con la città, come i grandi studi ---------- */
.copertina { position: relative; color: #f4efe6; background: #1e2b3a; overflow: hidden; border-bottom: 3px solid #b0915a; }
.copertina::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 120px 100%, radial-gradient(ellipse at 85% 30%, #2a3a4d 0%, transparent 60%); pointer-events: none; }
.copertina .cornice { position: relative; z-index: 1; padding: clamp(5rem, 11vw, 8.5rem) 0 0; }
.copertina .sigillo { position: absolute; right: 0; top: clamp(4rem, 9vw, 7rem); width: clamp(220px, 26vw, 340px); aspect-ratio: 1; border: 1px solid rgba(205,176,122,.55); outline: 1px solid rgba(205,176,122,.25); outline-offset: 10px; display: grid; place-items: center; }
.copertina .sigillo span { font-family: var(--display); font-weight: 400; font-size: clamp(9rem, 17vw, 15rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px #cdb07a; transform: translateY(-4%); }
.copertina .occhiello { color: #cdb07a; }
.copertina h1 { color: #f7f2e8; font-size: clamp(2.7rem, 6vw, 4.9rem); max-width: 14ch; margin-bottom: .35em; }
.copertina .lead { color: #e9e2d4; max-width: 46ch; }
.copertina .azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.copertina .bottone { background: #f4efe6; color: #1e2b3a; border-color: #f4efe6; }
.copertina .bottone:hover { background: transparent; color: #f4efe6; }
.copertina .bottone.vuoto { background: transparent; color: #f4efe6; border-color: rgba(244,239,230,.7); }
.copertina .bottone.vuoto:hover { background: #f4efe6; color: #1e2b3a; }
.copertina .fascia { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid rgba(244,239,230,.3); }
.copertina .fascia div { padding: 1.1rem 1.2rem 1.8rem 0; font-size: .92rem; color: #ddd5c6; }
.copertina .fascia div + div { padding-left: 1.2rem; border-left: 1px solid rgba(244,239,230,.3); }
.copertina .fascia strong { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 500; color: #f7f2e8; margin-bottom: .15rem; }
@media (max-width: 980px) { .copertina .sigillo { display: none; } }
@media (max-width: 760px) {
  .copertina .fascia { grid-template-columns: 1fr; }
  .copertina .fascia div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,239,230,.2); }
}

/* lo studio: testo e scheda */
.studio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }

/* aree: griglia a due colonne con filetti, come le «practice areas» */
.griglia-aree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); margin-top: 2.2rem; border-top: 1px solid var(--inchiostro); }
.griglia-aree a { display: block; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--testo); }
.griglia-aree h3 { margin: 0 0 .45rem; font-size: 1.55rem; display: flex; justify-content: space-between; gap: 1rem; }
.griglia-aree h3::after { content: "→"; color: var(--ottone); font-family: var(--corpo); font-size: 1.1rem; }
.griglia-aree p { margin: 0; color: var(--tenue); font-size: .98rem; }
.griglia-aree a:hover h3 { color: var(--ottone); }
@media (max-width: 760px) { .griglia-aree { grid-template-columns: 1fr; } }

/* approfondimenti */
.approfondimenti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin-top: 2rem; }
.approfondimenti a { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 0 1.5rem; border-top: 2px solid var(--inchiostro); text-decoration: none; color: var(--testo); }
.approfondimenti .tipo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ottone); font-weight: 600; }
.approfondimenti h3 { margin: 0; font-size: 1.4rem; }
.approfondimenti p { margin: 0; font-size: .95rem; color: var(--tenue); }
.approfondimenti a:hover h3 { color: var(--ottone); }
@media (max-width: 900px) { .approfondimenti { grid-template-columns: 1fr; } }

/* profilo */
.profilo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); }
.profilo ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--inchiostro); }
.profilo li { padding: .9rem 0; border-bottom: 1px solid var(--linea); }
@media (max-width: 860px) { .profilo { grid-template-columns: 1fr; } }

/* fascia contatti */
.contatti-fascia { background: var(--carta); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.contatti-fascia .cornice { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding: clamp(2.5rem, 5vw, 3.5rem) 0; align-items: start; }
.contatti-fascia h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contatti-fascia .voce { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-bottom: .3rem; }
.contatti-fascia p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .contatti-fascia .cornice { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contatti-fascia .cornice { grid-template-columns: 1fr; } }

/* riferimenti normativi sotto il titolo delle pagine */
.riferimenti { margin-top: 1.2rem; font-size: .85rem; color: var(--tenue); }
.riferimenti b { font-weight: 600; color: var(--ottone); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; margin-right: .5rem; }

/* strumenti */
.calcolo { display: grid; gap: 1rem; border: 1px solid var(--linea); background: var(--carta); padding: 1.4rem; margin: 1rem 0 2rem; }
.calcolo label { display: grid; gap: .35rem; font-size: .85rem; color: var(--tenue); }
.calcolo select, .calcolo input { font: 1rem var(--corpo); color: var(--testo); background: var(--fondo); border: 1px solid var(--linea); padding: .65rem .7rem; border-radius: 2px; width: 100%; }
.calcolo .esito { font-family: var(--display); font-size: 1.4rem; color: var(--inchiostro); margin: 0; }
.calcolo .esito strong { color: var(--ottone); font-weight: 600; }
@media print { .copertina { display: none; } }