/* =========================================================
   FGH v2 — PARCHMENT SYSTEM
   Phase 9 — Canonical Surface Ownership
========================================================= */

/* =========================================================
   AREA STACK CONTEXT
   ========================================================= */

.panel-post,
.panel-comments {
  position: relative;
}

/* =========================================================
   PARCHMENT SURFACE (BACKGROUND LAYER)
   ========================================================= */

.panel-surface,
.fgh-parchment-surface {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   SHARED SLICE RULES
   (CANONICAL OWNER ONLY)
   ========================================================= */

.panel-surface-owner .surface-top,
.panel-surface-owner .surface-mid,
.panel-surface-owner .surface-bottom,
.panel-surface-owner .parchment-top,
.panel-surface-owner .parchment-mid,
.panel-surface-owner .parchment-bottom {
  position: absolute;
  left: 0;
  width: 100%;

  pointer-events: none;
  z-index: 0;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* =========================================================
   TOP SLICE
   ========================================================= */

.surface-top,
.parchment-top {
  top: 0;
  height: 140px;
  background-image: url("/images/parchment-top.png");
}

/* =========================================================
   MID SLICE (ELASTIC BODY)
   ========================================================= */

.surface-mid,
.parchment-mid {
  top: 140px;
  bottom: 140px;

  background-image: url("/images/parchment-mid.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

/* =========================================================
   BOTTOM SLICE
   ========================================================= */

.surface-bottom,
.parchment-bottom {
  bottom: 0;
  height: 140px;
  background-image: url("/images/parchment-bot.png");
}

/* =========================================================
   FOREGROUND READING PLANE
   ========================================================= */

.flow-layer,
.fgh-content-rail {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ARTICLE CONTENT (CONTENT ONLY)
   ========================================================= */

/* =========================================================
   ARTICLE CONTENT (CONTENT ONLY)
   ========================================================= */

article.content-article {
  position: relative;

  margin: 1rem;
  border: none;
  background: none;

  padding: 20px 0 40px;

  line-height: 1.15;

  font-size: 1.1rem;

  overflow: visible;

  width: 100%;
  box-sizing: border-box;

  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.28));
}

/* float containment */
article.content-article::after {
  content: "";
  display: block;
  clear: both;
}
/* =========================================================
   ARTICLE — POST ELEMENTS (FGH1 visual match)
   ========================================================= */

/* --- DATE ------------------------------------------------ */

article.content-article .post-date {
  margin: 0 0 0.35rem 0;

  font-size: 0.85rem;
  font-style: italic;
  color: #7a5a3a;
  opacity: 0.85;
}

/* --- MAIN TITLE ------------------------------------------ */

article.content-article h2 {
  margin: 0 0 0.5rem 0;

  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;

  color: #4a2d17;
}

/* --- SECTION HEADINGS ------------------------------------ */

article.content-article h3 {
  margin: 2rem 0 0.5rem 0;

  font-size: 1.25rem;
  font-weight: 700;

  color: #4f331d;
}

/* --- BODY PARAGRAPHS ------------------------------------- */

article.content-article p {
  margin: 0 0 0.9rem 0;
}

/* keeps FGH1 tight reading rhythm */
article.content-article p:last-of-type {
  margin-bottom: 0;
}

/* --- CLOSING SIGNATURE ----------------------------------- */

article.content-article .closing {
  margin-top: 1.4rem;

  font-style: italic;
  text-align: right;

  color: #6b4a2c;
  opacity: 0.9;
}

/* =========================================================
   MEDIA BLOCK — ARTICLE FLOW PARTICIPATION
   ========================================================= */

.content-media-block {
  position: relative;
  max-width: 100%;
}

/* --- CENTER (default) ----------------------------------- */

.content-media-block.align-center {
  margin: 0 auto 1.25rem auto;
  text-align: center;
  float: none;
  clear: both;
}

/* --- FLOAT LEFT ----------------------------------------- */

.content-media-block.align-left {
  float: left;
  margin: 0 1.4rem 0.9rem 0;
}

/* --- FLOAT RIGHT ---------------------------------------- */

.content-media-block.align-right {
  float: right;
  margin: 0 0 0.9rem 1.4rem;
}

/* ensure media fills wrapper cleanly */
.content-media-block img,
.content-media-block video {
  display: block;
  width: 100%;
  height: auto;
}