/* ET EXPO blog article page styles.
   Extracted verbatim from BlogPageRenderer.CSS on 2026-09-08.
   It used to be emitted as an inline <style> block, which the public chain's CSP
   (style-src 'self' + hash allowlist, no 'unsafe-inline') silently blocked, leaving
   every article page completely unstyled - the ET EXPO logo rendered at its intrinsic
   1900x356 and the content collapsed into the top-left corner. Serving the same CSS as
   a real file is allowed by 'self' and needs no hash maintenance. No rule was changed. */
*{box-sizing:border-box}
body.blog-article{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans);line-height:1.7}
.blog-article a{color:inherit;text-decoration:none}
.blog-article img{max-width:100%;display:block}
.ba-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
/* The shared public footer is rebuilt at run time by /phase6b-public.js. It looks for
   footer > .container, wipes it and rebuilds the brand + Explore grid inside it, and its own
   width rule is scoped to footer > .container as well. This page's footer wrapper was .ba-wrap
   only, so the script found no .container, fell back to <footer> itself and rebuilt there - with
   nothing capping the width. The footer then ran edge to edge while the article column stayed at
   1100px. The wrapper now carries .container so the shared behaviour applies, and this variable -
   the hook phase6b already reads - lines the footer up with the article column instead of the
   1280px default the Home Page uses for its wider body. */
body.blog-article{--et-public-shell-max:1100px}
.ba-banner{position:sticky;top:0;z-index:99;padding:11px;text-align:center;background:var(--accent);color:#0a0c10;font-weight:800;letter-spacing:.08em}
.ba-admin{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:9px 24px;
  background:var(--charcoal-900);border-bottom:1px solid var(--border-subtle);font-size:.8rem;color:var(--text-secondary)}
.ba-admin span{margin-right:auto;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ba-danger{background:#c2412b;color:#fff;border:0;cursor:pointer;font-family:inherit}
.ba-danger:hover{background:#a5341f}
.ba-nav{position:sticky;top:0;z-index:30;background:rgba(10,12,16,.94);border-bottom:1px solid var(--border-subtle);backdrop-filter:blur(12px)}
.ba-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.ba-logo img{height:30px;width:auto}
.ba-nav-links{display:flex;gap:26px;color:var(--text-secondary);font-size:.92rem}
.ba-nav-links a:hover,.ba-nav-links a.on{color:var(--accent)}
.ba-btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#0a0c10;font-weight:700;
  padding:13px 20px;border-radius:4px;font-size:.92rem;white-space:nowrap}
.ba-btn:hover{background:var(--accent-pressed)}
.ba-btn-sm{padding:9px 14px;font-size:.82rem}
.ba-crumb{padding:18px 0 0;font-size:.82rem;color:var(--text-secondary)}
.ba-crumb a:hover{color:var(--accent)}
.ba-crumb b{color:var(--text-primary);font-weight:600}
.ba-head{padding:26px 24px 0;max-width:860px}
.ba-kicker{color:var(--accent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.ba-head h1{color:var(--text-primary);font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
.ba-summary{color:var(--text-secondary);font-size:1.1rem;margin:0 0 22px}
.ba-meta{display:flex;flex-wrap:wrap;gap:0;margin:0 0 6px;padding:16px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.ba-meta div{padding-right:26px;margin-right:26px;border-right:1px solid var(--border-subtle)}
.ba-meta div:last-child{border-right:0;margin-right:0;padding-right:0}
.ba-meta dt{color:var(--text-secondary);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.ba-meta dd{margin:5px 0 0;color:var(--text-primary);font-size:.9rem;font-weight:500}
.ba-media{padding-top:30px}
.ba-cover{margin:0}
.ba-cover img,.ba-video{width:100%;max-height:540px;object-fit:cover;border-radius:10px;border:1px solid var(--border-subtle)}
.ba-body{max-width:760px;margin:0 auto;padding:38px 24px 10px;font-size:1.06rem;color:var(--text-body)}
.ba-body>*:first-child{margin-top:0}
.ba-body h2{color:var(--text-primary);font-size:1.72rem;line-height:1.25;margin:44px 0 14px;letter-spacing:-.01em}
.ba-body h3{color:var(--text-primary);font-size:1.3rem;line-height:1.3;margin:32px 0 10px}
.ba-body p{margin:0 0 1.25em}
.ba-body ul,.ba-body ol{margin:0 0 1.25em;padding-left:1.3em}
.ba-body li{margin:.5em 0}
.ba-body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  color:var(--text-primary);font-size:1.16rem;font-style:italic}
.ba-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.ba-body strong,.ba-body b{color:var(--text-primary);font-weight:700}
.ba-body img{width:100%;height:auto;margin:26px 0;border-radius:8px;border:1px solid var(--border-subtle)}
.ba-body code{background:var(--bg-card);padding:2px 6px;border-radius:4px;font-size:.92em}
.ba-body hr{border:0;border-top:1px solid var(--border-subtle);margin:36px 0}
.ba-gallery{padding-top:26px}
.ba-gallery h2,.ba-related h2{color:var(--text-primary);font-size:1.35rem;margin:0 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--border-subtle)}
.ba-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ba-shots figure{margin:0;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;background:var(--bg-card)}
.ba-shots img{width:100%;height:190px;object-fit:cover;cursor:zoom-in}
.ba-shots figcaption{padding:9px 12px;font-size:.78rem;color:var(--text-secondary)}
.ba-related{padding-top:44px}
.ba-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.ba-rel{border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;background:var(--bg-card);display:block}
.ba-rel:hover{border-color:var(--accent)}
.ba-rel-img{width:100%;height:150px;object-fit:cover;background:var(--charcoal-900)}
.ba-rel-empty{display:block;background:linear-gradient(135deg,var(--charcoal-700),var(--charcoal-900))}
.ba-rel-kicker{display:block;padding:12px 14px 0;color:var(--accent);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ba-rel b{display:block;padding:6px 14px 16px;color:var(--text-primary);font-size:.98rem;line-height:1.35}
.ba-cta{margin-top:56px;border-top:1px solid var(--border-subtle);background:var(--bg-card)}
.ba-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding-top:30px;padding-bottom:30px}
.ba-cta h2{color:var(--text-primary);font-size:1.3rem;margin:0 0 5px}
.ba-cta p{color:var(--text-secondary);margin:0;font-size:.92rem}
.ba-footer{background:var(--bg-footer);border-top:1px solid var(--border-subtle);padding:22px 0}
/* Block, exactly like the Home Page footer's .container. /phase6b-public.js empties this
   wrapper and rebuilds the shared footer inside it, then appends .copyright and .footer-legal
   as siblings. While this was a space-between flex row those two became flex items and were
   pushed to opposite ends, so styles.css .copyright{text-align:center} and
   .footer-legal{justify-content:center} could not centre them. As a block they centre exactly
   as they do on the Home Page. */
.ba-footer-inner{display:block;color:var(--text-secondary);font-size:.8rem}
.ba-footer a:hover{color:var(--accent)}
/* Copied verbatim from index.html's inline <style>. styles.css does not carry this rule either -
   the Home Page keeps it inline like the rest of its footer rules - so the copyright line rendered
   left-aligned at default size here while the Home Page centres it. */
.copyright { text-align: center; font-size: 0.75rem; color: var(--text-secondary); }
.ba-lightbox{position:fixed;inset:0;z-index:120;background:rgba(4,6,9,.93);display:flex;align-items:center;justify-content:center;padding:32px}
.ba-lightbox[hidden]{display:none}
.ba-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.ba-lightbox button{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
@media(max-width:820px){.ba-nav-links{display:none}.ba-meta div{border-right:0;padding-right:16px;margin-right:16px}}

/* ---------------------------------------------------------------------------
   Reader comments, and the photos people take on the show floor.

   Everything here is APPROVED and PUBLISHED content: the endpoint serves nothing
   else, and an attachment with no public address is not sent at all. The section
   starts hidden and is revealed only once the list has loaded, so an article with
   no comments never shows an empty heading.
   --------------------------------------------------------------------------- */
.ba-comments { margin: 48px auto 8px; }
.ba-comments > h2 { font-size: 1.35rem; margin: 0 0 18px; }
.ba-comment-empty { color: #6b7280; margin: 0 0 20px; }

.ba-comment { border-top: 1px solid #e5e7eb; padding: 18px 0; }
.ba-comment:first-child { border-top: none; padding-top: 0; }
.ba-comment-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ba-comment-head b { font-size: 1rem; }
.ba-comment-head time { color: #6b7280; font-size: .85rem; }
.ba-comment p { margin: 0; line-height: 1.65; white-space: pre-wrap; }

/* The pictures are the point of this feature, so they are given real room. */
.ba-comment-media-row {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ba-comment-media {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; background: #f3f4f6; display: block;
}

.ba-comment-write { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e5e7eb; }
.ba-comment-write label { display: block; font-weight: 600; margin-bottom: 8px; }
.ba-comment-write textarea {
  width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font: inherit; resize: vertical; box-sizing: border-box;
}
/* Guest comment form: Name and Email share the textarea's look. */
.ba-comment-guest h3 { margin: 0 0 14px; }
.ba-comment-guest input[type=text], .ba-comment-guest input[type=email] {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font: inherit; box-sizing: border-box; margin-bottom: 14px;
}
.ba-comment-guest textarea { margin-bottom: 10px; }
.ba-comment-hp { display: none; }
.ba-comment-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.ba-comment-file {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border: 1px dashed #9ca3af; border-radius: 8px; font-weight: 500;
}
.ba-comment-file input { display: none; }
.ba-comment-file-list { color: #6b7280; font-size: .9rem; word-break: break-all; }
.ba-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Said before the visitor presses the button, not after: nothing appears immediately. */
.ba-comment-note { color: #6b7280; font-size: .85rem; }
.ba-comment-status:empty { display: none; }
.ba-comment-status { margin: 10px 0 0; color: #374151; }

@media (max-width: 560px) {
  .ba-comment-media-row { grid-template-columns: 1fr 1fr; }
}

/* Blog video (BlogVideo): YouTube/Vimeo players and site-hosted .mp4/.webm, 16:9, never wider
   than the article, never autoplaying. */
.ba-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 18px 0; border-radius: 10px; overflow: hidden; background: #000; }
.ba-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ba-media video.ba-video { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; margin: 18px 0; border-radius: 10px; background: #000; }