:root {
  color-scheme: dark;
  --night: #0b0c1b;
  --cream: #f7f0e3;
  --muted: #c5c4d7;
  --gold: #e9c98e;
  --serif: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); background: var(--night); font: 16px/1.55 "DM Sans", sans-serif; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.wrap { width: min(89%, 1280px); margin-inline: auto; }
header, footer, nav { display: flex; align-items: center; gap: clamp(1rem, 4vw, 4rem); }
header, footer { justify-content: space-between; padding-block: 1.3rem; }
header a, footer a { text-decoration: none; }
header a:hover, footer a:hover { text-decoration: underline; }
nav, footer { color: var(--muted); font-size: .88rem; }
.brand { font: 1.65rem var(--serif); color: var(--cream); }
.hero, .experience, .closing {
  background-image: radial-gradient(circle at 17% 26%, #d2c0f877 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 61%, #c9b3e666 0 .7px, transparent 1.4px),
    radial-gradient(circle at 84% 14%, #eed4a455 0 .7px, transparent 1.4px);
  background-size: 211px 173px, 157px 199px, 239px 131px;
}
.hero { overflow: hidden; }
.hero-inner { min-height: min(800px, 85vh); display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; }
.intro { position: relative; z-index: 1; padding-block: 4rem; }
.eyebrow { color: var(--gold); text-transform: uppercase; font-size: .69rem; letter-spacing: .12em; font-weight: 600; margin: 0 0 1rem; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.03; margin: 0; }
h1 { font-size: clamp(3rem, 6.3vw, 6rem); }
h2 { font-size: clamp(2.65rem, 5.3vw, 4.65rem); }
.description { color: var(--muted); max-width: 34ch; margin-block: 1.5rem; font-size: 1.1rem; }
.button { display: inline-block; background: #d0bcf6; color: #191326; padding: .85rem 1.65rem; border-radius: .6rem; font-weight: 600; text-decoration: none; }
.button:hover { background: #e4d6ff; }
.orbit { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.orbit::before { content: ""; position: absolute; inset: -16%; background: radial-gradient(ellipse, #8354ab55, transparent 68%); z-index: -1; }
.orbit i { position: absolute; width: 110%; height: 55%; border: 1px solid #bb9dd63b; border-radius: 50%; transform: rotate(-37deg); }
.orbit i:nth-child(2) { transform: rotate(-18deg); height: 70%; }
.star { width: 52%; aspect-ratio: 1; background: url("assets/imgFirstStarEditableLightSculpture.svg") center / contain no-repeat; }
.orbit-note { position: absolute; right: 5%; bottom: 3%; font: 1.5rem/1.1 var(--serif); }
.experience { background-color: #111121; text-align: center; padding-block: clamp(4rem, 8vw, 8rem); }
.constellation { position: relative; margin: 3rem auto 0; max-width: 1080px; }
.constellation-art { aspect-ratio: 2.55; background: url("assets/imgVector2.svg") center / contain no-repeat, radial-gradient(ellipse, #7755a545, transparent 68%); }
.constellation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; gap: .75rem; font: clamp(1.25rem, 2.4vw, 1.75rem) var(--serif); }
.constellation li::before { content: "✦"; color: var(--gold); margin-right: .45em; }
.study { color-scheme: light; background: #e9e2d6; color: #272338; padding-block: clamp(4rem, 8vw, 8rem); }
.study-inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.study .eyebrow { color: #695273; }
.study a { color: #4c3d69; }
.study p { max-width: 38ch; }
.feature iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; background: #171427; }
.watch { display: inline-block; margin-top: .65rem; font-size: .88rem; }
.closing { padding-block: clamp(4rem, 9vw, 8rem); text-align: center; }
.closing-star { display: inline-block; color: var(--gold); text-shadow: 0 0 1rem #cea7ff; margin-bottom: 1rem; font-size: 2rem; }
.closing .button { margin-top: 1.75rem; }
footer { flex-wrap: wrap; border-top: 1px solid #ffffff22; }
@media (max-width: 740px) {
  header { flex-wrap: wrap; gap: .5rem 1rem; }
  .hero-inner, .study-inner { grid-template-columns: 1fr; }
  .intro { padding-block: 3.25rem 0; }
  .orbit { width: min(90%, 350px); margin-inline: auto; margin-bottom: 2rem; }
  .study-inner > div:last-child { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#sky-summary { margin: 0 0 1.1rem; color: var(--muted); }
#sky-stars li { max-width: 100%; overflow-wrap: anywhere; }
.task-panel { margin-top: 1.8rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #c5b5cb; border-radius: 1rem; background: #f6f0e8; }
.task-panel h3 { margin: 0 0 .75rem; font: 500 2rem/1 var(--serif); }
.task-panel form > label { display: block; margin-bottom: .35rem; font-size: .88rem; }
.task-entry { display: flex; flex-wrap: wrap; gap: .5rem; }
.task-panel input, .task-panel button { font: inherit; }
.task-entry input { flex: 1 1 12rem; min-width: 0; padding: .65rem .75rem; border: 1px solid #9b87a4; border-radius: .5rem; background: #fffaf6; color: #272338; }
.task-panel button { cursor: pointer; }
.task-entry button { border: 0; border-radius: .5rem; padding: .65rem 1rem; color: #f7f0e3; background: #4c3d69; }
#task-status { margin: .55rem 0 0; color: #584665; font-size: .85rem; }
#task-status:empty { display: none; }
#task-list { list-style: none; margin: 0; padding: 0; }
#task-list li { display: flex; justify-content: space-between; gap: .6rem; border-top: 1px solid #ded0df; margin-top: .6rem; padding-top: .6rem; }
#task-list label { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; overflow-wrap: anywhere; }
#task-list input { margin-top: .34rem; accent-color: #4c3d69; }
#task-list input:checked + span { text-decoration: line-through; color: #63586c; }
#task-list button { align-self: flex-start; border: 0; padding: .2rem; background: none; color: #4c3d69; text-decoration: underline; font-size: .85rem; }