/* ===== SC Bulletin 01: the flipbook =====
   Every page is one fixed 460 x 655 composition; zine.js scales it (--k) so it never reflows. */
@font-face{font-family:"Endless";src:url(fonts/endless.ttf) format("truetype");font-display:block}
@font-face{font-family:"Michroma";src:url(fonts/michroma.ttf) format("truetype");font-display:block}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0D0C0A;color:#EDE6D6;font-family:"Newsreader",Georgia,serif;overflow:hidden;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* stage: flat, quiet, nothing but the book */
.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2vw,18px);padding:clamp(14px,3vh,34px) 10px;background:#0D0C0A}
.bookwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0}
.book{filter:drop-shadow(0 18px 36px #000000b0)}
.hint{margin:0;font:400 9px "Michroma",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#ffffff4d;transition:opacity .4s}
.hint kbd{background:#ffffff14;padding:1px 5px;font:inherit}
.hint.gone{opacity:0}
.nav{width:40px;height:40px;border-radius:50%;flex:0 0 auto;cursor:pointer;background:transparent;
  border:1px solid #ffffff1f;color:#ffffff8c;font-size:24px;line-height:0;display:grid;place-items:center;
  transition:background .16s,color .16s,transform .16s}
.nav:hover{background:#DDF53A;border-color:#DDF53A;color:#111;transform:scale(1.07)}
.nav:disabled{opacity:.18;cursor:default;transform:none;background:transparent;color:#fff}
/* phones: the arrows become a bar under the page, big enough to hit with a thumb */
.hint--m{display:none}
@media (max-width:559px){
  .stage{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .nav{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:52px;height:52px;font-size:30px;
    background:#1E1D1B;border-color:#ffffff2e;color:#F3F0E8;-webkit-tap-highlight-color:transparent}
  .nav--prev{left:calc(50% - 116px)}
  .nav--next{right:calc(50% - 116px)}
  .nav:hover{transform:none}
  .nav:active{background:#DDF53A;color:#111}
  /* sits in the gap between the two arrows (128px), never over them, and never takes a tap */
  .hint{position:fixed;left:calc(50% - 50px);width:100px;bottom:calc(34px + env(safe-area-inset-bottom));text-align:center;white-space:nowrap;pointer-events:none}
  .hint--d{display:none}.hint--m{display:inline}
}

/* the page: a fixed canvas */
.page{background:#121110;overflow:hidden;position:relative}
.pad{position:absolute;left:0;top:0;width:460px;height:655px;overflow:hidden;transform:scale(var(--k,1));transform-origin:0 0}
.pg{position:relative;width:460px;height:655px;background:#0C0C0B;overflow:hidden}

/* plain-text mirror */
.readable{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.readable.fallback{position:static;width:auto;height:auto;clip:auto;overflow:auto;max-width:640px;margin:0 auto;padding:20px}
.readable.fallback .pad,.readable.fallback .pg{position:static;transform:none;width:auto;height:auto}
.readable.fallback .tx,.readable.fallback .tx-big,.readable.fallback .p2__obj{position:static}

/* ===== cover: the case folder ===== */
:root{
  --k:1;
  --night:#0C0C0B;
  --grey:#76726B;     /* front folder, CONSO grey */
  --khaki:#D6CFA1;    /* back folder, pale gold */
  --kraft:#C9B88E;    /* folder interior */
  --paper:#F1EEE6;
  --ink:#161513;
  --red:#FF202B;
  --label:"Michroma",sans-serif;
  --serif:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box}
:root{--disp:"Endless",sans-serif;--dw:400;--dvs:normal;
  --cover-a:112px;--cover-b:132px;--cw-left:118px;--cover-track:-.05em;--title:35px;--title-lh:1;--title-track:-.035em;--band:64px;--band-track:-.03em;--word:.06em}
.fold{position:absolute;border-radius:5px 3px 3px 5px}
.fold--back{left:46px;top:20px;width:372px;height:606px;background:var(--khaki);
  clip-path:polygon(0 0,93.5% 0,93.5% 9%,100% 11%,100% 40%,93.5% 42%,93.5% 100%,0 100%)}
.fold--back .fold__tab{position:absolute;right:2px;top:12%;height:27%;width:20px;display:flex;align-items:center;justify-content:center}
.fold__tab b{writing-mode:vertical-rl;font:400 9px var(--label);letter-spacing:.32em;color:#3C3826}
.fold--front{left:20px;top:46px;width:372px;height:590px;background:var(--grey);
  box-shadow:0 22px 40px -18px #000;
  clip-path:polygon(0 0,93.5% 0,93.5% 46%,100% 48%,100% 76%,93.5% 78%,93.5% 100%,0 100%)}
.cover__side{position:absolute;left:18px;bottom:24px;margin:0;writing-mode:vertical-rl;rotate:180deg;
  font:400 8.5px var(--label);letter-spacing:.34em;text-transform:uppercase;color:#EDEAE2cc}
.cover__word{position:absolute;left:var(--cw-left,120px);top:566px;width:540px;margin:0;rotate:-90deg;transform-origin:0 0;
  font-family:var(--disp);font-weight:var(--dw);font-variation-settings:var(--dvs);color:#EFEDE6;
  letter-spacing:var(--cover-track);line-height:.82;font-kerning:normal;white-space:nowrap}
.cover__word>span{display:block}
.cover__word>span:first-child{font-size:var(--cover-a)}
.cover__word>span:last-child{font-size:var(--cover-b)}

.rcpt-wrap{position:absolute;left:40px;top:26px;rotate:-2deg;filter:drop-shadow(0 1px 1px #00000040) drop-shadow(0 12px 12px #00000059)}
.rcpt{width:164px;padding:16px 14px 16px;
  background:#F7F5F0;color:var(--ink);
  font:500 9.5px/1.5 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(0% 0,5% 6px,10% 0,15% 6px,20% 0,25% 6px,30% 0,35% 6px,40% 0,45% 6px,50% 0,55% 6px,60% 0,65% 6px,70% 0,75% 6px,80% 0,85% 6px,90% 0,95% 6px,100% 0,100% 100%,95% calc(100% - 6px),90% 100%,85% calc(100% - 6px),80% 100%,75% calc(100% - 6px),70% 100%,65% calc(100% - 6px),60% 100%,55% calc(100% - 6px),50% 100%,45% calc(100% - 6px),40% 100%,35% calc(100% - 6px),30% 100%,25% calc(100% - 6px),20% 100%,15% calc(100% - 6px),10% 100%,5% calc(100% - 6px),0% 100%)}
.rcpt p{margin:0}
.rcpt__c{text-align:center}
.rcpt__h{font-weight:700;font-size:12px;line-height:1.15;letter-spacing:.06em;margin-bottom:4px !important}
.rcpt__t{font-weight:700;font-size:10.5px;line-height:1.3}
.rcpt__rule{height:0;margin:7px 0 !important;border-top:1.5px dashed #16151399}
.rcpt__rule--d{border-top:3px double var(--ink)}
.rcpt__ln{display:flex;justify-content:space-between;align-items:baseline}
.rcpt__ln b{font-family:var(--disp);font-weight:var(--dw);font-variation-settings:var(--dvs);font-size:18px;line-height:1.05;letter-spacing:-.03em}
.rcpt__ln--stuck{color:#C8141D}
.rcpt__tot{font-weight:700}
.rcpt__tot b{font-size:22px}
.rcpt__s{font-size:8px;letter-spacing:.08em;color:#161513b3}

.fw{position:absolute;inset:0}
.fw--back{filter:drop-shadow(1px 1px 0 #A39B6E) drop-shadow(1px 1px 0 #99915F) drop-shadow(1px 1px 0 #8E8656) drop-shadow(0 14px 18px #00000099)}
.fw--front{filter:drop-shadow(1px 1px 0 #55524C) drop-shadow(1px 1px 0 #4E4B45) drop-shadow(1px 1px 0 #47443F) drop-shadow(1px 1px 0 #403D38) drop-shadow(4px 24px 26px #000000c0)}
.fold--front,.fold--back{box-shadow:none;background-image:url(tex/grain.webp);background-size:300px;background-blend-mode:multiply;
  box-shadow:inset 0 1px 0 #ffffff38,inset 1px 0 0 #ffffff1f,inset 0 -2px 3px #00000026}
.fold--front{background-color:#7A766F}
.peek{position:absolute;left:28px;top:54px;width:350px;height:586px;background:#E9E5DA;border-radius:2px;
  box-shadow:0 1px 0 #CFC9BA,0 2px 0 #E4DFD3,0 3px 0 #CBC5B6}

.cover__word{z-index:2;color:#E9E6DE;text-shadow:0 0 .7px #E9E6DE99}
.cover__side{z-index:2}
.fold--front::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:url(tex/grain.webp) 0 0/300px;mix-blend-mode:multiply;opacity:.6}
.fold--front::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:url(tex/crumple.webp) 40px 20px/700px;mix-blend-mode:multiply;opacity:.18}
.cover__side{color:#E9E6DEcc;text-shadow:none}
.fold__tab b{text-shadow:0 1px 0 #FFFFFF59}

.rcpt-wrap{filter:drop-shadow(0 1px 0 #00000033) drop-shadow(2px 4px 3px #00000040) drop-shadow(4px 16px 16px #00000070)}
.rcpt{background:linear-gradient(176deg,#FBFAF7 0 70%,#ECE9E1)}
.pclip{position:absolute;left:150px;top:4px;width:22px;height:66px;rotate:7deg;overflow:visible;
  filter:drop-shadow(1px 2px 1px #00000073)}
.pclip--back{z-index:5}
.rcpt-wrap{z-index:6}
.pclip--front{z-index:7;clip-path:polygon(0 0,100% 0,100% 33%,46% 33%,46% 100%,0 100%)}


/* =========================== second pass: loud / quiet pages, four layouts =========================== */
.spread--v2{background:none}
.spread--v2::after{content:"";position:absolute;left:459px;top:0;bottom:0;width:2px;z-index:20;background:#0000001f;pointer-events:none}
.p2{position:relative;overflow:hidden;color:#141311}
.p2 p,.p2 h3,.p2 ul{margin:0}
.p2__head{position:absolute;left:24px;right:24px;top:20px;z-index:6;display:flex;justify-content:space-between;
  font:400 8.5px "Michroma",sans-serif;letter-spacing:.3em;text-transform:uppercase}
.tx-big{font-family:var(--disp);font-weight:var(--dw);font-variation-settings:var(--dvs);line-height:.8;letter-spacing:-.035em;white-space:nowrap;position:absolute}
.tx{position:absolute;z-index:5}
.tx h3{font-family:var(--disp);font-weight:var(--dw);font-size:24px;line-height:1;letter-spacing:-.03em;margin-bottom:8px}
.tx p{font:400 14.5px/1.32 var(--serif);margin-bottom:7px}
.tx mark{background:#141311;color:#F6F0E6;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.p2 .tx p.p2__k{font:400 7.5px/1.5 "Michroma",sans-serif;letter-spacing:.28em;text-transform:uppercase;margin-top:10px}
.p2__obj{position:absolute;height:auto;display:block}

/* rooms: loud lime */
.p2--rooms{background:#DDF53A}
.p2__huge{left:10px;top:66px;font-size:236px;z-index:1}
.p2__am{right:22px;top:252px;font-size:72px;z-index:3}
.p2__clock{left:34px;top:206px;width:226px;rotate:-9deg;z-index:2;filter:drop-shadow(16px 20px 0 #14131133)}
.p2__foot--l{left:24px;bottom:22px;width:220px}
.p2__foot--r{right:24px;bottom:22px;text-align:right}
.tx .p2__mid{font-family:var(--disp);font-weight:var(--dw);font-size:60px;line-height:.85;letter-spacing:-.05em;margin-bottom:6px}

/* water: quiet cream */
.p2--water{background:#F3F0E8}
.p2__word{left:16px;top:62px;font-size:170px;z-index:1}
.p2__copy{width:236px}
.p2--water .p2__copy{left:24px;top:262px}
.p2--water mark{background:#DDF53A;color:#141311}

/* credits: split, black over cream */
.p2--credits{background:#F3F0E8}
.p2__top{position:absolute;left:0;right:0;top:0;height:330px;background:#141312;color:#F3F0E8}
.p2__count{left:18px;top:364px;font-size:124px;color:#E3202A;z-index:1}
.p2__nos{left:24px;top:478px;list-style:none;padding:0}
.p2__nos li{font-family:var(--disp);font-weight:var(--dw);font-size:30px;line-height:1.08;letter-spacing:-.03em;
  text-decoration:line-through;text-decoration-color:#E3202A;text-decoration-thickness:3px}
.p2__copy--credits{left:216px;top:486px;width:160px}
.tx.p2__copy--credits p{font-size:13px;line-height:1.28;margin-bottom:5px}
.p2--credits mark{background:#E3202A;color:#fff}

/* topup: loud red, the wallet slides across the gutter */
.p2--topup{background:#FF202B}
.p2__huge--500{left:8px;top:56px;font-size:214px;z-index:1}
.p2__not{left:22px;top:248px;font-size:54px;color:#F6F0E6;z-index:3}
.p2__copy--topup{left:278px;top:446px;width:160px}
.tx.p2__copy--topup p{font-size:13.5px}



/* ---- 4 · complaints: loud blue ---- */
.p2--complaints{background:#3D4BFF;color:#F3F0E8}
.p2__dead{left:22px;top:60px;font-size:84px;color:#141311;z-index:1;
  text-decoration:line-through;text-decoration-color:#FF202B;text-decoration-thickness:11px}
.p2__to{left:18px;top:168px;font-size:122px;line-height:.82;z-index:1}
.p2__bell{left:238px;top:404px;width:210px;rotate:-7deg;z-index:2;filter:drop-shadow(14px 18px 0 #14131159)}
.p2__copy--complaints{left:24px;top:446px;width:204px}
.p2--complaints mark{background:#F3F0E8;color:#3D4BFF}
.p2--complaints .tx b{font-weight:600}

/* ---- 5 · laundry: quiet cream ---- */
.p2--laundry{background:#F3F0E8}
.p2__pegs{left:44px;top:84px;width:372px;rotate:0deg;z-index:2;filter:drop-shadow(10px 14px 0 #1413112b)}
.p2__nodate{left:18px;top:362px;font-size:66px;line-height:.84;z-index:1}
.p2__steps{left:24px;top:476px;width:200px;list-style:none;padding:0;margin:0}
.p2__steps li{position:relative;padding-left:0;font-family:var(--disp);font-weight:var(--dw);font-size:19px;line-height:1.5;letter-spacing:-.02em}
.p2__steps .n{color:#14131180;text-decoration:line-through;text-decoration-color:#FF202B;text-decoration-thickness:2px}
.p2__copy--laundry{left:232px;top:478px;width:206px}
.tx.p2__copy--laundry p{font-size:13px;line-height:1.28;margin-bottom:5px}
.p2--laundry mark{background:#3D4BFF;color:#F3F0E8}



/* ---- 8 · the rest: one long receipt on black ---- */
.p2--rest{background:#141312;color:#F3F0E8}
.bill-wrap{position:absolute;left:30px;top:26px;rotate:-1.6deg;z-index:2;
  filter:drop-shadow(0 1px 0 #00000059) drop-shadow(4px 16px 16px #000000a0)}
.bill{width:400px;padding:22px 22px 24px;background:linear-gradient(178deg,#FBFAF7 0 75%,#ECE9E1);color:#161513;
  font:500 11px/1.5 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.02em;
  clip-path:polygon(0 0,5% 6px,10% 0,15% 6px,20% 0,25% 6px,30% 0,35% 6px,40% 0,45% 6px,50% 0,55% 6px,60% 0,65% 6px,70% 0,75% 6px,80% 0,85% 6px,90% 0,95% 6px,100% 0,
    100% 100%,95% calc(100% - 6px),90% 100%,85% calc(100% - 6px),80% 100%,75% calc(100% - 6px),70% 100%,65% calc(100% - 6px),60% 100%,55% calc(100% - 6px),50% 100%,45% calc(100% - 6px),40% 100%,35% calc(100% - 6px),30% 100%,25% calc(100% - 6px),20% 100%,15% calc(100% - 6px),10% 100%,5% calc(100% - 6px),0 100%)}
.bill p,.bill ul{margin:0}
.bill__c{text-align:center}
.bill__h{font-family:var(--disp);font-weight:var(--dw);font-size:26px;line-height:.95;letter-spacing:-.03em;text-transform:none;margin-bottom:6px !important}
.bill__rule{height:0;margin:9px 0 !important;border-top:1.5px dashed #16151399}
.bill__rule--d{border-top:3px double #161513}
.bill__sec{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px !important;font-weight:700}
.bill__sec b{font-family:var(--disp);font-weight:var(--dw);font-size:19px;line-height:1;letter-spacing:-.03em}
.bill__sec--n{color:#C8141D}
.bill__tot{margin-top:0 !important}
.bill__list{list-style:none;padding:0}
.bill__list li{position:relative;padding-left:18px;text-transform:none;font-size:11.5px;line-height:1.42}
.bill__list li::before{position:absolute;left:0;top:0}
.bill__list--y li::before{content:"\2713"}
.bill__list--o li::before{content:"\2192"}
.bill__list--n li::before{content:"\2715";color:#C8141D}
.p2__copy--rest{left:30px;top:528px;width:250px}
.p2__copy--rest h3{color:#F3F0E8}
.tx-btn{position:absolute;right:24px;top:560px;z-index:5;background:#DDF53A;color:#141311;border:0;cursor:pointer;
  padding:10px 16px 9px;font-family:var(--disp);font-weight:var(--dw);font-size:18px;letter-spacing:-.02em;
  box-shadow:4px 5px 0 #000;transition:translate .15s,box-shadow .15s}
.tx-btn:hover{translate:-2px -2px;box-shadow:6px 7px 0 #000}

/* ---- motion: objects land when a page opens; nothing moves for reduced motion ---- */
@keyframes land{0%{opacity:0;translate:0 -18px;scale:1.06}70%{opacity:1;translate:0 2px;scale:.995}100%{translate:0 0;scale:1}}
.book .page.is-seen .p2__obj,.book .page.is-seen .rcpt-wrap,.book .page.is-seen .bill-wrap{animation:land .6s cubic-bezier(.2,.85,.3,1.15) .18s backwards}
.book .page.no-anim .p2__obj,.book .page.no-anim .rcpt-wrap,.book .page.no-anim .bill-wrap{animation:none}
@media (prefers-reduced-motion:reduce){.book .page .p2__obj,.book .page .rcpt-wrap,.book .page .bill-wrap{animation:none !important}}

/* the clothesline the pegs hang from: it runs the full width of the page */
.p2__line{position:absolute;left:0;right:0;top:302px;height:2px;background:#141311;z-index:1;rotate:-.6deg}

/* ---- objects: every cut-out casts the same hard flash shadow ---- */
.p2__obj{--sh:#14131140}
.p2--credits .p2__obj{--sh:#00000085}
.p2__obj:not(.p2__panel){filter:drop-shadow(0 1px 0 #00000040) drop-shadow(12px 16px 0 var(--sh))}
/* 3 · clean: the iced glass, blue, standing on its own */
.p2__glass{left:298px;top:340px;width:138px;rotate:0deg;z-index:2}
/* the glass stands upright, so it gets a floor: a tight contact shadow at its base and a soft pool around it */
.p2--water .p2__glass{filter:none}
.p2__floor{position:absolute;left:278px;top:600px;width:180px;height:34px;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,#141311b3 0 34%,#14131155 58%,#14131100 100%);filter:blur(1.5px)}
/* 6 · credits: the cone stands in the black band and breaks out across its edge */
/* the photo's own frame cuts the arm, so that cut sits exactly on the page's right edge */
.p2__ice{left:190px;top:30px;width:270px;rotate:0deg;z-index:3}
/* 7 · top-up: a stack of Monopoly 500s, the only 500s on offer */
/* the stack is big, bleeds off the left edge and sits on the copy's baseline */
.p2__money{left:-60px;top:378px;width:316px;rotate:-7deg;z-index:4}
.p2__copy--topup{left:284px;width:154px}

/* the black band clips the cone and its shadow, so the arm leaves cleanly through the band edge */
.p2__top{overflow:hidden}

/* 6 · the thali, back on the black band */
.p2__tray{left:40px;top:66px;width:380px;rotate:-8deg;z-index:2}

/* page turns clip each page into a polygon; its backing must match the page or a dark seam shows along the fold */
.page:has(.p2--rooms){background:#DDF53A}
.page:has(.p2--water),.page:has(.p2--laundry),.page:has(.p2--credits){background:#F3F0E8}
.page:has(.p2--complaints){background:#3D4BFF}
.page:has(.p2--topup){background:#FF202B}
.page:has(.p2--rest){background:#141312}
.page:has(.pg--cover){background:#0C0C0B}
.page:has(.p2--credits) .pad{background:linear-gradient(#141312 0 330px,#F3F0E8 330px)}
/* 7 · the stack sits wholly on its page, in the gap under the headline */
.p2__money{left:26px;top:318px;width:246px;rotate:-7deg}

/* the back-page email: a real link, set like the receipt type */
.p2__mail{color:#DDF53A;text-decoration:none;border-bottom:1.5px solid #DDF53A80;font:500 12.5px "IBM Plex Mono",monospace}
.p2__mail:hover{border-bottom-color:#DDF53A}
.p2__copy--rest{width:300px}
.p2__copy--rest h3{white-space:nowrap}
.tx-btn{top:582px}

/* first open on a phone: a quick note that the book swipes */
.swipetip{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:#0D0C0Acc;backdrop-filter:blur(2px);transition:opacity .3s}
.swipetip[hidden]{display:none}
.swipetip.gone{opacity:0}
.swipetip__card{width:min(300px,100%);padding:26px 22px 22px;background:#F3F0E8;color:#141311;text-align:center;box-shadow:6px 8px 0 #000}
.swipetip__hand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;font:400 28px "Endless",sans-serif}
.swipetip__hand i{width:34px;height:34px;border-radius:50%;background:#DDF53A;border:2px solid #141311;animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%,100%{translate:-26px 0}50%{translate:26px 0}}
.swipetip__t{margin:0 0 6px;font:400 26px/1 "Endless",sans-serif;letter-spacing:-.03em}
.swipetip__s{margin:0;font:400 8.5px/1.6 "Michroma",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#141311a6}
@media (prefers-reduced-motion:reduce){.swipetip__hand i{animation:none}}

/* phones: the viewport is one page wide; the spread slides behind it */
.pan{position:relative;overflow:hidden;flex:0 0 auto}
.panmode .bookwrap{will-change:transform}
.panmode .book{filter:none}
.panmode .pan{box-shadow:0 18px 36px #000000b0}

/* ---- 8 · the receipt, decluttered: two columns, counts on the heading line, contact in its footer ---- */
.bill-wrap{left:34px;top:24px;rotate:-.8deg}
.bill{width:392px;padding:22px 24px 20px}
.bill__h{font-size:27px;line-height:.95;margin-bottom:8px !important}
.bill__m{font-size:10px;letter-spacing:.06em}
.bill__rule{margin:12px 0 !important}
.bill__sec{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 5px !important;
  padding-bottom:4px;border-bottom:1px solid #16151326;font-size:11.5px;letter-spacing:.08em}
.bill__sec:first-of-type{margin-top:4px !important}
.bill__sec b{font-size:22px}
.bill__list li{display:flex;align-items:baseline;gap:6px;padding:0;text-transform:none;font-size:11.5px;line-height:1.62}
.bill__list li::before{content:none !important}
.bill__list li span{flex:0 0 auto}
.bill__list li i{flex:1 1 auto;border-bottom:1.5px dotted #16151359;translate:0 -3px}
.bill__list li b{flex:0 0 auto;font-weight:500;color:#161513a6}
.bill__sec--n + .bill__list li b{color:#C8141D}
.bill__tot{border-bottom:0;margin-top:2px !important;font-size:11.5px}
.bill__tot b{font-size:26px}
.bill__thanks{font-family:var(--disp);font-weight:var(--dw);font-size:20px;letter-spacing:-.03em;text-transform:none;margin:2px 0 4px !important}
.bill__mail{color:#161513;text-decoration:none;text-transform:none;font-size:11.5px;font-weight:700;
  background:#DDF53A;padding:2px 6px}
.p2__copy--rest{display:none}
/* one clean button, centred under the receipt */
.p2--rest .tx-btn{left:50%;right:auto;top:auto;bottom:26px;translate:-50% 0;padding:11px 20px 10px}
.p2--rest .tx-btn:hover{translate:calc(-50% - 2px) -2px}
/* receipt: tighter, so it ends well above the button */
.bill{padding:18px 22px 16px}
.bill__h{font-size:24px}
.bill__rule{margin:9px 0 !important}
.bill__sec{margin:9px 0 3px !important;padding-bottom:2px;font-size:10.5px}
.bill__sec b{font-size:17px;line-height:1}
.bill__list li{font-size:11px;line-height:1.42}
.bill__tot{margin-top:0 !important}
.bill__tot b{font-size:21px}
.bill__thanks{font-size:18px;margin:0 0 5px !important}
.bill__mail{font-size:11px}
/* highlights: tall enough to hold ascenders and descenders, with a little air either side */
.tx mark{padding:.12em .32em .16em;line-height:1.62}
.rcpt__more,.bill__more{margin:3px 0 0 !important;text-align:right;text-transform:none;font:italic 400 12px/1.2 var(--serif);color:#161513b3}
.rcpt__more{font-size:10.5px}
.rcpt__more{font-size:9.5px;white-space:nowrap;letter-spacing:-.01em}

/* ---- voice pass: longer, chattier copy. Pages reflowed so it all breathes ---- */
.tx.p2__copy p{font-size:13.5px;line-height:1.34;margin-bottom:6px}
.tx.p2__copy h3{font-size:22px}
/* 3 · water */
.p2--water .p2__copy--water{top:232px;width:262px}
.p2__glass{left:304px;top:360px;width:128px}
.p2__floor{left:280px;top:610px}
/* 4 · complaints: no strike now, Mota Data comes first */
.p2__dead{text-decoration:none;font-size:56px;top:62px}
.p2__to{top:132px;font-size:118px}
.p2__copy--complaints{left:24px;top:372px;width:214px}
.p2__bell{left:262px;top:470px;width:178px}
/* 5 · laundry: the steps make way for the story, full width */
.p2__steps{display:none}
.p2__pegs{left:84px;top:54px;width:280px}
.p2__line{top:276px}
.p2__nodate{top:316px;font-size:64px}
.p2__copy--laundry{left:24px;top:394px;width:412px}
.tx.p2__copy--laundry p{font-size:13.5px}
/* 6 · credits: shorter band, so the copy has a full column */
.p2__top{height:286px}
.p2__tray{top:52px;width:340px;left:58px}
.p2__count{top:304px;font-size:110px}
.p2__nos{top:410px}
.p2__copy--credits{left:226px;top:406px;width:212px}
.tx.p2__copy--credits p{font-size:12.5px;line-height:1.3;margin-bottom:5px}
.page:has(.p2--credits) .pad{background:linear-gradient(#141312 0 286px,#F3F0E8 286px)}
/* 7 · top-up */
.p2__copy--topup{left:286px;top:332px;width:154px}
.tx.p2__copy--topup p{font-size:13px}
.p2__tray{top:66px;width:318px;left:70px}