body.ec .fr-embed.bp { --max: var(--ec-max); --gutter: clamp(18px, 5vw, 64px); --bp-gap: clamp(48px, 6vw, 88px); } .bp > section, .bp > figure { margin-top: var(--bp-gap); } .bp-stage { position: relative; display: flex; align-items: flex-end; min-height: min(86svh, 820px); overflow: hidden; background: #16151b; color: #f6f4f0; } .bp-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); } .bp-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,.38) 0%, rgba(11,11,13,0) 26%, rgba(11,11,13,0) 46%, rgba(11,11,13,.78) 100%); } .bp-stage-cap { position: relative; z-index: 1; padding-bottom: clamp(36px, 5vw, 72px); } .bp-stage .bp-kicker, .bp-stage .bp-line { color: rgba(246, 244, 240, 0.88); } .bp-stage-cap > * { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } .bp-head { padding-top: clamp(40px, 6vw, 96px); } .bp-kicker { font-size: var(--t-caption); color: var(--soft); } .bp-name { margin-top: 10px; font-weight: 250; font-size: clamp(44px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.045em; } .bp-line { margin-top: 18px; max-width: 26em; font-weight: 300; font-size: var(--t-stand); line-height: 1.35; letter-spacing: -0.015em; color: var(--soft); text-wrap: balance; } .bp-mark { display: inline-flex; align-items: center; justify-content: center; height: 76px; min-width: 76px; max-width: min(260px, 100%); margin-bottom: 26px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--frame); } .bp-mark img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; } .bp-picture img { display: block; width: 100%; height: auto; max-height: 78svh; object-fit: contain; border-radius: 16px; background: var(--ground-2); box-shadow: var(--frame); } .bp-words .bp-mark { margin-bottom: 22px; } .bp-listed { display: inline-block; margin-bottom: 18px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13px; color: var(--soft); } .bp-body { max-width: 38em; } .bp-body p { font-size: var(--t-read); line-height: 1.65; color: var(--soft); } .bp-body p + p { margin-top: 1.1em; } .bp-body .bp-source { margin-top: 14px; font-size: var(--t-caption); } .bp-source a { color: var(--ink); background: linear-gradient(var(--faint), var(--faint)) 0 100% / 100% 1px no-repeat; } .bp-figures ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 40px; } .bp-figures li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--hair); } .bp-figure { font-weight: 800; font-stretch: 62%; font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--accent); } .bp-figure-label { font-size: var(--t-caption); line-height: 1.45; color: var(--soft); } .bp-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #16151b; } .bp-player-facade, .bp-player iframe { display: block; width: 100%; height: 100%; border: 0; } .bp-player-facade img { width: 100%; height: 100%; object-fit: cover; } .bp-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; translate: -50% -50%; background: rgba(11,11,13,.62); color: #fff; transition: scale .3s var(--ease), background-color .3s; } .bp-player-facade:is(:hover, :active) .bp-play { scale: 1.06; background: var(--accent); } .bp-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; } .bp-shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--ground-2); } .bp-shot img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: scale 1.2s var(--ease); } .bp-shot:is(:hover, :active) img { scale: 1.04; } .bp-label { margin-bottom: 26px; font-weight: 300; font-size: var(--t-stand); letter-spacing: -0.015em; } .bp-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; } .bp-places li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--hair); } .bp-place-city { font-size: var(--t-caption); color: var(--soft); } .bp-place-name { font-size: 17px; line-height: 1.35; color: var(--ink); } a.bp-place-name:is(:hover, :active) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .bp-grid { margin-top: 22px; font-size: var(--t-caption); color: var(--soft); } .bp-grid a { color: var(--ink); background: linear-gradient(var(--faint), var(--faint)) 0 100% / 100% 1px no-repeat; } .bp-faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 16px; } .bp-faces .fr-person-img.is-blank { display: grid; place-items: center; } .bp-faces .fr-person-img.is-blank::after { display: none; } .bp-initial { font-size: 56px; font-weight: 250; color: var(--faint); } .bp-offer-body { max-width: 38em; } .bp-offer-body p { font-size: var(--t-read); line-height: 1.6; } .bp-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; } .bp-ways .fr-join, .bp-ways .fr-more { margin-top: 0; } .bp-socials { display: flex; gap: 10px; } .bp-social { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: var(--frame); color: var(--ink); transition: box-shadow .2s; } .bp-social svg { width: 18px; height: 18px; } .bp-social:is(:hover, :active) { box-shadow: inset 0 0 0 1px var(--ink); } .bp-back { margin-top: var(--bp-gap); font-size: var(--t-caption); } .bp-back a { color: var(--soft); } .bp-back a:is(:hover, :active) { color: var(--ink); } @media (max-width: 1080px) { .bp-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 700px) { .bp-stage { min-height: 72svh; } .bp-mark { height: 60px; min-width: 60px; margin-bottom: 20px; padding: 10px 14px; border-radius: 14px; } .bp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bp-figures ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .bp-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp-picture img, .bp-player { border-radius: 12px; } }