*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#eae7de}
body{font-family:"Georgia",Georgia, 'Times New Roman', Times, serif,Arial,sans-serif;color:#111;background:#eae7de;line-height:1.6;font-size:17px}
a{color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:20}

/* header */
header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:28px 4vw}
header a{text-decoration:none}
.title{font-size:1.15rem;letter-spacing:.02em}
nav{display:flex;gap:2.2rem;align-items:center}
nav a{font-size:.95rem}
nav a.on{border-bottom:1px solid currentColor}
body.home header{color:#111}
body:not(.home) header{position:static;color:#111}
.cart{margin-left:1rem}

/* pages */

/* home */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#111;padding:7rem 4vw 7vh;
  background:#eae7de}
.hero-photo{width:min(72vw,420px);max-height:52vh;height:auto;object-fit:cover;display:block;align-self:center;margin:0 0 1.4rem}
.hero h2{font-size:clamp(1.2rem,3.5vw,2.5rem);font-weight:400;margin:0 0 .3rem;letter-spacing:-.01em}
.hero small{font-size:.8rem;color:#6b5f3f;display:block;margin-bottom:1.5rem}
.hero p{margin:0}
.hero p a{text-decoration:underline;text-underline-offset:4px}

/* inner pages */
.inner{max-width:1100px;margin:0 auto;padding:4vh 4vw 10vh}
.inner h1{font-weight:400;font-size:2.2rem;margin:0 0 2rem}
#about h1{text-align:center}
.about{display:grid;grid-template-columns:minmax(240px,440px) 1fr;gap:3rem;align-items:start;text-align:left}
.about .photo{width:100%;max-width:440px;margin:0;text-align:left}
.about .bios{max-width:none;width:100%}
.about img,.ph{width:100%;margin:0 auto;aspect-ratio:4/5;object-fit:cover;background:linear-gradient(135deg,#eae7de,#eae7de);display:block}
.about small{display:block;margin-top:.6rem;color:#777;font-size:.8rem}
.about h4{margin:1.6rem 0 .3rem;font-weight:700;font-size:1rem}
.about p{margin:0 0 1rem}

.books{display:flex;flex-direction:column;gap:4rem}
.book{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:2.5rem;align-items:start}
.book .cover{width:100%}
.book .ph,.book img{width:100%;aspect-ratio:2/3;object-fit:cover;background:linear-gradient(135deg,#ddd6c4,#cfc6b0);display:block}
.book-info h2{font-weight:400;font-size:1.7rem;margin:0 0 .4rem}
.book-info .meta{margin:0 0 1rem;color:#6b5f3f;font-size:.95rem}
.book-info p{margin:0 0 1rem}

.narrow{max-width:680px}
.narrow ul{padding-left:1.2rem}
.narrow li{margin-bottom:.7rem}
form{margin-top:3rem;display:grid;gap:1.1rem}
label{font-size:.85rem;display:grid;gap:.35rem}
input,textarea{font:inherit;background:#eae7de;padding:.7rem;border:1px solid #c4b283;border-radius:0;width:100%}
textarea{min-height:140px}
button{font:inherit;justify-self:start;background:#111;color:#fff;border:0;padding:.85rem 2.2rem;cursor:pointer;letter-spacing:.05em}
button:hover{background:#444}

.faq h4{font-size:1.1rem;margin:2rem 0 .4rem;font-weight:700}
.faq p{margin:0}

footer{padding:2rem 4vw;font-size:.8rem;color:#777;border-top:1px solid #d6c496}
body.home footer{display:none}

@media(max-width:700px){
  header{flex-direction:column;align-items:flex-start;gap:.8rem}
  nav{gap:1.2rem}
  .about{grid-template-columns:1fr}
  .about .photo{max-width:440px;margin:0 auto}
  .book{grid-template-columns:1fr}
  .book .cover{max-width:280px}
}