/* Media Matters - Scott Miller. Reading shell stylesheet. */

:root{
  --canvas:#EDEDEA;
  --surface:#FFFFFF;
  --ink:#212121;
  --meta:#6E6E6E;
  --accent:#17435E;
  --gold:#F5BC24;
  --rule:#DDDDDD;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --util:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:16px/1.68 var(--sans);
  padding:32px 16px 48px;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--accent);
  padding:10px 16px;border:1px solid var(--rule);font:11px/1 var(--util);
  letter-spacing:.1em;text-transform:uppercase;z-index:5;
}
.skip:focus{left:16px;top:16px}

.shell{
  max-width:1040px;margin:0 auto;background:var(--surface);
  border:1px solid var(--rule);padding:0 40px 40px;
}

/* ---------- masthead ---------- */
.masthead{padding:44px 0 0;text-align:center}
.wordmark{margin:0;font:400 40px/1.06 var(--serif);text-transform:uppercase;letter-spacing:.14em}
.wordmark a{color:var(--ink);text-decoration:none;display:block}
.wordmark span{display:block}
.goldrule{
  height:1px;background:var(--rule);margin:18px auto 0;max-width:420px;position:relative;
}
.goldrule::after{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:64px;height:3px;background:var(--gold);
}
.goldrule.sm{margin:14px 0 0;max-width:180px}
.goldrule.sm::after{left:0;transform:none;width:24px}
.tagline{margin:16px 0 0;font:13px/1.5 var(--util);color:var(--meta)}

/* ---------- page menu ---------- */
.pagemenu{
  margin:28px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.pagelinks,.utilrow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.pagelinks{gap:28px}
.pagelinks a{
  font:11px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;display:block;padding:6px 0;
}
.pagelinks a:hover{color:var(--accent)}
.pagelinks a.on{color:var(--accent);border-bottom:2px solid var(--gold);padding-bottom:4px}
.utilrow{gap:18px}
.utilrow a{
  display:inline-flex;align-items:center;gap:6px;color:var(--meta);
  font:11px/1 var(--util);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:6px 0;
}
.utilrow a:hover{color:var(--accent)}
.utilrow svg{flex:none}

/* ---------- body grid ---------- */
.body-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;
  align-items:start;padding-top:36px;
}
.stream{min-width:0}

/* ---------- entries ---------- */
.entry{display:flow-root;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--rule)}
.entry:last-of-type{margin-bottom:0}
.etitle,.entry h1{
  margin:0;font:400 28px/1.26 var(--serif);letter-spacing:.005em;
}
.entry.detail h1{font-size:30px}
.etitle a{color:var(--ink);text-decoration:none}
.etitle a:hover{color:var(--accent)}
.meta{
  margin:10px 0 20px;font:11px/1.4 var(--util);letter-spacing:.1em;
  text-transform:uppercase;color:var(--meta);
}
.entry p{margin:0 0 18px;max-width:66ch}
.entry h2{margin:32px 0 12px;font:400 22px/1.3 var(--serif)}
.entry h3{margin:26px 0 10px;font:11px/1.4 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.lede{font-size:17px}

figure{margin:0 0 24px}
figure img{display:block;border:1px solid var(--rule)}
figcaption{margin-top:8px;font:11px/1.5 var(--util);letter-spacing:.06em;color:var(--meta)}
figure.lead img{width:100%;max-width:408px}
figure.render img{max-width:300px;border:0;background:transparent}
figure.lead{margin:0 0 26px}
figure.inline-right{float:right;width:210px;margin:4px 0 18px 28px}
figure.inline-right img{border:0;background:transparent}

.discover{margin:0 0 20px;padding:0;list-style:none;max-width:56ch}
.discover li{padding:9px 0 9px 18px;border-bottom:1px solid var(--rule);position:relative}
.discover li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:2px;background:var(--gold)}
.discover li:first-child{border-top:1px solid var(--rule)}

.pull{margin:0 0 20px;padding:0 0 0 20px;border-left:3px solid var(--gold);max-width:62ch}
.pull p{font:400 19px/1.6 var(--serif);margin:0 0 12px}
.pull cite{font:11px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;color:var(--meta);font-style:normal}

.orderline,.more{font-size:15px}
.more{margin-top:4px}
.more a,.railmore a{
  font:11px/1 var(--util);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.more a:hover,.railmore a:hover{border-bottom-color:var(--accent)}

.editions{margin:0;padding:0;list-style:none;max-width:56ch}
.editions li{padding:10px 0;border-bottom:1px solid var(--rule)}
.editions li:first-child{border-top:1px solid var(--rule)}

.indexlist{margin:0;padding:0;list-style:none}
.indexlist li{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--rule)}
.indexlist li:last-child{border-bottom:0;margin-bottom:0}
.ix{font:400 20px/1.3 var(--serif);color:var(--ink);text-decoration:none;display:block}
.ix:hover{color:var(--accent)}
.indexlist .meta{display:block;margin:8px 0 8px}
.indexlist p{margin:0;max-width:66ch;font-size:15px;color:#3A3A3A}

.prevnext{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--rule);
}
.prevnext a{font:11px/1.4 var(--util);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.prevnext .ret{color:var(--meta)}
.prevnext .ret:hover{color:var(--accent)}

/* ---------- rail ---------- */
.rail{min-width:0}
.widget{margin:0 0 34px}
.widget h2{
  margin:0 0 0;font:11px/1.4 var(--util);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding-bottom:8px;border-bottom:1px solid var(--rule);position:relative;
}
.widget h2::after{content:"";position:absolute;left:0;bottom:-1px;width:24px;height:3px;background:var(--gold)}
.widget img{display:block;margin:16px 0 0;border:1px solid var(--rule);width:100%}
.railnote{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:#3A3A3A}
.railmore{margin:10px 0 0}
.widgetlist{list-style:none;margin:12px 0 0;padding:0}
.widgetlist li{border-bottom:1px solid var(--rule)}
.widgetlist a{
  display:block;padding:9px 0;font:12px/1.4 var(--util);letter-spacing:.04em;
  text-decoration:none;color:var(--ink);
}
.widgetlist a:hover,.widgetlist a.on{color:var(--accent)}

/* ---------- footer ---------- */
.pagefoot{margin-top:44px;border-top:1px solid var(--rule);padding-top:28px}
.footblocks{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fb h2{
  margin:0 0 10px;font:11px/1.4 var(--util);letter-spacing:.12em;text-transform:uppercase;color:var(--meta);
}
.fb ul{list-style:none;margin:0;padding:0}
.fb li{font-size:13.5px;line-height:1.9;color:#3A3A3A}
.fb a{text-decoration:none}
.fb a:hover{text-decoration:underline}
.copyline{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
}
.copyline p{margin:0;font:12px/1.4 var(--util);letter-spacing:.06em;color:var(--meta)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{padding:20px 12px 32px}
  .shell{padding:0 28px 32px}
  .body-grid{grid-template-columns:1fr;gap:0;padding-top:28px}
  .rail{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule)}
  .widget img{max-width:240px}
  figure.inline-right{float:none;width:auto;margin:0 0 24px}
  figure.inline-right img{max-width:210px;margin:0 auto}
  .entry{padding-bottom:28px;margin-bottom:28px}
}
@media (max-width:720px){
  .masthead{padding:26px 0 0}
  .wordmark{font-size:26px}
  .tagline{margin-top:12px;font-size:12px}
  .goldrule{margin-top:14px}
  .pagemenu{flex-direction:column;gap:10px;margin-top:20px}
  .pagelinks{justify-content:center;gap:20px;row-gap:2px}
  .pagelinks a{font-size:13px;padding:10px 0;min-height:44px;display:flex;align-items:center}
  .utilrow{justify-content:center;gap:22px}
  .utilrow a{min-height:44px}
  .etitle,.entry h1{font-size:24px}
  .entry.detail h1{font-size:26px}
  .footblocks{grid-template-columns:1fr;gap:24px}
  .copyline{justify-content:center;text-align:center}
  .widgetlist a{padding:12px 0;min-height:44px;display:flex;align-items:center}
}
@media (max-width:480px){
  .shell{padding:0 20px 28px}
  figure.lead img{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}