/* Varianti The Collector (B Field Archive, C Atlas) + selettore versioni. Colori mappe dal file di Senait: #B5652E, #5E6B63 */
:root{
  --o:oklch(0.5885 0.1235 52.17);
  --g:oklch(0.5143 0.0201 158.62);
  --dotc:color-mix(in oklch,var(--ink) 17%,var(--cream-2));
  --landc:color-mix(in oklch,var(--o) 38%,var(--cream-2));
  --e-out:cubic-bezier(0.23,1,0.32,1);
}

/* ---------- selettore versioni + avviso concept ---------- */
.vs{position:fixed;inset-block-end:16px;inset-inline-start:50%;translate:-50% 0;z-index:60;display:flex;align-items:center;gap:2px;padding:5px;
  background:color-mix(in oklch,var(--ink) 94%,transparent);color:var(--cream);border-radius:999px;box-shadow:0 14px 40px -14px oklch(0.22 0.01 48 / 0.6);
  font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px)}
.vs__t{padding-inline:12px 8px;opacity:.55}
.vs a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;transition:background-color .2s,color .2s}
.vs a b{font-weight:500;opacity:.6}
.vs a[aria-current]{background:var(--cream);color:var(--ink)}
.vs a[aria-current] b{opacity:1;color:var(--o)}
.vs a:active{background:color-mix(in oklch,var(--cream) 20%,transparent)}
@media (hover:hover) and (pointer:fine){.vs a:not([aria-current]):hover{background:color-mix(in oklch,var(--cream) 12%,transparent)}}
@media (width < 640px){.vs__t,.vs a span{display:none}.vs a{padding:10px 16px}.vs a b{font-size:12px}}
.concept{background:var(--ink);color:var(--cream);font:500 10px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:10px var(--gutter)}

/* ---------- pezzi comuni delle mappe ---------- */
.mk{inline-size:10px;block-size:10px;border-radius:50%;display:inline-block;flex:none;border:1.5px solid var(--ink-2);background:var(--cream-2)}
.mk.o{background:var(--o);border-color:var(--o)}
.mk.g{background:var(--g);border-color:var(--g)}
.mlogo{inline-size:clamp(92px,8.5vw,136px);block-size:auto}
.mhead{display:grid;gap:8px;text-align:center;justify-items:center}
.mhead .h2{letter-spacing:.06em}
.mhead p{margin:0}
.mtop{display:grid;grid-template-columns:1fr;align-items:start;gap:16px}
.mtop .mlogo,.fa__head .mlogo,.at__head .mlogo{justify-self:start}
@media (width < 900px){.mtop,.fa__head,.at__head{grid-template-columns:1fr;justify-items:center}.mtop .mlogo,.fa__head .mlogo,.at__head .mlogo{justify-self:center}}
.lg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font:500 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.lg span{display:inline-flex;align-items:center;gap:9px}
.mfoot{display:grid;gap:4px;text-align:center;font-size:15px;text-wrap:balance}
.mfoot i{color:var(--ink-2)}
.mblock{padding-block:clamp(28px,4vw,56px)}
.mbox{background:var(--cream-2);border:1px solid var(--line);padding:clamp(26px,4vw,56px) clamp(16px,3vw,44px);display:grid;gap:clamp(26px,3vw,42px)}
.dbtn{font:500 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--o);padding-block:8px 2px;justify-self:inherit}
.dbtn:active{opacity:.6}
@media (hover:hover) and (pointer:fine){.dbtn:hover{color:var(--ink)}}
.pop{max-inline-size:min(560px,calc(100vw - 32px));padding:34px 32px 28px;border:1px solid var(--line);background:var(--cream);color:var(--ink);
  box-shadow:0 30px 80px -20px oklch(0.22 0.01 48 / 0.4);font:400 16px/1.65 var(--serif);opacity:1}
.pop p{margin:0}
.pop__t{display:block;margin-block-end:12px;font:500 10.5px/1.4 var(--sans);letter-spacing:.16em;color:var(--o)}
.nw{white-space:nowrap}
.tx__e:focus-visible .tx__txt{outline:1.5px solid var(--terra);outline-offset:4px}
.pop::backdrop{background:oklch(0.22 0.01 48 / 0.32)}
.pop__x{position:absolute;inset-block-start:6px;inset-inline-end:8px;inline-size:40px;block-size:40px;font:300 26px/1 var(--sans);color:var(--ink-2)}
.pop__x:active{color:var(--o)}
.pop:popover-open{transition:opacity .2s var(--e-out),display .2s allow-discrete,overlay .2s allow-discrete}
@starting-style{.pop:popover-open{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .pop:popover-open{transition:opacity .22s var(--e-out),translate .3s var(--e-out),display .3s allow-discrete,overlay .3s allow-discrete}
  @starting-style{.pop:popover-open{opacity:0;translate:0 12px}}
}

/* =========================================================
   B · FIELD ARCHIVE — Mappa 1: timeline orizzontale fotografica
   ========================================================= */
.fa{--w:clamp(240px,min(28vw,46svh),430px);--gap:clamp(30px,4.4vw,76px);--ax:52px;background:var(--cream-2);border-block:1px solid var(--line);margin-block:clamp(36px,5vw,72px)}
.fa__pin{display:grid;align-content:center;gap:clamp(16px,2.6svh,34px);padding-block:clamp(26px,4.5svh,54px)}
.fa__head{display:grid;grid-template-columns:1fr;align-items:start;gap:16px}
.fa__view{container-type:inline-size;overflow-x:auto;scrollbar-width:none}
.fa__view::-webkit-scrollbar{display:none}
.fa__track{list-style:none;margin:0;display:flex;gap:var(--gap);padding-block:0 6px;padding-inline:calc(50cqi - var(--w) / 2);position:relative;inline-size:max-content}
.fa__track::before,.fa__track::after{content:"";position:absolute;inset-block-start:calc(var(--w) * .75 + var(--ax) / 2);inset-inline-start:50cqi;pointer-events:none}
.fa__track::before{inset-inline-end:50cqi;border-block-start:1px solid color-mix(in oklch,var(--ink-2) 45%,transparent)}
.fa__track::after{block-size:1.5px;translate:0 -.25px;inline-size:var(--fill,0px);background:var(--o)}
.fa__st{flex:none;inline-size:var(--w);display:grid;grid-template-rows:calc(var(--w) * .75) var(--ax) auto;position:relative;z-index:1}
.fa__ph{margin:0;position:relative;overflow:clip;background:var(--stone)}
.fa__ph img{inline-size:100%;block-size:100%;object-fit:cover;filter:sepia(.5) saturate(.55) brightness(.98);transition:filter .5s}
.fa__ph figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:22px 14px 10px;color:#fff;font:italic 400 14px/1.3 var(--serif);background:linear-gradient(transparent,oklch(0.2 0.01 48 / .6))}
.fa__st.on .fa__ph img{filter:none}
.fa__axis{display:grid;place-items:center}
.fa__dot{inline-size:16px;block-size:16px;box-shadow:0 0 0 5px var(--cream-2);cursor:pointer}
.fa__dot:active{scale:.9}
.fa__st:not(.on):not(.past) .fa__dot{opacity:.45}
.fa__lab{display:grid;gap:5px;justify-items:center;text-align:center;align-content:start;transition:opacity .4s}
.fa__lab b{font:500 11px/1.35 var(--sans);letter-spacing:.15em}
.fa__lab i{font:italic 400 15px/1.35 var(--serif);color:var(--ink-2);text-wrap:balance}
.fa__st:not(.on) .fa__lab{opacity:.5}
.fa__gap{flex:none;inline-size:clamp(40px,4vw,70px);display:grid;grid-template-rows:calc(var(--w) * .75) var(--ax);position:relative;z-index:1}
.fa__gap span{grid-row:2;place-self:center;padding-inline:10px;background:var(--cream-2);font:500 16px/1 var(--sans);color:var(--muted);letter-spacing:-.05em}
.fa__foot{display:grid;gap:14px}
@media (prefers-reduced-motion:no-preference){
  .fa__ph img{transition:filter .6s,scale 1.2s var(--e-out)}
  .fa__st.on .fa__ph img{scale:1.04}
  .fa__dot{transition:scale .35s var(--e-out),background-color .3s}
  .fa__st.on .fa__dot{scale:1.3}
}
.fa.is-pinned .fa__pin{position:sticky;inset-block-start:0;min-block-size:100svh}
.fa.is-pinned .fa__view{overflow:clip}
@media (hover:hover) and (pointer:fine){.fa__st:hover .fa__lab{opacity:1}.fa__st:hover .fa__ph img{filter:none}}

/* telefono e tablet: timeline verticale con le foto */
@media (width < 1000px){
  .fa{--w:auto}
  .fa__head{grid-template-columns:1fr}
  .fa__view{overflow:visible;container-type:normal;padding-inline:var(--gutter)}
  .fa__track{flex-direction:column;gap:clamp(30px,7vw,48px);inline-size:auto;padding:4px 0 4px 38px}
  .fa__track::before,.fa__track::after{inset-inline-start:10px;inset-block-start:8px}
  .fa__track::before{inset-inline-end:auto;inset-block-end:8px;border-block-start:0;border-inline-start:1px solid color-mix(in oklch,var(--ink-2) 45%,transparent)}
  .fa__track::after{inline-size:1.5px;block-size:var(--fill,0px);translate:-.25px 0}
  .fa__st{inline-size:auto;grid-template-rows:auto;grid-template-areas:"lab" "ph";gap:14px}
  .fa__ph{grid-area:ph;aspect-ratio:4/3}
  .fa__axis{position:absolute;inset-inline-start:-38px;inset-block-start:0;inline-size:22px;block-size:22px}
  .fa__lab{grid-area:lab;justify-items:start;text-align:start}
  .fa__gap{inline-size:auto;display:block;block-size:10px}
  .fa__gap span{position:absolute;inset-inline-start:-38px;inset-block-start:-14px;inline-size:22px;padding:4px 0;text-align:center}
  .fa__st:not(.on) .fa__lab{opacity:.65}
}

/* =========================================================
   B · Mappa 2: sei colonne su un asse del tempo comune
   ========================================================= */
.tx{--hh:52px;--txh:clamp(620px,62vw,820px);position:relative}
.tx__cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(10px,1.4vw,26px);padding-inline-start:46px}
.tx__col h3{block-size:var(--hh);margin:0;display:flex;align-items:end;padding-block-end:12px;border-block-end:1px solid var(--line);font:500 10.5px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.tx__col .iran-h{color:var(--g)}
.tx__list{list-style:none;margin:0;padding:0;position:relative;block-size:var(--txh)}
.tx__list::before{content:"";position:absolute;inset-block:0;inset-inline-start:5px;border-inline-start:1px solid var(--line)}
.tx__e{outline-offset:4px}
.tx__bars{position:absolute;inset-block:0;inset-inline-start:0;inline-size:11px}
.tx__bar{position:absolute;inset-inline-start:0;inline-size:11px;inset-block-start:calc(var(--a) * 100%);block-size:max(11px,calc((var(--b) - var(--a)) * 100%));border-radius:6px;background:var(--o)}
.mk-g .tx__bar{background:var(--g)}
.mk-h .tx__bar{background:var(--cream-2);border:1.5px solid var(--ink-2)}
.tx__txt{position:absolute;inset-inline:22px 0;inset-block-start:calc(var(--ly) * 100%);translate:0 -3px;display:grid;gap:1px;transition:opacity .3s}
.tx__txt b{font:500 11px/1.3 var(--sans);letter-spacing:.1em;display:flex;align-items:center;gap:8px}
.tx__txt>span{font:400 14px/1.3 var(--serif);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tx__txt .dbtn{justify-self:start;padding-block:5px 0}
.tx__m{display:none}
.tx__grid{position:absolute;inset-inline:0;inset-block-start:var(--hh);block-size:var(--txh);pointer-events:none}
.tx__grid span{position:absolute;inset-inline:0;inset-block-start:calc(var(--a) * 100%);border-block-start:1px dashed color-mix(in oklch,var(--ink-2) 18%,transparent);padding-block-start:5px;font:500 10px/1 var(--sans);letter-spacing:.1em;color:var(--muted)}
.tx__cursor{position:absolute;inset-inline:0;inset-block-start:calc(var(--cy,0) * 100%);border-block-start:1px solid var(--o);opacity:0;transition:opacity .25s}
.tx__cursor::before{content:attr(data-y);position:absolute;inset-inline-start:0;translate:0 -50%;background:var(--cream-2);padding-inline-end:6px;font:500 10.5px/1 var(--sans);letter-spacing:.08em;color:var(--o)}
.tx.hov .tx__cursor{opacity:1}
.tx:has(.tx__e:is(:hover,:focus-visible)) .tx__e:not(:hover,:focus-visible) :is(.tx__txt,.tx__bars){opacity:.3}
.tx__bars{transition:opacity .3s}
@media (prefers-reduced-motion:no-preference){.tx__cursor{transition:opacity .25s,inset-block-start .35s var(--e-out)}}
@media (width < 900px){
  .tx__cols{grid-template-columns:1fr;gap:34px;padding:0}
  .tx__grid{display:none}
  .tx__col h3{block-size:auto;padding-block-end:10px}
  .tx__list{block-size:auto;display:grid}
  .tx__list::before{display:none}
  .tx__e{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding-block:11px 12px;border-block-end:1px solid color-mix(in oklch,var(--line) 70%,transparent)}
  .tx__txt{display:contents}
  .tx__txt b{grid-column:1;grid-row:1}
  .tx__txt>span{grid-column:2;grid-row:1}
  .tx__txt .dbtn{grid-column:1/-1}
  .tx__m{display:inline-block}
  .tx__bars{position:relative;grid-column:1/-1;inline-size:auto;block-size:3px;margin-block-start:9px;background:color-mix(in oklch,var(--line) 70%,transparent);border-radius:2px}
  .tx__bar{inset-block:0;block-size:auto;inset-inline-start:calc(var(--a) * 100%);inline-size:max(4px,calc((var(--b) - var(--a)) * 100%));border-radius:2px;border:0}
  .mk-h .tx__bar{background:var(--ink-2)}
}

/* =========================================================
   C · ATLAS — Mappa 1: mappa vera + timeline sincronizzata
   ========================================================= */
.at{background:var(--cream-2);border-block:1px solid var(--line);margin-block:clamp(36px,5vw,72px)}
.fa__pin>.container,.at__pin-wrap>.container{inline-size:100%}
.at__pin-wrap{display:grid;align-content:center;gap:clamp(14px,2.2svh,30px);padding-block:clamp(24px,4svh,50px)}
.at__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px}
.at__map{position:relative;aspect-ratio:var(--ar);inline-size:100%;margin-inline:auto;overflow:clip}
.at .at__map{inline-size:min(100%,calc(max(240px,100svh - 450px) * var(--arn)))}
.at__zoom{position:absolute;inset:0;transform-origin:var(--ox,50%) var(--oy,50%);translate:calc(50% - var(--ox,50%)) calc(50% - var(--oy,50%));scale:var(--zs,1)}
.at__svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.at__dots{fill:none;stroke:var(--dotc);stroke-width:.36;stroke-linecap:round}
.at__land{fill:none;stroke:var(--landc);stroke-width:.4;stroke-linecap:round;transition:stroke .4s}
.at__land.on{stroke:var(--o)}
.at__land.on[data-p="Iran"]{stroke:var(--g)}
.at__arc{fill:none;stroke:var(--o);stroke-width:.17;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.at__pin{position:absolute;inset-inline-start:var(--x);inset-block-start:var(--y);translate:-50% -50%;scale:calc(1 / var(--zs,1));inline-size:12px;block-size:12px;display:grid;place-items:center;transition:opacity .3s}
.at__pin i{grid-area:1/1;border-radius:50%;inline-size:10px;block-size:10px;border:1.5px solid var(--ink-2);background:var(--cream-2);box-sizing:border-box}
.at__pin.o i{background:var(--o);border-color:var(--o)}
.at__pin.g i:first-child{background:var(--g);border-color:var(--g)}
.at__pin.g i:nth-child(2){inline-size:20px;block-size:20px;background:none;border:1px solid var(--g)}
.at__pin.g i:nth-child(3){inline-size:30px;block-size:30px;background:none;border:1px solid var(--g)}
.at .at__pin.g i:nth-child(2),.at .at__pin.g i:nth-child(3){opacity:0;transition:opacity .4s}
.at .at__pin.g[data-k="2"] i:nth-child(2),.at .at__pin.g[data-k="3"] i:nth-child(2),.at .at__pin.g[data-k="3"] i:nth-child(3){opacity:1}
.at .at__pin:not(.seen){opacity:.35}
.at .at__pin.on{z-index:2}
.at .at__pin.on::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--o)}
.at .at__pin.g.on::after{border-color:var(--g);inset:-14px}
.at__card{position:absolute;inset-inline-start:var(--x,50%);inset-block-start:var(--y,50%);translate:16px calc(-100% - 12px);z-index:3;display:grid;gap:3px;padding:10px 14px 11px;background:var(--cream);border:1px solid var(--line);box-shadow:0 14px 34px -16px oklch(0.22 0.01 48 / .4);pointer-events:none;white-space:nowrap;transition:opacity .25s}
.at__card.flip{translate:calc(-100% - 16px) calc(-100% - 12px)}
.at__card:empty,.at__card:not(.on){opacity:0}
.at__card b{font:500 10.5px/1.3 var(--sans);letter-spacing:.14em}
.at__card em{font:italic 400 15px/1.3 var(--serif);color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .at__card{transition:opacity .25s,inset-inline-start .6s var(--e-out),inset-block-start .6s var(--e-out),translate .4s var(--e-out)}
  .at__zoom{transition:translate .9s var(--e-out),scale .9s var(--e-out),transform-origin .9s var(--e-out)}
  .at .at__pin.on::after{animation:ping 1.8s var(--e-out) infinite}
  @keyframes ping{from{scale:.6;opacity:1}to{scale:1.8;opacity:0}}
}
.at__tl{list-style:none;margin-block:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) clamp(26px,3vw,46px) minmax(0,1fr);position:relative}
.at__j::before,.at__gap::before{content:"";position:absolute;inset-inline:0;inset-block-start:7px;border-block-start:1px solid color-mix(in oklch,var(--ink-2) 40%,transparent);z-index:-1}
.at__j:first-child::before{inset-inline-start:50%}
.at__j:last-child::before{inset-inline-end:50%}
.at__j{display:grid;justify-items:center;text-align:center;position:relative;z-index:1}
.at__jb{display:grid;justify-items:center;align-content:start;gap:7px;padding-inline:4px;opacity:.48;transition:opacity .3s}
.at__jb .mk{inline-size:14px;block-size:14px;box-shadow:0 0 0 4px var(--cream-2)}
.at__jb b{font:500 10px/1.35 var(--sans);letter-spacing:.1em;white-space:nowrap}
.at__jb em{font:italic 400 13.5px/1.3 var(--serif);color:var(--ink-2);text-wrap:balance}
.at__j.on .at__jb,.at__j.past .at__jb{opacity:1}
.at__j.past .at__jb{opacity:.8}
.at__j.on .at__jb{opacity:1}
.at__jb:active{opacity:.7}
.at__gap{display:grid;justify-items:center;align-content:start;font:500 15px/15px var(--sans);color:var(--muted);letter-spacing:-.05em;position:relative;z-index:1}
.at__gap::after{content:"//";position:absolute;inset-block-start:0;padding-inline:5px;background:var(--cream-2);color:var(--muted)}
.at__gap{color:transparent}
.at__j .dbtn{padding-block-start:6px}
.at__foot{display:grid;gap:14px}
@media (prefers-reduced-motion:no-preference){.at__jb .mk{transition:scale .35s var(--e-out)}.at__j.on .at__jb .mk{scale:1.35}}
@media (hover:hover) and (pointer:fine){.at__jb:hover{opacity:1}}
.at.is-pinned .at__pin-wrap{position:sticky;inset-block-start:0;min-block-size:100svh}

/* telefono e tablet: mappa ferma in alto, tappe che scorrono sotto */
@media (width < 1000px){
  body:has(.header:not(.is-hidden)) :is(.at__stage,.cv__map){inset-block-start:var(--header-h)}
  .at__stage,.cv__map{transition:inset-block-start .5s var(--ease-out)}
  .at__head{grid-template-columns:1fr}
  .at__stage{position:sticky;inset-block-start:0;z-index:5;background:var(--cream-2);padding-block:10px;border-block-end:1px solid var(--line)}
  .at .at__map{inline-size:100%}
  .at__card{white-space:normal;max-inline-size:62vw;padding:8px 11px 9px}
  .at__card em{font-size:13.5px}
  .at__tl{grid-template-columns:1fr;padding-block:6px 30svh}
  .at__j::before,.at__gap::before{display:none}
  .at__gap::after{color:var(--muted);inset-inline-start:-3px}
  .at__tl::before{content:"";position:absolute;inset-inline:calc(var(--gutter) + 7px) auto;inset-block:24px 30svh;border-block-start:0;border-inline-start:1px solid color-mix(in oklch,var(--ink-2) 40%,transparent)}
  .at__j{justify-items:start;align-content:start;text-align:start;min-block-size:19svh;padding-block:18px 0}
  .at__jb{grid-template-columns:auto 1fr;justify-items:start;align-content:start;text-align:start;column-gap:16px;row-gap:4px;padding:0}
  .at__jb .mk{grid-row:1/3;margin-block-start:1px}
  .at__jb b{font-size:11px;white-space:normal}
  .at__arc{stroke-width:.2}
  .at__jb em{font-size:15.5px}
  .at__j .dbtn{margin-inline-start:30px}
  .at__gap{justify-items:start;padding-inline-start:0;inline-size:16px;padding-block:6px}
}

/* =========================================================
   C · Mappa 2: impronta sulla mappa + sei colonne collegate
   ========================================================= */
.cv__map{display:grid}
.at__map--cv{inline-size:min(100%,1000px)}
.cv .at__pin{cursor:default}
.at__tip{position:absolute;inset-block-end:calc(100% + 10px);inset-inline-start:50%;translate:-50% 0;white-space:nowrap;padding:7px 10px;background:var(--ink);color:var(--cream);font:500 10px/1.5 var(--sans);letter-spacing:.12em;opacity:0;pointer-events:none;transition:opacity .2s;z-index:4}
.at__pin.tip .at__tip{opacity:1}
.at__pin.tip{z-index:4}
.at__map.dim .at__pin:not(.on){opacity:.22}
.at__map.dim .at__land:not(.on){stroke:var(--dotc)}
.cv .at__land.on{stroke:var(--o)}
.cv .at__pin.on i{scale:1.25}
@media (prefers-reduced-motion:no-preference){.cv .at__pin i{transition:scale .3s var(--e-out)}}
@media (hover:hover) and (pointer:fine){.cv .at__pin:hover .at__tip{opacity:1}}
.cv__cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(12px,1.6vw,28px)}
.cv__col h3{margin:0}
.cv__h{inline-size:100%;text-align:start;padding-block:6px 12px;border-block-end:1px solid var(--line);font:500 10.5px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;cursor:default}
.cv__col .iran-h .cv__h{color:var(--g)}
.cv__col ul{list-style:none;margin:0;padding:0;display:grid}
.cv__e{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:2px;padding-block:10px 11px;border-block-end:1px solid color-mix(in oklch,var(--line) 65%,transparent);transition:opacity .3s,background-color .3s}
.cv__e .mk{grid-row:1/3;margin-block-start:3px}
.cv__e b{font:500 11px/1.3 var(--sans);letter-spacing:.1em}
.cv__e span{font:400 14px/1.3 var(--serif);color:var(--ink-2)}
.cv__e .dbtn{grid-column:2;justify-self:start;padding-block:4px 0}
.cv__cols:has(.cv__e:is(:hover,:focus-visible)) .cv__e:not(:hover,:focus-visible){opacity:.4}
.cv__cols:has(.cv__h:is(:hover,:focus-visible)) .cv__col:not(:has(.cv__h:is(:hover,:focus-visible))){opacity:.4}
.cv__col{transition:opacity .3s}
@media (width < 1000px){
  .cv__map{position:sticky;inset-block-start:0;z-index:5;background:var(--cream-2);padding-block:10px;border-block-end:1px solid var(--line);margin-inline:calc(-1 * clamp(16px,3vw,44px));padding-inline:clamp(16px,3vw,44px)}
  .cv__cols{grid-template-columns:1fr;gap:30px}
  .cv__e{grid-template-columns:auto 1fr auto;align-items:center}
  .cv__e .mk{grid-row:auto;margin:0}
  .cv__e span{justify-self:end}
  .cv__e .dbtn{grid-column:2/-1}
}

/* =========================================================
   Galleria "Journeys Through Time" a mosaico (come la media grid Shopify)
   ========================================================= */
.gx__t{margin-block-end:clamp(24px,3vw,44px);text-align:center}
.gx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(110px,12.5vw,200px);grid-auto-flow:dense;gap:clamp(8px,1vw,16px)}
.gx__i{margin:0;grid-column:span var(--c);grid-row:span var(--r);position:relative;overflow:clip;background:var(--stone)}
.gx__b{display:block;inline-size:100%;block-size:100%;cursor:zoom-in}
.gx__b img{inline-size:100%;block-size:100%;object-fit:cover;transition:filter .5s}
.gx__i figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:24px 14px 10px;color:#fff;font:italic 400 14px/1.3 var(--serif);background:linear-gradient(transparent,oklch(0.2 0.01 48 / .6));pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .gx:has(.gx__b:hover) .gx__i:not(:has(.gx__b:hover)) img{filter:grayscale(.7) brightness(.86)}
  .gx__b:hover img{scale:1.04}
}
@media (prefers-reduced-motion:no-preference){.gx__b img{transition:filter .5s,scale 1s var(--e-out)}}
.gx__b:active img{filter:brightness(.9)}
@media (width < 760px){
  .gx{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw}
  .gx__i{grid-column:span 1;grid-row:span 1}
  .gx__i:nth-child(3n+1){grid-column:span 2;grid-row:span 1}
}
.lbx{inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:0;border:0;background:oklch(0.18 0.01 48 / .94);color:var(--cream)}
.lbx[open]{display:grid;place-items:center}
.lbx img{max-inline-size:92vw;max-block-size:86svh;object-fit:contain}
.lbx button{position:absolute;inline-size:52px;block-size:52px;display:grid;place-items:center;font:300 26px/1 var(--sans);color:var(--cream)}
.lbx button:active{opacity:.6}
.lbx__x{inset-block-start:12px;inset-inline-end:12px}
.lbx__n[data-d="-1"]{inset-inline-start:10px;inset-block-start:50%;translate:0 -50%}
.lbx__n[data-d="1"]{inset-inline-end:10px;inset-block-start:50%;translate:0 -50%}

/* =========================================================
   C v2 · mappa del CV più leggibile: puntini più grossi e scuri, paesi del CV sempre accesi
   ========================================================= */
.cv2 .at__dots{stroke:color-mix(in oklch,var(--ink) 26%,var(--cream-2));stroke-width:.6}
.cv2 .at__land{stroke:var(--o);stroke-width:.66}
.cv2 .at__land[data-p="Iran"]{stroke:var(--g)}
.cv2 .at__map.dim .at__land:not(.on){stroke:var(--landc)}
.cv2 .at__map.dim .at__land[data-p="Iran"]:not(.on){stroke:color-mix(in oklch,var(--g) 40%,var(--cream-2))}
.cv2 .at__land.on[data-p="Iran"]{stroke:var(--g)}
.cv2 .at__map--cv{inline-size:min(100%,1100px)}

/* =========================================================
   D · E: mappa v3 — griglia fitta, colori come la legenda, nomi sulla mappa
   ========================================================= */
.cv3 .lg{margin-block-start:calc(-1 * clamp(8px,1.2vw,18px))}
.cv3__map{display:block}
.cv3__svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
.d3{fill:none;stroke:var(--bc);stroke-width:.64;stroke-linecap:round}
.l3 path{fill:none;stroke-linecap:round;transition:stroke .35s}
.l3.k-o path{stroke:var(--o);stroke-width:.78}
.l3.k-g path{stroke:var(--g);stroke-width:.78}
.l3.k-h path{stroke:var(--hc);stroke-width:.74}
.cv3{--bc:color-mix(in oklch,var(--ink) 19%,var(--cream-2));--hc:color-mix(in oklch,var(--ink) 42%,var(--cream-2));--hd:color-mix(in oklch,var(--ink) 62%,var(--cream-2))}
.cv3 .mk:not(.o,.g){background:var(--hd);border-color:var(--hd)}
.cv3__map.dim .l3.k-h.on path{stroke:var(--hd)}
.t3{transform:translate(calc(var(--px) * 1px),calc(var(--py) * 1px)) scale(calc(1 / var(--zs,1)))}
.t3 text{font-family:var(--sans);font-size:var(--fs,1.22px);font-weight:500;letter-spacing:.11em;fill:var(--ink);paint-order:stroke;stroke:var(--cream-2);stroke-width:.5px;stroke-linejoin:round}
.t3.k-h text{fill:var(--ink-2)}
.t3.k-g text{fill:var(--g)}
.t3__ln{fill:none;stroke:var(--ink-2);stroke-width:.9px;vector-effect:non-scaling-stroke}
.t3__pt{fill:var(--hd);stroke:var(--hd);stroke-width:.18}
.t3.k-o .t3__pt{fill:var(--o);stroke:var(--o)}
.t3.k-g .t3__pt{fill:var(--g);stroke:var(--g)}
.t3{transition:opacity .35s}
.cv3__map.dim .l3:not(.on) path{stroke:color-mix(in oklch,var(--hc) 30%,var(--bc))}
.cv3__map.dim .l3.k-o:not(.on) path{stroke:color-mix(in oklch,var(--o) 30%,var(--bc))}
.cv3__map.dim .l3.k-g:not(.on) path{stroke:color-mix(in oklch,var(--g) 34%,var(--bc))}
.cv3__map.dim .t3:not(.on){opacity:.22}
.cv3__map.dim .t3.on text{font-weight:600}
.cv__e.hl{background:color-mix(in oklch,var(--o) 9%,transparent)}
.cv3 .cv__col.iran-col .cv__h,.cv3 .iran-h .cv__h{color:var(--g)}
@media (hover:hover) and (pointer:fine){.l3,.t3{cursor:default}}

/* D: mappa larga, sei colonne sotto */
.cv3--labels .cv3__body{display:grid;gap:clamp(26px,3vw,42px)}
.cv3--labels .cv3__map{inline-size:min(100%,1180px);margin-inline:auto}

/* E: sul computer mappa ferma a sinistra, regioni che scorrono a destra e accendono la mappa */
@media (width >= 1000px){
  .cv3--story .cv3__body{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(250px,1fr);gap:clamp(28px,3.4vw,60px);align-items:start}
  .cv3--story .cv3__map{position:sticky;inset-block-start:max(24px,calc(50svh - 15vw))}
  .cv3--story .cv__cols{grid-template-columns:1fr;gap:0;padding-block:24svh 22svh}
  .cv3--story .cv__col{padding-block:3svh 5svh;transition:opacity .4s}
  .cv3--story .cv__cols:has(.cv__col.act) .cv__col:not(.act){opacity:.32}
  .cv3--story .cv__e{grid-template-columns:auto 1fr auto;align-items:center}
  .cv3--story .cv__e .mk{grid-row:auto;margin:0}
  .cv3--story .cv__e span{justify-self:end;text-align:end}
  .cv3--story .cv__e .dbtn{grid-column:2/-1}
  .cv3--story .cv__h{font-size:11.5px}
  .cv3--story .cv3__svg{--fs:1.75px}
  .cv3--story .cv3__map:not(.dim) .cv3__svg{--fs:1.3px}
  .cv3--story .cv3__map.dim .t3:not(.on){opacity:0}
}

/* E: la mappa zooma sulla regione attiva */
.cv3--story .cv3__map.dim .cv3__svg{overflow:hidden}
.z3{transform-origin:0 0}
@media (prefers-reduced-motion:no-preference){.z3,.cv3--story .t3{transition:transform 1.1s var(--e-out),opacity .35s}}

/* telefono: nomi nascosti (troppo piccoli, la lista è subito sotto), la regione che scorre accende la mappa; in E anche zoom */
@media (width < 1000px){
  .t3 text,.t3__ln{display:none}
  .cv3 .lg{flex-direction:column;align-items:flex-start;inline-size:fit-content;margin-inline:auto}
  .cv3.cvx--f .lg{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;inline-size:100%;gap:6px;font-size:clamp(.5rem,.1rem + 2.2vw,.65625rem);letter-spacing:.06em}
  .cvx--f .lg span{gap:4px;white-space:nowrap}
  .cvx--f .lg .mk{inline-size:7px;block-size:7px}
  .cv3 .cv__cols{padding-block-end:30svh}
  .cv3 .cv__col{transition:opacity .4s}
  .cv3 .cv__cols:has(.cv__col.act) .cv__col:not(.act){opacity:.4}
}

/* =========================================================
   F · G: mappe antiche per la scroll story (F carta da esploratore, G atlante antico)
   ========================================================= */
.cvx .l3 path{fill:var(--fl);stroke:var(--st);stroke-width:.1;stroke-linejoin:round;transition:none}
.cvx .l3{transition:opacity .4s}
.cvx .cv3__map.dim .l3:not(.on) path,.cvx .cv3__map.dim .l3.on path{stroke:var(--st)}
.cvx .cv3__map.dim .l3:not(.on){opacity:.3}
.ax .sea{fill:var(--sea)}
.ax .grat{fill:none;stroke:var(--grat);stroke-width:.05}
.ax .wl,.ax .wg{fill:none;stroke-linejoin:round}
.ax .wl{stroke:var(--wl);opacity:.7}
.ax .wg{stroke:var(--sea)}
.ax .land{fill:var(--land);stroke:var(--coast);stroke-width:.11;stroke-linejoin:round}
.ax .bord{fill:none;stroke:var(--coast);stroke-width:.055;stroke-dasharray:.28 .16;opacity:.75}
.ax .seas text{font-family:var(--serif);font-style:italic;font-size:1.1px;letter-spacing:.16em;fill:var(--seat)}
.ax .fr rect{fill:none;stroke:var(--ink-a);stroke-width:.09}
.ax .fr .fr__o{stroke-width:.05}
.ax .fr__b{fill:none;stroke:var(--ink-a);stroke-width:.5}
.cvx .t3 text{font-family:var(--serif);font-weight:500;letter-spacing:.16em;fill:var(--ink-a);stroke:var(--land);stroke-width:.45px}
.cvx .t3.k-h text{fill:var(--ink-b)}
.cvx .t3.k-g text{fill:var(--g-a)}
.cvx .t3__ln{stroke:var(--ink-b)}
.cvx .t3__pt{fill:var(--ink-b);stroke:var(--land)}
.cvx .t3.k-o .t3__pt{fill:var(--o-a);stroke:var(--land)}
.cvx .t3.k-g .t3__pt{fill:var(--g-a);stroke:var(--land)}
.cvx .mk.o{background:var(--o-a);border-color:var(--o-a)}
.cvx .mk.g{background:var(--g-a);border-color:var(--g-a)}
@media (width >= 1000px){.cvx.cv3--story .cv3__map:not(.dim) .cv3__svg{--fs:1.25px}.cvx.cv3--story .cv3__svg{--fs:1.6px}}

/* F · carta da esploratore: carta invecchiata, coste incise con le righe dell'acqua, paesi ad acquerello, rosa dei venti */
.cvx--f{--sea:#eadcbc;--land:#f4ead3;--coast:#5d4631;--wl:color-mix(in oklch,#5d4631 55%,#eadcbc);--grat:color-mix(in oklch,#7d6346 45%,#eadcbc);--seat:#7d6346;--ink-a:#3b2b1e;--ink-b:#6a5239;--o-a:#b35d2a;--g-a:#4f6157}
/* Region colours retain the existing terracotta/sage watercolour treatment. */
.cvx--f :is(.k-af,.mk.af){--region-ink:var(--o-a);--region-paint:oklch(from #c0672f l c h)}
.cvx--f :is(.k-me,.mk.me){--region-ink:var(--g-a);--region-paint:oklch(from #55695d l c h)}
.cvx--f :is(.k-as,.mk.as){--region-ink:oklch(49% .035 240);--region-paint:oklch(53% .035 240)}
.cvx--f :is(.k-eu,.mk.eu){--region-ink:oklch(50% .03 310);--region-paint:oklch(54% .03 310)}
.cvx--f .l3{--fl:color-mix(in oklch,var(--region-paint) 62%,transparent);--st:var(--region-ink)}
.cvx--f .t3 .t3__pt{fill:var(--region-ink);stroke:var(--land)}
.cv3.cvx--f .mk{background:var(--region-ink);border-color:var(--region-ink)}
.ax--f .hb{fill:var(--land)}
.ax--f .hl{stroke:#6a5239;stroke-width:.08}
.ax--f .cr circle{fill:none;stroke:var(--coast);stroke-width:.06}
.ax--f .cr .cr__c{fill:var(--coast)}
.ax--f .cr__t{fill:none;stroke:var(--coast);stroke-width:.05}
.ax--f .cr__d{fill:var(--ink-a)}
.ax--f .cr__l{fill:var(--land);stroke:var(--ink-a);stroke-width:.04}
.ax--f .cr text{font-family:var(--serif);font-size:1.5px;fill:var(--ink-a)}
.cvx--f .cv3__map::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgb(120 86 50 / .22) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.cvx--f .cv__e b,.cvx--f .cv__h{font-family:var(--serif);font-weight:500;letter-spacing:.14em}

/* G · atlante antico: mare salvia, terre color pergamena, confini tratteggiati, colori pieni e sobri */
.cvx--g{--sea:#c8d3cd;--land:#eee4cb;--coast:#a08664;--wl:#d6ded9;--grat:color-mix(in oklch,#fff 70%,#c8d3cd);--seat:#5f7a74;--ink-a:#45362a;--ink-b:#6f5c46;--o-a:#b8682f;--g-a:#56685e}
.ax--g .wl{opacity:.8}
.ax--g .wg{stroke:#dfe6e1}
.cvx--g .l3.k-o{--fl:color-mix(in oklch,#bf6d33 86%,transparent);--st:#93501f}
.cvx--g .l3.k-g{--fl:color-mix(in oklch,#5c7064 88%,transparent);--st:#3f4e45}
.cvx--g .l3.k-h{--fl:#cdb68a;--st:#9c8259}
.cvx--g .mk:not(.o,.g){background:#cdb68a;border-color:#9c8259}
.cvx--g .cv3__map::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 62%,rgb(90 70 40 / .12) 100%)}


/* F: intestazione e mappa ferme, il CV attraversa una finestra sfumata. */
@media (width >= 1000px) {
  .cvx--f.cvf-pinned .mbox {
    position:sticky;inset-block-start:calc(var(--header-h) + 12px);
    grid-template-rows:auto auto auto auto;
    padding-block:clamp(18px,2.5svh,32px);gap:clamp(16px,2.5svh,28px);
  }
  .cvx--f.cvf-pinned .cv3__body{min-block-size:0;block-size:var(--cvf-body-h,300px)}
  .cvx--f.cvf-pinned .cv3__map{position:relative;inset-block-start:auto;inline-size:min(100%,calc(var(--cvf-body-h) * var(--cvf-ar)))}
  .cvx--f.cvf-pinned .cvf__window {
    block-size:100%;overflow:hidden;
    mask-image:linear-gradient(to bottom,transparent,oklch(0 0 none) var(--cvf-fade,0px),oklch(0 0 none) calc(100% - 30px),transparent);
  }
  .cvx--f.cvf-pinned .cv__cols{padding-block:0;gap:clamp(32px,6svh,64px)}
  .cvx--f.cvf-pinned .cv__col{padding-block:0}
}

/* =========================================================
   H · copia con le foto approvate (specifica del 9/10/2026)
   Regola della specifica: foto intere e senza filtri, quindi niente object-fit cover né seppia.
   ========================================================= */
.zb{display:block;inline-size:100%;cursor:zoom-in}
.zb img{inline-size:100%;block-size:auto}
.zb:active img{opacity:.85}
@media (hover:hover) and (pointer:fine){.zb:hover img{opacity:.92}}
@media (prefers-reduced-motion:no-preference){.zb img{transition:opacity .25s}}
:is(.jp,.lgb,.gy,.stx) figure{margin:0;display:grid;gap:8px;align-content:start}
:is(.jp,.lgb,.gy,.stx) figcaption{font:italic 400 14px/1.4 var(--serif);color:var(--ink-2);text-align:center;text-wrap:balance}

/* timeline: la foto principale di ogni viaggio, intera, appoggiata sull'asse */
.fa--ph .fa__ph{background:none;overflow:visible}
.fa__open{display:block;inline-size:100%;block-size:100%;cursor:pointer}
.fa--ph .fa__ph img{object-fit:contain;object-position:50% 100%;filter:none}
.fa--ph .fa__st.on .fa__ph img{scale:none}
.fa--ph .fa__lab .dbtn{padding-block-start:4px}
@media (width < 1000px){
  .fa--ph .fa__ph{aspect-ratio:auto}
  .fa--ph .fa__ph img{inline-size:auto;max-inline-size:100%;block-size:auto;max-block-size:min(340px,60svh);object-position:0 0}
  .fa--ph .fa__open{block-size:auto;inline-size:fit-content;max-inline-size:100%}
  .fa--ph .fa__lab .dbtn{justify-self:start}
}

/* pannello del viaggio: luogo e anni, foto principale grande, miniature che si aprono a tutto schermo */
.jp{inline-size:min(880px,100% - 24px);max-inline-size:none;max-block-size:calc(100svh - 24px);padding:clamp(34px,4vw,48px) clamp(18px,3.6vw,48px) clamp(26px,3vw,40px);
  border:1px solid var(--line);background:var(--cream);color:var(--ink);box-shadow:0 30px 80px -20px oklch(0.22 0.01 48 / 0.4);overflow-y:auto;overscroll-behavior:contain;opacity:0;
  transition:opacity .22s var(--e-out),display .22s allow-discrete,overlay .22s allow-discrete}
.jp[open]{display:grid;gap:clamp(20px,2.6vw,30px);opacity:1}
.jp::backdrop{background:oklch(0.22 0.01 48 / 0.32);opacity:0;transition:opacity .22s var(--e-out),display .22s allow-discrete,overlay .22s allow-discrete}
.jp[open]::backdrop{opacity:1}
@starting-style{.jp[open],.jp[open]::backdrop{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .jp{translate:0 12px;transition:opacity .22s var(--e-out),translate .3s var(--e-out),display .3s allow-discrete,overlay .3s allow-discrete}
  .jp[open]{translate:0 0}
  @starting-style{.jp[open]{translate:0 12px}}
}
html:has(:is(.jp,.lbx--cap):modal){overflow:hidden;scrollbar-gutter:stable}
.jp__h{display:grid;gap:4px;justify-items:center;text-align:center;padding-inline:36px}
.jp__h .pop__t{margin:0}
.jp__h i{font:italic 400 clamp(17px,1.6vw,20px)/1.35 var(--serif);color:var(--ink-2);text-wrap:balance}
.jp__main{justify-items:center}
.jp__main .zb{inline-size:fit-content;max-inline-size:100%}
.jp__main img{inline-size:auto;max-inline-size:100%;max-block-size:min(60svh,640px)}
.jp__th{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 16px}
.jp__th figure{flex:0 1 clamp(130px,22%,180px)}
.jp__th img{block-size:clamp(100px,13vw,136px);object-fit:contain;object-position:50% 100%}
.jp__txt{margin:0;font:400 16px/1.65 var(--serif)}
.jp__lnk{justify-self:center;font:500 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--o);padding-block:10px;border-block-end:1px solid currentColor}
.jp__lnk:active{opacity:.6}
@media (hover:hover) and (pointer:fine){.jp__lnk:hover{color:var(--ink)}}

/* logbook: copertina a tutta larghezza, poi due coppie affiancate (Ivory Coast, Iran), in colonna sul telefono */
.lgb{scroll-margin-block-start:var(--header-h)}
.lgb__in{max-inline-size:1140px;display:grid;gap:clamp(30px,4vw,56px)}
.lgb__head{display:grid;gap:20px;justify-items:center;text-align:center}
.lgb__head p{margin:0;max-inline-size:62ch;text-wrap:pretty}
.lgb__imgs{display:grid;gap:clamp(30px,4vw,56px)}
.lgb__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,2.4vw,32px)}

/* galleria in fondo: righe allineate in altezza, ogni foto intera nelle sue proporzioni.
   Il tetto alla crescita evita che una foto rimasta sola in fondo diventi enorme: l'ultima riga si centra. */
.gy{--rh:clamp(150px,19vw,280px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(22px,2.4vw,34px) clamp(10px,1.2vw,18px)}
.gy__i{flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--rh));max-inline-size:calc(var(--ar) * var(--rh) * 1.6)}

/* foto a tutto schermo con la didascalia */
.lbx--cap img{max-block-size:80svh}
.lbx__c{position:absolute;inset-inline:64px;inset-block-end:max(14px,env(safe-area-inset-bottom));margin:0;text-align:center;font:italic 400 15px/1.4 var(--serif);color:var(--cream);text-wrap:balance}

/* From Engineer to Collector e Acquired in the Field: le due foto affiancate alla stessa altezza, ognuna nelle sue proporzioni
   (verticale e orizzontale insieme, nessun ritaglio); sul telefono una sotto l'altra, centrate */
.stx__imgs{display:flex;gap:clamp(12px,1.6vw,22px);align-items:flex-start}
.stx__i{flex:calc(var(--ar) * 100) 1 0;min-inline-size:0}
.stx.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.stx.split--flip{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
/* due foto orizzontali: una sotto l'altra, sfalsate */
.stx__imgs--offset{flex-direction:column;gap:clamp(20px,2.4vw,34px)}
.stx__imgs--offset .stx__i{flex:none;inline-size:78%}
.stx__imgs--offset .stx__i:nth-child(2){align-self:flex-end}
@media (width < 861px){
  .stx__imgs{flex-direction:column;align-items:center;gap:28px}
  .stx.split,.stx.split--flip{grid-template-columns:1fr}
  .stx__imgs .stx__i{flex:none;inline-size:min(100%,calc(var(--ar) * 62svh));align-self:center}
}