/* ==========================================================================
   CPG.GE — PROJECT PAGE
   --------------------------------------------------------------------------
   Built to the supplied reference, at its own measurements (1440): a text
   masthead on a 1170px column — the sector at 15px, the name at 45/51.75,
   the standfirst at 17/25.84 — with a 330px record of four facts beside it;
   a centred slider of 927x445 frames 59px apart, the neighbours showing at
   the edges, three dots under it; then a 1140px row of the story (40/44.4
   heading, 14/22 text, a bare link) beside four 70px rows that open; and a
   ruled strip with the previous and next project.

   Loaded on the project page only, after holding.css.
   ========================================================================== */

.cpg-project { background: var(--cpg-white); color: var(--cpg-ink); }
.cpg-project__container { width: min(100%, 1170px); margin-inline: auto; padding-inline: 10px; }
.cpg-project__container--story { width: min(100%, 1140px); }
.cpg-project__container--nav { width: min(100%, 1120px); padding-inline: 0; }

/* --- the masthead ----------------------------------------------------------- */
.cpg-project__head {
  display: grid;
  gap: 2rem;
  padding-block-start: 70px;
}
.cpg-project__sector {
  margin: 0 0 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--cpg-text-muted);
}
.cpg-project__title {
  margin: 0 0 13.5px;
  font-size: 2.8125rem;
  font-weight: var(--cpg-display-weight);
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--cpg-ink);
}
.cpg-project__lead {
  margin: 0 0 34px;
  max-width: 676px;
  font-size: 1.0625rem;
  line-height: 1.52;
  color: var(--cpg-ink);
}

/* Four facts in two columns of 165px, label over value, the share row last. */
.cpg-project__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 165px));
  gap: 14px 0;
  margin: 0;
  padding-block-start: 55px;
  font-size: var(--cpg-text-sm);
  line-height: 1.65;
}
.cpg-project__meta > div { display: grid; align-content: start; gap: 0; }
.cpg-project__meta dt { margin: 0; color: var(--cpg-text-muted); }
.cpg-project__meta dd { margin: 0; color: var(--cpg-ink); }
.cpg-project__share { display: flex; gap: 18px; margin: 5px 0 0; padding: 0; list-style: none; }
/* The glyph is 15px; the thing under the thumb is 44px. */
.cpg-project__share a {
  display: grid;
  place-items: center;
  width: 15px;
  height: 18px;
  padding: 13px 14.5px;
  box-sizing: content-box;
  margin: -13px -14.5px;
  color: var(--cpg-ink);
  transition: color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-project__share a:hover { color: var(--cpg-gold-ink); }
.cpg-project__share svg { width: 15px; height: 15px; fill: currentColor; }

/* --- the slider ------------------------------------------------------------- */
.cpg-project__slider { padding-block: 50px; }
.cpg-project .cpg-project__track {
  --cpg-project-frame: min(927px, 64.4vw);
  --cpg-project-gap: 59px;
  display: flex;
  gap: var(--cpg-project-gap);
  margin: 0;
  padding: 10px 0;
  /* The frame in hand is centred, so the neighbours show at both edges. */
  padding-inline: calc((100% - var(--cpg-project-frame)) / 2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.cpg-project__track::-webkit-scrollbar { display: none; }
.cpg-project__track:focus-visible { outline: 2px solid var(--cpg-ink); outline-offset: -4px; }
.cpg-project__frame {
  flex: 0 0 var(--cpg-project-frame);
  aspect-ratio: 927 / 445;
  scroll-snap-align: center;
  overflow: hidden;
  background: var(--cpg-surface-media);
}
.cpg-project__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Three marks under the slider: a short bar for the frame in hand, dots for
   the rest. */
.cpg-project__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.cpg-project__dots[hidden] { display: none; }
/* The mark is a 4px dot; the button around it is 44px, drawn through a
   pseudo-element so the thumb has something to land on. */
.cpg-project__dot {
  position: relative;
  display: block;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cpg-project__dot::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--cpg-ink);
  opacity: 0.25;
  transform: translate(-50%, -50%);
  transition: width 250ms var(--cpg-ease), opacity 250ms var(--cpg-ease);
}
.cpg-project__dot[aria-current="true"] { width: 32px; }
.cpg-project__dot[aria-current="true"]::before { width: 16px; opacity: 1; }
.cpg-project__dot:focus-visible { outline: 2px solid var(--cpg-ink); outline-offset: 4px; }

/* --- the story, beside the record that opens -------------------------------- */
.cpg-project__story { padding-block: 40px 50px; }
.cpg-project__story-grid { display: grid; gap: 2rem; }
.cpg-project__story-col { padding: 10px; }
.cpg-project__story-heading {
  margin: 0 0 20px;
  font-size: 2.5rem;
  font-weight: var(--cpg-display-weight);
  line-height: 1.11;
  color: var(--cpg-ink);
}
.cpg-project__story-text { margin: 0; font-size: var(--cpg-text-sm); line-height: 1.57; color: var(--cpg-text-subtle); }
.cpg-project__story-text + .cpg-project__story-text { margin-block-start: 1em; }
.cpg-project__story-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 22px;
  font-size: 0.9375rem;
  line-height: 1.47;
  color: var(--cpg-ink);
  text-decoration: none;
}
.cpg-project__story-link svg { width: 20px; height: 10px; transition: transform var(--cpg-duration-fast) var(--cpg-ease); }
.cpg-project__story-link:hover svg { transform: translateX(4px); }
.cpg-project__story-link:hover { color: var(--cpg-gold-ink); }

/* Each row is 70px closed, a 22/33 title with a "+" at its right edge, and a
   hairline under it; open, the mark turns into a "×" and the value follows. */
.cpg-project__facts { margin: 0; padding: 0; }
.cpg-project__fact { border-bottom: 1px solid var(--cpg-rule); }
.cpg-project__fact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding: 0;
  font-size: 1.375rem;
  font-weight: var(--cpg-display-weight);
  line-height: 1.5;
  color: var(--cpg-ink);
  list-style: none;
  cursor: pointer;
}
.cpg-project__fact summary::-webkit-details-marker { display: none; }
.cpg-project__fact summary::after {
  content: "+";
  flex: none;
  width: 22px;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--cpg-ink);
  transition: transform 250ms var(--cpg-ease);
}
.cpg-project__fact[open] summary::after { transform: rotate(45deg); }
.cpg-project__fact summary:focus-visible { outline: 2px solid var(--cpg-ink); outline-offset: 2px; }
.cpg-project__fact-body { margin: 0; padding: 0 0 22px; font-size: var(--cpg-text-sm); line-height: 1.57; color: var(--cpg-text-subtle); }
.cpg-project__fact-body a { color: inherit; }

/* --- the strip with the neighbours ----------------------------------------- */
.cpg-project__nav { padding-block: 50px; }
.cpg-project__nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 21px 20px;
  border-top: 1px solid var(--cpg-rule);
}
.cpg-project__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--cpg-ink);
  text-decoration: none;
}
.cpg-project__nav-link--next { justify-self: end; flex-direction: row-reverse; text-align: end; }
.cpg-project__nav-link svg { width: 6px; height: 14px; flex: none; }
.cpg-project__nav-link span { display: block; font-size: var(--cpg-text-sm); line-height: 1.5; }
/* The reference fades this word to 30%, which leaves it under 2:1 on white;
   the muted ink reads the same and clears the mark. */
.cpg-project__nav-link small { display: block; font-size: 0.8203rem; line-height: 1.6; color: var(--cpg-text-muted); }
.cpg-project__nav-link { min-height: 44px; }
.cpg-project__nav-link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.cpg-project__nav-all { display: grid; place-items: center; width: 44px; height: 44px; color: var(--cpg-ink); }
.cpg-project__nav-all svg { width: 15px; height: 15px; fill: currentColor; }
.cpg-project__nav-all:hover { color: var(--cpg-gold-ink); }

@media (min-width: 64rem) {
  .cpg-project__head { grid-template-columns: minmax(0, 676px) 330px; justify-content: space-between; gap: 2rem 3rem; }
  .cpg-project__story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cpg-project__story-col--lead { padding-inline-end: 57px; }
}

@media (max-width: 63.999rem) {
  /* The reference's 10px column padding is a desktop measure; on a phone the
     page keeps its own gutter, and the record's two columns share the width. */
  .cpg-project__container { padding-inline: var(--cpg-gutter); }
  .cpg-project__container--nav { padding-inline: var(--cpg-gutter); }
  .cpg-project__head { padding-block-start: 48px; }
  .cpg-project__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpg-project__meta { padding-block-start: 0; }
  .cpg-project .cpg-project__track { --cpg-project-frame: 86vw; --cpg-project-gap: 16px; }
  .cpg-project__title { font-size: 2.125rem; }
  .cpg-project__story-heading { font-size: 2rem; }
  .cpg-project__nav-row { grid-template-columns: 1fr auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cpg-project__track { scroll-behavior: auto; }
  .cpg-project__dot, .cpg-project__fact summary::after, .cpg-project__story-link svg { transition: none; }
}