/* ============================================================
   THE MATERIAL OF SÚIL'S OWN SURFACES — 1 November 2026

   tokens.css says what colour a brand surface is; this file says
   what it is made of. It loads only on the six pages that are
   Súil's rather than a club's (the public page and the doors in),
   after tokens.css and before the page's own style block, and it
   never loads inside the hub — a coach planning a session should
   not be looking at texture.

   Eóin, 1 Nov 2026: "I do love a hand drawn/painted feeling."
   That was already the rule — icons.js is one marker stroke,
   spots.js inks a mass under an outline, the mark is a pen line.
   The two places it had not reached were the paper, which was a
   flat fill, and the rules on it, which were CSS borders.

   Two moves, both at the threshold of perception. The standard
   still holds: one ornament, and nothing else is decorative.
   ============================================================ */

:root{
  /* PAPER TOOTH. Fractal noise, desaturated, laid over the paper
     colour at five per cent and tiled at 140 px so no repeat is
     findable. Not a picture of paper — the grain you only notice
     when you take it away. Multiplying would bruise the moss, so
     it is painted straight over the ground colour instead.
     (make_brand_assets.py reads this value, so the icons and the
     link card stand on the same paper as the pages.) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  /* On a dark ground the same noise reads as dust, so it is lighter
     and fainter — the tooth of the paper, not grit on the screen. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* The paper has a tooth. The colour is still the token's; the grain
   sits on top of it and scrolls with the page, because paper does. */
:root[data-brand] body{
  background-image:var(--grain);
  background-size:140px 140px;
  background-attachment:scroll;
}

/* A rule is a line somebody drew. A CSS border is machine-straight
   and both ends land at exactly the same weight; a pen bows a little
   in the middle and lifts at the end. These are the same hairline
   token, given a hand: the ink fades out over the last eighth, and
   the line carries a 0.6 px sag. Only the full-width rules that
   separate one part of a page from the next — a list's own hairlines
   stay plain, because fifteen bowed lines in a column is a pattern,
   and the ornament is meant to be noticed once. The selectors name the
   element as well as the class on purpose: `.foot` is a <footer> that
   divides the public page, and also a <p> of links at the bottom of the
   sign-in card, which is not a divider and must not grow a rule. */
:root[data-brand] section.sec,
:root[data-brand] footer.foot{
  border-top:0;
  position:relative;
}
:root[data-brand] section.sec::before,
:root[data-brand] footer.foot::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:
    radial-gradient(ellipse 100% 140% at 50% 0%,
      var(--line-2) 0%, var(--line-2) 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  pointer-events:none;
}

/* The day list on the public page leads with a heavier ink rule; it is
   the one place a line is meant to read as drawn with intent, so it
   keeps its weight and takes the same lift at the ends. */
:root[data-brand] .day{
  border-top:0;
  position:relative;
  padding-top:16px;
}
:root[data-brand] .day::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:var(--ink);
  -webkit-mask-image:linear-gradient(90deg, #000, #000 86%, transparent);
          mask-image:linear-gradient(90deg, #000, #000 86%, transparent);
}

/* Texture costs a little contrast and a little calm. Anyone who has
   asked their system for more of either gets the flat paper back. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  :root[data-brand] body{ background-image:none; }
}