:root { --editorial-serif: Georgia, "Times New Roman", serif; }

body { background: var(--paper); }

.personal-header {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(24px, 4vw, 68px);
}
.personal-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; letter-spacing: -.025em; text-decoration: none; }
.personal-brand img { border-radius: 9px; box-shadow: 0 3px 10px oklch(0 0 0 / .18); }
.back-link { font-size: .88rem; font-weight: 700; text-decoration: none; }
.back-link span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease); }
.back-link:hover span { transform: translate(2px, -2px); }

.personal-hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(42px, 6vw, 110px);
    align-items: center;
    padding: calc(82px + clamp(40px, 5vw, 76px)) clamp(24px, 4vw, 68px) clamp(48px, 5vw, 76px);
    overflow: hidden;
    background: var(--coral);
}
.hero-note { align-self: center; }
.personal-hero h1 {
    max-width: 10ch;
    font-size: clamp(3.5rem, 5.8vw, 6.6rem);
    font-weight: 720;
    line-height: .91;
    letter-spacing: -.05em;
    opacity: 0;
    animation: note-in 800ms 160ms var(--ease) forwards;
}
.hero-summary { max-width: 38ch; margin-top: 28px; color: oklch(0.29 0.055 25); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.58; opacity: 0; animation: note-in 700ms 280ms var(--ease) forwards; }
.email-link { display: inline-flex; gap: 6px; margin-top: 27px; font-weight: 760; text-decoration: none; opacity: 0; animation: note-in 700ms 380ms var(--ease) forwards; }
.email-link span { transition: transform 220ms var(--ease); }
.email-link:hover span { transform: translate(2px, -2px); }
.hero-picture { overflow: hidden; border-radius: 10px; box-shadow: 0 18px 44px oklch(0.34 0.1 25 / .26); opacity: 0; animation: picture-in 1s 180ms var(--ease) forwards; }
.hero-picture img { display: block; width: 100%; transition: transform 900ms var(--ease); }
.hero-picture:hover img { transform: scale(1.012); }
@keyframes note-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes picture-in { from { opacity: 0; transform: translateX(24px) scale(.99); } to { opacity: 1; transform: none; } }

.origin, .small-story, .details, .media, .personal-contact {
    padding: clamp(96px, 11vw, 170px) clamp(24px, 6vw, 128px);
}
.origin { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(58px, 10vw, 165px); }
.origin h2, .small-story h2, .details h2, .media h2, .personal-contact h2 {
    font-size: clamp(2.7rem, 4.8vw, 5rem);
    font-weight: 690;
    line-height: .98;
    letter-spacing: -.045em;
}
.origin h2 { max-width: 10ch; }
.origin-copy { max-width: 65ch; }
.origin-copy p { color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.78; }
.origin-copy p + p { margin-top: 27px; }
.origin-copy a { color: var(--ink); font-weight: 720; }

.small-story { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(54px, 9vw, 150px); align-items: center; overflow: hidden; color: var(--white); background: var(--night); }
.users-number { color: var(--coral); font-family: var(--editorial-serif); font-size: clamp(10rem, 23vw, 24rem); font-style: italic; line-height: .7; letter-spacing: -.09em; user-select: none; }
.users-copy { position: relative; z-index: 1; }
.users-copy h2 { max-width: 10ch; }
.users-copy > p { max-width: 46ch; margin-top: 24px; color: oklch(1 0 0 / .62); font-size: 1.03rem; line-height: 1.68; }
.story-links { margin-top: 42px; border-top: 1px solid oklch(1 0 0 / .16); }
.story-links a { display: grid; grid-template-columns: 108px 1fr auto; gap: 22px; padding: 21px 0; border-bottom: 1px solid oklch(1 0 0 / .16); color: var(--white); line-height: 1.4; text-decoration: none; }
.story-links a > span { color: oklch(1 0 0 / .46); font-size: .78rem; font-weight: 720; }
.story-links b { font-weight: 500; transition: transform 220ms var(--ease); }
.story-links a:hover b { transform: translate(2px, -2px); }

.details { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px, 10vw, 160px); background: var(--paper-dim); }
.details-heading h2 { max-width: 8ch; }
.details-heading > p { max-width: 34ch; margin-top: 24px; color: var(--ink-soft); line-height: 1.65; }
.detail-lines { border-top: 1px solid var(--line); }
.detail-lines p { display: grid; grid-template-columns: minmax(120px, .38fr) 1fr; gap: 28px; padding: 24px 0 27px; border-bottom: 1px solid var(--line); }
.detail-lines strong { font-size: .82rem; }
.detail-lines span { color: var(--ink-soft); line-height: 1.55; }

.media-intro { display: grid; grid-template-columns: 1fr .7fr; gap: clamp(48px, 9vw, 150px); align-items: end; }
.media-intro p { max-width: 44ch; color: var(--ink-soft); line-height: 1.66; }
.video-piece { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(42px, 7vw, 110px); align-items: center; margin-top: clamp(62px, 8vw, 112px); }
.video-piece video { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 864; object-fit: contain; border-radius: 8px; background: var(--night); box-shadow: 0 24px 70px oklch(0 0 0 / .2); }
.video-piece h3 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.video-piece p { max-width: 32ch; margin-top: 18px; color: var(--ink-soft); line-height: 1.62; }
.video-piece a { display: inline-flex; gap: 9px; margin-top: 24px; font-weight: 750; text-decoration: none; }
.video-piece a span { transition: transform 220ms var(--ease); }
.video-piece a:hover span { transform: translateY(3px); }
.download-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(72px, 8vw, 120px); border-top: 1px solid var(--line); }
.download-row > a { min-width: 0; padding-top: 28px; text-decoration: none; }
.download-row > a > img, .icon-stage { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 7px; background: var(--paper-dim); transition: transform 300ms var(--ease); }
.icon-stage { display: grid; place-items: center; }
.icon-stage img { width: 37%; border-radius: 22%; box-shadow: 0 12px 30px oklch(0 0 0 / .17); }
.download-row > a:hover > img, .download-row > a:hover .icon-stage { transform: translateY(-4px); }
.download-row > a > span:last-child { display: grid; gap: 5px; margin-top: 17px; }
.download-row small { color: var(--ink-soft); }

.personal-contact { text-align: center; background: var(--coral-bright); }
.personal-contact > p { font-family: var(--editorial-serif); font-style: italic; }
.personal-contact h2 { margin: 18px auto 0; }
.personal-contact > a { display: inline-flex; gap: 7px; margin-top: 30px; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 780; text-decoration: none; }
.personal-contact > a span { transition: transform 220ms var(--ease); }
.personal-contact > a:hover span { transform: translate(2px, -2px); }

@media (max-width: 980px) {
    .personal-hero, .origin, .small-story, .details, .video-piece { grid-template-columns: 1fr; }
    .personal-hero { padding-top: 132px; }
    .hero-picture { width: 84%; margin-left: auto; }
    .origin, .small-story, .details, .video-piece { gap: 48px; }
    .users-number { font-size: clamp(9rem, 45vw, 18rem); }
}

@media (max-width: 720px) {
    .personal-header { height: 68px; padding-inline: 18px; }
    .personal-brand img { width: 32px; height: 32px; }
    .back-link { font-size: .8rem; }
    .personal-hero { min-height: auto; padding: 116px 18px 54px; }
    .personal-hero h1 { font-size: clamp(3.25rem, 15vw, 4.25rem); }
    .hero-picture { width: 100%; margin-top: 18px; }
    .origin, .small-story, .details, .media, .personal-contact { padding: 88px 18px; }
    .origin h2, .small-story h2, .details h2, .media h2, .personal-contact h2 { font-size: clamp(2.65rem, 12.5vw, 3.8rem); }
    .users-number { font-size: clamp(9rem, 55vw, 14rem); }
    .story-links a { grid-template-columns: 1fr auto; gap: 8px 18px; }
    .story-links a > span { grid-column: 1 / -1; }
    .detail-lines p { grid-template-columns: 1fr; gap: 8px; }
    .media-intro { grid-template-columns: 1fr; gap: 24px; }
    .download-row { grid-template-columns: 1fr; }
    .download-row > a > img, .icon-stage { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .personal-hero h1, .hero-summary, .email-link, .hero-picture { opacity: 1; transform: none; }
}