/* ============================================================
   LIMEN — Foundations: color + type tokens
   A research station. Warm alabaster paper, charcoal ink,
   dusty sage accent. Editorial serif body, light grotesque labels.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root {
  /* ---- Type families ---- */
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Color: paper / ink ---- */
  --paper:        #F4EFE5; /* warm alabaster — primary background */
  --paper-deep:   #ECE4D4; /* recessed panel / footer wash        */
  --paper-edge:   #E4DBC8; /* faint block fill                    */

  --ink:          #2A2620; /* deep warm charcoal — primary text    */
  --ink-2:        #5F584C; /* secondary text, standfirsts          */
  --ink-3:        #938B79; /* captions, meta, muted labels         */

  /* ---- Color: sage accent (dusty green) ---- */
  --sage:         #8C9A78; /* accent marks, rules, dots            */
  --sage-deep:    #687857; /* link hover / accent text on paper    */
  --sage-wash:    #DDE0D0; /* faint accent fill                    */

  /* ---- Hairlines ---- */
  --line:         rgba(42, 38, 32, 0.16); /* manuscript ledger rule */
  --line-strong:  rgba(42, 38, 32, 0.34);
  --line-faint:   rgba(42, 38, 32, 0.08);

  /* ---- Spacing scale (base 8) ---- */
  --s-1: 0.5rem;   /*  8 */
  --s-2: 0.75rem;  /* 12 */
  --s-3: 1rem;     /* 16 */
  --s-4: 1.5rem;   /* 24 */
  --s-5: 2.5rem;   /* 40 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 9rem;     /* 144 */

  /* generous section rhythm */
  --pad-page:    clamp(1.5rem, 6vw, 7rem);
  --pad-section: clamp(4rem, 9vw, 9rem);
  --measure:     62ch;   /* essay reading column */

  /* ---- Type scale (fluid) ---- */
  --t-display: clamp(3.25rem, 8vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --t-h2:      clamp(1.6rem, 2.6vw, 2.1rem);
  --t-h3:      1.3rem;
  --t-lead:    clamp(1.25rem, 2vw, 1.5rem);
  --t-body:    1.1875rem;  /* 19px reading size */
  --t-small:   0.9375rem;
  --t-label:   0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.72;

  --track-label: 0.2em;
  --track-wide:  0.32em;

  /* motion — restrained, paper-like */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  340ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.limen-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.limen-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

.limen-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}

.limen-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.35;
  color: var(--ink);
}

/* standfirst / lead — italic serif, the manuscript's voice */
.limen-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.limen-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  text-wrap: pretty;
}

/* eyebrow / structural label — light grotesque, tracked caps */
.limen-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.limen-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* index numeral — editorial enumerator */
.limen-numeral {
  font-family: var(--font-sans);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* links — ink with a sage underline that deepens on hover */
.limen-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sage);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.limen-link:hover {
  color: var(--sage-deep);
  border-color: var(--sage-deep);
}

/* small sage marker dot */
.limen-dot {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--sage);
  vertical-align: middle;
}