body {
  --paper:#f7f4e9;
  --ink:#191b17;
  --accent:#b43b27;
  --muted:#56584f}
.folio {
  max-width:1280px;
  margin:auto;
  padding:0 40px}
.masthead {
  padding:17px 0 13px;
  border-bottom:1px solid #191b17}
.cover {
  position:relative;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  grid-template-rows:auto auto;
  min-height:540px;
  background:none;
  padding:53px 0 43px}
.cover-name {
  grid-column:2;
  grid-row:1;
  padding:0 15px 10px}
.cover-name .edition {
  color:#b43b27;
  margin-bottom:13px}
.cover h1 {
  font:normal 73px/.92 Georgia,serif;
  letter-spacing:-3.7px}
.cover h1 span {
  display:inline-block;
  font:normal 19px/1.2 serif;
  letter-spacing:.18em;
  margin-left:24px;
  vertical-align:middle;
  color:#b43b27}
.cover-copy {
  grid-column:2;
  grid-row:2;
  padding:13px 15px 0}
.cover-copy .lead {
  font-size:17px;
  line-height:1.6;
  margin-bottom:12px}
.cover-copy .bio {
  font-size:15px;
  line-height:1.7}
.cover-copy .contact-links {
  margin-top:7px;
  gap:24px}
.cover .portrait {
  position:absolute;
  left:73px;
  top:290px;
  width:135px;
  padding:7px;
  background:#f7f4e9}
.cover .portrait img {
  height:154px;
  object-position:center 43%}
.cover .portrait figcaption {
  font:italic 12px/1.4 Georgia,serif;
  text-align:center;
  padding-top:2px}
.reading {
  margin:0 110px 0 260px}
.research>.section-head {
  padding:24px 0 18px;
  border-bottom:1px solid #aaa99f}
.section-head h2 {
  font-family:Georgia,serif}
.bibliography>li {
  border-bottom:1px solid #b9b9ad}
.paper {
  grid-template-columns:32px 1fr;
  gap:18px}
.paper-index {
  font:italic 16px/1.5 Georgia,serif;
  color:#b43b27}
.paper h3 {
  font-size:25px}
.community {
  grid-template-columns:1fr;
  padding-top:25px;
  border-top:2px solid #191b17;
  gap:25px}
.community-list {
  grid-template-columns:1fr 1fr}
.community>div>p {
  max-width:62ch}
footer {
  margin-left:260px;
  margin-right:110px;
  border-top:1px solid #191b17}
@media(max-width:1050px) {
  .folio {
  padding-inline:24px}
.cover {
  grid-template-columns:180px minmax(0,1fr) 150px;
  background:none}
.cover .portrait {
  left:20px;
  width:125px;
  top:320px}
.cover h1 {
  font-size:64px}
.reading,footer {
  margin-left:180px;
  margin-right:45px}
.cover-copy .bio {
  font-size:15px}
.cover-copy .lead {
  font-size:16px}
}
@media(max-width:650px) {
  .folio {
  padding-inline:20px}
.masthead {
  padding:10px 0 7px}
.cover {
  display:block;
  min-height:0;
  background:none;
  padding:0}
.cover-name {
  position:relative;
  min-height:278px;
  margin-inline:-20px;
  padding:87px 42px 50px 105px;
  background:none}
.cover-name .edition {
  position:absolute;
  top:61px;
  left:40px;
  font-size:8px;
  letter-spacing:.05em}
.cover h1 {
  font-size:57px;
  letter-spacing:-3px;
  line-height:.95}
.cover h1 span {
  font-size:15px;
  margin-left:15px}
.cover .portrait {
  left:27px;
  top:136px;
  width:71px;
  padding:4px}
.cover .portrait img {
  height:87px}
.cover .portrait figcaption {
  font-size:8px;
  padding-top:0}
.cover-copy {
  padding:23px 0 20px}
.cover-copy .lead {
  font-size:18px;
  line-height:1.6;
  margin-bottom:15px}
.cover-copy .bio {
  font-size:16px}
.cover-copy .contact-links {
  gap:23px;
  margin-top:12px}
.reading,footer {
  margin:0}
.research>.section-head {
  padding-top:13px}
.paper {
  grid-template-columns:24px 1fr;
  gap:13px}
.paper h3 {
  font-size:25px}
.code-item {
  grid-template-columns:1fr;
  gap:0}
.code-item p {
  grid-column:1;
  grid-row:auto;
  font-size:16px;
  margin-top:11px}
.code-number {
  display:none}
.community-list {
  grid-template-columns:1fr}
.community {
  gap:23px}
.community-list>div:last-child {
  grid-column:auto}
footer {
  margin:0}
}
@media(max-width:350px) {
  .cover-name {
  padding-left:95px;
  padding-right:20px}
.cover h1 {
  font-size:49px}
.cover h1 span {
  font-size:13px;
  margin-left:12px}
.cover .portrait {
  left:24px;
  width:66px}
.cover-name .edition {
  left:31px;
  font-size:7px}
}


/* Keep a real clear margin between the accumulation and identity text. */
@media(min-width:1051px) {
  .cover {
  grid-template-columns:280px minmax(0,1fr) 280px}
}

@media(max-width:650px) {
  .cover-name {
  padding-top:105px}
.cover-name .edition {
  top:81px;
  left:90px}
}

@media(max-width:350px) {
  .cover-name .edition {
  left:84px;
  font-size:7px}
}

/* The porous edge continues through the document rather than ending as a hero. */
.reading {
  position:relative}

.reading:before {
  content:'';
  position:absolute;
  top:-13px;
  bottom:0;
  left:-105px;
  width:80px;
  background:url('/v7-margin.svg') left top/80px auto repeat-y;
  pointer-events:none}

.cover {
  background:none;
  background-position:center top}

@media(max-width:1050px) and (min-width:651px) {
  .reading:before {
  left:-85px;
  width:60px;
  background-size:60px auto}
}

@media(max-width:650px) {
  .cover .portrait {
  left:0}
.reading:before {
  left:-20px;
  width:7px;
  background-size:20px auto;
  opacity:.5}
.cover-name {
  background:none}
}

@media(max-width:350px) {
  .cover .portrait {
  left:-2px}
}

@media(min-width:1051px) {
  .reading,footer {
  margin-left:295px}
}

@media(max-width:1050px) and (min-width:651px) {
  .reading,footer {
  margin-left:195px}
}

@media(max-width:650px) {
  
 .cover {
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  position:relative}

 .cover:before {
  content:'';
  position:absolute;
  left:-20px;
  right:-20px;
  top:0;
  height:278px;
  background:none;
  pointer-events:none}

 .cover-name {
  position:static;
  grid-column:2;
  grid-row:1;
  margin:0;
  padding:105px 0 48px;
  background:none;
  min-height:278px;
  z-index:1}

 .cover-name .edition {
  left:85px;
  top:81px}

 .cover .portrait {
  position:relative;
  left:auto;
  top:auto;
  grid-column:1;
  grid-row:1;
  margin:136px 0 0;
  width:71px;
  align-self:start;
  z-index:1}

 .cover-copy {
  grid-column:1/-1;
  grid-row:2}

}

@media(max-width:350px) {
  .cover-name {
  padding-right:0}
.cover .portrait {
  width:66px}
.cover-name .edition {
  font-size:7px;
  left:76px}
}


/* The margin is the only live drawing surface; it never changes reading geometry. */
.reading:before{background-image:var(--margin-field,url('/v7-margin.svg'))}
.hold-art{font:inherit;font-size:12px;color:inherit;background:none;border:0;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
.hold-art[hidden]{display:none}
.hold-art:focus-visible{outline:3px solid #b43b27;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.reading:before{background-image:url('/v7-margin.svg')}}

/* Native-size fields crop within the layout's gutters. Their dots never stretch.
   A separate crown joins the two edges without painting over the reading opening. */
.cover {
  background:url('/v7-crown.svg') center top/1200px 60px no-repeat;
  isolation:isolate;
}
.cover:before,.cover:after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:280px;
  pointer-events:none;
  z-index:-1;
  background:url('/v7-porous.svg') left top/1200px 540px no-repeat;
}
.cover:before {left:0}
.cover:after {right:0;background-position:right top}
.cover .portrait figcaption {text-wrap:balance}
@media(max-width:1050px) and (min-width:651px) {
  .cover:before {width:165px;background-image:url('/v7-porous-tablet.svg')}
  .cover:after {width:135px;background-image:url('/v7-porous-tablet.svg')}
}
@media(max-width:650px) {
  .cover {
    background:url('/v7-crown.svg') center top/1200px 60px no-repeat;
  }
  .cover:before,.cover:after {
    top:0;
    bottom:auto;
    height:278px;
    width:64px;
    background-image:url('/v7-porous-mobile.svg');
    background-size:390px 280px;
  }
  .cover:before {left:-20px;right:auto}
  .cover:after {
    left:auto;
    right:-20px;
    width:60px;
  }
  .cover .portrait figcaption {font-size:10px;line-height:1.4;padding-top:4px;width:92px;text-align:left}
}

/* Shared canvas: retain the opening's outer edge through the research feed.
   Rail tiles crop and reflect the original circles, without scaling their axes. */
.reading {margin:0;padding:0 110px 0 295px}
.reading:before {
  left:0;top:0;bottom:0;width:280px;
  background-image:var(--desktop-field,url('/v7-rail-desktop.svg'));
  background-size:280px 840px;
  background-position:left top;
  background-repeat:repeat-y;
  opacity:1;
}
@media(max-width:1050px) and (min-width:651px) {
 .reading {padding-left:195px;padding-right:45px}
 .reading:before {left:0;width:165px;background-image:var(--tablet-field,url('/v7-rail-tablet.svg'));background-size:165px 840px}
}
@media(max-width:650px) {
 main {position:relative;isolation:isolate}
 main:before {
   content:'';position:absolute;z-index:-1;
   left:-20px;top:240px;bottom:0;width:40px;
   background:var(--mobile-field,url('/v7-rail-mobile.svg')) left top/64px 340px repeat-y;
   pointer-events:none;
 }
 .cover-name {min-height:240px;padding-top:81px;padding-bottom:34px}
 .cover .portrait {margin-top:112px}
 .cover:before,.cover:after {height:240px}
 .cover-copy {padding:20px 0 26px 32px}
 .reading {padding:0 0 0 32px}
 .reading:before {display:none}
 footer {margin-left:32px}
}
@media(max-width:380px) {
 .research>.section-head {flex-direction:column;align-items:flex-start;gap:0}
}
@media(prefers-reduced-motion:reduce) {
 .reading:before {background-image:url('/v7-rail-desktop.svg')}
}
@media(prefers-reduced-motion:reduce) and (min-width:651px) and (max-width:1050px) {
 .reading:before {background-image:url('/v7-rail-tablet.svg')}
}
@media(prefers-reduced-motion:reduce) and (max-width:650px) {
 main:before {background-image:url('/v7-rail-mobile.svg')}
}
@media(max-width:650px) {
 .cover-copy .contact-links {gap:clamp(12px,4vw,23px)}
}

.paper-mention {margin:15px 0 8px;padding-left:14px;border-left:1px solid #a64431}
.paper-mention p {font:italic 17px/1.55 Georgia,serif;margin:0;color:#404139}
.paper-mention cite {font:normal 12px/1.5 system-ui,sans-serif}
.paper-mention cite a {display:inline-flex;align-items:center;min-height:44px;flex-wrap:wrap;gap:0 .3em}