:root{
  --paper: #F0F0EE;
  --ink: #000000;
  --stamp: #A6371F;
  --line: rgba(0,0,0,0.16);
  --mono: 'ibm-plex-mono', 'Courier New', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-anchor:none;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap: pretty;
}

/* registration cross — print/poster reference */
.reg-cross{
  position:fixed;
  width:18px; height:18px;
  opacity:0.35;
  z-index:5;
  pointer-events:none;
}
.reg-cross::before, .reg-cross::after{
  content:'';
  position:absolute;
  background:var(--ink);
}
.reg-cross::before{ width:100%; height:1px; top:50%; left:0; }
.reg-cross::after{ width:1px; height:100%; left:50%; top:0; }
.reg-tl{ top:24px; right:24px; }
.reg-br{ bottom:24px; left:24px; }

header{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: 80px 6vw 0;
  position:relative;
}

header.slim{
  min-height:auto;
  padding: 3.5vh 6vw 1vh;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 1rem;
  font-weight:400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 2rem;
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:8px; height:8px;
  background:var(--stamp);
  border-radius:50%;
}

.header-backdrop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  background:rgba(240,240,238,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:40;
  pointer-events:none;
}

h1{
  position:fixed;
  top:20px;
  left:100px;
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  font-weight: 100;
  font-style: normal;
  letter-spacing: -0.02em;
  z-index:50;
  transition: top 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease, letter-spacing 0.3s ease;
}

/* homepage: name starts big as the hero heading, shrinks into the nav row on scroll */
body:has(.hero) h1{
  top:2vh;
  left:2vh;
  font-size:100px;
  font-weight:300;
  letter-spacing:0.02em;
  white-space:nowrap;
}
body:has(.hero) h1 em{
  font-weight:500;
}
.name-break{
  display:none;
}

body:has(.hero) .site-nav{
  right:2vh;
}
body:has(.hero).scrolled h1{
  top:20px;
  font-size:1rem;
  font-weight:100;
  letter-spacing:-0.02em;
}
h1 a{
  color:inherit;
  text-decoration:none;
}

.tagline{
  margin-top: 2.5rem;
  font-size: 1rem;
  font-weight:400;
  max-width: 42ch;
  color: rgba(0,0,0,0.72);
  line-height:1.5;
}

.stamp-badge{
  position:absolute;
  top: 8vh;
  left: 6vw;
  border: 1.5px solid var(--stamp);
  color: var(--stamp);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight:400;
  letter-spacing: 0.1em;
  padding: 0.5em 0.9em;
  transform: rotate(-6deg);
  text-transform:uppercase;
}

main{
  padding: 10vh 24px;
}

/* project detail pages get extra breathing room from the sides */
main:has(.video-gallery){
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 2.5vh;
}

/* about page: name and content pinned close to the left edge */
body:has(.contact) main{
  padding-left: 2vh;
}
body:has(.contact) h1{
  left: 2vh;
}

/* homepage matches the same side spacing as project pages */
main:has(.project-grid){
  padding-left: 1vh;
  padding-right: 1vh;
  padding-bottom: 1vh;
  display:flex;
  flex-direction:column;
  min-height: 100vh;
}

.section-label{
  font-family: var(--mono);
  font-size: 1rem;
  font-weight:400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}
.project-grid + .section-label{
  margin-top: 4rem;
}

.site-nav{
  position:fixed;
  top:28px;
  right:100px;
  transform: translateY(-50%);
  z-index:50;
  display:flex;
  gap:1.5rem;
}
.site-nav a{
  font-size:1rem;
  line-height:1;
  font-weight:400;
  letter-spacing:-0.02em;
  color: var(--ink);
  text-decoration:none;
}
.site-nav a:hover{ color: var(--stamp); }
.site-nav a.is-active{ text-decoration: underline; text-underline-offset: 4px; }

.back-link{
  position:fixed;
  top:28px;
  right:100px;
  transform: translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--ink);
  font-size:1.1rem;
  line-height:1;
  text-decoration:none;
  z-index:50;
  transition: color 0.2s ease;
}
.back-link:hover{ color: var(--stamp); }

.hero{
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:60ch;
  margin-bottom:4rem;
  margin-top:0;
  padding-left:1vh;
  padding-right:1vh;
}
.hero-role{
  font-size:1.1rem;
  color: #000000;
  font-weight:500;
}
.hero-tagline{
  font-size:1rem;
  line-height:1.6;
  margin-top:0;
}

/* homepage project cards */
.project-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  background: var(--paper);
}
.project-card{
  position:relative;
  overflow:hidden;
  display:block;
  height: 45vh;
  background:#000;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}
.project-card:hover{
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  transform: scale(1.03);
  z-index:3;
}
.project-card video,
.project-card img{
  display:block;
  width:auto;
  height:100%;
}
.card-tags{
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  display:flex;
  flex-wrap:wrap;
  gap:0.4em;
  margin:0 0 0.6rem;
  opacity:0;
  transition: opacity 0.15s ease;
  z-index:1;
}
.project-item:hover .card-tags{
  opacity:1;
}

.project-item{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  position:relative;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4em;
}

.project-header + .tags{
  margin-bottom:2.5rem;
}

.tag{
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Arial, sans-serif;
  font-size:1rem;
  letter-spacing:0.08em;
  color: var(--ink);
  font-weight:400;
  font-style:italic;
  display:inline-block;
  width:fit-content;
}

.tag:not(:last-child)::after{
  content:"\00b7";
  font-style:normal;
  margin-left:0.4em;
}

.project-grid--row{
  grid-template-columns: repeat(4, 1fr);
}

.project-grid--single-row{
  display:flex;
  align-items: flex-end;
  overflow-x:auto;
  gap: 24px;
  margin-left: -1vh;
  margin-right: -1vh;
  margin-top: auto;
  padding-left: 1vh;
  padding-right: 1vh;
  padding-top: 2.2rem;
}
.project-grid--single-row .project-item{
  flex: 0 0 auto;
}
@media (min-width: 641px){
  .project-grid--single-row .project-item:has(a[href="3d-birds.html"]) .project-card{
    width: 57vh;
    height: 34vh;
    background: var(--paper);
  }
  .project-grid--single-row .project-item:has(a[href="3d-birds.html"]) .project-card video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .project-grid--single-row .project-item:has(a[href="drift.html"]) .project-card,
  .project-grid--single-row .project-item:has(a[href="darrow.html"]) .project-card,
  .project-grid--single-row .project-item:has(a[href="e2i.html"]) .project-card{
    height: 60vh;
  }
  .project-grid--single-row .project-item:has(a[href="meshek-ofaim.html"]) .project-card{
    height: 40vh;
  }
  .project-grid--single-row .project-item:has(a[href="kibuts-sign.html"]) .project-card{
    height: 50vh;
  }
  .project-grid--single-row .project-item:has(a[href="diana.html"]) .project-card{
    height: 30vh;
  }
}

@media (max-width: 640px){
  .project-grid{
    grid-template-columns: 1fr;
  }

  .project-grid--single-row{
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .project-grid--single-row .project-item{
    flex: none;
    width: 100%;
  }
  .project-grid--single-row .project-item:has(a[href="drift.html"]){ order: 1; }
  .project-grid--single-row .project-item:has(a[href="darrow.html"]){ order: 2; }
  .project-grid--single-row .project-item:has(a[href="meshek-ofaim.html"]){ order: 3; }
  .project-grid--single-row .project-item:has(a[href="e2i.html"]){ order: 4; }
  .project-grid--single-row .project-item:has(a[href="kibuts-sign.html"]){ order: 5; }
  .project-grid--single-row .project-item:has(a[href="music-janers.html"]){ order: 6; }
  .project-grid--single-row .project-item:has(a[href="diana.html"]){ order: 7; }
  .project-grid--single-row .project-item:has(a[href="save-the-date.html"]){ order: 8; }
  .project-grid--single-row .project-item:has(a[href="3d-birds.html"]){ order: 9; }
  .project-grid--single-row .project-card{
    height: auto;
  }
  .project-grid--single-row .project-card video,
  .project-grid--single-row .project-card img{
    width: 100%;
    height: auto;
  }
  .project-grid--single-row .card-tags{
    position: static;
    opacity: 1;
    order: -1;
    margin: 0 0 0.4rem;
  }

  main:has(.video-gallery){
    padding-left: 24px;
    padding-right: 24px;
  }

  .model-viewer-row{
    margin-left: -24px;
    margin-right: -24px;
  }

  .model-viewer-row .model-viewer-frame{
    height: auto;
    aspect-ratio: 4 / 3;
  }

  body:has(.video-gallery) h1{
    left: 24px;
  }

  .hero{
    padding-left: 0;
    padding-right: 0;
  }

  /* mobile: name matches the plain project-page style, no big hero growth */
  body:has(.hero) h1{
    top: 20px;
    left: 24px;
    width: auto;
    font-size: 1rem;
    font-weight: 300;
    white-space: normal;
    text-align: left;
    line-height: 1.5;
  }
  body:has(.hero) h1 .name-break{
    display: inline;
  }
  body:has(.hero) h1 .mid-dot{
    display: none;
  }
  body:has(.hero) h1 em{
    font-weight: 500;
  }
  body:has(.hero).scrolled h1{
    font-weight: 300;
    white-space: nowrap;
    line-height: 1;
  }
  body:has(.hero).scrolled h1 .name-break{
    display: none;
  }
  body:has(.hero).scrolled h1 .mid-dot{
    display: inline;
  }

  .back-link{
    right: 24px;
  }

  .site-nav{
    right: 24px;
  }

  main:has(.project-grid){
    padding-left: 24px;
    padding-right: 24px;
    display: block;
    min-height: 0;
  }

  .project-grid--single-row{
    margin-top: 2rem;
  }

  body:has(.project-grid) h1{
    left: 24px;
  }

  main:has(.about-body){
    padding-left: 24px;
    padding-right: 24px;
  }

  body:has(.about-body) h1{
    left: 24px;
  }

}

.project-section{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1%;
  padding: 0 1.5%;
  box-sizing: border-box;
  align-items:start;
  margin-bottom: 8vh;
}
.project-section:last-child{ margin-bottom:0; }

.case-study ~ .section-label,
.case-study ~ .contact{
  padding-left: 1.5%;
  box-sizing: border-box;
}

.project-text{
  grid-column: 6 / 7;
  grid-row: 1;
}

.project-header{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-bottom:2.5rem;
}

.task-solution{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

@media (max-width: 640px){
  .project-section{
    display:block;
  }
  .project-text{
    margin-bottom:2.5rem;
  }
}

/* case-study layout (currently: Meshek Ofaim) */
.project-section.case-study{
  display:block;
  padding:0;
}

.project-header-full{
  margin-top:2rem;
  margin-bottom:0.5rem;
}

/* three-column case study layout: text in the left third, media across the right two-thirds */
.case-columns{
  grid-column: 1 / 7;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items:start;
  margin-top:2rem;
}
.case-columns__text{
  grid-column: 1 / 2;
}
.case-columns__media{
  grid-column: 2 / 4;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.case-columns--full .case-columns__media{
  grid-column: 1 / 4;
}
.case-columns__media.video-gallery{
  grid-row: auto;
  display:block;
}
.case-columns__text .case-caption{
  grid-column: auto;
  grid-row: auto;
  max-width:100%;
}
.case-columns__text .case-media-intro{
  max-width:100%;
}
.case-columns__text .case-heading{
  margin-bottom:0.6rem;
}
.case-columns__text .tags{
  margin-bottom:1.2rem;
}
@media (max-width: 640px){
  .case-columns{
    display:block;
  }
  .case-columns__text{
    margin-bottom:2.5rem;
  }
}

.case-heading{
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:0;
}

.case-media-intro{
  max-width:50%;
  font-size:1rem;
  line-height:1.6;
  color: var(--ink);
}

.case-subheading{
  font-size:0.8rem;
  font-weight:400;
  color: rgba(0,0,0,0.5);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:0;
}

.model-viewer-row{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:16px;
  margin-top:0.5rem;
}

.model-viewer-frame{
  display:block;
  width:100%;
  height:90vh;
  background: var(--paper);
  filter: saturate(1.5);
}

.case-study .video-gallery{
  display:block;
  gap:0;
}

.case-block{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1%;
  align-items:stretch;
  margin-bottom: 15vh;
}
.case-block--tight{
  margin-bottom: 1vh;
}
.case-block:last-child{ margin-bottom:0; }

.gallery-item--section-gap{
  margin-top: calc(6vh - 16px);
}

.case-media{
  grid-column: 1 / 7;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.case-media-row{
  display:grid;
  grid-template-columns: repeat(2, auto);
  justify-content:center;
  gap:16px;
}

.case-media-row--split{
  align-items:stretch;
}

/* stretch a single video to fill the full content width instead of
   being sized/centered by its own intrinsic aspect ratio */
.case-media-row--full{
  grid-template-columns: 1fr;
}
.case-media-row--full .gallery-item{
  width:100%;
  max-width:100%;
}
.case-media-row--full .gallery-item video{
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio: 16 / 9;
  object-fit:cover;
}

/* let each image in the row grow to fill 90% of the screen height, sized by its own aspect ratio
   rather than being squeezed into a fixed-width column; stack them one after another instead of
   side by side so nothing needs to scroll sideways */
.case-media-row--tall{
  display:flex;
  flex-direction:column;
  grid-template-columns:none;
  align-items:center;
}
.case-media-row--tall .gallery-item{
  flex:0 0 auto;
  width:auto;
  height:auto;
}
.case-media-row--tall .gallery-item img{
  display:block;
  width:auto;
  height:auto;
  max-height:90vh;
  max-width:100%;
  object-fit:contain;
}

/* stretch every image in this gallery to the full content width,
   stacked one above another, instead of being sized/centered by
   each image's own aspect ratio */
.case-media--full .case-media-row{
  grid-template-columns: 1fr;
  justify-content: stretch;
}
.case-media--full .gallery-item,
.case-media--full .case-media-row--tall .gallery-item{
  width:100%;
  max-width:100%;
}
.case-media--full .gallery-item img,
.case-media--full .case-media-row--tall .gallery-item img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}

.case-media-row--align-start{
  align-items:start;
}

.case-media-row--triple{
  grid-template-columns: 1fr 1fr 1fr;
}

.case-media-row--quad{
  grid-template-columns: 0.7fr 1.3fr 0.7fr 40px 1.3fr;
  align-items:stretch;
}

.case-media-column{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.6px;
  height:100%;
}

.quad-spacer{
  position:relative;
}

.quad-arrow{
  position:absolute;
  width:90px;
  height:90px;
  pointer-events:none;
  z-index:3;
}

.quad-arrow--drawings{
  left:75px;
  top:90px;
  width:70px;
  height:70px;
}

.quad-arrow--drawings-mobile{
  display:none;
  width:60px;
  height:60px;
  margin:4px auto 8px;
  pointer-events:none;
  transform: rotate(90deg);
}

.quad-arrow--hammer{
  left:-47px;
  top:72%;
  width:81px;
  height:81px;
  transform: scaleY(-1);
}

.quad-arrow--hammer-mobile{
  display:none;
  width:60px;
  height:60px;
  margin:4px auto 8px;
  pointer-events:none;
}

.case-media-column--gap-before{
  margin-left: min(64px, 35%);
}

.case-media-column .gallery-item{
  flex:0 0 auto;
  overflow:visible;
}

.case-media-column .gallery-item img{
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.case-media-column .gallery-item--half{
  width:50%;
  margin:0 auto;
}

.case-media-column .gallery-item--large{
  width:120%;
  margin:0 32% 0 0;
}

@media (max-width: 640px){
  .case-media-row--split,
  .case-media-row--quad{
    grid-template-columns: 1fr;
  }
  .case-media-column{
    height:auto;
  }
  .quad-arrow--drawings{
    display:none;
  }
  .quad-arrow--drawings-mobile{
    display:block;
  }
  .quad-arrow--hammer{
    display:none;
  }
  .quad-arrow--hammer-mobile{
    display:block;
  }
  .case-media-column .gallery-item{
    flex:none;
  }
  .case-media-column .gallery-item img{
    height:auto;
    object-fit:contain;
  }
  .case-media-column--gap-before{
    margin-left:0;
  }
  .case-media-column .gallery-item--large{
    width:70%;
    margin:0 auto;
  }
}

.case-caption{
  grid-column: 1 / 7;
  grid-row: 1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  max-width:50%;
  margin-bottom: 1.5rem;
  font-size:1rem;
  line-height:1.6;
  color: var(--ink);
}
.case-caption p + p{
  margin-top:0.5em;
}

@media (max-width: 640px){
  .case-block{
    display:block;
  }
  .case-media-row{
    grid-template-columns: 1fr;
  }
  .case-caption{
    max-width:100%;
    margin-top:0;
    margin-bottom:1.5rem;
  }
  .case-media-intro{
    max-width:100%;
  }
}

.project-title{
  font-size: 1rem;
  font-weight:400;
}

.project-desc{
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  color: var(--ink);
}
.project-desc strong{
  font-weight:400;
}

.task-solution p strong{
  display:inline-block;
  margin-bottom:0.6em;
  font-weight:700;
}

.about-body{
  max-width:50vw;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.profile-photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.case-media--2col{
  grid-column: 1 / 3;
  grid-row: 1;
}

.case-caption--4col{
  grid-column: 3 / 7;
  max-width:100%;
  font-size: 1.7rem;
  line-height: 1.4;
}
.about-body .project-desc{
  font-size:1rem;
  font-weight:400;
}

@media (max-width: 640px){
  .about-body{
    max-width:100%;
  }
}

/* project video gallery — single full-width column within the 5-col image area */
.video-gallery{
  grid-column: 1 / 6;
  grid-row: 1;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.shape-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:24px;
  padding:0 0 2rem;
  margin-top:0;
  overflow-x:auto;
}

.shape-row img{
  height:70px;
  width:auto;
  flex-shrink:0;
  object-fit:contain;
}

.shape-row img.shape-row__lg{
  height:140px;
}

.shape-row img[src*="עיגול ורוד כהה"]{
  height:63px;
}

.shape-row img[src*="מלבן טורכיז"],
.shape-row img[src*="מלבן ורוד בהיר"]{
  height:49px;
}

.image-quad{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.image-quad img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.frame-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.frame-row img{
  width:100%;
  height:auto;
  display:block;
}

.frame-row--wide{
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 640px){
  .frame-row--wide{
    grid-template-columns: repeat(2, 1fr);
  }
}

.case-media--square{
  width:100%;
  max-width:500px;
  margin:0 auto;
  aspect-ratio:1/1;
  overflow:hidden;
}

.case-media--full-width{
  grid-column: 1 / 7;
}

.case-media--square .clean-video{
  width:100%;
  height:100%;
  max-height:90vh;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
}

.loader-frames{
  background:transparent;
}

.loader-frames video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.gallery-item--static{
  cursor:default;
}
.gallery-item video,
.gallery-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:90vh;
  object-fit:contain;
  margin:0 auto;
  pointer-events:none;
}

/* let a full-width hero image size purely by width, matching the video above it instead of being letterboxed by the 90vh cap */
.gallery-item--wide img{
  max-height:none;
}

/* crop the empty right portion of the final-film video frame so it ends at the subject instead of trailing off into empty background */
.gallery-item--crop-right{
  aspect-ratio: 1415 / 900;
  overflow:hidden;
}
.gallery-item--crop-right video{
  width:100%;
  height:100%;
  max-height:90vh;
  object-fit:cover;
  object-position:left center;
}

/* shrink to fit, preserving the video's own aspect ratio (no cropping) */
.gallery-item--crop-rafat video,
.gallery-item--crop-bottom video{
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
}
/* no black letterbox behind these — let the page background show through instead */
.gallery-item--crop-rafat,
.gallery-item--crop-bottom{
  background:none;
}

/* crop out the black bars baked into the top/bottom of this video's source */
.gallery-item--crop-y{
  aspect-ratio: 1280 / 855;
  overflow:hidden;
}
.gallery-item--crop-y video{
  width:100%;
  height:100%;
  max-height:90vh;
  object-fit:cover;
  object-position:center;
}
.clean-video-frame{
  display:block;
  width:fit-content;
  max-width:100%;
  max-height:90vh;
  margin:0 auto;
  overflow:hidden;
  background:none;
}

.clean-video{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:90vh;
  object-fit:contain;
  margin:0 auto;
  background:none;
  /* source clips have a thin black edge baked in; zoom slightly to crop it out */
  transform:scale(1.03);
}

.gallery-item .play-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:#FFFFFF;
  background: rgba(14,13,10,0.15);
  transition: background 0.2s ease;
}
.gallery-item:hover .play-icon{ background: rgba(14,13,10,0.4); }

.gallery-item.is-playing .play-icon{ display:none; }

.play-icon--video svg{
  width:60px;
  height:60px;
}

/* autoplaying-with-sound-toggle items: no extra darkening on hover */
.gallery-item--sound:hover .play-icon{ background: rgba(14,13,10,0.15); }

.sound-toggle{
  position:absolute;
  top:12px;
  right:12px;
  width:2.2rem;
  height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFFFFF;
  background: rgba(14,13,10,0.45);
  border-radius:50%;
  cursor:pointer;
  z-index:2;
  transition: background 0.2s ease;
}
.sound-toggle:hover{ background: rgba(14,13,10,0.7); }

/* expand icon on image items sits in the bottom-left corner instead of centered */
.gallery-item:has(img) .play-icon{
  inset:auto;
  left:12px;
  bottom:12px;
  top:auto;
  right:auto;
  width:2.2rem;
  height:2.2rem;
  font-size:1.1rem;
  background: none;
}
.gallery-item:has(img):hover .play-icon{ background: none; }

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(14,13,10,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition: opacity 0.2s ease;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox-stage{
  max-width:88vw;
  max-height:82vh;
}
.lightbox-stage video,
.lightbox-stage img{
  display:block;
  max-width:88vw;
  max-height:82vh;
}
.lightbox-close{
  position:absolute;
  top:24px;
  right:24px;
  background:none;
  border:none;
  color:#FFFFFF;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.lightbox-close:hover{ color: var(--stamp); }

.nav-btn{
  width:2.6rem;
  height:2.6rem;
  border:none;
  background:transparent;
  color:#FFFFFF;
  font-size:1.1rem;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: color 0.2s ease;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
}
.nav-btn:hover{ color: var(--stamp); }
.nav-btn[data-dir="prev"]{ left:1rem; }
.nav-btn[data-dir="next"]{ right:1rem; }

footer{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:50;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-end;
  gap:2rem;
}

.contact{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:2.5rem;
  margin-top:1rem;
  position:fixed;
  left:2vh;
  bottom:2vh;
}
.section-label:has(+ .contact){
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}
.section-label + .contact{
  margin-top: 0;
}
.contact a{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color: var(--ink);
  text-decoration:none;
  font-size: 1rem;
  font-weight:400;
  width:fit-content;
}
.contact a span{
  border-bottom: 1px solid var(--ink);
}
.contact a:hover{ color: var(--stamp); }
.contact a:hover span{ border-color: var(--stamp); }
.contact-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}

@media (prefers-reduced-motion: no-preference){
  h1, .tagline, .eyebrow{
    animation: rise 0.8s ease both;
  }
  .eyebrow{ animation-delay: 0s; }
  h1{ animation-delay: 0.1s; }
  .tagline{ animation-delay: 0.25s; }
}
@keyframes rise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

a:focus-visible, button:focus-visible{
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}

.project-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  margin-top:6vh;
  padding: 2.5rem calc(100px + 1.5%);
}

.project-nav__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.6rem;
  color: var(--ink);
  text-decoration:none;
  transition: color 0.2s ease;
}

.project-nav__link:hover{ color: var(--stamp); }

.project-nav__row{
  display:flex;
  align-items:center;
  gap:0.85rem;
}

.project-nav__arrow{
  font-size:1.3rem;
  line-height:1;
}

.project-nav__thumb{
  width:192px;
  height:192px;
  object-fit:cover;
  flex:0 0 auto;
}

@media (max-width: 700px){
  .project-nav__thumb{
    width:144px;
    height:144px;
  }
}

.project-nav__link--prev{
  align-items:flex-end;
}

.project-nav__title{
  font-size:1.05rem;
  font-weight:500;
}

@media (max-width: 700px){
  .project-nav{
    padding: 2rem calc(24px + 1.5%);
    gap:1rem;
  }
  .project-nav__title{ font-size:0.95rem; }
}