.hhb-story {
  position:relative;
  isolation:isolate;
  width:min(920px,calc(100% - 32px));
  margin:8px auto 0;
  border:1px solid #ffffff24;
  border-radius:28px;
  overflow:hidden;
  background:#110d12;
  box-shadow:0 32px 100px #0008,0 0 80px #af1f4a12;
  color:#fff;
  outline-offset:5px;
  touch-action:pan-y}
.hhb-story [hidden] {
  display:none!important}
.hhb-story-top {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  padding:20px 24px;
  background:linear-gradient(#070609aa,transparent)}
.hhb-story-progress {
  display:flex;
  gap:5px}
.hhb-story-progress button {
  --story-progress:0;
  --story-broom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M4 12 C26 7 48 9 70 12 S96 15 108 13 L109 16 C91 19 81 17 69 15 S27 11 5 16 C1 17 1 13 4 12Z'/%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.8' d='M115 11 C129 10 137 4 150 3 M116 12 C131 12 140 6 154 7 M117 14 C132 14 143 10 157 12 M117 16 C134 16 144 16 156 17 M116 18 C131 19 140 21 153 22 M114 19 C128 22 137 25 148 25'/%3E%3Cpath stroke-width='1.2' d='M124 12 Q136 9 145 7 M125 16 Q142 13 151 14 M124 19 Q137 21 146 23'/%3E%3Cpath stroke-width='2.2' d='M109 11 L107 18 M113 10 L111 19'/%3E%3C/g%3E%3C/svg%3E");
  flex:1;
  min-width:0;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative}
.hhb-story-progress button:before,.hhb-story-progress span {
  content:"";
  position:absolute;
  inset:2px 0;
  pointer-events:none;
  -webkit-mask:var(--story-broom) center / 100% 100% no-repeat;
  mask:var(--story-broom) center / 100% 100% no-repeat}
.hhb-story-progress button:before {
  background:#ffffff40}
.hhb-story-progress span {
  display:block;
  background:#fff;
  clip-path:inset(0 calc((1 - var(--story-progress))*100%) 0 0)}
.hhb-story-brand {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em}
.hhb-story-brand>span {
  display:flex;
  align-items:center;
  gap:10px}
.hhb-story-brand img {
  border-radius:50%}
.hhb-story-brand small {
  font-size:9px;
  color:#d9b9c3;
  font-weight:500}
.hhb-story button {
  color:inherit;
  font-family:inherit}
.hhb-story-pause,.hhb-story-controls>button {
  min-width:44px;
  min-height:44px;
  border:1px solid #ffffff30;
  border-radius:50%;
  background:#100c1480;
  font-size:18px;
  cursor:pointer;
  backdrop-filter:blur(12px)}
.hhb-story-stage {
  min-height:550px}
.hhb-story-slide {
  position:relative;
  min-height:550px;
  display:flex;
  align-items:center;
  padding:125px 85px 95px;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 20%,#8c214b50,transparent 55%),linear-gradient(135deg,#21141f,#0b0b10 70%)}
.hhb-story-slide:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,#08080bd9,#09090a38),linear-gradient(0deg,#07060be6,transparent 70%);
  pointer-events:none}
.hhb-story-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:hhb-story-pan 16s ease-out both}
.hhb-story-image--top {
  object-position:center top}
.hhb-story-image--bottom {
  object-position:center bottom}
.hhb-story-content {
  position:relative;
  z-index:2;
  width:100%;
  max-width:670px;
  animation:hhb-story-enter .65s ease-out both;
  overflow-wrap:anywhere}
.hhb-story-info {
  position:absolute;
  top:108px;
  right:24px;
  z-index:6}
.hhb-story-info button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid #ffffff70;
  border-radius:50%;
  background:#141017e6;
  color:#fff;
  font:bold 22px/1 Georgia,serif;
  cursor:pointer}
.hhb-story-info .hhb-story-info-text {
  position:absolute;
  top:100%;
  right:0;
  width:max-content;
  max-width:min(260px,calc(100vw - 84px));
  margin:0;
  padding:12px 16px;
  border:1px solid #ffffff70;
  border-radius:10px;
  background:#141017;
  box-shadow:0 8px 24px #0006;
  color:#fff;
  font:600 14px/1.5 system-ui;
  overflow-wrap:anywhere}
.hhb-story-eyebrow {
  color:#efb2c6;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  margin:0 0 22px}
.hhb-story h2 {
  font-size:clamp(32px,4.8vw,58px);
  font-weight:850;
  letter-spacing:-.045em;
  line-height:1.06;
  margin:0;
  text-wrap:balance}
.hhb-story-copy {
  font-size:clamp(15px,1.8vw,19px);
  line-height:1.65;
  max-width:590px;
  margin:20px 0 0;
  color:#e5dfe4;
  white-space:pre-line}
.hhb-story-date {
  display:flex;
  align-items:baseline;
  gap:15px;
  margin-bottom:12px}
.hhb-story-date strong {
  font-size:clamp(82px,11vw,130px);
  line-height:.95;
  letter-spacing:-.07em;
  font-weight:900}
.hhb-story-date span {
  font-size:19px;
  letter-spacing:.16em;
  color:#ee789c}
.hhb-story-slide--event h2 {
  font-size:clamp(28px,4vw,46px)}
.hhb-story-events {
  display:grid;
  gap:0;
  list-style:none;
  padding:0;
  margin:24px 0 0}
.hhb-story-event {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #ffffff24}
.hhb-story-event:first-child {
  padding-top:0}
.hhb-story-event:last-child {
  padding-bottom:0;
  border-bottom:0}
.hhb-story-event-date {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px}
.hhb-story-event-date strong {
  font-size:36px;
  line-height:1;
  font-variant-numeric:tabular-nums}
.hhb-story-event-date span {
  color:#ee789c;
  font-size:12px;
  letter-spacing:.08em}
.hhb-story-event h3 {
  margin:3px 0;
  font-size:clamp(17px,2.4vw,23px);
  line-height:1.25}
.hhb-story-event-day,.hhb-story-event-meta {
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#e5dfe4}
.hhb-story-event-day {
  color:#efb2c6;
  font-size:11px}
.hhb-story-slide--photo {
  align-items:flex-end}
.hhb-story-slide--photo:after {
  background:linear-gradient(0deg,#070609e6,transparent 80%)}
.hhb-story-slide--photo h2 {
  font-size:clamp(28px,4vw,44px)}
.hhb-story-links {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px}
.hhb-story-links a {
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:12px 20px;
  border-radius:30px;
  background:#af1f4a;
  text-decoration:none;
  font-weight:700;
  font-size:14px}
.hhb-story-links a+a {
  background:#ffffff15;
  border:1px solid #ffffff30}
.hhb-story-controls {
  position:absolute;
  inset:auto 24px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:5}
.hhb-story-count {
  font-size:11px;
  letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  color:#dbd0d8}
.hhb-story-controls [data-story-restart] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:25px;
  padding:0 16px;
  margin-left:auto;
  font-size:12px}
.hhb-story-controls [data-story-restart] svg {
  flex-shrink:0}
.hhb-story-hint {
  position:relative;
  z-index:10;
  text-align:center;
  font-size:11px;
  color:#aaa4a7;
  margin:14px 16px 30px;
  letter-spacing:.04em}
.hhb-story-weather {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse at 78% 20%,#ffffffb0,transparent 65%);
  mix-blend-mode:screen}
.hhb-story-weather i {
  position:absolute;
  right:19%;
  top:0;
  width:70px;
  height:70%;
  background:#ffefff;
  clip-path:polygon(60% 0,24% 43%,51% 40%,10% 100%,84% 29%,55% 34%,90% 0);
  filter:drop-shadow(0 0 12px white)}
.hhb-story.is-flashing .hhb-story-weather {
  animation:hhb-story-flash .7s ease-out}
.hhb-story.is-paused .hhb-story-image {
  animation-play-state:paused}
.hhb-story :focus-visible {
  outline:3px solid #f2adc5;
  outline-offset:3px}
.story-preview-banner {
  position:relative;
  z-index:20;
  text-align:center;
  padding:15px;
  background:#591d34;
  color:#fff}
.story-preview-banner a {
  margin-left:15px;
  color:#fff}
@keyframes hhb-story-enter {
  from {
  opacity:0;
  transform:translateY(18px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@keyframes hhb-story-pan {
  from {
  transform:scale(1)}
to {
  transform:scale(1.06)}
}
@keyframes hhb-story-flash {
  0% {
  opacity:0}
12% {
  opacity:.55}
35% {
  opacity:.1}
100% {
  opacity:0}
}
@media(max-width:600px) {
  .hhb-story {
  width:calc(100% - 24px);
  border-radius:22px}
.hhb-story-stage,.hhb-story-slide {
  min-height:580px;
  min-height:min(680px,85svh)}
.hhb-story-slide {
  padding:120px 26px 90px;
  align-items:center}
.hhb-story-slide--photo {
  align-items:flex-end}
.hhb-story-top {
  padding:14px 18px}
.hhb-story-info {
  top:96px;
  right:18px}
.hhb-story-brand small {
  display:none}
.hhb-story h2 {
  font-size:clamp(30px,8vw,44px)}
.hhb-story-copy {
  font-size:15px}
.hhb-story-controls {
  left:18px;
  right:18px}
.hhb-story-controls [data-story-prev],.hhb-story-controls [data-story-next],.hhb-story-restart-label {
  display:none}
.hhb-story-controls [data-story-restart] {
  width:44px;
  height:44px;
  padding:0;
  border-radius:50%}
.hhb-story-progress button:disabled {
  cursor:default}
.hhb-story-event {
  grid-template-columns:48px minmax(0,1fr);
  gap:12px}
.hhb-story-weather i {
  right:10%}
.hhb-story-content {
  max-width:100%}
}
@media(prefers-reduced-motion:reduce) {
  .hhb-story-image,.hhb-story-content,.hhb-story.is-flashing .hhb-story-weather {
  animation:none!important}
}