/* =========================================================================
   nelma.mondonomo.ai — research subdomain styles.
   Inherits brand tokens from ../colors_and_type.css. The nelma surface is
   the scholarly arm of the Mondonomo brand: heavy whitespace, paper-like,
   mono for technical terms, teal used as a brand-accent only.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: var(--font-fam);
  color: var(--font-color);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- layout ----------------------------------------------------------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 32px; }
.section { padding: 72px 0; }
.section.tight { padding: 40px 0; }
.section.dense { padding: 24px 0; }
.section.sunken { background: #f6f4ef; }
.section.ink { background: #011838; color: #f3eee2; }
.section.ink a { color: var(--color-brand); }

/* ---- top nav ---------------------------------------------------------- */
.nelma-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #ece4d0;
}
.nelma-nav .row {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 24px; max-width: 1280px; margin: 0 auto;
  flex-wrap: wrap;
}
.nelma-nav .brand {
  display: flex; align-items: center; gap: 10px;
  color: #011838; text-decoration: none;
  font-weight: 700; letter-spacing: -0.01em; font-size: 18px;
}
.nelma-nav .brand .mark { width: 26px; height: 26px; }
.nelma-nav .brand .nelma { color: var(--color-brand); font-weight: 700; }
.nelma-nav .brand .sub  { color: #6b7280; font-weight: 400; font-size: 13px; white-space: nowrap; }
.nelma-nav .spacer { flex: 1; }
.nelma-nav .links {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.nelma-nav .links a {
  font-size: 13px; font-weight: 500; color: #2f2f2f;
  padding: 8px 12px; text-decoration: none; border-radius: 4px;
  letter-spacing: -0.005em;
}
.nelma-nav .links a:hover { background: #f6f4ef; color: #011838; }
.nelma-nav .links a.on {
  color: var(--color-brand); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-brand);
}
.nelma-nav .links a .ix {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px; color: #9ca3af; margin-right: 4px;
}

/* ---- type primitives -------------------------------------------------- */
.eyebrow {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 14px;
}
.eyebrow.ink { color: #9aa4b8; }

h1.display {
  font-family: var(--font-fam);
  font-weight: 700; font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02; letter-spacing: -0.025em;
  color: #011838; margin: 0 0 28px;
}
h1.display b { color: var(--color-brand); font-weight: 700; }

h2.display {
  font-family: var(--font-fam);
  font-weight: 700; font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1; letter-spacing: -0.018em;
  color: #011838; margin: 0 0 12px;
}

h3.kicker {
  font-family: var(--font-fam);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; color: #011838;
  margin: 0 0 10px;
}

.lead {
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6;
  color: #2f2f2f; max-width: 720px;
}

.label {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6b7280;
}

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; border: 0;
  text-decoration: none; transition: all .2s var(--bez);
}
.btn.primary { background: var(--color-brand); color: #fff; }
.btn.primary:hover { background: #019b9b; }
.btn.dark { background: #011838; color: #fff; }
.btn.dark:hover { background: #0a2552; }
.btn.ghost { background: transparent; color: #011838; border: 1px solid #d9d2c0; }
.btn.ghost:hover { background: #f6f4ef; }
.btn.sm { padding: 8px 14px; font-size: 12px; }

/* ---- model card (used on landing + as in-page header card) ----------- */
.model-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .model-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .model-grid { grid-template-columns: 1fr; } }
.model-card {
  background: #fff; border: 1px solid #ece4d0;
  padding: 24px 24px 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: all .25s var(--bez);
  border-top: 3px solid var(--color-brand);
  min-height: 200px;
}
.model-card:hover { box-shadow: 0 10px 30px rgba(1,24,56,.08); transform: translateY(-2px); }
.model-card .num {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 12px; color: #9ca3af; letter-spacing: 0.04em;
}
.model-card .title {
  font-weight: 700; font-size: 22px; color: #011838;
  letter-spacing: -0.012em; line-height: 1.15; margin: 0;
}
.model-card .blurb {
  font-size: 14px; line-height: 1.55; color: #4b5563; flex: 1;
}
.model-card .meta {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--color-brand);
  display: flex; gap: 8px; margin-top: 8px;
}
.model-card .meta .arrow { margin-left: auto; color: #011838; font-weight: 700; }

/* ---- demo panel (each model page) ------------------------------------ */
.demo {
  background: #fff;
  border: 1px solid #ece4d0;
  border-top: 3px solid var(--color-brand);
  padding: 28px 28px 32px;
}
.demo h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: #011838; letter-spacing: -0.01em; }
.demo .input-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.demo .input-row input,
.demo .input-row select {
  flex: 1; min-width: 240px;
  font-family: var(--font-fam); font-size: 18px;
  padding: 14px 16px; border: 1px solid #d9d2c0;
  background: #fafaf8; color: #011838; outline: none;
}
.demo .input-row input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(2,185,185,.18); }
.demo .input-row input::placeholder { color: #9ca3af; }
.demo .input-row .btn { flex-shrink: 0; }

.demo .examples {
  margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.demo .examples .label { margin-right: 6px; }
.demo .examples button {
  background: #f6f4ef; border: 1px solid #ece4d0;
  padding: 5px 11px; font-size: 13px;
  font-family: inherit; cursor: pointer; color: #2f2f2f;
  transition: all .15s var(--bez);
}
.demo .examples button:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

.demo .output {
  margin-top: 22px; padding: 22px 24px;
  background: #fafaf8; border: 1px solid #ece4d0; border-left: 3px solid var(--color-brand);
  font-family: var(--font-fam); color: #011838;
  min-height: 80px;
}
.demo .output .placeholder { color: #9ca3af; font-style: italic; font-size: 14px; }
.demo .output .loading {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7280;
}
.demo .output .loading::before {
  content: ''; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #ece4d0; border-top-color: var(--color-brand);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.demo .ipa {
  font-family: 'Noto Sans Mono', 'Charis SIL', 'Doulos SIL', ui-monospace, monospace;
  font-size: 28px; color: #011838; letter-spacing: 0.01em;
}

/* ---- spec table / facts / api ---------------------------------------- */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 40px; }
@media (max-width: 760px) { .specs { grid-template-columns: 1fr; } }
.spec-block h4 {
  font-size: 13px; font-weight: 700; color: var(--color-brand);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px;
}
.spec-block dl { margin: 0; }
.spec-block dt {
  font-size: 13px; color: #6b7280;
  border-top: 1px solid #ece4d0;
  padding: 10px 0 2px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.spec-block dd {
  margin: 0 0 6px;
  font-size: 15px; color: #011838; font-weight: 500;
}
.spec-block dl:last-child dd:last-child, .spec-block dl > *:last-child {
  border-bottom: 1px solid #ece4d0; padding-bottom: 10px;
}

.code-block {
  font-family: 'Noto Sans Mono', ui-monospace, 'SF Mono', monospace;
  background: #011838; color: #d9e2f0;
  padding: 22px 24px; font-size: 13px; line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
}
.code-block .c-key { color: #ffd479; }
.code-block .c-str { color: #9af0b7; }
.code-block .c-num { color: #ffb86c; }
.code-block .c-com { color: #6b7280; font-style: italic; }

.callout {
  background: #f6f4ef; border-left: 3px solid var(--color-brand);
  padding: 18px 22px; font-size: 14px; line-height: 1.6;
  color: #2f2f2f;
}
.callout strong { color: #011838; }

/* ---- IPA / transliteration table treatments -------------------------- */
.translit-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.translit-table td {
  padding: 11px 14px; border-bottom: 1px solid #ece4d0;
  font-size: 16px; vertical-align: middle;
}
.translit-table td.lang { font-size: 12px; color: #6b7280; width: 110px; font-family: 'Noto Sans Mono', monospace; }
.translit-table td.lang img { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.translit-table td.name { color: #011838; font-weight: 500; }
.translit-table td.ipa { color: var(--color-brand); font-family: 'Noto Sans Mono', monospace; font-size: 14px; }

/* ---- mission/feature blocks ------------------------------------------ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; gap: 24px; } }
.feature h3 {
  font-size: 18px; font-weight: 700; color: #011838;
  margin: 0 0 10px; letter-spacing: -0.005em;
}
.feature p { font-size: 14.5px; line-height: 1.55; color: #4b5563; margin: 0; }
.feature .stat {
  font-family: var(--font-fam); font-weight: 700;
  font-size: 40px; color: var(--color-brand);
  letter-spacing: -0.02em; line-height: 1; margin: 0 0 8px;
}

/* ---- footer ----------------------------------------------------------- */
.nelma-footer {
  background: #011838; color: #d9d2c0;
  padding: 56px 32px 24px; margin-top: 56px;
  border-top: 4px solid var(--color-brand);
}
.nelma-footer .grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 800px) { .nelma-footer .grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.nelma-footer h4 {
  font-size: 11px; font-weight: 700; color: var(--color-brand);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px;
}
.nelma-footer ul { list-style: none; margin: 0; padding: 0; }
.nelma-footer ul li { margin-bottom: 6px; }
.nelma-footer a { color: #d9d2c0; text-decoration: none; font-size: 13px; }
.nelma-footer a:hover { color: var(--color-brand); }
.nelma-footer .legal {
  max-width: 1100px; margin: 36px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #6b7280;
}
.nelma-footer .legal a { font-size: 11px; }

/* demo output blocks (Task A4) */
.demo .chip { display:inline-block; padding:4px 8px; margin:2px; background:#e8f7f6; border:1px solid var(--color-brand-soft); font-size:13px; }
.demo .chip b { color:var(--color-brand); font-weight:700; margin-right:6px; }
.demo .parse-result .meta { font-family:'Noto Sans Mono', monospace; font-size:11px; color:#6b7280; letter-spacing:0.06em; margin-bottom:6px; }
.demo .tokens { line-height:1.8; }
.demo .placeholder { color:#9ca3af; font-style:italic; }
.demo .loading { color:var(--color-brand); }

/* dflip flipbook gallery on onomastics.html (Task B3) */
.paper-card { background:#fff; border:1px solid #ece4d0; padding:24px; margin:24px 0; }
.paper-card h3 { color:#011838; font-weight:700; letter-spacing:-0.01em; }
.paper-card ._df_book { margin-top:12px; }