/* The update post.
   ─────────────────────────────────────────────────────────────────────────
   guide.css built a second layout for one page: a reference document with a
   contents rail, screenshots and a table. This is a third shape, and it is not
   a reference document. An update post is somebody telling you how the year
   went, and the things it has to carry are photographs, a list of free events
   nobody is going to read as a sentence, and one month of expenses.

   It loads on top of guide.css rather than instead of it, because the page
   furniture is the same and only the components inside the body are new: the
   rail, the progress bar, the section numbering, the figures and the headings
   are all still guide.css's.

   The rule every component here follows: it may re-arrange the post, never
   restate it. A chart wants a title and a title is one paragraph of the post
   typed again slightly differently. Two copies of a sentence drift, and the
   reader believes the wrong one.

   What is not here matters as much. This file has had a black callout card, a
   gold caveat card, a teal closing card, a donut, a chip grid and a row of
   fact cards, and every one of them came out again. A post where six things
   are raised is a post where nothing is. */

/* ── The opener ────────────────────────────────────────────────────────── */

/* guide.css sets the first paragraph of .gp-intro larger, as a lede. That post
   opens on two sentences of scene-setting; this one opens on a single long
   paragraph that runs into a quote, and set at lede size it becomes a wall
   before the reader has reached anything. */
.gp-intro > p:first-child {
  font-size: 16.5px; line-height: 1.78; color: #3F4152;
}

/* A line worth stopping on.
   No quotation marks from the stylesheet: the mark is the rule down the left,
   and copy that already carries its own quotation marks should not grow a
   second pair. */
.up-quote {
  margin: 30px 0 32px; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--teal);
}
.up-quote p {
  font-family: var(--fh); font-size: clamp(20px, 2.2vw, 25px); font-weight: 600;
  line-height: 1.45; letter-spacing: -0.015em; color: var(--text); margin: 0;
}

/* ── The schedule ──────────────────────────────────────────────────────── */

/* Seven things competing for the same week. As a bulleted list it read as a
   list of chores; as one card it reads as a calendar, which is what the
   sentence above it calls it.

   Two columns, because down a single column it is seven rows of mostly empty
   line and a scroll. The two long ones fall where they fall: masonry would
   pack them tighter and would also reorder somebody's week. */
.up-sched {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px;
  align-items: start; margin: 26px 0 30px;
  border: 1px solid #EDEEF4; border-radius: 16px;
  background: var(--card-2); padding: 16px 20px;
}
.up-sched-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 0 2px; align-items: start;
  padding: 11px 0;
}
.up-sched-row::before {
  content: ''; width: 7px; height: 7px; margin-top: 10px; border-radius: 2px;
  background: var(--teal); transform: rotate(45deg);
}
/* Both paragraphs go in the text column. The ::before marker is the grid's
   first item, so auto-placement drops the second paragraph into the 24px
   marker column, where a sentence sets one word to a line. */
.up-sched-row > p { grid-column: 2; font-size: 16px; line-height: 1.7; color: #3F4152; margin: 0; }
.up-sched-row > p + p { margin-top: 4px; font-size: 15px; color: var(--text-2); }

/* ── Numbers with room around them ─────────────────────────────────────── */

/* Three figures that were a comma-separated clause. The clause is gone, not
   duplicated: the numbers are here and the words that described them are the
   labels. */
.up-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 8px;
}
.up-stat {
  border: 1px solid #EDEEF4; border-radius: 16px; background: var(--card-2);
  padding: 24px 22px 22px; text-align: center;
}
.up-stat-fig {
  font-family: var(--fh); font-size: clamp(30px, 3.8vw, 42px); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.up-stat-lbl { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-top: 10px; }

/* ── More than one photo in a figure ───────────────────────────────────── */

/* Three photographs of three different rooms, on one mat. Cropped to a shared
   4:3 so the row has one baseline: they come off different phones in different
   orientations, and left at their own heights the row reads as three photos
   that happen to be near each other. */
.up-figrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.up-figrow img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Two, and not cropped. This pair is a photograph beside a screenshot of the
   library page, and a screenshot cropped to fit a photograph's shape loses the
   thing it is a screenshot of. Ragged bottoms are the cheaper price. */
.up-figrow--two { grid-template-columns: 1fr 1fr; align-items: start; }
.up-figrow--two img { aspect-ratio: auto; object-fit: fill; }

/* ── Every free thing, by name ─────────────────────────────────────────── */

/* Eighteen event names inside one sentence is a sentence nobody finishes, and
   as a static grid of pills it was six rows of furniture for a single fact.
   Moving, it is one row: you catch four or five names, you get that there are
   a lot of them, and it costs 46px.

   Two identical tracks, each translated by its own full width, which is what
   makes the loop seamless. The second is aria-hidden so a screen reader hears
   the list once. */
.up-reel {
  display: flex; overflow: hidden; margin: 22px 0 26px; padding: 3px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.up-reel-track {
  display: flex; flex: none; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none;
  animation: up-reel-run 55s linear infinite;
}
.up-reel:hover .up-reel-track { animation-play-state: paused; }
.up-reel li {
  list-style: none; margin: 0; white-space: nowrap;
  font-size: 13.5px; line-height: 1.3; color: var(--text-2);
  background: var(--teal-light); border: 1px solid rgba(20,199,176,.3);
  border-radius: 999px; padding: 9px 16px;
}
@keyframes up-reel-run { to { transform: translateX(-100%); } }

/* Nothing moves, and it becomes a strip you push instead. A carousel that
   cannot be stopped and cannot be scrolled is a list you cannot read. */
@media (prefers-reduced-motion: reduce) {
  .up-reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .up-reel-track { animation: none; }
  .up-reel-track[aria-hidden='true'] { display: none; }
}

/* ── One month, as one bar ─────────────────────────────────────────────── */

/* Nine separate bars answered "which is biggest" and hid the question people
   actually ask, which is where a month goes. One bar answers that: rent and
   payroll are 84% of it and you see that before you have read a single label.

   Drawn at exact scale, with one departure. Meetup and the club's own system
   are 0.9px and 0.5px of a 470px bar, and a rect rounded to nothing renders as
   nothing, which reads as a missing line item rather than a small one. Both are
   floored at 1px. Every figure is printed beside its own leader line anyway,
   so nothing here is carried by the geometry alone.

   The colours are one hue, dark to light, in the order the costs fall. That is
   a sequential ramp rather than nine chosen colours, which is the honest choice
   when the categories are ordered by size: the ramp says "this one is bigger"
   a second time, and nine unrelated hues would say nothing nine times. */
.up-costwrap { overflow-x: auto; margin: 26px 0 10px; -webkit-overflow-scrolling: touch; }
/* Below this the leader lines and their labels start colliding. A diagram you
   push sideways beats a diagram whose type has shrunk to 8px. */
.up-cost { display: block; width: 100%; min-width: 560px; height: auto; }

.up-cost-hit { fill: none; pointer-events: all; }
/* The swatch beside each name. The leader line is what actually identifies a
   segment; this is the quieter second channel, for a reader who scans the nine
   labels before they look at the bar. The hairline keeps the palest three from
   disappearing into the page. */
.up-cost-chip { stroke: rgba(20,32,60,.07); stroke-width: 1; }
.up-cost-lead { fill: none; stroke: #D3D5E0; stroke-width: 1.5; }
.up-cost-name {
  font-family: var(--fh); font-size: 14.5px; font-weight: 600; fill: var(--text);
}
.up-cost-money {
  font-family: var(--fh); font-size: 14.5px; font-weight: 700; fill: var(--text);
  font-variant-numeric: tabular-nums;
}
/* The label is the hit target, not the segment: five of the nine segments are
   under 6px tall and three are a hairline. */
.up-cost-row:hover .up-cost-lead { stroke: var(--teal-dark); stroke-width: 2; }
.up-cost-row:hover .up-cost-name,
.up-cost-row:hover .up-cost-money { fill: var(--teal-dark); }

.up-cost-rule { stroke: #E7E8F0; stroke-width: 1; }
.up-cost-totlbl { font-size: 13.5px; font-weight: 600; fill: var(--text-2); }
.up-cost-tot {
  font-family: var(--fh); font-size: 30px; font-weight: 800; fill: var(--text);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* The line about supplies belongs to the diagram, not to the paragraph after
   it, so it sits tight under the total rather than at body spacing. */
.up-costnote {
  font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0 0 30px;
}

/* ── Three things that help ────────────────────────────────────────────── */

/* Columns rather than rows, and deliberately not .gp-ways, which this post
   already uses for what happens next. Two stacks of numbered rows one section
   apart read as one long list with a heading in the middle of it.

   start, not stretch: the third ask is four times as long as the second, and
   equal-height columns answer that with a card two thirds empty. */
.up-help {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  align-items: start; margin: 26px 0 30px;
}
.up-help-card {
  border: 1px solid #EDEEF4; border-radius: 16px; background: var(--card-2);
  padding: 24px 22px;
}
.up-help-n {
  font-family: var(--fh); font-size: 13px; font-weight: 800; line-height: 26px;
  width: 26px; height: 26px; border-radius: 50%; text-align: center;
  background: var(--teal); color: #fff; margin-bottom: 14px;
}
.up-help-h {
  font-family: var(--fh); font-size: 16px; font-weight: 700; line-height: 1.35;
  color: var(--text); margin: 0 0 10px;
}
.up-help-card p { font-size: 15px; line-height: 1.68; color: #3F4152; margin: 0; }

/* ── Sign off ──────────────────────────────────────────────────────────── */

/* Not .gp-end. That block ends in a button, and this post says in as many words
   that it is not going to ask you for anything at the bottom. */
.up-sign {
  margin-top: 44px; padding-top: 32px; border-top: 1px solid #EDEEF4;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
}
.up-sign-mark {
  width: 44px; height: 44px; border-radius: 12px; background: var(--teal-light);
  border: 1px solid rgba(20,199,176,.3);
  display: grid; place-content: center;
  font-family: var(--fh); font-size: 15px; font-weight: 800; color: var(--teal-dark);
}
.up-sign-who { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--text); }
.up-sign-role { font-size: 13px; color: var(--text-3); margin-top: 3px; }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .up-help { grid-template-columns: 1fr; }
  /* Two columns of seven items is two columns of one-word lines once the
     measure is this narrow. */
  .up-sched { grid-template-columns: 1fr; gap: 0; }
  .up-sched-row + .up-sched-row { box-shadow: inset 0 1px 0 #EDEEF4; }
}

@media (max-width: 640px) {
  .up-stats { grid-template-columns: 1fr; }
  .up-stat {
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
    text-align: left; padding: 18px 20px;
  }
  .up-stat-lbl { margin-top: 0; }
  .up-quote { padding-left: 18px; }
  /* Three photographs across a phone are three thumbnails. */
  .up-figrow, .up-figrow--two { grid-template-columns: 1fr; }
  .up-figrow img { aspect-ratio: 3 / 2; }
}