@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@600;700&display=swap");

:root {
  --text:#edf3ff;
  --muted:#a7b7da;
  --border:rgba(173,205,255,.14);
  --maxw:1520px;
  --shadow:0 35px 100px rgba(1,5,16,.55)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--text);
  font-family:Inter, system-ui, sans-serif;
  line-height:1.6;
  background:
  radial-gradient(circle at 10% 8%, rgba(86,126,255,.10), transparent 22%),
  radial-gradient(circle at 90% 10%, rgba(128,91,255,.06), transparent 22%),
  radial-gradient(circle at 62% 74%, rgba(42,125,255,.07), transparent 26%),
  linear-gradient(180deg, rgba(3,8,20,.40), rgba(3,8,20,.62)),
  url("../images/stars-bg-final.jpg") center top / cover fixed
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
  linear-gradient(180deg, rgba(2,7,18,.04), rgba(2,7,18,.12)),
  url("../images/stars-bg-final.jpg") center top / cover fixed;

  opacity:.30;
  mix-blend-mode:screen
}

a {
  text-decoration:none;
  color:inherit
}

img {
  display:block;
  max-width:100%
}

.container {
  width:min(var(--maxw),calc(100% - 34px));
  margin:0 auto
}

.topbar {
  position:sticky;
  top:12px;
  z-index:40;
  padding-top:14px
}

.nav-shell {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding:16px 22px;
  border-radius:999px;
  background:rgba(5,14,30,.56);
  border:1px solid rgba(175,210,255,.12);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 45px rgba(3,8,21,.35)
}

.brand {
  display:flex;
  align-items:center;
  gap:14px
}

.brand-mark {
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.05rem;
  background:linear-gradient(135deg, rgba(153,188,255,.22), rgba(174,155,255,.12));
  border:1px solid rgba(189,215,255,.25);
  box-shadow:0 0 30px rgba(117,161,255,.16)
}

.brand-title {
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}

.brand-sub {
  font-size:.92rem;
  color:var(--muted)
}

.nav-links {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.nav-links a {
  padding:10px 16px;
  border-radius:999px;
  color:#c6d6fc;
  font-weight:600;
  font-size:.96rem;
  border:1px solid transparent;
  transition:.25s
}

.nav-links a:hover, .nav-links a.active {
  background:rgba(255,255,255,.055);
  border-color:rgba(173,205,255,.12);
  color:#fff;
  transform:translateY(-1px)
}

.nav-cta {
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
  color:#071120;
  background:linear-gradient(135deg,#c0d5ff,#8fb9ff 55%,#aba0ff);
  box-shadow:0 18px 40px rgba(114,154,255,.24)
}

.page {
  padding:26px 0 84px
}

.glass {
  position:relative;
  overflow:hidden;
  border-radius:30px;
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(10,18,38,.72), rgba(7,14,28,.62));
  border:1px solid var(--border);
  backdrop-filter:blur(18px)
}

.glass::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, transparent 78%, rgba(255,255,255,.025))
}

.kicker, .section {
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.79rem;
  color:#d7e1ff;
  opacity:.9
}

.serif, h1, h2, h3, h4, .display, .atitle {
  font-family:"Cormorant Garamond", Georgia, serif;
  letter-spacing:-.03em
}

.hero {
  display:grid;
  grid-template-columns:1.72fr .92fr;
  gap:22px;
  align-items:stretch;
  margin-top:14px
}

.hero-main{
  position: relative;
  min-height: 680px;
  padding: 34px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background:
    linear-gradient(180deg, rgba(4,11,24,.42), rgba(4,11,24,.86)),
    linear-gradient(90deg, rgba(4,10,22,.78) 0%, rgba(4,10,22,.56) 42%, rgba(4,10,22,.24) 100%),
    url("../images/hero-sky.jpg") center center / cover no-repeat;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 30px 90px rgba(1,5,16,.40);
}

.hero-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 20%, transparent 60%, rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.hero-main::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 24%, rgba(120, 160, 255, 0.08), transparent 20%),
    radial-gradient(circle at 72% 18%, rgba(160, 130, 255, 0.06), transparent 18%);
  pointer-events: none;
}

.hero-main .kicker {
    margin-bottom: 18px;
}

.hero-copy-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 28px;
  align-items: start;
  min-height: 0;
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.hero-accent-line {

  width:160px;
  height:1px;
  margin:20px 0 18px;
  background:linear-gradient(90deg, rgba(255,255,255,.58), rgba(167,195,255,.22), transparent);
}

.display {
  font-size:8.0rem;
  line-height:.88;
  margin:10px 0 200px;
  max-width:860px;
  text-shadow:0 0 16px rgba(208,225,255,.22), 0 0 34px rgba(138,170,255,.18)
}

.lead {
  max-width:820px;
  font-size:2.12rem;
  color:#d1dcf9;
  margin:0 0 80px
}

.actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:800;
  transition:.25s
}

.btn:hover {
  transform:translateY(-2px)
}

.primary {
  background:linear-gradient(135deg,#bed2ff,#93bbff 55%,#9c95ff);
  color:#071120;
  box-shadow:0 16px 35px rgba(114,154,255,.24)
}

.secondary {
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08)
}

 .orbit {
  position:absolute;
  border:1px dashed rgba(177,208,255,.32);
  border-radius:50%;
  pointer-events:none
}

.oa {
  width:500px;
  height:215px;
  left:34px;
  top:138px;
  transform:rotate(-8deg)
}

.ob {
  width:410px;
  height:175px;
  left:166px;
  top:176px;
  transform:rotate(15deg)
} 

.dot {
  position:absolute;
  border-radius:50%;
  box-shadow:0 0 18px currentColor
}

.d1 {
  width:16px;
  height:16px;
  left:75px;
  top:290px;
  background:#f4d17e;
  color:#f4d17e
}

.d2 {
  width:28px;
  height:28px;
  left:560px;
  top:225px;
  background:#b9d0ff;
  color:#b9d0ff
}

.d3 {
  width:10px;
  height:10px;
  left:474px;
  top:165px;
  background:#fff4cb;
  color:#fff4cb
}

.pills {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px
}

.pill, .pills span {
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#dce7ff;
  font-size:.94rem
}

.side {
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  padding:22px;
  gap:16px
}

.imgbox {
  aspect-ratio:.84/.78;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  position: relative;
}

.imgbox img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 0.5s ease;
}

.imgbox:hover img {
  transform: scale(1.1);
}

.grid3 {
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 290px;
  gap:22px;
  margin-top:22px
}

.stack, .sidecol {
  display:flex;
  flex-direction:column;
  gap:22px
}

.panel {
  padding:22px
}

.feed {
  display:grid;
  gap:14px
}

.item {
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06)
}

.item time {
  display:block;
  color:#8fa2cf;
  font-size:.84rem;
  margin-bottom:6px
}

.item h4 {
  margin:0 0 6px;
  font-size:1rem;
  font-family:Inter, system-ui, sans-serif
}

.item p {
  margin:0;
  color:var(--muted);
  font-size:.94rem
}

.quick {
  display:grid;
  gap:12px
}

.quick a {
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.075);
  transition:.25s
}

.quick a:hover {
  transform:translateX(4px);
  background:rgba(255,255,255,.065)
}

.small {
  color:#8094c4;
  font-size:.92rem
}

.mdisc {
  width:100px;
  height:100px;
  border-radius:50%;
  margin:16px auto 10px;
  position:relative;
  background:radial-gradient(circle at 35% 35%, #fff6d7, #d8d2b0 58%, #69614b 100%);
  overflow:hidden;
  box-shadow:0 0 28px rgba(255,239,168,.15),  inset 0 0 40px rgba(0,0,0,.18)
}

.mshadow {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background:rgba(7,15,31,.9);
  border-radius:50%
}

.mval {
  font-size:1.8rem;
  font-weight:800
}

.mname {
  font-size:1.05rem;
  color:#dce8ff
}

.mgrid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  font-size:.8rem
}

.mgrid div {
  min-height:40px;
  padding:6px 4px;
  border-radius:12px;
  text-align:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04)
}

.feature {
  display:grid;
  grid-template-columns:1.2fr .94fr;
  gap:22px
}

.copy {
  padding:26px
}

.meta {
  color:#9cb1db;
  font-size:.92rem;
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.coverpanel {
  min-height:100%;
  background:linear-gradient(180deg, rgba(5,12,26,.08), rgba(5,12,26,.48)), url("../images/lead-galaxy.jpg") center/cover
}

.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}

.card {
  display:grid
}

.cover {
  aspect-ratio:1.42/1;
  overflow:hidden
}

.cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}

.card:hover .cover img {
  transform:scale(1.05)
}

.body {
  padding:20px
}

.body h3 {
  margin:6px 0 10px;
  font-size:1.9rem;
  line-height:1
}

.body p {
  color:var(--muted);
  margin:0 0 12px
}

.meta2 {
  color:#8ea3cf;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.14em
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}

.tags span {
  font-size:.82rem;
  color:#d4e0ff;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  padding:7px 10px;
  border-radius:999px
}

.hero2 {
  display:grid;
  grid-template-columns:1.28fr .8fr;
  gap:22px
}

.media {
  min-height:300px;
  padding:0;
  overflow:hidden;
  position:relative
}

.media .bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center
}

.media .ov {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,12,24,.06), rgba(5,12,24,.82))
}

.media .content {
  position:relative;
  z-index:1;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:100%
}

.two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.article {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px
}

.ahero {
  position:relative;
  min-height:470px;
  display:flex;
  align-items:end
}

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

.ahero .ov {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,10,22,.16), rgba(5,10,22,.84))
}

.ahero .inner {
  position:relative;
  z-index:1;
  padding:34px;
  max-width:860px
}

.atitle {
  font-size:clamp(3rem,5vw,5rem);
  line-height:.9;
  margin:10px 0 12px
}

.acontent {
  padding:34px
}

.acontent p {
  color:#d6e1fb;
  margin:0 0 18px;
  font-size:1.05rem
}

.acontent h2 {
  font-size:2.45rem;
  line-height:.95;
  margin:34px 0 14px
}

.acontent h3 {
  font-size:1.8rem;
  line-height:1;
  margin:24px 0 10px
}

.acontent blockquote {
  margin:28px 0;
  padding:20px 24px;
  border-left:3px solid rgba(145,186,255,.55);
  background:rgba(255,255,255,.03);
  color:#e7efff;
  border-radius:0 18px 18px 0
}

.acontent ul {
  color:#d0dbf6;
  padding-left:20px
}

.credits {
  padding:24px;
  color:#aabce3;
  font-size:.9rem
}

.credits a {
  color:#dce6ff;
  text-decoration:underline;
  text-decoration-color:rgba(220,230,255,.35)
}

.footer {
  margin-top:26px;
  padding:24px 0 38px;
  color:#93a6d1;
  font-size:.95rem
}

.finner {
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}

.reveal {
  opacity:1;
  transform:translateY(26px) scale(.985);
  transition:opacity .75s, transform .75s
}

@media (max-width:1280px) {
  .grid3, .hero, .feature, .hero2, .article, .two {
    grid-template-columns:1fr
  }

}

@media (max-width:980px) {
  .cards {
    grid-template-columns:1fr
  }

  .display {
    font-size:clamp(3.4rem,12vw,6rem)
  }

}

@media (max-width:680px) {
  .container {
    width:min(var(--maxw),calc(100% - 18px))
  }

  .panel, .acontent, .ahero .inner, .side {
    padding:20px
  }

  .body h3 {
    font-size:1.55rem
  }

  .display {
    font-size:3.4rem
  }

}

/* ===== v8 refinements ===== */

:root {

    --glow1: rgba(136, 178, 255, .16);

    --glow2: rgba(166, 141, 255, .14);

    --line: rgba(255,255,255,.075);

}

body::before {

    content:'';

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
      radial-gradient(circle at 14% 10%, rgba(123,167,255,.12), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(158,132,255,.10), transparent 20%),
      radial-gradient(circle at 55% 85%, rgba(86,130,255,.10), transparent 25%);

    mix-blend-mode:screen;

    z-index:0;

}

body > * {
  position:relative;
  z-index:1
}

.nav-shell {

    background:linear-gradient(180deg, rgba(8,18,38,.62), rgba(5,14,31,.56));

    box-shadow:0 20px 55px rgba(1,6,18,.36),  inset 0 1px 0 rgba(255,255,255,.05);

}

.side {

    background:
      linear-gradient(180deg, rgba(12,21,43,.72), rgba(7,15,31,.74));

    border:1px solid rgba(177,205,255,.12);

}

.magazine-badge {

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:10px 14px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.05);

    color:#dce7ff;

    font-size:.88rem;

    backdrop-filter: blur(10px);

}

.magazine-grid {

    display:grid;

    grid-template-columns:1.25fr .75fr;

    gap:22px;

    margin-top:22px;

}

.editorial {

    min-height:430px;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:20px;

    overflow:hidden;

}

.editorial-copy {

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}

.editorial-cover {

    position:relative;

    min-height:100%;

    background:
      linear-gradient(180deg, rgba(7,13,28,.08), rgba(5,10,22,.18)),
      url('../images/telescope.png') center/cover;

}

.editorial-cover::after {

    content:'';

    position:absolute;

    inset:0;

    background:
      linear-gradient(180deg, rgba(7,10,18,.04), rgba(7,10,18,.52)),
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.10), transparent 26%);

}

.editorial-index {

    display:grid;

    gap:14px;

}

.mini-story {

    padding:18px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    transition:transform .25s,  background .25s,  border-color .25s;

}

.mini-story:hover {

    transform:translateY(-3px);

    background:rgba(255,255,255,.06);

    border-color:rgba(171,203,255,.16);

}

.mini-story .eyebrow {

    color:#9eb5e1;

    font-size:.76rem;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.mini-story h4 {

    margin:8px 0 6px;

    font-family:'Playfair Display',  Georgia,  serif;

    font-size:1.35rem;

    line-height:1;

}

.divider-title {

    display:flex;

    align-items:center;

    gap:14px;

    margin:10px 0 18px;

}

.divider-title::after {

    content:'';

    flex:1;

    height:1px;

    background:linear-gradient(90deg, rgba(157,184,255,.28), transparent);

}

.card {

    overflow:hidden;

    background:linear-gradient(180deg, rgba(10,18,37,.76), rgba(7,15,31,.72));

}

.card .cover {

    position:relative;

}

.card .cover::after {

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(9,15,31,0) 20%, rgba(9,15,31,.32) 100%);

}

.card .body {

    position:relative;

}

.card .body::before {

    content:'';

    position:absolute;

    left:20px;
   right:20px;
   top:0;

    height:1px;

    background:linear-gradient(90deg, rgba(170,203,255,.18), transparent);

}

.card h3 {

    font-size:1.68rem;

}

.kpi-row {

    display:grid;

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

    gap:14px;

}

.kpi {

    padding:18px;

    border-radius:20px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.06);

}

.kpi .n {

    font-size:2rem;

    font-weight:800;

    margin-bottom:4px;

}

.quick a strong {

    display:block;

    margin-bottom:4px;

}

.footer .glass {

    background:linear-gradient(180deg, rgba(10,18,37,.76), rgba(7,15,31,.72));

}

.toc {

    display:grid;

    gap:10px;

}

.toc a {

    padding:12px 14px;

    border-radius:14px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.05);

    color:#d7e4ff;

}

.toc a:hover {
  background:rgba(255,255,255,.06)
}

.article .sidecol {

    position:sticky;

    top:104px;

    align-self:start;

}

.hero2 .media .content {

    padding:32px;

}

.issue-strip {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:16px;

}

.issue-strip span {

    padding:10px 12px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:#d5e2ff;

    font-size:.9rem;

}

.reading-note {

    margin-top:12px;

    color:#b8caef;

    font-size:.96rem;

}

.cover-quote {

    font-family:'Playfair Display',  Georgia,  serif;

    font-size:1.5rem;

    line-height:1.08;

    margin-top:16px;

}

@media (max-width:1280px) {

    .magazine-grid, .editorial, .kpi-row {
    grid-template-columns:1fr
  }


    .article .sidecol {
    position:static
  }

}

/* ===== v9 refinements ===== */

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:rgba(2,7,18,.04);
  z-index:0
}

.topbar, .page, .footer {
  position:relative;
  z-index:1
}

.mdisc {

    width:116px;

    height:116px;

    background:radial-gradient(circle at 34% 34%, #fff7d7, #ddd6b8 58%, #6d654e 100%);

}

.mshadow {

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(6,14,28,.94), rgba(4,10,22,.98));

    border-radius:50%;

    transform: translateX(0);

}

.mshadow::after {

    content:'';

    position:absolute;

    inset:0;

    border-radius:50%;

    box-shadow: inset 0 0 34px rgba(255,255,255,.05);

}

/* ===== v10 refinements ===== */

body::before {

    background:
      radial-gradient(circle at 14% 10%, rgba(123,167,255,.08), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(158,132,255,.06), transparent 20%),
      radial-gradient(circle at 55% 85%, rgba(86,130,255,.06), transparent 25%);

}

.topbar {
  padding-top:18px
}

.nav-shell {

    background:linear-gradient(180deg, rgba(8,18,38,.54), rgba(5,14,31,.48));

    border:1px solid rgba(184,211,255,.14);

}

.panel, .acontent, .ahero .inner, .side {
  padding: 20px;
}

.btn, .mini-story, .quick a, .card, .nav-links a, .nav-cta {
  transition:transform .28s ease,  box-shadow .28s ease,  background .28s ease,  border-color .28s ease,  opacity .28s ease
}

.card .cover img {
  transition:transform .9s cubic-bezier(.2,.8,.2,1)
}

.card:hover {
  box-shadow:0 26px 56px rgba(2,7,18,.32)
}

.article-cover-badge {

    position:absolute;
  left:24px;
  top:24px;
  z-index:2;

    padding:10px 14px;
  border-radius:999px;

    background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);

    backdrop-filter:blur(10px);
  font-size:.84rem;
  letter-spacing:.12em;
  text-transform:uppercase;

}

.moon-canvas {

    width:116px;
  height:116px;
  display:block;
  margin:16px auto 10px;

    filter:drop-shadow(0 0 18px rgba(255,235,170,.08));

}

.mdisc {
  display:none
}

.section-soft {

    color:#b7c8ef;
  font-size:.95rem;
  max-width:760px
}

/* ===== v11 fixes and final polish ===== */

.page, .topbar, .footer {
  position:relative;
  z-index:1
}

.moon-canvas {

    width:116px;

    height:116px;

    display:block !important;

    margin:16px auto 10px;

    border-radius:50%;

    background:transparent;

    opacity:1 !important;

    visibility:visible !important;

}

.article-cover-badge {

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.10);

}

.mini-story, .quick a, .card, .btn, .nav-cta, .nav-links a {
  transition:transform .24s ease,  box-shadow .24s ease,  background .24s ease,  border-color .24s ease
}

.mini-story:hover, .quick a:hover, .card:hover {
  transform:translateY(-2px)
}

.moon-phase-image {

    display:block;

    width:160px;

    height:160px;

    margin:8px auto 0;

    object-fit:contain;

    object-position:center;

    filter: drop-shadow(0 0 18px rgba(255, 236, 170, 0.10));

}

.moon-canvas {

    display:none !important;

}

[data-moon-phase-name] {

    margin-top:6px;

}

.card,
.side,
.panel {

    backdrop-filter: blur(16px);

}

.nav-shell {

    box-shadow:
      0 18px 44px rgba(1,6,18,.34),
      inset 0 1px 0 rgba(255,255,255,.04);

}