/* Font Jost (SIL OFL) ospitato localmente */
@font-face{ font-family:'Jost'; font-weight:300; font-style:normal; font-display:swap; src:url(fonts/Jost-Light.ttf) format('truetype'); }
@font-face{ font-family:'Jost'; font-weight:400; font-style:normal; font-display:swap; src:url(fonts/Jost-Regular.ttf) format('truetype'); }
@font-face{ font-family:'Jost'; font-weight:500; font-style:normal; font-display:swap; src:url(fonts/Jost-Medium.ttf) format('truetype'); }
@font-face{ font-family:'Jost'; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/Jost-Bold.ttf) format('truetype'); }
/* ============================================================
   Filippo Teani — stile minimale scuro
   Ispirato a marcofox.it: antracite con texture diagonale,
   wordmark light + bold, tipografia geometrica, nessun colore
   d'accento, molto spazio vuoto.
   ============================================================ */

:root{
  --bg:        #111111;
  --bg-soft:   #171717;
  --line:      rgba(255,255,255,0.13);
  --line-soft: rgba(255,255,255,0.07);
  --text:      #f4f4f4;
  --muted:     #a3a3a3;
  --faint:     #6e6e6e;
  --font:      'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;
  --gutter:    clamp(24px, 6vw, 80px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background-color:var(--bg);
  /* texture diagonale sottile + alone di luce al centro, come la pagina di riferimento */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse 80% 60% at 50% 35%, #232323 0%, #111111 72%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
b, strong{ font-weight:500; }

:focus-visible{ outline:1px solid var(--text); outline-offset:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gutter); }

/* ---------- Header / navigazione ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(17,17,17,0.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--gutter);
  max-width:1400px; margin:0 auto;
}
.nav-brand{
  font-size:15px; letter-spacing:0.08em; text-transform:uppercase; font-weight:300;
  transition:opacity .35s ease;
}
.nav-brand b{ font-weight:700; }
header.at-top .nav-brand{ opacity:0; pointer-events:none; }

.nav-links{ display:flex; gap:38px; }
.nav-links a{
  font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--muted); transition:color .25s ease;
  padding:6px 0; border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--text); border-bottom-color:var(--line); }

.nav-toggle{
  display:none; position:relative; z-index:130;
  width:44px; height:44px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:1px; background:var(--text);
  transition:transform .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){ top:17px; }
.nav-toggle span:nth-child(2){ top:26px; }
.nav-toggle.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ top:21px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px var(--gutter) 150px;
  text-align:center;
}
.wordmark{
  font-family:var(--font);
  font-size:clamp(40px, 9.5vw, 112px);
  font-weight:300;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:1;
}
.wordmark b{ font-weight:700; }

.roles{
  margin-top:34px;
  font-size:clamp(11px, 1.5vw, 14px);
  letter-spacing:0.36em; text-transform:uppercase;
  color:var(--muted);
}
.roles i{ font-style:normal; margin:0 0.7em; color:var(--faint); }

.intro{
  margin:46px auto 0; max-width:46ch;
  font-size:clamp(16px, 1.6vw, 19px);
  color:var(--muted);
}

.hero-foot{
  position:absolute; left:0; right:0; bottom:38px;
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.scroll-line{
  width:1px; height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
}

/* ---------- Social ---------- */
.social{ display:flex; gap:26px; align-items:center; justify-content:center; }
.social a{ display:block; opacity:0.78; transition:opacity .25s ease, transform .25s ease; }
.social a:hover{ opacity:1; transform:translateY(-2px); }
.social svg{
  width:22px; height:22px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Sezioni ---------- */
section{ position:relative; }
.block{ padding:clamp(90px, 14vw, 170px) 0; border-top:1px solid var(--line-soft); }

.section-head{ display:flex; align-items:center; gap:22px; margin-bottom:clamp(44px, 7vw, 84px); }
.section-head h2{
  font-size:12px; font-weight:400; letter-spacing:0.38em; text-transform:uppercase; color:var(--muted);
}
.section-head::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

/* ---------- Bio ---------- */
.bio-grid{ display:grid; grid-template-columns:1.35fr 0.65fr; gap:clamp(48px, 8vw, 120px); align-items:start; }
.bio-grid p{ font-size:clamp(18px, 2vw, 23px); line-height:1.65; color:var(--muted); margin-bottom:28px; max-width:36em; }
.bio-grid p strong{ color:var(--text); font-weight:500; }

.stats{ display:flex; flex-direction:column; gap:44px; }
.stat .val{ font-size:clamp(54px, 7vw, 88px); font-weight:300; line-height:1; letter-spacing:-0.01em; }
.stat .lbl{ margin-top:12px; font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--faint); }

/* ---------- Competenze ---------- */
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px, 8vw, 120px); }
.skill-col .eyebrow{ font-size:12px; letter-spacing:0.34em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.skill-col h3{ font-size:clamp(24px, 3vw, 34px); font-weight:300; line-height:1.2; margin-bottom:34px; }
.skill-list li{
  display:flex; flex-direction:column; gap:3px;
  padding:18px 0; border-top:1px solid var(--line-soft);
  transition:padding-left .25s ease;
}
.skill-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.skill-list li:hover{ padding-left:8px; }
.skill-name{ font-size:clamp(18px, 1.9vw, 21px); font-weight:400; color:var(--text); line-height:1.35; }
.skill-detail{ font-size:15px; color:var(--muted); }

/* ---------- Portfolio ---------- */
.works{ border-top:1px solid var(--line); }
.work{
  display:grid; grid-template-columns:130px 1fr 220px; gap:24px 36px; align-items:baseline;
  padding:30px 0; border-bottom:1px solid var(--line-soft);
  transition:background .3s ease;
}
.work:hover{ background:rgba(255,255,255,0.02); }
.work-year{ font-size:15px; letter-spacing:0.14em; color:var(--faint); font-variant-numeric:tabular-nums; }
.work-main h3{ font-size:clamp(20px, 2.4vw, 28px); font-weight:400; line-height:1.25; }
.work-main p{ margin-top:8px; font-size:16px; color:var(--muted); max-width:52ch; }
.work-meta{ text-align:right; }
.work-client{ font-size:15px; letter-spacing:0.04em; }
.work-client a{ border-bottom:1px solid var(--line); transition:border-color .25s ease; }
.work-client a:hover{ border-bottom-color:var(--text); }
.work-tag{ display:block; margin-top:6px; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--faint); }

/* ---------- Contatti ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(48px, 8vw, 120px); align-items:end; }
.contact-grid h2{ font-size:clamp(34px, 5.4vw, 70px); font-weight:300; line-height:1.08; letter-spacing:-0.01em; margin-bottom:30px; }
.contact-grid .lead{ font-size:18px; color:var(--muted); max-width:40ch; }
.contact-list{ border-top:1px solid var(--line); }
.contact-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--line-soft);
}
.contact-row .lbl{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--faint); }
.contact-row .val{ font-size:19px; text-align:right; transition:opacity .25s ease; }
.contact-row a.val:hover{ opacity:0.6; }

/* ---------- Footer ---------- */
footer{
  padding:70px var(--gutter) 54px; text-align:center;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
footer small{ font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint); }

/* ---------- Pagina Shop ---------- */
.page-head{ padding:190px 0 clamp(50px, 8vw, 90px); }
.back-link{ font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--muted); transition:color .25s ease; }
.back-link:hover{ color:var(--text); }
.page-head h1{
  margin-top:34px; font-size:clamp(46px, 8vw, 100px); font-weight:300;
  letter-spacing:0.01em; text-transform:uppercase; line-height:1;
}
.page-head h1 b{ font-weight:700; }
.page-head p{ margin-top:28px; font-size:19px; color:var(--muted); max-width:46ch; }

.shop-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px, 4vw, 56px); padding-bottom:clamp(90px, 12vw, 150px); }
.product-thumb{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); border:1px solid var(--line-soft); overflow:hidden;
  transition:border-color .3s ease;
}
.product:hover .product-thumb{ border-color:var(--line); }
.product-thumb svg{ width:34%; height:34%; fill:none; stroke:rgba(255,255,255,0.5); stroke-width:0.9; stroke-linejoin:round; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-body{ padding-top:22px; }
.product-body h3{ font-size:22px; font-weight:400; line-height:1.25; }
.product-body p{ margin-top:8px; font-size:16px; color:var(--muted); }
.product-foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; }
.product-price{ font-size:19px; }
.product-cta{
  font-size:12px; letter-spacing:0.26em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .25s ease;
}
.product-cta:hover{ border-bottom-color:var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; z-index:120;
    flex-direction:column; align-items:center; justify-content:center; gap:30px;
    background:#111111;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:18px; letter-spacing:0.3em; }

  .bio-grid, .skills-grid, .contact-grid{ grid-template-columns:1fr; }
  .stats{ flex-direction:row; gap:56px; }
  .work{ grid-template-columns:1fr; gap:6px; padding:26px 0; }
  .work-meta{ text-align:left; margin-top:10px; }
  .work-tag{ display:inline; margin:0 0 0 14px; }
  .shop-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .roles{ letter-spacing:0.26em; line-height:2; }
  .roles i{ margin:0 0.4em; }
  .shop-grid{ grid-template-columns:1fr; }
  .contact-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .contact-row .val{ text-align:left; }
  .page-head{ padding-top:150px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

.gear-lead{ margin:calc(-1 * clamp(24px, 4vw, 48px)) 0 clamp(28px, 4vw, 44px); font-size:18px; color:var(--muted); }

/* Logo: monogramma TF */
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand::before{ content:""; width:30px; height:30px; flex:none; background:url(mark.png) center/contain no-repeat; }
.brand-text{ transition:opacity .3s ease; }
header.at-top .nav-brand{ opacity:1; pointer-events:auto; }
header.at-top .brand-text{ opacity:0; }
.hero{ position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:url(mark.png) center 46%/min(78vh, 640px, 110vw) no-repeat; opacity:.07; pointer-events:none; }
.hero > div:first-child{ position:relative; }

.footer-link{ display:inline-block; margin-top:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.footer-link:hover{ color:var(--text); }
.legal{ max-width:720px; }
.legal h2{ font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:40px 0 12px; }
.legal p{ color:var(--text); font-weight:300; line-height:1.7; margin:0 0 14px; }
.legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.legal-date{ color:var(--muted)!important; font-size:14px; margin-top:40px!important; }