/* Bikesh Home — all selectors are scoped under .bh-home / .bh-* */
.bh-home{--blue:#1a5cff;--ink:#0b1020;--muted:#4b5568;--line:#e6ebf3;--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--hand:"Caveat","Segoe Print","Bradley Hand",cursive}
.bh-home,.bh-home *{box-sizing:border-box}.bh-home *{margin:0}
.bh-home{font:400 17px/1.55 var(--f);color:var(--ink);background:#fff}
.bh-home a{color:inherit;text-decoration:none}
.bh-home a:focus-visible,.bh-home button:focus-visible,.bh-home summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.bh-wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- hero ---------- */
.bh-hero{position:relative;height:clamp(660px,94vh,840px);background:#cfe4fb url(../img/bg.jpg) right center/cover no-repeat;overflow:hidden}
.bh-hero .bh-wrap{position:relative;height:100%;z-index:2}
.bh-home nav{display:flex;align-items:center;justify-content:space-between;padding-top:22px;gap:20px}
.bh-logo{display:block;line-height:1}
.bh-logo b{display:block;font:700 44px/1 var(--hand);letter-spacing:-.5px}
.bh-logo small{display:block;font-size:11px;letter-spacing:.32em;margin-top:2px;font-weight:500}
.bh-links{display:flex;gap:34px;font-weight:500;font-size:16px}
.bh-links a{padding:10px 0;border-bottom:3px solid transparent}
.bh-links a:hover,.bh-links a[aria-current]{border-color:var(--blue);color:var(--blue)}
.bh-nav-r{display:flex;align-items:center;gap:14px}
.bh-icon-btn{background:none;border:0;cursor:pointer;padding:8px;display:grid;place-items:center;color:var(--ink)}
.bh-menu{display:none;position:relative}
.bh-menu summary{list-style:none;cursor:pointer;font-weight:600;padding:8px 14px;border-radius:99px;background:#fff9}
.bh-menu div{position:absolute;right:0;top:46px;background:#fff;border-radius:16px;box-shadow:0 12px 30px #0b102022;padding:10px;display:grid;min-width:170px;z-index:9}
.bh-menu div a{padding:10px 14px;border-radius:10px}.bh-menu div a:hover{background:#eef3ff}

.bh-intro{position:absolute;z-index:3;left:28px;top:130px;max-width:560px}
.bh-hello{font-weight:600;letter-spacing:.2em;font-size:15px;display:flex;align-items:center;gap:12px}
.bh-hello span{font-size:34px;letter-spacing:0}
.bh-home h1{font:800 clamp(3.6rem,8.4vw,6.4rem)/.92 var(--f);letter-spacing:-.045em;margin:14px 0 22px}
.bh-home h1 em{display:block;font-style:normal;color:var(--blue)}
.bh-intro p{font-size:19px;color:#1b2335;max-width:34ch;line-height:1.55}
.bh-cta{display:flex;gap:14px;margin:28px 0 22px;flex-wrap:wrap}
.bh-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:99px;font-weight:600;font-size:16px;border:2px solid var(--ink);transition:transform .15s}
.bh-btn:hover{transform:translateY(-2px)}
.bh-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 22px #1a5cff44}
.bh-btn.ghost{background:#fff8}
.bh-social{display:flex;gap:12px}
.bh-social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px #0b102022;transition:transform .15s}
.bh-social a:hover{transform:scale(1.1)}
.bh-social svg{width:22px;height:22px;fill:currentColor}

/* portrait (image + eye overlays) */
.bh-me{position:absolute;z-index:1;left:calc(50% - 10px);bottom:0;height:86%;aspect-ratio:1122/1402;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 18px 26px #0a2a5a40)}
.bh-me img.main{display:block;width:100%;height:100%}
.bh-me canvas{position:absolute;pointer-events:none}
.bh-note{position:absolute;z-index:2;font:700 34px/1 var(--hand);left:calc(50% - 70px);top:150px;transform:rotate(-8deg);color:#10182b;width:130px}
.bh-note svg{position:absolute;left:40px;top:76px;width:70px;height:56px;fill:none;stroke:#10182b;stroke-width:2.4;stroke-linecap:round}
.bh-sign{position:absolute;z-index:2;right:2%;bottom:130px;display:grid;gap:8px;width:165px;justify-items:end}
.bh-sign p{font:700 24px/1.05 var(--hand);transform:rotate(-8deg);margin:0 14px 12px 0;text-align:left;color:#10182b}
.bh-sign a{width:100%;padding:11px 14px;color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em;background:linear-gradient(#8a5a35,#6d4326);border-radius:6px;box-shadow:0 5px 10px #0003;transform:rotate(var(--r))}
.bh-sign a:hover{filter:brightness(1.1)}

/* ---------- categories + articles ---------- */
.bh-cats{position:relative;z-index:4;margin-top:-92px}
.bh-cats ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bh-cat{display:flex;align-items:center;gap:16px;background:#fffffff2;border-radius:18px;padding:20px 18px;box-shadow:0 12px 30px #0b10201f;transition:transform .15s}
.bh-cat:hover{transform:translateY(-3px)}
.bh-tile{flex:none;width:62px;height:62px;border-radius:16px;display:grid;place-items:center}
.bh-tile svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bh-cat h3{font-size:18px;line-height:1.2}.bh-cat p{font-size:14px;color:var(--muted);line-height:1.35;margin-top:4px}
.bh-go{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;background:#f1f4fa;display:grid;place-items:center}
.bh-panel{position:relative;z-index:3;background:#fff;border-radius:40px 40px 0 0;margin-top:-52px;padding:92px 0 70px}
.bh-panel-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}
.bh-panel-h p{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.2em;font-weight:600;color:var(--muted)}
.bh-panel-h p:before{content:"";width:22px;height:3px;border-radius:3px;background:var(--blue)}
.bh-panel h2{font:800 40px/1.1 var(--f);letter-spacing:-.03em}
.bh-more{color:var(--blue);font-weight:600}
.bh-posts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bh-post a{display:block}
.bh-thumb{aspect-ratio:16/9;border-radius:14px;margin-bottom:14px;box-shadow:0 8px 20px #0b102018}
.bh-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:#8a93a5}
.bh-tag{font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:8px}
.bh-post h3{font-size:19px;line-height:1.3;margin-top:8px}
.bh-post a:hover h3{color:var(--blue)}
.bh-home footer{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted)}
.bh-home footer .bh-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:1180px){.bh-sign,.bh-note{display:none}.bh-me{left:calc(50% + 40px);height:80%}}
@media(max-width:960px){
  .bh-links{display:none}.bh-menu{display:block}
  .bh-hero{background-image:linear-gradient(180deg,#ffffffe6 0,#ffffffb8 50%,#fff0 80%),url(../img/bg.jpg)}
  .bh-logo small{letter-spacing:.2em;font-size:10px}
  .bh-hero{height:auto;padding-bottom:140px}
  .bh-hero .bh-wrap{height:auto}
  .bh-intro{position:static;margin-top:36px}
  .bh-me{position:relative;left:auto;height:auto;width:min(86vw,420px);margin:-10px auto -140px;display:block}
  .bh-cats ul,.bh-posts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.bh-cats ul,.bh-posts{grid-template-columns:1fr}.bh-panel h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.bh-btn,.bh-cat,.bh-social a{transition:none}}

.bh-standalone{margin:0}
.bh-home{position:relative}
.bh-search{display:none;position:absolute;left:28px;right:28px;top:82px;z-index:8;gap:10px;background:#fff;padding:12px;border-radius:16px;box-shadow:0 12px 30px #0b102026}
.bh-search.bh-open{display:flex}
.bh-search input{flex:1;font:inherit;padding:12px 16px;border:2px solid var(--line);border-radius:12px}
.bh-search button{font:inherit;font-weight:600;padding:12px 22px;border:0;border-radius:12px;background:var(--blue);color:#fff;cursor:pointer}
.bh-sr{position:absolute;left:-9999px}
.bh-thumb{overflow:hidden}.bh-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bh-empty{color:var(--muted);grid-column:1/-1}