/* Original collage geometry lives in the captured reference stylesheets.
   These additions affect accessibility, interaction states, and reading intervals. */
.di-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.di-modal-open { overflow: hidden; }
a:focus-visible, [role="button"]:focus-visible { outline: 2px dashed #ff0; outline-offset: 3px; }
[role="button"] { cursor: pointer; }
.js-iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.l-iframe-browser.hidden, .catscape-window.hidden { display: none !important; }
.js-iframe-source { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

/* Reserve an address line under the intro ornament without covering hotspots. */
.di-contract-address {
  position: absolute;
  top: calc(50% + 70px);
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: min(640px, calc(100% - 32px));
  margin: 0;
  color: #ffe5a1;
  font: bold 22px/1.4 "Courier New", Courier, monospace;
  text-align: center;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 0 8px #8c5b13;
  pointer-events: none;
}
.di-contract-address abbr {
  flex-shrink: 0;
  border: 0;
  text-decoration: none;
}
.di-contract-address__value {
  min-width: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
  user-select: all;
  pointer-events: auto;
}
.di-contract-address__value:empty { display: none; }

/* Reading intervals inherit the actual textures and colors of adjoining scenes. */
.di-story {
  --story-above: none;
  --story-below: none;
  --story-above-color: #0c030b;
  --story-below-color: #11041f;
  --story-above-phase: 0px;
  --story-below-phase: 0px;
  --story-wash-top: #110a17;
  --story-center: #08070d;
  --story-wash-bottom: #120b1c;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 101;
  isolation: isolate;
  box-sizing: border-box;
  padding: 176px 48px 180px;
  background: linear-gradient(180deg, var(--story-wash-top), var(--story-center) 36%, var(--story-center) 64%, var(--story-wash-bottom));
  color: #e6e0d3;
  text-align: center;
  overflow-wrap: break-word;
}
.di-story::before, .di-story::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 220px;
  max-height: 42%;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
.di-story::before {
  top: 0;
  background-color: var(--story-above-color);
  background-image: var(--story-above);
  background-position: center var(--story-above-phase);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.94) 12%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 73%, transparent);
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.94) 12%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 73%, transparent);
}
.di-story::after {
  bottom: 0;
  background-color: var(--story-below-color);
  background-image: var(--story-below);
  background-position: center calc(100% + var(--story-below-phase));
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0,0,0,.94) 12%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 73%, transparent);
  mask-image: linear-gradient(to top, #000, rgba(0,0,0,.94) 12%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 73%, transparent);
}
/* Tile phases continue the centered reference backgrounds across each seam. */
#memory-1 {
  --story-above: url('/_reference/img/content/4/bg.png');
  --story-below: url('/_reference/img/content/5/bg.jpg');
  --story-above-phase: -58.5px;
  --story-below-phase: 328.5px;
}
#memory-2 {
  --story-above: url('/_reference/img/content/12/bg.gif');
  --story-below: url('/_reference/img/content/13/bg.png');
  --story-above-color: #5eaffc;
  --story-below-color: #d1d6fe;
  --story-above-phase: -15px;
  --story-below-phase: 214px;
  --story-wash-top: #123457;
  --story-center: #0b1123;
  --story-wash-bottom: #343049;
}
#memory-3 {
  --story-above: url('/_reference/img/content/18/bg.png');
  --story-below: url('/_reference/img/content/19/bg.png');
  --story-above-color: #888;
  --story-below-color: #171717;
  --story-above-phase: 36px;
  --story-below-phase: 542px;
  --story-wash-top: #303033;
  --story-center: #101012;
  --story-wash-bottom: #171717;
}
#memory-4 {
  --story-above: url('/_reference/img/content/26/bg.png');
  --story-above-color: #771e2f;
  --story-below-color: #131901;
  --story-above-phase: -399px;
  --story-wash-top: #2c101c;
  --story-center: #100e0c;
  --story-wash-bottom: #131901;
}
#memory-5 {
  --story-above: url('/_reference/img/content/33/bg.png');
  --story-above-color: #cd2800;
  --story-below-color: #050509;
  --story-above-phase: -78.5px;
  --story-wash-top: #41130a;
  --story-center: #120a0a;
  --story-wash-bottom: #050509;
}
.di-story__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  opacity: 1;
  transform: none;
  transition: opacity 800ms ease, transform 800ms ease;
}
.di-story.is-waiting .di-story__inner { opacity: 0; transform: translateY(16px); }
.di-story__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 24px;
  color: #c6a668;
  font: 14px/1 'Courier New', monospace;
}
.di-story__ornament::before, .di-story__ornament::after { content: ''; width: 74px; height: 1px; background: #76603b; }
.di-story__index { margin: 0 0 26px; color: #a99572; font: 12px/1.5 'Courier New', monospace; letter-spacing: .2em; }
.di-story__title { margin: 0 0 30px; color: #f0d497; font: normal 44px/1.2 Georgia, 'Times New Roman', serif; text-wrap: balance; }
.di-story__copy { margin: 0; color: #e6e0d3; font: normal 25px/1.8 Georgia, 'Times New Roman', serif; text-wrap: pretty; }
.di-story--closing .di-story__copy { color: #f0d497; font-size: 40px; line-height: 1.45; text-wrap: balance; }
.di-story--closing strong { font-weight: normal; }
@media screen and (max-width: 900px) {
  .di-story { padding: 184px 58px 188px; }
  .di-story__inner { max-width: 764px; }
  .di-story__index { font-size: 18px; }
  .di-story__title { font-size: 52px; }
  .di-story__copy { font-size: 34px; line-height: 1.7; }
  .di-story--closing .di-story__copy { font-size: 46px; }
}
/* Keep text visible in reduced-motion mode and when printing. */
@media (prefers-reduced-motion: reduce) {
  .di-story__inner, .di-story.is-waiting .di-story__inner { opacity: 1; transform: none; transition: none; }
}
@media print {
  .di-story__inner, .di-story.is-waiting .di-story__inner { opacity: 1; transform: none; }
}

/* Center the About section; let long copy scroll naturally on short screens. */
.page { margin-bottom: 0; }
.info, .di-has-story .info {
  position: absolute;
  top: var(--di-collage-height, 15880px);
  bottom: auto;
  left: 0;
  height: auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 84px 32px 76px;
  background: #050509;
  text-align: center;
}
.info .info__inner {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 1100px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}
.info .info__fullWidth, .info .info__column { float: none; width: 100%; }
.info .info__title {
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0;
  font-size: clamp(52px, 6.1vw, 88px);
  line-height: 1.1;
  text-wrap: balance;
}
.info .info__summary {
  max-width: 800px;
  margin: 0 auto 32px;
  padding: 0;
  font-size: 24px;
  line-height: 1.55;
  text-wrap: pretty;
}
.info .info__description {
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  font-size: 18px;
  line-height: 1.7;
  text-wrap: pretty;
}
.info .info__description p { margin: 0 0 22px; padding: 0; }
.info .info__description p:last-child { margin-bottom: 0; }
/* Fallback for an older cached HTML document during a deployment. */
.info .footer { display: none !important; }
@media screen and (max-width: 880px) {
  .info, .di-has-story .info { padding: 100px 54px 96px; }
  .info .info__title { max-width: 760px; font-size: 64px; margin-bottom: 44px; }
  .info .info__summary { font-size: 36px; margin-bottom: 40px; }
  .info .info__description { max-width: 760px; font-size: 32px; line-height: 1.65; }
  .info .info__description p { margin-bottom: 30px; }
}