/* kssns.nl — familiesite van de Kessensen.
   Smalle kopregel met het woordlogo, daaronder één leeskolom. Bewust alleen licht. */
:root{
  --paper:#fcfcfa;
  --paper-2:#f2f5f3;
  --ink:#23303a;
  --ink-soft:#5c6a73;
  --ink-mute:#8c979d;
  --rule:#dde3e1;
  --pen:#d9670f;

  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--pen)}
a:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:2px}

.wrap{
  max-width:760px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* ---------- kop met logo ---------- */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;flex-wrap:wrap}

.logo{
  display:inline-grid;justify-items:start;background:none;border:0;padding:0;
  cursor:pointer;color:var(--ink);font:inherit;
}
.logo:focus-visible{outline:2px solid var(--pen);outline-offset:4px;border-radius:4px}
.word{
  font-family:var(--display);font-weight:800;font-size:1.75rem;letter-spacing:-.02em;
  line-height:1;white-space:nowrap;
}
.word .tld{color:var(--ink-mute);font-weight:600}
/* De klinkers: eerst nul breed, daarna schuiven ze erin. */
.v{
  display:inline-block;max-width:0;opacity:0;color:var(--pen);
  transform:translateY(-.35em);vertical-align:bottom;overflow:hidden;
  transition:max-width .45s cubic-bezier(.3,.9,.3,1),opacity .3s .1s,transform .45s cubic-bezier(.3,1.6,.4,1) .05s;
}
.logo.full .v{max-width:.8em;opacity:1;transform:none}
.tag{
  font-family:var(--hand);font-weight:600;font-size:1.15rem;color:var(--pen);line-height:1;
  margin-top:.2rem;transform:rotate(-2deg);transition:opacity .4s;
}
.logo.full .tag{opacity:.45}

.nav{display:flex;gap:1.25rem;font-family:var(--display);font-size:.95rem;color:var(--ink-soft)}
.nav a{text-decoration:none}

/* ---------- inhoud ---------- */
main{padding-block:3.5rem 4rem;display:grid;gap:3.5rem}
section{min-width:0}
h1{
  font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6vw,3.2rem);
  line-height:1.05;letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance;
}
.lede{margin:0;font-size:1.15rem;color:var(--ink-soft);max-width:36em}
h2{
  font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 1.25rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
h3{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.3;margin:0}

.gezin{
  list-style:none;margin:0;padding:0;display:grid;gap:1rem;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));
}
.gezin li{
  background:var(--paper-2);border-radius:10px;padding:1.1rem 1.2rem 1.2rem;
  display:grid;gap:.25rem;align-content:start;
}
.gezin .rol{font-family:var(--mono);font-size:.75rem;color:var(--ink-mute);letter-spacing:.03em}
.gezin p{margin:0;font-size:1rem;color:var(--ink-soft)}
.gezin a{font-family:var(--mono);font-size:.85rem;margin-top:.3rem;justify-self:start}
/* Concept-gezinsleden (alleen lokaal zichtbaar) */
.gezin .leeg{background:none;border:1.5px dashed var(--rule)}
.gezin .leeg h3{color:var(--ink-mute)}

.call{display:grid;gap:.5rem;max-width:36em}
.call p{margin:0;color:var(--ink-soft)}
.pen{font-family:var(--hand);font-size:1.4rem;color:var(--pen);line-height:1.1;transform:rotate(-1.5deg);justify-self:start}

footer{border-top:1px solid var(--rule)}
footer .wrap{
  padding-block:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-mute);
}

@media (prefers-reduced-motion:reduce){
  .v,.tag{transition:none}
}