/* =========================
   Global / default styling
   (used by Research + Music)
   ========================= */

* { box-sizing: border-box; }

html { background: #000; }

html, body {
  margin: 0;
  padding: 0;
}

body{
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  color: #333;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 { margin: 0.5em 0; }
p { line-height: 1.6; }

/* Header and Navigation */
header{
  background: #333;
  color: #fff;
  padding: 10px 0;
  position: relative;
  z-index: 2;
}

.nav-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.logo a{
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
}

.logo{
  margin: 0;
  line-height: 1;
  font-size: 1em;
}

nav a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

nav a{
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
  font-size: 1em;
}

nav a:hover{ text-decoration: underline; }

/* Main content container (default pages) */
main{
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
}

/* Footer */
footer{
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  margin-top: 40px;
  font-size: 0.9em;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* =========================
   Home page shader background
   ========================= */

#shaderCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
}

body.home{
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

body.home main{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.home .main-content{
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
}

.carousel .slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

body.home header,
body.home footer{
  background: rgba(51, 51, 51, 0.9);
}

body.home main{
  background: transparent;
}

body.home .home-section,
body.home .caption,
body.home .carousel .prev,
body.home .carousel .next{
  /* readable over shader */
}

/* =========================
   Home page: HARD scroll lock (desktop + mobile)
   ========================= */

html {
  background: #333333;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* remove the later global html, body { height: 100%; } rule */

body.home {
  height: 100%;
}

/* Home only: lock body to viewport */
body.home{
  position: fixed;         /* key: removes document scroll */
  inset: 0;                /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;

  /* helps on mobile browsers */
  overscroll-behavior: none;
}

/* Use dynamic viewport height on mobile to avoid address-bar jumpiness */
@supports (height: 100dvh) {
  body.home { height: 100dvh; }
}

/* Prevent accidental scroll chaining */
body.home main{
  overflow: hidden;
  overscroll-behavior: none;
}


/* =========================
   Carousel Styles (FIXED)
   ========================= */

.carousel{
  position: relative;
  max-width: 100%;
  margin: 20px auto;
  overflow: hidden;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

/* Base slide: truly hidden */
.slide{
  display: none;
  position: relative;
  width: 100%;
  opacity: 0;
  pointer-events: none;

  /* Center whatever is inside */
  align-items: center;
  justify-content: center;

  height: 60vh;
  overflow: none;
}

/* Active slide: visible + centered */
.slide.active{
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Shared “media box” sizing ----------
   This keeps images/videos the same general size and centered.
*/
.slide > img,
.video-wrap{
  width: min(90vw, 800px);

  align-items: center;
  justify-content: center;
}

/* Image behavior: DO NOT force width:100% */
.slide > img{
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Video slide */
.slide.video-slide{
  background: transparent;
  width: 100%;
}

.video-wrap {
  position: relative;
  width: min(90vw, 800px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000; /* safe fallback */
}

.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1) {
  .video-wrap{
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    background: #000;
    overflow: hidden;
  }
  .video-wrap iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Caption stays anchored */
.caption{
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  max-width: 80%;
  font-family: Verdana, sans-serif;
}

/* Carousel nav buttons */
.carousel .prev,
.carousel .next{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 2em;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 10;
}
.carousel .prev{ left: 10px; }
.carousel .next{ right: 10px; }
.carousel .prev:hover,
.carousel .next:hover{ background: rgba(0,0,0,0.8); }

/* Optional: keep your shader-peek behavior */
.slide.shader-peek { min-height: 0; max-height: 45vh; }
.slide.shader-peek.active { min-height: 0; max-height: 45vh; background: none; }

.home-sections{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.home-section{
  background: #fff;
  padding: 15px;
  flex: 1 1 45%;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  text-align: center;
}

.home-section h2{ margin-top: 0; }

.home-section img.home-thumb{
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

.home-section p{ font-size: 0.95em; }

.home-section a{
  color: #0066cc;
  text-decoration: none;
  font-weight: bold;
}

.home-section a:hover{ text-decoration: underline; }

.research-item{
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.research-item h3{
  font-size: 1.1em;
  margin-top: 0.2em;
}

.research-item p{ text-align: justify; }

.album{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.album-cover{
    width: 200px;
    flex-shrink: 0;
}

.spotify-player{
    width: 352px;
    flex-shrink: 0;
}

@media (max-width: 600px){
  .home-sections{ flex-direction: column; }
  .album{
    flex-direction: column;
    text-align: center;
  }
  .album img{ margin: 0 0 10px; }
  .album-info{ text-align: center; }
}

/* ====================================================================
   Research awards sizing

   The publication pages reuse the ``album-cover`` class for award images.
   These awards were previously sized like music album covers (150px wide),
   which made them tiny and hard to read.  To improve readability without
   making them overwhelming, this rule targets only images inside a research
   detail section and increases their width.  You can adjust the ``width``
   value below to control how large the awards appear.  Setting ``height: auto``
   preserves each image’s aspect ratio, while ``max-width: 100%`` prevents
   overflow in narrow layouts.
*/
.research-details .album-cover {
  width: 450px;
  height: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 1rem;
}



/* Award gallery layout */
.award-gallery{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:20px 0;
}

.award-gallery .album-cover{
  width:300px;
  height:auto;
  margin:0;
}

/* ====================================================================
   Music page responsive layout

   On medium‑sized screens, the three‑column music album layout becomes too
   cramped: the album art, description and Spotify player all remain in a
   single row, causing the text column to shrink until it wraps to one
   word per line.  To address this, the following media query triggers
   when the viewport is narrower than 900px.  At that point the album
   container switches to a vertical stack (three rows) so that each piece
   of content has enough horizontal room.  The album art is centered with
   space below it, and the Spotify player expands to the full width of its
   container.  You can adjust the ``900px`` breakpoint to suit your needs.
*/
@media (max-width: 900px) {
  .album {
    flex-direction: column;
    text-align: center;
  }
  .album .album-cover {
    margin: 0 auto 10px;
  }
  .album .album-info {
    text-align: center;
  }
  .album .spotify-player {
    width: 100%;
    margin-top: 10px;
  }
}


.album-info{
    flex: 1;
}

.album-info h3{
    margin-top: 0;
}

/* =========================
   Footer social icon buttons
   ========================= */

.footer-inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-copy{
  margin: 0;
}

/* icon row */
.social-links{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* button feel */
.social-btn{
  width: auto;
  height: auto;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  border-radius: 0;

  text-decoration: none;
}


.social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}

.social-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

/* icon sizing */
.social-btn img{
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
  filter: invert(1);
}

/* Mobile: stack nicely */
@media (max-width: 600px){
  .footer-inner{
    flex-direction: column;
    justify-content: center;
  }
}
/* =========================
   Dark mode polish
   Reduced-eyestrain dark theme for Music + Publications / default pages.
   Appended as overrides so the existing layout and carousel logic remain intact.
   ========================= */
:root{
  --bg-dark: #0b0d10;
  --panel-dark: #15181d;
  --panel-dark-soft: #111419;
  --text-main: #d6d9de;
  --text-muted: #aeb6c2;
  --text-strong: #eef1f5;
  --border-soft: rgba(255,255,255,0.08);
  --shadow-dark: 0 10px 28px rgba(0,0,0,0.35);
  --link-dark: #8eb8ff;
  --link-dark-hover: #c4d8ff;
}

html{
  background: var(--bg-dark);
}

body:not(.home){
  background:
    radial-gradient(circle at top left, rgba(60,76,100,0.18), transparent 34rem),
    var(--bg-dark);
  color: var(--text-main);
}

body:not(.home) header,
body:not(.home) footer,
body.home header,
body.home footer{
  background: rgba(10,12,15,0.96);
  color: var(--text-strong);
  border-color: var(--border-soft);
}

body:not(.home) header{
  border-bottom: 1px solid var(--border-soft);
}

body:not(.home) footer{
  border-top: 1px solid var(--border-soft);
}

body:not(.home) main{
  color: var(--text-main);
}

body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) strong{
  color: var(--text-strong);
}

body:not(.home) p,
body:not(.home) li{
  color: var(--text-main);
}

body:not(.home) em{
  color: var(--text-muted);
}

body:not(.home) main a{
  color: var(--link-dark);
}

body:not(.home) main a:hover{
  color: var(--link-dark-hover);
}

body:not(.home) a:hover{
  color: var(--link-dark-hover);
}

body:not(.home) .research-item,
body:not(.home) .album,
body:not(.home) .home-section{
  background: linear-gradient(180deg, var(--panel-dark), var(--panel-dark-soft));
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-dark);
}

body:not(.home) .research-item,
body:not(.home) .album{
  border-radius: 12px;
}

body:not(.home) .research-item h2,
body:not(.home) .album-info h3{
  color: var(--text-strong);
}

body:not(.home) .research-item h3,
body:not(.home) .research-item h4,
body:not(.home) .album-info p{
  color: var(--text-muted);
}

body:not(.home) .album-cover{
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

body:not(.home) .spotify-player iframe,
body:not(.home) iframe[src*="spotify"]{
  border-radius: 12px;
}

body:not(.home) .social-btn:hover{
  background: rgba(255,255,255,0.08);
}


/* iPhone double-tap zoom guard for carousel controls.
   This preserves normal page behavior while making rapid taps on the
   slideshow arrows behave like app buttons instead of zoom targets. */
.carousel .prev,
.carousel .next{
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Collapsible research/publication cards */
.research-item{
  overflow: hidden;
}

.research-summary{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.research-summary::-webkit-details-marker{
  display: none;
}

.research-summary::before{
  content: "▸";
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 160ms ease;
  color: var(--text-muted, #666);
}

.research-item[open] .research-summary::before{
  transform: rotate(90deg);
}

.research-summary h2{
  margin: 0;
}

.research-summary:hover h2,
.research-summary:focus-visible h2{
  text-decoration: underline;
}

.research-summary:focus-visible{
  outline: 2px solid var(--link-dark, #66b3ff);
  outline-offset: 4px;
  border-radius: 8px;
}

.research-details{
  padding-top: 1rem;
}

.research-details > :first-child{
  margin-top: 0;
}

/* =========================
   Carousel viewport-centering override
   =========================
   The carousel arrows are fixed to the center of the viewport. These rules
   pin the carousel stage to that same viewport so the active slide media
   stays aligned with the arrows on tall desktop windows and mobile screens.
*/
body.home main{
  padding: 0;
  overflow: visible;
}

body.home .main-content{
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.home .carousel{
  width: 100vw;
  height: 100vh;
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

body.home .slide{
  height: 100vh;
  max-height: 100vh;
  align-items: center;
  justify-content: center;
}

body.home .slide.active{
  display: flex;
}

body.home .slide.shader-peek,
body.home .slide.shader-peek.active{
  height: 100vh;
  max-height: 100vh;
}

/* Title-free rotating portrait slide. Both synchronized GIFs remain loaded and
   animated; the shader's shared glitch state only changes which layer is seen. */
body.home .brendan-slide{
  position: relative;
}

body.home .brendan-gif{
  position: relative;
  width: min(72vw, 560px);
  height: min(72vw, 560px);
  max-width: 72vh;
  max-height: 72vh;
}

body.home .brendan-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
}

body.home .brendan-frame.is-visible,
html:not(.shader-glitch-active) body.home .brendan-regular,
html.shader-glitch-active body.home .brendan-glitched{
  opacity: 1;
  visibility: visible;
}

html.shader-glitch-active body.home .brendan-regular{
  opacity: 0;
  visibility: hidden;
}

@supports (height: 100dvh){
  body.home .main-content,
  body.home .carousel,
  body.home .slide,
  body.home .slide.shader-peek,
  body.home .slide.shader-peek.active{
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* =========================
   Caption-to-media spacing fix
   =========================
   Keep the carousel media centered on the same viewport axis as the arrows,
   but move the caption from the bottom of the full slide to just below the
   centered media box.
*/
body.home .caption{
  bottom: auto;
  top: calc(50% + min(25.3125vw, 225px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(80vw, 760px);
  text-align: center;
  padding: 8px 10px;
}

body.home .caption h2,
body.home .caption p{
  margin-top: 0;
  margin-bottom: 0;
}

body.home .caption h2 + p{
  margin-top: 3px;
}