/* ========== MS.com — site styles ========== */
:root{
  --bg:#000;
  --fg:#fff;
  --line:rgba(255,255,255,.18);
  --line-strong:rgba(255,255,255,.35);
  --muted:rgba(255,255,255,.55);
  --dim:rgba(255,255,255,.75);
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --rail: clamp(24px, 5vw, 72px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ===== NAV ===== */
.site-nav{
  position:sticky;top:0;z-index:50;background:#000;
  border-bottom:1px solid var(--line);
  padding: 20px var(--rail);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
}
.site-nav .brand{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-0.01em}
.site-nav ul{display:flex;gap:28px;flex-wrap:wrap}
.site-nav ul a{font-size:13.5px;color:var(--dim);transition:color .2s;letter-spacing:.01em}
.site-nav ul a:hover,.site-nav ul a.is-active{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;padding:6px 0}

@media (max-width: 820px){
  .site-nav{flex-wrap:wrap}
  .nav-toggle{display:block}
  .site-nav ul{display:none;flex-basis:100%;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--line);margin-top:12px}
  .site-nav.open ul{display:flex}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:1px solid #fff;background:transparent;color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  cursor:pointer;transition: all .2s ease; text-decoration:none;
}
.btn:hover{background:#fff;color:#000}
.btn.solid{background:#fff;color:#000}
.btn.solid:hover{background:transparent;color:#fff}
.btn.ghost{border-color:var(--line-strong)}
.btn.ghost:hover{border-color:#fff;background:transparent;color:#fff}
.btn .arrow{font-family:var(--mono);font-size:16px;line-height:1}

.link-inline{border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .2s}
.link-inline:hover{border-color:#fff}

/* ===== SECTION PRIMITIVES ===== */
.section{padding: clamp(64px, 9vw, 120px) var(--rail); border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.section-head{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:end;margin-bottom:56px}
.section-head .label{font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.05;letter-spacing:-0.02em;max-width:24ch}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

@media (max-width: 820px){
  .section-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
}

/* ===== HERO ===== */
.hero{
  padding: clamp(64px, 9vw, 140px) var(--rail) clamp(80px, 10vw, 140px);
  display:grid;grid-template-columns:1.5fr 1fr;gap: clamp(40px, 6vw, 96px);align-items:end;
  border-bottom:1px solid var(--line);
  position:relative;
}
.hero::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.06);
  pointer-events:none;
}
.hero .meta{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(40px,5.6vw,82px);line-height:1.02;letter-spacing:-0.025em;
  max-width:18ch;margin-bottom:32px;text-wrap:balance;
}
.hero h1 em{font-style:normal;font-weight:300;color:var(--dim)}
.hero .sub{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--dim);max-width:48ch;margin-bottom:40px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero .portrait{
  aspect-ratio: 3/4; border:1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, #0f0f0f 0 14px, #080808 14px 28px);
  display:flex;align-items:flex-end;justify-content:space-between;padding:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hero .portrait span:last-child{text-align:right}

@media (max-width: 820px){
  .hero{grid-template-columns:1fr;gap:48px}
  .hero::before{display:none}
  .hero .portrait{max-height:60vh}
}

/* ===== WHAT I DO ===== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trio .cell{background:#000;padding:clamp(32px,3.5vw,48px);min-height:360px;display:flex;flex-direction:column;justify-content:space-between}
.trio .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.trio h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,26px);line-height:1.15;letter-spacing:-0.01em;margin:16px 0 14px}
.trio p{font-size:15px;line-height:1.6;color:var(--dim)}
.trio .focus{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:24px;display:flex;align-items:center;gap:10px}
.trio .focus .dot{width:6px;height:6px;background:#fff;border-radius:50%;flex-shrink:0}
@media (max-width:820px){.trio{grid-template-columns:1fr}}

/* ===== PROJECTS ===== */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.proj{border:1px solid var(--line);padding:clamp(24px,2.5vw,32px);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;transition:all .25s;background:#000}
.proj:hover{border-color:#fff;transform:translateY(-2px)}
.proj .t{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:-0.02em;line-height:1}
.proj .d{font-size:14px;line-height:1.55;color:var(--dim);margin-top:14px}
.proj .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.proj .cta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;border-bottom:1px solid #fff;padding-bottom:3px;align-self:flex-start;margin-top:28px}
@media (max-width:820px){.projects{grid-template-columns:1fr}}

/* ===== PRINCIPLES ===== */
.principles{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.principles li{
  border-bottom:1px solid var(--line);
  padding: clamp(22px,2.4vw,32px) 0;
  display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:baseline;
  font-family:var(--display);font-weight:500;font-size:clamp(20px,2.1vw,30px);letter-spacing:-0.01em;line-height:1.2;
  transition: padding .25s, background .25s;
}
.principles li:hover{background:#0a0a0a;padding-left:16px}
.principles .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;font-weight:400}
.principles .meta{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* ===== CLIENTS MARQUEE ===== */
.clients-head{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;gap:24px;flex-wrap:wrap;
  padding: 0 var(--rail);
}
.clients-head h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.8vw,24px);letter-spacing:.02em;text-transform:uppercase}
.clients-head .count{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{display:flex;gap: clamp(56px, 7vw, 96px);padding:clamp(32px,4vw,48px) 0;animation:scroll 48s linear infinite;width:max-content;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-mark{height:36px;width:auto;display:flex;align-items:center;color:#fff;opacity:.85;transition:opacity .2s;flex-shrink:0}
.logo-mark:hover{opacity:1}
.logo-mark svg{height:100%;width:auto;fill:#fff}

/* ===== BOOKS ===== */
.books-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px) clamp(24px,2.5vw,40px)}
.book{display:flex;flex-direction:column;gap:18px}
.book .cover{
  aspect-ratio: 2/3;background:#0b0b0b;border:1px solid var(--line);
  overflow:hidden;position:relative;transition: transform .35s ease;
  display:flex;align-items:center;justify-content:center;
}
.book:hover .cover{transform:translateY(-4px)}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book .cover-ph{
  width:100%;height:100%;
  background-image: repeating-linear-gradient(45deg, #0d0d0d 0 10px, #070707 10px 20px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:20px;text-align:center;
}
.book .cat{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.book .title{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.8vw,24px);letter-spacing:-0.01em;line-height:1.15}
.book .title span.var{color:var(--muted);font-weight:400;font-size:.85em;margin-left:4px}
.book .desc{font-size:14px;line-height:1.55;color:var(--dim)}
.book .btn-amz{
  align-self:flex-start;margin-top:4px;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border:1px solid #fff;font-family:var(--sans);font-size:12px;letter-spacing:.05em;
  transition:all .2s;
}
.book .btn-amz:hover{background:#fff;color:#000}
.book.soon .btn-amz{border-color:var(--line-strong);color:var(--muted);cursor:not-allowed}
.book.soon .btn-amz:hover{background:transparent;color:var(--muted)}
@media (max-width:820px){.books-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.books-grid{grid-template-columns:1fr}}

/* ===== EMBEDS ===== */
.embeds{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.embed-card{border:1px solid var(--line)}
.embed-card .head{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.embed-card .head .who{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.embed-card .head .kind{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line);padding:4px 8px}
.embed-video{aspect-ratio:16/9;background:repeating-linear-gradient(0deg,#0a0a0a 0 2px,#000 2px 4px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted)}
.embed-audio{padding:22px;display:flex;gap:20px;align-items:center}
.embed-audio .thumb{width:80px;height:80px;background:#111;border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.15em}
.embed-audio .meta-body{flex:1;min-width:0}
.embed-audio .tt{font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:4px}
.embed-audio .ar{font-size:13px;color:var(--muted);margin-bottom:12px}
.embed-audio .scrub{height:3px;background:var(--line);position:relative}
.embed-audio .scrub::after{content:"";position:absolute;left:0;top:0;height:100%;width:32%;background:#fff}
.embed-audio .controls{margin-top:12px;display:flex;gap:14px;align-items:center;color:var(--dim);font-family:var(--mono);font-size:11px}
.embed-audio .pp{width:32px;height:32px;border:1px solid #fff;display:flex;align-items:center;justify-content:center}
@media (max-width:820px){.embeds{grid-template-columns:1fr}}

/* ===== ABOUT / PROSE ===== */
.prose{max-width:58ch}
.prose p{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--dim);margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose p strong{color:#fff;font-weight:500}

.lede{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-0.015em;max-width:28ch;color:#fff}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid var(--line);padding:56px var(--rail) 40px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;
}
.site-footer .cr{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.site-footer .cr .name{display:block;font-family:var(--display);font-size:20px;letter-spacing:-0.01em;color:#fff;text-transform:none;margin-bottom:8px;font-weight:500}
.site-footer .links{display:flex;gap:28px;font-size:14px;flex-wrap:wrap}
.site-footer .links a{color:var(--dim);transition:color .2s;border-bottom:1px solid transparent;padding-bottom:2px}
.site-footer .links a:hover{color:#fff;border-color:#fff}
@media (max-width:820px){.site-footer{grid-template-columns:1fr;gap:40px}}

/* ===== PAGE HEAD ===== */
.page-head{
  padding: clamp(80px,10vw,140px) var(--rail) clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:end;
}
.page-head .label{font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.page-head h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-0.025em;
  max-width:18ch;text-wrap:balance;
}
@media (max-width:820px){.page-head{grid-template-columns:1fr;gap:16px}}

/* ===== UTIL ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
/* --- Writing footer block --- */
.writing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.wf-text {
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

.wf-link {
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  font-size: 14px;
  transition: opacity 0.2s;
}

.wf-link:hover {
  opacity: 0.6;
}

@media (max-width: 700px) {
  .writing-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 820px) {

  .site-nav ul {
    display: none;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0e0e11;
    padding: 20px;
    border-bottom: 1px solid var(--line);
  }

  .site-nav ul.open {
    display: flex;
  }

  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: relative;
  }
}
/* MOBILE NAV FIX */
@media (max-width: 820px) {

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: relative;
  }

  .site-nav ul {
    display: none;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 20px;
    background: #0e0e11;
    border-bottom: 1px solid var(--line);
    z-index: 999;
  }

  .site-nav ul.open {
    display: flex;
  }
}
.portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: url("/assets/img/mattia.jpg") center/cover no-repeat !important;
}

/* rimuove completamente il placeholder */
.portrait span {
  display: none !important;
}