:root {
	  --article-font-size: 1.1rem;
	  --foreground: #ffffff;
	  --accent: #005a9e;
	}

	body {
	  font-family: "Open Sans", Arial, sans-serif;
	  margin: 0;
	  padding: 0;
	  background-color: #000;
	  color: #f5f5f5;
	}

	a:link,
	a:visited {
	  text-decoration: none;
	  color: inherit;
	}
	a:hover,
	a:focus {
	  text-decoration: underline;
	}

	.visually-hidden {
	  position: absolute !important;
	  width: 1px !important;
	  height: 1px !important;
	  padding: 0 !important;
	  margin: -1px !important;
	  overflow: hidden !important;
	  clip: rect(0 0 0 0) !important;
	  white-space: nowrap !important;
	  border: 0 !important;
	}
	.focusable:focus {
	  position: static !important;
	  width: auto !important;
	  height: auto !important;
	  margin: 1rem;
	  padding: 1rem;
	  background-color: #222;
	  color: #fff;
	  border: 2px solid #fff;
	  z-index: 1000;
	}

	/* Sivujen valikko */
	nav {
	  background-color: #222;
	  padding: 0.5rem 0.5rem;
	}

    .nav-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

	nav ul {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}

	.nav-left, .nav-right {
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	}

	nav a {
	  text-decoration: none;
	  color: #f5f5f5;
	  padding: 0.5rem;
	}

	nav a.active {
	  text-decoration: underline;
	}

	nav button {
	  background-color: #444;
	  color: #fff;
	  border: 1px solid #888;
	  border-radius: 4px;
	  padding: 0.3rem 0.6rem;
	  font-size: 1rem;
	  cursor: pointer;
	}

	nav button:focus {
	  outline: 1px solid #0099ff;
	  outline-offset: 2px;
	}

	/* Etusivun kuva */
	.header-image {
	  width: 100%;
	  height: 400px;
	  object-fit: cover;
	  display: block;
	}

	   /* Vanha Ptolemaios taulukko, poistoon */
    .container-lista {
      margin: 0 auto;
    }

	/* Viimeaikaista sivun aikajana */
	* {
	  box-sizing: border-box;
	}

	div.aikajana {
	  position: relative;
	  max-width: 1200px;
	  margin: 0 auto;
	}

	.aikajana::after {
	  content: '';
	  position: absolute;
	  width: 6px;
	  background-color: #ffffff;
	  top: 0;
	  bottom: 0;
	  left: 50%;
	  margin-left: -3px;
	}

	.laatikko {
	  padding: 10px 40px;
	  position: relative;
	  background-color: inherit;
	  width: 50%;
	}

	.laatikko article {
	  color: #000;
	  background-color: var(--foreground);
	}

	.laatikko::after {
	  content: '';
	  position: absolute;
	  width: 25px;
	  height: 25px;
	  right: -17px;
	  background-color: inherit;
	  border: 4px solid var(--accent);
	  top: 15px;
	  border-radius: 50%;
	  z-index: 1;
	}

	.left {
	  left: 0;
	}

	.right {
	  left: 50%;
	}

	.left::before,
	.right::before {
	  content: " ";
	  height: 0;
	  position: absolute;
	  top: 22px;
	  width: 0;
	  z-index: 1;
	  border: medium solid var(--foreground);
	}

	.left::before {
	  right: 30px;
	  border-width: 10px 0 10px 10px;
	  border-color: transparent transparent transparent var(--foreground);
	}

	.right::before {
	  left: 30px;
	  border-width: 10px 10px 10px 0;
	  border-color: transparent var(--foreground) transparent transparent;
	}

	.right::after {
	  left: -16px;
	}

	/* Sivujen sisukset */

	.container {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 10px;
	  border-radius: 20px 20px 20px 20px;
	  background-color: #111;
	}

	article {
	  font-size: var(--article-font-size);
	  padding: 10px 10px;
	  border-radius: 6px;
	}

	article h2 {
	  margin-top: 0;
	}

	h1 {
	  font-family: Verdana, Arial, sans-serif;
	  font-size: 1.875rem;
	  margin-bottom: 1rem;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	h2 {
	  font-family: Verdana, Arial, sans-serif;
	  font-size: 1.5rem;
	  margin-bottom: 1rem;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	h3 {
	  font-family: Verdana, Arial, sans-serif;
	  font-size: 1rem;
	  margin-bottom: 1rem;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	p {
	  margin-bottom: 2rem;
	  line-height: 1.5em;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	ul.lista {
	  margin-bottom: 2em;
	  line-height: 1.5em;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	sup a {
	  text-decoration: none;
	}

	/* Vanhat alaviite paluut js-versio, poistoon. */
	.return-point {
	  font-weight: normal;
	}

	mark.return-point {
	  background: transparent;
	}

    ol.footnotes {
      margin-top: 2rem;
    }

    .back-link {
      font-size: 0.9em;
      margin-left: 0.5em;
    }

	ol {
	  margin-bottom: 2em;
	  line-height: 1.5em;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	/* Sivujen alaosa */
	.footer {
	  text-align: center;
	  font-size: 1rem;
	  color: inherit;
	}
	.footer a {
	  color: inherit;
	  text-decoration: none;
	}
	.footer a:hover,
	.footer a:focus {
	  text-decoration: underline;
	}

	/* Info sivun käyntikortti */
	.email-info-kuva {
		width: 400px;
		height: 200px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		object-fit: cover;
		border-radius: 15px;
	}

	/* Info sivun sähköpostiosoitteen muotoilu */
	.email-link {
	color: #1e90ff;
	text-decoration: underline;
	cursor: pointer;
	}

	.email-link:focus {
	outline: 3px solid #ff9900;
	outline-offset: 2px;
	}

	/* Info sivun huomautus lodju */
	.notice {
	  font-size: 0.95rem;
	  color: #ffe6e6;
	  background-color: #1a0000;
	  border-left: 1px solid #cc3333;
	  padding: 1rem;
	  margin-bottom: 1rem;
	  word-spacing: 0.16em;
	  letter-spacing: 0.12em;
	}

	/* Light theme */
	.light-theme body {
	  background-color: #fff;
	  color: #1a1a1a;
	}

	.light-theme nav {
	  background-color: #f0f0f0;
	}

	.light-theme nav a {
	  color: #1a1a1a;
	}

	.light-theme .container {
	  background-color: #f7f7f7;
	}

	.light-theme .laatikko article {
	  color: #1a1a1a;
	}
	.light-theme .notice {
	  background-color: #fff0f0;
	  color: #4d0000;
	  border-left: 1px solid #cc0000;
	}

	.light-theme nav button {
	  background-color: #ddd;
	  color: #000;
	}

	/* Paluu painike sivun ylös */
	.scroll-btn {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  background-color: #005a9e;
	  color: #ffffff;
	  border: none;
	  border-radius: 50%;
	  width: 60px;
	  height: 60px;
	  font-size: 24px;
	  cursor: pointer;
	  display: none;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	  transition: opacity 0.3s ease;
	  z-index: 1000;
	}
	.scroll-btn:hover,
	.scroll-btn:focus {
	  background-color: #333333;
	  outline: 3px solid #ffffff;
	  outline-offset: 2px;
	}
	.scroll-btn.visible {
	  display: inline-block;
	}

	/* Light teema päälle */
	.light-theme .scroll-btn {
	  background-color: #005a9e;
	  color: #ffffff;
	}
	.light-theme .scroll-btn:hover,
	.light-theme .scroll-btn:focus {
	  background-color: #555555;
	  outline: 3px solid #000000;
	}
	
    @media (max-width: 768px) {
	  .header-image {
		height: 400px;
	  }

	  .aikajana::after {
		left: 31px;
	  }
	  .laatikko {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	  }
	  .laatikko::before {
		left: 60px;
		border: medium solid var(--foreground);
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--foreground) transparent transparent;
	  }
	  .left::after, .right::after {
		left: 15px;
	  }
	  .right {
		left: 0%;
	  }
	}
	/* Ptolemaios sivun uusi taulukko */
	table {
		border-collapse: collapse;
		margin-bottom: 2rem;
		width: 100%;
		max-width: 100%;
	}
	th, td {
    border: 1px solid #555;
    padding: 0.5rem;
    vertical-align: top;
	}
	th {
		background-color: inherit;
	}
	thead th {
	  background-color: #f5f5f5;
	  color: #000;
	  text-align: left;
	  padding: 0.5rem;
	  border-bottom: 2px solid #333;
	}
	tbody td {
	  padding: 0.5rem;
	  border-bottom: 1px solid #ccc;
	}

	tbody tr:nth-child(even) {
	  background-color: inherit;
	}

	caption {
	  caption-side: top;
	  font-weight: bold;
	  text-align: left;
	  padding: 0.5rem 0;
	}
	/* Kääre joka varmistaa ettei sisältö riko layouttia */
	.table-wrap {
	  max-width: 100%;
	}

	/* Varsinainen scrollialue */
	.table-scroll {
	  overflow-x: auto;
	  overflow-y: hidden;
	  max-width: 100%;
	  -webkit-overflow-scrolling: touch; /* iOS inertiaaliskrollaus */
	  scrollbar-width: thin;             /* Firefox ohut palkki */
	}

	/* Pidä taulukko yhtenä kappaleena */
	.table-scroll > table {
	  border-collapse: collapse;
	  min-width: 640px; /* tai sarakkeiden summa, varmistaa skrollin */
	}

	/* Näkyvä fokustyyli kun käyttäjä tabittaa skrollialueeseen */
	.table-scroll:focus {
	  outline: 2px solid currentColor;
	  outline-offset: 2px;
	}

	/* Scroll-snap rivi kerrallaan */
	.table-scroll {
	  scroll-snap-type: x proximity;
	}
	.table-scroll > table tr { 
	  scroll-snap-align: start;
	}

	/* Pieni vihje käyttäjälle: gradientti reunoihin */
	.table-wrap {
	  position: relative;
	}
	.table-wrap::after, .table-wrap::before {
	  content: "";
	  position: absolute;
	  top: 0; bottom: 0;
	  width: 24px;
	  pointer-events: none;
	}

	/* Kunnioita liike-esteitä */
	@media (prefers-reduced-motion: reduce) {
	  .table-scroll { scroll-behavior: auto; }
	}