/* Site styles layered over m-squareys.compiled.css.

   Tokens
   ------
   ink #1a2028   paper #f6f7f8   accent #e8501f   line #e5e8eb
   display Bricolage Grotesque   body Source Sans Pro   mono Source Code Pro */

:root {
  --sq-ink: #1a2028;
  --sq-muted: #5c6670;
  --sq-line: #e5e8eb;
  --sq-line-soft: #eef0f2;
  --sq-accent: #e8501f;
  --sq-accent-soft: #fbe9e2;
  --sq-split-a: rgba(232, 80, 31, 0.5);
  --sq-split-b: rgba(23, 165, 182, 0.5);
  --sq-display: 'Bricolage Grotesque', 'Source Sans Pro', system-ui, sans-serif;
}

/* ---- Display typography ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sq-display);
  letter-spacing: -0.02em;
}

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

/* ---- Wordmark ---------------------------------------------------------- */
#m-brand-name {
  font-family: var(--sq-display);
  font-weight: 700;
  color: var(--sq-ink);
  letter-spacing: -0.01em;
  text-shadow: 0.012em 0 0 var(--sq-split-a), -0.012em 0 0 var(--sq-split-b);
}
#m-brand-description {
  color: var(--sq-muted);
  font: 600 15pt/1.3 'Source Sans Pro', sans-serif;
  letter-spacing: 0.01em;
}

/* ---- Navigation -------------------------------------------------------- */
body > header > nav #m-navbar-collapse li a {
  font-weight: 600;
  border-radius: 7px;
  transition: color .15s, background-color .15s, border-color .15s;
}
body > header > nav #m-navbar-collapse li a#m-navbar-current {
  color: var(--sq-accent);
  border-color: var(--sq-accent);
}
body > header > nav a:hover,
body > header > nav a:focus,
body > header > nav a:active { color: var(--sq-accent); }
header nav li:hover { background-color: transparent; }

/* ---- Tag & category chips --------------------------------------------- */
/* Footer tag links are scoped to the <p> so the prev/next post navigation
   links in the same <footer> keep their default styling. */
ul.m-tagcloud li a,
article footer p a[href*="/blog/tag/"] {
  display: inline-block;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sq-muted);
  text-decoration: none;
  border: 1px solid var(--sq-line);
  border-radius: 999px;
  padding: 3px 11px;
  margin: 0 4px 6px 0;
  transition: color .13s, border-color .13s, background-color .13s;
}
ul.m-tagcloud li a::before,
article footer p a[href*="/blog/tag/"]::before {
  content: "#";
  opacity: .5;
}
ul.m-tagcloud li a:hover,
article footer p a[href*="/blog/tag/"]:hover {
  color: var(--sq-accent);
  border-color: var(--sq-accent);
  background-color: var(--sq-accent-soft);
}
/* Uniform chip size across the tag cloud. */
ul.m-tagcloud { padding-left: 0; line-height: 2.1; }
ul.m-tagcloud li { display: inline; }
ul.m-tagcloud li.m-tag-1 a,
ul.m-tagcloud li.m-tag-2 a,
ul.m-tagcloud li.m-tag-3 a,
ul.m-tagcloud li.m-tag-4 a,
ul.m-tagcloud li.m-tag-5 a { font-size: 12.5px; }

/* Category chip in article footers: the "in <category>" link, i.e. a /blog/
   link in the footer paragraph that is not a /blog/tag/ link. */
article footer p a[href^="/blog/"]:not([href*="/tag/"]) {
  display: inline-block;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--sq-accent);
  background-color: var(--sq-accent-soft);
  border-radius: 6px;
  padding: 2px 9px;
}

/* ---- Profile photo (Welcome page) ------------------------------------- */
.m-profile-photo {
  float: right;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 1rem 1.5rem;
  border: 3px solid var(--sq-line);
  box-shadow: 0 8px 24px -12px rgba(20, 26, 31, .35);
}
@media screen and (max-width: 575px) {
  .m-profile-photo { float: none; display: block; margin: 0 auto 1rem; }
}

/* ---- Projects page ----------------------------------------------------- */
/* Left-gutter table of contents, built and positioned by the script in
   Page.astro. */
.projects-toc {
  position: fixed;
  top: 96px;
  width: 200px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  display: none;
  z-index: 5;
}
.projects-toc .toc-label {
  display: block;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sq-muted);
  margin: 0 0 8px 12px;
}
.projects-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--sq-line);
}
.projects-toc a {
  display: block;
  padding: 4px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.3;
  color: var(--sq-muted);
  text-decoration: none;
  transition: color .13s, border-color .13s;
}
.projects-toc a:hover { color: var(--sq-ink); }
.projects-toc a.active {
  color: var(--sq-accent);
  border-left-color: var(--sq-accent);
  font-weight: 600;
}

/* Each project reads as a distinct section. */
.page-projects h2 {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sq-line);
  font-size: 1.9rem;
}
/* "All posts tagged X" is a navigational link, not a tag chip. */
.page-projects a[href*="/blog/tag/"] {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sq-muted);
  text-decoration: none;
  transition: color .13s;
}
.page-projects a[href*="/blog/tag/"]::after { content: " \2192"; }
.page-projects a[href*="/blog/tag/"]:hover { color: var(--sq-accent); }
/* "Related blog posts:" label + a compact two-column list. */
.page-projects p em {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sq-muted);
}
.page-projects .m-col-l-10 ul {
  columns: 2;
  column-gap: 2.5rem;
  padding-left: 1.1rem;
}
.page-projects .m-col-l-10 ul li { break-inside: avoid; margin-bottom: 0.15rem; }
@media (max-width: 640px) { .page-projects .m-col-l-10 ul { columns: 1; } }

/* "Play in browser" game cards. */
.game-card {
  display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 400px;
  margin: 1.25rem 0; padding: 0.6rem; border: 1px solid var(--sq-line);
  border-radius: 12px; background: #fff; text-decoration: none; color: inherit;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.game-card:hover {
  background: var(--sq-accent-soft); border-color: var(--sq-accent);
  box-shadow: 0 10px 24px -14px rgba(20, 26, 31, .35);
}
.game-card img {
  flex: 0 0 auto; width: 160px; height: 120px; object-fit: cover;
  border-radius: 7px; image-rendering: pixelated; background: #000; display: block;
}
.game-card-text { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.3; }
.game-card-text strong { font-family: var(--sq-display); font-size: 1.15rem; color: var(--sq-accent); }
.game-card-text small { font-family: 'Source Code Pro', ui-monospace, monospace; color: var(--sq-muted); font-size: 0.78rem; }
@media (max-width: 420px) { .game-card img { width: 112px; height: 84px; } }

/* ---- Footer ------------------------------------------------------------ */
body > footer > nav {
  background-color: var(--sq-ink);
  color: #aeb6bf;
  text-align: left;
  padding: 44px 0 26px;
  border-top: 3px solid var(--sq-accent);
  font-size: 0.9rem;
}
body > footer > nav h3,
body > footer > nav h3 a {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f8a95;
  margin-bottom: 0.7rem;
}
body > footer > nav ul { line-height: 1.9; }
body > footer > nav li { padding: 1px 0; }
body > footer > nav a { color: #d6dbe0; }
body > footer > nav a:hover,
body > footer > nav a:focus,
body > footer > nav a:active { color: var(--sq-accent); }
/* Fine-print row, separated by a hairline and centred. */
body > footer > nav > .m-container > .m-row:last-child {
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 18px;
}
body > footer > nav > .m-container > .m-row:last-child p {
  text-align: center;
  color: #6b7580;
  font-size: 0.8rem;
  margin: 0;
}
body > footer > nav > .m-container > .m-row:last-child a { color: #9aa3ad; }
body > footer > nav > .m-container > .m-row:last-child a:hover { color: var(--sq-accent); }

/* ---- Sidebar category list -------------------------------------------- */
.m-navpanel h3 {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sq-muted);
}
.m-navpanel ol.m-block-bar-m { list-style: none; padding-left: 0; }
.m-navpanel ol.m-block-bar-m li a {
  display: block;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid var(--sq-line-soft);
  transition: color .13s;
}
.m-navpanel ol.m-block-bar-m li:last-child a { border-bottom: none; }
.m-navpanel ol.m-block-bar-m li a:hover { color: var(--sq-accent); }