/* Statement: a short transition after the hero. "Soft glam." in a light italic, "Strong presence."
   in heavy display type; the full-length office picture (platform heels) as one frame cut from a
   35 mm roll, and a polaroid of a makeup artist at work (the beauty ritual). The words write in and
   rise while the photos come up; a sparkle glints on the patent heels as the frame lands (never a
   flash of light). Photos turn only flat. */
#statement {
  --ih: min(70svh, 690px);                               /* picture height (never cropped) */
  --iw: calc(var(--ih) * 1522 / 1600);
  --fr: clamp(24px, 2.1vw, 32px);                        /* film rebate, sprocket side */
  --ft: 12px;
  --pw: clamp(170px, 14.5vw, 236px);                     /* polaroid width */
  --film: #0c0709;
  position: relative; overflow: clip;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(78px + 3svh) var(--pad) 6svh;
  --hh: max(100vh, 680px);                               /* the hero's height: its backdrop runs on into this one */
  background:
    linear-gradient(180deg, transparent 80%, #0b0608 99%),
    radial-gradient(70% 60% at 72% 50%, rgba(96, 18, 56, 0.46), rgba(40, 8, 24, 0.18) 55%, transparent 80%),
    radial-gradient(120% calc(var(--hh) * 0.9) at 50% calc(var(--hh) * -0.55), #3a0b22 0%, #1a0710 45%, #0b0608 75%);
}
@supports (height: 100svh) { #statement { --hh: max(100svh, 680px); } }

/* ---- background: a soft spotlight onto the frame, a pink glow, light on the floor */
#statement .st-bg { position: absolute; inset: 0; pointer-events: none; }
#statement .st-bg > span { position: absolute; display: block; }
#statement .st-glow { right: 4%; top: 12%; width: 64vmin; height: 64vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.3), rgba(255, 46, 136, 0.07) 46%, transparent 70%); filter: blur(6px); }
#statement .st-cone { right: calc(var(--pad) + 2vw); top: -8%; width: calc(var(--iw) * 2.1); height: 118%; transform: translateX(22%); mix-blend-mode: screen; filter: blur(14px); opacity: 0.85;
  -webkit-mask: linear-gradient(#000 45%, transparent 90%); mask: linear-gradient(#000 45%, transparent 90%);
  background: conic-gradient(from 180deg at 50% 0, transparent 0 164deg, rgba(255, 214, 228, 0.07) 170deg, rgba(255, 244, 248, 0.11) 180deg, rgba(255, 214, 228, 0.07) 190deg, transparent 196deg); }
#statement .st-floor { right: calc(var(--pad) - 4vw); bottom: 2svh; width: calc(var(--iw) * 2); height: 16svh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 230, 0.12), rgba(255, 46, 136, 0.05) 55%, transparent); filter: blur(4px); }

/* ---- layout */
#statement .st-wrap { position: relative; z-index: 2; width: 100%; max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(36px, 5.5vw, 110px); align-items: center; }

/* ---- the words */
#statement .st-copy { position: relative; z-index: 4; padding-bottom: 2svh; container-type: inline-size; }
#statement .st-title { margin: 0; display: flex; flex-direction: column; font-weight: 400; }
#statement .st-soft { display: block; width: fit-content; margin: 0 0 0.06em 0.08em; padding-right: 0.12em; font: italic 300 clamp(44px, 5vw, 88px) / 1.05 var(--serif); letter-spacing: -0.005em;
  background: linear-gradient(100deg, #ffe3ec 0%, #f7a8c4 55%, #ff6aa8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--st-w, 1) * 125% - 25%), transparent calc(var(--st-w, 1) * 125%)); mask: linear-gradient(90deg, #000 calc(var(--st-w, 1) * 125% - 25%), transparent calc(var(--st-w, 1) * 125%)); }
#statement .st-strong { display: block; font: 500 min(clamp(74px, 9.4vw, 162px), 21cqi) / 0.84 var(--display);   /* "presence." always fits its column */ letter-spacing: -0.022em; color: var(--ink); }
#statement .st-l { display: block; width: fit-content; clip-path: inset(-0.5em -0.3em -0.42em -0.3em); }
#statement .st-l > span { display: inline-block; will-change: transform; }
#statement .st-l2 { margin-left: 0.62em; }
#statement .st-rule { display: flex; align-items: center; gap: 14px; width: min(220px, 42%); margin: clamp(22px, 3.4svh, 36px) 0 clamp(16px, 2.4svh, 24px) 0.4em; color: var(--hot); font: 400 13px/1 var(--sans); }
#statement .st-rule::before, #statement .st-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 46, 136, 0.7)); transform-origin: 100% 50%; transform: scaleX(var(--st-r, 1)); }
#statement .st-rule::after { background: linear-gradient(90deg, rgba(255, 46, 136, 0.7), transparent); transform-origin: 0 50%; }
#statement .st-rule i { font-style: normal; opacity: var(--st-r, 1); }
#statement .st-line { margin: 0 0 0 0.4em; max-width: 25ch; font: 400 clamp(18px, 1.45vw, 23px) / 1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
#statement .st-line em { font: italic 400 1.2em/1.2 var(--serif); color: var(--ink); }
#statement .st-wd { display: inline; }

/* ---- the frame: one picture cut from a roll of 35 mm film (sprockets on the long sides) */
#statement .st-media { position: relative; justify-self: end; margin-right: clamp(0px, 2.6vw, 56px); }
#statement .st-frame { position: relative; z-index: 2; margin: 0; padding: var(--ft) var(--fr); border-radius: 5px; will-change: transform;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26' preserveAspectRatio='none'%3E%3Cpath fill='%230c0709' fill-rule='evenodd' d='M0 0H30V26H0Z M6.4 7.6h8.2a2.4 2.4 0 0 1 2.4 2.4v6a2.4 2.4 0 0 1-2.4 2.4H6.4A2.4 2.4 0 0 1 4 16v-6a2.4 2.4 0 0 1 2.4-2.4Z'/%3E%3Crect x='4' y='7.6' width='13' height='10.8' rx='2.4' fill='%23ffe4ee' fill-opacity='.13'/%3E%3C/svg%3E") 0 0 / var(--fr) calc(var(--fr) * 0.866) no-repeat round,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26' preserveAspectRatio='none'%3E%3Cpath fill='%230c0709' fill-rule='evenodd' d='M0 0H30V26H0Z M15.4 7.6h8.2a2.4 2.4 0 0 1 2.4 2.4v6a2.4 2.4 0 0 1-2.4 2.4H15.4A2.4 2.4 0 0 1 13 16v-6a2.4 2.4 0 0 1 2.4-2.4Z'/%3E%3Crect x='13' y='7.6' width='13' height='10.8' rx='2.4' fill='%23ffe4ee' fill-opacity='.13'/%3E%3C/svg%3E") 100% 0 / var(--fr) calc(var(--fr) * 0.866) no-repeat round,
    linear-gradient(var(--film), var(--film)) 50% 0 / calc(100% - 2 * var(--fr)) 100% no-repeat;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(255, 46, 136, 0.22)); }
#statement .st-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.07), transparent 18%, transparent 76%, rgba(255, 200, 224, 0.06)); }
#statement .st-shot { position: relative; width: var(--iw); height: var(--ih); overflow: hidden; border-radius: 3px; background: #1a0d13; }
#statement .st-shot img { width: 100%; height: 100%; object-fit: cover; }
#statement .st-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#statement .st-edge { position: absolute; left: calc(var(--fr) * 0.62); top: var(--ft); bottom: var(--ft); display: flex; justify-content: space-around; align-items: center; gap: 30px; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 7px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 170, 92, 0.62); white-space: nowrap; pointer-events: none; }
#statement .st-edge b { font-weight: 700; }
#statement .st-edge i { font-style: normal; letter-spacing: 0; }

/* ---- the polaroid: a makeup artist at work, taped over the frame's lower corner */
#statement .st-pola { position: absolute; z-index: 3; width: var(--pw); left: calc(var(--pw) * -0.62); bottom: -4%; padding: 9px 9px 38px; rotate: -5deg; will-change: transform; }
#statement .st-pola .tape { left: 50%; top: -12px; width: 74px; height: 22px; margin-left: -37px; rotate: 3deg; }
#statement .st-print { overflow: hidden; border-radius: 2px; background: #2a1820; }
#statement .st-print img { width: 100%; aspect-ratio: 1 / 1.04; height: auto; object-fit: cover; object-position: 50% 30%; border-radius: 0; }

/* ---- phones and portrait screens: words first, then the frame with the polaroid on its corner */
@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  #statement { --ih: min(50svh, 470px, calc((78vw - 2 * var(--fr)) * 1600 / 1522)); --fr: 18px; --ft: 8px; --pw: min(37vw, 210px);
    display: block; min-height: 0; padding: calc(68px + 4svh) var(--pad) calc(3svh + 8px);
    background:
      linear-gradient(180deg, transparent 84%, #0b0608 99%),
      radial-gradient(90% 50% at 70% 66%, rgba(96, 18, 56, 0.5), rgba(40, 8, 24, 0.18) 55%, transparent 80%),
      radial-gradient(120% calc(var(--hh) * 0.9) at 50% calc(var(--hh) * -0.55), #3a0b22 0%, #1a0710 45%, #0b0608 75%); }
  #statement .st-wrap { grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 4svh, 40px); }
  #statement .st-copy { padding: 0; }
  #statement .st-soft { font-size: clamp(38px, 11vw, 64px); }
  #statement .st-strong { font-size: min(clamp(60px, 19vw, 128px), 21.6cqi); }
  #statement .st-l2 { margin-left: 0.34em; }
  #statement .st-rule { margin: 20px 0 14px 0.2em; }
  #statement .st-line { margin-left: 0.2em; max-width: 30ch; font-size: clamp(16px, 4.3vw, 20px); }
  #statement .st-media { justify-self: end; margin-right: -2px; }
  #statement .st-pola { left: calc(var(--pw) * -0.36); bottom: 8%; padding: 6px 6px 26px; rotate: -5deg; }
  #statement .st-pola .tape { width: 54px; height: 17px; margin-left: -27px; top: -8px; }
  #statement .st-edge { display: none; }
  #statement .st-glow { right: -10%; top: 46%; width: 90vw; height: 90vw; }
  #statement .st-cone { right: 2vw; width: 120vw; transform: none; top: 30%; height: 80%; }
  #statement .st-floor { right: -10vw; width: 110vw; bottom: 1svh; height: 12svh; }
}
/* tablets in portrait: room for a larger frame */
@media (min-width: 600px) and (max-aspect-ratio: 85/100) {
  #statement { --ih: min(52svh, 760px); --fr: 26px; --ft: 11px; --pw: min(30vw, 250px); }
  #statement .st-edge { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #statement .st-l > span, #statement .st-frame, #statement .st-pola { will-change: auto; }
}