/* Junk-journal theme: layered over styles.css. Looks only; no behaviour. */
:root{--body:#4a3122;--kraft:#be9362;--coffee:#6b4425;--coffee2:#4e301b;--rose:#c98479;--rose2:#9b4c43;--sage:#a9b897;--tea:#f3e7cf;--cream:#fdf8ee;--ink:#2e2118;--muted:#5c4a3c;--green:#2f5a43;--green2:#2f5a43;--gold:#b98a3c;--gold2:#8f6528}
body{background:var(--body) radial-gradient(ellipse at 50% 0,rgba(255,220,170,.10),transparent 60%);color:var(--ink);font-size:19px}
h1,h2,h3{color:var(--coffee2)}
h2{font-family:Caveat,"Bradley Hand","Segoe Print",cursive;font-weight:700;font-size:clamp(2.3rem,9vw,3.1rem);line-height:1.05;letter-spacing:.2px}
.script{font-family:Caveat,cursive;color:var(--rose2);font-size:2rem}
a{color:var(--rose2)}
:focus-visible{outline:3px solid #e2a23b;outline-offset:3px}

/* sticky header: a kraft strip with stitching */
.top{background:var(--kraft) url(/img/j-coffee.webp) 0 0/260px;border-bottom:0;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.top::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;border-bottom:2px dashed rgba(255,248,235,.75)}
.brand{color:#2b1a0e;font-family:Caveat,cursive;font-size:1.65rem;line-height:1}
.brand img{border:3px solid #fffdf7;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.3)}
@media (max-width:420px){.brand span{font-size:1.4rem}}

/* ===== every section is an album page ===== */
main{padding:22px 0 10px}
main>section{position:relative;max-width:1100px;margin:0 10px 40px;padding:58px 18px 44px;border-radius:3px 3px 0 0;
  background:var(--tea) url(/img/j-tea.webp) 0 0/300px;box-shadow:0 10px 24px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.4) inset}
/* spiral binding along the top */
main>section::before{content:"";position:absolute;left:14px;right:14px;top:-16px;height:44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='44' viewBox='0 0 30 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236d6a66'/%3E%3Cstop offset='.45' stop-color='%23f2efe9'/%3E%3Cstop offset='.7' stop-color='%23b9b4ac'/%3E%3Cstop offset='1' stop-color='%235d5954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='15' cy='33' rx='5.2' ry='4.6' fill='%232b1d14' opacity='.85'/%3E%3Cpath d='M11 33 C9 20 10 6 15 3 C20 6 21 20 19 33' fill='none' stroke='url%28%23g%29' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/30px 44px repeat-x;pointer-events:none;z-index:2}
/* torn bottom edge */
main>section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0 6 L5.7 2.9 L12.4 3.4 L16.9 5.6 L27.3 9.2 L36.7 4.0 L44.4 4.5 L49.6 3.0 L55.1 10.3 L64.9 9.3 L74.5 3.7 L80.7 7.6 L89.8 9.7 L100.0 2.8 L108.2 8.0 L115.8 3.6 L123.1 2.8 L133.6 9.8 L141.5 4.7 L151.8 7.2 L162.0 9.6 L169.6 5.7 L177.8 5.9 L182.9 4.7 L192.6 2.4 L196.9 7.6 L202.9 6.8 L210.2 5.1 L221.1 3.8 L228.0 3.8 L236.5 4.5 L240 6 L240 16 Z' fill='%234a3122'/%3E%3C/svg%3E") 0 100%/240px 16px repeat-x;pointer-events:none}
@media (min-width:900px){
  main>section{margin:0 auto 46px;padding:48px 44px 50px 82px;width:calc(100% - 48px)}
  main>section::before{left:-14px;right:auto;top:20px;bottom:20px;width:44px;height:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%236d6a66'/%3E%3Cstop offset='.45' stop-color='%23f2efe9'/%3E%3Cstop offset='.7' stop-color='%23b9b4ac'/%3E%3Cstop offset='1' stop-color='%235d5954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='33' cy='15' rx='4.6' ry='5.2' fill='%232b1d14' opacity='.85'/%3E%3Cpath d='M33 11 C20 9 6 10 3 15 C6 20 20 21 33 19' fill='none' stroke='url%28%23g%29' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/44px 30px repeat-y}
}

/* washi tape (decor spans + polaroids) */
.tape{position:absolute;width:118px;height:30px;background:rgba(201,132,121,.78);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:3;pointer-events:none;
  clip-path:polygon(3% 0,8% 12%,4% 30%,9% 48%,3% 66%,8% 84%,3% 100%,97% 100%,92% 85%,97% 68%,91% 50%,97% 33%,92% 15%,97% 0);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.tape.sage{background-color:rgba(169,184,151,.85)}
.tape.kraft{background-color:rgba(190,147,98,.85)}
.deco{position:absolute;pointer-events:none;z-index:1}
.doily{width:120px;height:124px;background:url(/img/j-doily.webp) center/cover;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:rotate(8deg)}
.lace{width:70px;background:url(/img/j-lace.webp) 0 0/70px auto repeat-y;opacity:.9}
.seal{width:96px;height:96px;background:url(/img/j-seal.webp) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));transform:rotate(-10deg)}
.clip{width:22px;height:56px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='64' viewBox='0 0 26 64'%3E%3Cpath d='M8 18 V50 a5 5 0 0 0 10 0 V10 a8 8 0 0 0 -16 0 V52 a11 11 0 0 0 22 0 V22' fill='none' stroke='%23a7a39c' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;z-index:4}
.stamp-word{font-family:Caveat,cursive;font-size:1.25rem;color:var(--rose2);border:2px solid var(--rose2);border-radius:6px;padding:0 .45em;transform:rotate(-8deg);opacity:.85;background:rgba(255,250,240,.4)}

/* hero page */
.hero{display:grid;gap:26px;align-items:center}
.hero .tape.t1{top:24px;left:-10px;transform:rotate(-14deg);width:96px}
.hero .doily{right:-6px;top:30px;width:92px;height:96px}
.hero h1{color:var(--coffee2);font-size:clamp(2rem,8vw,3.2rem);text-shadow:0 1px 0 rgba(255,255,255,.6);padding-right:62px}
.lead{color:#3a2a1e}
.xmas{position:relative;background:var(--cream);border:2px dashed var(--rose2);border-radius:4px;color:#5b2620;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;padding:.75em 1.4em}
.short{position:relative;transform:rotate(2deg)}
.short-play{border-radius:2px;border:12px solid #fffdf7;border-bottom-width:46px;box-shadow:0 10px 24px rgba(40,20,5,.35)}
.short iframe{border-radius:2px;border:12px solid #fffdf7;border-bottom-width:46px;box-sizing:content-box;width:calc(100% - 24px)}
.short .tape{top:-14px;left:50%;margin-left:-59px;transform:rotate(-4deg)}
.short figcaption{position:absolute;left:0;right:0;bottom:8px;margin:0;font-family:Caveat,cursive;font-size:1.45rem;color:#3a2a1e;z-index:2}
.play{background:rgba(155,76,67,.92)}
@media (min-width:900px){.hero{grid-template-columns:1.25fr .75fr;padding-top:56px}}

/* shop page: coffee-dyed kraft, products as polaroids */
.shop{background:var(--kraft) url(/img/j-coffee.webp) 0 0/320px;border:0}
.shop h2,.how h2,.yt h2{display:table;margin:0 auto .45em;position:relative;background:var(--cream);padding:.12em .7em .2em;transform:rotate(-1.5deg);box-shadow:0 2px 6px rgba(0,0,0,.2);color:var(--coffee2)}
.shop h2::after,.how h2::after,.yt h2::after{content:"";position:absolute;left:-14px;top:-10px;width:70px;height:24px;background:rgba(169,184,151,.85);transform:rotate(-24deg);clip-path:polygon(4% 0,0 50%,4% 100%,96% 100%,100% 50%,96% 0)}
.shop .sub{background:var(--cream);color:#3a2a1e;padding:12px 16px;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.18);max-width:560px;transform:rotate(.6deg);position:relative}
.shop .sub::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(107,68,37,.45);pointer-events:none}
.shop .seal{right:6px;top:26px;width:74px;height:74px}
.grid{gap:34px 26px;padding:8px 4px 0}
.card{position:relative;background:#fffdf7;border-radius:2px;overflow:visible;border:0;padding:12px 12px 16px;box-shadow:0 8px 18px rgba(40,20,5,.30);transform:rotate(-1.2deg)}
.card:nth-child(2n){transform:rotate(1.1deg)}
.card:nth-child(3n){transform:rotate(-.4deg)}
.card::before{content:"";position:absolute;top:-13px;left:50%;width:108px;height:28px;margin-left:-54px;transform:rotate(-3deg);z-index:2;background:rgba(201,132,121,.8) repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 6px,transparent 6px 12px);
  clip-path:polygon(3% 0,8% 14%,3% 32%,8% 50%,3% 68%,8% 86%,3% 100%,97% 100%,92% 86%,97% 68%,92% 50%,97% 32%,92% 14%,97% 0)}
.card:nth-child(2n)::before{background-color:rgba(169,184,151,.88);transform:rotate(4deg)}
.card:nth-child(3n)::before{background-color:rgba(190,147,98,.88)}
.card .ph{border-radius:0;background:#efe5d1}
.card .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.card .body{padding:16px 6px 4px}
.card h3{font-family:Caveat,cursive;font-size:1.75rem;line-height:1.1;color:var(--coffee2)}
.price{display:inline-block;align-self:flex-start;position:relative;background:var(--tea);color:#3b2412;border:1.5px solid #b48a5a;border-radius:3px 12px 12px 3px;padding:.15em .8em .15em 1.3em;font-size:1.15rem}
.price::before{content:"";position:absolute;left:.45em;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fffdf7;border:1.5px solid #b48a5a}
.price.ask{color:#7a3a33;font-size:1.05rem}
.card p.d{color:#3a2a1e}
.loading{color:#fff8ec}

/* theme page: Val's real avocado-dyed (pink) paper */
.theme{background:#d9a79b url(/img/j-avo.webp) center/cover;color:var(--ink)}
.theme-in{position:relative;background:var(--cream) url(/img/j-tea.webp) 0 0/300px;padding:30px 20px 26px;box-shadow:0 6px 16px rgba(60,20,10,.28);transform:rotate(-.6deg)}
.theme-in::before{content:"";position:absolute;inset:8px;border:2px dashed rgba(155,76,67,.55);pointer-events:none}
.theme h2{color:var(--rose2)}
.theme p{color:#3a2a1e}
.theme .tape{top:-15px;left:20px;transform:rotate(-6deg)}
.theme .tape.r{left:auto;right:16px;transform:rotate(7deg)}
.tags{gap:14px 12px}
.tags li{position:relative;border:0;border-radius:3px 14px 14px 3px;background:var(--kraft) url(/img/j-coffee.webp) 0 0/200px;color:#2b1a0e;font-weight:700;padding:.35em .9em .35em 1.6em;box-shadow:0 2px 4px rgba(0,0,0,.22);font-size:1.02rem}
.tags li:nth-child(odd){transform:rotate(-2deg)}.tags li:nth-child(3n){transform:rotate(2deg)}
.tags li::before{content:"";position:absolute;left:.55em;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--cream);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}

/* how-to page: lined notebook paper */
.how{max-width:1100px;background:#fffaf0 linear-gradient(90deg,transparent 46px,rgba(201,132,121,.55) 46px 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 33px,rgba(120,150,170,.30) 33px 34px)}
.steps li{position:relative;background:var(--tea) url(/img/j-tea.webp) 0 0/260px;border:0;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.steps li::after{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(107,68,37,.45);pointer-events:none}
.steps li:nth-child(odd){transform:rotate(-.7deg)}.steps li:nth-child(even){transform:rotate(.6deg)}
.steps .n{background:var(--rose2);color:#fff;font-family:Caveat,cursive;font-size:1.8rem;box-shadow:0 0 0 3px #fffdf7,0 0 0 5px var(--rose2)}
.steps h3{font-family:Caveat,cursive;font-size:1.8rem;color:var(--coffee2)}
.steps p{color:#3a2a1e}
.cta-box{position:relative;background:var(--cream);border:2px dashed var(--coffee);padding:22px 16px 24px;margin-top:34px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.cta-box .clip{top:-28px;left:26px}
.xmas2{color:#5b2620}

/* exhibition page: coffee kraft with lace + a stitched form card */
.expo{background:#8d6440 url(/img/j-coffee.webp) 0 0/320px;color:var(--ink)}
.expo .lace{top:40px;bottom:30px;right:0}
.expo-in{position:relative;z-index:2}
.expo .script{color:#fff6e6;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.expo h2{color:#fffaf0;text-shadow:0 2px 3px rgba(0,0,0,.45)}
.expo-lead{background:var(--cream);color:#3a2a1e;padding:12px 16px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(-.5deg)}
.wl{position:relative;border:0;border-radius:2px;background:#fffdf7;box-shadow:0 8px 18px rgba(40,20,5,.3)}
.wl::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(155,76,67,.5);pointer-events:none}
.expo .clip{top:-24px;right:42px}
.wl .consent{background:#f6ead2}
.wl input:not([type=checkbox]){background:#fff}

/* youtube page */
.yt{background:var(--tea) url(/img/j-tea.webp) 0 0/300px;border:0}
.yt p{color:#3a2a1e}
.yt .stampbox{display:inline-block;margin:6px auto 18px;padding:9px;transform:rotate(3deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));
  background:radial-gradient(circle at 5px 5px,transparent 3.6px,#fffdf7 4.2px) -5px -5px/10px 10px}
.yt .stampbox img{width:96px;height:96px;object-fit:cover}
.btn-outline{background:#fffdf7;color:var(--rose2);border-color:var(--rose2)}

/* buttons stay big and obvious */
.btn{border-radius:12px}
.btn-gold{background:linear-gradient(180deg,#d4a46a,#b98348);color:#24150a;border-color:#8f6528;box-shadow:0 3px 0 #7d5524}
.btn-wa{background:#1f7a46;box-shadow:0 3px 0 #135530}

.foot{background:transparent;color:#eadbc4;font-family:Caveat,cursive;font-size:1.5rem;padding:4px 16px 36px}
@media (prefers-reduced-motion:no-preference){.card{transition:transform .2s}.card:hover{transform:rotate(0) translateY(-3px)}}
@media (min-width:900px){.hero .doily{top:auto;bottom:36px;right:-14px}.hero h1{padding-right:0}}
.yt .stampbox{display:block;width:max-content}
@media (max-width:699px){.expo .lace{display:none}.shop .seal{top:16px;right:10px;width:62px;height:62px}.shop h2{margin-top:40px}}
.expo .lace{width:64px;right:6px}