/* =============================================
   Style adapted from micro.blog "blorofin" theme
   Fonts: Inter (body) + Fraunces (display)
   ============================================= */

:root {
  /* Minor third type scale (ratio 1.2, base 17px) */
  --step--1: 0.8333rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;
  --step-5: 2.488rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 80px;

  /* Layout */
  --width-content: 920px;
  --width-wide: 728px;

  /* Colors */
  --color-text: #15171a;
  --color-bg: #f9f9f7;
  --color-accent: #9333ea;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Border radius */
  --radius-sm: 4px;
  --radius-lg: 6px;

  /* Opacity */
  --opacity-muted: 0.45;
  --opacity-secondary: 0.7;

  /* Display font */
  --font-display: 'Fraunces', serif;
}

html {
  font-size: 106.25%; /* 17px = 1rem */
}

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

body {
  font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---- Header ---- */

body > header {
  padding: var(--space-4) var(--space-6);
  max-width: var(--width-wide);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

body > header > a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 725;
  letter-spacing: -0.02em;
  line-height: 1;
}

body > header a {
  color: inherit;
  text-decoration: none;
}

body > header > nav {
  display: flex;
  gap: var(--space-4);
}

body > header > nav a {
  font-size: var(--step-0);
  font-weight: 550;
  opacity: var(--opacity-secondary);
  transition: opacity 0.2s;
}

body > header > nav a:hover {
  opacity: 1;
  color: var(--color-accent);
}


/* ---- Main ---- */

body > main {
  flex: 1;
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
}


/* ---- Feed (homepage, writing, micro, archive) ---- */

.h-feed ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.h-feed .h-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) 0;
}

.h-feed .h-entry .p-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.h-feed .h-entry .p-name a:hover {
  color: var(--color-accent);
}

.h-feed .h-entry .p-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.2s;
}

.h-feed .h-entry .p-summary {
  font-size: var(--step-0);
  line-height: 1.5;
  opacity: var(--opacity-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Override single-page dt-published margin that leaks via specificity */
.h-feed .h-entry .dt-published,
.h-feed .h-entry .u-url .dt-published {
  font-size: var(--step--1);
  opacity: var(--opacity-muted);
  margin-bottom: 0;
}

.h-feed .h-entry a:has(.dt-published) {
  color: inherit;
  text-decoration: none;
}

/* Notes in feed — e-content shown inline */
.h-feed .h-entry .e-content {
  font-size: var(--step-0);
  line-height: 1.5;
}

.h-feed .h-entry .e-content p {
  margin: 0;
}


.h-feed .h-entry .read-more {
  font-size: var(--step--1);
  text-decoration: none;
}

.h-feed .h-entry .read-more:hover {
  text-decoration: underline;
}

/* ---- Section headings (writing, micro, about, archive pages) ---- */

main > h1,
main > article > h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}


/* ---- Single post / note ---- */

article.h-entry > header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  max-width: var(--width-content);
}

article.h-entry > header .dt-published {
  font-size: var(--step--1);
  opacity: var(--opacity-muted);
}

/* Single note page — date link styled to match articles */
article.h-entry > .u-url {
  color: inherit;
  text-decoration: none;
}

article.h-entry > .u-url .dt-published {
  font-size: var(--step--1);
  opacity: var(--opacity-muted);
  display: block;
  margin-bottom: var(--space-3);
}

article.h-entry > header .p-name {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Post/note body content */
article.h-entry .e-content {
  max-width: var(--width-content);
  font-size: var(--step-0);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

article.h-entry .e-content p {
  margin-bottom: 1.5em;
}

article.h-entry .e-content h2 {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

article.h-entry .e-content h3 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

article.h-entry .e-content h4 {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

article.h-entry .e-content ul,
article.h-entry .e-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

article.h-entry .e-content li {
  margin-bottom: 0.5em;
}

article.h-entry .e-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-4);
  margin: 1.5em 0;
  font-style: italic;
}

article.h-entry .e-content code {
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

article.h-entry .e-content pre {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: 1.5em;
}

article.h-entry .e-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

article.h-entry .e-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

article.h-entry .e-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2em 0;
}


/* ---- u-photo (notes with attached images) ---- */

article.h-entry > .u-photo {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.h-feed .h-entry > .u-photo {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ---- About page ---- */

main > article p {
  margin-bottom: 1.5em;
  line-height: 1.6;
}


/* ---- Writing page archive link ---- */

main > p {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  opacity: var(--opacity-secondary);
}


/* ---- Footer ---- */

body > footer {
  margin-top: auto;
  max-width: var(--width-wide);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: var(--space-4) var(--space-6);
}

body > footer p {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
}

body > footer nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

body > footer nav a {
  color: inherit;
  text-decoration: none;
  font-size: var(--step--1);
  opacity: var(--opacity-secondary);
  transition: opacity 0.2s;
}

body > footer nav a:hover {
  opacity: 1;
  color: var(--color-accent);
}


/* ---- Responsive ---- */

@media (max-width: 768px) {
  body > header {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  body > header > a {
    font-size: var(--step-1);
  }

  body > main {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  article.h-entry > header .p-name {
    font-size: var(--step-4);
  }

  main > h1,
  main > article > h1 {
    font-size: var(--step-4);
  }

  body > footer {
    padding: var(--space-4);
    margin-bottom: var(--space-6);
  }
}