/* =====================================================================
   Paper and Ink · essays/agreement-is-not-advice.css
   "Agreement Is Not Advice": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   a printed draft email with the writer's interpretations marked and questions pencilled in the margin (Figure 1)
   and two index cards holding two invented reviews of the same draft (Figure 2).
   Gold = affirmation of the user's account; blue = examination of the decision; status marks are graphite. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the unsent letter ------------------------------------------ */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.letfig { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 0 34px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding: 6px 4px 0; }
.letter {
  position: relative; background: var(--noise), var(--sheet); padding: 1.2rem 1.4rem 1.4rem; transform: rotate(-.6deg);
  color: var(--slip-ink); animation: fade .6s ease .1s both;
}
.lh { font-family: var(--mono); font-size: .72rem; line-height: 1.7; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 25%, transparent); }
.lh span { opacity: .6; display: inline-block; min-width: 4.4em; }
.lb { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; margin: 0 0 .7rem; }
.letter .c-once:nth-of-type(1) { animation-delay: .9s; }
.letter .c-once { animation-delay: 1.3s; }
.letter .stamp { display: table; margin: .6rem 0 0 auto; color: var(--graphite); transform: rotate(-5deg); font-size: .66rem; animation-delay: 2.9s; }
.qs { list-style: none; margin: 0; padding: .4rem 0 0; display: grid; gap: 1.2rem; }
.qs li { position: relative; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.35; color: var(--life); padding-left: 1.4rem; animation: fade .6s ease both; }
.qs li::before { content: "?"; position: absolute; left: 0; top: 0; font-style: normal; font-weight: 600; }
.qs li:nth-child(1) { animation-delay: 1.8s; }
.qs li:nth-child(2) { animation-delay: 2.1s; }
.qs li:nth-child(3) { animation-delay: 2.4s; }
.qs li:nth-child(4) { animation-delay: 2.7s; }
.qh { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--life); margin: 0; animation: fade .6s ease 1.6s both; }
.again { margin-top: 1rem; }

/* ---- Figure 2: two reviews on index cards -------------------------------- */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; padding: 10px 6px 4px; }
.rcard {
  position: relative; background-color: var(--sheet); color: var(--slip-ink);
  background-image: var(--noise), repeating-linear-gradient(transparent 0 27px, var(--grid-major) 27px 28px);
  background-size: 180px, 100% 28px; background-position: 0 0, 0 58px;
  padding: 14px 18px 18px; border-top: 4px solid var(--edge);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep); animation: fade .6s ease both;
}
.rcard.a { --edge: var(--slip-once); transform: rotate(-1.1deg); animation-delay: .2s; }
.rcard.b { --edge: var(--slip-life); transform: rotate(.9deg); animation-delay: .8s; }
.rno { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; opacity: .7; margin: 0; display: flex; justify-content: space-between; gap: 10px; }
.rt { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.2; margin: 6px 0 8px; color: var(--edge); }
.rq { font-family: var(--serif); font-size: 1rem; line-height: 1.75; margin: 0 0 .6rem; }
.rq ol { margin: .2rem 0 0; padding-left: 1.3rem; }
/* the cards stay paper-colored in dark mode, so the button keeps the paper's ink, not the page's muted text */
.ask { font-family: var(--sans); font-size: .78rem; margin-top: .4rem; color: var(--graphite); }
.ask:hover, .ask:focus-visible { color: var(--slip-ink); }
.asked { margin: .5rem 0 0; padding: .5rem .6rem; border: 1px dashed var(--edge); font-family: var(--mono); font-size: .72rem; line-height: 1.55; color: var(--edge); background: var(--noise), var(--slip); }
.asked p { margin: 0; }
.asked[hidden] { display: none; }
.rnotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 16px; }
.rnotes p { margin: 0; display: flex; gap: 10px; align-items: flex-start; color: var(--ink); max-width: 32ch; animation: fade .7s ease both; }
.rnotes p:nth-child(1) { animation-delay: 1.6s; }
.rnotes p:nth-child(2) { animation-delay: 2.2s; }
.rnotes .pen { width: 48px; height: 30px; }
.rnotes p:nth-child(1) .pen path { animation-delay: 1.6s; }
.rnotes p:nth-child(2) .pen path { animation-delay: 2.2s; }

@media (max-width: 640px) {
  .letfig { grid-template-columns: minmax(0, 1fr); gap: 1rem 0; }
  .qs { gap: .7rem; }
  .reviews, .rnotes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rnotes { gap: 12px; }
  .rnotes .pen { display: none; }
}

/* Phone mode: the letter and its pencilled questions stack, and the two review cards stack, each keeping its
   reveal button. */
@media (max-width: 560px) {
  .letter { padding: 1rem 1rem 1.2rem; }
  .lb { font-size: .98rem; }
  .rcard { padding: 12px 14px 16px; }
  .rq { font-size: .96rem; }
}