/* Nocturnal Bloom — a living research atlas, with real text and navigation. */
:root {
  --ink: #29283d; --deep: #252437; --silver: #e4e6ef; --muted: #b9bccd;
  --line: #c9cdd330; --citron: #d0d681; --raspberry: #e87896;
  --lapis: #91b0ed; --mist: #bfd6d5; --reading-pink: #d9a4b5; --reading-ink: #351a2b;
  --booking-paper: #e9e7ed; --booking-ink: #29283d;
  --atlas-copy: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
body {
  background: radial-gradient(ellipse at 85% 30%, #303047 0, transparent 64%), #29283d;
}
.scene { display: none; }
.reading-cta, .header-book, .button-primary {
  background: var(--booking-paper); border: 1px solid #f8f6fb99; color: var(--booking-ink);
}
.reading-cta:hover, .header-book:hover, .button-primary:hover {
  background: #f5f3f7; filter: none;
}
.site-header { background: #29283de8; }
dialog { background: linear-gradient(145deg,#343249,#262538); }
.glass-form { background: linear-gradient(145deg,#343249ee,#29283def); }
.blog-dot { background: var(--raspberry); color: var(--raspberry); }
.astro-dot { background: var(--lapis); color: var(--lapis); }
.still-dot { background: var(--mist); color: var(--mist); }
.contact-dot { background: var(--citron); color: var(--citron); }
.button-amber { background: #49503b; border-color: #969e6e; }
.site-header .wordmark, .site-footer .wordmark, .dialog-top .wordmark {
  font-weight: 500; letter-spacing: 2px;
}
button:focus-visible, a:focus-visible { outline-color: var(--citron); }

#home-view {
  width: 100%; max-width: 1740px; height: 100svh; min-height: 650px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  position: relative; margin: 0 auto; gap: 0;
  padding: 0 clamp(28px,4.6vw,80px) clamp(28px,4.5svh,46px);
  font-family: var(--atlas-copy); isolation: isolate;
}
#home-view .home-header {
  min-height: clamp(70px,9.6svh,96px); display: flex; align-items: center;
  gap: 28px; flex-shrink: 0; position: relative; z-index: 2;
}
#home-view .wordmark {
  font-family: var(--serif); font-size: 30px; font-weight: 500;
  letter-spacing: 3.5px; line-height: 1; white-space: nowrap;
}
.header-rule { height: 1px; width: min(18vw,270px); background: linear-gradient(90deg,#bfc4d66b,#bfc4d612); position: relative; }
.header-rule::before { content: ""; position: absolute; top: -1px; width: 3px; height: 3px; background: #bfc4d6; border-radius: 50%; }
.atlas-mark { margin-left: auto; color: #c9cad38c; font-size: 14px; letter-spacing: 8px; white-space: nowrap; }
#home-view .home-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 21px;
  min-height: 44px; padding: 10px 22px; border-radius: 28px;
  font-size: 12px; line-height: 1.5; white-space: nowrap; margin-left: 38px;
  transition: background .2s;
}
#home-view .home-book svg { width: 25px; height: 20px; }
#home-view .menu-button { display: none; }
#home-view .home-stage { position: relative; flex: 1; min-height: 330px; }
#home-view .home-intro { position: relative; z-index: 1; width: 31%; padding-top: clamp(25px,5.2svh,64px); }
#home-view .home-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: 2.3px; line-height: 1.7; margin-bottom: 13px; color: #d3d5e1; }
#home-view h1 { font-size: clamp(64px,6.5vw,100px); line-height: .89; letter-spacing: -2.1px; font-weight: 500; }
#home-view .home-description { color: #bfc3d4; font-size: clamp(12px,1.13vw,16px); line-height: 1.75; letter-spacing: -.15px; max-width: 360px; margin-top: 24px; }
.atlas-illustration { position: absolute; inset: -2% -5.1% 0 6%; pointer-events: none; }
.atlas-art { width: 88%; right: 0; position: absolute; top: 50%; transform: translateY(-50%); }
.atlas-art img { display: block; width: 100%; height: auto; filter: saturate(1.06) brightness(1.02); }
.atlas-note { position: absolute; font-size: 10px; line-height: 1.4; letter-spacing: .25px; color: #d8dbe4; text-shadow: 0 1px 5px #29283d; }
.note-lived { top: 13%; left: 27%; }
.note-symbols { top: 1%; left: 51%; }
.note-dreams { top: 8%; left: 68%; }
.note-patterns { top: 16%; left: 91%; }

#home-view .home-worlds { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(26px,4.1vw,70px); width: 100%; flex-shrink: 0; position: relative; z-index: 1; }
#home-view .home-world { display: block; min-width: 0; position: relative; border-radius: 2px; }
#home-view .home-world + .home-world::before { content: ""; position: absolute; width: 1px; height: 54%; top: 23%; left: calc(clamp(26px,4.1vw,70px) / -2); background: linear-gradient(0deg,transparent,#bdc4d658,transparent); }
#home-view .home-world + .home-world::after { content: ""; position: absolute; width: 2px; height: 2px; top: 77%; left: calc(clamp(26px,4.1vw,70px) / -2 - .5px); border-radius: 50%; background: #c4c6d5; }
.world-blog { --world: #e58ca6; --detail-x: 5.24%; }
.world-astro { --world: var(--lapis); --detail-x: 35.78%; }
.world-still { --world: var(--mist); --detail-x: 65.64%; }
.world-contact { --world: var(--citron); --detail-x: 94.91%; }
#home-view .home-art {
  --thumbnail-height: clamp(78px,12.8svh,128px);
  --thumbnail-filter: saturate(1) brightness(1);
  display: block; width: min(100%,calc(var(--thumbnail-height) * 1.953125)); height: var(--thumbnail-height);
  background-image: url("assets/nocturnal-atlas-details.png");
  background-size: 634.4% 775%; background-position: var(--detail-x) 77.546%;
  mask-image: linear-gradient(0deg,transparent,black 7%,black 94%,transparent);
  filter: var(--thumbnail-filter);
  transition: transform .45s ease, filter .45s ease;
}
#home-view .home-world-label { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(34px,3.4vw,48px); line-height: 1.06; letter-spacing: 2.4px; color: var(--world); margin-top: 12px; }
#home-view .home-world-caption { display: block; font-size: clamp(10px,.95vw,13px); color: #c3c5d4; line-height: 1.65; margin-top: 9px; }
#home-view .world-arrow { display: block; width: 58px; height: 23px; color: var(--world); margin-top: 14px; transition: transform .3s ease; }
#home-view .home-world:hover .home-art { transform: translateY(-4px); filter: var(--thumbnail-filter) brightness(1.08); }
#home-view .home-world:hover .world-arrow { transform: translateX(7px); }
#home-view .mobile-reading { display: none; }

/* Carry the selected palette and artwork into existing destination pages. */
.world-art-panel, .contact-art { background: #29283d; box-shadow: none; border-color: #bfc5d626; }
.world-art-panel .card-art, .contact-art .card-art { background-image: url("assets/nocturnal-atlas.png"); background-size: 390% auto; background-repeat: no-repeat; filter: saturate(.8); }
.world-art-panel.world-astro .card-art { background-position: 46% 50%; }
.world-art-panel.world-still .card-art { background-position: 72% 50%; }
.contact-art.world-contact .card-art { background-position: 100% 50%; }
.world-art-panel::after { background: linear-gradient(0deg,#29283d,transparent 45%); }

@media (min-width: 801px) and (max-height: 740px) {
  #home-view { min-height: 580px; padding-bottom: 24px; }
  #home-view .home-header { min-height: 66px; }
  #home-view .home-stage { min-height: 290px; }
  #home-view .home-intro { padding-top: 28px; }
  #home-view h1 { font-size: clamp(60px,6vw,84px); }
  #home-view .home-description { margin-top: 17px; }
  #home-view .home-art { --thumbnail-height: 76px; }
  #home-view .home-world-label { font-size: 34px; margin-top: 8px; }
  #home-view .home-world-caption { margin-top: 5px; }
  #home-view .world-arrow { margin-top: 9px; height: 19px; }
  .atlas-art { width: 88%; right: 0; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  #home-view .home-intro { width: 36%; }
  #home-view h1 { font-size: 66px; }
  .atlas-illustration { left: 19%; }
  #home-view .home-worlds { gap: 30px; }
  #home-view .home-world + .home-world::before, #home-view .home-world + .home-world::after { left: -15px; }
  #home-view .home-world-caption { font-size: 10px; }
  .atlas-note { font-size: 9px; }
}

/* Mobile has its own floating atlas composition in home-mobile.css. */
.mobile-index, .mobile-contact-art, .mobile-atlas-art { display: none; }
@media (prefers-reduced-motion: reduce) {
  #home-view .home-art, #home-view .world-arrow { transition: none; }
}

/* The selected mobile composition uses a shorter introduction. */
#home-view .home-description-mobile { display: none; }

#home-view .caption-mobile { display: none; }

/* Memory & Encounter: thumbnail excerpts from the shared desktop artwork. */
@media (min-width: 801px) {
  #home-view .world-blog { --world: #e67f9b; }
  #home-view .world-astro { --world: #7fa5ec; }
  #home-view .world-still { --world: #bad6bf; }
  #home-view .world-contact { --world: #d8d76b; }
  /* Center each visible group within its equal-width navigation column. */
  #home-view .home-world {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
  }
  #home-view .home-art {
    --thumbnail-filter: saturate(1.12) brightness(1.04);
    width: calc(var(--thumbnail-height) * 1.953125);
    max-width: 100%;
  }
  #home-view .world-blog .home-art,
  #home-view .world-contact .home-art {
    background-image: url("assets/memory-encounter-desktop.png");
    background-size: 420% auto;
    --thumbnail-filter: saturate(.57) contrast(.87) brightness(1.02);
    opacity: .88;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
  #home-view .world-blog .home-art {
    background-color: #4b2637;
    background-size: 480% auto;
    background-position: 25.5% 42%;
    mask-image: url("assets/blog-thumbnail-mask.svg");
  }
  #home-view .world-contact .home-art {
    background-color: #293225;
    background-size: 700% auto;
    background-position: 94% 40%;
    mask-image: url("assets/contact-thumbnail-mask.svg");
  }
  #home-view .world-astro .home-art {
    background-size: 660.8% 775%;
    background-position: 35.14% 77.546%;
    mask-image: url("assets/blog-thumbnail-mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
  /* The original Still sprite includes a purple rectangle outside this silhouette. */
  #home-view .world-still .home-art {
    mask-image: url("assets/still-thumbnail-mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}