/* ==========================================================================
   Template: Japandi
   Japanese–Scandinavian calm: washi paper, a sumi-ink ensō, one vermilion
   hanko seal, a sparse plum branch and a lot of quiet space. Oak & linen
   neutrals, thin hairlines, vertical rhythm. Intro: sliding shoji panels.
   ========================================================================== */

.tpl-japandi {
  --radius: 3px;
  --radius-sm: 2px;
  --btn-radius: 2px;
  --content-width: 38rem;
  --section-pad: clamp(4rem, 11vw, 7.5rem);
  --names-size: clamp(2.7rem, 11.5vw, 5.4rem);
  --title-size: clamp(1.75rem, 5.8vw, 2.6rem);
  --eyebrow-spacing: .42em;
  --c-line: color-mix(in srgb, var(--c-text) 12%, transparent);
  --shadow: 0 1px 0 color-mix(in srgb, var(--c-text) 5%, transparent), 0 22px 44px -34px color-mix(in srgb, var(--c-secondary) 45%, transparent);
  --jp-wood: color-mix(in srgb, var(--c-secondary) 70%, #8a6a48);
  --jp-hair: color-mix(in srgb, var(--c-primary) 28%, transparent);
  --jp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jp-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .3' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .24 0 0 0 1.1 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --jp-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 3.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --jp-enso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='black'%3E%3Cpath d='M72.4 32 75.5 31.2 78.5 30.5 81.5 29.9 84.4 29.3 87.3 28.8 90.2 28.2 93.2 27.6 96.1 27.2 99.1 26.8 102.1 26.6 105.1 26.6 108.1 26.8 111.1 27.1 114.1 27.7 117.1 28.5 120 29.4 122.9 30.5 125.7 31.8 128.5 33.1 131.2 34.6 133.9 36.1 136.6 37.7 139.3 39.4 141.9 41.1 144.5 42.9 147 44.7 149.5 46.6 152 48.6 154.5 50.6 156.9 52.7 159.2 54.8 161.4 57.1 163.6 59.4 165.7 61.8 167.6 64.3 169.4 66.9 171.1 69.6 172.5 72.3 173.9 75.2 175 78.1 175.9 81 176.7 84 177.2 87.1 177.6 90.2 177.7 93.3 177.7 96.4 177.4 99.6 177 102.7 176.4 105.8 175.7 108.9 174.8 112 173.9 115 172.7 118 171.5 120.9 170.2 123.8 168.9 126.7 167.4 129.5 165.9 132.3 164.3 135.1 162.7 137.8 161 140.4 159.2 143 157.4 145.6 155.5 148.1 153.5 150.5 151.5 152.8 149.3 155 147.1 157.2 144.8 159.2 142.4 161.2 140 163 137.4 164.7 134.8 166.3 132.1 167.8 129.3 169.1 126.4 170.3 123.5 171.4 120.5 172.4 117.5 173.2 114.5 173.9 111.3 174.6 108.2 175.1 105 175.5 101.8 175.8 98.6 176 95.4 176.1 92.1 176.1 88.9 176 85.7 175.8 82.4 175.5 79.2 175 76 174.4 72.8 173.7 69.7 172.9 66.6 171.9 63.6 170.7 60.7 169.3 57.8 167.8 54.9 166.1 48.9 175.5 52 177.5 55.4 179.5 58.9 181.3 62.4 182.8 66 184.2 69.7 185.3 73.4 186.3 77.1 187.1 80.8 187.8 84.5 188.2 88.1 188.6 91.8 188.8 95.5 188.8 99.1 188.7 102.8 188.6 106.4 188.2 110 187.8 113.6 187.3 117.2 186.6 120.7 185.8 124.3 184.8 127.8 183.7 131.2 182.4 134.6 181 138 179.4 141.2 177.6 144.4 175.7 147.5 173.7 150.5 171.5 153.3 169.2 156 166.8 158.7 164.2 161.1 161.6 163.5 158.9 165.8 156.2 167.9 153.4 170 150.5 171.9 147.6 173.8 144.7 175.6 141.7 177.3 138.7 178.9 135.6 180.5 132.4 182 129.2 183.5 126 184.8 122.6 186 119.2 187.2 115.7 188.1 112.1 189 108.4 189.6 104.6 190.1 100.8 190.3 96.9 190.3 93 190.1 89.1 189.6 85.2 188.9 81.4 187.9 77.6 186.7 73.8 185.2 70.2 183.5 66.7 181.6 63.3 179.5 60.1 177.3 57 175 54.1 172.5 51.3 170 48.7 167.4 46.2 164.7 43.8 162 41.5 159.3 39.4 156.5 37.3 153.8 35.3 151 33.4 148.2 31.5 145.3 29.7 142.5 28 139.5 26.3 136.5 24.7 133.5 23.1 130.4 21.6 127.2 20.2 124 18.9 120.7 17.6 117.3 16.5 113.8 15.4 110.3 14.5 106.7 13.6 103.1 12.9 99.4 12.4 95.7 12 92 11.9 88.2 12.1 84.5 12.5 80.8 13.2 77.2 14.2 73.8 15.5 70.4 17 67.3 18.6Z'/%3E%3Ccircle cx='69.8' cy='25.3' r='7.1'/%3E%3Cpath d='M53.1 175.6 50 173.6 46.9 171.4 44 169 41.3 166.4 38.7 163.7 36.3 160.8 34 157.8 32 154.7 30.1 151.6 28.5 148.3 26.9 145 25.5 141.7 24.3 138.4 23.2 135.1 22.1 131.8 21.2 128.5 20.3 125.2 19.5 121.9 18.8 118.6 18.1 115.2 17.5 111.9 16.9 108.5 16.4 105.1 16 101.7 15.7 98.3 15.4 94.7 15.3 91.2 15.3 87.6 15.5 84 15.8 80.4 16.4 76.8 17.1 73.1 16.8 73.1 16.1 76.7 15.5 80.3 15.2 84 14.9 87.6 14.9 91.2 14.9 94.8 15.1 98.3 15.4 101.8 15.8 105.2 16.2 108.6 16.7 112 17.3 115.4 17.9 118.7 18.6 122.1 19.3 125.4 20.1 128.8 21 132.1 21.9 135.5 23 138.9 24.2 142.3 25.5 145.6 27 149 28.6 152.4 30.5 155.7 32.5 158.9 34.7 162 37.1 165.1 39.7 168 42.5 170.7 45.4 173.3 48.6 175.7 51.7 177.8Z'/%3E%3Cpath d='M54.3 173.7 51.3 171.8 48.3 169.6 45.5 167.3 42.8 164.9 40.3 162.2 38 159.5 35.9 156.6 33.9 153.6 32 150.5 30.4 147.3 28.9 144.2 27.5 140.9 26.3 137.7 25.1 134.4 24.1 131.2 23.1 127.9 22.3 124.7 21.5 121.4 20.7 118.1 20 114.8 19.4 111.5 18.8 108.2 18.2 104.9 17.8 101.5 17.4 98.1 17.2 94.6 17 91.1 17 87.6 17.1 84.1 17.4 80.5 17.9 77 18.6 73.5 19.4 69.9 20.5 66.5 21.7 63.1 23.2 59.8 24.8 56.5 26.6 53.4 28.7 50.3 30.8 47.4 33.2 44.7 35.6 42 35.4 41.8 33 44.5 30.6 47.3 28.5 50.2 26.4 53.2 24.6 56.4 22.9 59.6 21.4 62.9 20.1 66.4 19 69.8 18.1 73.4 17.4 76.9 16.9 80.5 16.5 84 16.4 87.6 16.3 91.2 16.4 94.7 16.6 98.1 17 101.6 17.4 105 17.8 108.4 18.4 111.7 19 115 19.6 118.4 20.3 121.7 21 125 21.9 128.3 22.8 131.6 23.7 134.9 24.8 138.2 26 141.5 27.3 144.8 28.8 148.1 30.4 151.4 32.2 154.6 34.2 157.7 36.4 160.7 38.7 163.6 41.2 166.4 43.9 169.1 46.8 171.5 49.8 173.8 52.9 175.9Z'/%3E%3Cpath d='M55.4 171.9 52.4 170.1 49.6 168 46.8 165.8 44.3 163.4 41.8 160.9 39.5 158.2 37.4 155.4 35.5 152.5 33.7 149.6 32.1 146.5 30.6 143.4 29.2 140.3 27.9 137.1 26.8 133.9 25.8 130.7 24.8 127.4 23.9 124.2 23.1 121 22.3 117.8 21.6 114.5 20.9 111.3 20.3 108 19.7 104.7 19.2 101.3 18.8 97.9 18.6 94.5 18.4 91.1 18.3 87.6 18.4 84.2 18.7 80.7 19.1 77.2 19.7 73.7 20.5 70.2 21.5 66.8 22.7 63.5 24.2 60.2 25.8 57 25.5 56.9 23.9 60.1 22.5 63.4 21.3 66.8 20.3 70.2 19.4 73.6 18.8 77.1 18.3 80.6 18 84.1 17.9 87.6 17.9 91.1 18 94.6 18.3 98 18.6 101.4 19.1 104.8 19.6 108.1 20.1 111.4 20.7 114.7 21.4 118 22.1 121.2 22.9 124.5 23.8 127.7 24.7 131 25.7 134.2 26.8 137.5 28 140.7 29.3 144 30.8 147.2 32.4 150.3 34.1 153.4 36.1 156.4 38.2 159.3 40.5 162.1 42.9 164.8 45.5 167.3 48.3 169.6 51.2 171.8 54.2 173.8Z'/%3E%3Cpath d='M56.7 169.9 53.7 168.1 51 166.2 48.4 164.1 45.9 161.8 43.5 159.4 41.3 156.8 39.3 154.2 37.3 151.4 35.6 148.5 34 145.6 32.5 142.5 31.1 139.5 29.9 136.4 28.7 133.2 27.6 130.1 26.7 126.9 25.7 123.7 24.9 120.6 24.1 117.4 23.3 114.1 22.6 110.9 22 107.7 21.4 104.4 20.9 101.1 20.4 97.8 20.1 94.4 19.9 91.1 19.8 87.7 19.9 84.2 20.1 80.8 20.5 77.4 21 74 21.8 70.6 22.7 67.2 23.8 63.9 25.2 60.7 26.7 57.5 28.4 54.4 30.3 51.5 32.4 48.6 32.2 48.5 30.1 51.3 28.2 54.3 26.5 57.4 24.9 60.6 23.6 63.8 22.4 67.1 21.4 70.5 20.6 73.9 20 77.3 19.6 80.8 19.4 84.2 19.3 87.7 19.3 91.1 19.5 94.5 19.7 97.9 20.1 101.2 20.6 104.5 21.1 107.8 21.7 111.1 22.4 114.4 23.1 117.6 23.8 120.8 24.6 124 25.5 127.3 26.4 130.5 27.4 133.7 28.5 136.9 29.7 140 31 143.2 32.5 146.3 34.1 149.4 35.8 152.4 37.7 155.3 39.8 158.1 42 160.8 44.4 163.3 46.9 165.7 49.6 168 52.4 170.1 55.4 172Z'/%3E%3Cpath d='M57.8 168.2 54.9 166.4 52.3 164.6 49.7 162.5 47.3 160.4 45 158.1 42.9 155.6 40.9 153 39 150.3 37.3 147.6 35.7 144.7 34.2 141.8 32.8 138.8 31.6 135.7 30.4 132.7 29.4 129.6 28.4 126.4 27.4 123.3 26.6 120.1 25.7 117 24.9 113.8 24.2 110.6 23.6 107.4 22.9 104.2 22.4 100.9 22 97.6 21.7 97.7 22.2 101 22.6 104.2 23.2 107.5 23.8 110.7 24.5 113.9 25.2 117.1 26 120.3 26.8 123.5 27.7 126.6 28.6 129.8 29.6 132.9 30.7 136.1 31.9 139.2 33.2 142.2 34.6 145.2 36.2 148.2 37.9 151.1 39.7 153.9 41.7 156.6 43.8 159.1 46.1 161.6 48.5 163.9 51.1 166.1 53.8 168.1 56.7 169.9Z'/%3E%3Cpath d='M58.2 167.7 55.3 165.9 52.7 164 50.2 162 47.8 159.9 45.6 157.6 43.5 155.1 41.5 152.6 39.7 149.9 38 147.2 36.4 144.3 35 141.4 33.6 138.5 32.4 135.4 31.2 132.4 30.2 129.3 29.2 126.2 28.3 123.1 27.4 119.9 27.2 120 28 123.1 28.9 126.3 29.9 129.4 30.9 132.5 32 135.6 33.2 138.6 34.5 141.7 35.9 144.6 37.4 147.5 39.1 150.3 40.9 153.1 42.8 155.7 44.9 158.2 47.1 160.6 49.5 162.8 52 164.9 54.6 166.9 57.5 168.8Z'/%3E%3C/svg%3E");
  --intro-bg: var(--c-bg);
  --door-bg: var(--c-surface);
  --door-edge: var(--jp-wood);
  --seal-bg: var(--c-accent);
  --seal-fg: var(--c-surface);
  --intro-duration: 1.7s;
  background-color: var(--c-bg);
  font-weight: 300;
  letter-spacing: .01em;
}
.tpl-japandi ::selection { background: var(--c-accent); color: var(--c-surface); }
.tpl-japandi :focus-visible { outline-color: color-mix(in srgb, var(--c-accent) 70%, transparent); }
.tpl-japandi strong, .tpl-japandi b { font-weight: 500; }

/* ---- Backgrounds -------------------------------------------------------- */
.tpl-japandi.bg-washi { background-image: var(--jp-fiber), var(--jp-grain); background-size: 2000px 600px, 220px 220px; }
.tpl-japandi.bg-tatami {
  background-image:
    var(--jp-grain),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-primary) 5%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 calc(50% - 5px), color-mix(in srgb, var(--c-primary) 5%, transparent) calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px) 100%);
  background-size: 220px 220px, auto, min(100%, 72rem) 100%;
  background-position: 0 0, 0 0, 50% 0;
  background-repeat: repeat, repeat, repeat-y;
}
.tpl-japandi.bg-sade { background-image: linear-gradient(180deg, var(--c-bg), color-mix(in srgb, var(--c-bg) 86%, var(--c-primary)) 140%); background-attachment: fixed; }

/* ---- Intro: shoji panels sliding apart ----------------------------------- */
.tpl-japandi .inv-intro { background: color-mix(in srgb, var(--c-bg) 80%, var(--c-secondary)); }
.tpl-japandi .inv-intro__door {
  color: var(--jp-wood);
  background:
    radial-gradient(ellipse 85% 55% at 50% 45%, color-mix(in srgb, #fffaf0 55%, transparent), transparent 75%),
    var(--jp-fiber),
    var(--jp-grain),
    linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 92%, #fff), color-mix(in srgb, var(--c-surface) 88%, var(--c-bg)));
  background-size: auto, 2000px 600px, 220px 220px, auto;
}
.tpl-japandi .inv-intro__door--left { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--jp-wood) 60%, transparent), 6px 0 18px -10px rgba(0, 0, 0, .35); z-index: 1; }
.tpl-japandi .inv-intro__door--right { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--jp-wood) 60%, transparent); }
.tpl-japandi .inv-intro__door-face .orn { opacity: .82; }
.tpl-japandi .inv-intro__door-face svg path { vector-effect: non-scaling-stroke; }
.tpl-japandi .jp-shoji__kick { opacity: .38; }
.tpl-japandi .inv-intro__door-face::after { content: ""; position: absolute; top: 50%; width: 11px; height: 54px; margin-top: -27px; border-radius: 6px; border: 2px solid color-mix(in srgb, var(--jp-wood) 85%, transparent); background: color-mix(in srgb, var(--jp-wood) 14%, var(--c-surface)); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
.tpl-japandi .inv-intro__door--left .inv-intro__door-face::after { right: 22px; }
.tpl-japandi .inv-intro__door--right .inv-intro__door-face::after { left: 22px; }

.tpl-japandi .inv-intro__content {
  width: min(100% - 3rem, 22rem);
  padding: 2.4rem 1.8rem 2.2rem;
  gap: .8rem;
  background: var(--jp-grain), var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--jp-wood) 30%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-surface) 70%, transparent), 0 40px 70px -36px rgba(0, 0, 0, .45);
}
.tpl-japandi .inv-intro__content::before {
  content: ""; position: absolute; left: 50%; top: .9rem; width: 6.8rem; height: 6.8rem; margin-left: -3.4rem;
  background: var(--c-primary); opacity: .92; pointer-events: none;
  -webkit-mask: var(--jp-enso) center / contain no-repeat; mask: var(--jp-enso) center / contain no-repeat;
}
.tpl-japandi .inv-intro__seal {
  position: relative; width: 2.7rem; height: 2.7rem; margin: .8rem 0 1.5rem;
  border-radius: 4px; font-size: .86rem; font-weight: 600; letter-spacing: 0; line-height: 1;
  transform: translate(2rem, 1.6rem) rotate(-5deg);
  box-shadow: inset 0 0 0 3px var(--c-accent), inset 0 0 0 4px color-mix(in srgb, var(--c-surface) 75%, transparent);
  -webkit-mask: var(--jp-speckle) 0 0 / 90px 90px; mask: var(--jp-speckle) 0 0 / 90px 90px;
}
.tpl-japandi .inv-intro__seal span { font-family: var(--f-display); }
.tpl-japandi .inv-intro__eyebrow { font-size: .7rem; letter-spacing: .42em; padding-left: .42em; color: var(--c-muted); }
.tpl-japandi .inv-intro__title { font-weight: 300; font-size: clamp(2rem, 8.6vw, 2.9rem); letter-spacing: .03em; line-height: 1.15; color: var(--c-secondary); }
.tpl-japandi .inv-intro__guest { font-size: .98rem; }
.tpl-japandi .inv-intro__date { display: flex; align-items: center; gap: .8rem; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-muted); }
.tpl-japandi .inv-intro__date::before, .tpl-japandi .inv-intro__date::after { content: ""; width: 1.4rem; height: 1px; background: var(--jp-hair); }
.tpl-japandi .inv-intro__open { margin-top: .9rem; border-radius: 2px; background: var(--c-primary); color: var(--c-on-primary); padding: 1rem 2.1rem; font-size: .74rem; letter-spacing: .32em; font-weight: 500; box-shadow: inset 0 0 0 4px var(--c-primary), inset 0 0 0 5px color-mix(in srgb, var(--c-on-primary) 30%, transparent), 0 18px 30px -18px rgba(0, 0, 0, .5); animation: none; }
.tpl-japandi .inv-intro__open:focus-visible { outline: 1px solid var(--c-primary); outline-offset: 5px; }
.tpl-japandi .inv-intro__open:hover { background: var(--c-secondary); box-shadow: inset 0 0 0 4px var(--c-secondary), inset 0 0 0 5px color-mix(in srgb, var(--c-on-primary) 30%, transparent), 0 18px 30px -18px rgba(0, 0, 0, .5); }

/* ---- Hero: ensō, hanko, plum branch -------------------------------------- */
.jp-hero { min-height: min(100svh, 60rem); padding: 7.5rem 1.5rem 7rem; }
.jp-hero__inner { gap: 1.15rem; position: relative; }
.jp-hero__branch { position: absolute; top: 0; left: 0; width: clamp(150px, 40vw, 360px); color: var(--c-primary); pointer-events: none; }
.jp-hero__branch svg { width: 100%; height: auto; }
.tpl-japandi .jp-bloom { fill: var(--c-accent); opacity: .82; }
.tpl-japandi .jp-bloom__eye { fill: var(--c-surface); opacity: .9; }
.jp-hero__side { position: absolute; top: 1.6rem; right: clamp(.9rem, 3.5vw, 2.6rem); writing-mode: vertical-rl; display: flex; align-items: center; gap: .7rem; font-size: .66rem; letter-spacing: .42em; text-transform: uppercase; color: var(--c-muted); }
.jp-hero__side-dot { width: 4px; height: 4px; background: var(--c-accent); }

.jp-mark { position: relative; width: clamp(168px, 46vw, 230px); aspect-ratio: 1; color: var(--c-primary); margin-bottom: .6rem; }
.jp-mark__enso { position: absolute; inset: 0; }
.jp-mark__enso svg { width: 100%; height: 100%; }
.jp-hanko {
  position: absolute; right: 2%; bottom: 3%;
  display: grid; justify-items: center; align-content: center; gap: .1em;
  width: 2.9rem; height: 4.1rem; padding: .3rem 0;
  border-radius: 4px; background: var(--c-accent); color: var(--c-surface);
  font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1;
  box-shadow: inset 0 0 0 3px var(--c-accent), inset 0 0 0 4px color-mix(in srgb, var(--c-surface) 72%, transparent);
  transform: rotate(-4deg);
  -webkit-mask: var(--jp-speckle) 0 0 / 90px 90px; mask: var(--jp-speckle) 0 0 / 90px 90px;
}
.jp-hanko--single { width: 3.2rem; height: 3.2rem; font-size: 1.45rem; }
.jp-hero__eyebrow { display: flex; align-items: center; gap: .9rem; font-size: .72rem; letter-spacing: .5em; padding-left: .5em; color: var(--c-muted); }
.jp-hero__eyebrow::before, .jp-hero__eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: var(--jp-hair); }
.jp-hero__names { font-weight: 300; letter-spacing: .04em; line-height: 1.08; gap: .06em; }
.jp-hero__names .inv-hero__name { overflow-wrap: anywhere; }
.jp-hero__names .inv-hero__amp { font-family: var(--f-display); font-size: .38em; color: var(--c-muted); letter-spacing: 0; margin-block: .12em; }
.jp-hero__when { display: grid; justify-items: center; gap: .55rem; margin-top: .9rem; color: var(--c-secondary); }
.jp-hero__date { display: flex; align-items: center; line-height: 1; }
.jp-hero__month, .jp-hero__year { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; width: 6.2rem; }
.jp-hero__month { text-align: right; padding-right: 1.1rem; }
.jp-hero__year { text-align: left; padding-left: 1.3rem; }
.jp-hero__day { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.7rem, 11vw, 3.4rem); padding: .2rem 1.1rem; border-inline: 1px solid var(--jp-hair); color: var(--c-primary); }
.jp-hero__meta { display: flex; align-items: center; gap: .7rem; font-size: .9rem; letter-spacing: .12em; color: var(--c-text); }
.jp-hero__dot { width: 4px; height: 4px; background: var(--c-accent); }
.jp-hero__venue { font-family: var(--f-display); font-size: clamp(1.1rem, 3.8vw, 1.3rem); letter-spacing: .04em; color: var(--c-secondary); }
.jp-hero__hashtag { font-size: .85rem; letter-spacing: .14em; color: var(--c-muted); }
.tpl-japandi .jp-hero__scroll { width: 1px; height: 54px; margin-left: 0; border: 0; border-radius: 0; background: var(--jp-hair); opacity: 1; overflow: visible; bottom: 1.4rem; }
.tpl-japandi .jp-hero__scroll span { left: -2px; top: 0; width: 5px; height: 5px; margin: 0; border-radius: 50%; background: var(--c-primary); animation: jp-drip 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes jp-drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }

.tpl-japandi .inv-hero.has-cover::before { background: linear-gradient(180deg, rgba(20, 18, 15, .45), rgba(20, 18, 15, .72)); }
.tpl-japandi .jp-hero.has-cover .jp-mark, .tpl-japandi .jp-hero.has-cover .jp-hero__branch,
.tpl-japandi .jp-hero.has-cover .jp-hero__when, .tpl-japandi .jp-hero.has-cover .jp-hero__day,
.tpl-japandi .jp-hero.has-cover .jp-hero__venue, .tpl-japandi .jp-hero.has-cover .jp-hero__meta,
.tpl-japandi .jp-hero.has-cover .jp-hero__side, .tpl-japandi .jp-hero.has-cover .jp-hero__hashtag,
.tpl-japandi .jp-hero.has-cover .jp-hero__eyebrow, .tpl-japandi .jp-hero.has-cover .inv-hero__amp { color: #fff; }
.tpl-japandi .jp-hero.has-cover .jp-hero__branch { opacity: .85; }
.tpl-japandi .jp-hero.has-cover .jp-bloom__eye { fill: #fff; }
.tpl-japandi .jp-hero.has-cover .jp-hero__day, .tpl-japandi .jp-hero.has-cover .jp-hero__eyebrow::before, .tpl-japandi .jp-hero.has-cover .jp-hero__eyebrow::after { border-color: rgba(255, 255, 255, .5); }
.tpl-japandi .jp-hero.has-cover .jp-hero__eyebrow::before, .tpl-japandi .jp-hero.has-cover .jp-hero__eyebrow::after, .tpl-japandi .jp-hero.has-cover .jp-hero__scroll { background: rgba(255, 255, 255, .5); }
.tpl-japandi .jp-hero.has-cover .jp-hero__scroll span { background: #fff; }

/* ---- Section rhythm ------------------------------------------------------ */
.jp-scroll { position: relative; padding-bottom: 1rem; }
.jp-divider { display: block; width: min(230px, 58%); margin: calc(var(--section-pad) * -.35) auto; color: color-mix(in srgb, var(--c-primary) 75%, transparent); }
.tpl-japandi .inv-divider { width: min(200px, 56%); margin-bottom: 2rem; color: color-mix(in srgb, var(--c-primary) 75%, transparent); }
.tpl-japandi .jp-seal { fill: var(--c-accent); }
.tpl-japandi .jp-seal__line { stroke: var(--c-surface); opacity: .75; }
.tpl-japandi .inv-section__head { gap: .7rem; }
.tpl-japandi .inv-section__head::before { content: ""; width: 1px; height: 2.6rem; margin-bottom: .5rem; background: linear-gradient(180deg, transparent, var(--jp-hair)); }
.tpl-japandi .inv-eyebrow { font-size: .7rem; letter-spacing: var(--eyebrow-spacing); padding-left: var(--eyebrow-spacing); color: var(--c-muted); font-weight: 400; }
.tpl-japandi .inv-section__title { font-weight: 300; letter-spacing: .05em; color: var(--c-secondary); text-wrap: balance; }
.tpl-japandi .inv-section__lead { font-size: .98rem; }
.tpl-japandi .inv-card { border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); padding: clamp(1.6rem, 6vw, 2.6rem); }

/* Welcome */
.tpl-japandi .inv-welcome { padding-top: clamp(3.5rem, 9vw, 5.5rem); }
.tpl-japandi .inv-welcome__guest { font-size: 1.02rem; letter-spacing: .04em; color: var(--c-muted); }
.tpl-japandi .inv-welcome__guest strong { color: var(--c-secondary); }
.tpl-japandi .inv-welcome__message { font-family: var(--f-display); font-size: clamp(1.1rem, 3.4vw, 1.3rem); line-height: 2.05; letter-spacing: .03em; color: var(--c-text); gap: 1.3rem; max-width: 32rem; margin-inline: auto; }

/* People */
.tpl-japandi .inv-person { gap: .45rem; }
.tpl-japandi .inv-person__role { font-size: .68rem; letter-spacing: .4em; padding-left: .4em; color: var(--c-muted); }
.tpl-japandi .inv-person__name { font-weight: 300; letter-spacing: .05em; font-size: clamp(1.55rem, 5vw, 2rem); }
.tpl-japandi .inv-person__family { font-size: .9rem; }
.tpl-japandi .inv-person__photo { border-radius: 50%; border: 1px solid var(--c-line); padding: 4px; background: var(--c-surface); box-shadow: none; }
.tpl-japandi .inv-people__photo { border-radius: var(--radius); padding: 8px; background: var(--c-surface); border: 1px solid var(--c-line); }
.tpl-japandi .inv-people__amp { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--jp-hair); font-family: var(--f-display); font-size: 1.25rem; color: var(--c-muted); }

/* Countdown: river stones */
.tpl-japandi .inv-countdown__grid { max-width: 30rem; gap: clamp(.55rem, 2.6vw, 1.2rem); }
.tpl-japandi .inv-countdown__unit { aspect-ratio: 1; padding: 0; align-content: center; gap: .3rem; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%; }
.tpl-japandi .inv-countdown__unit:nth-child(2) { border-radius: 52% 48% 47% 53% / 49% 53% 47% 51%; }
.tpl-japandi .inv-countdown__unit:nth-child(3) { border-radius: 50% 50% 53% 47% / 47% 50% 50% 53%; }
.tpl-japandi .inv-countdown__unit:nth-child(4) { border-radius: 47% 53% 50% 50% / 53% 48% 52% 47%; }
.tpl-japandi .inv-countdown__value { font-weight: 300; font-size: clamp(1.55rem, 6.6vw, 2.4rem); color: var(--c-primary); }
.tpl-japandi .inv-countdown__label { font-size: .58rem; letter-spacing: .2em; padding-left: .2em; }

/* Sessions */
.tpl-japandi .inv-sessions__list { gap: 1rem; }
.tpl-japandi .inv-session { grid-template-columns: 4.4rem 1fr; gap: 1.3rem; padding: clamp(1.4rem, 4.5vw, 1.9rem); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); border-radius: var(--radius); }
.tpl-japandi .inv-session__date { background: none; border-radius: 0; padding: .2rem 1.2rem .2rem 0; min-width: 0; border-right: 1px solid var(--jp-hair); gap: .3rem; align-self: stretch; align-content: start; }
.tpl-japandi .inv-session__day { font-weight: 300; font-size: 2.3rem; line-height: 1; color: var(--c-primary); }
.tpl-japandi .inv-session__month { font-size: .66rem; letter-spacing: .2em; }
.tpl-japandi .inv-session__year { font-size: .7rem; letter-spacing: .1em; }
.tpl-japandi .inv-session__body { gap: .5rem; }
.tpl-japandi .inv-session__title { font-weight: 300; letter-spacing: .04em; font-size: clamp(1.35rem, 4.4vw, 1.6rem); }
.tpl-japandi .inv-session__when { font-size: .9rem; }
.tpl-japandi .inv-session__time { color: var(--c-primary); font-weight: 500; }
.tpl-japandi .inv-session__venue { font-weight: 500; color: var(--c-secondary); }
.tpl-japandi .inv-session__desc { font-size: .9rem; }
.tpl-japandi .inv-calendar__menu { border-radius: var(--radius); }
@media (max-width: 420px) {
  .tpl-japandi .inv-session { grid-template-columns: 1fr; gap: .9rem; }
  .tpl-japandi .inv-session__date { border-right: 0; border-bottom: 1px solid var(--jp-hair); padding: 0 0 .7rem; width: 100%; justify-content: start; align-items: baseline; gap: .55rem; }
  .tpl-japandi .inv-session__day { font-size: 1.7rem; }
}
@media (min-width: 768px) {
  .tpl-japandi .inv-sessions > .inv-sessions__list { max-width: 54rem; }
  .tpl-japandi .inv-sessions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .tpl-japandi .inv-sessions__list > :last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, 27rem); justify-self: center; }
}

/* Dress code */
.tpl-japandi .inv-dress { padding-block: 1rem var(--section-pad); }
.tpl-japandi .inv-dress-code { width: fit-content; max-width: 100%; margin-inline: auto; padding: 1.1rem 2.6rem; gap: .45rem; border-block: 1px solid var(--jp-hair); }
.tpl-japandi .inv-dress-code__label { font-size: .68rem; letter-spacing: .42em; padding-left: .42em; color: var(--c-muted); }
.tpl-japandi .inv-dress-code__value { font-weight: 300; letter-spacing: .05em; font-size: 1.45rem; }

/* ---- Buttons & forms ----------------------------------------------------- */
.tpl-japandi .inv-btn { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; padding-inline: 1.35rem; }
.tpl-japandi .inv-btn--primary { min-height: 52px; background: var(--c-primary); color: var(--c-on-primary); }
.tpl-japandi .inv-btn--primary:hover { background: var(--c-secondary); }
.tpl-japandi .inv-btn--ghost { border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); color: var(--c-secondary); background: color-mix(in srgb, var(--c-surface) 60%, transparent); }
.tpl-japandi .inv-btn--ghost:hover { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)); }
.tpl-japandi .inv-label { font-size: .86rem; letter-spacing: .03em; color: var(--c-muted); }
.tpl-japandi .inv-choice legend.inv-label { margin-bottom: .2rem; }
.tpl-japandi .inv-input { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c-bg) 55%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-text) 16%, transparent); font-weight: 400; }
.tpl-japandi .inv-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
.tpl-japandi .inv-choice__option span { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c-bg) 55%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-text) 16%, transparent); font-size: .92rem; letter-spacing: .03em; }
.tpl-japandi .inv-choice__option input:hover + span { border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); }
.tpl-japandi .inv-choice__option input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); box-shadow: inset 0 0 0 3px var(--c-primary), inset 0 0 0 4px color-mix(in srgb, var(--c-on-primary) 28%, transparent); }
.tpl-japandi .inv-privacy a { color: var(--c-primary); }
.tpl-japandi .inv-rsvp__thanks { font-weight: 300; letter-spacing: .04em; }
.tpl-japandi .inv-dropzone { border: 1px dashed color-mix(in srgb, var(--c-primary) 40%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--c-bg) 55%, var(--c-surface)); padding: 2.4rem 1rem; }
.tpl-japandi .inv-dropzone:hover, .tpl-japandi .inv-dropzone.is-dragover { background: color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)); }
.tpl-japandi .inv-dropzone .inv-icon { color: var(--c-primary); stroke-width: 1.3; }
.tpl-japandi .inv-dropzone__title { font-weight: 500; letter-spacing: .02em; }
.tpl-japandi .inv-upload__item { border-radius: var(--radius-sm); }

/* ---- Gallery, guestbook, gift, contact ----------------------------------- */
.tpl-japandi .inv-gallery__grid { gap: .6rem; }
.tpl-japandi .inv-gallery__item { padding: 4px; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-line); }
.tpl-japandi .inv-gallery__item img { border-radius: 1px; }
.tpl-japandi .inv-guestbook__list { gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 640px) { .tpl-japandi .inv-guestbook__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-japandi .inv-guestbook__entry { position: relative; text-align: center; padding: 2.5rem 1.5rem 1.6rem; border-radius: var(--radius-sm); background: var(--c-surface); box-shadow: var(--shadow); }
.tpl-japandi .inv-guestbook__entry::before { content: ""; position: absolute; top: .95rem; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 1px solid var(--jp-hair); background: var(--c-bg); }
.tpl-japandi .inv-guestbook__entry blockquote { font-family: var(--f-display); font-style: normal; font-size: 1.08rem; line-height: 1.85; letter-spacing: .02em; }
.tpl-japandi .inv-guestbook__author { margin-top: .9rem; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-muted); }
.tpl-japandi .inv-gift__item::before, .tpl-japandi .inv-contact__item::before { content: ""; width: .55rem; height: .55rem; margin-bottom: .5rem; background: var(--c-accent); border-radius: 1px; transform: rotate(-4deg); }
.tpl-japandi .inv-contact__name, .tpl-japandi .inv-gift__holder { font-weight: 300; letter-spacing: .04em; font-size: 1.35rem; }
.tpl-japandi .inv-contact__role, .tpl-japandi .inv-gift__bank { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; }
.tpl-japandi .inv-gift__iban { padding: .55rem .9rem; border-block: 1px solid var(--c-line); margin: .3rem 0 .2rem; }
.tpl-japandi .inv-gift__iban code { color: var(--c-secondary); font-size: .9rem; }
.tpl-japandi .inv-share { padding-block: 1rem 2rem; }

/* ---- Footer & music ------------------------------------------------------ */
.tpl-japandi .inv-footer { padding: 3.5rem 1.25rem 4rem; gap: .9rem; }
.tpl-japandi .inv-footer__ornament { width: 96px; color: var(--c-primary); margin-bottom: .4rem; }
.tpl-japandi .inv-footer__text { font-size: .95rem; letter-spacing: .03em; }
.tpl-japandi .inv-footer__names { font-weight: 300; letter-spacing: .08em; font-size: clamp(1.6rem, 6vw, 2.1rem); }
.tpl-japandi .inv-footer__hashtag { color: var(--c-muted); letter-spacing: .14em; font-size: .85rem; }
.tpl-japandi .inv-footer__brand { letter-spacing: .12em; }
.tpl-japandi .inv-music { background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--jp-hair); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-surface) 60%, transparent), var(--shadow); }
.tpl-japandi .inv-music[aria-pressed="true"] { animation: none; border-color: var(--c-accent); color: var(--c-accent); }
.tpl-japandi .inv-toast { border-radius: var(--radius); background: var(--c-secondary); }

/* ---- Large screens ------------------------------------------------------- */
@media (min-width: 900px) {
  .jp-hero { padding: 7rem 3rem 7.5rem; }
  .jp-hero__side { top: 50%; transform: translateY(-50%); right: 2.8rem; font-size: .7rem; }
  .jp-hero__inner { gap: 1.3rem; }
  .jp-mark { width: 240px; }
  .jp-hanko { width: 3.2rem; height: 4.5rem; font-size: 1.32rem; }
  .jp-hanko--single { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
}

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tpl-japandi .jp-hero__scroll span { animation: none; opacity: 1; transform: translateY(24px); }
}