/* KOSH — Coming Soon + Preloader */
:root{
  --k-ink:#0d0b09; --k-cream:#f1e4c8; --k-ribbon-d:#f3e3c2; --k-sun:#a65a2a; --k-sun-hi:#c4713a;
  --k-paper:#f3eee5; --k-sand:#c8bd98; --k-olive:#857a55; --k-umber:#2b2620;
  --k-serif:"Cormorant Garamond","Times New Roman",serif; --k-sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --k-ease:cubic-bezier(.76,0,.24,1);
}
#kosh{--bg:var(--k-ink);--fg:var(--k-cream);--mute:rgba(241,228,200,.62);--line:rgba(241,228,200,.16);--ribbon:var(--k-ribbon-d);--glow:rgba(166,90,42,.28);
  position:fixed;inset:0;z-index:99999;background:var(--bg);color:var(--fg);font-family:var(--k-sans);font-weight:300;
  overflow:hidden;-webkit-font-smoothing:antialiased;transition:background-color .6s var(--k-ease),color .6s var(--k-ease);cursor:default}
#kosh[data-theme="light"]{--bg:var(--k-paper);--fg:var(--k-umber);--mute:rgba(43,38,32,.55);--line:rgba(43,38,32,.14);--ribbon:var(--k-sand);--glow:rgba(196,113,58,.22)}
#kosh *,#kosh *::before,#kosh *::after{box-sizing:border-box;margin:0;padding:0}
#kosh a{color:inherit;text-decoration:none}
#kosh button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html.kosh-lock,html.kosh-lock body{overflow:hidden!important}

/* grain + glow */
#kosh .k-grain{position:absolute;inset:-50%;pointer-events:none;z-index:50;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kgrain 1.2s steps(6) infinite}
#kosh[data-theme="light"] .k-grain{opacity:.14;mix-blend-mode:multiply}
@keyframes kgrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
#kosh .k-glow{position:absolute;left:var(--sx,40%);top:var(--sy,40%);width:70vmax;height:70vmax;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 60%);pointer-events:none;opacity:0;z-index:0}

/* layout */
#kosh .k-frame{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);padding:28px 40px 24px;z-index:5}
#kosh .k-head,#kosh .k-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:11px;letter-spacing:.28em;text-transform:uppercase}
#kosh .k-head{padding-bottom:20px;border-bottom:1px solid var(--line)}
#kosh .k-foot{padding-top:18px;border-top:1px solid var(--line)}
#kosh .k-word{display:block;height:14px;width:auto}
#kosh .k-word path{fill:currentColor}
#kosh .k-mute{color:var(--mute)}
#kosh .k-toggle{display:flex;align-items:center;gap:10px;letter-spacing:.28em;text-transform:uppercase;font-size:11px}
#kosh .k-toggle i{display:block;width:34px;height:16px;border:1px solid var(--line);border-radius:20px;position:relative}
#kosh .k-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--k-sun);transition:transform .6s var(--k-ease)}
#kosh[data-theme="light"] .k-toggle i::after{transform:translateX(18px)}
#kosh .k-toggle span{transition:opacity .4s}
#kosh[data-theme="dark"] .k-toggle .t-day,#kosh[data-theme="light"] .k-toggle .t-dusk{opacity:.4}

#kosh .k-main{position:relative;display:grid;grid-template-columns:1fr minmax(0,1.1fr) 1fr;align-items:end;gap:32px;padding:28px 0}
#kosh .k-left,#kosh .k-right{position:relative;z-index:3;padding-bottom:8px}
#kosh .k-meta{position:absolute;top:28px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;line-height:2}
#kosh .k-meta.l{left:0} #kosh .k-meta.r{right:0;text-align:right}
#kosh h1.k-title{font-family:var(--k-serif);font-weight:300;font-size:clamp(46px,5.3vw,112px);line-height:.94;letter-spacing:-.02em}
#kosh h1.k-title em{font-style:italic;font-weight:300;color:var(--k-sun-hi)}
#kosh[data-theme="light"] h1.k-title em{color:var(--k-sun)}
#kosh .k-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.12em}
#kosh .k-line>span{display:inline-block;will-change:transform}
#kosh .k-right{justify-self:end;max-width:340px}
#kosh .k-right p{font-size:15px;line-height:1.65;font-weight:400;color:var(--mute);margin-bottom:28px}
#kosh .k-right p b{font-weight:500;color:var(--fg)}
#kosh .k-soon{font-family:var(--k-serif);font-style:italic;font-size:clamp(30px,2.6vw,48px);line-height:1;margin-bottom:22px}
#kosh .k-soc{list-style:none;border-top:1px solid var(--line)}
#kosh .k-soc li{border-bottom:1px solid var(--line)}
#kosh .k-soc a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:12px;letter-spacing:.26em;text-transform:uppercase;position:relative;overflow:hidden}
#kosh .k-soc a .lbl{display:inline-block;transition:transform .6s var(--k-ease)}
#kosh .k-soc a .arr{display:inline-block;transition:transform .6s var(--k-ease)}
#kosh .k-soc a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--fg);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--k-ease);z-index:-1}
#kosh .k-soc a:hover{color:var(--bg)}
#kosh .k-soc a:hover::before{transform:scaleY(1)}
#kosh .k-soc a:hover .lbl{transform:translateX(12px)}
#kosh .k-soc a:hover .arr{transform:rotate(45deg) translateX(-6px)}
#kosh .k-soc a{transition:color .6s var(--k-ease);isolation:isolate}

/* mark */
#kosh .k-stage{position:relative;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}
#kosh svg.k-mark{height:min(62vh,52vw);width:auto;overflow:visible;display:block}
#kosh .k-ribbon{fill:var(--ribbon);transition:fill .6s var(--k-ease)}
#kosh .k-sun{fill:var(--k-sun);cursor:pointer}
#kosh .k-ball{fill:var(--k-sun)}
#kosh .k-shadow{fill:#000;opacity:0}
#kosh[data-theme="light"] .k-shadow{fill:#5a4a30}
#kosh .k-ring{fill:none;stroke:var(--k-sun);stroke-width:2;opacity:0}
#kosh .k-orbit{opacity:0;pointer-events:none}
#kosh .k-orbit text{font-family:var(--k-sans);font-size:23px;letter-spacing:7px;text-transform:uppercase;fill:var(--mute)}
#kosh .k-sun-hit{fill:transparent;cursor:pointer}

/* marquee */
#kosh .k-marq{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#kosh .k-marq-in{display:flex;width:max-content;animation:kmarq 38s linear infinite}
#kosh .k-marq-in span{padding:0 22px;white-space:nowrap}
#kosh .k-marq-in span::after{content:"✦";margin-left:44px;color:var(--k-sun)}
@keyframes kmarq{to{transform:translateX(-50%)}}

/* loader chrome */
#kosh .k-load{position:absolute;inset:0;z-index:20;pointer-events:none}
#kosh .k-count{position:absolute;left:40px;bottom:30px;font-family:var(--k-serif);font-weight:300;font-size:clamp(64px,9vw,150px);line-height:.8;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
#kosh .k-count sup{font-family:var(--k-sans);font-size:12px;letter-spacing:.2em;vertical-align:top;margin-left:8px}
#kosh .k-words{position:absolute;right:40px;bottom:36px;height:16px;overflow:hidden;font-size:11px;letter-spacing:.32em;text-transform:uppercase;text-align:right}
#kosh .k-words div{height:16px;line-height:16px}
#kosh .k-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--k-sun);transform:scaleX(0);transform-origin:left}

/* cursor */
#kosh .k-cur{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--k-cream);mix-blend-mode:difference;pointer-events:none;z-index:200;transition:width .4s var(--k-ease),height .4s var(--k-ease),margin .4s var(--k-ease),opacity .3s;opacity:0}
#kosh .k-cur.big{width:64px;height:64px;margin:-32px 0 0 -32px}
#kosh .k-cur-lbl{position:fixed;left:0;top:0;pointer-events:none;z-index:201;font-size:10px;letter-spacing:.28em;text-transform:uppercase;transform:translate(22px,-50%);opacity:0;transition:opacity .3s;white-space:nowrap;color:var(--fg)}
@media (hover:none){#kosh .k-cur,#kosh .k-cur-lbl{display:none}}

/* initial hidden states (JS reveals) */
#kosh.is-loading .k-reveal{opacity:0}

/* view transition for theme */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* responsive */
@media (max-width:1024px){
  #kosh .k-frame{padding:20px 22px 18px}
  #kosh .k-main{grid-template-columns:1fr;grid-template-rows:1fr auto auto;align-items:center;gap:18px;padding:18px 0}
  #kosh .k-stage{order:-1;height:auto;min-height:0}
  #kosh svg.k-mark{height:min(38vh,62vw)}
  #kosh .k-meta{display:none}
  #kosh .k-right{justify-self:stretch;max-width:none}
  #kosh .k-right p{display:none}
  #kosh .k-soon{display:none}
  #kosh h1.k-title{font-size:clamp(40px,11vw,74px)}
  #kosh .k-soc{display:flex;gap:16px;border-top:0}
  #kosh .k-soc li{flex:1;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
  #kosh .k-head .k-tag{display:none}
  #kosh .k-foot .k-clock{display:none}
  #kosh .k-count{left:22px;bottom:24px}
  #kosh .k-words{right:22px;bottom:28px}
}
@media (max-height:620px) and (min-width:1025px){#kosh .k-right p{display:none}}
@media (prefers-reduced-motion:reduce){#kosh .k-grain,#kosh .k-marq-in{animation:none}}
