/* =====================================================================
   Zen of Zig - book look for the blog
   Mode is set by a body class: zoz-book (cream, like the book) or zoz-dark
   (keeps the theme's dark colours). Everything below uses --zoz-* tokens.
   ===================================================================== */

body.zoz-book, body.zoz-dark {
  --zoz-orange: #d35400;
  --zoz-dark-orange: #a04000;
  --zoz-cyan: #00d4aa;
  --zoz-yellow: #f5e4a1;
  --zoz-shadow: #3d1a00;
  --zoz-title: #f0dbb8;
  --zoz-font: "IBM Plex Mono", monospace;
}
body.zoz-book {
  --zoz-bg: #f5e6d3;
  --zoz-text: #0a0a0a;
  --zoz-paper: #f8f4e8;
  --zoz-line: #0a0a0a;
  --zoz-card-shadow: rgba(0, 0, 0, .1);
  /* remap the theme's colour presets, so header, menu and footer follow */
  --wp--preset--color--background: #f5e6d3;
  --wp--preset--color--primary: #0a0a0a;
  --wp--preset--color--secondary: #f8f4e8;
  --wp--preset--color--tertiary: #d9c5aa;
}
body.zoz-dark {
  --zoz-bg: #28262C;
  --zoz-text: #F5F0E5;
  --zoz-paper: #34313a;
  --zoz-line: #F5F0E5;
  --zoz-card-shadow: rgba(0, 0, 0, .35);
}

/* same content width as the book (850px - 2 x 20px of padding) */
body.zoz-book, body.zoz-dark { --wp--style--global--content-size: 810px; }

/* ---- page: cream paper, coffee stains and grain ---- */
body.zoz-book {
  background-color: var(--zoz-bg) !important;
  color: var(--zoz-text);
}
/* must be transparent, or it hides the coffee stains painted on the body */
body.zoz-book .wp-site-blocks,
body.zoz-book main,
body.zoz-book .wp-block-post-content {
  background: transparent !important;
}
body.zoz-book, body.zoz-dark {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cfilter id='c1c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='70' cy='70' r='45' fill='none' stroke='rgba(101,67,33,0.055)' stroke-width='9' filter='url(%23c1c)'/%3E%3Cellipse cx='115' cy='55' rx='11' ry='8' fill='rgba(101,67,33,0.045)' filter='url(%23c1c)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='200' viewBox='0 0 70 200'%3E%3Cdefs%3E%3Cfilter id='l1c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M35 5 Q40 50 32 100 Q25 150 38 190' fill='none' stroke='rgba(101,67,33,0.035)' stroke-width='3' stroke-linecap='round' filter='url(%23l1c)'/%3E%3Cpath d='M45 15 Q50 60 42 110 Q35 160 48 195' fill='none' stroke='rgba(139,90,43,0.025)' stroke-width='2' stroke-linecap='round' filter='url(%23l1c)'/%3E%3Cellipse cx='38' cy='192' rx='10' ry='6' fill='rgba(101,67,33,0.04)' filter='url(%23l1c)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='c2c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='rgba(139,90,43,0.05)' stroke-width='6' filter='url(%23c2c)'/%3E%3Cellipse cx='85' cy='40' rx='8' ry='5' fill='rgba(101,67,33,0.045)' filter='url(%23c2c)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='115' height='115' viewBox='0 0 115 115'%3E%3Cdefs%3E%3Cfilter id='c3c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.048' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='57' cy='57' r='33' fill='none' stroke='rgba(101,67,33,0.048)' stroke-width='7' filter='url(%23c3c)'/%3E%3Cellipse cx='20' cy='80' rx='10' ry='7' fill='rgba(139,90,43,0.04)' filter='url(%23c3c)'/%3E%3C/svg%3E");background-position:calc(100% + 120px) 300px,-40px 1200px,calc(100% + 60px) 2600px,-90px 4200px;background-repeat:no-repeat;background-size:420px 420px,210px 600px,290px 290px,320px 320px;
}
body.zoz-book::before, body.zoz-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.zoz-book, body.zoz-dark,
body.zoz-book .wp-block-post-content,
body.zoz-dark .wp-block-post-content {
  font-family: var(--zoz-font);
}

/* ---- header: dark bar like zenofzig.com, with the main breadcrumb ---- */
.zoz-book header.wp-block-template-part,
.zoz-dark header.wp-block-template-part {
  --wp--preset--color--primary: #f5e6d3;
  color: #f5e6d3;
}
.zoz-book header .site-header,
.zoz-dark header .site-header {
  background: #0a0a0a;
  border-bottom: 3px solid var(--zoz-orange);
  padding: 12px 24px !important;
  align-items: center;
}
.zoz-book header .wp-block-spacer, .zoz-dark header .wp-block-spacer { height: 24px !important; }

.zoz-book header .site-brand, .zoz-dark header .site-brand {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 14px;
}
.zoz-crumb { display: inline-flex; align-items: center; gap: 14px; }
.zoz-crumb-link {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: #f5e6d3 !important;
}
.zoz-crumb-link::before { content: "> "; color: var(--zoz-cyan); }
.zoz-crumb-link:hover { color: #F7A41D !important; }
.zoz-crumb-sep { color: var(--zoz-orange); font-size: 1.4rem; line-height: 1; }

.zoz-book header .wp-block-site-title, .zoz-dark header .wp-block-site-title {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.1;
}
.zoz-book header .wp-block-site-title a, .zoz-dark header .wp-block-site-title a {
  color: #f5e6d3 !important;
  text-decoration: none;
}
.zoz-book header .wp-block-site-tagline, .zoz-dark header .wp-block-site-tagline {
  margin: 0 !important;
  font-family: "Space Mono", monospace;
  font-size: .72rem !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f5e6d3;
  opacity: .8;
}
.zoz-book header .site-words-stack-small, .zoz-dark header .site-words-stack-small {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 4px 16px;
}

@media (max-width: 700px) {
  .zoz-book header .site-brand, .zoz-dark header .site-brand { flex-wrap: wrap; gap: 4px 10px; }
  .zoz-crumb-link, .zoz-book header .wp-block-site-title { font-size: .95rem; letter-spacing: 2px; }
}

/* ---- text ---- */
/* the book uses 14px; a bit bigger reads better in the blog (list excerpts keep the theme size) */
body.zoz-book .wp-block-post-content :is(p, li),
body.zoz-dark .wp-block-post-content :is(p, li) {
  font-size: 16px !important;
  line-height: 1.8 !important;
  text-align: justify;
  margin-bottom: 20px;
}
body.zoz-book .wp-block-post-content p a,
body.zoz-dark .wp-block-post-content p a {
  color: var(--zoz-dark-orange);
  text-decoration: none;
  padding: 0 3px;
  border-bottom: 2px solid var(--zoz-orange);
}
body.zoz-dark .wp-block-post-content p a { color: var(--zoz-orange); }
body.zoz-book .wp-block-post-content p a:hover,
body.zoz-dark .wp-block-post-content p a:hover {
  background: var(--zoz-orange);
  color: var(--zoz-title);
}

/* ---- first letter of the post: collage tile (variant chosen per post) ---- */
.zoz-book .wp-block-post-content > p:first-of-type::first-letter,
.zoz-dark .wp-block-post-content > p:first-of-type::first-letter {
  float: left;
  line-height: .85;
  margin-right: 8px;
  margin-top: 5px;
  padding: 2px 6px;
  color: #0a0a0a;
  font-style: normal;
  background: rgba(255, 255, 255, .6);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
.zoz-dc-1 .wp-block-post-content > p:first-of-type::first-letter { font: 700 3.4em "Times New Roman", Georgia, serif; transform: rotate(-2deg); background: rgba(245, 240, 220, .8); }
.zoz-dc-2 .wp-block-post-content > p:first-of-type::first-letter { font: 400 3.8em "Bebas Neue", Impact, sans-serif; letter-spacing: -2px; transform: rotate(1.5deg); background: rgba(255, 255, 255, .9); color: #1a1a1a; }
.zoz-dc-3 .wp-block-post-content > p:first-of-type::first-letter { font: 900 3em "Archivo Black", sans-serif; text-transform: uppercase; transform: rotate(-3deg); background: rgba(255, 250, 205, .85); padding: 4px 8px; }
.zoz-dc-4 .wp-block-post-content > p:first-of-type::first-letter { font: italic 400 3.6em Georgia, "Book Antiqua", serif; transform: rotate(2deg); background: rgba(250, 245, 235, .9); color: #2a2a2a; }
.zoz-dc-5 .wp-block-post-content > p:first-of-type::first-letter { font: 400 3.2em "Permanent Marker", cursive; transform: rotate(-1.5deg); background: rgba(255, 255, 240, .85); color: #0a0a0a; }
.zoz-dc-6 .wp-block-post-content > p:first-of-type::first-letter { font: 700 3.5em "Courier New", monospace; transform: rotate(2.5deg); background: rgba(255, 255, 255, .95); letter-spacing: -1px; }
.zoz-dc-7 .wp-block-post-content > p:first-of-type::first-letter { font: 900 3em Verdana, sans-serif; transform: rotate(-2.5deg); background: rgba(245, 245, 220, .9); padding: 3px 7px; }

/* ---- separators: dashes, like the book's hr ---- */
.zoz-book hr, .zoz-dark hr,
.zoz-book .wp-block-separator, .zoz-dark .wp-block-separator {
  border: 0 !important;
  height: 2px !important;
  width: 100%;
  max-width: 100%;
  margin: 30px 0 !important;
  opacity: .35;
  background: repeating-linear-gradient(90deg, var(--zoz-line) 0, var(--zoz-line) 15px, transparent 15px, transparent 22px) !important;
}

/* ---- previous / next post: pager buttons ---- */
.zoz-book .next-prev-links, .zoz-dark .next-prev-links {
  margin: 8px 0 30px;
  padding-top: 24px;
  border-top: 4px solid var(--zoz-line);
  gap: 20px;
}
.zoz-book .wp-block-post-navigation-link a,
.zoz-dark .wp-block-post-navigation-link a,
.zoz-book .wp-block-query-pagination a,
.zoz-dark .wp-block-query-pagination a {
  display: inline-block;
  padding: 14px 22px;
  font-family: "VT323", monospace;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zoz-text);
  background: transparent;
  border: 3px solid var(--zoz-line);
  transition: all .15s;
}
.zoz-book .post-navigation-link-previous a, .zoz-dark .post-navigation-link-previous a { transform: rotate(-2deg); }
.zoz-book .post-navigation-link-next a,     .zoz-dark .post-navigation-link-next a     { transform: rotate(2deg); }
.zoz-book .wp-block-post-navigation-link a:hover,
.zoz-dark .wp-block-post-navigation-link a:hover,
.zoz-book .wp-block-query-pagination a:hover,
.zoz-dark .wp-block-query-pagination a:hover {
  background: var(--zoz-line);
  color: var(--zoz-bg);
  transform: rotate(0deg) scale(1.05);
  box-shadow: 5px 5px 0 var(--zoz-orange);
}

/* the theme leaves a big blank (150px spacer + padding) between the author
   card and the previous / next buttons: bring them up under the card */
.zoz-book main > .wp-block-spacer:has(+ .wp-block-group .next-prev-links),
.zoz-dark main > .wp-block-spacer:has(+ .wp-block-group .next-prev-links) {
  height: 8px !important;
}
.zoz-book main > .wp-block-group:has(.next-prev-links),
.zoz-dark main > .wp-block-group:has(.next-prev-links) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* the theme draws a thin line over each of the two buttons: only the book's thick one stays */
.zoz-book .wp-block-post-navigation-link, .zoz-dark .wp-block-post-navigation-link {
  border-top: 0 !important;
}

/* ---- single post: grey dashed rule under the title + small prev/next buttons ---- */
.zoz-book .zoz-title-rule, .zoz-dark .zoz-title-rule {
  clear: both;
  height: 2px;
  margin: 22px 0 18px;
  background: repeating-linear-gradient(90deg, #8d8d8d 0, #8d8d8d 12px, transparent 12px, transparent 20px);
}
.zoz-book .zoz-top-pager, .zoz-dark .zoz-top-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 30px;
}
.zoz-book .zoz-top-pager a, .zoz-dark .zoz-top-pager a {
  padding: 5px 12px;
  font-size: 15px;
  border-width: 2px;
}
.zoz-book .zoz-top-pager .wp-block-post-navigation-link,
.zoz-dark .zoz-top-pager .wp-block-post-navigation-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  max-width: 48%;
}
.zoz-book .zoz-top-pager a:hover, .zoz-dark .zoz-top-pager a:hover { box-shadow: 3px 3px 0 var(--zoz-orange); }

/* ---- lists at the foot of the page: paper cards with tape ---- */
.zoz-book .post-meta, .zoz-dark .post-meta,
.zoz-book .wp-block-latest-posts, .zoz-dark .wp-block-latest-posts,
.zoz-book .wp-block-categories, .zoz-dark .wp-block-categories,
.zoz-book .wp-block-archives, .zoz-dark .wp-block-archives,
.zoz-book .site-footer-container .wp-block-navigation, .zoz-dark .site-footer-container .wp-block-navigation {
  position: relative;
  margin: 25px 0;
  padding: 25px;
  font-family: "VT323", monospace;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--zoz-text);
  background: var(--zoz-paper);
  border: 3px solid var(--zoz-line);
  box-shadow: 6px 6px 0 var(--zoz-card-shadow);
  transform: rotate(1deg);
}
.zoz-book .post-meta::before, .zoz-dark .post-meta::before,
.zoz-book .wp-block-latest-posts::before, .zoz-dark .wp-block-latest-posts::before,
.zoz-book .wp-block-categories::before, .zoz-dark .wp-block-categories::before,
.zoz-book .wp-block-archives::before, .zoz-dark .wp-block-archives::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 40px;
  width: 90px;
  height: 28px;
  background: rgba(255, 255, 200, .3);
  transform: rotate(4deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  border-top: 1px dashed rgba(0, 0, 0, .15);
  border-bottom: 1px dashed rgba(0, 0, 0, .15);
}
.zoz-book .post-meta::after, .zoz-dark .post-meta::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 70px;
  height: 24px;
  background: rgba(0, 212, 170, .2);
  transform: rotate(-3deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .08);
}
.zoz-book .wp-block-latest-posts, .zoz-dark .wp-block-latest-posts,
.zoz-book .wp-block-categories, .zoz-dark .wp-block-categories,
.zoz-book .wp-block-archives, .zoz-dark .wp-block-archives { list-style: none; }
.zoz-book .wp-block-latest-posts li, .zoz-dark .wp-block-latest-posts li,
.zoz-book .wp-block-categories li, .zoz-dark .wp-block-categories li,
.zoz-book .wp-block-archives li, .zoz-dark .wp-block-archives li {
  position: relative;
  margin: 10px 0;
  padding-left: 22px;
}
.zoz-book .wp-block-latest-posts li::before, .zoz-dark .wp-block-latest-posts li::before,
.zoz-book .wp-block-categories li::before, .zoz-dark .wp-block-categories li::before,
.zoz-book .wp-block-archives li::before, .zoz-dark .wp-block-archives li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--zoz-orange);
}
.zoz-book .post-meta a, .zoz-dark .post-meta a,
.zoz-book .wp-block-latest-posts a, .zoz-dark .wp-block-latest-posts a,
.zoz-book .wp-block-categories a, .zoz-dark .wp-block-categories a,
.zoz-book .wp-block-archives a, .zoz-dark .wp-block-archives a {
  color: var(--zoz-text);
  text-decoration: none;
  letter-spacing: 1px;
}
/* date / author / terms are plain text now (the date is no longer a link) */
.zoz-book .post-meta, .zoz-book .post-meta :is(time, div, span, p),
.zoz-dark .post-meta, .zoz-dark .post-meta :is(time, div, span, p) {
  color: var(--zoz-text);
}
.zoz-book .post-meta a:hover, .zoz-dark .post-meta a:hover,
.zoz-book .wp-block-latest-posts a:hover, .zoz-dark .wp-block-latest-posts a:hover,
.zoz-book .wp-block-categories a:hover, .zoz-dark .wp-block-categories a:hover,
.zoz-book .wp-block-archives a:hover, .zoz-dark .wp-block-archives a:hover {
  background: var(--zoz-orange);
  color: var(--zoz-title);
}

/* ---- "Read more" and footer links ---- */
.zoz-book .wp-block-read-more, .zoz-dark .wp-block-read-more {
  display: inline-block;
  padding: 10px 18px;
  font-family: "VT323", monospace;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zoz-text) !important;
  border: 3px solid var(--zoz-line);
  transform: rotate(-1.5deg);
  transition: all .15s;
}
.zoz-book .wp-block-read-more:hover, .zoz-dark .wp-block-read-more:hover {
  background: var(--zoz-line);
  color: var(--zoz-bg) !important;
  transform: rotate(0deg) scale(1.05);
  box-shadow: 5px 5px 0 var(--zoz-orange);
}
.zoz-book .site-footer-container a, .zoz-dark .site-footer-container a {
  color: var(--zoz-dark-orange) !important;
  font-weight: 700;
}
.zoz-dark .site-footer-container a { color: var(--zoz-orange) !important; }

/* ---- bold / italic / strong / em: the book's paper tags (.dyntag) ---- */
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) {
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  color: #0a0a0a;
  background: var(--zoz-title);
  padding: 2px 8px;
  margin: 2px 4px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .12);
  transform: rotate(-1.5deg) scale(1.02);
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: Georgia, serif; font-style: italic; transform: rotate(1deg) scale(.98); background: #f5f0e6;
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: "Merriweather", serif; font-style: normal; font-weight: 700; transform: rotate(1.5deg) scale(.96); background: #f0ebe1;
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: "Libre Baskerville", serif; font-weight: 400; font-style: italic; transform: rotate(-1deg) scale(1.01); background: #e8e3d9;
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: "Lora", serif; font-style: normal; font-weight: 700; transform: rotate(2deg) scale(.97); background: #f2ede3;
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: "EB Garamond", serif; font-style: italic; font-weight: 700; transform: rotate(.8deg) scale(.99); background: #f4efe5;
}
.zoz-book .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i),
.zoz-dark .wp-block-post-content :is(p,li,blockquote) :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) ~ :is(strong,b,em,i) {
  font-family: "Spectral", serif; font-style: normal; font-weight: 700; transform: rotate(-1.8deg) scale(1.02); background: #ece7dd;
}

.zoz-book .wp-block-post-content li :is(strong,b,em,i),
.zoz-dark .wp-block-post-content li :is(strong,b,em,i) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  padding: 2px 6px !important;
  margin: 0 2px !important;
  position: relative;
  display: inline !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 0;
}
.zoz-book .wp-block-post-content li :is(strong,b,em,i)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i)::before {
  content: "";
  position: absolute;
  inset: 0 -2px;
  z-index: -1;
  border-radius: 2px;
  background: rgba(57, 255, 20, .5);
  transform: rotate(-1.5deg);
}
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(2)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(2)::before { transform: rotate(1.8deg); background: rgba(255,255,0,.6); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(3)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(3)::before { transform: rotate(-2deg); background: rgba(0,255,255,.5); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(4)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(4)::before { transform: rotate(2.2deg); background: rgba(255,105,180,.5); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(5)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(5)::before { transform: rotate(-1.8deg); background: rgba(255,165,0,.6); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(6)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(6)::before { transform: rotate(2.5deg); background: rgba(186,85,211,.5); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(7)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(7)::before { transform: rotate(-2.3deg); background: rgba(57,255,20,.5); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(8)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(8)::before { transform: rotate(1.5deg); background: rgba(255,255,0,.6); }
.zoz-book .wp-block-post-content li :is(strong,b,em,i):nth-of-type(9)::before,
.zoz-dark .wp-block-post-content li :is(strong,b,em,i):nth-of-type(9)::before { transform: rotate(-2.5deg); background: rgba(0,255,255,.5); }

/* ---- italic paragraphs = the book's "story" cards: torn paper, taped, with a
        newspaper-cutting first letter that changes with 1st, 2nd, 3rd... ---- */
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story {
  position: relative;
  z-index: 1;
  margin: 28px 0 !important;
  padding: 22px 28px !important;
  font-style: italic;
  text-align: left;
  color: #1a1a1a !important;
  background: #f8f4e8 !important;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .12);
  clip-path: polygon(0 2%,3% 0,8% 1%,15% 0,22% 2%,30% 0,38% 1%,45% 0,52% 2%,60% 0,68% 1%,75% 0,82% 2%,90% 0,97% 1%,100% 3%,100% 8%,99% 15%,100% 22%,99% 30%,100% 40%,99% 50%,100% 60%,99% 70%,100% 80%,99% 90%,100% 97%,97% 100%,90% 99%,82% 100%,75% 98%,68% 100%,60% 99%,52% 100%,45% 98%,38% 100%,30% 99%,22% 100%,15% 98%,8% 100%,3% 99%,0 97%,1% 90%,0 80%,1% 70%,0 60%,1% 50%,0 40%,1% 30%,0 22%,1% 15%,0 8%);
}
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 30px;
  width: 80px;
  height: 24px;
  background: rgba(255, 255, 200, .3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  border-top: 1px dashed rgba(0, 0, 0, .08);
  border-bottom: 1px dashed rgba(0, 0, 0, .08);
  transform: rotate(-3deg);
}
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story:is(.zoz-story-2, .zoz-story-4, .zoz-story-6, .zoz-story-8)::before {
  left: auto;
  right: 35px;
  transform: rotate(4deg);
}
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story::first-letter {
  float: left;
  line-height: .85;
  margin-right: 8px;
  margin-top: 5px;
  padding: 2px 6px;
  color: #0a0a0a;
  font-style: normal;
  background: rgba(255, 255, 255, .6);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-1 { background: radial-gradient(ellipse 45px 40px at 85% 20%, rgba(139,90,43,.12) 0%, transparent 70%), #f8f4e8 !important;  }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-2 { background: repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(100,149,237,.3) 24px, rgba(100,149,237,.3) 25px), linear-gradient(90deg, rgba(255,100,100,.15) 0, transparent 3px), #fafafa !important; padding-left: 35px !important; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-3 { background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(180,180,180,.4) 19px, rgba(180,180,180,.4) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(180,180,180,.4) 19px, rgba(180,180,180,.4) 20px), #f8f8f8 !important;  }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-4 { background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(245,240,220,.9) 0, rgba(220,210,180,.95) 100%), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px) !important; font-family: "Times New Roman", Times, serif; font-style: normal; color: #333 !important; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-5 { background: radial-gradient(ellipse 35px 50px at 10% 75%, rgba(139,90,43,.1) 0%, transparent 65%), radial-gradient(ellipse 25px 25px at 90% 85%, rgba(139,90,43,.08) 0%, transparent 60%), #f8f4e8 !important;  }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-6 { background: repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(70,130,180,.25) 18px, rgba(70,130,180,.25) 19px), #fffef8 !important;  }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-7 { background: radial-gradient(ellipse 60% 40% at 20% 80%, rgba(139,90,43,.08) 0, transparent 70%), linear-gradient(135deg, #f5f0e0 0, #ebe5d0 50%, #f0ead8 100%) !important; font-family: Georgia, "Times New Roman", serif; font-style: normal; border: 1px solid rgba(139,90,43,.2); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-8 { background: radial-gradient(ellipse 55px 35px at 70% 90%, rgba(139,90,43,.1) 0%, transparent 70%), #f8f4e8 !important;  }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-1::first-letter { font: 700 3.4em "Times New Roman", Georgia, serif; transform: rotate(-2deg); background: rgba(245,240,220,.8); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-2::first-letter { font: 400 3.8em "Bebas Neue", Impact, sans-serif; letter-spacing: -2px; transform: rotate(1.5deg); background: rgba(255,255,255,.9); color: #1a1a1a; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-3::first-letter { font: 900 3em "Archivo Black", sans-serif; text-transform: uppercase; transform: rotate(-3deg); background: rgba(255,250,205,.85); padding: 4px 8px; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-4::first-letter { font: italic 400 3.6em Georgia, "Book Antiqua", serif; transform: rotate(2deg); background: rgba(250,245,235,.9); color: #2a2a2a; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-5::first-letter { font: 400 3.2em "Permanent Marker", cursive; transform: rotate(-1.5deg); background: rgba(255,255,240,.85); color: #0a0a0a; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-6::first-letter { font: 700 3.5em "Courier New", monospace; transform: rotate(2.5deg); background: rgba(255,255,255,.95); letter-spacing: -1px; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-7::first-letter { font: 900 3em Verdana, sans-serif; transform: rotate(-2.5deg); background: rgba(245,245,220,.9); padding: 3px 7px; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-story-8::first-letter { font: 700 3.7em "Palatino Linotype", "Book Antiqua", Palatino, serif; transform: rotate(1deg); background: rgba(250,248,240,.85); color: #1a1a1a; }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-1 { transform: rotate(-.8deg); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-2 { transform: rotate(1.1deg); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-3 { transform: rotate(-.4deg); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-4 { transform: rotate(.7deg); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-5 { transform: rotate(-1deg); }
:is(body.zoz-book, body.zoz-dark) .wp-block-post-content p.zoz-story.zoz-rot-6 { transform: rotate(.5deg); }

/* three "cut" variants: scissor snips of different depth; images, featured
   images and video embeds take them in turn */
body.zoz-book, body.zoz-dark { --zoz-cut: polygon(0% 3px, 3% 0px, 8% 2px, 15% 0px, 22% 3px, 30% 1px, 38% 0px, 45% 2px, 52% 3px, 60.2% 0px, 62.5% 13px, 63.6% 0px, 68% 2px, 75% 0px, 82% 3px, 83.0% 0px, 84.2% 21px, 84.9% 0px, 90% 1px, 97% 0px, 100% 2px, calc(100% - 3px) 6%, calc(100% - 1px) 14%, calc(100% - 0px) 24%, calc(100% - 2px) 34%, 100% 35.8%, calc(100% - 11px) 38.5%, 100% 40.0%, calc(100% - 3px) 45%, calc(100% - 0px) 56%, calc(100% - 2px) 67%, calc(100% - 0px) 78%, calc(100% - 3px) 88%, calc(100% - 1px) 95%, 100% calc(100% - 1px), 97% calc(100% - 0px), 90% calc(100% - 2px), 82% calc(100% - 3px), 75% calc(100% - 0px), 68% calc(100% - 2px), 60% calc(100% - 0px), 52% calc(100% - 3px), 45% calc(100% - 1px), 38% calc(100% - 0px), 30% calc(100% - 2px), 23.8% calc(100% - 0px), 21.6% calc(100% - 12px), 20.4% calc(100% - 0px), 15% calc(100% - 0px), 8% calc(100% - 2px), 3% calc(100% - 0px), 0% calc(100% - 3px), 2px 95%, 0px 88%, 3px 78%, 1px 67%, 0px 56%, 0px 47.1%, 24px 45.7%, 0px 45.0%, 3px 34%, 0px 24%, 2px 14%, 0px 6%); }
body.zoz-book .wp-block-image:nth-of-type(3n+2), body.zoz-dark .wp-block-image:nth-of-type(3n+2),
body.zoz-book .wp-block-embed:nth-of-type(3n+2), body.zoz-dark .wp-block-embed:nth-of-type(3n+2),
body.zoz-book .wp-block-post-template > li:nth-child(3n+2), body.zoz-dark .wp-block-post-template > li:nth-child(3n+2) { --zoz-cut: polygon(0% 3px, 3% 0px, 8% 2px, 15% 0px, 22.2% 0px, 24.4% 11px, 25.6% 0px, 30% 1px, 38% 0px, 45% 2px, 52% 3px, 60% 0px, 68% 2px, 75% 0px, 82% 3px, 90% 1px, 97% 0px, 100% 2px, calc(100% - 3px) 6%, calc(100% - 1px) 14%, calc(100% - 0px) 24%, calc(100% - 2px) 34%, calc(100% - 3px) 45%, calc(100% - 0px) 56%, 100% 56.9%, calc(100% - 24px) 58.3%, 100% 59.0%, calc(100% - 2px) 67%, calc(100% - 0px) 78%, calc(100% - 3px) 88%, calc(100% - 1px) 95%, 100% calc(100% - 1px), 97% calc(100% - 0px), 90% calc(100% - 2px), 89.0% calc(100% - 0px), 87.8% calc(100% - 22px), 87.1% calc(100% - 0px), 82% calc(100% - 3px), 75% calc(100% - 0px), 67.8% calc(100% - 0px), 65.5% calc(100% - 13px), 64.4% calc(100% - 0px), 60% calc(100% - 0px), 52% calc(100% - 3px), 45% calc(100% - 1px), 38% calc(100% - 0px), 30% calc(100% - 2px), 22% calc(100% - 3px), 15% calc(100% - 0px), 8% calc(100% - 2px), 3% calc(100% - 0px), 0% calc(100% - 3px), 2px 95%, 0px 88%, 3px 78%, 0px 72.2%, 12px 69.5%, 0px 68.0%, 1px 67%, 0px 56%, 2px 45%, 3px 34%, 0px 24%, 2px 14%, 0px 6%); }
body.zoz-book .wp-block-image:nth-of-type(3n), body.zoz-dark .wp-block-image:nth-of-type(3n),
body.zoz-book .wp-block-embed:nth-of-type(3n), body.zoz-dark .wp-block-embed:nth-of-type(3n),
body.zoz-book .wp-block-post-template > li:nth-child(3n), body.zoz-dark .wp-block-post-template > li:nth-child(3n) { --zoz-cut: polygon(0% 3px, 3% 0px, 8% 2px, 15% 0px, 22% 3px, 30% 1px, 38% 0px, 42.9% 0px, 44.3% 23px, 45.0% 0px, 52% 3px, 60% 0px, 68% 2px, 75% 0px, 82% 3px, 90% 1px, 97% 0px, 100% 2px, calc(100% - 3px) 6%, calc(100% - 1px) 14%, calc(100% - 0px) 24%, calc(100% - 2px) 34%, calc(100% - 3px) 45%, calc(100% - 0px) 56%, calc(100% - 2px) 67%, 100% 71.8%, calc(100% - 12px) 74.5%, 100% 76.0%, calc(100% - 0px) 78%, calc(100% - 3px) 88%, calc(100% - 1px) 95%, 100% calc(100% - 1px), 97% calc(100% - 0px), 90% calc(100% - 2px), 82% calc(100% - 3px), 75% calc(100% - 0px), 68% calc(100% - 2px), 60% calc(100% - 0px), 52% calc(100% - 3px), 46.8% calc(100% - 0px), 44.5% calc(100% - 11px), 43.4% calc(100% - 0px), 38% calc(100% - 0px), 30% calc(100% - 2px), 22% calc(100% - 3px), 15% calc(100% - 0px), 11.0% calc(100% - 0px), 9.8% calc(100% - 21px), 9.1% calc(100% - 0px), 8% calc(100% - 2px), 3% calc(100% - 0px), 0% calc(100% - 3px), 2px 95%, 0px 88%, 3px 78%, 1px 67%, 0px 56%, 2px 45%, 3px 34%, 0px 30.2%, 13px 27.4%, 0px 26.0%, 0px 24%, 2px 14%, 0px 6%); }

/* ---- sticky tape on images and videos (two pieces per figure) ---- */
body.zoz-book .wp-block-image, body.zoz-dark .wp-block-image,
body.zoz-book .wp-block-embed.is-type-video, body.zoz-dark .wp-block-embed.is-type-video,
body.zoz-book .wp-block-post-featured-image, body.zoz-dark .wp-block-post-featured-image { position: relative; }
body.zoz-book .wp-block-image::before,
body.zoz-dark .wp-block-image::before,
body.zoz-book .wp-block-embed.is-type-video::before,
body.zoz-dark .wp-block-embed.is-type-video::before,
body.zoz-book .wp-block-post-featured-image::before,
body.zoz-dark .wp-block-post-featured-image::before,
body.zoz-book .wp-block-image::after,
body.zoz-dark .wp-block-image::after,
body.zoz-book .wp-block-embed.is-type-video::after,
body.zoz-dark .wp-block-embed.is-type-video::after,
body.zoz-book .wp-block-post-featured-image::after,
body.zoz-dark .wp-block-post-featured-image::after { content: ""; position: absolute; z-index: 3; width: 78px; height: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.18); border-top: 1px dashed rgba(0,0,0,.12); border-bottom: 1px dashed rgba(0,0,0,.12); pointer-events: none; }
body.zoz-book .wp-block-image::before,
body.zoz-dark .wp-block-image::before,
body.zoz-book .wp-block-embed.is-type-video::before,
body.zoz-dark .wp-block-embed.is-type-video::before,
body.zoz-book .wp-block-post-featured-image::before,
body.zoz-dark .wp-block-post-featured-image::before { top: -10px; left: 12%; transform: rotate(-5deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-image::after,
body.zoz-dark .wp-block-image::after,
body.zoz-book .wp-block-embed.is-type-video::after,
body.zoz-dark .wp-block-embed.is-type-video::after,
body.zoz-book .wp-block-post-featured-image::after,
body.zoz-dark .wp-block-post-featured-image::after { bottom: -9px; right: 10%; transform: rotate(4deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-image:nth-of-type(3n+2)::before,
body.zoz-dark .wp-block-image:nth-of-type(3n+2)::before,
body.zoz-book .wp-block-embed.is-type-video:nth-of-type(3n+2)::before,
body.zoz-dark .wp-block-embed.is-type-video:nth-of-type(3n+2)::before,
body.zoz-book .wp-block-post-template > li:nth-of-type(3n+2) .wp-block-post-featured-image::before,
body.zoz-dark .wp-block-post-template > li:nth-of-type(3n+2) .wp-block-post-featured-image::before { top: -9px; right: 14%; left: auto; transform: rotate(6deg); background: rgba(255,182,193,.75); }
body.zoz-book .wp-block-image:nth-of-type(3n+2)::after,
body.zoz-dark .wp-block-image:nth-of-type(3n+2)::after,
body.zoz-book .wp-block-embed.is-type-video:nth-of-type(3n+2)::after,
body.zoz-dark .wp-block-embed.is-type-video:nth-of-type(3n+2)::after,
body.zoz-book .wp-block-post-template > li:nth-of-type(3n+2) .wp-block-post-featured-image::after,
body.zoz-dark .wp-block-post-template > li:nth-of-type(3n+2) .wp-block-post-featured-image::after { top: 16px; left: -22px; bottom: auto; right: auto; transform: rotate(-40deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-image:nth-of-type(3n)::before,
body.zoz-dark .wp-block-image:nth-of-type(3n)::before,
body.zoz-book .wp-block-embed.is-type-video:nth-of-type(3n)::before,
body.zoz-dark .wp-block-embed.is-type-video:nth-of-type(3n)::before,
body.zoz-book .wp-block-post-template > li:nth-of-type(3n) .wp-block-post-featured-image::before,
body.zoz-dark .wp-block-post-template > li:nth-of-type(3n) .wp-block-post-featured-image::before { bottom: -9px; top: auto; left: 16%; transform: rotate(-3deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-image:nth-of-type(3n)::after,
body.zoz-dark .wp-block-image:nth-of-type(3n)::after,
body.zoz-book .wp-block-embed.is-type-video:nth-of-type(3n)::after,
body.zoz-dark .wp-block-embed.is-type-video:nth-of-type(3n)::after,
body.zoz-book .wp-block-post-template > li:nth-of-type(3n) .wp-block-post-featured-image::after,
body.zoz-dark .wp-block-post-template > li:nth-of-type(3n) .wp-block-post-featured-image::after { top: -12px; right: -20px; bottom: auto; left: auto; transform: rotate(38deg); background: rgba(255, 255, 200, .3); }

/* ---- images: paper cut-outs, slightly crooked, like the book ---- */
body.zoz-book .wp-block-post-content .wp-block-image img,
body.zoz-book .wp-block-post-content figure.wp-block-gallery img,
body.zoz-book .wp-block-post-featured-image img,
body.zoz-dark .wp-block-post-content .wp-block-image img,
body.zoz-dark .wp-block-post-content figure.wp-block-gallery img,
body.zoz-dark .wp-block-post-featured-image img {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  padding: 5px;
  background: #fffef8;               /* thin white paper border of the cut-out */
  clip-path: var(--zoz-cut);
  transform: rotate(-1.2deg);
  transition: transform .2s ease;
}
/* the figure shrinks to the image width: the tape is positioned on the figure,
   so a narrow picture must not sit inside a full-width figure */
body.zoz-book .wp-block-image:not(.alignleft):not(.alignright),
body.zoz-dark .wp-block-image:not(.alignleft):not(.alignright) {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* the shadow goes on the wrapper: clip-path would cut a box-shadow */
body.zoz-book .wp-block-image, body.zoz-dark .wp-block-image,
body.zoz-book .wp-block-post-featured-image, body.zoz-dark .wp-block-post-featured-image {
  margin: 28px auto;
  filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .25));
}
/* a different tilt for each one: 1st, 2nd, 3rd... */
body.zoz-book .wp-block-post-content .wp-block-image:nth-of-type(3n+2) img,
body.zoz-dark .wp-block-post-content .wp-block-image:nth-of-type(3n+2) img { transform: rotate(1deg); }
body.zoz-book .wp-block-post-content .wp-block-image:nth-of-type(3n) img,
body.zoz-dark .wp-block-post-content .wp-block-image:nth-of-type(3n) img { transform: rotate(-.6deg); }
body.zoz-book .wp-block-post-template > li:nth-child(even) .wp-block-post-featured-image img,
body.zoz-dark .wp-block-post-template > li:nth-child(even) .wp-block-post-featured-image img { transform: rotate(1deg); }
/* only images that are links react to the mouse (they straighten up a little) */
body.zoz-book .wp-block-image a:hover img, body.zoz-dark .wp-block-image a:hover img,
body.zoz-book .wp-block-post-featured-image a:hover img, body.zoz-dark .wp-block-post-featured-image a:hover img { transform: rotate(0deg) scale(1.01); }

/* ---- video embeds (YouTube...): the same paper border, never rotated ---- */
body.zoz-book .wp-block-embed.is-type-video,
body.zoz-dark .wp-block-embed.is-type-video {
  margin: 28px auto;
  filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .25));
}
body.zoz-book .wp-block-embed.is-type-video .wp-block-embed__wrapper,
body.zoz-dark .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  background: #fffef8;
  clip-path: var(--zoz-cut);
}
body.zoz-book .wp-block-embed.is-type-video iframe,
body.zoz-dark .wp-block-embed.is-type-video iframe {
  box-sizing: border-box;
  border: 5px solid #fffef8;   /* inside the iframe box, so it works with the aspect-ratio embeds */
  max-width: 100%;
}

/* an opening quote before the first letter hangs in the margin, so it is not
   swallowed by the collage tile of the first letter */
body.zoz-book .wp-block-post-content p,
body.zoz-dark .wp-block-post-content p { position: relative; }
.zoz-oq { position: absolute; left: -.72em; top: 0; }

/* ---- post listings: each title box tilted differently (1st..20th) and taped ---- */
body.zoz-book .wp-block-post-template .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template .wp-block-post-title::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 74px;
  height: 22px;
  background: rgba(255, 255, 200, .3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  border-top: 1px dashed rgba(0, 0, 0, .12);
  border-bottom: 1px dashed rgba(0, 0, 0, .12);
  pointer-events: none;
}
body.zoz-book .wp-block-post-template > li:nth-child(20n+1) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+1) .wp-block-post-title::before { transform: rotate(-2.5deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+1) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+1) .wp-block-post-title::after { top: -12px; left: 10%; right: auto; bottom: auto; transform: rotate(-4deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+2) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+2) .wp-block-post-title::before { transform: rotate(1.8deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+2) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+2) .wp-block-post-title::after { top: -12px; left: auto; right: 8%; bottom: auto; transform: rotate(5deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+3) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+3) .wp-block-post-title::before { transform: rotate(-1deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+3) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+3) .wp-block-post-title::after { top: -10px; left: -16px; right: auto; bottom: auto; transform: rotate(-38deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+4) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+4) .wp-block-post-title::before { transform: rotate(2.6deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+4) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+4) .wp-block-post-title::after { top: auto; left: auto; right: -16px; bottom: -8px; transform: rotate(-34deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+5) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+5) .wp-block-post-title::before { transform: rotate(-2deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+5) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+5) .wp-block-post-title::after { top: auto; left: 14%; right: auto; bottom: -12px; transform: rotate(3deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+6) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+6) .wp-block-post-title::before { transform: rotate(0.8deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+6) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+6) .wp-block-post-title::after { top: -12px; left: 10%; right: auto; bottom: auto; transform: rotate(-4deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+7) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+7) .wp-block-post-title::before { transform: rotate(-3deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+7) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+7) .wp-block-post-title::after { top: -12px; left: auto; right: 8%; bottom: auto; transform: rotate(5deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+8) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+8) .wp-block-post-title::before { transform: rotate(2.2deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+8) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+8) .wp-block-post-title::after { top: -10px; left: -16px; right: auto; bottom: auto; transform: rotate(-38deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+9) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+9) .wp-block-post-title::before { transform: rotate(-1.5deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+9) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+9) .wp-block-post-title::after { top: auto; left: auto; right: -16px; bottom: -8px; transform: rotate(-34deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+10) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+10) .wp-block-post-title::before { transform: rotate(1.2deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+10) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+10) .wp-block-post-title::after { top: auto; left: 14%; right: auto; bottom: -12px; transform: rotate(3deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+11) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+11) .wp-block-post-title::before { transform: rotate(-2.8deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+11) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+11) .wp-block-post-title::after { top: -12px; left: 10%; right: auto; bottom: auto; transform: rotate(-4deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+12) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+12) .wp-block-post-title::before { transform: rotate(2deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+12) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+12) .wp-block-post-title::after { top: -12px; left: auto; right: 8%; bottom: auto; transform: rotate(5deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+13) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+13) .wp-block-post-title::before { transform: rotate(-0.6deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+13) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+13) .wp-block-post-title::after { top: -10px; left: -16px; right: auto; bottom: auto; transform: rotate(-38deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+14) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+14) .wp-block-post-title::before { transform: rotate(3deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+14) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+14) .wp-block-post-title::after { top: auto; left: auto; right: -16px; bottom: -8px; transform: rotate(-34deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+15) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+15) .wp-block-post-title::before { transform: rotate(-1.8deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+15) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+15) .wp-block-post-title::after { top: auto; left: 14%; right: auto; bottom: -12px; transform: rotate(3deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+16) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+16) .wp-block-post-title::before { transform: rotate(1.5deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+16) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+16) .wp-block-post-title::after { top: -12px; left: 10%; right: auto; bottom: auto; transform: rotate(-4deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+17) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+17) .wp-block-post-title::before { transform: rotate(-2.2deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+17) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+17) .wp-block-post-title::after { top: -12px; left: auto; right: 8%; bottom: auto; transform: rotate(5deg); background: rgba(0, 212, 170, .2); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+18) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+18) .wp-block-post-title::before { transform: rotate(0.5deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+18) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+18) .wp-block-post-title::after { top: -10px; left: -16px; right: auto; bottom: auto; transform: rotate(-38deg); background: rgba(255,182,193,.7); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+19) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+19) .wp-block-post-title::before { transform: rotate(-2.9deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n+19) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n+19) .wp-block-post-title::after { top: auto; left: auto; right: -16px; bottom: -8px; transform: rotate(-34deg); background: rgba(255, 255, 200, .3); }
body.zoz-book .wp-block-post-template > li:nth-child(20n) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(20n) .wp-block-post-title::before { transform: rotate(2.4deg); }
body.zoz-book .wp-block-post-template > li:nth-child(20n) .wp-block-post-title::after,
body.zoz-dark .wp-block-post-template > li:nth-child(20n) .wp-block-post-title::after { top: auto; left: 14%; right: auto; bottom: -12px; transform: rotate(3deg); background: rgba(0, 212, 170, .2); }

/* ---- light / dark switch in the header (bulb <-> sun) ---- */
.zoz-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  padding: 4px;
  line-height: 0;
  cursor: pointer;
  color: #f5e6d3;
  background: transparent;
  border: 0;
  transition: color .15s, transform .15s;
}
.zoz-theme-toggle:hover { color: #F7A41D; transform: scale(1.12) rotate(-6deg); }
.zoz-theme-toggle:focus:not(:focus-visible) { outline: none; }
.zoz-theme-toggle svg { width: 28px; height: 28px; }
.zoz-theme-toggle .zoz-icon-sun { display: none; }
body.zoz-dark .zoz-theme-toggle .zoz-icon-bulb { display: none; }
body.zoz-dark .zoz-theme-toggle .zoz-icon-sun { display: block; }

/* ---- title boxes: straight edges with a few sharp cuts (4 variants, in turn in listings) ---- */
body.zoz-book .wp-block-post-title::before, body.zoz-dark .wp-block-post-title::before,
body.zoz-book .wp-block-query-title::before, body.zoz-dark .wp-block-query-title::before {
  clip-path: polygon(0% 0px, 15.1% 0px, 16.2% 12px, 16.8% 0px, 83.2% 0px, 84.2% 10px, 84.7% 0px, 100% 0px, 100% 31.0%, calc(100% - 12px) 37.2%, 100% 40.5%, 100% calc(100% - 0px), 62.9% calc(100% - 0px), 61.8% calc(100% - 14px), 61.2% calc(100% - 0px), 0% calc(100% - 0px));
}
body.zoz-book .wp-block-post-template > li:nth-child(4n+1) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(4n+1) .wp-block-post-title::before { clip-path: polygon(0% 0px, 15.1% 0px, 16.2% 12px, 16.8% 0px, 83.2% 0px, 84.2% 10px, 84.7% 0px, 100% 0px, 100% 31.0%, calc(100% - 12px) 37.2%, 100% 40.5%, 100% calc(100% - 0px), 62.9% calc(100% - 0px), 61.8% calc(100% - 14px), 61.2% calc(100% - 0px), 0% calc(100% - 0px)); }
body.zoz-book .wp-block-post-template > li:nth-child(4n+2) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(4n+2) .wp-block-post-title::before { clip-path: polygon(0% 0px, 51.1% 0px, 52.2% 11px, 52.8% 0px, 100% 0px, 100% calc(100% - 0px), 90.8% calc(100% - 0px), 89.8% calc(100% - 10px), 89.3% calc(100% - 0px), 22.9% calc(100% - 0px), 21.8% calc(100% - 13px), 21.2% calc(100% - 0px), 0% calc(100% - 0px), 0px 63.0%, 12px 56.8%, 0px 53.5%); }
body.zoz-book .wp-block-post-template > li:nth-child(4n+3) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(4n+3) .wp-block-post-title::before { clip-path: polygon(0% 0px, 33.1% 0px, 34.2% 13px, 34.8% 0px, 100% 0px, 100% 63.0%, calc(100% - 11px) 69.2%, 100% 72.5%, 100% calc(100% - 0px), 46.9% calc(100% - 0px), 45.8% calc(100% - 14px), 45.2% calc(100% - 0px), 0% calc(100% - 0px)); }
body.zoz-book .wp-block-post-template > li:nth-child(4n) .wp-block-post-title::before,
body.zoz-dark .wp-block-post-template > li:nth-child(4n) .wp-block-post-title::before { clip-path: polygon(0% 0px, 71.1% 0px, 72.2% 13px, 72.8% 0px, 100% 0px, 100% 25.0%, calc(100% - 11px) 31.2%, 100% 34.5%, 100% calc(100% - 0px), 10.9% calc(100% - 0px), 9.8% calc(100% - 12px), 9.2% calc(100% - 0px), 0% calc(100% - 0px), 0px 79.0%, 10px 72.8%, 0px 69.5%); }

/* ---- terminal / code blocks: the slightly crooked black terminal ---- */
.zoz-book .wp-block-code, .zoz-dark .wp-block-code,
.zoz-book pre.wp-block-preformatted, .zoz-dark pre.wp-block-preformatted {
  margin: 20px 0;
  padding: 20px;
  background: #1a1a1a;
  color: #ddd;
  border: 3px solid #0a0a0a;
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--zoz-card-shadow);
  transform: rotate(-.6deg);
  font-family: "VT323", monospace;
  font-size: 18px;
  line-height: 1.3;
  overflow-x: auto;
}
.zoz-book .wp-block-code code, .zoz-dark .wp-block-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* =====================================================================
   Titles (see also zoz-styles.php for the letter wrapping)
   ===================================================================== */
.wp-block-post-title,
.wp-block-query-title {
  position: relative;
  z-index: 0;
  display: inline-block !important;
  max-width: 96%;
  margin-left: 10px !important;
  padding: 15px 25px;
  font-family: "Archivo Black", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.7rem, 4.2vw, 2.8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -1px;
  text-transform: uppercase !important;
  color: #f0dbb8 !important;
  text-shadow:
    3px 3px 0 #3d1a00,
    3px 3px 0 transparent,
    5px 5px 0 #3d1a00,
    12px 12px 0 transparent;
}

.wp-block-post-title a,
.wp-block-query-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.wp-block-post-title::before,
.wp-block-query-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px;
  transform: rotate(-2.5deg);
  background-color: #d35400;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255,255,255,.1) 0, transparent 50%, rgba(0,0,0,.1) 100%);
  background-blend-mode: overlay, normal;
}

/* the single-post / archive h1 is centered; titles in listings (h2/h3) stay left */
h1.wp-block-post-title,
h1.wp-block-query-title {
  display: block !important;
  width: fit-content;
  max-width: min(calc(100% - 16px), 800px) !important; /* book content width */
  /* left edge of the content column (centered, content-size wide) + 8px,
     because the orange block overhangs by 8px */
  margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 810px))) / 2 + 8px) !important;
  margin-right: auto !important;
  text-align: left !important;   /* box on the left edge of the content, text left inside the box */
  /* book: 68px. --zoz-scale (set by PHP) shrinks titles with very long words */
  font-size: calc(clamp(2rem, 10vw, 68px) * var(--zoz-scale, 1)) !important;
  line-height: 1 !important;
  letter-spacing: -2px;
}

/* a word never breaks in the middle, even if its letters are separate boxes */
.zoz-w { white-space: nowrap; }

/* irregular letters: same values as the book's .ran_style1..10 */
.zoz-l { display: inline-block; }
.zoz-l.ran_style1  { transform: rotate(-2deg); }
.zoz-l.ran_style2  { text-shadow: none; transform: scale(.98) rotate(1.3deg); }
.zoz-l.ran_style3  { text-shadow: none; transform: scale(1.04) rotate(-1.1deg); }
.zoz-l.ran_style4  { text-shadow: none; transform: scale(.9) rotate(1.2deg); }
.zoz-l.ran_style5  { text-shadow: none; transform: scale(1.04) rotate(-1.1deg); }
.zoz-l.ran_style6  { text-shadow: none; transform: scale(.9) rotate(1deg); }
.zoz-l.ran_style7  { text-shadow: none; transform: scale(1.04) rotate(-1.4deg); margin-right: 4px; }
.zoz-l.ran_style8  { text-shadow: none; transform: scale(.9) rotate(1.6deg); }
.zoz-l.ran_style9  { text-shadow: none; transform: scale(1.04) rotate(-1.5deg); }
.zoz-l.ran_style10 { text-shadow: none; transform: scale(.98) rotate(1.1deg); }