/* Nomel Labs — nomellabs.com
   Self-hosted fonts, no external requests, no tracking, no JavaScript. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-variable-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  --bg: #141312;
  --raised: #1c1a18;
  --line: #2b2825;
  --line-soft: #221f1d;
  --text: #eeeae4;
  --muted: #a8a29a;
  --accent: #f0a06a;
  --accent-lift: #f6b489;
  --accent-dim: #c97f4f;
  --accent-line: rgba(240, 160, 106, 0.45);
  --ink: #1a1512;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --measure: 36rem;
  --page: 46rem;
  --pad: clamp(1.25rem, 5vw, 2rem);
  --nav-pad: 0.4rem;
  --gap-section: clamp(3.5rem, 8vw, 5.75rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-color: #3a3530 transparent;
}

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.05rem, 1.35rem + 3vw, 3.15rem);
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
}

p {
  margin: 0 0 1.1em;
  max-width: var(--measure);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

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

a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

strong {
  font-weight: 600;
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

/* ---------- Atmosphere ----------
   Three fixed layers sit behind the text: a slow warm light, a vignette that
   settles the edges, and a fine grain so the dark reads as a material instead
   of a flat fill. None of them react to the pointer. */

html::before,
html::after,
body::before {
  content: "";
  position: fixed;
  pointer-events: none;
}

html::before {
  top: -32vh;
  left: 50%;
  inline-size: min(1500px, 150vw);
  block-size: min(1500px, 150vw);
  z-index: -3;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(240, 160, 106, 0.085),
    rgba(240, 160, 106, 0.028) 45%,
    transparent 72%
  );
}

html::after {
  inset: 0;
  z-index: -2;
  background: radial-gradient(118% 78% at 50% 6%, transparent 42%, rgba(0, 0, 0, 0.45));
}

body::before {
  inset: 0;
  z-index: -1;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--raised);
  color: var(--text);
  padding: 0.7rem 1rem;
  z-index: 10;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Header ---------- */

.masthead {
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  view-transition-name: masthead;
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--accent);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: 0.95rem;
  margin-block: calc(var(--nav-pad) * -1);
}

.nav a {
  position: relative;
  padding-block: var(--nav-pad);
  color: var(--muted);
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--nav-pad) - 0.15rem);
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}

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

.nav a:hover::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a[aria-current="page"]::after {
  background: var(--accent);
  transform: scaleX(1);
}

/* ---------- Main ---------- */

main {
  flex: 1 0 auto;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(4rem, 9vw, 6.5rem);
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 1.6rem;
  max-width: 32rem;
}

.section {
  margin-top: var(--gap-section);
}

.section > h2 + p,
.section > h2 + .status {
  margin-top: 1rem;
}

.spaced {
  margin-top: 1.75rem;
}

/* ---------- Fictionly ---------- */

.feature {
  position: relative;
  margin-top: 1.75rem;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.016)
  );
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.feature::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 160, 106, 0.4), transparent);
}

@media (min-width: 34rem) {
  .feature {
    grid-template-columns: 1fr auto;
  }
}

.status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.925rem;
  margin: 0 0 1.1rem;
}

.status::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* The little reader: a phone with text drifting past the way a page moves
   while you read it, and a progress line that creeps along with it. */

.reader {
  margin: 0;
  justify-self: center;
}

.reader svg {
  display: block;
  inline-size: clamp(96px, 22vw, 132px);
  block-size: auto;
}

.reader-body {
  fill: rgba(255, 255, 255, 0.025);
  stroke: #383430;
  stroke-width: 1;
}

.reader-screen {
  fill: rgba(0, 0, 0, 0.2);
}

.reader-notch {
  fill: var(--line);
}

.reader-line {
  fill: var(--muted);
  opacity: 0.38;
}

.reader-track {
  fill: var(--line);
}

.reader-progress {
  fill: var(--accent);
  opacity: 0.7;
}

/* ---------- Definition list ---------- */

.fields {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1.4rem 2rem;
}

.fields dt {
  font-weight: 600;
  color: var(--text);
}

.fields dd {
  margin: 0.15rem 0 0;
  color: var(--muted);
  max-width: var(--measure);
}

@media (min-width: 40rem) {
  .fields {
    grid-template-columns: 10.5rem 1fr;
    gap: 1.5rem 2rem;
  }

  .fields dt {
    grid-column: 1;
  }

  .fields dd {
    grid-column: 2;
    margin-top: 0;
  }
}

/* ---------- Form ---------- */

.form {
  margin-top: 2rem;
  display: grid;
  gap: 1.35rem;
  max-width: 34rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.95rem;
  font-weight: 500;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem; /* keeps iOS from zooming in when a field takes focus */
  line-height: 1.5;
  width: 100%;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  caret-color: var(--accent);
}

textarea {
  resize: vertical;
  min-height: 9.5rem;
}

/* The list a browser opens on a select is painted from the control's own
   background colour. A translucent one leaves that list white with unreadable
   text, so this control gets solid colours matching what the other fields
   composite to, and the options are coloured explicitly on top of that. */
select {
  appearance: none;
  padding-right: 2.5rem;
  background-color: #1c1b1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a8a29a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

option {
  background-color: #1c1b1a;
  color: var(--text);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #3a3531;
}

input:focus,
textarea:focus {
  border-color: var(--accent-dim);
  background-color: rgba(255, 255, 255, 0.055);
}

select:focus {
  border-color: var(--accent-dim);
  background-color: #211f1e;
}

input::placeholder,
textarea::placeholder {
  color: #6f6a64;
}

/* Chrome paints autofilled fields pale yellow, which would be jarring here. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px #241f1b inset;
  caret-color: var(--accent);
}

.button {
  justify-self: start;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.72rem 1.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}

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

.button:active {
  transform: translateY(1px);
}

/* Bots fill in every field they find. People never see this one. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Legal / long-form text ---------- */

.prose h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
}

.prose h2 + p,
.prose h2 + address,
.prose h2 + ul {
  margin-top: 0.9rem;
}

.prose address {
  font-style: normal;
  color: var(--text);
}

.prose ul {
  padding-left: 1.1rem;
  max-width: var(--measure);
  color: var(--muted);
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--accent-dim);
}

.note {
  color: var(--muted);
  font-size: 0.95rem;
  border-top: 1px solid var(--line-soft);
  margin-top: var(--gap-section);
  padding-top: 1.5rem;
}

.translation {
  margin-top: var(--gap-section);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(2rem, 4vw, 2.75rem);
}

.translation h2 {
  margin-top: 0;
}

/* ---------- Draft placeholders (privacy) ---------- */

.draft-banner {
  margin-top: 1.75rem;
  border: 1px dashed var(--accent-dim);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  color: var(--text);
  font-size: 0.975rem;
  max-width: var(--measure);
}

.placeholder {
  display: block;
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--accent-dim);
  border-radius: 8px;
  background: rgba(240, 160, 106, 0.06);
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: var(--measure);
}

/* ---------- Confirmation ---------- */

.confirm {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent);
  font-size: 0.95rem;
  margin: 1.6rem 0 0;
}

.confirm svg {
  flex: none;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.75rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 0.9rem;
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.footer p {
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.footer a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* ---------- 404 ---------- */

.notfound {
  padding-top: clamp(3rem, 10vw, 6rem);
}

.notfound p {
  margin-top: 1.4rem;
  color: var(--muted);
  max-width: 30rem;
}

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
  :root {
    --nav-pad: 0.6rem;
  }

  .masthead .wrap {
    align-items: flex-start;
  }

  .nav {
    gap: 0 1.25rem;
  }
}

/* Fingers need more room than a mouse pointer. Only the hit area grows here,
   nothing moves. */
@media (pointer: coarse) {
  .wordmark {
    display: inline-block;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
  }

  .footer-nav a {
    padding-block: 0.55rem;
  }

  .footer-nav {
    margin-block: -0.55rem;
  }
}

/* ---------- Motion ----------
   Everything that moves is collected here, so switching it off for
   prefers-reduced-motion leaves the page looking exactly as designed. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  a,
  .wordmark,
  .footer a {
    transition: color 140ms ease, text-decoration-color 200ms ease;
  }

  .nav a::after {
    transition: transform 240ms var(--ease);
  }

  input,
  select,
  textarea,
  .button {
    transition: border-color 160ms ease, background-color 160ms ease,
      transform 80ms ease;
  }

  html::before {
    animation: ambient 64s ease-in-out infinite alternate;
  }

  h1,
  .lead {
    animation: rise 620ms var(--ease) both;
  }

  .lead {
    animation-delay: 90ms;
  }

  .status::before {
    animation: breathe 3.4s ease-in-out infinite;
  }

  .reader-lines {
    animation: read 30s linear infinite;
  }

  .reader-progress {
    animation: progress 30s ease-in-out infinite alternate;
  }
}

@keyframes ambient {
  from {
    transform: translate(-50%, 0) scale(1);
  }
  to {
    transform: translate(-46%, 4vh) scale(1.14);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.82);
  }
}

@keyframes read {
  to {
    transform: translateY(-200px);
  }
}

@keyframes progress {
  from {
    width: 26px;
  }
  to {
    width: 62px;
  }
}