/* ============================================================ Subham & Aradhana — 31 January 2027, Puri Odia folk: pattachitra border + palette, jhoti line motifs (lotus, swapna padma, paddy sheaf, creeper, alta footprints). No gradients. No glass. No card shadows. Two-tone bands only. ============================================================ */ @font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; 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:'Fraunces'; src:url('fonts/fraunces-latin-ext.woff2') format('woff2'); font-weight:100 900; font-display:swap; 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Instrument Sans'; src:url('fonts/instrument-latin.woff2') format('woff2'); font-weight:400 700; font-display:swap; 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:'Noto Sans Oriya'; src:url('fonts/noto-oriya-sans.woff2') format('woff2'); font-weight:400 700; font-display:swap; unicode-range:U+0951-0952,U+0964-0965,U+0B01-0B77,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC; } /* Odia for the names. Noto Sans Oriya mispositions the ୁ matra under ଶ — the stem stops short and the loop starts left of it, leaving a visible gap. The serif cut joins them, and suits Fraunces besides. The eyebrow keeps the sans cut, which matches Instrument Sans and never hits that pair. Sizing is done with .nm.od below rather than @font-face size-adjust, which Safari does not support — there it was silently a no-op. */ @font-face { font-family:'Oriya Display'; src:url('fonts/noto-serif-oriya.woff2') format('woff2'); font-weight:400 700; font-display:swap; unicode-range:U+0B01-0B77,U+200C-200D,U+25CC; } :root{ --hingula:#B5341F; --alta:#C2182B; --ink:#1C1613; --turmeric:#D89B2B; --gold:#F5C24A; --cream:#F3E7D0; --serif:'Fraunces','Iowan Old Style',Georgia,serif; --sans:'Instrument Sans',-apple-system,'Helvetica Neue',sans-serif; --odia:'Noto Sans Oriya',serif; --pad:clamp(2.5rem,5.5vw,4.5rem); --gutter:clamp(1.25rem,5vw,4rem); --press:0 1px 0 rgba(255,255,255,.4),0 -1px 0 rgba(28,22,19,.10); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--serif); font-variation-settings:'opsz' 24,'SOFT' 20,'WONK' 0; font-feature-settings:'liga' 1,'dlig' 1,'onum' 1; font-size:clamp(1rem,.95rem + .3vw,1.12rem); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,p,ol,ul,address,figure,table{margin:0} address{font-style:normal} ::selection{background:var(--hingula);color:var(--cream)} .sprites{position:absolute;width:0;height:0;overflow:hidden} .grain{position:fixed;inset:0;width:100vw;height:100vh;opacity:.05; mix-blend-mode:multiply;pointer-events:none;z-index:90} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--cream); padding:.7rem 1.1rem;z-index:200} .skip:focus{left:1rem;top:1rem} /* ══════ bands ══════ */ .band{position:relative;width:100%} .band--cream{background:var(--cream);color:var(--ink)} .band--red{background:var(--hingula);color:var(--cream)} .band--ink{background:var(--ink);color:var(--cream)} .wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:var(--gutter)} .strip{position:relative;z-index:2;height:36px;background-repeat:repeat-x;background-position:center;background-size:84px 36px} .strip--dark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2236%22%20viewBox%3D%220%200%2084%2036%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231C1613%22%20stroke-width%3D%221.45%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208.4C14.7%2013.3%2013.3%2019.6%2021%2025.9C28.7%2019.6%2027.3%2013.3%2021%208.4Z%22%2F%3E%3Cpath%20d%3D%22M21%2013.3C18.2%2016.1%2017.5%2018.9%2021%2022.1C24.5%2018.9%2023.8%2016.1%2021%2013.3Z%22%2F%3E%3Cpath%20d%3D%22M21%2025.9C12.6%2024.5%208.4%2019.6%2010.5%2014%22%2F%3E%3Cpath%20d%3D%22M21%2025.9C29.4%2024.5%2033.6%2019.6%2031.5%2014%22%2F%3E%3Cpath%20d%3D%22M63%209.1L68.6%2018.2L63%2027.3L57.4%2018.2Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20fill%3D%22%23B5341F%22%20cx%3D%2263%22%20cy%3D%2218.2%22%20r%3D%222.4%22%2F%3E%3Ccircle%20fill%3D%22%23B5341F%22%20cx%3D%2221%22%20cy%3D%2218.2%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E")} .strip--light{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2236%22%20viewBox%3D%220%200%2084%2036%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F3E7D0%22%20stroke-width%3D%221.45%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208.4C14.7%2013.3%2013.3%2019.6%2021%2025.9C28.7%2019.6%2027.3%2013.3%2021%208.4Z%22%2F%3E%3Cpath%20d%3D%22M21%2013.3C18.2%2016.1%2017.5%2018.9%2021%2022.1C24.5%2018.9%2023.8%2016.1%2021%2013.3Z%22%2F%3E%3Cpath%20d%3D%22M21%2025.9C12.6%2024.5%208.4%2019.6%2010.5%2014%22%2F%3E%3Cpath%20d%3D%22M21%2025.9C29.4%2024.5%2033.6%2019.6%2031.5%2014%22%2F%3E%3Cpath%20d%3D%22M63%209.1L68.6%2018.2L63%2027.3L57.4%2018.2Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2263%22%20cy%3D%2218.2%22%20r%3D%222.4%22%2F%3E%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2221%22%20cy%3D%2218.2%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E")} /* mirrored so its rule lands on the page edge, not mid-field */ .strip--flip{transform:scaleY(-1)} /* The guard rules are drawn here rather than inside the repeating tile: a full-width stroke that ends at the tile edge gets anti-aliased on both sides, and at fractional background-size it leaves a hairline gap at every seam. */ .strip::before,.strip::after{content:'';position:absolute;left:0;right:0;pointer-events:none} .strip--light::before{top:0;height:1.5px;background:var(--cream)} .strip--light::after{bottom:0;height:1.5px;background:var(--cream)} /* Phoda Kumbha — the stepped temple border of Berhampuri Patta silk, Brahmapur. Hingula above so it carries the red band down into the cream; cream below on ink so the cream steps carry down into the footer. */ .strip.strip--kumbha-red{height:46px;background-size:84px 46px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2246%22%20viewBox%3D%220%200%2084%2046%22%3E%3Cpath%20fill%3D%22%23B5341F%22%20d%3D%22M3.0%2046.0L3.0%2037.5L6.8%2037.5L6.8%2029.0L10.7%2029.0L10.7%2020.5L14.5%2020.5L14.5%2012.0L18.4%2012.0L23.6%2012.0L27.5%2012.0L27.5%2020.5L31.3%2020.5L31.3%2029.0L35.1%2029.0L35.1%2037.5L39.0%2037.5L39.0%2046.0Z%22%2F%3E%3Cpath%20fill%3D%22%23B5341F%22%20d%3D%22M45.0%2046.0L45.0%2037.5L48.9%2037.5L48.9%2029.0L52.7%2029.0L52.7%2020.5L56.5%2020.5L56.5%2012.0L60.4%2012.0L65.6%2012.0L69.5%2012.0L69.5%2020.5L73.3%2020.5L73.3%2029.0L77.2%2029.0L77.2%2037.5L81.0%2037.5L81.0%2046.0Z%22%2F%3E%3Ccircle%20fill%3D%22%23F3E7D0%22%20cx%3D%220%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3Ccircle%20fill%3D%22%23F3E7D0%22%20cx%3D%2242%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3Ccircle%20fill%3D%22%23F3E7D0%22%20cx%3D%2284%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E")} .strip.strip--kumbha-cream{height:46px;background-size:84px 46px;background-color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2246%22%20viewBox%3D%220%200%2084%2046%22%3E%3Cpath%20fill%3D%22%23F3E7D0%22%20d%3D%22M3.0%2046.0L3.0%2037.5L6.8%2037.5L6.8%2029.0L10.7%2029.0L10.7%2020.5L14.5%2020.5L14.5%2012.0L18.4%2012.0L23.6%2012.0L27.5%2012.0L27.5%2020.5L31.3%2020.5L31.3%2029.0L35.1%2029.0L35.1%2037.5L39.0%2037.5L39.0%2046.0Z%22%2F%3E%3Cpath%20fill%3D%22%23F3E7D0%22%20d%3D%22M45.0%2046.0L45.0%2037.5L48.9%2037.5L48.9%2029.0L52.7%2029.0L52.7%2020.5L56.5%2020.5L56.5%2012.0L60.4%2012.0L65.6%2012.0L69.5%2012.0L69.5%2020.5L73.3%2020.5L73.3%2029.0L77.2%2029.0L77.2%2037.5L81.0%2037.5L81.0%2046.0Z%22%2F%3E%3Ccircle%20fill%3D%22%23B5341F%22%20cx%3D%220%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3Ccircle%20fill%3D%22%23B5341F%22%20cx%3D%2242%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3Ccircle%20fill%3D%22%23B5341F%22%20cx%3D%2284%22%20cy%3D%2230%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E")} .strip--dark::before{top:11.7%;height:1.45px;background:var(--ink)} .strip--dark::after{top:89.4%;height:1.45px;background:var(--ink)} /* ══════ shared type ══════ */ .eyebrow{font-family:var(--sans);font-size:.66rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:1.1rem} /* Odia body height per em is close to Latin cap height, so 1.6em rendered the script ~50% oversized next to its Latin label. 1.15em puts the body a touch above cap height, which is where the two read as the same size. */ .eyebrow .od{font-family:var(--odia);font-size:1.15em;letter-spacing:0; text-transform:none;vertical-align:0} .sep{color:var(--turmeric);padding-inline:.45em} .sec-h{font-size:clamp(1.9rem,1.15rem + 3.1vw,3.1rem);font-weight:400;line-height:1.07; font-variation-settings:'opsz' 110,'SOFT' 0,'WONK' 1;text-shadow:var(--press)} .note{font-size:.94rem;opacity:.8;max-width:34ch;margin-top:.9rem} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em} :where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--turmeric);outline-offset:3px} /* ══════ ornaments + their entrance ══════ */ .orn{display:block;overflow:visible;--rot:0deg;--o:1; animation:bloom 950ms cubic-bezier(.22,.61,.36,1) both} @keyframes bloom{ from{opacity:0;transform:scale(.84) rotate(calc(var(--rot) - 9deg))} to {opacity:var(--o);transform:scale(1) rotate(var(--rot))} } .trail--hero{animation-delay:.55s} .trail use{animation:step 620ms ease-out both} .trail use:nth-of-type(1){animation-delay:.50s} .trail use:nth-of-type(2){animation-delay:.78s} .trail use:nth-of-type(3){animation-delay:1.06s} .trail use:nth-of-type(4){animation-delay:1.34s} .trail use:nth-of-type(5){animation-delay:1.62s} .trail use:nth-of-type(6){animation-delay:1.90s} @keyframes step{from{opacity:0}to{opacity:1}} /* ══════ HERO ══════ */ /* the copy rises as the ornaments bloom, so everything lands at once */ @keyframes rise{ from{opacity:0;transform:translateY(20px)} to {opacity:1;transform:none} } .hero-copy .eyebrow, .names > span, .datebar{animation:rise 880ms cubic-bezier(.22,.61,.36,1) both} .hero .eyebrow{opacity:.85} .hero .dmeta{opacity:.8} .hero-copy .eyebrow {animation-delay:.06s} .names > *:nth-child(1){animation-delay:.14s} .names > *:nth-child(2){animation-delay:.24s} .names > *:nth-child(3){animation-delay:.32s} .datebar {animation-delay:.46s} .hero-art{position:absolute;left:0;right:0;top:36px;bottom:36px; overflow:hidden;pointer-events:none;z-index:0} .hero{display:flex;flex-direction:column;min-height:100svh;overflow:hidden; /* the two corner discs are a matched pair. The mandala's art stops short of its viewBox edge and the tarakasi's petals run to it, so matching the boxes leaves the tarakasi visibly wider — .94 matches the ink, which is what the eye reads. */ --mw:clamp(320px,56vw,880px);--fw:calc(var(--mw) * .94)} /* one centred column at every width — eyebrow, names, kalasha, date */ .hero-in{flex:1;position:relative;z-index:1;display:grid;align-content:center; grid-template-columns:1fr; grid-template-areas:"copy" "date"; row-gap:clamp(.5rem,1.8vh,1.25rem); justify-items:center;text-align:center; padding-block:clamp(1.75rem,4vh,3rem)} .hero-copy{grid-area:copy;width:100%} /* the kalasha sits where the ampersand was; sized in em so it tracks the names, which are themselves capped against vh. Trimming the cuff off the right left the pot at 52.0% of the frame, so a negative margin puts the pot itself back on the centre axis (a centred flex item shifts by half its margin) without cropping more. */ .kalasha{display:block;width:1.7em;height:auto;margin-block:.06em .01em; margin-left:-.068em; animation:bloom 1000ms cubic-bezier(.22,.61,.36,1) both;animation-delay:.24s} .datebar{grid-area:date;position:relative; border-top:1px solid rgba(28,22,19,.25);padding-top:1.1rem;margin-top:.4rem; width:min(100%,420px)} .names{display:flex;flex-direction:column;line-height:.94; font-size:clamp(2.1rem,min(7.6vw,11.5vh),6.2rem);font-weight:400;letter-spacing:-.014em; font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;text-shadow:var(--press)} /* Each line is a full-width centred box, so the glyphs can change width mid- juggle without ever moving the layout — the text breathes about the centre instead of pushing the block around. */ .names{align-items:stretch;text-align:center;width:100%} .nm{display:block;white-space:nowrap; font-family:'Fraunces','Oriya Display','Iowan Old Style',Georgia,serif} /* The names are Title Case, so their dominant mass is the x-height (45px), not the cap (75px). Odia's whole body is one height, so matching it to the cap reads far heavier. Noto Serif Oriya's body is 71px where Fraunces' cap is 75, so .87 lands it at ~0.82 of cap — between x-height and cap. */ .nm.od{font-size:.87em} .names .kalasha{align-self:center} .band--red .datebar{border-top-color:rgba(243,231,208,.35)} .dnum{font-family:var(--sans);font-weight:500;font-variation-settings:normal; font-feature-settings:'lnum' 1; font-size:clamp(1.35rem,.9rem + 1.9vw,2rem);line-height:1;letter-spacing:.16em} .dnum i{color:var(--turmeric);font-style:normal;padding-inline:.1em;font-weight:400} .dmeta{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em; text-transform:uppercase;opacity:.72;margin-top:.7rem} .paddy-bunch{position:absolute;bottom:-.75rem;left:clamp(0px,1vw,1.1rem); display:flex;align-items:flex-end} .paddy{color:var(--cream)} .paddy.p1{width:clamp(44px,4.6vw,70px);--rot:-14deg;--o:.46;animation-delay:.46s} .paddy.p2{width:clamp(60px,6.4vw,96px);--rot:-5deg;--o:.64;animation-delay:.52s;margin-left:-38px} .paddy.p3{width:clamp(50px,5.3vw,80px);--rot:5deg;--o:.54;animation-delay:.58s;margin-left:-42px} .paddy.p4{width:clamp(38px,4vw,60px);--rot:13deg;--o:.42;animation-delay:.64s;margin-left:-34px} .trail--hero{--alta:var(--cream);position:absolute;right:clamp(14px,2.4vw,54px);bottom:1%; width:clamp(86px,8.8vw,128px);--o:.92;--rot:-20deg;z-index:1} .mandala--hero{position:absolute; width:var(--mw);right:calc(var(--mw) / -2);top:calc(var(--mw) / -2); color:var(--cream);--o:.32;--rot:0deg;z-index:0;pointer-events:none; animation-duration:1600ms} /* Cuttack filigree, centred on the opposite corner so a quarter shows — counter-turning against the mandala, and slower, so the two never sync */ .tarakasi--hero{position:absolute; width:var(--fw);left:calc(var(--fw) / -2);top:calc(var(--fw) / -2); color:var(--cream);--o:.33;z-index:0; animation-duration:1500ms;animation-delay:.18s} .tarakasi--hero use{transform-box:view-box;transform-origin:250px 250px; animation:spin 150s linear infinite reverse} /* one revolution every two minutes — felt, not watched */ @keyframes spin{to{transform:rotate(360deg)}} .mandala--hero use{transform-box:view-box;transform-origin:250px 250px; animation:spin 120s linear infinite} /* ══════ CALENDAR ══════ */ .cal-band{padding-block:var(--pad)} .creeper{width:min(400px,66%);margin:0 auto clamp(1.6rem,3.5vw,2.4rem);color:var(--ink);--o:.9} .cal-band .eyebrow,.cal-band .sec-h{text-align:center} .cal-band .sec-h{margin-inline:auto;max-width:16ch} .cal-row{display:flex;align-items:center;justify-content:center; gap:clamp(.75rem,2.5vw,2rem);margin-top:clamp(1.6rem,3.5vw,2.4rem)} .lotus--cal{width:clamp(84px,9.5vw,140px);color:var(--ink);--o:.5;--rot:-10deg;flex:none} .lotus--cal{animation-delay:.2s} .lotus--flip{--rot:10deg} .cal{border-collapse:collapse;font-family:var(--sans);font-size:.88rem} .cal caption{font-family:var(--serif);font-variation-settings:'opsz' 100,'SOFT' 0,'WONK' 1; font-size:1.2rem;padding-bottom:.9rem;letter-spacing:.02em} .cal th{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase; opacity:.55;font-weight:500;padding-bottom:.55rem} .cal td,.cal th{width:2.5em;height:2.35em;text-align:center;padding:0} .cal td{opacity:.72;font-variant-numeric:lining-nums} .cal .mark{display:inline-grid;place-items:center;width:2.2em;height:2.2em; border-radius:50%;background:var(--hingula);color:var(--cream);opacity:1;font-weight:600} .cal td:has(.mark){opacity:1} /* ══════ VENUE ══════ */ /* chita jhoti: beaded rows, dotted triangles, grass fringe — conch white on hingula, tiled so it works at any width, phones included */ .jhoti{height:clamp(58px,7.5vw,104px);background-repeat:repeat-x; background-position:center bottom;background-size:auto 100%; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22150%22%20viewBox%3D%220%200%20120%20150%22%3E%3Cg%20fill%3D%22%23F3E7D0%22%3E%3Cellipse%20cx%3D%226.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2218.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2230.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2242.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2254.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2266.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2278.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2290.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22102.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22114.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22126.0%22%20cy%3D%227.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%226.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2218.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2230.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2242.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2254.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2266.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2278.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2290.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22102.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22114.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22126.0%22%20cy%3D%2217.5%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2260.0%22%20cy%3D%2232.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2252.0%22%20cy%3D%2243.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2268.0%22%20cy%3D%2243.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2244.0%22%20cy%3D%2254.8%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2260.0%22%20cy%3D%2254.8%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2276.0%22%20cy%3D%2254.8%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2236.0%22%20cy%3D%2266.2%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2252.0%22%20cy%3D%2266.2%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2268.0%22%20cy%3D%2266.2%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2284.0%22%20cy%3D%2266.2%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2228.0%22%20cy%3D%2277.6%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2244.0%22%20cy%3D%2277.6%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2260.0%22%20cy%3D%2277.6%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2276.0%22%20cy%3D%2277.6%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2292.0%22%20cy%3D%2277.6%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2220.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2236.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2252.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2268.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2284.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%22100.0%22%20cy%3D%2289.0%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2212.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2228.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2244.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2260.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2276.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%2292.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%22108.0%22%20cy%3D%22100.4%22%20rx%3D%222.9%22%20ry%3D%223.9%22%2F%3E%3Cellipse%20cx%3D%226.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2218.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2230.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2242.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2254.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2266.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2278.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%2290.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22102.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22114.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3Cellipse%20cx%3D%22126.0%22%20cy%3D%22116.0%22%20rx%3D%222.5%22%20ry%3D%223.3%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F3E7D0%22%20stroke-width%3D%220.85%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1.0%20150C1.1%20137.6%201.3%20126.7%201.4%20118.9%22%2F%3E%3Cpath%20d%3D%22M3.4%20150C3.8%20138.4%204.5%20128.2%204.8%20121.0%22%2F%3E%3Cpath%20d%3D%22M5.8%20150C6.4%20139.2%207.6%20129.8%208.2%20123.1%22%2F%3E%3Cpath%20d%3D%22M8.2%20150C9.1%20140.1%2010.8%20131.4%2011.6%20125.2%22%2F%3E%3Cpath%20d%3D%22M10.6%20150C11.7%20140.9%2013.9%20133.0%2015.1%20127.3%22%2F%3E%3Cpath%20d%3D%22M13.0%20150C14.4%20141.8%2017.1%20134.6%2018.5%20129.4%22%2F%3E%3Cpath%20d%3D%22M15.4%20150C17.0%20142.6%2020.3%20136.2%2021.9%20131.6%22%2F%3E%3Cpath%20d%3D%22M17.8%20150C19.7%20143.5%2023.4%20137.7%2025.3%20133.7%22%2F%3E%3Cpath%20d%3D%22M20.2%20150C22.3%20144.3%2026.6%20139.3%2028.7%20135.8%22%2F%3E%3Cpath%20d%3D%22M22.6%20150C25.0%20145.2%2029.7%20140.9%2032.1%20137.9%22%2F%3E%3Cpath%20d%3D%22M25.0%20150C27.6%20146.0%2032.9%20142.5%2035.5%20140.0%22%2F%3E%3Cpath%20d%3D%22M27.4%20150C30.3%20146.8%2036.0%20144.1%2038.9%20142.1%22%2F%3E%3Cpath%20d%3D%22M29.8%20150C32.9%20147.7%2039.2%20145.7%2042.3%20144.2%22%2F%3E%3Cpath%20d%3D%22M32.2%20150C29.3%20147.0%2023.4%20144.3%2020.5%20142.5%22%2F%3E%3Cpath%20d%3D%22M34.6%20150C31.9%20146.1%2026.6%20142.8%2023.9%20140.4%22%2F%3E%3Cpath%20d%3D%22M37.0%20150C34.6%20145.3%2029.8%20141.2%2027.3%20138.2%22%2F%3E%3Cpath%20d%3D%22M39.4%20150C37.2%20144.5%2032.9%20139.6%2030.7%20136.1%22%2F%3E%3Cpath%20d%3D%22M41.8%20150C39.9%20143.6%2036.1%20138.0%2034.2%20134.0%22%2F%3E%3Cpath%20d%3D%22M44.2%20150C42.5%20142.8%2039.2%20136.4%2037.6%20131.9%22%2F%3E%3Cpath%20d%3D%22M46.6%20150C45.2%20141.9%2042.4%20134.8%2041.0%20129.8%22%2F%3E%3Cpath%20d%3D%22M49.0%20150C47.8%20141.1%2045.5%20133.3%2044.4%20127.7%22%2F%3E%3Cpath%20d%3D%22M51.4%20150C50.5%20140.2%2048.7%20131.7%2047.8%20125.6%22%2F%3E%3Cpath%20d%3D%22M53.8%20150C53.1%20139.4%2051.8%20130.1%2051.2%20123.5%22%2F%3E%3Cpath%20d%3D%22M56.2%20150C55.8%20138.5%2055.0%20128.5%2054.6%20121.3%22%2F%3E%3Cpath%20d%3D%22M58.6%20150C58.5%20137.7%2058.2%20126.9%2058.0%20119.2%22%2F%3E%3Cpath%20d%3D%22M61.0%20150C61.1%20137.6%2061.3%20126.7%2061.4%20118.9%22%2F%3E%3Cpath%20d%3D%22M63.4%20150C63.8%20138.4%2064.5%20128.2%2064.8%20121.0%22%2F%3E%3Cpath%20d%3D%22M65.8%20150C66.4%20139.2%2067.6%20129.8%2068.2%20123.1%22%2F%3E%3Cpath%20d%3D%22M68.2%20150C69.1%20140.1%2070.8%20131.4%2071.6%20125.2%22%2F%3E%3Cpath%20d%3D%22M70.6%20150C71.7%20140.9%2073.9%20133.0%2075.1%20127.3%22%2F%3E%3Cpath%20d%3D%22M73.0%20150C74.4%20141.8%2077.1%20134.6%2078.5%20129.4%22%2F%3E%3Cpath%20d%3D%22M75.4%20150C77.0%20142.6%2080.3%20136.2%2081.9%20131.6%22%2F%3E%3Cpath%20d%3D%22M77.8%20150C79.7%20143.5%2083.4%20137.7%2085.3%20133.7%22%2F%3E%3Cpath%20d%3D%22M80.2%20150C82.3%20144.3%2086.6%20139.3%2088.7%20135.8%22%2F%3E%3Cpath%20d%3D%22M82.6%20150C85.0%20145.2%2089.7%20140.9%2092.1%20137.9%22%2F%3E%3Cpath%20d%3D%22M85.0%20150C87.6%20146.0%2092.9%20142.5%2095.5%20140.0%22%2F%3E%3Cpath%20d%3D%22M87.4%20150C90.3%20146.8%2096.0%20144.1%2098.9%20142.1%22%2F%3E%3Cpath%20d%3D%22M89.8%20150C92.9%20147.7%2099.2%20145.7%20102.3%20144.2%22%2F%3E%3Cpath%20d%3D%22M92.2%20150C89.3%20147.0%2083.4%20144.3%2080.5%20142.5%22%2F%3E%3Cpath%20d%3D%22M94.6%20150C91.9%20146.1%2086.6%20142.8%2083.9%20140.4%22%2F%3E%3Cpath%20d%3D%22M97.0%20150C94.6%20145.3%2089.8%20141.2%2087.3%20138.2%22%2F%3E%3Cpath%20d%3D%22M99.4%20150C97.2%20144.5%2092.9%20139.6%2090.7%20136.1%22%2F%3E%3Cpath%20d%3D%22M101.8%20150C99.9%20143.6%2096.1%20138.0%2094.2%20134.0%22%2F%3E%3Cpath%20d%3D%22M104.2%20150C102.5%20142.8%2099.2%20136.4%2097.6%20131.9%22%2F%3E%3Cpath%20d%3D%22M106.6%20150C105.2%20141.9%20102.4%20134.8%20101.0%20129.8%22%2F%3E%3Cpath%20d%3D%22M109.0%20150C107.8%20141.1%20105.5%20133.3%20104.4%20127.7%22%2F%3E%3Cpath%20d%3D%22M111.4%20150C110.5%20140.2%20108.7%20131.7%20107.8%20125.6%22%2F%3E%3Cpath%20d%3D%22M113.8%20150C113.1%20139.4%20111.8%20130.1%20111.2%20123.5%22%2F%3E%3Cpath%20d%3D%22M116.2%20150C115.8%20138.5%20115.0%20128.5%20114.6%20121.3%22%2F%3E%3Cpath%20d%3D%22M118.6%20150C118.5%20137.7%20118.2%20126.9%20118.0%20119.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")} .jhoti--flip{transform:scaleY(-1)} .venue-band{padding-block:0} .venue-band > .wrap{padding-block:clamp(2.25rem,5vw,3.75rem)} .framed{border:1px solid rgba(243,231,208,.4);padding:clamp(1.5rem,4vw,2.6rem); max-width:44rem;margin-inline:auto;text-align:center;position:relative} .framed::before,.framed::after{content:'';position:absolute;width:9px;height:9px; border:1px solid var(--turmeric)} .framed::before{top:-5px;left:-5px} .framed::after{bottom:-5px;right:-5px} .venue-band address{margin-top:.9rem;opacity:.85;letter-spacing:.02em} /* ══════ RSVP ══════ */ .rsvp-band{display:flex;flex-direction:column} .rsvp-band > .wrap{padding-block:var(--pad);position:relative} .saura--rsvp{position:absolute;right:6%;top:calc(var(--pad) - .25rem); width:clamp(148px,16vw,232px);color:var(--ink);--o:.42;--rot:0deg} #rsvp-form{margin-top:clamp(1.6rem,3.5vw,2.4rem);max-width:34rem} .field{margin-bottom:1.8rem;border:0;padding:0} .field > label,.choices legend{display:block;font-family:var(--sans);font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:.7rem;padding:0} #name{width:100%;font:inherit;font-size:1.1rem;color:var(--ink);caret-color:var(--hingula); background:transparent;border:0;border-bottom:1px solid rgba(28,22,19,.3);border-radius:0; padding:.55rem 0;transition:border-color 180ms ease} #name::placeholder{color:rgba(28,22,19,.38);font-size:.9rem} #name:hover{border-bottom-color:rgba(28,22,19,.6)} #name:focus{outline:0;border-bottom-color:var(--hingula);border-bottom-width:2px; padding-bottom:calc(.55rem - 1px)} .choice-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .choices input[type=radio]{position:absolute;opacity:0;width:1px;height:1px} .choices label{display:flex;align-items:center;gap:.75rem;padding:.95rem 1rem; border:1px solid rgba(28,22,19,.3);cursor:pointer;font-size:.98rem;line-height:1.25; transition:border-color 160ms ease,color 160ms ease,background-color 160ms ease} .choices label:hover{border-color:rgba(28,22,19,.65)} .choices .mk{flex:none;width:13px;height:13px;border:1px solid rgba(28,22,19,.5); border-radius:50%;transition:background-color 160ms ease,border-color 160ms ease} .choices input:checked + label{border-color:var(--hingula);color:var(--hingula); background:rgba(181,52,31,.05)} .choices input:checked + label .mk{background:var(--hingula);border-color:var(--hingula)} .choices input:focus-visible + label{outline:2px solid var(--turmeric);outline-offset:3px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} #submit{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--cream);background:var(--hingula);border:1px solid var(--hingula);border-radius:0; padding:1rem 2.4rem;cursor:pointer;transition:background-color 180ms ease,border-color 180ms ease} #submit:hover{background:var(--ink);border-color:var(--ink)} #submit[disabled]{opacity:.55;cursor:progress} .err{font-family:var(--sans);font-size:.78rem;color:#8E2B18;margin-top:.6rem} .form-err{margin-top:1.2rem} .thanks{margin-top:clamp(1.6rem,3.5vw,2.4rem);max-width:32ch} .thanks h3{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.2rem);font-weight:400;line-height:1.14; font-variation-settings:'opsz' 100,'SOFT' 0,'WONK' 1;text-shadow:var(--press)} .thanks p{margin-top:.9rem;opacity:.8} .thanks button{margin-top:1.2rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;background:none;border:0;padding:0;opacity:.75;cursor:pointer; color:inherit;border-bottom:1px solid rgba(28,22,19,.3)} .thanks button:hover{color:var(--hingula);border-bottom-color:var(--hingula)} /* ══════ FOOTER ══════ */ footer{padding-block:clamp(2.2rem,5vw,3.6rem) clamp(1.8rem,4vw,2.8rem);text-align:center} .creeper--sm{width:min(280px,58%);color:var(--cream);--o:.65;margin:0 auto clamp(1.4rem,3vw,2rem)} .fnote{font-size:1.02rem;line-height:1.65;opacity:.86;max-width:34ch; margin-inline:auto;font-variation-settings:'opsz' 60,'SOFT' 20,'WONK' 0} .fdate{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em; text-transform:uppercase;opacity:.55;margin-top:1.1rem} /* ══════ MOBILE ══════ */ @media (max-width:720px){ /* on phones the mandala rises from under the top border instead of the side */ .hero{--mw:min(118vw,520px)} /* the pot sits 6.5% left of the artwork's bounding-box centre, so the box is centred but the pot isn't — shift to optically centre it */ .mandala--hero{left:calc(50% - var(--mw) / 2);right:auto; top:calc(var(--mw) * -.58);--o:.34} .hero-art{top:28px;bottom:28px} /* the mandala rises from under the top border here, so the stack starts below it */ .hero-in{row-gap:clamp(.6rem,1.8vh,1.1rem); padding-block:calc(var(--mw) * .38) clamp(1.25rem,3vh,2rem)} .datebar{margin-top:0;width:min(100%,340px)} .names{font-size:clamp(2.4rem,17vw,5rem)} /* hero is centred on phones, so the stagger indents serve no purpose — and a 7% indent on the longer name is enough to force it onto a second line */ /* the bunch sits in .hero-art (z-index 0), so it reads behind the date block */ .paddy-bunch{display:flex;left:1%;bottom:0} .paddy.p1{width:34px;--o:.42} .paddy.p2{width:48px;margin-left:-19px;--o:.58} .paddy.p3{width:38px;margin-left:-21px;--o:.48} .paddy.p4{width:29px;margin-left:-17px;--o:.36} .trail--hero{left:auto;right:5%;top:auto;bottom:2%;width:48px;--rot:-14deg} /* the mandala already owns the top of the band on phones */ .tarakasi--hero{display:none} .jhoti{height:clamp(42px,13vw,64px)} .cal-row{gap:.5rem} .lotus--cal{width:clamp(44px,12vw,62px)} .cal{font-size:.8rem} .cal td,.cal th{width:2.25em} .choice-row{grid-template-columns:1fr} .saura--rsvp{right:3%;width:132px} .strip{height:28px;background-size:66px 28px} } @media (max-width:400px){ .lotus--cal{display:none} .cal{font-size:.86rem} } /* ══════ MOTION / PRINT ══════ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .orn{animation:none;opacity:var(--o);transform:rotate(var(--rot))} .trail use{animation:none;opacity:1} .kalasha{animation:none;opacity:1} .mandala--hero use,.tarakasi--hero use{animation:none} .hero-copy .eyebrow,.names > *,.datebar{animation:none;opacity:1;transform:none} *,*::before,*::after{transition-duration:.01ms !important} } @media print{ .grain,#rsvp-form,.skip{display:none !important} body{background:#fff;color:#000;font-size:11pt} .band--red,.band--ink{background:#fff !important;color:#000 !important} .hero{min-height:auto} .strip{display:none} .kalasha{filter:brightness(.14)} .trail{--alta:#1C1613} .orn{animation:none;opacity:1} .trail use{animation:none;opacity:1} .mandala--hero use,.tarakasi--hero use{animation:none} .hero-copy .eyebrow,.names > *,.datebar{animation:none;opacity:1;transform:none} }