/* =============================================
   daitoua.quest - Styles
   Grainy-textured pastoral / Art Deco / Masonry
   ============================================= */

/* ---- CSS Custom Properties ---- */
:root {
    /* Colors from DESIGN.md */
    --aged-parchment: #F5EDE0;
    --midnight-plum: #1A1128;
    --dusty-rose-shadow: #3B1F2B;
    --sunset-amber: #E8946A;
    --twilight-rose: #D4637A;
    --antique-gold: #C4923A;
    --warm-espresso: #2C1810;
    --sepia-ink: #6B4226;
    --faded-ivory: #E8DCC8;
    --dusk-indigo: #7B3F61;
    --grain-warm: #D4C4A8;
    --muted-warm-gray: #8A7B6B;

    /* Typography */
    --font-display: 'Poiret One', cursive;
    --font-secondary: 'Josefin Sans', sans-serif;
    --font-body: 'Lora', serif;
    --font-mono: 'DM Mono', monospace;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--aged-parchment);
    color: var(--warm-espresso);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Grain Overlay (Global) ---- */
body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.08;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    animation: grainShift 10s linear infinite;
}

@keyframes grainShift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 2px); }
    75% { transform: translate(2px, 1px); }
    100% { transform: translate(0, 0); }
}

/* =============================================
   CHAPTER I: DEPARTURE (Hero)
   ============================================= */
.chapter-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 100% 80% at 50% 30%, #E8946A 0%, transparent 60%),
        radial-gradient(ellipse 80% 70% at 30% 50%, #D4637A 0%, transparent 55%),
        radial-gradient(ellipse 70% 90% at 70% 70%, #7B3F61 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 80% 20%, rgba(196, 146, 58, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 120% 100% at 50% 100%, #1A1128 0%, transparent 70%),
        linear-gradient(180deg, #3B1F2B 0%, #1A1128 100%);
    background-attachment: fixed;
}

.hero-grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--antique-gold);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(196, 146, 58, 0.3);
}

.hero-subtitle {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-ivory);
    margin-bottom: 2.5rem;
    opacity: 0.85;
}

/* Chevron Band */
.chevron-band {
    width: 200px;
    height: 12px;
    margin: 0 auto;
    background:
        linear-gradient(45deg, var(--antique-gold) 25%, transparent 25%) -6px 0,
        linear-gradient(-45deg, var(--antique-gold) 25%, transparent 25%) -6px 0,
        linear-gradient(45deg, transparent 75%, var(--antique-gold) 75%),
        linear-gradient(-45deg, transparent 75%, var(--antique-gold) 75%);
    background-size: 12px 12px;
    background-color: transparent;
    opacity: 0.5;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: scrollPulse 3s ease-in-out infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--antique-gold);
    border-bottom: 2px solid var(--antique-gold);
    transform: rotate(45deg);
    opacity: 0.6;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--antique-gold);
    border-bottom: 1px solid var(--antique-gold);
    transform: rotate(0deg);
    opacity: 0.4;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.8; transform: translateX(-50%) translateY(8px); }
}

/* =============================================
   MASONRY SECTIONS
   ============================================= */
.masonry-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.masonry-grid {
    column-count: 3;
    column-gap: 24px;
}

/* Center column wider effect via varied card padding */
.masonry-grid > .card:nth-child(3n+2) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ---- Card Base ---- */
.card {
    break-inside: avoid;
    margin-bottom: 24px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: default;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
    /* Initial state for scroll reveal */
    opacity: 0;
    transform: translateY(20px);
}

.card.revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(26, 17, 40, 0.15);
}

.card.revealed:hover {
    transform: translateY(-6px);
}

/* ---- Chronicle Cards ---- */
.chronicle-card {
    background-color: var(--aged-parchment);
}

.card-gradient {
    width: 100%;
    padding-top: 55%;
    position: relative;
}

.chronicle-gradient-1 {
    background:
        radial-gradient(ellipse 80% 60% at 30% 20%, #E8946A 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 70% 60%, #D4637A 0%, transparent 65%),
        radial-gradient(ellipse 90% 90% at 50% 80%, #7B3F61 0%, transparent 80%),
        radial-gradient(ellipse 40% 40% at 80% 15%, rgba(196, 146, 58, 0.27) 0%, transparent 60%),
        linear-gradient(180deg, #1A1128 0%, #3B1F2B 100%);
}

.chronicle-gradient-2 {
    background:
        radial-gradient(ellipse 70% 70% at 60% 30%, #E8946A 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 20% 70%, #D4637A 0%, transparent 60%),
        radial-gradient(ellipse 60% 90% at 80% 80%, #7B3F61 0%, transparent 75%),
        radial-gradient(ellipse 50% 30% at 40% 10%, rgba(196, 146, 58, 0.2) 0%, transparent 55%),
        linear-gradient(200deg, #3B1F2B 0%, #1A1128 100%);
}

.chronicle-gradient-3 {
    background:
        radial-gradient(ellipse 90% 50% at 40% 40%, #E8946A 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 80% 30%, #D4637A 0%, transparent 70%),
        radial-gradient(ellipse 70% 70% at 30% 80%, #7B3F61 0%, transparent 65%),
        radial-gradient(ellipse 35% 35% at 60% 60%, rgba(196, 146, 58, 0.22) 0%, transparent 50%),
        linear-gradient(160deg, #1A1128 0%, #3B1F2B 100%);
}

.chronicle-gradient-4 {
    background:
        radial-gradient(ellipse 70% 80% at 50% 20%, #E8946A 0%, transparent 65%),
        radial-gradient(ellipse 90% 50% at 25% 60%, #D4637A 0%, transparent 55%),
        radial-gradient(ellipse 80% 80% at 70% 90%, #7B3F61 0%, transparent 70%),
        radial-gradient(ellipse 45% 45% at 15% 30%, rgba(196, 146, 58, 0.25) 0%, transparent 60%),
        linear-gradient(190deg, #3B1F2B 0%, #1A1128 100%);
}

.chronicle-gradient-5 {
    background:
        radial-gradient(ellipse 60% 70% at 70% 40%, #E8946A 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 30% 20%, #D4637A 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 50% 80%, #7B3F61 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 90% 50%, rgba(196, 146, 58, 0.2) 0%, transparent 55%),
        linear-gradient(170deg, #1A1128 0%, #3B1F2B 100%);
}

.chronicle-gradient-6 {
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, #E8946A 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 60% 70%, #D4637A 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 20%, #7B3F61 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 40% 90%, rgba(196, 146, 58, 0.18) 0%, transparent 60%),
        linear-gradient(210deg, #3B1F2B 0%, #1A1128 100%);
}

/* Discovery chapter: deeper palette (more indigo, less amber) */
.chronicle-gradient-7 {
    background:
        radial-gradient(ellipse 50% 50% at 40% 30%, #E8946A 0%, transparent 55%),
        radial-gradient(ellipse 80% 70% at 60% 60%, #7B3F61 0%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 30% 80%, #1A1128 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(212, 99, 122, 0.3) 0%, transparent 55%),
        linear-gradient(180deg, #3B1F2B 0%, #1A1128 100%);
}

.chronicle-gradient-8 {
    background:
        radial-gradient(ellipse 60% 60% at 70% 40%, #7B3F61 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 30% 70%, #D4637A 0%, transparent 55%),
        radial-gradient(ellipse 70% 90% at 50% 20%, #1A1128 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 50%, rgba(232, 148, 106, 0.2) 0%, transparent 55%),
        linear-gradient(200deg, #1A1128 0%, #3B1F2B 100%);
}

.card-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    opacity: 0.12;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.card-divider {
    width: 85%;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
    opacity: 0.5;
}

.card-body {
    padding: 1.2rem 1.4rem 1.6rem;
}

.card-title {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    letter-spacing: 0.06em;
    color: var(--warm-espresso);
    margin-bottom: 0.7rem;
    line-height: 1.3;
}

.card-text {
    font-family: var(--font-body);
    color: var(--warm-espresso);
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    line-height: 1.72;
}

/* ---- Artifact Cards ---- */
.artifact-card {
    background-color: var(--dusty-rose-shadow);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.artifact-motif {
    width: 80%;
    height: 80%;
    position: relative;
}

/* Sunburst Fan */
.sunburst-fan {
    background: conic-gradient(
        from 180deg at 50% 100%,
        transparent 0deg,
        rgba(196, 146, 58, 0.15) 5deg,
        transparent 10deg,
        rgba(196, 146, 58, 0.15) 15deg,
        transparent 20deg,
        rgba(196, 146, 58, 0.15) 25deg,
        transparent 30deg,
        rgba(196, 146, 58, 0.15) 35deg,
        transparent 40deg,
        rgba(196, 146, 58, 0.15) 45deg,
        transparent 50deg,
        rgba(196, 146, 58, 0.15) 55deg,
        transparent 60deg,
        rgba(196, 146, 58, 0.15) 65deg,
        transparent 70deg,
        rgba(196, 146, 58, 0.15) 75deg,
        transparent 80deg,
        rgba(196, 146, 58, 0.15) 85deg,
        transparent 90deg,
        rgba(196, 146, 58, 0.15) 95deg,
        transparent 100deg,
        rgba(196, 146, 58, 0.15) 105deg,
        transparent 110deg,
        rgba(196, 146, 58, 0.15) 115deg,
        transparent 120deg,
        rgba(196, 146, 58, 0.15) 125deg,
        transparent 130deg,
        rgba(196, 146, 58, 0.15) 135deg,
        transparent 140deg,
        rgba(196, 146, 58, 0.15) 145deg,
        transparent 150deg,
        rgba(196, 146, 58, 0.15) 155deg,
        transparent 160deg,
        rgba(196, 146, 58, 0.15) 165deg,
        transparent 170deg,
        rgba(196, 146, 58, 0.15) 175deg,
        transparent 180deg
    );
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.sunburst-fan.variant-2 {
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    background: conic-gradient(
        from 0deg at 50% 0%,
        transparent 0deg,
        rgba(196, 146, 58, 0.12) 5deg,
        transparent 10deg,
        rgba(196, 146, 58, 0.12) 15deg,
        transparent 20deg,
        rgba(196, 146, 58, 0.12) 25deg,
        transparent 30deg,
        rgba(196, 146, 58, 0.12) 35deg,
        transparent 40deg,
        rgba(196, 146, 58, 0.12) 45deg,
        transparent 50deg,
        rgba(196, 146, 58, 0.12) 55deg,
        transparent 60deg,
        rgba(196, 146, 58, 0.12) 65deg,
        transparent 70deg,
        rgba(196, 146, 58, 0.12) 75deg,
        transparent 80deg,
        rgba(196, 146, 58, 0.12) 85deg,
        transparent 90deg,
        rgba(196, 146, 58, 0.12) 95deg,
        transparent 100deg,
        rgba(196, 146, 58, 0.12) 105deg,
        transparent 110deg,
        rgba(196, 146, 58, 0.12) 115deg,
        transparent 120deg,
        rgba(196, 146, 58, 0.12) 125deg,
        transparent 130deg,
        rgba(196, 146, 58, 0.12) 135deg,
        transparent 140deg,
        rgba(196, 146, 58, 0.12) 145deg,
        transparent 150deg,
        rgba(196, 146, 58, 0.12) 155deg,
        transparent 160deg,
        rgba(196, 146, 58, 0.12) 165deg,
        transparent 170deg,
        rgba(196, 146, 58, 0.12) 175deg,
        transparent 180deg
    );
}

/* Stepped Pyramid */
.stepped-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.stepped-pyramid::before {
    content: '';
    display: block;
    width: 25%;
    height: 12%;
    background: var(--antique-gold);
    opacity: 0.25;
    box-shadow:
        0 14px 0 0 var(--antique-gold),
        -10% 14px 0 0 var(--antique-gold),
        10% 14px 0 0 var(--antique-gold);
}

.stepped-pyramid::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 10%;
    background: rgba(196, 146, 58, 0.2);
    box-shadow:
        0 -18px 0 -2px rgba(196, 146, 58, 0.2),
        0 -34px 0 -4px rgba(196, 146, 58, 0.2),
        0 -48px 0 -6px rgba(196, 146, 58, 0.2),
        0 -60px 0 -8px rgba(196, 146, 58, 0.2);
}

/* Proper stepped pyramid via nested box-shadows */
.stepped-pyramid {
    position: relative;
}

.stepped-pyramid::before {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 8%;
    background: rgba(196, 146, 58, 0.25);
}

.stepped-pyramid::after {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 8%;
    background: rgba(196, 146, 58, 0.22);
    box-shadow:
        0 calc(-100% - 4px) 0 calc(-6%) rgba(196, 146, 58, 0.19),
        0 calc(-200% - 8px) 0 calc(-12%) rgba(196, 146, 58, 0.16),
        0 calc(-300% - 12px) 0 calc(-18%) rgba(196, 146, 58, 0.13);
}

.stepped-pyramid.variant-2::before {
    background: rgba(196, 146, 58, 0.2);
}

.stepped-pyramid.variant-2::after {
    background: rgba(196, 146, 58, 0.18);
}

/* Geometric Rosette */
.geometric-rosette {
    border-radius: 50%;
    border: 2px solid rgba(196, 146, 58, 0.3);
    position: relative;
}

.geometric-rosette::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 146, 58, 0.25);
}

.geometric-rosette::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 1px solid rgba(196, 146, 58, 0.2);
    box-shadow:
        0 0 0 8px rgba(196, 146, 58, 0.05),
        0 0 0 16px rgba(196, 146, 58, 0.03);
}

.geometric-rosette.variant-2 {
    border-color: rgba(196, 146, 58, 0.25);
}

.geometric-rosette.variant-2::before {
    border-color: rgba(196, 146, 58, 0.2);
    transform: rotate(45deg);
    border-radius: 0;
}

.geometric-rosette.variant-2::after {
    border-color: rgba(196, 146, 58, 0.15);
}

/* ---- Passage Cards ---- */
.passage-card {
    background-color: var(--aged-parchment);
    padding: 2rem 1.8rem;
    position: relative;
    text-align: center;
}

.passage-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.passage-text {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--sepia-ink);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.passage-text em {
    font-style: italic;
}

/* Double Rule with Diamond */
.double-rule-diamond {
    position: relative;
    width: 80px;
    height: 16px;
    margin: 1.2rem auto 0;
    z-index: 1;
}

.double-rule-diamond::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--antique-gold);
    opacity: 0.4;
    box-shadow: 0 8px 0 0 rgba(196, 146, 58, 0.4);
}

.double-rule-diamond::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--antique-gold);
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* =============================================
   INTERSTITIAL SECTIONS
   ============================================= */
.interstitial {
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.interstitial-dark {
    background-color: var(--midnight-plum);
}

.interstitial-light {
    background-color: var(--aged-parchment);
}

.interstitial-content {
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.interstitial-content.revealed {
    opacity: 1;
    transform: scale(1);
}

.chapter-numeral {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.18em;
    color: var(--antique-gold);
    display: block;
    margin-top: 2rem;
    text-shadow: 0 2px 15px rgba(196, 146, 58, 0.2);
}

.chapter-numeral-dark {
    color: var(--warm-espresso);
    text-shadow: none;
}

/* Rosette Motif in Interstitial */
.rosette-motif {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(196, 146, 58, 0.4);
    position: relative;
    margin: 0 auto;
}

.rosette-motif::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 146, 58, 0.3);
}

.rosette-motif::after {
    content: '';
    position: absolute;
    top: 32%;
    left: 32%;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    border: 1px solid rgba(196, 146, 58, 0.25);
    box-shadow:
        0 0 0 10px rgba(196, 146, 58, 0.06),
        0 0 0 20px rgba(196, 146, 58, 0.03);
}

/* Stepped Pyramid Motif in Interstitial */
.stepped-pyramid-motif {
    width: 140px;
    height: 90px;
    position: relative;
    margin: 0 auto;
}

.stepped-pyramid-motif::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 20px;
    background: rgba(107, 66, 38, 0.2);
    box-shadow:
        0 -24px 0 -3px rgba(107, 66, 38, 0.18),
        0 -46px 0 -6px rgba(107, 66, 38, 0.15),
        0 -66px 0 -9px rgba(107, 66, 38, 0.12);
}

.stepped-pyramid-motif::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--sepia-ink);
    opacity: 0.3;
    transform: translateX(-50%) rotate(45deg);
}

/* Interstitial Sunburst background */
.interstitial-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 180deg at 50% 110%,
        transparent 0deg,
        rgba(196, 146, 58, 0.04) 10deg,
        transparent 20deg,
        rgba(196, 146, 58, 0.04) 30deg,
        transparent 40deg,
        rgba(196, 146, 58, 0.04) 50deg,
        transparent 60deg,
        rgba(196, 146, 58, 0.04) 70deg,
        transparent 80deg,
        rgba(196, 146, 58, 0.04) 90deg,
        transparent 100deg,
        rgba(196, 146, 58, 0.04) 110deg,
        transparent 120deg,
        rgba(196, 146, 58, 0.04) 130deg,
        transparent 140deg,
        rgba(196, 146, 58, 0.04) 150deg,
        transparent 160deg,
        rgba(196, 146, 58, 0.04) 170deg,
        transparent 180deg
    );
    pointer-events: none;
}

/* Grain on dark interstitials */
.interstitial-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* =============================================
   CHAPTER V: REFLECTION (Closing)
   ============================================= */
.chapter-closing {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 100% 70% at 50% 80%, #E8946A 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 30% 40%, #C4923A33 0%, transparent 55%),
        radial-gradient(ellipse 70% 70% at 70% 30%, #D4637A 0%, transparent 60%),
        radial-gradient(ellipse 90% 90% at 50% 20%, #7B3F61 0%, transparent 70%),
        linear-gradient(0deg, #E8946A22 0%, #1A1128 30%, #3B1F2B 100%);
    background-attachment: fixed;
}

.closing-grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.closing-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 4rem 2rem;
    text-align: center;
}

.closing-text {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--faded-ivory);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.85;
    text-shadow: 0 1px 8px rgba(26, 17, 40, 0.3);
}

.closing-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 2.5rem auto;
    width: 120px;
}

.rule-line {
    flex: 1;
    height: 1px;
    background: var(--antique-gold);
    opacity: 0.5;
}

.rule-diamond {
    width: 8px;
    height: 8px;
    background: var(--antique-gold);
    opacity: 0.5;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.closing-domain {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    color: var(--faded-ivory);
    opacity: 0.6;
    text-transform: lowercase;
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* Tablet */
@media (max-width: 1200px) {
    .masonry-grid {
        column-count: 2;
        column-gap: 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
        column-gap: 0;
    }

    .masonry-section {
        padding: 2rem 1rem;
    }

    .chapter-hero {
        background-attachment: scroll;
    }

    .chapter-closing {
        background-attachment: scroll;
    }

    .hero-title {
        letter-spacing: 0.15em;
    }

    .artifact-card {
        min-height: 180px;
    }
}

/* =============================================
   UTILITY
   ============================================= */
::selection {
    background: rgba(196, 146, 58, 0.3);
    color: var(--warm-espresso);
}