/* Dugu.nl — "Het vierkant".
   Merkpalet: #1B1A49 primair, #F5F5F5 ondergrond, #00BA8F subtiel accent.
   De signatuur is de vierkante punt uit het woordmerk dugu.nl, uitvergroot. */

:root {
  --ground:      #f5f5f5;  /* merkkleur: lichtgrijze ondergrond          */
  --ground-2:    #e4f1ee;  /* zachte teal-waas, 8% #00BA8F in de grond   */
  --ink:         #1b1a49;  /* merkkleur: primair — 14.9:1 op de grond    */
  --ink-soft:    #55547a;  /* secundaire tekst  —  6.6:1 op de grond     */
  --accent:      #00ba8f;  /* merkkleur: alleen als vlak, nooit als tekst */
  --accent-hover:#00a87f;
  --accent-tekst:#00785c;  /* donkere variant, wél leesbaar — 5.1:1      */

  --maat: 34em;
  --marge: clamp(1.5rem, 5vw, 4.5rem);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: var(--ink); }

/* ---------- links ---------- */

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-tekst);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness .18s ease, color .18s ease;
}
a:hover { color: var(--accent-tekst); text-decoration-thickness: 0.16em; }

a:focus-visible, .skip:focus {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 10;
  padding: .75rem 1.1rem;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- raamwerk ---------- */

.page {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 9vw, 7.5rem);
  max-width: 76rem;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem) var(--marge) clamp(2rem, 5vw, 4rem);
}

/* De gap van .page werkt alleen tussen header/main/footer. De secties
   bínnen main hebben hun eigen ritme nodig, anders staan ze tegen elkaar. */
main {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

/* ---------- logo ---------- */

.logo { display: inline-block; text-decoration: none; }
.logo img {
  display: block;
  width: auto;
  height: clamp(1.9rem, 4.2vw, 2.6rem);
}
.logo:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

/* ---------- hero ---------- */

.hero { position: relative; isolation: isolate; }
.hero > :not(.grondvorm) { position: relative; z-index: 1; }

/* het merkteken zelf, uitvergroot als grondvlak: figuur en grond */
.grondvorm {
  position: absolute;
  z-index: 0;
  top: clamp(-6rem, -8vw, -1.5rem);
  right: calc(-1 * clamp(3rem, 11vw, 9rem));
  width: auto;
  height: clamp(17rem, 46vw, 34rem);
  fill: var(--ground-2);
  pointer-events: none;
}

h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

/* de signatuur: de vierkante punt uit het woordmerk */
.punt {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.14em;
  background: var(--ink);
  vertical-align: baseline;
}

.lead {
  max-width: var(--maat);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  font-size: clamp(1.0625rem, 0.6rem + 1.4vw, 1.3125rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
}

/* ---------- uitnodiging ---------- */

.uitnodiging {
  max-width: var(--maat);
  margin: clamp(1.15rem, 2vw, 1.6rem) 0 0;   /* één regel wit, geen sectie-afstand */
  font-size: clamp(1rem, 0.6rem + 1.1vw, 1.125rem);
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- contact ---------- */


/* het enige volvlakse groen: knopvlak met primaire tekst — 6.5:1 */
.cta {
  display: inline-block;
  padding: 0.8em 1.35em;
  background: var(--accent);
  color: var(--ink);
  font-size: clamp(1.125rem, 0.7rem + 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: background .18s ease;
}
.cta:hover { background: var(--accent-hover); color: var(--ink); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* tweede knop: omlijnd, zodat het groen de enige volvlakse kleur blijft.
   inset box-shadow i.p.v. border, dan blijven beide knoppen even hoog. */
.cta-tweede {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.cta-tweede:hover { background: var(--ink); color: var(--ground); }

/* ---------- voet ---------- */

footer { margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.colofon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.colofon .sep {
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-inline: 0.7em;
  background: var(--accent-tekst);
}

/* Het jaartal komt van nginx (SSI). Het scheidingsteken hangt aan het
   jaartal zelf, zodat er geen los vierkantje overblijft als SSI ooit
   uit staat — dan is de span leeg en verdwijnt hij helemaal. */
.jaar::before {
  content: "";
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-inline: 0.7em;
  background: var(--accent-tekst);
}
.jaar:empty { display: none; }

/* ---------- 404 ---------- */

.pagina-mist h1 { max-width: 16ch; font-size: clamp(2.25rem, 7vw, 4.5rem); }
.pagina-mist p  { max-width: var(--maat); margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: 1.0625rem; }
.terug { display: inline-block; margin-top: clamp(1.75rem, 3.5vw, 2.25rem); font-size: 1.125rem; font-weight: 600; }

/* ---------- beweging ---------- */

@media (prefers-reduced-motion: no-preference) {
  .page > * { animation: opkomst .85s cubic-bezier(.22,.68,.3,1) backwards; }
  .page > :nth-child(1) { animation-delay: .04s; }
  .page > :nth-child(2) { animation-delay: .12s; }
  .page > :nth-child(3) { animation-delay: .2s;  }
}

@keyframes opkomst {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}