/* Career page: "The route travelled". Amber route line, teal stations, faint map grid behind. */
:root {
  --route: var(--career);
  --station: var(--accent);
  --grid-line: rgba(154, 171, 181, 0.07);
  --grid-major: rgba(154, 171, 181, 0.14);
  --grid-point: rgba(53, 208, 192, 0.45);
  --grid-home: rgba(242, 165, 65, 0.6);
  --line-x: 28px;   /* centre of the route line, from the left edge of the timeline */
  --gutter: 72px;   /* space left of the cards */
  --badge: 52px;    /* station logo size */
}

@media (prefers-color-scheme: light) {
  :root {
    --grid-line: rgba(40, 70, 80, 0.07);
    --grid-major: rgba(40, 70, 80, 0.14);
    --grid-point: rgba(11, 122, 112, 0.4);
    --grid-home: rgba(154, 90, 6, 0.55);
  }
}

@media (min-width: 720px) {
  :root {
    --line-x: 36px;
    --gutter: 100px;
    --badge: 68px;
  }
}

/* Intro */
.career-intro,
.timeline-section {
  max-width: 880px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.career-intro {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 24px;
}

.career-intro h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.about p {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.fact {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.fact strong {
  display: block;
  color: var(--route);
  font-size: 1.7rem;
  line-height: 1.2;
}

.fact span {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---- The line map: the whole route to true time scale, like the strip map above a train door ---- */

.route-overview {
  --map-line: 6px;
  --map-names: 84px; /* room for the slanted station names above the line */
  margin-top: 44px;
}

.route-map {
  position: relative;
  padding-top: var(--map-names);
}

.rm-line {
  position: relative;
  height: var(--map-line);
}

.rm-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  border-radius: calc(var(--map-line) / 2);
  transform-origin: left center;
}

.rm-seg-edu {
  background: var(--station);
}

.rm-seg-work {
  background: var(--route);
}

/* The two years between DTU and COWI, dotted like the gap on the timeline below. */
.rm-seg-gap {
  top: 1px;
  bottom: 1px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--route) 0 4px, transparent 4px 9px);
  opacity: 0.6;
}

/* Terminus bars at both ends of the line. */
.rm-cap {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  translate: -50% -50%;
}

.rm-cap-start {
  left: 0;
  background: var(--station);
}

.rm-cap-end {
  left: 100%;
  background: var(--route);
}

.rm-stations {
  position: absolute;
  inset: var(--map-names) 0 auto 0;
  height: var(--map-line);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-stop {
  --line-color: var(--route);
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
}

.rm-stop-edu {
  --line-color: var(--station);
}

.rm-station {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
}

.rm-dot {
  width: 16px;
  height: 16px;
  border: 3px solid var(--line-color);
  border-radius: 50%;
  background: var(--bg);
  transition: scale 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.rm-name {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  padding-left: 4px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transform-origin: left bottom;
  rotate: -45deg;
  transition: color 0.2s ease;
}

.rm-station:hover .rm-dot,
.rm-station:focus-visible .rm-dot {
  scale: 1.3;
  background: var(--line-color);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--line-color) 60%, transparent);
}

.rm-station:hover .rm-name,
.rm-station:focus-visible .rm-name {
  color: var(--line-color);
}

.rm-station:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
}

/* A decade scale bar under the line. */
.rm-axis {
  position: relative;
  height: 30px;
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.rm-tick {
  position: absolute;
  top: 8px;
  left: calc(var(--x) * 1%);
  translate: -50% 0;
}

.rm-tick::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: currentColor;
  opacity: 0.6;
}

.rm-tick-start {
  translate: 0 0;
  color: var(--station);
}

.rm-tick-start::before {
  left: 0;
}

.rm-tick-end {
  translate: -100% 0;
  color: var(--route);
}

.rm-tick-end::before {
  left: auto;
  right: 0;
}

/* Dimension lines: what the facts underneath measure. */
.rm-dims {
  position: relative;
  height: 10px;
}

.rm-dim {
  position: absolute;
  top: 4px;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  height: 6px;
  border: 1.5px solid var(--dim-color);
  border-bottom: none;
  opacity: 0.7;
}

.rm-dim-edu { --dim-color: var(--station); }
.rm-dim-work { --dim-color: var(--route); }

/* Once the map is drawn, the facts become the labels of those dimension lines. */
.route-overview.is-mapped .facts {
  display: grid;
  grid-template-columns: calc(var(--edu-end) * 1%) calc((var(--work-start) - var(--edu-end)) * 1%) auto 1fr;
  gap: 0;
  margin-top: 10px;
}

.route-overview.is-mapped .fact {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

/* The DTU-to-work gap on the line is only two years wide, so the education fact keeps its own
   distance from the work facts instead of running into them. */
.route-overview.is-mapped .fact-edu {
  grid-column: 1;
  padding-right: clamp(18px, 4vw, 36px);
  text-align: right;
}

.route-overview.is-mapped .fact-work {
  grid-column: 3;
  grid-row: 1;
}

.route-overview.is-mapped .fact-work + .fact-work {
  grid-column: 4;
  padding-left: clamp(18px, 4vw, 36px);
}

.route-overview.is-mapped .fact strong {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.route-overview.is-mapped .fact-edu strong {
  color: var(--station);
}

.route-overview.is-mapped .fact span {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.35;
}

/* The line draws itself once, left to right, as the page opens: school, then the gap, then work. */
.js .rm-seg {
  animation: rm-draw calc((var(--to) - var(--from)) * 0.014s) cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--from) * 0.014s + 0.15s);
}

.js .rm-seg-work {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.js .rm-station {
  animation: rm-stop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--x) * 0.014s + 0.2s);
}

.js .rm-cap-end,
.js .rm-dims,
.js .route-overview.is-mapped .facts {
  animation: rm-fade 0.6s ease-out both;
  animation-delay: 1.5s;
}

@keyframes rm-draw {
  from { scale: 0 1; }
}

@keyframes rm-stop {
  from { opacity: 0; scale: 0.4; }
}

@keyframes rm-fade {
  from { opacity: 0; translate: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rm-seg,
  .js .rm-station,
  .js .rm-cap-end,
  .js .rm-dims,
  .js .route-overview.is-mapped .facts {
    animation: none;
  }
}

@media (min-width: 720px) {
  .route-overview {
    --map-names: 92px;
  }

  .rm-name {
    font-size: 0.86rem;
  }
}

/* On a phone, stations two years apart sit ~14px apart, so the names stand steeper to stay clear of each other. */
@media (max-width: 719px) {
  .route-overview {
    --map-names: 76px;
    margin-top: 36px;
  }

  .rm-name {
    font-size: 0.7rem;
    rotate: -70deg;
  }
}

/* Timeline */
.timeline-section {
  padding-top: 40px;
  padding-bottom: 16px;
}

.timeline-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.line-chip {
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: var(--route);
}

.line-chip-branch {
  background: var(--station);
}

.route {
  --line-color: var(--route);
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-branch {
  --line-color: var(--station);
}

/* The faint track, the drawn line (scaled by --draw from js/career.js) and the dotted gap after the last station. */
.route-track,
.route-line,
.route-dash {
  position: absolute;
  left: calc(var(--line-x) - 3px);
  width: 6px;
  border-radius: 3px;
  pointer-events: none;
}

.route-track,
.route-line {
  top: var(--line-start, calc(var(--badge) / 2));
  bottom: var(--line-end, 0px);
}

.route-track {
  background: color-mix(in srgb, var(--line-color) 18%, transparent);
}

.route-line {
  background: var(--line-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--line-color) 45%, transparent);
  transform: scaleY(var(--draw, 0));
  transform-origin: top;
}

.route-dash {
  top: var(--dash-top, 0px);
  bottom: 0;
  background: repeating-linear-gradient(to bottom, var(--line-color) 0 6px, transparent 6px 14px);
  opacity: 0.6;
}

.station {
  position: relative;
  padding-bottom: 28px;
  padding-left: var(--gutter);
}

.station-badge {
  position: absolute;
  top: 0;
  left: calc(var(--line-x) - var(--badge) / 2);
  z-index: 1;
  width: var(--badge);
  height: var(--badge);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--logo-bg, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--station) 35%, transparent);
  transition: box-shadow 0.4s ease;
}

.station.is-reached .station-badge {
  box-shadow: 0 0 0 3px var(--station), 0 0 22px color-mix(in srgb, var(--station) 45%, transparent);
}

.station-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--logo-position, 50% 50%);
  transform: scale(var(--logo-scale, 1));
}

.station-badge.fit-contain img {
  padding: 14%;
  object-fit: contain;
}

.station-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.4s ease;
}

.station.is-reached .station-card {
  border-color: color-mix(in srgb, var(--station) 30%, var(--line));
}

/* Arriving from the line map: the chosen station answers. */
.station:target .station-card {
  border-color: var(--line-color);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--line-color) 55%, transparent);
}

/* The timetable column: a big start year, then the exact period. */
.station-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
}

.station-year {
  color: var(--route);
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.route-branch .station-year {
  color: var(--station);
}

.station-period {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.station-card h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.station-card h3 a {
  color: inherit;
  text-decoration: none;
}

.station-card h3 a:hover {
  text-decoration: underline;
}

.station-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.stops {
  display: grid;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.stop {
  position: relative;
}

.stop-title {
  margin: 0;
  font-weight: 650;
}

.stop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.stop-period {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pin svg {
  width: 14px;
  height: 14px;
  color: var(--station);
}

/* Smaller stops on the line for companies with several roles. 21px = card border + padding. */
.station-multi .stop::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(var(--line-x) - var(--gutter) - 21px - 7px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--line-color);
  border-radius: 50%;
  background: var(--bg);
}

/* A shared card around related companies. The negative margin is cancelled by the border and padding
   (1px + 11px), so the stations inside keep exactly the same position relative to the route line. */
.station-group {
  margin: 0 -12px 28px;
  padding: 14px 11px 16px;
  border: 1px solid color-mix(in srgb, var(--station) 35%, var(--line));
  border-radius: calc(var(--radius) + 8px);
  background: color-mix(in srgb, var(--station) 6%, transparent);
}

.group-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: var(--gutter);
  color: var(--station);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.group-note svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.group-stations {
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-stations .station:last-child {
  padding-bottom: 14px;
}

.route-gap {
  position: relative;
  padding: 18px 0 30px var(--gutter);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.route-gap strong {
  color: var(--route);
  font-weight: 600;
}

/* Influential persons */
.line-chip-people {
  background: linear-gradient(90deg, var(--route) 50%, var(--station) 50%);
}

.influence-group + .influence-group {
  margin-top: 28px;
}

.influence-heading {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.person-card {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.person-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--station);
  border-radius: 50%;
  color: var(--station);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.person-card h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.person-card h4 a {
  color: inherit;
  text-decoration: none;
}

.person-card h4 a:hover {
  text-decoration: underline;
}

.person-role {
  margin: 3px 0 0;
  color: var(--route);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.person-text {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.person-card.is-open .person-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.person-toggle {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--station);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.person-toggle:hover {
  text-decoration: underline;
}

.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

/* The links only appear once the card is expanded (or if it has nothing to expand). */
.person-card:not(.is-open):not(.no-toggle) .person-links {
  display: none;
}

.person-links a {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.person-links a::after {
  content: " ↗";
  color: var(--muted);
}

.person-links a:hover {
  border-color: var(--station);
  color: var(--station);
}

.person-tbd {
  align-items: center;
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
}


@media (min-width: 720px) {
  .career-intro,
  .timeline-section {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* A clean, printable version of the page when a visitor prints it or saves it as a PDF. */
@media print {
  :root {
    --bg: #ffffff;
    --text: #111111;
    --muted: #444444;
    --line: #dddddd;
    --route: #9a5a06;
    --station: #0b7a70;
  }

  body {
    background: #ffffff;
    color: #111111;
    font-size: 11pt;
  }

  #bg,
  .site-header,
  .sound-corner,
  .skip-link,
  .site-footer {
    display: none !important;
  }

  .career-intro {
    padding-top: 0;
  }

  .js .reveal {
    opacity: 1 !important;
    animation: none !important;
  }

  .route-line {
    transform: none;
    box-shadow: none;
  }

  /* Print the full text of every person card. */
  .person-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
  }

  .person-toggle {
    display: none !important;
  }

  /* On paper the link text alone is useless, so print the address after it. */
  .person-card .person-links {
    display: flex !important;
  }

  .person-links a::after {
    content: " (" attr(href) ")";
  }

  .station,
  .fact,
  .person-card {
    break-inside: avoid;
  }

  .station-card,
  .fact,
  .person-card {
    background: none;
  }

  .station-badge {
    box-shadow: 0 0 0 2px var(--station);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}