/* =====================================================================
   SOPHIA'S ITALIAN RESTAURANT — 2026 Redesign
   OLD-WORLD TUSCAN — parchment, wine, vineyard, gold
   ===================================================================== */

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

:root{
  /* Wine reds — deep, old-world, oxidized */
  --red-950:#3A0A08;
  --red-900:#561612;
  --red-800:#6E1D19;
  --red-700:#8B2520;
  --red:#8B1A1A;            /* classic wine red — primary brand */
  --red-600:#A63030;
  --red-500:#BD4540;
  --red-200:rgba(139,26,26,.18);
  --red-100:rgba(139,26,26,.07);

  /* Parchment family — background layers */
  --parchment:#F4EAD5;      /* main page background */
  --parchment-2:#EDE0C3;    /* alt section background */
  --parchment-3:#E5D4AE;    /* deeper panel */
  --cream:#F4EAD5;          /* alias kept so old rules still work */
  --cream-2:#EDE0C3;
  --cream-3:#E5D4AE;
  --paper:#FBF4E3;          /* lighter paper for cards */

  /* Vineyard browns + earth tones */
  --brown-950:#2D1B0E;
  --brown-900:#3D2817;
  --brown-800:#503422;
  --brown:#6B4423;
  --brown-600:#8B5A3C;
  --brown-500:#A77348;
  --cocoa:#5A3A22;

  /* Olive / sage — vineyard accents */
  --olive:#6B7A3E;
  --olive-2:#8A9656;
  --sage:#A8B084;

  /* Gilded gold — classical highlight */
  --gold:#B88A2F;
  --gold-light:#D4A84B;
  --gold-dark:#8E6820;
  --mustard:#C9972B;
  --mustard-pale:#E5C577;

  /* Legacy names (preserved so old rules don't break) */
  --salmon:#D9B8A6;
  --pink:#E5C9BB;
  --blue:#9DAFB8;
  --blue-2:#8AA0AC;

  /* Text + surfaces */
  --ink:#2D1B0E;            /* near-espresso ink */
  --ink-2:#3D2817;
  --muted:#6B5845;
  --line:rgba(61,40,23,.16);
  --line-gold:rgba(184,138,47,.35);
  --surface:#FBF4E3;

  /* Type — classical serif stack + handwritten script */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --serif-body:'Lora','Crimson Text',Georgia,serif;
  --script:'Caveat','Dancing Script',cursive;
  --sans:'Lora','Crimson Text',Georgia,serif; /* alias — old rules fall back to warm serif */

  --radius:4px;
  --radius-lg:10px;
  --shadow-1:0 2px 14px rgba(45,27,14,.09);
  --shadow-2:0 14px 50px rgba(45,27,14,.22);

  --container:1200px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--serif-body);
  background:var(--parchment);
  /* Warm parchment background with subtle noise for a printed-paper feel. */
  background-image:
    radial-gradient(rgba(107,68,35,.035) 1px,transparent 1px),
    radial-gradient(rgba(107,68,35,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(244,234,213,.88) 0%,rgba(237,224,195,.90) 50%,rgba(244,234,213,.92) 100%),
    linear-gradient(180deg,var(--parchment) 0%,var(--parchment-2) 100%);
  background-size:24px 24px,37px 37px,100% 100%,100% 100%;
  background-position:0 0,12px 18px,0 0,0 0;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed;
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ─────────────────────────────────────────
   SITE NAV — cream with double-rule underline
───────────────────────────────────────── */
.site-nav{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 2.2rem;
  background:var(--paper);
  /* Classical double-rule bottom: thick wine + thin gold */
  box-shadow:
    inset 0 -4px 0 0 var(--red-900),
    inset 0 -7px 0 0 var(--paper),
    inset 0 -9px 0 0 var(--gold);
}
.nav-logo{
  display:flex;align-items:center;gap:.7rem;color:var(--red-900);
}
.nav-logo .logo-mark{
  width:44px;height:44px;color:var(--red);
  filter:drop-shadow(0 1px 2px rgba(45,27,14,.15));
}
.nav-logo-text{
  font-family:var(--serif);
  font-style:italic;font-weight:800;font-size:1.6rem;
  color:var(--red-900);letter-spacing:-.01em;
}
.nav-links{
  display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;list-style:none;
}
.nav-links a{
  color:var(--brown-900);
  font-family:var(--serif-body);
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:.35rem 0;position:relative;transition:color .2s;
}
.nav-links a:hover,.nav-links a.current{color:var(--red)}
.nav-links a.current::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;
  width:14px;height:2px;background:var(--gold);
}
.nav-links .nav-cta{
  background:var(--red);color:var(--paper)!important;
  padding:.55rem 1.3rem;border-radius:2px;letter-spacing:.18em;
  border:1px solid var(--red-900);
  box-shadow:inset 0 0 0 3px var(--red);
  transition:all .2s;
}
.nav-links .nav-cta:hover{background:var(--red-900);color:var(--gold-light)!important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--red-900);margin:5px 0;transition:all .3s}

/* ─────────────────────────────────────────
   STRIPE / SOCIAL / QUICK LINKS
───────────────────────────────────────── */
.stripe{
  background:var(--brown-950);padding:.7rem 2rem;
  display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(184,138,47,.25);
}
.stripe-item{
  display:flex;align-items:center;gap:.55rem;
  color:rgba(244,234,213,.82);font-family:var(--serif-body);
  font-size:.82rem;font-weight:500;letter-spacing:.06em;font-style:italic;
}
.stripe-item a{color:var(--gold-light)}
.stripe-item a:hover{color:var(--paper)}
.stripe-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}

.social-bar{
  background:var(--brown-900);padding:.9rem 2.2rem;
  display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(184,138,47,.18);
}
.social-link{
  display:inline-flex;align-items:center;gap:.5rem;color:rgba(244,234,213,.88);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:2px;
  border:1px solid rgba(184,138,47,.45);
  transition:all .2s;
}
.social-link:hover{color:var(--paper);border-color:var(--gold);background:rgba(184,138,47,.12)}
.social-icon{width:15px;height:15px;fill:currentColor}

.quick-links-bar{
  background:var(--parchment-2);
  padding:.8rem 2.2rem;
  display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line-gold);
  position:relative;
}
.quick-links-bar::before,
.quick-links-bar::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:var(--line-gold);
}
.quick-links-bar::before{top:3px}
.quick-links-bar::after{bottom:3px}
.quick-link{
  color:var(--red-900);font-family:var(--serif-body);
  font-size:.78rem;font-weight:600;
  letter-spacing:.08em;
  padding:.45rem 1rem;border-radius:2px;
  background:var(--paper);border:1px solid var(--line-gold);
  transition:all .2s;white-space:nowrap;
  box-shadow:0 1px 0 rgba(45,27,14,.08);
}
.quick-link:hover{background:var(--red);color:var(--paper);border-color:var(--red-900);transform:translateY(-1px)}

/* ─────────────────────────────────────────
   TYPE HELPERS — classical serif scale
───────────────────────────────────────── */
.display{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.6rem,5.2vw,5rem);line-height:1.04;color:var(--ink);
  letter-spacing:-.01em;
}
.display em{font-style:italic;color:var(--red);display:block;font-weight:700}
.display-sm{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.15;color:var(--ink);
  letter-spacing:-.005em;
}
.display-sm.light{color:var(--paper)}
.display-sm em{font-style:italic;color:var(--red);font-weight:700}
.display-md{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;color:var(--ink);
}
.display-md.light{color:var(--paper)}

/* Eyebrow — handwritten Caveat script, the trademark "cozy" touch */
.eyebrow{
  display:inline-block;
  font-family:var(--script);
  font-size:1.35rem;font-weight:600;letter-spacing:.02em;
  color:var(--red);
  margin-bottom:.4rem;
  line-height:1;
}
.eyebrow::before{content:'~ ';color:var(--gold);font-weight:500}
.eyebrow::after{content:' ~';color:var(--gold);font-weight:500}
.eyebrow.light{color:var(--gold-light)}
.eyebrow.light::before,.eyebrow.light::after{color:var(--parchment-3)}

.h-section{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--ink);margin-bottom:1rem;
}
.p-lede{
  font-family:var(--serif-body);
  font-size:1.02rem;line-height:1.85;color:var(--muted);max-width:580px;
}
.p-lede.center{margin-left:auto;margin-right:auto;text-align:center}
.p-lede.light{color:rgba(244,234,213,.85)}
.sec-hdr{margin-bottom:2.8rem}
.sec-hdr.center{text-align:center;margin-left:auto;margin-right:auto;max-width:720px}

/* Classical flourish divider — goes under section headlines */
.flourish{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  margin:1rem auto 1.6rem;color:var(--gold);
  max-width:200px;
}
.flourish::before,.flourish::after{
  content:'';flex:1;height:1px;background:var(--gold);opacity:.6;
}
.flourish .orn{
  font-size:1.3rem;line-height:1;color:var(--red);
}

/* ─────────────────────────────────────────
   BUTTONS — classical, squared, ink-on-parchment feel
───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 2rem;border-radius:2px;
  font-family:var(--serif-body);font-size:.82rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;transition:all .22s ease;
  border:1px solid transparent;
  position:relative;
}
.btn-red{
  background:var(--red);color:var(--paper);
  border:1px solid var(--red-900);
  box-shadow:inset 0 0 0 3px var(--red),0 2px 0 rgba(45,27,14,.12);
}
.btn-red:hover{background:var(--red-900);box-shadow:inset 0 0 0 3px var(--red-900),0 3px 0 rgba(45,27,14,.18);transform:translateY(-1px)}
.btn-red-sm{
  background:var(--red);color:var(--paper);
  padding:.5rem 1rem;font-family:var(--serif-body);font-size:.74rem;
  border-radius:2px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid var(--red-900);transition:all .2s;
}
.btn-red-sm:hover{background:var(--red-900)}
.btn-outline-red{
  background:transparent;color:var(--red);
  border:1px solid var(--red);
  box-shadow:inset 0 0 0 3px transparent;
}
.btn-outline-red:hover{background:var(--red);color:var(--paper);border-color:var(--red-900);box-shadow:inset 0 0 0 3px var(--red)}
.btn-outline-red-sm{
  background:transparent;color:var(--red);
  border:1px solid var(--red);padding:.5rem 1rem;
  font-family:var(--serif-body);font-size:.74rem;
  border-radius:2px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;transition:all .2s;
}
.btn-outline-red-sm:hover{background:var(--red);color:var(--paper)}
.btn-white{
  background:var(--paper);color:var(--red-900);
  border:1px solid var(--paper);
  box-shadow:inset 0 0 0 3px var(--paper),0 2px 0 rgba(45,27,14,.15);
}
.btn-white:hover{background:var(--parchment);box-shadow:inset 0 0 0 3px var(--parchment),0 3px 0 rgba(45,27,14,.2);transform:translateY(-1px)}
.btn-outline-white{
  background:transparent;color:var(--paper);
  border:1px solid rgba(244,234,213,.55);
  box-shadow:inset 0 0 0 3px transparent;
}
.btn-outline-white:hover{border-color:var(--paper);background:rgba(244,234,213,.08);box-shadow:inset 0 0 0 3px rgba(244,234,213,.08)}
.btn-gold{
  background:var(--gold);color:var(--brown-950);
  border:1px solid var(--gold-dark);
  box-shadow:inset 0 0 0 3px var(--gold);
}
.btn-gold:hover{background:var(--gold-light);box-shadow:inset 0 0 0 3px var(--gold-light)}

/* ─────────────────────────────────────────
   PAGE HEAD — vintage menu cover for inner pages
───────────────────────────────────────── */
.pg-head{
  position:relative;
  padding:5rem 2.2rem 4rem;
  background:
    radial-gradient(900px 500px at 80% 0%,rgba(184,138,47,.28),transparent 60%),
    linear-gradient(180deg,var(--red-900) 0%,var(--red-950) 100%);
  color:var(--paper);overflow:hidden;text-align:center;
  border-bottom:1px solid var(--gold-dark);
}
.pg-head::before{
  content:'';position:absolute;left:4%;right:4%;top:18px;height:1px;
  background:var(--gold-dark);
  box-shadow:0 3px 0 var(--gold-dark);
}
.pg-head::after{
  content:'';position:absolute;left:4%;right:4%;bottom:18px;height:1px;
  background:var(--gold-dark);
  box-shadow:0 -3px 0 var(--gold-dark);
}
.pg-head-inner{position:relative;max-width:820px;margin:0 auto;z-index:2}
.pg-head .eyebrow{color:var(--gold-light);border-color:transparent}
.pg-head .eyebrow::before,.pg-head .eyebrow::after{color:var(--parchment-3)}
.pg-head .display{color:var(--paper);font-style:italic}
.pg-head .display em{color:var(--gold-light)}
.pg-head .lede{
  font-family:var(--serif-body);
  color:rgba(244,234,213,.9);font-size:1.1rem;line-height:1.85;
  max-width:640px;margin:1.4rem auto 0;font-style:italic;
}
/* legacy class used on gallery page */
.page-hero{
  position:relative;padding:4.5rem 2.2rem 3.5rem;text-align:center;
  background:
    radial-gradient(900px 500px at 80% 0%,rgba(184,138,47,.28),transparent 60%),
    linear-gradient(180deg,var(--red-900) 0%,var(--red-950) 100%);
  color:var(--paper);border-bottom:1px solid var(--gold-dark);
  overflow:hidden;
}
.page-hero::before{content:'';position:absolute;left:4%;right:4%;top:16px;height:1px;background:var(--gold-dark);box-shadow:0 3px 0 var(--gold-dark)}
.page-hero::after{content:'';position:absolute;left:4%;right:4%;bottom:16px;height:1px;background:var(--gold-dark);box-shadow:0 -3px 0 var(--gold-dark)}
.page-hero .eyebrow.light{color:var(--gold-light)}
.page-hero .eyebrow.light::before,.page-hero .eyebrow.light::after{color:var(--parchment-3)}
.page-hero h1{color:var(--paper)}

/* ─────────────────────────────────────────
   HOME HERO — parchment + candlelight
───────────────────────────────────────── */
.hero{
  position:relative;min-height:78vh;overflow:hidden;
  /* Hero is transparent — the body's fixed welcome-bg postcard shows straight
     through. A couple of candlelight radial glows warm the corners. */
  background:
    radial-gradient(900px 550px at 88% 20%,rgba(184,138,47,.22),transparent 60%),
    radial-gradient(800px 500px at 10% 90%,rgba(139,26,26,.10),transparent 60%),
    transparent;
  color:var(--ink);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
  padding:4.5rem 3rem 4rem;gap:3.5rem;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%,rgba(45,27,14,.04) 1px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(45,27,14,.03) 1px,transparent 2px);
  background-size:30px 30px,52px 52px;
  opacity:.6;
}
.hero::after{
  /* Gilded corner flourish — vintage menu cover feel */
  content:'';position:absolute;right:-50px;top:-50px;width:260px;height:260px;
  background:radial-gradient(circle at 30% 70%,rgba(184,138,47,.35) 0%,transparent 65%);
  pointer-events:none;border-radius:50%;
  filter:blur(10px);
}
.hero-text{position:relative;z-index:2;max-width:620px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--script);
  font-size:1.5rem;font-weight:600;letter-spacing:.01em;text-transform:none;
  color:var(--red);padding:0;
  border:none;border-radius:0;margin-bottom:.6rem;
  background:none;line-height:1;
}
.hero-eyebrow::before{content:'~';color:var(--gold);font-weight:500}
.hero-eyebrow::after{content:'~';color:var(--gold);font-weight:500}
.hero-headline{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.8rem,6vw,5.4rem);line-height:1.02;color:var(--red-900);
  margin-bottom:1.4rem;letter-spacing:-.02em;
}
.hero-headline em{display:block;font-style:italic;color:var(--red);font-weight:700}
.hero-sub{
  font-family:var(--serif-body);
  font-size:1.08rem;line-height:1.85;color:var(--brown-800);
  margin-bottom:2rem;max-width:520px;
}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero-visual{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:1.2rem;
}
.hero-logo-card{
  /* Hub City mural pattern — stylized SVG version of the Welcome to Spartanburg
     mural (the one painted on the side of Sophia's building), used as a graphic
     backdrop. The SVG is landscape (1366x760) so we use 'contain' to keep the
     whole mural visible inside this roughly-square card; a soft cream
     "spotlight" sits behind the logo so the tagline and logo stay legible. */
  background:
    radial-gradient(ellipse 60% 42% at 50% 45%,
      rgba(251,245,232,.92) 0%,
      rgba(251,245,232,.65) 45%,
      rgba(251,245,232,0) 80%),
    url('mural-bg.svg') center center / contain no-repeat,
    var(--paper);
  border:1px solid var(--line-gold);
  border-radius:3px;
  padding:2.4rem 2rem 1.8rem;
  text-align:center;
  box-shadow:0 14px 40px rgba(45,27,14,.18);
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  overflow:hidden;
}
/* Gilded corner ornaments — four inset brackets, scaled up and softened */
.hero-logo-card::before,
.hero-logo-card::after{
  content:'';position:absolute;width:26px;height:26px;
  border:1.5px solid var(--gold);
  pointer-events:none;z-index:2;
}
.hero-logo-card::before{top:10px;left:10px;border-right:0;border-bottom:0}
.hero-logo-card::after{bottom:10px;right:10px;border-left:0;border-top:0}
.hero-logo-svg,
.hero-logo-img{
  width:240px;max-width:100%;height:auto;
  display:block;margin:0 auto;
  object-fit:contain;
}
.hero-logo-tagline{
  display:inline-block;
  font-family:var(--script);
  font-size:1.55rem;
  font-weight:700;
  color:var(--red-900);
  line-height:1.15;
  letter-spacing:.01em;
  /* Cream backplate so the bolder tagline reads against the mural */
  background:rgba(251,245,232,.92);
  padding:.35rem 1.1rem;
  border-radius:2px;
  box-shadow:0 1px 0 rgba(45,27,14,.08);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

.hero-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hero-tile{
  background:var(--paper);
  border:1px solid var(--line-gold);
  border-radius:2px;padding:1rem 1.2rem;
  box-shadow:0 1px 0 rgba(45,27,14,.08);
}
.hero-tile .t-lbl{
  font-family:var(--script);font-size:1.05rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--red);
  margin-bottom:.1rem;display:block;line-height:1;
}
.hero-tile .t-val{font-family:var(--serif);font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3}
.hero-tile .t-sub{font-family:var(--serif-body);font-size:.82rem;color:var(--muted);margin-top:.1rem;font-style:italic}

/* ─────────────────────────────────────────
   SECTIONS
───────────────────────────────────────── */
section{padding:5rem 2.2rem}
.container{max-width:var(--container);margin:0 auto}

.feature-sec{background:transparent;position:relative}
.feature-sec::before,
.feature-sec::after{
  content:'';position:absolute;left:10%;right:10%;height:1px;background:var(--line-gold);
}
.feature-sec::before{top:2.5rem}
.feature-sec::after{bottom:2.5rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem;max-width:var(--container);margin:0 auto}
.feat-card{
  background:var(--paper);padding:2.2rem 1.8rem;border-radius:2px;
  box-shadow:0 2px 0 rgba(45,27,14,.10),0 10px 30px rgba(45,27,14,.08);
  border:1px solid var(--line-gold);
  transition:transform .25s,box-shadow .25s;
  position:relative;
}
.feat-card::before{
  content:'';position:absolute;inset:6px;border:1px solid var(--line-gold);
  opacity:.5;pointer-events:none;border-radius:2px;
}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 3px 0 rgba(45,27,14,.14),0 14px 40px rgba(45,27,14,.14)}
.feat-icon{
  width:56px;height:56px;border-radius:50%;
  background:transparent;color:var(--red);
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:1.1rem;
  position:relative;
}
.feat-icon::after{
  content:'';position:absolute;inset:3px;border:1px solid var(--line-gold);border-radius:50%;
}
.feat-card h3{font-family:var(--serif);font-size:1.25rem;font-weight:800;color:var(--red-900);margin-bottom:.6rem;font-style:italic}
.feat-card p{font-family:var(--serif-body);font-size:.95rem;color:var(--brown-800);line-height:1.8}

/* Two-col with image/story */
.split-sec{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  max-width:var(--container);margin:0 auto;
}
.split-sec.reverse{direction:rtl}
.split-sec.reverse>*{direction:ltr}
.split-visual{
  aspect-ratio:5/6;border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(63,6,6,.6),rgba(200,52,26,.3)),
    radial-gradient(600px 400px at 30% 20%,rgba(212,165,116,.4),transparent 60%),
    linear-gradient(180deg,var(--red-900),var(--red-950));
  box-shadow:var(--shadow-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.split-visual svg{width:52%;height:auto;opacity:.9}
.split-visual::after{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='.8' fill='%23D4A574' opacity='.2'/></svg>");
  pointer-events:none;
}
.split-text h2{font-family:var(--serif);font-weight:900;font-size:clamp(1.9rem,3.2vw,2.8rem);color:var(--ink);margin-bottom:1rem;line-height:1.1}
.split-text h2 em{font-style:italic;color:var(--red)}
.split-text p{color:var(--muted);font-size:.98rem;line-height:1.8;margin-bottom:1rem}
.split-text .btn{margin-top:.8rem}

/* Dark atmosphere section */
.atm-sec{background:var(--ink);color:#fff;padding:5.5rem 2.2rem}
.atm-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:var(--container);margin:0 auto}
.atm-sec h2{font-family:var(--serif);font-weight:900;font-size:clamp(1.9rem,3.2vw,2.8rem);color:#fff;line-height:1.1;margin-bottom:1rem}
.atm-sec h2 em{font-style:italic;color:var(--gold)}
.atm-sec p{color:rgba(255,255,255,.72);font-size:.98rem;line-height:1.8}
.feat-list{margin-top:2rem;display:flex;flex-direction:column;gap:1.1rem}
.feat-item{display:flex;align-items:flex-start;gap:1rem}
.feat-item .feat-icon{width:44px;height:44px;background:var(--red);color:#fff;font-size:1.2rem;flex-shrink:0}
.feat-item h4{font-size:1rem;color:#fff;margin-bottom:.2rem;font-weight:600}
.feat-item p{font-size:.88rem;color:rgba(255,255,255,.82);margin:0}
.atm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.atm-tile{
  border-radius:var(--radius-lg);padding:1.8rem 1.5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.atm-tile.wide{grid-column:1/-1}
.atm-tile.red{background:linear-gradient(135deg,var(--red),var(--red-800))}
.atm-tile.dark{background:#2A110A;border:1px solid rgba(212,165,116,.2)}
.atm-tile.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--red-900)}
.atm-tile .big{font-family:var(--serif);font-size:2rem;font-weight:900;color:#fff;line-height:1}
.atm-tile.gold .big{color:var(--red-900)}
.atm-tile .sml{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.atm-tile.gold .sml{color:var(--red-800)}
.atm-tile p{font-size:.88rem;color:rgba(255,255,255,.82);margin:0;line-height:1.55}
.atm-tile.gold p{color:var(--red-900)}

/* Reviews — postcard-style cards on parchment (body bg shows through) */
.reviews-sec{background:transparent;position:relative;border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.8rem;max-width:var(--container);margin:0 auto}
.rev-card{
  background:var(--paper);border-radius:2px;padding:2.2rem 1.9rem 1.9rem;
  box-shadow:0 2px 0 rgba(45,27,14,.12),0 14px 30px rgba(45,27,14,.09);
  position:relative;
  border:1px solid var(--line-gold);
}
.rev-card::before{
  /* Inner gilded frame */
  content:'';position:absolute;inset:7px;border:1px solid var(--line-gold);
  opacity:.55;pointer-events:none;
}
.rev-card::after{
  /* Decorative opening quote */
  content:'\201C';position:absolute;top:-6px;left:16px;
  font-family:var(--serif);font-size:4rem;color:var(--red);line-height:1;
  font-style:italic;opacity:.85;
  background:var(--paper);padding:0 .4rem;
}
.stars{color:var(--gold-dark);font-size:1rem;letter-spacing:.18em;margin-bottom:1rem;position:relative;z-index:1}
.rev-text{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--ink-2);line-height:1.7;margin-bottom:1.2rem;position:relative;z-index:1}
.reviewer{font-family:var(--script);font-size:1.3rem;color:var(--red-900);font-weight:600;line-height:1}
.rev-src{font-family:var(--serif-body);font-size:.75rem;color:var(--muted);margin-left:.5rem;text-transform:uppercase;letter-spacing:.14em;font-style:italic}

/* Info bar — dark wine with gilded dividers */
.info-bar{
  background:var(--red-950);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--gold-dark);
  border-bottom:1px solid var(--gold-dark);
}
.info-block{padding:2.4rem 1.8rem;border-right:1px solid rgba(184,138,47,.25);text-align:center}
.info-block:last-child{border-right:none}
.info-lbl{font-family:var(--script);font-size:1.15rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold-light);margin-bottom:.5rem}
.info-val{font-family:var(--serif-body);font-size:.94rem;color:var(--paper);line-height:1.75;font-weight:400}
.info-val strong{font-weight:600;color:var(--paper)}
.info-val a{color:var(--paper);border-bottom:1px dashed rgba(244,234,213,.4)}
.info-val a:hover{color:var(--gold-light);border-color:var(--gold-light)}

/* CTA band — deep wine with gilded double frame */
.cta-band{
  background:
    radial-gradient(900px 500px at 50% 0%,rgba(184,138,47,.22),transparent 60%),
    linear-gradient(180deg,var(--red-900) 0%,var(--red-950) 100%);
  color:var(--paper);text-align:center;padding:5.5rem 2.2rem;
  position:relative;
}
.cta-band::before,
.cta-band::after{
  content:'';position:absolute;left:4%;right:4%;height:1px;background:var(--gold-dark);
}
.cta-band::before{top:18px;box-shadow:0 3px 0 var(--gold-dark)}
.cta-band::after{bottom:18px;box-shadow:0 -3px 0 var(--gold-dark)}
.cta-band .eyebrow.light{display:inline-block}
.cta-band .display-sm em{color:var(--gold-light)}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* Gift section */
.gift-section{
  background:transparent;text-align:center;padding:4rem 2.2rem;
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-gold);
}
.gift-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ─────────────────────────────────────────
   MENU PAGE — trattoria menu on parchment
───────────────────────────────────────── */
.menu-subnav{
  position:sticky;top:72px;z-index:40;
  background:var(--parchment-2);padding:0 1.5rem;
  display:flex;gap:0;
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-gold);
  overflow-x:auto;box-shadow:0 2px 8px rgba(45,27,14,.08);
}
.msnav-btn{
  padding:1rem 1.3rem;border:none;background:transparent;cursor:pointer;
  font-family:var(--serif-body);font-size:.85rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brown-800);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .2s;white-space:nowrap;
}
.msnav-btn:hover{color:var(--red)}
.msnav-btn.active{color:var(--red-900);border-bottom-color:var(--red);font-style:italic}

.menu-body{
  padding:4rem 2.2rem;max-width:980px;margin:0 auto;
  background:var(--paper);
  border-left:1px solid var(--line-gold);
  border-right:1px solid var(--line-gold);
  position:relative;
}
.menu-body::before,.menu-body::after{
  content:'';position:absolute;left:3%;right:3%;height:1px;background:var(--line-gold);
}
.menu-body::before{top:14px;box-shadow:0 3px 0 var(--line-gold)}
.menu-body::after{bottom:14px;box-shadow:0 -3px 0 var(--line-gold)}
.msec{display:none;animation:fadeIn .3s ease}
.msec.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Section title — centered serif with flourish underneath */
.msec-title{
  font-family:var(--serif);font-size:clamp(2rem,3.3vw,2.6rem);font-weight:800;
  color:var(--red-900);margin-bottom:.3rem;position:relative;padding-bottom:1rem;
  text-align:center;font-style:italic;letter-spacing:-.005em;
}
.msec-title::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:.3rem;
  width:70px;height:1px;background:var(--gold);
  box-shadow:0 3px 0 var(--gold);
}
.msec-note{
  font-family:var(--serif-body);
  font-size:.96rem;color:var(--brown-800);margin:1.2rem auto 2.6rem;
  font-style:italic;line-height:1.8;max-width:640px;text-align:center;
}
.msec-note a{color:var(--red);border-bottom:1px dashed var(--red)}

.mi-list{display:flex;flex-direction:column}
.mi{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:1.3rem 0;gap:1.6rem;
  transition:background .2s,padding .2s;
  position:relative;
}
/* dotted leader line between item and price — classic menu touch */
.mi::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  border-bottom:1px dotted var(--line);
  opacity:.7;
}
.mi:hover{background:rgba(184,138,47,.06);padding-left:.9rem;padding-right:.9rem}
.mi:last-child::after{display:none}
.mi-info{flex:1}
.mi-name{font-family:var(--serif);font-size:1.18rem;font-weight:700;color:var(--red-900);margin-bottom:.35rem;font-style:italic}
.mi-desc{font-family:var(--serif-body);font-size:.93rem;color:var(--brown-800);line-height:1.7}
.mi-price{
  font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--red);
  white-space:nowrap;padding-top:2px;font-style:italic;
}

.badge{
  display:inline-block;font-family:var(--serif-body);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.18rem .5rem;border-radius:2px;margin-left:.5rem;vertical-align:middle;
  border:1px solid currentColor;
}
.b-veg{color:#4B6B3C;background:rgba(75,107,60,.08)}
.b-spicy{color:#9C3A1F;background:rgba(156,58,31,.08)}
.b-gf{color:#6B4A82;background:rgba(107,74,130,.08)}

.mi-note{
  background:var(--red-950);
  color:var(--paper);padding:1.5rem 1.7rem;border-radius:2px;
  margin:0 0 2.4rem;font-family:var(--serif-body);font-size:.95rem;line-height:1.8;
  border-left:3px solid var(--gold);font-style:italic;
  position:relative;
}
.mi-note::before{
  content:'';position:absolute;inset:6px 6px 6px 3px;
  border:1px solid rgba(184,138,47,.3);pointer-events:none;border-left:none;
}
.mi-note strong{color:var(--gold-light);font-style:normal;font-weight:600}

.menu-order-cta{
  margin-top:2.6rem;padding:2.2rem;background:var(--parchment-2);
  border-radius:2px;text-align:center;
  border:1px solid var(--line-gold);
  position:relative;
}
.menu-order-cta::before{content:'';position:absolute;inset:6px;border:1px solid var(--line-gold);opacity:.5;pointer-events:none}
.menu-order-cta p{font-family:var(--serif-body);font-size:.98rem;color:var(--brown-800);margin-bottom:1.2rem;font-style:italic}

/* ─────────────────────────────────────────
   ORDER / CATERING / CAREERS — paper cards, no rainbow stripes
───────────────────────────────────────── */
.order-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.6rem;max-width:var(--container);margin:2.5rem auto 0;
}
.order-card{
  background:var(--paper);border-radius:2px;padding:2rem 1.7rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  border:1px solid var(--line-gold);
  box-shadow:0 2px 0 rgba(45,27,14,.10),0 10px 28px rgba(45,27,14,.08);
  transition:transform .25s,box-shadow .25s;position:relative;
}
.order-card::before{content:'';position:absolute;inset:6px;border:1px solid var(--line-gold);opacity:.5;pointer-events:none}
.order-card:hover{transform:translateY(-4px);box-shadow:0 3px 0 rgba(45,27,14,.14),0 14px 38px rgba(45,27,14,.14)}
.order-card:nth-child(2),.order-card:nth-child(3){border-color:var(--line-gold)}
.order-card-icon{font-size:2.4rem}
.order-card h3{font-family:var(--serif);font-size:1.35rem;font-weight:800;color:var(--red-900);font-style:italic}
.order-card p{font-family:var(--serif-body);font-size:.95rem;color:var(--brown-800);line-height:1.75;flex:1}
.order-card .btn{width:100%}

.catering-features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;max-width:var(--container);margin:2.5rem auto 0;
}
.cat-feat{
  background:var(--paper);border-radius:2px;padding:2rem 1.7rem;
  border:1px solid var(--line-gold);
  box-shadow:0 2px 0 rgba(45,27,14,.1),0 10px 28px rgba(45,27,14,.08);
  transition:transform .2s;position:relative;
}
.cat-feat::before{content:'';position:absolute;inset:6px;border:1px solid var(--line-gold);opacity:.5;pointer-events:none}
.cat-feat:hover{transform:translateY(-3px)}
.cat-feat:nth-child(1),.cat-feat:nth-child(2),
.cat-feat:nth-child(3),.cat-feat:nth-child(4){border-color:var(--line-gold)}
.cat-feat-icon{font-size:2rem;margin-bottom:.8rem;color:var(--red)}
.cat-feat h3{font-family:var(--serif);font-size:1.2rem;font-weight:800;color:var(--red-900);margin-bottom:.5rem;font-style:italic}
.cat-feat p{font-family:var(--serif-body);font-size:.93rem;color:var(--brown-800);line-height:1.75}

.cat-menu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;margin-top:2rem;
}
.cat-menu-card{
  background:var(--paper);border-radius:2px;padding:1.8rem;
  border:1px solid var(--line-gold);
  border-left:3px solid var(--red);
  box-shadow:0 1px 0 rgba(45,27,14,.08);
}
.cat-menu-card h4{font-family:var(--serif);font-size:1.2rem;font-weight:800;color:var(--red-900);margin-bottom:.9rem;font-style:italic}
.cat-menu-card ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.cat-menu-card li{font-family:var(--serif-body);font-size:.95rem;color:var(--brown-800);padding-left:1rem;position:relative;line-height:1.65}
.cat-menu-card li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--gold)}

.process-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.2rem;margin-top:2rem;
}
.step{
  background:var(--paper);border-radius:2px;padding:2rem 1.5rem;
  display:flex;flex-direction:column;gap:.7rem;position:relative;
  border:1px solid var(--line-gold);
  box-shadow:0 2px 0 rgba(45,27,14,.1);
}
.step-num{
  font-family:var(--serif);font-size:2.6rem;font-weight:900;color:var(--red);
  line-height:1;font-style:italic;
}
.step h4{font-family:var(--serif);font-size:1.1rem;color:var(--red-900);margin-bottom:.15rem;font-weight:700;font-style:italic}
.step p{font-family:var(--serif-body);font-size:.92rem;color:var(--brown-800);line-height:1.7}

/* ─────────────────────────────────────────
   GALLERY
───────────────────────────────────────── */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;max-width:var(--container);margin:0 auto;
}
.gallery-item{
  aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  position:relative;box-shadow:var(--shadow-1);cursor:pointer;
  transition:transform .3s;
}
.gallery-item:hover{transform:translateY(-4px) scale(1.01)}
.gallery-item.wide{grid-column:span 2;aspect-ratio:8/5}
.gallery-item .gi-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--red-900),var(--red-950));
}
.gallery-item .gi-bg.g1{background:linear-gradient(135deg,#5A0D0D,#2A0404),radial-gradient(circle at 30% 40%,rgba(212,165,116,.3),transparent 60%)}
.gallery-item .gi-bg.g2{background:linear-gradient(135deg,#9A1B1B,#5A0D0D)}
.gallery-item .gi-bg.g3{background:linear-gradient(135deg,var(--red-800),#2A110A)}
.gallery-item .gi-bg.g4{background:linear-gradient(135deg,#7C1414,#3F0606)}
.gallery-item .gi-bg.g5{background:linear-gradient(135deg,var(--red),var(--red-900))}
.gallery-item .gi-content{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;color:var(--gold);padding:1.5rem;text-align:center;
}
.gallery-item .gi-emoji{font-size:3.6rem;margin-bottom:.5rem}
.gallery-item .gi-label{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:1.1rem;color:#fff;letter-spacing:.03em;
}
.gallery-item .gi-caption{
  font-size:.75rem;color:rgba(255,255,255,.6);margin-top:.2rem;
  text-transform:uppercase;letter-spacing:.1em;
}
.gallery-item::after{
  content:'';position:absolute;inset:0;
  pointer-events:none;
}

/* ─────────────────────────────────────────
   TWO-COLUMN FORMS (contact / catering / careers)
───────────────────────────────────────── */
.two-col{
  padding:5rem 2.2rem;max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start;
}
.col-info .h-section,.col-form .h-section{margin-bottom:.5rem}
.col-info .p-lede{font-size:.95rem;margin-bottom:1.6rem}

.c-method{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.c-method:last-of-type{border-bottom:none}
.c-icon{
  width:46px;height:46px;flex-shrink:0;
  background:var(--red-100);color:var(--red);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.c-method h4{font-size:.82rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}
.c-method a,.c-method p{font-size:.98rem;color:var(--ink);line-height:1.55;display:block}
.c-method a{font-weight:500}
.c-method a:hover{color:var(--red)}
.c-method .c-note{font-size:.82rem;color:var(--muted);margin-top:.2rem;font-weight:400}

.callout{
  background:linear-gradient(135deg,var(--red-900),var(--red-800));
  color:#fff;padding:1.6rem 1.6rem;border-radius:var(--radius-lg);
  margin-top:2rem;
}
.callout h4{font-family:var(--serif);font-size:1.1rem;color:#fff;margin-bottom:.5rem}
.callout p{font-size:.92rem;color:rgba(255,255,255,.85);margin-bottom:1rem;line-height:1.6}
.callout-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.callout .btn-red-sm{background:var(--gold);color:var(--red-900)}
.callout .btn-red-sm:hover{background:#fff}
.callout .btn-outline-red-sm{border-color:rgba(255,255,255,.5);color:#fff}
.callout .btn-outline-red-sm:hover{background:#fff;color:var(--red-900);border-color:#fff}

/* ─────────────────────────────────────────
   FORM STYLING
───────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}
.f-group label{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.f-group input,.f-group select,.f-group textarea{
  padding:.85rem 1rem;
  border:1.5px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:#fff;transition:all .2s;-webkit-appearance:none;
  width:100%;
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-100);
}
.f-group textarea{resize:vertical;min-height:120px}

.f-submit{
  background:var(--red);color:#fff;border:none;padding:1rem 2rem;
  border-radius:999px;font-family:var(--sans);font-size:.92rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:all .2s;width:100%;margin-top:.5rem;
}
.f-submit:hover{background:var(--red-800);transform:translateY(-1px);box-shadow:0 8px 18px rgba(200,52,26,.3)}
.f-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}

.f-status{
  display:none;padding:1rem 1.2rem;border-radius:var(--radius);
  font-size:.9rem;margin-top:1rem;line-height:1.6;
}
.f-status.ok{display:block;background:#e8f5e9;border:1.5px solid #2E7D32;color:#1B5E20}
.f-status.err{display:block;background:#fde8e8;border:1.5px solid #c0392b;color:#7b0000}

.form-note{font-size:.78rem;color:var(--muted);margin-top:.9rem;line-height:1.6}
.form-sub{font-size:.92rem;color:var(--muted);margin-bottom:1.5rem;margin-top:-.4rem;line-height:1.6}

.upload-area{
  border:2px dashed var(--red-200);border-radius:var(--radius-lg);
  padding:1.8rem;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--red-100);
}
.upload-area:hover,.upload-area.has-file{border-color:var(--red);background:var(--red-100)}
.upload-icon{font-size:1.9rem;margin-bottom:.4rem}
.upload-txt{font-size:.88rem;color:var(--muted);line-height:1.55}
.upload-txt strong{color:var(--red)}
#file-name{font-size:.82rem;color:var(--red);font-weight:600;margin-top:.5rem;min-height:1.1em}
#resume-input{display:none}

.perks{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
.perks li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--ink);line-height:1.5}
.perk-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ─────────────────────────────────────────
   LEGAL PAGE
───────────────────────────────────────── */
.legal-body{max-width:780px;margin:0 auto;padding:4rem 2.2rem}
.legal-body h2,.legal-body h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:2.4rem 0 .7rem}
.legal-body h2{font-size:1.5rem}
.legal-body h3{font-size:1.2rem;color:var(--red)}
.legal-body h2:first-child,.legal-body h3:first-child{margin-top:0}
.legal-body p{font-size:.95rem;color:var(--muted);line-height:1.85;margin-bottom:1rem}
.legal-body ul{list-style:none;padding:0;margin:.5rem 0 1.2rem}
.legal-body ul li{font-size:.92rem;color:var(--muted);line-height:1.8;padding-left:1.2rem;position:relative}
.legal-body ul li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.legal-divider{border:none;border-top:1px solid var(--line);margin:2.4rem 0}

/* ─────────────────────────────────────────
   MAP SECTION
───────────────────────────────────────── */
.map-sec{background:var(--cream-2);padding:4rem 2.2rem}
.map-wrap{
  max-width:var(--container);margin:2rem auto 0;
  aspect-ratio:16/7;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-2);border:2px solid var(--gold);
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.82);padding:4rem 2.2rem 1.5rem;
}
.footer-inner{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.7;max-width:320px}
.footer-logo{width:80px;height:auto;color:var(--gold);margin-bottom:1rem;display:block}
.footer-inner h5{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer-inner ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-inner ul a,.footer-addr,.footer-addr a{font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.75;transition:color .2s}
.footer-inner ul a:hover,.footer-addr a:hover{color:var(--gold)}
.footer-addr a{border-bottom:1px dashed rgba(212,165,116,.4)}
.footer-bottom{
  max-width:var(--container);margin:1.5rem auto 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  font-size:.82rem;color:rgba(255,255,255,.65);
}
.footer-bottom a{color:rgba(255,255,255,.8)}
.footer-bottom a:hover{color:var(--gold)}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;padding:4rem 1.5rem 3.5rem;gap:2.5rem}
  .split-sec,.atm-inner{grid-template-columns:1fr;gap:2.5rem}
  .split-visual{aspect-ratio:4/3;max-height:420px}
  .two-col{grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 1.2rem}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:768px){
  .site-nav{padding:.9rem 1.2rem}
  .nav-toggle{display:block}
  /* Mobile menu: paper-cream background so the dark brown link text
     stays readable. Gold accent border + wine-red active state. */
  .nav-links{
    display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);padding:1.1rem 1.6rem;
    border-top:1px solid var(--line-gold);
    border-bottom:3px solid var(--gold);
    gap:1rem;box-shadow:0 10px 24px rgba(45,27,14,.22);
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:.7rem .25rem;
    color:var(--brown-900);
    border-bottom:1px solid var(--line-gold);
    font-size:.9rem;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-links a:hover,
  .nav-links a.current{color:var(--red-900)}
  /* Reserve CTA stays solid wine-red — override the border inherit */
  .nav-links .nav-cta{
    background:var(--red);color:var(--paper)!important;
    border:1px solid var(--red-900);
    padding:.7rem 1rem;text-align:center;
    margin-top:.4rem;
  }
  .nav-logo-text{font-size:1.2rem}
  .hero::after{display:none}
  .hero-info-grid{grid-template-columns:1fr 1fr}
  .atm-grid{grid-template-columns:1fr}
  .atm-tile.wide{grid-column:1}
  section{padding:3.5rem 1.2rem}
  .f-row{grid-template-columns:1fr}
  .info-block{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu-subnav{padding:0 .8rem;top:60px}
  .menu-body{padding:2.5rem 1.2rem}
  .pg-head{padding:3.5rem 1.2rem 3rem}
  .footer-inner{grid-template-columns:1fr;gap:1.8rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .mi{flex-direction:row;gap:.9rem}
  .gallery-item.wide{grid-column:span 1;aspect-ratio:4/5}
  .stripe{gap:1rem;padding:.55rem 1rem}
  .stripe-item{font-size:.72rem}
}
@media (max-width:480px){
  .display{font-size:clamp(2rem,8vw,2.8rem)}
  .hero-headline{font-size:clamp(2.2rem,9vw,3rem)}
  .hero-info-grid{grid-template-columns:1fr}
  .social-bar{padding:.6rem 1rem;gap:.5rem}
  .social-link{font-size:.7rem;padding:.35rem .7rem}
  .quick-link{font-size:.7rem;padding:.4rem .8rem}
}

/* =====================================================================
   ADDITIONAL LAYOUT PRIMITIVES  (menu / order / catering / gallery / careers / legal)
   ===================================================================== */

/* Page hero — used by inner pages */
.page-hero{
  position:relative;
  padding:5rem 2.2rem 4.2rem;
  background:
    radial-gradient(1000px 500px at 80% -20%,rgba(212,165,116,.35),transparent 60%),
    radial-gradient(800px 400px at 10% 120%,rgba(255,255,255,.08),transparent 50%),
    linear-gradient(135deg,var(--red-800),var(--red-950));
  color:#fff;overflow:hidden;text-align:center;
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='30' cy='30' r='1' fill='%23ffffff' opacity='.06'/></svg>");
}
.page-hero > *{position:relative;z-index:1}
.page-hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}
.display-md{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;
  color:var(--ink);margin-bottom:.6rem;
}
.display-md.light{color:#fff}

/* Section wrapper */
.section{padding:4.5rem 2.2rem;max-width:var(--container);margin:0 auto}
.section-alt{background:rgba(251,244,227,.55);max-width:none;margin:0;padding:4.5rem 2.2rem;border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.section-head{text-align:center;max-width:720px;margin:0 auto 2.6rem}
.section-head .eyebrow{display:inline-block}

/* Feature cards — new ".feature-card" naming (preserves old .feat-card) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;max-width:var(--container);margin:0 auto}
.feature-card{
  background:#fff;border-radius:var(--radius-lg);padding:2rem 1.8rem;
  box-shadow:var(--shadow-1);text-align:center;transition:all .25s;
  border-top:3px solid var(--red);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.feature-card h3{font-family:var(--serif);font-size:1.18rem;font-weight:700;color:var(--ink);margin-bottom:.6rem}
.feature-card p{font-size:.92rem;color:var(--muted);line-height:1.7}
.fc-icon{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-800));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.55rem;margin:0 auto 1rem;
}

/* Menu cards — new ".menu-card" grid used across menu/catering/careers pages */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;max-width:var(--container);margin:0 auto}
.menu-card{
  background:#fff;border-radius:var(--radius-lg);padding:1.5rem 1.6rem;
  border:1px solid var(--line);border-left:3px solid var(--red);
  transition:all .25s;
}
.menu-card:hover{box-shadow:var(--shadow-1);transform:translateY(-2px);border-left-color:var(--gold)}
.mc-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.mc-name{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.3}
.mc-price{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--red);white-space:nowrap}
.mc-desc{font-size:.9rem;color:var(--muted);line-height:1.6}
.mc-tag{
  display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#6B21A8;
  background:#f3e8ff;padding:.15rem .45rem;border-radius:4px;margin-left:.3rem;vertical-align:middle;
}

/* Order page — hero card + delivery grid */
.order-hero{
  max-width:1000px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);padding:3rem 2.5rem;display:grid;
  grid-template-columns:1fr auto;gap:2.2rem;align-items:center;
  border-top:5px solid var(--red);
}
.order-hero-title{font-family:var(--serif);font-size:1.6rem;font-weight:800;color:var(--ink);margin-bottom:.6rem}
.order-hero-text p{color:var(--muted);font-size:.96rem;line-height:1.7;margin-bottom:1.4rem}
.order-hero-badge{
  background:linear-gradient(135deg,var(--red),var(--red-800));color:#fff;
  border-radius:var(--radius-lg);padding:1.6rem 1.4rem;text-align:center;min-width:170px;
}
.oh-emoji{font-size:2.4rem;display:block;margin-bottom:.5rem}
.oh-label{font-size:.85rem;line-height:1.5}
.oh-label strong{font-family:var(--serif);font-size:1.15rem;font-weight:800;display:block}

.delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;max-width:var(--container);margin:0 auto}
.delivery-card{
  background:#fff;border-radius:var(--radius-lg);padding:2rem 1.8rem;
  box-shadow:var(--shadow-1);text-align:center;transition:all .25s;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  border-bottom:3px solid var(--red);
}
.delivery-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.dc-badge{
  width:60px;height:60px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:1.3rem;letter-spacing:.05em;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.delivery-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:800;color:var(--ink)}
.delivery-card p{font-size:.92rem;color:var(--muted);line-height:1.6;flex:1}
.dc-link{
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-top:.4rem;
}
.delivery-card:hover .dc-link{color:var(--red-800)}

/* Steps grid — new naming used by order.html / catering.html */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;max-width:960px;margin:0 auto}
.step-card{
  background:#fff;border-radius:var(--radius-lg);padding:1.8rem 1.6rem;
  border:1px solid var(--line);text-align:center;
}
.step-card .step-num{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-800));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:1.4rem;margin:0 auto 1rem;
}
.step-card h4{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.5rem}
.step-card p{font-size:.88rem;color:var(--muted);line-height:1.65}

/* Contact form — new ".contact-form" / ".field-row" / ".field" naming */
.contact-form{max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:2.2rem 2rem;border-top:4px solid var(--red)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field .req{color:var(--red);margin-left:.15rem}
.field input,.field select,.field textarea{
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:#fff;transition:all .2s;-webkit-appearance:none;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-100);
}
.field textarea{resize:vertical;min-height:120px}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.form-actions .form-note{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0}
.upload-label{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.1rem}
.upload-label strong{color:var(--red);font-size:.92rem}

/* Gallery (CSS gradient tiles) */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;max-width:var(--container);margin:0 auto;
}
.ggrid-item{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-1);transition:all .25s;
  display:flex;align-items:flex-end;color:#fff;
}
.ggrid-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.ggrid-item.g-lg{grid-column:span 2;aspect-ratio:8/5}
.ggrid-item figcaption{
  position:relative;z-index:2;width:100%;padding:1rem 1.2rem;
  background:transparent;
  font-family:var(--serif);font-style:italic;font-weight:700;font-size:1rem;
  text-shadow:
    0 1px 3px rgba(0,0,0,.85),
    0 2px 14px rgba(0,0,0,.65);
}
.ggrid-item::before{
  content:'';position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
}
/* Tile backgrounds: real photo layered on top of gradient fallback.
   If the .jpg file is missing, the browser silently falls back to the gradient. */
.tile-dining-1::before   {background:url('dining-3.jpg')              center/cover no-repeat,linear-gradient(135deg,#5A0D0D,#2A0404)}
.tile-dining-2::before   {background:url('red-wine-cheers.jpg')       center/cover no-repeat,linear-gradient(135deg,#9A1B1B,#5A0D0D)}
.tile-dining-3::before   {background:url('mimosa-bruschetta.jpg')        center/cover no-repeat,linear-gradient(135deg,var(--red-800),#2A110A)}
.tile-bar-1::before      {background:url('bar-2.jpg')                 center/cover no-repeat,linear-gradient(135deg,#7C1414,#3F0606)}
.tile-bar-2::before      {background:url('red-wine-glass.jpg')        center/cover no-repeat,linear-gradient(135deg,var(--red),var(--red-900))}
.tile-mural-night::before{background:url('sign-864-mural.jpg')        center/cover no-repeat,linear-gradient(135deg,var(--red-900),#1A0A06)}
.tile-storefront::before {background:url('storefront.jpg')            center/cover no-repeat,linear-gradient(135deg,var(--salmon),var(--cream-2))}
.tile-menu::before       {background:url('menu-detail.jpg')           center/cover no-repeat,linear-gradient(135deg,#7C1414,#3F0606)}

/* Food */
.tile-food-1::before     {background:url('italian-antipasto.jpg')      center/cover no-repeat,linear-gradient(135deg,#D94327,#7C1414)}
.tile-food-2::before     {background:url('chicken-parmigiana.jpg')     center/cover no-repeat,linear-gradient(135deg,#B7874E,#7C1414)}
.tile-food-3::before     {background:url('meatballs-marinara.jpg')     center/cover no-repeat,linear-gradient(135deg,#C8341A,#3F0606)}
.tile-food-4::before     {background:url('lasagna-wine-patio.jpg')                center/cover no-repeat,linear-gradient(135deg,#9A1B1B,#3F0606)}
.tile-food-5::before     {background:url('penne-pomodoro-burrata.jpg') center/cover no-repeat,linear-gradient(135deg,#D4A574,#7C1414)}
.tile-food-6::before     {background:url('lobster-ravioli.jpg')        center/cover no-repeat,linear-gradient(135deg,#9A1B1B,#3F0606)}
.tile-food-7::before     {background:url('salmon.jpg')                 center/cover no-repeat,linear-gradient(135deg,#7C1414,#3F0606)}
.tile-food-8::before     {background:url('garlic-bread.jpg')           center/cover no-repeat,linear-gradient(135deg,#D94327,#7C1414)}
.tile-food-9::before     {background:url('sophias-salad.jpg')          center/cover no-repeat,linear-gradient(135deg,#5A8C5A,#3F0606)}
.tile-food-10::before    {background:url('bread-service.jpg')          center/cover no-repeat,linear-gradient(135deg,#B7874E,#7C1414)}
.tile-food-11::before    {background:url('ribeye-steak.jpg')           center/cover no-repeat,linear-gradient(135deg,#5A0D0D,#3F0606)}
.tile-food-12::before    {background:url('shrimp-scampi.jpg')          center/cover no-repeat,linear-gradient(135deg,#D4A574,#7C1414)}
.tile-food-13::before    {background:url('penne-vodka.jpg')            center/cover no-repeat,linear-gradient(135deg,#D94327,#7C1414)}
.tile-food-14::before    {background:url('rigatoni-al-forno.jpg')      center/cover no-repeat,linear-gradient(135deg,#9A1B1B,#3F0606)}

/* Dessert tiles — kept available in case we re-add a dessert gallery section */
.tile-dessert-1::before  {background:url('cannoli.jpg')                center/cover no-repeat,linear-gradient(135deg,#3F0606,#1A0A06)}
.tile-dessert-2::before  {background:url('chocolate-souffle.jpg')      center/cover no-repeat,linear-gradient(135deg,#7C1414,#D4A574)}
.tile-dessert-3::before  {background:url('chocolate-mousse.jpg')       center/cover no-repeat,linear-gradient(135deg,#5A0D0D,#B7874E)}

/* Events / atmosphere */
.tile-events-1::before   {background:url('bread-service.jpg')          center/cover no-repeat,linear-gradient(135deg,var(--red-950),#7C1414)}
.tile-events-2::before   {background:url('patio-diners.jpg')           center/cover no-repeat,linear-gradient(135deg,#7C1414,#D4A574)}

/* New: storefront / signage */
.tile-sign-sky::before    {background:url('sign-sky.jpg')              center/cover no-repeat,linear-gradient(135deg,#7C1414,#D94327)}
.tile-sign-mural::before  {background:url('sign-864-mural.jpg')        center/cover no-repeat,linear-gradient(135deg,#D94327,#7C1414)}
.tile-sign-closeup::before{background:url('sign-closeup.jpg')          center/cover no-repeat,linear-gradient(135deg,#7C1414,#3F0606)}
.tile-window-decal::before{background:url('window-decal.jpg')          center/cover no-repeat,linear-gradient(135deg,#5A0D0D,#7C1414)}

/* New: patio / outdoor dining */
.tile-patio-diners::before  {background:url('patio-diners.jpg')        center/cover no-repeat,linear-gradient(135deg,#B7874E,#7C1414)}
.tile-salmon-patio::before  {background:url('salmon.jpg')              center/cover no-repeat,linear-gradient(135deg,#D94327,#7C1414)}
.tile-lasagna-wine::before  {background:url('lasagna-wine-patio.jpg')  center/cover no-repeat,linear-gradient(135deg,#5A0D0D,#9A1B1B)}
.tile-mimosa::before        {background:url('mimosa-salmon-patio.jpg') center/cover no-repeat,linear-gradient(135deg,#D4A574,#B7874E)}
.tile-wine-white-patio::before{background:url('wine-white-patio.jpg')  center/cover no-repeat,linear-gradient(135deg,#D4A574,#7C1414)}

/* Menu page thumbnails */
.menu-card .mc-img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Legal page (new wrap class) */
.legal-wrap{max-width:820px;margin:0 auto;padding:3rem 2.2rem 4rem}
.legal-block{margin-bottom:2.4rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal-block:last-child{border-bottom:none}
.legal-h{font-family:var(--serif);font-size:1.6rem;font-weight:800;color:var(--ink);margin-bottom:.9rem}
.legal-block h3{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--red);margin:1.3rem 0 .5rem}
.legal-block p{font-size:.95rem;color:var(--muted);line-height:1.85;margin-bottom:.9rem}
.legal-block a{color:var(--red);border-bottom:1px dashed var(--red)}
.legal-block a:hover{color:var(--red-800)}

.note-small{font-size:.8rem;color:var(--muted);font-style:italic;margin-top:1.2rem}
.note-small.center{text-align:center;display:block}

/* Button sizing for content areas where the red button should have real padding */
.contact-form .btn{padding:1rem 2rem}

@media (max-width:768px){
  .order-hero{grid-template-columns:1fr;text-align:center;padding:2.2rem 1.6rem}
  .order-hero-badge{margin:0 auto}
  .field-row{grid-template-columns:1fr}
  .ggrid-item.g-lg{grid-column:span 1;aspect-ratio:4/5}
  .contact-form{padding:1.6rem 1.2rem}
  .section{padding:3rem 1.2rem}
  .section-alt{padding:3rem 1.2rem}
  .legal-wrap{padding:2rem 1.2rem 3rem}
}

/* =====================================================================
   LOGO IMAGE — Sophia's original logo (red circle + fork + script)
   The file lives at assets/logo.png — we render it as-is, unchanged.
   ===================================================================== */
.logo-img{display:block;max-width:100%;height:auto}

/* Nav: paper-cream bar. Logo PNG is already transparent, just size it. */
.nav-logo .logo-img,
.nav-logo .logo-mark{
  width:56px;height:56px;
  object-fit:contain;
}

/* Hero card — large, centered. Transparent PNG renders cleanly on paper. */
.hero-logo-img{
  width:260px;max-width:100%;height:auto;
  object-fit:contain;
  display:block;margin:0 auto;
}

/* Story section (if used) */
.split-visual .logo-img{
  width:60%;aspect-ratio:1/1;
  object-fit:contain;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.35));
  position:relative;z-index:2;
}

/* Footer — dark ink background. Transparent PNG drops in cleanly;
   the wine-red mark reads warm against the dark footer. */
img.footer-logo{
  width:120px;height:auto;
  object-fit:contain;
  margin-bottom:1rem;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

/* =====================================================================
   HUB CITY MURAL — pattern inspired by the "Welcome to 864 Hub City"
   mural next door to Sophia's. Warm block grid framed in red.
   ===================================================================== */
:root{
  --hc-cream:#F3E7C8;
  --hc-cream-2:#F8EFD6;
  --hc-salmon:#E9BFB5;
  --hc-pink:#F2D5CC;
  --hc-pink-2:#F8DDD5;
  --hc-blue:#B9CFDC;
  --hc-blue-2:#A9C3D4;
  --hc-mustard:#E8C875;
  --hc-mustard-2:#F0D89A;
  --hc-cocoa:#6B5143;
  --hc-rust:#C94A3A;
}

/* Thin decorative stripe using the mural colors */
.mural-stripe{
  display:flex;height:10px;width:100%;
}
.mural-stripe span{flex:1}
.mural-stripe span:nth-child(1){background:var(--hc-rust)}
.mural-stripe span:nth-child(2){background:var(--hc-mustard)}
.mural-stripe span:nth-child(3){background:var(--hc-cream)}
.mural-stripe span:nth-child(4){background:var(--hc-blue)}
.mural-stripe span:nth-child(5){background:var(--hc-salmon)}
.mural-stripe span:nth-child(6){background:var(--hc-cocoa)}
.mural-stripe span:nth-child(7){background:var(--hc-pink)}

/* Mural-wall block: a decorative color-block panel like the mural */
.mural-wall{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:6px;
  padding:10px;
  background:var(--hc-rust);
  border-radius:var(--radius-lg);
  aspect-ratio:4/3;
  box-shadow:var(--shadow-2);
  position:relative;
  overflow:hidden;
}
.mural-wall .mb{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-weight:800;
  color:var(--ink);
  text-align:center;
  padding:.4rem;
  overflow:hidden;
}
.mural-wall .mb small{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.62rem;
  color:var(--ink-2);
  opacity:.75;
}
.mural-wall .mb .big{
  font-size:clamp(.95rem,1.6vw,1.35rem);
  line-height:1.1;
  font-style:italic;
}
/* Mural tile colors & spans */
.mb-1{background:var(--hc-pink);grid-column:span 2}
.mb-2{background:var(--hc-cocoa);color:#fff}
.mb-3{background:var(--hc-cream)}
.mb-4{background:var(--hc-blue)}
.mb-5{background:var(--hc-cream-2);grid-column:span 2;grid-row:span 2}
.mb-6{background:var(--hc-salmon)}
.mb-7{background:var(--hc-mustard)}
.mb-8{background:var(--hc-pink-2)}
.mb-9{background:var(--hc-blue-2)}

/* Penny-farthing nod (the mural's bicycle) */
.mural-wall .mb svg{width:60%;height:60%;color:var(--ink-2);opacity:.7}

/* =====================================================================
   STOREFRONT SHOWCASE — big photo section with mural-colored sidebar
   ===================================================================== */
.storefront-sec{
  padding:5rem 2.2rem;
  background:transparent;
  position:relative;
}
.storefront-sec::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(90deg,
    var(--hc-rust) 0 14%, var(--hc-mustard) 14% 28%,
    var(--hc-cream) 28% 42%, var(--hc-blue) 42% 56%,
    var(--hc-salmon) 56% 70%, var(--hc-cocoa) 70% 84%,
    var(--hc-pink) 84% 100%);
}
.storefront-inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:2.4rem;
  align-items:center;
}
.storefront-photo{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  border:6px solid var(--red);
  /* Layered: real photo on top, gradient fallback underneath.
     If storefront.jpg is missing, browser silently falls back to the gradient. */
  background:
    url('storefront.jpg') center/cover no-repeat,
    linear-gradient(135deg,var(--salmon) 0%,var(--cream-2) 100%);
  position:relative;
}
.storefront-photo.has-img{background-image:url('storefront.jpg')}
.storefront-photo .caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.2rem 1.4rem;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
}
.storefront-text .eyebrow{margin-bottom:.9rem;display:inline-block}
.storefront-text h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:800;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:1rem;
}
.storefront-text h2 em{font-style:italic;color:var(--red);font-weight:700;display:block}
.storefront-text p{color:var(--muted);font-size:1rem;line-height:1.8;margin-bottom:1rem}
.storefront-badges{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem
}
.storefront-badges span{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .8rem;
  border-radius:999px;
  font-size:.78rem;font-weight:600;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.storefront-badges span::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--red);
}

/* =====================================================================
   EXTRA HERO INFO — richer "Heart & Soul" section
   ===================================================================== */
.hero-highlights{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  margin-top:1.4rem;
}
.hero-highlights .hh{
  background:rgba(251,244,227,.82);               /* paper, slightly translucent */
  border:1px solid var(--line-gold);
  border-radius:3px;
  padding:.85rem .9rem;
  box-shadow:inset 0 0 0 3px rgba(251,244,227,.6);
}
.hero-highlights .hh .k{
  font-family:var(--script);
  font-style:normal;
  color:var(--red);
  font-size:1.45rem;
  font-weight:600;
  line-height:1;
  display:block;
  margin-bottom:.25rem;
  letter-spacing:.005em;
}
.hero-highlights .hh .v{
  font-family:var(--serif-body);
  font-size:.85rem;
  color:var(--brown-800);
  line-height:1.4;
  display:block;
}

/* Main-street callout in hero */
.hero-mainstreet{
  margin-top:1.6rem;
  padding:.95rem 1.15rem;
  border-left:3px solid var(--gold);
  background:rgba(251,244,227,.85);
  border-radius:2px;
  font-family:var(--serif-body);
  font-size:.95rem;
  font-style:italic;
  color:var(--brown-800);
  line-height:1.6;
}
.hero-mainstreet strong{color:var(--red-900);font-style:normal;font-weight:700}

/* =====================================================================
   INSIDE SOPHIA'S — real-photo strip on the home page
   ===================================================================== */
.inside-sec{
  padding:4.5rem 2rem;
  background:transparent;
  position:relative;
}
.inside-sec .sec-hdr{max-width:780px;margin:0 auto 2.4rem}
.inside-sec .sec-hdr h2 em{color:var(--red);font-style:italic;font-weight:700;display:block}
.inside-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.4fr;
  grid-template-rows:260px;
  gap:.9rem;
  max-width:var(--container);
  margin:0 auto;
}
.inside-tile{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .25s,box-shadow .25s;
  display:flex;align-items:flex-end;
  color:#fff;
  margin:0;
}
.inside-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.inside-tile::before{
  content:'';position:absolute;inset:0;z-index:1;
}
.inside-tile figcaption{
  position:relative;z-index:2;width:100%;
  padding:.85rem 1rem;
  background:transparent;
  font-family:var(--serif);font-style:italic;font-weight:700;font-size:.95rem;
  text-shadow:
    0 1px 3px rgba(0,0,0,.85),
    0 2px 14px rgba(0,0,0,.65);
}
.inside-cta{
  text-align:center;
  margin-top:2rem;
}

/* =====================================================================
   RESPONSIVE — mural + storefront + inside
   ===================================================================== */
@media (max-width:900px){
  .storefront-inner{grid-template-columns:1fr;gap:1.8rem}
  .mural-wall{aspect-ratio:5/4}
  .inside-grid{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:.8rem}
}
@media (max-width:640px){
  .hero-highlights{grid-template-columns:1fr 1fr}
  .storefront-sec{padding:3.5rem 1.2rem}
  .mural-wall{grid-template-columns:repeat(3,1fr);aspect-ratio:3/3}
  .mb-1,.mb-5{grid-column:span 2;grid-row:span 1}
  .mb-5{grid-column:span 3}
  .inside-sec{padding:3.5rem 1.2rem}
  .inside-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,200px)}
}

/* ── INSTAGRAM LINK CARDS (replaces flaky embed.js blockquotes) ── */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (max-width: 960px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ig-grid { grid-template-columns: 1fr; max-width: 420px; } }

.ig-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #1a0a06;
}
.ig-card:hover,
.ig-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  outline: none;
}
.ig-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ig-card:hover img,
.ig-card:focus-visible img { transform: scale(1.05); }

.ig-card .ig-icon {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 26px;
  height: 26px;
  fill: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.55));
  pointer-events: none;
  z-index: 2;
}
.ig-card .ig-reel-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.ig-card .ig-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.72) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.1rem;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.ig-card:hover .ig-overlay,
.ig-card:focus-visible .ig-overlay { opacity: 1; }
.ig-card .ig-cap {
  color: #fff;
  font-family: 'Lora', Georgia, serif;
  font-size: .95rem;
  line-height: 1.35;
  font-style: italic;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* On touch devices the caption is always visible (no hover) */
@media (hover: none) {
  .ig-card .ig-overlay { opacity: 1; }
}