/* Huis Botanica — huisbotanica.nl
   HET REGISTER: de pagina als botanisch handelsregister. Zichtbaar 12-kolomsgrid,
   genummerde posten, mono-registerdata en eigen redactionele foto- en glaswerkstudies.
   Eén accentkleur, geen decorpakket, geen tracking, alles self-hosted. */

/* __FONTS__ (productie: losse woff2-bestanden; preview: data-URI's) */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Fraunces-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Fraunces-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Fraunces-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PublicSans-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PlexMono-400-normal.woff2') format('woff2'); }
/* __ENDFONTS__ */

:root {
  --paper: #F6F1E7;
  --paper-oud: #EFE8D9;
  --ink: #1E3B2E;
  --groen2: #2E5240;
  --honing: #C98A2D;
  --honing-diep: #8A5D12;
  --muted: #55684E;
  --lijn: rgba(30, 59, 46, .22);
  --gridlijn: rgba(30, 59, 46, .085);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.25, .6, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--honing); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--honing-diep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--honing); outline-offset: 3px;
}

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: 0; }

/* ---------- Het grid ---------- */
.wrap {
  max-width: 82rem; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  position: relative;
}
.wrap.grid { display: grid; grid-template-columns: repeat(12, 1fr); }
.wrap::before {
  content: ''; position: absolute; inset: 0 clamp(1.25rem, 4vw, 3rem); pointer-events: none;
  background-image: repeating-linear-gradient(to right,
    var(--gridlijn), var(--gridlijn) 1px, transparent 1px, transparent calc(100% / 12));
  border-right: 1px solid var(--gridlijn);
}
.inhoud { position: relative; }

/* kolomplaatsing */
.c1-5 { grid-column: 1 / 6; } .c1-6 { grid-column: 1 / 7; } .c1-7 { grid-column: 1 / 8; }
.c1-8 { grid-column: 1 / 9; } .c1-12 { grid-column: 1 / 13; }
.c2-6 { grid-column: 2 / 7; } .c2-8 { grid-column: 2 / 9; } .c2-11 { grid-column: 2 / 12; }
.c3-9 { grid-column: 3 / 10; } .c3-10 { grid-column: 3 / 11; }
.c4-9 { grid-column: 4 / 10; } .c4-11 { grid-column: 4 / 12; }
.c7-12 { grid-column: 7 / 13; } .c8-12 { grid-column: 8 / 13; } .c9-12 { grid-column: 9 / 13; }
[class*="c"] { min-width: 0; }
.padr { padding-right: clamp(1rem, 2.5vw, 2.5rem); }
.padl { padding-left: clamp(1rem, 2.5vw, 2.5rem); }

/* ---------- Registeronderdelen ---------- */
.mono, .veldlabel {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.mono a { color: inherit; }
.mono b { color: var(--honing-diep); font-weight: 400; }
.rlijn { height: 2px; background: var(--ink); }
.hlijn { height: 1px; background: var(--lijn); }
.anim .rlijn, .rlijn.anim { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.rlijn.in { transform: scaleX(1); }

.postnr {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 1; color: var(--honing);
}

h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; text-wrap: balance;
}
.prose { max-width: 60ch; }
.prose p { margin-top: 1.05rem; font-size: 1.05rem; line-height: 1.72; }
.accent {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem); line-height: 1.4;
  border-left: 3px solid var(--honing); padding-left: 1.3rem; text-wrap: balance;
}

/* ---------- Balk boven ---------- */
.balk {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--lijn);
}
.balk .wrap { display: flex; justify-content: space-between; align-items: baseline; padding-block: .8rem; }
.balk .wrap::before { content: none; }
.merk { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; text-decoration: none; color: var(--ink); }
.balk .mono a { text-decoration: none; }
.balk .mono a:hover { color: var(--honing-diep); }

/* ---------- Post 01 — titelblad ---------- */
.hero { min-height: 100svh; align-content: center; padding-block: 7rem 3.5rem; }
.stempel {
  position: absolute; right: clamp(1.25rem, 4vw, 3rem); top: 7rem;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.wordmark {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: clamp(3.2rem, 12.5vw, 11.5rem); line-height: .92; letter-spacing: -.015em;
  position: relative; z-index: 2;
}
.wordmark .r2 { display: block; margin-left: clamp(1.5rem, 16.6%, 12rem); }
.hero .specimen { position: relative; z-index: 1; margin-top: clamp(-9rem, -8vw, -6rem); }
.hero-onder { margin-top: 2.2rem; }
.motto {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--ink);
  margin-bottom: 1.1rem;
}
.hero-onder .rlijn { margin-bottom: 1.6rem; }
.hero-onder p { font-size: 1.05rem; max-width: 46ch; }
.hero-link { display: inline-block; margin-top: 1.5rem; font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.index { margin-top: clamp(3rem, 7vh, 5rem); display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; }
.index a { text-decoration: none; }
.index a:hover { color: var(--honing-diep); }

/* ---------- Specimens ---------- */
.specimen { background: var(--paper); }
.specimen img {
  mix-blend-mode: multiply;
  filter: grayscale(.25) saturate(.82) contrast(1.02);
}
.specimen figcaption { margin-top: .7rem; }
.kanaalbeeld { width: min(420px, 92%); margin-top: 2.5rem; }
.merkdetail { margin-top: 2.5rem; padding: .75rem; }
.marques .merkdetail figcaption { color: var(--muted); }

.diagram { color: var(--ink); margin-top: 2.5rem; }
.diagram svg { width: min(340px, 82%); }
.diagram figcaption { margin-top: .7rem; }

/* ---------- Posten (secties) ---------- */
section .wrap { padding-block: clamp(4.5rem, 9vw, 8rem); }
.posthead { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2.4rem; }
.posthead .rlijn { flex: 1; align-self: center; }

/* Post 02 — feiten met invullijnen */
.feiten { margin-top: 3rem; border-top: 1px solid var(--lijn); }
.feit { display: flex; align-items: baseline; gap: 1.2rem; padding-block: 1.15rem; border-bottom: 1px solid var(--lijn); }
.feit .lbl { max-width: 28rem; }
.feit .n {
  font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem); line-height: 1; white-space: nowrap;
}
.feit .stippel { flex: 1; border-bottom: 2px dotted var(--lijn); align-self: center; min-width: 2rem; }
.bronnen { margin-top: .9rem; }
.bronnen a { color: inherit; }


/* Post 03 — dienstenregels */
.dienst { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-columns: subgrid; grid-column: 1 / 13; padding-block: 2.1rem; border-top: 1px solid var(--lijn); align-items: baseline; }
.dienst:last-of-type { border-bottom: 1px solid var(--lijn); }
.dienst .nr { grid-column: 1 / 2; }
.dienst h3 { grid-column: 2 / 7; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.01em; padding-right: 1rem; }
.dienst p { grid-column: 7 / 12; font-size: .98rem; }
.dienst.hl { background: var(--honing-diep); border-color: transparent; }
.dienst.hl, .dienst.hl .nr, .dienst.hl h3, .dienst.hl p { color: var(--paper); }
.dienst.hl .nr { color: color-mix(in srgb, var(--paper) 92%, var(--honing-diep)); }
.slotzin { margin-top: 2.6rem; }

/* Post 04 — afnemers */
.afnemers { position: relative; }
.scheiding { position: absolute; top: 0; bottom: clamp(4.5rem, 9vw, 8rem); left: calc(58.333%); width: 2px; background: var(--ink); }
.groep h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.groep.links h3 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.groep.rechts h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.groep ul { list-style: none; padding: 0; margin-top: 1.6rem; }
.groep li { padding-block: 1.05rem; border-bottom: 1px solid var(--lijn); }
.groep li strong { font-weight: 400; font-family: var(--serif); font-size: 1.15rem; display: block; }
.groep li span { color: var(--muted); font-size: .95rem; }
.groep.rechts { margin-top: clamp(2rem, 8vw, 7rem); }
.specimen.klein { width: min(260px, 60%); margin-top: 2.5rem; position: relative; z-index: 2; }
.botanicals { margin-top: 3rem; }
.botanicals li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-bottom: 1px dotted var(--lijn); list-style: none; }
.botanicals ul { padding: 0; margin-top: .8rem; }

/* Post 05 — oprichter */
.oprichter-naam { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -.015em; }
.registerdata { margin-top: .4rem; }
.registerdata div { padding-block: .85rem; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: .15rem; }
.registerdata div:first-child { border-top: 1px solid var(--lijn); }
.registerdata .w { color: var(--ink); font-family: var(--mono); font-size: .8rem; letter-spacing: .07em; text-transform: none; }

/* Post 06 — merken, geïnverteerd register */
.marques { background: var(--groen2); color: var(--paper); }
.marques .wrap::before {
  background-image: repeating-linear-gradient(to right,
    rgba(246, 241, 231, .1), rgba(246, 241, 231, .1) 1px, transparent 1px, transparent calc(100% / 12));
  border-right-color: rgba(246, 241, 231, .1);
}
.marques .mono { color: color-mix(in srgb, var(--paper) 78%, var(--groen2)); }
.marques .mono b, .marques .taalcode { color: var(--honing); }
.marques .rlijn { background: var(--paper); }
.marques .hlijn { background: rgba(246, 241, 231, .25); }
.marques a { color: var(--paper); }
.marques a:hover { color: var(--honing); }
.taalpost { padding-block: 2rem 2.4rem; border-top: 1px solid rgba(246, 241, 231, .25); }
.taalpost .kop { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.35; max-width: 34em; }
.taalpost p { margin-top: .9rem; font-size: .96rem; max-width: 62ch; color: color-mix(in srgb, var(--paper) 94%, var(--groen2)); }
.taalpost .mailto { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; }
.taalpost.i1 { margin-left: calc(100% / 12 * 1); }
.taalpost.i2 { margin-left: calc(100% / 12 * 2); }
.taalpost.i3 { margin-left: calc(100% / 12 * 3); }

/* Post 07 — correspondentie ---------- */
form .veld { margin-top: 1.6rem; }
.veldlabel { display: block; margin-bottom: .4rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: .5rem .05rem;
  transition: border-color .2s var(--ease), border-width .2s var(--ease);
}
input:focus, select:focus, textarea:focus { border-bottom: 2px solid var(--honing-diep); outline: none; }
textarea { min-height: 8.5rem; resize: vertical; }
.hp { position: absolute; left: -9999px; top: auto; }
.verzend {
  margin-top: 2.4rem; display: inline-flex; align-items: center; gap: .7rem;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.05rem 1.8rem;
}
.verzend .pijl { transition: translate .25s var(--ease); }
.verzend:hover .pijl { translate: 5px 0; }
.formstatus { margin-top: 1rem; font-size: .92rem; color: var(--honing-diep); min-height: 1.5em; }
#formdone { font-family: var(--serif); font-style: italic; font-size: 1.2rem; margin-top: 2rem; }
.corr-zij { margin-top: 1.2rem; }
.corr-zij .corr-blok { margin-top: 2rem; }
.corr-blok > div { padding-block: 1rem; border-bottom: 1px solid var(--lijn); }
.corr-blok > div:first-child { border-top: 1px solid var(--lijn); }
.corr-blok .w { font-family: var(--sans); font-size: .98rem; text-transform: none; letter-spacing: 0; color: var(--ink); }

/* ---------- Post 08 — colofon ---------- */
footer .wrap { padding-block: 3rem 0; }
footer .wrap::before { content: none; }
.colofon { display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 1rem; padding-bottom: 3.5rem; }
.colofon > div { grid-column: span 3; padding-right: 1.2rem; }
.colofon a { color: var(--muted); }
.reus-houder { font-size: clamp(4.5rem, 18.5vw, 16rem); height: .58em; overflow: hidden; }
.reus {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: 1em; line-height: 1; letter-spacing: -.02em;
  white-space: nowrap; color: var(--ink); opacity: .95;
}

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
  .stempel { display: none; }
  .dienst h3 { grid-column: 2 / 12; margin-bottom: .5rem; }
  .dienst p { grid-column: 2 / 12; }
  .colofon > div { grid-column: span 6; }
}
@media (max-width: 760px) {
  .wrap.grid { display: block; }
  .wrap::before { content: none; }
  .scheiding { display: none; }
  .groep.rechts { margin-top: 3rem; }
  .taalpost.i1, .taalpost.i2, .taalpost.i3 { margin-left: 0; }
  .taalpost { padding-left: 0; }
  .hero .specimen { margin-top: 1.5rem; width: 78%; }
  .wordmark .r2 { margin-left: 1.2rem; }
  .padr, .padl { padding: 0; }
  .dienst { display: block; padding-block: 1.6rem; }
  .dienst h3 { margin-top: .3rem; }
  .dienst p { margin-top: .5rem; }
  .feit .oms { max-width: 55%; }
  .colofon { display: block; }
  .colofon > div { margin-top: .8rem; }
  .registerdata { margin-top: 2rem; }
  .kanaalbeeld { width: 100%; }
  .merkdetail { padding: .5rem; }
  .corr-zij { margin-top: 3rem; }
  .corr-zij .corr-blok { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rlijn.anim { transform: none; transition: none; }
  .verzend .pijl { transition: none; }
}