/* ═══════════════════════════════════════════════════════════════════
   HUMAN CRAFT   (pairs with js/craft.js)
   Four chapters, left to right: AI draft, human edit, human design,
   your approval. Each card's overlay plays when the card arrives.
   Fail-open: overlays render in their finished state without JS.
   ═══════════════════════════════════════════════════════════════════ */
.cr {
    --cr-ink: #132019;
    --cr-body: rgba(19, 32, 25, 0.72);
    --cr-gold: #D5B473;
    --cr-gold-ink: #7C6432;
    --cr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    padding: clamp(6rem, 12vh, 9rem) 0;
    background:
        radial-gradient(ellipse 50% 40% at 85% 10%, rgba(213, 180, 115, 0.16), transparent 70%),
        linear-gradient(180deg, #F6F1E7 0%, #F1EBDF 100%);
    color: var(--cr-ink);
    overflow: hidden;
    overflow: clip;
}
.cr-shell { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.cr-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-title {
    margin: 1.5rem 0 0;
    font: 700 clamp(2.2rem, 4.8vw, 4rem)/1.08 'Playfair Display', Georgia, serif;
    letter-spacing: -0.02em;
}
.cr-title em { font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif; font-weight: 400; color: var(--cr-gold-ink); }
.cr-lede { margin: 1.2rem 0 0; max-width: 36rem; color: var(--cr-body); font: 400 clamp(1.02rem, 1.4vw, 1.2rem)/1.55 'Plus Jakarta Sans', system-ui, sans-serif; }

/* the thread the story runs along */
.cr-track {
    position: relative;
    height: 1px;
    margin: clamp(3.5rem, 7vw, 5rem) 12.5% 0;
    background: rgba(124, 100, 50, 0.3);
    overflow: hidden;
    overflow: clip;
}
.cr-track i {
    position: absolute; top: 0; left: 0;
    width: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cr-gold-ink), transparent);
    transform: translate3d(-100%, 0, 0);
}
[data-cr-live] .cr-track i, .cr[data-cr-live] .cr-track i { animation: cr-run 5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes cr-run { 0% { transform: translate3d(-100%, 0, 0); } 75%, 100% { transform: translate3d(640%, 0, 0); } }

.cr-story {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
.cr-ch { position: relative; padding-top: 2rem; }
.cr-ch::before {
    /* node on the thread */
    content: "";
    position: absolute;
    top: -6px; left: 50%;
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: #F6F1E7;
    border: 1.5px solid var(--cr-gold-ink);
}
.cr-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    overflow: clip;
    background: #2A3226;
    box-shadow: 0 30px 60px -36px rgba(20, 28, 22, 0.55);
}
.cr-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--cr-ease); }
.cr-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 11, 0) 40%, rgba(10, 14, 11, 0.45) 100%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .cr-ch:hover .cr-media img { transform: scale(1.04); } }
.cr-n { display: block; margin-top: 1.25rem; color: var(--cr-gold-ink); font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.22em; }
.cr-ch h3 { margin: 0.55rem 0 0.4rem; font: 700 clamp(1.3rem, 1.8vw, 1.55rem)/1.2 'Playfair Display', Georgia, serif; }
.cr-ch p { margin: 0; color: var(--cr-body); font: 400 0.98rem/1.5 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ── Overlays ────────────────────────────────────────────────────── */
.cr-ui {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 2;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cr-ui-tag {
    display: inline-flex; align-items: center; gap: 0.5em;
    align-self: flex-start;
    color: var(--cr-gold-ink);
    font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cr-line { display: block; height: 5px; width: var(--w); border-radius: 3px; background: rgba(19, 32, 25, 0.16); transform-origin: 0 50%; }
.cr-text { font: 500 0.82rem/1.3 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--cr-ink); }
.cr-text s { text-decoration-color: #B4573A; text-decoration-thickness: 1.5px; color: rgba(19, 32, 25, 0.5); }
.cr-ins { color: var(--cr-gold-ink); font-style: italic; }
.cr-check { display: inline-flex; align-items: center; gap: 0.45em; color: #2F6B4F; font: 600 0.72rem/1 'Plus Jakarta Sans', system-ui, sans-serif; }
.cr-frame { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 58px; }
.cr-frame i { border-radius: 6px; background: linear-gradient(135deg, #D5B473, #9A7431); }
.cr-frame i:first-child { grid-row: span 2; background: linear-gradient(135deg, #45523E, #22302A); }
.cr-frame i:nth-child(3) { background: linear-gradient(135deg, #F0E6D2, #D9CBB0); }
.cr-swatches { display: flex; gap: 5px; }
.cr-swatches i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.2); }
.cr-swatches i:nth-child(1) { background: #132019; }
.cr-swatches i:nth-child(2) { background: #45523E; }
.cr-swatches i:nth-child(3) { background: #D5B473; }
.cr-swatches i:nth-child(4) { background: #FAF9F6; }
.cr-ui--approve { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; align-items: center; gap: 0.75rem; }
.cr-stamp {
    padding: 0.5em 1em;
    border: 2px solid #D5B473;
    border-radius: 10px;
    color: #F6E7C1;
    background: rgba(19, 32, 25, 0.7);
    font: 700 0.95rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transform: rotate(-6deg);
}
.cr-live {
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.55em 0.9em;
    border-radius: 999px;
    background: #fff;
    color: var(--cr-ink);
    font: 600 0.75rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
}
.cr-live i { width: 7px; height: 7px; border-radius: 50%; background: #2F9E6B; box-shadow: 0 0 0 3px rgba(47, 158, 107, 0.2); }

/* ── Motion (armed by JS, released per card on arrival) ──────────── */
[data-cr="armed"] .cr-ch { opacity: 0; transform: translate3d(0, 28px, 0); }
.cr-ch { transition: opacity 800ms var(--cr-ease) calc(var(--i) * 140ms), transform 900ms var(--cr-ease) calc(var(--i) * 140ms); }
[data-cr="armed"] .cr-line { transform: scaleX(0); }
.cr-line { transition: transform 700ms var(--cr-ease); }
.cr-line:nth-of-type(2) { transition-delay: 0.6s; } .cr-line:nth-of-type(3) { transition-delay: 0.8s; }
.cr-line:nth-of-type(4) { transition-delay: 1s; } .cr-line:nth-of-type(5) { transition-delay: 1.2s; }
[data-cr="armed"] .cr-text s { text-decoration-color: transparent; }
.cr-text s { transition: text-decoration-color 400ms ease 1.6s, color 400ms ease 1.6s; }
[data-cr="armed"] .cr-ins, [data-cr="armed"] .cr-check { opacity: 0; transform: translate3d(0, 6px, 0); }
.cr-ins { transition: opacity 500ms var(--cr-ease) 2s, transform 600ms var(--cr-ease) 2s; }
.cr-check { transition: opacity 500ms var(--cr-ease) 2.4s, transform 600ms var(--cr-ease) 2.4s; }
[data-cr="armed"] .cr-frame i, [data-cr="armed"] .cr-swatches i { opacity: 0; transform: scale(0.6); }
.cr-frame i, .cr-swatches i { transition: opacity 400ms var(--cr-ease), transform 600ms var(--cr-ease); }
.cr-frame i:nth-child(1) { transition-delay: 2.2s; } .cr-frame i:nth-child(2) { transition-delay: 2.35s; } .cr-frame i:nth-child(3) { transition-delay: 2.5s; }
.cr-swatches i:nth-child(1) { transition-delay: 2.7s; } .cr-swatches i:nth-child(2) { transition-delay: 2.78s; }
.cr-swatches i:nth-child(3) { transition-delay: 2.86s; } .cr-swatches i:nth-child(4) { transition-delay: 2.94s; }
[data-cr="armed"] .cr-stamp { opacity: 0; transform: rotate(-6deg) scale(1.8); }
.cr-stamp { transition: opacity 240ms ease 3.3s, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s; }
[data-cr="armed"] .cr-live { opacity: 0; transform: translate3d(0, 8px, 0); }
.cr-live { transition: opacity 500ms var(--cr-ease) 3.8s, transform 600ms var(--cr-ease) 3.8s; }
[data-cr-live] .cr-live i { animation: cr-pulse 1.8s ease-in-out infinite; }
@keyframes cr-pulse { 50% { box-shadow: 0 0 0 7px rgba(47, 158, 107, 0); } }

@media (max-width: 1023px) {
    .cr-story { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
    .cr-track { display: none; }
    .cr-ch::before { display: none; }
    .cr-ch { padding-top: 0; }
}
@media (max-width: 639px) {
    .cr-shell { padding: 0 1.25rem; }
    .cr-story { grid-template-columns: 1fr 1fr; gap: 0.9rem; row-gap: 2rem; }
    .cr-ui { left: 8px; right: 8px; bottom: 8px; padding: 0.65rem 0.7rem; }
    .cr-text { font-size: 0.7rem; }
    .cr-ch h3 { font-size: 1.1rem; }
    .cr-ch p { font-size: 0.88rem; }
    .cr-stamp { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cr *, .cr *::before, .cr *::after { animation: none !important; transition: none !important; }
}