/* =========================================================
   RAKE — stile del sito
   Palette e caratteri dalla brand identity (Direzione A / Radente).
   Tema unico scuro, per scelta.
   ========================================================= */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --blackout:#080808; --rig:#161616; --plate:#1b1a18; --line:#2a2928;
  --bone:#EDE8E0; --haze:#8F8A82; --tungsten:#E9A23B;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
@media (min-width:700px){:root{--gutter:max(40px, env(safe-area-inset-left, 0px));--gutter-r:max(40px, env(safe-area-inset-right, 0px))}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blackout);color:var(--bone);font-family:var(--display);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--tungsten);outline-offset:4px}
::selection{background:var(--tungsten);color:var(--blackout)}

.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
.muted{color:var(--haze)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--bone);color:var(--blackout);padding:10px 14px}

/* ---------- Testata ---------- */
.top{position:fixed;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top, 0px);mix-blend-mode:difference}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:22px}
.top nav{display:flex;gap:24px;flex-wrap:wrap}
.top nav a{padding-block:6px}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--tungsten)}
.brand img{height:16px;width:auto}
.brand.hide{opacity:0;visibility:hidden}
.brand{transition:opacity .4s ease, visibility .4s}

/* ---------- Home: apertura ---------- */
.hero{padding-top:clamp(120px, 18vh, 200px);padding-bottom:40px}
.hero-logo{margin:0;line-height:0}
.hero-logo img{width:min(100%, 980px);height:auto;animation:rise 1.3s cubic-bezier(.2,.8,.1,1) both}
@keyframes rise{from{clip-path:inset(100% 0 0 0);transform:translateY(14%)}to{clip-path:inset(0 0 0 0);transform:none}}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px;border-top:1px solid var(--bone);margin-top:40px;padding-top:22px}
.hero-row p{margin:0;font-size:clamp(20px, 2.2vw, 28px);font-weight:500;line-height:1.25;max-width:34ch;text-wrap:balance}
.services{line-height:2;text-align:right}
@media (max-width:640px){.services{text-align:left}}
.clients{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:64px}
.clients .lead{color:var(--bone)}

/* ---------- Manifesto ---------- */
.manifesto{padding-top:clamp(120px, 20vw, 220px);padding-bottom:clamp(120px, 20vw, 220px)}
.manifesto p{margin:0;font-size:clamp(30px, 4.6vw, 68px);font-weight:700;font-stretch:112%;line-height:1.06;letter-spacing:-.015em;max-width:20ch}
.manifesto .w{color:var(--haze);transition:color .25s linear}
.manifesto .w.on{color:var(--bone)}
.manifesto .w.hot{color:var(--tungsten)}

/* ---------- Immagini progetto ---------- */
.shot{position:relative;width:100%;max-width:100%;background:var(--plate);overflow:hidden;
  background-image:radial-gradient(rgba(237,232,224,.035) 1px, transparent 1px);background-size:3px 3px}
.shot img,.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .ph{position:absolute;left:18px;bottom:16px;color:var(--haze)}
.shot .ph-num{position:absolute;right:18px;top:10px;font-weight:900;font-stretch:125%;font-size:clamp(60px, 10vw, 160px);color:rgba(237,232,224,.05);line-height:1}
.r-wide{aspect-ratio:21/9}.r-169{aspect-ratio:16/9}.r-vertical{aspect-ratio:4/5}.r-square{aspect-ratio:1/1}
@media (max-width:640px){.r-wide{aspect-ratio:16/10}}
.shutter{--l:22%;--r:30%;--t:34%;--b:28%;
  clip-path:polygon(var(--l) var(--t), calc(100% - var(--r)) var(--t), calc(100% - var(--r)) calc(100% - var(--b)), var(--l) calc(100% - var(--b)))}

/* ---------- Home: lavori in evidenza ---------- */
.work{display:flex;flex-direction:column;gap:clamp(96px, 14vw, 200px);padding-bottom:120px}
.proj{display:block;position:relative;min-width:0}
.ttl{overflow:hidden;margin-top:18px;white-space:nowrap}
.ttl .run{display:inline-block;font-weight:900;font-stretch:125%;font-size:clamp(44px, 9vw, 150px);line-height:.9;letter-spacing:-.03em;transition:color .3s}
.ttl.sm .run{font-size:clamp(36px, 5vw, 80px)}
.meta{display:flex;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}
.proj:hover .run{color:var(--tungsten)}
.pair{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.pair > .proj:first-child{flex:7 1 460px}
.pair > .proj:last-child{flex:5 1 320px}
@media (min-width:900px){.pair > .proj:last-child{margin-top:220px}}
.narrow{width:min(100%, 1000px);align-self:flex-end}
.all-link{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid var(--bone)}
.all-link:hover{color:var(--tungsten);border-color:var(--tungsten)}

/* ---------- Sezioni di testo ---------- */
.block{display:flex;flex-wrap:wrap;gap:32px;padding-top:120px;padding-bottom:120px;border-top:1px solid var(--line)}
.block > .label{flex:1 1 180px}
.block > .body{flex:4 1 560px;min-width:0}
.lead-text{margin:0;font-size:clamp(26px, 3.2vw, 46px);font-weight:600;font-stretch:110%;line-height:1.12;max-width:26ch;text-wrap:balance}
.team{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:32px}
.team div{display:flex;flex-direction:column;gap:6px}
.team b{font-size:22px;font-weight:700;line-height:1.2}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:32px 24px}
.services-grid div{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.services-grid b{font-size:22px;font-weight:700}
.services-grid p{margin:0;color:var(--haze);max-width:36ch}

/* ---------- Pagina Lavori ---------- */
.page-head{padding-top:clamp(140px, 20vh, 220px);padding-bottom:56px}
.page-head h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(56px, 11vw, 180px);line-height:.85;letter-spacing:-.03em}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.filters button{appearance:none;background:transparent;color:var(--haze);border:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;min-height:40px;padding:0 16px;cursor:pointer;border-radius:999px}
.filters button:hover{color:var(--bone);border-color:var(--haze)}
.filters button[aria-pressed="true"]{background:var(--bone);color:var(--blackout);border-color:var(--bone)}
.index{display:flex;gap:48px;align-items:flex-start;padding-bottom:140px}
.index ol{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;border-top:1px solid var(--line)}
.index li a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.index li .t{font-size:clamp(26px, 4vw, 52px);font-weight:800;font-stretch:115%;line-height:1;letter-spacing:-.015em;overflow-wrap:anywhere}
.index li .n{font-variant-numeric:tabular-nums}
.index li a:hover .t,.index li a:focus-visible .t{color:var(--tungsten)}
.index li .info{text-align:right}
.peek{flex:0 0 32%;position:sticky;top:120px;display:none}
@media (min-width:1000px){.peek{display:block}}
@media (max-width:640px){.index li a{grid-template-columns:36px minmax(0,1fr)}.index li .info{grid-column:2;text-align:left}}

/* ---------- Pagina progetto ---------- */
.p-head{padding-top:clamp(140px, 20vh, 220px);padding-bottom:64px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end}
.p-head .main{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.p-head h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(52px, 9vw, 150px);line-height:.88;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.p-head .concept{margin:0;font-size:clamp(20px, 2vw, 26px);line-height:1.35;color:var(--haze);max-width:40ch}
.facts{flex:1 1 260px;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:10px;font-size:15px}
.facts dt{color:var(--haze);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.facts dd{margin:0}
.gallery{display:flex;flex-direction:column;gap:40px}
.gallery .two{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:40px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:12px}
.gallery figcaption{color:var(--haze)}
.credits{padding-top:72px;display:flex;flex-direction:column;gap:6px}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin-top:140px;padding-top:32px;padding-bottom:48px;border-top:1px solid var(--line)}
.next .t{font-size:clamp(32px, 6vw, 96px);font-weight:900;font-stretch:122%;letter-spacing:-.02em;line-height:.95}
.next:hover .t{color:var(--tungsten)}

/* ---------- Piede ---------- */
.foot-wrap{padding-top:120px;border-top:1px solid var(--line)}
.mail{display:block;width:fit-content;max-width:100%;font-size:clamp(30px, 6vw, 90px);font-weight:800;font-stretch:115%;letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
.mail:hover{color:var(--tungsten)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:28px;padding-bottom:max(40px, env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line);margin-top:40px}
.foot a:hover{color:var(--bone)}
.foot .pdf{color:var(--tungsten)}

/* ---------- Timecode ---------- */
.tc{position:fixed;right:var(--gutter-r);bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:20;font-variant-numeric:tabular-nums;color:var(--haze);mix-blend-mode:difference;pointer-events:none}
.tc b{color:var(--tungsten);font-weight:500}
@media (max-width:640px){.tc{display:none}}

/* ---------- Testi lunghi (privacy) ---------- */
.prose{max-width:68ch;padding-bottom:120px}
.prose h2{font-size:22px;font-weight:700;margin:48px 0 12px}
.prose p,.prose li{color:#c9c3b9;line-height:1.65}
.prose a{border-bottom:1px solid var(--haze)}

@media (prefers-reduced-motion: reduce){
  .hero-logo img{animation:none}
  .shutter{--l:0%!important;--r:0%!important;--t:0%!important;--b:0%!important}
  .ttl .run{transform:none!important}
}