/* ==========================================================================
   EZ MODEL — Natalia's Stories
   Reading experience: prose + a grammar/vocab/song side panel per story.
   Built on the core tokens (main.css).
   ========================================================================== */

.ns-hero { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; isolation: isolate; }
.ns-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(224, 151, 92, 0.20), transparent 55%),
    radial-gradient(120% 100% at 88% 20%, rgba(167, 155, 200, 0.18), transparent 55%),
    linear-gradient(180deg, var(--charcoal-950), var(--charcoal-900));
}
.ns-hero .lede { max-width: 52ch; }
.ns-hero__stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.ns-hero__stats .chip strong { color: var(--gold-bright); font-family: var(--font-display); }

/* Index of stories */
.ns-index-wrap { position: sticky; top: 66px; z-index: 15; background: linear-gradient(180deg, var(--charcoal-950) 70%, transparent); padding: 0.9rem 0; }
.ns-index { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
.ns-index__item {
  flex: 0 0 auto; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.82rem;
  background: var(--card); border: 1px solid var(--card-border); color: var(--cream-dim);
  white-space: nowrap; transition: all 0.2s var(--ease-out);
}
.ns-index__item:hover { color: var(--cream); border-color: var(--gold); }

/* One story */
.ns-story { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--card-border); scroll-margin-top: 120px; }
.ns-story:first-child { border-top: none; }
.ns-story__title { margin: 0.3rem 0 0.9rem; }
.ns-domains { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ns-domain {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.75rem; border-radius: 999px;
  font-size: 0.8rem; color: var(--cream-dim);
  background: color-mix(in oklab, var(--dc) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--dc) 40%, transparent);
}
.ns-domain .ez-icon { width: 15px; height: 15px; color: var(--dc); }
.ns-domain--primary { color: var(--cream); font-weight: 500; background: color-mix(in oklab, var(--dc) 22%, transparent); }

.ns-story__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2rem; align-items: start; }
@media (max-width: 860px) { .ns-story__grid { grid-template-columns: 1fr; } }

.ns-prose p { font-size: 1.08rem; line-height: 1.85; color: var(--cream-soft); margin: 0 0 1.1rem; }
.ns-prose__q { color: var(--gold-bright); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; }

/* Side panel */
.ns-side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 1.4rem; }
@media (max-width: 860px) { .ns-side { position: static; } }
.ns-side__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.6rem; }

.ns-song { padding: 1.2rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(207,168,94,0.14), rgba(63,163,150,0.10)); border: 1px solid var(--glass-border); }
.ns-song__btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.ns-song__btn .ez-icon { width: 18px; height: 18px; }
.ns-song__todo { color: var(--cream-dim); font-size: 0.92rem; margin: 0; }

.ns-grammar { padding: 1.2rem; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--card-border); }
.ns-grammar__title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--teal-bright); margin: 0 0 0.8rem; }
.ns-grammar__title .ez-icon { width: 20px; height: 20px; }
.ns-grammar__rule { font-weight: 600; color: var(--cream); margin: 0.9rem 0 0.3rem; font-size: 0.95rem; }
.ns-grammar__note { color: var(--cream-dim); font-size: 0.9rem; margin: 0.2rem 0; }
.ns-grammar__ex { list-style: none; padding: 0; margin: 0.3rem 0 0.5rem; }
.ns-grammar__ex li { position: relative; padding-left: 1.1rem; color: var(--cream-soft); font-size: 0.92rem; margin: 0.3rem 0; }
.ns-grammar__ex li::before { content: "“"; position: absolute; left: 0; color: var(--gold); font-family: var(--font-display); }

.ns-vocab__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; }
.ns-vocab__list dt { font-weight: 600; color: var(--gold-bright); font-size: 0.9rem; }
.ns-vocab__list dd { margin: 0; color: var(--cream-dim); font-size: 0.9rem; }

/* Activities */
.ns-activities { margin-top: 2rem; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.ns-activities summary { cursor: pointer; padding: 1rem 1.3rem; font-weight: 500; color: var(--cream); list-style: none; }
.ns-activities summary::-webkit-details-marker { display: none; }
.ns-activities summary::before { content: "＋ "; color: var(--gold); }
.ns-activities[open] summary::before { content: "－ "; }
.ns-activities__body { padding: 0 1.3rem 1.3rem; }
.ns-activities__body h3 { font-size: 0.95rem; color: var(--teal-bright); margin: 1.2rem 0 0.4rem; }
.ns-questions { color: var(--cream-soft); padding-left: 1.2rem; }
.ns-questions li { margin: 0.35rem 0; }
.ns-empty { text-align: center; color: var(--cream-dim); padding: 3rem 0; }