/* ============================================
   PORTFOLIO PAGE — Native hover-background layout
   Paste into: Design > Custom CSS (or load via CDN)

   Surface: Squarespace native portfolio collection
            with hover-background layout

   Observed structure:
     .portfolio-hover-items-list
       a.portfolio-hover-item
         .portfolio-hover-item-title
           span.portfolio-hover-item-content
   ============================================ */

/* ----------------------------------------
   CUSTOM FONTS
   Served from same Cloudflare Pages root as this CSS
   ---------------------------------------- */
@font-face {
  font-family: "GT Walsheim";
  src: url("Fonts/gt-walsheim-bold-web.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Riposte";
  src: url("Fonts/Riposte-Medium-web/Riposte-Medium.woff2") format("woff2"),
       url("Fonts/Riposte-Medium-web/Riposte-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------
   ALL CAPS TITLES + FONT OVERRIDE
   ---------------------------------------- */
.portfolio-hover-item-title,
.portfolio-hover-item-content {
  text-transform: uppercase !important;
  font-family: "GT Walsheim", var(--heading-font-font-family, "Barlow Semi Condensed"), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Shrink portfolio titles so all 13 projects fit
   without scrolling on every viewport. clamp() scales
   fluidly from phones (~14px) up to desktops (~36px)
   without needing separate media queries. */
.portfolio-hover-item-title,
.portfolio-hover-item-content {
  font-size: clamp(1rem, 2vw, 1.9rem) !important;
  line-height: 1.05 !important;
}

/* Apply GT Walsheim to all heading levels site-wide */
h1, h2, h3, h4 {
  font-family: "GT Walsheim", var(--heading-font-font-family, "Barlow Semi Condensed"), sans-serif !important;
  font-weight: 700 !important;
}

.portfolio-hover-item {
  transition: color 300ms ease !important;
}

/* ----------------------------------------
   PREVENT WHITE FLASH ON RESIZE
   Cause: during viewport resize, Squarespace's
   JS recalculates container heights and image
   positions. The .portfolio-hover-base-sticky has
   transition: height 0.1s which animates height
   changes, creating brief gaps. The page section
   has data-section-theme="white" giving it a
   light background that shows through those gaps.

   Fix:
   1. Dark body bg as the base safety net.
   2. Dark bg on the section and all portfolio
      containers so no white layer shows through.
   3. Kill height transition on the sticky wrapper
      so height changes are instant.
   ---------------------------------------- */
body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) {
  background-color: #1a1a1a !important;
}

/* Dark bg on the section itself to cover body */
body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .page-section {
  background-color: #1a1a1a !important;
}

/* Dark bg on all portfolio hover containers */
body:not(.sqs-is-page-editing) .portfolio-hover-base,
body:not(.sqs-is-page-editing) .portfolio-hover-base-sticky,
body:not(.sqs-is-page-editing) .portfolio-hover-wrapper,
body:not(.sqs-is-page-editing) .portfolio-hover-backgrounds {
  background-color: #1a1a1a !important;
}

/* Kill height transition so resize is instant */
body:not(.sqs-is-page-editing) .portfolio-hover-base-sticky {
  transition: none !important;
}

/* Force background containers to always fill viewport
   so JS height recalculations can't create gaps */
body:not(.sqs-is-page-editing) .portfolio-hover-backgrounds,
body:not(.sqs-is-page-editing) .portfolio-hover-backgrounds-wrapper,
body:not(.sqs-is-page-editing) .portfolio-hover-bg,
body:not(.sqs-is-page-editing) .portfolio-hover-bg-mask {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* Ensure bg images fill and scale smoothly via CSS
   regardless of what Squarespace JS does to containers */
body:not(.sqs-is-page-editing) .portfolio-hover-bg-img {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body:not(.sqs-is-page-editing) .portfolio-hover-bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ----------------------------------------
   MOBILE FOCAL-POINT OVERRIDES (homepage hover bg)
   Squarespace's portfolio hover layout exposes only
   ONE focal point per project, shared by desktop and
   mobile. On a portrait phone the landscape stills are
   cropped hard left/right, so a few subjects that sit
   off-center get cut off. We can't set a separate
   mobile focal point in the UI, so we override
   object-position per-image here.

   Targeting: each background <img> URL contains the
   source filename. We match a unique substring of that
   filename across src / data-image / data-src so the
   rule holds through every lazy-load phase. Scoped to
   the portfolio page + mobile only (desktop shows the
   full landscape frame, so center is fine there).

   Values were dialed in against the live stills:
   object-position X% shifts which horizontal slice
   stays in frame (0%=left … 100%=right). Only the
   three projects whose subject was being cut are
   listed; every other still centers acceptably and is
   left at Squarespace's default. */
@media (max-width: 767px) {
  /* LUCA spot — cyclist sits right-of-center; pull
     right so the rider + bike are framed, not the
     empty blue wall. */
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[src*="LUCA"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-image*="LUCA"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-src*="LUCA"] {
    object-fit: cover !important;
    object-position: 60% 50% !important;
  }

  /* NEX Iceland (timecode 27_32_17) — woman stands
     right-of-center; her face was getting clipped at
     the right edge. Pull right to center her. */
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[src*="27_32_17"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-image*="27_32_17"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-src*="27_32_17"] {
    object-fit: cover !important;
    object-position: 62% 50% !important;
  }

  /* Paniolo Showdown (HER+for+REEL) — subject's face
     is far left; center crop misses her entirely.
     Pull left to frame her smile. */
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[src*="REEL"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-image*="REEL"],
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) .portfolio-hover-backgrounds img[data-src*="REEL"] {
    object-fit: cover !important;
    object-position: 26% 50% !important;
  }
}

/* ----------------------------------------
   TITLE LIST — align with header content area

   The list sits inside .portfolio-hover-display
   which has padding-left: 4vw. The header-inner
   uses max-width:1600px centered with auto margins.

   At viewports ≤ 1600px the header left edge
   equals the display padding (4vw), so list
   padding should be 0.

   At viewports > 1600px the header left edge is
   (100vw − 1600px)/2, which is further inward
   than 4vw, so we add the difference.

   Formula: max(0px, (100vw − 1600px)/2 − 4vw)
   ---------------------------------------- */
body:not(.sqs-is-page-editing) .portfolio-hover-items-list {
  /* Horizontal: offset to match header-inner left edge */
  padding-left: max(0px, calc((100vw - 1600px) / 2 - 4vw)) !important;
  padding-right: 0 !important;

  /* Vertical: center titles in the available space.
     Parent .portfolio-hover-items is display:flex column
     with flex-grow:1 and padding-top for the header.
     flex:1 makes this list fill the remaining space,
     then justify-content centers the titles within it. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 !important;
}

/* ----------------------------------------
   HOVER COLOR — Option A: Cinematic Teal
   Swap to Option B or C by commenting/uncommenting
   ---------------------------------------- */

/* Option A: Cinematic Teal — classic film color-grade tone */
.portfolio-hover-item:hover,
.portfolio-hover-item:hover .portfolio-hover-item-title,
.portfolio-hover-item:hover .portfolio-hover-item-content {
  color: #3D6B4A !important;
}

/* Option B: Steel Blue — moody, cool, editorial
.portfolio-hover-item:hover,
.portfolio-hover-item:hover .portfolio-hover-item-title,
.portfolio-hover-item:hover .portfolio-hover-item-content {
  color: #7B9EAF !important;
}
*/

/* Option C: Sage Green — earthy, natural, grounded
.portfolio-hover-item:hover,
.portfolio-hover-item:hover .portfolio-hover-item-title,
.portfolio-hover-item:hover .portfolio-hover-item-content {
  color: #7A9A82 !important;
}
*/

/* ----------------------------------------
   HEADER — White name + nav on portfolio page
   (overrides gold from hero.css since the
   portfolio hover layout has dark bg images)
   ---------------------------------------- */
/* Site name uses Riposte on every page */
#header .header-title-text a {
  font-family: "Riposte", sans-serif !important;
  font-weight: 500 !important;
}

body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-title-text a {
  color: #ffffff !important;
  font-size: 1.15em !important;
}

/* ----------------------------------------
   MOBILE — scale site title down for phones
   The desktop 1.15em above is too large on
   small viewports. Use clamp for fluid sizing
   so it scales between phone widths cleanly.
   ---------------------------------------- */
@media (max-width: 767px) {
  #header .header-title-text a {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  /* Portfolio page override (was 1.15em desktop) */
  body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-title-text a {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
  }

}

/* ----------------------------------------
   HEADER LAYOUT — tight + always-horizontal nav
   Applies at ALL widths, including phones.
   - Collapse the .header-announcement-bar-wrapper
     padding (Squarespace defaults to ~14px t/b).
   - Force the horizontal desktop nav to always show,
     even on phones (no hamburger).
   - Ensure title + nav are vertically centered in
     the flex row so they share a common baseline.
   ---------------------------------------- */
#header .header-announcement-bar-wrapper {
  padding-top: 18px !important;
  padding-bottom: 8px !important;
}

/* Always show desktop nav, never the burger.
   Squarespace hides .header-nav (and the action wrappers)
   via its own mobile media queries — override the whole chain. */
#header .header-display-desktop,
#header .header-display-desktop .header-title-nav-wrapper,
#header .header-display-desktop .header-nav,
#header .header-display-desktop .header-nav-wrapper {
  display: flex !important;
}

/* Spread title left + nav right across the full row
   so nav doesn't overflow off the right edge on narrow widths. */
#header .header-display-desktop {
  justify-content: space-between !important;
  width: 100% !important;
}
#header .header-title-nav-wrapper {
  flex: 1 1 auto !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}
#header .header-display-desktop .header-nav-list {
  display: inline-flex !important;
}
#header .header-display-desktop .header-nav-item {
  display: flex !important;
}
#header .header-display-mobile,
#header .header-burger,
#header .header-burger-btn,
#header .burger-box {
  display: none !important;
}

/* Vertical alignment: title + nav share center baseline */
#header .header-inner,
#header .header-title-nav-wrapper {
  align-items: center !important;
}

#header .header-title,
#header .header-title-text,
#header .header-title-text a {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Squarespace's mobile rules give .header-title flex: 1 0 100%
   which makes it consume the entire wrapper width and push the
   nav off-screen. Force size-to-content instead so nav fits. */
#header .header-title {
  flex: 0 0 auto !important;
}
#header .header-nav {
  flex: 0 0 auto !important;
}

#header .header-nav-list a,
#header .header-nav-item a {
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#header .header-nav-list,
#header .header-nav-wrapper,
#header .header-nav {
  align-items: center !important;
}

/* Mobile: extra-tight on small screens */
@media (max-width: 640px) {
  #header .header-announcement-bar-wrapper {
    padding-top: 16px !important;
    padding-bottom: 6px !important;
  }

  /* Shrink nav font on phones so it fits next to title */
  #header .header-nav-list a,
  #header .header-nav-item a {
    font-size: 0.85rem !important;
  }

  #header .header-nav-item {
    padding-left: 0.4em !important;
    padding-right: 0.4em !important;
  }
}

/* Global: Riposte on nav links everywhere */
#header .header-nav-list a,
#header .header-nav-item a {
  font-family: "Riposte", sans-serif !important;
  font-weight: 500 !important;
}

body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-nav-list a {
  color: #ffffff !important;
  opacity: 0.7;
}

body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-nav-item--active a,
body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-nav-list a[aria-current="page"] {
  opacity: 1 !important;
  text-decoration-color: #ffffff !important;
}

/* Consistent active-nav underline on every page.
   Squarespace ships two different underline mechanisms:
   - on portfolio-hover-items-list pages: real
     text-decoration: underline with a 6px offset (clean)
   - on About/project pages: a faux background-image
     gradient at calc(100% - 1.6px) that sits jammed
     into the text baseline
   Kill the faux background and apply the clean real
   underline everywhere. currentColor keeps the line
   the same color as the text on each page. */
#header .header-nav-item--active a,
#header .header-nav-list a[aria-current="page"] {
  background-image: none !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
  text-decoration-color: currentColor !important;
  opacity: 1 !important;
}

body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header .header-nav-list a:hover {
  opacity: 1 !important;
}

body:not(.sqs-is-page-editing):has(.portfolio-hover-items-list) #header svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ----------------------------------------
   PROJECT PAGES — universal scoping
   Every project page on this site is a collection
   item with a hero (containing a horizontalrule
   divider + an image-link to Vimeo as the play
   button) and a .gallery-section. We use those
   structural markers so the rules apply to ALL
   projects automatically — existing and any future
   duplicate — without requiring per-page anchor IDs.

   Scope = `body.view-item:has(.gallery-section)`
   The :has() check ensures we don't accidentally
   target other view-item pages (blog posts, etc.)
   that don't have a gallery section.
   ---------------------------------------- */

/* Subtle left-to-right dark gradient overlay on the
   project hero so the title and metadata stay legible
   over bright/busy background imagery. Targets the
   existing .section-background-overlay layer so we
   don't add new DOM. Scoped to project pages only.

   Squarespace ships this overlay with inline opacity:0
   (section has no overlay color set in the editor) and
   a solid black background-color. We force opacity back
   to 1, zero out the solid color, and paint a gradient
   via background-image whose own alpha stops do the
   work — so transparent regions reveal the photo clean. */
body.view-item:has(.gallery-section) .page-section.has-background .section-background-overlay {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0) 75%
  ) !important;
}

/* CLIENT TOGGLE — hide hero play button + HR divider.
   To hide on a given project page: in the editor, open
   the hero section's settings and set the URL Slug
   field to `hide-cta`. To bring them back: clear the
   slug (or set it to anything else). The slug becomes
   the section's id attribute, which we hook here. */
section#hide-cta .sqs-block-image:has(a[href*="vimeo.com"]),
section#hide-cta .sqs-block-horizontalrule {
  display: none !important;
}

/* HR divider in the project hero — add breathing room
   above and below so the line sits visibly between the
   metadata text block and the play button below it.
   Squarespace ships its hr at margin: 0 with the block
   tightly packed to neighbors in the FE grid. Without
   this, the line bleeds into the bottom of the text
   above ("Format: 16mm" etc) at every viewport.
   Applied universally (desktop + mobile) since both
   suffer from the same flush placement. */
body.view-item:has(.gallery-section) .sqs-block-horizontalrule hr,
body.view-item:has(.gallery-section) .horizontalrule-block hr {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Show all gallery images immediately on page load.
   Squarespace ships .gallery-grid-item-wrapper at
   opacity:0 and uses an IntersectionObserver to flip
   data-load to "true" + fade each item in as it enters
   the viewport. Force all of them visible from the
   start so the gallery feels instant. Paired with JS
   that sets loading="eager" + data-load="true". */
body.view-item .gallery-section .gallery-grid-item,
body.view-item .gallery-section .gallery-grid-item-wrapper,
body.view-item .gallery-section .gallery-image,
body.view-item .gallery-section .gallery-image-wrapper,
body.view-item .gallery-section img,
body.view-item .gallery-section img[data-load="false"] {
  opacity: 1 !important;
  transition: none !important;
}

/* Mobile: force project-page gallery to a single
   column (1-up) instead of the desktop 2-up grid.
   The actual grid is .gallery-grid-wrapper (note: the
   ancestor .gallery-grid is display:block, NOT the
   grid). Squarespace ships an inline
   grid-template-columns: repeat(2, 1fr) on the wrapper
   so !important is required to override it. Same goes
   for the inline padding/gap declarations. */
@media (max-width: 767px) {
  body.view-item .gallery-section .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: shrink the hero play-button image and the
   horizontal divider line above it. The play button
   is identified universally as the image-block whose
   link wraps a Vimeo URL — that pattern is consistent
   across every project page. */
@media (max-width: 767px) {
  /* Play-button image — cap width and left-align.
     Targets the image block that contains a Vimeo
     link (i.e. the play button on every project page). */
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]),
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .sqs-block-content,
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .image-block-outer-wrapper,
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .fluid-image-animation-wrapper,
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .fluid-image-container {
    max-width: 90px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) img {
    max-width: 90px !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* The FE block reserves the original image height (~199px)
     so a 90px image sits centered with ~55px of empty space
     above it. Pull it up to sit close to the line above. */
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .fluid-image-animation-wrapper,
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .fluid-image-container,
  body.view-item:has(.gallery-section) .sqs-block-image:has(a[href*="vimeo.com"]) .image-block-outer-wrapper {
    align-self: flex-start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* No negative margin on the image block — align-self:
     flex-start (above) already puts it at the top of its
     FE block, giving a natural symmetric gap to the HR
     above. Adding negative margin made the HR→image gap
     shorter than the text→HR gap, which looked off-balance
     at mobile. */

  /* Horizontal-rule divider above the play button.
     Project pages have exactly one horizontal-rule block
     in the hero so a global rule scoped to the page is safe. */
  body.view-item:has(.gallery-section) .sqs-block-horizontalrule .sqs-block-content,
  body.view-item:has(.gallery-section) .horizontalrule-block .sqs-block-content {
    display: flex !important;
    justify-content: flex-start !important;
  }

  body.view-item:has(.gallery-section) .sqs-block-horizontalrule hr,
  body.view-item:has(.gallery-section) .horizontalrule-block hr {
    width: 80px !important;
    max-width: 80px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portfolio-hover-item {
    transition: none !important;
  }
}