.event-christmas-page { background: #fff; color: var(--saboa-brown); }

.christmas-hero-image { object-position: center 52%; }
.christmas-hero-shade { background: linear-gradient(90deg, rgb(18 14 12 / 75%) 0%, rgb(18 14 12 / 46%) 43%, rgb(18 14 12 / 10%) 74%, transparent 100%); }
.christmas-hero h1 em { font-weight: 400; }

.christmas-intro,
.christmas-ways,
.christmas-approach {
  width: min(100%, var(--event-container-max));
  margin-inline: auto;
  padding-inline: var(--event-gutter);
}

.christmas-intro { padding-top: clamp(40px, 4vw, 60px); padding-bottom: clamp(58px, 5.8vw, 86px); }
.christmas-intro > p { width: 100%; max-width: none; margin: 0; font-family: "Playfair Display", serif; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -.03em; line-height: 1.38; text-align: justify; }

.christmas-ways { padding-bottom: clamp(46px, 4.8vw, 68px); }
.christmas-ways > h2 { margin: 0 0 clamp(42px, 4.8vw, 68px); font-family: "Playfair Display", serif; font-size: clamp(38px, 4.4vw, 64px); font-weight: 400; letter-spacing: -.05em; line-height: 1.02; white-space: nowrap; }
.christmas-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--event-grid-gap); }
.christmas-option { display: block; min-width: 0; padding: 0 0 17px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: border-color 200ms ease, opacity 200ms ease; }
.christmas-option img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.christmas-option-label { display: grid; grid-template-columns: 38px minmax(0, 1fr); margin-top: 18px; gap: 14px; align-items: start; }
.christmas-option-number { padding-top: 5px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; line-height: 1.4; }
.christmas-option-title { font-family: "Playfair Display", serif; font-size: clamp(25px, 2.1vw, 33px); letter-spacing: -.035em; line-height: .98; }
.christmas-option-title em { font-weight: 400; }
.christmas-option.is-active { border-bottom-color: var(--saboa-brown); }
.christmas-option:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .christmas-option:not(.is-active):hover { opacity: .72; } }

.christmas-development { margin-top: clamp(28px, 3vw, 42px); }
.christmas-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(42px, 5vw, 76px); align-items: center; opacity: 0; transition: opacity 220ms ease; }
.christmas-panel.is-active { opacity: 1; }
.christmas-panel[hidden] { display: none; }
.christmas-panel figure { margin: 0; }
.christmas-panel figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.christmas-panel-copy { max-width: 520px; }
.christmas-panel-copy > p { margin: 0 0 22px; font-size: var(--event-body-size); line-height: 1.7; }
.christmas-panel-copy > p:last-child { margin-bottom: 0; }
.christmas-panel-copy .christmas-panel-label { margin-bottom: 30px; font-family: "DM Mono", monospace; font-size: var(--event-eyebrow-size); letter-spacing: .09em; line-height: 1.5; }
.christmas-panel-copy .christmas-dots { display: flex; margin-top: 36px; gap: 10px; font-family: "DM Mono", monospace; font-size: 14px; letter-spacing: 0; }
.christmas-dots span { opacity: .8; }
.christmas-dots .is-active { color: var(--saboa-brown); opacity: 1; }

.christmas-approach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--event-grid-gap); padding-top: clamp(48px, 4.8vw, 70px); padding-bottom: clamp(100px, 9vw, 138px); }
.christmas-approach-heading { grid-column: 1 / span 5; }
.christmas-approach-heading > p { margin: 0 0 22px; font-family: "DM Mono", monospace; font-size: var(--event-eyebrow-size); letter-spacing: .11em; line-height: 1.5; }
.christmas-approach-heading h2 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(42px, 4.2vw, 61px); font-weight: 400; letter-spacing: -.05em; line-height: 1.04; }
.christmas-approach-copy { grid-column: 7 / -1; max-width: 690px; }
.christmas-approach-copy > p { margin: 0 0 22px; font-size: var(--event-body-size); line-height: 1.7; }
.christmas-approach-copy .christmas-approach-closing { margin-top: clamp(38px, 4vw, 56px); margin-bottom: 0; font-family: "Playfair Display", serif; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.025em; line-height: 1.2; }

.christmas-final { background: var(--saboa-cream); color: var(--saboa-brown); }
.christmas-final > .event-final-cta-inner { padding-top: clamp(42px, 4.2vw, 60px); padding-bottom: clamp(52px, 5vw, 72px); }
.christmas-final .event-final-cta-claim { font-size: clamp(32px, 3.2vw, 48px); text-transform: none; }
.christmas-final-link { appearance: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; }

@media (max-width: 1180px) {
  .christmas-ways > h2 { white-space: normal; }
}

@media (max-width: 980px) {
  .christmas-option-label { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .christmas-option-title { font-size: clamp(22px, 3vw, 29px); }
  .christmas-panel { grid-template-columns: minmax(0, 1.08fr) minmax(290px, .92fr); gap: 36px; align-items: start; }
  .christmas-approach-heading { grid-column: 1 / span 5; }
  .christmas-approach-copy { grid-column: 6 / -1; }
}

@media (max-width: 760px) {
  .christmas-hero-image { object-position: 56% center; }
  .christmas-hero-shade { background: linear-gradient(90deg, rgb(18 14 12 / 82%) 0%, rgb(18 14 12 / 53%) 70%, rgb(18 14 12 / 20%) 100%); }
  .christmas-hero h1 { max-width: 335px; }
  .christmas-intro { padding-top: 40px; padding-bottom: 58px; }
  .christmas-intro > p { font-size: clamp(22px, 6.4vw, 27px); line-height: 1.4; }
  .christmas-ways { padding-bottom: 54px; }
  .christmas-ways > h2 { margin-bottom: 38px; font-size: clamp(34px, 10vw, 43px); line-height: 1.04; }
  .christmas-options { grid-template-columns: 1fr; gap: 34px; }
  .christmas-option { padding-bottom: 13px; }
  .christmas-option-label { grid-template-columns: 36px minmax(0, 1fr); margin-top: 15px; gap: 10px; }
  .christmas-option-title { font-size: 28px; }
  .christmas-development { margin-top: 32px; }
  .christmas-panel { display: flex; gap: 34px; flex-direction: column; }
  .christmas-panel figure { width: 100%; }
  .christmas-panel-copy { max-width: none; }
  .christmas-panel-copy .christmas-panel-label { margin-bottom: 24px; }
  .christmas-panel-copy .christmas-dots { margin-top: 30px; }
  .christmas-approach { display: block; padding-top: 54px; padding-bottom: 82px; }
  .christmas-approach-copy { max-width: none; margin-top: 45px; }
  .christmas-approach-copy .christmas-approach-closing { margin-top: 36px; font-size: 25px; }
  .christmas-final > .event-final-cta-inner { padding-top: 42px; padding-bottom: 48px; }
  .christmas-final .event-final-cta-claim { font-size: clamp(30px, 8.8vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .christmas-option,
  .christmas-panel { transition: none; }
}