/* bur@rt press — main.css
 * Forked from biscuit-gallery-theme. Stripped gallery-specific surfaces,
 * added magazine layout primitives + ba-slider + blogcard.
 */

/* ── CSS variables (single source of truth for colors / type) ─────── */
:root {
  --serif: 'Cormorant Garamond', Georgia, 'Hiragino Mincho ProN', serif;
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --accent:        #A8C0A0;  /* Sage */
  --accent-dark:   #7FA088;  /* Eucalyptus — hover/active */
  --accent-soft:   #E8F0E5;  /* Pistachio wash — chip backgrounds */

  --ink:           #1a1a1a;
  --ink-soft:      #444;
  --muted:         #767676;
  --paper:         #ffffff;
  --paper-warm:    #fafaf8;
  --line:          #e5e5e5;
  --line-soft:     #f0f0f0;

  --container-max: 1240px;
  --container-pad: clamp(16px, 4vw, 32px);
  --ratio:         1.5;
  --radius:        2px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
}
a { color: var(--ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 400; line-height: 1.3; margin: 0 0 .8em; }
h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 2.8vw, 30px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1em; }

/* ── Container ───────────────────────────────────────────────────── */
.main-container,
.header-inner,
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.main-container { padding-top: 32px; padding-bottom: 64px; }

/* Two-column layout (article + sidebar) used by single/category/archive/
   search/index. front-page and page templates skip this so they get the
   full container width. */
.with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
@media (max-width: 900px) { .with-sidebar { grid-template-columns: 1fr; gap: 32px; } }

/* CRITICAL — grid items must allow shrinking below their min-content size.
   Without this, a wide table inside the article would force the whole grid
   column to expand to the table's intrinsic width, blowing out the layout
   on mobile (image would display at the table width, not the column width). */
.with-sidebar > main,
.with-sidebar > aside { min-width: 0; }
.with-sidebar > main .entry-content,
.with-sidebar > main .burart-lang-content { min-width: 0; }

/* ── Detection banner ────────────────────────────────────────────── */
#detection-banner {
  position: fixed; left: 0; right: 0; top: 0;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform .35s ease;
  z-index: 9999;
}
#detection-banner.visible { transform: translateY(0); }
#detection-banner .banner-inner { display: flex; align-items: center; gap: 12px; max-width: var(--container-max); margin: 0 auto; }
#detection-banner .banner-globe { font-size: 16px; }
#detection-banner .banner-text { flex: 1; }
#detection-banner .banner-change {
  background: var(--paper); border: 1px solid var(--line);
  padding: 5px 12px; font-size: 12px; cursor: pointer; border-radius: var(--radius);
  font-family: var(--sans);
}
#detection-banner .banner-change:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
#detection-banner .banner-dismiss { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--muted); padding: 0 4px; line-height: 1; }

/* ── Site header ─────────────────────────────────────────────────── */
#site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .01em; flex-shrink: 0; }
.logo .logo-text { display: inline-block; }
#primary-nav { flex: 1; min-width: 0; }
/* Top-level nav: tight, no wrap, lowercase brand tone */
#primary-nav > ul { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; font-size: 13px; flex-wrap: wrap; align-items: center; }
#primary-nav > ul > li { position: relative; }
#primary-nav > ul > li > a { padding: 8px 0; display: inline-block; text-transform: lowercase; letter-spacing: .01em; }

/* Submenu — hover-triggered dropdown */
#primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  list-style: none; padding: 6px 0; margin: 0;
  min-width: 180px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 200;
}
#primary-nav .sub-menu li { padding: 0; }
#primary-nav .sub-menu a { display: block; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
#primary-nav .sub-menu a:hover { background: var(--accent-soft); }
#primary-nav .menu-item-has-children:hover > .sub-menu,
#primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
/* Arrow indicator for items with children */
#primary-nav .menu-item-has-children > a::after {
  content: ' ▾'; font-size: 9px; color: var(--muted); margin-left: 2px;
}
/* Suppress font-awesome class noise (FA was removed in Phase 3 cleanup) */
#primary-nav li[class*="fa-"]::before { content: none !important; }

.header-right { display: flex; align-items: center; gap: 12px; }
.search-wrap, .lang-wrap { position: relative; }
.search-toggle, .lang-chip {
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  width: 36px; height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.lang-chip { width: auto; padding: 0 10px; gap: 4px; font-family: var(--sans); font-size: 12px; }
.search-toggle:hover, .lang-chip:hover { border-color: var(--accent); color: var(--accent-dark); }

.search-form {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; display: none; box-shadow: 0 4px 12px rgba(0,0,0,.06);
  width: 260px;
}
.search-form.open { display: flex; gap: 6px; }
.search-form input[type=search] {
  flex: 1; border: 0; padding: 6px 8px; font: inherit; outline: none;
}
.search-form button[type=submit] {
  background: var(--accent); color: var(--paper); border: 0; padding: 6px 10px; cursor: pointer;
  border-radius: var(--radius);
}

.lang-switcher {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  display: none; box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.lang-wrap.open .lang-switcher { display: flex; }
.lang-btn {
  background: none; border: 0; padding: 8px 12px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink);
}
.lang-btn:hover { background: var(--accent-soft); }
.lang-btn.active { background: var(--accent); color: var(--paper); }

.mobile-menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.mobile-menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* Mobile drawer */
.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh;
  background: var(--paper); border-left: 1px solid var(--line);
  z-index: 200; padding: 60px 24px 24px; transition: right .3s ease;
  overflow-y: auto;
}
.mobile-menu.open { right: 0; }
.mobile-menu-close { position: absolute; top: 16px; right: 16px; background: none; border: 0; cursor: pointer; width: 24px; height: 24px; }
.mobile-menu-close span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: absolute; top: 50%; left: 50%; }
.mobile-menu-close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.mobile-menu-close span:last-child  { transform: translate(-50%,-50%) rotate(-45deg); }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-link { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.mobile-search-form { display: flex; gap: 6px; margin-bottom: 12px; }
.mobile-search-form input[type=search] {
  flex: 1; border: 1px solid var(--line); padding: 8px 10px; font: inherit; border-radius: var(--radius);
}
.mobile-search-form button[type=submit] {
  background: var(--accent); color: var(--paper); border: 0; padding: 6px 10px; cursor: pointer; border-radius: var(--radius);
}
@media (max-width: 768px) {
  #primary-nav, .search-wrap, .lang-wrap { display: none; }
  .mobile-menu-btn { display: block; }
  .lang-wrap { display: flex !important; }
  .lang-switcher { display: flex !important; position: static; box-shadow: none; border: 0; }
  .lang-chip { display: none; }
}

/* ── Front-page hero & magazine grid ─────────────────────────────── */
.fp-hero { padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
.fp-hero h1 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -.01em; }
.fp-hero .fp-hero-desc { font-size: 16px; color: var(--muted); max-width: 640px; }
.fp-hero a.fp-hero-cta { display: inline-block; margin-top: 12px; padding: 10px 18px; border: 1px solid var(--ink); }
.fp-hero a.fp-hero-cta:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.fp-section { padding: 48px 0; border-bottom: 1px solid var(--line-soft); }
.fp-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.fp-section-head h2 { margin: 0; }
.fp-section-head a.all-link { font-size: 13px; color: var(--muted); }
.fp-section-head a.all-link:hover { color: var(--accent-dark); }

/* ── Article cards & grid ────────────────────────────────────────── */
.article-grid {
  display: grid; gap: 32px 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.article-card { display: flex; flex-direction: column; }
.article-card a.card-link { display: block; flex: 1; }
.article-card .card-thumb {
  aspect-ratio: 16/10; background: var(--line-soft); margin-bottom: 12px; overflow: hidden;
}
.article-card .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-card:hover .card-thumb img { transform: scale(1.04); }
.article-card .card-cat {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-dark); margin-bottom: 6px;
}
.article-card .card-title {
  font-family: var(--serif); font-size: 19px; line-height: 1.4; margin: 0 0 6px;
}
.article-card .card-meta { font-size: 12px; color: var(--muted); }

.article-card--feature .card-thumb { aspect-ratio: 16/9; }
.article-card--feature .card-title { font-size: 26px; }

/* Magazine pickup band (homepage category strips) */
.cat-pickup { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cat-pickup { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cat-pickup { grid-template-columns: 1fr; } }

/* ── Single article ──────────────────────────────────────────────── */
.single-article header.entry-header { padding: 32px 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 32px; }
.single-article .entry-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-dark); margin-bottom: 12px; }
.single-article h1.entry-title { font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
.single-article .entry-meta { font-size: 13px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.single-article .entry-thumbnail { margin: 0 0 32px; }
.single-article .entry-thumbnail img { width: 100%; }
.entry-content { font-size: 16px; line-height: 1.8; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content figure { margin: 32px 0; }
.entry-content figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }

/* WordPress [caption] shortcode emits <figure style="width:1620px">
   which overflows the column. Cap it back to the container width and
   let the inner <img> fill that capped width. */
.entry-content .wp-caption,
.entry-content figure.wp-caption,
.entry-content figure[style*="width"] { max-width: 100% !important; width: auto !important; }
.entry-content .wp-caption img,
.entry-content figure.wp-caption img { width: 100% !important; height: auto !important; }
.entry-content .wp-caption-text { width: auto !important; }

/* Gutenberg block image alignments */
.entry-content .wp-block-image,
.entry-content .wp-block-image img { max-width: 100%; height: auto; }

/* Legacy align* classes from Classic Editor */
.entry-content .alignleft  { float: left;  margin: 0 24px 16px 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0 0 16px 24px; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }
.entry-content .alignnone  { max-width: 100%; }

/* Galleries: cap each item's image */
.entry-content .gallery img,
.entry-content .wp-block-gallery img { max-width: 100%; height: auto; }

/* ── SNS / video embed treatments ─────────────────────────────────── */

/* YouTube / Vimeo — responsive 16:9 inside a centered card with shadow */
.entry-content iframe[src*="youtube.com/embed"],
.entry-content iframe[src*="player.vimeo.com"],
.entry-content iframe[src*="youtu.be"] {
  display: block;
  width: 100% !important;
  max-width: 720px;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 32px auto;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.18), 0 4px 10px -4px rgba(0,0,0,.06);
  background: var(--ink);
}

/* All other iframes (general fallback) — at least don't overflow */
.entry-content iframe { max-width: 100%; }

/* ── Twitter / X embed (blockquote.twitter-tweet) ──────────────────── */
.entry-content blockquote.twitter-tweet {
  margin: 32px auto !important;
  max-width: 550px !important;
  background: var(--paper);
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 8px;
  padding: 20px 22px !important;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  font-style: normal;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.08);
  position: relative;
}
.entry-content blockquote.twitter-tweet::before {
  content: '𝕏';
  position: absolute;
  top: 16px; right: 20px;
  font-size: 18px;
  color: var(--ink);
  opacity: .6;
  font-weight: 700;
}
.entry-content blockquote.twitter-tweet a {
  color: var(--accent-dark) !important;
  border-bottom: 0 !important;
}
.entry-content blockquote.twitter-tweet a:hover { text-decoration: underline; }
/* After widgets.js hydrates, Twitter swaps blockquote with its own iframe — handle that too */
.entry-content .twitter-tweet-rendered,
.entry-content iframe.twitter-tweet {
  margin: 32px auto !important;
  max-width: 550px !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.08);
}

/* ── Instagram embed ───────────────────────────────────────────────── */
.entry-content blockquote.instagram-media,
.entry-content .instagram-media-rendered {
  margin: 32px auto !important;
  max-width: 480px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.08) !important;
  border: 1px solid var(--line) !important;
}

/* ── Facebook embed ────────────────────────────────────────────────── */
.entry-content .fb-post,
.entry-content .fb-video,
.entry-content iframe[src*="facebook.com"] {
  display: block;
  margin: 32px auto !important;
  max-width: 550px;
  border-radius: 8px;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.08);
}

/* ── TikTok embed ──────────────────────────────────────────────────── */
.entry-content blockquote.tiktok-embed {
  margin: 32px auto !important;
  max-width: 360px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.08) !important;
}

/* Tables: clean borders, padding, kill inline height. Don't break the
   table semantics — let the table render at its intrinsic width, and use
   a wrapping scroll container for horizontal scrolling on narrow screens.
   The wrapper is either (a) an author-added <div style="overflow:auto">
   that we style, or (b) a div added by JS (see assets/js/main.js
   "auto-wrap wide tables"). */
.entry-content table {
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
}
.entry-content table[style] {
  height: auto !important;          /* kill inline height="1024px" Excel exports leave behind */
}
.entry-content table th,
.entry-content table td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.entry-content table th { background: var(--accent-soft); font-weight: 500; }

/* Scroll wrapper — for tables wider than container.
   Targets:
     - Author-added <div style="overflow:auto">…<table></div>
     - JS-added <div class="burart-table-scroll">…<table></div>
*/
.entry-content > .burart-lang-content > div[style*="overflow"],
.entry-content div[style*="overflow:auto"],
.entry-content div[style*="overflow: auto"],
.entry-content .burart-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto !important;
  overflow-y: hidden;
  background: var(--paper);
  position: relative;
}
.entry-content div[style*="overflow"] table,
.entry-content .burart-table-scroll table {
  margin: 0;
  max-width: none;        /* let the table keep its native width inside the scroll wrapper */
}

@media (max-width: 768px) {
  .entry-content table { font-size: 12px; }
  /* Hint at scrollability on touch devices */
  .entry-content div[style*="overflow"],
  .entry-content .burart-table-scroll {
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,.18);
  }
}

/* Final safety net — anything in the article body must respect column width. */
.entry-content > div,
.entry-content > div > *,
.burart-lang-content > * { max-width: 100%; }
.entry-content a { color: var(--accent-dark); border-bottom: 1px solid currentColor; }
.entry-content a:hover { color: var(--ink); }
.entry-content blockquote {
  border-left: 3px solid var(--accent); margin: 24px 0; padding: 4px 0 4px 16px; font-style: italic; color: var(--ink-soft);
}

/* All lang-content variants default to block. Hiding is controlled
   exclusively by:
     - PHP inline style="display:none;" on pre-rendered non-JA divs
     - JS inline style adjustments during switching
   A blanket `display:none` for [data-lang="en|zh|ko"] used to clash with
   `style.display = ''` (which only clears the inline style, letting the
   CSS rule kick back in and hide the just-rendered translation). */
.burart-lang-content { display: block; }
.burart-ai-loading { font-size: 12px; color: var(--muted); padding: 12px 0; }
.burart-ai-credit { font-size: 11px; color: var(--muted); margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* Related & nav */
.related-posts { margin: 64px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.related-posts h2 { font-size: 18px; margin-bottom: 16px; }
.post-navigation { display: flex; justify-content: space-between; gap: 16px; margin: 48px 0 0; font-size: 13px; }
.post-navigation a { color: var(--muted); }
.post-navigation a:hover { color: var(--accent-dark); }

/* ── Page archive (category / search) ────────────────────────────── */
.page-header { padding: 32px 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 32px; }
.page-header h1.page-title { font-size: clamp(26px, 3.5vw, 38px); margin: 0 0 8px; }
.page-header .page-desc { color: var(--muted); font-size: 14px; max-width: 640px; }

.pagination, .nav-links { display: flex; justify-content: center; gap: 6px; margin: 48px 0 0; }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--line); font-size: 13px;
  border-radius: var(--radius);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.pagination .page-numbers:hover, .nav-links .page-numbers:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ── Sidebar ─────────────────────────────────────────────────────── */
#secondary.widget-area { font-size: 14px; }
#secondary .widget { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
#secondary .widget:last-child { border-bottom: 0; }
#secondary .widget-title { font-family: var(--serif); font-size: 16px; margin: 0 0 12px; }
#secondary ul { list-style: none; padding: 0; margin: 0; }
#secondary li { padding: 4px 0; }
#secondary a { color: var(--ink-soft); }
#secondary a:hover { color: var(--accent-dark); }
#secondary .ad-slot {
  min-height: 250px; background: var(--line-soft); border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
}
#secondary .ad-slot::before { content: 'Sponsored'; }

/* ── Footer ──────────────────────────────────────────────────────── */
#site-footer { background: var(--paper-warm); border-top: 1px solid var(--line); padding: 48px 0 24px; margin-top: 64px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--serif); font-size: 20px; margin-bottom: 12px; }
.footer-desc { color: var(--muted); font-size: 13px; max-width: 320px; }
.footer-social { display: flex; gap: 18px; margin-top: 12px; }
.footer-social-icon { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.footer-social-icon:hover { color: var(--accent-dark); }
.footer-col-title { font-family: var(--serif); font-size: 14px; margin-bottom: 10px; letter-spacing: .02em; }
.footer-links { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--accent-dark); }
.footer-bottom {
  max-width: var(--container-max); margin: 32px auto 0; padding: 16px var(--container-pad) 0;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ── Translate overlay spinner ───────────────────────────────────── */
.translate-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.9);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.translate-overlay.active { display: flex; }
.translate-spinner { text-align: center; }
.spinner-ring {
  width: 36px; height: 36px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-text { font-size: 12px; color: var(--muted); }

/* ── Lightbox ─────────────────────────────────────────────────────── */
#burart-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center; z-index: 10000;
}
#burart-lightbox.active { display: flex; }
#burart-lightbox .lb-img-wrap { max-width: 90vw; max-height: 90vh; }
#burart-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
#burart-lightbox .lb-close, #burart-lightbox .lb-prev, #burart-lightbox .lb-next {
  position: absolute; background: none; border: 0; color: white; cursor: pointer;
  font-size: 30px; padding: 12px; line-height: 1;
}
#burart-lightbox .lb-close { top: 16px; right: 16px; font-size: 28px; }
#burart-lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); font-size: 40px; }
#burart-lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); font-size: 40px; }
#burart-lightbox .lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: white; font-size: 13px; }

/* ── Twenty20 before/after slider ─────────────────────────────────── */
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; user-select: none;
  background: var(--line-soft); margin: 24px 0; cursor: ew-resize;
}
.ba-slider img.ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider .ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba-slider .ba-before-wrap img.ba-before {
  position: absolute; inset: 0; width: 100vw; max-width: none; height: 100%; object-fit: cover; display: block;
}
.ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: white; left: 50%; }
.ba-slider .ba-handle-line { position: absolute; inset: 0; }
.ba-slider .ba-handle-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: ew-resize;
}
.ba-slider .ba-handle-dot::before, .ba-slider .ba-handle-dot::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.ba-slider .ba-handle-dot::before { left: 9px;  border-right: 6px solid var(--ink); }
.ba-slider .ba-handle-dot::after  { right: 9px; border-left:  6px solid var(--ink); }

/* ── Blogcard inline (magazine-style internal link card) ───────────── */
.burart-blogcard {
  margin: 32px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s ease;
  position: relative;
}
.burart-blogcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.12), 0 4px 8px -4px rgba(0,0,0,.05);
  border-color: var(--accent);
}
.burart-blogcard .bc-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  color: var(--ink);
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.burart-blogcard .bc-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  overflow: hidden;
}
.burart-blogcard .bc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.burart-blogcard:hover .bc-thumb img { transform: scale(1.05); }

/* Subtle eyebrow label on thumbnail (Read / 関連記事) */
.burart-blogcard .bc-thumb::before {
  content: 'Read';
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}

.burart-blogcard .bc-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}
.burart-blogcard .bc-cat {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.burart-blogcard .bc-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.burart-blogcard .bc-excerpt {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.burart-blogcard .bc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}
.burart-blogcard .bc-site {
  text-transform: lowercase;
  letter-spacing: .04em;
}
.burart-blogcard .bc-arrow {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent-dark);
  transition: transform .2s ease;
}
.burart-blogcard:hover .bc-arrow { transform: translateX(4px); }

/* Skeleton state while REST hydrating */
.burart-blogcard:not(.burart-bc-ready) {
  min-height: 150px;
  background: linear-gradient(90deg, var(--line-soft) 0%, var(--paper-warm) 50%, var(--line-soft) 100%);
  background-size: 200% 100%;
  animation: bc-skeleton 1.4s infinite ease-in-out;
}
.burart-blogcard.burart-bc-ready { animation: none; background: var(--paper); }
@keyframes bc-skeleton { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Mobile — stack vertically with image on top */
@media (max-width: 600px) {
  .burart-blogcard .bc-inner { grid-template-columns: 1fr; }
  .burart-blogcard .bc-thumb { aspect-ratio: 16 / 9; }
  .burart-blogcard .bc-body { padding: 16px 18px 20px; }
  .burart-blogcard .bc-title { font-size: 18px; }
}

/* External link variant (when href is not internal) */
.burart-blogcard.burart-bc-external { border-style: dashed; }
.burart-blogcard.burart-bc-external .bc-thumb::before { content: 'Link'; }

/* ── Reduce motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}