/* ==========================================================================
   KYBOS SITE ATLAS — THE KING FOREST JOURNEY: STYLES
   --------------------------------------------------------------------------
   Loaded after styles.css, whose tokens, type classes, buttons and brand
   mark it reuses. This file adds the paper page, the fixed stage with its
   layers, the sheet's own lettering, the stops and the end block.

   Layers of the stage, back to front:
     canvas (or still)  →  paper margin  →  paper grain  →  sheet lettering
   The stops scroll over all of them.
   ========================================================================== */

/* ---- Page ----------------------------------------------------------------- */
html:has(body.journey) {
  background: var(--bone);
  scroll-behavior: auto; /* the smooth-scroll engine, when it runs, does this job */
}

body.journey {
  --sheet-paper: var(--bone);
  --sheet-ink: var(--ink-900);
  --hairline: rgba(10, 15, 17, 0.2);
  --copy-width: min(29rem, 30vw);
  background: var(--sheet-paper);
  color: var(--sheet-ink);
}

/* ---- Header --------------------------------------------------------------- */
.journey-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  padding-top: env(safe-area-inset-top);
}

.journey-header__back {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}

.journey-header__back:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (min-width: 48em) {
  .journey-header__back {
    display: inline-flex;
  }
}

/* ---- Stage ---------------------------------------------------------------- */
.journey-track {
  position: relative;
}

.stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--sheet-paper);
}

.stage__canvas,
.stage__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__still {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stage__still.is-shown {
  opacity: 1;
}

/* The sheet's margin: paper that the copy sits on once the site has risen. */
.stage__margin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--margin-day, 0);
  background: linear-gradient(0deg, var(--sheet-paper) 0, rgba(237, 230, 218, 0.94) 25%, rgba(237, 230, 218, 0.55) 35%, rgba(237, 230, 218, 0) 47%);
}

@media (min-aspect-ratio: 6/5) {
  .stage__margin {
    background: linear-gradient(90deg, var(--sheet-paper) 0, rgba(237, 230, 218, 0.97) 24%, rgba(237, 230, 218, 0.72) 35%, rgba(237, 230, 218, 0) 54%);
  }
}

/* Paper fibre over everything, so the capture and the drawing share one surface. */
.stage__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.3  0 0 0 0 0.22  0.15 0 0 0 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.stage__status {
  position: absolute;
  left: var(--gutter);
  bottom: 1.4rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.stage__status.is-shown {
  opacity: 1;
}

.stage__status::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--copper);
}

.stage__status.is-busy::before {
  animation: status-pulse 1.6s ease-in-out infinite;
}

@keyframes status-pulse {
  50% {
    opacity: 0.25;
  }
}

.stage__notice {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--nav-h) + 0.75rem);
  z-index: 3;
  max-width: 34rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--hairline);
  background: var(--sheet-paper);
  font-size: 0.8125rem;
  color: var(--fg-2);
}

/* ---- The sheet's own lettering -------------------------------------------- */
.furniture {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--sheet, 1);
}

.furniture > * {
  opacity: 0;
  transition: opacity 1.1s ease 0.15s;
}

.stage.is-plotted .furniture > * {
  opacity: 1;
}

/* Set against the neat line: --fx0/--fy0 is its top left on screen, --fx1/--fy1 its bottom right
   (journey.js keeps them up to date). */
.north {
  display: grid;
  justify-items: center;
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.north svg {
  width: 1.05rem;
  height: 1.5rem;
}

.scalebar__bar {
  width: var(--bar, 7rem);
  height: 0.4rem;
  border: 1px solid var(--sheet-ink);
  background: linear-gradient(90deg, var(--sheet-ink) 0 25%, transparent 25% 50%, var(--sheet-ink) 50% 75%, transparent 75%);
}

/* The title strip runs along the sheet's foot, inside the neat line, as on a drawing: scale, title, what the
   plan is made from, and the disclaimer. --fys is where the drawing ends and the strip begins. */
.titlestrip {
  position: absolute;
  left: var(--fx0, 34vw);
  right: calc(100% - var(--fx1, 96vw));
  top: var(--fys, 84vh);
  bottom: calc(100% - var(--fy1, 92vh));
  display: flex;
  align-items: stretch;
  min-height: 3.1rem;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.3;
}

.titlestrip__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-left: 1px solid var(--hairline);
  min-width: 0;
}

.titlestrip__cell:first-child {
  border-left: 0;
}

.titlestrip__cell--scale {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.titlestrip__cell--scale,
.titlestrip__cell--title {
  flex: none;
}

.titlestrip__cell--title {
  border-left-color: var(--sheet-ink);
  white-space: nowrap;
}

.titlestrip__product,
.titlestrip__rows dt {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.titlestrip__product {
  color: var(--sheet-ink);
}

.titlestrip__site {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.titlestrip__rows {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.titlestrip__rows dd {
  margin: 0;
  max-width: 9.5rem;
  text-wrap: balance;
}

.titlestrip__rows .titlestrip__cell {
  flex: 1 1 0;
}

/* Fewer cells as the strip gets shorter. */
@media (max-width: 78em) {
  .titlestrip__rows .titlestrip__cell:nth-child(3) {
    display: none;
  }
}

@media (max-width: 64em) {
  .titlestrip__rows {
    display: none;
  }
}

/* Narrow screens: the drawing is too small to carry a strip, so its title sits under the header instead. */
@media (max-aspect-ratio: 6/5), (max-width: 47.99em) {
  .titlestrip__cell--scale,
  .titlestrip__rows {
    display: none;
  }

  .titlestrip {
    left: var(--gutter);
    right: auto;
    top: calc(var(--nav-h) + 0.9rem);
    bottom: auto;
    border: 1px solid var(--sheet-ink);
    background: var(--sheet-paper);
  }


  .titlestrip__cell--title {
    border-left: 0;
  }
}

/* ---- Stops ---------------------------------------------------------------- */
.stops {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}

.stop {
  min-height: calc(var(--scroll, 2) * 100vh);
  min-height: calc(var(--scroll, 2) * 100svh);
}

.stop__pin {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) max(4.25rem, 9vh);
}

.stop__copy {
  width: 100%;
  max-width: 34rem;
  pointer-events: auto;
  opacity: var(--show, 1);
}

.stop__eyebrow {
  margin-bottom: 0.9rem;
}

.stop__title {
  font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.stop__body {
  max-width: 31em;
  margin-top: 1rem;
  font-size: clamp(1.03rem, 0.97rem + 0.32vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.stop__cue {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.stop__cue-line {
  position: relative;
  width: 1px;
  height: 2.4rem;
  overflow: hidden;
  background: var(--hairline);
}

.stop__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sheet-ink);
  transform: translateY(-100%);
  animation: cue-drop 2.4s var(--ease-in-out) infinite;
}

@keyframes cue-drop {
  55%,
  100% {
    transform: translateY(100%);
  }
}

@media (min-aspect-ratio: 6/5) and (min-width: 48em) {
  .stop__copy {
    max-width: var(--copy-width);
  }

  .stop:first-child .stop__copy {
    max-width: min(var(--copy-width), calc(var(--clear, 100vw) - var(--gutter)));
  }

  /* The first stop is the sheet's title: it sits beside the drawing, not under it. */
  .stop:first-child .stop__pin {
    align-items: center;
    padding-bottom: 2rem;
  }

  .stop:first-child .stop__title {
    font-size: clamp(2.2rem, 1.2rem + 2.9vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }
}

/* ---- End block ------------------------------------------------------------- */
.journey-end {
  position: relative;
  z-index: 6;
  background: var(--sheet-paper);
  color: var(--sheet-ink);
  border-top: 1px solid var(--sheet-ink);
}

.journey-end__inner {
  display: grid;
  gap: 1.1rem;
  padding-block: clamp(4rem, 10vw, 8rem) 2.5rem;
}

.journey-end__notes {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--fg-3);
}

.journey-end__legal {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--fg-3);
}

/* ---- When the 3D journey cannot run: still frames, plainly laid out -------- */
.journey.is-still .stage__canvas {
  display: none;
}

.journey.is-still .furniture {
  display: none;
}

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stop__cue-line::after,
  .stage__status.is-busy::before {
    animation: none;
  }

  .stop__cue-line::after {
    transform: none;
  }

  .furniture > *,
  .stage__still,
  .stage__status {
    transition: none;
  }
}


/* ==========================================================================
   Once a lot is opened: the Site Atlas interface
   The page goes from paper to the dark of the live interface (--night, set by
   journey.js), and the interface's own parts sit over the stage (journey-ui.js).
   ========================================================================== */
.journey {
  --atlas-night: #0d1417;
  --atlas-panel: rgba(13, 22, 24, 0.92); /* solid enough to need no blur: blurring what is behind it blacks out the 3D canvas */
  --atlas-line: rgba(255, 255, 255, 0.16);
  --atlas-text: #edf2ed;
  --atlas-soft: #b8c4bd;
  --atlas-amber: #c8863a;
  --atlas-green: #6fe39a;
}

.stage__margin--night {
  opacity: var(--margin-night, 0);
  background: linear-gradient(0deg, var(--atlas-night) 0, rgba(13, 20, 23, 0.94) 25%, rgba(13, 20, 23, 0.5) 36%, rgba(13, 20, 23, 0) 49%);
}

@media (min-aspect-ratio: 6/5) {
  .stage__margin--night {
    background: linear-gradient(90deg, var(--atlas-night) 0, rgba(13, 20, 23, 0.95) 18%, rgba(13, 20, 23, 0.6) 30%, rgba(13, 20, 23, 0) 47%);
  }
}

.stage__grain {
  opacity: calc(0.7 * (1 - var(--night, 0)));
}

.stop--night .stop__title {
  color: #f4efe6;
}

.stop--night .stop__body {
  color: #c3cdc6;
}

.stop--night .stop__eyebrow {
  color: #e0a763;
}

.stop--silent .stop__copy {
  display: none;
}

.journey-header {
  transition: color 0.5s ease;
}

.journey.is-night .journey-header .brand,
.journey.is-shade .journey-header .brand,
.journey.is-night .journey-header__back {
  color: #f4efe6;
}

.journey.is-night .journey-header .brand__product,
.journey.is-shade .journey-header .brand__product {
  color: #b8c4bd;
  border-color: rgba(255, 255, 255, 0.3);
}

.atlasui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: var(--atlas-text);
  font-family: Inter, var(--font);
}

.atlasui button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---- The lot card, as on the live site ------------------------------------ */
.lotcard {
  position: absolute;
  top: calc(var(--nav-h) + 1.1rem);
  right: var(--gutter);
  bottom: 3.9rem;
  left: 36%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
  background: linear-gradient(0deg, rgba(10, 17, 19, 0.95), rgba(10, 17, 19, 0.6) 30%, rgba(10, 17, 19, 0) 52%, rgba(10, 17, 19, 0) 86%, rgba(11, 20, 22, 0.17));
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.27);
  pointer-events: auto;
}

.lotcard__top {
  position: absolute;
  top: 18px;
  right: 18px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--atlas-soft);
}

.lotcard__count b {
  margin-left: 10px;
  font-weight: 400;
  color: #fff;
}

.lotcard__toast {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--atlas-green);
  color: #10231a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lotcard__toast.is-shown {
  opacity: 1;
  transform: none;
}

.lotcard__share {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 17px;
  background: rgba(23, 32, 36, 0.65);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.lotcard__toast + .lotcard__share {
  margin-left: 0;
}

.lotcard__bottom {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) minmax(0, 0.6fr);
  align-items: end;
  gap: 18px;
}

.lotcard__project {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #e0a763;
}

.lotcard__name {
  margin: 7px 0;
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.5px;
}

.lotcard__design {
  margin: 2px 0 12px;
  font-size: 13px;
  color: #e6ece6;
}

.lotcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lotcard__spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(13, 22, 24, 0.72);
  font-size: 12px;
  color: #dfe7e1;
}

.lotcard__spec svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--atlas-amber);
}

.lotcard__spec b {
  font-weight: 500;
}

.lotcard__credits {
  margin: 12px 0 0;
  font-size: 11px;
  color: #c2cdc5;
}

.lotcard__credits b {
  font-weight: 500;
  color: #fff;
}

.lotcard__note {
  margin: 8px 0 0;
  font-size: 9px;
  letter-spacing: 0.4px;
  color: #8fa29c;
}

.lotcard__stages {
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(13, 22, 24, 0.85);
}

.lotcard__timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 11px;
  padding: 0;
  list-style: none;
}

.lotcard__timeline li {
  position: relative;
  text-align: center;
  font-size: 9px;
  line-height: 1.25;
  color: #8fa29c;
}

/* The line that joins one stage to the next. */
.lotcard__timeline li + li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 50%;
  width: 100%;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.16);
}

.lotcard__timeline li.is-complete + li::before,
.lotcard__timeline li.is-current::before {
  background: var(--atlas-green);
}

.lotcard__timeline i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin: 0 auto 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: #0d1618;
  font-style: normal;
}

.lotcard__timeline .is-complete i,
.lotcard__timeline .is-current i {
  border-color: var(--atlas-green);
  background: var(--atlas-green);
}

.lotcard__timeline .is-complete i::after,
.lotcard__timeline .is-current i::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-bottom: 1.8px solid #0f2a1c;
  border-left: 1.8px solid #0f2a1c;
  transform: rotate(-45deg);
}

.lotcard__timeline .is-current i {
  box-shadow: 0 0 0 4px rgba(111, 227, 154, 0.22);
}

.lotcard__timeline .is-current span {
  font-weight: 600;
  color: #fff;
}

.lotcard__timeline .is-next i {
  border-color: var(--atlas-amber);
}

.lotcard__detail {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lotcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lotcard__head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.lotcard__when {
  font-size: 10px;
  color: var(--atlas-green);
}

.lotcard__next {
  margin: 4px 0 11px;
  font-size: 11px;
  color: #c2cdc5;
}

.atlasui .lotcard__primary {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--atlas-amber);
  box-shadow: 0 10px 30px rgba(200, 134, 58, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  font-size: 13px;
  font-weight: 600;
  color: #17221d;
  transition: transform 0.15s ease, background 0.15s ease;
}

.atlasui .lotcard__primary:hover {
  background: #e6a756;
  transform: translateY(-1px);
}

.lotcard__side {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lotcard__status {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #e0a763;
}

.lotcard__status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
}

.lotcard__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.lotcard__actions button {
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(23, 32, 36, 0.8);
  font-size: 11px;
  transition: background 0.15s ease;
}

.lotcard__actions button:hover,
.lotcard__share:hover {
  background: #2c3a3d;
}

/* ---- The tabs that follow the card ---------------------------------------- */
.atlasdock {
  position: absolute;
  top: calc(var(--nav-h) + 0.35rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 5px;
  border: 1px solid var(--atlas-line);
  border-radius: 999px;
  background: var(--atlas-panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  pointer-events: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.atlasdock__lot {
  padding: 0 10px 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e0a763;
}

.atlasdock__tab {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12px;
  white-space: nowrap;
  color: #c9d3cc;
  transition: background 0.25s ease, color 0.25s ease;
}

.atlasui .atlasdock__tab {
  color: #c9d3cc;
}

.atlasui .atlasdock__tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.atlasui .atlasdock__tab.is-current {
  background: var(--atlas-amber);
  font-weight: 600;
  color: #17221d;
}

/* ---- Tags inside the home -------------------------------------------------- */
.atlastag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.atlastag i {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--atlas-amber);
  box-shadow: 0 0 0 5px rgba(200, 134, 58, 0.28);
}

.atlastag__box {
  position: absolute;
  top: -16px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 7px;
  border: 1px solid var(--atlas-line);
  border-radius: 9px;
  background: var(--atlas-panel);
  white-space: nowrap;
}

.atlastag b {
  font-size: 12px;
  font-weight: 600;
}

.atlastag span {
  font-size: 10.5px;
  color: var(--atlas-soft);
}

.atlastag--left .atlastag__box {
  right: 18px;
  left: auto;
}

/* ---- The viewer for the real capture --------------------------------------- */
.tourview {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0b1012;
  pointer-events: auto;
}

/* The tabs stay on top of the viewer, so the visitor can still jump from inside the real capture. */
.atlasdock {
  z-index: 2;
}

.tourview__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shade for the words that sit over the film. */
.tourview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 14, 0.88) 0, rgba(8, 12, 14, 0.5) 30%, rgba(8, 12, 14, 0) 52%), linear-gradient(0deg, rgba(8, 12, 14, 0.6), rgba(8, 12, 14, 0) 26%);
  pointer-events: none;
}

.tourview.is-exploring::after {
  display: none;
}

.tourview__bar {
  position: absolute;
  top: calc(var(--nav-h) + 3.4rem);
  left: var(--gutter);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tourview__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.tourview__kind {
  padding: 4px 10px;
  border: 1px solid rgba(111, 227, 154, 0.5);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--atlas-green);
}

.tourview__cta {
  position: absolute;
  right: var(--gutter);
  bottom: 4.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  max-width: 24rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 16px;
  background: rgba(8, 12, 14, 0.62);
  text-align: right;
}

.tourview__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #c3cdc6;
}

.tourview__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.tourview__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.tourview.is-exploring .tourview__bar,
.tourview.is-exploring .tourview__cta {
  display: none;
}

.atlasui .tourview__close,
.tourview__away {
  position: absolute;
  bottom: 1.1rem;
  z-index: 4;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(13, 22, 24, 0.9);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--atlas-text);
}

.atlasui .tourview__close {
  right: var(--gutter);
  background: var(--atlas-amber);
  border-color: transparent;
  color: #17221d;
}

/* Bottom right: the one corner the capture's own controls leave free. */
.tourview__away {
  right: calc(var(--gutter) + 11.5rem);
}

/* While the real capture is being explored it has the screen to itself. */
.journey.is-exploring .journey-header,
.journey.is-exploring .stops,
.journey.is-exploring .atlasdock,
.journey.is-exploring .tourpilot {
  visibility: hidden;
}

/* ---- The 4D timeline: a line to drag between two dated captures --------------- */
.splitline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

.atlasui .splitline__handle {
  position: absolute;
  top: 54%;
  left: -1px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  color: #17221d;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.splitline__handle svg {
  width: 22px;
  height: 22px;
}

.splitline__date {
  position: absolute;
  top: calc(var(--nav-h) + 3.4rem);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px 8px;
  border: 1px solid var(--atlas-line);
  border-radius: 10px;
  background: var(--atlas-panel);
  white-space: nowrap;
}

.splitline__date b {
  font-size: 13px;
  font-weight: 600;
}

.splitline__date small {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--atlas-soft);
}

.splitline__date--before {
  right: 14px;
  text-align: right;
}

.splitline__date--after {
  left: 12px;
}

.splitline__date--after b {
  color: #e0a763;
}

.splitline__hint {
  position: absolute;
  top: calc(54% + 34px);
  left: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 22, 24, 0.8);
  font-size: 11px;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
}

.splitline.is-held .splitline__hint {
  opacity: 0;
}

.timebar {
  position: absolute;
  bottom: 4.1rem;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 9px 12px 9px 16px;
  border: 1px solid var(--atlas-line);
  border-radius: 14px;
  background: var(--atlas-panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  white-space: nowrap;
}

.timebar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--atlas-soft);
}

.timebar__chip {
  padding: 6px 11px;
  border: 1px solid rgba(140, 200, 255, 0.55);
  border-radius: 9px;
}

.timebar__chip--latest {
  border-color: var(--atlas-amber);
}

.timebar__arrow {
  color: var(--atlas-soft);
}

.timebar__mode {
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--atlas-amber);
  font-weight: 600;
  color: #17221d;
}

/* ---- The site report ---------------------------------------------------------- */
.sitereport {
  position: absolute;
  top: calc(var(--nav-h) + 3.6rem);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  width: min(19.5rem, 30vw);
  padding: 18px 20px 16px;
  border: 1px solid var(--atlas-line);
  border-radius: 18px;
  background: var(--atlas-panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.sitereport__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--atlas-soft);
}

.sitereport__figure {
  margin-top: 12px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
}

.sitereport__line {
  margin-top: 5px;
  font-size: 12px;
  color: var(--atlas-soft);
}

.sitereport__strip {
  display: flex;
  gap: 2px;
  height: 6px;
  margin: 14px 0 12px;
  overflow: hidden;
  border-radius: 3px;
}

.sitereport__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
}

.sitereport__legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sitereport__legend i {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sitereport__legend b {
  margin-left: auto;
  font-weight: 600;
}

.sitereport__tag {
  align-self: flex-start;
  margin-top: 16px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.sitereport__title {
  margin: 7px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.sitereport__rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 0;
  font-size: 11.5px;
}

.sitereport__rows dt {
  color: var(--atlas-soft);
}

.sitereport__rows dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.sitereport__note {
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #8fa29c;
}

/* ---- Narrow and tall screens ------------------------------------------------ */
@media (max-aspect-ratio: 6/5), (max-width: 60rem) {
  .lotcard {
    top: calc(var(--nav-h) + 0.6rem);
    right: 0.75rem;
    bottom: 44%;
    left: 0.75rem;
    border-radius: 18px;
  }

  .lotcard__top {
    top: 12px;
    right: 12px;
    left: 16px;
    letter-spacing: 1px;
  }

  .lotcard__bottom {
    right: 14px;
    bottom: 14px;
    left: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .lotcard__side,
  .lotcard__credits,
  .lotcard__note,
  .lotcard__timeline {
    display: none;
  }

  .lotcard__detail {
    padding-top: 0;
    border-top: 0;
  }

  .atlasdock {
    left: 0.75rem;
    transform: none;
    max-width: calc(100% - 1.5rem);
  }

  .sitereport {
    top: calc(var(--nav-h) + 3.4rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    padding: 14px 16px 12px;
  }

  .sitereport__tag,
  .sitereport__title,
  .sitereport__rows {
    display: none;
  }

  .timebar {
    bottom: auto;
    top: calc(var(--nav-h) + 3.4rem);
    right: auto;
    left: 0.75rem;
    max-width: calc(100% - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .splitline__date {
    top: calc(var(--nav-h) + 7rem);
  }

  .tourview__cta {
    top: calc(var(--nav-h) + 6.2rem);
    right: 0.75rem;
    bottom: auto;
    left: 0.75rem;
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }

  .tourview::after {
    background: linear-gradient(0deg, rgba(8, 12, 14, 0.92) 0, rgba(8, 12, 14, 0.6) 34%, rgba(8, 12, 14, 0) 62%), linear-gradient(180deg, rgba(8, 12, 14, 0.75), rgba(8, 12, 14, 0) 34%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lotcard__toast,
  .atlasdock__tab,
  .journey-header {
    transition: none;
  }
}

.journey-end__cta {
  margin-top: 1.6rem;
}

/* ---- The guided tour: a button to start it, and one to pause it or carry on ---- */
.stop__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin-top: 1.6rem;
}

.stop__start {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.stop__start svg {
  width: 1.05em;
  height: 1.05em;
}

.stop__own {
  font-size: 0.875rem;
  color: var(--fg-3);
}

.tourpilot {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  z-index: 25;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(13, 22, 24, 0.9);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #edf2ed;
  transform: translateX(-50%);
  cursor: pointer;
}

.tourpilot.is-paused {
  border-color: transparent;
  background: var(--copper);
  color: #17221d;
}

.tourpilot[hidden] {
  display: none;
}

/* ---- Back to top ---------------------------------------------------------- */
.totop {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--nav-h) / 2);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(237, 230, 218, 0.88);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sheet-ink);
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s, background 0.2s ease;
}

.totop.is-shown {
  opacity: 1;
  visibility: visible;
}

.totop:hover {
  background: var(--sheet-paper);
}

.totop svg {
  width: 1rem;
  height: 1rem;
}

.journey.is-night .totop {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(13, 22, 24, 0.88);
  color: #edf2ed;
}

/* ---- The nudge to keep scrolling: dots that fall into an arrow ------------- */
.scrollcue {
  position: fixed;
  top: 32%;
  left: var(--gutter);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  color: var(--copper);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scrollcue.is-shown {
  opacity: 1;
  transform: none;
}

.scrollcue__arrow {
  position: relative;
  display: block;
  width: 22px;
  height: 140px;
  flex-shrink: 0;
}

.scrollcue__arrow i {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: scrollcue-dot 1.6s ease-in-out infinite;
}

.scrollcue__arrow i:nth-child(1) { top: 0; }
.scrollcue__arrow i:nth-child(2) { top: 18px; animation-delay: 0.18s; }
.scrollcue__arrow i:nth-child(3) { top: 36px; animation-delay: 0.36s; }

/* The shaft and the head: they drop a little in time with the dots. */
.scrollcue__arrow b {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 4px;
  height: 64px;
  margin-left: -2px;
  border-radius: 2px;
  background: currentColor;
  animation: scrollcue-drop 1.6s ease-in-out infinite;
}

.scrollcue__arrow b::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 20px solid currentColor;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  transform: translate(-50%, 15px);
}

.scrollcue__label {
  padding-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes scrollcue-dot {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  45% { opacity: 1; transform: scale(1); }
}

@keyframes scrollcue-drop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

.journey.is-exploring .scrollcue,
.journey.is-exploring .totop {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue__arrow i,
  .scrollcue__arrow b {
    animation: none;
  }

  .scrollcue__arrow i {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Phones held upright: the interface packed into what a narrow screen leaves
   above the words (they sit at the foot of the screen).
   ========================================================================== */
@media (max-aspect-ratio: 6/5), (max-width: 60rem) {
  /* The lot card: name, the three main facts and the one button, in a panel at the top. */
  .lotcard {
    bottom: auto;
    padding: 12px 14px 14px;
    background: var(--atlas-panel);
  }

  .lotcard__top,
  .lotcard__bottom {
    position: static;
  }

  .lotcard__top {
    margin-bottom: 6px;
    white-space: nowrap;
  }

  .lotcard__share,
  .lotcard__toast + .lotcard__share {
    margin-left: auto;
  }

  /* "Link copied" appears over the card instead of taking room in its top row. */
  .lotcard__toast {
    position: absolute;
    top: 50px;
    right: 14px;
  }

  /* The words' dark ground is at the foot of the screen here, so the logo at the top stays dark over a light scene. */
  .journey.is-shade:not(.is-night) .journey-header .brand {
    color: var(--sheet-ink);
  }

  .journey.is-shade:not(.is-night) .journey-header .brand__product {
    color: var(--fg-2);
    border-color: var(--hairline);
  }

  .lotcard__name {
    margin: 4px 0;
    font-size: 28px;
  }

  .lotcard__design {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .lotcard__spec:nth-child(n + 4),
  .lotcard__head,
  .lotcard__next {
    display: none;
  }

  .lotcard__stages {
    padding: 0;
    border: 0;
    background: none;
  }

  /* The tabs: smaller, and the row fades at its ends to show it slides. */
  .atlasdock {
    padding: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }

  .atlasdock__lot {
    display: none;
  }

  .atlasui .atlasdock__tab {
    padding: 6px 11px;
    font-size: 12px;
  }

  /* Tags inside the home: names only. */
  .atlastag span {
    display: none;
  }

  .atlastag__box {
    top: -13px;
    padding: 5px 8px;
  }

  .atlastag b {
    font-size: 11px;
  }

  /* The 4D timeline: the two dates beside the line say it all, so the bar is left out. */
  .timebar {
    display: none;
  }

  .splitline__date {
    top: calc(var(--nav-h) + 3.9rem);
  }

  /* The real capture: its film keeps the measuring in view, and its button sits under the words. */
  .tourview__film {
    object-position: 42% 50%;
  }

  .tourview__bar {
    top: calc(var(--nav-h) + 3.9rem);
  }

  .tourview__cta {
    top: auto;
    right: auto;
    bottom: 0.9rem;
    left: 0.75rem;
    padding: 0;
    background: none;
  }

  .tourview__explore {
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
  }

  /* Back to top: a round button in the corner (the top bar has no room), above the tour's own button. */
  .totop {
    position: fixed;
    top: auto;
    right: 0.75rem;
    bottom: 1rem;
    left: auto;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    justify-content: center;
    transform: none;
  }

  .totop span {
    display: none;
  }

  .journey.has-pilot .totop {
    bottom: 3.9rem;
  }

  /* The nudge: smaller, at the foot of the screen under the words. */
  .scrollcue {
    top: auto;
    bottom: 1rem;
    left: 0.75rem;
    gap: 0.6rem;
  }

  .scrollcue__arrow {
    width: 14px;
    height: 54px;
  }

  .scrollcue__arrow i {
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
  }

  .scrollcue__label {
    padding-bottom: 4px;
    font-size: 0.6875rem;
  }

  .scrollcue__arrow i:nth-child(2) { top: 9px; }
  .scrollcue__arrow i:nth-child(3) { top: 18px; }

  .scrollcue__arrow b {
    top: 27px;
    width: 3px;
    height: 20px;
    margin-left: -1.5px;
  }

  .scrollcue__arrow b::after {
    border-top-width: 9px;
    border-right-width: 6px;
    border-left-width: 6px;
    transform: translate(-50%, 6px);
  }

  /* The tour's pause and resume button moves to the corner, clear of that button. */
  .tourpilot {
    right: 0.75rem;
    left: auto;
    transform: none;
  }
}

/* ---- The phone film (journey-film.js): it takes the 3D canvas's place ---------- */
.stage__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--sheet-paper);
}

.journey.is-film .stage__canvas {
  display: none;
}

/* The film plays the comparison by itself as the visitor scrolls: the line is shown, not dragged. */
.journey.is-film .splitline__handle {
  pointer-events: none;
}

.journey.is-film .splitline__hint {
  display: none;
}