/* Labora Collective — series skin (house default).
   Palette and type are lifted from the approved Week-1 Signal so the landing and
   every piece read as one series: a bone/parchment ground, forest-and-sage green,
   gold as a secondary, Cormorant Garamond for editorial text and DM Sans for
   interface labels. This file is the series' single source of visual truth. */

:root {
  --bg: #f5f0e8;
  --surface: #ffffff;
  --surface2: #ede8dc;
  --border: #d0c8b8;
  --text: #1a3a2a;
  --muted: #5a7060;
  --primary: #2d5a3d;
  --accent: #5a8a6a;
  --accent-light: #a3c4a8;
  --gold: #c8a84b;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---- nav ---- */
.site-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem; height: 60px;
  display: flex; align-items: center; gap: 1.5rem;
  position: sticky; top: 0; z-index: 100;
}
.site-nav .brand {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  color: var(--accent); text-decoration: none;
  letter-spacing: .01em;
}
.site-nav .crumbs {
  margin-left: auto;
  font-family: var(--font-ui); font-size: .75rem; color: var(--muted);
  display: flex; align-items: center; gap: .6rem;
}
.site-nav .crumbs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.site-nav .crumbs a:hover { color: var(--accent); }
.site-nav .crumbs .sep { opacity: .5; }

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 5.5rem 2rem 4.5rem;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .label {
  font-family: var(--font-ui);
  font-size: .68rem; text-transform: uppercase; letter-spacing: 3px;
  color: var(--accent); margin-bottom: 1.25rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic; color: var(--muted);
  max-width: 640px; margin: 0 auto 1.75rem; line-height: 1.55;
}
.hero .meta {
  font-family: var(--font-ui); font-size: .8rem; color: var(--muted); letter-spacing: .02em;
}
.hero .meta a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- main ---- */
main { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem 2rem; }

/* ---- intro ---- */
.intro { max-width: 720px; margin: 0 auto 4.5rem; }
.intro p {
  font-family: var(--font-display);
  font-size: 1.3rem; line-height: 1.75; color: var(--text);
  margin-bottom: 1.25rem;
}
.intro p:first-child { font-size: 1.5rem; }
.intro strong { color: var(--accent); font-weight: 600; }
.intro em { color: var(--primary); font-style: italic; }

/* ---- schedule heading ---- */
.sched-label {
  font-family: var(--font-ui); text-align: center;
  font-size: .68rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
.sched-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem); text-align: center;
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.sched-h2 em { color: var(--accent); font-style: italic; }
.sched-sub {
  font-family: var(--font-display); font-style: italic; text-align: center;
  font-size: 1.1rem; color: var(--muted); margin-bottom: 2.5rem;
}

/* ---- week grid ---- */
.week-grid { display: grid; gap: 1.5rem; }
.week-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 2rem 2rem 1.5rem;
  transition: transform .2s, box-shadow .2s;
}
.week-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,58,42,.09); }
.week-num {
  font-family: var(--font-ui);
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--accent); margin-bottom: .6rem;
}
.week-card h2 {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: .75rem; line-height: 1.15;
}
.week-card h2 em { font-style: italic; }
.thesis {
  font-family: var(--font-display);
  font-size: 1.08rem; line-height: 1.65; color: var(--muted);
  margin-bottom: 1.5rem; max-width: 70ch;
}
.pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.piece-tile {
  display: block; text-decoration: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.1rem;
  transition: border-color .2s, background .2s, transform .2s;
}
a.piece-tile:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  transform: translateY(-1px);
}
.piece-tile .ptype {
  font-family: var(--font-ui);
  font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); margin-bottom: .4rem;
}
.piece-tile .ptitle {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--text);
}
.piece-tile.upcoming { opacity: .6; }
.piece-tile.upcoming .ptype { color: var(--muted); }
.piece-tile.upcoming .ptitle { color: var(--muted); font-style: italic; font-weight: 400; }

/* ---- figures ---- */
/* The number on one line, the kicker under it — the collision YC hit on the reviewer at
   phone width was a flex row trying to fit three things across. Never that again. */
.article-body .fig { margin: 3rem auto; max-width: 900px; }
.fig-head {
  font-family: var(--font-ui); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.fig-num { display: block; font-weight: 700; color: var(--accent); }
.fig-kicker { display: block; margin-top: 3px; }
.fig-title {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25;
  color: var(--primary); margin: .5rem 0 .9rem;
}
.article-body .fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.fig-cap { font-size: .92rem; line-height: 1.55; color: var(--text); margin-top: .8rem; }
.fig-src {
  font-family: var(--font-ui); font-size: .72rem; line-height: 1.5;
  color: var(--muted); margin-top: .5rem;
}

/* ---- the product this piece drives to ---- */
/* Above the ask, and visually heavier than it: a product is a thing, the ask is a
   request. Two columns where there is a cover, one where there is not. */
.prod {
  max-width: 720px; margin: 3.5rem auto 0; padding: 1.9rem;
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; gap: 1.6rem; align-items: flex-start;
}
.prod-cover { flex: 0 0 128px; }
.prod-cover img { width: 100%; height: auto; border-radius: 4px; display: block; }
.prod-text { flex: 1 1 auto; min-width: 0; }
.prod-kicker {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem;
}
.prod-title { font-size: 1.34rem; line-height: 1.22; margin: 0 0 .3rem; }
.prod-tagline { font-size: .96rem; font-style: italic; color: var(--muted); margin-bottom: .75rem; }
.prod-blurb { font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.prod-status {
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .03em;
  color: var(--muted); margin-bottom: 1rem;
}
.prod-link {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
  color: var(--accent); text-decoration: none; border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.prod-link:hover { opacity: .8; }

/* ---- the sign-off: her voice, or the marks, or neither ---- */
.signoff {
  max-width: 640px; margin: 3.2rem auto 0; padding-top: 2rem;
  border-top: 1px solid var(--border); text-align: left;
}
.signoff-kicker {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; margin-bottom: .9rem;
}
.signoff p { font-size: .95rem; line-height: 1.65; margin: 0 0 .9rem; }
.signoff-name { font-weight: 700; margin-top: 1.4rem; }
.signoff-sub {
  font-family: var(--font-ui); font-size: .8rem; line-height: 1.5;
  color: var(--muted); margin-top: .25rem;
}
.signoff-mark { display: block; width: 190px; height: auto; margin: 1.4rem 0 0; }
/* The two marks, side by side, centred — no rule above them; they ARE the close. */
.signoff-marks {
  border-top: none; display: flex; gap: 2.6rem;
  align-items: center; justify-content: center; flex-wrap: wrap;
  margin-top: 3.4rem; padding-top: 0;
}
.signoff-marks img { width: 150px; height: auto; display: block; }

/* ---- the close: one ask, then the standing footer ---- */
/* The CTA is a card, not a banner: it sits inside the same measure as the prose so it
   reads as the end of the piece rather than an ad dropped underneath it. */
.cta {
  max-width: 720px; margin: 3.5rem auto 0; padding: 1.9rem 1.9rem 1.7rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--cta-bg, rgba(0,0,0,.02));
}
.cta-kicker {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .55rem;
}
.cta-title { font-size: 1.28rem; line-height: 1.25; margin: 0 0 .6rem; }
.cta-body { font-size: .97rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.25rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.cta-primary {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: .7rem 1.15rem; border-radius: 7px;
}
.cta-primary:hover { opacity: .9; }
.cta-secondary {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--accent); text-decoration: none; padding: .7rem .2rem;
}
.cta-secondary:hover { text-decoration: underline; }

/* ---- footer ---- */
.site-footer {
  max-width: 1000px; margin: 4rem auto 0;
  padding: 2.5rem 2rem 4rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
/* The disclosure sits ABOVE the signature and is deliberately the largest thing in the
   footer. It is the sentence that makes the byline mean what it says. */
.site-footer .disclosure {
  max-width: 620px; margin: 0 auto 1.4rem;
  font-size: .84rem; line-height: 1.55; color: var(--muted);
}
.site-footer .disclosure a { color: var(--accent); text-decoration: none; font-weight: 600; }
.site-footer .disclosure a:hover { text-decoration: underline; }
.site-footer .sig {
  font-family: var(--font-ui); font-size: .75rem; letter-spacing: .04em;
  color: var(--muted); margin-bottom: .6rem;
}
.site-footer .links { font-family: var(--font-ui); font-size: .75rem; color: var(--muted); }
.site-footer .links a { color: var(--accent); text-decoration: none; }
.site-footer .links a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* A 128px cover beside text is two cramped columns on a phone. Stack it. */
  .prod { flex-direction: column; gap: 1.1rem; padding: 1.5rem; }
  .prod-cover { flex: none; width: 116px; }
  .signoff-marks { gap: 1.8rem; }
  .signoff-marks img { width: 124px; }

  .site-nav { padding: 0 1.2rem; gap: 1rem; }
  main { padding: 2.5rem 1.2rem 1rem; }
  .hero { padding: 4rem 1.2rem 3rem; }
  .week-card { padding: 1.5rem 1.4rem 1.2rem; }
}

/* ---- article: a single piece (signal / briefing / viva voce) ---- */
.article-hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 4rem 2rem 2.5rem;
}
.article-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  pointer-events: none;
}
.article-hero > * { position: relative; max-width: 760px; margin-left: auto; margin-right: auto; }
.article-eyebrow {
  font-family: var(--font-ui);
  font-size: .68rem; text-transform: uppercase; letter-spacing: 3px;
  color: var(--accent); margin-bottom: 1rem;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}
.article-byline {
  font-family: var(--font-ui); font-size: .82rem; color: var(--muted); letter-spacing: .02em;
}
.article-figure { margin: 0; padding: 0; }
.article-figure img {
  display: block; width: 100%; height: auto;
  border: none; border-radius: 0; border-bottom: 1px solid var(--border);
}
.article-body { max-width: 720px; margin: 0 auto; padding: 2.5rem 2rem 1rem; }
.article-body p {
  font-family: var(--font-body);
  font-size: 1.25rem; line-height: 1.8; color: var(--text);
  margin-bottom: 1.4rem;
}
.article-body p:first-of-type { font-size: 1.4rem; }
.article-body em { font-style: italic; color: var(--primary); }
.article-body strong { color: var(--accent); font-weight: 600; }
/* Section headings. The skin had none, because until markdown was converted no body could
   produce one — an H2 would have fallen back to the browser default and read as a
   different typeface sitting in the middle of the prose. Display face, so a heading is
   unmistakably a heading and still belongs to the page. */
.article-body h2, .article-body h3 {
  font-family: var(--font-display); color: var(--primary);
  line-height: 1.22; margin: 2.6rem 0 1rem;
}
.article-body h2 { font-size: 1.85rem; font-weight: 600; }
.article-body h3 { font-size: 1.4rem; font-weight: 600; font-style: italic; }
/* A heading is never the lede, so it must not take the enlarged first-paragraph size —
   and the paragraph AFTER a heading is not the lede either. */
.article-body h2 + p, .article-body h3 + p { font-size: 1.25rem; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .article-hero { padding: 3rem 1.2rem 2rem; }
  .article-body { padding: 2rem 1.2rem 1rem; }
  .article-body p { font-size: 1.15rem; }
  .article-body .fig { margin: 2.2rem auto; }
  .fig-title { font-size: 1.12rem; }
  .article-body h2 { font-size: 1.5rem; margin-top: 2.1rem; }
  .article-body h3 { font-size: 1.24rem; }
  .article-body h2 + p, .article-body h3 + p { font-size: 1.15rem; }
}

/* ---- article subtitle (briefing / viva voce lead-in) ---- */
.article-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic; font-weight: 400;
  color: var(--muted); line-height: 1.5;
  margin-bottom: 1.1rem;
}

/* ---- pull-quote (a piece's inline callout) ---- */
.article-body blockquote.pull-quote {
  margin: 2.6rem 0;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-style: italic; font-weight: 600; line-height: 1.42;
  color: var(--primary);
  border-radius: 0 4px 4px 0;
}

/* ---- sources / references block ---- */
.sources-section { max-width: 720px; margin: 1rem auto 0; padding: 0 2rem 2rem; }
.sources-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  border-top: 1px solid var(--border); padding-top: 2rem; margin-bottom: 1.1rem;
}
.sources-section ol {
  list-style: decimal; padding-left: 1.5rem;
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.65; color: var(--muted);
}
.sources-section li { margin-bottom: .6rem; }
.sources-section a {
  color: var(--accent); word-break: break-word; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.sources-section a:hover { color: var(--primary); }

@media (max-width: 640px) {
  .sources-section { padding: 0 1.2rem 2rem; }
  .article-body blockquote.pull-quote { font-size: 1.25rem; padding: 1.2rem 1.4rem; margin: 2rem 0; }
}


/* ── The Maternity Crash · "Bone & Ink" ───────────────────────────────────────
   Chosen by YC, 2026-08-21, from three candidates rendered against this page.

   The house ground stays; the forest green gives way to black type with gold as
   the only accent, so the figures carry the colour instead of competing with it.
   This file is the series' own skin and diverges from _defaults/series.css on
   these ten values and nothing else — type, spacing and markup are untouched, so
   a rebuild from the same content lands identically. */
:root {
  --bg: #f5f0e8;
  --surface: #fffdf8;
  --surface2: #ebe5d9;
  --border: #cfc7b5;
  --text: #1b1a17;
  --muted: #6b665c;
  --primary: #2c2a25;
  --accent: #8a7434;
  --accent-light: #d3c496;
  --gold: #b8952f;
}