/* Waffle Mina v2 identity: own typography, round plate hero, pill UI and a typographic site menu.
   Loaded after motion.css / page.css and overrides their look without touching structure. */
:root{--font-display:'Bricolage Grotesque','DM Sans',sans-serif;--font-accent:'Fraunces',Georgia,serif;--berry:#d8345f}

/* Typography: heavy friendly grotesque in sentence case, soft italic accents. */
.motion-home h1,.motion-home h2,.motion-home h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em}
.motion-home em{font-family:var(--font-accent);font-style:italic;font-weight:500;letter-spacing:-.02em;font-variation-settings:'SOFT' 100,'WONK' 1;text-transform:none}
.waffle-intro h1{letter-spacing:-.05em}

/* Kickers become pill tags. */
.motion-home .kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1.5px solid currentColor;border-radius:999px;font-size:10px;letter-spacing:.1em}
.motion-home .kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.motion-home .contact-row .kicker{border:0;padding:0}
.motion-home .contact-row .kicker::before{display:none}

/* Pill buttons everywhere. */
.motion-home .btn,.compact-menu,.chip-link{border-radius:999px}
.header-tools .lang{border-radius:999px}
.header-tools .lang button{border-radius:999px}

/* Header menu button: a two-line pill instead of nine dots. */
.index-toggle{width:auto;height:38px;padding:0 15px;border-radius:999px;background:var(--paper);border-color:var(--ink)}
.nine-dots{grid-template-columns:18px;grid-auto-rows:2px;gap:5px}
.nine-dots i{border:0;background:currentColor;border-radius:2px}
.nine-dots i:nth-child(n+3){display:none}
.index-toggle:hover .nine-dots i:nth-child(odd){transform:translateX(3px)}
.motion-header.is-dark .index-toggle{background:var(--ink);color:var(--paper);border-color:var(--paper)}

/* Section dots replaced by a chocolate reading-progress bar. */
.section-rail{display:none}
@supports (animation-timeline:scroll()){
  .motion-home::after{content:'';position:fixed;inset:0 0 auto;height:4px;z-index:60;background:var(--ink);transform-origin:left;animation:read-progress linear both;animation-timeline:scroll(root)}
}
@keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hero: one round waffle plate that turns as you scroll, with a spinning badge. */
.hero-stage{--melt:0;position:relative;align-self:center;justify-self:center;width:min(88%,640px);aspect-ratio:1;margin-top:20px}
.hero-plate{position:absolute;inset:5%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 16px #d36a05,0 0 0 18px #27190f22,0 40px 80px #6b2e0055;transform:rotate(calc(var(--melt) * 28deg)) scale(calc(1 - var(--melt) * .05));animation:plate-in 1.1s var(--pour-ease) both}
.plate-photo{position:absolute;inset:0;background:url('../assets/img/hero-6.jpg') center/cover}
.plate-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 calc(12.5% - 4px),#3b1a0026 calc(12.5% - 4px) 12.5%),repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 4px),#3b1a0026 calc(12.5% - 4px) 12.5%);mix-blend-mode:multiply}
.hero-badge{position:absolute;left:-3%;bottom:2%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;z-index:2;animation:badge-in .9s var(--pour-ease) .35s both}
.hero-badge svg{position:absolute;inset:4%;width:92%;height:92%;animation:spin 24s linear infinite}
.hero-badge text{font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:0;fill:var(--ink)}
.hero-badge img{width:52%;height:auto;transform:rotate(-8deg)}
.hero-note{position:absolute;top:3%;right:-2%;z-index:2;padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:14px;font-size:11px;line-height:1.4;transform:rotate(6deg)}
.hero-next{position:absolute;right:2%;bottom:4%;z-index:2;width:92px;height:92px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-align:center;transition:transform .3s var(--pour-ease)}
.hero-next>span:last-child{font-size:22px;line-height:1}
.hero-next:hover{transform:translateY(5px)}
@keyframes plate-in{from{opacity:0;transform:rotate(-40deg) scale(.8)}to{opacity:1}}
@keyframes badge-in{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Signature: the plate is round too. */
.signature-main{border:0;border-radius:50%;transform:none;box-shadow:0 0 0 12px var(--orange),0 0 0 14px #27190f1f}
.signature-main:hover{transform:rotate(4deg)}
.signature-main .motion-photo{border-radius:50%}
.photo-corner{bottom:14%;right:14%}
.outline-star{color:var(--berry)}
.format-options img{border-radius:50%}

/* Sauce picker: round sauce swatches instead of drips. */
.sauce-selector{border-top:0;margin-top:45px}
.sauce-choice{height:auto;justify-content:flex-start;gap:12px;padding:6px 4px 10px}
.sauce-pour{position:relative;top:auto;width:58px;max-width:none;height:58px!important;border-radius:50%;border:2px solid #27190f26;transform:scale(1);transition:transform .5s var(--pour-ease),box-shadow .25s,opacity .35s;transition-delay:var(--delay)}
.motion-ready .sauce-selector:not(.is-poured) .sauce-pour{transform:scale(0)}
.sauce-choice:hover .sauce-pour{transform:scale(1.08);transition-delay:0s}
.sauce-choice[aria-pressed=true] .sauce-pour{transform:scale(1.12);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--ink);transition-delay:0s}

/* Recipe list: sentence-case names, round sauce-coloured numbers, rounded stage. */
.recipe-name{text-transform:none;letter-spacing:-.04em;font-size:clamp(24px,2.5vw,36px)}
.recipe-desc{font-family:var(--font-body);font-size:14px;letter-spacing:0;color:#6b5644}
.recipe-no{border-radius:50%;width:26px;height:26px}
.recipe-row.is-selected .recipe-no{background:var(--ink);color:var(--paper);transform:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--row-sauce,var(--orange))}
.stage-button{border:0;border-radius:28px}
.stage-hint,.stage-caption>span:first-child{border-radius:999px}
.detail-visual .motion-photo{border-radius:22px}
.recipe-dialog{border-radius:24px}
.detail-formats button{border-radius:999px}

/* Closing band: sprinkles instead of waffle pockets. */
.closing-waffle i{border-radius:50%;box-shadow:none;transform:scale(.55)}
.closing-waffle i:nth-child(4n+1){background:#6a3418}
.closing-waffle i:nth-child(4n+2){background:var(--paper)}
.closing-waffle i:nth-child(4n+3){background:var(--berry)}
.closing-waffle i:nth-child(4n){background:#9db54c}

/* Site menu: a dark typographic list instead of a tile grid. */
.site-index{background:var(--ink);color:var(--paper)}
.site-index::backdrop{background:var(--ink)}
.site-index .dialog-close{border-radius:50%;color:var(--ink)}
.site-index .index-grid{display:flex;flex-direction:column;width:min(760px,86vw);gap:0}
.site-index .index-grid a{flex-direction:row;align-items:center;justify-content:flex-start;gap:22px;padding:13px 4px;background:none;box-shadow:none;border-radius:0;border-bottom:1px solid #fff5e526;font-family:var(--font-display);font-weight:800;font-size:clamp(26px,4.6vw,50px);letter-spacing:-.035em}
.site-index .index-grid a:hover{background:none;color:var(--orange)}
.site-index .index-number{position:static;font-size:11px;color:var(--orange);letter-spacing:.08em;min-width:22px}
.site-index .index-arrow{position:static;margin-left:auto;font-size:24px}
.site-index .index-logo{border:0;padding:0 0 14px;justify-content:flex-start}
.site-index .index-logo img{width:64px;height:auto}

/* Subpage heroes use the same round plate. */
.page-lattice{display:block;position:relative;aspect-ratio:1;width:min(86%,560px);justify-self:center}
.page-lattice .waffle-pocket{display:none}
.page-photo{position:absolute;inset:5%;display:block;border-radius:50%;overflow:hidden;background-size:cover!important;background-position:center;box-shadow:0 0 0 14px #d36a05,0 0 0 16px #27190f22,0 30px 70px #6b2e0050;animation:plate-in 1.1s var(--pour-ease) both}
.page-photo>span{display:none}
.page-photo::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 calc(12.5% - 4px),#3b1a0026 calc(12.5% - 4px) 12.5%),repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 4px),#3b1a0026 calc(12.5% - 4px) 12.5%);mix-blend-mode:multiply}
.page-lattice .lattice-logo{position:absolute;left:-2%;bottom:0;width:30%;aspect-ratio:1;padding:0;border-radius:50%;background:var(--paper);border:2px solid var(--ink);z-index:2;display:grid;place-items:center}
.page-lattice .lattice-logo img{width:70%}
.page-lattice .lattice-note{position:absolute;top:4%;right:-2%;z-index:2;padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:14px;transform:rotate(6deg)}
.value-tile,.gallery-grid a{border-radius:24px}
.value-tile h3,.branch-row h2{text-transform:none}
.branch-tag,.story-photo{border-radius:999px}
.story-photo{border-radius:50%;border:0;box-shadow:0 0 0 12px var(--orange),0 0 0 14px #27190f1f}
.map-frame{border-radius:28px}

@media(max-width:760px){
  .hero-stage{order:-1;width:82%;margin:80px auto 6px}
  .hero-note{display:none}
  .hero-next{width:70px;height:70px;font-size:7px}
  .hero-next>span:first-child{display:none}
  .hero-badge{width:32%}
  .sauce-pour{width:40px;height:40px!important}
  .page-lattice{width:76%;aspect-ratio:1;margin:0 auto 8px}
  .page-lattice .lattice-note{display:none}
  .site-index .index-grid a{font-size:24px;padding:11px 2px}
}
@media(prefers-reduced-motion:reduce){
  .hero-plate{transform:none}
  .motion-ready .sauce-selector:not(.is-poured) .sauce-pour{transform:none}
}