/* ── Hero ──────────────────────────────────────────────────────────────────── */
.nara-hero {
    position: relative; overflow: hidden;
    min-height: 560px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.nara-hero__lettermark {
    position: absolute; right: -0.1em; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-serif); font-size: clamp(18rem, 40vw, 38rem);
    font-weight: 700; color: var(--color-faint);
    line-height: 1; pointer-events: none; user-select: none;
    z-index: 0;
}
.nara-hero__content {
    position: relative; z-index: 1;
    padding-block: clamp(4rem, 10vw, 8rem);
}
.nara-hero__headline {
    font-size: clamp(3rem, 7vw, 6rem); font-weight: 700;
    margin-top: 1rem; margin-bottom: 1.5rem; max-width: 14ch;
}
.nara-hero__body {
    max-width: 40ch; color: var(--color-muted);
    margin-bottom: 2.5rem; font-size: 1rem;
}
.nara-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.nara-hero__meta {
    display: flex; gap: 2rem; flex-wrap: wrap;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-muted);
}
.nara-hero__meta span::before { content: '— '; }

/* ── Category grid ─────────────────────────────────────────────────────────── */
.nara-categories { padding-block: 5rem; border-bottom: 1px solid var(--color-border); }
.nara-categories__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.nara-cat-card { display: flex; flex-direction: column; gap: 0.75rem; }
.nara-cat-card__image {
    aspect-ratio: 1; overflow: hidden;
    background: var(--color-faint);
}
.nara-cat-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 400ms ease;
}
.nara-cat-card:hover .nara-cat-card__image img { transform: scale(1.04); }
.nara-cat-card__name {
    font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
}
.nara-cat-card__count { font-size: 0.72rem; color: var(--color-muted); }

/* ── Featured section ──────────────────────────────────────────────────────── */
.nara-featured { padding-block: 5rem; border-bottom: 1px solid var(--color-border); }
.nara-featured__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top: 0.75rem; margin-bottom: 3rem;
}
.nara-product-grid { display: grid; gap: 1.5rem; }
.nara-product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nara-featured__cta { text-align: center; margin-top: 3rem; }

/* ── Marquee ───────────────────────────────────────────────────────────────── */
.nara-marquee {
    overflow: hidden; border-block: 1px solid var(--color-border);
    padding-block: 1.25rem;
}
.nara-marquee__track {
    display: flex; gap: 2rem; align-items: center;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.nara-marquee:hover .nara-marquee__track { animation-play-state: paused; }
.nara-marquee__item {
    font-family: var(--font-serif); font-size: 1.1rem;
    white-space: nowrap;
}
.nara-marquee__sep { color: var(--color-muted); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── How It Works ──────────────────────────────────────────────────────────── */
.nara-how {
    background: var(--color-black); color: var(--color-white);
    padding-block: 6rem;
}
.nara-how .eyebrow { color: rgba(255,255,255,0.45); }
.nara-how h2 {
    font-size: clamp(2rem, 4vw, 3rem); margin-top: 1rem; margin-bottom: 4rem;
    color: var(--color-white);
}
.nara-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.nara-how__num {
    font-family: var(--font-serif); font-size: 3rem; font-weight: 700;
    color: rgba(255,255,255,0.15); display: block; margin-bottom: 1rem;
}
.nara-how__step h3 {
    font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem;
    color: var(--color-white);
}
.nara-how__step p { color: rgba(255,255,255,0.55); font-size: 0.9rem; }

/* ── Homepage responsive ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .nara-categories__grid { grid-template-columns: repeat(3, 1fr); }
    .nara-how__steps { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
    .nara-categories__grid { grid-template-columns: repeat(2, 1fr); }
    .nara-hero__headline { font-size: clamp(2.2rem, 10vw, 3rem); }
    .nara-hero__meta { flex-direction: column; gap: 0.5rem; }
}