/* SoundAlchemy · Santa Has Excellent Taste · styles
   One deliberate light look (no dark variant): the campaign palette is the brand. */
:root {
  --coral: #F16D73;
  --forest: #245646;
  --burgundy: #621B34;
  --pink: #E5A7B5;
  --ice: #F2F5F2;
  --blush: #EFCFD6;          /* a quieter Holiday Pink for the SPL stripes, next to the OePhi pink */
  --black: #111111;
  --night: #17110F;          /* Alchemy Black with a warm burgundy undertone */
  --paper: #FBF6EE;          /* warm stationery */
  --ivory: 255, 240, 224;    /* warm-white light, as an rgb triplet */
  --page: #F2F5F2;
  --line: rgba(17, 17, 17, 0.1);
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.page {
  max-width: 1760px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px 30px;
  overflow-x: clip;
}

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 4px 14px; }
.topbar__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar__brand img { height: 22px; width: auto; display: block; }
.topbar__issue { font: 600 10.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17, 17, 17, 0.5); white-space: nowrap; }
.motion {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.motion:hover { background: #fff; border-color: rgba(17, 17, 17, 0.24); }
.motion__icon { width: 12px; height: 12px; position: relative; }
.motion__icon::before, .motion__icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; background: var(--black); border-radius: 1px; }
.motion__icon::before { left: 2px; } .motion__icon::after { left: 7px; }
.is-paused .motion__icon::before { left: 3px; width: 0; height: 0; background: none; border-radius: 0; border-left: 9px solid var(--black); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.is-paused .motion__icon::after { display: none; }
.motion:focus-visible, .cta:focus-visible, .chip:focus-visible, .linkbtn:focus-visible, .letter__close:focus-visible, .letter__body:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ---------- the mosaic: one seamless field, no gaps ---------- */
.mosaic {
  position: relative;
  display: grid; gap: 0;
  grid-template-columns: 1fr 1fr 1.32fr 1.6fr 1.6fr 1.12fr 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.32fr);
  grid-template-areas:
    "bec bec duo   center center oephi   macro   macro"
    "bec bec cable center center oephi   macro   macro"
    "spl spl spl   center center sweater sweater sweater";
  height: clamp(640px, 50vw, 940px);
  border-radius: 6px; overflow: hidden;
  transition: filter 0.8s ease;
}
.tile--bec { grid-area: bec; } .tile--duo { grid-area: duo; } .tile--cable { grid-area: cable; }
.tile--spl { grid-area: spl; } .tile--oephi { grid-area: oephi; } .tile--macro { grid-area: macro; }
.tile--sweater { grid-area: sweater; }
.tile {
  position: relative; margin: 0; overflow: hidden; min-width: 0; min-height: 0;
  background: var(--tile-bg); container-type: size; isolation: isolate;
}
.stage { position: absolute; inset: 0; display: grid; place-items: center; }
.stage > * { grid-area: 1 / 1; }
.stage img { display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }

/* shared physical light: key light from the front left, so shadows fall right and down */
.contact { position: absolute; left: 50%; bottom: 0; z-index: -1; pointer-events: none; border-radius: 50%; transform: translate(-50%, 50%); }
.is-letter-open .mosaic { filter: saturate(0.7) brightness(0.86); }

/* A. BEC star, laid flat on coral */
.flakeRig { position: relative; width: min(94cqw, 90cqh); aspect-ratio: 1; --R: calc(min(94cqw, 90cqh) * 0.48); }
.flakeRig__layer { position: absolute; inset: 0; }
.flakeRig__layer--gold { z-index: 1; }
.flakeRig__layer--black { z-index: 2; }
.arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.arm__in { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.col {
  position: absolute; width: calc(var(--R) * var(--ratio)); height: calc(var(--R) * var(--len));
  left: calc(var(--R) * var(--ratio) * -0.5); top: calc(var(--R) * var(--d));
  transform-origin: 50% 0; transform: rotate(var(--b, 0deg));
}
/* the black columns lie on top of the gold ones and cast onto them */
.col--spoke { filter: drop-shadow(1.6px 2.4px 1.4px rgba(70, 14, 22, 0.42)); }
.col--branch, .col--ray { filter: drop-shadow(1px 1.6px 0.9px rgba(90, 22, 30, 0.32)); }

/* B. SPL: frames of the approved panorama */
.tile--spl .stage { display: block; }
.splFrame { position: absolute; inset: 0; overflow: hidden; }
.splFrame .splFrame__img { position: absolute; max-width: none; transform-origin: 50% 50%; will-change: transform; }

/* C. HiDiamond gift: two cables on forest green under pink paper and a burgundy ribbon */
.tile--cable .stage { display: block; }
.hdCable { position: absolute; width: 74cqw; height: 74cqw; margin: -37cqw 0 0 -37cqw; display: grid; place-items: center; will-change: transform; }
.hdCable .hdCable__img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(2px 4px 3px rgba(4, 22, 16, 0.45)) drop-shadow(6px 12px 14px rgba(4, 22, 16, 0.25)); }
.wrap { position: absolute; inset: 0; z-index: 5; pointer-events: none; perspective: 300px; perspective-origin: 50% 45%; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--pink); will-change: transform; backface-visibility: visible; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(98, 27, 52, 0.12); }
.door--l { left: 0; background: linear-gradient(90deg, #E9AFBC, var(--pink) 70%); }
.door--r { right: 0; background: linear-gradient(270deg, #E9AFBC, var(--pink) 70%); }
.door__ribbon { position: absolute; top: 0; bottom: 0; width: 7cqw; background: var(--burgundy); }
.door--l .door__ribbon { right: 0; } .door--r .door__ribbon { left: 0; }
.door__shade { position: absolute; inset: 0; background: #3A0F1F; opacity: 0; visibility: hidden; }
.wrap__ribbon { position: absolute; z-index: 2; top: 50%; width: 50%; height: 13cqw; margin-top: -6.5cqw; background: var(--burgundy);
  box-shadow: 0 2px 6px rgba(60, 10, 25, 0.35); will-change: transform; }
.wrap__ribbon--l { left: 0; transform-origin: 0% 50%; } .wrap__ribbon--r { right: 0; transform-origin: 100% 50%; }
.gift__dark { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #0B2219; opacity: 0.6; }
.bow { position: absolute; z-index: 3; left: 50%; top: 50%; width: 46cqw; margin: -20cqw 0 0 -23cqw; will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(60, 10, 25, 0.4)); }
.bow svg { display: block; width: 100%; height: auto; }
.bow__loop, .bow__tail { fill: var(--burgundy); }
.bow__fold { fill: #4A1426; }
.bow__knot { fill: #7A2442; }

/* D. OePhi: tree further back (higher baseline, smaller), speakers in front */
.tile--oephi .stage { display: block; }
.oe__obj { position: absolute; left: 0; right: 0; width: max-content; margin-inline: auto; display: flex; justify-content: center; isolation: isolate; }
.oe__obj .oe__img { height: 100%; width: auto; max-width: none; display: block; }
.oe__obj--tree { bottom: 21cqh; height: 56cqh; z-index: 1; }
.oe__obj--spk { bottom: 12cqh; height: 60cqh; z-index: 2; }
.contact--tree { width: 62%; height: 7cqh; background: radial-gradient(closest-side, rgba(70, 18, 34, 0.32), rgba(70, 18, 34, 0)); }
.contact--spk { width: 104%; height: 5cqh; background: radial-gradient(closest-side, rgba(70, 18, 34, 0.42), rgba(70, 18, 34, 0.12) 60%, rgba(70, 18, 34, 0)); }
.oe__note {
  position: absolute; top: 0; left: 0; z-index: 3; margin: 16px 0 0 16px; max-width: 72cqw;
  font: italic 400 clamp(12px, 8cqw, 15px)/1.3 var(--serif); color: var(--burgundy);
}

/* E. DuoMondi snowflake: real Spero photographs laid radially, cubes outward */
.speroRig { position: relative; width: min(96cqw, 96cqh); aspect-ratio: 1; --R: calc(min(96cqw, 96cqh) * 0.5); }
.spero {
  position: absolute; max-width: none;
  height: calc(var(--R) * var(--len)); width: auto;
  left: 50%; top: calc(var(--R) * var(--off, 0.06));
  transform: translateX(-50%) rotate(180deg); transform-origin: 50% 50%;
  filter: drop-shadow(-2px -3px 3px rgba(17, 17, 17, 0.2));
}
.speroRig .arm__in--spero { width: 0; height: 0; }

/* F. SPL Christmas jumper: stripes of real SPL fronts (red, silver, black) */
.tile--splknit { grid-area: macro; }
.tile--splknit .stage { display: block; }
.knitRows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 9cqh; overflow: hidden; }
.knitRow { position: relative; height: calc(var(--h) * 1cqh); }
.knitRow__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.knitRow.is-offset .knitRow__track { margin-left: calc(var(--h) * -1.55cqh); }
.knitRow__cell { flex: none; height: 100%; width: calc(var(--h) * 5.2cqh); display: flex; align-items: center; justify-content: center; }
.knitRow__cell .knitRow__unit { height: 100%; width: auto; max-width: 92%; object-fit: contain; filter: drop-shadow(0.8px 1.6px 1.2px rgba(40, 14, 18, 0.3)); }
.knitRow.is-tall .knitRow__cell { width: calc(var(--h) * 3.5cqh); }

/* G. Christmas jumper: knitted bands of real BEC columns on forest green */
.tile--sweater .stage { display: block; }
.band { position: absolute; left: 0; right: 0; overflow: visible; }
.band__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.motif { position: relative; flex: none; height: 100%; }
.knit { position: absolute; max-width: none; filter: drop-shadow(0.8px 1.4px 0.8px rgba(4, 22, 16, 0.5)); }
.band--top { top: 5cqh; height: 5cqh; } .band--bottom { top: 90cqh; height: 5cqh; }
.motif--stitch { width: 9cqh; }
.knit--stitch { height: 6cqh; width: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.band--chevTop { top: 14cqh; height: 13cqh; } .band--chevBottom { top: 73cqh; height: 13cqh; }
.motif--chev { width: 13cqh; }
.knit--chevL, .knit--chevR { height: 9.2cqh; width: auto; top: 50%; transform-origin: 50% 50%; }
.knit--chevL { left: 25%; transform: translate(-50%, -50%) rotate(-45deg); }
.knit--chevR { left: 75%; transform: translate(-50%, -50%) rotate(45deg); }
.motif--chev.is-up .knit--chevL { transform: translate(-50%, -50%) rotate(45deg); }
.motif--chev.is-up .knit--chevR { transform: translate(-50%, -50%) rotate(-45deg); }
.band--stars { top: 31cqh; height: 38cqh; }
.motif--star { width: 38cqh; }
.star { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.star__arm { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)); }
.knit--spoke { height: 14cqh; width: auto; left: 0; top: 1.6cqh; transform: translateX(-50%); }
.cross { position: absolute; left: 0; top: 50%; width: 0; height: 0; }
.knit--cross { height: 7cqh; width: auto; left: 0; top: 0; transform: translate(-50%, -50%); }
.knit--cross.is-h { transform: translate(-50%, -50%) rotate(90deg); }

/* THE CHRISTMAS REVEAL: tile-shaped pieces of one photograph, graded very slightly
   into the burgundy so the panorama belongs to the campaign palette */
.reveal { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.reveal__region { position: absolute; transform-origin: 50% 55%; }
.reveal__piece { position: absolute; overflow: hidden; will-change: clip-path, transform; background: var(--burgundy); }
.reveal__img { position: absolute; max-width: none; display: block; opacity: 0.94; will-change: transform; }
.reveal__shade { position: absolute; inset: 0; background: #0E0807; opacity: 0; visibility: hidden; }
html:not(.is-ready) .reveal { opacity: 0; }

/* INTRO: the panorama alone, then an editorial curtain along the mosaic's own lines */
.intro { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.intro__frame { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }
.intro__panel { position: absolute; overflow: hidden; will-change: transform, clip-path; background: var(--burgundy); }
.intro__img { position: absolute; max-width: none; display: block; opacity: 0.94; }

/* the hero lower third: the headline sits over the sideboard, never over the SPL units */
.lowerThird {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 0 clamp(24px, 3vw, 52px) clamp(20px, 2.4vw, 38px);
  opacity: 0; visibility: hidden; color: var(--ice);
}
.lowerThird::before { content: ""; position: absolute; inset: auto 0 0 0; height: 150%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 8, 7, 0.62), rgba(14, 8, 7, 0.34) 45%, rgba(14, 8, 7, 0)); }
.lowerThird__text { min-width: 0; }
.lowerThird__title { margin: 0; font: 500 clamp(32px, 3.3vw, 60px)/1 var(--serif); letter-spacing: -0.015em; }
.lowerThird__sub { margin: 8px 0 0; font: italic 400 clamp(16px, 1.45vw, 24px)/1.2 var(--serif); color: var(--pink); }
.lowerThird__cta { pointer-events: auto; margin-top: 0; flex: none; }

/* ---------- editorial centre ---------- */
.center {
  grid-area: center; position: relative; overflow: hidden; min-width: 0; z-index: 5;
  background: var(--burgundy); color: var(--ice);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(28px, 3.6vw, 64px);
  container-type: inline-size;
}
.center__light { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(80% 60% at 30% 40%, rgba(var(--ivory), 0.1), rgba(var(--ivory), 0) 70%); }
.center > * { position: relative; }
.eyebrow { margin: 0; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--pink); }
/* the SoundAlchemy horseshoe, reversed to ice white on burgundy; shape untouched */
.center__mark { display: block; width: clamp(34px, 7.5cqi, 48px); height: auto; filter: brightness(0) invert(0.95) sepia(0.06); opacity: 0.94; }
.center h1 { margin: clamp(22px, 4.6cqi, 36px) 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 12cqi, 92px); line-height: 0.96; letter-spacing: -0.015em; text-wrap: balance; }
.center .sub { margin: clamp(10px, 2.2cqi, 16px) 0 0; font: italic 400 clamp(18px, 4.6cqi, 30px)/1.15 var(--serif); color: var(--pink); }
.center .lede { margin: clamp(18px, 4cqi, 30px) 0 0; max-width: 32ch; font: 400 clamp(14px, 2.9cqi, 17px)/1.55 var(--sans); color: rgba(242, 245, 242, 0.86); text-wrap: pretty; }
.cta {
  margin-top: clamp(20px, 4.4cqi, 34px); display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--ice); color: var(--burgundy); padding: 15px 22px 15px 24px;
  font: 700 11.5px/1.1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.cta:hover { background: var(--pink); }
.cta:active { transform: scale(0.98); }
.cta__arrow { width: 16px; height: 16px; flex: none; }
.note { margin: 14px 0 0; font: 500 11px/1.4 var(--sans); letter-spacing: 0.04em; color: rgba(242, 245, 242, 0.62); }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; font: 500 12px/1.5 var(--sans); color: rgba(17, 17, 17, 0.55); }

/* ---------- the letter: luxury Christmas stationery ---------- */
.letter { border: 0; padding: 0; background: transparent; color: var(--black); width: min(540px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible; }
.letter[open]::backdrop { background: rgba(23, 14, 13, 0.46); animation: letterVeil 0.6s ease both; }
@keyframes letterVeil { from { opacity: 0; } to { opacity: 1; } }
.letter__paper {
  position: relative; overflow: auto; max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(40px, 7vw, 64px) clamp(28px, 8vw, 72px) clamp(34px, 6vw, 52px);
  background-color: #FBF7F1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(60, 30, 20, 0.08), 0 12px 24px rgba(23, 14, 13, 0.16), 0 40px 80px rgba(23, 14, 13, 0.28);
  will-change: transform, opacity;
}
.letter__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: rgba(98, 27, 52, 0.7); transition: color 0.2s, background 0.2s; }
.letter__close:hover { color: var(--burgundy); background: rgba(98, 27, 52, 0.06); }
.letter__close svg { width: 13px; height: 13px; }
.letter__mark { width: 38px; height: auto; display: block; }
.letter h2 { margin: 26px 0 0; font: 500 clamp(32px, 6vw, 42px)/1.02 var(--serif); letter-spacing: -0.01em; color: var(--burgundy); }
.letter__lede { margin: 12px 0 0; font: italic 400 17px/1.5 var(--serif); color: rgba(42, 26, 30, 0.72); }
.letter__meta { margin: 30px 0 0; font: 400 12.5px/1.75 var(--sans); color: rgba(42, 26, 30, 0.62); }
.letter__label { font-weight: 600; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(98, 27, 52, 0.7); margin-right: 6px; }
.letter__addr { color: #2A1A1E; font-weight: 500; user-select: all; }
.letter__body {
  margin: 26px 0 0; padding-top: 26px; width: 100%; max-width: 36ch; text-align: left;
  border-top: 1px solid rgba(98, 27, 52, 0.16);
  font: italic 400 17px/1.65 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; color: #2A1A1E; user-select: text;
}
.letter__actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta--dark { margin-top: 0; background: var(--burgundy); color: #FBF7F1; }
.cta--dark:hover { background: #4E1529; }
.linkbtn { border: 0; background: none; padding: 6px 4px; min-height: 32px; cursor: pointer; font: 500 11.5px/1.3 var(--sans); color: rgba(98, 27, 52, 0.72); text-decoration: underline; text-decoration-color: rgba(98, 27, 52, 0.3); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--burgundy); }
.letter__status { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: rgba(42, 26, 30, 0.6); max-width: 40ch; min-height: 1.5em; }

/* before choreography is measured, keep the stage quiet (no flash of end states) */
html:not(.is-ready):not(.no-gsap) .mosaic { opacity: 0; }
.mosaic { transition: opacity 0.7s ease, filter 0.8s ease; }
.stage { transition: opacity 0.6s ease; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .mosaic {
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, 31vw) 24vw;
    grid-template-areas:
      "center center center center"
      "bec bec duo oephi"
      "bec bec cable oephi"
      "spl spl macro macro"
      "sweater sweater sweater sweater";
  }
  .center { padding: 48px clamp(26px, 6vw, 64px); }
  .center h1 { font-size: clamp(42px, 7.8vw, 76px); }
  .lowerThird { display: none; }
}

/* ---------- phone: its own vertical story ---------- */
@media (max-width: 640px) {
  .topbar__issue { display: none; }
  .mosaic {
    border-radius: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto calc(100vw - 32px) repeat(5, calc((100vw - 32px) / 2));
    grid-template-areas:
      "center center"
      "bec bec"
      "duo cable"
      "spl spl"
      "oephi macro"
      "oephi macro"
      "sweater sweater";
  }
  .center { padding: 38px 24px 34px; }
  .center h1 { font-size: clamp(40px, 12.4vw, 56px); }
  .oe__note { font-size: 13px; margin: 12px 0 0 12px; }
  .letter__paper { padding: 26px 22px 24px; }
  .letter__body { font-size: 16px; }
}