/* Cupertino Lens Living Folios ----------------------------------------- */

.cl-category-hero {
  --cl-category-accent: #b92c36;
  --cl-category-accent-text: #9d202a;
  --cl-art-x: 0px;
  --cl-art-y: 0px;
  --cl-art-scale: 1.035;
  --cl-focus-x: 66%;
  --cl-focus-y: 48%;
  --cl-focus-opacity: .52;
  --cl-progress: 0;
  --cl-signal-left: 54%;
  --cl-signal-right: 22%;
  position: relative;
  width: min(var(--cl-frame), calc(100% - 3rem));
  height: 118svh;
  min-height: 820px;
  margin: 0 auto clamp(3rem, 7vw, 7rem);
  touch-action: pan-y;
}

.cl-category-hero-stage {
  position: sticky;
  top: 6.75rem;
  height: calc(100svh - 7.75rem);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 36px 110px rgba(37, 30, 26, .14),
    0 5px 18px rgba(37, 30, 26, .06),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.cl-category-art,
.cl-category-art-base,
.cl-category-art-focus,
.cl-category-art-focus img,
.cl-category-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cl-category-art { z-index: -3; overflow: hidden; background: #fff; }

.cl-category-art-base,
.cl-category-art-focus img {
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: translate3d(var(--cl-art-x), var(--cl-art-y), 0) scale(var(--cl-art-scale));
  transition: transform .62s cubic-bezier(.18, .76, .18, 1), filter .62s ease;
}

.cl-category-art-base {
  filter: saturate(.96) contrast(1.015);
}

.cl-category-art-focus {
  z-index: 2;
  overflow: hidden;
  opacity: var(--cl-focus-opacity);
  -webkit-mask-image: radial-gradient(circle 16rem at var(--cl-focus-x) var(--cl-focus-y), #000 0, rgba(0,0,0,.9) 38%, transparent 74%);
  mask-image: radial-gradient(circle 16rem at var(--cl-focus-x) var(--cl-focus-y), #000 0, rgba(0,0,0,.9) 38%, transparent 74%);
  pointer-events: none;
}

.cl-category-art-focus img {
  filter: saturate(1.08) contrast(1.04) brightness(1.025);
  transform: translate3d(var(--cl-art-x), var(--cl-art-y), 0) scale(calc(var(--cl-art-scale) + .018));
}

.cl-category-veil {
  z-index: -1;
  width: 64%;
  right: auto;
  border-right: 1px solid rgba(255, 255, 255, .48);
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 45%, rgba(255,255,255,.68) 70%, rgba(255,255,255,.12) 96%, transparent 100%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.84) 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.84) 72%, transparent 100%);
  transform-origin: left center;
}

.cl-category-veil::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px 0 0 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset -1px 0 0 rgba(255,255,255,.44);
}

.cl-category-hero-copy {
  position: absolute;
  z-index: 4;
  left: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(3rem, 10vh, 7rem);
  width: min(43rem, 52%);
  color: var(--cl-ink);
  text-wrap: balance;
}

.cl-category-section {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  color: var(--cl-category-accent-text);
  font: 650 .66rem/1.3 var(--cl-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cl-category-section span + span::before {
  content: "";
  display: inline-block;
  width: 24px;
  margin: 0 .8rem 3px 0;
  border-top: 1px solid currentColor;
}

.cl-category-hero h1 {
  max-width: 8.5ch;
  margin: 0;
  font: 430 clamp(5.2rem, 10vw, 10.5rem)/.77 var(--cl-editorial);
  font-optical-sizing: auto;
  letter-spacing: -.075em;
}

.cl-category-standfirst {
  max-width: 31ch;
  margin: clamp(1.5rem, 3.4vh, 2.5rem) 0 0;
  color: #403d39;
  font: 400 clamp(1.08rem, 1.35vw, 1.34rem)/1.48 var(--cl-editorial);
  font-optical-sizing: auto;
}

.cl-category-direction {
  margin: 2rem 0 0;
  color: var(--cl-category-accent-text);
  font: 620 .61rem/1.3 var(--cl-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cl-category-control {
  position: absolute;
  z-index: 6;
  right: 1.3rem;
  bottom: 1.3rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  padding: .75rem .82rem .75rem 1.1rem;
  background: rgba(255,255,255,.5);
  color: var(--cl-ink);
  box-shadow: 0 14px 45px rgba(23,22,20,.14), inset 0 1px 0 rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  font: 620 .62rem/1 var(--cl-ui);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
}

.cl-category-control > span:last-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cl-category-accent);
  color: white;
  font-size: .92rem;
  letter-spacing: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.cl-category-control:hover > span:last-child,
.cl-category-control[aria-pressed="true"] > span:last-child { transform: rotate(45deg); }

.cl-category-progress {
  position: absolute;
  z-index: 5;
  left: clamp(1.5rem, 6vw, 6rem);
  right: clamp(11rem, 18vw, 15rem);
  bottom: 1.7rem;
  height: 1px;
  overflow: hidden;
  background: rgba(23,22,20,.14);
}

.cl-category-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cl-category-accent);
  transform: scaleX(var(--cl-progress));
  transform-origin: left center;
}

.cl-category-noscript {
  position: absolute;
  z-index: 7;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  font: 600 .7rem/1.4 var(--cl-ui);
}

.cl-collection-continuation {
  padding: 0 0 clamp(1.75rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .4fr);
  align-items: end;
  gap: 1.5rem;
  border-bottom: 1px solid var(--cl-ink);
}

.cl-collection-continuation .cl-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.cl-collection-continuation h2 { margin: 0; font: 430 clamp(3.2rem, 6.5vw, 6.5rem)/.86 var(--cl-editorial); letter-spacing: -.06em; }
.cl-collection-continuation > p { max-width: 28ch; margin: 0; color: var(--cl-quiet); }
.cl-collection-continuation + .cl-collection-grid { margin-top: 0; }

/* Through the Atrium: a shallow, user-steered architectural camera. */
.cl-category-hero--atrium .cl-category-art-base,
.cl-category-hero--atrium .cl-category-art-focus img { object-position: 58% center; }

/* Atrium and Garden move one continuous photographic plane. A second masked
   copy creates doubled architecture and foliage while the pointer is moving. */
.cl-category-hero--atrium .cl-category-art-focus,
.cl-category-hero--garden .cl-category-art-focus { display: none; }

/* Editorial Strata is already authored into the artwork. One continuous
   camera plane preserves every diagonal edge while pointer and scroll move
   the reader deeper into the composition. */
.cl-category-hero--strata .cl-category-art-base {
  object-position: 61% center;
  transform-origin: 64% 48%;
  filter: saturate(.98) contrast(1.02);
}
.cl-category-hero--strata .cl-category-art-focus { display: none; }

/* Signal Cut: the source artwork itself is revealed through a moving aperture. */
.cl-category-hero--signal .cl-category-art-base { opacity: .42; filter: saturate(.25) brightness(1.06); }
.cl-category-hero--signal .cl-category-art-focus {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: inset(0 var(--cl-signal-right) 0 var(--cl-signal-left));
  transition: clip-path .72s cubic-bezier(.18,.78,.18,1);
}
.cl-category-hero--signal .cl-category-art-focus img { filter: saturate(1.08) contrast(1.035); }

/* Walled Garden and Cupertino / World use opposite scroll trajectories. */
.cl-category-hero--garden .cl-category-art-base,
.cl-category-hero--garden .cl-category-art-focus img { object-position: 62% center; transform-origin: 65% 51%; }
.cl-category-hero--world .cl-category-art-base,
.cl-category-hero--world .cl-category-art-focus img { object-position: 61% center; transform-origin: 64% 51%; }

.cl-category-hero.is-activated .cl-category-veil { opacity: .9; transform: scaleX(.75); }
.cl-category-hero.is-activated .cl-category-hero-copy { transform: translateY(-4px); }
.cl-category-veil,
.cl-category-hero-copy { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.72,.18,1); }

body.admin-bar .cl-category-hero-stage {
  top: calc(6.75rem + 32px);
  height: calc(100svh - 7.75rem - 32px);
}

@media (max-width: 900px) {
  .cl-category-hero {
    width: calc(100% - 1.5rem);
    height: 112svh;
    min-height: 720px;
    margin-bottom: 4rem;
  }

  .cl-category-hero-stage { min-height: 620px; border-radius: 14px; }
  .cl-category-art-base,
  .cl-category-art-focus img { object-position: 62% center; }

  .cl-category-veil {
    top: auto;
    width: 100%;
    height: 69%;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.52);
    background: linear-gradient(0deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 51%, rgba(255,255,255,.52) 78%, transparent 100%);
    -webkit-backdrop-filter: blur(16px) saturate(132%);
    backdrop-filter: blur(16px) saturate(132%);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 59%, rgba(0,0,0,.76) 79%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 59%, rgba(0,0,0,.76) 79%, transparent 100%);
    transform-origin: center bottom;
  }

  .cl-category-veil::after { border-radius: 0 0 13px 13px; }
  .cl-category-hero-copy { left: 1.25rem; right: 1.25rem; bottom: 6rem; width: auto; }
  .cl-category-hero h1 { max-width: 9ch; font-size: clamp(4.25rem, 18.5vw, 7rem); line-height: .8; }
  .cl-category-standfirst { max-width: 31ch; font-size: 1.03rem; line-height: 1.43; }
  .cl-category-direction { margin-top: 1.4rem; }
  .cl-category-control { right: 1rem; bottom: 1rem; }
  .cl-category-progress { left: 1.25rem; right: 11.5rem; bottom: 1.45rem; }
  .cl-category-hero.is-activated .cl-category-veil { transform: scaleY(.812); }
  .cl-collection-continuation { grid-template-columns: 1fr; }
  .cl-collection-continuation .cl-eyebrow { grid-column: auto; }
}

@media (max-width: 782px) {
  body.admin-bar .cl-category-hero-stage {
    top: calc(5.5rem + 46px);
    height: calc(100svh - 6rem - 46px);
  }
}

@media (max-width: 520px) {
  .cl-category-hero { width: calc(100% - 1rem); min-height: 680px; margin-bottom: 3.25rem; }
  .cl-category-hero-stage { top: 5.5rem; height: calc(100svh - 6rem); min-height: 560px; border-radius: 12px; }
  .cl-category-section { margin-bottom: 1rem; font-size: .58rem; }
  .cl-category-section span + span::before { width: 14px; margin-right: .55rem; }
  .cl-category-hero h1 { font-size: clamp(3.8rem, 18vw, 5.45rem); }
  .cl-category-standfirst { max-width: 29ch; margin-top: 1.15rem; font-size: .97rem; }
  .cl-category-direction { margin-top: 1rem; font-size: .54rem; }
  .cl-category-control { min-height: 44px; padding: .62rem .66rem .62rem .95rem; font-size: .55rem; }
  .cl-category-control > span:last-child { width: 26px; height: 26px; }
  .cl-category-progress { right: 10.8rem; }
  .cl-category-art-focus { -webkit-mask-size: auto; mask-size: auto; }
  .cl-collection-continuation h2 { font-size: clamp(3rem, 16vw, 4.65rem); }

}

@media (prefers-reduced-motion: reduce) {
  .cl-category-hero { height: auto; min-height: 0; }
  .cl-category-hero-stage { position: relative; top: auto; height: min(860px, calc(100svh - 1rem)); }
  .cl-category-art-base,
  .cl-category-art-focus img,
  .cl-category-veil,
  .cl-category-hero-copy { transform: none !important; transition: none !important; }
  .cl-category-art-focus { display: none; }
  .cl-category-control { display: none; }
  .cl-category-progress span { transform: scaleX(1); }
}

@media (prefers-contrast: more) {
  .cl-category-veil { background: rgba(255,255,255,.96); -webkit-mask-image: none; mask-image: none; }
  .cl-category-control { border-color: var(--cl-ink); background: white; }
}