/* grantapoulton.com AS IT IS TODAY, with only the new paw and rake added.
   Nothing about the site's own look is touched: this file styles the claw layer
   and neutralises the older gold-stroke claw implementation the pages ship.

   The live sheet is dark, so the engraving is cut in the page's own cream
   line-ink rather than in press black, and the blood keeps the red you chose. */

/* on :root, so BOTH layers inherit them - the paw sits on its own host and is
   a sibling of the rake, not a child of it */
:root{
  --claw-line:#E8DCC0;     /* the live site's own paper colour, used as line-ink */
  --claw-under:#0d0c0b;    /* the halo that carries the paw over a cream pane */
  --claw-tone:.18;         /* the hatch: a whisper. .4 reads plainly as engraving */
  --claw-blood:#570a05;    /* the wound */
  --paw-show:1;            /* 0 parks the paw and leaves the grooves */
}

#scar{
  position:fixed!important; inset:0!important; left:0!important; top:0!important;
  width:100%!important; height:100vh!important; height:100lvh!important;
  pointer-events:none; z-index:95; opacity:1!important;
}

/* undo the older implementation: a gold stroke, a dash-offset reveal, a blur,
   and a body class that dimmed the whole layer */
#scar svg{display:block;width:100%;height:100%;overflow:visible;filter:none!important}
#scar path{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}
body.scar-veil #scar:not(.rake-gone){opacity:1!important}

/* the engraver's plates */
#scar .plate-line{stroke:var(--claw-line);stroke-opacity:var(--claw-tone)}
#scar .plate-dot{fill:var(--claw-blood);fill-opacity:1}

/* the rake */
#scar .bruise{fill:none;stroke:var(--claw-line);stroke-opacity:.07;stroke-width:7;stroke-linejoin:round}
#scar .tear{fill:url(#clawHatch);stroke:none!important}
#scar .deep{fill:url(#clawHatchDeep);stroke:none!important}
#scar .flesh{fill:var(--claw-blood);fill-opacity:.95;stroke:none!important}
#scar .lip{fill:none;stroke:var(--claw-line);stroke-opacity:.5;stroke-width:1;stroke-linejoin:round}
#scar .fibre{fill:none;stroke:var(--claw-line);stroke-opacity:.34;stroke-width:.8;stroke-linecap:round}

/* the paw */
#scar-paw .paw{opacity:var(--paw-show)}
#scar-paw .paw .pad{fill:url(#clawHatch);stroke:var(--claw-line);stroke-opacity:.78;stroke-width:1.3}
#scar-paw .paw .claw{fill:var(--claw-line);fill-opacity:.85;stroke:none!important}
/* the halo: outline only, so the paw never becomes a blob over the words */
#scar-paw .paw .under{fill:none!important;stroke:var(--claw-under)!important;stroke-linejoin:round}
#scar-paw .paw .pad.under{stroke-width:3.4;stroke-opacity:.62}
#scar-paw .paw .claw.under{stroke-width:2.8;stroke-opacity:.8}


/* ═══ THE WORDS SIT ABOVE THE RAKE ══════════════════════════
   The claws pass over every ground, wash, panel and picture, and under the
   actual letterforms. There is no mask doing this: the browser paints the
   glyphs over the claw layer, so what covers the rake is the type itself and
   not a box around it. Chrome that must stay legible - the sticky nav, the
   floating button, the reader panes - keeps its own higher layer. */
#scar{z-index:50!important}

/* the pages lift whole blocks into their own stacking layers, which would
   carry the words down below the rake with them; flatten only those wrappers */
header,section,footer,.hero,
.hero>.wrap,section>.wrap,footer>.wrap,
#opening>.wrap>*:not(.pg-zone),#doors>.wrap>*:not(.pg-zone),
#notify>.wrap>*:not(.col),#notify .col>*:not(.pg-zone),
.card,.gate,.joinbox{z-index:auto!important}

/* and the words rise */
h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,dt,dd,td,th,label,cite,
.eyebrow,.s-label,.label,.vol,.st,.yr,.place,.lede,.lead,.fineprint,.muted,
.note,.fine,.count,.off,.stand,.first,.piece,.series,.deck,.terms,.signed,
.dateline,.col-head,.storylinks,.imprint,.quench,
a,.btn,button,input,select,textarea{position:relative;z-index:51}


/* ═══ CLICK A RAKE TO DISMISS IT ═════════════════════════════
   A click anywhere on the screen dismisses it, so the claw layer never takes
   the pointer and never intercepts a picture, a link or a field underneath it.
   The next scroll brings the layer back, and
   because the paw and the blood are recomputed from scroll position there is
   no state to restore - it returns exactly where it would have been. */
#scar{transition:opacity .45s var(--ease)}
#scar.rake-gone{opacity:0!important}
#scar.rake-gone,#scar.rake-gone *{pointer-events:none!important}
@media (prefers-reduced-motion:reduce){#scar{transition:none}}


/* ═══ THE PAW IS THE CLICK TARGET ════════════════════════════
   It sits on its own layer above the type, so no paragraph can swallow the
   click, and carries an invisible hit area wider than the drawn pads. The
   grooves stay below the words. Clicking anything else does nothing. */
#scar-paw{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;
  z-index:52;pointer-events:none;transition:opacity .45s var(--ease)}
#scar-paw svg{display:block;width:100%;height:100%;overflow:visible}
#scar-paw .paw{pointer-events:auto;cursor:pointer}
#scar-paw.rake-gone{opacity:0!important}
#scar-paw.rake-gone,#scar-paw.rake-gone *{pointer-events:none!important}
@media (prefers-reduced-motion:reduce){#scar-paw{transition:none}}


/* ═══ KNOWING THE PAW CAN BE PRESSED ═════════════════════════
   No instructions anywhere and no circle. The claws deepen under the pointer
   and go solid on press. It is also a real control: Tab reaches it, Enter and
   Space work it, and it carries a name for a screen reader. */
#scar-paw .paw .pad,#scar-paw .paw .claw{
  transition:fill-opacity .25s var(--ease),stroke-opacity .25s var(--ease)}

/* no circle, ever: the hit area is invisible and only catches the click */
#scar-paw .hit{fill:transparent;stroke:none!important;animation:none!important}
#scar-paw .paw:hover .claw{fill-opacity:1}
#scar-paw .paw:hover .pad{stroke-opacity:.85}

/* it presses */
#scar-paw .paw:active .claw{fill-opacity:1}

/* and it takes focus from the keyboard: the paw brightens, no ring */
#scar-paw .paw:focus{outline:none}
#scar-paw .paw:focus-visible .claw{fill-opacity:1}
#scar-paw .paw:focus-visible .pad{stroke-opacity:1;stroke-width:1.8}