/* jaunt.one's legal pages and report form (legal/, privacy/, report/, built by scripts/legal/build.mjs).
   Outside, the landing: its night, film grain and scanlines, the lockup in its warm light, "Early access"'s
   quiet link for the language, its footer with the nebul. mark. Inside, the early access dialog's sheet:
   jaunt's own palette (web/style.css), Inter, its fields and its amber button. */

@font-face { font-family: "Satoshi"; font-weight: 300; font-display: swap; src: url("/fonts/satoshi-300.woff2") format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 400; font-display: swap; src: url("/fonts/satoshi-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter Jaunt"; font-weight: 100 900; font-display: block; src: url("/fonts/inter-jaunt.woff2") format("woff2"); }

:root {
  /* the landing */
  --void: #000;
  --starlight: #eef0f6;
  --amber: 231 162 70;
  /* jaunt's own palette, as the early access dialog */
  --bg: #121314;
  --panel: #17191a;
  --surface: #1d2021;
  --line: #2b2e30;
  --text: #eceeea;
  --muted: #929891;
  --faint: #69706a;
  --accent: #e7a246;
  --accent-soft: #33291d;
  --danger: #df8d82;
  --icon: 36px;
  color-scheme: dark;
}

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

html { background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font: 400 14px/1.65 "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* the landing's VHS: grain (js/legal.js), and the faintest scanlines */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: screen;
  image-rendering: pixelated;
  z-index: 5;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px);
  z-index: 5;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; transition: text-decoration-color .2s ease, color .2s ease; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 1px solid rgb(var(--amber) / .8); outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------ the landing's chrome: lockup, language */

.top {
  position: relative;
  display: flex;
  justify-content: center;
  padding: max(54px, calc(env(safe-area-inset-top) + 40px)) 16px 0;
}
.lockup { display: flex; align-items: center; gap: calc(var(--icon) * 10 / 33); text-decoration: none; color: #eceeea; }
.lockup .halo { position: relative; display: block; }
.lockup .halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--icon) * 6);
  height: calc(var(--icon) * 6);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(var(--amber) / .16), rgb(var(--amber) / .05) 45%, transparent);
  pointer-events: none;
  animation: breathe 7s ease-in-out 1s infinite;
}
@keyframes breathe { 50% { opacity: .55; } }
.lockup img { position: relative; display: block; width: var(--icon); height: auto; }
.lockup .name {
  position: relative;
  font: 650 calc(var(--icon) * 29 / 33)/1 "Inter Jaunt", Inter, ui-sans-serif, sans-serif;
  letter-spacing: calc(var(--icon) * -1.2 / 33);
}

/* the language: where "Early access" is on the landing, and as quiet */
.lang {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  z-index: 6;
  font: 400 13px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
}
.lang summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 6px;
  color: var(--starlight);
  opacity: .5;
  transition: opacity .3s ease;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.lang summary:hover, .lang[open] summary { opacity: 1; }
.lang summary:hover::after, .lang[open] summary::after { transform: none; transform-origin: left; }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 176px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .45);
  font: 400 13px/1.2 "Inter", ui-sans-serif, sans-serif;
  letter-spacing: 0;
}
.lang li a { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.lang li a:hover { background: var(--surface); color: var(--text); }
.lang li a[aria-current] { color: var(--text); }
.lang li a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------ the sheet: the early access dialog's */

main { flex: 1; width: 100%; padding: 40px 16px 72px; }
.sheet {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 38px 40px 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .45);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

h1 { margin: 0 0 10px; font-weight: 650; font-size: 28px; letter-spacing: -.9px; line-height: 1.15; }
.lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
h2 { margin: 0 0 16px; font-weight: 600; font-size: 16px; letter-spacing: -.3px; line-height: 1.3; }
h3 { margin: 0 0 12px; font-weight: 600; font-size: 14px; letter-spacing: -.1px; }
p { margin: 0 0 12px; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

/* label over value, as the dialog's fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0; }
.fields > div:first-child, .fields > div:only-child { grid-column: 1 / -1; }
.fields dt { margin: 0 0 5px; font-size: 12px; font-weight: 500; color: var(--muted); }
.fields dd { margin: 0; }

/* what jaunt cannot see: the page's one promise, in the dialog's amber note */
.promise {
  border-top: 0;
  padding: 18px 20px 18px;
  border: 1px solid #4a3a24;
  border-radius: 7px;
  background: var(--accent-soft);
  color: #e9c48f;
}
.promise h2 { color: var(--accent); margin-bottom: 8px; }

.uses { display: grid; gap: 10px; }
.use { padding: 16px 18px 18px; background: var(--surface); border-radius: 8px; }
.use .fields { grid-template-columns: 1.3fr 1.3fr 1fr; gap: 12px 22px; }
.use .fields > div:first-child { grid-column: auto; }
.note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--faint); }

.sheet ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.sheet li { position: relative; padding-left: 16px; }
.sheet li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }

/* ------------------------------------------------ the report form: the dialog's fields and button */

.report .lede { margin-bottom: 26px; }
.form { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 12px; font-weight: 500; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23929891' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
}
.field select:invalid { color: var(--faint); }
.field option { color: var(--text); background: var(--panel); }
.field textarea { resize: vertical; min-height: 120px; }
.field textarea::placeholder, .field input::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #e7a24614; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .note { margin: -6px 0 0; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.send {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: #251d11;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.send:hover, .send:focus-visible { background: #efb360; border-color: #efb360; outline: none; }
.send.busy span { opacity: .55; }
.send.busy::after { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.error { margin: 0; font-size: 13px; color: var(--danger); }
.done { padding: 18px 20px; border: 1px solid #4a3a24; border-radius: 7px; background: var(--accent-soft); color: #e9c48f; }
.done[hidden], .error[hidden], .form[hidden] { display: none; }
.contact { margin-top: 26px; }

/* ------------------------------------------------ the landing's footer */

.foot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: 8px max(16px, calc(env(safe-area-inset-right) + 12px)) max(30px, calc(env(safe-area-inset-bottom) + 24px)) max(16px, calc(env(safe-area-inset-left) + 12px));
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0 6px; }
.foot nav a {
  font: 400 12px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  color: var(--starlight);
  text-decoration: none;
  opacity: .38;
  transition: opacity .3s ease;
}
.foot nav a::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.foot nav a:hover, .foot nav a:focus-visible, .foot nav a[aria-current] { opacity: 1; outline: none; }
.foot nav a:hover::after, .foot nav a:focus-visible::after, .foot nav a[aria-current]::after { transform: none; transform-origin: left; }
/* the nebul. mark, as js/mark.js draws it on the landing */
.nebul {
  font: 300 26px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .005em;
  color: var(--starlight);
  text-decoration: none;
  opacity: .9;
}
.nebul i { font-style: normal; color: #fff; text-shadow: 0 0 6px rgb(255 255 255 / .9), 0 0 16px rgb(255 255 255 / .45); }

@media (max-width: 640px) {
  :root { --icon: 30px; }
  .top { padding-top: max(64px, calc(env(safe-area-inset-top) + 52px)); }
  main { padding: 28px 10px 48px; }
  .sheet { padding: 26px 18px 24px; }
  h1 { font-size: 24px; letter-spacing: -.7px; }
  .fields, .use .fields, .pair { grid-template-columns: 1fr; gap: 14px; }
  .foot { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding-top: 4px; }
  .foot .nebul { order: -1; }
  .foot nav { justify-content: center; gap: 8px 18px; }
  .foot nav a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .lockup .halo::before { animation: none; }
}