/* All surfaces belong to the same engraving, including controls and the works' pages. */
:root{--paper:#f2ead9;--ink:#211d17;--copper:#a04f28;--hatch:url('./art/hatch.svg');--paper-grain:url('./art/paper.svg')}
.engraved-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:58px;padding:15px 30px;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:transform .3s}
.engraved-button:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper) var(--paper-grain);border:1px solid currentColor;clip-path:polygon(1% 3%,98% 0,100% 96%,2% 100%,0 43%);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px currentColor}
.engraved-button:after{content:'';position:absolute;inset:5px -5px -5px 5px;z-index:-2;background:var(--hatch);border:1px solid currentColor;clip-path:polygon(1% 3%,98% 0,100% 96%,2% 100%,0 43%)}
.engraved-button:hover{transform:translate(2px,-2px) rotate(-.5deg)}
.engraved-button:active{transform:translate(3px,3px)}
.engraved-button svg{width:23px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
.engraved-button.dark:before{background-color:var(--ink);background-image:var(--hatch);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px #bfb49c;border-color:var(--ink)}
.engraved-button.dark{color:var(--paper)}
.engraved-button.dark:after{border-color:var(--ink)}
.engraved-button:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
/* Shared engraved housing on existing work, process and type pages. The film images retain their own world. */
body.engraved-page{--noir:#1a1712;--ivoire:#f2ead9;--voile:#c4b99e;--garde:#b6a88d;--filet:#6e624b;background-color:var(--noir);background-image:var(--paper-grain),linear-gradient(120deg,#38302533,transparent),var(--hatch);background-attachment:scroll;color:var(--ivoire)}
body.engraved-page:before{content:'';position:fixed;inset:10px;border:1px solid #b6a88d60;outline:1px solid #b6a88d30;outline-offset:4px;pointer-events:none;z-index:6}
.engraved-page .haut{background:var(--paper-grain),var(--hatch),#211d17;border-bottom:3px double #9a8c6e;padding:25px 4vw}
.engraved-page h1,.engraved-page h2{font-weight:300;text-shadow:1px 1px #17130f,2px 2px #b9aa8838}
.engraved-page .lecteur{border:8px solid #b8a98a;outline:1px solid #f2ead97a;box-shadow:0 15px 40px #0005}
.engraved-page .jouer{border-radius:0!important;clip-path:polygon(4% 0,98% 3%,100% 97%,0 100%);border:3px double #f2ead9!important;background:#211d17e8!important}
.engraved-page .images img,.engraved-page .two figure,.engraved-page .chain figure{border:5px solid #b9ab8e;outline:1px solid #e2d6ba55}
.engraved-page blockquote{border-left-color:#b47146!important;background:var(--paper-grain),#f2ead908}
.engraved-page .bouton,.engraved-page a.process-link{border-radius:0;background:var(--paper-grain),#e4d7b7!important;color:#211d17!important;border:3px double #51432e!important;box-shadow:4px 4px 0 #a5947750;backdrop-filter:none}
.engraved-page footer{background:var(--hatch),#15130f;border-top:3px double #b6a88d50}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.engraved-page{background-image:var(--paper-grain),url('./art/hatch-night.svg')}
.engraved-page .haut,.engraved-page .bar,.engraved-page .rail,.engraved-page .libhead{background-image:var(--paper-grain),url('./art/hatch-night.svg')}
.engraved-page .lecteur{border:6px double #b8a98a;outline-offset:4px}
body.engraved-page.inv{background-color:var(--paper);color:var(--ink);background-image:var(--paper-grain),var(--hatch)}
.engraved-page.inv .bar,.engraved-page.inv .rail,.engraved-page.inv .libhead{background-color:var(--paper);background-image:var(--paper-grain),var(--hatch)}
@media(max-width:700px){
 .engraved-page .bar{padding:14px;gap:12px}
 .engraved-page .slots{width:100%;min-width:0}
 .engraved-page .slot{min-width:0;flex:1;max-width:none;padding:6px}
 .engraved-page .slot .lbl{min-width:0;font-size:10px}
 .engraved-page .app{display:block}
 .engraved-page .rail{width:100%;height:240px;position:relative;top:0;border-bottom:3px double #b6a88d50}
 .engraved-page .main{width:100%;min-width:0}
 .engraved-page .stagewrap{overflow-x:auto}
 .engraved-page .knobs{margin-left:0;gap:12px}
}