/* Karmik Architect — one stylesheet for the whole portal. */

:root{
  --void:#04050c;
  --deep:#0a0d1e;
  --panel:#111533;
  --line:rgba(232,182,87,.18);
  --gold:#e8b657;
  --saffron:#f0893c;
  --ink:#f4efe6;
  --muted:#9793a8;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tilt:72deg;           /* how far the orbital plane leans away from the camera */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}

/* ---------- shared chrome ---------- */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,56px);
  background:linear-gradient(to bottom,rgba(4,5,12,.82),transparent);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .glyph{
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff3cf,var(--gold) 45%,#a8641c);
  box-shadow:0 0 18px rgba(232,182,87,.55);
}
.brand b{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:.01em}
.navlinks{display:flex;gap:26px;font-size:14px;letter-spacing:.04em}
.navlinks a{color:var(--muted);text-decoration:none;transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--gold)}

.stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--tw) ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.18}to{opacity:.95}}

.foot{
  position:relative;z-index:10;
  border-top:1px solid var(--line);
  padding:34px clamp(18px,4vw,56px);
  color:var(--muted);font-size:13px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid var(--line);
  background:rgba(17,21,51,.55);backdrop-filter:blur(8px);
  color:var(--ink);text-decoration:none;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  transition:transform .25s,border-color .25s,box-shadow .25s,background .25s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 10px 34px rgba(232,182,87,.18)}
.btn.solid{
  background:linear-gradient(135deg,var(--gold),var(--saffron));
  border-color:transparent;color:#1a1103;font-weight:600;
}
.btn.solid:hover{box-shadow:0 12px 40px rgba(240,137,60,.35)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- home: the sky ---------- */

.sky{
  position:relative;z-index:5;
  height:100svh;min-height:640px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%,rgba(28,22,66,.85),transparent 60%),
    radial-gradient(90% 60% at 50% 100%,rgba(60,42,20,.35),transparent 70%);
}

/* everything that should drift with the mouse */
.parallax{position:absolute;inset:0;transition:transform .9s cubic-bezier(.16,.7,.3,1)}

/* Never put opacity, filter or overflow on this element or any of its
   3D ancestors: each of them forces transform-style to flat regardless of
   what is declared, which kills .face's counter-rotation and collapses every
   planet into a flat sliver. Dim the ring and dot colours instead. */
.system{
  position:absolute;left:50%;top:34%;
  width:0;height:0;
  transform:translate(-50%,-50%) perspective(1400px) rotateX(var(--tilt)) scale3d(var(--scale,1),var(--scale,1),var(--scale,1));
  transform-style:preserve-3d;
}

/* the outermost orbit is 940px across, so shrink the whole system rather than
   clipping it — Rahu and Ketu are the two that would fall off the edge */
@media(max-width:1180px){:root{--scale:.72}}
@media(max-width:900px) {:root{--scale:.55}}
@media(max-width:640px) {:root{--scale:.40;--tilt:76deg}}

.sun{
  position:absolute;left:-55px;top:-55px;width:110px;height:110px;border-radius:50%;
  transform:rotateX(calc(-1 * var(--tilt)));
  background:radial-gradient(circle at 38% 34%,#fffbe8,#ffd166 38%,#f0893c 68%,#b8410f);
  box-shadow:0 0 60px rgba(255,180,80,.75),0 0 160px rgba(240,137,60,.45);
  animation:pulse 6s ease-in-out infinite, drop 1s cubic-bezier(.2,.9,.3,1.2) .1s backwards;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 60px rgba(255,180,80,.7),0 0 150px rgba(240,137,60,.4)}
  50%{box-shadow:0 0 78px rgba(255,190,95,.9),0 0 200px rgba(240,137,60,.55)}
}
.sun .label{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:15px;color:#4a2a05;font-weight:600;
}

/* one ring per orbit; the body rides its edge */
.orbit{
  position:absolute;
  left:calc(var(--r) * -1);top:calc(var(--r) * -1);
  width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  transform-style:preserve-3d;
  animation:spin var(--dur) linear var(--phase,0s) infinite;
}
.orbit.retro{animation-direction:reverse}
/* The ring line lives on its own element rather than on .orbit itself,
   because its fade-in animates opacity: while that runs, opacity is below 1,
   which forces transform-style to flat on whatever element carries it. On
   .orbit that flattens every planet beneath it for the length of the fade.
   Here it only flattens a bare ring with no 3D children, which costs nothing. */
.ringline{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(232,182,87,.14);
  animation:arrive .8s ease-out var(--in,0s) backwards;
}
@keyframes arrive{from{opacity:0}to{opacity:1}}
/* only the texture layer moves; the shading gradient underneath stays put */
@keyframes rotate-surface{
  from{background-position:0 0,0 0}
  to  {background-position:calc(var(--d) * -2) 0,0 0}
}
@keyframes drop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

.body{
  position:absolute;left:50%;top:0;
  width:var(--d);height:var(--d);
  margin-left:calc(var(--d) / -2);margin-top:calc(var(--d) / -2);
  transform-style:preserve-3d;
  animation:spin var(--dur) linear var(--phase,0s) infinite reverse;  /* cancels the ring's rotation */
}
.orbit.retro > .body{animation-direction:normal}

/* un-tilts the body so a disc reads as a sphere, not an ellipse */
.face{
  position:absolute;inset:0;
  transform:rotateX(calc(-1 * var(--tilt)));
  transform-style:preserve-3d;
}
.dot{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  animation:
    drop .8s cubic-bezier(.2,.9,.3,1.2) var(--in,0s) backwards,
    rotate-surface var(--rot,120s) linear infinite;
  /* real texture where one exists (--tex); Rahu/Ketu have no physical
     surface, so they fall through to the plain gradient below */
  background:var(--tex,none),radial-gradient(circle at 32% 28%,var(--c1),var(--c2) 72%,#000 130%);
  /* the texture tile is exactly 2:1 and exactly as tall as the body, which is
     the equirectangular aspect — so panning it sideways by one full tile
     width reads as the body turning on its axis, and loops with no seam
     because longitude genuinely wraps. Same trick as the hero planet. */
  background-size:calc(var(--d) * 2) var(--d),cover;
  background-repeat:repeat-x,no-repeat;
  box-shadow:
    inset calc(var(--d) * -.20) calc(var(--d) * -.15) calc(var(--d) * .34) rgba(0,0,0,.7),
    inset calc(var(--d) * .12) calc(var(--d) * .09) calc(var(--d) * .22) rgba(255,255,255,.18),
    0 0 14px var(--glow,transparent);
}
.tag{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,230,.42);white-space:nowrap;pointer-events:none;
  transition:color .2s;
}
.tag i{font-family:var(--serif);font-style:normal;font-size:14px;letter-spacing:0;display:block;color:rgba(232,182,87,.66)}
.tag b{display:block;font-weight:400;opacity:0;transition:opacity .25s}
.tag.always b,.body:hover .tag b{opacity:1}
.body:hover .tag i{color:var(--gold)}

/* Saturn gets a ring, because the one time you skip it is the thing people
   notice. It is ONE continuous ellipse drawn twice, not an ellipse with its
   left and right borders knocked out — that older trick left hard gaps at
   exactly the ring's widest points, which is what made it look broken.
   Instead the same ellipse is drawn as two clipped halves: the far half
   sits before the planet in the DOM so the planet covers it, the near half
   after so it crosses in front. That is what sells it as going around the
   body rather than being painted on top of it. Width scales off --d,
   inherited from .body, so it stays in proportion at any size. */
.ring{
  position:absolute;left:50%;top:50%;width:232%;height:232%;
  margin:-116% 0 0 -116%;border-radius:50%;
  border:calc(var(--d) * .07) solid rgba(240,218,170,.85);
  transform:rotate(-18deg) rotateX(74deg);
}
.ring.back {clip-path:inset(0 0 50% 0)}   /* tilted away from the camera */
.ring.front{clip-path:inset(50% 0 0 0)}   /* tilted toward it */

/* Jupiter really does have rings — they are just faint, so ours are too */
.ring.faint{
  width:196%;height:196%;margin:-98% 0 0 -98%;
  border:calc(var(--d) * .028) solid rgba(236,212,168,.4);
}

/* Chandra rides the Earth orbit — and is where the camera is standing */
.satellite{
  position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;
  animation:spin 6s linear infinite;
}
.satellite .moon{
  position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:#d8d4cc;box-shadow:0 0 10px rgba(255,255,255,.7);
}
.youarehere{
  position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  border:1px solid rgba(232,182,87,.9);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(4.5);opacity:0}
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- today's ruling planet: big, realistic, no label ---------------
   The outer element carries the shape and a fixed directional shading (the
   terminator), so it never rotates. The inner .hero-surface is the only
   thing that spins or pans, which is what makes it read as a lit sphere
   turning rather than a flat disc rotating in place.                       */
.hero-planet-wrap{
  position:absolute;top:50%;right:-6vmin;
  width:52vmin;height:52vmin;max-width:600px;max-height:600px;
  margin-top:-26vmin;
  z-index:6;pointer-events:none;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.55));
  transition:transform .9s cubic-bezier(.16,.7,.3,1);
}
@media(max-width:640px){
  .hero-planet-wrap{width:78vmin;height:78vmin;margin-top:-39vmin;top:36%;right:-26vmin;opacity:.9}
}

.hero-planet{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  isolation:isolate;   /* keeps the shading blend-modes off the sky behind it */
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;   /* a hairline limb, not a hard edge */
}
.hero-surface{
  position:absolute;inset:-10%;border-radius:50%;
  animation:hero-spin var(--spin,160s) linear infinite;
}
/* fine surface grain, riding along with the texture it sits on rather than
   the fixed lighting above it — reuses the same fractal noise as the ground */
.hero-surface::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:15% 15%;
  mix-blend-mode:overlay;opacity:.28;
}
/* the lighting model: a soft specular highlight (screen, brightens) and a
   directional terminator (multiply, darkens) — two layers because one
   blend mode can't do both, and this is what turns a flat disc into a
   sphere with a light source instead of just a vignetted circle. */
.hero-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.hero-shade::before,.hero-shade::after{content:"";position:absolute;inset:0;border-radius:50%}
.hero-shade::before{
  background:linear-gradient(118deg,transparent 38%,rgba(0,0,0,.52) 74%,rgba(0,0,0,.9) 100%);
  mix-blend-mode:multiply;
}
.hero-shade::after{
  background:radial-gradient(32% 26% at 29% 23%,rgba(255,255,255,.8),transparent 64%);
  mix-blend-mode:screen;
}
@keyframes hero-spin{to{transform:rotate(360deg)}}
@keyframes hero-pan{to{background-position-x:-2048px}}

/* an atmospheric haze beyond the disc's own edge — only the planets that
   actually have a thick atmosphere get one; airless bodies stay hard-edged */
.hero-planet-wrap::before{
  content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 60%,var(--limb,transparent) 76%,transparent 90%);
  filter:blur(1.6vmin);opacity:.6;
}

/* the ring — plain border, transparent on the sides so only the top and
   bottom arcs show (border-image would be the fancier way to band it, but
   browsers don't clip border-image to border-radius, so it renders as a
   rectangle's edge instead of an ellipse — a real trap, not a style choice). */
.hero-ring{
  position:absolute;left:50%;top:50%;width:190%;height:190%;
  margin:-95% 0 0 -95%;border-radius:50%;pointer-events:none;
  border:clamp(9px,2.2vmin,20px) solid rgba(230,204,148,.72);
  border-left-color:transparent;border-right-color:transparent;
  box-shadow:0 0 5vmin -1vmin rgba(232,206,150,.4);
  transform:rotate(-16deg) rotateX(78deg);
}

/* real NASA-derived texture maps (Solar System Scope, CC BY 4.0), not CSS
   gradients. Each is a 2048x1024 equirectangular photo; panning it
   horizontally at a fixed pixel size is what makes it wrap seamlessly —
   longitude really does repeat, so background-repeat:repeat-x tiles it
   perfectly with no seam to hide. .hero-shade (above) is what turns the
   flat pan into a lit sphere instead of a scrolling photo strip. */
.hero-planet [data-tex]{display:none}  /* safety: no raw <img>, css only */

.hero-planet[data-planet="sun"]{
  box-shadow:0 0 90px 14px rgba(255,170,60,.55),0 0 240px 70px rgba(240,140,60,.32);
}
.hero-planet[data-planet="sun"] .hero-shade::before{background:none}  /* the sun is its own light source */
.hero-planet[data-planet="sun"] .hero-surface{
  background:url("img/planets/2k_sun.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 200s linear infinite;
}

.hero-planet[data-planet="moon"] .hero-surface{
  background:url("img/planets/2k_moon.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 260s linear infinite;
}

.hero-planet[data-planet="mars"] .hero-surface{
  background:url("img/planets/2k_mars.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 150s linear infinite;
}

.hero-planet[data-planet="mercury"] .hero-surface{
  background:url("img/planets/2k_mercury.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 240s linear infinite;
}

.hero-planet[data-planet="jupiter"] .hero-surface{
  --limb:rgba(230,196,150,.4);
  background:url("img/planets/2k_jupiter.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 60s linear infinite;   /* the fastest real rotator in the system */
}

.hero-planet[data-planet="venus"] .hero-surface{
  --limb:rgba(255,235,190,.45);
  background:url("img/planets/2k_venus_surface.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 260s linear infinite;
}

.hero-planet[data-planet="saturn"] .hero-surface{
  --limb:rgba(232,210,160,.4);
  background:url("img/planets/2k_saturn.jpg");
  background-size:2048px 1024px;background-repeat:repeat-x;
  animation:hero-pan 90s linear infinite;
}

/* ---------- home: the ground we are standing on ---------- */

/* ---- the ground ---------------------------------------------------------
   A shallow ellipse cap, so the horizon curves the way it does on a body
   1737 km across. Each crater is its own element: a shaded bowl with the far
   rim lit and the near rim in shadow, drawn flatter the further off it sits.
   The grain on top is real fractal noise, which is what keeps the whole
   thing from reading as a gradient.                                         */
.regolith{
  position:absolute;left:-12%;bottom:0;width:124%;height:34vh;
  border-radius:50% 50% 0 0 / 17% 17% 0 0;
  z-index:8;overflow:hidden;
  box-shadow:0 -1px 0 rgba(255,255,255,.9),0 -50px 130px rgba(228,224,216,.16);
  background:
    radial-gradient(70% 46% at 26% 104%,rgba(255,255,255,.45),transparent 72%),
    radial-gradient(54% 36% at 82% 98%,rgba(116,112,104,.2),transparent 72%),
    radial-gradient(40% 30% at 55% 120%,rgba(108,104,96,.25),transparent 70%),
    linear-gradient(to bottom,#fbfaf7 0%,#e9e6df 7%,#d2cec5 26%,#b6b1a7 52%,#98938a 76%,#726e66 100%);
}
/* fractal grain, twice: fine regolith dust over coarser mottling */
.regolith::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.34;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23m)' opacity='.55'/%3E%3C/svg%3E");
  background-size:170px 170px,620px 620px;
}

.crater{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--w);height:calc(var(--w) * var(--f,.32));
  margin:calc(var(--w) * var(--f,.32) / -2) 0 0 calc(var(--w) / -2);
  border-radius:50%;
  transform:rotate(var(--rot,0deg));
  /* dark at the top of the bowl and light at the bottom. That is what makes
     the eye read a pit; the reverse reads as a dome, which is the mistake. */
  background:linear-gradient(to bottom,
    rgba(72,68,61,.40) 0%,
    rgba(126,121,113,.20) 40%,
    rgba(212,208,200,.28) 74%,
    rgba(248,246,241,.42) 100%);
  box-shadow:
    inset 0 calc(var(--w) * .020) calc(var(--w) * .048) rgba(54,50,45,.48),  /* far wall, shaded */
    inset 0 calc(var(--w) * -.016) calc(var(--w) * .030) rgba(255,255,255,.5), /* near wall, lit */
    0 calc(var(--w) * .012) calc(var(--w) * .018) rgba(255,255,255,.42);       /* ejecta rim */
  z-index:9;
}

/* boulders, with the contact shadow that makes them sit on the ground
   rather than float over it */
.rock{
  position:absolute;bottom:var(--b,7vh);width:var(--w);height:calc(var(--w) * .42);
  background:
    linear-gradient(196deg,#f2efe9 0%,#cdc8be 38%,#948f86 78%,#6d6961 100%);
  border-radius:54% 46% 40% 44% / 96% 92% 24% 22%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    calc(var(--w) * .18) calc(var(--w) * .07) calc(var(--w) * .16) rgba(72,68,61,.45);
  z-index:10;
}

.hero{
  position:absolute;inset:auto 0 0 0;z-index:20;
  padding:0 20px 40vh;text-align:center;   /* sits in the sky, above the horizon */
  animation:arrive 1s ease-out 3s backwards;
}
.kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(38px,7.4vw,84px);line-height:1.02;margin-bottom:16px;
  text-shadow:0 2px 40px rgba(0,0,0,.9);
}
.hero p{
  max-width:520px;margin:0 auto 32px;color:var(--muted);font-size:16px;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
}
.cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.scrollcue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(151,147,168,.6);
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- content pages ---------- */

.wrap{position:relative;z-index:10;max-width:1080px;margin:0 auto;padding:120px clamp(18px,4vw,40px) 80px}
.wrap.narrow{max-width:760px}
.pagehead{margin-bottom:48px}
.pagehead h1{font-size:clamp(34px,5.4vw,56px);margin-bottom:12px}
.pagehead p{color:var(--muted);max-width:620px;margin:0}

.card{
  background:linear-gradient(160deg,rgba(17,21,51,.75),rgba(10,13,30,.75));
  border:1px solid var(--line);border-radius:18px;padding:28px;
}
.grid{display:grid;gap:20px}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}

.profile{display:grid;gap:30px;align-items:start}
@media(min-width:820px){.profile{grid-template-columns:300px 1fr}}
.portrait{
  aspect-ratio:3/4;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 34%,rgba(232,182,87,.22),transparent 62%),
    linear-gradient(160deg,#161a3c,#0a0d1e);
  display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.2em;
}
.portrait img{width:100%;height:100%;object-fit:cover}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.chip{
  font-size:12px;letter-spacing:.08em;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--gold);background:rgba(232,182,87,.06);
}
.price{font-family:var(--serif);font-size:34px;line-height:1.1}
.price small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.disclaimer{
  margin-top:26px;padding:16px 18px;border-left:2px solid var(--gold);
  background:rgba(232,182,87,.05);color:var(--muted);font-size:13.5px;
}
.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.social a{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;
  border:1px solid var(--line);text-decoration:none;font-size:13px;color:var(--muted);
  transition:color .2s,border-color .2s;
}
.social a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- courses / lms ---------- */

.course{
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  transition:transform .25s,border-color .25s;
}
.course:hover{transform:translateY(-3px);border-color:var(--gold)}
.course .cover{
  aspect-ratio:16/9;border-radius:12px;
  background:linear-gradient(135deg,var(--a,#2a1f5c),var(--b,#5c2f1f));
  display:grid;place-items:center;font-family:var(--serif);font-size:40px;color:rgba(255,255,255,.85);
}
.course h3{font-size:22px}
.course .sub{color:var(--muted);font-size:14px;flex:1}
.course .row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
.owned{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:11px}

.player{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--line);
}
.player #yt,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* A full-surface shield. Nothing reaches the iframe, so YouTube's own chrome —
   title bar, logo, "Watch on YouTube" — never gets a hover to render on, and
   there is no click path off this page. Play/pause runs through it. */
.shield{position:absolute;inset:0;cursor:pointer}
/* our own poster, so the embed's thumbnail and branding are never seen */
.poster{
  position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(140deg,#151a3e,#07091a);
}
.poster .play{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--saffron));color:#1a1103;
  font-size:26px;padding-left:5px;box-shadow:0 10px 40px rgba(240,137,60,.4);
  transition:transform .25s;
}
.poster:hover .play{transform:scale(1.08)}

.ctrl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:linear-gradient(to top,rgba(4,5,12,.92),rgba(4,5,12,.55) 60%,transparent);
  opacity:0;transition:opacity .25s;
}
.player:hover .ctrl,.player.paused .ctrl{opacity:1}
.ctrl button{
  background:none;border:0;color:var(--ink);font-size:17px;cursor:pointer;
  padding:2px 4px;line-height:1;
}
.ctrl button:hover{color:var(--gold)}
.ctrl time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctrl input[type=range]{
  flex:1;appearance:none;height:4px;border-radius:2px;cursor:pointer;
  background:linear-gradient(to right,var(--gold) var(--p,0%),rgba(255,255,255,.22) var(--p,0%));
}
.ctrl input[type=range]::-webkit-slider-thumb{
  appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);
}
.ctrl input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:50%;background:var(--gold);
}

.locked{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:28px;
  background:radial-gradient(circle at 50% 40%,rgba(17,21,51,.94),rgba(4,5,12,.98));
}
.lessons{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.lessons li{border-bottom:1px solid rgba(232,182,87,.08)}
.lessons button{
  width:100%;display:flex;align-items:center;gap:14px;padding:14px 8px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .2s;
}
.lessons button:hover{background:rgba(232,182,87,.05)}
.lessons button[aria-current]{color:var(--gold)}
.lessons .n{width:26px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.lessons .t{flex:1}
.lessons .dur{color:var(--muted);font-size:13px}
.lessons .lock{color:var(--muted);font-size:13px}

.hidden{display:none !important}

/* ---------- reduced motion: hold the system still, keep the layout ---------- */
@media(prefers-reduced-motion:reduce){
  .orbit,.body,.dot,.satellite,.sun,.youarehere,.scrollcue,.hero-surface{animation-play-state:paused}
  .parallax,.hero-planet-wrap{transition:none}
}