/* The ticket that follows you (concept A+, 2026-11-05). Every element here is created by
   /assets/ticket/dock.js, so with JavaScript off none of it exists and the page is plain text.
   Two layouts, set by dock.js: "card" (1200px and wider, a card bottom right) and "chip" (narrower,
   a bar along the bottom that opens into a sheet). Either one shows ONLY where it covers no text:
   dock.js measures the footprint (.tk-zone) after every scroll and keeps the dock away otherwise. */
@view-transition{navigation:auto}
.tk-dock{--w:280px;--ink:#171715;--lime:#efff3d;--cream:#f4f0e6;--hanko:#ff5a3c;
  position:fixed;z-index:60;right:24px;bottom:24px;width:var(--w);color:var(--cream);font-family:"Barlow",system-ui,sans-serif;
  view-transition-name:mjh-ticket;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease-out}
.tk-dock .mono{font-family:"Space Mono",ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.04em}
.tk-dock.is-away{transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .2s ease-in,opacity .2s,visibility 0s .2s}
.tk-zone{position:fixed;right:24px;bottom:24px;width:280px;height:250px;visibility:hidden;pointer-events:none;z-index:-1}
.tk-endzone{height:132px}
.tk-scrim{display:none}
.tk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tk-slot{position:relative;width:var(--w);height:calc(var(--w)*.46);cursor:pointer;touch-action:manipulation}
.tk-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease-out}
.tk-slot .tk-3d{position:absolute;inset:0}
.tk-slot .tk-3d canvas{display:block;opacity:0;transition:opacity .35s ease-out}
.tk-slot.is-live .tk-3d canvas{opacity:1}
.tk-slot.is-live .tk-still{opacity:0}
.tk-body{background:var(--ink);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--lime);padding:12px 14px;margin-top:-4px}
.tk-id{margin:0 0 8px;font-size:10px;color:#e8c46a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-next{display:grid;grid-template-columns:1fr auto;align-items:end;text-decoration:none;background:var(--lime);color:var(--ink);padding:8px 10px 9px;border:2px solid var(--lime);min-height:44px}@media (hover:hover){.tk-next:hover{background:#f6ff8a}}
.tk-k{grid-column:1/-1;font-size:9px}
.tk-l{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:21px;line-height:1}
.tk-arrow{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:25px;line-height:1}
.tk-dock[data-mode=here] .tk-next{background:transparent;color:var(--lime);border-style:dashed}
.tk-dock[data-mode=here] .tk-arrow{visibility:hidden}
.tk-prog{margin:8px 0 0;font-size:9px;color:#cfcabb}
.tk-prog i{display:block;height:4px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);margin-bottom:5px;transition:transform .25s linear}
.tk-prog:not([hidden])::after{content:"Keep reading for this stop's stamp";display:block;font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
.tk-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.tk-stamps{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.tk-stamps li{width:30px;height:30px;border-radius:50%;border:1.5px dashed #8f8b80;display:grid;place-items:center;color:#a8a396}
.tk-stamps i{font-style:normal;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:14px}
.tk-stamps li.is-in{border:3px double var(--hanko);color:var(--hanko);transform:rotate(-8deg)}
.tk-stamps b,.tk-mark b{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:700;white-space:nowrap;line-height:1}
.tk-stamps b{font-size:15px;letter-spacing:-.06em}
.tk-stamps li.two b{font-size:10px;letter-spacing:-.1em}
.tk-count{margin:0;font-size:10px;color:#e4e0d4;text-align:right;white-space:nowrap}
/* V6 (visual review 2026-11-05): on the desktop card "5 STAMPS WAITING" is wider than the room beside five 30px stamps
   (it ran 10-30px past the box). The stamps keep their size and the count takes two lines in the room left ("5 STAMPS /
   WAITING"), which stays inside the stamps' 30px row, so the card keeps one height at every count. */
.tk-dock[data-layout=card] .tk-stamps{flex:none}
.tk-dock[data-layout=card] .tk-count{flex:1 1 0;min-width:0;white-space:normal;line-height:1.2}
.tk-list,.tk-open,.tk-close{display:none}
@keyframes tk-press{0%{transform:rotate(-8deg) scale(1.55);opacity:0}55%{transform:rotate(-8deg) scale(1);opacity:1;filter:blur(.8px)}100%{transform:rotate(-8deg) scale(1);opacity:1;filter:blur(0)}}
.tk-stamps li.is-landing{animation:tk-press .42s cubic-bezier(.5,0,.75,0) both}

/* ---- chip: under 1200px. A 64px bar; tap it for the sheet. */
.tk-dock[data-layout=chip]{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:460px;margin:0 auto;height:64px}
.tk-zone[data-layout=chip]{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:460px;margin:0 auto;height:64px}
.tk-dock[data-layout=chip]>.tk-slot{position:absolute;left:4px;top:4px;width:104px;height:56px;z-index:2}
.tk-dock[data-layout=chip] .tk-body{position:absolute;inset:0;margin:0;padding:8px 10px 8px 114px;box-shadow:4px 4px 0 var(--lime);display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px}
.tk-dock[data-layout=chip] .tk-id{display:none}
.tk-dock[data-layout=chip] .tk-next{grid-column:1;background:none;color:var(--lime);border:0;padding:0;grid-template-columns:1fr;min-width:0;min-height:0}
.tk-dock[data-layout=chip] .tk-k{color:#cfcabb}
.tk-dock[data-layout=chip] .tk-l{font-size:22px;color:var(--lime)}
.tk-dock[data-layout=chip] .tk-arrow{display:none}
.tk-dock[data-layout=chip] .tk-prog{grid-column:1/-1;margin:2px 0 0}
.tk-dock[data-layout=chip] .tk-prog::after{display:none}
.tk-dock[data-layout=chip] .tk-prog i{height:3px;margin:0}
.tk-dock[data-layout=chip] .tk-row{grid-column:2;grid-row:1;margin:0;flex-direction:column;align-items:flex-end;gap:4px}
.tk-dock[data-layout=chip] .tk-stamps{gap:3px}
.tk-dock[data-layout=chip] .tk-stamps li{width:13px;height:13px;border-width:1px}
.tk-dock[data-layout=chip] .tk-stamps li.is-in{border:0;background:var(--hanko);transform:none}
.tk-dock[data-layout=chip] .tk-stamps li b,.tk-dock[data-layout=chip] .tk-stamps li i{display:none}
.tk-dock[data-layout=chip] .tk-count{font-size:9px}
.tk-dock[data-layout=chip] .tk-open{display:block;position:absolute;right:0;top:0;bottom:0;width:96px;opacity:0;z-index:3;border:0;background:none;cursor:pointer}
/* the sheet: the big ticket, the stamp card and every stop */
.tk-dock.is-open{height:auto;max-height:calc(100dvh - 24px);overflow:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto}
.tk-dock.is-open>.tk-slot{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:2.2;margin:0 0 -4px}
.tk-dock.is-open .tk-body{position:relative;display:block;padding:14px 14px 16px;box-shadow:none;border:2px solid var(--lime)}
.tk-dock.is-open .tk-id{display:block;font-size:12px}
.tk-dock.is-open .tk-next{background:var(--lime);color:var(--ink);padding:10px 12px;grid-template-columns:1fr auto;min-height:48px}
.tk-dock.is-open .tk-l{color:var(--ink);font-size:30px}
.tk-dock.is-open .tk-k{color:var(--ink)}
.tk-dock.is-open .tk-arrow{display:block}
.tk-dock.is-open .tk-row{flex-direction:row;margin-top:12px}
.tk-dock.is-open .tk-stamps li{width:40px;height:40px;border-width:1.5px}
.tk-dock.is-open .tk-stamps li.is-in{background:none;border:3px double var(--hanko);transform:rotate(-8deg)}
.tk-dock.is-open .tk-stamps li b,.tk-dock.is-open .tk-stamps li i{display:block}
.tk-dock.is-open .tk-stamps b{font-size:17px}
.tk-dock.is-open .tk-stamps li.two b{font-size:12px}
.tk-dock.is-open .tk-count{font-size:11px}
.tk-dock.is-open .tk-list{display:block;list-style:none;margin:12px 0 0;padding:0;border-top:1px solid #3a3a35}
.tk-list a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid #3a3a35;text-decoration:none;font-size:15px;color:var(--cream)}
.tk-mark{width:26px;height:26px;border-radius:50%;border:1.5px dashed #8f8b80;display:grid;place-items:center}
.is-in .tk-mark{border:2px double var(--hanko);color:var(--hanko)}
.tk-mark b{font-size:11px;letter-spacing:-.08em}
.two .tk-mark b{font-size:8px}
.tk-state{font-size:9px;color:#cfcabb}
.is-next .tk-state{color:var(--lime)}
.tk-dock.is-open .tk-open{display:none}
.tk-dock.is-open .tk-close{display:block;position:absolute;right:8px;top:8px;z-index:4;background:var(--ink);color:var(--cream);border:1.5px solid var(--cream);font-size:11px;padding:12px 14px;min-height:44px;cursor:pointer}
html.tk-sheet-open .tk-scrim{display:block;position:fixed;inset:0;background:rgba(23,23,21,.55);z-index:59}
::view-transition-group(mjh-ticket){animation-duration:.32s}@media (prefers-reduced-motion:reduce){.tk-dock{transition:none!important}.tk-stamps li.is-landing{animation:none}.tk-still,.tk-slot .tk-3d canvas{transition:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}@media print{.tk-dock,.tk-zone,.tk-scrim,.tk-endzone{display:none!important}}