@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ja-9a972890ae88.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/ja-63cf5b2b8929.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ar-63491a02ec5e.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Arabic";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/ar-63491a02ec5e.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Korean";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ko-cbf35d10f2c9.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Korean";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/ko-cbf35d10f2c9.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Simplified Chinese";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zh-hans-2ef817d2a185.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Simplified Chinese";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/zh-hans-2ef817d2a185.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Traditional Chinese";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/zh-hant-e964dbbf6a69.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Traditional Chinese";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/zh-hant-e964dbbf6a69.woff2") format("woff2");
}
@font-face {
  font-family: "Shippori Mincho B1";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/wordmark.woff2") format("woff2");
  unicode-range: U+3002, U+4E2D, U+5B66, U+6BD2, U+8A9E;
}

:root {
  --ink: #111111;
  --paper: #f4f1ea;
  --white: #ffffff;
  --lilac: #d4bff5;
  --orange: #ff5c20;
  --amber: #b07300;
  --mute: #55534f;
  --line: #d5d2cc;
  --font: "Zen Kaku Gothic New", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
}
a {
  color: inherit;
  text-underline-offset: 0.25em;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
img {
  max-inline-size: 100%;
}
.wrap {
  width: min(calc(100% - 64px), 1280px);
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  inset: 8px auto auto 8px;
  z-index: 2;
  padding: 12px;
  background: var(--white);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-block-size: 104px;
  padding-block: 20px;
  border-bottom: 2px solid var(--ink);
}
.brand {
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark {
  font:
    700 40px / 1.3 "Shippori Mincho B1",
    serif;
  white-space: nowrap;
  color: #2e2925;
}
.period {
  color: var(--amber);
}
.site-header nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}
.site-header nav a:hover {
  text-decoration: underline;
}
.intro {
  padding-block: 64px 72px;
}
.eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.intro h1 {
  margin: 0 0 24px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.intro > p:last-child {
  margin: 0;
  color: var(--mute);
  font-size: 17px;
  line-height: 1.9;
}
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-block: 20px;
  border-top: 2px solid var(--ink);
}
.section-heading h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}
.section-heading p {
  margin: 0;
  color: var(--mute);
  font-size: 13px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.cards > li {
  min-inline-size: 0;
}
.cover-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  block-size: 100%;
  min-inline-size: 0;
  border: 1px solid var(--line);
  background: var(--white);
  text-decoration: none;
}
.cover-card:hover {
  border-color: var(--ink);
}
.cover {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--lilac);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.cover img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 24px;
  min-inline-size: 0;
}
.category {
  justify-self: start;
  display: inline-block;
  padding: 3px 8px;
  background: var(--lilac);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 900;
  white-space: nowrap;
}
.card-body :is(h2, h3) {
  margin: 0;
  min-block-size: 2.9em;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.45;
  word-break: auto-phrase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cover-card:hover :is(h2, h3) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.card-date {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--mute);
  font-size: 12px;
  white-space: nowrap;
}
.card-date::before {
  content: "";
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 8px;
  background: var(--orange);
}
.existing-guides {
  margin-block: 64px 80px;
  padding-block: 24px;
  border-top: 2px solid var(--ink);
}
.existing-guides h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
}
.existing-guides p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mute);
}
.existing-guides a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  font-size: 15px;
  font-weight: 900;
}
.site-footer {
  padding-block: 40px;
  background: var(--ink);
  color: var(--paper);
}
.footer-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-footer .wordmark {
  color: var(--paper);
  font-size: 32px;
}
.site-footer .period {
  color: var(--orange);
}
.site-footer p {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.7;
}
.site-footer a:focus-visible {
  outline-color: var(--paper);
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 13px;
}
.credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 12px;
  text-decoration: none;
}
.credit img {
  inline-size: 74px;
  block-size: auto;
  filter: invert(1);
}
.reading-wrap {
  width: min(calc(100% - 64px), 780px);
  margin: 32px auto 80px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 32px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 900;
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.article-heading {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 24px;
  color: var(--mute);
  font-size: 12px;
}
.article-meta time {
  white-space: nowrap;
}
.article-heading h1 {
  margin: 0 0 24px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.35;
  font-weight: 900;
  word-break: auto-phrase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.lead {
  margin: 0;
  color: var(--mute);
  font-size: 17px;
  line-height: 1.9;
}
.article-body {
  font-size: 17px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.article-body p {
  margin: 0 0 24px;
}
.article-body h2 {
  margin: 48px 0 24px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 900;
  word-break: auto-phrase;
}
.article-body h3 {
  margin: 32px 0 16px;
  font-size: 21px;
  line-height: 1.6;
  font-weight: 900;
}
.article-body :is(ul, ol) {
  margin: 24px 0;
  padding-inline-start: 1.5em;
}
.article-body li {
  margin-block: 8px;
  padding-inline-start: 4px;
}
.article-body blockquote {
  margin: 32px 0;
  padding: 16px 24px;
  border-inline-start: 3px solid var(--ink);
  background: var(--white);
}
.sources {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.sources h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 900;
}
.sources ol {
  margin: 0;
  padding-inline-start: 1.5em;
}
.sources li {
  padding-block: 6px;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.sources a {
  display: inline-block;
  min-block-size: 44px;
}
.related {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.related > h2 {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 900;
}
.related .card-body :is(h2, h3) {
  font-size: 22px;
}
@media (max-width: 640px) {
  .wrap,
  .reading-wrap {
    width: calc(100% - 32px);
  }
  .site-header {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 16px;
  }
  .site-header .brand {
    flex-basis: 100%;
  }
  .wordmark {
    font-size: 32px;
  }
  .site-header nav {
    gap: 8px 24px;
  }
  .intro {
    padding-block: 40px 48px;
  }
  .intro > p:last-child {
    font-size: 16px;
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .card-body {
    padding: 20px;
  }
  .card-body :is(h2, h3) {
    font-size: 22px;
  }
  .footer-in {
    align-items: start;
    flex-direction: column;
    gap: 24px;
  }
  .site-footer .wordmark {
    font-size: 28px;
  }
  .reading-wrap {
    margin-top: 24px;
    margin-bottom: 48px;
  }
  .article-heading h1 {
    font-size: 32px;
  }
  .article-body {
    font-size: 16px;
    line-height: 1.9;
  }
  .article-body h2 {
    font-size: 24px;
  }
  .existing-guides {
    margin-block: 48px;
  }
}
.language-menu {
  position: relative;
  font-size: 14px;
  font-weight: 900;
}
.language-menu summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 8px;
  border: 1px solid var(--line);
}
.language-menu summary::after {
  content: "⌄";
}
.language-menu summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.language-menu ul {
  position: absolute;
  inset-inline-end: 0;
  z-index: 3;
  min-inline-size: 164px;
  margin: 4px 0 0;
  padding: 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--lilac);
}
.language-menu a {
  inline-size: 100%;
  padding-inline: 12px;
}
.language-menu a[aria-current="page"] {
  background: var(--lilac);
}
html[lang="ar"],
[lang="ar"] {
  --font: "Magazine Arabic", sans-serif;
  font-family: var(--font);
}
html[lang="ko"],
[lang="ko"] {
  --font: "Magazine Korean", sans-serif;
  font-family: var(--font);
}
html[lang="zh-Hans"],
[lang="zh-Hans"] {
  --font: "Magazine Simplified Chinese", sans-serif;
  font-family: var(--font);
}
html[lang="zh-Hant"],
[lang="zh-Hant"] {
  --font: "Magazine Traditional Chinese", sans-serif;
  font-family: var(--font);
}
html[lang="en"] :is(h1, h2, h3),
html[lang="ar"] :is(h1, h2, h3),
html[lang="ko"] :is(h1, h2, h3) {
  word-break: normal;
  overflow-wrap: anywhere;
}
html[lang="ar"] :is(.intro h1, .article-heading h1, .article-body, .lead) {
  line-height: 1.9;
}
html[lang="ar"] .intro h1 {
  font-size: clamp(30px, 4vw, 52px);
}
html[lang="ar"] .card-body :is(h2, h3) {
  line-height: 1.8;
}
html[lang="ar"] .article-heading h1 {
  line-height: 1.65;
}
html[lang="ar"] .credit {
  direction: ltr;
}
html[lang="ko"] :is(h1, h2, h3, .lead, .article-body) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .site-header nav {
    position: relative;
    inline-size: 100%;
  }
  .language-menu {
    position: static;
  }
  .language-menu ul {
    inset-inline: 0;
    inset-block-start: 100%;
    min-inline-size: 0;
  }
}

.brand-name {
  font-family: "Shippori Mincho B1", serif;
}
.language-menu :is([lang="ja"], [lang="en"]),
.eyebrow[lang="en"] {
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
}

.breadcrumb-current {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}
.breadcrumb-current [aria-current="page"] {
  min-inline-size: 0;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: anywhere;
}
.sources a {
  vertical-align: top;
}
html[lang="ja"] .breadcrumb-current [aria-current="page"] {
  word-break: auto-phrase;
}

/* 語学中。 media system: tokens and ms-* primitives taken from the approved B home. */
/* Scoped to .media-system; never touches :root, html, body or scrolling. */
.media-system {
  --ms-ink: #111111;
  /* Warm charcoal reserved for the wordmark letters. */
  --ms-wordmark: #2e2925;
  --ms-paper: #f4f1ea;
  --ms-white: #ffffff;
  --ms-orange: #ff5c20;
  --ms-lilac: #d4bff5;
  --ms-amber: #b07300;
  --ms-mute: rgba(17, 17, 17, 0.7);
  --ms-faint: rgba(17, 17, 17, 0.5);
  --ms-line: rgba(17, 17, 17, 0.14);
  --ms-paper-soft: rgba(244, 241, 234, 0.76);
  --ms-paper-line: rgba(244, 241, 234, 0.16);
  --ms-font: "Zen Kaku Gothic New", system-ui, sans-serif;
  /* Wordmark only. */
  --ms-font-wordmark: "Shippori Mincho B1", serif;
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 24px;
  --ms-space-6: 32px;
  --ms-space-7: 48px;
  --ms-space-8: 64px;
  --ms-radius-square: 0;
  --ms-type-credit: 11px;
  --ms-type-label: 12px;
  --ms-type-caption: 13px;
  --ms-type-body: 14px;
  --ms-type-action: 15px;
  --ms-type-card: 17px;
  --ms-type-brand: 34px;
  --ms-type-brand-mobile: 28px;
  --ms-type-brand-footer: 26px;
  --ms-type-heading: clamp(26px, 3.2vw, 44px);
  --ms-type-heading-compact: clamp(24px, 2.4vw, 32px);
  --ms-type-list-card: clamp(18px, 2vw, 22px);
  --ms-leading-copy: 1.7;
  --ms-leading-heading: 1.15;
  --ms-target: 44px;
  --ms-border: 1px solid var(--ms-line);
  --ms-border-strong: 2px solid var(--ms-ink);
  --ms-radius-pill: 999px;
  --ms-radius-icon: 18px;
  --ms-focus-width: 3px;
  --ms-focus-offset: 3px;
  --ms-max: 1280px;
  /* Inline gutter shared by wrapped and full-bleed sections. */
  --ms-gutter: max(32px, calc((100% - var(--ms-max)) / 2));
  color: var(--ms-ink);
  font-family: var(--ms-font);
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .media-system {
    --ms-gutter: 16px;
  }
}

/* Base: low specificity so page styles always win. */
.media-system :where(a) {
  color: inherit;
  text-decoration: none;
}
.media-system :where(a):hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.media-system :where(a, button, summary, select, input):focus-visible {
  outline: var(--ms-focus-width) solid currentColor;
  outline-offset: var(--ms-focus-offset);
}
.ms-wrap {
  width: min(100% - var(--ms-space-8), var(--ms-max));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .ms-wrap {
    width: calc(100% - var(--ms-space-6));
  }
}
.ms-inverse {
  background: var(--ms-ink);
  color: var(--ms-paper);
}
.ms-arrow {
  display: inline-block;
}
.ms-arrow:dir(rtl) {
  transform: scaleX(-1);
}

/* Brand: wordmark, descriptor, quiet Rehear credit. */
.ms-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-inline-size: 26em;
}
.ms-brand-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
}
.media-system .ms-brand-link:hover {
  text-decoration: none;
}
.media-system .ms-brand-link:focus-visible {
  outline-color: var(--ms-wordmark);
}
.ms-wordmark {
  display: inline-block;
  inline-size: 4.08em;
  font-family: var(--ms-font-wordmark);
  font-weight: 700;
  font-size: var(--ms-type-brand);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ms-wordmark);
  unicode-bidi: isolate;
  white-space: nowrap;
}
.ms-kuten {
  color: var(--ms-amber);
}
.ms-descriptor {
  margin: 2px 0 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-caption);
  font-weight: 700;
  line-height: 1.5;
}
.ms-credit {
  margin: var(--ms-space-1) 0 0;
  color: var(--ms-faint);
  font-size: var(--ms-type-credit);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.ms-credit-in {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  unicode-bidi: isolate;
}
/* Official Rehear wordmark as-is; sized by height only. */
.ms-credit-mark {
  display: block;
  width: auto;
  height: 14px;
}
/* Inverse: paper letters on ink, amber period, official PNG rendered white. */
.ms-brand--inverse .ms-wordmark {
  font-size: var(--ms-type-brand-footer);
  color: var(--ms-paper);
}
.media-system .ms-brand--inverse .ms-brand-link:focus-visible {
  outline-color: var(--ms-paper);
}
.ms-brand--inverse .ms-descriptor {
  margin-block-start: 10px;
  color: var(--ms-paper-soft);
}
.ms-brand--inverse .ms-credit {
  margin-block-start: var(--ms-space-2);
  color: var(--ms-paper-soft);
}
.ms-brand--inverse .ms-credit-mark {
  height: 13px;
  filter: brightness(0) invert(1);
}
@media (max-width: 640px) {
  .ms-brand {
    max-inline-size: none;
  }
  .ms-wordmark {
    font-size: var(--ms-type-brand-mobile);
  }
  .ms-descriptor {
    font-size: var(--ms-type-label);
  }
}

/* Actions: orange primary (bar CTA), paper (CTA band), quiet text link. */
.ms-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ms-target);
  font: inherit;
  font-size: var(--ms-type-action);
  font-weight: 900;
  border: 0;
  cursor: pointer;
}
.ms-action--primary,
.ms-action--paper {
  padding-inline: 18px;
  color: var(--ms-ink);
}
.ms-action--primary {
  background: var(--ms-orange);
}
.ms-action--paper {
  min-height: 48px;
  padding-inline: 22px;
  background: var(--ms-white);
}
.media-system .ms-action--primary:focus-visible,
.media-system .ms-action--paper:focus-visible {
  outline-color: var(--ms-ink);
}
.ms-action--quiet {
  padding: 0;
  background: none;
  color: inherit;
  font-size: var(--ms-type-body);
  font-weight: 700;
}

/* Labels. */
.ms-kicker {
  margin: 0;
  color: var(--ms-orange);
  font-size: var(--ms-type-caption);
  font-weight: 900;
  letter-spacing: 0.2em;
}
.ms-tag {
  display: inline-block;
  padding: var(--ms-space-1) 10px;
  background: var(--ms-orange);
  color: var(--ms-ink);
  font-size: var(--ms-type-label);
  font-weight: 900;
}
.ms-chip {
  display: inline-block;
  padding: 6px var(--ms-space-3);
  background: var(--ms-lilac);
  color: var(--ms-ink);
  font-size: var(--ms-type-body);
  font-weight: 900;
  letter-spacing: 0.14em;
}
.ms-pill {
  padding: 2px var(--ms-space-2);
  border: 1px solid var(--ms-ink);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-ink);
}
.ms-pill--hot {
  background: var(--ms-orange);
  border-color: var(--ms-orange);
}

/* Headings. */
.ms-heading-title {
  margin: var(--ms-space-2) 0 0;
  font-size: var(--ms-type-heading);
  font-weight: 900;
  line-height: var(--ms-leading-heading);
  letter-spacing: -0.02em;
}
.ms-heading-title--compact {
  font-size: var(--ms-type-heading-compact);
  line-height: 1.2;
  letter-spacing: normal;
}
.ms-heading-title:first-child {
  margin-block-start: 0;
}

/* Breadcrumbs. */
.ms-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--ms-mute);
  font-size: var(--ms-type-label);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ms-breadcrumbs li + li::before {
  content: "/";
  margin-inline: var(--ms-space-2);
}
.ms-breadcrumbs :is(a, span) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
}

/* Empty state. */
.ms-empty {
  margin-block-start: var(--ms-space-4);
  padding-block-end: var(--ms-space-4);
  border-block-end: var(--ms-border);
}
.ms-empty-title {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}
.ms-empty-line {
  margin: var(--ms-space-2) 0 0;
  font-size: var(--ms-type-body);
  font-weight: 700;
}
.ms-empty-note {
  margin: var(--ms-space-1) 0 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-caption);
  line-height: var(--ms-leading-copy);
}
.ms-empty-links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ms-empty-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
}

/* Article card: the home rail entry, without the number. */
.ms-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-cards > li {
  padding-block: var(--ms-space-4);
  border-block-end: var(--ms-border);
}
.ms-cards > li:last-child {
  border-block-end: 0;
}
.ms-card {
  min-width: 0;
}
.ms-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ms-space-3);
  margin: 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-label);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ms-card-meta time {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.ms-card-title {
  margin: 2px 0 0;
  font-size: var(--ms-type-card);
  font-weight: 900;
  line-height: 1.45;
}
.ms-card-title a {
  display: inline-block;
  min-height: var(--ms-target);
}
.ms-card-desc {
  margin: var(--ms-space-1) 0 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-caption);
  line-height: var(--ms-leading-copy);
}
.ms-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 2px 0 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-label);
  font-weight: 700;
}
.ms-card-topics a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
}

/* Filter form: native GET, no script. */
.ms-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ms-space-3) var(--ms-space-4);
  margin: 0;
  padding: 0;
  border: 0;
}
.ms-field {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-1);
  min-width: min(100%, 12rem);
}
.ms-field-label {
  font-size: var(--ms-type-label);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.ms-select {
  min-height: var(--ms-target);
  padding-inline: 10px;
  border: var(--ms-border-strong);
  border-radius: var(--ms-radius-square);
  background: var(--ms-paper);
  color: var(--ms-ink);
  font: inherit;
  font-size: var(--ms-type-body);
  font-weight: 700;
}
.ms-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-1) var(--ms-space-4);
}

/* Preserve Arabic cursive joining in tracked labels. */
.media-system:lang(ar)
:is(.ms-kicker, .ms-chip, .ms-breadcrumbs li, .ms-card-meta, .ms-heading-title, .ms-field-label) {
  letter-spacing: normal;
}

/* Shared reader chrome: header, footer and listing. */
body.media-system {
  margin: 0;
  background: var(--ms-paper);
}
.ms-header {
  background: var(--ms-paper);
}
.ms-header-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-2) var(--ms-space-5);
  min-height: 88px;
  padding-block: var(--ms-space-3);
  box-sizing: border-box;
}
.ms-header-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ms-space-1) var(--ms-space-4);
  min-width: 0;
}
.ms-header-nav,
.ms-footer-nav {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.ms-header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
  padding-inline: var(--ms-space-3);
  font-size: var(--ms-type-action);
  font-weight: 900;
}
/* Selected entrance: a bar distinct from the hover underline, no layout shift. */
.media-system .ms-header-nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--ms-orange);
}
.ms-header :where(.languages) {
  font-family: inherit;
  font-weight: 700;
  color: var(--ms-ink);
}
.ms-footer {
  padding-block: 28px var(--ms-space-7);
}
.ms-footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4) var(--ms-space-6);
}
.ms-footer-nav {
  margin-inline: -12px;
}
.ms-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
  padding-inline: var(--ms-space-3);
  font-size: var(--ms-type-body);
  font-weight: 700;
}
.media-system .ms-footer-nav a:focus-visible {
  outline-color: var(--ms-paper);
}
.ms-list {
  background: var(--ms-white);
  border-block-start: var(--ms-border);
}
.ms-list-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  padding-block: var(--ms-space-4) 56px;
}
.ms-list-note {
  max-width: 40em;
  margin: var(--ms-space-2) 0 0;
  color: var(--ms-mute);
  font-size: var(--ms-type-body);
  line-height: var(--ms-leading-copy);
}
.ms-list-legacy {
  font-size: var(--ms-type-caption);
}
.ms-list-filter {
  margin-block-start: var(--ms-space-5);
  padding-block-end: 20px;
  border-block-end: var(--ms-border);
}
.ms-list-filter .ms-field {
  min-width: min(100%, 12rem);
  max-width: 100%;
}
.ms-list-filter .ms-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
.ms-list-cards {
  min-inline-size: 0;
}
.ms-list-cards .ms-card-title {
  font-size: var(--ms-type-list-card);
}
.ms-list-all {
  margin: 20px 0 0;
}
.ms-list-all a {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-target);
  font-size: var(--ms-type-body);
  font-weight: 900;
}
/* Labels that link must still meet the 44px target. */
.media-system a:is(.ms-tag, .ms-chip, .ms-pill) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-target);
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .ms-header-in {
    min-height: 0;
    padding-block: 10px;
  }
  .ms-header-end {
    justify-content: flex-start;
    gap: var(--ms-space-1) var(--ms-space-2);
  }
  .ms-header-nav {
    margin-inline-start: -10px;
  }
  .ms-header-nav a {
    padding-inline: 10px;
    font-size: var(--ms-type-body);
  }
  .ms-list-filter .ms-field {
    flex: 1 1 100%;
  }
}

.ms-list-authors {
  margin-block-start: var(--ms-space-6);
  padding-block-start: var(--ms-space-5);
  border-block-start: var(--ms-border);
}

/* 語学中。 all-articles cover card: standard PC specimen only. */
/* Scoped to this preview; PC two columns, smartphone one column. */

.media-system .ms-cover-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--ms-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Beat the retained learning.css `.page .related a` inline-flex rule. */
.media-system .ms-cover-preview-card,
.media-system .related .ms-cover-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: stretch;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  height: 100%;
  min-height: var(--ms-target);
  background: var(--ms-white);
  border: var(--ms-border);
  border-radius: var(--ms-radius-square);
  color: var(--ms-ink);
  text-decoration: none;
}
.media-system .ms-cover-preview-card:hover {
  border-color: var(--ms-ink);
  text-decoration: none;
}
.media-system .ms-cover-preview-card:hover .ms-cover-preview-card__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.media-system .ms-cover-preview-card:focus-visible {
  outline: var(--ms-focus-width) solid var(--ms-ink);
  outline-offset: var(--ms-focus-offset);
}

/* Cover: fixed 3:2 so cover + body lands near square at ~544px wide. */
.media-system .ms-cover-preview-card__cover {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ms-lilac);
  border-bottom: var(--ms-border);
}
.media-system .ms-cover-preview-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body: title row absorbs extra height so meta aligns across a row. */
.media-system .ms-cover-preview-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  align-content: start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) var(--ms-space-5) var(--ms-space-5);
  background: var(--ms-white);
}

.media-system .ms-cover-preview-card__category {
  justify-self: start;
  padding: 2px var(--ms-space-2);
  background: var(--ms-lilac);
  color: var(--ms-ink);
  font-size: var(--ms-type-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Never clamped: reserves two lines, grows freely for long Japanese titles. */
.media-system .ms-cover-preview-card__title {
  margin: 0;
  min-height: calc(2 * 1.45em);
  font-family: var(--ms-font);
  font-size: var(--ms-type-list-card);
  font-weight: 700;
  line-height: 1.45;
  overflow: visible;
  word-break: auto-phrase;
  text-wrap: balance;
}

.media-system .ms-cover-preview-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding-top: var(--ms-space-3);
  border-top: var(--ms-border);
  color: var(--ms-mute);
  font-size: var(--ms-type-caption);
  line-height: 1.5;
  white-space: nowrap;
}
.media-system .ms-cover-preview-card__meta time {
  flex: 0 0 auto;
}
.media-system .ms-cover-preview-card__meta::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ms-orange);
  flex: 0 0 8px;
}

/* User follow-up: smartphone has one cover card per row; preview scope only. */
@media (max-width: 640px) {
  .media-system .ms-cover-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.media-system .ms-list .ms-cover-preview-grid {
  margin-block-start: var(--ms-space-6);
}
.media-system .ms-cover-preview-grid > li {
  min-width: 0;
}
/* Retain plain related links elsewhere, without their row spacing in this specimen. */
.media-system .related .ms-cover-preview-grid > li {
  margin: 0;
  padding: 0;
  border: 0;
}
.media-system .ms-cover-preview-card__title {
  overflow-wrap: anywhere;
}

/* Media-only reading layout on 語学中。 magazine tokens. Never imported by the LP. */
/* Scope: .media-system .media-article (plus the dialog backdrop). No :root/html/body, no scroll locking. */
/* Specificity: .media-system .media-article:is(.page,.rx,.ms-wrap) = (0,3,0) base, beating Astro's .x[data-astro-cid-*] (0,2,0) and .x[cid] el[cid] (0,3,1) via an extra element where needed. */

.media-system .media-article {
  --ink: var(--ms-ink);
  --soft: var(--ms-mute);
  --line: var(--ms-line);
  --amber: var(--ms-amber);
  --accent: var(--ms-ink);
  --neutral: var(--ms-paper-soft);
  --rule: var(--ms-line);
  --ma-measure: 780px;
  --ma-body: 17px;
  --ma-leading: 1.9;
  color: var(--ms-ink);
  background: var(--ms-paper);
  font-family: var(--ms-font);
  min-height: 0;
}

/* Reading column */
.media-system .media-article:is(.page, .rx, .ms-wrap) :is(main.column, main.col),
.media-system main.media-article.ms-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--ma-measure) + 2 * var(--ms-space-6));
  margin-inline: auto;
  padding: var(--ms-space-7) var(--ms-space-6) var(--ms-space-8);
  background: transparent;
  overflow: visible;
}

/* Breadcrumbs */
.media-system .media-article:is(.page, .rx) :is(.breadcrumbs, .breadcrumb, .ms-breadcrumbs) {
  margin: 0 0 var(--ms-space-6);
  padding: 0;
  color: var(--ms-mute);
  font-family: var(--ms-font);
  font-size: var(--ms-type-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.media-system .media-article:is(.page, .rx) :is(.breadcrumbs, .breadcrumb) a {
  color: var(--ms-mute);
  text-decoration: none;
}
.media-system .media-article:is(.page, .rx) :is(.breadcrumbs, .breadcrumb) a:hover {
  color: var(--ms-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Article shell: flat, no nested card boxes */
.media-system .media-article:is(.page, .rx, .ms-wrap) article {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-square);
  background: transparent;
  box-shadow: none;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  overflow: visible;
}

/* Header */
.media-system .media-article:is(.page, .rx, .ms-wrap) article > header {
  margin: 0 0 var(--ms-space-7);
  padding: 0 0 var(--ms-space-6);
  border: 0;
  border-bottom: var(--ms-border-strong);
  background: transparent;
  box-shadow: none;
}
.media-system .media-article:is(.page, .rx) article > header .kicker {
  display: inline-block;
  margin: 0 0 var(--ms-space-4);
  padding: 0;
  background: transparent;
  color: var(--ms-amber);
  font-family: var(--ms-font);
  font-size: var(--ms-type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.media-system .media-article:is(.page, .rx) article > header :is(.byline, .meta) {
  margin: 0 0 var(--ms-space-4);
  color: var(--ms-mute);
  font-family: var(--ms-font);
  font-size: var(--ms-type-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.media-system .media-article:is(.page, .rx, .ms-wrap) article h1 {
  margin: 0 0 var(--ms-space-5);
  padding: 0;
  max-width: none;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.28;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  -webkit-line-clamp: unset;
  display: block;
}
.media-system
  .media-article:is(.page, .rx, .ms-wrap)
  article
  > header
  :is(.lead, [data-media-role="lead"]) {
  margin: 0;
  max-width: 40em;
  color: var(--ms-mute);
  font-family: var(--ms-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

/* Body copy: main paragraphs only, never header lead/byline or footer/meta */
.media-system
  .media-article:is(.page, .rx, .ms-wrap)
  article
  p:not(header p, [data-media-role], .readingFooter p, .editorialMeta p, .cta p, .related p) {
  margin: 0 0 1.6em;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: var(--ma-body);
  font-weight: 400;
  line-height: var(--ma-leading);
  letter-spacing: 0.02em;
  line-break: strict;
}
.media-system .media-article:is(.page, .rx) article .body {
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: var(--ma-body);
  line-height: var(--ma-leading);
  background: transparent;
}
.media-system .media-article:is(.page, .rx) article .body :is(ul, ol) {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}
.media-system .media-article:is(.page, .rx) article .body li {
  margin: 0 0 0.5em;
  line-height: var(--ma-leading);
}
.media-system .media-article:is(.page, .rx, .ms-wrap) article :is(p, li) a:not(.ms-pill) {
  color: var(--ms-ink);
  text-decoration: underline;
  text-decoration-color: var(--ms-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.media-system .media-article:is(.page, .rx) article .body :is(blockquote) {
  margin: var(--ms-space-6) 0;
  padding: 0 0 0 var(--ms-space-5);
  border-left: var(--ms-border-strong);
  background: transparent;
  color: var(--ms-ink);
  font-weight: 700;
}
.media-system .media-article:is(.page, .rx) article .body hr {
  margin: var(--ms-space-7) 0;
  border: 0;
  border-top: var(--ms-border);
}

/* Headings: semantic only, bold editorial sans */
.media-system
  .media-article:is(.page, .rx, .ms-wrap)
  article
  h2:not(.readingFooter h2, .editorialMeta h2) {
  margin: var(--ms-space-8) 0 var(--ms-space-5);
  padding: var(--ms-space-4) 0 0;
  border: 0;
  border-top: var(--ms-border-strong);
  background: transparent;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.45;
  overflow: visible;
  white-space: normal;
}
.media-system
  .media-article:is(.page, .rx, .ms-wrap)
  article
  h3:not(.readingFooter h3, .editorialMeta h3) {
  margin: var(--ms-space-7) 0 var(--ms-space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  overflow: visible;
  white-space: normal;
}
.media-system .media-article:is(.page, .rx, .ms-wrap) article :is(h2, h3) + p {
  margin-top: 0;
}

/* Images: layout only, bytes untouched */
.media-system .media-article:is(.page, .rx, .ms-wrap) article :is(img, picture, video) {
  max-width: 100%;
  height: auto;
}

/* Native metadata: categories + tags use .ms-pill */
.media-system .media-article.page article .editorialMeta {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-4);
}
.media-system .media-article.page article :is(.editorialCategories, .editorialTags) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
}
.media-system .media-article.page article :is(.editorialCategories, .editorialTags) > li {
  margin: 0;
  padding: 0;
}

/* Legacy reading footer: CTA and related stay separate sections, not nested cards */
.media-system .media-article:is(.rx, .page) .readingFooter {
  margin: var(--ms-space-8) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  gap: var(--ms-space-7);
}
.media-system .media-article:is(.rx, .page) .readingFooter .cta {
  margin: 0;
  padding: var(--ms-space-6) 0;
  border: 0;
  border-top: var(--ms-border-strong);
  border-bottom: var(--ms-border);
  border-radius: var(--ms-radius-square);
  background: transparent;
  box-shadow: none;
  color: var(--ms-ink);
}
.media-system .media-article:is(.rx, .page) .readingFooter .cta :is(h2, h3) {
  margin: 0 0 var(--ms-space-3);
  padding: 0;
  border: 0;
  font-family: var(--ms-font);
  font-size: var(--ms-type-heading-compact);
  font-weight: 900;
  line-height: 1.4;
}
.media-system .media-article:is(.rx, .page) .readingFooter .cta p {
  margin: 0 0 var(--ms-space-4);
  font-size: var(--ms-type-body);
  line-height: var(--ma-leading);
}
.media-system .media-article:is(.rx, .page) .readingFooter .cta img {
  max-width: 100%;
  height: auto;
}
.media-system .media-article:is(.rx, .page) .readingFooter .related {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.media-system .media-article:is(.rx, .page) .readingFooter .related :is(h2, h3):first-child {
  margin: 0 0 var(--ms-space-5);
  padding: var(--ms-space-3) 0 0;
  border: 0;
  border-top: var(--ms-border-strong);
  font-family: var(--ms-font);
  font-size: var(--ms-type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.media-system
  .media-article:is(.rx, .page)
  .readingFooter
  .related
  :is(ul, ol, .relatedList):not(.ms-cover-preview-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ms-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Muted secondary copy */
.media-system .media-article.page .lead,
.media-system .media-article.page .ctaDescription,
.media-system .media-article.rx .related p,
.media-system .media-article [data-media-role="lead"] {
  color: var(--ms-mute);
}

/* Focus */
.media-system .media-article:is(.page, .rx, .ms-wrap) a:focus-visible {
  outline: var(--ms-focus-width) solid var(--ms-ink);
  outline-offset: var(--ms-focus-offset);
}

@media (max-width: 640px) {
  .media-system .media-article {
    --ma-body: 16px;
    --ma-leading: 1.85;
  }
  .media-system .media-article:is(.page, .rx, .ms-wrap) :is(main.column, main.col),
  .media-system main.media-article.ms-wrap {
    padding: var(--ms-space-6) var(--ms-space-4) var(--ms-space-7);
  }
  .media-system .media-article:is(.page, .rx, .ms-wrap) article > header {
    margin-bottom: var(--ms-space-6);
    padding-bottom: var(--ms-space-5);
  }
  .media-system .media-article:is(.page, .rx, .ms-wrap) article h1 {
    font-size: clamp(28px, 8vw, 32px);
    line-height: 1.32;
  }
  .media-system
    .media-article:is(.page, .rx, .ms-wrap)
    article
    > header
    :is(.lead, [data-media-role="lead"]) {
    font-size: 16px;
  }
  .media-system
    .media-article:is(.page, .rx, .ms-wrap)
    article
    h2:not(.readingFooter h2, .editorialMeta h2) {
    margin-top: var(--ms-space-7);
  }
  .media-system
    .media-article:is(.rx, .page)
    .readingFooter
    .related
    :is(ul, ol, .relatedList):not(.ms-cover-preview-grid) {
    grid-template-columns: 1fr;
  }
}

.media-system .screenDialog::backdrop {
  background: var(--ms-ink, #111111);
  opacity: 0.72;
}

.media-system .media-article article h1 .headingPart {
  display: inline;
}
.media-system .media-article .editorialMeta .editorialBy {
  flex-basis: 100%;
}

/* Magazine variant (home only): bordered paper selector with a lilac panel. */
.magazine {
  font:
    700 0.875rem / 1.3 "Zen Kaku Gothic New",
    system-ui,
    sans-serif;
  color: #111111;
}
.magazine summary {
  list-style: none;
  box-sizing: border-box;
  gap: 8px;
  padding-inline: 8px 12px;
  border: 2px solid #111111;
  background: #f4f1ea;
  text-decoration: none;
}
.magazine summary::-webkit-details-marker {
  display: none;
}
.magazine .sep {
  display: none;
}
.magazine .menuLabel {
  padding: 3px 7px;
  background: #d4bff5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.magazine .currentLabel {
  font-weight: 900;
}
.magazine .chev {
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: 2px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: translateY(-2px) rotate(45deg);
}
.magazine[open] .chev {
  transform: translateY(2px) rotate(-135deg);
}
.magazine summary:hover,
.magazine[open] summary {
  background: #d4bff5;
}
.magazine summary:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}
.magazine ul {
  min-width: 0;
  inline-size: max-content;
  max-inline-size: min(18rem, calc(100vw - 32px));
  box-sizing: border-box;
  margin-block-start: 6px;
  padding: 6px;
  border: 2px solid #111111;
  background: #d4bff5;
  box-shadow: 4px 4px 0 #111111;
}
.magazine a {
  justify-content: space-between;
  gap: 16px;
  padding-inline: 12px;
  background: #f4f1ea;
  font-weight: 700;
}
.magazine a + a {
  margin-block-start: 4px;
}
.magazine a:hover {
  background: #ffffff;
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.magazine a:focus-visible {
  background: #ffffff;
  outline: 3px solid #111111;
  outline-offset: -3px;
}
.magazine a[aria-current] {
  background: #111111;
  color: #f4f1ea;
  font-weight: 900;
}
.magazine a[aria-current]:focus-visible {
  outline-color: #ff5c20;
}
.magazine .check {
  color: #ff5c20;
  font-weight: 900;
}
/* Narrow screens: the panel flows under the summary, so it can never leave the viewport. */
@media (max-width: 640px) {
  .magazine ul {
    position: static;
  }
}

.mh{

  --ink: var(--ms-ink);
  --wordmark: var(--ms-wordmark);
  --paper: var(--ms-paper);
  --white: var(--ms-white);
  --orange: var(--ms-orange);
  --lilac: var(--ms-lilac);
  --amber: var(--ms-amber);
  --mute: var(--ms-mute);
  --line: var(--ms-line);
  --paperSoft: var(--ms-paper-soft);
  --gutter: var(--ms-gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ms-font);
  font-weight: 400;
  overflow-wrap: anywhere;
}.mh .wrap{
  width: min(100% - 64px, 1280px);
  margin-inline: auto;
}.mh a{
  color: inherit;
  text-decoration: none;
}.mh a:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}.mh a:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 3px;
}.mh .arrow{
  display: inline-block;
}.mh:dir(rtl) .arrow{
  transform: scaleX(-1);
}.mh .bar{
  background: var(--paper);
}.mh .barIn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 88px;
  padding-block: 12px;
  box-sizing: border-box;
}.mh .brandBlock{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  max-inline-size: 26em;
}.mh .brand{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}.mh .descriptor{
  margin: 2px 0 0;
  color: var(--mute);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}.mh .credit{
  margin: 4px 0 0;
  color: rgba(17, 17, 17, 0.5);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
}.mh .creditIn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  unicode-bidi: isolate;
}.mh .creditMark{
  display: block;
  width: auto;
  height: 14px;
}.mh .footBrandBlock .descriptor{
  margin-block-start: 10px;
  color: var(--paperSoft);
}.mh .footBrandBlock .credit{
  margin-block-start: 8px;
  color: var(--paperSoft);
}.mh .footBrandBlock .creditMark{
  height: 13px;
  filter: brightness(0) invert(1);
}.mh .brand:hover{
  text-decoration: none;
}.mh .brand:focus-visible{
  outline-color: var(--wordmark);
}.mh .wordmark{
  display: inline-block;
  inline-size: 4.08em;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--wordmark);
  unicode-bidi: isolate;
  white-space: nowrap;
}.mh .kuten{
  color: var(--amber);
}.mh .barEnd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 16px;
}.mh .topNav{
  display: flex;
  flex-wrap: wrap;
}.mh .topNav a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 15px;
  font-weight: 900;
}.mh .languages{
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
}.mh .barCta{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 18px;
  background: var(--orange);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}.mh .barCta:focus-visible{
  outline-color: var(--ink);
}.mh .heroStage{
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  min-height: max(360px, 25vw);
  background: var(--paper);
}@media (min-width: 961px){.mh .heroStage .heroArt img{
    object-position: left 40%;
  }.mh:dir(rtl) .heroStage .heroArt img{
    object-position: right 40%;
  }}.mh .heroArt,.mh .heroText{
  grid-area: 1 / 1;
}.mh .heroArt{
  position: relative;
  min-height: 0;
}.mh .heroArt img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}.mh:dir(rtl) .heroArt img{
  object-position: right center;
}.mh .heroText{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-inline-size: 46%;
  padding-block: 24px 32px;
  padding-inline-start: var(--gutter);
  box-sizing: border-box;
}.mh .breadcrumbs ol{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}.mh .breadcrumbs li{
  display: flex;
  align-items: center;
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}.mh .breadcrumbs li + li::before{
  content: "/";
  margin-inline: 8px;
}.mh .breadcrumbs a,.mh .breadcrumbs span{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}.mh .headline{
  margin: 0;
  max-inline-size: 100%;
  font-size: clamp(40px, 6vw, 104px);
  text-wrap: balance;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;
  overflow-wrap: normal;
}.mh .line{
  display: block;
}.mh .chip{
  align-self: flex-start;
  margin: 20px 0 0;
  padding: 6px 12px;
  background: var(--lilac);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
}.mh .lead{
  max-width: 28em;
  margin: 12px 0 0;
  color: var(--mute);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}.mh .strip{
  background: var(--white);
  border-block: 1px solid var(--line);
}.mh .stripIn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  min-height: 52px;
}.mh .stripSkills{
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
}.mh .stripLinks{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}.mh .stripLinks li + li{
  border-inline-start: 1px solid var(--line);
}.mh .stripLinks a,.mh .stripMore{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 900;
}.mh .stripMore{
  margin-inline-start: auto;
}.mh .split{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}.mh .shelf{
  background: var(--ink);
  color: var(--paper);
}.mh .shelfIn{
  padding-block: 32px 36px;
  padding-inline: var(--gutter) 32px;
}.mh .kicker{
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
}.mh .shelfTitle{
  margin: 8px 0 0;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
}.mh .cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}.mh .vcard{
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding-block-end: 14px;
  background: #1d1b19;
  border: 1px solid rgba(244, 241, 234, 0.16);
}.mh .vcard:hover{
  text-decoration: none;
}.mh .vcard:hover .vName{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}.mh .vcard:focus-visible{
  outline-color: var(--orange);
}.mh .vMedia{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}.mh .vMedia img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}.mh .vApp{
  display: grid;
  place-items: center;
  background: var(--lilac);
}.mh .vApp img{
  width: 46%;
  height: auto;
  aspect-ratio: 1;
}.mh .vTag{
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 4px 10px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}.mh .vName{
  margin: 12px 14px 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}.mh .vNote{
  margin: 4px 14px 0;
  color: var(--paperSoft);
  font-size: 13px;
  line-height: 1.6;
}.mh .rail{
  background: var(--white);
}.mh .railIn{
  padding-block: 32px 28px;
  padding-inline: 32px var(--gutter);
}.mh .railTitle{
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1.2;
}.mh .empty{
  margin-block-start: 16px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--line);
}.mh .emptyTitle{
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}.mh .emptyLine{
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
}.mh .emptyNote{
  margin: 4px 0 0;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.7;
}.mh .entries{
  margin: 0;
  padding: 0;
  list-style: none;
}.mh .entry{
  display: flex;
  gap: 14px;
  padding-block: 16px;
  border-block-end: 1px solid var(--line);
}.mh .entry:last-child{
  border-block-end: 0;
}.mh .num{
  flex-shrink: 0;
  color: var(--orange);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}.mh .entryBody{
  min-width: 0;
}.mh .meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin: 0;
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}.mh .meta time{
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}.mh .pill{
  padding: 2px 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
}.mh .pillHot{
  background: var(--orange);
  border-color: var(--orange);
}.mh .tag,.mh .tax a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}.mh .entryTitle{
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
}.mh .entryTitle a{
  display: inline-block;
  min-height: 44px;
}.mh .desc{
  margin: 4px 0 0;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.7;
}.mh .tax{
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 2px 0 0;
  color: var(--mute);
  font-size: 12px;
  font-weight: 700;
}.mh .collectionLinks{
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}.mh .collectionLinks a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}.mh .adRow{
  padding-block: 32px;
}.mh .cta{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #fc591c;
  color: var(--ink);
}@media (min-width: 961px){.mh .cta{
    aspect-ratio: 6 / 1;
  }}.mh .ctaArt,.mh .ctaIn{
  grid-area: 1 / 1;
}.mh .ctaArt{
  position: relative;
  min-height: 0;
}.mh .ctaArt img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}.mh:dir(rtl) .ctaArt img{
  object-position: left center;
}.mh .ctaIn{
  position: relative;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-block: 32px;
  padding-inline-start: var(--gutter);
  padding-inline-end: max(var(--gutter), 40%);
  box-sizing: border-box;
}.mh .ctaIcon{
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 18px;
}.mh .ctaCopy{
  flex: 1 1 280px;
  min-width: 0;
}.mh .ctaTitle{
  margin: 0;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 900;
  line-height: 1.2;
}.mh .ctaText{
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}.mh .ctaBtn{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 22px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}.mh .ctaBtn:focus-visible{
  outline-color: var(--ink);
}.mh .foot{
  background: var(--ink);
  color: var(--paper);
  padding-block: 28px 48px;
}.mh .footIn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}.mh .footBrand:focus-visible{
  outline-color: var(--paper);
}.mh .footBrand .wordmark{
  font-size: 26px;
  color: var(--paper);
}.mh .footNav{
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}.mh .footNav a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 700;
}@media (max-width: 960px){.mh .split{
    grid-template-columns: minmax(0, 1fr);
  }.mh .heroStage{
    min-height: 0;
  }.mh .heroText{
    grid-area: 1 / 1;
    max-inline-size: none;
    padding-inline: var(--gutter);
    padding-block: 4px 8px;
  }.mh .heroArt{
    grid-area: 2 / 1;
  }.mh .heroArt img{
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: center;
  }.mh:dir(rtl) .heroArt img{
    object-position: center;
  }.mh .headline{
    inline-size: auto;
    max-inline-size: none;
    font-size: clamp(34px, 10vw, 84px);
  }.mh .ctaArt{
    display: none;
  }.mh .ctaIn{
    padding-inline-end: var(--gutter);
    padding-block: 24px;
  }.mh .shelfIn,.mh .railIn{
    padding-inline: var(--gutter);
  }}@media (max-width: 640px){.mh{
    --gutter: 16px;
  }.mh .wrap{
    width: calc(100% - 32px);
  }.mh .barIn{
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 10px;
  }.mh .barEnd{
    justify-content: flex-start;
    gap: 4px 8px;
  }.mh .topNav{
    margin-inline-start: -10px;
  }.mh .topNav a{
    padding-inline: 10px;
    font-size: 14px;
  }.mh .wordmark{
    font-size: 28px;
  }.mh .brandBlock{
    max-inline-size: none;
  }.mh .descriptor{
    font-size: 12px;
  }.mh .stripIn{
    padding-block: 8px;
  }.mh .stripLinks{
    margin-inline: -16px;
  }.mh .stripMore{
    margin-inline-start: -16px;
  }.mh .shelfIn,.mh .railIn{
    padding-block: 28px;
  }.mh .ctaBtn{
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }}.mh .heroStageTemp{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}.mh .heroStageTemp .heroText{
  grid-area: 1 / 1;
  max-inline-size: none;
  padding-inline-end: 32px;
}.mh .heroStageTemp .heroArt{
  grid-area: 1 / 2;
}.mh .heroStageTemp .heroArt img,.mh:dir(rtl) .heroStageTemp .heroArt img{
  object-position: center;
}.mh .heroStageTemp .headline{
  inline-size: auto;
  max-inline-size: 100%;
  font-size: clamp(36px, 4.4vw, 76px);
}.mh .ctaInTemp{
  min-height: 0;
  padding-inline-end: var(--gutter);
}@media (max-width: 960px){.mh .heroStageTemp{
    grid-template-columns: minmax(0, 1fr);
  }.mh .heroStageTemp .heroText{
    padding-inline-end: var(--gutter);
  }.mh .heroStageTemp .heroArt{
    grid-area: 2 / 1;
  }.mh .heroStageTemp .headline{
    font-size: clamp(34px, 10vw, 84px);
  }}.mh:lang(ar) :is(.chip, .kicker, .breadcrumbs li, .meta, .headline, .shelfTitle, .stripSkills){
  letter-spacing: normal;
}.mh:lang(ar) .headline{
  line-height: 1.25;
}
/* Integration only: approved assets/layout, current reviewed content, native fonts and five-glyph identity. */
.ms-header .language-menu summary::after {content:none;}
.magazine li+li {margin-block-start:4px;}
.ms-header .language-menu {font-family:var(--ms-font);}
body.media-system { --ms-font: var(--font); }
.ms-wordmark.wordmark { inline-size:auto; font-size:var(--ms-type-brand); line-height:1; }
.ms-footer .ms-wordmark.wordmark {font-size:var(--ms-type-brand-footer);}
.ms-brand--inverse .ms-credit-mark {filter:invert(1);}
.ms-header .language-menu summary {border:2px solid var(--ms-ink);padding-inline:8px;font-size:14px;}
.ms-header .language-menu a {display:flex;align-items:center;min-block-size:44px;}
.ms-header .language-menu {align-self:center;}
.ms-header .language-menu ul {z-index:10;}
.restored-listing {background:var(--ms-white);}
.restored-listing .ms-breadcrumbs {margin-bottom:0;}
.media-article .header .lead {font-weight:700;}
.media-article.page {background:var(--ms-paper);}
.media-article .editorialMeta {display:flex;gap:8px;flex-wrap:wrap;margin:0 0 32px;}
.media-article .editorialMeta .ms-pill {display:inline-flex;align-items:center;min-block-size:44px;border:1px solid var(--ms-ink);border-radius:999px;padding-inline:10px;}
.media-article .sources {font-size:14px;line-height:1.8;}
.mh .vcard[data-section="study"] .vMedia img {object-position:50% 42%;}
.mh .vcard[data-section="resources"] .vMedia img {object-position:65% 75%;}
.mh .vcard[data-section="podcasts"] .vMedia img {object-position:50% 35%;}
.ms-cover-preview-card__category {font-weight:700;}
@media(max-width:640px){.ms-wordmark.wordmark{font-size:var(--ms-type-brand-mobile);}.ms-header-end{position:relative;}.ms-header .language-menu{position:static;}.ms-header .language-menu ul{inset-inline:0;inset-block-start:100%;}.ms-filter-field{flex-basis:100%;}}

@font-face {
  font-family: "Magazine Author Japanese";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/authors-ja-1dc7d7786a48.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Japanese";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/authors-ja-9a5b3b2bf433.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/authors-ar-668d830f5f71.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Arabic";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/authors-ar-668d830f5f71.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Korean";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/authors-ko-2b6faf5510d9.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Korean";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/authors-ko-2b6faf5510d9.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Simplified Chinese";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/authors-zh-hans-d2cec5bac7f1.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Simplified Chinese";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/authors-zh-hans-d2cec5bac7f1.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Traditional Chinese";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/authors-zh-hant-7b1fba6d993f.woff2") format("woff2");
}
@font-face {
  font-family: "Magazine Author Traditional Chinese";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/authors-zh-hant-7b1fba6d993f.woff2") format("woff2");
}

/* Shared additions only: the existing page composition remains owned by its renderer. */
:root {
  --author-font: "Magazine Author Japanese", system-ui, sans-serif;
}
html[lang="ar"] {
  --author-font: "Magazine Author Arabic", sans-serif;
}
html[lang="ko"] {
  --author-font: "Magazine Author Korean", sans-serif;
}
html[lang="zh-Hans"] {
  --author-font: "Magazine Author Simplified Chinese", sans-serif;
}
html[lang="zh-Hant"] {
  --author-font: "Magazine Author Traditional Chinese", sans-serif;
}
.authors-nav-link,
.author-byline,
.article-author,
.authors-heading,
.authors-list,
.authors-page > .breadcrumbs,
.authors-page .section-heading,
.author-back-link {
  font-family: var(--author-font);
}
.author-name {
  font-family: "Magazine Author Japanese", system-ui, sans-serif;
  white-space: nowrap;
}
.author-link,
.author-back-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  max-inline-size: 100%;
}
.author-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 16px 0 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.6;
}
.article-card {
  display: flex;
  flex-direction: column;
}
.article-card > .cover-card {
  flex: 1;
  block-size: auto;
}
.author-card-byline {
  margin: 0;
  padding: 0 24px 10px;
  border: 1px solid var(--line);
  border-block-start: 0;
  background: var(--white);
  font-size: 12px;
}
.media-system .article-card > .ms-cover-preview-card {
  height: auto;
  flex: 1;
}
.media-system .article-card > .author-card-byline {
  border: var(--ms-border);
  border-block-start: 0;
  padding-inline: var(--ms-space-5);
  padding-block-end: var(--ms-space-3);
  background: var(--ms-white);
}
.article-author {
  margin-block-start: 48px;
  padding-block: 24px;
  border-block: 1px solid var(--line);
}
.article-author h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
}
.article-author p {
  margin: 0 0 8px;
}
.article-author > p:has(.author-name) {
  font-size: 22px;
}
.author-profile {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.authors-page {
  margin-block: 32px 80px;
}
.authors-heading {
  margin-block-end: 40px;
  max-inline-size: 780px;
}
.authors-heading h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.5;
}
.authors-heading > p {
  margin: 12px 0 0;
  line-height: 1.9;
}
.authors-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.authors-list > li {
  min-inline-size: 0;
}
.author-list-link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  gap: 12px;
  padding: 24px;
  border-block-start: 2px solid var(--ink);
  background: var(--white);
  text-decoration: none;
}
.author-list-link h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
}
.author-list-link p {
  margin: 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.9;
}
.author-list-link .author-count {
  margin-block-start: auto;
  padding-block-start: 12px;
}
.author-list-action {
  padding-block-start: 8px;
  border-block-start: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.9;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.author-list-link:hover .author-list-action {
  text-decoration-thickness: 2px;
}
.author-back-link {
  margin-block-start: 32px;
  font-size: 14px;
}
@media (max-width: 800px) {
  .authors-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .author-card-byline {
    padding-inline: 20px;
  }
  .authors-page {
    margin-block: 24px 48px;
  }
  .authors-heading {
    margin-block-end: 28px;
  }
  .author-list-link {
    padding: 20px;
  }
}