/* newro.nl - de stip.

   In het woordmerk is het oranje één stip van 24 px. Hier is die losgemaakt en
   op paginamaat gezet: een vermiljoen cirkel die rechtsonder over de rand
   loopt. Het is het enige oranje vlak, het ligt nergens onder tekst, en het is
   geen achtergrond - het is de vorm waar de rest zich naar voegt. Daartegenover
   staat alles streng: strak links uitgelijnd en velden met een echt kader.
   Eén ronde vorm tegen een rechthoekig rooster.

   De letter vertelt wie er spreekt. Alles wat de site zegt - de zin, de labels,
   de knop, de meldingen - staat in de monospace van het woordmerk. Alles wat de
   bezoeker schrijft staat in de schreefletter. */

/* ---------------------------------------------------------------- letters */

@font-face {
  font-family: "Plex Mono";
  src: url("letters/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("letters/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("letters/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ palet */

:root {
  --vermiljoen: #FF5A36;
  --vermiljoen-diep: #F04E2B;   /* zweefstand; dieper mag niet, dan zakt het
                                   opschrift van de knop onder 4,5 */
  --inkt-donker: #1B1F2E;
  --inkt-licht: #EDEEF2;

  --grond: #FFFFFF;
  --inkt: var(--inkt-donker);
  --gedempt: #5F6676;           /* 5,76 op wit */
  --lijn: #767D8D;              /* 4,13 op wit, 3,97 op donker: één token */

  /* De maat van de stip staat hier en niet op het blad: de laag die hem
     afsnijdt is een broer van het blad, geen kind. */
  --maat: clamp(9rem, 26vw, 22rem);

  --logo-dag: block;
  --logo-nacht: none;

  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --schreef: "Newsreader", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grond: var(--inkt-donker);
    --inkt: var(--inkt-licht);
    --gedempt: #9AA0AE;         /* 6,25 op donker; op wit haalt hij 2,62 en
                                   mag hij nergens voor */
    --logo-dag: none;
    --logo-nacht: block;
    color-scheme: dark;
  }
}

/* Alleen de beoordelingspagina zet een stand vast; de site volgt het systeem. */
:root[data-stand="dag"] {
  --grond: #FFFFFF;
  --inkt: var(--inkt-donker);
  --gedempt: #5F6676;
  --logo-dag: block;
  --logo-nacht: none;
  color-scheme: light;
}

:root[data-stand="nacht"] {
  --grond: var(--inkt-donker);
  --inkt: var(--inkt-licht);
  --gedempt: #9AA0AE;
  --logo-dag: none;
  --logo-nacht: block;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ basis */

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

html { background: var(--grond); }

body {
  position: relative;
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--schreef);
}

button,
input,
textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ stip */

/* Deze laag is zo breed als het scherm en zo hoog als de pagina; clip snijdt
   de stip af bij de rand zonder een schuifbalk te maken. */
.rand {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}

.stip {
  position: absolute;
  z-index: 0;
  right: calc(var(--maat) * -0.24);
  bottom: calc(var(--maat) * -0.26);
  width: var(--maat);
  height: var(--maat);
  border-radius: 50%;
  background: var(--vermiljoen);
  pointer-events: none;
}

/* ------------------------------------------------------------------ blad */

.blad {
  --pad-zij: clamp(1.25rem, 5vw, 4rem);
  --pad-boven: clamp(2.5rem, 7vh, 5rem);

  position: relative;
  z-index: 1;
  min-height: 100svh;
  max-width: 74rem;
  margin-inline: auto;

  /* Smal scherm: ruimte onder de inhoud reserveren, want daar staat de stip.
     0,74 van de maat is precies het deel dat binnen de rand valt. */
  padding: var(--pad-boven) var(--pad-zij) calc(var(--maat) * 0.74 + 1.5rem);

  /* Twee rijen: de inhoud krijgt alle vrije ruimte en staat daarin gecentreerd,
     de voettekst zit onderaan. Die voettekst valt binnen de onderrand die voor
     de stip is gereserveerd, en ligt er dus altijd boven in plaats van erop. */
  display: grid;
  grid-template-rows: 1fr auto;
}

.inhoud {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: clamp(1.75rem, 4.5vh, 3rem);
}

/* Breed scherm: daar is horizontaal plaats zat, dus wijkt de inhoud opzij in
   plaats van omhoog. */
@media (min-width: 62rem) {
  .blad {
    padding-right: calc(var(--maat) * 0.82 + 2rem);
    padding-bottom: var(--pad-boven);
  }
}

/* -------------------------------------------------------------- voettekst */

/* De site die spreekt, dus monospace. Geen vermiljoen in de naam zoals op de
   klantsites: #FF5A36 haalt op wit maar 3,10 en dat is te weinig voor tekst van
   deze grootte. Geen haarlijn erboven ook - de ruimte doet dat werk al. */
.voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--gedempt);
}

/* ------------------------------------------------------------------ merk */

.merk { margin: 0; line-height: 0; }

.merk__beeld {
  width: clamp(9rem, 22vw, 18rem);
  height: auto;
}

.merk__beeld--dag { display: var(--logo-dag); }
.merk__beeld--nacht { display: var(--logo-nacht); }

/* ------------------------------------------------------------------- zin */

.zin {
  margin: 0;
  max-width: 22ch;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.375rem, 3.2vw, 3rem);
  line-height: 1.25;
  /* Een monospace heeft één eigenschap: een vaste letterbreedte. Niet
     kapotspatiëren; hooguit een haartje strakker op grote maat. */
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--inkt);
}

/* -------------------------------------------------------------- formulier */

.bericht {
  width: min(100%, 40rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2.2vh, 1.25rem) clamp(0.85rem, 1.8vw, 1.25rem);
}

.rij--heel,
.afsluiting { grid-column: 1 / -1; }

/* Wat de site zegt: monospace. */
.rij label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--gedempt);
}

/* Wat de bezoeker schrijft: schreefletter, in een echt kader. Dat rooster is
   de tegenhanger van die ene ronde vorm. */
.rij input,
.rij textarea {
  display: block;
  width: 100%;
  border: 2px solid var(--lijn);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  background: transparent;
  color: var(--inkt);
  font-family: var(--schreef);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.35;
  caret-color: var(--vermiljoen);
  outline: none;
  transition: border-color 120ms ease;
}

.rij textarea {
  min-height: clamp(4.5rem, 11vh, 7rem);
  resize: vertical;
}

/* Focus kleurt het kader vermiljoen en zet er een ring omheen: 3,10 op wit en
   5,28 op donker, dus in beide standen boven de 3,0 die daarvoor geldt. */
.rij input:focus-visible,
.rij textarea:focus-visible {
  border-color: var(--vermiljoen);
  outline: 2px solid var(--vermiljoen);
  outline-offset: 3px;
}

/* Een fout maakt het kader donkerblauw en dik, met een melding eronder. Andere
   kleur én andere dikte dan focus, dus de twee zijn niet te verwarren. */
.rij--fout input,
.rij--fout textarea {
  border-color: var(--inkt);
  border-width: 3px;
}

/* De browser zet bij automatisch invullen zijn eigen achtergrond neer; die
   overschrijft het kader en de kleurstand. Dit houdt het veld bij het ontwerp. */
.rij input:-webkit-autofill,
.rij input:-webkit-autofill:hover,
.rij input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--inkt);
  -webkit-box-shadow: 0 0 0 100px var(--grond) inset;
  caret-color: var(--vermiljoen);
}

.melding {
  display: none;
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--inkt);
}

.rij--fout .melding { display: block; }

/* ------------------------------------------------------------- afsluiting */

.afsluiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-top: clamp(0.25rem, 1.2vh, 0.75rem);
}

/* Het enige oranje ding naast de stip. Donkerblauw opschrift, geen wit: wit
   haalt 3,10 en dat is te weinig voor een opschrift. */
.knop {
  border: 2px solid var(--vermiljoen);
  border-radius: 0;
  padding: 0.85rem 1.75rem;
  background: var(--vermiljoen);
  color: var(--inkt-donker);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.knop:hover:not(:disabled) {
  background: var(--vermiljoen-diep);
  border-color: var(--vermiljoen-diep);
}

/* Op het oranje vlak is een oranje ring onzichtbaar: daar is de ring de
   ándere kleur. */
.knop:focus-visible {
  outline: 2px solid var(--inkt-donker);
  outline-offset: 4px;
}

.knop:active:not(:disabled) { transform: translateY(1px); }
.knop:disabled { cursor: progress; }

.status {
  margin: 0;
  max-width: 30ch;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--inkt);
}

/* --------------------------------------------------------------- lokvink */

.lokvink {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ smal */

/* Onder de breedte waarop de inhoud opzij wijkt voor de stip, stond de
   voettekst boven de gereserveerde onderrand en dus een eind van de onderkant
   af. Hij gaat daarom uit de stroom: linksonder in de hoek, náást de stip.

   Er dwars doorheen kan niet. Op het oranje is #1B1F2E de enige leesbare inkt
   (5,28), maar die verdwijnt in de donkere stand op de grond; en het gedempte
   grijs haalt op oranje 1,18 overdag en 1,85 's nachts. Eén regel over twee
   ondergronden heeft geen kleur die allebei bedient. */
@media (max-width: 62rem) {
  .voet {
    position: absolute;
    left: var(--pad-zij);
    right: auto;
    bottom: var(--pad-zij);
    margin-top: 0;
    justify-content: flex-start;
    gap: 0.35rem 1.5rem;
  }
}

@media (max-width: 34rem) {
  .bericht { grid-template-columns: 1fr; }
  .rij--half { grid-column: 1 / -1; }
  .afsluiting { flex-direction: column; align-items: stretch; }
  .knop { width: 100%; }
  .status { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}