/* ============================================================
   HOME
   ============================================================ */

/* ---------- hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--header) + 2rem) 0 5rem;
    overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.hero__copy .display { margin-bottom: 1.8rem; font-size: clamp(3rem, 6.2vw, 6.6rem); }
.hero__copy .lede { margin-bottom: 2.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; }
.hero__gem { position: relative; width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 1; }
.hero__gem canvas { width: 100%; height: 100%; touch-action: pan-y; }
.hero__gem::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 7%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.hero__gem figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: baseline; gap: 0.8rem; }
.hero__gem figcaption em { font-family: var(--serif); font-size: 1.25rem; color: var(--accent-text); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-3); }
.hero__scroll i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.ticker__track { display: flex; align-items: center; gap: 2.4rem; width: max-content; animation: tick 48s linear infinite; }
.ticker span { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--fg-2); white-space: nowrap; }
.ticker i { font-style: normal; color: var(--gold); font-size: 0.7rem; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- two collections ---------- */
.duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.duo__panel { display: block; color: var(--fg); }
.duo__panel--offset { margin-top: clamp(3rem, 9vw, 8rem); }
.duo__img { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 2rem; position: relative; }
.duo__img::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, 0.55); pointer-events: none; transition: inset 0.8s var(--ease); }
.duo__panel:hover .duo__img::after { inset: 20px; }
.duo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.duo__panel:hover .duo__img img { transform: scale(1.05); }
.duo__text .small-caps { display: block; margin-bottom: 0.8rem; color: var(--accent-text); }
.duo__text .h2 { margin-bottom: 1rem; }
.duo__text p { color: var(--fg-2); max-width: 28rem; margin-bottom: 1.4rem; }

.cats { padding-top: 0; }

/* ---------- intention ---------- */
.intent__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2.4rem; }
.intent__stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.intent__stone { display: flex; gap: clamp(1.6rem, 3vw, 3rem); align-items: center; }
.intent__stone .h2 { font-style: italic; margin: 0.2rem 0 0.4rem; }
.intent__stone .zh { color: var(--accent-text); margin-bottom: 1rem; font-size: 1.1rem; }
.intent__stone .serif-line { margin-bottom: 1.6rem; max-width: 26rem; }
.intent__pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.intent__stage.is-changing .intent__stone, .intent__stage.is-changing .intent__pieces { opacity: 0; transform: translateY(8px); }
.intent__stone, .intent__pieces { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }

/* ---------- cut in light ---------- */
.cut__gem { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.cut__gem canvas { width: 100%; height: 100%; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.cut__gem.is-changing canvas { opacity: 0; transform: scale(0.96); }
.cut__gem figcaption { position: absolute; left: 0; right: 0; bottom: 2%; text-align: center; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-3); transition: opacity 0.7s var(--ease); }
.cut__gem figcaption em { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.02em; text-transform: none; color: var(--accent-text); }
.cut__gem.is-changing figcaption { opacity: 0; }
.cut .h1 { margin-bottom: 1.6rem; }
.cut .lede { margin-bottom: 2.4rem; }

.more { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ---------- story ---------- */
.story__img .arch__img { aspect-ratio: 4 / 5; max-width: 520px; }
.story__text p { color: var(--fg-2); margin-bottom: 1.3rem; max-width: 34rem; }
.story__text .h1 { margin-bottom: 2rem; }
.story__text .rule { margin: 2.4rem 0 2.4rem; max-width: 220px; }

/* ---------- community ---------- */
.dms__belt { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.dms__track { display: flex; gap: 1.6rem; width: max-content; animation: tick 60s linear infinite; padding: 1rem 0; }
.dms__belt:hover .dms__track { animation-play-state: paused; }
.dm { width: 210px; aspect-ratio: 9 / 16; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(228, 214, 188, 0.5)); display: grid; place-items: center; position: relative; box-shadow: 0 20px 40px rgba(80, 60, 30, 0.08); }
.dm::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 54px; height: 5px; border-radius: 3px; background: var(--line); }
.dm span { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--fg-3); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .hero { padding-top: calc(var(--header) + 1rem); }
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__gem { order: -1; max-width: 420px; margin-bottom: -1rem; }
    .intent__stage { grid-template-columns: minmax(0, 1fr); }
    .cut__gem { max-width: 380px; }
}
@media (max-width: 720px) {
    .duo__grid { grid-template-columns: minmax(0, 1fr); }
    .duo__panel--offset { margin-top: 0; }
    .intent__stone { flex-direction: column; text-align: center; }
    .intent__stone .medal { --size: 160px !important; }
    .intent__pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intent__pieces > :nth-child(3) { display: none; }
    .hero__scroll { display: none; }
    .dm { width: 160px; }
}

/* the stone, and where to see it */
.intent__live { border-left: 1px solid var(--line-2); padding-left: clamp(1.6rem, 4vw, 3rem); }
.intent__live .serif-line { margin-bottom: 1.8rem; max-width: 26rem; }
.live-band .live-hero__grid { align-items: center; }
.live-band .h1 { margin: 1.6rem 0 1.4rem; }
.live-band .lede { margin-bottom: 2.2rem; }
@media (max-width: 960px) { .intent__live { border-left: 0; padding-left: 0; text-align: center; } .intent__live .serif-line { margin-left: auto; margin-right: auto; } .intent__live .social-btns { justify-content: center; } }