/* ------------------------------------------------------------
   FRAME.CSS — dotted page frame
   ------------------------------------------------------------
   A blueprint frame around the content column: dotted gutters,
   dashed rails at the column edges, dashed section rules, and
   small corner ticks on cards.

   Markup:

     <div class="page-frame">
       <hr class="frame-rule">
       <section class="section"> ... </section>
       <hr class="frame-rule">
     </div>

   Wrap anything that should sit inside the frame. The hero stays
   outside it so the ink wash keeps the full width.
   ------------------------------------------------------------ */

:root {
  /* Width of the clean band. Matches .container max-width. */
  --frame-w: 1100px;
  --frame-gap: 6px;
  --frame-dot: color-mix(in srgb, var(--text-3) 45%, transparent);
  --frame-line: var(--border);
  --frame-tick: color-mix(in srgb, var(--text-3) 70%, transparent);
  --frame-tick-size: 7px;
  --frame-tick-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%277%27%20height%3D%277%27%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%276%27%20height%3D%276%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
}

/* The dots cover the whole strip; the band below paints over the middle,
   so only the gutters keep their texture. */
.page-frame {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(var(--frame-dot) 1px, transparent 1.1px);
  background-size: var(--frame-gap) var(--frame-gap);
}

/* Clean band + the two dashed rails, in one element. */
.page-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frame-w);
  max-width: 100%;
  background: var(--bg);
  border-left: 1px dashed var(--frame-line);
  border-right: 1px dashed var(--frame-line);
  pointer-events: none;
}

.page-frame > * {
  position: relative;
  z-index: 1;
}

/* Full-bleed dashed separator between sections. */
.frame-rule {
  border: 0;
  border-top: 1px dashed var(--frame-line);
  margin: 0;
}

/* Four hollow corner squares. Put this on a wrapper, not on .card itself —
   .card clips its overflow and the ticks sit outside the box. */
.frame-ticks {
  position: relative;
}

.frame-ticks::after {
  content: "";
  position: absolute;
  inset: calc(var(--frame-tick-size) / -2 + 0.5px);
  pointer-events: none;
  background-color: var(--frame-tick);
  -webkit-mask-image: var(--frame-tick-svg), var(--frame-tick-svg), var(--frame-tick-svg), var(--frame-tick-svg);
          mask-image: var(--frame-tick-svg), var(--frame-tick-svg), var(--frame-tick-svg), var(--frame-tick-svg);
  -webkit-mask-size: var(--frame-tick-size) var(--frame-tick-size);
          mask-size: var(--frame-tick-size) var(--frame-tick-size);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top, right top, left bottom, right bottom;
          mask-position: left top, right top, left bottom, right bottom;
}

/* Below the band width the gutters have no room, so drop the texture
   rather than show a sliver of it. */
@media (max-width: 1140px) {
  .page-frame { background-image: none; }
  .page-frame::before { border-left: 0; border-right: 0; }
}