/* Public blog pages. Uses the site's colour and type tokens from assets/css/style.css. */
.blog-page{background:var(--white)}
.bl-head{padding:calc(var(--header-h) + 44px) 0 34px;background:var(--cream);border-bottom:1px solid var(--line)}
.bl-head .wrap{max-width:1100px}
.bl-head h1{margin:.25em 0 .35em;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;text-wrap:balance}
.bl-head .lead{max-width:720px;margin:0 0 22px;color:var(--grey);font-size:1.05rem;line-height:1.7}
.bl-head .breadcrumb{margin:0 0 18px}
.bl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.bl-tabs a,.bl-chips a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-text);font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.bl-tabs a:hover,.bl-chips a:hover{border-color:var(--bronze);color:var(--bronze-dark)}
.bl-tabs a.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.bl-chips a{font-size:.7rem;text-transform:none;letter-spacing:.02em}

.bl-list .wrap,.bl-related .wrap,.bl-stories .wrap{max-width:1240px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.bl-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:box-shadow .3s,transform .3s}
.bl-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.bl-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bl-card:hover .bl-thumb img{transform:scale(1.04)}
.bl-thumb-empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--ink),var(--ink-soft))}
.bl-thumb-empty span{font-family:var(--font-head);font-size:1.1rem;letter-spacing:.04em;color:var(--bronze-light)}
.bl-card-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.bl-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.bl-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--cream);color:var(--bronze-dark);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bl-pill.bl-construction{background:rgba(185,138,61,.16)}
.bl-pill.bl-update{background:#e8eef7;color:#27466f}
.bl-cat,.bl-cats a{font-size:.74rem;color:var(--grey)}
.bl-cats{display:inline-flex;gap:10px;flex-wrap:wrap}
.bl-cats a:hover{color:var(--bronze-dark)}
.bl-card h3{margin:0 0 10px;font-size:1.2rem;line-height:1.35}
.bl-card h3 a:hover{color:var(--bronze-dark)}
.bl-card p{margin:0 0 16px;font-size:.9rem;line-height:1.65;color:var(--grey)}
.bl-meta{margin-top:auto;font-size:.74rem;letter-spacing:.04em;color:var(--grey-light)}
.bl-empty{padding:40px 0;text-align:center;color:var(--grey)}

.bl-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:44px 0 0}
.bl-pager a,.bl-pager span{min-width:40px;padding:9px 14px;border:1px solid var(--line);text-align:center;font-size:.82rem;color:var(--ink-text)}
.bl-pager a:hover{border-color:var(--bronze);color:var(--bronze-dark)}
.bl-pager .on{background:var(--ink);border-color:var(--ink);color:var(--white)}

.bl-story-row{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:thin}
.bl-story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.bl-story{position:relative;display:block;flex:0 0 190px;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:var(--ink);scroll-snap-align:start}
.bl-story-grid .bl-story{flex:none}
.bl-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bl-story:hover img{transform:scale(1.05)}
.bl-story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,21,39,0) 45%,rgba(7,21,39,.88))}
.bl-story span{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;font-size:.8rem;line-height:1.35;color:var(--white);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-more{margin:8px 0 0}

/* article */
.bl-head-post{padding-bottom:30px}
.bl-head-post .wrap{max-width:820px}
.bl-head-post h1{font-size:clamp(1.9rem,4vw,2.9rem)}
.bl-by{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:.8rem;color:var(--grey)}
.bl-project{margin:14px 0 0;font-size:.88rem;color:var(--grey)}
.bl-project a{color:var(--bronze-dark);border-bottom:1px solid var(--bronze-light)}
.bl-wrap{max-width:820px;padding-top:34px;padding-bottom:clamp(40px,6vw,80px)}
.bl-hero-img{margin:0 0 34px}
.bl-hero-img img{width:100%;height:auto;border-radius:4px;background:var(--cream)}
.bl-body{font-size:1.06rem;line-height:1.85;color:#2c3340}
.bl-body > *{margin:0 0 1.2em}
.bl-body h2{margin:1.8em 0 .6em;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.25;color:var(--ink-text)}
.bl-body h3{margin:1.6em 0 .5em;font-size:1.3rem;line-height:1.3;color:var(--ink-text)}
.bl-body h4{margin:1.4em 0 .4em;font-size:1.1rem;color:var(--ink-text)}
.bl-body a{color:var(--bronze-dark);border-bottom:1px solid var(--bronze-light)}
.bl-body a:hover{color:var(--ink-text)}
.bl-body ul,.bl-body ol{padding-left:1.4em}
.bl-body li{margin:0 0 .5em}
.bl-body blockquote{margin-left:0;padding:6px 0 6px 22px;border-left:3px solid var(--bronze);font-family:var(--font-head);font-size:1.2rem;color:var(--ink-text)}
.bl-body img{max-width:100%;height:auto;border-radius:4px}
.bl-body figure{margin:1.6em 0}
.bl-body figcaption{margin-top:8px;font-size:.84rem;color:var(--grey)}
.bl-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.bl-body th,.bl-body td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.bl-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.bl-taglist{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.bl-taglist b{margin-right:6px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.bl-taglist a{padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:var(--grey)}
.bl-taglist a:hover{border-color:var(--bronze);color:var(--bronze-dark)}
.bl-back{margin:28px 0 0}

@media (max-width:960px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bl-grid{grid-template-columns:minmax(0,1fr)}.bl-head{padding-top:calc(var(--header-h) + 28px)}.bl-story{flex-basis:160px}.bl-body{font-size:1rem}}

/* breadcrumb on the light heading band */
.bl-head .breadcrumb,.bl-head .breadcrumb li,.bl-head .breadcrumb a{color:var(--grey)}
.bl-head .breadcrumb li+li::before{color:var(--grey-light)}
.bl-head .breadcrumb a:hover{color:var(--bronze-dark)}

/* construction update video (YouTube / Vimeo) */
.bl-video{position:relative;aspect-ratio:16/9;margin:0 0 30px;overflow:hidden;border-radius:4px;background:#000}
.bl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* YouTube picture on construction update cards */
.bl-thumb{position:relative}
.bl-thumb img.yt{transform:scale(1.28)}
.bl-card:hover .bl-thumb img.yt{transform:scale(1.34)}
.bl-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(7,21,39,.72);box-shadow:0 0 0 2px rgba(255,255,255,.55);pointer-events:none}
.bl-play svg{width:22px;height:22px;margin-left:3px;fill:#fff}