/* ==========================================================================
   Castalta Cooperativa Elettrica — "Survey Sheet of the Valley"
   Design system: pale survey paper, hairline rules, legend swatches,
   ledger rows, grid-referenced sections. No cards, no pills, no gradients.
   ========================================================================== */

@import url("fonts/fonts.css");

:root{
  /* -- surface & ink -- */
  --paper:        #EDEFE6;
  --paper-raised: #F6F7F1;
  --paper-sunken: #E4E6DA;
  --ink:          #1E2119;
  --ink-soft:     #565B4C;
  --ink-faint:    #666A56;
  --line:         #D3D5C4;
  --line-strong:  #B7BA9F;

  /* -- accents (restrained: one dominant + one secondary + one reserved) -- */
  --contour:       #8C3F27;   /* dominant accent — contour ink / brand continuity */
  --contour-deep:  #6E3019;
  --moss:          #47563C;   /* secondary — links, interactive */
  --moss-deep:     #364330;
  --rescue:        #AE3323;   /* reserved — emergency contact & critical marks only */
  --ok:            #3E6247;   /* status-good */
  --ok-paper:      #E4E9DD;

  /* -- type -- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* -- type scale (documented in DESIGN.md; the mechanical detector checks
     every literal font-size against these steps, so add here first) -- */
  --text-3xs: .7rem;   /* uppercase mono micro-labels: legend/plate/table titles */
  --text-2xs: .78rem;  /* mono field refs, grid badges, small meta */
  --text-xs:  .85rem;  /* small body/data text */
  --text-sm:  .92rem;  /* nav, status, footer body, base table text */
  --text-base:.98rem;  /* section subtitles, legend values, footer heading */
  --text-md:  1.05rem; /* lead paragraph, president name */

  /* -- structure -- */
  --max: 1180px;
  --measure: 62ch;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 6px;
  --header-h: 68px;

  --shadow-sm: 0 1px 2px rgba(24,22,14,.06), 0 2px 8px rgba(24,22,14,.05);
  --shadow: 0 6px 20px rgba(24,22,14,.08), 0 1px 3px rgba(24,22,14,.06);

  --ease: cubic-bezier(.16,.8,.28,1);
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); color:var(--ink); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }

a{ color:var(--moss); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--moss-deep); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--contour);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

::selection{ background:var(--contour); color:var(--paper-raised); }

.skip-link{
  position:absolute;
  left:1rem; top:-3rem;
  background:var(--ink);
  color:var(--paper);
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  z-index:100;
  transition:top .18s var(--ease);
  font-size:var(--text-sm);
}
.skip-link:focus{ top:1rem; }

.container{
  width:min(calc(100% - 2.5rem), var(--max));
  margin:0 auto;
}

/* small, functional grid-reference label (never decorative — always
   cross-indexed against the footer sheet diagram) */
.gridref{
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  letter-spacing:.06em;
  color:var(--ink-faint);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  padding:.12em .4em;
  white-space:nowrap;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(237,239,230,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(237,239,230,.97);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  width:100%;
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--ink);
  text-decoration:none;
  flex-shrink:0;
}
.brand:hover{ color:var(--ink); }
.brand-mark{
  height:30px;
  width:auto;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-base);
  letter-spacing:-.01em;
  line-height:1.15;
}
.brand-name small{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:var(--text-3xs);
  letter-spacing:.05em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-top:.15em;
}

.nav{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.nav a{
  position:relative;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:var(--text-sm);
  font-weight:500;
  padding:.5rem .7rem;
  border-radius:var(--radius-sm);
}
.nav a::after{
  content:"";
  position:absolute;
  left:.7rem; right:.7rem; bottom:.32rem;
  height:1px;
  background:var(--contour);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-current{ color:var(--ink); }
.nav a.is-current::after{ transform:scaleX(1); }

/* -------------------------------------------------------------------------
   Hero / title block
   ------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}
.contour-field{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.contour-field svg{
  position:absolute;
  right:-6%;
  top:-8%;
  width:78%;
  height:auto;
  min-width:640px;
  opacity:.55;
}
.contour-field path{
  fill:none;
  stroke:var(--contour);
  stroke-width:1;
  opacity:.24;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
}
.contour-field path:nth-child(2){ opacity:.19; }
.contour-field path:nth-child(3){ opacity:.16; }
.contour-field path:nth-child(4){ opacity:.13; }
.contour-field path:nth-child(5){ opacity:.11; }
.is-ready .contour-field path{
  transition:stroke-dashoffset 1.8s var(--ease);
  stroke-dashoffset:0;
}
.contour-field path:nth-child(2){ transition-delay:.06s; }
.contour-field path:nth-child(3){ transition-delay:.12s; }
.contour-field path:nth-child(4){ transition-delay:.18s; }
.contour-field path:nth-child(5){ transition-delay:.24s; }

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.3fr .95fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.hero-titleblock h1{
  font-size:clamp(2.15rem,4.6vw,3.55rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.015em;
  max-width:14ch;
}
.hero-titleblock .lead{
  margin-top:1.1rem;
  font-size:var(--text-md);
  color:var(--ink-soft);
  max-width:44ch;
  line-height:1.65;
}
.hero-titleblock .meta-line{
  margin-top:1rem;
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  letter-spacing:.03em;
  color:var(--ink-faint);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.9rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.15rem;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--text-sm);
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), color .16s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--contour);
  color:var(--paper-raised);
  border-color:var(--contour);
}
.btn-primary:hover{ background:var(--contour-deep); border-color:var(--contour-deep); color:var(--paper-raised); }
.btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-secondary:hover{ background:var(--paper-raised); border-color:var(--ink-faint); color:var(--ink); }

/* -- legend aside -- */
.legend{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
}
.legend-title{
  font-family:var(--font-mono);
  font-size:var(--text-3xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-bottom:.9rem;
  margin-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.legend-item{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:.7rem;
  align-items:start;
  padding:.7rem 0;
}
.legend-item + .legend-item{ border-top:1px solid var(--line); }
.legend-swatch{
  width:11px; height:11px;
  margin-top:.3em;
  border:1.5px solid var(--moss);
  background:transparent;
  flex-shrink:0;
}
.legend-swatch.is-square{ border-radius:0; }
.legend-swatch.is-dot{ border-radius:50%; }
.legend-swatch.is-alert{
  border-color:var(--rescue);
  background:var(--rescue);
}
.legend-label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-3xs);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.25em;
}
.legend-value{
  font-weight:600;
  font-size:var(--text-base);
  line-height:1.4;
  color:var(--ink);
}
.legend-value a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong); }
.legend-value a:hover{ color:var(--contour); border-color:var(--contour); }
.legend-item.is-alert .legend-value{ color:var(--rescue); font-weight:700; }
.legend-item.is-alert .legend-value a{ color:inherit; border-color:currentColor; }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */
.section{
  padding:clamp(3.25rem,6vw,4.75rem) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.section:last-of-type{ border-bottom:none; }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.1rem;
}
.section-head h2{
  font-size:clamp(1.5rem,2.6vw,1.9rem);
  font-weight:700;
  letter-spacing:-.01em;
}
.section-sub{
  margin-top:.4rem;
  color:var(--ink-soft);
  font-size:var(--text-base);
  max-width:var(--measure);
}

.two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:start;
}

/* -- ledger rows (replaces generic cards for factual lists) -- */
.ledger{
  border-top:1px solid var(--line-strong);
}
.ledger-row{
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:1.25rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.ledger-row .ref{
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:.2em;
}
.ledger-row .val{
  font-weight:600;
  color:var(--ink);
  line-height:1.55;
}
.ledger-row .val a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.ledger-row .val a:hover{ color:var(--contour); border-color:var(--contour); }
.ledger-row .hint{
  font-weight:400;
  font-size:var(--text-xs);
  color:var(--ink-faint);
}
.ledger-row.is-alert{ background:linear-gradient(90deg, rgba(174,51,35,.06), transparent 60%); }
.ledger-row.is-alert .val .hint{ color:var(--ink-faint); font-weight:400; }
.ledger-row.is-alert .val{ color:var(--rescue); font-weight:700; }
.ledger-row.is-alert .val a{ color:inherit; border-color:currentColor; }

/* -- status indicator (PESSE) -- */
.status{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .95rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:var(--text-sm);
}
.status-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-paper);
  flex-shrink:0;
}
.status.is-inactive{ color:var(--ok); border-color:var(--ok); background:var(--ok-paper); }

.summary-list{
  list-style:none;
  margin:1.4rem 0 0;
  display:grid;
  gap:.85rem;
}
.summary-list li{
  position:relative;
  padding-left:1.15rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.summary-list li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:5px; height:5px;
  background:var(--contour);
}

.data-table{
  width:100%;
  border-collapse:collapse;
  margin-top:1.5rem;
  font-size:var(--text-sm);
}
.data-table caption{
  text-align:left;
  font-family:var(--font-mono);
  font-size:var(--text-3xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.6rem;
}
.data-table th,.data-table td{
  text-align:left;
  padding:.65rem .9rem;
  border:1px solid var(--line);
}
.data-table th{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--text-2xs);
  letter-spacing:.03em;
  color:var(--ink-faint);
  background:var(--paper-raised);
}
.data-table td{ font-weight:600; }
.data-table tr.is-you td{
  background:rgba(140,63,39,.07);
  color:var(--contour-deep);
}
.table-note{
  margin-top:.65rem;
  font-size:var(--text-2xs);
  color:var(--ink-faint);
}

/* -- plate (bordered, quarantined panel — the one place a section carries
   its own contained frame; used sparingly, for the bank/legal register) -- */
.plate{
  background:var(--paper-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:1.5rem 1.7rem;
}
.plate-title{
  font-family:var(--font-mono);
  font-size:var(--text-3xs);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.plate dl{ margin:0; }
.plate .row{ display:grid; grid-template-columns:6.5rem 1fr; gap:.75rem; padding:.4rem 0; }
.plate .row dt{ color:var(--ink-faint); font-size:var(--text-xs); }
.plate .row dd{ margin:0; font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500; color:var(--ink); word-break:break-word; }
.plate .fine{
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  color:var(--ink-soft);
  line-height:1.8;
}

.president-block p{
  line-height:1.85;
  color:var(--ink-soft);
}
.president-block .name{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-md);
  color:var(--ink);
  margin-bottom:.3rem;
}

/* -------------------------------------------------------------------------
   Footer — sheet index
   ------------------------------------------------------------------------- */
.footer{
  padding:clamp(3rem,6vw,4rem) 0 2.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3rem;
  align-items:start;
}
.footer-info{ color:var(--ink-soft); font-size:var(--text-sm); line-height:1.8; }
.footer-info strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:var(--text-base); margin-bottom:.3rem; }
.footer-info a{ color:var(--ink-soft); }
.footer-info a:hover{ color:var(--contour); }

.sheet-index{ flex-shrink:0; }
.sheet-index-label{
  font-family:var(--font-mono);
  font-size:var(--text-3xs);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.6rem;
  text-align:right;
}
.sheet-index-grid{
  display:grid;
  grid-template-columns:repeat(2,3.6rem);
  gap:2px;
}
.sheet-index-grid a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:3.6rem;
  background:var(--paper-raised);
  border:1px solid var(--line-strong);
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  text-decoration:none;
  transition:background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.sheet-index-grid a:hover{ background:var(--paper); color:var(--ink); border-color:var(--ink-faint); }
.sheet-index-grid a.is-current{
  background:var(--contour);
  border-color:var(--contour);
  color:var(--paper-raised);
  font-weight:700;
}

.footer-bottom{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  font-size:var(--text-2xs);
  color:var(--ink-faint);
  font-family:var(--font-mono);
}
.footer-bottom a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong); }
.footer-bottom a:hover{ color:var(--contour); border-color:var(--contour); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .legend{ max-width:32rem; }
}

@media (max-width:860px){
  .header-inner{ gap:.6rem; }
  .brand-name small{ display:none; }
  .nav{ gap:0; }
  .nav a{ padding:.5rem .55rem; font-size:var(--text-sm); }
}

@media (max-width:640px){
  :root{ --header-h:112px; }
  .container{ width:calc(100% - 2rem); }

  .site-header{ height:auto; padding:.85rem 0; }
  .header-inner{ flex-wrap:wrap; row-gap:.7rem; gap:.75rem; }
  .brand-name{ font-size:var(--text-sm); }
  .nav{ width:100%; gap:1.15rem; }
  .nav a{ padding:.2rem 0; font-size:var(--text-sm); }
  .nav a::after{ left:0; right:0; bottom:-.15rem; }

  .hero{ padding-top:2.5rem; }
  .ledger-row{ grid-template-columns:1fr; gap:.3rem; }
  .plate .row{ grid-template-columns:1fr; gap:.15rem; }
  .plate .row dt{ font-size:var(--text-2xs); }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .sheet-index-label{ text-align:left; }
  .sheet-index-grid{ grid-template-columns:repeat(4,1fr); }
  .data-table{ font-size:var(--text-xs); }
  .data-table th,.data-table td{ padding:.5rem .6rem; }
}

/* -------------------------------------------------------------------------
   Motion & accessibility
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .contour-field path{ transition:none !important; stroke-dashoffset:0 !important; }
  .btn,.nav a::after,.site-header,.sheet-index-grid a{ transition:none !important; }
}