/* /assets/css/benmi-event.css?v=20260901-edit-01
   =========================================================
   BENMI event-detail internal layout.
   The outer shell is intentionally the BENMI HOME shell:
   common header -> BENMI KV zone -> sticky nav -> main surface.
   /assets/css/benmi-home.css?v=20260831-edit-02 is the source of truth for that shell.
   This file styles only event-detail content inside main.
   ========================================================= */

body[data-page="benmi"][data-benmi-kind="event"]{
  --benmi-event-ink: rgba(247,250,255,.96);
  --benmi-event-muted: rgba(226,235,248,.76);
  --benmi-event-line: rgba(236,244,255,.28);
  --benmi-event-panel: rgba(3,11,28,.68);
  background:#000;
  color:var(--benmi-event-ink);
}

body[data-page="benmi"][data-benmi-kind="event"] #benmiHomeView{
  display:none !important;
}

/* Same full-width main-background surface as BENMI HOME.
   Only the inner block stream is constrained to the site width. */
body[data-page="benmi"][data-benmi-kind="event"] .benmi-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 0 clamp(70px,8vw,120px);
}

body[data-page="benmi"][data-benmi-kind="event"] #blocksRoot{
  width:var(--bgw);
  max-width:var(--max);
  margin-inline:auto;
}

/* =========================================================
   Blocks: one visual system, content remains event-specific
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] .block{
  width:100%;
  margin:0;
  padding:0 !important;
  min-height:0 !important;
  overflow:visible;
  border:0;
  border-radius:0;
  box-shadow:none !important;
  background:transparent !important;
  color:var(--benmi-event-ink) !important;
  transition:none !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .block:hover{
  background:transparent !important;
  color:var(--benmi-event-ink) !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .block + .block{
  margin-top:clamp(64px,6.5vw,94px);
}

/* Moonlight chapter band, matching BENMI HOME. */
body[data-page="benmi"][data-benmi-kind="event"] .block-title{
  box-sizing:border-box;
  width:100vw;
  min-height:76px;
  margin:0 0 clamp(28px,3.2vw,44px);
  margin-left:calc(50% - 50vw);
  padding:0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:url("/soz/benmiframe/obi.png?v=20260831-edit-02") center/cover no-repeat;
  border-top:1px solid rgba(182,205,236,.14);
  border-bottom:1px solid rgba(182,205,236,.18);
  text-align:center !important;
  text-transform:none;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-title__en{
  display:block;
  font-family:var(--nav-pc-font,"MOBO",system-ui,sans-serif);
  font-size:clamp(22px,2.3vw,27px);
  line-height:1;
  letter-spacing:.12em;
  color:#fff;
  text-transform:uppercase;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-title__ja{
  display:block;
  font-family:var(--font-body,"MS PGothic","Noto Sans JP",sans-serif);
  font-size:12px;
  line-height:1.15;
  letter-spacing:.04em;
  color:#111F43;
  font-weight:700;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-body{
  padding:0 !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-inner{
  width:min(88%,860px);
  margin:0 auto;
  padding:0 !important;
  box-sizing:border-box;
}

body[data-page="benmi"][data-benmi-kind="event"] .rich{
  font-family:var(--font-body,"MS PGothic","Noto Sans JP",sans-serif);
  font-size:15px;
  line-height:1.95;
  color:rgba(247,250,255,.94);
}

body[data-page="benmi"][data-benmi-kind="event"] .rich p{
  margin:.75em 0;
}

body[data-page="benmi"][data-benmi-kind="event"] .rich a{
  color:#e6f0ff !important;
  text-decoration:underline !important;
  text-underline-offset:.18em;
}

body[data-page="benmi"][data-benmi-kind="event"] .rich img{
  max-width:100%;
  height:auto;
}

body[data-page="benmi"][data-benmi-kind="event"] .rich hr,
body[data-page="benmi"][data-benmi-kind="event"] .rich div[style*="border-top"]{
  border-color:rgba(225,237,252,.24) !important;
}

/* =========================================================
   Event data / record helper
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] .kv-grid{
  width:min(94%,900px);
  margin:0 auto;
  display:grid;
  gap:0;
  border-top:1px solid var(--benmi-event-line);
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-row{
  display:grid;
  grid-template-columns:minmax(135px,180px) 1fr;
  gap:clamp(18px,3vw,38px);
  align-items:start;
  padding:20px 4px;
  border-bottom:1px solid var(--benmi-event-line);
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-label{
  font-family:var(--nav-pc-font,"MOBO",system-ui,sans-serif);
  font-size:16px;
  line-height:1.2;
  letter-spacing:.12em;
  color:rgba(225,236,250,.76);
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-value{
  font-family:var(--font-body,"MS PGothic","Noto Sans JP",sans-serif);
  font-size:clamp(20px,2.6vw,30px);
  line-height:1.5;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-value[style]{
  font-size:14px !important;
  line-height:1.65 !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-value > span[style]{
  font-size:12px !important;
  line-height:1.5 !important;
  color:rgba(230,238,249,.72) !important;
}

/* =========================================================
   Gallery: retain the entire source image; masonry-like flow.
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] [data-block-key="gallery"] .block-inner{
  width:100%;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery{
  display:block !important;
  columns:3;
  column-gap:12px;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-item{
  display:inline-block;
  width:100%;
  margin:0 0 12px;
  break-inside:avoid;
  vertical-align:top;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-zoom{
  display:block;
  width:100%;
  overflow:hidden;
  background:#000;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-zoom img,
body[data-page="benmi"][data-benmi-kind="event"] .gallery-item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.68);
  box-sizing:border-box;
  filter:brightness(.94);
  transition:filter .18s ease;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-zoom:hover img,
body[data-page="benmi"][data-benmi-kind="event"] .gallery-zoom:focus-visible img{
  filter:brightness(1.05);
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-item figcaption{
  margin:.5em 0 .2em;
  color:var(--benmi-event-muted);
  font-size:12px;
  line-height:1.55;
}

/* =========================================================
   Report / FAQ / buttons
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] .report-block .report-list{
  width:min(88%,860px);
  margin:0 auto;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

body[data-page="benmi"][data-benmi-kind="event"] .report-block .report-list__item{
  display:block;
  padding:14px 16px;
  border:1px solid rgba(214,231,252,.28);
  background:rgba(2,10,25,.66);
  color:#fff;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}

body[data-page="benmi"][data-benmi-kind="event"] .report-block .report-link:hover{
  opacity:1;
  text-decoration:underline !important;
  text-underline-offset:.18em;
}

body[data-page="benmi"][data-benmi-kind="event"] .btn{
  border:1px solid rgba(224,237,253,.48) !important;
  background:rgba(2,10,25,.72) !important;
  color:#fff !important;
  border-radius:0 !important;
}

body[data-page="benmi"][data-benmi-kind="event"] .faq{
  width:min(88%,860px);
  margin:0 auto;
}

body[data-page="benmi"][data-benmi-kind="event"] .faq-item{
  border-top:1px solid rgba(214,231,252,.24);
}

body[data-page="benmi"][data-benmi-kind="event"] .faq-q{
  color:#fff;
  font-size:15px;
}

/* Generic figures and externally embedded images. */
body[data-page="benmi"][data-benmi-kind="event"] .rich-figure{
  color:var(--benmi-event-ink);
}

body[data-page="benmi"][data-benmi-kind="event"] .rich-figure img{
  border:1px solid rgba(255,255,255,.54);
}

/* =========================================================
   SP
   ========================================================= */
@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="event"] .benmi-wrap{
    padding-bottom:70px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .block-title{
    min-height:60px;
    margin-bottom:24px;
    gap:4px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .block-title__en{
    font-size:20px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .block-title__ja{
    font-size:10px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .block + .block{
    margin-top:52px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .block-inner,
  body[data-page="benmi"][data-benmi-kind="event"] .report-block .report-list,
  body[data-page="benmi"][data-benmi-kind="event"] .faq{
    width:100%;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .rich{
    font-size:14px;
    line-height:1.9;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-grid{
    width:100%;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-row{
    grid-template-columns:1fr;
    gap:7px;
    padding:16px 0;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-label{
    font-size:13px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-value{
    font-size:20px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .gallery{
    columns:2;
    column-gap:8px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .gallery-item{
    margin-bottom:8px;
  }

}

@media (max-width:420px){
  body[data-page="benmi"][data-benmi-kind="event"] .gallery{
    columns:1;
  }
}

/* =========================================================
   Draft 02: shared-header -> event KV -> BENMI sticky nav
   ========================================================= */
@media (min-width:768px){
  /* The common header logo remains, but its old image-map navigation is
     suppressed on event detail pages. Navigation starts at the sticky bar. */
  body[data-page="benmi"][data-benmi-kind="event"] #navDesktopSlot{
    display:none !important;
  }
}


body[data-page="benmi"][data-benmi-kind="event"] .benmi-wrap #blocksRoot > .block:first-child{
  /* Match BENMI HOME: sticky -> first obi spacing. */
  margin-top:clamp(12px,1.1vw,18px);
}

/* =========================================================
   EVENT DATA / RECORD
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] .kv-subvalue{
  display:block;
  margin-top:.35em;
  font-size:13px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:.015em;
  color:rgba(250,252,255,.98);
  text-shadow:0 1px 10px rgba(0,7,24,.48);
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-address-link{
  text-decoration:none;
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-address-link:hover,
body[data-page="benmi"][data-benmi-kind="event"] .kv-address-link:focus-visible{
  text-decoration:underline;
  text-underline-offset:.18em;
}

body[data-page="benmi"][data-benmi-kind="event"] .event-data-note,
body[data-page="benmi"][data-benmi-kind="event"] .record-note{
  width:min(94%,900px);
  margin:18px auto 0;
  font-size:13px;
  line-height:1.7;
  color:rgba(230,238,249,.72);
}

body[data-page="benmi"][data-benmi-kind="event"] .kv-value--lineup{
  font-size:13px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:.015em;
  color:rgba(250,252,255,.98);
  text-shadow:0 1px 10px rgba(0,7,24,.48);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-tables{
  width:min(94%,900px);
  margin:clamp(28px,3.5vw,44px) auto 0;
  display:grid;
  gap:28px;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-table-title{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.5;
  color:#fff;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:rgba(2,10,25,.42);
  border-top:1px solid rgba(230,240,253,.28);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-table th,
body[data-page="benmi"][data-benmi-kind="event"] .record-table td{
  padding:11px 14px;
  border-bottom:1px solid rgba(230,240,253,.18);
  text-align:left;
  font-size:14px;
  line-height:1.55;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-table thead th{
  color:rgba(225,236,250,.70);
  font-size:12px;
  letter-spacing:.08em;
  font-weight:700;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-table th:last-child,
body[data-page="benmi"][data-benmi-kind="event"] .record-table td:last-child{
  width:28%;
  text-align:right;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-insights,
body[data-page="benmi"][data-benmi-kind="event"] .record-extra{
  width:min(94%,900px);
  margin:clamp(30px,4vw,50px) auto 0;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-insight{
  width:min(100%,560px);
  margin:0 auto;
  text-align:center;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-insight img,
body[data-page="benmi"][data-benmi-kind="event"] .record-extra img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.54);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-insight figcaption,
body[data-page="benmi"][data-benmi-kind="event"] .record-extra figcaption{
  margin-top:.65em;
  font-size:12px;
  line-height:1.55;
  color:var(--benmi-event-muted);
}

/* =========================================================
   TOPICS: large visual + thumbnails; copy stays below visual
   ========================================================= */
body[data-page="benmi"][data-benmi-kind="event"] [data-block-key="topics"] .block-inner,
body[data-page="benmi"][data-benmi-kind="event"] .topics-block .block-inner{
  width:min(94%,900px);
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-stage{
  width:100%;
  background:#000;
  border:1px solid rgba(255,255,255,.66);
  overflow:hidden;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-stage__img{
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  margin:0 auto;
  opacity:1;
  transition:opacity .34s ease;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-stage__img.is-changing{
  opacity:.15;
}

/* Shared optional heading/body typography for all event-detail sections. */
body[data-page="benmi"][data-benmi-kind="event"] .block-intro{
  width:min(94%,900px);
  margin:0 auto clamp(22px,2.8vw,34px);
}

body[data-page="benmi"][data-benmi-kind="event"] .section-copy{
  font-family:var(--font-body,"MS PGothic","Noto Sans JP",sans-serif);
  color:var(--benmi-event-ink);
}

body[data-page="benmi"][data-benmi-kind="event"] .section-copy__title{
  margin:0;
  font-family:inherit;
  font-size:17px;
  line-height:1.55;
  font-weight:700;
  letter-spacing:.015em;
  color:#fff;
}

body[data-page="benmi"][data-benmi-kind="event"] .section-copy__text{
  margin:.5em 0 0;
  font-family:inherit;
  font-size:14px;
  line-height:1.8;
  font-weight:400;
  letter-spacing:.01em;
  color:rgba(238,244,252,.86);
  white-space:pre-line;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-copy{
  padding:16px 2px 4px;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;
  margin-top:18px;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-thumb{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  padding:0;
  border:1px solid rgba(255,255,255,.48);
  border-radius:0;
  overflow:hidden;
  background:#000;
  cursor:pointer;
  opacity:.72;
  transition:opacity .18s ease,border-color .18s ease,filter .18s ease;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-thumb:hover,
body[data-page="benmi"][data-benmi-kind="event"] .topics-thumb:focus-visible,
body[data-page="benmi"][data-benmi-kind="event"] .topics-thumb.is-current{
  opacity:1;
  border-color:#fff;
  filter:brightness(1.08);
}

@media (max-width:767px){

  body[data-page="benmi"][data-benmi-kind="event"] .benmi-wrap #blocksRoot > .block:first-child{
    margin-top:12px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .event-data-note,
  body[data-page="benmi"][data-benmi-kind="event"] .record-note,
  body[data-page="benmi"][data-benmi-kind="event"] .record-tables,
  body[data-page="benmi"][data-benmi-kind="event"] .record-insights,
  body[data-page="benmi"][data-benmi-kind="event"] .record-extra,
  body[data-page="benmi"][data-benmi-kind="event"] .topics-block .block-inner{
    width:100%;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-subvalue{
    font-size:12px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .kv-value--lineup{
    font-size:12px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .record-table th,
  body[data-page="benmi"][data-benmi-kind="event"] .record-table td{
    padding:9px 10px;
    font-size:13px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .section-copy__title{
    font-size:16px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .section-copy__text{
    font-size:13px;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .topics-thumbs{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-top:14px;
  }
}

/* =========================================================
   Draft 03: shared BENMI shell + image roles
   ========================================================= */

/* Generic per-block KV. Every blocks.json block can specify block.kv. */
body[data-page="benmi"][data-benmi-kind="event"] .block-kv{
  width:min(94%,900px);
  margin:0 auto clamp(26px,3.6vw,46px);
  text-align:center;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-kv img{
  display:block;
  width:100%;
  max-height:72vh;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.62);
  box-sizing:border-box;
  background:#000;
}

body[data-page="benmi"][data-benmi-kind="event"] .block-kv--contain img{ object-fit:contain; }
body[data-page="benmi"][data-benmi-kind="event"] .block-kv--cover img{ object-fit:cover; }

body[data-page="benmi"][data-benmi-kind="event"] .block-kv figcaption{
  margin:.65em 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--benmi-event-muted);
}

/* RECORD: JSON-generated pie charts. */
body[data-page="benmi"][data-benmi-kind="event"] .record-charts{
  width:min(94%,900px);
  margin:clamp(30px,4vw,50px) auto 0;
  display:grid;
  gap:34px;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-chart__title{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.5;
  color:#fff;
  text-align:center;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-layout{
  display:grid;
  grid-template-columns:minmax(210px,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,46px);
  align-items:center;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie{
  width:min(100%,300px);
  aspect-ratio:1 / 1;
  margin:0 auto;
  border-radius:50%;
  background:var(--record-pie,conic-gradient(#dcecff 0 100%));
  border:1px solid rgba(240,247,255,.60);
  box-shadow:0 0 28px rgba(96,145,210,.12);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend{
  display:grid;
  gap:8px;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__row{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto 54px;
  gap:10px;
  align-items:center;
  min-height:28px;
  padding:4px 0;
  border-bottom:1px solid rgba(222,236,253,.12);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__swatch{
  display:block;
  width:11px;
  height:11px;
  background:var(--record-pie-color,#dcecff);
  border:1px solid rgba(255,255,255,.40);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__label,
body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__value,
body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__pct{
  font-size:13px;
  line-height:1.45;
  color:rgba(242,247,255,.90);
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__value{
  font-weight:700;
  text-align:right;
}

body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__pct{
  color:rgba(225,236,250,.66);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* TOPICS order: main KV -> centered thumbnails -> caption/title. */
body[data-page="benmi"][data-benmi-kind="event"] .topics-thumbs{
  grid-template-columns:repeat(auto-fit,minmax(96px,110px));
  justify-content:center;
  margin:18px auto 0;
}

body[data-page="benmi"][data-benmi-kind="event"] .topics-copy{
  padding:16px 2px 4px;
  text-align:center;
}

/* Large galleries are progressive. Only the first batch exists as live img
   elements; later batches stay inside inert <template> nodes until requested. */
body[data-page="benmi"][data-benmi-kind="event"] .gallery-more{
  display:block;
  width:min(100%,360px);
  margin:24px auto 0;
  padding:12px 18px;
  border:1px solid rgba(224,237,253,.42);
  border-radius:0;
  background:rgba(2,10,25,.68);
  color:#fff;
  font-family:var(--nav-pc-font,"MOBO",system-ui,sans-serif);
  font-size:13px;
  letter-spacing:.10em;
  cursor:pointer;
}

body[data-page="benmi"][data-benmi-kind="event"] .gallery-more:hover,
body[data-page="benmi"][data-benmi-kind="event"] .gallery-more:focus-visible{
  background:rgba(13,29,57,.86);
  border-color:rgba(239,247,255,.72);
}

@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="event"] .block-kv,
  body[data-page="benmi"][data-benmi-kind="event"] .record-charts{
    width:100%;
  }

  body[data-page="benmi"][data-benmi-kind="event"] .topics-thumbs{
    grid-template-columns:repeat(4,minmax(0,1fr));
    justify-content:center;
  }
}

/* Draft 04: pie chart mobile layout. */
@media (max-width:767px){
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie-layout{
    grid-template-columns:1fr;
    gap:22px;
  }
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie{
    width:min(78vw,280px);
  }
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__row{
    grid-template-columns:12px minmax(0,1fr) auto 48px;
    gap:8px;
  }
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__label,
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__value,
  body[data-page="benmi"][data-benmi-kind="event"] .record-pie-legend__pct{
    font-size:12px;
  }
}