@font-face {
  font-family: "Geist";
  font-display: swap;
  src: url("assets/geist-variable.woff2") format("woff2");
}

:root {
  --ghost-accent-color: #1d9bf0;
  --color-contrast: #000;
  --color-background: #f9f9f9;
  --color-background-100: #fff;
  --color-background-300: #eaeaea;
  --color-background-400: #dbdbdb;
  --color-foreground: #333;
  --color-secondary: grey;
  --color-border: hsla(0, 0%, 40%, .2);
  --font-small: .875rem;
  --font-h1: 1.125rem;
  --font-h2: 1rem;
  --font-h3: 1rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --spacing-1: .125rem;
  --spacing-2: .25rem;
  --spacing-3: .375rem;
  --spacing-4: .5rem;
  --spacing-5: .625rem;
  --spacing-6: .75rem;
  --spacing-7: 1rem;
  --spacing-8: 1.25rem;
  --spacing-9: 1.875rem;
  --spacing-10: 2.5rem;
  --radius-1: 6px;
  --radius-2: 12px;
  --padding-h: var(--spacing-8);
  --container-width: 480px;
  color-scheme: light;
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  background: var(--color-background);
}

body {
  margin: 0;
  padding: calc(var(--spacing-10) + var(--spacing-4)) 0 var(--spacing-8);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0) 18rem),
    var(--color-background);
  color: var(--color-foreground);
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-variation-settings: "wght" var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.home-template {
  padding-bottom: 0;
}

.post-template {
  padding-bottom: calc(var(--spacing-10) + env(safe-area-inset-bottom));
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  width: min(var(--container-width), calc(100% - var(--padding-h) * 2));
  margin-right: auto;
  margin-left: auto;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-contrast);
  font-variation-settings: "wght" var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

p {
  margin: 0 0 calc(var(--spacing-8) + var(--spacing-1));
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-contrast);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: .075em;
  text-underline-offset: .15em;
  transition: color .1s ease;
}

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

strong {
  color: var(--color-contrast);
  font-variation-settings: "wght" var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip-path: inset(50%) !important;
}

.screen-reader-text:focus {
  top: var(--spacing-7);
  left: var(--spacing-7);
  width: auto !important;
  height: auto !important;
  clip-path: none !important;
  z-index: 10;
}

.header {
  margin-bottom: var(--spacing-10);
}

.header-container {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
}

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-contrast);
  text-decoration: none;
}

.logo img {
  width: 5rem;
  height: 5rem;
  border: 2px solid var(--color-background-100);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--color-border), 0 18px 44px rgba(0, 0, 0, .09);
}

.navigation {
  display: flex;
  align-items: center;
}

.navigation ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.home-template .section-hero {
  padding-bottom: var(--spacing-8);
}

.section-hero p {
  margin-bottom: 0;
}

.identity-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-4);
}

.section-hero h1 {
  font-size: 2rem;
  font-variation-settings: "wght" var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  line-height: 1.08;
}

.hero-lead {
  color: var(--color-contrast);
  font-size: 1.25rem;
  font-variation-settings: "wght" var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.42;
}

.bio-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-8);
}

.bio-copy p {
  color: #3d3d3d;
  line-height: 1.58;
}

.navigation-socials {
  margin: var(--spacing-2) 0 0;
}

.social-links {
  gap: var(--spacing-4) !important;
}

.social-link {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  border-radius: var(--radius-2);
  padding: var(--spacing-4) var(--spacing-7);
  background: var(--color-background-300);
  color: var(--color-contrast);
  font-size: var(--font-small);
  font-variation-settings: "wght" var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.social-link svg {
  width: .875rem;
  height: .875rem;
  flex: 0 0 auto;
}

.social-link:hover {
  background: var(--color-background-400);
  color: var(--color-contrast);
  transform: translateY(-1px);
}

.social-links li:first-child .social-link {
  background: var(--color-contrast);
  color: var(--color-background-100);
}

.social-links li:first-child .social-link:hover {
  background: #262626;
  color: var(--color-background-100);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-3);
  color: var(--color-secondary);
  font-variation-settings: "wght" var(--font-weight-medium);
}

.post-meta {
  margin-top: var(--spacing-2);
  font-size: var(--font-small);
}

.post-template .header {
  margin-bottom: var(--spacing-9);
}

.post-header {
  margin-bottom: var(--spacing-8);
}

.post-back {
  display: inline-flex;
  margin-bottom: var(--spacing-6);
  color: var(--color-secondary);
  font-size: var(--font-small);
  font-variation-settings: "wght" var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  text-decoration-color: transparent;
}

.post-back:hover {
  color: var(--color-contrast);
  text-decoration-color: currentColor;
}

.post-title {
  max-width: 100%;
  font-size: 2.5rem;
  font-variation-settings: "wght" var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: 0;
}

.post-feature-image {
  margin-top: var(--spacing-8);
  margin-bottom: 0;
}

.post-feature-image img {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-background-300);
  object-fit: contain;
}

.post-content {
  position: relative;
  margin-top: var(--spacing-10);
  font-size: 1.0625rem;
  line-height: 1.72;
}

.post-content > * {
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--spacing-8);
}

.post-content > :first-child {
  margin-top: 0;
}

.post-content > h2 {
  margin-top: calc(var(--spacing-10) + var(--spacing-3));
  font-size: 1.35rem;
  font-variation-settings: "wght" var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  scroll-margin-top: var(--spacing-7);
}

.post-content blockquote {
  border-left: 3px solid var(--color-contrast);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  padding: var(--spacing-7) var(--spacing-8);
  background: var(--color-background-100);
  color: var(--color-contrast);
  font-size: 1.08em;
  line-height: 1.55;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .035);
}

.post-content ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.post-content li {
  position: relative;
  padding-left: var(--spacing-8);
}

.post-content li + li {
  margin-top: .5em;
}

.post-content li::before {
  position: absolute;
  top: .78rem;
  left: .5rem;
  width: .188rem;
  height: .188rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.post-content hr {
  height: 1px;
  border: 0;
  background: var(--color-border);
}

.kg-card {
  max-width: var(--container-width);
  margin-top: calc(var(--spacing-9) + var(--spacing-2));
  margin-bottom: calc(var(--spacing-9) + var(--spacing-2));
}

.kg-image {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-background-300);
}

figcaption {
  margin-top: var(--spacing-4);
  color: var(--color-secondary);
  font-size: var(--font-small);
  text-align: center;
}

@media (max-width: 540px) {
  body {
    padding-top: var(--spacing-8);
  }

  .home-template {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: var(--spacing-10);
  }

  .home-template .content {
    flex: 1 0 auto;
  }

  .home-template .header {
    margin-bottom: var(--spacing-8);
  }

  .home-template .logo img {
    width: 4.25rem;
    height: 4.25rem;
  }

  .home-template .section-hero {
    flex: 1 0 auto;
    gap: var(--spacing-7);
    padding-bottom: calc(var(--spacing-10) + env(safe-area-inset-bottom));
  }

  .home-template .identity-block {
    padding-bottom: 0;
  }

  .home-template .section-hero h1 {
    font-size: 1.75rem;
  }

  .home-template .hero-lead {
    font-size: 1.125rem;
    line-height: 1.38;
  }

  .home-template .bio-copy {
    gap: var(--spacing-6);
    padding-top: var(--spacing-7);
  }

  .home-template .bio-copy p {
    line-height: 1.48;
  }

  .home-template .navigation-socials {
    margin-top: auto;
    padding-top: var(--spacing-7);
  }

  .home-template .social-links {
    gap: var(--spacing-3) !important;
  }

  .home-template .social-link {
    min-height: 2.125rem;
    padding: var(--spacing-3) var(--spacing-6);
  }

  .post-content > * {
    width: min(var(--container-width), calc(100% - var(--padding-h) * 2));
  }

  .post-title {
    max-width: 100%;
    font-size: 2rem;
  }

  .post-content {
    font-size: 1rem;
  }
}