/* Carton: the article "Agentic commerce in a carton box". Kraft board panels with pinned paper artifacts.
   Panels flow (flex-wrap), so they work at every width; carton.js strings the pins together. */
.ctn{--kr:#c9a46e;--kr-d:#ad8650;--kr-l:#dcbd8c;--pp:#f6f1e2;--ink:#1d1a16;--red:#b93b2f;position:relative;margin:2.6rem 0 2.8rem;padding:3.4rem 1.6rem 2.2rem;
 background:
  repeating-linear-gradient(90deg,rgba(90,60,20,.07) 0 2px,transparent 2px 9px),
  radial-gradient(ellipse at 20% 15%,rgba(255,240,210,.35),transparent 60%),
  radial-gradient(ellipse at 85% 95%,rgba(90,58,20,.22),transparent 60%),
  linear-gradient(160deg,var(--kr-l),var(--kr) 45%,var(--kr-d));
 box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(80,52,16,.2) inset,4px 16px 30px -14px rgba(60,40,20,.55);
 clip-path:polygon(0 1.2%,4% 0,18% .8%,31% .1%,52% .9%,69% 0,86% .7%,100% .2%,99.6% 22%,100% 48%,99.5% 77%,100% 99.3%,82% 100%,63% 99.2%,44% 100%,27% 99.3%,9% 100%,0 99.1%,.4% 71%,0 44%,.5% 18%)}
.ctn::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.ctn-k{position:absolute;left:1.4rem;top:1.05rem;font:500 11px/1 "SuisseMono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(40,24,8,.62)}
.ctn-mark{position:absolute;right:1.4rem;top:.9rem;font:700 12px/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(163,32,29,.72);border:2px solid currentColor;padding:4px 8px 3px;transform:rotate(3deg)}
.ctn-tape{position:absolute;height:26px;width:110px;background:rgba(244,232,200,.62);box-shadow:0 1px 2px rgba(60,40,20,.18);z-index:3}
.ctn-board{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2.4rem 2rem;z-index:2}
.ctn-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.ctn-wire path{fill:none;stroke:#c74335;stroke-width:2.4;stroke-linecap:round}
.ctn figcaption{position:relative;z-index:2;margin:2rem auto 0;max-width:34rem;text-align:center;font:500 11px/1.6 "SuisseMono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(40,24,8,.72)}

/* every artifact */
.pa{position:relative;flex:0 0 auto;transform:rotate(var(--r,0deg));filter:drop-shadow(2px 6px 6px rgba(50,30,10,.32))}
.pa>.cpin{position:absolute;left:50%;top:-18px;width:30px;height:35px;margin-left:-15px;z-index:5;filter:drop-shadow(1px 3px 2px rgba(60,20,10,.45))}
.pa .yr{display:block;font:700 11px/1 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.5rem}
.pa p{margin:0}
/* paper slip */
.pa-note{width:13.5rem;background:var(--pp);padding:1.3rem 1.2rem 1.1rem;font:15px/1.35 "EB Garamond",Georgia,serif;color:var(--ink)}
.pa-note b{display:block;font:600 1.15rem/1.15 "Inter Tight",Arial,sans-serif;letter-spacing:-.02em;margin-bottom:.35rem}
/* manila hang tag */
.pa-tag{width:12rem;background:#e7d3a4;padding:1.6rem 1.1rem 1.1rem 1.1rem;clip-path:polygon(14% 0,86% 0,100% 11%,100% 100%,0 100%,0 11%);font:14px/1.35 "EB Garamond",Georgia,serif;color:#2b2112}
.pa-tag::before{content:"";position:absolute;left:50%;top:.55rem;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--kr);box-shadow:0 0 0 3px #c9a85a,inset 1px 1px 2px rgba(0,0,0,.35)}
.pa-tag b{display:block;font:600 1.05rem/1.15 "Inter Tight",Arial,sans-serif;letter-spacing:-.015em;margin-bottom:.3rem}
/* receipt */
.pa-receipt{width:14rem;background:#fbf8ef;padding:1.1rem 1.1rem 1.6rem;font:12px/1.5 "Courier New",monospace;color:#1d1a16;text-transform:uppercase;letter-spacing:.03em;
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
 mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.pa-receipt .rh{text-align:center;font-weight:700;letter-spacing:.12em;border-bottom:1px dashed #9c958a;padding-bottom:.4rem;margin-bottom:.4rem}
.pa-receipt .rl{display:flex;justify-content:space-between;gap:.6rem}
.pa-receipt .rt{border-top:1px dashed #9c958a;margin-top:.4rem;padding-top:.4rem;font-weight:700}
.pa-receipt .rr{color:var(--red);font-weight:700;margin-top:.4rem}
/* ledger page */
.pa-ledger{width:16rem;background:#f3edda;padding:1rem 1rem 1.1rem;font:13px/1.9 "EB Garamond",Georgia,serif;color:#2a2418;
 background-image:linear-gradient(90deg,transparent 58%,rgba(185,59,47,.5) 58% calc(58% + 1px),transparent calc(58% + 1px) 79%,rgba(185,59,47,.5) 79% calc(79% + 1px),transparent calc(79% + 1px)),repeating-linear-gradient(180deg,transparent 0 23px,rgba(70,90,140,.28) 23px 24px)}
.pa-ledger .lh{display:flex;font:700 10px/2.4 "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase}
.pa-ledger .lr{display:flex;font-style:italic}
.pa-ledger .lh span:first-child,.pa-ledger .lr span:first-child{width:58%}.pa-ledger .lh span,.pa-ledger .lr span{width:21%;padding-left:6px}
/* price ticket */
.pa-price{width:9.5rem;background:#fbf6ea;border:2px solid #2a2418;padding:1rem .9rem .9rem;text-align:center;font:13px/1.3 "EB Garamond",Georgia,serif;color:#2a2418}
.pa-price .pp{display:block;font:600 2.3rem/1 "Inter Tight",Arial,sans-serif;letter-spacing:-.04em;margin:.2rem 0}
.pa-price::after{content:"";position:absolute;inset:4px;border:1px solid #2a2418;pointer-events:none}
/* charge card */
.pa-card{width:15rem;aspect-ratio:1.586;background:linear-gradient(135deg,#efe6cf,#e2d4b0);border-radius:9px;padding:.9rem 1rem;font:12px/1.4 "Courier New",monospace;letter-spacing:.06em;color:#2b2112;text-transform:uppercase;display:flex;flex-direction:column;justify-content:space-between}
.pa-card b{font:600 1.05rem/1.1 "Inter Tight",Arial,sans-serif;letter-spacing:-.01em;text-transform:none}
.pa-card .cn{font-size:14px;letter-spacing:.18em}
/* barcode */
.pa-bar{width:13rem;background:#fbf8ef;padding:1rem 1rem .8rem;text-align:center;font:12px/1.3 "Courier New",monospace;letter-spacing:.12em;color:#1d1a16}
.pa-bar i{display:block;height:4.6rem;margin:.1rem 0 .4rem;background:repeating-linear-gradient(90deg,#111 0 2px,#fbf8ef 2px 4px,#111 4px 5px,#fbf8ef 5px 8px,#111 8px 11px,#fbf8ef 11px 12px,#111 12px 13px,#fbf8ef 13px 16px)}
/* shipping label / airbill */
.pa-label{width:16rem;background:#fbf8ef;border:2px solid #1d1a16;font:12px/1.35 "Courier New",monospace;color:#1d1a16;text-transform:uppercase;letter-spacing:.04em}
.pa-label .lb{display:flex;border-bottom:2px solid #1d1a16}
.pa-label .lb>div{flex:1;padding:.45rem .6rem}.pa-label .lb>div+div{border-left:2px solid #1d1a16}
.pa-label .lb small{display:block;font-size:9px;letter-spacing:.14em;opacity:.7}
.pa-label .lx{padding:.5rem .6rem;font-weight:700;font-size:15px;letter-spacing:.1em}
.pa-label .lx.red{background:var(--red);color:#fbf8ef}
/* machine-readable record */
.pa-json{width:17rem;background:#fbf8ef;padding:1rem 1.1rem;font:12px/1.55 "Courier New",monospace;color:#1d1a16;white-space:pre;overflow:hidden;border-left:4px solid var(--red)}
.pa-json .k{color:#7a3b10}.pa-json .s{color:#2f5a2e}
/* torn browser page */
.pa-page{width:15rem;background:#fbf8ef;padding:0 0 1rem;font:12px/1.4 "Courier New",monospace;color:#3a342a}
.pa-page .bb{display:flex;gap:4px;padding:.45rem .6rem;border-bottom:1px solid #cfc6b2;background:#ece5d3}.pa-page .bb i{width:8px;height:8px;border-radius:50%;background:#bfb6a2}
.pa-page .pg{padding:.7rem .8rem 0}.pa-page .pg b{display:block;height:9px;background:#d8cfbb;margin:.45rem 0}.pa-page .pg b.w{width:60%}.pa-page .pg b.x{height:44px;background:repeating-linear-gradient(45deg,#e4dccb 0 6px,#d8cfbb 6px 12px)}
.pa-page .pg .pop{display:block;margin:.6rem 0 0;padding:.45rem .5rem;border:2px solid #1d1a16;background:#fff;font-weight:700;text-transform:uppercase;font-size:11px}
.pa-page .pg .err{display:block;margin-top:.5rem;color:var(--red);font-weight:700;text-transform:uppercase;font-size:11px}
/* cut-out object photo */
.pa-cut{width:var(--w,12rem);filter:drop-shadow(3px 12px 10px rgba(50,30,10,.42))}
.pa-cut img{display:block;width:100%;height:auto}
.pa-cut .cap{display:block;margin:.4rem auto 0;width:max-content;max-width:100%;background:var(--pp);padding:.3rem .55rem;font:700 10px/1.3 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;color:#2a2418;transform:rotate(-2deg)}
/* the flag pin (Amazon) */
.pa-flag{width:11rem;padding-top:2.6rem;filter:none}
.pa-flag .fp{position:absolute;left:50%;top:-6px;width:58px;height:68px;margin-left:-29px;z-index:5;filter:drop-shadow(2px 6px 4px rgba(60,20,10,.5))}
.pa-flag .fl{display:block;background:#f4ead0;border:2px solid #2a2418;padding:.8rem .9rem;text-align:center;filter:drop-shadow(2px 6px 6px rgba(50,30,10,.32))}
.pa-flag .fl b{display:block;font:600 1.5rem/1 "Inter Tight",Arial,sans-serif;letter-spacing:-.03em}
.pa-flag .fl span{display:block;margin-top:.35rem;font:700 11px/1.3 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* hero: an open carton, front-on */
.cbox{position:relative;display:block;width:min(100%,46rem);aspect-ratio:16/9.6;height:auto;margin:2.2rem auto 2.4rem;overflow:visible}
.cbox>*{box-sizing:border-box}
.cbox .cb-back{position:absolute;left:9%;right:9%;top:26%;height:14%;background:linear-gradient(180deg,#6f5029,#a47e4b);z-index:1}
.cbox .cb-fl-l,.cbox .cb-fl-r{position:absolute;top:14%;width:44%;height:25%;background:linear-gradient(180deg,#d9b884,#c49d65);z-index:1;box-shadow:inset 0 -3px 0 rgba(80,52,16,.18)}
.cbox .cb-fl-l{left:0;clip-path:polygon(0 0,82% 18%,100% 100%,22% 100%);transform:rotate(-4deg)}
.cbox .cb-fl-r{right:0;clip-path:polygon(18% 18%,100% 0,78% 100%,0 100%);transform:rotate(4deg)}
.cbox .cb-front{position:absolute;left:9%;right:9%;top:39%;bottom:3%;z-index:3;
 background:repeating-linear-gradient(90deg,rgba(90,60,20,.06) 0 2px,transparent 2px 9px),linear-gradient(170deg,#dcbd8c,#c9a46e 55%,#b38c56);box-shadow:0 22px 34px -18px rgba(60,40,20,.6),inset 0 2px 0 rgba(255,255,255,.35)}
.cbox .cb-front::after{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:rgba(255,248,232,.32);border-bottom:1px solid rgba(120,90,40,.15)}
.cbox .cb-in{position:absolute;left:12%;right:12%;top:-14%;height:58%;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:0}
.cbox .cb-in>*{flex:0 0 auto;filter:drop-shadow(2px 6px 6px rgba(50,30,10,.35))}
.cbox .cb-lab{position:absolute;left:7%;top:50%;width:54%;background:#fbf8ef;border:3px solid #111;padding:2.6% 3.6%;transform:rotate(-2deg);z-index:4}
.cbox .cb-lab small{display:block;font:700 clamp(8px,1.3vw,11px)/1.3 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--red,#b93b2f)}
.cbox .cb-lab b{display:block;margin-top:.3em;font:600 clamp(18px,3.4vw,30px)/1.02 "Inter Tight",Arial,sans-serif;letter-spacing:-.035em;color:#111}
.cbox .cb-st{position:absolute;right:9%;top:52%;z-index:4;border:3px solid #a3201d;color:#a3201d;font:700 clamp(9px,1.8vw,15px)/1.2 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;padding:.2em .5em;transform:rotate(9deg);opacity:.88;text-align:center}
.cbox .cb-ct{position:absolute;left:12%;bottom:8%;z-index:4;font:clamp(8px,1.4vw,12px)/1.5 "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase;color:#3a2a12}
.cbox .cb-ar{position:absolute;right:12%;bottom:8%;z-index:4;width:12%;color:#3a2a12;opacity:.75}
@media(max-width:640px){.cbox .cb-ct{display:none}.ctn{padding:3.2rem .9rem 1.8rem;margin-inline:-6px}.ctn-board{gap:2.2rem 1rem}.pa-ledger,.pa-label,.pa-json{width:min(16rem,100%)}.pa-json{font-size:11px}.ctn-mark{display:none}}
@media(prefers-reduced-motion:no-preference){.pa{transition:transform .35s ease}.pa:hover{transform:rotate(calc(var(--r,0deg)*.3)) translateY(-3px)}}
/* blog hero: a matted print of the carton that opens the interactive version */
.ctn-open{position:relative;display:block;margin:1.6rem 0 2.6rem;text-decoration:none;color:inherit}
.ctn-open .co-print{display:block;background:#e9e1cc;border:8px solid #c4ad83;box-shadow:4px 18px 30px -14px rgba(60,40,20,.55);transform:rotate(-.6deg);transition:transform .35s}
.ctn-open .co-print img{display:block;width:100%;height:auto}
.ctn-open:hover .co-print{transform:rotate(0) translateY(-3px)}
.ctn-open .co-tag{position:absolute;right:-.6rem;bottom:-1.4rem;display:flex;flex-direction:column;gap:.3rem;background:#1d1a16;color:#f4f1e6;padding:.85rem 1.2rem .8rem 2.3rem;clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);transform:rotate(-2deg);transition:background .2s}
.ctn-open .co-tag::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#c9a46e;box-shadow:0 0 0 2px #b8913f}
.ctn-open .co-tag b{font:600 12px/1 "SuisseMono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
.ctn-open .co-tag span{font:14px/1.2 "EB Garamond",Georgia,serif;color:#d9cfb9}
.ctn-open:hover .co-tag{background:#b93b2f}
@media(max-width:640px){.ctn-open .co-tag{position:relative;right:auto;bottom:auto;margin:-1rem 0 0 auto;width:max-content;max-width:92%}}