:root {
  /* The colours of the book. These are the dark book, exactly as it has always
     looked. A light book (the "Colours" setting in Customise this grid) is the
     same variables with other values, set on .twd-sb-theme-light further down,
     so no rule below needs to know which book it is in. "gold" is the accent
     and "cream" is the writing, whatever their actual colour in a light book. */
  --twd-sb-gold: #ffd166;
  --twd-sb-gold-soft: rgba(255, 209, 102, 0.55);
  --twd-sb-gold-faint: rgba(255, 209, 102, 0.24);
  --twd-sb-cream: rgba(255, 248, 236, 0.92);
  --twd-sb-cream-muted: rgba(255, 248, 236, 0.62);
  --twd-sb-veil: rgba(10, 9, 18, 0.72);
  --twd-sb-frame-bg:
    radial-gradient(ellipse at 50% 0%, rgba(255, 209, 102, 0.06) 0%, rgba(255, 209, 102, 0) 42%),
    linear-gradient(180deg, #1b1836 0%, #100e20 60%, #0a0912 100%);
  --twd-sb-frame-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.14),
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 40px rgba(255, 209, 102, 0.03);
  --twd-sb-card-bg:
    radial-gradient(ellipse at 50% 0%, rgba(255, 209, 102, 0.05) 0%, rgba(255, 209, 102, 0) 40%),
    rgba(19, 17, 36, 0.55);
  /* The 7px/13px offset shadows either side read as thinner, dimmer pages
     sitting behind the front one, the way a real bound book's block shows
     past its cover -- the same idea as TRD's own reader card. */
  --twd-sb-card-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.18),
    7px 0 0 -3px rgba(255, 209, 102, 0.08),
    -7px 0 0 -3px rgba(255, 209, 102, 0.08),
    13px 0 0 -6px rgba(255, 209, 102, 0.05),
    -13px 0 0 -6px rgba(255, 209, 102, 0.05),
    0 22px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 30px rgba(255, 209, 102, 0.03);
  --twd-sb-glow: 0 0 22px rgba(255, 209, 102, 0.2);
  --twd-sb-mast-glow: 0 0 16px rgba(255, 209, 102, 0.18);
  --twd-sb-img-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  --twd-sb-photo-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --twd-sb-chip: rgba(255, 209, 102, 0.08);
  --twd-sb-chip-hover: rgba(255, 209, 102, 0.18);
  --twd-sb-chip-soft: rgba(255, 209, 102, 0.06);
  --twd-sb-btn-rest: rgba(255, 209, 102, 0.14);
  --twd-sb-btn-hover: rgba(255, 209, 102, 0.28);
  --twd-sb-primary: #ffd166;
  --twd-sb-primary-hover: #ffdb85;
  --twd-sb-primary-ink: #171432;
  --twd-sb-primary-shadow: 0 4px 16px rgba(255, 209, 102, 0.25);
  --twd-sb-primary-shadow-hover: 0 6px 20px rgba(255, 209, 102, 0.35);
  --twd-sb-read: rgba(255, 255, 255, 0.55);
  --twd-sb-read-line: rgba(255, 255, 255, 0.25);
  --twd-sb-read-hover: rgba(255, 255, 255, 0.85);
  --twd-sb-amber: rgba(255, 199, 138, 0.95);
  --twd-sb-amber-line: rgba(255, 176, 84, 0.35);
  --twd-sb-close-bg: #ffd166;
  --twd-sb-close-hover: #ffdb85;
  --twd-sb-close-ink: #171432;
  --twd-sb-close-ring: rgba(255, 255, 255, 0.5);
  --twd-sb-close-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  --twd-sb-export-bg: #16132f;
}

/* The light book: the same pages in warm ivory with dark ink, the gold deepened
   to an amber that reads on a light page, and softer, warmer shading. */
.twd-sb-theme-light {
  --twd-sb-gold: #8a5a00;
  --twd-sb-gold-soft: rgba(138, 90, 0, 0.94);
  --twd-sb-gold-faint: rgba(138, 90, 0, 0.26);
  --twd-sb-cream: #2b2540;
  --twd-sb-cream-muted: rgba(43, 37, 64, 0.68);
  --twd-sb-veil: rgba(243, 236, 221, 0.8);
  --twd-sb-frame-bg:
    radial-gradient(ellipse at 50% 0%, rgba(214, 158, 46, 0.18) 0%, rgba(214, 158, 46, 0) 46%),
    linear-gradient(180deg, #fffdf8 0%, #f8f1e3 58%, #efe5d1 100%);
  --twd-sb-frame-shadow:
    0 0 0 1px rgba(138, 90, 0, 0.18),
    0 30px 70px rgba(70, 50, 20, 0.32),
    inset 0 0 44px rgba(214, 158, 46, 0.1);
  --twd-sb-card-bg:
    radial-gradient(ellipse at 50% 0%, rgba(214, 158, 46, 0.13) 0%, rgba(214, 158, 46, 0) 44%),
    rgba(255, 255, 255, 0.74);
  --twd-sb-card-shadow:
    0 0 0 1px rgba(138, 90, 0, 0.2),
    7px 0 0 -3px rgba(138, 90, 0, 0.09),
    -7px 0 0 -3px rgba(138, 90, 0, 0.09),
    13px 0 0 -6px rgba(138, 90, 0, 0.055),
    -13px 0 0 -6px rgba(138, 90, 0, 0.055),
    0 22px 46px rgba(70, 50, 20, 0.22),
    inset 0 0 30px rgba(214, 158, 46, 0.08);
  --twd-sb-glow: none;
  --twd-sb-mast-glow: none;
  --twd-sb-img-shadow: 0 8px 22px rgba(60, 44, 20, 0.22);
  --twd-sb-photo-shadow: 0 10px 24px rgba(60, 44, 20, 0.28);
  --twd-sb-chip: rgba(138, 90, 0, 0.07);
  --twd-sb-chip-hover: rgba(138, 90, 0, 0.1);
  --twd-sb-chip-soft: rgba(138, 90, 0, 0.07);
  --twd-sb-btn-rest: rgba(138, 90, 0, 0.12);
  --twd-sb-btn-hover: rgba(138, 90, 0, 0.24);
  --twd-sb-primary: #8a5a00;
  --twd-sb-primary-hover: #744a00;
  --twd-sb-primary-ink: #fffaf0;
  --twd-sb-primary-shadow: 0 4px 14px rgba(138, 90, 0, 0.3);
  --twd-sb-primary-shadow-hover: 0 6px 18px rgba(138, 90, 0, 0.38);
  --twd-sb-read: rgba(43, 37, 64, 0.76);
  --twd-sb-read-line: rgba(43, 37, 64, 0.3);
  --twd-sb-read-hover: rgba(43, 37, 64, 0.95);
  --twd-sb-amber: #9b4a0b;
  --twd-sb-amber-line: rgba(155, 74, 11, 0.4);
  --twd-sb-close-bg: #2b2540;
  --twd-sb-close-hover: #3a3258;
  --twd-sb-close-ink: #fffaf0;
  --twd-sb-close-ring: rgba(255, 255, 255, 0.85);
  --twd-sb-close-shadow: 0 4px 14px rgba(60, 44, 20, 0.35);
  --twd-sb-export-bg: #fcf8ee;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.twd-sb-page {
  overflow: hidden;
}

/* Standalone full page only -- the overlay reuses the page it opened over,
   so it never gets this full-viewport gradient of its own. */
.twd-sb-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 209, 102, 0.05) 0%, rgba(255, 209, 102, 0) 46%),
    linear-gradient(180deg, #171432 0%, #0f0d1f 52%, #0a0912 100%);
}

/* Everything below carries !important. The standalone page never needed
   it (its own bare document, nothing else's CSS loaded), but the overlay
   mode (v1.17.0+) appends this markup straight into the live theme page's
   DOM, so it inherits that page's cascade -- an Elementor site's own
   global button/link styles (border colour, background, font) were
   winning over plain unguarded rules here, leaving Close/prev/next/Share
   looking like bare unstyled Elementor buttons instead of this book's own
   design. Matches the defensive pattern already used throughout
   publisher.css and articles-grid.css for the same reason. */

.twd-sb-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 26px 18px !important;
  background: var(--twd-sb-veil) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  animation: twd-sb-backdrop-in 0.35s ease both !important;
}

@keyframes twd-sb-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.twd-sb-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  height: min(88vh, 780px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 18px 20px !important;
  border: 1px solid var(--twd-sb-gold-faint) !important;
  border-radius: 22px !important;
  background: var(--twd-sb-frame-bg) !important;
  box-shadow: var(--twd-sb-frame-shadow) !important;
  animation: twd-sb-frame-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}

@keyframes twd-sb-frame-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* A solid, clearly visible button on the corner of the frame, well above the
   pages in the stacking order (the active page is z-index 2, and at the same
   level it used to paint over the button, which is why only the part that
   stuck out reacted to the mouse). Always on, not just on hover. It sits in
   the card's top padding, so it covers none of the card's writing. */
.twd-sb-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--twd-sb-close-ring) !important;
  background: var(--twd-sb-close-bg) !important;
  color: var(--twd-sb-close-ink) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: var(--twd-sb-close-shadow) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.twd-sb-close svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
}
/* The cross is drawn with attributes on the path; a theme's own svg rules
   (Elementor's global styles, for one) beat attributes, so the path is set
   here too. */
.twd-sb-close svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.6px !important;
  stroke-linecap: round !important;
}
/* Two rules, not one list: a browser that does not know :focus-visible
   (Safari before 15.4) drops a whole rule that names it. */
.twd-sb-close:hover {
  background: var(--twd-sb-close-hover) !important;
  transform: scale(1.08) !important;
}
.twd-sb-close:focus-visible {
  background: var(--twd-sb-close-hover) !important;
  transform: scale(1.08) !important;
  outline: 2px solid var(--twd-sb-gold) !important;
  outline-offset: 2px !important;
}

/* The header is the first child inside each .twd-sb-card now, not a
   separate element above it -- one continuous background/border for the
   whole card, no seam between a "header box" and a "card box", and it
   moves with the card as a single unit on every swipe (logo, border and
   titles included), rather than staying fixed while cards pass underneath
   it. Non-scrolling within the card (.twd-sb-card-body, below, is the
   part that scrolls), with a hairline rule marking it off from the
   content beneath. */
.twd-sb-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--twd-sb-gold-faint) !important;
  text-align: left !important;
}

.twd-sb-header-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

/* Site heading sits above the "Swipe Book" label by default (blank
   swipebook_heading in grid settings falls back to the site's own name) --
   a distinct, slightly larger line from the small uppercase label below
   it, so the two never read as the same kind of text. */
.twd-sb-sitename {
  margin-bottom: 3px !important;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
  color: var(--twd-sb-cream) !important;
}
.twd-sb-sitename-link {
  color: inherit !important;
  text-decoration: none !important;
}

.twd-sb-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--twd-sb-gold-soft) !important;
}

.twd-sb-mast {
  display: flex !important;
  flex-shrink: 0 !important;
}
.twd-sb-mast-link {
  text-decoration: none !important;
  display: inline-flex !important;
}
.twd-sb-mast-logo {
  max-height: 64px !important;
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
}
/* Three fixed background styles for the logo pill, picked in grid settings
   -- not a colour picker, so there's nothing to keep in sync with a
   site's own brand colours if the logo itself already carries them. */
.twd-sb-mast-bg-light .twd-sb-mast-logo {
  background: rgba(255, 248, 236, 0.92) !important;
}
.twd-sb-mast-bg-dark .twd-sb-mast-logo {
  background: rgba(10, 9, 18, 0.75) !important;
}
.twd-sb-mast-bg-none .twd-sb-mast-logo {
  background: none !important;
  padding: 0 !important;
  /* 1.50.8: with no pill behind it a mark is a small sign beside the two lines of writing, not a badge. */
  max-height: 38px !important;
  max-width: 120px !important;
}
.twd-sb-mast-text {
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: var(--twd-sb-gold-soft) !important;
  text-shadow: var(--twd-sb-mast-glow) !important;
}

/* Compact, sitting directly under the page-number counter now rather than
   across the top of the frame -- smaller and thinner than before since the
   page numbers already carry the primary "where am I" signal. */
.twd-sb-progress {
  display: flex !important;
  gap: 4px !important;
  margin: 6px auto 0 !important;
  padding: 0 !important;
  max-width: 220px !important;
}
.twd-sb-seg {
  flex: 1 1 0 !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--twd-sb-ctl-line, var(--twd-sb-gold-faint)) !important;
  overflow: hidden !important;
  position: relative !important;
}
.twd-sb-seg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}
.twd-sb-seg.is-done::after,
.twd-sb-seg.is-current::after {
  transform: scaleX(1) !important;
}

.twd-sb-slides {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  cursor: grab !important;
  touch-action: pan-y !important;
}
.twd-sb-backdrop.is-dragging .twd-sb-slides {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Each slide parks fully off to whichever side it isn't showing on yet
   (is-future) or has already passed (is-past), and becomes is-active at
   translateX(0). Moving between them is a plain transform transition, no
   opacity or scale riding along, so a swipe actually reads as the current
   page sliding off and the next one sliding on, not a cross-fade --
   the same feel as Therapy Resource Directory's own book reader
   (trd-resource-reader), matched to its transition duration and easing. */
.twd-sb-slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateX(0);
  pointer-events: none !important;
  will-change: transform !important;
  transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.twd-sb-slide.is-active {
  pointer-events: auto !important;
  z-index: 2 !important;
}
.twd-sb-slide.is-past {
  transform: translateX(-100%);
}
.twd-sb-slide.is-future {
  transform: translateX(100%);
}

/* Download as PDF steps every slide to is-active in turn to snapshot it,
   off the reader's own input -- without this, each step would visibly
   animate through the normal 0.52s slide transition. */
.twd-sb-backdrop.twd-sb-exporting .twd-sb-slide {
  transition: none !important;
}

.twd-sb-card {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(18px, 4.5vh, 30px) clamp(24px, 6vw, 34px) !important;
  border: 1px solid var(--twd-sb-gold-faint) !important;
  border-radius: 18px !important;
  text-align: center !important;
  background: var(--twd-sb-card-bg) !important;
  box-shadow: var(--twd-sb-card-shadow) !important;
}

/* The hidden copy of a card the fit step measures in (see computePlan() in
   swipebook.js). Same size and layout as a real card, never seen or touched. */
.twd-sb-slide.twd-sb-probe {
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  transform: none !important;
  z-index: -1 !important;
}

.twd-sb-card-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* "safe center" centers short content same as before, but falls back to
     top-aligned the moment content overflows -- plain "center" on an
     overflowing flex column clips whatever overflows ABOVE the centre
     point, unreachable by scrolling since scrollTop can't go negative.
     That's what was cutting off the top of a long slide's heading/text
     with no way to scroll up to it. A browser that doesn't recognise
     "safe" drops this whole declaration, which also lands on a safe
     default (flex-start, i.e. always scrollable from the top). */
  justify-content: safe center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.twd-sb-heading {
  margin: 0 0 calc(16px * var(--twd-sb-s, 1)) !important;
  padding: 0 !important;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-weight: 600 !important;
  font-size: calc(clamp(20px, 4.6vw, 28px) * var(--twd-sb-s, 1)) !important;
  line-height: 1.25 !important;
  color: var(--twd-sb-gold) !important;
  text-shadow: var(--twd-sb-glow) !important;
  /* Distributes a wrapped heading's words evenly across its lines instead
     of however the default greedy wrap happens to break it (often a
     short, orphaned last line) -- a browser that doesn't support it just
     keeps the default wrap, no fallback needed. */
  text-wrap: balance !important;
}

.twd-sb-body-text {
  font-family: Georgia, "Cormorant Garamond", Garamond, serif !important;
  font-size: calc(clamp(16px, 3.6vw, 19px) * var(--twd-sb-s, 1)) !important;
  line-height: 1.7 !important;
  color: var(--twd-sb-cream) !important;
}
.twd-sb-body-text p {
  margin: 0 0 calc(14px * var(--twd-sb-s, 1)) !important;
  color: var(--twd-sb-cream) !important;
}
.twd-sb-body-text p:last-child {
  margin-bottom: 0 !important;
}
.twd-sb-body-text h3 {
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-size: calc(20px * var(--twd-sb-s, 1)) !important;
  font-weight: 600 !important;
  margin: 18px 0 8px !important;
  color: var(--twd-sb-gold-soft) !important;
}
.twd-sb-body-text ul,
.twd-sb-body-text ol {
  margin: 0 auto 14px !important;
  padding-left: 22px !important;
  max-width: 380px !important;
  text-align: left !important;
  color: var(--twd-sb-cream) !important;
}
.twd-sb-body-text li {
  margin-bottom: 6px !important;
}
.twd-sb-body-text blockquote {
  margin: 14px 0 !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--twd-sb-gold-faint) !important;
  border-bottom: 1px solid var(--twd-sb-gold-faint) !important;
  border-left: none !important;
  font-style: italic !important;
  color: var(--twd-sb-cream-muted) !important;
}
.twd-sb-body-text img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
  margin: 14px 0 !important;
  box-shadow: var(--twd-sb-img-shadow) !important;
}
.twd-sb-body-text a {
  color: var(--twd-sb-gold) !important;
  text-decoration-color: var(--twd-sb-gold-faint) !important;
}

/* Bio slide -- closing "about the author" card shown when an article has
   Include bio page at end ticked and a profile is set up under Customise
   this grid. Same card shell as a text slide, centred content instead. */
.twd-sb-bio {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.twd-sb-bio-photo {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--twd-sb-gold-faint) !important;
  box-shadow: var(--twd-sb-photo-shadow) !important;
}
.twd-sb-bio .twd-sb-heading {
  margin-bottom: 10px !important;
}
.twd-sb-bio-text {
  font-family: Georgia, "Cormorant Garamond", Garamond, serif !important;
  font-size: calc(17px * var(--twd-sb-s, 1)) !important;
  line-height: 1.65 !important;
  color: var(--twd-sb-cream) !important;
  margin: 0 0 18px !important;
}
.twd-sb-bio-link {
  display: inline-block !important;
  border: 1px solid var(--twd-sb-gold-faint) !important;
  background: var(--twd-sb-chip) !important;
  color: var(--twd-sb-gold) !important;
  padding: 9px 22px !important;
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  -webkit-user-drag: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.twd-sb-bio-link:hover {
  background: var(--twd-sb-chip-hover) !important;
  border-color: var(--twd-sb-gold-soft) !important;
  color: var(--twd-sb-gold) !important;
}

/* Quote / question card slides (curated Summary Book only -- the swipe book
   never emits these types). Styled after Therapy Resource Directory's own
   book reader: quote in gold with a hairline border top/bottom and a
   smaller attribution line below; question in a warmer amber, no
   attribution, since it's addressed to the reader rather than quoting
   someone. */
.twd-sb-quote,
.twd-sb-question {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.twd-sb-quote-text {
  margin: 14px 0 !important;
  padding: 16px 0 !important;
  max-width: 13em !important;
  border-top: 1px solid var(--twd-sb-gold-faint) !important;
  border-bottom: 1px solid var(--twd-sb-gold-faint) !important;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-style: italic !important;
  font-size: calc(clamp(18px, 4vw, 22px) * var(--twd-sb-s, 1)) !important;
  line-height: 1.6 !important;
  color: var(--twd-sb-gold) !important;
}
.twd-sb-quote-text p {
  margin: 0 !important;
}
/* A card split into pages keeps a blank line between its paragraphs, as the original line breaks did. */
.twd-sb-quote-text p + p,
.twd-sb-question-text p + p {
  margin-top: 1.6em !important;
}
.twd-sb-quote-attribution {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: calc(13px * var(--twd-sb-s, 1)) !important;
  letter-spacing: 0.03em !important;
  color: var(--twd-sb-cream-muted) !important;
}
.twd-sb-question-text {
  margin: 14px 0 !important;
  padding: 16px 0 !important;
  max-width: 13em !important;
  border-top: 1px solid var(--twd-sb-amber-line) !important;
  border-bottom: 1px solid var(--twd-sb-amber-line) !important;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif !important;
  font-style: italic !important;
  font-size: calc(clamp(18px, 4vw, 22px) * var(--twd-sb-s, 1)) !important;
  line-height: 1.6 !important;
  color: var(--twd-sb-amber) !important;
}
.twd-sb-question-text p {
  margin: 0 !important;
}

/* Picture card (Summary Book). The picture takes whatever height the page has
   left after the caption and shrinks to fit (flex-shrink on the image, with
   object-fit so it is never stretched), so a picture never makes a page
   scroll. */
.twd-sb-image {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  text-align: center !important;
}
.twd-sb-image-img {
  display: block !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  box-shadow: var(--twd-sb-img-shadow) !important;
}
.twd-sb-image-caption {
  flex: 0 0 auto !important;
  margin: calc(12px * var(--twd-sb-s, 1)) 0 0 !important;
  font-family: Georgia, "Cormorant Garamond", Garamond, serif !important;
  font-size: calc(15px * var(--twd-sb-s, 1)) !important;
  line-height: 1.5 !important;
  color: var(--twd-sb-cream-muted) !important;
}

/* Cross-link between a swipe book and its Summary Book (or back), shown
   only when the other book has actually been published for this article. */
.twd-sb-companion-link {
  display: inline-block !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--twd-sb-ctl-line, var(--twd-sb-gold-faint)) !important;
  margin-top: 4px !important;
}
.twd-sb-companion-link:hover {
  color: var(--twd-sb-ctl, var(--twd-sb-gold-soft)) !important;
}

/* "More Articles" closing slide -- a compact, no-thumbnail list (unlike
   the rest of this plugin's thumbnail-forward card grid) since a swipe
   book slide is a small, portrait space, not a resources page. */
.twd-sb-related-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  text-align: left !important;
}
.twd-sb-related-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: calc(14px * var(--twd-sb-s, 1)) 4px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--twd-sb-gold-faint) !important;
  border-radius: 0 !important;
  background: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}
.twd-sb-related-list a.twd-sb-related-item:first-child {
  border-top: 1px solid var(--twd-sb-gold-faint) !important;
}
.twd-sb-related-item:hover,
.twd-sb-related-item-loading {
  background: var(--twd-sb-chip-soft) !important;
  padding-left: 10px !important;
}
.twd-sb-related-title {
  font-family: Georgia, "Cormorant Garamond", Garamond, serif !important;
  font-size: calc(16px * var(--twd-sb-s, 1)) !important;
  line-height: 1.4 !important;
  color: var(--twd-sb-cream) !important;
}
.twd-sb-related-item:hover .twd-sb-related-title {
  color: var(--twd-sb-gold) !important;
}
.twd-sb-related-arrow {
  flex-shrink: 0 !important;
  font-family: "DM Mono", "Courier New", monospace !important;
  font-size: 16px !important;
  color: var(--twd-sb-gold-faint) !important;
  transform: translateX(0) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.twd-sb-related-item:hover .twd-sb-related-arrow {
  color: var(--twd-sb-gold) !important;
  transform: translateX(3px) !important;
}
.twd-sb-related-item-loading {
  cursor: wait !important;
  opacity: 0.7 !important;
}

.twd-sb-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 16px !important;
  padding: 5px 6px !important;
}
.twd-sb-btn {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--twd-sb-ctl-line, var(--twd-sb-gold-faint)) !important;
  background: var(--twd-sb-ctl-rest, var(--twd-sb-btn-rest)) !important;
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
  font-family: "DM Mono", "Courier New", monospace !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.twd-sb-btn:hover {
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
  background: var(--twd-sb-ctl-hover, var(--twd-sb-btn-hover)) !important;
  border-color: var(--twd-sb-ctl, var(--twd-sb-gold-soft)) !important;
}
.twd-sb-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: none !important;
  border-color: transparent !important;
}
.twd-sb-counter {
  min-width: 64px !important;
  font-family: "DM Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
}

.twd-sb-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px 14px !important;
  margin-top: 12px !important;
}
.twd-sb-share-btn,
.twd-sb-save-btn {
  margin: 0 !important;
  border: 1px solid var(--twd-sb-ctl-line, var(--twd-sb-gold-faint)) !important;
  background: var(--twd-sb-ctl-chip, var(--twd-sb-chip)) !important;
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.twd-sb-share-btn:hover,
.twd-sb-save-btn:hover {
  background: var(--twd-sb-ctl-chip-hover, var(--twd-sb-chip-hover)) !important;
  border-color: var(--twd-sb-ctl, var(--twd-sb-gold-soft)) !important;
  color: var(--twd-sb-ctl, var(--twd-sb-gold)) !important;
}
.twd-sb-save-btn:disabled,
.twd-sb-pdf-btn:disabled {
  opacity: 0.6 !important;
  cursor: default !important;
}

/* Filled gold, distinct from the outlined Share/Save pills -- the one
   action meant to stand out most in the footer. */
.twd-sb-pdf-btn {
  margin: 0 !important;
  border: 1px solid var(--twd-sb-primary) !important;
  background: var(--twd-sb-primary) !important;
  color: var(--twd-sb-primary-ink) !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  box-shadow: var(--twd-sb-primary-shadow) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.twd-sb-pdf-btn:hover {
  background: var(--twd-sb-primary-hover) !important;
  box-shadow: var(--twd-sb-primary-shadow-hover) !important;
}
.twd-sb-read-link {
  display: inline-block !important;
  padding: 5px 14px !important;
  border: 1px solid var(--twd-sb-read-line) !important;
  border-radius: 999px !important;
  background: var(--twd-sb-ctl-chip, var(--twd-sb-chip-soft)) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--twd-sb-read) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.twd-sb-read-link:hover {
  color: var(--twd-sb-read-hover) !important;
  background: var(--twd-sb-ctl-chip-hover, var(--twd-sb-chip-hover)) !important;
  text-decoration: none !important;
}

/* While a picture of the card is being taken (Save as image, Download as PDF): one flat colour, no shadows
   and no glow, because html2canvas paints layered gradients and inset shadows unevenly. */
.twd-sb-backdrop.twd-sb-capture .twd-sb-card {
  background: var(--twd-sb-export-bg) !important;
  box-shadow: none !important;
}
.twd-sb-backdrop.twd-sb-capture .twd-sb-mast-text {
  text-shadow: none !important;
}

@media (max-width: 600px) {
  .twd-sb-backdrop {
    padding: 0 !important;
  }
  .twd-sb-frame {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding: 18px 14px 16px !important;
  }
  .twd-sb-card {
    padding: 24px 22px !important;
  }
  .twd-sb-heading {
    font-size: calc(23px * var(--twd-sb-s, 1)) !important;
  }
  .twd-sb-body-text {
    font-size: calc(17px * var(--twd-sb-s, 1)) !important;
  }
}

/* ---- 1.50.7: the article's featured picture, faded behind the cover page only ---- */
.twd-sb-card--cover {
  overflow: hidden !important;
}
.twd-sb-card--cover::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background-image: var(--twd-sb-cover-img) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, #000 45%, rgba(0, 0, 0, 0.25) 95%) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, #000 45%, rgba(0, 0, 0, 0.25) 95%) !important;
}
.twd-sb-backdrop.twd-sb-theme-light .twd-sb-card--cover::before {
  opacity: 0.22 !important;
}
.twd-sb-card--cover > * {
  position: relative !important;
  z-index: 1 !important;
}