/* ==========================================================================
   Portfolio page: sidebar + project detail template.
   Loaded after style.css and built on its tokens (--u, fonts, colours, nav).
   Desktop layout, reference width 1440px (references/portfolio-page.png,
   references/project-detail.png).
   ========================================================================== */

:root {
  /* Colours */
  --pf-bg: var(--bg-experience);
  --pf-ink: #2c2c2c;             /* text and filled pill, from the reference */
  --pf-placeholder: #d9d9d9;     /* image blocks without a file yet */
  --pf-sidebar-text: var(--bg-experience);
  --pf-arrow: #000;
  --pf-rule: 1px;                /* hairlines: rules and connectors */

  /* Sidebar */
  --pf-sidebar-w: calc(300 * var(--u));
  --pf-sidebar-pad: calc(36 * var(--u));
  --pf-sidebar-pad-right: calc(24 * var(--u));
  --pf-sidebar-top: calc(87 * var(--u));
  --pf-filter-size: calc(16 * var(--u));
  --pf-filter-line: calc(36 * var(--u));
  --pf-filter-gap: calc(14 * var(--u));     /* between two filters on a row */
  --pf-radio: calc(16 * var(--u));
  --pf-list-top: calc(72 * var(--u));       /* filters -> project list */
  --pf-list-gap: calc(24 * var(--u));       /* between projects */
  --pf-list-year: calc(20 * var(--u));
  --pf-list-name: calc(20 * var(--u));
  --pf-list-fade: calc(56 * var(--u));      /* soft edge while the list can scroll */
  --pf-list-bottom: calc(72 * var(--u));    /* clear space: project list (and its fade) -> nav */

  /* Project area */
  --pf-pad-top: calc(69 * var(--u));
  --pf-pad-left: calc(64 * var(--u));
  --pf-pad-right: calc(80 * var(--u));
  --pf-pad-bottom: calc(96 * var(--u));
  --pf-swap-duration: 220ms;     /* fade when another project is selected */

  /* Type */
  --pf-title-size: calc(48 * var(--u));     /* project name, next project */
  --pf-year-size: calc(46 * var(--u));
  --pf-meta-size: calc(24 * var(--u));      /* snapshot, leadership lists */
  --pf-meta-line: calc(38 * var(--u));
  --pf-goal-size: calc(32 * var(--u));
  --pf-subtitle-size: calc(22 * var(--u));  /* optional line under the project name */
  --pf-quote-size: calc(22 * var(--u));     /* optional closing quote */
  --pf-body-size: var(--detail-body-size);
  --pf-body-line: var(--detail-body-line);
  --pf-caption-size: calc(13 * var(--u));

  /* Vertical rhythm between sections */
  --pf-gap-hero: calc(44 * var(--u));       /* title -> hero */
  --pf-gap-snapshot: calc(40 * var(--u));   /* hero -> snapshot */
  --pf-gap-logic: calc(79 * var(--u));
  --pf-gap-decisions: calc(110 * var(--u));
  --pf-gap-model: calc(110 * var(--u));     /* logic map -> model diagram */
  --pf-model-letter-size: calc(120 * var(--u)); /* the model's large letters */
  --pf-model-gap: calc(28 * var(--u));      /* title -> letters -> hierarchy */
  --pf-gap-system: calc(122 * var(--u));
  --pf-gap-outcome: calc(200 * var(--u));
  --pf-gap-people: calc(72 * var(--u));
  --pf-gap-next: calc(136 * var(--u));
  --pf-gap-subtitle: calc(14 * var(--u));   /* project name -> subtitle */
  --pf-gap-about: calc(28 * var(--u));      /* snapshot lines -> about paragraph */
  --pf-gap-live: calc(28 * var(--u));       /* snapshot -> live link */
  --pf-about-width: calc(820 * var(--u));   /* keeps the about paragraph readable */
  --pf-video-button: calc(32 * var(--u));   /* play button (reduced motion only) */
  --pf-gap-quote: calc(56 * var(--u));      /* closing quote -> next project */

  /* Logic Map */
  --lm-pill-w: calc(208 * var(--u));        /* minimum pill width */
  --lm-pill-h: calc(58 * var(--u));
  --lm-pill-pad: calc(28 * var(--u));
  --lm-link-w: calc(60 * var(--u));         /* connector between the columns */
  --lm-dot: calc(5 * var(--u));             /* dot where a connector arrives */
  --lm-text-gap: calc(44 * var(--u));       /* node pill -> bullets */
  --lm-size: calc(24 * var(--u));
  --lm-line: calc(34 * var(--u));
  --lm-row-gap: calc(17 * var(--u));        /* between branches of one step */
  --lm-step-gap: calc(28 * var(--u));       /* extra space between two steps */

  /* Gallery */
  --gallery-height: calc(428 * var(--u));
  --gallery-gap: calc(12 * var(--u));
  --gallery-arrow: calc(32 * var(--u));
  --gallery-arrow-inset: calc(16 * var(--u));

  /* Shared column grid: Outcome and Leadership / Collaboration.
     Equal columns across the content width; outcomes fill them in order and
     wrap to a new row, "Led" and "Worked with" take columns 1 and 2. */
  --pf-grid-columns: 3;
  --pf-grid-gap: calc(48 * var(--u));

  /* Outcome */
  --outcome-row-gap: calc(56 * var(--u));
  --outcome-value-size: calc(32 * var(--u));        /* the number */
  --outcome-label-size: calc(16 * var(--u));        /* small text under the number */
  --outcome-label-line: calc(24 * var(--u));
  --outcome-label-width: 26ch;                      /* one measure for every label and statement (at the label size) */
  --outcome-value-optical: -0.03em;                  /* nudges the italic value left to line up with the label */
  --outcome-statement-size: calc(22 * var(--u));    /* qualitative outcome */

  /* Next project */
  /* Lightbox */
  --lightbox-opacity: 95%;                  /* dark ink over the page */
  --lightbox-pad-x: calc(140 * var(--u));   /* room for Prev / Next at the sides */
  --lightbox-pad-y: calc(72 * var(--u));    /* room for Close above */
  --lightbox-control-size: calc(18 * var(--u));
  --lightbox-caption-gap: calc(14 * var(--u));
  --lightbox-fade: 200ms;

  --next-preview-w: calc(240 * var(--u));   /* Next project preview: fixed landscape frame */
  --next-preview-h: calc(112.5 * var(--u)); /* (the Skin Glow hero's 1920 x 900 proportions) */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Page layout ---------- */

.pf {
  display: grid;
  grid-template-columns: var(--pf-sidebar-w) minmax(0, 1fr);
  height: 100vh;
  color: var(--pf-ink);
}

.pf h1,
.pf h2,
.pf h3,
.pf dl,
.pf dd,
.pf figure {
  margin: 0;
}

.pf ol,
.pf ul {
  list-style: none;
}

/* ---------- Sidebar ---------- */

.pf-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--pf-sidebar-top) var(--pf-sidebar-pad-right) var(--nav-bottom) var(--pf-sidebar-pad);
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-landing-top) 0%, var(--bg-landing-bottom) 100%);
  color: var(--pf-sidebar-text);
}

/* Filters: checkboxes (multiple selection) drawn as round buttons */
.pf-filters {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--pf-filter-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--pf-filter-size);
  line-height: var(--pf-filter-line);
}

.pf-filter {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
  cursor: pointer;
}

.pf-filter__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--pf-radio);
  height: var(--pf-radio);
  margin: 0;
  border: max(1px, calc(1.25 * var(--u))) solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.pf-filter__input:checked {
  background: radial-gradient(circle closest-side, currentColor 60%, transparent 66%);
}

.pf-filter__input:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.pf-filter:hover .pf-filter__label {
  opacity: 0.6;
}

/* Project list: the only part of the sidebar that scrolls. The filters stay
   at the top and the nav at the bottom. */
@property --pf-fade-above {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --pf-fade-below {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.pf-list {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--pf-list-top);
  margin-right: calc(var(--pf-sidebar-pad-right) * -1);
  margin-bottom: var(--pf-list-bottom);
  padding-right: var(--pf-sidebar-pad-right);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Soft edges: the list dissolves into the sidebar blue (and its grain)
     where there is more to scroll. js/portfolio.js sets .has-more-above /
     .has-more-below; without them the edge is crisp. */
  --pf-fade-above: 0px;
  --pf-fade-below: 0px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--pf-fade-above),
    #000 calc(100% - var(--pf-fade-below)), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--pf-fade-above),
    #000 calc(100% - var(--pf-fade-below)), transparent 100%);
  transition: --pf-fade-above 0.25s var(--ease), --pf-fade-below 0.25s var(--ease);
}

.pf-list::-webkit-scrollbar {
  display: none;
}

.pf-list.has-more-above {
  --pf-fade-above: var(--pf-list-fade);
}

.pf-list.has-more-below {
  --pf-fade-below: var(--pf-list-fade);
}

.pf-list__item + .pf-list__item {
  margin-top: var(--pf-list-gap);
}

.pf-list__link {
  display: inline-block;
  transition: opacity 0.2s var(--ease);
}

.pf-list__link:hover {
  opacity: 0.6;
}

.pf-list__year {
  display: block;
  font-family: var(--font-display);
  font-size: var(--pf-list-year);
  line-height: 1;
}

.pf-list__name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--pf-list-name);
  line-height: 1.2;
}

/* selected project */
.pf-list__link[aria-current] .pf-list__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.pf-list__empty {
  font-family: var(--font-mono);
  font-size: var(--pf-filter-size);
  line-height: 1.5;
}

/* Main navigation: same as the other pages, kept in the sidebar's flow so
   the project list can never run underneath it */
.pf-sidebar .side-nav {
  position: relative;
  left: auto;
  bottom: auto;
  flex: none;
}

/* ---------- Project area ---------- */

.pf-main {
  height: 100vh;
  padding: var(--pf-pad-top) var(--pf-pad-right) var(--pf-pad-bottom) var(--pf-pad-left);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--pf-bg);
  outline: none;
}

.pf-noscript {
  font-family: var(--font-mono);
  font-size: var(--pf-meta-size);
}

.project {
  transition: opacity var(--pf-swap-duration) var(--ease);
}

.project.is-swapping {
  opacity: 0;
}

/* ---------- 01 Hero ---------- */

.project__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(40 * var(--u));
}

.project__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: var(--pf-title-size);
  line-height: 1;
  outline: none;
}

.project__year {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--pf-year-size);
  line-height: 1;
}

/* optional subtitle: one line under the name */
.project__subtitle {
  margin-top: var(--pf-gap-subtitle);
  font-family: var(--font-body);
  font-size: var(--pf-subtitle-size);
  line-height: 1.3;
}

.project__hero-media {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--pf-gap-hero);
}

.pf-placeholder {
  background: var(--pf-placeholder);
}

/* ---------- 02 Snapshot ---------- */

.project__snapshot {
  margin-top: var(--pf-gap-snapshot);
}

.snapshot {
  font-family: var(--font-mono);
  font-size: var(--pf-meta-size);
  line-height: var(--pf-meta-line);
}

.snapshot__row {
  display: flex;
}

.snapshot dt {
  flex: none;
}

.snapshot dt::after {
  content: " : ";
  white-space: pre;
}

/* optional paragraph under the snapshot, in the body text style */
.project__about {
  max-width: var(--pf-about-width);
  font-family: var(--font-body);
  font-size: var(--pf-body-size);
  line-height: var(--pf-body-line);
}

.snapshot + .project__about {
  margin-top: var(--pf-gap-about);
}

/* optional link to the live work: plain text link in the nav style */
.project__live {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--pf-meta-size);
  line-height: var(--pf-meta-line);
  transition: opacity 0.2s var(--ease);
}

.snapshot + .project__live,
.project__about + .project__live {
  margin-top: var(--pf-gap-live);
}

.project__live-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.project__live-arrow {
  font-size: 0.8em;
}

.project__live:hover {
  opacity: 0.6;
}

/* ---------- 03 Logic Map ----------
   One grid for the whole map: step pill | connector | node pill | text.
   js/logic-map.js gives every piece its row; the connectors are stretched
   cells, so they follow the rows whatever the text length. */

.project__logic {
  margin-top: var(--pf-gap-logic);
}

.lm {
  display: grid;
  grid-template-columns:
    minmax(var(--lm-pill-w), max-content)
    var(--lm-link-w)
    minmax(var(--lm-pill-w), max-content)
    minmax(0, 1fr);
  margin-block: calc(var(--lm-row-gap) / -2);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--lm-size);
  line-height: var(--lm-line);
}

.lm__step,
.lm__branches,
.lm__branch {
  display: contents;
}

.lm__pill {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lm-pill-h);
  margin-block: calc(var(--lm-row-gap) / 2);
  padding: 0 var(--lm-pill-pad);
  border: var(--pf-rule) solid currentColor;
  border-radius: 999px;
  background: var(--pf-bg);
  white-space: nowrap;
}

.lm__pill--step {
  grid-column: 1;
}

.lm__pill--node {
  grid-column: 3;
}

/* the first step is the dark, filled pill */
.lm__pill--first {
  border-color: var(--pf-ink);
  background: var(--pf-ink);
  color: var(--pf-bg);
}

/* vertical line joining the steps (runs behind the step pills) */
.lm__rail {
  position: relative;
  grid-column: 1;
  justify-self: center;
  align-self: stretch;
  width: 0;
}

.lm__rail--gap {
  height: var(--lm-step-gap);
}

.lm__rail--up::before,
.lm__rail--down::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: var(--pf-rule) solid currentColor;
}

.lm__rail--up::before {
  top: 0;
  height: 50%;
}

.lm__rail--down::after {
  top: 50%;
  bottom: 0;
}

/* connector: step pill -> node or text. Horizontal line at the row's middle,
   a dot where it arrives, and a trunk along the left edge between branches. */
.lm__link {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  background:
    radial-gradient(circle closest-side, currentColor 92%, transparent)
    right center / var(--lm-dot) var(--lm-dot) no-repeat;
}

.lm__link::before,
.lm__link::after {
  content: "";
  position: absolute;
  left: 0;
  border: 0 solid currentColor;
}

.lm__link::before {
  top: 0;
  right: 0;
  height: calc(50% + var(--pf-rule) / 2);
  border-bottom-width: var(--pf-rule);
}

.lm__link::after {
  top: 50%;
  bottom: 0;
}

.lm__link--from-above::before,
.lm__link--to-below::after {
  border-left-width: var(--pf-rule);
}

/* bullets beside a node */
.lm__points {
  grid-column: 4;
  align-self: center;
  padding: calc(var(--lm-row-gap) / 2) 0 calc(var(--lm-row-gap) / 2) calc(var(--lm-text-gap) + 1em);
}

.pf .lm__points {
  list-style: disc;
}

/* bullets of a step itself, under its line of text */
.lm__points--step {
  grid-column: 3 / -1;
  align-self: start;
  padding-top: 0;
  padding-left: calc(20 * var(--u) + 1em);
}

/* one line beside a step */
.lm__text {
  grid-column: 3 / -1;
  align-self: center;
  padding: calc(var(--lm-row-gap) / 2) 0 calc(var(--lm-row-gap) / 2) calc(20 * var(--u));
  font-weight: 400;
}

/* ---------- Video (hero and gallery) ----------
   The box has the frame's proportions (hero) or the video's own (gallery).
   A vertical video in the hero frame is centred at full height; the sides are
   the dark ink colour unless the project sets hero.background in the data. */
.media-video {
  position: relative;
  overflow: hidden;
}

.media-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-video--contain {
  background-color: var(--pf-ink);
}

.media-video--contain video {
  object-fit: contain;
}

/* a vertical still image in the hero frame, laid out like a vertical video */
.media-frame {
  position: relative;
  overflow: hidden;
}

.media-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__media.media-video {
  width: auto;
}

/* reduced motion: the poster shows with a small play / pause button */
.media-video__play {
  position: absolute;
  right: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  width: var(--pf-video-button);
  height: var(--pf-video-button);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.media-video__play svg {
  display: block;
  width: 100%;
  height: 100%;
}

.media-video__play circle {
  fill: var(--pf-arrow);
}

.media-video__play path {
  fill: #fff;
}

.media-video__icon-pause,
.is-playing .media-video__icon-play {
  display: none;
}

.is-playing .media-video__icon-pause {
  display: inline;
}

/* ---------- Model (optional) ----------
   A typographic diagram: small title, the letters large in the display face
   with their words underneath (one row, same gap as the shared grid), and
   the hierarchy on one line under a hairline. No boxes or fills. */
.project__model {
  margin-top: var(--pf-gap-model);
}

.model__title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--pf-filter-size);
  line-height: 1.5;
}

.model__letters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--pf-grid-gap);
  margin-top: var(--pf-model-gap);
}

.model__item {
  display: flex;
  flex-direction: column;
}

.model__letter {
  font-family: var(--font-display);
  font-size: var(--pf-model-letter-size);
  line-height: 1;
  font-kerning: normal;
}

.model__word {
  margin-top: calc(12 * var(--u));
  font-family: var(--font-body);
  font-size: var(--pf-body-size);
  line-height: var(--pf-body-line);
}

.model__hierarchy {
  margin-top: var(--pf-model-gap);
  padding-top: calc(20 * var(--u));
  border-top: var(--pf-rule) solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--pf-meta-size);
  line-height: var(--pf-meta-line);
  white-space: nowrap;
}

/* ---------- 04 Key Decisions ---------- */

.project__decisions {
  margin-top: var(--pf-gap-decisions);
}

.decisions__item {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) minmax(0, 1.5fr);
  column-gap: calc(32 * var(--u));
  align-items: baseline;
  padding: calc(22 * var(--u)) 0;
  border-top: var(--pf-rule) solid currentColor;
}

.decisions__item:last-child {
  border-bottom: var(--pf-rule) solid currentColor;
}

.decisions__index {
  font-family: var(--font-mono);
  font-size: var(--pf-filter-size);
}

.decisions__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--pf-meta-size);
  line-height: 1.25;
}

.decisions__text {
  font-family: var(--font-body);
  font-size: var(--pf-body-size);
  line-height: var(--pf-body-line);
}

/* ---------- 05 System in Action ---------- */

.project__system {
  margin-top: var(--pf-gap-system);
}

.project__goal {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--pf-goal-size);
  line-height: 1.2;
}

.gallery {
  position: relative;
  margin-top: calc(35 * var(--u));
}

/* native horizontal scroll, running out to the right edge of the page */
.gallery__scroller {
  margin-right: calc(var(--pf-pad-right) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.gallery__scroller::-webkit-scrollbar {
  display: none;
}

.gallery__scroller:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.gallery__track {
  display: flex;
  gap: var(--gallery-gap);
  width: max-content;
  padding-right: var(--pf-pad-right);
}

/* looping gallery: the row repeats, so no end padding (js/portfolio.js) */
.gallery--loop .gallery__track {
  padding-right: 0;
}

.gallery__item {
  flex: none;
}

.gallery__item figure {
  display: flex;
  flex-direction: column;
}

/* every image has the same height; its width follows its own proportions */
.gallery__media {
  display: block;
  height: var(--gallery-height);
  width: auto;
}

.gallery__caption {
  /* never wider than its image */
  width: 0;
  min-width: 100%;
  margin-top: calc(11 * var(--u));
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--pf-caption-size);
  line-height: 1.35;
}

.gallery__arrow {
  position: absolute;
  top: calc(var(--gallery-height) / 2);
  z-index: 2;
  width: var(--gallery-arrow);
  height: var(--gallery-arrow);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}

.gallery__arrow--prev {
  left: var(--gallery-arrow-inset);
}

.gallery__arrow--next {
  right: var(--gallery-arrow-inset);
}

.gallery__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery__arrow circle {
  fill: var(--pf-arrow);
}

.gallery__arrow path {
  fill: #fff;
}

.gallery__arrow:hover {
  opacity: 0.7;
}

/* ---------- 06 Outcome ---------- */

.project__outcome {
  margin-top: var(--pf-gap-outcome);
}

/* the shared column grid; a fourth outcome starts a new row */
.outcomes {
  display: grid;
  grid-template-columns: repeat(var(--pf-grid-columns), minmax(0, 1fr));
  column-gap: var(--pf-grid-gap);
  row-gap: var(--outcome-row-gap);
  align-items: start;
  font-family: var(--font-body);
}

/* Every column wraps its text at the same measure: the item is set at the
   label size, so 26ch means the same width whatever the text inside. The
   value may run past that measure (it never wraps). */
.outcomes__item {
  max-width: var(--outcome-label-width);
  font-size: var(--outcome-label-size);
}

.outcomes__value {
  margin-left: var(--outcome-value-optical);
  font-weight: 700;
  font-style: italic;
  /* --outcome-fit is set by js/portfolio.js only when a value would not fit */
  font-size: calc(var(--outcome-value-size) * var(--outcome-fit, 1));
  line-height: 1.1;
  white-space: nowrap;
}

.outcomes__label {
  margin-top: calc(10 * var(--u));
  font-size: var(--outcome-label-size);
  line-height: var(--outcome-label-line);
  text-wrap: pretty;
}

/* qualitative outcome: no number, the statement in a medium italic */
.outcomes__statement {
  font-weight: 600;
  font-style: italic;
  font-size: var(--outcome-statement-size);
  line-height: 1.3;
  text-wrap: pretty;
}

/* outcomeValueWrap: a value too long for its column wraps at the same size */
.outcomes--wrap .outcomes__value {
  white-space: normal;
  text-wrap: balance;
}

/* one short line under the outcome grid, set like the outcome labels */
.outcomes__summary {
  font-family: var(--font-body);
  font-size: var(--outcome-label-size);
  line-height: var(--outcome-label-line);
}

.outcomes + .outcomes__summary {
  margin-top: var(--outcome-row-gap);
}

/* ---------- 07 Leadership and Collaboration ---------- */

.project__people {
  margin-top: var(--pf-gap-people);
}

/* same column grid as the outcomes: "Led" in column 1, "Worked with" in
   column 2, lined up with the outcome values above; column 3 stays empty.
   Text is set like the snapshot lines. */
.people {
  display: grid;
  grid-template-columns: repeat(var(--pf-grid-columns), minmax(0, 1fr));
  column-gap: var(--pf-grid-gap);
  font-family: var(--font-mono);
  font-size: var(--pf-meta-size);
  line-height: var(--pf-meta-line);
}

.people__label {
  font-size: inherit;
  font-weight: 700;
}

/* ---------- 08 Next Project ---------- */

/* optional closing quote: one quiet line just above Next Project; it takes
   the section gap, and Next Project follows it more closely */
.project__quote {
  margin: var(--pf-gap-next) 0 0; /* no default blockquote indent */
  padding: 0;
  text-align: left;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--pf-quote-size);
  line-height: 1.4;
}

.project__next {
  margin-top: var(--pf-gap-next);
}

.project__quote + .project__next {
  margin-top: var(--pf-gap-quote);
}

.next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding-top: calc(32 * var(--u));
  border-top: var(--pf-rule) solid currentColor;
}

.next__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--pf-filter-size);
  line-height: 1.5;
}

.next__name {
  display: block;
  margin-top: calc(12 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: var(--pf-title-size);
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s var(--ease);
}

.next:hover .next__name,
.next:focus-visible .next__name {
  text-decoration-color: currentColor;
}

.next__preview {
  flex: none;
  display: block;
  width: var(--next-preview-w);
  height: var(--next-preview-h);
  /* any hero shape fills the same frame: cropped from the centre, never stretched */
  object-fit: cover;
  object-position: center;
}

/* ---------- Lightbox ----------
   Full-screen view of the hero and gallery images (js/portfolio.js). Dark ink
   at --lightbox-opacity with the site grain behind; the image as large as the
   space allows; caption and text controls in the off-white. */
[data-lb] {
  cursor: zoom-in;
}

[data-lb]:focus-visible {
  outline: var(--pf-rule) solid currentColor;
  outline-offset: 4px;
}

.has-lightbox,
.has-lightbox .pf-main {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  color: var(--pf-bg);
  opacity: 0;
  transition: opacity var(--lightbox-fade) var(--ease);
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox[hidden] {
  display: none;
}

.lightbox:focus {
  outline: none;
}

/* the dark ink and its grain sit behind the image, never on it */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--pf-ink) var(--lightbox-opacity), transparent);
}

.lightbox__figure {
  position: absolute;
  margin: 0;
  inset: var(--lightbox-pad-y) var(--lightbox-pad-x);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox__stage {
  display: contents;
}

.lightbox__media {
  display: block;
  flex: none;
  max-width: 100%;
  background: transparent;
  cursor: default;
}

.lightbox__caption {
  flex: none;
  max-width: 100%;
  margin-top: var(--lightbox-caption-gap);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--pf-caption-size);
  line-height: 1.35;
}

.lightbox__control {
  position: absolute;
  z-index: 2;
  padding: calc(8 * var(--u));
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--lightbox-control-size);
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}

.lightbox__control:hover {
  opacity: 0.6;
}

.lightbox__control:focus-visible {
  outline: var(--pf-rule) solid currentColor;
  outline-offset: 2px;
}

.lightbox__close {
  top: calc(var(--lightbox-pad-y) / 2 - 0.5em - 8 * var(--u));
  right: calc(var(--lightbox-pad-y) / 2);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: calc(var(--lightbox-pad-y) / 2);
}

.lightbox__nav--next {
  right: calc(var(--lightbox-pad-y) / 2);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox {
    transition: none;
  }
}