/*
 * Holding page of altersnetto.de until the launch (deploy/server/caddy/altersnetto.caddy).
 * The look of the prototype design/prototypes/auftritt (D5): coral band, plum ink, the
 * wordmark with the tilted pill, the yellow marker, Bricolage Grotesque + Figtree.
 * Values copied from app/tokens.css and app/auftritt.css; fonts self-hosted (OFL, licences
 * in fonts/). Light only, no scripts, no request to any other host.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 700 800;
  src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --coral: #ff5a43;
  --ink: #1d1233;
  --white: #fff;
  --sun: #ffd23f;
  --display: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --wrap: 1200px;
  --gut: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--coral);
  color: var(--ink);
  font: 400 18px/1.55 var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.page {
  width: min(100% - 2 * var(--gut), var(--wrap));
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.top { display: flex; align-items: center; min-height: 84px; }

/* The wordmark as in the app: first part plain, second part in the tilted ink pill. */
.logo {
  display: inline-flex;
  align-items: center;
  font: 800 2.4rem/1 var(--display);
  letter-spacing: -.03em;
}
.logo b {
  font-weight: 800;
  background: var(--ink);
  color: var(--white);
  padding: .2em .42em .26em;
  margin-left: .14em;
  border-radius: .5em;
  transform: rotate(-3deg);
}

.msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 120px;
}

h1 {
  margin: 0 0 30px;
  max-width: 11em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.mark {
  display: inline-block;
  background: var(--sun);
  padding: .02em .16em .1em;
  margin-left: -.1em;
  border-radius: .14em;
  transform: rotate(-2.2deg);
}

.lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 900px) {
  :root { --gut: 28px; }
}
@media (max-width: 560px) {
  :root { --gut: 16px; }
  .top { min-height: 72px; }
  .logo { font-size: 1.9rem; }
  .msg { padding: 24px 0 88px; }
  h1 { font-size: clamp(2.4rem, 11.6vw, 3.6rem); margin-bottom: 22px; }
}