/* A pen, a route, a little give. These layers never own page layout. */
.hero-copy{pointer-events:auto}
.journey-line{touch-action:auto}
.story-pen-trace{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20;overflow:hidden;contain:strict}
.story-pen-trace path{fill:none;stroke:var(--red);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.story-pen-trace.on-scarlet path{stroke:var(--cream)}
body.modal-open .story-pen-trace,body.workshop-details-open .story-pen-trace{visibility:hidden}
.hero-photos .photo-frame::after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid var(--red);opacity:0;clip-path:polygon(0 0,22px 0,22px 1px,1px 1px,1px 22px,0 22px,0 0,100% 100%,calc(100% - 22px) 100%,calc(100% - 22px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 22px),100% calc(100% - 22px),100% 100%);transition:opacity .35s ease}
.hero-photos .photo-frame:hover::after{opacity:.9}
.detail-preparation{font-size:12px;line-height:1.5;margin:-6px 0 22px;padding:0 0 0 13px;border-left:1px solid var(--red);max-width:34em;color:#40594c}
@media(hover:hover) and (pointer:fine){
  body{cursor:url('/assets/story-pen.svg') 3 3,auto}
  a,button,summary,[role="button"],button *,a *,summary *{cursor:url('/assets/story-point.svg') 5 5,pointer}
  p,h1,h2,h3,label,li,dt,dd,input,textarea,[contenteditable="true"]{cursor:text}
  select{cursor:pointer}
  input:disabled,button:disabled{cursor:not-allowed}
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){
  .story-pen-trace{display:none}
  .hero-photos .photo-frame::after{display:none}
}
@media(forced-colors:active){body,a,button,summary,[role="button"],button *,a *,summary *{cursor:auto}}