/* modules.design — thedotbot-site session
   select-grid 540px → scale 0.5x, rhythm 6px, outer 540px
   helvetica-neue, 64c, constant tracking

   Canonical spacing roles at 0.5x:
     element-gutter  spacing-1  =  6px
     column-gutter   spacing-2  = 12px
     format-margin   spacing-4  = 24px
     section-break   spacing-16 = 96px
     sub-break       spacing-4  = 24px

   Type at 0.5x:
     text-1  13.5/18px  -0.27px tracking  (Small)
     text-2  18/24px    -0.36px tracking  (Body)
     text-3  27/30px    -0.54px tracking  (Title-5)

   W/B (dark default) ↔ B/W (light) via prefers-color-scheme       */

:root {
  /* W/B: white content, black fill */
  --md-fill-primary:    #000000;
  --md-content-primary: #FFFFFF;
  --md-muted: color-mix(in srgb, var(--md-content-primary) 35%, var(--md-fill-primary));
  --md-rule:  color-mix(in srgb, var(--md-content-primary) 10%, var(--md-fill-primary));

  /* type */
  --md-text-1-size:     13.5px;
  --md-text-1-lh:       18px;
  --md-text-1-tracking: -0.27px;

  --md-text-2-size:     18px;
  --md-text-2-lh:       24px;
  --md-text-2-tracking: -0.36px;

  --md-text-3-size:     27px;
  --md-text-3-lh:       30px;
  --md-text-3-tracking: -0.54px;

  /* spacing */
  --sp1:  6px;
  --sp2:  12px;
  --sp4:  24px;
  --sp8:  48px;
  --sp16: 96px;

  --md-format-margin: var(--sp4);    /* 24px page inset */
  --md-element-gutter: var(--sp1);   /* 6px  within group */

  --md-max:  540px;
  --md-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --md-mono: 'Courier New', Courier, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --md-fill-primary:    #FFFFFF;
    --md-content-primary: #000000;
  }
}

/* ─── reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, p, ul, li, span { font: inherit; }
ul { list-style: none; }

body {
  background: var(--md-fill-primary);
  color: var(--md-content-primary);
  font-family: var(--md-font);
  font-size: var(--md-text-2-size);
  line-height: var(--md-text-2-lh);
  letter-spacing: var(--md-text-2-tracking);
  padding: var(--sp16) var(--md-format-margin) calc(var(--sp16) * 2);
}

.container {
  max-width: var(--md-max);
  margin: 0 auto;
}

/* ─── identity mark ──────────────────────────────────────────────────── */
.mark {
  display: block;
  margin-bottom: var(--sp16);
  font-size: var(--md-text-1-size);
  line-height: var(--md-text-1-lh);
  letter-spacing: var(--md-text-1-tracking);
  color: var(--md-muted);
  text-decoration: none;
}
.mark:hover { color: var(--md-content-primary); }

/* ─── article ────────────────────────────────────────────────────────── */
article h1 {
  font-size: var(--md-text-3-size);
  line-height: var(--md-text-3-lh);
  font-weight: 500;
  letter-spacing: var(--md-text-3-tracking);
  margin-bottom: var(--md-element-gutter);
}

article .meta {
  font-size: var(--md-text-1-size);
  line-height: var(--md-text-1-lh);
  letter-spacing: var(--md-text-1-tracking);
  color: var(--md-muted);
  margin-bottom: var(--sp16);
}

article p {
  margin-bottom: var(--sp4);
}

article strong { font-weight: 700; }
article em     { color: var(--md-muted); font-style: italic; }

article hr {
  border: none;
  border-top: 1px solid var(--md-rule);
  margin: var(--sp16) 0;
}

article .tags {
  font-size: var(--md-text-1-size);
  line-height: var(--md-text-1-lh);
  color: var(--md-muted);
}

/* ─── index ──────────────────────────────────────────────────────────── */
.piece-list li {
  padding: var(--sp4) 0;
  border-bottom: 1px solid var(--md-rule);
}
.piece-list li:first-child { border-top: 1px solid var(--md-rule); }

.piece-list a {
  display: block;
  font-size: var(--md-text-2-size);
  line-height: var(--md-text-2-lh);
  letter-spacing: var(--md-text-2-tracking);
  color: var(--md-content-primary);
  text-decoration: none;
}
.piece-list a:hover { color: var(--md-muted); }

.piece-list .byline {
  font-size: var(--md-text-1-size);
  line-height: var(--md-text-1-lh);
  color: var(--md-muted);
  margin-top: var(--sp1);
}