/* || THEME COLORS */
/* --------------- */
:root {
/* LIGHT THEME (DEFAULT) */
--light-accent: #1f1e20;
--light-accent2: #ffffff;
--light-bg: #ece9e4;
--light-detail: #eac975;
--light-grey1: #333333;
--light-grey2: #262626;
--light-text: #393636;
--light-link-text: #8e351f;
--light-link-text-hover: #3b160d;
--light-aside-bg: #faf9f8;
--light-metallic: #eac975;
--light-metallic-bright: #ffd56c;
--light-header: #083b89;
--light-button: #8e351f;
--light-button-hover: #3b160d;

/* DARK THEME */
--dark-accent: #0c0f13;
--dark-accent2: #131318;
--dark-bg: #1b1e24;
--dark-detail: #fb6a6a;
--dark-grey1: #16181d;
--dark-grey2: #14141a;
--dark-text: #f5f3f5;
--dark-link-text: #bf831d;
--dark-link-text-hover: #e6b35b;
--dark-aside-bg: #0e1014;
--dark-metallic: #c0c0c0;
--dark-metallic-bright: hsl(300, 2%, 95%);
--dark-header: #4476ca;
--dark-button: #4476ca;
--dark-button-hover: #083b89;
}

/* ASSIGN THEME COLORS */
[data-theme="light"] {
  --accent-color: var(--light-accent);
  --accent-color2: var(--light-accent2);
  --bg-color: var(--light-bg);
  --detail-color: var(--light-detail);
  --grey-color1: var(--light-grey1);
  --grey-color2: var(--light-grey2);
  --text-color: var(--light-text);
  --link-color: var(--light-link-text);
  --link-hover-color: var(--light-link-text-hover);
  --aside-bg-color: var(--light-aside-bg);
  --metallic-color: var(--light-metallic);
  --rev-metallic-color: var(--dark-metallic);
  --rev-metallic-bright: var(--dark-metallic-bright);
  --header-color: var(--light-header);
  --button-color: var(--light-button);
  --button-hover-color: var(--light-button-hover);
}

[data-theme="dark"] {
    --accent-color: var(--dark-accent);
    --accent-color2: var(--dark-accent2);
    --bg-color: var(--dark-bg);
    --detail-color: var(--dark-detail);
    --grey-color1: var(--dark-grey1);
    --grey-color2: var(--dark-grey2);
    --text-color: var(--dark-text);
    --link-color: var(--dark-link-text);
    --link-hover-color: var(--dark-link-text-hover);
    --aside-bg-color: var(--dark-aside-bg);
    --metallic-color: var(--dark-metallic);
    --rev-metallic-color: var(--light-metallic);
    --rev-metallic-bright: var(--light-metallic-bright);
    --header-color: var(--dark-header);
    --button-color: var(--dark-button);
    --button-hover-color: var(--dark-button-hover);
}


/* || FONTS */
/* -------- */
:root {
  --header-font: 'Cormorant SC', 'Times New Roman', Times, serif;; /* Original: 'Cormorant', 'EB Garamond', Garamond, 'Times New Roman', Times, serif; */
  --sc-header-font: 'Cormorant SC', 'Times New Roman', Times, serif;
  --body-font: 'EB Garamond', Garamond, 'Times New Roman', Times, serif;
  --fancy-font: 'Cormorant Upright', Garamond, 'Times New Roman', Times, serif;
  --jp-header-font: 'Yuji Syuku', 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
  --jp-body-font: 'Zen Old Mincho', 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
}

html {
  font-size: 100%;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: var(--header-font);
}

h1 .japanese,
h2 .japanese,
h3 .japanese,
h4 .japanese,
h5 .japanese,
h6 .japanese {
  font-family: var(--jp-header-font);
  font-weight: 400;
}

html p {
  font-family: var(--body-font);
  font-size: 1.1rem;
}

.japanese {
  font-family: var(--jp-body-font);
  word-break: keep-all;
}

h1, h2, h3, h4, h5, h6, p {
  padding-bottom: 1rem;
}

.small-caps {
  font-variant: small-caps;
}

.hide {
  display: none;
}

a.anchor { /* for scrolling to headings, adjusted for fixed header */
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-size: inherit;
  font-style: normal;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
}

/* || BASIC STYLING */
/* ---------------- */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* LINKS */
a {
  font-family: var(--body-font);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  transition: color 0.2s;
}

figcaption {
  padding: 5px;
  text-align: center;
}

/* LISTS */
@media screen and (max-width: 12.5rem) {
  ul {
    padding-left: 1.5rem;
  }

  ul ul {
    padding-left: 1rem;
  }
}

dl {
  font-family: var(--body-font);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  padding-left: 1rem;
}

dl.col-20rem {
  column-width: 20rem;
  column-gap: 4rem;
}

.def-pair {
  break-inside: avoid;
}

dl dd::after {
  content: '';
  display: block;
}

dt {
  clear: left;
  float: left;
  font-weight: bold;
  font-style: italic;
  margin-left: -1rem;
}

dt::after {
  content: '.';
  padding-right: 0.5rem;
}

dd {
  display: inline;
  margin: 0;
  padding: 0;
}

/* TABLES */
table {
  width: 100%;
}

table th,
table td {
  padding: 1px 4px;
}

table th {
  font-family: var(--body-font);
  font-weight: 600;
}

table td {
  font-family: var(--fancy-font);
  font-weight: 500;
}

table th,
table tr td {
  text-align: right;
  vertical-align: middle;
}

table th:first-of-type,
table tr td:first-of-type {
  text-align: left;
}

table tbody tr:nth-of-type(odd) {
  background-color: var(--bg-color);
}

table tr:hover {
  background-color: color-mix(in srgb, var(--link-color) 30%, transparent);
}

table tbody tr:nth-of-type(odd):hover {
  background-color: color-mix(in srgb, var(--link-hover-color) 30%, transparent);
}

/* table classes */
table.fixed {
  table-layout: fixed;
}

table.borders {
  border: 1px solid grey;
}

table.borders th,
table.borders td {
  border: 1px solid grey;
}

table.left th,
table.left tr td {
  text-align: left;
}

table.center th,
table.center tr td {
  text-align: center;
}

table.italic-heads th {
  font-style: italic;
}

/* || HEADER/TOOLBAR */
/* ----------------- */
#header-wrapper {
  background: var(--accent-color);
  position: sticky;
  color: white;
  top: 0;
  width: 100%;
  z-index: 2;
}

header {
  align-items: center;
  display: flex;
  height: 80px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1900px;
  line-height: 1.1;
  width: 100%;
}

header h1,
header a,
header p {
  color: white;
  font-family: var(--header-font);
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0 5px;
}

/* LEFT TOOLBAR */
#toolbar-left {
  align-items: center;
  display: flex;
  margin-left: 6px;
}

header .header-logo {
  display: none; /* site title (header-logo) invisible on narrow screens */
}

header .header-logo img {
  border-radius: 5px;
  transition: background-color, 0.3s;
  max-width: fit-content; /* Shrink other elements first */
}

header .header-logo img:hover {
  background-color: rgb(255 255 255 / 10%);
}

@media screen and (min-width: 20rem) {
  header .header-logo { 
    display: inline;
  }
}

/* HEADER NAVIGATION */
header nav {
  display: none; /* nav hidden by default on narrow screens */
}

header nav.mobile {
  display: block; /* mobile nav visible by default */
}

header nav ul {
  display: flex;
  list-style-type: none;
}

header nav a {
  display: block;
  padding: 0.75rem;
  transition: background-color 0.3s;
}

header nav a:hover,
header nav a:focus {
  background-color: rgb(255 255 255 / 10%);
  color: var(--detail-color);
  text-decoration: none;
}

header button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
}

/* navbar rules for expanding search bar on narrow screens */
#navbar {
  opacity: 1;
  transition: opacity 0.2s;
}

#navbar.hide {
  opacity: 0;
  height: 0;
  width: 0;
  visibility: hidden;
}

/* Toolbar Buttons featuring icons (hamburger menu & search)*/
.toolbar-ico-btn {
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center; /* required to center after adding manual width */
  transition: background 0.6s;
  border-radius: 50%; /* rounded corners for hover effect */
  vertical-align: middle;
}

@media screen and (min-width: 43.5rem) {
  header nav {
    display: block; /* Main nav only appears on screens wider than 42rem */
  }

  header nav.mobile {
    display: none;  /* Nav hamburger menu disappears on screens wider than 42rem */
  }
}

/* DROP DOWN */

/* Header dropdown button styling */
header .dropdown-btn:not(.mobile) {
  background-position: center;
  font-family: var(--header-font);
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.75rem;
  transition: color 0.2s, background 0.8s;
}

header .dropdown-btn.dropdown-arrow::after {
  content: 'arrow_drop_down';
  font-family: 'Material Symbols Outlined';
  font-size: 0.8rem;
  margin-left: 0.2rem;
}

header .dropdown-btn.dropdown-arrow.active::after {
  content: 'arrow_drop_up';
}

header .dropdown-btn:hover,
header .dropdown-btn:focus {
  color: var(--detail-color);
  background: var(--accent-color) radial-gradient(circle, transparent 1%, var(--accent-color) 1%) center/15000%;  /* ripple effect */
}

header .dropdown-btn:active { /* ripple effect */
  background-color: rgb(255 255 255 / 20%);
  background-size: 100%;
  transition: background 0s;
}

header ul.dropdown-content {
  padding: 0;
}

/* Header dropdown menu styling */
header .dropdown-content {
  background-color: var(--grey-color2);
  display: block;
  position: absolute;
  top: 80px;
  right: 0px;
  max-width: 1920px;
  width: 100%;
  scrollbar-color: grey transparent;
  transition: max-height 0.3s; /* for expanding anima */
  overflow: hidden; /* for expanding anim */
  max-height: 0; /* for expanding anim */
  visibility: hidden; /* for expanding anim */
}

/* shadow beneath dropdown menus, unless inside of another dropdown */
header .dropdown-content:not(.nested) {
  box-shadow: 2px 0px 4px 2px var(--accent-color);
}

@media screen and (min-width: 1920px) {
  header .dropdown-content { /* ensure dropdown contents stay close to the rest of the page's contents */
    right: unset;
    max-width: 40%;
  }
}

@media screen and (min-width: 2560px) {
  header .dropdown-content {
    max-width: 65%;
  }
}

header .dropdown-content.active {
  max-height: calc(100vh - 80px); /* for expanding anim */
  visibility: visible;
  overflow-y: auto;
}

/* Header dropdown links styling */
header .dropdown-content a {
  font-family: var(--sc-header-font);
  font-weight: bold;
  padding: 1rem;
}

header .dropdown-content a:hover,
header .dropdown-content a:focus {
  background-color: rgb(255 255 255 / 10%);
}

/* mobile dropdown nav menu styling (hamburger menu) */
header .dropdown-content.mobile {
  left: 0px;
  max-width: 300px;
}

/* nested dropdowns for mobile dropdown nav menu (hamburger menu) */
header .dropdown.nested .dropdown-btn {
  font-family: var(--sc-header-font);
  font-weight: bold;
  padding: 1rem;
  width: 100%;
  text-align: left;
}

header .dropdown.nested .dropdown-btn.dropdown-arrow::after {
  float: right;
}

header .dropdown.nested .dropdown-btn:hover,
header .dropdown.nested .dropdown-btn:focus {
  background: rgb(255 255 255 / 10%);
  color: white;
}

header .dropdown.nested .dropdown-content {
  background-color: var(--accent-color);
  position: relative; /* place within the flow of the menu */
  top: 0;
}

header ul.dropdown-content.nested {
  border-bottom: 1px solid var(--detail-color);
}

header .dropdown-content.nested {
  transition: max-height 0.1s; /* for closing anim (duration: on close) */
}

header .dropdown-content.nested.active {
  transition: max-height 0.3s;  /* for expanding anim (duration: on open) */
}

/* RIGHT TOOLBAR (search & theme) */
#toolbar-right {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  margin-right: 12px;
}

.expand.mobile { 
  display: block; /* expanding mobile search bar displays by default */
}

/* Theme Toggle */
.theme-button-wrapper {
  display: none;
  margin: 0 5px;
}

.theme-toggle-btn {
  transition: text-shadow 0.2s;
}

.theme-toggle-btn:hover {
  color: var(--rev-metallic-bright);
  text-shadow: 
    1px 1px 5px var(--rev-metallic-color),
    1px 1px 15px var(--rev-metallic-color);
  transition: text-shadow 0.1s;
}

.theme-toggle-btn:active {
  text-shadow: 
    1px 1px 5px var(--rev-metallic-bright),
    1px 1px 10px var(--rev-metallic-bright),
    1px 1px 15px var(--rev-metallic-bright),
    1px 1px 20px var(--rev-metallic-bright),
    1px 1px 25px var(--rev-metallic-bright);
  transition: text-shadow 0s;
}

.dropdown .theme-button-wrapper {
  display: block;
  float: right;
  padding: 0.25rem 0;
}

@media screen and (min-width: 30rem) {
  .theme-button-wrapper {
    display: block;
  }  

  .dropdown .theme-button-wrapper {
    display: none;
  }
}

/* Search bar (header) */
header .search-wrapper {
  align-items: center;
  background-color: white;
  border-radius: 5px;
  color: black;
  display: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  padding: 3px;
}

header .search-btn {
  border-radius: 0.5rem;
  color: var(--light-text);
  display: inline-block;
  font-size: 1.6rem;
  width: 2rem;
  height: 1.8rem;
  transition: background-color 0.2s;
}

header .search-btn:hover,
header .search-btn:focus {
  background-color: rgb(0 0 0 / 20%);
}

header .search-wrapper form {
  display: flex;
  padding: 0 5px;
}

.site-search {
  background-color: transparent;
  border: none;
  margin-right: 5px;
  width: 95%;
}

@media screen and (min-width: 55rem) {
  #toolbar-right .expand.mobile {
    display: none; /* Expanding search bar appears on screens narrower than 55rem */
  }

  header .search-wrapper {
    display: flex; /* Full search bar displays by default on screens wider than 55rem */
  }
}

/* EXPANDING SEARCH BAR */
.search-wrapper.mobile {
  display: flex; /* Mobile styles are visible by default */
}

.search-wrapper.mobile form {
  min-width: 0;
}

.expand-btn {
  float: right;
}

.expand-btn:hover,
.expand-btn:focus {
  color: var(--detail-color);
}

.expand-btn:active {
  background-color: rgb(255 255 255 / 20%);
  border-radius: 50%;
}

.expand-content {
  float: right;
  visibility: hidden; /* for expanding anim */
  width: 0; /* for anim */
  height: 0; /* for anim */
}

.expand-content.active {
  visibility: visible; /* for expanding anim */
  width: 100%; /* for expanding anim */
  height: auto; /* for expanding anim */
  transition: width 0.3s ease-out;
}

.expand-btn.hide {
  display: none;
}

/* || NAV TABLE OF CONTENTS */
/* ------------------------ */

nav.headings-btn-menu { /* requires 'nav' to overwrite .if-missing-stylesheet class */
  display: block;
  position: relative;
  z-index: 1;
}

.headings-btn-menu .page-headings-btn {
  background-color: var(--link-color);
  border-radius: 50%;
  color: white;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1.5rem;
  transition: background-color 0.2s;
}

.page-headings-btn:hover,
.page-headings-btn:focus {
  background-color: var(--link-hover-color);
}

.dropdown-btn.page-headings-btn {
  border: none;
  cursor: pointer;
}

.headings-dropdown {
  background-color: var(--aside-bg-color);
  box-shadow: 1px 1px 5px var(--grey-color1);
  font-family: var(--body-font);
  opacity: 0;
  padding: 8px;
  position: fixed;
  left: 1rem;
  bottom: 5rem;
  max-height: 0;
  max-width: 0;
  transition: max-height 0.4s, opacity 0.3s;
  overflow: hidden; /* for anim */
  visibility: hidden; /* for anim */
}

.headings-menu {
  background-color: var(--aside-bg-color);
  box-shadow: 1px 1px 5px var(--grey-color1);
  display: none;
  float: left;
  padding: 1rem;
  position: sticky;
  top: calc(80px + 1rem);
  margin: 1rem 4rem;
}

.headings-dropdown.active {
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 10rem);
  opacity: 1;
  overflow-y: auto;
  visibility: visible;
}

.headings-list {
  padding-left: 1.5rem;
  list-style-type: none;
}

.headings-list ul {
  padding-left: 1.5rem;
  list-style-type: none;
}

.headings-list li a {
  display: inline-block;
  width: 100%;
}

.headings-list li:hover {
  background-color: color-mix(in srgb, var(--link-color) 30%, transparent);
}

.headings-list a:hover {
  text-decoration: none;
}

@media screen and (min-width: 100rem) {
  nav.headings-btn-menu .page-headings-btn {
    top: calc(80px + 1.5rem);
  }

  .headings-dropdown {
    top: calc(80px + 0.5rem);
    left: 0;
    bottom: unset;
    transition: opacity 0.3s;
    width: 21rem;
  }
}

@media screen and (min-width: 120rem) {
  nav.headings-btn-menu .page-headings-btn {
    display: none;
  }

  .headings-menu {
    display: block;
  }
}

/* || MAIN */
/* ------- */
main {
  flex-grow: 1;
  width: 100%;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  padding-bottom: 0.5rem;
}

main h2 {
  font-size: 2rem;
  margin-top: 1.5rem;
}

main h3 {
  font-size: 1.5rem;
}

main h4 {
  font-family: var(--fancy-font);
  font-size: 1.25rem;
}

main a {
  color: var(--link-color);
  text-decoration: none;
}

main a:hover,
main a:focus {
  color: var(--link-hover-color);
  text-decoration: underline;
}

main aside {
  border: 2px outset var(--light-detail);
  background-color: var(--aside-bg-color);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

main aside p {
  font-size: 1rem;
}

main aside p:last-of-type {
  padding-bottom: 0;
}

/* Float paragraph and aside (sidebar) on wider screens */
@media screen and (min-width: 50rem) {
  main aside.float {
    float: right;
    margin-left: 1rem;
    width: 42%;
    margin-bottom: 0;
  }

  main p.float {
    float: left;
    margin-right: 1rem;
    width: 58%;
  }

  main p.float + aside {
    float: right;
    margin-top: -2.7rem;
    margin-bottom: 0.5rem;
    width: 39%;
  }

  main p.float + aside + p {
    clear: both;
  }

  main p.float + h2 {
    clear: left;
  }

  main p.float + h3 {
    clear: left;
  }
}

/* Figures and Pictures */
main figure {
  margin-bottom: 1rem;
}

main figure img {
  cursor: pointer;
}

main picture img {
  max-width: 100%;
  height: auto;
}

main figcaption {
  font-family: var(--body-font);
  font-size: 0.9rem;
}

/* INTRO */
#intro-wrapper {
  background-color: var(--grey-color1); /* for compatibility with older browsers */
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--grey-color1) 0%, transparent) 0%,
      color-mix(in srgb, var(--grey-color1) 50%, transparent) 45%,
      var(--grey-color2) 90%),
    url(../assets/view-of-kiyomizudera-2560w.jpg) no-repeat top calc(15% - 40px) right 80%,
    var(--grey-color1);
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 2.5rem 24px 3rem;
  width: 100%;
  min-height: 360px; /* TODO: consider adjusting */
}

@media screen and (min-width: 450px) {
  #intro-wrapper {
    background-position: 0%, top calc(15% - 40px) center;
  }
}

.intro-content {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

.intro-content h2 {
  font-family: var(--sc-header-font);
  font-size: clamp(2.5rem, 2.02525rem + 2.532vw, 3.5rem);
  margin-bottom: 1rem;
  text-shadow: 0px 0px 1px;
}

.intro-content p {
  font-family: var(--fancy-font);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  font-size: clamp(1.2rem, 1rem + 0.4vw, 1.4rem);
  padding-bottom: 1.5rem;
}

/* ANCESTRY INTRO */
.intro-content.ancestry {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
}

.intro-content.ancestry h2 {
  margin-top: 0;
  letter-spacing: 1px;
  text-shadow: 1px 1px white;
}

.ancestry-intro p {
  font-size: 1.3rem;
  padding: 0;
}

.ancestry-intro {
  position: relative;
}

/* || Horizontal rules */
.ancestry-intro .intro-divider {
  background-color: lightgrey;
  mask-image: url(../assets/divider-7525882_g35_c.svg);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  width: 100%;
  height: 3rem;
  content: '';
}

.ancestry-intro .intro-divider:last-of-type {
  transform: scaleY(-1);
}

.intro-content.ancestry img {
  margin-top: 3.5rem;
  max-height: 38rem;
  object-fit: contain;
}

/* Ancestry Intro Backlink (button styling) */
.intro-content.ancestry a {
  background-color: var(--button-color);
  border-radius: 15px;
  color: white;
  padding: 0.5rem 1rem;
  font-family: var(--header-font);
  font-weight: bold;
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.2s;
  text-align: center;
  width: fit-content;
}

.intro-content.ancestry a:hover,
.intro-content.ancestry a:focus {
  background-color: var(--button-hover-color);
  color: var(--light-metallic);
  text-decoration: none;
}

.intro-content.ancestry a:active {
  text-decoration: none;
}

@media screen and (min-width: 50rem) {
  .intro-content.ancestry {
    flex-direction: row;
    text-align: left;
  }

  .intro-content.ancestry img {
    max-height: 42rem;
  }

  .ancestry-intro {
    max-width: 40rem;
    width: 50%;
    margin-left: 4rem;
  }
}

@media screen and (min-width: 100rem) {
  .intro-content.ancestry {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .ancestry-intro {
    margin-left: 0;
    margin-right: 8rem;
  }
}

/* MAIN CONTENT */
#main-content-wrapper {
  margin-top: 2rem;
  padding: 0 16px;
  width: 100%;
}

.main-content {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 0.5rem;
}

.main-content.wide {
  max-width: calc(1200px - 2.5rem);
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  color: var(--header-color);
}

/* ANCESTRY TRAITS BLOCK */
.ancestry-traits {
  background-color: var(--accent-color);
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem;
  margin-bottom: 1.5rem;
}

.ancestry-traits .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ancestry-traits .row div {
  flex: 1 150px;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.ancestry-traits .row div:first-of-type {
  padding: 0;
  padding-right: 1rem;
}

@media screen and (max-width: 55rem) {
  .ancestry-traits .row div {
    text-align: center;
  }

  .ancestry-traits .row div:first-of-type {
    padding: 0 1rem;
  }
}

/* left borders */
.ancestry-traits .row div ~ div {
  border-left: 1px solid var(--detail-color);
}

@media screen and (max-width: 44rem) {
  .ancestry-traits .row div ~ div {
    border-left: none;
  }
}

.ancestry-traits h2 {
  border-bottom: 1px solid var(--detail-color);
  color: inherit;
  font-family: var(--sc-header-font);
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.ancestry-traits h3 {
  color: inherit;
}

.ancestry-traits h4 {
  color: var(--detail-color);
  font-family: var(--sc-header-font);
  font-size: 1.1rem;
}

.ancestry-traits > h4 {
  margin-top: 1.5rem;
}

.ancestry-traits h4:first-of-type {
  margin-top: 0.5rem;
}

.ancestry-traits p {
  font-size: 1rem;
  padding-bottom: 0;
}

.ancestry-traits p + p {
  padding-top: 0.5rem;
}

/* EQUIPMENT CARD */
.equip-card-container {
  background-color: var(--aside-bg-color);
  box-shadow: 1px 1px 2px var(--grey-color1);
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.equip-card-container h4 {
  border-bottom: 1px solid var(--text-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: 1.3rem;
  text-transform: uppercase;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

.equip-card {
  display: flex;
  flex-direction: row;
}

.equip-card-content {
  display: block;
  margin: auto;
  flex: 3;
}

.equip-card-content p {
  font-size: 1rem;
}

.equip-card picture {
  flex: 1;
  height: 100%;
}

/* LIBRARY */
#intro-wrapper .search-wrapper {
  background-color: white;
  border-radius: 5px;
  color: black;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  margin-top: 0.5rem;
  padding: 3px;
  width: 100%;
  max-width: 400px;
}

.library-search {
  border: none;
  width: 100%;
}

.no-matches { /* text if no search results */
  display: inline;
  font-style: italic;
}

.library-card-container {
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
  max-width: 1200px;
}

.library-card {
  background-color: var(--grey-color2);
  border-radius: 10px;
  box-shadow: 1px 2px 2px var(--grey-color2);
  color: white;
  display: flex;
  flex-direction: column;
  min-height: 25rem;
  width: 100%;
  max-width: 22.5rem;
  position: relative;
}

.library-card {
  height: 28rem;
}

.library-card-content { /* card non-img content */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex: 6;
}

.library-card h3 {
  border-bottom: 1px solid var(--light-detail);
  color: white;
  font-family: var(--sc-header-font);
  padding-bottom: 0;
  margin-bottom: 0.25rem;
}

/* Disable katakana names */
.library-card h3 .japanese {
  display: none;
}

.library-card h4 {
  font-family: var(--sc-header-font);
  font-size: 1.2rem;
  padding-bottom: 0;
}

.library-card .card-description {
  display: block;
  position: relative;
  max-height: calc(6.9rem + 2px);
  overflow: hidden;
  white-space: normal;
}

.library-card p {
  padding-top: 0.75rem;
  padding-bottom: 0;
  font-size: 1rem;
  max-height: 8rem;
}

/* TODO: fix this jank ellipsis workaround */
.library-card p::after {
  content: '…';
  position: absolute;
  line-height: 1.1;
  right: 0;
  top: calc(12.5rem - 100% + 4px);
  text-align: left;
  background: var(--grey-color2);
}

.library-card picture {
  background:
    linear-gradient(70deg,
    rgb(0 0 0 / 80%) 0%,
    rgb(0 0 0 / 60%) 75%,
    rgb(0 0 0 / 30%) 100%),
    var(--link-color);
  border-radius: 10px 10px 0 0;
  flex: 4;
}

.library-card picture img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Library Card links (button styling) */
.library-card a {
  background-color: var(--button-color);
  border-radius: 5px;
  box-shadow: 1px 1px 2px black;
  color: white;
  display: block;
  padding: 0.5rem;
  font-family: var(--header-font);
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.2s;
  text-align: center;
  width: 100%;
  max-width: 70vw;
  margin: 0 auto;
  margin-top: auto; /* force to bottom of flex container */
}

.library-card a:hover,
.library-card a:focus {
  background-color: var(--button-hover-color);
  color: var(--light-metallic);
  text-decoration: none;
}

.library-card a:active {
  text-decoration: none;
  box-shadow: inset 1px 2px 3px black;
}

.library-card.hide {
  display: none;
}

@media screen and (min-width: 24.5rem) { /* full-size card formatting */
  .library-card {
    flex-direction: row;
  }

  .library-card-content {
    flex: 3;
  }

  .library-card .card-description {
    max-height: calc(15.75rem + 2px);
  }

  .library-card picture {
    border-radius: 10px 0 0 10px;
    flex: 2.5;
    width: 100%;
    overflow: hidden; /* fixes odd behavior on chrome and edge */
  }

  .library-card h3 {
    font-size: 1.4rem;
  }

  .library-card p {
  max-height: 16.5rem;
  }

  .library-card p::after {
    top: calc(30.25rem - 100%);
  }
}

/* LINK TABLE OF CONTENTS */
.link-toc {
  margin: 2rem 0;
}

.link-toc h2 {
  padding: 0;
  text-align: center;
}

.col-16rem { /* formerly: .link-toc-columns */
  column-width: 16rem;
  column-gap: 1rem;
}

.link-toc-group {
  break-inside: avoid;
  padding-top: 1rem;
}

.link-toc-group h3 {
  font-size: 1.2rem;
  padding: 0.25rem 0.25rem 0;
  border-bottom: 1px solid var(--text-color);
}

.link-toc h3 a {
  font-family: var(--sc-header-font);
}

.link-toc h3 a:hover,
.link-toc h3 a:focus {
  text-decoration: none;
}

/* TRAIT LIST */
ul.trait-list {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--metallic-color) 50%, white) 15%,
    color-mix(in srgb, var(--metallic-color) 80%, black) 50%,
    color-mix(in srgb, var(--metallic-color) 90%, white) 85%);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0.5rem;
  font-family: var(--sc-header-font);
  font-size: 0.8rem;
  font-weight: bold;
  list-style-type: none;
  padding: 4px;
  width: fit-content;
}

.trait-list li {
  background-color: var(--light-link-text);
  box-shadow: inset 1px 2px 3px var(--accent-color);
  display: inline-block;
  padding: 1px 3px;
}

.library-card ul.trait-list {
  margin: 4px 0;
  max-width: 100%;
}

.intro-content ul.trait-list {
  margin: 1.5rem auto;
}

@media screen and (min-width: 24.5rem) {
  .library-card ul.trait-list {
    font-size: calc(0.8rem - 1px);
  }
}

@media screen and (min-width: 50rem) {
  .intro-content ul.trait-list {
    margin: 1.5rem 0;
  }
}

li.rare {
  background-color: rgb(0 38 100);
}

li.uncommon {
  background-color: rgb(0 100 38);
}

/* INDEX (COLUMNS) */
.index-container {
  column-count: 1;
}

.index-column {
  width: 100%;
}

@media screen and (min-width: 35rem) {
  .index-container {
    column-count: 2;
  }
  
  .index-column {
    width: 90%;
  }
}

.index-entry {
  break-inside: avoid;
  padding-bottom: 1.5rem;
}

.index-entry h4 {
  border-bottom: 1px solid var(--text-color);
  padding-bottom: 0;
  margin-bottom: 0.25rem;
}

.index-entry p {
  padding-bottom: 0.5rem;
}

.index-entry a {
  font-size: 1.1rem;
  font-family: var(--fancy-font);
  font-weight: 500;
}

.index-entry a::after {
  content: '…';
}

/* || CREDITS PAGE */
ul.credits-list {
  padding-bottom: 1rem;
}


/* || FOOTER */
/* --------- */
#footer-wrapper {
  background-color: var(--grey-color1); /* for compatibility with older browsers */
  background: 
    linear-gradient(to bottom,
      color-mix(in srgb, var(--grey-color1) 60%, transparent) 0%,
      color-mix(in srgb, var(--grey-color1) 80%, transparent) 35%,
      color-mix(in srgb, var(--grey-color1) 90%, transparent) 70%,
      var(--grey-color1) 100%),
/*    url(assets/img/dragon-amid-waves-and-clouds.jpg) no-repeat bottom center,*/ /*TODO: FIND NEW FOOTER IMAGE */
    var(--grey-color1);
  background-size: cover;
  color: white;
  margin-top: 3rem;
  width: 100%;
}

/*
@media screen and (min-width: 1280px) {
  #footer-wrapper {
    background-position: 0%, bottom -5vw center;
  }
}

@media screen and (min-width: 1600px) {
  #footer-wrapper {
    background-position: 0%, bottom -10vw center;
  }
}

@media screen and (min-width: 1920px) {
  #footer-wrapper {
    background-position: 0%, bottom -12.5vw center;
  }
}

@media screen and (min-width: 2560px) {
  #footer-wrapper {
    background-position: 0%, bottom -15vw center;
  }
}

@media screen and (min-width: 3240px) {
  #footer-wrapper {
    background-position: 0%, bottom -17.5vw center;
  }
}
*/

footer {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-links {
  padding: 2.5rem 5% 2rem;
  margin: 0 auto;
  max-width: 1900px;
  width: 100%;
}

.footer-logo {
  padding: 0 0 2rem;
}

footer a {
  color: white;
  font-family: var(--body-font);
}

footer nav ul {
  list-style-type: none;
  padding: 0;
}

footer nav li {
  line-height: 2;
}

/* TRUE FOOTER */
.footer-true {
  align-items: center;
  background-color: var(--accent-color);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  width: 100%;
}

.footer-true p {
  font-size: 0.9rem;
  text-align: center;
}

.footer-true a {
  color: var(--detail-color);
}

/* FULLSCREEN OVERLAY IMAGE */
/* ------------------------ */
.fs-image-container {
  background: rgb(0 0 0 / 50%);
  display: none;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.fs-image-container.active {
  display: block;
}

.fs-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: fit-content;
  height: 100%;
  padding: 0 2vw;
}

.fs-image-bg { /* bg element for click event to hide .fs-image-container */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.fs-image figure {
  display: table; /* to set up figcaption { display: table-caption } */
  z-index: 4;
}

.fs-image img {
  max-height: 85vh;
}

.fs-image button {
  align-self: end;
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  transition: color 0.2s;
  z-index: 4;
}

.fs-image button:hover {
  color: var(--detail-color);
}

.fs-image .close-ico {
  font-family: 'Material Symbols Outlined';
  vertical-align: top;
}

.fs-image figcaption {
  display: table-caption; /* prevents figcaption from exceeding the width of the image */
  caption-side: bottom;
  background-color: var(--bg-color);
  border-radius: 0 0 15px 15px;
  color: var(--text-color);
  font-family: var(--body-font);
}

.fs-image figcaption a {
  color: var(--link-color);
}

.fs-image figcaption a:hover {
  color: var(--link-hover-color);
}

/* GENERATOR LAYOUT */
/* ---------------- */
.gen-output { /* TODO: REARRANGE AT 25REM screen width, kanji-name under name (small text) */
  margin: 0 auto;
  max-width: 32rem;
  margin-bottom: 1rem;
}

.gen-output p {
  display: block;
  font-family: var(--fancy-font);
  font-size: clamp(1.2rem, -0.168rem + 5.7vw, 1.4rem);
  font-weight: bolder;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: fit-content;
}

.gen-output p.kanji-name {
  font-family: var(--jp-header-font);
	font-size: clamp(1rem, -1.0568rem + 8.57vw, 1.3rem);
  font-weight: lighter;
  float: unset;
  margin-bottom: 0.5rem;
  text-align: inherit;
}

.generator .button-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.generator .button-bar button {
  align-self: center;
  background-color: var(--button-color);
  border: 1px solid var(--rev-metallic-bright);
  color: white;
  border-radius: 10px;
  box-shadow: 1px 2px 3px black;
  cursor: pointer;
  display: block;
  padding: 0.5rem;
  margin: 10px 0;
  font-family: var(--header-font);
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.2s, color 0.5s;
  text-align: center;
  width: fit-content;
}

.generator .button-bar button:hover {
  background-color: var(--button-hover-color);
}

.generator .button-bar button.active {
  border: 3px outset var(--light-metallic);
  box-shadow: 
    1px 2px 3px black,
    inset 2px 3px 8px var(--accent-color);
}

.generator .button-bar button:active {
  color: var(--light-metallic);
  transition: color 0.1s;
}

@media screen and (min-width: 24rem) {
  .gen-output p {
    display: inline-block;
    margin: 0;
    text-align: left;
    width: 60%;
  }

  .gen-output p.kanji-name {
    float: right;
    margin: 0;
    text-align: right;
    width: 40%;
  }
}

@media screen and (min-width: 35rem) {
  .generator .button-bar {
    flex-direction: row;
    justify-content: space-between;
    max-width: fit-content;
    margin: 0 auto;
  }
  
  .generator .button-bar button {
    margin: 20px;
  }
}

/* GEN TOOLTIPS */
.tooltip {
  cursor: help;
  display: inline;
  position: relative;
}

/* dotted underline that with separation between chars */
.tooltip::after {
  content: '';
  display: inline-block;
  border-bottom: 1px dotted white;;
  width: 90%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.tooltip-text {
  visibility: hidden;
  border-radius: 5px 0 10px 5px;
  border: 1px solid black;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  font-size: 0.8rem;
  position: absolute;
  text-align: center;
  top: 100%;
  right: 100%;
  width: 100px;
  z-index: 1;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

.tooltip.active .tooltip-text {
  visibility: visible;
}

@media screen and (min-width: 44.5rem) {
  .tooltip-text {
    left: 100%;
    border-radius: 0 5px 10px 5px;
  }
}