/* Savior Restaurant — composition.
   No colour, face, radius or control size is decided here. Each one is a custom
   property the merchant's Experience Theme defines; the fallbacks exist so a
   restaurant with no theme still renders as a legible black-on-white site rather
   than as a broken one. */

:root{
  --ground:#ffffff; --surface:#f6f6f5; --ink:#141312; --muted:#55524e; --faint:#807c77;
  --line:#e2e0dd; --line-soft:#efedea; --accent:#8a2b1c; --accent-dark:#6d2216;
  --accent-soft:#f6ece9; --on-accent:#ffffff; --positive:#7a6a2f;
  --r-surface:10px; --r-control:8px; --btn-r:8px; --btn-h:46px; --touch:44px; --gutter:20px;
  --btn-weight:700;
  --disp:Georgia,serif; --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--ui);
  padding-bottom:80px;overflow-x:hidden}
@media(min-width:1000px){body{padding-bottom:0}}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--disp);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:min(1180px,100% - (var(--gutter) * 2));margin-inline:auto}
.wrap.narrow{width:min(720px,100% - (var(--gutter) * 2))}
.sec{padding-block:clamp(52px,8vw,104px)}
.band{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{max-width:62ch}
.eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.sec-head h2{font-size:clamp(30px,5vw,54px)}
.h2-lg{font-size:clamp(32px,5.4vw,56px)}
.h2-md{font-size:clamp(28px,4.6vw,48px)}
.lede{margin:16px 0 0;color:var(--muted);font-size:17px;line-height:1.62;max-width:62ch}
.fine{margin:14px 0 0;font-size:12.5px;color:var(--faint);line-height:1.55;max-width:52ch}
.prose{color:var(--muted);line-height:1.7}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--btn-h);padding:0 22px;border-radius:var(--btn-r);border:1.5px solid var(--accent);
  background:var(--accent);color:var(--on-accent);font:inherit;font-weight:var(--btn-weight);
  font-size:15px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}

/* header */
.nav{position:sticky;top:0;z-index:90;background:var(--ground);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){
  .nav{background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(14px)}}
.nav-in{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{margin-right:auto;line-height:0}
.brand img{width:190px;height:auto;border-radius:4px}
@media(max-width:520px){.brand img{width:140px}}
.nav-links{display:none;gap:26px;font-size:14px;font-weight:600}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--accent)}

/* hero */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--ground) 58%,transparent) 0%,
  color-mix(in srgb,var(--ground) 18%,transparent) 34%,
  color-mix(in srgb,var(--ground) 86%,transparent) 78%,var(--ground) 100%)}
.hero-in{position:relative;padding:60px 0 46px;width:100%}
.hero h1{font-size:clamp(34px,9.6vw,132px);line-height:.9;letter-spacing:-.035em;overflow-wrap:anywhere}
.hero h1 em{font-style:italic;font-weight:500;color:var(--positive);display:block;
  font-size:.4em;margin-bottom:.2em;line-height:1.05;letter-spacing:-.01em}
.hero-note{margin-top:28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.price{margin:0;font-family:var(--disp);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.price span{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:4px}

/* category shelf */
.shelf{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:var(--touch);padding:10px 16px;
  border:1.5px solid var(--line);border-radius:var(--btn-r);text-decoration:none;
  font-weight:600;font-size:14.5px;color:var(--muted);background:transparent}
.chip b{font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip:hover b{color:var(--accent)}

/* stories */
.story{display:grid;border-top:1px solid var(--line)}
@media(min-width:900px){.story{grid-template-columns:1fr 1fr}.story.flip .story-img{order:2}}
.story-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
@media(min-width:900px){.story-img{aspect-ratio:auto;min-height:520px}}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-txt{padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.story-txt h3{font-size:clamp(28px,4.4vw,50px)}
.story-txt p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.62;max-width:46ch}
.story-txt .said{font-family:var(--disp);font-style:italic;font-size:clamp(18px,2.2vw,23px);
  color:var(--ink);line-height:1.4;border-left:2px solid var(--accent);padding-left:18px}
.tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--positive);font-weight:700}

/* tiles */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));margin-top:34px}
.tile{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-surface);
  background:var(--surface);display:block;text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06)}
.tile-cap{position:absolute;inset:auto 0 0 0;padding:34px 13px 12px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--ground) 94%,transparent));
  font-size:13.5px;font-weight:600;line-height:1.3}
.tile-cap b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:700}
.tile-cap span{color:var(--positive);font-variant-numeric:tabular-nums;font-size:13px}

/* figures */
.nums{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  background:var(--line);margin-top:38px}
.num{background:var(--ground);padding:24px 20px}
.num b{display:block;font-family:var(--disp);font-size:42px;font-weight:900;line-height:1;
  color:var(--positive);font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:700}

/* owners + held-open spaces */
.owners,.visit{display:grid;gap:32px}
@media(min-width:900px){.owners{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .visit{grid-template-columns:1fr 1fr;gap:60px}}
.slot{border:1.5px dashed var(--line);border-radius:var(--r-surface);display:grid;place-items:center;
  text-align:center;padding:44px 26px;min-height:300px;background:var(--surface)}
.slot p{margin:0;font-size:14px;color:var(--muted);max-width:34ch;line-height:1.65}
.slot span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:12px}

/* catering */
.cater{display:grid;gap:34px}
@media(min-width:960px){.cater{grid-template-columns:1fr 430px;gap:60px;align-items:start}}
.occ-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.occ{padding:12px 18px;border-radius:var(--btn-r);border:1.5px solid var(--line);background:transparent;
  color:var(--muted);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;min-height:var(--touch)}
.occ.on,.occ:hover{border-color:var(--accent);color:var(--accent)}
.form{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-surface);padding:28px}
.form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--faint);margin:16px 0 7px}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;min-height:var(--touch);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-control);
  color:var(--ink);font-family:var(--ui);font-size:15.5px}
.form .two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.form .btn{width:100%;margin-top:20px}

/* visit + footer */
.hrs{list-style:none;margin:20px 0 0;padding:0;font-variant-numeric:tabular-nums}
.hrs li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.hrs li b{color:var(--ink)}
.foot{border-top:1px solid var(--line);padding:38px 0;color:var(--faint);font-size:13.5px}
.foot-name{color:var(--ink);font-family:var(--disp);font-size:16px}

/* the phone's persistent way in */
.orderbar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--surface);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;
  padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s ease}
.orderbar.on{transform:none}
@media(min-width:1000px){.orderbar{display:none}}
.orderbar .s{flex:1;font-size:12.5px;color:var(--faint);min-width:0}
.orderbar .s b{display:block;font-size:15px;color:var(--ink);font-weight:700}

.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,14px);z-index:200;
  background:var(--ink);color:var(--ground);padding:13px 20px;border-radius:var(--btn-r);
  font-size:14.5px;font-weight:600;max-width:min(30rem,calc(100% - 32px));text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:1000px){.toast{bottom:28px}}

/* motion, opt-in and always cancellable */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .tile img{transition:none}
  .tile:hover img{transform:none}
  .orderbar{transition:none}
  .toast{transition:none}
  html{scroll-behavior:auto}
}

/* A slot once the photograph exists. Same footprint as the space it replaces,
   so the page does not reflow when a merchant sends their pictures. */
.slot-filled{border-radius:var(--r-surface);overflow:hidden;background:var(--surface);min-height:300px}
.slot-filled img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* The ordering engine's cart, reached from the website. Hidden until it holds something. */
.nav-cart{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.nav-cart[hidden]{display:none}
.nav-cart:hover{color:var(--accent)}
.nav-cart-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--accent);color:var(--ground);font-size:12px}
/* A dish the POS is not selling today: stated, never linked. */
.btn-off{opacity:.55;cursor:default;pointer-events:none}

/* Champion 2.0: pages without a photograph still read as designed. */
.hero.hero-plain { min-height: auto; padding: 96px 0 56px; background: var(--surface, #faf7f2); }
.hero.hero-plain .hero-in { position: static; }
.tile.tile-plain { display: flex; align-items: flex-end; min-height: 160px; background: var(--surface, #f4f1ec); }
.tile.tile-plain .tile-cap { position: static; }
.brand-text { font-weight: 800; font-size: 18px; letter-spacing: .01em; color: var(--ink, #111); }
a.num { color: inherit; text-decoration: none; }