/* Rosine Jozef Perelberg — reproduces the Divi 5 design (and the site's own custom CSS) with plain CSS.
   Colours and fonts come from content/site.json (CSS variables in <head>); measured spacing is in spacing.css. */
@import url(spacing.css);

@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/lato-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-latin-700-normal.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

body { margin: 0; background: var(--c-page); color: var(--c-text); font: 400 14px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-heading); font-weight: 400; line-height: 1.3; margin: 0; padding-bottom: 10px; color: var(--c-heading); }
h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 26px; } h4 { font-size: 21px; } h5 { font-size: 12px; line-height: 1.25; } h6 { font-size: 11px; }
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
strong, b { font-weight: 700; }
blockquote { margin: 20px 0; padding-left: 20px; border-left: 5px solid var(--c-link); }
.prose ul, .prose ol { margin: 0; padding: 0 0 23px 1em; line-height: 26px; }
.prose ol { list-style-position: inside; padding-left: 0; }
.prose li { margin-bottom: 0; }
.prose ul ul, .prose ol ol { padding-bottom: 0; padding-left: 2em; }
.prose > p:last-child, .prose > ul:last-child, .prose > ol:last-child { padding-bottom: 0; }
.prose .alignright { float: right; margin: 0 0 0 15px; }
.prose .alignleft { float: left; margin: 0 15px 0 0; }
.prose .aligncenter { display: block; margin: 0 auto; }
.prose iframe { max-width: 100%; }

.container { width: 80%; max-width: 1080px; margin: 0 auto; }
.visually-hidden, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; padding: .5em 1em; }
.skip-link:focus { left: 1em; }
:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

/* ---------- Header: logo and news box, then the menu with the social buttons (white) ---------- */
.site-header { background: #fff; position: relative; z-index: 50; }
.header-inner { display: grid; grid-template-columns: 1fr 510px; grid-template-areas: "logo aside" "nav social"; column-gap: 60px; padding-bottom: 10px; }
.logo { grid-area: logo; align-self: start; }
.logo img { display: block; width: 470px; height: auto; }
.header-aside { grid-area: aside; align-self: center; }
.news-box { display: flex; gap: 15px; align-items: flex-start; border: 1px solid #ccc; padding: 5px; }
.news-box img { width: 67px; height: 67px; flex: none; }
.news-text p { font-size: 12px; line-height: 16.8px; }
.site-nav { grid-area: nav; grid-column: 1 / 3; align-self: center; padding-right: 60px; }
.header-social { grid-area: social; grid-column: 2; justify-self: end; align-self: center; }
.site-nav > ul { list-style: none; margin: 0 0 0 -11px; padding: 7px 0 8px; display: flex; flex-wrap: wrap; }
.site-nav li { position: relative; }
.site-nav a { display: block; font: 700 14px/20px var(--f-body); color: #888; padding: 10.5px 14px; transition: background .2s, color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav .is-ancestor > a { background: #eee; color: #333; text-decoration: none; }
.site-nav a[aria-current="page"], .site-nav .is-ancestor > a { font-weight: 700; }
.site-nav .has-children > a { padding-right: 21px; }
.site-nav .has-children > a::after { content: ""; position: absolute; right: 7px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sub-menu { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 100%; width: 240px; background: #fff; border-top: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.1); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; z-index: 60; }
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.sub-menu a { font-weight: 700; padding: 10.5px 14px; }
.menu-toggle { display: none; }
.block-social { list-style: none; margin: 0; padding: 0; display: flex; }
.header-social .block-social { flex-direction: row; justify-content: flex-end; gap: 4px; }
.header-social .block-social a { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: #000; }
.header-social .block-social svg { width: 11px; height: 11px; }
.header-social .block-social a.social-linkedin { background: #007bb6; }
.header-social a:hover { opacity: .7; }

/* Breadcrumb: black chips on a black bar, under the header */
.breadcrumb { background: #fff; padding-bottom: 15px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0 0 4px; background: #000; display: flex; flex-wrap: wrap; align-items: center; min-height: 30px; }
.breadcrumb li { display: inline-flex; align-items: center; font-size: 14px; }
.breadcrumb a, .breadcrumb [aria-current] { display: inline-block; background: #000; color: #fff; padding: 5px 10px; margin: 0 5px; line-height: 14px; }
.breadcrumb [aria-current] { color: #aaa; }
.breadcrumb-sep { color: #aaa; }

/* ---------- Content rows (one grey section of Divi rows) ---------- */
main { padding: 0 0 30px; }
.breadcrumb + .section { margin-top: 30px; }
.section.row { padding: 0; }
.panel { background: var(--c-panel); }
.section.panel { background: transparent; padding: 0; }
.section.panel > .container { background: var(--c-panel); padding: 20px; }
.section.row.panel.pad-20-20-20-20 { padding: 0; }
.columns { display: flex; flex-wrap: wrap; gap: 0 5.5%; align-items: flex-start; }
.column { min-width: 0; }
.column--1 { flex: 0 0 100%; }
.column--1-2 { flex: 0 0 47.25%; }
.column--1-3 { flex: 0 0 31.3333%; }
.column--2-3 { flex: 0 0 64.8333%; }
.columns:has(> .column--2-3) { justify-content: space-between; column-gap: 0; }
.columns:has(> .column--2-3) > .column--1-3 { padding-right: 17px; }  /* the Videos captions are 309px wide on the live site */
/* The site's own book rows: a 20% left column and the rest, 30px apart */
.column--1-4 { flex: 0 0 20%; margin-right: 30px; }
.column--3-4 { flex: 1 1 0; }
.columns:has(> .column--1-4) { column-gap: 0; }
.white-col { background: #fff; padding: 15px 15px 0; align-self: stretch; }

/* Divider: a 1px line at the top of a 23px space, like Divi's */
.block-divider { border: 0; margin: 0; height: 23px; box-sizing: content-box; background: linear-gradient(#ddd, #ddd) top / 100% 1px no-repeat content-box; }

/* Blurbs (picture + heading + text), as in the original */
.blurb { display: block; }
.blurb--left { display: flex; gap: 0; align-items: flex-start; }
.blurb--left .blurb-image { flex: none; width: 150px; margin: 0 5px; }
.blurb--left .blurb-body { flex: 1; padding-left: 15px; min-width: 0; }
.blurb-image img { display: block; }
.blurb--top { text-align: center; }
.blurb--top .blurb-image { display: flex; justify-content: center; }
.custom-book-side img { border: 1px solid #3f51b5; width: 120px; }
.custom-book-side .blurb-image { margin-bottom: 30px; }
.custom-book-side .blurb-title { font-size: 12px; line-height: 18px; font-style: italic; padding-bottom: 0; }
.custom-book-post .blurb-image { width: 160px; margin: 0; }
.custom-book-post .blurb-image img { width: 100%; }
.custom-book-post.panel .blurb-image img { width: calc(100% - 10px); margin: 0 5px; }  /* home page: Divi's 5px image margins */
.custom-book-post .blurb-title { font-size: 26px; line-height: 1.3; }
.custom-book-post h3 a { color: #3f51b5; }
.custom-hero-img { margin: 25px; }
.custom-btn { display: inline-block; box-shadow: rgba(0,0,0,.26) 0 2px 5px 0; padding: .5em .75em; font-weight: 700; border-radius: 2px; transition: box-shadow .5s; margin-right: 6px; }
.custom-btn:hover { box-shadow: rgba(0,0,0,.26) 0 2px 11px 0; text-decoration: none; }
.gray-btn { color: #fff !important; background: #9e9e9e !important; }

/* Book pages: cover, details, "Purchase Book" */
.block-image.bordered img { border: 1px solid #3f51b5; }
.block-image img { display: block; width: 100%; }
.button { display: inline-block; font: 700 14px/23.8px var(--f-body); padding: 4.2px 14px; border-radius: 3px; border: 0; cursor: pointer; }
.button--dark { background: #000; color: #fff; box-shadow: rgba(0,0,0,.3) 0 2px 5px 0; }
.button--dark:hover { background: #333; text-decoration: none; }
.button--outline { font: 400 20px/34px var(--f-body); padding: 6px 20px; border: 2px solid #3f51b5; color: #3f51b5; background: transparent; }
.button--outline:hover { background: rgba(0,0,0,.05); border-color: transparent; text-decoration: none; }
.block-button { margin: 0; padding: 0; }

/* Videos (click to play) */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-icon { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(0,0,0,.35); transition: background .2s; }
.video-icon::after { content: ""; position: absolute; left: 38px; top: 28px; border: 20px solid transparent; border-left: 30px solid #fff; border-right: 0; }
.video-play:hover .video-icon { background: rgba(0,0,0,.6); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Section menus in the left column (Key Concepts, Essays) */
.side-menu { display: flow-root; }
.side-menu ul { list-style: none; margin: 0; padding: 0 15px 0 0; }
.side-menu li { padding: 0; margin-top: 8px; }
.side-menu a { display: block; color: rgba(0,0,0,.6); font-weight: 400; line-height: 14px; padding: 0 0 8px; }
.side-menu li:first-child a { color: #333; font-weight: 700; text-transform: uppercase; }
.side-menu a:hover { color: #333; text-decoration: none; }
.side-menu a[aria-current="page"] { color: #333; font-weight: 700; }

/* Photos: grid of thumbnails, numbered pages, larger view */
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 2.75%; }
.photo-grid li[hidden] { display: none; }
.photo-grid a { display: block; position: relative; }
.photo-grid a::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f51b5' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 32px no-repeat; opacity: 0; transition: opacity .3s; }
.photo-grid a:hover::after { opacity: 1; }
.photo-grid img { display: block; width: 100%; height: auto; }
.photo-pages { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 30px; border-top: 1px solid #e2e2e2; padding: 13px 10px 39px 0; }
.photo-pages[hidden] { display: none; }
.photo-pages button, .photo-nums button { font: 700 16px/20px var(--f-body); color: #999; background: none; border: 0; padding: 0; cursor: pointer; }
.photo-nums { display: flex; gap: 20px; }
.photo-pages button[aria-current] { color: #3f51b5; }
.photo-pages button[hidden] { display: none; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
.lightbox::backdrop { background: rgba(11,11,11,.85); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto; box-shadow: 0 0 8px rgba(0,0,0,.6); }
.lightbox figcaption { color: #f3f3f3; font-size: 12px; line-height: 18px; padding: 8px 0; }
.lightbox button { position: absolute; border: 0; background: none; cursor: pointer; color: #fff; opacity: .65; }
.lightbox button:hover { opacity: 1; }
.lightbox-close { top: -40px; right: -6px; width: 40px; height: 40px; font: 28px/40px var(--f-body); }
.lightbox-close::before { content: "×"; }
.lightbox-prev, .lightbox-next { top: 50%; width: 60px; height: 90px; margin-top: -45px; }
.lightbox-prev { left: -70px; } .lightbox-next { right: -70px; }
.lightbox-prev::before, .lightbox-next::before { content: ""; position: absolute; left: 22px; top: 33px; width: 20px; height: 20px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); }
.lightbox-next::before { left: 14px; transform: rotate(-135deg); }

/* Contact */
.contact-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.contact-social a { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: #000; }
.contact-social a.social-linkedin { background: #007bb6; }
.contact-social svg { width: 13px; height: 13px; }
.block-form.email-form { background: var(--c-panel); padding: 20px; }
.email-form .field { margin-bottom: 15px; }
.email-form label { display: block; font-size: 12px; font-weight: 700; line-height: 20px; color: #777771; }
.req { color: inherit; }
.email-form input, .email-form textarea { width: 100%; font: 400 16px/1.3 var(--f-body); color: #666; background: #fff; border: 0; border-radius: 0; padding: 10px; }
.email-form textarea { height: 140px; resize: vertical; display: block; }
.email-form input:focus, .email-form textarea:focus { outline: 2px solid #3f51b5; outline-offset: 0; }
.field-count { display: block; text-align: right; font-size: 12px; line-height: 18px; color: #777771; margin-top: 5px; }
.cf-turnstile { margin-bottom: 15px; }
.email-form .button { font: 700 14px/20px var(--f-body); text-transform: uppercase; color: #fff; background: #333; border-radius: 0; padding: 10px; min-width: 100px; box-shadow: none; }
.email-form .button:hover { background: #000; }
.form-status { margin-top: 1em; min-height: 1.6em; padding: 0; }
.form-status.is-error { color: #c0392b; }
.form-status.is-success { color: #097baa; font-weight: 700; }

/* ---------- Footer (black): menu and copyright on the left, address on the right ---------- */
.site-footer { background: #000; padding: 15px 0; }
.footer-columns { display: flex; gap: 5.5%; padding-bottom: 27px; }
.footer-main { flex: 0 0 73.625%; }
.footer-aside { flex: 1; }
.footer-links ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; }
.footer-links a { display: block; color: #fff; font-size: 14px; line-height: 14px; padding: 8px 22px 8px 0; }
.footer-links li:first-child a { padding-left: 0; }
.footer-copyright { color: #fff; font-size: 10px; line-height: 21px; padding: 0; }
.footer-aside p { color: #fff; line-height: 21px; }
.footer-aside img { display: inline-block; vertical-align: middle; }

/* ---------- Responsive (the site switches to the phone menu at 1100px, Divi stacks columns at 980px) ---------- */
@media (max-width: 1100px) {
  .header-inner { grid-template-columns: 1fr auto auto; grid-template-areas: "logo aside aside" "logo social toggle"; column-gap: 20px; align-items: center; padding-bottom: 0; }
  .site-header { border-bottom: 1px solid #eee; }
  .header-aside { display: none; }
  .header-social { grid-area: social; grid-column: auto; grid-row: 1 / 3; width: auto; }
  .menu-toggle { grid-area: toggle; grid-row: 1 / 3; display: block; background: none; border: 0; padding: 0; cursor: pointer; width: 32px; height: 32px; position: relative; }
  .menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { position: absolute; left: 4px; width: 24px; height: 2px; background: #333; content: ""; transition: transform .2s; }
  .menu-toggle-bars { top: 15px; }
  .menu-toggle-bars::before { left: 0; top: -7px; }
  .menu-toggle-bars::after { left: 0; top: 7px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
  /* Phone menu: a white list under the button, parent items shaded, sub-pages indented */
  .site-nav { display: none; position: absolute; right: 0; top: 100%; width: 250px; max-height: 80vh; overflow-y: auto; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.1); padding: 0; z-index: 100; }
  .site-nav.is-open { display: block; }
  .site-nav > ul { display: block; padding: 0; margin: 0; }
  .site-nav li { border-bottom: 1px solid rgba(0,0,0,.03); }
  .site-nav a { font-size: 12px; font-weight: 400; color: #666; padding: 10px 5%; }
  .site-nav .has-children > a { background: rgba(0,0,0,.03); font-weight: 700; }
  .site-nav .has-children > a::after { display: none; }
  .sub-menu { position: static; width: auto; visibility: visible; opacity: 1; border: 0; box-shadow: none; padding-left: 20px; }
}
@media (max-width: 980px) {
  .container { width: 90%; }
  .breadcrumb .container { width: 100%; }
  .breadcrumb { padding-bottom: 0; }
  .columns { row-gap: 30px; }
  .column--1-2, .column--1-3, .column--2-3, .column--1-4, .column--3-4 { flex: 0 0 100%; margin-right: 0; }
  .white-col { display: none; }   /* the book list beside the home page text is hidden on tablets and phones, as on the live site */
  .footer-columns { flex-direction: column; gap: 20px; }
  .footer-links ul { display: block; text-align: center; }
  .footer-links a { padding: 6px 0; }
  .footer-copyright, .footer-aside p { text-align: center; }
}
@media (max-width: 768px) {
  .header-social { display: none; }  /* no social buttons in the phone header */
  .custom-book-post.blurb--left { display: block; }
  .custom-book-post .blurb-image { width: 100%; max-width: 300px; margin: 0 auto 15px; }
  .custom-book-post .blurb-body { padding-left: 0; }
  .custom-hero-img { max-width: 50%; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .blurb--left:not(.custom-book-post) { display: block; text-align: center; }
  .blurb--left:not(.custom-book-post) .blurb-image { margin: 0 auto 15px; }
  .blurb--left:not(.custom-book-post) .blurb-body { padding-left: 0; }
}
@media (max-width: 480px) {
  .logo img { width: 245px; }
  .header-inner { column-gap: 10px; }
}

/* Embedded players that keep their shape (FitVids on the original) */
.embed-ratio { position: relative; height: 0; overflow: hidden; }
.embed-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }