/* The job: "Fifty-two weekends". A year of weekends as a 4 × 13 grid of
   graphite squares under the headline: the first lit (the first run), the
   rest the upkeep, a few marked by mono labels on leaders: the security fix,
   2 am (outlined in blue), the migration and the handover. The owner's
   paragraph runs in two columns below, split at a sentence.

   Each label hangs off a ring in its square. Its leader runs from the ring
   to the label's rule, --dx across (signed; --sx is its sign) and --lead
   beyond the square's edge; --flip 1 sets the label to the left of the
   rule's end. The grid is 13 columns at every width. */

/* Whole pixels: the band's opening space and its height, so the stages
   below land on whole pixels (as src/sections/run-again.css). */
.job { padding-top: round(var(--section-space), 1px); height: calc-size(auto, round(up, size, 1px)); }
/* Stacked, the third option's copy hangs below the end of the story
   (src/story.css, --story-overhang): the job starts below its room, with
   clear space under it. */
@media (max-width: 900px) {
  .job { margin-top: round(var(--story-overhang) + clamp(72px, 14vw, 120px), 1px); }
}

.job-weekends {
  --cell-gap-x: clamp(4px, 1.45vw, 22px);
  --cell-gap-y: clamp(4px, 1.2vw, 18px);
  --ring-size: 9px;
  margin: clamp(40px, 3.8vw, 64px) 0 0;
  padding: 52px 0 52px;
}

.weekend-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: var(--cell-gap-y) var(--cell-gap-x);
}

.weekend {
  position: relative;
  aspect-ratio: 1.06;
  border: 1px solid rgba(236, 235, 231, 0.34);
  border-radius: 3px;
  background: #121212;
}
.weekend-first { border-color: var(--paper); background: var(--paper); }
.weekend-late { border: 1.5px solid #4f8cff; box-shadow: 0 0 10px rgba(79, 140, 255, 0.35); }

/* A label: the ring in its square, the leader and the label on its rule. */
.weekend-note { --dx: 24px; --sx: 1; --lead: 26px; --flip: 0; position: absolute; inset: 0; }
.weekend-note::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 28%;
  top: 28%;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);
  box-sizing: border-box;
  border: 1.2px solid var(--ring);
  border-radius: 50%;
  background: #121212;
}
.weekend-note.below::before { top: 72%; }
.weekend-first .weekend-note::before { border-color: #121212; background: var(--paper); }

.weekend-leader {
  position: absolute;
  left: calc(28% + min(0px, var(--dx)));
  width: max(var(--dx), -1 * var(--dx));
  height: calc(28% + var(--lead));
  overflow: visible;
  scale: var(--sx) 1;
}
.above .weekend-leader { top: calc(var(--lead) * -1); }
.below .weekend-leader { top: 72%; }
.weekend-leader line { stroke: var(--hairline); stroke-width: 1; }

.weekend-label {
  position: absolute;
  left: calc(28% + var(--dx));
  translate: calc(var(--flip) * -100%) 0;
  padding: 0 2px;
  font: 400 13px/1 var(--mono);
  white-space: nowrap;
  color: var(--text);
}
.above .weekend-label { bottom: calc(100% + var(--lead)); padding-bottom: 7px; border-bottom: 1px solid var(--hairline); }
.below .weekend-label { top: calc(100% + var(--lead)); padding-top: 7px; border-top: 1px solid var(--hairline); }

[data-weekend="1"] .weekend-note { --dx: -22px; --sx: -1; }
[data-weekend="2"] .weekend-note { --dx: 30px; }
[data-weekend="47"] .weekend-note { --dx: -24px; --sx: -1; }
[data-weekend="50"] .weekend-note { --dx: -24px; --sx: -1; }
[data-weekend="52"] .weekend-note { --dx: 26px; --flip: 1; }

/* The owner's paragraph, split at a sentence into two columns. */
.job-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  max-width: none;
  margin-top: clamp(24px, 2.6vw, 44px);
}
.job-body > span { max-width: 27em; }
.job-body > span + span { padding-left: calc(var(--col-gap) * 2); }

@media (max-width: 900px) {
  .job-body { grid-template-columns: minmax(0, 1fr); row-gap: 0.8em; }
  .job-body > span + span { padding-left: 0; }
}

/* The phone: small squares, and the lower labels in tiers so none
   overlaps its neighbour. */
@media (max-width: 640px) {
  .job-weekends { --ring-size: 7px; padding: 36px 0 76px; }
  .weekend { border-radius: 2px; }
  .weekend-label { font-size: 10.5px; }
  .above .weekend-label { padding-bottom: 5px; }
  .below .weekend-label { padding-top: 5px; }
  .weekend-note { --lead: 16px; }
  [data-weekend="1"] .weekend-note { --dx: -4px; }
  [data-weekend="2"] .weekend-note { --dx: 64px; }
  [data-weekend="47"] .weekend-note { --dx: -6px; }
  [data-weekend="50"] .weekend-note { --dx: -6px; --lead: 36px; --flip: 1; }
  [data-weekend="52"] .weekend-note { --dx: 8px; --lead: 56px; }
}