/* =============================================================================
   commonframes.css — complete, production build
   - Fix: nested frame bleed (all size rules use direct-child selectors)
   - Support: per-instance corner radius via --bf-radius (set by JS from data-content-corner-radius)
   - Includes:
     * Brass 9-slice frame (sm, md, lg, def) + plaque/panel variants
     * Alignment helpers
     * Banner / nav overlay
     * Footer
     * Recipe detail (paper card inside frame)
============================================================================= */

/* --- Pipes underlay (sits under content, above the page bg) --- */
/* --- Pipes underlay (sits under content, above the page bg) --- */
.main-container {            /* your existing wrapper */
  position: relative;
  z-index: 0;               /* create a stacking context */
}

/* Default to the 1024 image; swap to 1536 at larger widths */
.main-container::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  pointer-events: none;
  z-index: -2;
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px auto;
  background-image: url("/images/frames/background-pipes-1.png");
}

@media (min-width: 1200px) {
  .main-container::before {
    background-image: url("/images/frames/backgeroundpipes.png");
    background-size: 1536px auto;
  }
}

.main-container::after {
  content: "";
  position: absolute;
  inset: -30px;
  pointer-events: none;
  z-index: -1; /* above pipes, below content (see content z-index below) */
  border-radius: 18px; /* softer corners; adjust to match your style */

  /* Bevel stack: dark edge -> warm brass -> highlight -> mid-brass */
  box-shadow:
    inset 0 0 0 20px #5b3d19,
    inset 0 0 0 24px #a36f2a,
    inset 0 0 0 28px #e3bf6e,
    inset 0 0 0 32px #8a5a25,
    0 12px 30px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at center, rgba(0,0,0,.45) 0%, transparent 70%),
    radial-gradient(140% 60% at -10% 50%, transparent 60%, rgba(0,0,0,.35) 100%),
    radial-gradient(140% 60% at 110% 50%, transparent 60%, rgba(0,0,0,.35) 100%),
    radial-gradient(60% 140% at 50% -10%, transparent 60%, rgba(0,0,0,.35) 100%),
    radial-gradient(60% 140% at 50% 110%, transparent 60%, rgba(0,0,0,.35) 100%);
}


/* ===== Design tokens / variables ===== */
:root {
  --brass-plate: #a8743a;      /* mid-brass face */
  --bf-plate-inset: 0;         /* 0 = tight; panel variants override */
  --bf-gutter: 0;              /* inner content padding; panel variants override */
  --bf-radius: 25px;           /* default corner rounding for content plate */
}

/* Default size preset overrides */
.brass-frame.def {
  --bf-radius: 25px;
  --bf-gutter: 80px;
}

/* Small preset tweak (radius only) */
.brass-frame.sm {
  --bf-radius: 12px;
}

/* ===== Frame root ===== */
.brass-frame {
  position: relative;
  display: inline-block;   /* shrink-wrap around its content */
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  opacity: 1;
  will-change: auto;
  z-index: auto;
}

/* === AUTHORITATIVE OVERRIDES (bottom of commonframes.css) === */
/* 1) Correct path to the slices (they are under .bf-grid) */
.brass-frame > .bf-grid > .bf.nw { grid-area: 1 / 1; background-image: url('/images/frames/corner-nw-small.png') !important; }
.brass-frame > .bf-grid > .bf.ne { grid-area: 1 / 3; background-image: url('/images/frames/corner-ne-small.png') !important; }
.brass-frame > .bf-grid > .bf.sw { grid-area: 3 / 1; background-image: url('/images/frames/corner-sw-small.png') !important; }
.brass-frame > .bf-grid > .bf.se { grid-area: 3 / 3; background-image: url('/images/frames/corner-se-small.png') !important; }

.brass-frame > .bf-grid > .bf.top    { grid-area: 1 / 2; background-image: url('/images/frames/edge-top.png') !important;    background-repeat: repeat-x; }
.brass-frame > .bf-grid > .bf.bottom { grid-area: 3 / 2; background-image: url('/images/frames/edge-bottom.png') !important; background-repeat: repeat-x; }
.brass-frame > .bf-grid > .bf.left   { grid-area: 2 / 1; background-image: url('/images/frames/edge-left.png') !important;   background-repeat: repeat-y; }
.brass-frame > .bf-grid > .bf.right  { grid-area: 2 / 3; background-image: url('/images/frames/edge-right.png') !important;  background-repeat: repeat-y; }

/* 2) Put slices above the plate, content above slices */
.brass-frame > .bf-grid::before { z-index: 2 !important; }

.brass-frame > .bf-grid > .bf {
  position: relative;
  background-repeat: no-repeat;
  z-index: 1; /* no background-size here */
}


/* Drop-in animation (optional) */
.brass-frame.is-opening { animation: brassDrop 520ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes brassDrop {
  0%   { transform: translateY(-40px); opacity: 0; }
  70%  { transform: translateY(0);     opacity: 1; }
  85%  { transform: translateY(6px);   opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Grid cells (slices) */
.brass-frame > .bf {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1; /* edges behind content */
}

/* Default plate / content insets */
.brass-frame.def { --bf-plate-inset: 60px; --bf-gutter: 0; }

/* Default template geometry */
.brass-frame.def > .bf-grid {
  grid-template-columns: 120px 1fr 120px;
  grid-template-rows:    120px 1fr 120px;
}

/* Default – corners/edges fine-tuning */
.brass-frame.def > .bf.ne { background-size: 101% 101%; }
.brass-frame.def > .bf.sw { margin-left: 1px; }

.brass-frame.def > .bf.top    { background-size: auto 100px; }
.brass-frame.def > .bf.bottom { background-size: auto 100px; }
.brass-frame.def > .bf.left   { background-size: 100px auto; }
.brass-frame.def > .bf.right  { background-size: 100px auto; }

/* Overshoot right/bottom edges (default) */
.brass-frame.def > .bf.right  { margin-left: 21px; }
.brass-frame.def > .bf.bottom { margin-top: 21px; }

/* Content block inside the frame */
.brass-frame > .bf-content {
  position: relative;
  padding: var(--bf-gutter, 0);
  pointer-events: auto;
  z-index: 1;
}

/* Default content pad */
.brass-frame.def > .bf-content { padding: 80px; }

/* Ensure corners behind content */
.brass-frame > .bf.nw,
.brass-frame > .bf.ne,
.brass-frame > .bf.sw,
.brass-frame > .bf.se { z-index: -1; }

/* Images inside framed content */
.brass-frame > .bf-content .blog-image img,
.brass-frame > .bf-content.recipe-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Brass plate (the back plate behind content) */
.brass-frame > .bf-grid::before {
  content: "";
  position: absolute;
  inset: var(--bf-plate-inset, 0);
  background: var(--brass-plate);
  border-radius: var(--bf-radius, 0); /* supports data-content-corner-radius via JS -> --bf-radius */
  z-index: 0;
  pointer-events: none;
}


/* ===== Small ===== */
.brass-frame.sm { padding: 0; }
.brass-frame.sm > .bf-grid {
  grid-template-columns: 30px 1fr 30px;
  grid-template-rows:    30px 1fr 30px;
}
.brass-frame.sm > .bf.ne,
.brass-frame.sm > .bf.nw,
.brass-frame.sm > .bf.sw,
.brass-frame.sm > .bf.se { background-size: 104% 104%; }
.brass-frame.sm > .bf.top,
.brass-frame.sm > .bf.bottom { background-size: auto 21px; margin-top: 2.5px; }
.brass-frame.sm > .bf.left,
.brass-frame.sm > .bf.right  { background-size: 22px auto; }
.brass-frame.sm > .bf.right  { margin-left: 7.5px; }
.brass-frame.sm > .bf.bottom { margin-top: 8px; }
.brass-frame.sm > .bf-grid::before {
  inset: 15px;
  border-radius: 14px;
}

/* Small plaque variant */
.brass-frame.sm.bf-plaque > .bf-grid { z-index: 0; }
.brass-frame.sm.bf-plaque > .bf-content {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 6px 14px;
  width: auto;
  max-width: none;
  display: block;
  overflow: visible;
}
.brass-frame.sm.bf-plaque { --bf-plate-inset: 12px; } /* adjust 12–16px */

/* Tight border vs panel */
.brass-frame.border { --bf-plate-inset: 0; --bf-gutter: 0; }
.brass-frame.panel        { --bf-gutter: 8px; }
.brass-frame.sm.panel     { --bf-plate-inset: 12px; --bf-radius: 12px; }
.brass-frame.def.panel    { --bf-plate-inset: 60px; --bf-radius: 25px; }

/* ===== Medium ===== */
.brass-frame.md { padding: 0; }
.brass-frame.md > .bf-grid {
  grid-template-columns: 68px 1fr 68px;
  grid-template-rows:    68px 1fr 68px;
}
.brass-frame.md > .bf.top,
.brass-frame.md > .bf.bottom { background-size: auto 53px; }
.brass-frame.md > .bf.left,
.brass-frame.md > .bf.right  { background-size: 53px auto; }
.brass-frame.md > .bf-grid::before {
  inset: 35px;
  border-radius: 14px;
}
.brass-frame.md > .bf.left   { margin-left: 1px; }
.brass-frame.md > .bf.top    { margin-top: 2px; }
.brass-frame.md > .bf.right  { margin-left: 13px; }
.brass-frame.md > .bf.bottom { margin-top: 14px; }
.brass-frame.md > .bf.se     { margin-right: 2px; }

/* ===== Large ===== */
.brass-frame.lg { padding: 40px; }
.brass-frame.lg > .bf-grid {
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows:    80px 1fr 80px;
  
}
.brass-frame.lg > .bf.top    { background-size: auto 62px; margin-top: 1px; }
.brass-frame.lg > .bf.bottom { background-size: auto 62px; margin-top: 17px; }
.brass-frame.lg > .bf.left   { background-size: 62px auto; margin-left: 1px; }
.brass-frame.lg > .bf.right  { background-size: 62px auto; margin-left: 15px; }
.brass-frame.lg > .bf.se     { margin-right: 2px; }
.brass-frame.lg > .bf-grid::before {
  inset: 41px;
  border-radius: 24px;
}

/* ===== Alignment helpers ===== */
.center-frame         { display: block; margin-inline: auto; }
.left-frame           { display: block; margin-inline-start: 0; }
.right-frame          { display: block; margin-inline-end: 0; }
.center-frame-spaced  { display: block; margin-inline: auto; margin-top: 60px; }
.left-frame-spaced    { display: block; margin-inline-start: 0; margin-top: 25px; }
.right-frame-spaced   { display: block; margin-inline-end: 0; margin-top: 25px; }

/* =============================================================================
   Banner / Navigation overlay (home header art + SVG clickable regions)
============================================================================= */

#site-image-container {
  flex: 0 0 100%;
  order: 0;
  position: relative;
  overflow: visible;
  height: 512px;
  margin-top: 20px;
  margin-bottom: 140px;
  --banner-scale: 1.5;
  --menu-offset-x: -50px;
  --menu-offset-y:  50px;
}
#site-image-container-small {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 0 0 100%;
  order: 0;
  overflow: visible;
  height: 250px;
  margin-top: 20px;
  margin-bottom: 50px;
  --banner-scale: 1.5;
  --menu-offset-x: -50px;
  --menu-offset-y:  50px;
}

#site-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--banner-scale));
  transform-origin: center center;
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 2;
}

/* SVG overlay mirrors transform via JS; keep neutral here */
.nav-overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: auto;
  height: auto;
  z-index: 3;
  pointer-events: auto;
}

/* Invisible clickable hits */
.nav-overlay .hit {
  pointer-events: all;
  fill: #000;
  fill-opacity: 0.001;
  stroke: none;
  cursor: pointer;
}

/* Hover glow */
.nav-overlay .hit:hover,
.nav-overlay a:focus .hit {
  stroke: #ffd36e;
  stroke-width: 4;
  filter:
    drop-shadow(0 0 6px rgb(255 211 110 / 90%))
    drop-shadow(0 0 14px rgb(255 211 110 / 35%));
}

/* Accessible focus ring */
.nav-overlay a:focus-visible .hit {
  stroke: #89b4ff;
  stroke-width: 5;
  filter: none;
  transform: none;
  stroke-linejoin: round;
}
.nav-overlay a:focus,
.nav-overlay a:focus-visible { outline: none !important; }

/* Hover/click shrink animation */
.nav-overlay a {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 120ms ease;
}
.nav-overlay a:hover  { transform: scale(0.96); }
.nav-overlay a:active { transform: scale(0.92); }

/* Responsive banner sizing */
@media (width <= 900px){
  #site-image-container{ height: 420px; }
  #site-image{ --banner-scale: 1.15; }
}
@media (width <= 700px){
  #site-image-container{ height: 360px; }
  #site-image{ --banner-scale: 0.95; }
}
@media (width <= 520px){
  #site-image-container{ height: 300px; }
  #site-image{ --banner-scale: 0.82; }
}

/* Optional animations for steam/ripple */
@keyframes steam-puff {
  0%   { opacity: 0.0; r: 2px;  transform: translateY(0); }
  15%  { opacity: 0.8; r: 6px; }
  100% { opacity: 0.0; r: 14px; transform: translateY(-12px); }
}
@keyframes brass-ripple {
  0%   { opacity: 0.25; r: 0;   stroke-width: 8; }
  100% { opacity: 0;    r: 52px; stroke-width: 0; }
}

/* Banner stacking helpers */
.site-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: 20px;
}
.brass-frame.def.banner-image-frame > .bf-content { padding: 60px; }
#site-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 2;
}
#site-buttons {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: -50px;
  object-fit: contain;
  z-index: -2;
}

/* =============================================================================
   Footer
============================================================================= */

.footer-frame > .bf-content { padding: 0 !important; }

.site-footer {
  width: min(96vw, 1100px);
  min-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #e2c19d 0%, #c79772 55%, #b07a4e 100%);
  color: #2b1d13;
  font-family: Rockwell, serif;
  padding: 0;
  box-sizing: border-box;
}
.site-footer a {
  color: #2b1d13;
  text-decoration: none;
  font-weight: 800;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff3cc;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 0 8px rgba(255,211,110,0.45);
  outline: none;
}
.site-footer nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
@media (max-width: 820px) {
  .site-footer { min-width: auto; width: 95vw; }
}
.footer-frame .site-footer {
  width: min(96vw, 1100px);
  min-width: 800px;
  margin: 0 auto;
  border-radius: 24px;
}
#footer-section {
  margin: 0 auto;
  max-width: 1200px;
}

/* =============================================================================
   Recipe detail “paper card” (index page)
============================================================================= */

.brass-frame > .bf-content { background: transparent; padding: 0; }

/* Paper card */
.recipe-detail {
  position: relative;
  max-width: 640px;
  margin: 18px auto 28px;
  padding: 22px 26px;
  /* subtle paper look: off-white with very light warmth toward the edges */
  background:
    radial-gradient(140% 100% at 30% 10%, #ffffff 0%, #fbfbf8 60%, #f5f3ee 100%);
  border: 1px solid #d8d3c9;
    box-shadow:
  0px 15px 8px rgba(0, 0, 0, 0.55),   /* bottom shadow — sharper edge */
  10px 10px 6px rgba(0, 0, 0, 0.30),  /* right/bottom corner push */
  0px 1px 1px rgba(0, 0, 0, 0.02);  

  font-family: Rockwell, serif;
  line-height: 1.5;
  color: #3b2a1b;
}

.recipe-detail .close-box {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 32px;
  height: 32px;
  background-color: #fff;
  border: 2px solid #cfc8bb;
  border-radius: 50%; /* circle */
  color: #5a4a34;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
  transition: background 0.2s ease;
}

.recipe-detail .close-box:hover {
  background-color: #f3f0ea;
}


/* Header and meta line */
.recipe-header h2 {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 700;
  color: #a8743a;    /* dark ink */
  text-align: left; /* match mobile sheet */
  text-shadow: none !important;
}
.recipe-category {
  margin: 2px 0 14px;
  font-style: normal;
  font-weight: 600;
  color: #6b5a45;
}
.recipe-category strong { font-weight: 700; }

/* Image on the sheet */
.recipe-image-container {
  margin: 0 0 14px;
  text-align: center;
}
.recipe-image-container img {
  width: 100%;
  max-width: none;
  height: auto;
  border: none;             /* no copper border on the paper */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* One-line description under image (like the mobile card) */
.recipe-description {
  margin: 10px 0 18px;
  font-size: 1.05rem;
  color: #a8743a;
}

/* Section headers */
.recipe-ingredients h3,
.recipe-instructions h3 {
  margin: 18px 0 8px;
  font-size: 2rem;
  font-weight: 800;
  color: #a8743a;
  text-shadow: none !important;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: .3;
}

/* Ingredient list = two-column look using your spans */
.recipe-ingredients ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: .2;
  font-family: Rockwell, "Courier New", monospace;
  font-size: 18px;
  white-space: pre-wrap;
  color: #634535;
}
.recipe-ingredients li {
  display: block;      /* keep natural flow */
  line-height: 1.6;
  margin: 0; padding: 0;
}

.recipe-ingredients .ingredient-header, 
.recipe-instructions .ingredient-header {
  display: block;
  width: 100%;
  background-color: #a8743a;
  color: white;
  font-weight: 700;
  font-family: Rockwell, serif;
  font-size: 17px;
  padding: 6px 12px;
  margin: 16px 0 6px;
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}


.recipe-detail .quantity-unit {
  display: inline-block;
  width: 9em;          /* room for “12 Oz.” etc. */
  padding-right: 1em;
  vertical-align: top;
}
.recipe-detail .ingredient-name {
  display: inline-block;
  max-width: 80%;
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Instructions — “Step n:” bold label + paragraph text */
.recipe-instructions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-family: Rockwell, "Courier Bold", monospace;
  white-space: pre-wrap;
  line-height: 1.5;
  display: table-row;
  color: #634535;
}
.recipe-instruction-line {
  margin: 6px 0 10px;
  text-indent: 0;
  padding-left: 0;
  line-height: 1.5;
      white-space: pre-wrap;
}
.recipe-instruction-line .step-label {
  font-weight: 900;
  margin-right: .3em;
}
/* === AUTHORITATIVE OVERRIDES (bottom of commonframes.css) === */

/* corners can safely scale to their cells */
.brass-frame > .bf-grid > .bf.nw,
.brass-frame > .bf-grid > .bf.ne,
.brass-frame > .bf-grid > .bf.sw,
.brass-frame > .bf-grid > .bf.se {
  background-size: 100% 100%;
}

.brass-frame > .bf-content      { z-index: 2 !important; position: relative; }

/* 3) Size-specific background sizing must also reference .bf-grid */
.brass-frame.sm > .bf-grid > .bf.top { 
  background-size: auto 21px !important; 
  margin-top: 2px;
}
.brass-frame.sm > .bf-grid > .bf.bottom { 
  background-size: auto 21px !important; 
  margin-top: 8px;
}
.brass-frame.md > .bf-grid > .bf.top { 
  background-size: auto 53px !important; 
  margin-top: 1px;
}
.brass-frame.md > .bf-grid > .bf.bottom { 
  background-size: auto 53px !important; 
  margin-top: 14px;
}
.brass-frame.lg > .bf-grid > .bf.top    { 
  background-size: auto 62px !important; 
  margin-top: 1px;
}

.brass-frame.sm > .bf-grid > .bf.left { background-size: 22px auto !important; }
.brass-frame.sm > .bf-grid > .bf.right { 
  background-size: 22px auto !important; 
  margin-left: 8px;
}
.brass-frame.md > .bf-grid > .bf.left { 
  background-size: 53px auto !important;
  margin-left: 1px; 
}

.brass-frame.md > .bf-grid > .bf.right  { 
  background-size: 53px auto !important;
  margin-left: 14px
}

.brass-frame.lg > .bf-grid > .bf.left   { 
  background-size: 62px auto !important;
   margin-left: 2px; 
  }

.brass-frame.lg > .bf-grid > .bf.right  { 
  background-size: 62px auto !important;
  margin-left: 16px;
}

/* 4) Grid container stays pinned to the frame box */
.brass-frame > .bf-grid {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  pointer-events: none;
}

/* Edges repeat horizontally; height depends on preset */
.brass-frame > .bf-grid > .bf.top,
.brass-frame > .bf-grid > .bf.bottom {
  background-repeat: repeat-x;
}

/* def (legacy big frame) */
.brass-frame.def > .bf-grid > .bf.top { background-size: auto 100px; }
.brass-frame.def > .bf-grid > .bf.bottom { 
  background-size: auto 100px; 
  margin-top: 21px
}
.brass-frame.def > .bf-grid > .bf.left { background-size: 100px auto; }
.brass-frame.def > .bf-grid > .bf.right { 
  background-size: 99px auto;
  margin-left: 20px;
}

/* lg */
.brass-frame.lg > .bf-grid > .bf.top { background-size: auto 62px; }
.brass-frame.lg > .bf-grid > .bf.bottom { 
  background-size: auto 62px; 
  margin-top: 16px;
}

/* md */
.brass-frame.md > .bf-grid > .bf.top { background-size: auto 53px; }
.brass-frame.md > .bf-grid > .bf.bottom { background-size: auto 53px; }

/* sm */
.brass-frame.sm > .bf-grid > .bf.top { background-size: auto 21px; }
.brass-frame.sm > .bf-grid > .bf.bottom { background-size: auto 21px; }

/* =========================================================
   UNIVERSAL COMPACT (no corner squish) — sm / md / lg
   - Corners keep natural bitmap size; we draw them on ::before
   - The middle row collapses to 0; caps are small but fixed
   - Bottom corners overlap upward behind top corners
========================================================= */

/* Per-size tokens the JS can read */
.brass-frame.sm { --bf-corner-w: 30px; --bf-corner-h: 30px; --bf-cap: 16px; }
.brass-frame.md { --bf-corner-w: 68px; --bf-corner-h: 68px; --bf-cap: 24px; }
.brass-frame.lg { --bf-corner-w: 80px; --bf-corner-h: 80px; --bf-cap: 30px; }

/* Allow per-instance tweaks (JS sets these when needed) */
.brass-frame {
--bf-corner-overlap: 0px; 
--bf-cap-override: initial;
--bf-edge-trim: 0px; 
}


.brass-frame.bf-compact > .bf-grid {
  grid-template-rows: var(--bf-cap-override, var(--bf-cap)) 0 var(--bf-cap-override, var(--bf-cap));
}

/* Do not scale corner bitmaps when compact — draw on ::before */
.brass-frame.bf-compact > .bf-grid > .bf.nw,
.brass-frame.bf-compact > .bf-grid > .bf.ne,
.brass-frame.bf-compact > .bf-grid > .bf.sw,
.brass-frame.bf-compact > .bf-grid > .bf.se {
  background-image: none !important;
  position: relative;
  overflow: visible;
}

.brass-frame.bf-compact > .bf-grid > .bf.top,
.brass-frame.bf-compact > .bf-grid > .bf.bottom {
  background-repeat: repeat-x;
  /* force the edge art height to match the cap height */
  background-size: auto calc(var(--bf-cap-override, var(--bf-cap)) - var(--bf-edge-trim)) !important;
  margin-top: 0 !important; /* kill any overshoot in compact */
}

.brass-frame.bf-compact > .bf-grid > .bf.top {
  background-position: left bottom;
}


/* Generic corner layers (image paths match your authoritative overrides) */
.brass-frame.bf-compact > .bf-grid > .bf.nw::before,
.brass-frame.bf-compact > .bf-grid > .bf.ne::before,
.brass-frame.bf-compact > .bf-grid > .bf.sw::before,
.brass-frame.bf-compact > .bf-grid > .bf.se::before {
  content: "";
  position: absolute;
  width:  var(--bf-corner-w);
  height: var(--bf-corner-h);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.brass-frame.bf-compact > .bf-grid > .bf.bottom {
  background-position: left top;
}

/* Corner images */
.brass-frame.bf-compact > .bf-grid > .bf.nw::before { background-image: url('/images/frames/corner-nw-small.png'); }
.brass-frame.bf-compact > .bf-grid > .bf.ne::before { background-image: url('/images/frames/corner-ne-small.png'); }
.brass-frame.bf-compact > .bf-grid > .bf.sw::before { background-image: url('/images/frames/corner-sw-small.png'); }
.brass-frame.bf-compact > .bf-grid > .bf.se::before { background-image: url('/images/frames/corner-se-small.png'); }

/* Top corners: sit “over” the cap row (crop visually) */
.brass-frame.bf-compact > .bf-grid > .bf.nw::before { top: calc(-1 * (var(--bf-corner-h) - var(--bf-cap-override, var(--bf-cap)))); left:  0; z-index: 3; }
.brass-frame.bf-compact > .bf-grid > .bf.ne::before { top: calc(-1 * (var(--bf-corner-h) - var(--bf-cap-override, var(--bf-cap)))); right: 0; z-index: 3; }

/* Bottom corners: overlap upward behind the top corners */
.brass-frame.bf-compact > .bf-grid > .bf.sw::before {
  top:  calc(var(--bf-cap-override, var(--bf-cap)) - var(--bf-corner-h) + var(--bf-corner-overlap));
  left: 0;
  z-index: 2; /* behind the top corners */
}
.brass-frame.bf-compact > .bf-grid > .bf.se::before {
  top:  calc(var(--bf-cap-override, var(--bf-cap)) - var(--bf-corner-h) + var(--bf-corner-overlap));
  right: 0;
  z-index: 2;
}

/* Content above corners; plate at the bottom */
.brass-frame.bf-compact > .bf-content { z-index: 4 !important; position: relative; }
.brass-frame.bf-compact > .bf-grid::before { z-index: 0 !important; }

/* Edges keep repeating; when middle = 0 the left/right disappear naturally.
   Avoid overshoot in tight mode so nothing sticks out. */
.brass-frame.bf-compact > .bf-grid > .bf.right  { margin-left: 0 !important; }
.brass-frame.bf-compact > .bf-grid > .bf.bottom { margin-top:  0 !important; }

/* ================================
   Orientation-aware compact modes
   - bf-compact-v: vertical tuck only
   - bf-compact-h: horizontal tuck only (scaffolded)
   Works for sm/md/lg via size tokens.
=================================== */

/* natural artwork heights per size */
.brass-frame.sm { --bf-corner-w: 30px; --bf-corner-h: 30px; --bf-edge-h: 21px; --bf-cap: 16px; }
.brass-frame.md { --bf-corner-w: 68px; --bf-corner-h: 68px; --bf-edge-h: 53px; --bf-cap: 24px; }
.brass-frame.lg { --bf-corner-w: 80px; --bf-corner-h: 80px; --bf-edge-h: 62px; --bf-cap: 30px; }
/* ===== Default (def) compact size tokens =====
   Values aligned to your def art:
   - Corners: 120px cells in .def grid
   - Edges:   100px natural thickness (top/bottom/left/right)
   - Cap:     48–60px looks right; start at 56px and tweak per instance via --bf-cap-override
*/
.brass-frame.def {
  --bf-corner-w: 120px;
  --bf-corner-h: 120px;
  --bf-edge-h:   100px;
  --bf-cap:       56px;   /* adjust to taste; can override per instance */
}


/* per-instance knobs (JS sets these if you pass data-*) */
.brass-frame {
  --bf-cap-override: initial; /* cap row height in compact */
  --bf-corner-overlap: 0px;   /* extra upward tuck for bottom corners */
  --bf-edge-trim: 0px;        /* optional 1–2px shave if you see tiny seams */
}

/* ===== Vertical compact ===== */
/* collapse vertical middle; keep small caps top/bottom */
.brass-frame.bf-compact-v > .bf-grid {
  grid-template-rows: var(--bf-cap-override, var(--bf-cap)) 0 var(--bf-cap-override, var(--bf-cap));
}

/* corners: draw as layers (no scaling) so they can overlap */
.brass-frame.bf-compact-v > .bf-grid > .bf.nw,
.brass-frame.bf-compact-v > .bf-grid > .bf.ne,
.brass-frame.bf-compact-v > .bf-grid > .bf.sw,
.brass-frame.bf-compact-v > .bf-grid > .bf.se {
  background-image: none !important;
  position: relative;
  overflow: visible;
}
.brass-frame.bf-compact-v > .bf-grid > .bf.nw::before,
.brass-frame.bf-compact-v > .bf-grid > .bf.ne::before,
.brass-frame.bf-compact-v > .bf-grid > .bf.sw::before,
.brass-frame.bf-compact-v > .bf-grid > .bf.se::before {
  content: "";
  position: absolute;
  width:  var(--bf-corner-w);
  height: var(--bf-corner-h);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.brass-frame.bf-compact-v > .bf-grid > .bf.nw::before { background-image: url('/images/frames/corner-nw-small.png'); left: 0; z-index: 3;
  top: calc(-1 * (var(--bf-corner-h) - var(--bf-cap-override, var(--bf-cap))));
}
.brass-frame.bf-compact-v > .bf-grid > .bf.ne::before { background-image: url('/images/frames/corner-ne-small.png'); right: 0; z-index: 3;
  top: calc(-1 * (var(--bf-corner-h) - var(--bf-cap-override, var(--bf-cap))));
}
.brass-frame.bf-compact-v > .bf-grid > .bf.sw::before { background-image: url('/images/frames/corner-sw-small.png'); left: 0; z-index: 2;
  top: calc(var(--bf-cap-override, var(--bf-cap)) - var(--bf-corner-h) + var(--bf-corner-overlap));
}
.brass-frame.bf-compact-v > .bf-grid > .bf.se::before { background-image: url('/images/frames/corner-se-small.png'); right: 0; z-index: 2;
  top: calc(var(--bf-cap-override, var(--bf-cap)) - var(--bf-corner-h) + var(--bf-corner-overlap));
}

/* edges (TOP/BOTTOM) as crisp overlays — no vertical squish */
.brass-frame.bf-compact-v > .bf-grid > .bf.top,
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom {
  background-image: none !important;  /* don't scale the sprite */
  position: relative; 
  overflow: visible;
  margin-top: 0 !important;           /* kill overshoot in compact mode */
}
.brass-frame.bf-compact-v > .bf-grid > .bf.top::before,
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--bf-edge-h);
  background-repeat: repeat-x;
  background-size: auto calc(var(--bf-edge-h) - var(--bf-edge-trim)); /* draw at natural thickness */
}
/* anchor the top edge to the bottom of the top cap (show its bottom slice) */
.brass-frame.bf-compact-v > .bf-grid > .bf.top::before {
  bottom: calc(-1 * (var(--bf-edge-h) - var(--bf-cap-override, var(--bf-cap))));
  background-image: url('/images/frames/edge-top.png');
  background-position: left bottom;
}
/* anchor the bottom edge to the top of the bottom cap (show its top slice) */
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom::before {
  top: calc(-1 * (var(--bf-edge-h) - var(--bf-cap-override, var(--bf-cap))));
  background-image: url('/images/frames/edge-bottom.png');
  background-position: left top;
}

/* keep right/left as-is in vertical mode (no changes) */
.brass-frame.bf-compact-v > .bf-grid > .bf.right { margin-left: 0 !important; } /* safety: no overshoot */
 /*.brass-frame.bf-compact-v > .bf-grid > .bf.left  { untouched }*/ 

/* content above slices; plate at bottom */
.brass-frame.bf-compact-v > .bf-content   { z-index: 4 !important; position: relative; }
/*.brass-frame.bf-compact-v > .bf-grid::before { z-index: 0 !important; }*/
.brass-frame.bf-compact-v > .bf-grid::before {
  /* If JS sets these, they apply; otherwise they default to 0 */
  margin-top: var(--bf-plate-mt, 0);
  margin-bottom: var(--bf-plate-mb, 0);
  z-index: var(--bf-plate-z, 0) !important; /* keep plate behind unless told otherwise */
}

/* ===== Horizontal compact (scaffold) ===== */
/* Future: mirror the same idea for left/right edges if you ever want it */
/* .brass-frame.bf-compact-h { no-op for now  }*/

/* === Vertical compact: hard-pin edge overlays, no midline drift === */
.brass-frame.bf-compact-v > .bf-grid > .bf.top,
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom {
  background-image: none !important;   /* we draw edges on ::before */
  position: relative;
  overflow: visible;
  margin-top: 0 !important;            /* kill overshoot */
}

/* Top edge lives at the bottom of the top cap row */
.brass-frame.bf-compact-v > .bf-grid > .bf.top::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--bf-edge-h);
  bottom: 14px;                             /* ← anchor, no math */
  background-image: url('/images/frames/edge-top.png');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto calc(var(--bf-edge-h) - var(--bf-edge-trim, 0px));
  z-index: 2;
}

/* Bottom edge lives at the top of the bottom cap row */
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--bf-edge-h);
  top: -8px;                               /* ← anchor, no math */
  background-image: url('/images/frames/edge-bottom.png');
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto calc(var(--bf-edge-h) - var(--bf-edge-trim, 0px));
  z-index: 2;
}

/* === Vertical compact: edges stay fixed; optional per-size/per-instance nudges === */
/* Natural art metrics per size (you already have these; kept here for clarity) */
.brass-frame.sm { --bf-edge-h: 21px; }
.brass-frame.md { --bf-edge-h: 53px; }
.brass-frame.lg { --bf-edge-h: 62px; }

/* Default “no nudge”; you can override from JS via data attributes */
.brass-frame { 
  --bf-top-edge-nudge: 0px;     /* positive pulls the top edge UP a bit */
  --bf-bottom-edge-nudge: 0px;  /* negative pushes the bottom edge UP a bit */
  --bf-edge-trim: 0px;          /* optional 1–2px shave of the sprite height */
}

/* We draw edges on ::before at their natural thickness and PIN them to the caps.
   These positions DO NOT depend on corner overlap. */
.brass-frame.bf-compact-v > .bf-grid > .bf.top,
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom {
  background-image: none !important;   /* we render with ::before */
  position: relative;
  overflow: visible;
  margin-top: 0 !important;
}

/* Top edge: sits on the bottom of the top cap, plus an optional nudge */
.brass-frame.bf-compact-v > .bf-grid > .bf.top::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: calc(var(--bf-edge-h) - var(--bf-edge-trim));
  bottom: var(--bf-top-edge-nudge);            /* <- stable anchor */
  background-image: url('/images/frames/edge-top.png');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto calc(var(--bf-edge-h) - var(--bf-edge-trim));
  z-index: 2;
}

/* Bottom edge: sits on the top of the bottom cap, plus an optional nudge */
.brass-frame.bf-compact-v > .bf-grid > .bf.bottom::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: calc(var(--bf-edge-h) - var(--bf-edge-trim));
  top: var(--bf-bottom-edge-nudge);            /* <- stable anchor */
  background-image: url('/images/frames/edge-bottom.png');
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto calc(var(--bf-edge-h) - var(--bf-edge-trim));
  z-index: 2;
}

/* ================================
   GLOBAL SCROLLBARS (MyBox look)
   Chrome/Edge/Safari
================================ */
*::-webkit-scrollbar {
  width: 32px;
  height: 32px;
}
*::-webkit-scrollbar-track {
  background: #fdf6ee;
  border-radius: 8px;
}

/* Thumb = PNG over a rounded "plate"
   - fixed image size
   - inner plate via background-color + border + background-clip */
*::-webkit-scrollbar-thumb {
  /* the brass plate behind the PNG */
  background-color: #f5cb90;                 /* plate color */
  border-radius: 12px;
  /*border: 8px solid #fdf6ee;                  creates the soft “pill” margin */
  /*background-clip: padding-box;*/

  /* the machine icon PNG */
  background: url('/images/my-scroll-thumb.png') no-repeat center;
  background-size: contain;
}

/* Hover = slightly brighter plate; keep PNG the same */
*::-webkit-scrollbar-thumb:hover {
  background-color: #f7d8a4;                 /* brighter plate on hover */
  filter: brightness(1.1);                              /* no unpredictable brightness scaling */
}

/* No up/down buttons */
*::-webkit-scrollbar-button:single-button {
  display: none;
  width: 0;
  height: 0;
}
*::-webkit-scrollbar-corner {
  background: #fdf6ee;
}

/* ===============================
   Frame open/close animation
   =============================== */
.brass-frame[data-anim-opening="true"] > .bf-content {
  visibility: hidden;  /* content hidden while frame animates */
}

.brass-frame[data-anim-complete="true"] > .bf-content {
  visibility: visible; /* content visible after full open */
  transition: opacity 200ms ease-in; /* smooth fade in */
  opacity: 1;
}

#effect-layer img.effect-flash {
  mix-blend-mode: screen; /* makes glow blend nicely */
  pointer-events: none;
}