:root {
  --font-serif-en: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.is-english {
  font-family: var(--font-sans-en);
  line-height: 1.78;
}

.is-english :where(h1, h2, h3, h4, .site-nav__title, .byobu-panel__label, .story-card h3, .section-heading h2) {
  font-family: var(--font-serif-en);
  letter-spacing: -.012em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.is-english :where(p, li, dd) {
  hanging-punctuation: first last;
}

.is-english .site-brand__name,
.is-english .site-footer__brand {
  font-family: var(--font-serif);
}

.is-english .site-nav__title,
.is-english .byobu-panel__label {
  letter-spacing: .01em;
}

.byobu-panels--english .byobu-panel__icon-fallback {
  font-family: var(--font-roman);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: .08em;
}

.byobu-panels--english .byobu-panel small {
  max-width: 20ch;
  line-height: 1.5;
}

.front-hero--english .front-hero__copy {
  max-width: min(900px, 76vw);
}

.front-hero--english h1 {
  display: grid;
  gap: .08em;
  max-width: 14ch;
  font-family: var(--font-serif-en);
  line-height: .94;
  text-wrap: balance;
}

.front-hero--english h1 span,
.front-hero--english h1 small {
  font-family: inherit;
  letter-spacing: -.035em;
}

.front-hero--english h1 span {
  font-size: clamp(3.2rem, 8vw, 7.5rem);
}

.front-hero--english h1 small {
  margin: 0;
  color: var(--paper-100);
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  line-height: 1;
}

.front-hero--english .front-hero__intro {
  max-width: 62ch;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
}

.front-hero--english .front-hero__programme p {
  font-family: var(--font-sans-en);
  letter-spacing: .02em;
}

.is-english .section-heading h2 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  line-height: 1.08;
}

.is-english .section-heading__lead {
  max-width: 60ch;
  font-family: var(--font-sans-en);
  line-height: 1.75;
}

.story-grid--english {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-card--english {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.story-card--english .story-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.story-card--english h3 {
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1.18;
}

.story-card--english .story-card__content > p:not(.eyebrow) {
  line-height: 1.68;
}

.story-card--english .story-card__context strong {
  color: var(--gold-300);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-card--english .story-card__meta {
  margin-top: auto;
}

.story-card__read {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
  color: var(--gold-300);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
}

.archive-hero--english h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: 1.02;
}

.archive-hero__monogram {
  font-family: var(--font-roman);
  font-size: clamp(7rem, 18vw, 15rem);
  letter-spacing: -.08em;
}

.english-audio-notice {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.english-audio-notice p {
  max-width: 88ch;
  margin: 0;
  color: var(--paper-400);
  font-size: .78rem;
}

.english-audio-notice strong {
  color: var(--paper-100);
}

.story-hero--english h1 {
  max-width: 13ch;
  font-family: var(--font-serif-en);
  font-size: clamp(3.2rem, 8vw, 7.3rem);
  letter-spacing: -.035em;
  line-height: .98;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.story-hero--english .story-hero__subtitle {
  max-width: 34ch;
  font-family: var(--font-serif-en);
  font-size: clamp(1.4rem, 3.2vw, 2.65rem);
  line-height: 1.25;
  text-wrap: balance;
}

.story-lead--english .reading-column > p:last-child {
  font-family: var(--font-serif-en);
  line-height: 1.65;
}

.story-lead--english .story-lead__mark {
  font-family: var(--font-roman);
}

.english-glance,
.english-intro-section,
.english-context,
.english-reference,
.english-method,
.english-related {
  padding-block: clamp(4rem, 9vw, 8rem);
}

.english-intro-section,
.english-reference,
.english-related {
  border-top: 1px solid var(--line);
}

.english-glance {
  border-block: 1px solid var(--line);
  background: rgb(3 7 10 / 40%);
}

.english-glance h2,
.english-intro-section h2,
.english-context h2,
.english-reference h2,
.english-method h2,
.english-film-note h2 {
  margin: 0 0 2rem;
  font-family: var(--font-serif-en);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.english-glance dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.english-glance dl > div {
  padding: 1.4rem;
  border-left: 1px solid var(--line);
}

.english-glance dl > div:first-child {
  border-left: 0;
}

.english-glance dt {
  color: var(--gold-300);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.english-glance dd {
  margin: .55rem 0 0;
  color: var(--paper-200);
  font-family: var(--font-serif-en);
  font-size: 1.08rem;
  line-height: 1.45;
}

.english-intro-section .reading-column > p:not(.eyebrow),
.english-method .reading-column > p:not(.eyebrow) {
  color: var(--paper-200);
  font-size: 1.02rem;
  line-height: 1.9;
}

.english-context {
  background: var(--ink-950);
}

.english-context__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.english-context__grid section {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--ink-900);
}

.english-context__grid h3,
.english-reference h3 {
  margin: 0 0 1rem;
  font-family: var(--font-serif-en);
  font-size: clamp(1.4rem, 2.7vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
}

.english-context__grid p {
  color: var(--paper-400);
}

.story-article--english .story-reading-key__intro h2,
.story-article--english .story-video h2,
.story-article--english .story-note h2,
.story-article--english .story-timeline h2,
.story-article--english .story-sources h2,
.story-scene--english h2 {
  font-family: var(--font-serif-en);
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.story-scene--english .story-prose p {
  color: var(--paper-200);
  font-size: 1rem;
  line-height: 1.9;
}

.story-video--english .story-video__language-note {
  max-width: 70ch;
  margin: -1rem 0 2rem;
  color: var(--paper-400);
  font-size: .78rem;
}

.story-video--english .video-frame__launch > span:not(.video-frame__play, .screen-reader-text) {
  display: grid;
  justify-items: center;
  gap: .25rem;
}

.story-video--english .video-frame__launch small {
  color: var(--paper-400);
  font-size: .65rem;
  font-weight: 500;
}

.story-timeline small {
  display: block;
  margin-top: .35rem;
  color: var(--paper-400);
  font-size: .68rem;
}

.english-reference {
  background: var(--ink-950);
}

.english-reference__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
}

.english-reference dl {
  margin: 0;
}

.english-reference dl > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.english-reference dt {
  color: var(--paper-100);
  font-family: var(--font-serif-en);
  font-size: 1.05rem;
  font-weight: 700;
}

.english-reference dt span {
  margin-left: .35rem;
  color: var(--gold-300);
  font-family: var(--font-serif);
  font-size: .82em;
}

.english-reference dd {
  margin: .35rem 0 0;
  color: var(--paper-400);
  font-size: .8rem;
}

.story-sources--english [lang="ja"] {
  font-family: var(--font-serif);
}

.story-sources--english small {
  line-height: 1.6;
}

.english-related .section-heading {
  margin-bottom: 2rem;
}

.english-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.english-guide__grid article {
  padding: clamp(1.6rem, 4vw, 3.2rem);
}

.english-guide__grid article + article {
  border-left: 1px solid var(--line);
}

.english-guide__grid span {
  color: var(--vermillion-400);
  font-family: var(--font-roman);
  font-size: .72rem;
  letter-spacing: .12em;
}

.english-guide__grid h3 {
  margin: 1.2rem 0 .7rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.english-guide__grid p,
.english-film-note p {
  color: var(--paper-400);
}

.english-film-note {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgb(196 162 97 / 7%), transparent 55%),
    var(--ink-950);
}

.english-film-note__notice {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.english-film-note__notice strong {
  color: var(--paper-100);
}

.home-manifesto--english h2 {
  max-width: 18ch;
  font-family: var(--font-serif-en);
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: -.02em;
  line-height: 1.08;
}

.is-english .standard-page .entry-hero h1,
.is-english .standard-page .entry-content h2,
.is-english .standard-page .entry-content h3,
.is-english .not-found h1 {
  font-family: var(--font-serif-en);
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .front-hero--english .front-hero__copy {
    max-width: 100%;
  }

  .english-glance dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .english-glance dl > div:nth-child(odd) {
    border-left: 0;
  }

  .english-glance dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .story-grid--english,
  .english-context__grid,
  .english-reference__grid,
  .english-guide__grid,
  .english-glance dl {
    grid-template-columns: 1fr;
  }

  .english-guide__grid article + article,
  .english-glance dl > div,
  .english-glance dl > div:nth-child(odd) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .english-guide__grid article:first-child,
  .english-glance dl > div:first-child {
    border-top: 0;
  }

  .front-hero--english h1 span {
    font-size: clamp(2.7rem, 14vw, 4.7rem);
  }

  .front-hero--english h1 small {
    margin-top: 0;
    font-size: clamp(2.3rem, 11.5vw, 4rem);
  }

  .story-hero--english h1 {
    font-size: clamp(2.8rem, 13vw, 5rem);
  }

  .archive-hero--english h1 {
    font-size: clamp(2.7rem, 13vw, 4.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-card--english,
  .story-card--english img {
    transition: none !important;
  }
}
