/* =========================================================================
   BASE.CSS
   Shared reset, layout primitives, and structural component rules used by
   every page on the site (index, licciardello, alessia).

   Each page defines its own look (colors, fonts, radii, spacing) through
   CSS custom properties in its own theme file (e.g. theme-home.css), which
   is loaded AFTER this file and overrides the tokens declared here.

   Rule of thumb when adding new shared UI:
     - Structure (layout, spacing rhythm, transitions) -> belongs here.
     - Appearance (color, font-family, radius, shadows) -> theme file, via
       custom properties consumed here.
   ========================================================================= */

:root{
  /* Fallback tokens — every theme file overrides these with its own palette. */
  --ink:#1a1a1a;
  --ink-soft:#5a5a5a;
  --bg:#ffffff;
  --bg-card:#ffffff;
  --line:rgba(0,0,0,0.12);
  --accent:#333333;
  --accent-deep:#1a1a1a;
  --focus-color:#333333;

  /* Layout tokens */
  --wrap-max:1160px;
  --section-pad:80px;
  --nav-bg: rgba(255,255,255,0.92);

  /* Component tokens (themes may override any of these) */
  --btn-radius:2px;
  --eyebrow-bg:transparent;
  --eyebrow-radius:0;

  /* Motion tokens */
  --reveal-offset:16px;
  --reveal-duration:.5s;
}

/* ---------- Reset & base elements ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; line-height:1.12; color:var(--ink); }

svg.icon{
  width:1em; height:1em;
  stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}

/* ---------- Layout primitives ---------- */
.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 32px; }

section{ padding:var(--section-pad) 0; }
.section-head{ max-width:620px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-top:12px; }
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:1.02rem; }

/* ---------- Eyebrow label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep);
  background:var(--eyebrow-bg);
  padding:var(--eyebrow-pad, 0);
  border-radius:var(--eyebrow-radius);
}
.eyebrow svg{ width:1.05em; height:1.05em; }

/* ---------- Nav scaffold ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; gap:20px; }
.brand{ font-weight:700; font-size:1.1rem; color:var(--ink); display:flex; align-items:center; gap:8px; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:24px; }
nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
nav a{ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.88rem; }
nav a:hover, nav a:focus-visible{ color:var(--accent-deep); }
.nav-cta{ background:var(--ink); color:#fff !important; padding:.6em 1.3em; border-radius:var(--btn-radius); white-space:nowrap; }
@media (max-width:840px){ .nav-links ul{ display:none; } }

/* ---------- Buttons ---------- */
.btn{
  font-weight:700; font-size:.92rem; padding:.85em 1.6em; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5em;
  border:2px solid transparent; border-radius:var(--btn-radius);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }

/* ---------- Footer ---------- */
footer{ padding:30px 0; text-align:center; color:var(--ink-soft); font-size:.82rem; }

/* ---------- Scroll-reveal animation ----------
   Paired with assets/js/reveal.js. Add class="reveal" to any element to have
   it fade/slide in once it enters the viewport. */
.reveal{
  opacity:0;
  transform:translateY(var(--reveal-offset));
  transition:opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Accessibility ---------- */
:focus-visible{ outline:3px solid var(--focus-color); outline-offset:2px; }

/* ---------- Contact links (shared shape across pages) ---------- */
.contact-links a{
  color:var(--ink); text-decoration:none; font-weight:600;
  display:flex; align-items:center; gap:8px;
}