/* The site's styles (the redesign, 2026-10-31): the design of mockup/src.html (mockup v2, 32e54df), with
   the fonts self-hosted at fixed weights (tools/build_fonts.py, issue 113). */
@font-face { font-family: "Eczar"; src: url("../fonts/eczar-latin-600.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20B9, U+2212; }
@font-face { font-family: "Eczar"; src: url("../fonts/eczar-devanagari-600.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100%; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "Anek Latin"; src: url("../fonts/anek-latin-400.woff2") format("woff2"); font-weight: 300 500; font-stretch: 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20B9, U+2212; }
@font-face { font-family: "Anek Latin"; src: url("../fonts/anek-latin-600.woff2") format("woff2"); font-weight: 501 800; font-stretch: 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20B9, U+2212; }
@font-face { font-family: "Anek Latin"; src: url("../fonts/anek-latin-condensed-650.woff2") format("woff2"); font-weight: 300 800; font-stretch: 75% 90%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20B9, U+2212; }
@font-face { font-family: "Anek Devanagari"; src: url("../fonts/anek-devanagari-400.woff2") format("woff2"); font-weight: 300 500; font-stretch: 75% 100%; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "Anek Devanagari"; src: url("../fonts/anek-devanagari-600.woff2") format("woff2"); font-weight: 501 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF; }
:root {
  /* Layout: the card is the one physical object, held on an oxblood band. Every other section is set like a
     well-made almanac page: an asymmetric 12-column grid, bilingual section marks, and yantra construction
     lines as the only ornament. Only the card casts a shadow.
     One theme, by the owner's decision of 29 October 2026: the night ground and the oxblood band. */
  --ground: #160D0C;
  --ground-2: #1F1311;
  --raised: #241715;
  --ink: #F3E8DF;
  --ink-2: #CFBAB0;
  --ink-3: #A99188;
  --rule: #3A2723;
  --rule-strong: #846A62;
  --accent: #E2B55E;
  --on-accent: #2A110E;
  --accent-ink: #EDBE6E;
  --gold: #E2B55E;
  --gold-ink: #E2B55E;
  --signal: #F2A24A;
  --signal-on-band: #F2A24A;
  --focus: #F2B65F;
  --band: #2B100D;
  --band-2: #3A1714;
  --band-ink: #F6EBDD;
  --band-ink-2: #DCC6B4;
  --shadow: 0 0 0;
  --glare: 255 248 232;
  /* the physical card's own inks: the same in both themes */
  --card-maroon: #632822;
  --card-maroon-2: #4C2924;
  --card-hex: #7B3A31;
  --card-gold-1: #A8792A;
  --card-gold-2: #F2D99A;
  --card-gold-3: #CFA046;
  --card-type: #EBC871;
  --card-ink: #4C2924;
  --card-photo: #EADFC9;
  --card-paper: #FFFDF8;
  --card-qr: #241310;
  --card-saffron-1: #E5952A;
  --card-saffron-2: #F7C858;
  --flag-saffron: #FF9933;
  --flag-white: #FFFFFF;
  --flag-green: #138808;
  --flag-navy: #000080;

  --font-display: "Eczar", Georgia, serif;
  --font-text: "Anek Latin", "Anek Devanagari", "Segoe UI", system-ui, sans-serif;
  --font-deva: "Eczar", "Anek Devanagari", "Nirmala UI", "Mangal", serif;
  --font-card: "Anek Latin", "Anek Devanagari", "Arial Narrow", sans-serif;

  --step-hero: clamp(2.6rem, 1.5rem + 4.4vw, 5.25rem);
  --step-2: clamp(1.9rem, 1.35rem + 2.1vw, 3.1rem);
  --step-3: clamp(1.3rem, 1.16rem + .55vw, 1.6rem);
  --step-lede: clamp(1.125rem, 1.06rem + .3vw, 1.3rem);
  --step-body: 1.0625rem;
  --step-small: .9375rem;
  --step-caption: .875rem;

  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 68px;
  color-scheme: dark;
}

@property --foil { syntax: "<angle>"; inherits: false; initial-value: 115deg; }

*, *::before, *::after { box-sizing: border-box; }
html { interpolate-size: allow-keywords; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 45; background: var(--band); }
html:has(dialog[open]) { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--gold) 45%, var(--ground)); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[lang="hi"], [lang="mr"], .deva { letter-spacing: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: 1280px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--raised); color: var(--ink); padding: 12px 16px; border-radius: var(--radius); }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---------- Mockup chrome (not part of the site) ---------- */

/* ---------- Site header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; container-type: scroll-state; view-transition-name: site-header; }
.site-header__bar { background: var(--band); color: var(--band-ink); border-bottom: 1px solid transparent; transition: border-color .25s; }
.site-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); transition: min-height .25s var(--ease); }
@container scroll-state(stuck: top) {
  .site-header__bar { border-bottom-color: color-mix(in oklab, var(--gold) 42%, transparent); }
  .site-header__inner { min-height: 58px; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; flex-shrink: 0; min-height: 44px; }
.brand__mark { width: 34px; height: 34px; fill: var(--gold); flex-shrink: 0; }
.brand__word { font: 650 1.0625rem/1 var(--font-card); font-stretch: 80%; letter-spacing: .05em; }
.brand__word span { color: var(--gold); }
.nav { display: none; align-items: center; gap: 2px; margin-left: 18px; }
.nav__item { position: relative; }
.nav__btn, .nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0;
  background: transparent; color: var(--band-ink-2); text-decoration: none; font-weight: 500; border-radius: var(--radius);
}
.nav__btn:hover, .nav__link:hover { color: var(--band-ink); }
.nav__btn svg { width: 16px; height: 16px; transition: rotate .2s; }
.nav__item:has(:popover-open) .nav__btn { color: var(--band-ink); }
.nav__item:has(:popover-open) .nav__btn svg { rotate: 180deg; }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--band-ink-2); border-radius: var(--radius); }
.icon-btn:hover { color: var(--band-ink); }
.icon-btn svg { width: 20px; height: 20px; }
.lang { display: none; align-items: center; gap: 2px; margin-right: 6px; }
.lang a { min-height: 44px; min-width: 40px; display: inline-grid; place-items: center; color: var(--band-ink-2); text-decoration: none; font: 500 1rem/1.5 var(--font-deva); }
.lang a[aria-current="true"] { color: var(--band-ink); font-family: var(--font-text); font-weight: 600; }
.hdr-account { display: none; }
.hdr-signin { display: none; align-items: center; min-height: 44px; padding: 0 10px; color: var(--band-ink-2); text-decoration: none; }
.hdr-signin:hover { color: var(--band-ink); }
.hdr-actions .hdr-cta { display: none; --b-bg: var(--gold); --b-ink: var(--band); }
/* Phones: logo and menu. From 700 px (tablets, portrait) the primary action joins them; from 1000 px (tablets,
   landscape) the menus; from 1200 px language and sign-in, and the menu button goes. */
@media (min-width: 700px) { .hdr-actions .hdr-cta { display: inline-flex; } }
@media (min-width: 1000px) { .nav { display: inline-flex; } }
@media (min-width: 1200px) {
  .lang, .hdr-signin, .hdr-account { display: inline-flex; }
  .menu-btn { display: none; }
}
.menu {
  inset: auto; margin: 6px 0 0; padding: 20px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--raised); color: var(--ink); width: min(660px, calc(100vw - 32px));
  box-shadow: 0 28px 60px -28px rgb(var(--shadow) / .5);
  position-area: block-end span-inline-end; position-try-fallbacks: flip-inline;
  opacity: 1; translate: 0 0;
  transition: opacity .2s, translate .2s, overlay .2s allow-discrete, display .2s allow-discrete;
}
.menu:not(:popover-open) { opacity: 0; translate: 0 -6px; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -6px; } }
@supports not (position-area: block-end) {
  .menu { position: fixed; inset: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 52px) auto auto 50%; translate: -50% 0; }
  .menu:not(:popover-open) { translate: -50% -6px; }
}
.menu--narrow { width: min(380px, calc(100vw - 32px)); }
.menu__grid { display: grid; gap: 20px 28px; }
@media (min-width: 640px) { .menu__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.menu__h { color: var(--ink-3); font-size: var(--step-caption); font-weight: 600; margin-bottom: 6px; }
.menu__list { display: grid; }
.menu__list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; margin-inline: -10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.menu__list a:hover { background: var(--ground-2); }
.menu__list small { color: var(--ink-3); font-size: var(--step-caption); font-variant-numeric: tabular-nums; }
.menu__list--desc a { display: grid; gap: 0; }
.menu__feature { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 8px 10px; margin-inline: -10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.menu__feature:hover { background: var(--ground-2); }
.menu__feature .face { width: 76px; padding: 6%; }
.menu__feature .face__deva { font-size: 1rem; }
.menu__feature .face__latin, .menu__feature .face__brand, .menu__feature .face__mark { display: none; }
.menu__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }

/* Mobile navigation */
.mnav { margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: var(--band); color: var(--band-ink); }
.mnav::backdrop { background: rgb(var(--shadow) / .5); }
.mnav[open] { animation: mnav-in .28s var(--ease); }
@keyframes mnav-in { from { opacity: 0; translate: 0 -12px; } }
.mnav__inner { min-height: 100%; display: grid; align-content: start; gap: 28px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
.mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.mnav__group { display: grid; }
.mnav__h { color: var(--band-ink-2); font-size: var(--step-caption); font-weight: 600; margin-bottom: 4px; }
.mnav__group a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-bottom: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); color: var(--band-ink); text-decoration: none; font-size: 1.125rem; }
.mnav__group a small { color: var(--band-ink-2); font-size: var(--step-caption); }

/* ---------- Shared parts ---------- */
/* Every content grid starts as one column that may shrink below its content's width. Without this, from 641 to
   999 px the collection rail's tiles (230 px minimum each) set the implicit column's width and the page grew to
   1290 px (tablet pass, 29 October). The media queries below add the wider layouts. */
.split, .anat, .season, .kh, .news__grid, .pdp__grid, .pdp__more, .hero__grid, .journey, .occ__panel, .cal { grid-template-columns: minmax(0, 1fr); }
.btn {
  --b-bg: var(--accent); --b-ink: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--radius); background: var(--b-bg); color: var(--b-ink);
  font: 600 1rem/1 var(--font-text); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent);
  transition: background-color .2s, translate .15s;
}
.btn:hover { background: color-mix(in oklab, var(--b-bg) 86%, var(--b-ink)); }
.btn:active { translate: 0 1px; }
.btn svg { width: 18px; height: 18px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.btn--quiet { --b-bg: transparent; --b-ink: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn--quiet:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor 0 0) left calc(100% - 9px) / 0 1px no-repeat; transition: background-size .3s var(--ease);
}
.link-arrow:hover { background-size: calc(100% - 26px) 1px; }
.link-arrow svg { width: 18px; height: 18px; transition: translate .2s; }
.link-arrow:hover svg { translate: 3px 0; }
.band {
  background: var(--band); color: var(--band-ink);
  --ink: var(--band-ink); --ink-2: var(--band-ink-2); --ink-3: var(--band-ink-2);
  --rule: color-mix(in oklab, var(--gold) 24%, var(--band)); --rule-strong: color-mix(in oklab, var(--gold) 55%, var(--band));
  --accent: var(--gold); --on-accent: var(--band); --accent-ink: var(--gold); --gold-ink: var(--gold);
  --focus: var(--gold); --raised: var(--band-2); --ground: var(--band); --ground-2: var(--band-2); --signal: var(--signal-on-band);
}
.secmark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--ink-3); font-weight: 600; font-size: var(--step-small); }
.secmark .deva { font: 500 1.375rem/1.5 var(--font-deva); color: var(--gold-ink); }
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec--alt { background: var(--ground-2); }
.sec h2 { font-size: var(--step-2); margin-block: 12px 18px; }
.lede { font-size: var(--step-lede); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.split { display: grid; gap: 36px 64px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.caption { color: var(--ink-3); font-size: var(--step-caption); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); translate: -50% 0; z-index: 60; width: max-content; max-width: calc(100vw - 32px); background: var(--ink); color: var(--ground); padding: 12px 16px; border-radius: 8px; font-size: var(--step-small); box-shadow: 0 16px 40px -18px rgb(var(--shadow) / .6); }

/* ---------- The card (live SVG render) ---------- */
.bcard { --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 18%; perspective: 1500px; width: 100%; touch-action: pan-y; }
.bcard__tilt {
  position: relative; aspect-ratio: 856 / 540; border-radius: 3.72% / 5.9%;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease);
  box-shadow: 0 1px 1px rgb(var(--shadow) / .35), 0 14px 30px -10px rgb(var(--shadow) / .55), 0 40px 70px -30px rgb(var(--shadow) / .55);
}
.bcard.is-active .bcard__tilt { transition-duration: .12s; }
.bcard__svg { width: 100%; height: 100%; border-radius: inherit; }
.bcard__sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background:
    radial-gradient(110% 90% at var(--mx) var(--my), rgb(var(--glare) / .6), transparent 46%),
    linear-gradient(var(--foil), transparent 32%, rgb(var(--glare) / .5) 47%, transparent 62%);
}
@media (prefers-reduced-motion: no-preference) { .bcard__sheen { animation: foil 9s ease-in-out infinite alternate; } }
@keyframes foil { from { --foil: 95deg; } to { --foil: 165deg; } }
.c-type { fill: var(--card-type); font-family: var(--font-card); font-stretch: 75%; font-weight: 650; }
.c-ink { fill: var(--card-ink); }
.c-shri { font: 600 46px var(--font-deva); fill: var(--card-ink); }
.c-label { font: 700 27px var(--font-card); font-stretch: 75%; fill: var(--card-ink); letter-spacing: .02em; }
.c-dob { font-size: 24px; font-weight: 500; }
.c-num { font-size: 44px; letter-spacing: .04em; }
.c-brand { font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.c-rule { stroke: var(--card-type); stroke-width: 1.5; }
.c-hex { fill: none; stroke: var(--card-hex); stroke-width: 1.3; }
.c-frame { fill: var(--card-maroon-2); }
.c-photo { fill: var(--card-photo); }
.c-sil { fill: var(--card-maroon); opacity: .3; }
.c-qr-bg { fill: var(--card-paper); }
.c-qr { fill: var(--card-qr); }
.c-flag-s { fill: var(--flag-saffron); } .c-flag-w { fill: var(--flag-white); } .c-flag-g { fill: var(--flag-green); }
.c-flag-n { fill: none; stroke: var(--flag-navy); stroke-width: 1.3; } .c-flag-nf { fill: var(--flag-navy); }

/* ---------- Card faces (typographic tiles) ---------- */
.tile { display: grid; gap: 14px; text-decoration: none; color: inherit; container-type: inline-size; min-width: 0; }
.face {
  position: relative; aspect-ratio: 856 / 540; border-radius: 3.72% / 5.9%; overflow: hidden;
  background-color: var(--card-maroon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24.249'%3E%3Cpath d='M28 12.12L21 24.25H7L0 12.12L7 0H21ZM28 12.12H42' fill='none' stroke='%237B3A31' stroke-width='1.1'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--card-maroon), var(--card-maroon-2));
  background-size: 30px auto, cover;
  display: grid; grid-template: "mark . brand" auto "deva deva deva" 1fr "latin latin latin" auto / auto 1fr auto;
  padding: 7% 7.5%; color: var(--card-type);
  box-shadow: 0 1px 1px rgb(var(--shadow) / .3), 0 12px 24px -14px rgb(var(--shadow) / .6);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.face::before { content: ""; position: absolute; inset: 4.5% 2.9%; border: 1px solid color-mix(in oklab, var(--card-type) 50%, transparent); border-radius: 2.2% / 3.6%; pointer-events: none; }
.face__mark { grid-area: mark; width: 13cqi; max-width: 30px; aspect-ratio: 1; fill: currentColor; }
.face__brand { grid-area: brand; font: 600 .75rem/1 var(--font-card); font-stretch: 80%; letter-spacing: .08em; opacity: .85; align-self: center; }
.face__deva { grid-area: deva; align-self: center; font: 600 clamp(1.25rem, 12cqi, 2.6rem)/1.5 var(--font-deva); }
.face__latin { grid-area: latin; font: 700 .8125rem/1 var(--font-card); font-stretch: 75%; letter-spacing: .06em; }
.face--long .face__deva { font-size: clamp(1.1rem, 8.6cqi, 2rem); }
.face--saffron { background-image: linear-gradient(135deg, var(--card-saffron-1), var(--card-saffron-2)); color: var(--card-ink); }
.tile:hover .face, .tile:focus-visible .face { translate: 0 -4px; box-shadow: 0 2px 2px rgb(var(--shadow) / .25), 0 24px 38px -18px rgb(var(--shadow) / .65); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .face { outline: 2px solid var(--focus); outline-offset: 4px; }
.tile__meta { display: grid; gap: 2px; }
.tile__deity { color: var(--ink-3); font-size: var(--step-caption); }
.tile__name { font: 600 1.1875rem/1.25 var(--font-display); color: var(--ink); }
.tile__tags { color: var(--ink-2); font-size: var(--step-small); }
.tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.tile__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__go { color: var(--accent-ink); font-weight: 600; font-size: var(--step-small); }
@container (inline-size < 230px) { .tile__tags { display: none; } }

/* ---------- Shared by the home, the shop, the product and the reference pages: the preview, its fields, the chips,
   the facts, the knowledge list, the newsletter band (the home's own rules are in home.css) ---------- */
:is(:lang(hi), :lang(mr)) :is(h1, h2, h3) { line-height: 1.28; letter-spacing: 0; }
.bcard__svg { transition: opacity .22s var(--ease); }
.bcard.is-swapping .bcard__svg { opacity: 0; }
.preview { width: min(100%, 560px); display: grid; gap: 14px; }
.preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.preview__head b { font: 600 1.125rem/1.3 var(--font-display); }
.preview__fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fld { display: grid; gap: 4px; min-width: 0; }
.fld label, .fld .lbl { font-size: var(--step-caption); color: var(--ink-3); }
.inp {
  min-height: 46px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background: var(--raised); color: var(--ink); min-width: 0;
}
.inp:focus-visible { outline-offset: 1px; }
.inp--name { field-sizing: content; min-inline-size: 13ch; max-inline-size: 100%; }
.inp--date { width: 11.5em; }
.file-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: var(--radius); border: 1px dashed var(--rule-strong); color: var(--ink); cursor: pointer; }
.file-btn svg { width: 18px; height: 18px; }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: transparent; color: var(--ink); font-weight: 500; display: inline-flex; gap: 8px; align-items: center;
}
.chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip[aria-pressed="true"] .n { color: color-mix(in oklab, var(--ground) 72%, var(--ink)); }
/* One, two or four across: never three and an orphan (the 820 px pass showed 3 + 1). */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; border-top: 1px solid var(--rule); }
@media (min-width: 600px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; color: var(--band-ink-2); font-size: var(--step-small); }
.fact svg { width: 18px; height: 18px; fill: var(--gold); flex-shrink: 0; margin-top: 2px; }
.fact strong { display: block; color: var(--band-ink); font-weight: 600; }
@media (min-width: 1200px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .fact { padding-right: 22px; }
  .fact + .fact { padding-left: 22px; border-left: 1px solid var(--rule); }
}
.kh { display: grid; gap: 0 40px; }
@media (min-width: 760px) { .kh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kh a { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; }
.kh__meta { color: var(--ink-3); font-size: var(--step-caption); }
.kh__title { font: 600 1.375rem/1.25 var(--font-display); color: var(--ink); }
.kh a:hover .kh__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.kh__text { color: var(--ink-2); }
.news { background: var(--band-2); }
.news__grid { display: grid; gap: 24px; align-items: end; padding-block: 56px; }
@media (min-width: 900px) { .news__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.news h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); display: flex; align-items: center; gap: 14px; }
.news h2 svg { width: 30px; height: 30px; flex-shrink: 0; }
.news p { color: var(--band-ink-2); margin-top: 10px; }
.news form { display: flex; flex-wrap: wrap; gap: 10px; }
.news .inp { flex: 1 1 240px; background: var(--band); }
.inp:user-invalid { border-color: var(--signal); }
.form-msg { flex-basis: 100%; color: var(--band-ink-2); font-size: var(--step-caption); }
/* the bead counter (FR-DES-15): the home's fourth step and the how-to guide's step 4 */
.mala { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center; margin-top: 14px; padding: 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--band-2); max-width: 560px; }
@media (max-width: 520px) { .mala { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.mala svg { width: 200px; height: auto; }
.mala .bead { fill: color-mix(in oklab, var(--band-ink) 12%, var(--band-2)); stroke: color-mix(in oklab, var(--gold) 45%, var(--band-2)); stroke-width: .6; transition: fill .2s; }
.mala .bead.on { fill: var(--gold); stroke: var(--gold); }
.mala .sumeru { fill: var(--gold); }
.mala .tassel { stroke: var(--gold); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.mala__count { font: 600 40px var(--font-display); fill: var(--band-ink); font-variant-numeric: tabular-nums; }
.mala__of { font: 500 13px var(--font-text); fill: var(--band-ink-2); }
.mala__side { display: grid; gap: 12px; }
.mala__side p { color: var(--band-ink-2); font-size: var(--step-small); }
.mala__btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .mala__btns { justify-content: center; } }
.slot { color: var(--ink-3); font-weight: 500; text-decoration: underline dashed var(--rule-strong); text-underline-offset: .3em; }
/* ---------- Phones: the buy bar ---------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--rule); translate: 0 110%; transition: translate .35s var(--ease);
}
.buybar.is-on { translate: 0 0; }
.buybar p { font-size: var(--step-small); color: var(--band-ink-2); }
.buybar b { color: var(--band-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .buybar { display: none; } }
html.buybar-on .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }

/* ---------- Motion: reveal on scroll, foil on hover ---------- */
@keyframes reveal { from { opacity: .35; translate: 0 26px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  }
}
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(var(--glare) / .2) 50%, transparent 65%); translate: -105% 0; transition: translate .9s var(--ease); }
.tile:hover .face::after, .tile:focus-visible .face::after { translate: 105% 0; }

/* ---------- Calendar ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; }
.seg button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 600; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--band); }
.calhead { padding-block: 26px 26px; }
.calhead__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; margin-top: 8px; }
.calhead h1 { font-size: var(--step-2); margin-block: 8px 6px; }
.calhead__sub { color: var(--band-ink-2); font-size: var(--step-small); }
.calctl { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.calnav { display: inline-flex; gap: 6px; }
.calnav button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 600; }
.calnav button:hover { border-color: var(--gold); }
.cal { display: grid; gap: 28px; padding-block: 30px 36px; }
@media (min-width: 1100px) {
  .cal { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .daypanel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 20px); }
}
.calgrid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.calgrid th { padding: 6px 6px 4px; color: var(--ink-3); font-size: var(--step-caption); font-weight: 600; text-align: left; }
.calgrid td { padding: 0; vertical-align: top; }
.day { width: 100%; min-height: 96px; display: grid; align-content: start; gap: 4px; padding: 8px 9px; text-align: left; border: 1px solid var(--rule); border-radius: 8px; background: var(--raised); color: var(--ink); }
.day:hover { border-color: var(--rule-strong); }
.day[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.day__n { justify-self: start; font: 600 1.375rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.day__t { color: var(--ink-3); font-size: .8125rem; line-height: 1.5; }
.day__f { color: var(--gold-ink); font-size: .8125rem; line-height: 1.5; font-weight: 600; }
.day.is-today .day__n, .aday.is-today .aday__d b { padding: 1px 9px; border-radius: 999px; background: var(--gold); color: var(--on-accent); }
.day.is-fest, .aday.is-fest { background: color-mix(in oklab, var(--gold) 10%, var(--raised)); }
.agenda { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 720px) { .calgrid { display: none; } .agenda { display: grid; gap: 6px; } }
.aday { width: 100%; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 10px 12px; text-align: left; border: 1px solid var(--rule); border-radius: 8px; background: var(--raised); color: var(--ink); }
.aday[aria-pressed="true"] { border-color: var(--gold); }
.aday__d { display: grid; justify-items: start; gap: 2px; }
.aday__info { display: grid; gap: 2px; min-width: 0; }
.aday__d b { font: 600 1.5rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.aday__d small { color: var(--ink-3); font-size: var(--step-caption); }
.daypanel { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--raised); }
.daypanel h2 { font-size: 1.375rem; line-height: 1.35; }
.daypanel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.daypanel dt { color: var(--ink-3); font-size: var(--step-small); }
.daypanel dd { margin: 0; font-weight: 600; }
.daypanel .slot { text-decoration: none; }
.daypanel__fest { padding: 12px 14px; border-radius: 8px; background: color-mix(in oklab, var(--gold) 12%, var(--raised)); display: grid; gap: 6px; }
.daypanel__fest b { color: var(--gold-ink); }
.calnote { color: var(--ink-3); font-size: var(--step-caption); max-width: 62em; }
[lang="hi"] .day__f, [lang="mr"] .day__f, .daypanel [lang] { line-height: 1.5; }

/* ---------- Footer ---------- */
.foot { padding-block: 64px 28px; }
.foot__grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; max-width: 30em; }
@media (min-width: 960px) { .foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); } .foot__brand { grid-column: auto; } }
.foot__brand p { color: var(--band-ink-2); }
.foot__h { font-weight: 600; color: var(--band-ink); margin-bottom: 6px; }
.foot__col a { display: block; padding: 6px 0; color: var(--band-ink-2); text-decoration: none; }
.foot__col a:hover { color: var(--band-ink); text-decoration: underline; }
.foot__note { max-width: 62em; color: var(--band-ink-2); font-size: var(--step-caption); margin-top: 40px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--band-ink-2); font-size: var(--step-caption); }
.foot__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot__bottom a { color: var(--band-ink-2); }

/* ---------- Shared by the shop, the picker, the reading, hub and system pages: the page head and the
   breadcrumb (the shop's own rules are in shop.css) ---------- */
.pagehead { background: var(--ground-2); padding-block: 36px 28px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-3); font-size: var(--step-caption); margin-bottom: 16px; }
.crumbs a { color: var(--ink-3); }
.pagehead h1 { font-size: var(--step-2); }
.pagehead .lede { margin-top: 12px; }
/* The hub template's tools (the blog index, V3.G8): the title search, the topic chips and the chosen chip's line. */
.hub-tools { display: grid; gap: 14px; margin-top: 28px; max-width: 46rem; }
.hub-tools .secmark { margin-top: 6px; }

/* ---------- Product ---------- */
.pdp { padding-block: 28px 88px; }
.pdp__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .pdp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.pdp__media { display: grid; gap: 18px; min-width: 0; }
.pdp__stage { padding: clamp(20px, 5vw, 56px); background: var(--ground-2); border-radius: 10px; display: grid; place-items: center; min-width: 0; }
.pdp__stage .bcard { width: min(100%, 580px); }
.pdp__stage img { width: min(100%, 580px); height: auto; border-radius: 3.72% / 5.9%; box-shadow: 0 1px 1px rgb(var(--shadow) / .35), 0 18px 34px -14px rgb(var(--shadow) / .55); }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; width: 150px; text-align: left; font-size: var(--step-caption); color: var(--ink-2); }
.thumb[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.thumb .face { padding: 6%; }
.thumb .face__deva { font-size: 1.05rem; }
.thumb .face__latin, .thumb .face__brand { display: none; }
.thumb img { border-radius: 3.72% / 5.9%; aspect-ratio: 856 / 540; object-fit: cover; width: 100%; height: auto; }
.thumb__none { aspect-ratio: 856 / 540; border: 1px dashed var(--rule-strong); border-radius: 6px; display: grid; place-items: center; text-align: center; padding: 6px; color: var(--ink-3); }
.pdp__info { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (min-width: 1000px) { .pdp__info { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px); } }
.pdp__deity { color: var(--gold-ink); font-weight: 600; }
.pdp__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.08; }
.pdp__price { font: 600 2rem/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fine { color: var(--ink-3); font-size: var(--step-caption); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--ink-2); }
.ticks svg { width: 20px; height: 20px; color: var(--gold-ink); margin-top: 3px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; border-block: 1px solid var(--rule); }
.trio div { padding: 14px 12px 14px 0; }
.trio div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.trio dt { font-weight: 600; font-size: var(--step-small); }
.trio dd { margin: 0; color: var(--ink-3); font-size: var(--step-caption); }
@media (max-width: 440px) { .trio { grid-template-columns: 1fr; } .trio div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }
.pdp__more { display: grid; gap: 40px; margin-top: 72px; }
@media (min-width: 1000px) { .pdp__more { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.pdp__more h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: 14px; }
.keep { display: grid; gap: 14px; }
.keep p { color: var(--ink-2); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; min-height: 52px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; transition: rotate .25s; flex-shrink: 0; color: var(--gold-ink); }
.faq details[open] summary svg { rotate: 45deg; }
.faq .a { padding-bottom: 18px; color: var(--ink-2); max-width: 40em; }
@supports selector(::details-content) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.related { margin-top: 80px; }
.related h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: 22px; }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 28px; }

/* ---------- Tables: the picker and the reading pages (a wide table scrolls inside its wrap, NFR-DES-11) ---------- */
.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--rule); border-radius: 8px; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--step-small); }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.table-wrap th { background: var(--ground-2); font-weight: 600; color: var(--ink); }
.table-wrap td { color: var(--ink-2); }
.table-wrap tr:last-child td { border-bottom: 0; }

/* ---------- View transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .2s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
  ::view-transition-group(card-hero) { animation-duration: .55s; animation-timing-function: var(--ease); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* the newsletter form's honeypot field, kept from the old form (marketing.css), off screen for people */
.field--honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* the hidden attribute wins over any display rule (the hidden occasion panels, the language notice) */
[hidden] { display: none !important; }