#benedi-projects-archive {
  --bp-space: clamp(20px, 3vw, 64px);
  --bp-header-height: 88px;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--benedi-beige);
  color: var(--benedi-brown-deep);
  font: 400 16px/1.45 var(--font-body);
  scrollbar-width: thin;
  scrollbar-color: var(--benedi-taupe-light) var(--benedi-beige);
}
#benedi-projects-archive[hidden], #benedi-projects-curtain[hidden] { display: none; }
.bp-archive *, .bp-archive *::before, .bp-archive *::after { box-sizing: border-box; }
.bp-archive a { color: inherit; text-decoration: none; }
.bp-archive button { font: inherit; }
.bp-archive a:focus-visible, .bp-archive button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.bp-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--benedi-beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--bp-space);
  gap: 20px;
  height: var(--bp-header-height);
}
.bp-brand { display: block; width: 154px; flex: 0 0 auto; }
.bp-brand svg, .bp-curtain-word svg { display: block; width: 100%; height: auto; }
.bp-close { border: 0; background: transparent; color: inherit; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; padding: 12px; }
.bp-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1; }
/* Keep the title in normal flow so the first photos are visible on entry. */
.bp-intro { padding: clamp(8px, 1.5svh, 20px) var(--bp-space) 0; display: flex; flex-direction: column; }
/* The original wordmark uses Bodoni Moda Regular at optical size 11.
   Freeze those axes so large display text keeps the same letterforms. */
.bp-intro h1 { margin: 0; overflow: hidden; font: 400 min(24vw, 52svh, 480px)/1.35 "Bodoni BENEDI", serif; font-optical-sizing: none; font-variation-settings: "opsz" 11, "wght" 400; font-synthesis: none; letter-spacing: -.035em; outline: none; }
.bp-intro h1 span { display: block; padding: .02em .035em .06em; white-space: nowrap; }
.bp-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; padding: 24px var(--bp-space) 140px; align-items: start; }
.bp-index { position: sticky; top: 112px; display: flex; flex-direction: column; align-items: flex-start; }
.bp-index p { margin: 0 0 22px; text-transform: uppercase; font-size: 13px; }
.bp-index sup { font-size: 10px; margin-left: 4px; vertical-align: super; }
.bp-index a { position: relative; min-height: 44px; padding: 10px 0 10px 28px; color: var(--benedi-taupe); font-size: 13px; text-transform: uppercase; }
.bp-index a::before { content: "↗"; position: absolute; left: 0; opacity: 0; }
.bp-index a[aria-current="true"] { color: var(--benedi-brown-deep); }
.bp-index a[aria-current="true"]::before { opacity: 1; }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 20px; }
.bp-project { display: block; margin: 0; min-width: 0; scroll-margin-top: 112px; }
.bp-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--benedi-sand); }
.bp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-caption { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
#benedi-projects-curtain { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; overflow: hidden; background: var(--benedi-brown-deep); color: var(--benedi-beige); pointer-events: auto; }
.bp-curtain-word { width: min(72vw, 1060px); }
html.bp-open #app { pointer-events: none; }
.bp-footer-host .footer { margin: 0 !important; }
.bp-footer-host .footer-wordmark { color: var(--benedi-beige); opacity: 1 !important; }
.bp-footer-host .footer-bottom-inner { transform: none !important; }
.bp-footer-host .footer-bottom-overlay { opacity: 0 !important; }
.bp-footer-host .footer-scroll { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .bp-index a:hover { color: var(--benedi-brown-deep); } }
@media (max-width: 1023px) {
  .bp-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .bp-grid { gap: 40px 16px; }
}
@media (max-width: 767px) {
  #benedi-projects-archive { touch-action: pan-y pinch-zoom; }
  .works-grid-button [data-projects-open] .works-grid-title-text { font-size: clamp(26px, 11.5vw, 50px); }
  #benedi-projects-archive { --bp-header-height: calc(68px + max(18px, env(safe-area-inset-top))); }
  .bp-header { padding-top: max(18px, env(safe-area-inset-top)); }
  .bp-brand { width: 136px; }
  .bp-intro h1 { font-size: min(22vw, 52svh); }
  .bp-layout { display: block; padding-top: 14px; padding-bottom: 72px; }
  .bp-index { position: static; display: block; margin-bottom: 28px; }
  .bp-index p { margin-bottom: 12px; }
  .bp-index a { display: inline-block; padding: 10px 16px 10px 0; font-size: 12px; }
  .bp-index a::before { display: none; }
  .bp-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bp-caption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .bp-archive *, #benedi-projects-curtain { scroll-behavior: auto !important; } }