/* pictostickers.nl merkpagina (merkpack/merk.css), bovenop stijl.css */
.mk .tekst{max-width:860px}
.mk-alles{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:34px 0 0}
.mk-alles span{font:500 13px/1.5 var(--mono);color:var(--mut)}
.mk-sec{margin-top:88px;border-top:2px solid var(--ink);padding-top:22px}
.mk-sec h2{margin:0 0 16px;font:900 clamp(40px,6vw,84px)/.88 var(--kop75);letter-spacing:-.025em}
.mk-sec>p{max-width:64ch;font-size:17px;margin:0 0 28px}
.mk-sub{margin:34px 0 12px;font:500 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.mk-sec>.mk-klein{font-size:15px;color:var(--mut);margin:20px 0 0}
.mk-klein a{color:var(--ink)}

/* previews */
.mk-raster{display:grid;grid-template-columns:repeat(var(--k,2),minmax(0,1fr));gap:var(--gap)}
.mk-3{--k:3}
.mk-vak{margin:0;border:2px solid var(--ink);display:flex;flex-direction:column;min-width:0}
.mk-beeld{aspect-ratio:16/9;display:grid;place-items:center;padding:6%}
.mk-beeld img{width:min(100%,520px);height:auto}
.mk-pi .mk-beeld{aspect-ratio:auto;height:300px}
.mk-pi .mk-beeld img{width:auto;height:180px;max-width:100%}
.mk-licht .mk-beeld{background:#fff}
.mk-donker .mk-beeld{background:#111}
.mk-vak figcaption{border-top:2px solid var(--ink);padding:14px 16px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
.mk-vak figcaption b{font:700 16px/1.2 var(--kop)}
.mk-vak figcaption>span:not(.mk-dl){font-size:14px;color:var(--mut)}
.mk-dl{display:flex;flex-wrap:wrap;gap:6px}
.mk-dl a{font:500 13px/1 var(--mono);text-decoration:none;padding:8px 10px;box-shadow:inset 0 0 0 1.5px var(--ink);white-space:nowrap}
.mk-dl a:hover{background:var(--ink);color:var(--bg)}

/* favicon per maat, op ware grootte */
.mk-maten{list-style:none;margin:var(--gap) 0 0;padding:22px 24px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 34px;background:var(--vlak)}
.mk-maten li{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mk-maten img{image-rendering:auto}
.mk-maten a{font:500 13px/1 var(--mono);text-underline-offset:3px}
.mk-ico-t{display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--ink);font:500 12px/1 var(--mono)}

/* kleuren */
.mk-kleuren{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.mk-kleuren-s{grid-template-columns:repeat(6,minmax(0,1fr))}
.mk-kleur{border:2px solid var(--ink);display:flex;flex-direction:column;min-width:0}
.mk-staal{background:var(--c);aspect-ratio:3/2;border-bottom:2px solid var(--ink)}
.mk-kleur-s .mk-staal{aspect-ratio:1;display:flex;align-items:flex-end;padding:12px}
.mk-staal span{color:var(--ci);font:800 clamp(15px,1.5vw,20px)/1.05 var(--kop90);overflow-wrap:anywhere;min-width:0}
.mk-kleur-t{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.mk-kleur-t b{font:700 15px/1.25 var(--kop);margin-bottom:4px}
.mk-kleur-t code{font:500 13px/1.45 var(--mono);white-space:nowrap}
.mk-kleur-t code+code{color:var(--mut)}
.mk-kleur-t small{font-size:13px;line-height:1.4;color:var(--mut);margin-top:6px}

/* letters */
.mk-letter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;border-top:1px solid var(--zacht);padding:28px 0}
.mk-letter:last-child{border-bottom:1px solid var(--zacht)}
.mk-letter-meta{grid-column:1/6;min-width:0}
.mk-letter-meta h3{margin:0 0 8px;font:800 24px/1.1 var(--kop90)}
.mk-letter-meta p{margin:0 0 10px;font-size:15px}
.mk-letter-meta .mk-lic{font:500 13px/1.5 var(--mono);color:var(--mut)}
.mk-letter-meta .mk-lic a{color:var(--ink)}
.mk-proef{grid-column:6/13;margin:0;min-width:0;overflow-wrap:anywhere}
.mk-proef-kop{font:900 min(128px,calc((min(100vw,1440px) - 2 * var(--pad)) * .58 / 5.2))/.9 var(--kop75);letter-spacing:-.025em}
.mk-proef-tekst{font:400 clamp(22px,2.6vw,34px)/1.3 var(--tekst)}
.mk-proef-mono{font:500 clamp(17px,2vw,26px)/1.4 var(--mono)}

/* gebruik */
.mk-gebruik{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:start}
.mk-ruimte-vak{grid-column:1/8}
.mk-ruimte{display:block;width:100%;height:auto;padding:4%;color:var(--ink)}
.mk-r-zone{fill:color-mix(in srgb,var(--focus) 7%,transparent);stroke:var(--focus);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.mk-r-in{fill:none;stroke:var(--mut);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.mk-r-l{stroke:var(--focus);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.mk-r-x{fill:color-mix(in srgb,var(--focus) 16%,transparent);stroke:var(--focus);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-r-t{fill:var(--focus);font:500 300px var(--mono);text-anchor:middle;dominant-baseline:central}
.mk-r-wm{fill:currentColor}
.mk-regels{grid-column:8/13;list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.mk-regels li{padding:16px 0;border-bottom:1px solid var(--zacht);font-size:16px}
.mk-regels b{display:block;font:700 18px/1.25 var(--kop);margin-bottom:4px}
.mk-vraag{margin:36px 0 0;font-size:17px}

@media (max-width:1100px){
  .mk-3{--k:2}
  .mk-3>:last-child{grid-column:1/-1}
  .mk-kleuren{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-kleuren-s{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-kleuren:not(.mk-kleuren-s)>:last-child{grid-column:1/-1}
  .mk-kleuren:not(.mk-kleuren-s)>:last-child .mk-staal{aspect-ratio:4/1}
  .mk-ruimte-vak,.mk-regels{grid-column:1/-1}
}
@media (max-width:760px){
  .mk-sec{margin-top:64px}
  .mk-raster,.mk-3{--k:1}
  .mk-beeld{aspect-ratio:2/1}
  .mk-pi .mk-beeld{height:190px}
  .mk-pi .mk-beeld img{height:120px}
  .mk-kleuren,.mk-kleuren-s{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .mk-letter-meta,.mk-proef{grid-column:1/-1}
  .mk-proef{margin-top:16px}
  .mk-proef-kop{font-size:min(17vw,96px)}
  .mk-maten{gap:20px 26px;padding:18px}
}
