/* NINNO — Landing v2 / Cinematic Minimal
   The content model remains limited to two portraits and two editorial paths.
   Geometry and typography are independent from image selection/CMS.
*/

:root {
    color-scheme: light;
    --paper: #e9e7e2;
    --ink: #171713;
    --muted: #55554f;
    --type: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --page-gutter: clamp(22px, 4.5vw, 86px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--type); }
a { color: inherit; }

.landing {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    min-height: 540px;
    overflow: hidden;
    background: var(--paper);
}

/* Quiet masthead, deliberately secondary to the oversized identity. */
.landing__masthead {
    position: absolute;
    z-index: 4;
    top: clamp(24px, 5vh, 56px);
    left: var(--page-gutter);
    right: var(--page-gutter);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: baseline;
    font-size: clamp(10px, .76vw, 12px);
    font-weight: 600;
    letter-spacing: .15em;
}
.landing__identity span { font-weight: 400; margin-left: .45em; }
.landing__folio { color: var(--muted); font-weight: 400; }

/* Large wordmark sits BEHIND the portrait. */
.landing__name {
    position: absolute;
    z-index: 1;
    top: 29%;
    left: 50%;
    width: max-content;
    max-width: none;
    margin: 0;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(128px, 25.5vw, 430px);
    line-height: .76;
    letter-spacing: -.093em;
    font-weight: 800;
    white-space: nowrap;
    user-select: none;
}

/* A separate transparent cutout, not a rectangular image frame. */
.landing__portrait {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -1.3%;
    transform: translateX(-50%);
    height: min(83svh, 970px);
    width: min(55vw, 520px);
    pointer-events: none;
}
.landing__photo {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition: opacity .65s cubic-bezier(.22,.61,.36,1);
}
.landing__photo--actor { opacity: 1; }
.landing__photo--beyond { opacity: 0; }
.landing.is-beyond .landing__photo--actor { opacity: 0; }
.landing.is-beyond .landing__photo--beyond { opacity: 1; }

/* Paired editorial entry points; asymmetry leaves the center to the person. */
.landing__links {
    position: absolute;
    z-index: 5;
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: clamp(26px, 6vh, 72px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.landing__link {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(7px, 1.1vw, 18px);
    padding: 12px 0;
    text-decoration: none;
    font-size: clamp(17px, 1.7vw, 27px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.035em;
    transition: opacity .22s ease;
}
.landing__link-number { font-size: 10px; letter-spacing: .12em; font-weight: 500; color: var(--muted); }
.landing__link-arrow { font-size: .7em; font-weight: 400; transition: transform .25s ease; }
.landing__link:hover .landing__link-arrow,
.landing__link:focus-visible .landing__link-arrow { transform: translateX(4px); }
.landing__links:hover .landing__link:not(:hover) { opacity: .5; }
.landing__link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

@media (max-width: 760px) {
    .landing { min-height: 520px; }
    .landing__masthead { top: 26px; }
    .landing__folio { display: none; }
    /* Keep the large title behind the face, not behind the navigation. */
    .landing__name {
        top: 30%;
        font-size: clamp(96px, 26vw, 190px);
        letter-spacing: -.09em;
    }
    .landing__portrait {
        width: min(80vw, 460px);
        height: min(65svh, 680px);
        bottom: clamp(72px, 12svh, 128px);
    }
    .landing__links {
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
        align-items: flex-end;
        gap: 14px;
    }
    .landing__link {
        font-size: clamp(14px, 3.8vw, 19px);
        gap: 7px;
        padding: 15px 0;
    }
    .landing__link-number { font-size: 9px; }
    .landing__link-arrow { display: none; }
}

/* Small phones: let the portraits fill more of the frame without hiding links. */
@media (max-width: 380px) {
    .landing__name { font-size: clamp(84px, 26vw, 100px); }
    .landing__portrait { width: 84vw; height: 61svh; }
}

/* Short/landscape mobile viewports may scroll rather than clip important links. */
@media (max-width: 760px) and (max-height: 600px) {
    .landing { min-height: 540px; }
    .landing__portrait { height: 340px; bottom: 74px; }
}

@media (max-height: 620px) and (min-width: 761px) {
    .landing__name { top: 36%; font-size: min(23vw, 300px); }
    .landing__portrait { height: 78svh; }
    .landing__links { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing__photo, .landing__link, .landing__link-arrow { transition: none; }
}