@font-face{font-family:Instrument;src:url('assets/fonts/instrument-serif.ttf') format('truetype');font-display:swap}
@font-face{font-family:Instrument;src:url('assets/fonts/instrument-serif-italic.ttf') format('truetype');font-style:italic;font-display:swap}
@font-face{font-family:DM;src:url('assets/fonts/dm-sans.ttf') format('truetype');font-weight:100 1000;font-display:swap}
:root{--paper:#f8f4ea;--ink:#203942;--rust:#983d25;--rule:#c4bdaf;--muted:#4c5858;--gold:#efd29c;--serif:Instrument,Georgia,serif;--sans:DM,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper) url('assets/art/grain.png');font:400 17px/1.55 var(--sans)}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3,.brand{font-family:var(--serif);font-weight:400}
h2{font-size:clamp(49px,5.4vw,84px);line-height:1.03;letter-spacing:-.035em}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation}
a:hover{text-decoration:underline;text-underline-offset:5px}
:focus-visible{outline:3px solid #993d20;outline-offset:4px}
.guide :focus-visible,footer :focus-visible{outline-color:#f4cb75}
[hidden]{display:none!important}
.wrap{width:min(1280px,88%);margin-inline:auto}
.skip{position:absolute;z-index:10;top:8px;left:8px;padding:12px 18px;color:white;background:var(--ink);transform:translateY(-150%)}
.skip:focus{transform:none}
.mast{border-bottom:1px solid var(--rule)}
.mast-inner{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:31px;line-height:1.04;min-height:48px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand small,.section-kicker,.pretitle,.movement span,.plate figcaption,.meta{display:block;font:650 11px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.brand small{font-size:9px;margin:4px 0 0 1px;letter-spacing:.18em}
nav,.actions{display:flex;align-items:center;gap:30px}
nav a,.plain-link,.menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:46px;font:600 14px/1.3 var(--sans)}
.nav-buy{border:1px solid var(--ink);padding:0 18px}
.menu-toggle{border:1px solid var(--ink);padding:0 14px;background:transparent;color:var(--ink)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;padding-block:clamp(36px,4.1vw,66px) clamp(42px,5vw,78px)}
.pretitle{display:flex;align-items:center;gap:12px;color:var(--rust);font-size:clamp(11px,.94vw,14px);letter-spacing:.105em}
.pretitle::before,.section-kicker i{content:"";display:inline-block;width:25px;height:2px;background:currentColor;flex:none}
.question{display:block;font-size:clamp(66px,7.7vw,115px);line-height:.93;letter-spacing:-.042em;margin:22px 0 23px}
.question em{display:block;color:var(--rust)}
.byline{color:var(--muted);font-size:14px;line-height:1.6}
.byline strong{color:var(--ink);font-weight:650;font-size:16px}
.intro{max-width:43ch;margin:23px 0 26px;font-size:clamp(16px,1.22vw,19px);line-height:1.65}
.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:22px;padding:10px 22px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600}
.button:hover,.nav-buy:hover{background:#324f59;color:#fff;text-decoration:none}
.plain-link{border-bottom:1px solid var(--rust);color:var(--rust)}
.plate{min-width:0}
.print{background:#e3bc78 url('assets/art/broadside.svg') center/cover;isolation:isolate;position:relative;display:grid;place-items:center;aspect-ratio:1.12;overflow:hidden}
.print::after{content:"";position:absolute;inset:0;background:url('assets/art/grain.png');pointer-events:none;opacity:.8}
.book{width:42%;position:relative;transform:rotate(-7deg);box-shadow:9px 12px 14px #171c2280, 22px 26px 27px #17232f59}
.book::before{content:"";position:absolute;inset:2px -5px -3px 5px;background:repeating-linear-gradient(90deg,#cfc4b4 0 1px,#f2ede0 1px 2px);transform:skewY(1deg);z-index:-1;border-right:1px solid #68635a}
.book img{width:100%;height:auto;display:block}
.plate figcaption{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--rule);padding:11px 0;font-size:10px;color:var(--muted)}
.guide{padding:clamp(48px,5.4vw,84px) 0;background:#203e49 url('assets/art/grain.png');color:var(--paper)}
.section-kicker{display:flex;align-items:center;gap:12px;color:var(--rust);margin-bottom:16px}
.guide .section-kicker,.guide h2 em{color:var(--gold)}
.spread{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border-top:1px solid #829498;border-bottom:1px solid #829498}
.spread article{padding:30px 10% 36px 0}
.spread article+article{border-left:1px solid #829498;padding:30px 4% 36px 10%}
.movement{display:flex;align-items:center;gap:20px;color:var(--gold);margin-bottom:14px}
.movement img{width:70px;height:70px;object-fit:contain}
.spread h3{font-size:clamp(36px,3.4vw,54px);line-height:1.1;letter-spacing:-.025em;margin-bottom:12px}
.spread p{max-width:46ch;color:#eff0e9;line-height:1.65}
@media(max-width:1000px){.wrap{width:90%}.hero{gap:5%}nav{gap:18px}.actions{gap:20px}.question{font-size:clamp(68px,8.5vw,84px)}.print{aspect-ratio:.9}.book{width:49%}}
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}.mast-inner{min-height:70px;flex-wrap:wrap;gap:0}.brand{font-size:27px}.brand img{width:34px;height:34px}
 nav{flex:1 0 100%;align-items:stretch;flex-direction:column;gap:0;padding:8px 0 16px}nav a{min-height:46px;border-top:1px solid var(--rule)}.nav-buy{align-self:flex-start;margin-top:6px}
 .hero{grid-template-columns:1fr;padding-block:32px 38px;gap:28px}
 .question{font-size:clamp(65px,14vw,90px);margin:15px 0 16px}.pretitle{font-size:10px;gap:9px}
 .intro{font-size:16px;line-height:1.55;max-width:50ch;margin:15px 0 18px}.byline{font-size:13px}
 .print{aspect-ratio:1.42}.book{width:34%}.plate figcaption{font-size:9px}.actions{gap:22px}
 .spread{grid-template-columns:1fr;margin-top:24px}.spread article,.spread article+article{padding:22px 0 26px;border-left:none}.spread article+article{border-top:1px solid #829498}
 .movement{gap:12px;margin-bottom:8px}.movement img{width:54px;height:54px}.spread p{font-size:16px}
}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.question{font-size:61px}.pretitle{font-size:9px}.actions{gap:15px}.button{padding:10px 15px;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:760px){.pretitle{font-size:11px;letter-spacing:.08em}.print{aspect-ratio:1.35}.book{width:38%}}

/* The biographical record and portrait share a single editorial spread. */
.biography{padding-block:clamp(54px,6.4vw,98px)}
.biography h2 em,.voices h2 em{color:var(--rust)}
.bio-grid{display:grid;grid-template-columns:1fr 2fr;gap:7%;margin-top:40px}
.portrait{align-self:start;justify-self:center;width:min(100%,230px);padding:9px 9px 0;background:#fffdf6;border:1px solid var(--rule);box-shadow:4px 5px 0 #ddd5c7}
.portrait img{display:block;width:100%;height:auto}
.portrait figcaption{padding:12px 0;font:24px/1.1 var(--serif)}
.portrait small{display:block;font:12px/1.6 var(--sans);margin-top:3px;color:var(--muted)}
.bio-lead{font:clamp(28px,2.5vw,40px)/1.15 var(--serif);max-width:34ch;letter-spacing:-.01em}
.history dl{margin:22px 0 12px}
.history dl div{display:grid;grid-template-columns:116px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.history dt{font-size:14px;font-weight:650;color:var(--rust)}
.history dd{margin:0;max-width:54ch}
.voices{background:#ede8dd url('assets/art/grain.png');border-block:1px solid var(--rule);padding:clamp(50px,5.4vw,84px) 0}
.voices-grid,.edition-grid{display:grid;grid-template-columns:.87fr 1.13fr;gap:10%;align-items:start}
.works a,.stores a{position:relative;display:block;padding:22px 52px 22px 0;border-top:1px solid #898b81}
.works a:last-child,.stores a:last-child{border-bottom:1px solid #898b81}
.works a:hover,.stores a:hover{text-decoration:none}
.works a:hover h3,.stores a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.works h3{font-size:clamp(28px,2.6vw,42px);line-height:1.12;max-width:29ch;margin:8px 0;letter-spacing:-.02em}
.meta{color:var(--rust);font-size:10px}
.venue{font-size:14px;color:var(--muted)}
.out,.store-arrow{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:24px}
.editions{padding:clamp(48px,5.8vw,90px) 0;background:#e9c88c url('assets/art/grain.png')}
.editions .section-kicker,.stores .meta{color:#6a3522}
.edition-grid{align-items:center}
.purchase-title{font:clamp(24px,2vw,32px)/1.2 var(--serif);margin-top:16px}
.stores a,.stores a:last-child{border-color:#877150}.stores strong{display:block;font:clamp(32px,3vw,47px)/1.12 var(--serif);margin-top:5px}
footer{color:#f5f1e8;background:var(--ink)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:82px}
.foot-name{font:26px/1 var(--serif)}
footer small{font-size:12px}footer a{display:inline-flex;align-items:center;gap:10px;min-height:46px;font-size:14px}
@media(max-width:760px){
 .bio-grid{grid-template-columns:1fr;gap:28px;margin-top:26px}
 .portrait{justify-self:start;width:185px}.portrait figcaption{font-size:21px}
 .history dl div{grid-template-columns:80px 1fr;gap:12px}.history dt{font-size:12px}.history dd{font-size:16px}
 .voices-grid,.edition-grid{grid-template-columns:1fr;gap:26px}.voices h2 br{display:none}
 .foot-inner{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:20px 0}
 .foot-inner small{grid-column:1/-1;grid-row:2}.foot-inner a{grid-column:2;grid-row:1}
}

/* On the shortest phones, keep the cover and reading action together. */
@media(max-width:360px){
 .hero{gap:0;padding-top:24px}
 .opening{display:contents}
 .question{font-size:54px;margin:12px 0 14px}
 .hero .actions{order:1;margin-top:17px}
 .hero .plate{order:2;margin-top:20px}
 .hero .intro{order:3;margin:18px 0 0}
}