:root {
  --bg: #ffffff;
  --text: #1d1d1b;
  --muted: #6b6b6b;
  --accent: #3f51b5;
  --max-width: 950px;
}

@font-face {
  font-family: "U8FontLight";
  src: url("/fonts/U8-Light-web.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "U8FontBold";
  src: url("/fonts/U8-Bold-web.woff") format('woff');
  font-weight: normal;
  font-style: bold;
  font-display: swap;
}

/* Box sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "U8FontLight";
  /*font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;*/
  line-height: 1.65;
  font-size: 1rem;
}

/* Main container */
.container {
  max-width: var(--max-width);
  margin: 0 auto; /* centers container */
  padding: 4rem 1.5rem 6rem;
  text-align: justify; /* justified body text */
}

/* Headline */
h1 {
  /*font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;*/
  font-family: "U8FontBold";
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  text-align: center; /* center h1 */
}

/* Small divider under headline */
.h1-divider {
  width: 48px;
  height: 2px;
  background-color: var(--text);
  margin: 0.5rem auto 2rem auto; /* center divider */
}

/* Registerded TM symbol positioning - HTML entity ® */
.sub {
  vertical-align: sub;
  font-size: 0.8em;
}

/* ALIGNMENT */
.auto-align {
  text-align: auto;
}
.center-align {
  text-align: center;
}
.justify-align {
  text-align: justify;
}
.none-align {
  text-align: none;
}
.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
/* NO HYPHENS */
.no-hyphen {
  hyphens: none
}
/* Subtitles */
.subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  /*font-style: italic;*/
  color: var(--text);
  max-width: 42rem;
  margin: 0 auto 2rem auto; /* center subtitle */
  text-align: center;
  hyphens: none
}

/* Sections */
h2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 3.5rem 0 1.25rem;
  text-align: center; /* center headings */
}

h3 {
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 3.5rem 0 1.25rem;
  padding-left: 4.5em;
  text-align: left; /* center headings */
}

p {
  font-size: 1rem;
  margin-bottom: 1.25rem;
  max-width: 75ch;
  text-align: justify; /* justified text */
  margin-left: auto;
  margin-right: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

pre {
  padding-left: 4.0em;
}

.GIFooter {
  font-size: 0.9rem;
  /*font-weight: 600;
   *    font-style: italic;*/
  color: var(--text);
  max-width: 800px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

/* Top Navigation - centered links with inline logo */
.nav-top {
  display: flex;
  justify-content: center; /* center nav links + logo as a group */
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  background: #e8e8e8;
}

.nav-top ul.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-top ul.nav-links li a {
  /*
   *    text-decoration: none;
   *    color: var(--text);
   *    font-weight: 500;
   *    font-size: 0.95rem;
   *    letter-spacing: 0.02em;
   *    transition: color 0.2s ease-in-out;
   */
  text-decoration: none;
  color: #1d1d1b;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.nav-top ul.nav-links li a:hover {
  /*color: var(--accent);*/
  text-decoration: underline;
}

/* Logo inline on right */
.nav-top .nav-logo {
  margin-left: 2rem;
}

.nav-top .nav-logo img {
  height: 32px;
  width: auto;
}

/* Bottom navigation - centered */
.nav-bottom {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  background: #e8e8e8;
}

.nav-bottom ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-bottom a {
  /*
   *    text-decoration: none;
   *    color: var(--text);
   *    font-weight: 500;
   *    font-size: 0.95rem;
   *    letter-spacing: 0.02em;
   *    transition: color 0.2s ease-in-out;
   */
  text-decoration: none;
  color: #1d1d1b;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.nav-bottom a:hover {
  /*color: var(--accent);*/
  text-decoration: underline;
}
/* -------------------------------
 *  STANDARD LINK
 * - *--------------------------------*/
.x-link {
  color: #1d1d1b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  /*background-color: #f0f8ff;*/
  hyphens: none
}

.x-link:hover {
  /* background-color: #0056b3; */
  text-decoration: underline;
}

/* -------------------------------
 *  CENTER LINK
 * - *--------------------------------*/
.c-link {
  color: #1d1d1b;
  font-family: "U8FontLight";
  font-size: 0.95rem;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  /*background-color: #f0f8ff;*/
  hyphens: none
}

.c-link:hover {
  /* background-color: #0056b3; */
  text-decoration: underline;
}

/* -------------------------------
 *  SALES MAILTO: LINK
 * - *--------------------------------*/
a[href^="mailto:"] {
  color: white;
  text-decoration: none;
  font-family: "U8FontBold";
  font-weight: bold;
  padding: 5px 10px;
  background-color: #dc3545;
  border-radius: 4px;
}

a[href^="mailto:"]:hover  {
  text-decoration: underline;
}
/* -------------------------------
 *  SALES HIGHLIGHT
 * - *--------------------------------*/
.highlight {
  /*width: 98%;*/
  color: white;
  background-color: #dc3545;
  padding: 5px 5px 5px 5px;
  margin: 0 0 0 0 ;
  border: 1px solid #1d1d1b;
  border-radius: 0.25rem;
  /*font-family: "U8Font", sans-serif;
   f ont-weight: bold;                             *
   font-size: 120%;*/
  font-family: "U8FontBold";
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
/* =========================================== */

/* -------------------------------
 *  INDEX SECTION (Academic Index)
 * - *--------------------------------*/
.index-section {
  max-width: 720px;
  margin: 4rem auto;
  padding: 0 1rem;
}

/*
 * .index-section h2 {
 *    color: #1d1d1b;
 *    font-size: 1.1rem;
 *    font-weight: 500;
 *    letter-spacing: 0.04em;
 *    text-transform: uppercase;
 *    margin-bottom: 1.75rem;
 * }
 */
.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* fixed two columns */
  column-gap: 3rem;
  row-gap: 0.35rem;
  align-items: start; /* top-align items */
}

.index-list li {
  line-height: 1.5;
}

.index-list a {
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .index-list {
    grid-template-columns: 1fr; /* collapse to single column on mobile */
  }
}
/* Base list */
.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Two-column desktop layout */
.index-list.two-column {
  column-count: 2;
  column-gap: 3rem;
  column-fill: auto;
}

/* List items */
.index-list li {
  break-inside: avoid;
  margin: 0.35rem 0;
  line-height: 1.5;
}

.index-list a {
  text-decoration: none;
  color: #1d1d1b;
  font-size: 0.95rem;
}

.index-list a:hover {
  text-decoration: underline;
}

/* Collapse to single column on smaller screens */
@media (max-width: 768px) {
  .index-list.two-column {
    column-count: 1;
  }
}

/* -------------------------------
 *  LISTS in general (policy-body)
 * Add in : <section itemprop="articleBody" class="policy-body">
 * ---------------------------------*/

/* Narrow, academic list styling */
.policy-body ul {
  max-width: 720px;           /* narrower than main text */
  margin: 1.25rem auto;       /* center within article */
  padding-left: 1.2rem;       /* controlled indentation */
  list-style-position: outside;
}

.policy-body ol {
  max-width: 720px;           /* narrower than main text */
  margin: 1.25rem auto;       /* center within article */
  padding-left: 1.2rem;       /* controlled indentation */
  list-style-position: outside;
}

/* List items: compact + readable */
.policy-body li {
  margin: 0.35rem 0;
  line-height: 1.55;
  color: #1d1d1b;
  font-size: 0.95rem;
}

/* Tighten lists that follow headings */
.policy-body h2 + ul {
  margin-top: 0.75rem;
}

/* Slightly reduce bullet visual weight */
.policy-body ul li::marker {
  color: #6b6b6b;
}

/* =============================== */
/* Responsive */
@media (max-width: 768px) {
  .nav-top, .nav-bottom ul {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .nav-top .nav-logo {
    margin-left: 0;
  }
}