/* ==========================================================================
   A · TUNE-UP, 2026-09-23
   Loaded AFTER style.css (and after trade.html's inline <style>).
   Same site, same look. Fixes what is broken, raises the type floor,
   stops hiding content behind hover. Delete this file to roll back.
   ========================================================================== */

/* ---- 1. Mobile: the page scrolled sideways (610px wide on a 390px phone) ---- */
html, body { overflow-x: clip; }
.trade-slider-track > *,
.trade-grid > *,
.works-grid > *,
.about-grid > * { min-width: 0; }
.trade-panel, .works-panel, .about-panel { min-width: 0; }
.trade-header-row { flex-wrap: wrap; gap: 0.25rem 1.5rem; }
@media (max-width: 768px) {
  .header-logo { left: 1.5rem; transform: none; align-items: flex-start; text-align: left; }
  .header-controls { margin-left: auto; }
}

/* ---- 2. Slider dots: inactive dots had a 0px content box, so only the active one showed ---- */
.trade-dot, .slider-dot {
  width: 28px; height: 28px; padding: 10px;
  background: var(--text-dim);
  background-clip: content-box;
  opacity: 0.55;
}
.trade-dot.active, .slider-dot.active { opacity: 1; background-color: var(--accent); transform: none; }
.trade-dot:hover, .slider-dot:hover { opacity: 0.9; transform: none; }

/* ---- 3. Type floor. Nothing readable under 12px, body copy at 16–17px ---- */
.header-logo-sub, .header-dsc-sub, .footer-dsc-sub, .scroll-text,
.bc-now-playing, .bc-playlist-num, .bc-playlist-artist,
.about-portrait-hint, .footer-dot { font-size: 0.7rem; }

.trade-team-role, .trade-team-collab-title, .services-subheading, .credit-label,
.trade-fiscal, .trade-detail-heading, .trade-support-need, .trade-donate-label,
.works-tag, .works-more-text, .process-cell-heading, .equipment-cat-title,
.contact-email, .footer-dsc-name, .footer-whatsapp-link, .btn, .trade-donate-btn,
.trade-tax-note, .footer-touch-label, .footer-touch-input, .trade-collab-role {
  font-size: 0.75rem;
}

.trade-synopsis,
.trade-story-text p,
.trade-support-text,
.trade-detail-text p,
.about-content p,
.process-cell--text p { font-size: 1.0625rem; line-height: 1.7; }
.trade-collab-quote { font-size: 0.95rem; }
@media (max-width: 768px) {
  .trade-synopsis, .trade-story-text p, .trade-support-text,
  .trade-detail-text p, .about-content p, .process-cell--text p { font-size: 1rem; }
}

/* The fiscal line was 11px mono with 0.16em tracking: the funder-credibility line read like fine print */
.trade-fiscal { letter-spacing: 0.08em; color: var(--text-secondary); line-height: 1.7; }

/* ---- 4. Hero name: more presence, same composition ---- */
.hero-name { font-size: clamp(2.4rem, 6.2vw, 5rem); line-height: 0.98; }
@media (max-width: 480px) { .hero-name { font-size: clamp(2.1rem, 11vw, 2.8rem); } }

/* ---- 5. TRADE poster (was a password-locked Vimeo iframe) ---- */
.trade-video--poster { cursor: pointer; }
.trade-video--poster .video-container { position: relative; overflow: hidden; background: #000; }
.trade-video--poster img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s ease; opacity: .85;
}
.trade-video--poster:hover img { transform: scale(1.03); opacity: 1; }
.poster-cta {
  position: absolute; left: 1.25rem; bottom: 1.1rem; display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.poster-cta em { font-style: normal; color: var(--text-dim); letter-spacing: .08em; text-transform: none; }
.poster-play {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(242,235,216,.5); font-size: .8rem; color: var(--ink);
  transition: background .3s ease, border-color .3s ease;
}
.trade-video--poster:hover .poster-play { background: var(--accent); border-color: var(--accent); }

.trade-more {
  display: inline-flex; gap: .6rem; align-items: center; margin-top: 2.5rem;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text); border-bottom: 1px solid var(--divider); padding-bottom: .35rem;
  transition: border-color .3s ease, color .3s ease;
}
.trade-more:hover { border-color: var(--accent); }
.trade-more span { color: var(--accent); }

/* ---- 6. Works: posters instead of 5 autoplaying iframes; titles always visible (no hover on phones) ---- */
.works-item { display: flex; flex-direction: column; background: transparent; }
.works-item-video { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface); }
.works-item-video img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-item[data-vimeo]:hover .works-item-video img { transform: scale(1.035); }
.works-item-video--card { display: grid; place-items: center; }
.works-item-video--card span {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1; text-align: center; color: var(--text-secondary);
}
.works-item-overlay { display: none; }
.works-item-desc {
  position: static; opacity: 1; max-height: none; transform: none;
  padding: .7rem 0 0; background: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.works-item-desc h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--text); }
.works-item-desc .works-tag { white-space: nowrap; color: var(--text-dim); }
@media (max-width: 768px) {
  .works-item-video { aspect-ratio: 16 / 10; flex: none; }
  .works-item--portrait .works-item-video { aspect-ratio: 4 / 5; }
  .works-item-desc { flex-direction: column; gap: .2rem; }
}

/* ---- 7. /trade: collaborators as 4:5 portraits, not 56px circles ---- */
.trade-collab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.trade-collab-card { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.trade-collab-photo {
  width: 100%; height: auto; min-width: 0; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
}
.trade-collab-photo img { width: 100%; height: 100%; object-fit: cover; }
.trade-collab-name { font-size: 1.35rem; }
@media (max-width: 560px) { .trade-collab-cards { grid-template-columns: 1fr 1fr; } }

/* ---- 8. /trade hero: still image instead of the password prompt; the spine question becomes the event ---- */
.trade-page-hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55;
  animation: a-slowpush 24s ease-out both;
}
@keyframes a-slowpush { from { transform: scale(1.08); } to { transform: scale(1); } }
.trade-page-hero-tagline {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem) !important; line-height: 1.2 !important;
  max-width: 18ch !important; margin-left: auto; margin-right: auto;
  color: var(--ink) !important;
}
.trade-page-hero-tagline .mark { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .trade-page-hero-bg img { animation: none; } }

/* ---- 9. The slider pills were position:sticky, so they floated over the text while you read ---- */
.trade-nav, .works-nav, .about-nav { position: static; margin-top: 2rem; }

/* ---- 10. Works captions: title over role, sentence case reads calmer than caps serif ---- */
.works-item-desc { flex-direction: column; gap: .2rem; }
.works-item-desc h3 { text-transform: none; font-weight: 400; font-size: 1.1rem; margin: 0; }
.trade-collab-photo, .trade-collab-photo img { border-radius: 2px !important; border: 0 !important; }

/* ---- 11. Hero: if Vimeo is slow or blocked the hero was a black void. Poster frame underneath. ---- */
.hero-video-wrap { background: #0c0a08 url("assets/works/reel.jpg") center / cover no-repeat; }

@media (max-width: 480px) { .poster-cta em { display: none; } }

/* ---- 12. Support credits (2026-09-23): funders as a credit block, not fine print ---- */
.trade-credits { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--divider); display: grid; gap: .55rem; }
.trade-credits-row { font-size: .9rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.trade-credits-label {
  display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: .15rem;
}

/* ---- 13. Small phones: the centered name sat on top of the theme icon and swallowed taps ---- */
@media (max-width: 480px) {
  .header-logo { position: static; transform: none; margin-right: auto; min-width: 0; }
  .header-logo-name { font-size: .74rem; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .header-controls { margin-left: 0; margin-right: .25rem; }
  .header-inner { justify-content: flex-start; gap: .25rem; }
}

/* ---- 14. Last labels under 12px ---- */
.header-logo-sub, .header-dsc-label, .header-dsc-sub { font-size: .75rem; }
.trade-subtitle { font-size: max(.38em, .75rem); }
.works-more-text, .works-more-text span { font-size: .75rem; }
.about-portrait-hint, .about-portrait-hint span { font-size: .75rem; }

/* ---- 15. Phones: full name instead of "EMMANUELE AL…" (music player is a desktop extra) ---- */
@media (max-width: 480px) {
  .header-music { display: none; }
  .header-logo-name { overflow: visible; text-overflow: clip; letter-spacing: .08em; font-size: .78rem; }
}

/* ---- 16. Skip link was showing on /trade; visible only on keyboard focus ---- */
.skip-link { position: absolute !important; top: -100px !important; left: 1rem; transform: none; z-index: 10000;
  background: var(--accent); color: #14110D; padding: .5rem 1rem; font-size: .9rem; }
.skip-link:focus { top: .5rem !important; }

/* ---- 17. Credits: two columns on wide screens, stacked on phones ---- */
.trade-credits { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: 1.5rem; }
@media (max-width: 600px) { .trade-credits { grid-template-columns: 1fr; } }

/* ---- 18. /trade on phones: the back link collided with the name; it lives in the menu there ---- */
@media (max-width: 600px) { .trade-page-back { display: none !important; } }

/* ---- 19. Nav: the film's label got longer (LOVERS LIKE US / TRADE), 2026-10-01.
        Wide: one line. Laptop: two lines, like the logo. Tablet: the menu button takes over. ---- */
.nav-link { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1320px) {
  body:not(.trade-page) .header-nav { gap: 1.1rem; align-items: center; }
  .nav-link--film { line-height: 1.3; }
  .nav-link--film .nav-alt { display: block; }
}
@media (max-width: 1024px) {
  body:not(.trade-page) .header-nav { display: none; }
  body:not(.trade-page) .hamburger { display: flex; }
  body:not(.trade-page) .header-dsc-link { display: none; }
  body:not(.trade-page) .header-controls { margin-left: auto; margin-right: 0.5rem; }
}
.mobile-nav-link--film { text-align: center; line-height: 1.15; }
.mobile-nav-link--film .nav-alt { display: block; }