/*
 * The landing page of aivantis.ai, in Nuit dorée: the night, gold and ivory
 * of the presentation. Every colour and font is a token of tokens.css,
 * loaded first; this sheet writes none. The sizes are its own: the tokens
 * size a projector read from 20 m, this page is read on a phone first.
 *
 * No script: the form posts to the server, which answers with this page.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  --side: clamp(1.1rem, 5vw, 4rem);
  --measure: 62rem;
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-2) 0, var(--bg) 60rem);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

h1,
h2,
p,
ul,
ol,
fieldset {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--accent-2);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 0.18rem solid var(--accent-2);
  outline-offset: 0.2rem;
}

h1,
h2 {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-weight: var(--display-weight);
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
  max-width: 24ch;
}

.kicker {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.intro {
  max-width: 44rem;
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1.12rem;
}

.small {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.optional {
  color: var(--ink-soft);
  font-size: 0.82em;
  font-weight: 400;
}

/* The top bar: the brand, and the way to the form. */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--side);
  background: var(--panel);
  backdrop-filter: blur(0.6rem);
  border-bottom: 1px solid var(--track);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}

.mark {
  flex: none;
  height: 2rem;
  width: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-letter {
  stroke: var(--accent);
  stroke-width: 9;
}

.mark-curve {
  stroke: var(--ink);
  stroke-width: 6;
}

.mark-dot {
  fill: var(--ink);
}

.brand-name {
  font-family: var(--display);
  font-variation-settings: var(--brand-axes);
  font-weight: var(--brand-weight);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.button {
  display: inline-block;
  padding: 0.85em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.6rem var(--shade);
  transition: filter 200ms var(--ease), translate 200ms var(--ease);
}

.button:hover {
  color: var(--accent-ink);
  filter: brightness(1.08);
  translate: 0 -1px;
}

.button-quiet {
  padding: 0.5em 1.1em;
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--panel-edge);
  box-shadow: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.button-quiet:hover {
  color: var(--ink);
  border-color: var(--accent-2);
}

/* The hero: the title on the left, the armillary of the presentation on
   the right, drawn in CSS alone. On a phone it rests behind the title. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(46rem, 88svh);
  padding: clamp(3rem, 9vw, 6rem) var(--side);
}

.hero-text {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5rem);
  line-height: 1.02;
  text-shadow: 0 0.2rem 1.6rem var(--shade);
}

.hero h1 em {
  display: block;
  font-style: normal;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.lead {
  max-width: 36rem;
  margin-top: 1.6rem;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2.2rem;
}

.hero-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* One em is the unit of the armillary: it follows the screen. */
  font-size: clamp(0.5rem, 1.15vw, 1rem);
  opacity: 0.38;
}

.halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 60em;
  height: 60em;
  margin: -30em 0 0 -30em;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 26%, transparent 60%);
}

.orrery {
  position: absolute;
  left: 50%;
  top: 46%;
  perspective: 90em;
}

.orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: conic-gradient(var(--accent-deep), var(--accent-2) 10%, var(--accent) 20%, var(--accent-deep) 42%, var(--accent) 68%, var(--accent-deep));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--width)), black calc(100% - var(--width) + 0.06em));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--width)), black calc(100% - var(--width) + 0.06em));
  transform: rotateX(var(--tilt)) rotateY(var(--yaw));
  animation: orbit var(--period) linear infinite var(--direction, normal);
}

.orbit-1 { --size: 42em; --width: 0.28em; --tilt: 8deg; --yaw: -14deg; --period: 160s; }
.orbit-2 { --size: 38em; --width: 0.23em; --tilt: 74deg; --yaw: -10deg; --period: 120s; --direction: reverse; }
.orbit-3 { --size: 31em; --width: 0.23em; --tilt: 58deg; --yaw: 38deg; --period: 90s; }
.orbit-4 { --size: 22em; --width: 0.2em; --tilt: 66deg; --yaw: -52deg; --period: 70s; --direction: reverse; }

@keyframes orbit {
  to {
    transform: rotateX(var(--tilt)) rotateY(var(--yaw)) rotateZ(360deg);
  }
}

.core {
  position: absolute;
  left: -3em;
  top: -3em;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--ink) 0%, var(--second) 26%, color-mix(in srgb, var(--second) 60%, var(--accent-deep)) 72%, var(--accent-deep) 100%);
  box-shadow: 0 0 4em color-mix(in srgb, var(--accent) 45%, transparent);
}

@media (min-width: 60rem) {
  .sky {
    opacity: 1;
  }

  .halo,
  .orrery {
    left: 80%;
  }
}

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

  .orbit {
    animation: none;
  }

  .button {
    transition: none;
  }
}

/* A band is a section of the page, on the measure of the text. */
.band {
  padding: clamp(3rem, 8vw, 5.5rem) var(--side);
  border-top: 1px solid var(--track);
}

.band,
.foot {
  display: grid;
  grid-template-columns: minmax(0, var(--measure));
  justify-content: center;
  justify-items: start;
}

.band > * {
  width: 100%;
}

.band > h2 {
  max-width: 24ch;
}

.band > .intro {
  max-width: 44rem;
}

/* The two evenings. */
.evenings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.evening {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--panel-edge);
  border-radius: 1rem;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
}

.evening-island {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
}

.evening-date {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
}

.evening-date::first-letter {
  text-transform: uppercase;
}

.evening-place {
  color: var(--ink-soft);
}

.evening-hour {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

.evening-hour span {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 400;
}

.tag {
  align-self: flex-start;
  margin-top: 0.8rem;
  padding: 0.25em 0.8em;
  border: 1px solid var(--track);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.tag-waiting {
  border-color: var(--warning-paper);
  color: var(--warning-paper);
}

.tag-closed {
  border-color: var(--late);
  color: var(--late);
}

/* The five ideas, numbered in gold. */
.ideas {
  counter-reset: idea;
  display: grid;
  gap: 0;
  margin-top: 2.2rem;
}

.ideas li {
  counter-increment: idea;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--track);
  color: var(--ink-soft);
}

.ideas li::before {
  content: counter(idea);
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
}

.ideas p {
  grid-column: 2;
}

.idea-line {
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  margin-bottom: 0.25rem;
}

/* The conviction: the title beside its text on a wide screen. */
.band-split {
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}

.band-split h2 {
  max-width: 20ch;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
}

.band-split p {
  color: var(--ink-soft);
}

@media (min-width: 60rem) {
  .band-split {
    grid-template-columns: minmax(0, calc(var(--measure) * 5 / 11 - 2rem)) minmax(0, calc(var(--measure) * 6 / 11 - 2rem));
  }
}

.gains {
  display: grid;
  gap: 0.6rem;
  margin: 1.1rem 0;
}

.gains li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-soft);
}

.gains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.gains strong {
  color: var(--ink);
}

/* The two hosts. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.people li {
  padding: 1.5rem;
  border-left: 0.2rem solid var(--accent);
  background: var(--panel);
  border-radius: 0 1rem 1rem 0;
  color: var(--ink-soft);
}

.person-name {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-weight: var(--display-weight);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--ink);
}

.person-role {
  margin: 0.2rem 0 0.7rem;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
}

.aside {
  margin-top: 1.6rem;
  color: var(--ink-soft);
  max-width: 46rem;
}

/* The form. */
.band-form {
  background: radial-gradient(90% 60% at 50% 0%, var(--bg-3), transparent 70%);
}

.form {
  display: grid;
  gap: 1.2rem;
  max-width: 44rem;
  margin-top: 1.8rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid var(--panel-edge);
  border-radius: 1.2rem;
  background: var(--panel);
}

fieldset {
  border: 0;
  min-width: 0;
}

legend,
.field > label {
  display: block;
  padding: 0;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.2rem;
}

.field {
  display: block;
  min-width: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--track);
  border-radius: 0.6rem;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  /* 16 px at least: a phone does not zoom on the field. */
  font-size: max(1rem, 16px);
}

input:focus-visible,
select:focus-visible {
  border-color: var(--accent-2);
  outline-offset: 0;
}

.field-invalid input,
.field-invalid select {
  border-color: var(--late);
}

.error {
  display: block;
  margin-top: 0.4rem;
  color: var(--late);
  font-size: 0.92rem;
  font-weight: 600;
}

.problem {
  max-width: 44rem;
  margin-top: 1.4rem;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--alert-paper);
  color: var(--alert-ink);
  font-weight: 700;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice input {
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent);
}

.choice-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  height: 100%;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1px solid var(--track);
  border-radius: 0.8rem;
  background: var(--bg);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.choice:hover .choice-body {
  border-color: var(--panel-edge);
}

.choice input:checked + .choice-body {
  border-color: var(--accent);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choice input:focus-visible + .choice-body {
  outline: 0.18rem solid var(--accent-2);
  outline-offset: 0.15rem;
}

.choice-island {
  font-weight: 700;
}

.choice-date::first-letter {
  text-transform: uppercase;
}

.choice-date,
.choice-place {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.choice-state {
  margin-top: 0.3rem;
  color: var(--warning-paper);
  font-size: 0.88rem;
  font-weight: 700;
}

.choice-closed {
  cursor: default;
  opacity: 0.55;
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  color: var(--ink-soft);
}

.check input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}

/* The trap: a field no visitor sees, that only a robot fills. */
.trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  display: grid;
  gap: 0.6rem;
  max-width: 44rem;
  margin-top: 1.8rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--on-time);
  border-radius: 1.2rem;
  background: var(--panel);
  color: var(--ink-soft);
}

.notice-waiting {
  border-color: var(--warning-paper);
}

.notice-title {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  color: var(--on-time);
}

.notice-waiting .notice-title {
  color: var(--warning-paper);
}

/* The foot: the warning every page about trading owes, the data notice,
   who publishes. */
.foot {
  gap: 1.1rem;
  padding: 2.5rem var(--side) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.foot > * {
  width: 100%;
}

.warning-line {
  color: var(--ink);
}

details summary {
  cursor: pointer;
  color: var(--accent-2);
  font-weight: 700;
}

details p {
  max-width: 46rem;
  margin-top: 0.7rem;
}

/* The page of the organisers: counts and a table, nothing else. */
.admin {
  padding: 2rem var(--side) 4rem;
}

.admin h1 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
}

.admin-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-counts li {
  padding: 1rem 1.3rem;
  border: 1px solid var(--panel-edge);
  border-radius: 0.8rem;
  background: var(--panel);
}

.admin-counts b {
  display: block;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

.admin-table {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.admin table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.admin th,
.admin td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--track);
  text-align: left;
  white-space: nowrap;
}

.admin th {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}