/* ==========================================================================
   Typography — Cormorant Garamond (display, italic) + Inter (body)
   The site's editorial voice rendered as type.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Font loading — handled via <link> in base.njk:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?
     family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&
     family=Inter:wght@400;500;600&display=swap">
   --------------------------------------------------------------------------- */

/* ==========================================================================
   Body baseline
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-normal);
  color: var(--colour-text);
  background-color: var(--colour-background);
}

/* ==========================================================================
   Headings — Cormorant Garamond
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--colour-ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--type-4xl);
  font-weight: var(--weight-light);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-block-end: var(--space-5);
}

h2 {
  font-size: var(--type-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin-block: var(--space-7) var(--space-3);
}

h3 {
  font-size: var(--type-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin-block: var(--space-6) var(--space-3);
}

h4 {
  font-size: var(--type-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin-block: var(--space-5) var(--space-2);
}

h5 {
  font-size: var(--type-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  margin-block: var(--space-4) var(--space-2);
}

h6 {
  font-size: var(--type-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--colour-text-muted);
  margin-block: var(--space-4) var(--space-1);
}

/* ==========================================================================
   Body prose
   ========================================================================== */
p {
  margin-block-end: var(--space-4);
  font-size: var(--type-base);
  line-height: var(--leading-prose);
  color: var(--colour-text);
}

p:last-child {
  margin-block-end: 0;
}

/* Lead paragraph — opening prose, slightly larger and lighter */
.lead {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--colour-ink);
  letter-spacing: var(--tracking-normal);
}

@media (min-width: 768px) {
  .lead {
    font-size: var(--type-xl);
  }
}

/* Drop cap — first letter of opening prose, ochre */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding-inline-end: 0.08em;
  padding-block-start: 0.08em;
  color: var(--colour-ochre);
}

/* ==========================================================================
   Italic reflection block — the "ink-on-parchment" register
   Used for closing reflections, pull quotes, editorial italic asides.
   ========================================================================== */
.reflection,
blockquote.reflection {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.005em;
  color: var(--colour-ink);
  max-width: var(--width-narrow);
  margin-inline: auto;
  margin-block: var(--space-7);
  padding-inline: var(--space-4);
  text-align: center;
  border: 0;
}

@media (min-width: 768px) {
  .reflection,
  blockquote.reflection {
    font-size: var(--type-lg);
  }
}

/* Pull-quote — italic with ochre vertical rule */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  line-height: var(--leading-snug);
  color: var(--colour-ink);
  border-inline-start: 2px solid var(--colour-ochre);
  padding-inline-start: var(--space-4);
  margin-block: var(--space-6);
  max-width: var(--width-prose);
}

.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-block-start: var(--space-3);
}

/* ==========================================================================
   Eyebrow label — small caps above headings (e.g. "Krug × James Won")
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-2);
}

/* ==========================================================================
   Captions, metadata, fine print
   ========================================================================== */
figcaption,
.caption {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  color: var(--colour-text-muted);
  letter-spacing: 0.005em;
  margin-block-start: var(--space-2);
}

.metadata {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

small,
.fine {
  font-size: var(--type-sm);
  color: var(--colour-text-muted);
}

/* ==========================================================================
   Links — restrained, with editorial hover
   ========================================================================== */
a {
  color: var(--colour-link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--colour-border);
  transition: color var(--motion-fast) var(--ease-out),
              text-decoration-color var(--motion-fast) var(--ease-out);
}

a:hover,
a:focus-visible {
  color: var(--colour-link-hover);
  text-decoration-color: var(--colour-ochre);
}

/* Link without underline (e.g. nav, card titles) */
.link-bare {
  text-decoration: none;
}

.link-bare:hover {
  text-decoration: none;
  color: var(--colour-link-hover);
}

/* ==========================================================================
   Lists — used sparingly in editorial body
   ========================================================================== */
ul,
ol {
  margin-block: var(--space-3) var(--space-4);
  padding-inline-start: var(--space-4);
}

li {
  margin-block-end: var(--space-2);
  line-height: var(--leading-prose);
}

ul li::marker {
  color: var(--colour-ochre);
}

/* ==========================================================================
   Emphasis — strong, em
   ========================================================================== */
strong,
b {
  font-weight: var(--weight-semibold);
  color: var(--colour-ink);
}

em,
i {
  font-style: italic;
}

/* ==========================================================================
   Code, pre, kbd — for any technical references
   ========================================================================== */
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background-color: rgba(184, 137, 62, 0.08);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
  color: var(--colour-ink);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  background-color: rgba(26, 26, 24, 0.04);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-block: var(--space-4);
}

pre code {
  background: none;
  padding: 0;
}

/* ==========================================================================
   Horizontal rule — section divider, restrained
   ========================================================================== */
hr {
  border: 0;
  height: 1px;
  background-color: var(--colour-border);
  margin-block: var(--space-7);
}

/* Editorial divider — small ochre square, centred */
.divider-mark {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--colour-ochre);
  margin-inline: auto;
  margin-block: var(--space-7);
  transform: rotate(45deg);
}

/* ==========================================================================
   Responsive type — fluid scale on smaller screens
   ========================================================================== */
@media (max-width: 767px) {
  h1 {
    font-size: var(--type-3xl);
  }
  h2 {
    font-size: var(--type-2xl);
  }
  h3 {
    font-size: var(--type-xl);
  }
}