/* The renewed blog pages. A blog's look is a handful of variables (from its
   old skin, or a colour it chose) and classes on <body>: layout-*, colour-*,
   head-*, letters-*, size-large (Blogs\Look\Look). Everything else is shared. */
:root {
  --blog-accent: #b3202f;
  --blog-accent-ink: #fff;
  --blog-bg: #efe9e1;
  --blog-card: #fff;
  --blog-ink: #2b2a28;
  --blog-muted: #6d675f;
  --blog-line: #e2dbd1;
  --blog-title: var(--blog-ink);
  --blog-link: var(--blog-accent);
  --blog-widget-title: var(--blog-ink);
  --blog-strong: var(--blog-accent);
  --blog-button: var(--blog-strong);
  --blog-button-ink: var(--blog-accent-ink);
  --blog-title-font: Georgia, "Times New Roman", serif;
  --blog-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* What is not the blogger's own writing - buttons, a post's category and reactions line, visitors'
     comments and guestbook messages, forms - is in a plain letter unless the blogger picks one for it in
     Uitzicht (parts extras and visitors): a decorative font (Vivaldi, a script) is hard to read small. */
  --blog-ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --blog-text: 16px;
  --page-max: 1240px;
  /* The columns beside the posts, left and right each: one column beside the posts, or three columns. */
  --side-l-w: 300px;
  --side-r-w: 300px;
  --side3-l-w: 230px;
  --side3-r-w: 230px;
  --radius: 14px;
  /* The corners of the photos (Look::PHOTO_CORNERS): at most this, less on a small picture (min with a share of its size). */
  --photo-radius: 16px;
}
body.width-full { --page-max: none; }
body.columns-left-narrow { --side-l-w: 240px; --side3-l-w: 190px; }
body.columns-left-wide { --side-l-w: 360px; --side3-l-w: 300px; }
body.columns-right-narrow { --side-r-w: 240px; --side3-r-w: 190px; }
body.columns-right-wide { --side-r-w: 360px; --side3-r-w: 300px; }
body.corners-square { --radius: 0px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blog-bg); color: var(--blog-ink); font: var(--blog-text)/1.35 var(--blog-body-font); overflow-wrap: break-word;
  /* The SeniorenNet footer at the bottom of the window, also on a short page. */
  min-height: 100vh; display: flex; flex-direction: column; }
body > .sn-foot { margin-top: auto; }
img { max-width: 100%; height: auto; }
a { color: var(--blog-link); }
.bl-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 10; }
.bl-skip:focus { left: 8px; }
.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bl-beacon { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* The SeniorenNet bar (sn-bar) is no longer drawn on the blog pages; the platform sits in the footer. */
.sn-bar { background: #fff; border-bottom: 1px solid #e6e1d8; font-size: 14px; }
.sn-bar__in { max-width: 1240px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 16px; }
.sn-bar__logo { display: flex; align-items: center; gap: 8px; color: #2b2a28; text-decoration: none; font-weight: 600; }
.sn-bar__logo span { font-weight: 400; color: #6d675f; }
.sn-bar__spacer { flex: 1; }
.sn-bar a.sn-bar__link { color: #4a4640; text-decoration: none; }
.sn-bar a.sn-bar__link:hover { text-decoration: underline; }
.sn-bar__btn { border: 1px solid #ddd5c9; border-radius: 999px; padding: 4px 12px; }

/* The blog's own head. */
.bl-head { background: var(--blog-accent); color: var(--blog-accent-ink); }
.bl-head__in { max-width: var(--page-max); margin: 0 auto; padding: 26px 16px 22px; display: flex; gap: 20px; align-items: center; }
.bl-head__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85); flex: none; }
.bl-head__title { font: 700 calc(34px * var(--blog-scale-blogTitle, 1))/1.15 var(--blog-font-blogTitle, var(--blog-title-font)); margin: 0; }
.bl-head__title a { color: inherit; text-decoration: none; }
/* The name's own colour, when the blogger set one (Eigen kleuren). */
.bl-head__title { color: var(--blog-head-title, inherit); }
.bl-head__sub { margin: 6px 0 0; opacity: .92; font-size: calc(17px * var(--blog-scale-blogSubtitle, 1)); font-family: var(--blog-font-blogSubtitle, inherit); color: var(--blog-head-sub, inherit); }
body.head-light .bl-head { background: var(--blog-card); color: var(--blog-ink); border-bottom: 4px solid var(--blog-accent); }
body.head-light .bl-head__title { color: var(--blog-head-title, var(--blog-accent)); }
body.head-photo .bl-head { background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .6)), var(--head-picture) center 40% / cover; color: #fff; }
body.head-photo .bl-head__in { padding-top: 110px; padding-bottom: 26px; }
.bl-nav { background: var(--nav-bg, var(--blog-card)); border-bottom: 1px solid var(--blog-line); }
.bl-nav__in { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bl-nav a { padding: 13px 14px; color: var(--nav-ink, var(--blog-ink)); text-decoration: none; white-space: nowrap; font-weight: 500; border-bottom: 3px solid transparent; flex: none; }
.bl-nav a[aria-current="page"] { border-bottom-color: var(--nav-active, var(--blog-strong)); font-weight: 700; }
.bl-nav a:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; border-radius: 6px; }

/* Posts and the columns; where the columns go is the layout's. */
.bl-main { max-width: var(--page-max); margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 24px; align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--side-r-w); grid-template-areas: "posts left" "posts right"; grid-template-rows: auto 1fr; }
.bl-content { grid-area: posts; min-width: 0; }
.bl-posts { min-width: 0; }
.bl-side { min-width: 0; }
.bl-more { display: contents; }
.bl-more__title, .bl-more__up { display: none; }
.bl-side--left { grid-area: left; }
.bl-side--right { grid-area: right; }
.bl-main--alone { grid-template-columns: minmax(0, 860px); justify-content: center; grid-template-areas: "posts"; }

/* Drie kolommen: a column left and right of the posts, as the old skins had them. */
body.layout-classic3 .bl-main { grid-template-columns: var(--side3-l-w) minmax(0, 1fr) var(--side3-r-w); grid-template-areas: "left posts right"; grid-template-rows: auto; }
body.layout-classic3 .bl-main:not(:has(.bl-side--left)) { grid-template-columns: minmax(0, 1fr) var(--side-r-w); grid-template-areas: "posts right"; }
body.layout-classic3 .bl-main:not(:has(.bl-side--right)) { grid-template-columns: var(--side-l-w) minmax(0, 1fr); grid-template-areas: "left posts"; }
body.layout-classic3 .bl-main--alone { grid-template-columns: minmax(0, 860px); grid-template-areas: "posts"; }
/* Three columns as the old skins had them: the side columns compact, so what fitted there fits again. */
body.layout-classic3 .bl-widget { font-size: calc(14.5px * var(--blog-scale-columns, 1)); line-height: 1.3; padding: 14px; }
body.layout-classic3 .bl-widget__title { font-size: calc(16px * var(--blog-scale-columnTitles, 1)); }
body.layout-classic3 .bl-list li { padding: 3px 0; }
/* Kolom links. */
body.layout-left .bl-main { grid-template-columns: var(--side-l-w) minmax(0, 1fr); grid-template-areas: "left posts" "right posts"; }
/* Dagboek: one calm column, centred; the columns below it. */
body.layout-diary .bl-head__in { flex-direction: column; text-align: center; }
/* In the middle with margins rather than justify-content, so a menu wider than a phone still scrolls to its first item. */
body.layout-diary .bl-nav__in > :first-child { margin-left: auto; }
body.layout-diary .bl-nav__in > :last-child { margin-right: auto; }
body.layout-diary .bl-main { max-width: 780px; grid-template-columns: 1fr; grid-template-areas: "posts" "left" "right"; grid-template-rows: auto; }
body.layout-diary .bl-post { background: transparent; border: 0; border-bottom: 1px solid var(--blog-line); border-radius: 0; padding: 26px 0 30px; }
body.layout-diary .bl-post__title { font-size: calc(31px * var(--blog-scale-postTitle, 1)); }
body.layout-diary .bl-post__body { font-family: var(--blog-font-postText, var(--blog-title-font)); font-size: calc(1.1em * var(--blog-scale-postText, 1)); }
body.layout-diary .bl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Fotoalbum: the posts as tiles with their picture. */
body.layout-album .bl-main { max-width: var(--page-max); grid-template-columns: 1fr; grid-template-areas: "posts" "left" "right"; grid-template-rows: auto; }
body.layout-album .bl-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-items: start; }
/* The tiles are for a list of posts (.bl-posts); a post on its own page reads as a post. */
body.layout-album .bl-posts > :not(.bl-post) { grid-column: 1 / -1; }
body.layout-album .bl-posts .bl-post { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
body.layout-album .bl-posts .bl-post__picture { order: -1; margin: 0; }
body.layout-album .bl-posts .bl-post__picture img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; max-height: none; }
body.layout-album .bl-posts :is(.bl-post__body, .bl-post__files, .bl-rating, .bl-post__tags) { display: none; }
body.layout-album .bl-posts :is(.bl-post__date, .bl-post__title, .bl-post__foot) { margin-left: 16px; margin-right: 16px; }
body.layout-album .bl-posts .bl-post__date { margin-top: 12px; }
body.layout-album .bl-posts .bl-post__title { font-size: calc(20px * var(--blog-scale-postTitle, 1)); margin-bottom: 8px; }
body.layout-album .bl-posts .bl-post__foot { margin-bottom: 14px; }
body.layout-album .bl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
body.layout-album .bl-posts .bl-post__picture--text { display: block; }
.bl-post__picture--text { display: none; }
/* Magazine: the newest big, the others in two columns; under a post on its own page, the older posts all in the two columns. */
body.layout-magazine .bl-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
body.layout-magazine .bl-posts > * { grid-column: 1 / -1; }
body.layout-magazine .bl-posts .bl-post { margin: 0; }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) { grid-column: auto; }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) .bl-post__title { font-size: calc(21px * var(--blog-scale-postTitle, 1)); }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) .bl-post__body { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) .bl-post__picture--text { display: block; }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) .bl-post__picture--text + .bl-post__body img { display: none; }
body.layout-magazine :is(.bl-post ~ .bl-post, .bl-posts--older .bl-post) .bl-post__picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; max-height: none; }

/* A post. */
.bl-card, .bl-post { background: var(--blog-card); border: 1px solid var(--blog-line); border-radius: var(--radius); padding: 24px; margin: 0 0 22px; }
.bl-post__date { color: var(--blog-post-muted, var(--blog-muted)); font-size: calc(15px * var(--blog-scale-date, 1)); font-family: var(--blog-font-date, inherit); }
.bl-post__title { font: 700 calc(24px * var(--blog-scale-postTitle, 1))/1.25 var(--blog-font-postTitle, var(--blog-title-font)); margin: 4px 0 14px; color: var(--blog-post-title, var(--blog-title)); }
.bl-post__title a { color: inherit; text-decoration: none; }
.bl-post__title a:hover { text-decoration: underline; }
.bl-post__picture { margin: 6px 0 14px; text-align: center; }
.bl-post__picture img { max-height: 560px; width: auto; }
/* Line spacing near the old blogs' (normal, about 1.15 at 13px): poems written line by line keep their shape. */
.bl-post__body { overflow-wrap: anywhere; font-family: var(--blog-font-postText, inherit); font-size: calc(1em * var(--blog-scale-postText, 1)); line-height: 1.35; }
.bl-post__body img { height: auto !important; max-width: 100% !important; }
.bl-post__body img.bl-post__own { max-width: 50% !important; }
.bl-post__body iframe, .bl-post__body video, .bl-post__body embed, .bl-post__body object { max-width: 100%; }
.bl-post__body table { max-width: 100%; display: block; overflow-x: auto; height: auto !important; }
.bl-post__body .bl-smiley, .bl-comment .bl-smiley { display: inline; vertical-align: middle; }
.bl-post__files { margin-top: 14px; font-size: 16px; }
/* A picture added as an attachment: as wide as the old small copy of a post's picture (150 pixels). */
.bl-post__body img.bl-post__own--small { width: 150px; max-width: 50% !important; }
.bl-post__attached { clear: both; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.bl-post__files ul { margin: 4px 0 0; padding-left: 20px; }
.bl-post__tags { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip { display: inline-block; font-family: var(--blog-font-extras, var(--blog-ui-font)); font-size: calc(15px * var(--blog-scale-extras, 1)); padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blog-accent) 12%, var(--blog-card)); color: var(--blog-ink); text-decoration: none; }
.bl-chip--tag { background: transparent; border: 1px solid var(--blog-line); }
.bl-pin { color: var(--blog-accent); font-weight: 600; }
.bl-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; font-size: 15px; color: var(--blog-muted); }
.bl-stars { display: inline-flex; }
.bl-stars button { border: 0; background: none; font-size: 24px; line-height: 1; padding: 2px 3px; cursor: pointer; color: color-mix(in srgb, var(--blog-muted) 45%, var(--blog-card)); }
.bl-stars button.on { color: #e0a100; }
.bl-stars:hover button { color: #e0a100; }
.bl-stars button:hover ~ button { color: color-mix(in srgb, var(--blog-muted) 45%, var(--blog-card)); }
.bl-rating__zero { border: 1px solid var(--blog-line); border-radius: 8px; background: none; color: var(--blog-muted); font: inherit; min-width: 32px; padding: 3px 8px; cursor: pointer; }
.bl-rating__zero:hover { color: var(--blog-ink, inherit); border-color: var(--blog-muted); }
.bl-post__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--blog-muted); font-family: var(--blog-font-extras, var(--blog-ui-font)); font-size: calc(16px * var(--blog-scale-extras, 1)); border-top: 1px solid var(--blog-line); padding-top: 12px; margin-top: 16px; }
.bl-post__foot a { color: var(--blog-muted); }
.bl-heading { font: 700 24px/1.3 var(--blog-title-font); margin: 0 0 16px; }
.bl-intro { margin-bottom: 22px; }
.bl-empty { color: var(--blog-muted); }
.bl-pager { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 22px; }
.bl-pager--posts a { display: block; max-width: 48%; text-decoration: none; }
.bl-pager--posts small { display: block; color: var(--blog-muted); }
.bl-pager__older { text-align: right; margin-left: auto; }

/* Buttons and forms. */
/* Solid and ghost the same height: both with a 1px border. */
.bl-btn { display: inline-block; background: var(--blog-button); color: var(--blog-button-ink); border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; padding: 10px 20px; font: 600 calc(16px * var(--blog-scale-extras, 1)) var(--blog-font-extras, var(--blog-ui-font)); text-decoration: none; cursor: pointer; }
.bl-btn:hover { filter: brightness(1.08); }
.bl-btn--ghost { background: var(--blog-card); color: var(--blog-ink); border: 1px solid var(--blog-strong); }
.bl-linkbtn { border: 0; background: none; padding: 4px 0; color: var(--blog-link); text-decoration: underline; font: inherit; font-family: var(--blog-ui-font); font-size: 16px; cursor: pointer; }
.bl-form { font-family: var(--blog-ui-font); }
.bl-form label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 16px; }
.bl-form input, .bl-form textarea, .bl-inline-form input, .bl-search input { width: 100%; font: 17px var(--blog-ui-font); padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--blog-ink) 25%, var(--blog-card)); border-radius: 8px; background: #fff; color: #2b2a28; }
.bl-form textarea { min-height: 140px; }
/* The eye beside a password (password-eye.js wraps the field in .sn-eye): as wide as the other fields. */
.bl-form .sn-eye { display: block !important; width: 100%; }
.bl-form .bl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bl-note { color: var(--blog-muted); font-size: 15px; }
.bl-inline-form { display: grid; gap: 8px; }
.bl-search label { font-weight: 600; display: block; margin-bottom: 8px; }
.bl-search__row { display: flex; gap: 8px; }

/* Comments. */
.bl-comments h2, .bl-card > h2 { font: 700 22px/1.3 var(--blog-title-font); margin: 0 0 14px; }
.bl-comment { border-top: 1px solid var(--blog-line); padding: 14px 0; font-family: var(--blog-font-visitors, var(--blog-ui-font)); font-size: calc(18px * var(--blog-scale-visitors, 1)); line-height: 1.5; }
.bl-comment__who { font-weight: 600; }
.bl-comment__when { color: var(--blog-muted); font-size: 14px; margin-left: 8px; font-weight: 400; }
.bl-comment__title { margin: 4px 0 0; font-style: italic; }
.bl-comment__text { margin-top: 6px; }
/* Pictures in comments at their own size up to 500 pixels wide: a greeting card is what most guest
   book entries are, and it should be readable without a tap. A tap still shows one large (blog.js). */
.bl-comment__text img:not(.bl-smiley) { width: auto; height: auto; max-width: min(100%, 500px); }
.bl-comment__text iframe { max-width: 100%; }
/* How the comments stand apart from the post (Uitzicht, Reacties): by default one block, indented, with a
   line in the blog's colour on its left; with comments-bubbles each comment in a bubble of its own. */
.bl-comments { margin-left: 18px; border-left: 4px solid var(--blog-strong); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--blog-strong) 4%, var(--blog-card)); }
.bl-comments h2 { font-size: 19px; color: var(--blog-strong); }
.bl-comment__face { display: none; }
@media (min-width: 700px) { .bl-comments { margin-left: 40px; } }
body.comments-bubbles .bl-comments { margin-left: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
body.comments-bubbles .bl-comments h2 { margin: 6px 4px 12px; color: var(--blog-ink); }
body.comments-bubbles .bl-comments > .bl-done, body.comments-bubbles .bl-comments > .bl-alert { margin: 0 0 12px; }
body.comments-bubbles .bl-comment { display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; border: 0; padding: 0; margin: 0 0 14px; }
body.comments-bubbles .bl-comment > :not(.bl-comment__face) { grid-column: 2; background: var(--blog-card); margin: 0; padding: 4px 16px 0; }
body.comments-bubbles .bl-comment > .bl-comment__who { padding-top: 12px; border-radius: var(--radius) var(--radius) 0 0; }
body.comments-bubbles .bl-comment > :last-child { padding-bottom: 14px; border-radius: 0 0 var(--radius) var(--radius); }
body.comments-bubbles .bl-comment__when { display: block; margin: 0; font-size: 13px; }
body.comments-bubbles .bl-comment__face { display: grid; place-items: center; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--blog-strong) 16%, var(--blog-card)); color: var(--blog-strong); font: 700 18px var(--blog-title-font); }

/* The columns' widgets. */
.bl-widget { min-width: 0; background: var(--blog-column, var(--blog-card)); color: var(--blog-column-ink, var(--blog-ink)); border: 1px solid var(--blog-column-line, var(--blog-line)); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; font-size: calc(16px * var(--blog-scale-columns, 1)); font-family: var(--blog-font-columns, inherit); overflow-wrap: anywhere; }
.bl-widget__title { font: 700 calc(18px * var(--blog-scale-columnTitles, 1))/1.3 var(--blog-font-columnTitles, var(--blog-title-font)); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--blog-strong); color: var(--blog-column-title, var(--blog-column-ink, var(--blog-widget-title))); }
.bl-widget img { display: block; margin: 0 auto; }
.bl-widget__free img { display: inline; }
.bl-widget__free iframe, .bl-widget__free embed, .bl-widget__free object { max-width: 100%; }
.bl-widget__text { margin-bottom: 12px; }
.bl-widget__text p:first-child { margin-top: 0; }
.bl-list { list-style: none; margin: 0 0 8px; padding: 0; }
.bl-list li { padding: 6px 0; border-bottom: 1px solid var(--blog-column-line, var(--blog-line)); }
.bl-list li:last-child { border-bottom: 0; }
.bl-widget .bl-list a { color: inherit; }
.bl-list a { color: var(--blog-ink); text-decoration: none; }
.bl-list a:hover { color: var(--blog-link); text-decoration: underline; }
.bl-list small { color: var(--blog-muted); float: right; margin-left: 8px; }
.bl-list--fold li:nth-child(n+13) { display: none; }
.bl-list--open li { display: list-item !important; }
.bl-choices { display: grid; gap: 6px; }
.bl-choice { text-align: left; border: 1px solid var(--blog-line); background: var(--blog-card); color: var(--blog-ink); border-radius: 8px; padding: 8px 12px; font: inherit; cursor: pointer; }
.bl-choice:hover { border-color: var(--blog-accent); }
.bl-about__photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50% !important; margin-bottom: 10px !important; }
.bl-counter { display: flex; justify-content: center; gap: 3px; margin: 0; }
.bl-counter { gap: 0; }
.bl-counter img { display: inline-block; border-radius: 0 !important; margin: 0 !important; image-rendering: pixelated; }
/* The counter's own looks (_widgets.twig counter): in the blog's colours and letters. */
.bl-count { margin: 0; text-align: center; color: var(--blog-muted); line-height: 1.2; }
.bl-count__n { display: block; color: var(--blog-accent); font-family: var(--blog-title-font, inherit); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-count__label { display: block; font-size: 14px; margin-top: 4px; }
.bl-count--getal .bl-count__n { font-size: 34px; letter-spacing: -0.5px; }
.bl-count--tegels .bl-count__n { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; font-size: 20px; }
.bl-count--tegels .bl-count__n span { min-width: 1.35em; padding: 6px 0; border-radius: 6px; background: var(--blog-accent); color: var(--blog-accent-ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.bl-count--regel .bl-count__n, .bl-count--regel .bl-count__label { display: inline; font-size: 16px; margin: 0; }
.bl-count--regel .bl-count__n { white-space: nowrap; }
.bl-clock { font: 700 28px/1 ui-monospace, Menlo, Consolas, monospace; text-align: center; margin: 0; }
.bl-calendar table { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; }
.bl-calendar th { color: var(--blog-muted); font-weight: 400; }
.bl-calendar th.today { color: var(--blog-ink); font-weight: 700; }
.bl-calendar td { padding: 3px 0; }
.bl-calendar td.today { background: var(--blog-accent); color: var(--blog-accent-ink); border-radius: 6px; font-weight: 700; }
.bl-calendar caption { font-weight: 700; margin-bottom: 6px; }
.bl-ticker { overflow: hidden; white-space: nowrap; }
.bl-ticker__text { display: inline-block; padding-left: 100%; animation: bl-ticker 18s linear infinite; }
.bl-ticker--right .bl-ticker__text { animation-direction: reverse; }
@keyframes bl-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .bl-ticker__text { animation: none; padding-left: 0; white-space: normal; } }
.bl-music { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-agenda__month { font-weight: 700; margin: 12px 0 4px; }
.bl-agenda__item { margin: 0 0 8px; }
.bl-countdown { text-align: center; font-weight: 600; }

/* The platform's small foot. */
.sn-foot { border-top: 1px solid #e6e1d8; background: #fff; font-size: 15px; color: #6d675f; margin-top: 24px; }
.sn-foot__in { max-width: 1240px; margin: 0 auto; padding: 22px 16px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; }
.sn-foot__brand { display: flex; align-items: center; gap: 12px; color: #2b2a28; text-decoration: none; }
.sn-foot__brand strong { font-weight: 700; }
.sn-foot__brand small { display: block; color: #6d675f; font-size: 13px; }
.sn-foot__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.sn-foot a.sn-foot__btn { border: 1px solid #ddd5c9; border-radius: 8px; padding: 7px 16px; color: #2b2a28; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sn-foot a.sn-foot__btn--main { background: #2b2a28; border-color: #2b2a28; color: #fff; }
.sn-foot__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid #efeae2; padding-top: 12px; }
.sn-foot__links a { color: #6d675f; }
@media (max-width: 640px) { .sn-foot__in { grid-template-columns: 1fr; } .sn-foot__acts { justify-content: flex-start; } }
/* The advertising place under the menu (a placeholder on the test site). */
/* The advertising place at the top of the posts' column, the columns beside it. */
.bl-content > .snm { margin: 0 0 18px !important; }
.bl-ad { margin: 0 0 18px; display: flex; justify-content: center; }
.bl-ad__slot { width: min(970px, 100%); height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font: .75rem/1.4 monospace; color: #555;
  background: repeating-linear-gradient(45deg, #d0d0d0, #d0d0d0 10px, #e0e0e0 10px, #e0e0e0 20px); border: 1px dashed #999; }
.bl-ad__narrow { display: none; }
@media (max-width: 760px) { .bl-ad__slot { width: min(320px, 100%); height: 100px; } .bl-ad__wide { display: none; } .bl-ad__narrow { display: inline; } }
.sn-foot a { color: #4a4640; }

/* The page for an address without a blog. */
.bl-lost { max-width: 640px; margin: 60px auto; padding: 0 16px; }
.bl-lost h1 { font: 700 30px/1.2 var(--blog-title-font); }

/* Colours a blogger chooses; "Mijn oude kleuren" comes from the old skin (inline variables). */
body.colour-evening { --blog-card: #2a2e36; --blog-ink: #ece8df; --blog-muted: #b4ada2; --blog-line: #3c414b; --blog-title: #f3eee4; --blog-link: #e9b75a; --blog-widget-title: #f3eee4; }
body.colour-evening .bl-nav { background: var(--nav-bg, #23272e); }
body.colour-evening .bl-btn--ghost { background: transparent; }
/* The menu's place and shape (Uitzicht, Menu): menu-place-*, menu-buttons, menu-bar, menu-tabs; Lijn is the rule above. */
body.menu-place-left .bl-nav__in > :first-child, body.menu-place-left .bl-nav__in > :last-child { margin-left: 0; margin-right: 0; }
body.menu-place-center .bl-nav__in > :first-child { margin-left: auto; }
body.menu-place-center .bl-nav__in > :last-child { margin-right: auto; }
body.menu-place-right .bl-nav__in > :first-child { margin-left: auto; }
body.menu-place-right .bl-nav__in > :last-child { margin-right: 0; }
body.menu-buttons .bl-nav__in { padding: 10px 16px; gap: 8px; }
body.menu-buttons .bl-nav a { padding: 7px 18px; border: 1px solid var(--blog-line); border-radius: 999px; }
body.menu-buttons .bl-nav a:hover { border-color: var(--nav-active, var(--blog-button)); }
body.menu-buttons .bl-nav a[aria-current="page"] { background: var(--nav-active, var(--blog-button)); border-color: var(--nav-active, var(--blog-button)); color: var(--nav-active-ink, var(--blog-button-ink)); }
body.menu-buttons .bl-nav a:focus-visible { border-radius: 999px; }
body.menu-bar .bl-nav { background: var(--nav-bg, var(--blog-accent)); border-bottom: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-ink, var(--blog-accent-ink)) 25%, transparent); }
body.menu-bar .bl-nav a { color: var(--nav-ink, var(--blog-accent-ink)); border-bottom: 0; padding: 14px 16px; }
body.menu-bar .bl-nav a:hover { background: color-mix(in srgb, var(--nav-ink, var(--blog-accent-ink)) 12%, transparent); }
body.menu-bar .bl-nav a[aria-current="page"] { background: var(--nav-active, color-mix(in srgb, var(--nav-ink, var(--blog-accent-ink)) 22%, transparent)); color: var(--nav-active-ink, var(--nav-ink, var(--blog-accent-ink))); }
/* Tabbladen: the page one is on a tab in the page's colour, standing on the line under the menu as if it opens onto the page. */
body.menu-tabs .bl-nav { border-bottom: 0; background: linear-gradient(var(--blog-line), var(--blog-line)) bottom / 100% 1px no-repeat, var(--nav-bg, var(--blog-card)); }
body.colour-evening.menu-tabs .bl-nav { background: linear-gradient(var(--blog-line), var(--blog-line)) bottom / 100% 1px no-repeat, var(--nav-bg, #23272e); }
body.menu-tabs .bl-nav__in { padding-top: 8px; align-items: flex-end; }
body.menu-tabs .bl-nav a { padding: 9px 16px 10px; border: 1px solid transparent; border-bottom: 0; border-top-width: 3px; border-radius: 10px 10px 0 0; }
body.menu-tabs .bl-nav a[aria-current="page"] { background: var(--blog-bg); border-color: var(--blog-line); border-top-color: var(--nav-active, var(--blog-strong)); color: var(--blog-ink); }
/* Letters. */
body.letters-modern { --blog-title-font: "Inter", system-ui, sans-serif; }
body.letters-modern .bl-post__title, body.letters-modern .bl-head__title { letter-spacing: -.01em; }
body.size-large { --blog-text: 18px; }
body.size-large .bl-widget { font-size: calc(18px * var(--blog-scale-columns, 1)); }

@media (max-width: 960px) {
  body.layout-classic3 .bl-main, body.layout-classic3 .bl-main:not(:has(.bl-side--left)), body.layout-classic3 .bl-main:not(:has(.bl-side--right)) { grid-template-columns: minmax(0, 1fr) var(--side-r-w); grid-template-areas: "posts left" "posts right"; grid-template-rows: auto 1fr; }
}
@media (max-width: 760px) {
  body { --blog-text: 16px; }
  body.size-large { --blog-text: 18px; }
  .bl-main, body[class*="layout-"] .bl-main, body.layout-classic3 .bl-main:not(:has(.bl-side--left)), body.layout-classic3 .bl-main:not(:has(.bl-side--right)) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "posts" "left" "right"; grid-template-rows: auto; padding-top: 14px; gap: 16px; }
  body.layout-magazine .bl-posts { grid-template-columns: 1fr; }
  body.layout-album .bl-posts { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.layout-album .bl-posts .bl-post__title { font-size: calc(17px * var(--blog-scale-postTitle, 1)); }
  body.layout-album .bl-posts .bl-post__foot span { display: none; }
  body.layout-album .bl-posts .bl-post__date { font-size: calc(13px * var(--blog-scale-date, 1)); }
  .bl-head__in { padding: 18px 16px 14px; gap: 14px; }
  body.head-photo .bl-head__in { padding-top: 70px; }
  .bl-head__photo { width: 60px; height: 60px; }
  .bl-head__title { font-size: calc(26px * var(--blog-scale-blogTitle, 1)); }
  .bl-card, .bl-post { padding: 18px; border-radius: min(var(--radius), 12px); }
  body.layout-diary .bl-post { padding: 20px 0 24px; }
  .bl-post__title { font-size: calc(21px * var(--blog-scale-postTitle, 1)); }
  .sn-bar__hide { display: none; }
  .bl-form .bl-row { grid-template-columns: 1fr; }
  .bl-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The columns below the posts as one band, clearly not more posts; both columns' blocks in one list
     (the asides take no room), in the blogger's order but "Over mijzelf" first. */
  .bl-main, body[class*="layout-"] .bl-main, body.layout-classic3 .bl-main:not(:has(.bl-side--left)), body.layout-classic3 .bl-main:not(:has(.bl-side--right)) { grid-template-areas: "posts" "more"; padding-bottom: 0; }
  .bl-more { display: flex; flex-direction: column; grid-area: more; margin: 12px -16px 0; padding: 22px 16px 28px; background: color-mix(in srgb, var(--blog-strong) 9%, var(--blog-bg)); border-top: 4px solid var(--blog-strong); }
  .bl-more .bl-side, body.layout-diary .bl-more .bl-side, body.layout-album .bl-more .bl-side { display: contents; }
  .bl-more .bl-widget--about { order: -1; }
  .bl-more__title { display: block; order: -2; font: 700 calc(22px * var(--blog-scale-columnTitles, 1)) var(--blog-title-font); color: var(--blog-ink); margin: 0 0 16px; }
  .bl-more__up { display: block; order: 99; text-align: center; margin-top: 6px; padding: 10px; font-weight: 600; color: var(--blog-link); }
}
/* "Samen in één kolom" (Look::SIDE_SHAPES): a column's blocks on one panel, a line between them, as on the old
   blogs; the layouts with their blocks side by side under the posts keep them apart. */
body.sides-column:not(.layout-diary):not(.layout-album) .bl-side { background: var(--blog-column, var(--blog-card)); color: var(--blog-column-ink, var(--blog-ink));
  border: 1px solid var(--blog-column-line, var(--blog-line)); border-radius: var(--radius); }
body.sides-column:not(.layout-diary):not(.layout-album) .bl-side .bl-widget { background: transparent !important; border: 0 !important; border-radius: 0; margin: 0; box-shadow: none; }
/* A line above a block with a title, as the old skins drew one around each title; pictures and texts without a title follow on. */
body.sides-column:not(.layout-diary):not(.layout-album) .bl-side .bl-widget + .bl-widget:has(> .bl-widget__title) { border-top: 1px solid var(--blog-column-line, var(--blog-line)) !important; }
body.sides-column:not(.layout-diary):not(.layout-album) .bl-side .bl-widget + .bl-widget:not(:has(> .bl-widget__title)) { padding-top: 0; }
body.sides-column.see-through:not(.layout-diary):not(.layout-album) .bl-side { background-color: color-mix(in srgb, var(--blog-column, var(--blog-card)) 88%, transparent); }
@media (max-width: 760px) {
  body.sides-column:not(.layout-diary):not(.layout-album) .bl-more .bl-side { background: none; border: 0; }
  body.sides-column .bl-more .bl-widget { background: transparent; border: 0; border-radius: 0; margin: 0; }
  body.sides-column .bl-more .bl-widget:has(> .bl-widget__title) { border-top: 1px solid var(--blog-column-line, var(--blog-line)); }
}
.bl-widget__free table, .bl-widget__free div, .bl-widget__free img { max-width: 100%; }
.bl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bl-alert { background: #fdecea; color: #8a1c13; border-radius: 8px; padding: 10px 14px; }
.bl-done { background: #e8f4ea; color: #1d5b2a; border-radius: 8px; padding: 10px 14px; }
.bl-error { color: #b3261e; font-size: 15px; margin: 6px 0 0; }
.bl-form [aria-invalid="true"] { border-color: #b3261e; }
.bl-more-fields { margin-top: 14px; }
.bl-more-fields summary { cursor: pointer; color: var(--blog-link); font-size: 16px; }
.bl-check { display: flex !important; gap: 8px; align-items: center; font-weight: 400 !important; }
.bl-check input { width: auto; }
.bl-form .bl-btn { margin-top: 16px; }
/* The visitor's editor (TinyMCE) as one of the form's fields. */
.tox .sn-smileys { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.tox .sn-smileys button { display: grid; place-items: center; height: 56px; border: 1px solid #e2ded6; border-radius: 8px; background: #fff; cursor: pointer; }
.tox .sn-smileys button:hover, .tox .sn-smileys button:focus-visible { border-color: #8a857c; background: #f6f4f0; }
.tox .sn-smileys img { width: 36px; height: 36px; }
.bl-form .tox-tinymce { border-radius: 8px; border-color: color-mix(in srgb, var(--blog-ink) 25%, var(--blog-card)); }
.bl-smiley { vertical-align: middle; }
.bl-result { margin: 14px 0; }
.bl-result__label { display: flex; justify-content: space-between; gap: 12px; }
.bl-result__bar { height: 12px; background: color-mix(in srgb, var(--blog-muted) 18%, var(--blog-card)); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.bl-result__bar span { display: block; height: 100%; background: var(--blog-strong); border-radius: 999px; }
.bl-agenda__title { font-weight: 600; margin: 4px 0; }
.bl-card > h2 { margin-top: 0; }

/* A post's picture kept apart from its text (posts from before): at the start of the text, on the left, the text beside it, as the old skins showed it. */
/* A post's own picture at the start of its text, the text beside it (as the old skins put it); a wide picture is held to
   half the post, so the text keeps room beside it. */
.bl-post__own { float: left; margin: 3px 14px 6px 0; max-width: 50%; height: auto; }
.bl-post__body::after { content: ""; display: table; clear: both; }

/* A "Vrije tekst" block locked in a sandbox: as wide as the column, as high as it reports. */
.bl-box { display: block; width: 100%; height: 120px; border: 0; background: transparent; }

/* The look's decorations (Look::decor): an icon before each post title, a picture between posts,
   pictures on the page buttons and one to go back to the top. */
.bl-post__icon { height: 1.1em; width: auto; max-width: 3em; margin-right: .35em; vertical-align: -.15em; border-radius: 0; }
.bl-divider { text-align: center; margin: -8px 0 22px; }
.bl-divider img { max-height: 120px; width: auto; }
body.layout-album .bl-posts .bl-divider, body.layout-magazine .bl-posts .bl-divider { display: none; }
.bl-btn__pic { height: 1.4em; width: auto; vertical-align: middle; margin: 0 .35em; }
.bl-top { text-align: right; margin: 0 0 22px; }
.bl-top img { max-height: 60px; width: auto; }
/* An old look's text over its own picture behind the posts (ClassicSkin: blog-post-*). */
.bl-post { color: var(--blog-post-ink, inherit); }
.bl-post__body a { color: var(--blog-post-link, var(--blog-link)); }
/* Uitzicht "doorschijnend": posts and columns let a little of the background through, each in its own colour. */
body.see-through .bl-post, body.see-through .bl-card { background-color: color-mix(in srgb, var(--blog-card) 88%, transparent); }
body.see-through .bl-widget { background-color: color-mix(in srgb, var(--blog-column, var(--blog-card)) 88%, transparent); }
.bl-head__sub img { max-width: 100%; height: auto; }
.bl-head__sub p { margin: 0; }
/* On a background picture, what stands outside the posts gets a ground of its own to stay readable. */
body.bg-picture .bl-heading, body.bg-picture .bl-pager--posts a, body.bg-picture .bl-empty { display: inline-block; background: var(--blog-card); color: var(--blog-title); padding: 8px 14px; border-radius: var(--radius); }
body.bg-picture .bl-pager--posts a small { color: var(--blog-muted); }
/* The form under the post; it is opened by the button in the post's box (.bl-post__reply), so its own summary stays out of sight. */
.bl-reply { margin: 0 0 22px; }
.bl-reply > .bl-reply__summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-post__foot .bl-post__reply { margin-left: auto; color: var(--blog-button-ink); font-size: 15px; padding: 8px 18px; }
.bl-reply > summary { list-style: none; display: inline-flex; cursor: pointer; }
.bl-reply > summary::-webkit-details-marker { display: none; }
.bl-reply[open] > summary { margin-bottom: 14px; }
/* A picture in a post, tapped: shown large over the page; tapped again, closed (blog.js). */
.bl-zoomable { cursor: zoom-in; }
.bl-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .85); display: flex; align-items: center; flex-direction: column; gap: 14px; justify-content: center; padding: 16px; cursor: zoom-out; }
.bl-zoom img { max-width: 100%; max-height: calc(100% - 70px); object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); background: #fff; }
.bl-zoom__go { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 10px 18px; font: 600 16px system-ui, sans-serif; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-zoom__close { position: absolute; top: 12px; right: 16px; color: #fff; font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer; }
.bl-vote { display: grid; gap: 4px; }
.bl-vote__option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0; }
.bl-vote__option input { width: 18px; height: 18px; accent-color: var(--blog-strong); margin: 0; }
.bl-vote .bl-btn { justify-self: start; margin-top: 6px; }
.bl-btn--small { padding: 6px 16px; font-size: 15px; }
/* A prominent sign-up (the mailing list) is the one round button. */
.bl-btn--signup { border-radius: 999px; }
/* An old page whose posts stood straight on its picture: the picture shows through, the letters stay readable. */
body.open-cards .bl-post, body.open-cards .bl-card, body.open-cards .bl-widget { background-color: color-mix(in srgb, var(--blog-card) 45%, transparent); }

/* Column blocks as the old renderer drew them: the ticker moved by blog.js (its marquee's settings;
   up and down in the marquee's 200 pixels), the time in a small box, today's calendar sheet. */
.bl-ticker--js .bl-ticker__text { animation: none; padding-left: 0; }
.bl-ticker--js.bl-ticker--up, .bl-ticker--js.bl-ticker--down { height: 200px; white-space: normal; }
.bl-ticker--js.bl-ticker--up .bl-ticker__text, .bl-ticker--js.bl-ticker--down .bl-ticker__text { display: block; }
.bl-clock-box { text-align: center; margin: 0; }
.bl-clock-bold { margin: 0; color: var(--blog-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-clock-box span { display: inline-block; min-width: 8ch; padding: 4px 12px; border: 1px solid var(--blog-column-line, var(--blog-line)); border-radius: 8px; background: var(--blog-card); color: var(--blog-ink); font-variant-numeric: tabular-nums; }
.bl-sheet { display: flex; flex-direction: column; align-items: center; width: 104px; margin: 0 auto; padding: 8px 4px; border: 1px solid var(--blog-column-line, var(--blog-line)); border-radius: 8px; background: #fff; color: #333; font-size: 13px; line-height: 1.3; }
.bl-sheet strong { font-size: 40px; line-height: 1.1; color: #d9431e; }

/* The line after rating a post. */
.bl-rating__said { margin-left: 8px; font-weight: 600; color: var(--blog-accent); }
.bl-rating__said:empty { display: none; }
/* Where the old blocks centred their button (Includes.2/_generate.inc.php: E-mail mij 567, Mailinglijst 1262), it stays centred;
   the guestbook's and the agenda's stood on the left. */
.bl-widget[data-type="6"] .bl-btn, .bl-widget[data-type="14"] .bl-btn { display: table; margin-left: auto; margin-right: auto; }
/* The marks (Look::MARKS). A picture before each line of a list (the blogger's or the skin's) comes with the look
   (_look_style); a picture before a post's title is an <img> (_post.twig). A shape is drawn here in the blog's colour. */
.bl-list li::before { content: none; }
body[class*="mark-list-"] .bl-list li { padding-left: 16px !important; text-indent: -16px; }
body[class*="mark-list-"] .bl-list li::before { content: ""; display: inline-block; text-indent: 0; width: 7px; height: 7px; margin-right: 9px; vertical-align: 2px; background: var(--blog-accent); }
body.mark-list-dot .bl-list li::before { border-radius: 50%; }
body.mark-list-arrow .bl-list li::before { content: "›"; width: 7px; height: auto; background: none; color: var(--blog-accent); font-weight: 700; vertical-align: 0; }
body[class*="mark-title-"] .bl-post__title::before { content: ""; display: inline-block; width: .32em; height: .32em; margin-right: .4em; vertical-align: .2em; background: var(--blog-accent); }
body.mark-title-dot .bl-post__title::before { border-radius: 50%; }
body.mark-title-arrow .bl-post__title::before { content: "›"; width: auto; height: auto; background: none; color: var(--blog-accent); vertical-align: 0; }
/* A mark drawn from its shape (Decor::MARKS), its mask set with the look (_look_style: --decor-mark-*). */
body.mark-list-shape .bl-list li::before { width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 0; background: var(--blog-accent); -webkit-mask: var(--decor-mark-list) center / contain no-repeat; mask: var(--decor-mark-list) center / contain no-repeat; }
body.mark-title-shape .bl-post__title::before { width: .62em; height: .62em; margin-right: .4em; vertical-align: -.02em; border-radius: 0; background: var(--blog-accent); -webkit-mask: var(--decor-mark-title) center / contain no-repeat; mask: var(--decor-mark-title) center / contain no-repeat; }
/* The ready-made decorations (Decor): the line under each post, the signs on the buttons, the patterns. */
.bl-divider--ready span { display: block; height: 24px; max-width: 300px; margin: 0 auto; background: var(--blog-accent); -webkit-mask: var(--decor-divider) center / contain no-repeat; mask: var(--decor-divider) center / contain no-repeat; }
.bl-btn__icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .4em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.bl-btn__icon--previous { --icon: var(--decor-previous); transform: scaleX(-1); }
.bl-btn__icon--next { --icon: var(--decor-next); }
.bl-btn__icon--down { transform: rotate(90deg); }
/* "scroll" (Look::PAGES): the next posts come by themselves; a quiet line in place of a button. */
.bl-pager__auto { display: block; flex: 1; text-align: center; padding: 12px; color: var(--blog-muted); text-decoration: none; border-top: 2px dotted var(--blog-line); font-weight: 600; }
.bl-pager__auto .bl-btn__icon { background: currentColor; }
body.bg-picture .bl-pager__auto { background: var(--blog-card); border: 0; border-radius: var(--radius); }
.bl-btn__icon--top { --icon: var(--decor-top); transform: rotate(-90deg); }
.bl-top .bl-btn { text-decoration: none; }
body[class*="pattern-posts-"] .bl-post, body[class*="pattern-columns-"] .bl-widget { --pattern: color-mix(in srgb, var(--blog-accent) 13%, transparent); }
body.pattern-posts-dots .bl-post, body.pattern-columns-dots .bl-widget { background-image: radial-gradient(var(--pattern) 1.4px, transparent 1.8px); background-size: 14px 14px; }
body.pattern-posts-stripes .bl-post, body.pattern-columns-stripes .bl-widget { background-image: repeating-linear-gradient(45deg, var(--pattern) 0 2px, transparent 2px 12px); }
body.pattern-posts-checks .bl-post, body.pattern-columns-checks .bl-widget { background-image: linear-gradient(90deg, var(--pattern) 50%, transparent 50%), linear-gradient(var(--pattern) 50%, transparent 50%); background-size: 28px 28px; }
body.pattern-posts-linen .bl-post, body.pattern-columns-linen .bl-widget { background-image: repeating-linear-gradient(0deg, var(--pattern) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, var(--pattern) 0 1px, transparent 1px 5px); }
/* The photos' corners (Look::PHOTO_CORNERS): rounded, or "Recht". A small picture (an icon, a drawing) is rounded
   by a share of its size only, so it keeps its shape; the photo tiles of Fotoalbum take their tile's corners. */
:is(.bl-post__picture img, .bl-post__own, .bl-post__body img:not(.bl-smiley), .bl-widget img, .bl-comment__text img:not(.bl-smiley)) { border-radius: min(var(--photo-radius), 7%); }
body.photos-square { --photo-radius: 0px; }
.bl-post__icon[src^="/Images/Skin/"] { height: auto; max-width: none; vertical-align: middle; image-rendering: pixelated; }
/* In one column the lists read as on the old blogs: their lines close together, no rule between them. */
body.sides-column .bl-side .bl-list li { border-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
/* A Vrije tekst block is old HTML in fixed sizes, made for the old column of 167px with 12px letters. The new column
   and its letters are about 1.2 times as large, so the block is too: its coloured bars and centred lines fill the
   column again as they did. A narrow column (Drie kolommen, Smal) is the old size. */
/* Its own letters, which inherit the column's, keep the column's size (1em / 1.2, zoomed back). */
.bl-side .bl-widget__free { zoom: 1.2; font-size: calc(1em / 1.2); }
body.layout-classic3.columns-left-narrow .bl-side--left .bl-widget__free, body.layout-classic3.columns-right-narrow .bl-side--right .bl-widget__free { zoom: 1; font-size: 1em; }
/* The blogger's own menu items (Look::menuOwn): a list opens under its name. The list is placed against the menu bar,
   not the row, so the row may scroll sideways on a phone without cutting it off. */
.bl-nav { position: relative; z-index: 5; }
.bl-nav__own { flex: none; }
.bl-nav__own > summary { list-style: none; cursor: pointer; padding: 13px 14px; color: var(--nav-ink, var(--blog-ink)); white-space: nowrap; font-weight: 500; border-bottom: 3px solid transparent; }
.bl-nav__own > summary::-webkit-details-marker { display: none; }
.bl-nav__own > summary::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.2em); }
.bl-nav__own[open] > summary::after { transform: rotate(-135deg) translateY(-.1em); }
.bl-nav__drop { position: absolute; top: 100%; left: 16px; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); background: var(--blog-card); border: 1px solid var(--blog-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px; display: grid; }
.bl-nav .bl-nav__drop a { padding: 9px 12px; border: 0; border-radius: 6px; color: var(--blog-ink); white-space: normal; font-weight: 500; }
.bl-nav .bl-nav__drop a:hover { background: color-mix(in srgb, var(--blog-accent) 12%, transparent); }
body.menu-buttons .bl-nav__own > summary { padding: 7px 18px; border: 1px solid var(--blog-line); border-radius: 999px; }
body.menu-bar .bl-nav__own > summary { color: var(--nav-ink, var(--blog-accent-ink)); border-bottom: 0; padding: 14px 16px; }
body.menu-tabs .bl-nav__own > summary { padding: 9px 16px 10px; }
/* As the old template had them (Look::skinClasses): the blog's name in the middle or on the right of the head,
   a post's title on a bar across the post in the template's colour, a block's title on a bar across the block. */
body.head-centered .bl-head__in { justify-content: center; text-align: center; }
body.head-righted .bl-head__in { justify-content: flex-end; text-align: right; }
body.post-title-bar .bl-post__title { background: var(--blog-post-title-bg); color: var(--blog-post-title-ink); margin-left: -24px; margin-right: -24px; padding: 6px 24px; }
body.post-title-bar .bl-post__title a { color: inherit; }
body.widget-title-bar .bl-widget__title { background: var(--blog-widget-title-bg); color: var(--blog-widget-title-ink); border-bottom: 0; margin: calc(-1 * var(--wpad)) calc(-1 * var(--wpad)) 10px; padding: 5px var(--wpad); }
.bl-widget { --wpad: 18px; }
body.layout-classic3 .bl-widget { --wpad: 14px; }
body.layout-diary.post-title-bar .bl-post__title { margin-left: 0; margin-right: 0; }
body.layout-album.post-title-bar .bl-posts .bl-post__title { background: none; color: inherit; padding: 0; }
body.widget-title-bar.widget-title-centered .bl-widget__title { text-align: center; }
@media (max-width: 760px) { body.post-title-bar .bl-post__title { margin-left: -18px; margin-right: -18px; padding: 6px 18px; } }
/* The skin's one size for every link (--blog-link-px), which won over the size around it: in a block's own text
   (zoomed 1.2 like the rest of it) and in a post (1.2 times, as the post text). Without it a link takes its text's size. */
.bl-widget__free a { font-size: var(--blog-link-px); }
.bl-post__body a { font-size: calc(var(--blog-link-px) * 1.2); }
/* A post kept on top without its date (Look::PINNED_DATES), in the list; on its own page the date stays. */
body.pinned-undated .bl-posts .bl-post--pinned .bl-post__date { display: none; }
/* The coloured border round the whole page (Look::FRAMES): a frame along the window's edges, over everything;
   on a phone round the page itself, so it scrolls with it rather than standing still over the text. */
body.framed::after { content: ""; position: fixed; inset: 0; border: 10px solid var(--blog-frame, var(--blog-accent)); pointer-events: none; z-index: 40; }
@media (max-width: 760px) { body.framed { position: relative; } body.framed::after { position: absolute; border-width: 5px; } }
body.widget-title-bar:not(.sides-column) .bl-widget > .bl-widget__title:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.bl-head__photo-link { flex: none; display: block; line-height: 0; }
/* A line between every block in one column, where the template drew one (ClassicSkin decor linesAll). */
body.sides-column.sides-lines:not(.layout-diary):not(.layout-album) .bl-side .bl-widget + .bl-widget { border-top: 1px solid var(--blog-column-line, var(--blog-line)) !important; padding-top: var(--wpad); }
/* The head and the room above the columns kept low, as the old blogs began close to the top. */
.bl-head__in { padding-top: 16px; padding-bottom: 14px; }
.bl-main { padding-top: 16px; }
body.open-cards.sides-column:not(.layout-diary):not(.layout-album) .bl-side { background-color: color-mix(in srgb, var(--blog-column, var(--blog-card)) 45%, transparent); }
/* The page as wide as it may be, not as wide as its posts (the body is a column; auto margins would shrink it). */
.bl-main { width: 100%; box-sizing: border-box; }
/* Latest comments: "op <post>" on its own line under the comment, not pushed to the right like a count. */
.bl-widget--comments .bl-list small { float: none; display: block; margin: 2px 0 0; }
/* Blocks without a title one after another (pictures linked one under the other) stand close together, as they did. */
body.sides-column:not(.sides-lines):not(.layout-diary):not(.layout-album) .bl-side .bl-widget:not(:has(> .bl-widget__title)):has(+ .bl-widget:not(:has(> .bl-widget__title))) { padding-bottom: 4px; }
/* A head that had no colour of its own: the title on the page's background, in its old letters' colour. */
body.head-open .bl-head { background: transparent; color: var(--blog-head-ink, var(--blog-ink)); }

/* Dagboek with "De volle breedte van het scherm": the column over the whole width, as chosen. */
body.layout-diary.width-full .bl-main { max-width: none; }

/* The tile of a post without a picture in Fototegels: the blog's colour, its first words. Elsewhere it is not shown. */
.bl-post__nopic { display: none; }
body.layout-album .bl-posts .bl-post__nopic { display: flex; order: -1; aspect-ratio: 1; align-items: center; justify-content: center; padding: 18px;
  background: color-mix(in srgb, var(--blog-accent) 14%, var(--blog-card)); color: var(--blog-ink); text-decoration: none; overflow: hidden;
  font: italic 1.05rem/1.45 var(--blog-title-font, Georgia, serif); text-align: center; }
body.layout-album .bl-posts .bl-post__nopic span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
/* Fototegels side by side are alike: as high as the highest in their row, the title at most two lines,
   the author's line and the button at the bottom of each. */
body.layout-album .bl-posts { align-items: stretch; }
body.layout-album .bl-posts .bl-post__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.layout-album .bl-posts .bl-post > :last-child { margin-top: auto; }
/* Fototegels always the same size, whatever the screen: 280 pixels wide, as many side by side as fit, the row
   centred; on a phone two to a row. */
@media (min-width: 761px) {
  body.layout-album .bl-posts { grid-template-columns: repeat(auto-fill, 280px); justify-content: center; }
}
/* The newest comments under a post in a list (Uitzicht, "Ook op de voorpagina"), in the post's box under its foot;
   the tiles of Fotoalbum keep to their picture and title. */
.bl-post .bl-comments--latest { margin: 16px 0 0; padding: 4px 16px 10px; }
.bl-post .bl-comments--latest .bl-comment:first-child { border-top: 0; }
.bl-comments__all { display: inline-block; margin-top: 6px; font-weight: 600; }
body.comments-bubbles .bl-post .bl-comments--latest { padding: 0; }
body.layout-album .bl-posts .bl-comments--latest { display: none; }
body.comments-bubbles .bl-post .bl-comments--latest .bl-comment > :not(.bl-comment__face) { background: color-mix(in srgb, var(--blog-strong) 8%, var(--blog-card)); }
/* The text above the posts on the posts' colour, where the old template put it in their area (ClassicSkin introCard). */
body.intro-card .bl-intro { background: var(--blog-card); color: var(--blog-post-ink, inherit); border: 1px solid var(--blog-line); border-radius: var(--radius); padding: 24px; }
body.intro-card.see-through .bl-intro { background-color: color-mix(in srgb, var(--blog-card) 88%, transparent); }
body.intro-card.open-cards .bl-intro { background-color: color-mix(in srgb, var(--blog-card) 45%, transparent); }
body.intro-card.layout-diary .bl-intro { background: transparent; border: 0; padding: 0; }
@media (max-width: 760px) { body.intro-card .bl-intro { padding: 18px; } }
/* A block's own text: what stands out of its lines (big letters on a colour in a small line height) shows, as on the
   old pages; only what is wider than the column is cut. Its paragraphs as close as the old columns had them (their
   space came from the column's small letters), none above the first or under the last. */
.bl-widget__free { overflow-x: clip; overflow-y: visible; }
.bl-side .bl-widget__free p { margin-top: .6em; margin-bottom: .6em; }
.bl-side .bl-widget__free > :first-child, .bl-side .bl-widget__free > :first-child > p:first-child { margin-top: 0; }
.bl-side .bl-widget__free > :last-child, .bl-side .bl-widget__free > :last-child > p:last-child { margin-bottom: 0; }
/* The blocks beside the posts a little closer together. */
.bl-side .bl-widget { margin-bottom: 12px; }
/* A picture that did not load (blog.js). */
img.bl-gone { display: none !important; }
/* The text above the posts in the letters the design had for it (Look: --blog-intro-size, --blog-intro-weight). */
.bl-intro { font-size: var(--blog-intro-size, 1em); font-weight: var(--blog-intro-weight, normal); }
/* Where a picture no longer loads (blog.js): a small box with a crossed-out picture and a line that says so. */
.bl-missing { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  width: 130px; min-height: 96px; padding: 10px 8px; margin: 4px; vertical-align: middle; border: 1px dashed #b8b2a8; border-radius: 8px;
  background: #f4f1ec; color: #6b655c; font: 400 13px/1.25 system-ui, sans-serif; text-align: center; text-decoration: none; white-space: normal; }
.bl-missing::before { content: ""; width: 34px; height: 28px; background: #9b9488;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Cpath d='M3 4h28v20H3z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M6 21l7-8 5 5 4-4 6 7z'/%3E%3Ccircle cx='23' cy='9' r='2.6'/%3E%3Cpath d='M2 26L32 2' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Cpath d='M3 4h28v20H3z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M6 21l7-8 5 5 4-4 6 7z'/%3E%3Ccircle cx='23' cy='9' r='2.6'/%3E%3Cpath d='M2 26L32 2' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A line inside text, as old browsers drew it (AuthorHtml::rulesInText). */
.bl-hr { display: block; height: 0; margin: .5em 0; border-top: 1px solid rgba(110, 110, 110, .55); border-bottom: 1px solid rgba(255, 255, 255, .45); }
/* A protected blog's page that asks for the name and password (templates/blog/locked.twig). */
.bl-locked { max-width: 480px; }
.bl-locked__address { margin: 0 0 6px; font-size: 15px; color: var(--blog-muted); }
.bl-locked__form { margin-top: 18px; padding: 18px 20px 6px; border-radius: 12px; background: var(--blog-card); border: 1px solid var(--blog-line); }
.bl-locked__form label:first-of-type { margin-top: 0; }
.bl-locked__hint { margin: 6px 0 0; font-size: 15px; color: var(--blog-muted); }
.bl-locked__form .bl-btn { margin-top: 18px; width: 100%; font-size: 17px; }
.bl-locked__error { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fdecea; color: #8a1c13; font-weight: 600; }
/* A post's date and title in a box of their own at its top (Look::TITLE_BOXES "In een eigen vakje"): the frame and the
   picture or colour the template gave its title (_look_style), else framed as the post is (--bl-post-border) or with the
   design's quiet line, on the post's own ground; elsewhere the wrapper does not show. */
.bl-post__head { display: contents; }
body.post-title-box:not(.layout-album) .bl-post__head { display: block; margin: 0 0 18px; padding: 12px 18px 14px; border: var(--bl-post-border, 2px solid var(--blog-line)); border-radius: var(--radius); background: transparent; }
body.post-title-box:not(.layout-album) .bl-post__head .bl-post__title { margin-bottom: 0; }