/* Malcolm Xavier Birthday Drop: shared styles.
   v2 "corner store": bodega / street-stand look. Palette: Tangerine, Soft Pistachio, Retro Green,
   with ink outlines and hard offset shadows. Mobile-first.
   The previous dark navy theme is saved at 02-web/editor/backups/style.v1-dark-navy.css. */
:root{
  --tangerine:#E3792F;  /* storefront orange */
  --pistachio:#E9E9C7;  /* page ground */
  --green:#30673A;      /* retro green */
  --green-deep:#1F4426; /* green for small text */
  --paper:#FBFAF0;      /* card stock */
  --ink:#16140F;        /* outlines and type */
  --mute:#4E5A47;       /* caption text */
  --shadow:6px;         /* hard offset shadow size */
  --f-display:"Bowlby One","Arial Black",Impact,sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Permanent Marker","Comic Sans MS",cursive;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--pistachio);overflow-x:hidden}
body{margin:0;background:var(--pistachio);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;padding-inline:16px;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:8px;background:var(--tangerine);color:var(--ink);padding:8px 12px;z-index:10}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* full-bleed helper: breaks out of .wrap to the screen edges */
.strip,.checker,.hook,.floor{margin-inline:calc(50% - 50vw)}

/* top strip: green awning */
.strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:10px max(16px,calc(50vw - 540px));background:var(--green);color:var(--pistachio);border-bottom:3px solid var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.strip b{background:var(--tangerine);color:var(--ink);padding:1px 6px;font-weight:700}

/* site nav: the store sign */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding-block:18px;border-bottom:3px solid var(--ink)}
.nav .brand{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--f-display);font-size:20px;line-height:1;text-decoration:none;color:var(--green);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 12px}
.nav .brand span{background:var(--tangerine);color:var(--ink);font-size:13px;padding:4px 8px;border:2px solid var(--ink)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;display:inline-block;transition:transform .12s,box-shadow .12s}
.nav ul a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.nav a[aria-current="page"]{background:var(--tangerine)}

/* hero: the stand */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;padding-block:32px 36px}
.art{position:relative;margin:0;background:var(--tangerine);border:3px solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);padding:16px}
.art img{display:block;width:100%;height:auto;border:8px solid var(--paper);outline:3px solid var(--ink)}
.art figcaption{margin-top:14px;font-family:var(--f-mono);font-size:12px;color:var(--ink);letter-spacing:.04em}
.art figcaption b{font-weight:700}
.kicker{font-family:var(--f-hand);background:var(--tangerine);color:var(--ink);border:2px solid var(--ink);font-size:20px;line-height:1.2;padding:4px 12px;transform:rotate(-3deg);display:inline-block;margin-bottom:14px}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,7vw,80px);line-height:.95;margin:0 0 20px;text-wrap:balance;letter-spacing:-.01em;overflow-wrap:anywhere}
h1 .y{color:var(--tangerine);text-shadow:3px 3px 0 var(--ink)}
.lede{font-size:18px;max-width:34ch;margin:0 0 26px}
.lede em{font-style:normal;font-family:var(--f-hand);color:var(--green);font-size:1.1em}

.count{display:flex;gap:10px;flex-wrap:wrap}
.count div{background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 12px;min-width:70px;text-align:center}
.count b{display:block;font-family:var(--f-mono);font-size:28px;font-variant-numeric:tabular-nums;color:var(--green)}
.count span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.count-note{margin-top:14px;font-size:13px;color:var(--mute)}

/* checkerboard band */
.checker{height:48px;background:repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0 0/24px 24px;border-block:3px solid var(--ink)}

/* hook band */
.hook{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;align-items:center;padding:26px 16px;margin-bottom:44px;background:var(--green);border-bottom:3px solid var(--ink);font-family:var(--f-display);font-size:clamp(24px,4.2vw,42px);line-height:1.1;text-align:center}
.hook span:nth-child(1){color:var(--paper)}
.hook span:nth-child(2){color:var(--ink);background:var(--tangerine);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:4px 16px;transform:rotate(-2deg)}

/* offers: two shelves */
.offers{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.offer{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.offer.main{background:var(--tangerine);--mute:#2B1A0D}
.tag{align-self:flex-start;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pistachio);background:var(--ink);padding:4px 8px}
.offer h2{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05;margin:0;text-wrap:balance}
.price{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.price b{font-family:var(--f-hand);font-weight:400;font-size:58px;line-height:1;color:var(--tangerine);text-shadow:2px 2px 0 var(--ink);background:#fff;border:3px solid var(--ink);padding:6px 16px 2px;transform:rotate(-3deg)}
.price span{font-size:14px;font-weight:700;color:var(--mute)}
.offer p{margin:0}
.offer ul{margin:0;padding-left:18px}
.offer li{margin-block:4px}

/* size picker */
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
legend{font-weight:700;margin-bottom:8px;padding:0}
.size{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 16px;border:3px solid var(--ink);background:var(--paper);cursor:pointer;transition:transform .12s,box-shadow .12s}
.size:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.size input{accent-color:var(--tangerine);width:18px;height:18px;margin:0}
.size .nm{font-weight:700}
.size .dim{grid-column:2;font-size:13px;color:var(--mute)}
.size .left{grid-row:1 / span 2;grid-column:3;text-align:right;font-family:var(--f-mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.size .left b{display:block;font-size:20px;color:var(--ink)}
.size:has(input:checked){background:var(--green);color:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.size:has(input:checked) .dim,.size:has(input:checked) .left,.size:has(input:checked) .left b{color:var(--pistachio)}
.size.soldout{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.value-note{font-family:var(--f-hand);color:var(--ink);font-size:17px;line-height:1.35}
.total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:14px;border-top:3px dashed var(--ink);padding-top:12px;font-variant-numeric:tabular-nums}
.total b{font-weight:700}

.buy{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:16px 22px;background:var(--green);color:var(--paper);font-family:var(--f-display);font-size:18px;letter-spacing:.02em;text-decoration:none;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center}
.buy:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.buy:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.buy[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:5px 5px 0 var(--ink)}
.pending{font-size:12px;color:var(--mute);font-family:var(--f-mono)}

/* section headings shared by pull, pile, faq, blog */
.sec-h{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1;margin:0;text-wrap:balance}
.sec-h span{color:var(--tangerine);text-shadow:3px 3px 0 var(--ink)}

/* how the pull works */
.pull{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;padding:14px;background:var(--paper);border:3px solid var(--ink)}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:52px;height:52px;font-family:var(--f-display);font-size:28px;line-height:1;color:var(--ink);background:var(--tangerine);border:3px solid var(--ink)}
.steps b{display:block;margin-bottom:2px}
.steps span{color:var(--mute)}

/* what's in the pile gallery (hidden until photos exist) */
.pile{margin-top:64px}
.pile .sec-h{margin-bottom:20px}
.pile-size{margin-top:24px}
.pile-size h3{display:inline-block;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--green);padding:4px 8px;margin:0 0 12px}
.pile-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.pile-grid figure{margin:0}
.pile-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--paper)}
.pile-grid figcaption{margin-top:6px;font-size:12px;color:var(--mute)}

.fine{margin-top:44px;padding:20px;background:var(--paper);border:3px dashed var(--ink);font-size:14px;max-width:70ch}
.fine a{color:var(--green-deep);font-weight:700}

/* FAQ / how it works page */
.page-head{padding-block:32px 8px}
.page-head h1{font-size:clamp(36px,6vw,64px)}
.faq{margin-top:40px;max-width:760px}
.faq .sec-h{margin-bottom:12px}
.faq details{border-bottom:3px solid var(--ink);padding-block:14px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style-position:outside}
.faq summary::marker{color:var(--tangerine)}
.faq details p{margin:10px 0 0;max-width:65ch}
.faq details p.mute{color:var(--mute)}

/* newsletter block */
.signup{margin-top:64px;padding:24px 22px;background:var(--green);color:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);display:grid;gap:14px}
.signup h2{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.4vw,32px);line-height:1.05;margin:0}
.signup p{margin:0;color:var(--pistachio);font-size:14px}
.signup form{display:flex;flex-wrap:wrap;gap:10px}
.signup input[type="email"]{flex:1 1 220px;min-width:0;padding:14px;font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink)}
.signup input[type="email"]:focus{outline:3px solid var(--tangerine);outline-offset:0}
.signup button{flex:0 0 auto;font-family:var(--f-display);font-size:16px;padding:14px 20px;background:var(--tangerine);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.signup button:hover{background:var(--paper)}
.signup .msg{font-family:var(--f-mono);font-size:12px;color:var(--paper);min-height:1em}

/* blog */
.posts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px;max-width:760px}
.posts li{border:3px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);padding:18px 20px}
.posts a{text-decoration:none}
.posts h2{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.1;margin:0 0 6px}
.posts a:hover h2{color:var(--green)}
.posts time,.post-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.posts p{margin:6px 0 0}
.empty{color:var(--mute);margin-top:20px}
.post{max-width:70ch;margin-top:12px}
.post h1{font-size:clamp(34px,6vw,58px)}
.post h2,.post h3{font-family:var(--f-display);font-weight:400;line-height:1.1;margin:36px 0 10px}
.post h2{font-size:28px}.post h3{font-size:22px}
.post p,.post li{font-size:17px;line-height:1.65}
.post a{color:var(--green-deep);font-weight:700}
.post img{display:block;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);margin-block:20px}
.post blockquote{margin:24px 0;padding:12px 16px;border-left:6px solid var(--tangerine);background:var(--paper);font-family:var(--f-hand);font-size:20px}
.post code{font-family:var(--f-mono);font-size:.9em;background:var(--paper);padding:1px 5px}
.post pre{overflow-x:auto;background:var(--paper);border:2px solid var(--ink);padding:14px}
.post .table-wrap{overflow-x:auto;margin-block:20px}
.post table{border-collapse:collapse;width:100%;font-size:15px;background:var(--paper)}
.post th,.post td{border:2px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
.post th{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--green)}
.post hr{border:0;border-top:3px dashed var(--ink);margin-block:28px}
.draft-banner{margin:16px 0 0;padding:12px 14px;border:3px dashed var(--ink);background:var(--tangerine);font-family:var(--f-mono);font-size:13px}
.back{display:inline-block;margin-top:28px;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--tangerine)}
.back:hover{color:var(--green)}

footer{margin-top:56px;padding-top:16px;border-top:3px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--mute);letter-spacing:.08em}
footer .bar{letter-spacing:.3em;color:var(--ink);font-weight:700}

/* bodega floor tiles at the foot of the page */
.floor{height:96px;margin-top:24px;border-top:3px solid var(--ink);background-color:var(--green);background-image:radial-gradient(circle,var(--tangerine) 0 12%,transparent 13%),conic-gradient(from 45deg,var(--pistachio) 0 25%,var(--green) 0 50%,var(--pistachio) 0 75%,var(--green) 0);background-size:48px 48px}

/* wider screens */
@media (min-width:821px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;padding-block:44px 48px}
  .art{transform:rotate(-1.5deg)}
  .offers{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .offer{padding:28px}
  .pull{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
  .signup{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;padding:28px}
  .signup .msg{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* birthday portrait */
.bday{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin-bottom:56px}
.portrait{margin:0;background:var(--green);border:3px solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);padding:14px;max-width:440px}
.portrait img{display:block;width:100%;height:auto;border:8px solid var(--paper);outline:3px solid var(--ink)}
.bday .sec-h{font-size:clamp(36px,6vw,64px);margin-bottom:14px}
.bday-line{font-size:20px;max-width:28ch;margin:0 0 24px}
#tier-card{scroll-margin-top:16px}
@media (min-width:821px){
  .bday{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
  .portrait{transform:rotate(1.5deg)}
}

/* birthday wall: approved messages as taped-up notes */
.wall{margin-top:36px}
.wall-status{font-family:var(--f-hand);font-size:20px;color:var(--green-deep);background:var(--paper);border:3px dashed var(--ink);padding:18px 20px;margin:0}
.wall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:22px}
.note{position:relative;background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:22px 18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:72px;height:22px;margin-left:-36px;background:rgba(227,121,47,.75);border:2px solid var(--ink);transform:rotate(-4deg)}
.note p{margin:0;font-family:var(--f-hand);font-size:19px;line-height:1.35;overflow-wrap:anywhere}
.note .who{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.note.n0{transform:rotate(-1.5deg)}
.note.n1{transform:rotate(1deg);background:#FFF3E6}
.note.n2{transform:rotate(-.5deg);background:#EEF5E4}
.note.n3{transform:rotate(1.5deg)}
@media (prefers-reduced-motion:no-preference){.note{transition:transform .15s}.note:hover{transform:rotate(0) translate(-1px,-1px)}}