/*==========================================================
    KIYOMI BRAND LANGUAGE
    brand.css
    PART 1
==========================================================*/


/*==========================================================
    BRAND VARIABLES
==========================================================*/

:root{

    --brand-vermilion:#B63A32;
    --brand-gold:#B89A5A;
    --brand-ink:#26221F;

    --brand-pattern-opacity:.035;
    --brand-paper-opacity:.12;

}



/*==========================================================
    WASHI PAPER BACKGROUND
==========================================================*/

.paper-background{

    position:relative;

    overflow:hidden;

}


.paper-background::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:var(--brand-paper-opacity);

    background-image:

        radial-gradient(circle at 20% 30%,
        rgba(255,255,255,.45) 0,
        transparent 28%),

        radial-gradient(circle at 80% 70%,
        rgba(0,0,0,.03) 0,
        transparent 26%),

        radial-gradient(circle at 50% 50%,
        rgba(255,255,255,.18) 0,
        transparent 60%);

}


/*==========================================================
    ASANOHA PATTERN
==========================================================*/

.asanoha{

    position:relative;

    overflow:hidden;

}


.asanoha::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:var(--brand-pattern-opacity);

    background-size:80px 80px;

    background-image:

        linear-gradient(
            30deg,
            transparent 74%,
            var(--brand-ink) 75%,
            transparent 76%
        ),

        linear-gradient(
            90deg,
            transparent 74%,
            var(--brand-ink) 75%,
            transparent 76%
        ),

        linear-gradient(
            150deg,
            transparent 74%,
            var(--brand-ink) 75%,
            transparent 76%
        );

}



/*==========================================================
    HANKO STAMP
==========================================================*/

.hanko{

    width:175px;

    height:175px;

    border:9px solid rgb(243, 208, 120);

    color:rgb(255, 217, 151);

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:9px;

    transform:rotate(0deg);

    font-family:var(--font-heading);

    font-size:4.9rem;

    letter-spacing:.05em;

    opacity:.18;

    user-select:none;

}


.hanko.small{

    width:48px;

    height:48px;

    font-size:1rem;

}


.hanko.large{

    width:110px;

    height:110px;

    font-size:2.4rem;

}



/*==========================================================
    FLOATING HANKO
==========================================================*/

.hanko-floating{

    position:absolute;

    top:3rem;

    left:3rem;

    opacity: 0.55;;

    z-index:1;

}



/*==========================================================
    SECTION ACCENT LINE
==========================================================*/

.section-accent{

    width:90px;

    height:2px;

    background:var(--brand-gold);

    margin:1.25rem 0;

    position:relative;

}


.section-accent::after{

    content:"";

    position:absolute;

    right:-12px;

    top:50%;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--brand-vermilion);

    transform:translateY(-50%);

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:768px){

    .hanko-floating{

        display:none;

    }

}
/*==========================================================
    KIYOMI BRAND LANGUAGE
    brand.css
    PART 2
==========================================================*/


/*==========================================================
    VERTICAL JAPANESE TYPOGRAPHY
==========================================================*/

.vertical-jp{

    position:absolute;

    top:50%;

    right:3rem;

    transform:translateY(-50%);

    writing-mode:vertical-rl;

    font-family:"Noto Serif JP", serif;

    font-size:12rem;

    color:rgb(130, 8, 8);

    opacity: 0.34;

    letter-spacing:.2rem;

    z-index:5;

    pointer-events:none;

}


.vertical-jp.right{

    left:auto;

    right:3rem;

}


.vertical-jp.small{

    font-size:6rem;

}


.vertical-jp.large{

    font-size:7rem;

}



/*==========================================================
    BRUSH DIVIDER
==========================================================*/

.brush-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1.5rem;

    margin:7rem auto;

    width:min(700px,90%);

}


.brush-divider::before,

.brush-divider::after{

    content:"";

    flex:1;

    height:2px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--brand-gold),
            transparent
        );

}


.brush-divider span{

    width:22px;

    height:22px;

    border-radius:50%;

    border:2px solid var(--brand-vermilion);

    transform:rotate(45deg);

    opacity:.7;

}



/*==========================================================
    EDITORIAL IMAGE FRAME
==========================================================*/

.editorial-frame{

    position:relative;

    display:inline-block;

}


.editorial-frame img{

    display:block;

    width:100%;

    height:auto;

}


.editorial-frame::before{

    content:"";

    position:absolute;

    top:-18px;

    left:-18px;

    right:18px;

    bottom:18px;

    border:1px solid rgba(184,154,90,.35);

    pointer-events:none;

    transition:var(--transition);

}


.editorial-frame:hover::before{

    top:-12px;

    left:-12px;

}



/*==========================================================
    DECORATIVE CORNER LINES
==========================================================*/

.corner-frame{

    position:relative;

}


.corner-frame::before,

.corner-frame::after{

    content:"";

    position:absolute;

    width:70px;

    height:70px;

    pointer-events:none;

}


.corner-frame::before{

    top:-10px;

    left:-10px;

    border-top:1px solid rgba(184,154,90,.5);

    border-left:1px solid rgba(184,154,90,.5);

}


.corner-frame::after{

    bottom:-10px;

    right:-10px;

    border-bottom:1px solid rgba(184,154,90,.5);

    border-right:1px solid rgba(184,154,90,.5);

}



/*==========================================================
    FLOATING GOLD ACCENTS
==========================================================*/

.gold-accent{

    position:absolute;

    width:140px;

    height:1px;

    background:rgba(184,154,90,.45);

    pointer-events:none;

}


.gold-accent::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--brand-gold);

    transform:translateY(-50%);

}



/*==========================================================
    EDITORIAL PULL QUOTE
==========================================================*/

.pull-quote{

    max-width:1000px;

    margin:8rem auto;

    text-align:center;

    position:relative;

}


.pull-quote blockquote{

    font-family:var(--font-heading);

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:1.15;

    color:var(--brand-ink);

    margin:0;

}


.pull-quote cite{

    display:block;

    margin-top:2rem;

    font-size:.8rem;

    letter-spacing:.3em;

    text-transform:uppercase;

    color:var(--color-text-light);

    font-style:normal;

}



/*==========================================================
    SUBTLE SECTION OVERLAY
==========================================================*/

.brand-overlay{

    position:relative;

    overflow:hidden;

}


.brand-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(182,58,50,.03),
        transparent 40%),

        radial-gradient(circle at bottom left,
        rgba(184,154,90,.04),
        transparent 45%);

    pointer-events:none;

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .vertical-jp{

        display:none;

    }

}


@media(max-width:768px){

    .brush-divider{

        margin:5rem auto;

    }

    .corner-frame::before,

    .corner-frame::after{

        width:45px;

        height:45px;

    }

    .pull-quote blockquote{

        font-size:clamp(2rem,8vw,3rem);

    }

}
/*==========================================================
    KIYOMI BRAND LANGUAGE
    brand.css
    PART 3
==========================================================*/


/*==========================================================
    SECTION SPACING
==========================================================*/

.section-break{

    position:relative;

    margin:9rem 0;

}


.section-break.small{

    margin:5rem 0;

}


.section-break.large{

    margin:12rem 0;

}



/*==========================================================
    FLOATING LEAF ORNAMENT
==========================================================*/

.leaf-ornament{

    position:absolute;

    width:180px;

    height:180px;

    opacity:.05;

    pointer-events:none;

    user-select:none;

}


.leaf-ornament.top-left{

    top:-60px;

    left:-60px;

    transform:rotate(-12deg);

}


.leaf-ornament.top-right{

    top:-60px;

    right:-60px;

    transform:scaleX(-1) rotate(-12deg);

}


.leaf-ornament.bottom-left{

    bottom:-60px;

    left:-60px;

    transform:rotate(18deg);

}


.leaf-ornament.bottom-right{

    bottom:-60px;

    right:-60px;

    transform:scaleX(-1) rotate(18deg);

}



/*==========================================================
    FADED BRAND CIRCLE
==========================================================*/

.brand-circle{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    border:1px solid rgba(184,154,90,.18);

    pointer-events:none;

}


.brand-circle::before{

    content:"";

    position:absolute;

    inset:24px;

    border-radius:50%;

    border:1px solid rgba(182,58,50,.10);

}


.brand-circle::after{

    content:"";

    position:absolute;

    inset:48px;

    border-radius:50%;

    border:1px solid rgba(184,154,90,.12);

}



/*==========================================================
    SECTION TITLE DECORATION
==========================================================*/

.section-title{

    position:relative;

    display:inline-block;

}


.section-title::before{

    content:"";

    position:absolute;

    left:-34px;

    top:50%;

    width:18px;

    height:1px;

    background:var(--brand-gold);

}


.section-title::after{

    content:"";

    position:absolute;

    right:-34px;

    top:50%;

    width:18px;

    height:1px;

    background:var(--brand-gold);

}



/*==========================================================
    BRAND TAG
==========================================================*/

.brand-tag{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:.75rem;

    color:var(--color-text-light);

}


.brand-tag::before{

    content:"";

    width:30px;

    height:1px;

    background:var(--brand-gold);

}


.brand-tag::after{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--brand-vermilion);

}



/*==========================================================
    IMAGE HOVER LUXURY EFFECT
==========================================================*/

.luxury-image{

    overflow:hidden;

    border-radius:var(--radius-xl);

}


.luxury-image img{

    display:block;

    width:100%;

    transition:
        transform .9s ease,
        filter .9s ease;

}


.luxury-image:hover img{

    transform:scale(1.06);

    filter:brightness(.96);

}



/*==========================================================
    FADE BORDER
==========================================================*/

.fade-border{

    position:relative;

}


.fade-border::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(184,154,90,.5),
            transparent
        );

}



/*==========================================================
    BRAND SELECTION
==========================================================*/

::selection{

    background:rgba(182,58,50,.22);

    color:var(--brand-ink);

}


::-moz-selection{

    background:rgba(182,58,50,.22);

    color:var(--brand-ink);

}



/*==========================================================
    SMOOTH SCROLL
==========================================================*/

html{

    scroll-behavior:smooth;

}



/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    .luxury-image img,

    .editorial-frame::before,

    .principle-card,

    .team-member img{

        transition:none;

    }

}



/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

    .leaf-ornament,

    .brand-circle,

    .gold-accent,

    .hanko-floating{

        display:none;

    }

    .section-title::before,

    .section-title::after{

        display:none;

    }

}