/* Work to Own. One stylesheet, every page.

   Concept: the margin label. Every entry carries the state it happened in, set
   out in the left margin on a wide screen and stacked above the heading on a
   narrow one. It is the only recurring device and it carries information
   (which state) rather than decoration.

   Deliberately: no photographs, no @keyframes, no scroll-driven animation, no
   script tag anywhere on the site. A regional trade letter reads correctly as
   a still page, and a still page has nothing to strand. */

:root {
  --paper: #f3f2f0;   /* near-white warm neutral. Deliberately not cream, and
                         well clear of a grey-green or a blue-grey field */
  --ink:   #1c1c1a;
  --soft:  #5a5a55;
  --rule:  #d5d3ce;
  --mark:  #2f5d4a;   /* one accent, used on the margin label and link hover */
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia,
           "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
}

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .16em; }
a:hover { color: var(--mark); text-decoration-color: var(--mark); }

.wrap { max-width: 50rem; margin: 0 auto; padding: 0 1.5rem; }

/* masthead: name on the left, three links on the right, one hairline under */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0 1.1rem;
  margin-bottom: 2.4rem;
}
.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.masthead .name {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.008em;
}
.masthead .name a { text-decoration: none; }
.masthead nav { font-family: var(--sans); font-size: .85rem; }
.masthead nav a { color: var(--soft); text-decoration: none; margin-left: 1.15rem; }
.masthead nav a:hover { color: var(--mark); }

.strap {
  font-size: 1.16rem;
  line-height: 1.46;
  color: var(--ink);
  max-width: 32rem;
  margin: 0 0 2.6rem;
}

/* the margin label. sentence case, sans, one accent. never uppercase */

.label {
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--mark);
  margin: 0 0 .25rem;
}
.stamp {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--soft);
  margin: .4rem 0 0;
}
.stamp a { color: var(--soft); }
.stamp a:hover { color: var(--mark); }

/* homepage */

.lead {
  padding-bottom: 1.9rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.1rem;
}
.lead h2 {
  font-size: 1.72rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0 0 .45rem;
  max-width: 28rem;
}
.lead h2 a { text-decoration: none; }
.lead .dek { margin: 0; max-width: 32rem; color: #35352f; }

.group { margin-bottom: 2.4rem; }
.groupname {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.groupname a { text-decoration: none; }

.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.entries li:first-child { padding-top: .2rem; }
.entries h2, .entries h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.006em;
  margin: 0 0 .3rem;
}
.entries h2 a, .entries h3 a { text-decoration: none; }
.entries .dek { margin: 0; color: #3b3b35; font-size: .96rem; }

/* section index */

h1 {
  font-size: 1.86rem;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.014em;
  margin: 0 0 .5rem;
  max-width: 30rem;
}
.intro {
  max-width: 32rem;
  color: #35352f;
  margin: 0 0 2.1rem;
}

/* article */

.essay article { max-width: 34rem; }
.essay article p { margin: 0 0 1.15rem; }
.essay article h1 { margin-bottom: .35rem; }
.essay article .stamp { margin-bottom: 1.9rem; }
.essay article h2 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.004em;
  margin: 2.2rem 0 .75rem;
}
.essay article ul, .essay article ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.essay article li { margin-bottom: .45rem; }

.onward {
  border-top: 1px solid var(--rule);
  margin-top: 2.8rem;
  padding-top: 1.1rem;
  font-family: var(--sans);
  font-size: .9rem;
  max-width: 34rem;
}

/* colophon */

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 3.4rem;
  padding: 1.35rem 0 3rem;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--soft);
}

/* wide screens: the label moves out into the left margin, which is the whole
   idea. two columns, the label in the narrow one, everything else in the wide
   one. below this width it simply stacks, which is the default flow. */

@media (min-width: 62rem) {
  .lead, .entries li, .essay article {
    display: grid;
    grid-template-columns: 8rem 1fr;
    column-gap: 2rem;
  }
  .lead > *, .entries li > *, .essay article > * { grid-column: 2; }
  .lead .label, .entries li .label, .essay article .label {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    margin-top: .42rem;
  }
  .essay article { max-width: 44rem; }
  .essay article > p, .essay article > ul, .essay article > ol,
  .essay article > h2 { max-width: 34rem; }
  .onward { margin-left: 10rem; }
}

@media (max-width: 34rem) {
  body { font-size: 17px; }
  .lead h2 { font-size: 1.44rem; }
  h1 { font-size: 1.52rem; }
  .strap { font-size: 1.06rem; }
}