/* polychrome booking pages. One dark look, colour only in the mark.
   Tokens, sizes and motion follow the approved round-2 prototype
   (_agent/entwuerfe/runde-2/polychrome-prototype.html). */

/* ---------- Fonts (self-hosted, no requests to Google) ---------- */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300;
  /* The wordmark fades in anyway, so wait for the real face instead of flashing a fallback. */
  font-display: block;
  src: url("/fonts/unbounded-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Loaded only when --wordmark points at it. size-adjust matches its width to Unbounded,
   so the lockup keeps its proportions without retuning the sizes below. */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  size-adjust: 120%;
  src: url("/fonts/syne-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Names typed into the form can need more than basic Latin. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #050507;
  --fg: #EDEDF0;
  --muted: #8B8B96;
  --hair: rgba(237, 237, 240, 0.12);
  --hair-strong: rgba(237, 237, 240, 0.24);
  --hair-hover: rgba(237, 237, 240, 0.48);
  --lift: rgba(237, 237, 240, 0.04);

  /* Wordmark font, one line. For Syne 500 change it to var(--wordmark-syne). */
  --wordmark: var(--wordmark-unbounded);
  --wordmark-unbounded: 300 1em/1.1 "Unbounded", "Avenir Next", Verdana, "Century Gothic", ui-sans-serif, sans-serif;
  --wordmark-syne: 500 1em/1.1 "Syne", "Avenir Next", Futura, "Century Gothic", ui-sans-serif, sans-serif;

  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --label-track: 0.18em;
  --btn-track: 0.24em;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--hair-strong); color: var(--fg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Page frame ---------- */
/* Fills the screen, keeps clear of notches and the home bar, and is the size
   reference for the lockup (cqw), as the phone screen was in the prototype. */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top, 0px)
    max(16px, env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    max(16px, env(safe-area-inset-left, 0px));
  container-type: inline-size;
  /* Mark and name are 70 % of the prototype's, with a little more air between them (Johannes, 2026-10-23). */
  --mark-h: clamp(63px, 19.6vw, 102px);
  --wm-size: clamp(19px, 5.9vw, 31.5px);
  --lock-gap: clamp(22px, 7vw, 38px);
  --line-gap: clamp(32px, 10vw, 52px);
}
@supports (container-type: inline-size) {
  .page {
    --mark-h: clamp(63px, 21.7cqw, 102px);
    --wm-size: clamp(19px, 6.5cqw, 31.5px);
    --lock-gap: clamp(22px, 7.8cqw, 38px);
    --line-gap: clamp(32px, 11cqw, 52px);
  }
}

/* Every screen rises in once: 600 ms, the prototype's easing. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}
.view {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-inline: 12px;
  animation: rise 600ms var(--ease) 120ms backwards;
  transition: opacity 320ms var(--ease);
}
.view.is-leaving { opacity: 0; }

/* Centred screens sit a little above the middle; the spacer shrinks first when space is short. */
.view--center { text-align: center; }
.view--center::after { content: ""; flex: 0 1 56px; min-height: 0; }

/* ---------- Landing ---------- */
.landing {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.mark {
  display: block;
  height: var(--mark-h);
  width: calc(var(--mark-h) * 92 / 68);
  overflow: visible;
}
/* Opening, once per page load: the ring lights up from its bright end, then the light rolls
   over the crescent from the rim inward. Both animate masks inside the inline SVG, and their
   rest state shows the whole mark (reduced motion, no animation support). After this only the
   SMIL drift and ring sheen keep moving. */
.mark .rise-shade {
  transform: translateX(-14px);
  animation: mark-shade 2.8s var(--expo) 0.15s both;
}
.mark .rise-disc {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  animation: mark-disc 2.6s var(--expo) 0.75s both;
}
@keyframes mark-shade { from { transform: translateX(112px); } }
@keyframes mark-disc { from { transform: scale(1); } }
.wordmark {
  margin: var(--lock-gap) 0 0;
  font: var(--wordmark);
  font-size: var(--wm-size);
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
/* Same distance as the prototype, where an invisible hairline sat between name and button.
   The button is a bit larger than the prototype's (Johannes, 2026-10-23). */
.landing .btn {
  margin-top: calc(2 * var(--line-gap) + 1px);
  min-width: 172px;
  height: 56px;
  padding-inline: 44px calc(44px - var(--btn-track));
  font-size: 13px;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 48px;
  margin: 0;
  padding-inline: 36px calc(36px - var(--btn-track));
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--btn-track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 400ms var(--ease), background-color 400ms var(--ease), color 400ms var(--ease), transform 200ms var(--ease);
}
.btn:hover { border-color: var(--hair-hover); background-color: var(--lift); }
.btn:active { transform: scale(0.98); }
.btn:disabled { color: var(--muted); border-color: var(--hair); cursor: default; transform: none; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 0 10px;
  color: var(--muted);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 400ms var(--ease);
}
.back:hover { color: var(--fg); }
.back svg { flex: none; margin-top: -1px; }

/* ---------- Form ---------- */
.view--form { padding-block: 6px 20px; }
.form-top,
.form-body {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.form-top { display: flex; align-items: center; }
.form-space { flex: 0 1 11vh; flex-basis: 11dvh; min-height: 4px; }
.form-body {
  margin-bottom: auto;
  padding-block: 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.form-title {
  margin: 0;
  font: var(--wordmark);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.inquiry { display: flex; flex-direction: column; gap: 28px; position: relative; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}
.field-opt { opacity: 0.6; letter-spacing: 0.12em; }
.input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  /* 16 px keeps iOS from zooming into the field. */
  font: 400 16px/1.45 var(--font-body);
  caret-color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 0.7; }
.input:hover { border-bottom-color: var(--hair-hover); }
.input:focus { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
textarea.input { resize: none; min-height: 84px; max-height: 180px; overflow-y: auto; }
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
  caret-color: var(--fg);
}
/* Errors stay monochrome: a dashed line and a plain sentence. */
.field.has-error .input { border-bottom-color: var(--fg); border-bottom-style: dashed; }
.field.has-error .input:focus { border-bottom-style: solid; }
.field-error,
.problem { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fg); }
.field-error { margin-top: 2px; }
/* Invisible unless Cloudflare needs a click; then it shows its own dark widget. */
.cf-turnstile:empty { display: none; }
.cf-turnstile { margin-block: -14px; }
.btn--send { width: 100%; margin-top: 6px; }

/* ---------- Sent and not found ---------- */
.message {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 30ch;
}
.view--center:focus { outline: none; }
.message-line { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.5; text-wrap: balance; }

/* ---------- Moving between pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}