/* ===================================================================
   TOKENS
   =================================================================== */
:root {
  --ink: #0E0D0C;
  --paper: #FFFFFF;
  --panel-bg: #FFFFFF;
  --panel-text: #1A1A1A;

  --font-body: "Times New Roman", sans-serif;
  --ease: cubic-bezier(0, 0, 0, 0);
  --slide-duration: 0s; /* how slow the carousel slide is */
  --name-space: 64px; /* fallback only — script.js overwrites this with the name's real measured height */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.00ms !important; }
}

/* ===================================================================
   CAROUSEL — 4:3 slides in a row, full viewport height.
   Slide width is set inline by script.js (height * 4/3) so it
   always matches the true 4:3 ratio at any window size.
   =================================================================== */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

#track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform var(--slide-duration) var(--ease);
}

.slide {
  flex: none;
  height: 100%;
  position: relative;
  background-size: cover;   /* matches the frame exactly since the
                                frame's own ratio is set to 4:3 in JS */
  background-position: center;

  /* PLACEHOLDER ART — replace with your own photo, e.g.
     background-image: url("images/01.jpg");
     Keep the image itself at a true 4:3 ratio so nothing crops. */
}

.slide[data-index="0"] { background-image: url("images/01.jpg"); }
.slide[data-index="1"] { background-image: url("images/02.jpg"); }
.slide[data-index="2"] { background-image: url("images/03.jpg"); }
.slide[data-index="3"] { background-image: url("images/04.jpg"); }
.slide[data-index="4"] { background-image: url("images/05.jpg"); }
.slide[data-index="5"] { background-image: url("images/06.jpg"); }
.slide[data-index="6"] { background-image: url("images/07.jpg"); }
.slide[data-index="7"] { background-image: url("images/08.jpg"); }
.slide[data-index="8"] { background-image: url("images/09.jpg"); }
.slide[data-index="9"] { background-image: url("images/10.jpg"); }

/* Optional per-photo caption, bottom-left of each slide.
   Delete the <p class="caption"> in index.html if you don't want it. */
.caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  margin: 0;
  color: var(--paper);
  font-size: 16px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 6px rgba(0,0,0,0);
}

/* ===================================================================
   NAME — the only fixed page text, top-right, opens the popup.
   =================================================================== */
#name-trigger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 6; /* stays above the popup so it's still visible when open */
  background: none;
  border: none;
  padding: 0;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 24px;
  letter-spacing: 0.00em;
  cursor: pointer;
  text-shadow: 0 0px 0px rgba(0,0,0,0);
}
#name-trigger:hover { opacity: 1; }

/* When the popup is open, the background behind the name is now
   white, not a photo — so swap to dark text and drop the shadow.
   The body.popup-open class is added/removed by script.js. */
body.popup-open #name-trigger {
  color: var(--panel-text);
  text-shadow: none;
}

/* ===================================================================
   INFO POPUP — now a full white page that slides in from the right
   and covers the whole screen when the name is clicked.
   =================================================================== */
#info-popup {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 — fills the viewport */
  height: 100dvh; /* extra safety net: matches the real visible screen
                      on mobile, ignoring the address bar's dynamic
                      height changes. Ignored by older browsers, which
                      simply keep using inset: 0 above. */
  z-index: 5;
  background: var(--panel-bg);
  transform: translateX(100%);
  transition: transform 0s var(--ease); /* 0 = instant, no slide. Raise this (e.g. 0.5s) to bring the slide back. */
}
#info-popup.open {
  transform: translateX(0);
}

/* Close button, bottom-left of the popup as requested */
#close-popup {
  display: none; /* hidden — the popup still closes by clicking the
                     name again, or pressing Escape */
  position: absolute;
  left: 20px;
  bottom: 18px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--panel-text);
  cursor: pointer;
  opacity: 1;
}
#close-popup:hover { opacity: 1; }

/* Open text area — style this however you like. Nothing here
   is load-bearing except the box model (padding keeps text off
   the edges and away from the close button). */
#popup-text {
  height: 100%;
  /* left matches #name-trigger's left: 32px, so text lines up directly
     under the name. Top clears the name's height; bottom clears the ✕. */
  padding: 45px 20px 20px 20px;
  overflow-y: auto;
  box-sizing: border-box;
  color: var(--panel-text);
  font-family: var(--font-body); /* Times New Roman, matching the rest of the site */
  font-size: 24px;
  line-height: 1;
	max-width: 500px
}
#popup-text a {
  color: var(--panel-text);
  text-decoration: underline;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* Small-phone-only fine-tuning (name position, popup padding).
   This is a plain width check, separate from the orientation logic
   below, since it's just about screen real estate, not photo layout. */
@media (max-width: 600px) {
  #name-trigger { top: 18px; left: 20px; }
  #popup-text { padding: 45px 20px 20px 20px; }
}

/* Portrait layout — covers phones AND tablets (e.g. iPad) held
   upright, regardless of exact pixel width. Landscape orientation
   is intentionally NOT covered here, so rotating any device back to
   horizontal automatically falls through to the default full-screen
   carousel further up this file — no separate rule needed for that. */
@media (orientation: portrait) {
  /* Phones/tablets are much taller than 4:3, so instead of filling
     the full screen height, the carousel becomes a shorter
     horizontal band — vertically centered — with white space above
     and below. Because the band is a bit wider than an individual
     4:3 photo, there's still a sliver of the next photo peeking in
     on the right, same idea as the desktop version. */
  html, body {
    background: var(--panel-bg); /* white, for the letterbox bars */
  }
  #stage {
    inset: auto;      /* cancel the desktop inset: 0 */
    left: 0;
    width: 100vw;
    height: 66.6667vw; /* 100vw * (2/3) → a 3:2 band */
    /* Center the band in the space BELOW the name (not the whole
       screen). --name-space is set precisely by script.js, based on
       the name's real rendered height — not a guessed number.
       Declared twice: the vh version is the fallback, the dvh
       version (used by modern browsers) accounts for mobile
       browsers' address bar more accurately. */
    top: calc(var(--name-space) + (100vh - var(--name-space) - 66.6667vw) / 2);
    top: calc(var(--name-space) + (100dvh - var(--name-space) - 66.6667vw) / 2);
  }

  /* The name now always sits over a white bar in portrait mode
     (not just when the popup is open), so it needs dark text
     even when the popup is closed. */
  #name-trigger {
    color: var(--panel-text);
    text-shadow: none;
  }

  /* Font size stays exactly the same as everywhere else (24px, set
     in the base #popup-text rule above) — only the box's available
     width changes per device, via padding-right in vw. That's what
     redistributes the text into more/fewer lines on different
     screens without touching the font size itself. */
  #popup-text {
    max-width: none;         /* let width follow the padding below, not a fixed cap */
    padding-right: 10vw;     /* scales with screen width — adjust this to taste */
  }
}