/* ============================================================
   TEXTURE
   The layer that makes the site feel made rather than generated.
   Paper tooth, ink marks, and drawn rules.

   Section 04 of the guidelines bans mandalas, sacred geometry,
   lotus flowers, gradients, DMT fractals and anything glowing from
   within. Section 07 leaves the motif set open, pending Kelly
   working from the pattern files Michelle already owns, and says
   to build with none rather than placeholders. So the large
   pattern fields that used to sit behind these sections are gone:
   the seed head was phyllotaxis, which reads as sacred geometry
   however it was computed, and the ripples were a placeholder for
   a set that has not been drawn yet.

   What stays is texture rather than motif. Paper tooth so Linen
   reads as a sheet. Michelle's four founding images as small ink
   marks in the margin. Drawn rules where a 1px border would read
   as mechanical.

   Everything here is decorative and sits behind content at low
   opacity. Turn the whole layer off by deleting one link tag in
   the head. Nothing depends on it.
   ============================================================ */

/* ---- Paper tooth ---------------------------------------------
   Fractal noise as a background, so Linen reads as a sheet rather
   than a flat fill. Very low opacity: it should register as warmth
   and not as visible grain. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.section, .site-header, .site-footer, main { position: relative; z-index: 1; }

/* ---- Ink marks in the margin ---------------------------------
   Michelle's four founding images: the doorway, the river, the
   tree, and the lantern that lights only the next few steps.
   Every one of them refuses an ending, which is why they are the
   marks and not something decorative. */
.mark {
  display: block;
  color: var(--gold);
  width: 2.75rem;
  aspect-ratio: 64 / 84;   /* height auto collapses inside flex */
  height: auto;
  margin-bottom: var(--s-3);
}
.mark--wide { width: 5.25rem; aspect-ratio: 84 / 48; }
.section--dark .mark, .section--plum .mark { color: var(--gold); }

/* Eyebrow with its mark sitting beside it rather than above */
.label-row { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.label-row .mark { width: 2.25rem; margin: 0; flex: none; }
.label-row .eyebrow { margin: 0; }

/* ---- Drawn rules ---------------------------------------------
   A hand-drawn line where a 1px border would read as mechanical. */
.rule-sketch {
  display: block; width: 100%; height: 0.4rem;
  color: var(--gold); opacity: 0.85; margin: var(--s-4) 0;
}
.rule-roots {
  display: block; width: 100%; max-width: 22rem; height: 1.7rem;
  color: var(--gold); opacity: 0.8; margin: var(--s-3) 0 var(--s-5);
}

/* Pillars and testimonials get a drawn top edge instead of a
   straight border. */
.pillar, .testimonial {
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='5' preserveAspectRatio='none'%3E%3Cpath d='M1 3 Q60 1 120 3.2 T239 2.4' fill='none' stroke='%23b8966a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: left top;
  padding-top: var(--s-3);
}

/* The header sits on a drawn line too. */
.site-header {
  border-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='5' preserveAspectRatio='none'%3E%3Cpath d='M1 3 Q75 1.2 150 3.1 T299 2.2' fill='none' stroke='%23b8966a' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: left bottom;
}

/* ---- Image slots ---------------------------------------------
   Waiting on real photographs: real rooms, real bodies, low
   natural light, one source. Until then they carry a mark so the
   page still reads as drawn rather than as broken. */
.imgslot { position: relative; }
/* The mark sits above the label rather than across it. */
.imgslot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); }
.imgslot .mark { position: static; opacity: 0.6; width: 3.25rem; aspect-ratio: 64 / 84; margin: 0; }