.blog-main { padding-top:110px; }
.blog-intro { padding-bottom:48px; }
.blog-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:54px; }
.blog-heading h1 { margin:18px 0 0; font:800 clamp(72px,9vw,144px)/.86 var(--display); letter-spacing:-.025em; text-transform:uppercase; }
.blog-heading h1 em { font:400 .92em/1 var(--serif); text-transform:none; color:var(--red); }
.blog-heading>p { color:var(--muted); padding-bottom:8px; }
.blog-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(30px,5vw,80px); padding-top:32px; padding-bottom:100px; }
.blog-rail { align-self:start; display:grid; gap:25px; }
.blog-panel { background:var(--panel); padding:28px; border-radius:8px; }
.blog-panel h2 { margin:8px 0 16px; font:700 32px/1.1 var(--display); text-transform:uppercase; }
.blog-panel .eyebrow { font-size:10px; }
.blog-panel label { display:block; font-size:13px; margin:20px 0 8px; }
.blog-panel input,.blog-panel textarea { display:block; width:100%; min-width:0; padding:12px 14px; border:1px solid var(--line); background:#111110; color:var(--ink); font:inherit; border-radius:4px; }
.blog-panel input[type=file] { font-size:12px; padding:12px; }
.blog-panel input::file-selector-button { border:0; border-radius:3px; padding:7px 10px; margin-right:10px; color:var(--ink); background:#34342f; cursor:pointer; }
.blog-panel input:focus-visible,.blog-panel textarea:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.blog-panel textarea { resize:vertical; min-height:180px; }
.blog-panel .button { margin-top:22px; justify-content:space-between; gap:20px; font-size:13px; border-radius:4px; }
.blog-rail .button { width:100%; }
.blog-hint,.blog-optional { color:var(--muted); font-size:12px; line-height:1.7; }
.blog-message { font-size:13px; line-height:1.6; margin:12px 0; overflow-wrap:anywhere; }
.blog-message:empty { display:none; }
.blog-message[data-tone=error] { color:#ff9388; }
.blog-message[data-tone=success] { color:#b5d4a8; }
.blog-form-actions { display:flex; flex-wrap:wrap; gap:14px; }
.blog-panel button:disabled { opacity:.5; cursor:wait; }
.blog-list-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:14px 0 28px; }
.blog-list-heading h2 { font:700 clamp(30px,4vw,46px)/1.1 var(--display); margin:0; text-transform:uppercase; }
#blog-compose:not([hidden]) + .blog-list-heading { margin-top:44px; }
.blog-empty { padding:40px 28px; background:var(--panel); border-radius:8px; color:var(--muted); }
.blog-post { padding:30px; background:var(--panel); border-radius:8px; margin-bottom:24px; overflow:hidden; }
.blog-post-meta { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; }
.blog-post h3 { font:700 clamp(30px,4vw,46px)/1.05 var(--display); margin:0 0 22px; overflow-wrap:anywhere; }
.blog-post-body { overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.85; }
.blog-post img,.blog-post video,.media-preview img,.media-preview video { width:100%; max-height:620px; object-fit:contain; border-radius:5px; background:#111110; }
.blog-post-media { margin-top:26px; }
.blog-post-actions { display:flex; flex-wrap:wrap; gap:24px; margin-top:22px; }
.blog-post-actions button,#remove-media { background:transparent; border:0; padding:0; font-size:12px; }
.blog-post-actions [data-action=delete] { color:#ff9388; }
.media-preview { margin-top:16px; }
.media-preview img,.media-preview video { max-height:260px; }
#remove-media { margin-top:14px; }
#load-more { margin-top:16px; }
[hidden] { display:none!important; }
@media(max-width:1000px) { .blog-layout { grid-template-columns:250px minmax(0,1fr); gap:28px; } .blog-panel { padding:22px; } }
@media(max-width:760px) { .blog-main { padding-top:78px; } .blog-intro { padding-top:42px; } .blog-heading { display:block; margin-top:32px; } .blog-heading h1 { font-size:clamp(64px,16vw,110px); } .blog-heading>p { margin-top:30px; } .blog-layout { grid-template-columns:minmax(0,1fr); padding-top:0; } .blog-rail { order:2; } .blog-content { order:1; } .blog-post { padding:24px; } .blog-intro .section-label { gap:20px; font-size:9px; } }
/* Native buttons need the same outline treatment as the site's links. */
.blog-page .button-outline { background:transparent; color:var(--ink); border:1px solid var(--line); }
.blog-page button.text-link { background:transparent; color:var(--ink); border:0; }
.blog-intro { padding-top:65px; }
.blog-page .desktop-nav a[aria-current=page] { color:var(--red); }
@media(max-width:760px) { .blog-intro { padding-top:42px; } }