/* Koffie met Thijs, brief-layout bovenop styles.css (tokens). */

/* Op html én body: overflow op body alleen rekt de viewport alsnog op
   (de kring-SVG steekt bewust buiten de kolom). */
html { overflow-x: hidden; }
.koffie-brief { overflow-x: hidden; }

.brief { max-width: 620px; margin: 0 auto; padding: 52px 24px 44px; position: relative; }
.brief__kring { position: absolute; top: -70px; right: -110px; width: 300px; height: 300px;
  pointer-events: none; opacity: 0.5; }
.brief .eyebrow { color: var(--dmt-amber-600); }
.brief h1 { font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: clamp(30px, 6vw, 40px); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 14px 0 22px; }
.brief p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); margin: 0 0 18px; }

.brief__vliegwiel { margin: 26px 0; }
.brief__vliegwiel .flywheel { width: 100%; height: auto; display: block; }

.brief__ondertekening { display: flex; align-items: center; gap: 14px; margin: 30px 0 6px; }
/* .brief p geeft anders 18px ondermarge aan naam/rol, waardoor de naam boven de foto zweeft. */
.brief .brief__ondertekening p { margin: 0; }
.brief__ondertekening img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.brief__naam { font-family: var(--font-display); font-weight: 500; font-size: 18px;
  color: var(--fg-1); margin: 0 0 2px; }
.brief__rol { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-2); margin: 0; }
.brief__rol a { color: var(--dmt-amber-600); }

.brief__ps { border-top: 1px dashed var(--border-default); margin-top: 30px; padding-top: 24px; }
.brief__ps-label { font-family: var(--font-mono); font-weight: 600; }
/* .brief p wint anders op specificiteit van .identity-line (site-stijl). */
.brief .identity-line { margin: 12px 0 0; font-size: var(--fs-small); color: var(--dmt-slate); }

.koffie-btn {
  display: inline-block; background: var(--dmt-amber); color: var(--dmt-ink);
  border: 2px solid var(--dmt-amber); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--dmt-amber-500);
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small);
  padding: 10px 20px; text-decoration: none;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.koffie-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dmt-amber-500); }

.brief-footer { max-width: 620px; margin: 0 auto; padding: 18px 24px 34px;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-2);
  display: flex; gap: 16px; flex-wrap: wrap; }
.brief-footer a { color: var(--fg-2); }