/* Copied from AkhaBlog blog.css shared shell/settings/TOC styles. */
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/gelasio/gelasio-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/gelasio/gelasio-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/assets/fonts/gelasio/gelasio-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("/assets/fonts/gelasio/gelasio-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --wtk-font-serif: -apple-system-ui-serif, ui-serif, "Gelasio", Georgia, Cambria, "Times New Roman", Times, serif;
  --wtk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --wtk-color-page-bg: #ffffff;
  --wtk-color-page-text: rgba(0, 0, 0, 0.76);
  --wtk-color-page-title: rgba(0, 0, 0, 0.92);
  --wtk-color-page-muted: rgba(0, 0, 0, 0.6);
  --wtk-color-page-tertiary: rgba(0, 0, 0, 0.4);
  --wtk-color-page-quaternary: rgba(0, 0, 0, 0.2);
  --wtk-color-tint-pink-rgb: 255, 48, 74;
  --wtk-color-tint-red-rgb: 255, 0, 13;
  --wtk-color-tint-green-rgb: 42, 209, 84;
  --wtk-color-tint-blue-rgb: 0, 73, 255;
  --wtk-color-tint-orange-rgb: 255, 94, 0;
  --wtk-color-tint-purple-rgb: 191, 0, 255;
  --wtk-color-glass-background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)),
    linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
  --wtk-color-glass-border: rgba(255, 255, 255, 0.64);
  --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.08);
  --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.04);
  --wtk-color-glass-highlight: rgba(255, 255, 255, 0.72);
  --wtk-color-glass-solid: #fafafa;
  --wtk-color-glass-topbar-background: rgba(255, 255, 255, 0.72);
  --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.08);
  --wtk-color-page-code-bg: rgba(0, 0, 0, 0.055);
  --wtk-color-page-rule: rgba(0, 0, 0, 0.12);
  --wtk-color-settings-active-bg: color-mix(in srgb, var(--wtk-color-accent) 10%, transparent);
  --wtk-color-settings-active-border: color-mix(in srgb, var(--wtk-color-accent) 32%, transparent);
  --wtk-layout-desktop-content-gap: 1.25em;
  --wtk-layout-footer-gap: 1.25em;
  --wtk-layout-mobile-page-gap: 1em;
  --wtk-type-body: clamp(1rem, 0.9375rem + 0.5vw, 1.125rem);
  --wtk-type-h1: clamp(1.875rem, 1.4375rem + 3.5vw, 2.75rem);
  --wtk-type-h2: clamp(1.5rem, 1.3125rem + 1.5vw, 1.875rem);
  --wtk-type-h3: clamp(1.25rem, 1.125rem + 1vw, 1.5rem);
  --wtk-type-card-title: clamp(1.25rem, 1.125rem + 1vw, 1.5rem);
  --wtk-type-card-excerpt: clamp(0.9375rem, 0.90625rem + 0.25vw, 1rem);
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}


:root[data-blog-scheme="light"] {
  color-scheme: light;
}

:root[data-blog-scheme="dark"] {
  color-scheme: dark;
}


/* Ordinary link colours are WebTintKit's accent in every state. */



.wtk-brand,
.postCardLink,
.postCard h2,
.postCard time,
.postHeader h1,
.wtk-meta,
.postSubtitle,
.wtk-prose h2,
.wtk-prose h3,
.wtk-prose h4,
.wtk-prose h5,
.wtk-prose h6,
.sourceNote,
.wtk-footer {
  transition:
    color 260ms ease,
    border-color 260ms ease;
}

.wtk-footer {
  /* Preserve this footer’s measured width without overriding the package shell. */
  --wtk-layout-content-width: 900px;
  width: min(100%, var(--wtk-layout-content-width));
  margin: var(--wtk-layout-footer-gap) auto 0;
  color: var(--wtk-color-page-muted);
  font-size: 0.84375rem;
  text-align: center;
}

.wtk-footer p {
  margin: 0;
}

.wtk-footer p + p {
  margin-top: 0.6em;
}

.wtk-footer-credit {
  font-weight: 550;
  text-decoration: none;
  transition: color 200ms ease;
}

.wtk-footer-credit:link,
.wtk-footer-credit:visited,
.wtk-footer-credit:hover,
.wtk-footer-credit:active {
  text-decoration: none;
}


.wtk-footer-credit:focus-visible {
  outline: none;
}

@media (max-width: 768px) {

  .wtk-footer {
    margin-top: var(--wtk-layout-mobile-page-gap);
  }

  .emptyState,
  .blogArticle {
    padding: 1em;
  }

  .emptyState h1,
  .emptyState h2,
  .postHeader h1 {
    font-size: 2rem;
  }

  .postLeadImage {
    margin-bottom: 1em;
  }

  .postCardBody {
    padding: 1em;
  }

  .postList {
    gap: 1em;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-blog-scheme="light"]) {
    --wtk-color-page-bg: #222628;
    --wtk-color-page-text: rgba(255, 255, 255, 0.85);
    --wtk-color-page-title: rgba(255, 255, 255, 0.95);
    --wtk-color-page-muted: rgba(255, 255, 255, 0.7);
    --wtk-color-page-tertiary: rgba(255, 255, 255, 0.45);
    --wtk-color-page-quaternary: rgba(255, 255, 255, 0.2);
    --wtk-color-glass-background: rgba(0, 0, 0, 0.28);
    --wtk-color-glass-border: rgba(255, 255, 255, 0.06);
    --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.18);
    --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.08);
    --wtk-color-glass-highlight: rgba(255, 255, 255, 0.06);
    --wtk-color-glass-solid: rgb(34, 38, 40);
    --wtk-color-glass-topbar-background: rgba(0, 0, 0, 0.28);
    --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.18);
    --wtk-color-page-code-bg: rgba(255, 255, 255, 0.08);
    --wtk-color-page-rule: rgba(255, 255, 255, 0.14);
  }

}

:root[data-blog-scheme="dark"] {
  --wtk-color-page-bg: #222628;
  --wtk-color-page-text: rgba(255, 255, 255, 0.85);
  --wtk-color-page-title: rgba(255, 255, 255, 0.95);
  --wtk-color-page-muted: rgba(255, 255, 255, 0.7);
  --wtk-color-page-tertiary: rgba(255, 255, 255, 0.45);
  --wtk-color-page-quaternary: rgba(255, 255, 255, 0.2);
  --wtk-color-glass-background: rgba(0, 0, 0, 0.28);
  --wtk-color-glass-border: rgba(255, 255, 255, 0.06);
  --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.18);
  --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.08);
  --wtk-color-glass-highlight: rgba(255, 255, 255, 0.06);
  --wtk-color-glass-solid: rgb(34, 38, 40);
  --wtk-color-glass-topbar-background: rgba(0, 0, 0, 0.28);
  --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.18);
  --wtk-color-page-code-bg: rgba(255, 255, 255, 0.08);
  --wtk-color-page-rule: rgba(255, 255, 255, 0.14);
}


/* Root profile page layer. The shell above is copied from AkhaBlog. */
.profileMain.hasPostPanel {
  align-items: start;
}

.profileContent {
  display: grid;
  grid-column: 2;
  gap: var(--wtk-layout-desktop-content-gap);
  min-width: 0;
}

.profileSectionCard {
  padding: var(--wtk-layout-desktop-content-gap);
  scroll-margin-top: var(--wtk-layout-desktop-contents-top);
}

.profileSectionCard p,
.profileSectionCard li,
.profileSectionCard blockquote {
  color: var(--wtk-color-page-text);
}

.profileSectionCard p {
  margin: 0;
}

.profileSectionHeader {
  display: grid;
  gap: 8px;
  margin-bottom: 1em;
}

.profileSectionHeader h2,
.profileIntroCard h1 {
  margin: 0;
  color: var(--wtk-color-page-title);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.profileSectionHeader h2 {
  font-size: var(--wtk-type-h2);
}

.profileIntroCard h1 {
  font-size: var(--wtk-type-h1);
}

.profileIntroTitleBlock {
  display: grid;
  gap: 0.3em;
}

.profileIntroLocation {
  width: fit-content;
  color: var(--wtk-color-page-muted);
  font-size: 0.84375rem;
  line-height: 1.2;
  margin: 0;
}

.profileIntroCard {
  display: grid;
  gap: 1.25em;
}

.profileIntroHeader {
  display: grid;
  grid-template-columns: minmax(128px, 160px) minmax(0, 1fr);
  gap: 1.25em;
  align-items: start;
}

.profileIntroHeaderBody {
  display: grid;
  gap: 1.25em;
  min-width: 0;
}

.profileIntroCopy {
  display: grid;
  gap: 0.75em;
}

.profileIntroCopy h2 {
  margin: 0;
  color: var(--wtk-color-page-title);
  font-size: var(--wtk-type-h2);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.profileLinkList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profileLinkList a,
.profileButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.375rem;
  border: 1px solid var(--wtk-color-contents-active-border);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 0.84375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.profileLinkList a,
.profileButton:not(.wtk-primary-action) {
  background: var(--wtk-color-contents-active-bg);
  color: var(--wtk-color-page-title);
}

.profileLinkList a:hover,
.profileLinkList a:focus,
.profileButton:hover,
.profileButton:focus {
  border-color: var(--wtk-color-settings-active-border);
  text-decoration: none;
}

.profileLinkList a:hover,
.profileLinkList a:focus,
.profileButton:not(.wtk-primary-action):hover,
.profileButton:not(.wtk-primary-action):focus {
  background: var(--wtk-color-settings-active-bg);
  color: var(--wtk-color-page-title);
}

.profileLinkList a:active,
.profileButton:active {
  transform: scale(0.98);
}

.profileButtonPrimary {
  min-height: 2.75rem;
  padding: 0 18px;
  border-color: color-mix(in srgb, var(--wtk-color-accent) 70%, transparent);
}


.profileButtonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 0.95em;
}

.profileAboutGrid {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  gap: 1.25em;
  align-items: start;
}

.profilePortrait {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: 8px;
}

.profileSkillList {
  display: grid;
  gap: 0;
  margin: 0;
}

.profileSkillGroup {
  display: grid;
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
  gap: 1.25em;
  border-top: 1px solid var(--wtk-color-page-rule);
  padding-top: 1em;
}

.profileSkillGroup + .profileSkillGroup {
  margin-top: 1em;
}

.profileSkillGroup dt {
  color: var(--wtk-color-page-title);
  font-size: 0.90625rem;
  font-weight: 650;
  line-height: 1.35;
}

.profileSkillGroup dd {
  min-width: 0;
  margin: 0;
  color: var(--wtk-color-page-text);
  font-size: var(--wtk-type-card-excerpt);
  line-height: 1.7;
}

.profileItemList {
  display: grid;
  gap: 0;
}

.profileItem,
.profileQuote,
.profileFooterLinks {
  border-top: 1px solid var(--wtk-color-page-rule);
  margin: 0;
  padding: 1em 0 0;
}

.profileItem + .profileItem,
.profileQuote + .profileQuote {
  margin-top: 1em;
}

.profileItemHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.profileItemHeader h3,
.profileFooterLinks h3 {
  margin: 0;
  color: var(--wtk-color-page-title);
  font-size: var(--wtk-type-h3);
  line-height: 1.18;
}


.profileItemHeader p {
  color: var(--wtk-color-page-muted);
  font-size: 0.90625rem;
  font-weight: 650;
  line-height: 1.35;
  margin-top: 4px;
}

.profileItemHeader span {
  flex: 0 0 auto;
  color: var(--wtk-color-page-tertiary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

.profileItem > p,
.profileQuote blockquote {
  margin-top: 0.85em;
}

.profileItem > .profileButton {
  margin-top: 0.95em;
}

.profileQuote blockquote {
  border-left: 4px solid var(--wtk-color-page-rule);
  margin-left: 0;
  padding-left: 1em;
}

.profileQuote figcaption {
  display: grid;
  gap: 2px;
  margin-top: 0.85em;
  color: var(--wtk-color-page-muted);
  font-size: 0.84375rem;
  line-height: 1.3;
}

.profileQuote figcaption strong {
  color: var(--wtk-color-page-title);
}

.profileHiddenRel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .profileContent {
    display: grid;
    gap: var(--wtk-layout-mobile-page-gap);
    margin-bottom: 0;
  }

  .profileSectionCard {
    padding: 1em;
    scroll-margin-top: calc(var(--wtk-layout-mobile-contents-top) + 2.333em + var(--wtk-layout-mobile-page-gap));
  }

  .profileIntroHeader {
    grid-template-columns: minmax(92px, 108px) minmax(0, 1fr);
    gap: 1em;
  }

  .profileIntroHeaderBody {
    display: contents;
  }

  .profileIntroHeaderBody > div {
    grid-column: 2;
  }

  .profileAboutGrid,
  .profileItemHeader,
  .profileSkillGroup {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profileSkillGroup {
    gap: 0.35em;
  }

  .profileItemHeader span {
    text-align: left;
  }

  .profilePortrait {
    max-width: 108px;
  }

}