/* ==========================================================================
   FE.ME.PI.RO.LI. — Landing istituzionale
   Font: Fraunces (display) / IBM Plex Sans (corpo) / IBM Plex Mono (dati)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1c1b1a;
  --stone:#6e6a63;
  --stone-light:#a8a39a;
  --paper:#f3f1eb;
  --paper-alt:#e9e4d8;
  --oxblood:#6b2430;
  --oxblood-dark:#4e1a23;
}

html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background-color:var(--paper);
  color:var(--ink);
}
.font-display{font-family:'Fraunces', serif;}
.font-mono{font-family:'IBM Plex Mono', monospace;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
  border-radius:2px;
}

/* Fluted column motif — ambient texture, used sparingly, echoes the three
   column bars beneath the FP monogram in the federation's own crest */
.column-flutes{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(28,27,26,0.05) 0px,
    rgba(28,27,26,0.05) 1px,
    transparent 1px,
    transparent 14px
  );
}
.column-flutes-light{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(243,241,235,0.10) 0px,
    rgba(243,241,235,0.10) 1px,
    transparent 1px,
    transparent 14px
  );
}

/* The plaque — signature card component, echoes the incised monogram/column
   mark of the federation's own crest. Used for every "official data" block. */
.plaque{
  position:relative;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:1px;
}
.plaque::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid var(--stone-light);
  pointer-events:none;
}
.plaque-inner{
  position:relative;
  padding:1.75rem;
}
.plaque-dark{
  background:var(--ink);
  border-color:var(--ink);
}
.plaque-dark::before{border-color:rgba(243,241,235,0.25);}
.plaque-dark .plaque-label{color:var(--stone-light);}
.plaque-dark .plaque-value{color:var(--paper);}

.plaque-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--stone);
}
.plaque-value{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  color:var(--ink);
}

/* Numbered sequence marker — tall serif numeral + short column tick,
   used only where the content is a genuine ordered sequence. */
.seq-num{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-optical-sizing:auto;
  font-size:2.75rem;
  line-height:1;
  color:var(--oxblood);
}
.seq-tick{
  display:inline-block;
  width:1px;
  height:1.9rem;
  background:var(--stone-light);
  margin:0 0.15rem;
  vertical-align:-6px;
}

/* Pills for target audiences */
.tag-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.03em;
  border:1px solid var(--ink);
  padding:0.4rem 0.85rem;
  white-space:nowrap;
}

/* Accordion chevron rotation (Alpine-driven via class toggle) */
[x-cloak]{display:none !important;}
.accordion-icon{transition:transform 0.25s ease;}
.accordion-open .accordion-icon{transform:rotate(45deg);}

/* Header shadow-on-scroll state, toggled by site.js */
#site-header.is-scrolled{
  box-shadow:0 1px 0 rgba(28,27,26,0.12);
}

/* Section eyebrow */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--oxblood);
}

/* Link underline treatment inside prose */
.ink-link{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--stone-light);
  text-underline-offset:3px;
}
.ink-link:hover{ text-decoration-color:var(--oxblood); color:var(--oxblood); }