/* Kanguinn home · Paper Expedition. The front door to the Journal, the Studio and Twitch. */
@font-face{font-family:'Onest';src:url('/fonts/onest.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --bg:#F6F3EC; --card:#FFFDF8; --fg:#13202E; --muted:#4A5866; --line:#D9D3C7; --tint:#DCE7EA;
  --gold:#EE9B2F; --gold-text:#A04C14; --glacier:#9CC9DD; --lichen:#7C8F72; --night:#0F1822; --night-card:#18242F; --snow:#EEE9DF;
  --pattern:rgba(19,32,46,.05); --trail:#C3B9A6; --shadow:rgba(19,32,46,.18);
  --en:'Onest',ui-sans-serif,system-ui,sans-serif; --ar:'Thmanyah Sans','Noto Naskh Arabic',Tahoma,sans-serif;
  --glide:cubic-bezier(.22,1,.36,1); --settle:cubic-bezier(.34,1.4,.64,1);
  --r-s:12px 5px 14px 6px; --r-l:34px 12px 40px 14px/14px 36px 12px 34px; --r-l2:12px 36px 14px 40px/36px 14px 34px 12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1822;--card:#18242F;--fg:#EEE9DF;--muted:#A7B1BA;--line:#2A3A4A;--tint:#24323F;--gold-text:#F2B566;--pattern:rgba(238,233,223,.04);--trail:#2E4152;--shadow:rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1822;--card:#18242F;--fg:#EEE9DF;--muted:#A7B1BA;--line:#2A3A4A;--tint:#24323F;--gold-text:#F2B566;--pattern:rgba(238,233,223,.04);--trail:#2E4152;--shadow:rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;position:relative;background:var(--bg);color:var(--fg);font:17px/1.65 var(--ar);overflow-x:hidden;transition:background-color .36s ease,color .36s ease}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--pattern);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(18 120) rotate(40)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(44 98) rotate(55)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(84 70) rotate(35)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(110 44) rotate(50)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(18 120) rotate(40)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(44 98) rotate(55)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(84 70) rotate(35)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(110 44) rotate(50)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px repeat}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
h1,h2{margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
a{color:inherit}
:lang(en){font-family:var(--en)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--gold);color:var(--fg);padding:10px 14px;border-radius:var(--r-s);font-weight:700;transition:top .24s var(--glide)}
.skip:focus{top:12px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px}
.mark{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mark path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.65,0,.35,1) .1s forwards}
.mark circle{fill:currentColor;stroke:none}
@keyframes draw{to{stroke-dashoffset:0}}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{padding:8px 12px;border-radius:10px 4px 12px 5px;text-decoration:none;font-weight:700;font-size:15px;color:var(--muted);transition:background-color .2s,color .2s}
.nav a:hover{background:var(--tint);color:var(--fg)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:var(--r-s);cursor:pointer;transition:transform .3s var(--settle)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#themeBtn .moon{display:none}
:root[data-theme="dark"] #themeBtn .sun{display:none}:root[data-theme="dark"] #themeBtn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #themeBtn .sun{display:none}:root:not([data-theme="light"]) #themeBtn .moon{display:block}}

/* hero */
.hero{position:relative;padding-block:72px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero .lockup{width:min(420px,78vw);height:auto;color:var(--fg);animation:rise .6s var(--glide) both}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;animation:rise .6s var(--glide) .08s both}
.hero .lede{max-width:44ch;font-size:20px;color:var(--muted);animation:rise .6s var(--glide) .16s both}
.wander{position:absolute;inset-inline-end:-10px;top:30px;width:min(520px,60vw);height:auto;color:var(--trail);pointer-events:none;direction:ltr}
.wander g g{opacity:0;animation:print .5s ease-out forwards}
.wander g g:nth-child(1){animation-delay:0.50s}
.wander g g:nth-child(2){animation-delay:0.64s}
.wander g g:nth-child(3){animation-delay:0.78s}
.wander g g:nth-child(4){animation-delay:0.92s}
.wander g g:nth-child(5){animation-delay:1.06s}
.wander g g:nth-child(6){animation-delay:1.20s}
.wander g g:nth-child(7){animation-delay:1.34s}
.wander g g:nth-child(8){animation-delay:1.48s}
.wander g g:nth-child(9){animation-delay:1.62s}
.wander g g:nth-child(10){animation-delay:1.76s}
.wander g g:nth-child(11){animation-delay:1.90s}
.wander g g:nth-child(12){animation-delay:2.04s}
@keyframes print{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* doors */
.doors{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;padding-block:12px 40px}
@media (max-width:940px){.doors{grid-template-columns:1fr 1fr}.door.journal{grid-column:1/-1}}
@media (max-width:620px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;gap:12px;min-height:330px;padding:26px;text-decoration:none;border-radius:var(--r-l);overflow:hidden;isolation:isolate;transition:transform .4s var(--settle),box-shadow .3s var(--glide);animation:rise .6s var(--glide) both}
.door:nth-child(2){border-radius:var(--r-l2);animation-delay:.08s}
.door:nth-child(3){animation-delay:.16s}
.door:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 26px 44px -26px var(--shadow)}
.door:active{transform:translateY(-2px) scale(.99)}
.door h2{font-size:27px;font-weight:700}
.door p{font-size:16px;opacity:.82;max-width:34ch}
.door-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:13px;font-weight:700;padding:4px 11px;border-radius:8px 3px 9px 4px}
.door-go{margin-top:auto;align-self:flex-start;font-weight:700;display:inline-flex;gap:8px;align-items:center}
.door-go i{font-style:normal;transition:transform .3s var(--settle)}
.door:hover .door-go i{transform:translateX(-5px)}
.door.twitch:hover .door-go i{transform:translate(-3px,-3px)}
.door::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.12;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(18 120) rotate(40)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(44 98) rotate(55)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(84 70) rotate(35)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(110 44) rotate(50)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(18 120) rotate(40)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(44 98) rotate(55)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(84 70) rotate(35)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(110 44) rotate(50)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px repeat;background:currentColor}
/* each door previews its own room */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .door.journal{background:#E9E3D6;border-color:#E9E3D6}:root:not([data-theme="light"]) .door.studio{border-color:#3A4C5D}}
:root[data-theme="dark"] .door.journal{background:#E9E3D6;border-color:#E9E3D6}
:root[data-theme="dark"] .door.studio{border-color:#3A4C5D}
/* journal door */
.door.journal{background:#FFFDF8;color:#13202E;border:1.5px solid #D9D3C7}
.door.journal::after{opacity:.06}
.door.journal .door-tag{background:#DCE7EA;color:#13202E}
.door.studio{background:linear-gradient(150deg,#1B2A37,#0F1822);color:#EEE9DF;border:1.5px solid #2A3A4A}
.door.studio .door-tag{background:#EE9B2F;color:#13202E}
.door.studio::after{background:#EE9B2F;opacity:.1}
.door.twitch{background:linear-gradient(160deg,#9CC9DD,#7FB0C6);color:#13202E}
.door.twitch .door-tag{background:#13202E;color:#EEE9DF}
.live-dot{width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:live 1.8s ease-out infinite}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.handle{font-weight:700;font-size:18px;direction:ltr;align-self:flex-start}
.mini-card{align-self:stretch;margin-top:4px;padding:18px 18px 14px;border-radius:18px 6px 20px 8px;background:linear-gradient(135deg,#F0A03A,#E58A24);color:#13202E;font:700 18px/1.3 var(--en);direction:ltr;text-align:left;display:flex;flex-direction:column;gap:12px;transform:rotate(-2deg);box-shadow:0 18px 30px -20px rgba(0,0,0,.6);transition:transform .45s var(--settle)}
.door.studio:hover .mini-card{transform:rotate(1.5deg) translateY(-3px)}
.mini-card small{font-size:11px;opacity:.75;font-weight:700}
.latest{display:flex;flex-direction:column;gap:6px}
.latest a,.latest span{font-size:15px}
.latest .lt{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px 4px 12px 5px;background:#F6F3EC}
.latest .lt b{font-weight:700;unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest .lt small{color:#4A5866;flex:none;font-size:12px}

/* soon */
.soon{padding-block:8px 56px;display:flex;flex-direction:column;gap:14px}
.soon h2{font-size:20px;color:var(--muted)}
.soon-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border:1.5px dashed var(--line);border-radius:var(--r-s);color:var(--muted);font-weight:700;font-size:15px}

/* footer */
.foot{color:var(--muted);font-size:14px}
.trail{display:block;width:100%;height:40px;color:var(--trail)}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:12px calc(env(safe-area-inset-bottom,0px) + 26px)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--fg)}

@media (max-width:620px){
  .nav a{padding:8px 8px;font-size:14px}
  .brand b{display:none}
  .hero{padding-block:40px 24px}
  .wander{opacity:.6}
  .door{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.12s!important}
  .mark path{stroke-dashoffset:0}
  .wander g g{opacity:1}
}

/* 404 */
.lost{padding-block:96px 120px}
.chip.go{text-decoration:none;border-style:solid;color:var(--fg);transition:border-color .2s,transform .3s var(--settle)}
.chip.go:hover{border-color:var(--fg);transform:translateY(-2px)}