/* Page /metodo/ (20/10/2026, live 21/10/2026): the altitude of a launch as the progress bar of the method.
   Engineering, telemetry, numbers: no drawn rockets, stars or glows (the only gradient is the edge fade of the photo). Grey bands, one teal accent
   on the active phase only, KMR for text, IBM Plex Mono for telemetry and figures. Uses the tokens of servizi.css. */

/* ---------- Hero: title, the real photograph wide, then the text ---------- */
.m-hero{padding:clamp(32px,4vw,56px) 0 clamp(56px,6vw,96px)}
.m-hero .crumbs{margin-bottom:clamp(40px,6vw,88px);font-size:var(--fs-small);color:var(--muted)}
.m-hero .crumbs a:hover{color:var(--text)}
.m-hero .crumbs [aria-current]{color:var(--soft)}
.m-hero h1{max-width:900px;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.05em}
.m-photo{position:relative;z-index:0;overflow:hidden;margin:calc(-1 * clamp(24px,6vw,96px)) 0 clamp(8px,2vw,24px)} /* tucked under the subtitle: its top is faded out */
.m-hero-top,.m-hero-bottom{position:relative;z-index:1}
/* the Earth turns: the picture rotates slowly around the centre of the planet (pivot set in px by the script),
   so the lit edge slides along itself, always towards the right. Wider than the screen so the turn never shows a side edge. */
.m-photo img{width:120%;max-width:none;height:clamp(240px,30vw,460px);margin-left:-10%;object-fit:cover;object-position:50% 46%;transform-origin:48% var(--m-pivot,4000%);
  /* the photo melts into the page above and below, so its edges never show (asked by Enzo, 21/10/2026) */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%,#000 62%,transparent 100%)} /* taste-skill-ignore: edge fade of the photo, requested */
/* endless turn without a jump: two copies of the photo run the same one-way turn half a cycle apart, and each one
   fades in and out so it is invisible at the moment it goes back to the start. Added together (plus-lighter) they
   always make one full picture. */
.m-photo-turn{position:relative;isolation:isolate;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%,#000 62%,transparent 100%)} /* taste-skill-ignore: edge fade of the photo, requested */
.m-photo-turn img{display:block;-webkit-mask-image:none;mask-image:none;will-change:transform,opacity;animation:m-turn var(--m-cycle) linear infinite,m-fade var(--m-cycle) linear infinite}
.m-photo-turn img+img{position:absolute;top:0;left:0;mix-blend-mode:plus-lighter;animation-delay:calc(var(--m-cycle) / -2)}
.m-photo-turn{--m-cycle:60s}
@keyframes m-turn{from{transform:rotate(calc(var(--m-turn,.5deg) * -1))}to{transform:rotate(var(--m-turn,.5deg))}}
@keyframes m-fade{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.m-photo-turn img{animation:none;opacity:1}.m-photo-turn img+img{display:none}}
.m-photo figcaption{position:absolute;right:var(--gutter);bottom:14px;font-size:var(--fs-small);color:var(--muted)}
.m-hero-bottom .svc-lead{margin-top:0}
.m-hero .hero-actions{justify-content:flex-start;margin-top:40px}

/* ---------- The flight: the altitude scale beside the four phases ---------- */
.m-flight{padding:clamp(16px,2vw,32px) 0 clamp(72px,9vw,128px)}
.m-flight-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.m-scale{position:sticky;top:112px;display:flex;flex-direction:column;height:min(700px,calc(100vh - 180px))}
.m-telemetry{display:none;margin:0 0 18px;font-family:var(--mono);font-size:var(--fs-lead);line-height:1.2;color:var(--text)} /* taste-skill-ignore: telemetry readout, figures in IBM Plex Mono by brand rule */
.js .m-telemetry{display:block}
.m-telemetry .m-km{color:var(--accent)}
.m-telemetry .m-sep{color:var(--muted)}
.m-gauge{position:relative;flex:1;min-height:420px;overflow:hidden;border-radius:12px;background:#0f0f12}
.m-band{position:absolute;left:0;right:0}
.m-band:nth-child(1){background:#2b2c32}
.m-band:nth-child(2){background:#24252a}
.m-band:nth-child(3){background:#1e1f23}
.m-band:nth-child(4){background:#18191c}
.m-band:nth-child(5){background:#121215}
.m-band span{position:absolute;top:6px;right:14px;font-size:var(--fs-small);line-height:1.2;color:var(--muted)}
.m-mark{position:absolute;left:0;right:0;height:0}
.m-mark span{position:absolute;right:14px;font-size:var(--fs-small);line-height:1.2;color:var(--soft);white-space:nowrap}
.m-mark b{font-weight:400;font-family:var(--mono)} /* taste-skill-ignore: altitude figure, IBM Plex Mono by brand rule */
.m-mark.is-karman span{bottom:6px}
.m-mark.is-iss span{top:6px}
.m-mark.is-karman::before{content:"";position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:#4a4c54}
/* the climb: a track, its teal fill, the phases at their altitude */
.m-gauge::after{content:"";position:absolute;z-index:1;top:3%;bottom:3%;left:27px;width:2px;background:#3a3b42}
.m-fill{display:none;position:absolute;z-index:2;top:3%;bottom:3%;left:27px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:bottom}
.js .m-fill{display:block}
.m-stop{position:absolute;z-index:3;left:0;right:0;height:0}
.m-stop::before{content:"";position:absolute;left:22px;top:-6px;width:12px;height:12px;border-radius:50%;background:#5b5e67}
.m-stop span{position:absolute;left:46px;bottom:4px;font-size:var(--fs-small);line-height:1.25;color:var(--soft);white-space:nowrap}
.m-stop.is-active::before{background:var(--accent)}
.m-stop.is-active span{color:var(--accent)}
.m-marker{display:none;position:absolute;z-index:4;left:19px;bottom:calc(3% - 9px);width:18px;height:18px;border-radius:50%;background:var(--accent);transform:translateY(0)}
.js .m-marker{display:block}
.m-scale-note{margin:16px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.m-track{display:none}

/* the phases, on the dark ground */
.m-phase{min-height:62vh;padding:0 0 clamp(56px,8vw,112px);scroll-margin-top:var(--bar-gap)}
.m-phase h2{max-width:640px;font-size:var(--fs-title);line-height:1.1;letter-spacing:-.035em;color:var(--text)}
.m-quota{margin:10px 0 24px;font-family:var(--mono);font-size:var(--fs-small);color:var(--muted)} /* taste-skill-ignore: altitude figures, IBM Plex Mono by brand rule */
.m-phase p{max-width:640px;font-size:var(--fs-body);line-height:1.65;color:var(--soft)}
.m-phase strong{font-weight:400;color:var(--text)}
.m-phase a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.m-phase a:hover{color:var(--accent)}
.m-phase.is-active .m-quota{color:var(--accent)}
.m-phase:last-child{min-height:100svh}
.m-rest{padding:clamp(56px,7vw,104px) 0}
.m-rest>section:first-child h2{margin-top:0}
/* "In breve" (svc-brief di servizi.css) dentro la prosa: la regola .prose h2 non deve toccarne il titolo */
.m-rest .svc-brief .svc-brief-title{margin:0 0 20px;font-size:var(--fs-lead);line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.m-rest .svc-brief+section h2{margin-top:0}
.m-rest .svc-brief ul{margin:0;padding:0}.m-rest .svc-brief li{margin:0;padding:0}.m-rest .svc-brief li::before{content:none}

@media(max-width:900px){
  .m-flight-grid{grid-template-columns:1fr;gap:0}
  /* phones and tablets: a thin telemetry bar under the top bar, in the flow, so it never covers the text */
  .m-scale{z-index:5;top:68px;height:auto;margin:0 calc(-1 * var(--gutter)) 32px;padding:12px var(--gutter);background:var(--bg)}
  .m-telemetry{margin:0 0 10px;font-size:var(--fs-small)}
  .m-gauge,.m-scale-note{display:none}
  .js .m-track{display:block;position:relative;height:2px;background:#3a3b42}
  .m-track .m-fill{display:block;top:0;bottom:auto;left:0;right:0;width:auto;height:2px;transform:scaleX(0);transform-origin:left}
  .m-phase,.m-phase:last-child{min-height:0}
  .m-flight .m-scale-mobile-note{display:block}
}
.m-scale-mobile-note{display:none;margin:8px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.m-fill,.m-marker{transition:none}}