/* One reading layer and a restrained material palette across the continuous scene. */
:root {
  --hann-reading-light: var(--hann-surface, #f6f7fb);
  --hann-reading-dark: var(--hann-graphite, #151828);
}
#home[data-hann-story] > #home-hero,
#home[data-hann-story] > #home-reel,
#home[data-hann-story] > #home-featured,
#home[data-hann-story] > #home-goal {
  display: none !important;
}
html.hann-story-active #canvas {
  visibility: hidden;
  pointer-events: none;
}
html:is(.hann-story-active, .hann-closing-active) #ui {
  z-index: 1;
}
html:is(.hann-story-active, .hann-closing-active) #scroll-indicator {
  z-index: 2;
}
.hann-story-visual-host {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  background: var(--hann-reading-dark);
}
.hann-story-viewport-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hann-story-viewport-scene iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
#hann-hub-story,
.hann-reading-host {
  --hann-story-pad: clamp(32px, 3.333333vw, 128px);
  --hann-reading-top: clamp(120px, calc(64px + 4.583333vw), 240px);
  --hann-reading-header-gap: clamp(40px, 2.916667vw, 96px);
  --hann-reading-title-size: clamp(56px, calc(32px + 2.5vw), 128px);
  --hann-reading-title-line: clamp(60px, calc(36px + 2.5vw), 132px);
  --hann-reading-opening-size: clamp(64px, calc(40px + 2.916667vw), 152px);
  --hann-reading-opening-line: clamp(66px, calc(42px + 2.96875vw), 156px);
  --hann-reading-body-size: clamp(18px, calc(12px + 0.416667vw), 28px);
  --hann-reading-body-line: clamp(28px, calc(20px + 0.520833vw), 40px);
  --hann-reading-bottom: clamp(32px, 4.166667vh, 88px);
}
#hann-hub-story {
  position: relative;
  color: var(--hann-reading-light);
  background: var(--hann-reading-dark);
}
.hann-story-beat {
  position: relative;
  min-height: 100svh;
}
.hann-story-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  padding: var(--hann-reading-top) var(--hann-story-pad) var(--hann-reading-bottom);
  display: flex;
  align-items: flex-start;
}
.hann-story-copy {
  position: relative;
  width: 100%;
  max-width: clamp(600px, 38vw, 1200px);
}
.hann-story-title {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  font-family: var(--hann-display-font, 'Aeonik', sans-serif);
  font-weight: var(--hann-display-weight, 500);
  font-style: normal;
  font-synthesis: none;
  font-size: var(--hann-reading-title-size);
  line-height: var(--hann-reading-title-line);
  letter-spacing: var(--hann-display-tracking, -0.035em);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
.hann-story-title > span {
  display: block;
}
.hann-story-description {
  max-width: 28em;
  margin: 24px 0 0;
  font-family: var(--hann-ui-font, sans-serif);
  font-size: var(--hann-reading-body-size);
  line-height: var(--hann-reading-body-line);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.hann-story-connection {
  max-width: 28em;
  margin: 16px 0 0;
  font-size: var(--hann-reading-body-size);
  line-height: var(--hann-reading-body-line);
}
.hann-story-cta {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
  color: inherit;
  font-family: var(--hann-ui-font, sans-serif);
  font-size: var(--hann-reading-body-size);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  white-space: nowrap;
}
.hann-story-cta > [aria-hidden='true'] {
  transition: transform 150ms;
}
.hann-story-cta:hover > [aria-hidden='true'] {
  transform: translate(2px, -2px);
}
.hann-story-cta:focus-visible,
.hann-story-links a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.hann-story-secondary {
  margin-left: 24px;
}
.hann-story-status {
  margin-bottom: 0;
  cursor: default;
}
.hann-story-assets {
  margin-top: 24px;
  font-size: var(--hann-reading-body-size);
  line-height: var(--hann-reading-body-line);
}
.hann-story-assets p {
  margin: 0 0 8px;
}
.hann-story-assets ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hann-story-relation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 16px;
  font-family: var(--hann-display-font, sans-serif);
  font-size: clamp(32px, 2.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hann-story-relation-arrow {
  font-size: 0.55em;
}
.hann-story-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 16px;
  font-size: var(--hann-reading-body-size);
  line-height: var(--hann-reading-body-line);
}
.hann-story-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.hann-story-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hann-story-scene video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hann-hub-story[data-enhanced='true'] {
  background: transparent;
}
#hann-hub-story[data-continuous='true'] .hann-story-beat {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0;
  pointer-events: none;
  will-change: transform;
}
#hann-hub-story[data-continuous='true'] .hann-story-panel {
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0;
}
#hann-hub-story[data-continuous='true'] .hann-story-title {
  opacity: var(--hann-title-opacity, 0);
}
#hann-hub-story[data-continuous='true'] .hann-story-reading {
  opacity: var(--hann-body-opacity, 0);
}
#hann-hub-story[data-continuous='true'] .hann-story-beat[data-active='true'] .hann-story-copy {
  pointer-events: auto;
}
.hann-story-panel:focus-within .hann-story-title,
.hann-story-panel:focus-within .hann-story-reading {
  opacity: 1 !important;
}
#hann-hub-story .hann-story-beat[data-role='opening'] .hann-story-copy {
  max-width: calc(var(--hann-reading-opening-size) * 11);
}
#hann-hub-story .hann-story-beat[data-role='opening'] .hann-story-title {
  font-size: var(--hann-reading-opening-size);
  line-height: var(--hann-reading-opening-line);
}
#hann-hub-story #home-hero-scroll-container {
  left: var(--hann-story-pad);
  width: calc(100% - 2 * var(--hann-story-pad));
  bottom: 16px;
  color: inherit;
}

/* Actual reading stays outside transformed source UI, with normal surface ink. */
.hann-reading-host,
.hann-reading-panel,
.hann-reading-panel .hann-story-copy {
  display: contents;
}
.hann-reading-panel {
  --hann-reading-columns: 0;
  --hann-reading-safe-top: max(
    var(--hann-reading-top),
    calc(var(--hann-reading-header-bottom, 0px) + var(--hann-reading-header-gap))
  );
  --hann-reading-copy-width: min(
    clamp(600px, 38vw, 1200px),
    calc(100vw - 2 * var(--hann-story-pad))
  );
  --hann-reading-copy-left: var(--hann-story-pad);
  --hann-reading-body-left: var(--hann-reading-copy-left);
  padding-top: var(--hann-reading-safe-top);
  padding-bottom: var(--hann-reading-bottom);
  pointer-events: none;
}
.hann-reading-panel[hidden],
.hann-reading-cue[hidden],
.hann-header-wordmark[hidden],
.hann-next-title[hidden] {
  display: none !important;
}
.hann-reading-panel .hann-story-title,
.hann-reading-panel .hann-story-reading {
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  left: var(--hann-reading-copy-left);
  width: var(--hann-reading-copy-width);
  pointer-events: auto;
  color: var(--hann-reading-light);
  mix-blend-mode: normal;
}
.hann-reading-panel .hann-story-title {
  top: var(--hann-reading-safe-top);
}
.hann-reading-panel .hann-story-reading {
  left: var(--hann-reading-body-left);
  top: var(--hann-reading-body-top, var(--hann-reading-safe-top));
}
.hann-reading-panel[data-copy-align='right'] {
  --hann-reading-copy-left: calc(100vw - var(--hann-story-pad) - var(--hann-reading-copy-width));
}
.hann-reading-panel[data-copy-align='center'] {
  --hann-reading-copy-left: calc((100vw - var(--hann-reading-copy-width)) / 2);
}
.hann-reading-panel[data-role='opening'] {
  --hann-reading-copy-width: min(
    calc(var(--hann-reading-opening-size) * 11),
    calc(100vw - 2 * var(--hann-story-pad))
  );
}
.hann-reading-panel[data-role='opening'] .hann-story-title {
  font-size: var(--hann-reading-opening-size);
  line-height: var(--hann-reading-opening-line);
  text-wrap: initial;
}
.hann-reading-panel[data-role='opening'] .hann-story-reading {
  max-width: 28em;
}
.hann-reading-panel:is([data-scene-kind='assembly'], [data-scene-kind='planet'])
  .hann-story-assets {
  display: none;
}
.hann-reading-panel[data-scene-kind='assembly'] {
  --hann-reading-copy-width: min(
    clamp(420px, 32vw, 1040px),
    calc(100vw - 2 * var(--hann-story-pad))
  );
}
.hann-reading-panel:is([data-scene-kind='swap'], [data-scene-kind='earn']) {
  --hann-reading-copy-left: var(--hann-story-pad);
  --hann-reading-title-size: clamp(40px, 3vw, 96px);
  --hann-reading-title-line: calc(var(--hann-reading-title-size) * 1.08);
  --hann-reading-body-size: clamp(16px, 1.1vw, 28px);
  --hann-reading-body-line: clamp(24px, 1.65vw, 40px);
}
.hann-reading-panel[data-source-reading='true'] .hann-story-title {
  left: var(--hann-source-reading-title-left);
  top: var(--hann-source-reading-title-top);
  width: var(--hann-source-reading-title-width);
}
.hann-reading-panel[data-source-reading='true'] .hann-story-reading {
  display: flow-root;
  left: var(--hann-source-reading-body-left);
  top: var(--hann-source-reading-body-top);
  width: var(--hann-source-reading-body-width);
}
.hann-reading-panel[data-incoming-reading='true'] {
  --hann-incoming-paint-pad: 8px;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-copy {
  display: block;
  position: fixed;
  box-sizing: border-box;
  padding: var(--hann-incoming-paint-pad) 0;
  left: var(--hann-incoming-left);
  top: var(--hann-incoming-top);
  width: var(--hann-incoming-width);
  height: var(--hann-incoming-height);
  max-width: none;
  overflow: hidden;
  pointer-events: auto;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-title,
.hann-reading-panel[data-incoming-reading='true'] .hann-story-reading {
  position: static;
  width: 100%;
  max-width: none;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-reading {
  display: flow-root;
  margin-top: 12px;
}
.hann-reading-panel[data-incoming-reading='true']
  :is(.hann-story-description, .hann-story-assets, .hann-story-cta) {
  margin-top: 8px;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-assets p {
  margin-bottom: 4px;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-assets li {
  white-space: nowrap;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-cta {
  margin-right: 24px;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-cta:last-child {
  margin-right: 0;
}
.hann-reading-panel[data-incoming-reading='true'] .hann-story-secondary {
  margin-left: 0;
}
.hann-reading-panel[data-source-reading='true'] .hann-story-reading > :first-child {
  margin-top: 0;
}
.hann-reading-panel[data-source-reading='true']
  :is(.hann-story-description, .hann-story-assets, .hann-story-cta) {
  margin-top: 8px;
}
.hann-reading-panel[data-source-reading='true'] .hann-story-assets p {
  margin-bottom: 4px;
}
.hann-reading-panel[data-source-reading='true'] .hann-story-relation {
  margin-top: 8px;
  font-size: clamp(24px, 1.8vw, 48px);
  line-height: 1.12;
}
.hann-reading-panel[data-role='finale'] .hann-story-title {
  font-size: clamp(44px, 3.333333vw, 96px);
  line-height: 1.04;
}
.hann-reading-panel[data-framed='true'] .hann-story-title {
  left: var(--hann-reading-frame-left, var(--hann-reading-copy-left));
  top: var(--hann-reading-frame-title-top, var(--hann-reading-safe-top));
  width: var(--hann-reading-frame-width, var(--hann-reading-copy-width));
  margin: 0;
}
.hann-reading-panel[data-framed='true'] .hann-story-reading {
  left: var(--hann-reading-frame-left, var(--hann-reading-copy-left));
  top: var(--hann-reading-frame-body-top, var(--hann-reading-safe-top));
  width: var(--hann-reading-frame-width, var(--hann-reading-copy-width));
  margin: 0;
}
.hann-reading-panel[data-framed='true'] .hann-story-description {
  margin-top: 0;
}
.hann-reading-panel[data-framed='true'] .hann-story-cta {
  margin-top: 12px;
}
.hann-reading-panel :is(.hann-story-title, .hann-story-reading)[data-ink='white'],
.hann-header-wordmark[data-ink='white'],
.hann-next-title[data-ink='white'] {
  mix-blend-mode: normal;
  color: var(--hann-reading-light) !important;
}
.hann-reading-panel :is(.hann-story-title, .hann-story-reading)[data-ink='black'],
.hann-header-wordmark[data-ink='black'],
.hann-next-title[data-ink='black'] {
  mix-blend-mode: normal;
  color: var(--hann-reading-dark) !important;
}
.hann-reading-panel [data-surface-ink='white'] {
  color: var(--hann-reading-light) !important;
}
.hann-reading-panel [data-surface-ink='black'] {
  color: var(--hann-reading-dark) !important;
}
.hann-reading-cue {
  position: fixed !important;
  left: var(--hann-story-pad) !important;
  right: var(--hann-story-pad);
  bottom: 24px !important;
  width: auto !important;
  height: 36px !important;
  z-index: 3;
  color: var(--hann-reading-light) !important;
  mix-blend-mode: normal;
  pointer-events: none;
}
.hann-reading-cue[data-ink='black'] {
  color: var(--hann-reading-dark) !important;
}
.hann-reading-cue #home-hero-scroll-container-crosses {
  left: 196px;
  top: 50%;
  right: 0;
  width: auto;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.hann-reading-cue .home-hero-scroll-container-cross {
  display: none;
}
.hann-reading-cue #home-hero-scroll {
  left: 0;
  transform: translateY(-50%);
  font: 11px/1.4 var(--hann-mono-font, monospace);
  letter-spacing: 0.04em;
}
.hann-header-wordmark,
.hann-next-title {
  position: fixed !important;
  z-index: 4;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none;
  color: var(--hann-reading-light) !important;
  mix-blend-mode: normal;
}
.hann-header-wordmark {
  display: block;
  overflow: visible;
}
.hann-reading-original-title {
  opacity: 0 !important;
}
html.hann-closing-active .end-section-content-cross,
html.hann-closing-active #end-bottom {
  visibility: hidden;
}

.hann-assembly-scene {
  overflow: hidden;
  background: #151828;
}
.hann-assembly-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

@media (min-width: 2560px) {
  .hann-story-cta {
    min-height: 56px;
  }
}
@media (max-width: 1099px) {
  #hann-hub-story,
  .hann-reading-host {
    --hann-story-pad: 32px;
    --hann-reading-top: 120px;
  }
  .hann-story-copy {
    max-width: 600px;
  }
  .hann-reading-panel {
    --hann-reading-copy-width: min(600px, calc(100vw - 2 * var(--hann-story-pad)));
  }
}
@media (max-width: 699px) {
  #hann-hub-story,
  .hann-reading-host {
    --hann-story-pad: 24px;
    --hann-reading-top: 112px;
    --hann-reading-header-gap: 40px;
    --hann-reading-title-size: clamp(36px, 11.282051vw, 44px);
    --hann-reading-title-line: calc(var(--hann-reading-title-size) + 2px);
    --hann-reading-opening-size: var(--hann-reading-title-size);
    --hann-reading-opening-line: var(--hann-reading-title-line);
    --hann-reading-body-size: 16px;
    --hann-reading-body-line: 24px;
    --hann-reading-bottom: 32px;
  }
  .hann-story-description {
    margin-top: 16px;
  }
  .hann-story-cta {
    gap: 14px;
    margin-top: 14px;
    min-height: 48px;
  }
  .hann-story-secondary {
    margin-left: 16px;
  }
  .hann-story-relation {
    font-size: 28px;
  }
  .hann-reading-panel[data-role='finale'] .hann-story-title {
    font-size: var(--hann-reading-title-size);
    line-height: var(--hann-reading-title-line);
  }
  .hann-reading-panel {
    --hann-reading-copy-width: calc(100vw - 2 * var(--hann-story-pad));
    --hann-reading-copy-left: var(--hann-story-pad);
  }
  .hann-reading-panel[data-copy-align='right'] {
    --hann-reading-copy-left: var(--hann-story-pad);
  }
  .hann-reading-panel:is([data-scene-kind='swap'], [data-scene-kind='earn']) {
    --hann-reading-title-size: 34px;
    --hann-reading-title-line: 36px;
    --hann-reading-body-size: 16px;
    --hann-reading-body-line: 24px;
  }
  .hann-reading-panel[data-scene-kind='assembly'] {
    --hann-reading-copy-width: calc(100vw - 2 * var(--hann-story-pad));
  }
  .hann-reading-panel[data-scene-kind='assembly'] .hann-story-reading {
    margin-top: 16px;
  }
  .hann-reading-cue #home-hero-scroll-container-crosses {
    left: 176px;
  }
}
@media (max-height: 450px) {
  #hann-hub-story,
  .hann-reading-host {
    --hann-story-pad: 24px;
    --hann-reading-top: 88px;
    --hann-reading-header-gap: 32px;
    --hann-reading-title-size: 36px;
    --hann-reading-title-line: 38px;
    --hann-reading-opening-size: 36px;
    --hann-reading-opening-line: 38px;
    --hann-reading-body-size: 15px;
    --hann-reading-body-line: 22px;
    --hann-reading-bottom: 24px;
  }
  .hann-story-description {
    margin-top: 12px;
  }
  .hann-story-cta {
    min-height: 44px;
    margin-top: 12px;
  }
  .hann-reading-panel[data-role='finale'] .hann-story-title {
    font-size: 36px;
    line-height: 38px;
  }
  .hann-reading-panel[data-framed='true'] .hann-story-reading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .hann-reading-panel[data-framed='true'] .hann-story-description {
    max-width: 32em;
  }
  .hann-reading-panel[data-framed='true'] .hann-story-cta {
    margin: 0;
  }
}
@media (min-width: 700px) and (max-height: 450px) {
  .hann-reading-panel:not([data-framed='true']):not([data-incoming-reading='true']) {
    --hann-reading-columns: 1;
    --hann-reading-copy-width: calc((100vw - 2 * var(--hann-story-pad) - 32px) / 2);
    --hann-reading-copy-left: var(--hann-story-pad);
    --hann-reading-body-left: calc(var(--hann-story-pad) + var(--hann-reading-copy-width) + 32px);
  }
  .hann-reading-panel:not([data-framed='true']):not([data-incoming-reading='true'])
    .hann-story-reading {
    margin-top: 0;
  }
  .hann-reading-panel:not([data-framed='true']):not([data-incoming-reading='true'])
    .hann-story-description {
    margin-top: 0;
  }
  .hann-reading-panel[data-role='opening'] .hann-story-title {
    max-width: 390px;
  }
  .hann-reading-panel:is([data-scene-kind='swap'], [data-scene-kind='earn']) {
    --hann-reading-title-size: 34px;
    --hann-reading-title-line: 36px;
    --hann-reading-body-size: 15px;
    --hann-reading-body-line: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hann-story-beat {
    will-change: auto !important;
  }
  .hann-story-cta > [aria-hidden='true'] {
    transition: none;
  }
}
.no-js #ui,
.no-js #sections-container {
  position: relative !important;
}
.no-js #page-container {
  transform: none !important;
}
.no-js #preloader,
.no-js #canvas,
.no-js #transition-overlay {
  display: none !important;
}
.no-js body {
  height: auto;
  overflow: auto;
}
