/* Mareeg Cafe & Restaurant: demo site styles */
:root{
  --plate:   #FBF8F1;
  --maroon:  #8E1F2B;
  --black:   #1A1A1A;
  --sun:     #F4C430;
  --rim-red: #C8312C;
  --rim-blue:#1F4E9A;
  --sky:     #4189DD;
  --table:   #A8332E;
  --rice:    #D9B45A;
  --sauce:   #4E8A3A;
  --ink-2:   #45403A;
  --line:    #E4DCCB;
  --display: "Yeseva One", Georgia, "Times New Roman", serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --gutter: 16px;
  --zz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='20' height='10' fill='%23fff'/%3E%3Cpath d='M0 0L5 10L10 0z' fill='%23C8312C'/%3E%3Cpath d='M10 10L15 0L20 10z' fill='%231F4E9A'/%3E%3C/svg%3E");
  --zz-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='10' height='20' fill='%23fff'/%3E%3Cpath d='M0 0L10 5L0 10z' fill='%23C8312C'/%3E%3Cpath d='M10 10L0 15L10 20z' fill='%231F4E9A'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--plate);color:var(--black);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--rim-blue);text-underline-offset:3px}
a:hover{color:var(--maroon)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.3rem,7vw,4.1rem)}
h2{font-size:clamp(1.75rem,4.4vw,2.7rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--rim-blue);outline-offset:3px}
.on-dark :focus-visible,.site-footer :focus-visible,.band-black :focus-visible{outline-color:var(--rim-blue);box-shadow:0 0 0 6px var(--plate)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--black);color:var(--plate);padding:.6em 1em;font-weight:800}
.skip:focus{top:8px;color:var(--plate)}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
@media (min-width:768px){:root{--gutter:28px}}
@media (min-width:1200px){:root{--gutter:36px}}

.label{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;line-height:1.3;margin:0 0 .9em;display:inline-block}
.eyebrow{color:var(--maroon)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.25em;border:2px solid var(--black);border-radius:3px;font:800 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;background:var(--rim-red);color:var(--plate);transition:background-color .15s,color .15s}
.btn:hover{background:var(--maroon);color:var(--plate)}
.btn--ghost{background:var(--plate);color:var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--plate)}
.btn--sun{background:var(--sun);color:var(--black)}
.btn--sun:hover{background:var(--black);color:var(--sun)}
.btn--dark{background:var(--black);color:var(--sun)}
.btn--dark:hover{background:var(--maroon);color:var(--plate)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 .9em}
.arrow-link{font-weight:800;color:var(--rim-blue)}

/* Zigzag (motif 2) */
.zigzag{height:10px;background:var(--zz) repeat-x left center/20px 10px;border:0;margin:0}
.zigzag--v{width:10px;height:auto;background:var(--zz-v) repeat-y center top/10px 20px}

/* ---------- Header: the sign bands (motif 3) ---------- */
.site-header{background:var(--plate);position:relative;z-index:20}
.hd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:10px;padding-bottom:6px}
.wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:var(--maroon);line-height:1}
.wordmark:hover{color:var(--maroon)}
.wordmark .wm-script{font-family:var(--script);font-size:2.25rem;line-height:1;color:var(--maroon);padding-right:.1em}
.wordmark .wm-sub{font:800 .7rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--black);margin-top:2px}
.hd-call{min-height:44px;padding:.5em .9em;font-size:.95rem}
.main-nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav ul{display:flex;gap:4px 18px;white-space:nowrap}
.main-nav a{display:inline-block;padding:10px 0;font-weight:600;font-size:.98rem;color:var(--black);text-decoration:none;border-bottom:3px solid transparent}
.main-nav a:hover{border-bottom-color:var(--rim-red);color:var(--black)}
.main-nav a[aria-current="page"]{border-bottom-color:var(--maroon);font-weight:800}
.band{display:block}
.band-black{background:var(--black);color:var(--sun)}
.band-black .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.halal{font-weight:800;letter-spacing:.12em;font-size:.9rem;display:flex;gap:.6em;align-items:center}
.halal [lang="ar"]{letter-spacing:0;font-size:1.05rem;font-family:"Geeza Pro","Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif}
.band-sun{background:var(--sun);color:var(--black);font-weight:600;font-size:.9rem}
.band-sun .wrap{min-height:30px;display:flex;align-items:center}
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;font-weight:600;color:var(--plate);white-space:nowrap}
.chip-dot{width:10px;height:10px;border-radius:50%;background:#8A8A8A;flex:none}
.chip.is-open .chip-dot{background:var(--sky)}

@media (min-width:768px){
  .site-header{position:sticky;top:0}
  .hd-top{flex-wrap:nowrap;padding-top:12px;padding-bottom:10px}
  .main-nav{order:0;width:auto;margin-left:auto}
  .main-nav ul{gap:24px}
  .wordmark .wm-script{font-size:2.6rem}
  .band-sun{transition:clip-path .3s ease}
  /* Animation 2: the yellow band sits just under the sticky header and is clipped away after 40px */
  .site-header.is-settled + .band-sun{clip-path:inset(0 0 100% 0)}
}

/* Animation 1: sign bands slide */
@keyframes bandIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .js .band-black .wrap,.js .band-sun .wrap{animation:bandIn .45s cubic-bezier(.2,.7,.3,1) both}
  .js .band-black .wrap{animation-delay:.05s}
  .js .band-sun .wrap{animation-delay:.17s}
  /* Animation 5: open-now chip pulse once */
  .js .chip-dot{animation:dotPulse .9s ease-out .5s 1 both}
}
@keyframes dotPulse{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}

/* ---------- Platter rim (motif 1) ---------- */
.rim-wrap{position:relative;aspect-ratio:1/1;width:100%}
.rim-wrap>svg.rim{position:absolute;inset:0;width:100%;height:100%}
.rim-photo{position:absolute;inset:15%;width:70%;height:70%;border-radius:50%;object-fit:cover;background:var(--line)}
.rim-centre{position:absolute;inset:15%;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-direction:column;text-align:center}
.rim-centre .wm-script{font-family:var(--script);color:var(--maroon);font-size:clamp(1.6rem,7vw,2.4rem);line-height:1}
.rim-centre .wm-sub{font:800 .62rem/1.1 var(--body);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

/* Animation 14: rim petals fade in, staggered */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js [data-rim-anim="petals"] .petal{opacity:0;transition:opacity .35s ease;transition-delay:calc(var(--i) * 28ms)}
  .js [data-rim-anim="petals"].is-in .petal{opacity:1}
}

/* ---------- Sides line-up (motif 4) ---------- */
.sides{display:flex;gap:10px;align-items:center}
.side-ico{width:40px;height:40px;flex:none}
.sides--sm .side-ico{width:24px;height:24px}
.sides--sm{gap:6px}

/* ---------- Section rhythm ---------- */
.section{padding:56px 0}
@media (min-width:768px){.section{padding:84px 0}}
.lede{font-size:1.15rem;max-width:40em}

/* Animation 4: section reveal (desktop only) */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
  .js .reveal.is-in{opacity:1;transform:none}
}
/* Animation 3: zigzag stitch */
@media (prefers-reduced-motion:no-preference){
  .js .zigzag[data-stitch]{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.4,.1,.2,1)}
  .js .zigzag--v[data-stitch]{clip-path:inset(0 0 100% 0)}
  .js .zigzag[data-stitch].is-in{clip-path:inset(0 0 0 0)}
}

/* ---------- Home: hero ---------- */
.hero{padding:28px 0 48px}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero h1{margin-bottom:.35em}
.hero-line{font-size:1.12rem;max-width:34em}
.today-line{font-size:.95rem;color:var(--ink-2);margin:0}
.hero-plate{display:flex;flex-direction:column;align-items:center;gap:16px}
.hero-plate .rim-wrap{max-width:540px}
.hero-sides .side-ico{width:46px;height:46px}
@media (min-width:768px){
  .hero{padding:48px 0 72px}
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:40px}
  .hero-plate{flex-direction:row;align-items:center}
  .hero-sides{flex-direction:column;gap:14px}
}
@media (min-width:1200px){.hero-sides .side-ico{width:54px;height:54px}}

/* Animation 6: rim spin-in, then plate scales */
@keyframes rimSpin{from{transform:rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes plateIn{from{transform:scale(.92)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .hero .rim{animation:rimSpin .8s cubic-bezier(.2,.7,.3,1) .15s both}
  .js .hero .rim-photo{animation:plateIn .55s cubic-bezier(.2,.7,.3,1) .75s both}
  /* Animation 7: sides line up */
  .js .hero-sides .side-ico{animation:sideUp .4s ease both;animation-delay:calc(1.05s + var(--i) * 100ms)}
}
@keyframes sideUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
/* Animation 9: banana nudge (desktop hover only) */
@media (min-width:768px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .banana-ico>svg{transition:transform .25s ease;transform-origin:50% 60%}
  .banana-ico:hover>svg{transform:rotate(12deg)}
}
.banana-ico{display:inline-flex}

/* ---------- Home: half and half ---------- */
.hh-grid{display:grid;gap:28px;align-items:center}
.split{position:relative;aspect-ratio:4/3;width:100%}
.split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .half-a{clip-path:polygon(0 0,62% 0,38% 100%,0 100%)}
.split .half-b{clip-path:polygon(62% 0,100% 0,100% 100%,38% 100%)}
.split::after{content:"";position:absolute;inset:-8px;border:3px solid var(--black);pointer-events:none}
@media (min-width:768px){
  .hh-grid{grid-template-columns:1.2fr 1fr;gap:56px}
}
/* Animation 8: halves part and meet (desktop) */
@keyframes partA{0%,100%{transform:none}50%{transform:translateX(-6px)}}
@keyframes partB{0%,100%{transform:none}50%{transform:translateX(6px)}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .split.is-in .half-a{animation:partA .9s ease-in-out .2s 1}
  .js .split.is-in .half-b{animation:partB .9s ease-in-out .2s 1}
}

/* ---------- Home: regulars ---------- */
.regulars{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;margin:28px 0 32px}
.regulars li{text-align:center}
.regulars .rim-wrap{max-width:260px;margin:0 auto 10px}
.regulars h3{font-size:1.25rem;margin:0}
@media (min-width:768px){.regulars{grid-template-columns:repeat(4,1fr);gap:32px}}

/* ---------- Home: big plates on the table ---------- */
.table-band{background:var(--table);color:var(--plate)}
.table-band a{color:var(--plate)}
.bp-grid{display:grid;gap:28px;align-items:center}
.bp-label{font-family:var(--display);font-size:clamp(2.4rem,8vw,4.4rem);line-height:1;margin:0 0 .35em;display:inline-block;transform-origin:left center}
.bp-text{font-size:1.15rem;max-width:30em}
.bp-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border:6px solid var(--plate)}
.bp-photos picture:last-child{margin-top:36px}
@media (min-width:768px){.bp-grid{grid-template-columns:1fr 1.1fr;gap:56px}}
@keyframes portion{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .bp-label.is-in{animation:portion .6s cubic-bezier(.3,.7,.4,1) 1}
}

/* ---------- Home: reviews ---------- */
.quotes{display:grid;gap:22px;margin-top:24px}
.quote{margin:0;padding:6px 0 6px 20px;border-left:6px solid var(--rim-red)}
.quote:nth-child(2){border-left-color:var(--rim-blue)}
.quote blockquote{margin:0 0 .5em;font-family:var(--display);font-size:1.3rem;line-height:1.35}
.quote figcaption{font-weight:600;font-size:.95rem;color:var(--ink-2)}
@media (min-width:768px){
  .quotes{grid-template-columns:1.2fr 1fr 1fr;gap:36px}
}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .quotes .quote{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * 140ms)}
  .js .quotes.is-in .quote{opacity:1;transform:none}
}

/* ---------- Home: the room ---------- */
.room-grid{display:grid;gap:28px;align-items:center}
.room-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border:3px solid var(--black)}
.room-quote{margin:1.2em 0 0;padding-left:18px;border-left:6px solid var(--sun)}
.room-quote blockquote{margin:0 0 .3em;font-family:var(--display);font-size:1.4rem;line-height:1.3}
.room-quote figcaption{font-weight:600;font-size:.95rem;color:var(--ink-2)}
@media (min-width:768px){.room-grid{grid-template-columns:.9fr 1.1fr;gap:56px}.room-grid img{max-height:620px}}

/* ---------- Visit strip ---------- */
.visit-strip{padding:36px 0 44px}
.vs-list{display:grid;gap:14px 28px;font-weight:600}
.vs-list li{display:flex;flex-direction:column}
.vs-list .label{margin:0 0 .2em;color:var(--maroon)}
@media (min-width:768px){.vs-list{grid-template-columns:repeat(5,auto);justify-content:space-between}}

/* ---------- Page heads ---------- */
.page-head{padding-top:36px;padding-bottom:20px}
.page-head .lede{margin-bottom:0}
@media (min-width:768px){.page-head{padding-top:56px;padding-bottom:28px}}

/* ---------- Menu ---------- */
.menu-layout{display:grid;grid-template-columns:10px 1fr;gap:18px;padding-bottom:56px}
.menu-layout>.zigzag--v{grid-row:1/span 1}
@media (min-width:768px){.menu-layout{gap:40px}}
.switch{display:inline-flex;flex-wrap:wrap;border:2px solid var(--black);border-radius:3px;margin:8px 0 28px;background:var(--plate)}
.switch button{font:600 .95rem/1.25 var(--body);border:0;background:transparent;color:var(--black);padding:.8em 1em;min-height:48px;cursor:pointer;text-align:left}
.switch button strong{font-weight:800}
.switch button[aria-selected="true"]{background:var(--black);color:var(--sun)}
.meal[hidden]{display:none}
@keyframes slideFromRight{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideFromLeft{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .meal.from-right{animation:slideFromRight .25s ease-out both}
  .meal.from-left{animation:slideFromLeft .25s ease-out both}
}
.meal-intro{font-size:1.1rem;max-width:36em;margin-bottom:1.4em}
.dishes{border-top:2px solid var(--black)}
.dish{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.dish h3{margin:0;font-size:1.3rem}
.dish p{margin:0;grid-column:1;color:var(--ink-2);font-size:1rem}
.dish .sides{grid-column:2;grid-row:1/span 2}
.rail-wrap{position:relative;margin:0 0 24px;border-bottom:2px solid var(--line)}
.rail{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:none;font:800 .85rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;border:0;background:transparent;color:var(--black);padding:14px 12px;min-height:48px;cursor:pointer;white-space:nowrap}
.rail button[aria-selected="true"]{color:var(--maroon)}
.rail-bar{position:absolute;left:0;bottom:-2px;height:4px;width:100px;background:var(--rim-red);transform-origin:0 0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.rail-bar.ready{transition:transform .3s cubic-bezier(.3,.7,.3,1)}}
.cat-head{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin-bottom:12px}
.cat-head h3{font-size:clamp(1.6rem,4vw,2.2rem);margin:0}
@media (min-width:768px){.cat-head{grid-template-columns:170px 1fr;gap:28px}}
.cat[hidden]{display:none}
.with-every{margin-top:40px}
.with-every .zigzag{margin-bottom:22px}
.with-every p{max-width:38em}
.with-every .big{font-family:var(--display);font-size:1.45rem;line-height:1.3}

/* ---------- Build your plate ---------- */
.builder{display:grid;gap:28px;padding-bottom:40px}
.plate-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.plate-row{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.plate-svg{width:100%;max-width:440px;flex:1 1 auto}
.plate-extras{display:flex;flex-direction:column;gap:12px;width:48px;flex:none}
.plate-extras .side-ico{width:48px;height:48px;opacity:0;transform:translateX(-12px)}
.plate-extras .side-ico.on{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){.plate-extras .side-ico{transition:opacity .3s ease,transform .3s ease}}
.side-fill{opacity:0}
.side-fill.on{opacity:1}
@media (prefers-reduced-motion:no-preference){.side-fill{transition:opacity .35s ease}}
@keyframes meatDrop{0%{transform:translateY(-16px);opacity:0}60%{transform:translateY(2px);opacity:1}80%{transform:translateY(-2px)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){.meat-g.drop{animation:meatDrop .45s cubic-bezier(.3,.7,.4,1) both}}
.summary{font-family:var(--display);font-size:1.35rem;text-align:center;min-height:2.6em;margin:0;max-width:22em}
@keyframes tick{from{opacity:0}to{opacity:1}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){.summary.tick{animation:tick .3s ease both}}
.steps fieldset{border:0;padding:0;margin:0 0 26px}
.steps legend{padding:0;margin-bottom:12px;font-family:var(--display);font-size:1.45rem}
.steps legend .step-n{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--black);color:var(--sun);font:800 .9rem/1 var(--body);margin-right:.5em;vertical-align:.2em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:600 .95rem/1.2 var(--body);padding:.65em 1em;min-height:44px;border:2px solid var(--black);border-radius:999px;background:var(--plate);color:var(--black);cursor:pointer}
.chips button:hover{background:#F3EBDB}
.chips button[aria-pressed="true"]{background:var(--rim-blue);border-color:var(--rim-blue);color:#fff;font-weight:800}
.order-box{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.order-box p{margin:0}
@media (min-width:900px){
  .builder{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .plate-stage{position:sticky;top:124px}
}
.platter-photo{margin:0 0 64px}
.platter-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--black)}
.platter-photo figcaption{font-family:var(--display);font-size:1.3rem;margin-top:12px}

/* ---------- Visit ---------- */
.visit-grid{display:grid;gap:40px;padding-bottom:56px}
@media (min-width:900px){.visit-grid{grid-template-columns:1fr 1.15fr;gap:56px}}
.addr{font-size:1.2rem;font-weight:600;margin-bottom:.4em}
.hours{width:100%;border-collapse:collapse;margin:24px 0}
.hours caption{text-align:left;font-family:var(--display);font-size:1.5rem;margin-bottom:8px}
.hours th,.hours td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:400}
.hours th{font-weight:600}
.hours tr{position:relative}
.hours td,.hours th{position:relative;z-index:1}
.hours tr.today th,.hours tr.today td{font-weight:800;background:linear-gradient(var(--sun),var(--sun)) no-repeat left/100% 100%}
@media (prefers-reduced-motion:no-preference){
  .js .hours tr.today th,.js .hours tr.today td{background:none}
  .js .hours tr.today th::before,.js .hours tr.today td::before{content:"";position:absolute;inset:0;background:var(--sun);z-index:-1;transform:scaleX(0);transform-origin:left;animation:sweep .6s cubic-bezier(.3,.7,.3,1) .3s forwards}
  .js .hours tr.today td::before{animation-delay:.45s}
}
@keyframes sweep{to{transform:scaleX(1)}}
.facts li{padding:8px 0 8px 22px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:10px;background:var(--rim-red);transform:rotate(45deg)}
.facts li:nth-child(even)::before{background:var(--rim-blue)}
.map-fig{margin:0}
.map-svg{width:100%;height:auto;border:3px solid var(--black);background:#F1EADB}
.park{display:flex;align-items:center;gap:10px;margin:12px 0 28px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.park-arrow{width:44px;height:20px}
@keyframes nudge{0%,50%,100%{transform:none}25%,75%{transform:translateX(8px)}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){.park.is-in .park-arrow{animation:nudge 1.4s ease-in-out .3s 1}}
.pin{transform-box:fill-box;transform-origin:50% 100%}
@keyframes pinDrop{0%{transform:translateY(-12px);opacity:0}60%{transform:translateY(1px);opacity:1}80%{transform:translateY(-2px)}100%{transform:none;opacity:1}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .map-fig .pin{opacity:0}
  .js .map-fig.is-in .pin{animation:pinDrop .55s cubic-bezier(.3,.7,.4,1) .2s both}
}
.storefront{margin:0}
.storefront img{width:100%;max-width:520px;border:3px solid var(--black)}
.storefront figcaption{margin-top:10px;font-weight:600}
.sun-band{background:var(--sun);color:var(--black)}
.sun-band a{color:var(--black)}
.cater-grid{display:grid;gap:36px}
@media (min-width:900px){.cater-grid{grid-template-columns:1fr 1.1fr;gap:64px}}
.form-row{display:flex;flex-direction:column;margin-bottom:14px}
.form-row label{font-weight:800;font-size:.9rem;margin-bottom:4px}
.form-row input,.form-row textarea,.updates input{font:400 1rem/1.4 var(--body);padding:.7em .8em;border:2px solid var(--black);border-radius:3px;background:#fff;color:var(--black);min-height:48px;width:100%}
.form-row textarea{min-height:120px;resize:vertical}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:var(--plate);padding-bottom:28px}
.site-footer a{color:var(--plate)}
.site-footer a:hover{color:var(--sun)}
.ft-grid{display:grid;gap:28px;padding-top:40px;padding-bottom:28px}
@media (min-width:768px){.ft-grid{grid-template-columns:1fr 1.3fr 1fr;gap:40px}}
.site-footer .wordmark .wm-script{color:var(--sun)}
.site-footer .wordmark .wm-sub{color:var(--plate)}
.ft-lines p{margin:0 0 .45em}
.updates label{display:block;font-weight:800;margin-bottom:6px}
.updates .row{display:flex;gap:8px;flex-wrap:wrap}
.updates input{flex:1 1 180px;width:auto}
.credit{border-top:1px solid #3A3A3A;padding-top:18px;font-size:.9rem;margin:0}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(26,26,26,.6)}
.modal[hidden]{display:none}
.modal-box{background:var(--plate);max-width:460px;width:100%;padding:28px 24px 24px;border:3px solid var(--black);position:relative}
.modal-box::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--zz) repeat-x left center/20px 10px}
.modal-box h2{font-size:1.9rem;margin-top:8px}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.modal:not([hidden]) .modal-box{animation:modalIn .25s ease both}}

/* Reduced motion: final state everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Additions ---------- */
picture{display:block}
.dish .dish-name{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2;margin:0}
.plate-inner{position:absolute;inset:0;width:100%;height:100%}
.cat-head .rim-centre .wm-script{font-size:1.3rem}
@media (min-width:768px){.cat-head .rim-centre .wm-script{font-size:1.75rem}}
.rail-bar{bottom:0}
main{overflow-x:clip}