/* Araphos: binnenkort-pagina. Waarden uit 00_Resources/Araphos Design System (tokens/). */

:root {
  --chalk: #EBE8DF;
  --ink: #232A3B;
  --ink-2: #474D5C;
  --ink-3: #6B6F7A;
  --paper: #F5F4EF;
  --rule: #D9D8D0;
  --scarlet: #B01E32;

  --display: "Marcellus", "Optima", "Candara", serif;
  --text: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --greek: "GFS Didot", "Didot", "Times New Roman", serif;

  --thread-x: clamp(20px, 3vw, 44px);
  --gutter: clamp(56px, 10vw, 160px);
  --thread: 1.5px;
}

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

html { background: var(--paper); color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* De scharlaken draad langs de linkerrand */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vh, 56px) clamp(24px, 6vw, 96px) clamp(24px, 4vh, 40px) var(--gutter);
}
.page::before {
  content: "";
  position: absolute;
  left: var(--thread-x);
  top: 0;
  bottom: 0;
  width: var(--thread);
  background: var(--scarlet);
}

/* Een Ink-steek over de draad, bij de kop en de status */
.stitch { position: relative; }
.stitch::before {
  content: "";
  position: absolute;
  left: calc(var(--thread-x) - var(--gutter) - 8px);
  top: .55em;
  width: 17px;
  height: var(--thread);
  background: var(--ink);
}

/* Logo */
.lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.lockup:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 8px; }
.mark { width: 42px; height: 42px; flex: none; }
.lockup-text { display: flex; flex-direction: column; gap: 9px; }
.wordmark { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: .17em; color: var(--ink); }
.signature { font-family: var(--mono); font-size: 9.5px; line-height: 1; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-2); }

/* Hoofdblok */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 780px;
  padding: clamp(56px, 11vh, 128px) 0;
}
.eyebrow {
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.greek { font-family: var(--greek); font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--ink); }
h1 {
  margin: 0 0 36px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 8.2vw, 112px);
  line-height: 1.02;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.lead { margin: 0 0 12px; max-width: 34em; font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); text-wrap: pretty; }
.quiet { color: var(--ink-3); }
.status { margin: 44px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 15px; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* Voet */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 560px) {
  .wordmark { font-size: 22px; }
  .mark { width: 36px; height: 36px; }
  .signature { font-size: 8.5px; letter-spacing: .36em; }
}