/*
 * blog-frames.css — Sacred Earth blog image frames
 * Shared between the editor (writer-body) and the public blog page (blog-body).
 * Relies on CSS custom properties defined in the admin theme (admin.css / styles.css).
 * DO NOT define :root variables here.
 *
 * Structure notes:
 *   Simple float/centered frames (floatleft, floatright, botanical, herbarium,
 *   cameo, torn, washi, smudge, tarot, moonarch, sunhalo, crystalgrid, wreath):
 *     <img class="blog-frame blog-frame-<id>" src="…">
 *     Styles that targeted .fN .f-img in the mockup are applied directly to the
 *     .blog-frame-<id> selector since the img IS the frame element.
 *
 *   Wrapper frames (polaroid, hero, centered, postcard, quote, gallery,
 *   filmstrip, moonphases):
 *     <div class="blog-frame blog-frame-<id>">
 *       <img src="…">
 *       [optional children: .cap, .pc-text, .q, .f-img grid cells, etc.]
 *     </div>
 *     Child img inherits width:100%; object-fit:cover where needed.
 */

/* ── Frame containment (prevents overflow in editor and public) ── */
.writer-body, .blog-body { overflow: hidden; }
.writer-body::after, .blog-body::after { content: ""; display: block; clear: both; }
.blog-frame { max-width: 100%; box-sizing: border-box; }

/* ── Mobile collapse (all floats become full-width) ── */
@media (max-width: 768px) {
  .blog-frame-floatleft,
  .blog-frame-floatright,
  .blog-frame-polaroid,
  .blog-frame-botanical,
  .blog-frame-herbarium,
  .blog-frame-cameo,
  .blog-frame-torn,
  .blog-frame-washi,
  .blog-frame-smudge,
  .blog-frame-tarot,
  .blog-frame-moonarch-wrap,
  .blog-frame-sunhalo-wrap,
  .blog-frame-crystalgrid-wrap,
  .blog-frame-wreath-wrap {
    float: none !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   1. FLOAT LEFT
   Structure: <img class="blog-frame blog-frame-floatleft" src="…">
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-floatleft {
  float: left;
  width: 45%;
  margin: 4px 14px 6px 0;
  border: 4px solid var(--warm-white);
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(45, 74, 53, .15);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   2. FLOAT RIGHT
   Structure: <img class="blog-frame blog-frame-floatright" src="…">
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-floatright {
  float: right;
  width: 45%;
  margin: 4px 0 6px 14px;
  border: 4px solid var(--warm-white);
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(45, 74, 53, .15);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   3. POLAROID
   Structure:
     <div class="blog-frame blog-frame-polaroid">
       <img src="…">
       <span class="cap">caption text</span>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-polaroid {
  float: right;
  width: 42%;
  margin: 2px 6px 10px 14px;
  background: #fff;
  padding: 8px 8px 28px;
  box-shadow: 0 8px 22px rgba(45, 74, 53, .2);
  transform: rotate(1.8deg);
  transform-origin: center center;
  position: relative;
}
.blog-frame-polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.blog-frame-polaroid .cap {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: var(--earth-dark);
}


/* ═══════════════════════════════════════════════════════════════
   4. FULL-WIDTH HERO
   Structure:
     <div class="blog-frame blog-frame-hero">
       <img src="…">
       <span class="cap">caption</span>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-hero {
  width: 100%;
  margin: 10px 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 18px rgba(45, 74, 53, .12);
}
.blog-frame-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.blog-frame-hero .cap {
  position: absolute;
  bottom: 10px;
  left: 14px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}


/* ═══════════════════════════════════════════════════════════════
   5. CENTERED + CAPTION
   Structure:
     <div class="blog-frame blog-frame-centered">
       <img src="…">
       <span class="cap">caption</span>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-centered {
  width: 70%;
  margin: 14px auto;
  text-align: center;
}
.blog-frame-centered img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--sage-pale);
  display: block;
}
.blog-frame-centered .cap {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--warm-gray);
  margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   6. BOTANICAL BORDER
   Structure: <img class="blog-frame blog-frame-botanical" src="…">
   Note: ::before / ::after supply the leaf corner accents.
         Since these pseudo-elements attach to the img element,
         the img must be display:block (not inline) for positioning.
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-botanical {
  float: left;
  width: 50%;
  margin: 2px 14px 10px 0;
  padding: 18px;
  border: 1px solid var(--earth);
  border-radius: 2px;
  background: var(--warm-white);
  position: relative;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.blog-frame-botanical::before,
.blog-frame-botanical::after {
  content: "🌿";
  position: absolute;
  font-size: 20px;
  background: var(--warm-white);
  padding: 0 4px;
  line-height: 1;
}
.blog-frame-botanical::before {
  top: -12px;
  left: 10px;
}
.blog-frame-botanical::after {
  bottom: -12px;
  right: 10px;
  transform: scaleX(-1);
}


/* ═══════════════════════════════════════════════════════════════
   7. HERBARIUM (TAPED)
   Structure:
     <div class="blog-frame blog-frame-herbarium">
       <div class="tape"></div>
       <div class="tape r"></div>
       <img src="…">
       <span class="cap">specimen label</span>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-herbarium {
  float: right;
  width: 42%;
  margin: 2px 4px 10px 14px;
  background: #fbf7ee;
  padding: 12px;
  position: relative;
  box-shadow: 0 2px 10px rgba(107, 83, 54, .15);
  transform: rotate(-1deg);
  transform-origin: center center;
}
.blog-frame-herbarium img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  filter: sepia(.2);
  background: linear-gradient(135deg, #e8dfc8, #cbbc97);
}
.blog-frame-herbarium .tape {
  position: absolute;
  width: 50px;
  height: 18px;
  background: rgba(232, 217, 188, .7);
  border: 1px dashed rgba(107, 83, 54, .2);
  top: -6px;
  left: 20px;
  transform: rotate(-8deg);
}
.blog-frame-herbarium .tape.r {
  left: auto;
  right: 20px;
  top: -6px;
  transform: rotate(6deg);
}
.blog-frame-herbarium .cap {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: var(--earth-dark);
  text-align: center;
  margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   8. CAMEO (OVAL)
   Structure: <img class="blog-frame blog-frame-cameo" src="…">
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-cameo {
  float: left;
  width: 160px;
  height: 200px;
  margin: 2px 18px 8px 0;
  border: 6px solid var(--warm-white);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(45, 74, 53, .2);
  background: var(--sage-pale);
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   9. POSTCARD
   Structure:
     <div class="blog-frame blog-frame-postcard">
       <img src="…">
       <div class="pc-text">Dear friend —<br>…</div>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-postcard {
  width: 80%;
  margin: 14px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fbf7ee;
  border: 1px solid var(--earth);
  padding: 6px;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(107, 83, 54, .15);
}
.blog-frame-postcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.blog-frame-postcard .pc-text {
  padding: 10px;
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: var(--earth-dark);
  line-height: 1.4;
  border-left: 1px dashed rgba(107, 83, 54, .3);
}


/* ═══════════════════════════════════════════════════════════════
   10. TORN PAPER
   Structure: <img class="blog-frame blog-frame-torn" src="…">
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-torn {
  float: right;
  width: 48%;
  margin: 4px 0 10px 14px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 3px 12px rgba(45, 74, 53, .1);
  clip-path: polygon(
    0 3%, 8% 0, 30% 4%, 50% 1%, 72% 5%, 92% 1%, 100% 4%,
    99% 97%, 75% 100%, 50% 98%, 25% 100%, 5% 97%, 0 95%
  );
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════
   11. QUOTE OVERLAY
   Structure:
     <div class="blog-frame blog-frame-quote">
       <img src="…">
       <div class="q">"Quote text…"
         <small>— ATTRIBUTION</small>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-quote {
  width: 100%;
  margin: 12px 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
}
.blog-frame-quote img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.blog-frame-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 74, 53, 0), rgba(45, 74, 53, .7));
}
.blog-frame-quote .q {
  position: relative;
  z-index: 2;
  padding: 80px 24px 22px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
}
.blog-frame-quote .q small {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-style: normal;
  margin-top: 6px;
  opacity: .8;
  letter-spacing: 1px;
}


/* ═══════════════════════════════════════════════════════════════
   12. GALLERY STRIP (3-up)
   Structure:
     <div class="blog-frame blog-frame-gallery">
       <img src="…">
       <img src="…">
       <img src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 12px 0;
}
.blog-frame-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════
   13. CRESCENT MOON ARCH
   Structure:
     <div class="blog-frame-moonarch-wrap">
       <div class="blog-frame-moonarch-stars">✦ · ✦ · ✦</div>
       <img class="blog-frame blog-frame-moonarch" src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-moonarch-wrap {
  float: right;
  width: 46%;
  margin: 2px 0 12px 16px;
  position: relative;
}
.blog-frame-moonarch {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #2d4a35 0%, #5e8a6b 60%, #a8cbb2 100%);
  border-radius: 50% 50% 10px 10px / 40% 40% 10px 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(45, 74, 53, .2);
  object-fit: cover;
}
.blog-frame-moonarch-stars {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: #d4a24a;
  font-size: 10px;
  letter-spacing: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   14. SUN HALO
   Structure:
     <div class="blog-frame-sunhalo-wrap">
       <div class="blog-frame-sunhalo-rays"></div>
       <img class="blog-frame blog-frame-sunhalo" src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-sunhalo-wrap {
  float: left;
  width: 180px;
  height: 180px;
  margin: 4px 18px 10px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-frame-sunhalo-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0 10deg, var(--ochre, #c99a3b) 10deg 12deg,
    transparent 12deg 30deg, var(--ochre, #c99a3b) 30deg 32deg,
    transparent 32deg 50deg, var(--ochre, #c99a3b) 50deg 52deg,
    transparent 52deg 70deg, var(--ochre, #c99a3b) 70deg 72deg,
    transparent 72deg 90deg, var(--ochre, #c99a3b) 90deg 92deg,
    transparent 92deg 110deg, var(--ochre, #c99a3b) 110deg 112deg,
    transparent 112deg 130deg, var(--ochre, #c99a3b) 130deg 132deg,
    transparent 132deg 150deg, var(--ochre, #c99a3b) 150deg 152deg,
    transparent 152deg 170deg, var(--ochre, #c99a3b) 170deg 172deg,
    transparent 172deg 190deg, var(--ochre, #c99a3b) 190deg 192deg,
    transparent 192deg 210deg, var(--ochre, #c99a3b) 210deg 212deg,
    transparent 212deg 230deg, var(--ochre, #c99a3b) 230deg 232deg,
    transparent 232deg 250deg, var(--ochre, #c99a3b) 250deg 252deg,
    transparent 252deg 270deg, var(--ochre, #c99a3b) 270deg 272deg,
    transparent 272deg 290deg, var(--ochre, #c99a3b) 290deg 292deg,
    transparent 292deg 310deg, var(--ochre, #c99a3b) 310deg 312deg,
    transparent 312deg 330deg, var(--ochre, #c99a3b) 330deg 332deg,
    transparent 332deg 350deg, var(--ochre, #c99a3b) 350deg 352deg,
    transparent 352deg 360deg
  );
  border-radius: 50%;
  opacity: .6;
}
.blog-frame-sunhalo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ochre, #c99a3b), var(--terra, #b8695a));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 0 40px rgba(212, 162, 74, .5), inset 0 0 20px rgba(0, 0, 0, .1);
  position: relative;
  z-index: 2;
  object-fit: cover;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   15. CRYSTAL GRID
   Structure:
     <div class="blog-frame-crystalgrid-wrap">
       <div class="blog-frame-crystalgrid-side l">◆</div>
       <div class="blog-frame-crystalgrid-side r">◆</div>
       <div class="blog-frame-crystalgrid-corner tl">✦</div>
       <div class="blog-frame-crystalgrid-corner tr">✦</div>
       <div class="blog-frame-crystalgrid-corner bl">✦</div>
       <div class="blog-frame-crystalgrid-corner br">✦</div>
       <img class="blog-frame blog-frame-crystalgrid" src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-crystalgrid-wrap {
  float: right;
  width: 46%;
  margin: 4px 0 10px 16px;
  position: relative;
  padding: 22px;
}
.blog-frame-crystalgrid-wrap::before {
  content: "◆";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--lavender, #a89fc4);
  font-size: 22px;
}
.blog-frame-crystalgrid-wrap::after {
  content: "◆";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--lavender, #a89fc4);
  font-size: 22px;
}
.blog-frame-crystalgrid {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--lavender, #a89fc4), #d4c5e8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(168, 159, 196, .3);
  object-fit: cover;
  overflow: hidden;
}
.blog-frame-crystalgrid-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lavender, #a89fc4);
  font-size: 22px;
}
.blog-frame-crystalgrid-side.l { left: 0; }
.blog-frame-crystalgrid-side.r { right: 0; }
.blog-frame-crystalgrid-corner {
  position: absolute;
  color: #d4c5e8;
  font-size: 14px;
}
.blog-frame-crystalgrid-corner.tl { top: 6px; left: 6px; }
.blog-frame-crystalgrid-corner.tr { top: 6px; right: 6px; }
.blog-frame-crystalgrid-corner.bl { bottom: 6px; left: 6px; }
.blog-frame-crystalgrid-corner.br { bottom: 6px; right: 6px; }


/* ═══════════════════════════════════════════════════════════════
   16. WASHI TAPE
   Structure:
     <div class="blog-frame blog-frame-washi">
       <div class="washi tl"></div>
       <div class="washi br"></div>
       <img src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-washi {
  float: left;
  width: 48%;
  margin: 6px 18px 12px 0;
  padding: 6px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(45, 74, 53, .12);
  position: relative;
}
.blog-frame-washi img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.blog-frame-washi .washi {
  position: absolute;
  width: 50px;
  height: 16px;
  background: repeating-linear-gradient(
    45deg,
    var(--sage-pale) 0 4px,
    var(--sage-light) 4px 8px
  );
  opacity: .85;
  border-radius: 2px;
}
.blog-frame-washi .washi.tl {
  top: -8px;
  left: -10px;
  transform: rotate(-18deg);
}
.blog-frame-washi .washi.br {
  bottom: -8px;
  right: -10px;
  transform: rotate(-18deg);
  background: repeating-linear-gradient(
    45deg,
    #f0dcdc 0 4px,
    var(--dusty-rose, #c49a9a) 4px 8px
  );
}


/* ═══════════════════════════════════════════════════════════════
   17. SMUDGE BUNDLE
   Structure:
     <div class="blog-frame blog-frame-smudge">
       <div class="blog-frame-smudge-herb t">〰〰〰〰〰〰</div>
       <div class="blog-frame-smudge-herb b">〰〰〰〰〰〰</div>
       <div class="blog-frame-smudge-herb l">〰〰〰</div>
       <div class="blog-frame-smudge-herb r">〰〰〰</div>
       <img src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-smudge {
  float: right;
  width: 44%;
  margin: 4px 0 10px 18px;
  padding: 24px;
  background: #fbf5ea;
  border-radius: 8px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(107, 83, 54, .15), 0 3px 10px rgba(45, 74, 53, .08);
}
.blog-frame-smudge img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #b8b089, #8a8660);
}
.blog-frame-smudge-herb {
  position: absolute;
  font-size: 16px;
  letter-spacing: -2px;
  color: var(--moss, #7d8a4d);
}
.blog-frame-smudge-herb.t {
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
}
.blog-frame-smudge-herb.b {
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  transform: scaleY(-1);
}
.blog-frame-smudge-herb.l {
  left: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}
.blog-frame-smudge-herb.r {
  right: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}


/* ═══════════════════════════════════════════════════════════════
   18. TAROT CARD
   Structure:
     <div class="blog-frame blog-frame-tarot">
       <div class="blog-frame-tarot-orn tl">❋</div>
       <div class="blog-frame-tarot-orn tr">❋</div>
       <img src="…">
       <div class="blog-frame-tarot-name">The Herbalist</div>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-tarot {
  float: left;
  width: 200px;
  margin: 2px 18px 10px 0;
  padding: 14px 12px 16px;
  background: linear-gradient(180deg, #fbf5ea 0%, #e8ddc5 100%);
  border: 2px solid var(--earth);
  border-radius: 140px 140px 6px 6px / 100px 100px 6px 6px;
  box-shadow: 0 6px 20px rgba(107, 83, 54, .25);
  position: relative;
}
.blog-frame-tarot img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: linear-gradient(180deg, #2d4a35, #5e8a6b);
  border-radius: 120px 120px 2px 2px / 80px 80px 2px 2px;
}
.blog-frame-tarot-name {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--earth-dark);
  text-transform: uppercase;
  margin-top: 6px;
}
.blog-frame-tarot-orn {
  position: absolute;
  color: var(--earth);
  font-size: 12px;
}
.blog-frame-tarot-orn.tl { top: 6px; left: 10px; }
.blog-frame-tarot-orn.tr { top: 6px; right: 10px; }


/* ═══════════════════════════════════════════════════════════════
   19. FILM STRIP
   Structure:
     <div class="blog-frame blog-frame-filmstrip">
       <img src="…">
       <img src="…">
       <img src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-filmstrip {
  width: 100%;
  margin: 12px 0;
  background: #1a1a1a;
  padding: 22px 6px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 4px;
}
.blog-frame-filmstrip::before,
.blog-frame-filmstrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    #1a1a1a 0 10px,
    #fff 10px 18px,
    #1a1a1a 18px 22px
  );
}
.blog-frame-filmstrip::before { top: 2px; }
.blog-frame-filmstrip::after  { bottom: 2px; }
.blog-frame-filmstrip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════
   20. MOON PHASES STRIP
   Structure:
     <div class="blog-frame-moonphases-wrap">
       <img class="blog-frame blog-frame-moonphases" src="…">
       <div class="blog-frame-moonphases-moons">
         <div class="blog-frame-moonphases-moon p8"></div>
         <div class="blog-frame-moonphases-moon p1"></div>
         … (8 total)
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-moonphases-wrap {
  width: 100%;
  margin: 12px 0;
}
.blog-frame-moonphases {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: linear-gradient(180deg, #1a2445 0%, #3a3f6a 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(26, 36, 69, .3);
  object-fit: cover;
  overflow: hidden;
}
.blog-frame-moonphases-moons {
  display: flex;
  justify-content: space-between;
  padding: 10px 8px 0;
  gap: 4px;
}
.blog-frame-moonphases-moon {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}
.blog-frame-moonphases-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, #f0e6d2, #d4c9ad);
}
.blog-frame-moonphases-moon.p1::after { clip-path: polygon(0 0, 10% 0, 10% 100%, 0 100%); }
.blog-frame-moonphases-moon.p2::after { clip-path: polygon(0 0, 40% 0, 40% 100%, 0 100%); }
.blog-frame-moonphases-moon.p3::after { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.blog-frame-moonphases-moon.p4::after { /* full moon — no clip */ }
.blog-frame-moonphases-moon.p5::after { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.blog-frame-moonphases-moon.p6::after { clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%); }
.blog-frame-moonphases-moon.p7::after { clip-path: polygon(90% 0, 100% 0, 100% 100%, 90% 100%); }
.blog-frame-moonphases-moon.p8::after { background: transparent; /* new moon */ }


/* ═══════════════════════════════════════════════════════════════
   21. LEAFY WREATH (CIRCULAR)
   Structure:
     <div class="blog-frame-wreath-wrap">
       <div class="blog-frame-wreath-leaf">🌿</div>  × 8
       <img class="blog-frame blog-frame-wreath" src="…">
     </div>
   ═══════════════════════════════════════════════════════════════ */
.blog-frame-wreath-wrap {
  float: right;
  width: 200px;
  height: 200px;
  margin: 4px 0 12px 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-frame-wreath {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-pale), var(--sage-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(45, 74, 53, .15);
  object-fit: cover;
  overflow: hidden;
}
.blog-frame-wreath-leaf {
  position: absolute;
  font-size: 20px;
  color: var(--moss, #7d8a4d);
}
.blog-frame-wreath-leaf:nth-child(1) { top: 0;   left: 50%; transform: translateX(-50%) rotate(0deg); }
.blog-frame-wreath-leaf:nth-child(2) { top: 15%; right: 15%; transform: rotate(45deg); }
.blog-frame-wreath-leaf:nth-child(3) { right: 0; top: 50%;  transform: translateY(-50%) rotate(90deg); }
.blog-frame-wreath-leaf:nth-child(4) { bottom: 15%; right: 15%; transform: rotate(135deg); }
.blog-frame-wreath-leaf:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%) rotate(180deg); }
.blog-frame-wreath-leaf:nth-child(6) { bottom: 15%; left: 15%; transform: rotate(225deg); }
.blog-frame-wreath-leaf:nth-child(7) { left: 0;  top: 50%;  transform: translateY(-50%) rotate(270deg); }
.blog-frame-wreath-leaf:nth-child(8) { top: 15%; left: 15%; transform: rotate(315deg); }

/* ── Frame picker modal ── */
.fp-overlay{position:fixed;inset:0;background:rgba(45,74,53,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.fp-modal{max-width:960px;width:100%;max-height:90vh;background:var(--warm-white);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.fp-head{padding:16px 20px;border-bottom:1px solid var(--sage-pale);display:flex;justify-content:space-between;align-items:center;background:var(--cream)}
.fp-head h3{font-family:'Playfair Display',serif;font-size:18px;color:var(--deep-green);font-weight:600;margin:0}
.fp-close{width:32px;height:32px;border-radius:50%;background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--warm-gray)}
.fp-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;overflow-y:auto;flex:1}
.fp-crop{display:flex;flex-direction:column;gap:10px}
.fp-crop img{max-width:100%;max-height:380px;display:block}
.fp-zoom-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--warm-gray);font-weight:600}
.fp-zoom-row input{flex:1}
.fp-help{font-size:10px;color:var(--warm-gray)}
.fp-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:420px;overflow-y:auto}
.fp-frame-btn{padding:6px;border:2px solid transparent;border-radius:8px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit}
.fp-frame-btn:hover{background:var(--cream)}
.fp-frame-btn.selected{border-color:var(--sage);background:var(--sage-pale)}
.fp-frame-preview{width:60px;height:60px}
.fp-frame-name{font-size:10px;color:var(--charcoal);font-weight:600}
.fp-foot{padding:14px 20px;border-top:1px solid var(--sage-pale);display:flex;justify-content:flex-end;gap:8px;background:var(--warm-white)}
.fp-cancel{padding:9px 18px;background:#fff;border:1px solid var(--sage-pale);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.fp-place{padding:9px 22px;background:var(--sage);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
.fp-place:disabled{background:var(--sage-pale);color:var(--warm-gray);cursor:not-allowed}
@media (max-width:768px){.fp-body{grid-template-columns:1fr}.fp-frames{max-height:260px}}

/* ── AI polish modal ── */
.ap-loading{position:fixed;inset:0;background:rgba(45,74,53,.55);z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.ap-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:ap-spin 1s linear infinite}
@keyframes ap-spin{to{transform:rotate(360deg)}}
.ap-msg{color:#fff;font-family:'Playfair Display',serif;font-style:italic;font-size:15px}
.ap-sub{color:rgba(255,255,255,.7);font-size:11px}
.ap-overlay{position:fixed;inset:0;background:rgba(45,74,53,.55);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.ap-modal{max-width:900px;width:100%;background:var(--warm-white);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ap-head{padding:18px 24px;border-bottom:1px solid var(--sage-pale);display:flex;justify-content:space-between;background:var(--cream)}
.ap-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--deep-green);font-weight:600}
.ap-pill{display:inline-block;background:var(--sage-pale);color:var(--sage-dark);padding:4px 10px;border-radius:12px;font-size:10px;font-weight:700;margin-left:8px}
.ap-head .ap-sub{font-size:11px;color:var(--warm-gray);margin-top:2px}
.ap-close{width:32px;height:32px;border-radius:50%;background:transparent;border:none;font-size:18px;cursor:pointer}
.ap-tabs{display:flex;padding:0 24px;gap:2px;border-bottom:1px solid var(--sage-pale);background:var(--warm-white)}
.ap-tab{padding:14px 22px;background:transparent;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--warm-gray);border-bottom:3px solid transparent;font-family:inherit}
.ap-tab.active{color:var(--deep-green);border-bottom-color:var(--sage)}
.ap-panes{padding:20px 24px;background:#fafaf7;min-height:360px}
.ap-pane{display:none}
.ap-pane.active{display:block}
.ap-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ap-col{background:#fff;border:1px solid var(--sage-pale);border-radius:10px;padding:14px;max-height:380px;overflow-y:auto}
.ap-col-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--warm-gray);margin-bottom:8px}
.ap-col-label.new{color:var(--sage-dark)}
.ap-col-body{font-family:'Playfair Display',serif;font-size:13px;line-height:1.7}
.ap-ig-text{background:#fff;border:1px solid var(--sage-pale);border-radius:10px;padding:14px;font-family:'Open Sans',sans-serif;font-size:13px;line-height:1.55;white-space:pre-wrap}
.ap-tags{display:flex;flex-wrap:wrap;gap:6px}
.ap-tag{display:inline-flex;align-items:center;padding:5px 10px;background:var(--sage);color:#fff;border-radius:12px;font-size:11px;font-weight:600}
.ap-tag-note{margin-top:10px;font-size:11px;color:var(--charcoal)}
.ap-foot{padding:14px 24px;border-top:1px solid var(--sage-pale);display:flex;justify-content:space-between;background:var(--warm-white)}
.ap-try,.ap-keep{padding:9px 18px;background:#fff;border:1px solid var(--sage-pale);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.ap-use{padding:9px 22px;background:var(--sage);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
@media (max-width:768px){.ap-compare{grid-template-columns:1fr}}

/* ── Instagram panel ── */
.ig-panel{background:#fff;border:1px solid var(--sage-pale);border-radius:12px;overflow:hidden;position:relative}
.ig-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fbd3ff 0%,#ffe2ea 35%,#ffdc91 100%)}
.ig-empty{padding:28px 20px;text-align:center;color:var(--warm-gray)}
.ig-empty .big{font-size:36px;margin-bottom:6px;opacity:.5}
.ig-empty .t{font-family:'Playfair Display',serif;font-size:15px;color:var(--charcoal);font-weight:600;margin-bottom:4px}
.ig-empty .s{font-size:12px;line-height:1.5}
.ig-ready{display:none;grid-template-columns:1fr 1fr;gap:16px;padding:18px}
.ig-cap-col{display:flex;flex-direction:column;gap:8px}
.ig-cap-head{display:flex;justify-content:space-between;align-items:center}
.ig-cap-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--charcoal)}
.ig-cap-charcount{font-size:10px;color:var(--sage-dark);font-weight:700}
.ig-cap-charcount.over{color:#a04040}
.ig-cap-text{width:100%;min-height:240px;border:1px solid var(--sage-pale);border-radius:8px;padding:10px 12px;font-family:'Open Sans',sans-serif;font-size:12.5px;line-height:1.55;resize:vertical;outline:none;background:#fafaf7}
.ig-cap-text:focus{border-color:var(--sage);background:#fff}
.ig-copy-btn{padding:12px 14px;background:linear-gradient(135deg,#833AB4,#E1306C);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.ig-toast{font-size:11px;color:var(--sage-dark);font-weight:600;text-align:center;opacity:0;transition:opacity .2s}
.ig-toast.show{opacity:1}
.ig-preview-col .ig-preview-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--warm-gray);margin-bottom:6px;text-align:right}
.ig-preview-card{background:#fff;border:1px solid #dbdbdb;border-radius:10px;overflow:hidden;max-width:340px;margin-left:auto}
.ig-preview-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #efefef}
.ig-preview-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.ig-preview-handle{font-size:11px;font-weight:700;color:#262626}
.ig-preview-loc{font-size:9px;color:#737373}
.ig-preview-img{aspect-ratio:1/1;background:linear-gradient(135deg,#e0dcd1,#cfc8b7);display:flex;align-items:center;justify-content:center;font-size:40px;color:#a39878}
.ig-preview-caption{padding:0 10px 10px;font-size:11px;color:#262626;line-height:1.5;white-space:pre-wrap}
.ig-preview-tags{color:#00376b;display:block;margin-top:4px;word-break:break-word}
@media (max-width:900px){.ig-ready{grid-template-columns:1fr}.ig-preview-card{margin:0 auto}}