/* Burgundy Blossom skin v1 (INV-12 W1, A1483, D-062; plan_inv12_burgundy_blossom_master.md). "A letter by post": a
   burgundy envelope on sunlit linen, one long cream card with photo-real crimson quince, wine ink and gold.
   Great Vibes for the script words, Cinzel for every small cap, Cormorant Garamond for names, numerals and times.
   One colour drives the design: the couple's primary (or accent, through the alias) tints the blossoms, and the wine
   ink, the envelope and the buttons are derived from it with L capped at .33, so text stays dark on the card for any
   hue. The default primary is the photographed crimson, so the default page shows the pure photo. Structure follows
   the Ivory Rose skin (A1346). */
@font-face { font-family: "Great Vibes"; src: url("assets/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Cinzel"; src: url("assets/fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --k-gate-plaster: #F4E6DA; --k-gate-metal: #A88A5C;
  --k-font-script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --k-font-display: "Cormorant Garamond", "Cormorant", Didot, Georgia, serif;
  --k-font-body: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --k-font-caps: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  --k-paper: #F4E6DA; --k-card: #F4E6DA; --k-paper-deep: #E9D5C6; --k-ink: #33291F; --k-ink-soft: #5A4A3E;
  --k-line: rgb(168 138 92 / .8); --k-dark: #3E0C16; --k-on-dark: #F4E6DA; --k-on-dark-soft: rgb(244 230 218 / .84);
  --k-light-ground: transparent; --k-linen: #E6CEBE;
  --k-wine: #5E1220; --k-wine-soft: rgb(94 18 32 / .86); --k-env: #5A1422; --k-env-flap: #651A2A;
  --k-gold: var(--c-secondary, #A88A5C); --k-gold-hi: #E9D3A1;
  --k-gut: clamp(14px, 4vw, 48px);
  --k-panel-h: calc(100svh - var(--k-gut));
  --k-cw: min(calc(100vw - 2 * var(--k-gut)), 600px, calc(var(--k-panel-h) * .62));
  --k-ease: cubic-bezier(.22, 1, .36, 1);
  --k-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23  0 0 0 0 .2  0 0 0 0 .17  .12 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the art kit (scripts/burgundy_blossom_kit.py sync): --k-art-* images, --k-mask-* petal masks, --k-ar-* w / h */
  /*BBART>*/
  --k-art-linen-tall: image-set(url("/skins/burgundy_blossom/assets/art/linen-tall-390.webp") 1x, url("/skins/burgundy_blossom/assets/art/linen-tall-780.webp") 2x);
  --k-art-linen-wide: image-set(url("/skins/burgundy_blossom/assets/art/linen-wide-1440.webp") 1x, url("/skins/burgundy_blossom/assets/art/linen-wide-2400.webp") 2x);
  --k-art-branch: image-set(url("/skins/burgundy_blossom/assets/art/branch-900.webp") 1x, url("/skins/burgundy_blossom/assets/art/branch-1800.webp") 2x);
  --k-art-branch-r: image-set(url("/skins/burgundy_blossom/assets/art/branch-r-900.webp") 1x, url("/skins/burgundy_blossom/assets/art/branch-r-1800.webp") 2x);
  --k-art-spray-tr: image-set(url("/skins/burgundy_blossom/assets/art/spray-tr-260.webp") 1x, url("/skins/burgundy_blossom/assets/art/spray-tr-520.webp") 2x);
  --k-art-spray-br: image-set(url("/skins/burgundy_blossom/assets/art/spray-br-180.webp") 1x, url("/skins/burgundy_blossom/assets/art/spray-br-360.webp") 2x);
  --k-art-head: image-set(url("/skins/burgundy_blossom/assets/art/head-160.webp") 1x, url("/skins/burgundy_blossom/assets/art/head-320.webp") 2x);
  --k-art-sprig: image-set(url("/skins/burgundy_blossom/assets/art/sprig-150.webp") 1x, url("/skins/burgundy_blossom/assets/art/sprig-300.webp") 2x);
  --k-art-prop: image-set(url("/skins/burgundy_blossom/assets/art/prop-560.webp") 1x, url("/skins/burgundy_blossom/assets/art/prop-1120.webp") 2x);
  --k-art-seal: image-set(url("/skins/burgundy_blossom/assets/art/seal-160.webp") 1x, url("/skins/burgundy_blossom/assets/art/seal-320.webp") 2x);
  --k-art-fall-a: url("/skins/burgundy_blossom/assets/art/fall-a-64.webp");
  --k-art-fall-b: url("/skins/burgundy_blossom/assets/art/fall-b-64.webp");
  --k-art-fall-c: url("/skins/burgundy_blossom/assets/art/fall-c-64.webp");
  --k-mask-branch: url("/skins/burgundy_blossom/assets/art/branch-petal.webp");
  --k-mask-branch-r: url("/skins/burgundy_blossom/assets/art/branch-r-petal.webp");
  --k-mask-spray-tr: url("/skins/burgundy_blossom/assets/art/spray-tr-petal.webp");
  --k-mask-spray-br: url("/skins/burgundy_blossom/assets/art/spray-br-petal.webp");
  --k-mask-head: url("/skins/burgundy_blossom/assets/art/head-petal.webp");
  --k-mask-sprig: url("/skins/burgundy_blossom/assets/art/sprig-petal.webp");
  --k-mask-prop: url("/skins/burgundy_blossom/assets/art/prop-petal.webp");
  --k-mask-fall-a: url("/skins/burgundy_blossom/assets/art/fall-a-petal.webp");
  --k-mask-fall-b: url("/skins/burgundy_blossom/assets/art/fall-b-petal.webp");
  --k-mask-fall-c: url("/skins/burgundy_blossom/assets/art/fall-c-petal.webp");
  --k-ar-branch: 0.2211;
  --k-ar-branch-r: 0.1978;
  --k-ar-spray-tr: 0.4990;
  --k-ar-spray-br: 0.4467;
  --k-ar-head: 1.0191;
  --k-ar-sprig: 0.9146;
  --k-ar-prop: 0.5426;
  --k-ar-seal: 1.0458;
  --k-ar-fall-a: 0.9697;
  --k-ar-fall-b: 0.9014;
  --k-ar-fall-c: 0.9697;
  /*<BBART*/
}
/* wine ink and envelopes follow the couple's colour; hex first, so browsers without relative colour keep the defaults
   (a second declaration of a custom property always wins, so the upgrade must sit inside @supports) */
@supports (color: oklch(from red min(l, .33) min(c, .13) h)) {
  :root {
    --k-wine: oklch(from var(--c-primary, #A0143B) min(l, .30) min(c, .13) h);
    --k-wine-soft: oklch(from var(--c-primary, #A0143B) min(l, .30) min(c, .13) h / .86);
    --k-env: oklch(from var(--c-primary, #A0143B) min(calc(l + .015), .345) min(c, .13) h);
    --k-env-flap: oklch(from var(--c-primary, #A0143B) min(calc(l + .045), .375) min(c, .13) h);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--k-linen); scroll-padding-top: var(--k-gut); scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--k-ink);
  font: 400 1rem/1.65 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--k-linen);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--k-wine); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kjy-main { font-family: var(--k-font-body); font-size: 1.0625rem; }
.kjy-main { position: relative; overflow: hidden; overflow: clip; background: none; }

/* ---------- shared type ---------- */
.k-kicker { font: 400 .78rem/1.5 var(--k-font-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--k-wine-soft); }
.k-caps { font-family: var(--k-font-caps); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--k-wine-soft); }
.k-title { font: 400 clamp(2.4rem, 9vw, 3.4rem)/1.2 var(--k-font-script); color: var(--k-wine); }
.k-amp { font: 400 1.6rem/1 var(--k-font-script); color: var(--k-wine); text-transform: none; letter-spacing: 0; }
.k-rule { display: block; width: 200px; height: auto; margin: 16px auto 0; color: var(--k-gold); }

/* ---------- buttons: square corners, a thin wine line or solid wine (no pills, taste Ruling 4) ---------- */
.k-btn, .kjy-cal__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: .9em 2.2em .82em; border-radius: 0;
  font: 400 clamp(10px, 3cqw, 13px)/1 var(--k-font-caps); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.k-btn--solid { background: var(--k-wine); color: var(--k-paper); border: 1px solid var(--k-wine); }
.k-btn--line, .kjy-cal__toggle { background: transparent; color: var(--k-wine); border: 1px solid var(--k-wine); }
.k-btn--line:active, .kjy-cal__toggle:active { background: rgb(94 18 32 / .06); }
.k-ico { width: 18px; height: 18px; flex: none; }

/* ---------- the long card: he, dt, ev, cd and vn stack with no margins, so the card reads as one sheet ---------- */
.k-card { position: relative; z-index: 1; width: var(--k-cw); margin-inline: auto; container-type: inline-size;
  overflow: hidden; overflow: clip;
  background-color: var(--k-paper); background-image: var(--k-grain);
  box-shadow: inset 1px 0 0 rgb(110 60 40 / .07), inset -1px 0 0 rgb(110 60 40 / .07),
    -6px 0 8px 8px rgb(60 32 20 / .11);
  clip-path: inset(0 -30px); } /* rev3 A1 (A1498): each section's shadow is cut at its own top and bottom (no band over the
  section above) and spread 8px past them, so the side shadow runs on unbroken through every join of the stacked card */
.k-card--top { margin-top: var(--k-gut);
  background-image: var(--k-grain), radial-gradient(130% 60% at 92% 0%, rgb(255 251 243 / .62), rgb(255 251 243 / 0) 62%); }
.k-card--bottom { margin-bottom: clamp(56px, 10svh, 112px);
  box-shadow: inset 1px 0 0 rgb(110 60 40 / .07), inset -1px 0 0 rgb(110 60 40 / .07), inset 0 -1px 0 rgb(110 60 40 / .08),
    -6px 0 8px 8px rgb(60 32 20 / .11), 0 18px 22px -14px rgb(60 32 20 / .32);
  clip-path: inset(0 -30px -40px); }
/* fix round 1 (A1498, eye review: a hairline at most joins): a join falls on a part-pixel, where two clipped edges let the
   linen and the next section's shadow show through. Each following section overlaps the one above by 2px and is clipped
   1px inside its own top, so its clip edge lies on the solid paper above and its shadow has nothing to leak through. */
.k-card + .k-card { margin-top: -2px;
  clip-path: polygon(-30px 2px, 0 2px, 0 1px, 100% 1px, 100% 2px, calc(100% + 30px) 2px, calc(100% + 30px) 100%, -30px 100%); }
.k-card + .k-card.k-card--bottom {
  clip-path: polygon(-30px 2px, 0 2px, 0 1px, 100% 1px, 100% 2px, calc(100% + 30px) 2px, calc(100% + 30px) calc(100% + 40px), -30px calc(100% + 40px)); }
/* (the paper overlaps the section above by 1px; outside the card the clip meets it edge to edge, so the side shadows join
   without doubling) */

/* ---------- the blossom art (k-bb-*): each piece is a CSS background photo with three tint layers, each masked by
   the piece's petal mask (petal material x the photo's alpha; masks are separate files, so the photo never loads
   twice). Constants = OKLab of skin.json primary #A0143B (l .4579, a .1667, b .0390): at the default every alpha is 0.
   lift (screen, light colours), petal (color), boost (multiply, deep colours). The same maths: scripts/
   burgundy_blossom_kit.py (css_alphas, tint). Nothing here is gated on page classes: <main>'s content-visibility
   holds the art back until the tap. The opening carries a scoped copy (kit sync). ---------- */
/*BBTINT>*/
.k-bb-art { position: absolute; isolation: isolate; pointer-events: none; background: var(--k-bb-img) center / 100% 100% no-repeat; }
.k-bb-art > i { position: absolute; inset: 0; display: block; background-color: transparent;
  -webkit-mask: var(--k-bb-mask) center / 100% 100% no-repeat; mask: var(--k-bb-mask) center / 100% 100% no-repeat; }
.k-bb-art > .k-bb-lift { mix-blend-mode: screen; }
.k-bb-art > .k-bb-petal { mix-blend-mode: color; }
.k-bb-art > .k-bb-boost { mix-blend-mode: multiply; }
@supports (color: oklab(from red calc(l - .1) a b / clamp(0, l, 1))) {
  .k-bb-art > .k-bb-lift { background-color: oklab(from var(--c-primary, #A0143B) 1 0 0 / clamp(0, (l - .4579) * 1.6, .85)); }
  .k-bb-art > .k-bb-petal { background-color: oklab(from var(--c-primary, #A0143B) l a b / clamp(0, (max(l - .4579, .4579 - l) + max(a - .1667, .1667 - a) + max(b - .0390, .0390 - b) - .006) * 15, .92)); }
  .k-bb-art > .k-bb-boost { background-color: oklab(from var(--c-primary, #A0143B) clamp(0, l / .85, 1) 0 0 / clamp(0, (.4079 - l) * 3, .8)); }
}
.k-bb-branch { --k-bb-img: var(--k-art-branch); --k-bb-mask: var(--k-mask-branch); aspect-ratio: var(--k-ar-branch); }
.k-bb-branch-r { --k-bb-img: var(--k-art-branch-r); --k-bb-mask: var(--k-mask-branch-r); }
.k-bb-spray-tr { --k-bb-img: var(--k-art-spray-tr); --k-bb-mask: var(--k-mask-spray-tr); aspect-ratio: var(--k-ar-spray-tr); }
.k-bb-spray-br { --k-bb-img: var(--k-art-spray-br); --k-bb-mask: var(--k-mask-spray-br); aspect-ratio: var(--k-ar-spray-br); }
.k-bb-head { --k-bb-img: var(--k-art-head); --k-bb-mask: var(--k-mask-head); aspect-ratio: var(--k-ar-head); }
.k-bb-sprig { --k-bb-img: var(--k-art-sprig); --k-bb-mask: var(--k-mask-sprig); aspect-ratio: var(--k-ar-sprig); }
.k-bb-prop { --k-bb-img: var(--k-art-prop); --k-bb-mask: var(--k-mask-prop); aspect-ratio: var(--k-ar-prop); }
.k-bb-fall-a { --k-bb-img: var(--k-art-fall-a); --k-bb-mask: var(--k-mask-fall-a); aspect-ratio: var(--k-ar-fall-a); }
.k-bb-fall-b { --k-bb-img: var(--k-art-fall-b); --k-bb-mask: var(--k-mask-fall-b); aspect-ratio: var(--k-ar-fall-b); }
.k-bb-fall-c { --k-bb-img: var(--k-art-fall-c); --k-bb-mask: var(--k-mask-fall-c); aspect-ratio: var(--k-ar-fall-c); }
.k-bb-seal { background: var(--k-art-seal) center / contain no-repeat; aspect-ratio: var(--k-ar-seal); }
/*<BBTINT*/

/* ---------- "ink" write-on helper (shared class name; a soft mask sweeps left to right, once) ---------- */
.k-ink { display: inline-block; padding: .3em .8em .5em; margin: -.3em -.8em -.5em; }
html.kjy-fx [data-k-write] .k-ink {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
html.kjy-fx [data-k-write].is-in .k-ink {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition-property: -webkit-mask-position, mask-position;
  transition-duration: 1.4s; transition-timing-function: cubic-bezier(.5, 0, .2, 1);
}
html.kjy-fx [data-k-write].is-done .k-ink { -webkit-mask: none; mask: none; }

/* ---------- engine footer + sound toggle (the footer sits outside <main>, behind the gate: Cinzel, already preloaded, so no
   Cormorant face loads before the tap) ---------- */
.kjy-footer { font: 400 .6875rem/1.4 var(--k-font-caps); position: relative; z-index: 1; padding: 32px 20px calc(64px + env(safe-area-inset-bottom)); text-align: center; }
.kjy-footer a { display: inline-block; padding: 14px 8px; font: 400 .6875rem/1 var(--k-font-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink-soft); text-decoration: none; }
.kjy-footer a { display: inline-flex; align-items: center; gap: 14px; } /* h409 (A1447): "Crafted by" + the main two-line logo, 36 px tall (never under 30), never recoloured */
.kjy-footer__logo { display: block; width: 72px; height: 36px; }
.kjy-footer__logo--porcelain { display: none; } /* a light footer: wine */
.kjy-sound {
  position: fixed; z-index: 90;
  top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--k-gold);
  background: rgb(244 230 218 / .92); color: var(--k-wine); box-shadow: 0 4px 14px rgb(60 32 20 / .14);
}
.kjy-preview ~ .kjy-sound { top: calc(64px + env(safe-area-inset-top)); }
.kjy-sound[aria-pressed="true"] .kjy-sound__off,
.kjy-sound[aria-pressed="false"] .kjy-sound__on { display: none; }