/* ============================================
   Ariel Blog — Shared Stylesheet
   Replaces all WordPress-generated CSS
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  --color-primary:    #1f1f1d;
  --color-secondary:  #787670;
  --color-foreground: #555451;
  --color-tertiary:   #d9d9d6;
  --color-bg:         #ffffff;

  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --size-sm:  0.833rem;
  --size-md:  clamp(0.833rem, 0.833rem + (1vw - 0.2rem) * 0.393, 1rem);
  --size-lg:  clamp(1rem,     1rem     + (1vw - 0.2rem) * 0.471, 1.2rem);
  --size-xl:  clamp(1.2rem,   1.2rem   + (1vw - 0.2rem) * 1.242, 1.728rem);
  --size-2xl: clamp(1.728rem, 1.728rem + (1vw - 0.2rem) * 0.814, 2.074rem);
  --size-3xl: clamp(2.074rem, 2.074rem + (1vw - 0.2rem) * 2.146, 2.986rem);

  --space-xs:  0.44rem;
  --space-sm:  0.5rem;
  --space-md:  0.875rem;
  --space-lg:  1.75rem;
  --space-xl:  2.625rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.25rem;

  --content-width: 620px;
  --wide-width:    1000px;
}

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

body {
  margin: 0;
  padding: var(--space-lg);
  background-color: var(--color-bg);
  color: var(--color-foreground);
  font-family: var(--font-system);
  font-size: var(--size-md);
  font-weight: 400;
  line-height: 1.75;
}

/* ---------- Wrapper ---------- */
.site-wrapper {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Header ---------- */
.site-header {
  padding-top:    var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.site-logo img {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 9999px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-family: var(--font-system);
  font-style: normal;
  font-weight: 700;
  line-height: calc(1em + 0.75rem);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

h1 { font-size: var(--size-3xl); line-height: calc(1em + 0.4375rem); }
h2 { font-size: var(--size-2xl); line-height: calc(1em + 0.5rem); }
h3 { font-size: var(--size-xl); }
h4 { font-size: var(--size-lg); }
h5 { font-size: var(--size-md); }
h6 { font-size: var(--size-sm); }

p {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  line-height: calc(1em + 0.75rem);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-secondary);
}

ol, ul {
  padding-left: var(--space-lg);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

li { margin-top: var(--space-sm); }

blockquote {
  margin: var(--space-lg) 0 0;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-tertiary);
  color: var(--color-secondary);
}

/* ---------- Post Header ---------- */
.post-header {
  margin-bottom: var(--space-2xl);
}

.post-title {
  font-size: var(--size-lg);
  font-weight: 400;
  line-height: 1.458333;
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  word-break: break-word;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--size-sm);
  color: var(--color-secondary);
  line-height: 1.5;
}

.post-meta a {
  color: var(--color-secondary);
  text-decoration: none;
}
.post-meta a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---------- Post Content ---------- */
.post-content {
  margin-bottom: var(--space-3xl);
}

.post-content > * + * {
  margin-top: var(--space-lg);
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin-top: var(--space-xl);
}

/* ---------- Post Navigation ---------- */
.post-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3xl);
  font-size: var(--size-sm);
  color: var(--color-secondary);
  line-height: 1.5;
}

.post-nav a {
  color: var(--color-secondary);
  text-decoration: none;
}
.post-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.post-nav-prev::before { content: "← "; }
.post-nav-next::after  { content: " →"; }

/* ---------- References ---------- */
.references {
  text-align: center;
  font-weight: 700;
  margin-top: var(--space-xl);
}