/* ===========================
   Juliana — Typography
   =========================== */

/*
 * Global type styles — G-TYPE vertex.
 * Scale from doc 01 §3.3. All values via token vars.
 * 12 pt / 0.75rem absolute floor enforced at every declaration.
 * Eyebrow: 0.875rem / 700 / 0.18em ls / uppercase / oxblood only.
 */

/* ===========================
   Body styles
   =========================== */

body {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.7;

  /* color */
  color: var(--c-ink);
  background-color: var(--c-base);

}


/* ===========================
   Typography
   =========================== */

h1 {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.15;

}

h2 {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;

}

h3 {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;

}

h4 {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;

}

h5 {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;

}

h6 {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;

}

/* Display: hero wordmark. Applied via .j-display, not a heading element. */
.j-display {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.02em;

}

/* Eyebrow: hard rule — oxblood only, never neutral, never body text. */
.j-eyebrow {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /* color */
  color: var(--c-accent-text);

}

/* Meta / label: smallest allowed — 0.8125rem. Never below 0.75rem. */
.j-meta {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.04em;

  /* color */
  color: var(--c-ink-muted);

}

p {
  /* text */
  font-size: var(--fs-body);
  line-height: 1.7;

  /* color */
  color: var(--c-ink-dim);

}

/* Long-form essay body */
.j-prose p {
  /* color */
  color: var(--c-ink-dim);

  /* box model */
  max-width: 65ch;

}


/* ===========================
   Main content styles
   =========================== */

.j-pull-quote {
  /* text */
  font-family: var(--font-head);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.4;

  /* color */
  color: var(--c-ink);

  /* box model */
  padding-left: var(--sp-24);

  /* positioning */
  position: relative;

}

.j-pull-quote::before {
  /* color */
  background-color: var(--c-accent);

  /* box model */
  width: 5px;

  /* border */
  border-radius: 2px;

  /* positioning */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  /* other */
  content: '';

}

a {
  /* transition */
  transition: color 0.2s ease;

}

a:hover {
  /* color */
  color: var(--c-accent-text);

}

.j-prose a {
  /* text */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-hairline);

  /* color */
  color: var(--c-ink);

}

.j-prose a:hover {
  /* text */
  text-decoration-color: var(--c-accent-text);

  /* color */
  color: var(--c-accent-text);

}

/* "Read essay →" — oxblood, Inter 600, no underline. */
.j-read-link {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;

  /* color */
  color: var(--c-accent-text);

  /* display */
  display: inline-flex;

  /* flexbox */
  align-items: center;
  gap: var(--sp-4);

}

.j-read-link:hover {
  /* color */
  color: var(--c-accent-hover);

}


/* ===========================
   Typography - Media Queries
   =========================== */

/* 12pt floor guaranteed at mobile; token clamp takes over at wider viewports */
body {
  /* text */
  font-size: max(var(--fs-body), 1rem);

}

p {
  /* text */
  font-size: max(var(--fs-body), 1rem);

}