@layer site-reset, telify;
@import url("/webapp/lib/cinzel-decorative@v19/cinzel-decorative.css");
@import url("/webapp/lib/cinzel@v26/cinzel.css");
@import url("/webapp/lib/cormorant-garamond@v21/cormorant-garamond.css");
@import url("/webapp/lib/jost@v20/jost.css");
/* how far the card is open (holiday.js): set on each piece that reads it and not passed down, so a frame re-styles those
   few pieces and not the whole cover; the shading layers over the cover and the inside take it from their piece */
@property --open { syntax: "<number>"; inherits: false; initial-value: 0; }
/* the height the tree's camera frames (holiday.js), read off its pin as a length */
@property --seen { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* =====================================================================
   Dana Wilcher's Holiday Gift Portrait Bundle: a Christmas card in landing page form (Gabriel 2026-10-30), after a
   Victorian Christmas book cover: a deep green damask ground, gold acanthus scrollwork, red panels, a holly wreath
   around gold capitals, bells, hanging ornaments, a lit village. Cream "inside of the card" pages between.

   Built from its confirmed drawing, docs/mockups/telify-web/dana-wilcher/holiday/page.css (card
   dana-holiday-gift-packages). The page's only stylesheet besides the kit's: it loads her fonts itself and sets her
   signature, since her site.css is not on this page.

   Nothing waits hidden for the motion unless holiday.js has finished setting up and motion is allowed: it marks the
   page .hg-run, then .hg-move when the visitor hasn't asked for reduced motion. Without them the page stands still and
   whole (every layer standing, the ribbon drawn, the windows lit), so a blocked script costs only the motion.
   ===================================================================== */

:root {
  --pine: #16382A; --pine-2: #1F4D37; --pine-deep: #0D2419;
  --gold: #D9B46B; --gold-hi: #F3DCA0; --gold-lo: #A9843F; --gold-line: rgba(217, 180, 107, .55);
  --holly: #B0222C; --berry: #7D141C;
  --paper: #F5ECD9; --paper-hi: #FBF5E8; --ink: #2B2018; --ink-2: #5A4636;
  --display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --caps: 'Cinzel', Georgia, serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  /* the green ground: the damask (img/holiday/pattern.svg) over a lit pine */
  --ground: url("/img/holiday/pattern.ab50be1ddf83.svg") center top / 120px 168px, var(--pine);
  --gilt: linear-gradient(100deg, #A9843F 0%, #D9B46B 22%, #F3DCA0 40%, #FFF3CF 50%, #F3DCA0 60%, #D9B46B 78%, #A9843F 100%);
  color-scheme: dark;
  --sig-mask: url("/img/site/signature.b1431a8772b7.png");
  /* her values for Telify's tokens, as site.css gives them on her other pages, for Telify's own windows here (her
     messages, the sign-in) */
  --font-body: var(--sans); --font-display: 'Cormorant Garamond', Georgia, serif;
  --bg-page: #2A211C; --bg-page-rgb: 42, 33, 28; --bg-card-2: #3A2E26; --fg-page-rgb: 239, 231, 214;
  --text-primary: #F8F3EA; --text-secondary: rgba(239, 231, 214, 0.74); --text-tertiary: rgba(239, 231, 214, 0.56); --text-muted: rgba(239, 231, 214, 0.38);
  --accent: #E6D4A6; --accent-rgb: 230, 212, 166; --accent-hot: #F3E3BC; --text-on-accent: #2A211C;
  --accent-light: #F3E3BC; --accent-light-rgb: 243, 227, 188; --accent-deep: #BB9468; --accent-deep-rgb: 187, 148, 104;
  --border-soft: rgba(187, 148, 104, 0.24); --border-subtle: rgba(187, 148, 104, 0.13);
  --danger: #E28A8D; --danger-rgb: 226, 138, 141;
  --glass-bg: rgba(58, 46, 38, 0.72); --glass-bg-strong: rgba(30, 24, 20, 0.94); --glass-blur: blur(18px) saturate(1.2); --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --chevron-color: rgba(239, 231, 214, 0.4);
  --r-ctl: 999px;
}

@layer site-reset {
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--pine-deep); color: var(--paper); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  main { overflow-x: clip; }
  img { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button { font: inherit; }
  a { color: inherit; }
}
@media (prefers-reduced-motion: no-preference) { @layer site-reset { html { scroll-behavior: smooth; } } }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; position: relative; }
.hg-h2 { font: 600 clamp(30px, 3.4vw, 46px)/1.12 var(--caps); letter-spacing: .05em; text-align: center; text-transform: uppercase; color: var(--gold-hi); }
.hg-h2::first-letter { font-size: 1.22em; }
.hg-paper .hg-h2, .hg-list .hg-h2, .hg-claim .hg-h2 { color: var(--berry); }
.hg-h2.left { text-align: left; }
.hg-h3 { font: 600 19px/1.3 var(--caps); letter-spacing: .03em; color: var(--berry); }
.hg-script { font: italic 500 clamp(32px, 3.3vw, 44px)/1.12 var(--serif); color: var(--berry); }
.hg-i { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; color: var(--holly); }
.hg-flour { display: block; width: min(300px, 80%); height: auto; aspect-ratio: 436 / 90; margin: 10px auto 0; overflow: visible; }
.hg-flour.left { margin-left: -20px; }
.hg-div { display: block; width: 230px; height: auto; aspect-ratio: 435 / 89; margin: 0 auto 12px; overflow: visible; }

/* the fine gold corners of every cream card */
.fc { position: absolute; z-index: 1; width: 64px; height: 64px; color: var(--gold-lo); pointer-events: none; overflow: visible; }
.fc.tl { left: 10px; top: 10px; }
.fc.tr { right: 10px; top: 10px; transform: scaleX(-1); }
.fc.bl { left: 10px; bottom: 10px; transform: scaleY(-1); }
.fc.br { right: 10px; bottom: 10px; transform: scale(-1); }

/* ---------- buttons: one red action everywhere, one quiet gold question ---------- */
.hg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; border: 1px solid var(--gold-hi); border-radius: 3px; background: linear-gradient(180deg, #C8343D, #8E1A22); color: #FFF7E6; font: 600 15px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 3px #8E1A22, inset 0 0 0 4px rgba(243, 220, 160, .55), 0 12px 26px -10px rgba(0, 0, 0, .55); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.hg-btn::after, .hg-form [data-part="send"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, .35) 50%, transparent 65%); transform: translateX(-120%); }
.hg-btn:active { transform: scale(.98); }
.hg-btn-q { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 1px solid var(--gold-line); border-radius: 3px; background: rgba(13, 36, 25, .45); color: var(--gold-hi); font: 500 15px/1.2 var(--sans); letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hg-btn-q svg { width: 20px; height: 20px; flex: none; }
.hg-btn-q:disabled { opacity: .6; cursor: default; }
/* the kit draws the button in a frame of its own inside the placeholder: the frame takes the button's width, as in a
   header row, so the two buttons stand side by side as drawn */
.hg-q { display: contents; }
.hg-q > [data-telify-frame] { inline-size: auto; container-type: normal; }
/* the kit draws the cover's Ask button a moment after the page: its place is held until then, so Claim a Spot and the
   words under it never jump when it lands (walk 2026-11-01) */
.hg-cover .hg-q:empty { display: block; inline-size: 300px; min-block-size: 54px; }
.hg-q-error { margin-top: 8px; font: 400 14px/1.45 var(--sans); color: #F3B4B6; text-align: center; }
.hg-claim .hg-q-error { color: var(--holly); }
:root.hg-move :is(.hg-btn, .hg-form [data-part="send"]:not([data-state="soldOut"]))::after { animation: hg-shine 5.5s 2s infinite; }
@keyframes hg-shine { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- her signature, in gold ---------- */
.hg-top { position: relative; z-index: 5; display: grid; place-items: center; height: 64px; background: var(--pine-deep); border-bottom: 1px solid var(--gold-line); }
.hg-sig-link { display: block; padding: 6px 12px; }
.hg-sig { display: block; width: 150px; height: 44px; background: linear-gradient(100deg, #A9843F, #F3DCA0 45%, #D9B46B 62%, #A9843F); -webkit-mask: var(--sig-mask) center / contain no-repeat; mask: var(--sig-mask) center / contain no-repeat; }

.hg-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.hg-cover .hg-snow { z-index: 2; }

/* =====================================================================
   1. The cover. On a computer it opens like a card as the visitor scrolls (holiday.js sets --open from 0 to 1 on the
   book): the cover lifts toward them on its left edge and turns over, and the inside is under it.
   ===================================================================== */
.hg-book { --bh: max(100svh, 1210px); position: relative; }
.hg-book-in { position: relative; }
.hg-leaf { position: relative; z-index: 2; }

.hg-cover { position: relative; isolation: isolate; display: grid; align-content: center; min-height: var(--bh); padding: 120px 0 290px; background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(46, 100, 70, .55), transparent 72%), var(--ground); overflow: hidden; }
.hg-cover > .hg-shade { position: absolute; inset: 0; z-index: 6; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)); opacity: calc(var(--open, 0) * 1.3); pointer-events: none; }
.hg-cover-shadow { display: none; }

/* the frame: two rails on each side that run out of the four corner panels, at the offsets the art draws them
   (art.cjs: the outer rail 2 wide centered 4 in, the inner 1 wide centered 12.5 in); the arch's scrollwork hangs from
   the inner top rail, and the side scrolls and the candy pillars stand centered on the side rails. --fs scales the
   whole frame down on phones; --as sizes the arch on its own, so it fits between the corners and the ornaments */
.hg-frame { --fs: 1; --as: var(--fs); --c: calc(180px * var(--fs)); position: absolute; inset: 14px; z-index: 1; pointer-events: none; }
/* its two lines, each one unbroken square (Gabriel 2026-11-01: "make it one continuous line all the way around"), under
   the corners, the arch and the pillars: outer 2 wide, inner 1 */
.hg-frame::before, .hg-frame::after { content: ""; position: absolute; z-index: -1; border: solid #D9B46B; }
.hg-frame::before { inset: calc(3px * var(--fs)); border-width: calc(2px * var(--fs)); }
.hg-frame::after { inset: calc(12px * var(--fs)); border-width: 1px; opacity: .8; }
.hg-frame .c { position: absolute; width: var(--c); height: var(--c); overflow: visible; }
.hg-frame .c.tl { left: 0; top: 0; }
.hg-frame .c.tr { right: 0; top: 0; transform: scaleX(-1); }
.hg-frame .c.bl { left: 0; bottom: 0; transform: scaleY(-1); }
.hg-frame .c.br { right: 0; bottom: 0; transform: scale(-1); }
.hg-frame .arch { position: absolute; left: 50%; top: calc(12.5px * var(--fs) - 12px * var(--as)); width: calc(520px * var(--as)); height: calc(114px * var(--as)); margin-left: calc(-260px * var(--as)); overflow: visible; }
.hg-frame .pillar { position: absolute; top: 50%; width: calc(52px * var(--fs)); height: calc(307px * var(--fs)); margin-top: calc(-153px * var(--fs)); overflow: visible; }
.hg-frame .pillar.l { left: calc(-17.75px * var(--fs)); }
.hg-frame .pillar.r { right: calc(-17.75px * var(--fs)); }

/* the bells under the arch, and the ornaments hanging from the top rule */
/* the bells sit over the cover's words and wreath so a click reaches them, and only their painted parts take it, so
   their empty box never covers anything (walk 2026-11-01) */
.hg-bells { position: absolute; top: 16px; left: 50%; z-index: 4; width: 210px; margin-left: -105px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 4px; -webkit-tap-highlight-color: transparent; pointer-events: none; }
.hg-bells svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.hg-bells svg > * { pointer-events: visiblePainted; }
.hg-bells .bell { transform-box: fill-box; transform-origin: 50% 0; }
.hg-hang { position: absolute; top: 18px; z-index: 2; display: flex; gap: 40px; align-items: flex-start; }
.hg-hang.l { left: 196px; }
.hg-hang.r { right: 196px; }
.hg-hang .h { position: relative; display: block; width: 52px; padding-top: var(--len); transform-origin: 50% 0; }
.hg-hang .h::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--len) + 4px); background: linear-gradient(var(--gold-lo), var(--gold)); }
.hg-hang .h svg { display: block; width: 52px; height: 64px; overflow: visible; }
.hg-hang .h.f svg { width: 34px; height: 87px; margin-inline: auto; }

.hg-cover-in { position: relative; z-index: 3; width: min(1180px, 100% - 140px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.hg-cover-words { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

/* the wreath, drawn by art.cjs, around her title in gold capitals */
.hg-wreath { position: relative; width: min(480px, 100%); aspect-ratio: 520 / 560; }
.hg-wreath > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hg-wreath .sp, .hg-wreath .lf { transform-box: fill-box; transform-origin: center; }
.hg-wreath .bow { transform-box: fill-box; transform-origin: 50% 20%; }
.hg-wreath .wb { transform-box: fill-box; transform-origin: 50% 0; }

.hg-wreath h1 { position: absolute; inset: 19% 15.5% 27%; display: grid; place-items: center; }
.hg-lettering { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 1px rgba(10, 30, 20, .6)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hg-tagline { margin-top: -22px; max-width: 600px; font: italic 500 clamp(24px, 2.1vw, 29px)/1.25 var(--serif); color: var(--gold-hi); }
.hg-cover-words .hg-flour { width: 220px; }
.hg-lead { margin-top: 4px; max-width: 620px; font: 500 18.5px/1.55 var(--serif); color: rgba(245, 236, 217, .9); }
.hg-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin-top: 20px; padding: 10px 22px; border-block: 1px solid var(--gold-line); font: 500 14.5px/1.4 var(--sans); letter-spacing: .03em; color: var(--paper); }
.hg-facts .price { font: 700 22px/1 var(--caps); color: var(--gold-hi); letter-spacing: .04em; }
.hg-facts i { display: inline-grid; color: var(--gold); }
.hg-facts i svg { width: 12px; height: 12px; }
.hg-facts.dark { color: var(--ink); border-color: rgba(169, 132, 63, .5); }
.hg-facts.dark .price { color: var(--holly); }
.hg-acts { order: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }
.hg-cover-words .hg-lead { order: 7; max-width: 520px; margin-top: 22px; }

.hg-cover-pic { position: relative; justify-self: center; width: min(500px, 100%); }
.hg-cover-pic::before { content: ""; position: absolute; inset: 6% 2%; border-radius: 50%; background: radial-gradient(circle, rgba(243, 220, 160, .26), transparent 68%); filter: blur(12px); }
.hg-cover-pic img { position: relative; width: 100%; transform: rotate(-2.5deg); filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .55)); }
.hg-cover-pic .sp { position: absolute; width: 22px; height: 22px; color: var(--gold-hi); overflow: visible; }
.hg-cover-pic .s1 { left: 4%; top: 14%; }
.hg-cover-pic .s2 { right: 6%; top: 4%; width: 30px; height: 30px; }
.hg-cover-pic .s3 { right: 0; bottom: 22%; width: 16px; height: 16px; }

/* the village along the foot, and the red panel with her name on it */
.hg-town { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 210px; pointer-events: none; }
.hg-village { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hg-village .glass { fill: #FFAA2E; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .95)); }
/* on a computer the village stands between the bottom corners (the frame's 14px, the red reaching 156px into its 180,
   and a gap), drawn whole at that width, so neither it nor its ground line crosses the red or the frame's lines */
.hg-cover .hg-town { bottom: 84px; left: 186px; right: 186px; height: 190px; container-type: inline-size; }
.hg-cover .hg-village { inset: auto 0 0; height: auto; aspect-ratio: 1220 / 210; }
.hg-village .chsmoke { stroke-dasharray: .35 .65; stroke-dashoffset: 0; }
/* each star twinkles on its own spot: without its own box it grew from the village's corner and slid across the sky */
.hg-village .tw { transform-box: fill-box; transform-origin: center; }
/* sized to the village on a computer (340 by 64, 15px words, where the village is 1068 wide), so on a narrow one it
   keeps to its proportion and leaves the tree standing */
.hg-basepanel { position: absolute; left: 50%; bottom: 1.31cqw; z-index: 3; width: 31.8cqw; height: 6cqw; margin-left: -15.9cqw; display: grid; place-items: center; }
.hg-basepanel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hg-basepanel span { position: relative; padding-top: 2px; font: 600 1.4cqw/1 var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-hi); }
.hg-open-hint { display: none; }


/* =====================================================================
   2. The inside of the card: the reference photo beside the painting, and "that one person"
   ===================================================================== */
.hg-inside { position: relative; z-index: 1; display: grid; align-content: center; padding: clamp(84px, 9vw, 120px) 0; background: radial-gradient(ellipse 70% 70% at 55% 45%, var(--paper-hi), transparent 75%), var(--paper); color: var(--ink); box-shadow: inset 0 0 0 22px var(--paper), inset 0 0 0 23px var(--gold-line), inset 0 0 0 28px var(--paper), inset 0 0 0 29px rgba(169, 132, 63, .3); }
.hg-inside > .fc { top: 36px; bottom: auto; width: 72px; height: 72px; }
.hg-inside > .fc.bl, .hg-inside > .fc.br { top: auto; bottom: 36px; }
.hg-inside > .fc.tl, .hg-inside > .fc.bl { left: 36px; }
.hg-inside > .fc.tr, .hg-inside > .fc.br { right: 36px; }
.hg-inside::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, rgba(90, 60, 30, .22), transparent); pointer-events: none; }
.hg-inside-in { width: min(1160px, 100% - 120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.hg-pair { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; }
.hg-pair .pic { position: relative; display: grid; gap: 12px; justify-items: center; }
.hg-pair img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; object-position: 50% 30%; padding: 9px; background: #fff; border: 1px solid rgba(169, 132, 63, .7); box-shadow: 0 0 0 5px var(--paper-hi), 0 0 0 6px var(--gold-line), 0 26px 40px -18px rgba(60, 40, 20, .6); }
.hg-pair .pic:first-child img { transform: rotate(-2.5deg); }
.hg-pair .pic:last-child img { transform: rotate(2.5deg); }
.hg-pair .cap { font: 600 12.5px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--berry); }
.hg-arrow { width: 100%; overflow: visible; color: var(--gold-lo); }
.hg-arrow path { fill: none; stroke: var(--gold-lo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hg-one .hg-div { margin-left: -10px; }
.hg-one p { margin-top: 16px; font: 500 19.5px/1.6 var(--serif); color: var(--ink-2); }
.hg-one .hg-love { font: italic 600 23px/1.4 var(--serif); color: var(--holly); }
.hg-turn { display: none; }

@media (min-width: 1000px) {
  :root.hg-move .hg-book { height: calc(var(--bh) + 140svh); }
  :root.hg-move .hg-book-in { position: sticky; top: min(0px, calc(100svh - var(--bh))); height: var(--bh); perspective: 3600px; perspective-origin: 50% 0%; overflow: clip; }
  :root.hg-move .hg-leaf { position: absolute; inset: 0; transform-origin: 50% 0; transform: rotateX(calc(var(--open, 0) * 104deg)); backface-visibility: hidden; will-change: transform; }
  :root.hg-move .hg-cover { height: 100%; }
  :root.hg-move .hg-inside { position: absolute; inset: 0; padding: calc(var(--bh) - 100svh) 0 0; }
  :root.hg-move .hg-inside > .hg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 6, .6), rgba(20, 12, 6, .12)); opacity: calc(1 - var(--open, 0) * 1.5); pointer-events: none; }
  :root.hg-move .hg-open-hint { display: grid; justify-items: center; gap: 4px; position: absolute; right: 230px; bottom: 30px; z-index: 5; width: 200px; font: 600 12px/1 var(--caps); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); opacity: calc(1 - var(--open, 0) * 6); }
  :root.hg-move .hg-open-hint::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); animation: hg-nudge 1.8s ease-in-out infinite; }
}
@keyframes hg-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }


/* =====================================================================
   3. The moment they open it: a pop-up card. The stage is the open card seen from above: its back half standing,
   its front half lying flat. Each piece is hinged at its foot (holiday.js sets --r from 0, lying flat, to 1, standing)
   ===================================================================== */
.hg-moment { position: relative; isolation: isolate; padding: clamp(90px, 9vw, 120px) 0; background: var(--ground); }
.hg-moment .hg-snow { z-index: 0; }
.hg-pop-stick { position: relative; z-index: 1; width: min(1180px, 100% - 48px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 56px; align-items: center; }
.hg-pop-stick > .hg-h2, .hg-pop-stick > .hg-flour { grid-column: 1 / -1; }
/* the opening: a 640 x 520 stage. Every piece rests where the finished arrangement has it, so a still page shows the
   gift opened and laid out; holiday.js moves each piece there along its own path (inline transform from data-kf) and
   sets the stage's progress values: --fl the flap, --sc and --so the scent, --rb the ribbon, --uw the tissue, --gl the
   painting's glow, --co the card's cover, --pf the pressed flowers, --fin the last warm light; --w on each line of
   the note */
.hg-unbox { position: relative; height: 520px; zoom: .92; }
.hg-unbox .stage { position: absolute; left: 50%; top: 0; width: 640px; height: 520px; margin-left: -320px; }
.hg-unbox .light { position: absolute; inset: -8% -12%; background: radial-gradient(ellipse 50% 46% at 50% 58%, rgba(255, 214, 150, .24), transparent 70%); opacity: calc(.5 + var(--fin, 1) * .5); }
.hg-unbox .ub { position: absolute; z-index: 4; }
/* the mailer: deep red bubble wrap, a sealed seam along the foot, its flap folded over the top until it opens up and
   back toward the visitor, showing the inside of the flap and its peeled seal strip */
.hg-unbox .mailer { position: absolute; z-index: 2; left: 150px; top: 262px; width: 340px; height: 226px; transform: rotate(-4deg); }
.hg-unbox .face { position: absolute; inset: 0; border-radius: 7px; background: url("/img/holiday/mailer-surface.df6957bb1070.webp") center / 380px auto, #8E1A2E; box-shadow: 0 20px 30px -14px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -12px 18px -10px rgba(0, 0, 0, .45), inset 0 12px 16px -10px rgba(255, 255, 255, .12); }
.hg-unbox .face::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 8px; border-radius: 7px 7px 0 0; background: linear-gradient(rgba(25, 0, 8, .8), transparent); opacity: var(--fl, 1); }
.hg-unbox .seam { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 7px 7px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, rgba(255, 255, 255, .07) 2px 5px), linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .3)); }
.hg-unbox .tag { position: absolute; left: 90px; top: 88px; display: grid; justify-items: center; gap: 3px; width: 160px; padding: 14px 10px 15px; transform: rotate(3deg); background: #FFFDF7; color: var(--ink); text-align: center; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .45); }
.hg-unbox .tag::before { content: ""; position: absolute; left: 50%; top: -9px; width: 62px; height: 18px; margin-left: -31px; background: rgba(226, 194, 127, .78); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.hg-unbox .tag b { font: 700 13px/1.1 var(--caps); letter-spacing: .06em; text-transform: uppercase; color: var(--holly); }
.hg-unbox .tag span { font: italic 500 14.5px/1.2 var(--serif); }
.hg-unbox .tag .nh { position: absolute; right: -10px; top: -10px; width: 30px; height: 26px; overflow: visible; }
.hg-unbox .flapw { z-index: 0; }
.hg-unbox .flap { position: absolute; left: 0; right: 0; top: 0; height: 58px; transform-origin: 50% 0; transform-style: preserve-3d; transform: perspective(700px) rotateX(calc(var(--fl, 1) * 172deg)); }
.hg-unbox .flap i { position: absolute; inset: 0; border-radius: 0 0 9px 9px; backface-visibility: hidden; }
.hg-unbox .flap .out { background: url("/img/holiday/mailer-surface.df6957bb1070.webp") center top / 380px auto, #8E1A2E; filter: brightness(.88); box-shadow: 0 6px 8px -4px rgba(0, 0, 0, .5), inset 0 -2px 3px rgba(255, 255, 255, .12); }
.hg-unbox .flap .in { transform: rotateX(180deg); background: linear-gradient(#F4EEE2, #E6DDCB) center calc(100% - 9px) / 90% 16px no-repeat, url("/img/holiday/mailer-surface.df6957bb1070.webp") center bottom / 380px auto, #6E1424; filter: brightness(.8); }
/* the scent that rises out of the opening */
.hg-unbox .scent { position: absolute; z-index: 3; left: 226px; top: 80px; width: 190px; height: 200px; overflow: visible; opacity: 0; filter: blur(2.2px); }
/* the parcel: tissue paper around the painting, tied with a red ribbon; the ribbon slips off, the tissue's two leaves
   swing open, and the painting glows with the colors behind its sitter */
.hg-unbox .parcel { left: 54px; top: 66px; width: 196px; height: 250px; transform: rotate(-5deg); }
.hg-unbox .bed { position: absolute; left: -30px; top: -26px; width: 264px; height: 300px; overflow: visible; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); }
.hg-unbox .glow { position: absolute; inset: -30% -36%; background: radial-gradient(circle, rgba(255, 206, 128, .8), transparent 60%); opacity: var(--gl, 1); }
.hg-unbox .painting { position: absolute; inset: 0; background: #FFF; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .5); }
.hg-unbox .painting img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hg-unbox .painting::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.hg-unbox .leaf { position: absolute; top: -6px; width: 62%; height: calc(100% + 12px); overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2)); opacity: clamp(0, calc((1 - var(--uw, 1)) * 3), 1); }
.hg-unbox .leaf.l { left: -4%; transform-origin: 0 50%; transform: perspective(600px) rotateY(calc(var(--uw, 1) * -118deg)); }
.hg-unbox .leaf.r { right: -4%; transform-origin: 100% 50%; transform: perspective(600px) rotateY(calc(var(--uw, 1) * 118deg)); }
.hg-unbox .ribbon { position: absolute; inset: 0; opacity: calc(1 - var(--rb, 1)); }
.hg-unbox .ribbon i { position: absolute; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.hg-unbox .ribbon .v { left: 50%; top: -6px; bottom: -6px; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #7A141C, #B42A33 40%, #D0454D 50%, #B42A33 60%, #7A141C); transform: scaleY(calc(1 - var(--rb, 1))); }
.hg-unbox .ribbon .h { left: -6px; right: -6px; top: 46%; height: 14px; background: linear-gradient(#7A141C, #B42A33 40%, #D0454D 50%, #B42A33 60%, #7A141C); transform: scaleX(calc(1 - var(--rb, 1))); }
.hg-unbox .ribbon .bow { position: absolute; left: 50%; top: 46%; width: 92px; height: 76px; margin: -34px 0 0 -46px; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); transform: translateY(calc(var(--rb, 1) * 46px)) rotate(calc(var(--rb, 1) * 28deg)); }
/* the card: its cover opens on its left edge; the pressed flowers tucked inside slide out below it, and the note
   writes itself in, line by line */
.hg-unbox .card { left: 452px; top: 84px; width: 126px; height: 184px; transform: rotate(4deg); }
.hg-unbox .page { position: absolute; inset: 0; background: #FFFDF7; border: 1px solid #E6DAC2; box-shadow: 0 10px 16px -8px rgba(0, 0, 0, .45); }
.hg-unbox .note { position: absolute; left: 12px; right: 10px; top: 20px; display: grid; gap: 3px; margin: 0; font: italic 500 12.5px/1.25 var(--serif); color: #3A2A1F; }
.hg-unbox .note span { clip-path: inset(-4px calc((1 - var(--w, 1)) * 100%) -4px 0); }
.hg-unbox .note .sig { justify-self: end; margin-top: 8px; font-size: 17px; }
.hg-unbox .pf { position: absolute; z-index: 1; overflow: visible; transform: translate(calc((1 - var(--pf, 1)) * var(--dx)), calc((1 - var(--pf, 1)) * var(--dy))) rotate(var(--r0)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.hg-unbox .cover { position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transform: perspective(800px) rotateY(calc(var(--co, 1) * -160deg)); }
.hg-unbox .cover > * { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.hg-unbox .cover .front { object-fit: cover; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .45); }
.hg-unbox .cover .back { transform: rotateY(180deg); background: #F7F0E1; border: 1px solid #E6DAC2; }
/* the incense, laid across the front once it is out */
.hg-unbox .incense { left: 112px; top: 300px; width: 40px; height: 190px; transform: rotate(-64deg); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.hg-unbox .incense svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the petals spill out over everything */
.hg-unbox .petals { position: absolute; inset: 0; z-index: 5; }
.hg-unbox .pt { position: absolute; overflow: visible; transform: rotate(var(--r0)); filter: drop-shadow(0 2px 2px rgba(40, 0, 10, .35)); }
.hg-unbox .spark { position: absolute; z-index: 6; width: 18px; height: 18px; color: var(--gold-hi); overflow: visible; opacity: var(--fin, 1); }
.hg-unbox .s1 { left: 22px; top: 52px; }
.hg-unbox .s2 { left: 270px; top: 70px; width: 14px; height: 14px; }
.hg-unbox .s3 { left: 598px; top: 64px; width: 24px; height: 24px; }
:root.hg-move .hg-unbox .scent { opacity: calc(var(--so, 0) * .75); transform: translateY(calc((1 - var(--sc, 0)) * 34px)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sc, 0)); }

/* the words: all five, as a list; while it moves, a column that rolls by as the visitor scrolls, the line being read in full light */
.hg-pop-words { display: grid; gap: 22px; }
.hg-pop-words li { font: italic 500 clamp(22px, 1.9vw, 27px)/1.45 var(--serif); color: rgba(245, 236, 217, .92); }
.hg-pop-words li.last { font: 600 clamp(22px, 2vw, 28px)/1.4 var(--serif); color: var(--gold-hi); font-style: normal; }
:root.hg-move .hg-pop-track { height: 520svh; }
:root.hg-move .hg-pop-stick { position: sticky; top: 0; height: 100svh; align-content: center; }
:root.hg-move .hg-moment { padding: 0; }
:root.hg-move .hg-pop-words { position: relative; display: block; height: 420px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
:root.hg-move .hg-pop-words li { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--d, 0) * 170px)); opacity: var(--o, 1); }

/* =====================================================================
   The cream pages: scalloped top and bottom edges, gold corners
   ===================================================================== */
.hg-paper { position: relative; padding: clamp(92px, 9vw, 132px) 0; background: radial-gradient(ellipse 70% 60% at 50% 30%, var(--paper-hi), transparent 75%), var(--paper); color: var(--ink); }
.hg-paper::before, .hg-paper::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 11px 0, var(--pine) 10px, transparent 10.5px) 0 0 / 22px 12px repeat-x; }
/* the scallops are the pine of the green sections on either side (Gabriel 2026-10-31), so they read as that ground biting in */
.hg-paper::before { top: 0; }
.hg-paper::after { bottom: 0; transform: scaleY(-1); }
.hg-paper > .fc { top: 22px; bottom: auto; }
.hg-paper > .fc.bl, .hg-paper > .fc.br { top: auto; bottom: 22px; }
.hg-paper > .fc.tl, .hg-paper > .fc.bl { left: 22px; }
.hg-paper > .fc.tr, .hg-paper > .fc.br { right: 22px; }

/* 4. What arrives */
.hg-ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hg-collage { position: relative; }
.hg-collage .main { position: relative; width: 92%; margin: 0 auto; filter: drop-shadow(0 26px 26px rgba(60, 30, 20, .35)); transform: rotate(-3deg); }
.hg-collage .main img { display: block; width: 100%; height: auto; }
/* the pressed flowers lie flat on the card, each with the faint shadow of a thing pressed onto paper */
.hg-collage .pf-on { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .9; filter: drop-shadow(0 1px 1.5px rgba(60, 30, 20, .35)); }
.hg-ar-lead { margin-top: 18px; font: italic 500 22px/1.4 var(--serif); color: var(--ink-2); }
.hg-items { display: grid; gap: 14px; margin-top: 20px; }
.hg-items li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font: 500 19.5px/1.45 var(--serif); color: var(--ink); }
.hg-items svg { width: 34px; height: 34px; color: var(--holly); overflow: visible; }
.hg-small { margin-top: 20px; font: 400 15px/1.6 var(--sans); color: var(--ink-2); }
.hg-price { display: flex; align-items: center; gap: 10px; margin: 24px 0 22px; }
.hg-price p { font: 500 20px/1.3 var(--serif); color: var(--ink-2); }
.hg-price b { font: 700 46px/1 var(--display); color: var(--holly); }
.hg-price .br { width: 30px; height: 60px; flex: none; color: var(--gold-lo); overflow: visible; }
.hg-price .br.r { transform: scaleX(-1); }

/* 5. Her portraits on the garland: each sways on its hook with the speed of the scroll (holiday.js sets --sw) */
.hg-gallery { position: relative; padding: clamp(92px, 9vw, 130px) 0 clamp(100px, 10vw, 140px); background: var(--ground); }
.hg-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1280px, 100% - 24px); margin: 40px auto 0; }
.hg-row { position: relative; }
.hg-row .garl { position: relative; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 600 / 110; }
.hg-hung { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -10.4%; }
.hg-hung li { --len: 34px; position: relative; padding: var(--len) 8% 0; transform-origin: 50% 0; transform: rotate(var(--sw, 0deg)); }
.hg-hung li:nth-child(2) { --len: 64px; }
.hg-hung li:nth-child(3) { --len: 44px; }
.hg-hung li::before { content: ""; position: absolute; left: 50%; top: 0; width: 26%; height: calc(var(--len) + 12px); transform: translateX(-50%); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--gold) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), var(--gold) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.hg-hung li::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--gold); background: var(--pine); }
.hg-hung figure { position: relative; padding: 9px; background: linear-gradient(135deg, #F3DCA0, #A9843F 30%, #F3DCA0 52%, #8E6A2C 78%, #D9B46B); box-shadow: 0 24px 30px -14px rgba(0, 0, 0, .75); }
.hg-hung figure::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(110, 80, 30, .6); pointer-events: none; }
.hg-hung img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }

/* 6. Two ways to give, as gift tags on twine: they spin on the twine as they come into view and settle */
.hg-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); width: min(940px, 100%); margin: 96px auto 0; perspective: 1200px; }
.hg-tag { position: relative; transform-origin: 50% -80px; }
.hg-tag:nth-child(1) { rotate: -1.6deg; }
.hg-tag:nth-child(2) { rotate: 1.4deg; }
.hg-tag .twine { position: absolute; left: 50%; bottom: calc(100% - 26px); width: 60px; height: 96px; margin-left: -30px; overflow: visible; }
.hg-tag .body { position: relative; padding: 64px 40px 40px; text-align: center; background: var(--paper-hi); border: 1px solid rgba(169, 132, 63, .55); border-radius: 46px 46px 6px 6px / 30px 30px 6px 6px; box-shadow: 0 26px 40px -24px rgba(60, 40, 20, .5); }
.hg-tag .body::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(169, 132, 63, .5); border-radius: 40px 40px 4px 4px / 26px 26px 4px 4px; pointer-events: none; }
.hg-tag .hole { position: absolute; left: 50%; top: 18px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 3px var(--gold); }
.hg-tag .fc { width: 44px; height: 44px; top: 14px; }
.hg-tag .fc.tl { left: 14px; }
.hg-tag .fc.tr { right: 14px; }
.hg-tag h3 { font: 600 clamp(20px, 2vw, 24px)/1.3 var(--caps); color: var(--holly); }
.hg-tag p { margin-top: 14px; font: 500 19px/1.55 var(--serif); color: var(--ink-2); }
.hg-tag .holly { display: block; width: 160px; height: 30px; margin: 20px auto 0; overflow: visible; }

/* 7. A little about me: her letter, sealed */
.hg-about { padding: clamp(92px, 9vw, 130px) 0; background: radial-gradient(ellipse 40% 50% at 30% 50%, rgba(255, 170, 100, .14), transparent 70%), var(--ground); }
.hg-ab-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hg-ab-pic { position: relative; padding: 14px; background: var(--paper-hi); transform: rotate(-3deg); box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .7); }
.hg-ab-pic .fc { width: 40px; height: 40px; }
.hg-ab-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hg-letter { position: relative; padding: 56px clamp(26px, 4.5vw, 60px) 48px; background: var(--paper-hi); color: var(--ink); transform: rotate(.8deg); border: 1px solid rgba(169, 132, 63, .5); outline: 1px solid rgba(169, 132, 63, .3); outline-offset: -10px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .65); }
.hg-letter p { margin-top: 16px; font: 500 19.5px/1.6 var(--serif); color: var(--ink-2); }
/* her signature in its colors from her site (sites/dana/css/site.css --sig-crimson); her site only sets it on dark
   grounds, so on the paper a thin ink edge keeps its pale middle readable */
.hg-sig-pen { display: block; width: 210px; margin-top: 18px; filter: drop-shadow(0 .6px .4px rgba(110, 40, 30, .7)); }
.hg-sig.red { width: 210px; height: 66px; background: linear-gradient(100deg, #A8323A 0%, #D0644F 22%, #E6C08C 44%, #F3E3BC 52%, #D9A06A 64%, #B8454A 82%, #8E2A33 100%); }
.hg-seal { position: absolute; right: clamp(20px, 4vw, 48px); bottom: 30px; width: 92px; height: 92px; overflow: visible; filter: drop-shadow(0 6px 6px rgba(80, 10, 15, .35)); }

/* 8. How it works: the tree. A 1800 x 3500 scene: the drawn pine (img/tree.webp, from tree.cjs), its lights
   (art/lights.svg: the wire, and each bulb and its glow with --l, how far along the wire it hangs), the star with the
   heading on its banner, the four porcelain ornaments, and under the tree the gifts and the red mailer with step V on
   its label. Still, the scene stands at full size down the middle of the page, dressed and lit. Moving, holiday.js
   pins it to the screen and moves a camera over it: --lay on the lights is how much of the wire is laid, --lit on
   the star how far it is lit, and each ornament's own transform brings it in */
.hg-how { overflow: clip; }
.hg-tree-stick { position: relative; height: 3500px; }
.hg-scene { position: absolute; left: 50%; top: 0; width: 1800px; height: 3500px; margin-left: -900px; transform-origin: 0 0; }
/* the still scene, one picture (holiday.html); the tree alone stands only in the column of steps when text is
   enlarged (.hg-big, below) */
.hg-scene .backdrop { position: absolute; left: 0; top: 0; width: 1800px; height: 3500px; max-width: none; }
.hg-scene .tree { display: none; position: absolute; left: 0; top: 300px; width: 1800px; height: 2900px; max-width: none; }
.hg-scene .lights { position: absolute; left: 0; top: 0; width: 1800px; height: 3500px; overflow: visible; --lay: 1; }
.lights .wire { fill: none; stroke: #102418; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lay)); }
.lights .gl { fill: url(#hg-halo); opacity: clamp(0, calc((var(--lay) - var(--l) - .003) * 160), 1); }
.lights .bl { opacity: clamp(0, calc((var(--lay) - var(--l)) * 600), 1); --on: clamp(0, calc((var(--lay) - var(--l) - .003) * 160), 1); }

/* the star, its light, and the banner across it that carries the heading */
.hg-scene .topper { position: absolute; left: 900px; top: 290px; width: 0; height: 0; --lit: 1; }
.topper .rays { position: absolute; left: -340px; top: -340px; width: 680px; height: 680px; overflow: visible; opacity: var(--lit); scale: calc(.6 + var(--lit) * .4); }
.topper .star { position: absolute; left: -180px; top: -180px; width: 360px; height: 360px; overflow: visible; filter: drop-shadow(0 12px 14px rgba(60, 40, 10, .45)) brightness(calc(.7 + var(--lit) * .36)); }
.topper .banner { position: absolute; left: -300px; top: 44px; width: 600px; height: 100px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(40, 25, 10, .35)); }
.topper .hg-h2 { position: absolute; left: -240px; top: 64px; width: 480px; font-size: 38px; line-height: 58px; color: var(--berry); }

/* the ornaments: cream porcelain discs with a gilt rim, each hung on a red ribbon from a gold cap; --x, --y are the
   disc's center, --d its width, --hang the ribbon's length up to its branch, --pt how far down its words start.
   The words wrap inside the circle (the two shaped floats) */
.hg-orns { position: absolute; inset: 0; }
.orn { position: absolute; left: var(--x); top: var(--y); width: calc(var(--d) * var(--k, 1)); height: calc(var(--d) * var(--k, 1)); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); transform-origin: 50% calc(var(--hang) * -1); }
.o1 { --x: 770px; --y: 1080px; --d: 310px; --hang: 96px; --pt: 92px; }
.o2 { --x: 1070px; --y: 1590px; --d: 430px; --hang: 84px; --pt: 96px; }
.o3 { --x: 740px; --y: 2090px; --d: 310px; --hang: 100px; --pt: 100px; }
.o4 { --x: 1100px; --y: 2550px; --d: 330px; --hang: 88px; --pt: 98px; }
.orn .hang { position: absolute; left: 50%; bottom: 100%; width: 20px; height: var(--hang); margin: 0 0 -8px -10px; overflow: visible; }
.orn .hang path { fill: none; stroke: #9E1C26; stroke-width: 4.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.orn::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -12px; width: 28px; height: 20px; margin-left: -14px; border-radius: 5px 5px 3px 3px; background: repeating-linear-gradient(90deg, rgba(110, 79, 28, .5) 0 1px, transparent 1px 5px), linear-gradient(90deg, #8E6A2C, #F6E2A8 38%, #D9B46B 60%, #7A5A22); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.orn .disc { position: absolute; inset: 0; padding: 0 4px; border: 10px solid transparent; border-radius: 50%; text-align: center; color: var(--ink);
  background: radial-gradient(circle at 34% 26%, #FFFFFF 0, #FDF9F0 30%, #F4EBD8 72%, #E3D1AE 100%) padding-box,
    conic-gradient(from 200deg, #7A5A22, #F6E2A8 11%, #C9A35B 24%, #FFF3CF 37%, #A9843F 51%, #EDD08E 65%, #8E6A2C 79%, #F3DCA0 91%, #7A5A22) border-box;
  box-shadow: 0 30px 32px -16px rgba(4, 16, 9, .75), 0 8px 12px rgba(4, 16, 9, .35), inset 0 -12px 24px rgba(120, 90, 40, .16); }
.orn .disc::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid rgba(169, 132, 63, .8); outline: 1px dotted rgba(169, 132, 63, .7); outline-offset: 4px; pointer-events: none; }
.orn .disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 40% 26% at 31% 17%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(ellipse 50% 22% at 66% 93%, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; }
.orn .wl, .orn .wr { width: 50%; height: 100%; }
.orn .wl { float: left; shape-outside: radial-gradient(circle at 100% 50%, transparent calc(var(--d) * var(--k, 1) / 2 - 40px), #000 calc(var(--d) * var(--k, 1) / 2 - 39px)); }
.orn .wr { float: right; shape-outside: radial-gradient(circle at 0 50%, transparent calc(var(--d) * var(--k, 1) / 2 - 40px), #000 calc(var(--d) * var(--k, 1) / 2 - 39px)); }
.orn .sprig { position: absolute; left: 50%; top: calc(var(--pt) * var(--k, 1) - 36px); width: 84px; height: 42px; margin-left: -42px; overflow: visible; }
.orn .num { margin-top: calc(var(--pt) * var(--k, 1)); }
.hg-orns .num { display: block; font: 700 30px/1 var(--caps); letter-spacing: .04em; color: #9C7634; }
.hg-orns h3 { margin-top: 6px; font: 600 19px/1.25 var(--caps); color: var(--berry); }
.hg-orns p { margin-top: 7px; font: 500 17.5px/1.42 var(--serif); color: var(--ink-2); }
.o1 .hg-ask { position: absolute; left: 100%; top: 18%; width: 240px; margin: 0 0 0 26px; }

/* the red mailer among the gifts, its shipping label carrying the last step */
.hg-orns .parcel { position: absolute; left: 690px; top: 3176px; width: 420px; height: 290px; transform: rotate(-2.5deg); }
.parcel .mailer { position: absolute; inset: 0; border-radius: 8px; background: url("/img/holiday/mailer-surface.df6957bb1070.webp") center / 440px auto, #8E1A2E; box-shadow: 0 26px 26px -12px rgba(30, 8, 4, .65), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -14px 18px -10px rgba(0, 0, 0, .45), inset 0 14px 16px -10px rgba(255, 255, 255, .14); }
.parcel .mailer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 8px 8px 0 0; background: linear-gradient(rgba(255, 255, 255, .06), rgba(0, 0, 0, .1)); border-bottom: 2px solid rgba(40, 0, 10, .45); box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .4); }
.parcel .seam { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 8px 8px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, rgba(255, 255, 255, .07) 2px 5px), linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .3)); }
.parcel .label { position: absolute; left: 44px; top: 60px; width: 332px; padding: 18px 22px 16px; background: #FFFDF8; border-radius: 3px; text-align: left; color: var(--ink); box-shadow: 0 5px 9px -3px rgba(0, 0, 0, .45); transform: rotate(1.5deg); }
.parcel .label::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(43, 32, 24, .3); pointer-events: none; }
.parcel .num { display: inline; margin-right: 8px; font-size: 24px; }
.parcel h3 { display: inline; }
.parcel p { margin-top: 6px; }
/* the sticker on the mailer's front that tells them to save it (Dana's copy review 2026-11-02), stuck on over the label's empty top corner */
.parcel .sticker { position: absolute; right: 10px; top: 6px; z-index: 1; display: grid; grid-template-columns: 100%; align-content: center; gap: 3px; width: 114px; height: 114px; padding: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFDF8, #F3E6C8); color: #8E1A22; text-align: center; box-shadow: inset 0 0 0 3px #FFFDF8, inset 0 0 0 4.5px var(--gold-lo), 0 4px 8px -2px rgba(0, 0, 0, .45); transform: rotate(9deg); }
.parcel .sticker b { font: 600 12.5px/1.15 var(--caps); letter-spacing: .08em; text-transform: uppercase; }
.parcel .sticker span { justify-self: center; max-width: 66px; font: italic 500 13px/1.12 var(--serif); color: var(--ink); }


/* 9. What I'll need from you */
.hg-need { padding: clamp(92px, 9vw, 120px) 0 40px; background: var(--ground); }
.hg-list { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 64px); padding: clamp(46px, 5vw, 70px); background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(169, 132, 63, .55); outline: 1px solid rgba(169, 132, 63, .3); outline-offset: -10px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); }
.hg-list .hg-h2 { font-size: clamp(26px, 2.8vw, 36px); }
.hg-flakes { display: grid; gap: 16px; margin-top: 20px; }
.hg-flakes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font: 500 19px/1.5 var(--serif); color: var(--ink-2); }
.hg-flakes svg { width: 24px; height: 24px; margin-top: 3px; color: var(--holly); overflow: visible; }
.hg-flakes b { font-weight: 700; color: var(--ink); }
.hg-list .tips { align-self: center; padding: 26px 26px 28px; border: 1px solid rgba(169, 132, 63, .45); background: rgba(217, 180, 107, .1); }
.hg-checks { display: grid; gap: 12px; margin-top: 16px; }
.hg-checks li { position: relative; padding-left: 30px; font: 500 19px/1.45 var(--serif); color: var(--ink-2); }
.hg-checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.5 4.5L17 5' fill='none' stroke='%23A9843F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 10. Key dates, as advent doors (kept as Gabriel liked them) */
.hg-dates { padding: clamp(70px, 8vw, 110px) 0 clamp(92px, 9vw, 120px); background: var(--ground); }
.hg-doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.hg-doors li { position: relative; min-height: 196px; display: grid; align-content: center; gap: 10px; padding: 26px 16px; text-align: center; background: var(--paper-hi); color: var(--ink); border: 1px solid var(--gold); perspective: 800px; }
.hg-doors b { font: 700 12.5px/1.3 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--holly); }
.hg-doors span:not(.door) { font: 600 21px/1.3 var(--serif); }
.hg-doors .door { position: absolute; inset: -1px; display: grid; place-items: center; background: linear-gradient(180deg, #B52A33, #861820); border: 1px solid var(--gold); box-shadow: inset 0 0 0 6px #861820, inset 0 0 0 7px rgba(243, 220, 160, .5); transform-origin: 0 50%; transform: rotateY(-108deg); backface-visibility: hidden; transition: transform 1.1s cubic-bezier(.4, .1, .2, 1) calc(var(--d) * .14s); }
.hg-doors .door svg { width: 30px; height: 30px; color: var(--gold-hi); }
:root.hg-move .hg-doors:not(.open) .door { transform: none; }

/* 11. Questions */
.hg-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 64px; width: min(1000px, 100%); margin: 56px auto 0; }
.hg-qa h3 { font: 600 18px/1.35 var(--caps); color: var(--berry); }
.hg-qa p { margin-top: 8px; font: 500 19px/1.55 var(--serif); color: var(--ink-2); }

/* 12. Closing and the claim block */
.hg-close { position: relative; isolation: isolate; padding: clamp(100px, 10vw, 140px) 0 calc(max(200px, 100vw * 210 / 1440) + 50px); background: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(217, 180, 107, .14), transparent 70%), var(--ground); overflow: hidden; }
.hg-close .hg-snow { z-index: 0; }
.hg-close .wrap { z-index: 1; }
.hg-close-words { width: min(780px, 100%); margin-inline: auto; text-align: center; }
.hg-close-big { font: italic 500 clamp(30px, 3.4vw, 44px)/1.25 var(--serif); color: var(--gold-hi); }
.hg-close-words p:not(.hg-close-big) { margin-top: 22px; font: 500 21px/1.55 var(--serif); color: rgba(245, 236, 217, .88); }
.hg-close-words .hg-close-last { font: 600 clamp(19px, 1.9vw, 23px)/1.4 var(--caps) !important; letter-spacing: .02em; color: var(--paper) !important; }

.hg-claim { position: relative; width: min(780px, 100%); margin: 110px auto 0; padding: 70px clamp(22px, 6vw, 64px) 46px; scroll-margin-top: 30px; background: var(--paper-hi); color: var(--ink); border: 1px solid var(--gold); outline: 1px solid rgba(169, 132, 63, .35); outline-offset: -11px; box-shadow: 0 0 0 6px var(--pine), 0 0 0 7px var(--gold-line), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.hg-claim .snowcap { position: absolute; left: -10px; top: -24px; width: calc(100% + 20px); height: 40px; transform-origin: 50% 100%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18)); }
.hg-claim > .fc { top: 18px; }
.hg-claim > .fc.bl, .hg-claim > .fc.br { top: auto; bottom: 18px; }
.hg-claim > .fc.tl, .hg-claim > .fc.bl { left: 18px; }
.hg-claim > .fc.tr, .hg-claim > .fc.br { right: 18px; }
.hg-claim-head { text-align: center; }
.hg-claim-head .hg-facts { margin-top: 18px; }
.hg-claim-q { display: flex; justify-content: center; margin-top: 26px; }
.hg-claim-q .hg-btn-q { color: var(--berry); border-color: rgba(125, 20, 28, .4); background: transparent; }

/* her form: Telify's site-form piece, restyled through its published parts (never redrawn). First Telify's tokens in
   the card's colors, then her rules on the parts. Telify's own rules for a form's questions sit outside its layer and
   load after this file, so the rules on the questions name the questions part too, to outweigh them (as on her drums
   page) */
.hg-form, .hg-claim [data-telify="shop-product"] {
  --font-body: var(--sans); --font-display: var(--caps);
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: rgba(90, 70, 54, .75); --text-muted: rgba(90, 70, 54, .55);
  --accent: var(--holly); --accent-rgb: 176, 34, 44; --accent-hot: #C8343D; --text-on-accent: #FFF7E6;
  --border-soft: rgba(169, 132, 63, .45); --border-subtle: rgba(169, 132, 63, .25);
  --line: 1px solid rgba(169, 132, 63, .45); --line-strong: 1px solid rgba(169, 132, 63, .45);
  --tint: rgba(217, 180, 107, .12); --danger: #B0222C; --danger-rgb: 176, 34, 44;
  --bg-page: var(--paper-hi); --bg-card-2: #FFFFFF; --bg-inset: rgba(217, 180, 107, .12); --r-ctl: 4px;
  /* the app's own names for these, which Telify sets once on the page from her dark site's colors: set again here so
     the questions' counters, stars, placeholders and error lines take the card's */
  --color-error: var(--danger); --color-text-primary: var(--text-primary); --color-text-muted: var(--text-tertiary);
  --color-accent-text: var(--accent); --color-bg-elevated: var(--bg-inset); --color-bg-secondary: var(--border-soft);
  color-scheme: light;
}
.hg-form { margin-top: 36px; }
/* each question keeps a line under its box for its counter and its error, so the questions sit closer, and the line
   above the reply heading comes up to where the drawing has it */
.hg-form [data-part="questions"] { display: grid; gap: 8px; margin-bottom: -14px; }
.hg-form [data-part="questions"] [data-part="question"] { display: grid; gap: 6px; }
.hg-form [data-part="questions"] [data-part="label"] { display: block; font: 600 19px/1.35 var(--serif); color: var(--ink); }
.hg-form :is([data-part="label"], [data-part="guestName"] label, [data-part="guestEmail"] label) > span { margin-left: 4px; }
/* the hint between the question and its box, as drawn (Telify's forms put it under the box) */
.hg-form [data-part="questions"] [data-part="hint"] { order: 0; margin-top: 0; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.hg-form [data-part="questions"] :is(input:not([type="checkbox"], [type="radio"]), textarea) { width: 100%; margin-top: 4px; padding: 13px 14px; border: 1px solid rgba(90, 70, 54, .32); border-radius: 4px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.hg-form [data-part="questions"] :is(input, textarea):focus { outline: 2px solid rgba(176, 34, 44, .45); outline-offset: 1px; border-color: var(--holly); }
.hg-form [data-part="questions"] [data-part="choice"] { min-height: 46px; padding: 0 18px; border: 1px solid rgba(169, 132, 63, .7); border-radius: 999px; background: #fff; color: var(--ink); font: 500 15px/1.2 var(--sans); cursor: pointer; }
.hg-form [data-part="questions"] [data-part="choice"][data-state="selected"] { background: var(--holly); border-color: var(--holly); color: #FFF7E6; }
/* Claim a Spot sits 30px under the reply box, as drawn: the piece already spaces its button bar 58px down */
.hg-form [data-part="details"] { margin-top: 0; margin-bottom: -28px; padding-top: 28px; border-top: 1px solid rgba(169, 132, 63, .45); }
.hg-form [data-part="detailsHeading"] { font: 600 20px/1.3 var(--caps); color: var(--berry); text-align: center; text-wrap: balance; }
.hg-form [data-part="offer"] { padding: 18px 20px; border: 1px solid rgba(169, 132, 63, .45); border-radius: 6px; background: rgba(217, 180, 107, .12); }
.hg-form [data-part="offer"] > p:first-child { font: 600 15px/1.3 var(--caps); letter-spacing: .04em; color: var(--ink); }
.hg-form [data-part="offer"] li { font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.hg-form [data-part="offer"] li svg { color: var(--gold-lo); }
.hg-form [data-part="offerSignIn"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: #2AABEE; color: #fff; font: 500 16px/1 var(--sans); cursor: pointer; }
/* signed in: the line sits where the offer was, in the offer's gold box, with Telegram's mark in its own blue */
.hg-form [data-part="signedIn"] { display: block; padding: 16px 20px; border: 1px solid rgba(169, 132, 63, .45); border-radius: 6px; background: rgba(217, 180, 107, .12); text-align: center; text-wrap: balance; font: 400 15.5px/1.5 var(--sans); color: var(--ink-2); }
.hg-form [data-part="signedIn"] svg { display: inline-block; margin-right: 8px; vertical-align: -3px; color: #2AABEE; }
.hg-form [data-part="signedIn"] b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hg-form [data-part="or"] { font: italic 500 17px/1 var(--serif); color: var(--ink-2); }
.hg-form :is([data-part="guestName"], [data-part="guestEmail"]) label { display: block; font: 600 17px/1.3 var(--serif); color: var(--ink); }
.hg-form :is([data-part="guestName"], [data-part="guestEmail"]) :is(input) { padding: 13px 14px; border: 1px solid rgba(90, 70, 54, .32); border-radius: 4px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.hg-form :is([data-part="send"], [data-part="next"]) { position: relative; overflow: hidden; width: 100%; min-height: 54px; margin-top: 0; padding: 0 34px; border: 1px solid var(--gold-hi); border-radius: 3px; background: linear-gradient(180deg, #C8343D, #8E1A22); color: #FFF7E6; font: 600 15px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 3px #8E1A22, inset 0 0 0 4px rgba(243, 220, 160, .55), 0 10px 22px -10px rgba(60, 4, 8, .7); }
.hg-form [data-part="send"]:disabled { opacity: .7; cursor: default; }
/* sold out: the piece puts the questions away and says so on its button, here a quiet cream plaque in gold under the
   price line (the piece's 34px over its button bar taken back), with no shadow and no shine */
.hg-form [data-part="send"][data-state="soldOut"] { margin-top: -34px; border-color: rgba(169, 132, 63, .7); background: #F3E9D6; color: var(--berry); box-shadow: inset 0 0 0 3px #F3E9D6, inset 0 0 0 4px rgba(169, 132, 63, .45); opacity: 1; cursor: default; }
/* while the piece reads the form and the bundle: her words, centred, in the card's italic */
.hg-form [data-part="form"][role="status"] { padding: 40px 0 8px; text-align: center; font: italic 500 19px/1.4 var(--serif); color: var(--ink-2); }
.hg-form [data-part="error"] { font: 500 14.5px/1.45 var(--sans); color: var(--holly); text-align: center; }
.hg-form [data-part="note"] { margin-top: 12px; text-align: center; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); }
.hg-form [data-part="done"] { padding: 30px 10px 10px; text-align: center; }
.hg-form [data-part="doneHeading"] { font: 600 clamp(24px, 2.6vw, 30px)/1.25 var(--caps); color: var(--berry); }
.hg-form [data-part="doneText"] { margin-top: 12px; font: italic 500 21px/1.5 var(--serif); color: var(--ink-2); }
.hg-noscript { margin-top: 30px; text-align: center; font: italic 500 20px/1.5 var(--serif); color: var(--ink-2); }
/* the fallback, two steps: the form first, then the shop's piece for the bundle */
.hg-step { display: flex; align-items: center; gap: 12px; margin-top: 34px; font: 600 19px/1.3 var(--caps); color: var(--berry); }
.hg-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--holly); color: #FFF7E6; font: 600 17px/1 var(--caps); }
.hg-buy { margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(169, 132, 63, .45); }
/* the village is drawn 1440 wide and fills the width, so past 1440 it grows taller; its room grows with it */
.hg-close .hg-town { height: max(200px, 100vw * 210 / 1440); }

/* the small footer */
.hg-foot { display: grid; justify-items: center; gap: 14px; padding: 44px 24px 54px; background: var(--pine-deep); border-top: 1px solid var(--gold-line); text-align: center; }
.hg-foot .hg-sig { width: 170px; height: 50px; }
.hg-foot p { font: 400 13px/1.5 var(--sans); letter-spacing: .04em; color: rgba(243, 220, 160, .7); }
.hg-foot a { color: inherit; }

/* =====================================================================
   The motion. Each state below waits only while it moves (.hg-move); without it everything stands as drawn above.
   ===================================================================== */
:root.hg-move {
  /* the cover on arrival: the gold frame inks itself in, the wreath grows, the bow drops in, the bells ring once */
  /* the frame's two squares draw out from the middle of each side: a cross, narrow to begin, that opens to the whole box */
  .hg-frame::before, .hg-frame::after { clip-path: polygon(50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%, 0 50%, 50% 50%); transition: clip-path 1.4s cubic-bezier(.6, 0, .2, 1) .2s; }
  .hg-frame .pillar { opacity: 0; translate: 0 -24px; transition: opacity .8s ease 1.2s, translate 1s cubic-bezier(.3, 1.4, .5, 1) 1.2s; }
  .hg-frame :is(.c, .arch) { stroke-dasharray: 900; stroke-dashoffset: 900; fill-opacity: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.5, .1, .3, 1) .5s, fill-opacity 1.2s ease 1.4s; }
  .hg-wreath .vine { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.45, .05, .2, 1) .3s; }
  .hg-wreath .vine.v2 { transition-delay: .55s; }
  .hg-wreath .sp { scale: 0; transition: scale .6s cubic-bezier(.3, 1.5, .5, 1) calc(.95s + var(--i) * 110ms); }
  .hg-wreath .lf { scale: 0; rotate: -30deg; transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) calc(.8s + var(--i) * 110ms), rotate .6s ease calc(.8s + var(--i) * 110ms); }
  .hg-wreath .bow { opacity: 0; translate: 0 -40px; transition: opacity .4s .3s, translate .9s cubic-bezier(.3, 1.6, .5, 1) .3s; }
  .hg-wreath .hangs { opacity: 0; transition: opacity .6s 2.4s; }
  .hg-lettering .ta, .hg-lettering .tb, .hg-lettering .tc { opacity: 0; translate: 0 10px; transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .8, .2, 1); }
  .hg-lettering .ta { transition-delay: .5s; }
  .hg-lettering .tb { transition-delay: .8s; }
  .hg-lettering .tc { transition-delay: 1.1s; }
  /* the traced lines sit in a scaled group, so their rise is counted in the reference's own, larger units */
  .hg-lettering :is(.tb, .tc) { translate: 0 40px; }
  .hg-lettering .sw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, .1, .3, 1) 1.5s; }
  .hg-lettering .shine { animation: hg-glint 7s ease-in-out 3.6s infinite; }
  .hg-bells .bell.l { animation: hg-peal 3.2s ease-in-out 1.4s infinite; }
  .hg-bells .bell.r { animation: hg-peal 3.2s ease-in-out -.2s infinite; }
  .hg-cover-pic { opacity: 0; translate: 0 30px; rotate: 4deg; transition: opacity 1.2s ease 1.2s, translate 1.6s cubic-bezier(.2, .8, .2, 1) 1.2s, rotate 1.6s cubic-bezier(.2, .8, .2, 1) 1.2s; }
  .hg-cover.lit {
    .hg-frame::before, .hg-frame::after { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%, 0 0, 0 0); }
    .hg-frame .pillar { opacity: 1; translate: 0 0; }
    .hg-lettering :is(.ta, .tb, .tc) { opacity: 1; translate: 0 0; }
    .hg-lettering .sw path { stroke-dashoffset: 0; }
    .hg-frame :is(.c, .arch) { stroke-dashoffset: 0; fill-opacity: 1; }
    .hg-wreath .vine { stroke-dashoffset: 0; }
    .hg-wreath :is(.sp, .lf) { scale: 1; rotate: 0deg; }
    .hg-wreath :is(.bow, .hangs) { opacity: 1; translate: 0 0; }
    .hg-cover-pic { opacity: 1; translate: 0 0; rotate: 0deg; }
  }
  .hg-bells.ring { animation: hg-ring 1.6s cubic-bezier(.3, .6, .4, 1); }
  .hg-hang .h { animation: hg-swing var(--sw, 4.5s) ease-in-out infinite alternate; }
  .hg-hang .h:nth-child(2) { animation-delay: -1.7s; }
  .hg-wreath .wb { animation: hg-swing 3.6s ease-in-out infinite alternate; }
  .hg-wreath .wb.r { animation-delay: -1.4s; }
  .hg-cover-pic .sp, .hg-unbox .spark { animation: hg-twinkle 2.6s ease-in-out infinite alternate; }
  .hg-cover-pic .s2, .hg-unbox .s2 { animation-delay: -1s; }
  .hg-cover-pic .s3, .hg-unbox .s3 { animation-delay: -1.8s; }
  .hg-cover-pic img { animation: hg-float 8s ease-in-out infinite; }

  /* the village: its windows light one by one as it comes into view; smoke curls from the chimneys */
  /* dark at once, eased only as they light: eased both ways, the cover's lit windows faded out one by one as motion
     switched on, then lit again (walk 2026-11-01) */
  .hg-village .glass { fill: #3A2A1A; filter: none; }
  .hg-town.in .hg-village .glass { fill: #FFAA2E; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .95)); transition: fill .5s ease calc(var(--w) * 160ms); }
  .hg-village .chsmoke { animation: hg-smoke 5s linear infinite; }
  .hg-village .chsmoke:nth-of-type(2n) { animation-delay: -2.4s; }
  /* the stars over the village only brighten and dim, never grow, so none drifts on a phone (card 4 walk, Gabriel 2026-11-01) */
  .hg-village .tw { animation: hg-dim 3.2s ease-in-out infinite alternate; }
  .hg-village .tw:nth-of-type(3n) { animation-delay: -1.3s; }

  /* the inside: the arrow draws from the photo to the painting */
  .hg-arrow path { stroke-dashoffset: 1; }
  .hg-pair.in .hg-arrow .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1s .5s ease-out; }
  .hg-pair.in .hg-arrow .hd { stroke-dashoffset: 0; transition: stroke-dashoffset .4s 1.4s ease-out; }

  /* How it works: the scene is pinned and the camera moves over it (holiday.js); the star's light turns slowly once lit.
     The pin is as tall as the screen with the browser's bars put away (lvh), so no strip under the tree is left empty
     when a phone's address bar slides away; the camera frames the screen with the bars out (--seen), so nothing it
     shows sits under them */
  .hg-how { padding: 0; }
  .hg-tree-track { height: calc(var(--beats, 12) * 40svh + 100lvh); }
  .hg-tree-stick { position: sticky; top: 0; height: 100lvh; overflow: hidden; --seen: 100svh; }
  .hg-scene { left: 0; margin-left: 0; will-change: transform; }
  /* the swaying portraits and the tree's ornaments each on a layer of their own, so a sway or drop step repaints only
     the piece, not what it hangs in. Not the light string: drawn on the tree's layer, each stretch laid makes the
     browser redraw the tree at the camera's present zoom, which keeps it sharp as the camera closes in on a phone. It is
     laid in short pieces (holiday.js), so a stretch redraws only the branches around it */
  .hg-hung li, .hg-orns > li { will-change: transform; }
  .topper.on .rays { animation: hg-spin 120s linear infinite; }

  /* the tags spin on their twine as they come into view, and settle */
  .hg-tag { opacity: 0; }
  .hg-tag.in { opacity: 1; animation: hg-twirl 2.6s cubic-bezier(.25, .7, .3, 1) both; }
  .hg-tag.in:nth-child(2) { animation-delay: .25s; }

  /* her letter: she signs it, writing in as her home page hero does (sites/dana/css/home.css sig-write), then the wax
     seal stamps down */
  /* the sweep rides on its own wrapper: her site's two-layer mask draws a faint box around it in the tilted letter */
  .hg-sig-pen { -webkit-mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat; mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat; }
  .hg-letter.in .hg-sig-pen { animation: hg-sig-write 1.7s cubic-bezier(.45, .05, .3, 1) .3s both; }
  .hg-seal { opacity: 0; }
  .hg-letter.in .hg-seal { animation: hg-stamp .9s cubic-bezier(.5, 0, .3, 1) 1.8s both; }

  /* snow settles on the claim card */
  .hg-claim .snowcap { scale: 1 0; transition: scale 3.5s cubic-bezier(.3, .4, .2, 1) .4s; }
  .hg-claim.in .snowcap { scale: 1 1; }

  /* reveals */
  .rv { opacity: 0; translate: 0 26px; transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--dl, 0s); }
  .rv.in { opacity: 1; translate: 0 0; }
}
/* the looping motion rests while its section is out of view (holiday.js sets .hg-rest), as nobody sees where a loop is,
   and on the cover while it turns up on a phone (.hg-turning), where each step repainted the whole turning cover */
:is(.hg-rest, .hg-turning) :is(.shine, .bell, .h, .wb, .sp, .spark, .hg-cover-pic img, .chsmoke, .tw, .rays),
:is(.hg-rest, .hg-turning) :is(.hg-btn, .hg-open-hint)::after { animation-play-state: paused !important; }
@keyframes hg-spin { to { rotate: 360deg; } }
@keyframes hg-swing { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes hg-peal { 0%, 58%, 100% { rotate: 0deg; } 68% { rotate: 11deg; } 78% { rotate: -8deg; } 88% { rotate: 4deg; } 95% { rotate: -1.5deg; } }
@keyframes hg-glint { 0% { translate: 0 0; } 28%, 100% { translate: 1000px 0; } }
@keyframes hg-ring { 0% { rotate: 0deg; } 12% { rotate: 11deg; } 30% { rotate: -9deg; } 48% { rotate: 6deg; } 66% { rotate: -3.5deg; } 82% { rotate: 1.5deg; } 100% { rotate: 0deg; } }
@keyframes hg-twinkle { from { opacity: .3; scale: .8; } to { opacity: 1; scale: 1.08; } }
@keyframes hg-dim { from { opacity: .3; } to { opacity: 1; } }
@keyframes hg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hg-smoke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hg-twirl { 0% { transform: rotateY(-540deg) translateY(-30px); } 45% { transform: rotateY(28deg); } 62% { transform: rotateY(-14deg); } 78% { transform: rotateY(6deg); } 90% { transform: rotateY(-2deg); } 100% { transform: none; } }
@keyframes hg-sig-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes hg-stamp { 0% { opacity: 0; transform: translateY(-50px) scale(2.1) rotate(-25deg); } 60% { opacity: 1; transform: translateY(0) scale(.88) rotate(4deg); } 78% { transform: scale(1.06) rotate(-2deg); } 100% { opacity: 1; transform: none; } }


/* =====================================================================
   Phones
   ===================================================================== */
/* a narrow computer: the wreath sits close under the top rail, so the ornaments hang on short strings */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hg-hang .h { --len: 12px !important; }
  .hg-frame { --as: .72; }
}

@media (max-width: 999px) {
  /* the damask at seven tenths, so a phone's width holds four and a half of it, not three (Gabriel 2026-11-01) */
  :root { --ground: url("/img/holiday/pattern.ab50be1ddf83.svg") center top / 84px 117.6px, var(--pine); }
  .wrap { width: calc(100% - 36px); }
  .hg-h2 { font-size: 29px; }

  .hg-cover { min-height: 0; padding: 80px 0 250px; }
  .hg-frame { inset: 8px; --fs: .52; --as: .34; }
  .hg-frame .pillar { top: 50%; }
  .hg-bells { top: 6px; width: 108px; margin-left: -54px; }
  /* no room between the corner pieces and the arch for hanging ornaments: the wreath carries its own */
  .hg-hang { display: none; }
  .hg-hang .h { --len: 22px !important; width: 34px; }
  .hg-hang .h.f { --len: 38px !important; }
  .hg-hang .h svg { width: 34px; height: 42px; }
  .hg-hang .h.f svg { width: 22px; height: 56px; }
  /* the words keep clear of the candy pillars on the side rails */
  .hg-cover-in { width: calc(100% - 68px); grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* the wreath reaches past the text column: the pillars sit lower down, so it has the room */
  .hg-wreath { width: min(360px, 100% + 36px); }
  .hg-tagline { font-size: 23px; }
  .hg-lead { font-size: 17.5px; }
  .hg-facts { padding: 10px 6px; font-size: 13.5px; }
  /* the hero's two facts, one under the other, so no star is left hanging at the end of a line */
  .hg-cover .hg-facts { flex-direction: column; gap: 2px; }
  .hg-cover .hg-facts i { display: none; }
  .hg-acts { display: grid; width: 100%; }
  .hg-q > [data-telify-frame], .hg-q .hg-btn-q { inline-size: 100%; }
  .hg-cover .hg-q:empty { inline-size: min(300px, 100vw - 68px); }
  .hg-tagline { margin-top: -18px; }
  .hg-cover-pic { width: min(340px, 88%); }
  .hg-town { height: 130px; }
  /* the village stands on a ledge above the bottom corner pieces, inside the rails */
  .hg-cover .hg-town { bottom: 104px; left: 22px; right: 22px; height: 120px; overflow: hidden; }
  .hg-cover .hg-village { inset: 0; height: 100%; aspect-ratio: auto; }
  .hg-basepanel { width: 250px; height: 47px; margin-left: -125px; bottom: 8px; }
  .hg-basepanel span { font-size: 11px; letter-spacing: .26em; padding-top: 4px; }

  /* the gold frame comes in to the edge on phones so the words keep clear of it and of the corner pieces */
  .hg-inside { padding: 64px 0 84px; box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--gold-line), inset 0 0 0 15px var(--paper), inset 0 0 0 16px rgba(169, 132, 63, .3); }
  .hg-inside > .fc { top: 20px; width: 52px; height: 52px; }
  .hg-inside > .fc.bl, .hg-inside > .fc.br { top: auto; bottom: 20px; }
  .hg-inside > .fc.tl, .hg-inside > .fc.bl { left: 20px; }
  .hg-inside > .fc.tr, .hg-inside > .fc.br { right: 20px; }
  .hg-inside::before { display: none; }
  .hg-inside-in { width: calc(100% - 64px); grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hg-pair { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  .hg-pair img { padding: 6px; }
  .hg-pair .cap { font-size: 10.5px; letter-spacing: .16em; }
  .hg-one p { font-size: 19px; }

  .hg-pop-stick { grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); }
  .hg-unbox { zoom: .57; }
  :root.hg-move .hg-pop-words { height: 200px; margin-top: 18px; }
  :root.hg-move .hg-pop-words li { transform: translateY(calc(-50% + var(--d, 0) * 150px)); padding-inline: 8px; text-align: center; }
  .hg-pop-words li { font-size: 21px; }

  .hg-ar-grid { grid-template-columns: minmax(0, 1fr); }
  .hg-price b { font-size: 40px; }
  .hg-arrives .hg-btn { width: 100%; }

  .hg-wall { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 30px; }
  .hg-hung li { padding-inline: 9%; --len: 26px; }
  .hg-hung li:nth-child(2) { --len: 46px; }
  .hg-hung li:nth-child(3) { --len: 32px; }
  .hg-hung figure { padding: 6px; }

  .hg-tags { grid-template-columns: minmax(0, 1fr); gap: 110px; margin-top: 100px; }
  .hg-tag .body { padding: 60px 24px 32px; }

  .hg-ab-grid { grid-template-columns: minmax(0, 1fr); }
  .hg-ab-pic { width: 78%; justify-self: center; }
  .hg-seal { width: 74px; height: 74px; bottom: 20px; }

  /* the ornaments keep their places across the tree, as on a computer, and the camera pans to each (Gabriel 2026-11-01:
     "it should be like on the desktop where they are staggered and we pan") */
  .o2 { --d: 370px; --pt: 62px; }
  .hg-orns p { font-size: 16.5px; }
  .o1 .hg-ask { left: 0; top: 100%; width: 100%; margin: 22px 0 0; }
  .hg-orns .parcel { left: 720px; width: 360px; }
  .parcel .label { left: 22px; width: 316px; }

  .hg-list { grid-template-columns: minmax(0, 1fr); padding: 52px 22px 30px; }
  .hg-list .tips { padding: 20px; }

  .hg-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hg-doors li { min-height: 150px; }
  .hg-doors li:last-child { grid-column: span 2; }

  .hg-qa { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .hg-close { padding-bottom: 150px; }
  .hg-close-words p:not(.hg-close-big) { font-size: 19px; }
  /* smaller corner pieces, and room under the full-width question button so it keeps off them */
  .hg-claim { margin-top: 90px; padding-top: 64px; padding-bottom: 72px; }
  .hg-claim > .fc { top: 14px; width: 44px; height: 44px; }
  .hg-claim > .fc.bl, .hg-claim > .fc.br { top: auto; bottom: 14px; }
  .hg-claim > .fc.tl, .hg-claim > .fc.bl { left: 14px; }
  .hg-claim > .fc.tr, .hg-claim > .fc.br { right: 14px; }
  .hg-claim-q .hg-btn-q { width: 100%; }
  .hg-close .hg-town { height: 120px; }

  /* the cover turns up like a page (Gabriel 2026-11-01: "the hero flips up to the next page"): it scrolls until its foot
     meets the screen's, where it is held by its top edge and turns up from the top of the screen, its foot rising with
     the finger until it stands edge on and is gone, while the inside waits under it, shaded until the cover lifts off;
     the inside then holds a moment (the last 40lvh of .hg-turn) and scrolls on. The cover turns, not the held leaf (a
     held box that turns itself drew skewed in WebKit), seen from the screen's foot at 1.9 times the height of the part
     on screen, so its foot only ever rises (holiday.js works the turn from both). --ch is the cover's height
     (holiday.js), --open its angle in quarter turns */
  :root.hg-move .hg-leaf { position: sticky; top: min(0px, calc(100lvh - var(--ch))); perspective: calc(1.9 * min(100lvh, var(--ch))); perspective-origin: 50% 100%; }
  :root.hg-move :is(.hg-cover, .hg-cover-shadow) { transform-origin: 50% max(0px, calc(var(--ch) - 100lvh)); transform: rotateX(calc(var(--open, 0) * 90deg)); }
  /* the turn only moves layers, never repaints the cover: its shadow is a sheet of its own under it, turned with it
     and faded (holiday.js), and the shades are layers of their own; a shadow the cover cast itself, deepening as it
     turned, repainted the whole cover every frame */
  :root.hg-move .hg-cover-shadow { display: block; position: absolute; inset: 0; box-shadow: 0 18px 36px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; will-change: transform, opacity; }
  :root.hg-move .hg-shade { will-change: opacity; }
  :root.hg-move .hg-inside { position: sticky; top: 0; min-height: 100lvh; margin-top: calc(-1 * min(100lvh, var(--ch))); }
  :root.hg-move .hg-inside > .hg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 6, .6), rgba(20, 12, 6, .12)); opacity: calc(1 - var(--open, 0) * 1.5); pointer-events: none; }
  :root.hg-move .hg-turn { display: block; height: calc(min(100lvh, var(--ch)) + 40lvh); }
}

/* text enlarged by itself (holiday.js: .hg-big, and the page stands still): the tree's ornaments stand in a column
   down the tree, each grown with its words (--k), so no step's words leave its ornament and none covers another */
:root.hg-big .hg-tree-stick { height: auto; }
:root.hg-big .hg-scene { position: relative; left: 0; width: 100%; height: auto; margin: 0; padding: 480px 12px 80px; }
:root.hg-big .hg-scene .tree { display: block; left: 50%; top: 0; height: 100%; margin-left: -900px; object-fit: cover; object-position: center top; }
:root.hg-big .hg-scene .topper { left: 50%; }
:root.hg-big .hg-scene :is(.backdrop, .lights) { display: none; }
:root.hg-big .hg-orns { position: static; display: grid; justify-items: center; gap: 150px; }
:root.hg-big .orn { position: relative; left: auto; top: auto; margin: 0; }
:root.hg-big .hg-orns .parcel { position: relative; left: auto; top: auto; width: min(100%, calc(420px * var(--k, 1))); height: auto; transform: none; }
/* the mailer stands in the parcel and its label in the mailer, so the mailer grows with the label's words */
:root.hg-big .parcel .mailer { position: relative; inset: auto; padding: 60px 0 40px; }
:root.hg-big .parcel .label { position: relative; left: auto; top: auto; width: auto; margin: 0 22px; }
.hg-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; font-size: 100px; line-height: 1; }
@media (max-width: 999px) {
  /* a phone has no room for a ring that wide: each ornament is a rounded card the screen's width, as tall as its words */
  :root.hg-big .orn { width: 100%; height: auto; }
  :root.hg-big .orn .disc { position: relative; inset: auto; padding: 34px 18px 30px; border-radius: 40px; }
  :root.hg-big .orn .disc::before { border-radius: 33px; }
  :root.hg-big .orn .disc::after { border-radius: inherit; }
  :root.hg-big .orn :is(.wl, .wr) { display: none; }
  :root.hg-big .orn .sprig { top: 14px; }
  :root.hg-big .orn .num { margin-top: 30px; }
}