/* Match the white section when scrolling past the page edge. */
html { background-color: #fff; }

/* The hero stays in place through selection, then scrolls off over white. */
.lens-experience { position: relative; }
.has-lens-explorer #page { overflow-x: clip; }
.has-lens-explorer .lens-experience { height: 235svh; background: #fff; }
.has-lens-explorer .lens-experience > .hero { position: sticky; top: 0; }
.lens-experience > .hero[inert] { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  body.is-ready:not(.is-opening, .fe-editing) #page:not([inert])
    .hero:has(.lens-explorer[data-state="idle"]) {
    cursor: url("../brand/hero-scroll-cursor.svg") 27 27, auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lens-experience[data-departing] > .hero {
    border-radius: min(24px, calc(var(--lens-departure) * 120px));
    transform: rotate(calc(var(--lens-departure) * var(--lens-exit-angle, -7deg)))
      scale(calc(1 - var(--lens-departure) * var(--lens-exit-scale, .16)));
  }
}
html.has-lens-explorer:not(.lens-after-active) .site-header :is(.home-link, .site-nav a) {
  filter: drop-shadow(0 1px 3px rgb(28 10 5 / 60%));
}
html.lens-after-active .global-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgb(255 255 255 / 76%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.lens-after-active.footer-at-header .global-navigation::before {
  background: rgb(197 55 53 / 90%);
}
html.lens-after-active .global-navigation .site-header {
  color: var(--menu-red);
}
/* A same-canvas eye patch leaves the original 4K face, hair and hands visible.
   Fit and position inherit from the same media parent in every breakpoint. */
.hero__unavailable { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: var(--hero-fit, cover); object-position: var(--hero-position, 50% 45%); opacity: 0; pointer-events: none; transition: opacity .42s cubic-bezier(.22,1,.36,1); }
.hero__media[data-unavailable="true"] .hero__unavailable { opacity: 1; }
/* Reverse of the saved letter-lights reference: the type stays in place.
   Only glyph visibility changes; the editor still owns size and position. */
.hero-exit-word { display: inline-block; white-space: nowrap; }
.hero-exit-char { opacity: var(--hero-exit-alpha, 1); }
.hero-actions .scroll-explore { padding: 10px 0; min-height: 44px; border: 0; border-radius: 0; background: none; color: inherit; gap: 20px; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; transition: color .3s ease; }
.hero-actions .scroll-explore:hover { background: none; color: inherit; }
.scroll-explore__arrow { position: relative; width: 13px; height: 24px; overflow: hidden; font-size: 19px; font-weight: 300; line-height: 24px; opacity: var(--explore-arrow-opacity, 1); }
.scroll-explore__arrow span { display: block; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.scroll-explore:hover .scroll-explore__arrow span { transform: translateY(4px); }
.scroll-explore__arrow::after { content: ""; display: block; position: absolute; left: 6px; top: 1px; width: 1px; height: 7px; background: currentColor; transform-origin: center top; opacity: .6; }
.lens-explorer { --wheel-min-row: clamp(43px, 6.1svh, 66px); --explorer-ink: #fff8f7; position: absolute; inset: 0; z-index: 4; color: var(--explorer-ink); visibility: hidden; pointer-events: none; }
.lens-explorer__shade {
  --shade-width: 40%;
  --shade-height: 68%;
  --shade-y: 60%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--explore-shade-opacity, 0);
  /* Large feathered light falloffs, rather than a rectangular panel.
     Both shadows reach zero before the centre of the portrait. */
  background:
    radial-gradient(ellipse var(--shade-width) var(--shade-height) at -3% var(--shade-y),
      rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 18%, rgba(0,0,0,.40) 40%,
      rgba(0,0,0,.20) 60%, rgba(0,0,0,.06) 80%, transparent 100%),
    radial-gradient(ellipse var(--shade-width) var(--shade-height) at 103% var(--shade-y),
      rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 18%, rgba(0,0,0,.40) 40%,
      rgba(0,0,0,.20) 60%, rgba(0,0,0,.06) 80%, transparent 100%);
}
.explorer-wheel { position: absolute; top: 56%; width: clamp(165px, 17vw, 285px); margin: 0; pointer-events: auto; transform: translateY(-50%); }
.explorer-wheel--colour { left: clamp(28px, 3.5vw, 72px); text-align: left; }
.explorer-wheel--period { right: clamp(28px, 3.5vw, 72px); text-align: right; }
.explorer-wheel__label { display: flex; margin: 0 0 22px; padding: 2px 0; font-family: inherit; font-size: clamp(14px, 1.1vw, 18px); font-weight: 500; line-height: 1.4; letter-spacing: .14em; }
.explorer-wheel--period .explorer-wheel__label { justify-content: flex-end; }
.explorer-wheel__label > .wheel-copy { display: block; flex: none; white-space: nowrap; }
@media (min-width: 681px) {
  .explorer-wheel--period .explorer-wheel__label { padding-inline-end: 12px; }
}
.explorer-wheel__viewport { --wheel-row: max(var(--wheel-min-row), 1.4em); position: relative; width: max(100%, 10ch); height: calc(var(--wheel-row) * 4.6); min-width: 0; font-family: var(--fomomy-font); font-weight: 420; font-stretch: 100%; font-size: clamp(28px, 2.65vw, 50px); overflow: hidden; overflow: clip; touch-action: pan-x; -webkit-mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); }
.explorer-wheel__option { --row-shift: 0; --row-scale: 1; position: absolute; top: calc(50% - var(--wheel-row) / 2); left: 0; width: 100%; height: var(--wheel-row); padding: 0; display: flex; align-items: center; justify-content: flex-start; border: 0; border-radius: 0; background: none; color: inherit; font-family: var(--fomomy-font); font-weight: 420; font-stretch: 100%; font-size: inherit; letter-spacing: -.045em; line-height: 1.14; white-space: nowrap; transform-origin: left center; transform: translate3d(0, calc(var(--row-shift) * var(--wheel-row)), 0) scale(var(--row-scale)); opacity: var(--row-opacity, 0); transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .32s cubic-bezier(.22,1,.36,1); will-change: transform, opacity; }
.explorer-wheel--period .explorer-wheel__viewport { left: calc(100% - max(100%, 10ch)); }
.explorer-wheel--period .explorer-wheel__option { justify-content: flex-end; transform-origin: right center; }
.explorer-wheel__option[aria-selected="true"] { font-weight: 480; }
.explorer-wheel__option:focus-visible { outline-offset: -2px; }
.explorer-wheel__option[aria-disabled="true"] { pointer-events: none; }
.wheel-copy-word { display: inline-block; white-space: nowrap; }
.wheel-letter { opacity: var(--wheel-letter-alpha, 0); }
.explorer-wheel__instruction { margin: 20px 0 0; overflow: hidden; font-size: 10px; letter-spacing: .14em; line-height: 1.4; opacity: .64; }
.explorer-wheel__instruction > .wheel-copy { display: block; }
@media (min-aspect-ratio: 1/1) {
  .explorer-wheel { top: 54%; }
}
@media (max-width: 680px) {
  .has-lens-explorer .lens-experience { height: 230svh; --lens-exit-angle: -3.2deg; --lens-exit-scale: .12; }
  .hero-actions .scroll-explore { padding: 10px 0; min-height: 44px; font-size: 11px; gap: 16px; }
  .lens-explorer { --wheel-min-row: 43px; }
  .lens-explorer__shade { --shade-width: 54%; --shade-height: 72%; --shade-y: 62%; }
  .explorer-wheel { top: 60%; width: min(37vw, 180px); }
  .explorer-wheel--colour { left: 23px; }
  .explorer-wheel--period { right: 23px; }
  .explorer-wheel__label { font-size: 12px; margin-bottom: 16px; letter-spacing: .12em; }
  .explorer-wheel__viewport { font-size: clamp(24px, 6vw, 35px); }
  .explorer-wheel__instruction { font-size: 9px; letter-spacing: .12em; }
}
@media (max-height: 650px) and (min-aspect-ratio: 1/1) {
  .lens-explorer { --wheel-min-row: 41px; }
  .explorer-wheel { top: 44%; }
  .explorer-wheel__label { margin-bottom: 14px; }
  .explorer-wheel__viewport { font-size: 30px; }
  .explorer-wheel__instruction { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__unavailable { transition: none; }
  .explorer-wheel__option { transition: none; }
}