/* The Living Observatory: warm human imagery inside a quiet, luminous instrument. */
.living-observatory {
  --gold: #d7bd8c;
  --gold-soft: #f4e4c5;
  --muted: #a7b6c2;
  --line: #b6cbe026;
  --living-cyan: #9bc9cd;
  background: #050d17;
  color: #eee9df;
}
.living-observatory::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 12% 20%, #1c354230, transparent 42%),
    radial-gradient(ellipse at 95% 70%, #17393f22, transparent 40%);
}
.living-observatory .draftbar {
  background: #07111c;
  color: #aebfc8;
  font-size: 11px;
  letter-spacing: 2.8px;
  padding: 11px 15px;
  border-bottom: 1px solid #9bc9cd12;
}
.draft-divider {
  color: #d7bd8c;
  padding: 0 14px;
}
.living-observatory > header {
  width: calc(100% - 64px);
  max-width: 1280px;
  margin: 20px auto 0;
  top: 16px;
  border: 1px solid #c7d9e32d;
  border-radius: 20px;
  background: linear-gradient(115deg, #182a37ae, #07111cd9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 15px 50px #0003,
    inset 0 1px #fff1;
  z-index: 30;
}
.living-observatory .nav {
  height: 80px;
  padding: 0 26px;
  max-width: none;
}
.living-observatory .brandname {
  font-size: 27px;
  color: #f3e5c9;
}
.living-observatory .brandsub {
  font-size: 11px;
  color: #9eb1c0;
  letter-spacing: 2px;
}
.living-observatory .links {
  gap: 22px;
  font-size: 11px;
}
.living-observatory .links > a {
  color: #becbd4;
  transition: color 0.2s;
}
.living-observatory .links > a:hover {
  color: #f4e4c5;
}
.living-observatory .btn {
  background: linear-gradient(120deg, #eddbb5, #c2a16b);
  border-color: #dfc9a1;
  color: #08121b;
  border-radius: 7px;
  padding: 14px 21px;
  box-shadow:
    inset 0 1px #fff5,
    0 8px 30px #d7bd8c0c;
  gap: 12px;
}
.living-observatory .btn:hover {
  box-shadow: 0 0 28px #d7bd8c25;
  transform: translateY(-2px);
}
.living-observatory .btn.outline {
  background: #18273445;
  color: #ecdfc4;
  border-color: #d7bd8c55;
  box-shadow: inset 0 1px #fff1;
}
.living-observatory .observatory-hero {
  margin-top: -102px;
  padding-top: 465px;
  background: radial-gradient(ellipse at 50% 28%, #1b304350, transparent 55%), #050d17;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 970px;
}
.living-observatory .observatory-hero .hero-scene {
  top: 60px;
  height: 580px;
  z-index: -2;
  animation: none;
  filter: saturate(0.76) brightness(0.88);
  mask-image: radial-gradient(ellipse 45% 58% at 73% 44%, #000 20%, #000a 66%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 45% 58% at 73% 44%, #000 20%, #000a 66%, transparent 100%);
}
.living-observatory .observatory-hero .scene-shade {
  z-index: -1;
  background: linear-gradient(transparent 280px, #050d1733 390px, #050d17e8 575px, #050d17 650px);
}
.ambient-nebula {
  position: absolute;
  inset: 30px -15% 0;
  z-index: -3;
  background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 28%), #83bcc31b, transparent 29%),
    conic-gradient(
      from 40deg at 50% 33%,
      transparent,
      #50708513,
      transparent 28%,
      #977db70a,
      transparent 60%,
      #dfbd8510,
      transparent
    );
  filter: blur(20px);
  animation: observatory-breathe 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.ambient-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ambient-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #c9e3ec;
  box-shadow: 0 0 10px #a3cbdc80;
  opacity: 0.3;
  animation: star-breathe var(--duration) ease-in-out var(--delay) infinite alternate;
}
.ambient-stars i:nth-child(5n) {
  width: 3px;
  height: 3px;
  background: #edcca2;
  box-shadow: 0 0 13px #d7bd8c66;
}
.living-orbit {
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 440px;
  top: 113px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.orbit-shell {
  position: absolute;
  border: 1px solid #b0c7cd35;
  border-radius: 50%;
  inset: 32px 60px;
  transform: rotate(-15deg);
  box-shadow:
    0 0 35px #accddc04,
    inset 0 0 30px #accddc04;
}
.orbit-shell::after {
  content: '';
  position: absolute;
  top: 49%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4c995;
  box-shadow: 0 0 16px #e4c99580;
}
.orbit-one {
  inset: 5px 35px;
  border-color: #d7bd8c28;
  animation: orbit-turn 85s linear infinite;
}
.orbit-two {
  inset: 45px 0;
  transform: rotate(-38deg);
  border-color: #abcbd72c;
  animation: orbit-turn-reverse 105s linear infinite;
}
.orbit-two::after {
  width: 5px;
  height: 5px;
  background: #a5d7dc;
  box-shadow: 0 0 12px #a5d7dc70;
}
.orbit-three {
  inset: -5px 105px;
  transform: rotate(25deg);
  border-style: dashed;
  border-color: #c1d5db17;
  animation: orbit-turn 125s linear infinite;
}
.orbit-three::after {
  display: none;
}
.orbit-axis {
  position: absolute;
  opacity: 0.25;
  background: linear-gradient(90deg, transparent, #a6c3cd, transparent);
}
.orbit-axis-horizontal {
  height: 1px;
  width: 680px;
  left: -20px;
  top: 50%;
}
.orbit-axis-vertical {
  width: 1px;
  height: 480px;
  top: -20px;
  left: 50%;
  background: linear-gradient(transparent, #a6c3cd, transparent);
}
.orbit-coordinate {
  position: absolute;
  font-size: 7px;
  letter-spacing: 2px;
  color: #9fb5c3;
  white-space: nowrap;
}
.coordinate-north {
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: #d7bd8c;
}
.coordinate-west {
  left: -18px;
  top: 52%;
  transform: rotate(-90deg);
  transform-origin: left center;
}
.coordinate-east {
  right: -18px;
  top: 52%;
  transform: rotate(90deg);
  transform-origin: right center;
}
.hero-observation {
  position: absolute;
  top: 265px;
  width: 180px;
  color: #9eb6c2;
}
.observation-left {
  left: max(6%, calc(50% - 550px));
}
.observation-right {
  right: max(6%, calc(50% - 550px));
  text-align: right;
}
.hero-observation small {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: #9db6c7;
}
.hero-observation p {
  font:
    19px/1.5 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  margin: 15px 0;
  color: #bdc7c9;
}
.observation-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: #c9d5cf;
  border-radius: 50%;
  box-shadow: 0 0 18px #aacdd0;
  margin-bottom: 22px;
}
.observation-line {
  display: block;
  height: 1px;
  width: 55px;
  margin-left: auto;
  background: linear-gradient(90deg, transparent, #b6cfdc70);
}
.living-observatory .hero-copy {
  z-index: 2;
  padding-bottom: 95px;
  padding-top: 18px;
  pointer-events: none;
}
.living-observatory .hero-copy a,
.living-observatory .hero-copy button {
  pointer-events: auto;
}
.living-observatory .hero-copy .eyebrow {
  color: #bfcecf;
  font-size: 11px;
  letter-spacing: 2.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.status-star {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d7bd8c;
  box-shadow: 0 0 12px #d7bd8c80;
}
.living-observatory .hero-copy h1 {
  font-size: clamp(64px, 6.8vw, 94px);
  line-height: 0.98;
  color: #f5ecdc;
  letter-spacing: -2.7px;
  margin: 6px auto 22px;
}
.living-observatory .hero-copy h1 em {
  color: #dbc18e;
}
.living-observatory .hero-copy p {
  font-family: 'DM Sans', 'DM Sans Fallback', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: #afbdc9;
  margin-top: 10px;
}
.living-observatory .hero-rule {
  opacity: 0.6;
  max-width: 220px;
}
.living-observatory .hero-copy .actions {
  margin: 26px 0 30px;
  gap: 25px;
}
.living-observatory .hero-copy .textlink {
  font-size: 11px;
  color: #c6cfd0;
  border-color: #bacdd04a;
}
.living-observatory .hero-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font:
    11px 'DM Sans',
    'DM Sans Fallback',
    sans-serif;
  letter-spacing: 1.9px;
  color: #91a7b7;
}
.hero-footnote i {
  width: 20px;
  height: 1px;
  background: #c5c6b94d;
}
.motion-toggle {
  position: absolute;
  bottom: 35px;
  left: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #a4bfce30;
  border-radius: 30px;
  background: #14263480;
  color: #b7c8d0;
  font-size: 11px;
  letter-spacing: 0.5px;
  z-index: 4;
  backdrop-filter: blur(10px);
}
.motion-state {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4d5c8;
  box-shadow: 0 0 8px #c4d5c860;
}
.motion-paused .motion-state {
  background: #9ba8b0;
  box-shadow: none;
}
.motion-toggle:disabled {
  opacity: 0.8;
  cursor: default;
}
.living-observatory .scroll-cue {
  bottom: 30px;
  font-size: 11px;
  letter-spacing: 1.7px;
  color: #b0c0c5;
}
.living-observatory .atlas-preview {
  padding-top: 75px;
  padding-bottom: 75px;
  position: relative;
}
.living-observatory .atlas-preview::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 60px;
  background: linear-gradient(transparent, #d7bd8c70);
  left: 50%;
  top: -25px;
}
.living-observatory .center-head .eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
}
.living-observatory .center-head h2 {
  font-size: 59px;
  color: #efe5d0;
}
.living-observatory .center-head p {
  font-size: 12px;
  color: #a6b7c4;
}
.living-observatory .atlas-doorways {
  gap: 18px;
  margin-top: 40px;
}
.living-observatory .atlas-door {
  border-radius: 14px;
  border: 1px solid #bbd1db33;
  overflow: hidden;
  background: linear-gradient(140deg, #172a3870, #07121cb0);
  box-shadow: inset 0 1px #ffffff08;
  transition:
    transform 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}
.living-observatory .atlas-door:hover,
.living-observatory .atlas-door:focus-visible {
  transform: translateY(-7px);
  border-color: #d7bd8c8c;
  box-shadow:
    0 18px 50px #0003,
    0 0 35px #abcad50a;
}
.living-observatory .door-image {
  height: 235px;
  background: radial-gradient(ellipse at 50% 65%, #23405025, transparent 70%), #030b14;
}
.living-observatory .door-image > img {
  mix-blend-mode: screen;
  opacity: 0.72;
  transition: opacity 0.35s;
}
.living-observatory .door-title {
  padding: 19px 22px 0;
  font-size: 29px;
}
.living-observatory .door-sub {
  font-size: 11px;
  padding: 8px 22px 23px;
  color: #a1b7c6;
}
.living-observatory .door-num {
  font:
    11px 'DM Sans',
    'DM Sans Fallback',
    sans-serif;
  letter-spacing: 2px;
  top: 20px;
  left: 20px;
  color: #b8d1da;
}
.living-observatory .gateway-note {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #a5b5bf;
}
.living-observatory .page-guide {
  top: 110px;
  background: #0d1d2ab0;
  backdrop-filter: blur(24px);
  border-color: #abc7d420;
  z-index: 20;
}
.living-observatory .guide-inner {
  min-height: 44px;
}
.living-observatory .guide-label {
  color: #a8c4cf;
  font-size: 11px;
}
.living-observatory .guide-inner a {
  font-size: 11px;
}
.living-observatory .guide-inner a[aria-current='true'] {
  color: #eddbb5;
}
.living-observatory .section {
  padding-top: 105px;
  padding-bottom: 105px;
}
.living-observatory .intro-strip {
  border: 0;
  padding: 65px 0;
  gap: 100px;
}
.living-observatory .intro-strip h2 {
  font-size: 48px;
}
.living-observatory .intro-strip > p {
  font-size: 14px;
  color: #b3c1cb;
}
.living-observatory .eyebrow {
  color: #c7ba9e;
  font-size: 11px;
  letter-spacing: 2px;
}
.living-observatory .sectionhead h2,
.living-observatory .atlas-head h2 {
  font-size: 60px;
}
.living-observatory .sectionhead > p,
.living-observatory .atlas-head > p {
  font-size: 13px;
  color: #a7bbc7;
}
.living-observatory .atlas-section {
  background: radial-gradient(ellipse at 10% 50%, #1a3b4930, transparent 55%), linear-gradient(#0a1621, #060e18);
  border-block: 1px solid #9dbbce1c;
}
.living-observatory .atlas-art {
  border-radius: 24px;
  border: 1px solid #8cb2c33f;
  box-shadow:
    inset 0 0 35px #638c9e08,
    0 30px 80px #0003;
  overflow: hidden;
}
.living-observatory .atlas-hand-photo {
  opacity: 0.9;
}
.living-observatory .atlas-art::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid #b9d2dd12;
  border-radius: 15px;
  pointer-events: none;
  z-index: 1;
}
.atlas-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: #9bc9cd80;
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}
.corner-tl {
  left: 22px;
  top: 22px;
  border-width: 1px 0 0 1px;
}
.corner-tr {
  right: 22px;
  top: 22px;
  border-width: 1px 1px 0 0;
}
.corner-bl {
  left: 22px;
  bottom: 22px;
  border-width: 0 0 1px 1px;
}
.corner-br {
  right: 22px;
  bottom: 22px;
  border-width: 0 1px 1px 0;
}
.living-observatory .atlas-photo-overlay .atlas-line {
  stroke: #ddc6a14d;
  stroke-width: 2;
  opacity: 0.4;
}
.living-observatory .atlas-photo-overlay .atlas-line.active {
  stroke: #fff0c6;
  stroke-width: 4;
  opacity: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: line-illuminate 1.1s ease-out both;
  filter: drop-shadow(0 0 7px #f1d99a90);
}
.living-observatory .atlas-art .hotspot {
  border-color: #abcdd070;
  background: #0d202dec;
  box-shadow: 0 0 0 5px #a9c7d508;
  color: #c3d6d8;
}
.living-observatory .atlas-art .hotspot[aria-pressed='true'] {
  background: #e1ccaa;
  color: #122231;
  box-shadow:
    0 0 0 6px #dfc89a12,
    0 0 30px #dfc89a25;
}
.living-observatory .atlas-tabs {
  gap: 5px;
  border: 1px solid #9cbdcf30;
  border-radius: 9px;
  padding: 5px;
  background: #15263350;
}
.living-observatory .atlas-tabs button {
  padding: 11px 17px;
  flex: 1;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  color: #a7bfcb;
}
.living-observatory .atlas-tabs button[aria-pressed='true'] {
  color: #eee1c6;
  background: #adcad018;
  box-shadow: inset 0 0 0 1px #abc7cf35;
}
.living-observatory .atlas-content h3 {
  font-size: 46px;
}
.living-observatory .atlas-content > p {
  font-size: 14px;
  line-height: 1.85;
  color: #b2c3ce;
}
.living-observatory .reflect-box {
  padding: 22px;
  background: linear-gradient(120deg, #1a344145, #0b192600);
  border: 1px solid #a8c8ce28;
  border-left: 2px solid #d7bd8c70;
  border-radius: 0 12px 12px 0;
}
.living-observatory .reflect-box p {
  font-size: 23px;
  color: #e2d8c2;
}
.living-observatory .atlas-content .location {
  color: #b9a681;
  font-size: 11px;
}
.living-observatory .principles {
  gap: 28px;
}
.living-observatory .principle {
  border-color: #bad3df25;
  padding-top: 25px;
}
.living-observatory .principle h3 {
  font-size: 26px;
}
.living-observatory .principle p {
  font-size: 12px;
  color: #a5b8c5;
}
.living-observatory .atlas-source {
  font-size: 11px;
  color: #95a8b5;
  max-width: 940px;
  line-height: 1.9;
}
.living-observatory .cards {
  gap: 25px;
}
.living-observatory .card {
  border: 1px solid #b7ced332;
  border-radius: 18px;
  background: linear-gradient(145deg, #1c304050, #07131db0);
  box-shadow: inset 0 1px #ffffff08;
  transition:
    transform 0.35s,
    border-color 0.35s;
}
.living-observatory .card:hover {
  transform: translateY(-5px);
  border-color: #d7bd8c60;
}
.living-observatory .card.featured {
  border-color: #d7bd8c73;
  background: linear-gradient(145deg, #33404445, #0a1a24b0);
}
.living-observatory .card h3 {
  font-size: 36px;
}
.living-observatory .card p,
.living-observatory .card li {
  color: #afc0ca;
  font-size: 12px;
}
.living-observatory .service-cover {
  height: 220px;
  filter: saturate(0.7);
  mask-image: linear-gradient(#000 60%, #000a);
}
.living-observatory .meta {
  font-size: 11px;
  border-color: #d7bd8c33;
}
.living-observatory .tag {
  color: #cbd8d6;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.living-observatory .cardnum {
  font:
    11px 'DM Sans',
    'DM Sans Fallback',
    sans-serif;
  color: #d7bd8c;
  letter-spacing: 2px;
}
.living-observatory .finder {
  background: linear-gradient(120deg, #1b34415c, #0b192470);
  border: 1px solid #9dbecb3a;
  border-radius: 16px;
  padding: 35px;
}
.living-observatory .finder-result {
  background: #a4c5d608;
  border-radius: 12px;
  border-color: #abc5cf2d;
}
.living-observatory .chip {
  border-radius: 30px;
  color: #b5c5cf;
  border-color: #b3ccd036;
  background: transparent;
  font-size: 11px;
}
.living-observatory .chip[aria-pressed='true'] {
  background: #c0d7df1c;
  color: #f0e4cd;
  border-color: #b3ccd080;
}
.living-observatory .light {
  background: #ece7da;
  color: #172b35;
}
.living-observatory .light em {
  color: #80663b;
}
.living-observatory .light p {
  color: #53656d;
}
.living-observatory .light .eyebrow {
  color: #786037;
}
/* About: lead paragraph and link to the full story (ivory background). */
.living-observatory .light .about-lead {
  font:
    italic 23px/1.45 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #172b35;
}
.living-observatory .light .about-story-link {
  display: inline-block;
  margin-top: 6px;
  color: #786037;
  border-bottom-color: #78603780;
}
/* Checklist hints sit on the ivory background; the dark-theme muted grey (#9ea9b4) measured 1.9:1. */
.living-observatory .light .checkrow span small {
  color: #53656d;
}
.living-observatory .portrait {
  border-radius: 150px 150px 22px 22px;
  background: radial-gradient(ellipse, #173947, #0b1d2a);
  border-color: #7fa6b53d;
  color: #d8c397;
}
.living-observatory .portraitlabel {
  color: #d8c397;
}
.living-observatory .about .signature {
  color: #755c36;
}
.living-observatory .environment-story {
  max-width: none;
  border-block: 1px solid #9bbccc25;
}
.living-observatory .environment-story > img {
  height: 540px;
  filter: saturate(0.7);
}
.living-observatory .environment-caption h2 {
  font-size: 68px;
}
.living-observatory .environment-caption p {
  color: #c0d2d8;
}
.living-observatory .step {
  border-color: #a7c3ce38;
}
.living-observatory .step > span {
  color: #a3c4ce;
}
.living-observatory .event {
  border: 1px solid #b0cbd337;
  border-radius: 16px;
  background: linear-gradient(100deg, #1c36434a, #0a1926);
  overflow: hidden;
}
.living-observatory .event-photo {
  border-radius: 10px;
}
.living-observatory .event h3 {
  font-size: 32px;
}
.living-observatory .prep-aside {
  border-radius: 15px;
  background: #182b36;
  color: #ece4d5;
  border: 1px solid #9cc0cc38;
}
.living-observatory .prep-aside p,
.living-observatory .prep-aside li {
  color: #b7c8cf;
}
.living-observatory .prep-aside h3 {
  color: #eee2c9;
}
.living-observatory .prep-aside .eyebrow {
  color: #d7bd8c;
}
.living-observatory .journal-grid {
  gap: 28px;
}
.living-observatory .journal-card {
  padding: 17px;
  border: 1px solid #a9c7d32c;
  border-radius: 18px;
  background: linear-gradient(145deg, #1b31403b, #07111c90);
  transition:
    transform 0.35s,
    border-color 0.35s;
}
.living-observatory .journal-card:hover {
  transform: translateY(-6px);
  border-color: #bad1d56b;
}
.living-observatory .journal-cover {
  height: 205px;
  border-radius: 10px;
  border: 0;
  margin-bottom: 25px;
}
.living-observatory .journal-cover img {
  filter: saturate(0.7);
  transition: transform 0.7s;
}
.living-observatory .journal-card:hover .journal-cover img {
  transform: scale(1.035);
}
.living-observatory .journal-card h3 {
  font-size: 31px;
  line-height: 1.12;
  color: #eadeca;
}
.living-observatory .journal-card p {
  font-size: 12px;
  color: #a8bdc9;
  line-height: 1.85;
}
.living-observatory .journal-card .micro {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #a6bec8;
}
.living-observatory .journal-card button {
  font-size: 11px;
  color: #d7bd8c;
  margin: 5px 0 12px;
}
.living-observatory .glossary {
  border-color: #9cbbc92c;
}
.living-observatory .glossary dd {
  color: #a5bac8;
}
.living-observatory .faq input {
  border-radius: 10px;
  background: #11253160;
  border-color: #9ebccf44;
}
.living-observatory .faq details {
  border-color: #a9c2cc2e;
}
.living-observatory .faq summary {
  font-size: 18px;
}
.living-observatory .standards {
  border-radius: 16px;
  background: linear-gradient(100deg, #1a334036, #0b172300);
  border-color: #9cbcca30;
}
.living-observatory .practice-preview {
  background: radial-gradient(ellipse at 80% 50%, #24465333, transparent 60%), #0a1823;
}
.living-observatory .practice-preview-grid > a {
  border-radius: 15px;
  background: #142a3545;
  border-color: #b9d2da30;
  box-shadow: inset 0 1px #fff1;
}
.living-observatory .practice-preview-grid > a:hover {
  border-color: #d7bd8c80;
}
.living-observatory .contact-section {
  background: linear-gradient(120deg, #16303e66, #07121d);
  border-color: #a0becb24;
}
.living-observatory .contact-symbol {
  border-radius: 50%;
  border-color: #a5c8d84f;
  color: #c9d8d8;
}
.living-observatory .contact-links > a {
  border-color: #accbd42b;
}
.living-observatory .contact-links strong {
  color: #e5dcc9;
}
.living-observatory .closing {
  position: relative;
  background: radial-gradient(ellipse at 50% 70%, #39566b25, transparent 65%), #060e18;
  border-top: 1px solid #a4c0cd24;
  overflow: hidden;
}
.living-observatory .closing::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 260px;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #a3beca25;
  border-radius: 50%;
  pointer-events: none;
}
.living-observatory > footer {
  background: #040b13;
  border-color: #a3c0ce20;
}
.living-observatory .review-section {
  background: #0b1a25;
  border-color: #a3bfcc22;
}
.living-observatory .mobile-cta {
  background: #0b1c28db;
  border-color: #aecbd330;
  backdrop-filter: blur(20px);
}
.living-arrow {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-left: 4px;
}
.living-observatory dialog {
  border-radius: 20px;
  border: 1px solid #d7bd8c70;
  box-shadow: 0 35px 100px #0008;
}
.living-observatory dialog::backdrop {
  background: #020810db;
  backdrop-filter: blur(16px);
}
.living-observatory.motion-paused .orbit-shell,
.living-observatory.motion-paused .ambient-nebula,
.living-observatory.motion-paused .ambient-stars i {
  animation-play-state: paused;
}
.living-observatory.motion-paused .reveal-enter,
.living-observatory.motion-paused .atlas-line.active {
  animation: none !important;
}
@keyframes observatory-breathe {
  from {
    opacity: 0.55;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes star-breathe {
  from {
    opacity: 0.15;
    transform: translateY(0);
  }
  to {
    opacity: 0.7;
    transform: translateY(-5px);
  }
}
@keyframes orbit-turn {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(345deg);
  }
}
@keyframes orbit-turn-reverse {
  from {
    transform: rotate(-38deg);
  }
  to {
    transform: rotate(-398deg);
  }
}
@keyframes line-illuminate {
  from {
    stroke-dashoffset: 1000;
    opacity: 0.3;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@media (min-width: 651px) and (max-width: 1150px) {
  .living-observatory .links {
    gap: 13px;
    font-size: 11px;
  }
  .living-observatory .nav {
    padding: 0 20px;
    gap: 18px;
  }
  .living-observatory .brandname {
    font-size: 24px;
  }
  .living-observatory .links .btn {
    font-size: 11px;
    padding: 12px 15px;
  }
  .hero-observation {
    width: 135px;
    top: 260px;
  }
  .observation-left {
    left: 4%;
  }
  .observation-right {
    right: 4%;
  }
  .hero-observation small {
    font-size: 11px;
  }
  .hero-observation p {
    font-size: 17px;
  }
  .living-orbit {
    width: 540px;
  }
  .living-observatory .sectionhead h2,
  .living-observatory .atlas-head h2 {
    font-size: 50px;
  }
  .living-observatory .intro-strip {
    gap: 45px;
  }
}
@media (max-width: 950px) {
  .hero-observation {
    display: none;
  }
  .living-observatory .brandmark {
    width: 26px;
  }
  .living-observatory .nav {
    gap: 15px;
  }
  .living-observatory .links {
    gap: 12px;
  }
  .living-observatory .brandsub {
    letter-spacing: 1px;
  }
}
@media (max-width: 650px) {
  .living-observatory .draftbar {
    font-size: 11px;
    letter-spacing: 1.8px;
    padding: 9px 12px;
  }
  .living-observatory > header {
    width: calc(100% - 28px);
    margin: 13px auto 0;
    top: 10px;
    border-radius: 14px;
  }
  .living-observatory .nav {
    height: 67px;
    padding: 0 18px;
    position: relative;
  }
  .living-observatory .brandname {
    font-size: 25px;
  }
  .living-observatory .brandmark {
    width: 26px;
    height: 34px;
  }
  .living-observatory .brandsub {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
  .living-observatory .menu {
    border: 1px solid #aac6d340;
    border-radius: 6px;
    padding: 8px 12px;
    background: #adc9d40c;
    color: #d7d9ce;
    font-size: 11px;
  }
  .living-observatory .links {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #0a1b28f7;
    border: 1px solid #a8c8d13d;
    border-radius: 14px;
    backdrop-filter: blur(24px);
    padding: 20px;
    gap: 0;
    box-shadow: 0 25px 50px #0005;
  }
  .living-observatory .links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .living-observatory .links a {
    font-size: 13px;
    padding: 12px;
  }
  .living-observatory .links .btn {
    margin-top: 10px;
  }
  .living-observatory .observatory-hero {
    margin-top: -82px;
    padding-top: 382px;
    min-height: 850px;
  }
  .living-observatory .observatory-hero .hero-scene {
    height: 460px;
    top: 65px;
  }
  .living-observatory .observatory-hero .scene-shade {
    background: linear-gradient(transparent 250px, #050d1780 375px, #050d17 520px);
  }
  .living-orbit {
    width: 390px;
    height: 315px;
    top: 122px;
  }
  .orbit-one {
    inset: 5px 22px;
  }
  .orbit-two {
    inset: 38px 15px;
  }
  .orbit-three {
    inset: 0 70px;
  }
  .orbit-axis-horizontal {
    width: 390px;
    left: 0;
  }
  .orbit-axis-vertical {
    height: 340px;
    top: -12px;
  }
  .coordinate-north {
    font-size: 6px;
    top: -8px;
    letter-spacing: 1.7px;
  }
  .coordinate-west,
  .coordinate-east {
    display: none;
  }
  .living-observatory .hero-copy {
    padding-top: 0;
    padding-bottom: 102px;
  }
  .living-observatory .hero-copy .eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
    gap: 7px;
    margin-bottom: 16px;
  }
  .living-observatory .hero-copy h1 {
    font-size: 62px;
    letter-spacing: -1.9px;
    line-height: 1;
    margin-bottom: 18px;
  }
  .living-observatory .hero-copy p {
    font-size: 11px;
    line-height: 1.9;
    max-width: 290px;
  }
  .living-observatory .hero-copy .actions {
    flex-direction: column;
    gap: 17px;
    margin: 23px 0 28px;
  }
  .living-observatory .hero-copy .btn {
    padding: 14px 24px;
    font-size: 11px;
  }
  .living-observatory .hero-copy .hero-footnote {
    font-size: 11px;
    gap: 10px;
    letter-spacing: 1.1px;
  }
  .hero-footnote i {
    width: 12px;
  }
  .motion-toggle {
    bottom: 22px;
    left: 18px;
    font-size: 11px;
    padding: 9px 11px;
  }
  .living-observatory .scroll-cue {
    bottom: 26px;
    right: 21px;
    left: auto;
    transform: none;
    font-size: 11px;
    letter-spacing: 1px;
  }
  .living-observatory .scroll-cue span {
    display: none;
  }
  .living-observatory .atlas-preview {
    padding-top: 60px;
    padding-bottom: 55px;
  }
  .living-observatory .center-head h2 {
    font-size: 43px;
  }
  .living-observatory .center-head .eyebrow {
    font-size: 11px;
    letter-spacing: 1.7px;
    max-width: 290px;
    margin: 0 auto 18px;
  }
  .living-observatory .center-head p {
    font-size: 11px;
    max-width: 260px;
    margin: auto;
  }
  .living-observatory .atlas-doorways {
    gap: 12px;
    margin-top: 30px;
  }
  .living-observatory .atlas-door {
    border-radius: 11px;
  }
  .living-observatory .door-image {
    height: 185px;
  }
  .living-observatory .door-title {
    font-size: 26px;
    padding: 14px 15px 0;
  }
  .living-observatory .door-sub {
    font-size: 11px;
    padding: 6px 15px 17px;
  }
  .living-observatory .door-num {
    font-size: 11px;
    top: 14px;
    left: 14px;
  }
  .living-observatory .gateway-note {
    font-size: 11px;
    max-width: 260px;
  }
  .living-observatory .page-guide {
    top: 86px;
  }
  .living-observatory .guide-inner {
    min-height: 42px;
  }
  .living-observatory .guide-inner a {
    font-size: 11px;
  }
  .living-observatory .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .living-observatory .intro-strip {
    padding: 45px 0;
    gap: 22px;
  }
  .living-observatory .intro-strip h2 {
    font-size: 36px;
  }
  .living-observatory .intro-strip > p {
    font-size: 12px;
  }
  .living-observatory .sectionhead h2,
  .living-observatory .atlas-head h2 {
    font-size: 44px;
  }
  .living-observatory .sectionhead > p,
  .living-observatory .atlas-head > p {
    font-size: 12px;
  }
  .living-observatory .atlas-art {
    border-radius: 18px;
  }
  .living-observatory .atlas-tabs button {
    font-size: 11px;
    padding: 10px 12px;
  }
  .living-observatory .atlas-content h3 {
    font-size: 38px;
  }
  .living-observatory .atlas-content > p {
    font-size: 13px;
  }
  .living-observatory .reflect-box {
    padding: 20px;
  }
  .living-observatory .reflect-box p {
    font-size: 22px;
  }
  .living-observatory .atlas-art .hotspot {
    width: 34px;
    height: 34px;
  }
  .living-observatory .card {
    border-radius: 14px;
  }
  .living-observatory .card h3 {
    font-size: 33px;
  }
  .living-observatory .card p,
  .living-observatory .card li {
    font-size: 12px;
  }
  .living-observatory .cards {
    gap: 22px;
  }
  .living-observatory .finder {
    padding: 25px;
    border-radius: 13px;
  }
  .living-observatory .environment-story > img {
    height: 460px;
  }
  .living-observatory .environment-caption h2 {
    font-size: 49px;
  }
  .living-observatory .journal-grid {
    gap: 23px;
  }
  .living-observatory .journal-card {
    padding: 15px;
    border-radius: 14px;
  }
  .living-observatory .journal-cover {
    height: 220px;
  }
  .living-observatory .journal-card h3 {
    font-size: 31px;
  }
  .living-observatory .journal-card p {
    font-size: 12px;
  }
  .living-observatory .contact-layout h2 {
    font-size: 44px;
  }
  .living-observatory dialog {
    border-radius: 14px;
  }
  .living-observatory .standards {
    padding: 24px;
  }
  .living-observatory .event h3 {
    font-size: 29px;
  }
}
@media (max-width: 380px) {
  .living-observatory .hero-copy h1 {
    font-size: 54px;
  }
  .living-observatory .hero-footnote {
    letter-spacing: 0.5px;
  }
  .living-orbit {
    width: 350px;
  }
  .living-observatory .hero-copy .eyebrow {
    font-size: 11px;
  }
  .living-observatory .door-image {
    height: 160px;
  }
  .living-observatory .atlas-tabs button {
    padding: 10px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .living-observatory *,
  .living-observatory *::before,
  .living-observatory *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .living-observatory .atlas-photo-overlay .atlas-line.active {
    stroke-dashoffset: 0;
  }
  .ambient-nebula {
    opacity: 0.7;
  }
  .ambient-stars i {
    opacity: 0.4;
  }
}
/* Sections that are also width containers retain their horizontal reading gutters. */
.living-observatory .section.wrap {
  padding-left: 48px;
  padding-right: 48px;
}
.living-observatory .sectionhead > div {
  min-width: 0;
}
@media (max-width: 900px) {
  .living-observatory .section.wrap {
    padding-left: 26px;
    padding-right: 26px;
  }
}
@media (max-width: 650px) {
  .living-observatory .section.wrap {
    padding-left: 22px;
    padding-right: 22px;
  }
  .living-observatory .sectionhead h2 {
    font-size: 42px;
    max-width: 100%;
  }
  .living-observatory .journal-head .chipset {
    gap: 7px;
  }
  .living-observatory .journal-head .chip {
    font-size: 11px;
    padding: 9px 12px;
  }
}
/* Ozzy's presence is reserved for approved real assets. */
.living-observatory .light h2 {
  color: #172b35;
}
.living-observatory .light .about-note strong {
  color: #786037;
}
.living-observatory .light .about-note span {
  color: #53656d;
}
.presence-stage {
  max-width: 440px;
  width: 100%;
}
.presence-portrait {
  position: relative;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #9ab9c34d;
  border-radius: 190px 190px 22px 22px;
  background: radial-gradient(ellipse at 50% 35%, #365565, #0a1d2a 70%);
  color: #e2cfaa;
}
.presence-monogram {
  font:
    95px 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  letter-spacing: 5px;
  font-weight: 400;
  z-index: 1;
  color: #ddc59a;
}
.presence-orbit {
  position: absolute;
  width: 290px;
  height: 200px;
  border: 1px solid #abcbd342;
  border-radius: 50%;
  transform: rotate(-35deg);
  top: 80px;
  pointer-events: none;
}
.presence-orbit::before {
  content: '';
  position: absolute;
  inset: -25px 35px;
  border: 1px solid #d7bd8c4a;
  border-radius: 50%;
  transform: rotate(70deg);
}
.presence-orbit::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #dac49a;
  position: absolute;
  top: 20px;
  left: 34px;
  border-radius: 50%;
  box-shadow: 0 0 18px #d7bd8c50;
}
.presence-portrait-label {
  font-size: 11px;
  letter-spacing: 3px;
  margin-top: 40px;
  z-index: 1;
}
.presence-portrait small {
  font-size: 11px;
  color: #afc4cc;
  margin-top: 10px;
  z-index: 1;
}
.presence-video {
  display: flex;
  gap: 15px;
  padding: 22px 18px;
  border: 1px solid #8ba6b34a;
  border-radius: 13px;
  margin-top: 18px;
  background: #1a313d;
  color: #e4d7bb;
  align-items: center;
}
.presence-play {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid #acc5cd55;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.presence-video strong {
  font:
    24px 'Cormorant Garamond',
    serif;
  display: block;
}
.living-observatory .light .presence-video p {
  font-size: 11px;
  color: #adc1ca;
  margin: 7px 0 0;
  line-height: 1.8;
}
.presence-pending {
  font-size: 11px;
  letter-spacing: 1px;
  color: #c3d0c7;
  align-self: start;
  border: 1px solid #adbecb33;
  padding: 4px 6px;
  border-radius: 20px;
}
.living-observatory .about {
  align-items: center;
}
@media (max-width: 650px) {
  .presence-stage {
    max-width: 350px;
    margin: auto;
  }
  .presence-portrait {
    min-height: 340px;
  }
  .presence-monogram {
    font-size: 82px;
  }
  .presence-orbit {
    width: 245px;
    height: 170px;
    top: 65px;
  }
  .presence-video {
    gap: 12px;
    padding: 18px 15px;
  }
  .presence-video strong {
    font-size: 23px;
  }
  .presence-pending {
    font-size: 11px;
  }
  .presence-portrait small {
    font-size: 11px;
  }
}

/* Ivory 3D Atlas: image and overlay share one uncropped coordinate system. */
.living-observatory .atlas-ivory {
  aspect-ratio: 1122/1402;
  max-width: 510px;
  background: #030b16;
}
.living-observatory .atlas-ivory .atlas-hand-photo {
  opacity: 1;
  object-fit: contain;
}
.living-observatory .atlas-ivory .hotspot[data-line='heart'] {
  top: 43.94%;
  left: 90%;
}
.living-observatory .atlas-ivory .hotspot[data-line='head'] {
  top: 61%;
  left: 90%;
}
.living-observatory .atlas-ivory .hotspot[data-line='life'] {
  top: 69%;
  left: 17%;
}
.living-observatory .atlas-ivory .hotspot[data-line='fate'] {
  top: 82%;
  left: 84%;
}
.living-observatory .atlas-ivory .atlas-photo-overlay .atlas-line {
  opacity: 0;
  stroke-width: 2.5;
}
.living-observatory .atlas-ivory .atlas-photo-overlay .atlas-line.active {
  opacity: 1;
  stroke: #fff5d4;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 5px #ffe3a9);
}
.living-observatory .atlas-ivory .atlas-leaders {
  stroke: #edd6aa80;
}
.living-observatory .atlas-ivory .atlas-caption {
  background: linear-gradient(transparent, #030b16);
  padding-top: 25px;
}

/* Dedicated Atlas base: leave the rails free and map SVG to the same image rectangle. */
.living-observatory .atlas-tailored {
  aspect-ratio: 1;
  max-width: 560px;
  background: #03111d;
}
.living-observatory .atlas-tailored .atlas-hand-photo {
  width: 72%;
  height: 90%;
  left: 14%;
  top: 5%;
  object-fit: fill;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.living-observatory .atlas-tailored .hotspot[data-line='heart'] {
  top: 43.67%;
  left: 89%;
}
.living-observatory .atlas-tailored .hotspot[data-line='head'] {
  top: 57.93%;
  left: 89%;
}
.living-observatory .atlas-tailored .hotspot[data-line='life'] {
  top: 67.91%;
  left: 11%;
}
.living-observatory .atlas-tailored .hotspot[data-line='fate'] {
  top: 80.93%;
  left: 85%;
}
.living-observatory .atlas-tailored .atlas-photo-overlay .atlas-line {
  opacity: 0.18;
  stroke: #c5a875;
  stroke-width: 2;
}
.living-observatory .atlas-tailored .atlas-photo-overlay .atlas-line.active {
  opacity: 1;
  stroke: #fff1c5;
  stroke-width: 4;
  filter: drop-shadow(0 0 5px #ffe0a3);
}
.living-observatory .atlas-tailored .atlas-caption {
  font-size: 11px;
  padding: 20px 10px 13px;
  letter-spacing: 0.65px;
}
@media (max-width: 650px) {
  .living-observatory .atlas-tailored .atlas-caption {
    font-size: 11px;
    letter-spacing: 0;
    padding-inline: 28px;
  }
  .living-observatory .atlas-tailored .hotspot {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   My story: chaptered timeline, closing quote, and the three traditions
   ========================================================================== */
.living-observatory .story {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 12% 18%, #24465333, transparent 55%),
    radial-gradient(ellipse at 90% 85%, #d8b68112, transparent 50%), #07111c;
  border-top: 1px solid #a4c0cd1c;
}
.living-observatory .story::before {
  content: '';
  position: absolute;
  width: 760px;
  height: 760px;
  right: -260px;
  top: -220px;
  border: 1px solid #d8b6811c;
  border-radius: 50%;
  pointer-events: none;
}
.living-observatory .story-head {
  max-width: 720px;
  margin-bottom: 64px;
}
.living-observatory .story-head h2,
.living-observatory .workshops h2 {
  font-size: 60px;
  line-height: 1.02;
  margin: 14px 0 18px;
}
.living-observatory .story-head p {
  color: #b9c7d0;
  font-size: 16px;
}
.living-observatory .story-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.living-observatory .story-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  column-gap: 64px;
  padding-bottom: 56px;
}
.living-observatory .story-timeline > li::before {
  content: '';
  position: absolute;
  left: 202px;
  top: 14px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(#d8b68170, #d8b68118);
}
.living-observatory .story-timeline > li:last-child::before {
  display: none;
}
.living-observatory .story-timeline > li::after {
  content: '';
  position: absolute;
  left: 198px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8b681;
  box-shadow:
    0 0 0 5px #d8b6811a,
    0 0 18px #d8b68155;
}
.living-observatory .story-time {
  grid-column: 1;
  grid-row: 1 / span 4;
  text-align: right;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #d8b681;
  padding-top: 6px;
}
.living-observatory .story-timeline h3,
.living-observatory .story-timeline p,
.living-observatory .story-timeline blockquote,
.living-observatory .story-timeline .signature {
  grid-column: 2;
  max-width: 720px;
}
.living-observatory .story-timeline h3 {
  font-size: 34px;
  margin: 0 0 12px;
  color: #f2e8d7;
}
.living-observatory .story-timeline p {
  color: #b3c1cb;
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 12px;
}
.living-observatory .story-timeline .story-turn {
  font:
    italic 24px/1.4 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #e4d1ad;
  margin-top: 22px;
}
.living-observatory .story-now::after {
  width: 15px;
  height: 15px;
  left: 195px;
  top: 6px;
  background: radial-gradient(#f3dfb6, #d8b681);
  box-shadow:
    0 0 0 8px #d8b6811f,
    0 0 30px #d8b68180;
}
.living-observatory .story-quote {
  position: relative;
  margin: 8px 0 22px;
  padding: 26px 0 0;
  font:
    italic 32px/1.35 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #f2e8d7;
}
.living-observatory .story-quote::before {
  content: '“';
  position: absolute;
  top: -22px;
  left: -6px;
  font:
    80px/1 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #d8b68166;
}
.living-observatory .story .signature {
  color: #d8b681;
  margin-top: 10px;
}
.living-observatory .traditions {
  margin-top: 40px;
  padding-top: 56px;
  border-top: 1px solid #a7c3ce26;
}
.living-observatory .traditions-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 48px;
  align-items: end;
  margin-bottom: 30px;
}
.living-observatory .traditions-head .eyebrow {
  grid-column: 1 / -1;
}
.living-observatory .traditions-head h3 {
  font-size: 40px;
  margin: 0;
}
.living-observatory .traditions-head p {
  color: #b3c1cb;
  margin: 0;
}
.living-observatory .traditions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.living-observatory .traditions-grid article {
  border: 1px solid #b7ced332;
  border-radius: 18px;
  padding: 28px;
  background: linear-gradient(145deg, #1c304050, #07131db0);
  box-shadow: inset 0 1px #ffffff08;
  transition:
    transform 0.35s,
    border-color 0.35s;
}
.living-observatory .traditions-grid article:hover {
  transform: translateY(-4px);
  border-color: #d7bd8c60;
}
.living-observatory .tradition-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #d8b68166;
  border-radius: 50%;
  font:
    18px 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #d8b681;
  margin-bottom: 22px;
}
.living-observatory .traditions-grid h4 {
  font:
    28px/1.15 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #f2e8d7;
  margin: 0 0 10px;
}
.living-observatory .traditions-grid p {
  color: #afc0ca;
  font-size: 13px;
  margin: 0;
}

/* ==========================================================================
   Good to know: payment, changes, and reading policies
   ========================================================================== */
.living-observatory .policies {
  margin-top: 34px;
  padding: 34px;
  border: 1px solid #9cbcca30;
  border-radius: 16px;
  background: linear-gradient(100deg, #1a334036, #0b172300);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}
.living-observatory .policies-head h3 {
  font-size: 32px;
  margin: 10px 0 0;
}
.living-observatory .policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.living-observatory .policy-label {
  display: block;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #d8b681;
  margin-bottom: 10px;
}
.living-observatory .policies-grid p {
  color: #afc0ca;
  font-size: 13px;
  margin: 0;
}
.living-observatory .pay-methods {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.living-observatory .pay-methods li {
  font-size: 11px;
  color: #d5dee3;
  border: 1px solid #b3ccd036;
  border-radius: 30px;
  padding: 4px 11px;
}

/* ==========================================================================
   Workshops 2027: interest list (Netlify Forms)
   ========================================================================== */
.living-observatory .workshops {
  position: relative;
  background: radial-gradient(ellipse at 85% 30%, #d8b68114, transparent 55%),
    radial-gradient(ellipse at 10% 90%, #24465333, transparent 55%), #0a1823;
  border-top: 1px solid #a4c0cd1c;
}
.living-observatory .workshops-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
}
.living-observatory .workshops-copy p {
  color: #b9c7d0;
  font-size: 15px;
  max-width: 480px;
}
.living-observatory .workshops-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.living-observatory .workshops-points li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-top: 1px solid #a7c3ce26;
  color: #d5dee3;
  font-size: 13px;
}
.living-observatory .workshops-points li::before {
  content: '✧';
  position: absolute;
  left: 2px;
  color: #d8b681;
}
.living-observatory .workshop-form {
  position: relative;
  padding: 34px;
  border: 1px solid #d7bd8c40;
  border-radius: 18px;
  background: linear-gradient(145deg, #1c304066, #07131dd0);
  box-shadow:
    inset 0 1px #ffffff0a,
    0 30px 70px #0006;
}
.living-observatory .workshop-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.living-observatory .workshop-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.living-observatory .workshop-fields label {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #b5c5cf;
}
.living-observatory .workshop-fields .full {
  grid-column: 1 / -1;
}
.living-observatory .workshop-fields input,
.living-observatory .workshop-fields select,
.living-observatory .workshop-fields textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 13px 14px;
  font:
    14px 'DM Sans',
    'DM Sans Fallback',
    Arial,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #f2e8d7;
  background: #07131d99;
  border: 1px solid #b3ccd036;
  border-radius: 10px;
}
.living-observatory .workshop-fields select option {
  color: #101f2b;
}
.living-observatory .workshop-fields ::placeholder {
  color: #8496a3;
}
.living-observatory .workshop-fields input:focus,
.living-observatory .workshop-fields select:focus,
.living-observatory .workshop-fields textarea:focus {
  border-color: #d8b681;
  outline: 2px solid #d8b68155;
  outline-offset: 2px;
}
.living-observatory .workshop-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 22px;
  font-size: 12px;
  color: #afc0ca;
}
.living-observatory .workshop-consent input {
  accent-color: #d8b681;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
}
.living-observatory .workshop-status {
  margin: 14px 0 0;
  min-height: 1em;
  font-size: 13px;
  color: #efd4a7;
}
.living-observatory .card li .card-maplink {
  color: #e4d1ad;
  border-bottom: 1px solid #d8b68155;
}

@media (max-width: 950px) {
  .living-observatory .workshops-layout,
  .living-observatory .policies {
    grid-template-columns: 1fr;
  }
  .living-observatory .traditions-grid,
  .living-observatory .policies-grid {
    grid-template-columns: 1fr;
  }
  .living-observatory .traditions-head {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .living-observatory .story-head h2,
  .living-observatory .workshops h2 {
    font-size: 42px;
  }
  .living-observatory .story-timeline > li {
    grid-template-columns: 1fr;
    padding-left: 34px;
    padding-bottom: 44px;
  }
  .living-observatory .story-timeline > li::before {
    left: 4px;
  }
  .living-observatory .story-timeline > li::after {
    left: 0;
  }
  .living-observatory .story-now::after {
    left: -3px;
  }
  .living-observatory .story-time {
    grid-row: auto;
    text-align: left;
    padding: 0 0 10px;
  }
  .living-observatory .story-timeline h3,
  .living-observatory .story-timeline p,
  .living-observatory .story-timeline blockquote,
  .living-observatory .story-timeline .signature {
    grid-column: 1;
  }
  .living-observatory .story-timeline h3 {
    font-size: 30px;
  }
  .living-observatory .story-quote {
    font-size: 26px;
  }
  .living-observatory .workshop-form,
  .living-observatory .policies {
    padding: 24px;
  }
  .living-observatory .workshop-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Icons: one inline sprite at the top of the page (brand marks from Simple
   Icons, CC0), tinted to the palette so they sit quietly in the design.
   ========================================================================== */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.living-observatory .icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
}
.living-observatory .contact-symbol .icon {
  width: 17px;
  height: 17px;
  color: #d8b681;
}
.living-observatory .contact-links > a:hover .contact-symbol .icon {
  color: #efd4a7;
}
.living-observatory .meta-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.living-observatory .meta-icon .icon {
  width: 13px;
  height: 13px;
  color: #d8b681;
}
.living-observatory .tradition-mark .tradition-icon {
  width: 24px;
  height: 24px;
  color: #d8b681;
}
.living-observatory .channel-icons {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.living-observatory .channel-icons li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #d5dee3;
  border: 1px solid #b3ccd036;
  border-radius: 30px;
  padding: 5px 11px 5px 9px;
}
.living-observatory .channel-icons .icon {
  width: 13px;
  height: 13px;
  color: #d8b681;
}
.living-observatory .pay-groups {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.living-observatory .pay-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9fb3bf;
}
.living-observatory .pay-group-label .icon {
  width: 15px;
  height: 15px;
  color: #d8b681;
}
.living-observatory .pay-groups .pay-methods {
  margin-top: 8px;
}
.living-observatory .pay-methods .has-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.living-observatory .pay-methods .icon {
  width: 12px;
  height: 12px;
  color: #d8b681;
}
.living-observatory .socials a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.living-observatory .socials .icon,
.living-observatory .socials .icon-star {
  width: 13px;
  height: 13px;
  color: #d8b681;
}

/* Payment logos supplied by the client: full-colour marks on ivory tiles, app icons beside names. */
.living-observatory .pay-methods .pay-logo {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  background: #f4efe6;
  border-color: #f4efe6;
  border-radius: 8px;
}
.living-observatory .pay-methods .pay-logo img {
  display: block;
  height: 18px;
  width: auto;
}
.living-observatory .pay-methods .pay-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 5px;
}
.living-observatory .pay-methods .pay-app img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

/* Payment logos rest in greyscale and bloom into colour on hover, or as the panel scrolls
   into view on touch screens (site.js adds .is-lit). */
.living-observatory .pay-methods img,
.living-observatory .pay-methods .has-logo .icon {
  filter: grayscale(1) contrast(0.92);
  opacity: 0.72;
  transition:
    filter 0.5s ease,
    opacity 0.5s ease,
    color 0.5s ease;
}
.living-observatory .pay-methods .has-logo .icon {
  color: #aab8c2;
}
.living-observatory .pay-methods li {
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.living-observatory .pay-methods .pay-logo {
  background: #e4e0d8;
  border-color: #e4e0d8;
}
.living-observatory .pay-methods li:hover,
.living-observatory .pay-groups.is-lit li {
  border-color: #d7bd8c60;
}
.living-observatory .pay-methods li:hover {
  transform: translateY(-2px);
}
.living-observatory .pay-methods .pay-logo:hover,
.living-observatory .pay-groups.is-lit .pay-logo {
  background: #f8f4ec;
  border-color: #f8f4ec;
}
.living-observatory .pay-methods li:hover img,
.living-observatory .pay-groups.is-lit img,
.living-observatory .pay-methods .has-logo:hover .icon,
.living-observatory .pay-groups.is-lit .has-logo .icon {
  filter: none;
  opacity: 1;
}
.living-observatory .pay-methods .has-logo:hover .icon,
.living-observatory .pay-groups.is-lit .has-logo .icon {
  color: #009cde;
}
@media (prefers-reduced-motion: reduce) {
  .living-observatory .pay-methods li,
  .living-observatory .pay-methods img,
  .living-observatory .pay-methods .icon {
    transition: none;
  }
  .living-observatory .pay-methods li:hover {
    transform: none;
  }
}

/* The workshop, testimonial, and booking-request sections share the form-card styles above. */
.living-observatory .kind-words {
  background: radial-gradient(ellipse at 15% 25%, #d8b68112, transparent 55%),
    radial-gradient(ellipse at 90% 80%, #24465333, transparent 55%), #08141e;
}
.living-observatory .booking-request {
  background: radial-gradient(ellipse at 80% 20%, #24465340, transparent 55%), #0a1823;
}
.living-observatory .form-title {
  font-size: 28px;
  margin: 0 0 18px;
}
.living-observatory .workshop-consent.tight {
  margin-top: -10px;
}
.living-observatory .workshop-fields input[type='date'] {
  color-scheme: dark;
}
.living-observatory .tz-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 2px solid #d8b68180;
  background: #d8b68110;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.55;
  color: #d5dee3;
  letter-spacing: 0;
  text-transform: none;
}
.living-observatory .workshop-fields .tz-note {
  margin: 0;
}

/* Remitly's logo stacks its mark above the name, so it gets a taller image in a tile of the same height. */
.living-observatory .pay-methods .pay-logo {
  min-height: 32px;
  box-sizing: border-box;
}
.living-observatory .pay-methods .pay-logo-stacked {
  padding-top: 2px;
  padding-bottom: 2px;
}
.living-observatory .pay-methods .pay-logo-stacked img {
  height: 28px;
}

/* PayPal: its brand mark and name on the same ivory tile, greyscale until lit like the image logos. */
.living-observatory .pay-methods .pay-logo-text {
  gap: 6px;
}
.living-observatory .pay-methods .pay-logo-text .icon {
  width: 16px;
  height: 16px;
  color: #009cde;
}
.living-observatory .pay-methods .pay-logo-text span {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #002991;
}
.living-observatory .pay-methods .pay-logo-text .icon,
.living-observatory .pay-methods .pay-logo-text span {
  filter: grayscale(1) contrast(0.92);
  opacity: 0.72;
  transition:
    filter 0.5s ease,
    opacity 0.5s ease;
}
.living-observatory .pay-methods .pay-logo-text:hover .icon,
.living-observatory .pay-methods .pay-logo-text:hover span,
.living-observatory .pay-groups.is-lit .pay-logo-text .icon,
.living-observatory .pay-groups.is-lit .pay-logo-text span {
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   Round 1 structure: page introductions, hero facts, previews, booking flow
   ========================================================================== */
.living-observatory .page-hero {
  padding: 120px 0 34px;
  background: radial-gradient(ellipse at 85% 10%, #24465340, transparent 55%),
    radial-gradient(ellipse at 10% 90%, #d8b6810d, transparent 50%);
}
.living-observatory .page-hero h1 {
  font:
    500 68px/1.02 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  margin: 16px 0 18px;
  color: #f2e8d7;
}
.living-observatory .page-hero h1 em {
  color: #d8b681;
}
.living-observatory .page-hero p {
  max-width: 620px;
  color: #b9c7d0;
  font-size: 16px;
}
.living-observatory.subpage .story {
  border-top: 0;
}
.living-observatory .hero-facts {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #c9d5dc;
}
.living-observatory .hero-facts li + li::before {
  content: '·';
  margin: 0 12px;
  color: #d8b681;
}
.living-observatory .section-more {
  margin: 34px 0 0;
  text-align: center;
}
.living-observatory .experience-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
}
.living-observatory .faq-teaser {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.living-observatory .faq-teaser a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #a7c3ce26;
  color: #e5dcc9;
  font-size: 15px;
}
.living-observatory .faq-teaser a::after {
  content: '→';
  color: #d8b681;
}
.living-observatory .faq-teaser a:hover {
  color: #efd4a7;
}
.living-observatory .page-cta {
  border-top: 1px solid #a4c0cd1c;
}
.living-observatory .page-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.living-observatory .page-cta h2 {
  font-size: 48px;
  margin: 10px 0 0;
}
.living-observatory .faq-policies {
  padding-top: 0;
}
.living-observatory .service-actions a {
  font-size: 11px;
  line-height: 1.5;
  max-width: 50%;
  padding-top: 22px;
  color: #b4bdc6;
  text-align: right;
}
.living-observatory .service-actions a:hover {
  color: #f3d4a0;
}

/* Booking flow: in the dialog and inline on /book (light card, like the original planner) */
.living-observatory .book-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: start;
}
.living-observatory .book-card {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid #d7bd8c70;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 35px 100px #0006;
}
.living-observatory .book-aside {
  padding-top: 12px;
}
.living-observatory .book-aside .workshops-points {
  margin-top: 12px;
}
.book-flow fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}
.book-flow .book-q {
  display: block;
  padding: 0;
  font:
    500 38px/1.08 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: var(--ink);
  margin: 22px 0 12px;
}
.book-flow .book-q:focus {
  outline: none;
}
.book-flow .book-hint {
  font-size: 13px;
  color: #56616a;
  margin: 0 0 14px;
}
.book-flow .choices {
  margin: 14px 0 6px;
}
.book-flow .choice {
  position: relative;
  display: grid;
  gap: 4px;
  cursor: pointer;
  border-radius: 12px;
}
.book-flow .choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.book-flow .choice strong {
  font:
    500 22px/1.2 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
}
.book-flow .choice small {
  font-size: 12px;
  color: #56616a;
}
.book-flow .choice:has(input:checked) {
  border-color: #8f703d;
  background: #c8ab7322;
  box-shadow: inset 0 0 0 1px #8f703d;
}
.book-flow .choice:has(input:focus-visible) {
  outline: 2px solid #8f703d;
  outline-offset: 2px;
}
.book-flow .choices-compact {
  grid-template-columns: 1fr 1fr;
}
.book-flow .choices-compact .choice {
  padding: 12px 14px;
  font-size: 13px;
}
.book-flow .book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.book-flow .book-field {
  display: block;
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #3c4a52;
}
.book-flow .book-field small {
  color: #5d676c;
}
.book-flow .book-field input,
.book-flow .book-field select,
.book-flow .book-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 12px 13px;
  font:
    14px 'DM Sans',
    'DM Sans Fallback',
    Arial,
    sans-serif;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid #17243230;
  border-radius: 10px;
}
.book-flow .book-field input:focus,
.book-flow .book-field select:focus,
.book-flow .book-field textarea:focus {
  border-color: #8f703d;
  outline: 2px solid #8f703d55;
  outline-offset: 1px;
}
.book-flow .book-tick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 13px;
  color: #3c4a52;
}
.book-flow .book-tick input {
  accent-color: #8f703d;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
}
.book-flow .tz-note {
  color: #3c4a52;
  background: #c8ab7322;
  border-left-color: #8f703d;
}
.book-flow .book-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: #8f703d;
}
.book-flow .book-status:empty {
  display: none;
}
.book-flow .book-done p {
  font-size: 15px;
  color: #3c4a52;
}
.book-flow .book-done .book-q {
  font-size: 44px;
}
/* Without JavaScript every step shows as one form; the step buttons only appear once it is stepped. */
.book-flow:not(.is-stepped) [data-back],
.book-flow:not(.is-stepped) [data-next],
.book-flow:not(.is-stepped) .book-progress {
  display: none;
}
.book-flow [hidden] {
  display: none !important;
}
@media (max-width: 950px) {
  .living-observatory .book-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .living-observatory .page-hero {
    padding: 96px 0 20px;
  }
  .living-observatory .page-hero h1 {
    font-size: 44px;
  }
  .living-observatory .faq-teaser {
    grid-template-columns: 1fr;
  }
  .living-observatory .page-cta h2 {
    font-size: 36px;
  }
  .living-observatory .book-card {
    padding: 24px 20px;
  }
  .book-flow .book-q {
    font-size: 32px;
  }
  .book-flow .book-row,
  .book-flow .choices-compact {
    grid-template-columns: 1fr;
  }
}
.living-observatory .book-dialog .close {
  position: absolute;
  top: 12px;
  right: 14px;
  float: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
}
.living-observatory .book-dialog .close:hover {
  background: #c8ab7322;
}
.living-observatory .book-dialog .book-progress {
  padding-right: 34px;
}
/* Step labels on the ivory booking card: darker gold and slate so they meet contrast (the planner's were faint). */
.book-flow .book-progress,
.book-flow .book-progress > span {
  color: #786037;
}
.book-flow .planner-track span {
  color: #5d676c;
}
.book-flow .planner-track span.done {
  color: #6f5630;
}

/* ==========================================================================
   Round 2: tonight's moon, self-drawing lines, mounts, hand shapes
   ========================================================================== */
.living-observatory .hero-moon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #b9c7d0;
}
.living-observatory .hero-moon b {
  font-weight: 500;
  color: #efd4a7;
}
.living-observatory .hero-moon svg {
  width: 20px;
  height: 20px;
  flex: none;
  filter: drop-shadow(0 0 6px #efd4a755);
}
.living-observatory .hero-moon .moon-dark {
  fill: #0d1c28;
  stroke: #d8b68155;
  stroke-width: 0.8;
}
.living-observatory .hero-moon .moon-lit {
  fill: #f2e3c2;
}

/* Atlas: lines draw in one after another the first time the Atlas is seen (site.js adds .is-drawing). */
.living-observatory .atlas-art.is-drawing .atlas-photo-overlay .atlas-line {
  opacity: 1;
  stroke: #f1d99a;
  stroke-width: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: atlas-draw 1.15s cubic-bezier(0.45, 0, 0.2, 1) forwards;
  filter: drop-shadow(0 0 5px #f1d99a80);
}
.living-observatory .atlas-art.is-drawing #line-head {
  animation-delay: 0.35s;
}
.living-observatory .atlas-art.is-drawing #line-life {
  animation-delay: 0.7s;
}
.living-observatory .atlas-art.is-drawing #line-fate {
  animation-delay: 1.05s;
}
@keyframes atlas-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Atlas: lines / mounts switch */
.living-observatory .atlas-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid #d8b68140;
  border-radius: 30px;
}
.living-observatory .atlas-modes button {
  border: 0;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #b5c5cf;
  background: transparent;
}
.living-observatory .atlas-modes button[aria-pressed='true'] {
  background: #d8b681;
  color: #07111c;
}
.living-observatory .mount-tabs {
  flex-wrap: wrap;
}
.living-observatory .mount-tabs button {
  padding: 9px 13px;
}
.living-observatory .atlas-art.mode-mounts .hotspot,
.living-observatory .atlas-art.mode-mounts .atlas-leaders,
.living-observatory .atlas-art.mode-mounts .atlas-pins,
.living-observatory .atlas-art.mode-mounts .atlas-line {
  display: none;
}
.living-observatory .atlas-art .mount[hidden] {
  display: none;
}
.living-observatory .atlas-art .mount {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 4;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #f1d99acc;
  background: #0d202dd9;
  color: #f1d99a;
  font:
    15px/1 'DM Sans',
    'Segoe UI Symbol',
    'Noto Sans Symbols',
    serif;
  box-shadow: 0 0 0 4px #0d202d40;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.3s;
}
.living-observatory .atlas-art .mount::before {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3a955, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.living-observatory .atlas-art .mount:hover,
.living-observatory .atlas-art .mount[aria-pressed='true'] {
  background: #f1d99a;
  color: #07111c;
}
.living-observatory .atlas-art .mount[aria-pressed='true']::before {
  opacity: 1;
}
.living-observatory .atlas-art .mount:focus-visible {
  outline: 2px solid #f1d99a;
  outline-offset: 3px;
}

/* Hand-shape step */
.living-observatory .hand-shape {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
  margin: 70px 0 10px;
  padding: 36px;
  border: 1px solid #d7bd8c40;
  border-radius: 20px;
  background: linear-gradient(120deg, #1b34415c, #0b192470);
}
.living-observatory .hand-shape h3 {
  font-size: 44px;
  line-height: 1.05;
  margin: 12px 0 14px;
}
.living-observatory .hand-shape h3 em {
  color: #d8b681;
}
.living-observatory .hand-shape-intro p {
  color: #b9c7d0;
  font-size: 14px;
}
.living-observatory .hand-shape-quiz fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.living-observatory .hand-shape-quiz legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  color: #e5dcc9;
}
.living-observatory .hs-choice {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid #b3ccd036;
  border-radius: 12px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.living-observatory .hs-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.living-observatory .hs-choice strong {
  display: block;
  font:
    500 21px/1.2 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #f2e8d7;
}
.living-observatory .hs-choice small {
  font-size: 12px;
  color: #9fb3bf;
}
.living-observatory .hs-choice:hover {
  border-color: #d7bd8c80;
}
.living-observatory .hs-choice:has(input:checked) {
  border-color: #d8b681;
  background: #d8b6811a;
}
.living-observatory .hs-choice:has(input:focus-visible) {
  outline: 2px solid #d8b681;
  outline-offset: 2px;
}
.living-observatory .hand-shape-result {
  margin-top: 8px;
  padding: 24px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
}
.living-observatory .hand-shape-result .eyebrow {
  color: #786037;
}
.living-observatory .hand-shape-result h4 {
  font:
    500 34px/1.1 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  margin: 8px 0 10px;
}
.living-observatory .hand-shape-result p {
  font-size: 14px;
  color: #3c4a52;
  margin: 0 0 12px;
}
.living-observatory .hand-shape-result .reflect {
  font:
    italic 20px/1.4 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #172b35;
  border-left: 2px solid #8f703d;
  padding-left: 14px;
}
.living-observatory .hand-shape-result .note {
  font-size: 12px;
  color: #56616a;
}
.living-observatory .hand-shape-result .btn {
  margin-top: 6px;
  color: #efd4a7;
  background: #142434;
  border-color: #142434;
}

/* Story timeline: each chapter's line grows and its node lights as you reach it (common.mjs adds the classes). */
.living-observatory .story-timeline.is-animated > li::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1);
}
.living-observatory .story-timeline.is-animated > li::after {
  opacity: 0.25;
  transform: scale(0.6);
  transition:
    opacity 0.6s,
    transform 0.6s;
}
.living-observatory .story-timeline.is-animated > li.is-reached::before {
  transform: scaleY(1);
}
.living-observatory .story-timeline.is-animated > li.is-reached::after {
  opacity: 1;
  transform: none;
}
@media (max-width: 950px) {
  .living-observatory .hand-shape {
    grid-template-columns: 1fr;
    padding: 26px;
  }
}
@media (max-width: 650px) {
  .living-observatory .atlas-art .mount {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .living-observatory .hand-shape h3 {
    font-size: 36px;
  }
  .living-observatory .hand-shape-quiz fieldset {
    grid-template-columns: 1fr;
  }
}

/* ── Rates: the three personal readings ─────────────────────────────────────────────────────── */
.living-observatory .rates {
  margin: 56px 0 0;
  padding: 44px 40px 36px;
  border: 1px solid #d7bd8c33;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0%, #d7bd8c14, transparent 60%), linear-gradient(160deg, #0f1f2c, #07111c);
}
.living-observatory .rates-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 34px;
}
.living-observatory .rates-head h3 {
  font:
    400 clamp(34px, 4vw, 48px) / 1.05 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #f3e5c9;
  margin: 12px 0 12px;
}
.living-observatory .rates-head h3 em {
  color: var(--gold);
}
.living-observatory .rates-head p {
  color: var(--muted);
  margin: 0;
}
.living-observatory .rate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.living-observatory .rate {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
  border: 1px solid #b6cbe022;
  border-radius: 20px;
  background: #ffffff05;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}
.living-observatory .rate:hover {
  border-color: #d7bd8c66;
}
.living-observatory .rate-featured {
  border-color: #d7bd8c73;
  background: linear-gradient(170deg, #d7bd8c14, #ffffff04 55%);
}
.living-observatory .rate-glyph {
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.living-observatory .rate-tag {
  position: absolute;
  top: 26px;
  right: 22px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #07111c;
  background: var(--gold);
  border-radius: 20px;
  padding: 4px 10px;
}
.living-observatory .rate h4 {
  font:
    500 26px/1.12 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  color: #f3e5c9;
  margin: 16px 0 10px;
}
.living-observatory .rate-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #d7bd8c2e;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.living-observatory .rate-meta strong {
  font:
    500 30px/1 'Cormorant Garamond',
    'Cormorant Fallback',
    'Cormorant Fallback Times',
    Georgia,
    serif;
  letter-spacing: 0;
  color: var(--gold-soft);
}
.living-observatory .rate ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  align-content: start;
  gap: 9px;
  flex: 1;
}
.living-observatory .rate ul li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #d5dee3;
}
.living-observatory .rate ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 11px;
  color: var(--gold);
}
.living-observatory .rate-book {
  align-self: flex-start;
  font-size: 13px;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid #d7bd8c66;
  padding-bottom: 2px;
}
.living-observatory .rate-book:hover,
.living-observatory .rate-book:focus-visible {
  color: #fff;
  border-color: var(--gold);
}
.living-observatory .rate-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  max-width: 640px;
  margin: 26px auto 0;
}
.living-observatory .channel-icons a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}
.book-flow .book-subq {
  font-size: 24px;
  margin: 26px 0 4px;
}
.living-observatory .book-rates {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
@media (max-width: 900px) {
  .living-observatory .rate-list {
    grid-template-columns: 1fr;
  }
  .living-observatory .rates {
    padding: 34px 20px 28px;
  }
}

/* ── Findability and a shorter phone homepage ───────────────────────────────────────────────── */
.living-observatory .presence-video[hidden] {
  display: none;
}
/* On phones, session cards, journal notes, and booking steps become swipeable rows (the next card peeks in). */
@media (max-width: 640px) {
  .living-observatory #sessions .cards,
  .living-observatory #journal .journal-grid,
  .living-observatory #experience .steps {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: #d7bd8c55 transparent;
  }
  .living-observatory #sessions .cards > *,
  .living-observatory #journal .journal-grid > *,
  .living-observatory #experience .steps > * {
    scroll-snap-align: start;
    min-width: 0;
  }
  .living-observatory .swipe-hint {
    display: block;
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
  }
}