/* ------------------------------------------------------------------
   abdelmounaim.xyz - a blog.
   black & white, a little gray, one loud accent. sidebar + wide body.
   ------------------------------------------------------------------ */

:root {
  --paper:    #ffffff;
  --panel:    #fafafa;
  --ink:      #111111;
  --soft:     #3c3c3c;
  --faint:    #8a8a8a;
  --rule:     #e6e6e6;
  --rule-2:   #cfcfcf;
  --codebg:   #f4f4f4;
  --linkvis:  #6b6b6b;

  --accent:      #e5342a;   /* the one loud color */
  --accent-ink:  #b5241c;
  --accent-tint: #fdecea;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "DejaVu Sans Mono", "Courier New", monospace;
}

:root[data-theme="dark"] {
  --paper:    #101012;
  --panel:    #17171a;
  --ink:      #ededed;
  --soft:     #c2c2c2;
  --faint:    #7f7f85;
  --rule:     #2a2a2e;
  --rule-2:   #3a3a40;
  --codebg:   #1b1b1f;
  --linkvis:  #9a9aa0;

  --accent:      #ff5a4d;
  --accent-ink:  #ff7c72;
  --accent-tint: #2a1614;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #101012;
    --panel:    #17171a;
    --ink:      #ededed;
    --soft:     #c2c2c2;
    --faint:    #7f7f85;
    --rule:     #2a2a2e;
    --rule-2:   #3a3a40;
    --codebg:   #1b1b1f;
    --linkvis:  #9a9aa0;

    --accent:      #ff5a4d;
    --accent-ink:  #ff7c72;
    --accent-tint: #2a1614;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 115%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- layout: sidebar + wide content ------------------------------ */

.layout {
  max-width: 74rem;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: 3.5rem;
  padding: 2.2rem 2.5rem 1.8rem;
  align-items: start;
}

.sidebar {
  border-right: 2px solid var(--ink);
  padding-right: 1.6rem;
}

.content { min-width: 0; padding-top: 0.2rem; }

/* ---- brand ------------------------------------------------------- */

.brand a { display: block; text-decoration: none; line-height: 1.05; }
.brand a:hover { text-decoration: none; }

.brand .alias {
  display: block;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.brand .real {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--faint);
  margin-top: 0.15rem;
}
.brand .real::before { content: "/ "; color: var(--accent); }
.brand a:hover .alias { color: var(--accent); }

.tagline {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--soft);
  line-height: 1.5;
}

/* ---- sidebar blocks --------------------------------------------- */

.side-block { margin-top: 1.4rem; }

.side-block h2 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.7rem;
}

.side-about p { font-size: 0.85rem; color: var(--soft); margin-bottom: 0.6rem; }
.side-about p:last-child { margin-bottom: 0; }

.elsewhere ul { list-style: none; }
.elsewhere li { margin-bottom: 0.45rem; }
.elsewhere a {
  font-size: 0.85rem;
  color: var(--soft);
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
}
.elsewhere a::before { content: "→"; color: var(--accent); font-weight: 700; }
.elsewhere a:hover { color: var(--accent); text-decoration: none; }

/* ---- theme toggle ------------------------------------------------ */

.theme-toggle {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* ---- content headings ------------------------------------------- */

.content > .page-title {
  font-size: 0.7rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.8rem;
}

/* ---- blog index -------------------------------------------------- */

.entries { list-style: none; }

.entry {
  padding: 1.4rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.entry:first-child { padding-top: 0; }
.entry:last-child { border-bottom: none; }

.entry-thumb-link { display: block; margin: 0.7rem 0 0.9rem; }
.entry-thumb {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  background: var(--panel);
  transition: border-color 0.15s ease;
}
.entry-thumb-link:hover .entry-thumb { border-color: var(--accent); }

.entry .date {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  letter-spacing: 0.5px;
}

.entry .title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin: 0.3rem 0 0.4rem;
  color: var(--ink);
}
.entry .title:hover { color: var(--accent); text-decoration: none; }

.entry .summary { color: var(--soft); font-size: 0.95rem; max-width: 42rem; }

.entry .tags { margin-top: 0.7rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.entry .tags span {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent-ink);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.08rem 0.4rem;
  letter-spacing: 0.3px;
}

.empty { color: var(--faint); font-style: italic; }

/* ---- post page --------------------------------------------------- */

.crumb { font-family: var(--mono); font-size: 0.8rem; margin-bottom: 1.6rem; }
.crumb a { color: var(--faint); }
.crumb a:hover { color: var(--accent); }

.post-head { border-bottom: 2px solid var(--ink); padding-bottom: 1.1rem; }
.post-head h1 {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}
.post-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.post-meta span + span::before { content: " · "; color: var(--rule-2); }

article { margin-top: 1.9rem; color: var(--soft); font-size: 1rem; max-width: 44rem; }
article p { margin-bottom: 1.05rem; }

article h2, article h3, article h4 { color: var(--ink); line-height: 1.2; }
article h2 {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.4px;
  margin: 2.2rem 0 0.8rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule);
}
article h3 { font-size: 1.12rem; font-weight: 700; margin: 1.7rem 0 0.6rem; }
article h4 { font-size: 0.95rem; font-weight: 700; color: var(--faint); margin: 1.4rem 0 0.5rem; }

article a { color: var(--accent-ink); border-bottom: 1px solid var(--accent-tint); }
article a:hover { border-bottom-color: var(--accent); }

article ul, article ol { margin: 0 0 1.05rem 1.4rem; }
article li { margin-bottom: 0.35rem; }
article li::marker { color: var(--accent); }

article blockquote {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 0.6rem 1rem;
  margin: 0 0 1.05rem;
  color: var(--soft);
  font-style: italic;
}

article hr { border: none; border-top: 2px dotted var(--rule-2); margin: 2rem 0; }

article img {
  max-width: 100%;
  display: block;
  margin: 1.4rem 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
}

article figure.fig { margin: 1.4rem 0; }
article figure.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  text-align: center;
  margin-top: 0.4rem;
}

article code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--codebg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.06em 0.35em;
}

article .codeblock {
  margin: 0 0 1.2rem;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  background: var(--codebg);
  overflow: hidden;
}
article .codeblock figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.35rem 0.8rem;
}
article .codeblock pre { padding: 0.85rem 0.9rem; overflow-x: auto; line-height: 1.5; }
article .codeblock code { background: none; border: none; padding: 0; font-size: 0.85rem; }

article table { border-collapse: collapse; margin: 0 0 1.2rem; font-size: 0.9rem; width: 100%; }
article th, article td { border: 1px solid var(--rule-2); padding: 0.45rem 0.7rem; text-align: left; }
article th {
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
}

.post-end { margin-top: 2.4rem; color: var(--faint); font-family: var(--mono); font-size: 0.8rem; }

/* ---- site footer ------------------------------------------------- */

.site-foot {
  max-width: 74rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.1rem 2.5rem 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--faint);
  letter-spacing: 0.3px;
}
.site-foot a { color: var(--faint); border-bottom: 1px solid var(--accent-tint); }
.site-foot a:hover { color: var(--accent); }

@media (max-width: 820px) {
  .site-foot { padding: 1.2rem 1.4rem 2rem; }
}

/* ---- responsive: collapse to single column ----------------------- */

@media (max-width: 820px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.4rem 3rem;
  }
  .sidebar {
    position: static;
    border-right: none;
    border-bottom: 2px solid var(--ink);
    padding-right: 0;
    padding-bottom: 1.6rem;
  }
  .brand .alias { font-size: 2rem; }
  .post-head h1 { font-size: 1.8rem; }
  .entry .title { font-size: 1.35rem; }
}