/* Blog archive, October 2026. Scoped to avoid changing service/article layouts. */
.blog-archive { --archive-ink:#252621; --archive-muted:#62655f; --archive-accent:#a95100; width:min(1180px,calc(100% - 64px)); padding-bottom:0; color:var(--archive-ink); }
.blog-archive [hidden] { display:none!important; }
/* Older archive/related cards must also be readable without an animation script. */
.blog-archive .reveal,.article-page .related-grid .reveal { opacity:1; transform:none; }
.archive-skip { position:fixed; top:12px; right:12px; z-index:100; padding:12px 20px; background:#252621; color:#fff; border-radius:8px; transform:translateY(-180%); }
.archive-skip:focus { transform:none; }
.blog-archive :focus-visible { outline:3px solid #ad5800; outline-offset:5px; }
.blog-archive .editorial-nav { height:92px; border-color:#e6e7e0; }
.blog-archive .editorial-brand img { width:138px; }
.blog-archive .editorial-contact { border-radius:8px; padding:12px 20px; }
.blog-archive .editorial-contact span { margin-inline-start:18px; color:#ffb75c; }
.blog-archive .archive-header { grid-template-columns:1.5fr 1fr; gap:60px; padding:52px 0 44px; }
.blog-archive .section-kicker { color:var(--archive-accent); font-size:13px; letter-spacing:0; }
.blog-archive .archive-heading h1 { font-size:clamp(40px,4.8vw,68px); letter-spacing:-.035em; line-height:1.25; margin:18px 0 16px; }
.blog-archive .archive-heading h1 span { color:#df7200; white-space:nowrap; }
.blog-archive .archive-heading>p:last-of-type { max-width:570px; color:var(--archive-muted); font-size:16px; line-height:1.95; }
.archive-explore { display:inline-flex; align-items:center; gap:18px; margin-top:24px; font-size:13px; font-weight:800; }
.archive-explore span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #dfded5; border-radius:50%; }
.blog-archive .archive-mark { position:relative; width:100%; max-width:355px; min-height:250px; aspect-ratio:auto; border-radius:4px 44px 4px 4px; transform:none; box-shadow:none; overflow:hidden; background:#f6f3e9; color:#252621; gap:14px; border:1px solid #e9e5d8; }
.blog-archive .archive-mark:before { content:""; position:absolute; width:240px; height:240px; border:1px solid #ded8c6; border-radius:50%; left:-105px; bottom:-130px; box-shadow:0 0 0 28px #f6f3e9,0 0 0 29px #e9e3d2; }
.blog-archive .archive-mark>b { position:relative; font-size:82px; letter-spacing:-.07em; }
.blog-archive .archive-mark>b>span { font-size:65px; color:#e57700; margin-left:12px; }
.blog-archive .archive-mark>span { color:#626356; font-size:12px; position:relative; }
.blog-archive .archive-intro { padding:17px 0; margin:0; color:var(--archive-muted); font-size:13px; }
.blog-archive .archive-intro>span { color:var(--archive-accent); }
.archive-tools { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; padding:28px 0; }
.archive-search { flex:1 1 260px; max-width:340px; }
.archive-search label { display:block; font-size:12px; font-weight:700; margin-bottom:8px; }
.archive-search>div { position:relative; }
.archive-search input { width:100%; min-height:46px; padding:11px 14px 11px 40px; background:#fafaf7; color:#252621; border:1px solid #d8d9d0; border-radius:8px; font:inherit; font-size:13px; }
.archive-search input::placeholder { color:#73766b; }
.archive-search>div>span { position:absolute; left:14px; top:6px; font-size:25px; pointer-events:none; }
.archive-topics { display:flex; gap:8px; flex-wrap:wrap; flex:1 1 520px; justify-content:flex-end; }
.archive-topics button { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:9px 13px; border:1px solid #dedfd7; border-radius:8px; background:#fff; color:#52564b; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.archive-topics button>span { color:inherit; opacity:.8; font-size:11px; }
.archive-topics button[aria-pressed=true] { color:#fff; background:#2c3026; border-color:#2c3026; }
.archive-topics button:hover { border-color:#626b57; }
.archive-list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:28px 0 20px; }
.archive-list-heading h2 { font-size:23px; margin:0; letter-spacing:-.02em; }
.archive-list-heading p { color:var(--archive-muted); font-size:12px; margin:0; }
.blog-archive .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:0; scroll-margin-top:24px; }
.blog-archive .archive-grid .article-card { border:1px solid #e1e3d9; border-radius:12px; box-shadow:none; display:flex; flex-direction:column; min-width:0; transition:box-shadow .2s,border-color .2s; }
.blog-archive .article-card:hover { transform:none; border-color:#b4baa8; box-shadow:0 8px 24px #2526210a; }
.blog-archive .archive-grid .archive-featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1.05fr; min-height:310px; }
.blog-archive .archive-grid .article-copy { padding:28px; display:flex; flex-direction:column; flex:1; }
.blog-archive .archive-grid .archive-featured .article-copy { padding:36px; justify-content:center; }
.blog-archive .archive-grid .article-copy small { color:var(--archive-accent); font-size:12px; font-weight:700; }
.blog-archive .archive-grid .article-copy h3 { font-size:23px; line-height:1.6; margin:14px 0 12px; }
.blog-archive .archive-grid .archive-featured .article-copy h3 { font-size:29px; }
.article-copy .article-title-link { display:inline; font-size:inherit; font-weight:inherit; line-height:inherit; }
.article-title-link:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.blog-archive .article-copy p { color:var(--archive-muted); font-size:14px; line-height:1.9; margin:0 0 24px; }
.card-reading-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid #e9eae3; }
.card-reading-row time { color:#65695d; font-size:12px; }
.card-reading-row .card-read-link { font-size:13px; }
.blog-archive .article-visual { height:210px; min-height:210px; background:#e9eedf; color:#3b5038; }
.blog-archive .archive-featured .article-visual { height:100%; min-height:310px; }
.blog-archive .article-visual:before { content:""; position:absolute; width:220px; height:220px; border:1px solid currentColor; opacity:.14; border-radius:50%; transform:none; left:-40px; bottom:-100px; box-shadow:0 0 0 28px transparent,0 0 0 29px currentColor; }
.blog-archive .article-visual:after { content:""; position:absolute; width:72px; height:72px; border:1px solid currentColor; opacity:.16; transform:rotate(-20deg); right:42px; top:56px; border-radius:12px; }
.article-visual .card-visual-symbol { font-size:52px; letter-spacing:-.05em; direction:ltr; }
.article-visual .card-visual-topic { position:absolute; top:20px; right:22px; font-size:11px; font-weight:500; letter-spacing:0; }
.article-visual .card-visual-brand { position:absolute; bottom:18px; left:22px; font-size:13px; direction:ltr; }
.card-visual-brand i { font-style:normal; margin-left:8px; }
.blog-archive .article-visual span { color:inherit; }
.blog-archive .visual-app { background:#e7ecdd; color:#354c32; }
.blog-archive .visual-web { background:#f7e9d4; color:#8a4a13; }
.blog-archive .visual-security { background:#252d28; color:#d1dfc4; }
.blog-archive .visual-ux { background:#e8e7f2; color:#555173; }
.blog-archive .visual-ai { background:#e0eceb; color:#315b58; }
.blog-archive.archive-filtered .archive-grid .archive-featured { grid-column:auto; display:flex; min-height:0; }
.blog-archive.archive-filtered .archive-featured .article-visual { height:210px; min-height:210px; }
.blog-archive.archive-filtered .archive-featured .article-copy { padding:28px; }
.blog-archive.archive-filtered .archive-featured .article-copy h3 { font-size:23px; }
.archive-empty { text-align:center; padding:65px 20px; background:#fafaf7; border:1px dashed #c7ccbd; border-radius:12px; }
.archive-empty h2 { font-size:24px; }
.archive-empty p { color:var(--archive-muted); margin:12px 0 20px; }
.archive-empty button { padding:12px 20px; min-height:44px; background:#2c3026; color:#fff; border:0; border-radius:8px; cursor:pointer; font:inherit; }
.archive-footer { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:38px; margin:64px 0 0; background:#f5f5ee; border:1px solid #e1e3d8; border-radius:12px; }
.archive-footer h2 { font-size:30px; line-height:1.5; margin:12px 0; }
.archive-footer h2 span { color:var(--archive-accent); }
.archive-footer p:last-child { color:var(--archive-muted); font-size:14px; max-width:520px; margin:0; line-height:1.9; }
.archive-footer-actions { display:grid; justify-items:center; flex-shrink:0; gap:18px; font-size:13px; font-weight:700; }
.archive-footer .button { background:#2c3026; color:#fff; border-radius:8px; padding:14px 22px; font-size:14px; }
.archive-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px 0; margin-top:28px; border-top:1px solid #e6e7e0; font-size:12px; color:var(--archive-muted); }
.archive-bottom p { margin:0; }
@media(max-width:1000px) {
  .blog-archive .archive-header { gap:30px; grid-template-columns:1.5fr 1fr; }
  .blog-archive .archive-mark { display:grid; min-height:230px; }
  .archive-topics { justify-content:flex-start; }
  .archive-search { max-width:none; }
}
@media(max-width:700px) {
  .blog-archive { width:calc(100% - 32px); }
  .blog-archive .editorial-nav { height:78px; }
  .blog-archive .editorial-brand img { width:112px; }
  .blog-archive .editorial-nav>div>a[href='/'] { display:inline; font-size:12px; }
  .blog-archive .editorial-contact { padding:11px 12px; }
  .blog-archive .editorial-contact span { margin-inline-start:7px; }
  .blog-archive .archive-header { display:block; padding:34px 0 30px; }
  .blog-archive .archive-heading h1 { font-size:42px; line-height:1.3; }
  .blog-archive .archive-heading>p:last-of-type { font-size:14px; }
  .blog-archive .archive-mark { display:none; }
  .blog-archive .archive-intro { flex-direction:row; font-size:12px; }
  .blog-archive .archive-intro p { max-width:160px; }
  .archive-tools { padding:22px 0 4px; gap:18px; }
  .archive-topics { gap:7px; }
  .archive-topics button { font-size:12px; padding:8px 11px; }
  .archive-list-heading { align-items:flex-start; }
  .archive-list-heading h2 { font-size:21px; }
  .archive-list-heading p { max-width:145px; text-align:left; line-height:1.7; }
  .blog-archive .archive-grid { grid-template-columns:1fr; gap:20px; }
  .blog-archive .archive-grid .archive-featured { grid-column:auto; display:flex; min-height:0; }
  .blog-archive .archive-grid .article-visual,.blog-archive .archive-grid .archive-featured .article-visual { height:190px; min-height:190px; }
  .blog-archive .archive-grid .article-copy,.blog-archive .archive-grid .archive-featured .article-copy { padding:23px; }
  .blog-archive .archive-grid .article-copy h3,.blog-archive .archive-grid .archive-featured .article-copy h3 { font-size:22px; }
  .archive-footer { flex-direction:column; align-items:stretch; padding:26px; margin-top:40px; }
  .archive-footer h2 { font-size:27px; }
  .archive-footer-actions { justify-items:stretch; text-align:center; }
  .archive-bottom { flex-wrap:wrap; font-size:11px; }
  .archive-bottom p { display:none; }
}