/* jjscoolwebsite.com — about page only.
   Same raised-panel grammar as the top bar and the socials plaques, laid out
   as a CV rather than a corkboard: one column of panels instead of a grid. */

.about {
  padding-block: 2.5rem 3rem;
}

.about__title {
  margin: 0;
  font-size: clamp(1.4rem, 5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.about__sub {
  margin: 0.75rem auto 0;
  max-width: 52ch;
  color: var(--yellow-dark);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  text-align: center;
}

.about__intro {
  max-width: 65ch;
  margin: 2rem auto 0;
  line-height: 1.6;
}

.about__heading {
  margin: 2.5rem 0 1rem;
  padding: 0.2rem 0.6rem;
  display: inline-block;
  background: var(--yellow);
  color: var(--bg);
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- jobs -----------------------------------------------------------------
   Each role is a raised panel, same material as the socials plaques and the
   top bar, just stretched full-width instead of gridded into cards. */
.about__jobs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.job {
  background: var(--face);
  box-shadow: var(--raised);
  padding: calc(1rem + var(--bevel));
}

.job__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  margin-bottom: 0.75rem;
}

.job__role {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 700;
  text-shadow: 2px 2px 0 var(--dim);
}

.job__meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.job__list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.6;
}

.job__list li + li {
  margin-top: 0.5rem;
}

/* --- skill chips ------------------------------------------------------- */
.about__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Same coloured-chip rule as the ticker's LIVE label: a chip brings its own
   lit/dim pair rather than borrowing the bar's purple ones. */
.chip {
  --lit: #fffbb4;
  --dim: #8a6d0f;
  background: var(--yellow);
  box-shadow: var(--raised);
  color: var(--bg);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* --- pointer to the projects page --------------------------------------- */
.about__aside {
  max-width: 65ch;
  margin: 2rem 0 0;
  line-height: 1.6;
  color: var(--muted);
}

.about__aside a {
  color: var(--yellow);
  text-underline-offset: 4px;
}

.about__misc {
  max-width: 65ch;
  margin: 0;
  line-height: 1.6;
}

.about__sign {
  margin: 2.5rem 0 0;
  color: var(--green);
  text-align: center;
}

.about__badge {
  display: block;
  margin: 1.5rem auto 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.about__sign--name {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--yellow);
}