.blog-page { padding-bottom: 90px; }
.blog-review { background: #203247; color: #fff9ef; text-align: center; padding: 11px 20px; font-size: 13px; line-height: 1.5; }
.blog-intro { padding-top: 75px; padding-bottom: 55px; }
.blog-intro h1 { font-size: clamp(48px, 6.6vw, 86px); max-width: 950px; letter-spacing: -.045em; }
.blog-deck { color: var(--muted); max-width: 720px; font-size: 19px; line-height: 1.7; margin-top: 25px; }
.blog-categories { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 38px; }
.blog-categories a { border: 1px solid var(--line); border-radius: 50px; padding: 8px 17px; font-size: 14px; }
.blog-categories a[aria-current=page], .blog-categories a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.blog-search { max-width: 440px; margin-top: 27px; }
.blog-search label { font-size: 13px; display: block; margin-bottom: 7px; }
.blog-search input { width: 100%; padding: 11px 15px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--raised); font-size: 15px; }
.blog-search-status { font-size: 12px; margin-top: 5px; min-height: 20px; color: var(--muted); }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 58px 32px; }
.blog-card { min-width: 0; }
.blog-card-image { display: block; overflow: hidden; border-radius: 12px; background: #e8decd; }
.blog-card-image img { aspect-ratio: 3/2; object-fit: cover; }
.blog-card-copy { padding-top: 21px; }
.blog-kicker { text-transform: uppercase; letter-spacing: .065em; font-size: 11px; color: #a84b40; }
.blog-kicker span { color: var(--muted); white-space: nowrap; }
.blog-card h2 { font-size: 29px; line-height: 1.18; letter-spacing: -.025em; margin-top: 11px; }
.blog-card h2 a:hover { color: #a84b40; }
.blog-card-copy > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.65; margin-top: 13px; }
.blog-no-results { padding-top: 32px; }
.blog-empty { border-top: 1px solid var(--line); padding-top: 40px; }
.blog-empty h2 { font-size: 36px; }
.blog-empty p { margin: 20px 0; }
.blog-article-header { padding-top: 42px; max-width: 1120px; }
.blog-breadcrumb { font-size: 13px; color: var(--muted); display: flex; gap: 12px; margin-bottom: 44px; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-article-header h1 { font-size: clamp(43px, 5.7vw, 75px); line-height: 1.05; max-width: 1000px; letter-spacing: -.042em; }
.blog-article-header .eyebrow { margin-bottom: 17px; }
.blog-byline { display: flex; flex-wrap: wrap; gap: 9px; font-size: 13px; color: var(--muted); margin-top: 23px; }
.blog-byline a { text-decoration: underline; text-underline-offset: 3px; }
.blog-hero { max-width: 1120px; margin-top: 42px; margin-bottom: 50px; }
.blog-hero img { border-radius: 14px; aspect-ratio: 3/2; object-fit: cover; }
.blog-hero figcaption { font-size: 12px; color: var(--muted); margin-top: 10px; }
.blog-reading-layout { max-width: 1120px; display: grid; grid-template-columns: 230px minmax(0,720px); gap: 65px; align-items: start; }
.blog-contents { position: sticky; top: 30px; font-size: 13px; }
.blog-contents summary { font-family: var(--serif); font-size: 22px; cursor: pointer; }
.blog-contents ol { padding-left: 20px; margin-top: 16px; color: var(--muted); }
.blog-contents li { padding: 0 0 12px 5px; line-height: 1.6; }
.blog-contents a:hover { color: #a84b40; text-decoration: underline; }
.blog-prose { font-size: 18px; line-height: 1.85; min-width: 0; }
.blog-prose p { margin-bottom: 24px; }
.blog-prose h2 { font-size: 34px; line-height: 1.2; letter-spacing: -.025em; margin: 43px 0 20px; scroll-margin-top: 28px; }
.blog-prose ul, .blog-prose ol { padding-left: 25px; margin: 0 0 27px; }
.blog-prose li { padding-left: 4px; margin-bottom: 10px; }
.blog-prose a { color: #9b4036; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.blog-prose a:hover { text-decoration-thickness: 2px; }
.blog-app-video { max-width: 420px; margin: 32px auto; }
.blog-app-video video { display: block; width: 100%; height: auto; border-radius: 12px; background: #faf9f7; }
.blog-app-video figcaption { color: var(--muted); font-size: 13px; line-height: 1.65; margin-top: 12px; }
.blog-author { background: #efe8db; border-radius: 12px; padding: 26px 30px; margin-top: 46px; font-size: 15px; line-height: 1.7; }
.blog-author p { margin-bottom: 12px; }
.blog-arrival { max-width: 1120px; background: var(--mint); padding: 44px 48px; margin-top: 65px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; border-radius: 18px; align-items: end; }
.blog-arrival h2 { font-size: clamp(34px,4vw,48px); line-height: 1.08; margin: 15px 0 20px; }
.blog-arrival p { font-size: 16px; max-width: 410px; }
.blog-arrival .button { margin-top: 25px; }
.blog-arrival-note { color: var(--muted); }
.blog-arrival-note a { text-decoration: underline; text-underline-offset: 4px; }
.blog-related { max-width: 1120px; margin-top: 75px; }
.blog-related > h2 { font-size: 38px; margin-bottom: 30px; }
.blog-related .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 1100px) { .blog-reading-layout { grid-template-columns: 190px minmax(0,1fr); gap: 38px; } }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .blog-reading-layout { display: block; }
  .blog-contents { position: static; border-block: 1px solid var(--line); padding: 18px 0; margin-bottom: 32px; }
  .blog-contents ol { margin-bottom: 0; }
  .blog-arrival { grid-template-columns: 1fr; gap: 28px; padding: 30px; }
  .blog-prose { font-size: 17px; }
  .blog-prose h2 { font-size: 29px; }
}
@media (max-width: 650px) {
  .blog-intro { padding-top: 45px; padding-bottom: 35px; }
  .blog-grid, .blog-related .blog-grid { grid-template-columns: 1fr; gap: 38px; }
  .blog-deck { font-size: 17px; }
  .blog-article-header { padding-top: 24px; }
  .blog-breadcrumb { margin-bottom: 29px; }
  .blog-hero { margin-top: 30px; margin-bottom: 30px; }
  .blog-categories { gap: 8px; }
  .blog-categories a { padding: 7px 12px; font-size: 13px; }
  .blog-author { padding: 24px; }
  .blog-arrival { padding: 25px; }
}