:root {
  --background: #20201d;
  --panel: #282824;
  --text: #f2ede4;
  --muted: #b8b7aa;
  --line: #4a4a42;
  --accent: #c3ba9e;
  --serif: "Bodoni 72", "Didot", "Baskerville", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
svg { display: block; }
::selection { background: #b9ad8b; color: #20201d; }

.site-wrap { width: min(1220px, calc(100% - 88px)); margin: 0 auto; }
.masthead { display: flex; align-items: center; gap: 18px; min-height: 96px; }
.monogram { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; letter-spacing: -4px; padding-right: 6px; }
.masthead-label { font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: 2.2px; color: var(--muted); }
.age-label { margin-left: auto; border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; font-size: 10px; letter-spacing: 1px; color: #cecec2; }

.profile { display: grid; grid-template-columns: 1.15fr 1fr; min-height: min(750px, 78vw); background: var(--panel); border: 1px solid #36362f; }
.portrait { min-width: 0; position: relative; overflow: hidden; background: #3d4037; }
.portrait > picture { position: absolute; inset: 0; display: block; }
.portrait img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.portrait-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(10 15 10 / 51%) 100%); }
.portrait-caption { position: absolute; left: 36px; bottom: 41px; font: italic 49px/1 var(--serif); letter-spacing: -1.4px; text-shadow: 0 1px 12px rgb(0 0 0 / 28%); }
.portrait-mark { position: absolute; right: 27px; top: 31px; font-size: 10px; letter-spacing: 2.2px; color: #fff7ea; }

.profile-content { padding: 54px 46px 29px; display: flex; flex-direction: column; min-width: 0; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-size: 9px; line-height: 1.5; letter-spacing: 2.3px; text-transform: uppercase; }
h1 { margin: 0; font: 400 clamp(38px, 4.8vw, 62px)/1.04 var(--serif); letter-spacing: -1.8px; }
.profile-name { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.name-text { display: inline; }
.verified-badge { width: 25px; height: 25px; flex: 0 0 25px; margin-top: 5px; }

.links { --link-gap: 15px; display: grid; gap: var(--link-gap); margin-top: 32px; }
.photo-link { display: block; position: relative; overflow: hidden; aspect-ratio: 1.67; min-height: 186px; isolation: isolate; border: 1px solid rgb(242 237 228 / 14%); border-radius: 4px; }
.photo-link > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 51% 41%; transition: transform 450ms ease; }
.photo-link-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 17 13 / 3%) 0%, rgb(20 17 13 / 12%) 24%, rgb(15 13 10 / 82%) 100%); }
.link-label { position: absolute; left: 23px; bottom: 24px; right: 64px; display: flex; flex-direction: column; gap: 9px; }
.link-platform { font-size: 10px; font-weight: 500; letter-spacing: 1.3px; color: #e4e0d8; }
.link-title { font: 400 34px/1.1 var(--serif); letter-spacing: -.65px; }
.link-arrow { position: absolute; bottom: 26px; right: 22px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgb(242 237 228 / 45%); border-radius: 50%; transition: background 200ms ease, transform 200ms ease; }
.link-arrow svg { width: 16px; height: 16px; }

.telegram-link { position: relative; overflow: hidden; isolation: isolate; min-height: 124px; display: flex; align-items: center; gap: 15px; border: 1px solid rgb(242 237 228 / 21%); padding: 22px 19px; border-radius: 4px; background: #292c28; transition: border-color 200ms ease; }
.telegram-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 56%; transition: transform 450ms ease; }
.telegram-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(11 15 14 / 82%) 0%, rgb(11 15 14 / 69%) 70%, rgb(11 15 14 / 38%) 100%); }
.telegram-icon, .telegram-copy, .telegram-arrow { position: relative; z-index: 2; }
.telegram-icon { width: 38px; height: 38px; display: grid; place-items: center; background: #26a5e4; border-radius: 50%; color: #fff; flex-shrink: 0; box-shadow: 0 3px 14px rgb(0 0 0 / 20%); }
.telegram-icon svg { width: 19px; height: 19px; }
.telegram-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.telegram-title { color: #fffaf2; font-size: 13px; font-weight: 600; line-height: 1.3; }
.telegram-caption { color: #e0dfd6; font-size: 11px; line-height: 1.4; }
.telegram-arrow { margin-left: auto; width: 19px; height: 19px; flex-shrink: 0; color: #fffaf2; }

.social-links { display: flex; justify-content: center; align-items: center; height: 30px; gap: 6px; margin: 0; }
.social-link { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: #fff; transition: transform 200ms ease; }
.social-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--social-background, transparent); transition: opacity 200ms ease; }
.social-icon svg { width: 16px; height: 16px; }
.social-icon .instagram-badge { width: 30px; height: 30px; }
.social-link-youtube { --social-background: #fff; }
.social-link-tiktok { --social-background: #080808; }
.social-link-throne { --social-background: #8060ed; }
.social-link:active { transform: scale(.95); }

.profile-footer { margin-top: auto; padding-top: 31px; display: flex; align-items: center; justify-content: flex-end; }
.footer-signature { font: italic 23px/1.3 var(--serif); color: #ddd8c9; white-space: nowrap; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 25px 0 33px; font-size: 10px; line-height: 1.6; color: #b2b2a6; letter-spacing: .3px; }
.site-footer > span:last-child { text-align: right; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 14px 20px; border-radius: 3px; background: var(--text); color: var(--background); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible { outline: 3px solid #efe4c3; outline-offset: 5px; }

.age-dialog-open { overflow: hidden; }
.age-dialog { width: min(430px, calc(100% - 36px)); max-height: calc(100% - 48px); margin: auto; padding: 37px 30px 27px; border: 1px solid #666558; border-radius: 6px; background: var(--panel); color: var(--text); box-shadow: 0 24px 100px rgb(0 0 0 / 40%); }
.age-dialog::backdrop { background: rgb(10 12 10 / 80%); backdrop-filter: blur(5px); }
.age-dialog-mark { display: block; margin-bottom: 25px; font: italic 34px/1 var(--serif); letter-spacing: -3px; color: var(--accent); }
.age-dialog h2, .age-page h1 { margin: 0 0 18px; font: 400 49px/1.05 var(--serif); letter-spacing: -1.8px; }
.age-dialog p, .age-page p { margin: 0; color: #cfcec1; font-size: 14px; line-height: 1.7; }
.age-actions { display: grid; gap: 11px; margin-top: 28px; }
.age-continue, .age-back { min-height: 50px; padding: 15px 18px; border: 1px solid #666558; border-radius: 3px; font: 500 13px/1.4 var(--sans); text-align: center; cursor: pointer; }
.age-continue { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--text); color: var(--background); border-color: var(--text); }
.age-continue > span { font-size: 19px; line-height: 1; }
.age-back { display: block; background: transparent; color: var(--text); }
.age-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 18px; }
.age-page-card { width: min(430px, 100%); padding: 37px 30px 27px; border: 1px solid #666558; border-radius: 6px; background: var(--panel); }

@media (hover: hover) {
  .photo-link:hover > img { transform: scale(1.035); }
  .photo-link:hover .link-arrow { background: rgb(242 237 228 / 12%); transform: translate(1px, -1px); }
  .telegram-link:hover { border-color: #b7b5a3; }
  .telegram-link:hover .telegram-photo { transform: scale(1.035); }
  .social-link:hover .social-icon { opacity: .85; }
  .age-continue:hover { background: #e4dccd; border-color: #e4dccd; }
  .age-back:hover { background: #36372f; border-color: #959582; }
}

@media (min-width: 1500px) {
  .masthead { min-height: 120px; }
  .profile { min-height: 780px; }
  .profile-content { padding-top: 69px; }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .site-wrap { width: calc(100% - 52px); }
  .profile-content { padding: 40px 26px 25px; }
  .profile { grid-template-columns: 1.05fr 1fr; }
  .portrait-caption { left: 25px; bottom: 35px; font-size: 39px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .telegram-link { padding: 18px 14px; gap: 11px; }
  .telegram-title { font-size: 12px; }
}

@media (max-width: 760px) {
  .site-wrap { width: min(550px, calc(100% - 36px)); }
  .masthead { min-height: 69px; gap: 14px; }
  .monogram { font-size: 32px; letter-spacing: -3px; }
  .masthead-label { font-size: 8px; letter-spacing: 1.8px; }
  .age-label { font-size: 9px; padding: 6px 9px; }
  .profile { display: block; border: 0; background: transparent; min-height: 0; }
  .portrait { aspect-ratio: 1260 / 927; border-radius: 3px; }
  .portrait img { object-position: left center; }
  .portrait-caption { left: 24px; bottom: 25px; font-size: clamp(33px, 8.6vw, 46px); letter-spacing: -.7px; }
  .portrait-mark { right: 22px; top: 23px; font-size: 8px; }
  .profile-content { padding: 29px 7px 0; }
  .eyebrow { display: none; }
  h1 { font-size: clamp(32px, 10.8vw, 59px); line-height: 1.1; letter-spacing: -1.7px; }
  .profile-name { gap: 9px; }
  .verified-badge { width: 23px; height: 23px; flex-basis: 23px; margin-top: 3px; }
  .links { --link-gap: 13px; margin-top: 26px; }
  .photo-link { aspect-ratio: 1.95; min-height: 153px; }
  .link-label { left: 20px; bottom: 20px; gap: 7px; }
  .link-title { font-size: 32px; }
  .link-platform { font-size: 9px; }
  .link-arrow { bottom: 22px; right: 20px; }
  .telegram-link { min-height: 116px; }
  .profile-footer { padding-top: 27px; }
  .site-footer { margin-top: 26px; border-top: 1px solid #3a3b33; padding: 21px 7px 31px; font-size: 9px; letter-spacing: .1px; }
}

@media (max-width: 350px) {
  .site-wrap { width: calc(100% - 26px); }
  .masthead-label { letter-spacing: 1.2px; }
  .profile-content { padding-inline: 3px; }
  h1 { font-size: clamp(31px, 10.5vw, 36px); }
  .profile-name { gap: 8px; }
  .verified-badge { width: 21px; height: 21px; flex-basis: 21px; }
  .telegram-link { padding: 17px 13px; gap: 10px; }
  .telegram-title { font-size: 12px; }
  .telegram-caption { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}