/* Blog editorial design ("Option A - Calm Editorial Grid").
   One stylesheet for every blog card on the site (blog index, category pages,
   home, device pages, related articles) in all eight languages, plus the layout
   of the blog index. Dark and light are tuned separately: the light palette is
   not a colour inversion of dark, it has its own surface, shadow, badge and
   contrast choices. Loaded after base/command/terminal so it wins by order and
   by the [data-color-mode][data-design] selectors below. */

html[data-color-mode] {
  --ed-radius: 16px;
  --ed-radius-sm: 11px;
  --ed-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --ed-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ed-nav-h: 82px;
  --ed-shell: 1240px;
}
html[data-color-mode="dark"] {
  --ed-page: var(--dr-bg);
  --ed-card: var(--dr-panel);
  --ed-card-2: color-mix(in srgb, var(--dr-panel) 70%, var(--dr-bg));
  --ed-line: var(--dr-line);
  --ed-ink: var(--dr-ink);
  --ed-muted: var(--dr-muted);
  --ed-accent: var(--dr-accent);
  --ed-accent-ink: var(--dr-on-accent);
  --ed-shadow-sm: 0 1px 0 rgba(255, 255, 255, .02) inset;
  --ed-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  --ed-badge-bg: color-mix(in srgb, var(--dr-accent) 14%, transparent);
  --ed-badge-ink: var(--dr-accent);
  --ed-badge-line: color-mix(in srgb, var(--dr-accent) 34%, transparent);
  --ed-badge2-bg: color-mix(in srgb, var(--dr-panel) 60%, transparent);
  --ed-badge2-ink: var(--dr-muted);
  --ed-badge2-line: var(--dr-line);
  --ed-glow: color-mix(in srgb, var(--dr-accent) 16%, transparent);
}
html[data-color-mode="light"] {
  /* Cool paper page, pure white cards: cards read as objects, not outlines. */
  --ed-page: #f1f6f3;
  --ed-card: #ffffff;
  --ed-card-2: #f7faf8;
  --ed-line: #d2e2d9;
  --ed-ink: #12332a;
  --ed-muted: #476157;
  --ed-accent: #08734d;
  --ed-accent-ink: #ffffff;
  --ed-shadow-sm: 0 1px 2px rgba(16, 58, 42, .06), 0 8px 20px -12px rgba(16, 58, 42, .22);
  --ed-shadow: 0 2px 4px rgba(16, 58, 42, .06), 0 26px 46px -22px rgba(16, 58, 42, .36);
  --ed-badge-bg: #dcf3e6;
  --ed-badge-ink: #075a3d;
  --ed-badge-line: #b3dfc7;
  --ed-badge2-bg: #eef3f0;
  --ed-badge2-ink: #3e574c;
  --ed-badge2-line: #d6e3dc;
  --ed-glow: rgba(8, 115, 77, .12);
}
/* Clean Trust re-map: the editorial variables now resolve to the sitewide trust tokens (trust-core.css) in both
   modes, so blog index, category pages and every .dr-bcard share one palette, radius and shadow scale. */
html[data-design="trust"][data-color-mode] {
  --ed-radius: var(--tr-r-lg);
  --ed-radius-sm: var(--tr-r-sm);
  --ed-font: var(--font-sans);
  --ed-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --ed-nav-h: 72px;
  --ed-shell: var(--tr-wrap);
  --ed-page: var(--dr-bg);
  --ed-card: var(--dr-panel);
  --ed-card-2: var(--tr-surface-2);
  --ed-line: var(--tr-card-border);
  --ed-ink: var(--tr-head);
  --ed-muted: var(--dr-muted);
  --ed-accent: var(--tr-accent-ink);
  --ed-accent-ink: var(--dr-on-accent);
  --ed-shadow-sm: var(--tr-sh-1);
  --ed-shadow: var(--tr-sh-3);
  --ed-badge-bg: var(--tr-accent-soft);
  --ed-badge-ink: var(--tr-accent-ink);
  --ed-badge-line: transparent;
  --ed-badge2-bg: transparent;
  --ed-badge2-ink: var(--dr-muted);
  --ed-badge2-line: var(--dr-line);
  --ed-glow: var(--tr-wash-1);
}

/* ---------- Card (used everywhere) ---------- */
html[data-color-mode][data-design] a.dr-bcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ed-ink);
  text-decoration: none;
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow-sm);
  transform: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-color-mode][data-design] a.dr-bcard:hover,
html[data-color-mode][data-design] a.dr-bcard:focus-visible {
  transform: translateY(-4px);
  color: var(--ed-ink);
  background: var(--ed-card);
  border-color: color-mix(in srgb, var(--ed-accent) 62%, var(--ed-line));
  box-shadow: var(--ed-shadow);
}
html[data-color-mode] a.dr-bcard:focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 3px; }
html[data-color-mode] .dr-bcard-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ed-card-2);
}
html[data-color-mode] .dr-bcard-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
html[data-color-mode] a.dr-bcard:hover .dr-bcard-img img { transform: scale(1.03); }
html[data-color-mode] .dr-bcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 11px;
  padding: 19px 19px 17px;
}
html[data-color-mode] .dr-bcard-badges { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-color-mode] .dr-bcard-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .2rem .62rem;
  border: 1px solid var(--ed-badge-line);
  border-radius: 999px;
  background: var(--ed-badge-bg);
  color: var(--ed-badge-ink);
  font: 700 .6875rem/1.2 var(--ed-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
html[data-color-mode] .dr-bcard-badge--diff {
  border-color: var(--ed-badge2-line);
  background: var(--ed-badge2-bg);
  color: var(--ed-badge2-ink);
}
html[data-color-mode] .dr-bcard-title {
  margin: 0;
  color: var(--ed-ink);
  font: 700 1.14rem/1.3 var(--ed-font);
  letter-spacing: -.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}
html[data-color-mode] .dr-bcard-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ed-muted);
  font: 400 .91rem/1.6 var(--ed-font);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html[data-color-mode] .dr-bcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin-top: auto;
  padding-top: 8px;
  color: var(--ed-muted);
  font: 400 .8rem/1.4 var(--ed-font);
}
html[data-color-mode] .dr-bcard-author { color: var(--ed-ink); font-weight: 600; }
html[data-color-mode] .dr-bcard-dot { opacity: .55; }
/* "author · reading time" on the left, the date pushed right. When a long
   translation wraps, the date drops to its own line with no dangling dot. */
html[data-color-mode] .dr-bcard-meta .dr-bcard-dot ~ .dr-bcard-dot { display: none; }
html[data-color-mode] .dr-bcard-meta time { margin-inline-start: auto; white-space: nowrap; }
/* Reading time lives in the meta line as plain text, not as a pill. */
html[data-color-mode] .dr-bcard-meta .dr-bcard-badge--time {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
html[lang^="ja"] .dr-bcard-title, html[lang^="zh"] .dr-bcard-title { letter-spacing: 0; line-height: 1.45; }

/* ---------- Card grids outside the blog index ---------- */
html[data-color-mode] :is(.dr-bp-grid, .dr-dev-blog-grid, .dr-related-grid, .dr-cat-grid, .dr-ed-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  background: none;
  border: 0;
  padding: 0;
}
@media (max-width: 960px) {
  html[data-color-mode] :is(.dr-bp-grid, .dr-dev-blog-grid, .dr-related-grid, .dr-cat-grid, .dr-ed-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  html[data-color-mode] :is(.dr-bp-grid, .dr-dev-blog-grid, .dr-related-grid, .dr-cat-grid, .dr-ed-grid) { grid-template-columns: minmax(0, 1fr); }
}
html[data-color-mode] .dr-ed-grid > .dr-bcard[hidden] { display: none; }

/* ---------- Blog index layout ---------- */
html[data-color-mode] main.dr-ed {
  background: var(--ed-page);
  color: var(--ed-ink);
  font-family: var(--ed-font);
  overflow-x: clip;
}
.dr-ed-shell { width: min(var(--ed-shell), calc(100% - 40px)); margin-inline: auto; }
.dr-ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  color: var(--ed-accent);
  font: 700 .78rem/1.2 var(--ed-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dr-ed-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }

.dr-ed-hero {
  position: relative;
  padding: 76px 0 54px;
  overflow: hidden;
  border-bottom: 1px solid var(--ed-line);
}
.dr-ed-hero::before {
  content: "";
  position: absolute;
  inset: -35% -20% auto 45%;
  height: 520px;
  background: radial-gradient(circle, var(--ed-glow), transparent 67%);
  pointer-events: none;
}
html[data-color-mode="light"] .dr-ed-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .0), var(--ed-page) 96%),
    radial-gradient(color-mix(in srgb, var(--ed-accent) 16%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px,
    #fbfdfc;
}
.dr-ed-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 56px;
  align-items: end;
}
html[data-color-mode] .dr-ed-h1 {
  margin: 0;
  max-width: 820px;
  color: var(--ed-ink);
  font: 800 clamp(2.1rem, 4.6vw, 4rem)/1.04 var(--ed-font);
  letter-spacing: -.055em;
  text-shadow: none;
  overflow-wrap: anywhere;
}
html[lang^="ja"] .dr-ed-h1, html[lang^="zh"] .dr-ed-h1, html[lang^="ar"] .dr-ed-h1 { letter-spacing: 0; line-height: 1.22; }
html[data-color-mode] .dr-ed-lead {
  max-width: 700px;
  margin: 1.35rem 0 0;
  color: var(--ed-muted);
  font: 400 1.08rem/1.7 var(--ed-font);
}
.dr-ed-tools { display: grid; gap: 14px; min-width: 0; }
.dr-ed-search {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 14px;
  box-shadow: var(--ed-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dr-ed-search[hidden] { display: none; }
.dr-ed-search:focus-within {
  border-color: var(--ed-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ed-accent) 16%, transparent);
}
.dr-ed-search svg { flex: 0 0 auto; margin-inline-start: 15px; color: var(--ed-muted); }
html[data-color-mode] .dr-ed-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px 0 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ed-ink);
  font: 400 1rem var(--ed-font);
}
html[dir="rtl"] .dr-ed-search input { padding: 0 11px 0 15px; }
.dr-ed-search input::placeholder { color: color-mix(in srgb, var(--ed-muted) 80%, transparent); }
.dr-ed-search input::-webkit-search-cancel-button { cursor: pointer; }
.dr-ed-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 14px;
  box-shadow: var(--ed-shadow-sm);
}
.dr-ed-stat { padding: 16px 14px; border-inline-end: 1px solid var(--ed-line); min-width: 0; }
.dr-ed-stat:last-child { border-inline-end: 0; }
.dr-ed-stat strong { display: block; color: var(--ed-ink); font: 800 1.35rem/1.3 var(--ed-mono); }
.dr-ed-stat span { display: block; color: var(--ed-muted); font-size: .73rem; line-height: 1.35; }

.dr-ed-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
html[data-color-mode] .dr-ed-head h2 {
  margin: 0;
  color: var(--ed-ink);
  font: 800 clamp(1.55rem, 2.8vw, 2.3rem)/1.15 var(--ed-font);
  letter-spacing: -.04em;
  text-shadow: none;
}
html[lang^="ja"] .dr-ed-head h2, html[lang^="zh"] .dr-ed-head h2, html[lang^="ar"] .dr-ed-head h2 { letter-spacing: 0; }
.dr-ed-desc { max-width: 720px; margin: .7rem 0 0; color: var(--ed-muted); font-size: .96rem; line-height: 1.7; }
.dr-ed-count { flex: 0 0 auto; margin: 0; color: var(--ed-muted); font-size: .86rem; white-space: nowrap; }
.dr-ed-count strong { color: var(--ed-ink); font-family: var(--ed-mono); }

/* Featured: one lead story and two supporting reads. */
.dr-ed-featured { padding: 40px 0 60px; }
.dr-ed-featured[hidden] { display: none; }
.dr-ed-featured-grid {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
}
html[data-color-mode][data-design] a.dr-ed-feature {
  position: relative;
  display: block;
  min-height: 250px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #0b171d;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-color-mode][data-design] a.dr-ed-feature:hover {
  color: #fff;
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ed-accent) 62%, var(--ed-line));
  box-shadow: var(--ed-shadow);
}
html[data-color-mode] a.dr-ed-feature:focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 3px; }
.dr-ed-feature--lead { grid-row: span 2; min-height: 520px; }
.dr-ed-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.dr-ed-feature:hover img { transform: scale(1.025); }
.dr-ed-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 13, 0) 14%, rgba(3, 10, 13, .6) 46%, rgba(3, 10, 13, .96) 100%);
}
@media (max-width: 650px) {
  /* Titles wrap to three lines on phones, so the scrim has to start higher. */
  .dr-ed-feature::after { background: linear-gradient(180deg, rgba(3, 10, 13, .1) 0%, rgba(3, 10, 13, .72) 38%, rgba(3, 10, 13, .97) 100%); }
}
.dr-ed-feature-body { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 26px; }
.dr-ed-feature--lead .dr-ed-feature-body { padding: 34px; }
.dr-ed-feature-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-ed-feature-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .2rem .62rem;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font: 700 .6875rem/1.2 var(--ed-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
html[data-color-mode] .dr-ed-feature-title {
  margin: .7rem 0 .55rem;
  color: #fff;
  font: 800 1.3rem/1.16 var(--ed-font);
  letter-spacing: -.03em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  overflow-wrap: anywhere;
}
.dr-ed-feature--lead .dr-ed-feature-title { font-size: clamp(1.7rem, 2.9vw, 2.7rem); }
html[lang^="ja"] .dr-ed-feature-title, html[lang^="zh"] .dr-ed-feature-title, html[lang^="ar"] .dr-ed-feature-title { letter-spacing: 0; line-height: 1.3; }
.dr-ed-feature-excerpt {
  display: -webkit-box;
  max-width: 640px;
  margin: 0 0 .9rem;
  overflow: hidden;
  color: #d3e1e6;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dr-ed-feature-meta { display: flex; flex-wrap: wrap; gap: .3rem .55rem; color: #c3d3d9; font-size: .8rem; }

/* Sticky category / filter bar. */
.dr-ed-filterbar {
  position: sticky;
  top: var(--ed-nav-h);
  z-index: 30;
  border-block: 1px solid var(--ed-line);
  background: color-mix(in srgb, var(--ed-page) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.dr-ed-filter { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.dr-ed-filter-label { flex: 0 0 auto; color: var(--ed-muted); font: 500 .78rem var(--ed-mono); white-space: nowrap; }
.dr-ed-chips { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dr-ed-chips::-webkit-scrollbar { display: none; }
html[data-color-mode] .dr-ed-chip {
  flex: 0 0 auto;
  padding: .55rem .9rem;
  color: var(--ed-muted);
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  font: 500 .82rem/1.2 var(--ed-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
html[data-color-mode] .dr-ed-chip:hover { color: var(--ed-ink); border-color: var(--ed-accent); }
html[data-color-mode] .dr-ed-chip:focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 2px; }
html[data-color-mode] .dr-ed-chip:is([aria-pressed="true"], [aria-current="page"]) {
  color: var(--ed-accent-ink);
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  font-weight: 700;
}

.dr-ed-latest { padding: 64px 0 90px; }
.dr-ed-empty {
  margin: 8px 0 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--ed-muted);
  background: var(--ed-card);
  border: 1px dashed var(--ed-line);
  border-radius: var(--ed-radius);
}
.dr-ed-empty[hidden] { display: none; }
.dr-ed-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 0 0; }
.dr-ed-more[hidden] { display: none; }
.dr-ed-more-note { margin: 0; color: var(--ed-muted); font-size: .84rem; }
html[data-color-mode] .dr-ed-btn {
  min-width: 200px;
  min-height: 46px;
  padding: .7rem 1.2rem;
  color: var(--ed-ink);
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  box-shadow: var(--ed-shadow-sm);
  font: 600 .95rem var(--ed-font);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
html[data-color-mode] .dr-ed-btn:hover { border-color: var(--ed-accent); transform: translateY(-1px); }
html[data-color-mode] .dr-ed-btn:focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 3px; }

/* ---------- Category pages ---------- */
html[data-color-mode] .dr-cat-hero {
  position: relative;
  padding: 64px 0 44px;
  overflow: hidden;
  background: var(--ed-page);
  border-bottom: 1px solid var(--ed-line);
}
html[data-color-mode] .dr-cat-hero::before {
  content: "";
  position: absolute;
  inset: -40% -15% auto 50%;
  height: 420px;
  background: radial-gradient(circle, var(--ed-glow), transparent 67%);
  pointer-events: none;
}
html[data-color-mode] .dr-cat-inner { position: relative; }
html[data-color-mode] .dr-cat-eyebrow { color: var(--ed-accent); font-family: var(--ed-mono); letter-spacing: .1em; text-transform: uppercase; }
html[data-color-mode] .dr-cat-h1 {
  color: var(--ed-ink);
  font: 800 clamp(2rem, 4.4vw, 3.4rem)/1.08 var(--ed-font);
  letter-spacing: -.05em;
  text-shadow: none;
}
html[data-color-mode] .dr-cat-lead { color: var(--ed-muted); font-size: 1.06rem; line-height: 1.7; }
html[data-color-mode] .dr-cat-meta a {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  color: var(--ed-ink);
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  font-size: .84rem;
  text-decoration: none;
}
html[data-color-mode] .dr-cat-meta a:hover { border-color: var(--ed-accent); }
html[data-color-mode] main:has(.dr-cat-hero) { background: var(--ed-page); }
html[data-color-mode] .dr-cat-section { padding-block: 44px 8px; }
html[data-color-mode] .dr-cat-other { padding-bottom: 80px; }
html[data-color-mode] .dr-cat-h2 { color: var(--ed-ink); font: 800 1.3rem/1.2 var(--ed-font); letter-spacing: -.03em; text-shadow: none; }
html[data-color-mode] .dr-cat-other-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 16px 0 0; list-style: none; }
html[data-color-mode] .dr-cat-other-list a {
  display: inline-flex;
  padding: .55rem .9rem;
  color: var(--ed-muted);
  background: var(--ed-card);
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
}
html[data-color-mode] .dr-cat-other-list a:hover { color: var(--ed-ink); border-color: var(--ed-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .dr-ed-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .dr-ed-featured-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .dr-ed-feature--lead { grid-column: span 2; grid-row: auto; min-height: 460px; }
}
@media (max-width: 650px) {
  .dr-ed-shell { width: min(var(--ed-shell), calc(100% - 32px)); }
  .dr-ed-hero { padding: 46px 0 36px; }
  .dr-ed-stats { grid-template-columns: 1fr; }
  .dr-ed-stat { display: flex; align-items: baseline; gap: 12px; border-inline-end: 0; border-bottom: 1px solid var(--ed-line); }
  .dr-ed-stat:last-child { border-bottom: 0; }
  .dr-ed-stat strong { flex: 0 0 auto; min-width: 3.4ch; }
  .dr-ed-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dr-ed-featured { padding: 30px 0 44px; }
  .dr-ed-featured-grid { grid-template-columns: 1fr; }
  .dr-ed-feature--lead { grid-column: auto; min-height: 390px; }
  .dr-ed-feature { min-height: 310px; }
  .dr-ed-feature-body, .dr-ed-feature--lead .dr-ed-feature-body { padding: 20px; }
  .dr-ed-filter-label { display: none; }
  .dr-ed-latest { padding: 44px 0 64px; }
  html[data-color-mode] .dr-cat-hero { padding: 44px 0 32px; }
}
/* ---------- Clean Trust chrome (cards, blog index hero, filter bar, category hero) ---------- */
html[data-design="trust"][data-color-mode] .dr-bcard-body { gap: 12px; padding: 22px 22px 20px; }
html[data-design="trust"][data-color-mode] .dr-bcard-badge {
  min-height: 26px; padding: 2px 10px; font: 650 .8125rem/1.2 var(--ed-font); letter-spacing: 0; text-transform: none;
}
html[data-design="trust"][data-color-mode] .dr-bcard-badge--diff { font-weight: 550; }
html[data-design="trust"][data-color-mode] .dr-bcard-meta .dr-bcard-badge--time { min-height: 0; padding: 0; font: inherit; }
html[data-design="trust"][data-color-mode] .dr-bcard-title { font: 750 1.125rem/1.35 var(--ed-font); letter-spacing: -.012em; color: var(--ed-ink); }
html[lang^="ja"][data-design="trust"] .dr-bcard-title, html[lang^="zh"][data-design="trust"] .dr-bcard-title, html[lang^="ar"][data-design="trust"] .dr-bcard-title { letter-spacing: 0; line-height: 1.45; }
html[data-design="trust"][data-color-mode] .dr-bcard-excerpt { font: 400 .9375rem/1.6 var(--ed-font); }
html[data-design="trust"][data-color-mode] .dr-bcard-meta { padding-top: 14px; border-top: 1px solid var(--tr-line-soft); font-size: .84rem; }
html[data-design="trust"][data-color-mode] .dr-bcard-author { color: var(--tr-head); font-weight: 650; }
html[data-design="trust"][data-color-mode] a.dr-bcard.dr-bcard { transition: transform .28s var(--tr-ease), box-shadow .28s var(--tr-ease), border-color .28s; }
html[data-design="trust"][data-color-mode] a.dr-bcard.dr-bcard:hover,
html[data-design="trust"][data-color-mode] a.dr-bcard.dr-bcard:focus-visible { border-color: color-mix(in srgb, var(--dr-accent) 55%, var(--dr-line)); }
html[data-design="trust"][data-color-mode] a.dr-bcard:hover .dr-bcard-img img { transform: scale(1.04); }

html[data-design="trust"][data-color-mode] .dr-ed-shell { width: min(var(--ed-shell), calc(100% - var(--tr-gutter) * 2)); }
html[data-design="trust"][data-color-mode] .dr-ed-eyebrow { gap: 8px; color: var(--tr-accent-ink); font: 700 .78rem/1.2 var(--ed-mono); letter-spacing: .08em; }
html[data-design="trust"][data-color-mode] .dr-ed-eyebrow::before { width: 18px; border-radius: 2px; }
html[data-design="trust"][data-color-mode] .dr-ed-hero,
html[data-design="trust"][data-color-mode] .dr-cat-hero {
  isolation: isolate;
  padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 64px);
  background: var(--dr-bg);
  border-bottom: 1px solid var(--tr-line-soft);
}
html[data-design="trust"][data-color-mode] .dr-ed-hero::before,
html[data-design="trust"][data-color-mode] .dr-cat-hero::before {
  inset: -20% -10% auto -10%; z-index: -2; height: 140%;
  background:
    radial-gradient(42% 46% at 82% 30%, var(--tr-wash-2), transparent 70%),
    radial-gradient(40% 50% at 66% 64%, var(--tr-wash-1), transparent 70%),
    radial-gradient(30% 40% at 8% 10%, var(--tr-wash-3), transparent 70%);
}
html[data-design="trust"][data-color-mode] .dr-ed-hero::after,
html[data-design="trust"][data-color-mode] .dr-cat-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--tr-grid-dot) 1.2px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 75% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 60% at 75% 45%, #000 20%, transparent 75%);
}
html[dir="rtl"][data-design="trust"] .dr-ed-hero::after, html[dir="rtl"][data-design="trust"] .dr-cat-hero::after {
  -webkit-mask-image: radial-gradient(60% 60% at 25% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 60% at 25% 45%, #000 20%, transparent 75%);
}
html[data-design="trust"][data-color-mode] .dr-ed-h1 { font-weight: 800; line-height: 1.06; letter-spacing: -.04em; color: var(--tr-head); }
html[lang^="ja"][data-design="trust"] .dr-ed-h1, html[lang^="zh"][data-design="trust"] .dr-ed-h1, html[lang^="ar"][data-design="trust"] .dr-ed-h1 { letter-spacing: 0; line-height: 1.25; }
html[data-design="trust"][data-color-mode] .dr-ed-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); line-height: 1.65; }
html[data-design="trust"][data-color-mode] .dr-ed-search { border-radius: 16px; border-color: var(--dr-line); box-shadow: var(--tr-sh-2); }
html[data-design="trust"][data-color-mode] .dr-ed-search:focus-within { border-color: var(--dr-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dr-accent) 16%, transparent), var(--tr-sh-2); }
html[data-design="trust"][data-color-mode] .dr-ed-search input,
html[data-design="trust"][data-color-mode] .dr-ed-search input:focus { border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; }
html[data-design="trust"][data-color-mode] .dr-ed-stats { border-radius: var(--tr-r-md); box-shadow: var(--tr-sh-2); }
html[data-design="trust"][data-color-mode] .dr-ed-stat { border-color: var(--tr-line-soft); padding: 16px; }
html[data-design="trust"][data-color-mode] .dr-ed-stat strong { font: 800 clamp(1.25rem, 1rem + .7vw, 1.5rem)/1.2 var(--ed-font); letter-spacing: -.02em; color: var(--tr-head); }
html[data-design="trust"][data-color-mode] .dr-ed-stat span { font-size: .8125rem; font-weight: 500; }
html[data-design="trust"][data-color-mode] .dr-ed-head h2 { font-weight: 800; letter-spacing: -.032em; color: var(--tr-head); }
html[data-design="trust"][data-color-mode] .dr-ed-featured { padding-block: clamp(40px, 6vw, 72px) clamp(40px, 5vw, 64px); }
html[data-design="trust"][data-color-mode] .dr-ed-latest { padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 120px); }
html[data-design="trust"][data-color-mode] a.dr-ed-feature.dr-ed-feature { border-color: var(--tr-card-border); box-shadow: var(--tr-sh-2); }
html[data-design="trust"][data-color-mode] .dr-ed-filterbar { top: var(--ed-nav-h); background: var(--tr-header-bg); border-color: var(--tr-line-soft); }
html[data-design="trust"][data-color-mode] .dr-ed-filter-label { color: var(--dr-muted); }
html[data-design="trust"][data-color-mode] .dr-ed-chips { padding: 4px 2px; }
html[data-design="trust"][data-color-mode] .dr-ed-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  color: var(--dr-muted); background: var(--dr-panel); border-color: var(--dr-line); font: 600 .875rem/1.2 var(--ed-font);
}
html[data-design="trust"][data-color-mode] .dr-ed-chip:hover { color: var(--tr-head); border-color: var(--dr-accent); background: var(--dr-panel); }
html[data-design="trust"][data-color-mode] .dr-ed-chip:is([aria-pressed="true"], [aria-current="page"]) { color: var(--dr-on-accent); background: var(--dr-accent); border-color: var(--dr-accent); }
html[data-design="trust"][data-color-mode] .dr-ed-btn {
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border-color: var(--dr-line);
  color: var(--tr-head); background: var(--dr-panel); box-shadow: var(--tr-sh-1); font: 650 1rem/1.2 var(--ed-font);
}
html[data-design="trust"][data-color-mode] .dr-ed-btn:hover { border-color: var(--dr-accent); color: var(--tr-accent-ink); }
html[data-design="trust"][data-color-mode] .dr-ed-empty { border-radius: var(--tr-r-lg); border-color: var(--dr-line); }
html[data-design="trust"][data-color-mode] .dr-cat-eyebrow { color: var(--tr-accent-ink); letter-spacing: .08em; }
html[data-design="trust"][data-color-mode] .dr-cat-h1 { font-weight: 800; letter-spacing: -.04em; line-height: 1.08; color: var(--tr-head); }
html[lang^="ja"][data-design="trust"] .dr-cat-h1, html[lang^="zh"][data-design="trust"] .dr-cat-h1, html[lang^="ar"][data-design="trust"] .dr-cat-h1 { letter-spacing: 0; line-height: 1.25; }
html[data-design="trust"][data-color-mode] .dr-cat-meta a,
html[data-design="trust"][data-color-mode] .dr-cat-other-list a {
  min-height: 44px; padding: 10px 18px; align-items: center; border-color: var(--dr-line); background: var(--dr-panel); box-shadow: var(--tr-sh-1);
  font-weight: 600; transition: border-color .2s, color .2s;
}
html[data-design="trust"][data-color-mode] .dr-cat-meta a { color: var(--tr-head); }
html[data-design="trust"][data-color-mode] .dr-cat-meta a:hover, html[data-design="trust"][data-color-mode] .dr-cat-other-list a:hover { border-color: var(--dr-accent); color: var(--tr-accent-ink); }
html[data-design="trust"][data-color-mode] .dr-cat-section { padding-block: clamp(40px, 6vw, 64px) 8px; }
html[data-design="trust"][data-color-mode] :is(.dr-cat-hero, .dr-cat-section, .dr-cat-other) { padding-inline: var(--tr-gutter); }
html[data-design="trust"][data-color-mode] .dr-cat-other { padding-bottom: clamp(64px, 9vw, 120px); }
html[data-design="trust"][data-color-mode] .dr-cat-h2 { font-weight: 780; letter-spacing: -.028em; color: var(--tr-head); }

html:is([lang^="ar"], [lang^="ja"], [lang^="zh"])[data-design="trust"] :is(.dr-ed-eyebrow, .dr-cat-eyebrow, .dr-ed-filter-label) { font-family: var(--ed-font); letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-color-mode] a.dr-bcard, html[data-color-mode] a.dr-ed-feature, html[data-color-mode] .dr-bcard-img img, .dr-ed-feature img { transition: none; }
  html[data-color-mode][data-design] a.dr-bcard:hover, html[data-color-mode][data-design] a.dr-ed-feature:hover { transform: none; }
}

/* Featured cards sit on a dark image overlay: keep the title white in both colour modes (Clean Trust headings are dark in light mode). */
html[data-design="trust"][data-color-mode] .dr-ed-feature-title { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }

/* Covers that carry their own headline text (Android ID and Emulator Hider): a stronger scrim so it never collides with the card title. */
.dr-ed-feature:has(img[src*="/emulator-hider/blog/"])::after { background: linear-gradient(180deg, rgba(14, 10, 40, .2) 0%, rgba(14, 10, 40, .93) 32%, rgba(10, 8, 30, .98) 100%); }