/* Styles for the article "How to build a data visualization portfolio in the age of AI" (body.article-portfolio).
   Charts use the site's data colours. The accent (crimson by default) stays on small labels, numbers and thin lines. */

.article-portfolio {
  --pf-text: rgba(250, 250, 250, 0.86);
  --pf-soft: rgba(250, 250, 250, 0.6);
  /* The site's accent (crimson, or the colour a visitor picked with the K): numbers, the quote bar, the active step. */
  --pf-accent: var(--accent, #d64553);
  --pf-sky: #84d8ff;
  --pf-panel: #0e0e0e;
}

.article-portfolio .article {
  width: min(100% - 3rem, 780px);
}

.article-portfolio .article h1 {
  font-size: clamp(3rem, 7.4vw, 5.6rem);
  line-height: 1.02;
}

.article-portfolio .article-body {
  max-width: none;
  margin-top: 2.5rem;
  counter-reset: pf-section;
}

.article-portfolio .article-body > p,
.article-portfolio .article-body > ul > li,
.article-portfolio .article-body > ol > li {
  color: var(--pf-text);
  font-size: 1.125rem;
  line-height: 1.72;
}

.article-portfolio .article-body > h2 {
  margin-top: 5rem;
}

.article-portfolio .article-body > h2::before {
  counter-increment: pf-section;
  content: counter(pf-section, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  color: var(--pf-accent);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.article-portfolio .article-body > h3 {
  margin-top: 3rem;
  color: #fafafa;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
}

.article-portfolio .article-body a {
  text-decoration-color: rgba(132, 216, 255, 0.7);
  text-decoration-thickness: 1px;
}

.article-portfolio .article-body a:hover {
  color: var(--pf-sky);
}

.article-portfolio .article-body blockquote {
  margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--pf-accent);
}

.article-portfolio .article-body blockquote p {
  margin: 0;
  color: #fafafa;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-style: italic;
  line-height: 1.3;
}

/* The questions for each project page. */
.article-portfolio .article-body > ul {
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.article-portfolio .article-body > ul > li {
  position: relative;
  margin: 0;
  padding: 0.9rem 1.1rem 0.9rem 2.6rem;
  background: var(--pf-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.article-portfolio .article-body > ul > li::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pf-sky);
}

/* How I would build one today. */
.article-portfolio .article-body > ol {
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: pf-build;
}

.article-portfolio .article-body > ol > li {
  counter-increment: pf-build;
  position: relative;
  margin: 0;
  padding: 1.15rem 0 1.15rem 3.4rem;
  border-top: 1px solid var(--border);
}

.article-portfolio .article-body > ol > li:last-child {
  border-bottom: 1px solid var(--border);
}

.article-portfolio .article-body > ol > li::before {
  content: counter(pf-build);
  position: absolute;
  left: 0.2rem;
  top: 0.75rem;
  color: var(--pf-accent);
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}

/* Figures break out of the text column, up to 1120px, and stay inside the viewport. */
.pf-figure {
  position: relative;
  box-sizing: border-box;
  width: min(100vw - 3rem, 1120px);
  margin: 3rem 0;
  margin-left: calc(50% - min(50vw - 1.5rem, 560px));
  padding: clamp(1rem, 2.4vw, 1.75rem);
  background: var(--pf-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pf-hero {
  margin-top: 0;
}

.pf-figure figcaption {
  margin-top: 1rem;
}

.pf-figure figcaption p {
  margin: 0 0 0.4rem;
  color: rgba(250, 250, 250, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}

.pf-figure figcaption .pf-source {
  color: rgba(250, 250, 250, 0.46);
  font-size: 0.8rem;
}

/* Chart boxes: the title says what the data is, the buttons switch views, the finding says what the view shows,
   and how to read the view follows right under it, in white. The chart comes next, then the source. */
.pf-head {
  margin-bottom: 1.25rem;
}

.pf-title {
  margin: 0 0 1rem;
  color: #fafafa;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  text-wrap: balance;
}

.pf-head .pf-controls {
  margin-top: 0;
}

.pf-finding {
  margin: 1rem 0 0;
  color: rgba(250, 250, 250, 0.92);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

/* A title or finding that changes with the view keeps every version in one grid cell, so the box stays as tall as
   the longest one and the chart does not jump. Only the current version is visible (and read by screen readers). */
.pf-stack {
  display: grid;
}

.pf-stack > span {
  grid-area: 1 / 1;
  visibility: hidden;
}

.pf-stack > span.is-current {
  visibility: visible;
}

.pf-note {
  margin: 0.35rem 0 0;
  color: rgba(250, 250, 250, 0.86);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pf-plot {
  position: relative;
  width: 100%;
}

.pf-plot--hero {
  min-height: 360px;
}

.pf-plot--rings {
  min-height: 340px;
}

.pf-plot--fix {
  min-height: 400px;
}

.pf-failed .pf-plot::before {
  content: "The chart could not load. The caption below describes it.";
  display: block;
  padding: 2rem 0;
  color: var(--pf-soft);
  font-size: 0.9rem;
}

.pf-svg {
  display: block;
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-sans);
  touch-action: manipulation;
}

.pf-grid {
  stroke: rgba(250, 250, 250, 0.09);
  stroke-width: 1;
}

.pf-ring {
  fill: none;
  stroke: rgba(250, 250, 250, 0.1);
  stroke-dasharray: 2 4;
}

.pf-tick {
  fill: rgba(250, 250, 250, 0.48);
  font-size: 11px;
}

.pf-axis-title {
  fill: rgba(250, 250, 250, 0.62);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.pf-row-label {
  font-size: 12px;
  font-weight: 500;
}

.pf-row-label--small {
  font-size: 10.5px;
}

/* The population key: reference circles drawn like the dots' outlines, on a backing in the panel colour. */
.pf-key-bg {
  fill: var(--pf-panel);
}

.pf-size-ref {
  fill: rgba(250, 250, 250, 0.05);
  stroke: rgba(250, 250, 250, 0.55);
  stroke-width: 1;
}

.pf-size-lead {
  stroke: rgba(250, 250, 250, 0.3);
  stroke-width: 1;
}

.pf-dot {
  fill-opacity: 0.86;
  stroke: rgba(8, 8, 8, 0.75);
  stroke-width: 0.75;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.pf-deco {
  opacity: 0;
  transition: opacity 500ms ease;
}

.pf-deco.pf-in {
  opacity: 1;
}

.pf-deco.pf-out {
  opacity: 0;
  transition-duration: 250ms;
}

.pf-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  max-width: 240px;
  padding: 0.6rem 0.75rem;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: rgba(250, 250, 250, 0.8);
  font-size: 0.8rem;
  line-height: 1.45;
}

.pf-tip strong {
  display: block;
  margin-bottom: 0.15rem;
  color: #fafafa;
  font-size: 0.88rem;
}

.pf-tip span {
  display: block;
}

/* Buttons. */
.pf-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pf-toggle,
.pf-play,
.pf-prev,
.pf-next {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: rgba(250, 250, 250, 0.84);
  font: 500 0.85rem/1 var(--font-sans);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.pf-toggle:hover,
.pf-play:hover,
.pf-prev:hover:not(:disabled),
.pf-next:hover {
  border-color: rgba(250, 250, 250, 0.6);
  color: #fafafa;
}

.pf-toggle:focus-visible,
.pf-play:focus-visible,
.pf-prev:focus-visible,
.pf-next:focus-visible,
.pf-steps button:focus-visible {
  outline: 2px solid var(--pf-sky);
  outline-offset: 2px;
}

.pf-toggle[aria-pressed="true"],
.pf-next {
  background: #fafafa;
  border-color: #fafafa;
  color: #080808;
}

.pf-next:hover {
  background: rgba(250, 250, 250, 0.86);
  color: #080808;
}

.pf-prev:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Counts in the hero. */
.pf-count {
  fill: rgba(250, 250, 250, 0.13);
  font-family: var(--font-display);
}

.pf-count-label {
  fill: rgba(250, 250, 250, 0.32);
  font-size: 11px;
}

.pf-count-inline {
  fill: rgba(250, 250, 250, 0.4);
  font-weight: 400;
}

/* Tree rings. */
.pf-canvas {
  display: block;
  max-width: 100%;
}

.pf-canvas--overlay {
  position: absolute;
  left: 0;
  top: 0;
  cursor: crosshair;
  touch-action: manipulation;
}

.pf-play {
  justify-content: center;
}

.pf-key {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  color: var(--pf-soft);
  font-size: 0.8rem;
}

.pf-key-bar {
  width: clamp(7rem, 22vw, 14rem);
  height: 0.6rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #1b0b06, #e8e3dc);
}

.pf-title-key {
  font-weight: 600;
}

/* Bad chart to good chart. */
.pf-fix-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.pf-chart-title {
  min-height: 1.6rem;
  margin: 0 0 0.3rem;
  color: #fafafa;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
}

.pf-chart-title.is-bad {
  color: #ffd60a;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.pf-chart-sub {
  margin: 0 0 0.6rem;
  color: var(--pf-soft);
  font-size: 0.85rem;
}

.pf-bad-grid {
  stroke: rgba(250, 250, 250, 0.32);
  stroke-dasharray: 4 3;
}

.pf-bad-axis {
  stroke: rgba(250, 250, 250, 0.75);
  stroke-width: 2;
}

.pf-legend-box {
  fill: rgba(250, 250, 250, 0.04);
  stroke: rgba(250, 250, 250, 0.4);
}

.pf-legend-text {
  fill: rgba(250, 250, 250, 0.78);
  font-size: 11px;
}

.pf-fix-label {
  fill: rgba(250, 250, 250, 0.82);
  font-size: 12px;
}

.pf-fix-value {
  fill: rgba(250, 250, 250, 0.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pf-fix-value.is-focus {
  fill: #fafafa;
  font-weight: 600;
}

.pf-fix-status {
  margin-left: auto;
  color: var(--pf-soft);
  font-size: 0.85rem;
}

.pf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-steps li {
  margin: 0;
}

.pf-steps button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0 0.75rem 1rem;
  border: 0;
  border-left: 2px solid var(--border);
  background: none;
  color: var(--pf-soft);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.pf-steps button:hover {
  color: rgba(250, 250, 250, 0.85);
}

.pf-step-name {
  display: block;
  margin-bottom: 0.2rem;
  color: rgba(250, 250, 250, 0.85);
  font-weight: 600;
}

.pf-steps li.is-done .pf-step-name::after {
  content: " ✓";
  color: var(--pf-sky);
}

.pf-steps li.is-active button {
  border-left-color: var(--pf-accent);
  color: rgba(250, 250, 250, 0.92);
}

.pf-steps li.is-active .pf-step-name {
  color: #fafafa;
}

@media (max-width: 860px) {
  .pf-fix-layout {
    grid-template-columns: 1fr;
  }

  .pf-ready .pf-steps li:not(.is-active) .pf-step-text {
    display: none;
  }

  .pf-ready .pf-steps button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 560px) {
  .article-portfolio .article-body > p,
  .article-portfolio .article-body > ul > li,
  .article-portfolio .article-body > ol > li {
    font-size: 1.05rem;
  }

  .pf-figure {
    border-radius: 6px;
  }

  .pf-fix-status {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-deco,
  .pf-dot {
    transition: none;
  }
}