/* Kanguinn home + الورشة · Paper Expedition. Calm, plain ground; the patterns live inside the doors and in the workshop. */
@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; --trail:#C3B9A6; --shadow:rgba(19,32,46,.18); --pattern:rgba(160,76,20,.07);
  --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;--trail:#3A4C5D;--shadow:rgba(0,0,0,.5);--pattern:rgba(238,155,47,.06);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1822;--card:#18242F;--fg:#EEE9DF;--muted:#A7B1BA;--line:#2A3A4A;--tint:#24323F;--gold-text:#F2B566;--trail:#3A4C5D;--shadow:rgba(0,0,0,.5);--pattern:rgba(238,155,47,.06);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;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 > main{flex:1}
/* only الورشة gets the waddle ground */
body.workshop::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='96' height='96'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cg transform='translate(9 81) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(39 63) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(57 33) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(87 15) rotate(45)'%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/96px 96px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cg transform='translate(9 81) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(39 63) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(57 33) rotate(45)'%3E%3Cpath d='M0 0L-4 -7M0 0L0 -8.5M0 0L4 -7M0 0L0 3'/%3E%3C/g%3E%3Cg transform='translate(87 15) rotate(45)'%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/96px 96px 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}
[hidden]{display:none!important}
: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:#13202E;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;transition:color .3s,transform .5s var(--settle)}
.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}
.brand:hover .mark{color:var(--gold);transform:translateY(-3px) rotate(-5deg)}
@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,.nav a[aria-current="page"]{background:var(--tint);color:var(--fg)}
.acts{display:flex;align-items:center;gap:8px}
.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),border-color .2s}
.icon-btn:hover{border-color:var(--fg)}
.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}}
/* account: a quiet key for the writer, a greeting once signed in */
#account{position:relative;display:flex}
.acc-chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:var(--r-s);font:700 14px var(--ar);cursor:pointer}
.acc-chip i{width:30px;height:30px;border-radius:9px 4px 10px 5px;background:var(--gold);color:#13202E;display:grid;place-items:center;font-style:normal;font-size:15px}
.acc-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:200px;padding:6px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-s);box-shadow:0 18px 40px -20px var(--shadow);display:flex;flex-direction:column;animation:menuIn .22s var(--glide)}
.acc-menu a,.acc-menu button{display:block;text-align:start;padding:10px 12px;border:0;background:none;color:var(--fg);font:700 14px var(--ar);text-decoration:none;border-radius:8px 3px 9px 4px;cursor:pointer}
.acc-menu a:hover,.acc-menu button:hover{background:var(--tint)}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}}

/* hero */
.hero{position:relative;padding-block:64px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero[data-align="center"]{align-items:center;text-align:center}
.hero[data-align="end"]{align-items:flex-end;text-align:left}
.hero .lockup{width:min(420px,78vw);height:auto;color:var(--fg);animation:rise .6s var(--glide) both;transition:color .3s}
.hero .lockup:hover{color:var(--gold-text)}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;animation:rise .6s var(--glide) .08s both}
.hero .lede{max-width:46ch;font-size:20px;color:var(--muted);animation:rise .6s var(--glide) .16s both;white-space:pre-line}
.hero .kicker{font-weight:700;color:var(--gold-text);font-size:15px}
.wander{display:block;width:100%;height:auto;max-height:60px;color:var(--trail);margin-block:6px 26px;direction:ltr}
.wander g g{opacity:0;animation:print .45s ease-out forwards}
.wander g g:nth-child(1){animation-delay:0.40s}
.wander g g:nth-child(2){animation-delay:0.49s}
.wander g g:nth-child(3){animation-delay:0.58s}
.wander g g:nth-child(4){animation-delay:0.67s}
.wander g g:nth-child(5){animation-delay:0.76s}
.wander g g:nth-child(6){animation-delay:0.85s}
.wander g g:nth-child(7){animation-delay:0.94s}
.wander g g:nth-child(8){animation-delay:1.03s}
.wander g g:nth-child(9){animation-delay:1.12s}
.wander g g:nth-child(10){animation-delay:1.21s}
.wander g g:nth-child(11){animation-delay:1.30s}
.wander g g:nth-child(12){animation-delay:1.39s}
.wander g g:nth-child(13){animation-delay:1.48s}
.wander g g:nth-child(14){animation-delay:1.57s}
.wander g g:nth-child(15){animation-delay:1.66s}
.wander g g:nth-child(16){animation-delay:1.75s}
.wander g g:nth-child(17){animation-delay:1.84s}
.wander g g:nth-child(18){animation-delay:1.93s}
.wander g g:nth-child(19){animation-delay:2.02s}
.wander g g:nth-child(20){animation-delay:2.11s}
.wander g g:nth-child(21){animation-delay:2.20s}
.wander g g:nth-child(22){animation-delay:2.29s}
@keyframes print{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-block:0 40px}
@media (max-width:720px){.doors{grid-template-columns:1fr}}
.door,.tool{position:relative;display:flex;flex-direction:column;gap:12px;min-height:330px;padding:28px;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:hover,a.tool:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 26px 44px -26px var(--shadow)}
.door:active,a.tool:active{transform:translateY(-2px) scale(.99)}
.door h2,.tool h2{font-size:28px;font-weight:700}
.door p,.tool p{font-size:16px;opacity:.82;max-width:38ch}
.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,.tool:hover .door-go i{transform:translateX(-5px)}
.door::after,.tool.studio::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}
.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,.tool.studio{background:linear-gradient(150deg,#1B2A37,#0F1822);color:#EEE9DF;border:1.5px solid #2A3A4A}
.door.studio .door-tag,.tool.studio .door-tag{background:#EE9B2F;color:#13202E}
.door.studio::after,.tool.studio::after{background:#EE9B2F;opacity:.1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .door.journal{background:#E9E3D6;border-color:#E9E3D6}:root:not([data-theme="light"]) .door.studio,:root:not([data-theme="light"]) .tool.studio{border-color:#3A4C5D}}
:root[data-theme="dark"] .door.journal{background:#E9E3D6;border-color:#E9E3D6}
:root[data-theme="dark"] .door.studio,:root[data-theme="dark"] .tool.studio{border-color:#3A4C5D}
.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,.tool.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 .lt{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px 4px 12px 5px;background:#F6F3EC;font-size:15px}
.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}

/* الورشة */
.shop-hero{padding-block:56px 30px}
.tools{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;padding-bottom:56px}
@media (max-width:820px){.tools{grid-template-columns:1fr}}
.tool.studio{flex-direction:row;align-items:center;gap:28px}
.tool.studio .mini-card{flex:0 0 220px;align-self:center}
.tool-text{display:flex;flex-direction:column;gap:12px;min-height:250px}
@media (max-width:620px){.tool.studio{flex-direction:column;align-items:stretch}.tool.studio .mini-card{flex:none}.tool-text{min-height:0}}
.soon-tool{border:1.5px dashed var(--line);background:color-mix(in srgb,var(--card) 60%,transparent);min-height:0;justify-content:center;animation-delay:.08s}
.soon-tool .chip{align-self:flex-start}

/* 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;border-top:1px solid var(--line)}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:18px 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)}

/* 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)}

@media (max-width:620px){
  .top .wrap{gap:10px}
  .nav a{padding:8px 8px;font-size:14px}
  .brand b{display:none}
  .acc-chip span{display:none}.acc-chip{padding:0 6px}
  .hero{padding-block:40px 18px}
  .door,.tool{min-height:0;padding:24px}
}
@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}
}