/* Not My Event: the look of "Gather & Give Thanks" (public/templates/gather-and-give-thanks.html), one quiet Thanksgiving invitation card.
   Textured warm paper, a copper keyline, sage corner sprigs, a small pair of pumpkins. One card, one opening (an envelope, about a second and a half, skippable), a RSVP dialog and an optional
   "What can I bring?" dialog. Only transform and opacity are animated, nothing blurs, nothing flashes, and every animation is switched off by the page's .rm class. */
:root {
  --paper: #F6F0E5; --ink: #1F150E; --accent: #B4774D; --accent-d: #6B3F1F; --btn: #8F5B36; --sage: #79816B; --burgundy: #783E49; --champ: #D9C6A5;
  --soft: rgba(180, 119, 77, .38); --hair: rgba(64, 52, 43, .16);
  --bg1: #FBF7EE; --bg2: #EADFC9; --bg3: #D6C5A4;
  --f-title: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Lora', Georgia, 'Times New Roman', serif;
  --grain: .5;
}
body[data-preset="burgundy"] { --paper: #F5ECE4; --ink: #2A1219; --accent: #783E49; --accent-d: #5E2631; --btn: #783E49; --soft: rgba(120, 62, 73, .38); --bg1: #F7EEE8; --bg2: #E6D4C9; --bg3: #CDB3A5; --champ: #D8B9A2; }
body[data-preset="sage"] { --paper: #F1EFE4; --ink: #1D2418; --accent: #79816B; --accent-d: #39422F; --btn: #5E6652; --soft: rgba(121, 129, 107, .45); --bg1: #F5F3EA; --bg2: #E3E2D0; --bg3: #CACDB5; }
body[data-preset="minimal"] { --paper: #FBF8F3; --ink: #14110F; --accent: #9A7B5F; --accent-d: #54402E; --btn: #2B2723; --soft: rgba(154, 123, 95, .4); --bg1: #FDFBF7; --bg2: #F1EDE5; --bg3: #E2DACB; --grain: .22; }
body[data-fonts="editorial"] { --f-title: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --f-body: 'Lora', Georgia, serif; }
body[data-fonts="modern"] { --f-title: 'DM Serif Display', Georgia, 'Times New Roman', serif; --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.55; background: radial-gradient(120% 90% at 50% 20%, var(--bg1) 0%, var(--bg2) 62%, var(--bg3) 100%); overflow-x: hidden; }
body.modal { overflow: hidden; }
body[data-texture="linen"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(64, 52, 43, .045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(64, 52, 43, .04) 0 1px, transparent 1px 4px); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(64, 52, 43, .16) 100%); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--btn); color: #F6F0E5; text-decoration: none; font-weight: 600; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- The page ---------- */
/* the card sits in the middle of the screen, across and down, exactly where the envelope was (and the top 60px stay clear for the speaker) */
.stage { position: relative; z-index: 3; width: 100%; max-width: 560px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: max(64px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(64px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; }
body.pv-mobile .stage { max-width: 420px; }
.bar { display: flex; justify-content: flex-end; gap: 8px; min-height: 44px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--soft); background: rgba(246, 240, 229, .8); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: #F6F0E5; }

/* ---------- The card ---------- */
.card { position: relative; isolation: isolate; width: 100%; padding: clamp(40px, 9vw, 64px) clamp(26px, 8vw, 56px) clamp(32px, 6vw, 46px); background: var(--paper); text-align: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 34px 60px -26px rgba(64, 52, 43, .5), 0 10px 22px -8px rgba(64, 52, 43, .22); display: flex; flex-direction: column; align-items: center; }
@media (min-width: 640px) { .card { aspect-ratio: 5 / 7; justify-content: center; } body.pv-mobile .card { aspect-ratio: auto; } }
.paper-tex { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .17 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-texture="plain"] .paper-tex { display: none; }
body[data-texture="linen"] .paper-tex { background-image: repeating-linear-gradient(0deg, rgba(64, 52, 43, .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(64, 52, 43, .05) 0 1px, transparent 1px 3px); opacity: .7; }
.frame { position: absolute; inset: 13px; border: 1px solid var(--accent); pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .6); }
.frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--soft); }
.sprig { position: absolute; width: clamp(66px, 20vw, 108px); height: auto; pointer-events: none; }
.s-tl { top: 6px; left: 6px; } .s-tr { top: 6px; right: 6px; transform: scaleX(-1); } .s-bl { bottom: 6px; left: 6px; transform: scaleY(-1); } .s-br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
body[data-ornaments="off"] .sprig, body[data-ornaments="off"] .vignette { display: none; }
body[data-preset="minimal"] .sprig { opacity: .6; width: clamp(54px, 15vw, 82px); }
body[data-preset="minimal"] .vignette { display: none; }
.sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sheen::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .5), transparent); }
body.shine .sheen::after { animation: sheen 1.8s ease-in-out .15s 1 both; }
@keyframes sheen { to { transform: translateX(300%) skewX(-18deg); } }

.eyebrow { font-family: var(--f-body); font-weight: 600; font-size: clamp(12.5px, 3.2vw, 14px); letter-spacing: .34em; text-transform: uppercase; color: var(--accent-d); }
.title { font-family: var(--f-title); font-weight: 600; font-size: clamp(42px, 12.5vw, 64px); line-height: .98; letter-spacing: -.01em; margin: .3em 0 .12em; text-wrap: balance; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.title em { font-style: italic; font-weight: 500; color: var(--accent-d); }
.subtitle { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(21px, 5.4vw, 26px); color: var(--accent-d); }
.divider { width: min(210px, 56%); height: auto; margin: 14px auto 6px; }
.body { font-weight: 500; max-width: 29em; margin: 8px auto 0; font-size: clamp(16px, 4.3vw, 18px); line-height: 1.62; text-wrap: pretty; }
.det { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; width: 100%; max-width: 410px; margin: 20px auto 6px; text-align: center; }
.det > div { padding: 11px 6px 12px; border-top: 1px solid var(--hair); grid-column: span 1; min-width: 0; }
.det > div.wide { grid-column: 1 / -1; }
.det > div:first-child { border-top: 0; }
.det dt { font-weight: 600; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-d); margin-bottom: 3px; }
.det dd { font-size: clamp(17px, 4.6vw, 19px); line-height: 1.35; overflow-wrap: anywhere; }
.det .small dd { font-size: 16px; }
.det .x { display: block; font-size: 15.5px; color: var(--ink); }
.det .dir { display: block; margin-top: 3px; font-style: italic; font-size: 15px; }
.det a { color: var(--accent-d); font-weight: 600; text-underline-offset: 3px; }
.det .ph { color: var(--accent-d); font-style: italic; opacity: .9; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 18px 0 4px; width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 150px; padding: 0 30px; border: 1px solid var(--btn); border-radius: 3px; background: var(--btn); color: #F6F0E5; font-family: var(--f-body); font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 16px -8px rgba(64, 52, 43, .6); transition: transform .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 20px -8px rgba(64, 52, 43, .6); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--btn); box-shadow: none; }
.btn.ghost:hover { background: rgba(64, 52, 43, .06); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }
.status { font-size: 15px; font-style: italic; color: var(--accent-d); min-height: 22px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.linkish { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent-d); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.closing { max-width: 21em; margin: 10px auto 0; font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(21px, 5.6vw, 25px); line-height: 1.3; text-wrap: balance; }
.vignette { display: flex; justify-content: center; align-items: flex-end; height: 58px; margin: 10px 0 0; gap: 0; }
.vignette .pumpkin { width: 62px; height: auto; margin-right: -6px; } .vignette .pumpkin.sm { width: 42px; margin: 0 0 0 -4px; }
.vignette .wheat { width: 26px; height: auto; align-self: flex-end; margin-bottom: 4px; }
.vignette .wheat.l { transform: rotate(-14deg); margin-right: 4px; } .vignette .wheat.r { transform: rotate(12deg) scaleX(-1); margin-left: 6px; }
.sample { text-align: center; font-size: 14px; font-style: italic; color: var(--accent-d); }

/* the leaves that drift past, behind the card */
#leaves { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lf { position: absolute; top: -40px; left: var(--x); width: var(--s); opacity: 0; animation: drift var(--t) linear var(--d) infinite; }
.lf svg { display: block; width: 100%; height: auto; }
@keyframes drift { 0% { transform: translate3d(0, -6vh, 0) rotate(0); opacity: 0; } 8% { opacity: .55; } 50% { transform: translate3d(var(--w), 52vh, 0) rotate(var(--r)); } 92% { opacity: .5; } 100% { transform: translate3d(calc(var(--w) * -.4), 112vh, 0) rotate(calc(var(--r) * 1.6)); opacity: 0; } }

/* ---------- The opening: the same one the other cards have (public/assets/envelope-card.css). An envelope sits just below the middle of the screen. Tap it: the flap lifts, the card (the REAL card, small,
   behind the front of the envelope) slides all the way out, then it comes to the front, grows to its full size in the middle of the page and the envelope drops away. One card all the way: no copy, no crossfade. ---------- */
body { --ew: min(82vw, 400px, 62vh); --eh: calc(var(--ew) * .66); }
body.intro-on { overflow: hidden; }
.envl { position: fixed; inset: 0; display: none; pointer-events: none; }
body.intro-on .envl { display: block; }
#env-back { z-index: 2; } #env-front { z-index: 4; }
.ev-back, .ev-front { position: absolute; left: 50%; top: 56%; width: var(--ew); height: var(--eh); margin: calc(var(--eh) / -2) 0 0 calc(var(--ew) / -2); perspective: 1200px; }
.ev-front { padding: 0; border: 0; background: none; border-radius: 3px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ev-front:disabled { cursor: default; }
.ev-back .body { position: absolute; inset: 0; border-radius: 3px; background: #CBB68C; box-shadow: 0 24px 46px -16px rgba(64, 52, 43, .5), 0 0 0 1px rgba(156, 128, 82, .5); }
.pocket { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.under { position: absolute; inset: 0; border-radius: 3px; background: #E2D0AB; clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.pocket polygon, .flap polygon { stroke: rgba(156, 128, 82, .6); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pocket .pl { fill: #DAC6A0; } .pocket .pr { fill: #D2BC94; } .pocket .pb { fill: #E2D0AB; }
.flap { position: absolute; left: 0; top: 0; width: 100%; height: 60.6%; overflow: visible; transform-origin: 50% 0; }
.flap.f1 polygon { fill: #E8D8B4; }
.flap.f2 { opacity: 0; transform: rotateX(-90deg); }
.flap.f2 polygon { fill: #D3BD93; }
.seal { position: absolute; z-index: 4; left: 50%; top: 60.6%; width: calc(var(--ew) * .17); height: calc(var(--ew) * .17); margin: calc(var(--ew) * -.085) 0 0 calc(var(--ew) * -.085); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D69A6B, var(--accent-d)); box-shadow: 0 2px 5px rgba(64, 52, 43, .55), inset 0 0 0 3px rgba(255, 235, 210, .25); }
/* what to tap, under the envelope */
.cue { position: absolute; z-index: 6; left: 0; right: 0; top: calc(56% + var(--eh) / 2 + 26px); display: grid; justify-items: center; gap: 8px; padding: 0 20px; text-align: center; transition: opacity .5s ease; pointer-events: auto; }
.i-go .tap-hint { animation: none; opacity: 0; }
.tap-hint { font-size: clamp(13px, 2.6vw, 16px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-d); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* the card: while the envelope plays, the real card sits small in the middle of the envelope (behind its front, so nothing of it shows), the page's other words wait */
body.intro-on .stage { pointer-events: none; }
body.intro-on .stage > :not(#cw) { visibility: hidden; }
#cw { transform-origin: 50% 0; }
body.intro-on #cw { transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(var(--s, .4)); clip-path: inset(0 0 var(--cut, 0%) 0); }
body.intro-on:not(.i-go) .ev-back, body.intro-on:not(.i-go) .ev-front, body.intro-on:not(.i-go) #cw { animation: bob 3.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* the opening */
.i-go .ev-front .f1 { animation: f1flip .45s ease-in forwards; }
.i-go .ev-back .f2 { animation: f2flip .5s ease-out .44s forwards; }
@keyframes f1flip { 0% { transform: rotateX(0); opacity: 1; } 99% { transform: rotateX(-90deg); opacity: 1; } 100% { transform: rotateX(-90deg); opacity: 0; } }
@keyframes f2flip { 0% { transform: rotateX(-90deg); opacity: 1; } 100% { transform: rotateX(-180deg); opacity: 1; } }
.i-go .seal { animation: sealgo .42s ease-in forwards; }
@keyframes sealgo { 35% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(.2) rotate(50deg); opacity: 0; } }
.i-out #cw { animation: cardout 1s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes cardout { from { transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(var(--s, .4)); } to { transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--s, .4)); } }
.i-pop .stage { z-index: 5; }
.i-pop #cw { animation: cardpop 1.25s cubic-bezier(.22, 1.2, .36, 1) forwards; }
@keyframes cardpop { from { transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--s, .4)); clip-path: inset(0 0 var(--cut, 0%) 0); } to { transform: none; clip-path: inset(0 0 0% 0); } }
.i-pop .ev-back, .i-pop .ev-front { animation: envdrop 1.2s cubic-bezier(.55, 0, .9, .6) .1s forwards; }
@keyframes envdrop { to { transform: translateY(90vh) rotate(6deg); opacity: 0; } }

/* ---------- The dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 12px; background: rgba(48, 38, 30, .62); }
.dlg { width: min(480px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--accent); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(40, 30, 22, .7); overflow: auto; overscroll-behavior: contain; outline: none; }
.dlg-in { position: relative; display: grid; gap: 14px; padding: 28px 24px calc(26px + env(safe-area-inset-bottom, 0px)); }
.dlg h2 { font-family: var(--f-title); font-weight: 600; font-size: clamp(30px, 8vw, 38px); line-height: 1.05; text-align: center; padding: 0 28px; }
.dlg .lead { text-align: center; font-size: 16px; opacity: .92; }
.dlg-in > .x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--ink); }
@media (max-width: 560px) { .overlay { place-items: end center; padding: 0; } .dlg { width: 100%; border-radius: 10px 10px 0 0; border-bottom: 0; } }
.field { display: grid; gap: 6px; }
.field label, .flabel, legend { font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 0; }
.field input[type="text"], .field textarea { width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid var(--soft); border-radius: 3px; background: #FFFDF8; color: var(--ink); font-size: 16px; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-d); box-shadow: 0 0 0 3px var(--soft); }
.field .hint, .hint { font-size: 14px; opacity: .8; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: grid; place-items: center; min-height: 52px; padding: 6px 12px; border: 1px solid var(--soft); border-radius: 3px; background: #FFFDF8; font-weight: 600; text-align: center; font-size: 15.5px; }
.choice input:checked + span { background: var(--btn); border-color: var(--btn); color: #F6F0E5; }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.stepper { display: inline-flex; align-items: center; gap: 16px; }
.stepper button { width: 48px; height: 48px; border: 1px solid var(--soft); border-radius: 50%; background: #FFFDF8; font-size: 24px; line-height: 1; }
.stepper output { min-width: 32px; text-align: center; font-family: var(--f-title); font-size: 30px; font-weight: 600; }
.err { padding: 10px 14px; border-radius: 3px; background: rgba(154, 59, 46, .12); border: 1px solid #9A3B2E; color: #6E2A20; font-weight: 600; font-size: 15px; }
.done { display: grid; gap: 12px; justify-items: center; text-align: center; }
.done h3 { font-family: var(--f-title); font-weight: 600; font-size: clamp(26px, 7vw, 32px); line-height: 1.15; margin: 0; }
.dlg .btn { width: 100%; }
.dlg .links { margin-top: 2px; }
/* the shared dish board (packs.js) wears the card's colours */
#pot-dlg { --accent: #D9A878; --cream: #40342B; --muted: #6B5C4D; --line: rgba(64, 52, 43, .3); --chip-bg: rgba(64, 52, 43, .05); --row-bg: rgba(64, 52, 43, .07); --f-bg: #FFFDF8; --f-ink: #40342B; --f-shadow: none; --ok: #3F6030; --bad: #9A3B2E; --accent-d: #8F5B36; --display: var(--f-title); --body: var(--f-body); }
#pot-dlg .db h3 { font-family: var(--f-title); font-size: 26px; }
#pot-dlg .pk-btn { border-radius: 3px; box-shadow: none; background: var(--btn); color: #F6F0E5; }
#pot-dlg .pk-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--soft); }
#pot-dlg .db-tab[aria-selected="true"] { color: #2b1d12; }
#pot-dlg .db-idea[aria-pressed="true"], #pot-dlg .db-list li.mine, #pot-dlg .db-mine { background: rgba(217, 168, 120, .35); }

/* ---------- Sound, and calmer ---------- */
.rm *, .rm *::before, .rm *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.rm #leaves, .rm .envl { display: none !important; }
.rm body.intro-on .rv { opacity: 1; }
.lite #leaves { display: none; }
@media (prefers-reduced-motion: reduce) { #leaves, .envl { display: none !important; } body.intro-on .rv { opacity: 1; } }
@media print { #leaves, .envl, .bar, body::after { display: none !important; } .card { box-shadow: none; } }