/* ==========================================================================
   Astronomy with Andrea: styles
   Apple product-page feel: dark, lots of space, big confident type,
   few things on screen at once. Edit the colours and sizes at the top.
   ========================================================================== */

/* ---------- Settings: colours, fonts, spacing ---------- */
:root {
  --bg: #05060d;            /* page background, near black with a hint of blue */
  --bg-raised: #0d0f1c;     /* cards and the form */
  --text: #f5f5f7;          /* main text, Apple's off-white */
  --muted: #a7a9b4;         /* secondary text; keeps 7:1 contrast on the background */
  --accent: #ff5c8a;        /* H-alpha pink, used sparingly */
  --blue: #8ab4ff;          /* links and focus rings */
  --line: rgba(255, 255, 255, 0.10);
  --radius: 24px;
  --section-gap: clamp(96px, 14vw, 180px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Reset and base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }   /* an element marked hidden stays hidden, whatever else styles it */
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(44px, 8vw, 104px); max-width: 12ch; }
h2 { font-size: clamp(34px, 5vw, 58px); max-width: 20ch; margin-bottom: 24px; }
h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
p { max-width: 62ch; }
p + p { margin-top: 16px; }
.lead { font-size: clamp(20px, 2.2vw, 24px); color: var(--muted); }
.eyebrow {
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px; font-weight: 500;
}
.small { font-size: 14px; color: var(--muted); }
.centered { text-align: center; }
.section .centered.reveal { margin-top: 48px; }
.centered p, .centered h2 { margin-left: auto; margin-right: auto; }

/* TODO markers: visible on the page until Andrea fills them in. Easy to spot, easy to delete. */
.todo {
  font-size: 15px; color: #ffd27a; border-left: 2px solid #ffd27a;
  padding-left: 12px; margin-top: 12px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 760px; }
/* Sections clip sideways only (overflow-x: clip), so a depth galaxy that pokes out of
   the side of the page is cut at the page edge, but one that is taller than its section
   can fade out naturally above and below instead of being cut off in a straight line.
   Sections have no z-index of their own on purpose: that keeps every .container (z-index 1)
   above every depth galaxy (z-index 0), even where a galaxy overlaps the next section.
   overflow: clip, unlike overflow: hidden, also leaves position: sticky working. */
.section { position: relative; padding: var(--section-gap) 0; overflow-x: clip; overflow-y: visible; }
.section .container { position: relative; z-index: 1; }
.section-head { margin-bottom: 56px; }
.two-col { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .two-col .photo { max-width: 360px; }
}

/* ---------- Buttons ---------- */
.buttons { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 16px 30px; border-radius: 999px;
  font-size: 17px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
  font-family: var(--font);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn.primary { background: var(--text); color: #0b0c14; }
.btn.ghost { color: var(--text); border: 1px solid rgba(255,255,255,0.3); background: rgba(5,6,13,0.35); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: rgba(255,255,255,0.1); }
.wide-btn { width: 100%; margin-top: 8px; }
.link-arrow { font-weight: 500; }
.link-arrow::after { content: " \2192"; }

/* ---------- Background layers ---------- */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#cursor-glow {
  position: fixed; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138,180,255,0.12) 0%, transparent 60%);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1; display: none;
}
@media (hover: hover) and (pointer: fine) { #cursor-glow { display: block; } }

/* ======================================================================
   HERO
   ====================================================================== */
.hero {
  position: relative; z-index: 2; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 140px; overflow: hidden;
}
/* The galaxy fills the whole hero, edge to edge. The JS scales and fades this
   wrapper as you scroll, so the inner picture keeps its own framing. */
.hero-galaxy {
  position: absolute; inset: 0; z-index: 0;
  will-change: transform, opacity;
}
.hero-galaxy img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%;
  background-size: cover; background-position: center; /* tiny blurred placeholder */
  /* Desktop: enlarge and push the galaxy to the right so the name has clear sky on the left.
     Scaling by 1.3 leaves 15% spare on each side, so shifting by 12% never shows an edge. */
  transform: scale(1.3) translateX(12%);
  transform-origin: center;
}
@media (max-width: 800px) {
  .hero-galaxy img { transform: scale(1.15); object-position: 50% 40%; }
}
/* Darken just enough for the text to be readable, and fade the bottom into the page. */
.hero-galaxy::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(5,6,13,0.6) 18%, rgba(5,6,13,0) 45%),
    linear-gradient(to right, rgba(5,6,13,0.72) 0%, rgba(5,6,13,0.35) 45%, rgba(5,6,13,0.05) 75%);
}
@media (max-width: 800px) {
  .hero-galaxy::before {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(5,6,13,0.75) 30%, rgba(5,6,13,0.35) 60%, rgba(5,6,13,0.15) 100%);
  }
}
#clumps { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tagline { margin-top: 24px; font-size: clamp(18px, 2.2vw, 26px); color: var(--muted); }
@media (max-width: 800px) {
  .hero { justify-content: flex-end; text-align: center; padding-bottom: 110px; }
  .hero-copy .buttons { justify-content: center; }
  .hero-copy h1 { margin-left: auto; margin-right: auto; }
  .hero-copy .tagline { margin-left: auto; margin-right: auto; }
}
.hero-caption {
  position: absolute; right: 24px; bottom: 28px; z-index: 2;
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em; max-width: 60vw; text-align: right;
}
.scroll-hint {
  position: absolute; left: 24px; bottom: 28px; z-index: 2;
  color: var(--muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 800px) { .scroll-hint { display: none; } .hero-caption { left: 24px; right: 24px; max-width: none; text-align: center; } }

/* Hero text rises in when the page loads. */
.rise { opacity: 0; transform: translateY(24px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.rise:nth-child(2) { animation-delay: 0.15s; }
.rise:nth-child(3) { animation-delay: 0.3s; }
.rise:nth-child(4) { animation-delay: 0.45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ======================================================================
   PHOTOS
   ====================================================================== */
.photo {
  border-radius: var(--radius); overflow: hidden; background: var(--bg-raised);
  border: 1px solid var(--line); margin: 0;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.portrait { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 16 / 9; margin-top: 64px; }
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.photo-row .photo.wide { margin-top: 64px; }
.photo-row .photo.wide:nth-child(2) { margin-top: 64px; }
@media (max-width: 800px) { .photo-row { grid-template-columns: 1fr; } .photo-row .photo.wide:nth-child(2) { margin-top: 0; } }
.photo.book { aspect-ratio: 1200 / 1464; max-width: 220px; margin-bottom: 24px; border-radius: 12px; }
/* If an image file is missing, show the TODO note from data-todo instead. */
.photo.missing img { display: none; }
.photo.missing::after {
  content: attr(data-todo); display: grid; place-items: center; height: 100%;
  padding: 24px; text-align: center; color: #ffd27a; font-size: 15px;
  border: 2px dashed rgba(255,210,122,0.4); border-radius: var(--radius);
}
/* Gentle drift as photos pass through the screen. Uses CSS scroll-driven animations
   where the browser supports them; elsewhere the photo simply stays still. */
@supports (animation-timeline: view()) {
  .photo:not(.book) img {
    animation: photo-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes photo-drift { from { transform: scale(1.12) translateY(5%); } to { transform: scale(1.12) translateY(-5%); } }
}

/* ClumpScope section: two columns of text, then the live tool in a frame. */
.clump-text { align-items: start; grid-template-columns: 1fr 1fr; margin-bottom: 48px; }
.clump-text p { margin-top: 0; }
@media (max-width: 800px) { .clump-text { grid-template-columns: 1fr; gap: 16px; } }
/* "Try it now" demo: the map on the left, instructions and buttons on the right. */
.try-clumps { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.try-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.try-head .card-label { margin-bottom: 0; }
.try-body { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 28px; align-items: start; margin-top: 20px; }
.try-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #2c0a4a; }
#try-canvas {
  display: block; width: 100%; aspect-ratio: 1 / 1; cursor: crosshair;
  touch-action: none;   /* dragging on the map draws a circle instead of scrolling the page */
}
.try-instructions { font-size: 17px; }
.try-side .small { margin-top: 14px; }
.try-buttons { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.small-btn { padding: 12px 22px; font-size: 15px; }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.try-feedback { margin-top: 18px; font-size: 16px; line-height: 1.5; padding: 0; border-left: 0; }
.try-feedback.good { color: #9be7a8; }
.try-feedback.hint { color: #ffd27a; }
.try-footer { display: flex; align-items: center; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.try-footer .small { flex: 1; min-width: 240px; }
@media (max-width: 800px) {
  .try-clumps { padding: 18px; }
  .try-body { grid-template-columns: 1fr; gap: 18px; }
}
.clump-note { margin: 20px auto 0; }

/* ======================================================================
   CARDS (research, writing)
   ====================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 32px; display: flex; flex-direction: column;
}
.card p { font-size: 17px; color: var(--muted); }
.card .link-arrow { margin-top: auto; padding-top: 20px; }
.card-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
/* ======================================================================
   NEWSLETTER FORM
   ====================================================================== */
.perks { list-style: none; margin-top: 20px; }
.perks li { padding: 10px 0 10px 34px; position: relative; font-size: 19px; }
.perks li::before {
  content: ""; position: absolute; left: 4px; top: 20px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px rgba(255,92,138,0.8);
}
.signup {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px; display: grid; gap: 20px;
}
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.field input, .field select {
  width: 100%; padding: 15px 18px; font-size: 17px; font-family: var(--font); color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23a7a9b4' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.08); }
.field input::placeholder { color: #6b6e7b; }
.signup .small { text-align: center; }

/* ======================================================================
   COMING SOON and FOOTER
   ====================================================================== */
.coming-soon .btn { margin-top: 28px; }
.footer { position: relative; z-index: 2; padding: 64px 0 48px; border-top: 1px solid var(--line); text-align: center; }
.footer-links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.footer-links a { color: var(--text); font-size: 15px; }
.footer .small { margin: 8px auto; max-width: 70ch; }

/* ======================================================================
   SCROLL REVEAL: elements with .reveal fade up when they enter the screen.
   The class .is-visible is added by js/main.js.
   ====================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.cards .reveal:nth-child(2) { transition-delay: 0.1s; }
.cards .reveal:nth-child(3) { transition-delay: 0.2s; }

/* ======================================================================
   REDUCED MOTION: a calm, static version of everything above.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .scroll-hint { animation: none; }
  .rise { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .photo img { animation: none !important; }
  .btn { transition: none; }
  .ig-post { transition: none; }
  #cursor-glow { display: none; }
}

/* ======================================================================
   DEPTH GALAXIES
   Euclid galaxy images that sit behind a section and fly past as you
   scroll: js/main.js moves, scales and fades each one depending on how
   far it is from the middle of the screen. The edges of each square
   image are masked to a soft circle so no black box is visible.
   ====================================================================== */
.depth-galaxy {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(80vw, 820px); aspect-ratio: 1 / 1;
  will-change: transform, opacity; opacity: 0;
}
/* The mask fades each galaxy out towards its edges, so there is never a visible square
   border: fully visible in the middle, half-visible a third of the way out, gone well
   before the edge of the picture. The percentages are of the distance to the corner. */
.depth-galaxy img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at center, #000 12%, rgba(0,0,0,0.5) 32%, transparent 56%);
          mask-image: radial-gradient(circle at center, #000 12%, rgba(0,0,0,0.5) 32%, transparent 56%);
}
.depth-galaxy.right { right: -10vw; top: -6%; }
.depth-galaxy.left { left: -16vw; top: 50%; margin-top: -40vw; }
@media (max-width: 800px) {
  .depth-galaxy.right { right: -30vw; top: -4%; }
  .depth-galaxy.left { left: -35vw; }
}
.depth-galaxy.centre { left: 50%; top: 50%; width: min(90vw, 900px); margin: -45vw 0 0 -45vw; }
@media (min-width: 1000px) { .depth-galaxy.centre { margin: -450px 0 0 -450px; } }

.interlude {
  position: relative; min-height: 80svh; overflow-x: clip; overflow-y: visible;
  display: flex; align-items: flex-end; justify-content: center; padding: 0 24px 40px;
}
.interlude-caption { position: relative; z-index: 1; font-size: 14px; color: var(--muted); text-align: center; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .depth-galaxy { opacity: 0.45; transform: none; }
}

/* ======================================================================
   LATEST INSTAGRAM POSTS: three small square thumbnails inside the Instagram card.
   ====================================================================== */
/* The Instagram card spans the full width under the other two cards:
   text on the left, the three thumbnails on the right. */
/* ======================================================================
   WRITING AND OUTREACH: three story cards that stack as you scroll
   On a desktop each card is position: sticky, so while you scroll it stays
   pinned near the top of the window and the next card slides up over it,
   like sheets of paper piling up. Each card is pinned 14 px lower than the
   one before, so a thin strip of every earlier card stays visible above it.
   On a phone (under 900 px) the cards simply sit one under another.
   ====================================================================== */
.story-stack { display: grid; gap: 24px; counter-reset: story; }
.story {
  position: sticky; top: 96px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  min-height: 480px; padding: 48px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  /* A soft shadow above each card so it reads as sitting on top of the one underneath. */
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
}
.story:nth-child(2) { top: 110px; }
.story:nth-child(3) { top: 124px; }
/* The small 01 / 02 / 03 in the top right corner, counted automatically by the browser. */
.story::before {
  counter-increment: story; content: "0" counter(story);
  position: absolute; top: 28px; right: 32px;
  font-size: 13px; letter-spacing: 0.14em; color: var(--muted);
}
.story-media { display: flex; justify-content: center; }
.story-media .photo.book { margin: 0; width: 220px; }
.story-text p { font-size: 17px; color: var(--muted); }
.story-text .link-arrow { display: inline-block; margin-top: 20px; }

/* The magazine story has no photo yet, so its panel is a night sky with a crescent moon.
   The moon is one circle whose box-shadow is a second, offset circle: the element itself
   is painted the sky colour and hides part of the shadow, which leaves a crescent. */
.moon-panel {
  position: relative; width: 220px; aspect-ratio: 1200 / 1464; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 14%, rgba(255,255,255,0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 42%, rgba(255,255,255,0.8) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 30% 78%, rgba(255,255,255,0.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 88%, rgba(255,255,255,0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 12% 58%, rgba(255,255,255,0.5) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 50% 40%, rgba(138,180,255,0.18), transparent 60%),
    linear-gradient(180deg, #0c1232 0%, #05060d 100%);
}
.moon {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; background: #090e26;
  box-shadow: 22px -12px 0 0 #f5f5f7, 22px -12px 34px 6px rgba(255,255,255,0.18);
}

/* Instagram story: a "Latest posts" label and the three thumbnails fill the media column. */
.ig-block { width: 100%; }
.ig-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

@media (max-width: 900px) {
  /* No stacking on small screens: one column, media on top, text below.
     The nth-child selectors are repeated here so the 110 px and 124 px offsets above are
     overridden too (a plain .story rule would lose to them). */
  .story, .story:nth-child(2), .story:nth-child(3) {
    position: relative; top: auto; grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 32px 24px; box-shadow: none;
  }
  .story-media { justify-content: flex-start; }
  .story-stack .story.instagram { grid-template-columns: 1fr; }   /* beats the two-column rule below the media query */
}
/* The three posts are shown whole, at Instagram's portrait shape (3:4), fanned out like
   a hand of cards: the middle one upright and in front, the outer two leaning away and
   tucked slightly behind it. Hovering a post straightens and lifts it. */
.story.instagram { grid-template-columns: 1.15fr 1fr; }   /* a little more room for the fan */
.ig-grid { display: flex; justify-content: center; align-items: flex-end; padding: 10px 0 6px; }
.ig-post {
  display: block; width: 37%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.ig-post:nth-child(1) { transform: rotate(-7deg) translateY(14px); margin-right: -7%; }
.ig-post:nth-child(2) { width: 41%; position: relative; z-index: 1; }
.ig-post:nth-child(3) { transform: rotate(7deg) translateY(14px); margin-left: -7%; }
.ig-post:hover { transform: translateY(-8px) scale(1.04); border-color: rgba(255,255,255,0.35); z-index: 2; }
.ig-post img { width: 100%; height: 100%; object-fit: cover; }
.ig-post.missing img { display: none; }
.ig-post.missing::after {
  content: attr(data-todo); display: grid; place-items: center; height: 100%;
  padding: 6px; text-align: center; color: #ffd27a; font-size: 10px;
}