/* ============================================================================
   Writing article overrides — layered on top of deepdive.css
   Adds: indexcard texture background, Courier Prime typewriter font,
   warm ink palette tuned for the cream paper surface.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --typewriter: 'Courier Prime', 'Courier New', Courier, monospace;
  --ink-warm:   #1a1208;
  --ink-muted:  #4a3c28;
  --paper:      rgba(255, 252, 244, 0.88);
  --paper-solid: #fffcf2;
}

/* body keeps deepdive.css blue gradient — no override here */

/* ---- Simple article header --------------------------------------------- */
.dd-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 252, 244, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid #e6bd00;
  box-shadow: 0 4px 18px rgba(180, 130, 40, 0.14);
}

.dd-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
  width: min(860px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0.75rem 0;
}

.dd-home {
  margin-right: auto;
  font-family: var(--typewriter);
  font-weight: 700;
  font-size: 1rem;
  color: #0a5e86 !important;
  text-decoration: none !important;
}

.dd-home:hover { opacity: 0.75; }

.dd-back {
  font-family: var(--typewriter);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f8f6b !important;
  text-decoration: none !important;
}

.dd-back:hover { opacity: 0.75; }

/* ---- Main content area ------------------------------------------------- */
.dd-main {
  width: min(860px, calc(100% - 2rem));
  margin: 0 auto;
  padding-bottom: 4rem;
}

/* ---- Hero override: warm tinted gradient on the texture ---------------- */
.dd-hero {
  margin-top: 2.2rem;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(30, 18, 8, 0.22);
}

.dd-hero .dd-lead {
  font-family: var(--typewriter);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.78;
  color: rgba(255, 252, 244, 0.95);
}

/* ---- Indexcard texture on reading sections ----------------------------- */
.dd-section {
  background:
    url('/indexcard-texture.jpg') repeat center top / 480px auto,
    #fffcf2;
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.8rem);
  margin-top: 1.4rem;
  box-shadow: 0 8px 32px rgba(15, 35, 55, 0.12);
  /* override the zero-padding default from deepdive.css */
  width: min(860px, calc(100% - 2rem));
}

/* ---- Section headings -------------------------------------------------- */
.dd-section > h2 {
  color: var(--ink-warm);
}

.dd-section > .dd-kicker {
  font-family: var(--typewriter);
  letter-spacing: 0.22em;
}

.dd-section > .dd-sub {
  font-family: var(--typewriter);
  color: var(--ink-muted);
  line-height: 1.75;
}

/* ---- Prose: typewriter font throughout --------------------------------- */
.dd-prose p,
.dd-list li {
  font-family: var(--typewriter);
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--ink-warm);
}

.dd-list li::before {
  font-family: var(--typewriter);
  font-weight: 700;
}

.dd-list li strong {
  color: var(--ink-warm);
}

.dd-prose p strong {
  color: var(--accent);
  font-weight: 700;
}

/* ---- Cards: warm paper surface ----------------------------------------- */
.dd-card {
  background:
    linear-gradient(158deg, #fffdf5 0%, #fff8e8 100%);
  border: 1px solid rgba(180, 130, 40, 0.22);
  border-top: 3px solid var(--accent);
  box-shadow: 0 10px 28px rgba(30, 18, 8, 0.09);
}

.dd-card h3 {
  color: var(--ink-warm);
}

.dd-card p {
  font-family: var(--typewriter);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}

.dd-card p:first-of-type {
  margin-top: 0.5rem;
}

.dd-card .dd-tag {
  font-family: var(--typewriter);
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

/* ---- Inline code on warm background ------------------------------------ */
code, .dd-mono {
  background: rgba(30, 18, 8, 0.07);
  color: var(--ink-warm);
}

/* ---- Footer keeps its green but gets a warm top border ----------------- */
.dd-footer {
  border-top: 6px solid #e6bd00;
}

.dd-footer p,
.dd-footer .dd-est {
  font-family: var(--typewriter);
}