/*style.css*/

html, body {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  background: white;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 1rem;
  overflow-x: hidden;
}
h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

img {
  max-width: 90%;
  height: auto;
  max-height: 80vh;
  margin-bottom: 1.5rem; /* 👈 This adds the space you want */
}

form {
  margin-top: 2rem;
}

input[type="email"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 250px;
  max-width: 90%;
}

button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #333;
}

iframe {
  max-width: 100%;
  border: none;
}
.audioblock {
  margin-top: 3rem;
  padding: 1rem;
  border-top: 1px solid #ddd;
}

.audiotitle {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: .5rem;
}

audio {
  width: 100%;
  max-width: 600px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
  display: block;              
  position: relative;          
  z-index: 1;                  
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background-color: black;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap; 
  margin-bottom: 1rem; 
}

#rotating-image {
  max-width: 90%;
  height: auto;
  max-height: 80vh;
  margin-bottom: 1.5rem;
}


.button:hover {
  background-color: #333;
}
/* Centered sticky, translucent nav */
.top-right-nav {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  gap: 0.75rem;

  font-size: 0.9rem;

  /* translucent white with subtle blur */
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-right-nav a {
  color: black;
  text-decoration: none;
}

.top-right-nav a:hover,
.top-right-nav a:focus {
  text-decoration: underline;
  outline: none;
}

/* Fallback for browsers that don’t support backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .top-right-nav {
    background: rgba(255, 255, 255, 0.92);
  }
}
/* Top-right nav */
/*.top-right-nav {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.9rem;
}
.top-right-nav a {
  color: black;
  text-decoration: none;
  margin-left: 0.5rem;
}
.top-right-nav a:hover {
  text-decoration: underline;
} */

/* Footer nav (index only) */
.footer-nav {
  margin-top: 2rem;
  font-size: 0.9rem;
}
.footer-nav a {
  color: black;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}

/* Small screens: keep the corner links readable/tappable */
@media (max-width: 480px) {
  .top-right-nav { font-size: 0.95rem; top: 0.75rem; right: 0.75rem; }
  .top-right-nav a { margin-left: 0.4rem; }
}

@media (min-width: 769px) {
  .links-title {
    text-align: center;
  }
}
/* Accessibility helper */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}


.hero-video {
  width: 100%;
  max-width: 900px;
  height: auto;
  max-height: 80vh; /* never taller than 80% of the viewport height */
  object-fit: contain; /* keeps aspect ratio and shows whole frame */
  outline: none;
}


/* Documents list */
.docs-section { margin-top: 2rem; }
/* Documents list - no bullets, left aligned, nice spacing */
.doc-list {
  list-style: none;      /* remove bullets */
  padding: 0;
  margin: 1rem auto 0;
  max-width: 900px;
}

.doc-list li {
  margin: 0.75rem 0;     /* space between each link */
  padding-left: 1.2rem;  /* space for indent effect */
  text-indent: -1.2rem;  /* pull first line back so wrap lines are indented */
}

.doc-list a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  line-height: 1.4;
}

.doc-list a:hover {
  border-bottom-color: black;
}

/* Gallery grid (auto-resizes) */
.gallery-section { margin-top: 2rem; }
.gallery {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.gallery figure {
  margin: 0;
  text-align: left;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery figcaption {
  font-size: 0.9rem;
  color: #333;
  margin-top: 0.25rem;
}
.gallery-placeholder {
  color: #555;
  font-style: italic;
  text-align: left;
}

/* Wider screens: multi-column gallery */
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .hero-video {
    max-height: 60vh;
  }
}
/* Page 2 (media) layout overrides */
.page-media {
  display: block;          /* disable global flex centering */
  min-height: auto;        /* allow natural page height */
  text-align: center;      /* keep your centered vibe */
  padding: 1rem;
}

/* Keep the top-right nav working with the new layout */
/*.page-media .top-right-nav {
  position: absolute;
  top: 1rem;
  right: 1rem;
} */

.media-section {
  margin-top: 1.25rem;          /* a little space under the sticky nav */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;              /* gentle side gutters */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;       /* stack title above thumbnail */
  align-items: center;           /* center both */
}
.media-section h1 {
  font-size: 1.6rem;
  margin: 0 0 0.75rem 0;
  text-align: center;
  line-height: 1.2;
}

.hero-video {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 3.5rem auto 2rem;
  object-fit: contain;

  /* Force Safari to keep it inside the viewport */
  box-sizing: border-box;
  padding: 0; /* no extra padding on the element itself */
}

/* Better viewport handling on mobile Safari/Chrome */
@supports (height: 1svh) {
  .hero-video {
    max-height: calc(90svh - 80px);  /* keep controls on-screen */
  }
}
/* Links page styling */
.page-links {
  display: block;
  min-height: auto;
  padding: 1rem;
  text-align: center;
}

.links-title {
  font-size: 2rem;
  margin-top: 3.5rem; /* room for top nav */
  margin-bottom: 1rem;
  text-align: center; /* centered on desktop */
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 1rem auto;
  max-width: 900px;
}

.link-list li {
  margin: 0.75rem 0;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
}

.link-list a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  line-height: 1.4;
}

.link-list a:hover {
  border-bottom-color: black;
}

@media (max-width: 768px) {
  .links-title {
    text-align: left; /* mobile - match link alignment */
  }
}

.extra-images {
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.extra-images h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem;
}

.image-grid img {
  width: 100%;
  height: auto;            /* keeps aspect ratio */
  display: block;
  border: 1px solid #ccc;  /* optional styling */
  background: #f9f9f9;     /* for when images load slowly */
}

.page-links .footer-nav {
  text-align: center !important;
}


/* Timeline page layout */
.page-timeline {
  display: block;
  padding: 1rem;
  text-align: center;
}

/* Header */
.timeline-header h1 {
  font-size: 2rem;
  margin-top: 3.25rem; /* room for sticky nav */
  margin-bottom: 0.25rem;
}
.timeline-subtle {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* Year selector */
.timeline-years {
  position: sticky;
  top: 2.5rem; /* below sticky nav */
  z-index: 10;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);

  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.year-btn {
  appearance: none;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.year-btn:hover { border-color: #000; }
.year-btn.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Cards container */
.timeline-cards {
  max-width: 900px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
  text-align: left;
  box-sizing: border-box;
}

/* Each card */
.timeline-card {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 1rem;
  margin: 0.75rem 0;
  background: #fff;
}
.timeline-card h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

/* Hidden state applied by JS */
.timeline-card[hidden] {
  display: none !important;
}

/* Optional media inside cards */
.timeline-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0.5rem;
  border: 1px solid #ccc;
}

/* Desktop: keep years in a neat row */
@media (min-width: 800px) {
  .timeline-cards { margin-top: 1.25rem; }
}
.timeline-video-link {
  position: relative;
  display: block;
  margin-top: 0.5rem;
  border: 1px solid #ccc;
}

.timeline-video-link img {
  display: block;
  width: 100%;
  height: auto;
}

.timeline-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  padding: .35em .55em;
  border-radius: 50%;
  pointer-events: none;
}

.timeline-media {
  margin-top: 0.5rem;
  display: flex;               /* lets us center content */
  justify-content: center;     /* centers horizontally */
}

.timeline-media img,
.timeline-media video {
  display: block;
  width: 100%;                  /* fill available width */
  max-width: 100%;              /* no bigger than card */
  height: auto;
  object-fit: contain;          /* keeps aspect ratio */
}

/* ---- Vermin (audio) page ---- */
.page-audio { 
  display: block; 
  min-height: auto; 
  padding: 1rem; 
  text-align: center; 
}

.audio-wrap { 
  max-width: 900px; 
  margin: 1.25rem auto 2rem; 
  padding: 0 1rem; 
  box-sizing: border-box; 
}

.audio-title { 
  font-size: 2rem; 
  margin-top: 3.25rem;   /* space under sticky nav */
  margin-bottom: 1rem; 
}

.audio-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1rem; 
}

.audio-item { 
  text-align: left; 
  border-top: 1px solid #ddd; 
  padding-top: 1rem; 
}

.audio-meta { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: baseline; 
  gap: .5rem; 
  margin-bottom: .5rem; 
}

.audio-name { 
  font-size: 1.1rem; 
  margin: 0; 
}

.audio-note { 
  font-size: .9rem; 
  color: #555; 
}

.audio-item audio { 
  width: 100%; 
  max-width: 100%; 
  display: block; 
  margin: .25rem 0 .5rem; 
  box-sizing: border-box; 
}

.audio-actions a { 
  color: black; 
  text-decoration: none; 
  border-bottom: 1px solid #ccc; 
}

.audio-actions a:hover { 
  border-bottom-color: black; 
}

/* wider: optional two-column list (comment out if you prefer single column) */
@media (min-width: 900px) {
  .audio-list { grid-template-columns: 1fr 1fr; }
}
/* active link styling for nav via aria-current */
.top-right-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Audio cards (vermin) ---- */
.page-audio { display:block; padding:1rem; text-align:center; }
.page-title { font-size:2rem; margin:3.25rem 0 1rem; }

.cards-wrap {
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* New: top-row tabs (mirrors timeline look) */
#clip-tabs.timeline-years {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-start;
  margin: .25rem 0 1rem;
  text-align: left; /* so buttons align left inside centered layout */
}

/* Reuse your “year button” vibe */
#clip-tabs .year-btn {
  appearance: none;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  padding: .35rem .6rem;
  border-radius: .4rem;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#clip-tabs .year-btn:hover { background: #f2f2f2; }
#clip-tabs .year-btn:active { background: #eee; }

/* Selected tab (like your timeline “current year”) */
#clip-tabs .year-btn[aria-selected="true"] {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Keyboard focus */
#clip-tabs .year-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Cards grid */
#audio-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: left; /* cards read left; page title stays centered */
}

/* Card shell (matches timeline vibe) */
.card {
  border: 1px solid #e5e5e5;
  padding: 1rem;
  background: #fff;
}

.card-head { display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; margin-bottom:.25rem; }
.card-title { font-size:1.25rem; margin:0; word-break:break-word; }
.card-meta { font-size:.9rem; color:#666; }

.card-quote {
  margin:.5rem 0 .75rem;
  padding-left:.9rem;
  border-left:3px solid #ddd;
  color:#333;
  font-style:italic;
}

.card-media audio { width:100%; display:block; margin:.25rem 0 .5rem; box-sizing:border-box; }

.card-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.25rem; }
.card-actions a { color:black; text-decoration:none; border-bottom:1px solid #ccc; }
.card-actions a:hover { border-bottom-color:black; }

/* Subtle motion for card reveal when filtering */
.audio-card { transition: opacity .18s ease, transform .18s ease; }
.audio-card[style*="display: none"] { opacity:0; }

/* Optional two-column on wide screens (uncomment if you want) */
/*
@media (min-width: 960px) {
  #audio-cards { grid-template-columns: 1fr 1fr; }
}
*/

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .audio-card { transition: none; }
  #clip-tabs .year-btn { transition: none; }
}
.card-poster {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
  border: 1px solid #e5e5e5;
  background: #f9f9f9;
  object-fit: cover;
}