*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F4F2ED;color:#2B2B2B;
  font-family:"Open Sans","Segoe UI",Arial,Helvetica,sans-serif;
  font-size:17px;line-height:1.62;overflow-x:hidden}
img,svg{max-width:100%}
a{color:#1F6F78}
a:focus-visible,.skip:focus{outline:2px solid #1F6F78;outline-offset:2px}
.canvas{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:#2B2B2B;color:#fff;padding:8px 16px;z-index:5}
.skip:focus{left:0}

/* header */
.head{border-bottom:1px solid #D8D3C8}
.head .canvas{min-height:84px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:16px}
.mark{display:block;font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-size:26px;
  letter-spacing:.02em;color:#2B2B2B;text-decoration:none;line-height:1.1;
  border-bottom:2px solid #2B2B2B;padding-bottom:4px}
.mark-sub{display:block;margin-top:6px;font-family:Georgia,"Droid Serif",serif;
  font-style:italic;font-size:14px;color:#5C5A54}
.pagelinks{display:flex;flex-wrap:wrap;gap:8px 20px}
.pagelinks a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:#2B2B2B}
.pagelinks a:hover,.pagelinks a[aria-current]{color:#1F6F78}

/* anchor index */
.anchors{border-bottom:1px solid #D8D3C8;background:#F4F2ED}
.anchors .canvas{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:12px;padding-bottom:12px}
.anchors a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:#2B2B2B;white-space:nowrap}
.anchors a:hover{color:#1F6F78}
.anchors b{color:#B4842B;font-weight:700;margin-right:6px;font-variant-numeric:tabular-nums}

/* stage */
.stage{padding-bottom:64px}
.stage-img{display:block;width:100%;height:420px;object-fit:cover}
.panel{background:#FFFFFF;width:540px;max-width:100%;margin-top:-250px;padding:40px 40px 36px;
  position:relative;border-top:4px solid #B4842B}
.panel h1{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;
  font-size:46px;line-height:1.08;margin:0}
.panel .lede{font-family:Georgia,"Droid Serif",serif;font-style:italic;font-size:15px;
  color:#5C5A54;margin:10px 0 20px}
.panel p{margin:0 0 22px}
.route{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:#1F6F78;border-bottom:1px solid #1F6F78;padding-bottom:3px}

/* chapters on home */
.chapters{padding-bottom:56px}
.chapter-row{border-top:1px solid #D8D3C8;padding:32px 0;display:grid;
  grid-template-columns:260px 1fr;gap:40px}
.chapter-row h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;
  font-size:30px;line-height:1.12;margin:0}
.chapter-row p{margin:0 0 16px;max-width:66ch}

/* figures */
.figures{padding-bottom:56px}
.figures h2,.orient h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;
  font-size:30px;margin:0 0 24px;padding-top:32px;border-top:1px solid #D8D3C8}
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.figrow figure{margin:0;background:#FFFFFF;padding:16px}
.figrow img{display:block;width:100%;height:170px;object-fit:contain}
.figrow figcaption{font-family:Georgia,"Droid Serif",serif;font-style:italic;font-size:14px;
  color:#5C5A54;margin-top:12px}
.figrow a{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none}

/* orientation */
.orient{padding-bottom:56px}
.orient p{max-width:66ch}
.index-list{list-style:none;margin:24px 0 0;padding:0;columns:2;column-gap:48px}
.index-list li{break-inside:avoid;padding:6px 0;border-bottom:1px solid #D8D3C8}
.index-list a{text-decoration:none}
.index-list b{color:#B4842B;margin-right:8px;font-variant-numeric:tabular-nums}

/* footer */
.foot{border-top:2px solid #2B2B2B;background:#F4F2ED;padding:24px 0 40px;margin-top:24px}
.foot .canvas{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;
  justify-content:space-between}
.foot .fname{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-size:20px}
.foot .fsub{font-family:Georgia,"Droid Serif",serif;font-style:italic;font-size:14px;color:#5C5A54}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.foot a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#2B2B2B}

/* chapter pages */
.plate{padding:48px 0 0}
.plate-inner{background:#FFFFFF;padding:32px 40px;display:grid;
  grid-template-columns:1fr;gap:8px;border-top:4px solid #B4842B}
.plate-inner.with-plate{grid-template-columns:1fr 300px;gap:40px;align-items:center}
.plate-num{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-size:44px;color:#B4842B;
  line-height:1;display:block;font-variant-numeric:tabular-nums}
.plate h1{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;font-size:34px;
  line-height:1.14;margin:10px 0 0}
.standfirst{font-family:Georgia,"Droid Serif",serif;font-style:italic;font-size:16px;
  color:#5C5A54;margin:12px 0 0;max-width:60ch}
.plate-fig{margin:0}
.plate-fig img{display:block;width:100%;height:180px;object-fit:contain}

.chapbody{display:grid;grid-template-columns:1fr 280px;gap:56px;padding:40px 0 24px}
.chaptext h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;font-size:20px;
  margin:32px 0 10px;padding-top:20px;border-top:1px solid #D8D3C8}
.chaptext h2:first-child{margin-top:0;padding-top:0;border-top:0}
.chaptext p{margin:0 0 16px;max-width:66ch}
.railcol{align-self:start}
.rail{background:#FFFFFF;padding:24px}
.railindex{margin-top:24px;border-top:1px solid #D8D3C8;padding-top:16px}
.railindex h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;color:#5C5A54}
.railindex ul{list-style:none;margin:0;padding:0}
.railindex li{font-size:14px;padding:5px 0;border-bottom:1px solid #E4DFD3}
.railindex b{color:#B4842B;margin-right:8px;font-variant-numeric:tabular-nums}
.railindex a{text-decoration:none}
.railindex em{font-style:normal;color:#5C5A54}
.rail h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.rail ul{margin:0;padding-left:18px}
.rail li{font-size:15px;line-height:1.5;margin-bottom:10px;color:#2B2B2B}

.turn{border-top:1px solid #D8D3C8;padding:24px 0 8px;display:flex;flex-wrap:wrap;
  gap:16px 40px;justify-content:space-between}
.turn a{font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.turn span{display:block;font-family:Georgia,"Droid Serif",serif;font-style:italic;
  font-size:13px;color:#5C5A54;text-transform:none;letter-spacing:0}

/* glossary */
.terms{list-style:none;margin:0;padding:40px 0 24px;columns:2;column-gap:56px}
.terms li{break-inside:avoid;margin-bottom:18px;max-width:44ch}
.terms dfn{font-style:normal;font-weight:700;display:block}
.terms span{font-size:15px;color:#2B2B2B}

/* 404 */
.simple{padding:64px 0}
.simple h1{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500;font-size:40px;margin:0 0 16px}
.simple p{max-width:60ch}

@media (max-width:900px){
  .chapter-row{grid-template-columns:1fr;gap:16px}
  .chapbody{display:flex;flex-direction:column;gap:32px;padding-top:32px}
  .railcol{order:-1}
  .railindex{display:none}
  .figrow{grid-template-columns:1fr}
  .plate-inner.with-plate{grid-template-columns:1fr;gap:20px}
  .terms{columns:1}
}
@media (max-width:640px){
  body{font-size:16px}
  .canvas{padding:0 18px}
  .stage-img{height:220px}
  .panel{margin-top:0;width:100%;padding:28px 22px 26px}
  .panel h1{font-size:30px}
  .plate h1{font-size:24px}
  .plate-inner{padding:24px 22px}
  .plate-num{font-size:34px}
  .chapter-row h2,.figures h2,.orient h2{font-size:24px}
  .index-list{columns:1}
  .foot ul{gap:6px 16px}
}
