/* ============================================================================
   Orbital Launcher — orbitallauncher.com

   The launcher's own palette, because a site for a home screen that looked
   like anything else would be the first thing to contradict it: mint on deep
   space, the accent used sparingly and always for the thing you can act on.

   One stylesheet for three pages. It is short enough to read in one sitting,
   which is the point — nothing here is generated and nothing is minified, so
   what is served is what was written.
   ========================================================================== */

:root {
  --bg: #07090e;
  --bg-lift: #0b0f18;
  --card: rgba(13, 17, 27, 0.88);
  --card-edge: rgba(0, 255, 170, 0.22);
  --accent: #00ffaa;
  --accent-dim: #7af5cd;
  --text: #f0f4f8;
  --muted: #94a3b8;
  --rule: rgba(255, 255, 255, 0.1);
  --measure: 42rem;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
  /* A faint field behind everything, the way the launcher draws a wash over
     the wallpaper so what is written on it stays readable. */
  background-image:
    radial-gradient(900px 600px at 78% -8%, rgba(0, 255, 170, 0.1), transparent 70%),
    radial-gradient(700px 500px at 8% 4%, rgba(90, 120, 255, 0.09), transparent 70%);
  background-attachment: fixed;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
.orbit-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; }

/* ---- the bar across the top ------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  background: rgba(7, 9, 14, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.mark {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.top nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 0.92rem;
}

.top nav a {
  color: var(--muted);
  text-decoration: none;
}

.top nav a:hover,
.top nav a[aria-current='page'] { color: var(--accent); }

/* ---- page furniture ---------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px 20px 110px;
}

.wide { max-width: 64rem; }

h1, h2, h3 { line-height: 1.25; }

h1 {
  font-size: clamp(2rem, 6vw, 3.1rem);
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.45rem;
  margin: 3rem 0 0.8rem;
  color: #fff;
}

h3 {
  font-size: 1.08rem;
  margin: 1.9rem 0 0.4rem;
  color: var(--accent-dim);
}

p { margin: 0 0 1.05rem; }

.lede {
  font-size: 1.12rem;
  color: var(--muted);
}

.muted { color: var(--muted); }

.small { font-size: 0.92rem; }

ul, ol { padding-left: 1.2rem; }

li { margin: 0.3rem 0; }

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* ---- the hero and its wheel -------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 0;
  text-align: center;
  overflow: hidden;
}

.hero h1 { max-width: 20ch; }

.hero .lede { max-width: 46ch; margin-inline: auto; }

/* The wheel itself. A fixed aspect box so the ellipse keeps its shape at
   every width, and the labels are placed inside it in fractions of it. */
.orbit {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 3 / 2;
  margin: 10px auto 0;
  touch-action: pan-y;
  user-select: none;
}

.orbit-line {
  position: absolute;
  inset: 0;
  /* Said outright, both of them. An svg carries the aspect ratio of its own
     viewBox, and with only `inset` to go on it keeps that ratio instead of
     filling the box — which drew the ellipse two thirds the height of the path
     the slots were actually riding. */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orbit-item {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 20px;
  background: rgba(13, 20, 30, 0.9);
  border: 1px solid var(--card-edge);
  color: var(--accent);
  text-decoration: none;
  /* Placed by script every frame; transitions here would fight it. */
  will-change: transform, opacity;
}

.orbit-item svg { width: 34px; height: 34px; }

.orbit-item.is-front {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 40px rgba(0, 255, 170, 0.2);
}

/* What the front slot is called, in the middle of the ellipse, the way the
   launcher names the app the wheel is turned to. */
.orbit-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 16rem;
}

.orbit-name strong {
  display: block;
  font-size: 1.25rem;
  color: #fff;
}

.orbit-name span {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
}

.orbit-hint {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Every slot is a real link in the markup. Where the wheel cannot run — no
   script, or somebody who has asked for less motion — this is the menu. */
.orbit-fallback {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.orbit-fallback a {
  padding: 8px 14px;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  text-decoration: none;
  color: var(--accent);
}

.no-js .orbit { display: none; }
.no-js .orbit-fallback { display: flex; }

/* ---- cards, panels, tables --------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 1.4rem 0;
}

.card h3 { margin-top: 0; }

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.5rem 0;
}

.grid .card { margin: 0; }

.tag {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

dl.rows { margin: 1rem 0; }

dl.rows dt {
  font-weight: 600;
  color: #fff;
  margin-top: 1rem;
}

dl.rows dd {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

/* ---- the contents rail on the guide ------------------------------------ */

.guide {
  display: grid;
  gap: 40px;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  max-width: 68rem;
  margin: 0 auto;
  padding: 44px 20px 110px;
}

.toc {
  position: sticky;
  top: 72px;
  font-size: 0.94rem;
}

.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--rule);
}

.toc a {
  display: block;
  padding: 5px 0 5px 14px;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.toc a:hover { color: var(--text); }

.toc a.is-here {
  color: var(--accent);
  border-left-color: var(--accent);
}

@media (max-width: 860px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; margin-bottom: 1rem; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 4px 12px; border-left: 0; }
  .toc a { border-left: 0; padding-left: 0; }
}

/* ---- the little home screen drawn in CSS -------------------------------- */

.phone {
  position: relative;
  width: 260px;
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  border: 1px solid var(--card-edge);
  background: linear-gradient(170deg, #121a2b 0%, #080b12 55%, #05070b 100%);
  overflow: hidden;
  flex: none;
}

.phone .p-clock {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
}

.phone .p-date {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.66rem;
  color: var(--muted);
}

.phone .p-card {
  position: absolute;
  left: 8%;
  right: 8%;
  border-radius: 10px;
  background: rgba(13, 20, 30, 0.85);
  border: 1px solid var(--card-edge);
}

.phone .p-card.a { top: 30%; height: 9%; }
.phone .p-card.b { top: 41%; height: 22%; }

/* The ellipse and the apps on it share one set of numbers — see the comment beside the
   markup. The svg is stretched to the box rather than fitted to it, so the line it draws is
   the same curve the apps are placed against. */
.phone .p-dock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 255, 170, 0.4);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

.phone .p-app {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  /* Placed by its centre, because that is what riding a line means. */
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: rgba(0, 255, 170, 0.16);
  border: 1px solid var(--card-edge);
}

/* The one at the front of the wheel, which is the one a thumb is about to press. */
.phone .p-app.is-front {
  width: 18%;
  background: rgba(0, 255, 170, 0.26);
  border-color: var(--accent);
}

.side-by-side {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.side-by-side > div { flex: 1 1 18rem; min-width: 0; }

/* ---- asking to test it -------------------------------------------------- */

.ask {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.2rem 0 0.6rem;
}

.ask input[type='email'] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
}

.ask input[type='email']::placeholder { color: var(--muted); }

.ask input[type='email']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ask button {
  padding: 12px 20px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #04120c;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.ask button:hover { background: var(--accent-dim); }

.ask button[disabled] { opacity: 0.6; cursor: default; }

/* Empty until there is something to say, so it takes no room on the page it sits in. */
.ask-said:empty { display: none; }

.ask-said.is-good { color: var(--accent); }

/* ---- footer ------------------------------------------------------------ */

.foot {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.88rem;
  padding: 26px 20px 60px;
  text-align: center;
}

.foot a { color: var(--accent-dim); }

/* ---- phone-sized screens ----------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 30px 16px 80px; }
  .guide { padding: 30px 16px 80px; }
  .top { gap: 12px; padding: 10px 14px; }
  .top nav { gap: 12px; font-size: 0.86rem; }
  .orbit-item { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 16px; }
  .orbit-item svg { width: 25px; height: 25px; }

  /* A squarer box on a narrow screen, for one reason: the name has to go
     somewhere. In the middle of an ellipse this flat it lands on the icons,
     and the only empty room is under the front of the wheel — which there is
     none of until the box is taller than it is wide. */
  .orbit { aspect-ratio: 1 / 1; }

  .orbit-name {
    top: 88%;
    width: 94%;
  }

  .orbit-name strong { font-size: 1.05rem; }
  .orbit-name span { font-size: 0.82rem; }

  .hero { min-height: auto; padding-bottom: 20px; }
}

/* Read aloud, never drawn: the icons in the wheel are pictures, and a link
   with nothing but a picture in it is a link with no name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}