/* hexplate.css: hexagon sheet-metal finish (Demo Sprint, Oct 18). Reusable, procedural, no image files.
   1) The overlay, like Blue Repair's frailejon wallpaper but expanded hex sheet metal:
        <div class="hexplate" aria-hidden="true"></div>   inside any positioned panel, behind its content.
      Steel hex outlines with a faint bevel on each cell's top-left edges, and an ember rim light from the bottom.
   2) Sheet-metal edges on panels and cards:  class="plate-edge"
      A thin brushed-steel border with a bevel (light top-left, dark bottom-right) and four corner rivets.
   Knobs: --hex-opacity (overlay strength, default .07 for light paper; ~.12 reads as plate on near-black), --hex-size (cell scale, default 1), --hex-rim (ember rim colour),
          --plate-steel (border colour), --rivet (rivet colour).
   With fatigue.css on the page ([data-fatigue]), the overlay wears away in patches. */
:root{--hex-opacity:.07;--hex-size:1;--hex-rim:rgba(255,110,50,1);--plate-steel:rgba(160,166,174,.34);--rivet:#c6cad0}

.hexplate{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--hex-opacity);
  background:linear-gradient(to top,var(--hex-rim) 0,rgba(214,200,186,1) 34%,rgba(214,200,186,.75) 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolygon points='11.26,1.60 21.13,7.30 21.13,18.70 11.26,24.40 1.39,18.70 1.39,7.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,21.10 9.87,26.80 9.87,38.20 0.00,43.90 -9.87,38.20 -9.87,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,21.10 32.39,26.80 32.39,38.20 22.52,43.90 12.64,38.20 12.64,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='11.26,40.60 21.13,46.30 21.13,57.70 11.26,63.40 1.39,57.70 1.39,46.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,-17.90 9.87,-12.20 9.87,-0.80 0.00,4.90 -9.87,-0.80 -9.87,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,-17.90 32.39,-12.20 32.39,-0.80 22.52,4.90 12.64,-0.80 12.64,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cg stroke-opacity='.55'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolygon points='11.26,1.60 21.13,7.30 21.13,18.70 11.26,24.40 1.39,18.70 1.39,7.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,21.10 9.87,26.80 9.87,38.20 0.00,43.90 -9.87,38.20 -9.87,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,21.10 32.39,26.80 32.39,38.20 22.52,43.90 12.64,38.20 12.64,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='11.26,40.60 21.13,46.30 21.13,57.70 11.26,63.40 1.39,57.70 1.39,46.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,-17.90 9.87,-12.20 9.87,-0.80 0.00,4.90 -9.87,-0.80 -9.87,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,-17.90 32.39,-12.20 32.39,-0.80 22.52,4.90 12.64,-0.80 12.64,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cg stroke-opacity='.55'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size));mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size))}
.hexplate::before{content:"";position:absolute;inset:0;background:rgba(255,246,236,1);opacity:.7;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");
  -webkit-mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size));mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size))}
[data-fatigue] .hexplate{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolygon points='11.26,1.60 21.13,7.30 21.13,18.70 11.26,24.40 1.39,18.70 1.39,7.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,21.10 9.87,26.80 9.87,38.20 0.00,43.90 -9.87,38.20 -9.87,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,21.10 32.39,26.80 32.39,38.20 22.52,43.90 12.64,38.20 12.64,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='11.26,40.60 21.13,46.30 21.13,57.70 11.26,63.40 1.39,57.70 1.39,46.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,-17.90 9.87,-12.20 9.87,-0.80 0.00,4.90 -9.87,-0.80 -9.87,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,-17.90 32.39,-12.20 32.39,-0.80 22.52,4.90 12.64,-0.80 12.64,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cg stroke-opacity='.55'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/g%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.02' numOctaves='3' seed='13' 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 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.52' height='39.00'%3E%3Cpolygon points='11.26,1.60 21.13,7.30 21.13,18.70 11.26,24.40 1.39,18.70 1.39,7.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,21.10 9.87,26.80 9.87,38.20 0.00,43.90 -9.87,38.20 -9.87,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,21.10 32.39,26.80 32.39,38.20 22.52,43.90 12.64,38.20 12.64,26.80' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='11.26,40.60 21.13,46.30 21.13,57.70 11.26,63.40 1.39,57.70 1.39,46.30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='0.00,-17.90 9.87,-12.20 9.87,-0.80 0.00,4.90 -9.87,-0.80 -9.87,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpolygon points='22.52,-17.90 32.39,-12.20 32.39,-0.80 22.52,4.90 12.64,-0.80 12.64,-12.20' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cg stroke-opacity='.55'%3E%3Cpolyline points='2.60,18.00 2.60,8.00 11.26,3.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,37.50 -8.66,27.50 0.00,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,37.50 13.86,27.50 22.52,22.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='2.60,57.00 2.60,47.00 11.26,42.00' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='-8.66,-1.50 -8.66,-11.50 0.00,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3Cpolyline points='13.86,-1.50 13.86,-11.50 22.52,-16.50' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/g%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.02' numOctaves='3' seed='13' 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 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size)),360px 360px;mask-size:calc(22.52px * var(--hex-size)) calc(39.00px * var(--hex-size)),360px 360px;
  -webkit-mask-composite:source-in;mask-composite:intersect}

.plate-edge{position:relative}
.plate-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px var(--plate-steel),inset 1px 1px 0 1px rgba(255,255,255,.07),inset -1px -1px 0 1px rgba(0,0,0,.45);
  background:
    radial-gradient(circle at 9px 9px,var(--rivet) 0 1px,#62666c 1.6px,rgba(0,0,0,.55) 2.4px,transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px,var(--rivet) 0 1px,#62666c 1.6px,rgba(0,0,0,.55) 2.4px,transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px),var(--rivet) 0 1px,#62666c 1.6px,rgba(0,0,0,.55) 2.4px,transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),var(--rivet) 0 1px,#62666c 1.6px,rgba(0,0,0,.55) 2.4px,transparent 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px) bottom/100% 1px no-repeat}
@media (forced-colors:active){.hexplate{display:none}.plate-edge::after{display:none}}