/* ============================================================
   TS·Web Design — shared skeleton
   Every style page defines its own tokens, then art-directs on
   top of this. Structure is identical across all six, which is
   what makes a chosen style fast to turn into a real client site.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --maxw: 1120px;
  --pad: 22px;
  --radius: 0px;
  --bar-h: 62px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--bar-h);
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.narrow{max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- sticky site nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg,var(--bg));
  border-bottom:1px solid var(--nav-line,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:14px}
.nav-name{font-family:var(--font-display);font-size:17px;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;align-items:center;gap:22px;font-size:13px}
.nav-links a{text-decoration:none;opacity:.75}
.nav-links a:hover{opacity:1}
@media(max-width:640px){.nav-links a.hide-sm{display:none}}

/* ---------- generic section rhythm ---------- */
.sec{padding:clamp(56px,9vw,110px) 0}
.sec-tight{padding:clamp(40px,6vw,72px) 0}

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}

.h-sec{font-family:var(--font-display);line-height:1.08;font-size:clamp(28px,4.4vw,44px)}
.lede{color:var(--muted);font-size:clamp(15px,1.6vw,17.5px)}

/* ---------- hero shell ---------- */
.hero{position:relative;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-veil{position:absolute;inset:0;z-index:-1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, opacity .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--on-accent,#fff)}
.btn-ghost{border:1px solid currentColor;background:transparent}

/* ---------- info grid (visit / hours) ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,46px)}
.info-grid h4{font-family:var(--font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:10px}
.info-grid p{font-size:15px;color:var(--muted)}
.info-grid .big{font-family:var(--font-display);font-size:19px;color:var(--fg);line-height:1.35}
@media(max-width:760px){.info-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- two-up story ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- menu primitives ---------- */
.menu-group + .menu-group{margin-top:clamp(34px,5vw,54px)}
.menu-row{display:flex;align-items:baseline;gap:12px;padding:11px 0}
.menu-row .m-name{font-family:var(--font-display);font-size:17px;white-space:nowrap}
.menu-row .m-dot{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:16px}
.menu-row .m-price{font-size:15px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-row .m-desc{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
@media(max-width:520px){
  .menu-row{flex-wrap:wrap}
  .menu-row .m-name{white-space:normal}
  .menu-row .m-dot{min-width:10px}
}

/* ---------- footer ---------- */
.site-foot{padding:clamp(44px,6vw,72px) 0 clamp(34px,5vw,54px);text-align:center}
.site-foot .f-name{font-family:var(--font-display);font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.site-foot .f-sub{color:var(--muted);font-size:14px}
.site-foot .f-made{margin-top:28px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}

/* ============================================================
   TS bar — the capture mechanism. Not part of the restaurant
   site; it is how the prospect tells Ted which direction fits.
   ============================================================ */
.tsbar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 clamp(12px,3vw,22px);
  background:#14140F;color:#F7F4EF;
  border-top:1px solid rgba(247,244,239,.14);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.tsbar-l{display:flex;align-items:center;gap:10px;min-width:0}
.tsbar-brand{font-family:Georgia,serif;font-size:14px;white-space:nowrap}
.tsbar-brand i{color:#C56A4B;font-style:normal}
.tsbar-note{font-size:11.5px;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){.tsbar-note{display:none}}
@media(max-width:430px){.tsbar-brand{display:none}}
.tsbar-r{display:flex;align-items:center;gap:9px;flex-shrink:0}
.tsbar-alt{
  font-size:12px;opacity:.72;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(247,244,239,.28);padding-bottom:1px;
}
.tsbar-alt:hover{opacity:1}
@media(max-width:360px){.tsbar-alt{display:none}}
.tsbar-cta{
  display:inline-flex;align-items:center;gap:7px;
  background:#C56A4B;color:#fff;text-decoration:none;
  padding:10px 17px;border-radius:999px;
  font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .18s ease;
}
.tsbar-cta:hover{background:#b25c3f}
.tsbar-cta svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

@media print{.tsbar{display:none}body{padding-bottom:0}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}