/* ============================================================
   The weathered page: the Frequency cover's ground under a page.
   One sheet of cracked plaster that scrolls with the copy, very
   faint on the sand, fuller under the surface; gold flecks in the
   large empty places, never on the circuit (laid by paper.js); the
   ghosted numerals worn like old gilding; the portrait in its
   painted frame; the water rising out of the ground at the foot.
   Michael's rulings, October 4 and 5, 2026, made on the Solar
   Sanctum page. A page takes this by tools/lay-paper.py, which
   links this file after the page's own styles. html[data-paper="0"]
   (?paper=0) shows the page without it. Page titles are never worn.
   ============================================================ */
html{--pz-s:.14;--pz-l:.09;--pz-n:.26}
body{position:relative}
.paper{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:repeat;background-position:50% 0;background-size:900px auto;transition:opacity .9s var(--ease-out)}
.paper.s{background-image:url('/assets/imagery/paper/plaster-shade-m.webp');opacity:0}   /* phones: the sheets at 1200px, about 265 KB together */
.paper.l{background-image:url('/assets/imagery/paper/plaster-light-m.webp');opacity:var(--pz-n)}
body.day .paper.s{opacity:var(--pz-s)}
body.day .paper.l{opacity:var(--pz-l)}
html[data-paper="0"] .paper{display:none}
/* the numerals: the gilt broken where the plaster cracked. The box is padded and pulled back by the
   same amount so the mask never trims the figure. */
html[data-paper="on"] .gn{padding:.24em .12em;margin:-.24em -.12em;opacity:.46;
  -webkit-mask-image:url('/assets/imagery/paper/wear-mid.webp');mask-image:url('/assets/imagery/paper/wear-mid.webp');
  -webkit-mask-size:640px;mask-size:640px}
/* the foot: the water rises out of the page's ground instead of beginning at a line. A long, slow rise
   (Michael, October 4, late: really blend the page and the underwater image), and on a desktop the two
   side edges blended into the ground as well. */
html[data-paper="on"] .uw img,html[data-paper="on"] .uw .veil{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) 10%,rgba(0,0,0,.2) 26%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.82) 62%,#000 78%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) 10%,rgba(0,0,0,.2) 26%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.82) 62%,#000 78%)}
html[data-paper="on"] .uw .veil{background:linear-gradient(180deg,rgba(8,19,16,.3) 0%,rgba(8,19,16,.28) 34%,rgba(8,19,16,.72) 100%)}
@media (min-width:601px){
  .paper{background-size:1500px auto}
  .paper.s{background-image:url('/assets/imagery/paper/plaster-shade.webp')}
  .paper.l{background-image:url('/assets/imagery/paper/plaster-light.webp')}
  html[data-paper="on"] .uw img,html[data-paper="on"] .uw .veil{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) 10%,rgba(0,0,0,.2) 26%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.82) 62%,#000 78%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,rgba(0,0,0,.8) 15%,#000 24%,#000 76%,rgba(0,0,0,.8) 85%,rgba(0,0,0,.35) 93%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) 10%,rgba(0,0,0,.2) 26%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.82) 62%,#000 78%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,rgba(0,0,0,.8) 15%,#000 24%,#000 76%,rgba(0,0,0,.8) 85%,rgba(0,0,0,.35) 93%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  html[data-paper="on"] .gn{opacity:.42;-webkit-mask-size:1100px;mask-size:1100px}
  html[data-paper="on"] .uw .veil{background:linear-gradient(180deg,rgba(8,19,16,.3) 0%,rgba(8,19,16,.26) 36%,rgba(8,19,16,.72) 100%)}
}
/* ============================================================
   The portrait's frame. html[data-frame]:
     paintf   paint and gold over the photograph's edges: Michael's
              choice (October 5: F 100%), the first painted picture at
              about three quarters of its paint, holding its square.
              His face, hands and chest are his own photograph; on the
              phone the picture runs off the left of the screen
     plate    the plate's own frame: a gold hairline, its four corners,
              a second line inside (?frame=plate)
     0        the portrait as it stood (?frame=0)
   ============================================================ */
.kf,.kart{display:none}
html[data-frame="plate"] .kwrap{margin-left:26px;margin-right:72px}
html[data-frame="plate"] .kf{display:block;position:absolute;inset:-12px;border:1px solid var(--gold-a32);border-radius:2px;pointer-events:none}
html[data-frame="plate"] .kf i{position:absolute;inset:5px;border:1px solid var(--line-soft);border-radius:1px}
.kf b{position:absolute;width:10px;height:10px}
.kf b.tl{left:-1px;top:-1px;border-left:1px solid var(--gold-300);border-top:1px solid var(--gold-300)}
.kf b.tr{right:-1px;top:-1px;border-right:1px solid var(--gold-300);border-top:1px solid var(--gold-300)}
.kf b.bl{left:-1px;bottom:-1px;border-left:1px solid var(--gold-300);border-bottom:1px solid var(--gold-300)}
.kf b.br{right:-1px;bottom:-1px;border-right:1px solid var(--gold-300);border-bottom:1px solid var(--gold-300)}
html[data-frame^="paint"] .kimg .kclip,html[data-frame^="paint"] .kimg .veil{display:none}
html[data-frame^="paint"] .kwrap{margin:70px 36px 0 0}
html[data-frame^="paint"] .kimg{aspect-ratio:7/10;margin-left:-44px;width:100%}
html[data-frame^="paint"] .kart{display:block;position:absolute;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 93%);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 93%)}   /* the paint stops short of the rail */
html[data-frame^="paint"] .knm{left:66px;bottom:64px}
html[data-frame^="paint"] .ktext{margin-top:92px}
/* where the painted picture sits over the photograph's box: measured by tools/portrait-paint.py (paper-src/portrait-paint.json) */
html[data-frame="paintf"] .kart{background-image:url('/assets/imagery/founder/founder-headshot-paint-f.webp');left:-22.15%;top:-15.66%;width:144.3%;height:134.68%}
@media (min-width:601px){
  html[data-frame="plate"] .kwrap{margin-left:0;margin-right:0}
  html[data-frame="plate"] .knm{left:26px}
  html[data-frame^="paint"] .kwrap{margin:60px 0 0;height:560px}
  html[data-frame^="paint"] .kimg{margin-left:0;bottom:auto;height:543px;width:380px;aspect-ratio:auto}
  html[data-frame^="paint"] .kart{-webkit-mask-image:none;mask-image:none}
  html[data-frame^="paint"] .knm{left:44px;bottom:104px}
  html[data-frame^="paint"] .ktext{margin-top:0}
}
/* ============================================================
   Return to your truth waits dim and lights with a glow when the
   line reaches its last dot (paper.js). The dim state is in the
   colour, never in opacity: the R's leg reaches past the span's
   box, and an opacity layer clipped it. The padding and negative
   margins hold the leg. The Solar Sanctum's own rule, for every
   page that carries the line.
   ============================================================ */
html[data-paper="on"] .lm-script.pret{display:inline-block;padding:0 .3em .3em .5em;margin:0 -.3em -.3em -.5em;color:rgba(232,205,139,.3);text-shadow:0 0 16px rgba(232,205,139,0),0 0 44px rgba(232,205,139,0);transition:color 1.6s var(--ease-out) .12s,text-shadow 1.6s var(--ease-out) .12s}
html[data-paper="on"] body.day .lm-script.pret{color:rgba(138,106,47,.34)}
html[data-paper="on"] .lm-script.pret.lit{color:var(--gold-200);text-shadow:0 0 16px rgba(232,205,139,.55),0 0 44px rgba(232,205,139,.28)}
html[data-paper="on"] body.day .lm-script.pret.lit{text-shadow:0 0 16px rgba(168,134,63,.4),0 0 44px rgba(168,134,63,.22)}