/* Mudlark — "The Mud Line". Brand codes (recognizable without reading the name):
   1. slicker yellow over wet mud, 2. the drip line between yellow and mud,
   3. doormat stencil lettering, 4. a paw trail that fades as it crosses the mat, 5. the RINSE · SOAK · WIPE ritual.
   Rules: docs/MUDLARK_DA.md. One scheme on purpose: the colors are the brand, no dark-mode inversion. */
@font-face{font-family:"Mud Stencil";src:url(/assets/fonts/stencil-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{color-scheme:light;--yolk:#f2b500;--yolk-soft:#f8d66b;--mud:#2a1a10;--clay:#7a4a2a;--floor:#f7f1e3;--rain:#4f6470;--line:#2a1a1026;
--stencil:"Mud Stencil","Impact","Arial Narrow Bold",sans-serif;--body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
--drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath fill='%232a1a10' d='M0 0H600V16C573 20 552 14 546 16C545 34 544.8 46 540 46C535.2 46 535 34 534 16C506 20 484 14 478 16C477 47.2 476 68 468 68C460 68 459 47.2 458 16C436.5 20 421 14 415 16C414 30.4 414 40 410 40C406 40 406 30.4 405 16C371.5 20 344 14 338 16C337 40 336.4 56 330 56C323.6 56 323 40 322 16C295 20 274 14 268 16C267 32.8 266.8 44 262 44C257.2 44 257 32.8 256 16C227.5 20 205 14 199 16C198 44.8 197.2 64 190 64C182.8 64 182 44.8 181 16C152 20 129 14 123 16C122 29.2 122 38 118 38C114 38 114 29.2 113 16C80 20 53 14 47 16C46 36.4 45.6 50 40 50C34.4 50 34 36.4 33 16C16.5 20 12 13 0 16Z'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html{background:var(--mud)}
body{margin:0;background:var(--floor);color:var(--mud);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.st{font-family:var(--stencil);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.86}

/* caution tape: the pre-launch notice is a wet-floor sign */
.tape{margin:0;padding:7px 16px;background:repeating-linear-gradient(-45deg,var(--yolk) 0 14px,var(--mud) 14px 28px);text-align:center}
.tape span{display:inline-block;background:var(--mud);color:var(--yolk);padding:3px 10px;font:800 .78rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase}

/* yellow zone = outside, wet */
.yard{background:var(--yolk);position:relative;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:6px;position:relative;z-index:2}
.word{font-size:2.1rem;text-decoration:none;display:flex;align-items:center;gap:8px}
.word svg{width:30px;height:30px}
.top small{font:800 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.hero{display:grid;gap:18px;padding-top:10px;padding-bottom:70px;position:relative;z-index:2}
.hero h1{font-size:clamp(4.4rem,19vw,10.5rem);margin:0}
.hero h1 em{font-style:normal;color:var(--floor);text-shadow:.05em .05em 0 var(--mud)}
@media (max-width:879px){.hero .buy{order:1}.hero .shot{order:2}.gallery .main img{aspect-ratio:auto;height:52vh}}
.lede{font-size:1.06rem;max-width:34ch;margin:0;font-weight:400}
.ritual{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.ritual li{font-family:var(--stencil);font-weight:900;font-size:1.25rem;letter-spacing:.04em;background:var(--mud);color:var(--yolk);padding:6px 10px 4px}
.ritual li:nth-child(2){transform:rotate(-2deg)}.ritual li:nth-child(3){transform:rotate(1.5deg)}
.shot{position:relative}
.gallery .main img{width:100%;aspect-ratio:4/5;object-fit:cover;border:6px solid var(--mud);background:var(--clay);height:auto}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumb{padding:0;margin:0;border:3px solid var(--mud);background:var(--mud);cursor:pointer;flex:0 0 58px}.thumb img{width:52px;height:64px;object-fit:cover}
.thumb:focus-visible,.cta:focus-visible,summary:focus-visible{outline:3px solid var(--rain);outline-offset:3px}
.seal{position:absolute;right:-12px;top:-18px;width:118px;height:118px;z-index:3}
.seal text{font-family:var(--stencil);font-weight:900;font-size:15.5px;letter-spacing:2.2px;fill:var(--yolk)}
@media (prefers-reduced-motion:no-preference){.seal .ring{animation:spin 24s linear infinite;transform-origin:60px 60px}@keyframes spin{to{transform:rotate(360deg)}}
.trail use{animation:step .5s both}.trail use:nth-child(2){animation-delay:.15s}.trail use:nth-child(3){animation-delay:.3s}.trail use:nth-child(4){animation-delay:.45s}.trail use:nth-child(5){animation-delay:.6s}.trail use:nth-child(6){animation-delay:.75s}.trail use:nth-child(7){animation-delay:.9s}
@keyframes step{from{opacity:0}}} /* opacity only: a CSS transform would override the SVG rotate() of each print */
.buy{background:var(--mud);color:var(--floor);padding:16px;display:grid;gap:10px}
.buy .price{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.buy .price b{font-family:var(--stencil);font-size:3rem;line-height:1;color:var(--yolk)}
.buy .price span{font-size:.85rem;opacity:.85;text-align:right}
.cta{width:100%;border:0;margin:0;padding:15px 16px 12px;background:var(--yolk);color:var(--mud);font-family:var(--stencil);font-weight:900;font-size:1.6rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 5px 0 var(--clay);transition:transform .08s,box-shadow .08s}
.cta:hover{background:var(--yolk-soft)}.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--clay)}.cta:disabled{opacity:.6;cursor:wait}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:.85rem;opacity:.9}
.facts li::before{content:"✓ ";color:var(--yolk)}
.err{margin:0;color:#ffd0c2;font-size:.92rem}
.trail{position:absolute;right:-30px;bottom:30px;width:min(70vw,560px);height:auto;z-index:1;pointer-events:none;color:var(--mud)}
@media (min-width:880px){.hero{grid-template-columns:1.1fr .9fr;align-items:start;column-gap:48px;padding-bottom:110px}
.hero .say{grid-column:1;grid-row:1}.hero .shot{grid-column:2;grid-row:1 / span 2}.hero .buy{grid-column:1;grid-row:2;align-self:start;max-width:440px}
.trail{left:40%;right:auto;bottom:4px}}
/* the mud line: wherever yellow meets mud */
/* <div class="drip" style="--top:..;--bot:.."> : the upper zone runs down into the lower one */
.drip{height:46px;background:var(--bot,var(--mud));position:relative;margin-top:-1px}
.drip::before{content:"";position:absolute;inset:0;background:var(--top,var(--yolk));-webkit-mask:var(--drip) center top/600px 100% repeat-x;mask:var(--drip) center top/600px 100% repeat-x}

/* mud zone = the door, the routine */
.door{background:var(--mud);color:var(--floor);padding:30px 0 56px}
.kicker{font:800 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--yolk);margin:0 0 10px}
.door h2,.floor h2{font-size:clamp(2.8rem,10vw,5.2rem);margin:0 0 26px}
.steps{display:grid;gap:30px;counter-reset:s;margin:0;padding:0;list-style:none}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr);gap:26px}}
.steps li{counter-increment:s;position:relative}
.steps li::before{content:counter(s);position:absolute;top:-14px;left:-6px;z-index:2;font-family:var(--stencil);font-weight:900;font-size:5.4rem;line-height:1;color:var(--yolk);text-shadow:4px 4px 0 var(--mud)}
.steps img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9) contrast(1.04)}
.steps h3{font-size:2.6rem;margin:14px 0 6px;color:var(--yolk)}
.steps p{margin:0;opacity:.92;max-width:38ch}

/* floor zone = inside, clean */
.floor{background:var(--floor);padding:40px 0 56px}
.floor h2{color:var(--mud)}
.honest{display:grid;gap:14px;margin:0 0 48px;padding:0;list-style:none}
@media (min-width:880px){.honest{grid-template-columns:repeat(3,1fr)}}
.honest li{border:3px solid var(--mud);padding:16px;background:#fff8}
.honest b{display:block;font-family:var(--stencil);font-weight:900;font-size:1.6rem;line-height:1;text-transform:uppercase;margin-bottom:6px}
.tablewrap{overflow-x:auto;margin:0 0 48px;border:3px solid var(--mud)}
table{border-collapse:collapse;width:100%;font-size:.95rem}.vs{min-width:520px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--stencil);font-weight:900;font-size:1.25rem;text-transform:uppercase;background:var(--mud);color:var(--floor)}
.vs thead th:nth-child(2),.vs tbody td:first-of-type{background:var(--yolk);color:var(--mud)}
tbody th{font-weight:800}
.two{display:grid;gap:40px}@media (min-width:880px){.two{grid-template-columns:1fr 1fr}}
.two h3{font-size:2.3rem;margin:0 0 12px}
.specs th{width:38%}.specs td,.specs th{padding:10px 0;border-bottom:1px solid var(--line)}
.faq details{border-bottom:3px solid var(--mud);padding:13px 0}
.faq summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--stencil);font-size:1.6rem;line-height:.8}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 0}
.safety{margin-top:48px;padding:16px;border:3px dashed var(--mud);font-size:.92rem}
.safety h3{font-size:1.7rem;margin:0 0 8px}.safety p{margin:4px 0}.safety ul{margin:4px 0;padding-left:20px}

/* footer: the mat */
.mat{background:var(--mud);color:var(--floor);padding:30px 0 0;overflow:hidden}
.mat .say{display:grid;gap:12px;font-size:.88rem;opacity:.9;max-width:70ch}
.mat .say a{color:var(--yolk)}
.mat .big{font-size:clamp(5rem,27vw,21rem);color:var(--yolk);margin:24px 0 -0.13em;white-space:nowrap;text-align:center;letter-spacing:-.01em}
.sticky{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--mud);color:var(--floor);z-index:10;border-top:4px solid var(--yolk)}
.sticky[hidden]{display:none}.sticky .cta{width:auto;font-size:1.25rem;padding:10px 16px 8px;box-shadow:none}
.sticky span{font-weight:800;font-size:.95rem}
@media (min-width:880px){.sticky{display:none!important}}

/* inner pages (legal, thank you) */
.doc{background:var(--floor);padding:36px 0 56px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(2.8rem,10vw,4.6rem);margin:0 0 20px}
.doc h2{font-family:var(--stencil);font-weight:900;text-transform:uppercase;font-size:1.7rem;line-height:1;margin:30px 0 8px}
.doc p{margin:0 0 10px}

/* offer: cup size + order bump (unchecked by default), mat on its own */
.sizes{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sizes legend{font-size:.82rem;margin-bottom:6px;opacity:.9}
.sizes label{position:relative;display:grid;gap:2px;text-align:center;border:2px solid #f7f1e355;padding:8px 4px 6px;cursor:pointer}
.sizes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sizes b{font-family:var(--stencil);font-weight:900;font-size:1.7rem;line-height:1;color:var(--yolk)}
.sizes small{font-size:.72rem;line-height:1.25;opacity:.85}
.sizes label:has(input:checked){border-color:var(--yolk);background:#f2b5001f}
.sizes label:has(input:focus-visible){outline:3px solid var(--rain);outline-offset:2px}
.bump{display:grid;grid-template-columns:auto 48px 1fr;gap:10px;align-items:center;border:2px dashed var(--yolk);padding:10px;cursor:pointer;font-size:.82rem;line-height:1.35}
.bump input{width:22px;height:22px;accent-color:var(--yolk);margin:0}
.bump img{width:48px;height:60px;object-fit:cover}
.bump b{display:block;font-size:.95rem;color:var(--yolk)}
.mat-only{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;border:3px solid var(--mud);padding:14px;margin:0 0 48px;background:#fff8}
.mat-only img{width:120px;height:150px;object-fit:cover}
.mat-only h3{font-size:2rem;margin:0 0 6px}.mat-only p{margin:0 0 12px}
.mat-only .cta{width:auto;font-size:1.3rem;padding:12px 16px 10px}
@media (min-width:880px){.mat-only{grid-template-columns:160px 1fr;max-width:640px}.mat-only img{width:160px;height:200px}}