/*
Theme Name: ALCTOK
Theme URI: https://alctok.com/
Author: ALCTOK
Description: ALCTOK — Tokenized Alcohol.
Version: 1.0.8
Text Domain: alctok
*/


/* =========================================================
   ROOT
   ========================================================= */

:root{
    --alc-white:#ffffff;

    --alc-bg:#ffffff;
    --alc-bg-soft:#f3f8fd;
    --alc-bg-blue:#e8f2fb;
    --alc-bg-blue-2:#deedf9;

    --alc-blue:#2477bd;
    --alc-blue-light:#3f8dcc;
    --alc-blue-dark:#155a96;
    --alc-blue-deep:#123b61;

    --alc-text:#405b73;
    --alc-muted:#6e8294;

    --alc-line:rgba(36,119,189,.17);

    --shell:1320px;

    /* compatibility */
    --beer-bg:var(--alc-bg);
    --beer-bg-2:var(--alc-bg-soft);
    --beer-bg-3:var(--alc-bg-blue);
    --beer-bg-deep:var(--alc-white);

    --beer-lime:var(--alc-blue);
    --beer-lime-light:var(--alc-blue-light);
    --beer-lime-dark:var(--alc-blue-dark);

    --beer-white:var(--alc-blue-deep);
    --beer-text:var(--alc-text);
    --beer-muted:var(--alc-muted);
    --beer-line:var(--alc-line);

    --green:var(--alc-blue);
    --green2:var(--alc-blue-light);
    --green-dark:var(--alc-blue-dark);
    --orange:var(--alc-blue);

    --gold:var(--alc-blue);
    --gold-light:var(--alc-blue-light);
    --gold-dark:var(--alc-blue-dark);

    --ink:var(--alc-blue-deep);
    --muted:var(--alc-muted);
    --line:var(--alc-line);
    --paper:var(--alc-bg-soft);
}


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background:var(--alc-bg);
}

body{
    margin:0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--alc-blue-deep);
    background:var(--alc-bg);

    line-height:1.55;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.af-shell{
    width:min(calc(100% - 48px),var(--shell));
    margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:relative;
    z-index:100;

    height:88px;

    display:flex;
    align-items:center;

    background:#ffffff;

    border-bottom:
        1px solid var(--alc-line);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
}


/* BRAND */

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand img{
    width:150px;
    height:80px;

    object-fit:contain;
}

.brand-copy strong{
    display:block;

    font-size:20px;
    letter-spacing:.05em;

    color:var(--alc-blue-dark);
}

.brand-copy span{
    display:block;

    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;

    color:var(--alc-blue);
}


/* NAVIGATION */

.nav{
    display:flex;
    align-items:center;

    gap:30px;

    font-size:14px;
    font-weight:700;

    color:var(--alc-blue-deep);
}

.nav a{
    color:var(--alc-blue-deep);

    transition:color .2s ease;
}

.nav a:hover{
    color:var(--alc-blue);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    position:relative;

    min-height:650px;

    overflow:hidden;

    background:#ffffff;
}

.hero-inner{
    position:relative;

    min-height:650px;

    display:grid;

    grid-template-columns:46% 54%;

    align-items:center;

    background:#ffffff;
}


/* HERO COPY */

.hero-copy{
    position:relative;
    z-index:3;

    padding:76px 54px 76px 0;

    background:#ffffff;
}


/* EYEBROW */

.eyebrow{
    display:inline-flex;
    align-items:center;

    gap:9px;

    font-size:12px;
    font-weight:900;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--alc-blue);
}

.eyebrow:before{
    content:"";

    width:28px;
    height:3px;

    background:var(--alc-blue);

    border-radius:4px;
}


/* HERO TITLE */

.hero h1{
    max-width:650px;

    margin:20px 0 24px;

    font-size:clamp(48px,5.2vw,78px);

    line-height:.98;

    letter-spacing:-.055em;

    color:var(--alc-blue-deep);
}

.hero h1 em{
    font-style:normal;

    color:var(--alc-blue);
}


/* HERO LEAD */

.hero-lead{
    max-width:590px;

    margin:0 0 34px;

    font-size:21px;

    color:#526b80;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 23px;

    border-radius:9px;

    font-weight:850;

    color:#ffffff;

    background:var(--alc-blue);

    box-shadow:
        0 12px 30px rgba(36,119,189,.18);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.btn:hover{
    color:#ffffff;

    background:var(--alc-blue-dark);

    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(36,119,189,.25);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual{
    position:relative;

    height:100%;
    min-height:650px;

    background:
        url('assets/images/hero-alctok.avif')
        30% center / cover
        no-repeat;

    isolation:isolate;
}


/* LEFT IMAGE FADE */

.hero-visual:before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255,255,255,.92) 8%,
            rgba(255,255,255,.58) 23%,
            rgba(255,255,255,.16) 45%,
            rgba(255,255,255,0) 68%
        );
}


/* IMAGE TINT */

.hero-visual:after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(36,119,189,.01),
            rgba(36,119,189,.06)
        );
}


/* =========================================================
   HERO LOGO CARD
   ========================================================= */

.hero-logo-card{
    position:absolute;

    z-index:2;

    right:8%;
    top:20%;

    transform:translateY(-50%);

    width:min(330px,48%);

    padding:28px;

    background:rgba(255,255,255,.94);

    border:
        1px solid rgba(36,119,189,.18);

    border-radius:28px;

    box-shadow:
        0 24px 70px rgba(25,72,110,.16);

    backdrop-filter:blur(8px);
}

.hero-logo-card img{
    width:100%;

    max-height:310px;

    object-fit:contain;
}


/* HERO STAT */

.hero-stat{
    position:absolute;

    z-index:3;

    right:7%;
    bottom:7%;

    padding:13px 17px;

    border-radius:12px;

    font-size:12px;
    font-weight:850;

    color:#ffffff;

    background:rgba(18,59,97,.92);

    border:
        1px solid rgba(255,255,255,.28);

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 30px rgba(18,59,97,.18);
}


/* =========================================================
   INTRO — COMMON
   ========================================================= */

.intro{
    padding:78px 0 58px;

    text-align:center;

    color:var(--alc-blue-deep);
}

.intro .af-shell{
    background:transparent;
}

.kicker{
    font-size:12px;
    font-weight:900;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--alc-blue);
}

.intro h2{
    margin:10px 0 16px;

    font-size:clamp(34px,4vw,54px);

    line-height:1.05;

    letter-spacing:-.035em;

    color:var(--alc-blue-deep);
}

.intro p{
    max-width:760px;

    margin:auto;

    font-size:18px;

    color:#526b80;
}


/* =========================================================
   ABOUT
   ========================================================= */

#about{
    background:#ffffff;
}


/* =========================================================
   PILLARS / ALCOHOL ASSETS
   ========================================================= */

.pillars,
#assets{
    padding:0 0 84px;

    background:#ffffff;
}

.pillar-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    background:transparent;
}

.pillar{
    padding:28px;

    background:var(--alc-bg-soft);

    border:
        1px solid rgba(36,119,189,.14);

    border-radius:18px;

    color:var(--alc-blue-deep);

    box-shadow:
        0 12px 35px rgba(27,78,117,.07);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.pillar:hover{
    transform:translateY(-4px);

    background:var(--alc-bg-blue);

    border-color:
        rgba(36,119,189,.35);

    box-shadow:
        0 18px 42px rgba(27,78,117,.12);
}

.pillar b{
    display:block;

    margin:10px 0 6px;

    font-size:18px;

    color:var(--alc-blue-dark);
}

.pillar span{
    font-size:14px;

    color:#60778a;
}

.pillar-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:12px;

    font-size:21px;

    color:var(--alc-blue);

    background:#e4f0fa;

    border:
        1px solid rgba(36,119,189,.18);
}


/* =========================================================
   ALCTOK NETWORK
   ========================================================= */

.alctok-network,
#network{
    padding:80px 24px;

    background:
        linear-gradient(
            135deg,
            #edf6fc 0%,
            #e2f0fa 50%,
            #edf6fc 100%
        );

    border-top:
        1px solid rgba(36,119,189,.14);

    border-bottom:
        1px solid rgba(36,119,189,.14);
}

.alctok-network-inner{
    width:min(1280px,100%);

    margin:0 auto;

    background:transparent;
}


/* NETWORK HEADER */

.alctok-network-head{
    max-width:720px;

    margin:0 auto 42px;

    text-align:center;
}

.alctok-network-head > span{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    font-size:12px;
    line-height:1;

    font-weight:800;

    letter-spacing:.16em;

    color:var(--alc-blue);
}

.alctok-network-head > span::before{
    content:"";

    width:28px;
    height:3px;

    border-radius:10px;

    background:var(--alc-blue);
}

.alctok-network-head h2{
    margin:0 0 12px;

    font-size:clamp(32px,4vw,50px);

    line-height:1.05;

    letter-spacing:-.04em;

    color:var(--alc-blue-deep);
}

.alctok-network-head p{
    margin:0;

    font-size:17px;

    line-height:1.65;

    color:#526b80;
}


/* =========================================================
   NETWORK GRID
   ========================================================= */

.alctok-network-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;
}


/* =========================================================
   NETWORK CARD
   ========================================================= */

.alctok-network-card{
    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    min-height:190px;

    padding:24px 54px 24px 24px;

    color:var(--alc-blue-deep);

    background:#ffffff;

    border:
        1px solid rgba(36,119,189,.15);

    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(27,78,117,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.alctok-network-card:hover{
    transform:translateY(-5px);

    background:#f8fbfe;

    border-color:
        rgba(36,119,189,.35);

    box-shadow:
        0 18px 42px rgba(27,78,117,.14);
}


/* NETWORK LOGO */

.alctok-network-logo{
    flex:0 0 125px;

    display:flex;

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

    min-height:130px;

    padding:8px;

    background:var(--alc-bg-soft);

    border:
        1px solid rgba(36,119,189,.12);

    border-radius:12px;
}

.alctok-network-logo img{
    display:block;

    width:100%;

    max-width:125px;
    max-height:130px;

    object-fit:contain;
}


/* NETWORK CONTENT */

.alctok-network-content{
    min-width:0;
}

.alctok-network-content h3{
    margin:0 0 8px;

    font-size:21px;

    line-height:1.1;

    font-weight:850;

    letter-spacing:.02em;

    color:var(--alc-blue-dark);
}

.alctok-network-content p{
    margin:0 0 15px;

    font-size:14px;

    line-height:1.5;

    color:#60778a;
}

.alctok-network-content strong{
    display:block;

    font-size:14px;

    font-weight:800;

    letter-spacing:.02em;

    color:var(--alc-blue);
}


/* NETWORK ARROW */

.alctok-network-arrow{
    position:absolute;

    right:22px;
    top:50%;

    transform:translateY(-50%);

    font-size:25px;

    line-height:1;

    color:var(--alc-blue);

    transition:transform .2s ease;
}

.alctok-network-card:hover
.alctok-network-arrow{
    transform:translate(5px,-50%);
}


/* =========================================================
   INDIVIDUAL CONTENT SECTIONS
   ========================================================= */

#alcohol-assets{
    background:#ffffff;
}

#categories{
    background:var(--alc-bg-soft);
}

#collectibles{
    background:#ffffff;
}

#producers{
    background:var(--alc-bg-soft);
}

#provenance{
    background:#ffffff;
}

#future{
    background:var(--alc-bg-soft);
}


/* OLD ID COMPATIBILITY */

#beer-assets{
    background:#ffffff;
}

#rare-beers{
    background:var(--alc-bg-soft);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    padding:34px 0;

    background:#eaf4fb;

    color:#526b80;

    border-top:
        1px solid rgba(36,119,189,.15);
}

.footer-inner{
    display:flex;

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

    gap:20px;

    font-size:13px;
}

.footer-inner strong{
    color:var(--alc-blue-dark);

    letter-spacing:.08em;
}

.footer-inner span{
    color:var(--alc-muted);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle{
    display:none;

    width:44px;
    height:44px;

    padding:10px;

    border:0;

    background:transparent;

    cursor:pointer;
}

.menu-toggle span{
    display:block;

    width:24px;
    height:2px;

    margin:5px auto;

    background:var(--alc-blue);

    border-radius:10px;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* HAMBURGER → X */

.menu-toggle.is-open span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2){
    opacity:0;
}

.menu-toggle.is-open span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.sg-reveal-left,
.sg-reveal-right{
    opacity:0;

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

.sg-reveal-left{
    transform:translateX(-45px);
}

.sg-reveal-right{
    transform:translateX(45px);
}

.sg-reveal-left.is-visible,
.sg-reveal-right.is-visible{
    opacity:1;

    transform:translateX(0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .alctok-network-grid{
        grid-template-columns:1fr;

        max-width:760px;

        margin:0 auto;
    }

    .alctok-network-card{
        min-height:170px;
    }

}


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

@media(max-width:900px){

    .hero,
    .hero-inner{
        min-height:auto;
    }

    .hero-inner{
        grid-template-columns:1fr;
    }

    .hero-copy{
        padding:60px 0 44px;
    }

    .hero-visual{
        min-height:480px;

        margin:0 -24px;
    }

    .pillar-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


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

@media(max-width:768px){

    .header-inner{
        position:relative;
    }

    .menu-toggle{
        display:block;

        margin-left:auto;

        flex:0 0 auto;
    }

    .nav{
        display:none;

        position:absolute;

        z-index:1000;

        top:100%;
        left:0;
        right:0;

        padding:10px 16px 18px;

        background:#ffffff;

        border-top:
            1px solid rgba(36,119,189,.14);

        border-bottom:
            1px solid rgba(36,119,189,.14);

        box-shadow:
            0 14px 30px rgba(27,78,117,.12);
    }

    .nav.nav-open{
        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:0;
    }

    .nav a{
        display:block;

        padding:13px 4px;

        color:var(--alc-blue-deep);

        font-size:15px;
        font-weight:700;

        border-bottom:
            1px solid rgba(36,119,189,.10);
    }

    .nav a:last-child{
        border-bottom:0;
    }

    .nav a:hover{
        color:var(--alc-blue);
    }


    /* HERO MOBILE IMAGE FADE */

    .hero-visual:before{
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255,255,255,.72) 14%,
                rgba(255,255,255,.08) 48%
            );
    }

}


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

@media(max-width:600px){

    .af-shell{
        width:
            min(
                calc(100% - 28px),
                var(--shell)
            );
    }


    /* HEADER */

    .site-header{
        height:76px;
    }

    .brand img{
        width:90px;
        height:60px;
    }

    .brand-copy strong{
        font-size:17px;
    }

    .brand-copy span{
        font-size:9px;
    }


    /* HERO */

    .hero-copy{
        padding:46px 0 34px;
    }

    .hero h1{
        font-size:48px;
    }

    .hero-lead{
        font-size:17px;
    }

    .hero-visual{
        min-height:400px;

        margin:0 -14px;
    }

    .hero-logo-card{
        width:235px;

        right:7%;

        padding:19px;

        border-radius:20px;
    }

    .hero-stat{
        right:6%;
        bottom:5%;

        font-size:10px;
    }


    /* INTRO */

    .intro{
        padding:60px 0 42px;
    }


    /* PILLARS */

    .pillars,
    #assets{
        padding-bottom:62px;
    }

    .pillar-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .pillar{
        padding:18px 14px;
    }

    .pillar b{
        font-size:15px;
    }

    .pillar span{
        font-size:12px;
    }


    /* NETWORK */

    .alctok-network,
    #network{
        padding:55px 16px;
    }

    .alctok-network-head{
        margin-bottom:28px;
    }

    .alctok-network-head p{
        font-size:15px;
    }

    .alctok-network-grid{
        gap:12px;
    }

    .alctok-network-card{
        gap:15px;

        min-height:135px;

        padding:
            16px
            42px
            16px
            14px;

        border-radius:14px;
    }

    .alctok-network-logo{
        flex-basis:88px;

        min-height:95px;

        padding:4px;
    }

    .alctok-network-logo img{
        max-width:88px;
        max-height:95px;
    }

    .alctok-network-content h3{
        font-size:18px;
    }

    .alctok-network-content p{
        margin-bottom:8px;

        font-size:12.5px;

        line-height:1.4;
    }

    .alctok-network-content strong{
        font-size:13px;
    }

    .alctok-network-arrow{
        right:15px;

        font-size:21px;
    }


    /* FOOTER */

    .footer-inner{
        display:block;

        text-align:center;
    }

    .footer-inner span{
        display:block;

        margin-top:5px;
    }

}


/* =========================================
   ALCTOK – TOKENIZED DRINKS FLYERS
   ========================================= */

.alctok-flyers {
    width: 100%;
    padding: 70px 24px;
    background: #f5f7f6;
}

.alctok-flyers-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.alctok-flyers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.alctok-flyer-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(20, 55, 35, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    transition: transform .3s ease,
                box-shadow .3s ease;
}

.alctok-flyer-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.alctok-flyer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
}

/* TABLET – 2 COLUMNS */

@media (max-width: 1024px) {

    .alctok-flyers {
        padding: 55px 20px;
    }

    .alctok-flyers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

}

/* MOBILE – 1 COLUMN */

@media (max-width: 600px) {

    .alctok-flyers {
        padding: 40px 16px;
    }

    .alctok-flyers-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .alctok-flyer-card {
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
    }

    .alctok-flyer-card:hover {
        transform: none;
    }

}