/* ============================================================
   past.css — past-events.html（これまでの記録）だけの見た目
   土台（色・書体・ナビ・見出し・ボタン・薔薇窓・拡大表示・足もと）は css/gothic.css。
   一覧は js/events.js が描く（.year-section / .event-card / .ev-row / .event-date / .event-title /
   .event-venue / .ev-more / .event-details）。

   ■ 形（2026-10-15 ユーザー「コンパクトかつシンプルにして」）: 年ごとに小さな「尖頭アーチの窓」に年を掲げ、
     その下に1件1行（日付・題・会場）を新しい順に並べる。概要・フライヤー・詳細は「詳細」を押すと開く。
     日付の前の小さな菱形の色は分類（ライブ・配信・出演・出店・催し）の色ガラス。
   ■ 動き: 薔薇窓の回転（gothic.css）と、触れたときの色の変化をなめらかにする transition だけ。
     どちらも @media (prefers-reduced-motion: no-preference) の中。出現の動きは無い（読み込んだ瞬間から全部読める）
   ============================================================ */

/* ---------- ナビの「Home」（戻る印つき） ---------- */
.nav-home { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; }
.nav-home .i { width: 0.95em; height: 0.95em; }

/* ---------- ページの頭: 夜の聖堂の窓の下に、題を掲げる ---------- */
.pe-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 84px 16px 30px;   /* 2026-10-15 小さく（ユーザー「コンパクトかつシンプルに」） */
    text-align: center;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(122, 46, 140, 0.36), transparent 70%),
        radial-gradient(70% 42% at 50% 100%, rgba(255, 190, 110, 0.14), transparent 72%),
        radial-gradient(60% 40% at 50% 100%, rgba(176, 30, 58, 0.14), transparent 75%),
        var(--night);
}
/* 頭と一覧の境: ステンドグラスの細い帯 */
.pe-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(620px, 86%);
    height: 1px;
    transform: translateX(-50%);
    background: var(--glass-band);
    opacity: 0.7;
}
.pe-hero .rose {
    --rose: min(60vw, 260px);
    position: absolute;
    left: 50%;
    top: calc(50% + 30px);    /* ナビ（60px）の下の空きの中心に置く（ナビの押す所に窓の枠が掛からないように） */
    z-index: -1;
    margin: calc(var(--rose) / -2) 0 0 calc(var(--rose) / -2);
    opacity: 0.62;
}
.pe-hero .rose-glass { opacity: 0.42; }
.pe-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.pe-hero .sec-title {
    font-size: clamp(1.8rem, 7.4vw, 2.6rem);
    line-height: 1.3;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}
.pe-subtitle {
    margin: 10px 0 0;
    font-weight: 700;
    font-size: clamp(0.9rem, 3.8vw, 1.02rem);
    line-height: 1.8;
    letter-spacing: 0.14em;
    color: var(--gold-pale);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
    word-break: auto-phrase;
}
html:lang(en) .pe-subtitle { letter-spacing: 0.04em; }

/* ---------- 一覧 ---------- */
.pe-list {
    max-width: 820px;
    margin: 0 auto;
    padding: 4px 16px 40px;
    line-break: strict;            /* 行頭に「ょ」「ー」などを置かない */
}
/* js/events.js が描く前から場所を取っておく（描いたときに、足もとが画面の中で動かないように） */
html.js .pe-list { min-height: 100vh; }
.year-section { padding-top: 30px; }

/* 年: 尖頭アーチの窓（色ガラスと金の枠）に、黒体字の年を掲げる。左右は金の罫 */
.year-title {
    --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 104' preserveAspectRatio='none'%3E%3Cpath d='M0 104V50C0 24 26 6 64 0c38 6 64 24 64 50v54z'/%3E%3C/svg%3E");
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 76px;
    margin: 0 0 8px;
    background:
        linear-gradient(90deg, transparent, rgba(217, 173, 85, 0.75)) left 62% / calc(50% - 80px) 1px no-repeat,
        linear-gradient(270deg, transparent, rgba(217, 173, 85, 0.75)) right 62% / calc(50% - 80px) 1px no-repeat;
}
/* 窓のガラス: 下の中心から扇に広がる色ガラスと鉛の線 */
.year-title::before,
.year-title::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    width: 94px;
    height: 76px;
    margin-left: -47px;
}
.year-title::before {
    background:
        radial-gradient(58% 50% at 50% 78%, rgba(12, 10, 20, 0.86) 0%, rgba(12, 10, 20, 0.35) 70%, transparent 100%),
        repeating-conic-gradient(from 270deg at 50% 100%, rgba(12, 10, 20, 0.92) 0deg 1.4deg, transparent 1.4deg 22.5deg),
        repeating-radial-gradient(circle at 50% 100%, transparent 0 30px, rgba(12, 10, 20, 0.85) 30px 31.5px),
        conic-gradient(from 270deg at 50% 100%, #b01e3a 0deg, #2150b0 30deg, #1d7a55 60deg, #d9ad55 90deg, #7a2e8c 120deg, #2150b0 150deg, #b01e3a 180deg);
    -webkit-mask: var(--arch) center / 100% 100% no-repeat;
            mask: var(--arch) center / 100% 100% no-repeat;
    opacity: 0.55;
}
/* 窓の金の枠（外と内の二重線） */
.year-title::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 104' fill='none' stroke='%23d9ad55'%3E%3Cpath stroke-width='1.4' d='M.7 104V50C.7 24.4 26.4 6.6 64 .7c37.6 5.9 63.3 23.7 63.3 49.3v54'/%3E%3Cpath stroke-width='.7' stroke-opacity='.55' d='M5.5 104V51.5C5.5 29 28.5 12.7 64 5.8c35.5 6.9 58.5 23.2 58.5 45.7V104'/%3E%3Cpath stroke-width='1.2' d='M0 103.4h128'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.year-number {
    display: block;
    padding: 0 0 8px;
    font-family: var(--f-gothic);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--gold-hi);
    background: var(--gilt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
}

/* 一覧: 1件を1行（日付・題・会場）。行の区切りは細い線（2026-10-15 大きな札と年表の軸をやめた） */
.events-container { display: grid; border-top: 1px solid var(--line); }
.pe-list .event-card {
    --accent: var(--gold);
    --accent-glow: rgba(217, 173, 85, 0.5);
    max-width: none;
    margin: 0;
    padding: 12px 4px 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    outline: 0;
}
.ev-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }   /* スマホは日付を題の上に（長い日付「2.11 (水・祝)」がはみ出さない） */
/* 分類の色ガラス（前のページの色分けを、ステンドグラスの色に置き換えたもの） */
.pe-list .event-card.live-performance { --accent: #c9304e; --accent-glow: rgba(201, 48, 78, 0.6); --accent-tint: rgba(176, 30, 58, 0.2); }
.pe-list .event-card.streaming-event { --accent: #3f72db; --accent-glow: rgba(63, 114, 219, 0.6); --accent-tint: rgba(33, 80, 176, 0.24); }
.pe-list .event-card.media-appearance { --accent: #d9678a; --accent-glow: rgba(217, 103, 138, 0.55); --accent-tint: rgba(217, 103, 138, 0.16); }
.pe-list .event-card.spiritual-booth { --accent: #a04cba; --accent-glow: rgba(160, 76, 186, 0.6); --accent-tint: rgba(122, 46, 140, 0.26); }
.pe-list .event-card.meetup { --accent: #2c9c6e; --accent-glow: rgba(44, 156, 110, 0.55); --accent-tint: rgba(29, 122, 85, 0.24); }

.event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-latin);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold);
    white-space: nowrap;
}
.event-date::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 6px var(--accent-glow); }
.event-title { margin: 0; font-family: var(--f-jp); font-weight: 700; font-size: 0.98rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--gold-pale); }
.ev-soldout { display: inline-block; margin-left: 8px; padding: 0 6px; font-family: var(--f-latin); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--rose-text); border: 1px solid rgba(201, 48, 78, 0.55); vertical-align: 2px; }
.event-venue { margin: 2px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }

/* 詳細（押すと開く） */
.ev-more { margin: 2px 0 0; }
.ev-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); cursor: pointer; list-style: none; }
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ev-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ev-more > summary:hover { color: var(--gold-hi); }
.event-details { margin: 0 0 8px; padding: 10px 12px 6px; background: rgba(8, 7, 13, 0.5); border-left: 2px solid var(--accent); }
.event-description { margin: 0 0 6px; font-size: 0.88rem; line-height: 1.85; color: var(--ivory); }
.event-details p { margin: 2px 0; font-size: 0.86rem; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.event-details p > strong:first-child { color: var(--gold); font-weight: 700; }
.event-details strong { color: var(--gold-hi); font-weight: 700; }
.event-image { display: block; width: min(100%, 200px); height: auto; aspect-ratio: 5 / 7; object-fit: contain; margin: 4px 0 8px; padding: 3px; background: #08070d; border: 1px solid var(--line-strong); cursor: zoom-in; }
.expo-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 2px 0 6px; padding: 8px 14px; font-weight: 700; font-size: 0.84rem; line-height: 1.45; color: var(--gold-hi); background: rgba(12, 10, 20, 0.55); border: 1px solid var(--line-strong); border-radius: 2px; }
.expo-link:hover { background: rgba(217, 173, 85, 0.14); border-color: var(--gold-hi); }

/* js/events.js が描く <i class="fas fa-…">（Font Awesome 無しで同じ印にする。gothic.css にない分） */
.fa-map-marker-alt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.6-6.2-6.6-11.4a6.6 6.6 0 0 1 13.2 0c0 5.2-6.6 11.4-6.6 11.4z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4'/%3E%3C/svg%3E"); }
.fa-broadcast-tower { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='1.6'/%3E%3Cpath d='M12 10.6 8.6 21M12 10.6l3.4 10.4M9.6 17.4h4.8M8.2 5.6a4.8 4.8 0 0 0 0 6.8M15.8 5.6a4.8 4.8 0 0 1 0 6.8M5.4 2.8a8.8 8.8 0 0 0 0 12.4M18.6 2.8a8.8 8.8 0 0 1 0 12.4'/%3E%3C/svg%3E"); }
.fa-radio { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12.5' rx='2'/%3E%3Cpath d='M7 8 17 3.5'/%3E%3Ccircle cx='15.6' cy='14.2' r='2.8'/%3E%3Cpath d='M6.4 12h3.6M6.4 16.2h3.6'/%3E%3C/svg%3E"); }
.fa-check-circle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7.8 12.3 2.9 2.9 5.5-5.8'/%3E%3C/svg%3E"); }
.fa-times-circle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.fa-expand-arrows-alt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M4 4l6 6M20 4l-6 6M4 20l6-6M20 20l-6-6'/%3E%3C/svg%3E"); }
.fa-arrow-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.8 6.3 19.5 12l-5.7 5.7'/%3E%3C/svg%3E"); }

/* ---------- 一覧の終わり: 小さな薔薇窓 ---------- */

/* JS が無いとき: 一覧の代わりに案内の文。ナビは折り返しのリンクになるので、頭の文と重ならないよう下げ、
   地の無いナビが本文に重ならないよう、ページと一緒に流れるようにする */
.pe-list .events-empty { margin-top: 48px; }
html:not(.js) .nav { position: absolute; }
@media (max-width: 768px) {
    html:not(.js) .pe-hero { padding-top: 156px; }
}

/* ---------- 広い画面 ---------- */
@media (min-width: 769px) {
    .pe-hero { padding: 100px 32px 40px; }
    .pe-list { padding: 8px 32px 56px; }
    .year-section { padding-top: 40px; }
    .pe-list .event-card { padding: 14px 8px 12px; }
    .ev-row { grid-template-columns: 8.4em minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
    .ev-more { margin-left: calc(8.4em + 16px); }
    .event-title { font-size: 1.04rem; }
    .event-details p { font-size: 0.9rem; }
}
/* 広い画面の入り口（769〜1040px）: 「Home」＋6つのリンク＋言語の切り替えを1行に収める（sub.css の .nav-sub と同じ詰め。
   詰めないと 769〜775px で2段に折れる） */
@media (min-width: 769px) and (max-width: 1040px) {
    .nav-links a { padding-left: 7px; padding-right: 7px; letter-spacing: 0.05em; }
    .nav-links a::after { left: 7px; right: 7px; }
    .nav-mark { font-size: 1.8rem; }
}

/* ---------- 動き（段2）: 動きを減らす設定でない端末だけ。色の変化と、gothic.css の薔薇窓の回転 ---------- */
@media (prefers-reduced-motion: no-preference) {
    .expo-link { transition: background-color 0.3s ease, border-color 0.3s ease; }
    .event-image { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
}
/* 画面の外にある薔薇窓は回さない（見えない所で電池を使わない） */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }