* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 400px;
  gap: 6px;
  background: #f5f5f5;
  /* Matches the 6px gap between blocks on the left edge, and between the
     rightmost blocks and the menu bar's edge, too. */
  padding-left: 6px;
  padding-right: 6px;
  /* Same 6px gap above (between the header banner/main text and the
     first row of blocks) and below (between the last row and the
     footer). */
  margin-top: 6px;
  margin-bottom: 6px;
  /* Leaves room for the 15px strip of the slide-out menu that's always
     on-screen at the right edge (see .menu-dropdown's own translateX),
     so content blocks don't run underneath it - matches that value
     exactly so the 6px padding-right above is the only extra space,
     same as the left edge. */
  width: calc(100vw - 15px);
}
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.block {
  border-radius: 3px;
  background: #ffffff;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 24px;
}
.menu-bar {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  background: #1f1f1f;
  position: relative;
}
.site-logo {
  height: 32px;
  width: auto;
  display: block;
  position: relative;
  left: 4px;
  /* The logomark PNG ships as a dark mark on transparent background -
     brightness(0) flattens every opaque pixel to solid black (alpha
     untouched), then invert(90%) lifts that black to a very light grey
     (~#e5e5e5) so it reads clearly against the now-dark header. */
  filter: brightness(0) invert(90%);
}
.hamburger {
  width: 16px;
  height: 11px;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  left: -2px;
  top: 1px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #e5e5e5;
}
.menu-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: #51bf9d;
  outline: 1px solid #51bf9d;
  z-index: 10;
  transform: translateX(calc(100% - 15px));
  transition: transform 0.3s ease;
}
.menu-dropdown.open {
  transform: translateX(0);
}
.menu-dropdown a {
  color: #f5f5f5;
  text-decoration: none;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 10px 24px;
  /* Closed, only the 22px strip is on-screen - but the full 280px-wide
     panel (including these links, which are DOM-present, just shifted
     off-screen) still occupies that space, and a link's own left padding
     happens to land inside that visible strip. Locking pointer-events
     off here, restored via .open, stops a "closed" click from landing on
     a link - it falls through to .menu-dropdown itself instead, which
     app.js uses to open the panel. */
  pointer-events: none;
}
.menu-dropdown.open a {
  pointer-events: auto;
}
.menu-dropdown a:first-of-type {
  /* Was 48px, clearing the old close button's own ~52px of vertical
     space (36px margin-top + its 16px height) above it. That button's
     gone now, so this makes up the difference to keep the links starting
     at the same spot as before rather than jumping up. */
  margin-top: 100px;
}
.menu-dropdown a:hover {
  background: #45a888;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
}
.modal-overlay.open {
  display: flex;
}
.modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 2px;
  width: 90%;
  max-width: 480px;
  height: 620px;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-card > * {
  flex-shrink: 0;
}
.modal-card h2:not(.overlay-title) {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333;
}
.modal-subtext {
  align-self: flex-start;
  text-align: left;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
}
.modal-image-frame {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-card .image-placeholder {
  width: 100%;
  height: 280px;
  background: #4d4d4d;
}
.modal-card .image-placeholder.fill {
  width: 100%;
  height: 100%;
  margin-top: 0;
  flex: none;
}
.modal-card .image-placeholder.square {
  width: 180px;
  height: 180px;
  margin-top: 0;
  flex: none;
  transform: translateY(15px);
}
.modal-card .image-placeholder.book-cover {
  width: 180px;
  height: 270px;
  margin-top: 0;
  flex: none;
  transform: translateY(15px);
}
.modal-card .modal-image-frame {
  position: absolute;
  top: 0;
  left: -30px;
  width: calc(100% + 60px);
  height: 280px;
  margin: 0;
}
.modal-image-spacer {
  height: 280px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: #333;
  cursor: pointer;
  padding: 0;
}
.modal-card p {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
}
/* .modal-card p above (element+class) outranks .modal-subtext's own
   single-class selector regardless of source order, so its
   margin/font-size/color were silently winning over anything set on the
   lower-specificity .modal-subtext rule above - moved all three here to
   actually take effect. */
.modal-card p.modal-subtext {
  /* Bottom value adds to the .modal-card flex gap (16px) that already
     separates it from the next paragraph, on top of that shared spacing. */
  margin: -11px 0 3px 0;
  font-size: 13px;
  color: #51bf9d;
}
.modal-link {
  align-self: flex-end;
  /* Adds to the .modal-card flex gap (16px) that already separates this
     from whatever paragraph precedes it - covers both the external link
     and the "More info" read-more link (readMoreHtml also carries this
     class), since either is always the last thing in the popup. */
  margin-top: 8px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #333;
  text-decoration: underline;
}
.modal-readmore-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s ease;
}
.modal-readmore-link:hover {
  color: #51bf9d;
}
.modal-readmore-arrow {
  font-size: 16px;
  line-height: 1;
}
.footer {
  width: 100vw;
  height: 140px;
  margin-top: auto;
  flex-shrink: 0;
  background: #1f1f1f;
  position: relative;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 28px 24px;
}
.footer-links a {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #bbbbbb;
  text-decoration: none;
}
.footer-links a:hover {
  color: #ffffff;
}
.footer-credit {
  position: absolute;
  bottom: 16px;
  left: 24px;
  max-width: 60%;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  color: #737373;
}
.footer-logo {
  position: absolute;
  top: 50%;
  right: 64px;
  transform: translateY(-50%);
  height: 44px;
  width: auto;
}
.footer-credit a {
  color: #999999;
  text-decoration: underline;
}
.footer-credit a:hover {
  color: #ffffff;
}
.admin-link {
  position: absolute;
  /* footer-credit sits at bottom:16px with an 11px/1.6 line box (~17.6px
     tall) - nudging this up ~4px lines the square's center up with the
     text's vertical center rather than just matching their bottom edges. */
  bottom: 30px;
  right: 34px;
  width: 10px;
  height: 10px;
  background: #333333;
  border: none;
  padding: 0;
  cursor: pointer;
}
.admin-link:hover {
  background: #666666;
}
.admin-modal-card {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
/* The Add/Edit Content Block modal injects its per-type fields into this
   wrapper as plain sibling divs (see fieldsHtmlForType in app.js) - it
   needs its own flex/gap, since .admin-modal-card's gap only spaces out
   its own direct children (title, this whole wrapper as one block,
   submit button), not what's nested inside it. */
#addBlockFields {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.admin-modal-card h3 {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-field label {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #666;
}
.admin-field input,
.admin-field textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  padding: 12px 14px;
  border: 1px solid #dddddd;
  color: #333;
  background: #fafafa;
}
.admin-field textarea {
  resize: vertical;
  min-height: 80px;
}
.richtext-toolbar {
  display: flex;
  gap: 4px;
}
.richtext-btn {
  width: 26px;
  height: 24px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #333;
  background: #fafafa;
  border: 1px solid #dddddd;
  cursor: pointer;
}
.richtext-btn:hover {
  background: #eeeeee;
}
/* Bold text inside rich-text paragraphs (content blocks, popups, main
   text) renders via <b>/<strong> from the toolbar - bump past the
   browser default 700 so it reads clearly heavier than the surrounding
   text. */
.block b, .block strong,
.modal-card b, .modal-card strong,
.top-block b, .top-block strong,
.page-intro b, .page-intro strong,
.richtext-editable b, .richtext-editable strong {
  font-weight: 700;
}
.richtext-editable {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid #dddddd;
  color: #333;
  background: #fafafa;
  min-height: 80px;
  max-height: 240px;
  overflow-y: auto;
}
.richtext-editable:focus {
  outline: 1px solid #999999;
}
.richtext-editable:empty:before {
  content: "Start typing…";
  color: #999999;
}
.admin-field-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-field-row label {
  margin: 0;
}
.admin-field-row input[type="color"] {
  width: 44px;
  height: 28px;
  padding: 2px;
  border: 1px solid #dddddd;
  background: #fafafa;
  cursor: pointer;
}
.admin-reset-link {
  align-self: flex-start;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #999;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.admin-reset-link:hover {
  color: #666;
}
.admin-btn {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: #333333;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}
.admin-btn:hover {
  background: #000000;
}
.admin-error {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #c0392b;
}
.admin-success {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #2e7d32;
}
/* change-password.html is a standalone utility page (no nav, no admin
   bar) - these lay its login/change-password cards out centered on an
   otherwise blank page, reusing the same .admin-modal-card look the
   in-site modals use. */
.admin-utility-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
.admin-utility-wrap {
  width: 90%;
  max-width: 380px;
}
.admin-utility-card {
  width: 100%;
  max-width: none;
  border: 1px solid #f2f2f2;
}
.admin-utility-back {
  align-self: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #999999;
  text-decoration: none;
}
.admin-utility-back:hover {
  color: #333333;
}
.type-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.type-select button {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333;
  background: #f2f2f2;
  border: 1px solid transparent;
  padding: 10px 4px;
  cursor: pointer;
}
.type-select button.selected {
  border-color: #333333;
  font-weight: 500;
}
.admin-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  display: none;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #1a1a1a;
  z-index: 40;
}
.admin-bar.open {
  display: flex;
}
.admin-bar span {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-right: auto;
}
.admin-bar button {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #ffffff;
  background: none;
  border: 1px solid #555555;
  padding: 8px 14px;
  cursor: pointer;
}
.admin-bar button:hover {
  border-color: #ffffff;
}
.admin-delete-btn {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
body.admin-mode .admin-delete-btn {
  display: flex;
}
.admin-edit-btn {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
body.admin-mode .admin-edit-btn {
  display: flex;
}
.admin-block {
  position: relative;
}
body.admin-mode .block[draggable="true"] {
  cursor: grab !important;
}
body.admin-mode .block[draggable="true"]:active {
  cursor: grabbing !important;
}
.block.dragging {
  opacity: 0.4;
}
.block.drag-over {
  outline: 2px dashed #333333;
  outline-offset: -4px;
}
.type-select button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.top-block {
  position: relative;
  /* Leaves room for the 15px strip of the slide-out menu that's always
     on-screen at the right edge, so the banner doesn't run underneath it. */
  width: calc(100vw - 15px);
  height: 400px;
  background: #ffffff;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.top-block h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 32px;
  color: #333;
}
.top-block.has-image h1 {
  color: #ffffff;
}
.banner-edit-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 24px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
body.banner-admin-mode .banner-edit-btn {
  display: flex;
}
.page-intro {
  position: relative;
  /* Leaves room for the 15px strip of the slide-out menu that's always
     on-screen at the right edge, so the main text block doesn't run
     underneath it. */
  width: calc(100vw - 15px);
  padding: 60px 40px;
  background: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.page-intro h2 {
  margin: 0 0 10px 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #333;
}
.page-intro p {
  margin: 0 auto;
  max-width: 480px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: #555;
}
.block .image-placeholder {
  width: 100%;
  height: 280px;
  background: #4d4d4d;
  contain: layout paint;
}
.block .image-placeholder.image-carousel {
  background: #ffffff;
  /* Matches the 8px inset used on Text/Text A's added image
     (.block-flip-image) - background-origin/clip: content-box makes the
     background-image (set inline per image, via cover/contain) render
     only within the padded content box instead of filling it edge to
     edge. */
  padding: 8px;
  background-origin: content-box;
  background-clip: content-box;
}
.block-header-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block h2 {
  margin: 0;
  margin-left: 8px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #333;
}
.block-subtext {
  align-self: flex-start;
  width: calc(100% - 8px);
  margin: -10px 0 0 8px;
  text-align: left;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #999;
}
.image-placeholder.fill {
  width: 100%;
  flex: 1;
  position: relative;
}
.carousel-next-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Positioned against .block itself (via .admin-block's position:
     relative) rather than the image div, which has contain:layout paint
     and would clip anything positioned outside its own box - so right:0
     here lands flush with the white block's actual edge. */
  right: 0;
  width: 25px;
  border-radius: 0;
  background: rgba(240, 240, 240, 0.3);
  border: none;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.block:hover .carousel-next-btn {
  opacity: 1;
}
.carousel-next-btn:hover {
  background: rgba(224, 224, 224, 0.65);
}
.block .overlay-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #ffffff;
}
.image-placeholder.book-cover {
  width: 180px;
  height: 270px;
}
.image-placeholder.square {
  width: 180px;
  height: 180px;
  margin-top: 50px;
}
.block-square .block-header-row {
  margin-top: 50px;
}
.block-book .block-header-row {
  margin-top: 10px;
}
.block-centered {
  justify-content: center;
}
.block-text {
  margin: 0;
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  color: #333;
}
.block-text-container {
  padding: 40px 40px 65px 40px;
}
/* The scrollable area lives on this inner wrapper, not on
   .block-text-container itself - a scrolling element's own padding-bottom
   isn't reliably honored once content overflows (at the bottom of the
   scroll, text still touches the edge right at the padding line). Putting
   overflow-y here instead means the wrapper's box genuinely ends before
   .block-text-container's own (non-scrolling) padding, so there's always
   real, fixed space below the text regardless of scroll position.
   min-height:0 is required for a flex child to shrink enough for its own
   overflow to actually take effect. */
.block-text-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.block-text-link {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #333;
  text-decoration: underline;
}
.block-quote-block {
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.block-quote-vertical {
  display: block;
  max-width: 300px;
  text-align: right;
  padding-right: 8px;
  padding-bottom: 10px;
}
.block-quote {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: #333;
}
.block-quote-source {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #999;
}
.block-label {
  margin-right: 8px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #999;
}
.block-texta {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 100px 50px 55px 50px;
}
/* Same inner-scroll-wrapper approach as .block-text-scroll - see that
   rule's comment. */
.block-texta-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.block-texta h2 {
  margin: 0;
  text-align: left;
}
.block-paragraph {
  margin: 0;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.block-texta-link {
  position: absolute;
  right: 40px;
  bottom: 50px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #333;
  text-decoration: underline;
}
/* Text/Text A's optional image (see optionalImageFieldHtml in app.js).
   .block-flip is just the text view - it stays exactly where
   .block-text-scroll/.block-texta-scroll normally sits, inside the
   block's own padding. .block-flip-image is a SIBLING of it rather than
   a child, specifically so its own position:absolute skips over
   .block-flip (which has no position of its own) and resolves against
   .admin-block instead - inset:0 there fills the entire white block,
   ignoring the text's own padding, rather than being confined to the
   same limited space as the text. Swapped via the .showing-image class
   (toggleTextImageFlip), triggered by the same hover arrow
   (.carousel-next-btn) the multi-image carousel uses. */
.block-flip {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.block-flip.showing-image {
  display: none;
}
.block-flip-image {
  position: absolute;
  inset: 8px;
  display: none;
  background-color: #ffffff;
  background-position: center;
  contain: layout paint;
}
.block-flip.showing-image + .block-flip-image {
  display: block;
}
/* Text A's link is a later sibling still (after .block-flip-image) -
   general sibling combinator since it's no longer directly adjacent. */
.block-flip.showing-image ~ .block-texta-link {
  display: none;
}
.block-document {
  position: relative;
}
.document-block-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.document-block-link.no-file {
  cursor: default;
}
.document-icon {
  width: 40px;
  height: 48px;
}
.document-title {
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #333;
}
.menu-items-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #eeeeee;
}
.menu-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #eeeeee;
  cursor: grab;
  background: #ffffff;
}
.menu-item-row:last-child {
  border-bottom: none;
}
.menu-item-row.dragging {
  opacity: 0.4;
}
.menu-item-drag {
  color: #bbbbbb;
  font-size: 14px;
}
.menu-item-title {
  flex: 1;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #333;
}
.menu-item-rename-input {
  flex: 1;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #333;
  padding: 3px 6px;
  border: 1px solid #dddddd;
  background: #fafafa;
}
.menu-item-edit {
  border: none;
  background: none;
  color: #999999;
  font-size: 13px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.menu-item-edit:hover {
  color: #333333;
}
.menu-item-delete {
  border: none;
  background: none;
  color: #999999;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.menu-item-delete:hover {
  color: #c0392b;
}
.checkbox-field .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #666;
}
.pages-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.page-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333;
}