/* Career: a chronicle by years. The line of this world is a time scale with ticks: it is the axis of the chart
   on top and the spine of the years below. Lanes differ by pattern, not by colour. */
.page-career main { max-width: 1180px; margin: 0 auto; }
.cr-head { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 20px; row-gap: 6px; }
.cr-head .mark { width: 64px; height: 64px; grid-row: span 2; align-self: center; }
.cr-head h1 { font-size: clamp(48px, 8.4vw, 116px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; }
.cr-sub { margin-top: 10px; font-size: 16px; font-weight: 600; }

.chart { --lab: 84px; margin-top: 36px; }
.cr-years { margin-left: var(--lab); display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); border-bottom: 3px solid var(--ink); }
.cr-years a { display: block; padding: 0 0 6px 5px; min-height: 30px; border-left: 3px solid var(--ink); font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; }
.cr-years a:hover, .cr-years a:focus-visible { text-decoration: underline; }
.cr-lanes { position: relative; padding: 10px 0 4px; }
.cr-lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; padding: 6px 0; }
.cr-name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cr-track { grid-column: 2; position: relative; height: calc(var(--rows) * 16px + (var(--rows) - 1) * 5px);
  background: repeating-linear-gradient(90deg, rgba(20, 17, 15, 0.22) 0 1px, #0000 1px calc(100% / 18)); }
.bar { position: absolute; left: var(--l); width: var(--w); top: calc(var(--r) * 21px); height: 16px; min-width: 5px; border: 2px solid var(--ink); }
.bar[data-p="solid"], .sw[data-p="solid"] { background: var(--ink); }
.bar[data-p="hatch"], .sw[data-p="hatch"] { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, #0000 2px 6px); }
.bar[data-p="dots"], .sw[data-p="dots"] { background: radial-gradient(circle, var(--ink) 0 1.6px, #0000 2px) 0 0 / 6px 6px; }
.bar[data-p="double"], .sw[data-p="double"] { background: linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 2px no-repeat; }
.cr-now { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--now) / 100%); width: 0; border-left: 2px dashed var(--ink); }
.chart .cr-now { left: calc(var(--lab) + (100% - var(--lab)) * (var(--now) / 100%)); }
.cr-now b { position: absolute; bottom: -22px; right: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; font-style: normal; }

.sum { margin-top: 64px; }
.sum h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.nums { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; }
.nums dt { font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.nums dd { margin-top: 8px; font-size: 15.5px; line-height: 1.4; max-width: 26ch; }

.aside { margin-top: 56px; display: grid; gap: 14px; }
.aside h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* the years: a spine with a tick at every year */
.years { margin-top: 64px; border-left: 3px solid var(--ink); }
.year { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; padding: 18px 0 26px 28px; }
.year::before { content: ''; position: absolute; left: 0; top: 34px; width: 18px; border-top: 3px solid var(--ink); }
.year h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.year.is-quiet { padding: 6px 0 6px 28px; }
.year.is-quiet::before { top: 15px; width: 10px; border-top-width: 2px; }
.year.is-quiet h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.7; }
.entries { display: grid; gap: 22px; max-width: 64ch; }
.entry { display: grid; gap: 4px; }
.entry .lane { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sw { display: inline-block; width: 22px; height: 12px; border: 2px solid var(--ink); flex: none; }
.entry h3 { font-size: 21px; line-height: 1.25; }
.entry a { font-weight: 600; }

@media (max-width: 860px) {
  /* no room for names beside the tracks: each name stands over its track, and every fourth year keeps its tick */
  .chart { --lab: 0px; }
  .cr-lane { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 8px 0; }
  .cr-track { grid-column: 1; }
  .cr-years a { font-size: 0; padding-left: 0; border-left-color: transparent; }
  .cr-years li:nth-child(4n + 1) a { font-size: 12.5px; padding-left: 4px; border-left-color: var(--ink); white-space: nowrap; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year { grid-template-columns: 1fr; row-gap: 12px; }
}