/*
 * mozaiek · jurema-preta.nl
 * 1. Concept: een Braziliaans mozaïek van aardetegels, gelegd met zichtbare voegen. Elke tegel draagt één ding:
 *    een titel, een beeld, een kerngetal of een ingang naar een pagina. Geen azulejo-motieven: effen vlakken in
 *    de kleuren van de plant zelf (bast, blad, grond, zand).
 * 2. Typografie: Unbounded (brede geometrische schreefloze, 500 tot 800) voor titels, getallen en labels;
 *    Petrona (warme schreef, 400 tot 600 plus cursief 400) voor lopende tekst. Zelf gehost, latin + latin-ext.
 * 3. Palet: papier #f7efe3, bastinkt #2b1610, terracotta #a94a26, bladgroen #1f4535, roodbruin #5e2617,
 *    zandgeel #e5b647, voeg #d8c4a6. Tekstcontrast overal 4,5:1 of hoger.
 * 4. Layout-signatuur: bento. De startpagina is een ruimtelijk raster van tegels van ongelijke grootte (CSS grid
 *    met benoemde vlakken); artikelen hebben een kop van tegels en een eigen kolom met feitentegels naast de tekst.
 * 5. Detail: een "tessera", een blokje van vier minitegels in de vier aardekleuren, voor elk label; de voegen
 *    tussen tegels zijn altijd 6 px in voegkleur, als in een echt mozaïek.
 */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("fonts/unbounded-500-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("fonts/unbounded-500-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Petrona"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/petrona-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/petrona-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/petrona-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/petrona-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f7efe3;
  --tile: #efe2cf;
  --ink: #2b1610;
  --clay: #a94a26;
  --leaf: #1f4535;
  --bark: #5e2617;
  --sand: #e5b647;
  --grout: #d8c4a6;
  --gap: 6px;
  --radius: 4px;
  --sans: "Unbounded", "Arial Black", system-ui, sans-serif;
  --serif: "Petrona", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bark); text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.t-leaf :focus-visible, .t-bark :focus-visible, .t-clay :focus-visible, .tile.t-leaf:focus-visible, .tile.t-bark:focus-visible, .tile.t-clay:focus-visible { outline-color: var(--sand); }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

/* ---------- tiles ---------- */
.mosaic {
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--grout);
  border-radius: 6px;
}
.tile {
  position: relative;
  display: block;
  margin: 0;
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.t-clay { background: var(--clay); color: var(--paper); }
.t-leaf { background: var(--leaf); color: var(--paper); }
.t-bark { background: var(--bark); color: var(--paper); }
.t-sand { background: var(--sand); color: var(--ink); }
.t-paper { background: var(--paper); color: var(--ink); }
.t-tile { background: var(--tile); color: var(--ink); }
.t-clay a, .t-leaf a, .t-bark a { color: var(--paper); text-decoration-color: var(--sand); }
.t-sand a { color: var(--ink); text-decoration-color: var(--bark); }

.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* tessera: four mini tiles in the four earth colours */
.tessera {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 8px 8px 0;
  background: var(--clay);
  box-shadow: 8px 0 0 var(--sand), 0 8px 0 var(--leaf), 8px 8px 0 var(--bark);
}
.t-clay .tessera { background: var(--paper); }

.fact-value {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.fact-label { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.35; }
.tile-title { display: block; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.3; }

a.tile { transition: none; }
a.tile:hover .tile-title, a.tile:hover .fact-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.tile-page { display: flex; flex-direction: column; min-height: 100%; }
.tile-page .fact-value { margin-top: auto; padding-top: 18px; }
.tile-page .tile-title { margin-top: 14px; padding-top: 12px; border-top: 2px solid currentColor; }

.tile-fact { display: flex; flex-direction: column; justify-content: flex-end; }

.tile-img { padding: 0; overflow: hidden; background: var(--bark); min-height: 220px; }
.tile-img figure { margin: 0; height: 100%; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-img figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- header ---------- */
.top { padding: 14px 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 44px; height: 44px; }
.brand-name { font-family: var(--sans); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: var(--gap); margin: 0; padding: var(--gap); background: var(--grout); border-radius: 6px; }
.nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
}
.nav a:hover { background: var(--tile); }
.nav a[aria-current="page"].n-clay { background: var(--clay); color: var(--paper); }
.nav a[aria-current="page"].n-leaf { background: var(--leaf); color: var(--paper); }
.nav a[aria-current="page"].n-bark { background: var(--bark); color: var(--paper); }
.nav a[aria-current="page"].n-sand { background: var(--sand); color: var(--ink); }

.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--clay); }
.menu-grid {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 5;
  margin: 10px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--grout);
  border-radius: 6px;
}
.menu-grid .tile { padding: 14px; font-family: var(--sans); font-size: .82rem; font-weight: 600; min-height: 72px; }
.menu-grid .kicker { display: block; margin-bottom: 4px; }
.top { position: relative; }
@media (min-width: 1000px) {
  .nav { display: block; }
  .menu { display: none; }
}

/* ---------- home mosaic ---------- */
.mosaic-home {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "img1 img1"
    "p1 p1"
    "f1 f2"
    "img2 img2"
    "p2 p2"
    "read read"
    "p3 p3"
    "img3 img3"
    "p4 p4"
    "f3 f3"
    "p5 p5"
    "p6 p6"
    "prod prod"
    "about about";
}
.a-title { grid-area: title; } .a-img1 { grid-area: img1; } .a-p1 { grid-area: p1; } .a-f1 { grid-area: f1; }
.a-img2 { grid-area: img2; } .a-p2 { grid-area: p2; } .a-f2 { grid-area: f2; } .a-read { grid-area: read; }
.a-p3 { grid-area: p3; } .a-img3 { grid-area: img3; } .a-p4 { grid-area: p4; } .a-f3 { grid-area: f3; }
.a-p5 { grid-area: p5; } .a-p6 { grid-area: p6; } .a-prod { grid-area: prod; } .a-about { grid-area: about; }

.tile-hero h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 18ch;
}
.tile-hero .lede { margin: 18px 0 0; font-size: 1.15rem; line-height: 1.5; max-width: 52ch; }
.mosaic-home .a-title { padding: 24px 22px 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; }

.tile-read { padding: 24px 22px; }
.tile-read .prose > :first-child { margin-top: 0; }
.tile-read .prose { max-width: 66ch; }

.tile-about { display: flex; flex-direction: column; }
.tile-about img { width: 96px; height: auto; margin-bottom: 14px; }
.tile-product .product { background: var(--tile); }

@media (min-width: 680px) {
  .mosaic-home {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "title title title title"
      "img1 img1 p1 p1"
      "img1 img1 f1 f2"
      "img2 img2 p2 p2"
      "read read read read"
      "p3 p3 p4 p4"
      "img3 img3 f3 f3"
      "p5 p5 p6 p6"
      "prod prod about about";
  }
}
@media (min-width: 1080px) {
  .mosaic-home {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 220px 220px auto auto auto auto auto auto;
    grid-template-areas:
      "title title title title img1 img1"
      "title title title title img1 img1"
      "p1 p1 f1 img2 img2 p2"
      "p1 p1 f2 img2 img2 p2"
      "read read read read p3 p3"
      "read read read read img3 img3"
      "read read read read p4 f3"
      "p5 p5 p6 p6 prod about";
  }
  .mosaic-home .a-title { min-height: 0; padding: 32px 34px 36px; }
  .mosaic-home .a-img1, .mosaic-home .a-img3 { min-height: 0; }
  .mosaic-home .a-img3 { min-height: 240px; }
  .tile-read { padding: 34px 38px 38px; }
}

/* ---------- article ---------- */
.mosaic-head {
  grid-template-columns: 1fr;
  grid-template-areas: "title" "img" "meta";
}
.h-title { grid-area: title; padding: 24px 22px 28px; }
.h-img { grid-area: img; min-height: 220px; max-height: 300px; }
.h-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 18px; font-size: 1rem; }
.meta-k { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
.mosaic-head .tile-hero h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); max-width: 22ch; }
@media (min-width: 820px) {
  .mosaic-head { grid-template-columns: repeat(6, 1fr); grid-template-areas: "title title title title title title" "meta meta meta meta meta meta"; }
  .mosaic-head.has-image { grid-template-areas: "title title title title img img" "meta meta meta meta img img"; }
  .h-title { padding: 32px 34px 36px; display: flex; flex-direction: column; justify-content: flex-end; }
  .h-img { max-height: none; }
}

.body-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 34px 0 0; }
.side { display: grid; gap: var(--gap); align-content: start; order: -1; }
.side-facts { list-style: none; margin: 0; padding: var(--gap); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); background: var(--grout); border-radius: 6px; }
.side-facts .tile-fact .fact-value { font-size: 1.35rem; }
.side-facts .tile-fact .fact-label { font-size: .95rem; }
.tile-toc { padding: 18px 18px 14px; border: var(--gap) solid var(--grout); }
.tile-toc ol { margin: 0; padding: 0 0 0 1.3em; font-size: 1rem; line-height: 1.4; }
.tile-toc li { margin: 0 0 8px; }
.tile-toc a { color: var(--ink); text-decoration-color: var(--clay); }
@media (max-width: 559px) {
  .side-facts { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
  .body-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 46px; }
  .side { order: 0; }
  .body { max-width: 70ch; }
  .side-facts { grid-template-columns: 1fr; }
}

/* ---------- prose ---------- */
.prose > * { max-width: 68ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 2.1em 0 .6em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.prose h2::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--clay); border-radius: 1px; transform: translateY(-2px); }
.article.tint-leaf .prose h2::before { background: var(--leaf); }
.article.tint-bark .prose h2::before { background: var(--bark); }
.article.tint-sand .prose h2::before { background: var(--sand); box-shadow: 0 0 0 1px var(--bark); }
.prose h3 { margin: 1.6em 0 .4em; font-family: var(--sans); font-weight: 600; font-size: 1.05rem; }
.prose li { margin: 0 0 .4em; }
.prose ul { padding-left: 1.2em; }
.prose ul li::marker { color: var(--clay); }
.prose strong { font-weight: 600; }
.prose figure { margin: 1.6em 0; max-width: 100%; border: var(--gap) solid var(--grout); border-radius: 6px; overflow: hidden; }
.prose figure img { width: 100%; }
.prose blockquote { margin: 1.4em 0; padding: 14px 18px; background: var(--tile); border-left: 6px solid var(--sand); }
.prose hr { border: 0; height: 6px; background: var(--grout); margin: 2em 0; }
.prose code { font-size: .9em; }

.table { max-width: 100%; overflow-x: auto; margin: 1.4em 0 1.6em; padding: var(--gap); background: var(--grout); border-radius: 6px; }
.table table { width: 100%; border-collapse: separate; border-spacing: 0 var(--gap); font-size: 1rem; line-height: 1.45; margin: calc(var(--gap) * -1) 0; }
.table th { text-align: left; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px; background: var(--ink); color: var(--paper); }
.table td { padding: 10px 12px; background: var(--paper); vertical-align: top; }
.table th:first-child, .table td:first-child { border-radius: 3px 0 0 3px; }
.table th:last-child, .table td:last-child { border-radius: 0 3px 3px 0; }
.table td:first-child { font-weight: 600; min-width: 9em; }

/* ---------- products ---------- */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); padding: var(--gap); background: var(--grout); border-radius: 6px; margin: 1.6em 0; }
.product-feature { margin: 1.6em 0; padding: var(--gap); background: var(--grout); border-radius: 6px; max-width: 520px; }
.product {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.product-photo { display: block; background: #fff; border-radius: 3px; padding: 6px; }
.product-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.product-text { display: flex; flex-direction: column; gap: 8px; }
.product-name { font-family: var(--sans); font-size: .9rem; font-weight: 600; line-height: 1.3; }
.product:hover .product-name { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 3px; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-price { font-family: var(--sans); font-weight: 700; font-size: 1rem; background: var(--sand); color: var(--ink); padding: 2px 8px; border-radius: 2px; }
.product-shop { font-size: .95rem; }
.tile-product { display: flex; flex-direction: column; }
.tile-product .product { grid-template-columns: 96px 1fr; padding: 10px; }
@media (min-width: 1080px) {
  .tile-product .product { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .tile-product .product-photo { max-width: 140px; }
}

/* ---------- more ---------- */
.more { margin: 56px 0 0; }
.more-title { margin: 0 0 12px; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mosaic-more { grid-template-columns: 1fr; }
.mosaic-more .tile-page { min-height: 200px; }
@media (min-width: 680px) { .mosaic-more { grid-template-columns: repeat(3, 1fr); } }

/* ---------- footer ---------- */
.foot { margin: 64px 0 0; padding: 0 0 40px; }
.mosaic-foot { grid-template-columns: 1fr; }
.mosaic-foot p { margin: 0; font-size: 1rem; line-height: 1.5; }
.mosaic-foot .kicker { margin-bottom: 8px; }
.f-pub { display: flex; gap: 16px; align-items: flex-start; }
.f-pub .mascot { flex: none; width: 84px; height: auto; }
.f-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; font-size: 1rem; line-height: 1.8; }
.f-nav a { color: var(--ink); }
@media (min-width: 900px) { .mosaic-foot { grid-template-columns: 1.1fr 1.4fr 1fr; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .top, .foot, .side, .more { display: none; } .mosaic { background: none; padding: 0; } .tile { color: #000; background: none; } }