/* Decorating With Less — Optica-era centered editorial stream */
:root{
  --canvas:#FFFFFF;
  --text:#222222;
  --meta:#9B9B9B;
  --rule:#E2E2E2;
  --accent:#006661;
  --accent-bright:#00827D;
  --serif:Georgia,"PT Serif","Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font:17px/1.62 var(--serif);
}
img{max-width:100%;height:auto;}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--accent-bright);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.skip{
  position:absolute;left:-9999px;top:0;background:#fff;color:var(--accent);
  padding:8px 12px;font:12px/1 var(--sans);z-index:5;
}
.skip:focus{left:8px;top:8px;}

/* ---------- shell ---------- */
.page-canvas{max-width:1060px;margin:0 auto;padding:0 24px 48px;}
.feature-post,.stream,.tag-strip,.pager,.article,.post-nav,.index-head,.index-body{
  max-width:700px;margin-left:auto;margin-right:auto;
}

/* ---------- identity ---------- */
.identity{margin:0 -24px 0;}
.banner{display:block;width:100%;height:150px;object-fit:cover;border:0;}
.lockup{text-align:center;padding:26px 24px 20px;border-bottom:1px solid var(--rule);}
.lockup .mark{display:inline-block;border:0;}
.lockup .mark img{width:196px;height:auto;display:block;margin:0 auto 12px;}
.site-title{
  margin:0;font:400 34px/1.2 var(--serif);letter-spacing:.01em;
}
.site-title a{color:var(--text);text-decoration:none;}
.site-description{
  margin:8px 0 0;font:12px/1.4 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--meta);
}
.utility{
  text-align:center;padding:14px 0 0;border-bottom:1px solid var(--rule);
  margin:0 0 48px;
}
.utility a{
  display:inline-block;margin:0 12px 14px;font:12px/1 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px;
}
.utility a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- paint-chip metadata rule ---------- */
.meta-rule,.row-meta{
  font:12px/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--meta);
}
.meta-rule{
  margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid var(--rule);
}
.meta-rule a,.row-meta a{color:var(--meta);text-decoration:none;}
.meta-rule a:hover{color:var(--accent);}
.chip{
  display:inline-block;width:27px;height:7px;margin-right:10px;
  vertical-align:1px;
  background:linear-gradient(to right,
    var(--accent-bright) 0 33.33%,
    #66B5B1 33.33% 66.66%,
    #00413E 66.66% 100%);
}
.sep{color:var(--rule);}

/* ---------- feature + stream ---------- */
.feature-post{margin:0 auto 56px;}
.feature-title{margin:0 0 14px;font:400 42px/1.16 var(--serif);letter-spacing:-.01em;}
.feature-title a,.entry-title a,.article-title a{color:var(--text);text-decoration:none;}
.feature-title a:hover,.entry-title a:hover{color:var(--accent);}
.feature-post p{margin:0 0 18px;}
.stream-entry{padding:0 0 56px;margin:0 0 56px;border-bottom:1px solid var(--rule);}
.stream-entry:last-child{border-bottom:0;padding-bottom:0;}
.entry-title{margin:0 0 14px;font:400 26px/1.28 var(--serif);}
.entry-excerpt{margin:0 0 16px;}
.entry-more{margin:0 0 4px;font:12px/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;}
.entry-more a{text-decoration:none;border-bottom:1px solid var(--accent);}
.tag-line{
  margin:16px 0 0;font:12px/1.9 var(--sans);letter-spacing:.06em;color:var(--meta);
}
.tag-word{text-transform:uppercase;letter-spacing:.09em;margin-right:6px;}
.tag-line a,.tag-line span:not(.tag-word){
  color:var(--text);text-decoration:none;margin-right:14px;display:inline-block;
}
.tag-line a{border-bottom:1px solid var(--rule);}
.tag-line span:not(.tag-word){color:var(--meta);}
.tag-line .dot,.tag-strip .dot{color:var(--rule);margin-right:8px;display:inline-block;}
.tag-line a,.tag-line span:not(.tag-word):not(.dot){margin-right:8px;}
.tag-line a:hover{border-bottom-color:var(--accent);color:var(--accent);}
.tag-strip{
  margin:0 auto 40px;padding:20px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);text-align:center;
}
.tag-strip p{margin:0;font:12px/2 var(--sans);letter-spacing:.06em;color:var(--meta);}
.tag-strip a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);margin:0 7px;}
.tag-strip a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- pager ---------- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 auto 56px;padding:18px 0;border-bottom:1px solid var(--rule);
  font:12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
}
.pager-link{text-decoration:none;border-bottom:1px solid var(--accent);}
.pager-off{color:var(--rule);}
.pager-count{color:var(--meta);}

/* ---------- article ---------- */
.lead-media{margin:0 0 32px;}
.lead-media img{display:block;width:100%;}
.article-title{margin:0 0 14px;font:400 40px/1.18 var(--serif);letter-spacing:-.01em;}
.article-body{font-size:17px;}
.article-body p{margin:0 0 20px;}
.article-body h2{margin:40px 0 14px;font:400 24px/1.3 var(--serif);}
.article-body h3{margin:32px 0 12px;font:400 19px/1.35 var(--serif);}
.article-body h4,.article-body h5{margin:28px 0 10px;font:700 16px/1.4 var(--sans);letter-spacing:.03em;}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px;}
.article-body li{margin:0 0 8px;}
.article-body blockquote{
  margin:28px 0;padding:0 0 0 20px;border-left:3px solid var(--accent-bright);
  font-style:italic;color:#3a3a3a;
}
.article-body blockquote p:last-child{margin-bottom:0;}
.article-body img{display:block;margin:28px auto;}
.article-body a{text-decoration:underline;}
.post-nav{
  display:flex;flex-wrap:wrap;gap:24px;margin:48px auto 0;padding:28px 0 0;
  border-top:1px solid var(--rule);
}
.post-nav a{
  flex:1 1 240px;text-decoration:none;color:var(--text);font:400 17px/1.35 var(--serif);
}
.post-nav a span{
  display:block;font:12px/1.6 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);margin-bottom:4px;
}
.post-nav a:hover{color:var(--accent);}
.nav-older{text-align:right;}
.nav-archive{flex-basis:100%;text-align:center;}

/* ---------- indexes ---------- */
.index-head{margin:0 auto 36px;}
.index-head h1{margin:0 0 10px;font:400 40px/1.18 var(--serif);}
.index-lede{
  margin:0;font:12px/1.6 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--meta);
}
.archive-month{margin:0 0 40px;}
.archive-month h2{
  margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--rule);
  font:400 22px/1.3 var(--serif);
}
.row-list{list-style:none;margin:0;padding:0;}
.row-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;
  padding:12px 0;border-bottom:1px solid var(--rule);
}
.row-title{color:var(--text);text-decoration:none;flex:1 1 320px;}
.row-title:hover{color:var(--accent);}
.row-meta{flex:0 0 auto;white-space:nowrap;}
.row-meta .chip{width:18px;margin-right:8px;}
.tag-index a{
  display:inline-block;margin:0 10px 12px 0;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--rule);font:400 17px/1.5 var(--serif);
}
.tag-index a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.tag-index .count{font:11px/1 var(--sans);color:var(--meta);vertical-align:2px;margin-left:3px;}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--rule);margin-top:16px;padding:40px 24px 56px;
}
.footer-cols{
  max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.footer-col h2{
  margin:0 0 12px;font:12px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);font-weight:400;
}
.tag-cloud,.month-list{margin:0;font:13px/2.1 var(--sans);}
.tag-cloud a,.month-list a{
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);margin-right:10px;
  display:inline-block;
}
.tag-cloud a:hover,.month-list a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.colophon{margin:0 0 10px;font:14px/1.6 var(--serif);color:#4a4a4a;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .page-canvas{padding:0 20px 40px;}
  .identity{margin:0 -20px;}
  .site-footer{padding:36px 20px 48px;}
}
@media (max-width:760px){
  body{font-size:16px;line-height:1.65;}
  .banner{height:120px;}
  .lockup{padding:20px 16px 16px;}
  .lockup .mark img{width:168px;margin-bottom:10px;}
  .site-title{font-size:28px;}
  .utility{margin-bottom:36px;}
  .utility a{margin:0 9px 12px;font-size:11px;}
  .feature-title{font-size:28px;}
  .entry-title{font-size:21px;}
  .article-title,.index-head h1{font-size:28px;}
  .article-body{font-size:16px;}
  .stream-entry{padding-bottom:36px;margin-bottom:36px;}
  .feature-post{margin-bottom:36px;}
  .footer-cols{grid-template-columns:1fr;gap:28px;}
  .post-nav{gap:20px;}
  .nav-older{text-align:left;}
  .pager{flex-wrap:wrap;gap:10px;}
}
@media (max-width:480px){
  .page-canvas{padding:0 16px 36px;}
  .identity{margin:0 -16px;}
  .banner{height:96px;}
  .site-title{font-size:26px;}
  .lead-media,.article-body p > img{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);max-width:none;}
  .lead-media img{margin:0;width:100%;max-width:100%;}
  .pager{font-size:11px;}
  .row-list li{gap:4px;}
  .row-meta{flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}