/* Lumen — the site.
   The accent is the icon's own hue (187), sampled from the artwork and lifted
   to its lit value, so the page reads as the same object as the application. */

:root {
  --bg:        #04080a;
  --bg-lift:   #071014;
  --ink:       #cfe9ee;
  --ink-dim:   #7f9ba2;
  --teal:      #32e7ff;
  --teal-mid:  #3ad6ea;
  --teal-deep: #50a7b2;
  --rule:      rgba(50, 231, 255, 0.22);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A faint glow from the top, and a cooler one bottom-left, so the page has the
   same light as the icon rather than a flat black. Purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 50% -8rem, rgba(50, 231, 255, 0.10), transparent 70%),
    radial-gradient(40rem 24rem at 0% 108%, rgba(255, 170, 60, 0.05), transparent 70%);
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; position: relative; }

/* ---- header ---------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand img { width: 2.25rem; height: 2.25rem; display: block; }
.brand span { font-size: 1.15rem; letter-spacing: 0.22em; color: var(--teal); }

nav { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
nav a { color: var(--ink-dim); text-decoration: none; font-size: 0.95rem; }
nav a:hover, nav a:focus-visible { color: var(--teal); }

/* A rule between the links rather than only space. It hangs off the anchor
   that FOLLOWS it, so there is never a trailing bar at the end of the row --
   and it keeps its own colour, so hovering a link does not light the divider
   beside it. aria-hidden is not available on a pseudo-element, so the bar is
   spoken; that is the one cost, and it is smaller than a nav that reads as one
   run-on word. */
nav a + a::before {
  content: "|";
  color: var(--teal-deep);
  opacity: 0.55;
  margin: 0 1.1rem;
}

/* ---- hero ------------------------------------------------------------ */

.hero { text-align: center; padding: 5rem 0 1rem; }
.hero h1, .hero p { font-size: 1.25rem; margin: 0; color: var(--ink); font-weight: 400; }
.hero .rule { width: 2.5rem; height: 1px; background: var(--teal-deep); margin: 2rem auto 0; }

/* ---- the film on the front page ------------------------------------- */

/* Wider than the text column: it grows with the window (a 1.5rem margin each
   side) up to the film's own 1280 px, centred on the page rather than on the
   column, and always keeps the film's 16:9. */
.video { width: min(calc(100vw - 3rem), 80rem); margin: 3rem 0 0 50%;
         transform: translateX(-50%); }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
               object-fit: contain; background: #000; }
.video p { margin: 0.7rem 0 0; text-align: center; color: var(--ink-dim); font-size: 0.9rem; }

/* ---- section heading with rules either side -------------------------- */

.heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 3.5rem 0 2.5rem;
}
.heading::before, .heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.heading h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--teal);
  white-space: nowrap;
}

/* ---- the list of things it does -------------------------------------- */

.things { display: grid; gap: 1.75rem; margin: 0 auto; max-width: 34rem; }

.thing { display: flex; gap: 1.25rem; align-items: flex-start; }
.thing svg { width: 1.9rem; height: 1.9rem; flex: none; stroke: var(--teal); fill: none;
             stroke-width: 1.5; margin-top: 0.15rem; }
.thing h3 { margin: 0; font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.thing q  { display: block; margin-top: 0.15rem; color: var(--teal-deep); font-style: italic; }
/* A description of an option is not something anybody said, so it gets no
   quotation marks -- only the example phrases on the front page do. */
.thing .note { display: block; margin-top: 0.15rem; color: var(--ink-dim); }
.thing q::before { content: '"'; }
.thing q::after  { content: '"'; }

/* ---- numbered steps --------------------------------------------------- */

.steps { display: grid; gap: 2rem; max-width: 40rem; margin: 0 auto; }
.step { display: flex; gap: 1.25rem; align-items: flex-start; }
.step > b {
  flex: none;
  width: 2rem; height: 2rem;
  border: 1px solid var(--teal-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--teal); font-weight: 400; font-size: 0.95rem;
}
.step h3 { margin: 0.2rem 0 0.4rem; font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.step p { margin: 0 0 0.6rem; color: var(--ink-dim); }
.step p.sub { font-size: 0.93rem; }
.step p.sub b { color: var(--ink); font-weight: 400; }
.step em { color: var(--teal-mid); font-style: normal; }
.step code {
  display: inline-block;
  background: rgba(50, 231, 255, 0.07);
  border: 1px solid var(--rule);
  padding: 0.15rem 0.5rem;
  color: var(--teal-mid);
  font-size: 0.88rem;
  word-break: break-all;
}

/* ---- the full list ----------------------------------------------------- */

.list { max-width: 34rem; margin: 0 auto; }
.list ul { margin: 0; padding-left: 1.3rem; }
.list li { margin: 0.35rem 0; color: var(--ink); }
.list li::marker { color: var(--teal-deep); }

/* ---- call to action --------------------------------------------------- */

.cta { text-align: center; margin: 3.5rem 0 1rem; }
.cta a {
  display: inline-block;
  padding: 0.9rem 2rem;
  border: 1px solid var(--teal);
  color: var(--teal);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.cta a:hover, .cta a:focus-visible { background: rgba(50, 231, 255, 0.10); }

/* ---- the plain-speaking part ------------------------------------------ */

.plain { max-width: 42rem; margin: 0 auto; padding: 1rem 0 0; }
.plain p { color: var(--ink-dim); }
.plain strong { color: var(--ink); font-weight: 400; }
.plain a { color: var(--teal-mid); }
.plain .sig { margin-top: 1.5rem; color: var(--teal-deep); }

footer {
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 0.9rem;
}
footer a { color: var(--teal-deep); }
footer p { margin: 0.4rem 0; }

@media (max-width: 34rem) {
  .hero { padding-top: 3rem; }
  .hero h1, .hero p { font-size: 1.05rem; }
  .heading::before, .heading::after { display: none; }
  .heading { justify-content: center; }
  /* A long heading wraps on a phone instead of running off both edges. */
  .heading h2 { white-space: normal; text-align: center; letter-spacing: 0.12em; }
}