/* =========================================================
   TOAN FOSCHI — stile comune del portfolio
   Chiaro come la foto della vetta. Titoli in Fraunces corsivo
   sottilissimo (come la demo Felce), testo in Manrope.
   ========================================================= */
:root{
  --bg:#f2f1ed;--ink:#17191c;--muted:#6d6f72;--line:rgba(23,25,28,.14);--paper:#fbfaf7;
  --serif:"Fraunces",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* menu: due voci, monogramma, due voci (come la riga di Felce) */
.menu{position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,40px);padding:calc(18px + env(safe-area-inset-top)) var(--pad) 18px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.menu .sx,.menu .dx{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.menu .sx{justify-content:flex-end}
.menu .sx::before,.menu .dx::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.mono{width:54px;height:54px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:italic 300 22px/1 var(--serif);letter-spacing:0;text-transform:none}
.menu a:not(.mono){position:relative;padding:4px 0}
.menu a:not(.mono)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
@media (hover:hover){.menu a:not(.mono):hover::after{transform:scaleX(1);transform-origin:left}}
.menu a[aria-current="page"]::after{transform:scaleX(1)}

@media (max-width:700px){
  /* monogramma su una riga, sotto le quattro voci in fila */
  .menu{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;font-size:10.5px;letter-spacing:.18em}
  .menu .mono{order:-1;width:46px;height:46px;font-size:19px;margin-inline:calc(50% - 23px)}
  .menu .sx,.menu .dx{gap:22px}
  .menu .sx::before,.menu .dx::after{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* menu sulle pagine interne: sfondo chiaro sfocato */
.menu.pieno{background:rgba(242,241,237,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}