/* Optional: Google Fonts for a similar Inter + Lora pairing */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:wght@400;500;600&display=swap");

/* Design tokens / primitives */
:root {
  --color-bg: #ffffff;
  --color-fg: #171717;
  --color-muted: #737373;
  --color-border: #e5e5e5;
  --color-accent: #111111;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-base: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3rem;
  --space-5xl: 4rem;
  --space-6xl: 5rem;

  --radius-lg: 0.75rem;
  --shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.08);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

/* Layout */

.page {
  min-height: 100vh;
  padding: 3rem 1.5rem 4rem;
}

.article {
  max-width: 680px;
  margin: 4rem auto 0;
}

/* Header */

.article-header {
  margin-bottom: 3rem;
}

.article-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.article-title {
  font-family: "Lora", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

.article-intro {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.article-meta {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Sections & text */

.article-section {
  margin-bottom: 3rem;
}

.section-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
}

.section-heading-part {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  color: #000000;
  font-weight: 400;
}

.section-heading-part--bold {
  font-weight: 700;
}

.article-section p {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 1.25rem;
}

.article-section p:last-child {
  margin-bottom: 0;
}

.article-section p a {
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-section p a:hover {
  opacity: 1;
}

/* Divider */
.article-divider {
  border: none;
  border-top: 1px solid #E5E5E5;
  margin: 0 0 2.5rem 0;
  max-width: 800px;
  width: 100%;
}

.end-of-article-divider {
    border: none;
    border-top: 1px solid #111111;
    margin: 0 0 2.5rem 0;
    max-width: 800px;
    width: 100%;
  }

/* Spacing before divider: 5rem from last paragraph */
.article-section:has(+ .article-divider) p:last-child {
  margin-bottom: 5rem;
}

/* Additional margin at the end of section 4 */
.article-section:has(+ .end-of-article-divider) {
  margin-bottom: 5rem;
}

/* Figure */

.article-figure {
  margin: 2.5rem 0 2.5rem;
}

.article-figure-frame {
  overflow: hidden;
  background-color: #f5f5f5;
  margin-bottom: 0.75rem;
}

.article-figure-frame:last-child {
  margin-bottom: 2.5rem;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.article-figure figcaption {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.article-figure figcaption.Figcaption,
.article-figure .Figcaption {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-fg);
}

.typography-divider-color,
.article-figure figcaption.typography-divider-color,
.article-figure .typography-divider-color {
  color: var(--color-border);
}

.article-figure figcaption.Figcaption.typography-divider-color,
.article-figure .Figcaption.typography-divider-color {
  color: var(--color-border);
}

/* Responsive tweaks */

@media (min-width: 768px) {
  .page {
    padding: 4rem 2.5rem 5rem;
  }
}

.article-section ul {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.article-section ul li {
  margin-bottom: 1rem;
}

.article-section ul li:last-child {
  margin-bottom: 0;
}

.article-section ul li strong {
  font-weight: 600;
  color: var(--color-accent);
}

.article-section ol {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  list-style-type: decimal;
}

.article-section ol li {
  margin-bottom: 1rem;
}

.article-section ol li:last-child {
  margin-bottom: 0;
}

.article-section ol li strong {
  font-weight: 600;
  color: var(--color-accent);
}

/* Superscript references */
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sup a {
  text-decoration: none;
  color: var(--color-fg);
  font-weight: 400;
}

sup a:hover {
  text-decoration: underline;
}

/* Footer */
.page-footer {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 1rem 0;
  max-width: 800px;
  width: 100%;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--color-fg);
  text-decoration: none;
}

.footer-link--underlined {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-link:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .page-footer {
    padding: 0 2.5rem 3rem;
  }
}