/* Lore Card Styling */
.cf-lore-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: #fbf5ef;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.08);
  color: #3b2a1a;
  margin-bottom: 24px;
}

.cf-lore-media {
  flex: 0 0 140px;
}
.cf-lore-media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.cf-lore-body {
  flex: 1 1 300px;
}

.cf-lore-title {
  margin: 0 0 4px 0;
  font-weight: 700;
  font-size: 1.15rem;
}
.cf-lore-title a {
  color: #2b1607;
  text-decoration: none;
}
.cf-lore-title a:hover {
  color: #e58a24;
}

.cf-lore-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cf-lore-meta .pill {
  background: rgba(229,138,36,0.15);
  border: 1px solid rgba(229,138,36,0.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: #4a2b0f;
}

.cf-lore-hook {
  margin: 4px 0 10px;
  font-weight: 500;
  font-size: 0.95rem;
}

.cf-lore-quote {
  background: linear-gradient(180deg,#fff4e6 0%,#fde6ca 100%);
  border-left: 4px solid #e58a24;
  border-radius: 8px;
  padding: 10px 14px;
  font-style: italic;
  color: #3b2a1a;
  margin: 6px 0 12px;
}

.cf-lore-audio {
  margin-top: 8px;
}

.cf-lore-grid {
  display: grid;
  gap: 16px;
}
.cf-lore-grid.cols-2 { grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); }
.cf-lore-grid.cols-3 { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.cf-lore-grid.cols-4 { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }


/* Lore gallery (bottom) – two-column grid for image fields */
.cf-lore-gallery {
  display: grid !important;            /* ensure grid applies even if theme overrides */
  grid-template-columns: 1fr;          /* default: single column for phones */
  gap: 14px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 720px) {
  .cf-lore-gallery {
    grid-template-columns: repeat(2, 1fr) !important; /* two columns for tablets/desktops */
  }
}

.cf-lore-figure {
  background: #fbf5ef;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}

.cf-lore-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

.cf-lore-caption {
  font-size: .9rem;
  color: #3b2a1a;
  margin-top: 6px;
  text-align: center;
}

.cf-lore-meta {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 2px solid rgba(0,0,0,0.1);
}
.cf-lore-meta h3 {
  margin-bottom: 0.5em;
}

/* ===========================
   Lore single — vintage styling
   =========================== */

body.single-lore .cf-lore-single .inside-article{
  background:
    radial-gradient(200% 60% at 50% -20%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(180deg, rgba(255,245,225,.7), rgba(248,235,205,.85));
  border: 1px solid rgba(85,60,30,.25);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 8px 28px rgba(40,25,10,.12);
  padding: 28px;
}

/* Subtle paper edge around the whole article */
body.single-lore .cf-lore-single{
  position: relative;
}
body.single-lore .cf-lore-single::before{
  content:"";
  position:absolute; inset:-10px -10px 6px -10px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px);
  border-radius: 16px;
  z-index:-1;
  filter: blur(0.2px);
}

/* Title & header ornaments */
body.single-lore .cf-lore-single .entry-title{
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing:.3px;
  font-weight:700;
  color:#2e1f12;
  margin: 10px 0 8px;
}
body.single-lore .cf-lore-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;
}
body.single-lore .cf-lore-meta .pill{
  font: 500 12px/1 "Georgia", serif;
  color:#3b2918;
  background: linear-gradient(#f2e6cf, #e8d7b6);
  border:1px solid rgba(85,60,30,.25);
  border-radius:999px;
  padding:4px 10px;
}

/* Hero image framed */
body.single-lore .cf-lore-hero-wrap{
  margin:-8px -8px 14px;
  padding:8px;
  background: linear-gradient(180deg,#f5e9d1,#ebd7b5);
  border:1px solid rgba(85,60,30,.25);
  border-radius:10px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
body.single-lore .cf-lore-hero{
  display:block; width:100%; height:auto; border-radius:6px;
}

/* Drop cap for first paragraph (only if using WYSIWYG body) */
body.single-lore .entry-content > p:first-of-type::first-letter{
  float:left;
  font: 700 3.2rem/1 "Georgia", serif;
  margin:.05em .12em 0 0;
  color:#2e1f12;
  text-shadow: 0 1px 0 #fff;
}

/* Lore hook & pull-quote */
body.single-lore .cf-lore-hook{
  font-style:italic; color:#2e1f12; opacity:.9; margin:.25rem 0 .5rem;
}
body.single-lore .cf-lore-quote{
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #c5934f;
  background: rgba(197,147,79,.08);
  color:#2b190b;
  border-radius: 4px;
}

/* Audio block looks like a brass plate */
body.single-lore .cf-lore-audio{
  margin:12px 0 6px;
  padding:8px;
  border:1px solid rgba(85,60,30,.25);
  border-radius:10px;
  background: linear-gradient(180deg,#f6e8cd,#ead6b4);
}

/* Gallery: three-up on wide screens with caption cards */
body.single-lore .cf-lore-gallery{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 900px){
  body.single-lore .cf-lore-gallery{ grid-template-columns: repeat(3, 1fr); }
}
body.single-lore .cf-lore-figure{
  margin:0; padding:10px;
  background: linear-gradient(#f5e9d1,#ecdbbd);
  border:1px solid rgba(85,60,30,.25);
  border-radius:10px;
}
body.single-lore .cf-lore-img{ width:100%; height:auto; border-radius:6px; display:block; }
body.single-lore .cf-lore-caption{
  font: italic 13px/1.4 Georgia, serif;
  color:#3b2918; margin-top:8px;
}

/* Body copy */
body.single-lore .entry-content{
  color:#22160c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.7;
}
body.single-lore .entry-content p{ margin: 0 0 1rem; }

/* Small section divider for meta blocks appended later (if any) */
body.single-lore .cf-lore-meta + .entry-content,
body.single-lore .entry-content + .cf-lore-meta{
  border-top:2px solid rgba(0,0,0,.06);
  padding-top:12px; margin-top:12px;
}

/* Lore page "paper" wrapper — beat Customizer CSS */
body.single-lore.separate-containers #page .site-content #primary .cf-lore-single > .inside-article{
  background: linear-gradient(180deg, #fff5e1, #f8ebcd) !important;
  border: 1px solid rgba(85,60,30,.25) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 28px rgba(40,25,10,.12) !important;
  padding: 28px !important;
}

/* Optional: tighten title & meta for lore */
body.single-lore .cf-lore-single .entry-title{
  font-family: Georgia, "Times New Roman", serif;
  color:#2e1f12;
  letter-spacing:.3px;
  font-weight:700;
}
body.single-lore .cf-lore-single .cf-lore-meta .pill{
  font: 500 12px/1 Georgia, serif;
  color:#3b2918;
  background: linear-gradient(#f2e6cf, #e8d7b6);
  border:1px solid rgba(85,60,30,.25);
  border-radius:999px;
  padding:4px 10px;
}

/* ===== Lore cleanup / final overrides ===== */

/* Paper wrapper (beats Customizer) */
body.single-lore.separate-containers #page .site-content #primary .cf-lore-single > .inside-article{
  background: linear-gradient(180deg, #fff5e1, #f8ebcd) !important;
  border: 1px solid rgba(85,60,30,.25) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 28px rgba(40,25,10,.12) !important;
  padding: 28px !important;
}

/* Header badges (legend/voice/era…) */
body.single-lore .cf-lore-single .entry-header .cf-lore-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 10px;
}
body.single-lore .cf-lore-single .entry-header .cf-lore-meta .pill{
  font: 500 12px/1 Georgia, serif;
  color:#3b2918;
  background: linear-gradient(#f2e6cf, #e8d7b6);
  border:1px solid rgba(85,60,30,.25);
  border-radius:999px;
  padding:4px 10px;
}

/* Optional metadata section inside body (if present) */
body.single-lore .cf-lore-single .entry-content section.cf-lore-meta{
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 2px solid rgba(0,0,0,.06);
}

/* Title (single source of truth) */
body.single-lore .cf-lore-single .entry-title{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700; letter-spacing:.3px; color:#2e1f12;
  margin: 10px 0 8px;
}

/* Gallery grid breakpoint (grouped here) */
@media (min-width: 900px){
  body.single-lore .cf-lore-gallery{ grid-template-columns: repeat(3, 1fr); }
}