/* Squarespace computes each button block's border/shape/color at runtime
   from JS (reading a per-block style config never present in site.css), so
   without that JS the buttons render as bare text. Give them back their
   pill shape using the text color the cascade already gets right, with a
   fill-in hover instead of a flat opacity fade (see DESIGN REFRESH below
   for the color/motion reasoning). */
.sqs-block-button-element {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding: 0.65em 1.6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.06em;
  transition: color 0.35s ease 0.05s;
}
.sqs-block-button-element::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-accent, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.sqs-block-button-element:hover {
  color: #f7f6f2;
}
.sqs-block-button-element:hover::before {
  transform: scaleX(1);
}

/* Fallback layout: Squarespace's grid/masonry/reel gallery JS controllers
   require their platform's webpack chunks, which aren't self-hostable in a
   portable way, so lay out the real images (already in the markup) with
   plain CSS instead. Shared across every page that uses these blocks. */
.gallery-grid-wrapper{display:grid!important;grid-template-columns:repeat(3,1fr);gap:35px}
.gallery-grid-item-wrapper{position:relative;width:100%;padding-bottom:133.333%;height:0!important}
.gallery-grid-item-wrapper img{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important}
@media (max-width:768px){.gallery-grid-wrapper{grid-template-columns:repeat(2,1fr);gap:20px}}

/* Column placement itself is handled in site.js (real "shortest column
   gets the next item" masonry, which plain CSS columns can't do — those
   only fill top-to-bottom then move to the next column). This just sizes
   each item once it's placed. */
.gallery-masonry-item{display:block!important}
.gallery-masonry-item-wrapper{position:relative;width:100%;height:auto!important}
.gallery-masonry-item-wrapper img{position:static!important;width:100%!important;height:auto!important;object-fit:unset!important}

/* Horizontal filmstrip: each item's own aspect ratio at a fixed height,
   scrolled natively instead of through Squarespace's carousel JS. */
.gallery-reel{overflow:hidden}
.gallery-reel-wrapper{height:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.gallery-reel-list{display:flex!important;position:relative!important;gap:10px;height:100%;width:max-content!important}
.gallery-reel-item{display:flex!important;flex:0 0 max-content!important;height:100%;position:relative!important;width:max-content!important;margin:0!important}
.gallery-reel-image-link{display:flex!important;position:relative!important;height:100%;width:max-content!important}
.gallery-reel-item-wrapper{display:flex!important;position:relative!important;height:100%;width:max-content!important}
.gallery-reel-item-src{display:flex!important;position:relative!important;height:100%;width:max-content!important;opacity:1!important}
.gallery-reel-item-src img{position:static!important;height:100%!important;width:auto!important;max-width:none!important;object-fit:cover;display:block}

/* "Fit" mode image blocks (as opposed to "Fill"/cover): Squarespace's JS
   normally measures the block's rendered height and injects a matching
   --image-component-container-width in px, so the box hugs the image's
   own aspect ratio instead of stretching to the full block width. Without
   that JS the width falls back to 100%, letterboxing the image inside an
   oversized box that visually collides with whatever sits next to it.
   Replicate it declaratively with aspect-ratio, which needs no JS and
   stays correct across any resize. */
.image-component-container-fit .fluid-image-container.sqs-image-content {
  width: auto !important;
  aspect-ratio: var(--image-component-native-aspect-ratio);
}

/* Click-to-enlarge lightbox overlay (see site.js). */
.custom-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}
.custom-lightbox.is-open {
  display: flex;
}
body.custom-lightbox-lock {
  overflow: hidden;
}
.custom-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.custom-lightbox-close,
.custom-lightbox-prev,
.custom-lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5em;
}
.custom-lightbox-close {
  top: 12px;
  right: 20px;
}
.custom-lightbox-prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.custom-lightbox-next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Every page section carries a `.section-border` layer (a full-size,
   absolutely-positioned div tinted with the semi-transparent
   --siteBackgroundColor) meant to sit behind that section's actual
   content. Site-wide here it paints on top instead, washing every photo
   out with a light haze — confirmed by measuring pixel color with and
   without it. Squarespace's own stacking context for this must depend on
   something JS sets up; keeping it behind via z-index is the direct fix. */
.section-border {
  z-index: -1;
}

/* Squarespace's scroll-reveal JS never runs offsite, so elements stay
   stuck at their pre-animation opacity:0/height:1px state. Force them
   visible instead of waiting for a controller that will never load. */
[data-animation-role]{opacity:1!important;transform:none!important}
.gallery-grid-item-wrapper{opacity:1!important}
.gallery-masonry-item-wrapper{opacity:1!important;height:auto!important}

/* ==========================================================================
   DESIGN REFRESH
   Same layout, same order, same palette — this section only adds the
   typographic and motion polish a hand-built theme normally ships with:
   the site's own accent green (measured from the existing button color)
   used a little more deliberately, a considered hover state on every
   photo instead of none at all, and a soft entrance for the galleries
   instead of everything just snapping into place. Nothing here changes
   where anything sits on the page.
   ========================================================================== */
:root {
  --site-accent: #0b5e38;
}

::selection {
  background: var(--site-accent);
  color: #f7f6f2;
}

/* Photo grids (headshots, "In Action", the poster reel) get a quiet lift
   on hover — a soft shadow and a slight zoom, clipped to each frame so
   nothing overlaps its neighbour. Signals "these are clickable" without
   needing a caption or an icon. */
.gallery-grid-item-wrapper,
.gallery-masonry-item-wrapper,
.gallery-reel-item-src {
  overflow: hidden;
}
.gallery-grid-item img,
.gallery-masonry-item img,
.gallery-reel-item-src img {
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.gallery-grid-item:hover img,
.gallery-masonry-item:hover img,
.gallery-reel-item:hover .gallery-reel-item-src img {
  transform: scale(1.045);
}
.gallery-grid-item-wrapper,
.gallery-masonry-item-wrapper {
  transition: box-shadow 0.4s ease;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper,
.gallery-masonry-item:hover .gallery-masonry-item-wrapper {
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.45);
}

/* Soft entrance for the same three galleries as they scroll into view
   (see site.js) — a brief fade and rise instead of an instant pop-in.
   Targets the outer figure, one level above the block Squarespace's own
   [data-animation-role] rule already forces visible above, so the two
   never fight over the same element. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1), transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   FORMAT PROPOSAL (v2) — exploratory, easy to lift back out
   Everything above this line is the approved design refresh. Everything
   below is a second pass at the same idea, one level deeper: not motion
   this time, but the quieter things — letter-spacing, how a divider
   reads, how a photo sits in its frame. Still the exact same order, the
   exact same palette, nothing repositioned. If this section is removed
   wholesale the site returns to exactly the approved v1 look.
   ========================================================================== */

/* Section headings ("HEADSHOTS", "IN ACTION", "FILM", "TRAINING"...) get
   a touch of tracking and a lighter weight — the small-caps, wide-set
   look of a printed program bill rather than a plain web heading. */
h1, h2, h3, h4 {
  letter-spacing: 0.02em;
}
h3, h4 {
  font-weight: 400;
}

/* Body copy: a hair more line-height for a calmer, more considered read. */
body, .sqs-html-content p {
  line-height: 1.6;
}

/* Nav: slightly wider tracking, small-caps read (the type is already
   serif and mixed-case; this nudges it toward a title-block feel without
   changing the words or their order). */
.header-nav-item > a, .header-nav-folder-title {
  letter-spacing: 0.03em;
}

/* Section dividers: Squarespace's own <hr> is a plain full-width grey
   rule. Shortened and centered with a soft accent-to-transparent fade,
   it reads as a deliberate flourish instead of a leftover default —
   without touching the space it sits in, so nothing else moves. */
.sqs-block-horizontalrule hr {
  max-width: 140px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--site-accent, #0b5e38) 50%, transparent);
  opacity: 0.55;
}

/* Photos get a permanent, quiet frame — a hairline ring plus a very soft
   ambient shadow at rest, deepening into the existing hover lift instead
   of appearing from nothing. Both are box-shadow, so the box's own size
   never changes and no neighbouring image shifts. */
.gallery-grid-item-wrapper,
.gallery-masonry-item-wrapper {
  box-shadow: 0 0 0 1px rgba(11, 94, 56, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.35);
}
.gallery-grid-item:hover .gallery-grid-item-wrapper,
.gallery-masonry-item:hover .gallery-masonry-item-wrapper {
  box-shadow: 0 0 0 1px rgba(11, 94, 56, 0.18), 0 22px 44px -18px rgba(0, 0, 0, 0.45);
}
.gallery-reel-item-src {
  box-shadow: 0 0 0 1px rgba(11, 94, 56, 0.12), 0 10px 24px -16px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.4s ease;
}
.gallery-reel-item:hover .gallery-reel-item-src {
  box-shadow: 0 0 0 1px rgba(11, 94, 56, 0.18), 0 22px 44px -18px rgba(0, 0, 0, 0.45);
}

/* The site's name in the header: a touch more tracking so it reads as a
   wordmark rather than a plain heading. */
.header-title-text, .header-title a {
  letter-spacing: 0.015em;
}