/* ══════════════════════════════════════════════════════════════════════
   Narrative profile dialog (Katha story page)
   ----------------------------------------------------------------------
   An editorial read of the manuscript, not a dashboard of coloured pills.
   Site language: Satoshi, sand #e8d5b7, hairlines, 6px radius, one accent.
   Maturity is shown as a meter in the same sand as everything else; the
   colour never carries meaning on its own (the number is always printed).
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:NpSatoshi;src:url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:NpSatoshi;src:url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:NpSatoshi;src:url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}

.np-overlay{
  --np-sand:#e8d5b7;
  --np-text:#efe9dc;
  --np-text-2:rgba(239,233,220,.74);
  --np-text-3:rgba(239,233,220,.52);
  --np-line:rgba(232,213,183,.16);
  --np-line-2:rgba(232,213,183,.09);
  --np-fill:rgba(232,213,183,.045);
  display:none;position:fixed;inset:0;z-index:9999;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(8,8,7,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:clamp(10px,3vw,40px) 12px;
  font-family:NpSatoshi,system-ui,sans-serif;
}
.np-overlay.is-open{display:block}

.np-dialog{
  position:relative;max-width:920px;margin:0 auto;
  padding:clamp(28px,5vw,56px);
  background:#0e0d0b;border:1px solid var(--np-line);border-radius:6px;color:var(--np-text);
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  animation:npIn .4s cubic-bezier(.16,1,.3,1) both;
}
.np-dialog:focus{outline:none}
@keyframes npIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.np-close{
  position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--np-line);border-radius:6px;background:transparent;color:var(--np-text);cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.np-close:hover{border-color:var(--np-sand);background:var(--np-fill)}
.np-close:focus-visible{outline:2px solid var(--np-sand);outline-offset:3px}

.np-head{padding-right:56px;margin-bottom:clamp(28px,4vw,44px)}
.np-title{margin:0;font-weight:500;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.05em;line-height:1.05;color:var(--np-text)}
.np-sub{margin:.75rem 0 0;color:var(--np-text-3);font-size:.9375rem;max-width:52ch}

.np-label{margin:0 0 .85rem;color:var(--np-text-3);font-size:.8125rem;font-weight:500;letter-spacing:.02em}
.np-block{margin:0 0 clamp(28px,4vw,44px)}
.np-block:last-child{margin-bottom:0}

.np-synopsis{margin:0;max-width:62ch;color:var(--np-text);font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.6;letter-spacing:-.01em}

/* Maturity + tags in one ruled panel */
.np-panel{display:grid;grid-template-columns:1fr;border:1px solid var(--np-line-2);border-radius:6px;background:var(--np-fill)}
.np-cell{padding:clamp(20px,3vw,28px);min-width:0}
@media(min-width:760px){
  .np-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .np-cell + .np-cell{border-left:1px solid var(--np-line-2)}
}
@media(max-width:759px){.np-cell + .np-cell{border-top:1px solid var(--np-line-2)}}

.np-score{display:flex;align-items:baseline;gap:.4rem;margin:0 0 .9rem;color:var(--np-text);line-height:1}
.np-score-n{font-size:3.5rem;font-weight:500;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.np-score-of{color:var(--np-text-3);font-size:1.125rem;font-weight:500}
.np-meter{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:0 0 1.25rem}
.np-meter i{display:block;height:4px;border-radius:1px;background:var(--np-line-2)}
.np-meter i.is-on{background:var(--np-sand)}
.np-reasons{list-style:none;margin:0;padding:0}
.np-reasons li{padding:.6rem 0;border-top:1px solid var(--np-line-2);color:var(--np-text-2);font-size:.9375rem;line-height:1.5}
.np-reasons li:first-child{border-top:0;padding-top:0}

.np-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.np-tag{display:inline-flex;align-items:center;min-height:2rem;padding:0 .75rem;border:1px solid var(--np-line);border-radius:6px;color:var(--np-text-2);font-size:.875rem;font-weight:500}
.np-tag::before{content:'#';color:var(--np-sand);margin-right:.1rem}

/* Characters */
.np-chars{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.np-chars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.np-char{padding:clamp(18px,2.6vw,24px);border:1px solid var(--np-line-2);border-radius:6px;min-width:0}
.np-char-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem .75rem;margin-bottom:.6rem}
.np-char-name{font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;color:var(--np-text);overflow-wrap:anywhere}
.np-role{color:var(--np-sand);font-size:.8125rem;font-weight:500}
.np-char-growth{margin:0;color:var(--np-text-2);font-size:.9688rem;line-height:1.6}
.np-traits{display:flex;flex-wrap:wrap;gap:6px;margin:1rem 0 0;padding:0;list-style:none}
.np-trait{padding:.2rem .6rem;border:1px solid var(--np-line-2);border-radius:6px;color:var(--np-text-3);font-size:.8125rem;font-weight:500}

/* Themes: ruled rows */
.np-themes{margin:0;padding:0;list-style:none;border-top:1px solid var(--np-line)}
.np-theme{display:grid;gap:.35rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--np-line-2)}
@media(min-width:760px){.np-theme{grid-template-columns:minmax(0,2fr) minmax(0,5fr)}}
.np-theme-name{margin:0;color:var(--np-text);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.np-theme-body{margin:0;color:var(--np-text-2);font-size:.9688rem;line-height:1.65}

.np-foot{margin:clamp(32px,5vw,52px) 0 0;padding-top:1.5rem;border-top:1px solid var(--np-line-2);color:var(--np-text-3);font-size:.8125rem}

/* Loading + failure */
.np-skel{display:grid;gap:12px}
.np-skel span{display:block;height:.9rem;border-radius:3px;background:linear-gradient(100deg,rgba(232,213,183,.05) 30%,rgba(232,213,183,.12) 50%,rgba(232,213,183,.05) 70%);background-size:200% 100%;animation:npShimmer 1.4s linear infinite}
.np-skel span:nth-child(1){width:92%}.np-skel span:nth-child(2){width:84%}.np-skel span:nth-child(3){width:64%}
.np-skel .np-skel-block{height:7rem;margin-top:1.5rem}
@keyframes npShimmer{to{background-position:-200% 0}}
.np-status{margin:1.25rem 0 0;color:var(--np-text-3);font-size:.875rem}

.np-error{padding:clamp(22px,3vw,32px);border:1px solid rgba(224,104,92,.35);border-left:2px solid #e0685c;border-radius:6px;background:rgba(224,104,92,.05)}
.np-error h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--np-text)}
.np-error p{margin:0 0 1.25rem;color:var(--np-text-2);line-height:1.6;max-width:56ch}
.np-error-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.25rem;border:0;border-radius:6px;background:var(--np-sand);color:#1a1915;font:inherit;font-weight:700;cursor:pointer}
.np-error-btn:hover{background:#f0e1c6}
.np-error-btn:focus-visible{outline:2px solid var(--np-sand);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .np-dialog{animation:none}
  .np-skel span{animation:none}
  .np-close{transition:none}
}
@media print{.np-overlay{display:none!important}}