/* BOCKJUN — Coming Soon (temporary page). Separate from the main site stylesheet; nothing here is shared with public/. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{--ink:#151515;--paper:#fff;--gray:#a3a3a3;--dim:#7d7d7d;--line:#2c2c2c;--accent:#2E55FF;--gutter:24px;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding:max(28px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  background:radial-gradient(120% 70% at 50% 46%,rgba(46,85,255,.13),rgba(46,85,255,0) 62%),var(--ink);
  color:var(--paper);font-family:var(--f);font-stretch:125%;text-align:center;-webkit-font-smoothing:antialiased;overflow-x:clip}

.brand{margin:0;font-size:clamp(22px,4.2vw,40px);font-weight:900;letter-spacing:.06em;line-height:1}
.tagline{margin:14px 0 0;font-size:clamp(10px,1.5vw,13px);font-weight:700;letter-spacing:.24em;color:var(--gray)}

main{display:flex;align-items:center;justify-content:center;padding:48px 0}
.soon{margin:0;font-size:clamp(46px,15.5vw,176px);font-weight:900;line-height:.92;letter-spacing:-.015em}
.soon span{display:block}

.product{width:100%;max-width:520px;margin:0 auto;padding-top:28px;border-top:1px solid var(--line)}
.product-name{margin:0;font-size:clamp(13px,3.4vw,18px);font-weight:800;letter-spacing:.12em;line-height:1.35}
.product-sub{margin:10px 0 0;font-size:clamp(10px,2.6vw,12px);font-weight:700;letter-spacing:.2em;line-height:1.5;color:var(--gray)}
.product-note{margin:20px 0 0;font-size:clamp(14px,3.6vw,16px);font-weight:500;font-stretch:100%;letter-spacing:.01em;line-height:1.6;color:var(--gray)}

@media (min-width:768px){
  .soon span{display:inline}
  .soon span+span::before{content:"\00a0"}
  .product{max-width:640px;padding-top:32px}
}

/* Entrance: plain CSS fade, no script. Visible immediately when motion is reduced. */
@media (prefers-reduced-motion:no-preference){
  header,.soon,.product{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .soon{animation-delay:.12s}
  .product{animation-delay:.28s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}