/* Sidetrack Monthly flipbook — A4 portrait leaves (210×297)
   Typography matches main site (typography.css + eveleth.css.erb):
   - Display / headings: Eveleth Clean Thin / Eveleth Clean
   - Body / UI: Inter (same stack as --font-sans)
*/

/* Local Eveleth faces (copied from app/assets/fonts) */
@font-face {
  font-family: "Eveleth Clean Thin";
  src: url("../fonts/eveleththin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Eveleth Clean";
  src: url("../fonts/evelethlight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Comic speech / comic-title faces (self-hosted for flipbook) */
@font-face {
  font-family: "Comic Neue";
  src: url("../fonts/comic-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("../fonts/comic-neue-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bangers";
  src: url("../fonts/bangers-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111111;
  --paper: #f7f1e8;
  --cream: #fffaf3;
  --accent: #c45c26;
  --accent-2: #0a6c9c; /* site link blue */
  --muted: #555555;
  --shadow: rgba(20, 16, 12, 0.35);
  --radius: 2px;
  /* Match site --font-sans / --font-display */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Eveleth Clean Thin", var(--font-sans);
  --font-display-strong: "Eveleth Clean", var(--font-sans);
  --font-comic: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --font-comic-title: "Bangers", "Comic Neue", Impact, fantasy;
  /* Handwriting / letter styles (Google Fonts loaded by flipbook-app) */
  --font-handwriting: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --font-script: "Patrick Hand", "Segoe Script", "Comic Sans MS", cursive;
  --font-letter: "Indie Flower", "Segoe Script", "Bradley Hand", cursive;
  --font: var(--font-display);
  --ui: var(--font-sans);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #12100e;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.flipbook-body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  /* Lock the flipbook chrome to the visible viewport (no clipped cover) */
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
}

html {
  height: 100%;
  height: 100dvh;
}

.fb-shell {
  /* Fixed viewport height — min-height alone let the admin rail push the book off-screen */
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a2f28 0%, transparent 55%),
    linear-gradient(180deg, #1b1714 0%, #0e0c0b 100%);
}

.fb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  color: #f3ebe1;
  font-size: 0.85rem;
  z-index: 50;
  position: relative;
  flex-shrink: 0;
}

.fb-topbar-actions {
  display: flex;
  gap: 0.5rem 0.65rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(100%, 42rem);
}

.fb-topbar-link {
  color: inherit;
  opacity: 0.85;
  text-decoration: none;
  white-space: nowrap;
}

.fb-topbar-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Always-visible admin arrange controls in the top bar */
.fb-topbar .fb-admin-bar-btn {
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
}

.fb-topbar .fb-admin-bar-btn--arrange {
  background: rgba(210, 243, 252, 0.22);
  border-color: rgba(210, 243, 252, 0.65);
  color: #fff !important;
}

.fb-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.9;
}

.fb-brand a {
  color: inherit;
  text-decoration: none;
}

.fb-issue {
  opacity: 0.75;
}

.fb-workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
}

.fb-stage {
  flex: 1 1 auto;
  display: block;
  position: relative;
  padding: 0;
  min-height: 0;
  min-width: 0;
  /* Contain the book so it never clips under the topbar on short laptops */
  overflow: hidden;
}

.fb-book-wrap {
  /* Absolute fill is more reliable than % height inside nested flex */
  position: absolute;
  inset: 0.2rem 0.5rem 0.35rem;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/*
 * Fixed-size mode: JS sets exact pixel width/height on #flipbook.
 * Do NOT force max-height:100% !important on the book — that overrode the
 * inline pixel height and broke % text-box positioning (boxes jumped to 0,0).
 */
.fb-book-wrap #flipbook {
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
}

.fb-book-wrap .stf__parent,
.fb-book-wrap .stf__wrapper {
  width: 100%;
  height: 100%;
  /* Kill autoSize aspect-ratio padding if a rebuild re-enables it */
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

/* Soft cap only — never !important, so JS fixed size wins */
.fb-book-wrap .stf__block {
  max-width: 100%;
  max-height: 100%;
}

/* Admin: same fit — stage already shrinks beside/above the rail */
body.fb-is-admin .fb-book-wrap {
  inset: 0.15rem 0.4rem 0.25rem;
}

/* Outline the active leaf — avoid filter: which creates a containing block
   and broke absolute % positioning of text boxes. */
body.fb-is-admin.fb-book-landscape .fb-page.fb-page-edit-active {
  box-shadow: inset 0 0 0 3px rgba(61, 180, 230, 0.95);
  z-index: 2;
}

/* —— Admin side rail (never overlaps magazine pages) —— */
.fb-admin-rail {
  flex: 0 0 13rem;
  width: 13rem;
  max-width: min(13rem, 34vw);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem 0.55rem 0.75rem;
  background: rgba(18, 16, 14, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 60;
  min-height: 0;
}

.fb-admin-rail[hidden] {
  display: none !important;
}

.fb-admin-rail-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 235, 225, 0.55);
}

.fb-admin-rail-page {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f3ebe1;
  line-height: 1.3;
}

.fb-admin-rail-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Author `display:flex` above would otherwise override the [hidden] UA rule */
.fb-admin-rail-group[hidden],
.fb-admin-crop-tools[hidden],
.fb-admin-text-tools[hidden],
.fb-admin-check[hidden],
.fb-admin-bar-btn[hidden] {
  display: none !important;
}

.fb-admin-rail .fb-admin-bar-btn {
  width: 100%;
  text-align: center;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
}

.fb-admin-rail-hint {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(243, 235, 225, 0.55);
  line-height: 1.35;
}

.fb-admin-zoom-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f3ebe1;
}

.fb-admin-image-zoom {
  width: 100%;
  accent-color: #0a6c9c;
}

.fb-admin-rail-subtitle {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f3ebe1;
  line-height: 1.3;
}

.fb-admin-field-label {
  display: block;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(243, 235, 225, 0.85);
}

.fb-admin-select,
.fb-admin-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: #f3ebe1;
  font-size: 0.78rem;
  padding: 0.35rem 0.45rem;
}

.fb-admin-color-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.fb-admin-color-row input[type="color"] {
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.fb-admin-color-row .fb-admin-input {
  flex: 1;
}

.fb-admin-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f3ebe1;
  cursor: pointer;
}

.fb-admin-text-tools {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.55rem;
}

.fb-text-selected {
  outline: 2px solid #3db4e6 !important;
  outline-offset: 2px;
  z-index: 8 !important;
}

/* Admin-chosen font / colour / weight apply to all copy inside a plate */
.fb-white-box.fb-text-styled .fb-box-kicker,
.fb-white-box.fb-text-styled .fb-box-title,
.fb-white-box.fb-text-styled .fb-box-loc,
.fb-white-box.fb-text-styled .fb-box-body,
.fb-white-box.fb-text-styled .fb-box-note,
.fb-white-box.fb-text-styled .fb-box-link,
.fb-white-box.fb-text-styled .fb-box-list,
.fb-white-box.fb-text-styled .fb-box-meta,
.fb-white-box.fb-text-styled .fb-box-subhead,
.fb-white-box.fb-text-styled .fb-toc,
.fb-white-box.fb-text-styled .fb-toc li,
.fb-cover-plate.fb-text-styled,
.fb-cover-issue-plate.fb-text-styled,
.fb-cover-issue-plate.fb-text-styled .fb-cover-issue-line {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-shadow: inherit;
}

/*
 * Quill partial bold (<strong>/<b>) must stay heavier than plate weight.
 * Without this, plate Boldness / inherit made “bold one word” look like all-bold.
 */
.fb-white-box strong,
.fb-white-box b,
.fb-cover-plate strong,
.fb-cover-plate b,
.fb-cover-issue-plate strong,
.fb-cover-issue-plate b,
.fb-page-kicker strong,
.fb-page-kicker b,
.fb-white-box.fb-text-styled strong,
.fb-white-box.fb-text-styled b,
.fb-cover-plate.fb-text-styled strong,
.fb-cover-plate.fb-text-styled b {
  font-weight: 700 !important;
}

/* Opacity-controlled solid fill (inline background wins over default white) */
.fb-white-box.fb-text-fill-opacity,
.fb-cover-plate.fb-text-fill-opacity,
.fb-cover-issue-plate.fb-text-fill-opacity {
  box-shadow: none;
}

/* Soft dark shadow for type on photos (overrides nofill white-edge when set) */
.fb-white-box.fb-text-shadow,
.fb-cover-plate.fb-text-shadow,
.fb-cover-issue-plate.fb-text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.25) !important;
}

/* Soft text shadow OFF — kill nofill white halo too (users expect “no shadow”) */
.fb-white-box.fb-text-no-shadow,
.fb-cover-plate.fb-text-no-shadow,
.fb-cover-issue-plate.fb-text-no-shadow,
.fb-white-box--nofill.fb-text-no-shadow,
.fb-cover-plate--nofill.fb-text-no-shadow {
  text-shadow: none !important;
}
.fb-white-box.fb-text-no-shadow .fb-box-kicker,
.fb-white-box.fb-text-no-shadow .fb-box-title,
.fb-white-box.fb-text-no-shadow .fb-box-loc,
.fb-white-box.fb-text-no-shadow .fb-box-body,
.fb-white-box.fb-text-no-shadow .fb-box-note,
.fb-white-box.fb-text-no-shadow .fb-box-link,
.fb-white-box.fb-text-no-shadow .fb-box-body p,
.fb-white-box.fb-text-no-shadow .fb-box-title p {
  text-shadow: none !important;
}

/* Plate alignment must reach nested body/title (Quill / p tags) */
.fb-white-box.fb-text-align-left,
.fb-white-box.fb-text-align-left .fb-box-title,
.fb-white-box.fb-text-align-left .fb-box-body,
.fb-white-box.fb-text-align-left .fb-box-body p {
  text-align: left !important;
}
.fb-white-box.fb-text-align-center,
.fb-white-box.fb-text-align-center .fb-box-title,
.fb-white-box.fb-text-align-center .fb-box-body,
.fb-white-box.fb-text-align-center .fb-box-body p {
  text-align: center !important;
}
.fb-white-box.fb-text-align-right,
.fb-white-box.fb-text-align-right .fb-box-title,
.fb-white-box.fb-text-align-right .fb-box-body,
.fb-white-box.fb-text-align-right .fb-box-body p {
  text-align: right !important;
}

/*
 * Admin text-size scale. Always honour --fb-text-scale (default 1) so the
 * arrange slider can change type without a remount. Nested p/li/span from
 * rich text must be included — Quill markup was ignoring parent size before.
 */
.fb-white-box,
.fb-cover-plate,
.fb-cover-issue-plate,
.fb-page-kicker {
  --fb-text-scale: 1;
}

.fb-white-box .fb-box-title,
.fb-white-box .fb-box-title p,
.fb-white-box .fb-box-title span {
  font-size: calc(4.4cqi * var(--fb-text-scale, 1)) !important;
  line-height: 1.15;
}

.fb-white-box .fb-box-title--lg,
.fb-white-box .fb-box-title--lg p {
  font-size: calc(6.2cqi * var(--fb-text-scale, 1)) !important;
}

.fb-white-box .fb-box-title--sm,
.fb-white-box .fb-box-title--sm p {
  font-size: calc(3.7cqi * var(--fb-text-scale, 1)) !important;
}

.fb-white-box .fb-box-body,
.fb-white-box .fb-box-body p,
.fb-white-box .fb-box-body li,
.fb-white-box .fb-box-body span,
.fb-white-box .fb-box-note,
.fb-white-box .fb-box-note p,
.fb-white-box .fb-box-list,
.fb-white-box .fb-box-list li,
.fb-white-box .fb-box-meta,
.fb-white-box .fb-box-meta p,
.fb-white-box .fb-box-qa p,
.fb-white-box .fb-letter-body,
.fb-white-box .fb-letter-body p {
  font-size: calc(3.15cqi * var(--fb-text-scale, 1)) !important;
  line-height: 1.22;
}

.fb-white-box .fb-box-kicker,
.fb-white-box .fb-box-kicker p,
.fb-white-box .fb-box-loc,
.fb-white-box .fb-box-loc p,
.fb-white-box .fb-box-subhead,
.fb-white-box .fb-box-link {
  font-size: calc(2.75cqi * var(--fb-text-scale, 1)) !important;
}

.fb-white-box .fb-box-cards,
.fb-white-box .fb-box-cards li,
.fb-white-box .fb-box-cards strong,
.fb-white-box .fb-box-cards span {
  font-size: calc(0.82rem * var(--fb-text-scale, 1)) !important;
}

.fb-cover-plate {
  font-size: calc(clamp(0.78rem, 2.8vw, 1.15rem) * var(--fb-text-scale, 1)) !important;
}

/* Left exclusive tagline — higher min so it survives IG/thumbnail crops */
.fb-cover-exclusive {
  font-size: calc(clamp(0.8rem, 2.7vw, 1.05rem) * var(--fb-text-scale, 1)) !important;
}

/* Romance / deck subhead — punchy at full size and small preview */
.fb-cover-deck {
  font-size: calc(clamp(0.92rem, 3.2vw, 1.22rem) * var(--fb-text-scale, 1)) !important;
}

.fb-cover-issue-plate,
.fb-cover-issue-plate .fb-cover-issue-line {
  font-size: calc(clamp(0.58rem, 2.1vw, 0.9rem) * var(--fb-text-scale, 1)) !important;
}

.fb-cover-footer {
  font-size: calc(clamp(0.48rem, 1.7vw, 0.78rem) * var(--fb-text-scale, 1)) !important;
}

.fb-page-kicker {
  font-size: calc(0.72rem * var(--fb-text-scale, 1)) !important;
}

/* Comic speech body / POW title helpers */
.fb-font-comic,
.fb-white-box.fb-font-comic,
.fb-white-box.fb-font-comic .fb-box-title,
.fb-white-box.fb-font-comic .fb-box-body,
.fb-white-box.fb-font-comic .fb-box-body p {
  font-family: var(--font-comic) !important;
}

.fb-font-comic-title,
.fb-white-box.fb-font-comic-title,
.fb-white-box.fb-font-comic-title .fb-box-title,
.fb-cover-plate.fb-font-comic-title {
  font-family: var(--font-comic-title) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* —— Comic speech bubble: soft rect + drop shadow + pullable tail —— */
.fb-white-box--speech {
  --fb-speech-border: 2.25px solid #111;
  --fb-speech-fill: #fff;
  --fb-speech-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  position: absolute;
  background: var(--fb-speech-fill) !important;
  color: #111 !important;
  border: var(--fb-speech-border);
  border-radius: 0.45rem;
  box-shadow: var(--fb-speech-shadow);
  /* Tight padding so dialogue sits close to the bubble edge */
  padding: 0.22rem 0.38rem 0.26rem !important;
  overflow: visible !important;
  z-index: 8;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

/* Soft round / pill speech bubble (extra rounded corners) */
.fb-white-box--speech.fb-white-box--speech-round {
  border-radius: 2.75rem;
  padding: 0.28rem 0.5rem 0.32rem !important;
}

/*
 * Narrative / caption box: same comic square frame as speech, but no tail.
 * Use for panel narration, place labels, etc.
 */
.fb-white-box--speech.fb-white-box--speech-square {
  border-radius: 0.15rem;
  padding: 0.18rem 0.32rem 0.2rem !important;
}
.fb-white-box--speech.fb-white-box--speech-square::before,
.fb-white-box--speech.fb-white-box--speech-square::after,
.fb-white-box--speech[data-speech-tail="none"]::before,
.fb-white-box--speech[data-speech-tail="none"]::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/*
 * POW / BANG starburst — comic onomatopoeia frame (no tail).
 * clip-path draws the burst; drop-shadows fake a black ink outline.
 */
.fb-white-box--speech.fb-white-box--speech-pow,
.fb-white-box--speech.fb-white-box--speech-bang {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.55rem 0.7rem !important;
  text-align: center !important;
  filter:
    drop-shadow(0 0 0.6px #111)
    drop-shadow(0 0 1.2px #111)
    drop-shadow(1.2px 0 0 #111)
    drop-shadow(-1.2px 0 0 #111)
    drop-shadow(0 1.2px 0 #111)
    drop-shadow(0 -1.2px 0 #111)
    drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.28));
}
.fb-white-box--speech.fb-white-box--speech-pow::before,
.fb-white-box--speech.fb-white-box--speech-pow::after,
.fb-white-box--speech.fb-white-box--speech-bang::before,
.fb-white-box--speech.fb-white-box--speech-bang::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Classic 12-point starburst (POW) */
.fb-white-box--speech.fb-white-box--speech-pow {
  clip-path: polygon(
    50% 0%,
    58% 14%,
    72% 4%,
    70% 22%,
    90% 18%,
    80% 35%,
    100% 42%,
    82% 52%,
    94% 70%,
    72% 66%,
    74% 88%,
    56% 74%,
    50% 100%,
    44% 74%,
    26% 88%,
    28% 66%,
    6% 70%,
    18% 52%,
    0% 42%,
    20% 35%,
    10% 18%,
    30% 22%,
    28% 4%,
    42% 14%
  );
}

/* Jagged explosion burst (BANG / CRASH) — slightly wilder points */
.fb-white-box--speech.fb-white-box--speech-bang {
  clip-path: polygon(
    50% 0%,
    56% 12%,
    68% 2%,
    66% 18%,
    88% 10%,
    78% 28%,
    100% 32%,
    84% 45%,
    98% 58%,
    78% 58%,
    86% 82%,
    66% 68%,
    62% 96%,
    50% 78%,
    38% 96%,
    34% 68%,
    14% 82%,
    22% 58%,
    2% 58%,
    16% 45%,
    0% 32%,
    22% 28%,
    12% 10%,
    34% 18%,
    32% 2%,
    44% 12%
  );
}

.fb-white-box--speech-pow .fb-box-title,
.fb-white-box--speech-pow .fb-box-body,
.fb-white-box--speech-pow .fb-box-body p,
.fb-white-box--speech-bang .fb-box-title,
.fb-white-box--speech-bang .fb-box-body,
.fb-white-box--speech-bang .fb-box-body p {
  font-family: var(--font-comic-title) !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* Tail (triangle) — default bottom-left toward speaker */
.fb-white-box--speech::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
  /* bottom-left default */
  left: 18%;
  bottom: -14px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 15px solid #111;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.12));
}

/* White fill sits just inside the black outline of the tail */
.fb-white-box--speech::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  left: calc(18% + 2px);
  bottom: -11px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--fb-speech-fill);
}

/* —— Tail directions: bottom / top / left / right × start|center|end —— */
.fb-white-box--speech[data-speech-tail="bottom"],
.fb-white-box--speech[data-speech-tail="bottom-center"] {
  /* defaults already bottom-ish; re-center */
}
.fb-white-box--speech[data-speech-tail="bottom"]::after,
.fb-white-box--speech[data-speech-tail="bottom-center"]::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -14px;
  transform: translateX(-50%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 15px solid #111;
  border-bottom: 0;
}
.fb-white-box--speech[data-speech-tail="bottom"]::before,
.fb-white-box--speech[data-speech-tail="bottom-center"]::before {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -11px;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--fb-speech-fill);
  border-bottom: 0;
}

.fb-white-box--speech[data-speech-tail="bottom-left"]::after,
.fb-white-box--speech:not([data-speech-tail])::after {
  left: 16%;
  right: auto;
  top: auto;
  bottom: -14px;
  transform: none;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 15px solid #111;
  border-bottom: 0;
}
.fb-white-box--speech[data-speech-tail="bottom-left"]::before,
.fb-white-box--speech:not([data-speech-tail])::before {
  left: calc(16% + 2px);
  right: auto;
  top: auto;
  bottom: -11px;
  transform: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--fb-speech-fill);
  border-bottom: 0;
}

.fb-white-box--speech[data-speech-tail="bottom-right"]::after {
  left: auto;
  right: 16%;
  top: auto;
  bottom: -14px;
  transform: none;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 15px solid #111;
  border-bottom: 0;
}
.fb-white-box--speech[data-speech-tail="bottom-right"]::before {
  left: auto;
  right: calc(16% + 2px);
  top: auto;
  bottom: -11px;
  transform: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--fb-speech-fill);
  border-bottom: 0;
}

/* Top edge */
.fb-white-box--speech[data-speech-tail="top"]::after,
.fb-white-box--speech[data-speech-tail="top-center"]::after {
  left: 50%;
  right: auto;
  top: -14px;
  bottom: auto;
  transform: translateX(-50%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 15px solid #111;
  border-top: 0;
}
.fb-white-box--speech[data-speech-tail="top"]::before,
.fb-white-box--speech[data-speech-tail="top-center"]::before {
  left: 50%;
  right: auto;
  top: -11px;
  bottom: auto;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--fb-speech-fill);
  border-top: 0;
}
.fb-white-box--speech[data-speech-tail="top-left"]::after {
  left: 16%;
  right: auto;
  top: -14px;
  bottom: auto;
  transform: none;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 15px solid #111;
  border-top: 0;
}
.fb-white-box--speech[data-speech-tail="top-left"]::before {
  left: calc(16% + 2px);
  right: auto;
  top: -11px;
  bottom: auto;
  transform: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--fb-speech-fill);
  border-top: 0;
}
.fb-white-box--speech[data-speech-tail="top-right"]::after {
  left: auto;
  right: 16%;
  top: -14px;
  bottom: auto;
  transform: none;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 15px solid #111;
  border-top: 0;
}
.fb-white-box--speech[data-speech-tail="top-right"]::before {
  left: auto;
  right: calc(16% + 2px);
  top: -11px;
  bottom: auto;
  transform: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--fb-speech-fill);
  border-top: 0;
}

/* Left edge (points toward speaker on the left) */
.fb-white-box--speech[data-speech-tail="left"]::after,
.fb-white-box--speech[data-speech-tail="left-center"]::after {
  left: -14px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 15px solid #111;
  border-left: 0;
}
.fb-white-box--speech[data-speech-tail="left"]::before,
.fb-white-box--speech[data-speech-tail="left-center"]::before {
  left: -11px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 12px solid var(--fb-speech-fill);
  border-left: 0;
}
.fb-white-box--speech[data-speech-tail="left-top"]::after {
  left: -14px;
  right: auto;
  top: 18%;
  bottom: auto;
  transform: none;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 15px solid #111;
  border-left: 0;
}
.fb-white-box--speech[data-speech-tail="left-top"]::before {
  left: -11px;
  right: auto;
  top: calc(18% + 2px);
  bottom: auto;
  transform: none;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 12px solid var(--fb-speech-fill);
  border-left: 0;
}
.fb-white-box--speech[data-speech-tail="left-bottom"]::after {
  left: -14px;
  right: auto;
  top: auto;
  bottom: 18%;
  transform: none;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 15px solid #111;
  border-left: 0;
}
.fb-white-box--speech[data-speech-tail="left-bottom"]::before {
  left: -11px;
  right: auto;
  top: auto;
  bottom: calc(18% + 2px);
  transform: none;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 12px solid var(--fb-speech-fill);
  border-left: 0;
}

/* Right edge */
.fb-white-box--speech[data-speech-tail="right"]::after,
.fb-white-box--speech[data-speech-tail="right-center"]::after {
  left: auto;
  right: -14px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid #111;
  border-right: 0;
}
.fb-white-box--speech[data-speech-tail="right"]::before,
.fb-white-box--speech[data-speech-tail="right-center"]::before {
  left: auto;
  right: -11px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid var(--fb-speech-fill);
  border-right: 0;
}
.fb-white-box--speech[data-speech-tail="right-top"]::after {
  left: auto;
  right: -14px;
  top: 18%;
  bottom: auto;
  transform: none;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid #111;
  border-right: 0;
}
.fb-white-box--speech[data-speech-tail="right-top"]::before {
  left: auto;
  right: -11px;
  top: calc(18% + 2px);
  bottom: auto;
  transform: none;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid var(--fb-speech-fill);
  border-right: 0;
}
.fb-white-box--speech[data-speech-tail="right-bottom"]::after {
  left: auto;
  right: -14px;
  top: auto;
  bottom: 18%;
  transform: none;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid #111;
  border-right: 0;
}
.fb-white-box--speech[data-speech-tail="right-bottom"]::before {
  left: auto;
  right: -11px;
  top: auto;
  bottom: calc(18% + 2px);
  transform: none;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid var(--fb-speech-fill);
  border-right: 0;
}

.fb-white-box--speech .fb-box-title,
.fb-white-box--speech .fb-box-body,
.fb-white-box--speech .fb-box-body p,
.fb-white-box--speech .fb-box-kicker {
  color: #111 !important;
  text-shadow: none !important;
}

.fb-white-box--speech .fb-box-body,
.fb-white-box--speech .fb-box-body p {
  font-family: var(--font-comic);
  /* Regular base so Quill partial bold can contrast (was always 700) */
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.fb-white-box--speech .fb-box-body strong,
.fb-white-box--speech .fb-box-body b {
  font-weight: 700 !important;
}
.fb-white-box--speech .fb-box-title {
  margin: 0 0 0.12rem;
  line-height: 1.15;
}
.fb-white-box--speech .fb-box-kicker,
.fb-white-box--speech .fb-box-loc {
  margin: 0 0 0.08rem;
  line-height: 1.15;
}
.fb-white-box--speech .fb-box-body > p,
.fb-white-box--speech .fb-box-body > p:last-child {
  margin: 0;
}

/* —— Tips without Q. (column page) —— */
.fb-box-tips {
  margin: 0.15rem 0 0;
}

.fb-box-tips p {
  margin: 0 0 0.55rem;
  line-height: 1.35;
}

.fb-box-tips p:last-child {
  margin-bottom: 0;
}

.fb-box-tips strong {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* —— Wrap body/tips around a left or right cutout portrait —— */
.fb-white-box--wrap-left,
.fb-white-box--wrap-right {
  overflow: hidden;
}

.fb-wrap-spacer {
  pointer-events: none;
  user-select: none;
  /* Invisible float that carves a portrait-shaped hole for text */
  background: transparent;
  shape-margin: 0.55rem;
}

/*
 * Taller portrait polygon (head + shoulders + legs) — hugs a standing cutout
 * better than a simple ellipse. Still an approximation; PNG cutout is tighter.
 */
.fb-wrap-spacer--left {
  float: left;
  width: 48%;
  height: 98%;
  min-height: 12rem;
  margin: 0 0.55rem 0.25rem 0;
  /* Standing figure approx: head, torso, hips, legs */
  shape-outside: polygon(
    8% 0%,
    42% 0%,
    52% 6%,
    58% 18%,
    62% 32%,
    72% 42%,
    78% 55%,
    74% 72%,
    68% 88%,
    62% 100%,
    0% 100%,
    0% 0%
  );
}

.fb-wrap-spacer--right {
  float: right;
  width: 48%;
  height: 98%;
  min-height: 12rem;
  margin: 0 0 0.25rem 0.55rem;
  shape-outside: polygon(
    92% 0%,
    58% 0%,
    48% 6%,
    42% 18%,
    38% 32%,
    28% 42%,
    22% 55%,
    26% 72%,
    32% 88%,
    38% 100%,
    100% 100%,
    100% 0%
  );
}

/* Visible PNG cutout float — best wrap: text follows alpha silhouette */
.fb-wrap-cutout {
  display: block;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  object-position: bottom center;
  shape-margin: 0.45rem;
  /* shape-image-threshold uses alpha; needs CORS-friendly image */
  shape-image-threshold: 0.15;
  max-width: 55%;
  height: auto;
  position: relative;
  z-index: 2;
}

.fb-wrap-cutout--left {
  float: left;
  width: 48%;
  margin: 0 0.5rem 0.2rem 0;
}

.fb-wrap-cutout--right {
  float: right;
  width: 48%;
  margin: 0 0 0.2rem 0.5rem;
}

/* Page-level cutout overlay (sits above photo + text plates) */
.fb-cutout-overlay {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.fb-white-box--wrap-left .fb-box-title,
.fb-white-box--wrap-left .fb-box-kicker,
.fb-white-box--wrap-right .fb-box-title,
.fb-white-box--wrap-right .fb-box-kicker {
  /* Keep heading full-width above the wrap flow */
  display: block;
  width: 100%;
  clear: none;
}

.fb-white-box--wrap-left .fb-box-body,
.fb-white-box--wrap-left .fb-box-tips,
.fb-white-box--wrap-right .fb-box-body,
.fb-white-box--wrap-right .fb-box-tips {
  display: block;
  /* Help multi-paragraph tips reflow around the float */
  overflow-wrap: break-word;
}

.fb-admin-bar-btn--crop {
  background: rgba(196, 92, 38, 0.35);
  border-color: rgba(196, 92, 38, 0.75);
}

.fb-admin-bar-btn--crop.fb-admin-bar-btn--active {
  background: #c45c26;
  border-color: #c45c26;
  color: #fff !important;
}

/* Keep in-page edit chips off the spread so they aren't clicked by accident */
body.fb-is-admin .fb-admin-edit-btn,
body.fb-is-admin .fb-edit-badge {
  display: none !important;
}

/* —— Live photo crop mode (admin) —— */
body.fb-is-cropping {
  cursor: default;
  user-select: none;
}

body.fb-is-cropping .stf__parent,
body.fb-is-cropping .stf__wrapper,
body.fb-is-cropping .stf__block,
body.fb-is-cropping .fb-page {
  touch-action: none !important;
}

/* Text plates sit above photos — punch through them so every photo is grabbable */
body.fb-is-cropping .fb-white-box,
body.fb-is-cropping .fb-cover-overlay,
body.fb-is-cropping .fb-page-kicker,
body.fb-is-cropping .fb-hashtags,
body.fb-is-cropping .fb-hashtag-chip {
  pointer-events: none !important;
  opacity: 0.28;
  filter: grayscale(0.2);
}

body.fb-is-cropping .fb-photo-layer {
  z-index: 30 !important;
  pointer-events: auto !important;
}

body.fb-is-cropping [data-fb-image-slot] {
  cursor: grab;
  outline: 2px dashed rgba(196, 92, 38, 0.95);
  outline-offset: -3px;
  pointer-events: auto !important;
  touch-action: none;
}

body.fb-is-cropping .fb-photo-grid-cell {
  overflow: hidden;
}

body.fb-is-cropping .fb-image-crop-active,
body.fb-is-cropping [data-fb-image-slot].fb-image-crop-active {
  outline-color: #c45c26;
  outline-style: solid;
  outline-width: 3px;
  cursor: grabbing;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

body.fb-is-cropping .fb-photo-full-img,
body.fb-is-cropping .fb-photo-grid-cell img,
body.fb-is-cropping .fb-photo-full {
  pointer-events: auto !important;
}

.fb-admin-crop-slot {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f3ebe1;
}

.fb-admin-zoom-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.fb-admin-zoom-row .fb-admin-image-zoom {
  flex: 1;
}

.fb-admin-zoom-btn {
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: #f3ebe1;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.fb-admin-zoom-btn:hover {
  background: rgba(196, 92, 38, 0.55);
  border-color: #c45c26;
}

.fb-admin-spread-focus-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.fb-admin-spread-focus-row .fb-admin-bar-btn {
  font-size: 0.72rem;
  padding: 0.4rem 0.35rem;
}

/* Which leaf of a double-page is the active edit target */
.fb-page.fb-page-edit-active {
  box-shadow: inset 0 0 0 3px rgba(61, 180, 230, 0.95);
}

/* Double-page bleed: one image spans both leaves (200% width).
   Contain the art (full designed page, including type on the photo).
   Never tile — leftover sides are the leaf colour, not extra copies. */
.fb-photo-layer--spread-bleed {
  overflow: hidden;
  background-color: #1a1714;
}

.fb-photo-layer--spread-bleed .fb-photo-full-img,
.fb-photo-layer--spread-bleed .fb-photo-full {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;
  max-width: none;
}

.fb-photo-layer--bleed-left .fb-photo-full-img,
.fb-photo-layer--bleed-left .fb-photo-full {
  left: 0;
}

.fb-photo-layer--bleed-right .fb-photo-full-img,
.fb-photo-layer--bleed-right .fb-photo-full {
  left: -100%;
}

.fb-photo-layer--spread-bleed .fb-photo-full {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.fb-photo-layer--spread-bleed .fb-photo-full-img {
  object-fit: contain;
  object-position: center;
}

/*
 * Double-page headline: same box rendered on left + right leaves.
 * Width is % of one leaf (use ~180–200 for full spread). Right leaf shifts left by −100%.
 */
.fb-white-box--spread-text {
  z-index: 7;
  overflow: visible;
  max-width: none !important;
  pointer-events: auto;
}

.fb-white-box--spread-text-right {
  /* Visual continuation only — clicks go to the left leaf’s arrange box */
  pointer-events: none;
}

.fb-white-box--spread-text .fb-box-title {
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.fb-admin-spread-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fb-admin-spread-options[hidden] {
  display: none !important;
}

.fb-page-kicker[data-fb-arrange] {
  position: absolute;
  z-index: 6;
}

/* StPageFlip mounts here */
#flipbook {
  margin: 0 auto;
}

/* Each page surface */
.fb-page {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  /* Chrome / pins scale to the leaf, not the browser viewport */
  container-type: size;
  container-name: fb-page;
}

/*
 * Magazine gutter / spine seam (open landscape spreads).
 * Softens the hard vertical join when left + right leaves show different photos —
 * reads as a bound crease rather than two rectangles butted together.
 * StPageFlip marks leaves with .stf__item.--left / .--right.
 */
body.fb-book-landscape .stf__item.--left > .fb-page::after,
body.fb-book-landscape .stf__item.--right > .fb-page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.1rem, 7.5%, 2.75rem);
  pointer-events: none;
  z-index: 28;
}

/* Left leaf: darkens into the spine (right edge) + faint paper curl highlight */
body.fb-book-landscape .stf__item.--left > .fb-page::after {
  right: 0;
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(12, 8, 6, 0.03) 22%,
      rgba(12, 8, 6, 0.1) 55%,
      rgba(8, 5, 4, 0.22) 82%,
      rgba(0, 0, 0, 0.34) 100%
    );
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.14),
    inset -6px 0 10px -4px rgba(0, 0, 0, 0.12);
}

/* Right leaf: mirror into the spine (left edge) */
body.fb-book-landscape .stf__item.--right > .fb-page::before {
  left: 0;
  background:
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0%,
      rgba(12, 8, 6, 0.03) 22%,
      rgba(12, 8, 6, 0.1) 55%,
      rgba(8, 5, 4, 0.22) 82%,
      rgba(0, 0, 0, 0.34) 100%
    );
  box-shadow:
    inset 1px 0 0 rgba(0, 0, 0, 0.14),
    inset 6px 0 10px -4px rgba(0, 0, 0, 0.12);
}

/*
 * Center spine valley — sits on the book block so both leaves share one crease.
 * Slight radial darkening mid-height sells the curved “trough” of an open magazine.
 */
body.fb-book-landscape .stf__block::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: clamp(10px, 2.2%, 22px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 45;
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 50%,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.1) 42%,
      rgba(0, 0, 0, 0) 72%
    ),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 248, 240, 0.06) 38%,
      rgba(0, 0, 0, 0.28) 49.5%,
      rgba(0, 0, 0, 0.38) 50%,
      rgba(0, 0, 0, 0.28) 50.5%,
      rgba(255, 248, 240, 0.06) 62%,
      rgba(255, 255, 255, 0) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.92;
}

/* Full-bleed photo spreads: keep a gentle crease so photos still feel bound,
   but don’t muddy continuous art as much */
body.fb-book-landscape .stf__item.--left > .fb-page:has(.fb-photo-layer--spread-bleed)::after,
body.fb-book-landscape .stf__item.--right > .fb-page:has(.fb-photo-layer--spread-bleed)::before {
  width: clamp(0.7rem, 4.5%, 1.6rem);
  opacity: 0.55;
}

body.fb-book-landscape .stf__block:has(.fb-photo-layer--spread-bleed)::after {
  opacity: 0.55;
  width: clamp(6px, 1.4%, 14px);
}

/*
 * Per-page opt-out (admin “Hide spine shadow”) — designed continuous art /
 * print-exact spreads that should read as one image across the gutter.
 */
body.fb-book-landscape .stf__item.--left > .fb-page.fb-page--no-spine::after,
body.fb-book-landscape .stf__item.--right > .fb-page.fb-page--no-spine::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Drop the shared center valley when any open leaf opts out */
body.fb-book-landscape .stf__block:has(.fb-page.fb-page--no-spine)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  background: none !important;
}



/* Headings use Eveleth like the main Sidetrack site */
.fb-page h1,
.fb-page h2,
.fb-page h3,
.fb-cover h1,
.fb-back h2,
.fb-section h2,
.fb-feature h3,
.fb-letter-block h3,
.fb-bobbin h3,
.fb-join .fb-next-box h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.fb-page--hard {
  background: #1f1814;
  color: #f7f0e6;
}

/* ---- Cover / back ---- */
.fb-cover {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8% 8% 10%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.fb-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 10, 8, 0.15) 0%,
    rgba(12, 10, 8, 0.25) 40%,
    rgba(12, 10, 8, 0.88) 100%
  );
}

.fb-cover > * {
  position: relative;
  z-index: 1;
}

.fb-kicker {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 0.75rem;
}

.fb-cover h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
  font-weight: 700;
}

.fb-cover .fb-sub {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  opacity: 0.95;
}

.fb-cover .fb-tagline {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 22ch;
  opacity: 0.92;
}

.fb-back {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10%;
  background:
    radial-gradient(circle at 50% 30%, #3a2a22 0%, transparent 50%),
    #1a1411;
  color: #f4ebe0;
}

.fb-back h2 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fb-back p {
  margin: 0.25rem 0;
  opacity: 0.88;
  font-family: var(--ui);
  font-size: 0.95rem;
}

.fb-back .fb-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ---- Interior text pages ---- */
.fb-inner {
  height: 100%;
  padding: 9% 8% 8%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.fb-inner h2 {
  margin: 0 0 0.75rem;
  font-size: 1.55rem;
  line-height: 1.15;
}

.fb-inner .fb-intro,
.fb-inner p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.fb-inner .fb-muted {
  color: var(--muted);
  font-family: var(--ui);
  font-size: 0.8rem;
}

.fb-toc {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  flex: 1;
}

.fb-toc li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(26, 23, 20, 0.2);
  font-size: 0.95rem;
  cursor: pointer;
}

.fb-toc li:hover {
  color: var(--accent);
}

.fb-toc .fb-page-num {
  font-family: var(--ui);
  font-size: 0.8rem;
  opacity: 0.65;
  white-space: nowrap;
}

.fb-letter p {
  font-size: 1rem;
  line-height: 1.5;
}

.fb-signoff {
  margin-top: auto !important;
  font-style: italic;
  opacity: 0.9;
}

/* Section divider */
.fb-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10%;
  background: linear-gradient(160deg, #2f5d50 0%, #1c3a32 55%, #142722 100%);
  color: #f6f0e6;
}

.fb-section .fb-emoji {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

.fb-section h2 {
  margin: 0 0 0.5rem;
  font-size: 2.2rem;
}

.fb-section p {
  margin: 0;
  max-width: 22ch;
  line-height: 1.4;
  opacity: 0.92;
  font-family: var(--ui);
  font-size: 0.95rem;
}

/* Feature (image-led) */
.fb-feature {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #111;
  color: #f7f0e6;
}

.fb-feature-media {
  flex: 1 1 68%;
  min-height: 0;
  position: relative;
  background: #1a1a1a center/cover no-repeat;
}

.fb-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-feature-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fb-feature-copy {
  flex: 0 0 auto;
  padding: 0.85rem 0.95rem 1rem;
  background: linear-gradient(180deg, #1c1713 0%, #120f0c 100%);
}

.fb-feature-section {
  font-family: var(--ui);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e0a070;
  margin: 0 0 0.35rem;
}

.fb-feature h3 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  line-height: 1.15;
}

.fb-feature .fb-loc {
  margin: 0 0 0.45rem;
  font-family: var(--ui);
  font-size: 0.75rem;
  opacity: 0.75;
}

.fb-feature .fb-caption {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
  opacity: 0.95;
}

.fb-feature a.fb-link {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: #f0c9a8;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 201, 168, 0.45);
}

.fb-feature a.fb-link:hover {
  color: #fff;
}

/* Exclusive / list / cta */
.fb-exclusive {
  background: #fff7ee;
}

.fb-exclusive .fb-kicker {
  color: var(--accent);
  font-family: var(--ui);
}

.fb-exclusive ul,
.fb-list ul {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1.1rem;
  flex: 1;
}

.fb-exclusive li,
.fb-list li {
  margin: 0 0 0.55rem;
  line-height: 1.35;
  font-size: 0.95rem;
}

.fb-footer-note {
  margin-top: auto !important;
  font-family: var(--ui);
  font-size: 0.72rem;
  color: var(--muted);
}

.fb-list-item-action {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-right: 0.35rem;
}

.fb-cta {
  background: linear-gradient(165deg, #c45c26 0%, #8a3a14 100%);
  color: #fffaf5;
  justify-content: center;
  text-align: left;
}

.fb-cta h2 {
  font-size: 2rem;
}

.fb-cta p {
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 24ch;
}

.fb-cta a.fb-btn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #8a3a14;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ---- Full-bleed photo + white text box (primary layout) ---- */
.fb-photo-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1a1714;
}

.fb-photo-full {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #2a2420;
}

.fb-photo-full-img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Full-bleed photo with experience-style focal point + zoom */
.fb-photo-full-img--cover {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, object-position;
}

/* Finished A4 art (cover / back cover): show the whole file. Do not apply
   this to Print exact photo pages — those keep object-fit:cover + crop. */
.fb-photo-page--cover .fb-photo-full-img--cover,
.fb-page[data-page-id] .fb-photo-page--cover .fb-photo-full-img {
  object-fit: contain;
  object-position: center center;
  background: #111;
}

/*
 * Fixed page chrome — kicker / roundel / engagement / full story
 * Variants + sizes from issue chromeStyle; roundel geom from page chromeLayout
 */
.fb-page-chrome {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.fb-chrome-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  /* Size relative to A4 leaf (cqi) with solid rem floors — was too small on A4 */
  font-size: clamp(0.72rem, 3.6cqi, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  max-width: 100%;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.fb-chrome-pill.fb-chrome--size-s {
  padding: 0.36rem 0.68rem;
  font-size: clamp(0.64rem, 3.1cqi, 0.82rem);
}
.fb-chrome-pill.fb-chrome--size-l {
  padding: 0.55rem 1.05rem;
  font-size: clamp(0.82rem, 4.2cqi, 1.1rem);
}

.fb-chrome-pill.fb-chrome--light {
  background: rgba(255, 255, 255, 0.94);
  color: #111 !important;
  border-color: transparent;
}
.fb-chrome-pill.fb-chrome--dark {
  background: #111;
  color: #fff !important;
  border-color: #111;
}
.fb-chrome-pill.fb-chrome--outline {
  background: rgba(255, 255, 255, 0.88);
  color: #111 !important;
  border-color: #111;
}

.fb-chrome-kicker {
  position: absolute;
  top: 3%;
  left: 3.2%;
  max-width: 52%;
  pointer-events: none;
  z-index: 13;
}

.fb-chrome-kicker-text {
  /* base; variants above win */
}

/* Roundel: position set inline from issue defaults / page chromeLayout */
.fb-chrome-roundel-wrap {
  position: absolute;
  top: 2%;
  right: 2.2%;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
  z-index: 13;
  box-sizing: border-box;
}

.fb-chrome-roundel-svg {
  display: block;
  overflow: visible;
  height: auto;
  max-width: none;
  width: 100%;
  height: 100%;
}

/* —— Dish pins (click dishes on a spread → linked to-do popup) —— */
.fb-dish-pins-layer {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  /* Page overflow:hidden + 3D flip transforms clip 0×0 markers; keep dots */
  overflow: visible;
}
.fb-dish-pin {
  position: absolute;
  /* Real hit box, centered on top/left %. `width: 0` + flex clipped the dots
     (same bug the website pins already fixed with a 44px box). */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  overflow: visible;
  z-index: 15;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  isolation: isolate;
  touch-action: none; /* allow arrange drag without page scroll */
  max-width: none;
}
.fb-dish-pin-hit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: block;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  /* Transparent fill still receives hover when the painted dot is tiny */
  background: rgba(0, 0, 0, 0.001);
}
.fb-dish-pin-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #111;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 1px 4px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Larger hit target + grab affordance while arranging */
body.fb-is-arranging .fb-dish-pins-layer {
  z-index: 41;
  overflow: visible;
}
body.fb-is-arranging .fb-dish-pin {
  cursor: grab;
}
body.fb-is-arranging .fb-dish-pin.fb-arrange-dragging {
  cursor: grabbing;
  z-index: 50 !important;
}
body.fb-is-arranging .fb-dish-pin-dot {
  width: 16px;
  height: 16px;
}
/* × sits on the dot (not the label), only when that pin is selected — stays on-page */
.fb-dish-pin-remove {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: #c0392b;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  padding: 0;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
body.fb-is-arranging .fb-dish-pin.fb-text-selected .fb-dish-pin-remove,
body.fb-is-arranging .fb-dish-pin:hover .fb-dish-pin-remove {
  display: inline-flex;
}
.fb-dish-pin-remove:hover {
  background: #a93226;
}
.fb-dish-pin-label {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 50%;
  font-family: var(--font-sans);
  font-size: clamp(0.55rem, 1.6vw, 0.72rem);
  font-weight: 700;
  line-height: 1.15;
  color: #111;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Name only appears on hover / list spotlight / arrange */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s, border-color 0.14s;
  pointer-events: none;
}
.fb-dish-pin:hover .fb-dish-pin-dot,
.fb-dish-pin:focus-visible .fb-dish-pin-dot,
.fb-dish-pin.is-spotlight .fb-dish-pin-dot {
  background: #0a6c9c;
  border-color: #0a6c9c;
  box-shadow: 0 0 0 5px rgba(10, 108, 156, 0.28), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.fb-dish-pin:hover .fb-dish-pin-label,
.fb-dish-pin:focus-visible .fb-dish-pin-label,
.fb-dish-pin.is-spotlight .fb-dish-pin-label,
body.fb-is-arranging .fb-dish-pin-label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  border-color: #0a6c9c;
}
.fb-dish-pin.is-spotlight {
  z-index: 40 !important;
}
.fb-photo-pin--place.fb-dish-pin:hover .fb-dish-pin-dot,
.fb-photo-pin--place.fb-dish-pin:focus-visible .fb-dish-pin-dot,
.fb-photo-pin--place.fb-dish-pin.is-spotlight .fb-dish-pin-dot {
  background: #1a7a4c;
  border-color: #1a7a4c;
  box-shadow: 0 0 0 5px rgba(26, 122, 76, 0.28), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.fb-photo-pin--place.fb-dish-pin:hover .fb-dish-pin-label,
.fb-photo-pin--place.fb-dish-pin:focus-visible .fb-dish-pin-label,
.fb-photo-pin--place.fb-dish-pin.is-spotlight .fb-dish-pin-label,
body.fb-is-arranging .fb-photo-pin--place .fb-dish-pin-label {
  border-color: #1a7a4c;
}
.fb-photo-pin--people.fb-dish-pin:hover .fb-dish-pin-dot,
.fb-photo-pin--people.fb-dish-pin:focus-visible .fb-dish-pin-dot,
.fb-photo-pin--people.fb-dish-pin.is-spotlight .fb-dish-pin-dot {
  background: #c45c26;
  border-color: #c45c26;
  box-shadow: 0 0 0 5px rgba(196, 92, 38, 0.28), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.fb-photo-pin--people.fb-dish-pin:hover .fb-dish-pin-label,
.fb-photo-pin--people.fb-dish-pin:focus-visible .fb-dish-pin-label,
.fb-photo-pin--people.fb-dish-pin.is-spotlight .fb-dish-pin-label,
body.fb-is-arranging .fb-photo-pin--people .fb-dish-pin-label {
  border-color: #c45c26;
}
.fb-photo-pin--fashion.fb-dish-pin:hover .fb-dish-pin-dot,
.fb-photo-pin--fashion.fb-dish-pin:focus-visible .fb-dish-pin-dot,
.fb-photo-pin--fashion.fb-dish-pin.is-spotlight .fb-dish-pin-dot {
  background: #8b3a62;
  border-color: #8b3a62;
  box-shadow: 0 0 0 5px rgba(139, 58, 98, 0.28), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.fb-photo-pin--fashion.fb-dish-pin:hover .fb-dish-pin-label,
.fb-photo-pin--fashion.fb-dish-pin:focus-visible .fb-dish-pin-label,
.fb-photo-pin--fashion.fb-dish-pin.is-spotlight .fb-dish-pin-label,
body.fb-is-arranging .fb-photo-pin--fashion .fb-dish-pin-label {
  border-color: #8b3a62;
}
.fb-entity-pin-roles {
  margin: 0 0 0.55rem;
}
.fb-entity-pin-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.fb-entity-pin-role-chips .fb-admin-bar-btn.is-active {
  background: #8b3a62;
  border-color: #8b3a62;
  color: #fff;
}
body.fb-is-arranging .fb-dish-pin[data-fb-arrange] {
  outline: none;
  box-shadow: none;
  border-radius: 999px;
}
body.fb-is-arranging .fb-dish-pin.fb-text-selected .fb-dish-pin-hit,
body.fb-is-arranging .fb-dish-pin[data-fb-arrange] .fb-dish-pin-hit {
  outline: 2px dashed rgba(10, 108, 156, 0.9);
  outline-offset: 2px;
  border-radius: 999px;
}
body.fb-is-arranging .fb-dish-pin.fb-text-selected .fb-dish-pin-hit {
  outline-style: solid;
}
body.fb-is-arranging.fb-dish-pin-place .fb-photo-page,
body.fb-is-arranging.fb-entity-pin-place .fb-photo-page {
  cursor: crosshair;
}
#fb-admin-add-dish-pin.is-active,
#fb-admin-add-place-pin.is-active,
#fb-admin-add-people-pin.is-active,
#fb-admin-toggle-dish-list.is-active {
  background: #0a6c9c;
  border-color: #0a6c9c;
  color: #fff;
}

/* Auto dish list plate — hover a name to spotlight its pin on the photo */
.fb-dish-list {
  position: absolute;
  z-index: 16;
  pointer-events: auto;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  max-height: 70%;
  overflow: auto;
  touch-action: manipulation;
  /* Arrange style tokens */
  --fb-dish-list-scale: 1;
  --fb-dish-list-color: #1a1a1a;
  --fb-dish-list-font: var(--font-sans);
  font-family: var(--fb-dish-list-font);
  color: var(--fb-dish-list-color);
}
.fb-dish-list.fb-dish-list--nofill {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.fb-dish-list.fb-text-shadow .fb-dish-list-title,
.fb-dish-list.fb-text-shadow .fb-dish-list-item {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 6px rgba(0, 0, 0, 0.2);
}
.fb-dish-list-title {
  margin: 0 0 0.4rem;
  font-family: inherit;
  font-size: calc(clamp(0.72rem, 1.8vw, 0.9rem) * var(--fb-dish-list-scale, 1));
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: inherit;
}
.fb-dish-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fb-dish-list-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 0.32rem 0.4rem;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(clamp(0.68rem, 1.55vw, 0.84rem) * var(--fb-dish-list-scale, 1));
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.fb-dish-list-item:hover,
.fb-dish-list-item:focus-visible,
.fb-dish-list-item.is-active {
  background: rgba(10, 108, 156, 0.1);
  color: #0a6c9c;
  outline: none;
}
.fb-dish-list-num {
  flex: 0 0 auto;
  font-size: 0.78em;
  font-weight: 800;
  color: #0a6c9c;
  min-width: 1.1em;
}
.fb-dish-list-name {
  min-width: 0;
}
body.fb-is-arranging .fb-dish-list {
  cursor: grab;
}
body.fb-is-arranging .fb-dish-list.fb-text-selected {
  outline: 2px solid #0a6c9c;
  outline-offset: 3px;
}

/* Menu prices overlay — receipt typeface, no till-slip chrome */
.fb-receipt {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: "Courier New", Courier, monospace;
  font-size: calc(clamp(0.62rem, 1.7cqi, 0.8rem) * var(--fb-receipt-scale, var(--fb-text-scale, 1)));
  line-height: 1.35;
  color: var(--fb-receipt-color, #111);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.45);
  transform-origin: top left;
  --fb-receipt-scale: 1;
  --fb-receipt-color: #111;
}
body.fb-is-arranging .fb-receipt {
  pointer-events: auto;
  cursor: grab;
}
body.fb-is-arranging .fb-receipt.fb-text-selected {
  outline: 2px solid #0a6c9c;
  outline-offset: 3px;
}
.fb-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.12em;
}
.fb-receipt-name {
  min-width: 0;
  font-family: inherit;
  font-weight: 400;
}
.fb-receipt-price {
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

/* Public dish-pin popup (hover + click modal) */
.fb-dish-todo-popup {
  border: 0;
  padding: 0;
  max-width: min(92vw, 22rem);
  background: transparent;
  z-index: 10050;
}
.fb-dish-todo-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.fb-dish-todo-popup.fb-dish-todo-popup--hover {
  max-width: min(92vw, 18rem);
}
.fb-dish-todo-popup.fb-dish-todo-popup--hover::backdrop {
  background: transparent;
  pointer-events: none;
}
.fb-dish-todo-popup-panel {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  padding: 0.9rem 0.95rem 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.fb-dish-todo-popup-close {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  z-index: 2;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
.fb-dish-todo-popup-media {
  margin: -0.9rem -0.95rem 0.75rem;
  line-height: 0;
}
.fb-dish-todo-popup-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fb-dish-todo-popup-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
}
.fb-dish-todo-popup-title {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
  line-height: 1.25;
}
.fb-dish-todo-popup-meta {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: #555;
}
.fb-dish-todo-popup-desc {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #444;
}
.fb-dish-todo-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.fb-dish-todo-popup-actions .fb-dish-todo-btn {
  appearance: none;
  border: 1px solid #c5dceb;
  background: #f7fcfe;
  color: #0a6c9c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}
.fb-dish-todo-popup-actions .fb-dish-todo-btn.is-active {
  background: #0a6c9c;
  border-color: #0a6c9c;
  color: #fff;
}
.fb-dish-todo-popup-link {
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0a6c9c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Todo search modal for linking a pin */
.fb-dish-pin-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 20, 30, 0.45);
}
.fb-dish-pin-modal[hidden] {
  display: none !important;
}
.fb-dish-pin-dialog {
  width: min(28rem, 96vw);
  max-height: min(80vh, 32rem);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.fb-dish-pin-results {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fb-dish-pin-results button {
  width: 100%;
  text-align: left;
  border: 1px solid #d5e7f0;
  border-radius: 8px;
  background: #f7fcfe;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.fb-dish-pin-results button:hover {
  border-color: #0a6c9c;
}
.fb-dish-pin-results button.is-pinned {
  opacity: 0.48;
  cursor: not-allowed;
  background: #f0f0f0;
  border-color: #ddd;
  color: #777;
}
.fb-dish-pin-results button.is-pinned:hover {
  border-color: #ddd;
}
.fb-dish-pin-results .fb-dish-pin-already {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fb-dish-pin-results .muted {
  display: block;
  font-size: 0.78rem;
  color: #6a8fa3;
  margin-top: 0.15rem;
}
.fb-dish-pin-results-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: #555;
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.15rem;
}

/* Arrange mode: drag/resize the LU roundel like a text plate */
body.fb-is-arranging .fb-chrome-roundel-wrap[data-fb-arrange] {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
body.fb-is-arranging .fb-chrome-roundel-wrap[data-fb-arrange]:active,
body.fb-is-arranging .fb-chrome-roundel-wrap.fb-arrange-dragging {
  cursor: grabbing;
}
body.fb-is-arranging .fb-chrome-roundel-wrap.fb-text-selected {
  outline: 2px solid #0a6c9c;
  outline-offset: 3px;
  z-index: 40;
}
body.fb-is-arranging .fb-chrome-roundel-wrap .fb-arrange-handle {
  pointer-events: auto;
}

.fb-chrome-engagement {
  position: absolute;
  left: 3%;
  bottom: 3%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.72rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: clamp(0.68rem, 3.2cqi, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  max-width: 46%;
  flex-wrap: wrap;
  z-index: 13;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.fb-chrome-engagement.fb-chrome--size-s {
  padding: 0.32rem 0.55rem;
  font-size: clamp(0.6rem, 2.8cqi, 0.76rem);
}
.fb-chrome-engagement.fb-chrome--size-l {
  padding: 0.48rem 0.9rem;
  font-size: clamp(0.76rem, 3.8cqi, 1rem);
}

.fb-chrome-engagement.fb-chrome--dark {
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
}
.fb-chrome-engagement.fb-chrome--light {
  background: rgba(255, 255, 255, 0.94);
  color: #111;
}
.fb-chrome-engagement.fb-chrome--outline {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  border-color: #111;
}

a.fb-chrome-engagement.fb-chrome--dark:hover {
  background: rgba(17, 17, 17, 0.94);
  color: #fff;
}
a.fb-chrome-engagement.fb-chrome--light:hover,
a.fb-chrome-engagement.fb-chrome--outline:hover {
  background: #fff;
  color: #111;
}

.fb-chrome-eng-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.fb-chrome-eng-ico {
  opacity: 0.9;
  font-size: 0.85em;
}

/*
 * Full story CTA sits toward the spine (gutter), not the outer corners —
 * bottom-right on left leaves / bottom-left on right leaves — so it does not
 * steal the page-flip corner hit targets.
 */
.fb-chrome-full-story {
  position: absolute;
  bottom: 3%;
  right: 3%;
  left: auto;
  text-decoration: none !important;
  pointer-events: auto;
  z-index: 13;
}

/* Right-hand leaf: outer turn is bottom-right → CTA on the left (gutter) */
.stf__item.--right .fb-chrome-full-story,
.fb-page[data-page-side="right"] .fb-chrome-full-story {
  right: auto;
  left: 3%;
}

/* Left-hand leaf: outer turn is bottom-left → CTA on the right (gutter) */
.stf__item.--left .fb-chrome-full-story,
.fb-page[data-page-side="left"] .fb-chrome-full-story {
  left: auto;
  right: 3%;
}

/* Right leaf often also has engagement bottom-left — stack Full story above it */
.stf__item.--right .fb-page-chrome:has(.fb-chrome-engagement) .fb-chrome-full-story,
.fb-page[data-page-side="right"] .fb-page-chrome:has(.fb-chrome-engagement) .fb-chrome-full-story {
  bottom: calc(3% + 2.65rem);
}

.fb-chrome-full-story.fb-chrome--dark {
  background: #111;
  color: #fff !important;
}
.fb-chrome-full-story.fb-chrome--light {
  background: rgba(255, 255, 255, 0.95);
  color: #111 !important;
}
.fb-chrome-full-story.fb-chrome--outline {
  background: rgba(255, 255, 255, 0.9);
  color: #111 !important;
  border-color: #111;
}

.fb-chrome-full-story.fb-chrome--dark:hover {
  background: #0a6c9c;
  color: #fff !important;
}
.fb-chrome-full-story.fb-chrome--light:hover,
.fb-chrome-full-story.fb-chrome--outline:hover {
  background: #0a6c9c;
  color: #fff !important;
  border-color: #0a6c9c;
}

.fb-page--print-exact .fb-chrome-pill.fb-chrome--light {
  background: rgba(255, 255, 255, 0.96);
}

/*
 * PRINT EXACT superpower
 * Main text plate hidden. Image framing matches photo mode (cover + crop)
 * on an A4 leaf so toggling Print exact never changes page size.
 */
.fb-page--print-exact .fb-photo-page--print-exact,
.fb-photo-layer--print-exact {
  background: var(--paper, #f7f1e8);
}

.fb-photo-full--print-exact {
  /* Same cover framing as photo mode — do not force contain or clear bg */
  background-color: var(--paper, #f7f1e8);
}

.fb-page--print-exact .fb-white-box:not(.fb-white-box--speech):not([data-fb-box-index]) {
  /* Main plate suppressed in JS; keep any accidental leftover dim */
}

.fb-admin-print-exact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(196, 92, 38, 0.25);
  border: 1px solid rgba(196, 92, 38, 0.7);
  color: #f7e6d8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fb-photo-full--soft {
  background: linear-gradient(165deg, #d2f3fc 0%, #f7f1e8 45%, #fffaf3 100%);
}

.fb-photo-full--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Magazine photo grids (2–10). A4 portrait page — mosaic layouts. */
.fb-photo-grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 3px;
  background: #0c0a09;
  padding: 0;
}

.fb-photo-grid-cell {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: #1a1614;
}

/* Photo caption — bottom-right credit / note on the image */
.fb-photo-caption {
  position: absolute;
  right: 2.8%;
  bottom: 2.8%;
  z-index: 6;
  max-width: min(62%, 14rem);
  margin: 0;
  padding: 0.28rem 0.55rem;
  font-family: var(--font-sans);
  font-size: clamp(0.52rem, 1.55vw, 0.7rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: right;
  background: rgba(12, 10, 9, 0.58);
  border-radius: 0.3rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.fb-photo-caption--cell {
  right: 4%;
  bottom: 4%;
  max-width: 78%;
  font-size: clamp(0.48rem, 1.35vw, 0.62rem);
  padding: 0.22rem 0.42rem;
}
/* Sit above photo; stay under page chrome (full story) when both show */
.fb-photo-layer {
  position: relative;
}
body.fb-is-cropping .fb-photo-caption {
  opacity: 0.35;
}

.fb-photo-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform, object-position;
}

/* 2 — side by side (horizontal) or stacked (vertical) */
.fb-photo-grid--2,
.fb-photo-grid--2.fb-photo-grid--horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.fb-photo-grid--2.fb-photo-grid--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 3 — hero on top, two below (horizontal); three stacked (vertical) */
.fb-photo-grid--3,
.fb-photo-grid--3.fb-photo-grid--horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.25fr 1fr;
}
.fb-photo-grid--3 .fb-photo-grid-cell--1 {
  grid-column: 1 / -1;
}
.fb-photo-grid--3.fb-photo-grid--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.fb-photo-grid--3.fb-photo-grid--vertical .fb-photo-grid-cell--1 {
  grid-column: auto;
}

/* 4 — 2×2 (horizontal) or 4 stacked (vertical) */
.fb-photo-grid--4,
.fb-photo-grid--4.fb-photo-grid--horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.fb-photo-grid--4.fb-photo-grid--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
}

/* 5 — two on top, three below */
.fb-photo-grid--5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1.15fr 1fr;
}
.fb-photo-grid--5 .fb-photo-grid-cell--1,
.fb-photo-grid--5 .fb-photo-grid-cell--2 {
  grid-column: span 3;
}
.fb-photo-grid--5 .fb-photo-grid-cell--3,
.fb-photo-grid--5 .fb-photo-grid-cell--4,
.fb-photo-grid--5 .fb-photo-grid-cell--5 {
  grid-column: span 2;
}

/* 6 — 2×3 (horizontal) or 3×2 (vertical-ish columns) */
.fb-photo-grid--6,
.fb-photo-grid--6.fb-photo-grid--horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.fb-photo-grid--6.fb-photo-grid--vertical {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 7 — hero top + two rows of three */
.fb-photo-grid--7 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1.2fr 1fr 1fr;
}
.fb-photo-grid--7 .fb-photo-grid-cell--1 {
  grid-column: 1 / -1;
}
.fb-photo-grid--7 .fb-photo-grid-cell--2,
.fb-photo-grid--7 .fb-photo-grid-cell--3,
.fb-photo-grid--7 .fb-photo-grid-cell--4,
.fb-photo-grid--7 .fb-photo-grid-cell--5,
.fb-photo-grid--7 .fb-photo-grid-cell--6,
.fb-photo-grid--7 .fb-photo-grid-cell--7 {
  grid-column: span 2;
}

/* 8 — 2×4 */
.fb-photo-grid--8 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
}

/* 9 — 3×3 */
.fb-photo-grid--9 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* 10 — four on top, three + three below */
.fb-photo-grid--10 {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1.05fr 1fr 1fr;
}
.fb-photo-grid--10 .fb-photo-grid-cell--1,
.fb-photo-grid--10 .fb-photo-grid-cell--2,
.fb-photo-grid--10 .fb-photo-grid-cell--3,
.fb-photo-grid--10 .fb-photo-grid-cell--4 {
  grid-column: span 3;
}
.fb-photo-grid--10 .fb-photo-grid-cell--5,
.fb-photo-grid--10 .fb-photo-grid-cell--6,
.fb-photo-grid--10 .fb-photo-grid-cell--7,
.fb-photo-grid--10 .fb-photo-grid-cell--8,
.fb-photo-grid--10 .fb-photo-grid-cell--9,
.fb-photo-grid--10 .fb-photo-grid-cell--10 {
  grid-column: span 4;
}

/* Text content box on top of photos — solid white, square corners by default */
.fb-white-box {
  position: absolute;
  left: 6%;
  right: 6%;
  z-index: 5;
  padding: 0.7rem 0.8rem 0.75rem;
  background: #ffffff;
  color: #111;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}

/* Text on photo — no white panel behind copy */
.fb-white-box--nofill {
  background: transparent !important;
  box-shadow: none !important;
  color: #000;
  /* Soft white edge so black type stays readable on busy photos */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.85),
    1px 1px 2px rgba(255, 255, 255, 0.9);
}

.fb-white-box--nofill .fb-box-kicker,
.fb-white-box--nofill .fb-box-title,
.fb-white-box--nofill .fb-box-loc,
.fb-white-box--nofill .fb-box-body,
.fb-white-box--nofill .fb-box-note,
.fb-white-box--nofill .fb-box-link,
.fb-white-box--nofill .fb-box-list,
.fb-white-box--nofill .fb-box-meta,
.fb-white-box--nofill .fb-box-subhead,
.fb-white-box--nofill .fb-toc,
.fb-white-box--nofill .fb-toc li,
.fb-white-box--nofill .fb-page-num,
.fb-white-box--nofill .fb-bobbin,
.fb-white-box--nofill .fb-bobbin strong,
.fb-white-box--nofill .fb-bobbin p,
.fb-white-box--nofill .fb-letter-block,
.fb-white-box--nofill .fb-letter-body,
.fb-white-box--nofill .fb-letter-body p,
.fb-white-box--nofill .fb-letter-signoff {
  color: inherit;
  text-shadow: inherit;
}

/* Letter / TOC on photo: truly invisible plate — no white fog “box” halo */
.fb-contents-letter-plate.fb-white-box--nofill,
.fb-contents-toc.fb-white-box--nofill {
  background: transparent !important;
  box-shadow: none !important;
  /* Keep arranged colour; soft dark edge only (white halo looked like a box) */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 0 4px rgba(0, 0, 0, 0.2);
}

.fb-contents-letter-plate.fb-white-box--nofill .fb-box-title,
.fb-contents-letter-plate.fb-white-box--nofill .fb-letter-body,
.fb-contents-letter-plate.fb-white-box--nofill .fb-letter-body p,
.fb-contents-letter-plate.fb-white-box--nofill .fb-letter-signoff,
.fb-contents-toc.fb-white-box--nofill .fb-box-title,
.fb-contents-toc.fb-white-box--nofill .fb-toc,
.fb-contents-toc.fb-white-box--nofill .fb-toc li,
.fb-contents-toc.fb-white-box--nofill .fb-page-num {
  background: transparent !important;
  text-shadow: inherit;
}

.fb-white-box--sheet.fb-white-box--nofill {
  background: transparent !important;
}

.fb-white-box--nofill .fb-box-link {
  border-bottom-color: rgba(0, 0, 0, 0.35);
}

.fb-white-box--bottom {
  bottom: 5%;
}

.fb-white-box--top {
  top: 5%;
}

.fb-white-box--center {
  top: 50%;
  transform: translateY(-50%);
  max-height: 70%;
}

.fb-white-box--sheet {
  inset: 5% 5% 5% 5%;
  max-height: none;
  transform: none;
}

.fb-white-box--cover {
  background: #ffffff;
  border-radius: 0;
}

/* Numeric layout (top/left/right/bottom/width/height as % of page) — set via inline style */
.fb-white-box--custom {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  transform: none;
}

.fb-white-box--custom[style*="height:"] {
  max-height: none;
  overflow: visible;
}

/* Hug content: plate is only as tall as chips / copy (chef cards, etc.) */
.fb-white-box--hug,
.fb-white-box[data-fb-hug="1"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.fb-white-box--hug .fb-box-cards,
.fb-white-box[data-fb-hug="1"] .fb-box-cards {
  margin-top: 0.25rem;
}

/*
 * Admin restore chip when a text plate is hidden (full-bleed image).
 * Hidden in normal preview — only appears in Arrange text mode so admins
 * can find “Hide” / uncheck it without ruining the page look.
 */
.fb-white-box--hidden-marker,
.fb-cover-hidden-marker {
  display: none !important;
  left: auto;
  right: 0.5rem;
  bottom: 0.5rem;
  top: auto;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

body.fb-is-admin.fb-is-arranging .fb-white-box--hidden-marker,
body.fb-is-admin.fb-is-arranging .fb-cover-hidden-marker {
  display: block !important;
  pointer-events: auto;
}

/* ---- Magazine cover (Issue 1 style): photo + floating type ---- */
.fb-page--hard .fb-photo-page--cover {
  background: #f4f4f4;
}

.fb-photo-page--cover .fb-photo-full--placeholder {
  background: #f0f0f0;
  color: #333;
}

.fb-photo-page--cover .fb-photo-full--placeholder .fb-ph-inner {
  color: #333;
}

.fb-photo-page--cover .fb-photo-full--placeholder .fb-ph-inner strong {
  color: #111;
}

/* Cover type only — logo + big title are baked into the photo */
.fb-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: #000;
}

.fb-cover-overlay .fb-admin-edit-btn {
  pointer-events: auto;
  top: 8%;
  right: 4%;
}

/* Shared solid white plate look — position via inline style (page %) */
.fb-cover-plate,
.fb-cover-issue-plate {
  position: absolute;
  display: inline-block;
  width: max-content;
  max-width: 92%;
  margin: 0;
  padding: 5px 7px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  color: #000;
  text-shadow: none;
  box-sizing: border-box;
}

.fb-cover-issue-plate {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.58rem, 2.1vw, 0.82rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Cover text on photo (no white panel) */
.fb-cover-plate--nofill,
.fb-cover-issue-plate.fb-cover-plate--nofill {
  background: transparent !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.85),
    1px 1px 2px rgba(255, 255, 255, 0.9);
}

/*
 * Romance deck + left exclusive sit on pale sky / busy art — dual shadow so they
 * stay readable full-size and as IG/thumbnail crops (not pure white halo only).
 */
.fb-cover-plate--nofill.fb-cover-deck,
.fb-cover-plate--nofill.fb-cover-exclusive {
  text-shadow:
    0 1px 2px rgba(20, 16, 12, 0.42),
    0 0 1px rgba(20, 16, 12, 0.35),
    0 0 12px rgba(255, 248, 236, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.55);
}

.fb-cover-issue-line {
  display: block;
}

.fb-cover-exclusive {
  font-family: var(--font-sans);
  font-weight: 700;
  /* Higher floor so left tagline survives thumb / Stories / IG crop */
  font-size: clamp(0.78rem, 2.6vw, 0.98rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.22;
}

.fb-cover-deck {
  font-family: var(--font-sans);
  font-weight: 700;
  /* Romance subhead — slightly larger min so champagne type still punches small */
  font-size: clamp(0.9rem, 3.1vw, 1.18rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* Bottom line — nearly full width, single line (when left+right set) */
.fb-cover-footer {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.48rem, 1.7vw, 0.72rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.fb-box-kicker {
  margin: 0 0 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* Kicker pinned to the page (outside the white text box) */
.fb-page-kicker {
  position: absolute;
  z-index: 6;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.55rem, 1.8vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  max-width: 70%;
}

.fb-page-kicker--top-left {
  top: 3.5%;
  left: 4%;
}

.fb-box-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111;
}

.fb-box-title--lg {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.fb-box-title--sm {
  font-size: 1.05rem;
}

.fb-box-loc {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: #555;
}

.fb-box-body {
  margin: 0 0 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #111;
}

/* Nested paragraphs from htmlFromPlainText — modest gap between real
   paragraphs; soft line breaks use <br> and stay tight (line-height only). */
.fb-box-body > p,
.fb-letter-body > p,
.fb-white-box .fb-box-body > p {
  margin: 0 0 0.3em;
}
.fb-box-body > p:last-child,
.fb-letter-body > p:last-child,
.fb-white-box .fb-box-body > p:last-child {
  margin-bottom: 0;
}

.fb-box-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 108, 156, 0.35);
}

.fb-box-link:hover {
  color: #085a82;
}

.fb-box-note {
  margin: 0.45rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: #666;
}

.fb-box-list {
  margin: 0.35rem 0 0.45rem;
  padding: 0 0 0 1.05rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.35;
}

.fb-box-subhead {
  margin: 0.4rem 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #444;
}

.fb-box-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: #666;
  margin: 0 0 0.35rem;
}

.fb-box-cards {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fb-box-cards li,
.fb-box-cards .fb-box-card {
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: #f4f7f9;
  font-family: var(--font-sans);
  font-size: 0.8rem;
}

.fb-box-cards a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.fb-box-cards a:hover {
  color: var(--accent-2);
}

/* Event / chef cards: main photo as a thumb beside the title */
.fb-box-cards .fb-box-card--image {
  padding: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: auto;
  min-height: 0;
  background: #f4f7f9;
}

.fb-box-card--image > a {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: auto;
  color: inherit;
  gap: 0;
}

.fb-box-card--image .fb-box-card-media {
  display: block;
  flex: 0 0 5.4rem;
  width: 5.4rem;
  min-width: 5.4rem;
  height: 4.35rem;
  background: #dce4ea;
}

.fb-box-card--image .fb-box-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fb-box-card--image .fb-box-card-caption {
  position: static;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  padding: 0.35rem 0.55rem;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: 1.25;
  pointer-events: none;
}

.fb-box-card--image .fb-box-card-caption strong {
  font-weight: 700;
  font-size: inherit;
}

.fb-box-card--image .fb-box-card-caption span {
  opacity: 0.82;
}

.fb-box-card--image-only {
  aspect-ratio: 4 / 3;
  background: #dce4ea;
}

.fb-box-card--image-only > a,
.fb-box-card--image-only .fb-box-card-media {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Arrange: card photo picker modal */
.fb-card-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 12, 18, 0.55);
}

.fb-card-photo-modal[hidden] {
  display: none !important;
}

.fb-card-photo-dialog {
  width: min(36rem, 100%);
  max-height: min(88vh, 40rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1a222c;
  color: #f3ebe1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.fb-card-photo-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fb-card-photo-dialog header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.fb-card-photo-dialog .fb-card-photo-body {
  padding: 0.75rem;
  overflow: auto;
  flex: 1;
}

.fb-card-photo-dialog .fb-card-photo-search {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.fb-card-photo-dialog input[type="search"] {
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: #f3ebe1;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

.fb-card-photo-albums,
.fb-card-photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-card-photo-albums {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fb-card-photo-albums button {
  text-align: left;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f3ebe1;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  font-size: 0.82rem;
}

.fb-card-photo-albums button:hover {
  border-color: rgba(61, 180, 230, 0.55);
}

.fb-card-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.fb-card-photo-grid button {
  border: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: #0d1218;
}

.fb-card-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-card-photo-status {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  opacity: 0.85;
}

.fb-box-qa .fb-q {
  color: var(--accent-2);
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
}

.fb-box-qa .fb-a {
  font-size: 0.85rem;
  margin: 0;
}

.fb-photo-page .fb-toc {
  max-height: 36%;
  overflow: auto;
  margin: 0.35rem 0;
}

.fb-photo-page .fb-bobbin {
  margin-top: 0.5rem;
}

.fb-photo-page .fb-letter-block {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---- Admin-only edit chrome (visible when body.fb-is-admin) ---- */
.fb-page {
  position: relative;
}

.fb-photo-layer {
  position: absolute;
  inset: 0;
}

/* Keep admin controls mid/bottom of the page so browser chrome / bookmarks don't cover them */
.fb-edit-badge {
  position: absolute;
  top: auto;
  bottom: 0.55rem;
  right: 0.45rem;
  left: auto;
  z-index: 40;
  max-width: 70%;
  padding: 0.32rem 0.55rem;
  border-radius: 4px;
  background: rgba(196, 92, 38, 0.95);
  color: #fff;
  font-family: var(--ui);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.fb-edit-badge:hover {
  background: #a84a1c;
  color: #fff;
}

.fb-admin-edit-btn {
  position: absolute;
  z-index: 40;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: rgba(10, 108, 156, 0.95);
  color: #fff !important;
  font-family: var(--ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
}

.fb-admin-edit-btn:hover {
  background: #085578;
  color: #fff !important;
}

/* Bottom of photo — clear of Chrome toolbar / bookmarks */
.fb-admin-edit-btn--photo {
  top: auto;
  bottom: 0.55rem;
  left: 0.45rem;
  right: auto;
}

/* Text box controls stay on the box itself */
.fb-admin-edit-btn--text {
  top: 0.35rem;
  right: 0.35rem;
  bottom: auto;
}

/* White boxes stay position:absolute for layout; edit btn is absolute within them */
.fb-white-box > .fb-admin-edit-btn--text {
  top: 0.35rem;
  right: 0.35rem;
}

/* When white box sits on bottom, lift photo edit controls above it */
.fb-photo-page:has(.fb-white-box--bottom) .fb-admin-edit-btn--photo,
.fb-photo-page:has(.fb-white-box--bottom) .fb-edit-badge {
  bottom: min(42%, 11rem);
}

/* Cover: keep photo edit control clear of logo + title zones */
.fb-photo-page--cover > .fb-photo-layer > .fb-admin-edit-btn--photo {
  top: 4%;
  right: 4%;
  left: auto;
  bottom: auto;
}

/* Soft outline when admin so editable zones are clear */
body.fb-is-admin .fb-photo-layer:hover {
  outline: 2px dashed rgba(10, 108, 156, 0.45);
  outline-offset: -2px;
}

body.fb-is-admin .fb-white-box:hover {
  outline: 2px dashed rgba(196, 92, 38, 0.4);
  outline-offset: 2px;
}

body.fb-is-admin .fb-hint::after {
  content: " · Admin: use Edit photo / Edit text on each page";
  opacity: 0.85;
}

/* ---- Placeholders ---- */
.fb-media {
  position: relative;
  overflow: hidden;
}

.fb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-media--placeholder,
.fb-cover--placeholder {
  background:
    repeating-linear-gradient(
      -45deg,
      #2a2420,
      #2a2420 12px,
      #332c27 12px,
      #332c27 24px
    );
  color: #f3ebe1;
}

.fb-ph-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
  font-family: var(--ui);
}

.fb-ph-inner strong {
  font-size: 0.95rem;
}

.fb-ph-inner p {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.9;
  max-width: 22ch;
  line-height: 1.35;
}

.fb-ph-inner code {
  font-size: 0.65rem;
  opacity: 0.75;
}

.fb-ph-icon {
  font-size: 1.6rem;
}

.fb-ph-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: #c45c26;
  color: #fff;
  font-family: var(--ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.fb-ph-inline {
  margin-top: 0.75rem !important;
  font-family: var(--ui) !important;
  font-size: 0.75rem !important;
  opacity: 0.85;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
}

.fb-feature-media.fb-media--placeholder,
.fb-map-media.fb-media--placeholder,
.fb-recipe-media.fb-media--placeholder,
.fb-multi-media.fb-media--placeholder,
.fb-column-media.fb-media--placeholder,
.fb-events-media.fb-media--placeholder {
  min-height: 42%;
  flex: 1 1 48%;
}

/* ---- Contents + letter (two independent arrange plates) ---- */
.fb-contents-letter .fb-contents-toc,
.fb-contents-letter .fb-contents-letter-plate {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  /* Allow full half-page width (generic .fb-white-box--custom caps at 22rem) */
  max-width: none !important;
}

/* Preview/public: hug the list so the plate isn’t a tall empty white slab */
body:not(.fb-is-arranging) .fb-contents-letter .fb-contents-toc {
  height: auto !important;
  overflow: visible;
  padding-bottom: 0.65rem !important;
}

.fb-contents-letter .fb-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.15rem;
  row-gap: 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0.2rem 0 0;
  font-size: 0.66rem;
  list-style: none;
  padding: 0;
}

.fb-contents-letter .fb-toc li {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.08rem 0 0.1rem;
  border-bottom: none;
  font-size: 0.64rem;
  line-height: 1.18;
  font-family: var(--font-sans);
}

.fb-contents-letter .fb-toc-kicker {
  margin: 0 0 0.15rem !important;
  color: #c9a227 !important;
  font-family: var(--font-sans);
  font-size: 0.62rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fb-contents-letter .fb-contents-toc .fb-box-title,
.fb-contents-letter .fb-contents-toc .fb-box-title p,
.fb-contents-letter .fb-contents-toc .fb-box-title span {
  white-space: normal !important;
  overflow: visible !important;
  font-size: clamp(1.35rem, 4.4cqi, 2.05rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.35rem !important;
}

.fb-toc-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 78%;
}

.fb-toc-dots {
  flex: 1 1 auto;
  min-width: 0.55rem;
  border-bottom: 1px dotted rgba(201, 162, 39, 0.7);
  transform: translateY(-0.22em);
}

.fb-contents-letter .fb-page-num {
  flex: 0 0 auto;
  color: #c9a227;
  font-family: var(--font-display-strong);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 1;
}

.fb-contents-letter .fb-contents-letter-plate {
  z-index: 3;
}

.fb-contents-letter .fb-contents-intro {
  margin: 0.25rem 0 0.35rem;
}

.fb-contents-letter .fb-letter-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Don’t stretch children — empty flex space was reading as “dead” gaps */
  display: block;
}

/* Soft line breaks (<br>) use line-height only; real paragraphs get a modest gap */
.fb-contents-letter .fb-letter-body .fb-box-body,
.fb-contents-letter .fb-letter-body > p {
  font-size: 0.88rem;
  line-height: 1.22;
  margin: 0 0 0.28em;
}

.fb-contents-letter .fb-letter-body .fb-box-body:last-child,
.fb-contents-letter .fb-letter-body > p:last-child {
  margin-bottom: 0;
}

.fb-contents-letter .fb-contents-letter-plate > .fb-box-title {
  margin: 0 0 0.2rem;
}

.fb-contents-letter .fb-letter-signoff {
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Legacy single-block letter (if any leftover markup) */
.fb-letter-block {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(26, 23, 20, 0.12);
}

.fb-letter-block h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.fb-letter-block p {
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ---- Interactive magazine map (Leaflet) ---- */
.fb-page--map {
  background: #111;
}

.fb-map-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
}

/* Full-bleed map leaf (left of map spread) */
.fb-map-page--full .fb-live-map {
  inset: 0;
}

/* Right of map spread: map continues on left half, places list on right half */
.fb-map-page--split .fb-live-map {
  right: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  width: auto;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Facing leaf: black tube map on top, places in a horizontal row underneath */
.fb-map-page--tube {
  background: #111;
}

.fb-tube-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54%;
  z-index: 1;
  background: #111;
  overflow: hidden;
}

.fb-tube-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fb-tube-map--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.fb-tube-map--empty .fb-map-empty-msg {
  color: #f3ebe1;
}

.fb-tube-stop-visited text {
  pointer-events: none;
}

.fb-map-page--split .fb-map-legend-plate--split,
.fb-map-legend-plate--split {
  max-height: none !important;
  top: 4% !important;
  left: 52% !important;
  width: 45% !important;
  height: 90% !important;
  bottom: auto !important;
  right: auto !important;
}

.fb-map-legend-plate--tube {
  top: 56% !important;
  left: 3% !important;
  width: 94% !important;
  height: 41% !important;
  max-height: none !important;
  bottom: auto !important;
  right: auto !important;
  background: #161616 !important;
  color: #f3ebe1 !important;
  border: 1px solid rgba(201, 162, 39, 0.4) !important;
  box-shadow: none !important;
}

.fb-map-legend-plate--tube .fb-box-kicker {
  color: #c9a227 !important;
}

.fb-live-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #111;
}

.fb-live-map--dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(0.35) brightness(0.9);
}

.fb-live-map--dark .leaflet-control-zoom a {
  background: #1a1a1a;
  color: #f3ebe1;
  border-color: #333;
}

.fb-live-map--dark .leaflet-control-zoom a:hover {
  background: #2a2a2a;
}

.fb-live-map--dark .leaflet-control-attribution {
  background: rgba(17, 17, 17, 0.72);
  color: #9a9288;
}

.fb-live-map--dark .leaflet-control-attribution a {
  color: #c9a227;
}

.fb-live-map--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.fb-map-empty-msg {
  margin: 0;
  font-size: 0.85rem;
  color: #445;
  max-width: 14rem;
  line-height: 1.35;
}

.fb-map-legend-plate {
  z-index: 4;
  max-height: 52% !important;
  overflow: auto;
  pointer-events: auto;
  /* Match red route line on the live map */
  border: 2.5px solid #e32017 !important;
  box-shadow: 0 2px 12px rgba(227, 32, 23, 0.18);
  border-radius: 10px;
}

/* Title/subtitle intentionally omitted — kicker “Map” then places only */
.fb-map-legend-plate .fb-box-title,
.fb-map-legend-plate .fb-map-subtitle,
.fb-map-legend-plate > .fb-box-body {
  display: none !important;
}

.fb-map-legend-plate .fb-box-kicker {
  margin: 0 0 0.35rem !important;
}

.fb-map-subtitle {
  font-size: 0.78rem !important;
  margin: 0 0 0.35rem !important;
  opacity: 0.85;
}

.fb-map-legend {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
}

.fb-map-legend li {
  margin: 0;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.72rem;
  line-height: 1.25;
}

.fb-map-legend li[data-missing-coords="1"] {
  opacity: 0.55;
}

.fb-map-legend-link {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem 0.35rem;
  color: inherit;
  text-decoration: none;
}

.fb-map-legend-link:hover .fb-map-legend-name {
  text-decoration: underline;
  color: #0a6c9c;
}

.fb-map-legend-plate--tube .fb-map-legend-link:hover .fb-map-legend-name {
  color: #c9a227;
}

.fb-map-legend--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}

.fb-map-legend--row > li {
  flex: 1 1 30%;
  min-width: 28%;
  max-width: 33%;
  padding: 0.15rem 0.1rem 0.28rem;
  border-bottom: 0;
  border-top: 1px solid rgba(243, 235, 225, 0.1);
  font-size: 0.68rem;
}

.fb-map-legend--row .fb-map-legend-note {
  padding-left: 0;
}

.fb-map-legend-plate--tube .fb-map-legend-num {
  background: #e32017;
}

.fb-map-legend-plate--tube .fb-map-legend-station {
  color: #c9a227;
  opacity: 0.95;
}

.fb-map-legend-plate--tube .fb-map-legend-visit {
  color: #e8c4c0;
}

.fb-map-legend-plate--tube .fb-map-legend-name,
.fb-map-legend-plate--tube .fb-map-legend-link {
  color: #f3ebe1;
}

.fb-map-legend-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #0a6c9c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
}

.fb-map-legend-name {
  font-weight: 600;
}

.fb-map-legend-note {
  display: block;
  width: 100%;
  padding-left: 1.5rem;
  font-size: 0.65rem;
  opacity: 0.7;
}

.fb-map-pin-icon {
  background: transparent !important;
  border: 0 !important;
}

/* Legacy numbered dots (kept for safety) */
.fb-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0a6c9c;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: 0.72rem;
  font-family: var(--ui);
}

.fb-map-pin-num {
  line-height: 1;
}

/* LU station roundels on the magazine map — oversized for magazine legibility */
.fb-map-roundel-icon {
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.fb-map-roundel {
  position: relative;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  -webkit-font-smoothing: antialiased;
}

.fb-map-roundel-svg {
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

/* Keep roundels above route lines when markers stack */
.fb-live-map .leaflet-marker-icon.fb-map-roundel-icon {
  z-index: 600 !important;
}

.fb-map-legend-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.fb-map-legend-station {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

.fb-map-legend-visit {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #c41e1e;
  opacity: 0.9;
}

.fb-map-popup-visit {
  color: #c41e1e;
  font-weight: 600;
}

.fb-live-map .fb-map-route,
.fb-live-map .fb-map-route-halo {
  pointer-events: none;
}

.fb-map-popup-station {
  opacity: 0.85;
}

/* Leaflet controls sit above page chrome but under admin docks */
.fb-live-map .leaflet-control-container {
  font-size: 0.72rem;
}

.fb-live-map .leaflet-control-zoom a {
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
}

/* ---- Map media (legacy) ---- */
.fb-map-media {
  flex: 0 0 28%;
  min-height: 7.5rem;
  margin: 0.35rem 0 0.65rem;
  border-radius: 8px;
}

.fb-mini-h {
  margin: 0.35rem 0 0.35rem;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.fb-plain-list {
  margin: 0 0 0.55rem;
  padding: 0 0 0 1.05rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.fb-plain-list--ol {
  list-style: decimal;
}

.fb-team-note {
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.55rem !important;
}

.fb-bobbin {
  margin-top: auto;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.fb-bobbin h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.fb-bobbin p {
  margin: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.4;
}

/* ---- Recipe / multi / column / events ---- */
.fb-recipe .fb-kicker,
.fb-column .fb-kicker {
  color: var(--accent);
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.fb-recipe-media,
.fb-multi-media,
.fb-column-media,
.fb-events-media {
  flex: 0 0 26%;
  min-height: 6.5rem;
  margin: 0.25rem 0 0.55rem;
  border-radius: 8px;
}

.fb-meta {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.45rem !important;
}

.fb-cards {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.fb-cards li {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(26, 23, 20, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.fb-cards a.fb-link {
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.15rem;
}

.fb-qa {
  margin-top: 0.35rem;
}

.fb-q,
.fb-a {
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}

.fb-q {
  color: var(--accent-2);
}

.fb-join .fb-next-box {
  margin-top: 1.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
}

.fb-join .fb-next-box h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.fb-join .fb-next-box p {
  margin: 0;
  font-size: 0.9rem;
  max-width: none;
}

.fb-back {
  position: relative;
}

.fb-back-inner {
  position: relative;
  z-index: 1;
  padding: 10%;
}

.fb-back[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.35), rgba(12, 10, 8, 0.88));
}

.fb-inner.fb-map,
.fb-inner.fb-recipe,
.fb-inner.fb-multi,
.fb-inner.fb-column,
.fb-inner.fb-events,
.fb-inner.fb-contents-letter {
  overflow: auto;
}

/* Controls */
.fb-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem 0.55rem;
  color: #f0e6da;
  z-index: 5;
  flex-shrink: 0;
}

.fb-controls button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-family: var(--ui);
  cursor: pointer;
}

.fb-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.fb-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.fb-page-indicator {
  min-width: 5.5rem;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Public magazine viewer — full-screen stage */
body.flipbook-body:not(.fb-is-admin-session) .fb-admin-mention-photos {
  display: none !important;
}

body.flipbook-body:not(.fb-is-admin) {
  height: 100svh !important;
  max-height: 100svh !important;
  background: #111 !important;
  overflow: hidden !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-shell {
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #111 !important;
  overflow: hidden !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-workspace,
body.flipbook-body:not(.fb-is-admin) .fb-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.flipbook-body:not(.fb-is-admin) .magazine-stage,
body.flipbook-body:not(.fb-is-admin) .fb-stage {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}
/*
 * The wrap is the measurable stage, not a page. JS sizes #flipbook to one
 * A4 leaf or a two-page spread. Forcing A4 on the wrap made typical laptops
 * look like a single centred card and locked the book into portrait.
 */
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap,
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap.magazine-page {
  position: absolute !important;
  inset: 3.1rem 0.45rem 4.35rem !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap #flipbook,
body.flipbook-body:not(.fb-is-admin) .magazine-spread {
  border-radius: 8px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap .stf__item.--left,
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap .page-left,
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap .stf__item.--right,
body.flipbook-body:not(.fb-is-admin) .fb-book-wrap .page-right {
  min-width: 0;
  height: 100%;
}
/* Spread bleed must stay 200% wide or each leaf tiles its own copy */
body.flipbook-body:not(.fb-is-admin) .fb-photo-layer--spread-bleed .fb-photo-full-img {
  width: 200% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-sticker img,
body.flipbook-body:not(.fb-is-admin) .hero-roundel img,
body.flipbook-body:not(.fb-is-admin) .lu-roundel img,
body.flipbook-body:not(.fb-is-admin) .fb-dish-pin img {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-topbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.5rem !important;
  z-index: 40 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent) !important;
  pointer-events: none;
}
body.flipbook-body:not(.fb-is-admin) .fb-topbar a,
body.flipbook-body:not(.fb-is-admin) .fb-topbar button {
  pointer-events: auto;
}
body.flipbook-body:not(.fb-is-admin) .fb-controls {
  position: fixed !important;
  bottom: 1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  z-index: 50 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 999px !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-controls button {
  font-size: 15px !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px !important;
  min-width: 90px !important;
}
body.flipbook-body:not(.fb-is-admin) .fb-page--admin-placeholder .fb-box-title,
body.flipbook-body:not(.fb-is-admin) .fb-page--admin-placeholder .fb-ph-inner {
  display: none !important;
}

.fb-hint {
  display: none;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(243, 235, 225, 0.65);
  padding: 0 1rem 0.35rem;
  flex-shrink: 0;
}

/* @mentions inside flipbook text plates */
.fb-white-box .entity-mention,
.fb-cover-overlay .entity-mention {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.fb-white-box .entity-mention:hover,
.fb-cover-overlay .entity-mention:hover,
.fb-white-box .entity-mention.is-photo-hover,
.fb-cover-overlay .entity-mention.is-photo-hover {
  color: #0b6e99;
}
.fb-white-box .entity-mention.has-hover-photo,
.fb-cover-overlay .entity-mention.has-hover-photo {
  cursor: pointer;
  text-decoration-style: dotted;
}

.fb-photo-hover-swap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.28s ease;
}
.fb-photo-layer.is-mention-hover .fb-photo-hover-swap {
  opacity: 1;
}
/* One photo spanning both leaves, matching the spread-bleed background */
.fb-photo-layer--spread-bleed .fb-photo-hover-swap {
  inset: auto;
  top: 0;
  height: 100%;
  width: 200%;
  max-width: none;
  object-fit: cover;
}
.fb-photo-layer--bleed-left .fb-photo-hover-swap {
  left: 0;
}
.fb-photo-layer--bleed-right .fb-photo-hover-swap {
  left: -100%;
}

.fb-admin-mention-photos {
  position: fixed;
  top: 3.55rem;
  right: 12px;
  z-index: 81;
  width: min(18.5rem, calc(100vw - 24px));
  max-height: calc(100svh - 5.5rem);
  overflow: auto;
  margin: 0;
  padding: 0.75rem 0.8rem 0.85rem;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color: #f3ebe1;
}
body.fb-is-arranging .fb-admin-mention-photos,
body.fb-is-cropping .fb-admin-mention-photos {
  top: 10px;
}
.fb-admin-mention-photos[hidden] {
  display: none !important;
}
.fb-admin-mention-photos .fb-admin-rail-subtitle {
  margin: 0 0 0.25rem;
  color: #f3ebe1;
}
.fb-admin-mention-photos .fb-admin-rail-hint {
  color: rgba(243, 235, 225, 0.7);
}
.fb-admin-mention-photos .fb-admin-mention-photo-copy strong {
  color: #f3ebe1;
}
.fb-admin-mention-photos .fb-admin-mention-photo-copy span {
  color: rgba(243, 235, 225, 0.65);
}
.fb-admin-mention-photos #fb-admin-mention-photo-save {
  width: 100%;
  margin-top: 0.55rem;
}
.fb-admin-mention-photo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fb-admin-rail .fb-admin-mention-photo-copy strong {
  color: #f3ebe1;
}
.fb-admin-rail .fb-admin-mention-photo-copy span {
  color: rgba(243, 235, 225, 0.65);
}
@media (max-width: 1400px), (max-height: 820px) {
  .fb-admin-rail-group.fb-admin-mention-photos {
    flex-direction: column;
    width: 100%;
  }
}
.fb-admin-mention-photo-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.fb-admin-mention-photo-thumb {
  width: 40px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.fb-admin-mention-photo-thumb.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #888;
  background: repeating-linear-gradient(
    45deg,
    #f3f3f3,
    #f3f3f3 4px,
    #ececec 4px,
    #ececec 8px
  );
}
.fb-admin-mention-photo-copy {
  min-width: 0;
  flex: 1;
}
.fb-admin-mention-photo-copy strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-admin-mention-photo-copy span {
  font-size: 0.72rem;
  color: #666;
}
.fb-admin-mention-photo-row .fb-admin-bar-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
}

.fb-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  margin: 0.55rem 0 0.15rem;
}

.fb-hashtag-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  color: #1a1a1a;
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.fb-white-box--nofill .fb-hashtag-chip,
.fb-cover-overlay .fb-hashtag-chip {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.95);
  color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* display:flex must not override the hidden attribute */
.fb-admin-bar-btn[hidden],
.fb-admin-status[hidden],
#fb-admin-edit[hidden],
#fb-admin-add-page[hidden],
.fb-admin-crop-tools[hidden] {
  display: none !important;
}

.fb-admin-status {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: rgba(210, 243, 252, 0.95);
  line-height: 1.35;
}

.fb-admin-status--error {
  color: #ffb4b4;
}

.fb-admin-bar-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-family: var(--ui);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
}

.fb-admin-bar-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff !important;
}

.fb-admin-bar-btn--primary {
  background: rgba(10, 108, 156, 0.92);
  border-color: rgba(10, 108, 156, 0.95);
}

.fb-admin-bar-btn--primary:hover {
  background: #085578;
}

.fb-admin-bar-btn--danger {
  background: rgba(180, 35, 24, 0.88);
  border-color: rgba(180, 35, 24, 0.95);
  color: #fff !important;
}

.fb-admin-bar-btn--danger:hover {
  background: #912018;
}

.fb-admin-bar-btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fb-admin-status {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(210, 243, 252, 0.95);
  padding: 0 1rem 0.75rem;
  margin: 0;
  font-family: var(--ui);
}

.fb-admin-status--error {
  color: #ffb4b4;
}

.fb-admin-bar-btn--arrange {
  background: rgba(210, 243, 252, 0.18);
  border-color: rgba(210, 243, 252, 0.55);
}

.fb-admin-bar-btn--active,
.fb-admin-bar-btn--arrange.fb-admin-bar-btn--active {
  background: rgba(210, 243, 252, 0.95);
  border-color: #d2f3fc;
  color: #0a3a4a !important;
}

/* —— Live text arrange mode (admin) —— */
body.fb-is-arranging {
  cursor: default;
  user-select: none;
}

/* Stop browser pan/swipe stealing the gesture while arranging */
body.fb-is-arranging .stf__parent,
body.fb-is-arranging .stf__wrapper,
body.fb-is-arranging .stf__block,
body.fb-is-arranging .fb-page {
  touch-action: none !important;
}

body.fb-is-arranging .fb-cover-overlay {
  pointer-events: auto;
}

body.fb-is-arranging [data-fb-arrange] {
  pointer-events: auto !important;
  cursor: grab;
  outline: 2px dashed rgba(10, 108, 156, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
  /* Base layer — select/drag raises z-index via inline style */
  z-index: 12;
  touch-action: none;
  /* Isolation so boxes stack among themselves, not under photo chrome */
  isolation: isolate;
  /* Corner handles are children — keep them visible (boxes default to overflow:auto) */
  overflow: visible !important;
}

/*
 * Chef / place card links steal clicks during Arrange — disable navigation so the
 * whole plate is grabbable (selection, drag, resize handles).
 */
body.fb-is-arranging .fb-page a,
body.fb-is-arranging .fb-page button:not(.fb-admin-bar-btn):not(.fb-dock-toggle):not(.fb-dock-reopen):not(.fb-dish-pin) {
  pointer-events: none !important;
}
/* Dish pins are <button>s — must stay grabbable for rearrange */
body.fb-is-arranging .fb-dish-pin,
body.fb-is-arranging .fb-dish-pin .fb-dish-pin-hit,
body.fb-is-arranging .fb-dish-pin .fb-dish-pin-remove {
  pointer-events: auto !important;
}
body.fb-is-arranging .fb-arrange-handle,
body.fb-is-arranging .fb-arrange-handle-float {
  pointer-events: auto !important;
}

/* Dragging via transform:translate — keep box on top, no position mode switch */
body.fb-is-arranging [data-fb-arrange].fb-arrange-dragging {
  cursor: grabbing;
  outline-color: #0a6c9c;
  outline-style: solid;
  z-index: 10000 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  pointer-events: auto !important;
  /* Live resize sets width/height in px — beat hug + custom max caps */
  max-width: none !important;
  max-height: none !important;
}

/* Selected text plate while styling — always above unselected siblings */
body.fb-is-arranging [data-fb-arrange].fb-text-selected {
  outline-color: #c45c26;
  outline-style: solid;
  outline-width: 2px;
}

/* Hide bulk page mgmt (move/delete/add) while arranging — keep Edit this page in the top bar */
body.fb-is-arranging .fb-admin-page-mgmt,
body.fb-is-cropping .fb-admin-page-mgmt {
  display: none !important;
}

body.fb-is-arranging .fb-admin-rail-hint,
body.fb-is-cropping .fb-admin-rail-hint {
  display: none !important;
}

/*
 * Reserve right gutter for the floating dock so the cover centres in the
 * remaining stage (not under the Font panel). Collapsed dock uses a slim tab.
 */
body.fb-is-arranging:not(.fb-dock-collapsed) .fb-stage,
body.fb-is-cropping:not(.fb-dock-collapsed) .fb-stage {
  padding-right: 18.25rem;
  box-sizing: border-box;
}

body.fb-is-arranging.fb-dock-collapsed .fb-stage,
body.fb-is-cropping.fb-dock-collapsed .fb-stage {
  padding-right: 3.25rem;
  box-sizing: border-box;
}

/* Dock chrome: title + Hide panel */
.fb-dock-chrome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  flex-shrink: 0;
}

.fb-dock-chrome .fb-dock-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}

/* Sticky “add speech / narrative / text” bar at top of arrange dock */
.fb-admin-text-add-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.5rem 0.5rem;
  background: rgba(22, 20, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.fb-admin-text-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fb-admin-text-add-row .fb-admin-bar-btn {
  flex: 1 1 auto;
  min-width: 4.5rem;
  font-size: 0.72rem;
  padding: 0.4rem 0.45rem;
  white-space: nowrap;
}
.fb-admin-text-add-bar[hidden] {
  display: none !important;
}

.fb-dock-toggle {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f3ebe1;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--ui);
}

.fb-dock-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

.fb-dock-reopen {
  display: none !important;
}

/*
 * Floating arrange dock — portaled to document.body (.fb-arrange-dock) so the
 * laptop rail’s flex-direction:row never lays Font | Heading side-by-side and
 * clips the right column off-screen.
 */
#fb-admin-text-tools.fb-arrange-dock,
#fb-admin-crop-tools.fb-arrange-dock,
body > .fb-admin-text-tools.fb-arrange-dock,
body > .fb-admin-crop-tools.fb-arrange-dock,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]),
body.fb-is-cropping .fb-admin-crop-tools:not([hidden]) {
  position: fixed !important;
  top: max(3.25rem, calc(env(safe-area-inset-top, 0px) + 3rem)) !important;
  right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
  bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  width: 17.5rem !important;
  min-width: 0 !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 2147483000 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  background: rgba(18, 16, 14, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.7rem 1.5rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.25);
  box-sizing: border-box !important;
  transition: width 0.18s ease, padding 0.18s ease;
}

/* Collapsed: slim “Styles” tab so the full cover is free to drag/view */
#fb-admin-text-tools.fb-arrange-dock.fb-dock-is-collapsed,
body.fb-is-arranging.fb-dock-collapsed #fb-admin-text-tools.fb-arrange-dock {
  width: 2.65rem !important;
  min-width: 2.65rem !important;
  max-width: 2.65rem !important;
  top: max(4.5rem, 12vh) !important;
  bottom: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 0.35rem 0.25rem !important;
  overflow: hidden !important;
  align-items: center !important;
  gap: 0 !important;
}

#fb-admin-text-tools.fb-arrange-dock.fb-dock-is-collapsed > *:not(.fb-dock-reopen),
body.fb-is-arranging.fb-dock-collapsed #fb-admin-text-tools.fb-arrange-dock > *:not(.fb-dock-reopen) {
  display: none !important;
}

#fb-admin-text-tools.fb-arrange-dock.fb-dock-is-collapsed .fb-dock-reopen,
body.fb-is-arranging.fb-dock-collapsed #fb-admin-text-tools.fb-arrange-dock .fb-dock-reopen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 7.5rem;
  margin: 0;
  padding: 0.65rem 0.15rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f3ebe1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  cursor: pointer;
  font-family: var(--ui);
}

#fb-admin-text-tools.fb-arrange-dock.fb-dock-is-collapsed .fb-dock-reopen:hover,
body.fb-is-arranging.fb-dock-collapsed #fb-admin-text-tools.fb-arrange-dock .fb-dock-reopen:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Every direct child is a full-width stack row — never a side column */
#fb-admin-text-tools.fb-arrange-dock > *,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) > *,
#fb-admin-crop-tools.fb-arrange-dock > *,
body.fb-is-cropping .fb-admin-crop-tools:not([hidden]) > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

#fb-admin-text-tools.fb-arrange-dock .fb-admin-select,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-input,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-textarea,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-image-zoom,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-color-row,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-zoom-row,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-select,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-input,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-textarea,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-image-zoom,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-color-row,
body.fb-is-arranging .fb-admin-text-tools:not([hidden]) .fb-admin-zoom-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.fb-is-arranging .fb-admin-text-tools:not([hidden])::-webkit-scrollbar,
body.fb-is-cropping .fb-admin-crop-tools:not([hidden])::-webkit-scrollbar,
#fb-admin-text-tools.fb-arrange-dock::-webkit-scrollbar {
  width: 10px;
}

body.fb-is-arranging .fb-admin-text-tools:not([hidden])::-webkit-scrollbar-thumb,
body.fb-is-cropping .fb-admin-crop-tools:not([hidden])::-webkit-scrollbar-thumb,
#fb-admin-text-tools.fb-arrange-dock::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  border: 2px solid rgba(18, 16, 14, 0.98);
}

/* Font / size / colour stay pinned while heading/body scroll underneath */
.fb-admin-text-styles {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem;
  padding: 0.15rem 0 0.5rem;
  margin: 0 0 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

body.fb-is-arranging .fb-admin-text-tools .fb-admin-text-styles,
#fb-admin-text-tools.fb-arrange-dock .fb-admin-text-styles {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(18, 16, 14, 0.99);
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.55);
}

body.fb-is-arranging .fb-admin-text-tools .fb-admin-field-label,
body.fb-is-arranging .fb-admin-text-tools .fb-admin-zoom-label {
  font-size: 0.68rem;
}

body.fb-is-arranging .fb-admin-text-tools .fb-admin-select,
body.fb-is-arranging .fb-admin-text-tools .fb-admin-input,
body.fb-is-arranging .fb-admin-text-tools .fb-admin-textarea {
  font-size: 0.78rem;
}

.fb-admin-textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #f3ebe1;
  padding: 0.4rem 0.5rem;
  font-family: var(--ui);
  line-height: 1.35;
  box-sizing: border-box;
}

.fb-admin-textarea:focus {
  outline: 1px solid rgba(61, 180, 230, 0.8);
  border-color: rgba(61, 180, 230, 0.6);
}

.fb-admin-text-content {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0.3rem;
  padding-bottom: 0.45rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Compact default textareas; body field stays taller for shaping line breaks */
body.fb-is-arranging .fb-admin-text-tools .fb-admin-textarea {
  min-height: 3.25rem;
  max-height: 8rem;
}
body.fb-is-arranging .fb-admin-text-tools .fb-admin-textarea--body,
#fb-admin-text-body.fb-admin-textarea {
  min-height: 9rem;
  max-height: 22rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

#fb-admin-text-delete {
  margin-top: 0.35rem;
}

#fb-admin-text-add {
  margin-top: 0.15rem;
  width: 100%;
}

.fb-admin-bar-btn--primary {
  background: #0a6c9c;
  border-color: #0a6c9c;
  color: #fff;
  font-weight: 600;
}

.fb-admin-bar-btn--primary:hover {
  background: #085578;
  border-color: #085578;
  color: #fff;
}

.fb-admin-text-link-fields {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

body.fb-is-arranging .fb-admin-edit-btn,
body.fb-is-arranging .fb-edit-badge {
  pointer-events: none;
  opacity: 0.35;
}

/* In-box corner handles (fallback) — hidden once a box is selected; floating ones win */
.fb-arrange-handle {
  display: none;
  position: absolute;
  width: 18px;
  height: 18px;
  background: #0a6c9c;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  z-index: 30;
  pointer-events: auto;
  touch-action: none;
  margin: 0;
  box-sizing: border-box;
}

/* Larger hit target without making the blue square huge */
.fb-arrange-handle::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.fb-arrange-handle--se {
  right: 2px;
  bottom: 2px;
  left: auto;
  top: auto;
  cursor: nwse-resize;
}

.fb-arrange-handle--sw {
  left: 2px;
  bottom: 2px;
  right: auto;
  top: auto;
  cursor: nesw-resize;
}

.fb-arrange-handle--ne {
  right: 2px;
  top: 2px;
  left: auto;
  bottom: auto;
  cursor: nesw-resize;
}

.fb-arrange-handle--nw {
  left: 2px;
  top: 2px;
  right: auto;
  bottom: auto;
  cursor: nwse-resize;
}

/* Only show in-box handles when nothing is selected (guide that boxes are resizable) */
body.fb-is-arranging .fb-arrange-handle:not(.fb-arrange-handle-float) {
  display: block;
}
body.fb-is-arranging .fb-text-selected .fb-arrange-handle:not(.fb-arrange-handle-float),
body.fb-is-arranging:has(.fb-text-selected) .fb-arrange-handle:not(.fb-arrange-handle-float) {
  display: none;
}

/*
 * Floating handles: fixed to the viewport (portaled to body) so full-bleed
 * plates and edge boxes stay resizable even when StPageFlip clips page leaves.
 */
.fb-arrange-handle-float {
  display: none;
  position: fixed;
  width: 26px;
  height: 26px;
  margin: 0;
  /* left/top set in JS (viewport px); centre the square on the corner */
  transform: translate(-50%, -50%);
  z-index: 2147482500 !important;
  cursor: nwse-resize;
  background: #0a6c9c;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow:
    0 0 0 1px rgba(10, 108, 156, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: auto !important;
  touch-action: none;
}
.fb-arrange-handle-float.fb-arrange-handle--ne,
.fb-arrange-handle-float.fb-arrange-handle--sw {
  cursor: nesw-resize;
}
body.fb-is-arranging .fb-arrange-handle-float {
  display: block !important;
}

/* Page fold / stf normally clip; while arranging keep plates + float handles reachable */
body.fb-is-arranging .fb-page,
body.fb-is-arranging .stf__item,
body.fb-is-arranging .stf__block,
body.fb-is-arranging .stf__wrapper,
body.fb-is-arranging .stf__parent {
  overflow: visible !important;
}

/* Black stage is a parking lot — allow plates past the leaf edge */
body.fb-is-arranging .fb-stage {
  overflow: auto !important;
  padding: 1.25rem 0.75rem 2rem !important;
}
body.fb-is-arranging .fb-book-wrap {
  overflow: visible !important;
  margin: 0.5rem auto 1.5rem !important;
}
body.fb-is-arranging [data-fb-arrange].fb-arrange-parked,
body.fb-is-arranging [data-fb-parked="1"] {
  outline: 2px dashed #c45c26 !important;
  outline-offset: 3px;
  opacity: 0.9;
  box-shadow: 0 0 0 1px rgba(196, 92, 38, 0.35);
}
body.fb-is-arranging [data-fb-arrange].fb-arrange-parked::after,
body.fb-is-arranging [data-fb-parked="1"]::after {
  content: "Parked (hidden public)";
  position: absolute;
  left: 0.25rem;
  top: -1.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #c45c26;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.fb-admin-view-zoom {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.fb-admin-view-zoom-value {
  min-width: 2.75rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #d2f3fc;
}

/* Drop chrome under selected plates so top-of-page chef cards stay grabbable */
body.fb-is-arranging .fb-page-chrome {
  z-index: 5;
}
body.fb-is-arranging [data-fb-arrange].fb-text-selected {
  z-index: 40 !important;
  overflow: visible !important;
}

body.fb-is-arranging .fb-hint::after {
  content: " · Arrange: drag to move · any corner resizes · Save positions";
}

body.fb-is-admin .fb-hint {
  display: block;
}

/*
 * Laptops / short screens: park the admin rail above the book so the cover
 * can use the full width (side rail was stealing ~half the stage).
 */
@media (max-width: 1400px), (max-height: 820px) {
  .fb-workspace {
    flex-direction: column;
  }

  .fb-admin-rail {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    /* Keep chrome short so the magazine keeps most of the viewport */
    max-height: min(18vh, 6.25rem);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.25rem 0.35rem;
    padding: 0.3rem 0.5rem;
    overflow-y: auto;
  }

  .fb-admin-rail-title,
  .fb-admin-rail-page {
    width: auto;
    margin-right: 0.35rem;
    font-size: 0.72rem;
  }

  /* Action chip rows only — never the floating text/crop docks */
  .fb-admin-rail-group:not(.fb-admin-text-tools):not(.fb-admin-crop-tools) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  .fb-admin-rail .fb-admin-bar-btn {
    width: auto;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
  }

  .fb-admin-rail-hint {
    display: none;
  }

  /* Idle rail: keep tools collapsed so the top bar stays short */
  .fb-admin-text-tools,
  .fb-admin-crop-tools {
    width: 100%;
    max-height: 5.5rem;
    overflow: auto;
  }

  /*
   * Arrange / crop: only the action strip stays in the top rail.
   * The floating dock uses the global full-height rules above (not a 28rem cap).
   */
  body.fb-is-arranging .fb-admin-rail,
  body.fb-is-cropping .fb-admin-rail {
    max-height: none;
    position: relative;
    overflow: visible;
  }

  body.fb-is-arranging .fb-admin-text-tools .fb-admin-rail-subtitle {
    font-size: 0.72rem;
    margin: 0 0 0.15rem;
  }

  body.fb-is-arranging .fb-admin-text-tools .fb-admin-rail-hint {
    display: block;
    font-size: 0.65rem;
    opacity: 0.7;
  }
}

@media (max-width: 720px) {
  .fb-hint {
    display: block;
  }

  .fb-book-wrap {
    width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .fb-admin-rail {
    max-height: min(32vh, 12rem);
  }

  .fb-feature-copy {
    padding: 0.7rem 0.8rem 0.85rem;
  }

  .fb-feature h3 {
    font-size: 1.05rem;
  }

  .fb-feature .fb-caption {
    font-size: 0.82rem;
  }
}

/* Loading */
.fb-loading {
  color: #f0e6da;
  font-family: var(--ui);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* —— Transparent PNG stickers (physical drop-shadow follows alpha) —— */
.fb-stickers-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  overflow: visible;
}

.fb-sticker {
  position: absolute;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  /* Soft double shadow hugs PNG silhouette — looks stuck on the page */
  filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.28))
    drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.16));
}

/* Admin launch strip — floats over the public-looking preview, does not change page geometry */
.fb-launch-bar {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  max-width: calc(100vw - 24px);
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.88);
  color: #f4efe4;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 0.82rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.fb-launch-bar[hidden] {
  display: none !important;
}
.fb-launch-status {
  padding: 0 0.25rem;
  opacity: 0.92;
}
.fb-launch-link,
.fb-launch-publish {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #111;
  background: #f4efe4;
}
.fb-launch-publish {
  background: #c9a227;
  color: #111;
}
.fb-launch-publish--live {
  background: #8a3b3b;
  color: #fff;
}

.fb-sticker--no-shadow {
  filter: none;
}

body.fb-is-arranging .fb-stickers-layer {
  pointer-events: none; /* only stickers themselves receive events */
  z-index: 40;
}

body.fb-is-arranging .fb-sticker {
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}

body.fb-is-arranging .fb-sticker.fb-text-selected,
body.fb-is-arranging .fb-sticker.fb-sticker-selected {
  outline: 1.5px dashed rgba(20, 20, 20, 0.55);
  outline-offset: 3px;
  z-index: 10000 !important;
}

.fb-admin-sticker-panel {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fb-admin-sticker-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  max-height: 160px;
  overflow-y: auto;
}

.fb-admin-sticker-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0.25rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.fb-admin-sticker-thumb:hover,
.fb-admin-sticker-thumb:focus-visible {
  border-color: rgba(255, 220, 120, 0.7);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.fb-admin-sticker-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.fb-admin-sticker-selected {
  margin-top: 0.35rem;
}

.fb-admin-sticker-selected .fb-admin-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0;
  font-size: 0.85rem;
}

.fb-admin-bar-btn--danger {
  background: rgba(180, 40, 50, 0.85);
  border-color: rgba(255, 120, 120, 0.4);
  color: #fff;
}

.fb-admin-bar-btn--danger:hover {
  background: rgba(200, 50, 60, 0.95);
}