/* ==========================================================================
   BORIS LEHMAN — JAPAN TOUR 2026
   Colours follow the v2 flyer: gold = title / general info, blue = films,
   burgundy = venues & schedule.
   Breakpoints: 1000 (venues → rows) · 900 · 720 (phones) · 480 · 360
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted subsets of Noto Sans JP / Noto Serif JP, SIL OFL 1.1)
   Only the characters used on this page are included, so every computer shows the same font.
   After adding text with new kanji, rebuild with tools/build-fonts.sh. ---------- */
@font-face {
  font-family: "BL Sans JP";
  src: url("../fonts/NotoSansJP-subset.woff2?v=3") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BL Serif JP";
  src: url("../fonts/NotoSerifJP-600-subset.woff2?v=2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #231f20;
  --paper: #ffffff;
  --muted: #555555;
  --rule: #b3b3b3;
  --still: #e6e6e6;

  --gold: #a5925e;
  --blue: #0d9fda;
  --burgundy: #7c1c56;

  --latin: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jp: "BL Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mincho: "BL Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --max: 1080px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 56px;
  /* same inset as the title on the top photo (3.6% of the photo width) */
  --photo-inset: clamp(16px, calc(0.036 * (min(100vw, var(--max)) - 2 * var(--gutter))), 52px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "BL Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
  line-break: strict;                 /* 強い禁則 */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }
/* in-page links carry no href (so no "#section" shows on hover or in the address bar); main.js scrolls them */
:where(a[data-target]) { cursor: pointer; text-decoration: underline; }

/* hover colours only for real mouse pointers (a tapped link on iPhone would stay coloured) */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--burgundy); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 3. Utilities ---------- */
/* .wrap only sets side padding, so it never cancels a section's top/bottom spacing */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.en { font-family: var(--latin); font-weight: 700; letter-spacing: .01em; }
.nb { display: inline-block; }       /* a line may only break between .nb chunks */
a .nb { text-decoration: inherit; }  /* an inline-block does not pick up its link's underline by itself */
.nw { white-space: nowrap; }         /* never break inside (names, titles) */

/* ―― must join into one line: Latin fonts leave a gap between the two bars */
.dash { font-family: var(--jp); letter-spacing: 0; white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* venue number tag: black square with a white number */
.tag {
  display: inline-grid; place-items: center;
  width: 1.35em; height: 1.35em;
  background: var(--ink); color: var(--paper);
  font-family: var(--latin); font-weight: 700; font-size: 12px; line-height: 1;
  text-decoration: none;
}
.tag--inline { font-size: 10px; vertical-align: 1px; margin: 0 1px; }

/* ---------- 4. Site header ---------- */
/* transparent over the top photo → frosted glass once the page scrolls */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .3s ease, background-color .35s ease, color .35s ease, border-color .35s ease,
              -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.site-header.is-solid {
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: rgba(35, 31, 32, .1);
}

.site-header__inner {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--max); height: var(--header-h); margin-inline: auto;
  /* over the photo: line up with the photo title; as glass: line up with the page content */
  padding-inline: calc(var(--gutter) + var(--photo-inset));
  transition: padding .35s ease;
}
.site-header.is-solid .site-header__inner { padding-inline: var(--gutter); }

.site-header__brand {
  font-family: var(--latin); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.site-header__brand span { color: var(--gold); margin-left: .6em; font-weight: 400; letter-spacing: .08em; }

.site-header__nav { margin-left: auto; display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.site-header__nav::-webkit-scrollbar { display: none; }
.site-header__nav a {
  position: relative; padding: 4px 0;
  font-size: 13px; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.site-header__nav a::after {         /* thin underline that grows on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-header__nav a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-header__brand:hover, .site-header__nav a:hover { color: inherit; }
  .site-header__nav a:hover::after { transform: scaleX(1); }
}

/* phones: no header over the photos; a slim glass bar with a sideways menu slides in after them */
@media (max-width: 720px) {
  .site-header { transform: translateY(-100%); }
  .site-header.is-visible { transform: none; }
  .site-header__inner,
  .site-header.is-solid .site-header__inner { gap: 16px; padding-left: var(--gutter); padding-right: 0; }
  .site-header__brand { font-size: 14px; }
  .site-header__brand span { display: none; }
  .site-header__nav {
    gap: 20px; padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);   /* fade hints that it scrolls */
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .site-header__nav a { font-size: 12.5px; letter-spacing: .03em; }
}

/* ---------- 5. Photo bands (flyer front) ---------- */
.bands { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* text sizes on the photos follow the photo width (cqw), not the window */
.band { position: relative; overflow: hidden; color: #fff; container-type: inline-size; }
.band > img { width: 100%; max-width: none; }

/* the page appears at once, only after the three top photos are downloaded
   (main.js adds .top-ready, at the latest after 4 s) */
.js:not(.top-ready) body { visibility: hidden; }

/* band 1: title + dates top-left, vertical intro on the right */
.band--cup::before {                 /* soft shade so the white text and header stay readable */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 22%),
    linear-gradient(100deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .28) 100%);
}
.band__over {
  position: absolute; inset: 0;
  padding: clamp(16px, 3.6cqw, 52px);
  padding-top: calc(var(--header-h) + clamp(4px, 1.6cqw, 24px));   /* clear of the header */
}
.band__title {
  margin: 0; font-family: var(--mincho); font-weight: 600;
  font-size: clamp(22px, 4.2cqw, 58px); line-height: 1.3; letter-spacing: .02em;
}
.band__meta { margin: clamp(8px, 1.4cqw, 18px) 0 0; font-size: clamp(12px, 1.35cqw, 17px); line-height: 1.7; }
.band__meta b { font-family: var(--latin); font-weight: 400; }
.band__meta .indent { padding-left: 3em; }
.band__lead {
  position: absolute; margin: 0;
  top: calc(var(--header-h) + clamp(4px, 1.4cqw, 20px));
  right: clamp(16px, 3.4cqw, 48px);
  height: calc(100% - var(--header-h) - clamp(4px, 1.4cqw, 20px) - clamp(16px, 3.4cqw, 48px));
  writing-mode: vertical-rl;
  font-size: clamp(12px, 1.35cqw, 18px); line-height: 1.85; letter-spacing: .02em;   /* one more character per column */
  text-shadow: 0 0 8px rgba(0, 0, 0, .45);
}

/* band 2: short Mekas quote — proportions measured from the v2 flyer */
.band__quote {
  position: absolute; left: 1.6%; top: 38.1%; width: 44.9%; height: 39.4%; margin: 0;
  display: flex; align-items: center; padding-left: 2.97cqw;
  background: rgba(35, 31, 32, .22);
}
.band__quote p { margin: 0; white-space: nowrap; font-weight: 500; font-size: 3.49cqw; line-height: 1.2; }

/* band 3: credits */
.band__credits {
  position: absolute; right: clamp(16px, 4cqw, 56px); top: 12%; margin: 0;
  font-size: clamp(10px, 1.1cqw, 14px); line-height: 1.65;
  text-shadow: 0 0 6px rgba(0, 0, 0, .5);
}
.band__credits .indent { padding-left: 3em; }

/* phones: the photos stay clean — their text is repeated below or in the footer */
@media (max-width: 720px) {
  .band__meta, .band__lead, .band__quote, .band__credits { display: none; }
  .band__title { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* kept for screen readers */
}

/* ---------- 6. Title block (flyer back header) ---------- */
.title-block { padding-top: clamp(24px, 4vw, 44px); }
.title-block__big svg { display: block; width: 100%; height: auto; overflow: visible; }
.title-block__jp {
  margin: .2em 0 0; text-align: right;
  font-family: var(--mincho); font-weight: 600; color: var(--gold);
  font-size: clamp(22px, 4.1vw, 44px); letter-spacing: .02em; line-height: 1.3;
}
.title-block__tagline {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 18px;
}
.title-block__tagline p { margin: 0; font-size: clamp(15px, 1.8vw, 19px); }
.title-block__tagline b { font-family: var(--latin); }
.title-block__tour { font-family: var(--latin); font-weight: 700; color: var(--gold); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .01em; }
.title-block__meta { display: none; margin: 20px 0 0; font-size: 14px; line-height: 1.8; }   /* phones only */
.title-block__meta b { font-family: var(--latin); font-weight: 400; }

.lead { margin: 18px 0 0; font-size: clamp(14px, 1.45vw, 16px); text-align: justify; text-align-last: left; }

/* Mekas's full letter */
.letter { margin: 32px 0 8px; padding: 24px 28px 20px; border: 1px solid var(--ink); font-size: 14px; line-height: 1.95; }
.letter p { margin: 0; text-align: justify; text-align-last: left; }
.letter cite { display: block; margin-top: 12px; text-align: right; font-style: normal; color: var(--gold); font-size: 13px; }

@media (max-width: 720px) {
  /* 18 characters, sized to exactly fill the text column */
  .title-block__jp { text-align: left; white-space: nowrap; letter-spacing: 0;
                     font-size: calc((100vw - 2 * var(--gutter)) / 19.3); }
  /* JAPAN TOUR 2026 stays with the title, tagline below it */
  .title-block__tagline { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; }
  .title-block__tour { order: -1; }
  .title-block__meta { display: block; }
  .letter { font-size: 13px; padding: 18px 16px 16px; }
  .letter cite { font-size: 12px; letter-spacing: -.01em; }   /* fits on one line on a standard iPhone */
}

/* ---------- 7. Sections ---------- */
.section { padding-top: 40px; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0 0 30px; padding-top: 20px; border-top: 1px solid var(--ink);
}
.section-head h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em;
  margin: 0; font-weight: 400; font-size: clamp(20px, 2.2vw, 24px);
}
.section-head .en { font-size: .78em; color: var(--gold); }
.section-head .en--blue { color: var(--blue); }
.section-head .en--burgundy { color: var(--burgundy); }
.section-head__note { font-size: 13px; }

/* ---------- 7b. News ---------- */
.news { list-style: none; margin: 0; padding: 0; }
.news__item { display: grid; grid-template-columns: max-content 1fr; column-gap: 28px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.news__item:first-child { padding-top: 0; }
.news__date { font-family: var(--latin); font-variant-numeric: tabular-nums; color: var(--gold); }
@media (max-width: 480px) {
  .news__item { column-gap: 16px; font-size: 14px; }
}

/* ---------- 8. Screenings & talks ---------- */
/* 2 x 2 at every width (the flyer's layout); one column only on the smallest phones */
.screenings { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.screening { display: grid; align-content: start; gap: 10px; padding: 20px 0 24px; border-bottom: 1px solid var(--rule); }

/* number tag beside a small city label and the venue name */
.screening__where { display: flex; align-items: flex-start; gap: 10px; }
.screening__where .tag { flex: none; margin-top: 2px; font-size: 14px; }
.screening__city { font-size: 13px; line-height: 1.5; }
.screening__name { font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; line-height: 1.35; }

/* label + dates on one line */
.screening__period { display: flex; align-items: baseline; gap: 12px; color: var(--burgundy); }
.screening__period small { min-width: 4.5em; font-size: 12px; }
.screening__dates { font-family: var(--latin); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.01em; line-height: 1.2; }
.screening__dates i { font-style: normal; font-family: var(--jp); font-weight: 400; font-size: .5em; }

/* black talk label: "監督来場・トーク" + date; splits into 2 clean lines only when it must */
.screening__talk {
  justify-self: start; display: inline-flex; flex-wrap: wrap; column-gap: .6em;
  padding: 3px 10px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.6;
}
.screening__talk b { font-family: var(--latin); }
.screenings-note { margin: 18px 0 0; font-size: 12px; }

@media (max-width: 720px) {
  .screenings { gap: 0 20px; }
  .screening__period { flex-direction: column; gap: 0; }   /* label above the dates */
  .screening__period small { min-width: 0; }
  .screening__dates { font-size: clamp(20px, 4.6vw, 28px); }
}
@media (max-width: 480px) {
  .screenings { gap: 0 16px; }
  .screening { padding: 16px 0 18px; }
  .screening__where { gap: 8px; }
  .screening__city { font-size: 12px; }
  .screening__name { font-size: 16px; }
  .screening__dates { font-size: 20px; }
  .screening__talk { flex-direction: column; font-size: 11px; line-height: 1.5; padding: 4px 8px; }   /* same 2-line form on all 4 */
}
@media (max-width: 359px) {
  .screenings { grid-template-columns: 1fr; }             /* iPhone SE (1st gen) */
}

/* ---------- 9. Introduction + profile ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about p { margin: 0 0 1em; text-align: justify; text-align-last: left; }
.about__intro p { font-size: 15px; line-height: 1.95; }
.profile__who { display: grid; grid-template-columns: 160px 1fr; gap: 20px; margin-bottom: 16px; }
.profile__who img { width: 160px; filter: grayscale(1); }
.profile__name { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.profile__name .en { display: block; color: var(--gold); font-size: 18px; }
.profile p { font-size: 14px; line-height: 1.9; }

@media (max-width: 720px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .profile__who { grid-template-columns: 110px 1fr; gap: 14px; }
  .profile__who img { width: 110px; }
}

/* ---------- 10. Films ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -6px 0 22px; }
.filters button {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
  font: inherit; font-size: 13px; color: var(--ink);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.filters button .tag { font-size: 11px; }
.filters button[aria-pressed="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.filters button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.films { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }   /* 9 films = 3 x 3 */
.film { display: grid; align-content: start; gap: 4px; }
.film[hidden] { display: none; }
.film__still { position: relative; aspect-ratio: 16 / 9.1; margin-bottom: 8px; overflow: hidden; background: var(--still); }
.film__still img { width: 100%; height: 100%; object-fit: cover; }
.film__tags { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.film__tags .tag { font-size: 11px; }
.film h3 { margin: 0; font-weight: 400; font-size: 19px; line-height: 1.4; }
.film__fr { color: var(--blue); font-family: var(--latin); font-weight: 700; font-size: 14px; line-height: 1.3; }
.film__spec { font-size: 12.5px; }
.film__spec span { font-family: var(--latin); }
.film p { margin: 6px 0 0; font-size: 14px; line-height: 1.9; text-align: justify; text-align-last: left; }
.film__note { font-size: 12px; }

@media (max-width: 900px) { .films { gap: 40px 22px; } }
@media (max-width: 720px) {
  .films { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .film h3 { font-size: 17px; }
  .film p { font-size: 13.5px; line-height: 1.85; }
}
@media (max-width: 480px) {
  /* phones: one film per row — 2 columns left only ~12 characters per line */
  .films { grid-template-columns: 1fr; gap: 36px; }
  .film h3 { font-size: 17px; }
  .film p { font-size: 13.5px; }
}

/* ---------- 11. Guests + contact ---------- */
/* wide: 3 columns · ≤1000: one row per guest (date | name | role) · ≤480: stacked */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.person { padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.person__when { color: var(--gold); font-size: 13px; }
.person__name { font-size: 17px; font-weight: 700; }
.person__role { font-size: 13px; }

@media (max-width: 999px) {
  .people { grid-template-columns: 1fr; }
  .person {
    display: grid; grid-template-columns: 8.5em minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: baseline; column-gap: 24px; padding: 16px 0;
  }
}
@media (max-width: 480px) {
  /* phones: date on the left, name with the role under it on the right */
  .person__when { white-space: nowrap; }
  /* one shared date column for all guests (subgrid) so the names line up */
  .people { grid-template-columns: max-content 1fr; column-gap: 14px; }
  .person { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "when name" "when role"; column-gap: 14px; row-gap: 0; padding: 14px 0; }
  .person__when { grid-area: when; }
  .person__name { grid-area: name; font-size: 16px; }
  .person__role { grid-area: role; }
}

.contact { margin-top: 28px; font-size: 14px; font-style: normal; }
.contact__label { color: var(--gold); }
.contact__org { font-size: 16px; font-weight: 700; }


/* ---------- 12. Venues & schedule ---------- */
/* wide: 4 columns · ≤1000: one row per venue · ≤720: stacked · ≤480: one column */
.venues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.venue { display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "head" "info" "addr"; }

.venue__head {
  grid-area: head; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  min-height: calc(13px * 1.75 + 19px * 1.35 * 2);     /* room for a 2-line name so columns line up */
}
.venue__head .tag { flex: none; margin-top: 2px; font-size: 14px; }
.venue__city { font-size: 13px; }
.venue__name { margin: 0; font-size: 19px; line-height: 1.35; }

.venue__info { grid-area: info; margin: 0 0 24px; font-size: 14px; line-height: 1.7; }
.venue__info > div + div { margin-top: 12px; }
.venue__info dt { color: var(--burgundy); font-size: 12px; }
.venue__info dd { margin: 0; }
.venue__date { font-size: 15px; }
.venue__date .en { font-weight: 700; }

/* prices: amounts in their own column right after the longest label, digits lined up */
.prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 1.2em; }
.prices li { display: contents; }
.prices b { justify-self: end; font-family: var(--latin); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }

.venue__addr {
  grid-area: addr; min-height: calc(13px * 1.7 * 3);
  font-style: normal; font-size: 13px; line-height: 1.7; color: var(--muted);
}
.venue__addr a { white-space: nowrap; }

@media (max-width: 999px) {
  .venues { grid-template-columns: 1fr; gap: 0; }
  .venue {
    grid-template-columns: minmax(180px, 34%) 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "head info" "addr info";
    column-gap: 36px; padding: 26px 0; border-top: 1px solid var(--rule);
  }
  .venue:first-child { padding-top: 4px; border-top: 0; }
  .venue__head { min-height: 0; margin-bottom: 10px; }
  .venue__addr { min-height: 0; }
  .venue__info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; align-content: start; margin: 0; }
  .venue__info > div + div { margin-top: 0; }
}
@media (max-width: 720px) {
  .venue { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "info" "addr"; }
  .venue__info { margin-bottom: 18px; }
}
@media (max-width: 480px) {
  .venue__info { gap: 14px 18px; }                          /* keep 2 x 2, just tighter */
}
@media (max-width: 359px) {
  .venue__info { grid-template-columns: 1fr; gap: 12px; }   /* iPhone SE (1st gen): one column */
}

/* ---------- 13. Footer ---------- */
.site-footer { margin-top: 56px; padding-top: 24px; padding-bottom: 72px; border-top: 1px solid var(--ink); font-size: 13px; line-height: 1.9; }
.site-footer__label { margin-right: .6em; color: var(--gold); }
.site-footer__mark {
  margin-top: 28px; text-align: center;
  font-family: var(--latin); font-weight: 700; font-size: clamp(16px, 2vw, 20px); letter-spacing: .02em;
}
.site-footer__mark span { color: var(--gold); }

/* vertical intro: never end a column inside a name */
.band__lead .keep { white-space: nowrap; }
/* vertical intro: every column runs top to bottom; only the last one stays short */
.band__lead { text-align: justify; text-align-last: start; text-justify: inter-character; }

/* avoid a lonely word (e.g. 「る。」) on the last line of a paragraph */
.film p, .about p, .lead, .letter p, .venue__info dd { text-wrap: pretty; }

/* footer credits: label | text, wrapped lines stay aligned after the label */
.site-footer__credit { display: grid; grid-template-columns: max-content 1fr; }

/* 主催 /// 共催 share one line when they fit; when the row wraps, 共催 starts its own line
   and its "///" slides out of view (clipped on the left edge) */
.site-footer__row { display: flex; flex-wrap: wrap; overflow: hidden; }
.site-footer__row > .site-footer__credit {
  position: relative;
  margin-left: -3em; padding-left: 3em; margin-right: 3em;
}
.site-footer__row > .site-footer__credit::before {
  content: "///"; position: absolute; left: .9em; font-family: var(--latin);
}