:root {
    --ink: #2b1c10;
    --parchment: #e8dcc0;
    --parchment-dark: #d3c19a;
    --brown-deep: #1a0f08;
    --brown-mid: #3a2313;
    --blood: #6e0f0f;
    --blood-bright: #9c1c1c;
    --gold: #b8934f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "EB Garamond", Georgia, serif;
    color: var(--parchment);
    background-color: var(--brown-deep);
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(110, 15, 15, 0.25), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.6), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: "Cinzel", "EB Garamond", serif;
    letter-spacing: 0.03em;
}

header {
    padding: 24px 32px;
    background: linear-gradient(180deg, var(--brown-mid), var(--brown-deep));
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(156, 28, 28, 0.6);
}

nav a {
    color: var(--parchment-dark);
    text-decoration: none;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

nav a:hover {
    color: var(--blood-bright);
    text-shadow: 0 0 8px rgba(156, 28, 28, 0.7);
}

.nav-sep {
    margin: 0 12px;
    color: var(--gold);
    opacity: 0.6;
}

main {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.page-enter {
    animation: fade-up 0.6s ease both;
}

.hero, .card {
    background: linear-gradient(160deg, var(--parchment), var(--parchment-dark));
    color: var(--ink);
    border: 1px solid var(--gold);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(110, 15, 15, 0.08);
}

.hero {
    padding: 40px;
    border-radius: 4px;
    animation: fade-up 0.7s ease both;
}

.hero h2, .card h3 {
    color: var(--brown-mid);
}

.card {
    margin-bottom: 20px;
    padding: 24px;
    border-radius: 4px;
    animation: fade-up 0.6s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.08s);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(110, 15, 15, 0.12);
}

.button {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    color: var(--parchment);
    background: linear-gradient(180deg, var(--blood-bright), var(--blood));
    border: 1px solid var(--gold);
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.button:hover {
    box-shadow: 0 0 20px rgba(156, 28, 28, 0.8);
    transform: translateY(-2px);
}

.events-shell {
    display: grid;
    gap: 24px;
}

.events-heading {
    padding: 8px 0 4px;
}

.events-copy {
    max-width: 640px;
    line-height: 1.7;
    color: var(--parchment-dark);
}

.events-grid {
    display: grid;
    gap: 20px;
}

.poster-card {
    position: relative;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    background: linear-gradient(150deg, rgba(232, 220, 192, 0.98), rgba(211, 193, 154, 0.95));
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    transform: rotate(-1.2deg);
    overflow: hidden;
}

.poster-card::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -12px;
    width: 80px;
    height: 24px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(26, 15, 8, 0.15);
    transform: rotate(-12deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.poster-card::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 14px;
    width: 56px;
    height: 18px;
    border-top: 2px dashed rgba(110, 15, 15, 0.35);
    border-bottom: 2px dashed rgba(110, 15, 15, 0.35);
    transform: rotate(8deg);
}

.poster-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.poster-label {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blood);
    font-weight: 700;
}

.poster-pill {
    padding: 6px 10px;
    background: var(--brown-mid);
    color: var(--parchment);
    border-radius: 999px;
    font-size: 0.85rem;
}

.poster-description {
    line-height: 1.7;
    margin: 0 0 12px;
}

.meta {
    margin: 0 0 12px;
    color: var(--brown-mid);
    font-weight: 700;
}

.event-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.empty-state {
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed var(--gold);
    border-radius: 6px;
}

.entry-shell {
    display: grid;
    gap: 24px;
}

.entry-hero {
    padding: 24px;
    border-radius: 8px;
}

.entry-form {
    padding: 24px;
    border-radius: 8px;
    display: grid;
    gap: 16px;
}

.field {
    display: grid;
    gap: 8px;
}

.field label {
    font-weight: 700;
    color: var(--brown-mid);
}

.field input,
.field textarea {
    padding: 12px 14px;
    border: 1px solid rgba(26, 15, 8, 0.2);
    border-radius: 4px;
    font: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.entry-notice {
    margin: 0;
    color: var(--brown-mid);
    line-height: 1.6;
}

.entry-status {
    margin: 0;
    padding: 12px 14px;
    border-radius: 4px;
    background: rgba(110, 15, 15, 0.14);
    color: var(--blood);
    min-height: 48px;
}

.entry-status.is-error {
    background: rgba(156, 28, 28, 0.16);
    color: var(--blood-bright);
}

footer {
    padding: 24px;
    text-align: center;
    color: var(--parchment-dark);
    background: var(--brown-deep);
    border-top: 1px solid var(--brown-mid);
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-enter, .hero, .card {
        animation: none;
    }
}

/* ページ遷移(view transitions) - 霧が晴れて夜に沈むような演出 */
::view-transition-old(root) {
    animation: mist-out 0.5s ease both;
}

::view-transition-new(root) {
    animation: mist-in 0.6s ease both;
}

@keyframes mist-out {
    from {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
    to {
        opacity: 0;
        filter: blur(6px) brightness(0.3);
    }
}

@keyframes mist-in {
    from {
        opacity: 0;
        filter: blur(6px) brightness(0.3);
    }
    to {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}