:root{
  --paper:#F2F1EC; --paper-2:#E8E6DF; --ink:#1D1C1A; --ink-soft:#5E5A53;
  --clay:#D8764C; --clay-deep:#B25631; --shadow:#D9D6CE;
  --hand:"Gaegu","Comic Sans MS","Chalkboard SE",cursive;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pixel:"Silkscreen","Courier New",monospace;
  --appbar-h:56px; --tabbar-h:60px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1C1B19; --paper-2:#262420; --ink:#ECE8E0; --ink-soft:#A8A399;
    --clay:#E0855B; --clay-deep:#F2A67F; --shadow:#34312C;
  }
}
:root[data-theme="dark"]{
  --paper:#1C1B19; --paper-2:#262420; --ink:#ECE8E0; --ink-soft:#A8A399;
  --clay:#E0855B; --clay-deep:#F2A67F; --shadow:#34312C;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:680px; margin:0 auto; padding:28px 20px 60px}

/* ---------- masthead (desktop) ---------- */
.mast{display:flex; align-items:flex-end; gap:14px; margin-bottom:6px}
.mast svg{width:92px; height:92px; flex:none; overflow:visible}
.mast h1{font-family:var(--hand); font-weight:700; font-size:clamp(46px,9vw,64px); line-height:.85; margin:0; letter-spacing:-.5px}
.mast h1 a{color:inherit; text-decoration:none}
.mast .sub{font-family:var(--hand); font-size:22px; color:var(--ink-soft); margin:4px 0 0}
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:18px 0 8px}
.status{font-family:var(--pixel); font-size:11px; color:var(--ink-soft); letter-spacing:.5px; flex:1 1 180px}
.btn{
  position:relative; display:inline-block; font-family:var(--hand); font-size:22px; font-weight:700; color:var(--ink);
  background:transparent; border:0; padding:6px 18px 4px; cursor:pointer; text-decoration:none;
}
.btn::before{content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:12px 9px 13px 8px; filter:url(#boil); background:var(--paper)}
.btn span{position:relative}
.btn:hover::before{background:var(--paper-2)}
.btn:focus-visible{outline:3px dashed var(--clay); outline-offset:4px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 26px}
.chip{font-family:var(--pixel); font-size:11px; letter-spacing:.5px; color:var(--ink); background:transparent; border:2px solid var(--ink); border-radius:999px; padding:5px 12px 4px; cursor:pointer; white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.chip:focus-visible{outline:3px dashed var(--clay); outline-offset:3px}

/* ---------- feed + posts ---------- */
.feed{display:flex; flex-direction:column; gap:48px}
.day{display:flex; flex-direction:column; gap:40px}   /* space between cards */
.day-label{font-family:var(--hand); font-weight:700; font-size:24px; color:var(--ink-soft); text-align:center; margin:8px 0 -8px}
.post{position:relative; padding:14px 22px 22px; transform:translateY(24px); opacity:0; transition:transform .6s cubic-bezier(.2,.9,.3,1.2), opacity .4s}
.post.in{transform:none; opacity:1}
.post[hidden]{display:none}
/* static hand-drawn wobble (no animation: the border never moves) */
.frame{position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:18px 14px 20px 12px; filter:url(#boil); pointer-events:none; background:var(--paper)}
.post > *:not(.frame){position:relative}
.scene{display:block; width:100%; height:auto; overflow:visible; margin:0 0 6px}
.meta{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.tag{font-family:var(--pixel); font-size:11px; background:var(--clay); color:#1D1C1A; padding:3px 8px 2px; letter-spacing:.5px}
.meta time{font-family:var(--pixel); font-size:11px; color:var(--ink-soft)}
.post h2{font-family:var(--hand); font-weight:700; font-size:clamp(28px,5.4vw,36px); line-height:1; margin:6px 0 10px}
.post h2 a{color:inherit; text-decoration:none}
.post p{margin:0 0 14px}
.why{position:relative; padding:14px 16px 4px; margin:18px 0 16px}
.why::before{content:""; position:absolute; inset:0; border:2px dashed var(--ink); border-radius:10px 14px 9px 13px; filter:url(#boil); background:var(--paper-2)}
.why > *{position:relative}
.why-label{position:absolute; top:-12px; left:14px; font-family:var(--hand); font-weight:700; font-size:20px; background:var(--paper); padding:0 8px; color:var(--clay-deep); line-height:1.1}
.why p{margin:4px 0 10px}
.src{font-family:var(--hand); font-weight:700; font-size:21px; color:var(--ink); text-decoration:none; border-bottom:2.5px solid var(--clay)}
.src:hover{color:var(--clay-deep)}
.src:focus-visible{outline:3px dashed var(--clay); outline-offset:3px}
.foot{margin-top:44px; text-align:center; font-family:var(--hand); font-size:20px; color:var(--ink-soft)}

/* ---------- source image inside the card ---------- */
.photo{margin:2px 0 16px}
.photo img{display:block; width:100%; height:auto; border:2.5px solid var(--ink); border-radius:14px 10px 16px 9px; background:var(--paper-2)}
.photo .credit{font-family:var(--pixel); font-size:10px; color:var(--ink-soft); letter-spacing:.4px; margin-top:6px}
.photo .credit a{color:inherit}

/* ---------- svg ink ---------- */
.ink{stroke:var(--ink); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.inkfill{stroke:var(--ink); stroke-width:3; stroke-linejoin:round}
.clayfill{fill:var(--clay)}
.paperfill{fill:var(--paper)}
.inkdot{fill:var(--ink)}
.claystroke{stroke:var(--clay); stroke-width:5; stroke-linecap:round; fill:none}
.shadow{fill:var(--shadow)}
.px{font-family:var(--pixel); fill:var(--clay-deep); font-size:20px}
.pxs{font-family:var(--pixel); fill:var(--ink); font-size:11px}
.handt{font-family:var(--hand); font-weight:700; fill:var(--ink); font-size:22px}
/* brand logos (Simple Icons paths inlined by the pipeline) */
.logo{fill:var(--ink); overflow:visible}
.logo-clay .logo{fill:var(--clay)}
.logo-paper .logo{fill:var(--paper)}

/* pip: idle bob + blink */
.pip-bob{animation:bob 2.4s ease-in-out infinite}
.pip-eyes{transform-box:fill-box; transform-origin:center; animation:blink 4.2s infinite}
@keyframes bob{50%{transform:translateY(-2px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.wave{transform-box:fill-box; transform-origin:0% 100%; animation:wave 1.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
.mast .pip-bob{transform-box:fill-box; transform-origin:50% 100%}

/* draw-in + pops (only run once .in) */
.draw{stroke-dasharray:1; stroke-dashoffset:1}
.in .draw{animation:draw .9s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop,.drop,.rise,.slide,.shrink,.burst{transform-box:fill-box; transform-origin:center}
.pop{opacity:0; transform:scale(0)}
.in .pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{to{opacity:1; transform:scale(1)}}
.burst{opacity:0}
.in .burst{animation:burst .7s ease-out forwards}
@keyframes burst{0%{opacity:1; transform:scale(.2)}70%{opacity:1}100%{opacity:0; transform:scale(1.25)}}
.drop{opacity:0}
.in .drop{animation:drop .8s cubic-bezier(.4,0,.6,1) forwards}
@keyframes drop{0%{opacity:1; transform:translateY(-150px) rotate(-30deg)}60%{transform:translateY(0) rotate(8deg)}78%{transform:translateY(-14px) rotate(-3deg)}100%{opacity:1; transform:translateY(0) rotate(-6deg)}}
.hop{transform-box:fill-box; transform-origin:50% 100%}
.in .hop{animation:hop .6s ease-out forwards}
@keyframes hop{0%{transform:none}25%{transform:scale(1.1,.85)}55%{transform:translateY(-26px) scale(.95,1.08)}85%{transform:scale(1.08,.9)}100%{transform:none}}
.rise{transform:translateY(95px)}
.in .rise{animation:rise 1.1s cubic-bezier(.2,.8,.3,1.15) forwards}
@keyframes rise{to{transform:translateY(0)}}
.shrink{transform-origin:50% 100%}
.in .shrink{animation:shrink .35s ease-in forwards}
@keyframes shrink{to{transform:scale(0); opacity:0}}
.slide{transform:translateX(260px)}
.in .slide{animation:slide 1s cubic-bezier(.3,.9,.4,1.1) forwards}
@keyframes slide{to{transform:translateX(0)}}
.sway{transform-box:fill-box; transform-origin:50% 100%; animation:sway 3s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(6deg)}}
.twinkle{animation:tw 1.8s ease-in-out infinite}
@keyframes tw{50%{opacity:.35}}

/* ---------- nav / more ---------- */
.nav{display:flex; gap:12px; align-items:center; font-family:var(--hand); font-size:20px}
.nav a{color:var(--ink); text-decoration:none; border-bottom:2.5px solid var(--clay)}
.nav a:hover{color:var(--clay-deep)}
.more{display:flex; justify-content:center; margin:0}
.htmx-request .btn span::after{content:"…"}
.empty{font-family:var(--hand); font-size:24px; text-align:center; color:var(--ink-soft); padding:40px 0}

/* ---------- app shell: hidden on desktop ---------- */
.appbar,.tabbar{display:none}

/* ================= phone: looks and behaves like an app ================= */
@media (max-width:640px){
  body{font-size:16px; line-height:1.55}
  .wrap{padding:0 14px calc(var(--tabbar-h) + var(--safe-bottom) + 28px)}

  /* top app bar */
  .appbar{
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20;
    height:calc(var(--appbar-h) + var(--safe-top)); padding:var(--safe-top) 16px 0;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:2px solid var(--ink);
  }
  .appbar .brand{display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; min-height:44px}
  .appbar .brand svg{width:34px; height:38px; overflow:visible}
  .appbar .brand-name{font-family:var(--hand); font-weight:700; font-size:28px; line-height:1; letter-spacing:-.3px}
  .appbar .appbar-date{margin-left:auto; font-family:var(--pixel); font-size:10px; color:var(--ink-soft); letter-spacing:.4px}

  /* the desktop masthead gives way to the app bar */
  .mast{display:none}
  .bar{margin:14px 2px 4px}
  .bar .nav{display:none}
  .status{font-size:11px}

  /* category chips: one swipeable row that sticks under the app bar */
  .chips{
    position:sticky; top:calc(var(--appbar-h) + var(--safe-top)); z-index:15;
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    margin:0 -14px 14px; padding:10px 14px; gap:8px;
    background:var(--paper); scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none; scroll-snap-align:start; min-height:34px; padding:8px 14px 6px; font-size:11px}

  /* cards: clean app cards with a doodle "sticker" shadow; no filters for smooth scrolling */
  .feed{gap:28px}
  .day{gap:18px}
  .post{padding:10px 14px 18px}
  .frame{filter:none; border-width:2px; border-radius:20px; box-shadow:4px 4px 0 var(--shadow)}
  .why::before,.btn::before,.scene > g{filter:none}
  .post h2{font-size:26px; line-height:1.05; margin:4px 0 8px}
  .why{padding:14px 14px 4px; margin:18px 0 14px}
  .why-label{font-size:18px}
  .src{font-size:20px; display:inline-block; padding:6px 0 2px}
  .scene{margin:0 -4px 4px; width:calc(100% + 8px)}
  .scene .pxs{font-size:14px}
  .scene .px{font-size:22px}
  .photo img{border-width:2px; border-radius:14px}

  .more .btn{display:block; width:100%; text-align:center; padding:12px 18px 10px}
  .foot{font-size:18px; margin-top:32px}

  /* bottom tab bar */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    height:calc(var(--tabbar-h) + var(--safe-bottom)); padding:0 8px var(--safe-bottom);
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:2px solid var(--ink);
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-family:var(--hand); font-weight:700; font-size:16px; color:var(--ink-soft); text-decoration:none;
    background:none; border:0; padding:6px 0 0; min-height:44px; cursor:pointer;
  }
  .tab svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
  .tab.is-active{color:var(--ink)}
  .tab.is-active svg{stroke:var(--clay-deep)}
  .tab:active{transform:scale(.94)}
}

/* installed as an app (standalone): no browser chrome, so a touch more top room */
@media (display-mode:standalone) and (max-width:640px){
  .bar{margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .post{transform:none; opacity:1}
  .draw{stroke-dashoffset:0}
  .pop,.drop,.burst{opacity:1; transform:none}
  .burst{opacity:0}
  .rise,.slide{transform:none}
  .shrink{transform:scale(0)}
}

/* ---------- Arabic / RTL (dormant while ARABIC_ENABLED is off) ---------- */
:root[lang="ar"]{
  --hand:"Aref Ruqaa","Gaegu",serif;
  --body:"IBM Plex Sans Arabic","Atkinson Hyperlegible",system-ui,sans-serif;
}
:root[lang="ar"] body{font-size:17.5px; line-height:1.8}
:root[lang="ar"] .post h2{line-height:1.35; font-size:clamp(26px,5vw,32px)}
:root[lang="ar"] .mast h1,:root[lang="ar"] .brand-name{font-family:"Gaegu","Comic Sans MS",cursive; line-height:.85}
:root[lang="ar"] .status{font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:0}
[dir="rtl"] .why-label{left:auto; right:14px}
[dir="rtl"] .appbar .appbar-date{margin-left:0; margin-right:auto}
.tag,.chip{direction:ltr; unicode-bidi:isolate}