/* =========================================
   BASE CANVAS (premium editorial feel)
========================================= */

.tm-app{
    font-family: system-ui;
    color: #111;
    width: 100%;
}

.tm-strip{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 4px;
    justify-content: space-between;
    flex-direction: row;
    z-index:9;
    position: sticky;
    top: 94%;
    width: 100%;
}

.tm-text{
    opacity: .6;
    
    text-transform: uppercase;
}

.tm-select-wrap select{
    border: none;
    background: transparent;
    font: inherit;
    font-weight: normal;
    padding: 2px 2px;
    cursor: pointer;
    outline: none;
    opacity:.6;
    
    
}

.tm-btn-inline{
    border: none;
    background: transparent;
    font: inherit;
    opacity: .6;
    cursor: pointer;
    padding: 2px 6px;
    text-transform: uppercase;
}

.tm-btn-inline:hover{
    opacity: 1;
}


/* =========================================
   TYPOGRAPHY SYSTEM (KEY UPGRADE)
========================================= */

.tm-hero {
    font-size: clamp(50px, 14vw, 204px);
    letter-spacing: 0em;
    line-height: 0.75;
    margin: 0;
    font-weight: normal;
    text-align: center;
}

/* HERO SCALE */
.tm-headline.big{
    letter-spacing: -0.04em;
}

/* ==================================================
   PACKAGING SYSTEM
================================================== */

.layout-packaging{
    display:flex;
    flex-direction:column;
}


/* ROW */

.pkg-row{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:28px;
    align-items: center;
    min-height: 100px;
    border-bottom: 1px solid #000000;
}


/* FULL WIDTH */

.row-2{
    grid-template-columns:1fr;
}


/* COLUMN */

.col{
    min-width:0;
}


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

.row-1 .tm-headline{
    font-size:clamp(46px,9vw,70px);
    line-height:.95;
    letter-spacing:-0.5;
    margin: 0;
    font-weight: normal;
}


/* ---------------------------------
NUMBER
--------------------------------- */

.row-1 .col:last-child{display:flex;flex-direction: row;justify-content: space-between;border-left: 1px solid;height: -webkit-fill-available;align-items: center;line-height: 1.25;padding-left: 16px;}

.row-1 .tm-body{
    font-size: 16px;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.6;
    max-width: 32px;
}


/* ---------------------------------
GRAMMAGE
--------------------------------- */

.row-2 .tm-body{

    font-size:18px;
    line-height:1.6;

    max-width:680px;

}


/* ---------------------------------
PERCENTAGE
--------------------------------- */

.row-3 .col:first-child{display:flex;align-items: center;gap: 24px;}

.row-3 .tm-headline{font-size: clamp(46px, 9vw, 70px);line-height:.9;margin:0;}

.row-3 .tm-body{font-size: 22px;line-height: 1.02;}


/* ---------------------------------
PRODUCT NOTE
--------------------------------- */

.row-3 .col:last-child{display:flex;justify-content:flex-end;border-left: 1px solid;height: -webkit-fill-available;}

.row-3 .col:last-child .tm-body{text-align: left;opacity:.7;padding-left: 16px;}


/* ---------------------------------
INGREDIENT
--------------------------------- */

.row-4 .tm-body{padding: 16px 0px;font-size: 14px;line-height: 1.4;}


/* ---------------------------------
AA CODE
--------------------------------- */

.row-4 .col:last-child{display:flex;justify-content:flex-end;align-items: flex-end;gap: 8px;}

.row-4 .col:last-child .tm-body{}


/* ---------------------------------
ROW DIVIDER
--------------------------------- */

.pkg-row:not(:last-child){padding: 0;border-bottom: 1px solid #000000;}


.col.col-75 {
    align-self: center;
}

.col.col-100 {
    align-self: center;
    display: flex;
    justify-content: flex-start;
    gap: 4px;
}

p.tm-body.ran-word {
    font-size: 18px;
}

.col.col-25 {
    align-items: center;
}

p.tm-headline {
    font-size: 34px;
}

p.tm-body {
    font-size: 58px;
}

.pkg-row.row-3 > .col.col-75 > p.tm-body {
    width: 170px;
}
/* ---------------------------------
RESPONSIVE
--------------------------------- */

@media(max-width:900px){

    .pkg-row{

        grid-template-columns:1fr;

        gap:12px;

    }

    .row-1 .col:last-child,
    .row-3 .col:last-child,
    .row-4 .col:last-child{

        justify-content:flex-start;

    }

    .row-3 .tm-headline{

        font-size:64px;

    }

}



/* =====================================================
MARQUEE
===================================================== */

.layout-marquee{position:relative;overflow:hidden;padding:24px 0;border-top:1px solid #111;border-bottom:1px solid #111;background:#fff;max-width: calc(100vw - 48px);}


/* VIEWPORT */

.tm-marquee{

    overflow:hidden;
    width:100%;

}


/* TRACK */

.tm-track{

    display:flex;
    align-items:center;

    width:max-content;

    will-change:transform;

    animation:tm-marquee 55s linear infinite;

}


/* pause when hover */

.layout-marquee:hover .tm-track{

    animation-play-state:paused;

}


/* ==========================================
ONE SENTENCE
========================================== */

.tm-item{display:flex;align-items:baseline;gap: 25px;flex-shrink:0;white-space:nowrap;margin-right:80px;}


/* ==========================================
BODY
========================================== */

.tm-item .tm-body{margin:0;font-size: 98px;line-height:1;opacity: 1;letter-spacing: 0;}


/* ==========================================
DISPLAY FONT NAME
========================================== */

.tm-pair-head{

    margin:0;

    font-size:28px;

    line-height:1;

    font-weight:400;

    letter-spacing:-0.03em;

}


/* ==========================================
BODY FONT NAME
========================================== */

.tm-pair-body{

    margin:0;

    font-size:20px;

    line-height:1;

}


/* ==========================================
OPTIONAL DOT
========================================== */

.tm-item::after{

    content:"•";

    margin-left:36px;

    opacity:.2;

}


/* last item */

.tm-item:last-child::after{

    content:"";

}
.tm-track > * > span.tm-headline {
    font-size: 98px;
}

/* ==========================================
ANIMATION
========================================== */

@keyframes tm-marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


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

@media (max-width:900px){

    .tm-item{

        margin-right:48px;

    }

    .tm-item .tm-body{

        font-size:15px;

    }

    .tm-pair-head{

        font-size:22px;

    }

    .tm-pair-body{

        font-size:17px;

    }

}
/* =========================================
   BELUM CEK
========================================= */

.tm-layouts{
    display: flex;
    flex-direction: column;
    gap: 120px; /* IMPORTANT: more breathing */
}

/* =========================================
   LAYOUT BASE (REMOVE BOX FEEL)
========================================= */

.layout{
    position: relative;
    padding: 0;
    background: transparent;
}
section.layout.layout-full.hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* subtle separator instead of box */
.layout::before{
    /* content:""; */
    /* display:block; */
    /* width:100%; */
    /* height:1px; */
    /* background: linear-gradient(90deg, transparent, #e9e9e9, transparent); */
    /* margin-bottom: 60px; */
    /* opacity: .8; */
}

/* =========================================
   HERO LAYOUT (EDITORIAL IMPACT)
========================================= */

.layout-hero{
    padding: 40px 0 0;
}

.layout-hero .tm-headline{
    font-size: clamp(54px, 6vw, 110px);
}

/* =========================================
   RESPONSIVE (KEEP BREATHING)
========================================= */

@media (max-width: 900px){

    .tm-canvas{
        padding: 60px 24px;
    }

    .tm-layouts{
        gap: 80px;
    }

    .layout-ui{
        grid-template-columns: 1fr;
    }

    .layout-product{
        flex-direction: column;
        gap: 24px;
    }

    .layout-quote{
        padding: 80px 20px;
    }
}