/* Setting pages and the home page: the scroll look for long-form reading. Loaded after shell.css. */
#cover.place .photo{aspect-ratio:4/3;max-height:none}
#cover.place .pub{max-width:34em;color:#3a2d24}
.prosecol{max-width:42em}
.prosecol p{font-size:1.04rem}
.prosecol .coin,.coin{font-family:var(--sans);font-weight:700;letter-spacing:.01em}
.two.read{gap:clamp(20px,4vw,50px);align-items:start}
.two.read .pop{position:sticky;top:76px}
@media(max-width:859px){.two.read .pop{position:static}}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,3vw,30px);margin-top:2rem}
.leak{max-width:42em;margin:1.6rem 0 0;padding:14px 18px;background:#fffaf0;border:4px solid var(--ink);box-shadow:7px 8px 0 var(--shadow)}
.leak .lbl{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood);margin-bottom:6px}
.leak p{margin:0 0 .6rem}.leak p:last-child{margin:0}
.term{font-family:var(--sans);font-weight:700}
.map .l .term{font-weight:400;font-family:var(--serif)}
.map .l,.map .r{font-size:.95rem}
table.chron{width:100%;border-collapse:collapse;font-size:.93rem}
table.chron th{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:4px 10px 8px 0;color:#6b5a48}
table.chron td{padding:9px 10px 9px 0;border-top:2px solid #1c151222;vertical-align:top}
table.chron td.c,table.chron th.c{font-family:var(--sans);font-weight:700;white-space:nowrap;padding-right:0}
table.chron td:first-child{width:32%}
@media(max-width:700px){
  table.chron thead{display:none}
  table.chron tr{display:block;padding:10px 0;border-top:2px solid #1c151222}
  table.chron td{display:block;border:0;padding:2px 0;width:auto!important}
  table.chron td.c{color:var(--blood);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
}
.card3 .credit{display:block;margin-top:10px;font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blood)}
.card3 h3 a{color:var(--ink);text-decoration:none}
.card3 h3 a:hover,.prosecol a:hover{color:var(--aegean-d)}
.prosecol a,.leak a{color:var(--aegean-d)}
a.cardlink{display:block;color:inherit;text-decoration:none;height:100%}
a.cardlink:focus-visible{outline:3px solid var(--aegean-d);outline-offset:4px}
.card3.tall .photo{aspect-ratio:3/4}
/* book cards: the row is as many columns as there are books, so no row ends in a blank cell; five stand three over two, the two centred */
.cards3.books{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:861px) and (max-width:999px){.cards3.books:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards3.books:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:861px){
  .cards3.books:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards3.books:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  .cards3.books:has(>:nth-child(5):last-child)>:nth-child(4){grid-column:2/span 2}
}
/* narrower windows: two to a row, then one, with a shallower picture so a card is not a screen tall */
@media(max-width:860px){.cards3.books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .cards3.books{grid-template-columns:minmax(0,1fr)}
  .cards3.books .card3.tall .photo{aspect-ratio:4/3}
}
/* ---------- setting pages: spreads sit closer, and on a wide window a text spread puts its heading in a rail beside the text ---------- */
body:has(#cover.place) .spread:not(#cover){padding-top:clamp(3.4rem,7vw,5.4rem);padding-bottom:clamp(3.4rem,7vw,5.4rem)}
body:has(#cover.place) .spread h2{font-size:clamp(1.7rem,2.9vw,2.3rem)}
@media(min-width:900px){
  .wrap:has(>h2+.prosecol){display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);column-gap:clamp(24px,4vw,56px);align-items:start}
  .wrap:has(>h2+.prosecol)>*{grid-column:2}
  .wrap:has(>h2+.prosecol)>h2{grid-column:1;font-size:clamp(1.7rem,2.9vw,2.3rem);margin:.15rem 0 0;position:sticky;top:76px}
  .wrap:has(>h2+.prosecol)>.pop{grid-column:1/-1;margin-top:1.2rem}
  .wrap:has(>h2+.prosecol)>.map{margin:1.2rem 0 0}
}
/* ---------- the home page ---------- */
#cover.home .photo{aspect-ratio:1/1;max-height:none;background:#e9dcb6}
#cover.home h1{font-size:clamp(2.2rem,5.6vw,4.4rem)}
#cover.home .pub{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:30em;color:#3a2d24}
#cover.home .pub a{color:var(--aegean-d)}
/* the tour: which settings come first in the list below */
.tour{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;border:0;padding:0;margin:2.4rem 0 0;font-family:var(--sans)}
.tour legend{float:left;padding:0;margin-right:14px;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--blood)}
.tour input{position:absolute;opacity:0;pointer-events:none}
.tour label{cursor:pointer}
.tour label+label{margin-left:-3px}
.tour span{display:block;padding:8px 16px;font-size:.88rem;letter-spacing:.03em;color:var(--ink);background:#fffaf0;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow)}
.tour small{font-size:.74rem;opacity:.7}
.tour label:hover span{color:var(--aegean-d)}
.tour input:checked+span{position:relative;background:var(--ink);color:var(--parch);box-shadow:4px 4px 0 var(--blood)}
.tour input:focus-visible+span{outline:3px solid var(--aegean-d);outline-offset:2px}
@media(max-width:520px){.tour legend{float:none;margin:0 auto 10px}.tour span{padding:8px 11px}}
/* the setting is a place in the allegory, not a paper: no sheet, no frame, no unfolding. A medallion of the place, in its own colours, and a line of text lie on the page itself, closed by a meander that runs the page's whole width */
.setting-card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 20px;align-items:center;margin-top:1.2rem;color:inherit;text-decoration:none}
.setting-card .photo{aspect-ratio:1/1;border:0;border-radius:50%;box-shadow:0 0 0 2px var(--ink),0 0 0 5px transparent,0 0 0 6px #1c151255;background:var(--parch-lo)}
.setting-card h3{font-size:1.05rem;margin:.15rem 0 .3rem;max-width:476px}
.setting-card p{margin:0;font-size:.9rem;line-height:1.45;color:#5a4a3a;max-width:476px}
.setting-card::after{content:"";grid-column:1/-1;height:9px;margin-top:16px;opacity:.4;
  --edge:max(20px,4vw);width:calc(100vw - 2*var(--edge));margin-left:calc((100% - 100vw)/2 + var(--edge));
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 36 18'><path d='M0 2h32v14h-8V8h-8v8h-4V6h12M0 16h8' fill='none' stroke='%231c1512' stroke-width='2.6'/></svg>") repeat-x}
.setting-card:hover h3{color:var(--aegean-d)}
.setting-card:focus-visible{outline:3px solid var(--aegean-d);outline-offset:6px}
.setting-card+.cards3{margin-top:1.6rem}
/* a place with one book: the book lies flat, picture beside text */
.cards3.books>.pop:only-child{grid-column:1/-1;max-width:860px}
.cards3.books>.pop:only-child a.cardlink{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.cards3.books>.pop:only-child .body{padding:22px 26px;align-self:center}
.cards3.books>.pop:only-child h3{font-size:1.45rem;margin-bottom:.6rem}
.cards3.books>.pop:only-child p{font-size:1rem}
.cards3.books>.pop:only-child p+p{margin-top:.7rem}
@media(max-width:640px){.cards3.books>.pop:only-child a.cardlink{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.setting-card{grid-template-columns:76px minmax(0,1fr);gap:0 14px}}
.card3 .q{font-style:italic}
.card3 .how{margin-top:.6rem!important;font-size:.9rem!important;color:#3a2d24}
/* ---------- the papers list: a short cover with no picture, then the table ---------- */
#cover.brief{min-height:0;padding-bottom:clamp(2.6rem,6vw,4.2rem)}
#cover.brief .hook{max-width:30em;margin:0}
#papers{padding-top:clamp(3rem,6vw,4.4rem)}
#papers .well{margin-top:0}
table.chron a{color:var(--aegean-d)}
table.chron.papers td:first-child{width:2.4em;color:#6b5a48;font-weight:400}
table.chron.papers td:nth-child(2){width:4em;font-family:var(--sans);white-space:nowrap}
table.chron.papers td:nth-child(4){width:30%}
table.chron .where{display:block;font-size:.84rem;color:#6b5a48}
table.chron br{display:none}
#papers .prosecol{margin-top:2rem}
#papers .prosecol ul{padding-left:1.2em;margin:0}
#papers .prosecol li{margin-bottom:.5rem}
@media(max-width:700px){
  table.chron.papers td:first-child,table.chron.papers td:nth-child(2){display:inline;font-size:.78rem;letter-spacing:.08em;color:var(--blood);font-family:var(--sans);font-weight:700}
  table.chron.papers td:first-child::after{content:" · "}
  table.chron.papers td:nth-child(3){padding-top:4px}
}