/* Success is Easy - single local stylesheet. No remote font, script or image. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#ffffff;color:#1a1a1a;
  font:17px/1.65 "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:#2f6e7d}
a:focus-visible,.menu a:focus-visible{outline:3px solid #2f6e7d;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#ffffff;color:#1a1a1a;padding:10px 14px;z-index:5}
.skip:focus{left:8px;top:8px}

.shell{max-width:1040px;margin:0 auto;padding:0 24px}

/* ---- text-only masthead ---- */
.masthead{padding:44px 0 18px}
.masthead .title{
  font:normal 42px/1.15 Georgia,"Times New Roman",serif;
  margin:0;letter-spacing:-0.01em;
}
.masthead .title a{color:#1a1a1a;text-decoration:none}
.masthead .tagline{margin:10px 0 0;font-size:15px;color:#6a6a6a}
.masthead .accentrule{margin-top:20px;height:2px;background:#2f6e7d;width:64px}

/* ---- light page menu ---- */
.menu{border-top:1px solid #e2e0dc;border-bottom:1px solid #e2e0dc;margin-top:22px}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.menu li{margin:0}
.menu a{
  display:block;padding:12px 16px 12px 0;color:#6a6a6a;text-decoration:none;
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
}
.menu a:hover{color:#2f6e7d}
.menu a[aria-current="page"]{color:#1a1a1a}

/* ---- 64/36 split ---- */
.layout{display:flex;gap:44px;align-items:flex-start;padding:36px 0 8px}
.column{flex:1 1 auto;min-width:0}
.rail{flex:0 0 33%;max-width:33%;min-width:0}

/* ---- the repeated date-line / title / hairline motif ---- */
.dateline{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a6a6a;
  margin:0 0 6px;
}
.entry{padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid #e2e0dc}
.entry::after{content:"";display:table;clear:both}
.entry:last-child{border-bottom:0}
.entry h2{
  font:normal 24px/1.3 Georgia,"Times New Roman",serif;margin:0;
  padding-bottom:10px;border-bottom:1px solid #e2e0dc;
}
.entry h2 a{color:#1a1a1a;text-decoration:none}
.entry h2 a:hover{color:#2f6e7d}
.entry p{margin:14px 0 0;max-width:66ch}
.entry.featured h2{font-size:30px}
.entry.featured .jacket{float:left;width:150px;margin:16px 24px 8px 0}

.column h1{
  font:normal 32px/1.25 Georgia,"Times New Roman",serif;margin:0;
  padding-bottom:12px;border-bottom:1px solid #e2e0dc;
}
.doc{padding-top:4px}
.doc p,.doc li,.doc dd{max-width:66ch}
.doc p{margin:18px 0}
.doc h2{
  font:normal 24px/1.3 Georgia,"Times New Roman",serif;margin:34px 0 0;
  padding-bottom:10px;border-bottom:1px solid #e2e0dc;
}
/* a date line introduces its own block, so it needs the section gap and the
   heading that follows it must sit tight underneath */
.doc .dateline{margin-top:38px}
.doc h1 + .dateline{margin-top:22px}
.doc .dateline + h2{margin-top:0}
.doc ul{margin:16px 0;padding-left:20px}
.doc li{margin:7px 0}
.doc dl{margin:18px 0}
.doc dt{margin:20px 0 4px;font-weight:600}
.doc dd{margin:0}
.doc .jacket{width:190px;margin:18px 0}
.doc blockquote{
  margin:22px 0;padding:0 0 0 18px;border-left:2px solid #e2e0dc;
  font-style:italic;color:#333;max-width:64ch;
}
.doc blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:#6a6a6a}
.doc address{font-style:normal;margin:14px 0}
.doc .sig{margin:18px 0;font-style:italic;color:#6a6a6a}
.doc .linkrow{list-style:none;margin:16px 0;padding:0}
.doc .linkrow li{margin:6px 0}
.backrow{
  margin-top:34px;padding-top:14px;border-top:1px solid #e2e0dc;
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a6a6a;
}
.backrow a{margin-right:18px}

/* ---- understated widget headings ---- */
.widget{margin:0 0 30px}
.widget h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a6a6a;
  margin:0 0 10px;padding:6px 10px;background:#f6f6f4;font-weight:600;
}
.widget p{margin:10px 0;font-size:15px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{border-bottom:1px solid #e2e0dc;padding:8px 0;font-size:15px}
.widget li:last-child{border-bottom:0}
.widget .jacket{width:112px;margin:4px 0 10px}
.widget .more{font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* ---- plain footer ---- */
.foot{border-top:1px solid #e2e0dc;margin-top:30px;padding:26px 0 40px}
.footcols{display:flex;gap:44px;flex-wrap:wrap}
.footcols section{flex:1 1 240px;min-width:0}
.footcols h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a6a6a;
  margin:0 0 8px;font-weight:600;
}
.footcols ul{list-style:none;margin:0;padding:0}
.footcols li{padding:4px 0;font-size:14px}
.copyline{
  margin-top:26px;text-align:center;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:#6a6a6a;
}
.copyline a{margin-left:14px}

/* ---- mobile transformations ---- */
@media (max-width:768px){
  .shell{padding:0 16px}
  .layout{display:block;padding-top:26px}
  .rail{max-width:none;margin-top:34px}
  .masthead{padding:26px 0 14px}
  .masthead .title{font-size:30px}
  .menu a{padding:14px 18px 14px 0;line-height:1.2;min-height:44px}
  .entry.featured h2{font-size:24px}
  .entry h2{font-size:20px}
  .column h1{font-size:26px}
  .doc h2{font-size:20px}
  .entry.featured .jacket{float:none;width:100%;margin:16px 0}
  .doc .jacket{width:100%}
  .footcols{display:block}
  .footcols section{margin-bottom:22px}
}
