/* ===== Motif Rails v2.7 (CSS)===== */

body.has-motifs{
  /* Artwork */
  --motif-line-url:   url("https://www.mysticmunson.design/s/linerail.svg");
  --motif-cap-url:    url("https://www.mysticmunson.design/s/linecap.svg");
  --motif-center-url: url("https://www.mysticmunson.design/s/linedecor.svg");

  /* Geometry */
  --motif-rail-width: 1rem;          /* visual width of each rail */
  --motif-rail-inset: .5rem;         /* nudge inward from the gutter edge */
  --motif-line-width: .125rem;       /* painted line thickness */
  --motif-cap-width:  .75rem;
  --motif-cap-height: 1.8rem;
  --motif-center-width:  1.5rem;
  --motif-center-height: 9rem;

  /* Placement + visibility */
  --motif-min-gutter: 12rem;         /* determines “tight” mode (≈160px) */
  --motif-edge-inset: 0rem;       /* fallback distance from page edge */
  --motif-hide-gutter: 40px;         /* hide if either gutter < this (≈60px) */
  --motif-hide-bp: 900px;            /* hide if viewport < this (≈960px) */
  --motif-top-offset: 0rem;          /* page-level top trim */
  --motif-bottom-offset: 0rem;       /* page-level bottom trim */

  /* Rendering */
  --motif-center-gap-pad: .25rem;    /* breathing room above/below center */
  --motif-bottom-cap-gap: .25rem;     /* extra space between line & bottom cap */
  --motif-opacity: 1;
  --motif-z: 10;
  --motif-fallback-col-pct: .92;
  --motif-content-clear: 12px;
  --motif-placement-mode: gutter;
  --motif-gutter-anchor: 0.5;
  --motif-max-gutter: 64;
  
}

/* Container (JS also sets these inline; keep here as a safety net) */
.motif-rails{ pointer-events:none; position:absolute; left:0; right:0; }

/* One rail per side per section */
.motif-rail{ width: var(--motif-rail-width); position:absolute; }

/* Segment wrapper (height is set inline by JS) */
.motif-rail .motif-seg{
  position:absolute;
  left:0;
  width:100%;
}

/* Painted vertical line fills the segment’s height */
.motif-rail .motif-line{
  position: relative;            /* anchors caps */
  left: 50%;
  transform: translateX(-50%);   /* horizontal centering only */
  width: var(--motif-line-width);
  height: 100%;
  background-image: var(--motif-line-url);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: var(--motif-line-width) auto;
}

/* End caps (top/bottom) live on the same centered wrapper */
.motif-rail .motif-line::before,
.motif-rail .motif-line::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:  var(--motif-cap-width);
  height: var(--motif-cap-height);
  background-image: var(--motif-cap-url);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

/* Top cap sits just above the line */
.motif-rail .motif-line::before{
  top: calc(-1 * var(--motif-cap-height));
}

/* Bottom cap is flipped and can sit a little farther down */
.motif-rail .motif-line::after{
  bottom: calc(-1 * var(--motif-cap-height) - var(--motif-bottom-cap-gap, 0));
  transform: translateX(-50%) scaleY(-1);
}

/* Centerpiece: JS sets exact top (px); keep only horizontal centering */
.motif-center{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:  var(--motif-center-width);
  height: var(--motif-center-height);
  background-image: var(--motif-center-url);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}



@media (max-width: 60rem) {        /* 60rem ≈ 960px */
  body.has-motifs .motif-rails { display: none !important; }
}