/* ==========================================================
   THE READING OBSERVATORY · STATS
   Full consolidated stylesheet.
   Global Angel Archive shell remains in ../styles.css.
   ========================================================== */


/* ==========================================================
   01 · PAGE
   ========================================================== */

.stats-page {
  --obs-rose: #c87985;
  --obs-deep: #79535c;
  --obs-blush: #f4dfe2;
  --obs-pearl: #fffaf8;
  --obs-cream: #fff7ef;
  --obs-line: rgba(200, 121, 133, 0.25);
  --obs-shadow: 0 22px 55px rgba(107, 70, 79, 0.09);

  color: #684c53;

  background:
    radial-gradient(
      circle at 13% 12%,
      rgba(244, 210, 216, 0.42),
      transparent 26rem
    ),
    radial-gradient(
      circle at 88% 34%,
      rgba(255, 238, 219, 0.55),
      transparent 25rem
    ),
    #fffaf8;
}

.stats-page main {
  overflow: hidden;
}


/* ==========================================================
   02 · HERO
   ========================================================== */

.observatory-hero {
  position: relative;

  min-height: 690px;

  display: grid;
  align-items: center;

  padding: 8.5rem 5vw 5rem;
}

.observatory-hero::before,
.observatory-hero::after {
  content: "✦";
  position: absolute;
  color: rgba(200, 121, 133, 0.22);
  font-size: 1rem;
}

.observatory-hero::before {
  left: 8%;
  top: 29%;
}

.observatory-hero::after {
  right: 10%;
  bottom: 18%;
  font-size: 1.4rem;
}

.observatory-hero__inner {
  width: min(1180px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 5rem;
  align-items: center;
}

.observatory-eyebrow,
.observatory-section__heading > p {
  margin: 0 0 1rem;

  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.23em;
  text-transform: uppercase;

  color: var(--obs-rose);
}

.observatory-hero h1 {
  max-width: 650px;
  margin: 0;

  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(4rem, 7vw, 6.7rem);
  font-weight: 500;
  line-height: 0.84;

  color: var(--obs-deep);
}

.observatory-hero h1 span {
  display: block;

  margin: 0.12em 0 0 0.48em;

  font-family: "Allura", cursive;
  font-size: 0.92em;
  font-weight: 400;

  color: var(--obs-rose);
}

.observatory-hero__description {
  max-width: 570px;
  margin: 2rem 0 2.2rem;

  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 1.25rem;
  line-height: 1.65;

  color: #80646b;
}

.observatory-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;

  padding: 0.9rem 1.35rem;

  border: 1px solid rgba(200, 121, 133, 0.38);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.62);

  box-shadow: 0 10px 28px rgba(112, 73, 82, 0.07);

  color: var(--obs-deep);
  text-decoration: none;

  font: 600 0.76rem / 1 var(--font-body, "DM Sans", sans-serif);
  letter-spacing: 0.08em;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.observatory-button:hover {
  transform: translateY(-2px);
  background: white;
  box-shadow: 0 14px 32px rgba(112, 73, 82, 0.12);
}


/* ---------- Orrery ---------- */

.observatory-hero__art {
  min-height: 470px;

  display: grid;
  place-items: center;
}

.orrery {
  position: relative;

  width: min(430px, 76vw);
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.9) 0 3%,
      rgba(246, 222, 225, 0.28) 4% 32%,
      transparent 33%
    );

  filter: drop-shadow(0 25px 42px rgba(115, 78, 87, 0.1));
}

.orrery::before,
.orrery::after {
  content: "";

  position: absolute;
  inset: 11%;

  border: 1px solid rgba(200, 121, 133, 0.16);
  border-radius: 50%;
}

.orrery::after {
  inset: 25%;
  border-style: dashed;
}

.orrery__orbit {
  position: absolute;
  inset: 5%;

  border: 1px solid rgba(200, 121, 133, 0.38);
  border-radius: 50%;

  transform: rotate(-18deg) scaleY(0.52);
}

.orrery__orbit--two {
  inset: 17%;

  border-color: rgba(205, 157, 126, 0.36);

  transform: rotate(36deg) scaleY(0.63);
}

.orrery__orbit--three {
  inset: 30%;

  transform: rotate(-62deg) scaleY(0.68);
}

.orrery__star--center {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  font-size: 3rem;

  color: var(--obs-rose);

  text-shadow: 0 0 28px rgba(200, 121, 133, 0.32);
}

.orrery__planet {
  position: absolute;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(200, 121, 133, 0.28);
  border-radius: 50%;

  background: rgba(255, 250, 248, 0.94);

  box-shadow: 0 8px 20px rgba(104, 76, 83, 0.08);

  color: var(--obs-rose);
}

.orrery__planet--one {
  left: 7%;
  top: 43%;
}

.orrery__planet--two {
  right: 14%;
  top: 17%;
}

.orrery__planet--three {
  right: 9%;
  bottom: 25%;
  font-family: serif;
}


/* ==========================================================
   03 · SHARED SECTIONS
   ========================================================== */

.observatory-section {
  width: min(1180px, 90vw);
  margin: 0 auto;

  padding: 2.6rem 0;
}

.observatory-section__heading {
  max-width: 760px;

  margin: 0 auto 2.7rem;

  text-align: center;
}

.observatory-section__heading h2 {
  margin: 0;

  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1;

  color: var(--obs-deep);
}

.observatory-section__heading > span {
  display: block;

  margin: 1rem auto 0;

  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 1.12rem;
  font-style: italic;

  color: #92757c;
}


/* ==========================================================
   04 · ARCHIVE AT A GLANCE
   ========================================================== */

.glance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.glance-card {
  position: relative;

  padding: 2rem 1rem 1.8rem;

  text-align: center;

  border: 1px solid var(--obs-line);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 247, 244, 0.72)
    );

  box-shadow: var(--obs-shadow);
}

.glance-card__symbol {
  display: block;

  margin-bottom: 0.55rem;

  color: rgba(200, 121, 133, 0.58);
}

.glance-card strong {
  display: block;

  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 2.55rem;
  font-weight: 500;
  line-height: 1;

  color: var(--obs-deep);
}

.glance-card p {
  margin: 0.55rem 0 0;

  font: 600 0.68rem / 1.4 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #a17c84;
}


/* ==========================================================
   05 · READING SKY
   IMPORTANT:
   Reading Sky uses the SAME centered section structure as
   every other Observatory section. No side-by-side layout.
   ========================================================== */

.observatory-section {
  width: min(92vw, 1180px);

  padding: 2.5rem 0;
}

.sky-panel {
  width: 100%;
  max-width: none;

  margin: 0 auto;

  padding: 2rem;

  border: 1px solid var(--obs-line);
  border-radius: 30px;

  background: rgba(255, 255, 255, 0.64);

  box-shadow: var(--obs-shadow);

  backdrop-filter: blur(10px);
}

.sky-panel__topline {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 1.5rem;

  padding: 0 0.25rem 1.5rem;
}

.sky-year-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sky-year-control strong {
  min-width: 64px;

  text-align: center;

  font: 500 1.35rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.sky-year-control button {
  width: 34px;
  height: 34px;

  border: 1px solid var(--obs-line);
  border-radius: 50%;

  background: #fffaf8;

  color: var(--obs-rose);

  cursor: pointer;
}

.sky-year-control button:disabled {
  opacity: 0.3;
  cursor: default;
}

.sky-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  font: 500 0.68rem / 1 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.07em;

  color: #92757c;
}

.sky-legend span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sky-dot {
  width: 8px;
  height: 8px;

  display: inline-block;

  border-radius: 50%;

  box-shadow: 0 0 10px currentColor;
}

.sky-dot--read {
  background: #c87985;
  color: #c87985;
}

.sky-dot--listened {
  background: #d8b28b;
  color: #d8b28b;
}

.sky-dot--both {
  background: #9c7182;
  color: #9c7182;
}


/* ---------- Sky Canvas ---------- */

.reading-sky__canvas {
  position: relative;

  width: 100%;
  min-height: 500px;

  overflow: hidden;

  border: 1px solid rgba(200, 121, 133, 0.16);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.95),
      transparent 18%
    ),
    radial-gradient(
      circle at 75% 38%,
      rgba(244, 219, 224, 0.34),
      transparent 24%
    ),
    linear-gradient(
      160deg,
      #fffaf7,
      #f9eeed
    );
}

.reading-sky__canvas::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.4;

  background-image:
    radial-gradient(
      circle,
      rgba(200, 121, 133, 0.42) 1px,
      transparent 1.2px
    );

  background-size: 38px 38px;
}

.reading-sky__grid {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 500px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.2rem;
  align-content: center;

  padding: 2.8rem 2.5rem;
}

.reading-sky__month {
  min-width: 0;
}

.reading-sky__month-name {
  margin-bottom: 0.75rem;

  text-align: center;

  font: 600 0.59rem / 1 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #a18188;
}

.reading-sky__stars {
  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.28rem;

  justify-items: center;
}

.reading-sky__star {
  width: 100%;

  aspect-ratio: 1;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: default;
}

.reading-sky__star span {
  display: block;

  font-size: clamp(0.48rem, 0.72vw, 0.74rem);
  line-height: 1;

  transform: scale(0.72);

  color: rgba(200, 121, 133, 0.12);

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.reading-sky__star--read span {
  transform: scale(1);

  color: #c87985;

  text-shadow: 0 0 8px rgba(200, 121, 133, 0.48);
}

.reading-sky__star--listened span {
  transform: scale(1);

  color: #d8b28b;

  text-shadow: 0 0 8px rgba(216, 178, 139, 0.52);
}

.reading-sky__star--both span {
  transform: scale(1.18);

  color: #9c7182;

  text-shadow:
    0 0 6px rgba(156, 113, 130, 0.52),
    0 0 14px rgba(200, 121, 133, 0.38);
}

.reading-sky__star:not(.reading-sky__star--inactive):hover span {
  transform: scale(1.4);
}

.reading-sky__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: grid;
  place-content: center;
  gap: 0.7rem;

  text-align: center;

  color: #a18188;
}

.reading-sky__placeholder span {
  font-size: 2rem;
  color: var(--obs-rose);
}

.reading-sky__placeholder p {
  margin: 0;

  font: italic 1.05rem / 1.4 var(--font-display, "Cormorant Garamond", serif);
}


/* ---------- Habit Summary ---------- */

.habit-summary {
  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 0;

  padding-top: 1.3rem;
}

.habit-summary div {
  min-width: 0;

  padding: 1rem 0.65rem;

  text-align: center;

  border-right: 1px solid rgba(200, 121, 133, 0.14);
}

.habit-summary div:last-child {
  border-right: 0;
}

.habit-summary strong {
  display: block;

  min-height: 1.7rem;

  font: 500 1.45rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.habit-summary span {
  display: block;

  max-width: 90px;

  margin: 0.45rem auto 0;

  font: 600 0.59rem / 1.3 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.09em;
  text-transform: uppercase;

  color: #a18188;
}


/* ==========================================================
   06 · SHARED OBSERVATORY PANELS
   ========================================================== */

.observatory-panel {
  min-height: 270px;

  padding: 1.7rem;

  border: 1px solid var(--obs-line);
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.72);

  box-shadow: var(--obs-shadow);
}

.panel-label {
  padding-bottom: 1rem;

  border-bottom: 1px solid rgba(200, 121, 133, 0.14);

  font: 600 0.64rem / 1 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--obs-rose);
}

.panel-empty {
  min-height: 180px;

  display: grid;
  place-items: center;

  padding: 1rem;

  text-align: center;

  font: italic 1.05rem / 1.5 var(--font-display, "Cormorant Garamond", serif);

  color: #a18188;
}


/* ==========================================================
   07 · READING DNA
   ========================================================== */

.dna-grid {
  display: grid;

  grid-template-columns: 1.3fr 0.85fr 0.85fr;

  gap: 1rem;
}


/* ---------- Genre Bars ---------- */

.dna-bars {
  display: grid;

  gap: 1.05rem;

  padding-top: 1.35rem;
}

.dna-bar {
  display: grid;
  gap: 0.42rem;
}

.dna-bar__meta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.dna-bar__meta span {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font: 500 0.84rem / 1.2 var(--font-body, "DM Sans", sans-serif);

  color: #80646b;
}

.dna-bar__meta strong {
  flex: 0 0 auto;

  font: 500 1rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.dna-bar__track {
  height: 5px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(200, 121, 133, 0.09);
}

.dna-bar__track i {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(200, 121, 133, 0.4),
      rgba(200, 121, 133, 0.92)
    );
}

.dna-bar--primary .dna-bar__track i {
  box-shadow: 0 0 12px rgba(200, 121, 133, 0.3);
}


/* ---------- Formats ---------- */

.format-list {
  display: grid;

  gap: 1.1rem;

  padding-top: 1.35rem;
}

.format-item {
  display: grid;

  grid-template-columns: 26px 1fr;

  gap: 0.7rem;

  align-items: center;
}

.format-item__symbol {
  display: grid;
  place-items: center;

  color: var(--obs-rose);

  text-shadow: 0 0 10px rgba(200, 121, 133, 0.22);
}

.format-item__copy {
  min-width: 0;

  display: grid;
  gap: 0.12rem;
}

.format-item__copy strong {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font: 500 1rem / 1.1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.format-item__copy small {
  font: 600 0.55rem / 1.3 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.07em;
  text-transform: uppercase;

  color: #a18188;
}


/* ---------- Familiar Ink ---------- */

.author-list {
  display: grid;

  gap: 0.9rem;

  padding-top: 1.3rem;
}

.author-item {
  display: grid;

  grid-template-columns: 27px 1fr;

  gap: 0.7rem;

  align-items: center;
}

.author-item__rank {
  font: italic 0.82rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: rgba(200, 121, 133, 0.72);
}

.author-item__copy {
  min-width: 0;

  display: grid;
  gap: 0.13rem;
}

.author-item__copy strong {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font: 500 1rem / 1.1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.author-item__copy small {
  font: 600 0.54rem / 1.25 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #a18188;
}


/* ==========================================================
   08 · TASTE AMONG THE STARS
   ========================================================== */

.taste-layout {
  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  gap: 1rem;
}


/* ---------- Scale ---------- */

.scale-list {
  display: grid;

  gap: 1rem;

  padding-top: 1.35rem;
}

.scale-item {
  display: grid;

  grid-template-columns:
    minmax(130px, 0.8fr)
    minmax(150px, 1.2fr);

  gap: 1rem;

  align-items: center;
}

.scale-item__identity {
  display: grid;

  grid-template-columns: 24px 1fr;

  gap: 0.6rem;

  align-items: center;
}

.scale-item__identity > span {
  display: grid;
  place-items: center;

  color: var(--obs-rose);
}

.scale-item__identity div {
  display: grid;
  gap: 0.08rem;
}

.scale-item__identity strong {
  font: 600 0.62rem / 1.1 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.1em;

  color: #80646b;
}

.scale-item__identity small {
  font: italic 0.76rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: #ad8e95;
}

.scale-item__visual {
  display: grid;

  grid-template-columns: 1fr 32px;

  gap: 0.65rem;

  align-items: center;
}

.scale-item__track {
  height: 6px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(200, 121, 133, 0.08);
}

.scale-item__track i {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(216, 178, 139, 0.52),
      rgba(200, 121, 133, 0.86)
    );
}

.scale-item__visual > strong {
  text-align: right;

  font: 500 0.95rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}


/* ---------- Taste Notes ---------- */

.taste-note-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;

  padding-top: 1.35rem;
}

.taste-note {
  min-width: 0;
  min-height: 105px;

  display: grid;
  align-content: center;

  gap: 0.28rem;

  padding: 1rem 1.05rem;

  border: 1px solid rgba(200, 121, 133, 0.14);
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 252, 250, 0.86),
      rgba(250, 235, 237, 0.36)
    );
}

.taste-note > span {
  font: 600 0.52rem / 1.2 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--obs-rose);
}

.taste-note > strong {
  overflow-wrap: anywhere;

  font: 500 1.45rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.taste-note > small {
  font: italic 0.77rem / 1.3 var(--font-display, "Cormorant Garamond", serif);

  color: #9d7e85;
}


/* ==========================================================
   09 · ARCHIVE ODDITIES
   ========================================================== */

.oddities-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;
}

.oddity-card {
  min-height: 165px;

  display: flex;
  flex-direction: column;

  padding: 1.5rem 1.6rem;

  border: 1px solid var(--obs-line);
  border-radius: 22px;

  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.9),
      rgba(248, 229, 232, 0.5)
    );

  box-shadow: var(--obs-shadow);
}

.oddity-card span {
  margin-bottom: 1.7rem;

  font: 600 0.64rem / 1 var(--font-body, "DM Sans", sans-serif);

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--obs-rose);
}

.oddity-card strong {
  overflow-wrap: anywhere;

  font: 500 2.1rem / 1 var(--font-display, "Cormorant Garamond", serif);

  color: var(--obs-deep);
}

.oddity-card p {
  margin: 0.6rem 0 0;

  overflow-wrap: anywhere;

  font: italic 1rem / 1.3 var(--font-display, "Cormorant Garamond", serif);

  color: #92757c;
}


/* ==========================================================
   10 · RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {

  .observatory-hero__inner {
    grid-template-columns: 1fr;

    gap: 1rem;

    text-align: center;
  }

  .observatory-hero__copy {
    display: grid;
    justify-items: center;
  }

  .observatory-hero h1 span {
    margin-left: 0;
  }

  .observatory-hero__art {
    min-height: 380px;
  }

  .glance-grid,
  .oddities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .habit-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .dna-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dna-grid .observatory-panel--large {
    grid-column: 1 / -1;
  }

  .reading-sky__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}


@media (max-width: 700px) {

  .observatory-hero {
    min-height: auto;

    padding: 7.5rem 6vw 3rem;
  }

  .observatory-hero h1 {
    font-size: clamp(3.4rem, 16vw, 5rem);
  }

  .observatory-hero__art {
    min-height: 315px;
  }

  .observatory-section,
.observatory-section--sky {
  width: min(92vw, 1180px);

  padding: 3.5rem 0;
}

  .glance-grid,
  .dna-grid,
  .taste-layout,
  .oddities-grid {
    grid-template-columns: 1fr;
  }

  .dna-grid .observatory-panel--large {
    grid-column: auto;
  }

  .sky-panel {
    padding: 1rem;

    border-radius: 22px;
  }

  .sky-panel__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .reading-sky__canvas,
.reading-sky__grid {
  min-height: 390px;
}

.reading-sky__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0.8rem;
  padding: 1.5rem 1rem;
}

  .reading-sky__stars {
    gap: 0.16rem;
  }

  .reading-sky__star span {
    font-size: 0.5rem;
  }

  .habit-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .habit-summary div {
    border-right: 0;

    border-bottom: 1px solid rgba(200, 121, 133, 0.12);
  }

  .scale-item {
    grid-template-columns: 1fr;

    gap: 0.45rem;
  }

  .taste-note-grid {
    grid-template-columns: 1fr;
  }
}


@media (prefers-reduced-motion: reduce) {

  .observatory-button,
  .reading-sky__star span {
    transition: none;
  }
}
/* ==========================================================
   11 · FINAL OBSERVATORY POLISH
   ========================================================== */

/* Hero blockquote */
.observatory-hero__description {
  position: relative;
  max-width: 570px;
  margin: 1.65rem 0 1.85rem;
  padding: 0.35rem 0 0.35rem 1.4rem;
  border-left: 2px solid rgba(200, 121, 133, 0.48);
  font-style: italic;
}
.observatory-hero__description::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: -0.34rem;
  padding: 0.15rem;
  background: rgba(255, 249, 250, 0.82);
  color: #d6a95c;
  font: normal 0.55rem/1 Georgia, serif;
}

/* Translucent photo atmosphere */
.observatory-hero,
.observatory-glance,
.reading-sky,
.reading-dna,
.taste-stars,
.archive-oddities { position: relative; isolation: isolate; }
.observatory-hero > *, .observatory-section > * { position: relative; z-index: 2; }
.observatory-hero { min-height: 625px; overflow: hidden; background: #fff9f8; }
.observatory-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background: url("../assets/images/shelf-arches.jpg") center 46% / cover no-repeat;
  opacity: 0.22; pointer-events: none;
}
.observatory-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, rgba(255,250,249,.56), rgba(255,250,249,.34) 44%, rgba(255,250,249,.10) 72%, transparent);
  pointer-events: none;
}
.observatory-glance::before,
.reading-sky::before,
.reading-dna::before,
.taste-stars::before,
.archive-oddities::before {
  content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: url("../assets/images/shelf-ethereal.jpg") center / cover no-repeat;
  opacity: .18; pointer-events: none;
}
.reading-sky::before { background-position: center 38%; opacity: .15; }
.reading-dna::before { background-position: center 56%; opacity: .19; }
.taste-stars::before { background-position: center 72%; opacity: .16; }
.archive-oddities::before { background-position: center 84%; opacity: .18; }
.observatory-glance::after,
.reading-sky::after,
.reading-dna::after,
.taste-stars::after,
.archive-oddities::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,250,248,.28), rgba(255,250,248,.08) 28%, rgba(255,250,248,.08) 72%, rgba(255,250,248,.28));
  pointer-events: none;
}

/* Observatory period */
.observatory-period { position: relative; z-index: 4; width: min(1180px, 90vw); margin: -.4rem auto 0; padding: .8rem 0 1.2rem; }
.observatory-period__inner { display: grid; justify-items: center; gap: .85rem; text-align: center; }
.observatory-period__inner > p { margin: 0; color: var(--obs-rose); font: 600 .68rem/1 var(--font-body,"DM Sans",sans-serif); letter-spacing: .22em; text-transform: uppercase; }
.observatory-period__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.observatory-period__controls button {
  min-width: 84px; padding: .68rem 1.05rem; border: 1px solid rgba(200,121,133,.24); border-radius: 999px;
  background: rgba(255,252,251,.66); box-shadow: 0 8px 22px rgba(107,70,79,.055); color: #98747d;
  font: 600 .64rem/1 var(--font-body,"DM Sans",sans-serif); letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.observatory-period__controls button:hover { transform: translateY(-1px); border-color: rgba(200,121,133,.42); color: var(--obs-deep); }
.observatory-period__controls button.is-active { background: rgba(200,121,133,.88); border-color: rgba(200,121,133,.76); box-shadow: 0 10px 25px rgba(143,84,96,.15), inset 0 0 0 4px rgba(255,255,255,.16); color: #fffaf8; }
.observatory-period__inner > span { color: #a18188; font: italic .98rem/1.35 var(--font-display,"Cormorant Garamond",serif); }

/* Tighter rhythm */
.observatory-section { padding: 2rem 0 2.2rem; }
.observatory-section__heading { margin-bottom: 2rem; }
.observatory-section__heading > p { margin-bottom: .72rem; }
.observatory-section__heading > span { margin-top: .72rem; }
.observatory-glance { padding-top: 1.8rem; }
.sky-panel { padding: 1.65rem; }
.reading-sky__canvas, .reading-sky__grid { min-height: 455px; }
.observatory-panel { min-height: 250px; }
.archive-oddities { padding-bottom: 3.4rem; }

@media (max-width:700px) {
  .observatory-hero { min-height: auto; }
  .observatory-hero::before { background-size: auto 100%; opacity: .18; }
  .observatory-period { width: min(92vw,1180px); margin-top: 0; padding-bottom: .9rem; }
  .observatory-period__controls button { min-width: 72px; padding-inline: .85rem; }
  .observatory-section { padding: 2.25rem 0; }
  .observatory-section__heading { margin-bottom: 1.7rem; }
  .reading-sky__canvas, .reading-sky__grid { min-height: 390px; }
}

.observatory-period {
  position: relative;
  isolation: isolate;

  width: min(1180px, 90vw);
  margin: -0.4rem auto 0;
  padding: 1.4rem 0 1.6rem;
}

.observatory-period::before {
  content: "";
  position: absolute;
  z-index: -2;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background:
    url("../assets/images/shelf-ethereal.jpg")
    center 50% / cover no-repeat;

  opacity: 0.16;

  pointer-events: none;
}

.observatory-period::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background:
    rgba(255, 250, 248, 0.12);

  pointer-events: none;
}

/* ==========================================================
   ORRERY · CELESTIAL ORBIT ANIMATION
   ========================================================== */

.orrery__orbit--one {
  animation: orbit-one 22s linear infinite;
}

.orrery__orbit--two {
  animation: orbit-two 30s linear infinite reverse;
}

.orrery__orbit--three {
  animation: orbit-three 18s linear infinite;
}


@keyframes orbit-one {
  from {
    transform: rotate(-18deg) scaleY(0.52);
  }

  to {
    transform: rotate(342deg) scaleY(0.52);
  }
}


@keyframes orbit-two {
  from {
    transform: rotate(36deg) scaleY(0.63);
  }

  to {
    transform: rotate(396deg) scaleY(0.63);
  }
}


@keyframes orbit-three {
  from {
    transform: rotate(-62deg) scaleY(0.68);
  }

  to {
    transform: rotate(298deg) scaleY(0.68);
  }
}


/* Keep it still for anyone who requests reduced motion */

@media (prefers-reduced-motion: reduce) {

  .orrery__orbit {
    animation: none !important;
  }

}

/* ==========================================================
   ORRERY · LARGE CELESTIAL RINGS
   ========================================================== */

.orrery::before {
  border:
    1px solid
    rgba(200, 121, 133, 0.16);

  border-top-color:
    rgba(200, 121, 133, 0.48);

  border-right-color:
    rgba(216, 178, 139, 0.30);

  animation:
    observatory-ring-spin
    11s
    linear
    infinite;
}

.orrery::after {
  animation:
    observatory-ring-spin-reverse
    56s
    linear
    infinite;
}


@keyframes observatory-ring-spin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes observatory-ring-spin-reverse {

  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .orrery::before,
  .orrery::after {
    animation: none !important;
  }

}