/* 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. Sidebar is now hidden — main takes the full container
   width, with single-article body capped for readability further down. */
.with-sidebar { display: grid; grid-template-columns: 1fr; gap: 32px; }
.with-sidebar > aside { display: none; }

/* 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: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.logo .logo-text { display: inline-block; }
/* art on ワードマーク（横位置・可変幅）。.logo-mark は 1em 角の前提なので別クラスにする */
/* フッターの art on ワードマーク */
.footer-brand .footer-wordmark {
  display: block;
  width: auto;
  height: 32px;
  object-fit: contain;
}
.logo .logo-wordmark {
  display: inline-block;
  width: auto;
  height: 1em;
  max-height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo .logo-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex-shrink: 0;
}
#primary-nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
/* Top-level nav: centered, generous spacing, magazine serif feel */
#primary-nav > ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  flex-wrap: wrap;
  align-items: center;
}
#primary-nav > ul > li { position: relative; }
#primary-nav > ul > li > a {
  padding: 8px 4px;
  display: inline-block;
  text-transform: lowercase;
  letter-spacing: .01em;
  font-weight: 400;
}

/* 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);
}

/* Desktop default: chip hidden, all 4 buttons shown inline.
   Mirrors biscuit-gallery-theme's responsive behavior. */
.lang-chip { display: none; }
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 4px;
}
.lang-btn {
  background: none; border: 0; padding: 5px 10px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink); border-radius: var(--radius);
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}
.lang-btn:hover:not(.active) { 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 { display: none; }
  .mobile-menu-btn { display: block; }

  /* 3-column grid: [menu btn] [logo centered] [lang chip right-end]
     Same pattern as biscuit-gallery-theme so the language switcher
     always pins to the right edge of the viewport. */
  .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .mobile-menu-btn { justify-self: start; }
  .logo { justify-self: center; }
  .header-right { justify-self: end; }

  /* Mobile: show chip, hide inline switcher until chip opens it */
  .lang-wrap { display: inline-flex; position: relative; }
  .lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 10px;
    font: inherit; font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
  }
  .lang-chip:hover { border-color: var(--accent); }
  .lang-chip-arrow { width: 12px; height: 12px; transition: transform .2s ease; }
  .lang-wrap.open .lang-chip-arrow { transform: rotate(180deg); }
  .lang-switcher {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    z-index: 200;
    min-width: 90px;
  }
  .lang-wrap.open .lang-switcher { display: flex; }
  .lang-switcher .lang-btn {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ── Front-page hero & magazine grid ─────────────────────────────── */
.fp-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
.fp-hero h1 {
  font-size: clamp(56px, 11vw, 132px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.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); }
/* First section sits directly under the site header, so give it a little
   breathing room without becoming a hero. */
.fp-section--first { padding-top: 56px; }

/* ── Featured slideshow ───────────────────────────────────────────── */
.fp-slideshow {
  position: relative;
  width: 100%;
  background: var(--ink);
  overflow: hidden;
  /* Slot just below sticky header — full-bleed */
}
.fp-slides {
  position: relative;
  width: 100%;
  /* Compact height that scales with viewport without dominating the page.
     Mobile clamps at 240px, desktop tops out at 560px. */
  height: clamp(240px, 40vw, 560px);
  overflow: hidden;
}
.fp-slide {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
  pointer-events: none;
}
.fp-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s ease, visibility 0s linear 0s;
  z-index: 2;
}
.fp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 6s ease;
}
.fp-slide.active img { transform: scale(1); }
.fp-slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 5vw, 64px);
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, transparent 75%);
}
.fp-slide-cat {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
  color: #fff;
}
.fp-slide-title {
  font-family: var(--serif);
  font-size: clamp(20px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  max-width: 900px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-slide-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(12px, 2.5vw, 24px);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
.fp-slide-dot {
  width: 32px;
  height: 3px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s ease, transform .2s ease;
}
.fp-slide-dot.active { background: #fff; transform: scaleY(1.4); }
.fp-slide-dot:hover:not(.active) { background: rgba(255,255,255,.7); }

.fp-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s ease, background .15s ease;
}
.fp-slideshow:hover .fp-slide-arrow,
.fp-slide-arrow:focus { opacity: 1; }
.fp-slide-arrow:hover { background: rgba(255,255,255,.35); }
.fp-slide-arrow--prev { left: 16px; }
.fp-slide-arrow--next { right: 16px; }

/* Mobile slideshow tweaks (height already controlled by clamp above) */
@media (max-width: 600px) {
  .fp-slide-title { font-size: 18px; -webkit-line-clamp: 2; }
  .fp-slide-overlay { padding: 16px 16px 32px; }
  .fp-slide-cat { font-size: 10px; padding: 3px 10px; margin-bottom: 8px; }
  .fp-slide-arrow { display: none; }   /* swipe is enough on touch */
  .fp-slide-dot { width: 22px; height: 2px; }
}
.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); } }
/* Mobile keeps 2 columns for content density (instead of collapsing to 1). */
@media (max-width: 500px) {
  .cat-pickup { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .article-card .card-thumb { aspect-ratio: 4 / 3; margin-bottom: 8px; }
  .article-card .card-cat { font-size: 10px; margin-bottom: 2px; letter-spacing: .06em; }
  .article-card .card-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 3; }
  .article-card .card-meta { font-size: 11px; }
  /* fp-section header / section pad tightening on mobile */
  .fp-section { padding: 32px 0; }
  .fp-section--first { padding-top: 32px; }
  .fp-section-head { margin-bottom: 16px; }
  .fp-section-head h2 { font-size: 22px; }
}

/* ── Single article ──────────────────────────────────────────────── */
/* Constrain readable elements to ~820px for comfortable line length while
   keeping the featured image and related-posts grid at full container width. */
.single-article .entry-header,
.single-article .entry-content,
.single-article .post-navigation,
.single-article .ex-card {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.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; }

/* Global image safety net: ~857 legacy posts embed <img width="1600+"> as raw
   HTML attrs without a wrapping figure/wp-caption/gallery/block-image. The
   per-class rules below would miss those, so cap them here once. */
.entry-content img { max-width: 100%; height: auto; }

/* Tables with hard-coded inline pixel widths (post #10821, #27479, #455 etc.)
   would overflow on mobile. Wrap visually with a scrollable region and
   force the table itself to honour the column width. */
.entry-content table {
  max-width: 100% !important;
  width: auto !important;
  display: block;
  overflow-x: auto;
  margin: 24px 0;
  border-collapse: collapse;
}
.entry-content table td,
.entry-content table th { border: 1px solid var(--line); padding: 8px 12px; }

/* 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%; }

/* ── Classic [gallery] shortcode (WP core) ──────────────────────────
   Renders <div class="gallery gallery-columns-N gallery-size-*"> with
   <figure class="gallery-item"><div class="gallery-icon"><a><img></a></div></figure>.
   add_theme_support('html5', ['gallery']) suppresses WP's auto-injected
   inline CSS, so the theme must provide the grid layout itself. */
.entry-content .gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
  gap: 8px;
  margin: 24px 0;
  padding: 0;
  clear: both;
}
.entry-content .gallery-columns-1 { --gallery-cols: 1; }
.entry-content .gallery-columns-2 { --gallery-cols: 2; }
.entry-content .gallery-columns-3 { --gallery-cols: 3; }
.entry-content .gallery-columns-4 { --gallery-cols: 4; }
.entry-content .gallery-columns-5 { --gallery-cols: 5; }
.entry-content .gallery-columns-6 { --gallery-cols: 6; }
.entry-content .gallery-columns-7 { --gallery-cols: 7; }
.entry-content .gallery-columns-8 { --gallery-cols: 8; }
.entry-content .gallery-columns-9 { --gallery-cols: 9; }
.entry-content .gallery-item {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.entry-content .gallery-icon {
  margin: 0;
  padding: 0;
}
.entry-content .gallery-icon a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #f4f4f2;
}
.entry-content .gallery-icon img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .3s ease;
}
.entry-content .gallery-icon a:hover img { transform: scale(1.04); }
.entry-content .gallery-caption {
  display: block;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-mid, #666);
  text-align: center;
}
/* Gutenberg block gallery: keep its own flex layout, just cap images */
.entry-content .wp-block-gallery img { max-width: 100%; height: auto; }

/* Mobile: collapse 4+ column galleries to 2 columns */
@media (max-width: 640px) {
  .entry-content .gallery-columns-4,
  .entry-content .gallery-columns-5,
  .entry-content .gallery-columns-6,
  .entry-content .gallery-columns-7,
  .entry-content .gallery-columns-8,
  .entry-content .gallery-columns-9 { --gallery-cols: 2; }
  .entry-content .gallery { gap: 6px; }
}

/* ── 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);
}

/* Google Maps embed — responsive 4:3 (Maps default ratio) */
.entry-content iframe[src*="google.com/maps/embed"],
.entry-content iframe[src*="maps.google.com"] {
  display: block;
  width: 100% !important;
  max-width: 720px;
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: 32px auto;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.10);
}

/* 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); }

/* ── Exhibition info card (auto-rendered on category=exhibition) ─── */
.ex-card {
  margin: 48px 0 16px;
  padding: 28px 32px 30px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  font-family: var(--sans);
}
.ex-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-dark);
  margin-bottom: 10px;
  font-weight: 500;
}
.ex-card-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--ink);
}
.ex-card-title-en {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 16px;
  letter-spacing: .01em;
}
.ex-card-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.ex-card-dl dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  padding-top: 1px;
}
.ex-card-dl dd {
  margin: 0;
  color: var(--ink);
}
.ex-card-dl dd a {
  color: var(--accent-dark);
  border-bottom: 1px solid currentColor;
}
.ex-card-dl dd a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .ex-card { padding: 22px 22px 24px; margin-bottom: 28px; }
  .ex-card-title { font-size: 19px; }
  .ex-card-dl { gap: 6px 16px; font-size: 13px; }
  .ex-card-dl dt { font-size: 11px; }
}

/* Related & nav */
.related-posts {
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.related-posts--more {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.related-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}
.related-head .more-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent-dark);
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.related-head .more-link:hover { border-bottom-color: currentColor; color: var(--ink); }
@media (max-width: 600px) {
  .related-head h2 { font-size: 19px; }
  .related-head .more-link { font-size: 12px; }
  .related-posts { margin-top: 48px; padding-top: 24px; }
  .related-posts--more { margin-top: 32px; }
}
.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; }
}

/* ── Overflow safety net (2026-08-28) ─────────────────────────────────
   Legacy [caption] markup emits <figure style="width:1500px">. The caps
   for those used to be scoped to .entry-content, so when broken markup
   (unbalanced </div>) pushed a figure outside the article wrapper the
   figure rendered at its native pixel width and blew the page out
   horizontally on phones. These rules are container-independent on
   purpose — they hold even if the wrapper breaks again. */
figure.wp-caption,
figure[style*="width"],
.wp-caption { max-width: 100% !important; width: auto !important; }
figure.wp-caption img,
.wp-caption img { width: 100% !important; height: auto !important; }
.wp-caption-text { width: auto !important; }
.aligncenter, .alignnone, .alignleft, .alignright { max-width: 100%; }
.gallery { max-width: 100%; }
table[width], table[style*="width"] { display: block; overflow-x: auto; max-width: 100%; }

/* ── Detection banner: stop it blowing out narrow viewports (2026-08-28)
   .banner-text is a flex item with flex:1 but no min-width:0, so its
   min-content width (an unbreakable JA sentence) forced .banner-inner
   wider than the screen and made the whole document scroll sideways on
   phones. Purely an overflow fix — no visual change above ~600px. */
#detection-banner .banner-inner { flex-wrap: wrap; }
#detection-banner .banner-text { min-width: 0; overflow-wrap: anywhere; }
#detection-banner .banner-change,
#detection-banner .banner-dismiss { flex: 0 0 auto; }

/* ── Long unbreakable strings (2026-08-28) ────────────────────────────
   Legacy posts contain bare twitter.com / instagram.com URLs that used
   to auto-embed. oEmbed no longer resolves them, so they render as one
   unbreakable ~460px token and push the layout sideways on phones. */
.entry-content, .burart-lang-content { overflow-wrap: break-word; word-break: break-word; }
.entry-content a { overflow-wrap: anywhere; }

/* ── Mobile overflow round 2 (2026-08-28) ─────────────────────────────
   Found by a full-site sweep of 1,267 URLs rendered at 390px.
   Each rule removes one confirmed horizontal-overflow source. */

/* 1. 展覧会情報カード (801 posts). Grid items default to min-width:auto,
      so a long unbreakable 公式URL in <dd> forced the grid past the screen. */
.ex-card-dl dt,
.ex-card-dl dd { min-width: 0; overflow-wrap: anywhere; }

/* 2. <pre> from legacy pasted press releases (21 posts). Default
      white-space:pre never wraps, so long JA lines ran off the screen. */
.entry-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  max-width: 100%;
  font-family: inherit;
}

/* 3. <video width="773"> had no cap — only <img> did (1 post). */
video,
.entry-content video { max-width: 100%; height: auto; }

/* 4. Instagram's embed.js gives its iframe position:absolute, so width:100%
      resolved against the viewport instead of the article column and the
      iframe stuck out to the right. Giving .entry-content a positioning
      context fixes it for any third-party embed that does the same.
      (.ba-slider already sets position:relative, so nothing else moves.) */
.entry-content { position: relative; }
.entry-content iframe.instagram-media,
.entry-content iframe.wp-embedded-content {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ── External link cards: keep the URL verbatim (2026-08-28) ───────────
   .bc-site is lowercased for the internal-card "burart.jp" byline, but
   external cards print a real URL there. Instagram/X shortcodes are
   case-sensitive, so a lowercased B5Xnur1hv0_ reads as a broken link. */
.burart-blogcard.burart-bc-external .bc-site { text-transform: none; }

/* ── Legibility pass (2026-08-28) ─────────────────────────────────────
   Measured on the live site: --muted #767676 on the warm --paper
   background is 4.35:1, under the WCAG AA floor of 4.5:1 for body text,
   and the card byline was 11px — small for Japanese. */
:root { --muted: #6A6A6A; }               /* 4.35:1 → 5.18:1 on #FAFAF8 */
@media (max-width: 600px) {
  .article-card .card-meta { font-size: 12px; }   /* was 11px */
}

/* Language banner close button: the glyph stays 18px, the hit area grows
   to the 44px minimum without changing the visual weight. */
#detection-banner .banner-dismiss {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -13px 0;          /* absorb the extra height so the bar keeps its size */
}