/* 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 -1rem 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}
}