/* =========================================================================
   /meme — a journal of the consciousness project
   Literary / typewriter aesthetic. Shared across all pages.
   ========================================================================= */

:root {
  --paper:        #f4f0e6;
  --paper-edge:   #e8e2d2;
  --ink:          #1c1a17;
  --ink-soft:     #4a463f;
  --ink-faint:    #6f6a60;
  --rule:         #cdc6b4;
  --accent:       #7c2d12;   /* oxblood */
  --accent-soft:  #a8531f;
  --link:         #6b3a1f;
  --link-hover:   #7c2d12;
  --tape:         rgba(196, 184, 152, 0.45);
  --max:          42rem;
  --serif:        "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono:         "JetBrains Mono", "IBM Plex Mono", "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(160,150,120,0.10), transparent 55%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

/* ---- structural ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 3.2rem 1.4rem 6rem; }
.wide { max-width: 58rem; }

header.site, footer.site { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(124,45,18,0.28); transition: color .15s, border-color .15s; }
a:hover { color: var(--link-hover); border-color: var(--link-hover); }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0; }
.center { text-align: center; }

/* ---- masthead ---- */
.masthead { text-align: center; padding-top: 2.2rem; }
.masthead .kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.masthead h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 .6rem;
  letter-spacing: -0.01em;
}
.masthead .sub {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.12rem;
  margin: 0 auto;
  max-width: 32rem;
}
.masthead .byline {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
  margin-top: 1.4rem;
}

/* ---- top nav (typewritten tab strip) ---- */
nav.topnav {
  max-width: 58rem; margin: 2.4rem auto 0; padding: 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; justify-content: center;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-top: .8rem; padding-bottom: .8rem;
}
nav.topnav a { border-bottom: none; color: var(--ink-soft); }
nav.topnav a:hover { color: var(--accent); }
nav.topnav a.here { color: var(--accent); }

/* ---- prose ---- */
h2 { font-weight: 600; font-size: 1.7rem; margin: 2.8rem 0 1rem; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 1.28rem; margin: 2.2rem 0 .7rem; }
p { margin: 0 0 1.25rem; }
blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accent-soft);
  font-style: italic; color: var(--ink-soft);
}
blockquote cite { display: block; font-style: normal; font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); margin-top: .6rem; letter-spacing: .04em; }
.dropcap::first-letter {
  float: left; font-size: 3.4rem; line-height: .8; padding: .35rem .55rem 0 0; color: var(--accent); font-weight: 600;
}
.small { font-size: .92rem; color: var(--ink-soft); }
.muted { color: var(--ink-faint); }

/* ---- date / dek line ---- */
.dek { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .4rem; }

/* ---- the index timeline of "steps" ---- */
.steps { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.step { padding: 1.6rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1.4rem; }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step .yr { font-family: var(--mono); font-size: .82rem; color: var(--accent); padding-top: .3rem; letter-spacing: .02em; }
.step h3 { margin: 0 0 .35rem; font-size: 1.32rem; }
.step h3 a { border-bottom: none; }
.step p { margin: 0 0 .5rem; font-size: 1.04rem; color: var(--ink-soft); }
.step .meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
@media (max-width: 34rem){ .step { grid-template-columns: 1fr; } .step .yr { padding-top: 0; } }

/* ---- pdf / download chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px; padding: .3rem .6rem; color: var(--ink-soft);
  background: rgba(255,255,255,0.35);
}
.chip:hover { color: var(--accent); border-color: var(--accent-soft); }
.chip::before { content: "PDF"; font-size: .62rem; background: var(--accent); color: var(--paper); padding: .08rem .3rem; border-radius: 2px; }
.chip.pending { opacity: .55; }
.chip.pending::before { content: "···"; background: var(--ink-faint); }

/* ---- typewritten letter ---- */
.letter {
  background: #fbf9f2;
  border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.45);
  padding: 2.6rem 2.4rem;
  margin: 2.2rem 0;
  font-family: var(--mono);
  font-size: .96rem;
  line-height: 1.85;
  color: #2a2722;
  position: relative;
}
.letter::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 120px; height: 26px; background: var(--tape); border: 1px solid rgba(150,138,108,.4);
}
.letter .hdr { color: var(--ink-faint); font-size: .8rem; letter-spacing: .04em; margin-bottom: 1.4rem; }
.letter p { margin: 0 0 1.1rem; }
.letter .sig { margin-top: 1.6rem; }
.letter .addr { color: var(--ink-faint); font-size: .82rem; }

/* ---- callout / note ---- */
.note {
  border: 1px dashed var(--rule); background: rgba(255,255,255,0.3);
  padding: 1rem 1.2rem; margin: 1.8rem 0; font-size: .98rem; color: var(--ink-soft);
}
.note .lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display:block; margin-bottom: .3rem; }

/* ---- footer ---- */
footer.site { margin-top: 4rem; padding-top: 1.6rem; padding-bottom: 4rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-faint); text-align: center; }
footer.site a { color: var(--ink-faint); border-bottom: none; }
footer.site a:hover { color: var(--accent); }

/* ---- back-link ---- */
.back { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---- photo plates ---- */
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 1.8rem 0 2.4rem; }
.plate { margin: 0; }
.plate img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; padding: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.plate figcaption {
  font-family: var(--mono); font-size: .76rem; line-height: 1.5;
  color: var(--ink-soft); margin-top: .55rem;
}
.plate figcaption b { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
@media (max-width: 640px) { .plates { grid-template-columns: 1fr; } }

/* ---- numbered claims ---- */
ol.claimlist { list-style: none; counter-reset: claim; padding: 0; margin: 1.6rem 0 2rem; }
ol.claimlist > li {
  counter-increment: claim; position: relative;
  padding: 0 0 0 3rem; margin: 0 0 1.6rem;
  border-top: 1px solid var(--rule); padding-top: 1.2rem;
}
ol.claimlist > li::before {
  content: counter(claim); position: absolute; left: 0; top: 1.2rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  font-family: var(--mono); font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
ol.claimlist > li h3 { margin: .1rem 0 .5rem; }
ol.claimlist > li p { margin: 0; color: var(--ink-soft); }