/* /carttrace/story: CartTrace-100k told like /agentic-commerce. Machine Commerce type and paper (DESIGN.md, TASTE.md):
   Inter Tight for display, EB Garamond for reading, SuisseMono for labels; ink, stamp red, kraft. Full motion. */
@font-face{font-family:"Inter Tight";src:url(/assets/fonts/inter-tight-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"EB Garamond";font-weight:400;font-display:swap;src:url(/assets/fonts/eb-400.woff) format("woff")}
@font-face{font-family:"EB Garamond";font-weight:500;font-display:swap;src:url(/assets/fonts/eb-500.woff) format("woff")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-i400.woff) format("woff")}
@font-face{font-family:"SuisseMono";font-weight:400;font-display:swap;src:url(/assets/fonts/suisse-mono-400.otf) format("opentype")}
@font-face{font-family:"SuisseMono";font-weight:500 900;font-display:swap;src:url(/assets/fonts/suisse-mono-500.otf) format("opentype")}

:root{--paper:#f4f1e6;--white:#fffdf8;--ink:#1d1a16;--body:#2c2620;--mute:#7c6f59;--rule:#d6cdb8;--red:#a8322a;--kraft:#d2b48c;--kraft-d:#b89a6d;--kraft-t:#e6ccab;--oat:#e3dacc;
  --disp:"Inter Tight","Helvetica Neue",Arial,sans-serif;--serif:"EB Garamond",Garamond,Georgia,serif;--mono:"SuisseMono","Courier New",monospace}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--body);font:400 19px/1.5 var(--serif);-webkit-font-smoothing:antialiased;transition:background-color .9s ease}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,rgba(80,52,16,.035) 0 1px,transparent 1px 4px)}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);padding:.5rem}
h1,h2{font-family:var(--disp);color:var(--ink);margin:0;letter-spacing:-.045em;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid #2B6CB0;outline-offset:3px}

/* ---------- HUD, as on /agentic-commerce ---------- */
.t-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:70}.t-prog i{display:block;height:100%;width:0;background:var(--red)}
.t-hud{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 20px 22px;background:linear-gradient(180deg,rgba(244,241,230,.96) 0,rgba(244,241,230,.9) 70%,rgba(244,241,230,0) 100%)}
.t-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.t-brand img{width:30px}
.t-brand span{font:600 15px/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.t-chip{display:flex;align-items:center;gap:.6rem;background:var(--white);border:1px solid rgba(70,50,20,.18);padding:7px 13px 6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 14px -10px rgba(60,40,20,.5)}
.t-chip b{color:var(--red);font-weight:500}
.t-tools{display:flex;gap:.5rem}
.t-btn{display:inline-flex;align-items:center;min-height:34px;background:var(--white);border:1px solid rgba(70,50,20,.25);padding:7px 12px 6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:pointer}
.t-btn:hover{background:var(--ink);color:var(--white)}
.t-menu{position:fixed;right:20px;top:62px;z-index:65;width:min(340px,calc(100vw - 40px));background:var(--white);padding:1.1rem 1.2rem;box-shadow:0 22px 40px -20px rgba(60,40,20,.6);transform:rotate(.6deg)}
.t-menu ol{list-style:none;margin:0;padding:0}
.t-menu a{display:flex;gap:.8rem;padding:.45rem 0;border-bottom:1px dashed var(--rule);text-decoration:none;font:400 1.02rem/1.2 var(--serif);color:var(--ink)}
.t-menu a span{font:500 10.5px/1.8 var(--mono);color:var(--red)}

/* ---------- chapters ---------- */
main{position:relative;z-index:1}
.ch{position:relative;min-height:100vh;padding:clamp(6rem,12vh,9rem) clamp(16px,6vw,7rem) clamp(4rem,10vh,7rem);display:grid;align-content:center;gap:clamp(1.6rem,4vh,3rem)}
.say{max-width:44rem}
.say .n{display:block;font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--red);margin-bottom:1rem}
.say h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);line-height:1.02}
.say p{margin-top:1.1rem;font-size:clamp(1.1rem,1rem + .4vw,1.35rem);max-width:36rem}
.num{font-variant-numeric:tabular-nums}
.cap{font:400 11px/1.5 var(--mono);color:var(--mute);letter-spacing:.03em}

/* 00 · the note */
.ch-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,6vw,6rem)}
.note{position:relative;justify-self:center;width:min(430px,100%);background:#fffbe8;padding:2.2rem 1.8rem 1.8rem;transform:rotate(-2.5deg);box-shadow:0 30px 40px -28px rgba(60,40,20,.6);background-image:linear-gradient(transparent 31px,#dfe6ee 32px);background-size:100% 32px;background-position:0 58px}
.note .pin{position:absolute;left:50%;top:-18px;width:34px;height:40px;margin-left:-17px}
.note-hd{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:1rem}
.note-hd b{font-weight:500;color:var(--red);text-transform:none;letter-spacing:.02em}
.note p{font:italic 400 1.45rem/32px var(--serif);color:var(--ink)}
.open-copy .kick{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.open-copy h1{font-size:clamp(3rem,1.6rem + 5vw,6.4rem);line-height:.95;margin:.9rem 0 1.2rem}
.open-copy h1 .num{color:var(--red)}
.open-copy .sub{font-size:clamp(1.15rem,1rem + .5vw,1.45rem);max-width:32rem}
.cue{margin-top:2.4rem !important;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(6px);opacity:.5}}

/* 01 · the shopper */
.ch-shopper{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.chat{display:grid;gap:.9rem;justify-items:start;max-width:560px}
.bub{max-width:92%;padding:.9rem 1.1rem;font:400 1.15rem/1.45 var(--serif);box-shadow:0 14px 22px -18px rgba(60,40,20,.55)}
.bub i{display:block;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:.4rem}
.bub.shop{background:var(--white);border:1px solid rgba(70,50,20,.15)}
.bub.agent{justify-self:end;background:#2b2a27;color:#efeadc}
.bub.reply{border-color:var(--red)}
.ask{justify-self:end;display:grid;gap:3px;text-align:left;padding:.85rem 1.1rem;background:var(--red);color:#fbf3e4;border:0;cursor:pointer;outline:2px dashed #fbf3e4;outline-offset:-7px;box-shadow:0 10px 16px -10px rgba(80,20,10,.6);transition:transform .2s}
.ask small{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f3dcb2}
.ask b{font:700 1.2rem/1 var(--disp);letter-spacing:-.03em}
.ask:hover{transform:rotate(-2deg) translateY(-2px)}

/* 02 · the stores */
.street{display:grid;gap:5px;max-width:1100px}
.st-row{display:grid;grid-template-columns:11rem 1fr 2.4rem;align-items:center;gap:.8rem;font:400 11px/1 var(--mono);color:var(--body)}
.st-row div{display:flex;flex-wrap:wrap;gap:2px}
.st-row i{display:block;width:12px;height:12px;border-radius:1px;background:var(--kraft-d)}
.st-row b{font-weight:500;text-align:right;color:var(--mute)}

/* 03 · one trip */
.ch-trip{display:block;padding:0}
.pin-wrap{height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:5.5rem clamp(16px,6vw,7rem) 2rem}
.roll{position:relative;height:min(76vh,680px);overflow:hidden;background:var(--white);box-shadow:0 30px 40px -28px rgba(60,40,20,.6);-webkit-mask:linear-gradient(transparent 0,#000 8%,#000 100%);mask:linear-gradient(transparent 0,#000 8%,#000 100%)}
.roll-in{padding:1.4rem 1.6rem 3rem;will-change:transform}
.roll-in>*{opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;margin:0 0 .7rem}
.roll-in>.on{opacity:1;transform:none}
.r-msg{font:400 1.02rem/1.4 var(--serif);color:var(--ink);padding-left:5.6rem;position:relative}
.r-msg i{position:absolute;left:0;top:.25rem;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.r-msg.r-agent{color:#3b3a36}
.r-msg.r-wallet{color:var(--red)}
.r-call{font:400 12px/1.45 var(--mono);color:var(--body);padding-left:5.6rem;border-left:0}
.r-call b{font-weight:500;color:var(--ink)}
.r-call em{font-style:normal;color:var(--mute)}
.r-end{display:inline-block;margin-top:.6rem !important;margin-left:5.6rem !important;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:2.5px solid var(--red);padding:.55rem .8rem;transform:rotate(-3deg) !important}

/* 04 · a hundred trips */
.ch-belt{display:block;padding:0}
.ch-belt .pin-wrap{grid-template-columns:1fr;align-content:center;gap:2rem}
.belt{position:relative;display:grid;gap:2.4rem}
.b-pile{display:grid;grid-template-columns:repeat(25,10px);gap:1px;width:max-content}
.tok{display:block;width:9px;height:9px;background:var(--ink);border-radius:1px;position:relative;z-index:2}
.b-bins{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.7rem;align-items:end}
.bin{display:grid;gap:.35rem;align-content:end}
.bin .slots{height:96px;border:1.5px solid var(--ink);border-top:0;background:rgba(255,253,248,.6)}
.bin b{font:700 1.6rem/1 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.bin span{font:400 10.5px/1.3 var(--mono);color:var(--body)}
.bin.till .slots{border-color:var(--red)}
.bin.till b,.bin.till span{color:var(--red)}
.bin.sold .slots{height:140px;background:var(--white)}
.bin.sold b{color:var(--ink)}

/* 05 · the till */
.ch-till{justify-items:start}
.stamps{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;max-width:1100px}
.stp{display:grid;justify-items:center;gap:.15rem;padding:1rem 1.3rem;border:3px solid var(--red);color:var(--red);transform:rotate(var(--r));min-width:11rem;text-align:center;background:rgba(255,253,248,.5);mix-blend-mode:multiply}
.stp span{font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.stp b{font:800 2.2rem/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.stp em{font:500 1rem/1 var(--mono);font-style:normal}
.stp small{font:400 9.5px/1.3 var(--mono);color:#8b4a42}

/* 06 · asking */
.ch-ask{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.scale{background:var(--white);padding:1.6rem 1.6rem 1.3rem;box-shadow:0 22px 30px -24px rgba(60,40,20,.55);max-width:560px}
.seg{display:inline-flex;border:1.5px solid var(--ink);margin-bottom:1.4rem}
.seg button{border:0;background:transparent;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.75rem .9rem;cursor:pointer;color:var(--ink)}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.dial b{display:block;font:700 clamp(3.6rem,2.4rem + 4vw,6rem)/1 var(--disp);letter-spacing:-.05em;color:var(--ink)}
.dial span{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.meter{position:relative;height:70px;margin:1.6rem 0 .6rem}
.meter .ax{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:.35rem}
.meter .ax em{font:400 10.5px/1 var(--mono);font-style:normal;color:var(--mute)}
.meter .zero{position:absolute;left:50%;top:0;bottom:16px;border-left:1.5px solid var(--ink)}
.meter .bar{position:absolute;top:8px;height:28px;background:var(--ink);transition:left .5s,width .5s}
.meter .bar.unclear{background:var(--mute)}
.meter .ci{position:absolute;top:44px;height:0;border-top:2.5px solid var(--red);transition:left .5s,width .5s}

/* 07 · giving up */
.shelf{display:grid;gap:.9rem;max-width:860px;width:100%}
.sh-row{display:grid;grid-template-columns:12rem 1fr 4.2rem;align-items:center;gap:1rem;font:400 12px/1.2 var(--mono)}
.sh-t{height:14px;background:var(--oat)}.sh-t i{display:block;height:100%;background:var(--ink)}
.stk{justify-self:start;font:700 12px/1 var(--mono);color:#fbf3e4;background:var(--red);padding:.45rem .5rem;transform:rotate(-4deg);box-shadow:0 6px 10px -6px rgba(80,20,10,.6)}
.stk.low{background:var(--ink)}
.sh-ax{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:.35rem}
.sh-ax em{font:400 10.5px/1 var(--mono);font-style:normal;color:var(--mute)}
.gap{font:12px var(--mono);color:var(--mute)}

/* 08 · again */
.ch-again{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.tries{display:grid;gap:1.4rem}
.tickets{display:flex;gap:.7rem;min-height:120px;flex-wrap:wrap}
.tkt{display:grid;gap:.3rem;align-content:center;width:8.5rem;height:6.4rem;padding:.8rem;background:var(--kraft-t);transform:rotate(var(--r));-webkit-mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.tkt span{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.tkt b{font:700 1.05rem/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.slide{display:flex;align-items:center;gap:1rem;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);max-width:420px}
.slide input{flex:1;accent-color:var(--red)}
.slide b{font:700 1.6rem/1 var(--disp);color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:520px}
.pair div{background:var(--white);padding:1rem 1.1rem;box-shadow:0 14px 22px -20px rgba(60,40,20,.5)}
.pair b{display:block;font:700 2.8rem/1 var(--disp);letter-spacing:-.05em;color:var(--ink)}
.pair div:last-child b{color:var(--red)}
.pair span{font:400 11px/1.3 var(--mono);color:var(--mute)}

/* 09 · the categories */
.ch-cats{justify-items:start}
.fan{display:flex;flex-wrap:wrap;gap:1.2rem;max-width:1200px}
.fl{position:relative;display:grid;gap:.3rem;width:11.5rem;padding:1.2rem 1rem 1rem;background:var(--white);border:1px solid var(--rule);transform:rotate(var(--r));box-shadow:0 18px 22px -18px rgba(60,35,10,.55)}
.fl span{font:500 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fl b{font:700 1.15rem/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.fl em{font:700 2.4rem/1 var(--disp);font-style:normal;letter-spacing:-.05em;color:var(--ink);margin-top:.3rem}
.fl small{font:400 10px/1.3 var(--mono);color:var(--mute)}
.fl i{position:absolute;right:-.5rem;top:-.6rem;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .45rem;color:#fbf3e4;transform:rotate(6deg)}
.fl i.hard{background:var(--red)}.fl i.easy{background:var(--ink)}
.more{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* 10 · the label */
.ch-end{justify-items:center}
.label{width:min(980px,100%);background:var(--white);border:2.5px solid var(--ink);box-shadow:0 34px 50px -30px rgba(60,35,10,.7);transform:rotate(-.6deg)}
.lb-top{display:flex;justify-content:space-between;padding:.7rem 1.4rem;background:var(--ink);color:var(--white);font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.lb-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:2.5px solid var(--ink)}
.lb-from,.lb-to{display:grid;gap:.3rem;padding:1.3rem 1.4rem}
.lb-from{border-right:2.5px solid var(--ink)}
.label i{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.lb-from b,.lb-to b{font:700 clamp(1.4rem,1rem + 1.4vw,2.2rem)/1.02 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.lb-from span,.lb-to span{font:italic 400 1.05rem/1.3 var(--serif)}
.lb-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2.5px solid var(--ink)}
.lb-item{display:grid;gap:.3rem;padding:1.1rem 1.4rem;text-decoration:none;color:var(--ink)}
.lb-item+.lb-item{border-left:1.5px dashed var(--ink)}
.lb-item b{font:700 1.4rem/1 var(--disp);letter-spacing:-.03em}
.lb-item .go{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.lb-item.soon .go{color:var(--mute)}
a.lb-item:not(.soon):hover{background:var(--oat)}
.lb-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.2rem 1.4rem}
.stamp{display:grid;gap:3px;padding:1rem 1.3rem;background:var(--red);color:#fbf3e4;text-decoration:none;outline:2px dashed #fbf3e4;outline-offset:-8px;box-shadow:0 10px 16px -10px rgba(80,20,10,.6);transform:rotate(-1.5deg);transition:transform .2s}
.stamp small{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f3dcb2}
.stamp b{font:700 1.3rem/1.05 var(--disp);letter-spacing:-.03em}
.stamp:hover{transform:rotate(-3deg) translateY(-2px)}
.fwd{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.lb-bar{height:42px;margin:0 1.4rem 1.2rem;background:repeating-linear-gradient(90deg,#1d1a16 0 2px,transparent 2px 4px,#1d1a16 4px 5px,transparent 5px 8px,#1d1a16 8px 11px,transparent 11px 12px)}
.foot{font:400 10.5px/1.5 var(--mono);color:#5d4a2c;text-align:center}

/* ---------- phones ---------- */
@media(max-width:900px){
  .ch-open,.ch-shopper,.ch-ask,.ch-again,.pin-wrap{grid-template-columns:1fr}
  .pin-wrap{padding-top:5rem;align-content:start}
  .roll{height:58vh}
  .b-bins{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.4rem}
  .bin .slots{height:60px}.bin.sold .slots{height:80px}
  .lb-grid,.lb-row{grid-template-columns:1fr}
  .lb-from{border-right:0;border-bottom:2.5px solid var(--ink)}
  .lb-item+.lb-item{border-left:0;border-top:1.5px dashed var(--ink)}
}
@media(max-width:600px){
  .t-hud{padding:10px 12px 18px}.t-brand span{display:none}.t-tools .t-btn:first-child{display:none}
  .st-row{grid-template-columns:6.5rem 1fr 1.8rem;font-size:9.5px;gap:.4rem}.st-row i{width:7px;height:7px}
  .sh-row{grid-template-columns:7.5rem 1fr 3.6rem;font-size:10.5px}
  .r-msg,.r-call{padding-left:0}.r-msg i{position:static;display:block;margin-bottom:.2rem}.r-end{margin-left:0 !important}
  .b-pile{grid-template-columns:repeat(20,10px)}
  .stp{min-width:9rem;padding:.8rem}
  .fl{width:calc(50% - .6rem)}
}
@media(min-width:1900px){html{font-size:20px}main{zoom:1.25}}
html,body{overflow-x:clip}

/* one continuous board (owner, 27 Oct): chapters flow into each other like /agentic-commerce */
body{transition:none}
.ch{min-height:auto;padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(3rem,8vh,5rem)}
.ch-open{min-height:100vh}
.thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.thread path{fill:none;stroke:#c74335;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.ch>*{position:relative;z-index:1}
.stp.ok{border-color:var(--ink);color:var(--ink)}
.stp.ok small{color:var(--mute)}
.tkt.bad{background:#f0c9b8}
.tkt.bad b{color:var(--red)}
.credit{margin-top:1rem !important;font:400 11px/1.5 var(--mono);color:var(--mute)}.credit a{color:var(--ink)}
@font-face{font-family:"ITWeralionis";font-weight:400;font-display:swap;src:url(/assets/fonts/it-weralionis-demo.regular.otf) format("opentype")}
.t-brand span{font:400 22px/1 "ITWeralionis",Georgia,serif;font-style:normal;letter-spacing:-.01em;color:var(--ink)}
.t-brand img{width:32px}