/* =============================================================
   STORY SECTIONS — about, numbers, experience tracks.
   Hairlines and negative space instead of boxed cards.
   ============================================================= */

/* ---- About ----------------------------------------------------
   Heading and one short paragraph. On wide screens the section
   fills the viewport and holds there (pinned by js/motion.js) while
   the words sharpen in from a blur, one by one.
---------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
}

.about > .section-head {
  align-self: start;
}

.about-text {
  max-width: 26em;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* Inline-block so each word can move and blur on its own. */
.about-word {
  display: inline-block;
}

.about-word.is-accent {
  color: var(--accent);
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* A full screen to hold on while pinned, content centred in it. */
  .section-about {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .about {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--s-6);
  }

  .about > .section-head {
    margin-bottom: 0;
  }
}

/* ---- Numbers ------------------------------------------------------
   One card per stat: the figure centred and large, a short label, a
   one-line detail, a small line icon in the top-right corner and a
   faint grid texture behind. One column on phones, 2x2 on tablets,
   four across from 1024px.
---------------------------------------------------------------- */

.numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 768px) {
  .numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .numbers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.number {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  overflow: hidden;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--s-5);
  border: 1px solid var(--line);
  background: var(--ink-850);
  text-align: center;
}

/* The texture: a 24px grid that fades out from the centre. */
.number::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-position: center;
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
  opacity: 0.7;
  pointer-events: none;
  content: "";
}

.number > * {
  position: relative;
}

.number-icon {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  opacity: 0.8;
}

.number-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
  /* Tabular digits keep the layout still while the value counts up. */
  font-variant-numeric: tabular-nums;
}

.number-suffix {
  color: var(--accent);
}

.number-label {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.number-detail {
  max-width: 28ch;
  margin: 0;
  color: var(--text-mid);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* ---- Experience tracks -----------------------------------------
   Each role is a row on one shared 2022 -> 2026 axis, so the bars
   read as clips on a timeline rather than as a list.
---------------------------------------------------------------- */

.track-axis {
  display: none;
  margin-bottom: var(--s-3);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
}

.track-axis-ticks {
  position: relative;
  height: 1rem;
}

.track-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.tracks {
  border-top: 1px solid var(--line);
}

.track {
  border-bottom: 1px solid var(--line);
}

.track-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-block: var(--s-5);
  color: inherit;
  transition: background var(--dur-1) var(--ease-out);
}

.track-period {
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.track-role {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--track-display);
}

.track-org {
  margin: 0;
  color: var(--text-mid);
  font-size: var(--fs-body);
}

/* The clip bar: a thin segment positioned on the shared axis. */
.track-clip {
  position: relative;
  height: 3px;
  margin-top: var(--s-3);
  background: var(--line);
}

.track-clip-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  opacity: 0.55;
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: opacity var(--dur-1) var(--ease-out);
}

.track-summary {
  margin: 0;
  max-width: 62ch;
  color: var(--text-mid);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.track-link {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.track-link::after {
  content: "↗";
}

/* Scaffolding, and it should look like it. */
.track-todo {
  margin: var(--s-3) 0 0;
  max-width: 62ch;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---- Phones + small tablets: hairline rows (below 860px) --------
   Year on the left, role and organisation stacked on the right, the
   summary under them. The timeline bar needs the shared axis to
   mean anything, so it only appears on the wide layout.
---------------------------------------------------------------- */

.track-years {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.track-years span:first-child {
  color: var(--text);
}

@media (max-width: 859px) {
  .track-row {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: var(--s-2);
    align-items: start;
  }

  .track-years {
    grid-row: 1 / span 2;
    padding-top: 0.45em;
  }

  .track-period {
    display: none;
  }

  .track-identity,
  .track-media {
    grid-column: 2;
  }

  .track-clip {
    display: none;
  }
}

@media (min-width: 860px) {
  .track-years {
    display: none;
  }
}

/* ---- Wide layout: real timeline tracks ------------------------- */

@media (min-width: 860px) {
  /* The axis and every row share one column template, so the ticks
     line up with the clip column by construction rather than by a
     calc() that has to be kept in sync by hand. */
  .track-axis,
  .track-row {
    display: grid;
    grid-template-columns: 10rem minmax(14rem, 22rem) 1fr;
    gap: var(--s-6);
  }

  .track-axis {
    align-items: end;
  }

  .track-axis-ticks {
    grid-column: 3;
  }

  .track-row {
    align-items: start;
    padding-block: var(--s-5);
  }

  .track-identity {
    grid-column: 2;
  }

  .track-period {
    grid-column: 1;
    padding-top: 0.2em;
  }

  .track-media {
    grid-column: 3;
  }

  .track-clip {
    margin-top: 0.55em;
  }

  /* On pointer devices the detail is a hover reward. Touch and
     keyboard users get it permanently, below. */
  .track-detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur-2) var(--ease-out),
      opacity var(--dur-2) var(--ease-out);
  }

  .track-detail > div {
    overflow: hidden;
  }
}

@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .track-row:hover .track-detail,
  .track-row:focus-visible .track-detail,
  .track-row:focus-within .track-detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .track-row:hover .track-clip-bar,
  .track-row:focus-visible .track-clip-bar,
  .track-row:focus-within .track-clip-bar {
    opacity: 1;
  }
}

/* Anything without a fine pointer keeps the detail open: a hover
   reward nobody can trigger is just hidden content. */
@media (min-width: 860px) and not all and (hover: hover) and (pointer: fine) {
  .track-detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* ---- Armed states for the scroll-in animations ----------------- */

html.motion-ready .track-clip-bar {
  transform: scaleX(0);
}

html.motion-ready .number-figure,
html.motion-ready .track-row {
  will-change: transform;
}