/* theuniverseandotherthings.com — the book's house style.
   Palette and emblem from cover.py. Palatino is what TeX Gyre Pagella clones. */

:root{
  --ink:#1c1815; --cream:#fbf9f5; --amber:#c88b22; --amber-deep:#8a5d12; --dim:#6b5d4f;
  --rule:#d9d2c6; --measure:34rem;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L","TeX Gyre Pagella",Georgia,serif;
}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);
     line-height:1.62;font-kerning:normal;text-rendering:optimizeLegibility}

/* ---- masthead ---- */
.masthead{background:var(--ink);color:var(--cream);padding:3.4rem 1.5rem 2.6rem;text-align:center}
.masthead .emblem{width:160px;height:160px;display:block;margin:0 auto 1.6rem}
.masthead h1{margin:0;font-size:2.1rem;font-weight:normal;letter-spacing:.22em;text-transform:uppercase;
             line-height:1.28}
.masthead .rule{width:min(300px,60%);height:1px;background:var(--amber);margin:1.5rem auto 1.1rem;border:0}
.masthead .strap{margin:0;color:var(--amber);font-style:italic;font-size:1.02rem;letter-spacing:.01em}
.masthead.slim{padding:2.1rem 1.5rem 1.7rem}
.masthead.slim .emblem{width:92px;height:92px;margin-bottom:1rem}
.masthead.slim h1{font-size:1.32rem}

/* ---- navigation ---- */
nav{background:var(--ink);border-top:1px solid rgba(251,249,245,.14);text-align:center;
    padding:.85rem 1rem 1.05rem}
nav a{color:var(--cream);text-decoration:none;margin:0 .95rem;font-size:.83rem;letter-spacing:.16em;
      text-transform:uppercase;opacity:.82;border-bottom:1px solid transparent;padding-bottom:.2rem}
nav a:hover,nav a:focus{opacity:1;border-bottom-color:var(--amber)}
nav a[aria-current=page]{opacity:1;border-bottom-color:var(--amber)}

/* ---- layout ---- */
main{max-width:var(--measure);margin:0 auto;padding:3rem 1.4rem 4rem}
main.wide{max-width:46rem}
h2{font-size:1.5rem;font-weight:normal;letter-spacing:.03em;margin:3.2rem 0 .3rem}
h2:first-child{margin-top:0}
h3{font-size:1.16rem;font-weight:normal;margin:2.4rem 0 .3rem}
p{margin:0 0 1.15rem}
a{color:var(--amber-deep)}
a:hover{color:var(--ink)}
.lede{font-size:1.1rem}
.lede:first-letter{font-size:2.9rem;float:left;line-height:.84;padding:.16rem .5rem .1rem 0;color:var(--amber-deep)}
.note{color:var(--dim);font-size:.94rem;font-style:italic}
hr.thin{border:0;height:1px;background:var(--rule);margin:2.8rem 0}

/* ---- a work ---- */
.work{border-top:1px solid var(--rule);padding:1.6rem 0 .4rem}
.work:first-of-type{border-top:0}
.work h3{margin:0 0 .1rem;font-size:1.2rem}
.work h3 .sub{display:block;font-style:italic;font-size:.98rem;color:var(--dim);letter-spacing:0}
.work .meta{color:var(--dim);font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;margin:.35rem 0 .7rem}
.work p{margin-bottom:.8rem}
.actions{margin:.2rem 0 1rem;font-size:.92rem}
.actions a{display:inline-block;border:1px solid var(--amber);color:var(--amber-deep);text-decoration:none;
           padding:.28rem .85rem;margin-right:.5rem;letter-spacing:.06em}
.actions a:hover{background:var(--amber);color:var(--ink)}
.pending{display:inline-block;border:1px dashed var(--rule);color:var(--dim);padding:.28rem .85rem;
         font-size:.86rem;font-style:italic}

/* ---- section intro ---- */
.section-intro{background:rgba(200,139,34,.07);border-left:2px solid var(--amber);padding:1rem 1.2rem;
               margin:.6rem 0 2rem}
.section-intro p{margin:0;font-size:.98rem}

/* ---- reading a work ---- */
article{max-width:34rem;margin:0 auto}
article h1{font-size:1.75rem;font-weight:normal;line-height:1.24;margin:0 0 .2rem}
article h2{font-size:1.28rem;margin:2.6rem 0 .6rem}
article h3{font-size:1.08rem;margin:2rem 0 .4rem}
article blockquote{margin:1.4rem 0;padding-left:1.1rem;border-left:2px solid var(--amber);color:var(--dim);
                   font-style:italic}
article table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1.6rem 0}
article th,article td{border-bottom:1px solid var(--rule);padding:.45rem .5rem;text-align:left;vertical-align:top}
article code{font-size:.9em;background:rgba(107,93,79,.09);padding:.05rem .25rem}
article hr{border:0;height:1px;background:var(--rule);margin:2.4rem 0}
.backlink{display:block;margin-bottom:2rem;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
          text-decoration:none}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--cream);margin-top:4rem;padding:2.4rem 1.5rem;text-align:center;
       font-size:.88rem}
footer a{color:var(--amber)}
footer p{margin:0 0 .5rem;opacity:.85}

@media (max-width:520px){
  html{font-size:16px}
  .masthead h1{font-size:1.5rem;letter-spacing:.14em}
  nav a{margin:0 .5rem;font-size:.76rem}
}
@media print{
  .masthead,nav,footer,.actions,.backlink{display:none}
  body{background:#fff}
  main,article{max-width:none}
}