/* FF V4.4 — Imperial Article Frame
 * Visual-only article enhancement for single posts.
 * Adds an imperial museum frame around article hero/video with subtle motifs,
 * lightweight column edges, low-opacity sculpture silhouettes, and softened
 * mobile ornamentation. No content writes, no SEO changes, no audio changes.
 */

.single-post {
  --ff-imp-gold: #c9a861;
  --ff-imp-gold-soft: rgba(201, 168, 97, .18);
  --ff-imp-gold-glow: rgba(213, 180, 106, .12);
  --ff-imp-ink: #071a13;
  --ff-imp-surface: linear-gradient(180deg, rgba(8, 34, 24, .94), rgba(4, 23, 16, .98));
  --ff-imp-paper: rgba(7, 26, 19, .72);
  --ff-imp-marble: radial-gradient(circle at 22% 18%, rgba(31, 74, 59, .34), transparent 38%),
                   radial-gradient(circle at 77% 19%, rgba(17, 54, 44, .26), transparent 34%),
                   radial-gradient(circle at 52% 100%, rgba(35, 79, 62, .22), transparent 44%),
                   linear-gradient(135deg, rgba(255,255,255,.028), rgba(255,255,255,0) 30%, rgba(255,255,255,.018) 60%, rgba(255,255,255,0));
}

.single-post .ff-single > .alignwide {
  position: relative;
  isolation: isolate;
}

/* Desktop side columns framing the hero zone. */
@media (min-width: 1200px) {
  .single-post .ff-single > .alignwide::before,
  .single-post .ff-single > .alignwide::after {
    content: "";
    position: absolute;
    top: 58px;
    bottom: 8px;
    width: 42px;
    border: 1px solid rgba(201,168,97,.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 0 26px rgba(213,180,106,.06), 0 18px 36px rgba(0,0,0,.18);
    background:
      linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%, rgba(0,0,0,.16) 52%, rgba(255,255,255,.05) 84%, rgba(255,255,255,.15)),
      repeating-linear-gradient(90deg, rgba(213,180,106,.08) 0 3px, rgba(9,31,24,.01) 3px 9px),
      linear-gradient(180deg, rgba(11,42,31,.92), rgba(4,22,15,.96));
    border-radius: 24px 24px 12px 12px;
    opacity: .82;
    pointer-events: none;
  }
  .single-post .ff-single > .alignwide::before { left: -62px; }
  .single-post .ff-single > .alignwide::after { right: -62px; }
}

.single-post .ff-breadcrumbs {
  position: relative;
  z-index: 3;
}

.single-post .ff-article-hero {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(201,168,97,.36);
  box-shadow: 0 24px 54px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03);
  background: var(--ff-imp-marble), var(--ff-imp-surface);
  padding: clamp(18px, 2vw, 26px);
  border-radius: 14px;
}
.single-post .ff-article-hero::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201,168,97,.18);
  border-radius: 10px;
  pointer-events: none;
}
.single-post .ff-article-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  width: min(240px, 42vw);
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26'%3E%3Cpath d='M10 13C35 13 35 3 60 3s25 10 50 10 25-10 50-10 25 10 50 10 25-10 50-10' fill='none' stroke='%23d5b46a' stroke-width='1.5' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M18 13c8 0 8-8 16-8s8 8 16 8 8-8 16-8' fill='none' stroke='%23d5b46a' stroke-width='1' opacity='.55'/%3E%3Cpath d='M174 13c8 0 8-8 16-8s8 8 16 8 8-8 16-8' fill='none' stroke='%23d5b46a' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .85;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

.single-post .ff-article-intro,
.single-post .ff-documentary-player,
.single-post .ff-article-image {
  position: relative;
  z-index: 1;
}

.single-post .ff-article-intro {
  background: linear-gradient(180deg, rgba(7,28,20,.38), rgba(7,28,20,.16));
  border: 1px solid rgba(201,168,97,.22);
  border-radius: 10px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
}
.single-post .ff-article-intro::before,
.single-post .ff-documentary-player::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 240px auto;
  opacity: .10;
}
.single-post .ff-article-intro::before {
  right: -18px;
  top: 8px;
  background-position: right 12px top 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cg fill='%23d5b46a'%3E%3Ccircle cx='104' cy='70' r='34'/%3E%3Cpath d='M58 128c18-22 71-24 92 0 11 12 17 29 17 47v13h-18v72H58v-72H40v-13c0-18 6-35 18-47z'/%3E%3Crect x='74' y='256' width='60' height='18' rx='3'/%3E%3Crect x='54' y='278' width='100' height='18' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
.single-post .ff-documentary-player::before {
  left: -22px;
  bottom: -18px;
  background-position: left 10px bottom 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cg fill='%23d5b46a'%3E%3Ccircle cx='98' cy='70' r='34'/%3E%3Cpath d='M42 128c18-22 71-24 92 0 11 12 17 29 17 47v13h-18v72H42v-72H24v-13c0-18 6-35 18-47z'/%3E%3Crect x='58' y='256' width='60' height='18' rx='3'/%3E%3Crect x='38' y='278' width='100' height='18' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  transform: scaleX(-1);
}

/* Corner lion medallions. */
.single-post .ff-article-intro::after,
.single-post .ff-documentary-player::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(13,42,32,.94), rgba(6,22,16,.98));
  border: 1px solid rgba(201,168,97,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.18);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58px 58px;
  opacity: .9;
  pointer-events: none;
}
.single-post .ff-article-intro::after {
  top: -18px;
  left: -18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d5b46a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Ccircle cx='50' cy='54' r='18'/%3E%3Cpath d='M24 54c0-15 12-28 26-28s26 13 26 28-12 26-26 26S24 69 24 54z'/%3E%3Cpath d='M38 49c3-5 7-8 12-8s9 3 12 8'/%3E%3Cpath d='M42 58c3 2 5 3 8 3s5-1 8-3'/%3E%3Cpath d='M46 54h8'/%3E%3Cpath d='M42 66c3 2 5 3 8 3s5-1 8-3'/%3E%3Cpath d='M33 33l8 7'/%3E%3Cpath d='M67 33l-8 7'/%3E%3C/g%3E%3C/svg%3E");
}
.single-post .ff-documentary-player::after {
  top: -18px;
  right: -18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d5b46a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Ccircle cx='50' cy='54' r='18'/%3E%3Cpath d='M24 54c0-15 12-28 26-28s26 13 26 28-12 26-26 26S24 69 24 54z'/%3E%3Cpath d='M38 49c3-5 7-8 12-8s9 3 12 8'/%3E%3Cpath d='M42 58c3 2 5 3 8 3s5-1 8-3'/%3E%3Cpath d='M46 54h8'/%3E%3Cpath d='M42 66c3 2 5 3 8 3s5-1 8-3'/%3E%3Cpath d='M33 33l8 7'/%3E%3Cpath d='M67 33l-8 7'/%3E%3C/g%3E%3C/svg%3E");
}

.single-post .ff-article-hero .ff-eyebrow {
  letter-spacing: .3em;
  position: relative;
  z-index: 2;
}
.single-post .ff-article-hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.18);
}
.single-post .ff-article-hero .ff-hero-deck {
  text-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.single-post .ff-article-hero .ff-meta {
  padding-top: 16px;
  border-top: 1px solid rgba(201,168,97,.22);
}

.single-post .ff-documentary-player {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(201,168,97,.36);
  padding: 10px;
  background:
    radial-gradient(circle at 14% 12%, rgba(213,180,106,.09), transparent 24%),
    linear-gradient(180deg, rgba(10,33,24,.95), rgba(5,20,14,.98));
  box-shadow: 0 20px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03);
}
.single-post .ff-documentary-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 1px solid rgba(201,168,97,.18);
  border-radius: 8px;
  background: #081712;
}

/* Continue imperial mood while reading, but keep it subtle. */
.single-post .ff-reading-surface.ff-paper-section {
  position: relative;
  overflow: hidden;
}
.single-post .ff-reading-surface.ff-paper-section::before,
.single-post .ff-reading-surface.ff-paper-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .06;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}
.single-post .ff-reading-surface.ff-paper-section::before {
  width: 240px;
  height: 300px;
  top: 100px;
  left: -12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cg fill='%23d5b46a'%3E%3Ccircle cx='104' cy='70' r='34'/%3E%3Cpath d='M58 128c18-22 71-24 92 0 11 12 17 29 17 47v13h-18v72H58v-72H40v-13c0-18 6-35 18-47z'/%3E%3Crect x='74' y='256' width='60' height='18' rx='3'/%3E%3Crect x='54' y='278' width='100' height='18' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
.single-post .ff-reading-surface.ff-paper-section::after {
  width: 220px;
  height: 70px;
  right: 16px;
  bottom: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70'%3E%3Cpath d='M10 35c30 0 30-16 60-16s30 16 60 16 30-16 60-16' fill='none' stroke='%23d5b46a' stroke-width='2' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M36 35c12 0 12-10 24-10s12 10 24 10 12-10 24-10' fill='none' stroke='%23d5b46a' stroke-width='1.4' opacity='.7'/%3E%3Cpath d='M124 35c12 0 12-10 24-10s12 10 24 10 12-10 24-10' fill='none' stroke='%23d5b46a' stroke-width='1.4' opacity='.7'/%3E%3C/svg%3E");
}
.single-post .ff-longform-grid,
.single-post .ff-after-article { position: relative; z-index: 1; }

/* Keep the side-docked audio card visually related without touching its HTML. */
.single-post .ff-narration-docked .ff-v43-audio-dock {
  padding: 12px;
  border: 1px solid rgba(201,168,97,.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10,31,23,.95), rgba(4,18,13,.98));
  box-shadow: 0 14px 32px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Mobile/tablet: keep the motif, lower density and avoid crowding text. */
@media (max-width: 1023px) {
  .single-post .ff-article-hero {
    padding: 18px;
    border-radius: 12px;
  }
  .single-post .ff-article-hero::after {
    top: -10px;
    width: min(180px, 56vw);
    height: 20px;
    opacity: .72;
  }
  .single-post .ff-article-intro,
  .single-post .ff-documentary-player,
  .single-post .ff-article-image {
    padding: 16px;
  }
  .single-post .ff-documentary-player {
    padding: 8px;
  }
  .single-post .ff-article-intro::after,
  .single-post .ff-documentary-player::after {
    width: 52px;
    height: 52px;
    background-size: 40px 40px;
    opacity: .72;
  }
  .single-post .ff-article-intro::after { top: -10px; left: -10px; }
  .single-post .ff-documentary-player::after { top: -10px; right: -10px; }
  .single-post .ff-article-intro::before,
  .single-post .ff-documentary-player::before {
    background-size: 170px auto;
    opacity: .055;
  }
  .single-post .ff-reading-surface.ff-paper-section::before {
    width: 160px;
    height: 200px;
    top: 120px;
    left: -34px;
    opacity: .045;
  }
  .single-post .ff-reading-surface.ff-paper-section::after {
    width: 140px;
    height: 40px;
    right: 2px;
    bottom: 20px;
    opacity: .05;
  }
}

@media (max-width: 640px) {
  .single-post .ff-article-hero {
    padding: 14px;
  }
  .single-post .ff-article-intro {
    padding: 14px;
  }
  .single-post .ff-article-intro::before,
  .single-post .ff-documentary-player::before {
    background-size: 132px auto;
    opacity: .048;
  }
  .single-post .ff-article-intro::after,
  .single-post .ff-documentary-player::after {
    width: 42px;
    height: 42px;
    background-size: 32px 32px;
  }
  .single-post .ff-reading-surface.ff-paper-section::before {
    width: 118px;
    height: 148px;
    top: 140px;
    left: -24px;
    opacity: .04;
  }
  .single-post .ff-reading-surface.ff-paper-section::after {
    width: 108px;
    height: 32px;
    right: -4px;
    bottom: 12px;
    opacity: .045;
  }
}

@media print {
  .single-post .ff-single > .alignwide::before,
  .single-post .ff-single > .alignwide::after,
  .single-post .ff-article-hero::after,
  .single-post .ff-article-intro::before,
  .single-post .ff-documentary-player::before,
  .single-post .ff-article-intro::after,
  .single-post .ff-documentary-player::after,
  .single-post .ff-reading-surface.ff-paper-section::before,
  .single-post .ff-reading-surface.ff-paper-section::after {
    display: none !important;
  }
}
