/* Sugar Bloom, the camera walk-through (DRAFT 19 Oct 2026): the stage (js/signature-sugar-bloom-walk.js) and the Pass skin
 * (--wk-*, css/occasi-pass.css). Light: pastel sugar, blush, pistachio, lilac, butter; warm ink and soft gilt.
 *   .sbw-art   the 1080 x 1920 picture: covers a phone, fits whole (contained) on a wide screen; --k = its width / 1080
 *   .sbw-box   a text area at render px (from plates/text_areas.json), scaled by --k
 *   the films sit over the plate; their first frame is the plate, so they cut in with no fade; the words fade out first. */
@font-face{font-family:'Great Vibes';src:url('../assets/fonts/great-vibes-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../assets/fonts/eb-garamond-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400 800;font-display:swap}

html.sbw-on, html.sbw-on body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body.sbw-page { margin: 0; background: #efe4de; -webkit-text-size-adjust: 100%; }
.sbw.wk-root {
  /* v221: the Guest guide's ornament: sugar pearls in blush, pistachio and lilac */ --wk-orn: radial-gradient(circle at 5px 3px, #eeb4bc 2.3px, transparent 2.8px) 0 0 / 30px 6px repeat-x, radial-gradient(circle at 15px 3px, #b5d0a2 2.3px, transparent 2.8px) 0 0 / 30px 6px repeat-x, radial-gradient(circle at 25px 3px, #c9b5e0 2.3px, transparent 2.8px) 0 0 / 30px 6px repeat-x;
  --wk-bg: #fbf4f1; --wk-paper: #fffaf7; --wk-ink: #3b2d2c; --wk-soft: #6d5a57; --wk-gold: #b08d57; --wk-rule: rgba(176, 141, 87, .34);
  --wk-display: 'EB Garamond', Georgia, serif; --wk-text: 'EB Garamond', Georgia, serif; --wk-display-style: italic; --wk-r: 6px;
  --wk-btn: #3b2d2c; --wk-onbtn: #fff7f2;
  --wk-shadow: 0 12px 30px -16px rgba(80, 50, 50, .4), inset 0 0 0 1px rgba(176, 141, 87, .34);
  --sbw-ink: #3b2d2c; --sbw-gilt: #b08d57; --sbw-gilt-ink: #553e1c;   /* v214: small-caps labels in a deep gold that reads at 4.5:1 or more on the cards */ --sbw-blush: #f3cfd3;
  position: fixed; inset: 0;
}
.sbw.wk-root, .sbw.wk-root *, .sbw .wk-sheet * { font-variant-numeric: lining-nums !important; }
/* the engine's own scenes: the stage is the only one shown; the shared "Will you join us?" scene and the computer's side
   panel are drawn into the hatbox card instead (draft: hidden) */
.sbw [data-wk-film] { overflow: hidden; scroll-snap-type: none; }
.sbw .wk-scene.sbw-scene { padding: 0; display: block; }
.sbw .wk-scene-join, .sbw .wkd-panel, .sbw .wk-progress { display: none !important; }

.sbw-stage { position: absolute; inset: 0; overflow: hidden; container-type: size; background: radial-gradient(120% 80% at 50% 40%, #fbf1ee, #ead9d4); touch-action: none; }
.sbw-art { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh * 9 / 16); aspect-ratio: 9 / 16; transform: translate(-50%, -50%); --k: .4; }
/* v214 review: when a stop's content would be cropped on a narrow phone the art box scales down a little (js fit());
   these bands take the plate's own edge colours in the space left above and below */
.sbw-band { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 0; background-repeat: no-repeat; pointer-events: none; }
.sbw-band.is-bottom { top: auto; bottom: 0; }
@container (min-aspect-ratio: 3 / 4) { .sbw-art { width: min(100cqw, 100cqh * 9 / 16); box-shadow: 0 30px 80px -40px rgba(80, 40, 40, .45); } }
.sbw-plate, .sbw-plate2, .sbw-film, .sbw-confetti { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sbw-plate { transition: opacity .28s ease; }
.sbw-plate.is-x { opacity: .25; }
.sbw-plate2 { opacity: 0; transition: opacity .32s ease; }
.sbw-plate2.on { opacity: 1; }
.sbw-plate2:not(.on) { transition-duration: .2s; }   /* v227: the story cards fade out before the film leaves the board */
.sbw-film { opacity: 0; pointer-events: none; }
.sbw-film.on { opacity: 1; }
.sbw-confetti { pointer-events: none; z-index: 6; }
/* the opening: the closed doors' idle loop covers the hero until it is opened */
.sbw-idle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; pointer-events: none; }
.sbw-idle.is-gone { display: none; }
.sbw-words.is-doors { z-index: 5; }
.sbw-film { z-index: 5; }
.sbw-doors { position: absolute; z-index: 7; left: 50%; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); min-height: 48px; padding: 0 26px; border: 0; border-radius: 99px; background: rgba(255, 250, 247, .94); color: var(--sbw-ink); font: italic 500 18px 'EB Garamond', serif; box-shadow: 0 8px 22px -12px rgba(80, 40, 40, .55); cursor: pointer; }
.sbw-doors[hidden] { display: none; }

/* the words on the plate */
.sbw-words { position: absolute; inset: 0; z-index: 3; transition: opacity .18s ease; -webkit-user-select: none; user-select: none; }
.sbw-words :is(input, textarea, select, [contenteditable]) { -webkit-user-select: text; user-select: text; }   /* v285 (lead, 2 Nov): a drag never highlights the printed words; the reply's fields stay editable */
.sbw-words.is-off { opacity: 0; pointer-events: none; transition-duration: .12s; }
.sbw-words.is-cut, .sbw-words.is-cut.is-off { transition: none; }   /* v227: the hand-over to and from a film's printed words, in one frame */
.sbw-box { position: absolute; display: grid; place-items: center; text-align: center; color: var(--sbw-ink); }
.sbw-in { width: 100%; max-height: 100%; overflow: hidden; }
.sbw-box p { margin: 0; }
.sbw-names { font: 400 calc(var(--f, 1) * max(22px, calc(var(--k) * 74px))) / 1.05 'Great Vibes', cursive; }
.sbw-names i { font: italic 500 max(10px, .5em) 'EB Garamond', serif; color: var(--sbw-gilt); }   /* v285.1: the & never under 10 px */
.sbw-date { margin-top: .3em !important; font: 600 calc(var(--f, 1) * max(11px, calc(var(--k) * 27px))) / 1.2 'Cormorant', serif; letter-spacing: .18em; text-transform: uppercase; }
.sbw-evname { font: italic 500 calc(var(--f, 1) * max(13px, calc(var(--k) * 44px))) / 1.05 'EB Garamond', serif; }
.sbw-evline { font: 600 calc(var(--f, 1) * max(10px, calc(var(--k) * 25px))) / 1.1 'Cormorant', serif; letter-spacing: .03em; color: #5d4a47; }
.sbw-sthead { font: 600 calc(var(--f, 1) * max(10px, calc(var(--k) * 26px))) / 1.15 'Cormorant', serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sbw-gilt-ink); }
.sbw-sttext { font: italic 400 calc(var(--f, 1) * max(11px, calc(var(--k) * 28px))) / 1.18 'EB Garamond', serif; }
.sbw-sttitle { font: 400 calc(var(--f, 1) * max(22px, calc(var(--k) * 70px))) / 1 'Great Vibes', cursive; }
.sbw-scroll .sbw-in { overflow-y: auto; max-height: 100%; scrollbar-width: none; }
.sbw-scroll .sbw-sttext + .sbw-sttext { margin-top: .6em; }
.sbw-ppname { font: italic 500 calc(var(--f, 1) * max(10px, calc(var(--k) * 30px))) / 1.05 'EB Garamond', serif; }
.sbw-pprole { font: 600 calc(var(--f, 1) * max(10px, calc(var(--k) * 19px))) / 1.02 'Cormorant', serif; letter-spacing: .05em; text-transform: uppercase; color: #4f3f3c; }
.sbw-more p { font: italic 500 calc(var(--f, 1) * max(11px, calc(var(--k) * 28px))) / 1.1 'EB Garamond', serif; }

/* the hatbox: the sugar rose opens it; the reply is drawn on the card (lifted to a readable size on a phone) */
.sbw-rose { position: absolute; z-index: 4; left: 50%; top: 70%; width: 80%; height: 38%; transform: translate(-50%, -50%); border: 0; border-radius: 40%; background: transparent; cursor: pointer; }
.sbw-rose::after { content: attr(aria-label); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 99px; background: rgba(255, 250, 247, .92); color: var(--sbw-ink); font: italic 500 15px 'EB Garamond', serif; box-shadow: 0 6px 18px -10px rgba(80, 40, 40, .5); }
.sbw-box.sbw-card { position: static; }
.sbw-reply { position: absolute; left: 50%; top: calc(var(--k) * 847px); transform: translate(-50%, -50%); width: min(86cqw, 380px, 100%); max-height: min(78cqh, calc(var(--k) * 1500px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 18px; text-align: center; background: #fffaf7; border-radius: 4px; box-shadow: 0 18px 40px -22px rgba(80, 40, 40, .55), inset 0 0 0 1px rgba(176, 141, 87, .5), inset 0 0 0 5px #fffaf7, inset 0 0 0 6px rgba(176, 141, 87, .25); }
.sbw-reply [data-sbw-change]:not([hidden]) ~ [data-sbw-join] { display: none; }
.sbw-back { display: none; margin: 14px auto 0; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--sbw-ink); font: italic 500 15px 'EB Garamond', serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sbw-reply [data-sbw-change]:not([hidden]) + .sbw-back { display: block; }
/* v285.2 (lead 3 Nov): a sheet that brings its own Back (the "can't make it" one) hides the walk's, so there is one Back */
.sbw-reply [data-sbw-change]:not([hidden]):has([data-wk-close]) + .sbw-back { display: none; }
.sbw-reply [data-sbw-change]:has([data-wk-gprev]) + .sbw-back { display: none; }   /* tester u17: one Back at a time (the card's own, past its first side) */
.sbw-stage.is-pass .sbw-dots { display: none; }
.sbw-reply .wk-join { padding: 0 0 12px; }   /* v282: "Made with Occasi" clear of the card's frame (it sat on it) */
/* v262 (study #3 row 6): the card reads easily on a phone: small capitals and days 13 px, links and body 14 px. A card that
   would scroll tightens its spacing (is-s1, is-s2: js fitCard), never its type. */
.sbw-reply { --wk-label: 13px; --wk-tiny: 13px; --wk-body: 14px; }
.sbw-reply .wk-kicker, .sbw-reply .wk-label { letter-spacing: .14em; }
.sbw-reply .wk-jwhen { font-size: 13px; }
.sbw-reply .wk-jwhen b { letter-spacing: .12em; }
.sbw-reply .wk-jrow { grid-template-columns: 4px 62px 1fr 14px; }
.sbw-reply .wk-jrow.is-compact { grid-template-columns: 4px 96px 1fr 14px; }
.sbw-reply .wk-extras, .sbw-reply .wk-sendpass, .sbw-reply .wk-privlink, .sbw-reply .wk-jmore { font-size: 14px; }
.sbw-reply .wk-made { font-size: 13px; opacity: 1; }
.sbw-reply.is-s1 { padding-block: 14px; }
.sbw-reply.is-s1 .wk-h1 { font-size: 27px; margin-top: 2px; }
.sbw-reply.is-s1 .wk-sub { margin-top: 2px; line-height: 1.3; }
.sbw-reply.is-s1 .wk-jlist { margin-top: 8px; }
.sbw-reply.is-s1 .wk-jrow { min-height: 44px; padding-block: 4px; }
.sbw-reply.is-s1 .wk-jrow.is-compact { padding-block: 2px; }
.sbw-reply.is-s1 .wk-jmore { min-height: 30px; }
.sbw-reply.is-s1 .wk-yes { min-height: 46px; margin-top: 10px; }
.sbw-reply.is-s1 .wk-namefield { margin-top: 6px; }
.sbw-reply.is-s2 .wk-field input { min-height: 44px; padding-block: 6px; }   /* tester u17 (S4): 44 px at every step */
.sbw-reply.is-s2 .wk-link { padding-block: 4px; }
.sbw-reply.is-s2 .wk-extras { margin-top: 0; }
.sbw-reply.is-s2 .wk-sendpass, .sbw-reply.is-s2 .wk-privlink { margin-top: 0; padding-block: 2px; }
.sbw-reply.is-s2 .wk-made { margin-top: 2px; }
.sbw-reply.is-s2 .wk-extras > i { display: none; }   /* "(optional)": the pencil and "Add" say it */
/* tester u17 (S4): every tap on the card is 44 px at every step; the room comes from the spacing, then from moving the meal
   and dietary lines to the reply card "We'll be there" opens (is-hand, data-wk-cardyes), then the event list (is-hand2:
   the line under the title counts the events, and the card lists them) */
.sbw-reply .wk-jrow, .sbw-reply .wk-jrow.is-compact, .sbw-reply .wk-link, .sbw-reply .wk-sendpass, .sbw-reply .wk-privlink, .sbw-reply .wk-jmore, .sbw-reply .wk-dchip, .sbw-reply .wk-diet.is-row .wk-dchip, .sbw-reply .wk-dietq { min-height: 44px; }
.sbw-reply.is-hand :is(.wk-meal, .wk-diet, .wk-guidehint) { display: none; }
.sbw-reply.is-hand2 [data-sbw-join] .wk-jlist { display: none; }
.sbw-reply.is-s3 > * { zoom: var(--rz, 1); }   /* 13 px x 0.92 = 12 px, the floor */
.sbw-reply.is-s3 { padding-block: 8px; }   /* v282: the room for "Made with Occasi" comes from the frame and the button, not the words */
.sbw-reply.is-s3 .wk-yes { margin-top: 6px; }
.sbw-passcard .sbw-in { display: grid; gap: .5em; justify-items: center; }
.sbw-open { margin-top: .4em; min-height: 44px; padding: 4px 16px; max-width: 100%; line-height: 1.15; text-wrap: balance;   /* v285: "Open your wedding guide" wraps evenly on a narrow card */
   border: 0; border-radius: 99px; background: var(--wk-btn); color: var(--wk-onbtn); font: italic 500 16px 'EB Garamond', serif; cursor: pointer; }

/* the way through: the dots, "Next 4" for a fifth event and more, the first hint */
.sbw-dots { position: absolute; z-index: 7; left: 50%; top: calc(6px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; gap: 0; padding: 0 2px; border-radius: 99px; background: rgba(255, 250, 247, .55); }
.sbw-dots button { width: 44px; height: 44px; margin-block: -10px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }   /* tester u17 (S4): 44 px to tap, the pill as slim as before */
.sbw-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(59, 45, 44, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.sbw-dots button[aria-current]::before { background: var(--sbw-ink); }
.sbw-next4 { position: absolute; z-index: 7; left: 50%; bottom: calc(var(--k) * 150px); transform: translateX(-50%); min-height: 44px; padding: 0 20px; border: 0; border-radius: 99px; background: rgba(255, 250, 247, .94); color: var(--sbw-ink); font: italic 500 16px 'EB Garamond', serif; box-shadow: 0 6px 18px -10px rgba(80, 40, 40, .5); cursor: pointer; }
.sbw-hint { position: absolute; z-index: 7; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: italic 500 15px 'EB Garamond', serif; color: var(--sbw-ink); text-shadow: 0 1px 8px #fff; pointer-events: none; }
.sbw-photo { position: absolute; object-fit: cover; border-radius: 2px; z-index: 0; }
/* v280: a moment without a photo: the sugar rose lies on the frame's blush panel, the year piped in gilt beside it (no card, no glow) */
.sbw-noph { position: absolute; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 2%; padding: 2% 6% 2% 2%; box-sizing: border-box; overflow: hidden; container-type: size; }
.sbw-noph img { flex: 0 1 auto; min-width: 0; width: 60%; height: 100%; object-fit: contain; transform: scale(1.12); }
/* the year fits its frame (the six-moment sheet's frames are small): never under 12 px, a long date ("Spring '16") breaks at its space only */
.sbw-phyear { flex: 0 1 auto; max-width: 40%; font: 400 max(12px, min(calc(var(--k) * 60px), 48cqh, 22cqw)) / 1 'Great Vibes', cursive; color: var(--sbw-gilt-ink); text-align: center; overflow-wrap: normal; word-break: keep-all; }
.sbw-error { padding: 2rem; font-family: serif; }
@media (prefers-reduced-motion: reduce) { .sbw-plate, .sbw-plate2, .sbw-words { transition-duration: .01s; } }
/* on a computer the engine frames its film beside a side panel; the walk-through takes the whole window instead */
.sbw.wk-root .wk-app[data-view="film"] { top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.sbw.wk-root .wk-app[data-view="film"] .wk-scene > .sbw-stage { max-width: none; }
/* the printed-text film canvas (OccasiPrintedText.film) sits over the film; the measuring copy of the words is invisible */
.sbw-art .op-filmcanvas { z-index: 5; }
.sbw-words.sbw-measure { opacity: 0; pointer-events: none; z-index: -1; }
.sbw-words.sbw-measure button { visibility: hidden; }
.sbw-words.sbw-measure .sbw-pager button { visibility: visible; }   /* v285.2: the page control is words on the plate, so the film prints it */
/* the people stop: only the biscuits of people who exist, on the bare tree (z between the plate and the words) */
.sbw-bis { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sbw-bis img { position: absolute; display: block; }
.sbw-film.is-soft { transition: opacity .3s ease; }

/* v210: the people's photos (a round window in the biscuit, words under it) */
.sbw-pp.has-photo .sbw-in { display: grid; justify-items: center; gap: calc(var(--k) * 4px); }
.sbw-ppwin { display: block; width: calc(var(--k) * 62px); height: calc(var(--k) * 62px); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(var(--k) * 3px) #fffaf7, 0 0 0 calc(var(--k) * 4.5px) rgba(176, 141, 87, .6); }
.sbw-ppwin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbw-pp.has-photo .sbw-ppname { font-size: calc(var(--f, 1) * max(10px, calc(var(--k) * 24px))); }
.sbw-pp.has-photo .sbw-pprole { font-size: calc(var(--f, 1) * max(10px, calc(var(--k) * 15px), min(6.5cqw, 9cqh))); }
/* v210: our story turns its pages */
.sbw-storymore { bottom: calc(var(--k) * 210px); }
/* v210: the reply card's words ride the card out of the hatbox (clipped at the box rim while it is inside) */
.sbw-cardprev .sbw-in { display: grid; gap: .35em; justify-items: center; }
.sbw-ckick { font: 600 calc(var(--f, 1) * max(10px, calc(var(--k) * 22px))) / 1.2 'Cormorant', serif; letter-spacing: .22em; text-transform: uppercase; color: var(--sbw-gilt-ink); }
.sbw-ctitle { font: italic 500 calc(var(--f, 1) * max(18px, calc(var(--k) * 64px))) / 1.05 'EB Garamond', serif; }
.sbw-cfor { font: italic 400 calc(var(--f, 1) * max(11px, calc(var(--k) * 28px))) / 1.2 'EB Garamond', serif; color: #5d4a47; }
.sbw-clist { list-style: none; margin: .3em 0 0; padding: 0; display: grid; gap: .25em; font: 500 calc(var(--f, 1) * max(10px, calc(var(--k) * 26px))) / 1.2 'EB Garamond', serif; }
.sbw-clist span { color: #8a6d45; font-size: .85em; }
/* v211: the people trees by count: a bigger biscuit gets a bigger photo window and bigger words */
.sbw-pp { container-type: size; }
.sbw-pp.has-photo .sbw-ppwin { width: max(20px, min(40cqh, 48cqw)); height: max(20px, min(40cqh, 48cqw)); }
.sbw-pp .sbw-ppname { font-size: calc(var(--f, 1) * max(10px, calc(var(--k) * 24px), min(11cqw, 16cqh))); }
.sbw-pp .sbw-pprole { font-size: calc(var(--f, 1) * max(10px, calc(var(--k) * 15px), min(6.5cqw, 9cqh))); }
/* v214: words never clipped (when they are longer than the editor's limits, the box lets them show) */
.sbw-box.is-full, .sbw-box.is-full .sbw-in { overflow: visible; max-height: none; }
.sbw-written .sbw-sthead { margin-top: .45em; }
.sbw-written .sbw-sthead:first-child { margin-top: 0; }

/* v221: the reply stop is one screen (one-shot rule); the guide hint would push it over, so the Pass itself carries the guide entry */
.sbw .wk-guidehint { display: none; }
/* v222 (owner, 24 Oct): the opening. The "Open the doors" button belongs to the screen, not the picture (on a short phone the
   picture runs past the bottom edge); it fades as the doors open. The doors film and its printed names dissolve in over the
   idle loop (0.32 s) while the tag's names dissolve out: one continuous move. The card shadow eases in after the opening
   (a wide window fills edge to edge while the doors wait: css/occasi-walk-alive.css .wa-side, .wa-feather). */
.sbw-doors { transition: opacity .25s ease; }
.sbw-doors.is-going { opacity: 0; pointer-events: none; }
.sbw-film.is-xfade, .sbw-art .op-filmcanvas.is-xfade { transition: opacity .32s ease; }
.sbw-words.is-xfade.is-off { transition-duration: .32s; }
.sbw-art { transition: box-shadow .6s ease; }
.sbw-doors { -webkit-tap-highlight-color: transparent; }
/* v222 (one-shot rule): the open reply card is whole on one screen at every size, never scrolled inside. Where a phone crops
   the picture the card slides just enough to stay on screen (js: OccasiWalkAlive.onScreen sets --wa-dx/--wa-dy), and on a short
   screen it may use the screen's height instead of 78 % of it (the card itself is unchanged: same paper, frame and words). */
.sbw-reply { transform: translate(calc(-50% + var(--wa-dx, 0px)), calc(-50% + var(--wa-dy, 0px))); max-height: min(calc(100cqh - 16px), var(--wa-room, 100cqh), max(78cqh, calc(var(--k) * 1500px))); }
.sbw-art .op-filmcanvas.is-held { opacity: 0 !important; }   /* v222: the opening film's words, laid in while the doors wait */
/* v267 (owner, 27 Oct): who sent it, before the tap, on the doors' own tag ("Specially for / Sophie & James / from Amelia &
   Rohan"; the shared link: "An invitation from" over the couple and the date) */
.sbw-kick { font: 600 calc(var(--f, 1) * max(10px, calc(var(--k) * 22px))) / 1.2 'Cormorant', serif; letter-spacing: .2em; text-transform: uppercase; color: var(--sbw-gilt-ink); }
.sbw-tname { margin-top: .1em !important; font: 400 calc(var(--f, 1) * max(20px, calc(var(--k) * 60px))) / 1.05 'Great Vibes', cursive; }
.sbw-rim .sbw-in { display: grid; align-content: center; justify-items: center; gap: .05em; }
.sbw-rimname { font: 400 calc(var(--f, 1) * max(16px, calc(var(--k) * 46px))) / 1 'Great Vibes', cursive; color: var(--sbw-gilt-ink); text-align: center; }
.sbw-tfrom { margin-top: .25em !important; font: italic 500 calc(var(--f, 1) * max(11px, calc(var(--k) * 28px))) / 1.15 'EB Garamond', serif; color: #4f3f3c; }
.sbw-tag .sbw-kick + .sbw-names { font-size: calc(var(--f, 1) * max(20px, calc(var(--k) * 62px))); }
/* v267: "Tap to open", Skip and Reply in the salon's own material: a blush sugar-paste plaque with a gilt hairline and a
   string of piped sugar pearls along its edges (as on the cake's tiers). Dark ink, 16-18 px, 44 px and more to tap. */
.sbw-sugar { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border: 0; color: #2f2322; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle, #fffaf3 1.5px, #e6d2bd 2.1px, transparent 2.6px) 3px 1px / 9px 6px repeat-x, radial-gradient(circle, #fffaf3 1.5px, #e6d2bd 2.1px, transparent 2.6px) 3px calc(100% - 1px) / 9px 6px repeat-x, linear-gradient(#f9e4e4, #f3d3d5);
  box-shadow: inset 0 0 0 1px #b08d57, inset 0 0 0 7px transparent, 0 6px 14px -8px rgba(80, 40, 40, .55); }
.sbw-sugar[hidden] { display: none; }
.sbw-doors.sbw-sugar { min-height: 50px; padding: 0 28px; border-radius: 14px; background-color: transparent; font: italic 600 18px / 1 'EB Garamond', serif; }
.sbw-flag { z-index: 8; right: 0; border-radius: 12px 0 0 12px; padding: 0 14px 0 16px; font: italic 600 17px / 1 'EB Garamond', serif; box-shadow: inset 1px 1px 0 0 #b08d57, inset 0 -1px 0 0 #b08d57, 0 6px 14px -8px rgba(80, 40, 40, .55); }
.sbw-skip { top: calc(40px + env(safe-area-inset-top, 0px)); font-size: 16px; }   /* under the place dots (a long "Überspringen" reached them at 360) */
.sbw-replytag { top: calc(40px + env(safe-area-inset-top, 0px)); font-size: 18px; }
@container (min-aspect-ratio: 3 / 4) { .sbw-flag { right: max(0px, calc(50cqw - 100cqh * 9 / 32)); } }
.sbw-rosei { width: 22px; height: 22px; flex: none; }
/* v267: the dissolve's still copy over the stage (Skip, Reply); at once with reduced motion */
.sbw-xfade { position: absolute; z-index: 6; pointer-events: none; overflow: hidden; transition: opacity .36s ease; }
.sbw-xfade > canvas, .sbw-xfade > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sbw-xfade.is-off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sbw-xfade { transition-duration: .01s; } }

/* v285.2 (owner 3 Nov, page 2 turned in place): past five celebrations (eight people), "‹ 1 / 2 ›" is piped in the
   plaques' own italic ink on the front of the étagère's lowest shelf (the marble table under the hatbox for the party):
   no panel, no glow. Each arrow is a native button with a 44 px tap round a smaller glyph; the way that is not open is
   dimmed AND lighter (aria-disabled), still in place so nothing shifts. The films print it on the same plane. */
.sbw-box.sbw-p2tag .sbw-in { height: 100%; overflow: visible; max-height: none; }
.sbw-pager .sbw-in { display: flex; align-items: center; justify-content: center; gap: max(6px, calc(var(--k) * 26px)); }
.sbw-pglabel { white-space: nowrap; font: italic 500 max(12px, calc(var(--k) * 34px)) / 1 'EB Garamond', serif; color: var(--sbw-ink); letter-spacing: .04em; font-variant-numeric: lining-nums; }
.sbw-pgbtn { all: unset; position: relative; box-sizing: border-box; display: grid; place-items: center; min-width: max(14px, calc(var(--k) * 40px)); cursor: pointer; color: var(--sbw-ink);
  font: 500 max(16px, calc(var(--k) * 46px)) / 1 'EB Garamond', serif; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sbw-pgbtn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }   /* the 44 px tap */
.sbw-pgbtn > span { position: relative; top: -.06em; }
.sbw-pgbtn[aria-disabled="true"] { opacity: .32; font-weight: 400; cursor: default; }
.sbw-pgbtn:focus-visible { outline: 2px solid var(--sbw-gilt-ink); outline-offset: 2px; border-radius: 6px; }
.sbw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* the turn: the still copy of the page (plate and words, one layer) dissolves over the other page */
.sbw-xfade.is-turn { transition: opacity .26s cubic-bezier(0.4, 0, 0.2, 1); }   /* r20: after its words have left (js turnWords) */
@media (prefers-reduced-motion: reduce) { .sbw-xfade.is-turn { transition-duration: .01s; } }

/* v283 (sense check #12): a celebration plaque opens its event */
.sbw-box[data-sbw-event] { cursor: pointer; border-radius: calc(var(--k) * 14px); }
.sbw-box[data-sbw-event]:focus-visible { outline: 2px solid var(--wk-btn, #8a5a64); outline-offset: 3px; }

/* owner (theme rule, tester u17): off the hatbox (a household its card is too small for), the reply card is Sugar Bloom's
   patisserie card: the hatbox's blush pink at its edge, its ivory satin ribbon across the top with a knot, the card's
   double gold rule inside */
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetin { left: 16px; right: 16px; border: 6px solid transparent; border-radius: 8px;
  background: linear-gradient(#fffaf7, #fffaf7) padding-box, linear-gradient(160deg, #f6dbd8, #e8b4b0 45%, #f3d0cc 70%, #dfa6a2) border-box;
  box-shadow: 0 24px 46px -20px rgba(80, 40, 40, .55), inset 0 0 0 1px rgba(176, 141, 87, .5), inset 0 0 0 5px #fffaf7, inset 0 0 0 6px rgba(176, 141, 87, .25); }
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetin::before { content: ''; position: absolute; left: -6px; right: -6px; top: 16px; height: 15px; pointer-events: none;
  background: linear-gradient(#fdf8f1, #f1e7da 55%, #e3d4c1); box-shadow: 0 1px 0 rgba(176, 141, 87, .55), 0 -1px 0 rgba(176, 141, 87, .45), 0 4px 6px -4px rgba(80, 40, 40, .35); }
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetin::after { content: ''; position: absolute; left: 50%; top: 12px; width: 26px; height: 23px; transform: translateX(-50%); pointer-events: none;
  border-radius: 7px; background: radial-gradient(ellipse at 40% 30%, #fffdf8, #ece0cf 60%, #d9c7b0); box-shadow: 0 2px 4px -1px rgba(80, 40, 40, .35), inset 0 0 0 1px rgba(176, 141, 87, .45); }
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetbody { padding: 48px 20px 16px; }
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetbar { top: 34px; right: 8px; left: 8px; }
.sbw .wk-sheet.is-card.sbw-patisserie .wk-sheetbar .wk-iconbtn { background: transparent; }

/* v285.1 (caps rule: every couple-typed word whole at its cap, 10 px or more, on its plaque; js shrink): when the words still
   run past their plaque at 10 px, the lines close up (no letter-spacing on the small capitals, line-height 1), then on a
   celebration plaque the venue gives way (the plaque opens the event, venue and all) */
.sbw-in.is-tight :is(.sbw-names, .sbw-evname, .sbw-ppname, .sbw-tname, .sbw-sttext) { line-height: 1; }
.sbw-in.is-tight :is(.sbw-pprole, .sbw-evline, .sbw-date, .sbw-kick, .sbw-sthead) { letter-spacing: 0; line-height: 1; }
.sbw-in.is-tight .sbw-date { margin-top: .15em !important; }
.sbw-in.is-novenue .sbw-evvenue { display: none; }