/* d&d advisory — dad's Celtic-knot frame, hung on a gallery wall.

   The art (celtic-frame.png, 1672x941) has a ~145px band on all four sides,
   so it works as a border-image: corners stay intact, the knot pattern tiles
   along the edges ("round" keeps whole knots), and the band can be drawn at
   any thickness. This is what makes the frame BOTH thinner and dynamic — the
   shell now fills the viewport at any aspect instead of being locked to the
   art's 1672:941.

   --gutter = the wall around the piece.  --bw = the drawn band thickness. */

:root {
  --gutter: clamp(32px, 8vmin, 130px);
  /* 30% thinner than the first pass — matching how the band reads on phones */
  --bw: clamp(18px, 3.2vmin, 38px);
}

.site-shell {
  position: relative;
  width: calc(100vw - 2 * var(--gutter));
  height: calc(100svh - 2 * var(--gutter));
  min-height: 420px;
  max-width: 1500px;
  flex: none;
  /* the mat: a shade brighter than the wall, lifted off it like a mounted print */
  background: #fdfcf8;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 14px 44px -20px rgba(70,58,36,.4);
}

.knot-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: var(--bw) solid transparent;
  border-image: url("celtic-frame.png") 145 round;
  /* stamped-ink treatment: uneven coverage via a noise mask, slightly
     drier color, and multiply so the ink sits *on* the paper */
  mix-blend-mode: multiply;
  opacity: .88;
  filter: saturate(.72) contrast(1.12) brightness(1.03);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 .9 .9 0 -.45'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 320px 320px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 .9 .9 0 -.45'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size: 320px 320px;
}

/* the old <img> frame is superseded by the border-image */
.knot-frame img { display: none; }

@media (orientation: portrait) {
  :root {
    --gutter: clamp(20px, 5vmin, 70px);
    --bw: clamp(20px, 5.6vw, 34px);
  }
}