/* Shared header and footer for every page. Namespaced (yws-) so page styles can't clash. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');
.yws-wrap{width:min(1320px,calc(100% - 48px));margin:0 auto}
.yws-header{position:relative;z-index:5;border-bottom:1px solid #2c2c2c;background:#101010}
.yws-header .yws-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px 0}
.yws-header .yws-side{display:flex;gap:24px;font:400 11px/1 'DM Mono',monospace;letter-spacing:.02em}
.yws-header .yws-side.right{justify-content:flex-end}
.yws-header .yws-side a{color:#a1a1a1;text-decoration:none;transition:color .15s}
.yws-header .yws-side a:hover,.yws-header .yws-side a[aria-current]{color:#f2f1ed}
.yws-header .yws-brand{display:flex;align-items:center;gap:11px;font:700 17px/1 'DM Sans',sans-serif;color:#f2f1ed;text-decoration:none;white-space:nowrap}
.yws-header .yws-brand img{width:34px;height:34px;display:block}
.yws-footer{display:block;margin-top:84px;border-top:1px solid #2c2c2c;overflow:hidden}
.yf-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:28px 0 0;font:400 11px/1.6 'DM Mono',monospace;color:#a1a1a1}
.yws-footer .yws-brand{display:flex;align-items:center;gap:9px;justify-self:center;font:700 14px 'DM Sans',sans-serif;color:#f2f1ed;text-decoration:none}
.yws-footer .yws-brand img{width:28px;height:28px;display:block}
.yws-footer .yws-links{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.yws-footer a{color:#a1a1a1;text-decoration:none}.yws-footer a:hover{color:#f2f1ed}
.yf-sound{padding:0;border:0;background:none;color:#a1a1a1;font:inherit;cursor:pointer}.yf-sound:hover{color:#f2f1ed}
.yws-footer .yf-mark{display:block;margin-top:44px;height:.74em;overflow:hidden;font:700 clamp(28px,7.9vw,114px)/.92 'DM Sans',sans-serif;letter-spacing:-.04em;white-space:nowrap;text-align:center;color:#efefef;text-transform:uppercase}
.yws-footer .yf-mark:hover{color:#fff}
@media(max-width:800px){.yf-row{grid-template-columns:1fr;justify-items:center;text-align:center}.yws-footer .yws-links{justify-content:center}.yws-footer .yf-mark{font-size:7.6vw;margin-top:30px}}
@media(max-width:800px){
  .yws-wrap{width:calc(100% - 32px)}
  .yws-header .yws-wrap{grid-template-columns:1fr}
  .yws-header .yws-side{display:none}
  .yws-header .yws-brand{justify-self:center}
}
/* Screen-edge fades in the page colour, softly feathered; header and footer stay above them */
html::before,html::after{content:'';position:fixed;left:0;right:0;z-index:60;pointer-events:none}
html::before{top:0;height:clamp(90px,15vh,170px);background:linear-gradient(180deg,#101010 0%,rgba(16,16,16,.9) 10%,rgba(16,16,16,.74) 22%,rgba(16,16,16,.55) 36%,rgba(16,16,16,.36) 51%,rgba(16,16,16,.19) 67%,rgba(16,16,16,.07) 83%,rgba(16,16,16,0) 100%)}
html::after{bottom:0;height:clamp(130px,21vh,230px);background:linear-gradient(0deg,#101010 0%,rgba(16,16,16,.9) 10%,rgba(16,16,16,.74) 22%,rgba(16,16,16,.55) 36%,rgba(16,16,16,.36) 51%,rgba(16,16,16,.19) 67%,rgba(16,16,16,.07) 83%,rgba(16,16,16,0) 100%)}
/* Screen-edge treatments (bg.js picks one per page with <html data-edge>) */
.edge-ruler{position:fixed;z-index:80;pointer-events:none;display:block}
.edge-ruler.top{top:0;left:0}.edge-ruler.left{top:0;left:0}
.edge-ruler.corner{top:0;left:0;background:#141414;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);z-index:81}
html[data-edge=ruler] body{padding-left:22px}html[data-edge=ruler] .yws-header{margin-top:22px}
@media(max-width:700px){html[data-edge=ruler] body{padding-left:16px}html[data-edge=ruler] .yws-header{margin-top:16px}}
.edge-crop{position:fixed;z-index:80;width:22px;height:22px;pointer-events:none;border:0 solid rgba(255,255,255,.55)}
.edge-crop.tl{top:12px;left:12px;border-top-width:1px;border-left-width:1px}
.edge-crop.tr{top:12px;right:12px;border-top-width:1px;border-right-width:1px}
.edge-crop.bl{bottom:12px;left:12px;border-bottom-width:1px;border-left-width:1px}
.edge-crop.br{bottom:12px;right:12px;border-bottom-width:1px;border-right-width:1px}
.edge-frame,.edge-dims{position:fixed;z-index:80;bottom:18px;pointer-events:none;padding:5px 9px;font:500 11px/1 'DM Mono',monospace;letter-spacing:.02em;color:#fff;background:rgba(20,20,20,.85);border:1px solid rgba(255,255,255,.18)}
.edge-frame{left:42px}.edge-dims{right:42px;color:#a1a1a1}
@media(max-width:700px){.edge-dims{display:none}.edge-frame{left:38px;font-size:10px}}
.edge-band{position:fixed;left:0;z-index:60;pointer-events:none;display:block}
.edge-band.top{top:0}.edge-band.bottom{bottom:0}
/* Header and footer sit above the edge fades so the logo and links stay crisp */
.yws-header,.yws-footer{position:relative;z-index:70}
/* Black self-healing cutting mat: fine 24px grid, major line every 5 cells, faint matte grain */
html body{background-color:#101010;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);background-size:160px 160px,120px 120px,120px 120px,24px 24px,24px 24px;background-position:0 0,-1px -1px,-1px -1px,-1px -1px,-1px -1px}
/* Parallax: bg.js moves this fixed layer slower than the page */
.yws-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#101010;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);background-size:160px 160px,120px 120px,120px 120px,24px 24px,24px 24px;background-repeat:repeat}
html.pbg body{background-image:none}

.yws-header{background:transparent}