/* Design tokens — a Hindu Rajasthani wedding palette: maroon and gold lacquer,
   sindoor red, saffron, marigold and ivory. The lattice and arch forms come
   from the inspiration cards; the colour comes from the shaadi joda. */

:root {
  /* maroons — the base of the whole site */
  --night: #2b0810;
  --brand-deep: #47101c;
  --brand: #6e1526;
  --brand-soft: #8f2033;
  --brand-alt: #b52a34;   /* sindoor red, for highlights */

  /* golds */
  --gold-dark: #8f6b16;
  --gold: #c9a227;
  --gold-lit: #e8c86a;
  --gold-pale: #f0dfae;
  --champagne: #f7ecc9;

  /* warm accents */
  --saffron: #dd6f16;
  --marigold: #f0a72a;
  --marigold-deep: #c9760a;
  --haldi: #f2c230;
  --fuchsia: #a8195a;     /* sangeet */
  --leaf: #2f6b3f;        /* only ever leaves and stems */

  /* neutrals */
  --ivory: #fdfaf1;
  --cream: #f9f2e2;
  --sand: #f0e6d2;
  --parchment: #efe3c8;
  --ink: #23201a;
  --muted: #7b7062;
  --line: #e0d3b8;
  --line-dark: rgba(240, 223, 174, .22);

  --ok: #1f7a4d;
  --warn: #b4711a;
  --bad: #9a1b24;

  /* type */
  --display: 'Cinzel', 'Marcellus', Georgia, serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Italianno', 'Cormorant Garamond', cursive;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --deva: 'Tiro Devanagari Hindi', var(--serif);

  /* Type scale. Fluid, so nothing jumps at a breakpoint, and deliberately far
     taller than the 50px ceiling it replaces: when the headline is set this
     large it becomes the artwork, which is how the page carries itself without
     any photography. The small end of each clamp is what phones get, so check
     both ends before changing one. */
  --fs-mega: clamp(3.6rem, 13.5vw, 9.5rem);
  --fs-display: clamp(2.5rem, 7.4vw, 5.25rem);
  --fs-h2: clamp(1.95rem, 4.6vw, 3.1rem);
  --fs-h3: clamp(1.28rem, 2.3vw, 1.75rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .66rem;

  /* editorial rhythm */
  --measure: 58ch;          /* a line length that is actually readable */
  --gutter: clamp(20px, 5vw, 60px);
  --rule: rgba(201, 162, 39, .34);

  /* Film grain, as a tiled SVG so it costs nothing to download. Laid over the
     flat brand fills at very low opacity, it is the difference between "printed
     on card" and "filled with a hex value". */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  /* gradients */
  --grad-gold: linear-gradient(135deg, #8f6b16 0%, #e8c86a 26%, #fff6d8 46%, #e8c86a 66%, #a97f1c 100%);
  --grad-brand: linear-gradient(165deg, #6e1526 0%, #47101c 55%, #2b0810 100%);
  --grad-hero: radial-gradient(140% 100% at 50% 0%, #7d1a2c 0%, #47101c 46%, #2b0810 100%);
  --grad-door: linear-gradient(115deg, #5f1220 0%, #7d1a2c 30%, #47101c 62%, #691424 100%);

  /* Jaali lattice as a repeating background tile. Tiling at a fixed pixel size
     is what keeps the circles round — a stretched SVG turns them into ovals. */
  --jaali-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23d8b45a' stroke-width='1'%3E%3Cpath d='M0 0L26 26M26 0L0 26'/%3E%3Ccircle cx='13' cy='13' r='7.4'/%3E%3Ccircle cx='0' cy='0' r='4.4'/%3E%3Ccircle cx='26' cy='0' r='4.4'/%3E%3Ccircle cx='0' cy='26' r='4.4'/%3E%3Ccircle cx='26' cy='26' r='4.4'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-lg: 0 40px 90px -40px rgba(43, 8, 16, .6);
  --shadow: 0 18px 44px -22px rgba(43, 8, 16, .42);
  --shadow-sm: 0 6px 18px -10px rgba(43, 8, 16, .34);

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1160px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- reset ----------
   tokens.css is the only base stylesheet the invitation and portal load, so it
   carries the reset. Without border-box, every padded element that is also
   width:100% overflows its parent. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }

a { color: var(--brand); }

.deva { font-family: var(--deva); }

/* ---------- gold text ---------- */

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* A slow shimmer sweep across gold headings. */
.gold-shimmer {
  background: linear-gradient(100deg,
    #a97f1c 0%, #e8c86a 18%, #fff8e0 30%, #e8c86a 42%, #a97f1c 60%, #a97f1c 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 190% 0; }
  100% { background-position: -60% 0; }
}

/* ---------- ornamental rules ---------- */

.orn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 22px auto; max-width: 460px; color: var(--gold);
}
.orn::before, .orn::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.orn i { font-style: normal; font-size: 14px; letter-spacing: .2em; }
.orn--dark { color: var(--gold-lit); }

/* ---------- jaali (lattice) background ---------- */

.jaali {
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 13px);
  opacity: .1;
}

/* ---------- scrollbar ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); }
*::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold); }

::selection { background: var(--gold); color: var(--night); }