/* Predict Studio · bozza · pagine verticali (About, Method): stessa griglia delle pagine progetto */

.v-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--m) calc(var(--m) + 70px)}
.v-hero h1{font-size:clamp(52px,9vw,170px)}
.v-hero .intro{display:grid;grid-template-columns:var(--colw) 1fr;column-gap:0;row-gap:var(--m);margin-top:clamp(36px,4vw,64px)}
.v-hero .intro p{max-width:34em;font-size:clamp(17px,1.45vw,22px);line-height:1.42;color:var(--mute);letter-spacing:-.01em;text-wrap:pretty}

.v-sec{display:grid;grid-template-columns:var(--colw) 1fr;column-gap:0;row-gap:var(--m);margin:0 var(--m);padding:clamp(64px,9vw,150px) 0 0;position:relative}
.v-sec .b-lab{color:var(--mute);padding-top:4px;align-self:start;position:sticky;top:calc(var(--m) + 60px)}
.v-sec h2{font-size:clamp(34px,4.6vw,84px)}
.v-sec .lede{font-size:clamp(17px,1.45vw,22px);line-height:1.42;color:var(--mute);letter-spacing:-.01em;max-width:34em;margin-top:clamp(24px,2.6vw,40px);text-wrap:pretty}

/* righe: elenco con fili a mano tra una voce e l'altra */
.rows{margin-top:clamp(28px,3vw,48px)}
.row{display:grid;grid-template-columns:calc(var(--colw)*2) 1fr;column-gap:0;row-gap:var(--m);align-items:baseline;padding:20px 0;position:relative}
.row .rn{font-size:clamp(26px,3vw,48px);letter-spacing:-.045em;line-height:1;justify-self:start;position:relative}
.row p{font-size:15px;line-height:1.5;color:var(--mute);max-width:32em}
.row .mono{color:var(--dim);display:block;margin-top:8px}

/* è / non è */
.isnot{display:grid;grid-template-columns:calc(var(--colw)*2) 1fr;column-gap:0;row-gap:var(--m);margin-top:clamp(28px,3vw,48px)}
.isnot h3{font-weight:400;color:var(--dim);margin-bottom:14px}
.isnot li{list-style:none;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.03em;line-height:1.25;padding:6px 0}
.isnot .no li{color:var(--mute)}
.isnot .no li span{position:relative;display:inline-block}

/* persone */
.people{display:grid;grid-template-columns:calc(var(--colw)*2) 1fr;column-gap:0;row-gap:var(--m);margin-top:clamp(28px,3vw,48px);align-items:end}
.portrait{aspect-ratio:4/5;border-radius:6px;overflow:hidden}
.people h3{font-weight:300;font-size:clamp(28px,3.2vw,52px);letter-spacing:-.045em;line-height:1}
.people .role{color:var(--dim);margin-top:10px}
.people p{font-size:15px;line-height:1.5;color:var(--mute);max-width:32em;margin-top:18px}

/* principio */
.v-quote{margin:clamp(110px,14vw,240px) var(--m) 0;max-width:22em}
.v-quote .title{font-size:clamp(34px,5vw,92px)}
.v-quote cite{display:block;font-style:normal;color:var(--dim);margin-top:24px}

/* Method: le due linee parallele, prodotto e storia */
.proposal{color:var(--hand);margin-top:22px;max-width:46em;line-height:1.65}
.tracks{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  margin:0 calc(var(--m) * -1);padding:calc(var(--m) + 56px) var(--m) 22px}
.trk{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:16px;height:30px}
.trk .tl-name{color:var(--dim)}
.trk .tline{position:relative;display:block;height:1px}
.stops{display:grid;grid-template-columns:90px repeat(4,1fr);gap:0 16px;margin-top:10px}
.stops span{color:var(--dim);transition:color .5s var(--e-out)}
.stops span.on{color:var(--fg)}
.step{display:grid;grid-template-columns:var(--colw) calc(var(--colw)*2) 1fr;column-gap:0;row-gap:var(--m);padding:clamp(56px,7vw,110px) 0 0;position:relative}
.step h3{font-weight:300;font-size:clamp(44px,6vw,110px);letter-spacing:-.055em;line-height:.92}
.step .col h4{font-weight:400;color:var(--dim);margin-bottom:12px}
.step .col p{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:var(--mute);text-wrap:pretty}
.step .why{grid-column:2/-1;color:var(--dim);margin-top:-6px}
.alt{color:var(--hand);line-height:1.65;max-width:46em}

@media (max-width:900px){
  .v-hero .intro,.v-sec{grid-template-columns:1fr}
  .v-sec .b-lab{position:static}
  .row{grid-template-columns:1fr;gap:8px}
  .isnot,.people{grid-template-columns:1fr}
  .portrait{max-width:320px}
  .step{grid-template-columns:1fr}
  .step .why{grid-column:auto}
  .trk,.stops{grid-template-columns:60px 1fr}
  .stops{grid-template-columns:60px repeat(4,1fr)}
}

.endcta .foot{grid-template-columns:1fr 1fr 1fr} .endcta .foot .soc{justify-self:end;display:flex;gap:22px}

/* ===== About e Method rifatte (27/10): poche frasi, ognuna con il suo disegno; la griglia di fondo le incasella ===== */
.ab-hero{justify-content:flex-end}
.ab-hero h1{font-size:clamp(46px,8vw,150px)}
.ab-sub{margin-top:clamp(28px,3vw,48px);margin-left:var(--colw);max-width:26em;font-size:clamp(17px,1.45vw,22px);line-height:1.42;color:var(--mute);letter-spacing:-.01em}

.ab-scene{display:grid;grid-template-columns:repeat(var(--cols),1fr);align-items:center;margin:0 var(--m);padding:clamp(90px,12vw,200px) 0 0;column-gap:0}
.ab-art{grid-column:1 / span 3;padding:clamp(16px,2.4vw,36px);margin-right:clamp(16px,3vw,48px)}
.ab-art text.note{font-size:8.5px}
.ab-txt{grid-column:4 / -1;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.ab-scene.flip .ab-art{grid-column:4 / -1;grid-row:1;margin:0 0 0 clamp(16px,3vw,48px)}
.ab-scene.flip .ab-txt{grid-column:1 / span 3;grid-row:1}
.ab-txt .mono{color:var(--dim);min-height:1.2em}
.ab-h{font-weight:300;font-size:clamp(30px,3.6vw,64px);line-height:1.02;letter-spacing:-.045em;max-width:13em;text-wrap:balance}
.ab-h em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em;position:relative}
.ab-p{font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--mute);max-width:28em}
.ab-p.mono{font-size:11px;line-height:1.9;color:var(--dim)}
.ab-scene .ab-txt > *{opacity:0;transform:translateY(14px);transition:opacity .9s var(--e-out),transform 1s var(--e-out)}
.ab-scene.in .ab-txt > *{opacity:1;transform:none}
.ab-scene.in .ab-txt > :nth-child(2){transition-delay:.12s} .ab-scene.in .ab-txt > :nth-child(3){transition-delay:.24s}

.ab-not{margin:clamp(110px,14vw,230px) var(--m) 0;display:grid;grid-template-columns:repeat(var(--cols),1fr)}
.ab-not > .mono{grid-column:1 / span 1;color:var(--dim);padding-top:.9em}
.ab-not ul{grid-column:2 / -1;list-style:none}
.ab-not li{font-size:clamp(28px,4vw,72px);letter-spacing:-.045em;line-height:1.12;font-weight:300;color:var(--mute);opacity:0;transform:translateY(12px);transition:opacity .8s var(--e-out),transform .9s var(--e-out)}
.ab-not li.in{opacity:1;transform:none}
.ab-not .x{position:relative;display:inline-block}

/* Method: il filo fermo al centro, il testo che cambia */
.mt-run{position:relative;height:440vh}
.mt-stage{position:sticky;top:0;height:100vh;overflow:hidden}
/* il quadro delle mosse: tra le tacche e la descrizione (il fondo lo calcola method.html), dentro una tavola alla volta */
.mt-panel{position:absolute;left:var(--m);right:var(--m);top:calc(var(--m) + 104px);bottom:50vh;cursor:pointer}
.mt-art{position:absolute;inset:clamp(8px,1vw,16px) clamp(14px,2.2vw,34px)}
.mt-art svg.sart,.mt-ill svg.sart{width:100%!important;height:100%!important}
.mt-art text.note{font-size:18px}
svg.sart text.note{font-family:"Reenie Beanie",cursive;font-size:20px;fill:var(--hand);stroke:var(--hand);stroke-width:.35px;letter-spacing:.02em}
.mt-copy{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + 64px);display:grid;grid-template-columns:repeat(var(--cols),1fr);align-items:end}
.mt-l{grid-column:1 / span 3;padding-right:clamp(16px,3vw,48px)}
.mt-n{display:block;color:var(--dim)}
.mt-name{font-weight:300;font-size:clamp(46px,6.4vw,118px);letter-spacing:-.06em;line-height:.86;margin-top:14px}
.mt-q{margin-top:clamp(18px,1.8vw,28px);font-size:clamp(16px,1.3vw,20px);line-height:1.42;letter-spacing:-.01em;max-width:24em;min-height:4.3em;text-wrap:pretty}
/* a destra, stretto e leggibile: cosa succede al prodotto, alla storia, e cosa ti porti a casa */
.mt-rows{grid-column:4 / -1;max-width:34em;display:grid;row-gap:clamp(12px,1.3vw,20px)}
.mt-rows > div{display:grid;grid-template-columns:7em 1fr;column-gap:16px;align-items:baseline}
.mt-rows dt{color:var(--dim)} .mt-rows .get dt{color:var(--hand)}
.mt-rows dd{font-size:clamp(15px,1.12vw,18px);line-height:1.45;color:var(--mute);min-height:2.9em;text-wrap:pretty}
.mt-rows .get dd{color:var(--fg)}
.mt-n,.mt-q,.mt-rows dd{will-change:opacity,transform}

/* perché funziona · quanto dura */
.mt-why,.mt-len{margin:clamp(100px,12vw,200px) var(--m) 0;display:grid;grid-template-columns:repeat(var(--cols),1fr)}
.mt-why > .mono,.mt-len > .mono{grid-column:1 / span 1;color:var(--dim);padding-top:.7em}
.mt-why ol{grid-column:2 / -1;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.mt-why li > .mono{display:block;color:var(--dim);margin-bottom:16px}
.mt-why h3{font-weight:300;font-size:clamp(24px,2.3vw,38px);letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.mt-why p{margin-top:14px;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--mute);max-width:24em}
.mt-len dl{grid-column:2 / -1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px)}
.mt-len dt{font-weight:300;font-size:clamp(44px,5.6vw,104px);letter-spacing:-.055em;line-height:.95}
.mt-len dd{margin-top:16px;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--mute);max-width:22em}
@media (min-width:761px) and (max-width:1024px){ .mt-l{grid-column:1 / span 2} .mt-rows{grid-column:3 / -1} .mt-why ol{grid-template-columns:1fr 1fr} }
.mt-ticks{position:absolute;left:var(--m);right:var(--m);top:calc(var(--m) + 64px);display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(16px,2.4vw,40px);list-style:none}
.mt-ticks button{color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;transition:color .5s var(--e-out);position:relative}
.mt-ticks li.on button{color:var(--fg)}
.mt-ticks li button::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--hand);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e-out)}
.mt-ticks li.on button::after{transform:none}
.mt-end{margin:clamp(60px,8vw,120px) var(--m) 0;position:relative}
/* le tavole piccole: Why it works, How long, One team */
.mt-ill{position:relative;aspect-ratio:240/150;padding:clamp(12px,1.4vw,20px);margin-bottom:clamp(20px,2vw,30px);cursor:pointer}
.mt-ill.wide{aspect-ratio:300/130}
.mt-ill.team{aspect-ratio:480/180;max-width:1100px}
.mt-ill svg.sart{display:block}
.mt-ill text.note{font-size:17px} .mt-ill.wide text.note{font-size:14px} .mt-ill.team text.note{font-size:12px}
.mt-len dl > div{min-width:0}
.mt-end-t{font-size:clamp(40px,6.4vw,120px);margin-top:clamp(28px,3vw,48px)}

@media (max-width:760px){
  .ab-sub{margin-left:0}
  .ab-scene{grid-template-columns:1fr;row-gap:28px}
  .ab-art,.ab-scene.flip .ab-art{grid-column:1;grid-row:1;margin:0;padding:18px 6%} .ab-art text.note{font-size:14px}
  .ab-txt,.ab-scene.flip .ab-txt{grid-column:1;grid-row:2}
  .ab-not{grid-template-columns:1fr;row-gap:18px} .ab-not > .mono,.ab-not ul{grid-column:1}
  .mt-panel{top:calc(var(--m) + 92px)} .mt-art{inset:10px} .mt-art text.note{font-size:25px} .mt-ill text.note{font-size:19px} .mt-ill.wide text.note{font-size:17px} .mt-ill.team text.note{font-size:26px}
  .mt-copy{grid-template-columns:1fr;row-gap:18px;bottom:calc(var(--m) + 30px)} .mt-l,.mt-rows{grid-column:1}
  .mt-l{padding-right:0} .mt-name{font-size:clamp(46px,13vw,66px)} .mt-q{font-size:15px;min-height:4.3em;margin-top:14px}
  .mt-rows{row-gap:10px} .mt-rows > div{grid-template-columns:5.8em 1fr;column-gap:10px} .mt-rows dd{font-size:14px;min-height:2.9em}
  .mt-why,.mt-len{grid-template-columns:1fr;row-gap:22px} .mt-why > .mono,.mt-len > .mono,.mt-why ol,.mt-len dl{grid-column:1}
  .mt-why ol{grid-template-columns:1fr;gap:34px} .mt-len dl{grid-template-columns:1fr;gap:30px}
  .mt-ticks{grid-template-columns:repeat(4,auto);gap:14px}
}