/* ==========================================================================
   Yolky — web atomic elements
   Every class here is one small, self-contained piece. Nothing in this file
   knows about page layout; composition lives in site.css and the pages.
   Open atoms.html to see all of them in isolation.

   The palette and the outline/slab treatment are carried over from the
   shipped App Store kit (marketing/screenshots/atoms.css) so the site, the
   store gallery and the app read as one brand.
   ========================================================================== */

:root{
  /* ── ink & ground ─────────────────────────────────────────────────── */
  --ink:#231303;          /* warm near-black: outlines, body copy on bright */
  --card:#1A1611;         /* warm near-black card. NOT blue-grey — cool grey
                             type on warm orange reads as dirty. */
  --card-hi:#221D16;
  --elev:#2A231A;

  /* ── three yellows, not one, so a frame has a focal point ─────────── */
  --yolk:#FFCC00;         /* hero  S=100 */
  --yolk-mid:#FFD24A;     /* secondary icons */
  --yolk-lem:#FFEA3D;     /* small in-card accents */
  --yolk-deep:#F0A500;

  /* ── coral family: soft for fills, strong for strokes ─────────────── */
  --pop:#FC6455;
  --pop-soft:#FF7B77;
  --pop-warm:#FA5D3A;
  --pop-ink:#C4301D;      /* emphasis + links on cream. #D93A22 measured
                             4.26:1 in the browser — under AA — so it was
                             darkened until it cleared 4.5 on BOTH creams
                             (5.15 on --egg, 5.28 on --cream). */
  --mint:#7BD88F;

  --cream:#FFF9EC;
  --egg:#FAF6EF;
  --text:#FCFAF7;
  --text-dim:#CFC6BF;
  --ink-dim:#6B5540;      /* muted body copy on cream — 5.6:1 */

  /* ── type ─────────────────────────────────────────────────────────── */
  --display:"Baloo 2",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;

  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px;
  --shadow-card:0 18px 40px rgba(90,36,0,.22), 0 42px 80px rgba(90,36,0,.14);
  --shadow-hard:0 6px 0 rgba(35,19,3,.20);
}

/* ─── a1. sticker type ───────────────────────────────────────────────
   Heavy display text with a hard outline and an offset shadow.
   `paint-order:stroke fill` keeps the stroke *behind* the fill, so glyphs
   stay crisp instead of being eaten from the inside.
   The rim is deliberately about HALF a letter stroke: at equal thickness
   adjacent outlines fuse into a lumpy puddle. */
.a-sticker{
  font-family:var(--display); font-weight:800;
  line-height:.92; letter-spacing:-.02em;
  color:#fff;
  -webkit-text-stroke:.085em var(--ink);
  paint-order:stroke fill;
  filter:drop-shadow(0 .055em 0 rgba(35,19,3,.26));
  margin:0;
}
.a-sticker--yolk{color:var(--yolk)}
.a-sticker--cream{color:var(--cream)}
/* the black block treatment — for the stepped second line */
.a-sticker--slab{
  -webkit-text-stroke:0; color:var(--yolk);
  background:var(--ink); border-radius:.16em;
  padding:.02em .14em .1em; display:inline-block;
  filter:drop-shadow(0 .06em 0 rgba(35,19,3,.22));
}

/* ─── a2. note pill — the cream sub-line ─────────────────────────── */
/* inline-block, NOT flex: as a flex container the bare text nodes either
   side of <em> become anonymous flex items, so on a narrow screen the line
   wraps into blocks separated by the gap instead of flowing as a sentence. */
.a-note{
  display:inline-block; text-align:center;
  background:var(--cream); color:#2A1A0B;
  border-radius:999px; padding:.7em 1.25em;
  font:500 clamp(15px,1.6vw,19px)/1.45 var(--body); letter-spacing:-.01em;
  box-shadow:0 8px 0 rgba(35,19,3,.11);
}
.a-note em{
  font-style:normal; position:relative; color:var(--pop-ink);
  font-weight:800; margin:0 .1em;
}
.a-note em::after{        /* hand-drawn underline */
  content:""; position:absolute; left:-1px; right:-1px; bottom:-3px; height:4px;
  background:var(--pop); border-radius:4px; transform:rotate(-.9deg);
}

/* ─── a3. input pill ─────────────────────────────────────────────── */
.a-pill{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--ink); color:var(--cream);
  border:0; border-radius:999px; padding:.72em 1.25em;
  font:700 clamp(14px,1.4vw,17px)/1 var(--body); letter-spacing:-.02em;
  box-shadow:var(--shadow-hard);
  cursor:pointer; transition:transform .16s cubic-bezier(.2,.9,.3,1.3),
                             box-shadow .16s ease, background .16s ease;
}
.a-pill:hover{transform:translateY(-2px); box-shadow:0 9px 0 rgba(35,19,3,.22)}
.a-pill:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(35,19,3,.22)}
.a-pill--yolk{background:var(--yolk); color:var(--ink); box-shadow:0 6px 0 rgba(180,110,0,.32)}
.a-pill--cream{background:var(--cream); color:var(--ink)}
.a-pill[aria-selected="true"]{background:var(--yolk); color:var(--ink); box-shadow:0 6px 0 rgba(180,110,0,.32)}
.a-pill .a-ico{width:1.15em; height:1.15em; flex:none}

/* ─── a4. info chip — outlined, for recipe metadata ──────────────── */
.a-chip{
  display:inline-flex; align-items:center; gap:.45em;
  border:2px solid rgba(255,240,214,.28); border-radius:999px;
  padding:.42em .8em; color:var(--text);
  font:600 clamp(12px,1.15vw,14px)/1 var(--body); letter-spacing:-.01em;
}
.a-chip .a-ico{width:1.05em; height:1.05em; flex:none; color:var(--yolk-lem)}
.a-chip--ink{border-color:rgba(35,19,3,.22); color:var(--ink)}
.a-chip--ink .a-ico{color:var(--pop)}

/* ─── a5. photo card ─────────────────────────────────────────────── */
.a-photo{
  display:block; overflow:hidden; border-radius:var(--r-xl);
  border:9px solid #FFFDF7; background:#FFFDF7;
  box-shadow:var(--shadow-card);
}
.a-photo img{display:block; width:100%; height:100%; object-fit:cover}

/* ─── a6. beat badge — the "becomes" marker ──────────────────────── */
.a-beat{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--yolk); color:var(--ink);
  box-shadow:0 0 0 7px #FFFDF7, 0 12px 26px rgba(120,52,0,.3);
}
.a-beat svg{width:30px; height:30px}

/* ─── a7. recipe card ────────────────────────────────────────────── */
.a-recipe{
  background:linear-gradient(168deg,var(--card-hi),var(--card));
  border-radius:var(--r-xl); padding:clamp(20px,2.4vw,30px); color:var(--text);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);
}
.a-recipe__title{
  font:800 clamp(26px,3vw,38px)/1.04 var(--display); letter-spacing:-.03em; margin:0;
}
.a-recipe__title b{color:var(--yolk); font-weight:800}
.a-recipe__vibe{
  margin:.5em 0 0; color:var(--yolk-lem);
  font:600 clamp(13px,1.3vw,15px)/1.4 var(--body);
}
.a-recipe__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.a-recipe__list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.a-recipe__list li{
  display:flex; align-items:center; gap:10px; color:var(--text-dim);
  font:500 clamp(13px,1.3vw,15px)/1.3 var(--body);
}
.a-recipe__list li::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--yolk-deep); flex:none;
}
.a-recipe__foot{
  margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,240,214,.13);
  display:flex; align-items:center; gap:8px; color:var(--text-dim);
  font:600 clamp(12px,1.2vw,14px)/1 var(--body);
}

/* ─── a8. buttons ────────────────────────────────────────────────── */
.a-btn{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--ink); color:var(--cream);
  border:0; border-radius:999px; padding:.85em 1.6em;
  font:800 clamp(15px,1.5vw,18px)/1 var(--body); letter-spacing:-.02em;
  text-decoration:none; cursor:pointer; box-shadow:var(--shadow-hard);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s ease;
}
.a-btn:hover{transform:translateY(-2px); box-shadow:0 9px 0 rgba(35,19,3,.22)}
.a-btn:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(35,19,3,.22)}
.a-btn .a-ico{width:1.35em; height:1.35em; flex:none}
.a-btn--yolk{background:var(--yolk); color:var(--ink); box-shadow:0 6px 0 rgba(180,110,0,.34)}
.a-btn--yolk:hover{box-shadow:0 9px 0 rgba(180,110,0,.34)}
.a-btn--yolk:active{box-shadow:0 3px 0 rgba(180,110,0,.34)}
.a-btn--ghost{
  background:transparent; color:var(--ink); box-shadow:none;
  border:2.5px solid rgba(35,19,3,.38);   /* .2 vanished on the yolk ground */
}
.a-btn--ghost:hover{background:rgba(35,19,3,.07); box-shadow:none; transform:translateY(-2px)}
.a-btn--ghost.a-btn--onDark{color:var(--cream); border-color:rgba(255,249,236,.38)}
.a-btn--ghost.a-btn--onDark:hover{background:rgba(255,249,236,.09)}
.a-btn__sub{display:block; font-size:.66em; font-weight:600; opacity:.72; letter-spacing:0}
.a-btn__main{display:block; line-height:1.15}

/* ─── a9. eyebrow label ──────────────────────────────────────────── */
.a-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font:800 clamp(11px,1.1vw,13px)/1 var(--body);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--pop-ink);
}
.a-eyebrow::before{
  content:""; width:22px; height:3px; border-radius:3px; background:var(--pop);
}
/* --dim is for DARK grounds only: yolk on cream is 1.5:1 */
.a-eyebrow--dim{color:var(--yolk)}
.a-eyebrow--dim::before{background:var(--yolk)}

/* ─── a10. handwritten annotation ────────────────────────────────── */
.a-hand{
  font:700 clamp(19px,2.2vw,27px)/1.05 var(--hand);
  color:var(--ink); transform:rotate(-4deg); display:inline-block;
}
.a-hand--cream{color:var(--cream)}

/* ─── a11. feature card ──────────────────────────────────────────── */
.a-feature{
  background:var(--card-hi); border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px); color:var(--text);
  border:1px solid rgba(255,240,214,.14);
  transition:transform .2s ease, border-color .2s ease;
}
.a-feature:hover{transform:translateY(-4px); border-color:rgba(255,204,0,.35)}
.a-feature__ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,204,0,.14); color:var(--yolk); margin-bottom:16px;
}
.a-feature__ico svg{width:24px; height:24px}
.a-feature h3{
  font:800 clamp(17px,1.8vw,21px)/1.2 var(--display);
  letter-spacing:-.02em; margin:0 0 .45em;
}
.a-feature p{
  margin:0; color:var(--text-dim);
  font:500 clamp(14px,1.4vw,16px)/1.55 var(--body);
}
/* light variant, for the cream ground */
.a-feature--cream{background:var(--cream); color:var(--ink); border-color:rgba(35,19,3,.09)}
.a-feature--cream .a-feature__ico{background:rgba(252,100,85,.14); color:var(--pop-ink)}
.a-feature--cream p{color:var(--ink-dim)}
.a-feature--cream:hover{border-color:rgba(252,100,85,.4)}

/* ─── a12. numbered step ─────────────────────────────────────────── */
.a-step{display:flex; gap:16px; align-items:flex-start}
.a-step__n{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--yolk); color:var(--ink);
  font:800 19px/1 var(--display);
  box-shadow:0 0 0 5px rgba(255,204,0,.2);
}
.a-step h3{
  font:800 clamp(17px,1.8vw,20px)/1.2 var(--display);
  letter-spacing:-.02em; margin:.35em 0 .35em;
}
.a-step p{margin:0; color:var(--ink-dim); font:500 clamp(14px,1.4vw,16px)/1.55 var(--body)}

/* ─── a13. FAQ row ───────────────────────────────────────────────── */
.a-faq{
  border-bottom:2px solid rgba(35,19,3,.1);
}
.a-faq summary{
  list-style:none; cursor:pointer; padding:1.05em 2.4em 1.05em 0; position:relative;
  font:700 clamp(16px,1.7vw,19px)/1.35 var(--body); letter-spacing:-.02em;
  color:var(--ink);
}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{
  content:""; position:absolute; right:.35em; top:50%; width:13px; height:13px;
  border-right:3px solid var(--pop); border-bottom:3px solid var(--pop);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.a-faq[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.a-faq__a{
  margin:0; padding:0 1.5em 1.35em 0; color:var(--ink-dim);
  font:500 clamp(14px,1.5vw,17px)/1.65 var(--body);
}
.a-faq__a a{color:var(--pop-ink)}

/* ─── a14. doodles ───────────────────────────────────────────────── */
.a-doodle{color:var(--pop); pointer-events:none; display:block}
.a-doodle--yolk{color:var(--yolk)}
.a-doodle--ink{color:var(--ink)}

/* ─── a15. price card ────────────────────────────────────────────── */
.a-price{
  background:var(--cream); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px); color:var(--ink);
  border:3px solid rgba(35,19,3,.1); position:relative;
}
.a-price--best{border-color:var(--yolk); box-shadow:0 0 0 6px rgba(255,204,0,.22)}
.a-price__tag{
  position:absolute; top:-14px; left:clamp(22px,2.4vw,30px);
  background:var(--pop); color:#fff; border-radius:999px; padding:.4em .9em;
  font:800 12px/1 var(--body); letter-spacing:.06em; text-transform:uppercase;
}
.a-price__name{font:800 clamp(16px,1.7vw,19px)/1 var(--display); margin:0 0 .5em}
.a-price__amt{font:800 clamp(32px,3.6vw,44px)/1 var(--display); letter-spacing:-.03em; margin:0}
.a-price__amt span{font-size:.4em; font-weight:700; color:var(--ink-dim); letter-spacing:0}
.a-price__note{margin:.7em 0 0; color:var(--ink-dim); font:500 14px/1.5 var(--body)}

/* ─── a16. legal prose ───────────────────────────────────────────── */
.a-prose{color:var(--ink); font:400 17px/1.7 var(--body); max-width:72ch}
.a-prose h2{
  font:800 clamp(22px,2.6vw,30px)/1.2 var(--display); letter-spacing:-.02em;
  margin:2.2em 0 .6em; scroll-margin-top:100px;
}
.a-prose h3{font:800 clamp(17px,1.9vw,21px)/1.3 var(--display); margin:1.8em 0 .5em}
.a-prose p{margin:0 0 1.1em}
.a-prose ul,.a-prose ol{margin:0 0 1.2em; padding-left:1.3em}
.a-prose li{margin:0 0 .55em}
.a-prose a{color:var(--pop-ink); text-underline-offset:3px}
.a-prose strong{font-weight:800}
.a-prose table{
  width:100%; border-collapse:collapse; margin:0 0 1.4em;
  font-size:15px; display:block; overflow-x:auto;
}
.a-prose th,.a-prose td{
  text-align:left; padding:.7em .9em; border-bottom:1px solid rgba(35,19,3,.12);
  vertical-align:top;
}
.a-prose th{font-weight:800; background:rgba(255,204,0,.13); white-space:nowrap}
.a-prose__lede{font-size:19px; color:var(--ink-dim); margin-bottom:1.6em}

/* ─── shared: icon sizing + focus ────────────────────────────────── */
.a-ico{display:block}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--pop-ink); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}