/* ==========================================================================
   ATELIER DH — Components
   ========================================================================== */

/* --- Site Header --- */

/* Bricks generates per-element CSS with ID selectors (#brxe-xxxxxx) and
   applies global section padding — both beat class-only rules. !important
   is the only reliable override. The #brx-header wrapper is also zeroed. */
#brx-header {
  min-height: 0 !important;
  height: auto !important;
}

#brx-header .brxe-section {
  min-height: 0 !important;
  height: auto !important;
  flex-direction: row !important;    /* Bricks base sets column — override to horizontal layout */
  align-items: center !important;
  padding-top: clamp(14px, 1.6vw, 26px) !important;
  padding-bottom: clamp(14px, 1.6vw, 26px) !important;
}

#brx-header .brxe-section.scrolled {
  padding-top: clamp(10px, 1.2vw, 18px) !important;
  padding-bottom: clamp(10px, 1.2vw, 18px) !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: clamp(14px, 1.6vw, 26px) var(--pad) !important;
  min-height: 0 !important;
  gap: clamp(32px, 6vw, 96px);
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center !important;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-editorial),
              border-color var(--dur-base) var(--ease-editorial),
              padding var(--dur-base) var(--ease-editorial),
              backdrop-filter var(--dur-base) var(--ease-editorial);
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: saturate(130%) blur(5px) !important;
  -webkit-backdrop-filter: saturate(130%) blur(5px) !important;
  border-bottom-color: var(--c-rule) !important;
  padding-top: clamp(10px, 1.2vw, 18px) !important;
  padding-bottom: clamp(10px, 1.2vw, 18px) !important;
}

/* Logo lockups */
/* Logo — LEFT-anchored signature (architecture-first header).
   +10% size retained from previous pass; opacity dropped to 95% so the
   wordmark reads as a quiet signature, never a centerpiece. */
.logo-desktop {
  display: block;
  width: clamp(132px, 11vw, 198px);
  height: auto;
  margin-right: auto;
  opacity: 1;
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  transform: translateY(-1px) scale(1.15);   /* +~12% additional presence */
  transform-origin: left center;
}

.logo-mobile {
  display: none;
  width: clamp(52px, 8.5vw, 72px);
  height: auto;
  margin-right: auto;
  opacity: 1;
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  transform: translateY(-1px) scale(1.15);
  transform-origin: left center;
}

@media (max-width: 767px) {
  .logo-desktop { display: none; }
  .logo-mobile  { display: block; }
}

/* Nav primary — RIGHT-anchored. Shares the header's optical baseline with the logo. */
.nav-primary {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin-left: auto;                         /* RIGHT anchor — nav owns the right edge */
}

/* Understated underline — thin 1px line that grows from center on hover / aria-current.
   Nav subordinates to the logo via an 88 % white resting color + a tighter
   line-height so items sit optically closer to the logo's cap-line. */
.nav-primary a,
.brxe-nav-menu a {
  position: relative;
  padding: 6px 0;
  display: inline-block;
  line-height: 1;                             /* tighter vertical box → optical grouping */
  color: #ffffff;                             /* pure white glyph; opacity handles subordination */
  opacity: 0.9;                               /* subordinate at rest — returns to 1 on hover */
  /* Crisp text rendering on top of the blurred header backdrop */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* GPU rendering — promotes to its own layer for sharp compositing */
  transform: translateZ(0);
  will-change: opacity;
  backface-visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-editorial);
}

.nav-primary a:hover,
.nav-primary a:focus-visible,
.nav-primary a[aria-current="page"],
.nav-primary .current-menu-item > a,
.brxe-nav-menu a:hover,
.brxe-nav-menu a:focus-visible,
.brxe-nav-menu a[aria-current="page"],
.brxe-nav-menu .current-menu-item > a {
  color: #ffffff;
  opacity: 1;                                 /* full white on hover / active */
}

.nav-primary a::after,
.brxe-nav-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 520ms var(--ease-editorial);
  pointer-events: none;
}

.nav-primary a:hover::after,
.nav-primary a:focus-visible::after,
.nav-primary a[aria-current="page"]::after,
.nav-primary .current-menu-item > a::after,
.brxe-nav-menu a:hover::after,
.brxe-nav-menu a:focus-visible::after,
.brxe-nav-menu a[aria-current="page"]::after,
.brxe-nav-menu .current-menu-item > a::after {
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 767px) {
  .nav-primary { display: none; }
  .nav-primary.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--c-bg);
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 5vw, 48px);
    z-index: 200;
  }
  .nav-primary.is-open a {
    font-size: var(--fs-md);
  }
}

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 201;
}

.hamburger span,
.hamburger .hamburger-line {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--c-fg);
  margin: 6px 0;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.hamburger.is-active span:nth-child(1),
.hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2),
.hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3),
.hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
  .hamburger { display: block; }
}


/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
}

/* Cinematic vignette — frames the media without reading as "effect".
   Sits above scrim, below scroll cue. Pointer-safe. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 45%,
    transparent 55%,
    rgba(0, 0, 0, 0.38) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.hero video,
.hero .hero-poster,
.hero picture,
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media-agnostic hero layer — any <video>, <picture>, or <img> the shortcode
   emits fades in together. Starts at 0, softly assembled on load. */
.hero-video,
.hero-scrim,
.hero-media {
  opacity: 0;
  animation: hero-media-in var(--dur-cinematic) var(--ease-editorial) 120ms forwards;
}

/* Raw background video rendered by [adh_hero_video] */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  background: var(--c-bg);
}

/* Dark scrim for contrast and depth — no text, no interaction */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 1;
  pointer-events: none;
  animation-delay: 280ms;
}

@keyframes hero-media-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Refined scroll cue — thin vertical rail with a gentle travelling highlight.
   No text. Appears late so it never competes with the first impression. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 5vh, 64px);
  z-index: 3;
  width: 1px;
  height: clamp(56px, 7vh, 88px);
  transform: translateX(-50%);
  background: var(--c-rule);
  opacity: 0;
  overflow: hidden;
  animation: scroll-cue-enter 900ms var(--ease-editorial) 2600ms forwards;
}

/* Travelling highlight: a short bright segment drifts downward within the rail.
   Uses mask so it stays exactly 1px wide and respects the rail color. */
.scroll-cue::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: scroll-cue-drift 3.8s ease-in-out 3400ms infinite;
}

@keyframes scroll-cue-enter {
  to { opacity: 1; }
}

@keyframes scroll-cue-drift {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(250%);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue,
  .scroll-cue::after,
  .hero-video,
  .hero-scrim,
  .hero-media {
    animation: none !important;
    opacity: 1;
  }
  .scroll-cue { opacity: 0.5; }
}


/* ==========================================================================
   Work Index — quiet editorial index
   Single-column vertical rhythm. Caption always directly below image.
   Sequence logic: FULL opener → narrow L portrait → wide R landscape →
   FULL cinematic anchor → intimate L portrait → FULL resolved close.
   ========================================================================== */

.work-index {
  /* Reduced top padding: header clears at ~80px, leaving ~96px of dark breath — intentional, not void */
  padding: clamp(120px, 13vw, 176px) var(--pad) clamp(64px, 7vw, 96px);
}

/* Suppress any auto-rendered archive/page title above the list. */
.work-index > .brxe-heading:not(.sr-only),
.work-index .archive-title,
.work-index .page-title {
  display: none;
}

.work-index-list {
  display: block;
  width: 100%;
  counter-reset: project-counter;
}

/* Project card — link wrapping media block + caption below */
.work-index-list .project-card {
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: clamp(72px, 7.5vw, 116px);
  text-decoration: none;
  color: inherit;
  overflow: visible;
  aspect-ratio: unset;
}
.work-index-list .project-card:last-child { margin-bottom: 0; }

/* Full-card overlay link — covers media + caption; z-index sits above image */
.card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* Caption and title sit above overlay so text remains selectable */
.work-index-list .card-caption {
  position: relative;
  z-index: 3;
}

/* card-media — contains the image, controls aspect-ratio + overflow */
.work-index-list .card-media {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.work-index-list .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}

.work-index-list .project-card:hover .card-media img {
  transform: scale(1.018);
  filter: brightness(0.86);
}

/* card-caption — always visible directly below the image, never an overlay */
.work-index-list .card-caption {
  padding-top: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Sequential editorial number — 01, 02 … */
.work-index-list .card-caption::before {
  content: counter(project-counter, decimal-leading-zero);
  counter-increment: project-counter;
  font-family: var(--ff-primary);
  font-size: 0.6875rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.38);
  display: block;
  margin-bottom: 8px;
}

.work-index-list .card-caption .project-title {
  font-family: var(--ff-primary);
  font-size: clamp(0.875rem, 1.1vw, 1.125rem);
  font-weight: var(--fw-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  transition: opacity 280ms var(--ease-out);
}

.work-index-list .project-card:hover .card-caption .project-title {
  opacity: 0.45;
}

/* Location: hidden on /work/ index — all current projects share the same city,
   which would repeat "Dubai" six times and create an unintended market signal.
   Location remains available on single project pages via [adh_facts]. */
.work-index-list .card-caption .project-location {
  display: none;
}

/* — — — POSITIONAL RULES — — — */

/* 1 — LEAD: full-width cinematic 16:9 opener */
.work-index-list .project-card:nth-child(1) {
  width: 100%;
  margin-bottom: clamp(88px, 9vw, 140px);
}
.work-index-list .project-card:nth-child(1) .card-media {
  aspect-ratio: 16 / 9;
}
.work-index-list .project-card:nth-child(1) .card-media img {
  object-position: center 62%;
}

/* 2 — Landscape, right-anchored 76%: breathing room left, editorial contrast after opener */
.work-index-list .project-card:nth-child(2) {
  width: 76%;
  margin-left: auto;
  margin-right: 0;
}
.work-index-list .project-card:nth-child(2) .card-media {
  aspect-ratio: 3 / 2;
}
.work-index-list .project-card:nth-child(2) .card-media img {
  object-position: center 15%;
}

/* 3 — Wide landscape, right-anchored 88%: pulls composition rightward, near-full */
.work-index-list .project-card:nth-child(3) {
  width: 88%;
  margin-left: auto;
  margin-right: 0;
}
.work-index-list .project-card:nth-child(3) .card-media {
  aspect-ratio: 3 / 2;
}
.work-index-list .project-card:nth-child(3) .card-media img {
  object-position: center 30%;
}

/* 4 — FULL cinematic anchor: strongest mid-sequence image at 16:9 full-width */
.work-index-list .project-card:nth-child(4) {
  width: 100%;
}
.work-index-list .project-card:nth-child(4) .card-media {
  aspect-ratio: 16 / 9;
}
.work-index-list .project-card:nth-child(4) .card-media img {
  object-position: center 42%;
}

/* 5 — Threshold: wide landscape left 78% — circular oculus reads better in 3:2 */
.work-index-list .project-card:nth-child(5) {
  width: 78%;
  margin-left: 0;
  margin-right: auto;
}
.work-index-list .project-card:nth-child(5) .card-media {
  aspect-ratio: 3 / 2;
}
.work-index-list .project-card:nth-child(5) .card-media img {
  object-position: center 30%;
}

/* 6 — Resolved close: full-width 3:2 landscape — deliberate final note, not a fade */
.work-index-list .project-card:nth-child(6) {
  width: 100%;
}
.work-index-list .project-card:nth-child(6) .card-media {
  aspect-ratio: 3 / 2;
}
.work-index-list .project-card:nth-child(6) .card-media img {
  object-position: center 38%;
}

/* Mobile: clean single-column block rhythm */
@media (max-width: 767px) {
  .work-index-list .project-card {
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: clamp(52px, 9vw, 80px);
  }
  .work-index-list .card-media {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
  }
  .work-index-list .card-caption {
    padding-top: clamp(12px, 3.5vw, 18px) !important;
  }
  .work-index-list .project-card:nth-child(1) .card-media {
    aspect-ratio: 16 / 9 !important;
  }
  .work-index-list .project-card:nth-child(1) .card-caption .project-title {
    font-size: clamp(14px, 4vw, 20px);
  }
  .work-index-list .project-card:nth-child(4) .card-media {
    aspect-ratio: 16 / 9 !important;
  }
}


/* ==========================================================================
   Work Grid — legacy equal grid (retained only for any back-compat use;
   not active on /work/ any more)
   ========================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

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

/* Project Card */
.project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  cursor: pointer;
}

.project-card a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}

/* Hover: zoom + contrast */
.project-card:hover img {
  transform: scale(1.02);
  filter: contrast(1.05) brightness(0.92);
}

/* Gradient veil */
.project-card .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
  pointer-events: none;
}

.project-card:hover .veil {
  opacity: 1;
}

/* Title overlay */
.project-card .card-meta {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  right: var(--pad);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out);
  pointer-events: none;
  z-index: 2;
}

.project-card:hover .card-meta {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices: always show overlay */
@media (hover: none) {
  .project-card .veil     { opacity: 1; }
  .project-card .card-meta { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   Single Project — curated editorial narrative
   ========================================================================== */

/* Header: ghost overlay — no visible band at page top, no border. */
.single-project .site-header {
  min-height: 0 !important;
  padding: clamp(10px, 1.1vw, 16px) var(--pad) !important;
  border-bottom-color: transparent !important;
}
/* Scrolled: lightest possible tint — presence without panel. */
.single-project .site-header.scrolled {
  min-height: 0 !important;
  padding-top: clamp(8px, 0.9vw, 12px) !important;
  padding-bottom: clamp(8px, 0.9vw, 12px) !important;
  background: rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-bottom-color: transparent !important;
}
/* Logo/nav images: never stretch to any min-height */
.single-project .site-header img,
.single-project .logo-desktop img,
.single-project .logo-mobile img,
.single-project .mobile-nav img,
.single-project .bricks-mobile-menu-toggle img {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Mobile: constrain logo so header stays slim (wordmark wraps otherwise) */
@media (max-width: 767px) {
  .single-project .site-header {
    padding: 10px var(--pad) !important;
  }
  .single-project .site-header img {
    max-height: 22px !important;
  }
}

/* Collapse ALL sections inside brx-content to fit their content —
   the global Bricks _cssCustom used to inject .brxe-section{min-height:88vh}
   which is now scoped, but this guard stays as a safety net. */
.single-project #brx-content > .brxe-section {
  min-height: 0 !important;
  align-items: flex-start !important;
}

/* Hero: first section fills the viewport — the opening image statement. */
.single-project #brx-content > .brxe-section:first-child {
  min-height: 88vh !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Hero cover image fills the section via absolute positioning.
   height:100% on img resolves to 'auto' when parent uses min-height (not height).
   Absolute inset is the only reliable fill. */
.single-project #brx-content > .brxe-section:first-child img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block !important;
}
/* Mobile: 75vh hero so the one-liner peeks at the fold — clear scroll invite. */
@media (max-width: 767px) {
  .single-project #brx-content > .brxe-section:first-child {
    min-height: 75vh !important;
  }
}

/* One-liner: generous breath after hero, tight bottom into facts band. */
.single-project #brx-content > .one-liner-section {
  padding: clamp(64px, 7vw, 112px) var(--pad) clamp(40px, 4vw, 64px) !important;
}

/* Facts band: compact data row, relies on facts-row internal padding. */
.single-project #brx-content > .section-pad:has(.facts-row) {
  padding: 0 !important;
}

/* Non-facts section-pad (concept text): tight, restrained. */
.single-project #brx-content > .section-pad:not(:has(.facts-row)) {
  padding: clamp(40px, 4.5vw, 72px) var(--pad) !important;
}

/* Gallery section: minimal outer padding — breathing lives inside the gallery. */
.single-project #brx-content > .gallery-section {
  padding: clamp(40px, 4vw, 64px) 0 !important;
}

/* Next project: generous centering pause before navigation. */
.single-project #brx-content > .next-project {
  padding: clamp(72px, 8vw, 128px) var(--pad) !important;
  align-items: center !important;
}

/* Ensure shortcode/div wrappers fill their section width. */
.single-project #brx-content > .section-pad > .brxe-shortcode,
.single-project #brx-content > .gallery-section > .brxe-shortcode,
.single-project #brx-content > .section-pad > .brxe-div,
.single-project #brx-content > .one-liner-section > .brxe-heading {
  width: 100%;
}

/* Footer section — prevent leaked fullscreen stretch from global Bricks CSS. */
#brx-footer .brxe-section,
footer.brxe-section,
.brxe-section:has(.footer-link) {
  min-height: 0 !important;
}

/* One-liner: typography */
.one-liner-section {
  padding: clamp(64px, 7vw, 112px) var(--pad) clamp(40px, 4vw, 64px);
}

/* Facts Row — horizontal data band, ruled top and bottom */
.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 96px);
  padding: clamp(32px, 3.5vw, 56px) var(--pad);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

/* Hide fact items that have no value */
.fact-item:has(.fact-value:empty) { display: none !important; }
.facts-row:not(:has(.fact-item:not(:has(.fact-value:empty)))) { display: none !important; }

.fact-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
}

/* ==========================================================================
   Gallery — Editorial sequence system
   Hierarchy: full (primary statement) → inset-right → inset-left → repeat
   Portrait images: paired side-by-side or contained solo
   ========================================================================== */

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 5.5vw, 88px);
  width: 100%;
}

/* All images fill their wrapper */
.gallery-item img,
.gallery-pair img {
  width: 100%;
  height: auto;
  display: block;
}

/* — LANDSCAPE HIERARCHY — */

/* Full: primary statement — edge to edge */
.gallery-item--full {
  width: 100%;
}

/* Inset-right: secondary — pulls composition right, creates breathing room left */
.gallery-item--inset-right {
  width: 82%;
  margin-left: auto;
  margin-right: 0;
}

/* Inset-left: tertiary — mirrors inset-right, shifts tension leftward */
.gallery-item--inset-left {
  width: 82%;
  margin-left: 0;
  margin-right: auto;
}

/* — PORTRAIT HIERARCHY — */

/* Solo portrait: contained, centered — reads as a considered detail moment */
.gallery-item--portrait {
  width: 52%;
  margin-left: auto;
  margin-right: auto;
}

/* Portrait pair: two verticals side-by-side — editorial diptych */
.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 0.8vw, 14px);
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

/* Gallery section wrapper — full-bleed shortcode */
.gallery-section {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(48px, 5vw, 80px);
}
.gallery-section .brxe-shortcode {
  width: 100%;
  max-width: none;
}

/* Concept/description column: narrow readable measure */
.concept-column {
  max-width: var(--max-w-text);
}

/* Mobile — gallery: full-width, tighter gap, portraits stack */
@media (max-width: 767px) {
  .project-gallery {
    gap: clamp(24px, 5vw, 40px);
  }
  .gallery-item--inset-right,
  .gallery-item--inset-left {
    width: 100%;
    margin: 0;
  }
  .gallery-item--portrait {
    width: 75%;
  }
  .gallery-pair {
    grid-template-columns: 1fr;
    width: 100%;
    gap: clamp(24px, 5vw, 40px);
  }
  /* Section padding: tighter on mobile to reduce black breathing room */
  .single-project #brx-content > .one-liner-section {
    padding: clamp(40px, 8vw, 56px) var(--pad) clamp(24px, 5vw, 36px) !important;
  }
  .single-project #brx-content > .section-pad:not(:has(.facts-row)) {
    padding: clamp(28px, 6vw, 44px) var(--pad) !important;
  }
  .single-project #brx-content > .gallery-section {
    padding: clamp(28px, 5vw, 44px) 0 !important;
  }
  .single-project #brx-content > .next-project {
    padding: clamp(48px, 10vw, 80px) var(--pad) !important;
  }
}

/* Detail Strip (3 close-ups) */
.detail-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

@media (max-width: 767px) {
  .detail-strip {
    grid-template-columns: 1fr;
  }
}

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

/* Next Project Nav — monograph-style transition */
.next-project {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(96px, 12vw, 200px) var(--pad);
  text-align: center;
  border-top: 1px solid var(--c-rule);
}


/* ==========================================================================
   Contact Form
   ========================================================================== */

.contact-form {
  max-width: var(--max-w-text);
  margin-top: clamp(48px, 6vw, 96px);
}

.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-fg);
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  letter-spacing: 0.01em;
  padding: 1.1em 0;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-editorial);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--c-fg);
  outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--c-mute);
  font-weight: var(--fw-light);
  letter-spacing: 0.01em;
}

.contact-form label {
  display: block;
  margin-top: clamp(24px, 3vw, 48px);
}

.contact-form label:first-of-type {
  margin-top: 0;
}

.contact-form button[type="submit"] {
  margin-top: clamp(48px, 6vw, 96px);
  background: transparent;
  border: 1px solid var(--c-rule);
  color: var(--c-fg);
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.1em 2.6em;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-editorial),
              background var(--dur-base) var(--ease-editorial),
              letter-spacing var(--dur-base) var(--ease-editorial);
}

.contact-form button[type="submit"]:hover,
.contact-form button[type="submit"]:focus-visible {
  border-color: var(--c-fg);
  background: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.26em;
}

.contact-banner {
  max-width: var(--max-w-text);
  margin: 0 auto clamp(24px, 3vw, 48px);
  padding: clamp(12px, 1.5vw, 18px) clamp(16px, 2vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  text-align: center;
}

.contact-banner--ok {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.contact-banner--err {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-mute);
}


/* ==========================================================================
   Utility: Section Spacing
   ========================================================================== */

.section-pad {
  padding: var(--section-y) var(--pad);
}

.section-pad-x {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.max-w-content {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* Studio teaser / Contact strip (legacy home-page snippets, retained for compat) */
.studio-teaser,
.contact-strip {
  padding: var(--section-y) var(--pad);
  text-align: center;
}

/* ==========================================================================
   Studio page — editorial portrait layout
   ========================================================================== */

.studio-page {
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: 0;
}

/* Contact page keeps its own rhythm */
.contact-page {
  padding-top: clamp(140px, 16vw, 240px);
  padding-bottom: clamp(96px, 12vw, 180px);
}

.studio-column {
  max-width: var(--max-w-text);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 52px);
}

.contact-column {
  max-width: var(--max-w-text);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 52px);
}

/* Tagline (editorial intro) — sits alone above the first paragraph */
.studio-page .tagline,
.contact-page .tagline {
  margin-bottom: clamp(24px, 3vw, 48px);
}

/* Micro-labels act as section breaks between body paragraphs: wider spacing above,
   a hair of space below. */
.studio-page .micro-label,
.contact-page .micro-label {
  margin-top: clamp(24px, 3vw, 56px);
}

/* Body paragraphs inside the editorial column */
.studio-page .body-text,
.contact-page .body-text {
  max-width: none;
}

/* A final muted line (e.g. "Full discretion. Hands-on. No delegation.") */
.studio-page .body-text + .body-text {
  margin-top: clamp(12px, 1.5vw, 24px);
}

/* Email link (used in Contact page + Home contact strip) */
.email-link {
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.email-link:hover {
  border-color: var(--c-fg);
}


/* ==========================================================================
   Studio page — precision micro-tuning pass
   320px portraits, 32px gap, centered alignment, 520px text max-width.
   ========================================================================== */

.studio-micro-label {
  display: block;
  font-family: var(--ff-primary); font-size: 11px; font-weight: var(--fw-light);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-mute);
  max-width: 1180px; margin: 0 auto clamp(36px, 5vw, 56px); padding: 0 40px;
}

.person-block {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: center;
}

.hila-block { margin-top: 54px; }

.person-portrait {
  position: relative;
  width: 320px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-rule);
}

.person-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.dan-block  .person-portrait img { object-position: center 28%; }
.hila-block .person-portrait img { object-position: center 18%; }

.bio-col {
  display: flex;
  flex-direction: column;
  max-width: 470px;
  transform: translateY(8px);
}

.bio-body {
  font-family: var(--ff-primary); font-size: 20px; font-weight: 400;
  line-height: 1.53; color: rgba(255, 255, 255, 0.92); margin: 0;
}

.hila-bio {
  font-family: var(--ff-primary); font-size: 20px; font-weight: 400;
  line-height: 1.53; color: rgba(255, 255, 255, 0.82); margin: 0;
}

/* Pub-line: 20px below Hila, left-aligned with bio text column */
.pub-line {
  display: block;
  max-width: 1180px;
  margin: 20px auto 0;
  padding: 0 40px 0 calc(40px + 320px + 30px);
  font-family: var(--ff-primary); font-size: 14px; font-weight: var(--fw-light);
  line-height: 1.4; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.01em;
}

@media (max-width: 960px) {
  .person-block { grid-template-columns: 280px 1fr; gap: 28px; }
  .person-portrait { width: 280px; }
  .pub-line { padding-left: calc(40px + 280px + 28px); }
}

@media (max-width: 767px) {
  .studio-micro-label { padding: 0 20px; margin-bottom: 28px; }
  .person-block { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; }
  .person-portrait { width: 100%; max-width: 320px; }
  .bio-col { max-width: 100%; transform: none; }
  .hila-block { margin-top: 48px; }
  .bio-body { font-size: 17px; }
  .hila-bio { font-size: 17px; }
  .pub-line { padding: 0 20px; margin-top: 20px; font-size: 13px; }
}


/* ==========================================================================
   Gallery Section (Single Project)
   ========================================================================== */

.gallery-section img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   Hero overlay 1.5.3 (2026-10-27): "Light" treatment for the night Hero.
   APPEND to the end of bricks-child/assets/css/components.css (after the
   existing .hero / .hero-scrim / .scroll-cue rules, so these win).

   Replaces the global 22 % scrim and the radial vignette with local protection
   only: a top gradient behind the logo/navigation and a faint bottom gradient
   behind the scroll cue. Measured on every frame of the film: white logo and
   navigation stay at or above 9.8:1 (desktop) and 10.8:1 (phone) contrast.
   The .hero-scrim element and its fade-in animation are reused; no markup change.
   ========================================================================== */

/* Vignette off: it darkened the corners by up to 38 % over an already dark film. */
.hero::after {
  display: none;
}

/* The scrim becomes two gradients instead of a flat 22 % layer. */
.hero-scrim {
  --hero-shade-top: clamp(120px, 18vh, 200px);
  --hero-shade-bottom: clamp(110px, 15vh, 170px);
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.30) 0,
      rgba(0, 0, 0, 0.18) calc(var(--hero-shade-top) * 0.35),
      rgba(0, 0, 0, 0.06) calc(var(--hero-shade-top) * 0.70),
      rgba(0, 0, 0, 0) var(--hero-shade-top)
    ),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.15) calc(var(--hero-shade-bottom) * 0.45),
      rgba(0, 0, 0, 0) var(--hero-shade-bottom)
    );
}

/* 1px dark keyline keeps the 1px scroll-cue rail visible over lit areas of the
   film (STAR's lit plinth, THRESHOLD's pool lights): >= 4.0:1 instead of 1.45:1. */
.scroll-cue {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   Hero pause control 1.5.4 (2026-10-27): APPEND to the end of
   bricks-child/assets/css/components.css, directly AFTER the 1.5.3
   "Hero overlay" block. Styles the <button class="hero-pause"> that
   [adh_hero_video] 1.5.4 prints after .hero-scrim.

   Placement: right edge (var(--pad)), lifted above the 1.5.3 bottom gradient
   band (--hero-shade-bottom), so it stays clear of the centred scroll cue and
   of the bottom area. Its own dark disc keeps the icon readable over any frame.
   Move it with --hero-pause-right / --hero-pause-bottom if needed.
   ========================================================================== */

.hero-pause {
  --hero-pause-right: var(--pad);
  --hero-pause-bottom: calc(clamp(110px, 15vh, 170px) + 12px);  /* = 1.5.3 --hero-shade-bottom + 12 px */
  position: absolute;
  right: var(--hero-pause-right);
  bottom: var(--hero-pause-bottom);
  z-index: 4;                                   /* above .hero-scrim (1) and .scroll-cue (3) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                                  /* WCAG 2.5.8 / Apple HIG target */
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--c-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: scroll-cue-enter 900ms var(--ease-editorial) 2600ms forwards;   /* arrives with the scroll cue */
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.hero-pause[hidden] {
  display: none;                                /* display:inline-flex above would override the UA rule */
}

.hero-pause:hover {
  background: rgba(0, 0, 0, 0.65);
  border-color: var(--c-fg);
}

.hero-pause:focus-visible {
  outline: 2px solid var(--c-fg);
  outline-offset: 3px;
  border-color: var(--c-fg);
}

.hero-pause__icon {
  display: block;
  width: 14px;
  height: 14px;
}

.hero-pause__icon--play,
.hero-pause.is-paused .hero-pause__icon--pause {
  display: none;
}

.hero-pause.is-paused .hero-pause__icon--play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pause {
    animation: none !important;
    opacity: 1;
    transition: none;
  }
}


/* ==========================================================================
   B1 mobile navigation (2026-10-27): APPEND to the end of
   bricks-child/assets/css/components.css, AFTER the hero 1.5.3 and 1.5.4 blocks.
   Works with mobile-nav.js 1.1 (adds body.adh-nav-open while the menu is open).

   Why the overlay was a 71 px bar: .site-header keeps a transform from the
   stage-in-header animation (fill-mode forwards) and gets backdrop-filter when
   .scrolled. Either one makes the header the containing block for its
   position:fixed children, so "inset:0" filled the header, not the screen.
   !important declarations beat animation values, so the header animation is
   not restarted when the class is toggled.
   ========================================================================== */

body.adh-nav-open .site-header {
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 767px) {
  /* Full-screen overlay */
  .nav-primary.is-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--c-bg);
    z-index: 200;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Bricks hides the desktop menu below its mobile breakpoint; show it in the overlay */
  .nav-primary.is-open .bricks-nav-menu-wrapper {
    display: block !important;
  }

  .nav-primary.is-open .bricks-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 5vw, 48px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-primary.is-open .bricks-nav-menu > li {
    margin: 0 !important;
  }

  .nav-primary.is-open .bricks-nav-menu a {
    font-size: var(--fs-md);
    padding: 12px 8px;               /* >= 44 px tap target */
    opacity: 1;
  }

  /* One menu only: hide Bricks' unused built-in toggle and off-canvas */
  .nav-primary .bricks-mobile-menu-toggle,
  .nav-primary .bricks-mobile-menu-wrapper,
  .nav-primary .bricks-mobile-menu-overlay {
    display: none !important;
  }

  /* Hamburger as a real button: reset UA button styles, 44 px target, stays above the overlay.
     display:block (not flex) so the line margins still collapse to the 7 px pitch that the
     existing is-active translateY(7px) rotations assume. */
  .hamburger {
    position: relative;
    z-index: 201;
    display: block;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .hamburger:focus-visible {
    outline: 2px solid var(--c-fg);
    outline-offset: 4px;
  }
}


/* ==========================================================================
   ATELIER DH: content / SEO / accessibility add-on (2026-10-27)

   APPEND to the very end of bricks-child/assets/css/components.css,
   AFTER the fix-package blocks. Final order of components.css:
     original -> hero 1.5.3 -> hero 1.5.4 -> B1 mobile nav -> THIS FILE

   Only new rules. Nothing here edits or repeats a rule from the fix package;
   where a selector is shared (.single-project .site-header, .contact-form),
   only properties the earlier blocks do not set are added.
   ========================================================================== */


/* --------------------------------------------------------------------------
   S1: headings. Bricks elements switched from div/span to h1/h2 keep their look.
   The class rules already win over typography.css h1/h2 for size, weight,
   tracking and margin. Only line-height falls back to the heading default
   (1.15), so it is pinned to the body value the div/span had.
   -------------------------------------------------------------------------- */
h1.studio-micro-label,
h1.micro-label,
h2.micro-label {
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
   S6: header nav legible over bright skies (project pages).
   A soft gradient behind the header band only (46 % black at the top edge,
   ~40 % behind the nav text, fading to nothing 56 px below the header),
   plus a faint halo on the nav glyphs. The photograph below that band is
   untouched. Measured on the Monarch / Aura / Vector heroes: 4.5:1 or better
   for 90 % of the pixels behind the nav text WITHOUT counting the halo
   (was 1.7-2.9:1 at the 10th percentile). See test/results.json.
   -------------------------------------------------------------------------- */
.single-project .site-header::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 56px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0.14) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

.single-project .nav-primary a {
  opacity: 1;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.35);
}

/* Mobile: the hamburger lines get the same faint halo. */
.single-project .hamburger-line {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

/* The B1 full-screen menu is solid black: no halo needed inside it. */
.single-project .nav-primary.is-open a {
  text-shadow: none;
}


/* --------------------------------------------------------------------------
   S7: contact form fields visible, focus clearly visible.
   Field line: 45 % white = 4.4:1 on black (WCAG 1.4.11 needs 3:1; was 1.3:1).
   Focus: the line turns white and 2 px (box-shadow, so nothing moves),
   plus a thin outline around the field.
   -------------------------------------------------------------------------- */
.contact-form input,
.contact-form textarea {
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-bottom-color: var(--c-fg);
  box-shadow: 0 1px 0 0 var(--c-fg);
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 6px;
}

.contact-form button[type="submit"] {
  border-color: rgba(255, 255, 255, 0.45);
}

/* Browser autofill keeps the black field and white text. */
.contact-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-fg);
  caret-color: var(--c-fg);
  transition: background-color 600000s 0s;
}


/* --------------------------------------------------------------------------
   S10 + S15: footer "(c) 2026 ATELIER DH   PRIVACY" spacing and tap target.
   Cause: the footer row is flex + space-between (Bricks), but its section
   centres it and shrinks it to its content, so there is no space to spread.
   Keeps today's centred look and adds a real gap.
   (To put the two items at opposite edges instead: replace the
   justify-content line with  width: 100%;  and delete column-gap.)
   -------------------------------------------------------------------------- */
#brx-footer .brxe-div:has(> .footer-link) {
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 2.5em;
  row-gap: 0;
}

#brx-footer .footer-link {
  display: inline-block;
  padding-block: 14px;
}


/* --------------------------------------------------------------------------
   404 template (Bricks > Templates > Error page). Classes: see A3-404-structure/.
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 72vh;
  min-height: 72dvh;
  display: flex;
  align-items: center;
}

.error-column {
  max-width: var(--max-w-text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 36px);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2.5em;
  margin-top: clamp(12px, 2vw, 28px);
}

.error-links .cta-link {
  display: inline-block;
  padding-block: 12px 0.35em;
}

/* ==========================================================================
   Contact form 1.5.5 (2026-10-28): persistent visible labels and field errors.
   Each field is now <div class="contact-field"><label for>…</label><input id>…</div>,
   so spacing moves from the label to the field wrapper. Contrast on #000:
   label rgba(255,255,255,.72) ≈ 10.7:1; error text #f2b8b5 ≈ 11:1.
   ========================================================================== */
.contact-form .contact-field + .contact-field {
  margin-top: clamp(24px, 3vw, 40px);
}

.contact-form .contact-field label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular, 400);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.contact-form .contact-field input,
.contact-form .contact-field textarea {
  padding-top: 0.6em;
}

.contact-form .contact-field--error input,
.contact-form .contact-field--error textarea {
  border-bottom-color: #f2b8b5;
}

.contact-form .contact-field__error {
  margin: 8px 0 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: #f2b8b5;
}

/* Comfortable touch target for the submit control (was about 41px tall). */
.contact-form button[type="submit"] {
  min-height: 48px;
}

.contact-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-banner:focus {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}