body[data-page="blog"]{--body:'Bricolage Grotesque',sans-serif;--display:'Bricolage Grotesque',sans-serif;font-family:var(--body)}
body[data-page="blog"] h1,body[data-page="blog"] h2,body[data-page="blog"] h3{font-family:var(--display);font-weight:600}
body[data-page="blog"] em{font-family:inherit}
body[data-page="blog"] .button,body[data-page="blog"] .text-link{font-weight:700}
.blog-hero{position:relative;isolation:isolate;overflow:hidden;min-height:35vw;padding:5.1vw 6.2%;display:flex;align-items:center;background:#302016}
.blog-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.blog-hero-copy{width:43%;max-width:740px;text-shadow:0 2px 16px #21130d99}
.blog-hero .eyebrow{font-size:clamp(10px,.8vw,14px);margin:0 0 23px}
.blog-hero h1{font-size:clamp(32px,4vw,76px);line-height:1.13;letter-spacing:-.035em;margin:0}
.blog-hero h1 em{font-family:'Luxurious Script',cursive!important;font-style:normal;font-weight:400;font-size:1.32em;line-height:1.2;letter-spacing:0;display:inline-block;margin-top:4px}
.blog-hero .blog-hero-copy>p:last-of-type{font-size:clamp(13px,1vw,18px);line-height:1.65;margin:22px 0 25px;max-width:540px;color:#e1cfb8}
.blog-hero .button{border-radius:40px;min-height:44px;padding:11px 24px;font-size:clamp(13px,1vw,18px);background:#2e211b55}
body[data-page="blog"] .reading-article{font-family:var(--body)}
@media(min-width:1900px){.blog-hero{min-height:665px}}
@media(max-width:760px){.blog-hero{display:flex;flex-direction:column;padding:45px 0 0;min-height:0;background:#302016}.blog-hero-copy{width:100%;max-width:none;padding:0 6.2% 20px;order:0}.blog-hero h1{font-size:clamp(34px,7.8vw,55px)}.blog-hero .eyebrow{margin-bottom:18px}.blog-hero-art{position:relative;inset:auto;order:1;z-index:0;width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;object-position:right center}.blog-hero .blog-hero-copy>p:last-of-type{font-size:15px;margin:18px 0 22px}}

/* Editorial reading and covers, ready for supplied photography. */
body[data-page="blog"] .article-grid{row-gap:48px}
body[data-page="blog"] .reading-article>p{font-size:17px;line-height:1.9;margin-top:18px}
body[data-page="blog"] .reading-article>p:not(.eyebrow){text-align:justify;text-align-last:left;text-justify:inter-word}

/* Motion is progressive enhancement; content stays readable without JS. */
.blog-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1)}
.blog-reveal.blog-visible{opacity:1;transform:none}
body[data-page="blog"] .article-card>a{transition:transform .3s ease}
body[data-page="blog"] .article-art{transition:box-shadow .3s ease}
body[data-page="blog"] .article-art :is(img,.art-symbol){transition:transform .6s cubic-bezier(.2,.65,.25,1)}
body[data-page="blog"] .article-arrow{transition:transform .3s ease}
body[data-page="blog"] .article-card a:focus-visible{outline:2px solid #a63a2c;outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  body[data-page="blog"] .article-card>a:hover{transform:translateY(-5px)}
  body[data-page="blog"] .article-card>a:hover .article-art{box-shadow:0 14px 25px #30221920}
  body[data-page="blog"] .article-card>a:hover .article-art :is(img,.art-symbol){transform:scale(1.06)}
  body[data-page="blog"] .article-card>a:hover .article-arrow{transform:translate(3px,-3px)}
}
.blog-reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;pointer-events:none}
.blog-reading-progress span{display:block;width:100%;height:100%;background:#b84b34;transform:scaleX(0);transform-origin:left}
.blog-reading-top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:46px;height:46px;border:1px solid #d4b995;border-radius:50%;background:#38251c;color:#f7ecd4;box-shadow:0 4px 16px #0002;font:600 24px 'Bricolage Grotesque',sans-serif;z-index:30;transition:background .2s}
.blog-reading-top:hover{background:#70442c}
@media(prefers-reduced-motion:reduce){
  body[data-page="blog"]{scroll-behavior:auto}
  html:has(body[data-page="blog"]){scroll-behavior:auto}
  body[data-page="blog"] .blog-reveal{opacity:1;transform:none;transition:none}
  body[data-page="blog"] .article-card>a,body[data-page="blog"] .article-art,body[data-page="blog"] .article-art :is(img,.art-symbol),body[data-page="blog"] .article-arrow{transition:none;transform:none!important}
}
body[data-page="blog"] .reading-article>.article-lead{font-size:20px;color:#644b39}
body[data-page="blog"] .article-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){body[data-page="blog"] .reading-article>p{font-size:16px}body[data-page="blog"] .reading-article>.article-lead{font-size:18px}}

/* Keep covers in normal flow: the old 100px grid and 100% cover height
   let square covers grow beyond their column when titles wrapped. */
body[data-page="blog"] #blog-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
body[data-page="blog"] .article-card{min-width:0}
body[data-page="blog"] .article-card>a{display:block;min-width:0}
body[data-page="blog"] .article-art{width:100%;height:auto;min-height:0;aspect-ratio:1.35;grid-row:auto;padding:24px;margin:0 0 20px}
body[data-page="blog"] .article-art .art-symbol{position:absolute;inset:15% 22%;width:56%;height:70%;margin:0}
body[data-page="blog"] .article-art>span:first-of-type{display:block;bottom:16px;left:18px}
body[data-page="blog"] .article-arrow{top:15px;right:20px;font-size:25px}
body[data-page="blog"] .article-card .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.08em;overflow-wrap:anywhere}
body[data-page="blog"] .article-card h3{font-size:clamp(22px,2vw,28px);line-height:1.35;margin:10px 0 0;overflow-wrap:anywhere}
body[data-page="blog"] .article-card p:last-child{font-size:15px;line-height:1.7;margin:12px 0 0;overflow-wrap:anywhere}
body[data-page="blog"] .reading-article{width:100%;min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px){
  body[data-page="blog"] #blog-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
  body[data-page="blog"] #blog-stories{padding:48px 5%}
}
@media(max-width:600px){
  body[data-page="blog"] #blog-list{grid-template-columns:minmax(0,1fr);gap:36px}
  body[data-page="blog"] #blog-stories{padding:32px 20px 48px}
  body[data-page="blog"] .article-art{margin-bottom:18px}
  body[data-page="blog"] .article-card h3{font-size:24px;line-height:1.35}
  body[data-page="blog"] .article-card .eyebrow{font-size:10px}
  body[data-page="blog"] .reading-article .article-title{font-size:clamp(28px,7.5vw,38px);line-height:1.22}
  body[data-page="blog"] .reading-article>h3{font-size:23px;line-height:1.35;margin-top:30px}
  body[data-page="blog"] .reading-article>.text-link{font-size:14px;min-height:44px;align-items:center}
}