/* ==========================================================================
   Commonplace
   commonplace/commonplace.css

   Section identity first, then the components unique to the library. The feel
   here is a reading room: forest green, quieter accents, and type set larger
   and looser than anywhere else on the site.
   ========================================================================== */

[data-section="commonplace"] {
  --brand: #46916a;            /* forest — deep timber */
  --brand-soft: #7fbf9a;
  --brand-text-light: #35714f; /* 5.2:1 on bone */
  --brand-text-dark: #8fd0aa;  /* 11:1 on ink */
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.about h2 {
  font-size: var(--step-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 1.32;
  max-width: 24ch;
  margin-top: var(--sp-5);
}

.about__body {
  display: grid;
  gap: var(--sp-5);
  max-width: 54ch;
  color: var(--text-muted);
}

@media (max-width: 52rem) {
  .about { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ENTRY — the section's signature component
   One passage, its source, when it was filed, and how. This is the unit the
   whole library is built from, so it gets the most typographic care.
   -------------------------------------------------------------------------- */

.entry {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  max-width: 52rem;
}

.entry__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-5);
}

.entry__quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.46;
  letter-spacing: -0.008em;
  max-width: 40ch;
  text-wrap: pretty;
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.entry__meta b {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-right: 0.5em;
}

/* The preview is a spec, not a real entry — dashed to say so. */
.entry--preview {
  background: transparent;
  border-style: dashed;
  border-left-style: solid;
}

/* --------------------------------------------------------------------------
   ENTRY PAGE
   One passage per address. The passage is the page: it is set larger than any
   other text on the site, and everything else — where it came from, why it was
   kept — sits underneath in the smaller voice.
   -------------------------------------------------------------------------- */

.passage {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.passage + .attribution {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.attribution cite {
  font-style: normal;
  color: var(--text);
}

/* Why it was kept — the reader's note, which is the whole point of the
   practice. Deliberately in the body face, to sit apart from the passage. */
.note {
  max-width: var(--measure);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.note__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   TAGS
   How the library is filed. Plain links, so each tag can have its own address.
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags a {
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.tags a:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.tags__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: var(--sp-2);
}

/* --------------------------------------------------------------------------
   EMPTY STATE placement
   -------------------------------------------------------------------------- */

.empty { margin-top: clamp(3rem, 7vw, 5rem); }

.empty code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: rgba(11, 19, 26, 0.06);
}