/*
Theme Name:  Francesco Speri
Theme URI:   https://www.francescosperi.com
Author:      Francesco Speri
Description: Tema su misura per un portfolio VFX. Progetti come tipo di contenuto, software come tassonomia filtrabile, Manrope servito dal proprio dominio.
Version:     1.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: francescosperi
*/

/* Manrope variabile, servito dal tuo dominio — niente CDN esterne. */
@font-face{
  font-family:"Manrope";
  src:url("assets/fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#1B1B1B; --bg-2:#222222; --line:#3A3A3A;
  --text:#D4D4D4; --dim:#8C8C8C; --white:#FFFFFF;
  --sun:#FFB454; --ember:#E4562F;
  --font:"Manrope",system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:400;
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{color:var(--sun)}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;background:var(--sun);color:#1B1B1B;padding:10px 16px;z-index:99}

/* ---------- microtesto ---------- */
.label{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0}
.label a{text-decoration:none}
.sep{color:var(--line);padding-inline:.5em}
.on{color:var(--white)}

/* ---------- barra in alto ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:26px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .name{font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--white);text-decoration:none}
.top nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.top nav a{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none}
.top nav .current-menu-item > a,.top nav a:hover{color:var(--white)}

/* ---------- titoli ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--white);margin:0}
h1{font-size:clamp(3rem,10vw,7rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.025em}
h3{font-size:1.15rem;letter-spacing:-.015em}
.lead{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:500;line-height:1.45;
  letter-spacing:-.012em;color:var(--white);max-width:34ch;margin:0}

.pagehead{padding-block:clamp(40px,7vw,90px) clamp(20px,3vw,32px)}
.pagehead h1{margin:.14em 0 .3em}

/* ---------- filtri per software ---------- */
.filters{display:flex;gap:1.4rem;flex-wrap:wrap;border-block:1px solid var(--line);
  padding-block:16px;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.filters a{color:var(--dim);text-decoration:none}
.filters a:hover{color:var(--sun)}
.filters .on{color:var(--white)}

/* ---------- griglia progetti ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:clamp(20px,3vw,40px);padding-block:clamp(30px,5vw,56px)}
.card{display:block;text-decoration:none;color:inherit}
.card figure{margin:0 0 16px;border:1px solid var(--line);background:var(--bg-2);
  overflow:hidden;aspect-ratio:16/9}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.03)}
.card:hover h3{color:var(--sun)}
.card p{margin:.5em 0 0;font-size:.92rem;color:var(--dim);max-width:46ch}
.card .tools{margin-top:.9em;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.card img{transition:none}.card:hover img{transform:none}}

/* ---------- pagina progetto ---------- */
.crumbs{padding-block:24px 18px}
.hero{margin:0;border:1px solid var(--line);background:var(--bg-2)}
.titleblock{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;padding-block:clamp(30px,5vw,56px)}
.meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin:0}
.meta div{min-width:110px}
.meta dt{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.meta dd{margin:.45em 0 0;font-weight:600;color:var(--white);font-size:.95rem;line-height:1.4}
.meta .dd-links a{text-decoration:none;color:var(--white)}
.meta .dd-links a:hover{color:var(--sun)}

.intro{border-top:1px solid var(--line);padding-block:clamp(36px,6vw,72px)}
.content{padding-bottom:clamp(20px,4vw,40px)}
.content > *{margin-block:0 1.1em}

/* ---------- passaggi del breakdown (pattern) ---------- */
.step{border-top:1px solid var(--line);padding-block:clamp(36px,5vw,64px);margin-block:0}
.step__grid{gap:clamp(20px,3.5vw,48px);align-items:flex-start}
.step__n{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin:0 0 .9em}
.step h2{margin-bottom:.5em}
.step__points{list-style:none;margin:1.5em 0 0;padding:0;font-size:.86rem;line-height:1.95;color:var(--dim)}
.step__points li{padding-left:1.15em;position:relative}
.step__points li::before{content:"—";position:absolute;left:0;color:var(--ember)}
.frame img{border:1px solid var(--line);background:var(--bg-2);width:100%}
.frame figcaption{font-size:.74rem;color:var(--dim);padding-top:10px;text-align:left}

/* ---------- scheda tecnica ---------- */
.sheet{border-top:1px solid var(--line);padding-block:clamp(36px,5vw,64px)}
.sheet dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0 0}
.sheet div{background:var(--bg-2);padding:18px 20px}
.sheet dt{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sheet dd{margin:.5em 0 0;font-weight:600;color:var(--white)}

/* ---------- chiusura, navigazione, piè pagina ---------- */
.end{border-top:1px solid var(--line);padding-block:clamp(44px,7vw,90px)}
.end h2{max-width:14ch;margin-bottom:.5em}
.end p{max-width:48ch;margin:0}
.cta{display:inline-block;margin-top:18px;padding:14px 24px;background:var(--sun);color:#1B1B1B;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;transition:background .2s}
.cta:hover{background:var(--white);color:#1B1B1B}

.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:26px;font-size:.86rem;font-weight:600}
.pager a{text-decoration:none;color:var(--dim)}
.pager a:hover{color:var(--sun)}

.site-foot{border-top:1px solid var(--line);padding-block:26px 44px;font-size:.78rem;color:var(--dim)}
.site-foot .row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.wp-block-post-comments,.comments-area{display:none}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .titleblock{grid-template-columns:1fr;align-items:start}
  .step__grid{flex-wrap:wrap}
}

/* ---------- home ---------- */
.is-home .home-screen{
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(36px,6vh,64px) clamp(30px,5vh,56px);gap:clamp(40px,8vh,90px);
}
.home-name{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--white)}
.home-id .label{margin-top:8px}

.home-nav{display:flex;flex-direction:column}
.home-nav a{display:flex;align-items:center;gap:18px;padding:6px 0;text-decoration:none;color:var(--white)}
.home-nav .n{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--sun)}
.home-nav .w{font-size:clamp(3.2rem,9vw,5.2rem);font-weight:800;letter-spacing:-.045em;line-height:1.05}
.home-nav a:hover .w{color:var(--sun)}

.home-foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.home-foot a{font-size:14px;font-weight:600;text-decoration:none}

@media (max-width:700px){
  .is-home .home-screen{gap:clamp(30px,6vh,60px)}
}

/* ---------- piè pagina ---------- */
.site-foot .foot-links{display:flex;gap:1.6rem;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.home-foot-right{display:flex;gap:1.4rem;align-items:baseline;flex-wrap:wrap}
.home-foot-right a.label{text-decoration:none}
.home-foot-right a.label:hover{color:var(--sun)}