/* Blog archive and article reading pages. Shared site foundations live in site.css. */
.hf-blog-intro {
  max-width:650px;
  margin:24px auto 0;
  color:var(--hf-muted);
  font-size:17px;
  line-height:1.8;
  text-wrap:pretty;
}

.hf-archive-tools {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(140px,.4fr) minmax(170px,.5fr) auto;
  align-items:end;
  gap:18px;
  padding:28px;
  background:var(--hf-paper);
  border:1px solid var(--hf-line);
  border-radius:14px;
  box-shadow:0 6px 24px #263f4e05;
}

.hf-archive-field {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:8px;
  color:var(--hf-ink);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}

.hf-archive-field input,
.hf-archive-field select {
  display:block;
  width:100%;
  min-width:0;
  min-height:49px;
  margin:0;
  padding:11px 13px;
  border:1px solid #c8d7dd;
  border-radius:6px;
  background:#fff;
  color:var(--hf-ink);
  font:400 15px/1.65 var(--hf-sans);
}

.hf-archive-field input::placeholder {
  color:#70818b;
  opacity:1;
}

.hf-archive-field select:focus-visible {
  outline:3px solid #de9d30;
  outline-offset:5px;
}

.hf-archive-tools .hf-button {
  min-height:49px;
  background:var(--hf-blue-dark);
}

.hf-archive-tools .hf-button:hover {
  background:#244d69;
}

.hf-archive-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  min-height:76px;
  padding-block:20px;
  color:var(--hf-muted);
  font-size:14px;
}

.hf-archive-summary p,
.hf-archive-summary p+p {
  margin:0;
}

.hf-archive-summary a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.hf-archive-summary button {
  padding:4px 0;
  border:0;
  background:none;
  color:var(--hf-blue-dark);
  text-decoration:underline;
  text-underline-offset:4px;
}

.hf-archive-grid {
  align-items:stretch;
}

.hf-archive-grid>.hf-blog-card:last-child:nth-child(3) {
  grid-column:auto;
  max-width:none;
  margin:0;
}

.hf-blog-placeholder {
  --hf-placeholder-base:#dbe8ee;
  --hf-placeholder-light:#edf4f5;
  --hf-placeholder-ink:#38647d;
  position:relative;
  display:flex;
  width:100%;
  aspect-ratio:1;
  isolation:isolate;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:22px;
  color:var(--hf-placeholder-ink);
  background:
    radial-gradient(circle at 90% 7%,#ffffff90 0,transparent 44%),
    linear-gradient(145deg,var(--hf-placeholder-light),var(--hf-placeholder-base));
  text-decoration:none;
}

.hf-blog-card>a.hf-blog-placeholder {
  display:flex;
}

.hf-blog-placeholder::before,
.hf-blog-placeholder::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
}

.hf-blog-placeholder::before {
  width:65%;
  aspect-ratio:1;
  border:1px solid currentColor;
  opacity:.16;
  box-shadow:0 0 0 24px #ffffff45,0 0 0 25px #ffffff58;
  transform:translate(0,-3%);
}

.hf-blog-placeholder::after {
  width:75%;
  aspect-ratio:1;
  right:-41%;
  bottom:-39%;
  border:1px solid currentColor;
  opacity:.18;
  box-shadow:0 0 0 17px #ffffff60,0 0 0 18px currentColor;
}

.hf-blog-placeholder>i {
  position:relative;
  display:block;
  font-size:clamp(52px,5vw,68px);
  line-height:1;
  filter:drop-shadow(0 5px 0 #ffffff35);
  transition:transform .3s ease;
}

.hf-blog-placeholder__label {
  max-width:80%;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.5;
  text-align:center;
  text-transform:uppercase;
}

.hf-blog-placeholder--blue {
  --hf-placeholder-base:#dbe8ee;
  --hf-placeholder-light:#edf4f5;
  --hf-placeholder-ink:#38647d;
}

.hf-blog-placeholder--sage {
  --hf-placeholder-base:#dce5db;
  --hf-placeholder-light:#f0f3e9;
  --hf-placeholder-ink:#537461;
}

.hf-blog-placeholder--sand {
  --hf-placeholder-base:#eee1c8;
  --hf-placeholder-light:#faf4e8;
  --hf-placeholder-ink:#93723f;
}

.hf-blog-placeholder--rose {
  --hf-placeholder-base:#ebdeda;
  --hf-placeholder-light:#f7efea;
  --hf-placeholder-ink:#976f69;
}

.hf-blog-card:hover .hf-blog-placeholder>i {
  transform:translateY(-3px);
}

.hf-blog-card__meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 12px;
  width:100%;
  margin-bottom:13px;
  color:#687c87;
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.6;
  text-transform:uppercase;
}

.hf-blog-card .hf-blog-card__meta time {
  margin:0;
  font:inherit;
}

.hf-blog-card .hf-blog-card__author {
  margin:0 0 16px;
  color:#5d737f;
  font-size:12px;
  font-weight:500;
  line-height:1.6;
}

.hf-blog-card .hf-blog-card__author i {
  margin-right:6px;
  color:#80979f;
  font-size:11px;
}

.hf-archive-grid .hf-blog-card h3 {
  overflow-wrap:anywhere;
  text-wrap:pretty;
}

.hf-archive-grid .hf-blog-card p:not(.hf-blog-card__author) {
  margin-top:0;
}

.hf-archive-pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:48px;
}

.hf-page-link {
  display:inline-flex;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid #cad8dd;
  border-radius:6px;
  background:var(--hf-paper);
  color:var(--hf-blue-dark);
  font-size:14px;
  line-height:1.5;
  transition:border-color .2s,background .2s;
}

.hf-page-link:hover {
  border-color:var(--hf-blue-dark);
  background:#eaf1f4;
  text-decoration:none;
}

.hf-page-link[aria-current="page"] {
  border-color:var(--hf-blue-dark);
  background:var(--hf-blue-dark);
  color:white;
  font-weight:600;
}

.hf-page-ellipsis {
  min-width:20px;
  color:var(--hf-muted);
  text-align:center;
}

.hf-archive-empty,
.hf-archive-error {
  padding:48px 24px;
  border:1px solid var(--hf-line);
  border-radius:14px;
  background:var(--hf-paper);
  color:var(--hf-muted);
  text-align:center;
}

.hf-archive-empty h2,
.hf-archive-error h2 {
  margin-bottom:18px;
  color:var(--hf-ink);
  font-size:30px;
}

.hf-archive-empty a,
.hf-archive-error a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.hf-article-banner h1 {
  max-width:960px;
  font-size:clamp(31px,3.5vw,49px);
  line-height:1.25;
  overflow-wrap:anywhere;
}

.hf-article-meta {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:25px;
  color:#5d737f;
  font-size:14px;
  line-height:1.6;
}

.hf-article-meta i {
  margin-right:7px;
  color:#718e9c;
  font-size:12px;
}

.hf-article-back {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:32px;
  font-size:13px;
  font-weight:500;
}

.hf-article-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  align-items:start;
  gap:64px;
  margin-inline:auto;
}

.hf-article-aside {
  color:var(--hf-muted);
  font-size:14px;
  line-height:1.7;
}

.hf-article-aside .hf-blog-placeholder {
  margin-bottom:24px;
  border:1px solid #dce5e2;
  border-radius:14px;
}

.hf-article-aside .hf-blog-placeholder>i {
  font-size:52px;
}

.hf-article-aside .hf-blog-placeholder__label {
  font-size:9px;
  letter-spacing:.13em;
}

.hf-article-aside p+p {
  margin-top:8px;
}

.hf-article-aside strong {
  color:var(--hf-ink);
  font-weight:600;
}

.hf-article-content {
  min-width:0;
  max-width:72ch;
  color:#435d69;
  font-size:18px;
  line-height:1.9;
  overflow-wrap:anywhere;
}

.hf-article-content p+p {
  margin-top:25px;
}

.hf-article-content h2,
.hf-article-content h3 {
  margin:42px 0 20px;
  color:var(--hf-ink);
  font-size:30px;
  line-height:1.35;
}

.hf-article-content h3 {
  font-size:24px;
}

.hf-article-content h2:first-child,
.hf-article-content h3:first-child {
  margin-top:0;
}

.hf-article-content ul,
.hf-article-content ol {
  margin:24px 0;
  padding-left:1.5em;
}

.hf-article-content li+li {
  margin-top:10px;
}

.hf-article-content li::marker {
  color:var(--hf-gold);
}

.hf-article-content blockquote {
  margin:30px 0;
  padding:6px 0 6px 25px;
  border-left:3px solid var(--hf-gold);
  color:#496574;
  font-family:var(--hf-serif);
  font-size:22px;
  line-height:1.7;
}

.hf-article-content a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.hf-article-navigation {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--hf-line);
}

.hf-article-nav-link {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:24px;
  border:1px solid var(--hf-line);
  border-radius:12px;
  background:var(--hf-paper);
  color:var(--hf-ink);
  font-family:var(--hf-serif);
  font-size:20px;
  line-height:1.5;
  overflow-wrap:anywhere;
  transition:background .2s,border-color .2s;
}

.hf-article-nav-link:hover {
  border-color:#a8c1ce;
  background:#edf4f5;
  text-decoration:none;
}

.hf-article-nav-link>span:first-child,
.hf-article-nav-link>small {
  color:var(--hf-blue-dark);
  font-family:var(--hf-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  line-height:1.6;
  text-transform:uppercase;
}

@media(max-width:1050px) {
  .hf-archive-tools {
    grid-template-columns:minmax(180px,1fr) minmax(120px,.55fr) minmax(150px,.65fr);
  }
  .hf-archive-tools .hf-button {
    grid-column:1/-1;
    justify-self:start;
  }
  .hf-article-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:40px;
  }
}

@media(max-width:800px) {
  .hf-archive-tools {
    grid-template-columns:1fr 1fr;
    padding:22px;
  }
  .hf-archive-field:first-child {
    grid-column:1/-1;
  }
  .hf-article-layout {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }
  .hf-article-aside {
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    align-items:center;
    gap:10px 24px;
  }
  .hf-article-aside .hf-blog-placeholder {
    grid-column:1;
    grid-row:1/5;
    margin:0;
    gap:13px;
  }
  .hf-article-aside>p {
    grid-column:2;
    margin:0;
  }
  .hf-article-aside .hf-blog-placeholder>i {
    font-size:36px;
  }
  .hf-article-aside .hf-blog-placeholder__label {
    font-size:7px;
    letter-spacing:.08em;
  }
  .hf-article-content {
    max-width:none;
    font-size:17px;
  }
}

@media(max-width:600px) {
  .hf-archive-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .hf-archive-tools {
    gap:16px 12px;
    padding:20px;
  }
  .hf-archive-tools .hf-button {
    width:100%;
  }
  .hf-blog-intro {
    font-size:16px;
  }
  .hf-blog-placeholder>i {
    font-size:60px;
  }
  .hf-archive-pagination {
    gap:6px;
  }
  .hf-page-link {
    min-width:40px;
    padding:9px 11px;
  }
  .hf-article-meta {
    gap:8px 15px;
    font-size:13px;
  }
  .hf-article-navigation {
    grid-template-columns:minmax(0,1fr);
    margin-top:42px;
  }
  .hf-article-nav-link {
    font-size:19px;
  }
}

@media(max-width:380px) {
  .hf-archive-tools {
    grid-template-columns:minmax(0,1fr);
  }
  .hf-archive-field:first-child,
  .hf-archive-tools .hf-button {
    grid-column:auto;
  }
  .hf-article-aside {
    grid-template-columns:110px minmax(0,1fr);
    column-gap:18px;
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hf-blog-placeholder>i,
  .hf-page-link,
  .hf-article-nav-link {
    transition:none;
  }
  .hf-blog-card:hover .hf-blog-placeholder>i {
    transform:none;
  }
}

@media print {
  .hf-archive-tools,
  .hf-archive-pagination,
  .hf-article-back,
  .hf-article-aside,
  .hf-article-navigation {
    display:none;
  }
  .hf-article-layout {
    display:block;
  }
  .hf-article-content {
    max-width:none;
    color:#222;
    font-size:12pt;
  }
}