/* Brand templates (owner 2026-11-14, after the Habt preview): the shop first, the menu second. A framed hero with
   the shop's own photo and a logo badge, a marquee of its own words, its story, a compact taste of the menu,
   a visit card, and a fixed map/Instagram dock on phones. Colours come from motion.js (BRAND block only). */
html,body{background:var(--day)}
body{font-size:1.0625rem;line-height:1.75}
.wrap{width:min(1180px,100% - 2 * var(--m));margin-inline:auto}
:root{--hero-bg:var(--field);--hero-ink:var(--field-ink);--hero-mute:color-mix(in srgb,var(--field-ink) 80%,transparent);--mark-bg:var(--t2);--mark-ink:var(--text);--strip-bg:var(--t2);--strip-ink:var(--text);--frame-r:999px 999px 1.75rem 1.75rem;--ease:cubic-bezier(.16,1,.3,1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header: sticky, logo + name, three links, round contact icons */
.top-h{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--day) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-h .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.top-h .plate img{--logo-h:3rem}
.top-h ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0;font-size:.9375rem;font-weight:500}
.top-h ul a{text-decoration:none}.top-h ul a:hover{color:var(--lit)}
.top-h .icons a{width:2.5rem;height:2.5rem;background:transparent;border:1px solid var(--line)}

/* hero */
.bhero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink)}
.bhero::before{content:"";position:absolute;width:40rem;height:40rem;border-radius:50%;inset-inline-end:-12rem;top:-10rem;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 65%);pointer-events:none}
.bhero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;min-height:min(86svh,50rem);padding-block:3.5rem}
.kicker{display:inline-flex;gap:.6em;align-items:center;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:99px;padding:.6rem 1.15rem;font-size:.8125rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-mute)}
.kicker [translate]{letter-spacing:.3em}
.bhero h1{font-family:var(--display),sans-serif;font-weight:var(--h1w,700);font-size:clamp(3rem,6.6vw,6.5rem);line-height:1.12;margin:1.5rem 0 1.1rem;text-wrap:balance}
mark{background:var(--mark-bg);color:var(--mark-ink);padding:0 .14em;border-radius:.4rem;display:inline-block;rotate:-1.5deg;line-height:1.15}
.bhero .lead{font-family:var(--sans),sans-serif;font-weight:400;line-height:1.75;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);max-width:34ch;color:var(--hero-mute);margin:0 0 2rem;text-wrap:pretty}
.bhero .ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.bhero .btn{background:var(--hero-ink);color:var(--hero-bg);box-shadow:none}
.bhero .btn.line{background:transparent;color:var(--hero-ink);border:1px solid color-mix(in srgb,currentColor 50%,transparent)}
.bhero .status{display:flex;align-items:center;gap:.55rem;margin:1.25rem 0 0;font-size:.9375rem;color:var(--hero-mute)}
.bhero .status i{width:.55rem;height:.55rem;border-radius:50%;background:#3fbf6a;flex:none}.bhero .status.closed i{background:#d9573b}
.art{position:relative;justify-self:center;width:min(100%,29rem)}
.frame{border-radius:var(--frame-r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:var(--t1)}
.frame .tile{width:100%;height:100%;border-radius:0;aspect-ratio:auto;background:var(--t1)}
.frame .tile img,.frame .tile.full img{object-fit:cover;mix-blend-mode:normal;filter:none}
.badge{position:absolute;bottom:2rem;inset-inline-start:-1.75rem;display:flex;align-items:center;gap:.75rem;background:var(--day);color:var(--text);border-radius:1.1rem;padding:.8rem 1.1rem .8rem 1.25rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);font-weight:600;font-size:.9375rem;max-width:18rem}
.badge .lg{width:2.9rem;height:2.9rem;border-radius:.65rem;display:grid;place-items:center;background:var(--sign,var(--t1));overflow:hidden;flex:none}
.badge .lg img{width:86%;height:86%;object-fit:contain}
.badge small{display:block;font-weight:400;font-size:.8125rem;color:var(--muted)}
.m-on .bhero .copy>*{animation:m-rise 1s var(--ease) both}
.m-on .bhero .copy>:nth-child(2){animation-delay:.1s}.m-on .bhero .copy>:nth-child(3){animation-delay:.2s}.m-on .bhero .copy>:nth-child(4){animation-delay:.3s}.m-on .bhero .copy>:nth-child(5){animation-delay:.4s}
.m-on .art .frame{animation:m-settle 1.6s var(--ease) .1s both}.m-on .badge{animation:m-rise 1s var(--ease) .7s both}

/* the strip of the shop's own words */
.strip{background:var(--strip-bg);color:var(--strip-ink);overflow:hidden;white-space:nowrap;border-block:1px solid var(--line)}
.strip .track{display:inline-flex;gap:2.4rem;padding:.9rem 0;animation:roll 32s linear infinite}
.strip span{font-family:var(--display),sans-serif;font-weight:700;font-size:1.375rem;line-height:1.3}
.strip span:nth-child(even){font-family:var(--sans),sans-serif;font-weight:600;font-size:1rem;letter-spacing:.24em}

/* story */
.bstory{display:grid;grid-template-columns:1fr 1.1fr;gap:4.5rem;align-items:center;padding-block:clamp(4.5rem,9vw,7rem)}
.logo-card{display:grid;place-items:center;aspect-ratio:1/1.02;border-radius:1.75rem;background:var(--sign,var(--t1));border:1px solid var(--line);overflow:hidden}
.logo-card img{width:62%;height:62%;object-fit:contain}
.eyebrow{display:flex;align-items:center;gap:.65rem;font-size:.875rem;font-weight:600;color:var(--lit);letter-spacing:.04em;margin:0}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:currentColor;border-radius:0}
.b2{font-family:var(--display),sans-serif;font-weight:var(--h2w,700);font-size:clamp(2.25rem,1.4rem + 3.2vw,4rem);line-height:1.18;margin:1rem 0 1.25rem}
.b2 mark{--mark-bg:var(--t2)}
.bstory p{color:var(--muted);max-width:46ch;margin:0 0 .9rem;font-size:1.125rem}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;padding:0;list-style:none}
.pills li{border:1px solid var(--line);border-radius:99px;padding:.45rem 1.1rem;font-size:.9375rem;background:color-mix(in srgb,var(--t1) 50%,transparent)}
.pills a{text-decoration:none}

/* a taste of the menu: two photographed dishes, then the sections as chips; the full menu is one tap away */
.taste{background:var(--hero-bg);color:var(--hero-ink);padding-block:clamp(4.5rem,9vw,7rem)}
.taste .eyebrow{color:var(--hero-mute)}
.taste .head{display:flex;justify-content:space-between;align-items:end;gap:1.25rem;flex-wrap:wrap;margin-bottom:2.75rem}
.taste .head .b2{margin-bottom:0}
.taste .btn{background:var(--hero-ink);color:var(--hero-bg);box-shadow:none}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.pair a{display:block;border-radius:1.6rem;overflow:hidden;background:color-mix(in srgb,var(--hero-ink) 8%,transparent);text-decoration:none;color:inherit}
.pair .tile{width:100%;aspect-ratio:5/4;border-radius:0;background:var(--t1)}
.pair .tile img{transition:transform .6s}.pair a:hover .tile img{transform:scale(calc(var(--z,1) * 1.03))}
.pair .cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem 1.4rem}
.pair h3{font-family:var(--display),sans-serif;font-weight:var(--h2w,700);font-size:1.6rem;line-height:1.3;margin:0}
.pair small{display:block;color:var(--hero-mute);font-size:.9375rem}
.pair .tag{border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:99px;padding:.45rem .9rem;font-size:.9375rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;padding:1.25rem 1.5rem;border:1px dashed color-mix(in srgb,currentColor 35%,transparent);border-radius:1.25rem;list-style:none}
.chips a{display:inline-flex;align-items:center;min-height:2.6rem;padding:0 1.1rem;border-radius:99px;background:color-mix(in srgb,var(--hero-ink) 10%,transparent);text-decoration:none;font-size:.9375rem;font-weight:500}
.chips a:hover{background:color-mix(in srgb,var(--hero-ink) 18%,transparent)}
.taste .menu-description{color:var(--hero-mute);margin:1rem 0 0;max-width:50ch}

/* order */
.border{padding-block:clamp(4.5rem,9vw,6.5rem);display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.border>div>p{color:var(--muted);margin:0 0 1.75rem;max-width:42ch}
.border article{background:var(--t1);border:1px solid var(--line);border-radius:1.6rem;padding:2.25rem}
.border h3{font-family:var(--display),sans-serif;font-size:1.75rem;margin:0}.border article p{color:var(--muted);margin:.5rem 0 1.5rem}
.order-app,.app{background:#fff;color:#141414;border:1px solid var(--line)}

.extras{padding-top:0}

/* visit */
.bvisit{padding-block:0 clamp(4.5rem,9vw,7rem)}
.vbox{display:grid;grid-template-columns:1.1fr 1fr;border-radius:2rem;overflow:hidden;background:var(--t1);border:1px solid var(--line)}
.vtxt{padding:clamp(1.75rem,4vw,3.5rem)}
.addr{font-size:1.25rem;font-weight:600;margin:.4rem 0 .25rem}
.addr a{text-decoration:none}
.vtxt .btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.vtxt .today-line{margin-top:1.25rem;background:var(--day)}
.vtxt .week-hours{margin-top:.5rem}
.vart{display:grid;place-items:center;text-align:center;padding:2.5rem;background:var(--hero-bg);color:var(--hero-ink)}
.vart .ar{font-family:var(--display),sans-serif;font-weight:var(--h1w,700);font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.2}
.vart .en{font-family:var(--sans),sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.75rem);letter-spacing:.3em;line-height:1.3;margin-top:.4rem;text-transform:uppercase}
.vart .city{margin-top:1rem;font-size:.9375rem;letter-spacing:.06em;color:var(--hero-mute)}

.bfoot{border-top:1px solid var(--line);padding:2rem 0 2.5rem}
.bfoot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.875rem;color:var(--muted)}
.bfoot .icons a{width:2.5rem;height:2.5rem;background:transparent;border:1px solid var(--line)}

.dock{display:none}

@media(max-width:860px){
  .top-h ul{display:none}
  .bhero .wrap{grid-template-columns:1fr;gap:2rem;padding-block:1.5rem 3rem;min-height:0;text-align:center}
  .bhero .lead{margin-bottom:1.5rem}
  .bhero .lead{margin-inline:auto}
  .bhero .ctas,.bhero .status{justify-content:center}
  .art{width:min(74%,19rem)}
  .badge{inset-inline-start:-.9rem;bottom:1.25rem}
  .bhero h1{font-size:clamp(2.4rem,11vw,3.4rem);margin-top:1.1rem}
  .kicker{font-size:.75rem;letter-spacing:.1em;padding:.5rem .9rem}
  .bhero .ctas .btn{flex:1 1 0}
  .bstory{grid-template-columns:1fr;gap:2.25rem}
  /* phones: the logo is already in the header and the badge; here it shrinks to a small seal */
  .logo-card{width:6.5rem;aspect-ratio:1;border-radius:1.25rem;margin:0}
  .logo-card img{width:78%;height:78%}
  .bstory{gap:1.5rem;padding-block:3.5rem}
  /* phones: the two dishes side by side in a swipe row, so the menu taste stays one screen */
  .pair{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--m));padding-inline:var(--m);scrollbar-width:none}
  .pair::-webkit-scrollbar{display:none}
  .pair a{flex:0 0 78%;scroll-snap-align:center}
  .pair .cap{padding:.9rem 1.1rem 1rem}.pair h3{font-size:1.25rem}
  .taste{padding-block:3.5rem}.taste .head{margin-bottom:1.75rem}.chips{margin-top:1.25rem;padding:1rem}
  .border{padding-block:3.5rem;gap:1.75rem}
  .border{grid-template-columns:1fr}
  .vbox{grid-template-columns:1fr}.vart{order:-1;padding:2.75rem 1.25rem}
  .dock{display:flex;position:fixed;inset-inline:.75rem;bottom:.75rem;z-index:40;gap:.5rem;padding:.5rem;border-radius:99px;background:color-mix(in srgb,var(--hero-bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
  .dock a{flex:1;min-height:2.9rem;border-radius:99px;display:grid;place-items:center;font-weight:600;font-size:.9375rem;color:var(--hero-ink);text-decoration:none}
  .dock a:first-child{background:var(--hero-ink);color:var(--hero-bg)}
  body:has(.mobile-order:not([hidden])) .dock{display:none}
  .bfoot{padding-bottom:6rem}
}

/* ===== per kind: same story, five characters ===== */
/* café (Habt): roast-dark hero in the brand, an arch frame, the strip in the accent */
[data-kind=cafe]{--frame-r:999px 999px 1.75rem 1.75rem}
/* restaurant: a classic dining frame, rectangle with a double rule, calm serif-like kufi */
[data-kind=restaurant]{--frame-r:.5rem}
[data-kind=restaurant] .frame{outline:1px solid color-mix(in srgb,currentColor 30%,transparent);outline-offset:.75rem;aspect-ratio:4/5}
[data-kind=restaurant] mark{rotate:0deg;background:transparent;color:inherit;border-bottom:.12em solid var(--accent);border-radius:0;padding:0}
/* bakery: daylight, the hero on a warm tint, the arch frame like an oven door */
[data-kind=bakery]{--hero-bg:var(--t3);--hero-ink:var(--text);--hero-mute:var(--muted);--mark-bg:var(--field);--mark-ink:var(--field-ink)}
[data-kind=bakery] .bhero .btn:not(.line){background:var(--field);color:var(--field-ink)}
[data-kind=bakery] .taste{--hero-bg:var(--field);--hero-ink:var(--field-ink);--hero-mute:color-mix(in srgb,var(--field-ink) 80%,transparent)}
/* sweets: blush paper, a soft round frame, sprinkles of the accent */
[data-kind=sweets]{--hero-bg:var(--t2);--hero-ink:var(--text);--hero-mute:var(--muted);--mark-bg:var(--field);--mark-ink:var(--field-ink);--frame-r:46% 54% 50% 50% / 52% 48% 52% 48%}
[data-kind=sweets] .frame{aspect-ratio:1}
[data-kind=sweets] .bhero .btn:not(.line){background:var(--field);color:var(--field-ink)}
[data-kind=sweets] .taste{--hero-bg:var(--field);--hero-ink:var(--field-ink);--hero-mute:color-mix(in srgb,var(--field-ink) 80%,transparent)}
[data-kind=sweets] .bhero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--field) 30%,transparent) 2px,transparent 2.5px);background-size:46px 46px;opacity:.6}
/* fast food: the brand at full volume, a tilted square frame with a hard shadow */
[data-kind=fastfood]{--frame-r:1.5rem;--mark-bg:var(--hero-ink);--mark-ink:var(--hero-bg)}
[data-kind=fastfood] .frame{aspect-ratio:1;rotate:2.5deg;box-shadow:14px 14px 0 rgba(0,0,0,.55)}
[data-kind=fastfood] .bhero h1{line-height:1.2}
[data-kind=fastfood] .strip{--strip-bg:var(--hero-ink);--strip-ink:var(--hero-bg);rotate:-1deg;margin:.5rem 0 0;position:relative;z-index:2}
[data-kind=cafe],[data-kind=fastfood]{--h1w:400;--h2w:400}

/* ===== owner 2026-11-14 (2): short page, phone first. One about line, three small dishes, the apps in a row ===== */
.about{display:flex;align-items:center;gap:1.25rem;padding-block:2.75rem;border-bottom:1px solid var(--line)}
.seal{flex:none;display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:1.1rem;background:var(--sign,var(--t1));border:1px solid var(--line);overflow:hidden}
.seal img{width:78%;height:78%;object-fit:contain}
.about p{margin:0;font-size:1.0625rem;color:var(--muted);max-width:60ch}.about p b{color:var(--text)}
.about .pills{margin-top:.6rem}.about .pills:empty{display:none}
.taste{background:none;color:inherit;padding-block:2.5rem 1rem}
.taste .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.taste h2{font-family:var(--display),sans-serif;font-weight:var(--h2w,700);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);margin:0}
.more{font-weight:600;color:var(--lit);text-decoration:none;white-space:nowrap;min-height:2.75rem;display:inline-flex;align-items:center}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.minis a{display:grid;gap:.25rem;text-decoration:none;color:inherit}
.minis .tile{width:100%;aspect-ratio:1;border-radius:1.1rem;margin-bottom:.35rem}
.minis b{font-size:.9375rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.minis small{color:var(--lit);font-weight:600;font-variant-numeric:tabular-nums}
.border{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;padding-block:1.5rem 2.5rem}
.border h2{font-family:var(--display),sans-serif;font-weight:var(--h2w,700);font-size:1.375rem;margin:0}
.border .apps{gap:.6rem}
.bvisit{padding-block:1rem 3rem}
.vbox .b2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.6rem);margin:.6rem 0 .75rem}
#room{display:none}
@media(max-width:860px){
  .about{padding-block:2rem;gap:1rem}.seal{width:3.75rem;height:3.75rem}
  .about p{font-size:1rem;line-height:1.7}
  .minis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--m));padding-inline:var(--m);scrollbar-width:none}
  .minis::-webkit-scrollbar{display:none}
  .minis a{flex:0 0 38%;scroll-snap-align:start}
  .taste{padding-block:2rem .5rem}
  .border{padding-block:1.25rem 2rem}
  .vart{display:none}
  .vtxt{padding:1.6rem 1.4rem}
  .vtxt .btns{display:none}
  .bvisit{padding-bottom:1.5rem}
  .bfoot{padding:1.25rem 0 5.5rem}
  .bfoot .icons{display:none}
  .extras{padding-top:1rem}
}

/* ===== owner 2026-11-14 (3), GPT review: distinct compositions, quiet dock, the place, swipe cue, type fixes ===== */
.quote{font-family:var(--display),sans-serif;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.5;color:var(--text);margin:0 0 .35rem}
.about{flex-wrap:wrap}
.place{flex:1 0 100%;margin:0;order:3}.place img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:1.25rem}
#room.place{display:block}
:root[data-nlen=m] .bhero h1{font-size:clamp(2.6rem,5.4vw,5.25rem)}
:root[data-nlen=l] .bhero h1{font-size:clamp(2.2rem,4.4vw,4.25rem)}
:root[data-nlen=l] .bhero mark{white-space:normal}
.bhero mark{white-space:nowrap}
#hours td{padding-block:.6rem;vertical-align:top}#hours td:last-child{line-height:1.6;font-variant-numeric:tabular-nums}
.today-line b{text-align:end;line-height:1.5}
@media(max-width:860px){
  :root[data-nlen=m] .bhero h1{font-size:clamp(2.2rem,9.5vw,3rem)}
  :root[data-nlen=l] .bhero h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .bhero mark{white-space:normal}
  /* the dock waits until the hero's buttons are gone, so it never covers the hero */
  .dock.wait{translate:0 140%;transition:translate .35s cubic-bezier(.16,1,.3,1)}
  .dock.wait.on{translate:0 0}
  /* swipe cue: two whole dishes and a clear slice of the third, the row fades at its far edge */
  .minis{padding-inline:var(--m) 0;-webkit-mask:linear-gradient(to left,#000 82%,transparent);mask:linear-gradient(to left,#000 82%,transparent)}
  .minis a{flex:0 0 calc((100% - 1.8rem) / 2.35)}
  .minis a:first-child{scroll-snap-align:start}
  .place img{aspect-ratio:16/10}
}

/* --- five compositions: same parts, different order and stage --- */
main#main{display:flex;flex-direction:column}
:where(main#main>*){order:5}
.bhero{order:1}.strip{order:2}
/* café: story first after the strip (the place and its words), then the cups */
[data-kind=cafe] #story{order:3}[data-kind=cafe] #bar{order:4}
/* restaurant: a full-bleed photograph stage with the words over its foot; the dishes before the story */
[data-kind=restaurant] .bhero .wrap{grid-template-columns:1fr;min-height:min(78svh,46rem);align-items:end;padding-block:0 3.5rem;position:static}
[data-kind=restaurant] .bhero .art{position:absolute;inset:0;width:auto;max-width:none}
[data-kind=restaurant] .bhero .frame{height:100%;aspect-ratio:auto;border-radius:0;border:0;outline:0;box-shadow:none}
[data-kind=restaurant] .bhero .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25) 40%,rgba(0,0,0,.82))}
[data-kind=restaurant] .bhero .frame{position:relative}
[data-kind=restaurant] .bhero .copy{position:relative;z-index:2;color:#fff;max-width:44rem}
[data-kind=restaurant] .bhero .copy .lead,[data-kind=restaurant] .bhero .status,[data-kind=restaurant] .kicker{color:rgba(255,255,255,.85)}
[data-kind=restaurant] .bhero .btn:not(.line){background:#fff;color:#141414}[data-kind=restaurant] .bhero .btn.line{color:#fff;border-color:rgba(255,255,255,.55)}
[data-kind=restaurant] .badge{top:1.5rem;bottom:auto;inset-inline-start:auto;inset-inline-end:var(--m)}
[data-kind=restaurant] #bar{order:3}[data-kind=restaurant] #story{order:4}
/* bakery: an editorial column, everything centred, the arch wide under the line */
[data-kind=bakery] .bhero .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:2rem;padding-block:3.5rem 0;min-height:0}
[data-kind=bakery] .bhero .lead{margin-inline:auto}
[data-kind=bakery] .bhero .ctas,[data-kind=bakery] .bhero .status{justify-content:center}
[data-kind=bakery] .bhero .art{width:min(100%,46rem);margin-bottom:-1px}
[data-kind=bakery] .bhero .frame{aspect-ratio:16/10;border-radius:999px 999px 0 0;box-shadow:none;border-bottom:0}
[data-kind=bakery] .badge{bottom:1.25rem}
[data-kind=bakery] #story{order:3}[data-kind=bakery] #bar{order:4}
/* sweets: the round photo leads, the words under it; the dishes as round sweets in a row */
[data-kind=sweets] .bhero .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.75rem;min-height:0;padding-block:3rem}
[data-kind=sweets] .bhero .art{order:-1;width:min(100%,24rem)}
[data-kind=sweets] .bhero .lead{margin-inline:auto}
[data-kind=sweets] .bhero .ctas,[data-kind=sweets] .bhero .status{justify-content:center}
[data-kind=sweets] .minis .tile{border-radius:50%}
[data-kind=sweets] .minis a{text-align:center;justify-items:center}
[data-kind=sweets] #bar{order:3}[data-kind=sweets] #story{order:4}
/* fast food: food first — the dishes right under the hero, the strip as a tilted tape after them */
[data-kind=fastfood] #bar{order:2}[data-kind=fastfood] .strip{order:3}[data-kind=fastfood] #story{order:4}
[data-kind=fastfood] .bhero h1{font-size:clamp(3.25rem,7.4vw,7.5rem)}
[data-kind=fastfood] .minis .tile{border-radius:.75rem;box-shadow:6px 6px 0 color-mix(in srgb,var(--text) 80%,transparent)}
@media(max-width:860px){
  [data-kind=restaurant] .bhero .wrap{min-height:34rem;padding-bottom:2.25rem;text-align:start}
  [data-kind=restaurant] .bhero .ctas,[data-kind=restaurant] .bhero .status{justify-content:flex-start}
  [data-kind=restaurant] .badge{display:none}
  [data-kind=bakery] .bhero .art{width:100%}
  [data-kind=sweets] .bhero .art{width:min(78%,18rem)}
}
.minis{scroll-padding-inline:var(--m)}
@media(min-width:861px){[data-kind=sweets] .bhero .art{width:min(100%,17rem)}[data-kind=sweets] .bhero h1{font-size:clamp(2.6rem,4.6vw,4.5rem);margin-top:1rem}[data-kind=sweets] .bhero .wrap{gap:1.25rem;padding-block:2.25rem}}
main#main{overflow-x:clip}
/* restaurant: the photograph really fills the stage at every width */
[data-kind=restaurant] .bhero .frame .tile{position:absolute;inset:0;width:100%;height:100%}
[data-kind=restaurant] .bhero .frame .tile img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;transform:none}
[data-kind=restaurant] .bhero .art{justify-self:stretch;align-self:stretch;width:100%;height:100%}
[data-kind=restaurant] .bhero .art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to left,rgba(0,0,0,.72),rgba(0,0,0,.3) 55%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
[data-kind=restaurant] .badge{z-index:2}
@media(max-width:860px){[data-kind=restaurant] .bhero .art::after{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35) 35%,rgba(0,0,0,.85))}}

/* ===== owner 2026-11-14 (4), GPT's second review ===== */
.said{font-family:var(--display),sans-serif;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.6;color:var(--text);margin:0 0 .35rem}
.pills li b{font-weight:700}
.hours-range{display:block;white-space:nowrap;unicode-bidi:isolate}
.today-line b .hours-range{display:block}
.today-line{align-items:center;border-radius:1.25rem}
.mctl{display:none}
@media(max-width:860px){
  .minis{-webkit-mask:none;mask:none}
  .mctl:not([hidden]){display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
  .mctl button{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:var(--t1);color:var(--text);display:grid;place-items:center;cursor:pointer}
  .mctl svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
  .dots{display:flex;gap:.4rem}.dots i{width:.45rem;height:.45rem;border-radius:99px;background:var(--line);transition:width .3s,background-color .3s}
  .dots i.on{width:1.3rem;background:var(--lit)}
}
/* a logo too poor to show becomes the name (site.js .wm): the small logo boxes then leave rather than cut the name */
.badge .lg:has(.wm),.seal:has(.wm),footer .mark:has(.wm){display:none}

.hours-range small{display:inline-block;min-width:3.4em;font-size:.8em;font-weight:600;color:var(--lit)}
[data-kind=restaurant] .bhero h1{font-size:clamp(2.3rem,4.2vw,4.25rem);line-height:1.3}
[data-kind=restaurant] .bhero h1{font-size:clamp(2.2rem,3.8vw,3.75rem)}@media(min-width:861px){[data-kind=restaurant] .bhero .copy{max-width:50rem}}
/* ===== GPT round 4 ===== */
/* today's hours: "اليوم" on its own line, each period under it, never clipped */
.today-line{display:grid;gap:.35rem;justify-content:stretch;padding:1rem 1.25rem;font-size:1rem;line-height:1.6}
.today-line b{text-align:start}
.hours-range{white-space:normal}
/* secondary text: at least 14px */
.kicker{font-size:.875rem}.badge small{font-size:.875rem}.bfoot .wrap{font-size:.875rem}
.minis small{font-size:.9375rem}
/* bakery desktop: the whole arch inside the first screen */
@media(min-width:861px){[data-kind=bakery] .bhero .art{width:min(100%,40rem)}[data-kind=bakery] .bhero .frame{aspect-ratio:16/8.5}[data-kind=bakery] .bhero .wrap{padding-top:2.5rem;gap:1.5rem}[data-kind=bakery] .bhero h1{margin-top:1rem}}
@media(min-width:861px){[data-kind=bakery] .bhero h1{font-size:clamp(2.5rem,4.2vw,4rem);margin:.75rem 0 .75rem}[data-kind=bakery] .bhero .lead{margin-bottom:1.25rem}[data-kind=bakery] .bhero .status{margin-top:.75rem}[data-kind=bakery] .bhero .art{width:min(100%,34rem)}[data-kind=bakery] .bhero .wrap{padding-top:1.75rem;gap:1.25rem}}
/* ===== GPT round 5 ===== */
/* light heroes (bakery, sweets): secondary words near the text colour, 4.5:1 on the tinted ground */
[data-kind=bakery],[data-kind=sweets]{--hero-mute:color-mix(in srgb,var(--text) 86%,transparent)}
[data-kind=bakery] .bhero .lead,[data-kind=sweets] .bhero .lead,[data-kind=bakery] .bhero .status,[data-kind=sweets] .bhero .status,[data-kind=bakery] .kicker,[data-kind=sweets] .kicker{color:var(--hero-mute)}
/* restaurant: the shade sits behind the words only; the food keeps its light */
@media(min-width:861px){[data-kind=restaurant] .bhero .art::after{background:linear-gradient(to left,rgba(0,0,0,.74) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.08) 58%,transparent 75%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 22%)}}
@media(max-width:860px){[data-kind=fastfood] .bhero h1{font-size:clamp(2.1rem,9vw,2.75rem)}}

/* owner 2026-11-15 dock room: the last lines of the page are never under the phone dock */
@media(max-width:860px){body{padding-bottom:5rem}}
/* it leaves at once (never half-way over a heading) and slides back in when wanted */
@media(max-width:860px){.dock.wait:not(.on){transition:none;visibility:hidden}}