/* ─────────────────────────────────────────────────────────
   sticky-notes — research findings, on paper.

   Every other figure on this site is a drawing: something I
   made after the thinking was done. These are the opposite.
   They carry the sentences and the numbers that arrived from
   somebody else and changed what I drew, and the paper is the
   argument — a note reads as evidence that came in, not as a
   conclusion that went out.

   Three rules keep them from becoming decoration:

     1. NOTHING ON A NOTE IS A CONCLUSION. A note carries a
        verbatim sentence or a number somebody else measured,
        and the source it came from. The reading of it — what it
        meant, what I did about it — belongs in the prose beside
        it. The moment a note argues, it stops being evidence.

     2. NO FAKE AFFORDANCES. The reference this came from is a
        Google Keep card, with a drag handle, an overflow menu
        and a resize corner. All three are lies here — there is
        nothing to drag, open or resize — so all three are
        gone. What is left is the paper, the tint and the tilt.

     3. ONE ACCENT, AS EVERYWHERE ELSE. Notes are cream. The
        single note that turned the project gets the site's
        green. A wall of four hues would be sorting the notes
        by nothing.

   The tilt is static, not animated: it is what a note looks
   like on a wall, not a transition. The only motion is the
   straighten on hover, and prefers-reduced-motion drops it.
   ───────────────────────────────────────────────────────── */

.note {
  /* ── Paper ─────────────────────────────────────────────
     Warmer and more saturated than the diagram ground it sits
     on (#f4f3f0), because a note has to read as an object
     placed on that ground rather than as a panel cut out of
     it. The strip is the same hue one step down — the header
     band from the reference, kept because it gives the theme
     word a place to live that is not the body copy. */
  --note-paper: #fbf2dd;
  --note-strip: #f0e1ba;
  --note-ink: #38301f;
  /* 0.72, not the 0.62 this started at: composited on the paper that
     is 3.83:1 and fails AA at 13px. 0.72 is 5.07:1. Same reason
     --ink-50 in style.css is 0.55 rather than 0.5. */
  --note-ink-dim: rgba(56, 48, 31, 0.72);
  --note-tilt: 0deg;

  background: var(--note-paper);
  border-radius: 8px;
  color: var(--note-ink);
  display: grid;
  /* The paper edge is a shadow, never a border. Same call the
     diagram system makes for every object: a hairline outline
     reads as a technical drawing and a shadow reads as a
     thing. Two layers, and the lower one is offset further
     down than --dg-lift because a note is lifted off the wall
     rather than printed on it. */
  box-shadow:
    0 1px 2px rgba(22, 21, 15, 0.08),
    0 6px 14px -6px rgba(22, 21, 15, 0.22);
  overflow: hidden;
  rotate: var(--note-tilt);
  transition:
    rotate 180ms ease,
    translate 180ms ease;
}

.note-tag {
  background: var(--note-strip);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 9px 14px;
  text-transform: uppercase;
}

.note p {
  font-size: 15px;
  line-height: 22px;
  margin: 0;
  padding: 14px 14px 0;
  /* Balanced rather than ragged: a note is four or five lines
     long, and at that length a single orphaned word on the
     last line is most of what the reader sees. */
  text-wrap: pretty;
}

/* A verbatim note is a blockquote, because that is what it is.
   The global rule gives a blockquote a left hairline and dims it
   to --ink-50 — right for an aside inside prose, wrong here,
   where the quote is the entire content of the paper and the
   attribution under it is the only thing that should be dim. */
.note blockquote {
  border-left: 0;
  color: inherit;
  padding-left: 0;
}

/* The source line. Dim, small, and the same shape every time —
   who said it, then how it was collected. It is the part that
   makes a note evidence rather than a slogan, so it never gets
   dropped to fit. */
.note .note-src {
  color: var(--note-ink-dim);
  font-size: 13px;
  line-height: 18px;
  padding: 10px 14px 14px;
}

/* The one note that turned the project. Green because that is
   the site's only accent and this is the only note that gets
   to be the accent. */
.note--turn {
  --note-paper: #edf5e0;
  --note-strip: #d9e9bd;
  --note-ink: #26330f;
  /* 0.75 here rather than 0.72: the green paper is lighter than the
     cream, so the same alpha lands at 4.24:1. This is 5.68:1. */
  --note-ink-dim: rgba(38, 51, 15, 0.75);
}

/* ── The wall ────────────────────────────────────────────
   Four notes as they came off the interviews, above the
   evidence map that turns them into a sequence. That order is
   the point of putting them here: raw first, synthesis second.
   The map owns the 75% and the journey; the wall owns the
   three numbers and the sentence that produced them.

   Grid rather than flex, and the item count is why. Four notes
   in a wrapping flex row go three-and-one the moment the band
   is a little too narrow, and a lone note under three others
   reads as a mistake rather than as a wall.

   Explicit column counts rather than auto-fit, for the same
   reason: auto-fit picked three at the band's mid widths and
   produced exactly the orphan it was chosen to prevent. The
   breakpoints are the evidence map's own, so the two layers of
   this figure always change shape together — 4, then 2, then
   1 — and the wall never disagrees with the row it resolves
   into. */
.note-wall {
  display: grid;
  /* The column gap is the evidence map's --u, not a number of this
     file's own. Four notes over four cards on two different gaps put
     the fourth note four and a half pixels off the fourth card, which
     is the exact size of mistake that reads as sloppiness rather than
     as design. The row gap is larger because rows here are notes on a
     wall, not rows of a table. */
  gap: 26px var(--u);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: 0 auto;
  /* 68rem, the same cap the evidence map under it carries. They are two
     layers of one figure and a reader should see one column of paper
     resolving into one row of cards, not two figures that happen to be
     stacked. */
  max-width: 68rem;
  /* Room for the tilt and the shadow to fall outside the notes
     without being clipped by the band. */
  padding: 6px 0 10px;
}

/* Tilt and rise, per position. Small numbers: past about two
   degrees the type starts to read as broken rather than as
   placed, and the notes are 15px. */
.note-wall .note:nth-child(1) {
  --note-tilt: -1.4deg;
}
.note-wall .note:nth-child(2) {
  --note-tilt: 0.9deg;
  margin-block-start: 14px;
}
.note-wall .note:nth-child(3) {
  --note-tilt: -0.6deg;
}
.note-wall .note:nth-child(4) {
  --note-tilt: 1.3deg;
  margin-block-start: 14px;
}

/* Straighten and lift, as if picked up. Nothing happens on
   click — this is the whole interaction, and it is honest
   about that: the note moves toward being readable, not
   toward being openable. */
@media (hover: hover) {
  .note:hover {
    rotate: 0deg;
    translate: 0 -2px;
  }
}

/* ── A note in the rail ──────────────────────────────────
   A single note pinned in the empty label column beside a
   block of prose — the same 11rem track the masthead name and
   every section heading sit in, so a note lands on the edge
   the whole page already aligns to.

   .block is a two-column grid whose rows are sized by the
   tallest cell, so a third child would fall BELOW the prose
   rather than beside it. --noted names the row explicitly and
   spans the prose across both, which puts the note under its
   own heading where a margin note belongs. */
.block--noted {
  grid-template-rows: auto 1fr;
}

.block--noted > h2 {
  grid-column: 1;
  grid-row: 1;
}

.block--noted > .tight {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.block--noted > .note {
  --note-tilt: -1.2deg;
  align-self: start;
  grid-column: 1;
  grid-row: 2;
  margin-block-start: calc(var(--u) * 1.25);
  /* The rail is 176px. The note fills it rather than sitting
     in the middle of it, so its left edge is the page's left
     edge and the tilt is the only thing breaking that line. */
  width: 100%;
}

/* 176px of paper is narrow, so the type steps down with it —
   at 15px a rail note wraps to eight lines and reads as a
   column of fragments. */
.block--noted > .note p {
  font-size: 14px;
  line-height: 21px;
  padding: 12px 12px 0;
}

.block--noted > .note .note-tag {
  padding: 8px 12px;
}

.block--noted > .note .note-src {
  font-size: 12px;
  line-height: 17px;
  padding: 9px 12px 12px;
}

/* ── Narrow ──────────────────────────────────────────────
   Below 40rem .block collapses to one column, so the row
   placement above has to be undone or the note lands in a row
   that no longer exists. It falls after the prose, which is
   the right reading order on a phone: the section makes its
   point, then shows the note it came from. */
@media (max-width: 40rem) {
  .block--noted {
    grid-template-rows: none;
  }

  .block--noted > h2,
  .block--noted > .tight,
  .block--noted > .note {
    grid-column: 1;
    grid-row: auto;
  }

  .block--noted > .note {
    --note-tilt: -0.8deg;
    max-width: 26rem;
  }

  .block--noted > .note p {
    font-size: 15px;
    line-height: 22px;
    padding: 14px 14px 0;
  }

  .block--noted > .note .note-tag {
    padding: 9px 14px;
  }

  .block--noted > .note .note-src {
    font-size: 13px;
    line-height: 18px;
    padding: 10px 14px 14px;
  }

  .note-wall {
    gap: 20px;
  }
}

/* The wall steps on the evidence map's own breakpoints, so the two
   layers of that figure never hold different shapes at the same
   width. The stagger goes at the same moment the wall stops being
   four across: two offset columns is not texture, it is one note
   that looks dropped. The tilt stays — a stack of notes all square
   to the page is the one arrangement that reads as a mistake
   rather than as a wall. */
@media (max-width: 48rem) {
  .note-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .note-wall .note:nth-child(2),
  .note-wall .note:nth-child(4) {
    margin-block-start: 0;
  }
}

@media (max-width: 30rem) {
  .note-wall {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note {
    transition: none;
  }

  .note:hover {
    translate: none;
  }
}