/* =============================================================
   FULL PAGES — work.html, edits.html and experience.html: the
   complete lists behind the homepage highlights. Plain reading
   pages: no motion, same tokens and fonts as the portfolio. The
   markup comes from data/*.json via scripts/initial-html.mjs.
   ============================================================= */

.full-page main {
  width: min(var(--page), 72rem);
  margin-inline: auto;
  padding-block: calc(var(--s-7) + var(--safe-top)) calc(var(--s-9) + var(--safe-bottom));
}

.full-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* Same mute button as the homepage nav (js/sound.js). */
.sound-toggle {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--text-mid);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  color: var(--text);
  background: rgb(255 255 255 / 0.06);
}

.sound-toggle .sound-icon {
  width: 18px;
  height: 18px;
}

.sound-toggle[aria-pressed="true"] .sound-off,
.sound-toggle[aria-pressed="false"] .sound-on {
  display: none;
}

.full-page-back,
.wp-visit {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-mid);
  transition: color var(--dur-1) var(--ease-out);
}

.full-page-back:hover,
.full-page-back:focus-visible,
.wp-visit:hover,
.wp-visit:focus-visible {
  color: var(--accent);
}

.wp-head {
  margin-block: var(--s-7) var(--s-8);
}

.wp-head h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
}

.wp-head p {
  max-width: var(--measure);
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  color: var(--text-mid);
}

/* Section label: small mono caps with the count beside it. */
.wp-heading {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mid);
}

.wp-heading span {
  color: var(--accent);
}

/* One project per row: screenshot left, story right. */
.wp-project {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: start;
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--line);
}

.wp-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-850);
}

.wp-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-3, .6s) var(--ease-out);
}

.wp-shot:hover img {
  transform: scale(1.02);
}

.wp-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.wp-status {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent);
}

.wp-summary {
  margin-top: var(--s-4);
  max-width: var(--measure);
  color: var(--text-mid);
  line-height: var(--leading-body);
}

/* Same three labelled rows as the homepage's "Behind the build", open. */
.wp-case {
  margin-top: var(--s-5);
}

.wp-case > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-4);
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid var(--line);
}

.wp-case dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.wp-case dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-mid);
}

.wp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-mid);
}

.wp-body > .wp-visit {
  margin-top: var(--s-4);
  padding: 0 var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--text);
}

/* The notes and stack stay folded until asked for. */
.wp-more {
  margin-top: var(--s-3);
}

.wp-more summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color var(--dur-1) var(--ease-out);
}

.wp-more summary::-webkit-details-marker {
  display: none;
}

.wp-more summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font: 400 16px/1 var(--font-body);
  color: var(--accent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.wp-more summary:hover,
.wp-more[open] summary {
  color: var(--text);
}

.wp-more[open] summary::before {
  transform: rotate(45deg);
}

.wp-more .wp-case {
  margin-top: var(--s-3);
}

/* Systems without a public link: a quiet three-column list. */
.wp-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
}

.wp-archive h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.wp-archive p {
  margin-block: var(--s-2) var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-mid);
}

section + section {
  margin-top: var(--s-9);
}

.full-page-cta {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-lead);
  color: var(--text-mid);
}

.full-page-cta a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Edits page ------------------------------------------------ */

/* Client numbers: big figure over a small label, on one hairline. */
.ep-delivery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-8);
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}

.ep-delivery > div {
  display: flex;
  flex-direction: column;
}

/* The figure reads first; the label (dt) stays first in the markup. */
.ep-delivery dd {
  order: -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
}

.ep-delivery dt {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--text-mid);
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--s-7) var(--s-5);
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
}

.ep-card a {
  display: block;
}

.ep-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 10;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-850);
}

.ep-grid--square .ep-media {
  aspect-ratio: 1;
}

.ep-media img,
.ep-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3, .6s) var(--ease-out);
}

.ep-card a:hover img {
  transform: scale(1.03);
}

.ep-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(10 10 10 / 0.78);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  pointer-events: none;
}

.ep-title {
  display: block;
  margin-top: var(--s-3);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.ep-meta {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-mid);
  transition: color var(--dur-1) var(--ease-out);
}

.ep-card a:hover .ep-meta,
.ep-card a:focus-visible .ep-meta {
  color: var(--accent);
}

/* ---- Experience page ------------------------------------------- */

.xp-list {
  list-style: none;
  padding: 0;
}

/* Period on the left, the role on the right, one hairline per row. */
.xp-row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.xp-period {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-mid);
}

.xp-row h3,
.xp-certs h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.xp-org {
  margin-top: var(--s-1);
  color: var(--accent);
  font-size: var(--fs-small);
}

.xp-summary {
  max-width: var(--measure);
  margin-top: var(--s-3);
  color: var(--text-mid);
  line-height: var(--leading-body);
}

.xp-notes {
  margin-top: var(--s-3);
  padding-left: 1.1em;
  color: var(--text-mid);
  line-height: var(--leading-body);
}

.xp-certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
  list-style: none;
  padding: 0;
}

.xp-certs li {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.xp-certs p {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-mid);
}

@media (max-width: 767px) {
  .wp-project {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-7);
  }

  .wp-case > div,
  .xp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }

  /* Work page on phones: everything on the centre line. */
  .wp-head,
  .wp-body,
  .wp-archive li,
  .xp-row,
  .xp-certs li {
    text-align: center;
  }

  .wp-head p,
  .wp-summary,
  .xp-summary {
    margin-inline: auto;
  }

  .xp-notes { padding-left: 0; }

  .wp-heading {
    justify-content: center;
  }

  .wp-tags {
    justify-content: center;
  }

  main:has(.wp-head) .full-page-cta {
    text-align: center;
  }

  .ep-delivery {
    gap: var(--s-3);
  }

  .ep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-shot img,
  .ep-media img {
    transition: none;
  }
}