:root {
  --paper: #f4ead5;
  --paper-deep: #ead8b7;
  --ink: #2f2418;
  --line: #9f865a;
  --gold: #9e7b3e;
  --shadow: rgba(79, 56, 26, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(158, 123, 62, 0.16), transparent 30%),
    linear-gradient(180deg, #e6d8bc 0%, #d8c3a0 100%);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.flyer-page {
  padding: 14px;
}

.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 251, 241, 0.4), rgba(244, 234, 213, 0.72)),
    repeating-linear-gradient(
      0deg,
      rgba(126, 97, 52, 0.018) 0,
      rgba(126, 97, 52, 0.018) 2px,
      transparent 2px,
      transparent 8px
    ),
    var(--paper);
  border: 2px solid rgba(110, 82, 41, 0.62);
  box-shadow: 0 24px 60px var(--shadow);
  padding: 4mm 4mm 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8mm;
  padding: 0.8mm 1.5mm 1.6mm;
}

.hero-line,
.footer-url {
  font-family: "Cormorant Garamond", serif;
}

.hero-line {
  display: flex;
  align-items: center;
  gap: 4mm;
  flex-wrap: nowrap;
}

.hero-line-top {
  justify-content: center;
}

.hero-line-bottom {
  justify-content: center;
  padding-left: 0;
}

.hero-line h1,
.hero-line h2,
.footer-url {
  font-family: "Cormorant Garamond", serif;
}

.hero-line h1 {
  margin: 0;
  font-size: 8.2mm;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-editable-field] {
  cursor: pointer;
  transition: outline-color 120ms ease, background-color 120ms ease;
}

[data-editable-field]:hover {
  outline: 1px dashed rgba(143, 99, 48, 0.8);
  outline-offset: 2px;
  background: rgba(255, 248, 234, 0.55);
}

.day-cell[data-day],
.info-box[data-venue-id] {
  cursor: pointer;
  transition: outline-color 120ms ease, background-color 120ms ease;
}

.day-cell[data-day]:hover,
.info-box[data-venue-id]:hover {
  outline: 1px dashed rgba(143, 99, 48, 0.9);
  outline-offset: -2px;
  background: rgba(255, 248, 234, 0.45);
}

.hero-line h2 {
  margin: 0;
  font-size: 7.6mm;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.month-number {
  display: inline-block;
  font-size: 1.34em;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  transform: translateY(0.2mm);
}

.calendar-wrap {
  border: 2px solid rgba(110, 82, 41, 0.62);
  flex: 0 0 auto;
}

.weekday-row,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekday-row div {
  min-height: 4.4mm;
  padding: 0.5mm 0.6mm;
  border-right: 1px solid rgba(110, 82, 41, 0.62);
  border-bottom: 2px solid rgba(110, 82, 41, 0.62);
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 4.8mm;
  font-weight: 700;
  line-height: 1;
}

.weekday-row div:last-child {
  border-right: none;
}

.sun {
  color: #ab4331;
}

.sat {
  color: #426ba9;
}

.day-cell {
  min-height: 0;
  height: 38.7mm;
  padding: 2mm 2mm 1.8mm;
  border-right: 1px solid rgba(110, 82, 41, 0.62);
  border-bottom: 1px solid rgba(110, 82, 41, 0.62);
  display: flex;
  flex-direction: column;
  gap: 0.45mm;
  overflow: hidden;
  position: relative;
}

.day-cell:nth-child(7n) {
  border-right: none;
}

.day-cell.blank {
  background: rgba(255, 248, 234, 0.44);
}

.date-line {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2mm;
  height: 5.2mm;
  padding: 0 1mm;
  border-radius: 999px;
  background: rgba(158, 123, 62, 0.18);
  font-size: 2.95mm;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.venue-inline {
  font-size: 2.9mm;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.day-cell.rich > .venue-inline {
  position: absolute;
  top: 3.1mm;
  left: 58%;
  transform: translateX(-50%);
  width: calc(100% - 14mm);
  margin-top: 0;
  z-index: 1;
}

.day-cell.rich > .performers,
.day-cell.rich > .genre,
.day-cell.rich > .media-slot {
  position: relative;
  top: 0.8mm;
}

.performers {
  font-size: 2.65mm;
  line-height: 1.08;
  text-align: center;
}

.performers.compact {
  font-size: 2.45mm;
}

.genre {
  margin-top: 0.15mm;
  font-size: 2.25mm;
  text-align: center;
  line-height: 1.05;
}

.media-slot {
  margin-top: 0.1mm;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 1px dashed rgba(110, 82, 41, 0.45);
  background: rgba(255, 249, 239, 0.28);
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split {
  gap: 1.2mm;
}

.split-entry {
  flex: 1;
  padding-top: 0.4mm;
  overflow: hidden;
}

.split-entry:first-of-type {
  padding-top: 0;
}

.abbr-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2mm;
  align-items: start;
  margin-top: 1.2mm;
  border: 1px solid rgba(110, 82, 41, 0.62);
  padding: 1.1mm 2mm;
  font-size: 2.45mm;
  line-height: 1.22;
  flex: 0 0 auto;
}

.abbr-strip strong {
  font-size: 2.7mm;
}

.info-band {
  padding: 1.6mm 0 1.6mm;
  flex: 0 0 auto;
}

.info-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6mm;
}

.info-box {
  min-height: 27mm;
  border: 1px solid rgba(110, 82, 41, 0.62);
  padding: 1.3mm 2mm;
  overflow: hidden;
}

.info-box h4 {
  margin: 0 0 0.7mm;
  font-size: 3.7mm;
}

.info-box p {
  margin: 0 0 0.55mm;
  line-height: 1.18;
  font-size: 2.2mm;
}

.site-footer {
  margin: 0 -4mm;
  background: linear-gradient(180deg, #2f2418, #211810);
  color: #eed79f;
  padding: 2.4mm 5mm 2.8mm;
  flex: 0 0 auto;
  margin-top: auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
}

.footer-copy {
  flex: 1;
  text-align: center;
}

.footer-url {
  font-size: 6.4mm;
  line-height: 1.05;
}

.footer-note {
  margin-top: 0.6mm;
  font-size: 2.8mm;
}

.footer-qr {
  flex: 0 0 auto;
  width: 16mm;
  height: 16mm;
  padding: 1.2mm;
  background: #f3e2b6;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.footer-qr-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0.4mm;
  width: 100%;
  height: 100%;
}

.qr-grid span {
  display: block;
  background: #f3e2b6;
}

.qr-grid span.fill {
  background: #241a10;
}

@media (max-width: 1024px) {
  .sheet {
    width: 100%;
    min-height: auto;
  }

  .hero-line,
  .info-columns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .day-cell {
    height: auto;
    min-height: 132px;
  }
}

@media (max-width: 720px) {
  .flyer-page {
    padding: 10px;
  }

  .sheet {
    padding: 10px 10px 0;
  }

  .weekday-row div {
    font-size: 0.95rem;
  }

  .day-cell {
    min-height: 144px;
    padding: 6px;
  }

  .date-line,
  .venue-name {
    font-size: 0.8rem;
  }

  .performers,
  .genre {
    font-size: 0.62rem;
  }

  .photo-block {
    height: 48px;
  }

  .footer-url {
    font-size: 1.25rem;
  }

  .footer-note {
    font-size: 0.8rem;
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  body {
    background:
      radial-gradient(circle at top, rgba(158, 123, 62, 0.16), transparent 30%),
      linear-gradient(180deg, #e6d8bc 0%, #d8c3a0 100%);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .flyer-page {
    padding: 0;
  }

  .sheet {
    width: 210mm;
    height: 297mm;
    box-shadow: none;
    margin: 0;
    background:
      linear-gradient(180deg, rgba(255, 251, 241, 0.4), rgba(244, 234, 213, 0.72)),
      repeating-linear-gradient(
        0deg,
        rgba(126, 97, 52, 0.018) 0,
        rgba(126, 97, 52, 0.018) 2px,
        transparent 2px,
        transparent 8px
      ),
      var(--paper);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .hero-line {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .calendar-wrap {
    break-inside: avoid;
  }

  .abbr-strip {
    break-inside: avoid;
  }

  .info-band {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .info-columns {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.6mm !important;
  }

  .info-box {
    min-height: 27mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .site-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .date-line,
  .site-footer,
  .footer-qr,
  .qr-grid span.fill,
  .weekday-row .sun,
  .weekday-row .sat {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}