/* About, below the fold: one order of Spicy Jackie. A kitchen printer at the bottom of the screen prints her story as you scroll. */
.about-flow .rc,.about-flow .rc-viewer{--ink:#201f19;--paper:#fbf8ef;--magenta:#842553;--ease:cubic-bezier(.2,.75,.1,1)}
.about-flow .rc{--pad:30px;--slot:150px;position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:0;background:radial-gradient(ellipse 60% 40% at 50% 100%,#5d2647 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 50% 0%,#3a1a30 0%,transparent 70%),#1d0f18}

/* Lead-in */
.about-flow .rc-lead{display:grid;justify-items:center;gap:14px;padding:clamp(72px,12vh,130px) 5% 30px;text-align:center}
.about-flow .rc-lead h2{margin:0;color:var(--cream);font-size:clamp(40px,6vw,86px);line-height:.92;letter-spacing:-.05em}
.about-flow .rc-lead p{margin:0;color:var(--lime);font:700 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.about-flow .rc-lead svg{width:22px;height:30px;fill:none;stroke:var(--lime);stroke-width:1.6;animation:rc-nudge 1.6s ease-in-out infinite}
@keyframes rc-nudge{50%{translate:0 6px}}

/* The paper */
.about-flow .rc-receipt{position:relative;width:min(440px,92vw);padding:34px var(--pad) 30px;background:var(--paper);color:var(--ink);font:500 15.5px/1.5 var(--body);letter-spacing:.03em;text-transform:uppercase;box-shadow:0 30px 60px -30px #000,0 0 0 1px #0000000d;
  -webkit-mask:radial-gradient(circle at 6px 0,transparent 5px,#000 5.5px) top/12px 6px repeat-x,linear-gradient(#000 0 0) bottom/100% calc(100% - 6px) no-repeat;
  mask:radial-gradient(circle at 6px 0,transparent 5px,#000 5.5px) top/12px 6px repeat-x,linear-gradient(#000 0 0) bottom/100% calc(100% - 6px) no-repeat}
.about-flow .rc-receipt::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/print-grain.svg');opacity:.35;mix-blend-mode:multiply}
.about-flow .rc-receipt :where(p){margin:0}
.about-flow .rc-receipt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.about-flow .rc-receipt a:hover{background:var(--lime)}
.about-flow .rc-logo{width:190px;margin:0 auto 14px}
.about-flow .rc-center{text-align:center}
.about-flow .rc-small{font-size:12.5px;letter-spacing:.08em;color:#4a463d}
.about-flow .rc-rule{height:0;margin:16px 0;border-top:2px dashed #201f1966}
.about-flow .rc-rule.is-double{border-top:3px double #201f19aa}
.about-flow .rc-h{margin:18px 0 10px;color:var(--ink);font:700 13px/1.2 var(--body);letter-spacing:.2em;text-align:center}
.about-flow .rc-part{scroll-margin-top:16px}
.about-flow .rc-row{display:flex;align-items:baseline;gap:8px}
.about-flow .rc-k{min-width:0}
.about-flow .rc-k a{text-decoration:none}
.about-flow .rc-fill{flex:1;min-width:16px;border-bottom:2px dotted #201f1955;translate:0 -4px}
.about-flow .rc-v{white-space:nowrap;font-weight:700}
.about-flow .rc-sub{margin:0 0 10px 22px;font-size:12.5px;letter-spacing:.06em;text-transform:none;color:#4a463d}
.about-flow .rc-qty{display:inline-block;min-width:22px;padding-right:6px;font-weight:700}
.about-flow .rc-big{font:700 26px/1.1 var(--body);letter-spacing:-.01em}
.about-flow .rc-huge{margin:22px 0 6px;font:700 clamp(40px,7vw,58px)/.9 var(--body);letter-spacing:-.04em;text-align:center}
.about-flow .rc-huge span{color:var(--magenta)}

/* Things stapled to the receipt */
.about-flow .rc-print{padding:7px;background:var(--cream);box-shadow:0 18px 28px -14px rgb(0 0 0 / 75%)}
.about-flow .rc-print img{width:100%;height:auto}
.about-flow .rc-stapled{position:relative;width:62%;margin:20px auto 8px;rotate:-3deg}
.about-flow .rc-stapled::before,.about-flow .rc-fan::before{content:'';position:absolute;top:-4px;left:18%;z-index:3;width:30px;height:7px;border:2px solid #9b978e;border-bottom:0;border-radius:2px 2px 0 0;box-shadow:0 1px 0 #0003}
.about-flow .rc-fan{position:relative;height:210px;margin:18px 0 6px}
.about-flow .rc-fan::before{left:44%}
.about-flow .rc-fan .rc-print{position:absolute;top:0;width:58%}
.about-flow .rc-fan .rc-print:nth-child(1){left:0;rotate:-7deg}
.about-flow .rc-fan .rc-print:nth-child(2){left:21%;top:16px;z-index:1;rotate:2deg}
.about-flow .rc-fan .rc-print:nth-child(3){right:0;top:4px;rotate:8deg}

/* Photos print the way a thermal printer would; hover shows the colour, a click opens the whole picture */
.about-flow .rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 6px}
.about-flow .rc-thermal{position:relative;display:block;aspect-ratio:1;overflow:hidden;cursor:zoom-in}
.about-flow .rc-thermal img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.5) brightness(1.1);transition:filter .6s var(--ease)}
.about-flow .rc-thermal::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,var(--paper) 0 34%,transparent 38%) 0 0/4px 4px;mix-blend-mode:screen;opacity:.75;pointer-events:none;transition:opacity .6s var(--ease)}
.about-flow .rc-thermal:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:hover){.about-flow .rc-thermal:hover img{filter:none}.about-flow .rc-thermal:hover::after{opacity:0}}
.about-flow .rc-hint{margin-top:6px;text-align:center;font-size:11.5px;letter-spacing:.12em;color:#6b665a}
.about-flow .rc-more{margin-top:14px}

/* Buttons on the paper */
.about-flow .rc-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:12px 14px;border:2px solid var(--ink);color:var(--ink);font:700 14px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important}
.about-flow .rc-button:hover,.about-flow .rc-button:focus-visible{background:var(--lime)}
.about-flow .rc-arrow{flex:none;width:20px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.about-flow .rc-arrow.is-down{width:15px;height:18px}
.about-flow .rc-link .rc-arrow{width:15px;height:13px;margin-left:5px;vertical-align:-1px}

/* Barcode and the tear-off stub */
.about-flow .rc-barcode{width:82%;height:54px;margin:18px auto 6px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 17px)}
.about-flow .rc-tear{display:flex;align-items:center;gap:10px;margin:22px calc(var(--pad) * -1) 18px;color:#6b665a;font-size:11px;letter-spacing:.2em}
.about-flow .rc-tear::before,.about-flow .rc-tear::after{content:'';flex:1;border-top:2px dashed #201f1966}
.about-flow .rc-stub{display:grid;gap:10px}

/* Printing: once the script is running, lines start faint and darken as they leave the slot */
.about-flow .rc.is-live .rc-ln{transition:color .5s ease,filter .5s ease}
.about-flow .rc.is-live .rc-ln:not(.is-printed){color:#b9b29f;filter:blur(.4px)}
.about-flow .rc.is-live .rc-pic{transition:opacity .7s ease,translate .7s var(--ease)}
.about-flow .rc.is-live .rc-pic:not(.is-printed){opacity:.15;translate:0 6px}

/* The printer */
.about-flow .rc-printer{position:sticky;bottom:0;z-index:5;width:min(560px,100%);height:var(--slot);margin-top:-6px;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#3b2733 0%,#22151d 30%,#140b11 100%);box-shadow:0 -14px 40px -10px #000,inset 0 1px 0 #ffffff1f}
.about-flow .rc-printer::before{content:'';position:absolute;top:18px;left:50%;width:min(470px,96%);height:10px;translate:-50% 0;border-radius:6px;background:#050204;box-shadow:inset 0 3px 4px #000,0 1px 0 #ffffff14}
.about-flow .rc-printer-label{position:absolute;top:50px;left:42px;color:#f3edd966;font:700 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase}
.about-flow .rc-led{position:absolute;top:50px;right:42px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.about-flow .rc-meter{position:absolute;left:42px;right:42px;bottom:32px;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden}
.about-flow .rc-meter span{display:block;width:100%;height:100%;transform-origin:0 50%;scale:var(--p,0) 1;background:var(--lime)}
.about-flow .rc-printer.is-cut{animation:rc-cut .35s ease}
@keyframes rc-cut{30%{translate:0 3px}60%{translate:0 -2px}}


/* The whole picture, in colour */
html:has(.rc-viewer[open]){overflow:hidden}
.about-flow .rc-viewer{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px 96px;border:0;background:#1d0f18f2;color:var(--ink);overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.about-flow .rc-viewer[open]{display:grid;place-items:center}
.about-flow .rc-viewer::backdrop{background:#000}
.about-flow .rc-viewer-print{display:grid;width:fit-content;margin:0;padding:10px 10px 0;background:var(--cream);box-shadow:0 30px 70px -20px #000;animation:rc-view .45s var(--ease)}
.about-flow .rc-viewer-print img{display:block;width:auto;max-width:min(1100px,calc(100vw - 212px));height:auto;max-height:calc(100dvh - 170px)}
.about-flow .rc-viewer figcaption{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;width:0;min-width:100%;padding:12px 4px 14px;font:500 14px/1.4 var(--body)}
.about-flow .rc-viewer-count{grid-row:span 2;color:var(--magenta);font-weight:700;letter-spacing:.08em}
.about-flow .rc-viewer figcaption strong{letter-spacing:.06em;text-transform:uppercase}
.about-flow .rc-viewer figcaption span:last-child{color:#4a463d}
.about-flow .rc-viewer button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid #f3edd94d;border-radius:50%;background:#1d0f18;color:var(--cream);cursor:pointer}
.about-flow .rc-viewer button:hover,.about-flow .rc-viewer button:focus-visible{border-color:var(--lime);background:var(--lime);color:var(--ink)}
.about-flow .rc-viewer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.about-flow .rc-viewer-close{top:20px;right:20px}
.about-flow .rc-viewer-step{top:50%;left:24px;translate:0 -50%}
.about-flow .rc-viewer-step[data-step="1"]{left:auto;right:24px}
@keyframes rc-view{from{opacity:0;translate:0 14px}}

@media(max-width:560px){
 .about-flow .rc{--pad:22px;--slot:112px}
 .about-flow .rc-printer-label{top:40px;left:24px;font-size:10px}
 .about-flow .rc-led{top:40px;right:24px}
 .about-flow .rc-meter{left:24px;right:24px;bottom:24px}
 .about-flow .rc-fan{height:180px}
 .about-flow .rc-viewer{padding:76px 16px 92px}
 .about-flow .rc-viewer-print{padding:7px 7px 0}
 .about-flow .rc-viewer-print img{max-width:calc(100vw - 46px);max-height:calc(100dvh - 270px)}
 .about-flow .rc-viewer figcaption{font-size:13px}
 .about-flow .rc-viewer-close{top:14px;right:14px}
 .about-flow .rc-viewer-step{top:auto;bottom:22px;left:calc(50% - 64px);translate:none}
 .about-flow .rc-viewer-step[data-step="1"]{left:calc(50% + 12px);right:auto}
}
@media(prefers-reduced-motion:reduce){.about-flow .rc-lead svg,.about-flow .rc-viewer-print{animation:none}}