/* =========================================================
   Francesco Tessitore — Editorial Minimal
   Italian design-magazine aesthetic. Paper + ink + warm accent.
   ========================================================= */

:root{
  --paper:#f4f1ea;        /* warm off-white */
  --paper-2:#ece7dc;
  --ink:#16140f;          /* near-black */
  --ink-soft:#56524a;
  --accent:#c1452b;       /* terracotta / Napoli red */
  --line:rgba(22,20,15,.14);
  --max:1560px;
  --pad:clamp(20px,5vw,80px);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Space Grotesk",-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* hide system cursor only where the custom cursor actually runs (fine pointer + hover) */
@media (hover:hover) and (pointer:fine){ body{cursor:none} }
@media (hover:none){ .cursor,.cursor-dot{display:none} }

a{color:inherit;text-decoration:none}
/* keyboard focus — visible for everyone, never shown for mouse users */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
em{font-style:italic}
::selection{background:var(--accent);color:var(--paper)}

/* ---------- grain + cursor ---------- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor{
  position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;
  z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  transition:width .3s,height .3s,background .3s,border-color .3s,opacity .3s;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:5px;height:5px;background:var(--ink);border-radius:50%;
  z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
}
.cursor.is-link{width:60px;height:60px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cursor.is-view{width:96px;height:96px;background:var(--ink);border-color:var(--ink)}
.cursor.is-view::after{content:"VIEW";color:var(--paper);font-size:11px;letter-spacing:.15em;font-family:var(--sans)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  mix-blend-mode:multiply;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.nav.hide{transform:translateY(-110%)}
.nav__mark{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-.02em}
.nav__mark span{color:var(--accent)}
.nav__links{display:flex;gap:34px;font-size:14px}
.nav__links a{position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:13px;border:1px solid var(--ink);border-radius:40px;padding:9px 18px;transition:.35s}
.nav__cta:hover{background:var(--ink);color:var(--paper)}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px}
.nav__burger span{width:26px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav.open .nav__burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.open .nav__burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;padding:130px var(--pad) 0;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero__meta{display:flex;justify-content:space-between;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);position:relative;z-index:3}
.hero__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(64px,18vw,300px);line-height:.86;letter-spacing:-.03em;
  margin:auto 0;position:relative;z-index:2;mix-blend-mode:multiply;
}
.hero__name .line{display:block;overflow:hidden}
.hero__name .word{display:inline-block}
.hero__name em{font-size:.28em;vertical-align:super;color:var(--accent)}
.hero__name .line:last-child{padding-left:8vw}

.hero__statement{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:30px;flex-wrap:wrap}
.hero__statement p{max-width:44ch;font-size:clamp(16px,1.4vw,21px);line-height:1.45}
.hero__statement em{color:var(--accent);font-family:var(--serif)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-cue svg{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0}
.marquee__track{display:flex;gap:30px;white-space:nowrap;width:max-content;animation:scroll 30s linear infinite;font-family:var(--serif);font-size:clamp(18px,2.4vw,30px);font-style:italic}
.marquee__track span:nth-child(even){color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.section-head{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;padding:0 var(--pad);max-width:var(--max);margin:0 auto 60px}
.section-head__idx{font-size:14px;color:var(--accent);padding-top:14px}
.section-head__title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8vw,120px);line-height:.9;letter-spacing:-.03em}
.section-head__title em{color:var(--accent)}
.section-head__note{align-self:end;max-width:32ch;font-size:15px;color:var(--ink-soft);text-align:right}

/* ---------- work ---------- */
.work{padding:120px 0}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,90px);padding:0 var(--pad);max-width:var(--max);margin:0 auto}
.project{position:relative}
.project:nth-child(even){transform:translateY(48px)}
.project__media{overflow:hidden;border-radius:2px}
.project__ph{
  aspect-ratio:4/5;background:var(--paper-2);position:relative;overflow:hidden;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  background-image:linear-gradient(135deg,#e6e0d2,#d8d0bf);
}
.project__ph::after{content:"IMAGE";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.2em;color:var(--ink-soft);opacity:.4}
.project:hover .project__ph{transform:scale(1.04)}
.project__photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:2px;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.project:hover .project__photo{transform:scale(1.04)}
/* phisios — real app thumbnail (dark App Store splash) */
.project__ph--phisios{background-image:none;background:#0a0a0a;overflow:hidden;position:relative}
.project__ph.project__ph--phisios::after{display:none!important;content:none!important}
.project__ph--phisios .project__photo{aspect-ratio:4/5;object-fit:cover;object-position:center}
.project__badge{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.04em;color:#fff;background:#34a853;padding:5px 10px;border-radius:30px;z-index:2}
.project--featured .project__title::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#34a853;margin-left:10px;vertical-align:middle}
.project__ph--studio{background-image:none;background:#0a0708;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.project__ph.project__ph--studio::after{display:none!important;content:none!important}
.project__ph--studio .project__photo{aspect-ratio:4/5;object-fit:cover;object-position:center}
.studio-thumb{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.studio-thumb__glow{position:absolute;top:50%;left:50%;width:36%;height:72%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,#e0996b 0%,#9c2b1e 45%,transparent 72%);filter:blur(14px);opacity:.85;border-radius:50%}
.project:hover .studio-thumb__glow{opacity:1;transition:opacity .5s}
.studio-thumb__word{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,3.4vw,40px);color:#efe8db;letter-spacing:-.01em;text-align:center;line-height:1;padding:0 12px}
.project__ph--golfo{background-image:none;background:#163a4d;display:flex;align-items:center;justify-content:center}
.project__ph--golfo::after{display:none}
.golfo-thumb{width:62%;height:auto;color:#f4f1ea}
.project__ph--sfusato{background-image:none;background:#f3ecd9;display:flex;align-items:center;justify-content:center}
.project__ph--sfusato::after{display:none}
.sfusato-thumb{color:#2f5233;width:50%}
.sfusato-thumb svg{width:100%;height:auto}
.project__info{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.project__num{font-size:13px;color:var(--accent)}
.project__title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em}
.project__tag{font-size:13px;color:var(--ink-soft);margin-left:auto}
.project__year{font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.project__premise{margin-top:10px;max-width:46ch;font-size:14px;line-height:1.5;color:var(--ink-soft);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.project:hover .project__premise{opacity:1;transform:translateY(0)}
@media (hover:none){.project__premise{opacity:1;transform:none}}
.work__more{display:block;text-align:center;margin-top:90px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px)}
.work__more:hover{color:var(--accent)}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(120px,18vh,220px) var(--pad);text-align:center}
.manifesto__line{font-family:var(--serif);font-weight:300;font-size:clamp(40px,9vw,140px);line-height:1;letter-spacing:-.03em;display:flex;flex-wrap:wrap;gap:.25em;justify-content:center}
.manifesto__line em{color:var(--accent)}

/* ---------- about ---------- */
.about{padding:60px 0 120px}
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);padding:0 var(--pad);max-width:var(--max);margin:0 auto;align-items:start}
.about__ph{aspect-ratio:3/4;background:linear-gradient(135deg,#e6e0d2,#d8d0bf);border-radius:2px;position:relative}
.about__ph::after{content:"PORTRAIT";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.2em;color:var(--ink-soft);opacity:.4}
.about__portrait{position:sticky;top:120px}
.about__img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block;filter:saturate(.92) contrast(1.02)}
.about__caption{display:block;margin-top:12px;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}
.about__lead{font-family:var(--serif);font-size:clamp(24px,3vw,38px);line-height:1.18;letter-spacing:-.01em;margin-bottom:36px}
.about__lead em,.about__body em{color:var(--accent);font-family:var(--serif)}
.about__body p{font-size:clamp(15px,1.2vw,18px);max-width:54ch;margin-bottom:22px;color:#2c2a23}
.about__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.about__facts>div{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:6px}
.about__facts .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.about__facts .v{font-family:var(--serif);font-size:22px}

/* ---------- services ---------- */
.services{padding:120px 0}
.service-list{max-width:var(--max);margin:0 auto;padding:0 var(--pad);list-style:none;border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:80px 1.1fr 1.4fr 60px;gap:30px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .4s cubic-bezier(.16,1,.3,1)}
.service::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1}
.service:hover{padding-left:30px;padding-right:30px;color:var(--paper)}
.service:hover::before{transform:scaleY(1)}
.service:hover .service__num,.service:hover .service__desc{color:rgba(244,241,234,.7)}
.service__num{font-size:14px;color:var(--accent);transition:color .4s}
.service__name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,56px);letter-spacing:-.02em}
.service__desc{font-size:15px;color:var(--ink-soft);max-width:42ch;transition:color .4s}
.service__arrow{font-size:30px;text-align:right;transition:transform .4s}
.service:hover .service__arrow{transform:translateX(8px)}

/* ---------- contact ---------- */
.contact{padding:120px 0 0;border-top:1px solid var(--line)}
.contact__inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.contact__pre{font-size:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:30px}
.contact__mail{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,10vw,160px);line-height:.95;letter-spacing:-.03em;margin-bottom:60px;transition:color .4s}
.contact__mail span{color:var(--accent)}
.contact__mail:hover{font-style:italic}
.contact__row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:90px}
.contact__row p{max-width:40ch;font-size:clamp(16px,1.5vw,22px)}
.contact__links{display:flex;flex-direction:column;gap:10px;font-size:18px}
.contact__links a:hover{color:var(--accent)}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:28px var(--pad);border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(120%);display:inline-block}
.hero__name .word.reveal{transform:translateY(110%)}
.reveal.in,.hero__name .word.reveal.in{opacity:1;transform:translateY(0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal[data-d="2"].in,.reveal[data-d="2"]{transition-delay:.05s}
.reveal[data-d="3"].in{transition-delay:.1s}
.reveal[data-d="4"].in{transition-delay:.22s}
.reveal[data-d="5"].in{transition-delay:.34s}
.reveal[data-d="6"].in{transition-delay:.4s}
.reveal[data-d="7"].in{transition-delay:.5s}
.reveal-up{opacity:0;transform:translateY(40px)}
.reveal-up.in{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-up{opacity:1!important;transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__links{display:flex;position:fixed;inset:0;background:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:30px;font-size:32px;font-family:var(--serif)}
  .hero__name .line:last-child{padding-left:0}
  .section-head{grid-template-columns:1fr;gap:16px}
  .section-head__note{text-align:left}
  .projects{grid-template-columns:1fr;gap:50px}
  .project:nth-child(even){transform:none}
  .about__grid{grid-template-columns:1fr}
  .about__portrait{position:relative;top:0}
  .service{grid-template-columns:40px 1fr;gap:14px;row-gap:8px}
  .service__desc{grid-column:1/-1}
  .service__arrow{display:none}
  .hero__statement{flex-direction:column;align-items:flex-start;gap:30px}
  .scroll-cue{flex-direction:row}
}