/* ==========================================================================
   BLOG
   Index, category pages and the article body.
   ========================================================================== */

/* ==========================================================================
   BLOG — index, category and post
   Shares every token and component with the rest of the site. Only what the
   guide pages do not already have is defined here.
     [CSS] this block -> assets/css/blog.css
   ========================================================================== */
/* --- Post meta line ------------------------------------------------------ */
.pmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.5rem,1vw,.85rem);
  margin:0 0 clamp(.9rem,1.7vw,1.35rem);padding:0;list-style:none;
  font-size:clamp(.6875rem,.8vw,.84375rem);
  color:rgba(247,244,239,.82);
}
.pmeta a{color:var(--tan);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.pmeta a:hover,.pmeta a:focus-visible{color:#F3DFC3;border-bottom-color:rgba(243,223,195,.6)}
.pmeta i{display:block;width:3px;height:3px;border-radius:50%;
  background:rgba(247,244,239,.5);flex:0 0 auto}
/* --- Article body -------------------------------------------------------- */
.article{
  background:var(--sand-lite);
  padding:clamp(2.5rem,4.6vw,5rem) var(--gutter) var(--section-y);
}
.article__inner{
  display:grid;
  grid-template-columns:minmax(0,min(42rem,100%)) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,5rem);
  align-items:start;
}
.article__body{min-width:0}
.article__body > *{max-width:40rem}
.article__body p{
  margin:0 0 clamp(1rem,1.6vw,1.4rem);
  font-size:clamp(1rem,1.13vw,1.0625rem);
  line-height:1.72;color:var(--text-mid);
}
.article__body p:first-child{
  font-size:clamp(1.125rem,1.5vw,1.4375rem);
  line-height:1.56;color:var(--ink);
  margin-bottom:clamp(1.25rem,2.2vw,1.9rem);
}
.article__body h2{
  margin:clamp(1.9rem,3.2vw,2.9rem) 0 clamp(.6rem,1.1vw,.95rem);
  font-weight:400;
  font-size:clamp(1.3125rem,2vw,1.9375rem);
  line-height:1.16;letter-spacing:-.012em;color:var(--ink);
}
.article__body b{font-weight:600;color:var(--ink)}
.article__body ul{
  margin:0 0 clamp(1rem,1.6vw,1.4rem);padding:0;list-style:none;
  font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.66;color:var(--text-mid);
}
.article__body ul li{position:relative;padding-left:1.2em;margin-bottom:.55em}
.article__body ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:rgba(138,113,70,.85);
}
.article__body a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.article__body a:hover,.article__body a:focus-visible{
  color:var(--brand-deep);border-bottom-color:var(--brand-deep);
}
/* a caveat, set apart from the argument rather than dressed up */
.article__note{
  margin:clamp(1.5rem,2.6vw,2.25rem) 0;
  padding:clamp(.9rem,1.6vw,1.3rem) clamp(1rem,1.8vw,1.5rem);
  border-left:2px solid var(--tan);
  background:rgba(255,255,255,.55);
  font-size:clamp(.9375rem,1.02vw,1rem);
  line-height:1.62;color:var(--text-body);
}
.article__note b{color:var(--ink)}
/* --- Sidebar ------------------------------------------------------------- */
.aside{position:sticky;top:calc(var(--header-h) + 1.25rem);min-width:0}
.aside__box{
  padding:clamp(1.1rem,1.9vw,1.6rem);
  border:1px solid #E7E3DC;border-radius:10px;background:#FCF9F4;
}
.aside__box + .aside__box{margin-top:clamp(.85rem,1.5vw,1.25rem)}
.aside__label{
  margin:0 0 clamp(.6rem,1.1vw,.9rem);
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}
.aside__list{list-style:none;margin:0;padding:0;
  font-size:clamp(.875rem,.99vw,.96875rem);line-height:1.5}
.aside__list li + li{margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid rgba(120,105,85,.22)}
.aside__list a{color:var(--ink);text-decoration:none;
  transition:color .25s var(--ease)}
.aside__list a:hover,.aside__list a:focus-visible{color:var(--brand)}
/* --- Author -------------------------------------------------------------- */
.author{
  background:var(--sand);
  padding:clamp(2.25rem,4vw,4rem) var(--gutter);
}
.author__inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.2vw,2rem);align-items:center;max-width:52rem;
}
.author__face{
  width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;
  overflow:clip;background:#D9D2C8;
}
.author__face img{width:100%;height:100%;object-fit:cover;display:block}
.author__name{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.1875rem,1.6vw,1.5rem);line-height:1.2;color:var(--ink);
}
.author__role{
  margin:.2rem 0 0;font-size:clamp(.6875rem,.8vw,.84375rem);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8A7146;
}
.author__bio{
  margin:clamp(.55rem,1vw,.8rem) 0 0;max-width:56ch;
  font-size:clamp(.9375rem,1.02vw,1rem);line-height:1.62;color:var(--text-body);
}
/* --- Post cards (index and category) ------------------------------------- */
.plist{
  background:var(--sand-lite);
  padding:clamp(2rem,3.6vw,3.75rem) var(--gutter) var(--section-y);
}
.plist__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2.2vw,2.25rem);
}
.pcard{position:relative;min-width:0;display:flex;flex-direction:column}
.pcard__media{
  position:relative;aspect-ratio:16/10;border-radius:10px;
  overflow:clip;background:#0B2238;margin-bottom:clamp(.8rem,1.4vw,1.15rem);
}
.pcard__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pcard:hover .pcard__media img,.pcard:focus-within .pcard__media img{transform:scale(1.05)}
.pcard__cat{
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#8A7146;
}
.pcard__title{
  margin:clamp(.35rem,.7vw,.55rem) 0 0;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.125rem,1.45vw,1.4375rem);
  line-height:1.2;letter-spacing:-.006em;color:var(--ink);
}
.pcard__title a{color:inherit;text-decoration:none}
.pcard__title a::after{content:"";position:absolute;inset:0}
.pcard__note{
  margin:clamp(.45rem,.8vw,.65rem) 0 0;
  font-size:clamp(.875rem,.99vw,.96875rem);line-height:1.56;color:var(--text-body);
}
.pcard__read{
  margin:auto 0 0;padding-top:clamp(.7rem,1.2vw,1rem);
  font-size:clamp(.6875rem,.78vw,.8125rem);color:var(--text-muted);
}
/* --- Category strip ------------------------------------------------------ */
.cstrip{
  background:var(--sand-lite);
  padding:clamp(1.75rem,3vw,3rem) var(--gutter) 0;
}
.cstrip__list{
  list-style:none;margin:0;padding:0 0 clamp(1.25rem,2.2vw,1.9rem);
  display:flex;flex-wrap:wrap;gap:clamp(.5rem,1vw,.85rem);
  border-bottom:1px solid var(--line);
}
.cstrip__list a{
  display:inline-block;
  padding:.5em 1.05em;border:1px solid rgba(120,105,85,.34);border-radius:999px;
  font-size:clamp(.8125rem,.93vw,.9375rem);
  color:var(--text-body);text-decoration:none;background:rgba(255,255,255,.55);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.cstrip__list a:hover,.cstrip__list a:focus-visible,.cstrip__list a[aria-current="page"]{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
@media (max-width:1000px){
.plist__grid{grid-template-columns:repeat(2,1fr)}
.article__inner{grid-template-columns:1fr}
.aside{position:static}
.article__body > *{max-width:none}
}
@media (max-width:620px){
.plist__grid{grid-template-columns:1fr}
.author__inner{grid-template-columns:1fr;gap:clamp(.85rem,2vw,1.1rem)}
}
@media (prefers-reduced-motion:reduce){
.pcard__media img{transition:none}
}