/* =========================================================
   giorgioratti.com — foglio di stile unico
   Palette: petrolio / acqua / corallo su bianco freddo
   Motivo formale: quarto di cerchio, dal monogramma GR
   ========================================================= */

:root{
  --ink:#123C46; --deep:#0E2F38; --aqua:#00A6A0; --mint:#E7F4F2;
  --coral:#FF7A5C; --sun:#FFCE4F; --paper:#FFFFFF; --shell:#F5F9F9;
  --line:#D9E6E7; --dim:#5E7A83;

  --disp:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;

  --max:1180px;
  --pad:clamp(20px,5vw,60px);
  --gap:clamp(44px,6vw,88px);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.028em;line-height:1.04;margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- logo ---------- */
.logo{display:block;width:100%;height:auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .logo{width:26px;--logo-accent:var(--coral)}
.brand b{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}

/* ---------- navigazione ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.nav a.pg{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--dim);padding:8px 13px;border-radius:999px;
  white-space:nowrap;transition:background .2s,color .2s}
.nav a.pg:hover{color:var(--ink);background:var(--mint)}
.nav a.pg[aria-current="page"]{color:#fff;background:var(--aqua)}

/* ---------- hero ---------- */
.hero{background:var(--mint);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .arc{position:absolute;border:1px solid rgba(0,166,160,.20);border-radius:50%;pointer-events:none}
.hero .a1{width:78vmax;height:78vmax;right:-30vmax;top:-32vmax}
.hero .a2{width:52vmax;height:52vmax;right:-14vmax;top:-14vmax}
.hero .a3{width:26vmax;height:26vmax;right:-2vmax;top:2vmax;border-color:rgba(255,122,92,.38)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(44px,7vw,92px);padding-bottom:clamp(40px,6vw,80px)}
.mark{width:clamp(84px,12vw,144px);color:var(--ink);--logo-accent:var(--coral);margin-bottom:clamp(24px,4vw,40px)}
.hero h1{font-size:clamp(34px,6.4vw,80px);font-weight:700;max-width:18ch;margin-top:16px}
.hero h1 em{font-style:normal;color:var(--aqua)}
.hero .sub{font-size:clamp(17px,1.6vw,21px);color:var(--dim);max-width:52ch;margin-top:20px}
.hero .role{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(19px,2.2vw,28px);line-height:1.16;max-width:30ch;margin:18px 0 0}
.hero .role em{font-style:normal;color:var(--aqua)}
.hero .role + .sub{margin-top:16px}

/* pagine interne: intestazione compatta */
.phead{background:var(--shell);border-bottom:1px solid var(--line);
  padding:clamp(34px,5vw,68px) 0 clamp(30px,4vw,52px)}
.phead h1{font-size:clamp(28px,4.6vw,54px);margin:14px 0 0;max-width:22ch}

/* intestazione con ritratto (profile.html) */
.phead .top-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4.5vw,64px);align-items:center}
.portrait{width:clamp(260px,30vw,368px);aspect-ratio:1;flex:none;margin:0}
.portrait svg{width:100%;height:auto;display:block;overflow:visible}
.portrait .arc-r,.portrait .slot{transform-origin:160px 165px;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.portrait:hover .arc-r{transform:rotate(20deg)}
.portrait:hover .slot{transform:translateX(-12px)}
@media (max-width:980px){
  .portrait{width:clamp(240px,28vw,300px)}
}
@media (max-width:760px){
  .phead .top-row{grid-template-columns:1fr;gap:24px;align-items:start}
  .portrait{width:248px;order:-1}
}
@media (max-width:400px){
  .portrait{width:208px}
}
.phead .sub{font-size:clamp(16.5px,1.5vw,20px);color:var(--dim);max-width:58ch;margin-top:18px}

/* ---------- pulsanti ---------- */
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.4vw,36px)}
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:11px 17px;
  text-decoration:none;color:var(--ink);background:none;cursor:pointer;transition:.2s}
.pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill.solid{background:var(--aqua);color:#fff;border-color:var(--aqua)}
.pill.solid:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- sezioni ---------- */
section{padding:var(--gap) 0}
section.shell{background:var(--shell)}
section.tight{padding-top:0}
.head{display:flex;align-items:center;gap:15px;margin-bottom:clamp(24px,3.4vw,38px)}
.head .q{width:24px;height:24px;border:2px solid var(--aqua);border-radius:0 24px 0 0;flex:none}
.head h2{font-size:clamp(23px,3.2vw,38px)}
.lede{font-size:clamp(17px,1.5vw,20px);max-width:56ch;color:var(--dim)}

/* ---------- due modi di lavorare ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.lane{border:1px solid var(--line);border-radius:2px 26px 2px 2px;padding:clamp(22px,2.6vw,32px);
  background:var(--paper);display:flex;flex-direction:column;transition:border-color .2s}
.lane:hover{border-color:var(--aqua)}
.lane .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ink);border-radius:999px;padding:5px 11px;align-self:flex-start}
.lane.b .tag{background:var(--coral)}
.lane h3{font-size:clamp(20px,2.2vw,26px);margin:16px 0 10px}
.lane p{color:var(--dim);font-size:15.5px}
.lane ul{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:var(--dim)}
.lane ul li{padding:4px 0 4px 18px;position:relative}
.lane ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;
  border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);border-radius:0 0 0 8px}
.lane.b ul li::before{border-color:var(--coral)}
.lane .foot{margin-top:auto;padding-top:22px}

/* ---------- metodo ---------- */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:2px 22px 2px 2px;
  padding:clamp(20px,2.4vw,28px);transition:border-color .2s}
.card:hover{border-color:var(--aqua)}
.card .n{font-family:var(--mono);font-size:11.5px;color:var(--coral);letter-spacing:.1em;margin:0}
.card h3{font-size:19px;margin:12px 0 9px}
.card p{color:var(--dim);font-size:15.5px;margin:0}
.card .why{margin-top:14px;padding-left:12px;border-left:2px solid var(--coral);
  color:var(--ink);font-size:15px}
.card .why strong{font-weight:500}

/* ---------- la lente (temi) ---------- */
.lens{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.lens > div{background:var(--paper);padding:clamp(22px,2.6vw,30px);
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:start}
.lens h3{font-size:19px}
.lens .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--aqua);margin:0 0 8px}
.lens p{color:var(--dim);font-size:15.5px;margin:0}
.lens .ex{margin-top:12px;font-size:14.5px;color:var(--ink);
  border-left:2px solid var(--sun);padding-left:12px}

/* ---------- lavori ---------- */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.work{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  background:var(--paper);border-radius:2px 26px 2px 2px;overflow:hidden;transition:.22s}
.work:hover{border-color:var(--aqua);transform:translateY(-2px)}
.work .top{aspect-ratio:16/10;background:var(--mint);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.work .top img{width:100%;height:100%;object-fit:cover}
.work .top .ring{width:54%;aspect-ratio:1;border:2px solid var(--aqua);border-radius:50% 0 0 0;opacity:.45}
.work .top .cat{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.86);
  padding:4px 9px;border-radius:999px}
.work .bd{padding:18px}
.work h3{font-size:18px;margin-bottom:6px}
.work p{font-size:15px;color:var(--dim);margin:0}

/* ---------- clienti ---------- */
.clients{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:8px}
.clients span{font-family:var(--disp);font-weight:500;font-size:16px;color:var(--dim)}
.quote{margin:clamp(26px,3.4vw,40px) 0 0;padding-left:clamp(16px,2vw,26px);
  border-left:3px solid var(--coral);max-width:60ch}
.quote p{font-size:clamp(17px,1.7vw,21px);line-height:1.42}
.quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.08em;color:var(--dim)}

/* ---------- CV ---------- */
.cv{border-top:2px solid var(--ink)}
.job{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(14px,3vw,34px);
  padding:22px 0;border-bottom:1px solid var(--line)}
.job .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);padding-top:5px;margin:0}
.job h3{font-size:clamp(17px,1.8vw,21px);line-height:1.2}
.job .org{font-size:14.5px;color:var(--dim);margin:5px 0 0}
.job.now h3::after{content:"now";font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--aqua);color:#fff;padding:3px 8px;margin-left:10px;
  vertical-align:middle;border-radius:999px}
.job ul{margin:11px 0 0;padding-left:17px;color:var(--dim);font-size:15px}

/* ---------- fatti ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:30px}
.facts div{background:var(--paper);padding:18px 20px}
.facts .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}
.facts .v{margin:6px 0 0;font-size:15.5px}

/* ---------- competenze ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.cap h3{font-size:17px;margin-bottom:12px;padding-bottom:10px;
  border-bottom:2px solid var(--coral);display:inline-block}
.cap ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--dim)}
.cap li{padding:2.5px 0}

/* =========================================================
   PAGINA PROGETTO (case study)
   ========================================================= */
.back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.back:hover{color:var(--aqua)}
.back .arw{width:16px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);flex:none}

.case-head{border-bottom:1px solid var(--line);padding:clamp(26px,4vw,48px) 0 clamp(28px,4vw,48px)}
.case-head h1{font-size:clamp(30px,5.2vw,60px);margin:18px 0 0;max-width:24ch}
.case-head .one{font-size:clamp(17px,1.7vw,22px);color:var(--dim);max-width:54ch;margin-top:18px}

.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px)}
.meta div{background:var(--paper);padding:15px 17px}
.meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}
.meta .v{margin:5px 0 0;font-size:15px}

figure{margin:0}
.shot{background:var(--mint);border:1px solid var(--line);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .ring{width:34%;aspect-ratio:1;border:2px solid var(--aqua);border-radius:50% 0 0 0;opacity:.4}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
  margin-top:10px;text-transform:none}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.shots .shot{aspect-ratio:4/3}

/* ---------- tabelle nei case study ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;vertical-align:top;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.tbl th:last-child,.tbl td:last-child{border-right:0}
.tbl thead th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400;color:#fff;background:var(--ink);
  border-right-color:rgba(255,255,255,.3);border-bottom:0}
.tbl td{color:var(--dim)}
.tbl td:first-child{color:var(--ink);width:44%}
.tbl tbody tr:nth-child(even) td{background:var(--shell)}
.tbl tbody tr:last-child td{border-bottom:0}

/* ---------- flusso di conversazione (albero di risposte) ---------- */
.flow,.flow .branches{list-style:none;margin:0;padding:0}
.flow > li + li{margin-top:20px}
.flow .via{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 8px}
.flow .bot{background:var(--mint);border:1px solid var(--line);border-radius:2px 18px 2px 2px;
  padding:12px 16px;margin:0;max-width:46ch;font-size:15.5px;color:var(--ink)}
.flow .bot.media{background:none;border-style:dashed;color:var(--dim);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.flow .usr{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--coral);color:#fff;border-radius:999px;
  padding:7px 14px;margin:0 0 10px}
.flow .branches{margin-top:14px;padding-left:22px;border-left:1px solid var(--line)}
.flow .branches > li{position:relative;padding-top:16px}
.flow .branches > li::before{content:"";position:absolute;left:-22px;top:32px;
  width:14px;height:1px;background:var(--line)}
@media (max-width:520px){
  .flow .branches{padding-left:14px}
  .flow .branches > li::before{left:-14px;width:8px}
}

/* da tablet in su lo stesso elenco diventa un diagramma ad albero */
@media (min-width:940px){
  .flowfig{overflow-x:auto;padding-bottom:6px}
  .flow{display:flex;flex-direction:column;align-items:center;text-align:center;
    min-width:max-content;margin:0 auto}
  .flow > li{display:flex;flex-direction:column;align-items:center;width:100%}
  .flow > li + li{margin-top:0;padding-top:30px;position:relative}
  .flow > li + li::before{content:"";position:absolute;top:0;left:50%;
    width:1px;height:30px;background:var(--line)}
  .flow .bot{max-width:230px;margin:0 auto;text-align:left}
  .flow .usr{margin-bottom:12px}

  .flow .branches{position:relative;display:flex;justify-content:center;align-items:flex-start;
    margin:0;padding:30px 0 0;border-left:0}
  .flow .branches::before{content:"";position:absolute;top:0;left:50%;
    width:1px;height:30px;background:var(--line)}
  .flow .branches > li{position:relative;flex:0 0 auto;min-width:254px;
    padding:30px 12px 0;text-align:center}
  .flow .branches > li::before,
  .flow .branches > li::after{content:"";position:absolute;top:0;height:30px;width:50%;
    border-top:1px solid var(--line)}
  .flow .branches > li::before{right:50%}
  .flow .branches > li::after{left:50%;border-left:1px solid var(--line)}
  .flow .branches > li:first-child::before{border-top:0}
  .flow .branches > li:last-child::after{border-top:0}
  .flow .branches > li:only-child::before{border-top:0}
}

/* ---------- lightbox: clic sull'immagine per ingrandirla ---------- */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:60;background:rgba(14,47,56,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:clamp(14px,3vw,40px);overflow:auto;overscroll-behavior:contain}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;
  background:var(--paper);border:1px solid var(--line);cursor:zoom-in}
.lb.full{align-items:flex-start;justify-content:flex-start}
.lb.full img{max-width:none;max-height:none;cursor:zoom-out}
.lb .cap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#fff;
  opacity:.82;margin:0;max-width:70ch;text-align:center}
.lb.full .cap{display:none}
.lb .x{position:fixed;top:12px;right:14px;width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(255,255,255,.5);background:none;color:#fff;font-size:20px;
  line-height:1;cursor:pointer;transition:background .2s}
.lb .x:hover{background:rgba(255,255,255,.16)}

.prose{max-width:64ch}
.prose h2{font-size:clamp(22px,2.8vw,32px);margin:0 0 16px}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose p{color:var(--dim)}
.prose strong{color:var(--ink);font-weight:500}
.prose ul{color:var(--dim);padding-left:18px}
.prose li{padding:3px 0}

/* fasi del progetto */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.phase{border:1px solid var(--line);border-radius:2px 22px 2px 2px;padding:22px;background:var(--paper)}
.phase .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--aqua);margin:0}
.phase h3{font-size:18px;margin:10px 0 8px}
.phase p{font-size:15px;color:var(--dim);margin:0}

/* decisioni: il blocco che distingue un case study di prodotto */
.decisions{border-top:2px solid var(--ink)}
.dec{padding:24px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px)}
.dec h3{font-size:clamp(18px,2vw,23px);line-height:1.22}
.dec .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 7px}
.dec p{color:var(--dim);font-size:15.5px}
.dec .tradeoff{margin-top:14px;padding-left:12px;border-left:2px solid var(--sun);font-size:15px;color:var(--ink)}

/* risultati */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.res{background:var(--mint);border-radius:2px 22px 2px 2px;padding:22px}
.res .big{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.res .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:10px 0 0}

/* navigazione fra progetti */
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  border-top:1px solid var(--line);padding-top:26px;margin-top:var(--gap)}
.pager a{text-decoration:none}
.pager .pv{text-align:left}.pager .nx{text-align:right}
.pager .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:0 0 5px}
.pager .t{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em}
.pager a:hover .t{color:var(--aqua)}
.pager .all{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--dim);white-space:nowrap}
.pager .all:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- contatti + piede ---------- */
.mail{font-family:var(--disp);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(23px,4.4vw,52px);text-decoration:none;display:inline-block;margin:14px 0 26px;
  word-break:break-word}
.mail:hover{color:var(--aqua)}
.social{display:flex;flex-wrap:wrap;gap:9px}
.social a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:10px 16px}
.social a:hover{background:var(--aqua);color:#fff;border-color:var(--aqua)}
footer{border-top:1px solid var(--line);padding:26px 0 42px;background:var(--paper)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- language switch (siti-web / websites only) ---------- */
.langsw{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none}
.langsw a{display:inline-flex;align-items:center;gap:6px;color:var(--dim);
  text-decoration:none;padding:2px 1px;opacity:.6;transition:opacity .2s,color .2s}
.langsw a:hover{color:var(--aqua);opacity:1}
.langsw a[aria-current="true"]{color:var(--ink);font-weight:600;opacity:1}
.langsw svg{height:13px;width:auto;border-radius:2px;flex:none;display:block}
.langsw span{color:var(--line)}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* tablet */
@media (max-width:980px){
  .lens > div{grid-template-columns:1fr;gap:12px}
  .dec{grid-template-columns:1fr;gap:14px}
}

/* la navigazione diventa un menu a tendina con hamburger */
@media (max-width:760px){
  .nav .wrap{padding-top:0;padding-bottom:0}
  .nav-toggle{display:flex;background:none;border:0;cursor:pointer;padding:8px;margin:0;
    flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;
    flex:none}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease}
  .nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav-toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 18px;
    box-shadow:0 12px 20px rgba(14,47,56,.08)}
  .nav.is-open ul{display:flex}
  .nav a.pg{padding:13px 10px;text-align:left}
  .hero .a3{display:none}
  .job{grid-template-columns:1fr;gap:4px}
  .job .when{padding-top:0;order:-1}
  .pager{grid-template-columns:1fr;gap:18px;text-align:left}
  .pager .nx{text-align:left}
  .pager .all{justify-self:start}
}
@media (min-width:761px){
  .nav-toggle{display:none}
}

/* barra di navigazione rapida progetti, solo mobile */
.quick-pager{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  background:var(--ink);padding:12px 14px;
  box-shadow:0 -6px 18px rgba(14,47,56,.22);
  transform:translateY(100%);transition:transform .3s ease}
.quick-pager.show{transform:translateY(0)}
.quick-pager a{text-decoration:none;display:flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.7);min-width:0}
.quick-pager a:hover{color:#fff}
.quick-pager a span:not(.qp-arrow){overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.quick-pager .qp-prev{justify-self:start;width:100%;min-width:0;overflow:hidden}
.quick-pager .qp-next{justify-self:end;width:100%;min-width:0;overflow:hidden;
  justify-content:flex-end}
.quick-pager .qp-all{justify-self:center;flex:none;color:#fff;font-weight:500;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 16px}
.quick-pager .qp-all:hover{background:#fff;color:var(--ink);border-color:#fff}
.quick-pager .qp-arrow{font-size:16px;flex:none;color:var(--aqua)}
@media (max-width:760px){
  .quick-pager{display:grid}
}

/* telefono */
@media (max-width:520px){
  body{font-size:16px}
  .hero .a1,.hero .a2{opacity:.6}
  .facts,.meta{grid-template-columns:1fr}
  .lane,.card,.phase{border-radius:2px 18px 2px 2px}
  .results{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* schermi molto larghi */
@media (min-width:1500px){
  :root{--max:1280px}
}

/* stampa: il CV deve venire bene su carta */
@media print{
  .nav,.hero .arc,footer,.pager,.row{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  section{padding:12pt 0;break-inside:avoid}
  a{text-decoration:none}
  .job,.dec{break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .work:hover{transform:none}
  .portrait .arc-r,.portrait .slot,
  .portrait:hover .arc-r,.portrait:hover .slot{transition:none;transform:none}
}