/* Home page styles. */
/* ---------- HOME PAGE ---------- */
.poster {
  width: 100%;
  max-width: 1100px;
  background: transparent;
}

/* ---------- HERO ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
  padding: 20px 20px 0;
}

.hero-media {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}

.hero-photo-link {
  display: block;
  position: absolute;
  inset: 0;
}

.hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.headline.hero-overlay-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink-headline);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink-headline);
  font-size: clamp(18px, 8.5cqw, 60px);
  line-height: 0.9;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero-announce {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 12px 4px;
}

.hero-announce .kanji {
  font-size: clamp(40px, 6vw, 80px);
}

.announce-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.meta-right {
  font-family: var(--font-body);
  font-size: clamp(13px, 2.4vw, 18px);
  font-weight: 900;
  white-space: nowrap;
}

.meta-out {
  font-weight: 500;
}

.meta-date {
  font-size: 1.15em;
}

.alias-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--ink);
}
.alias-link:hover { opacity: 0.6; }

.toggle {
  position: relative;
  width: 74px;
  height: 30px;
  min-width: 74px;
  background: var(--ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  transition: left 0.25s ease;
}

.toggle[aria-pressed="true"] .toggle-knob {
  left: calc(100% - 26px);
}

.toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- HEADLINE ---------- */
.headline {
  margin: 0;
  padding: 20px 20px 8px;
  font-family: var(--font-display);
  font-size: clamp(52px, 13vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-headline);
}

.kanji {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(48px, 10vw, 96px);
  line-height: 1;
  display: flex;
  align-items: center;
  color: var(--ink-headline);
  text-decoration: none;
}

.kanji:hover {
  opacity: 0.7;
}

/* ---------- FILM STRIP ---------- */
.filmstrip {
  padding: 28px 20px;
}

.filmstrip-track {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.filmstrip-frame {
  position: relative;
  flex: 1 1 0;
  min-width: 110px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.filmstrip-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/vintage-paper-texture-light.png");
  background-size: 720px 720px;
  mix-blend-mode: multiply;
  opacity: 0.7;
  pointer-events: none;
}

.strip-photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: var(--photo-filter);
}

/* ---------- SCRAPBOOK STRIP (variant) ---------- */
.scrapbook {
  padding: 20px 12px 32px;
}

.scrapbook-track {
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 22px 10px;
}
.torn-edge {
  display: block;
  width: 100%;
  height: auto;

  /* Inline SVG mask that uses noise to give the image a torn-paper edge. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='t' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='4' seed='42' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='45'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='10' y='10' width='980' height='980' fill='white' filter='url(%23t)'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='t' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='4' seed='42' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='45'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='10' y='10' width='980' height='980' fill='white' filter='url(%23t)'/%3E%3C/svg%3E");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.scrap {
  --pad-t: 6px;
  --pad-r: 9px;
  --pad-b: 6px;
  --pad-l: 8px;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  margin: 0 0 0 -18px;
  background-color: #fbf8f2;
  background-image: url("../assets/vintage-paper-texture-light.png");
  background-size: 720px 720px;
  filter: drop-shadow(1px 2px 2px rgba(40, 32, 22, 0.22));
}

.scrap:first-child {
  margin-left: 0;
}

.scrap img {
  display: block;
  position: absolute;
  top: var(--pad-t);
  left: var(--pad-l);
  width: calc(100% - var(--pad-l) - var(--pad-r));
  height: calc(100% - var(--pad-t) - var(--pad-b));
  object-fit: cover;
  object-position: center;
  filter: var(--photo-filter);
}

.scrap::after {
  content: "";
  position: absolute;
  top: var(--pad-t);
  left: var(--pad-l);
  width: calc(100% - var(--pad-l) - var(--pad-r));
  height: calc(100% - var(--pad-t) - var(--pad-b));
  background-image: url("../assets/vintage-paper-texture-light.png");
  background-size: 720px 720px;
  mix-blend-mode: multiply;
  opacity: 0.72;
  pointer-events: none;
}

.scrap:nth-child(1) {
  --pad-t: 5px;
  --pad-r: 10px;
  --pad-b: 6px;
  --pad-l: 6px;
  z-index: 2;
  transform: rotate(-1.7deg) translateY(10px);
  clip-path: polygon(
    1% 1.4%, 7% 0.2%, 14% 1.8%, 22% 0%, 31% 1.6%, 39% 0.4%, 48% 1.2%, 57% 0%, 66% 1.5%, 75% 0.3%, 84% 1.4%, 93% 0.2%, 100% 1.8%,
    98.2% 8%, 100% 16%, 97.4% 24%, 99.6% 32%, 97.8% 41%, 100% 49%, 97.2% 58%, 99.4% 66%, 97.6% 74%, 100% 82%, 98.4% 90%, 99.2% 96%,
    97% 100%, 88% 98.4%, 79% 100%, 70% 98.6%, 61% 99.8%, 52% 98.2%, 43% 100%, 34% 98.5%, 25% 99.6%, 16% 98.2%, 8% 100%, 0% 98.4%,
    1.8% 91%, 0% 83%, 2.4% 74%, 0.2% 66%, 2.2% 57%, 0% 48%, 1.6% 39%, 0.4% 30%, 2.6% 22%, 0% 14%, 1.4% 7%
  );
}

.scrap:nth-child(2) {
  --pad-t: 6px;
  --pad-r: 8px;
  --pad-b: 5px;
  --pad-l: 10px;
  z-index: 4;
  flex-grow: 1.06;
  transform: rotate(1.9deg) translateY(-8px);
  margin-left: -22px;
  clip-path: polygon(
    0% 2%, 8% 0.6%, 17% 1.8%, 26% 0%, 35% 1.2%, 44% 0.5%, 53% 1.6%, 62% 0.2%, 71% 1.4%, 80% 0%, 89% 1.8%, 97% 0.4%, 100% 2.2%,
    98.6% 9%, 100% 18%, 97.2% 26%, 99.8% 35%, 97.4% 43%, 100% 52%, 97% 61%, 99.2% 69%, 97.6% 78%, 100% 86%, 98% 93%, 99.6% 98%,
    96% 100%, 87% 98.2%, 78% 99.8%, 69% 98.4%, 59% 100%, 50% 98.6%, 41% 99.4%, 32% 98%, 23% 100%, 14% 98.3%, 6% 99.6%, 0% 97.8%,
    2.2% 90%, 0% 81%, 1.8% 73%, 0.4% 64%, 2.6% 55%, 0% 46%, 2% 37%, 0.2% 28%, 2.4% 19%, 0% 11%, 1.6% 4%
  );
}

.scrap:nth-child(3) {
  --pad-t: 5px;
  --pad-r: 9px;
  --pad-b: 7px;
  --pad-l: 8px;
  z-index: 1;
  transform: rotate(-0.8deg) translateY(5px) scale(1.03);
  margin-left: -20px;
  clip-path: polygon(
    0.6% 0.8%, 9% 1.6%, 18% 0%, 27% 1.4%, 36% 0.3%, 45% 1.8%, 54% 0.2%, 63% 1.2%, 72% 0%, 81% 1.6%, 90% 0.4%, 100% 1.2%,
    98% 7%, 100% 15%, 97.6% 23%, 99.4% 32%, 97.2% 40%, 100% 49%, 97.8% 57%, 99.6% 66%, 97% 74%, 100% 82%, 98.2% 90%, 99% 97%,
    98.4% 100%, 89% 98.6%, 80% 100%, 71% 98.2%, 62% 99.6%, 53% 98.4%, 44% 100%, 35% 98.6%, 26% 99.2%, 17% 98%, 8% 100%, 0% 98.8%,
    1.4% 92%, 0% 84%, 2.2% 75%, 0.6% 67%, 2% 58%, 0% 50%, 1.8% 41%, 0.2% 33%, 2.4% 24%, 0% 16%, 1.6% 8%
  );
}

.scrap:nth-child(4) {
  --pad-t: 6px;
  --pad-r: 10px;
  --pad-b: 5px;
  --pad-l: 9px;
  z-index: 5;
  flex-grow: 0.94;
  transform: rotate(2.3deg) translateY(-4px);
  margin-left: -16px;
  clip-path: polygon(
    0% 1.6%, 6% 0%, 15% 1.4%, 24% 0.4%, 33% 1.8%, 42% 0%, 51% 1.2%, 60% 0.6%, 69% 1.6%, 78% 0.2%, 87% 1.4%, 96% 0%, 100% 1.8%,
    98.4% 8%, 100% 17%, 97% 25%, 99.6% 34%, 97.4% 42%, 100% 51%, 97.8% 59%, 99.2% 68%, 97.2% 76%, 100% 85%, 98.6% 92%, 99.4% 98%,
    97.2% 100%, 88% 98.4%, 79% 99.8%, 70% 98%, 61% 100%, 52% 98.5%, 43% 99.4%, 34% 98.2%, 25% 100%, 16% 98.6%, 7% 99.2%, 0% 98%,
    2% 91%, 0% 82%, 2.4% 74%, 0.2% 65%, 1.8% 56%, 0% 47%, 2.2% 38%, 0.4% 29%, 2.6% 21%, 0% 13%, 1.4% 5%
  );
}

.scrap:nth-child(5) {
  --pad-t: 5px;
  --pad-r: 7px;
  --pad-b: 6px;
  --pad-l: 10px;
  z-index: 3;
  transform: rotate(-1.4deg) translateY(8px);
  margin-left: -24px;
  clip-path: polygon(
    0.4% 1.2%, 8% 0.4%, 16% 1.6%, 25% 0%, 34% 1.4%, 43% 0.2%, 52% 1.8%, 61% 0.4%, 70% 1.2%, 79% 0%, 88% 1.6%, 96% 0.3%, 100% 1.4%,
    98.8% 9%, 100% 18%, 97.4% 27%, 99.6% 36%, 97.2% 44%, 100% 53%, 97.8% 62%, 99.4% 70%, 97% 79%, 100% 87%, 98.2% 94%, 99.2% 99%,
    96.5% 100%, 87% 98.4%, 78% 100%, 69% 98.2%, 60% 99.6%, 51% 98.6%, 42% 100%, 33% 98.3%, 24% 99.8%, 15% 98.4%, 7% 100%, 0% 98.6%,
    1.6% 90%, 0% 81%, 2.2% 72%, 0.4% 64%, 2% 55%, 0% 46%, 1.8% 37%, 0.2% 28%, 2.4% 20%, 0% 12%, 1.4% 5%
  );
}

.page-title {
  margin: 0;
  padding: 4px 20px 16px;
  line-height: 0;
}

.top-bar--brand .page-title {
  padding: 0;
}

/* ---------- SHOWS HEADING + SCRAPBOOK ---------- */
.shows-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
}

.shows-heading .section-title {
  margin: 0;
  flex: 0 1 auto;
}

.shows-heading .scrapbook {
  flex: 1 1 360px;
  max-width: 520px;
  padding: 0;
  min-width: 0;
}

.shows-heading .scrapbook-track {
  --track-pad: 6px;
  padding: 14px var(--track-pad);
}

.shows-heading .scrap {
  flex: 0 0 auto;
  height: 88px;
  width: auto;
  margin-left: 0;
  aspect-ratio: 3 / 4;
}

.shows-heading .scrap.is-landscape {
  aspect-ratio: 3 / 2;
}

.shows-heading .scrap.is-portrait {
  height: 108px;
}

.shows-heading .scrap.is-wide {
  aspect-ratio: 16 / 9;
}

.shows-heading .scrap:nth-child(n + 2) {
  margin-left: -18px;
}

/* The frames above are sized from a height, so the row's width is a fixed
   multiple of it: the five widths sum to ~6.6x and the scaled overlaps give
   back ~0.8x, leaving ~5.83x. Solving that against the strip's own width
   (less the track padding) keeps the row inside the container at any screen
   size. Guarded because without container-query units var(--scrap-h) would
   resolve to `auto` and collapse the frames. */
@supports (width: 1cqi) {
  .shows-heading .scrapbook {
    container-type: inline-size;
  }

  .shows-heading .scrapbook-track {
    --scrap-h: min(88px, calc((100cqi - 2 * var(--track-pad) - 2px) / 5.83));
  }

  .shows-heading .scrap {
    height: var(--scrap-h);
  }

  .shows-heading .scrap.is-portrait {
    height: calc(var(--scrap-h) * 1.23);
  }

  .shows-heading .scrap:nth-child(n + 2) {
    margin-left: calc(var(--scrap-h) * -0.2);
  }
}

/* Torn edges are percentage-based, so the jitter is scaled up to stay
   visible at this smaller size. */
.shows-heading .scrap:nth-child(1) {
  transform: rotate(-1.7deg) translateY(4px);
  clip-path: polygon(
    1.5% 3%, 9% 0.5%, 17% 3.6%, 26% 0.8%, 35% 3.2%, 44% 1%, 53% 3.4%, 62% 0.6%, 71% 3%, 80% 1.2%, 89% 3.4%, 100% 1%,
    96.6% 9%, 99.4% 19%, 96.2% 28%, 99.6% 38%, 96.4% 47%, 99.2% 57%, 96% 66%, 99.4% 76%, 96.6% 85%, 99% 94%,
    97% 99%, 88% 96.4%, 78% 99.4%, 68% 96.6%, 58% 99.2%, 48% 96.2%, 38% 99.4%, 28% 96.6%, 18% 99%, 8% 96.4%, 1% 99.2%,
    3.4% 91%, 0.6% 82%, 3.8% 72%, 0.8% 63%, 3.4% 53%, 0.4% 44%, 3.6% 34%, 1% 25%, 4% 15%, 0.8% 8%
  );
}
.shows-heading .scrap:nth-child(2) {
  transform: rotate(1.9deg) translateY(-3px);
  clip-path: polygon(
    0.8% 1.2%, 10% 3.4%, 19% 0.6%, 28% 3.2%, 37% 1%, 46% 3.6%, 55% 0.8%, 64% 3.2%, 73% 1.4%, 82% 3.4%, 91% 0.6%, 99% 2.8%,
    96.4% 11%, 99.6% 20%, 96% 30%, 99.2% 39%, 96.6% 49%, 99.4% 58%, 96.2% 68%, 99% 77%, 96.8% 87%, 99.4% 96%,
    96% 98.8%, 86% 96.2%, 76% 99.4%, 66% 96.8%, 56% 99%, 46% 96.4%, 36% 99.2%, 26% 96.6%, 16% 99.4%, 6% 96.8%, 0.6% 98.6%,
    3% 89%, 0.4% 79%, 3.6% 70%, 1.2% 60%, 3.8% 51%, 0.6% 41%, 3.2% 32%, 0.8% 22%, 3.4% 13%, 1% 5%
  );
}
.shows-heading .scrap:nth-child(3) {
  transform: rotate(-0.8deg) translateY(2px) scale(1.03);
  clip-path: polygon(
    2% 2.6%, 11% 0.6%, 20% 3.4%, 29% 1%, 38% 3.6%, 47% 0.8%, 56% 3%, 65% 1.4%, 74% 3.6%, 83% 0.6%, 92% 3.2%, 99.4% 1.4%,
    96.8% 10%, 99.2% 19%, 96.2% 29%, 99.6% 38%, 96.4% 48%, 99% 57%, 96.6% 67%, 99.4% 76%, 96% 86%, 99.2% 95%,
    97.4% 99.4%, 87% 96.6%, 77% 99.2%, 67% 96.2%, 57% 99.4%, 47% 96.8%, 37% 99%, 27% 96.4%, 17% 99.2%, 7% 96.6%, 0.8% 99%,
    3.6% 90%, 0.6% 81%, 3.2% 71%, 1.4% 62%, 3.8% 52%, 0.8% 43%, 3.4% 33%, 0.6% 24%, 3.6% 14%, 1.2% 6%
  );
}
.shows-heading .scrap:nth-child(4) {
  transform: rotate(2.3deg) translateY(-2px);
  clip-path: polygon(
    1% 3.4%, 10% 0.8%, 19% 3.2%, 28% 1.2%, 37% 3.6%, 46% 0.6%, 55% 3.4%, 64% 1%, 73% 3.2%, 82% 0.8%, 91% 3.6%, 99% 1.2%,
    96.2% 10%, 99.4% 20%, 96.8% 29%, 99% 39%, 96.4% 48%, 99.6% 58%, 96% 67%, 99.2% 77%, 96.6% 86%, 99.4% 95%,
    96.8% 99%, 87% 96.8%, 77% 99.4%, 67% 96.4%, 57% 99.2%, 47% 96.6%, 37% 99.4%, 27% 96.2%, 17% 99%, 7% 96.8%, 1.2% 99.4%,
    3.2% 90%, 0.8% 80%, 3.6% 71%, 0.6% 61%, 3.4% 52%, 1% 42%, 3.8% 33%, 0.6% 23%, 3.2% 14%, 0.8% 6%
  );
}
.shows-heading .scrap:nth-child(5) {
  transform: rotate(-1.4deg) translateY(3px);
  clip-path: polygon(
    0.6% 2.8%, 9% 0.6%, 18% 3.4%, 27% 1%, 36% 3.2%, 45% 0.8%, 54% 3.6%, 63% 1.2%, 72% 3%, 81% 0.6%, 90% 3.4%, 99.2% 1%,
    96.4% 9%, 99.6% 19%, 96% 28%, 99.2% 38%, 96.8% 47%, 99.4% 57%, 96.2% 66%, 99% 76%, 96.6% 85%, 99.4% 94%,
    96.4% 99.2%, 86% 96.6%, 76% 99%, 66% 96.2%, 56% 99.4%, 46% 96.8%, 36% 99.2%, 26% 96.4%, 16% 99%, 6% 96.6%, 0.8% 98.8%,
    3.4% 90%, 0.6% 80%, 3.8% 71%, 1% 61%, 3.2% 52%, 0.4% 42%, 3.6% 33%, 0.8% 23%, 3.4% 14%, 1.2% 5%
  );
}

.thread {
  padding: 32px 20px 28px;
}

.thread-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr minmax(90px, auto);
  gap: 10px 16px;
  align-items: start;
  padding: 10px 0;
  font-family: var(--font-mono);
}

.thread-meta {
  display: flex;
  flex-direction: column;
  font-size: clamp(12px, 1.6vw, 14px);
}

.thread-date, .thread-time {
  font-weight: 700;
}

.thread-sender {
  margin-top: 2px;
  font-weight: 400;
  color: var(--ink-soft);
}

.thread-msg {
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  align-self: center;
}

.thread-msg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.thread-msg a:hover { opacity: 0.6; }

.thread-tag {
  font-size: clamp(11px, 1.6vw, 13px);
  text-align: right;
  align-self: center;
  white-space: nowrap;
}

.status-row {
  opacity: 0.7;
}
.status-row .thread-tag {
  font-style: italic;
}

/* ---------- BLURB ---------- */
.blurb {
  margin: 0;
  padding: 22px 20px 28px;
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(13px, 2.1vw, 17px);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.blurb-body {
  text-align: justify;
  display: block;
}

.blurb-lastline {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 780px) {
  /* Stacked, the 28px gap reads as a much bigger gap than it does side by
     side, because hero.png carries ~10% transparent padding below the
     artwork. */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero-announce {
    padding-top: 0;
  }
  .hero-overlay-title {
    font-size: clamp(36px, 11vw, 64px);
  }
  .shows-heading {
    flex-wrap: wrap;
  }
  /* Strip above the title. Giving the title a full-line basis guarantees the
     two actually wrap onto separate lines, so `order` can't leave the strip
     sitting beside it. */
  .shows-heading .section-title {
    flex: 0 0 100%;
  }
  /* Once the strip is on its own line, pull it back out through .thread's
     20px horizontal padding so it runs the full width of the poster. */
  .shows-heading .scrapbook {
    order: -1;
    max-width: none;
    margin-inline: -20px;
  }
  .shows-heading .scrapbook-track {
    --track-pad: 2px;
  }
}

@media (max-width: 560px) {
  /* Two columns: date/time on the left, event name with the location
     stacked beneath it on the right. Both tracks are content-sized and the
     leftover space is pushed between them, so the right column stays flush
     to the right edge and the gap closes up as the screen narrows. The
     column-gap is the floor it closes down to. */
  .thread-row {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 4px 12px;
  }
  .thread-meta {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .thread-msg {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    text-align: center;
  }
  .thread-tag {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: center;
    white-space: normal;
  }
  .filmstrip-frame { min-width: 90px; }
  .blurb-lastline { flex-direction: column; gap: 2px; }
  .scrapbook-track { padding: 16px 4px; }
}