/* Vyanjan Rasa brand page.
   Colours, type, spacing and radii are copied from the main website's single theme file
   (frontend/src/styles/tokens.css), so both sites read as one brand. Light only on purpose:
   it matches the printed pamphlet and the main website. Contrast is measured there:
   charcoal on cream 15.65:1, terracotta on cream 5.62:1, cream on leaf 5.88:1,
   charcoal on turmeric 7.43:1, cream on charcoal 15.65:1. Turmeric is a fill, never text. */

@font-face { font-family: "Vyanjan Body"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/noto-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }
@font-face { font-family: "Vyanjan Body"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/noto-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }
@font-face { font-family: "Vyanjan Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/noto-serif-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2212, U+20B9; }

:root {
  --c-turmeric: #e3a008;
  --c-terracotta: #a8431c;
  --c-chilli: #8e1114;
  --c-cream: #fdf6ec;
  --c-charcoal: #231c18;
  --c-turmeric-soft: #f6dfa4;
  --c-turmeric-deep: #8a5e05;
  --c-terracotta-deep: #7d2f12;
  --c-cream-deep: #f6e9d5;
  --c-cream-edge: #ead9be;
  --c-charcoal-muted: #5c4e45;
  --c-leaf: #1a6e36;
  --c-leaf-deep: #125128; /* hover of a WhatsApp button; cream on it is 8.9:1 */

  --c-bg: var(--c-cream);
  --c-bg-raised: var(--c-cream-deep);
  --c-text: var(--c-charcoal);
  --c-text-muted: var(--c-charcoal-muted);
  --c-text-on-dark: var(--c-cream);
  --c-border: var(--c-cream-edge);
  --c-border-strong: var(--c-turmeric-deep);
  --c-brass: var(--c-turmeric-deep);
  --c-wa: var(--c-leaf);
  --c-veg: var(--c-leaf);
  --c-nonveg: var(--c-chilli);
  --c-focus: var(--c-charcoal);
  --c-focus-halo: var(--c-cream);

  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);
  --fs-600: clamp(1.5rem, 1.28rem + 0.96vw, 1.95rem);
  --fs-700: clamp(1.8rem, 1.4rem + 1.74vw, 2.6rem);
  --fs-800: clamp(2.15rem, 1.5rem + 2.83vw, 3.45rem);
  --ff-display: "Vyanjan Display", Georgia, "Times New Roman", serif;
  --ff-body: "Vyanjan Body", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-display: 600;
  --fw-bold: 700;
  --lh-tight: 1.18;
  --lh-heading: 1.3;
  --lh-body: 1.65;
  --ls-wide: 0.06em;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem; --sp-11: 5rem;
  --r-sm: 0.25rem; --r-md: 0.625rem; --r-lg: 1.25rem; --r-pill: 62.4375rem; --r-circle: 50%;
  --bw-hairline: 1px; --bw-thick: 2px; --bw-motif: 3px;
  --ring-w: 3px; --ring-offset: 2px; --ring-halo-w: 5px;
  --shadow-raised: 0 1px 2px rgb(35 28 24 / 6%), 0 2px 8px rgb(35 28 24 / 8%);
  --shadow-float: 0 2px 4px rgb(35 28 24 / 8%), 0 8px 24px rgb(35 28 24 / 12%);

  --w-column: 45rem;          /* the one centred column, 720 px */
  --gutter: var(--sp-5);
  --tap-min: 2.75rem;         /* 44 px touch target */
  --motif-border-h: 1rem;
  --motif-wheel-lg: 4rem;

  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-accordion: 300ms;
  --dur-reveal: 520ms;
  --dur-entrance: 360ms;
  --dur-hero-wheel: 60s;      /* one slow turn of the hero's Konark wheel */
  --dur-pulse: 4.5s;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-sticky-bar: 60;
  --z-skip-link: 100;

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--c-terracotta); }
strong { font-weight: var(--fw-bold); }
:focus-visible {
  outline: var(--ring-w) solid var(--c-focus);
  outline-offset: var(--ring-offset);
  box-shadow: 0 0 0 var(--ring-halo-w) var(--c-focus-halo);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none; }
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: var(--z-skip-link);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--c-charcoal); color: var(--c-text-on-dark); font-weight: var(--fw-bold);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.icon {
  flex: none; width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- motifs ---------- */
.motif-border {
  height: var(--motif-border-h);
  background-color: var(--c-brass);
  -webkit-mask: url("../assets/motifs/pattachitra-border.svg") left center / 3rem 100% repeat-x;
  mask: url("../assets/motifs/pattachitra-border.svg") left center / 3rem 100% repeat-x;
}
.wheel-divider { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-7); color: var(--c-brass); }
.wheel-divider::before, .wheel-divider::after { content: ""; flex: 1; border-top: var(--bw-hairline) solid var(--c-border-strong); opacity: 0.5; }
.wheel-divider span, .hero__wheel {
  background-color: currentColor;
  -webkit-mask: url("../assets/motifs/konark-wheel.svg") center / contain no-repeat;
  mask: url("../assets/motifs/konark-wheel.svg") center / contain no-repeat;
}
.wheel-divider span { width: var(--motif-wheel-lg); height: var(--motif-wheel-lg); }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw-thick) solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-weight: var(--fw-bold); line-height: var(--lh-tight); text-align: center;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 3.5rem; font-size: var(--fs-400); }
.btn--xl { min-height: 4rem; font-size: var(--fs-500); }
.btn--block { display: flex; width: 100%; }
.btn--wa { background: var(--c-wa); color: var(--c-text-on-dark); }
.btn--wa:hover { background: var(--c-leaf-deep); }
.btn--outline { border-color: var(--c-terracotta); background: var(--c-bg); color: var(--c-terracotta-deep); }
.btn--outline:hover { background: var(--c-bg-raised); }
.btn--light { border-color: var(--c-cream-edge); background: var(--c-bg); color: var(--c-terracotta-deep); }
.btn--quiet { border-color: var(--c-border-strong); background: var(--c-bg); color: var(--c-terracotta-deep); }
.btn[aria-disabled="true"] {
  border-style: dashed; border-color: var(--c-border-strong);
  background: var(--c-bg-raised); color: var(--c-text-muted); cursor: not-allowed;
}
.btn[aria-disabled="true"]:active { transform: none; }
.soon { font-weight: var(--fw-regular); }
.nowrap { white-space: nowrap; }
/* A gentle, infrequent ring on the WhatsApp buttons. */
.btn--wa::after {
  content: ""; position: absolute; inset: calc(var(--bw-thick) * -1);
  border: var(--bw-thick) solid var(--c-wa); border-radius: inherit;
  opacity: 0; pointer-events: none;
  animation: pulse var(--dur-pulse) var(--ease-out) 2s infinite;
}
@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  35%, 100% { opacity: 0; transform: scale(1.1, 1.3); }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(var(--sp-7) + env(safe-area-inset-top, 0px)); }
.hero__wheel {
  position: absolute; top: calc(var(--sp-10) * -1); left: 50%;
  width: min(34rem, 130vw); aspect-ratio: 1; margin-left: calc(min(34rem, 130vw) / -2);
  color: var(--c-turmeric); opacity: 0.14; pointer-events: none;
  animation: spin var(--dur-hero-wheel) linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.hero__inner {
  position: relative; max-width: var(--w-column); margin: 0 auto;
  padding: 0 calc(var(--gutter) + var(--safe-r)) var(--sp-8) calc(var(--gutter) + var(--safe-l));
  text-align: center;
}
.hero__logo { width: 6rem; height: 6rem; margin: 0 auto; filter: drop-shadow(0 4px 10px rgb(35 28 24 / 18%)); }
.hero__brand {
  margin-top: var(--sp-3);
  color: var(--c-terracotta); font-size: var(--fs-200); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.hero__title {
  margin-top: var(--sp-2);
  font-family: var(--ff-display); font-size: var(--fs-800); font-weight: var(--fw-display);
  line-height: var(--lh-tight); text-wrap: balance;
}
.hero__sub { margin-top: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-400); font-style: italic; }
.hero__media {
  position: relative; aspect-ratio: 4 / 3; margin: var(--sp-7) calc(var(--gutter) * -1) 0;
  overflow: hidden; background: var(--c-bg-raised);
}
.thali { position: absolute; inset: 0; width: 100%; height: 100%; }
.thali__plate { fill: var(--c-turmeric-soft); stroke: var(--c-brass); stroke-width: 3; }
.thali__rim { fill: none; stroke: var(--c-brass); stroke-width: 1.5; opacity: 0.45; }
.thali__bowl { fill: var(--c-brass); }
.thali__dalma { fill: var(--c-turmeric); }
.thali__saga { fill: var(--c-leaf); }
.thali__curry { fill: var(--c-terracotta); }
.thali__rice { fill: var(--c-cream); stroke: var(--c-cream-edge); stroke-width: 2; }
.thali__papad { fill: var(--c-cream-deep); stroke: var(--c-brass); stroke-width: 1; }
.thali__dot { fill: var(--c-brass); opacity: 0.6; }
.thali__leaf { fill: var(--c-leaf); opacity: 0.85; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .hero__photo { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.js .hero__photo.is-loaded { opacity: 1; }
.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__note { margin-top: var(--sp-5); color: var(--c-text-muted); font-size: var(--fs-200); }
.noscript {
  margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--c-turmeric-soft); text-align: left;
}
@media (min-width: 30rem) {
  .hero__media { margin-inline: 0; border: var(--bw-hairline) solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); }
  .hero__actions { flex-direction: row; justify-content: center; }
}
/* Entrance: logo, tagline, then the image, about 600 ms in all. */
.js .hero__logo, .js .hero__brand, .js .hero__title, .js .hero__sub, .js .hero__media {
  animation: rise var(--dur-entrance) var(--ease-out) both;
}
.js .hero__brand, .js .hero__title { animation-delay: 120ms; }
.js .hero__sub { animation-delay: 180ms; }
.js .hero__media { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- sections ---------- */
.section {
  max-width: var(--w-column); margin: 0 auto;
  padding: var(--sp-10) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
}
.section__title {
  font-family: var(--ff-display); font-size: var(--fs-700); font-weight: var(--fw-display);
  line-height: var(--lh-heading); text-wrap: balance;
}
.section__title::after {
  content: ""; display: block; width: 3rem; margin-top: var(--sp-3);
  border-top: var(--bw-motif) solid var(--c-turmeric);
}
.section__lead { margin-top: var(--sp-4); color: var(--c-text-muted); }
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Facilities: hairline-divided rows, not a card grid. */
.facts { margin-top: var(--sp-6); }
.fact { display: grid; grid-template-columns: var(--tap-min) 1fr; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: var(--bw-hairline) solid var(--c-border); }
.fact:first-child { border-top: var(--bw-hairline) solid var(--c-border); }
.fact__icon {
  display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-circle); background: var(--c-turmeric-soft); color: var(--c-terracotta-deep);
}
.fact__title { font-size: var(--fs-400); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.fact p { color: var(--c-text-muted); }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md); background: var(--c-bg-raised);
  font-size: var(--fs-200); line-height: var(--lh-heading); text-align: center;
}
.steps li { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.steps__n {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-circle);
  background: var(--c-terracotta); color: var(--c-text-on-dark); font-weight: var(--fw-bold);
}

/* Why choose */
.reasons { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.reasons li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.reasons__emoji {
  flex: none; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-circle); background: var(--c-bg-raised); font-size: var(--fs-500); line-height: 1;
}
.reasons p { padding-top: var(--sp-2); }
.closing {
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-5);
  border-block: var(--bw-hairline) solid var(--c-border-strong);
  color: var(--c-terracotta-deep); font-family: var(--ff-display); font-size: var(--fs-600);
  line-height: var(--lh-heading); text-align: center; text-wrap: balance;
}
.closing strong { font-weight: var(--fw-display); }

/* Weekly menu accordion */
.days { margin-top: var(--sp-6); border: var(--bw-hairline) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); overflow: hidden; }
.day + .day { border-top: var(--bw-hairline) solid var(--c-border); }
.day--today { box-shadow: inset var(--bw-motif) 0 0 var(--c-turmeric); }
.day__toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  width: 100%; min-height: 3.5rem; padding: var(--sp-3) var(--sp-5);
  border: 0; background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.day__toggle:hover { background: var(--c-bg-raised); }
.day__toggle:focus-visible { outline-offset: calc(var(--ring-w) * -1); }
.day__name { font-family: var(--ff-display); font-size: var(--fs-500); font-weight: var(--fw-display); }
.badge {
  padding: 0 var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.badge--special { background: var(--c-turmeric); color: var(--c-charcoal); }
.badge--today { background: var(--c-terracotta); color: var(--c-text-on-dark); }
.day__chevron {
  width: 1.5rem; height: 1.5rem; margin-left: auto; color: var(--c-terracotta);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-accordion) var(--ease-out);
}
.day.is-open .day__chevron { transform: rotate(180deg); }
.day__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-accordion) var(--ease-out), visibility 0s linear var(--dur-accordion);
}
.day.is-open .day__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--dur-accordion) var(--ease-out), visibility 0s;
}
.day__inner { min-height: 0; overflow: hidden; }
.day__content { display: grid; gap: var(--sp-5); padding: var(--sp-2) var(--sp-5) var(--sp-6); }
.meal__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-300); font-weight: var(--fw-bold); }
.marker {
  display: grid; place-items: center; width: 1rem; height: 1rem;
  border: var(--bw-thick) solid currentColor; border-radius: var(--r-sm);
}
.marker::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: var(--r-circle); background: currentColor; }
.meal--veg .marker { color: var(--c-veg); }
.meal--nonveg .marker { color: var(--c-nonveg); }
.meal__row { display: grid; grid-template-columns: 40% 1fr; gap: var(--sp-4); align-items: start; margin-top: var(--sp-3); }
.meal__photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: var(--bw-hairline) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-raised);
}
.meal__photo::before {
  content: ""; position: absolute; inset: 18%;
  background-color: var(--c-brass); opacity: 0.35;
  -webkit-mask: url("../assets/motifs/plate.svg") center / contain no-repeat;
  mask: url("../assets/motifs/plate.svg") center / contain no-repeat;
}
.meal__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.meal__photo.has-photo img { opacity: 1; }
.meal__items li { padding-block: var(--sp-1); border-bottom: var(--bw-hairline) solid var(--c-border); line-height: var(--lh-heading); }
.meal__items li:last-child { border-bottom: 0; }
.notice {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-left: var(--bw-motif) solid var(--c-turmeric); border-radius: var(--r-md);
  background: var(--c-turmeric-soft);
}
.notice ul { display: grid; gap: var(--sp-2); padding-left: var(--sp-5); list-style: disc; }

/* Authentic Odia */
.points { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.points li { position: relative; padding-left: var(--sp-6); }
.points li::before {
  content: ""; position: absolute; left: var(--sp-1); top: 0.6em;
  width: 0.55rem; height: 0.55rem; background: var(--c-terracotta); transform: rotate(45deg);
}

/* Connect */
.links { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.links .btn--xl { margin-block: var(--sp-2); }

/* Footer */
.footer { margin-top: var(--sp-11); background: var(--c-charcoal); color: var(--c-text-on-dark); text-align: center; }
.footer .motif-border { background-color: var(--c-turmeric); }
.footer__inner {
  display: grid; justify-items: center; gap: var(--sp-2);
  max-width: var(--w-column); margin: 0 auto;
  padding: var(--sp-8) calc(var(--gutter) + var(--safe-r)) calc(var(--sp-8) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  font-size: var(--fs-200);
}
.footer__logo { width: 3.5rem; height: 3.5rem; }
.footer__tagline { font-family: var(--ff-display); font-size: var(--fs-500); font-weight: var(--fw-display); }
.footer__copy { margin-top: var(--sp-2); opacity: 0.85; }

/* Sticky bottom bar: shown after the hero, hidden while "Connect With Us" or the footer is on screen. */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-bar);
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-3);
  padding: var(--sp-3) calc(var(--gutter) + var(--safe-r)) calc(var(--sp-3) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  border-top: var(--bw-hairline) solid var(--c-border); background: var(--c-bg); box-shadow: var(--shadow-float);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-accordion) var(--ease-out), visibility 0s linear var(--dur-accordion);
}
.sticky-bar.is-shown { transform: none; visibility: visible; transition: transform var(--dur-accordion) var(--ease-out), visibility 0s; }
@media (min-width: 48rem) {
  .sticky-bar { left: 50%; right: auto; width: var(--w-column); margin-left: calc(var(--w-column) / -2); border-inline: var(--bw-hairline) solid var(--c-border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* Reduced motion: no movement anywhere, everything shown at once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}