/* ZoraJewels — Homepage · Layout 29 Broken Grid Flow */

.eg-fracture-world { overflow-x: hidden; }

/* S01 · Fractured Entry Hero */
.eg-shard-hero {
    min-height: 100vh; position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--eg-nav-h) + 2rem) 1.5rem 4rem;
    overflow: hidden;
}
.eg-shard-hero__grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem; max-width: 1200px; margin: 0 auto;
    align-items: center; position: relative;
}
.eg-shard-hero__title {
    font-family: var(--eg-font-serif);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 500; line-height: 0.95; margin-bottom: 1.25rem;
}
.eg-shard-hero__title span { display: block; }
.eg-shard-hero__title--shift { margin-left: 12%; color: var(--eg-gold); }
.eg-shard-hero__title--italic { font-style: italic; font-size: 0.85em; margin-left: 24%; }
.eg-shard-hero__lead {
    color: var(--eg-ink-muted); max-width: 420px; line-height: 1.75;
    margin-bottom: 1.75rem; font-size: 0.95rem;
}
.eg-shard-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.eg-shard-hero__island { position: relative; z-index: 2; }
.eg-shard-hero__island-frame {
     position: relative; /*clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 92%); */
    border: 1px solid var(--eg-border); overflow: hidden;
    box-shadow: var(--eg-shadow);
}
.eg-shard-hero__island-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.eg-shard-hero__island-tag {
    position: absolute; bottom: 1rem; left: -1rem;
    background: var(--eg-void); border: 1px solid var(--eg-gold);
    padding: 0.65rem 1rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.eg-shard-hero__island-tag strong { font-family: var(--eg-font-serif); font-size: 0.95rem; }
.eg-shard-hero__island-tag span:last-child { color: var(--eg-gold); font-size: 0.85rem; }

.eg-shard-hero__float {
    position: absolute; border: 1px solid var(--eg-border);
    overflow: hidden; box-shadow: var(--eg-shadow-soft);
    animation: eg-float 6s ease-in-out infinite;
}
.eg-shard-hero__float img { width: 100%; height: 100%; object-fit: cover; }
.eg-shard-hero__float--a {
    width: 90px; height: 90px; top: -20px; right: -30px;
    clip-path: polygon(15% 0, 100% 10%, 85% 100%, 0 90%);
    animation-delay: -2s;
}
.eg-shard-hero__float--b {
    width: 72px; height: 72px; bottom: 15%; left: -40px;
    clip-path: polygon(0 15%, 90% 0, 100% 85%, 10% 100%);
    animation-delay: -4s;
}

.eg-shard-hero__diag {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, transparent 48%, rgba(201,169,98,0.06) 49%, rgba(201,169,98,0.06) 51%, transparent 52%);
}

.eg-shard-hero__scroll-hint {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    font-family: var(--eg-font-mono); font-size: 0.58rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--eg-ink-muted);
    animation: eg-bob 2.5s ease-in-out infinite;
}

@keyframes eg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes eg-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* S02 · Manifesto Rail */
.eg-manifesto-rail {
    padding: 3rem 0; border-top: 1px solid var(--eg-border);
    border-bottom: 1px solid var(--eg-border); background: var(--eg-charcoal);
    overflow: hidden;
}
.eg-manifesto-rail__track {
    display: flex; gap: 2.5rem; padding: 0 1.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    cursor: grab; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.eg-manifesto-rail__track::-webkit-scrollbar { display: none; }
.eg-manifesto-rail__track.is-dragging { cursor: grabbing; }
.eg-manifesto-rail__word {
    flex-shrink: 0; scroll-snap-align: start;
    font-family: var(--eg-font-serif);
    font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500;
    color: var(--eg-ink); opacity: 0.35;
    transition: opacity 0.3s, color 0.3s;
}
.eg-manifesto-rail__word:hover { opacity: 1; color: var(--eg-gold); }
.eg-manifesto-rail__word--dash { font-style: italic; opacity: 0.2; }
.eg-manifesto-rail__caption {
    text-align: center; font-family: var(--eg-font-mono);
    font-size: 0.58rem; letter-spacing: 0.12em; color: var(--eg-ink-muted);
    margin-top: 1rem; text-transform: uppercase;
}

/* S03 · Metric Shards */
.eg-metric-shards {
    padding: 5rem 1.5rem; max-width: 1200px; margin: 0 auto;
}
.eg-metric-shards__head { margin-bottom: 2.5rem; }
.eg-metric-shards__head h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.eg-metric-shards__head em { font-style: italic; color: var(--eg-gold); }

.eg-metric-shards__grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto); gap: 1rem;
}
.eg-metric-shard {
    padding: 1.5rem; background: var(--eg-charcoal);
    border: 1px solid var(--eg-border); position: relative;
    transition: transform 0.35s var(--eg-ease), border-color 0.35s;
}
.eg-metric-shard:hover { border-color: var(--eg-gold); transform: translateY(-4px); }
.eg-metric-shard--A1 { grid-column: 1 / 3; transform: translateY(0); }
.eg-metric-shard--A2 { grid-column: 3 / 5; transform: translateY(20px); }
.eg-metric-shard--A3 { grid-column: 5 / 7; transform: translateY(-12px); }
.eg-metric-shard--B1 { grid-column: 1 / 3; transform: translateY(-8px); }
.eg-metric-shard--B2 { grid-column: 3 / 5; transform: translateY(16px); }
.eg-metric-shard--B3 { grid-column: 5 / 7; transform: translateY(0); }
.eg-metric-shard__id {
    font-family: var(--eg-font-mono); font-size: 0.58rem;
    color: var(--eg-gold); letter-spacing: 0.12em;
}
.eg-metric-shard__val {
    font-family: var(--eg-font-serif); font-size: 2.25rem;
    color: var(--eg-ink); margin: 0.35rem 0;
}
.eg-metric-shard__val small { font-size: 0.55em; color: var(--eg-gold); }
.eg-metric-shard__label { font-size: 0.78rem; color: var(--eg-ink-muted); }

/* S04 · Collection Drift */
.eg-drift-collection {
    padding: 4rem 0 5rem; background: var(--eg-slate);
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}
.eg-drift-collection__head {
    display: flex; justify-content: space-between; align-items: flex-end;
    max-width: 1200px; margin: 0 auto 2rem; padding: 0 1.5rem;
}
.eg-drift-collection__head h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.25rem);
}
.eg-drift-collection__head em { font-style: italic; color: var(--eg-gold); }

.eg-drift-collection__rail {
    display: flex; gap: 1.25rem; padding: 0 1.5rem 0.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    cursor: grab; scrollbar-width: none;
}
.eg-drift-collection__rail::-webkit-scrollbar { display: none; }
.eg-drift-collection__rail.is-dragging { cursor: grabbing; }

.eg-drift-card {
    flex: 0 0 min(280px, 75vw); scroll-snap-align: start;
    background: var(--eg-charcoal); border: 1px solid var(--eg-border);
    transition: transform 0.35s var(--eg-ease);
}
.eg-drift-card:nth-child(odd) { transform: translateY(12px); }
.eg-drift-card:hover { transform: translateY(-6px); border-color: var(--eg-gold); }
.eg-drift-card__img { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.eg-drift-card__img img { width: 100%; height: 100%; object-fit: cover; }
.eg-drift-card__badge {
    position: absolute; top: 0.65rem; right: 0.65rem;
    font-family: var(--eg-font-mono); font-size: 0.55rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--eg-void); color: var(--eg-gold); padding: 0.25rem 0.5rem;
}
.eg-drift-card__body { padding: 1.15rem; }
.eg-drift-card__body h3 { font-family: var(--eg-font-serif); font-size: 1.05rem; margin: 0.25rem 0; }
.eg-drift-card__body p { color: var(--eg-gold); font-weight: 500; margin-bottom: 0.75rem; }

/* S05 · Karat Studio */
.eg-karat-studio {
    padding: 5rem 1.5rem; max-width: 1200px; margin: 0 auto;
}
.eg-karat-studio__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.eg-karat-studio__preview-frame {
    position: relative; clip-path: polygon(0 5%, 95% 0, 100% 95%, 5% 100%);
    border: 1px solid var(--eg-border); overflow: hidden;
}
.eg-karat-studio__preview-frame img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    filter: var(--karat-filter, none);
    transition: filter 0.4s;
}
.eg-karat-studio__preview-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(201,169,98,0.35) 0%, transparent 70%);
    mix-blend-mode: soft-light;
}
.eg-karat-studio__preview-label {
    font-family: var(--eg-font-mono); font-size: 0.68rem;
    letter-spacing: 0.08em; color: var(--eg-gold);
    margin-top: 0.85rem; text-align: center;
}
.eg-karat-studio__controls h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.75rem;
}
.eg-karat-studio__controls em { font-style: italic; color: var(--eg-gold); }
.eg-karat-studio__intro { color: var(--eg-ink-muted); font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.7; }

.eg-karat-control { border: none; margin-bottom: 1.25rem; }
.eg-karat-control legend {
    font-family: var(--eg-font-mono); font-size: 0.62rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--eg-gold); margin-bottom: 0.5rem;
}
.eg-karat-control__opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.eg-karat-opt {
    padding: 0.45rem 0.85rem; font-size: 0.75rem;
    border: 1px solid var(--eg-border); color: var(--eg-ink-muted);
    transition: all 0.25s;
}
.eg-karat-opt.is-active, .eg-karat-opt:hover {
    border-color: var(--eg-gold); color: var(--eg-gold);
}
.eg-karat-opt--swatch {
    display: flex; align-items: center; gap: 0.4rem;
}
.eg-karat-opt--swatch::before {
    content: ''; width: 12px; height: 12px; border-radius: 50%;
    background: var(--swatch, var(--eg-gold));
}

.eg-karat-studio__estimate {
    display: flex; align-items: baseline; gap: 0.65rem;
    margin: 1.5rem 0; padding: 1rem; background: var(--eg-gold-dim);
    border: 1px solid var(--eg-border);
}
.eg-karat-studio__estimate span { font-size: 0.82rem; color: var(--eg-ink-muted); }
.eg-karat-studio__estimate strong {
    font-family: var(--eg-font-serif); font-size: 1.75rem; color: var(--eg-gold);
}

/* S06 · Forge Story */
.eg-forge-story {
    padding: 5rem 1.5rem; background: var(--eg-charcoal);
    border-top: 1px solid var(--eg-border); border-bottom: 1px solid var(--eg-border);
}
.eg-forge-story__sticky {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem;
    max-width: 1100px; margin: 0 auto; align-items: start;
}
.eg-forge-story__visual { position: sticky; top: calc(var(--eg-nav-h) + 2rem); }
.eg-forge-story__visual img {
    width: 100%; clip-path: polygon(0 0, 92% 5%, 100% 95%, 8% 100%);
    border: 1px solid var(--eg-border);
}
.eg-forge-story__frame-num {
    position: absolute; top: 1rem; right: -0.5rem;
    font-family: var(--eg-font-serif); font-size: 4rem; color: var(--eg-gold);
    opacity: 0.25; line-height: 1;
}
.eg-forge-story__chapter {
    min-height: 50vh; display: flex; flex-direction: column; justify-content: center;
    opacity: 0.25; transition: opacity 0.5s;
    padding: 2rem 0;
}
.eg-forge-story__chapter.is-active { opacity: 1; }
.eg-forge-story__chapter h2 {
    font-family: var(--eg-font-serif); font-size: 1.65rem; margin-bottom: 0.75rem;
}
.eg-forge-story__chapter p { color: var(--eg-ink-muted); line-height: 1.75; max-width: 480px; }

/* S07 · Process Shards */
.eg-process-shards {
    padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto;
}
.eg-process-shards__head { margin-bottom: 2.5rem; }
.eg-process-shards__head h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.25rem);
}
.eg-process-shards__head em { font-style: italic; color: var(--eg-gold); }

.eg-process-shards__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.eg-process-shard {
    padding: 1.5rem; border: 1px solid var(--eg-border);
    background: var(--eg-charcoal); position: relative;
}
.eg-process-shard--up { transform: translateY(-16px); }
.eg-process-shard--down { transform: translateY(16px); }
.eg-process-shard__step {
    font-family: var(--eg-font-mono); font-size: 0.62rem;
    color: var(--eg-gold); letter-spacing: 0.1em;
}
.eg-process-shard h3 {
    font-family: var(--eg-font-serif); font-size: 1.1rem; margin: 0.5rem 0;
}
.eg-process-shard p { font-size: 0.82rem; color: var(--eg-ink-muted); line-height: 1.65; }

/* S08 · Voice Fragments */
.eg-voice-fragments {
    padding: 5rem 1.5rem; background: var(--eg-slate);
}
.eg-voice-fragments__head {
    max-width: 1100px; margin: 0 auto 2.5rem;
}
.eg-voice-fragments__head h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.25rem);
}
.eg-voice-fragments__head em { font-style: italic; color: var(--eg-gold); }

.eg-voice-fragments__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    max-width: 1100px; margin: 0 auto;
}
.eg-voice-fragment {
    padding: 1.75rem; background: var(--eg-charcoal);
    border: 1px solid var(--eg-border);
}
.eg-voice-fragment:nth-child(1) { transform: translateY(0) rotate(-0.5deg); }
.eg-voice-fragment:nth-child(2) { transform: translateY(24px) rotate(0.5deg); margin-top: -12px; }
.eg-voice-fragment:nth-child(3) { transform: translateY(-8px); }
.eg-voice-fragment p {
    font-family: var(--eg-font-serif); font-style: italic;
    font-size: 0.95rem; line-height: 1.7; margin-bottom: 1rem;
}
.eg-voice-fragment footer { font-size: 0.75rem; color: var(--eg-ink-muted); }
.eg-voice-fragment cite { font-style: normal; color: var(--eg-gold); display: block; }
.eg-voice-fragment span { display: block; margin-top: 0.25rem; }

/* S09 · Luminous Field (Experimental) */
.eg-luminous-field {
    position: relative; min-height: 70vh;
    display: flex; align-items: center; justify-content: center;
    padding: 5rem 1.5rem; overflow: hidden;
    background: var(--eg-void);
}
#goldDustCanvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.eg-luminous-field__content {
    position: relative; z-index: 2; text-align: center; max-width: 560px;
}
.eg-luminous-field__content h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2; margin-bottom: 1rem;
}
.eg-luminous-field__content em { font-style: italic; color: var(--eg-gold); }
.eg-luminous-field__content p { color: var(--eg-ink-muted); line-height: 1.75; font-size: 0.9rem; }

.eg-luminous-field__specimens { position: absolute; inset: 0; pointer-events: none; }
.eg-luminous-field__spec {
    position: absolute; border: 1px solid var(--eg-border);
    object-fit: cover; opacity: 0.45;
    animation: eg-float 8s ease-in-out infinite;
}
.eg-luminous-field__spec--1 {
    width: 120px; height: 120px; top: 15%; left: 8%;
    clip-path: polygon(10% 0, 100% 5%, 90% 100%, 0 95%);
}
.eg-luminous-field__spec--2 {
    width: 100px; height: 100px; bottom: 20%; right: 10%;
    clip-path: polygon(0 10%, 95% 0, 100% 90%, 5% 100%);
    animation-delay: -3s;
}
.eg-luminous-field__spec--3 {
    width: 110px; height: 150px; top: 25%; right: 18%;
    clip-path: polygon(5% 0, 100% 8%, 92% 100%, 0 92%);
    animation-delay: -5s;
}

/* S10 · Commission Vault */
.eg-commission-vault {
    padding: 5rem 1.5rem 6rem; background: var(--eg-charcoal);
    border-top: 2px solid var(--eg-gold);
}
.eg-commission-vault__grid {
    display: grid; grid-template-columns: 1.1fr 1fr 0.8fr;
    gap: 2rem; max-width: 1200px; margin: 0 auto; align-items: start;
}
.eg-commission-vault__copy h2 {
    font-family: var(--eg-font-serif); font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin-bottom: 0.85rem;
}
.eg-commission-vault__copy em { font-style: italic; color: var(--eg-gold); }
.eg-commission-vault__copy > p { color: var(--eg-ink-muted); line-height: 1.75; margin-bottom: 1.25rem; font-size: 0.92rem; }
.eg-commission-vault__list { list-style: none; }
.eg-commission-vault__list li {
    padding: 0.45rem 0 0.45rem 1.25rem; position: relative;
    font-size: 0.88rem; color: var(--eg-ink-muted);
}
.eg-commission-vault__list li::before {
    content: '◆'; position: absolute; left: 0; color: var(--eg-gold); font-size: 0.5rem; top: 0.65rem;
}

.eg-commission-vault__form {
    padding: 1.75rem; background: var(--eg-slate);
    border: 1px solid var(--eg-border);
    transform: translateY(20px);
}
.eg-commission-vault__form label {
    font-family: var(--eg-font-mono); font-size: 0.6rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--eg-gold);
    display: block; margin-bottom: 0.3rem;
}
.eg-commission-vault__form input, .eg-commission-vault__form select {
    width: 100%; padding: 0.65rem; margin-bottom: 0.85rem;
    background: var(--eg-charcoal); border: 1px solid var(--eg-border); color: var(--eg-ink);
}
.eg-commission-vault__note { font-size: 0.75rem; color: var(--eg-ink-muted); margin-top: 0.75rem; text-align: center; }

.eg-commission-vault__visual {
    clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 88%);
    border: 1px solid var(--eg-border); overflow: hidden;
    transform: translateY(-30px);
}
.eg-commission-vault__visual img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* Homepage Responsive */
@media (max-width: 960px) {
    .eg-shard-hero__grid { grid-template-columns: 1fr; }
    .eg-shard-hero__title--shift { margin-left: 0; }
    .eg-shard-hero__title--italic { margin-left: 8%; }
    .eg-metric-shards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .eg-metric-shard--A1, .eg-metric-shard--A2, .eg-metric-shard--A3,
    .eg-metric-shard--B1, .eg-metric-shard--B2, .eg-metric-shard--B3 {
        grid-column: auto; transform: none;
    }
    .eg-karat-studio__grid, .eg-forge-story__sticky,
    .eg-commission-vault__grid { grid-template-columns: 1fr; }
    .eg-forge-story__visual { position: relative; top: auto; margin-bottom: 2rem; }
    .eg-forge-story__chapter { min-height: auto; }
    .eg-process-shards__grid { grid-template-columns: repeat(2, 1fr); }
    .eg-process-shard--up, .eg-process-shard--down { transform: none; }
    .eg-voice-fragments__grid { grid-template-columns: 1fr; }
    .eg-voice-fragment:nth-child(n) { transform: none; margin-top: 0; }
    .eg-commission-vault__form, .eg-commission-vault__visual { transform: none; }
}
@media (max-width: 560px) {
    .eg-metric-shards__grid, .eg-process-shards__grid { grid-template-columns: 1fr; }
    .eg-luminous-field__spec { display: none; }
}