@font-face { font-family: "Garamond"; src: url("fonts/garamond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 400 560; font-style: normal; font-display: swap; }

:root {
  --ink: #efe9df;
  --warm: #f0b98a;
  --night: #07090c;
  --dim: color-mix(in srgb, var(--ink) 64%, transparent);
  --faint: color-mix(in srgb, var(--ink) 44%, transparent);
  --rule: color-mix(in srgb, var(--ink) 30%, transparent);
  --pad: clamp(22px, 5.2vw, 84px);
  --serif: "Garamond", "EB Garamond", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

#field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.ready #field { opacity: 1; }
.no-gl body { background: var(--night) url("assets/still.jpg") center / cover no-repeat; }
@media (max-aspect-ratio: 19/20) { .no-gl body { background-image: url("assets/still-staand.jpg"); } }
.no-gl #field { display: none; }

main {
  position: fixed; inset: 0;
  padding: var(--pad);
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}

/* One text version at a time. */
.invite { display: none; margin-bottom: auto; margin-top: auto; max-width: 34rem; transform: translateY(4vh); }
[data-tekst="datum"] .t-datum, [data-tekst="brief"] .t-brief, [data-tekst="naam"] .t-naam { display: block; }
.invite > * { opacity: 0; transform: translateY(8px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ready .invite > *, .no-gl .invite > * { opacity: 1; transform: none; }
.invite > :nth-child(1) { transition-delay: .25s; }
.invite > :nth-child(2) { transition-delay: .40s; }
.invite > :nth-child(3) { transition-delay: .60s; }
.invite > :nth-child(4) { transition-delay: .80s; }
.invite > :nth-child(5) { transition-delay: 1.0s; }
.invite > :nth-child(6) { transition-delay: 1.15s; }

p, h1 { margin: 0; }
h1 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: -0.012em;
}
.when { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.when .sep { color: var(--faint); margin: 0 0.3em; }
.word { font-family: var(--serif); font-style: italic; font-size: 1.42rem; line-height: 1.3; }
.sign { font-size: 0.9rem; color: var(--dim); margin-top: 0.35em; }
.act { margin-top: 1.5em; }
.act a {
  pointer-events: auto;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.62em 1.05em 0.66em;
  border: 1px solid var(--rule);
  display: inline-block;
  transition: border-color .25s ease, color .25s ease;
}
.act a:hover, .act a:focus-visible { border-color: var(--warm); color: var(--warm); outline: none; }

/* "datum": one sentence in three sizes. The date is what a guest has to remember. */
.t-datum .lead { font-family: var(--serif); font-size: 1.62rem; line-height: 1.2; }
.t-datum h1 { font-size: clamp(3.3rem, 6.4vw, 6.4rem); margin: 0.10em 0 0.26em -0.045em; font-variant-numeric: lining-nums; }
.t-datum h1 .yr { font-size: 0.36em; letter-spacing: 0.02em; color: var(--dim); margin-left: 0.15em; }
.t-datum .word { margin-top: 1.5em; }

/* "brief": the invitation as a short letter; the date and hour carry the weight. */
.t-brief { max-width: 31rem; }
.t-brief .letter { font-family: var(--serif); font-size: clamp(1.9rem, 2.75vw, 2.7rem); line-height: 1.2; letter-spacing: -0.006em; color: var(--dim); text-wrap: balance; }
.t-brief .letter b { font-weight: 400; color: var(--ink); }
.t-brief .sign { margin-top: 1.5em; font-size: 0.95rem; }

/* "naam": version 1. */
.t-naam .kind { font-size: 0.9rem; letter-spacing: 0.01em; color: var(--dim); }
.t-naam h1 { font-size: clamp(2.7rem, 4.9vw, 4.9rem); margin: 0.38em 0 0.42em -0.04em; }
.t-naam .word { margin-top: 1.5em; }

/* What the thesis is about, what the picture is, and the title of the book. */
.about { max-width: 29rem; font-size: 0.78rem; line-height: 1.55; opacity: 0; transition: opacity 1.6s ease 1.6s; }
.ready .about, .no-gl .about { opacity: 1; }
.about .subject { color: var(--dim); font-size: 0.86rem; }
.about .note { color: var(--faint); margin-top: 0.45em; }
.about .title { color: var(--faint); font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.3; margin-top: 0.6em; }
[data-tekst="naam"] .about .subject, [data-tekst="naam"] .about .title { display: none; }
.coarse { display: none; }
@media (pointer: coarse) { .coarse { display: inline; } .fine { display: none; } }

/* Upright screens: the figure stands above, the words below. */
@media (max-aspect-ratio: 19/20) {
  body { font-size: 14.5px; }
  main { padding: 22px 24px max(20px, env(safe-area-inset-bottom)); }
  .invite { margin: 0 0 1.3rem; transform: none; max-width: none; }
  .t-datum .lead { font-size: 1.36rem; }
  .t-datum h1 { font-size: clamp(2.9rem, 14.2vw, 4.6rem); margin: 0.06em 0 0.22em -0.04em; }
  .t-datum .word, .t-naam .word { font-size: 1.3rem; margin-top: 0.9em; }
  .t-brief .letter { font-size: clamp(1.62rem, 7.4vw, 2.3rem); }
  .t-brief .sign { margin-top: 1.0em; }
  .t-naam h1 { font-size: clamp(2.5rem, 11.2vw, 3.6rem); margin: 0.3em 0 0.36em -0.03em; }
  .act { margin-top: 1.1em; }
  .about { font-size: 0.72rem; max-width: 24rem; }
  .about .note, .about .title { display: none; }
  [data-tekst="naam"] .about .note { display: block; }
}
@media (max-aspect-ratio: 19/20) and (max-height: 700px) {
  .about { display: none; }
  .t-datum .word, .t-naam .word { margin-top: 0.7em; }
}
/* Large upright screens. */
@media (max-aspect-ratio: 19/20) and (min-width: 700px) {
  body { font-size: 18px; }
  main { padding: 48px 52px max(44px, env(safe-area-inset-bottom)); }
  .about .note, .about .title { display: block; }
}
/* Low, wide screens. */
@media (min-aspect-ratio: 19/20) and (max-height: 560px) {
  .t-datum h1 { font-size: clamp(2.6rem, 12vh, 4rem); }
  .t-naam h1 { font-size: clamp(2.2rem, 9vh, 3.4rem); }
  .t-brief .letter { font-size: clamp(1.4rem, 5.6vh, 2rem); }
  .word { font-size: 1.2rem; }
  .t-datum .word, .t-naam .word { margin-top: 0.8em; }
  .act { margin-top: 0.9em; }
  .about { display: none; }
}
@media (min-aspect-ratio: 19/20) and (max-height: 760px) {
  .about .title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #field, .invite > *, .about { transition-duration: .01s; transition-delay: 0s; }
}

/* Frame-by-frame export: no fades. */
.capture #field, .capture .invite > *, .capture .about { transition: none; opacity: 1; transform: none; }
.capture.clean .about, .capture.clean .act { display: none; }
.capture.bare main { display: none; }