/* MCHistoryBuilder: "huizen", one historical look per tool group.
   A page joins a house with <html data-huis="kastelen">. The house sets --h-* tokens; the rules below map them onto
   the site (site.css) and tool (planner.css) tokens, so canvases that read --mcdp-* recolour by themselves.
   huis.js builds the chapters in the settings panel and moves the 3D preview to the top of the stage. */

/* house fonts, Latin subset from Google Fonts (all SIL Open Font License), served from this site */
@font-face { font-family: "Grenze Gotisch"; src: url("fonts/grenze-gotisch-800.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Grenze"; src: url("fonts/grenze-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Grenze"; src: url("fonts/grenze-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("fonts/cormorant-sc-700.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Alegreya SC"; src: url("fonts/alegreya-sc-800.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Uncial Antiqua"; src: url("fonts/uncial-antiqua-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-700.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Zen Antique"; src: url("fonts/zen-antique-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IM Fell DW Pica"; src: url("fonts/im-fell-dw-pica-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-700i.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url("fonts/im-fell-english-sc-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("fonts/orbitron-700.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("fonts/exo2-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("fonts/exo2-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

/* ---------------------------------------------------------------- house: Kastelen en vestingen (toernooiveld) */
:root[data-huis="kastelen"] {
  --h-paper: #efe8d8;
  --h-panel: #fbf8f0;
  --h-ink: #1a1a1a;
  --h-muted: #4a4033;
  --h-line: #1a1a1a;
  --h-soft: #cdbf9f;
  --h-grid: #e3d9c2;
  --h-main: #b3202a;
  --h-on-main: #f5f2ea;
  --h-second: #1f4e9c;
  --h-on-second: #f5f2ea;
  --h-third: #2e7d3a;
  --h-gold: #e5b53a;
  --h-head: #1a1a1a;
  --h-head-ink: #f5f2ea;
  --h-block: #1f4e9c;
  --h-block-hi: #4a74be;
  --h-block-lo: #163a75;
  --h-engrave: 1;
  --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #f5f2ea 22px 44px);
  --h-display: "Grenze Gotisch", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --h-body: "Grenze", Georgia, "Times New Roman", serif;
  --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* the four heraldic colours for ribbons and chapters: deep enough for light text in both modes */
  --h-t1: #1f4e9c; --h-t2: #b3202a; --h-t3: #2e7d3a; --h-t4: #1a1a1a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-huis="kastelen"]:not([data-theme="light"]) {
    --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38;
    --h-main: #d8424b; --h-on-main: #000000; --h-second: #6f8fcb; --h-on-second: #0e0f13; --h-third: #5fae6a; --h-gold: #e5b53a;
    --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #9db4e0; --h-block-lo: #3f5f9c;
    --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #2a2b33 22px 44px); --h-t4: #3a3b46;
    color-scheme: dark;
  }
}
:root[data-huis="kastelen"][data-theme="dark"] {
  --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38;
  --h-main: #d8424b; --h-on-main: #000000; --h-second: #6f8fcb; --h-on-second: #0e0f13; --h-third: #5fae6a; --h-gold: #e5b53a;
  --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #9db4e0; --h-block-lo: #3f5f9c;
  --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #2a2b33 22px 44px); --h-t4: #3a3b46;
  color-scheme: dark;
}


/* ---------------------------------------------------------------- the other houses (generated from the design, Themas board) */
:root[data-huis="vormen"] {
  --h-paper: #efe6d2; --h-panel: #f8f1e0; --h-ink: #2b1d12; --h-muted: #6b5440; --h-line: #2b1d12; --h-soft: #c9b48a; --h-grid: #e3d6b8;
  --h-main: #a3221a; --h-on-main: #fff7e8; --h-second: #2d4fa0; --h-on-second: #ffffff; --h-third: #8a6400; --h-gold: #b8860b;
  --h-head: #2b1d12; --h-head-ink: #efe6d2; --h-block: #2d4fa0; --h-block-hi: #5a78c0; --h-block-lo: #1e3670;
  --h-engrave: 1; --h-band: radial-gradient(circle at 0 0, transparent 0 18px, #2b1d12 18px 20px, transparent 20px) 0 0 / 20px 20px, #efe6d2;
  --h-display: "Cormorant SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #2d4fa0; --h-t2: #a3221a; --h-t3: #8a6400; --h-t4: #2b1d12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="vormen"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7f9be0; --h-block-hi: #7f9be0; --h-block-lo: #2d4fa0; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="vormen"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7f9be0; --h-block-hi: #7f9be0; --h-block-lo: #2d4fa0; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="daken"] {
  --h-paper: #ecedea; --h-panel: #f6f6f3; --h-ink: #20262c; --h-muted: #55606b; --h-line: #20262c; --h-soft: #b9c0c7; --h-grid: #dfe3e6;
  --h-main: #4a5560; --h-on-main: #ffffff; --h-second: #9c6b3a; --h-on-second: #ffffff; --h-third: #5e6e4a; --h-gold: #c9a227;
  --h-head: #20262c; --h-head-ink: #e7e9eb; --h-block: #4a5560; --h-block-hi: #6b7785; --h-block-lo: #2f3840;
  --h-engrave: 1; --h-band: radial-gradient(circle at 50% 0, #6b7785 0 9px, #20262c 9px 11px, transparent 11px) 0 0 / 20px 12px, #4a5560;
  --h-display: "Alegreya SC", "Book Antiqua", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #4a5560; --h-t2: #9c6b3a; --h-t3: #5e6e4a; --h-t4: #20262c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="daken"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #9aa8b6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #8e9cab; --h-block-hi: #8e9cab; --h-block-lo: #4a5560; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="daken"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #9aa8b6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #8e9cab; --h-block-hi: #8e9cab; --h-block-lo: #4a5560; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="kerken"] {
  --h-paper: #f2e9d6; --h-panel: #fbf6ea; --h-ink: #1e1a16; --h-muted: #5a5046; --h-line: #1e1a16; --h-soft: #cdbf9f; --h-grid: #e6dcc4;
  --h-main: #9b111e; --h-on-main: #fff7e8; --h-second: #0f3d8c; --h-on-second: #ffffff; --h-third: #0b6e4f; --h-gold: #e0a100;
  --h-head: #222222; --h-head-ink: #e9e2d2; --h-block: #0f3d8c; --h-block-hi: #3a62a8; --h-block-lo: #0b2e6a;
  --h-engrave: 1; --h-band: linear-gradient(45deg, #9b111e 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(-45deg, #0f3d8c 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, transparent 75%, #0b6e4f 75%) 0 0 / 24px 24px, linear-gradient(-45deg, transparent 75%, #e0a100 75%) 0 0 / 24px 24px, #222222;
  --h-display: "Uncial Antiqua", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #0f3d8c; --h-t2: #9b111e; --h-t3: #0b6e4f; --h-t4: #1e1a16;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="kerken"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #6f8fcb; --h-block-lo: #0f3d8c; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="kerken"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #6f8fcb; --h-block-lo: #0f3d8c; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="historisch"] {
  --h-paper: #f2eee6; --h-panel: #faf7f1; --h-ink: #2a211b; --h-muted: #5e5046; --h-line: #2a211b; --h-soft: #d3c6ad; --h-grid: #e8e0cf;
  --h-main: #8e2a20; --h-on-main: #fff7ee; --h-second: #3e6b5a; --h-on-second: #ffffff; --h-third: #8a6a2a; --h-gold: #c99a3b;
  --h-head: #2a211b; --h-head-ink: #e6dccb; --h-block: #8e2a20; --h-block-hi: #b5523b; --h-block-lo: #6a1f18;
  --h-engrave: 1; --h-band: repeating-linear-gradient(90deg, #8e2a20 0 4px, transparent 4px 16px), linear-gradient(#8e2a20 0 4px, #c99a3b 4px 12px, #8e2a20 12px);
  --h-display: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #8e2a20; --h-t2: #3e6b5a; --h-t3: #8a6a2a; --h-t4: #2a211b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="historisch"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d0644f; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #d0644f; --h-block-hi: #d0644f; --h-block-lo: #8e2a20; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="historisch"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d0644f; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #d0644f; --h-block-hi: #d0644f; --h-block-lo: #8e2a20; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="wereld"] {
  --h-paper: #f3ebdd; --h-panel: #fbf6ec; --h-ink: #141414; --h-muted: #5a4e40; --h-line: #141414; --h-soft: #d4c4a6; --h-grid: #e9dfcb;
  --h-main: #a31f1f; --h-on-main: #fff7ec; --h-second: #3c8d7a; --h-on-second: #ffffff; --h-third: #8a6a1a; --h-gold: #c9a227;
  --h-head: #141414; --h-head-ink: #e8dcc4; --h-block: #a31f1f; --h-block-hi: #c94a3e; --h-block-lo: #7a1616;
  --h-engrave: 1; --h-band: radial-gradient(circle at 50% 100%, #c9a227 0 5px, #a31f1f 5px 9px, #c9a227 9px 11px, #a31f1f 11px 15px, transparent 15px) 0 0 / 30px 15px, #a31f1f;
  --h-display: "Zen Antique", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #a31f1f; --h-t2: #3c8d7a; --h-t3: #8a6a1a; --h-t4: #141414;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="wereld"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e0554b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e0554b; --h-block-hi: #e0554b; --h-block-lo: #a31f1f; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="wereld"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e0554b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e0554b; --h-block-hi: #e0554b; --h-block-lo: #a31f1f; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="hollands"] {
  --h-paper: #f4f2ea; --h-panel: #fbfbf7; --h-ink: #14254d; --h-muted: #4a5a80; --h-line: #14254d; --h-soft: #b9c6e0; --h-grid: #e2e8f3;
  --h-main: #1b3f8b; --h-on-main: #ffffff; --h-second: #e8771e; --h-on-second: #14254d; --h-third: #9e3b2a; --h-gold: #e8771e;
  --h-head: #1b3f8b; --h-head-ink: #f7f8fb; --h-block: #1b3f8b; --h-block-hi: #4a6fc0; --h-block-lo: #102c66;
  --h-engrave: 1; --h-band: radial-gradient(circle at 11px 11px, #1b3f8b 0 4px, #cfdbf2 4px 7px, transparent 7px) 0 0 / 22px 22px, linear-gradient(90deg, #1b3f8b 2px, transparent 2px) 0 0 / 22px 22px, #f7f8fb;
  --h-display: "IM Fell DW Pica", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #1b3f8b; --h-t2: #2c5bb8; --h-t3: #9e3b2a; --h-t4: #14254d;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="hollands"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7e9fe6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7e9fe6; --h-block-hi: #7e9fe6; --h-block-lo: #1b3f8b; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="hollands"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7e9fe6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7e9fe6; --h-block-hi: #7e9fe6; --h-block-lo: #1b3f8b; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="tuinen"] {
  --h-paper: #eee7d6; --h-panel: #f8f4ea; --h-ink: #1f2e22; --h-muted: #4e5a48; --h-line: #1f2e22; --h-soft: #c9c0a4; --h-grid: #e3dcc6;
  --h-main: #2f5d3a; --h-on-main: #ffffff; --h-second: #a8405a; --h-on-second: #ffffff; --h-third: #5e4e8a; --h-gold: #c9a227;
  --h-head: #1f2e22; --h-head-ink: #e6dcc4; --h-block: #2f5d3a; --h-block-hi: #4f8a5a; --h-block-lo: #1f4228;
  --h-engrave: 1; --h-band: radial-gradient(circle, #2f5d3a 0 7px, transparent 8px) 0 0 / 24px 24px, radial-gradient(circle at 0 0, #c2516b 0 4px, transparent 5px) 0 0 / 24px 24px, #e6dcc4;
  --h-display: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #2f5d3a; --h-t2: #a8405a; --h-t3: #5e4e8a; --h-t4: #1f2e22;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="tuinen"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb07c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb07c; --h-block-hi: #6fb07c; --h-block-lo: #2f5d3a; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="tuinen"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb07c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb07c; --h-block-hi: #6fb07c; --h-block-lo: #2f5d3a; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="water"] {
  --h-paper: #eadbb8; --h-panel: #f3e8cf; --h-ink: #2b2016; --h-muted: #5e4c32; --h-line: #2b2016; --h-soft: #c9b48a; --h-grid: #dfcfa8;
  --h-main: #2a5a6e; --h-on-main: #ffffff; --h-second: #a3271e; --h-on-second: #ffffff; --h-third: #8a6400; --h-gold: #b8860b;
  --h-head: #2a5a6e; --h-head-ink: #eadbb8; --h-block: #2a5a6e; --h-block-hi: #4a7f94; --h-block-lo: #1c4252;
  --h-engrave: 1; --h-band: repeating-linear-gradient(-60deg, #c9a06a 0 6px, #8a6a3e 6px 9px);
  --h-display: "IM Fell English SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #2a5a6e; --h-t2: #a3271e; --h-t3: #8a6400; --h-t4: #2b2016;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="water"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb0c8; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb0c8; --h-block-hi: #6fb0c8; --h-block-lo: #2a5a6e; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="water"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb0c8; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb0c8; --h-block-hi: #6fb0c8; --h-block-lo: #2a5a6e; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="details"] {
  --h-paper: #ece7df; --h-panel: #f6f2eb; --h-ink: #24211d; --h-muted: #5a544b; --h-line: #24211d; --h-soft: #c9c0b2; --h-grid: #e1dbd0;
  --h-main: #3f6b3a; --h-on-main: #ffffff; --h-second: #4e4a44; --h-on-second: #ffffff; --h-third: #8a3a22; --h-gold: #f2a93b;
  --h-head: #24211d; --h-head-ink: #f2ead8; --h-block: #4e4a44; --h-block-hi: #6f6a63; --h-block-lo: #34312c;
  --h-engrave: 1; --h-band: radial-gradient(ellipse, #8d877e 0 7px, #4e4a44 8px, transparent 9px) 0 0 / 20px 16px, #6f6a63;
  --h-display: "Grenze", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #3f6b3a; --h-t2: #4e4a44; --h-t3: #8a3a22; --h-t4: #24211d;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="details"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7fb078; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #a59f96; --h-block-hi: #a59f96; --h-block-lo: #4e4a44; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="details"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7fb078; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #a59f96; --h-block-hi: #a59f96; --h-block-lo: #4e4a44; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="toekomst"] {
  --h-paper: #0b0f1f; --h-panel: #121833; --h-ink: #e6f7ff; --h-muted: #9fb3cc; --h-line: #e6f7ff; --h-soft: #2a3a66; --h-grid: #18204a;
  --h-main: #22e4f5; --h-on-main: #05070f; --h-second: #ff3ea5; --h-on-second: #05070f; --h-third: #7a5cff; --h-gold: #ff3ea5;
  --h-head: #05070f; --h-head-ink: #e6f7ff; --h-block: #22e4f5; --h-block-hi: #7af0fa; --h-block-lo: #109aa6;
  --h-engrave: 0; --h-band: linear-gradient(90deg, rgba(34,228,245,.7) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(rgba(255,62,165,.7) 1px, transparent 1px) 0 0 / 16px 16px, #0b0f1f;
  --h-display: "Orbitron", "Eurostile", "Segoe UI", sans-serif; --h-body: "Exo 2", "Segoe UI", system-ui, sans-serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #1c2a5a; --h-t2: #5a1a46; --h-t3: #2a1e5a; --h-t4: #05070f;
  color-scheme: dark;
}
:root[data-huis="handig"] {
  --h-paper: #c6c6c6; --h-panel: #d6d6d6; --h-ink: #2b2b2b; --h-muted: #4a4a4a; --h-line: #2b2b2b; --h-soft: #8b8b8b; --h-grid: #b4b4b4;
  --h-main: #3b7a12; --h-on-main: #ffffff; --h-second: #5a5a5a; --h-on-second: #ffffff; --h-third: #7e7e7e; --h-gold: #ffff55;
  --h-head: #3f3f3f; --h-head-ink: #ffffff; --h-block: #3b7a12; --h-block-hi: #5aa52a; --h-block-lo: #285508;
  --h-engrave: 0; --h-band: repeating-linear-gradient(0deg, #b8945f 0 13px, #8f6b3a 13px 15px);
  --h-display: "Pixelify Sans", Consolas, monospace; --h-body: "Segoe UI", system-ui, sans-serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #3f3f3f; --h-t2: #5a1e1e; --h-t3: #3b7a12; --h-t4: #2b2b2b;
  color-scheme: light;
}


/* ---------------------------------------------------------------- house scopes (generated) */
[data-huis-scope="kastelen"] { --h-paper: #efe8d8; --h-panel: #fbf8f0; --h-ink: #1a1a1a; --h-muted: #4a4033; --h-line: #1a1a1a; --h-soft: #cdbf9f; --h-grid: #e3d9c2; --h-main: #b3202a; --h-on-main: #f5f2ea; --h-second: #1f4e9c; --h-on-second: #f5f2ea; --h-third: #2e7d3a; --h-gold: #e5b53a; --h-head: #1a1a1a; --h-head-ink: #f5f2ea; --h-block: #1f4e9c; --h-block-hi: #4a74be; --h-block-lo: #163a75; --h-engrave: 1; --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #f5f2ea 22px 44px); --h-display: "Grenze Gotisch", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #1f4e9c; --h-t2: #b3202a; --h-t3: #2e7d3a; --h-t4: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="kastelen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-second: #6f8fcb; --h-on-second: #0e0f13; --h-third: #5fae6a; --h-gold: #e5b53a; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #9db4e0; --h-block-lo: #3f5f9c; --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #2a2b33 22px 44px); --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="kastelen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-second: #6f8fcb; --h-on-second: #0e0f13; --h-third: #5fae6a; --h-gold: #e5b53a; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #9db4e0; --h-block-lo: #3f5f9c; --h-band: repeating-linear-gradient(90deg, #b3202a 0 22px, #2a2b33 22px 44px); --h-t4: #3a3b46; }
[data-huis-scope="vormen"] { --h-paper: #efe6d2; --h-panel: #f8f1e0; --h-ink: #2b1d12; --h-muted: #6b5440; --h-line: #2b1d12; --h-soft: #c9b48a; --h-grid: #e3d6b8; --h-main: #a3221a; --h-on-main: #fff7e8; --h-second: #2d4fa0; --h-on-second: #ffffff; --h-third: #8a6400; --h-gold: #b8860b; --h-head: #2b1d12; --h-head-ink: #efe6d2; --h-block: #2d4fa0; --h-block-hi: #5a78c0; --h-block-lo: #1e3670; --h-engrave: 1; --h-band: radial-gradient(circle at 0 0, transparent 0 18px, #2b1d12 18px 20px, transparent 20px) 0 0 / 20px 20px, #efe6d2; --h-display: "Cormorant SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #2d4fa0; --h-t2: #a3221a; --h-t3: #8a6400; --h-t4: #2b1d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="vormen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7f9be0; --h-block-hi: #7f9be0; --h-block-lo: #2d4fa0; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="vormen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7f9be0; --h-block-hi: #7f9be0; --h-block-lo: #2d4fa0; --h-t4: #3a3b46; }
[data-huis-scope="daken"] { --h-paper: #ecedea; --h-panel: #f6f6f3; --h-ink: #20262c; --h-muted: #55606b; --h-line: #20262c; --h-soft: #b9c0c7; --h-grid: #dfe3e6; --h-main: #4a5560; --h-on-main: #ffffff; --h-second: #9c6b3a; --h-on-second: #ffffff; --h-third: #5e6e4a; --h-gold: #c9a227; --h-head: #20262c; --h-head-ink: #e7e9eb; --h-block: #4a5560; --h-block-hi: #6b7785; --h-block-lo: #2f3840; --h-engrave: 1; --h-band: radial-gradient(circle at 50% 0, #6b7785 0 9px, #20262c 9px 11px, transparent 11px) 0 0 / 20px 12px, #4a5560; --h-display: "Alegreya SC", "Book Antiqua", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #4a5560; --h-t2: #9c6b3a; --h-t3: #5e6e4a; --h-t4: #20262c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="daken"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #9aa8b6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #8e9cab; --h-block-hi: #8e9cab; --h-block-lo: #4a5560; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="daken"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #9aa8b6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #8e9cab; --h-block-hi: #8e9cab; --h-block-lo: #4a5560; --h-t4: #3a3b46; }
[data-huis-scope="kerken"] { --h-paper: #f2e9d6; --h-panel: #fbf6ea; --h-ink: #1e1a16; --h-muted: #5a5046; --h-line: #1e1a16; --h-soft: #cdbf9f; --h-grid: #e6dcc4; --h-main: #9b111e; --h-on-main: #fff7e8; --h-second: #0f3d8c; --h-on-second: #ffffff; --h-third: #0b6e4f; --h-gold: #e0a100; --h-head: #222222; --h-head-ink: #e9e2d2; --h-block: #0f3d8c; --h-block-hi: #3a62a8; --h-block-lo: #0b2e6a; --h-engrave: 1; --h-band: linear-gradient(45deg, #9b111e 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(-45deg, #0f3d8c 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, transparent 75%, #0b6e4f 75%) 0 0 / 24px 24px, linear-gradient(-45deg, transparent 75%, #e0a100 75%) 0 0 / 24px 24px, #222222; --h-display: "Uncial Antiqua", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #0f3d8c; --h-t2: #9b111e; --h-t3: #0b6e4f; --h-t4: #1e1a16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="kerken"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #6f8fcb; --h-block-lo: #0f3d8c; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="kerken"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8424b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6f8fcb; --h-block-hi: #6f8fcb; --h-block-lo: #0f3d8c; --h-t4: #3a3b46; }
[data-huis-scope="historisch"] { --h-paper: #f2eee6; --h-panel: #faf7f1; --h-ink: #2a211b; --h-muted: #5e5046; --h-line: #2a211b; --h-soft: #d3c6ad; --h-grid: #e8e0cf; --h-main: #8e2a20; --h-on-main: #fff7ee; --h-second: #3e6b5a; --h-on-second: #ffffff; --h-third: #8a6a2a; --h-gold: #c99a3b; --h-head: #2a211b; --h-head-ink: #e6dccb; --h-block: #8e2a20; --h-block-hi: #b5523b; --h-block-lo: #6a1f18; --h-engrave: 1; --h-band: repeating-linear-gradient(90deg, #8e2a20 0 4px, transparent 4px 16px), linear-gradient(#8e2a20 0 4px, #c99a3b 4px 12px, #8e2a20 12px); --h-display: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #8e2a20; --h-t2: #3e6b5a; --h-t3: #8a6a2a; --h-t4: #2a211b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="historisch"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d0644f; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #d0644f; --h-block-hi: #d0644f; --h-block-lo: #8e2a20; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="historisch"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d0644f; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #d0644f; --h-block-hi: #d0644f; --h-block-lo: #8e2a20; --h-t4: #3a3b46; }
[data-huis-scope="wereld"] { --h-paper: #f3ebdd; --h-panel: #fbf6ec; --h-ink: #141414; --h-muted: #5a4e40; --h-line: #141414; --h-soft: #d4c4a6; --h-grid: #e9dfcb; --h-main: #a31f1f; --h-on-main: #fff7ec; --h-second: #3c8d7a; --h-on-second: #ffffff; --h-third: #8a6a1a; --h-gold: #c9a227; --h-head: #141414; --h-head-ink: #e8dcc4; --h-block: #a31f1f; --h-block-hi: #c94a3e; --h-block-lo: #7a1616; --h-engrave: 1; --h-band: radial-gradient(circle at 50% 100%, #c9a227 0 5px, #a31f1f 5px 9px, #c9a227 9px 11px, #a31f1f 11px 15px, transparent 15px) 0 0 / 30px 15px, #a31f1f; --h-display: "Zen Antique", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #a31f1f; --h-t2: #3c8d7a; --h-t3: #8a6a1a; --h-t4: #141414; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="wereld"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e0554b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e0554b; --h-block-hi: #e0554b; --h-block-lo: #a31f1f; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="wereld"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e0554b; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e0554b; --h-block-hi: #e0554b; --h-block-lo: #a31f1f; --h-t4: #3a3b46; }
[data-huis-scope="hollands"] { --h-paper: #f4f2ea; --h-panel: #fbfbf7; --h-ink: #14254d; --h-muted: #4a5a80; --h-line: #14254d; --h-soft: #b9c6e0; --h-grid: #e2e8f3; --h-main: #1b3f8b; --h-on-main: #ffffff; --h-second: #e8771e; --h-on-second: #14254d; --h-third: #9e3b2a; --h-gold: #e8771e; --h-head: #1b3f8b; --h-head-ink: #f7f8fb; --h-block: #1b3f8b; --h-block-hi: #4a6fc0; --h-block-lo: #102c66; --h-engrave: 1; --h-band: radial-gradient(circle at 11px 11px, #1b3f8b 0 4px, #cfdbf2 4px 7px, transparent 7px) 0 0 / 22px 22px, linear-gradient(90deg, #1b3f8b 2px, transparent 2px) 0 0 / 22px 22px, #f7f8fb; --h-display: "IM Fell DW Pica", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #1b3f8b; --h-t2: #2c5bb8; --h-t3: #9e3b2a; --h-t4: #14254d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="hollands"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7e9fe6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7e9fe6; --h-block-hi: #7e9fe6; --h-block-lo: #1b3f8b; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="hollands"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7e9fe6; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #7e9fe6; --h-block-hi: #7e9fe6; --h-block-lo: #1b3f8b; --h-t4: #3a3b46; }
[data-huis-scope="tuinen"] { --h-paper: #eee7d6; --h-panel: #f8f4ea; --h-ink: #1f2e22; --h-muted: #4e5a48; --h-line: #1f2e22; --h-soft: #c9c0a4; --h-grid: #e3dcc6; --h-main: #2f5d3a; --h-on-main: #ffffff; --h-second: #a8405a; --h-on-second: #ffffff; --h-third: #5e4e8a; --h-gold: #c9a227; --h-head: #1f2e22; --h-head-ink: #e6dcc4; --h-block: #2f5d3a; --h-block-hi: #4f8a5a; --h-block-lo: #1f4228; --h-engrave: 1; --h-band: radial-gradient(circle, #2f5d3a 0 7px, transparent 8px) 0 0 / 24px 24px, radial-gradient(circle at 0 0, #c2516b 0 4px, transparent 5px) 0 0 / 24px 24px, #e6dcc4; --h-display: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #2f5d3a; --h-t2: #a8405a; --h-t3: #5e4e8a; --h-t4: #1f2e22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="tuinen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb07c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb07c; --h-block-hi: #6fb07c; --h-block-lo: #2f5d3a; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="tuinen"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb07c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb07c; --h-block-hi: #6fb07c; --h-block-lo: #2f5d3a; --h-t4: #3a3b46; }
[data-huis-scope="water"] { --h-paper: #eadbb8; --h-panel: #f3e8cf; --h-ink: #2b2016; --h-muted: #5e4c32; --h-line: #2b2016; --h-soft: #c9b48a; --h-grid: #dfcfa8; --h-main: #2a5a6e; --h-on-main: #ffffff; --h-second: #a3271e; --h-on-second: #ffffff; --h-third: #8a6400; --h-gold: #b8860b; --h-head: #2a5a6e; --h-head-ink: #eadbb8; --h-block: #2a5a6e; --h-block-hi: #4a7f94; --h-block-lo: #1c4252; --h-engrave: 1; --h-band: repeating-linear-gradient(-60deg, #c9a06a 0 6px, #8a6a3e 6px 9px); --h-display: "IM Fell English SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #2a5a6e; --h-t2: #a3271e; --h-t3: #8a6400; --h-t4: #2b2016; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="water"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb0c8; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb0c8; --h-block-hi: #6fb0c8; --h-block-lo: #2a5a6e; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="water"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #6fb0c8; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #6fb0c8; --h-block-hi: #6fb0c8; --h-block-lo: #2a5a6e; --h-t4: #3a3b46; }
[data-huis-scope="details"] { --h-paper: #ece7df; --h-panel: #f6f2eb; --h-ink: #24211d; --h-muted: #5a544b; --h-line: #24211d; --h-soft: #c9c0b2; --h-grid: #e1dbd0; --h-main: #3f6b3a; --h-on-main: #ffffff; --h-second: #4e4a44; --h-on-second: #ffffff; --h-third: #8a3a22; --h-gold: #f2a93b; --h-head: #24211d; --h-head-ink: #f2ead8; --h-block: #4e4a44; --h-block-hi: #6f6a63; --h-block-lo: #34312c; --h-engrave: 1; --h-band: radial-gradient(ellipse, #8d877e 0 7px, #4e4a44 8px, transparent 9px) 0 0 / 20px 16px, #6f6a63; --h-display: "Grenze", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #3f6b3a; --h-t2: #4e4a44; --h-t3: #8a3a22; --h-t4: #24211d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="details"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7fb078; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #a59f96; --h-block-hi: #a59f96; --h-block-lo: #4e4a44; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="details"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #7fb078; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #a59f96; --h-block-hi: #a59f96; --h-block-lo: #4e4a44; --h-t4: #3a3b46; }
[data-huis-scope="toekomst"] { --h-paper: #0b0f1f; --h-panel: #121833; --h-ink: #e6f7ff; --h-muted: #9fb3cc; --h-line: #e6f7ff; --h-soft: #2a3a66; --h-grid: #18204a; --h-main: #22e4f5; --h-on-main: #05070f; --h-second: #ff3ea5; --h-on-second: #05070f; --h-third: #7a5cff; --h-gold: #ff3ea5; --h-head: #05070f; --h-head-ink: #e6f7ff; --h-block: #22e4f5; --h-block-hi: #7af0fa; --h-block-lo: #109aa6; --h-engrave: 0; --h-band: linear-gradient(90deg, rgba(34,228,245,.7) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(rgba(255,62,165,.7) 1px, transparent 1px) 0 0 / 16px 16px, #0b0f1f; --h-display: "Orbitron", "Eurostile", "Segoe UI", sans-serif; --h-body: "Exo 2", "Segoe UI", system-ui, sans-serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #1c2a5a; --h-t2: #5a1a46; --h-t3: #2a1e5a; --h-t4: #05070f; }
[data-huis-scope="handig"] { --h-paper: #c6c6c6; --h-panel: #d6d6d6; --h-ink: #2b2b2b; --h-muted: #4a4a4a; --h-line: #2b2b2b; --h-soft: #8b8b8b; --h-grid: #b4b4b4; --h-main: #3b7a12; --h-on-main: #ffffff; --h-second: #5a5a5a; --h-on-second: #ffffff; --h-third: #7e7e7e; --h-gold: #ffff55; --h-head: #3f3f3f; --h-head-ink: #ffffff; --h-block: #3b7a12; --h-block-hi: #5aa52a; --h-block-lo: #285508; --h-engrave: 0; --h-band: repeating-linear-gradient(0deg, #b8945f 0 13px, #8f6b3a 13px 15px); --h-display: "Pixelify Sans", Consolas, monospace; --h-body: "Segoe UI", system-ui, sans-serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #3f3f3f; --h-t2: #5a1e1e; --h-t3: #3b7a12; --h-t4: #2b2b2b; }
[data-huis-scope="stad"] { --h-paper: #f3eee4; --h-panel: #fbf8f1; --h-ink: #2a1a1c; --h-muted: #5e4547; --h-line: #2a1a1c; --h-soft: #dccbbd; --h-grid: #ece2d6; --h-main: #7a1f2b; --h-on-main: #ffffff; --h-second: #c79a2f; --h-on-second: #2a1a1c; --h-third: #1f3d6b; --h-gold: #c79a2f; --h-head: #7a1f2b; --h-head-ink: #fbf5ea; --h-block: #7a1f2b; --h-block-hi: #a8434f; --h-block-lo: #561520; --h-engrave: 1; --h-band: repeating-conic-gradient(#7a1f2b 0 25%, #c79a2f 0 50%) 0 0 / 16px 16px; --h-display: "Alegreya SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #7a1f2b; --h-t2: #1f3d6b; --h-t3: #6b5418; --h-t4: #2a1a1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="stad"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e3949c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e3949c; --h-block-hi: #e3949c; --h-block-lo: #7a1f2b; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="stad"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e3949c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e3949c; --h-block-hi: #e3949c; --h-block-lo: #7a1f2b; --h-t4: #3a3b46; }
[data-huis-scope="atlas"] { --h-paper: #efe6d2; --h-panel: #f8f1e0; --h-ink: #2b1d12; --h-muted: #6b5440; --h-line: #2b1d12; --h-soft: #c9b48a; --h-grid: #e3d6b8; --h-main: #a3221a; --h-on-main: #fff7e8; --h-second: #2d4fa0; --h-on-second: #ffffff; --h-third: #2e7d3a; --h-gold: #b8860b; --h-head: #1c1712; --h-head-ink: #efe6d2; --h-block: #2d4fa0; --h-block-hi: #5a78c0; --h-block-lo: #1e3670; --h-engrave: 1; --h-band: repeating-linear-gradient(90deg, #2d4fa0 0 18px, #4a5560 18px 36px, #9b111e 36px 54px, #b3202a 54px 72px, #8e2a20 72px 90px, #a31f1f 90px 108px, #1b3f8b 108px 126px, #2f5d3a 126px 144px, #2a5a6e 144px 162px, #22e4f5 162px 180px, #6f6a63 180px 198px, #3b7a12 198px 216px); --h-display: "Grenze Gotisch", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace; --h-t1: #2d4fa0; --h-t2: #a3221a; --h-t3: #2e7d3a; --h-t4: #2b1d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-huis-scope="atlas"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-t4: #3a3b46; } }
:root[data-theme="dark"] [data-huis-scope="atlas"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-t4: #3a3b46; }
/* house scopes end */

/* ---------------------------------------------------------------- tokens onto site and tool */
:root[data-huis] {
  --bg: var(--h-paper); --surface: var(--h-panel); --ink: var(--h-ink); --muted: var(--h-muted); --line: var(--h-soft);
  --accent: var(--h-main); --accent-hi: var(--h-main); --accent-ink: var(--h-on-main); --mark: var(--h-main);
  --font: var(--h-body);
}
:root[data-huis] .mcdp {
  --mcdp-bg: var(--h-paper); --mcdp-surface: var(--h-panel); --mcdp-ink: var(--h-ink); --mcdp-muted: var(--h-muted);
  --mcdp-line: var(--h-soft); --mcdp-grid: var(--h-grid); --mcdp-major: var(--h-soft);
  --mcdp-block: var(--h-block); --mcdp-block-hi: var(--h-block-hi); --mcdp-block-lo: var(--h-block-lo);
  --mcdp-stair: var(--h-block-hi); --mcdp-stair-lo: var(--h-block-lo); --mcdp-on-block: var(--h-on-second);
  --mcdp-mark: var(--h-main); --mcdp-hl: color-mix(in srgb, var(--h-main) 16%, transparent);
  --mcdp-placed: var(--h-soft); --mcdp-ghost: var(--h-grid);
  --mcdp-mono: var(--h-num);
  color-scheme: inherit;
}
/* the circle planner still uses its own mccp-* names (huis.js also gives its elements the mcdp-* classes) */
:root[data-huis] .mccp {
  --mccp-bg: var(--h-paper); --mccp-surface: var(--h-panel); --mccp-ink: var(--h-ink); --mccp-muted: var(--h-muted);
  --mccp-line: var(--h-soft); --mccp-grid: var(--h-grid); --mccp-major: var(--h-soft);
  --mccp-block: var(--h-block); --mccp-block-hi: var(--h-block-hi); --mccp-block-lo: var(--h-block-lo); --mccp-on-block: var(--h-on-second);
  --mccp-mark: var(--h-main); --mccp-hl: color-mix(in srgb, var(--h-main) 16%, transparent); --mccp-placed: var(--h-soft); --mccp-mono: var(--h-num);
}

/* ---------------------------------------------------------------- paper */
:root[data-huis] body {
  background-color: var(--h-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: var(--h-body);
  font-size: 17px;
}

/* ---------------------------------------------------------------- header as a title page */
:root[data-huis] .site-header { background: var(--h-head); color: var(--h-head-ink); border-bottom: 0; position: relative; padding-bottom: 22px; }
:root[data-huis] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--h-band); border-top: 3px solid var(--h-head); box-shadow: 0 3px 0 var(--h-head); }
:root[data-huis] .brand { color: var(--h-gold); font-family: var(--h-display); font-weight: 800; font-size: 26px; letter-spacing: 0; padding: 2px 14px; border-top: 2px solid var(--h-gold); border-bottom: 2px solid var(--h-gold); }
:root[data-huis] .brand svg .px-a { fill: var(--h-gold); }
:root[data-huis] .brand svg .px-m { fill: var(--h-main); }
:root[data-huis] .site-nav a { color: color-mix(in srgb, var(--h-head-ink) 72%, transparent); font-family: var(--h-body); font-size: 17px; }
:root[data-huis] .site-nav a:hover, :root[data-huis] .site-nav a[aria-current="page"] { color: var(--h-head-ink); }
:root[data-huis] .site-nav a[aria-current="page"] { border-bottom: 3px double var(--h-gold); }
:root[data-huis] .site-nav a.nav-all { color: var(--h-gold); }
:root[data-huis] .lang-menu summary, :root[data-huis] .theme-btn { background: transparent; color: var(--h-head-ink); border: 2px solid var(--h-gold); border-radius: 0; font-family: var(--h-body); font-size: 15px; }
:root[data-huis] .lang-menu ul { border-radius: 0; border: 2px solid var(--h-ink); }

/* ---------------------------------------------------------------- title with an illuminated initial */
:root[data-huis] .mcdp-eyebrow { font-family: var(--h-body); font-size: 14px; letter-spacing: .16em; color: var(--h-muted); }
:root[data-huis] .mcdp .mcdp-title { font-family: var(--h-display); font-weight: 800; font-size: clamp(40px, 6vw, 68px); letter-spacing: 0; line-height: 1; color: var(--h-ink); }
:root[data-huis] .mcdp .mcdp-title::first-letter {
  float: left; margin: 0 10px 0 0; padding: 6px 14px 10px; font-size: 1.25em; line-height: .9;
  color: var(--h-on-main); background: var(--h-main); border: 3px solid var(--h-ink); outline: 2px solid var(--h-gold); outline-offset: -8px;
}
:root[data-huis] .mcdp-head { gap: 10px; }
:root[data-huis] .mcdp-head p { font-style: italic; font-size: 19px; color: var(--h-ink); max-width: 64ch; }

/* ---------------------------------------------------------------- stats as ribbons */
:root[data-huis] .mcdp-stats { border: 0; background: none; gap: 10px; border-radius: 0; }
:root[data-huis] .mcdp-stat {
  border: 0; padding: 10px 26px; color: #f5f2ea; background: var(--h-t4);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
:root[data-huis] .mcdp-stat:nth-child(4n+2) { background: var(--h-t1); }
:root[data-huis] .mcdp-stat:nth-child(4n+3) { background: var(--h-t2); }
:root[data-huis] .mcdp-stat:nth-child(4n+4) { background: var(--h-t3); }
:root[data-huis] .mcdp-stat .mcdp-k { color: #f5f2ea; opacity: .85; font-family: var(--h-body); font-size: 13px; }
:root[data-huis] .mcdp-stat .mcdp-s { color: #f5f2ea; opacity: .85; font-style: italic; font-size: 14px; }
:root[data-huis] .mcdp-stat .mcdp-v { color: #fff; }
@container (max-width: 560px) { :root[data-huis] .mcdp-stat:nth-child(n) { border: 0; } }

/* ---------------------------------------------------------------- settings panel: framed, with chapters */
:root[data-huis] .mcdp-panel {
  position: relative; border-radius: 0; border: 3px solid var(--h-line); outline: 1px solid var(--h-line); outline-offset: -9px;
  padding: 26px 20px 22px; gap: 18px; background: var(--h-panel);
}
/* corner ornaments, painted in the house colour through a mask */
:root[data-huis] .mcdp-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--h-main);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform=''%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") top left / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(58 0) scale(-1 1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") top right / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(0 58) scale(1 -1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") bottom left / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(58 58) scale(-1 -1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") bottom right / 58px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform=''%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") top left / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(58 0) scale(-1 1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") top right / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(0 58) scale(1 -1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") bottom left / 58px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg transform='translate(58 58) scale(-1 -1)'%3E%3Cpath d='M16 16C28 16 30 28 22 30C16 31 16 24 21 24' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M24 11C32 5 40 7 46 11C38 14 30 14 24 11Z'/%3E%3Cpath d='M11 24C5 32 7 40 11 46C14 38 14 30 11 24Z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/g%3E%3C/svg%3E") bottom right / 58px no-repeat;
}
:root[data-huis] .mcdp-panel::before {
  content: "Instellingen"; display: block; text-align: center; font-family: var(--h-display); font-weight: 800; font-size: 26px; line-height: 1;
  padding-bottom: 12px; margin: -6px 24px 0;
  border-bottom: 1px solid var(--h-ink); box-shadow: 0 3px 0 -1px var(--h-panel), 0 4px 0 -1px var(--h-ink);
}
:root[data-huis][lang="en"] .mcdp-panel::before { content: "Settings"; }
:root[data-huis] .mcdp-label { font-family: var(--h-body); font-size: 15px; letter-spacing: .04em; text-transform: none; font-weight: 700; color: var(--h-ink); }
:root[data-huis] .mcdp-label small { font-style: italic; color: var(--h-muted); font-size: 14px; }
:root[data-huis] .mcdp p.mcdp-hint { font-style: italic; font-size: 15px; }

:root[data-huis] .mcdp-layout { grid-template-columns: 350px minmax(0, 1fr); gap: 28px; }
@container (max-width: 860px) { :root[data-huis] .mcdp-layout { grid-template-columns: minmax(0, 1fr); } }
:root[data-huis] .mcdp-panel > *, .huis-ch-b > * { min-width: 0; }
:root[data-huis] .mcdp select { max-width: 100%; text-overflow: ellipsis; }

.huis-chs { display: grid; border-top: 2px solid var(--h-line); }
.huis-ch { border-bottom: 2px solid var(--h-line); }
.mcdp .huis-ch-h { margin: 0; font: inherit; }
:root[data-huis] .mcdp .huis-ch-h button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 12px; border: 0; border-radius: 0;
  background: var(--ch-bg); color: var(--ch-fg, #f5f2ea); text-align: left; cursor: pointer; font-size: inherit;
}
:root[data-huis] .mcdp .huis-ch-h button:hover { background: var(--ch-bg); color: var(--ch-fg, #f5f2ea); filter: brightness(1.1); }
.huis-ch-n { font-family: var(--h-display); font-weight: 800; font-size: 17px; width: 30px; opacity: .9; }
.huis-ch-t { font-family: var(--h-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.huis-ch-s { margin-left: auto; font-family: var(--h-body); font-weight: 400; font-style: italic; font-size: 15px; text-align: right; opacity: .92; max-width: 55%; }
.huis-ch-sign { font-family: var(--h-body); font-size: 20px; width: 14px; text-align: center; flex: none; }
.huis-ch-s[hidden] + .huis-ch-sign { margin-left: auto; }
.huis-ch-b { display: grid; gap: 18px; padding: 16px 12px 20px; }
.huis-ch:nth-child(4n+1) { --ch-bg: var(--h-t1); }
.huis-ch:nth-child(4n+2) { --ch-bg: var(--h-t2); }
.huis-ch:nth-child(4n+3) { --ch-bg: var(--h-t3); }
.huis-ch:nth-child(4n+4) { --ch-bg: var(--h-t4); --ch-fg: var(--h-gold); }

/* ---------------------------------------------------------------- controls */
:root[data-huis] .mcdp select, :root[data-huis] .mcdp input[type="number"] {
  border-radius: 0; border: 2px solid var(--h-ink); background: var(--h-panel); font-family: var(--h-body); font-size: 16px; font-weight: 700;
}
:root[data-huis] .mcdp input[type="number"] { font-family: var(--h-num); }
:root[data-huis] .mcdp input[type="range"] { accent-color: var(--h-main); }
:root[data-huis] .mcdp-seg { border: 2px solid var(--h-ink); border-radius: 0; }
:root[data-huis] .mcdp-seg span { border-left: 2px solid var(--h-ink); font-family: var(--h-body); font-size: 14px; padding: 8px 2px; overflow-wrap: normal; hyphens: manual; }
:root[data-huis] .mcdp-seg input:checked + span { background: var(--h-main); color: var(--h-on-main); }
:root[data-huis] .mcdp button, :root[data-huis] .iso button, :root[data-huis] .bx button, :root[data-huis] .list-btn {
  border-radius: 0; border: 2px solid var(--h-ink); background: var(--h-panel); color: var(--h-ink); font-family: var(--h-body); font-weight: 700; font-size: 15px; padding: 7px 14px;
}
:root[data-huis] .mcdp button:hover, :root[data-huis] .iso button:hover, :root[data-huis] .bx button:hover, :root[data-huis] .list-btn:hover { border-color: var(--h-main); color: var(--h-main); }
:root[data-huis] .bx-go, :root[data-huis] .list-btn {
  background: var(--h-main) !important; color: var(--h-on-main) !important; border: 3px solid var(--h-ink) !important;
  outline: 1.5px solid var(--h-gold); outline-offset: -7px; font-family: var(--h-display) !important; font-weight: 800 !important; font-size: 19px !important; padding: 10px 20px !important;
}
:root[data-huis] .mcdp-layer-name, :root[data-huis] .iso-layer { font-family: var(--h-num); }

/* ---------------------------------------------------------------- the stage: framed plates with captions */
:root[data-huis] .mcdp-canvas-box, :root[data-huis] .iso-box {
  border-radius: 0; border: 3px solid var(--h-line); background: var(--h-panel);
  box-shadow: 0 0 0 5px var(--h-paper), 0 0 0 8px var(--h-main), 0 0 0 9px var(--h-line);
  margin: 9px;
}
:root[data-huis] .mcdp-view-head h3, :root[data-huis] .iso-plan-head strong { font-family: var(--h-display); font-weight: 800; font-size: 24px; }
.huis-fig { display: grid; gap: 10px; }
.huis-fig-cap { text-align: center; font-style: italic; color: var(--h-muted); font-size: 16px; margin: 0; }
.huis-fig-cap b { font-family: var(--h-display); font-weight: 800; font-style: normal; color: var(--h-ink); margin-right: 4px; }
:root[data-huis] .mcdp-readout { font-family: var(--h-num); }

.extras.huis-moved { grid-template-columns: minmax(0, 1fr); }
.extras.huis-moved .extra-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 900px) { .extras.huis-moved .extra-stack { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- cards below: plates and chapters */
:root[data-huis] .mcdp-card, :root[data-huis] .extra-card {
  border-radius: 0; border: 3px solid var(--h-line); outline: 1px solid var(--h-line); outline-offset: -9px; background: var(--h-panel); padding: 24px 26px;
}
:root[data-huis] .mcdp .mcdp-h, :root[data-huis] .extra-card h2 { font-family: var(--h-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--h-main); }
:root[data-huis] .mcdp-card h3, :root[data-huis] .info-card h3 { font-family: var(--h-display); font-weight: 800; font-size: 22px; }
:root[data-huis] .extra-card p { color: var(--h-ink); font-size: 16px; }
:root[data-huis] .mcdp th, :root[data-huis] .pal-table th { font-family: var(--h-body); font-size: 13px; color: var(--h-ink); border-bottom: 2px solid var(--h-ink); }
:root[data-huis] .mcdp-rows { border-radius: 0; border: 2px solid var(--h-ink); }
:root[data-huis] .how .calc-block { border-radius: 0; border: 0; border-left: 3px solid var(--h-main); background: transparent; font-size: 15px; }
:root[data-huis] .how code, :root[data-huis] .how .calc { border-radius: 0; }
:root[data-huis] .info-card p, :root[data-huis] .info-card li { font-size: 17px; line-height: 1.55; }
:root[data-huis] .info-history > h3:first-of-type + p::first-letter, :root[data-huis] .info-about > p:first-of-type::first-letter {
  float: left; font-family: var(--h-display); font-weight: 800; font-size: 3.1em; line-height: .8; margin: 4px 8px 0 0; color: var(--h-main);
}
:root[data-huis] .info-faq details { border-top: 1px solid var(--h-ink); }
:root[data-huis] .info-faq summary { font-family: var(--h-body); font-weight: 700; font-size: 18px; }
:root[data-huis] .info-faq summary::marker { color: var(--h-main); }

/* ---------------------------------------------------------------- footer */
:root[data-huis] .site-footer { background: var(--h-head); color: color-mix(in srgb, var(--h-head-ink) 78%, transparent); border-top: 0; position: relative; padding-top: 16px; }
:root[data-huis] .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--h-band); }
:root[data-huis] .foot-links { border-bottom-color: color-mix(in srgb, var(--h-head-ink) 30%, transparent); }
:root[data-huis] .foot-links h2 { color: var(--h-gold); font-family: var(--h-body); }
:root[data-huis] .foot-links a { color: color-mix(in srgb, var(--h-head-ink) 80%, transparent); }
:root[data-huis] .foot-links a:hover { color: var(--h-gold); }

/* ---------------------------------------------------------------- Jacob, the chronicler */
:root[data-huis] .bob-head {
  border-radius: 0; border: 3px solid var(--h-ink); outline: 1.5px solid var(--h-gold); outline-offset: -7px;
  background: var(--h-panel); font-family: var(--h-display); font-weight: 800; font-size: 18px; padding: 6px 14px 6px 8px;
}
:root[data-huis] .bob-head svg { border-radius: 0; }
:root[data-huis] .bob-bubble {
  border-radius: 0; border: 2px solid var(--h-ink); background: var(--h-panel); transform: rotate(-.8deg); padding: 18px 18px 16px;
}
:root[data-huis] .bob-bubble::before { content: ""; position: absolute; top: -9px; left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--h-main); border: 2px solid var(--h-ink); }
:root[data-huis] .bob-bubble::after { background: var(--h-panel); border-color: var(--h-ink); border-width: 2px; }
:root[data-huis] .bob-top strong { font-family: var(--h-display); font-weight: 800; font-size: 22px; color: var(--h-main); }
:root[data-huis] .bob-tip { font-style: italic; font-size: 17px; }
:root[data-huis] .bob-next { border-radius: 0; background: var(--h-main); color: var(--h-on-main); font-family: var(--h-body); font-size: 15px; border: 2px solid var(--h-ink); }

@media (prefers-reduced-motion: reduce) { :root[data-huis] .bob-bubble { transform: none; } }

/* ---------------------------------------------------------------- house: the atlas (home page, "het boek van de bouwmeesters") */
:root[data-huis="stad"] {
  --h-paper: #f3eee4; --h-panel: #fbf8f1; --h-ink: #2a1a1c; --h-muted: #5e4547; --h-line: #2a1a1c; --h-soft: #dccbbd; --h-grid: #ece2d6;
  --h-main: #7a1f2b; --h-on-main: #ffffff; --h-second: #c79a2f; --h-on-second: #2a1a1c; --h-third: #1f3d6b; --h-gold: #c79a2f;
  --h-head: #7a1f2b; --h-head-ink: #fbf5ea; --h-block: #7a1f2b; --h-block-hi: #a8434f; --h-block-lo: #561520;
  --h-engrave: 1; --h-band: repeating-conic-gradient(#7a1f2b 0 25%, #c79a2f 0 50%) 0 0 / 16px 16px;
  --h-display: "Alegreya SC", "Palatino Linotype", "Book Antiqua", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #7a1f2b; --h-t2: #1f3d6b; --h-t3: #6b5418; --h-t4: #2a1a1c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-huis="stad"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e3949c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e3949c; --h-block-hi: #e3949c; --h-block-lo: #7a1f2b; --h-t4: #3a3b46; color-scheme: dark; } }
:root[data-huis="stad"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #e3949c; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-block: #e3949c; --h-block-hi: #e3949c; --h-block-lo: #7a1f2b; --h-t4: #3a3b46; color-scheme: dark; }
:root[data-huis="atlas"] {
  --h-paper: #efe6d2; --h-panel: #f8f1e0; --h-ink: #2b1d12; --h-muted: #6b5440; --h-line: #2b1d12; --h-soft: #c9b48a; --h-grid: #e3d6b8;
  --h-main: #a3221a; --h-on-main: #fff7e8; --h-second: #2d4fa0; --h-on-second: #ffffff; --h-third: #2e7d3a; --h-gold: #b8860b;
  --h-head: #1c1712; --h-head-ink: #efe6d2; --h-block: #2d4fa0; --h-block-hi: #5a78c0; --h-block-lo: #1e3670; --h-engrave: 1;
  /* the band: one stripe for every house, in the order of the book */
  --h-band: repeating-linear-gradient(90deg, #2d4fa0 0 18px, #4a5560 18px 36px, #9b111e 36px 54px, #b3202a 54px 72px, #8e2a20 72px 90px, #a31f1f 90px 108px,
    #1b3f8b 108px 126px, #2f5d3a 126px 144px, #2a5a6e 144px 162px, #22e4f5 162px 180px, #6f6a63 180px 198px, #3b7a12 198px 216px);
  --h-display: "Grenze Gotisch", "Palatino Linotype", Georgia, serif; --h-body: "Grenze", Georgia, "Times New Roman", serif; --h-num: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h-t1: #2d4fa0; --h-t2: #a3221a; --h-t3: #2e7d3a; --h-t4: #2b1d12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-huis="atlas"]:not([data-theme="light"]) { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-t4: #3a3b46; color-scheme: dark; }
}
:root[data-huis="atlas"][data-theme="dark"] { --h-paper: #17181e; --h-panel: #21232c; --h-ink: #ede6d6; --h-muted: #bdb29a; --h-line: #ede6d6; --h-soft: #4a4a55; --h-grid: #2c2e38; --h-main: #d8524a; --h-on-main: #000000; --h-head: #0e0f13; --h-head-ink: #ede6d6; --h-t4: #3a3b46; color-scheme: dark; }

/* ---------------------------------------------------------------- the "Bouwwerken" menu in a house */
:root[data-huis] .atlas-menu summary { background: transparent; color: var(--h-head-ink); border: 2px solid var(--h-gold); border-radius: 0; font-family: var(--h-body); font-size: 15px; }
:root[data-huis] .atlas-panel {
  --atlas-ink: var(--h-ink); --atlas-muted: var(--h-muted);
  background: var(--h-panel); color: var(--h-ink); border: 3px solid var(--h-ink); outline: 1px solid var(--h-ink); outline-offset: -8px; border-radius: 0; padding: 20px 22px;
}
:root[data-huis] .atlas-col { border-top: 0; padding-top: 0; }
:root[data-huis] .atlas-col h2 {
  font-family: var(--h-display); font-weight: 800; font-size: 19px; letter-spacing: 0; text-transform: none; line-height: 1.1;
  padding-top: 10px; border-top: 7px solid var(--h-main); margin-bottom: 4px;
}
:root[data-huis] .atlas-col a { font-family: var(--h-body); font-size: 16px; }
/* menu links on the home page: a diamond in the colour of the group's house */
:root[data-huis] .site-nav a[data-huis-scope]::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; transform: rotate(45deg) translateY(-1px);
  background: var(--h-main); outline: 1px solid var(--h-head-ink);
}

/* ---------------------------------------------------------------- home: title page */
:root[data-huis] .home .atlas-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px 40px; align-items: end; padding-block: 30px 34px; }
@media (max-width: 860px) { :root[data-huis] .home .atlas-hero { grid-template-columns: minmax(0, 1fr); } }
:root[data-huis] .home .eyebrow { font-family: var(--h-body); font-size: 14px; letter-spacing: .14em; color: var(--h-muted); }
:root[data-huis] .home .atlas-title h1 { margin: 10px 0 16px; font-family: var(--h-display); font-weight: 800; font-size: clamp(44px, 7vw, 86px); line-height: .95; letter-spacing: 0; color: var(--h-ink); }
:root[data-huis] .home .atlas-title h1::first-letter {
  float: left; margin: 0 12px 0 0; padding: 6px 14px 10px; font-size: 1.2em; line-height: .9;
  color: var(--h-on-main); background: var(--h-main); border: 3px solid var(--h-ink); outline: 2px solid var(--h-gold); outline-offset: -8px;
}
:root[data-huis] .home .atlas-lead { margin: 0; font-style: italic; font-size: 20px; line-height: 1.45; max-width: 58ch; color: var(--h-ink); }
.atlas-ribbons { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 4px; margin: 22px 0 0; padding: 0; }
.atlas-ribbons li {
  padding: 8px 24px; color: #f5f2ea; background: var(--h-t1); font-weight: 700; font-size: 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.atlas-ribbons li:nth-child(4n+2) { background: var(--h-t2); }
.atlas-ribbons li:nth-child(4n+3) { background: var(--h-t3); }
.atlas-ribbons li:nth-child(4n+4) { background: var(--h-t4); }
.atlas-jacob { margin: 0; display: flex; gap: 16px; align-items: flex-end; }
.atlas-jacob-face { flex: none; width: 112px; height: 112px; padding: 8px; background: var(--h-panel); border: 3px solid var(--h-ink); outline: 1px solid var(--h-ink); outline-offset: 3px; }
.atlas-jacob-face svg { display: block; width: 100%; height: 100%; }
.atlas-jacob figcaption {
  position: relative; display: grid; gap: 4px; padding: 20px 18px 28px; background: var(--h-panel); color: var(--h-ink); transform: rotate(-1.2deg);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 95% 93%, 90% 89%, 84% 95%, 78% 90%, 72% 96%, 66% 91%, 60% 97%, 54% 92%, 48% 98%, 42% 92%, 36% 97%, 30% 91%, 24% 96%, 18% 90%, 12% 95%, 6% 90%, 0 94%);
}
.atlas-jacob figcaption strong { font-family: var(--h-display); font-weight: 800; font-size: 24px; color: var(--h-main); line-height: 1; }
.atlas-role { font-family: var(--h-num); font-size: 11px; letter-spacing: .04em; color: var(--h-muted); }
.atlas-tip { font-style: italic; font-size: 17px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .atlas-jacob figcaption { transform: none; } }

/* languages: a quiet row */
:root[data-huis] .home .lang-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
:root[data-huis] .home .lang-pick h2 { font-family: var(--h-body); font-size: 15px; letter-spacing: .1em; color: var(--h-muted); }
:root[data-huis] .home .lang-pick-list a, :root[data-huis] .home .lang-pick-list .soon { border-radius: 0; padding: 6px 12px; background: var(--h-panel); border: 2px solid var(--h-ink); color: var(--h-ink); font-family: var(--h-body); }
:root[data-huis] .home .lang-pick-list a[aria-current] { box-shadow: inset 0 -4px 0 var(--h-main); border-color: var(--h-ink); }
:root[data-huis] .home .lang-pick-list .soon { border-style: dashed; }

/* section headings between rules */
.atlas-h { display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--h-display); font-weight: 800; font-size: 36px; line-height: 1; color: var(--h-main); }
.atlas-h::before, .atlas-h::after { content: ""; flex: 1; border-top: 3px double var(--h-ink); }

/* ---------------------------------------------------------------- home: contents with banners */
:root[data-huis] .home .finder { position: static; margin-top: 24px; gap: 10px; background: none; padding: 0 0 4px; }
:root[data-huis] .home .finder input {
  border-radius: 0; border: 2px solid var(--h-ink); background: var(--h-panel); color: var(--h-ink); font-family: var(--h-body); font-size: 17px; font-style: italic;
}
:root[data-huis] .home .finder input:focus { border-color: var(--h-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-main) 25%, transparent); }
/* the houses as a compact row of tags: the house colour as a stripe, dark text on light, never broken words */
:root[data-huis] .home .banners { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 0; }
:root[data-huis] .home .banner {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 10px 5px 8px; margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--h-ink) 30%, transparent); border-left: 5px solid var(--h-main); border-radius: 3px;
  background: var(--h-panel); color: var(--h-ink); font-family: var(--h-body); font-weight: 700; font-size: 15px; line-height: 1.1;
  white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s;
}
:root[data-huis] .home .banner:hover { border-color: var(--h-main); color: var(--h-ink); }
:root[data-huis] .home .banner[aria-pressed="true"] { background: var(--h-main); border-color: var(--h-main); color: var(--h-on-main); }
:root[data-huis] .home .banner-all { border-left-color: var(--h-ink); }
:root[data-huis] .home .banner-all[aria-pressed="true"] { background: var(--h-ink); border-color: var(--h-ink); color: var(--h-paper); }
.banner-sym { font-size: 15px; line-height: 1; }
.banner-name { white-space: nowrap; }
.banner-n { font-family: var(--h-num); font-weight: 400; font-size: 12px; padding: 1px 6px; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); }
.banner[aria-pressed="true"] .banner-n { background: none; padding: 1px 2px; }
/* phones: one row you swipe sideways, so the menu stays low */
@media (max-width: 700px) {
  :root[data-huis] .home .banners { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  :root[data-huis] .home .banners::-webkit-scrollbar { display: none; }
  :root[data-huis] .home .banner { flex: none; }
}

/* every group in the colours, letter and band of its own house */
:root[data-huis] .home .tool-group { margin-top: 44px; gap: 16px; scroll-margin-top: 220px; }
:root[data-huis] .home .group-title {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 28px;
  text-transform: none; letter-spacing: 0; color: var(--h-ink);
}
:root[data-huis] .home .group-title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--h-band); border: 2px solid var(--h-line); }
:root[data-huis] .home .group-sym {
  width: 46px; height: 46px; margin: 0; border-radius: 0; font-size: 22px; background: var(--h-main); color: var(--h-on-main);
  border: 3px solid var(--h-line); outline: 1.5px solid var(--h-gold); outline-offset: -7px;
}
.group-name { font-family: var(--h-display); font-weight: 800; font-size: clamp(28px, 4vw, 38px); line-height: 1; color: var(--h-ink); }
.group-house { margin-left: auto; font-family: var(--h-body); font-style: italic; font-size: 16px; color: var(--h-muted); }
:root[data-huis] .home .tool-cards { gap: 16px; }
:root[data-huis] .home .tool-card {
  border-radius: 0; border: 3px solid var(--h-line); outline: 1px solid var(--h-line); outline-offset: -8px; padding: 20px 20px 18px;
  background: var(--h-panel); color: var(--h-ink);
}
:root[data-huis] .home .tool-card:hover { border-color: var(--h-main); outline-color: var(--h-main); color: var(--h-ink); }
:root[data-huis] .home .tool-card h3 { font-family: var(--h-display); font-weight: 800; font-size: 23px; line-height: 1.1; color: var(--h-main); }
:root[data-huis] .home .tool-card p { color: var(--h-ink); font-size: 16px; line-height: 1.4; }
:root[data-huis] .home .tool-card svg { width: 60px; height: 60px; padding: 5px; background: var(--h-paper); border: 2px solid var(--h-line); }
:root[data-huis] .home .tool-card .px-a { fill: var(--h-main); }
:root[data-huis] .home .tool-card .px-b { fill: var(--h-second); }
:root[data-huis] .home .tool-card .px-s { fill: var(--h-muted); }
:root[data-huis] .home .tool-card .px-m { fill: var(--h-gold); }
:root[data-huis] .home .finder-none { font-style: italic; font-size: 18px; }

/* how it works: numbered rules */
.atlas-how { margin-top: 56px; display: grid; gap: 22px; }
:root[data-huis] .home .facts { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 18px 28px; }
:root[data-huis] .home .facts li { position: relative; padding: 14px 0 0 56px; border-top: 2px solid var(--h-ink); }
.fact-n { position: absolute; left: 0; top: 10px; width: 44px; font-family: var(--h-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--h-main); }
:root[data-huis] .home .facts strong { font-family: var(--h-display); font-weight: 800; font-size: 21px; }
:root[data-huis] .home .facts span:not(.fact-n) { color: var(--h-ink); font-size: 16px; }

/* ---------------------------------------------------------------- the book below the workbench: one page at a time (huis.js) */
.huis-book { margin-top: 36px; }
.huis-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 14px; position: relative; z-index: 1; }
.mcdp .huis-tab, .huis-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin: 6px 0 0; padding: 0 18px;
  border: 2px solid var(--h-soft); border-bottom: 0; border-radius: 0; background: var(--h-grid); color: var(--h-muted);
  font-family: var(--h-display); font-weight: 800; font-size: 18px; line-height: 1.1; cursor: pointer; position: relative; top: 3px;
}
.huis-tab:hover { color: var(--h-ink); background: var(--h-panel); }
.huis-tab[aria-selected="true"] { margin-top: 0; min-height: 52px; background: var(--h-panel); color: var(--h-ink); border-color: var(--h-line); border-width: 3px; border-bottom: 0; }
.huis-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; background: var(--h-panel); }
.huis-tab-n { font-size: 14px; color: var(--h-main); }
.huis-tab:focus-visible { outline: 2px solid var(--h-main); outline-offset: 2px; }
:root[data-huis] .huis-page {
  border: 3px solid var(--h-line); outline: 1px solid var(--h-line); outline-offset: -10px; background: var(--h-panel);
  padding: 26px clamp(16px, 3vw, 32px) 30px;
}
/* cards inside a page lose their own frame: the page is the frame */
:root[data-huis] .huis-page > .extra-card, :root[data-huis] .huis-page > .mcdp-guide, :root[data-huis] .huis-page > section { border: 0; outline: 0; padding: 0; background: transparent; margin: 0; }
:root[data-huis] .huis-page .extras { margin-top: 0; }
:root[data-huis] .huis-page .extras .extra-card { background: var(--h-paper); }
:root[data-huis] .huis-page .info-card, .huis-page .how { max-width: 78ch; }
:root[data-huis] .huis-page .info-history { columns: 2 340px; column-gap: 40px; max-width: none; }
:root[data-huis] .huis-page .info-history > h2 { column-span: all; }
:root[data-huis] .huis-page .info-history > h3 { break-after: avoid; }
:root[data-huis] .huis-page .info-history > p { break-inside: avoid; }
:root[data-huis] .huis-page .info-facts { break-inside: avoid; margin-top: 6px; padding: 14px 18px 14px 34px; background: var(--h-paper); border-left: 4px solid var(--h-main); }
@media (max-width: 640px) {
  .huis-tabs { padding-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .huis-tab { flex: none; font-size: 16px; padding: 0 12px; }
}
@media print { .huis-tabs { display: none; } .huis-page[hidden] { display: block !important; } }

/* ---------------------------------------------------------------- 404: the ruin */
:root[data-huis] .notfound { display: grid; gap: 28px; padding-block: 30px 10px; }
.ruin-fig { margin: 0; display: grid; gap: 10px; justify-items: center; }
.ruin-fig .ruin {
  display: block; width: 100%; max-width: 960px; height: auto; image-rendering: pixelated;
  background: linear-gradient(#b9d3f2, #e7eef7 70%); border: 3px solid var(--h-line); outline: 1px solid var(--h-line); outline-offset: -10px; padding: 10px 10px 0;
}
.ruin-fig figcaption { font-style: italic; color: var(--h-muted); font-size: 17px; text-align: center; }
.ruin-fig figcaption b { font-family: var(--h-display); font-style: normal; color: var(--h-ink); }
.notfound-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 40px; }
.notfound-text section { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 3px double var(--h-ink); }
:root[data-huis] .notfound h1, :root[data-huis] .notfound h2 { margin: 0; font-family: var(--h-display); font-weight: 800; font-size: clamp(32px, 5vw, 48px); line-height: 1; color: var(--h-main); }
:root[data-huis] .notfound p { margin: 0; color: var(--h-ink); font-size: 18px; max-width: 52ch; }
.notfound-btn {
  display: inline-block; padding: 8px 16px; margin-right: 6px; background: var(--h-main); color: var(--h-on-main) !important; text-decoration: none;
  border: 3px solid var(--h-ink); outline: 1.5px solid var(--h-gold); outline-offset: -7px; font-family: var(--h-display); font-weight: 800; font-size: 19px;
}
.notfound-btn:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- accessibility (WCAG 2.1 AA): contrast and focus
   Coloured surfaces with light text are darkened a quarter, so every house passes 4.5:1; text never fades by opacity. */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root[data-huis] .mcdp-stat:nth-child(4n+1), :root[data-huis] .atlas-ribbons li:nth-child(4n+1) { background: color-mix(in srgb, var(--h-t4) 78%, #000); }
:root[data-huis] .mcdp-stat:nth-child(4n+2), :root[data-huis] .atlas-ribbons li:nth-child(4n+2) { background: color-mix(in srgb, var(--h-t1) 78%, #000); }
:root[data-huis] .mcdp-stat:nth-child(4n+3), :root[data-huis] .atlas-ribbons li:nth-child(4n+3) { background: color-mix(in srgb, var(--h-t2) 78%, #000); }
:root[data-huis] .mcdp-stat:nth-child(4n+4), :root[data-huis] .atlas-ribbons li:nth-child(4n+4) { background: color-mix(in srgb, var(--h-t3) 78%, #000); }
:root[data-huis] .atlas-ribbons li:nth-child(4n+1) { background: color-mix(in srgb, var(--h-t1) 78%, #000); }
:root[data-huis] .atlas-ribbons li:nth-child(4n+4) { background: color-mix(in srgb, var(--h-t4) 78%, #000); }
:root[data-huis] .mcdp-stat .mcdp-k, :root[data-huis] .mcdp-stat .mcdp-s, .huis-ch-n, .huis-ch-s, .banner-n { opacity: 1; }
:root[data-huis] .mcdp .huis-ch-h button { background: color-mix(in srgb, var(--ch-bg) 80%, #000); }
:root[data-huis] .mcdp .huis-ch-h button:hover { background: color-mix(in srgb, var(--ch-bg) 70%, #000); filter: none; }
.huis-tab { color: var(--h-ink); }
:root[data-huis] .mcdp-r.mcdp-on { background: var(--h-ink); color: var(--h-panel); }
:root[data-huis] .mcdp-r.mcdp-off { color: var(--h-ink); border-color: var(--h-ink); }
/* header and footer: light text on the dark head colour, gold stays for lines only */
:root[data-huis] .brand, :root[data-huis] .site-nav a.nav-all, :root[data-huis] .foot-links h2 { color: var(--h-head-ink); }
:root[data-huis] .site-nav a, :root[data-huis] .foot-links a, :root[data-huis] .site-footer { color: var(--h-head-ink); }
:root[data-huis] .site-nav a:not([aria-current]) { text-decoration: none; }
:root[data-huis] .site-footer a { text-decoration: underline; text-underline-offset: 3px; }
:root[data-huis] .copyright { font-size: 14px; }
/* home: a group's heading stands on the page, so it uses the page's ink, not its house's */
:root[data-huis] .home main { --page-ink: var(--h-ink); --page-muted: var(--h-muted); }
:root[data-huis] .home .group-name { color: var(--page-ink); }
:root[data-huis] .home .group-house { color: var(--page-muted); }
/* keyboard focus: always a clear ring, also on dark heads */
:root[data-huis] :focus-visible { outline: 3px solid var(--h-gold); outline-offset: 2px; }
:root[data-huis] .mcdp canvas:focus-visible { outline: 3px solid var(--h-main); outline-offset: 4px; }
.huis-panel-h { margin: -6px 24px 0; padding-bottom: 12px; text-align: center; font-family: var(--h-display); font-weight: 800; font-size: 26px; line-height: 1;
  border-bottom: 1px solid var(--h-ink); box-shadow: 0 3px 0 -1px var(--h-panel), 0 4px 0 -1px var(--h-ink); }
:root[data-huis] .mcdp-panel::before, :root[data-huis][lang] .mcdp-panel::before { content: none; }

/* ---------------------------------------------------------------- plain text pages (accessibility statement) */
:root[data-huis] .text-page-body { max-width: 760px; padding-block: 34px 20px; display: grid; gap: 14px; }
:root[data-huis] .text-page-body h1 { margin: 6px 0 4px; font-family: var(--h-display); font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--h-ink); }
:root[data-huis] .text-page-body h2 { margin: 18px 0 0; font-family: var(--h-display); font-weight: 800; font-size: 28px; color: var(--h-main); }
:root[data-huis] .text-page-body p, :root[data-huis] .text-page-body li { font-size: 18px; line-height: 1.55; color: var(--h-ink); }
:root[data-huis] .text-page-body .lead { font-style: italic; font-size: 20px; }
:root[data-huis] .text-page-body ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
:root[data-huis] .text-page-body .eyebrow { font-family: var(--h-body); letter-spacing: .14em; color: var(--h-muted); text-transform: uppercase; font-size: 14px; }

/* list page: section titles are h2 for the outline, sized like the card titles */
:root[data-huis] .mcls-h { font-family: var(--h-display); font-weight: 800; font-size: 22px; margin: 0 0 8px; }

/* footer and list links: readable on their own background */
:root[data-huis] .copyright a { color: inherit; text-decoration: underline; }

/* dark mode: links, banners and pressed buttons kept at 4.5:1 or better */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  &[data-huis] main a:not([class]) { color: color-mix(in srgb, var(--h-main) 55%, #fff); }
  & #mcwg .mcwg-famcard button[aria-pressed="true"] { color: #000; }
} }
:root[data-theme="dark"] {
  &[data-huis] main a:not([class]) { color: color-mix(in srgb, var(--h-main) 55%, #fff); }
  & #mcwg .mcwg-famcard button[aria-pressed="true"] { color: #000; }
}
:root[data-huis] main .mcls-links a:not([class]) { color: inherit; text-decoration: underline; }
.mcls-items .mcls-part { font-style: italic; padding-left: 1em; }

/* reflow at 320px (WCAG 1.4.10): grid and flex children may shrink below their content; long words wrap */
.mcdp-wrap, .mcdp-head, .mcdp-layout, .mcdp-layout > *, .mcdp-stage > *, .mcdp-panel > *, .mcdp-stats, .mcdp-card, .huis-book, .huis-page { min-width: 0; }
.mcdp-wrap { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .mcdp-head, .mcdp-layout { max-width: 100%; }
  .mcdp-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
main h1, main h2, main h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 520px) {
  .mcdp-guide-cols { grid-template-columns: minmax(0, 1fr); }
  .mcdp-guide-cols > * { min-width: 0; }
}
.mcdp-head > * { min-width: 0; }
@media (max-width: 420px) {
  :root[data-huis] .mcdp .mcdp-title { font-size: clamp(26px, 9vw, 40px); }
}

/* phones: the 3D view as a strip that stays at the top while you work through the settings */
.huis-strip { position: sticky; top: 0; z-index: 5; background: var(--h-paper); margin: 0 0 12px; padding: 6px 0 8px; border-bottom: 2px solid var(--h-line); display: grid; gap: 6px; }
.huis-strip .iso-bar { margin: 0; }
.huis-strip .iso-info { display: none; }
.huis-strip canvas { max-height: 32vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
@media (max-width: 520px) {
  :root[data-huis] .huis-ch-t { font-size: 19px; line-height: 1.1; }
  .huis-ch-s { display: none; }
}
.iso-mat-det > summary { cursor: pointer; font-family: var(--h-display); font-weight: 800; padding: 6px 0; }
.iso-mat-det[open] > summary { margin-bottom: 6px; }

/* history: engraving plate and timeline */
.huis-hist-top { display: grid; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); gap: 24px; align-items: start; margin: 6px 0 22px; }
.huis-hist-top.huis-hist-solo { grid-template-columns: minmax(160px, 260px); }
@media (max-width: 620px) { .huis-hist-top { grid-template-columns: minmax(0, 1fr); } .huis-plate { max-width: 280px; } }
.huis-plate { margin: 0; padding: 10px; background: var(--h-panel); border: 2px solid var(--h-line); box-shadow: inset 0 0 0 4px var(--h-panel), inset 0 0 0 5px var(--h-line); }
.huis-plate svg { display: block; width: 100%; height: auto; }
.huis-plate figcaption { font-style: italic; text-align: center; font-size: 15px; margin-top: 8px; color: var(--h-ink); }
.huis-plate figcaption b { font-family: var(--h-display); font-style: normal; margin-right: 4px; }
.px-a { fill: var(--h-ink); } .px-m { fill: var(--h-main); } .px-s { fill: var(--h-second); } .px-t { fill: var(--h-third); } .px-g { fill: var(--h-gold); }
.px-h { fill: var(--h-panel); opacity: .28; }
.huis-tijd-h { font-family: var(--h-display); font-weight: 800; font-size: 20px; margin: 0 0 10px; }
.huis-tijd ol { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 3px solid var(--h-line); display: grid; gap: 10px; }
.huis-tijd li { position: relative; }
.huis-tijd li::before { content: ""; position: absolute; left: -29px; top: .3em; width: 12px; height: 12px; background: var(--h-main); border: 2px solid var(--h-ink); }
.huis-tijd a { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; color: var(--h-ink); text-decoration: none; }
.huis-tijd a:hover .huis-tijd-t, .huis-tijd a:focus-visible .huis-tijd-t { text-decoration: underline; }
.huis-tijd-j { font-family: var(--h-num); font-weight: 700; }
:root[data-huis] main .huis-tijd a:not([class]) { color: var(--h-ink); text-decoration: none; }
/* dark mode: gold on the fourth chapter colour needs a darker ground (Hollands, Water) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .huis-ch:nth-child(4n+4) { --ch-bg: color-mix(in srgb, var(--h-t4) 75%, #000); } }
:root[data-theme="dark"] .huis-ch:nth-child(4n+4) { --ch-bg: color-mix(in srgb, var(--h-t4) 75%, #000); }
/* the name MCHistoryBuilder is long: smaller on phones so the header never scrolls sideways */
@media (max-width: 480px) {
  :root[data-huis] .brand { font-size: clamp(16px, 5.4vw, 22px); padding: 2px 8px; gap: 6px; max-width: 100%; }
  :root[data-huis] .brand svg { width: 22px; height: 22px; }
}

/* the page Per land (landen/): a tab per country, inside it the houses and their tools with examples */
:root[data-huis] .landen-body { max-width: 1180px; padding-block: 34px 20px; display: grid; gap: 14px; }
:root[data-huis] .landen-body h1 { margin: 6px 0 4px; font-family: var(--h-display); font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--h-ink); }
:root[data-huis] .landen-body .eyebrow { font-family: var(--h-body); letter-spacing: .14em; color: var(--h-muted); text-transform: uppercase; font-size: 14px; }
:root[data-huis] .landen-body .lead { max-width: 760px; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--h-ink); }
.land-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
:root[data-huis] .land-tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 10px;
  border: 1.5px solid color-mix(in srgb, var(--h-ink) 30%, transparent); border-left: 5px solid var(--h-main); border-radius: 3px;
  background: var(--h-panel); color: var(--h-ink); font-family: var(--h-body); font-weight: 700; font-size: 15px; line-height: 1.1;
  white-space: nowrap; text-decoration: none;
}
:root[data-huis] .land-tab:hover { border-color: var(--h-main); color: var(--h-ink); }
:root[data-huis] .land-tab[aria-selected="true"] { background: var(--h-main); border-color: var(--h-main); color: var(--h-on-main); }
.land-tab-n { font-family: var(--h-num); font-weight: 400; font-size: 12px; padding: 1px 6px; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); }
.land-tab[aria-selected="true"] .land-tab-n { background: none; padding: 1px 2px; }
.land-panel { display: grid; gap: 18px; padding-top: 10px; border-top: 3px double var(--h-line); }
.land-panel[hidden] { display: none; }
:root[data-huis] .land-panel h2 { margin: 0; font-family: var(--h-display); font-weight: 800; font-size: clamp(30px, 4.5vw, 44px); line-height: 1; color: var(--h-main); }
:root[data-huis] .land-sum { margin: -10px 0 0; font-style: italic; font-size: 17px; color: var(--h-muted); }
.land-group { display: grid; gap: 10px; padding: 12px 14px 14px; border-left: 5px solid var(--h-main); background: var(--h-paper); color: var(--h-ink); }
:root[data-huis] .land-group h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--h-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--h-ink); }
.land-sym { display: inline-grid; place-items: center; width: 32px; height: 32px; font-size: 17px; background: var(--h-main); color: var(--h-on-main); }
.land-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
:root[data-huis] .land-tool { padding: 12px 14px 14px; border: 2px solid var(--h-line); background: var(--h-panel); color: var(--h-ink); }
:root[data-huis] .land-tool h4 { margin: 0 0 8px; font-family: var(--h-display); font-weight: 800; font-size: 20px; line-height: 1.1; }
:root[data-huis] .land-tool h4 a { display: flex; align-items: center; gap: 10px; color: var(--h-main); text-decoration: none; }
:root[data-huis] .land-tool h4 a:hover span { text-decoration: underline; }
.land-tool svg { flex: none; width: 40px; height: 40px; padding: 4px; background: var(--h-paper); border: 2px solid var(--h-line); }
.land-tool .px-a { fill: var(--h-main); } .land-tool .px-b { fill: var(--h-second); } .land-tool .px-s { fill: var(--h-muted); } .land-tool .px-m { fill: var(--h-gold); }
.land-tool ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
:root[data-huis] .land-tool li a { display: block; padding: 5px 0 5px 18px; position: relative; font-size: 16px; line-height: 1.35; color: var(--h-ink); text-underline-offset: 3px; }
.land-tool li a::before { content: "›"; position: absolute; left: 4px; color: var(--h-main); font-weight: 700; }
:root[data-huis] .land-tool li a:hover { color: var(--h-main); }
:root[data-huis] .land-note { max-width: 760px; font-size: 16px; font-style: italic; color: var(--h-muted); }
/* phones: the countries as one row you swipe sideways, so the list starts high on the screen */
@media (max-width: 700px) {
  .land-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; }
  .land-tabs::-webkit-scrollbar { display: none; }
  .land-tab { flex: none; }
  .land-group { padding: 10px 10px 12px; }
}
/* the link from the home page to this page */
:root[data-huis] .home .finder-alt { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--h-body); font-weight: 700; font-size: 16px; }
:root[data-huis] .home .finder-alt a { color: var(--h-ink); text-decoration-color: var(--h-main); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* "Alles per land" at the top of the Bouwwerken menu */
.atlas-bycountry { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-weight: 700; font-size: 16px; }
.atlas-bycountry a { color: var(--atlas-ink); text-underline-offset: 3px; }
:root[data-huis] .atlas-bycountry a { font-family: var(--h-body); color: var(--h-ink); text-decoration-color: var(--h-main); text-decoration-thickness: 2px; }
/* Per land / Per soort gebouw: the switch above the title */
.land-switch { display: flex; flex-wrap: wrap; gap: 4px; }
:root[data-huis] .land-switch a {
  padding: 6px 12px; border: 2px solid var(--h-ink); font-family: var(--h-body); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink); text-decoration: none; background: var(--h-panel);
}
:root[data-huis] .land-switch a:hover { text-decoration: underline; }
:root[data-huis] .land-switch a[aria-current="page"] { background: var(--h-ink); color: var(--h-paper); }
.land-group-n { margin-left: 4px; font-family: var(--h-num); font-weight: 400; font-size: 14px; padding: 1px 8px; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); }
/* flags on the country tabs and headings (flags_data.py); a thin edge so white stripes stay visible */
.land-flags { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.land-flags svg { display: block; height: 13px; width: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.land-panel h2 .land-flags, .land-place h3 .land-flags { margin-right: 12px; vertical-align: middle; }
.land-panel h2 .land-flags svg { height: 26px; }
.land-place h3 .land-flags svg { height: 18px; }
/* home: a short description of the site above "How it works" */
:root[data-huis] .home .atlas-about { margin-top: 56px; display: grid; gap: 12px; max-width: 820px; }
:root[data-huis] .home .atlas-about p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--h-ink); }
:root[data-huis] .home .atlas-about .about-link { color: var(--h-ink); text-decoration-color: var(--h-main); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
/* buttons back to the default settings: in every chapter, above the settings and in the block palette */
:root[data-huis] .huis-reset {
  justify-self: start; margin: 6px 0 2px; padding: 6px 12px; min-height: 32px; border: 1.5px solid var(--h-ink); border-radius: 0;
  background: var(--h-panel); color: var(--h-ink); font-family: var(--h-body); font-weight: 700; font-size: 14px; cursor: pointer;
}
:root[data-huis] .huis-reset::before { content: "↺ "; }
:root[data-huis] .huis-reset:hover { background: var(--h-ink); color: var(--h-panel); }
:root[data-huis] .huis-reset:disabled { opacity: .6; cursor: progress; }
:root[data-huis] .huis-reset-all { display: block; margin: 0 auto 10px; }
.pal-top .pal-reset { align-self: end; }