/* Enter Your Custom CSS Here */

/* ---- Tweakables ---- */
:root{
  --title-max-width: 900px;   /* cap width of the big logo/text */
  --title-top-gap: 36px;      /* space from top of page */
  --nav-gap: 42px;            /* spacing between nav links */
  --nav-size: 14px;           /* nav font size (desktop) */
  --nav-track: 0.22em;        /* letter-spacing for nav */
}

/* ---- Layout ---- */
.hw-header{ background:#fff; }
.hw-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--title-top-gap) 16px 28px;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 14px;
  justify-items: center;
  overflow: visible;          /* allow negative margins if you use them */
}

/* ---- Logo as IMAGE (sized like the screenshot) ---- */
.custom-logo{
  display:block;
  height: 100px;              /* your rule */
  max-width: 450px;           /* your rule */
  width: auto;
  margin: -90px 0 0 0 !important; /* your offset; remove if you don't want the lift */
  object-fit: contain;
}

/* ---- Logo as TEXT (if you switch to the <h1>) ---- */
.hw-logo-text{
  margin: 0;
  max-width: var(--title-max-width);
  text-align: center;
  font-size: clamp(44px, 8vw, 96px);
  line-height: .9;
  letter-spacing: .04em;
  font-weight: 900;
  text-transform: uppercase;
  /* Replace with your custom font; these are fallbacks */
  font-family: "Creepster", "Butcherman", "Impact", system-ui, sans-serif;
}

/* Optional: Google Font fallback for a similar vibe */
@font-face{
  font-family: "Creepster";
  src: local("Creepster");
  font-display: swap;
}

/* ---- Primary nav (lowercase, airy, centered) ---- */
.hw-nav{ width: 100%; }
.hw-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--nav-gap);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hw-menu a{
  text-decoration: none;
  color: #111;
  text-transform: lowercase;
  font: 600 var(--nav-size)/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: var(--nav-track);
  padding: 4px 2px;
}
.hw-menu a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* ---- Mobile tweaks ---- */
@media (max-width: 680px){
  :root{
    --nav-gap: 26px;
    --nav-size: 13px;
  }
  .custom-logo{ height: 80px; max-width: 340px; margin-top: -50px !important; }
}

/* Remove borders and padding on the main container */
body, .site {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Set the content container to full width */
.container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Adjust the page wrapper */
.page-wrapper {
  padding: 0 !important;
  width: 100% !important;
}

/* Remove container margins, padding, and borders */
body, .site, .content-area {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Set container to full width */
.container, .site-content {
  width: 100% !important;
  padding: 0 !important;
}

/* Remove header padding */
.header {
  padding: 0 !important;
}

/* Ensure the page wrapper is full width */
.page-wrapper {
  padding: 0 !important;
  width: 100% !important;
}
.video-background {
  position: fixed;
  top: 140px; /* adjust based on header */
  left: 0;
  width: 100vw;
  height: calc(100vh - 120px);
  z-index: -1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
		 /* centers the video inside */
}

.video-background video {
  max-width: 150%;
  max-height: 95%;
  width: 140%;
  height: auto;
  pointer-events: none;
	
	
  aspect-ratio: unset !important; 
}






/* Adjust these based on where you want them visually */
.zone-illustration {
  top: 305px;      /* Move down from top */
  right: 2%;     /* Position from left side */
  width: 520px;
  height: 330px;
		
		position: fixed;
		
		 transform: translateY(-50%);
		
}

/* temp visual while tuning */


.zone-animation {
  position: fixed;
  left: 49%;
  top: 42%;
  /* replace 120px, 10px with your Δx, Δy from the 1920×1080 layout */
  transform: translate(-50%, -50%) translate(10px, 125px) ;
		

  width: 360px;
  height: 360px;
  background: transparent;   /* keep invis for production */
  pointer-events: auto;
  z-index: 9999;
}

/* Make it fill the screen and crop as needed */
.site-bg-video {
  position: fixed;
  inset: 0;              /* top:0 right:0 bottom:0 left:0 */
  width: 100vw;
  height: 100dvh;        /* use dvh so mobile browser UI doesn’t squash it */
  object-fit: cover;     /* key: don’t let it get “small” — cover instead */
  z-index: -1;           /* behind page content */
  pointer-events: none;  /* clicks pass through */
}
.site {
  padding-left: 50px;
  padding-right: 50px;
}

.main-navigation a {
  color: white !important;
}
.main-navigation a {
  color: black !important;
	 font-size: 12px;
	  margin-right: 15px;
		margin-top: 10px;
		   letter-spacing: 0.3em !important;
}
.main-navigation ul {
  display: flex;
  justify-content: center; /* centers the menu */
  padding: 0;
  margin: 0;
  list-style: none;
	  margin-right: 0;
gap: 24px;  
}

.entry-title {
  display: none;
}

/* Ensure parent menu item is positioned correctly */
.menu-item-has-children {
  position: relative;
}

/* Hide the submenu by default */
.menu-item-has-children .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 10px 0;
  z-index: 999;
  min-width: 160px; /* optional: gives it some consistent width */
}

/* Show the submenu only when hovering the parent */
.menu-item-has-children:hover > .sub-menu {
  display: block;
	 top: 100%;              /* right below the parent */
  left: 50%; 
}

/* Stack items vertically and reduce font size */
.sub-menu li {
  display: block;
  margin: 0;
  padding: 0;
	
}

.sub-menu li a {
  display: block;
  padding: 8px 15px;
  font-size: 1.5em;
  text-align: center;
  white-space: nowrap;
}


.custom-logo {
  max-width: 450px; /* Adjust as needed */
  height: auto;
  display: block;
  margin: -90px !important;
}

.site-header, 
.site-branding {
  margin-top: 100px;   /* pushes whole header down */
	
}

.site-branding {
  text-align: center;
}
body {
  font-family:  font-family: Verdana, sans-serif;
		letter-spacing: 0.2em;
		    line-height: 16px;
   font color: black;
}
/* Side GIF Animation */
.side-gif {
  position: fixed;
  top: 50%;
  right: 0; /* Align to the right */
  transform: translateY(-50%);
  z-index: 9999;
}
/* Gallery Layout */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 0px; /* Space between images */
  margin: 20px auto; /* Center the gallery */
  padding: 0;
  max-width: 1500px;
  box-sizing: border-box;
}

/* Default styling for all images in the gallery */
.image-gallery img {
  width: 100%; /* Allow images to scale properly to fit within the grid */
  height: auto; /* Maintain aspect ratio */
  display: block;
  object-fit: cover; /* Crop images to fit the container */
  max-width: 100%; /* Ensure the image doesn't overflow */
}

/* Specific image size adjustments - width can be changed for each image */
.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/04/bottomless-bitmap-1.png"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/IMG_7105-3-edited-2.jpg"] {
  width: 350px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/ice-cream-boss-lady-2.jpg"] {
  width: 600px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/F06DCC8B-603A-428B-B6B0-10439A03D465.jpg"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/bowling-pin-edited.jpg"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/04/bottomless-bitmap-1.png"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/i-negotiate-excellently.jpg"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/04/important-people-need-important-business-pens.png"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
}

.image-gallery img[src="http://honorwinter.com/wp-content/uploads/2025/02/lets-buy-a-rug.jpg"] {
  width: 500px; /* Custom width relative to the container */
  height: auto;
	
	
	
	


}

.column-gallery {
  column-count: 3;             /* Number of vertical columns */
  column-gap: 20px;            /* Horizontal space between columns */
  padding: 40px;
  max-width: 100%;
}

.column-tile {
  width: 100%;
  margin-bottom: 20px;         /* Space between stacked images */
  display: block;
  break-inside: avoid;         /* Prevent image splits between columns */
}
@media (max-width: 1024px) {
  .column-gallery {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .column-gallery {
    column-count: 1;
  }
}

img[src*="pink-bitmap-w-dates-color-burn.png"] {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  visibility: visible !important;
}






.page-id-1193 .entry-title {
  display: none;
}
/* Desktop default */
video.site-bg-video {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-2.5vw); /* negative = show more RIGHT side */
  z-index: -1;
  pointer-events: none;
}

/* Small desktop / laptops */
@media (max-width: 1280px) and (min-width: 769px){
  video.site-bg-video { transform: translate(-50%, -50%) translateX(0vw); }
}

/* Tablets & phones (keep centered if you already like them) */
@media (max-width: 768px){
  video.site-bg-video { transform: translate(-50%, -50%) translateX(0vw); }
}


/* Tablets */
@media (max-width: 768px){
  .site-bg-video { object-position: 54% center; } /* looks right on tablets */
}

/* 0) Use the transform-centering method consistently by unsetting the inset constraints */
.site-bg-video{
  right: auto !important;
  bottom: auto !important;
  /* width/height from your transform method, not the inset block */
  width: auto !important;
  height: auto !important;
}

/* iPhone-only: switch to edge-pinned + object-position and ignore transform */
@supports (-webkit-touch-callout: none) {
  @media only screen
    and (max-device-width: 932px)
    and (-webkit-min-device-pixel-ratio: 2) {

    .site-bg-video {
				
      /* enforce the sizing method you like */
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      object-fit: cover !important;

      /* nudge the CONTENT slightly left */
      object-position: 53% 50% !important;

      /* neutralize the desktop transform on iPhone only */
      left: auto !important;
      top: auto !important;
      transform: none !important;
    }
  }
}

/* iPhone-only: bigger logo + submenu links */
@supports (-webkit-touch-callout: none) {
  @media only screen
    and (max-device-width: 932px)
    and (-webkit-min-device-pixel-ratio: 2) {

    .custom-logo {
      max-width: 90% !important;   /* make the logo fill more space */
      height: auto !important;
				
    }

.main-navigation a {
      font-size: 16px !important;  /* increase submenu text */
      padding: 12px 20px !important; /* give links more touch area */

    }
				
				
			/* Ensure sub-menu always sits a little below parent */
.menu-item-has-children .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);   /* pushes it further below the parent */
  left: 50%;
  transform: translateX(-50%);
		
  background: white;
  padding: 10px 0;
  z-index: 999;
  min-width: 160px;
  border-radius: 0px;      /* optional, looks cleaner */
}
				
				/* Safari-only padding below main nav */
@supports (-webkit-touch-callout: none) {
  .main-navigation ul {
    padding-bottom: 30px !important;
  }

	.tall-videos-grid .tile video,
.tall-videos-grid .tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* shows full video (no cropping) */
  object-position: top;    /* align to top instead of center */
  display: block;
  background: #000;        /* fallback in case of letterboxing */
}

  background: transparent; /* makes letterbox areas blend with page background */
}
.tall-videos-grid .tile { flex: 0 0 auto; }  /* prevent flex shrink/grow */
				
				<style>
  .tall-videos-grid .tile { flex: 0 0 auto; box-sizing: border-box; }
</style>
				
		}			
		
		
		:root{
  --left-w: 320px;
  --right-w: 220px;
  --gutter: 16px;
  --bg-left: #d9d9d9;
  --bg-right: #fff6a6;
  --bg-main: #f5f5f5;
  --text: #111;
  --muted: #666;
  --rule: #999;
}

/* reset-ish */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: #A9A9A9;
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
  background:var(--bg-main);
}

/* 3-column frame: no outer padding so rails hit top/bottom */
.frame{
  display:grid;
  grid-template-columns: minmax(260px, var(--left-w)) 1fr minmax(180px, var(--right-w));
  column-gap: var(--gutter);
  row-gap: 0;
  min-height: 100vh;   /* ensures the grid spans the viewport */
  padding: 0;          /* <-- remove page padding */
}

/* LEFT rail: full viewport height, scrolls internally if long */
.left{
  position: sticky;
  top: 0;                 /* pin to top of viewport */
  height: 100vh;          /* stretch to bottom */
  overflow: auto;         /* scroll inside if needed */
  background: var(--bg-left);
  padding: 22px 18px;
  border-right: 1px solid rgba(0,0,0,.08);
  border-radius: 0;       /* flush edges */
}

/* CENTER */
.main{
  /* give the center column some breathing room since frame has no padding */
  padding: var(--gutter);
  background: #eaeaea;
  border-radius: 0px;
  display:grid;
  place-items:center;
}
.work{
  width: min(1200px, 100%);
  aspect-ratio: 16/9;
  background:#cfcfcf;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 30px rgba(0,0,0,.18);
}
.work img, .work video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* RIGHT rail: full viewport height, scrolls internally */
.right{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  background: var(--bg-right);
  padding: 14px;
  border-left: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
}

/* (…keep the rest of your typographic and thumb styles unchanged…) */

/* Responsive: when stacked, rails shouldn’t be full-height */
@media (max-width: 900px){
  .frame{ grid-template-columns:1fr; }
  .left, .right{
    position: static;
    height: auto;
    overflow: visible;
    border-radius: 6px;
  }
  .right{ order:3; }
  .main{ padding: var(--gutter); }
.uniform-media .new-row { grid-column-start: 1; }

		
		grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
}
		
		
		}

.my-masonry-grid {
    display: flex;
    margin-left: -1.2rem;
    width: auto;
    padding: 1.2rem
}

.my-masonry-grid_column {
    padding-left: 1.2rem;
    background-clip: padding-box
}

.my-masonry-grid_column>div {
    margin-bottom: 1.2rem
}
		
		
		
	


				
				
			/* ============ PAGE 1239 ONLY ============ */
/* 1) Sandbox the hero so theme CSS stops fighting it */
.page-id-1239 #home-hero,
.page-id-1239 #home-hero * {
  all: revert; /* wipe conflicting theme rules inside this block */
}

/* 2) Zoom-safe layout/spacing for the hero */
.page-id-1239 #home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 3.5vmin, 3rem);
  padding: clamp(2rem, 6vmin, 8rem) 1rem;
}
.page-id-1239 #home-hero h1 {
  margin: 0;
  line-height: 1.05;
font-family: Verdana, sans-serif;
  font-size: clamp(2.25rem, 7.5vw, 6rem);
}
.page-id-1239 #home-hero nav {
  display: inline-flex;
  gap: clamp(0.8rem, 2.5vmin, 2rem);
 font-family: Verdana, sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
}
.page-id-1239 #home-hero nav a {
  text-decoration: none;
  color: #A9A9A9;
  white-space: nowrap;
}
.page-id-1239 #home-hero video,
.page-id-1239 #home-hero img {
  display: block;
  width: min(88vw, 780px);
  height: auto;
}

/* 3) Unify the full-bleed background video on this page */
.page-id-1239 .site-bg-video {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: cover !important;
  object-position: 50% 50% !important; /* adjust if you need a nudge */
  transform: none !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 4) Hide the drifting fixed overlays on this page */
.page-id-1239 .video-background,
.page-id-1239 .zone-illustration,
.page-id-1239 .zone-animation {
  display: none !important;
}

/* 5) Page padding/gaps that scale with zoom (no px) */
.page-id-1239 .site { padding-inline: 5vw !important; }
.page-id-1239 .site-header,
.page-id-1239 .site-branding { margin-top: 6vmin !important; }
.page-id-1239 .main-navigation a {
  font-size: clamp(1rem, 2.2vw, 26px) !important;
  margin-right: 2.2vw !important;
}
.page-id-1239 .main-navigation ul { gap: 2vmin !important; justify-content: center !important; }