/* /holidayparty2026/ : Smart Gets Paid Gets Merry, all three event pages.
   Hand-authored for this build (not a mirror).

   PALETTE, round 4 (2026-11-09): blue leads, as on her site. Round 3 tried
   champagne gold and silver throughout and the team found it too gold, so
   gold is now an ACCENT only (a bulb in four, some snowflakes, thin rules). Gold and silver are event
   accents chosen by the team; they are NOT part of her five-colour brand kit
   (data/site.json brand.colors) and should not leak into the rest of the site.
   Orange stays unused here (Anna, 2026-11-08). Gold is only ever a fill or a
   rule; text that needs gold uses --hp-gold-ink, which passes AA on white.

   Buttons follow her live site: pill shape, black border, flat at rest, lift
   with a black offset shadow on hover (sgp-theme.css .btn:hover).
   Festive layer: twinkling string lights on every hero and band, falling
   snowflakes, a few champagne and sparkle touches. All CSS, and all of it
   holds still when the visitor asks for reduced motion. */

:root {
  --hp-blue: #2c79c4;
  --hp-blue-dark: #2463a1;
  --hp-blue-deep: #1d4f86;
  --hp-blue-light: #d5e4f3;
  --hp-gold: #c9a45c;
  --hp-gold-ink: #7d5f22;
  --hp-gold-soft: #e8d3a2;
  --hp-gold-light: #f6eedb;
  --hp-champagne: #fbf7ef;
  --hp-silver: #bcc4cc;
  --hp-silver-light: #eef1f4;
  --hp-ink: #000000;
  --hp-muted: #4f4f4f;
  --hp-paper: #ffffff;
  --hp-line: #e4e0d8;
  --hp-head: 'Oswald', sans-serif;
  --hp-body: 'Bitter', Georgia, serif;
  --hp-max: 1120px;
  --snowflake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='1.7' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3Cpath d='M9.4 3.6 12 6.2l2.6-2.6M9.4 20.4 12 17.8l2.6 2.6M3.6 10.6l3.6.9-.9 3.6M20.4 13.4l-3.6-.9.9-3.6'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hp26 { margin: 0; background: var(--hp-paper); color: var(--hp-ink); font-family: var(--hp-body); font-weight: 400; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.hp26 img { max-width: 100%; height: auto; display: block; }
body.hp26 a { color: var(--hp-blue-dark); }
.hp26 h1, .hp26 h2, .hp26 h3 { font-family: var(--hp-head); font-weight: 700; text-transform: none; line-height: 1.2; margin: 0 0 0.6em; letter-spacing: normal; }
.hp26 h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.hp26 h3 { font-size: 1.3rem; color: var(--hp-blue-dark); }
.hp26 p { margin: 0 0 1em; }

.hp-shell { width: 100%; max-width: var(--hp-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.hp-narrow { max-width: 780px; }
.hp-section { padding: 88px 0; position: relative; overflow: hidden; }
.hp-eyebrow { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.95rem; color: var(--hp-blue-dark); margin-bottom: 0.5em !important; }
.hp-eyebrow-light { color: var(--hp-gold-soft); }
.hp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Buttons */
.hp-btn { display: inline-block; font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 1.1rem; line-height: 1.2; text-decoration: none; background: var(--hp-blue); color: #fff !important; padding: 15px 40px; border: 2px solid #000; border-radius: 999px; box-shadow: 0 0 0 #000; transform: translate(0, 0); transition: transform .2s ease-in, box-shadow .2s ease-in, background-color .2s ease-in; cursor: pointer; }
.hp-btn:hover, .hp-btn:focus-visible { transform: translate(5px, -5px); box-shadow: -5px 5px 0 #000; }
.hp-btn:focus-visible { outline: 3px solid var(--hp-gold); outline-offset: 3px; }
.hp-btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.hp-btn-gold { background: var(--hp-gold); color: #000 !important; font-weight: 600; }
.hp-btn-light { background: #fff; color: #000 !important; }
.hp-btn-sm { padding: 10px 24px; font-size: 0.95rem; }
.hp-btn-full { width: 100%; text-align: center; font-size: 1.15rem; }

/* Top bar: logo, About, Agenda, Your Host, RSVP, Directory (same on every page) */
.hp-bar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--hp-line); }
.hp-bar-inner { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.hp-logo { display: block; line-height: 0; flex: none; }
body.hp26 .hp-logo img { height: 44px; width: auto; max-width: none; }
.hp-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.hp-nav a:not(.hp-btn) { font-family: var(--hp-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.98rem; color: #000 !important; text-decoration: none; }
.hp-nav a:not(.hp-btn):hover, .hp-nav a[aria-current="page"] { color: var(--hp-blue-dark) !important; text-decoration: underline; text-decoration-color: var(--hp-gold); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* String lights: a scalloped wire (one 84px tile) with a bulb at the low point
   of every tile. Slots and tiles both start at x=0, so they line up. */
.hp-lights { position: absolute; top: 0; left: 0; right: 0; height: 74px; overflow: hidden; display: flex; z-index: 3; pointer-events: none; }
.hp-lights::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44'%3E%3Cpath d='M0 4 Q42 40 84 4' fill='none' stroke='%23333333' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0; }
.hp-lights i { position: relative; flex: 0 0 84px; height: 100%; }
.hp-lights i::before { content: ''; position: absolute; left: 50%; top: 19px; width: 9px; height: 8px; margin-left: -4.5px; background: #333; border-radius: 1px; }
.hp-lights i::after { content: ''; position: absolute; left: 50%; top: 26px; width: 16px; height: 25px; margin-left: -8px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--b); box-shadow: 0 0 16px 4px var(--g); transform-origin: 50% -5px; animation: hp-twinkle 2.8s ease-in-out infinite; }
.hp-lights i:nth-child(4n+1) { --b: var(--hp-gold); --g: rgba(201,164,92,0.85); }
.hp-lights i:nth-child(4n+2) { --b: var(--hp-blue); --g: rgba(44,121,196,0.7); }
.hp-lights i:nth-child(4n+3) { --b: #f4f6f8; --g: rgba(188,196,204,0.95); }
.hp-lights i:nth-child(4n) { --b: #6ecadc; --g: rgba(110,202,220,0.85); }
.hp-lights i:nth-child(4n+3)::after { border: 1px solid rgba(0,0,0,0.15); }
.hp-lights i:nth-child(odd)::after { transform: rotate(7deg); }
.hp-lights i:nth-child(even)::after { transform: rotate(-6deg); }
.hp-lights i:nth-child(3n+2)::after { animation-delay: .8s; }
.hp-lights i:nth-child(3n)::after { animation-delay: 1.6s; animation-duration: 3.4s; }
.hp-lights i:nth-child(5n)::after { animation-duration: 2.2s; }
/* On a dark band the wire turns silver */
.hp-lights-dark::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44'%3E%3Cpath d='M0 4 Q42 40 84 4' fill='none' stroke='%23d6dce2' stroke-width='2'/%3E%3C/svg%3E"); }
.hp-lights-dark i::before { background: #d6dce2; }
@keyframes hp-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Snowflakes: masked SVG so the colour is ours, falling at mixed speeds */
.hp-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hp-snow i { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); background: var(--c, var(--hp-silver)); -webkit-mask: var(--snowflake) center / contain no-repeat; mask: var(--snowflake) center / contain no-repeat; opacity: var(--o, 0.8); animation: hp-fall var(--d) linear infinite; animation-delay: var(--w); }
.hp-snow i:nth-child(1)  { --x: 4%;  --s: 18px; --d: 14s; --w: -2s; }
.hp-snow i:nth-child(2)  { --x: 11%; --s: 12px; --d: 11s; --w: -7s;  --c: var(--hp-gold); }
.hp-snow i:nth-child(3)  { --x: 19%; --s: 22px; --d: 17s; --w: -11s; }
.hp-snow i:nth-child(4)  { --x: 27%; --s: 10px; --d: 10s; --w: -4s;  --c: #9fbde0; }
.hp-snow i:nth-child(5)  { --x: 35%; --s: 16px; --d: 15s; --w: -9s; }
.hp-snow i:nth-child(6)  { --x: 43%; --s: 13px; --d: 12s; --w: -1s; }
.hp-snow i:nth-child(7)  { --x: 51%; --s: 20px; --d: 18s; --w: -13s; --c: #9fbde0; }
.hp-snow i:nth-child(8)  { --x: 58%; --s: 11px; --d: 11s; --w: -6s;  --c: var(--hp-gold); }
.hp-snow i:nth-child(9)  { --x: 65%; --s: 17px; --d: 16s; --w: -3s; }
.hp-snow i:nth-child(10) { --x: 72%; --s: 12px; --d: 13s; --w: -10s; --c: #9fbde0; }
.hp-snow i:nth-child(11) { --x: 79%; --s: 21px; --d: 19s; --w: -15s; --c: #9fbde0; }
.hp-snow i:nth-child(12) { --x: 85%; --s: 10px; --d: 10s; --w: -5s; }
.hp-snow i:nth-child(13) { --x: 91%; --s: 15px; --d: 14s; --w: -12s; --c: var(--hp-gold); }
.hp-snow i:nth-child(14) { --x: 97%; --s: 13px; --d: 12s; --w: -8s; }
.hp-snow-light i { --c: #ffffff; --o: 0.75; }
.hp-snow-light i:nth-child(3n) { --c: var(--hp-gold-soft); }
@keyframes hp-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(18px, calc(var(--fall, 700px) * 0.5)) rotate(120deg); }
  100% { transform: translate(-6px, var(--fall, 700px)) rotate(240deg); }
}

/* Hero: champagne to silver, the same pattern on every page:
   welcome line, a little space, the title, then date and time. */
.hp-hero { position: relative; overflow: hidden; color: #000; padding: 132px 0 104px; text-align: left; --fall: 760px;
  background: linear-gradient(165deg, #ffffff 0%, #f2f7fc 45%, var(--hp-blue-light) 100%); }
.hp-hero-inner { position: relative; z-index: 2; }
.hp-welcome { font-family: var(--hp-head); font-weight: 600; text-transform: uppercase; letter-spacing: 4px; font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--hp-blue-dark); margin: 0 0 26px !important; }
.hp-title { margin: 0 0 22px; line-height: 1; }
.hp-title-box { display: inline-block; background: #fff; border: 3px solid #000; padding: 18px 30px 20px; font-family: var(--hp-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 1.05; box-shadow: -10px 10px 0 var(--hp-blue); }
/* One line where it fits; on a phone it breaks between the two halves only */
.hp-title-box .ln { white-space: nowrap; }
.hp-merry { color: var(--hp-blue); }
.hp-sub { font-family: var(--hp-body); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.4; color: var(--hp-muted); max-width: 620px; margin: 0 0 34px !important; }
.hp-when { font-family: var(--hp-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.2; margin: 0 0 6px !important; }
.hp-time { font-family: var(--hp-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: clamp(0.98rem, 1.8vw, 1.1rem); color: var(--hp-muted); margin: 0 0 6px !important; }
.hp-local { font-size: 0.95rem; color: var(--hp-muted); margin-bottom: 0 !important; }
.hp-hero-cta { margin-top: 26px !important; }

/* Countdown: the festive blue band, lights along the top, snow falling */
.hp-countdown { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 96px 0 56px; --fall: 300px;
  background: linear-gradient(180deg, var(--hp-blue-deep) 0%, var(--hp-blue-dark) 100%); }
.hp-countdown .hp-shell { z-index: 4; }
.hp-countdown-plain { padding-top: 56px; }
.hp-cd-label { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 2px; font-size: 1.1rem; color: var(--hp-gold-soft); margin-bottom: 20px !important; }
.hp-cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 130px)); justify-content: center; gap: 16px; }
.hp-cd-cell { border-top: 3px solid var(--hp-gold); padding: 14px 6px 4px; background: rgba(255,255,255,0.06); }
.hp-cd-cell span { display: block; font-family: var(--hp-head); font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.hp-cd-cell small { display: block; font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; color: rgba(255,255,255,0.88); margin-top: 6px; }
.hp-cd-live { font-family: var(--hp-head); font-weight: 700; font-size: 1.8rem; color: #fff; margin: 0; }

/* Come celebrate: the bokeh photo, warm and lively, with a toast */
.hp-celebrate { padding: 120px 0 96px;
  background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 46%, rgba(255,255,255,0.1) 100%), url('/assets/images/holidayparty2026/bokeh-lights.jpg') center / cover no-repeat; }
.hp-celebrate { --fall: 900px; }
.hp-celebrate-copy { max-width: 680px; }
.hp-celebrate h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
/* Confetti: muted gold paper (with a little silver and blue), drifting down
   and turning over, the same way the snow falls. Holds still on request. */
.hp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hp-confetti i { position: absolute; top: -24px; left: var(--x); width: var(--w, 8px); height: var(--h, 14px); background: var(--c, #c9a45c); border-radius: 1px; opacity: var(--o, 0.75); animation: hp-confetti var(--d) linear infinite; animation-delay: var(--t); }
.hp-confetti i:nth-child(3n) { --w: 10px; --h: 10px; border-radius: 50%; }
.hp-confetti i:nth-child(4n) { --c: #d9bf86; }
.hp-confetti i:nth-child(5n) { --c: #bcc4cc; }
.hp-confetti i:nth-child(7n) { --c: #9fbde0; }
.hp-confetti i:nth-child(1)  { --x: 3%;  --d: 11s; --t: -1s; }
.hp-confetti i:nth-child(2)  { --x: 8%;  --d: 14s; --t: -6s; }
.hp-confetti i:nth-child(3)  { --x: 13%; --d: 12s; --t: -9s; }
.hp-confetti i:nth-child(4)  { --x: 19%; --d: 15s; --t: -3s; }
.hp-confetti i:nth-child(5)  { --x: 24%; --d: 10s; --t: -7s; }
.hp-confetti i:nth-child(6)  { --x: 30%; --d: 13s; --t: -11s; }
.hp-confetti i:nth-child(7)  { --x: 35%; --d: 16s; --t: -2s; }
.hp-confetti i:nth-child(8)  { --x: 41%; --d: 12s; --t: -8s; }
.hp-confetti i:nth-child(9)  { --x: 46%; --d: 14s; --t: -12s; }
.hp-confetti i:nth-child(10) { --x: 52%; --d: 11s; --t: -4s; }
.hp-confetti i:nth-child(11) { --x: 57%; --d: 15s; --t: -10s; }
.hp-confetti i:nth-child(12) { --x: 62%; --d: 13s; --t: -5s; }
.hp-confetti i:nth-child(13) { --x: 67%; --d: 10s; --t: -9s; }
.hp-confetti i:nth-child(14) { --x: 72%; --d: 16s; --t: -14s; }
.hp-confetti i:nth-child(15) { --x: 76%; --d: 12s; --t: -2s; }
.hp-confetti i:nth-child(16) { --x: 80%; --d: 14s; --t: -7s; }
.hp-confetti i:nth-child(17) { --x: 84%; --d: 11s; --t: -11s; }
.hp-confetti i:nth-child(18) { --x: 88%; --d: 15s; --t: -4s; }
.hp-confetti i:nth-child(19) { --x: 91%; --d: 13s; --t: -13s; }
.hp-confetti i:nth-child(20) { --x: 94%; --d: 10s; --t: -6s; }
.hp-confetti i:nth-child(21) { --x: 97%; --d: 16s; --t: -9s; }
.hp-confetti i:nth-child(22) { --x: 99%; --d: 12s; --t: -1s; }
.hp-confetti i:nth-child(23) { --x: 33%; --d: 10s; --t: -5.5s; }
.hp-confetti i:nth-child(24) { --x: 6%; --d: 15s; --t: -7.5s; }
.hp-confetti i:nth-child(25) { --x: 37%; --d: 9s; --t: -12.7s; }
.hp-confetti i:nth-child(26) { --x: 22%; --d: 9s; --t: -6.1s; }
.hp-confetti i:nth-child(27) { --x: 8%; --d: 9s; --t: -7.7s; }
.hp-confetti i:nth-child(28) { --x: 7%; --d: 13s; --t: -1.7s; }
.hp-confetti i:nth-child(29) { --x: 23%; --d: 14s; --t: -8.2s; }
.hp-confetti i:nth-child(30) { --x: 7%; --d: 13s; --t: -5.6s; }
.hp-confetti i:nth-child(31) { --x: 97%; --d: 9s; --t: -7.8s; }
.hp-confetti i:nth-child(32) { --x: 14%; --d: 12s; --t: -2.0s; }
.hp-confetti i:nth-child(33) { --x: 13%; --d: 11s; --t: -7.8s; }
.hp-confetti i:nth-child(34) { --x: 68%; --d: 9s; --t: -8.1s; }
.hp-confetti i:nth-child(35) { --x: 64%; --d: 11s; --t: -1.4s; }
.hp-confetti i:nth-child(36) { --x: 71%; --d: 13s; --t: -0.8s; }
.hp-confetti i:nth-child(37) { --x: 21%; --d: 14s; --t: -7.4s; }
.hp-confetti i:nth-child(38) { --x: 77%; --d: 12s; --t: -8.2s; }
.hp-confetti i:nth-child(39) { --x: 45%; --d: 11s; --t: -3.5s; }
.hp-confetti i:nth-child(40) { --x: 19%; --d: 15s; --t: -3.4s; }
/* Sparkle pops: a four-point star that bursts in and fades, at scattered
   spots, so the confetti has a little shimmer between the falling pieces. */
.hp-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hp-sparkles i { position: absolute; width: 18px; height: 18px; background: #c9a45c; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; transform: scale(0); animation: hp-pop 3.2s ease-out infinite; }
.hp-sparkles i:nth-child(3n) { width: 12px; height: 12px; background: #d9bf86; }
.hp-sparkles i:nth-child(4n) { width: 24px; height: 24px; }
.hp-sparkles i:nth-child(5n) { background: #bcc4cc; }
.hp-sparkles i:nth-child(1) { left: 8%; top: 18%; animation-delay: 0.37s; }
.hp-sparkles i:nth-child(2) { left: 22%; top: 64%; animation-delay: 0.74s; }
.hp-sparkles i:nth-child(3) { left: 36%; top: 30%; animation-delay: 1.11s; }
.hp-sparkles i:nth-child(4) { left: 49%; top: 78%; animation-delay: 1.48s; }
.hp-sparkles i:nth-child(5) { left: 58%; top: 14%; animation-delay: 1.85s; }
.hp-sparkles i:nth-child(6) { left: 66%; top: 52%; animation-delay: 2.22s; }
.hp-sparkles i:nth-child(7) { left: 74%; top: 26%; animation-delay: 2.59s; }
.hp-sparkles i:nth-child(8) { left: 81%; top: 70%; animation-delay: 2.96s; }
.hp-sparkles i:nth-child(9) { left: 88%; top: 40%; animation-delay: 0.13s; }
.hp-sparkles i:nth-child(10) { left: 93%; top: 12%; animation-delay: 0.5s; }
.hp-sparkles i:nth-child(11) { left: 15%; top: 42%; animation-delay: 0.87s; }
.hp-sparkles i:nth-child(12) { left: 44%; top: 54%; animation-delay: 1.24s; }
@keyframes hp-pop {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  12% { opacity: 0.95; transform: scale(1.15) rotate(25deg); }
  30% { opacity: 0.6; transform: scale(0.8) rotate(45deg); }
  45%, 100% { opacity: 0; transform: scale(0) rotate(60deg); }
}
@keyframes hp-confetti {
  0% { transform: translate(0, 0) rotate(0deg) rotateY(0deg); }
  25% { transform: translate(14px, calc(var(--fall, 900px) * 0.25)) rotate(90deg) rotateY(180deg); }
  50% { transform: translate(-10px, calc(var(--fall, 900px) * 0.5)) rotate(180deg) rotateY(360deg); }
  75% { transform: translate(12px, calc(var(--fall, 900px) * 0.75)) rotate(270deg) rotateY(540deg); }
  100% { transform: translate(-4px, var(--fall, 900px)) rotate(360deg) rotateY(720deg); }
}

/* Why come: three open columns over gold ornaments */
.hp-why { background: #fff; }
.hp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 36px; }
.hp-col { border-top: 3px solid var(--hp-blue); padding-top: 22px; }
.hp-col .hp-ico { font-size: 1.8rem; line-height: 1; display: block; margin-bottom: 10px; }
.hp-col p { margin: 0; color: #333; }
.hp-why-cta { margin: 44px 0 0 !important; }

/* Agenda: the timeline line is the wire, every step a hanging bulb */
.hp-agenda { background: var(--hp-blue-dark); color: #fff; }
.hp-agenda h2 { color: #fff; }
.hp-agenda-date { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.85); font-size: 1rem; }
.hp-agenda-date span { color: var(--hp-gold); font-size: 0.55em; vertical-align: middle; }
.hp-timeline { list-style: none; margin: 36px 0 0 6px; padding: 0; border-left: 2px solid rgba(255,255,255,0.45); }
.hp-timeline li { position: relative; padding: 0 0 34px 36px; }
.hp-timeline li::before { content: ''; position: absolute; left: -5px; top: 2px; width: 8px; height: 6px; background: #d6dce2; border-radius: 1px; }
.hp-timeline li::after { content: ''; position: absolute; left: -8px; top: 8px; width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--hp-gold); box-shadow: 0 0 14px 3px rgba(201,164,92,0.8); animation: hp-twinkle 3s ease-in-out infinite; }
.hp-timeline li:nth-child(even)::after { background: #f4f6f8; box-shadow: 0 0 14px 3px rgba(255,255,255,0.6); animation-delay: 1.1s; }
.hp-timeline li:nth-child(3n)::after { animation-delay: 2s; }
.hp-timeline li:last-child { padding-bottom: 0; }
.hp-tl-time { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem; color: var(--hp-gold-soft); margin-bottom: 0.3em !important; }
.hp-timeline h3 { color: #fff; margin-bottom: 0.4em; font-size: 1.45rem; }
.hp-timeline h3 .sep { color: var(--hp-gold); }
.hp-timeline p:last-child { color: rgba(255,255,255,0.9); margin: 0; max-width: 680px; }

/* Register: light blue, a faded toast behind the copy */
.hp-register { background: linear-gradient(90deg, rgba(213,228,243,0.6) 0%, rgba(213,228,243,0.92) 45%, var(--hp-blue-light) 60%), url('/assets/images/holidayparty2026/champagne-toast.jpg') left center / 55% auto no-repeat, var(--hp-blue-light); }
.hp-register-copy { background: rgba(255,255,255,0.9); padding: 32px; }
.hp-register-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.hp-form { background: #fff; padding: 32px; border-top: 5px solid var(--hp-gold); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.hp-form label { display: block; font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; margin-bottom: 18px; }
.hp-form .req { color: #b42318; }
.hp-form .hint { display: block; font-family: var(--hp-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--hp-muted); margin: 4px 0 0; }
.hp-form input[type=text], .hp-form input[type=email], .hp-form input[type=url], .hp-form textarea { display: block; width: 100%; margin-top: 6px; font-family: var(--hp-body); font-size: 1rem; padding: 12px 14px; border: 1.5px solid #c9ced4; border-radius: 4px; background: #fff; color: var(--hp-ink); }
.hp-form input:focus, .hp-form textarea:focus { outline: none; border-color: var(--hp-blue); box-shadow: 0 0 0 3px rgba(44,121,196,0.18); }
.hp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-consent { border: 0; padding: 0; margin: 0 0 20px; }
.hp-consent legend { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; margin-bottom: 6px; }
.hp-form .hp-check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--hp-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.95rem; margin: 0; }
.hp-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--hp-blue); }
.hp-form .is-invalid input, .hp-form .is-invalid textarea { border-color: #b42318; }
.hp-form fieldset.is-invalid .hp-check { color: #b42318; }
.hp-form-msg { padding: 12px 14px; font-size: 0.95rem; }
.hp-form-msg.is-error { background: #fdecea; color: #8e2a1f; }
.hp-dir-note { font-size: 0.88rem; color: var(--hp-muted); background: #eef4fb; border-left: 3px solid var(--hp-blue); padding: 10px 12px; margin: 0 0 16px !important; }
/* The honeypot: off screen for people, a field bots fill in */
.hp-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Leah: a tall photo that stays beside her note while it scrolls */
.hp-leah-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.hp-leah-photo { position: sticky; top: 100px; margin: 0; }
body.hp26 .hp-leah-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 54% 30%; border-radius: 2px; }
.hp-leah h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.hp-leah h2 a { color: inherit; text-decoration-color: var(--hp-gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hp-sign { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--hp-blue-dark); }

/* FAQ / Good to know */
.hp-faq { background: var(--hp-silver-light); }
.hp-faq details { border-bottom: 1px solid #d8dde2; padding: 18px 0; }
.hp-faq summary { cursor: pointer; font-family: var(--hp-head); font-weight: 700; font-size: 1.25rem; list-style: none; position: relative; padding-right: 32px; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: '+'; position: absolute; right: 4px; top: -2px; font-size: 1.5rem; color: var(--hp-blue); }
.hp-faq details[open] summary::after { content: '\2212'; }
.hp-faq details p { margin: 12px 0 0; color: var(--hp-muted); }
.hp-faq-more { margin-top: 28px !important; overflow-wrap: anywhere; }

/* Final band: warm champagne gold, lights along the top */
.hp-final { position: relative; overflow: hidden; text-align: center; padding: 112px 0 92px; color: #fff;
  background: linear-gradient(180deg, var(--hp-blue-dark) 0%, var(--hp-blue-deep) 100%); }
.hp-final .hp-shell { z-index: 4; }
.hp-final h2 { color: #fff; }
.hp-final p { font-family: var(--hp-head); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.88); margin-bottom: 28px; }
.hp-final p span { color: var(--hp-gold); font-size: 0.55em; vertical-align: middle; }

/* Footer */
.hp-footer { background: #000; color: rgba(255,255,255,0.7); font-size: 0.85rem; padding: 18px 0; text-align: center; }
.hp-footer a { color: rgba(255,255,255,0.85) !important; }

/* ---- /holidayparty2026/confirmation/ (hc-*) ---- */
.hc-hero { overflow: visible; z-index: 5; }
.hc-hero .hp-snow { overflow: hidden; }
.hc-hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: center; }
.hc-h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.08; margin: 0 0 44px !important; max-width: 19ch; }
.hc-title-box { font-size: clamp(1.3rem, 2.8vw, 1.8rem); padding: 10px 18px 12px; box-shadow: -6px 6px 0 var(--hp-blue); margin: 0 0 26px !important; }
.hc-inbox { font-size: 1.02rem; margin: 14px 0 22px !important; max-width: 560px; }
.hc-gif { margin: 0; justify-self: center; width: 100%; max-width: 380px; background: #fff; padding: 10px 10px 6px; border: 3px solid var(--hp-blue); }
.hc-gif-frame { position: relative; aspect-ratio: 480 / 370; }
.hc-gif-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hc-gif figcaption { text-align: right; font-size: 0.7rem; margin-top: 4px; }
.hc-gif figcaption a { color: var(--hp-muted) !important; text-decoration: none; }

/* Add to calendar pop-up, used three times on the confirmation page */
.hc-cal { position: relative; display: inline-block; }
.hc-arrow { font-size: 0.7em; margin-left: 4px; display: inline-block; transition: transform .15s ease; }
.hc-cal.open .hc-arrow { transform: rotate(180deg); }
.hc-cal-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 240px; background: #fff; border: 2px solid #000; border-radius: 6px; overflow: hidden; box-shadow: -5px 5px 0 #000; text-align: left; }
.hc-cal.open .hc-cal-menu { display: block; }
.hc-cal-center .hc-cal-menu { left: 50%; transform: translateX(-50%); }
.hc-cal-up .hc-cal-menu { top: auto; bottom: calc(100% + 10px); }
.hc-cal-menu a { display: block; font-family: var(--hp-body); font-size: 1rem; color: #000 !important; text-decoration: none; padding: 13px 18px; border-bottom: 1px solid var(--hp-line); }
.hc-cal-menu a:last-child { border-bottom: 0; }
.hc-cal-menu a:hover, .hc-cal-menu a:focus-visible { background: var(--hp-blue-light); }

.hc-steps { background: #e6eff9; }
.hc-faq { background: linear-gradient(90deg, rgba(238,241,244,0.98) 0%, rgba(238,241,244,0.94) 55%, rgba(238,241,244,0.6) 100%), url('/assets/images/holidayparty2026/bokeh-lights.jpg') center / cover no-repeat; }
.hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hc-step { display: flex; flex-direction: column; background: #fff; border-top: 4px solid var(--hp-gold); padding: 30px 26px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.hc-step h2 { font-size: 1.6rem; margin-bottom: 0.4em; }
.hc-step > p { color: var(--hp-muted); }
.hc-num { font-family: var(--hp-head); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--hp-blue); margin: 0 0 8px !important; }
.hc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.hc-copy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hc-copy input { flex: 1 1 100%; min-width: 0; font-family: var(--hp-body); font-size: 0.95rem; padding: 10px 16px; border: 1.5px solid #c9ced4; border-radius: 999px; background: #fff; color: #000; }
.hc-note { font-size: 0.9rem; color: var(--hp-muted); margin: 10px 0 0 !important; min-height: 1.2em; }

/* Good to know: the run of show, inside its own FAQ question */
.hc-run { list-style: none; margin: 14px 0 6px; padding: 0; }
.hc-run li { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #d8dde2; color: var(--hp-muted); }
.hc-run li:last-child { border-bottom: 0; }
.hc-run b { font-family: var(--hp-head); font-weight: 600; letter-spacing: 0.5px; color: var(--hp-blue-dark); flex: 0 0 4.4em; }

/* ---- /holidayparty2026/directory/ (hd-*) ---- */
.hd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 48px; align-items: center; }
.hd-h1 { font-size: clamp(2.1rem, 3.4vw, 2.75rem); line-height: 1.1; margin: 0 0 44px !important; }
.hd-photo { margin: 0; justify-self: end; width: 100%; background: #fff; padding: 10px; border: 3px solid var(--hp-blue); box-shadow: -8px 8px 0 var(--hp-blue-light); }
body.hp26 .hd-photo img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 42%; }
.hd-sample { font-size: 0.95rem; color: var(--hp-muted); background: #eef4fb; border-left: 3px solid var(--hp-blue); padding: 10px 14px; margin: 0 0 18px !important; }
@media (min-width: 1000px) { .hd-h1 { white-space: nowrap; } }
.hd-list { padding-top: 56px; }
.hd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 8px; }
.hd-how { font-family: var(--hp-body); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.5; margin: 0 !important; max-width: 740px; background: #eef4fb; border-left: 4px solid var(--hp-blue); padding: 14px 18px; }
.hd-how .hd-icon { vertical-align: -6px; margin-right: 6px; }
.hd-bottom { display: flex; justify-content: flex-end; margin-top: 36px; }
.hd-pages { display: flex; align-items: center; gap: 4px; }
.hd-pages button { font-family: var(--hp-body); font-size: 1.05rem; min-width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: #000; cursor: pointer; }
.hd-pages button:hover:not(:disabled) { background: var(--hp-blue-light); }
.hd-pages button.is-on { background: var(--hp-blue); color: #fff; font-weight: 700; }
.hd-pages button:disabled { color: #bbb; cursor: default; }
.hd-gap { padding: 0 6px; }
.hd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 40px; }
.hd-card { padding: 26px 0 18px; border-bottom: 2px solid var(--hp-blue-light); min-width: 0; }
.hd-card .hd-name { font-family: var(--hp-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 1.3rem; margin: 0 0 6px; color: #000; }
.hd-email { margin: 0 0 4px !important; font-size: 0.98rem; overflow-wrap: anywhere; }
.hd-email a { color: #000 !important; text-decoration: none; }
.hd-email a:hover { color: var(--hp-blue-dark) !important; text-decoration: underline; }
.hd-city { font-family: var(--hp-body); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; margin: 0 0 14px !important; }
.hd-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
/* LinkedIn only: her blue rounded square with the white "in" mark */
.hd-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; background: var(--hp-blue); color: #fff !important; border-radius: 5px; transition: transform .15s ease; }
.hd-icon svg { width: 15px; height: 15px; }
a.hd-icon:hover { transform: translateY(-2px); }
.hd-icon-lg { width: 42px; height: 42px; }
.hd-icon-lg svg { width: 22px; height: 22px; }
.hd-more { margin-left: auto; font-family: var(--hp-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.85rem; color: var(--hp-blue-dark); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.hd-more:hover { text-decoration: underline; }

/* The registrants-only gate, and the other states of the guest list */
.hd-state { max-width: 640px; margin: 8px 0 0; padding: 32px; background: var(--hp-silver-light); border-top: 4px solid var(--hp-blue); }
.hd-state h2 { font-size: 1.7rem; margin-bottom: 0.4em; }
.hd-state p { color: var(--hp-muted); }
.hd-gate { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hd-gate input { flex: 1 1 260px; min-width: 0; font-family: var(--hp-body); font-size: 1rem; padding: 13px 18px; border: 1.5px solid #c9ced4; border-radius: 999px; background: #fff; }
.hd-gate input:focus { outline: none; border-color: var(--hp-blue); box-shadow: 0 0 0 3px rgba(44,121,196,0.18); }
.hd-gate-msg { margin: 12px 0 0 !important; font-size: 0.95rem; min-height: 1.3em; }
.hd-gate-msg.is-error { color: #8e2a1f; }

.hd-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hd-modal[hidden] { display: none; }
.hd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hd-dialog { position: relative; background: #fff; width: 100%; max-width: 680px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 44px 48px 40px; border-top: 8px solid var(--hp-blue); box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.hd-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #000; }
.hd-dialog h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 4px; }
.hd-m-city { font-family: var(--hp-body); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; color: var(--hp-muted); margin: 0 0 18px !important; }
.hd-m-about { margin-bottom: 28px !important; white-space: pre-line; }
.hd-m-cols { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.hd-m-label { font-family: var(--hp-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.95rem; margin: 0 0 8px !important; }
.hd-m-email { font-size: 0.95rem; overflow-wrap: anywhere; margin: 0 !important; }
.hd-m-email a { color: #000 !important; }

/* Responsive */
@media (max-width: 960px) {
  .hp-nav { gap: 16px; }
  .hp-nav a:not(.hp-btn) { font-size: 0.9rem; }
}
@media (max-width: 860px) {
  .hp-section { padding: 64px 0; }
  .hp-register-grid, .hp-leah-grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-register { background: var(--hp-blue-light); }
  .hp-register-copy { background: none; padding: 0; }
  .hp-celebrate { background: linear-gradient(rgba(251,247,239,0.9), rgba(251,247,239,0.9)), url('/assets/images/holidayparty2026/bokeh-lights.jpg') center / cover no-repeat; }
  .hp-leah-photo { position: static; max-width: 300px; }
  .hp-cols { grid-template-columns: 1fr; gap: 32px; }
  .hp-hero { padding: 112px 0 80px; }
  .hp-nav a:not(.hp-btn) { display: none; }
  .hc-hero-grid, .hc-grid { grid-template-columns: 1fr; }
  .hc-gif { max-width: 320px; }
  .hd-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hd-photo { justify-self: start; max-width: 420px; }
  .hd-grid { grid-template-columns: repeat(2, 1fr); gap: 8px 28px; }
}
@media (max-width: 560px) {
  body.hp26 { font-size: 17px; }
  .hp-shell { padding: 0 16px; }
  .hp-row { grid-template-columns: 1fr; gap: 0; }
  .hp-form { padding: 22px 18px; }
  .hp-title-box { padding: 12px 14px 14px; box-shadow: -6px 6px 0 var(--hp-blue); }
  .hp-cd-grid { gap: 8px; grid-template-columns: repeat(4, 1fr); }
  .hp-cd-cell { padding: 10px 2px 4px; }
  .hp-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
  body.hp26 .hp-logo img { height: 34px; }
  .hp-hero .hp-btn, .hc-cal, .hc-cal-btn { width: 100%; text-align: center; }
  .hc-cal { display: block; }
  .hc-cal-menu, .hc-cal-center .hc-cal-menu { left: 0; right: 0; transform: none; }
  .hd-grid { grid-template-columns: 1fr; }
  .hd-dialog { padding: 40px 22px 30px; }
  .hd-state { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hp-btn, .hd-icon { transition: none; }
  .hp-btn:hover, .hp-btn:focus-visible { transform: none; }
  .hp-lights i::after, .hp-timeline li::after { animation: none; }
  .hp-confetti i { animation: none; transform: rotate(35deg); top: 30%; }
  .hp-confetti i:nth-child(odd) { top: 62%; }
  .hp-confetti i:nth-child(3n) { top: 14%; }
  .hp-confetti i:nth-child(4n) { top: 84%; }
  .hp-sparkles i { animation: none; opacity: 0.7; transform: scale(0.8); }
  .hp-snow i { animation: none; top: calc(var(--s) * 9 % 90); }
  .hp-snow i:nth-child(odd) { top: 22%; }
  .hp-snow i:nth-child(3n) { top: 58%; }
  .hp-snow i:nth-child(4n) { top: 80%; }
}