/* ══════════════════════════════════════════════════════════════
   MARKINLY — PATTERN & SURFACE SYSTEM
   Formalises the square-grid / hairline / glow treatments that were
   previously only inside the image-fallback tiles, so the same premium
   texture can be applied deliberately across the whole site.

   Usage: add a surface class to any <section> or block.
     .pat-grid      fine navy graph paper (light surfaces)
     .pat-grid-lg   larger architectural grid
     .pat-dots      dot matrix
     .pat-diag      diagonal hairlines
     .pat-grid-dk   grid for dark bands
     .pat-glow-tr   warm brass glow, top-right
     .pat-glow-bl   cool navy glow, bottom-left
     .pat-edge      hairline rules top and bottom
   Combine freely: <section class="sec pat-grid pat-glow-tr">
══════════════════════════════════════════════════════════════ */

:root{
  --pat-line:rgba(11,37,64,.055);
  --pat-line-strong:rgba(11,37,64,.085);
  --pat-line-dk:rgba(255,255,255,.045);
  --pat-size:34px;
  --pat-size-lg:86px;
}

/* Every pattern paints into a ::before so the section keeps its own
   background token and stacking stays predictable. */
.pat-grid,.pat-grid-lg,.pat-dots,.pat-diag,.pat-grid-dk,
.pat-glow-tr,.pat-glow-bl,.pat-edge{position:relative;isolation:isolate}
.pat-grid::before,.pat-grid-lg::before,.pat-dots::before,.pat-diag::before,
.pat-grid-dk::before,.pat-glow-tr::before,.pat-glow-bl::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0}
.pat-grid > *,.pat-grid-lg > *,.pat-dots > *,.pat-diag > *,
.pat-grid-dk > *,.pat-glow-tr > *,.pat-glow-bl > *{position:relative;z-index:1}

/* ── Square graph-paper grid ── */
.pat-grid::before{
  background-image:
    linear-gradient(to right,var(--pat-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--pat-line) 1px,transparent 1px);
  background-size:var(--pat-size) var(--pat-size);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 40%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 68% at 50% 40%,#000 35%,transparent 78%)}

/* ── Larger architectural grid, with accented intersections ── */
.pat-grid-lg::before{
  background-image:
    linear-gradient(to right,var(--pat-line-strong) 1px,transparent 1px),
    linear-gradient(to bottom,var(--pat-line-strong) 1px,transparent 1px),
    linear-gradient(to right,var(--pat-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--pat-line) 1px,transparent 1px);
  background-size:var(--pat-size-lg) var(--pat-size-lg),var(--pat-size-lg) var(--pat-size-lg),
                  calc(var(--pat-size-lg)/4) calc(var(--pat-size-lg)/4),
                  calc(var(--pat-size-lg)/4) calc(var(--pat-size-lg)/4);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,transparent);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,transparent)}

/* ── Dot matrix ── */
.pat-dots::before{
  background-image:radial-gradient(var(--pat-line-strong) 1.2px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 30%,transparent 75%)}

/* ── Diagonal hairlines (matches the fallback-tile texture) ── */
.pat-diag::before{
  background-image:repeating-linear-gradient(115deg,var(--pat-line) 0 1px,transparent 1px 26px)}

/* ── Grid tuned for dark bands ── */
.pat-grid-dk::before{
  background-image:
    linear-gradient(to right,var(--pat-line-dk) 1px,transparent 1px),
    linear-gradient(to bottom,var(--pat-line-dk) 1px,transparent 1px);
  background-size:var(--pat-size) var(--pat-size);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%)}

/* ── Ambient glows ── */
.pat-glow-tr::before{
  background:radial-gradient(ellipse 46% 58% at 88% 4%,rgba(184,146,58,.09),transparent 62%)}
.pat-glow-bl::before{
  background:radial-gradient(ellipse 42% 54% at 6% 96%,rgba(11,37,64,.055),transparent 62%)}
/* When a glow shares a block with a grid, stack it in ::after instead. */
.pat-grid.pat-glow-tr::after,.pat-grid-lg.pat-glow-tr::after,.pat-dots.pat-glow-tr::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 46% 58% at 88% 4%,rgba(184,146,58,.1),transparent 62%)}
.pat-grid-dk.pat-glow-tr::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 60% at 92% 6%,rgba(184,146,58,.14),transparent 62%)}

/* ── Hairline edges ── */
.pat-edge{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ── Corner ticks: four small brackets, like a technical drawing ── */
.pat-ticks{position:relative}
.pat-ticks::before,.pat-ticks::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:var(--gold);opacity:.4}
.pat-ticks::before{top:14px;left:14px;border-top:1.5px solid;border-left:1.5px solid}
.pat-ticks::after{bottom:14px;right:14px;border-bottom:1.5px solid;border-right:1.5px solid}

/* ── Panel surface: subtle inner texture for cards that need presence ── */
.surface-tex{
  background-image:repeating-linear-gradient(115deg,rgba(11,37,64,.022) 0 1px,transparent 1px 24px);
  background-color:var(--white)}

/* ── Section rule: a hairline with a centred brass node ── */
.rule-node{position:relative;height:1px;background:var(--border);margin-block:0}
.rule-node::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);border-radius:1px}

@media(prefers-reduced-motion:reduce){
  .pat-grid::before,.pat-grid-lg::before,.pat-dots::before{animation:none}
}
@media(max-width:700px){
  :root{--pat-size:26px;--pat-size-lg:60px}
}