/* The Workshop, door no. 09: THE LINE.
   The camera is bolted to the shop floor and the world conveys. Scroll
   drives the belt: a blank canvas rides in, the primer arm sweeps it, the
   great stamp head SLAMS the painting on, the stencil arm sprays the title,
   the piece tilts up for inspection, takes its brass APPROVED, and rolls
   off as the next blank rides in. The punch clock runs nine to five across
   the whole shift. Phones and reduced motion get the line parked: each job
   assembled, clipboards stacked in a column. */

.line { --bp: #1b3a6b; --bp-deep: #122a4e; --bp-night: #14243c;
  --chalkline: #a8c8e8; --chalk: #e8f0f8; --brass: #d4aa5a; --brass-2: #b08d3f;
  --copper: #8a5a2a; --iron: #2f2620; --paper: #e8e3d6; --ink: #1d2c44;
  --belt-h: clamp(90px, 15vh, 170px);
  /* the piece and its work order ride the belt as one composed pair: the
     board is sized off the viewport, the canvas takes the room that is left,
     and the pair is centred together rather than the painting alone */
  --board-h: min(70vh, 740px, 50vw);
  --board-w: calc(var(--board-h) * 0.75);
  --canvas-w: max(360px, min(52vw, 980px, calc(94vw - var(--board-w) - 40px)));
  background: var(--r-bg); }

/* ================= clock in: the shop wakes up bank by bank =================
   The dark is not a sheet over the room, it is three unlit banks of lamps.
   You punch in on the painted clock, then the banks thunk on one at a time,
   left to right, and each one hands you back a third of the painted shop. */
.ln-dark { position: fixed; inset: 0; z-index: 70; background: transparent;
  transition: opacity .5s ease .35s, visibility .5s .35s; }
.ln-dark.lit { opacity: 0; visibility: hidden; }

.ln-banks { position: absolute; inset: 0; display: flex; }
.ln-bank { position: relative; flex: 1 1 0; background: #060a11; }
.ln-bank::after { content: ""; position: absolute; left: 50%; top: -8%;
  width: 132%; height: 52%; transform: translateX(-50%); opacity: 0;
  background: radial-gradient(50% 62% at 50% 0%, rgba(255, 216, 146, .6), transparent 74%); }
.ln-dark.banks .ln-bank { animation: bank-on .9s cubic-bezier(.3, .8, .4, 1) forwards; }
.ln-dark.banks .ln-bank::after { animation: bank-flash .9s ease-out forwards; }
.ln-dark.banks .b-2, .ln-dark.banks .b-2::after { animation-delay: .26s; }
.ln-dark.banks .b-3, .ln-dark.banks .b-3::after { animation-delay: .52s; }
@keyframes bank-on {
  0% { opacity: 1; } 7% { opacity: .5; } 13% { opacity: .92; }
  21% { opacity: .16; } 29% { opacity: .42; } 100% { opacity: 0; } }
@keyframes bank-flash {
  0% { opacity: 0; } 9% { opacity: .95; } 18% { opacity: .25; }
  30% { opacity: .7; } 100% { opacity: 0; } }

/* the painted punch clock: the site draws its hands and stamps the real time */
/* the clock fills the dark shop: every part of the punch in scales off it, and
   the card hangs below the slot instead of across the face */
.ln-clockin { --clk: min(34vw, 780px, 46vh); position: absolute; left: 50%; top: 40%;
  z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; opacity: 0; transition: opacity .5s ease; }
.ln-dark.warming .ln-clockin { opacity: 1; }
.ln-dark.banks .ln-clockin { opacity: 0; transition: opacity .3s ease; }
.pn-clock { position: relative; width: var(--clk); aspect-ratio: 1;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .85)); }
.pn-face { width: 100%; height: 100%; display: block; }
.pn-plain { border-radius: 50%; border: 6px solid var(--brass-2);
  background: radial-gradient(circle at 38% 32%, #f6f9fc, #dbe4ec 70%); }
.pn-clock::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 210%; height: 210%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 140, .32), transparent 68%); }
.pn-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%;
  border-radius: 4px; background: var(--ink); opacity: 0;
  transition: opacity .4s ease .15s; }
.ln-dark.warming .pn-hand { opacity: 1; }
.pn-hour { width: max(6px, calc(var(--clk) * .016)); height: 25%;
  margin-left: calc(max(6px, var(--clk) * .016) / -2); }
.pn-min { width: max(4px, calc(var(--clk) * .011)); height: 36%;
  margin-left: calc(max(4px, var(--clk) * .011) / -2); background: #45577a; }
.pn-pin { position: absolute; left: 50%; top: 50%;
  width: max(11px, calc(var(--clk) * .03)); height: max(11px, calc(var(--clk) * .03));
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--brass-2); }
.pn-slot { position: relative; margin-top: calc(var(--clk) * .05);
  width: calc(var(--clk) * .62); height: calc(var(--clk) * .085);
  border-radius: 5px; background: linear-gradient(180deg, #223349, #16233a);
  border: 2px solid #2e4260; border-bottom-color: #0d1626;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .65), inset 0 3px 9px rgba(0, 0, 0, .6); }
.pn-card { position: absolute; left: 50%; top: calc(var(--clk) * .028);
  width: calc(var(--clk) * .4); height: calc(var(--clk) * .5);
  border-radius: 3px; background: linear-gradient(180deg, #efe9d8, #ded4ba);
  opacity: 0; transform: translateX(-50%) translateY(calc(var(--clk) * -.06));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  display: flex; align-items: flex-start; justify-content: center; }
.ln-dark.warming .pn-card { animation: card-rise .9s cubic-bezier(.3, .8, .4, 1) forwards; }
@keyframes card-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(calc(var(--clk) * -.06)); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(calc(var(--clk) * .035)); } }
.pn-card b { margin-top: calc(var(--clk) * .07); font-family: var(--font-ui);
  font-size: max(16px, calc(var(--clk) * .05)); letter-spacing: .06em;
  color: #2c3a54; opacity: 0; transform: scale(1.6) rotate(-5deg); }
.ln-dark.stamped .pn-card b { animation: time-stamp .32s cubic-bezier(.2, .8, .3, 1.3) forwards; }
@keyframes time-stamp { to { opacity: .92; transform: scale(1) rotate(-2deg); } }
.ln-dark.stamped .ln-clockin { animation: punch-kick .28s ease-out; }
@keyframes punch-kick { 30% { transform: translate(-50%, -50%) translateY(4px); } }
/* out of the column's flow so the card's overhang decides where it lands */
.pn-say { position: absolute; top: 100%; left: 50%; white-space: nowrap;
  transform: translateX(-50%); margin-top: calc(var(--clk) * .5);
  font-family: var(--r-body); font-style: italic;
  font-size: max(15px, calc(var(--clk) * .034)); color: #6d7a90; opacity: 0; }
.ln-dark.stamped .pn-say { animation: snd-pop 1.5s ease-out forwards; }
@keyframes snd-pop { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }
.ln-skip { position: absolute; right: 22px; bottom: 20px; z-index: 3;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: #64748c; background: none; border: none;
  cursor: pointer; }
.ln-skip:hover { color: var(--chalk); }

/* ================= the stage: one bolted camera ================= */
.ln-track { position: relative; height: var(--track-h, 170vh); }
.ln-stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, var(--bp-night), var(--bp-deep) 70%); }
.ln-stage.shake { animation: ln-shake .5s cubic-bezier(.2, .7, .3, 1); }
@keyframes ln-shake {
  0% { transform: translate(0, 0); }
  18% { transform: translate(-7px, 5px) rotate(-.25deg); }
  38% { transform: translate(6px, -4px) rotate(.2deg); }
  58% { transform: translate(-4px, 2px); }
  78% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); } }

.ln-shop { position: absolute; top: 0; left: 0; height: 100%; width: 128vw; max-width: none;
  object-fit: cover; transform: translateX(var(--shopx, 0vw)); will-change: transform; }
.ln-shop-plain { background:
  radial-gradient(60% 50% at 24% 8%, rgba(212, 170, 90, .12), transparent 62%),
  radial-gradient(50% 44% at 78% 16%, rgba(212, 170, 90, .08), transparent 62%),
  linear-gradient(180deg, #1e3d6e, var(--bp) 46%, var(--bp-deep)); }
.lsp-grid { position: absolute; inset: 0; opacity: .5; background:
  repeating-linear-gradient(0deg, transparent 0 46px, rgba(168, 200, 232, .09) 46px 47px),
  repeating-linear-gradient(90deg, transparent 0 46px, rgba(168, 200, 232, .09) 46px 47px),
  repeating-linear-gradient(0deg, transparent 0 230px, rgba(168, 200, 232, .16) 230px 232px),
  repeating-linear-gradient(90deg, transparent 0 230px, rgba(168, 200, 232, .16) 230px 232px); }
.lsp-peg { position: absolute; left: 0; right: 0; top: 12%; height: 34%; opacity: .5;
  background: radial-gradient(circle 3px at center, rgba(18, 42, 78, .9) 0 2px, transparent 3px);
  background-size: 52px 52px;
  border-top: 2px solid rgba(168, 200, 232, .18); border-bottom: 2px solid rgba(168, 200, 232, .18); }

/* pencil annotations draw themselves between jobs */
.ln-note { position: absolute; z-index: 3; font-family: "Architects Daughter", var(--r-body);
  font-size: clamp(15px, 1.2vw, 20px); color: rgba(185, 205, 230, .85); white-space: nowrap;
  opacity: 0; transform: rotate(-2deg); clip-path: inset(0 100% 0 0);
  transition: opacity .5s ease, clip-path 1.3s ease; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ln-note.on { opacity: 1; clip-path: inset(0 -4% 0 0); }
.n-1 { left: 12%; top: 24%; }
.n-2 { right: 10%; top: 20%; transform: rotate(1.6deg); }
.n-3 { left: 7%; top: 56%; transform: rotate(-1.2deg); }
.n-4 { right: 16%; top: 42%; transform: rotate(2deg); }
@media (max-width: 1400px) { .ln-note { display: none; } }

/* ---- the belt ---- */
.ln-belt { position: absolute; left: 0; right: 0; bottom: 0; height: var(--belt-h); z-index: 4;
  background-color: #1c2c44;
  background-image:
    linear-gradient(180deg, rgba(232, 240, 248, .1), transparent 22%),
    repeating-linear-gradient(90deg, #24374f 0 44px, #1b2a40 44px 50px, #223349 50px 92px);
  background-repeat: repeat-x; background-size: auto 100%;
  border-top: 4px solid var(--brass-2);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .45), inset 0 6px 14px rgba(0, 0, 0, .4); }
.ln-belt::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: rgba(212, 170, 90, .35); }

/* ---- the three machine arms ---- */
.ln-arm { position: absolute; top: 0; z-index: 5; height: 44vh; width: clamp(90px, 9vw, 150px);
  transform: translateY(0); transition: transform .55s cubic-bezier(.3, .8, .3, 1);
  pointer-events: auto; }
.ln-arm img { position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 100%; width: auto; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5)); }
.arm-roller { left: calc(36% - clamp(45px, 4.5vw, 75px)); }
.arm-stamp { left: calc(50% - clamp(45px, 4.5vw, 75px)); }
.arm-stencil { left: calc(64% - clamp(45px, 4.5vw, 75px)); }
.am-rod { position: absolute; left: 50%; top: 0; width: 14px; height: 72%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #3a2f26, var(--iron) 40%, #4a3c30);
  border-left: 2px solid rgba(212, 170, 90, .4); }
.am-joint { position: absolute; left: 50%; top: 68%; width: 34px; height: 34px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #e8c47c, var(--brass-2) 55%, #6e4e1e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55); }
.am-roll { position: absolute; left: 50%; top: 74%; width: clamp(64px, 6vw, 104px); height: 26px;
  transform: translateX(-50%); border-radius: 13px;
  background: repeating-linear-gradient(90deg, #cfd9e4 0 9px, #aebfd2 9px 18px);
  border: 3px solid var(--brass-2); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.am-head { position: absolute; left: 50%; top: 72%; width: clamp(76px, 7.4vw, 122px); height: 44px;
  transform: translateX(-50%); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #e8c47c, var(--brass-2) 45%, #6e4e1e);
  border-bottom: 6px solid #52380f; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.am-noz { position: absolute; left: 50%; top: 72%; width: 22px; height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brass-2), #6e4e1e);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5); }
.am-noz::after { content: ""; position: absolute; left: 50%; top: 100%; width: 44px; height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 0, rgba(168, 200, 232, .5), transparent 75%);
  opacity: 0; transition: opacity .25s ease; }
.ln-stage[data-phase="prime"] .arm-roller { transform: translateY(9vh); transition-duration: .4s; }
.ln-stage[data-phase="slam"] .arm-stamp { transform: translateY(15.5vh);
  transition-duration: .15s; transition-timing-function: cubic-bezier(.65, 0, 1, .45); }
.ln-stage[data-phase="stencil"] .arm-stencil { transform: translateY(7vh); transition-duration: .4s; }
.ln-stage[data-phase="stencil"] .am-noz::after { opacity: 1; }
.ln-arm:hover { animation: arm-fidget .5s ease; }
@keyframes arm-fidget { 30% { transform: translateY(6px) rotate(.5deg); }
  65% { transform: translateY(-2px) rotate(-.4deg); } }

/* ---- a job on the line ---- */
.ln-job { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; }
.ln-job.on { opacity: 1; }
.ln-job.act { pointer-events: auto; }
.ln-piece { position: absolute; left: 50%; bottom: calc(var(--belt-h) - 10px);
  transform: translateX(-50%) translateX(calc(var(--board-w) / -2 - 9px))
    translateX(var(--jx, 100vw)); will-change: transform; perspective: 900px; }
.ln-canvas { position: relative; width: var(--canvas-w); aspect-ratio: 2 / 1;
  border: 8px solid var(--paper); background: var(--bp-deep);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .75);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
.ln-job.inspect .ln-canvas { transform: rotateX(5deg) scale(1.02); }
.ln-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07); }
.ln-job.slammed .ln-art { opacity: 1; transform: none;
  transition: opacity .2s ease, transform .5s cubic-bezier(.2, 1.35, .3, 1); }
.ln-plain::after { content: "\2733"; position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%); font-size: 40px; color: rgba(232, 240, 248, .3); }
.wp-0 { background: linear-gradient(150deg, #24466e, #122a4e 70%); }
.wp-1 { background: linear-gradient(150deg, #2c4a5e, #14243c 70%); }
.wp-2 { background: linear-gradient(150deg, #4a4a34, #1c2030 70%); }
.wp-3 { background: linear-gradient(150deg, #503c2a, #1a2236 70%); }
.wp-4 { background: linear-gradient(150deg, #34527e, #10203a 70%); }
.ln-blank { position: absolute; inset: 0; background:
  repeating-linear-gradient(0deg, transparent 0 34px, rgba(58, 106, 160, .12) 34px 35px),
  repeating-linear-gradient(90deg, transparent 0 34px, rgba(58, 106, 160, .12) 34px 35px),
  linear-gradient(165deg, #eef3f8, #d8e2ec); }
.ln-primer { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(58, 106, 160, .5) 0 60px, rgba(58, 106, 160, .38) 60px 120px),
  linear-gradient(180deg, rgba(37, 74, 128, .5), rgba(37, 74, 128, .62));
  clip-path: inset(0 calc((1 - var(--pr, 0)) * 100%) 0 0); }
.ln-job.slammed .ln-blank, .ln-job.slammed .ln-primer { opacity: 0;
  transition: opacity .3s ease .12s; }
.ln-stitle { position: absolute; left: 4%; bottom: 6%; max-width: 88%; z-index: 3;
  font-family: var(--r-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(20px, 2.2vw, 38px); line-height: 1;
  color: var(--chalk); text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
  opacity: var(--st, 0); filter: blur(calc((1 - var(--st, 0)) * 3px));
  clip-path: inset(0 calc((1 - var(--st, 0)) * 100%) 0 -4%); }

/* ---- the work order clipboard ---- */
/* stands on the belt at the piece's right shoulder and travels with it */
.ln-order { position: absolute; z-index: 7;
  left: calc(50% - var(--board-w) / 2 + var(--canvas-w) / 2 + 9px + var(--jx, 100vw));
  bottom: calc(var(--belt-h) - 10px); width: min(370px, 30vw);
  padding: 46px 22px 20px; border-radius: 4px;
  background: linear-gradient(175deg, #96683a, var(--copper) 30%, #6e4426);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateX(34px) rotate(1.2deg);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ln-job.inspect .ln-order { opacity: 1; transform: translateX(0) rotate(1.2deg); }
.ln-order::before { content: ""; position: absolute; left: 8px; right: 8px; top: 34px; bottom: 8px;
  background: linear-gradient(180deg, #efe9d8, #e0d7c0); border-radius: 2px; z-index: 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .18); }
.ln-order::after { content: ""; position: absolute; left: 50%; top: 10px; width: 92px; height: 30px;
  transform: translateX(-50%); border-radius: 5px 5px 3px 3px; z-index: 2;
  background: linear-gradient(180deg, #e8c47c, var(--brass-2) 60%, #6e4e1e);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.ln-order > * { position: relative; z-index: 1; }

/* the painted clipboard carries the order: the board is Charles's painting and
   the site writes on the blank paper, squared to the board's own 9 degree tilt.
   Sheet geometry measured off the painting, every corner verified on paper. */
/* sized off the viewport's height, because a portrait board that overflows the
   top of the screen is worse than a smaller one: width follows the painting */
.ln-order.has-art { height: var(--board-h); width: var(--board-w);
  padding: 0; border-radius: 0; background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .75)); box-shadow: none; }
.ln-order.has-art::before, .ln-order.has-art::after { content: none; }
.ln-order.has-art .wo-sheet { position: absolute; left: 56.5%; top: 56%;
  width: 54.6%; height: 56.8%; transform: translate(-50%, -50%) rotate(-9deg);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(138, 106, 53, .5) transparent; }
.ln-order.has-art .wo-tab i { font-size: 10.5px; }
.ln-order.has-art .wo-tab b { font-size: 31px; }
.ln-order.has-art .wo-title { font-size: clamp(20px, 1.72vw, 28px); margin: 5px 0 9px; }
.ln-order.has-art .wo-hand { font-size: clamp(14.5px, 1.12vw, 17px); line-height: 1.5; }
.ln-order.has-art .wo-more summary { font-size: 10.5px; }
.ln-order.has-art .wol { font-size: clamp(13.5px, 1vw, 15px); }
.ln-order.has-art .wol b { font-size: 9.5px; }
.ln-order.has-art .crew-chip { padding: 8px 13px; font-size: 11px; }
.ln-order.has-art .crew-wait { font-size: 14px; }
.ln-order.has-art .wo-approved { right: 14%; top: 24%; }

/* the brass stamp comes down and leaves the mark */
.wo-stamptool { position: absolute; right: 6%; top: 8%; z-index: 4;
  width: 42%; opacity: 0; transform: translateY(-38%) rotate(-16deg) scale(1.15);
  pointer-events: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6)); }
.ln-job.approved .wo-stamptool { animation: stamp-down 1.5s cubic-bezier(.5, 0, .75, .4) forwards; }
@keyframes stamp-down {
  0% { opacity: 0; transform: translateY(-38%) rotate(-16deg) scale(1.15); }
  22% { opacity: 1; }
  38% { transform: translateY(4%) rotate(-9deg) scale(1); }
  52% { transform: translateY(0%) rotate(-9deg) scale(1); }
  100% { opacity: 0; transform: translateY(-30%) rotate(-13deg) scale(1.08); } }
.wo-tab { display: flex; align-items: baseline; gap: 8px; }
.wo-tab i { font-family: var(--font-ui); font-style: normal; font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase; color: #8a6a35; }
.wo-tab b { font-family: var(--r-display); font-weight: 700; font-size: 30px; color: var(--ink); }
.wo-title { font-family: var(--r-display); font-weight: 700; font-size: clamp(23px, 1.9vw, 30px);
  line-height: 1.05; color: var(--ink); margin: 4px 0 8px; }
.wo-hand { font-family: var(--r-body); font-style: italic; font-size: 15.5px; line-height: 1.55;
  color: #4a4232; margin: 0; }
.wo-more { margin-top: 8px; }
.wo-more summary { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: #8a6a35; cursor: pointer; list-style: none; }
.wo-more summary::before { content: "\203A\00a0"; }
.wo-more[open] summary::before { content: "\2039\00a0"; }
.wol { font-family: var(--r-body); font-style: italic; font-size: 14.5px; line-height: 1.55;
  color: #4a4232; margin: 7px 0 0; }
.wol b { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #8a6a35;
  margin-bottom: 1px; }
.wo-crew { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.wo-crew form { display: inline; }
.crew-chip { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); background: rgba(29, 44, 68, .06);
  border: 1px dashed rgba(29, 44, 68, .55); padding: 8px 13px; cursor: pointer;
  text-decoration: none; border-radius: 2px;
  transition: color .25s, border-color .25s, background .25s; }
.crew-chip:hover, .crew-chip:focus-visible { color: var(--paper); background: var(--bp);
  border-color: var(--bp); outline: none; }
.crew-wait { font-family: var(--r-body); font-style: italic; font-size: 13px; color: #8a7a54; }
.job-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #8a6a35; }
.wo-approved { position: absolute; right: 14px; top: 40px; z-index: 3; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 3px double rgba(160, 122, 40, .85); color: rgba(160, 122, 40, .9);
  font-family: var(--r-display); font-style: normal; font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; transform: rotate(-14deg) scale(1.6);
  opacity: 0; pointer-events: none; }
.ln-job.approved .wo-approved { opacity: .9; transform: rotate(-14deg) scale(1);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.ln-parked { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  z-index: 6; font-family: var(--r-body); font-style: italic; font-size: clamp(16px, 1.4vw, 21px);
  color: var(--r-dim); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); text-align: center; }

/* ---- slam dressing: steam and sparks ---- */
.ln-steam, .ln-sparks { position: absolute; left: 50%; bottom: calc(var(--belt-h) + 20vh);
  z-index: 8; pointer-events: none; }
.ln-steam i { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 240, 248, .5), transparent 70%);
  filter: blur(3px); opacity: 0; }
.ln-steam.go i { animation: steam-puff .95s ease-out forwards; }
.ln-steam i:nth-child(1) { animation-delay: 0s; --px: -60px; }
.ln-steam i:nth-child(2) { animation-delay: .06s; --px: 44px; }
.ln-steam i:nth-child(3) { animation-delay: .12s; --px: -20px; }
.ln-steam i:nth-child(4) { animation-delay: .16s; --px: 76px; }
@keyframes steam-puff {
  0% { opacity: 0; transform: translate(var(--px, 0), 0) scale(.5); }
  22% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(var(--px, 0) * 1.6), -13vh) scale(2.4); } }
.ln-sparks i { position: absolute; left: 0; top: 0; width: 7px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #ffe2a0, var(--brass)); opacity: 0; }
.ln-sparks.go i { animation: spark-fly .6s cubic-bezier(.2, .6, .6, 1) forwards; }
.ln-sparks i:nth-child(1) { --sx: -110px; --sy: -60px; }
.ln-sparks i:nth-child(2) { --sx: 96px; --sy: -74px; animation-delay: .03s; }
.ln-sparks i:nth-child(3) { --sx: -60px; --sy: -100px; animation-delay: .05s; }
.ln-sparks i:nth-child(4) { --sx: 130px; --sy: -30px; animation-delay: .07s; }
.ln-sparks i:nth-child(5) { --sx: 40px; --sy: -110px; animation-delay: .09s; }
@keyframes spark-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -80px)) rotate(160deg); } }

/* ---- the punch clock HUD: nine to five ---- */
.ln-clock { position: absolute; right: clamp(14px, 2.4vw, 44px); top: clamp(14px, 3vh, 34px);
  z-index: 9; width: clamp(104px, 8.4vw, 150px); aspect-ratio: 1; }
.ck-face { position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.ck-plain { border-radius: 50%; border: 5px solid var(--brass-2);
  background:
    repeating-conic-gradient(rgba(29, 44, 68, .5) 0deg 1.6deg, transparent 1.6deg 30deg),
    radial-gradient(circle at 38% 32%, #f6f9fc, #dbe4ec 70%);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .2); }
.ck-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%;
  border-radius: 3px; background: var(--ink); }
.ck-hour { width: 5px; height: 26%; margin-left: -2.5px; }
.ck-min { width: 3px; height: 37%; margin-left: -1.5px; background: #45577a; }
.ck-pin { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--brass-2); }

/* ---- the job card: punched through the shift, filed at five ---- */
/* rides high on the left wall, clear of the piece coming down the belt */
.ln-ticket { position: absolute; left: clamp(14px, 2.4vw, 44px); top: clamp(140px, 22vh, 300px);
  z-index: 9; padding: 10px 16px 12px; border-radius: 3px; transform: rotate(-2deg);
  background: linear-gradient(180deg, #efe9d8, #ded4ba);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .9s cubic-bezier(.5, 0, .8, .4), opacity .9s ease; }
/* the card is not issued until the shift starts, so it never crowds the title */
.ln-ticket { opacity: 0; }
.ln-ticket.on { opacity: 1; }
.ln-ticket.filed { transform: rotate(7deg) translate(40px, 130%); opacity: 0; }
.tk-word { display: block; font-family: var(--font-ui); font-size: 9px; letter-spacing: .34em;
  text-transform: uppercase; color: #8a6a35; }
.tk-no { display: block; font-family: var(--r-display); font-weight: 700; font-size: 44px;
  line-height: 1; color: var(--ink); }
.tk-holes { display: flex; gap: 5px; margin-top: 8px; }
.tk-hole { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(29, 44, 68, .5); }
.tk-hole.punched { border-color: transparent;
  background: radial-gradient(circle at 40% 35%, #2c3a54, #101a2c 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }

/* ---- the shop cat, unbothered by industry ---- */
.ln-cat { position: absolute; left: clamp(16px, 3vw, 60px); top: clamp(48px, 9vh, 110px);
  z-index: 5; width: clamp(110px, 9vw, 160px); pointer-events: none; }
.cat-shelf { position: absolute; left: -12%; right: -12%; top: 100%; height: 10px;
  background: linear-gradient(180deg, #4a3c30, var(--iron));
  border-top: 2px solid rgba(212, 170, 90, .45);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.cat-art { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
  animation: cat-breathe 5.5s ease-in-out infinite; }
@keyframes cat-breathe { 50% { transform: scaleY(1.02); } }
.cat-body { position: absolute; left: 12%; bottom: 0; width: 62%; height: 34px;
  border-radius: 20px 22px 8px 8px; background: linear-gradient(180deg, #3c332a, #241e18); }
.cat-body::before { content: ""; position: absolute; right: -14px; bottom: 6px;
  width: 30px; height: 26px; border-radius: 50% 50% 42% 42%;
  background: #362e25; }
.cat-body::after { content: ""; position: absolute; right: -10px; bottom: 28px;
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid #362e25; }
.cat-tail { position: absolute; left: 4%; bottom: -26px; width: 5px; height: 34px;
  border-radius: 3px; background: #2c251e; transform-origin: 50% 0;
  animation: tail-flick 6s ease-in-out infinite; }
@keyframes tail-flick { 0%, 72%, 100% { transform: rotate(4deg); }
  80% { transform: rotate(-14deg); } 88% { transform: rotate(9deg); } }

/* ---- the title paints itself on ---- */
.ln-titlecard { position: absolute; left: clamp(22px, 4.5vw, 80px); top: 15vh; z-index: 10;
  max-width: 680px; transition: opacity .9s ease, transform .9s ease; }
.ln-titlecard.gone { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.ln-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.ln-name { font-family: var(--r-display); font-weight: 700; font-size: clamp(62px, 8vw, 138px);
  line-height: .94; color: var(--chalk); margin: 8px 0 10px; letter-spacing: .01em;
  text-shadow: 0 3px 0 rgba(10, 18, 32, .5), 0 12px 34px rgba(0, 0, 0, .6); }
.ln-name span { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(6px); }
.ln-dark.lit ~ .ln-track .ln-name span { animation: spray-on .45s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(.4s + var(--pd, 0) * .09s); }
@keyframes spray-on { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.ln-tag { font-family: var(--r-body); font-size: clamp(15px, 1.25vw, 19px);
  color: #c9d8ea; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); max-width: 46ch; }

/* ---- five o'clock ---- */
.ln-whistle { position: absolute; left: 8%; top: 14%; z-index: 9; display: flex;
  gap: clamp(6px, 1vw, 18px); pointer-events: none; }
.ln-whistle span { font-family: var(--r-display); font-weight: 700;
  font-size: clamp(54px, 7vw, 120px); color: rgba(238, 244, 250, .92);
  text-shadow: 0 0 28px rgba(232, 240, 248, .5); opacity: 0; }
.ln-whistle.blow span { animation: toot 3.8s ease-out forwards; }
.ln-whistle span:nth-child(1) { animation-delay: 0s; }
.ln-whistle span:nth-child(2) { animation-delay: .12s; }
.ln-whistle span:nth-child(3) { animation-delay: .24s; }
.ln-whistle span:nth-child(4) { animation-delay: .36s; }
.ln-whistle span:nth-child(5) { animation-delay: .48s; }
.ln-whistle span:nth-child(6) { animation-delay: .6s; }
@keyframes toot {
  0% { opacity: 0; transform: translate(0, 12px) scale(.9); filter: blur(4px); }
  14% { opacity: .95; transform: translate(0, 0) scale(1); filter: blur(0); }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate(9vw, -14vh) scale(1.3); filter: blur(7px); } }
.ln-lightsoff { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0;
  background:
    radial-gradient(34% 40% at 78% 96%, rgba(227, 186, 98, .2), transparent 70%),
    linear-gradient(90deg, rgba(5, 9, 16, .9) 0 34%, rgba(5, 9, 16, .72) 34% 67%, rgba(5, 9, 16, .88) 67%); }

.ln-glove { position: absolute; left: 0; top: 0; z-index: 3; width: 90px; height: 54px;
  margin: -27px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 10, 18, .22), transparent 72%);
  filter: blur(4px); }

/* the cursor is a pencil: drafting marks dry off the blueprint wall */
.ln-draft { position: absolute; z-index: 3; pointer-events: none;
  animation: draft-fade 1.3s ease-out forwards; }
.dm-dash { width: 30px; height: 0; border-top: 2px solid rgba(222, 238, 252, .85);
  transform: translate(-50%, -50%) rotate(var(--da, 0deg));
  filter: drop-shadow(0 0 3px rgba(168, 200, 232, .5)); }
.dm-cross { width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(168, 200, 232, .5)); }
.dm-cross::before, .dm-cross::after { content: ""; position: absolute;
  background: rgba(222, 238, 252, .8); }
.dm-cross::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.dm-cross::after { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.dm-arc { width: 24px; height: 24px; border: 2px solid transparent;
  border-top-color: rgba(222, 238, 252, .75); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--da, 0deg));
  filter: drop-shadow(0 0 3px rgba(168, 200, 232, .5)); }
@keyframes draft-fade { 0% { opacity: 0; } 12% { opacity: 1; }
  100% { opacity: 0; filter: blur(1.5px); } }

.ln-cue { position: absolute; left: 50%; bottom: calc(var(--belt-h) + 10px);
  transform: translateX(-50%); z-index: 9; font-family: var(--r-body); font-style: italic;
  font-size: 13px; color: rgba(201, 216, 234, .8); text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  animation: ln-bob 3.4s ease-in-out infinite; transition: opacity .8s ease; }
.ln-cue.gone { opacity: 0; }
@keyframes ln-bob { 0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); } }

/* ================= the drafting table ================= */
.q-head { position: relative; z-index: 2; text-align: center; padding: 56px 24px 8px; }
.q-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--brass); }
.q-note { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.2vw, 19px);
  color: var(--r-dim); margin-top: 10px; }
.bench { position: relative; padding: 10px 0 90px; overflow: hidden;
  border-top: 1px solid var(--r-hair);
  background: linear-gradient(180deg, var(--r-bg), #0f1c30); }
.bench-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: .4;
  pointer-events: none; }
.bench-lamp { position: absolute; right: 10%; top: -6px; z-index: 3; width: clamp(90px, 8vw, 140px);
  pointer-events: none; }
.lamp-art { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
.lamp-arm { position: absolute; left: 50%; top: 0; width: 8px; height: 44px;
  transform: translateX(-50%); background: linear-gradient(90deg, #241e18, #4a3c30); }
.lamp-shade { position: absolute; left: 50%; top: 40px; width: 74px; height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #e8c47c, var(--brass-2) 70%);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.lamp-glow { position: absolute; left: 50%; top: 58px; width: 380px; height: 300px;
  transform: translateX(-50%);
  background: radial-gradient(50% 46% at 50% 12%, rgba(227, 186, 98, .3), transparent 72%);
  pointer-events: none; }
.bench-row { position: relative; z-index: 2; display: flex; gap: clamp(20px, 2.6vw, 38px);
  flex-wrap: wrap; justify-content: center; max-width: 1480px; margin: 44px auto 0;
  padding: 0 clamp(20px, 4vw, 60px); }
.sheet-card { position: relative; width: clamp(220px, 20vw, 300px); text-decoration: none;
  padding: 16px 12px 12px; transform: rotate(var(--sr, 0deg)) translateY(16px); opacity: 0;
  transform-origin: 50% 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(58, 106, 160, .1) 26px 27px),
    linear-gradient(170deg, #e4ecf4, #cfdce9);
  box-shadow: 0 22px 42px -20px rgba(0, 0, 0, .8);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--sd, 0ms),
    opacity .8s ease var(--sd, 0ms); }
.sheet-card.pinned { transform: rotate(var(--sr, 0deg)) translateY(0); opacity: 1; }
.sheet-card:hover { transform: rotate(0deg) translateY(-4px); transition-delay: 0ms; }
.sheet-pin { position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; z-index: 3;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #e8c47c, var(--brass-2) 60%, #6e4e1e);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.sheet-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 4px solid #f2f6fa; background: var(--r-bg2); }
.sheet-bare { background: linear-gradient(155deg, #2c4666, #16243c); }
.sheet-title { display: block; text-align: center; padding: 11px 4px 0;
  font-family: var(--r-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.sheet-meta { display: block; text-align: center; padding-top: 3px;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #5a6a84; }
.file-head { padding-top: 70px; }
.file-row { margin-top: 34px; }
.file-card { position: relative; width: clamp(210px, 18vw, 280px); text-decoration: none;
  padding: 18px 10px 10px; opacity: 0; transform: translateY(16px);
  background: linear-gradient(175deg, #e6dcc0, #d5c9a5);
  clip-path: polygon(0 10px, 34% 10px, 42% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 22px 42px -20px rgba(0, 0, 0, .8);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--sd, 0ms),
    opacity .8s ease var(--sd, 0ms); }
.file-card.pinned { transform: translateY(0); opacity: 1; }
.file-card:hover { transform: translateY(-4px); transition-delay: 0ms; }
.file-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 3px solid #f4efdf; background: var(--r-bg2); }
.file-label { position: relative; display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 9px; background: #f6f2e4;
  border: 1px solid rgba(160, 122, 40, .55);
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #4a4232; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.file-label i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid rgba(160, 122, 40, .7); }
.file-seal { position: absolute; right: -10px; top: -12px; z-index: 4; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px double rgba(160, 122, 40, .9); background: rgba(246, 242, 228, .94);
  color: rgba(160, 122, 40, .95); font-family: var(--r-display); font-style: normal;
  font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(12deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ln-empty { text-align: center; font-family: var(--r-body); font-style: italic;
  color: var(--r-dim); padding: 40px 24px 10px; }
.empty { font-family: var(--r-body); font-style: italic; color: var(--r-dim); }
.ln-wsp { position: absolute; right: 5%; bottom: 14px; z-index: 4;
  font-family: "Architects Daughter", var(--r-body); font-size: 13px;
  color: rgba(150, 170, 196, .55); pointer-events: none; }
@media (max-width: 1400px) { .ln-wsp { display: none; } }

/* ================= quitting time ================= */
.quitting { position: relative; min-height: 56vh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 116%, rgba(212, 170, 90, .08), transparent 60%),
    linear-gradient(180deg, #0f1c30, #0a1220); }
.qt-copy { position: relative; z-index: 2; padding: 90px 24px; }
.qt-line { font-family: var(--r-display); font-weight: 700; font-size: clamp(38px, 4.4vw, 76px);
  color: var(--chalk); }
.qt-sub { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.25vw, 19px);
  color: var(--r-dim); margin: 14px 0 6px; }
.po-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px;
  justify-content: center; }
.po-cta { font-family: var(--font-ui); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #241a06; background: var(--brass); padding: 14px 24px;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.po-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(212, 170, 90, .6); }
.qt-hall { font-family: var(--r-body); font-style: italic; font-size: 16px; color: var(--r-dim);
  text-decoration: none; border-bottom: 1px dashed rgba(150, 170, 196, .5); align-self: center; }
.qt-hall:hover { color: var(--chalk); }

/* ================= the line parked: phones and reduced motion ================= */
.line.flat .ln-dark { display: none; }
.line.flat .ln-track { height: auto; }
.line.flat .ln-stage { position: static; height: auto; overflow: visible;
  display: flex; flex-direction: column; gap: 30px; padding-bottom: 40px; }
.line.flat .ln-shop { display: none; }
.line.flat .ln-arm, .line.flat .ln-belt, .line.flat .ln-steam, .line.flat .ln-sparks,
.line.flat .ln-clock, .line.flat .ln-ticket, .line.flat .ln-cat, .line.flat .ln-note,
.line.flat .ln-whistle, .line.flat .ln-lightsoff, .line.flat .ln-cue { display: none; }
.line.flat .ln-titlecard { position: relative; order: -1; left: auto; top: auto;
  padding: 26px clamp(18px, 5vw, 44px) 0; }
.line.flat .ln-name span { opacity: 1; transform: none; filter: none; animation: none; }
.line.flat .ln-job { position: relative; opacity: 1; pointer-events: auto;
  padding: 0 clamp(12px, 3vw, 34px); }
.line.flat .ln-piece { position: relative; left: auto; bottom: auto; transform: none;
  perspective: none; }
.line.flat .ln-canvas { width: 100%; }
.line.flat .ln-art { opacity: 1; transform: none; }
.line.flat .ln-blank, .line.flat .ln-primer, .line.flat .ln-stitle { display: none; }
.line.flat .ln-order { position: relative; right: auto; left: auto; bottom: auto;
  width: auto; margin-top: 12px; opacity: 1; transform: none; }
.line.flat .ln-order.has-art { width: auto; height: auto; padding: 46px 22px 20px;
  background-image: none; filter: none;
  background: linear-gradient(175deg, #96683a, var(--copper) 30%, #6e4426); }
.line.flat .ln-order.has-art::before { content: ""; }
.line.flat .ln-order.has-art .wo-sheet { position: static; width: auto; height: auto;
  transform: none; overflow: visible; }
.line.flat .wo-approved, .line.flat .wo-stamptool { display: none; }
.line.flat .ln-parked { position: relative; left: auto; top: auto; transform: none;
  padding: 60px 24px; }
@media (max-width: 1100px) {
  .line { --board-w: 0px; --canvas-w: min(92vw, 76vh); }
  .ln-order { right: 0; left: 0; bottom: 0; width: auto; border-radius: 0;
    padding: 40px 18px 14px;
    background: linear-gradient(180deg, rgba(110, 68, 38, .95), rgba(84, 52, 28, .97)); }
  /* the painted board needs room it does not have on a narrow screen: the
     honest bar comes back and the clipboard sits this one out */
  .ln-order.has-art { width: auto; aspect-ratio: auto; padding: 40px 18px 14px;
    background: linear-gradient(180deg, rgba(110, 68, 38, .95), rgba(84, 52, 28, .97));
    background-image: none; filter: none; }
  /* relative, not static: the restored cream ::before is positioned, and a
     static sheet would paint underneath it */
  .ln-order.has-art .wo-sheet { position: relative; z-index: 1; left: auto; top: auto;
    width: auto; height: auto; transform: none; overflow: visible; }
  .ln-order.has-art::before { content: ""; }
  .wo-stamptool { display: none; }
  .ln-ticket { display: none; }
  .ln-piece { bottom: calc(var(--belt-h) + 30px); }
  .ln-canvas { width: min(92vw, 76vh); }
}
/* a short screen has no room for a portrait board at a readable size, so the
   order comes back as the bar, where the type can stay large */
@media (max-height: 820px) and (min-width: 1101px) {
  .line { --board-w: min(430px, 32vw); }
  .ln-order.has-art { height: auto; width: min(430px, 32vw);
    bottom: calc(var(--belt-h) + 5vh);
    padding: 46px 22px 20px; background-image: none; filter: none;
    background: linear-gradient(175deg, #96683a, var(--copper) 30%, #6e4426);
    box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .8); }
  .ln-order.has-art::before, .ln-order.has-art::after { content: ""; }
  .ln-order.has-art .wo-sheet { position: relative; z-index: 1; left: auto; top: auto;
    width: auto; height: auto; transform: none; overflow: visible; }
  .wo-stamptool { display: none; }
}
/* the line runs on phones now: the punch clock and the shop cat stay on,
   pocket size, and the piece rides higher so the order bar has the floor */
@media (max-width: 719px) {
  .ln-clock { width: 74px; right: 8px; top: 8px; }
  .ln-cat { width: 84px; left: 8px; top: 44px; }
  .ln-piece { bottom: calc(var(--belt-h) + 32vh); }
  .ln-stitle { font-size: 17px; }
  .ln-order, .ln-order.has-art { height: auto; padding: 30px 14px 12px; }
  .ln-order.has-art .wo-title { font-size: 20px; }
  .ln-order.has-art .wo-hand { font-size: 13.5px; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-cue, .cat-tail, .cat-art, .ln-arm { animation: none; }
  .ln-steam i, .ln-sparks i { display: none; }
  .sheet-card, .file-card { opacity: 1; transform: rotate(var(--sr, 0deg)); transition: none; }
}