/* Odyssey / Anne's — e-Edition.
 *
 * Ported verbatim from the approved mockup. Tokens (--fb-accent etc.) are set
 * per brand inline on .fb-ed by Brand::css_vars().
 *
 * The button is the SAME pill used by .btn-next on /checkout: brand gradient,
 * 999px radius, sentence case, Geomanist 13.5px, soft brand-tinted shadow.
 * Not square, not uppercase, not black.
 */

.fb-ed{
  color-scheme:light;
  --ink:#17181c; --muted:#64666c; --faint:#9a9ca2;
  --line:#e3e4e7; --line-soft:#eef0f2;
  --surface:#ffffff; --surface-2:#fbfbfc;
  --f-serif:"essonnes-display",Georgia,serif;
  --f-pill:"itc-fenice",Georgia,serif;
  --f-body:'PT Serif',Georgia,serif;
  --f-ui:'Geomanist',system-ui,-apple-system,sans-serif;
  max-width:1240px;margin:0 auto;width:100%;
  background:var(--surface);
  color:var(--ink);font-family:var(--f-body);line-height:1.55;
}
/* Every descendant takes its colour from us, never from the theme. */
.fb-ed,.fb-ed p,.fb-ed h1,.fb-ed h2,.fb-ed h3,.fb-ed span,.fb-ed figcaption,.fb-ed strong{color:var(--ink)}
.fb-ed a{color:var(--ink)}
.fb-ed *{box-sizing:border-box}
.fb-ed img{max-width:100%;height:auto;display:block}
.fb-ed a{text-decoration:none}

/* Full-width canvas supplied by the page template. Neutralises the classic
   theme's narrow page wrapper without touching header or footer. */
.fb-ed-canvas{width:100%;padding:0 24px;background:#fff;color:#17181c}
.page-template-flipbooks-e-edition,
.page-template-flipbooks-e-edition body{background:#fff}
.page-template-flipbooks-e-edition .entry-header,
.page-template-flipbooks-e-edition .page-header{display:none !important}

/* No page title — the design starts at the breadcrumb. */
.fb-edition-page .wp-block-post-title,
.fb-edition-page .entry-title,
.fb-edition-page .page-title,
.fb-edition-page header.entry-header{display:none !important}

/* ── Breadcrumb — centred ────────────────────────────────────────────── */
.fb-ed-crumbs{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:34px 0 30px;font-family:var(--f-ui);font-size:14px;color:var(--muted)}
.fb-ed-crumbs,.fb-ed-crumbs a{color:var(--muted)}
.fb-ed-crumbs a:hover{color:var(--fb-accent)}
.fb-ed-crumbs .fb-sep{color:var(--faint)}
.fb-ed-crumbs .fb-crumb-here{color:var(--ink)}

/* ── Hero — cover capped in height ──────────────────────────────────── */
.fb-ed-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:56px;align-items:start;padding-bottom:44px}

.fb-ed-art{border:1px solid var(--line-soft);border-radius:20px;background:var(--surface-2);
  padding:26px;position:relative;box-shadow:0 20px 44px -34px rgba(30,34,48,.18)}

.fb-ed-cover-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;line-height:0;transition:transform .18s ease,box-shadow .18s ease}
.fb-ed-cover-btn img{border-radius:6px;max-height:520px;width:auto;margin:0 auto}
.fb-ed-cover-btn:hover{transform:translateY(-2px)}
.fb-ed-cover-btn:focus-visible{outline:2px solid var(--fb-accent);outline-offset:4px}
.fb-ed-noart{display:flex;align-items:center;justify-content:center;min-height:280px;
  padding:20px;text-align:center;background:#f2f3f5;color:var(--faint)}

.fb-ed-lock{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(23,24,28,.55)}

.fb-ed-info{padding-top:6px}
.fb-ed-title{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.3rem,3.4vw,3.1rem);
  line-height:1.05;margin:0 0 10px}
.fb-ed-meta{font-family:var(--f-pill);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:0 0 26px}
.fb-ed-desc{font-size:16.5px;color:var(--muted);max-width:46ch;margin:0 0 22px}

/* ── Buttons — the /checkout pill ───────────────────────────────────── */
.fb-ed-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
/* The CTA must never inherit the cover-trigger's full-width block layout. */
.fb-ed .fb-btn{width:auto;flex:0 0 auto;display:inline-flex}
.fb-ed .fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;border-radius:999px;padding:15px 30px;
  font-family:var(--f-ui);font-size:13.5px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:#fff;background:var(--fb-accent-grad);
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--fb-accent) 66%,transparent);
  transition:filter .18s}
.fb-ed .fb-btn:hover{filter:brightness(1.07);color:#fff}
.fb-ed .fb-btn-soft{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.fb-ed .fb-btn-soft:hover{border-color:color-mix(in srgb,var(--fb-accent) 45%,transparent);
  color:var(--fb-accent);filter:none}

.fb-ed-note{font-family:var(--f-ui);font-size:13.5px;color:var(--muted);margin:0}
.fb-ed-note a{color:var(--fb-accent);text-decoration:underline;text-underline-offset:2px}

/* ── Categories / Tag / Share ───────────────────────────────────────── */
.fb-ed-metablock{margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-family:var(--f-ui);font-size:14px;color:var(--muted)}
.fb-ed-metablock p{margin:0 0 9px}
.fb-ed-metablock strong{color:var(--ink);font-weight:500}
.fb-ed-metablock a{color:var(--muted)}
.fb-ed-metablock a:hover{color:var(--fb-accent)}
/* Glyph share links — same treatment as the drawer's .dr-follow. */
.fb-ed-share{display:flex;align-items:center;gap:16px;margin-top:14px !important}
.fb-ed-share a{color:var(--ink);font-family:var(--f-body);font-size:1.05rem;line-height:1;
  text-decoration:none;transition:color .18s}
.fb-ed-share a:hover{color:var(--fb-accent)}

/* ── Previous editions — small heading ──────────────────────────────── */
.fb-ed-past-head h2{font-family:var(--f-serif);font-weight:400;
  font-size:clamp(1.35rem,1.9vw,1.7rem);margin:0 0 12px}
hr.fb-rule{border:0;height:1px;background:var(--line);margin:0 0 44px}

.fb-ed-grid{display:grid;grid-template-columns:repeat(var(--fb-cols,4),minmax(0,1fr));gap:32px}
.fb-ed-card{margin:0}
.fb-ed-card .fb-ed-cover-btn{border:1px solid var(--line-soft);border-radius:16px;
  background:var(--surface-2);padding:18px}
.fb-ed-card .fb-ed-cover-btn:hover{box-shadow:0 18px 36px -22px rgba(30,34,48,.4)}
.fb-ed-card .fb-ed-cover-btn img{max-height:none}
.fb-ed-card figcaption{margin-top:16px;text-align:center;font-family:var(--f-serif);
  font-size:1.15rem;color:var(--muted)}

/* ── Optional standalone chrome (chrome="1") ────────────────────────── */
.fb-ed-top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line-soft)}
.fb-ed-top-right{display:flex;align-items:center;gap:10px;font-family:var(--f-pill)}
.fb-dot{color:var(--faint)}

/* ── Locked modal ───────────────────────────────────────────────────── */
.fb-ed-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;background:rgba(24,24,26,.9);opacity:0;transition:opacity .22s ease}
.fb-ed-modal[hidden]{display:none}
.fb-ed-modal.is-open{opacity:1}
.fb-ed-modal-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;
  text-align:center;max-height:100%;
  transform:translateY(8px) scale(.985);transition:transform .26s cubic-bezier(.16,1,.3,1)}
.fb-ed-modal.is-open .fb-ed-modal-inner{transform:none}
.fb-ed-modal-title{font-family:var(--f-serif);font-weight:400;color:#fff;
  font-size:clamp(2rem,4vw,2.8rem);margin:0}
.fb-ed-modal-cover{background:#fff;border-radius:20px;padding:18px;
  box-shadow:0 50px 90px -35px rgba(0,0,0,.8);max-height:54vh;overflow:hidden}
.fb-ed-modal-cover img{max-height:calc(54vh - 36px);width:auto;border-radius:4px}
.fb-ed-modal-alt{font-family:var(--f-ui);font-size:13.5px;color:rgba(255,255,255,.72);margin:0}
.fb-ed-modal-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fb-ed-modal-close{position:fixed;top:26px;right:28px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.14);transition:background .18s}
.fb-ed-modal-close:hover{background:rgba(255,255,255,.26)}
body.fb-modal-open{overflow:hidden}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .fb-ed-hero{grid-template-columns:1fr;gap:38px;max-width:640px;margin:0 auto}
  .fb-ed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .fb-ed-grid{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .fb-ed-cover-btn,.fb-ed-modal,.fb-ed-modal-inner{transition:none}
  .fb-ed-cover-btn:hover{transform:none}
}

/* ── Explicit muted tones (must follow the blanket colour rule) ───────── */
.fb-ed .fb-ed-meta{color:var(--faint)}
.fb-ed .fb-ed-desc,.fb-ed .fb-ed-note,.fb-ed .fb-ed-metablock,
.fb-ed .fb-ed-metablock a,.fb-ed .fb-ed-card figcaption{color:var(--muted)}
.fb-ed .fb-ed-metablock strong{color:var(--ink)}
.fb-ed .fb-btn,.fb-ed .fb-btn:hover{color:#fff}
.fb-ed .fb-btn-soft{color:var(--ink)}
.fb-ed .fb-ed-modal-title{color:#fff}
.fb-ed .fb-ed-modal-alt{color:rgba(255,255,255,.72)}
.fb-ed .fb-ed-modal-alt a{color:#fff}
.fb-ed .fb-ed-lock{color:#fff}