/* =============================================================================
   ENGINEERING BLOG : extra.css
   Inspired by: Vercel, GitHub, Linear, Cloudflare
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,800;9..144,900&display=swap');

/* =============================================================================
   1. BRAND TOKENS : teal primary, warm off-white light surface
   ============================================================================= */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:         #01696f;
  --md-primary-fg-color--light:  #258b90;
  --md-primary-fg-color--dark:   #015358;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  #f7f6f2;
  --md-accent-fg-color:          #01696f;
  --md-typeset-a-color:          #01696f;
  --md-default-bg-color:         #f7f6f2;
  --card-bg:                     #ffffff;
  --card-shadow:                 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --card-shadow-hover:           0 4px 16px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         #4f98a3;
  --md-primary-fg-color--light:  #7ab5bd;
  --md-primary-fg-color--dark:   #3a7a83;
  --md-primary-bg-color:         #0d1117;
  --md-primary-bg-color--light:  #161b22;
  --md-accent-fg-color:          #6bb8c2;
  --md-typeset-a-color:          #4f98a3;
  --md-default-bg-color:         #0d1117;
  --md-default-bg-color--light:  #161b22;
  --md-default-bg-color--lighter:#1c2128;
  --md-default-fg-color:         #e6edf3;
  --md-default-fg-color--light:  #8b949e;
  --md-default-fg-color--lighter:#484f58;
  --md-default-fg-color--lightest:#30363d;
  --card-bg:                     #161b22;
  --card-shadow:                 0 1px 3px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.15);
  --card-shadow-hover:           0 4px 16px rgba(0,0,0,0.30), 0 8px 32px rgba(0,0,0,0.20);
}


/* =============================================================================
   2. GRID & LAYOUT : all .md-grid responsive rules consolidated here
   ============================================================================= */

.md-grid {
  max-width: 80rem !important;
  margin: 0 auto;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media screen and (max-width: 767px) {
  .md-grid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media screen and (max-width: 479px) {
  .md-grid {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}


/* =============================================================================
   3. HEADER : always dark in both themes, consistent brand anchor
   ============================================================================= */

.md-header {
  background-color: #0d1117 !important;
  border-bottom: 1px solid #21262d;
  box-shadow: 0 1px 0 #21262d, 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.md-header__title {
  font-family: "Fraunces", serif;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
  color: #e6edf3 !important;
  transition: opacity 0.2s ease;
}

.md-header__title:hover {
  opacity: 0.85;
}

.md-header__button.md-logo {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.md-header__button.md-logo:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

.md-header__button:not(.md-logo) {
  border-radius: 6px;
  color: #8b949e !important;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.md-header__button:not(.md-logo):hover {
  color: #e6edf3 !important;
  background: #21262d !important;
  transform: scale(1.08);
}


/* =============================================================================
   4. SEARCH
   ============================================================================= */

.md-search__form {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-search__form:focus-within {
  border-color: #4f98a3 !important;
  box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.15) !important;
}

.md-search__input {
  color: #e6edf3 !important;
  font-size: 0.875rem !important;
  font-weight: 500;
}

.md-search__input::placeholder {
  color: #484f58 !important;
}


/* =============================================================================
   5. NAV TABS
   ============================================================================= */

.md-tabs {
  background-color: #0d1117 !important;
  border-bottom: 1px solid #30363d !important;
}

.md-tabs__item {
  position: relative;
}

/* Push About tab to end regardless of nav order in mkdocs.yml */
.md-tabs__list {
  display: flex;
}

.md-tabs__item:has(a[href*="/about/"]) {
  order: 99;
}

.md-tabs__link {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #8b949e !important;
  opacity: 1 !important;
  position: relative;
  transition: color 0.2s ease !important;
}

.md-tabs__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #4f98a3;
  border-radius: 2px;
  transition: width 0.25s ease;
}

.md-tabs__link:hover::after,
.md-tabs__item--active .md-tabs__link::after {
  width: 100%;
}

.md-tabs__link:hover {
  color: #e6edf3 !important;
}

.md-tabs__item--active .md-tabs__link {
  color: #e6edf3 !important;
  font-weight: 800 !important;
}


/* =============================================================================
   6. SIDEBAR NAVIGATION (left nav : blog listing page)
   ============================================================================= */

.md-nav__title {
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-bottom: 0.4rem;
}

.md-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.3rem 0.6rem !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
}

.md-nav__link:hover {
  background: rgba(79, 152, 163, 0.08);
  padding-left: 1rem !important;
  color: var(--md-primary-fg-color) !important;
}

/* TOC-only active pill: scoped to secondary nav to avoid breaking sidebar nav links */
.md-nav--secondary .md-nav__link--active {
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--md-primary-fg-color) !important;
  border-radius: 6px;
  padding-left: 0.8rem !important;
  box-shadow: 0 2px 8px rgba(79, 152, 163, 0.35);
}

.md-nav--secondary .md-nav__link--active:hover {
  background: var(--md-primary-fg-color) !important;
  color: #fff !important;
  padding-left: 0.8rem !important;
}


/* Table of contents : smaller than the primary nav so longer headings
   don't wrap to two lines and the column doesn't look sparse */
.md-sidebar--secondary .md-nav__link {
  font-size: 0.72rem;
  line-height: 1.4;
}


/* =============================================================================
   7. POST SIDEBAR : must follow section 6 for specificity
   ============================================================================= */

@media screen and (min-width: 960px) {
  .md-sidebar--primary {
    width: 16.5rem !important;
  }
}

/* Shrink ALL text inside the post sidebar : must be last to win */
.md-sidebar--primary .md-sidebar__scrollwrap * {
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}

/* Back to index : single row, no wrapping */
.md-post__back .md-nav__link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Its sticky scroll-mask used --md-default-bg-color (the page background,
   #0d1117), but the sidebar panel itself sits on --md-default-bg-color--light
   (#161b22) : the mismatch showed up as a visibly darker box. */
.md-post__back .md-nav__container {
  background-color: var(--md-default-bg-color--light);
  box-shadow: 0 0 0.55rem 0.55rem var(--md-default-bg-color--light);
}

/* Author card : stacked (avatar above name/role) instead of side-by-side,
   since the sidebar is only 16.5rem wide and a horizontal layout left the
   name column too narrow to fit "Muhammad Ibtisam" on one line. */
.md-sidebar--post .md-post__profile {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.md-sidebar--post .md-profile__description {
  max-width: none !important;
  font-size: 0.7rem !important;
  line-height: 1.6 !important;
  opacity: 0.7;
}

/* Wraps the name across two lines (one word each) instead of one
   cramped line: max-width sits between the widest single word and the
   full name's width, so normal word-wrap breaks cleanly at the space. */
.md-sidebar--post .md-profile__description strong {
  display: block;
  margin: 0 auto 0.3rem;
  max-width: 7rem;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  opacity: 1;
}

.md-sidebar--post .md-profile__description strong a {
  color: var(--md-default-fg-color) !important;
}

/* Metadata rows : date, category, read time */
.md-post__meta .md-post__meta-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.3rem !important;
  font-size: 0.68rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0.3rem;
}

/* Text inside each metadata row */
.md-post__meta .md-post__meta-item span,
.md-post__meta .md-post__meta-item a,
.md-post__meta .md-post__meta-item time {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 11rem !important;
  font-size: 0.68rem !important;
}

/* Metadata icons */
.md-post__meta svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  flex-shrink: 0 !important;
  margin-top: 0.15rem !important;
}


/* =============================================================================
   8. TYPOGRAPHY
   ============================================================================= */

.md-typeset:not(.md-dialog__inner) {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--md-default-fg-color);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Fraunces", serif;
}

.md-typeset h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.35rem;
}

.md-typeset h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-top: 1.75rem;
}

.md-typeset h4 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.65;
  margin-top: 1.5rem;
}

.md-typeset p {
  margin-bottom: 1.25rem;
  line-height: 1.65;
}

/* Previously only <p> was capped at 68ch while h1/h2/h3 and code blocks
   stretched to the full content column : paragraphs stopped short of
   everything else, reading as a large empty gap next to the table of
   contents. A fixed rem cap didn't hold up either : Material scales the
   root font-size at wider breakpoints, so the gap just grew again on
   large screens. Matching the code block's own full width keeps every
   element flush with the same edge regardless of viewport size. */
.md-content--post .md-typeset h1,
.md-content--post .md-typeset h2,
.md-content--post .md-typeset h3,
.md-content--post .md-typeset h4,
.md-content--post .md-typeset p,
.md-content--post .md-typeset ul,
.md-content--post .md-typeset ol,
.md-content--post .md-typeset blockquote {
  max-width: none;
}

.md-typeset h1 + p,
.md-typeset h1 + .reading-time + p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  font-weight: 400;
  max-width: 60ch;
}

.md-typeset strong {
  font-weight: 700;
  color: var(--md-default-fg-color);
}


/* =============================================================================
   9. POST EXCERPT CARDS (blog listing)
   ============================================================================= */

.md-post {
  background: var(--card-bg);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.md-post:hover {
  box-shadow: inset 3px 0 0 var(--md-primary-fg-color), var(--card-shadow-hover);
  border-color: var(--md-primary-fg-color);
  transform: translateY(-3px);
}

.md-post h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.md-post h2 a {
  transition: color 0.2s ease;
}

.md-post h2 a:hover,
.md-post h2 a:focus {
  color: var(--md-primary-fg-color--light) !important;
}

.md-post .md-post__action a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--md-primary-fg-color);
  transition: gap 0.2s ease, opacity 0.2s ease;
}

.md-post .md-post__action a::after {
  content: "\2192";
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.md-post .md-post__action a:hover {
  opacity: 0.85;
  gap: 0.65rem;
}

.md-post .md-post__action a:hover::after {
  transform: translateX(2px);
}

/* Category link inside card meta */
.md-post .md-meta .md-meta__item a {
  font-weight: 600;
  color: var(--md-primary-fg-color);
}

.md-post .md-meta__item::after {
  color: var(--md-primary-fg-color--light) !important;
  opacity: 0.6;
}

/* Tighter spacing inside excerpt cards */
.md-post--excerpt .md-post__content p {
  max-width: none;
  margin-bottom: 0.75rem;
}

.md-post--excerpt .md-post__action {
  margin-top: 0.25rem;
}


/* =============================================================================
   10. TAGS
   ============================================================================= */

.md-tag {
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.85rem;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  border: 1px solid rgba(79, 152, 163, 0.3);
  background: rgba(79, 152, 163, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* tags with md-tag-icon but no specific md-tag--X variant show # by default — suppress it */
.md-tag.md-tag-icon:not([class*="md-tag--"])::before {
  display: none;
}

.md-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  border-color: var(--md-primary-fg-color);
  background: rgba(79, 152, 163, 0.18);
}


/* =============================================================================
   11. CODE BLOCKS
   ============================================================================= */

.md-typeset pre {
  border-radius: 10px;
  border-left: 4px solid var(--md-primary-fg-color);
  box-shadow: var(--card-shadow);
}

.md-typeset code {
  font-size: 0.875em;
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.md-typeset :not(pre) > code {
  background: rgba(79, 152, 163, 0.1);
  border: none;
  color: var(--md-primary-fg-color);
  font-weight: 600;
  border-radius: 4px;
}

.md-clipboard {
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.md-clipboard:hover {
  color: var(--md-primary-fg-color) !important;
  background: rgba(79, 152, 163, 0.1);
}


/* =============================================================================
   12. ADMONITIONS
   ============================================================================= */

.md-typeset .admonition {
  border-radius: 8px;
  border-left-width: 4px;
  font-size: 0.95rem;
  box-shadow: var(--card-shadow);
}

.md-typeset .admonition-title {
  font-weight: 700;
}


/* =============================================================================
   12b. BLOCKQUOTES
   ============================================================================= */

.md-typeset blockquote {
  border-left: 4px solid var(--md-primary-fg-color);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  background: rgba(79, 152, 163, 0.04);
  border-radius: 0 8px 8px 0;
}

.md-typeset blockquote p:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   12c. IMAGES
   ============================================================================= */

.md-typeset img:not(.twemoji):not(.emojione):not([src*="avatar"]) {
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}


/* =============================================================================
   12d. LISTS
   ============================================================================= */

.md-typeset ul:not([class]) li,
.md-typeset ol:not([class]) li {
  margin-bottom: 0.35rem;
}

.md-typeset ol:not([class]) {
  counter-reset: ol-counter;
}

.md-typeset ol:not([class]) > li {
  counter-increment: ol-counter;
}

.md-typeset ol:not([class]) > li::marker {
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

.md-typeset ul:not([class]) > li::marker {
  color: var(--md-primary-fg-color);
}


/* =============================================================================
   13. LAST UPDATED
   ============================================================================= */

.md-source-file__fact::before {
  content: "Last Updated: ";
  font-weight: 600;
}

.md-source-file__fact svg {
  display: none !important;
}

.md-source-file__fact::after {
  content: " PKT";
  font-weight: 600;
  color: var(--md-default-fg-color);
}


/* =============================================================================
   14. FOOTER
   ============================================================================= */

/* Footer: distinct background + teal gradient top accent */
.md-footer {
  margin-top: 1.5rem;
  border-top: none;
  position: relative;
}

.md-footer::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--md-primary-fg-color) 0%, transparent 65%);
}

[data-md-color-scheme="slate"] .md-footer {
  background: #161b22 !important;
  border-top: 1px solid #21262d;
}

[data-md-color-scheme="default"] .md-footer {
  background: #eeecea !important;
  border-top: 1px solid #d5d2ce;
}

.md-footer-meta {
  padding: 2rem 0 1.5rem;
}

.md-copyright {
  font-size: 0.78rem;
  opacity: 0.7;
}

.md-social {
  gap: 0.25rem;
}

.md-social__link {
  border-radius: 6px;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  opacity: 0.6;
}

.md-social__link:hover {
  transform: translateY(-3px) scale(1.1);
  opacity: 1 !important;
  color: var(--md-primary-fg-color) !important;
}

.md-footer__inner {
  padding: 0.75rem 0;
}

.md-footer__link {
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 0.2s ease;
}


.md-footer__link:hover {
  color: var(--md-primary-fg-color) !important;
}


/* =============================================================================
   15. RESPONSIVE TYPOGRAPHY : .md-grid rules in section 2
   ============================================================================= */

@media screen and (max-width: 767px) {
  .md-typeset h1 { font-size: 1.5rem; }
  .md-typeset h2 { font-size: 1.2rem; }
  .md-typeset h3 { font-size: 1.05rem; }
  .md-typeset p  { max-width: 100%; }

  .md-post { padding: 1rem; }

  .md-tabs__link {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
  }
}


/* =============================================================================
   16. TABLES : font-size reset to match body text
   ============================================================================= */

.md-typeset table:not([class]) {
  font-size: 0.8rem !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  font-size: inherit !important;
  font-weight: 400;
  padding: 0.6rem 0.85rem;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: rgba(79, 152, 163, 0.04);
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: none;
}


/* =============================================================================
   18. PAGINATION
   ============================================================================= */

.md-post__pager a {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.md-post__pager a:hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
  background: rgba(79, 152, 163, 0.06);
}


/* =============================================================================
   19. POST READING UX : progress bar + reading time, injected by extra.js
   ============================================================================= */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--md-primary-fg-color);
  z-index: 10;
  pointer-events: none;
}

.reading-time {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
}


/* =============================================================================
   20. TEXT SELECTION
   ============================================================================= */

::selection {
  background: rgba(1, 105, 111, 0.25);
  color: inherit;
}

[data-md-color-scheme="slate"] ::selection {
  background: rgba(79, 152, 163, 0.30);
}


/* =============================================================================
   21. LINK HOVER UNDERLINES
   ============================================================================= */

.md-content .md-typeset a:not(.md-tag):not(.headerlink) {
  text-decoration: none;
  background-image: linear-gradient(var(--md-primary-fg-color), var(--md-primary-fg-color));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}

.md-content .md-typeset a:not(.md-tag):not(.headerlink):hover {
  background-size: 100% 1px;
}


/* =============================================================================
   22. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-default-fg-color--lighter);
}


/* =============================================================================
   23. BACK-TO-TOP BUTTON
   ============================================================================= */

.md-top {
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.md-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}


/* =============================================================================
   24. 404 PAGE
   ============================================================================= */

.error-page {
  text-align: center;
  padding: 4rem 1rem 6rem;
  max-width: 480px;
  margin: 0 auto;
}

.error-page__code {
  font-family: "Fraunces", serif;
  font-size: 6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--md-primary-fg-color);
  opacity: 0.25;
  margin-bottom: 0.5rem;
}

.error-page__title {
  font-family: "Fraunces", serif;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.error-page__message {
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.error-page__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--md-primary-fg-color);
  border: 1px solid var(--md-primary-fg-color);
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.error-page__link:hover {
  background: var(--md-primary-fg-color);
  color: #fff;
}


/* =============================================================================
   25. POST AUTHOR CARD (bottom of post)
   ============================================================================= */

.md-sidebar--post .md-post__authors {
  background: var(--card-bg);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 1.25rem 1rem !important;
  box-shadow: var(--card-shadow);
}

.md-post--excerpt .md-post__authors {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none;
}

.md-post--excerpt .md-author {
  width: 2rem !important;
  height: 2rem !important;
}

.md-post--excerpt .md-author img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover;
  box-shadow: none !important;
  vertical-align: middle;
}


/* =============================================================================
   26. HERO SECTION (homepage only)
   ============================================================================= */

.hero {
  border-bottom: none;
  background: transparent;
}

.hero ~ .md-main .md-content__inner {
  padding-top: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 52rem;
}

.hero ~ .md-main .md-sidebar--primary {
  display: none;
}

.hero__inner {
  padding: 1.75rem 0 0.5rem;
  max-width: 52rem !important;
  margin: 0 auto !important;
}

.hero__title {
  font-family: "Fraunces", serif;
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--md-default-fg-color);
}

.hero__tagline {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1rem;
  max-width: 38rem;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.hero__author {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--md-default-fg-color);
}

.hero__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.hero__separator {
  opacity: 0.3;
}

.hero__role {
  color: var(--md-primary-fg-color);
}

@media screen and (max-width: 767px) {
  .hero__inner { padding: 1.5rem 0.5rem 0.75rem; }
  .hero__title { font-size: 2rem; }
  .hero__tagline { font-size: 0.9rem; }
}


/* =============================================================================
   26b. TAXONOMY PAGE HEADERS (archive, category, tags)
   ============================================================================= */

.md-content:not(.md-content--post) .md-content__inner > h1,
.md-content:not(.md-content--post) .md-content__inner > header > h1 {
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Page titles aren't link targets : drop the permalink icon */
.md-content:not(.md-content--post) .md-content__inner > h1 .headerlink,
.md-content:not(.md-content--post) .md-content__inner > header > h1 .headerlink {
  display: none;
}

/* Blog index pages (home/page 2+) have h1#home — archive/category pages have different IDs.
   Hide the redundant title and sidebar only on the blog listing pages. */
h1#home,
.md-content__inner > header:has(h1#home) {
  display: none;
}

.md-main:has(h1#home) .md-sidebar--primary {
  display: none;
}

.md-main:has(h1#home) .md-content__inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 52rem;
}

/* Archive pages: JS inserts .arch-chip-bar; same layout treatment as category pages */
.md-main:has(.arch-chip-bar) .md-sidebar--primary,
.md-main:has(.arch-chip-bar) .md-sidebar--secondary {
  display: none !important;
}

.md-main:has(.arch-chip-bar) .md-content {
  flex: 1 !important;
}

.md-main:has(.arch-chip-bar) .md-content__inner {
  max-width: 52rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 3rem !important;
}

/* Category pages: JS inserts .cat-chip-bar; CSS hides both sidebars and centers content */
.md-main:has(.cat-chip-bar) .md-sidebar--primary,
.md-main:has(.cat-chip-bar) .md-sidebar--secondary {
  display: none !important;
}

/* Force .md-content to expand into the freed sidebar space */
.md-main:has(.cat-chip-bar) .md-content {
  flex: 1 !important;
}

.md-main:has(.cat-chip-bar) .md-content__inner {
  max-width: 52rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 3rem !important;
}

/* Tags page: JS inserts .tag-chip-bar; same centered layout as archive/category */
.md-main:has(.tag-chip-bar) .md-sidebar--primary,
.md-main:has(.tag-chip-bar) .md-sidebar--secondary {
  display: none !important;
}

.md-main:has(.tag-chip-bar) .md-content {
  flex: 1 !important;
}

.md-main:has(.tag-chip-bar) .md-content__inner {
  max-width: 52rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 3rem !important;
}

/* Tag section headings on /tags/ : tighten the default h2 rhythm and
   turn the tag pill into a compact section divider. Each section is
   wrapped in .tag-section by extra.js (needed for single-attribute
   filtering), so the heading is no longer a direct child of the page. */
.tag-section > h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0;
  border: none;
}

.tag-section > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-default-fg-color--lightest);
}

.tag-section > h2 .headerlink {
  display: none;
}

.tag-section > h2 .md-tag {
  margin: 0;
}

.tag-section > ul {
  margin: 0.5rem 0 0 1.25rem;
}

/* Post-count badge, injected into each tag pill by extra.js : a small
   rounded bubble attached to the end of the pill, matching a tag-cloud
   count-badge look. */
.md-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--md-primary-fg-color);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Chip bar at the top of /tags/ : All + one chip per tag, alphabetical.
   Chips only scroll to their section (see extra.js) : nothing hides, so
   there's no risk of the mass display:none paint bug from the earlier
   filtering version. */
.tag-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 20px;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.85rem;
  text-transform: capitalize;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tag-chip:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-color: var(--md-primary-fg-color);
  background: rgba(79, 152, 163, 0.12);
  color: var(--md-primary-fg-color);
}

.tag-chip--active {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #fff;
}

/* :hover (0,2,0) otherwise beats --active (0,1,0) on specificity alone,
   so hovering the already-active chip reset its background and text back
   to the plain hover state : teal text on the chip's own teal fill,
   invisible except for the count badge. */
.tag-chip--active:hover {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #fff;
}

.tag-chip .md-tag-count {
  margin-left: 0.45rem;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: 0.62rem;
}

/* Active chip already fills with teal : swap the badge for translucent
   white so it doesn't blend into the chip's own background. */
.tag-chip--active .md-tag-count {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}


/* =============================================================================
   27. SHARE BUTTONS (post pages, injected by extra.js)
   ============================================================================= */

.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.share-buttons__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  margin-right: 0.25rem;
}

.share-buttons__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.share-buttons__btn:hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
  background: rgba(79, 152, 163, 0.06);
}


/* =============================================================================
   28. RICH FOOTER
   ============================================================================= */

.site-footer {
  padding: 2rem 1rem 1.75rem;
}

.site-footer__brand {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--md-default-fg-color);
  margin-bottom: 0.65rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 2.5rem;
  margin: 0 auto 2rem;
  align-items: start;
  max-width: 52rem;
}

.site-footer__heading {
  font-family: "Fraunces", serif;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
  color: var(--md-default-fg-color);
}

/* teal accent rule under each section heading */
.site-footer__heading::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--md-primary-fg-color);
  border-radius: 1px;
  margin-top: 0.45rem;
}

.site-footer__text {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: 0.45rem;
}

.site-footer__list a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.site-footer__list a:hover {
  color: var(--md-primary-fg-color);
  padding-left: 0.4rem;
}

.site-footer__bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  text-align: center;
}

.site-footer__copyright {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  opacity: 0.7;
}

.site-footer__copyright a {
  color: var(--md-primary-fg-color);
}

@media screen and (max-width: 767px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Hide the default Material footer meta since we replaced it */
.md-footer-meta {
  display: none;
}


/* =============================================================================
   29. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   27. FOCUS INDICATORS
   ============================================================================= */

:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.md-header :focus-visible {
  outline-color: #4f98a3;
}


/* =============================================================================
   28. ABOUT PAGE : hero + ecosystem cards
   ============================================================================= */

/* Hero */
.about-hero {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 2rem 2rem 1.75rem;
  border-radius: 16px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(79, 152, 163, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.about-avatar {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--md-primary-fg-color);
  box-shadow: 0 0 0 4px rgba(79, 152, 163, 0.15);
  object-fit: cover;
}

.about-hero__body {
  flex: 1;
  min-width: 0;
}

.about-hero__meta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.3rem;
}

.about-hero__name {
  font-family: "Fraunces", serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.65rem;
  color: var(--md-default-fg-color);
}

.about-hero__bio {
  font-size: 0.88rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 480px;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.about-btn--primary {
  background: var(--md-primary-fg-color);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79, 152, 163, 0.25);
}

.about-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79, 152, 163, 0.4);
  color: #fff !important;
}

.about-btn--ghost {
  background: transparent;
  color: var(--md-default-fg-color) !important;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.about-btn--ghost:hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color) !important;
}

/* Ecosystem section */
.about-eco {
  margin-top: 0;
}

.about-eco__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.35rem;
}

.about-eco__heading {
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  margin: 0 0 1.5rem;
  line-height: 1.25;
}

.about-eco__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Ecosystem cards */
.about-eco-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.35rem;
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--card-bg);
  text-decoration: none !important;
  color: var(--md-default-fg-color) !important;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border-top-width: 3px;
}

.about-eco-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.about-eco-card--green  { border-top-color: #4caf50; }
.about-eco-card--purple { border-top-color: #9c6bde; }
.about-eco-card--blue   { border-top-color: #4b9de0; }
.about-eco-card--orange { border-top-color: #e6813a; }

.about-eco-card:hover.about-eco-card--green  { border-color: #4caf50; }
.about-eco-card:hover.about-eco-card--purple { border-color: #9c6bde; }
.about-eco-card:hover.about-eco-card--blue   { border-color: #4b9de0; }
.about-eco-card:hover.about-eco-card--orange { border-color: #e6813a; }

.about-eco-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.about-eco-card__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
}

.about-eco-card--green  .about-eco-card__tag { color: #4caf50; }
.about-eco-card--purple .about-eco-card__tag { color: #9c6bde; }
.about-eco-card--blue   .about-eco-card__tag { color: #4b9de0; }
.about-eco-card--orange .about-eco-card__tag { color: #e6813a; }

.about-eco-card__arrow {
  font-size: 0.9rem;
  color: var(--md-default-fg-color--light);
  transition: transform 0.2s ease, color 0.2s ease;
}

.about-eco-card:hover .about-eco-card__arrow {
  transform: translate(2px, -2px);
  color: var(--md-default-fg-color);
}

.about-eco-card__title {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--md-default-fg-color);
}

.about-eco-card__desc {
  font-size: 0.83rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.6;
  margin: 0;
}

/* About page: navigation hidden → content is full-width; center and tighten top gap */
.md-content:has(.about-hero) .md-content__inner {
  max-width: 52rem;
  margin: 0 auto;
  padding-top: 1rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 560px) {
  .about-hero {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .about-eco__grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   29. PRINT STYLESHEET
   ============================================================================= */

@media print {
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .reading-progress,
  .md-clipboard,
  .headerlink,
  .md-source-file,
  .md-post__authors {
    display: none !important;
  }

  .md-content {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .md-typeset {
    font-size: 11pt;
    color: #000;
  }

  .md-typeset a {
    color: #000;
    text-decoration: underline;
  }

  .md-typeset a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .md-typeset pre {
    border: 1px solid #ccc;
    border-left-width: 4px;
    page-break-inside: avoid;
  }

  .md-typeset table {
    page-break-inside: avoid;
  }

  .md-typeset img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}