/* Liz BlackX: layout and components. All colours, fonts and shapes come from tokens.css.
   Sections: base · shell · 18+ banner · header · footer · buttons & chips · cards · bubbles ·
   reading card · post content (WordPress HTML) · lists & pagination · forms · embeds */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--plum);
  font-family: var(--body);
  font-size: var(--text-size);
  line-height: 1.55;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; }
a { color: inherit; }
img, video { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.screen-reader-text, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--sun); color: var(--on-sun); font-family: var(--display); font-weight: 600;
  padding: 8px 18px; border: var(--border) solid var(--plum); border-radius: var(--radius-pill);
}
.skip-link:focus { top: 10px; }

/* ---------- shell ---------- */
.shell {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  position: relative;
}
main { display: block; padding-bottom: 20px; }
.section { padding-top: 40px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.section-head h1, .section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.section-head a { font-family: var(--display); font-weight: 600; color: var(--link); }
.lede { font-size: 1.05rem; color: var(--mut); max-width: 62ch; margin: 0 0 16px; }

/* ---------- 18+ banner ---------- */
.age {
  display: flex; justify-content: center; align-items: center; gap: 6px 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 6px 16px;
  background: var(--plum); color: var(--page);
  border-radius: var(--radius-pill);
  font-size: .84rem; font-weight: 700; text-align: center;
}
.age button {
  font: inherit; font-weight: 800; cursor: pointer;
  background: var(--sun); color: var(--on-sun);
  border: 0; border-radius: var(--radius-pill); padding: 3px 14px;
}
html[data-age="ok"] .age { display: none; }

/* ---------- header ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px 20px; flex-wrap: wrap; margin-top: 18px;
}
.logo {
  font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1;
  text-decoration: none; color: var(--plum);
}
.logo b, .wordmark b { color: var(--pink); }
.nav-toggle {
  display: none;
  font-family: var(--display); font-weight: 600; font-size: 1rem; cursor: pointer;
  background: var(--card); color: var(--card-fg);
  border: var(--border) solid var(--plum); border-radius: var(--radius-pill);
  padding: 6px 18px; box-shadow: var(--shadow-small);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 7px; flex-wrap: wrap; }
.site-nav a {
  display: inline-block;
  font-family: var(--display); font-weight: 500; font-size: .95rem; text-decoration: none;
  background: var(--card); color: var(--card-fg);
  border: 2.5px solid var(--plum); border-radius: var(--radius-pill); padding: 5px 15px;
}
.site-nav a:hover, .site-nav a[aria-current] { background: var(--pink); color: var(--on-pink); }
@media (max-width: 820px) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { display: none; flex-basis: 100%; }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a { display: block; }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 50px; padding: 26px 0 30px;
  border-top: var(--border) solid var(--plum);
  font-size: .92rem;
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr; gap: 20px; }
.footer-cols h2 { font-size: 1.15rem; margin-bottom: 8px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-cols a { color: var(--plum); }
.footer-cols a:hover { color: var(--link); }
.footer-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.footer-badges img { width: 90px; height: auto; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  margin-top: 20px; font-size: .84rem; color: var(--mut);
}
@media (max-width: 820px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .footer-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.3;
  text-decoration: none; text-align: center;
  background: var(--pink); color: var(--on-pink);
  border: var(--border) solid var(--plum); border-radius: var(--radius-pill);
  padding: 9px 22px; box-shadow: var(--shadow-small);
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--plum); }
.btn-white { background: var(--card); color: var(--card-fg); }
.btn-sun { background: var(--sun); color: var(--on-sun); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }

.label {
  display: inline-block; align-self: flex-start;
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--plum); color: var(--page);
  border-radius: var(--radius-pill); padding: 2px 12px;
}
.label-pink { background: var(--pink); color: var(--on-pink); }
.label-sun { background: var(--sun); color: var(--on-sun); }
.label-bubble { background: var(--bubble); color: var(--on-bubble); }
.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--link);
}
.chips { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: .88rem; text-decoration: none;
  background: var(--card); color: var(--card-fg);
  border: 2.5px solid var(--plum); border-radius: var(--radius-pill); padding: 1px 13px;
}
a.chip:hover { background: var(--plum); color: var(--page); }
.chip-warn { background: var(--sun); color: var(--on-sun); }
.sticker {
  position: absolute; top: -20px; right: 18px; transform: rotate(6deg);
  background: var(--sun); color: var(--on-sun);
  border: var(--border) solid var(--plum); border-radius: var(--radius-pill);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; padding: 4px 16px;
}

/* ---------- cards ---------- */
.panel {
  position: relative;
  background: var(--card); color: var(--card-fg);
  border: var(--border-thick) solid var(--plum); border-radius: var(--radius-panel);
  box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px);
}
.card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--card); color: var(--card-fg);
  border: var(--border) solid var(--plum); border-radius: var(--radius-card);
  padding: 20px;
}
.card-shadow { box-shadow: 0 6px 0 var(--plum); }
.card h2, .card h3 { font-size: 1.3rem; }
.card p { margin: 0; font-size: .95rem; }
.card .more { font-family: var(--display); font-weight: 600; color: var(--link); margin-top: auto; padding-top: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- bubbles (decoration, aria-hidden) ---------- */
.bub {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: var(--border) solid var(--plum); background: var(--bubble-fill);
}
@media (prefers-reduced-motion: no-preference) {
  .bub { animation: bob 7s ease-in-out infinite alternate; }
  .bub:nth-child(2n) { animation-duration: 9s; }
  .btn, .chip { transition: transform .1s, box-shadow .1s, background-color .15s; }
  @keyframes bob { to { transform: translateY(-12px); } }
}

/* ---------- reading card (stories, posts, pages) ---------- */
.read {
  background: var(--read-bg); color: var(--read-fg);
  border: var(--border-thick) solid var(--plum); border-radius: var(--radius-panel);
  padding: clamp(22px, 5vw, 60px) clamp(18px, 6vw, 80px);
  margin-top: 26px;
  font-size: var(--read-size);
}
.read .col { max-width: var(--read-measure); margin: 0 auto; }
.read .col-wide { max-width: none; }
.crumbs { font-family: var(--display); font-size: .84rem; font-weight: 600; color: var(--read-mut); }
.crumbs a { color: inherit; }
.read h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 8px 0 10px; color: var(--read-fg); }
.read .meta {
  font-size: .88em; color: var(--read-mut);
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2.5px dotted var(--read-line);
}
.read .meta a { color: inherit; }
.read .labels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.read .box {
  margin-top: 28px; padding: 16px 20px;
  background: var(--soft); color: var(--card-fg); border-radius: 24px; font-size: .9em;
}
.read .box b, .read .box strong { font-family: var(--display); }

/* ---------- post content (WordPress HTML) ---------- */
.entry { line-height: 1.8; overflow-wrap: anywhere; }
.entry p, .entry ul, .entry ol, .entry blockquote, .entry figure, .entry table, .entry pre { margin: 0 0 1.15em; }
.entry h2, .entry h3, .entry h4 { color: var(--read-fg); margin: 1.3em 0 .5em; }
.entry h2 { font-size: 1.5em; }
.entry h3 { font-size: 1.25em; }
.entry h4 { font-size: 1.1em; }
.entry a { color: var(--link); }
.entry .drop > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 700; font-size: 3.3em; float: left;
  line-height: .85; padding: .08em .1em 0 0; color: var(--pink);
}
.entry blockquote { border-left: 5px solid var(--bubble); padding: .2em 0 .2em 1em; font-style: italic; }
.entry hr, .entry .wp-block-separator { border: 0; border-top: 2.5px dotted var(--read-line); margin: 2em auto; }
.entry img { border-radius: 14px; }
.entry .alignleft { float: left; margin: .3em 1.2em .8em 0; }
.entry .alignright { float: right; margin: .3em 0 .8em 1.2em; }
.entry .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.entry figure.alignleft, .entry figure.alignright { max-width: 50%; }
.entry .wp-caption, .entry figure { max-width: 100%; }
.entry figure img { max-width: 100%; height: auto; }
.entry figcaption, .entry .wp-caption-text, .entry .wp-element-caption { font-size: .82em; color: var(--read-mut); text-align: center; margin-top: .3em; }
.entry table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.entry td, .entry th { border: 1px solid var(--read-line); padding: .4em .6em; }
.entry iframe { max-width: 100%; }
.entry::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
  .entry .alignleft, .entry .alignright, .entry figure.alignleft, .entry figure.alignright {
    float: none; margin: 0 auto 1em; max-width: 100%;
  }
  .entry figure.alignleft, .entry figure.alignright { display: block; } /* WordPress uses display: table, which can't shrink */
}
.share { margin-top: 28px; display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; font-family: var(--display); font-weight: 600; font-size: .9rem; }
.share a {
  text-decoration: none; color: var(--card-fg); background: var(--soft);
  border: 2px solid var(--read-line); border-radius: var(--radius-pill); padding: 2px 12px;
}
.share a:hover { border-color: var(--plum); }
.related { margin-top: 34px; }
.related h2 { font-size: 1.3em; margin-bottom: 12px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related a { display: block; text-decoration: none; color: var(--read-fg); font-family: var(--display); font-weight: 600; font-size: .9em; line-height: 1.25; }
.related img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 6px; }
@media (max-width: 600px) { .related ul { grid-template-columns: minmax(0, 1fr); } .related img { width: 80px; float: left; margin-right: 10px; } .related li::after { content: ""; display: table; clear: both; } }
.post-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; font-family: var(--display); font-weight: 600; }
.post-nav a { color: var(--link); max-width: 48%; }
.comments-area { margin-top: 26px; }

/* ---------- lists & pagination ---------- */
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card { padding: 0; overflow: hidden; }
.post-card .thumb { display: block; background: var(--soft); border-bottom: var(--border) solid var(--plum); }
.post-card .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card .body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.post-card h2 { font-size: 1.2rem; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--link); }
.post-card .by { font-size: .82rem; opacity: .8; margin-top: auto; padding-top: 6px; }
@media (max-width: 900px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-list { grid-template-columns: minmax(0, 1fr); } }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 30px; font-family: var(--display); font-weight: 600; }
.pagination a, .pagination span {
  min-width: 42px; text-align: center; text-decoration: none;
  background: var(--card); color: var(--card-fg);
  border: 2.5px solid var(--plum); border-radius: var(--radius-pill); padding: 4px 12px;
}
.pagination [aria-current] { background: var(--pink); color: var(--on-pink); }
.pagination .dots { background: none; border-color: transparent; color: var(--plum); }

/* ---------- forms ---------- */
.field {
  flex: 1 1 180px; min-width: 0; font: inherit;
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: var(--border) solid var(--plum); background: var(--input-bg); color: var(--input-fg);
}
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form .btn { border-width: var(--border); }
#search-results { min-height: 300px; }
.pagefind-ui { --pagefind-ui-font: var(--body); --pagefind-ui-primary: var(--link); --pagefind-ui-text: var(--read-fg); --pagefind-ui-background: var(--read-bg); --pagefind-ui-border: var(--plum); --pagefind-ui-tag: var(--soft); }

/* ---------- click-to-load embeds (videos, widgets from other sites) ---------- */
.embed-consent {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
  width: 100%; min-height: 200px; margin: 0 auto 1em; padding: 1em; overflow: hidden;
  border-radius: var(--radius-small); background: var(--plum); color: var(--page); text-align: center;
}
.wp-has-aspect-ratio .embed-consent { position: absolute; inset: 0; min-height: 0; max-width: none !important; margin: 0; }
.embed-consent-thumb { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; opacity: .55; margin: 0 !important; border-radius: 0 !important; }
.embed-consent-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7em; max-width: 90%; padding: .5em; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.embed-consent-icon { position: relative; width: 68px; height: 48px; border-radius: 16px; background: var(--pink); border: var(--border) solid var(--page); }
.embed-consent-icon::after { content: ""; position: absolute; top: 11px; left: 24px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--on-pink); }
.embed-consent-button:hover .embed-consent-icon, .embed-consent-button:focus-visible .embed-consent-icon { background: var(--sun); }
.embed-consent-label { font-family: var(--display); font-weight: 600; font-size: 1.05em; line-height: 1.4; }
.embed-consent-note { position: relative; margin: 0 !important; font-size: .8em; line-height: 1.4; }
.embed-consent-note a, .embed-consent-note a:hover { color: inherit; text-decoration: underline; }
.embed-consent-amazon, .embed-consent-shareasale { min-height: 140px; }

/* ---------- old MyBookTable pages (until the book pages are rebuilt) ---------- */
.snapshot .entry-meta, .snapshot #breadcrumbs-container, .snapshot .mbt-breadcrumbs { display: none; }
#mbt-container, #mbt-container * { font-family: inherit !important; }
#mbt-container h1, #mbt-container h2, #mbt-container h3, #mbt-container .mbt-book-title { font-family: var(--display) !important; color: var(--read-fg); }

/* ---------- books ---------- */
.cover { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: var(--border-thick) solid var(--plum); border-radius: var(--radius-small); box-shadow: 0 7px 0 var(--plum); }
.cover-placeholder {
  display: flex; flex-direction: column; justify-content: space-between; text-align: center;
  padding: 12px 10px 14px; color: var(--on-sun); min-width: 0;
}
.cover-placeholder small { align-self: center; font-family: var(--display); font-weight: 600; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; background: var(--plum); color: var(--page); border-radius: var(--radius-pill); padding: 2px 8px; }
.cover-placeholder b { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.05; }
.cover-placeholder em { font-style: normal; font-family: var(--display); font-size: .72rem; font-weight: 500; }
.cover-1 { background: var(--cover-1); }
.cover-2 { background: var(--cover-2); }
.cover-3 { background: var(--cover-3); }
.cover-small { border-width: 2.5px; border-radius: 12px; box-shadow: none; }
.cover-small.cover-placeholder { padding: 6px; }
.cover-small.cover-placeholder small, .cover-small.cover-placeholder em { display: none; }
.cover-small.cover-placeholder b { font-size: .7rem; }
.sale { display: inline-block; font-family: var(--display); font-weight: 600; font-size: .78rem; background: var(--sun); color: var(--on-sun); border: 2px solid var(--plum); border-radius: var(--radius-pill); padding: 1px 11px; }

.shelf { margin-top: 30px; }
.shelf .section-head { margin-bottom: 4px; justify-content: flex-start; align-items: center; }
.shelf .section-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.shelf-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; margin-top: 14px; }
.shelf-book { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--plum); min-width: 0; }
.shelf-book .shelf-title { font-family: var(--display); font-weight: 600; line-height: 1.2; }
.shelf-book:hover .shelf-title { color: var(--link); }
.shelf-book .label { align-self: flex-start; }
.card-soon { border-style: dashed; box-shadow: none; }
.older-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.old-book { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; text-decoration: none; border-radius: 24px; flex-direction: row; }
.old-book .old-title { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; margin: 3px 0 4px; }
.old-book:hover .old-title { color: var(--link); }
.old-book .eyebrow { font-size: .68rem; }
@media (max-width: 700px) { .older-list { grid-template-columns: minmax(0, 1fr); } }

.book-head { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; margin-top: 14px; }
.book-head h1 { margin-top: 4px; }
.book-info { display: flex; flex-direction: column; gap: 12px; }
.book-hook { font-size: 1.1em; margin: 0; }
.book-gone { font-weight: 700; margin: 0; }
.book-gone a { color: var(--link); }
.book-about { margin-top: 36px; padding-top: 20px; border-top: 2.5px dotted var(--read-line); max-width: var(--read-measure); }
.book-about h2 { margin-top: 0; }
.book-series { margin-top: 30px; }
.book-series h2 { font-size: 1.25em; margin-bottom: 10px; }
@media (max-width: 640px) { .book-head { grid-template-columns: minmax(0, 1fr); } .book-cover { max-width: 220px; } }

/* ---------- homepage ---------- */
.hero { position: relative; padding: 30px 0 10px; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: clamp(3.6rem, 15vw, 9.6rem); line-height: .9;
  letter-spacing: -.015em; color: var(--plum); text-shadow: 5px 5px 0 var(--pink); margin: 0;
}
.wordmark b { color: var(--mega-accent); text-shadow: 5px 5px 0 var(--mega-accent-shadow); }
.tagline { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.6vw, 1.6rem); margin: 10px 0 0; max-width: 32ch; }
.now { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; margin-top: 36px; align-items: center; position: relative; }
.now h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 6px 0 10px; }
.now .panel p { margin: 0; font-size: 1.04rem; max-width: 44ch; }
.meters { display: grid; gap: 8px; margin: 16px 0; }
.meters div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.meters dt { font-family: var(--display); font-weight: 600; font-size: .82rem; }
.meters dd { margin: 0; }
.meter { display: block; height: 16px; border-radius: var(--radius-pill); border: 2.5px solid var(--plum); background: var(--soft); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--meter); }
.order { margin-top: 14px !important; font-family: var(--display); font-weight: 600; font-size: .88rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.order a { border: 2.5px solid var(--plum); border-radius: var(--radius-pill); padding: 1px 12px; text-decoration: none; background: var(--soft); color: var(--card-fg); }
.order a:hover { background: var(--plum); color: var(--page); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.trio a { display: block; text-decoration: none; min-width: 0; }
.trio-1 { transform: rotate(-3deg); }
.trio-2 { transform: translateY(-14px); }
.trio-3 { transform: rotate(3deg); }
@media (prefers-reduced-motion: no-preference) { .trio a { transition: transform .15s; } .trio a:hover { transform: translateY(-6px) rotate(0); } }

.menu-item { gap: 6px; }
.menu-item h3 { font-size: 1.5rem; }
.menu-item .label { margin-top: 4px; }
.card .more, .menu-item .more { font-family: var(--display); font-weight: 600; color: var(--link); margin-top: auto; padding-top: 8px; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--link); }
.card .by { font-size: .82rem; opacity: .85; margin-top: auto; padding-top: 8px; }
.card .by a { color: var(--link); }

.dessert {
  margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: center;
  background: var(--dessert); color: var(--on-pink);
  border: var(--border-thick) solid var(--plum); border-radius: var(--radius-panel); padding: clamp(18px, 3vw, 30px); box-shadow: var(--shadow);
}
.dessert h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 8px 0 6px; }
.dessert p { margin: 0; }
.dessert .fine { font-size: .82rem; margin-top: 8px; }
.dessert-side { display: grid; gap: 12px; justify-items: start; }
.dessert .chip { background: var(--chip-fill); color: var(--on-pink); font-size: .8rem; }
.note { font-size: .88rem; color: var(--mut); margin: 16px 0 0; }

.mail {
  background: var(--sun); color: var(--on-sun);
  border: var(--border-thick) solid var(--plum); border-radius: var(--radius-panel); padding: clamp(18px, 3vw, 30px);
  margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; box-shadow: var(--shadow);
}
.mail h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.mail p { margin: 6px 0 0; }
.mail .fine { font-size: .8rem; margin-top: 8px; }
.mail a { color: var(--on-sun); }
.mail .btn { border-color: var(--plum); }

.partners { margin-top: 18px; background: var(--bubble); color: var(--on-bubble); }
.partners .chips { margin-top: 6px; }
.partners .pill {
  display: inline-block; text-decoration: none; color: var(--on-sun); font-weight: 800; font-size: .88rem; /* on --chip-fill (light in both themes) */
  border: 2.5px dashed var(--plum); border-radius: var(--radius-pill); padding: 2px 12px; background: var(--chip-fill);
}
.partners .pill small { font-weight: 600; opacity: .8; }
.partners .pill:hover { border-style: solid; }
.partners .more { color: var(--on-bubble-link); font-weight: 800; padding-top: 0; }

.arcstrip { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.arcstrip .section-head { margin-bottom: 8px; }
.rnd {
  background: var(--sun); color: var(--on-sun);
  border: var(--border-thick) solid var(--plum); border-radius: var(--radius-card); padding: 20px; box-shadow: 0 7px 0 var(--plum);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; transform: rotate(1deg);
}
.rnd h3 { font-size: 1.35rem; margin: 4px 0; }
.rnd h3 a { text-decoration: none; }
.rnd h3 a:hover { text-decoration: underline; }
.rnd p { font-size: .94rem; margin: 0 0 4px; }
.rnd-meta { font-size: .8rem; font-weight: 800; }

@media (max-width: 820px) {
  .now, .mail, .dessert, .arcstrip { grid-template-columns: minmax(0, 1fr); }
  .trio { max-width: 420px; }
  .rnd { transform: none; }
}
.draft-note { margin: 0 0 22px; background: var(--sun); color: var(--on-sun); }
@media (max-width: 600px) { .hero .bub { display: none; } }

/* ---------- reading extras ---------- */
.rtools { display: flex; justify-content: flex-end; gap: 6px; align-items: center; margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: .84rem; }
.rtools button { font: inherit; font-weight: 700; cursor: pointer; width: 40px; height: 32px; border: 2.5px solid var(--plum); background: var(--card); color: var(--card-fg); border-radius: var(--radius-pill); }
.rtools button:hover { background: var(--plum); color: var(--page); }
.rtools + .read { margin-top: 8px; }
.warnings { margin: -6px 0 20px; }
.warnings .chip { font-size: .78rem; }
.dated-note { margin: 0 0 22px; background: var(--sun); color: var(--on-sun); }
.dated-note a { color: var(--on-sun); }
.box a { color: var(--link); }
.dated-note a { color: var(--on-sun); }
.box p { margin: 6px 0 0; }
.author-box { border: 2.5px dashed var(--read-line); }

/* ---------- free stories ---------- */
.filters { display: grid; gap: 12px; margin: 6px 0 22px; padding: 16px 18px; background: var(--card); color: var(--card-fg); border: var(--border) solid var(--plum); border-radius: var(--radius-card); }
.filter-group { display: grid; gap: 6px; }
.filters button.chip { cursor: pointer; font: inherit; font-family: var(--display); font-weight: 600; font-size: .86rem; }
.filters button.chip small { opacity: .7; }
.filters button.chip[aria-pressed="true"] { background: var(--pink); color: var(--on-pink); }
.filters button.chip-warn[aria-pressed="true"] { background: var(--plum); color: var(--page); text-decoration: line-through; }
.filter-count { margin: 0; font-size: .85rem; color: var(--mut); }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-card h2 { font-size: 1.25rem; }
.story-card h2 a { text-decoration: none; }
.story-card h2 a:hover { color: var(--link); }
.story-card .chips { gap: 4px 6px; }
.story-card .chip { font-size: .74rem; padding: 0 10px; }
.story-labels { display: flex; gap: 6px; flex-wrap: wrap; min-height: 1px; }
.story-card[hidden] { display: none; }
.filter-empty { margin-top: 20px; }
@media (max-width: 700px) { .story-list { grid-template-columns: minmax(0, 1fr); } }
.post-card .labels { display: flex; gap: 6px; flex-wrap: wrap; }
.journal-cats { margin-bottom: 22px; }
.section > .dated-note { margin-bottom: 22px; }

/* ---------- archive ---------- */
.year-chips { margin-bottom: 16px; }
.year-chips small { opacity: .7; }
.year { margin-top: 12px; padding: 14px 20px; scroll-margin-top: 20px; }
.year summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; list-style: none; }
.year summary::-webkit-details-marker { display: none; }
.year summary::before { content: "+"; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--link); width: 1ch; }
.year[open] summary::before { content: "−"; }
.year summary h3 { font-size: 1.4rem; }
.year summary span { color: var(--mut); font-size: .9rem; }
.year-list { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.year-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.year-list time { font-size: .8rem; color: var(--mut); min-width: 3.6em; }
.year-list a { color: var(--card-fg); }
.year-list a:hover { color: var(--link); }
.year-list .label { font-size: .62rem; padding: 1px 8px; }
/* old "Slide Anything" carousels, shown as a plain row (see _plugins/content_cleanup.rb) */
.entry .owl-carousel.slides { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 1.15em; }
.entry .owl-carousel.slides > div { flex: 0 1 180px; padding: 0 !important; margin: 0 !important; }
.entry .owl-carousel.slides img { width: 100%; height: auto; }