/* 03. work — prints on a line (js/work-line.js). Units are design px of the
   stage frame: 1672 x 941 on desktop, 530 x 941 on phones. */
#work .wk{z-index:5}
#work .ln-cta svg{width:.9em;height:.9em;flex:none;vertical-align:-.08em}

/* =================================================================== *
 *  1. prints on a line
 * =================================================================== */
#work .wk-line{left:0;top:0;width:100%;height:100%;pointer-events:none}
#work .wk-line > *{pointer-events:auto}
#work .ln-view{position:absolute;left:calc(50% - 50vw);width:100vw;top:calc(262 * var(--u));
  height:calc(500 * var(--u));overflow:hidden;touch-action:pan-y}
#work .ln-track{position:relative;display:flex;align-items:flex-start;gap:calc(92 * var(--u));width:max-content;height:100%;
  padding:calc(52 * var(--u)) calc((100vw - var(--stage-w)) / 2 + 150 * var(--u)) 0;will-change:transform}
#work .ln-string{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#work .ln-string path{fill:none;stroke:#5E4430;stroke-width:2.2;opacity:.85}
#work .ln-print{position:relative;flex:none;display:block;width:calc(272 * var(--u));text-decoration:none;color:inherit;
  transform-origin:50% 0;transform:rotate(var(--sway, 0deg));-webkit-user-drag:none;user-select:none}
#work .peg{position:absolute;left:50%;top:calc(-28 * var(--u));z-index:2;width:calc(15 * var(--u));height:calc(50 * var(--u));
  transform:translateX(-50%);border-radius:calc(3 * var(--u));
  background:linear-gradient(90deg,#B98D63 0%,#D9B48C 45%,#B98D63 52%,#CFA87E 100%);
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(70,46,24,.3)}
#work .peg::after{content:"";position:absolute;left:-12%;right:-12%;top:38%;height:calc(4 * var(--u));border-radius:2px;
  background:linear-gradient(180deg,#9A9A96,#6E6E6A)}
#work .ln-paper{display:block;padding:calc(13 * var(--u)) calc(13 * var(--u)) 0;background:#FBF6EC;border-radius:2px;
  box-shadow:0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(92,66,32,.20),0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(92,66,32,.16);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease}
#work .ln-paper img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#E9DCC6}
#work .ln-cap{display:block;position:relative;height:calc(84 * var(--u));padding-top:calc(9 * var(--u))}
#work .ln-cap b{display:block;font-family:var(--hand);font-weight:600;font-size:calc(28 * var(--u));line-height:1.05;color:#20170D}
#work .ln-cap em{display:block;font-style:normal;font-family:var(--mono);font-size:max(var(--mt,0px), calc(11 * var(--u)));letter-spacing:.12em;
  text-transform:uppercase;color:#7A6A55;margin-top:calc(6 * var(--u));transition:opacity .3s ease,transform .35s ease}
#work .ln-cta{position:absolute;left:0;bottom:calc(14 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));
  font-family:var(--mono);font-size:max(var(--mt,0px), calc(11 * var(--u)));letter-spacing:.1em;text-transform:uppercase;color:#A8432A;
  opacity:0;transform:translateY(calc(6 * var(--u)));transition:opacity .3s ease,transform .35s ease}
#work .ln-print:focus-visible{outline:none}
#work .ln-print:focus-visible .ln-paper{outline:2px solid var(--accent);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  #work .ln-print:hover .ln-paper{transform:translateY(calc(-10 * var(--u))) rotate(calc(var(--sway, 0deg) * -1)) scale(1.03);
    box-shadow:0 calc(24 * var(--u)) calc(40 * var(--u)) rgba(92,66,32,.26),0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(92,66,32,.16)}
  #work .ln-print:hover .ln-cta{opacity:1;transform:none}
  #work .ln-print:hover .ln-cap em{opacity:0;transform:translateY(calc(-4 * var(--u)))}
}
#work .ln-progress{position:absolute;left:calc(150 * var(--u));top:calc(800 * var(--u));width:calc(220 * var(--u));
  height:calc(1.6 * var(--u));background:rgba(60,44,30,.16)}
#work .ln-progress i{display:block;height:100%;background:#A8432A;transform-origin:0 50%;transform:scaleX(.08)}
#work .ln-count{position:absolute;left:calc(387 * var(--u));top:calc(791 * var(--u));font-family:var(--mono);
  font-size:max(var(--mt,0px), calc(11.5 * var(--u)));letter-spacing:.16em;color:#7A6A55}
#work .ln-count b{color:#2B2115;font-weight:600}
#work .ln-hint{left:calc(1150 * var(--u));top:calc(786 * var(--u));font-size:calc(21 * var(--u));transform:rotate(-3deg);
  transition:opacity .5s ease}
#work .ln-hint.off{opacity:0}

/* pinned at every size: the band holds still while the page scroll moves the line */
main > section.trim#work[data-variant="line"]{overflow:clip;
  height:calc((var(--view) + var(--band)) / 2 + var(--cb) * var(--u) + var(--extra, 0px)) !important}
main > section.trim#work[data-variant="line"] > .stage{position:sticky !important;left:auto !important;
  transform:none !important;margin:calc((var(--view) - var(--band)) / 2 - var(--ct) * var(--u)) auto 0;
  top:calc((100svh - var(--band)) / 2 - var(--ct) * var(--u)) !important}

@media (max-width:860px){
  /* line: same pinned behaviour, sized for the narrow frame */
  #work .ln-view{top:calc(292 * var(--u));height:calc(476 * var(--u))}
  #work .ln-track{gap:calc(44 * var(--u));padding:calc(48 * var(--u)) calc((100vw - var(--stage-w)) / 2 + 48 * var(--u)) 0}
  #work .ln-print{width:calc(232 * var(--u))}
  #work .ln-cap{height:calc(86 * var(--u))}
  #work .ln-cap b{font-size:calc(26 * var(--u))}
  #work .ln-cap em{font-size:max(var(--mt,0px), calc(10.5 * var(--u)))}
  #work .ln-cta{opacity:1;transform:none;font-size:max(var(--mt,0px), calc(10 * var(--u)));bottom:calc(10 * var(--u))}
  #work .ln-cap em{display:none}
  #work .ln-progress{left:calc(48 * var(--u));top:calc(746 * var(--u));width:calc(150 * var(--u))}
  #work .ln-count{left:calc(212 * var(--u));top:calc(737 * var(--u));font-size:max(var(--mt,0px), calc(11 * var(--u)))}
  #work .ln-hint{left:calc(330 * var(--u));top:calc(730 * var(--u));font-size:calc(18 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  #work .ln-paper{transition:none}
}