/* ============================================================
   FIURIO — shared design tokens & chrome
   Palette derived from the materials: walnut, resin, brass.
   ============================================================ */
:root{
  --nero:#0b0705;        /* warm gallery black */
  --noce:#5c3417;        /* walnut heartwood */
  --resina:#0e5f83;      /* ocean resin */
  --abisso:#062837;      /* resin depth */
  --ottone:#c9a35c;      /* gold accent */
  --ottone-dim:rgba(201,163,92,.22);
  --avorio:#efe7d8;      /* ivory ink */
  --polvere:#a79c8b;     /* dust — muted text */
  --fumo:#6e6455;        /* faint text */
  --display:"Didot","Bodoni 72","Playfair Display",Georgia,serif;
  --body:"Avenir Next","Avenir",-apple-system,"Helvetica Neue",sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
}
/* the signature — wordmark, hero, and the engraving on every table */
@font-face{
  font-family:"Pinyon Script";
  src:url("vendor/fonts/pinyon-script.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--nero);color:var(--avorio);
  font:16px/1.7 var(--body);font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ottone);color:var(--nero)}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--ottone);outline-offset:3px}

/* ---------- header ---------- */
.f-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  pointer-events:none;
}
.f-header>*{pointer-events:auto}
.wordmark{
  font-family:var(--script);font-size:31px;letter-spacing:.01em;
  color:var(--avorio);text-decoration:none;line-height:1;
}
.wordmark:hover{color:var(--ottone)}
.f-nav{display:flex;gap:26px;align-items:center}
.f-nav a{
  color:var(--polvere);text-decoration:none;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:color .25s ease;
}
.f-nav a:hover{color:var(--ottone)}
.f-nav a.gold{color:var(--ottone)}

/* ---------- shared atoms ---------- */
.kicker{
  color:var(--ottone);font-size:11.5px;letter-spacing:.3em;
  text-transform:uppercase;
}
.hairline{width:56px;height:1px;background:var(--ottone);opacity:.6}
.btn{
  display:inline-block;border:1px solid var(--ottone);color:var(--ottone);
  background:transparent;text-decoration:none;cursor:pointer;
  padding:15px 38px;font-family:var(--body);
  font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.btn:hover{background:var(--ottone);color:var(--nero)}
.btn.solid{background:var(--ottone);color:var(--nero)}
.btn.solid:hover{background:#e2c184}
.f-footer{
  padding:28px;width:100%;
  color:var(--fumo);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;border-top:1px solid rgba(255,255,255,.05);
}
.f-footer a{color:var(--fumo);text-decoration:none}
.f-footer a:hover{color:var(--ottone)}

@media (max-width:700px){
  .f-nav a:not(.gold){display:none}
  .f-header{padding:16px 20px}
  .wordmark{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}