/* ============================================================
   IndianBistro14 — Design System: BASE
   Reset, app frame, hero layout, typography primitives.
   Values extracted verbatim from the Phase 1 frozen UI.
   ============================================================ */

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

body{
  background:var(--char);
  font-family:var(--font-body);
  color:var(--char);
  padding:18px;
}

.serif{font-family:var(--font-display)}

/* ---- App frame (the cream "stage" card) ---- */
.stage{
  max-width:var(--maxw);
  margin:0 auto;
  background:linear-gradient(115deg,#fff8eb 0%,#fffdf7 55%,#f4e5c9 100%);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
}

/* ---- Top row (back / favorite / signature) ---- */
.toprow{position:absolute;top:20px;left:24px;right:24px;z-index:5;display:flex;align-items:center}
.toprow .right{margin-left:auto;display:flex;gap:14px;align-items:center}

/* ---- Hero split (photo | copy) ---- */
.hero{display:grid;grid-template-columns:54% 46%;min-height:520px;position:relative}
.photo{position:relative}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.photo img.on{opacity:1}
.photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(255,248,235,0) 60%, rgba(255,248,235,.96) 100%)}

/* ---- Copy column header ---- */
.copy{padding:74px 36px 26px 8px;position:relative;z-index:2}
.eyebrow{color:var(--softgold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.copy h1{font-family:var(--font-display);font-size:var(--fs-hero);line-height:.98;margin:6px 0 6px}
.withline{font-size:16px;color:var(--mute);margin-bottom:12px}
.withline b{color:var(--red)}

/* ---- Footer + toast (structural, app-wide) ---- */
.foot{max-width:var(--maxw);margin:13px auto 0;text-align:center;color:#a89;font-size:12px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--char);
  color:#fff;padding:13px 22px;border-radius:999px;font-size:14.5px;opacity:0;transition:.25s;z-index:60;box-shadow:var(--shadow)}
.toast[data-show="true"]{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Responsive: collapse hero + lower grid on tablet portrait ---- */
@media(min-width:901px) and (max-width:1200px){
  .hero{min-height:440px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  /* photo is absolutely-positioned inside its cell, so give it explicit height
     once the split collapses to a single column */
  .hero .photo{height:240px}
  .hero .photo::after{background:linear-gradient(180deg,rgba(255,248,235,0) 55%,rgba(255,248,235,.96) 100%)}
  .copy{padding:22px 18px 18px}
}

/* ---- Accessibility: visible focus ring for keyboard users ---- */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}