/* Current desktop materials for fine-pointer windows outside the approved presets. */

html.narrow-desktop .work { height: 100svh; padding-top: 55px; padding-bottom: 25px; overflow: hidden; }
html.narrow-desktop .work .work-topline { margin-top: 5px; }
html.narrow-desktop .work .studio-board,
html.narrow-desktop .work.board-complete .studio-board { height: calc(100svh - 570px); }
html.narrow-desktop .work .print { width: 24%; }
html.narrow-desktop .work .print img,
html.narrow-desktop .work .amenity-art { height: 16.67svh; }
html.narrow-desktop .work .print[data-id="elevated"] { width: 26.5%; }
html.narrow-desktop .work .print[data-id="elevated"] img { height: 18.52svh; }
html.narrow-desktop .work .print[data-id="amenity"] { width: 21%; }
html.narrow-desktop .work .print[data-id="amenity"] img { height: 14.35svh; }
html.narrow-desktop .work .dealer-card { width: 19%; }
html.narrow-desktop .work .dealer-face { height: 10.93svh; }
html.narrow-desktop .work .tablet-object { width: 22%; }
html.narrow-desktop .work .tablet-label { margin-top: 10px; font-size: 16px; }
html.narrow-desktop .work .tablet-hint { margin-top: 3px; }
html.narrow-desktop .work .simplify-line { position: absolute; left: 4%; top: 25%; margin: 0; }
html.narrow-desktop .work .board-drag-note { top: calc(clamp(-104px, -7vw, -76px) + 6svh); }
html.narrow-desktop .work.board-complete .print,
html.narrow-desktop .work.board-complete .print[data-id="amenity"],
html.narrow-desktop .work.board-complete .print[data-id="elevated"],
html.narrow-desktop .work.board-complete .dealer-card { width: 17.5%; height: 21.3svh; }
html.narrow-desktop .work.board-complete .print img,
html.narrow-desktop .work.board-complete .print[data-id="amenity"] img,
html.narrow-desktop .work.board-complete .print[data-id="elevated"] img,
html.narrow-desktop .work.board-complete .amenity-art { height: 15.93svh; }


html.narrow-desktop.board-start-preview .work .work-intro h2 { margin-bottom: 24px; }
html.narrow-desktop.board-start-preview .work .simplify-line {
    top: auto; bottom: 50px; font-size: clamp(96px, 8.33vw, 140px);
    display: grid; grid-template-columns: auto 1fr; justify-items: start; column-gap: .22em; row-gap: .3em;
  }
html.narrow-desktop.board-start-preview .work .simplify-changing,
html.narrow-desktop.board-start-preview .work .simplify-play { grid-column: 1 / -1; }
html.narrow-desktop.board-start-preview .work .simplify-caret { width: .03em; height: .78em; opacity: .5; }
html.narrow-desktop.board-start-preview .work .number:not(.matched),
html.narrow-desktop.board-start-preview .work .number.selected { color: #ff8a7a; outline-color: #ff8a7a; }
html.narrow-desktop.board-start-preview .work .number:not(.matched) { font-size: 32px; font-weight: 600; letter-spacing: -.03em; text-shadow: 0 3px 8px #0003; }
html.narrow-desktop.board-start-preview .work .number:not(.matched) small { font-size: 11px; font-weight: 600; margin-top: 4px; }
html.narrow-desktop.board-start-preview .work .wrong-shake { animation: wrong-shake 420ms cubic-bezier(.36,.07,.19,.97); }
html.narrow-desktop.board-start-preview .work .annotation-final { width: 540px; }
html.narrow-desktop.board-start-preview .work .print:not(.dealer-card) .project::before { content: "Pictured: "; }
html.narrow-desktop.board-start-preview .work.board-complete .tablet-object {
    transition: left 2400ms cubic-bezier(.45,0,.2,1) 900ms, top 2400ms cubic-bezier(.45,0,.2,1) 900ms, transform 1050ms cubic-bezier(.2,.8,.2,1);
  }
html.narrow-desktop.board-start-preview .work.board-complete .tablet-object.dragging,
html.narrow-desktop.board-start-preview .work.board-complete.film-settled .tablet-object {
    transition: none;
  }
html.narrow-desktop.board-start-preview .work .board-drag-note:not(.board-drag-note-split) { display: none; }
html.narrow-desktop.board-start-preview .work .board-drag-note-split {
    display: block; overflow: visible; width: 280px; top: auto; left: auto; z-index: 8;
  }


html.narrow-desktop.board-start-preview .work .coffee-invite { display: flex; position: absolute; z-index: 3; visibility: hidden; }
html.narrow-desktop.board-start-preview .work.board-complete .coffee-invite { visibility: visible; }


html.narrow-desktop header { height: 48px; }
html.narrow-desktop .hero {
 height: calc(100svh - 48px); min-height: calc(100vw * 1024 / 1860);
 top: min(0px, calc(100svh - 48px - 100vw * 1024 / 1860));
}
html.narrow-desktop .hero .hero-image { transform: none; object-position: right top; }
html.narrow-desktop .hero h1 { left: 40%; top: 12%; font-size: clamp(18px, 1.65vw, 24px); font-weight: 500; color: #171815; }
html.narrow-desktop .hero-name { display: inline-block; transition: color .22s, transform .22s; }
html.narrow-desktop .hero-name:hover, html.narrow-desktop .hero-name.is-selected { color: #234b74; transform: translateX(7px); }
html.narrow-desktop .hero .roles { left: 8%; top: 34%; bottom: auto; font-size: clamp(48px, 5.3vw, 85px); }
html.narrow-desktop .work { min-height: 700px; height: max(700px, 100svh); }
html.narrow-desktop .work .simplify-line { font-size: clamp(68px, 7vw, 110px); width: 38%; }
html.narrow-desktop .work .print:not(.dealer-card) .project { font-size: clamp(8px, .8vw, 11px); }
html.narrow-desktop .work .print h3 { font-size: clamp(11px, 1.05vw, 15px); }
html.narrow-desktop .work .annotation-final { left: 44.5%; width: 48%; }
html.narrow-desktop .work .coffee-invite { gap: 12px; }
html.narrow-desktop .coffee-invite .coffee-prompt { font-size: clamp(30px, 3.2vw, 45px); }
html.narrow-desktop .portrait-panel-hold { display: block; height: 25svh; pointer-events: none; }
html.narrow-desktop .work .annotation-original { width: 38%; }
html.narrow-desktop .work .studio-board,
html.narrow-desktop .work.board-complete .studio-board { height: max(80px, calc(100svh - 570px)); }
html.narrow-desktop .work.board-complete .print img,
html.narrow-desktop .work.board-complete .print[data-id="amenity"] img,
html.narrow-desktop .work.board-complete .print[data-id="elevated"] img { height: max(55px, calc(21.3svh - 68px)); }

html.narrow-desktop .work.board-complete .print img,
html.narrow-desktop .work.board-complete .print[data-id="amenity"] img,
html.narrow-desktop .work.board-complete .print[data-id="elevated"] img { height: calc(100% - 68px); }
@media (max-width: 1000px) {
 html.narrow-desktop .work { height: max(1100px, 100svh); min-height: 1100px; }
 html.narrow-desktop .work .print { width: 25%; }
 html.narrow-desktop .hero h1 { left: 34%; }
 html.narrow-desktop .hero .roles { font-size: 5.3vw; left: 4%; }
 html.narrow-desktop .work .simplify-line { font-size: 6.5vw; }
 html.narrow-desktop .work .annotation-original { width: 42%; }
 html.narrow-desktop .work .annotation-final { width: 42%; }
 html.narrow-desktop .work.board-complete .coffee-invite { gap: 8px; }
 html.narrow-desktop .coffee-invite .coffee-art { height: 190px; }
 html.narrow-desktop .coffee-invite .coffee-prompt { font-size: 30px; }
}
html.narrow-desktop .work .annotation-final { top: 20px !important; left: 34% !important; width: 45%; }
@media (max-width: 1000px) {
 html.narrow-desktop .work { top: min(0px, calc(100svh - max(1100px, 100svh))); }
 html.narrow-desktop .work .annotation-final { left: 42% !important; width: 52% !important; max-width: 52%; }
}

html.narrow-desktop .work .annotation-final img { width: 100%; max-width: 100%; }
html.narrow-desktop .work .annotation-final { margin-left: 0; }