/* ============================================================================
   SARAY BAKERY & CAFE — provisional skin, ported from Concept B (2026-08-09).
   ⚠ DESIGN IS NOT FINAL: style/colors are still an open discussion with Ted —
   this file carries Concept B's system so the PHP structure has a real face.
   Palette sampled from the client's own logo. Font: Inter (house default).
   Mobile overrides live at the END of the file (house rule 1k — cascade wins).
   ============================================================================ */
:root{
  /* Palette v2 (2026-08-13, Ted picked direction "A — restrained"): the room
     itself is a single warm hue (every dominant colour in the interior photos
     sits between hue 29-36 degrees), so the neutrals were pulled toward it and
     the brand pink was reduced to an accent. Pink now appears ONLY on primary
     CTAs, the "Turkish" script word, the eyebrow dot, prices and NEW badges. */
  --cream:#FBF6EA; --cream-2:#F2E7D5; --butter:#E8C58E;
  --pink:#E8368C; --pink-dark:#C22771; --pink-rgb:232,54,140;
  --brown:#2A1C10; --brown-2:#5F4A2D; --ink:#33251A;
  /* warm tones sampled from the remodelled room - used for the decorative
     glows and the catering card, which used to be hardcoded pink */
  --warm:#BA8142; --warm-2:#CC9D62;
  --catering-1:#B4763A; --catering-2:#6E4420;
  /* The card behind a transparent PNG cut-out — gallery tiles, the Fan
     Favorites carousel and the home gallery strip all share it (Ted picked
     "espresso" 2026-08-13). Change --card and the ink colours follow. */
  --card:#3A2A1C; --card-ink:#FBF6EA; --card-ink-2:rgba(251,246,234,.72);
  --card-line:rgba(251,246,234,.10); --card-num:rgba(251,246,234,.42);
  --card-shadow:0 12px 16px rgba(0,0,0,.45);
  /* the brand pink only reaches 3.49:1 on the espresso card — this lifted tint
     clears 4.5:1 and is used for accent text sitting ON a card */
  --card-accent:#F583B9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:1000px;margin:0 auto;padding:0 32px;}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s ease,transform .8s ease;}
.reveal-scale.in{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s ease,transform .9s ease;}
.reveal-left.in{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .9s ease,transform .9s ease;}
.reveal-right.in{opacity:1;transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none;}
}

/* ── NAV ── */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:all .35s ease;}
header.site.scrolled{padding:12px 0;background:rgba(251,246,234,.92);backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(58,40,27,.08);}
header.site nav{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 32px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--brown);transition:color .35s;}
header.site:not(.scrolled) .brand{color:var(--cream);}
header.site.solid:not(.scrolled) .brand{color:var(--cream);}
.brand img{height:44px;width:44px;border-radius:50%;transition:transform .4s;}
.brand:hover img{transform:rotate(-8deg) scale(1.08);}
.navlinks{display:flex;gap:30px;font-weight:600;font-size:14.5px;}
header.site:not(.scrolled) .navlinks{color:rgba(251,246,234,.92);}
header.site.scrolled .navlinks{color:var(--brown-2);}
.navlinks a{position:relative;}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--pink);transition:width .3s;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navpills{display:flex;gap:10px;align-items:center;}
.pill{padding:10px 20px;border-radius:999px;font-weight:600;font-size:13.5px;white-space:nowrap;display:inline-block;transition:all .3s;}
.pill-outline{border:1.5px solid currentColor;}
.pill-solid{background:var(--pink);color:#fff !important;box-shadow:0 6px 18px rgba(var(--pink-rgb),.35);}
.pill-solid:hover{background:var(--pink-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(var(--pink-rgb),.45);}
.pill-outline:hover{background:currentColor;}
header.site:not(.scrolled) .pill-outline{color:var(--cream);}
header.site:not(.scrolled) .pill-outline:hover{color:var(--brown);}
header.site.scrolled .pill-outline{color:var(--brown);}
header.site.scrolled .pill-outline:hover{color:var(--cream);}
.langtog{display:inline-flex;border-radius:999px;overflow:hidden;border:1.5px solid currentColor;font-weight:700;font-size:12.5px;}
header.site:not(.scrolled) .langtog{color:var(--cream);}
header.site.scrolled .langtog{color:var(--brown);}
.langtog a,.langtog span.cur{padding:8px 13px;display:inline-flex;align-items:center;gap:6px;transition:background .25s,color .25s;}
.langtog .cur{background:var(--brown-2);color:#fff;}
.langtog .fi{font-size:12px;line-height:1;border-radius:2px;}

/* burger + drawer (mobile only) */
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:130;}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:currentColor;margin:5px 0;transition:all .3s;}
header.site:not(.scrolled) .nav-burger{color:var(--cream);}
header.site.scrolled .nav-burger{color:var(--brown);}
.nav-burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-burger.x span:nth-child(2){opacity:0;}
.nav-burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.nav-drawer{position:fixed;inset:0;z-index:120;background:rgba(34,22,13,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.nav-drawer.open{opacity:1;pointer-events:auto;}
.nav-drawer a{color:var(--cream);font-size:22px;font-weight:700;padding:10px 22px;}
.nav-drawer a.on{color:var(--butter);}
.nav-drawer .drawer-ctas{display:flex;flex-direction:column;gap:12px;margin-top:22px;align-items:center;}
.nav-drawer .drawer-ctas .pill{width:min(280px,80vw);text-align:center;background:var(--pink);color:#fff;padding:14px 22px;font-size:15px;}
.nav-drawer .drawer-ctas .pill.line{background:none;border:1.5px solid rgba(251,246,234,.5);color:var(--cream);}

/* ── HERO (video) ── */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center;}
.hero-media{position:absolute;inset:0;background:var(--brown) center/cover no-repeat;}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;}
.hero-media video.ready{opacity:1;}
/* hero slider: crossfading interior stills, same role the video played.
   The slow scale-down is what keeps a still frame from reading as dead. */
.hero-slider{overflow:hidden;}
/* The interior stills are brighter than the video was, so slider mode gets a
   stronger scrim: the diagonal one carries the text column, the bottom-up one
   protects the lede/CTA/address band on the brightest slides (2 and 5).
   Scoped to slider mode - the video hero keeps its original scrim. */
.hero-slider ~ .hero-scrim{background:
  linear-gradient(100deg,rgba(20,12,7,.86) 0%,rgba(20,12,7,.64) 42%,rgba(20,12,7,.30) 75%),
  linear-gradient(to top,rgba(20,12,7,.46) 0%,rgba(20,12,7,.14) 48%,rgba(20,12,7,0) 72%);}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 8s ease-out;will-change:opacity,transform;}
.hero-slide.on{opacity:1;transform:scale(1);}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none;transform:none;}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,12,7,.86) 0%,rgba(20,12,7,.62) 42%,rgba(20,12,7,.25) 75%);}
.hero-inner{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:0 32px;width:100%;color:var(--cream);}
.hero-wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 32px;width:100%;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(243,222,126,.15);border:1px solid rgba(243,222,126,.5);color:var(--butter);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:22px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none;animation:pulse 1.6s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.6);opacity:.4;}}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.06;margin:0 0 22px;font-weight:800;}
.hero h1 .script{color:var(--pink);font-style:italic;}
/* logo-as-headline (Ted 2026-08-14 mockup) — DESKTOP ONLY. The badge replaces
   the eyebrow + worded headline here; phones keep the words (see the mobile
   block at the end of the file, where this is reversed). */
.hero-logo{margin:0 0 26px;text-align:center;line-height:0;}
.hero-logo img{width:clamp(190px,22vw,320px);height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));}
.hero-logo .hero-words{display:none;}
/* ONE selector on purpose: an extra `.hero > .hero-inner > .eyebrow` in this
   list scored (0,3,0) and silently outranked the (0,2,0) mobile override that
   re-shows it, so the eyebrow stayed hidden on phones. */
.hero-inner > .eyebrow{display:none;}
.hero p.lede{font-size:17px;line-height:1.65;color:rgba(251,246,234,.86);text-align:justify;margin:0 0 30px;}
/* Equal columns via grid, not flex. Flex items default to min-width:auto, so a
   long label quietly claimed more than its share and the rows stopped lining
   up; minmax(0,1fr) columns are equal by definition, for any number of pills. */
.ctarow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;}
.ctarow .pill{padding:16px 26px;font-size:15px;text-align:center;}
.ctarow .pill-outline{border-color:rgba(251,246,234,.5);color:var(--cream);}
.ctarow .pill-outline:hover{background:var(--cream);color:var(--brown);}
/* Ted 2026-08-14: the Directions pill must be the SAME width and height as the
   phone pill above it and line up with it. Mirroring .ctarow — same gap, same
   flex:1 columns, same pill padding/font — makes both true by construction
   rather than by hand-tuned widths (rule 1L). */
.hero-addr{margin-top:14px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;align-items:stretch;}
/* min-width:0 is load-bearing: a flex item defaults to min-width:auto, so the
   address refused to shrink below its one-line width (254px) and the pill
   absorbed the remainder (308px) instead of splitting 50/50. Wrapping to a
   second line is allowed here anyway (protocol rule 4). */
.hero-addr .addr{min-width:0;display:flex;align-items:center;color:var(--butter);font-weight:600;font-size:14.5px;border-bottom:1px solid rgba(243,222,126,.45);padding-bottom:2px;line-height:1.5;}
.hero-addr .pill{padding:16px 26px;font-size:15px;text-align:center;}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(251,246,234,.7);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-cue .line{width:1px;height:34px;background:rgba(251,246,234,.4);position:relative;overflow:hidden;}
.scroll-cue .line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--butter);animation:scrolldown 1.8s ease infinite;}
@keyframes scrolldown{0%{top:-100%;}100%{top:100%;}}

/* ── TICKER ── */
.ticker{background:var(--brown);color:var(--butter);overflow:hidden;white-space:nowrap;padding:14px 0;position:relative;z-index:2;}
.ticker.light{background:var(--cream-2);color:var(--brown-2);}
.ticker-track{display:inline-flex;animation:scrollx 26s linear infinite;}
.ticker-track span{padding:0 28px;font-weight:700;font-size:14px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:10px;}
.ticker-track span i{width:5px;height:5px;border-radius:50%;background:var(--pink);display:inline-block;}
@keyframes scrollx{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ── SECTION shared ── */
/* overflow-x:clip stops the .reveal-left/.reveal-right entrance animations from
   creating a horizontal scrollbar: they start at translateX(±50px), which is
   wider than .wrap's side padding (20px mobile / 32px desktop), so the page
   scrolled sideways 30px under 760px and 18px up to 1024px. `clip` rather than
   `hidden` on purpose - hidden would make this a scroll container and break
   position:sticky inside it. (rule 1k: no horizontal scroll) */
.section{padding:100px 0;position:relative;overflow-x:clip;}
.section-head{max-width:640px;margin:0 auto 50px;text-align:center;}
.section-head .eyebrow{background:none;border:none;color:var(--pink);padding:0;margin-bottom:12px;}
.section-head h2{font-size:clamp(28px,4vw,40px);color:var(--brown);margin:0 0 14px;font-weight:800;}
.section-head p{color:var(--brown-2);font-size:15.5px;line-height:1.6;margin:0;}

/* signature carousel */
/* ── Fan Favorites — a plain 4-up GRID, no scrolling (Ted 2026-08-14) ──
   It used to be a horizontal scroller, which kept producing a few-pixel sliver
   of the next card at the right edge that read as a stray vertical bar. Tuning
   the scroller (edge fade, fractional widths) treated the symptom; a grid that
   never overflows removes the problem outright. Same approach as Pop's.
   Capped at FEATURED_MAX (4) so it is always exactly one tidy row. */
.carousel{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:10px 0 6px;}
.citem{background:var(--card);border-radius:22px;overflow:hidden;border:1px solid var(--card-line);transition:transform .4s ease,box-shadow .4s ease;}
.citem:hover{transform:translateY(-8px);box-shadow:0 24px 40px -16px rgba(58,40,27,.25);}
.citem .ph{aspect-ratio:1/1;overflow:hidden;background:var(--card);display:flex;align-items:center;justify-content:center;padding:14px;}
.citem .ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(var(--card-shadow));transition:transform .6s ease;}
.citem:hover .ph img{transform:scale(1.08);}
.citem .cb{padding:18px 20px 22px;}
.citem .cb h3{margin:0 0 6px;font-size:16.5px;color:var(--card-ink);}
.citem .cb p{margin:0;font-size:13px;color:var(--card-ink-2);line-height:1.5;}
.citem .price{color:var(--card-accent);font-weight:700;font-size:13px;margin-top:10px;}

/* STORY band */
.story{background:var(--brown);color:var(--cream);padding:110px 0;position:relative;overflow:hidden;}
.story-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:drift 14s ease-in-out infinite;}
.story-blob.b1{width:340px;height:340px;background:var(--warm);top:-100px;left:-100px;}
.story-blob.b2{width:260px;height:260px;background:var(--warm-2);bottom:-80px;right:-60px;animation-delay:3s;}
@keyframes drift{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,-30px);}}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2;}
.story .eyebrow{background:transparent;border:none;color:var(--butter);padding:0;}
.story h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;margin:14px 0 18px;}
.story p{font-size:15.5px;line-height:1.7;color:#E8DCC8;text-align:justify;}
.story .pill{margin-top:22px;background:var(--butter);color:var(--brown);padding:15px 30px;}
.story-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--cream-2);display:flex;align-items:center;justify-content:center;padding:24px;}
.story-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.28));transition:transform .8s ease;}
.story-photo:hover img{transform:scale(1.05);}
/* .story-photo was built for a product CUT-OUT (contain + padding + shadow on a
   cream plate). A room photo has to FILL the frame instead. */
.story-photo.photo{padding:0;background:var(--brown-2);}
.story-photo.photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;}

/* CATERING tilt cards */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.promo-card{border-radius:24px;padding:40px;color:#fff;position:relative;overflow:hidden;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s ease,box-shadow .4s ease;}
.promo-card.catering{background:linear-gradient(155deg,var(--catering-1),var(--catering-2));}
.promo-card.truck{background:linear-gradient(155deg,#5A4130,#332114);}
.promo-card:hover{transform:translateY(-10px) rotate(-.4deg);box-shadow:0 30px 50px -20px rgba(58,40,27,.4);}
.promo-card h3{font-size:23px;margin:0 0 10px;}
.promo-card p{font-size:14px;margin:0 0 18px;color:rgba(255,255,255,.85);line-height:1.5;}
.promo-card .pill{background:#fff;color:var(--brown);align-self:flex-start;padding:12px 24px;font-size:13.5px;}
.promo-card .icon{position:absolute;right:-10px;top:-10px;font-size:110px;opacity:.12;}

/* home gallery strip (masonry of cutout tiles) */
.home-gallery{columns:4 220px;column-gap:16px;}
.home-gallery a{display:block;background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:14px;margin-bottom:16px;break-inside:avoid;transition:transform .4s ease,box-shadow .4s ease;}
.home-gallery a:hover{transform:scale(1.03);box-shadow:0 18px 32px -14px rgba(58,40,27,.3);}
.home-gallery img{width:auto;height:auto;max-width:100%;margin:0 auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.42));}
/* Same rule as the gallery tiles: the espresso card is for PNG cut-outs only.
   A real photo fills its frame with no card showing (Ted 2026-08-14). This
   strip was missed when the gallery page got the treatment. */
.home-gallery a.fill{padding:0;overflow:hidden;line-height:0;}
.home-gallery a.fill img{width:100%;height:auto;filter:none;}

/* ── PAGE HEAD (inner pages) ── */
.pagehead{position:relative;background:var(--brown);color:var(--cream);padding:170px 0 66px;overflow:hidden;text-align:center;}
.pagehead::before{content:'';position:absolute;inset:0;background:
   radial-gradient(closest-side at 78% 30%, rgba(var(--pink-rgb),.16), transparent),
   radial-gradient(closest-side at 15% 85%, rgba(186,129,66,.24), transparent);}
.pagehead .wrap,.pagehead .wrap-narrow{position:relative;z-index:2;}
.pagehead h1{font-size:clamp(34px,5vw,56px);line-height:1.08;margin:0 0 14px;font-weight:800;}
.pagehead h1 .script{color:var(--pink);font-style:italic;}
.pagehead p.sub{max-width:600px;margin:0 auto 26px;font-size:16px;line-height:1.65;color:rgba(251,246,234,.85);}
.pagehead .hours{font-size:15.5px;color:rgba(251,246,234,.88);margin:0 0 20px;}
.pagehead .hours b{color:var(--butter);}
.headmeta{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;}
.headmeta a.addr{color:var(--butter);font-weight:600;font-size:14.5px;border-bottom:1px solid rgba(243,222,126,.45);padding-bottom:2px;line-height:1.5;}
.headmeta a.addr:hover{color:#fff;border-color:#fff;}
.headmeta .pill-outline{border:1.5px solid rgba(251,246,234,.5);color:var(--cream);}
.headmeta .pill-outline:hover{background:var(--cream);color:var(--brown);}

/* butter info strip (menu page) */
.strip{background:var(--butter);color:var(--brown);text-align:center;padding:13px 20px;font-weight:800;font-size:15px;letter-spacing:.01em;}
.strip span{font-weight:600;opacity:.78;font-size:13.5px;display:block;margin-top:2px;}

/* ── STICKY CATEGORY BAR (menu page) ── */
.catbar{position:sticky;top:0;z-index:60;background:rgba(251,246,234,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(58,40,27,.10);padding:11px 0;}
.catbar-inner{display:flex;gap:8px;overflow-x:auto;max-width:1000px;margin:0 auto;padding:0 20px;scrollbar-width:none;}
.catbar-inner::-webkit-scrollbar{display:none;}
.catbar a{flex:none;padding:9px 16px;border-radius:999px;border:1.5px solid rgba(58,40,27,.16);background:#fff;font-weight:600;font-size:13px;color:var(--brown-2);white-space:nowrap;transition:all .25s;}
.catbar a:hover{border-color:var(--pink);color:var(--pink);}
.catbar a.on{background:var(--brown);border-color:var(--brown);color:var(--butter);}

/* ── MENU LIST ── */
.menu{padding:44px 0 20px;}
.sec{margin-bottom:46px;scroll-margin-top:132px;}
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--brown);padding-bottom:10px;margin-bottom:6px;}
.sec-head h2{font-size:clamp(21px,3vw,27px);font-weight:800;color:var(--brown);margin:0;}
.sec-head .tr{font-size:15px;font-weight:600;color:var(--pink);}
.sec-note{display:inline-block;background:var(--brown);color:var(--butter);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.04em;}
.sec-sub{color:var(--brown-2);font-size:13.5px;opacity:.85;margin:8px 0 0;}
.mrow{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px dashed rgba(58,40,27,.16);}
.mrow .info{flex:1;min-width:0;}
.mrow .nm{font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.3;}
.mrow .nm .neu{display:inline-block;background:var(--pink);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:4px;vertical-align:middle;margin-right:7px;}
.mrow .nm .soldout{display:inline-block;background:rgba(58,40,27,.12);color:var(--brown-2);font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:4px;vertical-align:middle;margin-left:7px;text-transform:uppercase;}
.mrow.is-soldout .nm,.mrow.is-soldout .price{opacity:.45;}
.mrow .tr2{font-size:13.5px;color:var(--brown-2);opacity:.9;font-weight:500;margin-top:1px;}
.mrow .desc{font-size:12.8px;color:var(--brown-2);opacity:.78;line-height:1.45;margin-top:4px;}
.mrow .price{font-weight:800;font-size:15.5px;color:var(--brown);white-space:nowrap;padding-top:1px;text-align:right;}
.mrow .price small{display:block;font-size:12px;font-weight:700;color:var(--brown-2);}
.footnote{text-align:center;color:var(--brown-2);opacity:.7;font-size:12.5px;padding:8px 0 6px;}
.advisory{text-align:center;background:var(--brown);color:rgba(251,246,234,.92);font-size:13px;line-height:1.5;padding:16px 22px;border-radius:14px;margin:10px 0 40px;}
.advisory b{color:var(--butter);display:block;margin-bottom:3px;}

/* ── GALLERY PAGE ── */
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:44px 0 34px;}
.chip{padding:11px 22px;border-radius:999px;border:1.5px solid rgba(58,40,27,.18);background:#fff;color:var(--brown-2);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .28s;font-family:inherit;}
.chip:hover{border-color:var(--pink);color:var(--pink);}
.chip.on{background:var(--brown);border-color:var(--brown);color:var(--butter);}
.count{color:var(--brown-2);opacity:.62;font-size:13px;text-align:center;margin:0 0 30px;}
/* grid-auto-rows:1fr + .tile{height:100%} keeps every tile the SAME size even
   though photo tiles carry no padding and cut-out tiles do (Ted 2026-08-14). */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;padding-bottom:30px;grid-auto-rows:1fr;}
.tile{position:relative;height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:16px;cursor:zoom-in;overflow:hidden;text-align:center;font-family:inherit;transition:transform .38s ease,box-shadow .38s ease,border-color .38s ease;}
/* flex-basis auto keeps the 4/3 box as the STARTING height, and grow lets it
   take the rest of the (row-equalised) tile — otherwise a wide cut-out sat in a
   short 4/3 box with ~100px of dead card below it (Ted 2026-08-14). */
.tile .ph{position:relative;flex:1 1 auto;min-height:0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.tile .ph::after{content:'';position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:56%;height:12px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(9px);opacity:0;transition:opacity .38s ease;}
.tile:hover,.tile:focus-visible{transform:translateY(-7px);box-shadow:0 26px 42px -18px rgba(58,40,27,.34);border-color:rgba(186,129,66,.45);outline:none;}
.tile:hover .ph::after{opacity:1;}
.tile img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(var(--card-shadow));transition:transform .45s ease;}
.tile:hover img{transform:scale(1.07);}
/* Cut-outs sit CONTAINED with a drop shadow; a real photo (interiors, and the
   few crops that kept their background) FILLS its frame instead.
   ⚠ Both keep the SAME tile padding — dropping it on .fill made photo tiles
   shorter than cut-out tiles and the grid looked uneven (Ted 2026-08-13). */
/* A JPG/photo tile gets NO card frame — the photo runs edge to edge (Ted
   2026-08-14: "background is for png images only"). The tile still matches the
   cut-out tiles in size because of grid-auto-rows:1fr + .tile{height:100%}. */
.tile.fill{padding:0;}
.tile.fill .ph{flex:1;min-height:0;aspect-ratio:auto;border-radius:0;overflow:hidden;}
.tile.fill img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;}
.tile.fill .ph::after{display:none;}
.tile.fill .num{text-shadow:0 1px 4px rgba(0,0,0,.65);}          /* sits on the photo now */
.tile.fill .namebox{padding:10px 14px 14px;}                      /* no tile padding to inherit */
.tile.hide{display:none;}
.tile .num{position:absolute;top:10px;left:12px;font-size:11px;font-weight:700;color:var(--card-num);letter-spacing:.04em;z-index:2;}
.tile .name{font-weight:700;font-size:14.5px;color:var(--card-ink);line-height:1.35;}
.tile .name:empty{display:none;}
.tile .name-tr{font-weight:500;font-size:13px;color:var(--card-ink-2);opacity:1;line-height:1.35;margin-top:2px;}
.tile .name-tr:empty{display:none;}
.tile .namebox{display:none;padding-top:12px;}
.tile.has-name .namebox{display:block;}
.lb{position:fixed;inset:0;z-index:300;background:rgba(24,16,10,.94);display:none;align-items:center;justify-content:center;padding:70px 24px;}
.lb.open{display:flex;}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 22px 40px rgba(0,0,0,.5));}
.lb .x,.lb .nav-btn{position:absolute;background:rgba(251,246,234,.1);border:1.5px solid rgba(251,246,234,.35);color:var(--cream);border-radius:999px;cursor:pointer;font-family:inherit;transition:all .25s;}
.lb .x{top:22px;right:24px;padding:9px 18px;font-weight:600;font-size:13.5px;}
.lb .nav-btn{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;}
.lb .prev{left:20px;} .lb .next{right:20px;}
.lb .x:hover,.lb .nav-btn:hover{background:var(--pink);border-color:var(--pink);}
.lb .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(251,246,234,.72);font-size:13px;}
.lb .cap b{display:block;color:var(--cream);font-size:16px;font-weight:700;margin-bottom:4px;}

/* ── HOURS + MAP (full-width map lives in footer.php per protocol) ── */
.map{line-height:0;}
.map iframe{width:100%;height:420px;border:0;display:block;}

/* ── FOOTER (dark) ── */
footer.site{background:var(--brown);color:rgba(251,246,234,.8);padding:56px 0 30px;}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(251,246,234,.13);}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--cream);}
.footer-brand img{height:40px;width:40px;border-radius:50%;}
.foot-col h4{color:var(--cream);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px;}
.foot-col{font-size:14px;line-height:1.8;}
.foot-col a{display:block;}
.foot-col a:hover{color:var(--butter);}
.hours-row{display:flex;justify-content:space-between;gap:18px;font-size:13.5px;padding:3px 0;}
.hours-row span:last-child{color:var(--cream);font-weight:600;}
.footlinks{display:flex;gap:24px;font-size:14px;font-weight:600;flex-wrap:wrap;}
.footlinks a:hover{color:var(--butter);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;}
.owner-login{display:inline-block;padding:5px 14px;border-radius:999px;border:1px solid rgba(251,246,234,.3);font-weight:600;transition:all .25s;}
.owner-login:hover{background:var(--butter);color:var(--brown);border-color:var(--butter);}
.powered{display:inline-flex;align-items:center;gap:8px;}
.powered img{height:28px;width:auto;opacity:.42;transition:opacity .2s;}
.powered:hover img{opacity:.75;}

@media(max-width:900px){
  .story-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .carousel{grid-template-columns:repeat(2,1fr);gap:14px;}
  .home-gallery{columns:2 160px;}
  /* mobile nav = logo + LANG TOGGLE + burger (protocol rule 4 — the toggle
     stays visible, Ted 8/10; only the phone/order pills move to the drawer) */
  .navlinks{display:none;}
  .navpills .pill{display:none;}
  .nav-burger{display:block;}
}

/* ============================================================================
   MOBILE STACKING + PILL-GROUP RULES (protocol 1k / 1L / 1o) — END OF FILE so
   these always win the cascade. No 100vh sections on mobile; uniform pills.
   ============================================================================ */
@media(max-width:760px){
  .wrap,.wrap-narrow,header.site nav{padding:0 20px;}
  .brand-name{display:none;} /* logo badge carries the brand; frees room so logo + lang toggle + burger never collide */
  .langtog a,.langtog span.cur{padding:7px 11px;}
  /* Hero is content-sized on mobile (rule 1k).
     ⭐ 2026-08-13 (Ted: "the hero slider on mobile is only showing part of it"):
     with the text sitting ON the photo, the hero box was 390x726 while the
     interior shots are 3:2 — object-fit:cover then showed only 36% of the
     frame, so the room read as a sliver of wall. Cropping differently cannot
     fix that; it only picks a different 36%. On phones the photo now gets its
     own full-width banner AT ITS OWN 3:2 RATIO (whole frame visible) and the
     text sits underneath on a solid brown panel. Desktop is untouched. */
  .hero{height:auto;min-height:0;padding:0;display:flex;flex-direction:column;background:var(--brown);}
  .hero-media{position:relative;inset:auto;width:100%;aspect-ratio:3/2;flex:none;}
  .hero-scrim{display:none;}
  .hero-inner{position:relative;max-width:none;padding:30px 20px 44px;}
  .scroll-cue{display:none;}
  /* ⭐ MOBILE HERO = PHOTO then ACTIONS (Ted 2026-08-14, crossed the whole text
     block out). Eyebrow, headline and paragraph are all hidden on phones; the
     CTA row, address and Directions stay. Desktop is untouched (logo badge).
     The <h1> is NOT deleted — it is visually hidden, so its words stay in the
     HTML for search engines and screen readers (rule 1j). */
  .hero-inner > .eyebrow{display:none;}
  .hero-logo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
             overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
  .hero-logo img{display:none;}
  .hero-logo .hero-words{display:block;}
  .hero p.lede{display:none;}
  .hero-inner{padding-top:26px;}
  .eyebrow{font-size:11.5px;padding:6px 14px;}
  /* these rows are GRIDS now — flex-direction would be inert here, so stack
     them with grid-auto-flow:row (uniform 320px pills, rule 1L) */
  .ctarow{grid-auto-flow:row;grid-auto-columns:auto;justify-items:center;gap:10px;}
  .ctarow .pill{width:min(320px,86vw);padding:13px 20px;font-size:14px;text-align:center;}
  .hero-addr{grid-auto-flow:row;grid-auto-columns:auto;justify-items:center;text-align:center;gap:10px;}
  .hero-addr .addr{justify-content:center;padding-bottom:4px;}
  .hero-addr .pill{width:min(320px,86vw);padding:13px 20px;font-size:14px;text-align:center;}
  .section{padding:64px 0;}
  .story{padding:72px 0;}
  .pagehead{padding:126px 0 48px;}
  .headmeta{flex-direction:column;}
  .headmeta .pill{width:min(320px,86vw);text-align:center;}
  .sec{scroll-margin-top:118px;}
  .mrow .nm{font-size:14.5px;}
  .mrow .tr2{font-size:12.8px;}
  .mrow .price{font-size:14.5px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .tile{border-radius:16px;padding:11px;}
  .tile .name{font-size:13px;}
  .tile .name-tr{font-size:11.5px;}
  .lb{padding:64px 12px;}
  .lb .nav-btn{width:42px;height:42px;}
  .foot-top,.foot-bot{flex-direction:column;text-align:center;align-items:center;}
  .foot-col a{text-align:center;}
  .map iframe{height:320px;}
}