/* Chambers of Ink — coi-inkfield-canvas-journal-70-30-2017
   Locked reference: blogger-picture-window-2010 (weblog family) */

:root{
  --canvas:#3b3730;
  --paper:rgba(249,245,237,0.94);
  --paper-solid:#f9f5ed;
  --rail:rgba(243,237,225,0.92);
  --ink:#26221e;
  --ink-soft:#5d564c;
  --accent:#8c2f39;
  --rule:#c9bda6;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background-color:var(--canvas);
  background-image:url("/wp-content/uploads/2016/01/Assorted-Journals-a-1.jpg");
  background-position:top center;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--ink);
  font:17px/1.62 Arial,Helvetica,"Liberation Sans",sans-serif;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(140,47,57,.35);}
a:hover{border-bottom-color:var(--accent);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;background:var(--paper-solid);padding:8px 12px;z-index:9;}

.shell{max-width:1100px;margin:0 auto;padding:0 16px 48px;}

/* ---- picture masthead */
.masthead{
  margin-top:24px;
  height:200px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(38,34,30,.42);
  border:1px solid rgba(201,189,166,.55);
  text-align:center;
}
.masthead-inner{padding:12px 20px;}
.wordmark{margin:0 auto 6px;width:220px;height:auto;filter:brightness(0) invert(1);opacity:.94;}
.brandline{
  margin:0;color:#fff;font-family:Georgia,"Times New Roman",serif;
  font-size:34px;font-weight:400;font-variant:small-caps;letter-spacing:.18em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.brandline a{color:#fff;border:0;}
.strapline{
  margin:6px 0 0;color:#f2e9d8;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-variant:small-caps;
}

/* ---- page tabs */
.tabs{background:rgba(38,34,30,.62);border:1px solid rgba(201,189,166,.4);border-top:0;}
.tabs ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;}
.tabs a{
  display:block;padding:10px 18px;color:#f4ece0;border:0;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;
}
.tabs a:hover,.tabs a.on{background:var(--paper-solid);color:var(--ink);}

/* ---- 70/30 shell */
.cols{display:flex;gap:24px;align-items:flex-start;margin-top:24px;}
.stream{flex:1 1 70%;min-width:0;background:var(--paper);border:1px solid var(--rule);padding:28px 32px;}
.rail{flex:0 0 29%;background:var(--rail);border:1px solid var(--rule);padding:20px 22px;}

/* ---- ink baseline motif */
.inkrule{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.inkrule .blot{
  flex:0 0 auto;background:var(--ink);color:var(--paper-solid);
  padding:3px 8px;font-size:11px;letter-spacing:.06em;min-width:34px;text-align:center;
}
.inkrule .rule{flex:1 1 auto;height:2px;background:var(--ink);}
.inkrule .inkmeta{flex:0 0 auto;}

/* ---- entries */
.entry{padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--rule);}
.entry:last-child{border-bottom:0;}
.etitle{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:24px;line-height:1.25;margin:0 0 6px;
}
.leadentry .etitle{font-size:30px;}
.etitle.single{font-size:34px;margin-bottom:8px;}
.etitle a{color:var(--ink);border-bottom:1px solid rgba(38,34,30,.2);}
.etitle a:hover{color:var(--accent);}
.meta{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.excerpt,.entrybody p,.entrybody li{max-width:66ch;}
.entrybody h2{font-family:Georgia,serif;font-weight:400;font-size:22px;margin:26px 0 8px;}
.entrybody h3{font-family:Georgia,serif;font-weight:400;font-size:19px;margin:22px 0 6px;}
.entrybody blockquote{margin:18px 0;padding-left:16px;border-left:3px solid var(--rule);color:var(--ink-soft);}
figure.lead,figure.inline{margin:0 0 16px;}
figure.inline{margin:20px 0;}
figure .photo{width:100%;border:1px solid var(--rule);}
figcaption{font-size:12px;color:var(--ink-soft);padding-top:6px;letter-spacing:.03em;}
.readon,.more{margin:12px 0 0;font-size:13px;letter-spacing:.04em;}
.tags{margin:12px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.tags a{margin-right:8px;}
.secttl,.monthhead{
  font-family:Georgia,serif;font-weight:400;font-size:20px;margin:34px 0 14px;
  padding-bottom:6px;border-bottom:2px solid var(--ink);
}
.subttl{font-family:Georgia,serif;font-weight:400;font-size:18px;margin:26px 0 12px;}
.ptitle{font-family:Georgia,serif;font-weight:400;font-size:36px;margin:0 0 12px;}
.prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:24px;
  padding-top:14px;border-top:2px solid var(--ink);font-size:13px;}

/* ---- rail widgets */
.widget{margin:0 0 26px;}
.widget h2{font-family:Georgia,serif;font-weight:400;font-size:17px;margin:0 0 10px;}
.widget p,.widget dd,.widget li{font-size:14px;}
.widget .mark{width:72px;height:auto;margin:0 0 10px;}
.profilelist{margin:10px 0 0;}
.profilelist dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;}
.profilelist dd{margin:2px 0 0;}
ul.archive,ul.stores{list-style:none;margin:0;padding:0;}
ul.archive li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dotted var(--rule);}
ul.stores li{padding:7px 0;border-bottom:1px dotted var(--rule);line-height:1.4;}
.count{color:var(--ink-soft);font-size:12px;}
.quotes blockquote{margin:0 0 16px;padding-left:14px;border-left:3px solid var(--rule);}
.quotes blockquote p{font-family:Georgia,serif;font-size:15px;font-style:italic;margin:0;}
.quotes .attrib{font-style:normal;font-family:Arial,Helvetica,sans-serif;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px;}

/* ---- labels / albums */
.albums{margin-top:24px;background:var(--paper);border:1px solid var(--rule);padding:26px 32px;}
.labelindex{list-style:none;margin:0 0 8px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 20px;}
.labelindex li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  border-bottom:1px dotted var(--rule);font-size:14px;}

/* ---- plates */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px;margin-top:8px;}
.plates.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.plate .inkrule{margin-bottom:8px;font-size:11px;}
.plate .pimg{display:block;border:0;}
.plate img{width:100%;border:1px solid var(--rule);background:#fff;}
.plate .noimg{
  display:flex;align-items:center;justify-content:center;height:150px;
  border:1px solid var(--rule);background:#efe8da;color:var(--ink-soft);
  font-family:Georgia,serif;font-size:13px;letter-spacing:.1em;text-align:center;padding:8px;
}
.plate h3{font-family:Georgia,serif;font-weight:400;font-size:16px;line-height:1.3;margin:10px 0 4px;}
.plate h3 a{color:var(--ink);border:0;}
.plate h3 a:hover{color:var(--accent);}
.price{margin:0;font-size:14px;color:var(--accent);letter-spacing:.03em;}
.price del{color:var(--ink-soft);margin-right:6px;}
.price.big{font-size:22px;margin:0 0 14px;}
.related{margin-top:34px;padding-top:16px;border-top:2px solid var(--ink);}
.related h2{font-family:Georgia,serif;font-weight:400;font-size:18px;margin:0 0 12px;}

/* ---- tables, faq */
table.attrs{border-collapse:collapse;margin:20px 0;width:100%;max-width:520px;font-size:15px;}
table.attrs caption{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:6px;}
table.attrs th,table.attrs td{border:1px solid var(--rule);padding:7px 10px;text-align:left;}
table.attrs th{background:#efe8da;font-weight:400;width:38%;}
dl.faq{margin:0;}
dl.faq dt{font-family:Georgia,serif;font-size:18px;margin:26px 0 6px;padding-bottom:5px;
  border-bottom:1px solid var(--rule);}
dl.faq dd{margin:0;}
dl.faq dd p{max-width:66ch;}

/* ---- footer */
.sitefoot{margin-top:24px;background:rgba(38,34,30,.72);border:1px solid rgba(201,189,166,.4);
  color:#efe6d6;padding:24px 32px;}
.footcols{display:flex;flex-wrap:wrap;gap:32px;}
.footcols div{flex:1 1 200px;}
.sitefoot h2{font-family:Georgia,serif;font-weight:400;font-size:15px;margin:0 0 8px;color:#fff;}
.sitefoot ul{list-style:none;margin:0;padding:0;font-size:14px;}
.sitefoot li{padding:3px 0;}
.sitefoot a{color:#f0e3d0;border-bottom:1px solid rgba(240,227,208,.28);}
.sitefoot a:hover{color:#fff;}
.copy{margin:22px 0 0;font-size:12px;letter-spacing:.08em;color:#cdbfa8;}

/* ---- tablet */
@media (max-width:900px){
  .shell{padding:0 12px 36px;}
  .cols{gap:18px;}
  .stream{padding:22px 22px;}
  .rail{flex-basis:33%;padding:16px;}
}

/* ---- mobile transformations */
@media (max-width:700px){
  body{background-image:none;background-color:var(--canvas);}
  .shell{padding:0 10px 28px;}
  .masthead{height:116px;margin-top:12px;}
  .wordmark{width:150px;}
  .brandline{font-size:24px;letter-spacing:.14em;}
  .strapline{font-size:11px;}
  .tabs a{padding:9px 13px;}
  .cols{flex-direction:column;}
  .stream,.rail{flex:1 1 auto;width:100%;}
  .stream{background:rgba(249,245,237,0.985);padding:20px 16px;}
  .rail{background:rgba(243,237,225,0.985);}
  .albums{background:rgba(249,245,237,0.985);padding:20px 16px;}
  .ptitle{font-size:28px;}
  .etitle.single{font-size:26px;}
  .leadentry .etitle{font-size:23px;}
  .plates,.plates.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px;}
  .labelindex{grid-template-columns:1fr;}
  .sitefoot{padding:20px 16px;}
  .prevnext{flex-direction:column;gap:8px;}
}