/* =========================================================
   v4 — editorial news layout + per-section emblem slots
   ========================================================= */

/* ---------- news: horizontal lead + two-column rows (balanced image/text) ---------- */
.news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.news-src { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--text-3); }
.news-src i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--crimson)); flex-shrink: 0; }
.news-src b { font-weight: var(--w-semi); color: var(--text-2); }
.news-src time::before { content: "·"; margin-inline-end: .5rem; }

.news-lead {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; border-radius: var(--radius-l); overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-height: 260px; max-height: 340px;
  transition: background-color .2s, transform .15s var(--ease-out), box-shadow .25s; animation: rise .5s var(--ease-out) both;
}
.news-lead:hover { background: var(--surface-2); }
.news-lead:active { transform: scale(.992); }
.news-lead__img { position: relative; overflow: hidden; background: var(--surface-2); }
.news-lead__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.news-lead:hover .news-lead__img img { transform: scale(1.03); }
.news-lead__body { display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.news-lead__title {
  font-family: var(--font); font-weight: var(--w-bold); font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.25; color: var(--text); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html[lang="en"] .news-lead__title { letter-spacing: -.015em; }
.news-lead__sum {
  font-family: var(--font); font-weight: var(--w-light); font-size: .95rem; line-height: 1.65; color: var(--text-2); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.news__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; }
.news-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .65rem; border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s, transform .15s var(--ease-out), box-shadow .25s; animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.news-row:hover { background: var(--surface-2); }
.news-row:active { transform: scale(.985); }
.news-row__img { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.news-row__img img { width: 100%; height: 100%; object-fit: cover; }
.news-row__body { display: grid; gap: .3rem; min-width: 0; }
.news-row__title {
  font-family: var(--font); font-weight: var(--w-semi); font-size: .98rem; line-height: 1.35; color: var(--text); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row__sum {
  font-family: var(--font); font-weight: var(--w-light); font-size: .84rem; line-height: 1.5; color: var(--text-3); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: hover) {
  .news-lead:hover, .news-row:hover { box-shadow: inset 0 0 0 1.5px rgba(244,234,192,.32), 5px 5px 0 rgba(200,16,46,.55); }
  html[dir="rtl"] .news-lead:hover, html[dir="rtl"] .news-row:hover { box-shadow: inset 0 0 0 1.5px rgba(244,234,192,.32), -5px 5px 0 rgba(200,16,46,.55); }
}
@media (max-width: 980px) { .news__list { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .news-lead { grid-template-columns: 1fr; max-height: none; }
  .news-lead__img { aspect-ratio: 16 / 9; }
  .news-row { grid-template-columns: 112px minmax(0, 1fr); gap: .75rem; }
  .news-row__sum { display: none; }
}
.news .skeleton--feature { height: 280px; border-radius: var(--radius-l); margin: 0; }
.news .skeleton--card { height: 110px; margin: 0; }

/* ---------- per-section emblem slot (inline-end of every section head) ---------- */
.section__head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.section__head > :first-child:not(.kicker) { flex: 1 1 auto; min-width: 0; }
.section__head:not(.section__head--row) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; }
.section__head:not(.section__head--row) > :not(.emblem-slot) { grid-column: 1; }
.section__head:not(.section__head--row) > .emblem-slot { grid-column: 2; grid-row: 1 / span 3; }
.emblem-slot { display: block; width: 132px; height: 132px; flex-shrink: 0; order: 9; margin-block: -8px; }
.section__head--row > div:first-child { flex: 1 1 auto; }
@media (max-width: 720px) { .emblem-slot { width: 84px; height: 84px; } .section__head--row .emblem-slot { display: none; } }

/* in the Arabic layout, English/Japanese titles still align to the reading edge */
html[dir="rtl"] [dir="auto"] { text-align: right; }

/* ---------- the emblem's resting place in each section: a tilted plinth it stands on ----------
   One colour, always the opposite of the section background:
   dark section → crimson (header colour);  crimson section → the site's dark background. */
.emblem-slot { position: relative; --plate: 184, 11, 44; --ink: 12, 6, 7; --lines: url("/assets/speedlines.svg"); --panel: url("/assets/slot-panel-crimson.svg"); margin-inline-start: 2.5rem; }
.section--red .emblem-slot { --plate: 18, 8, 9; --ink: 200, 16, 46; --lines: url("/assets/speedlines-crimson.svg"); --panel: url("/assets/slot-panel-dark.svg"); }
.emblem-slot::before { /* a sharp, slanted manga-panel plinth (same cut and speed lines as the hero), laid back in perspective */
  content: ''; position: absolute; left: -24%; right: -24%; top: 30%; height: 100%;
  background: var(--panel) center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.5));
  transform-origin: 50% 30%;
  transform: perspective(360px) rotateX(60deg) scale(var(--s, .4));
  opacity: 0; transition: transform .75s var(--ease-spring) .26s, opacity .3s ease-out .26s;
  z-index: 0;
}
.section--red .emblem-slot::before { filter: drop-shadow(0 18px 18px rgba(40,0,8,.55)); }
.emblem-slot::after { /* the logo's own shadow on the plate */
  content: ''; position: absolute; left: 24%; right: -4%; top: 72%; height: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0,0,0,.28) 55%, transparent); filter: blur(5px);
  transform: perspective(360px) rotateX(58deg) skewX(-28deg); transform-origin: 30% 0;
  opacity: 0; transition: opacity .4s ease-out .55s;
}
.emblem-slot.is-active { --s: 1; }
.emblem-slot.is-active::before, .emblem-slot.is-active::after { opacity: 1; }
.emblem-slot:not(.is-active)::before { transition-delay: 0s; transition-duration: .25s; }
.emblem-fly { z-index: 45; }
@media (max-width: 720px) { .emblem-slot { margin-inline-start: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .emblem-slot::before { transition: opacity .2s; } }

/* ---------- comic glitch on hover (canvas drawn by emblem.js) ---------- */
.emblem__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.emblem-fly.is-glitch .emblem__fx { opacity: 1; }
.emblem-fly.is-glitch .emblem__canvas { opacity: 0; }
.emblem-fly::after { /* a burst of ink action lines that pops with the glitch */
  content: ''; position: absolute; inset: -18%; pointer-events: none; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgba(244,234,192,.0) 0 7deg, rgba(244,234,192,.55) 7deg 8deg);
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 60%, transparent 100%); mask: radial-gradient(closest-side, transparent 52%, #000 60%, transparent 100%);
}
.emblem-fly.is-glitch::after { animation: burst .52s steps(5) both; }
@keyframes burst { 0% { opacity: 0; transform: scale(.8) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(12deg); } }

/* room for the plinth: it never overlaps titles, controls or the content below, in any section */
.emblem-slot { margin-inline-start: 3rem; margin-bottom: 30px; }
.section__head:not(.section__head--row) { column-gap: 3rem; }
.section__head--row { column-gap: 1.25rem; }
@media (max-width: 720px) { .emblem-slot { margin-inline-start: 1.5rem; margin-bottom: 18px; } }

/* in heads with a segmented control, sit the plinth on the same line as the buttons */
.section__head--row { align-items: flex-end; }
.section__head--row .emblem-slot { margin-bottom: -2px; align-self: flex-end; }