/*
Theme Name: NaamHaiSiddu
Theme URI: https://naamhaisiddu.com
Author: NaamHaiSiddu
Description: Lightweight block theme for NaamHaiSiddu — Himachali Siddu street carts in Mathura & Vrindavan.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: naamhaisiddu
*/

:root {
	--cream: oklch(97.2% .018 80);
	--ink: oklch(22% .025 60);
	--spice: oklch(58% .165 38);
	--spice-deep: oklch(46% .15 35);
	--forest: oklch(42% .06 145);
	--clay: oklch(92% .035 75);
	--muted: oklch(94% .022 75);
	--muted-fg: oklch(45% .025 60);
	--border: oklch(88% .025 70);
	--card: oklch(100% 0 0);
	--on-primary: oklch(98.5% .005 80);
	--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
	--font-display: "Fraunces", Georgia, serif;
	--font-hindi: "Tiro Devanagari Hindi", serif;
	--gradient-warm: linear-gradient(135deg, oklch(58% .165 38) 0%, oklch(65% .15 55) 100%);
	--gradient-paper: radial-gradient(ellipse at top, oklch(97% .025 80) 0%, oklch(94% .03 75) 100%);
	--shadow-card: 0 2px 4px oklch(22% .025 60 / .04), 0 12px 32px -12px oklch(22% .025 60 / .12);
	--shadow-soft: 0 1px 2px oklch(22% .025 60 / .06), 0 8px 24px -8px oklch(46% .15 35 / .18);
	--shadow-glow: 0 20px 60px -20px oklch(58% .165 38 / .45);
	--ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; font-weight: 500; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em, .it { font-style: italic; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.entry-content > * { margin-block: 0; }
.is-layout-flow > * + * { margin-block-start: 0; }

.c { max-width: 80rem; margin: 0 auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .c { padding-inline: 2rem; } }
.hindi { font-family: var(--font-hindi); }
.display { font-family: var(--font-display); }
.primary { color: var(--spice); }
.muted { color: var(--muted-fg); }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .22em; color: var(--spice); margin-bottom: 1rem; }
.sec { padding-block: 6rem; }
@media (min-width: 768px) { .sec { padding-block: 8rem; } }
.paper { background: var(--gradient-paper); }
.grain { position: relative; }
.grain::after {
	content: ""; pointer-events: none; opacity: .05; mix-blend-mode: multiply; position: absolute; inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.dark { background: var(--ink); color: var(--cream); }
.h-sec { font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .h-sec { font-size: 3rem; } }
.lead { margin-top: 1.5rem; font-size: 1rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 768px) { .lead { font-size: 1.125rem; } }

/* ---------- Icons (CSS masks, keeps content markup clean) ---------- */
.i { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-pin { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>"); }
.i-arrow { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>"); }
.i-flame { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/></svg>"); }
.i-clock { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }
.i-star { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>"); }
.i-nav { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='3 11 22 2 13 21 11 13 3 11'/></svg>"); }
.i-map { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/><path d='M15 5.764v15'/><path d='M9 3.236v15'/></svg>"); }
.i-list { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h.01'/><path d='M3 12h.01'/><path d='M3 19h.01'/><path d='M8 5h13'/><path d='M8 12h13'/><path d='M8 19h13'/></svg>"); }
.i-chat { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>"); }
.i-cam { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/><circle cx='12' cy='13' r='3'/></svg>"); }
.i-mail { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); }
.i-chef { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/><path d='M6 17h12'/></svg>"); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .875rem 1.5rem; font-size: .875rem; font-weight: 500; line-height: 1.25rem; transition: background-color .2s var(--ease), color .2s var(--ease), gap .2s; cursor: pointer; border: 0; font-family: inherit; }
.btn-primary { background: var(--spice); color: var(--on-primary); }
.btn-primary:hover { background: oklch(58% .165 38 / .9); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--spice); }
.btn-ghost-light { border: 1px solid oklch(97.2% .018 80 / .3); background: oklch(97.2% .018 80 / .05); backdrop-filter: blur(8px); color: var(--cream); }
.btn-ghost-light:hover { background: oklch(97.2% .018 80 / .1); }
.btn-outline { border: 1px solid oklch(22% .025 60 / .2); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-sm { padding: .5rem 1rem; font-size: .75rem; }
.btn .i-arrow { transition: transform .2s; }
.btn:hover .i-arrow { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--spice); transition: gap .2s; }
.link:hover { gap: .75rem; }
.tag { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; background: oklch(58% .165 38 / .1); color: var(--spice); padding: .125rem .625rem; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.tag .i { width: .75rem; height: .75rem; }

/* ---------- Header ---------- */
.nhs-header-wrap { position: sticky; top: 0; z-index: 50; }
.nhs-header { width: 100%; transition: background-color .3s, box-shadow .3s; background: transparent; }
.nhs-header.is-scrolled { background: oklch(97.2% .018 80 / .85); backdrop-filter: blur(12px); box-shadow: 0 1px 0 oklch(88% .025 70 / .6); }
.admin-bar .nhs-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .nhs-header-wrap { top: 46px; } }
.nhs-header__inner { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; gap: 1rem; }
@media (min-width: 768px) { .nhs-header__inner { padding-inline: 2rem; } }
.nhs-logo { display: flex; align-items: center; gap: .5rem; }
.nhs-logo__mark { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.nhs-footer .nhs-logo__mark { width: 2.75rem; height: 2.75rem; }
.nhs-logo__name { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.025em; line-height: 1.25; }
.nhs-logo__sub { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-fg); line-height: 1.25; }
.nhs-nav { display: none; align-items: center; gap: .25rem; }
.nhs-nav a { position: relative; padding: .5rem .75rem; font-size: .875rem; color: oklch(22% .025 60 / .75); transition: color .2s; }
.nhs-nav a:hover, .nhs-nav a.is-active { color: var(--ink); }
.nhs-nav a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -2px; height: 1px; background: var(--spice); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nhs-nav a:hover::after, .nhs-nav a.is-active::after { transform: scaleX(1); }
.nhs-header__cta { display: none; padding: .5rem 1rem; }
.nhs-burger { display: inline-flex; background: none; border: 0; padding: .5rem; margin-right: -.5rem; color: var(--ink); cursor: pointer; }
.nhs-burger span, .nhs-burger span::before, .nhs-burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .2s, background .2s; }
.nhs-burger span::before, .nhs-burger span::after { content: ""; position: absolute; left: 0; }
.nhs-burger span::before { top: -6px; } .nhs-burger span::after { top: 6px; }
.nav-open .nhs-burger span { background: transparent; }
.nav-open .nhs-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nhs-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.nhs-mobile { display: none; border-top: 1px solid var(--border); background: var(--cream); padding: .75rem 1.25rem 1.25rem; }
.nav-open .nhs-mobile { display: block; }
.nhs-mobile a { display: block; padding: .75rem 0; font-family: var(--font-display); font-size: 1.25rem; border-bottom: 1px solid oklch(88% .025 70 / .6); }
.nhs-mobile .btn { margin-top: 1rem; justify-content: center; width: 100%; font-family: var(--font-body); font-size: .875rem; border: 0; }
.nav-open .nhs-header { background: var(--cream); }
@media (min-width: 768px) {
	.nhs-nav, .nhs-header__cta { display: inline-flex; }
	.nhs-burger, .nhs-mobile, .nav-open .nhs-mobile { display: none; }
}

/* ---------- Floating CTA ---------- */
.nhs-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: var(--spice); color: var(--on-primary); padding: .5rem 1.25rem .5rem .5rem; font-size: .875rem; font-weight: 500; box-shadow: 0 6px 18px -6px oklch(22% .025 60 / .35); transition: transform .2s; }
.nhs-float:hover { transform: translateY(-2px); }
.nhs-float__ic { width: 2rem; height: 2rem; border-radius: 9999px; background: oklch(98.5% .005 80 / .2); display: grid; place-items: center; }

/* ---------- Footer ---------- */
.nhs-footer { margin-top: 6rem; background: var(--ink); color: var(--cream); }
.nhs-footer__grid { display: grid; gap: 2.5rem; padding-block: 4rem; }
@media (min-width: 768px) { .nhs-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.nhs-footer .nhs-logo__name { font-size: 1.25rem; color: var(--cream); }
.nhs-footer .nhs-logo__sub { color: oklch(97.2% .018 80 / .6); }
.nhs-footer__about { margin-top: 1.25rem; max-width: 28rem; font-size: .875rem; line-height: 1.625; color: oklch(97.2% .018 80 / .7); }
.nhs-social { margin-top: 1.5rem; display: flex; gap: .75rem; }
.nhs-social a { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: oklch(97.2% .018 80 / .1); display: grid; place-items: center; transition: background .2s; }
.nhs-social a:hover { background: var(--spice); }
.nhs-social .i { width: 1rem; height: 1rem; }
.nhs-footer h4 { font-family: var(--font-body); font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: oklch(97.2% .018 80 / .5); font-weight: 400; margin-bottom: 1rem; }
.nhs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .875rem; }
.nhs-footer ul a:hover { color: var(--spice); }
.nhs-footer__bar { border-top: 1px solid oklch(97.2% .018 80 / .1); }
.nhs-footer__bar .c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding-block: 1.5rem; font-size: .75rem; color: oklch(97.2% .018 80 / .5); }
@media (min-width: 768px) { .nhs-footer__bar .c { flex-direction: row; justify-content: space-between; } }

/* ---------- Reveal animation ---------- */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.rv-l { transform: translateX(-20px); }
.js .rv.rv-s { transform: scale(.85); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .marquee__track, .steam span, .ping::before, .pulse { animation: none !important; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes steam { 0% { opacity: .6; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-30px) scale(1.4); } }
@keyframes ping { 75%, to { opacity: 0; transform: scale(2); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
.pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* ---------- Home: hero ---------- */
.hero { position: relative; min-height: 92vh; overflow: hidden; background: var(--ink); color: var(--cream); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.hero__bg img { object-position: 50% 50%; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink), oklch(22% .025 60 / .72) 45%, oklch(22% .025 60 / .35)), linear-gradient(to right, oklch(22% .025 60 / .75), transparent 70%); }
.hero__inner { position: relative; display: grid; gap: 2.5rem; align-items: end; min-height: 92vh; padding-top: 6rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .hero__inner { grid-template-columns: minmax(0, 52rem); padding-top: 9rem; padding-bottom: 8rem; } }
.pill-live { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1px solid oklch(97.2% .018 80 / .2); background: oklch(97.2% .018 80 / .05); backdrop-filter: blur(8px); padding: .25rem .75rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: oklch(97.2% .018 80 / .8); }
.dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--spice); display: inline-block; }
.hero h1 { margin-top: 1.5rem; font-size: clamp(2.4rem, 7vw, 5.8rem); line-height: .98; color: var(--cream); }
.hero h1 .hi { font-family: var(--font-hindi); color: oklch(97.2% .018 80 / .85); font-size: .85em; letter-spacing: 0; }
.hero__lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: oklch(97.2% .018 80 / .75); }
@media (min-width: 768px) { .hero__lead { font-size: 1.125rem; } }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__art { display: flex; justify-content: center; }
@media (min-width: 768px) { .hero__art { justify-content: flex-end; } }
.siddu { position: relative; width: 14rem; height: 14rem; }
@media (min-width: 768px) { .siddu { width: 18rem; height: 18rem; } }
.siddu::before { content: ""; position: absolute; inset: -2.5rem; border-radius: 9999px; background: oklch(58% .165 38 / .2); filter: blur(64px); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.siddu svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 20px 30px oklch(46% .15 35 / .35)); animation: bob 4s ease-in-out infinite; }
.steam { position: absolute; inset-inline: 0; top: 0; display: flex; justify-content: center; gap: .75rem; transform: translateY(-.5rem); pointer-events: none; z-index: 1; }
.steam span { display: block; height: 2rem; width: 6px; border-radius: 9999px; background: oklch(97.2% .018 80 / .4); filter: blur(3px); animation: steam 3s ease-out infinite; }
.steam span:nth-child(2) { animation-delay: .6s; } .steam span:nth-child(3) { animation-delay: 1.2s; }

.marquee { border-block: 1px solid oklch(88% .025 70 / .6); background: var(--ink); color: var(--cream); overflow: hidden; }
.marquee__track { display: flex; width: max-content; white-space: nowrap; padding-block: 1rem; animation: marquee 32s linear infinite; }
.marquee__track span { margin-inline: 2rem; font-family: var(--font-display); font-size: 1.125rem; color: oklch(97.2% .018 80 / .8); display: inline-flex; align-items: center; gap: 2rem; }
.marquee__track span::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--spice); }
@media (min-width: 768px) { .marquee__track span { font-size: 1.25rem; } }

.story { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .story { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.story__media { position: relative; }
.story__img { aspect-ratio: 4 / 5; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-card); }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__note { position: absolute; bottom: -1.5rem; right: -.5rem; max-width: 220px; border-radius: 1rem; background: var(--card); padding: 1.25rem; box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .story__note { right: -2rem; } }
.story__note .hindi { font-size: 1.5rem; color: var(--spice); line-height: 1.3; }
.story__note p { margin-top: .25rem; font-size: .75rem; color: var(--muted-fg); line-height: 1.625; }
.story .link { margin-top: 2rem; }

.fav-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .fav-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.fav-head h2 { max-width: 42rem; }
.fav-head .see { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.fav-head .see:hover { color: var(--spice); }
.cards3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.fcard { border-radius: 1.5rem; background: var(--card); overflow: hidden; box-shadow: var(--shadow-card); }
.fcard__img { aspect-ratio: 1; overflow: hidden; }
.fcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.fcard:hover .fcard__img img { transform: scale(1.05); }
.fcard__body { padding: 1.5rem; }
.fcard__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fcard__price { font-family: var(--font-display); font-size: 1.25rem; }
.fcard h3 { margin-top: .75rem; font-size: 1.5rem; }
.fcard p { margin-top: .5rem; font-size: .875rem; color: var(--muted-fg); line-height: 1.625; }

.cartcta { position: relative; border-radius: 2rem; overflow: hidden; background: var(--ink); color: var(--cream); }
.cartcta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cartcta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--ink), oklch(22% .025 60 / .85), transparent); }
.cartcta__body { position: relative; z-index: 2; padding: 4rem 1.5rem; max-width: 42rem; }
@media (min-width: 768px) { .cartcta__body { padding: 6rem 3.5rem; } }
.cartcta h2 { color: var(--cream); }
.cartcta p { margin-top: 1.25rem; color: oklch(97.2% .018 80 / .75); max-width: 28rem; }
.cartcta .btn { margin-top: 2rem; }

.reviews { margin-top: 3.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews { grid-template-columns: repeat(4, 1fr); } }
.review { border-radius: 1rem; background: oklch(97.2% .018 80 / .05); border: 1px solid oklch(97.2% .018 80 / .1); padding: 1.5rem; transition: background .2s; }
.review:hover { background: oklch(97.2% .018 80 / .1); }
.stars { display: flex; gap: 2px; color: var(--spice); }
.review p { margin-top: 1rem; font-size: .875rem; line-height: 1.625; color: oklch(97.2% .018 80 / .85); }
.review__who { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid oklch(97.2% .018 80 / .1); }
.review__who b { display: block; font-size: .875rem; font-weight: 500; }
.review__who small { display: flex; align-items: center; gap: .25rem; margin-top: 2px; font-size: .75rem; color: oklch(97.2% .018 80 / .55); }
.review__who small .i { width: .75rem; height: .75rem; }

.closing { max-width: 56rem; text-align: center; }
.closing .hindi { font-size: 1.875rem; color: var(--spice); }
.closing h2 { margin-top: 1rem; font-size: 3rem; line-height: .95; }
@media (min-width: 768px) { .closing h2 { font-size: 4.5rem; } }
.closing p { margin: 1.5rem auto 0; max-width: 36rem; color: var(--muted-fg); }
.closing .ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------- Page heads (menu / locations / order / contact) ---------- */
.phead { padding-top: 3.5rem; }
@media (min-width: 768px) { .phead { padding-top: 5rem; } }
.phead h1 { margin-top: .75rem; font-size: 2.4rem; line-height: 1; }
@media (min-width: 640px) { .phead h1 { font-size: 3rem; } }
@media (min-width: 768px) { .phead h1 { font-size: 4.5rem; line-height: .95; } }
.phead .eyebrow { margin-bottom: 0; }
.phead p { margin-top: 1.25rem; max-width: 36rem; color: var(--muted-fg); }
.pad-b { padding-bottom: 6rem; }
.minh { min-height: 100vh; }

/* ---------- Menu ---------- */
.mtabs { position: sticky; top: 68px; z-index: 30; margin-top: 2.5rem; padding-block: .75rem; background: oklch(97.2% .018 80 / .85); backdrop-filter: blur(12px); }
.admin-bar .mtabs { top: 100px; }
.mtabs__row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.mtabs__row::-webkit-scrollbar { display: none; }
.mtabs a { flex-shrink: 0; border-radius: 9999px; padding: .5rem 1rem; font-size: .875rem; white-space: nowrap; background: var(--card); border: 1px solid var(--border); color: var(--muted-fg); transition: background .2s, color .2s; }
.mtabs a:hover { color: var(--ink); }
.mtabs a.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.msecs { margin-top: 3rem; display: grid; gap: 5rem; }
.msec { scroll-margin-top: 8rem; }
.msec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 2rem; }
.msec__head h2 { font-size: 1.5rem; }
@media (min-width: 640px) { .msec__head h2 { font-size: 1.875rem; } }
@media (min-width: 768px) { .msec__head h2 { font-size: 2.25rem; } }
.msec__head p { margin-top: .25rem; font-size: .875rem; color: var(--muted-fg); }
.msec__num { display: none; font-family: var(--font-display); font-size: 2.25rem; color: oklch(58% .165 38 / .4); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .msec__num { display: block; } }
.mbody { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 768px) { .mbody { grid-template-columns: 15rem 1fr; gap: 3rem; } }
.mphoto { margin: 0; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--muted); }
@media (min-width: 768px) { .mphoto { aspect-ratio: 1; } }
.mphoto img { width: 100%; height: 100%; object-fit: cover; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.mrow { display: flex; align-items: baseline; gap: .5rem; }
.mrow h3 { font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 768px) { .mrow h3 { font-size: 1.25rem; } }
.lead-dots { flex: 1; min-width: 1.5rem; border-bottom: 1.5px dotted oklch(22% .025 60 / .3); transform: translateY(-.3rem); }
.mprice { font-family: var(--font-display); font-size: 1.125rem; color: var(--spice); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .mprice { font-size: 1.25rem; } }
.mlist p { margin-top: .25rem; font-size: .875rem; color: var(--muted-fg); line-height: 1.625; max-width: 36rem; }
.mlist .tags { margin-top: .5rem; display: flex; gap: .5rem; }
.mgrid { display: grid; gap: 1.75rem 2rem; }
@media (min-width: 640px) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .mgrid { column-gap: 2.5rem; } }
.mitem { display: flex; gap: 1rem; align-items: flex-start; }
@media (min-width: 640px) { .mitem { gap: 1.25rem; } }
.mitem__img { width: 5rem; height: 5rem; flex-shrink: 0; overflow: hidden; border-radius: 1rem; background: var(--muted); }
@media (min-width: 640px) { .mitem__img { width: 6rem; height: 6rem; } }
@media (min-width: 768px) { .mitem__img { width: 7rem; height: 7rem; } }
.mitem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.mitem:hover .mitem__img img { transform: scale(1.1); }
.mitem__img.ph { background: var(--gradient-warm); display: grid; place-items: center; font-family: var(--font-hindi); font-size: 1.875rem; color: var(--on-primary); }
.mitem__body { flex: 1; min-width: 0; }
.mitem__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mitem h3 { font-size: 1.125rem; line-height: 1.25; }
.mitem__price { font-family: var(--font-display); font-size: 1.125rem; color: var(--spice); flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .mitem h3, .mitem__price { font-size: 1.25rem; } }
.mitem p { margin-top: .375rem; font-size: .875rem; color: var(--muted-fg); line-height: 1.625; }
.mitem .tags { margin-top: .625rem; display: flex; gap: .5rem; }
.mitem .tag { padding: .125rem .5rem; }

/* ---------- Locations ---------- */
.seg { margin-top: 2.5rem; display: inline-flex; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); padding: .25rem; }
.seg button { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .5rem 1rem; font-size: .875rem; font-weight: 500; border: 0; background: none; color: var(--muted-fg); cursor: pointer; font-family: inherit; }
.seg button.is-active { background: var(--ink); color: var(--cream); }
.locgrid { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .locgrid { grid-template-columns: 3fr 2fr; } }
.locs-list .locgrid { grid-template-columns: 1fr; }
.locs-list .lmap { display: none; }
.lmap { position: relative; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; background: oklch(93% .025 75); }
@media (max-width: 639px) { .lmap { aspect-ratio: 1; } }
@media (min-width: 1024px) { .lmap { aspect-ratio: auto; min-height: 560px; } }
.lmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lmap__city { position: absolute; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: oklch(22% .025 60 / .5); font-weight: 500; }
.pin { position: absolute; transform: translate(-50%, -100%); background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.pin__label { position: absolute; top: -4px; transform: translateY(-100%); white-space: nowrap; border-radius: 9999px; background: var(--ink); color: var(--cream); font-size: 11px; padding: .25rem .75rem; font-weight: 500; display: none; }
.pin.is-active .pin__label { display: block; }
.pin__dot { position: relative; display: grid; place-items: center; transition: transform .2s; }
.pin.is-active .pin__dot { transform: scale(1.25); }
.pin:hover .pin__dot { transform: scale(1.1); }
.pin__dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: oklch(58% .165 38 / .4); animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.pin__dot i { position: relative; width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 2px solid var(--cream); background: var(--spice); }
.pin--open .pin__dot::before { background: oklch(42% .06 145 / .4); }
.pin--open .pin__dot i { background: var(--forest); }
.pin__shadow { margin-top: .25rem; width: .5rem; height: .5rem; border-radius: 9999px; background: oklch(22% .025 60 / .3); filter: blur(2px); }
.legend { position: absolute; bottom: 1rem; left: 1rem; border-radius: .75rem; background: oklch(97.2% .018 80 / .9); backdrop-filter: blur(8px); padding: .5rem .75rem; font-size: 11px; display: flex; gap: .75rem; box-shadow: var(--shadow-soft); }
.legend span { display: inline-flex; align-items: center; gap: .375rem; }
.legend i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--spice); }
.legend i.o { background: var(--forest); } .legend i.cl { background: var(--muted-fg); }
.lcards { display: grid; gap: .75rem; align-content: start; }
.locs-list .lcards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lcard { border-radius: 1rem; border: 1px solid var(--border); background: oklch(100% 0 0 / .6); padding: 1.25rem; transition: all .2s; cursor: pointer; }
.lcard:hover { background: var(--card); }
.lcard.is-active { border-color: var(--spice); background: var(--card); box-shadow: var(--shadow-card); }
.lcard h3 { font-size: 1.125rem; }
@media (min-width: 640px) { .lcard h3 { font-size: 1.25rem; } }
.lcard__addr { margin-top: .25rem; font-size: .875rem; color: var(--muted-fg); }
.badges { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.b-open { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .625rem; font-size: 11px; font-weight: 500; background: oklch(42% .06 145 / .15); color: var(--forest); }
.b-open .dot { background: var(--forest); }
.b-busy { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .625rem; font-size: 11px; font-weight: 500; background: oklch(58% .165 38 / .1); color: var(--spice); }
.b-time { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; color: var(--muted-fg); }
.badges .i { width: .75rem; height: .75rem; }
.lcard .btn { margin-top: 1rem; }
.lsel { border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-card); padding: 1rem 1.25rem; }
.lsel small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--spice); }
.lsel b { display: block; margin-top: .25rem; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
@media (min-width: 1024px) { .lsel { display: none; } }
.locs-list .lsel { display: none; }

/* ---------- Order ---------- */
.apps { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .apps { grid-template-columns: 1fr 1fr; } }
.app { position: relative; display: block; border-radius: 1.5rem; padding: 2.5rem; color: var(--cream); overflow: hidden; transition: transform .3s; box-shadow: var(--shadow-card); }
.app::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent, rgb(0 0 0 / .2)); }
.app > * { position: relative; }
@media (min-width: 768px) { .app { padding: 3rem; } }
.app:hover { transform: translateY(-4px); }
.app--z { background: oklch(58% .18 25); }
.app--s { background: oklch(70% .18 55); }
.app--w { background: oklch(48% .1 155); }
.app--c { background: oklch(52% .16 38); }
.app small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; opacity: .8; }
.app h2 { margin-top: .75rem; font-size: 3.75rem; line-height: 1; color: var(--cream); }
@media (min-width: 768px) { .app h2 { font-size: 4.5rem; } }
.app p { margin-top: 1rem; color: var(--cream); opacity: .85; max-width: 24rem; }
.app .btn { margin-top: 2rem; background: var(--cream); color: var(--ink); padding: .75rem 1.25rem; }
.avail { margin-top: 4rem; }
.avail h2 { font-size: 1.875rem; }
@media (min-width: 768px) { .avail h2 { font-size: 2.25rem; } }
.avail > p { margin-top: .5rem; font-size: .875rem; color: var(--muted-fg); }
.avail__list { margin-top: 1.5rem; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; }
.avail__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.avail__row + .avail__row { border-top: 1px solid var(--border); }
.avail__row b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
.avail__row small { display: inline-flex; align-items: center; gap: .25rem; margin-top: .125rem; font-size: .75rem; color: var(--muted-fg); }
.avail__row small .i { width: .75rem; height: .75rem; }
.st { display: inline-flex; align-items: center; gap: .375rem; border-radius: 9999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 500; }
.st--live { background: oklch(42% .06 145 / .15); color: var(--forest); }
.st--live .dot { background: var(--forest); }
.st--soon { background: var(--muted); color: var(--muted-fg); }
.st--soon .dot { background: var(--muted-fg); }
.avail .link { margin-top: 1.5rem; }

/* ---------- Contact ---------- */
.cgrid { margin-top: 3.5rem; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .cgrid { grid-template-columns: 3fr 2fr; } }
.cform { border-radius: 1.5rem; background: var(--card); box-shadow: var(--shadow-card); padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; border: 1px solid var(--border); }
@media (min-width: 768px) { .cform { padding: 2.75rem; } }
.cform label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-fg); margin-bottom: .5rem; }
.input { width: 100%; padding: .75rem 1rem; background: var(--cream); border: 1px solid var(--border); border-radius: .75rem; color: var(--ink); font-family: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--spice); box-shadow: 0 0 0 4px oklch(58% .165 38 / .12); }
textarea.input { min-height: 7.5rem; resize: vertical; }
.cform .btn { justify-self: start; }
.cform__ok { border-radius: .75rem; padding: .75rem 1rem; background: oklch(42% .06 145 / .12); color: var(--forest); font-size: .875rem; }
.cform__err { background: oklch(58% .165 38 / .1); color: var(--spice-deep); }
.hp { position: absolute; left: -9999px; }
.ccards { display: grid; gap: .75rem; align-content: start; }
.ccard { display: flex; gap: 1rem; align-items: flex-start; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem 1.5rem; transition: box-shadow .2s; }
.ccard:hover { border-color: var(--spice); }
.ccard:hover .ccard__ic { background: var(--spice); color: var(--on-primary); }
.ccard__ic { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; background: oklch(58% .165 38 / .1); color: var(--spice); display: grid; place-items: center; transition: background .2s, color .2s; }
.ccard h3 { font-size: 1.125rem; }
.ccard p { margin-top: .125rem; font-size: .75rem; color: var(--muted-fg); }
.ccard span.go { display: inline-block; margin-top: .5rem; font-size: .75rem; color: var(--spice); font-weight: 500; }

/* ---------- About ---------- */
.ahero { position: relative; height: 70vh; min-height: 500px; overflow: hidden; background: var(--ink); color: var(--cream); display: flex; align-items: flex-end; }
.ahero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ahero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink), oklch(22% .025 60 / .5), oklch(22% .025 60 / .2)); }
.ahero .c { position: relative; z-index: 2; width: 100%; padding-bottom: 4rem; }
@media (min-width: 768px) { .ahero .c { padding-bottom: 5rem; } }
.ahero h1 { font-size: 3rem; line-height: .95; color: var(--cream); max-width: 56rem; }
@media (min-width: 768px) { .ahero h1 { font-size: 4.5rem; } }
.intro { max-width: 48rem; text-align: center; }
.intro .hindi { font-size: 1.875rem; color: var(--spice); }
.intro .big { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.625; }
@media (min-width: 768px) { .intro .big { font-size: 1.5rem; } }
.intro .small { margin: 1.5rem auto 0; color: var(--muted-fg); line-height: 1.625; font-size: 1rem; }
@media (min-width: 768px) { .intro .small { font-size: 1.125rem; } }
.intro-sec { padding-block: 5rem; }
@media (min-width: 768px) { .intro-sec { padding-block: 7rem; } }
.why-sec { padding-block: 5rem; }
@media (min-width: 768px) { .why-sec { padding-block: 7rem; } }
.why { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .why { grid-template-columns: 5fr 7fr; } }
.why__img { aspect-ratio: 4 / 5; border-radius: 1.5rem; overflow: hidden; }
.why__img img { width: 100%; height: 100%; object-fit: cover; }
.why h2 { color: var(--cream); font-size: 2.25rem; line-height: 1.1; }
@media (min-width: 768px) { .why h2 { font-size: 3rem; } }
.why p { margin-top: 1.5rem; color: oklch(97.2% .018 80 / .8); line-height: 1.625; }
.why p + p { margin-top: 1rem; }
.why .sign { margin-top: 2rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: oklch(97.2% .018 80 / .7); }
.why .sign::before { content: ""; width: 3rem; height: 1px; background: var(--spice); }
.rules { padding-block: 5rem; }
@media (min-width: 768px) { .rules { padding-block: 7rem; } }
.rules h2 { font-size: 2.25rem; line-height: 1.05; max-width: 42rem; }
@media (min-width: 768px) { .rules h2 { font-size: 3rem; } }
.rules__grid { margin-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .rules__grid { grid-template-columns: repeat(3, 1fr); } }
.rule { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.rule .n { font-family: var(--font-display); font-size: 1.875rem; color: var(--spice); font-variant-numeric: tabular-nums; }
.rule h3 { margin-top: .75rem; font-size: 1.5rem; }
.rule p { margin-top: .5rem; font-size: .875rem; color: var(--muted-fg); line-height: 1.625; }
.trad { position: relative; overflow: hidden; height: 50vh; min-height: 400px; color: var(--cream); text-align: center; display: grid; place-items: center; }
.trad > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trad::before { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(22% .025 60 / .6); }
.trad > div { position: relative; z-index: 2; max-width: 42rem; padding-inline: 1.25rem; }
.trad .hindi { font-size: 1.875rem; color: var(--spice); margin-bottom: 1rem; }
.trad p.display { font-size: 1.875rem; line-height: 1.15; }
@media (min-width: 768px) { .trad p.display { font-size: 2.25rem; } }

/* ---------- Recipes ---------- */
.rfilter { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.rfilter button { border-radius: 9999px; padding: .5rem 1rem; font: inherit; font-size: .875rem; background: var(--card); border: 1px solid var(--border); color: var(--muted-fg); cursor: pointer; }
.rfilter button.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.rgrid { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rgrid { grid-template-columns: repeat(3, 1fr); } }
.rtile { display: flex; flex-direction: column; border-radius: 1.25rem; overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); transition: transform .3s; }
.rtile:hover { transform: translateY(-3px); }
.rtile[hidden] { display: none; }
.rtile__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); }
.rtile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.rtile:hover .rtile__img img { transform: scale(1.04); }
.rtile__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }
.rtile__tag { align-self: flex-start; border-radius: 9999px; background: oklch(58% .165 38 / .1); color: var(--spice); padding: .125rem .625rem; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.rtile__title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; }
.rtile__desc { font-size: .875rem; color: var(--muted-fg); line-height: 1.55; }
.rtile__meta { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted-fg); }
.rtile__meta .i { width: .8rem; height: .8rem; }

.rhead { padding-top: 2.5rem; }
@media (min-width: 768px) { .rhead { padding-top: 3.5rem; } }
.crumbs { font-size: .8rem; color: var(--muted-fg); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--spice); }
.crumbs span { margin-inline: .25rem; }
.rhead .eyebrow { margin-bottom: .5rem; }
.rhead h1 { font-size: 2.4rem; line-height: 1.02; max-width: 48rem; }
@media (min-width: 768px) { .rhead h1 { font-size: 3.75rem; } }
.rhead__desc { margin-top: 1rem; max-width: 42rem; font-size: 1.0625rem; line-height: 1.6; color: var(--muted-fg); }
.rmeta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; font-size: .875rem; }
.rmeta b { font-weight: 600; margin-right: .25rem; color: var(--spice); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
.rhero { margin: 2rem 0 0; }
.rhero img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 1.5rem; }
.rhero figcaption, .rcredit { margin-top: .6rem; font-size: .75rem; color: var(--muted-fg); }
.rhero figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.rbody { padding-top: 2.5rem; }
.rbody .entry-content > p, .rbody .wp-block-post-content > p { max-width: 44rem; font-size: 1.0625rem; line-height: 1.75; color: oklch(30% .025 60); margin: 0 0 1.25rem; }
.rcard { margin-top: 2.5rem; border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 1.5rem; scroll-margin-top: 6rem; }
@media (min-width: 768px) { .rcard { padding: 2.5rem; } }
.rcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rcard__top .eyebrow { margin-bottom: .25rem; }
.rcard h2 { font-size: 1.75rem; line-height: 1.1; }
@media (min-width: 768px) { .rcard h2 { font-size: 2.25rem; } }
.rcard__times { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
@media (min-width: 640px) { .rcard__times { grid-template-columns: repeat(5, 1fr); } }
.rcard__times > div { background: var(--cream); padding: .75rem 1rem; }
.rcard__times dt { font-size: .65rem; text-transform: uppercase; letter-spacing: .16em; color: var(--spice); }
.rcard__times dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.05rem; }
.rcard__body { margin-top: 2rem; display: grid; gap: 2rem; }
@media (min-width: 900px) { .rcard__body { grid-template-columns: 2fr 3fr; gap: 3rem; } }
.rcard h3 { font-size: 1.375rem; margin-bottom: .75rem; }
.rcard h4 { font-family: var(--font-body); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-fg); font-weight: 600; margin: 1.25rem 0 .5rem; }
.rcard__ing ul { list-style: none; margin: 0; padding: 0; }
.rcard__ing li { border-bottom: 1px dashed var(--border); }
.rcard__ing label { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem 0; font-size: .925rem; line-height: 1.45; cursor: pointer; }
.rcard__ing input { margin-top: .2rem; accent-color: var(--spice); width: 1rem; height: 1rem; flex-shrink: 0; }
.rcard__ing input:checked + span { text-decoration: line-through; color: var(--muted-fg); }
.rcard__steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.rcard__steps ol > li { counter-increment: step; position: relative; padding-left: 2.75rem; scroll-margin-top: 6rem; }
.rcard__steps ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 9999px; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-family: var(--font-display); font-size: .95rem; }
.rcard__steps ol > li b { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
.rcard__steps ol > li p { margin-top: .25rem; font-size: .95rem; line-height: 1.65; color: oklch(30% .025 60); }
.rcard__tips { margin-top: 2rem; border-radius: 1rem; background: oklch(58% .165 38 / .07); padding: 1.25rem 1.5rem; }
.rcard__tips h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.rcard__tips ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .9rem; line-height: 1.55; }
.rcard__cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.related { padding-block: 4rem 1rem; }
.related h2 { font-size: 2rem; }
.related .link { margin-top: 1.5rem; }

@media print {
	.nhs-header-wrap, .nhs-footer, .nhs-float, .related, .rmeta .btn, .rcard__print, .rcard__cta, .crumbs, .rbody .wp-block-post-content > p { display: none !important; }
	body { background: #fff; }
	.rhero img { max-height: 260px; border-radius: 0; }
	.rcard { box-shadow: none; border: 0; padding: 0; }
	.rcard__body { grid-template-columns: 2fr 3fr; }
	.rcard__ing input { display: none; }
}

/* ---------- Credits ---------- */
.credits p a, .credit-list a { color: var(--spice); text-decoration: underline; text-underline-offset: 3px; }
.credit-list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; max-width: 42rem; }
.credit-list li { padding-bottom: .75rem; border-bottom: 1px solid var(--border); color: var(--muted-fg); }
.nhs-footer__bar a { text-decoration: underline; text-underline-offset: 3px; }
.nhs-footer__bar a:hover { color: var(--cream); }

/* WP admin-bar / block resets */
.wp-block-post-content { margin: 0; }
:where(.wp-site-blocks) > * { margin-block-start: 0 !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }