/* The Receipts — based on the owner's approved scrapbook design. */
:root {
  --bg:#fff1ab; --panel:#fff5cc; --ink:#051575; --accent:#0026b7;
  --muted:#263775; --red:#ff2546; --green:#2eb52a;
  --card-ink:#080c37; --card-muted:#171b3a; --card-line:#b4ad9b;
  --c-opener:#f666d1; --c-ick:#2685ee; --c-ghosted:#2db52c;
  --c-redflag:#ff3d43; --c-situationship:#bc78ef; --c-bleak:#ffd500;
  --f-head:'Caprasimo',Georgia,serif; --f-quote:'Barlow Condensed',sans-serif;
  --f-body:'Roboto',sans-serif; --f-mono:'Special Elite',monospace;
}
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2364460d' opacity='.14' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");font-size:14px}
.wrap{max-width:1536px;padding-inline:clamp(20px,3.8vw,60px)}
header.mast{position:relative;background:transparent;border:0;top:0}
.mast .wrap{position:relative;min-height:57px;padding-block:7px;gap:18px;flex-wrap:nowrap}
.edition{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;margin-right:auto}
.logo{position:absolute;left:50%;transform:translateX(-50%);font-size:clamp(25px,2.7vw,40px);letter-spacing:-1.6px;gap:0;line-height:1}
.logo .hrt{width:.9em;height:1.1em}
.here{margin-left:auto;font-family:var(--f-body);font-size:13px;color:var(--ink)}
.here .dot{width:11px;height:11px}
.here b{font-weight:400}
.mast-actions{margin-left:0;gap:22px}
.btn,.btn.primary{box-shadow:none;border:0;padding:11px 24px;font-size:17px;font-weight:700}
.btn:hover,.btn.primary:hover{box-shadow:0 3px 10px #001b6725;transform:translateY(-1px)}
.btn.primary{color:white;background:var(--accent)}
.theme{order:-1;border:0;border-left:1px solid var(--ink);border-radius:0;box-shadow:none;background:none;padding:0 0 0 18px;gap:9px;height:32px;color:var(--ink)}
.theme span{width:22px;height:27px;font-size:24px;color:var(--ink)!important;background:transparent!important}
.theme .switch{width:40px;height:21px;border-radius:15px;background:var(--ink)!important;position:relative}
.theme .switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;top:1.5px;left:2px;background:#fff3ad;transition:transform .2s}
.hero{display:grid;grid-template-columns:45% 55%;gap:0;padding-block:0 22px;align-items:center;position:relative;min-height:234px}
.hero .copy{min-width:0;position:relative;z-index:1}
.hero h1{font-size:clamp(57px,7.35vw,112px);font-weight:400;line-height:.81;letter-spacing:-.055em;text-wrap:nowrap}
.hero h1 .u::after{background:transparent;border-bottom:5px solid var(--red);height:6px;border-radius:50%;left:15%;right:21%;bottom:-9px;transform:rotate(-1deg)}
.hero .tagline{font-family:var(--f-mono);font-size:clamp(15px,1.5vw,23px);margin-top:23px;color:var(--ink);white-space:nowrap;letter-spacing:-1px}
.hero .scrawl{display:none}
.hero .collage{display:block;width:calc(100% + 60px);margin:0 0 0 -6px;aspect-ratio:3.235;align-self:center;flex-shrink:1;background-image:none;background-size:177.37% auto;background-position:100% 4.55%;background-repeat:no-repeat;mix-blend-mode:multiply}
.controls{position:relative;top:0;background:#fff8d3b8;box-shadow:0 3px 12px #7b60272a;border:0;padding:6px 0;gap:14px;flex-wrap:nowrap;margin-bottom:16px;min-height:50px}
.chips{flex:1;justify-content:space-between;gap:7px;flex-wrap:nowrap}
.chip{border:0;background:transparent;color:var(--ink);border-radius:30px;padding:9px 16px;font-weight:400;font-size:15px;gap:11px}
.chip .dot,.cat .dot{width:12px;height:12px;border:1px solid #ffffff88;flex-shrink:0}
.chip[aria-pressed=true]{background:var(--accent);box-shadow:none;color:#fff}
.chip[data-k=all]{font-weight:700;padding-inline:26px}
.chip[data-k=all] .dot{order:1;background:var(--red)!important}
.sort{border:0;border-left:1px solid var(--ink);border-radius:0;background:transparent;margin-left:20px;padding-left:25px;flex-shrink:0}
.sort button{position:relative;padding:7px 14px;font-size:15px;font-weight:400;color:var(--ink)}
.sort button[aria-pressed=true]{background:transparent;color:var(--ink);font-weight:700}
.sort button[aria-pressed=true]::after{content:'';position:absolute;bottom:0;left:10px;right:10px;height:3px;background:var(--ink);border-radius:5px}
.wall{display:grid;grid-template-columns:1.08fr .9fr 1fr;gap:22px;columns:auto;padding:4px 0 12px;align-items:stretch;position:relative}
.card{display:flex;flex-direction:column;min-width:0;min-height:272px;border:0;border-radius:0;margin:0;padding:25px 28px 20px;background-color:#faf7ec!important;box-shadow:2px 5px 9px #65532134;position:relative;isolation:isolate}
.card::before{content:'';position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055 .15' numOctaves='5' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23f8f4e5' surfaceScale='2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='45' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.3' d='M0 0h200v200H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}
.card.tint-ick,.card.tint-redflag{clip-path:polygon(0 3%,2% 0,4% 3%,6% 0,8% 3%,10% 0,12% 3%,14% 0,16% 3%,18% 0,20% 3%,22% 0,24% 3%,26% 0,28% 3%,30% 0,32% 3%,34% 0,36% 3%,38% 0,40% 3%,42% 0,44% 3%,46% 0,48% 3%,50% 0,52% 3%,54% 0,56% 3%,58% 0,60% 3%,62% 0,64% 3%,66% 0,68% 3%,70% 0,72% 3%,74% 0,76% 3%,78% 0,80% 3%,82% 0,84% 3%,86% 0,88% 3%,90% 0,92% 3%,94% 0,96% 3%,98% 0,100% 3%,100% 97%,98% 100%,96% 97%,94% 100%,92% 97%,90% 100%,88% 97%,86% 100%,84% 97%,82% 100%,80% 97%,78% 100%,76% 97%,74% 100%,72% 97%,70% 100%,68% 97%,66% 100%,64% 97%,62% 100%,60% 97%,58% 100%,56% 97%,54% 100%,52% 97%,50% 100%,48% 97%,46% 100%,44% 97%,42% 100%,40% 97%,38% 100%,36% 97%,34% 100%,32% 97%,30% 100%,28% 97%,26% 100%,24% 97%,22% 100%,20% 97%,18% 100%,16% 97%,14% 100%,12% 97%,10% 100%,8% 97%,6% 100%,4% 97%,2% 100%,0 97%)}
.card.tint-situationship,.card.tint-ghosted{background-color:#e5cff5!important;transform:rotate(-.6deg)}
.card.tint-ghosted{transform:rotate(.6deg)}
.card.tint-bleak{background-color:#fff1ac!important;border:2px solid #fffef3;border-radius:28px;transform:rotate(-.5deg)}
.card.tint-opener{background-color:#dcecf7!important;background-image:linear-gradient(#4f9fd658 1px,transparent 1px),linear-gradient(90deg,#4f9fd658 1px,transparent 1px);background-size:19px 19px;transform:rotate(-.5deg)}
.rtop{margin-bottom:14px;min-height:30px;align-items:center;padding-right:38px}
.rleft{gap:20px}
.exbadge{font-family:var(--f-quote);font-size:20px;font-weight:500;letter-spacing:0;border:1px solid #ff2443;border-radius:0;padding:0 5px;color:#ff193c;line-height:1.3;transform:rotate(-1.5deg)}
.cat{font-family:var(--f-body);font-size:13px;color:#111630;font-weight:400;gap:8px}
.seen{font-family:var(--f-mono);font-size:11px;line-height:1.5;color:#161829;position:absolute;right:27px;top:23px;display:none}
.tint-ick .seen{display:block}
.tint-ick .rtop{padding-right:100px}
.msg{font-family:var(--f-quote);font-size:clamp(29px,2.7vw,43px);line-height:1.03;font-weight:700;letter-spacing:-.025em;flex:1;padding-bottom:18px}
.card.long .msg{font-size:clamp(25px,2.3vw,35px)}
.perf{display:none}
.card .foot{gap:18px;flex-wrap:wrap;color:#0d1531}
.vote{font-family:var(--f-body);font-size:13px;font-weight:400;color:#101636;gap:7px;min-height:32px}
.vote .heart{color:var(--red);font-size:26px;text-shadow:0 1px white}
.vote[aria-pressed=true]{color:#d41439;font-weight:700}
.time{font-family:var(--f-body);font-size:12px;color:#101636;border-left:1px solid #636576;padding-left:18px}
.minis{margin-left:0;border-left:1px solid #636576;padding-left:18px}
.mini{font-size:12px;font-weight:400;color:#101636}
.rstamp{margin-top:9px;min-height:30px}
.rstamp .brand{font-family:var(--f-head);font-size:20px;color:#00196e;letter-spacing:-1px}
.barcode{height:31px;width:105px;opacity:.9;display:none}
.tint-ick .rstamp{border-top:1px dashed #918e82;padding-top:7px}
.tint-ick .barcode,.tint-redflag .barcode{display:block}
.tint-situationship .rstamp::after,.tint-ghosted .rstamp::after{content:'';margin-left:auto;width:90px;height:7px;border-top:2px solid #0c2474;border-bottom:1px solid #0c2474;transform:rotate(-10deg);border-radius:50%}
.card-doodle{position:absolute;right:14px;top:14px;width:55px;height:64px;color:#101b5e;pointer-events:none}
.card-doodle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tint-ick .card-doodle,.tint-opener .card-doodle{display:none}
.tint-redflag .card-doodle{color:#f12639;transform:rotate(8deg)}
.more-row{text-align:center;padding:18px 0 8px}.more-row .btn{font-size:14px;background:transparent;border:1px solid #1c338c44;color:var(--ink);padding:8px 20px}
.wall-count{display:block;font-family:var(--f-mono);font-size:11px;margin-top:8px;color:var(--muted)}
footer.foot-note{border:0;margin-top:0;padding:16px 0 32px}
footer.foot-note .wrap{justify-content:center;position:relative;min-height:70px;gap:28px}
footer.foot-note .flogo{display:none}
footer.foot-note .dmg{position:absolute;left:60px;max-width:165px;font-size:19px;line-height:1;transform:rotate(-8deg);text-transform:uppercase;font-weight:500}
footer.foot-note .links{margin-left:0;font-size:13px;font-weight:400;gap:12px}
footer.foot-note .links a{color:var(--ink)}
.footer-scrawl{position:absolute;right:40px;max-width:170px;font-family:var(--f-hand);font-size:19px;line-height:1;transform:rotate(-7deg);text-transform:uppercase}
.notebox{order:3;flex-basis:100%}.notebox textarea{background:#fffaf0}
.composer{background:#fffaf0;border:1px solid #c8bb83;box-shadow:0 4px 15px #55441920;border-radius:10px;margin-block:18px}
.composer .chip{border:1px solid #ddd5bd}
.toast{max-width:calc(100% - 30px);width:max-content;text-align:center}
.paper-margin{position:absolute;left:-48px;top:60px;font-family:var(--f-hand);font-size:20px;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none}
:root[data-theme=dark]{--bg:#111630;--panel:#1d2446;--ink:#fff0b3;--muted:#e4d6a6;--accent:#2145d5;color-scheme:dark}
:root[data-theme=dark] .theme .switch::after{transform:translateX(18px);background:#111630}
:root[data-theme=dark] .hero .collage{mix-blend-mode:normal;border-radius:0;opacity:1}
:root[data-theme=dark] .controls{background:#1e2548}
:root[data-theme=dark] .composer{color-scheme:light}
@media(min-width:1540px){.hero{min-height:245px}}
@media(max-width:1100px){
 .edition{font-size:10px}.logo{font-size:29px;left:43%}.mast-actions{gap:12px}.here{font-size:11px}.theme{padding-left:10px;gap:5px}.btn,.btn.primary{font-size:14px;padding:9px 18px}
 .controls{flex-wrap:wrap;gap:5px}.chips{flex-basis:100%}.sort{margin-left:auto;border:0;padding-left:0}.chip{font-size:13px;padding:7px 10px}.controls{padding:7px}
 .hero{min-height:200px}.hero h1{font-size:7.6vw}.hero .collage{width:calc(100% + 30px)}.hero .tagline{font-size:1.65vw}
 .card{padding:22px 20px 18px;min-height:255px}.wall{gap:18px}.rleft{gap:10px}.cat{font-size:12px}.exbadge{font-size:17px}.seen{display:none!important}.tint-ick .rtop{padding-right:0}.card .foot{gap:10px}.time,.minis{padding-left:10px}.msg{font-size:32px}.card.long .msg{font-size:28px}.rstamp .brand{font-size:17px}.barcode{width:70px}
 footer.foot-note .dmg{left:28px;font-size:16px;max-width:130px}.footer-scrawl{right:20px;max-width:130px;font-size:16px}
}
@media(max-width:760px){
 .wrap{padding-inline:22px}.mast .wrap{flex-wrap:wrap;padding-top:18px;gap:10px}.edition{display:none}.logo{position:static;transform:none;font-size:30px;margin-right:auto}.here{order:3;flex-basis:100%;justify-content:center;font-size:11px}.mast-actions{gap:9px}.theme{border:0;padding:0}.theme span{font-size:20px;width:18px}.theme .switch{width:32px;height:18px}.theme .switch::after{height:15px;width:15px}.theme .moon{display:none}:root[data-theme=dark] .theme .switch::after{transform:translateX(13px)}
 .hero{display:flex;flex-direction:column;gap:14px;padding-top:22px;padding-bottom:20px;min-height:0}.hero .copy{width:100%}.hero h1{font-size:clamp(52px,10.7vw,80px);line-height:.88;letter-spacing:-.05em}.hero .tagline{font-size:clamp(12px,2.7vw,19px);margin-top:19px;letter-spacing:-.6px}.hero .collage{width:calc(100% + 12px);max-width:650px;margin:0;aspect-ratio:3.235}
 .controls{padding:8px 0;margin-inline:-6px;box-shadow:0 2px 8px #7b602723}.chips{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:thin;padding:0 5px 6px}.chip{flex-shrink:0;font-size:13px;padding:8px 13px}.chip[data-k=all]{padding-inline:18px}.sort{margin-right:8px}.sort button{padding:4px 14px}
 .wall{grid-template-columns:1fr 1fr;gap:17px}.card{min-height:260px;padding:21px 18px 17px}.msg{font-size:30px}.card.long .msg{font-size:26px}.rleft{gap:9px;align-items:flex-start;flex-direction:column}.rtop{padding-right:35px;margin-bottom:14px}.exbadge{font-size:17px}.card-doodle{width:39px;height:48px;top:18px;right:12px}.card .foot{gap:8px}.vote{font-size:12px}.time,.mini{font-size:11px}.time,.minis{padding-left:8px}.barcode{width:60px;height:24px}.rstamp .brand{font-size:16px}
 footer.foot-note .wrap{gap:20px}.footer-scrawl,footer.foot-note .dmg{display:none}.footer-add{order:-1}footer.foot-note .links{flex-basis:100%;justify-content:center;gap:10px;font-size:12px}.paper-margin{display:none}
}
@media(max-width:480px){
 .wrap{padding-inline:20px}.logo{font-size:26px}.mast .btn{font-size:13px;padding:9px 12px}.mast-actions{gap:7px}.theme .sun{display:none}.hero h1{font-size:11.1vw}.hero .tagline{font-size:2.98vw}.wall{grid-template-columns:1fr;gap:21px;padding-top:7px}.card{min-height:245px;padding:24px 25px 19px}.rleft{flex-direction:row;align-items:center;gap:17px}.rtop{margin-bottom:17px}.msg{font-size:36px}.card.long .msg{font-size:31px}.card .foot{gap:15px}.time,.minis{padding-left:15px}.vote{font-size:13px}.time,.mini{font-size:12px}.rstamp .brand{font-size:19px}.barcode{width:85px;height:27px}.card-doodle{width:46px;height:54px}.exbadge{font-size:19px}.cat{font-size:13px}
}
.card-doodle{font-family:var(--f-hand);font-size:60px;line-height:1;text-align:center;transform:rotate(8deg)}
.brand-heart{font-family:sans-serif;font-size:.9em;letter-spacing:0;margin-left:3px}
.hero{grid-template-columns:46% 54%}
.hero h1{font-size:clamp(57px,6.85vw,105px)}
.hero .collage{width:calc(100% + 24px);margin-left:-10px;aspect-ratio:3.7;background-position:100% 6.1%}
.card::before{opacity:.5}
@media(max-width:760px){.hero h1{font-size:clamp(52px,10.7vw,80px)}.hero .collage{width:100%;margin:0;aspect-ratio:3.7}}
@media(max-width:480px){.hero h1{font-size:11.1vw}}
:root{--bg:#fff3bb}
/* Transparent cutout: the page shows through around the collage. */
.hero .collage{
 aspect-ratio:3.05;background-size:contain;background-position:center;
 mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;
}
.card-doodle .ghost-shape{display:block;width:38px;height:49px;border:2px solid currentColor;border-radius:50% 50% 0 0;position:relative;margin:2px auto;transform:rotate(-8deg);border-bottom:0}
.card-doodle .ghost-shape::before{content:'••';font-family:Arial,sans-serif;letter-spacing:6px;font-size:23px;position:absolute;left:7px;top:6px;line-height:1}
.card-doodle .ghost-shape::after{content:'∿∿';font-size:27px;letter-spacing:-6px;position:absolute;bottom:-15px;left:-2px;transform:rotate(180deg)}
.card-doodle .broken{position:absolute;left:21px;top:6px;font-family:serif;font-size:41px}
