@font-face{ font-family:"Thmanyah Display"; src:url("/fonts/thmanyah-display-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Thmanyah Display"; src:url("/fonts/thmanyah-display-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Thmanyah Text"; src:url("/fonts/thmanyah-text-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("/fonts/thmanyah-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root{
  --bg:#0F1319; --bg-2:#151B23; --ink:#E4E4DE; --ink-60:#9AA1A8; --ink-38:#636A72;
  --line:rgba(228,228,222,.16); --line-soft:rgba(228,228,222,.08);
  --accent:#7AD6CB; --accent-mid:#58C2B6; --accent-soft:rgba(88,194,182,.12);
  --serif:"EB Garamond",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --jp:"Shippori Mincho",serif;
  --ar-display:"Thmanyah Display","Amiri",serif; --ar-text:"Thmanyah Text","Amiri",serif; --ar-sans:"Thmanyah Sans",system-ui,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4rem); color-scheme:dark;
}
html[data-theme="day"]{ --bg:#F3F2ED; --bg-2:#EAE9E1; --ink:#1A1D21; --ink-60:#565C61; --ink-38:#989DA2;
  --line:rgba(26,29,33,.18); --line-soft:rgba(26,29,33,.08); --accent:#14716A; --accent-mid:#1E8A80; --accent-soft:rgba(30,138,128,.10); color-scheme:light; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:1.0625rem; line-height:1.72;
  -webkit-font-smoothing:antialiased; transition:background-color .5s,color .5s; }
::selection{ background:var(--accent-mid); color:#0F1319; }
a{ color:inherit; text-decoration-color:var(--ink-38); text-underline-offset:.22em; }
a:hover{ text-decoration-color:var(--accent-mid); }
:focus-visible{ outline:2px solid var(--accent-mid); outline-offset:3px; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
h1,h2,h3{ font-weight:500; line-height:1.14; margin:0; }
p{ margin:0; }
.meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }
html[lang="ar"] body{ font-family:var(--ar-text); font-size:1.145rem; line-height:1.95; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ font-family:var(--ar-display); line-height:1.42; }
html[lang="ar"] .meta,html[lang="ar"] .tool,html[lang="ar"] .filter{ font-family:var(--ar-sans); text-transform:none; letter-spacing:0; font-size:.82rem; }
.nav{ position:fixed; top:0; inset-inline:0; z-index:60; height:64px; display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(1rem,3vw,2.2rem); background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }
.brand b{ font-weight:500; }
.tool{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); padding:.42em .68em; color:var(--ink-60); min-block-size:40px; min-inline-size:40px; display:inline-grid; place-content:center; }
.tool:hover{ color:var(--ink); border-color:var(--ink-60); }
.tool--jp{ font-family:var(--jp); }
.nav__tools{ display:flex; gap:.4rem; }
.page{ max-width:960px; margin-inline:auto; padding:calc(64px + 3.5rem) var(--pad) 4rem; }
.crumb{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] .crumb{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.82rem; }
.head{ display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:end; margin-block-start:1rem; }
.head svg{ inline-size:64px; block-size:64px; color:var(--ink-60); }
.head svg .a{ stroke:var(--accent-mid); }
h1{ font-size:clamp(2.4rem,6vw,4rem); }
.lede{ margin-block-start:1.2rem; max-inline-size:60ch; color:var(--ink-60); }
.filters{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-block-start:2.2rem; border-bottom:1px solid var(--line-soft); padding-block-end:1rem; }
.filter{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); padding:.5em .2em; border-bottom:1px solid transparent; min-block-size:40px; }
.filter[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent-mid); }
.post{ display:grid; grid-template-columns:8.5ch auto minmax(0,1fr); gap:1.3rem; padding-block:1.6rem; border-bottom:1px solid var(--line-soft); text-decoration:none; align-items:start; }
.post .date{ font-family:var(--mono); font-size:.72rem; color:var(--ink-38); padding-block-start:.5rem; letter-spacing:.05em; }
html[lang="ar"] .post .date{ font-family:var(--ar-sans); font-size:.82rem; letter-spacing:0; }
.post .cover{ inline-size:96px; block-size:auto; border:1px solid var(--line-soft); background:var(--bg-2); margin-block-start:.3rem; }
.post .kamon{ inline-size:26px; block-size:26px; color:var(--ink-38); margin-block-start:.35rem; }
a.post:hover .kamon{ color:var(--accent); }
.post h2{ font-size:clamp(1.35rem,2.6vw,1.9rem); }
a.post:hover h2{ text-decoration:underline; text-decoration-color:var(--accent-mid); text-underline-offset:.22em; }
.post p{ margin-block-start:.55rem; color:var(--ink-60); font-size:.97rem; max-inline-size:62ch; }
.post .tags{ margin-block-start:.8rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
.post .tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] .post .tag{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.78rem; }
.post .tag--live{ color:var(--accent); }
div.post{ opacity:.62; }
.empty{ display:none; margin-block-start:1.6rem; color:var(--ink-38); font-style:italic; }
.empty.show{ display:block; }
.foot{ margin-block-start:3rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center; }
.foot a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-60); }
html[lang="ar"] .foot a{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.84rem; }
.foot a:hover{ color:var(--accent); }
.foot svg{ inline-size:26px; block-size:26px; color:var(--accent-mid); }
@media (max-width:700px){
  .post{ grid-template-columns:auto minmax(0,1fr); }
  .post .cover{ inline-size:72px; }
  .post .date{ grid-column:2; order:3; padding:0; }
  .head{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; } }