/* percorso */

@media (max-width:760px){
  main{margin-left:0;padding-top:52px}
}

/* hide section eyebrows */
.eyerow{display:none!important}

@media (min-width:1600px){
  main{margin-left:calc((100vw - 1560px) / 2 + var(--rail));margin-right:calc((100vw - 1560px) / 2)}
}

main{
  margin-left:0!important;
  margin-right:0!important;
  max-width:1560px!important;
  margin-inline:auto!important;
  padding-top:0!important;
}

@media print{
  .intro, .curve, .viewer{display:none!important}
  main{margin-left:0!important}
  html.js .rvf, html.js .rv{opacity:1!important;transform:none!important}
  .rvl .word, .rvl .char, .mlc b, .ml b{transform:none!important;opacity:1!important}
  section{break-inside:avoid;padding:18pt 0}
  .footer, .foot{background:none!important;color:#18160F!important}
}

/* explicit line breaks on desktop */
.footer .cinvite{max-width:none}

@media (max-width:900px){
  .footer .cinvite{max-width:38ch}
}

/* ---------- CHAPTER INDEX ---------- */
#percorso{position:relative}
.jindex{
  position:absolute;
  right:var(--gut);
  top:clamp(150px,20vw,260px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.2vw,16px);
  text-align:right;
}
.jindex a{
  font-family:var(--mono);
  font-size:clamp(9.5px,.85vw,11.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--soft);
  transition:color .3s ease;
}
.jindex a:hover{color:var(--bronze)}
.jindex a i{
  font-style:normal;
  font-family:var(--serif);
  font-size:1.25em;
  letter-spacing:0;
  color:var(--bronze);
  margin-right:14px;
  vertical-align:-.05em;
}

@media (max-width:860px){
  .jindex{display:none}
}

/* ---------- JOURNEY ---------- */
.segline{
  font-family:var(--mono);
  font-size:clamp(9.5px,.9vw,11.5px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:10px;
}
#percorso h1.h2+.lead{margin-top:clamp(26px,3.2vw,46px)}
.jlist{
  position:absolute;
  left:calc(var(--rail,66px) + clamp(16px,2.4vw,44px));
  bottom:clamp(6px,1.6vh,16px);
  max-width:none;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:clamp(9.5px,.9vw,11.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--soft);
  margin:0;
}
/* ---------- TEXT INTERLUDES ---------- */
.jch.jch--text{height:auto}
.jch--text .jfig{
  position:absolute;
  right:6vw;
  top:50%;
  transform:translateY(-50%);
  width:min(23vw,320px,34vh);
  margin:0;
  z-index:1;
}
.jch--text .jfig--land{width:min(30vw,420px,62vh)}
.jch--text .jfig .jpw{display:block;overflow:hidden}
.jch--text .jfig img{width:100%;height:auto;display:block}
.jch--text .jvp{
  height:auto;
  min-height:72vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.jch--text .jq{font-size:clamp(24px,3vw,44px);line-height:1.25;max-width:34ch}
/* chapters II-IV, text only */
.jch--lean .jvp{
  min-height:0;
  display:grid;
  grid-template-columns:clamp(160px,17vw,250px) minmax(0,1fr);
  column-gap:clamp(30px,5vw,84px);
  align-items:start;
  justify-content:start;
  padding:clamp(34px,5.6vh,66px) var(--gut) clamp(34px,5.6vh,66px) calc(var(--rail,66px) + clamp(16px,2.4vw,44px));
}
.jch--lean .jbg{display:none}
.jch--lean .jhead, .jch--text.jch--lean:nth-of-type(even) .jhead{
  position:static;
  grid-column:1;
  display:block;
  left:auto;
  right:auto;
  top:auto;
  align-self:start;
  text-align:left;
}
.jch--lean .jnum{display:block;font-size:clamp(26px,3.1vw,46px);line-height:1}
.jch--lean .jcty{display:block;margin-top:clamp(10px,1.4vh,16px)}
.jch--lean .jq, .jch--text.jch--lean:nth-of-type(even) .jq{
  position:static;
  grid-column:2;
  left:auto;
  bottom:auto;
  max-width:34ch;
  text-align:left;
  align-self:start;
  font-size:clamp(20px,2.2vw,32px);
  line-height:1.3;
}
.jch--text:nth-of-type(even) .jhead, .jch--text:nth-of-type(even) .jq, .jch--text:nth-of-type(even) .jlist{
  align-self:flex-end;
  text-align:right;
}
.jch--text:nth-of-type(even) .jq{max-width:30ch}

@media (max-width:760px){
  .jch--text .jvp{min-height:58vh}
  .jch--text:nth-of-type(even) .jhead, .jch--text:nth-of-type(even) .jq, .jch--text:nth-of-type(even) .jlist{
    align-self:flex-start;
    text-align:left;
  }
}

a.pfl, .jindex a{transition:color .3s ease}
a.pfl:hover, .jindex a:hover{color:var(--ink)}
/* percorso */
.jch{position:relative;height:230vh;padding:0!important;margin:0}
.jvp{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.jbg{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(110px,19vw,300px);
  line-height:.8;
  letter-spacing:-.02em;
  color:var(--line);
  white-space:nowrap;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.jhead{
  position:absolute;
  top:clamp(78px,11vh,120px);
  left:calc(var(--rail,66px) + clamp(16px,2.4vw,44px));
  right:var(--gut);
  display:flex;
  gap:18px;
  align-items:baseline;
  z-index:2;
}
.jnum{font-family:var(--serif);font-size:clamp(20px,2vw,28px);color:var(--bronze)}
.jcty{
  font-family:var(--mono);
  font-size:clamp(9.5px,.85vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--soft);
  line-height:1.8;
}
.jq{
  position:absolute;
  left:calc(var(--rail,66px) + clamp(16px,2.4vw,44px));
  bottom:clamp(30px,6vh,64px);
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(19px,1.9vw,27px);
  line-height:1.35;
  color:var(--ink);
  max-width:26ch;
  z-index:2;
}
.jp{position:absolute;margin:0;z-index:1}
.jpw{display:block;overflow:hidden}
.jp img{width:100%;height:auto;display:block}
.jcap{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--soft);
  margin-top:11px;
  line-height:1.55;
}
.jp1{right:6vw;top:14vh;width:min(37vw,560px)}
.jp2{left:8vw;bottom:31vh;width:min(23vw,350px)}
.jp3{left:36vw;top:14vh;width:min(16vw,250px)}
.jch[data-ch="1"] .jp1{right:10vw;top:18vh;width:min(40vw,600px)}
/* chapter V photos */
.jch[data-ch="5"] .jp:nth-of-type(1){left:auto;right:6vw;top:9vh;bottom:auto;width:min(29vw,440px)}
.jch[data-ch="5"] .jp:nth-of-type(2){left:auto;right:38vw;top:5vh;bottom:auto;width:min(15vw,225px)}
.jch[data-ch="5"] .jp:nth-of-type(3){left:auto;right:37vw;top:38vh;bottom:auto;width:min(16vw,240px)}
.jch[data-ch="5"] .jp:nth-of-type(4){left:auto;right:5vw;bottom:11vh;top:auto;width:min(20vw,305px)}
.jch[data-ch="5"] .jp:nth-of-type(5){left:8vw;right:auto;top:19vh;bottom:auto;width:min(15vw,225px)}
.jch[data-ch="5"] .jp:nth-of-type(6){left:47vw;right:auto;bottom:7vh;top:auto;width:min(17vw,255px)}
/* chapter VII ghost word */
.jch[data-ch="7"] .jbg{left:34%}
/* chapter VII photos */
.jch[data-ch="7"] .jp1{left:auto;right:7vw;top:13vh;bottom:auto;width:min(26vw,400px)}
.jch[data-ch="7"] .jp2{left:34vw;right:auto;top:10vh;bottom:auto;width:min(24vw,360px)}
.jch[data-ch="7"] .jp3{left:38vw;right:auto;bottom:8vh;top:auto;width:min(17vw,255px)}
/* chapter VIII photos */
.jch[data-ch="8"] .jp1{left:auto;right:5vw;top:8vh;bottom:auto;width:min(24vw,360px)}
.jch[data-ch="8"] .jp2{left:34vw;right:auto;bottom:38vh;top:auto;width:min(17vw,255px)}
.jch[data-ch="8"] .jp3{left:55vw;right:auto;bottom:33vh;top:auto;width:min(13vw,190px)}
.jtail{padding:0!important;height:0}
html.js .jhead, html.js .jq{opacity:0;transform:translateY(18px)}
html.js .jvp.on .jhead, html.js .jvp.on .jq{
  opacity:1;
  transform:none;
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
html.js .jvp.on .jq{transition-delay:.15s}

@media (max-width:899px), (prefers-reduced-motion:reduce){
  .jch{height:auto;padding:clamp(40px,8vw,70px) var(--gut) 0!important}
  .jvp{position:static;height:auto;overflow:visible}
  .jbg, .jch--lean .jbg{
    position:static;
    transform:none;
    left:auto;
    bottom:auto;
    white-space:normal;
    display:block;
    font-size:clamp(56px,15vw,120px)!important;
    line-height:.98;
    color:var(--line2);
    margin:8px 0 14px;
  }
  .jch--lean .jvp{min-height:0;display:block;padding:0}
  .jch--lean .jhead, .jch--lean .jq{top:auto;bottom:auto;grid-column:auto}
  .jch--lean .jhead{margin:0 0 12px}
  .jhead{position:static;margin:0 0 4px}
  .jq{position:static;max-width:34ch;margin:10px 0 26px}
  .jch--text .jfig, .jch--text .jfig--land{position:static;transform:none;width:100%;margin:0 0 20px}
  .jlist{position:static;bottom:auto;left:auto;white-space:normal;margin:2px 0 0}
  .jp{position:static;width:100%!important;margin:0 0 22px}
  html.js .jhead, html.js .jq{opacity:1;transform:none}
}