:root{color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#a4a3a1 url('assets/grain.svg');color:#111;font-family:'Courier New',monospace}a{color:inherit;text-underline-offset:4px}a:focus-visible{outline:3px solid #111;outline-offset:5px}.masthead{text-align:center;max-width:1280px;margin:auto;padding:20px 22px 26px}.masthead h1,.wordmark{display:block;font:400 clamp(36px,7.6vw,102px)/1.1 Georgia,serif;letter-spacing:.075em;margin:0;text-shadow:-1px -1px 1px #deddda,2px 2px 1px #777;text-decoration:none;white-space:nowrap}.masthead p{font-size:clamp(14px,2.5vw,32px);letter-spacing:.045em;line-height:1.4;margin:14px 0 0;text-shadow:1px 1px #d4d3d0}main{max-width:1280px;margin:auto}.collage{position:relative;aspect-ratio:1280/1490;margin:0 18px}.photo{display:block;position:absolute;height:auto;border:2px solid #171717;box-shadow:0 0 2px #333}.lennon{left:0;top:0;width:46%;z-index:1}.zappa{right:.5%;top:.1%;width:42.3%;z-index:1}.garcia{left:36.5%;top:21.8%;width:27.1%;z-index:4}.ali{left:0;top:31.6%;width:54.1%;z-index:1}.hitchcock{left:42.3%;top:40%;width:23.2%;z-index:5}.stones{right:0;top:28.7%;width:34.5%;z-index:2}.driver{left:-.3%;top:73.2%;width:46.1%;z-index:1}.guitarist{right:.5%;top:73.1%;width:51.2%;z-index:1}.welcome{text-align:center;max-width:1130px;margin:60px auto 0;padding:0 24px;font-size:clamp(16px,1.7vw,22px);line-height:1.45;letter-spacing:.025em}.welcome p{margin:0 0 22px}.contact{font-size:clamp(16px,1.6vw,20px);line-height:1.7;overflow-wrap:anywhere}.contact a{font-weight:bold}footer{text-align:center;padding:8px 22px 56px}.bio-link,.biography h1{font:400 clamp(32px,4.6vw,60px) Georgia,serif;letter-spacing:.17em;text-decoration:none}.biography{max-width:800px;padding:30px 28px 60px;text-align:center;line-height:1.7}.biography h1{margin:0 0 40px}.bio-copy{text-align:left;font-size:18px;line-height:1.8}.bio-copy p{margin:0 0 1.5em}.biography .contact{margin-top:70px}.home-link{font-size:18px}.skip{position:absolute;top:8px;left:8px;padding:12px;background:#fff;z-index:10;transform:translateY(-160%)}.skip:focus{transform:translateY(0)}@media(max-width:640px){.masthead{padding:24px 14px}.masthead h1,.wordmark{font-size:clamp(27px,8.1vw,52px);letter-spacing:.035em}.masthead p{max-width:340px;margin:12px auto 0;font-size:16px}.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px;aspect-ratio:auto;margin:0 14px;align-items:start}.photo{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;z-index:auto}.lennon,.zappa,.ali,.driver,.guitarist{grid-column:1/-1}.garcia{grid-column:1/-1;width:70%;justify-self:center}.hitchcock{grid-column:1;grid-row:5;align-self:center}.stones{grid-column:2;grid-row:5}.welcome{margin-top:30px;padding:0 20px;font-size:16px;line-height:1.6}footer{padding-bottom:40px}.biography{padding-top:12px}}

/* Refined typography and matching bottom photographs. */
.masthead{padding-left:18px;padding-right:18px}
.masthead h1,.wordmark{text-shadow:-2px -2px 2px #fff,2px 2px 1px #777}
.masthead .tagline{display:flex;justify-content:space-between;gap:.25em;font-weight:700;text-shadow:2px 2px 2px #fff;letter-spacing:0}
.welcome a[href^="mailto:"]{font-weight:700;color:#d3bd55;text-decoration:none}
.bio-link,.biography h1{text-shadow:-2px -2px 2px #fff,2px 2px 1px #777}
.driver,.guitarist{top:71.4%;width:49%;aspect-ratio:1.52;object-fit:cover}
.driver{left:0}.guitarist{right:0}
@media(max-width:640px){
 .masthead{padding-left:14px;padding-right:14px}
 .masthead .tagline{max-width:none;flex-wrap:wrap;gap:.25em .5em;font-size:clamp(12px,3.5vw,20px)}
 .driver,.guitarist{left:auto;right:auto;top:auto;width:100%;height:auto;aspect-ratio:1.52}
}

/* Normal word spaces; remaining width is distributed between letters. */
.masthead .tagline{width:70%;margin-left:auto;margin-right:auto;font-size:min(2.5vw,calc((100vw - 36px)*.0259259),32px);gap:.6em;justify-content:normal}
.tagline>span{display:flex;justify-content:space-between;flex-shrink:0}
@media(max-width:640px){
 .masthead .tagline{display:block;font-size:clamp(12px,3.5vw,20px);letter-spacing:.07em;word-spacing:normal}
 .tagline>span,.tagline>span>span{display:inline}
}
