/* The looks of the designs built around their own enclosure (scripts/envelope-enclosures.mjs). The opening, the seal and the fold are public/assets/enclosure.css.
   Crisp and clean: flat colours and soft light, no paper textures, a strong difference between the table, the envelope and the card. */

/* ================= Sealed & Delivered: a cream envelope on a walnut table, a wax seal, the card folded in half ================= */
body.d-sealed { --bg: #1d140e; --env-back: #cdb994; --env-l: #ece0c8; --env-r: #e5d7ba; --env-b: #f1e7d3; --flap: #f0e4cc; --flap-in: #dccaa6; --edge: rgba(110, 80, 44, .42);
  --paper: #fffaf1; --ink: #3a2a1f; --ink-soft: #6f5a48; --accent: #7c1f2d; --gold: #b98c35;
  --display: 'Cormorant Garamond', Georgia, serif; --body: 'Cormorant Garamond', Georgia, serif; --caps: 'Cinzel', Georgia, serif;
  --rp-bg: #7c1f2d; --rp-fg: #fff6ea; --rp-edge: #d9b56a; color: #f3e3c3; }
.d-sealed .bg { background: radial-gradient(ellipse 72% 58% at 50% 44%, #6e4c33 0, #3d2a1c 52%, #1d140e 100%); }
.sd-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 50% 40%, rgba(255, 226, 170, .16), rgba(255, 226, 170, 0)); }
.sd-leaf { position: absolute; width: min(17vmin, 116px); height: auto; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); }
.sd-leaf.l1 { left: 5%; top: 7%; transform: rotate(-22deg); }
.sd-leaf.l2 { right: 6%; top: 12%; width: min(12vmin, 84px); transform: rotate(38deg); }
.sd-leaf.l3 { left: 8%; bottom: 9%; width: min(13vmin, 90px); transform: rotate(128deg); }
.sd-leaf.l4 { right: 7%; bottom: 6%; transform: rotate(-64deg); }
.d-sealed .tap-hint { color: #f3e3c3; font-family: var(--caps); }
.d-sealed .quiet { color: #f3e3c3; font-family: var(--body); font-size: 16px; }
.d-sealed .ev-back .body { box-shadow: 0 24px 46px -16px rgba(0, 0, 0, .75), 0 0 0 1px var(--edge); }
.d-sealed .pocket polygon, .d-sealed .flap polygon { stroke: rgba(110, 80, 44, .5); }
/* the card: bright ivory with a fine gold double frame */
.d-sealed .card { background-color: #fffaf1; background-image: linear-gradient(180deg, #fffdf8, #f7eedf); border-radius: 2px; color: var(--ink);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .25); }
.sd-frame { position: absolute; inset: calc(var(--u) * 3.4); border: 1.5px solid #b98c35; pointer-events: none; }
.sd-frame::after { content: ""; position: absolute; inset: calc(var(--u) * 1.2); border: 1px solid rgba(185, 140, 53, .55); }
.d-sealed .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 10); gap: calc(var(--u) * 2.3); }
.sd-orn { width: calc(var(--u) * 30); height: auto; flex: none; }
.d-sealed .kicker { font: 400 calc(var(--u) * 3.4) / 1.4 var(--caps); letter-spacing: .22em; color: var(--ink-soft); }
.sd-req { margin: calc(var(--u) * -1.4) 0 0; font: italic 400 calc(var(--u) * 4.8) / 1.2 var(--display); color: var(--ink-soft); }
.d-sealed .title { font-family: var(--display); font-weight: 600; color: #7c1f2d; }
.sd-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); width: 56%; }
.sd-rule span { flex: 1; height: 1px; background: #b98c35; }
.sd-rule i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); background: #b98c35; transform: rotate(45deg); }
.d-sealed .when, .d-sealed .where { font: 400 calc(var(--u) * 3.9) / 1.6 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: #3a2a1f; }
.d-sealed .note { font-family: var(--display); font-size: calc(var(--u) * 4.6); color: var(--ink-soft); }
.sd-host { margin: 0; font: italic 400 calc(var(--u) * 4.6) / 1.3 var(--display); color: var(--ink-soft); }
.sd-host span { font: 500 calc(var(--u) * 3.6) / 1.3 var(--caps); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #3a2a1f; }
.sd-joke { margin: calc(var(--u) * 1) 0 0; font: 400 calc(var(--u) * 2.9) / 1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: #a17a2c; }
/* the outside of the folded card */
.d-sealed .fb-out { color: #7c1f2d; font-family: var(--display); }

/* ================= Handle with Gravy: a square kraft parcel, a red tear strip, a delivery slip folded in quarters ================= */
body.d-gravy { --bg: #121a24; --env-back: #9c6a3c; --env-b: #c9965f; --flap: #c18c55; --flap-in: #a77443; --edge: rgba(70, 38, 12, .45);
  --paper: #fffaf0; --ink: #1f2a3a; --ink-soft: #4b5566; --accent: #c62828;
  --display: 'Archivo Black', Impact, sans-serif; --body: 'Courier Prime', 'Courier New', monospace;
  --rp-bg: #c62828; --rp-fg: #fff6ea; --rp-edge: #fff6ea; color: #f1e6d4; }
.d-gravy .bg { background: radial-gradient(ellipse 72% 58% at 50% 46%, #3a4d66 0, #22303f 55%, #121a24 100%); }
.hg-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 50% 42%, rgba(255, 236, 200, .12), rgba(255, 236, 200, 0)); }
.d-gravy .tap-hint { color: #f1e6d4; font-family: var(--display); letter-spacing: .24em; }
.d-gravy .quiet { color: #f1e6d4; font-family: var(--body); font-size: 15px; }
.d-gravy .ev-back .body { box-shadow: 0 24px 46px -16px rgba(0, 0, 0, .75); }
.d-gravy .hp { background: linear-gradient(180deg, #cf9d66, #c18c55); }
.d-gravy .hf-o .hf-face { background: linear-gradient(180deg, #c99560, #b9834e); }
/* printed on the parcel */
.hg-label { position: absolute; z-index: 1; left: 7%; top: 57%; width: 50%; padding: 3% 4%; border-radius: 3px; background: #fffaf0; color: #1f2a3a; text-align: left; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  font: 600 calc(var(--ew) * .05) / 1.05 'Caveat', cursive; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hg-label small { display: block; margin-bottom: .2em; font: 700 calc(var(--ew) * .021) / 1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #4b5566; }
.hg-stamp { position: absolute; z-index: 1; right: 7%; top: 60%; padding: 2.2% 3%; border: calc(var(--ew) * .006) solid rgba(198, 40, 40, .85); outline: 1px solid rgba(198, 40, 40, .85); outline-offset: 2px;
  color: rgba(198, 40, 40, .9); font: calc(var(--ew) * .033) / 1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); }
.hg-fragile { position: absolute; z-index: 1; left: 7%; bottom: 7%; font: 700 calc(var(--ew) * .023) / 1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(31, 42, 58, .78); }
.d-gravy .ts { --ts-c: #c62828; --ts-tab: #fff6ea; --ts-ink: #fff6ea; --ts-perf: rgba(60, 30, 8, .6); }
/* the card: a delivery slip */
.d-gravy .card { background-color: #fffaf0; border-radius: 3px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .55); }
.d-gravy .card-in { justify-content: flex-start; padding: 0 calc(var(--u) * 9) calc(var(--u) * 7); gap: calc(var(--u) * 2.4); }
.hg-band { align-self: stretch; margin: 0 calc(var(--u) * -9) calc(var(--u) * 2.5); padding: calc(var(--u) * 4) 0; background: #1f2a3a; color: #fffaf0; font: calc(var(--u) * 5) / 1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.d-gravy .kicker { font: 700 calc(var(--u) * 3.4) / 1.3 var(--body); letter-spacing: .3em; color: var(--ink-soft); }
.d-gravy .title { --t1: 11; --t2: 9; --t3: 7.4; font-family: var(--display); color: #c62828; text-transform: uppercase; letter-spacing: .01em; }
.hg-slip { align-self: stretch; margin: calc(var(--u) * 1) 0 0; border-top: 2px solid #1f2a3a; }
.hg-slip div { display: grid; grid-template-columns: 34% 1fr; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.2) 0; border-bottom: 1px dashed rgba(31, 42, 58, .45); text-align: left; }
.hg-slip dt { font: 700 calc(var(--u) * 3) / 1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hg-slip dd { margin: 0; font: 700 calc(var(--u) * 4.1) / 1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.d-gravy .note { font: italic 400 calc(var(--u) * 3.9) / 1.4 var(--body); color: var(--ink-soft); }
.hg-fine { margin-top: auto; font: 700 calc(var(--u) * 2.8) / 1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #c62828; }
.d-gravy .fb-out { font: calc(var(--u) * 5) / 1.2 var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #c62828; }

/* ================= Easy as Pie: a round golden crust with a lattice flap and a wax seal, a recipe card folded in quarters ================= */
body.d-pie { --bg: #0d1f1e; --env-back: #a8642c; --env-b: #d9994e; --flap: #e3a95c; --flap-in: #b8723a; --edge: rgba(110, 55, 15, .5);
  --paper: #fffaf0; --ink: #3b2416; --ink-soft: #6e4f3a; --accent: #b4491f;
  --display: 'Fraunces', Georgia, serif; --body: 'Fraunces', Georgia, serif; --hand: 'Caveat', cursive;
  --rp-bg: #b4491f; --rp-fg: #fff6ea; --rp-edge: #f2c36b; color: #f6e7cf; }
.d-pie .bg { background: radial-gradient(ellipse 72% 58% at 50% 46%, #2f6461 0, #183b39 55%, #0d1f1e 100%); }
.ep-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 50% 42%, rgba(255, 230, 180, .12), rgba(255, 230, 180, 0)); }
.d-pie .tap-hint { color: #f6e7cf; font-family: var(--display); letter-spacing: .2em; }
.d-pie .quiet { color: #f6e7cf; font-family: var(--body); font-size: 15px; }
.d-pie .ev-back .body { background: #a8642c; box-shadow: 0 24px 46px -16px rgba(0, 0, 0, .75); }
/* the crust: golden, with a crimped rim */
.d-pie .hp { background: radial-gradient(circle at 42% 40%, #f0c27a 0, #dda055 55%, #c1813e 100%); box-shadow: inset 0 0 0 calc(var(--ew) * .022) #c98a44, inset 0 0 0 calc(var(--ew) * .03) rgba(120, 60, 15, .35); }
/* the lid: a lattice of golden strips over the filling, the whole top of the pie, with the crust's rim along its edge (the circle's centre is at
   50% 73.53% of the lid's box: the lid is the top 68% of the holder) */
.d-pie .hf-o .hf-face { background:
  radial-gradient(circle at 50% 73.53%, transparent 0 calc(var(--hw) * .462), rgba(120, 60, 15, .4) calc(var(--hw) * .465), #c98a44 calc(var(--hw) * .471)),
  repeating-linear-gradient(-45deg, transparent 0 calc(var(--ew) * .046), rgba(110, 50, 12, .55) calc(var(--ew) * .046) calc(var(--ew) * .05), #f3c67e calc(var(--ew) * .05) calc(var(--ew) * .09), rgba(110, 50, 12, .55) calc(var(--ew) * .09) calc(var(--ew) * .094), transparent calc(var(--ew) * .094) calc(var(--ew) * .12)),
  repeating-linear-gradient(45deg, transparent 0 calc(var(--ew) * .046), rgba(110, 50, 12, .55) calc(var(--ew) * .046) calc(var(--ew) * .05), #e9b366 calc(var(--ew) * .05) calc(var(--ew) * .09), rgba(110, 50, 12, .55) calc(var(--ew) * .09) calc(var(--ew) * .094), transparent calc(var(--ew) * .094) calc(var(--ew) * .12)),
  linear-gradient(180deg, #a14c22, #8a3f1b); }
.d-pie .hf-i .hf-face { background: #c4833f; }
/* the card: a recipe card */
.d-pie .card { background-color: #fffaf0; border-radius: 4px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .55); }
.d-pie .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4.4); border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #b4491f 0 calc(var(--u) * 2.2), #fffaf0 calc(var(--u) * 2.2) calc(var(--u) * 4.4)); opacity: .85; }
.d-pie .card-in { align-items: stretch; padding: calc(var(--u) * 11) calc(var(--u) * 10) calc(var(--u) * 8); gap: calc(var(--u) * 2); text-align: left; }
.ep-from { margin: 0; font: italic 400 calc(var(--u) * 3.8) / 1.3 var(--display); color: var(--ink-soft); }
.ep-from span { font-style: normal; font-weight: 700; color: var(--ink); }
.d-pie .kicker { margin: calc(var(--u) * 1.5) 0 calc(var(--u) * -1.5); font: 600 calc(var(--u) * 5.4) / 1 var(--hand); letter-spacing: 0; text-transform: none; color: #b4491f; }
.d-pie .title { font-family: var(--display); font-weight: 700; color: var(--ink); }
.ep-ing { margin: 0; padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 5); border-top: 1px solid rgba(59, 36, 22, .25); border-bottom: 1px solid rgba(59, 36, 22, .25); font: 600 calc(var(--u) * 5.2) / 1.25 var(--hand); color: var(--ink); }
.ep-method { margin: 0; font: 400 calc(var(--u) * 4) / 1.35 var(--body); color: var(--ink); }
.ep-method b { font-weight: 700; color: #b4491f; }
.d-pie .note { font: 600 calc(var(--u) * 4.6) / 1.3 var(--hand); font-style: normal; color: var(--ink-soft); }
.ep-fine { margin-top: auto; font: italic 400 calc(var(--u) * 3.2) / 1.3 var(--display); color: #b4491f; }
.d-pie .fb-out { font: 600 calc(var(--u) * 6.4) / 1.15 var(--hand); font-style: normal; color: #b4491f; }

/* ================= We're Missing a Piece: a wide sage envelope, a flap of four puzzle pieces, the card folded in half ================= */
body.d-piece { --bg: #22120d; --env-back: #6f8466; --env-b: #a3b79a; --flap: #8fa486; --flap-2: #86a07c; --flap-in: #7b9071; --edge: rgba(40, 60, 35, .45); --pz-cut: rgba(253, 248, 238, .8);
  --paper: #fffaf0; --ink: #2f3a2b; --ink-soft: #5f6a58; --accent: #c2562e;
  --display: 'DM Serif Display', Georgia, serif; --body: 'DM Sans', system-ui, sans-serif;
  --rp-bg: #c2562e; --rp-fg: #fffaf0; --rp-edge: #fdf8ee; color: #f6e9dc; }
.d-piece .bg { background: radial-gradient(ellipse 72% 58% at 50% 46%, #6b3a2a 0, #40221a 55%, #22120d 100%); }
.mp-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 50% 42%, rgba(255, 220, 190, .12), rgba(255, 220, 190, 0)); }
.d-piece .tap-hint { color: #f6e9dc; font-family: var(--body); font-weight: 700; letter-spacing: .26em; }
.d-piece .quiet { color: #f6e9dc; font-family: var(--body); }
.d-piece .ev-back .body { box-shadow: 0 24px 46px -16px rgba(0, 0, 0, .75); }
.d-piece .hp { background: linear-gradient(180deg, #a9bd9f, #9bb091); }
.mp-note { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%; display: flex; align-items: center; justify-content: center; gap: .5em; color: #fdf8ee; font: 700 calc(var(--ew) * .028) / 1 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.mp-note .mp-icon { width: 1.6em; height: 1.6em; }
/* the card */
.d-piece .card { background-color: #fffaf0; border-radius: 3px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .55); }
.d-piece .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3.4); border: 2px solid #8fa486; border-radius: 2px; pointer-events: none; }
.d-piece .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 10); gap: calc(var(--u) * 2.6); }
.d-piece .kicker { font: 500 calc(var(--u) * 3.6) / 1.4 var(--body); letter-spacing: .18em; color: var(--ink-soft); }
.d-piece .title { font-family: var(--display); font-weight: 400; color: #2f3a2b; }
.mp-piece { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); margin: 0; font: italic 400 calc(var(--u) * 5) / 1.25 var(--display); color: var(--ink); }
.mp-piece .mp-icon { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.mp-piece b { font-weight: 400; color: #c2562e; }
.d-piece .when, .d-piece .where { font: 500 calc(var(--u) * 4.3) / 1.4 var(--body); color: var(--ink); }
.d-piece .note { font-family: var(--body); color: var(--ink-soft); }
.mp-host { margin: 0; font: 400 calc(var(--u) * 3.8) / 1.3 var(--body); color: var(--ink-soft); }
.mp-host span { font-weight: 700; color: var(--ink); }
.d-piece .fb-out { font: italic 400 calc(var(--u) * 6) / 1.2 var(--display); color: #c2562e; }

/* ================= Fold & Feast: an indigo origami envelope on a light table, paper cranes, the card folded in half ================= */
body.d-origami { --bg: #e7e0d4; --env-back: #1d2848; --env-l: #2b3a67; --env-r: #26355e; --env-b: #31427a; --flap: #2b3a67; --flap-in: #f3ead8; --edge: rgba(10, 15, 35, .5);
  --paper: #fffdf8; --ink: #22305a; --ink-soft: #55607f; --accent: #c2562e;
  --display: 'Cormorant Garamond', Georgia, serif; --body: 'Jost', system-ui, sans-serif;
  --rp-bg: #22305a; --rp-fg: #fffdf8; --rp-edge: #c2562e; color: #22305a; }
.d-origami .bg { background: radial-gradient(ellipse 72% 58% at 50% 44%, #f6f2ea 0, #e4ddd1 60%, #cfc5b6 100%); }
.ff-crane { position: absolute; width: min(16vmin, 110px); height: auto; filter: drop-shadow(0 6px 6px rgba(40, 30, 20, .22)); }
.ff-crane.c1 { left: 6%; top: 9%; transform: rotate(-8deg); }
.ff-crane.c2 { right: 6%; top: 18%; width: min(12vmin, 84px); transform: scaleX(-1) rotate(-6deg); }
.ff-crane.c3 { left: 10%; bottom: 10%; width: min(11vmin, 76px); transform: rotate(6deg); }
.d-origami .tap-hint { color: #22305a; font-family: var(--body); font-weight: 500; letter-spacing: .28em; }
.d-origami .quiet { color: #22305a; font-family: var(--body); }
.d-origami .ev-back .body { box-shadow: 0 24px 46px -16px rgba(30, 30, 50, .55), 0 0 0 1px var(--edge); }
.d-origami .pocket polygon { stroke: rgba(10, 15, 35, .55); }
/* the card */
.d-origami .card { background-color: #fffdf8; border-radius: 2px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(30, 30, 50, .35), 0 1px 3px rgba(30, 30, 50, .2); }
.d-origami .card::before { content: ""; position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); border: 1px solid rgba(34, 48, 90, .35); pointer-events: none; }
.d-origami .card-in { padding: calc(var(--u) * 10) calc(var(--u) * 10); gap: calc(var(--u) * 2.2); }
.ff-orn { width: calc(var(--u) * 22); height: auto; flex: none; }
.d-origami .kicker { font: 500 calc(var(--u) * 3.4) / 1.4 var(--body); letter-spacing: .3em; color: var(--ink-soft); }
.d-origami .title { font-family: var(--display); font-weight: 600; color: #22305a; }
.ff-sub { margin: calc(var(--u) * -1) 0 0; font: italic 500 calc(var(--u) * 5.2) / 1.2 var(--display); color: #c2562e; }
.ff-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); width: 50%; }
.ff-rule span { flex: 1; height: 1px; background: rgba(34, 48, 90, .4); }
.ff-rule i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); background: #c2562e; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.d-origami .when, .d-origami .where { font: 400 calc(var(--u) * 4.1) / 1.45 var(--body); letter-spacing: .04em; color: var(--ink); }
.d-origami .note { font-family: var(--display); font-size: calc(var(--u) * 4.8); color: var(--ink-soft); }
.ff-host { margin: 0; font: italic 500 calc(var(--u) * 4.4) / 1.3 var(--display); color: var(--ink-soft); }
.ff-host span { font-style: normal; font-weight: 600; color: var(--ink); }
.ff-joke { margin: calc(var(--u) * .5) 0 0; font: 500 calc(var(--u) * 2.8) / 1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #c2562e; }
.d-origami .fb-out { font: italic 500 calc(var(--u) * 6.4) / 1.2 var(--display); color: #22305a; }

/* ================= With Open Arms: a tall ivory four-way enclosure on deep green, an ivory seal, the card flat ================= */
body.d-arms { --bg: #0f1b14; --env-back: #d6cab9; --flap: #f2ebe1; --ep-t: #f5eee5; --ep-b: #ebe3d7; --ep-l: #f7f1e8; --ep-r: #e7ded1; --flap-in: #e2d8c9; --edge: rgba(110, 90, 66, .42);
  --paper: #fffcf6; --ink: #2f3a30; --ink-soft: #5f6a5c; --accent: #a8893f;
  --display: 'Cormorant Garamond', Georgia, serif; --body: 'Cormorant Garamond', Georgia, serif; --caps: 'Cinzel', Georgia, serif;
  --rp-bg: #2f4a3c; --rp-fg: #fffcf6; --rp-edge: #c9ad6a; color: #efe7da; }
.d-arms .bg { background: radial-gradient(ellipse 72% 60% at 50% 46%, #355443 0, #1d3226 55%, #0f1b14 100%); }
.oa-light { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 40% at 50% 44%, rgba(255, 240, 210, .14), rgba(255, 240, 210, 0)); }
.oa-sprig { position: absolute; width: min(14vmin, 96px); height: auto; }
.oa-sprig.s1 { left: 5%; top: 6%; transform: rotate(-24deg); }
.oa-sprig.s2 { right: 5%; bottom: 7%; transform: rotate(150deg); }
.d-arms .tap-hint { color: #efe7da; font-family: var(--caps); letter-spacing: .3em; }
.d-arms .quiet { color: #efe7da; font-family: var(--body); font-size: 16px; }
.d-arms .ev-back .body { background: linear-gradient(180deg, #dbd0c0, #cfc2b0); box-shadow: inset 0 0 calc(var(--ew) * .06) rgba(80, 60, 36, .3), 0 calc(var(--ew) * .06) calc(var(--ew) * .1) -2px rgba(0, 0, 0, .55); }
/* the card: bright ivory, a fine gold frame */
.d-arms .card { background-color: #fffcf6; border-radius: 2px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .2); }
.oa-frame { position: absolute; inset: calc(var(--u) * 3.6); border: 1.5px solid #c2a463; pointer-events: none; }
.oa-frame::after { content: ""; position: absolute; inset: calc(var(--u) * 1.2); border: 1px solid rgba(194, 164, 99, .55); }
.d-arms .card-in { padding: calc(var(--u) * 12) calc(var(--u) * 11); gap: calc(var(--u) * 2.6); }
.d-arms .kicker { font: 400 calc(var(--u) * 3.4) / 1.45 var(--caps); letter-spacing: .2em; color: var(--ink-soft); }
.d-arms .title { font-family: var(--display); font-weight: 600; color: #2f4a3c; }
.oa-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); width: 54%; }
.oa-rule span { flex: 1; height: 1px; background: #c2a463; }
.oa-rule i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: #8fa486; }
.d-arms .when, .d-arms .where { font: 400 calc(var(--u) * 3.9) / 1.6 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: #2f3a30; }
.d-arms .note { font-family: var(--display); font-size: calc(var(--u) * 4.7); color: var(--ink-soft); }
.oa-host { margin: 0; font: italic 400 calc(var(--u) * 4.6) / 1.3 var(--display); color: var(--ink-soft); }
.oa-host span { font: 500 calc(var(--u) * 3.6) / 1.4 var(--caps); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #2f3a30; }
.oa-joke { margin: calc(var(--u) * .6) 0 0; font: 400 calc(var(--u) * 2.9) / 1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: #a8893f; }

/* ================= Full Bloom: four terracotta petals around a gold seal, on plum; the card folded in quarters ================= */
body.d-bloom { --bg: #22101a; --env-back: #ecd2c2; --flap: #e59a72; --ep-t: #eaa37c; --ep-b: #d98b63; --ep-l: #e39770; --ep-r: #d2845d; --flap-in: #f7e3d3; --edge: rgba(120, 50, 30, .42);
  --paper: #fffaf3; --ink: #3a1f2e; --ink-soft: #6e4d5c; --accent: #c8643f;
  --display: 'Playfair Display', Georgia, serif; --body: 'Jost', system-ui, sans-serif;
  --rp-bg: #c8643f; --rp-fg: #fffaf3; --rp-edge: #f2c9a0; color: #f6e3d8; }
.d-bloom .bg { background: radial-gradient(ellipse 72% 60% at 50% 46%, #5a3047 0, #361b2b 55%, #22101a 100%); }
.fb-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 34% at 50% 44%, rgba(255, 210, 180, .14), rgba(255, 210, 180, 0)); }
.d-bloom .tap-hint { color: #f6e3d8; font-family: var(--body); font-weight: 500; letter-spacing: .3em; }
.d-bloom .quiet { color: #f6e3d8; font-family: var(--body); }
.d-bloom .ev-back .body { background: radial-gradient(circle at 50% 45%, #f4ded0, #e3c3b0); box-shadow: inset 0 0 calc(var(--ew) * .05) rgba(120, 50, 30, .25), 0 calc(var(--ew) * .06) calc(var(--ew) * .1) -2px rgba(0, 0, 0, .55); }
/* the card */
.d-bloom .card { background-color: #fffaf3; border-radius: 3px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .5); }
.d-bloom .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3.6); border: 1px solid rgba(200, 100, 63, .5); border-radius: 2px; pointer-events: none; }
.d-bloom .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 10); gap: calc(var(--u) * 2.4); }
.d-bloom .kicker { font: 500 calc(var(--u) * 3.4) / 1.4 var(--body); letter-spacing: .26em; color: var(--ink-soft); }
.d-bloom .title { font-family: var(--display); font-weight: 700; color: #3a1f2e; }
.fl-sub { margin: calc(var(--u) * -1) 0 0; font: italic 400 calc(var(--u) * 5) / 1.25 var(--display); color: #c8643f; }
.fl-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); width: 50%; }
.fl-rule span { flex: 1; height: 1px; background: rgba(200, 100, 63, .5); }
.fl-rule i { width: calc(var(--u) * 3); height: calc(var(--u) * 3); background: #e59a72; border-radius: 50% 0 50% 0; transform: rotate(45deg); }
.d-bloom .when, .d-bloom .where { font: 400 calc(var(--u) * 4.1) / 1.45 var(--body); letter-spacing: .04em; color: var(--ink); }
.d-bloom .note { font-family: var(--display); font-size: calc(var(--u) * 4.6); color: var(--ink-soft); }
.fl-host { margin: 0; font: 400 calc(var(--u) * 3.8) / 1.3 var(--body); color: var(--ink-soft); }
.fl-host span { font-weight: 500; color: var(--ink); }
.fl-joke { margin: calc(var(--u) * .6) 0 0; font: italic 400 calc(var(--u) * 3.4) / 1.3 var(--display); color: #c8643f; }
.d-bloom .fb-out { font: italic 400 calc(var(--u) * 6) / 1.2 var(--display); color: #c8643f; }

/* ================= A Golden Fold: a mustard-gold origami diamond on charcoal, unfolding to a cream square; the card folded in quarters ================= */
body.d-diamond { --bg: #0e0d0c; --env-back: #f1e6cf; --flap: #d9a441; --ep-tl: #e5b350; --ep-tr: #d9a441; --ep-br: #c48d38; --ep-bl: #cf983d; --flap-in: #f4ead6; --edge: rgba(90, 60, 15, .45);
  --paper: #fffdf8; --ink: #1d1b18; --ink-soft: #57524a; --accent: #b8862f;
  --display: 'Bodoni Moda', Georgia, serif; --body: 'Jost', system-ui, sans-serif;
  --rp-bg: #1d1b18; --rp-fg: #fffdf8; --rp-edge: #d9a441; color: #f4ead6; }
.d-diamond .bg { background: radial-gradient(ellipse 72% 60% at 50% 46%, #3d3935 0, #22201e 55%, #0e0d0c 100%); }
.gf-light { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 32% at 50% 44%, rgba(255, 220, 150, .12), rgba(255, 220, 150, 0)); }
.ep-tl .ep-fill { fill: var(--ep-tl, var(--flap)); } .ep-tr .ep-fill { fill: var(--ep-tr, var(--flap)); } .ep-br .ep-fill { fill: var(--ep-br, var(--flap)); } .ep-bl .ep-fill { fill: var(--ep-bl, var(--flap)); }
.d-diamond .tap-hint { color: #f4ead6; font-family: var(--body); font-weight: 500; letter-spacing: .3em; }
.d-diamond .quiet { color: #f4ead6; font-family: var(--body); }
.d-diamond .card { background-color: #fffdf8; border-radius: 1px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .55); }
.gf-frame { position: absolute; inset: calc(var(--u) * 4); border: 1px solid #1d1b18; pointer-events: none; }
.gf-frame::before, .gf-frame::after { content: ""; position: absolute; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: #d9a441; transform: rotate(45deg); }
.gf-frame::before { left: 50%; top: calc(var(--u) * -3); margin-left: calc(var(--u) * -3); } .gf-frame::after { left: 50%; bottom: calc(var(--u) * -3); margin-left: calc(var(--u) * -3); }
.d-diamond .card-in { padding: calc(var(--u) * 12) calc(var(--u) * 11); gap: calc(var(--u) * 2.5); }
.d-diamond .kicker { font: 500 calc(var(--u) * 3.3) / 1.4 var(--body); letter-spacing: .34em; color: var(--ink-soft); }
.d-diamond .title { font-family: var(--display); font-weight: 500; color: #1d1b18; }
.gf-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); width: 50%; }
.gf-rule span { flex: 1; height: 1px; background: #1d1b18; }
.gf-rule i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); background: #d9a441; transform: rotate(45deg); }
.d-diamond .when, .d-diamond .where { font: 400 calc(var(--u) * 4) / 1.5 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.d-diamond .note { font: italic 400 calc(var(--u) * 4.4) / 1.45 var(--display); color: var(--ink-soft); }
.gf-host { margin: 0; font: 400 calc(var(--u) * 3.7) / 1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gf-host span { font-weight: 500; color: var(--ink); }
.gf-joke { margin: calc(var(--u) * .6) 0 0; font: italic 400 calc(var(--u) * 3.3) / 1.3 var(--display); color: #b8862f; }
.d-diamond .fb-out { font: italic 400 calc(var(--u) * 6) / 1.2 var(--display); color: #1d1b18; }

/* ================= Secret Garden: a round bud of dusty-rose petals (sage underneath), a gold seal, on midnight blue; the card folded in quarters ================= */
/* inside: a lighter blush of the petals' rose (sage made the opened petals read as leaves: the user, 2026-11-10); the heart of the flower a soft blush */
body.d-garden { --bg: #0b0f1d; --env-back: #f2d9d8; --flap: #dca7aa; --ep-t: #e5b2b4; --ep-r: #d89fa3; --ep-b: #cc9396; --ep-l: #d6a1a4; --flap-in: #f6e1e1; --ep-in-edge: rgba(120, 60, 70, .45); --edge: rgba(120, 60, 70, .42);
  --paper: #fffaf6; --ink: #2c2638; --ink-soft: #6a5f72; --accent: #b56e74;
  --display: 'Cormorant Garamond', Georgia, serif; --body: 'Montserrat', system-ui, sans-serif;
  --rp-bg: #b56e74; --rp-fg: #fffaf6; --rp-edge: #e9c98a; color: #f1e4e6; }
.d-garden .bg { background: radial-gradient(ellipse 72% 60% at 50% 46%, #2c3657 0, #172038 55%, #0b0f1d 100%); }
.sg-light { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 32% at 50% 44%, rgba(255, 220, 220, .1), rgba(255, 220, 220, 0)); }
.sg-sprig { position: absolute; width: min(14vmin, 96px); height: auto; }
.sg-sprig.s1 { left: 6%; top: 8%; transform: rotate(-30deg); } .sg-sprig.s2 { right: 6%; bottom: 8%; transform: rotate(150deg); }
.d-garden .tap-hint { color: #f1e4e6; font-family: var(--body); font-weight: 500; letter-spacing: .3em; }
.d-garden .quiet { color: #f1e4e6; font-family: var(--body); }
.d-garden .ev-back .body { background: radial-gradient(circle at 50% 50%, #fdf1ef 0, #f3d6d5 48%, #e2b4b6 100%); box-shadow: inset 0 0 calc(var(--ew) * .05) rgba(120, 60, 70, .2), 0 calc(var(--ew) * .06) calc(var(--ew) * .1) -2px rgba(0, 0, 0, .55); }
.d-garden .card { background-color: #fffaf6; border-radius: 3px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, .5); }
.d-garden .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3.6); border: 1px solid rgba(181, 110, 116, .5); border-radius: 2px; pointer-events: none; }
.d-garden .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 10); gap: calc(var(--u) * 2.4); }
.d-garden .kicker { font: 500 calc(var(--u) * 3.1) / 1.45 var(--body); letter-spacing: .22em; color: var(--ink-soft); }
.d-garden .title { font-family: var(--display); font-weight: 600; color: #2c2638; }
.sg-sub { margin: calc(var(--u) * -1) 0 0; font: italic 500 calc(var(--u) * 5) / 1.25 var(--display); color: #b56e74; }
.d-garden .when, .d-garden .where { font: 400 calc(var(--u) * 3.8) / 1.5 var(--body); letter-spacing: .06em; color: var(--ink); }
.d-garden .note { font: italic 400 calc(var(--u) * 4.6) / 1.4 var(--display); color: var(--ink-soft); }
.sg-host { margin: 0; font: italic 400 calc(var(--u) * 4.6) / 1.3 var(--display); color: var(--ink-soft); }
.sg-host span { font-style: normal; font-weight: 600; color: var(--ink); }
.sg-joke { margin: calc(var(--u) * .6) 0 0; font: 500 calc(var(--u) * 2.9) / 1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #b56e74; }
.d-garden .fb-out { font: italic 500 calc(var(--u) * 6.4) / 1.2 var(--display); color: #b56e74; }

/* ================= Unlock the Feast: four slate panels, jigsaw joints and a brass clasp, on warm sand; the card folded in half ================= */
/* inside: warm white, shaded from each crease (enclosure.css), with a dark edge and a shadow round each opened flap; the floor a shade deeper.
   (A deep slate liner was tried and read as flat dark blobs: the user, 2026-11-10, "the inside could be white also, but shaded".) */
body.d-lockfeast { --bg: #e3d6c2; --env-back: #e6ddcd; --flap: #58738f; --ep-t: #6481a0; --ep-r: #536d89; --ep-b: #4a627c; --ep-l: #5b7794; --flap-in: #f8f4ec; --ep-in-edge: rgba(50, 40, 25, .45); --edge: rgba(15, 25, 40, .5);
  --paper: #fffdf9; --ink: #26313f; --ink-soft: #5b6573; --accent: #b88d3c;
  --display: 'Libre Baskerville', Georgia, serif; --body: 'Josefin Sans', system-ui, sans-serif;
  --rp-bg: #26313f; --rp-fg: #fffdf9; --rp-edge: #d9b25e; color: #26313f; }
.d-lockfeast .bg { background: radial-gradient(ellipse 72% 60% at 50% 46%, #f6efe3 0, #e3d6c2 58%, #cbbaa0 100%); }
.uf-light { position: absolute; inset: 0; }
.d-lockfeast .tap-hint { color: #26313f; font-family: var(--body); font-weight: 600; letter-spacing: .3em; }
.d-lockfeast .quiet { color: #26313f; font-family: var(--body); }
.d-lockfeast .ev-back .body { box-shadow: inset 0 0 calc(var(--ew) * .09) rgba(60, 42, 20, .5), inset 0 0 0 1px rgba(60, 42, 20, .3), 0 calc(var(--ew) * .06) calc(var(--ew) * .1) -2px rgba(40, 30, 20, .45); }
.d-lockfeast .ep-hl, .d-lockfeast .ep-ol { stroke: rgba(255, 255, 255, .35); }
.d-lockfeast .card { background-color: #fffdf9; border-radius: 2px; color: var(--ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(40, 30, 20, .4), 0 1px 3px rgba(40, 30, 20, .2); }
.d-lockfeast .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3.6); border: 2px solid #536d89; pointer-events: none; }
.d-lockfeast .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 10); gap: calc(var(--u) * 2.5); }
.d-lockfeast .kicker { font: 600 calc(var(--u) * 3.4) / 1.4 var(--body); letter-spacing: .26em; color: var(--ink-soft); }
.d-lockfeast .title { font-family: var(--display); font-weight: 700; color: #26313f; }
.ul-rule { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); width: 50%; }
.ul-rule span { flex: 1; height: 1px; background: #b88d3c; }
.ul-rule i { width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: #b88d3c; box-shadow: inset 0 0 0 calc(var(--u) * .6) #e2be6a; }
.d-lockfeast .when, .d-lockfeast .where { font: 400 calc(var(--u) * 4.2) / 1.45 var(--body); letter-spacing: .06em; color: var(--ink); }
.d-lockfeast .note { font: italic 400 calc(var(--u) * 4.2) / 1.45 var(--display); color: var(--ink-soft); }
.ul-host { margin: 0; font: 400 calc(var(--u) * 3.8) / 1.3 var(--body); letter-spacing: .08em; color: var(--ink-soft); }
.ul-host span { font-weight: 600; color: var(--ink); }
.ul-joke { margin: calc(var(--u) * .6) 0 0; font: italic 400 calc(var(--u) * 3.3) / 1.35 var(--display); color: #b88d3c; }
.d-lockfeast .fb-out { font: italic 400 calc(var(--u) * 5.6) / 1.25 var(--display); color: #26313f; }