/* Bhook: one stylesheet for the brand. Every public page links it: landing, /app, /r/*, /recipes,
   /pricing, guides, /vs/*, /legal, 404. Tokens first, then the shared header and footer.
   Pages may add layout of their own, but colours, type, radius and spacing come from here.
   Contrast: every text token below is >= 4.5:1 on the surface it is meant for (tests/ui). */
/* Fonts are self-hosted (/fonts, SIL OFL): no render-blocking trip to another origin.
   latin-ext (which has ₹) only downloads on pages that use one of its characters. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Devanagari and Tamil (the Hindi and Tamil recipe pages): fetched only when a page uses those
   characters (unicode-range), so English pages never download them. Noto Sans, SIL OFL. */
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/noto-sans-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/noto-sans-tamil.woff2) format('woff2');unicode-range:U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC}
:root{
  /* type */
  --font-serif:'Fraunces','Noto Sans Devanagari','Noto Sans Tamil',Georgia,'Times New Roman',serif;
  --font-sans:'Inter','Noto Sans Devanagari','Noto Sans Tamil',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* brand */
  --ember:#e8853a; --ember-soft:#f2a65a; --gold:#e4b565;
  --on-ember:#1a0e04;            /* text on the ember button: 7.4:1 */
  --ember-ink:#9e4c0c;           /* ember text/links on light surfaces: 5.6:1 on --paper */
  /* night (landing, header, footer) */
  --night:#0e0a06; --night-2:#171009; --cream:#f5ede0; --cream-dim:#d2c6b2;
  /* day (app, recipes, guides, legal) */
  --paper:#faf9f7; --card:#ffffff; --soft:#fdf1e6; --text:#231c14; --text-dim:#645c52; --rule:#ece7df;
  /* spacing, radius, motion */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:96px; --sp-9:128px;
  --r-control:12px; --r-container:20px; --r-pill:100px;
  --header-h:64px;
  /* semantic: light by default; .theme-dark flips them */
  --bg:var(--paper); --fg:var(--text); --fg-dim:var(--text-dim); --line:var(--rule); --surface:var(--card); --link:var(--ember-ink);
}
.theme-dark{
  --bg:var(--night); --fg:var(--cream); --fg-dim:var(--cream-dim); --line:rgba(245,237,224,.12);
  --surface:rgba(245,237,224,.04); --link:var(--gold);
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans)}
.serif{font-family:var(--font-serif)}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--sp-5)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--text);padding:10px 16px;border-radius:0 0 var(--r-control) 0}
.skip:focus{left:0}
.balance{text-wrap:balance}

/* buttons: one primary style everywhere */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(100deg,var(--ember),var(--ember-soft));
  color:var(--on-ember);font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1.2;padding:12px 22px;border:0;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;box-shadow:0 8px 30px -10px rgba(232,133,58,.6);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px -10px rgba(232,133,58,.8)}

/* ---- shared header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,10,6,.9);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid rgba(245,237,224,.08);color:var(--cream);font-family:var(--font-sans)}
.site-header .sh-in{max-width:1160px;margin:0 auto;min-height:var(--header-h);padding:10px var(--sp-5);display:flex;align-items:center;gap:var(--sp-5)}
.sh-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-serif);font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--cream);text-decoration:none}
.sh-logo img{width:22px;height:22px}
.sh-nav{display:flex;gap:var(--sp-5);margin-right:auto}
.sh-nav a,.sh-signin{color:var(--cream);text-decoration:none;font-size:15px;font-weight:500;opacity:.92}
.sh-nav a:hover,.sh-signin:hover{opacity:1;color:var(--gold)}
.sh-nav a[aria-current="page"]{color:var(--gold)}
.sh-act{display:flex;align-items:center;gap:var(--sp-4)}
.sh-act .btn-primary{padding:10px 18px;font-size:14.5px}
.sh-menu{display:none;position:relative}
.sh-menu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-control);color:var(--cream)}
.sh-menu summary::-webkit-details-marker{display:none}
.sh-menu summary svg{width:22px;height:22px}
.sh-panel{position:absolute;right:0;top:48px;min-width:200px;background:var(--night-2);border:1px solid rgba(245,237,224,.14);border-radius:var(--r-control);
  padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.sh-panel a{color:var(--cream);text-decoration:none;padding:11px 14px;border-radius:8px;font-size:15px}
.sh-panel a:hover{background:rgba(245,237,224,.07);color:var(--gold)}
@media(max-width:760px){
  .sh-nav,.sh-act .sh-signin{display:none}
  .sh-act{margin-left:auto;gap:var(--sp-2)}
  .sh-menu{display:block}
  .site-header .sh-in{padding:8px var(--sp-4);gap:var(--sp-3)}
}
@media(max-width:340px){.sh-logo{font-size:19px}.sh-act .btn-primary{padding:9px 14px;font-size:14px}}
/* /app: the account menu replaces Sign in / Start free once signed in */
.authed .sh-signin,.authed .sh-act .btn-primary,.authed .sh-menu .sh-auth{display:none}

/* ---- shared footer ---- */
.site-footer{background:var(--night);color:var(--cream-dim);font-family:var(--font-sans);font-size:14px;line-height:1.6;border-top:1px solid rgba(245,237,224,.1)}
.site-footer .sf-in{max-width:1160px;margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-6)}
.sf-cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:var(--sp-6)}
.site-footer p,.site-footer li{color:var(--cream-dim);font-size:14px;margin:0}
.sf-brand p{margin-top:10px;max-width:24ch}
.sf-col h2{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.sf-col ul{list-style:none;margin:0;padding:0}
.sf-col li{margin:0 0 8px}
.sf-col a{color:var(--cream);text-decoration:none}
.sf-col a:hover{color:var(--gold);text-decoration:underline}
.sf-base{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid rgba(245,237,224,.1);display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;font-size:13px}
.sf-base a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}
.sf-base .heart{color:var(--ember-soft)}
@media(max-width:900px){.sf-cols{grid-template-columns:repeat(2,1fr)}.sf-brand{grid-column:1/-1}}
@media(max-width:380px){.sf-cols{grid-template-columns:1fr}}
/* Phones: every header and footer link is a 44px tap target (SEO-01, Lighthouse mobile). */
@media(max-width:760px){
  .sh-logo,.sh-act .btn-primary{min-height:44px}
  .sh-menu summary{width:44px;height:44px}
  .sf-col li{margin:0}
  .sf-col a,.sf-base a{display:inline-flex;align-items:center;min-height:44px}
}
/* "Keep reading" on content pages (functions/_chrome.js related()) */
.related{max-width:708px;margin:var(--sp-6) auto 0;padding:var(--sp-5) 0 0;border-top:1px solid var(--line)}
.related h2{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 12px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.related a{display:flex;align-items:center;min-height:44px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-control);color:var(--fg);text-decoration:none;font-weight:500;font-size:15px;line-height:1.35}
.related a:hover{border-color:var(--ember)}
@media print{.site-header,.site-footer,.related{display:none}}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--fg);font-family:var(--font-sans);font-weight:600;font-size:15px;
  line-height:1.2;padding:11px 21px;border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none;cursor:pointer}
.btn-ghost:hover{border-color:var(--ember)}