/* Tema Jawa (id "jawa"): layered live cover, inside of the invitation, print card. Sample art, to be reviewed by a Javanese designer.
   Drawn by js/jawa.js. Gold is ornament only; text is indigo #1F3A44 or antique gold #7A5C1A (never #D8B96A or #B58F38 on ivory).
   Patterns in view: batik-band-tile.svg (bands) and pattern-kawung-gold.svg (fills). Parang stays out of view, apart from the small
   S-blade unit that is part of the divider and gunungan drawings. Motion is transform and opacity only (plus the foil shimmer on a
   masked layer), and all of it is off under prefers-reduced-motion. */
:where(.jw, .inv-jawa, .jwc, .pc-jawa, [data-skin="jawa"]) {
  --jw-ivory: #F6EFE0; --jw-ivory-2: #FBF7EC; --jw-gold: #D8B96A; --jw-gold-hi: #F1DFA6; --jw-gold-lo: #9C7A2C; --jw-line: #B58F38;
  --jw-gold-text: #7A5C1A; /* antique gold for text: #8A6A1F measured 4.4:1 on flat ivory and about 3.6:1 on the textured paper, this one 4.6 to 5:1 under the paper veil */ --jw-indigo: #1F3A44; --jw-indigo-2: #2A4B57; --jw-sogan: #5A3A22;
  --jw-foil: linear-gradient(135deg, #F6E8B8 0%, #D8B96A 28%, #A5832F 52%, #D8B96A 76%, #F6E8B8 100%);
  --jw-foil-text: linear-gradient(135deg, #4E3A0E 0%, #8A6A1F 38%, #B58F38 50%, #6E5216 68%, #4E3A0E 100%);
  --jw-veil: linear-gradient(rgba(251, 247, 236, .5), rgba(251, 247, 236, .5)); /* keeps the paper light enough behind gold text */
  --jw-paper: url(../assets/jawa/texture-ivory-tile.webp); /* the kit texture mirrored in x and y so a long page tiles without a seam, 840px per tile; small boxes (card, strip, booth) use texture-ivory.webp as is */
  --jw-paper-1: url(../assets/jawa/texture-ivory.webp);
  --jw-script: "Pinyon Script", cursive; --jw-serif: "Cormorant Garamond", Georgia, serif; --jw-sans: Montserrat, system-ui, sans-serif;
}
.jw img { max-width: none; user-select: none; -webkit-user-drag: none }

/* ---------- Cover. The box is 390 x 844 at any width: --u is 1px of that design, so everything scales with the box ---------- */
.jw-slot { display: block; width: 100% }
.jw-cover { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; container-type: inline-size; isolation: isolate; text-align: center; color: var(--jw-indigo); font-family: var(--jw-sans); background: var(--jw-ivory); -webkit-font-smoothing: antialiased }
.jw-in { --u: .25641cqw; position: absolute; inset: 0 }
.jw-lay, .jw-deco { position: absolute; inset: 0 }
.jw-paper { position: absolute; inset: 0; background: var(--jw-veil), var(--jw-paper) 0 0 / calc(840 * var(--u)), var(--jw-ivory) }
.jw .jw-mist { position: absolute; left: calc(-6 * var(--u)); top: 34.6%; width: calc(402 * var(--u)); height: auto; opacity: .95; animation: jw-drift 32s ease-in-out infinite alternate; will-change: transform }
.jw-fr { box-sizing: border-box; position: absolute; left: calc(-10 * var(--u)); top: calc(4 * var(--u)); width: calc(410 * var(--u)); height: calc(100% - 38 * var(--u)); border: solid transparent; border-width: calc(262 * var(--u)) calc(205 * var(--u)) calc(75 * var(--u));
  border-image: url(../assets/jawa/frame.webp) 525 410 150 410 / calc(262 * var(--u)) calc(205 * var(--u)) calc(75 * var(--u)) calc(205 * var(--u)) stretch; filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(90, 58, 34, .35)) }
.jw .jw-bot { position: absolute; left: calc(-14 * var(--u)); bottom: calc(34 * var(--u)); width: calc(418 * var(--u)); height: auto; animation: jw-rise 1.8s cubic-bezier(.2, .7, .2, 1) .15s both }
.jw .jw-pl, .jw .jw-pr { position: absolute; bottom: calc(30 * var(--u)); width: calc(112 * var(--u)); height: auto; filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(90, 58, 34, .4)) }
.jw .jw-pl { left: calc(-2 * var(--u)) } .jw .jw-pr { right: calc(-2 * var(--u)); transform: scaleX(-1) }
.jw-band { position: absolute; left: 0; right: 0; bottom: 0; height: calc(34 * var(--u)); background: url(../assets/jawa/batik-band-tile.svg) 0 0 / auto 100% repeat-x }

.jw-txt { position: absolute; left: 0; right: 0; top: 23.2%; display: flex; flex-direction: column; align-items: center }
.jw-txt > * { position: relative }
.jw-txt::before { content: ""; position: absolute; left: 19%; right: 19%; top: 38%; bottom: -8%; background: radial-gradient(ellipse at 50% 50%, rgba(246, 239, 224, .9) 0, rgba(246, 239, 224, .75) 50%, transparent 76%) }
.jw-cap { font-family: var(--jw-sans); font-weight: 500; font-size: max(9px, calc(10 * var(--u))); line-height: 1.3; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--jw-gold-text); margin: 0 }
.jw-mono { position: relative; width: calc(104 * var(--u)); height: calc(104 * var(--u)); margin-top: calc(6 * var(--u)) }
.jw .jw-mono > img { position: absolute; left: 0; top: 0; width: 100%; height: 100% }
.jw-mono > span { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: calc(8 * var(--u)); font: 400 calc(44 * var(--u)) / 1 var(--jw-script); white-space: nowrap; background: var(--jw-foil-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 246, 216, .95)) }
.jw-gl { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(../assets/jawa/monogram-base.svg) center / 100% no-repeat; mask: url(../assets/jawa/monogram-base.svg) center / 100% no-repeat; pointer-events: none }
.jw-gl b { position: absolute; top: -10%; left: 0; width: 55%; height: 120%; background: linear-gradient(105deg, transparent 5%, rgba(255, 252, 235, .95) 50%, transparent 95%); transform: translate3d(-130%, 0, 0) skewX(-14deg); animation: jw-glint 1.5s cubic-bezier(.4, 0, .2, 1) 1.2s 1 both }
.jw-sg { margin-top: calc(8 * var(--u)) }
.jw-names { margin-top: calc(8 * var(--u)); font-family: var(--jw-script); font-weight: 400; font-size: calc(54 * var(--u)); line-height: .9; color: var(--jw-indigo) }
.jw-nm { display: block; white-space: nowrap } .jw-nm > span { display: inline-block; font-size: calc(1em * var(--k, 1)) }
.jw-amp { display: block; font-size: calc(30 * var(--u)); line-height: .8; margin: calc(2 * var(--u)) 0; color: var(--jw-gold-text) }
.jw-date { margin-top: calc(16 * var(--u)); font-family: var(--jw-sans); font-weight: 600; font-size: max(9px, calc(10.5 * var(--u))); letter-spacing: .3em; padding-left: .3em; color: var(--jw-indigo) }
.jw-cta { position: absolute; left: 0; right: 0; top: 65.4%; display: flex; justify-content: center }
.jw-open { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--jw-gold); background: var(--jw-indigo); color: var(--jw-ivory);
  font: 600 max(10.5px, calc(10.5 * var(--u))) / 1 var(--jw-sans); letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 0 3px var(--jw-ivory), 0 0 0 4px var(--jw-gold), 0 6px 14px rgba(31, 58, 68, .28) }
button.jw-open { cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.4, .5, 1) } button.jw-open:hover { transform: translate3d(0, -2px, 0) } button.jw-open:active { transform: scale(.97) }
button.jw-open:focus-visible { outline: 3px solid var(--jw-gold-text); outline-offset: 7px; border-radius: 999px }
.jw-to { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 76%; padding: .3em 1em; border-radius: 999px; background: rgba(246, 239, 224, .88); top: calc(65.4% + 62 * var(--u)); font: 500 italic max(13px, calc(14 * var(--u))) / 1.3 var(--jw-serif); color: var(--jw-indigo) }
.jw-to:empty { display: none } .jw-to b { font-weight: 600 }
.jw-spk { position: absolute; width: calc(11 * var(--u)); aspect-ratio: 1; background: radial-gradient(circle, #FFF8DC 0, #F1DFA6 38%, transparent 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: jw-twinkle 1.6s ease-out both; pointer-events: none }

/* gate: the cover is a full-screen layer on the guest page; the frame parts in two halves and the invitation shows through */
html.jw-locked { overflow: hidden }
.jw-locked .jw-body { visibility: hidden }
.jw-gate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: linear-gradient(rgba(251, 247, 236, .5), rgba(251, 247, 236, .5)), url(../assets/jawa/texture-ivory-tile.webp) 0 0 / 840px, #F6EFE0; transition: opacity .7s ease .55s }
.jw-gate[hidden] { display: none }
.jw-gate .jw-cover { width: min(100vw, 480px, calc(100dvh * .462)); height: 100dvh; aspect-ratio: auto; background: none }
.jw-door { position: absolute; inset: 0; will-change: transform; transition: transform 1.2s cubic-bezier(.7, 0, .2, 1) .1s }
.jw-door.l { clip-path: inset(0 49.8% 0 0) } .jw-door.r { clip-path: inset(0 0 0 49.8%) }
.jw-gate .jw-lay { transition: opacity .6s ease, transform .9s cubic-bezier(.3, .7, .3, 1) }
.jw-gate.is-open { opacity: 0 } .jw-gate.is-open .jw-lay { opacity: 0; transform: scale(1.045) }
.jw-gate.is-open .jw-door.l { transform: translate3d(-100%, 0, 0) } .jw-gate.is-open .jw-door.r { transform: translate3d(100%, 0, 0) }
.jw-gate.is-open .jw-spk { display: none }

@keyframes jw-drift { from { transform: translate3d(-2.2%, 0, 0) } to { transform: translate3d(2.2%, -1.6%, 0) } }
@keyframes jw-rise { from { transform: translate3d(0, 26%, 0); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes jw-glint { 0% { transform: translate3d(-130%, 0, 0) skewX(-14deg) } 100% { transform: translate3d(260%, 0, 0) skewX(-14deg) } }
@keyframes jw-twinkle { 0% { opacity: 0; transform: scale(.3) } 35% { opacity: 1; transform: scale(1.15) } 100% { opacity: 0; transform: scale(.6) } }

/* ---------- Inside of the invitation (360 to 480 wide) ---------- */
.inv-jawa { --bg: #F6EFE0; position: relative; padding-bottom: 0; overflow: hidden; color: var(--jw-indigo); font-family: var(--jw-sans); background: var(--jw-veil), var(--jw-paper) 0 0 / 840px, var(--jw-ivory); text-align: center; font-variant-numeric: lining-nums }
.inv-jawa .inv-cover { margin: 0 }
.jw-body { position: relative; container-type: inline-size }
.jw-sec { position: relative; padding: 0 22px }
.jw-couple { padding-top: 39cqw; padding-bottom: 10px }
.inv-jawa .jw-garland { position: absolute; left: 50%; top: -4px; width: 112cqw; max-width: none; height: auto; transform: translate3d(-50%, 0, 0); pointer-events: none }
.jw-lead { margin: 12px auto 0; max-width: 290px; font: 500 italic 17px / 1.35 var(--jw-serif); color: var(--jw-sogan) }
.jw-hi { margin: 14px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-style: normal; font-family: var(--jw-sans); color: var(--jw-gold-text); font-weight: 500 }
.jw-guest { margin: 2px auto 0; font: 400 34px / 1.1 var(--jw-script); color: var(--jw-indigo) }
.inv-jawa .jw-cap { margin-top: 20px }
.jw-h { margin: 6px 0 0; font: 400 46px / 1.1 var(--jw-script); color: var(--jw-indigo) }
.jw-oval { position: relative; width: 172px; aspect-ratio: 611 / 832; margin: 14px auto 4px }
.jw-ph { position: absolute; left: 12.7%; right: 12.7%; top: 11.4%; bottom: 11.4%; border-radius: 50%; overflow: hidden; background: #cfd9d8 }
.inv-jawa .jw-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 28% }
.inv-jawa .jw-ovf { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none }
.inv-jawa .inv-names { margin: 0; font: 400 40px / 1.05 var(--jw-script); color: var(--jw-indigo) }
.jw-sub { margin: 4px 0 0; font: 500 italic 15px / 1.3 var(--jw-serif); color: var(--jw-sogan) }
.inv-jawa .inv-text { max-width: 300px; margin: 12px auto 0; padding: 0; font: 500 16px / 1.45 var(--jw-serif); color: var(--jw-indigo) }
.inv-jawa .jw-drape { width: min(86%, 330px); height: auto; margin: 14px auto 0 }

/* indigo field: batik band on top, kawung gold fill, date and countdown tiles */
.jw-date-sec { margin-top: 8px; padding: 52px 18px 26px; color: var(--jw-ivory); background: var(--jw-indigo) }
.jw-date-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: url(../assets/jawa/batik-band-tile.svg) 0 0 / auto 100% repeat-x }
.jw-date-sec::after { content: ""; position: absolute; inset: 30px 0 0; background: url(../assets/jawa/pattern-kawung-gold.svg) 0 0 / 84px; opacity: .1; pointer-events: none }
.jw-date-sec > * { position: relative; z-index: 1 }
.inv-jawa .jw-date-sec .inv-cap { margin: 0; font: 600 12px / 1.3 var(--jw-sans); letter-spacing: .3em; padding-left: .3em; color: var(--jw-gold-hi) }
.inv-jawa .inv-day { margin: 2px 0 0; font: 600 84px / 1 var(--jw-serif); letter-spacing: 0; font-style: normal; color: var(--jw-gold-hi) }
.inv-jawa .inv-month { margin: 0; font: 500 italic 26px / 1.2 var(--jw-serif); color: var(--jw-ivory) }
.jw-date-sec .jw-cap { margin-top: 22px; color: var(--jw-gold-hi) }
.jw-count { display: flex; gap: 8px; justify-content: center; margin-top: 12px }
.jw-count > div { width: 66px; padding: 11px 0 9px; border-radius: 7px; border: 1px solid var(--jw-gold); background: var(--jw-indigo); box-shadow: inset 0 0 0 2px var(--jw-indigo), inset 0 0 0 3px rgba(216, 185, 106, .5) }
.jw-count b { display: block; font: 600 26px / 1.1 var(--jw-serif); color: var(--jw-gold-hi); font-variant-numeric: tabular-nums }
.jw-count i { display: block; margin-top: 2px; font: 500 9px / 1.2 var(--jw-sans); font-style: normal; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; color: #E7DCC0 }

/* ticket (guest page): ivory card with a kawung gold strip, double gold line */
.inv-jawa [data-ticket] { padding: 24px 22px 0 }
.gp .inv-jawa .ticket, .inv-jawa .ticket { position: relative; margin: 0 auto; max-width: 300px; padding: 40px 20px 22px; border-radius: 6px; border: 1px solid var(--jw-gold); background: var(--jw-ivory-2); box-shadow: inset 0 0 0 4px var(--jw-ivory-2), inset 0 0 0 5px rgba(216, 185, 106, .55), 0 8px 20px rgba(90, 58, 34, .12); animation: none; overflow: hidden }
.inv-jawa .ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--jw-indigo) url(../assets/jawa/pattern-kawung-gold.svg) 0 0 / 44px }
.inv-jawa .ticket h3 { margin: 0; font: 600 11px / 1.3 var(--jw-sans); letter-spacing: .3em; padding-left: .3em; color: var(--jw-gold-text) }
.inv-jawa .ticket p { margin-top: 8px; font: 500 12.5px / 1.55 var(--jw-sans); color: var(--jw-sogan) } /* sans: the code D1MA-S8PR must not read with old-style digits */
.inv-jawa .ticket b { color: var(--jw-indigo) }
.inv-jawa .ticket .qr { width: 188px; height: 188px; border-radius: 4px; border: 1px solid rgba(181, 143, 56, .5); animation: none }
.inv-jawa .ticket .tick { background: var(--jw-indigo); color: var(--jw-gold-hi) }

/* location */
.jw-loc { padding-top: 24px; padding-bottom: 4px }
.inv-jawa .inv-card { position: relative; max-width: 310px; margin: 12px auto 0; padding: 24px 20px 22px; border-radius: 6px; border: 1px solid var(--jw-gold); background: var(--jw-ivory-2); gap: 8px; box-shadow: inset 0 0 0 4px var(--jw-ivory-2), inset 0 0 0 5px rgba(216, 185, 106, .55), 0 8px 20px rgba(90, 58, 34, .1) }
.inv-jawa .inv-card .inv-cap { margin: 0; font: 600 11px / 1.3 var(--jw-sans); letter-spacing: .3em; padding-left: .3em; color: var(--jw-gold-text) }
.inv-jawa .inv-time { font: 600 22px / 1.2 var(--jw-serif); font-style: normal; color: var(--jw-indigo) }
.inv-jawa .inv-where { font: 500 15px / 1.4 var(--jw-serif); color: var(--jw-sogan) }
.inv-jawa .inv-btn { width: 100%; margin-top: 6px; padding: 12px 10px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--jw-gold); background: transparent; color: var(--jw-indigo); font: 600 10.5px / 1.2 var(--jw-sans); letter-spacing: .18em; text-transform: uppercase }
.inv-jawa .inv-btn.solid { background: var(--jw-indigo); color: var(--jw-ivory) }
.jw-gal { margin: 20px auto 0; max-width: 300px; font: 500 16px / 1.4 var(--jw-serif); color: var(--jw-indigo) }
.jw-gal a, .jw-gal span.jw-lk { display: inline-flex; align-items: center; min-height: 44px; font: 600 10.5px / 1.2 var(--jw-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--jw-indigo); border-bottom: 1.5px solid var(--jw-gold) }
.inv-jawa .inv-foot { margin: 14px 0 0; padding: 0 22px 20px; font: 500 12px / 1.4 var(--jw-sans); color: var(--jw-sogan) }
.jw-end { height: 22px; background: url(../assets/jawa/batik-band-tile.svg) 0 0 / auto 100% repeat-x }

/* ---------- Print card (portrait 12:17). --cu is 1px of a 330px wide drawing ---------- */
.jwc { --cu: .30303cqw; position: relative; width: 100%; aspect-ratio: 12 / 17; container-type: inline-size; overflow: hidden; color: var(--jw-indigo); font-family: var(--jw-sans); background: var(--jw-veil), var(--jw-paper-1) center / cover, var(--jw-ivory); text-align: center; -webkit-font-smoothing: antialiased }
.jwc > * { position: absolute }
.jwc-rule { inset: calc(14 * var(--cu)); border: 1px solid var(--jw-line) }
.jwc-co { width: calc(96 * var(--cu)); aspect-ratio: 1; background: url(../assets/jawa/corner-ornament.svg) 0 0 / 100% no-repeat; margin: 0 }
.jwc-co.tl { left: calc(16 * var(--cu)); top: calc(16 * var(--cu)) } .jwc-co.tr { right: calc(16 * var(--cu)); top: calc(16 * var(--cu)); transform: scaleX(-1) }
.jwc-co.bl { left: calc(16 * var(--cu)); bottom: calc(16 * var(--cu)); transform: scaleY(-1) } .jwc-co.br { right: calc(16 * var(--cu)); bottom: calc(16 * var(--cu)); transform: scale(-1, -1) }
.pc-jawa .jwc-co.bl, .pc-jawa .jwc-co.br { display: none } /* the bottom corners make room for the guest's line and QR */
.jwc-mid { left: 0; right: 0; top: calc(54 * var(--cu)); display: flex; flex-direction: column; align-items: center }
.jwc-gu { width: calc(38 * var(--cu)); aspect-ratio: 200 / 280; background: url(../assets/jawa/gunungan.svg) 0 0 / 100% no-repeat }
.jwc .jw-cap { font-size: calc(9.5 * var(--cu)); margin-top: calc(8 * var(--cu)) }
.jwc-nm { margin-top: calc(6 * var(--cu)); font: 400 calc(50 * var(--cu)) / .95 var(--jw-script); color: var(--jw-indigo) }
.jwc-nm > span { display: block; white-space: nowrap } .jwc-nm > span > span { display: inline-block; font-size: calc(1em * var(--k, 1)) }
.jwc-nm small { display: block; font-size: calc(28 * var(--cu)); line-height: .8; margin: calc(2 * var(--cu)) 0; color: var(--jw-gold-text) }
.jwc-dv { width: calc(220 * var(--cu)); aspect-ratio: 10 / 1; margin: calc(8 * var(--cu)) 0 calc(6 * var(--cu)); background: url(../assets/jawa/divider-ornament.svg) 0 0 / 100% no-repeat }
.jwc-dt { margin: 0; font: 500 italic calc(14 * var(--cu)) / 1.2 var(--jw-serif); color: var(--jw-sogan) }
.jwc .jw-cap.t { margin-top: calc(6 * var(--cu)); letter-spacing: .24em }
.jwc-loc { margin: calc(6 * var(--cu)) 0 0; font: 500 calc(12 * var(--cu)) / 1.3 var(--jw-serif); color: var(--jw-indigo) }
.pc-jawa .jwc-loc { display: none }
.pc-jawa .pc-loc { z-index: 2; top: 101.5cqw; font: 500 3.8cqw / 1.3 var(--jw-serif); color: var(--jw-indigo) }
.pc-jawa .pc-to { z-index: 2; left: 8cqw } .pc-jawa .pc-to small { color: var(--jw-sogan) } .pc-jawa .pc-to b { font-family: var(--jw-serif); color: var(--jw-indigo) }
.pc-jawa .pc-qr { z-index: 2; right: 8cqw; bottom: 8cqw; border-radius: .8cqw; border: .3cqw solid var(--jw-gold) }
.pc-jawa .pc-to { bottom: 8cqw }
/* the back of the card: kawung gold on indigo */
.pc-jawa.back { background: var(--jw-indigo) url(../assets/jawa/pattern-kawung-gold.svg) 0 0 / 17cqw; color: var(--jw-ivory) }
.pc-jawa.back::before { content: ""; position: absolute; inset: 5cqw; border: 1px solid var(--jw-gold) }
.pc-jawa.back .pb { background: radial-gradient(circle at 50% 50%, var(--jw-indigo) 52%, transparent 74%) }
.pc-jawa.back .pb small, .pc-jawa.back .pb p, .pc-jawa.back .pb b { color: var(--jw-ivory) }
.pc-jawa.back .pb-qr { border: .4cqw solid var(--jw-gold) }

/* foil: gold elements print as masked foil texture that shimmers; the embossed look is a light edge plus a shadow edge (CSS filters) */
.jwc[data-foil]:not([data-foil="none"]) .jwc-co, .jwc[data-foil]:not([data-foil="none"]) .jwc-gu, .jwc[data-foil]:not([data-foil="none"]) .jwc-dv { filter: drop-shadow(0 calc(.9 * var(--cu)) 0 rgba(255, 250, 230, .85)) drop-shadow(0 calc(-.7 * var(--cu)) 0 rgba(90, 58, 34, .4)) }
.jwc-co::after, .jwc-gu::after, .jwc-dv::after { content: ""; position: absolute; inset: 0; display: none; background: url(../assets/jawa/gold-foil.webp) 0 0 / 420% 420%; -webkit-mask: var(--m) 0 0 / 100% no-repeat; mask: var(--m) 0 0 / 100% no-repeat; animation: jw-shine 6s ease-in-out infinite alternate }
.jwc-co { --m: url(../assets/jawa/corner-ornament.svg) } .jwc-gu { --m: url(../assets/jawa/gunungan.svg) } .jwc-dv { --m: url(../assets/jawa/divider-ornament.svg) }
.jwc[data-foil]:not([data-foil="none"]) :is(.jwc-co, .jwc-gu, .jwc-dv)::after { display: block }
.jwc[data-foil="rose"] :is(.jwc-co, .jwc-gu, .jwc-dv)::after { filter: hue-rotate(-24deg) saturate(.85) brightness(1.04) }
.jwc[data-foil="perak"] :is(.jwc-co, .jwc-gu, .jwc-dv)::after { filter: grayscale(1) brightness(1.18) contrast(1.05) }
.jwc[data-foil]:not([data-foil="none"]) .jwc-rule { border-color: var(--jw-gold); box-shadow: 0 0 0 calc(.8 * var(--cu)) rgba(255, 250, 230, .55) }
@keyframes jw-shine { from { background-position: 0 0 } to { background-position: 100% 100% } }

@media (prefers-reduced-motion: reduce) {
  .jw *, .jw *::before, .jw *::after, .jwc *, .jwc *::after, .jw-door, .jw-gate { animation: none !important; transition: none !important }
  .jw-spk { display: none } .jw-gl b { display: none }
}

/* inside the live preview (js/preview.js): size the art box so the tall cover and the portrait card fit the column */
.pv-cover:has(> .jw-cover) { max-width: min(420px, calc((100dvh - 300px) * .462)); min-width: 260px; margin-inline: auto }
.pv-cover.pv-jawa { max-width: min(340px, calc((100dvh - 300px) * .706)); margin-inline: auto; border-radius: 6px }

/* the tall cover in the sticky side card of buat-acara.html must not outgrow the screen */
.side-card .jw-slot { max-width: min(100%, 280px); margin-inline: auto }

/* static covers (dashboard phone, side cards, thumbnails) are pictures, not controls: everything scales with the box, no 44px pill and no 9px floor */
.jw-static .jw-cap { font-size: calc(10 * var(--u)) } .jw-static .jw-date { font-size: calc(10.5 * var(--u)) } .jw-static .jw-to { font-size: calc(14 * var(--u)) }
.jw-static .jw-open { min-height: calc(40 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(10.5 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--jw-ivory), 0 0 0 calc(4 * var(--u)) var(--jw-gold), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(31, 58, 68, .28) }