@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/jbmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/jbmono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --bg:#0a0710;
  --bg-2:#0d0a1a;
  --bg-3:#13102a;
  --fg:#ececf2;
  --muted:#7c7990;
  --muted-2:#a09dba;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --accent:#a78bfa;
  --accent-2:#7c3aed;
  --accent-glow:#a78bfa22;
  --danger:#ef4444;
  --grid:48px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:14px;
  --radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* overflow-x must be `clip`, not `hidden`. `hidden` makes html/body a scroll
   container, and that silently kills `position:sticky` on every descendant:
   the Work preview panel and the Journal post list both just scrolled away.
   `clip` stops the same sideways overflow without creating a scrollport.
   The `hidden` line stays first as the fallback for Safari < 16, which does
   not know `clip` and drops that declaration. */
html{background:var(--bg);color-scheme:dark;overflow-x:hidden;overflow-x:clip;max-width:100vw}
body{max-width:100vw}
body{
  font-family:var(--mono);color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;overflow-x:hidden;overflow-x:clip;
  background-image:
    linear-gradient(rgba(167,139,250,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,.025) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
}
img,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0}
.muted{color:var(--muted)}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;clip:auto;margin:0;background:var(--accent);color:#000;padding:.5rem 1rem;z-index:99}
::selection{background:var(--accent);color:#0a0710}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ===== Loader ===== */
.loader{position:fixed;inset:0 0 auto 0;height:2px;z-index:90;pointer-events:none}
.loader .bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  z-index:110;padding:.7rem 1.1rem;border-radius:999px;
  background:rgba(13,10,26,.95);border:1px solid var(--accent);color:var(--fg);
  font-size:.78rem;letter-spacing:.04em;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.8),0 0 0 1px var(--accent-glow);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(10px);
}
.toast[aria-hidden="false"]{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Top bar ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:1rem;
  padding:.85rem 1.5rem;
  background:rgba(10,7,16,.75);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.brand{
  display:inline-flex;align-items:center;
  font-size:.86rem;font-weight:600;letter-spacing:-.01em;
  padding:.4rem .6rem;border-radius:var(--radius-sm);
  transition:background .2s ease,color .2s ease;
}
.brand:hover{background:rgba(255,255,255,.04);color:var(--accent)}

.navlinks{display:flex;justify-content:center;gap:.1rem;font-size:.78rem;padding:0;background:transparent;border:0}
.navlink{
  position:relative;display:inline-flex;align-items:center;
  padding:.45rem .95rem;color:var(--muted-2);border-radius:999px;
  transition:color .25s ease,background .25s ease;
}
.navlink:hover{color:var(--fg)}
.navlink.active{background:var(--fg);color:#0a0710}

.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:var(--radius-sm)}
.menu-btn:hover{border-color:var(--fg)}
.menu-btn span{display:block;width:16px;height:1px;background:var(--fg);transition:transform .3s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:860px){
  .navlinks{display:none}.menu-btn{display:flex}
  .topbar{grid-template-columns:1fr auto;gap:.5rem}
  .btn.pill{display:none}
  /* hide desktop language dropdown on mobile — use mobile-nav buttons */
  .lang-switch{display:none}
}

.mobile-nav{
  position:fixed;inset:64px 0 auto 0;z-index:29;
  background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;padding:1rem 1.5rem 1.5rem;
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.7,0,.2,1);pointer-events:none;
}
.mobile-nav.open{transform:translateY(0);pointer-events:auto}
.mobile-nav a{padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--fg)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a.active{color:var(--accent)}

/* ===== Language switcher ===== */
.lang-switch{position:relative;display:inline-flex}
.lang-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:.45rem .65rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--muted-2);transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.lang-btn:hover{color:var(--fg);border-color:var(--line-strong);background:rgba(255,255,255,.04)}
.lang-btn[aria-expanded="true"]{color:var(--fg);border-color:var(--accent)}
.lang-menu{
  position:absolute;top:calc(100% + .4rem);inset-inline-end:0;z-index:35;
  margin:0;padding:.3rem;list-style:none;min-width:140px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
}
.lang-menu[hidden]{display:none}
.lang-menu li{display:block}
.lang-menu button{
  display:block;width:100%;text-align:start;
  font-size:.78rem;padding:.5rem .65rem;border-radius:6px;color:var(--fg);
}
.lang-menu button:hover{background:rgba(167,139,250,.12);color:var(--accent)}
.mobile-lang{display:flex;gap:.4rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.mobile-lang button{
  flex:1;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  padding:.55rem .4rem;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted-2);
}
.mobile-lang button.active{background:var(--fg);color:#0a0710;border-color:var(--fg)}
@media (max-width:860px){.lang-switch{display:none!important}}

/* RTL adjustments */
html[dir="rtl"]{}
html[dir="rtl"] body{font-family:var(--mono)}
/* Keep the top bar in LTR order under AR: brand left, menu button right */
html[dir="rtl"] .topbar{direction:ltr}
/* Section rail: mirror it to the left under AR — the page text is right-aligned
   there, so a right-pinned rail sits on top of the headings and lede.
   Keep the rail's own direction LTR: the dashes are left-anchored and grow
   rightward (transform-origin:left), so RTL would hug the wrong edge. */
html[dir="rtl"] .post-rail{direction:ltr;right:auto;left:14px}
html[dir="rtl"] .topbar .navlink,
html[dir="rtl"] .topbar .brand,
html[dir="rtl"] .topbar .btn.pill{unicode-bidi:plaintext}
html[dir="rtl"] .hero-cta svg,
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
html[dir="rtl"] .ch-name,
html[dir="rtl"] .ch-meta,
html[dir="rtl"] .contact-list dd,
html[dir="rtl"] .contact-list dt{text-align:right}
html[dir="rtl"] .nf-actions,
html[dir="rtl"] .hero-cta{direction:rtl}
/* Keep English-only content visually LTR under RTL chrome */
html[dir="rtl"] .stack-marquee,
html[dir="rtl"] .stack-track,
html[dir="rtl"] .grid,
html[dir="rtl"] .card,
html[dir="rtl"] .work-aside,
html[dir="rtl"] .preview,
html[dir="rtl"] .preview-body,
html[dir="rtl"] .journal-list,
html[dir="rtl"] .journal-view{direction:ltr;text-align:left}
/* Search inputs: keep RTL so Arabic placeholder/typing aligns right (flex parent auto-swaps icon to right).
   Filter chips (language names, English) join them: the row is a flex-wrap packed to flex-start, and under
   the old forced-ltr rule that meant flush against the left edge — stranded under an otherwise right-aligned
   RTL page. RTL direction packs the row to the right instead; the chip labels themselves are plain Latin text
   so the glyphs don't mirror, only the packing edge and chip order do. */
html[dir="rtl"] .work-search,
html[dir="rtl"] .work-filters,
html[dir="rtl"] .journal-search{direction:rtl}
html[dir="rtl"] .work-search input,
html[dir="rtl"] .journal-search input{direction:rtl;text-align:right}
/* Mixed content: per-element auto direction (English URL vs Arabic label) */
html[dir="rtl"] .contact-list dd,
html[dir="rtl"] .post-preview,
html[dir="rtl"] .preview-desc,
html[dir="rtl"] .preview-readme,
html[dir="rtl"] .about-card p,
html[dir="rtl"] .page-lede,
html[dir="rtl"] .lede,
html[dir="rtl"] .currently,
html[dir="rtl"] .hero-meta,
html[dir="rtl"] .ch-meta{unicode-bidi:plaintext}
/* Journal page: post bodies are predominantly English markdown; keep LTR even under AR chrome */
/* (journal-search direction handled above for RTL) */
html[dir="rtl"] #page-journal,
html[dir="rtl"] .journal-toolbar,
html[dir="rtl"] .journal-aside{direction:ltr;text-align:left}
/* But keep the journal page-head (translated title + lede) RTL */
html[dir="rtl"] #page-journal > .page-head{direction:rtl;text-align:right}
html[dir="rtl"] #page-journal > .page-head .page-lede{unicode-bidi:plaintext}
/* The aside (search + post tree) is a grid track, not just text: it inherited
   ltr from #page-journal above, which pinned it to the grid's first (left)
   track in every language. Flip the grid itself back to rtl so the track
   order mirrors under AR and the aside lands on the right, matching the
   page. .journal-aside keeps its own forced-ltr text alignment regardless,
   since that's set directly on it, not inherited from this grid. */
html[dir="rtl"] .journal-layout{direction:rtl}

/* ===== Page system ===== */
.page{display:none;min-height:60vh;padding-top:80px}
.page.active{display:block}
.page-head{max-width:1280px;margin:0 auto;padding:5rem 1.5rem 3rem}
.h1{font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;letter-spacing:-.045em;font-weight:600;margin:0 0 1rem}
.h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-lede{max-width:60ch;color:var(--muted-2);font-size:.95rem;line-height:1.65;margin:.5rem 0 0}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.2rem;border:1px solid var(--line-strong);
  border-radius:999px;font-size:.84rem;font-weight:500;letter-spacing:.02em;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .35s cubic-bezier(.7,0,.2,1),box-shadow .3s ease;
  will-change:transform;position:relative;overflow:hidden;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#fff;border-color:transparent;
}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.03);color:var(--fg)}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:var(--fg)}
.btn.pill{padding:.55rem 1rem;font-size:.78rem;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-color:transparent}
.btn.pill:hover{filter:brightness(1.08)}
.btn.pill .dot-live{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:pulse 1.6s ease-in-out infinite}
.btn.lg{padding:1rem 1.5rem;font-size:.95rem}
.btn.sm{padding:.55rem .85rem;font-size:.76rem}
.btn.danger{background:transparent;color:var(--danger);border-color:rgba(239,68,68,.3)}
.btn.danger:hover{background:rgba(239,68,68,.1);border-color:var(--danger)}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:var(--muted-2);transition:color .2s ease,border-color .2s ease}
.icon-btn:hover{color:var(--fg);border-color:var(--fg)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== Hero ===== */
.hero{position:relative;min-height:auto;display:grid;align-content:center;overflow:hidden;isolation:isolate;padding-bottom:2rem}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg .orb{position:absolute;width:55vw;height:55vw;max-width:800px;max-height:800px;border-radius:50%;filter:blur(100px);opacity:.22;animation:drift 18s ease-in-out infinite alternate}
.hero-bg .orb-a{background:radial-gradient(circle,var(--accent) 0%,transparent 65%);top:-20%;left:-10%}
.hero-bg .orb-b{background:radial-gradient(circle,var(--accent-2) 0%,transparent 65%);bottom:-25%;right:-15%;animation-delay:-9s}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(60px,40px)}}
.hero-bg .grid-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,transparent 0%,var(--bg) 70%)}
.hero-inner{position:relative;max-width:1280px;width:100%;padding:2rem 1.5rem 2.5rem;margin:0 auto}
.hero-meta{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted-2);margin:0 0 1.5rem;padding:0;border:0;background:transparent;letter-spacing:0}
.hero-meta .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}
.display{font-family:var(--mono);font-size:clamp(1.8rem,5vw,4rem);line-height:1.02;letter-spacing:-.045em;font-weight:600;margin:0 0 1.5rem}
.display em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.display .line{display:block;overflow:hidden;padding-bottom:.05em}
.display .line > span{display:inline-block;will-change:transform}
.display [data-split]{display:inline-block}
.lede{max-width:58ch;font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.65;color:var(--muted-2);margin:0 0 2.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.stack-chips{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.stack-chips li{font-size:.7rem;letter-spacing:.04em;padding:.3rem .65rem;border:1px solid var(--line);border-radius:6px;color:var(--muted-2);background:rgba(255,255,255,.02)}
.currently{font-size:.78rem;color:var(--muted-2);margin:0 0 1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;line-height:1.6}
.currently a{color:var(--accent);border-bottom:1px solid var(--accent)}
.kbd{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .45rem;border:1px solid var(--line);border-radius:4px;color:var(--accent);background:rgba(167,139,250,.06)}

.hero-scroll{display:none}
.hero-scroll svg{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ===== Stack marquee (full bleed, black) ===== */
.stack-marquee{
  position:relative;width:100%;
  background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:1.2rem 0;
}
.stack-marquee::before,.stack-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.stack-marquee::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.stack-marquee::after{right:0;background:linear-gradient(-90deg,#000,transparent)}
.stack-track{display:flex;flex-wrap:nowrap;gap:3rem;width:max-content;will-change:transform}
.stack-track .stack-item{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.86rem;color:var(--muted-2);letter-spacing:.02em;white-space:nowrap;
}
.stack-track .stack-item img{width:20px;height:20px;display:block;flex:none}

/* ===== Sections ===== */
.section{max-width:1280px;margin:0 auto;padding:7rem 1.5rem}
@media (max-width:760px){.section{padding:4rem 1.25rem}}
.kicker{display:inline-block;font-size:.7rem;letter-spacing:.22em;color:var(--muted);margin-bottom:1.2rem}
.h2{font-size:clamp(1.8rem,4.5vw,3.6rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 1rem;font-weight:600}
.h2 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.ulink{color:var(--fg);border-bottom:1px solid var(--accent);transition:color .2s ease}
.ulink:hover{color:var(--accent)}

/* ===== About ===== */
.about-h{max-width:40ch;font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:500;line-height:1.35;letter-spacing:-.02em;margin-bottom:3rem}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.about-card{position:relative;padding:2rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));transition:border-color .3s ease,transform .3s ease,background .3s ease}
.about-card:hover{border-color:var(--accent);transform:translateY(-4px);background:linear-gradient(180deg,rgba(167,139,250,.06),rgba(255,255,255,0))}
.about-card .card-idx{font-size:.66rem;color:var(--muted);letter-spacing:.1em;margin-bottom:1.5rem;display:block}
.about-card h3{font-size:1.05rem;letter-spacing:-.01em;margin:0 0 .8rem;font-weight:600}
.about-card p{margin:0;font-size:.86rem;line-height:1.65;color:var(--muted-2)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}

/* ===== CTA band ===== */
.cta-band{max-width:1280px;margin:2rem auto 6rem;padding:5rem 1.5rem;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(ellipse at center,rgba(167,139,250,.08) 0%,transparent 70%)}
.cta-band h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;font-weight:600;margin:0 0 2rem}
.cta-band em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Work — uniform 3-col grid ===== */
.work-search{
  max-width:1280px;margin:0 auto 1rem;padding:0 1.5rem;
  display:flex;align-items:center;gap:.5rem;
}
.work-search svg{flex:none;color:var(--muted)}
.work-search input{
  flex:1;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;
  padding:.55rem .8rem;color:var(--fg);outline:0;
  font:500 .82rem/1 var(--mono);letter-spacing:.02em;
  transition:border-color .15s ease;
}
.work-search:focus-within input{border-color:var(--accent)}
.work-search input::placeholder{color:var(--muted);opacity:.7}
.work-search input::-webkit-search-cancel-button{appearance:none}
.work-filters{
  max-width:1280px;margin:0 auto 2rem;padding:0 1.5rem;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.work-filters .chip{padding:.45rem .95rem;font-size:.74rem;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;color:var(--muted-2);transition:all .2s ease}
.work-filters .chip:hover{color:var(--fg);border-color:var(--line-strong)}
.work-filters .chip.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-color:transparent;box-shadow:0 4px 14px -2px var(--accent-glow)}

.work-layout{
  max-width:1280px;margin:0 auto;padding:0 1.5rem;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.5rem;align-items:start;
}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-width:0}
.work-aside{position:sticky;top:88px;align-self:start}
@media (max-width:1000px){
  .work-layout{grid-template-columns:1fr}
  .work-aside{position:static}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-aside{display:none}
  .preview.open ~ *,.preview.open{}
  .work-aside.open{display:block;position:fixed;inset:0;z-index:80;margin:0;padding:0;background:rgba(5,3,10,.5);backdrop-filter:blur(4px)}
  .work-aside.open .preview{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;width:100%;border-radius:18px 18px 0 0;animation:sheet-up .28s cubic-bezier(.2,.7,.3,1)}
  .preview-close{position:absolute;top:.5rem;right:.5rem;z-index:5;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;border-radius:50%;background:rgba(13,10,26,.85);border:1px solid var(--line-strong);color:var(--fg);backdrop-filter:blur(8px)}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.preview-close{display:none}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  padding:1.4rem 1.4rem 1.2rem;min-height:210px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  transition:transform .35s cubic-bezier(.7,0,.2,1),border-color .25s ease,box-shadow .35s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);background:#100b1f}
.card.hide{display:none}
.card.sk{background:linear-gradient(90deg,var(--bg-2),rgba(255,255,255,.04),var(--bg-2));background-size:200% 100%;animation:sk 1.6s linear infinite;min-height:210px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.card .idx{font-size:.66rem;color:var(--muted);letter-spacing:.12em}
.card .lang{font-size:.62rem;color:var(--muted-2);letter-spacing:.1em;padding:.22rem .5rem;border:1px solid var(--line);border-radius:999px}
.card .top .badges{display:flex;align-items:flex-start;gap:.35rem;flex:none}
/* Fork marker, deliberately dimmer than the language chip: it is context, not
   a headline. Same treatment in the card and in the preview. */
.card .lang.fork,.preview-lang.fork{color:var(--muted);border-color:var(--line);border-style:dashed;background:none;text-transform:uppercase}
.preview-badges{display:flex;align-items:flex-start;gap:.35rem;flex:none}
.card h3{margin:0;font-size:1.05rem;letter-spacing:-.015em;font-weight:600;color:var(--fg);word-break:break-word}
.card .desc{margin:0;font-size:.78rem;color:var(--muted-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card .actions{display:flex;gap:.4rem;margin-top:auto}
.card .action{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;letter-spacing:.08em;
  padding:.4rem .7rem;border:1px solid var(--line-strong);border-radius:999px;color:var(--muted-2);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.card .action:hover{border-color:var(--accent);color:var(--accent)}
.card .action.live{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-color:transparent}
.card .action.live:hover{box-shadow:0 4px 14px -2px var(--accent-glow);color:#fff}

/* Sticky preview panel — replaces hover popup */
.preview{
  width:100%;max-height:calc(100vh - 110px);overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transition:border-color .25s ease;
}
.preview[data-empty="true"]{border-style:dashed}
.preview-banner{
  position:relative;height:140px;flex:none;
  background:#06060a center/cover no-repeat;
  overflow:hidden;
}
.preview-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,10,26,.1) 0%,rgba(13,10,26,.85) 100%);
}
.preview[data-empty="true"] .preview-banner{
  height:72px;
  background:linear-gradient(135deg,var(--accent-2) 0%,var(--accent) 60%,#06060a 140%);
}
.preview-avatar{
  position:absolute;left:1rem;bottom:-22px;width:48px;height:48px;border-radius:12px;
  border:2px solid var(--bg-2);background:var(--bg);overflow:hidden;z-index:2;
}
.preview-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.preview[data-empty="true"] .preview-avatar{display:none}
.preview-body{padding:32px 1.1rem 1.1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}
.preview[data-empty="true"] .preview-body{padding-top:1.1rem}
.preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.preview-head h4{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--fg);overflow-wrap:anywhere;word-break:break-word;line-height:1.2}
.preview-owner{font-size:.66rem;color:var(--muted);letter-spacing:.05em;display:block;margin-top:.15rem;overflow-wrap:anywhere;word-break:break-all}
.preview-head>div:first-child{min-width:0;flex:1}
.preview-lang{font-size:.6rem;color:var(--accent);letter-spacing:.1em;padding:.22rem .5rem;border:1px solid var(--accent);border-radius:999px;flex:none;text-transform:uppercase}
.preview-desc{margin:0;font-size:.78rem;line-height:1.55;color:var(--muted-2)}
.preview-readme{
  font-size:.72rem;line-height:1.55;color:var(--muted-2);
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .8rem;max-height:180px;overflow-y:auto;overflow-x:hidden;
  word-break:break-word;overflow-wrap:anywhere;min-width:0;
}
.preview-readme pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.preview-readme code{word-break:break-all}
.preview-readme img{max-width:100%;height:auto}
.preview-body{min-width:0}
.preview{min-width:0}
.preview-readme:empty{display:none}
.preview-readme code{font-family:var(--mono);font-size:.85em;background:rgba(255,255,255,.06);padding:.05em .3em;border-radius:3px}
.preview-readme h1,.preview-readme h2,.preview-readme h3{font-size:.82rem;margin:.4rem 0 .3rem;color:var(--fg);font-weight:600}
.preview-readme p{margin:0 0 .5rem}
.preview-readme.empty{font-style:italic;color:var(--muted)}
.preview-topics{display:flex;flex-wrap:wrap;gap:.3rem}
.preview-topics:empty{display:none}
.preview-topics .topic{font-size:.6rem;letter-spacing:.04em;padding:.18rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--muted-2);background:rgba(255,255,255,.02)}
.preview-stats{display:flex;flex-wrap:wrap;gap:.85rem;font-size:.7rem;color:var(--muted-2);padding-top:.4rem;border-top:1px solid var(--line)}
.preview-stats span{display:inline-flex;align-items:center;gap:.3rem}
.preview-stats svg{color:var(--accent)}
.preview-meta{font-size:.66rem;color:var(--muted);letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:.7rem}
.preview-actions{display:flex;gap:.4rem;margin-top:.2rem;flex-wrap:wrap}
.preview-actions .action{
  flex:1 1 auto;min-width:0;justify-content:center;text-align:center;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;letter-spacing:.04em;
  padding:.6rem .7rem;border:1px solid var(--line-strong);border-radius:8px;color:var(--fg);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.preview-actions .action:hover{border-color:var(--accent);color:var(--accent);background:rgba(167,139,250,.08)}
.preview-actions .action.live{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-color:transparent}
.preview-actions .action.live:hover{box-shadow:0 4px 14px -2px var(--accent-glow);color:#fff}
.preview-actions .action[hidden]{display:none!important}
.preview[data-empty="true"] .preview-stats,
.preview[data-empty="true"] .preview-meta,
.preview[data-empty="true"] .preview-actions,
.preview[data-empty="true"] .preview-readme{display:none}
.card.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(167,139,250,.06),var(--bg-2))}

.work-foot{max-width:1280px;margin:2.5rem auto 6rem;padding:0 1.5rem;font-size:.84rem}
.pager{max-width:1280px;margin:1.5rem auto 0;padding:0 1.5rem;display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}
.page-btn{
  min-width:34px;padding:.45rem .75rem;font-size:.78rem;
  border:1px solid var(--line);border-radius:6px;color:var(--muted-2);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.page-btn:hover:not(:disabled){border-color:var(--line-strong);color:var(--fg)}
.page-btn.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-color:transparent}
.page-btn:disabled{opacity:.35;cursor:not-allowed}

/* ===== Journal ===== */
.journal-toolbar{max-width:1280px;margin:0 auto 2rem;padding:0 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.j-info{font-size:.74rem;letter-spacing:.04em}
.journal-layout{max-width:1280px;margin:0 auto 6rem;padding:0 1.5rem;display:grid;grid-template-columns:300px minmax(0,1fr);gap:2.5rem}
@media (max-width:900px){.journal-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.journal-layout > *{min-width:0;max-width:100%}
.journal-aside{
  display:flex;flex-direction:column;gap:.5rem;
  position:sticky;top:88px;align-self:start;
  max-height:calc(100vh - 110px);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.5rem .4rem;background:rgba(0,0,0,.2);
}
@media (max-width:900px){.journal-aside{position:static;max-height:34vh}}
.journal-search{
  display:flex;align-items:center;gap:.4rem;
  padding:.35rem .55rem;border:1px solid var(--line);border-radius:6px;
  background:rgba(0,0,0,.3);color:var(--muted);
  transition:border-color .15s ease,color .15s ease;
}
.journal-search:focus-within{border-color:var(--accent);color:var(--fg)}
.journal-search input{
  flex:1;background:none;border:0;outline:0;color:inherit;
  font:500 .78rem/1 var(--mono);letter-spacing:.02em;padding:.15rem 0;
}
.journal-search input::placeholder{color:var(--muted);opacity:.7}
.journal-search input::-webkit-search-cancel-button{appearance:none}
.journal-list{
  display:flex;flex-direction:column;overflow-y:auto;flex:1 1 auto;font-size:.82rem;
}
.journal-tree-year,.journal-tree-month{
  display:flex;align-items:center;gap:.35rem;width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);background:none;border:0;color:inherit;
  border-radius:4px;transition:background .15s ease,color .15s ease;
}
.journal-tree-year:hover,.journal-tree-month:hover{background:rgba(255,255,255,.04)}
.journal-tree-year{font-size:.78rem;letter-spacing:.04em;color:var(--accent);padding:.4rem .4rem .3rem;font-weight:600}
.journal-tree-month{font-size:.7rem;letter-spacing:.04em;color:var(--muted-2);padding:.25rem .8rem .2rem}
.caret{display:inline-block;width:10px;height:10px;font-size:.66rem;color:var(--muted);transition:transform .15s ease;transform:rotate(90deg)}
.collapsed > .caret{transform:rotate(0deg)}
.tree-count{margin-left:auto;font-size:.6rem;color:var(--muted);opacity:.7;letter-spacing:0}
.journal-list .post-item{
  display:flex;align-items:baseline;gap:.5rem;
  width:100%;text-align:left;cursor:pointer;
  padding:.4rem .5rem .4rem 1.4rem;border-radius:6px;
  color:var(--muted-2);transition:background .15s ease,color .15s ease;
  font-family:var(--mono);
}
.journal-list .empty{font-size:.74rem;color:var(--muted);padding:.6rem .5rem;font-family:var(--mono)}
.journal-list .post-item:hover{background:rgba(255,255,255,.04);color:var(--fg)}
.journal-list .post-item.active{background:rgba(167,139,250,.12);color:var(--accent)}
.journal-list .post-item .glyph{font-size:.74rem;color:var(--muted);flex:none}
.journal-list .post-item.active .glyph{color:var(--accent)}
.journal-list .post-item .ttl{font-size:.82rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.journal-list .post-item .dt{font-size:.62rem;color:var(--muted);flex:none}
.journal-view{min-height:300px;line-height:1.75;font-size:.94rem;max-width:68ch;color:var(--muted-2);min-width:0;overflow-wrap:break-word}
.journal-view *{min-width:0;max-width:100%}
.journal-view .post-actions{display:flex;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.journal-view h1{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;margin:0 0 1rem;line-height:1.15;color:var(--fg);font-weight:600}
.journal-view h2{font-size:1.25rem;margin-top:2.4rem;margin-bottom:.8rem;letter-spacing:-.015em;color:var(--fg);font-weight:600;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
/* The post title is an h2 for heading order (the page owns the h1) but has to
   keep reading as the title, so it takes the old h1 styling. */
.journal-view h2.post-title{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;margin:0 0 1rem;line-height:1.15;font-weight:600;padding-bottom:0;border-bottom:0}
.journal-view h3{font-size:1.02rem;margin-top:1.8rem;margin-bottom:.55rem;letter-spacing:-.005em;color:var(--accent);font-weight:600;display:flex;align-items:baseline;gap:.45rem}
.journal-view h3::before{content:"#";font-family:var(--mono);color:var(--muted);font-weight:500;opacity:.7}
.journal-view h4{font-size:.9rem;margin-top:1.4rem;margin-bottom:.4rem;color:var(--fg);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.journal-view p{margin:0 0 1.1rem}
.journal-view ul,.journal-view ol{padding-left:1.1rem}
.journal-view li{margin-bottom:.5rem}
.journal-view pre{background:#06060a;border:1px solid var(--line);padding:1rem 1.1rem;overflow:auto;font-size:.82rem;line-height:1.55;margin:1.3rem 0;color:var(--fg);border-radius:var(--radius-sm)}
.journal-view code{font-family:var(--mono)}
.journal-view :not(pre)>code{background:rgba(255,255,255,.06);padding:.1em .4em;font-size:.9em;color:var(--fg);border-radius:3px}
.journal-view a{color:var(--accent);border-bottom:1px solid currentColor}
.journal-view img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:1rem 0;border:1px solid var(--line)}
.journal-view .post-date{font-size:.7rem;color:var(--muted);letter-spacing:.1em;margin-bottom:1.5rem}
.post-meta-line{display:flex;flex-wrap:wrap;gap:.55rem;font-size:.7rem;color:var(--muted);letter-spacing:.05em;margin:0 0 1rem}
.post-toc{
  margin:0 0 2rem;padding:.9rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);font-size:.84rem;
}
.post-toc strong{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:.5rem;font-weight:600}
.post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc li{counter-increment:toc;padding:.2rem 0;line-height:1.4}
.post-toc li::before{content:counter(toc) ".";color:var(--muted);margin-right:.5rem;font-variant-numeric:tabular-nums}
.post-toc li.lvl-h3{padding-left:1.4rem;font-size:.78rem}
.post-toc li.lvl-h3::before{display:none}
.post-toc a{color:var(--muted-2);border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.post-toc a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Right-side TOC rail (dashes per heading) */
.post-rail{
  position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:.15rem;
  padding:.45rem .4rem;border-radius:10px;
  max-height:calc(100vh - 160px);overflow-y:auto;line-height:1;scroll-behavior:smooth;
  background:rgba(13,10,26,.55);border:1px solid var(--line);
  backdrop-filter:blur(6px);
  scrollbar-width:none;
}
.post-rail::-webkit-scrollbar{display:none;width:0;height:0}
.rail-item{
  position:relative;display:flex;align-items:center;
  width:44px;height:8px;padding:0;border:0;background:none;cursor:pointer;flex:none;line-height:1;
}
.rail-item::before{
  content:"";display:block;height:2px;
  width:28px;background:var(--muted);opacity:.55;border-radius:2px;
  transform-origin:left center;
  transition:transform .18s ease,opacity .18s ease,background .18s ease;
}
.rail-item.lvl-h3::before{width:18px}
.rail-item:hover::before{transform:scaleX(1.6);opacity:1;background:var(--fg)}
.rail-item.lvl-h3:hover::before{transform:scaleX(2.4)}
.rail-item.active::before{transform:scaleX(1.6);opacity:1;background:var(--accent)}
.rail-item.lvl-h3.active::before{transform:scaleX(2.4)}

/* Floating tooltip — outside scroll container so it never gets clipped */
.rail-tip{
  position:fixed;z-index:56;pointer-events:none;
  font-size:.74rem;letter-spacing:.02em;color:var(--fg);
  background:rgba(13,10,26,.96);border:1px solid var(--accent);border-radius:6px;
  padding:.4rem .7rem;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .12s ease;backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7);
}
.rail-tip[aria-hidden="false"]{opacity:1}
@media (max-width:1100px){.post-rail,.rail-tip{display:none}}
.post-rail[hidden],.rail-tip[hidden]{display:none!important}

/* Back-to-top floating button */
.to-top{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--fg);
  background:rgba(13,10,26,.85);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
}
.to-top.show{opacity:1;transform:translateY(0)}
.to-top:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:480px){.to-top{right:.8rem;bottom:.8rem;width:38px;height:38px}}
html[dir="rtl"] .to-top{right:auto;left:1.2rem}
@media (max-width:480px){html[dir="rtl"] .to-top{right:auto;left:.8rem}}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:2rem}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(5,3,10,.75);backdrop-filter:blur(8px)}
.modal-panel{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px var(--accent-glow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:1rem;font-weight:600}
.modal-body{padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.5rem;border-top:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.field input,.field textarea,.field select{
  font-family:var(--mono);font-size:.9rem;color:var(--fg);
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .85rem;transition:border-color .2s ease,background .2s ease;resize:vertical;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.6)}
.field-row{display:flex;flex-wrap:wrap;gap:1rem}
.field-row .field{flex:1;min-width:140px}
.field-row .field.flex-2{flex:2;min-width:220px}

/* Editor toolbar */
.editor-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  padding:.5rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.25);
}
.editor-toolbar .tb{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:32px;padding:0 .6rem;
  font-size:.78rem;color:var(--muted-2);
  border:1px solid transparent;border-radius:6px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.editor-toolbar .tb:hover{background:rgba(255,255,255,.05);color:var(--fg);border-color:var(--line)}
.editor-toolbar .tb:active{background:var(--accent);color:#000}
.editor-toolbar .tb-sep{display:inline-block;width:1px;height:18px;background:var(--line);margin:0 .25rem}

.editor-split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.editor-split{grid-template-columns:1fr}}
.post-preview{font-size:.85rem;line-height:1.6;color:var(--muted-2);padding:.7rem .85rem;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:var(--radius-sm);min-height:200px;max-height:340px;overflow-y:auto}
.post-preview h1{font-size:1.4rem;color:var(--fg);margin:.3rem 0 .8rem}
.post-preview h2{font-size:1.05rem;color:var(--fg);margin:1.2rem 0 .5rem}
.post-preview pre{background:#06060a;padding:.7rem;border-radius:6px;font-size:.78rem;overflow:auto}
.post-preview code{font-family:var(--mono)}
.post-preview :not(pre)>code{background:rgba(255,255,255,.06);padding:.1em .35em;font-size:.88em}
.post-preview img{max-width:100%;height:auto;border-radius:6px;margin:.5rem 0}

/* ===== Contact (plain list, no cards) ===== */
.contact-h{font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;margin:0 0 1.5rem;letter-spacing:-.04em;font-weight:600}
.contact-h em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-hero{
  max-width:1280px;margin:0 auto 2rem;padding:1.4rem 1.5rem;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(167,139,250,.04),rgba(255,255,255,0));
}
@media (max-width:1312px){.contact-hero{margin-left:1.5rem;margin-right:1.5rem}}
.ch-avatar{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line-strong)}
.ch-text{flex:1;min-width:240px}
.ch-name{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.3rem}
.ch-name strong{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.ch-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--accent)}
.ch-status .dot-live{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
.ch-meta{margin:0;font-size:.8rem;color:var(--muted-2);line-height:1.55}
.contact-list{
  max-width:1280px;margin:0 auto 6rem;padding:0 1.5rem;
  display:flex;flex-direction:column;
}
.contact-list .row{
  display:grid;grid-template-columns:140px 1fr;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.contact-list .row:first-child{border-top:1px solid var(--line)}
.contact-list dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{margin:0;font-size:1.05rem;color:var(--fg);font-weight:500;word-break:break-word}
.contact-list a{color:var(--fg);border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.contact-list a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact-list .muted{font-size:.74rem;margin-left:.5rem}
.linkish{font:inherit;color:var(--fg);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.linkish:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Touch targets. Measured at 375px, the card actions came out 29px tall and
   the contact links and journal toolbar 17-18px, which is under the 24px WCAG
   minimum and far under what a thumb actually hits. Only raised on touch
   pointers so the desktop layout keeps its tighter spacing. */
@media (hover:none),(pointer:coarse){
  .card .action{min-height:36px;padding:.5rem .8rem}
  .contact-list dd a,.contact-list dd .linkish{display:inline-flex;align-items:center;min-height:36px}
  .j-info a,.j-info .linkish{display:inline-flex;align-items:center;min-height:32px}
  .journal-list .post-item,.journal-tree-year,.journal-tree-month{min-height:36px}
  .pager .page-btn{min-width:36px;min-height:36px}
}
@media (max-width:600px){
  .contact-list .row{grid-template-columns:1fr;gap:.2rem;padding:.85rem 0}
  .contact-list dd{font-size:.95rem}
  .contact-list dd a{overflow-wrap:anywhere;word-break:break-word}
  .ch-meta{overflow-wrap:anywhere}
  .ch-name strong{font-size:.95rem}
  .ch-status{font-size:.68rem}
}

/* Owner-only journal controls */
body:not(.owner) .owner-only{display:none!important}
body.owner #visitor-note{display:none!important}

/* ===== In-app dialog ===== */
.dialog{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.5rem}
.dialog[aria-hidden="false"]{display:flex}
.dialog-backdrop{position:absolute;inset:0;background:rgba(5,3,10,.75);backdrop-filter:blur(6px)}
.dialog-panel{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:440px;padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.dialog-panel h4{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.dialog-panel p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted-2);white-space:pre-line}
.dialog-fields{display:flex;flex-direction:column;gap:.6rem}
.dialog-fields:empty{display:none}
.dialog-fields label{display:flex;flex-direction:column;gap:.3rem;font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.dialog-fields input{font-family:var(--mono);font-size:.9rem;color:var(--fg);background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .8rem;text-transform:none;letter-spacing:0}
.dialog-fields input:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.6)}
.dialog-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.3rem}
.dialog[data-type="alert"] #dialog-cancel{display:none}

/* ===== Iframe preview modal ===== */
.iframe-panel{max-width:min(1100px,96vw);width:96vw;max-height:92vh;display:flex;flex-direction:column}
.modal-head-actions{display:flex;align-items:center;gap:.5rem}
.iframe-host{position:relative;flex:1 1 auto;background:#06060a;min-height:70vh;display:flex;flex-direction:column}
.iframe-host iframe{flex:1 1 auto;display:block;width:100%;height:100%;min-height:70vh;border:0;background:#fff}
.iframe-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2rem;color:var(--muted-2);font-size:.85rem;text-align:center;background:rgba(6,6,10,.9)}
.iframe-fallback[hidden]{display:none!important}
.iframe-fallback p{margin:0;max-width:40ch;line-height:1.6}

/* ===== Footer ===== */
.foot{display:flex;justify-content:space-between;gap:1rem;padding:2rem 1.5rem;border-top:1px solid var(--line);font-size:.72rem;letter-spacing:.06em;color:var(--muted);flex-wrap:wrap}

/* ===== Responsive — narrow viewports ===== */
@media (max-width:760px){
  .topbar{padding:.7rem 1rem;gap:.5rem}
  .brand{font-size:.8rem;padding:.3rem .4rem}
  .page-head{padding:3.5rem 1rem 2rem}
  .hero-inner{padding:1.5rem 1rem 2rem}
  .display{font-size:clamp(1.6rem,8vw,3rem)}
  .lede{font-size:.9rem}
  .currently{font-size:.74rem}
  .hero-cta{gap:.5rem}
  .hero-cta .btn{padding:.7rem 1rem;font-size:.8rem}
  .stack-marquee{padding:.9rem 0}
  .stack-track .stack-item{font-size:.78rem;gap:.45rem}
  .stack-track .stack-item img{width:16px;height:16px}
  .stack-track{gap:2rem}
  .section{padding:3rem 1rem}
  .h1,.contact-h{font-size:clamp(2rem,10vw,3.5rem)}
  .h2{font-size:clamp(1.5rem,6vw,2.2rem)}
  .cta-band{padding:3rem 1rem;margin:1.5rem auto 4rem}
  .work-filters{padding:0 1rem}
  .work-layout{padding:0 1rem;gap:1rem}
  .grid{gap:.75rem}
  .card{padding:1.1rem;min-height:180px}
  .card h3{font-size:.95rem}
  .work-foot{padding:0 1rem;margin:2rem auto 4rem}
  .pager{padding:0 1rem}
  .journal-toolbar{padding:0 1rem;gap:.5rem}
  .journal-layout{padding:0 1rem}
  .contact-hero{padding:1rem 1rem;gap:.8rem}
  .ch-avatar{width:48px;height:48px}
  .contact-list{padding:0 1rem}
  .modal{padding:.75rem}
  .modal-panel{max-height:94vh}
  .modal-body{padding:1rem}
  .editor-split{gap:.5rem}
  .editor-toolbar{padding:.4rem;gap:.2rem}
  .editor-toolbar .tb{min-width:30px;height:28px;padding:0 .45rem;font-size:.72rem}
  .foot{padding:1.2rem 1rem;font-size:.66rem}
  .ch-name{gap:.5rem}
}
@media (max-width:480px){
  .topbar{padding:.6rem .75rem}
  .brand{font-size:.74rem}
  .menu-btn{width:34px;height:34px}
  .page{padding-top:64px}
  .display{font-size:clamp(1.4rem,9vw,2.4rem)}
  .stack-chips{gap:.3rem}
  .stack-chips li{font-size:.64rem;padding:.22rem .5rem}
  .currently{flex-direction:column;align-items:flex-start;gap:.3rem}
  .kbd{font-size:.56rem}
  .me-strip,.ch-name{flex-direction:column;align-items:flex-start;gap:.35rem}
  .contact-hero{padding:.9rem .9rem;gap:.7rem;border-radius:12px}
  .ch-avatar{width:44px;height:44px;border-radius:10px}
  .ch-text{min-width:0;flex:1 1 auto;width:100%}
  .ch-status{font-size:.64rem;letter-spacing:.02em}
  .ch-meta{font-size:.72rem;line-height:1.5}
  .contact-h{font-size:clamp(1.8rem,11vw,2.8rem);margin-bottom:1rem}
  .contact-list{padding:0 .9rem;margin-bottom:4rem}
  .contact-list .row{padding:.75rem 0}
  .contact-list dt{font-size:.62rem}
  .contact-list dd{font-size:.82rem}
  .contact-list dd a{overflow-wrap:anywhere;word-break:break-all}
  .contact-list .muted{display:block;margin-left:0;margin-top:.25rem;font-size:.68rem}
  .journal-view{font-size:.86rem;line-height:1.65}
  .journal-view h1{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;overflow-wrap:break-word}
  .journal-view h2{font-size:1.05rem}
  .journal-view h3{font-size:.95rem}
  .journal-view pre{font-size:.74rem;padding:.7rem .8rem}
  .post-meta-line{font-size:.65rem;gap:.4rem}
  .iframe-panel{width:100%;max-width:100%;max-height:100vh;height:100vh;border-radius:0}
  .iframe-host{min-height:0;flex:1}
  .iframe-host iframe{min-height:0}
  .modal-head{padding:.7rem .9rem;gap:.4rem;flex-wrap:wrap}
  .modal-head h3{font-size:.85rem}
  .modal-head-actions{gap:.3rem;flex-wrap:wrap}
  .modal-head-actions .btn{padding:.45rem .7rem;font-size:.7rem}
  #iframe-modal{padding:0}
  .dialog{padding:.75rem}
  .dialog-panel{padding:1.1rem 1.1rem}
  .work-aside{display:none}  /* hide sticky preview on tiny screens — cards have their own actions */
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .hero-bg .orb{animation:none}
  .stack-track{animation:none!important}
}

/* ===== 404 page ===== */
.page-404{min-height:100vh;display:none;align-items:center;justify-content:center;padding:6rem 1.5rem;text-align:center}
.page-404.active{display:flex}
.nf-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.nf-code{font-family:var(--mono);font-weight:700;letter-spacing:-.04em;font-size:clamp(5rem,18vw,12rem);line-height:.95;color:var(--fg);position:relative}
.nf-glitch{position:relative;display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-glitch::before,.nf-glitch::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;mix-blend-mode:screen}
.nf-glitch::before{transform:translate(2px,0);text-shadow:-2px 0 #ef4444;clip-path:polygon(0 0,100% 0,100% 45%,0 45%);animation:nf-shake 2.6s infinite step-end}
.nf-glitch::after{transform:translate(-2px,0);text-shadow:2px 0 #8b5cf6;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);animation:nf-shake 2.6s 1.3s infinite step-end}
@keyframes nf-shake{0%,90%,100%{transform:translate(0,0)}92%{transform:translate(3px,-1px)}94%{transform:translate(-2px,2px)}96%{transform:translate(2px,1px)}98%{transform:translate(-1px,-2px)}}
.nf-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;letter-spacing:-.02em;margin:0;color:var(--fg)}
.nf-lede{font-size:.92rem;line-height:1.7;color:var(--muted-2);margin:0;max-width:50ch}
.nf-lede code{font-family:var(--mono);background:rgba(255,255,255,.06);padding:.1em .45em;border-radius:4px;color:var(--accent);font-size:.85em;overflow-wrap:anywhere;word-break:break-all}
.nf-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.nf-glitch::before,.nf-glitch::after{animation:none}}

/* inert fallback for browsers without HTML 'inert' support */
.no-inert [inert]{pointer-events:none!important;opacity:0!important;visibility:hidden!important}
.no-inert [inert] *{visibility:hidden!important}

/* page route fade-in (replaces gsap.fromTo which could leave autoAlpha:0 stuck) */
.page.entering{opacity:.001;transform:translateY(8px)}
.page.active{transition:opacity .35s ease,transform .35s ease;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.page.entering{opacity:1;transform:none}}