/* fatigue.css v2: a reusable "battle-worn iron" finish (Demo Sprint, Oct 18).
   Fatigued like used gym plates and bars: scratched in every direction, chipped at the edges, scuffed where hands land,
   pitted with rust, faded print, grime in the corners, the odd burn mark. Text stays readable, buttons stay tappable.
   Opt in:  <body data-fatigue="1".."5">  (nothing happens without the attribute; a bare data-fatigue = level 3)
   Then add classes where wear belongs:
     .fatigue           a surface (card, row, button, chip): scratches, pits, rust, scuffs, grime, chipped edge.
     .fatigue-on-light  with .fatigue on a LIGHT surface (cream buttons): wear uses the dark ink colour.
     .fatigue-media     a photo/video frame: warmer, flatter media, scratched glass, soft dark burnt edges.
     .fatigue-grade     grade only (warm, less saturated) for frames that already have their own overlay.
     .fatigue-type      a headline: pitted, patchy, unevenly inked letters (glows and shadows keep room to breathe).
   Scale (harsh): 1 just visible · 2 used · 3 clearly beaten up · 4 hard-worn · 5 heavily degraded (chipped, scratched, stained).
   Josiah's words: "more fatigue" / "less fatigue" = one level up / down the 1-5 range.
   Knobs (set on :root or any ancestor; a level sets the first three for you):
     --fatigue-strength  0..1   overall wear
     --fatigue-chip      px     width of the chipped edge band
     --fatigue-corner    x      size of corner grime / rub
     --fatigue-tint      colour of wear on dark surfaces (rubbed bare metal)
     --fatigue-ink       colour of wear on light surfaces (grime/scuffs)
   All textures are procedural (SVG feTurbulence data-URIs); no image files, no grain over the whole screen.
   Per element: put data-fatigue="1".."5" on any element (or set --fatigue-strength on it) to give it its own level
     under the page level, e.g. buttons and cards lighter than the page; add .fatigue-nochip to keep its edges clean.
   Focus rings are never chipped: :focus-visible drops the edge mask. */
:root{--fatigue-strength:.62;--fatigue-chip:4px;--fatigue-corner:1;--fatigue-tint:rgba(214,219,226,.20);--fatigue-ink:rgba(26,27,30,.30)}
[data-fatigue="1"]{--fatigue-strength:.28;--fatigue-chip:1px;--fatigue-corner:.6}
[data-fatigue="2"]{--fatigue-strength:.46;--fatigue-chip:2.5px;--fatigue-corner:.85}
[data-fatigue="3"]{--fatigue-strength:.64;--fatigue-chip:4px;--fatigue-corner:1.1}
[data-fatigue="4"]{--fatigue-strength:.82;--fatigue-chip:5.5px;--fatigue-corner:1.4}
[data-fatigue="5"]{--fatigue-strength:1;--fatigue-chip:7px;--fatigue-corner:1.8}

/* ---- surfaces ---- */
[data-fatigue] .fatigue{isolation:isolate;
  /* chipped edge: the inside stays solid, only a thin band at the border gets irregular bites */
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -7.5 0 0 0 5.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -7.5 0 0 0 5.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  -webkit-mask-size:calc(100% - 2 * var(--fatigue-chip)) calc(100% - 2 * var(--fatigue-chip)),160px 160px;mask-size:calc(100% - 2 * var(--fatigue-chip)) calc(100% - 2 * var(--fatigue-chip)),160px 160px;
  -webkit-mask-position:center,0 0;mask-position:center,0 0;-webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat}
[data-fatigue] .fatigue-nochip{--fatigue-chip:0px}
[data-fatigue] .fatigue:focus-visible{-webkit-mask-image:none;mask-image:none}
:where([data-fatigue] .fatigue){position:relative}
[data-fatigue] .fatigue::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:min(1,calc(var(--fatigue-strength) * 1.15));
  /* what shows through the wear: rust/pitting/burns, corner grime, scuffs where hands land, over bare-metal tint */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.44  0 0 0 0 0.20  0 0 0 0 0.10  2.4 0 0 0 -1.3'/%3E%3C/filter%3E%3Cfilter id='u' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.07  0 0 0 0 0.02  2.6 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23u)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 0 0,rgba(0,0,0,.55),transparent calc(30px * var(--fatigue-corner))),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.5),transparent calc(34px * var(--fatigue-corner))),
    radial-gradient(70% 55% at 50% 100%,var(--_fatigue-c,var(--fatigue-tint)),transparent 75%),
    var(--_fatigue-c,var(--fatigue-tint));
  background-size:300px 300px,100% 100%,100% 100%,100% 100%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,calc(.35 * var(--fatigue-strength))),inset 0 -2px 0 rgba(255,255,255,calc(.05 * var(--fatigue-strength)));
  /* where the wear is: scratches every way, pits, faded patches, scuffed bottom-centre, rubbed and grimy corners */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='s0' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s0)' transform='rotate(-28 200 200)'/%3E%3Cfilter id='s1' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s1)' transform='rotate(17 200 200)'/%3E%3Cfilter id='s2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='10' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s2)' transform='rotate(71 200 200)'/%3E%3Cfilter id='s3' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s3)' transform='rotate(-63 200 200)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.8 0 0 0 -0.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),
    radial-gradient(60% 45% at 50% 100%,#000,transparent 70%),
    radial-gradient(circle at 0 0,#000,transparent calc(30px * var(--fatigue-corner))),radial-gradient(circle at 100% 0,#000,transparent calc(18px * var(--fatigue-corner))),
    radial-gradient(circle at 0 100%,#000,transparent calc(16px * var(--fatigue-corner))),radial-gradient(circle at 100% 100%,#000,transparent calc(34px * var(--fatigue-corner)));
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='s0' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s0)' transform='rotate(-28 200 200)'/%3E%3Cfilter id='s1' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s1)' transform='rotate(17 200 200)'/%3E%3Cfilter id='s2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='10' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s2)' transform='rotate(71 200 200)'/%3E%3Cfilter id='s3' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.95' numOctaves='2' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23s3)' transform='rotate(-63 200 200)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4.6 0 0 0 -3.0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.8 0 0 0 -0.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),
    radial-gradient(60% 45% at 50% 100%,#000,transparent 70%),
    radial-gradient(circle at 0 0,#000,transparent calc(30px * var(--fatigue-corner))),radial-gradient(circle at 100% 0,#000,transparent calc(18px * var(--fatigue-corner))),
    radial-gradient(circle at 0 100%,#000,transparent calc(16px * var(--fatigue-corner))),radial-gradient(circle at 100% 100%,#000,transparent calc(34px * var(--fatigue-corner)));
  -webkit-mask-size:400px 400px,200px 200px,360px 360px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  mask-size:400px 400px,200px 200px,360px 360px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
[data-fatigue] .fatigue-on-light{--_fatigue-c:var(--fatigue-ink)}

/* ---- media ---- */
[data-fatigue] .fatigue-media :is(img,video),[data-fatigue] img.fatigue-media,
[data-fatigue] .fatigue-grade :is(img,video),[data-fatigue] img.fatigue-grade{
  filter:sepia(calc(.26 * var(--fatigue-strength))) saturate(calc(1 - .34 * var(--fatigue-strength))) contrast(calc(1 + .08 * var(--fatigue-strength))) brightness(calc(1 - .07 * var(--fatigue-strength)))}
[data-fatigue] .fatigue-media{isolation:isolate}
:where([data-fatigue] .fatigue-media){position:relative}
[data-fatigue] .fatigue-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m0' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.9' numOctaves='2' seed='40' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.86  5.5 0 0 0 -4.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23m0)' transform='rotate(-24 200 200)'/%3E%3Cfilter id='m1' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.9' numOctaves='2' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.86  5.5 0 0 0 -4.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23m1)' transform='rotate(58 200 200)'/%3E%3Cfilter id='m2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.9' numOctaves='2' seed='42' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.86  5.5 0 0 0 -4.05'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='800' height='800' filter='url(%23m2)' transform='rotate(9 200 200)'/%3E%3C/svg%3E"),radial-gradient(30% 22% at 88% 12%,rgba(40,14,4,.55),transparent 70%);background-size:400px 400px,100% 100%;
  opacity:calc(.25 + .75 * var(--fatigue-strength));
  box-shadow:inset 0 0 calc(18px + 46px * var(--fatigue-strength)) rgba(14,6,2,calc(.3 + .45 * var(--fatigue-strength)))}

/* ---- type ---- */
[data-fatigue] .fatigue-type{padding:.16em .22em;margin:-.16em -.22em;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,calc(1 - .95 * var(--fatigue-strength))),rgba(0,0,0,calc(1 - .95 * var(--fatigue-strength)))),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.06' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.4 0 0 0 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image:linear-gradient(rgba(0,0,0,calc(1 - .95 * var(--fatigue-strength))),rgba(0,0,0,calc(1 - .95 * var(--fatigue-strength)))),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.06' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.4 0 0 0 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-composite:source-over,source-in;mask-composite:add,intersect;
  -webkit-mask-size:100% 100%,180px 180px,420px 200px;mask-size:100% 100%,180px 180px,420px 200px}

@media (forced-colors:active){[data-fatigue] .fatigue,[data-fatigue] .fatigue-type{-webkit-mask-image:none;mask-image:none}[data-fatigue] .fatigue::before,[data-fatigue] .fatigue-media::after{display:none}}