/* Shared base for every theme (prepended to the theme CSS by prebuild.ts). Theme rules override it. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-wrap: break-word; }
img, picture, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }
.skip:focus { top: 8px; }

/* post / page body (the exporter's sanitised WordPress HTML) */
.entry-body { overflow-wrap: anywhere; }
.entry-body > *:first-child { margin-top: 0; }
.entry-body p, .entry-body li, .entry-body blockquote, .entry-body h1, .entry-body h2, .entry-body h3, .entry-body h4, .entry-body h5, .entry-body h6, .entry-body figcaption { unicode-bidi: plaintext; text-align: start; }
.entry-body .text-center { text-align: center; }
.entry-body h1 { font-size: 1.6em; } .entry-body h2 { font-size: 1.4em; } .entry-body h3 { font-size: 1.2em; }
.entry-body h4, .entry-body h5, .entry-body h6 { font-size: 1.05em; }
.entry-body img { height: auto; max-width: 100%; }
.entry-body figure { margin: 1.5em 0; max-width: 100%; }
.entry-body figcaption, .entry-body .wp-caption-text { font-size: .85em; opacity: .75; margin-top: .4em; }
.entry-body .aligncenter { display: block; margin-inline: auto; text-align: center; }
.entry-body .alignleft { float: left; margin: 0 1em .5em 0; max-width: 50%; }
.entry-body .alignright { float: right; margin: 0 0 .5em 1em; max-width: 50%; }
.entry-body .alignnone { margin-block: .5em; }
@media (max-width: 600px) { .entry-body .alignleft, .entry-body .alignright { float: none; margin: .5em auto; max-width: 100%; } }
.entry-body iframe, .entry-body video, .entry-body embed, .entry-body object { max-width: 100%; }
.entry-body .embed-responsive { position: relative; aspect-ratio: 16 / 9; }
.entry-body .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.entry-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry-body td, .entry-body th { border: 1px solid currentColor; padding: .3em .6em; }
.entry-body pre { overflow-x: auto; max-width: 100%; }
.entry-body hr { clear: both; }
.entry-body::after { content: ""; display: block; clear: both; }

/* pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-block: 28px; }
.pager ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pager li { display: flex; gap: 6px; align-items: center; }
.pager a, .pager .cur { display: inline-block; min-width: 2.4em; min-height: 2.4em; padding: .4em .6em; text-align: center; line-height: 1.5; }

/* comments (read-only) */
.comments { margin-top: 36px; }
.comment-list, .comment-list ol { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-inline-start: 18px; margin-top: 10px; }
.comment { margin-bottom: 10px; }
.comment header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.comment .c-body { overflow-wrap: anywhere; unicode-bidi: plaintext; }
.comment .c-body > *:first-child { margin-top: .3em; }
.comment .c-body > *:last-child { margin-bottom: 0; }
.comment time { font-size: .8em; opacity: .65; }

/* glossary */
.glossary-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 14px 22px; }
.glossary-letters a { min-width: 2.2em; padding: .2em .5em; text-align: center; }
.glossary-group h2 { margin-bottom: .3em; }
.glossary dl { margin: 0; }
.glossary dt { font-weight: 700; margin-top: .8em; }
.glossary dd { margin: .15em 0 0; }

/* search */
.search { display: flex; gap: 6px; align-items: stretch; }
.search input { min-width: 0; flex: 1 1 auto; font: inherit; padding: .4em .6em; }
.search button { font: inherit; cursor: pointer; padding: .4em .8em; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { margin-block: 1.2em; }
.search-results a { font-weight: 700; }
.search-results p { margin: .2em 0 0; }

/* 404 / maintenance / unavailable */
.status { text-align: center; padding: 12vh 20px; }
.status-code { font-size: clamp(64px, 18vw, 140px); line-height: 1; margin: 0; }

/* Theme J "Backdrop" (themaayan.com). Reproduces design/options.template.html "themaayan J", extended to all page types.
   The featured photo is the full-screen backdrop; the rail swaps it on hover/tap and advances every 5 s.
   Motion is off under prefers-reduced-motion. */
.tJ { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; font-family: "Assistant", sans-serif; background: #1a1416; }
.tJ a { color: inherit; }
.tJ img { display: block; }

/* backdrop layers: fixed so inner pages scroll over the photo */
.tJ .bds { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #1a1416; }
.tJ .bd { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.tJ .bd.on { opacity: 1; }
.tJ .bd img, .tJ .bd picture { width: 100%; height: 100%; object-fit: cover; }
.tJ .bd picture { display: block; }
.tJ .bd.on img { animation: drift 8s ease-out forwards; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.tJ .shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 35%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.82)); }
.tJ:not(.is-home) .shade { background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.35) 40%, rgba(0,0,0,.55)); }

.tJ .top { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; padding: 20px 28px; }
.tJ .top .brand { font: 700 30px "David Libre", serif; text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.tJ .top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font: 600 14px "Assistant"; }
.tJ .top nav a { text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.tJ .top nav a:hover { border-bottom-color: #fff; }
.tJ .top-search input { font: 400 14px "Assistant"; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 4px 10px; width: 10em; border-radius: 0; }
.tJ .top-search input::placeholder { color: rgba(255,255,255,.75); }
.tJ .top-search button { font: 700 13px "Assistant"; background: #fff; color: #1a1416; border: 0; padding: 4px 12px; border-radius: 0; }
.tJ a:focus-visible, .tJ button:focus-visible, .tJ input:focus-visible { outline: 2px solid #ffb3c8; outline-offset: 2px; }

/* home: title in the middle, thumbnail rail along the bottom */
.tJ.is-home { height: 100vh; height: 100svh; overflow: hidden; }
.tJ .stage { position: absolute; inset: 0; z-index: 2; }
.tJ main { position: relative; z-index: 2; }
.tJ.is-home main { position: static; }
.tJ .mid { position: absolute; z-index: 2; inset-inline: 0; top: 0; padding: 150px 28px 0; max-width: 640px; }
.tJ .mid small { font: 600 12px "Assistant"; letter-spacing: .18em; opacity: .85; }
.tJ .mid h2 { font: 700 clamp(36px, 5.5vw, 60px)/1.02 "David Libre", serif; margin: 10px 0 14px; text-shadow: 0 2px 20px rgba(0,0,0,.4); text-wrap: balance; }
.tJ .mid .go { display: inline-block; font: 700 14px "Assistant"; letter-spacing: .08em; background: #fff; color: #1a1416; padding: 10px 18px; text-decoration: none; }
.tJ .mid .go:hover { background: #ffb3c8; }
.tJ .rail { position: absolute; z-index: 2; inset: auto 0 18px 0; display: flex; gap: 8px; overflow-x: auto; padding: 0 28px; scrollbar-width: none; }
.tJ .rail::-webkit-scrollbar { display: none; }
.tJ .rail button { all: unset; box-sizing: border-box; flex: 0 0 auto; width: 96px; cursor: pointer; opacity: .6; transition: opacity .25s, transform .25s; color: #fff; }
.tJ .rail button picture { display: block; }
.tJ .rail button img { width: 96px; height: 64px; object-fit: cover; display: block; border: 2px solid transparent; }
.tJ .rail button span { display: block; font: 600 11px/1.3 "Assistant"; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tJ .rail button:hover, .tJ .rail button.on { opacity: 1; transform: translateY(-4px); }
.tJ .rail button.on img { border-color: #fff; }
.tJ .rail button:focus-visible img { border-color: #ffb3c8; }

/* post / page: white card over the darkened photo */
.tJ .post { position: relative; z-index: 2; max-width: 680px; margin: 30px auto 40px; background: rgba(255,255,255,.94); color: #2a2224; padding: 28px 30px; }
.tJ .post .date { font: 600 12px "Assistant"; color: #b98a52; letter-spacing: .1em; }
.tJ .post h1 { font: 700 42px/1.12 "David Libre", serif; margin: 0 0 10px; text-wrap: balance; }
.tJ .post .entry-body p, .tJ .post .entry-body li { font: 400 18px/1.8 "Assistant"; }
.tJ .post .entry-body a { color: #9c3b5e; }
.tJ .post .entry-body blockquote { margin-inline: 0; padding-inline-start: 16px; border-inline-start: 3px solid #b98a52; }
.tJ .terms { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font: 600 13px "Assistant"; }
.tJ .terms a { display: inline-block; border: 1px solid #b98a52; color: #7a5a30; padding: 2px 10px; text-decoration: none; }
.tJ .terms a:hover { background: #b98a52; color: #fff; }
.tJ .comments { border-top: 1px solid #e6d9cf; padding-top: 14px; margin-top: 28px; }
.tJ .comments h2 { font: 700 20px "David Libre", serif; margin: 0 0 12px; }
.tJ .comment > article { background: #faf5f1; border-inline-start: 3px solid #ffb3c8; padding: 10px 12px; }
.tJ .comment .c-author { font-weight: 700; color: #2a2224; }
.tJ .comment .c-body p { margin: .4em 0; font-size: 16px; line-height: 1.6; }
.tJ .comment .c-author[href] { color: #9c3b5e; }

/* archives, projects, glossary-less lists: thumbnails on the dark photo */
.tJ .archive, .tJ .search-page { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 14px 28px 40px; }
.tJ .archive-head { margin-bottom: 18px; }
.tJ .archive-kind { font: 600 12px "Assistant"; letter-spacing: .18em; opacity: .85; margin: 0; }
.tJ .archive-head h1, .tJ .search-page h1 { font: 700 clamp(34px, 5vw, 52px)/1.05 "David Libre", serif; margin: 6px 0 10px; text-shadow: 0 2px 20px rgba(0,0,0,.4); text-wrap: balance; }
.tJ .archive-head .entry-body { color: #fff; }
.tJ .empty { font: 600 15px "Assistant"; }
.tJ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.tJ .card { display: block; text-decoration: none; opacity: .92; transition: opacity .25s, transform .25s; }
.tJ .card:hover { opacity: 1; transform: translateY(-4px); }
.tJ .card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid transparent; }
.tJ .card:hover img, .tJ .card:focus-visible img { border-color: #fff; }
.tJ .card h4 { font: 700 17px/1.3 "David Libre", serif; margin: 8px 0 2px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.tJ .card .meta { font: 600 11px "Assistant"; letter-spacing: .08em; opacity: .85; }
.tJ .card.noimg { border: 1px solid rgba(255,255,255,.4); padding: 16px; min-height: 100px; }

.tJ .pager a, .tJ .pager .cur { border: 1px solid rgba(255,255,255,.55); text-decoration: none; font: 600 14px "Assistant"; }
.tJ .pager .cur { background: #fff; color: #1a1416; }
.tJ .pager a:hover { background: rgba(255,255,255,.2); }
.tJ .search-page { max-width: 680px; }
.tJ .search-big input { background: rgba(255,255,255,.94); color: #2a2224; border: 0; font-size: 16px; border-radius: 0; }
.tJ .search-big button { background: #fff; color: #1a1416; border: 0; font-weight: 700; border-radius: 0; }
.tJ .search-results a { font: 700 19px "David Libre", serif; }
.tJ mark { background: #ffb3c8; color: #1a1416; }
.tJ .ft { position: relative; z-index: 2; text-align: center; padding: 10px 28px 28px; font: 600 12px "Assistant"; letter-spacing: .08em; opacity: .85; }

.tJ .status { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.tJ .status-code { font: 700 clamp(72px, 22vw, 150px)/1 "David Libre", serif; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.tJ .status h1 { font: 700 34px/1.15 "David Libre", serif; margin: 10px 0 8px; }
.tJ .status-text { font: 400 18px/1.7 "Assistant"; }
.tJ .status-home { display: inline-block; font: 700 14px "Assistant"; letter-spacing: .08em; background: #fff; color: #1a1416; padding: 10px 18px; text-decoration: none; }

@media (max-width: 600px) {
  .tJ .top { padding: 14px 16px; }
  .tJ .top .brand { font-size: 26px; }
  .tJ .top-search { flex: 1 0 100%; }
  .tJ .top-search input { flex: 1; width: auto; }
  .tJ .mid { padding: 150px 16px 0; }
  .tJ.is-home .mid { padding-top: 120px; }
  .tJ .rail { padding: 0 16px; }
  .tJ .post { margin: 14px 12px 30px; padding: 20px 16px; }
  .tJ .post h1 { font-size: 32px; }
  .tJ .archive, .tJ .search-page { padding-inline: 16px; }
  .tJ .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tJ .bd { transition: none; }
  .tJ .bd.on img { animation: none; }
  .tJ .rail button, .tJ .card { transition: none; }
}