/* The portrait remains still while the artist's words move below it. */
#jess-view.jess-view{
  --jess-text-top:54dvh;
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--paper);
}
#jess-view .jess-page{position:absolute;inset:0;overflow:hidden;isolation:isolate}
#jess-view .jess-portrait{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:auto;
  max-height:72dvh;
  aspect-ratio:1122/1402;
  margin:0 auto;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 0%,#000 57%,#0009 73%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 57%,#0009 73%,transparent 100%);
}
#jess-view .jess-portrait img{
  display:block;
  width:auto;
  max-width:100%;
  height:100%;
  margin:0 auto;
  object-fit:contain;
  object-position:center top;
}
#jess-view .jess-text-region{
  position:absolute;
  top:var(--jess-text-top);
  bottom:0;
  left:0;
  right:0;
  z-index:1;
}
#jess-view .jess-scroll{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:#ccc transparent;
  -webkit-mask-image:linear-gradient(transparent,#000 46px);
  mask-image:linear-gradient(transparent,#000 46px);
}
#jess-view .jess-text-region::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:52px;
  z-index:2;
  pointer-events:none;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(transparent,#000 30%,transparent);
  mask-image:linear-gradient(transparent,#000 30%,transparent);
}
#jess-view .jess-statement{
  width:min(610px,calc(100% - 64px));
  margin:0 auto;
  padding:46px 0 max(120px,calc(env(safe-area-inset-bottom) + 100px));
  font-size:16px;
  line-height:1.85;
  letter-spacing:-.015em;
  color:var(--ink);
}
#jess-view .jess-statement>p{margin:0 0 25px}
#jess-view .jess-statement>.jess-signature{margin:40px auto 4px;text-align:center}
#jess-view .jess-signature img{display:block;width:100px;height:115px;object-fit:contain;margin:0 auto}
body.jess-mode .site-header{opacity:0;pointer-events:none}
body.jess-mode .site-header>*{pointer-events:none}
body.jess-mode .space-hint{visibility:hidden}
body.jess-mode .top-view-switch.view-switch button{color:#000;text-shadow:0 0 2px #fff,0 1px 3px #ffffffb3}
body.jess-mode .view-indicator{background:#000}
@media(max-width:700px){
  #jess-view.jess-view{--jess-text-top:48dvh}
  #jess-view .jess-statement{width:calc(100% - 48px);font-size:15px;line-height:1.85;padding-top:40px}
  #jess-view .jess-scroll{-webkit-mask-image:linear-gradient(transparent,#000 38px);mask-image:linear-gradient(transparent,#000 38px)}
  #jess-view .jess-text-region::before{height:42px}
  #jess-view .jess-statement>.jess-signature{margin-top:32px}
  #jess-view .jess-signature img{width:82px;height:94px}
}
/* Explicit geometry avoids an intrinsic image/auto-height sizing dependency. */
@media(max-width:900px){
  #jess-view .jess-portrait{
    left:0;
    right:0;
    width:100%;
    height:min(124.956vw,65vh);
    height:min(124.956vw,65dvh);
    max-height:none;
    aspect-ratio:auto;
    margin:0;
  }
  #jess-view .jess-portrait img{display:block;width:100%;max-width:none;height:100%;margin:0;object-fit:cover}
}
/* Keep the neck clear as Safari's visible viewport grows and shrinks. */
@media(max-width:900px) and (orientation:portrait){
  #jess-view.jess-view{
    --jess-text-top:min(max(min(106.2126vw,55.25vh),89vw),calc(100vh - 202px));
    --jess-text-top:min(max(min(106.2126vw,55.25dvh),89vw),calc(100dvh - 202px));
  }
  #jess-view .jess-portrait{
    -webkit-mask-image:linear-gradient(#000 0%,#000 min(88vw,calc(100% - 16px)),transparent 100%);
    mask-image:linear-gradient(#000 0%,#000 min(88vw,calc(100% - 16px)),transparent 100%);
  }
}
@media(max-height:550px) and (orientation:landscape){
  #jess-view.jess-view{--jess-text-top:24dvh}
  #jess-view .jess-portrait{left:3vw;right:auto;width:42vw;height:100dvh;max-height:none;aspect-ratio:auto;margin:0}
  #jess-view .jess-portrait img{position:static;inset:auto;width:auto;max-width:100%;height:100%;margin:0 auto;object-fit:contain;object-position:left top}
  #jess-view .jess-text-region{left:43%;right:5%;top:30px}
  #jess-view .jess-statement{width:100%;font-size:14px;padding-top:38px}
}

/* Desktop gives the still portrait and the scrolling statement their own space. */
@media(min-width:901px) and (min-height:551px){
  #jess-view .jess-portrait{
    top:4dvh;
    left:4vw;
    right:auto;
    width:min(44vw,calc(80dvh - 89.6px));
    height:calc(100dvh - 112px);
    max-height:none;
    aspect-ratio:auto;
    margin:0;
    -webkit-mask-image:linear-gradient(#000 0%,#000 73%,#000b 87%,transparent 100%);
    mask-image:linear-gradient(#000 0%,#000 73%,#000b 87%,transparent 100%);
  }
  #jess-view .jess-portrait img{
    width:100%;
    max-width:none;
    height:100%;
    object-fit:contain;
    object-position:center top;
  }
  #jess-view .jess-text-region{
    top:6dvh;
    left:54%;
    right:6vw;
  }
  #jess-view .jess-statement{
    width:min(620px,100%);
    margin:0 auto;
    padding-top:46px;
    font-size:16px;
    line-height:1.85;
  }
  #jess-view .jess-statement>.jess-signature{margin-top:42px}
}