/* Shared visual system for the project website */
:root {
  --page: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #eef3f8;
  --text: #172033;
  --muted: #5d6878;
  --line: #d9e0e8;
  --brand: #075a9d;
  --brand-dark: #063f70;
  --accent: #0b6eb8;
  --radius: 8px;
  --max: 1040px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--text);
  background: var(--page);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

body a {
  color: var(--brand);
  text-underline-offset: .15em;
}

body a:hover { color: var(--brand-dark); }

.container {
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}

.project-nav {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.project-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: .65rem 0;
}

.project-nav li { margin: 0; }

.project-nav a {
  display: inline-block;
  margin: 0;
  padding: .45rem .7rem;
  border-radius: 999px;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.project-nav a:hover,
.project-nav a[aria-current="page"] {
  color: var(--brand-dark);
  background: var(--surface-soft);
  text-decoration: none;
}

/* Harmonized layout for the formerly card-style subsections */
body.subpage {
  margin: 0;
  padding: 0;
  display: block;
  min-height: 100vh;
}

body.subpage > header {
  width: 100%;
  margin: 0;
  padding: 1.5rem 1rem 1.15rem;
  text-align: left;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

body.subpage > header h1 {
  width: min(var(--max), 100%);
  margin: 0 auto;
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.18;
}

body.subpage > main {
  width: min(var(--max), calc(100% - 2rem));
  max-width: none;
  margin: 2rem auto 3rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  text-align: left;
}

body.subpage p {
  max-width: 82ch;
  margin: .65rem 0 1rem;
  text-align: left;
}

body.subpage ul,
body.subpage ol {
  margin: .75rem 0 1.35rem 1.4rem;
  padding-left: .8rem;
}

body.subpage li {
  margin-bottom: .6rem;
  text-align: left;
}

body.subpage h2,
body.subpage h3,
body.subpage summary {
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.25;
}

body.subpage h2 {
  margin: 1.5rem 0 .7rem;
  font-size: 1.55rem;
}

body.subpage h3 {
  margin: 1.65rem 0 .65rem;
  padding-bottom: .35rem;
  font-size: 1.35rem;
  border-bottom: 1px solid var(--line);
}

body.subpage section:first-child > h2:first-child { margin-top: 0; }

body.subpage main > section + section {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

body.subpage footer,
body.data-page footer {
  width: 100%;
  margin: 0;
  padding: 1.2rem 1rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .94rem;
  text-align: center;
}

body.subpage main > p:last-child { margin-inline: auto; }
body.subpage main > p:last-child a {
  display: inline-block;
  margin-top: 1rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: var(--surface-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

body.subpage main > p:last-child a:hover { text-decoration: none; }

/* Lists and status elements */
body.subpage ul li::marker,
body.subpage ol li::marker { color: var(--brand); }

body.subpage .status {
  padding: .18rem .5rem;
  border-radius: 999px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .75rem;
  font-weight: 700;
}

body.subpage .status.not-started { background: #f3b2b2; color: #6f1515; }
body.subpage .status.in-progress { background: #f1d98c; color: #694b00; }
body.subpage .status.done { background: #b9dfc1; color: #155b25; }

/* Team entries retain their card treatment, but use the shared palette. */
body.team-page main { text-align: center; }
body.team-page main > p { margin-inline: auto; }
body.team-page main ul { margin: 1rem auto 1.5rem; padding: 0; list-style: none; }
body.team-page main li {
  max-width: 430px;
  margin: .55rem auto;
  padding: .75rem 1rem;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
body.team-page main li:hover { background: #e4edf6; }

/* Data page already used the current visual language; only align its navigation and typography. */
body.data-page { margin: 0; padding: 0; display: block; }
body.data-page .project-nav { font-family: Arial, Helvetica, sans-serif; }
body.data-page main { margin: 0; }

/* Long report page */
body.report-page > main { --max: 1100px; width: min(1100px, calc(100% - 2rem)); }
body.report-page details {
  max-width: none;
  margin: 0;
  padding: .2rem 0 1.1rem;
  border-top: 1px solid var(--line);
}
body.report-page details:first-of-type { border-top: 0; }
body.report-page details > summary {
  max-width: none;
  margin: 0;
  padding: 1.15rem 2.1rem 1.15rem 0;
  color: #111827;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  cursor: pointer;
}
body.report-page .deliverable {
  margin-top: 0;
  color: var(--brand-dark);
  font-size: 1.08rem;
  font-weight: 700;
}
body.report-page .task-title {
  margin-top: 1.3rem;
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-style: normal;
  list-style: none;
}
body.report-page #toc {
  position: static;
  width: auto;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .95rem;
}
body.report-page #toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
body.report-page #toc li { margin: 0; }
body.report-page #toc a { color: var(--brand-dark); font-weight: 700; }
body.report-page code,
body.report-page .equation-block {
  color: var(--text);
  background: var(--surface-soft);
}
body.report-page figure {
  max-width: 900px;
  margin: 1.6rem auto;
}
body.report-page figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
body.report-page figcaption {
  max-width: 82ch;
  margin: .65rem auto 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .project-nav .container { width: min(var(--max), calc(100% - 1rem)); }
  .project-nav ul { padding: .55rem 0; }
  .project-nav a { padding: .4rem .58rem; font-size: .9rem; }

  body.subpage > header { padding: 1.2rem .75rem 1rem; }
  body.subpage > main,
  body.report-page > main {
    width: calc(100% - 1rem);
    margin: 1rem auto 2rem;
    padding: 1rem;
  }

  body.report-page #toc ul { display: block; }
  body.report-page #toc li + li { margin-top: .35rem; }
}