/* =====================================================================
   Paper and Ink · essays/the-fed-held-your-rate-may-not.css
   "The Fed Held. Your Rate May Not.": 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 newspaper clipping stapled to an illustrative refinancing quote (Figure 1)
   and three illustrative loan calendars for March 2026 to February 2027 (Figure 2).
   Gold = the policy target; blue = the borrower's financing cost. */

/* ---- 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 clipping stapled to the quote ------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.cqfig { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.cq { position: relative; }
.clip {
  position: relative; z-index: 1; width: 78%; background: var(--noise), var(--sheet); padding: .9rem 1rem 1rem;
  transform: rotate(-2.5deg); font-family: var(--serif); color: var(--slip-ink); animation: fade .6s ease .1s both;
}
.staple { position: absolute; top: 10px; left: 14px; width: 30px; height: 4px; background: var(--graphite); border-radius: 1px; transform: rotate(-38deg); box-shadow: 0 1px 1px var(--shadow); }
.cd { font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .3rem; padding-left: 2.2rem; opacity: .7; }
.ch { font-size: 1.45rem; line-height: 1.1; font-weight: 600; margin: 0 0 .45rem; letter-spacing: -.01em; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 30%, transparent); padding-bottom: .4rem; }
.cb { font-size: .9rem; line-height: 1.45; margin: 0; columns: 1; }
.cb .gold { color: var(--slip-once); font-weight: 600; }
.quote {
  position: relative; margin: -1.4rem 0 0 2.4rem; background: var(--noise), var(--slip); padding: 2rem 1.2rem 1.2rem;
  transform: rotate(1deg); font-family: var(--mono); font-size: .74rem; line-height: 1.6; animation: fade .6s ease .4s both;
}
.qh { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; opacity: .75; }
.qn { font-size: .7rem; opacity: .7; margin: .1rem 0 .6rem; }
.qline { display: flex; align-items: baseline; gap: 6px; color: var(--slip-life); }
.qline span { flex: 0 1 auto; }
.qline i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-.45em); }
.qline b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.qline:nth-of-type(1) { animation: fade .5s ease .9s both; }
.qline:nth-of-type(2) { animation: fade .5s ease 1.1s both; }
.qline:nth-of-type(3) { animation: fade .5s ease 1.3s both; }
.qline.tot { border-top: 1.5px solid currentColor; margin-top: .35rem; padding-top: .3rem; font-size: .84rem; animation: fade .5s ease 1.6s both; }
.qv { font-size: .64rem; opacity: .7; margin: .5rem 0 0; }
.quote .stamp.s1 { display: table; margin: .6rem .2rem 0 auto; color: var(--slip-life); transform: rotate(-5deg); animation-delay: 2.1s; }
.cnotes { display: grid; gap: 120px; padding-top: 40px; }
.cnotes .mnote p { color: var(--ink); }
.cnotes .n1 { animation: fade .7s ease .8s both; }
.cnotes .n2 { animation: fade .7s ease 2.4s both; }
.cnotes .n1 .pen path { animation-delay: .8s; }
.cnotes .n2 .pen path { animation-delay: 2.4s; }
.cnotes .n1 b { color: var(--once); }
.cnotes .n2 b { color: var(--life); }

/* ---- Figure 2: three loan calendars --------------------------------------- */
/* Positions along each track are fractions of the year: the Fed line at Mar 18 sits at 4.7%
   (17.5 of 31 days into the first of twelve months); monthly resets sit at k/12; Apr 15 at 12.2%. */
.cal {
  --fomc: 4.7%; --apr15: 12.2%;
  position: relative; background: var(--noise), var(--sheet); padding: 1.1rem 1.2rem 1.3rem; transform: rotate(-.3deg);
  overflow-x: clip; overflow-clip-margin: 14px;
}
.calhead, .row { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
.calhead { padding-top: 1.5rem; }
.months { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-family: var(--mono); font-size: .62rem; color: var(--graphite); }
.months span { padding-left: 3px; border-left: 1px solid color-mix(in srgb, var(--slip-ink) 25%, transparent); }
.fomc { position: absolute; left: var(--fomc); bottom: 100%; margin-bottom: .35rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .92rem; color: var(--slip-once); white-space: nowrap; animation: fade .6s ease .3s both; }
.row { border-top: 1px solid color-mix(in srgb, var(--slip-ink) 18%, transparent); padding: .2rem 0; }
.lab { margin: 0; font-family: var(--mono); font-size: .72rem; line-height: 1.35; color: var(--slip-ink); }
.lab b { display: block; font-weight: 500; }
.lab small { display: block; font-size: .64rem; opacity: .7; }
.lab .next { display: block; margin-top: .2rem; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--slip-life); animation: fade .6s ease 2.6s both; }
.track {
  position: relative; height: 3.4rem;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--slip-ink) 14%, transparent) 0 1px, transparent 1px calc(100% / 12));
}
/* the Fed's decision: one thin gold line through every calendar, touching but setting nothing */
.track::before { content: ""; position: absolute; left: var(--fomc); top: -.3rem; bottom: -.3rem; width: 2px; background: var(--slip-once); opacity: .85; animation: fade .6s ease .3s both; }
.track > span { position: absolute; }
.fixed { left: 0; right: 0; top: 50%; height: 2px; background: var(--slip-life); opacity: .55; animation: wipe 1.4s ease .7s both; }
.rb .track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--slip-life); opacity: .45; }
.r { top: 28%; height: 44%; width: 2px; margin-left: -1px; background: var(--slip-life); animation: fade .4s ease both; }
.r:nth-child(1) { left: 0; animation-delay: .9s; }
.r:nth-child(2) { left: calc(100% / 12); animation-delay: 1s; top: 16%; height: 68%; width: 3px; }
.r:nth-child(3) { left: calc(200% / 12); animation-delay: 1.1s; }
.r:nth-child(4) { left: calc(300% / 12); animation-delay: 1.2s; }
.r:nth-child(5) { left: calc(400% / 12); animation-delay: 1.3s; }
.r:nth-child(6) { left: calc(500% / 12); animation-delay: 1.4s; }
.r:nth-child(7) { left: calc(600% / 12); animation-delay: 1.5s; }
.r:nth-child(8) { left: calc(700% / 12); animation-delay: 1.6s; }
.r:nth-child(9) { left: calc(800% / 12); animation-delay: 1.7s; }
.r:nth-child(10) { left: calc(900% / 12); animation-delay: 1.8s; }
.r:nth-child(11) { left: calc(1000% / 12); animation-delay: 1.9s; }
.r:nth-child(12) { left: calc(1100% / 12); animation-delay: 2s; }
.quoteline { left: var(--fomc); width: calc(var(--apr15) - var(--fomc)); top: 50%; border-top: 1.5px dashed var(--slip-life); opacity: .6; animation: fade .5s ease 1.6s both; }
.sign { left: var(--apr15); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--slip-life); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4.5px var(--slip-life); animation: thump .5s cubic-bezier(.3, 1.6, .5, 1) 2s both; }
.after { left: var(--apr15); right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--slip-life); animation: wipe 1.2s ease 2.2s both; }

@media (max-width: 640px) {
  .cqfig { grid-template-columns: minmax(0, 1fr); }
  .cnotes { gap: .9rem; padding-top: 0; }
  .cnotes .pen { display: none; }
}

/* Phone mode: the clipping and quote stack with their notes below; each calendar's label sits above its
   own full-width track, and the month names shrink to initials-sized text so twelve still fit. */
@media (max-width: 560px) {
  .clip { width: 88%; }
  .ch { font-size: 1.25rem; }
  .quote { margin-left: 1rem; padding: 1.9rem 1rem 1.1rem; font-size: .7rem; }
  .qline { flex-wrap: wrap; }
  .cal { padding: 1rem .8rem 1.1rem; }
  .calhead, .row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .calhead .lab { display: none; }
  .calhead { padding-top: 1.6rem; }
  .months { font-size: .56rem; }
  .months span { padding-left: 2px; }
  .row { padding: .5rem 0 .3rem; }
  .track { height: 2.6rem; }
}