/* cleobetra-italian.com — scavo in sezione. Luce: chiave calda bassa da sinistra in alto. */
:root{
  --suolo:#3E211B;
  --alabastro:#F2E6D3;
  --alabastro-cupo:#DCC7A8;
  --testo:#F0E2CD;
  --testo-tenue:#D8BFA4;
  --inchiostro:#2A1310;
  --rame:#D08B44;
  --rame-chiaro:#E8C069;
  --patina:#9FD3BC;
  --linea:#6B4033;
  --linea-fine:#4E2C23;
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  --cristalli:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .02 1.6 0 0 0 -1.02'/%3E%3C/filter%3E%3Cfilter id='k2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' seed='31'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .74 0 0 0 0 .58 1.5 0 0 0 -1.06'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23k)' opacity='.55'/%3E%3Crect width='190' height='190' filter='url(%23k2)' opacity='.3'/%3E%3C/svg%3E");
  --venatura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23v)' opacity='.055'/%3E%3C/svg%3E");
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L","Noto Serif",Georgia,"Times New Roman",serif;
  --sans:Optima,Candara,"Gill Sans MT","Gill Sans","Trebuchet MS","Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mis:1240px;
  --gutter:148px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#180B09;color:var(--testo);
  font-family:var(--serif);font-size:clamp(15.5px,1.06vw,17.5px);line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

.celato{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.saltafosso{position:absolute;left:-9999px;top:0;z-index:9;background:var(--alabastro);color:var(--inchiostro);
  padding:12px 20px;font-family:var(--sans);letter-spacing:.06em;text-decoration:none}
.saltafosso:focus{left:14px;top:14px}

:is(a,button,input,summary):focus-visible{outline:3px solid var(--rame-chiaro);outline-offset:3px}

/* ---------- lettering inciso ---------- */
.incisa{display:block;height:auto;fill:none;stroke:var(--rame-chiaro);stroke-width:76;stroke-linejoin:miter;
  width:min(100%,calc(var(--cap,32px) * var(--wf,8)));
  filter:drop-shadow(2px 3px 0 rgba(24,9,7,.55))}
.incisa path[stroke=none]{fill:var(--rame-chiaro)}

/* ---------- strati ---------- */
.strato{background-color:var(--suolo);position:relative;
  background-image:
    var(--cristalli),var(--grana),var(--venatura),
    radial-gradient(96% 74% at 3% -8%,rgba(244,204,128,.19),rgba(244,204,128,0) 58%),
    radial-gradient(90% 96% at 104% 112%,rgba(0,0,0,.42),rgba(0,0,0,0) 56%)}
.strato::before{content:"";position:absolute;inset:0 0 auto;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='9'%3E%3Cpath d='M0 6 L26 3 L52 7 L84 2 L112 6 L146 3 L172 7 L204 2 L232 6 L260 4' fill='none' stroke='%236B4033' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x;
  opacity:.85}
.trincea .strato:first-child::before{opacity:0}
.strato:nth-of-type(2){--suolo:#371C17}
.strato:nth-of-type(3){--suolo:#301813}
.strato:nth-of-type(4){--suolo:#2A1410}
.strato:nth-of-type(5){--suolo:#240F0D}
.strato:nth-of-type(6){--suolo:#1E0C0A}
.strato:nth-of-type(7){--suolo:#180A08}

.strato-corpo{max-width:var(--mis);margin:0 auto;display:grid;grid-template-columns:var(--gutter) minmax(0,1fr);
  gap:0 34px;padding:clamp(30px,5.2vh,62px) 26px clamp(38px,6vh,74px);
  background-image:
    linear-gradient(var(--linea),var(--linea)),
    repeating-linear-gradient(to bottom,rgba(216,168,120,.5) 0 1px,transparent 1px 46px),
    linear-gradient(to right,rgba(12,5,4,.42),rgba(12,5,4,.1));
  background-size:1px 100%,11px 100%,174px 100%;
  background-position:174px 0,163px 0,0 0;
  background-repeat:no-repeat}

.strato-quota{font-family:var(--sans);padding-right:20px;text-align:right;display:flex;flex-direction:column;gap:5px}
.strato-tacca{display:block;height:2px;background:var(--rame);margin:9px 0 8px auto;width:56px}
.strato-numero{font-size:1.42em;color:var(--rame-chiaro);letter-spacing:.1em;line-height:1}
.strato-profondita{font-size:.86em;color:var(--testo);letter-spacing:.08em}
.strato-nome{font-size:.75em;color:var(--testo-tenue);letter-spacing:.14em;text-transform:uppercase}

.strato-titolo{--cap:clamp(21px,2.5vw,33px);margin:0 0 clamp(14px,1.7vw,22px)}
h1.strato-titolo{--cap:clamp(28px,4.6vw,52px);margin:2px 0 12px}

.prosa{max-width:64ch;color:var(--testo)}
.prosa+.prosa{margin-top:.7em}
.prosa--grande{font-size:1.18em;max-width:30ch}

/* ---------- affioramento (hero) ---------- */
.affioramento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.affioramento-testo{display:flex;flex-direction:column;min-width:0}
.affioramento-lato{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);min-width:0}
.sigla{width:clamp(190px,25vw,392px);height:auto;order:1;
  filter:drop-shadow(3px 5px 7px rgba(20,8,6,.7))}
.occhio{order:2;font-family:var(--sans);font-size:.82em;letter-spacing:.11em;text-transform:uppercase;
  color:var(--patina);margin:clamp(10px,1.4vw,18px) 0 2px}
h1.strato-titolo{order:3}
.attacco{order:4;font-size:1.14em;max-width:46ch;color:var(--testo);margin-bottom:clamp(14px,1.8vw,22px)}
.sonda{order:5}

/* ---------- cifre ---------- */
.cifrario{border:1px solid var(--linea);border-top:2px solid var(--rame);
  background:linear-gradient(160deg,rgba(232,192,105,.09),rgba(0,0,0,.16));
  padding:clamp(11px,1.5vw,17px) clamp(13px,1.7vw,20px) clamp(11px,1.4vw,15px);
  box-shadow:inset 1px 1px 0 rgba(240,220,180,.13),10px 12px 26px -14px rgba(0,0,0,.85)}
.cifrario-titolo{font-family:var(--sans);font-size:.78em;letter-spacing:.15em;text-transform:uppercase;color:var(--testo-tenue)}
.cifrario-coppia{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px clamp(18px,2.6vw,40px);margin:clamp(6px,1vw,12px) 0 9px}
.cifra{--cap:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:5px;flex:0 1 auto;min-width:0}
.cifra .incisa{width:calc(var(--cap) * var(--wf));max-width:100%}
.cifra-nome{font-family:var(--sans);font-size:.8em;letter-spacing:.09em;text-transform:uppercase;color:var(--testo)}
.cifrario-fonte{font-size:.83em;color:var(--testo-tenue);max-width:52ch}
.cifrario--largo{margin-top:clamp(16px,2vw,24px)}
.cifrario--largo .cifra{--cap:clamp(30px,3.5vw,52px)}
.cifrario--fine{margin-top:clamp(14px,2vw,20px)}
.cifrario--fine .cifra{--cap:clamp(24px,2.5vw,36px)}

/* ---------- sonda (form) ---------- */
.sonda{margin-top:clamp(14px,1.8vw,22px);background:linear-gradient(155deg,var(--alabastro),var(--alabastro-cupo));
  color:var(--inchiostro);padding:clamp(14px,1.7vw,20px);border:1px solid #B79C77;
  box-shadow:inset 2px 2px 0 rgba(255,252,244,.75),16px 18px 34px -16px rgba(0,0,0,.9);
  max-width:620px}
.sonda-riga{display:flex;flex-direction:column;gap:5px}
.sonda-etichetta{font-family:var(--sans);font-size:.8em;letter-spacing:.13em;text-transform:uppercase;color:#4A2A1E}
.sonda-campo{font-family:var(--serif);font-size:1em;color:var(--inchiostro);background:#FFFAF0;
  border:1px solid #A98C67;border-top-color:#8E7050;padding:11px 13px;width:100%;
  box-shadow:inset 2px 2px 4px rgba(120,95,66,.34)}
.sonda-campo::placeholder{color:#7B6047;opacity:1}
.sonda-leva{margin-top:11px;font-family:var(--sans);font-size:.94em;letter-spacing:.11em;text-transform:uppercase;
  color:#FFF3DC;background:linear-gradient(155deg,#8A4A24,#5A2A15);border:1px solid #401D0F;
  padding:12px 22px;cursor:pointer;width:100%;
  box-shadow:inset 1px 1px 0 rgba(255,220,170,.32),6px 8px 16px -8px rgba(0,0,0,.7);
  transition:transform .16s ease}
.sonda-leva:hover{transform:translateY(-1px)}
.sonda-errore{margin-top:9px;font-size:.9em;color:#8B1E10;font-weight:700}
.sonda-nota{margin-top:9px;font-size:.83em;color:#5A3A28}
.sonda-esito{margin-top:11px;border-top:2px solid #8A4A24;padding-top:10px}
.sonda-esito-titolo{font-family:var(--sans);font-size:.92em;letter-spacing:.11em;text-transform:uppercase;color:#3E2110}
.sonda-esito-testo{font-size:.94em;color:#4A2A1E;margin-top:3px}
.sonda--fondo{max-width:none}

/* ---------- giaciture (immagini) ---------- */
.giacitura{margin:0}
.giacitura-foto{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border:1px solid var(--linea);box-shadow:14px 16px 32px -16px rgba(0,0,0,.95)}
.giacitura--alta .giacitura-foto{aspect-ratio:4/3}
.giacitura-nota{margin-top:8px;font-family:var(--sans);font-size:.78em;letter-spacing:.07em;color:var(--testo-tenue)}

/* ---------- mansionario ---------- */
.mansionario{display:grid;grid-template-columns:repeat(auto-fit,minmax(332px,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(16px,2vw,26px)}
.mansione{border-left:2px solid var(--rame);padding:2px 0 2px 15px}
.mansione-nome{font-family:var(--sans);font-size:.95em;letter-spacing:.09em;text-transform:uppercase;color:var(--rame-chiaro)}
.mansione-testo{margin-top:5px;font-size:.96em;color:var(--testo)}

/* ---------- duplice ---------- */
.duplice{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(20px,2.8vw,42px);align-items:start}
.duplice--rovescio{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
.duplice--stretto{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}

/* ---------- repertorio ---------- */
.repertorio{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(12px,1.5vw,20px);margin-top:clamp(16px,2vw,26px)}
.reperto{position:relative;border:1px solid var(--linea);border-top:2px solid var(--rame);
  background:linear-gradient(158deg,rgba(232,192,105,.075),rgba(0,0,0,.2));
  padding:13px 15px 15px;box-shadow:inset 1px 1px 0 rgba(240,220,180,.1),10px 12px 24px -14px rgba(0,0,0,.85)}
.reperto-sigla{font-family:var(--sans);font-size:.8em;letter-spacing:.16em;color:#DFA669}
.reperto-nome{font-size:1.08em;color:var(--rame-chiaro);margin-top:2px}
.reperto-stato{display:inline-block;margin-top:7px;font-family:var(--sans);font-size:.72em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--patina);border:1px solid #3E6E5C;padding:3px 8px}
.reperto-stato--fermo{color:#F2C87A;border-color:#7A5327}
.reperto-nota{margin-top:9px;font-size:.93em;color:var(--testo)}

/* ---------- vaglio ---------- */
.vaglio{display:grid;gap:clamp(12px,1.5vw,18px)}
.vaglio-passo{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:14px;border-bottom:1px solid var(--linea-fine);padding-bottom:clamp(10px,1.3vw,16px)}
.vaglio-numero{grid-row:1/3;font-family:var(--sans);font-size:1.7em;line-height:1;color:var(--rame);
  border:1px solid var(--linea);width:1.9em;height:1.9em;display:grid;place-items:center}
.vaglio-nome{font-family:var(--sans);font-size:.98em;letter-spacing:.11em;text-transform:uppercase;color:var(--rame-chiaro);align-self:center}
.vaglio-testo{font-size:.95em;color:var(--testo);margin-top:4px}

/* ---------- taccuino ---------- */
.taccuino{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(16px,2vw,26px)}
.taccuino-voce{border-top:1px solid var(--linea);padding-top:11px}
.taccuino-domanda{font-family:var(--sans);font-size:.98em;letter-spacing:.05em;color:var(--rame-chiaro)}
.taccuino-risposta{margin-top:6px;font-size:.95em;color:var(--testo)}

/* ---------- fondale ---------- */
.fondale{background:#120706;background-image:var(--grana);border-top:2px solid var(--linea);color:var(--testo)}
.fondale-corpo{max-width:var(--mis);margin:0 auto;padding:clamp(28px,4vh,48px) 26px clamp(30px,4vh,52px);display:grid;gap:12px}
.fondale-alto{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fondale-sigla{width:186px;height:auto}
.fondale-eta{font-family:var(--sans);font-size:.86em;letter-spacing:.08em;color:#F3D9A6;border:2px solid var(--rame);border-radius:50%;width:2.9em;height:2.9em;display:grid;place-items:center}
.fondale-testo{font-size:.9em;color:var(--testo-tenue);max-width:86ch}
.fondale-aiuto{font-size:.95em;color:var(--testo)}
.fondale-aiuto strong{color:var(--rame-chiaro)}
.fondale-vie{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--sans);font-size:.86em;letter-spacing:.07em}
.fondale-vie a{color:var(--rame-chiaro);text-decoration:underline;text-underline-offset:3px}
.fondale-fine{font-size:.82em;color:#A98D74}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .duplice,.duplice--rovescio,.duplice--stretto{grid-template-columns:minmax(0,1fr)}
  .duplice--rovescio .giacitura{order:2}
  .affioramento{display:flex;flex-direction:column;gap:0}
  .affioramento-testo,.affioramento-lato{display:contents}
  .sigla{order:1}.occhio{order:2}h1.strato-titolo{order:3}
  .cifrario{order:4;margin-top:clamp(10px,2vw,16px)}
  .sonda{order:5}
  .attacco{order:6;margin:clamp(14px,3vw,20px) 0 0}
  .giacitura--alta{order:7;margin-top:clamp(18px,3vw,26px)}
}
@media (max-width:900px){
  :root{--gutter:0px}
  .strato-corpo{grid-template-columns:minmax(0,1fr);gap:12px;background-image:none;padding-left:20px;padding-right:20px}
  .strato-quota{flex-direction:row;align-items:baseline;gap:12px;text-align:left;padding:0 0 9px;
    border-bottom:1px solid var(--linea)}
  .strato-tacca{display:none}
  .strato-nome{margin-left:auto}
  .fondale-corpo{padding-left:20px;padding-right:20px}
}
@media (max-width:420px){
  .cifrario-coppia{gap:14px}
  .strato-nome{display:none}
}

/* ---------- moto ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mansione,.reperto,.vaglio-passo,.taccuino-voce{
      animation:affiora linear both;animation-timeline:view();animation-range:entry 8% entry 62%}
  }
}
@keyframes affiora{from{opacity:.15;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}