/* =============================================================
   Amoebaworks post template v4
   AWDS_v2 · 9 September 2026

   v4 IS A READABILITY BUILD. Two decisions changed:

   1. THE GUTTER IS GONE ON POSTS. The case-study chassis stays on
      /work/*, where every row's rail carries a real label. A post
      cannot label its rows, because the body comes out of
      StoryChief without classes, so the rail was one label and a
      lot of empty column. The post is now a centred single column,
      which is what long-form publishing has converged on.
      The eyebrow survives as a margin note: it floats beside the
      text, holds no column open, and disappears below 1180px.

   2. THE PURPS TICKS ARE GONE. The 26x3 bar above every h2 is
      removed. Size and space mark the sections now.

   Measured in-browser at 1438px: body 21px Spectral on 1.7 in a
   604px column renders 66 characters per line, inside the 50-75
   band (WCAG caps at 80). Do not widen the column to "use the
   space": past ~75 characters the eye loses the line return.

   TWO KINDS OF RULE LIVE IN THIS FILE.

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

   2. Body    (.aw-body h2, .aw-body p, .aw-body figure, ...)
      Markup StoryChief renders from the article body. It arrives
      WITHOUT CLASSES and you cannot add any. Every rule in that
      section must be an element selector scoped to .aw-body.
   ============================================================= */

/* ---------- 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);
  --aw-figure-bg:  #F7F8FA;

  /* 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;

  /* THE READ. These are measured, not guessed. */
  /* The read column and the figures are the same width. 996 less the 28px
     of padding on each side is 940, which is exactly --aw-media, so a
     paragraph and the photograph under it share a left and a right edge.
     Figures used to break wider than the text and the mismatch read as a
     mistake on the page. */
  --aw-col:     996px;   /* 940px of text once padding is off */
  --aw-media:   940px;   /* the same measure as the text */
  --aw-pad:     28px;
  --aw-size:    21px;
  --aw-lead:    1.7;
  --aw-pgap:    26px;    /* between paragraphs */
  --aw-sgap:    54px;    /* between sections */
}

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

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

/* the one measure. everything sits in this, centred. */
.aw-wrap {
  max-width: var(--aw-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--aw-pad);
  padding-right: var(--aw-pad);
}

.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);
  padding-top: 76px;
  padding-bottom: 64px;
}

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

.aw-title {
  font-family: var(--aw-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: #FFFFFF;
  margin: 0 0 20px;
  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;
}

/* ---------- 4. the margin note ------------------------------- */
/* The surviving piece of the eyebrow system. It floats to the LEFT
   of the centred column: it does not open a grid track, it does
   not move the text, and it is gone below 1180px. If it ever needs
   to push the column over to fit, delete it instead. */

/* The positioning context is the WRAP, not .aw-read. .aw-read is
   full-bleed, so anchoring to it throws the note off the left edge
   of the viewport. This one line is load bearing. */
.aw-read .aw-wrap { position: relative; }

.aw-margin {
  position: absolute;
  right: calc(100% + 46px);
  top: 56px;
  width: 168px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--aw-label);
  font-size: 12px;
  line-height: 1.5;
  color: var(--aw-quiet);
}
.aw-margin .aw-who {
  color: var(--aw-head-ink);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 1180px) { .aw-margin { display: none; } }

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

.aw-body { padding-top: 56px; }

.aw-body p { margin: 0 0 var(--aw-pgap); }

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

/* Section hooks. h2 only. No tick, no rule, no number: the size
   and the space above it are the marker. An h3 here is a defect in
   the post, not a styling gap, and is left unstyled so it gets
   caught in review. */
.aw-body h2 {
  font-family: var(--aw-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--aw-head-ink);
  margin: var(--aw-sgap) 0 18px;
  text-wrap: balance;
}

/* 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.
   Do NOT broaden this to `.aw-body em`. */
.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); }

/* ---------- 6. media ----------------------------------------- */
/* Figures break wider than the text column and stay centred on it.
   The text keeps its 66-character measure; the diagram, the chart
   and the video get room to be legible. One rule, applied to bare
   <figure>, because the body has no classes to switch on.

   If StoryChief's figure directive turns out to emit a size
   attribute we can read (its comment carries "size": "regular"),
   map it here later: regular to the text column, large to
   --aw-media. Unverified, so today every figure breaks wide. */

.aw-body figure {
  width: var(--aw-media);
  max-width: calc(100vw - 40px);
  margin: 40px 0 40px 50%;
  transform: translateX(-50%);
}

.aw-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--aw-line);
  background: var(--aw-figure-bg);
}

/* video embed. 16:9, ink ground so it reads as ours before it
   loads and while it is paused. */
.aw-body figure iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: var(--aw-field);
}

/* the caption is set to the TEXT measure even under a wide figure,
   so it reads as a sentence rather than a banner */
.aw-body figcaption {
  margin-top: 14px;
  font-family: var(--aw-label);
  font-size: 13px;
  line-height: 1.55;
  color: var(--aw-quiet);
  max-width: 62ch;
}

/* CALLOUT.
   Only one is sanctioned: > [!WARNING], to flag a projection or a
   figure without a basis. StoryChief's rendered markup for
   callouts is UNVERIFIED (HANDOFF.md, open item 2). Defensive:
   confirm against a published post and tighten the selector. */
.aw-body blockquote {
  margin: 30px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--aw-n2);
  background: var(--aw-n1);
  font-family: var(--aw-label);
  font-size: 16px;
  line-height: 1.6;
  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 var(--aw-pgap); padding-left: 24px; }
.aw-body li { margin-bottom: 10px; }

/* Deliberately unstyled: .strchf-button, <details>/<summary>,
   <picture> galleries, h3. If one appears on a live post it looks
   wrong on purpose. Remove it from the post, do not style it. */

/* ---------- 7. close and related ------------------------------ */

.aw-close-rule {
  border: 0;
  border-top: 1px solid var(--aw-line);
  margin: 40px 0 0;
}

.aw-related { margin-top: 44px; padding-bottom: 96px; }
.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: 14px 0;
  text-decoration: none;
  color: var(--aw-head-ink);
  font-size: 18px;
  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;
}

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

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

/* ---------- 9. responsive ------------------------------------ */

@media (max-width: 620px) {
  :root {
    --aw-size: 19px;
    --aw-pad:  22px;
    --aw-pgap: 22px;
    --aw-sgap: 44px;
  }
  .aw-masthead { padding-top: 44px; padding-bottom: 38px; }
  .aw-deck { font-size: 19px; }
  .aw-body { padding-top: 36px; }
  .aw-body > p:first-child { font-size: 21px; }
  .aw-body h2 { font-size: 24px; }
  .aw-body figure { margin-top: 30px; margin-bottom: 30px; }
  .aw-sig { padding-top: 32px; padding-bottom: 32px; }
  .aw-related { padding-bottom: 64px; }
}

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

/* ---------- 10. print ---------------------------------------- */

@media print {
  .aw-masthead, .aw-sig { background: #FFFFFF; }
  .aw-title, .aw-kicker { color: #000000; }
  .aw-deck, .aw-sig p { color: #333333; }
  .aw-margin { display: none; }
  .aw-body figure { width: 100%; margin-left: 0; transform: none; }
  .aw-related { display: none; }
}