/* ===========================================================================
   Three.js typographic bookshelf
   Creating Stories is rendered as continuous recessed metal type. Project
   books sit in selected letter cavities and turn to their covers on hover.
   ========================================================================== */

@font-face {
  font-family: "Aeonik Hero";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/assets/fonts/Aeonik/Aeonik-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Aeonik Hero";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("/assets/fonts/Aeonik/Aeonik-Medium.woff2") format("woff2");
}

#top.hero-x {
  --hbs-ease: cubic-bezier(.16, 1, .3, 1);
  isolation: isolate;
  background: transparent;
}

#top.hero-x::after {
  position: absolute;
  top: var(--hbs-floor-y, 67%);
  right: 0;
  left: 0;
  z-index: 1;
  height: clamp(1.75rem, 4.8vh, 2.5rem);
  border-top: 1px solid rgba(35, 34, 31, .075);
  background: linear-gradient(180deg, rgba(35, 34, 31, .045) 0%, rgba(35, 34, 31, .018) 28%, transparent 82%);
  box-shadow: 0 -.55rem 1.4rem rgba(255, 255, 255, .12);
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  pointer-events: none;
}

#top.hero-x .hero-bookshelf-stage {
  position: absolute;
  z-index: 5;
  top: clamp(5.75rem, 10.5vh, 7.5rem);
  right: clamp(2rem, 3vw, 3.25rem);
  bottom: clamp(9.5rem, 21vh, 12.5rem);
  left: clamp(2rem, 3vw, 3.25rem);
  min-height: 18rem;
  overflow: hidden;
  contain: layout style;
  transform: translateY(clamp(-1.55rem, -2.4vh, -1rem));
  pointer-events: none;
}

#top.hero-x .hero-bookshelf-static-art {
  display: none;
  margin: 0;
  pointer-events: none;
}

#top.hero-x .hero-bookshelf-static-art img {
  display: block;
  width: 100%;
  height: auto;
}

#top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"] {
  pointer-events: auto;
}

#top.hero-x .hero-bookshelf-stage[data-renderer-mode="fallback"] {
  display: none;
}

/* Never expose the legacy DOM headline while the live bookshelf is booting.
   The supporting copy joins the completed composition instead of appearing
   as a separate, earlier hero. WebGL fallback and CMS media remain readable. */
body:not(.hero-stage-media-on):not(.stage-splash-on)
  #top.hero-x:not(.hero-letter-scene-ready):not(.hero-bookshelf-fallback) .hero-content,
body:not(.hero-stage-media-on):not(.stage-splash-on)
  #top.hero-x:not(.hero-letter-scene-ready):not(.hero-bookshelf-fallback) .hero-x-bar {
  opacity: 0 !important;
  visibility: hidden !important;
}

#top.hero-x .hero-chair-art {
  display: none;
}

body.hero-stage-media-on #top.hero-x .hero-bookshelf-stage,
body.stage-splash-on #top.hero-x .hero-bookshelf-stage {
  display: none;
}

#top.hero-x .hero-bookshelf-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: pan-y;
  cursor: default;
}

/* Shorter than the 1.15s scene settle in home-hero-bookshelf.js on purpose: the
   type is fully opaque while it is still easing forward out of the wall, so the
   reveal reads as the shelf assembling rather than a finished frame fading up. */
#top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="ready"] .hero-bookshelf-canvas,
#top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="empty"] .hero-bookshelf-canvas {
  animation: hbsCreatingFadeIn .7s var(--hbs-ease) .04s both;
}

@keyframes hbsCreatingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#top.hero-x .hero-bookshelf-canvas.is-over-book {
  cursor: pointer;
}

#top.hero-x .hero-bookshelf-continuation {
  position: absolute;
  right: 0;
  bottom: .15rem;
  left: 0;
  z-index: 3;
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--hero-fg);
  text-stroke: 1px var(--hero-fg);
  font: 700 clamp(.78rem, 1vw, 1rem)/1.05 var(--font-heading), "Aeonik", sans-serif;
  letter-spacing: .065em;
  text-align: center;
  text-transform: lowercase;
  transform: translate3d(var(--hbs-cont-offset-x, 0px), var(--hbs-cont-offset-y, 0px), 0) scale(var(--hbs-cont-scale, 1));
  transform-origin: left bottom;
  visibility: hidden;
  pointer-events: none;
}

#top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="ready"] .hero-bookshelf-continuation,
#top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="empty"] .hero-bookshelf-continuation {
  visibility: visible;
  animation: hbsContinuationFadeIn .7s var(--hbs-ease) .52s both;
}

@keyframes hbsContinuationFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#top.hero-x .hero-bookshelf {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#top.hero-x .hero-book-slot {
  display: contents;
}

#top.hero-x .hero-book {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#top.hero-x .hero-book:focus-visible {
  right: 50%;
  bottom: 1.8rem;
  z-index: 4;
  width: auto;
  height: auto;
  max-width: min(82%, 24rem);
  overflow: visible;
  clip: auto;
  clip-path: none;
  padding: .56rem .8rem;
  border: 1px solid color-mix(in srgb, var(--hero-fg) 20%, transparent);
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--page-bg) 94%, transparent);
  color: var(--hero-fg);
  box-shadow: 0 .55rem 1.4rem color-mix(in srgb, var(--hero-fg) 14%, transparent);
  font: 600 .72rem/1 var(--font-heading), "Aeonik", sans-serif;
  text-decoration: none;
  text-overflow: ellipsis;
  transform: translateX(50%);
  pointer-events: auto;
}

/* The DOM headline stays in the accessibility tree while WebGL owns the
   visible headline. The bottom copy retains its existing content. */
#top.hero-x.hero-letter-scene-ready .hero-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1201px) {
  #top.hero-x.hero-letter-scene-ready .hero-x-lede {
    transform: translateY(-.25rem);
  }

  #top.hero-x .hero-chair-art {
    --hero-chair-height: clamp(12.5rem, 28.35vh, 14.85rem);
    position: absolute;
    bottom: calc(var(--hero-chair-bottom, 35%) - 30px);
    right: var(--hero-chair-right, clamp(2.25rem, 3vw, 3rem));
    z-index: 6;
    display: block;
    width: calc(var(--hero-chair-height) * .7922);
    height: var(--hero-chair-height);
    margin: 0;
    opacity: 0;
    transform: translateX(var(--hero-chair-offset-x, 0px));
    pointer-events: none;
    isolation: isolate;
  }

  /* The chair belongs to the continuation phrase, not the bookshelf itself:
     reveal both together once the WebGL scene is ready. */
  #top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="ready"] + .hero-chair-art[data-image-ready="true"],
  #top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="empty"] + .hero-chair-art[data-image-ready="true"] {
    animation: hbsContinuationFadeIn .7s var(--hbs-ease) .52s both;
  }

  #top.hero-x .hero-chair-art::after {
    position: absolute;
    right: -5%;
    bottom: 1%;
    left: -5%;
    z-index: 0;
    height: 8%;
    background: radial-gradient(ellipse at center, rgba(28, 30, 34, .17) 0%, rgba(28, 30, 34, .07) 46%, transparent 78%);
    content: "";
    filter: blur(.5rem);
    transform: scaleX(.98);
  }

  #top.hero-x .hero-chair-art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(.18rem .42rem .5rem rgba(24, 26, 30, .12));
  }

  #top.hero-x.hero-letter-scene-ready .hero-row {
    justify-content: flex-end;
    padding-bottom: clamp(3.75rem, 7.5vh, 5rem);
  }

  #top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"] {
    right: auto;
    /* The 65%-scale composition has more internal canvas breathing room.
       Offset that margin so the visible C aligns with the logo/site edge. */
    left: calc(var(--site-edge) - clamp(13.5rem, 18vw, 19.5rem) - .75rem);
    width: min(82vw, 86rem);
    overflow: visible;
    transform: translateY(calc(clamp(-1.55rem, -2.4vh, -1rem) - .75rem));
  }

  #top.hero-x .hero-bookshelf-continuation {
    top: auto;
    right: auto;
    /* Share the STORIES baseline instead of floating above the 3D line. */
    bottom: var(--hbs-cont-bottom, 12%);
    left: var(--hbs-cont-left, calc(100% + 3rem));
    width: max-content;
    transform: translate3d(var(--hbs-cont-offset-x, 0px), var(--hbs-cont-offset-y, 0px), 0) scale(var(--hbs-cont-scale, 1));
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.3px #303238;
    text-stroke: 1.3px #303238;
    font-size: clamp(2.05rem, 2.42vw, 2.75rem);
    font-weight: 700;
    line-height: .94;
    letter-spacing: calc(-.03em + 1px);
    text-align: left;
    white-space: nowrap;
  }

  html body #top.hero-x .hero-tagline {
    line-height: 1.18;
    letter-spacing: -.025em;
  }

  html body #top.hero-x .hero-subtext {
    color: color-mix(in srgb, var(--hero-fg) 72%, transparent);
    line-height: 1.42;
    letter-spacing: -.005em;
  }
}

body.hero-stage-media-on #top.hero-x .hero-chair-art,
body.stage-splash-on #top.hero-x .hero-chair-art {
  display: none;
}

@media (min-width: 1201px) and (min-height: 801px) {
  #top.hero-x .hero-bookshelf-stage {
    overflow: visible;
  }
}

/* If CMS media is active, the Three.js scene stands down and the editable
   headline becomes visible again. The normal CMS preview keeps the scene live
   so artwork controls can be judged before saving. */
body.hero-stage-media-on #top.hero-x.hero-letter-scene-ready .hero-content,
body.stage-splash-on #top.hero-x.hero-letter-scene-ready .hero-content {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 1201px) {
  body.hero-stage-media-on #top.hero-x.hero-letter-scene-ready .hero-row,
  body.stage-splash-on #top.hero-x.hero-letter-scene-ready .hero-row {
    justify-content: space-between;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
  #top.hero-x .hero-bookshelf-stage {
    top: clamp(6.6rem, 16vh, 7.5rem);
    bottom: clamp(9.25rem, 21vh, 11.5rem);
    min-height: 17.5rem;
  }
}

@media (max-width: 1200px) {
  #top.hero-x {
    --hbs-mobile-stage-height: clamp(13.5rem, 49vw, 21rem);
    --hbs-mobile-stage-top: calc(5.6rem + env(safe-area-inset-top));
    height: auto;
    min-height: 100dvh;
    overflow: hidden;
  }

  #top.hero-x .hero-bookshelf-stage {
    position: relative;
    inset: auto;
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    height: var(--hbs-mobile-stage-height);
    min-height: 0;
    margin-top: var(--hbs-mobile-stage-top);
    padding: 0 var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem));
    box-sizing: border-box;
  }

  #top.hero-x .hero-bookshelf-canvas {
    /* The scene has generous internal camera breathing room. Pull that space
       outside the viewport so the visible C shares the logo's left edge. */
    transform: translateX(calc(clamp(-4.125rem, -15vw, -3rem) - .375rem));
  }

  #top.hero-x .hero-chair-art {
    position: absolute;
    top: var(--hero-chair-top, 10.75rem);
    right: var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem));
    bottom: auto;
    z-index: 6;
    display: block;
    width: clamp(3.1rem, 14vw, 4rem);
    height: auto;
    aspect-ratio: 880 / 1114;
    margin: 0;
    opacity: 0;
    transform: none;
    pointer-events: none;
  }

  #top.hero-x .hero-chair-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(.12rem .3rem .4rem rgba(24, 26, 30, .12));
  }

  #top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="ready"] + .hero-chair-art[data-image-ready="true"],
  #top.hero-x .hero-bookshelf-stage[data-renderer-mode="webgl"][data-state="empty"] + .hero-chair-art[data-image-ready="true"] {
    animation: hbsContinuationFadeIn .7s var(--hbs-ease) .52s both;
  }

  html body #top.hero-x .hero-row {
    position: relative;
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding:
      .35rem
      var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem))
      clamp(5rem, 20vw, 6rem);
  }

  #top.hero-x .hero-bookshelf-continuation {
    right: auto;
    bottom: 2.25rem;
    left: var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem));
    width: calc(100% - (2 * var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem))) - clamp(3.75rem, 17vw, 5rem));
    color: var(--hero-fg);
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    font-size: clamp(.76rem, 2.7vw, .95rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    text-align: left;
    white-space: normal;
  }

  html body.home-page #top.hero-x .hero-subtext-mask {
    max-width: 100%;
  }

  html body.home-page #top.hero-x .hero-subtext,
  html body.home-page #top.hero-x .hero-subtext [style*="font-size"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    font-size: clamp(.65625rem, 2.8vw, .75rem) !important;
    line-height: 1.35 !important;
    letter-spacing: -.018em;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

}

/* Phones and touch-first tablets preserve the WebGL composition as a responsive
   raster render, avoiding the Three.js parse/build cost on constrained devices. */
@media (max-width: 1200px), (hover: none), (pointer: coarse) {
  html.hero-lite body #top.hero-x {
    min-height: 0 !important;
  }

  html.hero-lite body #top.hero-x::after {
    display: none;
  }

  html.hero-lite body #top.hero-x .hero-bookshelf-stage {
    display: block;
    visibility: visible;
    pointer-events: none;
  }

  html.hero-lite body #top.hero-x .hero-bookshelf-static-art {
    position: absolute;
    top: clamp(.25rem, 1vw, .5rem);
    right: 0;
    left: 0;
    display: block;
  }

  html.hero-lite body #top.hero-x .hero-bookshelf-continuation {
    visibility: hidden;
    opacity: 0;
  }

  html.hero-lite body #top.hero-x .hero-row {
    order: 2;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    padding:
      .35rem
      var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem))
      clamp(5.5rem, 12vw, 6rem);
  }

  html.hero-lite body #top.hero-x .hero-content {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0;
    pointer-events: none;
  }

  html.hero-lite body.home-page #top.hero-x .hero-row .hero-content .hero-title,
  html.hero-lite body.home-page #top.hero-x .hero-row .hero-content .hero-title * {
    font-family: "Aeonik Hero", Arial, sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
  }

  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-tagline,
  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-tagline *,
  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-subtext,
  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-subtext * {
    font-family: "Aeonik Hero", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
  }

  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-tagline *,
  html.hero-lite body.home-page #top.hero-x .hero-row .hero-x-bar .hero-subtext * {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  html.hero-lite body #top.hero-x .hero-x-bar {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.hero-lite body #top.hero-x .hero-chair-art {
    display: none;
  }

  html.hero-lite body #top.hero-x .hero-chair-art[data-image-ready="true"] {
    animation: hbsContinuationFadeIn .55s var(--hbs-ease) both;
  }
}

@media (max-width: 480px) {
  #top.hero-x {
    --hbs-mobile-stage-height: clamp(10rem, 49vw, 13rem);
    --hbs-mobile-stage-top: calc(5.15rem + env(safe-area-inset-top));
  }

  #top.hero-x .hero-bookshelf-stage {
    height: var(--hbs-mobile-stage-height);
    margin-top: var(--hbs-mobile-stage-top);
  }

  html body #top.hero-x .hero-row {
    padding-top: 0;
  }
}

@media (min-width: 600px) and (max-width: 1200px) {
  html.hero-lite body #top.hero-x .hero-bookshelf-static-art {
    right: 1rem;
    left: -1rem;
  }
}

@media (max-width: 1200px) and (max-height: 520px) and (orientation: landscape) {
  #top.hero-x .hero-bookshelf-stage {
    display: none;
  }

  #top.hero-x.hero-letter-scene-ready .hero-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1;
  }

  html body #top.hero-x .hero-row {
    justify-content: space-between;
    padding-top: calc(5.5rem + env(safe-area-inset-top));
  }

  html.hero-lite body #top.hero-x .hero-row {
    padding-top: calc(5.5rem + env(safe-area-inset-top)) !important;
  }

  html.hero-lite body #top.hero-x .hero-bookshelf-stage {
    display: none;
  }

  html.hero-lite body #top.hero-x .hero-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1;
  }

  html.hero-lite body #top.hero-x .hero-chair-art {
    display: block;
    top: calc(7.25rem + env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: clamp(20rem, 48vw, 27rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #top.hero-x .hero-bookshelf-canvas,
  #top.hero-x .hero-bookshelf-continuation,
  #top.hero-x .hero-chair-art {
    opacity: 1;
    animation: none !important;
  }

  #top.hero-x .hero-book:focus-visible {
    transition: none;
  }
}