/* ===========================================================
   39Planet page (sukimix.com/39pla)
   The page keeps the SUKIMIX header/footer and paints its own
   world in between: burgundy ground, white line art, mint ribbon.
   Colors are sampled from the flyer artwork (ground = #670001).
   =========================================================== */

.p39-page {
  --p-bg:     #670001;
  --p-ink:    #ffffff;
  --p-ink-2:  rgba(255, 255, 255, .84);
  --p-mint:   #7fffd4;
  --p-yellow: #fff58b;
  --p-line:   rgba(255, 255, 255, .92);
  --p-col:    720px;
  --p-serif:  "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP",
              "Noto Serif CJK JP", "BIZ UDPMincho", serif;
  background: var(--p-bg);
}

[hidden] { display: none !important; }

/* Site chrome stays white so the SUKIMIX logo (multiply blend) reads correctly. */
.p39-page .site-header { background: #fff; }
.p39-page .site-footer { background: #fff; }
.p39-page .nav a[aria-current="page"] { color: var(--p-bg); }

.p39 {
  color: var(--p-ink);
  font-family: var(--p-serif);
  line-height: 1.95;
  font-size: 16px;
}
.p39 a { color: var(--p-mint); text-underline-offset: 4px; }
.p39 a:hover { color: var(--p-yellow); }

.p39-col { width: 100%; max-width: var(--p-col); margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.p39 .p39-hero { padding: clamp(40px, 7vw, 72px) 0 clamp(32px, 6vw, 56px); text-align: center; }
.p39-eyebrow {
  margin: 0; font-size: clamp(13px, 2.2vw, 16px); letter-spacing: .32em;
  color: var(--p-mint); font-weight: 700;
}
.p39-art { width: min(880px, 100%); height: auto; margin: 8px auto 0; }
.p39-logo { margin: -4% auto 0; line-height: 0; position: relative; }
.p39-logo img { width: min(460px, 78%); height: auto; margin: 0 auto; }
.p39-lead {
  margin: 20px auto 0; max-width: 26em; padding: 0 24px;
  font-size: clamp(17px, 2.8vw, 22px); line-height: 1.9; letter-spacing: .04em;
}

/* ---------- Sections ---------- */
/* scroll-margin keeps a jumped-to heading clear of the sticky site header (64px). */
.p39 .p39-sec { padding: clamp(40px, 7vw, 72px) 0; scroll-margin-top: 64px; }
.p39-h {
  margin: 0 0 24px; font-size: clamp(22px, 3.6vw, 30px); font-weight: 700;
  letter-spacing: .08em; line-height: 1.5;
  display: flex; align-items: center; gap: 12px;
}
.p39-h::before { content: "✦"; color: var(--p-mint); font-size: .8em; }
.p39-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--p-line); opacity: .5; }
/* text-wrap: pretty avoids a lone "い。" on the last line where the browser supports it. */
.p39-text, .p39-lead, .p39-empty { text-wrap: pretty; line-break: strict; }
.p39-text { margin: 0 0 1.2em; color: var(--p-ink-2); }
.p39-text:last-child { margin-bottom: 0; }

/* ---------- Framed card (the double white rule from the timetable artwork) ---------- */
.p39-frame {
  border: 2px solid var(--p-line);
  outline: 1px solid var(--p-line); outline-offset: 5px;
  padding: 28px 24px; margin: 8px 8px 32px;
}
.p39-frame:last-child { margin-bottom: 8px; }

.p39-date {
  margin: 0 0 16px; font-size: clamp(26px, 5.2vw, 38px); font-weight: 700;
  line-height: 1.4; letter-spacing: .04em; color: var(--p-yellow);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
}
.p39-day { white-space: nowrap; }
.p39-date small { font-size: .55em; }
.p39-time { font-size: .62em; color: var(--p-ink); letter-spacing: .06em; }

.p39-info { margin: 0 0 8px; display: grid; gap: 8px; }
.p39-info > div { display: grid; grid-template-columns: 4em 1fr; gap: 16px; align-items: baseline; }
.p39-info dt { color: var(--p-mint); font-size: 14px; letter-spacing: .12em; }
.p39-info dd { margin: 0; }

.p39-sub {
  margin: 24px 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .18em;
  color: var(--p-mint);
}
.p39-tt { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p39-tt li {
  display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; align-items: baseline;
  padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 255, 255, .28);
}
.p39-tt li:last-child { border-bottom: 0; padding-bottom: 0; }
.p39-tt-time { font-variant-numeric: tabular-nums; color: var(--p-ink-2); }
.p39-tt-name { font-size: 18px; overflow-wrap: anywhere; }

.p39-note { margin: 16px 0 0; font-size: 14px; color: var(--p-ink-2); }
.p39-more { margin: 20px 0 0; font-size: 15px; }
.p39-empty { margin: 0; color: var(--p-ink-2); }

/* ---------- Buttons ---------- */
.p39-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.p39 .p39-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 28px; border-radius: 999px;
  border: 2px solid var(--p-ink); color: var(--p-ink);
  text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.p39 .p39-btn:hover { background: var(--p-ink); color: var(--p-bg); }
.p39 .p39-btn.is-solid { background: var(--p-ink); color: var(--p-bg); }
.p39 .p39-btn.is-solid:hover { background: var(--p-mint); border-color: var(--p-mint); color: var(--p-bg); }

.p39-tag { color: var(--p-yellow); font-weight: 700; letter-spacing: .06em; }

@media (max-width: 520px) {
  .p39-frame { padding: 24px 16px; }
  .p39-tt li { grid-template-columns: 1fr; gap: 0; }
  .p39-info > div { grid-template-columns: 3.5em 1fr; gap: 12px; }
}