/* Treats By Marie v3 — clean white, cookie-toned, Crumbl energy with Marie's warmth.
   Color law: nothing on this page renders darker than the darkest cookie (--cocoa).
   Palette is drawn from the cookies themselves: cocoa, biscoff caramel, butter, cream, matcha, jam (CTA only). */
:root{
  --white:#ffffff;
  --cream:#fdf8f0;
  --cream-deep:#f7efe2;
  --cocoa:#4a3220;        /* darkest allowed — milk-chocolate cookie */
  --cocoa-soft:#7a6047;
  --caramel:#b5762f;      /* biscoff drizzle */
  --butter:#e9c46a;
  --matcha:#7fa869;
  --jam:#a33449;          /* CTA only — lightened off the old #8e2a3c to obey the color law */
  --jam-deep:#8e2a3c;
  --line:rgba(74,50,32,.12);
  --radius:12px; /* tightened from 22px — soft-pill cards fought the ticket edges */
  --shadow:0 24px 60px -28px rgba(122,96,71,.45);
  --shadow-soft:0 10px 30px -18px rgba(122,96,71,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
/* One visible focus ring everywhere — the clipped ticket geometry and the
   transparent cookie hit-circles made the browser default unreliable. */
:focus-visible{outline:3px solid var(--caramel);outline-offset:3px;border-radius:2px}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;background:var(--white);color:var(--cocoa);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.wordmark{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.06}
img{max-width:100%;display:block}
a{color:inherit}

/* buttons — the bakery ticket: all four corners clipped on the diagonal,
   dashed tear-line inset. --nk is the notch depth; --nk-in keeps the inner
   dash parallel to the outer edge. */
.btn{--nk:10px;--nk-in:7px;
  position:relative;display:inline-block;padding:.85rem 1.7rem;
  clip-path:polygon(var(--nk) 0,calc(100% - var(--nk)) 0,100% var(--nk),100% calc(100% - var(--nk)),calc(100% - var(--nk)) 100%,var(--nk) 100%,0 calc(100% - var(--nk)),0 var(--nk));
  text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, background .18s ease;border:none}
.btn::after{content:"";position:absolute;inset:4px;border:1px dashed currentColor;opacity:.34;pointer-events:none;
  clip-path:polygon(var(--nk-in) 0,calc(100% - var(--nk-in)) 0,100% var(--nk-in),100% calc(100% - var(--nk-in)),calc(100% - var(--nk-in)) 100%,var(--nk-in) 100%,0 calc(100% - var(--nk-in)),0 var(--nk-in))}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-order{background:var(--jam);color:#fff}
.btn-order:hover{background:var(--jam-deep)}
.btn-quiet{background:var(--cream-deep);color:var(--cocoa)} /* opaque — cookies orbit behind it, never through it */
.btn-quiet:hover{background:var(--cream)}
.btn-lg{--nk:13px;--nk-in:10px;padding:1.05rem 2.1rem;font-size:.92rem}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.9rem clamp(1rem,4vw,3rem);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.wordmark{font-size:1.45rem;text-decoration:none}
.wordmark span{font-style:italic;font-weight:400;color:var(--caramel)}
.wordmark.small{font-size:1.2rem}
.wordmark-city{display:none} /* phone only — see the max-width:900px block */
.nav{display:flex;gap:1.5rem;margin-left:auto}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--cocoa-soft);transition:color .15s}
.nav a:hover{color:var(--caramel)}
@media(max-width:840px){.nav{display:none}.topbar{justify-content:space-between}}

/* hero — the wheel: name center stage, cookies orbit it */
.hero{position:relative;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;min-height:88vh;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,3rem);overflow:hidden}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:44rem;pointer-events:none} /* cookies orbit underneath — hovers pass through to them */
.hero-inner a{pointer-events:auto}
.hero-inner .lede{margin-left:auto;margin-right:auto}
.hero-inner .hero-cta{justify-content:center}
.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--caramel);margin-bottom:1rem}
.hero h1{font-size:clamp(2.8rem,6vw,5.2rem);margin-bottom:1.2rem}
.hero h1 .line{display:inline-block}
.hero h1 .accent{font-style:italic;font-weight:500;color:var(--caramel)}
.lede{font-size:1.14rem;color:var(--cocoa-soft);max-width:32rem;margin-bottom:1.9rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-cookies{position:absolute;inset:0;z-index:1}
/* every spot parks at stage center; v3-motion.js owns position via transform (the wheel) */
.cookie-spot{position:absolute;top:50%;left:50%;margin:0;will-change:transform;cursor:pointer;aspect-ratio:1/1;border-radius:50%}
.motion-ready .cookie-spot{opacity:0} /* hidden only when the motion layer will fly them in */
/* border-radius makes the HIT AREA circular — transparent png corners stop stealing a neighbor's hover */
.float-cookie{width:100%;filter:drop-shadow(0 30px 40px rgba(74,50,32,.28));will-change:transform;transition:filter .45s ease, opacity .45s ease;pointer-events:none}
/* sizes only — no two the same; --rot is the resting tilt the wheel preserves */
.cs-1{width:min(15vw,215px);--rot:-8deg}
.cs-2{width:min(17vw,245px);--rot:6deg}
.cs-3{width:min(13vw,190px);--rot:-4deg}
.cs-4{width:min(16vw,230px);--rot:9deg}
.cs-5{width:min(14vw,205px);--rot:-6deg}
.cs-6{width:min(15vw,215px);--rot:3deg}
.cs-7{width:min(12vw,175px);--rot:-10deg}
/* Failsafe layout: the head script adds .no-wheel if the motion layer never
   arrives, so the cookies land visible instead of staying at opacity 0. */
.hero-stage.no-wheel .cookie-spot{opacity:1;position:static;transform:none;display:inline-block;width:15%;margin:.4rem}
.hero-stage.no-wheel .hero-cookies{position:static;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.hero-stage.no-wheel .cookie-tag{position:static;opacity:1;transform:none;white-space:normal}
/* flavor tag — hidden until its cookie is tasted */
.cookie-tag{position:absolute;left:50%;bottom:-2.6rem;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;text-align:center;white-space:nowrap;transition:opacity .35s ease .08s, transform .35s cubic-bezier(.22,1,.36,1) .08s;z-index:5}
.cookie-tag strong{display:block;font-family:"Fraunces",serif;font-size:1.15rem;font-weight:600;color:var(--cocoa)}
.cookie-tag span{font-size:.78rem;color:var(--caramel);font-weight:600;letter-spacing:.02em}
/* the whiteout story — orchestrated by v3-motion.js via .has-focus / .is-tasting / .is-bg */
.hero-stage.has-focus .cookie-spot.is-bg .float-cookie{opacity:.1;filter:grayscale(.7) blur(2px) drop-shadow(0 30px 40px rgba(74,50,32,0))}
.hero-stage.has-focus .cookie-spot.is-tasting{z-index:6}
.hero-stage.has-focus .cookie-spot.is-tasting .cookie-tag{opacity:1;transform:translateX(-50%) translateY(0)}
.hero-stage.has-focus .hero-inner{opacity:.14;filter:blur(1px)}
.hero-inner{transition:opacity .45s ease, filter .45s ease}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .hero-cookies{min-height:340px;margin-top:1rem}
  .cs-1,.cs-2,.cs-3,.cs-4,.cs-5,.cs-6,.cs-7{width:24vw}
  .cookie-tag strong{font-size:.95rem}
  .cookie-tag span{font-size:.7rem}
  /* Phone: the city rides in the corner with the name, and the small copy
     comes out entirely — headline, buttons, cookies. Nothing to squint at. */
  .wordmark-city{display:block;font-style:normal;font-family:"Inter",sans-serif;
    font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
    color:var(--caramel);margin-top:.05rem}
  .wordmark{line-height:1.02;font-size:1.15rem;white-space:nowrap} /* never wrap to two lines */
  .topbar{gap:.75rem;padding:.7rem 1rem}
  .topbar .btn{--nk:8px;--nk-in:6px;padding:.6rem 1rem;font-size:.7rem}
  .hero .kicker,.hero .lede{display:none}
  /* the reclaimed space becomes stage: the wheel needs room to clear the type */
  .hero{min-height:76vh;padding-top:1.5rem;padding-bottom:1.5rem}
  .hero-cookies{min-height:0}
  .hero h1{font-size:clamp(2.3rem,9.5vw,3.2rem)}
  .cs-1,.cs-2,.cs-3,.cs-4,.cs-5,.cs-6,.cs-7{width:19vw}
  .hero-cta{gap:.6rem}
  .btn-lg{padding:.9rem 1.4rem;font-size:.78rem}
}

/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream);padding:.7rem 0;white-space:nowrap}
.ticker-track{display:inline-flex;gap:2.2rem;align-items:center;will-change:transform}
.ticker-track span{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--cocoa-soft)}
.ticker-track i{font-style:normal;color:var(--butter);font-size:.6rem}

/* sections */
.section{padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,3rem)}
.section-cream{background:var(--cream)}
.section-head{max-width:46rem;margin:0 auto 3rem;text-align:center}
.section-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:.9rem}
.section-sub{color:var(--cocoa-soft)}
.section-sub a{color:var(--caramel);font-weight:600}

/* hot five */
.hot-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;max-width:82rem;margin:0 auto}
@media(max-width:1100px){.hot-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;-webkit-overflow-scrolling:touch}
  .hot-card{flex:0 0 240px;scroll-snap-align:start}}
.hot-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease}
.hot-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.hot-rank{position:absolute;top:.8rem;left:.95rem;z-index:2;font-family:"Fraunces",serif;font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 2px 14px rgba(74,50,32,.6)}
.hot-photo{aspect-ratio:1/1.05;overflow:hidden}
.hot-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hot-card:hover .hot-photo img{transform:scale(1.06)}
/* Crumbl-style cutout cards */
.hot-cut .hot-photo{overflow:visible;display:flex;align-items:center;justify-content:center;background:radial-gradient(closest-side, var(--cream) 62%, transparent 63%) center/88% 88% no-repeat}
.hot-cut .hot-photo img{width:84%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(74,50,32,.28))}
.hot-cut:hover .hot-photo img{transform:scale(1.07) rotate(3deg)}
.hot-cut .hot-rank{color:var(--caramel);text-shadow:none}
.hot-body{padding:1.05rem 1.15rem 1.25rem}
.hot-body h3{font-size:1.12rem;margin-bottom:.25rem}
.hot-body p{font-size:.8rem;color:var(--cocoa-soft);margin-bottom:.55rem;line-height:1.45}
.hot-price{font-weight:700;color:var(--caramel);font-size:.95rem}

/* full menu */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.1rem;max-width:82rem;margin:0 auto}
.mcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mphoto{aspect-ratio:1/1;overflow:hidden}
.mphoto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mcard:hover .mphoto img{transform:scale(1.05)}
.mbody{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.mbody h3{font-size:1.08rem}
.mbody p{font-size:.8rem;color:var(--cocoa-soft);flex:1}
.mcard-text{background:var(--cream-deep);justify-content:center}
.mcard-text .mbody{padding:1.6rem 1.2rem}
.mcard-text h3{font-size:1.25rem}
/* chips — rubber-stamp outline, ink on paper (no fill) */
.chip{align-self:flex-start;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:.3rem .6rem;border-radius:2px;border:1.5px solid currentColor;background:transparent}
.chip-now{color:var(--matcha)}
.chip-rot{color:var(--caramel);opacity:.9}
.mcard-text .chip-now{background:transparent}

/* build a box */
.box-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;max-width:64rem;margin:0 auto}
@media(max-width:840px){.box-row{grid-template-columns:1fr}}
.box-card{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.8rem 1.9rem;text-align:center;box-shadow:var(--shadow-soft);transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease}
.box-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.box-cookie{width:110px;margin:0 auto 1rem;filter:drop-shadow(0 14px 18px rgba(74,50,32,.25));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.box-card:hover .box-cookie{transform:rotate(8deg) scale(1.08)}
.box-card h3{font-size:1.45rem;margin-bottom:.2rem}
.box-price{font-family:"Fraunces",serif;font-size:2rem;font-weight:700;color:var(--caramel);display:block;margin-bottom:.5rem}
.box-price em{font-style:normal;font-size:1.1rem;color:var(--cocoa-soft)}
.box-card p{font-size:.9rem;color:var(--cocoa-soft)}
.box-featured{border-color:var(--butter);background:linear-gradient(180deg,#fffdf7,var(--cream))}
/* box flag — date-stamp on butter, dashed like a punched ticket */
.box-tag{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--butter);color:var(--cocoa);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:.32rem .8rem;border-radius:2px;border:1.5px dashed rgba(74,50,32,.45)}
.box-cta{text-align:center;margin-top:2.6rem}
.micro{font-size:.8rem;color:var(--cocoa-soft);margin-top:.8rem}
.cater-strip{max-width:64rem;margin:2.8rem auto 0;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 2rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:space-between}
.cater-strip p{font-size:.95rem;color:var(--cocoa-soft)}
.cater-strip strong{color:var(--cocoa)}

/* find us */
.find-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:62rem;margin:0 auto}
@media(max-width:840px){.find-row{grid-template-columns:1fr}}
.find-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow-soft)}
.find-card h3{font-size:1.4rem;margin-bottom:.6rem}
.find-card p{color:var(--cocoa-soft);margin-bottom:1.3rem}
.find-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.find-fine{display:flex;flex-direction:column;gap:.8rem}
.find-fine details{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.05rem 1.3rem}
.find-fine summary{font-weight:700;cursor:pointer;font-size:.98rem}
.find-fine p{margin-top:.6rem;color:var(--cocoa-soft);font-size:.9rem}

/* footer — stays cream, per the color law */
.footer{background:var(--cream-deep);padding:2.4rem clamp(1rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.footer .micro{margin:0}
.footer-links{display:flex;gap:1.4rem}
.footer-links a{font-size:.9rem;color:var(--cocoa-soft);text-decoration:none}
.footer-links a:hover{color:var(--caramel)}

/* motion base states — v3-motion.js flips .is-in. Hidden state is scoped under
   html.motion-ready (set by an inline snippet only when JS runs), so a no-JS page
   stays fully visible. */
@media(prefers-reduced-motion:no-preference){
  .motion-ready [data-animate="rise"],.motion-ready [data-animate="card"]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
  .motion-ready [data-animate].is-in{opacity:1;transform:translateY(0)}
}