/* ==========================================================================
   Blog Margin Decorations
   Subtle editorial ornaments positioned in the cream margins flanking content.
   Uses SVG data-URIs — no external assets needed.
   ========================================================================== */

/* Left margin decorations: coffee ring (top), watercolour wash (mid), pencil stroke (lower) */
body.blog-decorated::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Coffee ring stain — upper left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='48' fill='none' stroke='%238B6914' stroke-width='8' opacity='0.08' filter='url(%23r)'/%3E%3Ccircle cx='60' cy='60' r='44' fill='none' stroke='%238B6914' stroke-width='3' opacity='0.05' filter='url(%23r)'/%3E%3C/svg%3E"),
    /* Watercolour splash — mid left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='80' viewBox='0 0 100 80'%3E%3Cdefs%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%235b6eae' stop-opacity='0.09'/%3E%3Cstop offset='100%25' stop-color='%235b6eae' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='50' cy='40' rx='45' ry='30' fill='url(%23g)' filter='url(%23w)'/%3E%3C/svg%3E"),
    /* Pencil stroke — lower left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cline x1='5' y1='35' x2='75' y2='8' stroke='%231a1a1a' stroke-width='1.2' stroke-linecap='round' opacity='0.06' stroke-dasharray='4 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position:
    calc(50% - 520px) 140px,
    calc(50% - 540px) 52%,
    calc(50% - 500px) 78%;
  background-size:
    120px 120px,
    100px 80px,
    80px 40px;
}

/* Right margin decorations: ink dot cluster (upper), smaller coffee ring (lower) */
body.blog-decorated::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Ink dot cluster — upper right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Ccircle cx='20' cy='18' r='5' fill='%234a3728' opacity='0.07'/%3E%3Ccircle cx='35' cy='28' r='3.5' fill='%234a3728' opacity='0.055'/%3E%3Ccircle cx='15' cy='35' r='2.5' fill='%234a3728' opacity='0.04'/%3E%3C/svg%3E"),
    /* Smaller coffee ring — lower right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='45' cy='45' r='35' fill='none' stroke='%238B6914' stroke-width='6' opacity='0.06' filter='url(%23r2)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position:
    calc(50% + 490px) 200px,
    calc(50% + 470px) 68%;
  background-size:
    50px 50px,
    90px 90px;
}

/* Blog content sits above decorations */
body.blog-decorated .blog-container,
body.blog-decorated > .language-selector,
body.blog-decorated > article,
body.blog-decorated > nav,
body.blog-decorated > header,
body.blog-decorated > footer,
body.blog-decorated .blog-footer {
  position: relative;
  z-index: 1;
}

/* ---- Responsive: fade and hide in narrower viewports ---- */

@media (max-width: 1400px) and (min-width: 1201px) {
  body.blog-decorated::before,
  body.blog-decorated::after {
    opacity: 0.5;
  }
}

@media (max-width: 1200px) {
  body.blog-decorated::before,
  body.blog-decorated::after {
    display: none;
  }
}