/*
Theme Name: LODKA
Theme URI: https://lodkadigital.com
Author: LODKA
Description: One-page creative studio theme for LODKA — UI/UX & Creative Technology Studio.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: lodka
*/


  :root{
    --ink:#141310;
    --paper:#f5f3ee;
    --mist: rgba(20,19,16,0.4);
    --mist-w: rgba(255,255,255,0.4);
    --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --margin: 6vw;
  }
  *{box-sizing:border-box;}
  [data-reveal-02]{visibility:hidden;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);}
  a{color:inherit;text-decoration:none;}
  img{display:block;}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;left:0;width:100%;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px var(--margin);
    color:#fff;
    mix-blend-mode:difference;
    font-size:13px;letter-spacing:.02em;
  }
  header .logo{font-family:var(--serif);font-size:19px;letter-spacing:.02em;}
  header nav{display:flex;gap:28px;}
  header nav a{opacity:.85;transition:opacity .2s;}
  header nav a:hover{opacity:1;}
  header .right{display:flex;align-items:center;gap:24px;}
  header .clock{opacity:.5;letter-spacing:.08em;}
  @media (max-width:800px){ header nav, header .right .loc{display:none;} }

  /* ---------- floating menu (Work / Studio) ---------- */
  .site-menu{
    position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
    z-index:80;display:flex;flex-direction:column;align-items:stretch;
    width:min(560px,90vw);
  }
  .site-menu-panel{
    background:#fff;color:var(--ink);border-radius:28px;
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;
    padding:0 32px;
    transform:translateY(14px) scale(.98);
    transition:max-height .55s cubic-bezier(.22,1,.36,1),
               opacity .35s ease,
               transform .55s cubic-bezier(.22,1,.36,1),
               padding .45s ease;
  }
  .site-menu.is-open .site-menu-panel{
    max-height:70vh;opacity:1;pointer-events:auto;
    transform:translateY(0) scale(1);
    padding:44px 32px 24px;margin-bottom:12px;
    box-shadow:0 30px 60px -15px rgba(0,0,0,.45), 0 12px 24px -8px rgba(0,0,0,.3);
  }
  .site-menu-links{display:flex;flex-direction:column;}
  .site-menu-links a{
    font-family:var(--serif);font-size:42px;line-height:1.2;color:var(--ink);
    opacity:.95;transition:opacity .2s;
  }
  .site-menu-links a:hover{opacity:.6;}
  .site-menu-divider{height:1px;background:rgba(20,19,16,.15);margin:26px 0 20px;}
  .site-menu-social{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
  .site-menu-social a{font-size:14px;color:var(--ink);opacity:.65;transition:opacity .2s;}
  .site-menu-social a:hover{opacity:1;}
  .site-menu-bar{
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;border-radius:999px;padding:6px;
    box-shadow:0 8px 24px -6px rgba(0,0,0,.35);
    transition:box-shadow .4s ease;
  }
  .site-menu.is-open .site-menu-bar{
    box-shadow:0 16px 36px -10px rgba(0,0,0,.4);
  }
  .site-menu-theme{
    width:40px;height:40px;flex:none;border-radius:50%;background:#0f0e0c;border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .site-menu-toggle{
    background:#0f0e0c;color:#fff;border:none;border-radius:999px;
    padding:12px 30px;font-size:14px;font-family:var(--sans);cursor:pointer;
    letter-spacing:.02em;
  }
  @media (max-width:600px){ .site-menu-links a{font-size:32px;} }

  /* ---------- hero ---------- */
  .hero{
    position:relative;height:100vh;overflow:hidden;
    display:flex;align-items:flex-end;
    color:#fff;
  }
  .hero img{
    position:absolute;inset:0;width:100%;height:115%;object-fit:cover;
    will-change:transform;
  }
  .hero::after{content:"";position:absolute;inset:0;background:rgba(10,9,7,.28);}
  .hero-inner{
    position:relative;z-index:2;width:100%;
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:0 var(--margin) 6vh;
  }
  .hero-tag{font-size:13px;letter-spacing:.04em;opacity:.6;}
  .hero-line{max-width:340px;font-size:15px;line-height:1.6;text-align:right;}

  /* ---------- about / studio ---------- */
  .about{
    position:relative;
    background-color:var(--paper);
    border-top:1px solid rgba(0,0,0,.08);
  }
  .about .corner{position:absolute;width:20px;height:20px;z-index:5;}
  .about .corner.tl{top:24px;left:24px;border-top:1px solid #fff;border-left:1px solid #fff;}
  .about .corner.tr{top:24px;right:24px;border-top:1px solid #fff;border-right:1px solid #fff;}
  .about-figure{position:relative;height:100vh;width:100%;overflow:hidden;background:#ffffff;}
  .about-figure img{width:100%;height:100%;object-fit:cover;}
  .about-copy{padding:14vh var(--margin);background-color:var(--paper);}
  .about-copy h2{
    font-family:var(--serif);font-weight:500;
    font-size:clamp(24px,3vw,34px);line-height:1.35;margin:0 0 28px;max-width:640px;
  }
  .about-copy p{font-size:15px;line-height:1.7;max-width:460px;color:#3a382f;margin:0;}

  /* ---------- works grid ---------- */
  .works{padding:0;}
  .work-item{
    position:relative;height:100vh;overflow:hidden;background:#ffffff;
  }
  .work-item .frame{position:absolute;inset:0;}
  .work-item .frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
  .work-item:hover .frame img{transform:scale(1.04);}
  .work-item .overlay{
    position:absolute;inset:0;z-index:2;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:6vh var(--margin);
    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 55%);
    color:#fff;pointer-events:none;
  }
  .work-item h3{
    font-family:var(--serif);font-weight:500;text-align:left;
    font-size:clamp(28px,5vw,54px);margin:0 0 14px;
  }
  .work-item .meta{
    font-size:13px;letter-spacing:.05em;color:#8fa4f0;margin-bottom:14px;
  }
  .work-item .desc{
    font-size:15px;line-height:1.6;max-width:480px;margin:0;color:rgba(255,255,255,.8);
  }
  /* ---------- vision (pinned scroll) ---------- */
  .vision{position:relative;height:420vh;background-color:#1c1a16;}
  .vision-sticky{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;color:#fff;
  }
  .vision-bg{position:absolute;inset:0;background:#1c1a16;}
  .vision-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;}
  .vision-bg::after{content:"";position:absolute;inset:0;background:rgba(10,9,7,0.4);}
  .vision-content{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 var(--margin);}
  .vision-titles{
    display:flex;flex-wrap:wrap;gap:0 28px;font-family:var(--serif);font-weight:500;
    font-size:clamp(26px,5vw,54px);line-height:1.05;margin-bottom:36px;
  }
  .vision-titles span{opacity:.3;transition:opacity 500ms ease;white-space:nowrap;}
  .vision-titles span.is-active{opacity:1;}
  .vision-meta{display:flex;align-items:center;gap:20px;margin-bottom:30px;font-size:13px;letter-spacing:.05em;color:var(--mist-w);}
  .vision-meta .line{flex:1;height:1px;background:var(--mist-w);max-width:220px;}
  .vision-meta .idx{color:#fff;}
  .vision-copy{position:relative;max-width:460px;min-height:110px;}
  .vision-copy p{
    margin:0;font-size:16px;line-height:1.7;opacity:0;transform:translateY(14px);
    transition:opacity 500ms ease, transform 500ms ease;position:absolute;max-width:460px;
  }
  .vision-copy p.is-active{opacity:1;transform:translateY(0);position:relative;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid rgba(0,0,0,.08);background-color:var(--paper);}
  .footer-top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6vw;
    padding:12vh var(--margin) 8vh;
  }
  .footer-top .cta{display:flex;flex-direction:column;gap:10px;font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);}
  .footer-top .cta span{color:var(--mist);}
  .footer-top .cta a{border-bottom:1px solid currentColor;width:fit-content;}
  .footer-links{display:flex;flex-direction:column;gap:8px;font-size:14px;}
  .footer-links a:hover{color:var(--mist);}
  .footer-contact{font-size:14px;line-height:1.8;}
  .footer-bottom{
    background:#0f0e0c;color:#fff;padding:6vh var(--margin) 4vh;
    text-align:center;
  }
  .footer-bottom .fine{display:flex;justify-content:space-between;font-size:12px;opacity:.5;flex-wrap:wrap;gap:8px;}

  .spacer{height:8vh;}

  /* ---------- nav-menu output (floating panel) ---------- */
  .site-menu-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
  .site-menu-links li{margin:0;}
  .site-menu-links li a{display:inline-block;}

  /* ---------- generic / blog content ---------- */
  .site-content{
    max-width:760px;margin:0 auto;
    padding:18vh var(--margin) 12vh;
    background:var(--paper);color:var(--ink);
  }
  .site-content .entry{display:block;}
  .entry-thumb{margin-bottom:2rem;overflow:hidden;}
  .entry-thumb img{width:100%;height:auto;}
  .entry-title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.15;margin:0 0 0.6em;}
  .entry-title a{color:inherit;}
  .entry-meta{font-size:13px;letter-spacing:.04em;opacity:.55;margin:0 0 2.2rem;}
  .entry-content{font-size:16px;line-height:1.75;}
  .entry-content p{margin:0 0 1.4em;}
  .entry-content h1,.entry-content h2,.entry-content h3{font-family:var(--serif);font-weight:500;line-height:1.3;}
  .entry-content a{border-bottom:1px solid currentColor;}
  .entry-content img{max-width:100%;height:auto;margin:1.6em 0;}
  .entry-content ul,.entry-content ol{padding-left:1.4em;}
  .entry-content blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid currentColor;opacity:.8;}
  .entry-content :last-child{margin-bottom:0;}
  .entry-content .alignwide{width:100%;}
  .entry-content .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;}
  .site-content + .entry-pagination,
  .entry-pagination{margin-top:4rem;}
  .entry-pagination{display:flex;justify-content:space-between;gap:1rem;font-size:14px;}
  .entry-pagination a{border-bottom:1px solid currentColor;}
  .site-content form[role="search"]{display:flex;gap:0.5rem;max-width:360px;margin-top:1.6rem;}
  .site-content input[type="search"]{
    flex:1;background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:999px;
    padding:0.7em 1.1em;font:inherit;color:var(--ink);
  }
  html[data-theme="dark"] .site-content input[type="search"]{background:#201e1a;border-color:rgba(255,255,255,.18);color:var(--ink);}
  .site-content input[type="search"]:focus{outline:2px solid rgba(0,0,0,.35);}
  .site-content button[type="submit"]{
    background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:0.7em 1.4em;cursor:pointer;font:inherit;
  }
  .site-content a{color:inherit;}
  .site-content a:hover{opacity:.6;}

  /* ---------- footer wordmark ---------- */
  .footer-wordmark{
    font-family:var(--serif);font-weight:700;letter-spacing:.05em;
    font-size:clamp(52px,11vw,150px);line-height:.95;
    margin:0 0 28px;color:#fff;
  }

  /* ---------- dark theme ---------- */
  html[data-theme="dark"]{
    --paper:#16140f;
    --ink:#ece7dc;
    --mist:rgba(255,255,255,0.4);
  }
  html[data-theme="dark"] body{background:var(--paper);color:var(--ink);}
  html[data-theme="dark"] .about{background-color:var(--paper);}
  html[data-theme="dark"] .about-copy{background-color:var(--paper);}
  html[data-theme="dark"] .about-copy p{color:rgba(255,255,255,0.72);}
  html[data-theme="dark"] .footer-top{background:var(--paper);}
  html[data-theme="dark"] .about-figure{background:#000;}
  html[data-theme="dark"] .site-menu-links a{color:var(--ink);}