/* ---- page shell (stage template) ---- */
html:has(body.wme-body) { background: #1c1712; }
body.wme-body { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; background: #1c1712; color: #e8dcc0; }
body.wme-body .wme-main { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-height: 60vh; }
body.wme-body .wme-main > * { max-width: none !important; }
body.wme-body .wme { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
.wme-topbar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 20px; height: 68px;
  background: rgba(23,19,14,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #34291f;
}
.wme-brand { display: flex; align-items: baseline; gap: 10px; color: #e8dcc0; text-decoration: none; }
.wme-brand img { max-height: 40px; width: auto; }
.wme-brand-name { font-family: 'IM Fell English', Georgia, serif; font-size: 21px; letter-spacing: .03em; }
.wme-brand-sub { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; letter-spacing: .2em; color: #8a7c66; text-transform: uppercase; }
.wme-nav { display: flex; align-items: center; gap: 20px; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.wme-nav a { color: #e8dcc0; text-decoration: none; white-space: nowrap; }
.wme-nav a:hover { color: #c9a15a; }
.wme-nav .wme-nav-cta { padding: 9px 14px; background: #6d2320; border: 1px solid #8a3330; color: #f5ead3; }
.wme-nav .wme-nav-cta:hover { background: #82302c; color: #f5ead3; }
@media (max-width: 700px) {
  .wme-topbar { height: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 18px; }
  .wme-nav { flex-wrap: wrap; gap: 14px; }
}

/* Mystery Night Engine — public styles. Colours come from the Branding screen
   as CSS variables (see wme_inline_vars). Theme independent by design. */

.wme {
  --bg: #1c1712;
  --panel: #201a14;
  --ink: #e8dcc0;
  --gold: #c9a15a;
  --blood: #6d2320;
  --line: #3d3125;
  --dim: #a1937c;
  --quiet: #8a7c66;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 90px;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.7;
}
.wme *, .wme *::before, .wme *::after { box-sizing: border-box; }
.wme img { max-width: 100%; height: auto; }
.wme h1, .wme h2, .wme h3 { font-family: 'IM Fell English', Georgia, serif; font-weight: 400; color: #f2e7cd; }
.wme h2 { margin: 0 0 20px; font-size: clamp(32px, 5vw, 50px); line-height: 1.04; }
.wme h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.wme p, .wme li, .wme label, .wme input, .wme textarea, .wme select, .wme td { font-family: Georgia, 'Times New Roman', serif; }
.wme p { margin-block: 0 14px; text-wrap: pretty; }
.wme a { color: var(--gold); text-decoration: none; }
.wme a:hover { color: #ecd9ab; }

.wme-eyebrow, .wme-num, .wme-fine, .wme-tab span, .wme-cue {
  font-family: 'Courier Prime', ui-monospace, monospace;
}
.wme-eyebrow { margin: 0 0 10px; font-size: 10px; letter-spacing: .2em; color: var(--quiet); text-transform: uppercase; }
.wme-num { margin: 0 0 12px; font-size: 10px; letter-spacing: .28em; color: var(--blood); text-transform: uppercase; }
.wme-gold { color: var(--gold); }
.wme-fine { margin: 14px 0 0; font-size: 11px; line-height: 1.9; letter-spacing: .06em; color: var(--quiet); }
.wme-body { max-width: 660px; font-size: 19px; line-height: 1.72; color: #bcae93; }
.wme-grid-2 .wme-body, .wme-grid-3 .wme-body { max-width: none; }
.wme-pull { margin: 24px 0 0; font-size: 19px; line-height: 1.7; font-style: italic; color: #d8cbaf; }
.wme-spaced { margin-top: 30px; }
.wme-sec { margin: 0 0 72px; }
.wme-panel { padding: 34px; background: var(--panel); border: 1px solid var(--line); }

/* ---- hero ---- */
.wme-hero { padding: 70px 0 34px; text-align: center; }
.wme-hero { padding-bottom: 30px; }
.wme-hero p { margin-left: auto; margin-right: auto; }
.wme-hero .wme-eyebrow { font-size: 10px; letter-spacing: .32em; }
/* Stacked hero title, as designed: "The" / MAIN WORD / gold script word / MYSTERY */
.wme-hero-the { margin: 0; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 24px; color: #a8945f; }
.wme-title { margin: -6px 0 0; font-size: clamp(48px, 11vw, 118px); line-height: .88; letter-spacing: 0; text-transform: uppercase; }
.wme-title .wme-title-script { display: block; font-style: italic; text-transform: none; color: #c9a15a; }
.wme-hero-tail { margin: 14px 0 0; font-family: 'Courier Prime', ui-monospace, monospace; font-size: clamp(11px, 2.3vw, 15px); letter-spacing: .4em; color: #a1937c; text-transform: uppercase; }
.wme-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0; }
.wme-rule span { display: block; width: 60px; height: 1px; background: #4a3c2c; }
.wme-rule em { color: var(--blood); font-size: 12px; font-style: normal; }
.wme-hook { max-width: 580px; margin: 0 auto 22px; font-size: 22px; line-height: 1.6; font-style: italic; color: #d8cbaf; }
.wme-lede { max-width: 620px; margin: 0 auto; font-size: 19px; line-height: 1.7; color: #bcae93; }
.wme-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.wme-btn, .wme-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 15px 26px; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.wme-btn { background: var(--blood); border: 1px solid #8a3330; color: #f5ead3; }
.wme-btn:hover { background: #82302c; color: #f5ead3; }
.wme-btn-ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.wme-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.wme-btn-sm { padding: 9px 14px; font-size: 10px; }
.wme-btn-wide, .wme-wide { width: 100%; }
.wme-btn-on { background: #4d3a1c; }
.wme-inline { display: inline; margin: 0; }

/* ---- fact strip ---- */
.wme-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 10px 0 46px; background: var(--line); border: 1px solid var(--line); }
.wme-facts > div { padding: 20px 14px; background: var(--panel); text-align: center; }
.wme-facts .wme-eyebrow { font-size: 9px; }
.wme-fact { margin: 0; font-family: 'IM Fell English', Georgia, serif; font-size: 24px; line-height: 1.1; color: #f2e7cd; }
.wme-heroshot { margin: 0 0 46px; border: 1px solid var(--line); }
.wme-heroshot img { display: block; width: 100%; }

/* ---- CSS-only image switchers (evidence board, house plans) ---- */
.wme-viewer { margin: 0 0 58px; }
.wme-switch { position: relative; }
.wme-switch > input { position: absolute; opacity: 0; pointer-events: none; }
.wme-shot { display: none; margin: 0; border: 1px solid var(--line); background: #14100c; }
.wme-switch-light .wme-shot { background: #efeae0; }
.wme-shot img { display: block; width: 100%; }
.wme-shot figcaption { padding: 12px 14px; background: var(--panel); font-size: 18px; line-height: 1.6; font-style: italic; color: #bcae93; }
.wme-switch > input:nth-of-type(1):checked ~ .wme-shot-0,
.wme-switch > input:nth-of-type(2):checked ~ .wme-shot-1,
.wme-switch > input:nth-of-type(3):checked ~ .wme-shot-2,
.wme-switch > input:nth-of-type(4):checked ~ .wme-shot-3 { display: block; }
.wme-tabs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.wme-tab { display: block; border: 1px solid var(--line); background: #14100c; cursor: pointer; }
.wme-tab img { display: block; width: 100%; height: 116px; object-fit: cover; object-position: top; opacity: .55; }
.wme-tab span { display: block; padding: 8px 9px; background: var(--panel); font-size: 9px; letter-spacing: .14em; color: #9c8d75; text-transform: uppercase; }
.wme-tab:hover { border-color: var(--gold); }
.wme-switch > input:nth-of-type(1):checked ~ .wme-tabs-row .wme-tab-0,
.wme-switch > input:nth-of-type(2):checked ~ .wme-tabs-row .wme-tab-1,
.wme-switch > input:nth-of-type(3):checked ~ .wme-tabs-row .wme-tab-2,
.wme-switch > input:nth-of-type(4):checked ~ .wme-tabs-row .wme-tab-3 { border-color: var(--gold); }
.wme-switch > input:nth-of-type(1):checked ~ .wme-tabs-row .wme-tab-0 img,
.wme-switch > input:nth-of-type(2):checked ~ .wme-tabs-row .wme-tab-1 img,
.wme-switch > input:nth-of-type(3):checked ~ .wme-tabs-row .wme-tab-2 img,
.wme-switch > input:nth-of-type(4):checked ~ .wme-tabs-row .wme-tab-3 img { opacity: 1; }
.wme-switch > input:focus-visible ~ .wme-tabs-row .wme-tab { outline: 1px solid var(--gold); }

/* ---- grids ---- */
.wme-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.wme-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.wme-boxed { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wme-boxed > div { padding: 24px; background: var(--panel); }
.wme-boxed p:last-child { margin-bottom: 0; }
.wme-boxed p { font-size: 17px; line-height: 1.6; color: #b3a58b; }
.wme-boxed h3 { font-size: 23px; }

.wme-plates { gap: 16px; }
.wme-plates figure { margin: 0; border: 1px solid var(--line); background: #efeae0; }
.wme-plates img { display: block; width: 100%; }
.wme-plates figcaption { padding: 12px 13px; background: var(--panel); }
.wme-plates figcaption strong { display: block; font-family: 'IM Fell English', Georgia, serif; font-weight: 400; font-size: 20px; color: #f2e7cd; }
.wme-plates figcaption span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--dim); }

.wme-price { margin: 0 0 14px; font-family: 'IM Fell English', Georgia, serif; font-size: 60px; line-height: 1; color: #f2e7cd; }
.wme-price span { font-size: 26px; font-style: italic; color: var(--dim); }
.wme-list { margin: 0; padding: 0; list-style: none; }
.wme-list li { padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid #2e251b; font-size: 18px; line-height: 1.5; color: #d8cbaf; }
.wme-list li:last-child { border-bottom: none; }

.wme-addon { padding: 38px 34px; background: #1f150f; border: 1px solid #57342a; }
.wme-plate { margin: 0 0 18px; border: 1px solid #57342a; background: #efeae0; }
.wme-plate img { display: block; width: 100%; }
.wme-plate figcaption { padding: 11px 13px; background: #241a13; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; line-height: 1.8; letter-spacing: .14em; color: #a08265; text-transform: uppercase; }

/* ---- forms ---- */
.wme-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wme-form label { display: flex; flex-direction: column; gap: 7px; }
.wme-form label.wme-wide, .wme-form > button { grid-column: 1 / -1; }
.wme-form span { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; color: var(--quiet); text-transform: uppercase; }
.wme input[type="text"], .wme input[type="email"], .wme input[type="tel"], .wme input[type="date"],
.wme input[type="number"], .wme input[type="password"], .wme textarea, .wme select {
  width: 100%; padding: 12px; background: #191410; border: 1px solid var(--line);
  color: var(--ink); font-family: Georgia, serif; font-size: 17px; outline: none;
}
.wme textarea { resize: vertical; }
.wme input:focus, .wme textarea:focus, .wme select:focus { border-color: var(--gold); }
.wme-check { flex-direction: row !important; align-items: center; gap: 10px !important; }
.wme-check span { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.wme-hp { position: absolute !important; left: -9999px !important; }
.wme-notice { padding: 14px 16px; margin: 0 0 18px; border: 1px solid var(--line); background: #191410; font-size: 17px; }
.wme-notice.wme-bad { border-color: #8f4b45; color: #e6c3bd; }
.wme-notice.wme-good { border-color: #57472a; color: #ecd9ab; }

/* ---- portals ---- */
.wme-portal { padding-top: 46px; }
.wme-gate { max-width: 460px; margin: 40px auto; padding: 34px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.wme-gate h2 { font-size: 38px; }
.wme-gate form { display: flex; flex-direction: column; gap: 12px; }
.wme-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.wme-head-actions { display: flex; gap: 10px; }
.wme-charname { margin: 0 0 10px; font-size: clamp(38px, 6.6vw, 68px); line-height: 1; }
.wme-role { margin: 0; max-width: 900px; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.25; color: var(--gold); }
.wme-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 40px; background: var(--line); border: 1px solid var(--line); }
.wme-stats > div { padding: 18px; background: var(--panel); }
.wme-stat { margin: 0; font-family: 'IM Fell English', Georgia, serif; font-size: 26px; color: #f2e7cd; }
.wme-sub { margin: 0 0 22px; font-size: 17px; line-height: 1.65; color: var(--dim); }
.wme-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: 15px; }
.wme-table th { padding: 12px 14px; background: #191410; border-bottom: 1px solid var(--line); font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; font-weight: 400; letter-spacing: .16em; color: var(--quiet); text-transform: uppercase; text-align: left; }
.wme-table td { padding: 14px; background: var(--panel); border-bottom: 1px solid #2e251b; color: #d8cbaf; vertical-align: top; }
.wme-table code { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; color: var(--gold); }
.wme-rsvp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; margin-bottom: 34px; background: var(--panel); border: 1px solid var(--line); }
.wme-rsvp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.wme-prompt { margin: 0; font-size: 21px; color: #d8cbaf; }
.wme-files details { background: var(--panel); border: 1px solid var(--line); border-bottom: none; }
.wme-files details:last-child { border-bottom: 1px solid var(--line); }
.wme-files summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 20px; cursor: pointer; }
.wme-files summary em { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 10px; font-style: normal; letter-spacing: .16em; color: var(--quiet); text-transform: uppercase; white-space: nowrap; }
.wme-files details p { padding: 0 20px; font-size: 17px; line-height: 1.7; color: #bcae93; }
.wme-files details p:last-child { padding-bottom: 20px; }
.wme-secret { padding: 26px; background: #1f150f; border: 1px solid #57342a; }
.wme-secret-text { margin: 0 0 18px; font-size: 20px; line-height: 1.7; color: var(--ink); }
.wme-charbody { margin-bottom: 18px; gap: 34px; }
.wme-charbody .wme-body { max-width: none; font-size: 19px; line-height: 1.72; }
.wme-charbody .wme-num { margin-bottom: 14px; }
.wme-placeholder { display: flex; align-items: flex-end; padding: 14px; border: 1px solid var(--line);
  background-color: #1f1a13; background-image: repeating-linear-gradient(135deg, rgba(201,161,90,.07) 0 2px, rgba(0,0,0,0) 2px 11px); }
.wme-placeholder span { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; color: #6b5f4d; text-transform: uppercase; }
.wme-ph-tall { aspect-ratio: 3 / 4; }
.wme-diet { padding: 22px 24px; margin-top: 18px; background: var(--panel); border: 1px solid var(--line); }
.wme-diet form { display: flex; gap: 12px; align-items: flex-start; }

/* ---- footer ---- */
.wme-footer { padding-top: 40px; margin-top: 20px; border-top: 1px solid #34291f; }
.wme-footer p { font-size: 17px; color: var(--dim); }
.wme-socials { display: flex; flex-wrap: wrap; gap: 16px; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ---- character page, 15-role cast ---- */
.wme-portrait { margin: 0; border: 1px solid var(--line); background: #14100c; }
.wme-portrait img { display: block; width: 100%; }
.wme-portrait figcaption { padding: 11px 13px; background: var(--panel); font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; line-height: 1.7; letter-spacing: .14em; color: var(--quiet); text-transform: uppercase; }
.wme-playrow { align-items: start; margin-bottom: 18px; grid-template-columns: .85fr 1.15fr; }
.wme-playrow > div > p:not(.wme-eyebrow) { font-size: 18px; line-height: 1.68; }
.wme-play { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.wme-play li { position: relative; padding-left: 28px; font-size: 18px; line-height: 1.68; color: #b3a58b; }
.wme-play li::before { content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 1px; background: var(--blood); }
.wme-lines { padding: 26px; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); }
.wme-line-row { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding-left: 16px; margin-top: 18px; border-left: 1px solid var(--line); }
.wme-cue { margin: 0; font-size: 9px; line-height: 1.7; letter-spacing: .14em; color: var(--quiet); text-transform: uppercase; }
.wme-lines .wme-line { margin: 0; font-size: 18px; line-height: 1.6; font-style: italic; color: #d8cbaf; }
.wme-secret-list { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: sec; }
.wme-secret-list li { counter-increment: sec; display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #38231c; font-size: 17px; line-height: 1.7; color: #e0d3b7; }
.wme-secret-list li::before { content: counter(sec); font-family: 'IM Fell English', Georgia, serif; font-size: 26px; line-height: 1; color: #a8443c; }
.wme-sealed { padding: 24px 26px; margin: 0 0 18px; background: #191410; border: 1px solid var(--blood); }
.wme-sealed .wme-eyebrow { color: #a8443c; }
.wme-victim { padding: 24px 26px; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); }
.wme-victim-name { margin: 0 0 10px; font-family: 'IM Fell English', Georgia, serif; font-size: 28px; color: #f2e7cd; }

/* ---- narrow screens ---- */
@media (max-width: 860px) {
  .wme-grid-2, .wme-grid-3, .wme-form { grid-template-columns: 1fr; }
  .wme-facts { grid-template-columns: repeat(2, 1fr); }
  .wme-stats { grid-template-columns: repeat(2, 1fr); }
  .wme-boxed { gap: 1px; }
}
@media (max-width: 720px) {
  .wme { font-size: 17px; }
  .wme-line-row { grid-template-columns: 1fr; gap: 8px; }
  .wme-tabs-row { grid-template-columns: repeat(2, 1fr); }
  .wme-head { flex-direction: column; align-items: flex-start; }
  .wme-table, .wme-table thead, .wme-table tbody, .wme-table tr, .wme-table td { display: block; width: 100%; }
  .wme-table thead { display: none; }
  .wme-table td { border-bottom: none; padding: 6px 14px; }
  .wme-table tr { border-bottom: 1px solid #2e251b; padding: 10px 0; }
}

/* ---- host portal specifics ---- */
.wme-form-tight { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; margin-bottom: 26px; background: var(--panel); border: 1px solid var(--line); }
.wme-form-tight label { display: flex; flex-direction: column; gap: 6px; }
.wme-form-tight > button, .wme-form-tight .wme-span { grid-column: 1 / -1; }
.wme-form-tight span { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; letter-spacing: .18em; color: var(--quiet); text-transform: uppercase; }
.wme-details { padding: 20px 22px; margin-bottom: 26px; background: var(--panel); border: 1px solid var(--line); }
.wme-details summary { font-size: 18px; cursor: pointer; }
.wme-bulk { width: 100%; margin: 14px 0 12px; }
.wme-thanks { padding: 22px 24px; margin-top: 34px; background: var(--panel); border: 1px solid var(--line); }
.wme-thanks textarea, .wme-thanks input[type="text"] { margin-bottom: 12px; }
.wme-codefield { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 20px; letter-spacing: .3em; text-align: center; }
.wme-grid { display: grid; }
.wme-tr, .wme-th { display: grid; grid-template-columns: 1.15fr 1.25fr 1fr .8fr .9fr .6fr; gap: 12px; padding: 13px 16px; align-items: start; }
.wme-th { background: #191410; border-bottom: 1px solid var(--line); font-family: 'Courier Prime', ui-monospace, monospace; font-size: 9px; letter-spacing: .16em; color: var(--quiet); text-transform: uppercase; }
.wme-tr { background: var(--panel); border-bottom: 1px solid #2e251b; font-size: 15px; color: #d8cbaf; }
.wme-tr:last-child { border-bottom: none; }
.wme-code { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; color: var(--gold); }
.wme-dim { color: var(--dim); }
.wme-break { overflow-wrap: anywhere; }
.wme-empty { padding: 26px 16px; margin: 0; background: var(--panel); font-size: 17px; font-style: italic; color: var(--quiet); }
.wme-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.wme-icon { padding: 4px 7px; background: none; border: 1px solid transparent; color: #6b5f4d; font-size: 15px; line-height: 1; cursor: pointer; }
.wme-icon:hover { color: var(--gold); border-color: var(--line); }
.wme-inline-select { padding: 7px 8px !important; font-size: 14px !important; }
.wme-portrait-img { display: block; width: 100%; border: 1px solid var(--line); }
@media print { .wme-noprint { display: none !important; } }
@media (max-width: 860px) {
  .wme-form-tight { grid-template-columns: 1fr; }
  .wme-tr, .wme-th { grid-template-columns: 1fr; }
  .wme-th { display: none; }
  .wme-row-actions { justify-content: flex-start; }
}

/* Build stamp: readable by a page fetch, invisible on screen. */
.wme-build { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wme-foot-name { margin: 0 0 10px; font-family: 'IM Fell English', Georgia, serif; font-size: 24px; color: #f2e7cd; }

/* =====================================================================
   Specificity hardening. The broad element rules above (.wme p, .wme-boxed p)
   outrank single utility classes, which stole the label styling. These
   two-class selectors restore the design's exact values and win on both
   specificity and order. Values mirror the design file one for one.
   ===================================================================== */
.wme .wme-eyebrow {
  margin: 0 0 10px; font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 10px; line-height: 1.6; letter-spacing: .2em; color: var(--quiet);
  text-transform: uppercase;
}
.wme .wme-num {
  margin: 0 0 12px; font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 10px; line-height: 1.6; letter-spacing: .28em; color: var(--blood);
  text-transform: uppercase;
}
.wme .wme-fine {
  margin: 14px 0 0; font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 11px; line-height: 1.9; letter-spacing: .06em; color: var(--quiet);
  text-transform: none;
}
.wme .wme-gold { color: var(--gold); }
.wme .wme-cue {
  margin: 0; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 10px;
  line-height: 1.7; letter-spacing: .14em; color: var(--quiet); text-transform: uppercase;
}
.wme .wme-body { font-size: 19px; line-height: 1.72; color: #bcae93; }
.wme .wme-lines .wme-line { font-size: 19px; line-height: 1.6; font-style: italic; color: #d8cbaf; }
.wme .wme-play li { font-size: 18px; line-height: 1.68; color: #b3a58b; }
.wme .wme-secret-list li { font-size: 18px; line-height: 1.7; color: #e0d3b7; }
.wme .wme-secret-text { font-size: 20px; line-height: 1.7; color: var(--ink); }
.wme .wme-sealed p { font-size: 18px; line-height: 1.72; color: #d8cbaf; }
.wme .wme-victim p { font-size: 18px; line-height: 1.7; color: #bcae93; }
.wme .wme-playrow > div > p { font-size: 18px; line-height: 1.68; color: #b3a58b; }
.wme .wme-boxed h3 { font-family: 'IM Fell English', Georgia, serif; font-size: 23px; }

/* Equal-height action buttons: an <a> and a <button> render differently unless
   their box model is stated outright. */
.wme .wme-rsvp-btns > *, .wme .wme-rsvp-btns form { display: flex; }
.wme .wme-rsvp-btns .wme-btn,
.wme .wme-rsvp-btns .wme-btn-ghost {
  padding: 14px 22px; font-size: 11px; line-height: 1.2; letter-spacing: .18em;
  min-height: 46px; box-sizing: border-box;
}
.wme .wme-head-actions .wme-btn-ghost { padding: 9px 14px; font-size: 10px; line-height: 1.2; min-height: 34px; }

/* Even rhythm between the character page's stacked blocks. */
.wme-character > section, .wme-character > .wme-lines, .wme-character > .wme-boxed,
.wme-character > .wme-grid-2, .wme-character > .wme-charbody { margin-bottom: 18px; }
.wme-character > .wme-charbody { margin-bottom: 26px; }
.wme-character > .wme-rsvp-bar { margin-bottom: 26px; }
.wme-character > section:last-child { margin-bottom: 0; }

/* Same cause, display type: these single-class rules were losing font-family to
   .wme p. Restated at two-class specificity. */
.wme .wme-role { font-family: 'IM Fell English', Georgia, serif; font-style: italic;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.25; color: var(--gold); }
.wme .wme-charname { font-family: 'IM Fell English', Georgia, serif; }
.wme .wme-fact { font-family: 'IM Fell English', Georgia, serif; font-size: 24px; line-height: 1.1; color: #f2e7cd; }
.wme .wme-price { font-family: 'IM Fell English', Georgia, serif; font-size: 60px; line-height: 1; color: #f2e7cd; }
.wme .wme-price span { font-size: 26px; font-style: italic; color: var(--dim); }
.wme .wme-stat { font-family: 'IM Fell English', Georgia, serif; font-size: 26px; color: #f2e7cd; }
.wme .wme-victim-name, .wme .wme-foot-name { font-family: 'IM Fell English', Georgia, serif; }
.wme .wme-hero-the { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 24px; color: #a8945f; }
.wme .wme-hero-tail { font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: clamp(11px, 2.3vw, 15px); letter-spacing: .4em; color: var(--dim); text-transform: uppercase; }
.wme .wme-hook { font-size: 22px; line-height: 1.6; font-style: italic; color: #d8cbaf; }
.wme .wme-lede { font-size: 19px; line-height: 1.7; color: #bcae93; }
.wme .wme-prompt { font-size: 21px; color: #d8cbaf; }
.wme .wme-pull { font-size: 19px; line-height: 1.7; font-style: italic; color: #d8cbaf; }
.wme .wme-empty { font-size: 17px; font-style: italic; color: var(--quiet); }
.wme .wme-sub { font-size: 17px; line-height: 1.65; color: var(--dim); }
.wme .wme-notice { font-size: 17px; }
.wme .wme-plates figcaption strong { font-family: 'IM Fell English', Georgia, serif; font-size: 20px; color: #f2e7cd; }
.wme .wme-plate figcaption, .wme .wme-portrait figcaption, .wme .wme-build,
.wme .wme-tab span, .wme .wme-code, .wme .wme-table th {
  font-family: 'Courier Prime', ui-monospace, monospace;
}
.wme .wme-form span, .wme .wme-form-tight span { font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; color: var(--quiet); text-transform: uppercase; }
.wme .wme-btn, .wme .wme-btn-ghost, .wme .wme-nav, .wme .wme-nav a,
.wme .wme-files summary em { font-family: 'Courier Prime', ui-monospace, monospace; }

/* =====================================================================
   Readability pass. The design file is viewed on a scaled canvas, so its
   raw px values render small in a real 980px browser column. Everything
   below is the same hierarchy, stepped up so it reads on screen, with the
   small-caps labels lightened enough to be legible on the dark ground.
   ===================================================================== */
.wme { font-size: 21px; line-height: 1.7; }

/* small-caps labels: bigger, and no longer near-black on near-black */
.wme .wme-eyebrow { font-size: 12px; letter-spacing: .18em; color: #b09f85; }
.wme .wme-eyebrow.wme-gold, .wme .wme-gold { color: #d4ac63; }
.wme .wme-num { font-size: 12px; letter-spacing: .24em; color: #b04b43; }
.wme .wme-cue { font-size: 12px; letter-spacing: .12em; color: #a3937a; }
.wme .wme-fine { font-size: 13px; }
.wme .wme-tab span { font-size: 11px; letter-spacing: .12em; color: #b6a68c; }
.wme .wme-table th, .wme .wme-th { font-size: 11px; letter-spacing: .12em; color: #b09f85; }
.wme .wme-portrait figcaption, .wme .wme-plate figcaption { font-size: 11px; letter-spacing: .12em; }

/* reading copy */
.wme .wme-body, .wme .wme-charbody .wme-body { font-size: 21px; line-height: 1.7; }
.wme .wme-hook { font-size: 25px; }
.wme .wme-lede { font-size: 21px; }
.wme .wme-pull { font-size: 21px; }
.wme .wme-play li { font-size: 20px; line-height: 1.65; }
.wme .wme-playrow > div > p { font-size: 20px; line-height: 1.65; }
.wme .wme-lines .wme-line { font-size: 21px; line-height: 1.55; }
.wme .wme-secret-text { font-size: 22px; }
.wme .wme-secret-list li { font-size: 20px; line-height: 1.65; }
.wme .wme-sealed p { font-size: 20px; line-height: 1.68; }
.wme .wme-victim p { font-size: 20px; line-height: 1.68; }
.wme .wme-boxed p { font-size: 20px; line-height: 1.6; }
.wme .wme-list li { font-size: 20px; }
.wme .wme-prompt { font-size: 23px; }
.wme .wme-sub { font-size: 19px; }
.wme .wme-notice { font-size: 19px; }
.wme .wme-files summary { font-size: 22px; }
.wme .wme-files details p { font-size: 19px; }
.wme .wme-boxed h3 { font-size: 26px; }
.wme .wme-role { font-size: clamp(24px, 2.6vw, 31px); }
.wme .wme-fact { font-size: 27px; }
.wme .wme-stat { font-size: 28px; }
.wme .wme-victim-name { font-size: 30px; }
.wme .wme-secret-list li::before { font-size: 28px; }

/* buttons and nav: the caps text was too small to read */
.wme .wme-btn, .wme .wme-btn-ghost { font-size: 14px; letter-spacing: .16em; padding: 16px 28px; }
.wme .wme-btn-sm, .wme .wme-head-actions .wme-btn-ghost { font-size: 12px; letter-spacing: .14em; padding: 10px 16px; min-height: 38px; }
.wme .wme-rsvp-btns .wme-btn, .wme .wme-rsvp-btns .wme-btn-ghost { font-size: 13px; letter-spacing: .14em; padding: 15px 24px; min-height: 50px; }
.wme .wme-form span, .wme .wme-form-tight span { font-size: 12px; letter-spacing: .14em; color: #b09f85; }
.wme input, .wme textarea, .wme select { font-size: 19px; }
.wme-nav { font-size: 13px; letter-spacing: .13em; }
.wme-nav .wme-nav-cta { padding: 11px 16px; }
.wme-brand-name { font-size: 24px; }
.wme-brand-sub { font-size: 11px; letter-spacing: .16em; }

/* The boxed grid paints the divider colour behind its cells, so a short cell
   left a brown block. Cells stretch to the row height again. */
.wme .wme-playrow, .wme .wme-boxed { align-items: stretch; }
.wme .wme-boxed > div { background: var(--panel); }

/* =====================================================================
   Motion. Two pieces only: lamplight behind the hero, and the evidence
   board reacting to the hand. Everything here is CSS, and all of it stops
   for anyone who asks their system for less motion.
   ===================================================================== */
.wme-hero { position: relative; }
.wme-hero::before {
  content: ''; position: absolute; top: -40px; left: 50%; width: 560px; height: 520px;
  margin-left: -280px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(201,161,90,.14), rgba(0,0,0,0) 66%);
  animation: wme-flicker 7s ease-in-out infinite;
}
.wme-hero > * { position: relative; z-index: 1; }
@keyframes wme-flicker {
  0%, 100% { opacity: .5; }
  43% { opacity: .74; }
  55% { opacity: .36; }
  78% { opacity: .64; }
}

/* the board: shown stage fades up, thumbnails answer the cursor */
.wme-shot { animation: wme-rise .45s ease both; }
@keyframes wme-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.wme-tab { transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease; }
.wme-tab img { transition: opacity .25s ease; }
.wme-tab:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.wme-tab:hover img { opacity: .85; }
.wme-switch > input:nth-of-type(1):checked ~ .wme-tabs-row .wme-tab-0,
.wme-switch > input:nth-of-type(2):checked ~ .wme-tabs-row .wme-tab-1,
.wme-switch > input:nth-of-type(3):checked ~ .wme-tabs-row .wme-tab-2,
.wme-switch > input:nth-of-type(4):checked ~ .wme-tabs-row .wme-tab-3 {
  box-shadow: 0 0 0 1px rgba(201,161,90,.55), 0 8px 22px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  .wme-hero::before { animation: none; opacity: .55; }
  .wme-shot { animation: none; }
  .wme-tab, .wme-tab img { transition: none; }
  .wme-tab:hover { transform: none; }
}

/* ---- the journal recording ---- */
.wme-listen { padding: 32px 34px; margin: 0 0 58px; background: #1f150f; border: 1px solid #57342a; }
.wme-listen .wme-listen-title { margin: 0 0 12px; font-family: 'IM Fell English', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; color: #f2e7cd; }
.wme-listen .wme-body { max-width: 640px; margin-bottom: 20px; }
.wme .wme-audio { display: block; width: 100%; max-width: 560px; height: 44px;
  border: 1px solid #57342a; border-radius: 0; background: #14100c; color-scheme: dark; }
.wme-transcript { margin-top: 18px; border-top: 1px solid #38231c; padding-top: 14px; }
.wme-transcript summary { font-family: 'Courier Prime', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .16em; color: #b09f85; text-transform: uppercase; cursor: pointer; }
.wme-transcript p { margin: 14px 0 0; max-width: 660px; font-size: 19px; line-height: 1.7; color: #bcae93; }

/* =====================================================================
   Scroll motion. Scroll-driven CSS animation only, wrapped in @supports:
   browsers without it simply show the content, so nothing can ever be
   left invisible waiting on a script. No JavaScript involved.
   ===================================================================== */
@supports (--wme-retired: 1) {
  @media (prefers-reduced-motion: no-preference) {
    .wme-book > .wme-sec,
    .wme-book > .wme-viewer,
    .wme-book > .wme-listen,
    .wme-book > .wme-facts,
    .wme-book > .wme-heroshot {
      animation: wme-reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    /* the plates and panels inside a section arrive a beat after it */
    .wme-plates figure {
      animation: wme-reveal-soft linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes wme-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes wme-reveal-soft {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* the collection plates warm under the cursor, like paper near a lamp */
.wme-plates figure { transition: transform .25s ease, box-shadow .3s ease, filter .3s ease; }
.wme-plates figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  filter: sepia(.12) saturate(1.06) brightness(1.03);
}

/* buttons and links settle rather than snap */
.wme .wme-btn, .wme .wme-btn-ghost, .wme-nav a { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.wme-files details summary { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .wme-plates figure { transition: none; }
  .wme-plates figure:hover { transform: none; box-shadow: none; filter: none; }
}

/* =====================================================================
   Reveal on scroll, driven by the tiny site.js observer. The hidden state
   only exists once the script has added .wme-motion, so content is never
   left invisible if the script does not run.
   ===================================================================== */
.wme-motion .wme-rise { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.wme-motion .wme-rise.wme-in { opacity: 1; transform: none; }
.wme-motion .wme-plates figure.wme-rise { transition-duration: .6s; }
.wme-motion .wme-plates figure:nth-child(2).wme-rise { transition-delay: .09s; }
.wme-motion .wme-plates figure:nth-child(3).wme-rise { transition-delay: .18s; }

/* superseded by the two candle glows below */
.wme-retired-hero-glow::before {
  background: radial-gradient(circle, rgba(201,161,90,.30), rgba(201,161,90,.08) 45%, rgba(0,0,0,0) 70%);
  animation: wme-flicker 5.5s ease-in-out infinite;
}
@keyframes wme-flicker {
  0%   { opacity: .55; transform: scale(1); }
  9%   { opacity: .95; transform: scale(1.02); }
  17%  { opacity: .62; }
  28%  { opacity: 1; transform: scale(1.035); }
  36%  { opacity: .7; transform: scale(1.01); }
  47%  { opacity: .88; }
  58%  { opacity: .58; transform: scale(1); }
  69%  { opacity: .97; transform: scale(1.025); }
  80%  { opacity: .66; }
  91%  { opacity: .9; transform: scale(1.015); }
  100% { opacity: .55; transform: scale(1); }
}

/* Evidence board and house plan thumbnails lift toward the cursor. */
.wme .wme-tab { transition: transform .22s ease, border-color .22s ease, box-shadow .28s ease; }
.wme .wme-tab img { transition: filter .28s ease; }
.wme .wme-tab:hover { transform: translateY(-5px); border-color: #c9a15a; box-shadow: 0 12px 26px rgba(0,0,0,.55); }
.wme .wme-tab:hover img { filter: brightness(1.12) saturate(1.06); }
.wme .wme-tab:hover span { color: #d4ac63; }

@media (prefers-reduced-motion: reduce) {
  .wme-glow { animation: none !important; opacity: .5; }
  .wme .wme-tab, .wme .wme-tab:hover { transition: none; transform: none; box-shadow: none; }
}

/* =====================================================================
   Candlelight. A warm pool of light at each side of the hero, each
   flickering on its own timing so they never pulse in unison. A photo
   dropped into either slot sits inside its own glow.
   ===================================================================== */
.wme-hero { position: relative; overflow: hidden; }
.wme-hero::before { content: none; }
.wme-hero > *:not(.wme-glow) { position: relative; z-index: 1; }

.wme-glow {
  position: absolute; bottom: -60px; width: 40vw; max-width: 520px; height: 118%;
  pointer-events: none; z-index: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.wme-glow::after {
  content: ''; position: absolute; bottom: 8%; width: 100%; padding-bottom: 100%;
  background: radial-gradient(circle at 50% 60%,
    rgba(255,196,102,.40) 0%, rgba(214,150,64,.20) 30%,
    rgba(150,88,32,.10) 52%, rgba(0,0,0,0) 74%);
  filter: blur(2px);
}
.wme-glow-l { left: -8vw; animation: wme-candle-a 4.7s ease-in-out infinite; }
.wme-glow-r { right: -8vw; animation: wme-candle-b 6.1s ease-in-out infinite; }
.wme-glow img { position: relative; z-index: 1; display: block; width: auto; max-width: 78%;
  max-height: 74%; object-fit: contain; opacity: .92; }

@keyframes wme-candle-a {
  0%   { opacity: .70; transform: scale(1) translateY(0); }
  12%  { opacity: .98; transform: scale(1.035) translateY(-2px); }
  23%  { opacity: .74; transform: scale(1.005); }
  37%  { opacity: 1;   transform: scale(1.05) translateY(-3px); }
  51%  { opacity: .78; transform: scale(1.01); }
  66%  { opacity: .93; transform: scale(1.03) translateY(-1px); }
  79%  { opacity: .72; transform: scale(1); }
  90%  { opacity: .9;  transform: scale(1.025); }
  100% { opacity: .70; transform: scale(1) translateY(0); }
}
@keyframes wme-candle-b {
  0%   { opacity: .82; transform: scale(1.02); }
  15%  { opacity: .68; transform: scale(1); }
  29%  { opacity: .97; transform: scale(1.045) translateY(-3px); }
  44%  { opacity: .75; transform: scale(1.008); }
  58%  { opacity: 1;   transform: scale(1.04) translateY(-2px); }
  71%  { opacity: .7;  transform: scale(1); }
  86%  { opacity: .94; transform: scale(1.03) translateY(-1px); }
  100% { opacity: .82; transform: scale(1.02); }
}

/* With photos in place the light sits lower and tighter, around the flame. */
.wme-hero-candles .wme-glow { bottom: -30px; }
.wme-hero-candles .wme-glow::after { bottom: 26%; width: 82%; padding-bottom: 82%; }

@media (max-width: 780px) {
  .wme-glow { width: 62vw; opacity: .8; }
  .wme-glow-l { left: -22vw; }
  .wme-glow-r { right: -22vw; }
}

/* =====================================================================
   The candle photographs are lit on solid black, so screen blending drops
   the background away completely: no cut-out needed, and the wax edges
   stay soft instead of showing a traced outline. The flame sits about a
   third down each frame, which is where each glow is centred.
   ===================================================================== */
.wme-hero-candles .wme-glow { bottom: -8%; height: 128%; width: 34vw; max-width: 430px; }
.wme-hero-candles .wme-glow-l { left: -4vw; }
.wme-hero-candles .wme-glow-r { right: -4vw; }
.wme-hero-candles .wme-glow img {
  max-width: 100%; max-height: 100%; opacity: 1;
  mix-blend-mode: screen;
}
/* light centred on the flame, not the candle body */
.wme-hero-candles .wme-glow::after {
  bottom: auto; top: 6%; width: 116%; padding-bottom: 116%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,201,112,.34) 0%, rgba(226,158,68,.19) 26%,
    rgba(154,92,34,.09) 48%, rgba(0,0,0,0) 70%);
}

@media (max-width: 900px) {
  /* one candle reads better than two crowding the title */
  .wme-hero-candles .wme-glow-l { display: none; }
  .wme-hero-candles .wme-glow-r { right: -14vw; width: 52vw; opacity: .85; }
}

/* =====================================================================
   Candle sizing and glow placement, corrected. The photos were running
   most of the hero's height, and the glow was being measured from the top
   of the frame rather than from the flame, so the light sat well above it.
   Both are now anchored to the bottom of the image, with the light centred
   roughly a quarter of the way down each photo, where the flame actually is.
   ===================================================================== */
.wme-hero-candles .wme-glow {
  width: 20vw; max-width: 235px; height: 74%; bottom: 0;
  align-items: flex-end;
}
.wme-hero-candles .wme-glow-l { left: 1.5vw; }
.wme-hero-candles .wme-glow-r { right: 1.5vw; }
.wme-hero-candles .wme-glow img { max-width: 100%; max-height: 100%; }

/* the light, sized to the flame and sitting on it */
.wme-hero-candles .wme-glow::after {
  top: auto; bottom: 52%; left: 50%; width: 230px; height: 230px;
  margin-left: -115px; margin-bottom: -115px; padding-bottom: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,204,120,.38) 0%, rgba(228,160,70,.20) 28%,
    rgba(150,90,34,.09) 50%, rgba(0,0,0,0) 72%);
}
/* the right candle is shorter, so its flame sits lower in the frame */
.wme-hero-candles .wme-glow-r::after { bottom: 48%; }

@media (max-width: 900px) {
  .wme-hero-candles .wme-glow-l { display: none; }
  .wme-hero-candles .wme-glow-r { right: 0; width: 30vw; max-width: 190px; opacity: .9; }
  .wme-hero-candles .wme-glow::after { width: 170px; height: 170px; margin-left: -85px; margin-bottom: -85px; }
}

/* =====================================================================
   The candle files now carry their own transparency, cut from the black
   they were photographed against. Screen blending is no longer needed and
   is switched off: the flicker animation on the container was isolating
   the blend anyway, which is why the black rectangles were still showing.
   ===================================================================== */
.wme-hero-candles .wme-glow img { mix-blend-mode: normal; opacity: .96; }

/* =====================================================================
   Only the light should move. The flicker was on the container, so it was
   scaling the candle photograph along with its glow. The candles now sit
   perfectly still and the animation runs on the pool of light alone.
   ===================================================================== */
.wme-glow, .wme-hero-candles .wme-glow { animation: none; }
.wme-hero-candles .wme-glow-l::after { animation: wme-candle-a 4.7s ease-in-out infinite; }
.wme-hero-candles .wme-glow-r::after { animation: wme-candle-b 6.1s ease-in-out infinite; }
/* the flame itself brightens very slightly with the light */
.wme-hero-candles .wme-glow img { animation: wme-flame 4.7s ease-in-out infinite; }
.wme-hero-candles .wme-glow-r img { animation-duration: 6.1s; }
@keyframes wme-flame {
  0%, 100% { filter: brightness(.97); }
  28% { filter: brightness(1.06); }
  58% { filter: brightness(1.02); }
  79% { filter: brightness(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .wme-glow::after, .wme-glow img { animation: none !important; }
}

/* The pool of light now sits in front of the candle rather than behind it,
   so the flicker plays across the wax and the flame instead of only around
   the outside of the photograph. */
.wme-hero-candles .wme-glow img { z-index: 0; }
.wme-hero-candles .wme-glow::after { z-index: 1; }

/* =====================================================================
   The evidence board sequence. Frames are stacked in one box and faded
   between, the incoming frame arriving a touch larger so each new paper
   reads as settling onto the board rather than blinking into place.
   Without JavaScript the first frame simply sits there as a still.
   ===================================================================== */
.wme-flip { margin: 0 0 30px; }
.wme-flip-stage {
  position: relative; overflow: hidden; background: #14100c;
  border: 1px solid #3d3125; aspect-ratio: 16 / 10;
}
.wme-flip .wme-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.012);
  transition: opacity .52s ease, transform .52s cubic-bezier(.2,.75,.3,1);
}
.wme-flip .wme-frame-on { opacity: 1; transform: scale(1); }
.wme-flip noscript img { position: relative; width: 100%; height: auto; }

.wme-flip-bar { display: flex; align-items: center; gap: 16px; padding: 14px 0 0; }
.wme-flip .wme-flip-play {
  flex: 0 0 auto; padding: 11px 20px; background: none; border: 1px solid #57342a;
  color: #d4ac63; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wme-flip .wme-flip-play:hover { background: #2a1a13; border-color: #c9a15a; color: #f2e7cd; }
.wme-flip .wme-flip-scrub { flex: 1 1 auto; accent-color: #c9a15a; height: 22px; cursor: grab; }
.wme-flip .wme-flip-count {
  flex: 0 0 auto; font-family: 'Courier Prime', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .1em; color: #a3937a;
}
/* the board warms very slightly while it is building */
.wme-flip.wme-playing .wme-flip-stage { box-shadow: inset 0 0 90px rgba(201,161,90,.10); }

@media (prefers-reduced-motion: reduce) {
  .wme-flip .wme-frame { transition: none; transform: none; }
}
@media (max-width: 640px) {
  .wme-flip-bar { flex-wrap: wrap; }
  .wme-flip .wme-flip-scrub { order: 3; flex-basis: 100%; }
}

/* the sequence keeps the captions the old viewer carried */
.wme-flip-caps { position: relative; min-height: 3.1em; margin-top: 12px; }
.wme-flip .wme-flip-cap {
  position: absolute; inset: 0; margin: 0; max-width: 720px;
  font-family: 'IM Fell English', Georgia, serif; font-style: italic;
  font-size: 20px; line-height: 1.55; color: #bcae93;
  opacity: 0; transition: opacity .4s ease;
}
.wme-flip .wme-flip-cap.wme-cap-on { opacity: 1; }

/* =====================================================================
   Hover to magnify. The plan enlarges toward whatever the cursor is over,
   so room names can be read in place. Pointer devices only, and the frame
   clips the overflow so nothing spills across the page.
   ===================================================================== */
.wme-zoomable { overflow: hidden; cursor: zoom-in; }
.wme-zoomable img { transition: transform .35s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.wme-zoomable:hover img { transform: scale(2.1); }
.wme-zoomable::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201,161,90,0); transition: box-shadow .3s ease;
}
.wme-zoomable:hover::after { box-shadow: inset 0 0 0 1px rgba(201,161,90,.55); }
.wme-switch-light .wme-shot { position: relative; }
/* the caption must stay put while the plan itself magnifies */
.wme-zoomable figcaption { position: relative; z-index: 2; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wme-zoomable img { transition: none; }
  .wme-zoomable:hover img { transform: scale(1.6); }
}