/* =============================================================
   Amoebaworks post template v2
   AWDS_v2 · 8 September 2026

   TWO KINDS OF RULE LIVE IN THIS FILE.

   1. Chrome  (.aw-masthead, .aw-sig, .aw-related)
      Markup you control in the theme template. Classes are yours.

   2. Body    (.aw-body h2, .aw-body p, ...)
      Markup StoryChief renders from the article body. It arrives
      WITHOUT CLASSES and you cannot add any. Every rule in that
      section must therefore be an element selector scoped to
      .aw-body. Do not refactor these into classes; there is no
      hook to put a class on.
   ============================================================= */

/* ---------- 1. tokens ---------------------------------------- */

:root {
  /* AWDS_v2 palette. Do not add a fourth accent. */
  --aw-ink:      #10121E;
  --aw-purps:    #5262ED;
  --aw-purps-dk: #4450DC;  /* purps behind white type. never raw purps */
  --aw-citron:   #DFFE8D;
  --aw-mint:     #7BF8D8;
  --aw-slate:    #434053;
  --aw-n1:       #F2F3F5;
  --aw-n2:       #BBBDC8;
  --aw-n3:       #76747B;
  --aw-rule:     #E7E7EA;

  /* roles */
  --aw-page:      #FFFFFF;
  --aw-body-ink:  var(--aw-slate);
  --aw-head-ink:  var(--aw-ink);
  --aw-quiet:     var(--aw-n3);
  --aw-line:      var(--aw-rule);
  --aw-link:      var(--aw-purps-dk);
  --aw-field:     var(--aw-ink);
  --aw-field-ink: #C7C8D2;
  --aw-field-rule: rgba(255, 255, 255, .14);

  /* three faces. always with a real fallback stack. */
  --aw-display: "Arimo", Arial, Helvetica, sans-serif;
  --aw-label:   "Space Grotesk", "Arimo", Arial, sans-serif;
  --aw-read:    "Spectral", Georgia, "Times New Roman", serif;

  /* measure */
  --aw-measure:      62ch;
  --aw-head-measure: 26ch;
  --aw-shell:        1220px;
  --aw-gutter:       28px;
}

/* ---------- 2. shell ----------------------------------------- */

.aw-post {
  background: var(--aw-page);
  color: var(--aw-body-ink);
  font-family: var(--aw-read);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.aw-post *,
.aw-post *::before,
.aw-post *::after { box-sizing: border-box; }

.aw-shell {
  max-width: var(--aw-shell);
  margin: 0 auto;
  padding-left: var(--aw-gutter);
  padding-right: var(--aw-gutter);
}

.aw-label {
  font-family: var(--aw-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.aw-post a:focus-visible {
  outline: 2px solid var(--aw-link);
  outline-offset: 3px;
}

/* ---------- 3. masthead (ink) -------------------------------- */

.aw-masthead { background: var(--aw-field); }
.aw-masthead .aw-shell { padding-top: 62px; padding-bottom: 48px; }

/* the kicker is the article CATEGORY. three values only:
   Diagnosis, Capability, Proof. it is the only citron on the page. */
.aw-kicker {
  display: block;
  color: var(--aw-citron);
  margin-bottom: 20px;
}

.aw-title {
  font-family: var(--aw-display);
  font-weight: 700;
  font-size: clamp(33px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.021em;
  color: #FFFFFF;
  margin: 0 0 20px;
  max-width: var(--aw-head-measure);
  text-wrap: balance;
}

/* the deck is the article EXCERPT, verbatim */
.aw-deck {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--aw-field-ink);
  margin: 0 0 30px;
  max-width: 46ch;
}

.aw-byline {
  font-family: var(--aw-label);
  font-size: 12.5px;
  color: var(--aw-n2);
  border-top: 1px solid var(--aw-field-rule);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

/* ---------- 4. BODY: classless StoryChief output -------------- */
/* Everything below styles markup you do not control.            */

.aw-body {
  max-width: 760px;
  padding-top: 52px;
  padding-bottom: 20px;
}

/* paragraphs */
.aw-body p {
  margin: 0 0 22px;
  max-width: var(--aw-measure);
}

/* the lead: first two to four paragraphs, before the first h2.
   sized up without a class by selecting the first paragraph. */
.aw-body > p:first-child {
  font-size: 21px;
  line-height: 1.55;
}

/* section hooks. h2 only. an h3 appearing here is a defect in the
   post, not a case to style: leave it looking wrong so it is caught. */
.aw-body h2 {
  font-family: var(--aw-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--aw-head-ink);
  margin: 50px 0 18px;
  max-width: 34ch;
  text-wrap: balance;
}
.aw-body h2::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: var(--aw-purps);
  margin-bottom: 15px;
}

/* MICRO-HOOK.
   Written in the body as *one italic line* and rendered by
   StoryChief as <p><em>...</em></p>. Selecting an <em> that is the
   only child of its paragraph is what gives it a style with no
   class. Ordinary mid-sentence italics are untouched. */
.aw-body p > em:only-child {
  font-style: italic;
  color: var(--aw-head-ink);
}

.aw-body a {
  color: var(--aw-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aw-body strong { font-weight: 600; color: var(--aw-head-ink); }

/* figures: diagram, artifact, video embed */
.aw-body figure {
  margin: 30px 0;
  max-width: 780px;
}
.aw-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--aw-line);
}
.aw-body figure iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: var(--aw-field);
}
.aw-body figcaption {
  margin-top: 12px;
  font-family: var(--aw-label);
  font-size: 13px;
  line-height: 1.5;
  color: var(--aw-quiet);
  max-width: 60ch;
}

/* CALLOUT.
   Only one is sanctioned: > [!WARNING], used to flag a projection
   or a figure without a basis. StoryChief's rendered markup for
   callouts is UNVERIFIED (see HANDOFF.md, open item 2). These
   rules are defensive: confirm the real class or attribute against
   a published post and tighten the selector before launch. */
.aw-body blockquote {
  margin: 26px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--aw-purps);
  background: var(--aw-n1);
  max-width: var(--aw-measure);
  font-family: var(--aw-label);
  font-size: 15px;
  line-height: 1.55;
  color: var(--aw-head-ink);
}
.aw-body blockquote p:last-child { margin-bottom: 0; }

/* lists are permitted but rare. no bespoke styling. */
.aw-body ul,
.aw-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
  max-width: var(--aw-measure);
}
.aw-body li { margin-bottom: 8px; }

/* Deliberately unstyled, because the template does not use them:
   .strchf-button, <details>/<summary>, <picture> galleries.
   If one appears on a live post, that is the signal to remove it
   from the post, not to add a style here. */

/* ---------- 5. close rule ------------------------------------ */
/* The final paragraphs sit under a rule. The theme emits this
   element after {{CONTENT}}; it is chrome, not body. */
.aw-close-rule {
  max-width: 760px;
  border: 0;
  border-top: 1px solid var(--aw-line);
  margin: 34px 0 0;
}

/* ---------- 6. related --------------------------------------- */

.aw-related {
  max-width: 760px;
  margin-top: 46px;
  padding-bottom: 60px;
}
.aw-related > .aw-label {
  display: block;
  color: var(--aw-quiet);
  margin-bottom: 12px;
}
.aw-related ul { margin: 0; padding: 0; list-style: none; }
.aw-related li { border-top: 1px solid var(--aw-line); }
.aw-related li:last-child { border-bottom: 1px solid var(--aw-line); }
.aw-related a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 13px 0;
  text-decoration: none;
  color: var(--aw-head-ink);
  font-size: 17px;
  transition: color .25s cubic-bezier(.16, .84, .36, 1);
}
.aw-related a:hover { color: var(--aw-link); }
.aw-related a span {
  font-family: var(--aw-label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aw-quiet);
  white-space: nowrap;
}

/* ---------- 7. identity footer (ink) -------------------------- */
/* Static. Never in the article body: in the body it becomes the
   same paragraph duplicated across the entire archive. */

.aw-sig { background: var(--aw-field); }
.aw-sig .aw-shell { padding-top: 34px; padding-bottom: 34px; }
.aw-sig p {
  margin: 0;
  font-family: var(--aw-label);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--aw-field-ink);
  max-width: 62ch;
}
.aw-sig b { color: var(--aw-citron); font-weight: 600; }

/* ---------- 8. responsive ------------------------------------ */

@media (max-width: 620px) {
  .aw-post { font-size: 18px; }
  :root { --aw-gutter: 20px; }
  .aw-masthead .aw-shell { padding-top: 40px; padding-bottom: 34px; }
  .aw-deck { font-size: 19px; }
  .aw-body { padding-top: 36px; }
  .aw-body > p:first-child { font-size: 19px; }
  .aw-body h2 { font-size: 23px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-post * { transition: none !important; animation: none !important; }
}

/* ---------- 9. print ----------------------------------------- */

@media print {
  .aw-masthead, .aw-sig { background: #FFFFFF; }
  .aw-title, .aw-kicker { color: #000000; }
  .aw-deck, .aw-sig p { color: #333333; }
  .aw-related { display: none; }
}