/* ── AJ Rabi — sitewide design system (blog + homepage) ── */

:root{
  --bg:#080b11;
  --bg-raised:#0e131c;
  --bg-card:#10161f;
  --border:#1c2531;
  --border-strong:#293347;
  --accent:#5eead4;
  --accent-dim:#2f8f82;
  --accent-wash:rgba(94,234,212,0.08);
  --text:#e8edf3;
  --text-dim:#94a1b3;
  --text-faint:#57626f;
  --scrim-top:rgba(8,11,17,0);
  --scrim-bottom:rgba(6,9,14,0.95);
  --pad-x:clamp(0.9rem, 4vw, 2rem);
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4,.brand,nav a{
  font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing:-0.01em;
}

a{ color:var(--accent); }

/* ---------- page shell ---------- */
.page{margin:0 auto;padding:0 var(--pad-x) 4rem;max-width:700px;}
.page--wide{max-width:1100px;}

/* ---------- header (shared by every page) ---------- */
.site-header{padding:1.1rem var(--pad-x);border-bottom:1px solid var(--border);}
.header-row{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.brand{display:inline-flex;align-items:center;gap:.5rem;min-height:32px;font-size:1.15rem;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:.01em;}
.brand-logo{height:30px;width:auto;display:block;border-radius:5px;}
.brand-fallback .dot{color:var(--accent);}
.site-nav{display:flex;gap:1.4rem;font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;margin-right:auto;}
.site-nav a{color:var(--text-dim);text-decoration:none;}
.site-nav a.current{color:var(--accent);}
.djama-pill{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-wash);padding:.45rem .85rem;border-radius:7px;text-decoration:none;white-space:nowrap;}
.djama-pill:hover{background:rgba(94,234,212,0.16);}
.djama-pill .ext{font-size:.75rem;}

.site-footer{padding:2.5rem var(--pad-x);text-align:center;color:var(--text-faint);font-size:.75rem;border-top:1px solid var(--border);margin-top:2rem;}
.site-footer p{margin:0 0 .3rem;}

.hero{padding:1.9rem 0 1.6rem;text-align:center;}
.hero h2,.hero h1{font-size:2rem;font-weight:800;line-height:1.15;text-wrap:balance;margin:0 0 .75rem;
  background:linear-gradient(90deg,var(--accent),#8ff5e6 60%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:.9rem;color:var(--text-dim);line-height:1.65;margin:0;}

.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-wash);padding:.4rem .7rem;border-radius:6px;}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.tag{font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--accent);border:1px solid rgba(94,234,212,0.28);background:rgba(94,234,212,0.06);padding:.28rem .55rem;border-radius:999px;white-space:nowrap;}
.tag.more{color:var(--text-faint);border-color:var(--border-strong);background:transparent;}
.tag--onimage{border-color:rgba(255,255,255,0.35);background:rgba(8,11,17,0.55);color:#eafffa;backdrop-filter:blur(2px);}

.cover{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#0c1119;}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cover svg{position:absolute;inset:0;width:100%;height:100%;}
.cover-icon{position:absolute;opacity:.16;color:#eaf6f3;}

.meta{font-size:.73rem;color:var(--text-faint);margin-bottom:.85rem;font-variant-numeric:tabular-nums;}
.meta .dot{margin:0 .4rem;}
.read-link{color:var(--accent);font-weight:700;font-size:.8rem;text-decoration:none;}

/* ---------- featured essay ---------- */
.featured-block{margin-top:.3rem;}
.featured-variant .cover{aspect-ratio:16/10;margin-bottom:.85rem;}
.featured-variant .tags{margin-bottom:.85rem;}
.featured-variant h3{font-size:1.45rem;font-weight:800;line-height:1.25;text-wrap:balance;margin:0 0 .55rem;}
.featured-variant .excerpt{font-size:.85rem;line-height:1.7;color:var(--text-dim);margin:0 0 .9rem;}

.cover--tall{aspect-ratio:4/5;}
.onimage-top{position:absolute;top:.85rem;left:.85rem;right:.85rem;display:flex;flex-wrap:wrap;gap:.4rem;z-index:2;}
.onimage-bottom{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;}
.onimage-bottom .eyebrow{background:rgba(8,11,17,0.55);margin-bottom:.6rem;}
.onimage-bottom h3{color:#fff;}
.onimage-bottom .excerpt{color:#c9d3de;}
.onimage-bottom .meta{color:#aeb9c7;}
.cover--tall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,11,17,0) 30%, rgba(6,9,14,0.94) 88%);z-index:1;}

.featured-frame{border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;margin-bottom:.9rem;}
.header-box{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.75rem .95rem;background:var(--bg-raised);border-bottom:1px solid var(--border-strong);}
.header-box .eyebrow{border:none;background:none;padding:0;}
.header-box-date{font-size:.72rem;color:var(--text-faint);}
.featured-frame .cover{border-radius:0;margin-bottom:0;aspect-ratio:16/9;}

/* ---------- section heads + grids ---------- */
.section-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:2.4rem 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--border);}
.section-head .eyebrow{flex-shrink:0;}
.section-head p{font-size:.77rem;color:var(--text-faint);margin:0;}

.grid{display:grid;gap:1.05rem;}
.grid-latest{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));}
.grid-interest{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));}
.grid-categories{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}

.card{border:1px solid var(--border);background:var(--bg-card);border-radius:12px;overflow:hidden;}
.card .cover{aspect-ratio:16/9;border-radius:0;}
.card .cover .tags{position:absolute;left:.7rem;bottom:.7rem;right:.7rem;z-index:1;}
.card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, var(--scrim-top) 40%, var(--scrim-bottom) 100%);}
.card-body{padding:.95rem 1.05rem 1.05rem;}
.card-body h4{font-size:1rem;font-weight:700;line-height:1.35;margin:0 0 .4rem;text-wrap:balance;}
.card-body .meta{margin-bottom:0;}

.card-plain{border:1px solid var(--border);background:var(--bg-card);border-radius:12px;padding:1.05rem 1.1rem;}
.kicker{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);font-weight:600;margin-bottom:.6rem;}
.card-plain h4{font-size:.98rem;font-weight:700;margin:0 0 .5rem;line-height:1.35;}
.card-plain .excerpt{font-size:.8rem;color:var(--text-dim);line-height:1.6;margin:0 0 .75rem;}
.card-plain .meta{margin-bottom:0;}

.more-list{display:flex;flex-direction:column;gap:.9rem;}
.more-item{display:flex;gap:.9rem;border:1px solid var(--border);background:var(--bg-card);border-radius:10px;overflow:hidden;padding:.6rem;}
.more-item .cover{width:104px;height:104px;flex-shrink:0;border-radius:8px;aspect-ratio:auto;}
.more-item .more-body{padding:.15rem .25rem;min-width:0;}
.more-item .tags{margin-bottom:.4rem;}
.more-item h4{font-size:.92rem;font-weight:700;margin:0 0 .35rem;line-height:1.35;}
.more-item .excerpt{font-size:.76rem;color:var(--text-dim);line-height:1.55;margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.more-item .meta{margin-bottom:0;}
@media (max-width:560px){
  .more-item{flex-direction:column;}
  .more-item .cover{width:100%;height:150px;}
}

/* ---------- categories page ---------- */
.category-tile{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--border);display:block;text-decoration:none;}
.category-tile .tile-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,11,17,0) 35%, rgba(6,9,14,0.92) 100%);}
.category-tile .tile-label{position:absolute;left:1rem;bottom:.9rem;right:1rem;}
.category-tile .tile-label h4{font-size:1.05rem;font-weight:700;margin:0 0 .2rem;color:#fff;}
.category-tile .tile-label span{font-size:.72rem;color:var(--text-dim);}

/* ---------- article pages ---------- */
.article-banner{width:100%;aspect-ratio:16/10;position:relative;margin-top:.3rem;border-radius:14px;overflow:hidden;}
.article-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 55%, var(--bg) 100%);}

.article-head{padding-top:1.5rem;}
.article-head .tags{margin-bottom:1rem;}
.article-head h1{font-size:1.85rem;font-weight:800;line-height:1.2;text-wrap:balance;margin:0 0 .85rem;}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.77rem;color:var(--text-faint);padding-bottom:1.3rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;}
.article-meta .author{color:var(--text-dim);font-weight:600;}

.no-banner-rule{width:44px;height:3px;border-radius:3px;background:var(--accent);margin-bottom:1.05rem;}

.prose{font-size:.91rem;line-height:1.85;color:#cfd7e2;}
.prose p{margin:0 0 1.1rem;}
.prose h2{font-size:1.13rem;font-weight:700;color:var(--text);margin:1.9rem 0 .85rem;}
.prose h3{font-size:.98rem;font-weight:700;color:var(--text);margin:1.6rem 0 .7rem;}
.prose ul{margin:0 0 1.1rem;padding-left:1.2rem;}
.prose ul li{margin-bottom:.5rem;line-height:1.7;}
.prose a{text-decoration:underline;}

.pullquote{font-size:1.3rem;font-weight:700;line-height:1.4;color:var(--text);border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.05rem;margin:1.8rem 0;text-wrap:balance;}

blockquote.quote{margin:1.8rem 0;padding:1rem 1.2rem;border-left:3px solid var(--border-strong);background:var(--bg-raised);border-radius:0 8px 8px 0;}
blockquote.quote p{font-size:.9rem;font-style:italic;color:var(--text-dim);margin:0 0 .5rem;}
blockquote.quote cite{font-size:.72rem;color:var(--text-faint);font-style:normal;}

.callout{background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:10px;padding:1.05rem 1.15rem;margin:1.8rem 0;}
.callout .eyebrow{margin-bottom:.8rem;}
.callout dt{font-weight:700;font-size:.84rem;color:var(--text);margin-bottom:.3rem;}
.callout dd{margin:0 0 .85rem;font-size:.84rem;color:var(--text-dim);line-height:1.65;}
.callout dd:last-child{margin-bottom:0;}

.ol-steps{list-style:none;counter-reset:step;margin:1.5rem 0;padding:0;display:flex;flex-direction:column;gap:.85rem;}
.ol-steps li{counter-increment:step;display:flex;gap:.8rem;font-size:.87rem;line-height:1.6;color:#cfd7e2;}
.ol-steps li::before{content:counter(step);flex-shrink:0;width:1.65rem;height:1.65rem;border-radius:50%;border:1px solid var(--accent-dim);color:var(--accent);font-weight:700;font-size:.78rem;display:flex;align-items:center;justify-content:center;}
.ol-steps b{color:var(--text);}

figure.in-body{margin:1.9rem 0;}
figure.in-body .cover{aspect-ratio:16/10;margin-bottom:.55rem;}
figure.in-body figcaption{font-size:.72rem;color:var(--text-faint);line-height:1.55;}

.aside-note{display:flex;gap:.6rem;font-size:.79rem;line-height:1.65;color:var(--text-dim);background:var(--bg-raised);border-left:3px solid var(--accent-dim);border-radius:0 8px 8px 0;padding:.85rem 1rem;margin:1.8rem 0;}

.hr{border:none;border-top:1px solid var(--border);margin:2.2rem 0;}

.author-bio{display:flex;gap:.9rem;align-items:flex-start;background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;padding:1.05rem;margin:2rem 0;}
.author-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:linear-gradient(155deg,#132436,#0d3a34);object-fit:cover;}
.author-bio h4{font-size:.9rem;margin:0 0 .35rem;}
.author-bio p{font-size:.79rem;color:var(--text-dim);line-height:1.6;margin:0;}

.article-foot{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}

.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem;}

.cover--banner{aspect-ratio:21/9;}
.cover--banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,11,17,0) 22%, rgba(6,9,14,0.96) 92%);z-index:1;}
.banner-overlay-top{position:absolute;top:1rem;left:1.1rem;right:1.1rem;z-index:2;}
.banner-overlay-bottom{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;z-index:2;}
.banner-overlay-bottom h1{color:#fff;font-size:1.4rem;font-weight:800;line-height:1.22;margin:0 0 .45rem;text-wrap:balance;}
.banner-overlay-bottom .deck{color:#c9d3de;font-size:.8rem;line-height:1.55;margin:0 0 .65rem;max-width:48ch;}
.banner-overlay-bottom .article-meta{border:none;padding:0;margin:0;color:#aeb9c7;}
.banner-overlay-bottom .article-meta .author{color:#e8edf3;}

/* ---------- category duotone filter presets ---------- */
/* one class per category (set via categories.json's "filter" field) */
.filter-teal{background:linear-gradient(180deg, rgba(94,234,212,0.14) 0%, rgba(6,9,14,0.4) 55%, rgba(6,9,14,0.94) 100%) !important;}
.filter-amber{background:linear-gradient(180deg, rgba(245,166,35,0.18) 0%, rgba(6,9,14,0.4) 55%, rgba(6,9,14,0.94) 100%) !important;}
.filter-violet{background:linear-gradient(180deg, rgba(167,139,250,0.18) 0%, rgba(6,9,14,0.4) 55%, rgba(6,9,14,0.94) 100%) !important;}
.filter-rose{background:linear-gradient(180deg, rgba(244,114,182,0.16) 0%, rgba(6,9,14,0.4) 55%, rgba(6,9,14,0.94) 100%) !important;}
.filter-slate{background:linear-gradient(180deg, rgba(148,163,184,0.16) 0%, rgba(6,9,14,0.4) 55%, rgba(6,9,14,0.94) 100%) !important;}

/* ==================================================================
   Homepage — same tokens as above, its own components below
   ================================================================== */

.hero-avatar{width:112px;height:112px;margin:0 auto 1.4rem;border-radius:50%;object-fit:cover;display:block;border:3px solid rgba(94,234,212,.35);box-shadow:0 0 0 6px rgba(94,234,212,.07), 0 20px 45px rgba(0,0,0,.5);transition:transform .4s ease;}
.hero-avatar:hover{transform:scale(1.04);}
.accent-text{background:linear-gradient(90deg,var(--accent),#8ff5e6 60%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.alt-chip{display:inline-block;font-size:.78rem;color:var(--text-dim);border:1px solid var(--border-strong);border-radius:999px;padding:.4rem .95rem;margin-bottom:1.5rem;}
.hero .lead{max-width:52ch;margin:0 auto .95rem;font-size:.88rem;line-height:1.7;color:var(--text-dim);}

.quote-box{max-width:440px;margin:1.6rem auto 0;padding:1.05rem 1.3rem;border-left:3px solid var(--accent);background:var(--bg-raised);border-radius:0 10px 10px 0;text-align:left;}
.quote-primary{font-size:1.1rem;font-weight:700;color:var(--text);margin:0 0 .5rem;line-height:1.6;}
.quote-primary[dir="rtl"]{font-size:1.25rem;}
.quote-box cite{font-size:.72rem;color:var(--text-faint);font-style:normal;}

.grid-links{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.grid-links--single{grid-template-columns:1fr;}
.link-card{display:flex;align-items:center;gap:1rem;border:1px solid var(--border);background:var(--bg-card);border-radius:12px;padding:1.15rem 1.25rem;text-decoration:none;color:inherit;transition:transform .22s ease,border-color .22s ease;position:relative;}
.link-card:hover{transform:translateY(-3px);border-color:rgba(var(--tint,41,51,71),.55);}
.card-image{position:relative;width:60px;height:60px;border-radius:12px;flex-shrink:0;overflow:hidden;background:rgba(var(--tint),.12);border:1px solid rgba(var(--tint),.32);}
.card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.card-image-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;letter-spacing:.02em;color:rgb(var(--tint));}
.link-card .body{flex:1;min-width:0;text-align:left;}
.link-card h4{margin:0 0 .35rem;font-size:.96rem;font-weight:700;line-height:1.3;}
.link-card p{margin:0;font-size:.79rem;color:var(--text-dim);line-height:1.6;}
.link-card .arrow{align-self:center;color:var(--text-faint);font-size:1.05rem;transition:transform .22s ease,color .22s ease;flex-shrink:0;}
.link-card:hover .arrow{transform:translateX(3px);color:rgb(var(--tint));}
.link-card.support .card-image{animation:pulse 3.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .link-card.support .card-image{animation:none;} }
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

.tint-teal{--tint:94,234,212;}
.tint-rose{--tint:244,114,182;}
.tint-violet{--tint:167,139,250;}
.tint-amber{--tint:245,166,35;}
.section-head .eyebrow{color:rgb(var(--tint,94,234,212));border-color:rgba(var(--tint,94,234,212),.55);background:rgba(var(--tint,94,234,212),.08);}

@media (max-width:420px){
  .hero h2{font-size:1.65rem;}
  .featured-variant h3{font-size:1.25rem;}
  .article-head h1{font-size:1.5rem;}
  .pullquote{font-size:1.1rem;}
  .banner-overlay-bottom h1{font-size:1.1rem;}
  .banner-overlay-bottom .deck{display:none;}
}