/* S1: seven objects on a single cutting mat. Artwork and labels share each object's box. */
.desk-section{max-width:1600px;margin:auto;padding:0 40px 40px}
.desk-caption{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:13px}
.desk-caption p+p{margin:0;color:var(--muted)}
.desk-caption p:first-child span{display:inline-block;white-space:nowrap}
.work-desk{position:relative;isolation:isolate;max-width:1360px;margin:auto;height:650px;background:var(--green);border:12px solid var(--wood);border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 1.5px var(--ink)}
.cutting-mat{position:absolute;inset:0;z-index:-1;pointer-events:none}
.desk-object{position:absolute;filter:drop-shadow(4px 6px 0 rgb(30 35 33 / .08));transition:translate var(--motion);text-decoration:none;transform-origin:center}
.desk-object:is(a,button):hover{translate:0 -4px}
.desk-object:is(a,button):active{translate:0 -1px}
.desk-object:focus-visible{outline-color:var(--paper);border-radius:4px}
.object-art{width:100%;height:100%;pointer-events:none}

/* Sketchbook */
.notebook{left:25%;top:5%;width:47%;height:54%;background:var(--paper);border:var(--line);border-radius:4px 12px 12px 4px;rotate:-2deg;display:flex}
.notebook::before{content:'';position:absolute;inset:5px -6px -6px 6px;background:var(--wall);border:var(--line);border-radius:inherit;z-index:-1}
.notebook-binding{width:28px;flex-shrink:0;border-right:1px solid var(--muted);background:repeating-linear-gradient(to bottom,transparent 0 19px,var(--ink) 19px 21px,transparent 21px 28px);margin:-0px 0 12px -7px;margin-top:12px}
.notebook-page{padding:20px 24px;width:100%;position:relative}
.notebook-label{font-size:12px;color:var(--green);letter-spacing:.04em}
.notebook h1{font-size:clamp(28px,3.3vw,44px);font-weight:700;letter-spacing:-.065em;line-height:1.55;margin-top:10px;white-space:nowrap}
.notebook-copy{margin-top:10px;font-size:16px;line-height:1.7}
.page-sketch{width:66%;height:32px;margin-top:12px;color:var(--green)}
.page-turn{border:0;background:var(--wall);border-left:var(--line);border-top:var(--line);padding:8px 12px;position:absolute;right:0;bottom:0;font-size:12px;border-radius:12px 0 8px 0;min-height:40px}
.page-turn span+span{display:inline-block;margin-left:8px;font-size:18px}
.page-turn:hover{background:var(--wood)}
.notebook.is-active .notebook-page{animation:paper-turn 320ms ease}

/* The request is a real paper box, rather than text on an independently scaled SVG. */
.request{left:3%;top:59%;width:30%;height:226px;background:var(--paper);border:var(--line);rotate:-3deg;border-bottom:9px solid var(--green)}
.request::before{content:'';position:absolute;inset:6px -6px -10px 6px;background:var(--wall);border:var(--line);z-index:-1}
.request-clip{z-index:2;position:absolute;left:14px;top:-16px;width:30px;height:54px}
.request .entrance-copy{position:relative;z-index:1;background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:8px;height:100%;color:var(--green)}
.request .object-caption{font-size:13px;padding-left:20px}
.request strong{font-size:clamp(24px,2.4vw,32px);line-height:1.4;letter-spacing:-.06em;white-space:nowrap}
.request-rule{display:block;border-top:1.5px solid var(--green);width:100%;margin-top:0}
.request .entrance-note{font-size:12px;color:var(--ink);line-height:1.7}
.entrance strong>span{display:inline-block;margin-left:8px;transition:translate var(--motion)}
.entrance:hover strong>span{translate:3px -3px}
.entry-break{display:none}
.toolbox{right:3%;top:54%;width:26%;aspect-ratio:320/252;rotate:2deg}
.toolbox .object-art{display:block;width:100%;height:auto}
.toolbox-label{position:absolute;left:8%;right:8%;top:31%;padding:4px 8px;border:var(--line);background:var(--paper);color:var(--orange-text);font-size:12px;line-height:1.5}
.tiny-badge{display:inline-block;font-size:12px;border-left:1px solid currentColor;padding-left:6px;margin-left:6px}
.toolbox .entrance-copy{position:absolute;left:6%;right:6%;top:59%;bottom:11%;background:var(--orange-text);color:var(--paper);padding:8px 16px;display:flex;align-items:center}
.toolbox strong{font-size:clamp(18px,1.7vw,23px);line-height:1.35;letter-spacing:-.055em;white-space:nowrap}

/* The other four objects and their permanent touch labels */
.object-button{border:0;background:transparent;padding:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center}
.phone{left:5%;top:7%;width:13%;height:214px;rotate:-5deg}
.mug{right:7%;top:5%;width:15%;height:180px;rotate:3deg}
.ruler{left:37%;top:62%;width:28%;height:62px;rotate:-3deg}
.business-card{left:38%;top:80%;width:29%;height:80px;rotate:2deg}
.touch-tag{display:block;white-space:nowrap;font-size:12px;line-height:1.5;border:var(--line);border-radius:20px;background:var(--paper);padding:5px 10px;position:absolute;bottom:-24px;color:var(--ink)}
.touch-tag>span{font-size:16px;margin-left:4px}
.phone .touch-tag{bottom:-25px}
.mug .touch-tag{bottom:-10px}
.ruler .touch-tag{bottom:-25px}
.business-card .touch-tag{bottom:-27px}
.first-touch-hint{display:none}
.phone.is-active .phone-menu{fill:var(--mint);animation:menu-press 280ms ease}
.steam{opacity:0;transition:opacity var(--motion)}
.mug.is-active .steam{opacity:1;animation:steam-rise 360ms ease-out}
.ruler-measure{transform-origin:20px 46px}
.ruler.is-active .ruler-measure{animation:measure 360ms ease}
.card-face{position:relative;border:var(--line);padding:12px 16px 12px 66px;background:var(--paper);width:100%;height:80px;display:flex;flex-direction:column;align-items:start;justify-content:center;line-height:1.7;text-align:left}
.card-face strong{font-size:17px;letter-spacing:-.04em;white-space:nowrap}
.card-face>span:not(.card-mark){font-size:12px}
.card-mark{position:absolute;left:20px;top:24px;font-size:30px;color:var(--green);font-weight:700;line-height:1}
.card-mark span{font-size:16px;position:absolute;right:-9px;top:-3px}
.card-reverse{display:none}
.business-card.is-active .card-face{background:var(--wood);animation:card-flip 320ms ease}
.business-card.is-active .card-reverse{display:block}
.business-card.is-active .card-face>span:nth-of-type(2){display:none}
.mobile-touch-hint{position:absolute;bottom:18px;left:24px;color:var(--paper);font-size:12px;margin:0}
.desk-instruction{font-size:14px;text-align:center;color:var(--muted);padding:24px 0 0}

/* A native modal gives one announced answer, a close button, Escape, and focus return. */
.desk-answer{position:fixed;margin:0;padding:24px;width:360px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);background:var(--paper);color:var(--ink);border:var(--line);box-shadow:6px 8px 0 rgb(30 35 33 / .16);overflow:auto;left:calc(50% - 180px);top:240px}
.desk-answer:not([open]){display:none}
.desk-answer[open]{display:flex;flex-direction:column;gap:12px}
.desk-answer::backdrop{background:rgb(30 35 33 / .12)}
.answer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--green);border-bottom:1px solid var(--muted);padding-bottom:8px}
#answer-close{border:0;background:transparent;padding:6px 8px;font-size:14px;min-height:40px;font-weight:700;white-space:nowrap}
#answer-close span{font-size:22px;margin-left:8px}
#answer-title{font-size:22px;line-height:1.5;text-align:left;text-wrap:initial}
#answer-copy{font-size:16px;line-height:1.75;margin:0}
#answer-link{font-size:14px;font-weight:700;color:var(--green);padding:8px 0}
.answer-for-phone{left:max(80px,21vw);top:240px}
.answer-for-mug{left:auto;right:max(60px,17vw);top:240px}
.answer-for-ruler{left:35vw;top:320px}
.answer-for-card{left:35vw;top:350px}
.desk-answer[open]{animation:paper-note 240ms ease-out}
.object-reply{position:absolute;bottom:100%;left:50%;translate:-50% 0;background:var(--paper);color:var(--ink);border:var(--line);border-radius:4px;padding:6px 10px;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:none}
.business-card .object-reply,.notebook .object-reply,.phone .object-reply,.ruler .object-reply{display:none}
.mug .object-reply{bottom:92%}
.static-facts{padding-top:32px;padding-bottom:32px}
.static-facts h2{font-size:24px}
.intermediate-note{margin-top:0;margin-bottom:56px;font-size:14px;border-top:1px dashed var(--muted);padding-top:24px!important;color:var(--muted)}
.intermediate-note p{margin-top:8px}

@keyframes paper-turn{45%{translate:5px -4px;rotate:2deg}}
@keyframes menu-press{50%{translate:0 3px}}
@keyframes steam-rise{from{translate:0 8px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes measure{from{scale:.12 1}to{scale:1 1}}
@keyframes card-flip{45%{translate:0 -6px;rotate:-3deg}}
@keyframes paper-note{from{translate:0 6px;opacity:.6}to{translate:0 0;opacity:1}}
.motion-paused .desk-object:is(a,button):hover,.motion-paused .entrance:hover strong>span{translate:none}
body:not(.has-js) .work-desk .object-button{pointer-events:none;cursor:default;opacity:1}
body:not(.has-js) .touch-tag,body:not(.has-js) .first-touch-hint{display:none!important}
@media(prefers-reduced-motion:reduce){.desk-object:is(a,button):hover,.entrance:hover strong>span{translate:none}}
@media(max-width:1199px){
  .desk-section{padding-left:24px;padding-right:24px}
  .notebook-page{padding:20px 18px}
  .notebook-copy{font-size:14px}
  .request .entrance-copy{padding:22px 18px;gap:8px}
  .request .object-caption{font-size:12px}
  .request strong{font-size:27px}
  .toolbox .entrance-copy{padding:8px 16px}
  .toolbox strong{font-size:18px}
  .card-face{padding-left:54px;padding-right:12px}
  .card-face strong{font-size:15px}
  .card-mark{left:14px}
}
@media(min-width:600px) and (max-width:899px){
  .work-desk{height:650px}
  .notebook{left:24%;width:49%}
  .notebook h1{font-size:29px}
  .notebook-binding{width:22px}
  .notebook-page{padding:20px 14px}
  .notebook-copy{font-size:14px}
  .phone{left:3%;width:16%;height:192px;top:10%}
  .phone .touch-tag{white-space:normal;min-width:120px}
  .mug{right:2%;width:21%;height:154px}
  .mug .touch-tag{min-width:120px}
  .request{left:2%;width:31%;height:222px;top:59%}
  .request .entrance-copy{padding:24px 14px;gap:6px}
  .request .object-caption{padding-left:14px;letter-spacing:-.04em}
  .request strong{font-size:21px}
  .request .entrance-note{font-size:12px}
  .toolbox{right:1%;width:29%;top:57%}
  .toolbox-label{font-size:12px;line-height:1.3;left:6%;right:6%;padding:3px}
  .tiny-badge{border:0;padding:0;margin:0}
  .toolbox .entrance-copy{left:5%;right:5%;top:59%;bottom:9%;padding:4px 16px}
  .toolbox strong{font-size:14px;letter-spacing:-.06em}
  .toolbox strong>span{margin-left:4px}
  .business-card{left:38%;width:29%;top:80%;height:82px}
  .card-face{padding:10px 8px 10px 42px;height:82px}
  .card-face strong{font-size:13px}
  .card-mark{left:9px;font-size:25px}
  .ruler{left:36%;width:30%;top:62%;height:58px}
}
@media(max-width:599px){
  .desk-section{padding:0 16px 32px}
  .desk-caption{display:block;padding:14px 0 16px;font-size:12px}
  .desk-caption p:first-child{white-space:nowrap}
  .desk-caption p+p{display:none}
  .work-desk{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:16px 14px 24px;border-width:6px;align-items:center}
  .desk-object{position:relative;inset:auto!important;width:100%!important;height:auto!important}
  .notebook{grid-column:1/-1;grid-row:1;width:96%!important;height:232px!important;justify-self:center;rotate:-2deg}
  .notebook-binding{width:20px;margin-left:-6px}
  .notebook-page{padding:16px 14px}
  .notebook-label{font-size:12px}
  .notebook h1{font-size:30px;line-height:1.6;margin-top:8px}
  .notebook-copy{font-size:13px;margin-top:8px;line-height:1.6}
  .page-sketch{width:52%;height:25px;margin-top:8px}
  .page-turn{font-size:12px;padding:4px 8px;min-height:36px}
  .page-turn span+span{font-size:16px;margin-left:4px}
  .entrance{grid-row:2;align-self:center}
  .request{height:184px!important;border-bottom-width:6px;rotate:-2deg}
  .request .entrance-copy{padding:20px 12px 12px;gap:6px}
  .request .object-caption{font-size:12px;white-space:nowrap;padding-left:0;letter-spacing:-.06em}
  .request strong{font-size:24px;line-height:1.25;white-space:nowrap}
  .request-clip{width:23px;height:40px;left:8px;top:-14px}
  .request-rule{margin-top:0}
  .request .entrance-note{font-size:12px;line-height:1.5;letter-spacing:-.04em;white-space:nowrap}
  .entry-break{display:initial}
  .toolbox{height:184px!important;aspect-ratio:auto;rotate:2deg}
  .toolbox .object-art{width:100%;height:100%;position:absolute;inset:0}
  .toolbox-label{top:22%;left:8%;right:8%;padding:4px 8px;line-height:1.4;font-size:12px}
  .tiny-badge{padding:0;margin:0;border:0}
  .toolbox .entrance-copy{left:5%;right:5%;top:50%;bottom:6%;padding:8px 16px;align-items:flex-start}
  .toolbox strong{font-size:18px;line-height:1.3;letter-spacing:-.05em}
  .toolbox strong>span{position:absolute;right:16px;bottom:10px;margin:0;font-size:16px;line-height:1}
  .phone{grid-column:1;grid-row:3;width:64%!important;height:142px!important;justify-self:center;rotate:-4deg;margin:14px 0 26px}
  .phone .object-art{height:100%;width:auto}
  .mug{grid-column:2;grid-row:3;width:90%!important;height:126px!important;justify-self:center;rotate:2deg;margin:14px 0 26px}
  .first-touch-hint{display:block;position:absolute;top:-20px;left:-8px;font-size:12px;background:var(--mint);color:var(--ink);padding:2px 8px;border:var(--line);border-radius:12px;white-space:nowrap}
  .touch-tag{font-size:12px;white-space:normal;padding:4px 8px;min-width:132px;text-align:center}
  .phone .touch-tag,.mug .touch-tag{bottom:-27px;min-width:136px;line-height:1.5}
  .ruler{grid-column:1;grid-row:4;width:100%!important;height:60px!important;align-self:center;justify-self:center;rotate:-3deg;margin:4px 0 28px}
  .ruler .touch-tag{bottom:-22px;min-width:130px;padding:4px 5px}
  .business-card{grid-column:2;grid-row:4;width:100%!important;height:90px!important;justify-self:center;rotate:2deg;margin:8px 0 32px}
  .card-face{height:90px;min-height:0;padding:10px 8px;align-items:center;text-align:center}
  .card-face strong{font-size:13px;letter-spacing:-.06em;white-space:nowrap}
  .card-face>span:not(.card-mark){font-size:12px;line-height:1.5}
  .card-mark{position:relative;inset:auto;font-size:22px;display:block;margin-bottom:4px}
  .card-mark span{font-size:13px}
  .business-card .touch-tag{bottom:-26px;min-width:130px}
  .mobile-touch-hint{grid-column:1/-1;grid-row:5;position:relative;inset:auto;text-align:center;font-size:12px}
  .desk-instruction{font-size:12px;padding-top:20px}
  .desk-answer{left:12px!important;right:12px!important;top:auto!important;bottom:12px;width:auto;max-width:none;max-height:calc(100dvh - 24px);padding:16px 20px;gap:10px}
  .desk-answer[open]{gap:10px}
  #answer-title{font-size:20px;line-height:1.45}
  #answer-copy{font-size:16px;line-height:1.65}
  .answer-top{padding-bottom:4px}
  #answer-close{min-height:36px;padding:4px}
  #answer-link{padding:4px 0}
  .object-reply{display:none!important}
  .intermediate-note{margin-bottom:40px}
}
@media(max-width:359px){
  .desk-section{padding-left:12px;padding-right:12px}
  .work-desk{padding:14px 10px 20px;gap:18px 10px}
  .notebook{height:214px!important}
  .notebook-page{padding:14px 10px}
  .notebook h1{font-size:26px}
  .notebook-copy{font-size:12px}
  .page-sketch{margin-top:6px;height:22px}
  .request{height:178px!important}
  .request .entrance-copy{padding:20px 8px 10px;gap:6px}
  .request strong{font-size:22px}
  .request .object-caption{font-size:12px;letter-spacing:-.09em}
  .request .entrance-note{letter-spacing:-.07em}
  .toolbox strong{font-size:16px}
  .toolbox .entrance-copy{padding-left:16px;padding-right:16px}
  .toolbox-label{font-size:12px;padding:4px 8px;letter-spacing:-.07em}
  .touch-tag,.phone .touch-tag,.mug .touch-tag{min-width:120px;font-size:12px;letter-spacing:-.04em;padding-left:4px;padding-right:4px}
  .ruler .touch-tag,.business-card .touch-tag{min-width:116px;font-size:12px}
  .card-face strong{font-size:12px}
  .card-face>span:not(.card-mark){font-size:12px}
  .desk-answer{padding:14px 16px}
  #answer-title{font-size:19px}
  #answer-copy{font-size:16px;line-height:1.6}
}