/* Wide layout: routing slip left, requisition right, the pile of sheets between. */
.desk { max-width: 1200px; margin: 0 auto; }
.route, .rail-buy { display: none; }
.thumb { object-fit: cover; background: var(--bond); box-shadow: 0 1px 3px rgb(29 28 26 / .35); }
.thumb.is-missing { visibility: hidden; }

/* Phone and tablet: the sticky slip is always to hand once the memo button has gone. */
.sticky-slip { display: none; }
.js .sticky-slip {
  display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--bond) var(--tex-bond) 0 0 / 512px;
  border-top: 2px solid var(--carbon); box-shadow: 0 -6px 16px -8px rgb(29 28 26 / .35);
  transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--ease-feed), visibility 0s 200ms;
}
.js.buy-on .sticky-slip { transform: none; visibility: visible; transition: transform 300ms var(--ease-feed), visibility 0s; }
.sticky-slip .thumb { width: 28px; height: 56px; flex: none; }
.sticky-slip__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 18px; }
.sticky-slip__name span { font: 600 14px/18px var(--font-printed); color: var(--carbon); }
.sticky-slip .btn { min-height: 44px; padding: 0 14px; flex: none; }

@media (min-width: 1100px) {
  .js .sticky-slip { display: none; }
  .strip .btn { display: none; } /* the requisition slip on the right is the buy control from frame 0 */
  .desk { display: grid; grid-template-columns: 180px 760px 180px; gap: 40px; padding-inline: 0; align-items: start; }
  .pile { grid-column: 2; }
  .route, .rail-buy { display: block; position: sticky; top: 24px; }
  .route { grid-column: 1; grid-row: 1; margin-top: 26px; padding: 40px 12px 14px; background: var(--flimsy) var(--tex-bond) 0 0 / 512px; border: 1px solid var(--bond-shade); box-shadow: var(--shadow-paper); rotate: -1deg; }
  .route__clip { position: absolute; top: -30px; left: 14px; height: 70px; width: auto; rotate: 6deg; filter: drop-shadow(0 1px 1px rgb(29 28 26 / .35)); }
  .route__title { font: 600 12px/16px var(--font-printed); letter-spacing: .14em; text-transform: uppercase; color: var(--carbon); padding-bottom: 6px; border-bottom: 2px solid var(--carbon); }
  .route a {
    position: relative; display: grid; grid-template-columns: 1fr; align-items: baseline; padding: 7px 4px 5px 0; text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 18px; background: transparent;
    transition: transform 240ms var(--ease-feed), background-color 240ms ease;
  }
  .route .code { grid-column: 1 / -1; font: 600 11px/14px var(--font-printed); letter-spacing: .08em; color: var(--carbon); }
  .route .init { font: italic 400 13px/18px var(--font-typed); position: absolute; right: 4px; bottom: 5px; width: 4ch; clip-path: inset(0 100% 0 0); white-space: nowrap; color: var(--carbon); }
  .route a:hover { background: rgb(36 56 122 / .06); }
  .route a[aria-current="true"] { transform: translateX(8px); background: var(--bond); box-shadow: -6px 0 0 var(--bond); }
  .route li.passed .init { clip-path: inset(0 0 0 0); animation: init-type 160ms steps(4) both; }
  @keyframes init-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  .rail-buy { grid-column: 3; grid-row: 1; margin-top: 26px; }
  .rail-buy__slip { padding: 14px 14px 16px; background: var(--flimsy); border: 1px solid var(--rule); box-shadow: var(--shadow-paper); rotate: .8deg; }
  .rail-buy .thumb { display: block; width: 96px; height: auto; aspect-ratio: 1 / 2; margin: 0 auto 12px; }
  .rail-buy__name { font: 700 16px/22px var(--font-typed); }
  .rail-buy__price { font: 600 14px/20px var(--font-printed); color: var(--carbon); margin: 2px 0 12px; }
  .rail-buy .btn { width: 100%; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
  .desk { grid-template-columns: 150px minmax(0, 740px) 150px; gap: 16px; justify-content: center; }
  .rail-buy__slip { padding-inline: 10px; }
  .rail-buy .btn { padding-inline: 4px; white-space: nowrap; }
}