*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--f-sans);font-size:var(--t-body);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--field) center/cover no-repeat;opacity:0.95;pointer-events:none}
body::after{content:"";position:fixed;inset:-20%;z-index:-1;background:var(--field) center/200% no-repeat;transform:rotate(180deg);opacity:0.3;mix-blend-mode:multiply;pointer-events:none}
img{display:block;max-width:100%}
p{margin:0;max-width:66ch;text-wrap:pretty}
h1,h2,h3{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--coral)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;mix-blend-mode:multiply;opacity:0.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:90;background:var(--ink);color:var(--bone-hi);font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:0.14em;text-transform:uppercase;padding:14px 18px}
.skip:focus{top:12px}

.shell{position:relative;width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)}