/* ------------------------------------------------------------------
   Aakanksha & Lovekesh — 26–28 January 2027, Ajabgarh
   Teal dusk at Ananta, Mughal-miniature panels on ivory paper.
   Teal is the structural accent, gold the hairline and lamp glow,
   parchment the panel ground, rose and fuchsia the festive notes.
------------------------------------------------------------------- */

:root {
  --ivory: #f3eee1;
  --paper: #f8f5ec;
  --mist: #e4e8e6;
  --ink: #363a4e;
  --ink-soft: #5b6078;
  --teal: #1f5f6b;
  --teal-deep: #184c57;
  --teal-ink: #2b6b78;
  --teal-pale: #dcf0ec;
  --tiffany: #7fd1c9;        /* the first gift */
  --tiffany-deep: #52bdb3;
  --tiffany-pale: #dff1ed;
  --rose-soft: #f3dde3;
  --gold: #c9a24a;
  --gold-pale: #e8d7a6;
  --paper-grain: 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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --paper-mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .24 0 0 0 .13 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  --booti-card: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84' fill='none' stroke='%239a7a3f' stroke-width='.8' stroke-linecap='round' opacity='.07'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%239a7a3f' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%239a7a3f' stroke='none'/></g></svg>");
  --booti-teal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84' fill='none' stroke='%23e6cf93' stroke-width='.8' stroke-linecap='round' opacity='.26'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%23e6cf93' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%23e6cf93' stroke='none'/></g></svg>");
  --emboss-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 72 84' fill='none' stroke='%23ffffff' stroke-width='.9' stroke-linecap='round' opacity='.26'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23ffffff' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23ffffff' stroke='none'/></g></svg>");
  --emboss-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 72 84' fill='none' stroke='%23041c22' stroke-width='.9' stroke-linecap='round' opacity='.38'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23041c22' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23041c22' stroke='none'/></g></svg>");
  --booti-liner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84' fill='none' stroke='%23efe3c4' stroke-width='.8' stroke-linecap='round' opacity='.42'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%23efe3c4' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='.9' fill='%23efe3c4' stroke='none'/></g></svg>");
  --emboss-light-p: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='122' viewBox='0 0 72 84' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' opacity='.85'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23ffffff' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23ffffff' stroke='none'/></g></svg>");
  --emboss-dark-p: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='122' viewBox='0 0 72 84' fill='none' stroke='%23553d1a' stroke-width='1' stroke-linecap='round' opacity='.24'><g transform='translate(18 16)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23553d1a' stroke='none'/></g><g transform='translate(54 58)'><path d='M0 18 V5'/><path d='M0 13 c-5-1-8-5-8-9 4 0 7 3 8 9z M0 10 c5-1 8-5 8-9-4 0-7 3-8 9z'/><path d='M0 5 c-3-3-2-7 0-9 2 2 3 6 0 9z'/><circle cx='0' cy='-5' r='1' fill='%23553d1a' stroke='none'/></g></svg>");
  --paper-fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.03' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .11 0'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.03 0.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --paper-flecks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38 0 0 0 0 .28 0 0 0 0 .14 0 0 0 7 -5.6'/></filter><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .5 0 0 0 0 .6 0 0 0 7 -5.95'/></filter><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' seed='33' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12 0 0 0 0 .37 0 0 0 0 .42 0 0 0 7 -6'/></filter><rect width='100%' height='100%' filter='url(%23k)'/><rect width='100%' height='100%' filter='url(%23p)'/><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
  --paper-stack: var(--emboss-light-p) 1px 1px / 104px 122px repeat, var(--emboss-dark-p) 0 0 / 104px 122px repeat, var(--paper-flecks), var(--paper-fibre), var(--paper-mottle), var(--paper-grain);
  --deckle-top: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'><polygon points='0.0,10.7 2.0,10.6 4.0,10.3 6.0,10.0 8.0,9.9 10.0,10.0 12.0,10.1 14.0,9.9 16.0,9.4 18.0,9.1 20.0,9.1 22.0,9.5 24.0,10.0 26.0,10.3 28.0,10.5 30.0,10.5 32.0,10.5 34.0,10.5 36.0,10.2 38.0,9.8 40.0,9.3 42.0,9.1 44.0,9.1 46.0,9.3 48.0,9.3 50.0,9.1 52.0,8.7 54.0,8.5 56.0,8.7 58.0,8.9 60.0,9.2 62.0,9.3 64.0,9.5 66.0,9.8 68.0,10.1 70.0,10.3 72.0,10.2 74.0,10.0 76.0,10.0 78.0,10.5 80.0,11.2 82.0,11.9 84.0,12.2 86.0,12.3 88.0,12.4 90.0,12.5 92.0,12.6 94.0,12.5 96.0,12.2 98.0,12.0 100.0,12.0 102.0,12.1 104.0,12.1 106.0,11.8 108.0,11.4 110.0,11.0 112.0,10.9 114.0,11.2 116.0,11.5 118.0,11.6 120.0,11.6 122.0,11.5 124.0,11.4 126.0,11.2 128.0,10.7 130.0,10.1 132.0,9.5 134.0,9.2 136.0,9.3 138.0,9.4 140.0,9.3 142.0,8.9 144.0,8.5 146.0,8.2 148.0,8.2 150.0,8.3 152.0,8.2 154.0,8.2 156.0,8.2 158.0,8.5 160.0,8.7 162.0,8.8 164.0,8.6 166.0,8.4 168.0,8.6 170.0,9.1 172.0,9.9 174.0,10.6 176.0,11.0 178.0,11.2 180.0,11.4 182.0,11.6 184.0,11.7 186.0,11.5 188.0,11.2 190.0,11.1 192.0,11.2 194.0,11.4 196.0,11.5 198.0,11.3 200.0,10.9 202.0,10.7 204.0,10.8 206.0,11.1 208.0,11.4 210.0,11.6 212.0,11.6 214.0,11.7 216.0,11.8 218.0,11.8 220.0,11.5 222.0,11.0 224.0,10.7 226.0,10.7 228.0,11.0 230.0,11.3 232.0,11.4 234.0,11.2 236.0,10.9 238.0,10.7 240.0,10.7 240.0,0.0 0.0,0.0' fill='white' fill-opacity='.45'/><polygon points='0.0,8.3 2.0,8.2 4.0,7.9 6.0,7.6 8.0,7.5 10.0,7.6 12.0,7.7 14.0,7.5 16.0,7.0 18.0,6.7 20.0,6.7 22.0,7.1 24.0,7.6 26.0,7.9 28.0,8.1 30.0,8.1 32.0,8.1 34.0,8.1 36.0,7.8 38.0,7.4 40.0,6.9 42.0,6.7 44.0,6.7 46.0,6.9 48.0,6.9 50.0,6.7 52.0,6.3 54.0,6.1 56.0,6.3 58.0,6.5 60.0,6.8 62.0,6.9 64.0,7.1 66.0,7.4 68.0,7.7 70.0,7.9 72.0,7.8 74.0,7.6 76.0,7.6 78.0,8.1 80.0,8.8 82.0,9.5 84.0,9.8 86.0,9.9 88.0,10.0 90.0,10.1 92.0,10.2 94.0,10.1 96.0,9.8 98.0,9.6 100.0,9.6 102.0,9.7 104.0,9.7 106.0,9.4 108.0,9.0 110.0,8.6 112.0,8.5 114.0,8.8 116.0,9.1 118.0,9.2 120.0,9.2 122.0,9.1 124.0,9.0 126.0,8.8 128.0,8.3 130.0,7.7 132.0,7.1 134.0,6.8 136.0,6.9 138.0,7.0 140.0,6.9 142.0,6.5 144.0,6.1 146.0,5.8 148.0,5.8 150.0,5.9 152.0,5.8 154.0,5.8 156.0,5.8 158.0,6.1 160.0,6.3 162.0,6.4 164.0,6.2 166.0,6.0 168.0,6.2 170.0,6.7 172.0,7.5 174.0,8.2 176.0,8.6 178.0,8.8 180.0,9.0 182.0,9.2 184.0,9.3 186.0,9.1 188.0,8.8 190.0,8.7 192.0,8.8 194.0,9.0 196.0,9.1 198.0,8.9 200.0,8.5 202.0,8.3 204.0,8.4 206.0,8.7 208.0,9.0 210.0,9.2 212.0,9.2 214.0,9.3 216.0,9.4 218.0,9.4 220.0,9.1 222.0,8.6 224.0,8.3 226.0,8.3 228.0,8.6 230.0,8.9 232.0,9.0 234.0,8.8 236.0,8.5 238.0,8.3 240.0,8.3 240.0,0.0 0.0,0.0' fill='white'/></svg>");
  --deckle-bottom: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'><polygon points='0.0,5.8 2.0,6.1 4.0,6.1 6.0,5.9 8.0,5.8 10.0,6.1 12.0,6.6 14.0,7.0 16.0,7.1 18.0,7.1 20.0,7.0 22.0,7.1 24.0,7.1 26.0,6.9 28.0,6.5 30.0,6.4 32.0,6.6 34.0,7.1 36.0,7.5 38.0,7.6 40.0,7.2 42.0,6.8 44.0,6.6 46.0,6.5 48.0,6.3 50.0,5.9 52.0,5.5 54.0,5.3 56.0,5.2 58.0,5.3 60.0,5.1 62.0,4.7 64.0,4.4 66.0,4.5 68.0,5.0 70.0,5.6 72.0,5.9 74.0,5.9 76.0,5.7 78.0,5.6 80.0,5.5 82.0,5.3 84.0,4.9 86.0,4.5 88.0,4.4 90.0,4.6 92.0,4.9 94.0,5.0 96.0,4.7 98.0,4.3 100.0,4.1 102.0,4.2 104.0,4.4 106.0,4.5 108.0,4.4 110.0,4.3 112.0,4.3 114.0,4.4 116.0,4.5 118.0,4.3 120.0,4.2 122.0,4.3 124.0,4.9 126.0,5.7 128.0,6.4 130.0,6.6 132.0,6.6 134.0,6.6 136.0,6.7 138.0,6.8 140.0,6.7 142.0,6.5 144.0,6.4 146.0,6.5 148.0,6.8 150.0,7.0 152.0,6.9 154.0,6.6 156.0,6.5 158.0,6.7 160.0,7.2 162.0,7.7 164.0,7.9 166.0,7.7 168.0,7.6 170.0,7.4 172.0,7.3 174.0,6.9 176.0,6.4 178.0,5.9 180.0,5.8 182.0,6.0 184.0,6.2 186.0,6.1 188.0,5.6 190.0,5.1 192.0,4.7 194.0,4.5 196.0,4.4 198.0,4.1 200.0,3.7 202.0,3.4 204.0,3.3 206.0,3.3 208.0,3.2 210.0,2.9 212.0,2.7 214.0,2.8 216.0,3.4 218.0,4.2 220.0,4.8 222.0,5.1 224.0,5.1 226.0,5.1 228.0,5.3 230.0,5.4 232.0,5.3 234.0,5.1 236.0,5.0 238.0,5.3 240.0,5.8 240.0,16.0 0.0,16.0' fill='white' fill-opacity='.45'/><polygon points='0.0,8.2 2.0,8.5 4.0,8.5 6.0,8.3 8.0,8.2 10.0,8.5 12.0,9.0 14.0,9.4 16.0,9.5 18.0,9.5 20.0,9.4 22.0,9.5 24.0,9.5 26.0,9.3 28.0,8.9 30.0,8.8 32.0,9.0 34.0,9.5 36.0,9.9 38.0,10.0 40.0,9.6 42.0,9.2 44.0,9.0 46.0,8.9 48.0,8.7 50.0,8.3 52.0,7.9 54.0,7.7 56.0,7.6 58.0,7.7 60.0,7.5 62.0,7.1 64.0,6.8 66.0,6.9 68.0,7.4 70.0,8.0 72.0,8.3 74.0,8.3 76.0,8.1 78.0,8.0 80.0,7.9 82.0,7.7 84.0,7.3 86.0,6.9 88.0,6.8 90.0,7.0 92.0,7.3 94.0,7.4 96.0,7.1 98.0,6.7 100.0,6.5 102.0,6.6 104.0,6.8 106.0,6.9 108.0,6.8 110.0,6.7 112.0,6.7 114.0,6.8 116.0,6.9 118.0,6.7 120.0,6.6 122.0,6.7 124.0,7.3 126.0,8.1 128.0,8.8 130.0,9.0 132.0,9.0 134.0,9.0 136.0,9.1 138.0,9.2 140.0,9.1 142.0,8.9 144.0,8.8 146.0,8.9 148.0,9.2 150.0,9.4 152.0,9.3 154.0,9.0 156.0,8.9 158.0,9.1 160.0,9.6 162.0,10.1 164.0,10.3 166.0,10.1 168.0,10.0 170.0,9.8 172.0,9.7 174.0,9.3 176.0,8.8 178.0,8.3 180.0,8.2 182.0,8.4 184.0,8.6 186.0,8.5 188.0,8.0 190.0,7.5 192.0,7.1 194.0,6.9 196.0,6.8 198.0,6.5 200.0,6.1 202.0,5.8 204.0,5.7 206.0,5.7 208.0,5.6 210.0,5.3 212.0,5.1 214.0,5.2 216.0,5.8 218.0,6.6 220.0,7.2 222.0,7.5 224.0,7.5 226.0,7.5 228.0,7.7 230.0,7.8 232.0,7.7 234.0,7.5 236.0,7.4 238.0,7.7 240.0,8.2 240.0,16.0 0.0,16.0' fill='white'/></svg>");
  --deckle-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'><polygon points='11.5,0.0 11.4,2.0 11.5,4.0 11.7,6.0 11.8,8.0 11.5,10.0 11.0,12.0 10.5,14.0 10.3,16.0 10.2,18.0 10.2,20.0 10.2,22.0 10.1,24.0 10.3,26.0 10.6,28.0 10.8,30.0 10.8,32.0 10.5,34.0 10.2,36.0 10.1,38.0 10.3,40.0 10.5,42.0 10.5,44.0 10.2,46.0 10.0,48.0 9.9,50.0 9.9,52.0 9.9,54.0 9.7,56.0 9.5,58.0 9.4,60.0 9.5,62.0 9.6,64.0 9.4,66.0 9.0,68.0 8.4,70.0 8.1,72.0 8.0,74.0 8.2,76.0 8.4,78.0 8.5,80.0 8.7,82.0 9.1,84.0 9.5,86.0 9.9,88.0 10.1,90.0 10.2,92.0 10.4,94.0 10.8,96.0 11.4,98.0 11.7,100.0 11.7,102.0 11.5,104.0 11.4,106.0 11.6,108.0 11.8,110.0 11.9,112.0 12.0,114.0 12.1,116.0 12.4,118.0 12.8,120.0 12.9,122.0 12.7,124.0 12.3,126.0 12.0,128.0 11.9,130.0 12.0,132.0 12.0,134.0 11.9,136.0 11.6,138.0 11.4,140.0 11.3,142.0 11.2,144.0 11.0,146.0 10.6,148.0 10.3,150.0 10.1,152.0 10.1,154.0 10.0,156.0 9.6,158.0 8.9,160.0 8.2,162.0 7.8,164.0 7.7,166.0 7.7,168.0 7.7,170.0 7.7,172.0 7.9,174.0 8.2,176.0 8.7,178.0 8.9,180.0 8.9,182.0 8.9,184.0 9.1,186.0 9.5,188.0 10.0,190.0 10.3,192.0 10.3,194.0 10.2,196.0 10.2,198.0 10.5,200.0 10.7,202.0 10.8,204.0 10.8,206.0 11.0,208.0 11.4,210.0 11.7,212.0 11.8,214.0 11.5,216.0 11.1,218.0 10.8,220.0 10.8,222.0 11.0,224.0 11.2,226.0 11.2,228.0 11.2,230.0 11.3,232.0 11.5,234.0 11.7,236.0 11.7,238.0 11.5,240.0 0.0,240.0 0.0,0.0' fill='white' fill-opacity='.45'/><polygon points='9.1,0.0 9.0,2.0 9.1,4.0 9.3,6.0 9.4,8.0 9.1,10.0 8.6,12.0 8.1,14.0 7.9,16.0 7.8,18.0 7.8,20.0 7.8,22.0 7.7,24.0 7.9,26.0 8.2,28.0 8.4,30.0 8.4,32.0 8.1,34.0 7.8,36.0 7.7,38.0 7.9,40.0 8.1,42.0 8.1,44.0 7.8,46.0 7.6,48.0 7.5,50.0 7.5,52.0 7.5,54.0 7.3,56.0 7.1,58.0 7.0,60.0 7.1,62.0 7.2,64.0 7.0,66.0 6.6,68.0 6.0,70.0 5.7,72.0 5.6,74.0 5.8,76.0 6.0,78.0 6.1,80.0 6.3,82.0 6.7,84.0 7.1,86.0 7.5,88.0 7.7,90.0 7.8,92.0 8.0,94.0 8.4,96.0 9.0,98.0 9.3,100.0 9.3,102.0 9.1,104.0 9.0,106.0 9.2,108.0 9.4,110.0 9.5,112.0 9.6,114.0 9.7,116.0 10.0,118.0 10.4,120.0 10.5,122.0 10.3,124.0 9.9,126.0 9.6,128.0 9.5,130.0 9.6,132.0 9.6,134.0 9.5,136.0 9.2,138.0 9.0,140.0 8.9,142.0 8.8,144.0 8.6,146.0 8.2,148.0 7.9,150.0 7.7,152.0 7.7,154.0 7.6,156.0 7.2,158.0 6.5,160.0 5.8,162.0 5.4,164.0 5.3,166.0 5.3,168.0 5.3,170.0 5.3,172.0 5.5,174.0 5.8,176.0 6.3,178.0 6.5,180.0 6.5,182.0 6.5,184.0 6.7,186.0 7.1,188.0 7.6,190.0 7.9,192.0 7.9,194.0 7.8,196.0 7.8,198.0 8.1,200.0 8.3,202.0 8.4,204.0 8.4,206.0 8.6,208.0 9.0,210.0 9.3,212.0 9.4,214.0 9.1,216.0 8.7,218.0 8.4,220.0 8.4,222.0 8.6,224.0 8.8,226.0 8.8,228.0 8.8,230.0 8.9,232.0 9.1,234.0 9.3,236.0 9.3,238.0 9.1,240.0 0.0,240.0 0.0,0.0' fill='white'/></svg>");
  --deckle-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'><polygon points='4.9,0.0 5.3,2.0 5.5,4.0 5.4,6.0 5.1,8.0 4.9,10.0 4.8,12.0 4.8,14.0 4.7,16.0 4.5,18.0 4.4,20.0 4.7,22.0 5.1,24.0 5.5,26.0 5.5,28.0 5.0,30.0 4.5,32.0 4.3,34.0 4.2,36.0 4.3,38.0 4.2,40.0 4.0,42.0 4.0,44.0 4.2,46.0 4.5,48.0 4.7,50.0 4.7,52.0 4.8,54.0 5.2,56.0 5.9,58.0 6.7,60.0 7.2,62.0 7.2,64.0 7.1,66.0 7.0,68.0 7.1,70.0 7.3,72.0 7.3,74.0 7.2,76.0 7.3,78.0 7.6,80.0 8.0,82.0 8.1,84.0 7.9,86.0 7.4,88.0 7.0,90.0 7.0,92.0 7.1,94.0 7.0,96.0 6.7,98.0 6.2,100.0 5.9,102.0 5.7,104.0 5.5,106.0 5.3,108.0 4.9,110.0 4.7,112.0 4.9,114.0 5.3,116.0 5.5,118.0 5.2,120.0 4.6,122.0 4.1,124.0 3.7,126.0 3.6,128.0 3.5,130.0 3.2,132.0 3.0,134.0 3.0,136.0 3.3,138.0 3.6,140.0 3.7,142.0 3.6,144.0 3.6,146.0 4.0,148.0 4.7,150.0 5.3,152.0 5.7,154.0 5.7,156.0 5.6,158.0 5.7,160.0 5.9,162.0 6.1,164.0 6.2,166.0 6.2,168.0 6.5,170.0 7.0,172.0 7.5,174.0 7.7,176.0 7.4,178.0 6.9,180.0 6.7,182.0 6.7,184.0 6.7,186.0 6.7,188.0 6.4,190.0 6.1,192.0 6.0,194.0 6.1,196.0 6.1,198.0 5.9,200.0 5.8,202.0 5.8,204.0 6.2,206.0 6.8,208.0 7.1,210.0 6.9,212.0 6.4,214.0 6.0,216.0 5.8,218.0 5.7,220.0 5.6,222.0 5.3,224.0 5.1,226.0 5.2,228.0 5.5,230.0 5.6,232.0 5.5,234.0 5.1,236.0 4.8,238.0 4.9,240.0 16.0,240.0 16.0,0.0' fill='white' fill-opacity='.45'/><polygon points='7.3,0.0 7.7,2.0 7.9,4.0 7.8,6.0 7.5,8.0 7.3,10.0 7.2,12.0 7.2,14.0 7.1,16.0 6.9,18.0 6.8,20.0 7.1,22.0 7.5,24.0 7.9,26.0 7.9,28.0 7.4,30.0 6.9,32.0 6.7,34.0 6.6,36.0 6.7,38.0 6.6,40.0 6.4,42.0 6.4,44.0 6.6,46.0 6.9,48.0 7.1,50.0 7.1,52.0 7.2,54.0 7.6,56.0 8.3,58.0 9.1,60.0 9.6,62.0 9.6,64.0 9.5,66.0 9.4,68.0 9.5,70.0 9.7,72.0 9.7,74.0 9.6,76.0 9.7,78.0 10.0,80.0 10.4,82.0 10.5,84.0 10.3,86.0 9.8,88.0 9.4,90.0 9.4,92.0 9.5,94.0 9.4,96.0 9.1,98.0 8.6,100.0 8.3,102.0 8.1,104.0 7.9,106.0 7.7,108.0 7.3,110.0 7.1,112.0 7.3,114.0 7.7,116.0 7.9,118.0 7.6,120.0 7.0,122.0 6.5,124.0 6.1,126.0 6.0,128.0 5.9,130.0 5.6,132.0 5.4,134.0 5.4,136.0 5.7,138.0 6.0,140.0 6.1,142.0 6.0,144.0 6.0,146.0 6.4,148.0 7.1,150.0 7.7,152.0 8.1,154.0 8.1,156.0 8.0,158.0 8.1,160.0 8.3,162.0 8.5,164.0 8.6,166.0 8.6,168.0 8.9,170.0 9.4,172.0 9.9,174.0 10.1,176.0 9.8,178.0 9.3,180.0 9.1,182.0 9.1,184.0 9.1,186.0 9.1,188.0 8.8,190.0 8.5,192.0 8.4,194.0 8.5,196.0 8.5,198.0 8.3,200.0 8.2,202.0 8.2,204.0 8.6,206.0 9.2,208.0 9.5,210.0 9.3,212.0 8.8,214.0 8.4,216.0 8.2,218.0 8.1,220.0 8.0,222.0 7.7,224.0 7.5,226.0 7.6,228.0 7.9,230.0 8.0,232.0 7.9,234.0 7.5,236.0 7.2,238.0 7.3,240.0 16.0,240.0 16.0,0.0' fill='white'/></svg>");
  --deckle-card: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='700' viewBox='0 0 500 700'><polygon points='18.0,3.2 24.0,3.0 30.1,2.8 36.1,2.6 42.1,2.4 48.1,2.2 54.2,2.0 60.2,1.9 66.2,1.8 72.2,1.8 78.3,1.8 84.3,1.8 90.3,1.9 96.3,2.0 102.4,2.1 108.4,2.1 114.4,2.2 120.4,2.2 126.5,2.2 132.5,2.2 138.5,2.2 144.5,2.1 150.6,2.0 156.6,1.9 162.6,1.8 168.6,1.7 174.7,1.7 180.7,1.6 186.7,1.5 192.8,1.4 198.8,1.4 204.8,1.3 210.8,1.2 216.9,1.1 222.9,1.0 228.9,0.9 234.9,0.7 241.0,0.5 247.0,0.3 253.0,0.0 259.0,-0.2 265.1,-0.4 271.1,-0.6 277.1,-0.8 283.1,-0.9 289.2,-1.0 295.2,-1.1 301.2,-1.1 307.2,-1.0 313.3,-1.0 319.3,-0.9 325.3,-0.8 331.4,-0.7 337.4,-0.7 343.4,-0.7 349.4,-0.7 355.5,-0.8 361.5,-0.9 367.5,-1.0 373.5,-1.2 379.6,-1.3 385.6,-1.5 391.6,-1.7 397.6,-1.8 403.7,-1.9 409.7,-2.0 415.7,-2.0 421.7,-2.0 427.8,-2.0 433.8,-1.9 439.8,-1.8 445.8,-1.7 451.9,-1.5 457.9,-1.4 463.9,-1.3 469.9,-1.2 476.0,-1.1 482.0,-1.0 485.7,-0.6 489.2,0.5 492.5,2.3 495.3,4.7 497.6,7.5 499.3,10.8 500.4,14.3 500.7,18.0 500.6,24.0 500.5,30.1 500.5,36.1 500.5,42.1 500.5,48.2 500.5,54.2 500.6,60.3 500.7,66.3 500.9,72.3 501.1,78.4 501.4,84.4 501.7,90.4 502.0,96.5 502.3,102.5 502.6,108.5 502.9,114.6 503.1,120.6 503.2,126.7 503.4,132.7 503.4,138.7 503.4,144.8 503.4,150.8 503.3,156.8 503.2,162.9 503.1,168.9 503.0,174.9 502.9,181.0 502.9,187.0 502.8,193.1 502.8,199.1 502.8,205.1 502.9,211.2 502.9,217.2 503.0,223.2 503.0,229.3 503.1,235.3 503.1,241.3 503.1,247.4 503.1,253.4 503.0,259.5 502.9,265.5 502.8,271.5 502.7,277.6 502.6,283.6 502.6,289.6 502.5,295.7 502.4,301.7 502.3,307.7 502.3,313.8 502.3,319.8 502.3,325.9 502.2,331.9 502.2,337.9 502.2,344.0 502.1,350.0 502.0,356.0 501.9,362.1 501.8,368.1 501.6,374.1 501.4,380.2 501.3,386.2 501.1,392.3 501.0,398.3 500.8,404.3 500.8,410.4 500.8,416.4 500.8,422.4 500.9,428.5 501.0,434.5 501.2,440.5 501.4,446.6 501.6,452.6 501.8,458.7 501.9,464.7 502.1,470.7 502.2,476.8 502.3,482.8 502.3,488.8 502.3,494.9 502.2,500.9 502.1,506.9 502.0,513.0 501.9,519.0 501.7,525.1 501.6,531.1 501.4,537.1 501.3,543.2 501.3,549.2 501.2,555.2 501.1,561.3 501.1,567.3 501.1,573.3 501.1,579.4 501.1,585.4 501.0,591.5 501.0,597.5 501.0,603.5 500.9,609.6 500.9,615.6 500.8,621.6 500.8,627.7 500.8,633.7 500.8,639.7 500.9,645.8 501.0,651.8 501.1,657.9 501.2,663.9 501.4,669.9 501.5,676.0 501.7,682.0 501.5,685.9 500.5,689.6 498.7,693.2 496.2,696.2 493.2,698.7 489.7,700.5 485.9,701.6 482.0,701.8 476.0,701.6 469.9,701.4 463.9,701.2 457.9,701.0 451.9,700.8 445.8,700.6 439.8,700.5 433.8,700.4 427.8,700.3 421.7,700.3 415.7,700.3 409.7,700.3 403.7,700.3 397.6,700.3 391.6,700.3 385.6,700.2 379.6,700.1 373.5,700.0 367.5,699.8 361.5,699.6 355.5,699.4 349.4,699.2 343.4,698.9 337.4,698.7 331.4,698.5 325.3,698.2 319.3,698.1 313.3,697.9 307.2,697.7 301.2,697.6 295.2,697.4 289.2,697.3 283.1,697.2 277.1,697.0 271.1,696.9 265.1,696.7 259.0,696.6 253.0,696.4 247.0,696.3 241.0,696.2 234.9,696.1 228.9,696.0 222.9,696.0 216.9,696.1 210.8,696.2 204.8,696.3 198.8,696.5 192.8,696.8 186.7,697.1 180.7,697.4 174.7,697.7 168.6,698.0 162.6,698.3 156.6,698.6 150.6,698.8 144.5,698.9 138.5,699.0 132.5,699.1 126.5,699.1 120.4,699.1 114.4,699.1 108.4,699.1 102.4,699.0 96.3,699.0 90.3,699.1 84.3,699.1 78.3,699.2 72.2,699.3 66.2,699.4 60.2,699.6 54.2,699.8 48.1,699.9 42.1,700.1 36.1,700.2 30.1,700.3 24.0,700.4 18.0,700.5 14.4,700.3 10.8,699.3 7.6,697.6 4.7,695.3 2.2,692.5 0.4,689.3 -0.9,685.8 -1.4,682.0 -1.6,676.0 -1.8,669.9 -1.9,663.9 -2.1,657.9 -2.3,651.8 -2.4,645.8 -2.6,639.7 -2.6,633.7 -2.7,627.7 -2.7,621.6 -2.7,615.6 -2.6,609.6 -2.6,603.5 -2.5,597.5 -2.5,591.5 -2.5,585.4 -2.5,579.4 -2.5,573.3 -2.7,567.3 -2.8,561.3 -3.0,555.2 -3.2,549.2 -3.5,543.2 -3.7,537.1 -3.9,531.1 -4.1,525.1 -4.3,519.0 -4.5,513.0 -4.6,506.9 -4.6,500.9 -4.6,494.9 -4.6,488.8 -4.5,482.8 -4.4,476.8 -4.3,470.7 -4.1,464.7 -4.0,458.7 -3.9,452.6 -3.8,446.6 -3.8,440.5 -3.7,434.5 -3.7,428.5 -3.6,422.4 -3.6,416.4 -3.6,410.4 -3.5,404.3 -3.5,398.3 -3.4,392.3 -3.4,386.2 -3.3,380.2 -3.2,374.1 -3.2,368.1 -3.2,362.1 -3.2,356.0 -3.2,350.0 -3.3,344.0 -3.4,337.9 -3.5,331.9 -3.7,325.9 -3.9,319.8 -4.1,313.8 -4.3,307.7 -4.4,301.7 -4.6,295.7 -4.7,289.6 -4.7,283.6 -4.7,277.6 -4.7,271.5 -4.6,265.5 -4.4,259.5 -4.2,253.4 -4.0,247.4 -3.7,241.3 -3.5,235.3 -3.3,229.3 -3.1,223.2 -2.9,217.2 -2.8,211.2 -2.7,205.1 -2.6,199.1 -2.5,193.1 -2.4,187.0 -2.4,181.0 -2.3,174.9 -2.2,168.9 -2.1,162.9 -1.9,156.8 -1.7,150.8 -1.5,144.8 -1.3,138.7 -1.0,132.7 -0.7,126.7 -0.5,120.6 -0.2,114.6 0.0,108.5 0.3,102.5 0.5,96.5 0.7,90.4 0.9,84.4 1.1,78.4 1.2,72.3 1.4,66.3 1.6,60.3 1.8,54.2 2.0,48.2 2.2,42.1 2.5,36.1 2.7,30.1 2.9,24.0 3.2,18.0 3.6,15.1 4.6,12.4 6.0,10.0 7.8,7.8 10.0,6.0 12.5,4.6 15.2,3.7' fill='white' fill-opacity='.45'/><polygon points='18.0,6.2 24.0,6.0 30.1,5.8 36.1,5.6 42.1,5.4 48.1,5.2 54.2,5.0 60.2,4.9 66.2,4.8 72.2,4.8 78.3,4.8 84.3,4.8 90.3,4.9 96.3,5.0 102.4,5.1 108.4,5.1 114.4,5.2 120.4,5.2 126.5,5.2 132.5,5.2 138.5,5.2 144.5,5.1 150.6,5.0 156.6,4.9 162.6,4.8 168.6,4.7 174.7,4.7 180.7,4.6 186.7,4.5 192.8,4.4 198.8,4.4 204.8,4.3 210.8,4.2 216.9,4.1 222.9,4.0 228.9,3.9 234.9,3.7 241.0,3.5 247.0,3.3 253.0,3.0 259.0,2.8 265.1,2.6 271.1,2.4 277.1,2.2 283.1,2.1 289.2,2.0 295.2,1.9 301.2,1.9 307.2,2.0 313.3,2.0 319.3,2.1 325.3,2.2 331.4,2.3 337.4,2.3 343.4,2.3 349.4,2.3 355.5,2.2 361.5,2.1 367.5,2.0 373.5,1.8 379.6,1.7 385.6,1.5 391.6,1.3 397.6,1.2 403.7,1.1 409.7,1.0 415.7,1.0 421.7,1.0 427.8,1.0 433.8,1.1 439.8,1.2 445.8,1.3 451.9,1.5 457.9,1.6 463.9,1.7 469.9,1.8 476.0,1.9 482.0,2.0 485.1,2.3 488.1,3.3 490.8,4.8 493.2,6.8 495.1,9.2 496.6,12.0 497.4,14.9 497.7,18.0 497.6,24.0 497.5,30.1 497.5,36.1 497.5,42.1 497.5,48.2 497.5,54.2 497.6,60.3 497.7,66.3 497.9,72.3 498.1,78.4 498.4,84.4 498.7,90.4 499.0,96.5 499.3,102.5 499.6,108.5 499.9,114.6 500.1,120.6 500.2,126.7 500.4,132.7 500.4,138.7 500.4,144.8 500.4,150.8 500.3,156.8 500.2,162.9 500.1,168.9 500.0,174.9 499.9,181.0 499.9,187.0 499.8,193.1 499.8,199.1 499.8,205.1 499.9,211.2 499.9,217.2 500.0,223.2 500.0,229.3 500.1,235.3 500.1,241.3 500.1,247.4 500.1,253.4 500.0,259.5 499.9,265.5 499.8,271.5 499.7,277.6 499.6,283.6 499.6,289.6 499.5,295.7 499.4,301.7 499.3,307.7 499.3,313.8 499.3,319.8 499.3,325.9 499.2,331.9 499.2,337.9 499.2,344.0 499.1,350.0 499.0,356.0 498.9,362.1 498.8,368.1 498.6,374.1 498.4,380.2 498.3,386.2 498.1,392.3 498.0,398.3 497.8,404.3 497.8,410.4 497.8,416.4 497.8,422.4 497.9,428.5 498.0,434.5 498.2,440.5 498.4,446.6 498.6,452.6 498.8,458.7 498.9,464.7 499.1,470.7 499.2,476.8 499.3,482.8 499.3,488.8 499.3,494.9 499.2,500.9 499.1,506.9 499.0,513.0 498.9,519.0 498.7,525.1 498.6,531.1 498.4,537.1 498.3,543.2 498.3,549.2 498.2,555.2 498.1,561.3 498.1,567.3 498.1,573.3 498.1,579.4 498.1,585.4 498.0,591.5 498.0,597.5 498.0,603.5 497.9,609.6 497.9,615.6 497.8,621.6 497.8,627.7 497.8,633.7 497.8,639.7 497.9,645.8 498.0,651.8 498.1,657.9 498.2,663.9 498.4,669.9 498.5,676.0 498.7,682.0 498.5,685.3 497.7,688.5 496.2,691.5 494.1,694.1 491.5,696.2 488.5,697.8 485.3,698.6 482.0,698.8 476.0,698.6 469.9,698.4 463.9,698.2 457.9,698.0 451.9,697.8 445.8,697.6 439.8,697.5 433.8,697.4 427.8,697.3 421.7,697.3 415.7,697.3 409.7,697.3 403.7,697.3 397.6,697.3 391.6,697.3 385.6,697.2 379.6,697.1 373.5,697.0 367.5,696.8 361.5,696.6 355.5,696.4 349.4,696.2 343.4,695.9 337.4,695.7 331.4,695.5 325.3,695.2 319.3,695.1 313.3,694.9 307.2,694.7 301.2,694.6 295.2,694.4 289.2,694.3 283.1,694.2 277.1,694.0 271.1,693.9 265.1,693.7 259.0,693.6 253.0,693.4 247.0,693.3 241.0,693.2 234.9,693.1 228.9,693.0 222.9,693.0 216.9,693.1 210.8,693.2 204.8,693.3 198.8,693.5 192.8,693.8 186.7,694.1 180.7,694.4 174.7,694.7 168.6,695.0 162.6,695.3 156.6,695.6 150.6,695.8 144.5,695.9 138.5,696.0 132.5,696.1 126.5,696.1 120.4,696.1 114.4,696.1 108.4,696.1 102.4,696.0 96.3,696.0 90.3,696.1 84.3,696.1 78.3,696.2 72.2,696.3 66.2,696.4 60.2,696.6 54.2,696.8 48.1,696.9 42.1,697.1 36.1,697.2 30.1,697.3 24.0,697.4 18.0,697.5 15.0,697.3 12.0,696.5 9.2,695.1 6.8,693.2 4.7,690.9 3.1,688.2 2.1,685.2 1.6,682.0 1.4,676.0 1.2,669.9 1.1,663.9 0.9,657.9 0.7,651.8 0.6,645.8 0.4,639.7 0.4,633.7 0.3,627.7 0.3,621.6 0.3,615.6 0.4,609.6 0.4,603.5 0.5,597.5 0.5,591.5 0.5,585.4 0.5,579.4 0.5,573.3 0.3,567.3 0.2,561.3 0.0,555.2 -0.2,549.2 -0.5,543.2 -0.7,537.1 -0.9,531.1 -1.1,525.1 -1.3,519.0 -1.5,513.0 -1.6,506.9 -1.6,500.9 -1.6,494.9 -1.6,488.8 -1.5,482.8 -1.4,476.8 -1.3,470.7 -1.1,464.7 -1.0,458.7 -0.9,452.6 -0.8,446.6 -0.8,440.5 -0.7,434.5 -0.7,428.5 -0.6,422.4 -0.6,416.4 -0.6,410.4 -0.5,404.3 -0.5,398.3 -0.4,392.3 -0.4,386.2 -0.3,380.2 -0.2,374.1 -0.2,368.1 -0.2,362.1 -0.2,356.0 -0.2,350.0 -0.3,344.0 -0.4,337.9 -0.5,331.9 -0.7,325.9 -0.9,319.8 -1.1,313.8 -1.3,307.7 -1.4,301.7 -1.6,295.7 -1.7,289.6 -1.7,283.6 -1.7,277.6 -1.7,271.5 -1.6,265.5 -1.4,259.5 -1.2,253.4 -1.0,247.4 -0.7,241.3 -0.5,235.3 -0.3,229.3 -0.1,223.2 0.1,217.2 0.2,211.2 0.3,205.1 0.4,199.1 0.5,193.1 0.6,187.0 0.6,181.0 0.7,174.9 0.8,168.9 0.9,162.9 1.1,156.8 1.3,150.8 1.5,144.8 1.7,138.7 2.0,132.7 2.3,126.7 2.5,120.6 2.8,114.6 3.0,108.5 3.3,102.5 3.5,96.5 3.7,90.4 3.9,84.4 4.1,78.4 4.2,72.3 4.4,66.3 4.6,60.3 4.8,54.2 5.0,48.2 5.2,42.1 5.5,36.1 5.7,30.1 5.9,24.0 6.2,18.0 6.6,15.7 7.4,13.6 8.5,11.7 10.0,10.0 11.7,8.5 13.6,7.4 15.7,6.6' fill='white'/></svg>");
  --env-margin: clamp(10px, 2.4vw, 22px);
  --env-radius: 26px;

  --teal-mist: #e1f0ed;
  --rose-grey: #ede6e3;
  --parchment-light: #f4f1ea;
  --champagne: #b8975a;
  --champagne-pale: #dccba3;
  --gold-deep: #9a7a3f;
  --gold-text: #7a5f2e;                    /* small gold labels (4.5:1 on the tints) */
  --gold-frame: #d6b76b;                   /* panel and arch frames */
  --parchment: #efe4c9;
  --hair: rgba(184, 151, 90, .3);          /* inner rules */
  --hair-strong: rgba(184, 151, 90, .45);  /* block and section separators */
  --aside: 1.12rem;                        /* italic asides, one size */

  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --text: "EB Garamond", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --caps: "Marcellus", "Cormorant Garamond", Georgia, serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(6rem, 14vw, 12rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain over everything, very faint */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .3;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .45 0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--champagne-pale); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--champagne); }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 4px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
p, li { text-wrap: pretty; }
h1, h2, h3, .day__name { text-wrap: balance; }

.caps {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .72rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }

.nowrap { white-space: nowrap; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lining figures wherever numerals sit in caps or display settings */
.hero__when, .hero__where, .foot__when, .event__time, .day__num { font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------
   Navigation
------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gutter);
  background: rgba(243, 238, 225, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.nav.is-visible { transform: none; opacity: 1; }
.nav:has(:focus-visible) { transform: none; opacity: 1; }

.nav__mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px; min-width: 44px;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.mono-mark {
  display: inline-block;
  width: 2.6rem;
  aspect-ratio: 743 / 586;
  background: var(--gold-deep);
  -webkit-mask: url("../media/monogram-mask.png?v=2") center / contain no-repeat;
  mask: url("../media/monogram-mask.png?v=2") center / contain no-repeat;
}

.nav__links { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-family: var(--display);
  white-space: nowrap;
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .3s;
}
.nav__links a:hover { color: var(--ink); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--caps);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .7rem calc(1.4rem - .18em) .62rem 1.4rem;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.pill:hover, .pill:focus-visible { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }

.nav__toggle { display: none; width: 44px; height: 44px; padding: 0; margin: -.3rem -.4rem -.3rem 0; background: none; border: 0; cursor: pointer; align-content: center; justify-items: center; row-gap: 5px; }
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--ink); margin: 0; transition: transform .3s, opacity .3s; }

@media (max-width: 1000px) {
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: .5rem var(--gutter) 1rem;
    display: none;
  }
  .nav.menu-open .nav__links { display: flex; }
  .nav__links a { display: block; padding: .8rem 0; font-size: 1.2rem; border-bottom: 1px solid var(--hair); }
  .nav__toggle { display: grid; }
  .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav .pill { padding: .55rem calc(1rem - .18em) .5rem 1rem; font-size: .85rem; }
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #4e7c8c 0%, #7fa6b1 18%, #b4cdd0 34%, #dcd7cc 48%, #efd3b8 60%, #f6dcb6 68%, #cfcfc0 78%, #a3b0aa 90%, #8f9d96 100%);
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__life { pointer-events: none; }

.hero__inner {
  padding: 6rem var(--gutter) 34vh;
  max-width: 60rem;
  position: relative;
  z-index: 1;
}

.hero__frame {
  position: absolute;
  left: 50%; top: -2.2rem;
  width: min(46rem, 98vw);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 2.4s var(--ease) .3s forwards;
  -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
  mask-image: linear-gradient(#000 68%, transparent 100%);
}
.hero__frame svg { width: 100%; height: auto; fill: none; stroke: var(--gold-frame); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; color: var(--gold-frame); }
@keyframes fadeIn { to { opacity: .62; } }
html.has-invite:not(.is-revealed) .hero__frame { animation-play-state: paused; }
.hero__kicker {
  margin-bottom: clamp(1rem, 2.4vh, 2.2rem);
  color: var(--ink);
  text-shadow: 0 0 12px rgba(243, 238, 225, .9);
  opacity: 0;
  animation: rise 1.4s var(--ease) .2s forwards;
}
.hero__kicker { display: grid; justify-items: center; gap: .45rem; }
.hero__kicker-script { font-family: var(--script); font-size: clamp(1.55rem, 4.2vw, 2.1rem); line-height: 1; color: var(--ink); text-transform: none; letter-spacing: 0; padding-right: .15em; }
.hero__kicker-caps { font-size: clamp(.66rem, 1.6vw, .78rem); letter-spacing: .32em; }

.hero__names {
  font-family: var(--display);
  font-weight: 300;
  font-size: min(clamp(3.2rem, 10vw, 8rem), 15vh);
  line-height: .92;
  letter-spacing: -.005em;
  color: var(--ink);
  display: grid;
  gap: .1em;
}
.hero__names span { display: block; opacity: 0; animation: rise 1.6s var(--ease) forwards; }
.hero__names span:nth-child(1) { animation-delay: .5s; }
.hero__names span:nth-child(3) { animation-delay: .9s; }
.hero__names .amp {
  font-family: var(--script);
  font-weight: 400;
  font-size: .9em;
  line-height: .9;
  color: var(--gold-deep);
  padding: .02em 0 .06em;
  animation-delay: .75s;
  transform-origin: center;
}

.hero__rule {
  width: 9rem;
  height: 1px;
  margin: clamp(1.2rem, 2.6vh, 2.4rem) auto;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity: 0;
  animation: rise 1.4s var(--ease) 1.2s forwards;
}

.hero__when {
  font-family: var(--caps);
  font-size: clamp(.92rem, 1.7vw, 1.2rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: rise 1.4s var(--ease) 1.35s forwards;
}
.hero__where {
  margin-top: 1.1rem;
  font-family: var(--caps);
  font-size: clamp(.9rem, 1.6vw, 1.15rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: rise 1.4s var(--ease) 1.5s forwards;
}
.hero__where small { display: block; margin-top: .55rem; font-size: .72em; letter-spacing: .28em; color: var(--teal-ink); }
/* Tracked caps carry a dead trailing space; nudge them so they centre optically */
.hero__kicker-caps, .hero__when, .env__when, .env__return, .invite__hint, .hero__scroll span { padding-inline-start: .3em; }
.hero__where, .env__where { padding-inline-start: .22em; }

/* Short screens: tighter rhythm so names, dates and villas share one screen */
@media (max-height: 800px) {
  .hero__inner { padding: 4.5rem var(--gutter) 27vh; }
  .hero__names { font-size: min(clamp(3rem, 9vw, 7rem), 11.5vh); }
  .hero__kicker { margin-bottom: .8rem; }
  .hero__rule { margin: .9rem auto; }
  .hero__where { margin-top: .6rem; }
  .hero__frame { top: -1.6rem; }
}
@media (max-height: 740px) {
  .hero__inner { padding: 4rem var(--gutter) 24vh; }
  .hero__names { font-size: min(clamp(2.8rem, 8.5vw, 6.5rem), 10.5vh); }
  .hero__when, .hero__where { font-size: clamp(1rem, 1.6vw, 1.25rem); }
}
@media (max-height: 660px) {
  .hero__inner { padding: 3.6rem var(--gutter) 22vh; }
  .hero__names { font-size: min(clamp(2.6rem, 8vw, 6rem), 9.5vh); }
}

/* Until the envelope has opened, the hero waits */
html.has-invite:not(.is-revealed) .hero__kicker,
html.has-invite:not(.is-revealed) .hero__names span,
html.has-invite:not(.is-revealed) .hero__rule,
html.has-invite:not(.is-revealed) .hero__when,
html.has-invite:not(.is-revealed) .hero__where,
html.has-invite:not(.is-revealed) .hero__scroll { animation-play-state: paused; }
html.invite-lock, html.invite-lock body { overflow: hidden; }

/* The living layer rests while the envelope covers it and once the hero has scrolled away */
html.has-invite:not(.is-revealed) .hero__art .flock, html.has-invite:not(.is-revealed) .hero__art .bird,
html.has-invite:not(.is-revealed) .hero__art .firefly, html.has-invite:not(.is-revealed) .hero__art .shimmer,
html.has-invite:not(.is-revealed) .hero__art .bulb,
.hero.is-away .hero__art .flock, .hero.is-away .hero__art .bird, .hero.is-away .hero__art .firefly,
.hero.is-away .hero__art .shimmer, .hero.is-away .hero__art .bulb { animation-play-state: paused; }

/* A flock heading home, and fireflies over the lawn */
.hero__art .flock { animation: flock 110s linear infinite; }
.hero__art .bird { transform-box: fill-box; transform-origin: center; animation: wing .9s ease-in-out infinite alternate; }
.hero__art .flock > g:nth-child(2n) .bird { animation-delay: -.3s; }
.hero__art .flock > g:nth-child(3n) .bird { animation-delay: -.6s; animation-duration: 1.05s; }
@keyframes flock { 0% { transform: translate(420px, 40px); } 100% { transform: translate(-1900px, -60px); } }
@keyframes wing { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
.hero__art .firefly { opacity: 0; animation: firefly 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero__art .firefly:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; }
.hero__art .firefly:nth-child(3n) { animation-delay: -4s; }
.hero__art .firefly:nth-child(4n+1) { animation-delay: -6s; animation-duration: 6s; }
.hero__art .firefly:nth-child(5n) { animation-delay: -1s; }
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: .95; }
  50% { opacity: .5; transform: translate(4px, -9px); }
  70% { opacity: .9; }
  85% { opacity: 0; transform: translate(-2px, -16px); }
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: .6rem;
  z-index: 2;
  font-family: var(--caps);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(243, 238, 225, .9);
  text-decoration: none;
  opacity: 0;
  animation: rise 1.4s var(--ease) 2.2s forwards;
}
.hero__scroll i {
  width: 1px; height: 3rem;
  background: linear-gradient(180deg, var(--champagne), transparent);
  animation: drip 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes drip {
  0%, 100% { transform: scaleY(.6); opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

.hero__art .shimmer { animation: shimmer 9s ease-in-out infinite alternate; }
.hero__art .bulb { animation: twinkle 4.5s ease-in-out infinite alternate; transform-origin: center; }
.hero__art .bulb:nth-child(3n) { animation-delay: -1.5s; }
.hero__art .bulb:nth-child(3n+1) { animation-delay: -3s; }
.hero__art .bulb:nth-child(4n) { animation-duration: 6s; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes shimmer { from { opacity: .35; } to { opacity: .7; } }

@media (max-width: 760px), (pointer: coarse) {
  .hero__art .shimmer { animation: none; }
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(243, 238, 225, .94); }
}

/* ------------------------------------------------------------------
   The invitation: a full-page envelope of embossed parchment with
   gold-foil ornament, the blue of a small box inside, a wax seal,
   and a simple card
------------------------------------------------------------------- */

.invite {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(120% 90% at 50% 40%, #1f5a66 0%, #17464f 60%, #113840 100%);   /* the table the envelope lies on */
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  transition: opacity 1s var(--ease);
}
.invite:focus, .invite:focus-visible { outline: none; }
.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .45 0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.invite.is-done { opacity: 0; pointer-events: none; }
.orn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.invite__stage { position: absolute; inset: 0; animation: stageIn .9s var(--ease) both; }
@keyframes stageIn { from { opacity: 0; } to { opacity: 1; } }
/* The prompt: quiet lettering on the paper, with the sound line beneath */
.invite__hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(calc(var(--env-margin) + clamp(2rem, 5vh, 3rem)), env(safe-area-inset-bottom));
  z-index: 6;
  margin: 0;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--gold-text);
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .72rem;
  opacity: 0;
  animation: hintIn .8s var(--ease) .6s forwards, breathe 3s ease-in-out 1.8s infinite;
}
.invite__tap { display: block; padding-inline-start: .3em; }
@keyframes hintIn { to { opacity: .95; } }
@keyframes breathe { 0%, 100% { opacity: .95; } 50% { opacity: .72; } }
.invite__sound { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .55rem; font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .98rem; line-height: 1.25; color: var(--ink-soft); opacity: .9; }
.invite__speaker { flex: 0 0 auto; width: 1rem; height: 1rem; fill: none; stroke: var(--gold-text); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.invite.is-opening .invite__hint { animation: none; opacity: 0; transition: opacity .3s; }
.invite__skip {
  position: absolute;
  right: max(calc(var(--env-margin) + .9rem), env(safe-area-inset-right));
  top: max(calc(var(--env-margin) + .9rem), env(safe-area-inset-top));
  z-index: 7;
  min-height: 2.75rem; min-width: 2.75rem;
  background: rgba(255, 252, 244, .55);
  border: 1px solid rgba(154, 122, 63, .55);
  color: var(--gold-text);
  border-radius: 999px;
  padding: .55rem 1.1rem .45rem;
  font-family: var(--caps);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .66rem;
  cursor: pointer;
  opacity: 0;
  animation: hintIn .9s var(--ease) 1.6s forwards;
  transition: background .3s, color .3s, border-color .3s;
}
.invite__skip:hover { background: var(--teal); border-color: var(--teal); color: var(--gold-pale); }
.invite__skip:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* The envelope is the page */
.env { position: absolute; inset: var(--env-margin); }
.env__back, .env__body, .env__fold, .env__paper, .env__frame, .env__shadewrap, .env__shade, .env__flapwrap, .env__flap, .env__flapback { position: absolute; inset: 0; }
/* Handmade paper: rounded corners, and a torn, feathered deckle cut out of every outer edge.
   Built from plain mask layers (a solid base, four edge strips subtracted) so it works on every mobile browser. */
.env__back, .env__body {
  clip-path: inset(0 round var(--env-radius));
  -webkit-mask-image: var(--deckle-top), var(--deckle-bottom), var(--deckle-left), var(--deckle-right), linear-gradient(#fff, #fff);
  -webkit-mask-size: 240px 16px, 240px 16px, 16px 240px, 16px 240px, 100% 100%;
  -webkit-mask-position: left top, left bottom, left top, right top, 0 0;
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  -webkit-mask-composite: destination-out, destination-out, destination-out, destination-out, source-over;
  mask-image: var(--deckle-top), var(--deckle-bottom), var(--deckle-left), var(--deckle-right), linear-gradient(#fff, #fff);
  mask-size: 240px 16px, 240px 16px, 16px 240px, 16px 240px, 100% 100%;
  mask-position: left top, left bottom, left top, right top, 0 0;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  mask-composite: exclude, exclude, exclude, exclude, add;
}
/* Inside: the blue of a small box given a long time ago */
.env__back { background: var(--paper-fibre), var(--booti-liner) center / 60px 70px repeat, radial-gradient(90% 80% at 50% 30%, #a4e2da 0%, var(--tiffany) 50%, var(--tiffany-deep) 100%); transform: translateZ(0); }
.env__back::after { content: ""; position: absolute; inset: 0; background: var(--paper-grain); opacity: .6; }
/* the envelope's own shadow on the table */
.env::before { content: ""; position: absolute; inset: 2px 6px -8px; border-radius: var(--env-radius); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); z-index: 0; }

/* Everything that is paper slides away together */
.env__body {
  z-index: 3;
  perspective: 1400px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 1.1s cubic-bezier(.55, .05, .7, .5);
}
.env__fold { pointer-events: none; }
.env__wings { z-index: 1; filter: drop-shadow(0 2px 3px rgba(70, 50, 20, .34)); }
.env__basewrap { z-index: 2; filter: drop-shadow(0 -3px 5px rgba(70, 50, 20, .26)); }
.env__paper { background: var(--paper-stack), linear-gradient(180deg, #ecdfc2, #e4d5b4); }
.env__paper--l { clip-path: polygon(0 0, 50.4% 56%, 0 100%); background: var(--paper-stack), linear-gradient(100deg, #f3e9d3 0%, #ebdfc2 60%, #e5d7b8 100%); }
.env__paper--r { clip-path: polygon(100% 0, 49.6% 56%, 100% 100%); background: var(--paper-stack), linear-gradient(260deg, #f3e9d3 0%, #ebdfc2 60%, #e5d7b8 100%); }
.env__paper--b { clip-path: polygon(0 100%, 50% 55.6%, 100% 100%); background: var(--paper-stack), linear-gradient(180deg, #eee2c6 0%, #e7d9b9 55%, #e1d2b0 100%); }
.env__piping { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.env__frame { pointer-events: none; z-index: 4; }
.env__frame::before, .env__frame::after { content: ""; position: absolute; border: 1px solid; }
.env__frame::before { inset: 18px; border-radius: 14px; border-color: rgba(201, 162, 74, .95); }
.env__frame::after { inset: 23px; border-radius: 10px; border-color: rgba(201, 162, 74, .5); }
.env__frame--body { clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }

/* Gold-foil ornament, blind-embossed into the paper */
.orn { position: absolute; pointer-events: none; overflow: visible; }
.orn use { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.orn__hi { stroke: rgba(255, 255, 255, .92); color: rgba(255, 255, 255, .92); transform: translate(-.7px, -.8px); }
.orn__lo { stroke: rgba(84, 60, 24, .34); color: rgba(84, 60, 24, .34); transform: translate(.8px, .9px); }
.orn__foil { stroke: url(#foil); color: #b8975a; }
.orn--side { z-index: 5; top: 50%; height: clamp(150px, 26vh, 260px); aspect-ratio: 112 / 260; }
.orn--side-l { left: 18px; transform: translateY(-50%); }
.orn--side-r { right: 18px; transform: translateY(-50%) scaleX(-1); }
.orn--pendant { left: 50%; bottom: calc(42% + clamp(48px, 8.2vw, 68px)); width: clamp(84px, 19vw, 136px); aspect-ratio: 120 / 160; transform: translateX(-50%); }

/* the flap's soft shadow on the paper below it */
.env__shadewrap { z-index: 3; pointer-events: none; filter: blur(8px); opacity: .95; transition: opacity .7s var(--ease); }
.env__shade { clip-path: polygon(0 0, 100% 0, 50% 58%); background: rgba(70, 48, 14, .42); transform: translateY(13px); }

.env__flapwrap {
  z-index: 6;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  will-change: transform;
  transition: transform 1.05s cubic-bezier(.62, 0, .22, 1) .1s, opacity .2s;
}
.env__flap, .env__flapback {
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.env__flap { background: var(--paper-stack), linear-gradient(180deg, #f8f2e3 0%, #f1e7d1 60%, #ecdfc5 100%); }
.env__flap .env__piping { height: 58%; }
.env__return {
  position: absolute;
  left: 0; right: 0;
  top: clamp(2rem, 7vh, 3.6rem);
  margin: 0;
  text-align: center;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: clamp(.6rem, 1.6vw, .76rem);
  padding-inline-start: .26em;
  color: var(--gold-text);
  opacity: .9;
}
.env__flapback {
  clip-path: polygon(0 100%, 100% 100%, 50% 42%);   /* hinged at the fold, so it mirrors the front */
  transform: rotateX(180deg);
  background: var(--booti-liner) center / 60px 70px repeat, linear-gradient(180deg, var(--tiffany-deep), var(--tiffany));
}
.env__cardwrap {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: min(78vw, 24rem, 47vh);
  aspect-ratio: 5 / 7;
  transform: translate(-50%, -50%) scale(.9);
  filter: drop-shadow(0 26px 26px rgba(12, 39, 45, .36)) drop-shadow(0 2px 3px rgba(12, 39, 45, .25));   /* static: a shadow that animates repaints every frame */
  will-change: transform, opacity;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .8s var(--ease);
}
.env__card {
  position: absolute;
  inset: 0;
  background: var(--paper-flecks), var(--paper-fibre), var(--paper-mottle), var(--paper-grain), #fbf7ee;
  -webkit-mask: var(--deckle-card) center / 100% 100% no-repeat;
  mask: var(--deckle-card) center / 100% 100% no-repeat;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.env__card::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(154, 122, 63, .38); border-radius: 6px; pointer-events: none; }
.env__crest { width: clamp(2.6rem, 9vw, 4rem); margin-bottom: 1rem; background: var(--gold-deep); }
.env__names { font-family: var(--script); font-weight: 400; font-size: clamp(2.1rem, 8.6vw, 3.2rem); color: var(--ink); margin: 0 0 .7rem; line-height: 1.15; text-wrap: balance; max-width: 9ch; padding: .1em .2em 0; }
.env__names .amp { font-family: var(--script); color: var(--gold-deep); font-size: .8em; line-height: 1; }
.env__rule { width: 2.4rem; height: 1px; background: var(--gold-frame); margin-bottom: .9rem; }
.env__when, .env__where { font-family: var(--caps); text-transform: uppercase; margin: 0; font-variant-numeric: lining-nums; }
.env__when { font-size: clamp(.64rem, 2vw, .78rem); letter-spacing: .3em; color: var(--ink); }
.env__where { font-size: clamp(.56rem, 1.7vw, .66rem); letter-spacing: .24em; color: var(--ink-soft); margin-top: .35rem; }

.seal {
  position: absolute;
  left: 50%; top: 58%;
  z-index: 7;
  width: clamp(84px, 15vw, 124px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), opacity .4s;
}
.seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal::after, .seal::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(154, 122, 63, .7);
  animation: ripple 2.6s ease-out 1.2s infinite;
  pointer-events: none;
}
.seal::before { animation-delay: 2.5s; }
@keyframes ripple { 0% { transform: scale(.94); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.seal__mono {
  position: absolute;
  left: 21%; top: 29%; width: 58%; height: 42%;
  background: #f7e9bd;
  -webkit-mask: url("../media/monogram-mask.png?v=2") center / contain no-repeat;
  mask: url("../media/monogram-mask.png?v=2") center / contain no-repeat;
}
.seal__mono--shade { background: rgba(60, 40, 8, .65); transform: translate(-1.5px, -1.5px); }
.seal:hover { transform: translate(-50%, -50%) scale(1.04); }
.seal:focus-visible { outline: 2px solid var(--teal); outline-offset: 8px; border-radius: 50%; }

/* Opening: the seal gives, the flap lifts, the envelope slips away, the card lifts, then comes towards you */
.env.is-open .seal { transform: translate(-50%, -50%) scale(.86); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.4, 0, .6, 1), opacity .35s .08s; }
.env.is-open .seal::after, .env.is-open .seal::before { animation: none; }
.env.is-open .env__flapwrap { transform: rotateX(-180deg); }
.env.is-open .env__shadewrap { opacity: 0; }
.env.is-out .env__body { transform: translate3d(0, 112%, 0); }
.env.is-out .env__flapwrap { opacity: 0; }
.env.is-out .env__cardwrap { transform: translate(-50%, -50%) scale(1); transition-delay: .25s; }
.env.is-zoom .env__cardwrap { transform: translate(-50%, -50%) scale(1.12); opacity: 0; transition: transform 1s cubic-bezier(.4, 0, .6, 1), opacity .7s .15s var(--ease); }

@media (max-width: 600px) {
  .env__card { padding: 1.1rem 1rem; }
  .env__crest { margin-bottom: .8rem; }
}
@media (max-height: 520px) {
  .env__card { padding: .7rem 1rem; }
  .env__crest { width: 1.6rem; margin-bottom: .4rem; }
  .env__names { font-size: clamp(1.4rem, 6vh, 2rem); margin-bottom: .4rem; }
  .env__rule { margin-bottom: .5rem; }
  .env__when, .env__where { font-size: .56rem; }
  .env__return, .orn--side, .orn--pendant { display: none; }
  .invite__hint { bottom: calc(var(--env-margin) + 2.6rem); }
  .invite__sound { display: none; }
}

/* ------------------------------------------------------------------
   Sections — shared
------------------------------------------------------------------- */

.section { padding-block: var(--section); position: relative; overflow: hidden; }
.section > .wrap { position: relative; z-index: 1; }
.motif { position: absolute; pointer-events: none; }

/* Colour breaks: a fine gold rule with a lozenge marks where one block ends and the next begins */
.seam { position: absolute; left: 50%; top: 0; z-index: 1; width: min(64vw, 36rem); height: 0; transform: translateX(-50%); display: flex; align-items: flex-start; pointer-events: none; }
.seam::before, .seam::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne)); }
.seam::after { background: linear-gradient(90deg, var(--champagne), transparent); }
.seam i { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 .9rem; background: var(--gold); transform: translateY(2px) rotate(45deg); }
.foot .seam::before, .foot .seam::after { background: linear-gradient(90deg, transparent, var(--gold-pale)); }
.foot .seam::after { background: linear-gradient(90deg, var(--gold-pale), transparent); }
.seam i::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(201, 162, 74, .5); }

/* Soft washes of colour, like the splatter on the wreath */
.blot { position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1.1; width: min(34vw, 30rem); opacity: .9; }
.blot--blue { right: -8vw; top: 6rem; background: radial-gradient(closest-side, #d6e6e8, rgba(214, 230, 232, 0)); }
.blot--coral { left: -10vw; top: -6rem; opacity: .7; background: radial-gradient(closest-side, #f1d3dc, rgba(241, 211, 220, 0)); }
.blot--plum { right: -12vw; bottom: 4rem; width: min(40vw, 34rem); background: radial-gradient(closest-side, #efd9e1, rgba(239, 217, 225, 0)); }

.script { font-family: var(--script); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--teal-ink); margin-top: 1.4rem; line-height: 1.2; }

.section__head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.story .section__head, .venue .section__head, .rsvp .section__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.caps--orn { display: flex; align-items: center; gap: .9rem; color: var(--gold-text); }
.caps--orn::before {
  content: "";
  width: 3.4rem; height: 10px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 10' fill='none' stroke='%23b8975a' stroke-width='1'><path d='M0 5h24M44 5h24'/><path d='M34 1l4 4-4 4-4-4z'/><circle cx='34' cy='5' r='1.3' fill='%23c9a24a' stroke='none'/></svg>") left center / contain no-repeat;
}
.section__title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -.01em;
}
.section__title em { font-style: italic; font-weight: 300; color: var(--gold-deep); }

.lede {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.35;
  font-weight: 400;
  max-width: 28ch;
}

.prose { max-width: var(--measure); }

/* ------------------------------------------------------------------
   Story
------------------------------------------------------------------- */

.story { background: var(--ivory); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.story__text { padding-top: clamp(0rem, 4vw, 3rem); }
.story__art { position: relative; padding: 0 6%; }
/* About us: the photograph, simply, with a hairline border */
.photo { position: relative; width: 100%; margin: 0; padding: 6px; background: #fbf7ee; border: 1px solid rgba(154, 122, 63, .45); border-radius: 4px; box-shadow: 0 24px 34px -22px rgba(24, 76, 87, .4), 0 2px 0 rgba(24, 76, 87, .06); }
.photo__img { display: block; width: 100%; height: auto; aspect-ratio: 885 / 1001; object-fit: cover; border-radius: 2px; }

@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__art { order: -1; width: 100%; max-width: 24rem; margin-inline: auto; }
}

/* ------------------------------------------------------------------
   At a glance — a band of evening
------------------------------------------------------------------- */

.glance {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--teal-deep), var(--teal) 60%, #27697a);
  color: var(--ivory);
  padding-block: clamp(2.8rem, 6vw, 4.6rem);
  text-align: center;
}
.glance::before, .glance::after {
  content: "";
  position: absolute;
  left: 50%; width: min(70vw, 40rem); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 215, 166, .55), transparent);
}
.glance::before { top: 0; }
.glance::after { bottom: 0; }
.glance__inner { display: grid; gap: .55rem; justify-items: center; }
.glance__label { margin: 0; font-family: var(--caps); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--gold-pale); padding-inline-start: .3em; }
.glance__count { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; color: var(--ivory); font-variant-numeric: lining-nums; text-wrap: balance; }
.glance__when { margin: .2rem 0 0; font-family: var(--caps); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: rgba(243, 238, 225, .72); padding-inline-start: .22em; font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------
   Celebrations
------------------------------------------------------------------- */

.celebrations {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='180' viewBox='0 0 160 180' fill='none' stroke='%239a7a3f' stroke-width='.9' stroke-linecap='round' opacity='.08'><g transform='translate(40 20)'><path d='M0 40 V12'/><path d='M0 30 c-10-2-16-10-16-18 8 0 14 6 16 18z M0 24 c10-2 16-10 16-18-8 0-14 6-16 18z'/><path d='M0 12 c-5 0-8-4-8-8 0-4 3-6 5-4 M0 12 c5 0 8-4 8-8 0-4-3-6-5-4 M0 12 c-3-4-2-9 0-12 2 3 3 8 0 12z'/><circle cx='0' cy='0' r='1.2' fill='%239a7a3f' stroke='none'/></g><g transform='translate(120 110)'><path d='M0 40 V12'/><path d='M0 30 c-10-2-16-10-16-18 8 0 14 6 16 18z M0 24 c10-2 16-10 16-18-8 0-14 6-16 18z'/><path d='M0 12 c-5 0-8-4-8-8 0-4 3-6 5-4 M0 12 c5 0 8-4 8-8 0-4-3-6-5-4 M0 12 c-3-4-2-9 0-12 2 3 3 8 0 12z'/><circle cx='0' cy='0' r='1.2' fill='%239a7a3f' stroke='none'/></g></svg>") center top / 160px 180px repeat,
    linear-gradient(180deg, var(--parchment-light) 0%, var(--paper) 40%, var(--parchment-light) 100%);
}
.beads { width: 13rem; height: auto; margin-top: -.2rem; }

.day { border-top: 1px solid var(--hair-strong); }
.day:last-of-type { border-bottom: 1px solid var(--hair-strong); }
.day__heading { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }

.day__summary {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.day__num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink);
  transition: color .5s;
}
.day__meta { display: grid; gap: .35rem; }
.day__month { font-family: var(--caps); letter-spacing: .22em; text-transform: uppercase; font-size: .74rem; color: var(--ink-soft); }
.day__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1.1;
}
.day__name em { font-style: italic; color: var(--gold-deep); }
.day__chev {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--champagne-pale);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .5s var(--ease), border-color .4s;
}
.day__chev svg { width: 12px; height: 12px; stroke: var(--champagne); fill: none; stroke-width: 1.2; }
.day__summary:hover .day__chev { border-color: var(--champagne); }
.day.is-open .day__chev { transform: rotate(180deg); }
.day.is-open .day__num { color: var(--teal); }

.day__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease);
}
.day.is-open .day__body { grid-template-rows: 1fr; }
.day__body > div { overflow: hidden; }
.day__content {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding: .5rem 0 clamp(2.6rem, 5vw, 4rem);
}
.day__aside {
  font-family: var(--display);
  font-size: var(--aside);
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 11rem;
  padding-top: .4rem;
}

@media (max-width: 700px) {
  .day__summary { grid-template-columns: auto 1fr auto; gap: 1.2rem; }
  .day__num { font-size: 3.4rem; }
  .day__content { grid-template-columns: 1fr; gap: 1.2rem; }
  .day__aside { max-width: none; }
}

/* Event rows */
.events { display: grid; gap: 0; max-width: 46rem; }
.event {
  display: grid;
  grid-template-columns: 6.2rem 1fr auto;
  gap: 1.4rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
}
.event:first-child { border-top: 0; padding-top: .6rem; }
.event__time {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.event__time small { display: block; font-family: var(--caps); font-size: .62em; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem; }
.event__title { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 400; line-height: 1.1; }
.event__desc { margin-top: .4rem; color: var(--ink-soft); max-width: 44ch; }
.event__venue { margin-top: .5rem; font-family: var(--display); font-size: .95rem; letter-spacing: .08em; color: var(--teal-ink); }
.event__venue::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; background: var(--gold-pale); vertical-align: middle; margin-right: .6rem; }
.event__motif { width: 3.2rem; height: 3.2rem; color: var(--gold-deep); opacity: .9; justify-self: end; margin-top: .1rem; }
.event__motif svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.event__motif--img { background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.event__motif--mehendi { --icon: url("../media/icons/mehendi.png?v=4"); }
.event__motif--lunch { --icon: url("../media/icons/lunch.png?v=4"); }
.event__motif--lotus { --icon: url("../media/icons/lotus.png?v=4"); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr auto; }
  .event__time { grid-column: 1 / -1; font-size: 1.2rem; margin-bottom: -.6rem; }
  .event__motif { width: 2.6rem; height: 2.6rem; }
}

/* Wedding day: scroll-drawn timeline */
.timeline { position: relative; max-width: 46rem; padding-left: 3.2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: .7rem; top: 1.2rem; bottom: 1.2rem;
  width: 1px;
  background: var(--hair);
}
.timeline__line {
  position: absolute;
  left: .7rem; top: 1.2rem; bottom: 1.2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  will-change: transform;
}
.timeline .event { position: relative; border-top: 0; padding: 1.4rem 0; }
.timeline .event::before {
  content: "";
  position: absolute;
  left: -3.2rem; top: 1.95rem;
  width: 9px; height: 9px;
  margin-left: calc(.7rem - 4px);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--champagne-pale);
  transition: background .5s var(--ease), transform .5s var(--ease), border-color .5s;
}
.timeline .event.is-past::before { background: var(--gold); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(201, 162, 74, .3); transform: scale(1.3); }
.timeline .event .event__title,
.timeline .event .event__motif,
.timeline .event .event__time { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.timeline .event:not(.is-past) .event__motif { opacity: .25; transform: translateY(4px); }
.timeline .event:not(.is-past) .event__title { opacity: .55; }

.timeline__group { margin: 1.2rem 0 .3rem; font-family: var(--caps); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); }

/* ------------------------------------------------------------------
   Wear — dress code
------------------------------------------------------------------- */

.wear { --tear-from: var(--parchment-light); background: linear-gradient(180deg, var(--rose-soft), #f0e3e4 60%, var(--rose-grey)); }
.wear .motif--buta { right: -5rem; bottom: -6rem; width: clamp(16rem, 30vw, 28rem); opacity: .18; transform: rotate(-12deg); }
.wear .motif--buta path, .wear .motif--buta circle { stroke: var(--teal); }
.wear .motif--buta circle { fill: var(--teal); }
.wear__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.wear__head .section__head { margin-bottom: 0; }
/* the designer's plates for three of the days */
.looks { list-style: none; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: end; }
.look figure { margin: 0; display: grid; justify-items: center; gap: .8rem; }
.look img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 18px rgba(120, 34, 79, .16)); }
.look figcaption { font-family: var(--caps); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); padding-inline-start: .24em; }
@media (max-width: 760px) {
  .looks { display: flex; gap: 1rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .looks::-webkit-scrollbar { display: none; }
  .look { flex: 0 0 66vw; scroll-snap-align: center; }
  .look img { max-height: 26rem; }
}
.wear__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 1150px) { .wear__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wear__grid { grid-template-columns: 1fr; } }
.wear__item { padding-top: 1.4rem; border-top: 1px solid var(--hair); transition: transform .5s var(--ease); }
.wear__item:hover { transform: translateY(-3px); }
.wear__item h3 { font-size: 1.5rem; margin-bottom: .4rem; display: flex; align-items: center; gap: .6rem; }
.wear__item h3::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--rose-soft), 0 0 0 3px var(--champagne-pale); }
.wear__item p { color: var(--ink-soft); font-size: .98em; max-width: 32ch; }
.swatches { display: flex; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.swatches > span {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(54, 58, 78, .12);
  box-shadow: inset 0 0 0 2px var(--rose-soft);
}
.days__intro { margin: .4rem 0 0; max-width: 58ch; font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.days__after { margin: 1.6rem 0 0; font-family: var(--display); font-size: var(--aside); color: var(--ink-soft); display: flex; align-items: baseline; gap: .6rem; }
.day__num--sm { font-size: 1.6rem; line-height: 1; color: var(--teal); }
.wear__sign { margin-top: .4rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.wear__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--measure);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--aside);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Venue, stay & getting there
------------------------------------------------------------------- */

.venue { --tear-from: var(--rose-grey); background: linear-gradient(180deg, var(--teal-mist), #e9eef7 50%, var(--mist) 85%, var(--ivory)); }
.venue__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.venue__intro { grid-column: 1; grid-row: 1; }
.venue__mapcol { grid-column: 1; grid-row: 2; }
.facts { grid-column: 2; grid-row: 1; display: grid; gap: 1.8rem; padding-top: .6rem; align-content: start; }
.facts__art { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
.venue__name { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
.venue__name small { display: block; font-family: var(--caps); font-size: .3em; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-top: .8rem; font-weight: 500; }
.orn-rule { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 .2rem; }
.orn-rule::before, .orn-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne)); }
.orn-rule::after { background: linear-gradient(90deg, var(--champagne), transparent); }
.orn-rule .mono-mark { width: 2rem; background: var(--gold-deep); opacity: .8; }
.venue__map {
  margin-top: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hair);
  background: var(--tiffany-pale);
  position: relative;
  overflow: hidden;
}
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.55) sepia(.12) brightness(1.02); }
.venue__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.link-quiet {
  display: inline-block;
  padding-block: .55rem 0;
  font-family: var(--caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  text-decoration: none;
  border-bottom: 1px solid var(--champagne-pale);
  padding-bottom: .15rem;
  transition: border-color .3s;
}
.link-quiet:hover { border-color: var(--ink); }

.fact { border-top: 1px solid var(--hair-strong); padding-top: 1.1rem; }
.fact h3 { font-size: 1.5rem; margin-bottom: .45rem; }
.fact p { color: var(--ink-soft); max-width: 38ch; }
.fact .soon { font-family: var(--display); font-style: italic; font-size: var(--aside); line-height: 1.5; color: var(--teal-ink); }
.spots { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.spots li { display: grid; grid-template-columns: minmax(9rem, 11rem) 1fr; gap: 1rem; align-items: baseline; font-size: .98em; }
.spots b { font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.spots span { color: var(--ink-soft); }
.photo--wide { aspect-ratio: 4 / 3; box-sizing: border-box; }
.photo--wide .photo__img { height: 100%; aspect-ratio: auto; object-position: 50% 62%; }

@media (max-width: 860px) {
  .venue__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .venue__intro, .venue__mapcol, .facts, .facts__art { grid-column: auto; grid-row: auto; }
  .venue__intro { order: 1; } .facts__art { order: 2; } .venue__mapcol { order: 3; } .facts { order: 4; }
  .facts__art { width: 100%; }
  .facts { padding-top: 0; }
}

/* ------------------------------------------------------------------
   RSVP
------------------------------------------------------------------- */

.rsvp { --tear-from: var(--ivory); background: linear-gradient(180deg, var(--parchment), var(--ivory) 32%); }
.field__hint { margin-top: .1rem; font-family: var(--display); font-style: italic; font-size: var(--aside); color: var(--teal-ink); }
.form__wishes { margin-top: .6rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.rsvp__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
}
.rsvp__intro { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; }
.rsvp__intro p { color: var(--ink-soft); max-width: 34ch; }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; gap: 1.6rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--caps); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold-deep);
  padding: .6rem 0;
  border-radius: 0;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-bottom-color: var(--teal-ink); box-shadow: 0 1px 0 0 var(--teal-ink); }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%239a7a3f' stroke-width='1.2'/></svg>"); background-repeat: no-repeat; background-position: right .2rem center; }

.form__foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: .4rem; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--caps);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 1rem calc(2.2rem - .22em) .9rem 2.2rem;
  background: var(--teal-deep);
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  transition: background .5s var(--ease), border-color .5s, transform .4s var(--ease);
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--teal); transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.btn .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold); transition: transform .5s var(--ease), background .5s; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) .dot { transform: scale(1.6); background: var(--paper); }
.btn.is-busy .dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.8); opacity: 1; } }

.form__status { font-family: var(--display); font-style: italic; font-size: var(--aside); color: var(--teal-ink); min-height: 1.4em; }
.form__status.is-error { color: #875744; }

.form.is-done { display: none; }
.thanks { display: none; max-width: 32rem; padding: 2rem 0 0; }
.thanks.is-visible { display: block; animation: rise 1s var(--ease) both; }
.thanks h3 { margin-bottom: .8rem; }
.thanks p { color: var(--ink-soft); }
.thanks .amp { font-family: var(--script); color: var(--gold-deep); font-size: 1.3em; }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .rsvp__grid { grid-template-columns: 1fr; }
  .wear .motif--buta { right: -4rem; bottom: -3rem; width: 14rem; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .spots { gap: .9rem; }
  .spots li { grid-template-columns: 1fr; gap: .1rem; align-items: start; }
}

/* ------------------------------------------------------------------
   Guestbook
------------------------------------------------------------------- */

.wall {
  margin-top: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.wall::before, .wall::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, 8vw, 8rem);
  z-index: 2;
  pointer-events: none;
}
.wall::before { left: 0; background: linear-gradient(90deg, var(--ivory), transparent); }
.wall::after { right: 0; background: linear-gradient(270deg, var(--ivory), transparent); }

.wall__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: slide var(--dur, 60s) linear infinite;
  will-change: transform;
  padding: .5rem 0;
}
.wall:hover .wall__track, .wall:focus-within .wall__track { animation-play-state: paused; }
.wall:focus-visible { outline-offset: 0; }
@media (pointer: coarse) {
  .wall { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wall::-webkit-scrollbar { display: none; }
  .wall::before, .wall::after { display: none; }
  .wall__track { animation: none; will-change: auto; padding-inline: var(--gutter); gap: 1rem; }
  .wall__track .note--clone { display: none; }
  .note { scroll-snap-align: center; width: min(78vw, 20rem); }
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.note {
  width: clamp(16rem, 24vw, 21rem);
  flex: 0 0 auto;
  padding: 1.5rem 1.7rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(184, 151, 90, .18), 0 14px 30px -24px rgba(54, 58, 78, .35);
  display: grid;
  gap: .9rem;
  position: relative;
  transform: rotate(var(--tilt, 0deg));
}
.note::before {
  content: "\201C";
  position: absolute;
  top: .3rem; right: 1.1rem;
  font-family: var(--display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--gold-deep);
  opacity: .2;
}
.note--2 { background: var(--teal-pale); }
.note--1 { background: var(--rose-soft); }
.note__orn { color: var(--gold-deep); width: 3.6rem; }
.note__orn svg { width: 100%; height: auto; }
.note p { font-family: var(--display); font-size: 1.25rem; line-height: 1.4; font-style: italic; }
.note footer { font-family: var(--caps); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

.wall__empty {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--aside);
  padding: 2rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  text-align: center;
}


/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */

.foot {
  background: linear-gradient(180deg, var(--teal-deep), #0f3138);
  color: var(--ivory);
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.foot__names {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: .02em;
}
.foot__names .amp { font-family: var(--script); color: var(--gold); font-size: .85em; margin: 0 .15em; }
.foot__when { margin-top: 1.4rem; font-family: var(--caps); letter-spacing: .3em; text-transform: uppercase; font-size: .74rem; color: var(--gold-pale); }
.foot__love { margin-top: clamp(3rem, 6vw, 5rem); font-family: var(--display); font-style: italic; font-size: var(--aside); color: var(--gold-pale); opacity: .85; }
.foot__botanical { position: absolute; width: clamp(14rem, 30vw, 26rem); opacity: .3; pointer-events: none; }
.foot__botanical--l { left: -3rem; bottom: -2rem; }
.foot__botanical--r { right: -3rem; top: -1rem; transform: scaleX(-1) rotate(160deg); }
.foot__botanical svg { stroke: var(--gold); fill: none; stroke-width: .8; }

/* ------------------------------------------------------------------
   Reveal (used sparingly: section heads only)
------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__kicker, .hero__names span, .hero__rule, .hero__when, .hero__where, .hero__scroll { opacity: 1; transform: none; }
  .hero__frame { opacity: .62; }
  .invite__hint, .invite__skip { opacity: 1; animation: none; }
  .seal::after, .seal::before { animation: none; }
  .flock, .bird, .firefly { animation: none; }
  .firefly { opacity: .7; }
  .reveal { opacity: 1; transform: none; }
  .wall__track { animation: none; width: auto; flex-wrap: wrap; padding-inline: 0; }
  .wall__track .note--clone { display: none; }
  .wall::before, .wall::after { display: none; }
  .timeline__line { transform: scaleY(1); }
  .hero__art .bulb { animation: none; }
  .timeline .event .event__title, .timeline .event .event__motif { opacity: 1 !important; transform: none !important; }
}