/* ============================================================
   Pocket Music — shared stylesheet
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

:root {
  --paper: #F6F5F0;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --ink-muted: #8a8a8a;
  --rule: rgba(0,0,0,0.12);
  --dark: #000000;
  --overlay: rgba(26, 26, 26, 0.92);   /* hover overlay on work tiles */
  --nav-height: 84px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
body.dark {
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}
body.image-bg {
  background: var(--dark);
  color: #fff;
}
body.inverted {
  background: var(--dark);
  color: #fff;
  --overlay: #000;   /* bevel matches the page background */
}

/* --------------------------------------------------------
   Standard top nav
   -------------------------------------------------------- */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}
body.dark .top-bar,
body.image-bg .top-bar {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
body:not(.dark):not(.image-bg) .top-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.logo { display: block; height: 26px; }
.logo img { height: 100%; width: auto; }
body.dark .logo img,
body.image-bg .logo img { filter: invert(1); }

nav ul {
  display: flex;
  list-style: none;
  gap: 2.25rem;
}
nav a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
nav a:hover, nav a.active { opacity: 1; }
body:not(.dark):not(.image-bg) nav a { opacity: 1; color: var(--ink-soft); }
body:not(.dark):not(.image-bg) nav a:hover,
body:not(.dark):not(.image-bg) nav a.active { color: var(--ink); }

/* --------------------------------------------------------
   Work page — big centred logo + centred nav
   -------------------------------------------------------- */
.work-hero {
  padding: 3rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--rule);
}
.work-hero .logo-big { display: block; width: 60vw; max-width: 780px; }
.work-hero .logo-big img { width: 100%; height: auto; }
.work-hero nav ul { gap: 3rem; }

/* Inverted variant (black bg / white text) — targeted overrides */
body.inverted .work-hero { border-bottom-color: rgba(255,255,255,0.12); }
body.inverted .work-hero .logo-big img { filter: invert(1); }
body.inverted nav a { color: rgba(255,255,255,0.7); opacity: 1; }
body.inverted nav a:hover,
body.inverted nav a.active { color: #fff; }
body.inverted .work-item .thumb { background: #111; }
body.inverted .acknowledgment {
  color: rgba(255,255,255,0.9);
  border-top-color: rgba(255,255,255,0.12);
}

/* --------------------------------------------------------
   Acknowledgment footer
   -------------------------------------------------------- */
.acknowledgment {
  border-top: 1px solid var(--rule);
  padding: 2rem;
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink);
  max-width: 68rem;
  margin: 0 auto;
}
body.image-bg .acknowledgment {
  border-top: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}

/* --------------------------------------------------------
   HOME — snap-scroll video stack
   -------------------------------------------------------- */
main.stack {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
main.stack::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}
.slide iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 177.78vh;
  min-width: calc(100dvh * 16 / 9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}

/* Letterbox variant — triggered by body.letterbox.is-narrow, where
   is-narrow is set by a small JS on index-letterbox.html when the
   viewport is narrower than 16:9. Using a JS-set class instead of a
   CSS aspect-ratio media query fixes an iOS Safari quirk that made
   the rule fire in landscape too, pushing the video off-centre and
   hiding the caption.
   In landscape (viewport wider than 16:9), .is-narrow is off and the
   default cover rule above applies — video fills the screen. */
body.letterbox.is-narrow .slide iframe {
  width: 100vw;
  height: 56.25vw;
  min-width: 0;
  min-height: 0;
  max-width: 100vw;
  max-height: 100dvh;
}
/* Anchor caption to the bottom edge of the video (not the viewport)
   in letterbox mode, so it always sits on the video instead of getting
   lost in the black bars or hidden behind mobile browser chrome. */
body.letterbox.is-narrow .slide-caption {
  bottom: calc(1.75rem + (100dvh - 56.25vw) / 2);
}
.slide-caption {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 5;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.slide.is-active .slide-caption {
  opacity: 0.95;
  transform: translateY(0);
}
.slide-caption .client { display: block; font-weight: 500; }
.slide-caption .title  { display: block; font-weight: 400; opacity: 0.7; margin-top: 0.35rem; }

.sound-toggle {
  position: fixed;
  bottom: 1.75rem;
  right: 2rem;
  z-index: 60;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.sound-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
.sound-toggle:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.6;
  z-index: 5;
  animation: bob 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50%      { transform: translate(-50%, 6px); opacity: 0.9; }
}
.slide:not(:first-child) .scroll-hint { display: none; }

/* --------------------------------------------------------
   Paper page layout
   -------------------------------------------------------- */
.page {
  padding-top: var(--nav-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-inner {
  flex: 1;
  padding: 5rem 2rem 6rem;
  max-width: 62rem;
  margin: 0 auto;
  width: 100%;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}
body.image-bg .eyebrow { color: rgba(255,255,255,0.7); }

h1.display {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  max-width: 22ch;
}

.prose {
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.prose p + p { margin-top: 1.35rem; }
.prose strong { color: var(--ink); font-weight: 500; }
body.image-bg .prose { color: rgba(255,255,255,0.85); }
body.image-bg .prose strong { color: #fff; }

.cta {
  display: inline-block;
  margin-top: 3rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.cta:hover { background: var(--ink); color: var(--paper); }
body.image-bg .cta { border-color: #fff; color: #fff; }
body.image-bg .cta:hover { background: #fff; color: var(--ink); }

/* --------------------------------------------------------
   ABOUT — fullscreen background image
   -------------------------------------------------------- */
.bg-image {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
}
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.15) 100%);
}

/* --------------------------------------------------------
   WORK — masonry grid + sliding green overlay on hover
   -------------------------------------------------------- */
.work-container {
  padding: 2.5rem 1.75rem 4rem;
  max-width: 96rem;
  margin: 0 auto;
}

/* CSS columns give proper masonry with variable tile heights.
   Note: items flow top-to-bottom per column, not left-to-right. */
.work-grid {
  column-count: 3;
  column-gap: 1rem;
}
.work-item {
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;
  break-inside: avoid;
  cursor: pointer;
  position: relative;
}
.work-item .thumb {
  position: relative;
  overflow: hidden;
  background: #ddd;
}
.work-item .thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Sliding bevel — a dark panel with an angled top edge
   grows up from the bottom, covering roughly the bottom
   half of the tile. Pure clip-path animation. */
.work-item .overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 0.9rem;
  pointer-events: none;
}
.work-item:hover .overlay {
  clip-path: polygon(0 78%, 100% 66%, 100% 100%, 0 100%);
}
.work-item:hover .thumb img { transform: scale(1.03); }

.work-item .caption {
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
}
.work-item:hover .caption {
  opacity: 1;
  transform: translateY(0);
}
.work-item .caption .client {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.work-item .caption .title {
  display: block;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 0.35rem;
}

/* --------------------------------------------------------
   Lightbox — click a Work tile to play the video in an overlay
   -------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 5vw 4vh;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-video {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.lightbox-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  max-width: 1280px;
}
.lightbox-caption .client {
  font-weight: 500;
  color: #fff;
}
.lightbox-caption .title {
  font-style: italic;
  opacity: 0.75;
  margin-left: 0.75rem;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 300;
  transition: color 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover {
  color: #fff;
  transform: scale(1.1);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 1rem;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.25s ease;
}
.lightbox-nav svg { display: block; }
.lightbox-nav:hover { color: #fff; }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 600px) {
  .lightbox { padding: 4vh 1rem; }
  .lightbox-close { top: 1rem; right: 1rem; font-size: 1.5rem; }
  .lightbox-caption { font-size: 0.75rem; }
  .lightbox-caption .title { display: block; margin-left: 0; margin-top: 0.15rem; }
  .lightbox-nav { padding: 0.5rem; }
  .lightbox-prev { left: 0.25rem; }
  .lightbox-next { right: 0.25rem; }
  .lightbox-nav svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */
.contact-block h2 {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.contact-block .big,
.contact-block a.big {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  display: inline-block;
}
.contact-block a.big:hover { border-color: var(--ink); }

/* --------------------------------------------------------
   Responsive
   -------------------------------------------------------- */
@media (max-width: 900px) {
  .work-grid { column-count: 2; }
}
@media (max-width: 800px) {
  .page-inner { padding: 3rem 1.25rem 4rem; }
  h1.display { margin-bottom: 2rem; }
  .work-hero .logo-big { width: 80vw; }
}
@media (max-width: 600px) {
  :root { --nav-height: 64px; }
  .top-bar { padding: 0 1.25rem; }
  .logo { height: 20px; }
  nav ul { gap: 1.25rem; }
  nav a { font-size: 0.68rem; letter-spacing: 0.15em; }
  .slide-caption { bottom: 1.25rem; left: 1.25rem; font-size: 0.65rem; }
  .sound-toggle { bottom: 1.25rem; right: 1.25rem; font-size: 0.65rem; }
  .work-grid { column-count: 1; }
  .work-hero { padding: 2rem 1.25rem 1.25rem; gap: 1.5rem; }
  .work-hero .logo-big { width: 88vw; }
  .work-hero nav ul { gap: 1.5rem; }
  .work-container { padding: 1.5rem 1rem 3rem; }
}