/* studio nullzweieins — coming soon.
   Layout from the Webflow page; colours, type and controls from the website's
   tokens (nullzweieins-website/styles/tokens). Only the tokens used here are copied. */

/* Archivo, self-hosted (was Google Fonts): one variable file, latin subset, weights 100–900 */
@font-face { font-family: Archivo; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Protokoll; src: url("fonts/protokoll.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Protokoll; src: url("fonts/protokoll_medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Protokoll; src: url("fonts/protokoll-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --gray-0: #FFFFFF;
  --gray-1: #F5F7F9;
  --gray-2: #E4E4E4;
  --gray-4: #AFAFAF;
  --gray-5: #616161;
  --gray-6: #000000;

  --bg: var(--gray-0);
  --surface-1: var(--gray-1);
  --surface-inverse: var(--gray-6);
  --text-body: var(--gray-6);
  --text-meta: var(--gray-5);
  --text-placeholder: var(--gray-4);
  --text-inverse: var(--gray-0);
  --state-success: #43DA6B;
  /* Light green: the site's success colour, mixed 20% into white. Not a site token itself. */
  --success-tint: color-mix(in srgb, var(--state-success) 20%, var(--gray-0));
  --border-solid: 1px solid var(--gray-6);
  --rule-line: 0.5px solid var(--gray-2);

  --font-core: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-brand: "Protokoll", "Archivo", Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --size-body: 16px;
  --size-small: 14px;
  --size-micro: 12px;
  --lh-body: 22px;
  --tracking-wide: 0.04em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-32: 32px;

  --page-x: clamp(20px, 3.4vw, 132px);
  --section-y: clamp(48px, 6vw, 96px);

  --duration-fast: 120ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font: var(--weight-regular) var(--size-body) / var(--lh-body) var(--font-core);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-standard); }
a:hover { opacity: 0.6; }
img { display: block; }

/* Left: fixed text column */
.intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100svh;
  padding: var(--space-32) var(--page-x);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--section-y);
  background: var(--bg);
}

.intro-top {
  display: flex;
  flex-direction: column;
  gap: var(--section-y);
}

/* The site's logo: Protokoll bold, set flat */
.studio-name {
  margin: 0;
  font: var(--weight-bold) 18px / 100% var(--font-brand);
}

.studio-name br { display: none; }

/* The home page's blurb */
.statement {
  max-width: 34ch;
  margin-bottom: 40px;
  font: var(--weight-regular) 32px / 40px var(--font-core);
  text-wrap: pretty;
}

.launch-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 520px;
}

.launch-text {
  max-width: 440px;
  color: var(--text-meta);
  text-wrap: pretty;
}

/* The site footer's newsletter field */
.newsletter-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 347px;
}

.newsletter-email,
.newsletter-button {
  height: 40px;
  border: var(--border-solid);
  border-radius: 1px;
  font: var(--weight-semibold) var(--size-micro) / 100% var(--font-core);
  letter-spacing: var(--tracking-wide);
  appearance: none;
}

.newsletter-email {
  flex-grow: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-14);
  background: var(--bg);
  color: var(--text-body);
}

.newsletter-email::placeholder { color: var(--text-placeholder); }

.newsletter-button {
  width: 88px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.newsletter-button:hover { opacity: 0.85; }

.newsletter-email:focus-visible,
.newsletter-button:focus-visible { outline: 2px solid var(--gray-6); outline-offset: 2px; }

.newsletter-form[hidden] { display: none; }

/* Sign-up answers, in place of the form */
.newsletter-form {
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}

.newsletter-form.is-leaving { opacity: 0; transform: translateY(-6px); }

.newsletter-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 520px; /* 1.5 × the form's 347px */
  padding: 1.5rem;
  border-radius: 1px;
  background: var(--success-tint);
  font-weight: var(--weight-medium);
  animation: newsletter-box-in 520ms var(--ease-standard) both;
}

/* The three lines follow the box in, one after another */
.newsletter-done > div { animation: newsletter-line-in 520ms var(--ease-standard) both; }
.newsletter-done > div:nth-child(1) { animation-delay: 120ms; }
.newsletter-done > div:nth-child(2) { animation-delay: 200ms; }

@keyframes newsletter-box-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@keyframes newsletter-line-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-form,
  .newsletter-done,
  .newsletter-done > div { transition: none; animation: none; }
}
.newsletter-error { max-width: 347px; margin-top: var(--space-12); color: var(--text-meta); }

.newsletter-done[hidden],
.newsletter-error[hidden] { display: none; }

.newsletter-button:disabled { opacity: 0.5; cursor: default; }

.back-link {
  align-self: flex-start;
  font-size: var(--size-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.intro-bottom {
  padding-top: 20px;
  border-top: var(--rule-line);
}

.contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14) var(--space-32);
}

/* The site footer's contact lines */
.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--weight-medium) var(--size-body) / 100% var(--font-brand);
}

.contact-link svg { flex: none; width: 24px; height: 24px; }

/* Right: photo column */
.photos {
  width: 50vw;
  margin-left: 50vw;
  background: var(--surface-1);
}

.photos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Impressum / Datenschutz links — the site footer's legal row */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
  font: var(--weight-regular) var(--size-micro) / 13px var(--font-core);
  color: var(--text-meta);
}

/* Legal pages: one reading column */
.legal {
  max-width: calc(720px + 2 * var(--page-x));
  padding: var(--space-32) var(--page-x) var(--section-y);
}

.legal .studio-name { display: inline-block; margin-bottom: var(--section-y); }

.legal h1 { margin: 0 0 var(--space-32); font: var(--weight-medium) 24px / 32px var(--font-core); }
.legal h2 { margin: 48px 0 var(--space-12); font: var(--weight-medium) var(--size-body) / var(--lh-body) var(--font-core); }
.legal h3,
.legal h4 { margin: var(--space-32) 0 var(--space-8); font: var(--weight-medium) var(--size-small) / var(--lh-body) var(--font-core); }
.legal p,
.legal ul { margin: 0 0 var(--space-12); font-size: var(--size-small); overflow-wrap: anywhere; }
.legal ul { padding-left: 1.2em; }
.legal p a { text-decoration: underline; }

/* Sample data still to be replaced — impossible to miss on purpose */
mark { background: #FFE500; color: var(--text-body); }

.legal-source { margin-top: var(--space-32); color: var(--text-meta); }

/* Confirmation page (after the opt-in email): photo fills the screen,
   logo and legal links sit on it, the green banner centred, 22% of the screen height above the bottom */
.confirm {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 100svh;
  /* 22svh ≈ 200px on a 900px-tall laptop screen, and scales with the screen */
  padding: 88px var(--page-x) 22svh;
}

.confirm-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-1);
}

/* Everything else sits above the photo */
.confirm > :not(.confirm-photo) { z-index: 1; }

.confirm .studio-name {
  position: absolute;
  top: var(--space-32);
  left: var(--page-x);
}

.confirm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  max-width: 520px;
  padding: 1.5rem;
  /* The green at 60%, so the photo shows through; the text stays solid */
  background: color-mix(in srgb, var(--success-tint) 60%, transparent);
  animation: newsletter-box-in 520ms var(--ease-standard) both;
}

.confirm-title { margin: 0; font: var(--weight-medium) 24px / 32px var(--font-core); }
.confirm-text { color: var(--text-body); }
.confirm-card .back-link { margin-top: var(--space-8); }

.confirm .legal-links {
  position: absolute;
  left: var(--page-x);
  bottom: var(--space-32);
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .confirm-card { animation: none; }
}

/* md (900px): the site's one mobile/desktop switch. Words on top, photos below. */
@media (max-width: 899px) {
  .intro {
    position: relative;
    width: 100%;
    height: auto;
    gap: 40px;
    padding-bottom: 40px;
  }
  .intro-top { gap: 40px; }
  .newsletter-form { max-width: none; }
  .photos { width: 100%; margin-left: 0; }
  .contact-list { flex-direction: column; }
  /* Mobile confirmation: banner smaller, 96px above the bottom;
     the legal links move up beside the logo so the banner doesn't cover them */
  .confirm { place-items: end center; padding: 88px var(--page-x) 96px; }
  .confirm-card { gap: var(--space-8); padding: 1.25rem; }
  .confirm-title { font-size: 20px; line-height: 26px; }
  .confirm-text { font-size: var(--size-small); line-height: 20px; }
  .confirm-card .back-link { margin-top: var(--space-4); }
  .confirm .legal-links { top: var(--space-32); right: var(--page-x); bottom: auto; left: auto; flex-direction: column; align-items: flex-end; gap: var(--space-4); }

  /* Mobile: statement and newsletter info at the same size, both black */
  .statement { font-size: 1rem; line-height: var(--lh-body); }
  .launch-text { font-size: 1rem; line-height: var(--lh-body); color: var(--text-body); }
}