/* ===========================================================================
   Renzo's filete — the line set
   Requires: assets/css/renzos-tokens.css?v=2  (--pinstripe, --sunlit-brass)
   Requires: the filete sprite included once per page.
   One weight, one colour, no shadow, no fill. Do not add any.
   =========================================================================== */

:root { --filete: var(--pinstripe, #D0A93E); }

/* Any dark field flips the gold. Add .on-dark to the section, not the mark. */
.on-dark, .sec--stone, .sec--black { --filete: var(--sunlit-brass, #E3C97B); }

.fil {
  display: block;
  margin: 30px auto;
  width: 100%;
  color: var(--filete);
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Stroke weight is pinned per-path in the sprite (vector-effect:non-scaling-stroke),
   so every mark reads at exactly 1px no matter how large or small it is drawn.
   Dots carry fill="currentColor" as an attribute — CSS selectors cannot reach
   inside a <use> shadow tree, only inherited properties pass through. */

/* --- horizontal marks: A B C D E F ---------------------------------------- */
.fil--a { max-width: 480px; aspect-ratio: 466.0 / 6.0; }
.fil--b { max-width: 480px; aspect-ratio: 466.0 / 24.0; }
.fil--c { max-width: 480px; aspect-ratio: 466.0 / 50.1; }
.fil--d { max-width: 480px; aspect-ratio: 466.0 / 50.5; }
.fil--e { max-width: 480px; aspect-ratio: 426.9 / 48.4; }
.fil--f { max-width: 480px; aspect-ratio: 466.0 / 36.0; }

/* --- G colophon: smaller by design ---------------------------------------- */
.fil--g { max-width: 180px; aspect-ratio: 98.8 / 38.9; margin: 44px auto 0; }

/* --- H corner: absolute inside a positioned card --------------------------- */
.fil-card { position: relative; padding: 44px 24px 30px 52px; min-height: 172px; }
.fil--h {
  position: absolute; top: 0; left: 0; margin: 0;
  width: 230px; max-width: 100%; height: 120px;
  pointer-events: none;
}

/* --- I column drop: sits in its own grid track ----------------------------- */
.fil--i { width: 54px; height: 100%; max-height: 180px; margin: 0 auto; align-self: center; }

/* --- spacing helpers ------------------------------------------------------- */
.fil--tight { margin-top: 16px; margin-bottom: 16px; }
.fil--loose { margin-top: 48px; margin-bottom: 48px; }

/* --- print & reduced-motion: nothing to do, these are static paths ---------- */
@media print { .fil { color: #000; } }