/* ==========================================================================
   UMAPAN — archive stylesheet (v2: radically simplified)
   This is a legacy, read-only informational site -- no further updates are
   expected -- so the design favours plain, calm, typographic presentation
   over branding. Font Awesome (icons) and the site's original font stack
   are kept; everything else (colour palette, boxed panels, pill buttons,
   hero banner) has been dropped in favour of plain HTML-document styling.
   Grid class NAMES from the old fragment files (row, col-lg-6, table, etc.)
   are still re-implemented below so the ~80 existing PA/QM/EX/CM fragment
   files keep rendering correctly, unmodified.
   ========================================================================== */

:root{
  color-scheme: light;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --ink-softer: #808080;
  --line: #ddd;
  --paper: #ffffff;

  --sans: "Whitney Narrow Office A", "Whitney Narrow Office B", "Fira Sans Condensed", Arial, sans-serif;
  --measure: 640px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.2;
}

a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
a:hover, a:focus{ color: #000; }
p{ margin: 0 0 1em; max-width: 68ch; font-size: 17px; }
small{ color: var(--ink-softer); }
img{ max-width: 100%; display: block; }

/* ---------- layout helpers (replaces Bootstrap grid) -------------------- */
.container{ width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.container.less-pad{ padding-top: 8px; padding-bottom: 8px; }
.container.overflow-h{ overflow: hidden; }

.row{ display: flex; flex-wrap: wrap; gap: 40px; margin: 0 0 24px; }
.row.margin-bottom-20{ margin-bottom: 20px; }

[class*="col-"]{ flex: 1 1 280px; min-width: 0; }
[class*="col-lg-2"]{ flex-basis: 100px; flex-grow: 0; }
[class*="col-lg-3"]{ flex-basis: 200px; }
[class*="col-lg-5"]{ flex-basis: 320px; }
[class*="col-lg-6"]{ flex-basis: 380px; }
[class*="col-lg-7"]{ flex-basis: 460px; }
[class*="col-lg-8"]{ flex-basis: 560px; }

@media (max-width: 640px){ [class*="col-"]{ flex-basis: 100% !important; } }

/* ---------- header -------------------------------------------------------*/
.site-header{ border-bottom: 1px solid var(--line); }
.site-header .container{ display:flex; align-items:baseline; justify-content:space-between; padding-top: 28px; padding-bottom: 28px; }
.brand{ font-size: 1.1rem; text-decoration: none; letter-spacing: .01em; }
.brand b{ font-weight: 700; }
.archive-note{ color: var(--ink-softer); font-size: .85rem; }

/* ---------- intro / philosophy ------------------------------------------ */
.intro{ padding: 40px 0 8px; max-width: var(--measure); }
main .container{ max-width: var(--measure); }
.desc{ padding: 0; margin-bottom: 28px; }
.desc p{ font-size: 17px; }
blockquote{
  margin: 20px 0; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line);
  font-size: 1.15rem; line-height: 1.4; font-style: italic; color: var(--ink);
}
blockquote small{ display:block; margin-top:.4em; font-size: 80%; font-style: normal; }

ul.plain-list{ list-style: none; margin: 0 0 1.2em; padding: 0; }
ul.plain-list li{ padding: 4px 0 4px 24px; position: relative; font-size: 17px; }
ul.plain-list .fa-li{ position: absolute; left: 0; top: 6px; color: var(--ink-softer); font-size: .9em; }

/* ---------- document archive --------------------------------------------- */
.archive{ margin-top: 8px; }
.archive h2{ font-size: 1.05rem; margin: 34px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.archive h2:first-child{ margin-top: 0; }

ul.fa-ul{ list-style:none; margin:0; padding:0; }
ul.fa-ul li{ padding:5px 0 5px 24px; position:relative; font-size:.98rem; }
ul.fa-ul .fa-li{ position:absolute; left:0; top:7px; color: var(--ink-softer); font-size: .85em; }
.psuedolink{ cursor:pointer; text-decoration: underline; text-underline-offset: 2px; }
.psuedolink:hover{ color:#000; }

/* ---------- footer -------------------------------------------------------*/
.footer{ border-top: 1px solid var(--line); padding: 40px 0; margin-top: 56px; color: var(--ink-softer); }

/* =========================================================================
   MODAL (native <dialog>) — replaces Bootstrap modal + jQuery .load()
   ========================================================================= */
dialog#content-modal{
  border: 1px solid var(--line); padding: 0; width: min(760px, 94vw); max-height: 88vh;
  border-radius: 0; box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
dialog#content-modal::backdrop{ background: rgba(0,0,0,.45); }
#modal-body-inner{ max-height: 88vh; overflow-y: auto; }

.modal-dialog{ width:100%; }
.modal-content{ background:#fff; box-shadow:none; border:0; }
.modal-header, .modal-body, .modal-footer, .mod-foot{ padding: 22px 30px; position: relative; }
.modal-header{ border-bottom: 1px solid var(--line); }
.modal-header h4{ margin:0; font-size:1.15rem; font-weight: 700; }
.modal-header h5{ margin:0; color: var(--ink-softer); font-weight:400; font-size: .95rem; }
.modal-footer, .mod-foot{ border-top: 1px solid var(--line); text-align:right; }

.btn-x, .close{
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  width: 28px; height: 28px; border-radius: 0;
  font-size: .9rem; color: var(--ink); line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-x:hover, .close:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn-x.not-active{ visibility:hidden; }
.modal-header .btn-x{ position:absolute; top:16px; }
.modal-header .btn-x.cloz{ right:30px; }
.modal-header .btn-x.next{ right:58px; }
.modal-header .btn-x.prior{ right:86px; }

.btn-u{ background: var(--ink); color:#fff; border:0; font-size:14px; font-weight:400; padding:10px 18px; border-radius:0; cursor:pointer; }
.btn-u:hover{ background:#000; }

/* all the bespoke "brand" accent classes baked into the fragment files now
   resolve to plain ink/grey tones instead of navy/rose-gold/green */
.uma-blue, .uma-gold, .color-green{ color: var(--ink-softer); }
.whitesmoke{ background: transparent; }

/* factsheet (PA) specific */
.pa-header{ border-bottom: 1px solid var(--line); }
.pa-header h4{ font-size:1.2rem; font-weight:700; margin:0; }
.pa-header h5{ font-size:1rem; color: var(--ink-softer); font-weight:400; margin:.2em 0 0; }
table.table{ width:100%; border-collapse: collapse; font-size: .92rem; }
table.table th, table.table td{ padding: 7px 8px; border-bottom: 1px solid var(--line); text-align:left; }
table.table thead th{ font-weight:700; border-bottom: 2px solid var(--ink); }
.ind-bold{ font-weight:700; }
.factsheet-details p{ font-size:.95rem; color: var(--ink-soft); }
.factsheet-comments p{ font-size:.95rem; }
.pa-rt h6{ text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; color: var(--ink-softer); font-weight:700; margin: 18px 0 6px; }
/* charts have been removed from these fragments, so the two-column
   chart+table / commentary split no longer makes sense -- stack instead */
.pa-body .row{ display:block; }
.pa-body .row > [class*="col-"]{ width:100%; margin-bottom: 20px; }

/* memo (QM / EX / CM) specific */
.memo-body{ padding: 30px 34px; }
.extr-title{ text-align:center; margin: 24px 0 26px; }
.extr-title h1{ font-size:1.3rem; font-weight:700; }
.extr-title h2{ font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight:700; margin:.25em 0; }
.extr-title h3{ font-size:1.1rem; color: var(--ink-soft); font-weight:400; }
.extr-title h4{ text-transform:uppercase; color: var(--ink-softer); font-size:.85rem; letter-spacing:.04em; }
.memo-comments h5{ font-size:1.2rem; font-weight:700; padding: 16px 0 8px; }
.memo-comments p{ font-size:.98rem; padding-bottom: 14px; }
.memo-comments b{ font-weight:700; }
.memo-list li{ padding-bottom:8px; margin-bottom:8px; }
.memo-footnotes{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:.85rem; color: var(--ink-soft); }
.memo-footnotes p{ margin-bottom:.6em; }

@media (max-width:640px){
  .modal-header, .modal-body, .modal-footer, .mod-foot, .memo-body{ padding:16px; }
}