/* Blog index + article (blog.html, blog-post.html). Builds on site.css tokens. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero + search ---------- */
.blog-hero .hero-bottom{align-items:flex-end}
.blog-search{min-width:300px;flex:0 1 380px}
.blog-search label{display:block;font-size:12px;color:#8c5530;margin-bottom:10px}
.blog-search input{width:100%;padding:14px 0;border:0;border-bottom:1px solid #8c5530;background:transparent;color:var(--ink);font-size:17px;border-radius:0;-webkit-appearance:none;appearance:none}
.blog-search input::placeholder{color:#9a8370}
.blog-search input:focus-visible{outline:none;border-bottom-width:2px;padding-bottom:13px}

/* ---------- featured ---------- */
.blog-featured{padding:0 6%}
.blog-feature{display:grid;grid-template-columns:1.25fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blog-feature-copy{padding:56px 6% 56px 0;display:flex;flex-direction:column;align-items:flex-start}
.blog-feature h3{font-size:clamp(32px,3.4vw,54px);font-weight:400;line-height:1.08;letter-spacing:-.045em;max-width:16em}
.blog-feature h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
.blog-feature h3 a:hover{background-size:100% 1px}
.blog-feature-excerpt{margin-top:24px;font-size:17px;line-height:1.75;color:var(--muted);max-width:36em}
.blog-feature .blog-card-foot{margin:26px 0 32px}
.blog-feature-cover img{width:100%;height:100%;object-fit:cover}
.blog-feature-plate{background:#e1c6ac;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:40px;min-height:340px}
.blog-feature-plate span{font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.06em;color:#51321e;max-width:6em}
.blog-feature-plate b{font-weight:400;font-size:12px;color:#624630;border-top:1px solid #b5967880;padding-top:16px}

/* ---------- index head + filters ---------- */
.blog-index{padding:80px 6% 90px}
.blog-index-head{display:flex;justify-content:space-between;align-items:baseline;gap:25px;flex-wrap:wrap}
.blog-index-head h2{font-size:clamp(36px,4vw,64px);font-weight:400;line-height:1.08;letter-spacing:-.05em}
.blog-count{font-size:13px;color:var(--muted)}
.blog-filters{margin:34px 0 10px;display:flex;flex-direction:column;gap:12px}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px}
.blog-chips:empty{display:none}
.blog-chip{padding:10px 16px;border:1px solid #ab8b6d;background:none;border-radius:30px;color:#51321e;font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.blog-chip:hover{background:#e9ddce}
.blog-chip[aria-pressed=true]{background:#51321e;border-color:#51321e;color:#fff0db}
.blog-chip-count{font-size:11px;opacity:.7}
.blog-types .blog-chip{padding:7px 13px;font-size:12px;border-color:#b5967899}

/* ---------- grid + card ---------- */
.blog-grid{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.blog-card{position:relative;padding:34px 34px 38px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:background .25s}
.blog-card:not(:nth-child(3n+1)){padding-left:34px;border-left:1px solid var(--line)}
.blog-card:hover{background:#ecdfd0}
.blog-card-cover{margin:0 0 24px;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#e1c6ac}
.blog-card-cover img{width:100%;height:100%;object-fit:cover}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:12px;color:#8c5530}
.blog-num{font-variant-numeric:tabular-nums;color:var(--ink)}
.blog-type{color:var(--muted)}
.blog-card h3{margin-top:22px;font-size:23px;font-weight:400;line-height:1.25;letter-spacing:-.025em}
.blog-card h3 a::after{content:"";position:absolute;inset:0}
.blog-card h3 a:focus-visible{outline:none}
.blog-card:focus-within{outline:2px solid #8c5530;outline-offset:-2px}
.blog-card-excerpt{margin-top:14px;font-size:14px;line-height:1.75;color:var(--muted)}
.blog-card-foot{margin-top:auto;padding-top:24px;display:flex;gap:16px;font-size:12px;color:var(--muted)}
.blog-card-foot span::before{content:"·";margin-right:16px}
.blog-more{margin-top:40px;text-align:center}
.blog-more .button-line{background:none;border:0;border-bottom:1px solid #8c5530;color:var(--ink);cursor:pointer}
.blog-grid-state{grid-column:1/-1;border-bottom:1px solid var(--line)}
.blog-state{padding:60px 0;max-width:520px}
.blog-state h3{font-size:28px;font-weight:400;letter-spacing:-.03em}
.blog-state p{margin:14px 0 22px;font-size:15px;line-height:1.8;color:var(--muted)}
.blog-state .button-line{background:none;border:0;border-bottom:1px solid #8c5530;color:var(--ink)}

/* ---------- loading skeleton ---------- */
.blog-skel{list-style:none;padding:34px 34px 38px 0;border-bottom:1px solid var(--line)}
.blog-skel span{display:block;height:14px;border-radius:4px;background:#e4d5c4;margin-bottom:14px;animation:blog-pulse 1.4s ease-in-out infinite}
.blog-skel span:nth-child(1){width:30%}.blog-skel span:nth-child(2){width:85%;height:26px}.blog-skel span:nth-child(3){width:65%}
.blog-skel-feature{padding:56px 0;border-top:1px solid var(--line)}
.blog-skel-feature span:nth-child(2){height:48px;width:70%}
.blog-skel-text{padding:0;border:0}.blog-skel-text span{width:100%!important;height:14px!important}.blog-skel-text span:last-child{width:60%!important}
@keyframes blog-pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.blog-skel span{animation:none}.blog-card,.blog-chip,.blog-feature h3 a{transition:none}}

/* ---------- article ---------- */
.post-head{padding:60px 6% 0;max-width:1240px}
.post-crumbs{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-bottom:46px}
.post-crumbs span:not(:empty)::before{content:"/";margin-right:10px;color:#b59678}
.post-crumbs a{border-bottom:1px solid transparent}.post-crumbs a:hover{border-color:#8c5530}
.post-head .eyebrow a{border-bottom:1px solid #c97b4a80}
.post-head h1{font-size:clamp(40px,5.2vw,84px);font-weight:400;letter-spacing:-.055em;line-height:1.05;max-width:15em}
.post-lede{margin-top:28px;font-size:20px;line-height:1.65;color:var(--muted);max-width:40em}
.post-lede:empty{display:none}
.post-meta{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-meta>div{padding:18px 34px 18px 0;margin-right:34px;border-right:1px solid var(--line)}
.post-meta>div:last-child{border-right:0}
.post-meta dt{font-size:11px;color:#8c5530;margin-bottom:6px}
.post-meta dd{margin:0;font-size:14px}
.post-media{padding:50px 6% 0}
.post-media figure{margin:0}.post-media img{width:100%;border-radius:12px}
.post-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#392b21}
.post-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-note{padding:20px 24px;background:#e9ddce;border-left:2px solid #c97b4a;font-size:14px;line-height:1.7;color:#624630;max-width:68ch}
.post-layout{padding:60px 6% 90px;display:grid;grid-template-columns:minmax(0,1fr)}
.post-layout.has-toc{grid-template-columns:220px minmax(0,1fr);gap:7%}
.post-aside{position:sticky;top:30px;align-self:start}
.post-aside-label{font-size:12px;color:#8c5530;margin-bottom:16px}
.post-toc{list-style:none;margin:0;padding:0;counter-reset:toc;border-top:1px solid var(--line)}
.post-toc li{counter-increment:toc;border-bottom:1px solid var(--line)}
.post-toc a{display:flex;gap:12px;padding:11px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.post-toc a::before{content:counter(toc,decimal-leading-zero);color:#8c5530;font-size:11px;padding-top:2px}
.post-toc a:hover{color:var(--ink)}

/* long-form typography */
.post-body{max-width:68ch;font-size:18px;line-height:1.78;color:#46352a}
.post-body>*+*{margin-top:1.1em}
.post-body>p:first-child{font-size:20px;line-height:1.7;color:var(--ink)}
.post-body h2{margin-top:2.2em;font-size:clamp(28px,2.6vw,36px);font-weight:400;line-height:1.18;letter-spacing:-.035em;color:var(--ink);scroll-margin-top:30px}
.post-body h3{margin-top:1.8em;font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:30px}
.post-body h4{margin-top:1.6em;font-size:18px;font-weight:600;color:var(--ink)}
.post-body h2+*,.post-body h3+*{margin-top:.7em}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body a{color:#8c5530;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.post-body ul,.post-body ol{padding-left:1.25em}
.post-body li{padding-left:.35em}
.post-body li+li{margin-top:.55em}
.post-body ul li::marker{color:#c97b4a}
.post-body ol li::marker{color:#8c5530;font-size:.9em}
.post-body li>ul,.post-body li>ol{margin-top:.55em}
.post-body blockquote{margin:2em 0;padding:4px 0 4px 28px;border-left:2px solid #c97b4a}
.post-body blockquote p{font-size:24px;line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
.post-body figure{margin:2em 0}.post-body figure img{width:100%;border-radius:10px}
.post-body figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.post-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;padding:2px 6px;background:#e9ddce;border-radius:4px}
.post-body pre{padding:22px 24px;background:#392b21;color:#f3eadf;border-radius:10px;overflow-x:auto;font-size:14px;line-height:1.65}
.post-body pre code{background:none;padding:0;color:inherit;font-size:inherit}
.post-state{display:flex;gap:25px;align-items:center;flex-wrap:wrap}
.post-state button.button-solid{border:0}

/* related */
.blog-related{padding:80px 6% 90px;border-top:1px solid var(--line)}
.blog-related .blog-grid{margin-top:34px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .blog-search{margin-top:30px;min-width:0;max-width:440px}
  .blog-feature{grid-template-columns:1fr}
  .blog-feature-copy{padding:44px 0}
  .blog-feature-plate{border-left:0;border-top:1px solid var(--line);min-height:200px}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-card:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .blog-card:nth-child(2n){padding-left:30px;border-left:1px solid var(--line)}
  .blog-card:nth-child(2n+1){padding-right:30px}
  .post-layout.has-toc{grid-template-columns:minmax(0,1fr)}
  .post-aside{position:static;margin-bottom:40px;max-width:68ch}
}
@media(max-width:760px){
  .blog-index{padding:60px 6% 70px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card,.blog-card:nth-child(2n),.blog-card:nth-child(2n+1){padding:28px 0 30px;border-left:0}
  .blog-card:hover{background:none}
  .blog-feature-plate{padding:28px;min-height:160px}
  .blog-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -6%;padding:2px 6% 6px;scrollbar-width:none}
  .blog-chips::-webkit-scrollbar{display:none}
  .blog-chip{flex:0 0 auto}
  .post-head{padding:40px 6% 0}
  .post-crumbs{margin-bottom:32px}
  .post-lede{font-size:17px}
  .post-meta>div{padding:14px 20px 14px 0;margin-right:20px}
  .post-meta>div:nth-child(2){border-right:0}
  .post-media{padding:34px 6% 0}
  .post-layout{padding:44px 6% 70px}
  .post-body{font-size:17px}
  .post-body>p:first-child{font-size:18px}
  .post-body blockquote p{font-size:20px}
  .blog-related{padding:60px 6% 70px}
}