body {
  font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
}

header {
  font-family: Yantramanav, Arial, Helvetica, sans-serif;
}

/* BGG pages are flat on tokens now (issue #3): the notes-paper background
   and the font-size bump are gone; the flex/min-height below still pin the
   footer and stretch short pages. */
.body-bgg {
  min-height: 100vh;
}

.body-projects {
  background-image: linear-gradient(rgba(255, 255, 255, 0.8),
  rgb(255, 255, 255, 0.9)),
    url("/static/images/holz4.0927557f69cd.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

.card-img-top.with-margin {
  margin: 10px;
  width: 90%;
  margin-bottom: 45px;
  margin-top: 45px;
}

.img-text {
  margin-top: 1.5em;
  margin-bottom: 2em;
  text-align: center;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: Yantramanav, Heebo, Assistant, Arial, Helvetica, sans-serif;
  margin-bottom: .5rem;
  font-weight: 600;
  line-height: 1.2;
}

div.card-body h1  {
  margin-top: 3rem;
}

div.card-body h2  {
  margin-top: 2.5rem;
}

div.card-body h3  {
  margin-top: 2rem;
}

.intro-block.active .intro-block-inner, .intro-block:hover .intro-block-inner {
  opacity: 1;
}

.intro-block, .intro-block:active, .intro-block:focus, .intro-block:hover {
  color: #fff;
  text-decoration: none;
}

.intro-block {
  background-attachment: scroll;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 500px;
  margin: 10px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  text-align: center;
}

.intro-block-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  transition: all .25s ease-in-out;
  width: 100%;
  color: #fff;
  text-decoration: none;
}

.intro-block-header {
  background-color: rgba(128, 128, 128, 0.69); 
  padding:0.2em; 
  border-radius: 5px;
}

.row-milo {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--bs-gutter-x)*-.5);
  margin-right: calc(var(--bs-gutter-x)*-.5);
  margin-top: calc(var(--bs-gutter-y)*-1);
}

/* Navbar Start */

/* Sub-navbar: breadcrumb over BGG articles, same dark language as
   navbar/footer; hover amber, current page light brand blue. */
.sub-navbar {
  background-color: var(--color-header);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.sub-navbar-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 auto; /* ol default margin would inflate the bar */
  padding-inline: var(--container-gutter);
  list-style: none;
}

/* Same container widths as the navbar (breakpoints cannot use var()) */
@media (min-width: 576px) {
  .sub-navbar-trail {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .sub-navbar-trail {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .sub-navbar-trail {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .sub-navbar-trail {
    max-width: 1140px;
  }
}

.sub-navbar-trail a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--color-text-inverse);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--transition-fast);
}

.sub-navbar-trail a:hover {
  color: var(--color-accent);
}

.sub-navbar-trail .sep {
  color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
}

.sub-navbar-trail .current {
  padding: 0.4rem 0.75rem;
  color: var(--color-active);
}

.sub-navbar-trail a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.nav-link {
  color: rgb(255, 255, 255);
  display: block;
  padding: .5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-item.active {
  text-decoration: underline;
  text-decoration-color: #fff;
}

a.navbar-brand {
  color: #fff;
}

a.navbar-brand:hover {
  color: #fff;
}

.navbar {
  font-family: Yantramanav, Arial, Helvetica, sans-serif;
  font-weight: 400;
  background-color: rgb(33, 38, 48);
  padding: 5px 5px;
}

.nav-link:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.navbar-nav {
  font-size: 16px;
}


/* Navbar End */

/* Sticky footer: the page wrappers span at least the viewport; flex column
   plus an auto top margin pins the footer to the bottom edge on pages with
   little content instead of letting it float mid-page. */
.bg-image-homepage,
.bg-image-contact,
.body-projects,
.body-bgg {
  display: flex;
  flex-direction: column;
}

#app-footer,
.bg-image-homepage > footer,
.bg-image-contact > footer,
.body-projects > footer,
.body-bgg > footer {
  margin-top: auto;
}

/* Sticky navbar: the island mount div must be the sticky element — the nav
   inside it can only stick within its parent, which is as tall as itself. */
#app-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* Table styles moved to css/bgg-article.css, token-based (issue #3). */

.no-hover-link a {
  color: black;
  text-decoration: none;
}

.no-hover-link a:hover {
  color: black;
  text-decoration: none;
}

/* Teal links inside <article>: serves the standard pages (about/contact),
   which render an article card; BGG articles override with token link
   colors scoped in bgg-article.css (issue #3). */
article a {
  color: #009990;
  text-decoration: underline;
}

article a:hover {
  color: #009990;
  text-decoration: none;
}

.d-flex.align-items-center {
  height: 100%;
}

.text-center {
  margin: auto;
}

p.article-text {
  margin-bottom: 32px
}

.article-image {
  overflow: hidden;
  max-height: 500px;
  display: flex;
  align-items: center;
  margin-bottom: 1.5em;
}

.image-attribution {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  margin: 0.25em 0 1.5em;
  font-family: Yantramanav, Heebo, Assistant, Arial, Helvetica, sans-serif;
}

.image-attribution a {
  color: #666;
}

/* Attribution read from image metadata: full-width image with a
   semi-transparent credit box overlaid at the bottom edge. */
.attributed-image {
  position: relative;
  width: 100%;
  max-height: 500px; /* match .article-image crop; keeps the overlay visible */
  overflow: hidden;
}

.attributed-image .bgg-article-img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

.image-attribution-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.35em 0.8em;
  background: rgba(0, 0, 0, 0.55);
  color: #eee;
  text-align: left;
  line-height: 1.4;
  border-top-right-radius: 6px;
  backdrop-filter: blur(2px);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.image-attribution-overlay a {
  color: #fff;
  text-decoration: underline;
}

.article-table {
  margin-bottom: 1.5em;
}

.name-page-div {
  border-bottom: 3px solid rgb(33, 38, 48);
  margin-left: -1vw; 
  margin-right: -1vw; 
  margin-bottom: 50px;
}

.name-page-header{
  margin-bottom: 50px; 
  margin-block-start: 0.67em;
  margin-block-end: 0.67em; 
  margin-left: 30px;
  color: rgb(33, 38, 48);
}

p.article-description {
  font-family: Yantramanav, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 21px;
  margin-bottom: 3em;
}

/* BGG article headers moved to css/bgg-article.css (issue #3). */

.material-icons-outlined {
  color: white;
  font-weight: 100;
  font-size: 12px !important;
}

/* Pagination, search controls, figure captions and legends moved to
   css/bgg-article.css, token-based (issue #3). */