/* lifecomesfirst.nl — one stylesheet for every page.
   The homepage values are taken one-for-one from Mark's design (bhn/website/index.html,
   inline styles). Desktop (860px) must stay identical to that design; everything that
   changes on a phone sits behind clamp() or the media query at the bottom.
   No box-sizing reset on purpose: the design is content-box (the phone frame is
   250px + 2 x 9px padding), and a reset would change its measurements. */

:root {
  --ground: #17120e;
  --ink: #f7f0e3;
  --ink-warm: #f9f2e6;
  --ink-light: #faf4e9;
  --soft: rgba(246, 238, 226, .78);
  --muted: rgba(246, 238, 226, .45);
  --gold: #f5dcae;
  --gold-hover: #fad68c;
  --gold-line: rgba(233, 193, 132, .45);

  /* 64px side padding at 860px, never under 24px on a phone (16px+ gutter). */
  --gutter: clamp(24px, 7.5vw, 64px);
  --space-top: clamp(72px, 11.2vw, 96px);
  --space-end: clamp(88px, 16.8vw, 144px);
  --gap: clamp(40px, 6.6vw, 56px);

  --display: clamp(30px, 8.4vw, 44px);
  --statement: clamp(24px, 6.4vw, 30px);
  --text: clamp(17px, 4.8vw, 19px);

  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); }
a { color: var(--gold); }
a:hover { color: var(--gold-hover); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

/* ── The page: 860px column on the dusk ground ─────────────────────────────── */

.page {
  max-width: 860px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 20% 4%, rgba(203, 180, 148, .5), transparent 60%),
    radial-gradient(90% 42% at 88% 20%, rgba(70, 68, 106, .62), transparent 66%),
    radial-gradient(100% 50% at 10% 46%, rgba(122, 86, 84, .5), transparent 62%),
    radial-gradient(120% 55% at 84% 72%, rgba(168, 114, 68, .42), transparent 60%),
    linear-gradient(180deg, #6d6360 0%, #5c5560 16%, #4b4557 36%, #5b4a52 54%, #6b5344 72%, #3a2c22 87%, #17120e 100%);
}

/* ── Night band at the top, with the header ───────────────────────────────── */

.top {
  position: relative;
  background: linear-gradient(180deg, #0f1017 0%, #0f1017 30%, rgba(15, 16, 23, .92) 46%, rgba(15, 16, 23, .72) 60%, rgba(15, 16, 23, .45) 72%, rgba(15, 16, 23, .22) 83%, rgba(15, 16, 23, .08) 92%, rgba(15, 16, 23, 0) 100%);
  margin-bottom: -130px;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 40px var(--gutter) 0;
}

.brand {
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--soft);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.hero-gap { height: 96px; }

.hero-title {
  padding: 0 var(--gutter);
  margin: 0 0 -82px;
  position: relative;
  top: -40px;
  text-align: center;
  font-family: Jost, sans-serif;
  font-weight: 200;
  font-size: clamp(46px, 12.6vw, 74px);
  line-height: 1.02;
  letter-spacing: .06em;
  color: var(--ink);
  text-shadow: 0 2px 40px rgba(20, 16, 12, .35);
}

/* ── Mono labels ──────────────────────────────────────────────────────────── */

.label {
  margin: 0;
  font: 300 11px 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--soft { color: var(--soft); }

/* ── Golden arcs (horizon lines) ──────────────────────────────────────────── */

.arc {
  position: relative;
  height: 340px;
  overflow: hidden;
  pointer-events: none;   /* decoration; on the inner pages it lies over the header's brand link */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
}
.arc__line {
  position: absolute;
  left: -46%;
  right: -46%;
  height: 700px;
  border-radius: 50%;
}

.arc--rise { margin: -40px 0 -150px; }
.arc--rise .arc__line {
  top: 140px;
  border-top: 2px solid rgba(250, 222, 172, .9);
  box-shadow: 0 -2px 12px rgba(252, 232, 190, .55), 0 -10px 60px rgba(238, 196, 132, .4), 0 -26px 130px rgba(230, 180, 120, .24), inset 0 10px 90px rgba(238, 196, 132, .14);
}

.arc--set { margin: -128px 0 -140px; }
.arc--set .arc__line {
  bottom: 140px;
  border-bottom: 2px solid rgba(250, 222, 172, .88);
  box-shadow: 0 2px 12px rgba(252, 232, 190, .5), 0 10px 60px rgba(238, 196, 132, .38), 0 26px 130px rgba(230, 180, 120, .22), inset 0 -10px 90px rgba(238, 196, 132, .13);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
  padding: 0 var(--gutter) var(--space-end);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap);
}
.section--open { padding-top: var(--space-top); }

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.stack--tight { gap: 16px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.display {
  margin: 0;
  max-width: 592px;
  font-family: Jost, sans-serif;
  font-weight: 200;
  font-size: var(--display);
  line-height: 1.2;
  letter-spacing: .012em;
  color: var(--ink);
  text-shadow: 0 2px 40px rgba(20, 16, 12, .35);
  text-wrap: pretty;
}
.display--ring {
  position: relative;
  text-align: center;
  color: var(--ink-warm);
  text-shadow: 0 2px 44px rgba(23, 18, 14, .5);
}
.display--close {
  letter-spacing: .015em;
  color: var(--ink-light);
  text-shadow: 0 2px 40px rgba(233, 193, 132, .2);
}

.statement {
  margin: 0;
  max-width: 552px;
  font-family: Jost, sans-serif;
  font-weight: 200;
  font-size: var(--statement);
  line-height: 1.34;
  letter-spacing: .012em;
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(20, 16, 12, .3);
  text-wrap: pretty;
}
.statement--plain { max-width: none; color: var(--ink-warm); text-shadow: none; }
.statement--wide { max-width: 592px; color: var(--ink-warm); text-shadow: none; }

.body {
  margin: 0;
  max-width: 552px;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: var(--text);
  line-height: 1.6;
  color: var(--soft);
  text-wrap: pretty;
}
.body--free { max-width: none; }
.body a { text-underline-offset: 4px; text-decoration-thickness: 1px; }

.list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: var(--text);
  line-height: 1.2;
  color: var(--soft);
}
.list--muted { color: var(--muted); }

.note {
  margin: 0;
  max-width: 552px;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.wordmark {
  margin: 0;
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: .42em;
  text-indent: .21em;
  color: var(--ink-warm);
}

/* ── Photo of the makers ──────────────────────────────────────────────────── */

.photo {
  position: relative;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 90px rgba(238, 196, 132, .16), 0 26px 70px rgba(23, 18, 14, .5), 0 4px 14px rgba(23, 18, 14, .28);
}
.photo__frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.photo__frame img { display: block; width: 100%; height: auto; }
.photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(23, 18, 14, .45), inset 0 0 0 1px rgba(246, 214, 158, .22);
}

/* Two voices side by side, each half of the row (as the design's 1fr 1fr grid).
   With one voice it keeps that half-width and sits in the middle. */
.voices {
  display: flex;
  justify-content: center;
  gap: 56px;
  width: 100%;
}
.voice {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc((100% - 56px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ── Golden rings ─────────────────────────────────────────────────────────── */

.ring-stage {
  /* One ring unit: 1px on desktop; on a narrow screen small enough that the
     440px ring fits inside the viewport with a 16px margin each side. */
  --u: min(1px, calc((100vw - 32px) / 440));
  position: relative;
  padding: 0 var(--gutter) var(--space-end);
  min-height: calc(480 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
}
.ring {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--space-end) / 2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring--glow {
  width: calc(480 * var(--u)); height: calc(480 * var(--u));
  background: radial-gradient(circle, rgba(240, 200, 140, .3) 0%, rgba(238, 196, 132, .12) 42%, transparent 70%);
}
.ring--outer {
  width: calc(440 * var(--u)); height: calc(440 * var(--u));
  border: 1px solid rgba(246, 214, 158, .38);
  box-shadow: 0 0 26px rgba(238, 196, 132, .2), inset 0 0 30px rgba(238, 196, 132, .08);
}
.ring--middle {
  width: calc(330 * var(--u)); height: calc(330 * var(--u));
  border: 1px solid rgba(249, 220, 170, .55);
  box-shadow: 0 0 30px rgba(240, 200, 140, .28), inset 0 0 34px rgba(238, 196, 132, .1);
}
.ring--inner {
  width: calc(224 * var(--u)); height: calc(224 * var(--u));
  border: 1.5px solid rgba(252, 230, 186, .75);
  box-shadow: 0 0 34px rgba(244, 208, 150, .4), inset 0 0 40px rgba(240, 200, 140, .14);
}

/* ── The app: phone and text ──────────────────────────────────────────────── */

.app-row {
  display: flex;
  align-items: center;
  gap: 56px;
  text-align: left;
}
.phone {
  flex: 0 0 250px;
  width: 250px;
  height: 520px;
  border-radius: 38px;
  background: #241c19;
  padding: 9px;
  box-shadow: 0 0 100px rgba(233, 193, 132, .18), 0 24px 60px rgba(15, 11, 9, .6);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: #2e2731;
}
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-copy { display: flex; flex-direction: column; gap: 32px; }

/* ── The App Store pill (a link once HERE is in the store) ────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 17px 34px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(233, 193, 132, .07);
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 19px;
  color: var(--gold);
  text-decoration: none;
  /* The design's arrow (17px, a fallback font) made the line 21px high. Without the
     arrow the line is 19px; this keeps the pill at the design's 57px either way. */
  min-height: 21px;
}
.pill__arrow { font-size: 17px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-foot {
  padding: 0 var(--gutter) 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font: 300 11px 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-foot__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-foot__nav li + li::before { content: "·"; content: "·" / ""; margin-right: 14px; color: var(--muted); }
.site-foot__nav a {
  color: rgba(246, 238, 226, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 238, 226, .18);
}
.site-foot__nav a:hover { color: var(--gold); border-bottom-color: var(--gold-line); }
.site-foot__nav .mail { text-transform: none; letter-spacing: .08em; }
.site-foot__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

/* ── Inner pages (privacy, terms, support, 404) ───────────────────────────── */

.top--inner { margin-bottom: -40px; padding-bottom: 120px; }
.arc--inner { margin: -150px 0 -96px; }

.inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-end);
}

/* Language picker: the mono row above a text. Hidden until the script has run,
   because its ?lang= links only work with JavaScript; <noscript> has its own row. */
.talen {
  margin: 0 0 32px;
  font: 300 11px 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  word-spacing: 6px;
  color: var(--muted);
}
.talen a { color: rgba(246, 238, 226, .62); text-decoration: none; }
.talen a:hover { color: var(--gold); }
.talen [aria-current] { color: var(--ink); }
html:not([data-lang]) .lang-switch,
html:not([data-lang]) .lang-block .talen { display: none; }

/* One block per language. English shows without JavaScript; the script sets
   data-lang on <html> from ?lang=, and without it a #nl/#it/#es anchor works. */
.lang-block { display: none; }
html:not([data-lang]) #en.lang-block { display: block; }
html[data-lang="en"] #en.lang-block,
html[data-lang="nl"] #nl.lang-block,
html[data-lang="it"] #it.lang-block,
html[data-lang="es"] #es.lang-block { display: block; }
html:not([data-lang]) .lang-block:target { display: block; }
html:not([data-lang]) .lang-blocks:has(.lang-block:target) #en.lang-block:not(:target) { display: none; }

/* Legal texts, copied verbatim from the app (scripts/sync-legal.py). Only their
   look is ours: class names (.muted, .lead, .foot, .placeholder) come from the app. */
.legal-text h1,
.inner-title {
  margin: 0 0 16px;
  font-family: Jost, sans-serif;
  font-weight: 200;
  font-size: var(--display);
  line-height: 1.2;
  letter-spacing: .012em;
  color: var(--ink);
  text-shadow: 0 2px 40px rgba(20, 16, 12, .35);
  text-wrap: pretty;
}
.legal-text .muted {
  margin: 0 0 48px;
  font: 300 11px 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-text h2,
.inner h2 {
  margin: 56px 0 16px;
  font: 400 11px 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245, 220, 174, .82);
}
.legal-text p,
.legal-text li,
.inner-text {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(17px, 4.6vw, 18px);
  line-height: 1.62;
  color: var(--soft);
  overflow-wrap: break-word;
}
.legal-text p, .inner-text { margin: 0 0 16px; }
.legal-text ul { margin: 0 0 16px; padding-left: 20px; }
.legal-text li { margin: 0 0 12px; }
.legal-text li::marker { color: rgba(245, 220, 174, .6); }
.legal-text strong { font-weight: 400; color: var(--ink); }
.legal-text em { font-style: italic; }
.legal-text a, .inner a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal-text .lead,
.inner-lead {
  font-size: clamp(19px, 5.2vw, 21px);
  line-height: 1.55;
  color: rgba(246, 238, 226, .9);
}
.legal-text hr {
  border: none;
  border-top: 1px solid rgba(246, 214, 158, .22);
  margin: 56px 0 24px;
}
.legal-text .foot { font-size: 15px; color: var(--muted); }

/* The terms are a placeholder until they are written: that must be impossible to miss. */
.legal-text .placeholder {
  margin: 8px 0 40px;
  padding: 20px 24px;
  border: 1.5px solid rgba(250, 222, 172, .9);
  border-radius: 14px;
  background: rgba(233, 193, 132, .12);
  box-shadow: 0 0 40px rgba(238, 196, 132, .22);
  font-family: Jost, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 5vw, 21px);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--gold);
}

/* Support: questions and answers. The question reads as a line of Jost, not a label. */
.inner-title + .inner-text { margin-top: 24px; }
.qa { margin: 0 0 8px; }
.qa h2 {
  margin: 48px 0 12px;
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 5.6vw, 24px);
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
}
.qa-end { margin-top: 56px; }
.path {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: .8em;
  letter-spacing: .01em;
  color: var(--ink);
}
.help-card {
  margin: 24px 0 0;
  padding: 8px 24px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  background: rgba(250, 214, 140, .06);
}
.help-line { margin: 16px 0; }
.help-line__name {
  display: block;
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--ink);
}
.help-line__name a { color: var(--gold); }
.help-line__meta {
  display: block;
  margin-top: 4px;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--soft);
}

/* 404 */
.lost { text-align: center; padding-top: 24px; }
.lost .display { margin: 24px auto 32px; }
.lost__back { margin: 0 auto; }

/* ── Tap targets ──────────────────────────────────────────────────────────── */

/* Small stand-alone links get a hit area of at least 44 x 44 px from an invisible
   pseudo-element, so nothing on the page moves. Links inside running text are left alone. */
.brand,
.site-foot__nav a,
.talen a,
.body > a,
.lost__back a,
.help-line a { position: relative; }
.brand::after,
.site-foot__nav a::after,
.talen a::after,
.body > a::after,
.lost__back a::after,
.help-line a::after {
  content: "";
  position: absolute;
  inset: -15px -14px;
}
.help-line__name a::after { inset: -6px -6px; }   /* 112: the line itself is 32px high */
.help-line a { white-space: nowrap; }   /* one piece, so its hit area is one rectangle */

/* ── Inner pages: a darker ground for long reading ────────────────────────── */

/* The privacy, terms, support and 404 pages are long, and the dusk gradient stretches with
   the page: its light upper zone then sits under thousands of pixels of text. A night layer
   over the same gradient keeps the look and brings text and labels to WCAG AA. The homepage
   keeps the design's ground. */
.page--inner {
  background:
    linear-gradient(rgba(15, 16, 23, .42), rgba(15, 16, 23, .42)),
    radial-gradient(120% 60% at 20% 4%, rgba(203, 180, 148, .5), transparent 60%),
    radial-gradient(90% 42% at 88% 20%, rgba(70, 68, 106, .62), transparent 66%),
    radial-gradient(100% 50% at 10% 46%, rgba(122, 86, 84, .5), transparent 62%),
    radial-gradient(120% 55% at 84% 72%, rgba(168, 114, 68, .42), transparent 60%),
    linear-gradient(180deg, #6d6360 0%, #5c5560 16%, #4b4557 36%, #5b4a52 54%, #6b5344 72%, #3a2c22 87%, #17120e 100%);
}
.page--inner .label,
.page--inner .talen,
.page--inner .legal-text .muted,
.page--inner .legal-text .foot { color: rgba(246, 238, 226, .8); }
.page--inner .talen a { color: rgba(246, 238, 226, .85); }
.page--inner .talen a:hover { color: var(--gold); }
.page--inner .talen [aria-current] { color: var(--ink); }
.page--inner .legal-text h2 { color: rgba(245, 220, 174, .92); }

/* 404: a short page. The main part takes the free height, so the footer sits at the dark
   bottom instead of halfway up the screen. In a flex column the header's and the arc's
   negative margins add up instead of collapsing; the arc's top margin makes up for that
   (-40 + -110 = the -150 of the other pages). */
.page--lost { display: flex; flex-direction: column; }
.page--lost > .arc--inner { margin-top: -110px; }
.page--lost > .lost { flex: 1 0 auto; margin: 0; max-width: none; }   /* its content is centred text */

/* ── Phone ────────────────────────────────────────────────────────────────── */

/* 720px rather than 640px: between them the text beside the phone got a column of about
   220px. From 768px up everything is as in the design. */
@media (max-width: 720px) {
  .voices { flex-direction: column; align-items: center; gap: 40px; }
  .voice { max-width: none; width: 100%; }

  .app-row { flex-direction: column; text-align: center; gap: 48px; }
  .app-copy { align-items: center; }
  .list { align-items: center; }

  .pill { padding: 16px 28px; font-size: 18px; }

  .site-foot__nav { row-gap: 30px; }   /* the enlarged tap areas of the two rows do not meet */
  .site-foot__mail { flex-basis: 100%; }
  .site-foot__nav .site-foot__mail::before { content: none; }
  .site-foot__row { flex-wrap: wrap; }
}