/* ============================================
   Alex Waltz Portfolio — style.css
   Reference width: 1920px. All units in vw.
   ============================================ */

:root {
  --red: #f20000;
  --bg: #000;
  --text: #fff;

  /* Spacing */
  --gap-photos:0.60vw;
  --margin-photos: 0.89vw;
  --gap-videos: 0.795vw;
  --space-between-sections: 11.46vw;

  /* Typography — visually matched to mockup proportions */
  --fs-logo-name: 6.0vw;
  --fs-logo-subtitle: 1.75vw;
  --fs-logo-portfolio: 4.4vw;
  --fs-nav: 1.8vw;
  --fs-scroll: 1.15vw;
  --fs-section-title: 2.25vw;
  --fs-footer: 0.75vw;
}

/* --- Reset --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-width: 320px;
  font-family: "futura-pt", "Futura", sans-serif;
  background: var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.red {
  color: var(--red);
}

img, video {
  display: block;
  max-width: 100%;
}

/* --- Cover Section --- */
.cover-container {
  position: relative;
  padding-top: 4.2vw;
  padding-bottom: 0;
  background: var(--bg);
  min-height: min(100svh, calc(100vw / 2.35 + 5.5vw + 10vw));
  display: flex;
  flex-direction: column;
}

.cover-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  flex-shrink: 0;
}

.cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* !! LOCKED — Logo & Nav values approved by user, do NOT change !!
   Logo: name=6.0vw, subtitle=1.85vw, portfolio=4.4vw
   Logo position: left=0.5%, top=0.8%
   Logo spacing: margin-top=-0.85vw on subtitle and portfolio
   Nav: size=1.61vw, weight=700, top=3%, right=1.1%, gap=1.5vw
   !! END LOCKED !! */

/* --- Logo (overlaid on cover photo) --- */
.logo {
  position: absolute;
  left: 0.5vw;
  top: -0.36vw;
  z-index: 2;
  line-height: 1;
}

.logo a {
  display: block;
}

.logo-name {
  font-size: var(--fs-logo-name);
  font-weight: 800; /* Extra Bold */
  letter-spacing: 0.12vw;
  text-transform: uppercase;
  line-height: 5.7vw;
}

.logo-subtitle {
  font-size: var(--fs-logo-subtitle);
  font-style: italic;
  font-weight: 500; /* Medium Oblique */
  margin-top: -0.85vw;
  line-height: 2.22vw;
}

.logo-subtitle .amp {
  color: var(--red);
  font-weight: 600; /* Demi Oblique */
}

.logo-portfolio {
  font-size: var(--fs-logo-portfolio);
  font-weight: 700; /* Bold */
  text-transform: uppercase;
  letter-spacing: 0.09vw;
  margin-top: -0.85vw;
  line-height: 4.4vw;
}

/* --- Navigation (overlaid on cover photo, top-right) --- */
.nav {
  position: absolute;
  top: 0.93vw;
  right: 1.1vw;
  z-index: 2;
  display: flex;
  gap: 1.0vw;
  align-items: baseline;
}

.nav-item {
  font-size: var(--fs-nav);
  font-weight: 700; /* Bold — Heavy (900) not in Adobe Fonts project, add it there for true Heavy */
  text-transform: uppercase;
  letter-spacing: 0.07vw;
  position: relative;
  padding-bottom: 0.2vw;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.12vw;
  background: var(--text);
  min-height: 1.5px;
}

/* Red "s" — same size, same weight, just lowercase and red */
.nav-suffix {
  color: var(--red);
  text-transform: lowercase;
}

/* --- Scroll Indicator --- */
.scroll-indicator {
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15vw;
  padding: 0.65vw 0 0;
}

.scroll-text {
  font-size: var(--fs-scroll);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
  padding-left: 0.2em;
  line-height: 1;
}

.scroll-triangle {
  width: 5.15vw;
}

.scroll-triangle svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Sections --- */
.sections {
  background: var(--bg);
  padding: 0 var(--gap-videos);
}

.section-title {
  font-size: var(--fs-section-title);
  font-weight: 800; /* Extra Bold */
  letter-spacing: 0.09vw;
  margin-bottom: 0.15vw;
}

/* "from" — same weight, just lowercase. NOT italic. */
.section-from {
  text-transform: lowercase;
}

/* "s" in section titles — same size, same weight, just lowercase and red */
.section-s {
  color: var(--red);
  text-transform: lowercase;
}

/* --- Films Section --- */
.films-section {
  padding-top: 1.5vw;
}

.films-grid-row1 {
  display: flex;
  gap: var(--gap-videos);
}

.film-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
}

.film-card video {
  width: 100%;
  display: block;
  background: #111;
}

.films-grid-row1 .film-card video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.films-grid-row1 .film-card {
  flex: 1;
}

.films-grid-row2 {
  margin-top: var(--gap-videos);
}

.films-grid-row2 .film-card {
  width: 100%;
}

.films-grid-row2 .film-card video {
  aspect-ratio: 2.67 / 1;
  object-fit: cover;
}

/* --- Writings Section --- */
.writings-section {
  padding-top: var(--space-between-sections);
}

.tweets-grid {
  display: flex;
  gap: var(--gap-photos);
  margin-top: 0.5vw;
  align-items: flex-start;
}

.tweet-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* --- Photos Section --- */
.photos-section {
  padding-top: var(--space-between-sections);
}

/* --- PHOTOs page galleries --- */
/* All photos-page selectors are prefixed `photos-` to avoid collisions with
   HOME's unprefixed classes and the contact agent's `.contact-*` classes.
   Used in site/photos/index.html and site/js/photos.js. */
.photos-gallery-section {
  padding-top: var(--space-between-sections);
}
.photos-bc-section {
  padding-top: 1.5vw;
}

/* Full-width banner (e.g. stitched MoviePoster). Sits flush with the 2-col
   grid above using the same vertical gap. */
.photos-bc-banner {
  margin-top: var(--gap-photos);
}
.photos-bc-banner .photo-card,
.photos-bc-banner picture,
.photos-bc-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.photos-grid {
  display: flex;
  gap: var(--gap-photos);
  margin-top: 1vw;
}

.photos-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-photos);
}

.photo-card {
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.photo-card picture,
.photo-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 1.65vw 0 1.45vw;
  font-size: var(--fs-footer);
  letter-spacing: 0.05em;
}

.footer-demi {
  font-weight: 600; /* Demi */
}

.footer-medium {
  font-weight: 500; /* Medium */
}

.footer-heavy {
  font-weight: 700; /* Heavy — 700 is closest available, 900 not in font project */
}

/* --- Lightbox (cinema styling) --- */
.lg-backdrop {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.lg-cinema .lg-toolbar,
.lg-cinema .lg-actions .lg-prev,
.lg-cinema .lg-actions .lg-next {
  background: transparent;
}
.photo-card {
  cursor: zoom-in;
  display: block;
}