/* ============================================
   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 {
  position: relative; /* anchor for .markdown-edge-link's absolute positioning */
  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;
}

/* --- 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.14em;
  line-height: 1;
}

.scroll-triangle {
  width: 5.15vw;
  animation: scroll-triangle-bob 2s ease-in-out infinite;
}

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

@keyframes scroll-triangle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.35vw); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-triangle { animation: none; }
}

/* --- 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;
}

/* Reserve space for the HOME content grids before JS populates them, so
   everything below doesn't jump when cards inject. Values match measured
   final heights; content is fully vw-proportional (no responsive
   breakpoints), so the same vw value works at any viewport width.
   Scoped by ID so other pages' galleries are unaffected. */
#films-row1 {
  min-height: 18.2vw;
}

#films-row2 {
  min-height: 37vw;
}

#tweets-grid {
  min-height: 38vw;
}

#photos-grid {
  min-height: 85vw;
}

/* Reserve space for the PHOTOs page galleries before JS populates them.
   Same pattern + intent as the HOME #films-row1/#tweets-grid/#photos-grid
   block above — JS-rendered grids would otherwise start at 0 height on
   slow networks and cause layout shift when the cards inject (mobile slow-4G
   CLS was 0.674 — a Core Web Vitals failure — before these reservations).
   Values are measured at the rendered output and expressed in vw so they
   scale across all viewports without media queries. Update the relevant
   line if a gallery's photo count changes by more than a few entries. */
#bc-grid       { min-height: 42.18vw; }
#bc-banner     { min-height: 41.82vw; }
#sde-grid      { min-height: 40.12vw; }
#olympus-grid  { min-height: 39.59vw; }
#kiev-grid     { min-height: 13.58vw; }
#jm-grid       { min-height: 45.05vw; }
#gb-grid       { min-height: 35.78vw; }
#sp-grid       { min-height: 157.77vw; }

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

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

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

/* --- Footer --- */
.footer {
  position: relative;
  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 */
}

/* --- Markdown-version edge link (home only) ---
   Absolute-positioned label at the bottom-left of the page (sibling of
   .footer in the DOM, NOT inside it). Sits at the same vertical level as
   the footer text — only visible when scrolled to the bottom, mirroring
   the back-to-top button's behavior on the right. Same font size/weight
   as "Grazie Dio!"; "Markdown" word picks up the site's red accent. */
.markdown-edge-link {
  position: absolute;
  left: 1.25vw;
  bottom: 1.28vw; /* tuned via ?edit visual editor */
  font-size: 0.8vw;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  /* Lift above the footer (z-index: 10001 from grain.css). Without this,
     the footer's full-width box sits on top and swallows clicks even
     though it visually looks empty in the area where this link renders. */
  z-index: 10002;
}

.markdown-edge-link:hover {
  text-decoration: underline;
}

/* --- Back to Top button --- */
.back-to-top {
  position: absolute;
  right: 0.85vw;
  bottom: 25%;
  display: flex;
  align-items: center;
  gap: 0.348vw;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: "futura-pt", "Futura", sans-serif;
  color: var(--text);
  line-height: 1;
}

.back-to-top-triangle {
  width: 1.368vw;
  display: block;
}

.back-to-top-triangle svg {
  display: block;
  width: 100%;
  height: auto;
}

.back-to-top-text {
  font-size: 1.14vw;
  font-weight: 900; /* Heavy */
  letter-spacing: 0.017vw;
  text-transform: uppercase;
  line-height: 1;
  /* clamp() keeps the border at 2px on every desktop viewport (≥1428px)
     so the box looks identical to the static-2px original. Below ~1428px
     it scales down via the 0.14vw middle value, so mobile no longer reads
     as chunky-bordered. Same fix as .grain-toggle. */
  border: clamp(0.5px, 0.14vw, 2px) solid rgba(255, 255, 255, 0.45);
  border-radius: clamp(0.3px, 0.09vw, 1.33px);
  /* Asymmetric y-padding to optically center uppercase Futura (same
     trick as .grain-toggle). */
  padding: 0.13vw 0.3vw 0.2vw;
}

.back-to-top-to {
  color: var(--red);
}

/* --- 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;
}

/* --- A11y utilities --- */
/* Visually-hidden but accessible to screen readers and search crawlers.
   Used for the per-page <h1> that gives each page a semantic main heading
   without altering the visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}