/* parts/paper.css — THE PAPER LAYER (SJS_SITE_MASTER.md Amendment D). The brand's own HTML art, brought to the site.
   Akash: "It's meh looking site. Animations look terrible. Make it an experience. Make html art work … bring that
   essence over to the site so all work reflect it." The essence is the showcase engine in SJS-MASTER-VIEWER
   (shared/showcase/engine.js): warm charcoal with grain, cut paper with a white cut edge and a shadow, tape, tags that
   land on their beat, stamps that slam in, a gold run that lights the steps, dust that moves only inside a shaft of
   light, mood told as light.
   Linked on every page right after parts/components.css (the exam room keeps its plain look). Laws kept: square
   corners (a torn edge is not a rounded corner), no pictures or emoji (CSS and SVG only), one primary button, nothing
   under 12px or under 4.5:1 (the ink printed on paper is --ink-d, 13:1 on --paper), and under prefers-reduced-motion
   nothing moves and every piece is already where it lands. sjs-art.js (SJS.paper) adds the light shaft and its dust,
   and the SVG cut-edge filter the drawings use (html.sjs-paper-on once it is in the page).

   1  the ground     warm charcoal, fine grain, a soft vignette: behind everything, never over text
   2  the paper kit  .sjs-paper · .sjs-strip · .sjs-tape · .sjs-ptag · .sjs-seal · .sjs-pad
   3  motion         land · drop · slam · draw · tear; .sjs-reveal re-timed on the brand's easing
   4  drawings       .sjs-cut on an SVG shape: the cut edge and shadow of paper
   5  retired        the terminal idioms the brand dropped: the grid, scanlines, the sweep, the rings */
:root {
  --torn-a: polygon(0% 2.88px, 2.27% 0.15px, 4.55% 1.82px, 6.82% 0.3px, 9.09% 3.05px, 11.36% 1.92px, 13.64% 1.95px, 15.91% 0.65px, 18.18% 1.05px, 20.45% 2.21px, 22.73% 0.78px, 25% 0.33px, 27.27% 2.86px, 29.55% 1.91px, 31.82% 3.17px, 34.09% 3.52px, 36.36% 1.29px, 38.64% 2.76px, 40.91% 1.15px, 43.18% 2.69px, 45.45% 2.11px, 47.73% 3.33px, 50% 2.16px, 52.27% 0.05px, 54.55% 3.51px, 56.82% 1.24px, 59.09% 3.75px, 61.36% 3.08px, 63.64% 1.68px, 65.91% 2.86px, 68.18% 0.62px, 70.45% 1.47px, 72.73% 2.89px, 75% 0.01px, 77.27% 0.03px, 79.55% 1.91px, 81.82% 3.45px, 84.09% 2.41px, 86.36% 2.73px, 88.64% 3.15px, 90.91% 2.34px, 93.18% 2.33px, 95.45% 0.28px, 97.73% 1.49px, 100% 2.12px, calc(100% - 3.35px) 10%, calc(100% - 1.65px) 20%, calc(100% - 1.86px) 30%, calc(100% - 1.99px) 40%, calc(100% - 2.28px) 50%, calc(100% - 3.1px) 60%, calc(100% - 3.42px) 70%, calc(100% - 2.66px) 80%, calc(100% - 1.49px) 90%, calc(100% - 2.76px) 100%, 97.73% calc(100% - 2.8px), 95.45% calc(100% - 1.87px), 93.18% calc(100% - 3.92px), 90.91% calc(100% - 3.52px), 88.64% calc(100% - 2.85px), 86.36% calc(100% - 2.71px), 84.09% calc(100% - 3.81px), 81.82% calc(100% - 3.06px), 79.55% calc(100% - 0.23px), 77.27% calc(100% - 0.26px), 75% calc(100% - 2.15px), 72.73% calc(100% - 3.46px), 70.45% calc(100% - 1.38px), 68.18% calc(100% - 2.16px), 65.91% calc(100% - 1.16px), 63.64% calc(100% - 1.85px), 61.36% calc(100% - 2.21px), 59.09% calc(100% - 2.31px), 56.82% calc(100% - 1.56px), 54.55% calc(100% - 3.02px), 52.27% calc(100% - 0.69px), 50% calc(100% - 3.81px), 47.73% calc(100% - 2.57px), 45.45% calc(100% - 3px), 43.18% calc(100% - 3.08px), 40.91% calc(100% - 0.24px), 38.64% calc(100% - 1.65px), 36.36% calc(100% - 0.62px), 34.09% calc(100% - 2.76px), 31.82% calc(100% - 3.1px), 29.55% calc(100% - 2.48px), 27.27% calc(100% - 3.95px), 25% calc(100% - 3.96px), 22.73% calc(100% - 3.92px), 20.45% calc(100% - 2.33px), 18.18% calc(100% - 3.55px), 15.91% calc(100% - 3.8px), 13.64% calc(100% - 3.25px), 11.36% calc(100% - 1.26px), 9.09% calc(100% - 2.5px), 6.82% calc(100% - 3.78px), 4.55% calc(100% - 1.56px), 2.27% calc(100% - 2.4px), 0% calc(100% - 0.56px), 2.52px 90%, 2.19px 80%, 1.03px 70%, 3.52px 60%, 0.2px 50%, 3.39px 40%, 0.35px 30%, 1.7px 20%, 3.56px 10%);
  --torn-b: polygon(0% 2.71px, 2.27% 0.77px, 4.55% 2.13px, 6.82% 0.66px, 9.09% 0.35px, 11.36% 3.04px, 13.64% 1.13px, 15.91% 2.19px, 18.18% 1.03px, 20.45% 2.73px, 22.73% 3.19px, 25% 1.22px, 27.27% 0.94px, 29.55% 0.79px, 31.82% 2.52px, 34.09% 2.96px, 36.36% 1.17px, 38.64% 1.93px, 40.91% 2.76px, 43.18% 2.68px, 45.45% 2.22px, 47.73% 2.43px, 50% 2.26px, 52.27% 1.62px, 54.55% 0.26px, 56.82% 0.26px, 59.09% 3.51px, 61.36% 1.28px, 63.64% 1.7px, 65.91% 2.54px, 68.18% 2.42px, 70.45% 0.18px, 72.73% 0.92px, 75% 3.21px, 77.27% 0.42px, 79.55% 3.83px, 81.82% 1.28px, 84.09% 0.44px, 86.36% 2.87px, 88.64% 0.79px, 90.91% 1.56px, 93.18% 2.91px, 95.45% 0.35px, 97.73% 3.05px, 100% 0.99px, calc(100% - 3.25px) 10%, calc(100% - 3.69px) 20%, calc(100% - 1.43px) 30%, calc(100% - 0.75px) 40%, calc(100% - 0.91px) 50%, calc(100% - 3.22px) 60%, calc(100% - 2.24px) 70%, calc(100% - 2.81px) 80%, calc(100% - 0.5px) 90%, calc(100% - 1.91px) 100%, 97.73% calc(100% - 3.69px), 95.45% calc(100% - 2.35px), 93.18% calc(100% - 3.35px), 90.91% calc(100% - 0.33px), 88.64% calc(100% - 3.1px), 86.36% calc(100% - 3.8px), 84.09% calc(100% - 1.08px), 81.82% calc(100% - 0.3px), 79.55% calc(100% - 2.72px), 77.27% calc(100% - 0.57px), 75% calc(100% - 1.39px), 72.73% calc(100% - 3.03px), 70.45% calc(100% - 2.64px), 68.18% calc(100% - 2.22px), 65.91% calc(100% - 2.67px), 63.64% calc(100% - 3.26px), 61.36% calc(100% - 2.97px), 59.09% calc(100% - 1.74px), 56.82% calc(100% - 0.24px), 54.55% calc(100% - 2.64px), 52.27% calc(100% - 2.05px), 50% calc(100% - 2.52px), 47.73% calc(100% - 0.16px), 45.45% calc(100% - 3.78px), 43.18% calc(100% - 0.21px), 40.91% calc(100% - 2.21px), 38.64% calc(100% - 0.45px), 36.36% calc(100% - 1.28px), 34.09% calc(100% - 1.92px), 31.82% calc(100% - 2.23px), 29.55% calc(100% - 0.57px), 27.27% calc(100% - 1.9px), 25% calc(100% - 3.16px), 22.73% calc(100% - 0.1px), 20.45% calc(100% - 3.07px), 18.18% calc(100% - 3.71px), 15.91% calc(100% - 1.64px), 13.64% calc(100% - 3.62px), 11.36% calc(100% - 1.24px), 9.09% calc(100% - 1.15px), 6.82% calc(100% - 2.22px), 4.55% calc(100% - 1.26px), 2.27% calc(100% - 0.47px), 0% calc(100% - 2.41px), 3.17px 90%, 1.49px 80%, 2.15px 70%, 2.27px 60%, 2.49px 50%, 1px 40%, 3.7px 30%, 1.71px 20%, 3.72px 10%);
  --torn-c: polygon(0% 0.63px, 4.17% 0.45px, 8.33% 0.94px, 12.5% 0.75px, 16.67% 1.16px, 20.83% 1.04px, 25% 1.07px, 29.17% 0.97px, 33.33% 0.74px, 37.5% 0.11px, 41.67% 1.95px, 45.83% 0.01px, 50% 1.84px, 54.17% 2.22px, 58.33% 2.89px, 62.5% 1.46px, 66.67% 2.09px, 70.83% 0.17px, 75% 2.77px, 79.17% 2.53px, 83.33% 2.26px, 87.5% 0.82px, 91.67% 1.72px, 95.83% 0.3px, 100% 0.85px, calc(100% - 0.26px) 16.67%, calc(100% - 0.22px) 33.33%, calc(100% - 1.84px) 50%, calc(100% - 0.76px) 66.67%, calc(100% - 1.04px) 83.33%, calc(100% - 0.47px) 100%, 95.83% calc(100% - 0.94px), 91.67% calc(100% - 1.88px), 87.5% calc(100% - 0.94px), 83.33% calc(100% - 2.64px), 79.17% calc(100% - 2.23px), 75% calc(100% - 1.86px), 70.83% calc(100% - 0.99px), 66.67% calc(100% - 2.49px), 62.5% calc(100% - 1.59px), 58.33% calc(100% - 2.45px), 54.17% calc(100% - 0.25px), 50% calc(100% - 0.25px), 45.83% calc(100% - 2.34px), 41.67% calc(100% - 0.87px), 37.5% calc(100% - 0.11px), 33.33% calc(100% - 2.24px), 29.17% calc(100% - 1.29px), 25% calc(100% - 0.62px), 20.83% calc(100% - 0.49px), 16.67% calc(100% - 1.82px), 12.5% calc(100% - 0.67px), 8.33% calc(100% - 0.75px), 4.17% calc(100% - 1.92px), 0% calc(100% - 1.77px), 0.34px 83.33%, 2.21px 66.67%, 1.65px 50%, 1.42px 33.33%, 1.36px 16.67%);
  --torn-w: polygon(0% 7.66px, 1.56% 5.71px, 3.13% 7.67px, 4.69% 8.23px, 6.25% 0.52px, 7.81% 7.48px, 9.38% 3.07px, 10.94% 3.66px, 12.5% 2.37px, 14.06% 7.29px, 15.63% 2.39px, 17.19% 1.95px, 18.75% 1.36px, 20.31% 14.26px, 21.88% 11.79px, 23.44% 4.32px, 25% 6.81px, 26.56% 6.47px, 28.13% 4.99px, 29.69% 1.72px, 31.25% 4.88px, 32.81% 7.9px, 34.38% 9.18px, 35.94% 0.01px, 37.5% 1.65px, 39.06% 1.14px, 40.63% 7.89px, 42.19% 3.52px, 43.75% 0.85px, 45.31% 5.08px, 46.88% 8.21px, 48.44% 8.67px, 50% 5.41px, 51.56% 5.47px, 53.13% 2.35px, 54.69% 5.67px, 56.25% 1.86px, 57.81% 3.2px, 59.38% 1.31px, 60.94% 5.53px, 62.5% 7.43px, 64.06% 5.49px, 65.63% 0.41px, 67.19% 2.46px, 68.75% 0.57px, 70.31% 5.49px, 71.88% 5.19px, 73.44% 5.63px, 75% 1.64px, 76.56% 7.69px, 78.13% 0.32px, 79.69% 4.49px, 81.25% 7.17px, 82.81% 6.55px, 84.38% 1.99px, 85.94% 8.63px, 87.5% 10.92px, 89.06% 4.39px, 90.63% 2.06px, 92.19% 7.65px, 93.75% 1.91px, 95.31% 2.97px, 96.88% 8.62px, 98.44% 7.26px, 100% 5.89px, calc(100% - 11.63px) 3.85%, calc(100% - 7.6px) 7.69%, calc(100% - 8.23px) 11.54%, calc(100% - 1.35px) 15.38%, calc(100% - 1.84px) 19.23%, calc(100% - 2.33px) 23.08%, calc(100% - 17.01px) 26.92%, calc(100% - 10.05px) 30.77%, calc(100% - 0.85px) 34.62%, calc(100% - 5.4px) 38.46%, calc(100% - 7.68px) 42.31%, calc(100% - 6.79px) 46.15%, calc(100% - 15.27px) 50%, calc(100% - 0.09px) 53.85%, calc(100% - 2.42px) 57.69%, calc(100% - 11.02px) 61.54%, calc(100% - 4.59px) 65.38%, calc(100% - 2.26px) 69.23%, calc(100% - 7.66px) 73.08%, calc(100% - 14.3px) 76.92%, calc(100% - 6.96px) 80.77%, calc(100% - 0.99px) 84.62%, calc(100% - 4.43px) 88.46%, calc(100% - 16.5px) 92.31%, calc(100% - 6.02px) 96.15%, calc(100% - 5.23px) 100%, 98.44% calc(100% - 2.59px), 96.88% calc(100% - 5.37px), 95.31% calc(100% - 3.11px), 93.75% calc(100% - 3.56px), 92.19% calc(100% - 4.31px), 90.63% calc(100% - 7.54px), 89.06% calc(100% - 1.75px), 87.5% calc(100% - 6.84px), 85.94% calc(100% - 5.81px), 84.38% calc(100% - 8.49px), 82.81% calc(100% - 1.39px), 81.25% calc(100% - 8.53px), 79.69% calc(100% - 1.21px), 78.13% calc(100% - 5.07px), 76.56% calc(100% - 3.77px), 75% calc(100% - 2.22px), 73.44% calc(100% - 4.56px), 71.88% calc(100% - 0.01px), 70.31% calc(100% - 3.31px), 68.75% calc(100% - 4.35px), 67.19% calc(100% - 3.73px), 65.63% calc(100% - 3.65px), 64.06% calc(100% - 5.56px), 62.5% calc(100% - 7.36px), 60.94% calc(100% - 0.3px), 59.38% calc(100% - 4.75px), 57.81% calc(100% - 4.77px), 56.25% calc(100% - 8.1px), 54.69% calc(100% - 1.25px), 53.13% calc(100% - 0.3px), 51.56% calc(100% - 0.55px), 50% calc(100% - 4.44px), 48.44% calc(100% - 2.04px), 46.88% calc(100% - 6.65px), 45.31% calc(100% - 8.58px), 43.75% calc(100% - 5.72px), 42.19% calc(100% - 2.57px), 40.63% calc(100% - 2.29px), 39.06% calc(100% - 0.89px), 37.5% calc(100% - 8.12px), 35.94% calc(100% - 3.24px), 34.38% calc(100% - 8.19px), 32.81% calc(100% - 9.06px), 31.25% calc(100% - 7.38px), 29.69% calc(100% - 1.19px), 28.13% calc(100% - 5.69px), 26.56% calc(100% - 0.63px), 25% calc(100% - 0.02px), 23.44% calc(100% - 1.4px), 21.88% calc(100% - 1.42px), 20.31% calc(100% - 8.53px), 18.75% calc(100% - 16.04px), 17.19% calc(100% - 5.83px), 15.63% calc(100% - 5.54px), 14.06% calc(100% - 8.15px), 12.5% calc(100% - 3.94px), 10.94% calc(100% - 2.56px), 9.38% calc(100% - 6.76px), 7.81% calc(100% - 5.19px), 6.25% calc(100% - 2.87px), 4.69% calc(100% - 2.15px), 3.13% calc(100% - 3.74px), 1.56% calc(100% - 3.98px), 0% calc(100% - 7.02px), 5.03px 96.15%, 3.35px 92.31%, 0.99px 88.46%, 2.82px 84.62%, 0.92px 80.77%, 1.54px 76.92%, 2.94px 73.08%, 5.86px 69.23%, 0.27px 65.38%, 6.24px 61.54%, 7.89px 57.69%, 2.89px 53.85%, 6.89px 50%, 7.6px 46.15%, 8.63px 42.31%, 4.12px 38.46%, 8.44px 34.62%, 7.01px 30.77%, 5.2px 26.92%, 6.53px 23.08%, 1.39px 19.23%, 12.59px 15.38%, 5.88px 11.54%, 1.3px 7.69%, 6.48px 3.85%);
  --torn-e: polygon(0% 13px, 1.56% 15.34px, 3.13% 18.12px, 4.69% 11.44px, 6.25% 3.37px, 7.81% 24.7px, 9.38% 3.54px, 10.94% 9.01px, 12.5% 12.16px, 14.06% 0.75px, 15.63% 5.04px, 17.19% 5.51px, 18.75% 8.79px, 20.31% 12.91px, 21.88% 7.65px, 23.44% 0.17px, 25% 11.09px, 26.56% 11.79px, 28.13% 10.31px, 29.69% 7.11px, 31.25% 3.89px, 32.81% 21.51px, 34.38% 6.66px, 35.94% 10.42px, 37.5% 9.82px, 39.06% 12.36px, 40.63% 1px, 42.19% 4.3px, 43.75% 0.72px, 45.31% 12.42px, 46.88% 11.74px, 48.44% 8.22px, 50% 0.96px, 51.56% 9.83px, 53.13% 9.28px, 54.69% 11.94px, 56.25% 12.29px, 57.81% 4.87px, 59.38% 19.46px, 60.94% 11.91px, 62.5% 9.25px, 64.06% 2.08px, 65.63% 2.16px, 67.19% 11.1px, 68.75% 4px, 70.31% 4.33px, 71.88% 6.6px, 73.44% 11.5px, 75% 0.88px, 76.56% 9.35px, 78.13% 5.89px, 79.69% 0.16px, 81.25% 5.94px, 82.81% 8.74px, 84.38% 1.62px, 85.94% 1.48px, 87.5% 6.41px, 89.06% 0.64px, 90.63% 10.7px, 92.19% 8.45px, 93.75% 1.92px, 95.31% 3.24px, 96.88% 7.63px, 98.44% 0.82px, 100% 9.36px, calc(100% - 7.33px) 3.85%, calc(100% - 3.25px) 7.69%, calc(100% - 5px) 11.54%, calc(100% - 12.37px) 15.38%, calc(100% - 12.77px) 19.23%, calc(100% - 11.8px) 23.08%, calc(100% - 12.68px) 26.92%, calc(100% - 6.44px) 30.77%, calc(100% - 3.04px) 34.62%, calc(100% - 12.14px) 38.46%, calc(100% - 1.25px) 42.31%, calc(100% - 5.12px) 46.15%, calc(100% - 6.5px) 50%, calc(100% - 8.38px) 53.85%, calc(100% - 2.08px) 57.69%, calc(100% - 8.65px) 61.54%, calc(100% - 7.28px) 65.38%, calc(100% - 2.01px) 69.23%, calc(100% - 10.25px) 73.08%, calc(100% - 3.86px) 76.92%, calc(100% - 8.07px) 80.77%, calc(100% - 10.9px) 84.62%, calc(100% - 9.13px) 88.46%, calc(100% - 2.81px) 92.31%, calc(100% - 1.56px) 96.15%, calc(100% - 5.33px) 100%, 98.44% calc(100% - 6px), 96.88% calc(100% - 2.95px), 95.31% calc(100% - 6.86px), 93.75% calc(100% - 10.46px), 92.19% calc(100% - 0.32px), 90.63% calc(100% - 0.55px), 89.06% calc(100% - 18.88px), 87.5% calc(100% - 2.44px), 85.94% calc(100% - 2.2px), 84.38% calc(100% - 12px), 82.81% calc(100% - 10.7px), 81.25% calc(100% - 10.87px), 79.69% calc(100% - 7.31px), 78.13% calc(100% - 9.39px), 76.56% calc(100% - 9.07px), 75% calc(100% - 5.33px), 73.44% calc(100% - 7.53px), 71.88% calc(100% - 5.54px), 70.31% calc(100% - 1.3px), 68.75% calc(100% - 2.89px), 67.19% calc(100% - 5.35px), 65.63% calc(100% - 4.95px), 64.06% calc(100% - 10.11px), 62.5% calc(100% - 10.86px), 60.94% calc(100% - 4.34px), 59.38% calc(100% - 4.08px), 57.81% calc(100% - 1.49px), 56.25% calc(100% - 6.46px), 54.69% calc(100% - 4.73px), 53.13% calc(100% - 8.12px), 51.56% calc(100% - 4.77px), 50% calc(100% - 11.52px), 48.44% calc(100% - 4.65px), 46.88% calc(100% - 0.86px), 45.31% calc(100% - 10.8px), 43.75% calc(100% - 1.04px), 42.19% calc(100% - 3.09px), 40.63% calc(100% - 10.86px), 39.06% calc(100% - 11.45px), 37.5% calc(100% - 5.8px), 35.94% calc(100% - 8.51px), 34.38% calc(100% - 0.12px), 32.81% calc(100% - 3.85px), 31.25% calc(100% - 5.62px), 29.69% calc(100% - 4.08px), 28.13% calc(100% - 12.29px), 26.56% calc(100% - 9.81px), 25% calc(100% - 19.69px), 23.44% calc(100% - 9.95px), 21.88% calc(100% - 8.69px), 20.31% calc(100% - 3.82px), 18.75% calc(100% - 7.3px), 17.19% calc(100% - 27.73px), 15.63% calc(100% - 10.18px), 14.06% calc(100% - 11.53px), 12.5% calc(100% - 10.38px), 10.94% calc(100% - 9.55px), 9.38% calc(100% - 12.29px), 7.81% calc(100% - 6.28px), 6.25% calc(100% - 12.48px), 4.69% calc(100% - 8.38px), 3.13% calc(100% - 6.2px), 1.56% calc(100% - 2.33px), 0% calc(100% - 10.76px), 9.51px 96.15%, 3.83px 92.31%, 0.06px 88.46%, 3.3px 84.62%, 29.48px 80.77%, 8.98px 76.92%, 1.2px 73.08%, 12.43px 69.23%, 8.75px 65.38%, 2.38px 61.54%, 10.71px 57.69%, 24.9px 53.85%, 12.58px 50%, 12.3px 46.15%, 5.83px 42.31%, 11.29px 38.46%, 7.35px 34.62%, 8.66px 30.77%, 9.08px 26.92%, 3.82px 23.08%, 2.13px 19.23%, 14.24px 15.38%, 6.14px 11.54%, 10.91px 7.69%, 10.76px 3.85%);
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .11 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 1. the ground ---------- */
/* the page is warm charcoal (--s0); the grain and the vignette sit behind the content, so they never sit on a word */
html { background: var(--s0); }
body { background: transparent; position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 110% 85% at 50% 38%, transparent 52%, rgb(0 0 0 / 0.5) 100%),
    var(--grain-light) 0 0 / 240px 240px,
    var(--s0);
}
/* the bar and the drawers are the same charcoal, a breath darker, with the grain showing through */
.sjs-nav { background: rgb(13 12 15 / 0.9); }

/* ---------- 2. the paper kit ---------- */
/* Every piece is two torn layers behind its content: the paper (::after) and, 3px larger, its white cut edge
   (::before). The shadow follows the tear. Paper carries dark ink only. --tear picks the tear, --rot the angle. */
.sjs-paper, .sjs-strip, .sjs-ptag, .sjs-pad-page {
  position: relative; isolation: isolate; color: var(--ink-d); --tear: var(--torn-a);
  filter: drop-shadow(1px 6px 8px rgb(0 0 0 / 0.42));
}
.sjs-paper::before, .sjs-strip::before, .sjs-ptag::before, .sjs-pad-page::before,
.sjs-paper::after, .sjs-strip::after, .sjs-ptag::after, .sjs-pad-page::after {
  content: ""; position: absolute; pointer-events: none; clip-path: var(--tear);
}
.sjs-paper::before, .sjs-strip::before, .sjs-ptag::before, .sjs-pad-page::before { inset: -3px; z-index: -2; background: var(--cut); }
.sjs-paper::after, .sjs-strip::after, .sjs-ptag::after, .sjs-pad-page::after {
  inset: 0; z-index: -1; background: var(--grain-dark) 0 0 / 180px 180px, var(--paper-fill, var(--paper));
}
.sjs-paper--b { --tear: var(--torn-b); }
.sjs-paper--cream { --paper-fill: var(--cream); }
.sjs-paper :where(h1, h2, h3, h4, strong, b) { color: var(--ink-d); }

/* a title strip: one torn line of display type, a little off square */
.sjs-strip {
  --tear: var(--torn-c); display: inline-block; padding: 0.1em 0.3em 0.02em; transform: rotate(var(--rot, -1.2deg));
  font-family: var(--font-display); letter-spacing: 0.02em; line-height: 1; text-transform: uppercase;
}
.sjs-strip--lit { color: var(--brick); }   /* the one lit word of a title */

/* tape: a translucent torn piece over a top edge (an element of its own: <span class="sjs-tape" aria-hidden="true">) */
.sjs-tape {
  position: absolute; z-index: 3; width: 72px; height: 22px; top: -11px; left: calc(50% - 36px); pointer-events: none;
  background: var(--grain-dark) 0 0 / 120px 120px, var(--tape); clip-path: var(--torn-c);
  transform: rotate(var(--tape-rot, -4deg));
}

/* a tag: a small strip of paper on a string; it lands on its beat (sjs-drop) */
.sjs-ptag {
  --tear: var(--torn-c); display: inline-block; padding: 7px 12px 5px; transform: rotate(var(--rot, -4deg));
  font: 400 22px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}

/* a stamp: double border, ink with holes in it, set at an angle; it slams in (sjs-slam) */
.sjs-seal {
  display: inline-block; position: relative; padding: 0.2em 0.5em 0.08em; transform: rotate(var(--rot, -8deg));
  font: 400 var(--seal-size, 34px)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--seal-ink, var(--ink-win)); background: rgb(240 229 203 / 0.93);
  border: 5px solid currentColor; box-shadow: inset 0 0 0 4px rgb(240 229 203 / 0.93), inset 0 0 0 6px currentColor;
  -webkit-mask: var(--grain-ink) 0 0 / 150px 150px; mask: var(--grain-ink) 0 0 / 150px 150px;
}
.sjs-seal--gold { --seal-ink: var(--ink-gold); } .sjs-seal--fail { --seal-ink: var(--ink-fail); }

/* the tear-off year pad (the journey's Today): rings, a page on top that tears away, the page underneath */
.sjs-pad { position: relative; display: inline-grid; width: 220px; padding-top: 16px; transform: rotate(var(--rot, -2deg)); }
.sjs-pad-rings { position: absolute; top: 4px; left: 18px; right: 18px; height: 16px; z-index: 4; display: flex; justify-content: space-between; pointer-events: none; }
.sjs-pad-rings span { width: 10px; height: 16px; background: linear-gradient(90deg, #3B3336, #6E6466 50%, #3B3336); }
.sjs-pad-page {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 168px; padding: 22px 16px 18px; --tear: var(--torn-b); --paper-fill: var(--cream);
}
.sjs-pad-page b { font: 400 64px/0.9 var(--font-display); letter-spacing: 0.02em; color: var(--ink-d); }
.sjs-pad-page > span { font: 600 13px/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-d2); }
.sjs-pad-page--lit b { color: var(--brick); }
.sjs-pad-page--top { z-index: 2; transform-origin: 50% 0; }

/* a picture window (Amendment D): one of the brand's own torn-paper pictures (public/assets/pics, from the showcase in
   SJS-MASTER-VIEWER), set in a rough tear with a white, fibrous rim and a shadow. <figure class="sjs-window"><div
   class="sjs-window-in"><img …></div></figure>. The picture settles in once (a slow punch-in, 1.12 to 1); nothing loops. */
.sjs-window { position: relative; isolation: isolate; margin: 0; transform: rotate(var(--rot, 0deg)); filter: drop-shadow(2px 10px 14px rgb(0 0 0 / 0.55)); }
.sjs-window::before { content: ""; position: absolute; inset: -9px; z-index: -1; pointer-events: none; background: var(--grain-dark) 0 0 / 180px 180px, var(--cut); clip-path: var(--torn-e); }
.sjs-window-in { position: relative; height: 100%; overflow: hidden; clip-path: var(--torn-w); background: var(--land); }
.sjs-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pic-at, 50% 50%); }
.sjs-window .sjs-tape { z-index: 3; }
@keyframes sjs-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes sjs-unfold { from { opacity: 0; transform: rotate(calc(var(--rot, 0deg) - 2deg)) scale(0.96) translateY(14px); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
.sjs-window--in { animation: sjs-unfold 0.9s var(--ease-out) backwards; }
.sjs-window--in img { animation: sjs-settle 2.4s var(--ease-out) backwards; }

/* a cut-out (Amendment D): one of the brand's collages lifted off its charcoal (public/assets/pics/*-cut.webp, made by the
   cut-out script: the background that touches the frame is cleared, the torn white rims keep the pieces whole). It floats
   on the page and throws its own shadow. --fade-r / --fade-b soften an edge the source picture cut off. */
.sjs-cutout { position: relative; margin: 0; transform: rotate(var(--rot, 0deg)); }
.sjs-cutout img { display: block; width: 100%; height: auto; filter: drop-shadow(3px 14px 16px rgb(0 0 0 / 0.6)); }
.sjs-cutout--fade-r img { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }
.sjs-cutout--fade-b img { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent); mask-image: linear-gradient(to bottom, #000 86%, transparent); }
.sjs-cutout--fade-rb img {
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent), linear-gradient(to bottom, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 86%, transparent), linear-gradient(to bottom, #000 86%, transparent); mask-composite: intersect;
}
/* a picture that keeps its charcoal (its dark areas would not cut cleanly): every edge fades into the page */
.sjs-pic-fade { position: relative; margin: 0; overflow: hidden; }
.sjs-pic-fade img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pic-at, 50% 50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.sjs-cutout--in { animation: sjs-unfold 0.9s var(--ease-out) backwards; }
.sjs-cutout--in img { animation: sjs-settle 2.4s var(--ease-out) backwards; }

/* a picture in the empty right of a page head (dashboard, account): wide screens only, behind nothing, never clicked */
.sjs-dash-head, .sjs-acct { position: relative; }
.sjs-head-pic { display: none; }
@media (min-width: 1100px) {
  .sjs-head-pic { display: block; position: absolute; z-index: 0; top: 28px; right: max(24px, calc(50% - var(--maxw) / 2)); width: min(34vw, 440px); --rot: 1.5deg; pointer-events: none; }
  .sjs-head-pic img { max-height: 420px; width: auto; max-width: 100%; margin-left: auto; }
  .sjs-dash-head > .sjs-wrap, .sjs-acct > .sjs-wrap { position: relative; z-index: 1; }
}

/* ---------- 3. motion: the brand's engine, never a bounce or a flicker ---------- */
@keyframes sjs-land { from { opacity: 0; transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 3deg)) scale(1.04); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes sjs-drop { from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--rot, 0deg) + 8deg)) scale(1.25); } 40% { opacity: 1; } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes sjs-slam { from { opacity: 0; transform: rotate(var(--rot, -8deg)) scale(2.3); } 45% { opacity: 1; } to { opacity: 1; transform: rotate(var(--rot, -8deg)) scale(1); } }
@keyframes sjs-ink { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sjs-tear { 0% { transform: rotate(var(--rot, -2deg)); opacity: 1; } 30% { transform: rotate(-9deg) translate(-4px, 6px); opacity: 1; } 100% { transform: rotate(-24deg) translate(-90px, 260px); opacity: 0; } }
@keyframes sjs-rays { from { opacity: 0.55; transform: scale(0.7); } to { opacity: 0; transform: scale(1.35); } }
/* the stamp's ink rays: a ring of short strokes that flies out once as it lands */
.sjs-seal-rays { position: absolute; inset: -18px; pointer-events: none; opacity: 0; border: 2px dashed currentColor; }

/* scroll reveals (sjs-core adds .sjs-is-in): words ink in, paper lands */
.sjs-js .sjs-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); }
.sjs-js .sjs-reveal.sjs-is-in { opacity: 1; transform: none; }
.sjs-js .sjs-reveal:is(.sjs-paper, .sjs-strip) { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 2.5deg)); transition-timing-function: var(--ease-out), var(--ease-back); }
.sjs-js .sjs-reveal:is(.sjs-paper, .sjs-strip).sjs-is-in { transform: rotate(var(--rot, 0deg)); }

/* page to page (Amendment D): the old page lifts away and the new one inks in, the bar stays put. Browsers without
   cross-document view transitions simply change page, as before; under reduced motion nothing moves. The opt-in
   (@view-transition) is in sjs.css, so the exam room has it too. */
.sjs-nav { view-transition-name: sjs-bar; }
::view-transition-old(root) { animation: sjs-vt-out 0.28s var(--ease-out) both; }
::view-transition-new(root) { animation: sjs-vt-in 0.42s var(--ease-out) both; }
::view-transition-old(sjs-bar), ::view-transition-new(sjs-bar) { animation: none; }
@keyframes sjs-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes sjs-vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- 4. drawings: the cut edge of paper on SVG shapes (the filter is SJS.paper's, in the page once) ---------- */
.sjs-paper-on .sjs-cut { filter: url(#sjs-cut); }
.sjs-paper-on .sjs-cut--lo { filter: url(#sjs-cut-lo); }
/* the slides beside every step (parts/components.css draws them in the calm inks): the same scenes as the journey, in
   cut paper. SJS.art puts a scene's shapes in g.sjs-art-shapes, so one filter edges them all and the words stay crisp */
.sjs-paper-on .sjs-slide-art .sjs-art-shapes { filter: url(#sjs-cut-lo); }
/* the slide panel itself: a sheet of dark card, torn, its white cut edge showing. The panel keeps its 1px border (now
   the cut edge's outer pixel) so nothing on the page moves; the tear eats 0 to 4px of the 3px of white, so the edge
   reads fibrous, never ruled. */
.sjs-slides-view {
  border-color: var(--cut); box-shadow: inset 0 0 0 2px var(--cut); clip-path: var(--torn-a);
  background-image: var(--grain-light), radial-gradient(120% 90% at 20% 0%, rgb(179 137 43 / 0.1) 0%, rgb(179 137 43 / 0) 55%);
  background-size: 240px 240px, auto;
}
.sjs-slide-art .sjs-ink { stroke: var(--gold-hi); stroke-width: 3.5; }
.sjs-slide-art .sjs-ink--dim { stroke: var(--stone-d); stroke-width: 3; }
.sjs-slide-art .sjs-ink--win { stroke: var(--mood-win); }
.sjs-slide-art .sjs-ink--fail { stroke: var(--mood-fail); }
.sjs-slide-art .sjs-fill { fill: var(--gold-hi); stroke: none; }
.sjs-slide-art .sjs-fill--dim { fill: var(--land); stroke: none; }
.sjs-slide-art .sjs-fill--win { fill: var(--mood-win); stroke: none; }

/* ---------- 5. retired: the terminal idioms (Amendment D; "grid is horrible") ---------- */
.sjs-bg-grid, .sjs-bg-scan, .sjs-bg-sweep, .sjs-bg-rings { display: none; }

/* ---------- the light shaft (SJS.paper fills [data-sjs-shaft] with a canvas: warm light, dust inside it only) ---------- */
[data-sjs-shaft] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
[data-sjs-shaft] canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-sjs-shaft] .sjs-shaft-beam { filter: blur(22px); }

@media (prefers-reduced-motion: reduce) {
  .sjs-js .sjs-reveal, .sjs-js .sjs-reveal:is(.sjs-paper, .sjs-strip) { opacity: 1; transform: rotate(var(--rot, 0deg)); transition: none; }
  .sjs-seal, .sjs-ptag, .sjs-pad-page, .sjs-window--in, .sjs-window--in img, .sjs-cutout--in, .sjs-cutout--in img { animation: none !important; }
  .sjs-seal-rays { display: none; }
}

/* ---------- 6. the step tag (the simple site, 7 Oct): one small paper tag, bottom right, with your step ----------
   Drawn by sjs-account.js once SJS.resume() answers, on every page but the home and the exam room. Paper with dark ink
   (never gold, never a primary). Tap: a dark card with Last time, Continue, Free lessons (Step 1), Ask a question.
   Under the bar (200) and the drawer (190). Nothing animates. */
.sjs-steptag { position: fixed; right: 16px; bottom: 16px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100vw - 32px); }
.sjs-steptag-b { --rot: -3deg; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; min-width: 44px; padding: 8px 14px 7px; border: 0; background: none; color: var(--ink-d); cursor: pointer; text-align: left; font: 400 20px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sjs-steptag-b:hover, .sjs-steptag-b:focus-visible { color: var(--brick); }
.sjs-steptag-n { font: 600 12px/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-d); }
.sjs-steptag-p { order: -1; width: min(300px, calc(100vw - 32px)); padding: 18px 20px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--grain-dark) 0 0 / 180px 180px, var(--s1); border: 1px solid var(--line2); box-shadow: 0 18px 40px rgb(0 0 0 / 0.55); }
.sjs-steptag-p[hidden] { display: none; }
.sjs-steptag-last { margin: 0 0 10px; font: 400 var(--fs-meta)/1.4 var(--font-body); color: var(--t3); overflow-wrap: anywhere; }
.sjs-steptag-last b { color: var(--t1); font-weight: 600; }
.sjs-steptag-go { margin-bottom: 6px; }
.sjs-steptag-p .sjs-btn--text { padding: 8px 0; }