/* =========================
   Global layout + centering
   ========================= */

/* Define shared layout variables */
:root{
  --maxw: 1100px;      /* Page max content width */
  --page-pad: 16px;    /* Horizontal padding used by containers */
}

/* Make width/padding predictable across elements */
*, *::before, *::after{
  box-sizing: border-box;
}

/* Ensure the document is full width (prevents "narrow body" issues) */
html, body{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Typography only (do NOT center by setting a fixed body width) */
body{
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-weight: 300;
  font-size: 18px;
}

/* =========================
   Your existing styles
   ========================= */

h1 {
  font-weight: 300;
}

.center-div {
  text-align: center;
}

.disclaimerbox {
  background-color: #eee;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding: 20px;
}

video.header-vid {
  height: 140px;
  border: 1px solid black;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

img.header-img {
  height: 140px;
  border: 1px solid black;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

img.rounded {
  border: 1px solid #eeeeee;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

a:link,
a:visited {
  color: #1367a7;
  text-decoration: none;
}

a:hover {
  color: #208799;
}

td.dl-link {
  height: 160px;
  text-align: center;
  font-size: 22px;
}

.layered-paper-big { /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
  box-shadow:
    0px 0px 1px 1px rgba(0,0,0,0.35),
    5px 5px 0 0px #fff,
    5px 5px 1px 1px rgba(0,0,0,0.35),
    10px 10px 0 0px #fff,
    10px 10px 1px 1px rgba(0,0,0,0.35),
    15px 15px 0 0px #fff,
    15px 15px 1px 1px rgba(0,0,0,0.35),
    20px 20px 0 0px #fff,
    20px 20px 1px 1px rgba(0,0,0,0.35),
    25px 25px 0 0px #fff,
    25px 25px 1px 1px rgba(0,0,0,0.35);
  margin-left: 10px;
  margin-right: 45px;
}

.layered-paper { /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
  box-shadow:
    0px 0px 1px 1px rgba(0,0,0,0.35),
    5px 5px 0 0px #fff,
    5px 5px 1px 1px rgba(0,0,0,0.35),
    10px 10px 0 0px #fff,
    10px 10px 1px 1px rgba(0,0,0,0.35);
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 30px;
  margin-bottom: 5px;
}

.vert-cent {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================
   HR divider (centered & not too long)
   ========================= */

/* Force the divider to be centered even if other CSS tries to override it */
hr{
  display: block !important;
  float: none !important;

  /* Match your page "content block" width:
     container max width (1100) + left/right padding (16+16) = 1132
     If you prefer exactly 1100, change max-width to var(--maxw) */
  width: calc(100% - 32px) !important;
  max-width: calc(var(--maxw) + var(--page-pad) + var(--page-pad)) !important;

  margin: 22px auto !important;

  border: 0 !important;
  height: 1.5px !important;

  /* Gradient line */
  background: none !important;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.18),
    rgba(0, 0, 0, 0)
  ) !important;
}

/* =========================
   Section navigation
   ========================= */

section {
  position: relative;
  width: 100%;
  height: 660px;
}

section .navigation {
  position: absolute;
  padding: 1px;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 150px;
}

section .navigation li {
  list-style: none;
  cursor: pointer;
  border-radius: 4px;
  margin: 1px;
  border: 1px solid #fff;
  opacity: 0.7;
}

section .navigation li img {
  transition: 0.5s;
}

section .navigation li img:hover {
  height: 150px;
  width: 200px;
  border: 2px solid #fff;
}

/* Figure group spacing: use flex + gap for consistent, nicer spacing */
.figure-stack{
  display: flex;
  flex-direction: column;
  gap: 32px;            /* Space between figures */
  padding-top: 6px;     /* Small breathing room at the top */
}

/* Let gap handle spacing; avoid stacking margins */
.figure-stack figure{
  margin: 0;            /* Reset default margins */
}

/* Slightly increase caption spacing for readability */
.figure-stack figcaption{
  margin-top: 12px;     /* Space between image and caption */
  line-height: 1.5;
}

/* Optional: make images breathe a bit more (subtle) */
.figure-stack img{
  border-radius: 12px;
}

/* Mobile: slightly tighter spacing */
@media (max-width: 820px){
  .figure-stack{
    gap: 22px;
  }
}