/* Kiara World content pages (/stories/, /characters/), added 2026-10-24.
   Builds on tokens.css + style.css; only new classes live here. */
.navlink[aria-current="page"] { color: var(--accent); }
.kw-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) 0 clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.kw-hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(circle, var(--pink-400), transparent 70%); top: -140px; right: -100px; z-index: 0; }
.kw-hero .wrap { position: relative; z-index: 1; max-width: 60rem; }
.kw-hero h1 { font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.6rem); letter-spacing: -.02em; margin-top: .4rem; }
.kw-hero h1 .grad { background: linear-gradient(120deg, var(--pink-500), var(--gold-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kw-hero .lead { font-size: var(--text-lead); color: var(--text); font-weight: 700; margin: 1rem 0 .6rem; max-width: 48ch; }
.kw-sub { color: var(--text-soft); max-width: 56ch; margin-bottom: 1.6rem; }
.kw-section { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }
.kw-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.kw-grid--shorts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.kw-card { background: var(--bg-elev); border: 1px solid var(--surface-ring); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; }
.kw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kw-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-sunk); }
.kw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kw-play { position: absolute; inset: auto .7rem .7rem auto; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 1rem; box-shadow: var(--shadow-md); }
.kw-thumb:focus-visible, .kw-body a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.kw-body { padding: 1rem 1.1rem 1.2rem; }
.kw-body h3 { font-size: 1.08rem; line-height: 1.25; }
.kw-body h3 a { color: inherit; text-decoration: none; }
.kw-body h3 a:hover { color: var(--accent); }
.kw-body p { color: var(--text-soft); font-size: .93rem; margin-top: .4rem; }
.kw-egypt { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); counter-reset: none; }
.kw-egypt li { background: linear-gradient(160deg, var(--bg-elev), var(--bg-sunk)); border: 1px solid var(--surface-ring);
  border-left: 5px solid var(--gold-500); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; }
.kw-egypt h3 { font-size: 1.1rem; margin: .3rem 0 .35rem; }
.kw-egypt p { color: var(--text-soft); font-size: .93rem; }
.kw-num { font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); }
.kw-callout { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; background: var(--bg-elev);
  border: 1px solid var(--surface-ring); border-radius: var(--radius-lg); padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); box-shadow: var(--shadow-md); }
.kw-callout h2 { font-size: var(--text-h2); margin: .3rem 0 .5rem; }
.kw-callout p { color: var(--text-soft); max-width: 52ch; }
.kw-cast { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.kw-person { display: flex; gap: 1rem; align-items: flex-start; background: var(--bg-elev); border: 1px solid var(--surface-ring);
  border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-sm); scroll-margin-top: 5rem; }
.kw-portrait { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2.2rem;
  background: linear-gradient(140deg, var(--pink-200), var(--gold-300)); }
.kw-person h3 { font-size: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kw-role { font-family: var(--font-display); color: var(--accent); font-size: .9rem; margin: .1rem 0 .4rem; }
.kw-person p:last-child { color: var(--text-soft); font-size: .95rem; }
.kw-soon { font-family: var(--font-body); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold-300); color: var(--plum); border-radius: 999px; padding: .2em .65em; }
.kw-brandline { flex-basis: 100%; color: var(--text-soft); font-size: .92rem; margin-bottom: .4rem; }
@media (prefers-reduced-motion: reduce) { .kw-card { transition: none; } .kw-card:hover { transform: none; } }