/* ============================================================
   Grafite theme: type roles, night sections, layout v3.
   Load LAST on every page (after card/extras/blog/project.css).
   ============================================================ */
/* Design-system roles: display / reading voice / body / mono labels. Loaded after card.css, extras.css, blog.css, project.css */
h1,h2,h3,.display,.nav__brand,.intro__name,.manifesto p,.fm-card .fm-statement,.xp__role,.footer__brand b,.post-card h3,.bf-name,.built__list b,.diag-q h3,.diag-res h3,.milo__head b,.bf-flow span,.dg-tease h4,.dg-report h4,.post-faq dt,.post-cta p{font-family:var(--display);letter-spacing:var(--display-track)}
.display,.post-hero h1{font-weight:var(--display-weight)}
h1,h2,h3{font-weight:var(--display-weight)}
.kicker,.knum,.section-num,.hero__role,.hero__rotator .rl,.tagline-row span,.fcard__n,.xp__period,.sk-area .n,.sk-area h3,.contact__list .lbl,.footer-col h5,.lang button,.pc-idx b,.pc-idx i,.pc-meta,.pc-new,.pc-read,.bf-k,.bf-flow i,.bf-flow em,.xpm-lab,.xp__when,.post-meta,.post-faq .faq-k,.post-nav .pn-lab,.post-table thead th,.diag-steps .ds-lab,.diag-res .dr-kick,.diag-gate h4,.scheda .sc-head .sc-n,.proc-step .pdot,.ti-node .ti-lab,.tools-track span,.footer__brand .role{font-family:var(--mono);letter-spacing:var(--mono-track);font-weight:500}
.hero__role{font-size:clamp(.92rem,1.4vw,1.05rem)}
.pc-idx b{font-size:1.6rem}
.pc-idx i,.bf-go,.bf-flow em,.xp__when{white-space:nowrap}
.bf-flow em{font-size:.6rem;letter-spacing:0}
.nav__links a,.nav__brand{white-space:nowrap}
.kicker > span{white-space:nowrap}

.manifesto .em,.fm-card .fm-statement .em{font-style:normal;color:var(--accent-2)}
.hero__rotator .rw{font-style:normal}
.pj-code{background:#1A1917;color:#ECE9E2}
/* C2 alternato · sezioni grafite chiaro / notte */
.nav,.intro,.hero,.tagline-row,.sketch-band,#focus,#process,#appunti,#contact,.footer,.post-footer,.post-hero,.pj-sec--tint,.ds-dark{--paper:#1A1917;--paper-2:#23221F;--paper-3:#2B2926;--ink:#F1EEE8;--ink-2:#BDB8AF;--ink-3:#8E897F;--accent:#E8E3DA;--accent-2:#B39B78;--accent-deep:#FFFFFF;--on-accent:#1A1917;--paper-hi:#22211E;--paper-shot:#22211E;--accent-tint:#3A3630;--milo-coat:#3A3630;--paper-rgb:26,25,23;--ink-rgb:241,238,232;--accent-rgb:232,227,218;--accent-deep-rgb:255,255,255;--paper-hi-rgb:34,33,30;--line:rgba(241,238,232,0.14);--line-soft:rgba(241,238,232,0.08);color:var(--ink)}
.intro,.hero,.tagline-row,.sketch-band,#appunti,.footer,.post-footer,.post-hero,.pj-sec--tint,.ds-dark{background-color:var(--paper)}
.nav:not(.scrolled){background:var(--paper)}
.sketch-band{padding-bottom:clamp(1.75rem,4vw,2.75rem)}
.tagline-row{border-bottom-color:var(--line-soft)}
.grain{opacity:.32}
.no-intro .intro{display:none}
.hero__photo .pic{filter:saturate(.9) contrast(1.02) brightness(.95)}
/* shadows stay black on dark grounds */
.hero__photo .pic{box-shadow:0 28px 56px -30px rgba(0,0,0,.7),0 6px 18px -10px rgba(0,0,0,.5)}
.hero .btn-solid,#contact .btn-solid,#appunti .btn-solid{box-shadow:0 8px 22px -12px rgba(0,0,0,.8)}
#appunti .pc-face{box-shadow:0 1px 0 rgba(255,255,255,.03),0 14px 30px -24px rgba(0,0,0,.8)}
#focus .fcard:hover{box-shadow:0 18px 40px -28px rgba(0,0,0,.8)}
#focus .fm-card{box-shadow:0 16px 36px -26px rgba(0,0,0,.8)}
@media (min-width:900px){
#appunti .pc-face{box-shadow:-16px 0 28px -20px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.03)}
#appunti .post-card:hover .pc-face{box-shadow:-16px 0 28px -20px rgba(0,0,0,.75),0 34px 50px -30px rgba(0,0,0,.85)}
}
/* signature png is dark ink: invert it on dark grounds */
.footer .sig-img,.hero .sig-img,#contact .sig-img,.ds-dark .sig-img{filter:invert(1) sepia(.15) brightness(.95);opacity:.9}

/* Layout v3: one-column about, dot bullets, meta under experiences */
@media (min-width:820px){
  .about__body .prose{display:block;max-width:62ch}
  .about__body .prose p{margin-bottom:1.15rem}
  .about__body .prose p:first-child{padding-right:0}
  .about__body .prose p + p{border-left:0;padding-left:0}
}
.about__body .signature{max-width:62ch}
.fcard li::before{width:7px;height:7px;margin-top:.55em;border-radius:50%;border:1.5px solid var(--accent);background:transparent;transition:background .3s}
.fcard:hover li::before{width:7px;background:var(--accent)}
.xp-meta{margin-top:clamp(1.6rem,3vw,2.2rem)}
.xp-meta + .built{margin-top:clamp(2.4rem,4.5vw,3.2rem)}
/* line breaking */
h1,h2,h3,.display,.h2,.h3,.fm-statement,.manifesto p,.post-card h3,.bf-name,.sketch-cap,.about__quote,.post-close,.post-cta p{text-wrap:balance}
p,li,dd,.xp__desc,.lead,.fm-sub,.bf-txt p,.built__list span,.sk-list{text-wrap:pretty}
body{overflow-wrap:break-word;hyphens:manual}
.hero__role,.xp__when,.xp__period,.tagline-row span,.btn{white-space:nowrap}
.xp__co{text-wrap:pretty}
/* calmer home: no ambient loops (draw-on-scroll stays) */
.sketch-band .orbit{animation:none}
.sketch-band .signal{display:none}
.footer__avail .pip{animation:none!important}
.tools-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:.5rem}
.tools-track .dup{display:none}
/* about: heading left, text right */
@media (min-width:900px){
  #about .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:0 clamp(2.5rem,5vw,4.5rem);align-items:start}
  #about .shead{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.6rem;margin-bottom:0}
  #about .shead__motif{display:block;width:96px;height:96px}
  .about__body .prose,.about__body .signature{max-width:none}
}
/* pg4 feature: text left, screenshot right */
.bf-shot{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-shot);box-shadow:0 18px 40px -28px rgba(var(--ink-rgb),.45)}
.bf-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:0 0}
/* blog: breathing room between dark header and body */
.post-hero{padding-bottom:clamp(2.5rem,5vw,4rem)}
.post-hero + .post-body,.post-body{padding-top:clamp(2.5rem,5vw,3.75rem)}
.post-repo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:2rem 0 0;padding:1rem 0;border-block:1px solid var(--line)}
.post-repo span{font-family:var(--mono);font-size:.7rem;letter-spacing:var(--mono-track);text-transform:uppercase;color:var(--ink-3)}
.post-repo a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}.post-repo a:hover{border-color:var(--ink)}
/* hero: role as eyebrow above the name, pitch right under the rule */
.hero__role{margin:0}
.hero__name{margin-top:.9rem}
.hero__pitch{margin-top:1.4rem}
/* about: heading + text left, sketch + signature right */
.about__body .prose p{font-size:1.06rem;line-height:1.7;color:var(--ink-2)}
.about__side{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;margin-top:1.6rem}
.about__side .about-motif{display:none}
.about__side .signature{margin:0;padding:0;justify-content:flex-start}
@media (min-width:900px){
  #about .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 clamp(3rem,7vw,6rem);align-items:end}
  #about .shead{flex-direction:row;margin-bottom:clamp(1.4rem,2.5vw,2rem)}
  .about__body .prose{max-width:60ch}
  .about__side{margin-top:0;align-items:center;gap:2.2rem;padding-bottom:.4rem}
  .about__side .about-motif{display:block;width:96px;height:96px}
  .about__side .signature{justify-content:center}
}
#about .sig-img{width:220px;max-width:100%;clip-path:inset(-10% 100% -10% -4%)}
#about .reveal.in .sig-img{animation-name:sigWriteAbout}
@keyframes sigWriteAbout{to{clip-path:inset(-10% -6% -10% -4%)}}
@media (prefers-reduced-motion:reduce){#about .sig-img{clip-path:none}}