:root{
    --font-display:'Playfair Display','Noto Serif JP',Georgia,'Times New Roman',serif;
    --font-body:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    --ink:#1a1614;
    --ink-soft:#6b625c;

    --ar: 1.76;
    --u: min(1vw, calc(1vh * var(--ar)));
    --v: calc(var(--u) / var(--ar));
    --ox: calc((100vw - 100 * var(--u)) / 2);
    --oy: calc((100vh - 100 * var(--v)) / 2);
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: #f3f3f3;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;


    font-size: calc(1.0583 * var(--u));
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

h2 {
    font-size: calc(2.448 * var(--u));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--ink);
}

/* ---------------- BACKGROUND ---------------- */



.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.5;
  z-index: -1;

}



/* ---------------- NAVBAR ---------------- */

.navbar {
    position: fixed;
    top: calc(var(--oy) + 1.852 * var(--v));
    left: calc(var(--ox) + 64 * var(--u));
    transform: translateX(+9.75%);

    display: flex;
    gap: calc(0.625 * var(--u));

    padding: calc(1.111 * var(--v)) calc(1.146 * var(--u));

    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;

    box-shadow:
        0 calc(0.741 * var(--v)) calc(2.778 * var(--v)) rgba(0,0,0,0.08);

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.navbar.moved {
    transform: translateX(calc(-62 * var(--u))) scale(1.05);
}

.navbar a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.04em;

    padding: calc(0.926 * var(--v)) calc(0.938 * var(--u));
    border-radius: 999px;

    transition: 0.25s ease;
}

.navbar a:hover {
    background: rgba(0,0,0,0.07);
    color: #111;
}

/* ---------------- CONTACT BUTTON ---------------- */

.contact-button {
    position: fixed;
    bottom: calc(var(--oy) + 2.315 * var(--v));
    left: calc(var(--ox) + 0.52 * var(--u));

    padding: calc(1.296 * var(--v)) calc(1.354 * var(--u));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    box-shadow: 0 calc(0.926 * var(--v)) calc(2.778 * var(--v)) rgba(0,0,0,.08);

    color: var(--ink);
    text-decoration: none;
    font-weight: 500;

    scale: 1;

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), scale 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, box-shadow 0.25s ease;
    will-change: transform, scale;
}

.contact-button.moved {
    transform: translateX(calc(89.5 * var(--u)));
}

.contact-button:active {
    scale: 1.055;
}

.contact-button:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--ink);
    box-shadow: 0 calc(1.111 * var(--v)) calc(3.241 * var(--v)) rgba(0,0,0,0.12);
    transform: translateY(calc(-1.2 * var(--v)));
}

.contact-button.moved:hover {
    transform: translateX(calc(89.5 * var(--u))) translateY(calc(-1.2 * var(--v)));
}

.contact-button.to-center,
.contact-button.moved.to-center {
    transform:
        perspective(1400px)
        translateX(calc(50vw - var(--ox) - 0.52 * var(--u))) translateX(-50%)
        translateY(calc(-50vh + var(--oy) + 2.315 * var(--v))) translateY(50%)
        rotateY(90deg) scale(.9);
    opacity:0;
    pointer-events:none;
}

.contact-panel.contact-center.show .card{
    animation: flip-in .75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes flip-in{
    from{ transform: perspective(1400px) rotateY(-90deg); opacity:0; }
    to{ transform: perspective(1400px) rotateY(0deg); opacity:1; }
}


.contact-panel{

    position:fixed;

    left: calc(var(--ox) + 0.52 * var(--u));
    bottom: calc(var(--oy) + 8.5 * var(--v));

    width:25vw;
    max-width:25vw;
    height:auto;
    max-height:70vh;

    z-index:1080;

}

.contact-panel.contact-center{

    left:50vw;
    right:auto;
    top:50vh;
    bottom:auto;

    width: calc(42 * var(--u));
    max-width:60vw;

    height:auto;
    max-height:82vh;

    transform: translate(-50%, -50%);

}

.contact-button.moved + .contact-panel.contact-center .card{

    transform:none;

}

.contact-panel .card{

    border-radius: calc(1.146 * var(--u));

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}

.contact-button.moved + .contact-panel .card{

    transform: translateX(calc(75vw - var(--ox) - var(--ox) - 1.04 * var(--u)));

}

.contact-title{

    display:none;

}

.contact-panel.contact-center .contact-title{

    display:block;

    margin:0 0 calc(1.2 * var(--v));

    font-family: var(--font-display);
    font-weight:700;
    font-size: calc(2.4 * var(--u));
    letter-spacing:-0.015em;

    text-align:center;
    color: var(--ink);

}

.contact-panel .card-body{

    display:flex;
    flex-direction:column;

    min-height:0;
    overflow-y:auto;

}

.contact-panel #contactForm{

    display:flex;
    flex-direction:column;

    flex:1 1 auto;
    min-height:0;

}

.contact-panel .cf-message{

    flex:0 0 auto;

}

.contact-panel .cf-message > textarea{

    height:7rem;
    resize:none;

}


.main{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
}

.gallery{
    position:relative;
    overflow:hidden;
}

/* ---------------- PHOTO ---------------- */

.photo{

    position:relative;

    left: calc(var(--ox) + 3.5 * var(--u));
    right: calc(3.906 * var(--u));

    top: calc(var(--oy) + 11.111 * var(--v));

    width: calc(63.75 * var(--u));
    aspect-ratio: 1100 / 619;

    border-radius: calc(1.042 * var(--u));
    overflow: hidden;

    z-index:1;

}

.marquee{

    position:absolute;

    left:0;
    right:0;
    top: calc(var(--oy) + 17 * var(--v));

    z-index:0;

    overflow:hidden;
    pointer-events:none;

}

.contact-page .marquee{

    top: calc(var(--oy) + 43 * var(--v));

}

.marquee-src{

    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;

}

.marquee-track{

    display:flex;
    width:max-content;

    animation: marquee-left 42s linear infinite;

}

.main.reverse .marquee-track{

    animation-name: marquee-right;

}

@keyframes marquee-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

@keyframes marquee-right{
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); }
}

.marquee-word{

    font-family: var(--font-display);
    font-weight:900;
    font-size: calc(6.5 * var(--u));

    line-height:1.05;
    letter-spacing:-0.02em;

    white-space:nowrap;

    padding-right: calc(6 * var(--u));

    color: rgba(26, 22, 20, .16);

}


.reverse .photo{

    left: calc(var(--ox) + 33 * var(--u));


}

a.photo{

    display:block;

    text-decoration:none;
    cursor:pointer;

}

.main .photo,
.main .about-card{

    transition:
        opacity .9s cubic-bezier(0.22, 1, 0.36, 1),
        transform .9s cubic-bezier(0.22, 1, 0.36, 1);

}

.main .photo{

    opacity:0;
    transform: translateX(calc(-9 * var(--u)));

}

.main .about-card{

    opacity:0;
    transform: translateX(calc(9 * var(--u)));

}

.main.reverse .photo{

    transform: translateX(calc(9 * var(--u)));

}

.main.reverse .about-card{

    transform: translateX(calc(-9 * var(--u)));

}

.main.inview .photo{

    opacity:1;
    transform:none;

}

.main.inview .about-card{

    opacity:.95;
    transform:none;

}

.main .marquee,
.main .intro h1,
.main .intro p,
.main .about h2,
.main .about p{

    opacity:0;
    transition: opacity .8s ease;

}

.main.inview .marquee{

    opacity:1;
    transition-delay:.1s;

}

.main.inview .intro h1{

    opacity:1;
    transition-delay:.25s;

}

.main.inview .intro p{

    opacity:1;
    transition-delay:.3s;

}

.main.inview .about h2{

    opacity:1;
    transition-delay:.25s;

}

.main.inview .about p{

    opacity:1;
    transition-delay:.4s;

}


/* ---------------- TITLE ---------------- */

.intro{

    position:absolute;

    right: calc(var(--ox) + 0 * var(--u));
    top: calc(var(--oy) + 32 * var(--v));

    z-index:2;

    width: calc(33.333 * var(--u));
    height: calc(26 * var(--v));

    overflow:hidden;

    text-align:center;

}

.reverse .intro{

    right:auto;
    left: calc(var(--ox) + 1 * var(--u));

}

.intro h1{

    font-size: calc(3.7 * var(--u) * var(--fit, 1));
    margin-bottom: calc(1.6 * var(--v));

    font-family: var(--font-display);
    font-weight: 900;

    letter-spacing: -0.025em;
    line-height: 1.02;

    color: var(--ink);

}

.intro p{

    font-size: calc(0.95 * var(--u) * var(--fit, 1));

    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--ink-soft);
    line-height:2;

}

/* ---------------- CARD ---------------- */

.about-card{

    position:absolute;

    left: calc(var(--ox) + 15 * var(--u));
    top: calc(var(--oy) + 61 * var(--v));

    width: calc(80 * var(--u));
    height: calc(29.5 * var(--v));

    display:flex;

    background:#fff;

    border-radius: calc(1.146 * var(--u));

    box-shadow:
        0 calc(0.926 * var(--v)) calc(3.704 * var(--v)) rgba(0,0,0,.08);

    overflow:hidden;

    z-index:3;

    opacity: 95%;

}


.reverse-card{

    left: calc(var(--ox) + 3.75 * var(--u));
    flex-direction:row-reverse;

}

/* ---------------- TEXT ---------------- */

.about{

    flex:2;

    padding: calc(2.344 * var(--u));

    overflow:hidden;

}

.about h2{

    margin-top:0;
    font-size: calc(1.95 * var(--u) * var(--fit, 1));

    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;

}

.about p{

    line-height:1.7;
    font-weight:300;
    font-size: calc(1.0583 * var(--u) * var(--fit, 1));
    color: var(--ink-soft);

    margin:0 0 .55em;

}

.about h2{

    margin-bottom:.4em;

}

/* ---------------- ICONS ---------------- */

.icons{

    flex:0 0 auto;

    display:grid;

    grid-template-columns: repeat(3, calc(6 * var(--u)));
    grid-auto-rows: calc(6 * var(--u));

    justify-content:center;
    align-content:center;

    gap: calc(0.8 * var(--u));

    padding: calc(1 * var(--u));

    background:#ffffff;

}

.icon{

    display:flex;

    justify-content:center;
    align-items:center;

    background:#efefef;

    border-radius: calc(0.781 * var(--u));

    font-weight:bold;

    position:relative;
    overflow:hidden;

}

.about-card.icons-left{

    flex-direction:row;

}

.about-card.icons-left .icons{

    order:-1;

}

.icon img{

    width: calc(5 * var(--u));
    height: calc(5 * var(--u));

    object-fit:contain;

    display:block;

    transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--isc, 1));
    transition: transform .22s cubic-bezier(0.25, 1, 0.5, 1);

}

.icon:hover{

    --isc:.75;

}

.icon-label{

    position:absolute;
    left:0;
    right:0;
    bottom: calc(0.55 * var(--v));

    text-align:center;
    white-space:nowrap;

    font-size: calc(0.66 * var(--u));
    font-weight:500;
    letter-spacing:.03em;

    color: var(--ink-soft);

    opacity:0;
    transform: translateY(calc(0.9 * var(--v)));

    transition: opacity .22s ease, transform .22s ease;

    pointer-events:none;

}

.icon:hover .icon-label{

    opacity:1;
    transform:none;

}

.social-row{

    display:none;

    gap: calc(0.938 * var(--u));
    margin-top: calc(1.4 * var(--v));

}

.contact-panel.contact-center .social-row{

    display:flex;

}

.social-icon{

    flex:1;

    height: calc(6.6 * var(--u));

    text-decoration:none;

}


/* ---------------- LANGUAGE ---------------- */


.language-switcher{

    display:flex;

    gap: calc(0.208 * var(--u));

    padding: calc(0.208 * var(--u));

    border-radius:999px;

    background:rgba(0,0,0,.05);

}

.lang{

    border:none;
    outline:none;

    background:transparent;

    padding: calc(0.926 * var(--v)) calc(0.938 * var(--u));

    border-radius:999px;

    font-size: calc(0.781 * var(--u));
    font-weight:500;

    color:#555;

    cursor:pointer;

    transition:.25s ease;

}

.lang:hover{

    background:rgba(0,0,0,.05);

}

.lang.active{

    background:white;

    color:#111;

    box-shadow:0 calc(0.370 * var(--v)) calc(1.111 * var(--v)) rgba(0,0,0,.08);

}


/* ------- PHOTO Gallery ----------*/

.photo-card{

    display:grid;

    grid-template-columns: auto 1fr;

    align-items:center;

    gap: calc(4 * var(--u));

    margin: calc(11.111 * var(--v)) auto;

    width: calc(94 * var(--u));



}

.photo-card.reverse{
    grid-template-columns: 1fr auto;

}

.photo-card.reverse .photo-frame{

    order:2;

}

.photo-info{
    order:1;
}

.photo-info-reverse{
    order:1;
}

.photo-card{

    opacity:.25;

    transform:translateY(calc(3.704 * var(--v)));

    transition:

        opacity .8s ease,
        transform .8s ease;
}

.photo-card.visible{

    opacity:1;

    transform:none;

}

.photo-frame{

    filter: drop-shadow(0 0 calc(0.583 * var(--u)) SlateGrey);

    width: calc(74 * var(--u));
    aspect-ratio: 1230 / 692;

    border-radius: calc(1.042 * var(--u));
    overflow:hidden;

    box-shadow:0 calc(0.926 * var(--v)) calc(3.704 * var(--v)) rgba(0,0,0,.08);

}




.gallery-photo{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.gallery-photo-SPECIAL{

    width:100%;
    height:100%;

    object-fit:contain;

    background: #181712;


    display:block;

}

.gallery-info{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.gallery-info.reverse{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}



/* ------- STAGGERED PHOTO GRID ----------*/

.grid-gallery{

    position:relative;

    width: calc(90 * var(--u));
    margin: calc(14.815 * var(--v)) auto;

    opacity:.25;

    transform:translateY(calc(3.704 * var(--v)));

    transition:
        opacity .8s ease,
        transform .8s ease;


}

.grid-row{

    transform:translateX(calc(-2 * var(--u)));

    display:flex;

    filter: drop-shadow(0 0 calc(0.167 * var(--u)) SlateGray);

    gap: calc(1.042 * var(--u));

    margin-bottom: calc(1.852 * var(--v));

}

.grid-row:nth-child(2){
    margin-left:9.3%;
}

.grid-row:nth-child(3){
}

.grid-tile{

    flex-shrink:0;

    width:17.3%;
    aspect-ratio: 1 / 1;

    border-radius: calc(1.042 * var(--u));
    overflow:hidden;

    box-shadow:0 calc(0.926 * var(--v)) calc(3.704 * var(--v)) rgba(0,0,0,.08);

}

.grid-tile img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.grid-text{

    position:absolute;

    left:84.5%;
    bottom:30%;

    width:17.3%;
    aspect-ratio: 1 / 1;

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.grid-text h2{

    margin-top:0;
    font-size: calc(1.458 * var(--u));

}

.grid-text p{

    color: var(--ink-soft);
    font-weight:300;
    line-height:1.6;

}


.grid-gallery.visible{

    opacity:1;

    transform:none;

}

/* ------- VIDEO ----------*/

.gallery-video{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

@media (max-width: 768px) {

    :root{
        --u: 1vw;
        --v: 1vh;
        --ox: 0px;
        --oy: 0px;
    }

    body{
        font-size:16px;
        overflow-x:hidden;
    }

    .main{
        min-height:auto;
        overflow:visible;
        overflow-x:clip;
        padding:9.115vw 0 6.510vw;
    }

    .photo,
    .reverse .photo{

        position:static;
        left:auto;
        right:auto;
        top:auto;
        width:88vw;
        max-width:88vw;
        margin:0 auto 3.906vw;
    }

    .intro,
    .reverse .intro{
        position:static;
        left:auto;
        right:auto;
        top:auto;
        width:88vw;
        margin:0 auto 3.906vw;
    }

    .intro h1{
        font-size:4.688vw;
    }

    .intro p{
        font-size:2.344vw;
    }

    .about-card,
    .reverse-card,
    .about-card.icons-left{
        position:static;
        left:auto;
        top:auto;
        width:88vw;
        height:auto;
        margin:0 auto 6.510vw;
        flex-direction:column;
    }

    .intro,
    .reverse .intro{
        height:auto;
        overflow:visible;
    }

    .about-card.icons-left .icons{
        order:0;
    }

    .main .photo,
    .main .about-card,
    .main.reverse .photo,
    .main.reverse .about-card,
    .main .intro h1,
    .main .intro p,
    .main .about h2,
    .main .about p{
        opacity:1;
        transform:none;
    }

    .main .about-card,
    .main.reverse .about-card{
        opacity:.95;
    }

    .about h2{
        font-size:3.385vw;
    }

    h2{
        font-size:4.167vw;
    }

    /* ---- Navbar & contact button ---- */

    .navbar{
        left:50vw;
        top:1.823vw;
        transform:translateX(-50%);
        width:83vw;
        max-width:83vw;
        z-index:1040;

        justify-content:space-between;

        gap:0.260vw;
        padding:1.042vw 2.2vw;
    }

    .navbar.moved{
        transform:translateX(-50%);
    }

    .navbar a{
        padding:1.042vw 1.563vw;
        font-size:1.823vw;
        white-space:nowrap;
    }

    .contact-button{
        bottom:2.315vh;
        left:0.52vw;
        padding:1.302vw 2.604vw;
        font-size:1.823vw;
    }

    .contact-button.moved{
        transform:none;
    }

    .contact-panel{
        left:4vw;
        bottom:14vw;
        width:92vw;
        max-width:92vw;
        height:auto;
        max-height:70vh;
    }

    .contact-button.moved + .contact-panel .card{
        transform:none;
    }

    .contact-panel.contact-center{
        left:4vw;
        right:auto;
        top:auto;
        bottom:14vw;
        width:92vw;
        max-width:92vw;
        max-height:70vh;
        transform:none;
    }

    .contact-button.to-center,
    .contact-button.moved.to-center{
        transform:none;
    }

    .marquee{
        top:auto;
        position:static;
        margin:3vw 0;
    }

    .contact-page .marquee{
        top:auto;
    }

    .marquee-word{
        font-size:9vw;
        padding-right:6vw;
    }

    .intro,
    .reverse .intro{
        height:auto;
    }

    .social-icon{
        height:16vw;
    }

    .photo-card,
    .photo-card.reverse{
        grid-template-columns:1fr;
        gap:3.125vw;
        margin:9.115vw auto;
        width:90vw;
    }

    .photo-frame,
    .photo-card.reverse .photo-frame{
        order:1;
        transform:none;
        width:100%;
    }

    .photo-info,
    .photo-info-reverse{
        order:2;
        transform:none;
        text-align:center;
    }


    .grid-gallery{
        width:90vw;
        margin:10.417vw auto;
    }

    .grid-row{
        flex-wrap:wrap;
        justify-content:center;
        transform:none;
    }

    .grid-row:nth-child(2){
        margin-left:0;
    }

    .grid-tile{
        width:calc(50% - 0.521vw);
    }

    .grid-text{
        position:static;
        width:100%;
        aspect-ratio:auto;
        height:auto;
        text-align:center;
        margin-top:2.604vw;
    }

}