/* Project pages. Desktop measures are in mockup pixels (projectpage_mockup.jpg
   is 2000 x 1125): --u is one of them, sized so the whole cover section (image,
   title, details, report link, More) fits in the window without scrolling.
   The composition is centred in windows wider than 16:9. */

:root { --h: 100vh; }
@supports (height: 100dvh) { :root { --h: 100dvh; } }

body {
  --u: min(calc(100vw / 2000), calc((var(--h) - 56px) / 1125)); /* 56px: room for the team line and a two-line title */
  --left: calc(287 * var(--u) + (100vw - 2000 * var(--u)) / 2);
  --col: calc(1232 * var(--u));
}

/* Back stays put while the page scrolls. */
.back {
  position: fixed;
  z-index: 2;
  top: calc(80 * var(--u));
  left: calc(62 * var(--u) + (100vw - 2000 * var(--u)) / 2);
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  font-size: max(calc(25 * var(--u)), 16px);
  line-height: 1.44;
}
/* Next project: the mirror of Back, fixed in the bottom right. */
.next {
  position: fixed;
  z-index: 2;
  bottom: calc(80 * var(--u));
  right: calc(62 * var(--u) + (100vw - 2000 * var(--u)) / 2);
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  font-size: max(calc(25 * var(--u)), 16px);
  line-height: 1.44;
}
.next svg { display: block; overflow: visible; width: 1.16em; height: .4em; margin-left: .84em; fill: currentColor; stroke: currentColor; }
.back:hover, .more:hover, .next:hover { border-bottom-color: currentColor; }
.back svg { width: 1.16em; height: .4em; margin-right: .84em; }
.back svg, .more svg { display: block; overflow: visible; fill: currentColor; stroke: currentColor; }

.project { padding: calc(81 * var(--u)) 0 0 var(--left); }

.cover { width: var(--col); }
.cover-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.cover-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.project-title {
  margin-top: calc(34 * var(--u));
  font-size: max(calc(52 * var(--u)), 26px);
  line-height: 1.15;
  font-weight: 700;
  scroll-margin-top: max(calc(80 * var(--u)), 40px);
}

.project-meta {
  margin-top: calc(18 * var(--u));
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.3;
}
.project-meta li + li { margin-top: calc(20 * var(--u)); }
/* Who worked on it: small, slightly bold, light grey, under the date. */
.project-team { margin-top: calc(20 * var(--u)); font-size: max(calc(15 * var(--u)), 13px); font-weight: 500; color: #9a9a9a; line-height: 1.35; }

.deliverable {
  display: inline-block;
  margin-top: calc(44 * var(--u));
  font-size: max(calc(19 * var(--u)), 14px);
  text-decoration-line: underline;
}

.more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  border-bottom: 1px solid transparent;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.2;
}
.more svg { width: .4em; height: 1.1em; }

/* Room below the cover so More can bring the title to the top. */
.project-body { min-height: var(--h); }

/* Phones and portrait tablets: one column, Back in a bar across the top. */
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  body { --pad: 24px; }
  .back {
    top: 0;
    left: 0;
    right: 0;
    padding: 14px var(--pad);
    background: #fff;
    border-bottom: 0;
  }
  .back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .next { bottom: 0; right: 0; padding: 12px var(--pad); background: #fff; border-bottom: 0; font-size: 16px; }
  .next:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .project { padding: 64px var(--pad) 0; }
  .cover { width: 100%; }
  .project-title { margin-top: 24px; font-size: clamp(26px, 7vw, 40px); scroll-margin-top: 64px; }
  .project-meta { margin-top: 12px; font-size: 16px; }
  .project-meta li + li { margin-top: 8px; }
  .project-team { margin-top: 10px; font-size: 13px; }
  .deliverable { margin-top: 24px; font-size: 16px; }
  .more { gap: 6px; font-size: 15px; }
}

/* ------------------------------------------------------------------------
   Project content below the cover. Same column as the cover image.
   ------------------------------------------------------------------------ */
.project-body {
  container-type: inline-size;
  min-height: 0;
  width: var(--col);
  padding: calc(120 * var(--u)) 0 calc(160 * var(--u));
  --body-fs: max(calc(19 * var(--u)), 16px);
  --gap: max(calc(36 * var(--u)), 20px);
  font-size: var(--body-fs);
  line-height: 1.6;
}

.pj-section + .pj-section { margin-top: max(calc(150 * var(--u)), 72px); }

.pj-section h2 {
  margin-bottom: max(calc(36 * var(--u)), 20px);
  font-size: max(calc(30 * var(--u)), 22px);
  line-height: 1.2;
  font-weight: 700;
}
.pj-section h2:not(:first-child) { margin-top: max(calc(90 * var(--u)), 48px); }
.pj-section h3 { margin-bottom: .6em; font-size: 1em; font-weight: 600; }

.pj-text p + p { margin-top: 1em; }

figure { margin: 0; }
.project-body img { display: block; width: 100%; height: auto; }
figcaption, .pj-credit {
  margin-top: .7em;
  font-size: max(calc(15 * var(--u)), 13px);
  line-height: 1.4;
  color: #6f6f6f;
}

/* Intro: the story beside the 1963 newspaper clipping. */
.pj-intro { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: calc(2.5 * var(--gap)); align-items: start; }
.pj-intro .pj-text { max-width: 44em; }

/* Text beside an image. */
.pj-split { display: grid; grid-template-columns: 36% 1fr; gap: var(--gap); align-items: start; }
.pj-contribution { max-width: 44em; }
.pj-split-reverse { grid-template-columns: 1fr 42%; margin-top: calc(var(--gap) / 2); }

.pj-grid-2, .pj-grid-3, .pj-grid-photos { display: grid; gap: var(--gap); }
.pj-grid-2 { grid-template-columns: 1fr 1fr; }
.pj-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Widths in proportion to each photo's shape, so both are the same height. */
.pj-grid-photos { grid-template-columns: 1.782fr 1.471fr; align-items: start; }
.pj-maps { margin-top: calc(1.5 * var(--gap)); }
.pj-diagrams { margin-top: calc(2.5 * var(--gap)); }

/* The planting diagrams: larger, centered, right after the site plan. */
.pj-feature { display: grid; gap: calc(2 * var(--gap)); margin-top: calc(2.5 * var(--gap)); }
.pj-feature figure { width: 84%; margin: 0 auto; }
.pj-feature h3 { text-align: center; }

/* Map titles placed just above each map's key (see --kx and --ky on the figure). */
.pj-keyed figure { position: relative; }
.pj-keyed h3 { position: absolute; left: var(--kx); top: var(--ky); right: 0; margin: 0; transform: translateY(calc(-100% - .5em)); text-align: left; line-height: 1.3; }
.pj-wide { margin-bottom: var(--gap); }

/* Map legends, matched to the colors in the maps. */
.pj-legend { margin-top: .8em; font-size: max(calc(15 * var(--u)), 13px); line-height: 1.5; }
.pj-legend li { display: flex; align-items: center; gap: .6em; }
.sw { flex: none; width: 1.6em; height: .9em; background: var(--c); }
.sw-outline { background: none; border: 2px solid #4f7f3a; }
.sw-dot { background: radial-gradient(circle, #f0d060 0 35%, transparent 40%); }
.sw-hatch { background: repeating-linear-gradient(135deg, #8a8a8a 0 1px, transparent 1px 4px); }

/* Bar chart: one series, read off a recessive grid; hover or focus a bar
   for its count. */
.pj-chart { margin-top: calc(2 * var(--gap)); }
.pj-chart h3 { margin-bottom: 1em; }
.chart { position: relative; padding: 0 0 0 2.4em; }
.chart-axis-title { display: block; margin: 0 0 .8em -2.4em; font-size: .75em; color: #8a8a8a; }
.chart-plot {
  --max: 16;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2%;
  align-items: end;
  height: max(calc(300 * var(--u)), 200px);
  margin-bottom: 3.2em;
  border-bottom: 1px solid #9a9a9a;
}
.tick {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--v) / var(--max) * 100%);
  border-top: 1px solid #e6e6e6;
  font-size: .75em; color: #8a8a8a; line-height: 0;
}
.tick { text-indent: -2.2em; }
.bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  outline-offset: 2px;
}
.bar-fill {
  width: 100%;
  height: calc(var(--v) / var(--max) * 100%);
  background: #2a2a2a;
  border-radius: 4px 4px 0 0;
}
.bar-value {
  position: absolute; bottom: calc(var(--v) / var(--max) * 100% + 4px); left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff;
  font-size: .85em; font-weight: 600;
  opacity: 0;
  transition: opacity 150ms;
}
.bar:hover .bar-value, .bar:focus-visible .bar-value { opacity: 1; }
.bar-label {
  position: absolute; top: calc(100% + 6px); left: 50%;
  width: 7em; transform: translateX(-50%);
  font-size: .75em; line-height: 1.2; text-align: center;
}


/* Before photo beside the rendering, both ending on the same line. */
.pj-before-after { display: grid; grid-template-columns: 1fr 2.4fr; gap: var(--gap); align-items: end; }

/* A development site: title, sketch and goals beside the site plan. */
.pj-site { display: grid; grid-template-columns: 36% 1fr; gap: calc(1.5 * var(--gap)); align-items: start; }
.pj-site + .pj-site { margin-top: calc(3 * var(--gap)); }
.pj-site-text h3 { margin-bottom: 1em; }
/* The pencil sketch stays small when the site stacks in narrow windows. */
.pj-site-text img { max-width: 420px; }
.pj-points { margin-top: 1.4em; padding-left: 1.1em; list-style: disc; }
.pj-points li + li { margin-top: .6em; }
/* Full bleed: the image spans the whole window, edge to edge. */
html { overflow-x: clip; }
.project-body .pj-bleed { width: 100vw; max-width: none; margin-left: calc(-1 * var(--left)); }

/* Space above a figure that follows text. */
.pj-gap-top { margin-top: calc(1.5 * var(--gap)); }

/* Intro beside a numbered list (research questions) instead of a clipping. */
.pj-intro-wide { grid-template-columns: 1fr minmax(0, 34%); }
.pj-questions ol { padding-left: 1.4em; }
.pj-questions li + li { margin-top: .8em; }
.pj-questions li::marker { font-weight: 600; }

/* Key figures for a project: one row of four, each starting on the same line. */
.pj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: calc(1.5 * var(--gap)) 0 0; }
.pj-stats > div { padding-top: .8em; border-top: 1px solid #d6d6d6; }
.pj-stats dt { font-size: .8em; color: #6f6f6f; }
.pj-stats dd { margin: .3em 0 0; font-size: 1.25em; font-weight: 600; line-height: 1.25; }
.pj-stats dd.pj-stat-note { margin-top: .25em; font-size: .8em; font-weight: 400; color: #6f6f6f; }

/* A subheading between figures in a section. */
.pj-subhead { margin-top: calc(2.5 * var(--gap)); }
.pj-subhead + .pj-bleed { margin-top: .4em; }

/* Four small maps in a row. */
.pj-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

/* A photo beside a chart, both ending on the same line. */
.pj-photo-chart { display: grid; grid-template-columns: 1fr 1.22fr; gap: calc(1.5 * var(--gap)); align-items: end; margin: .6em 0 calc(1.5 * var(--gap)); }
.pj-photo-chart figcaption { position: absolute; }
.pj-photo-chart figure { position: relative; }

/* Word clouds side by side, tops aligned, with one shared color key below. */
.pj-clouds { align-items: start; }
.pj-cloud-key { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.6em; margin-top: 1em; font-size: .85em; }
.pj-cloud-key span { color: var(--c); }

/* The photo of someone drawing, below the text and above the drawings. */
.pj-drawing-photo { max-width: 60%; }

/* Cognitive maps: every drawing cleaned and fitted to the same square, three
   then two, each with its maker's name and a note. */
.pj-cogmaps { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(1.5 * var(--gap)) var(--gap); margin-top: calc(2 * var(--gap)); align-items: start; }
.pj-cogmaps figure { grid-column: span 2; }
.pj-cogmaps figure:nth-child(4) { grid-column: 2 / span 2; }
.pj-cogmaps figure:nth-child(5) { grid-column: 4 / span 2; }
.pj-cogmaps figcaption b { display: block; margin-bottom: .2em; color: #1a1a1a; font-weight: 600; }

/* The report's contents, with what this page covers in dark text. */
.pj-toc-key { display: flex; gap: 1.6em; font-size: .8em; color: #6f6f6f; }
.pj-toc-key span::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; border-radius: 50%; vertical-align: -.05em; }
.pj-toc-key .on::before { background: #1a1a1a; }
.pj-toc-key .off::before { border: 1px solid #b0b0b0; }
.pj-toc { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap) calc(.6 * var(--gap)); margin-top: 1.4em; padding: 0; list-style: none; font-size: .8em; line-height: 1.35; }
.pj-toc > li { padding-top: .8em; border-top: 2px solid #1a1a1a; }
.pj-toc h3 { min-height: 3.9em; margin-bottom: .6em; }
.pj-toc h3 span { display: block; margin-bottom: .2em; color: #6f6f6f; font-weight: 400; }
.pj-toc ul li { position: relative; padding-left: 1.1em; }
.pj-toc ul li + li { margin-top: .5em; }
.pj-toc ul li::before { content: ""; position: absolute; left: 0; top: .4em; width: .55em; height: .55em; border-radius: 50%; background: #1a1a1a; }
.pj-toc ul li.off { color: #8a8a8a; }
.pj-toc ul li.off::before { background: none; border: 1px solid #b0b0b0; }

/* SWOT: four short columns, each marked with its color from the report. */
.pj-swot { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.pj-swot > div { padding-top: .9em; border-top: 6px solid var(--c); }
.pj-swot ul { font-size: .9em; }
.pj-swot li + li { margin-top: .7em; }
.swot-s { --c: #5b88c4; } .swot-w { --c: #d9915a; } .swot-o { --c: #64a3a3; } .swot-t { --c: #ab333f; }

.pj-end { margin-top: max(calc(120 * var(--u)), 64px); }
/* Synergy: the wellness cycle beside the three kinds of care. */
.pj-vision { display: grid; grid-template-columns: 1fr 1.35fr; gap: calc(1.5 * var(--gap)); align-items: center; }
.pj-care { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.6 * var(--gap)); margin: 0; padding: 0; list-style: none; }
.pj-care > li { padding: 1em 1em 1.2em; background: var(--c); color: #fff; }
.pj-care h3 { margin-bottom: .2em; font-size: 1.05em; }
.pj-care-who { font-size: .8em; opacity: .85; }
.pj-care ul { margin-top: .9em; padding-left: 1.1em; list-style: disc; font-size: .9em; }
.pj-care ul li + li { margin-top: .25em; }

/* A numbered site-plan key, set as text in three columns. */
.pj-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); font-size: .9em; }
.pj-key ol { padding-left: 1.8em; }
.pj-key li + li { margin-top: .2em; }

/* Construction phases: pie and legend above each model, figures below. */
.pj-phase-grid { row-gap: calc(2 * var(--gap)); }
.pj-phase-head { display: flex; gap: 1em; align-items: center; }
.pj-phase-head .pj-pie { flex: none; width: 4.5em; height: 4.5em; }
.pj-phase-head .pj-legend { margin: 0; }
.pj-phase-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.pj-phase-foot h3 { margin: 0; }
.pj-phase-foot p { font-size: .85em; line-height: 1.45; text-align: right; }

/* South Main: two small locator maps beside the contribution text. */
.pj-frontage figure { display: flex; flex-direction: column; }
.pj-frontage img { max-height: 32em; width: auto; max-width: 100%; margin: 0 auto; }
.sw-empty { background: #fff; border: 1px solid #b0b0b0; }

/* Design details: round crops like the portfolio's callouts. */
.pj-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.5 * var(--gap)) var(--gap); margin-top: calc(2 * var(--gap)); }
.pj-details figure { text-align: center; }
.pj-details img { border-radius: 50%; outline: 2px dashed #1f2a44; outline-offset: .5em; width: 82%; margin: .5em auto 0; }
.pj-details figcaption { margin-top: 1.2em; }

/* Construction phases: each street model beside its steps. */
.pj-phases { margin: 0; padding: 0; list-style: none; }
.pj-phases > li { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(1.5 * var(--gap)); align-items: center; }
.pj-phases > li + li { margin-top: var(--gap); }
.pj-phases h3 { margin-bottom: .6em; }
.pj-phases ul { padding-left: 1.1em; list-style: disc; font-size: .95em; }
.pj-phases ul li + li { margin-top: .35em; }

/* MCDA: headings over the two rent maps, each above its own half. */
.pj-rent-heads { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pj-rent-table { margin: 0; }
.pj-rent-table > div + div { margin-top: 1em; }
.pj-rent-table dt { font-size: .8em; color: #6f6f6f; }
.pj-rent-table dd { margin: .2em 0 0; font-size: 1.25em; font-weight: 600; }
.pj-rent-table dd span { font-size: .75em; font-weight: 400; }
.up { color: #c8312f; }

/* Resident quotes, two by two, each beside its figure. */
.pj-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5 * var(--gap)) calc(2 * var(--gap)); }
.pj-quote { display: grid; grid-template-columns: 22% 1fr; gap: var(--gap); align-items: center; }
.pj-quote img { width: auto; max-width: 100%; max-height: 13em; margin: 0 auto; }
.pj-quote blockquote { margin: 0; font-size: 1.05em; line-height: 1.45; }
.pj-quote figcaption { margin-top: .8em; font-style: italic; }
.pj-quote figcaption::before { content: "— "; }

/* A change map beside its title, the four most-changed block groups and a takeaway. */
.pj-change { display: grid; grid-template-columns: 52% 1fr; gap: calc(1.5 * var(--gap)); align-items: center; }
.pj-change + .pj-change { margin-top: calc(2.5 * var(--gap)); }
.pj-change h3 { margin-bottom: .1em; }
.pj-years { font-size: .8em; color: #6f6f6f; }
.pj-change h4 { margin-top: 1.4em; font-size: .9em; font-weight: 600; }
.pj-change h4 + p { margin-top: .3em; }
.pj-bgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; margin-top: 1.2em; font-size: .7em; line-height: 1.35; }
.pj-bgs b { display: block; font-weight: 600; }
.pj-bgs img { height: 4.5em; width: 100%; object-fit: contain; margin: .6em 0; }
.pj-bgs span { color: #6f6f6f; }

/* Protection tiers and the three districts. */
.pj-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--gap)); margin-top: 1em; }
.pj-tiers h4 { font-weight: 600; margin-bottom: .6em; }
.pj-tiers ul, .pj-hpd ul { padding-left: 1.1em; list-style: disc; }
.pj-tiers li + li { margin-top: .35em; }
.pj-hpds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: calc(2 * var(--gap)); }
.pj-hpd { border: 2px solid #1f2a44; }
.pj-hpd h4 { margin: 0; padding: .6em 1em; background: #1f2a44; color: #fff; font-weight: 600; }
.pj-hpd ul { margin: 1em 1em 1em 2.1em; font-size: .9em; }
.pj-hpd p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: .8em 1em; border-top: 2px solid #1f2a44; font-size: .85em; }
.pj-hpd b { font-size: 2.2em; line-height: 1; font-weight: 700; }
.pj-hpd .high { color: #e2402c; }
.pj-hpd .medium { color: #f2a51a; }

.pj-end .deliverable { margin: 0; }

/* Text beside an image only works while the column is wide enough. In
   narrower windows the body text stops shrinking (it has a minimum size) but
   the images keep getting smaller, so a paragraph can run far past its image.
   Below this width the text sits above its image instead. */
@container (max-width: 899px) {
  .pj-vision { grid-template-columns: 1fr; }
  .pj-vision > img { max-width: 60%; margin: 0 auto; }
  .pj-phase-grid { grid-template-columns: 1fr; }
  .pj-phases > li { grid-template-columns: 1fr; gap: .8em; }
  .pj-details { grid-template-columns: 1fr 1fr; }
  .pj-details figure, .pj-details figure:nth-child(4), .pj-details figure:nth-child(5) { grid-column: auto; }
  .pj-change, .pj-quotes { grid-template-columns: 1fr; }
  .pj-change > img { max-width: 80%; }
  .pj-tiers, .pj-hpds { grid-template-columns: 1fr; }
  .pj-split, .pj-split-reverse, .pj-site, .pj-intro-wide { grid-template-columns: 1fr; }
  .pj-split .pj-text, .pj-split-reverse .pj-text, .pj-site-text, .pj-intro .pj-text { max-width: 44em; }
  .pj-split-reverse > figure { order: 2; }
  .pj-split > img, .pj-split > figure, .pj-split-reverse > figure, .pj-site > img { max-width: 80%; }
  .pj-clipping { max-width: 300px; }
}

/* Phones and portrait tablets: everything in one column. */
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  .project-body { width: auto; padding: 56px 0 96px; }
  .pj-intro, .pj-split, .pj-split-reverse, .pj-grid-2, .pj-grid-photos { grid-template-columns: 1fr; }
  .pj-clipping { max-width: 300px; }
  .pj-split-reverse figure { order: 2; }
  .pj-split > img, .pj-split > figure, .pj-split-reverse > figure, .pj-site > img { max-width: none; }
  .pj-feature figure { width: 100%; }
  .pj-keyed h3 { position: static; transform: none; margin-bottom: .6em; }
  .pj-before-after, .pj-site, .pj-intro-wide { grid-template-columns: 1fr; }
  .pj-stats { grid-template-columns: 1fr 1fr; }
  .pj-grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pj-photo-chart { grid-template-columns: 1fr; }
  .pj-photo-chart figcaption { position: static; }
  .pj-drawing-photo { max-width: 100%; }
  .pj-cogmaps { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .pj-cogmaps figure, .pj-cogmaps figure:nth-child(4), .pj-cogmaps figure:nth-child(5) { grid-column: auto; }
  .pj-toc { grid-template-columns: 1fr 1fr; }
  .pj-toc h3 { min-height: 0; }
  .pj-swot { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .pj-care, .pj-key { grid-template-columns: 1fr; }
  .pj-before-after > figure:first-child img { max-width: 60%; }
  .project-body .pj-bleed { margin-left: calc(-1 * var(--pad)); }
  .pj-grid-3 { grid-template-columns: 1fr; gap: 48px; }
  .pj-grid-3.pj-maps { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pj-maps .pj-legend { font-size: 11px; }
  /* The chart turns sideways so the labels have room; counts always show. */
  .chart { padding: 0; }
  .chart-axis-title { margin-left: 0; }
  .chart-plot { display: grid; grid-template-columns: 1fr; gap: 10px; height: auto; margin: 0; border: 0; }
  .tick { display: none; }
  .bar { display: grid; grid-template-columns: 8.2em 1fr 1.8em; align-items: center; gap: 8px; height: auto; }
  .bar-label { position: static; order: -1; width: auto; transform: none; font-size: .8em; text-align: left; }
  .bar-fill { height: 14px; width: calc(var(--v) / var(--max) * 100%); border-radius: 0 4px 4px 0; }
  .bar-value { position: static; transform: none; padding: 0; opacity: 1; font-size: .8em; }
}

/* Magnifying lens for images with data-zoom (see project.js). */
.pj-lens {
  position: fixed; left: 0; top: 0; z-index: 20;
  width: clamp(180px, 22vw, 340px); aspect-ratio: 1;
  border-radius: 50%; background: #fff no-repeat;
  outline: 2px dashed #1f2a44; outline-offset: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.pj-lens.on { opacity: 1; }
/* A small note telling mouse users the image below can be magnified. */
.pj-hint { margin: -.4em 0 1em; font-size: .8em; color: #6f6f6f; }
@media not ((hover: hover) and (pointer: fine)) { .pj-hint { display: none; } }

/* Third Rail: the four garment models trimmed to the figure and shown at one height. */
.pj-models { display: flex; justify-content: space-around; align-items: flex-end; gap: var(--gap); }
.project-body .pj-models img { width: auto; height: min(30em, 55cqi); max-width: none; }
/* Mood board and sketches at the same height: columns in proportion to each image. */
.pj-concept { display: grid; grid-template-columns: 1.370fr 0.862fr; gap: var(--gap); align-items: start; }
/* Wide drawings that run from the column to the right edge of the window. */
.project-body .pj-bleed-right { width: calc(100vw - var(--left)); max-width: none; }
@media (max-width: 759px), (max-aspect-ratio: 1/1) { .project-body .pj-bleed-right { width: calc(100% + var(--pad)); } .pj-concept { grid-template-columns: 1fr; } }

/* Synergy typologies: models on one scale, bottoms on one line, text aligned below. */
.pj-typ { display: grid; gap: 0 var(--gap); align-items: start; }
.pj-typ-4 { grid-template-columns: repeat(4, 1fr); }
.pj-typ-5 { grid-template-columns: repeat(5, 1fr); margin-top: calc(2 * var(--gap)); }
.pj-typ-img { display: flex; align-items: flex-end; justify-content: center; }
.pj-typ-4 .pj-typ-img { aspect-ratio: 1.25; }
.pj-typ-5 .pj-typ-img { aspect-ratio: 1.7; }
.project-body .pj-typ-img img { height: auto; flex: none; }
.pj-typ figcaption { margin-top: 1em; font-size: .72em; line-height: 1.45; color: #4a4a4a; }
.pj-typ figcaption b { display: block; margin-bottom: .2em; color: #1a1a1a; font-weight: 600; }
.pj-typ figcaption span { display: block; margin-top: .7em; }
@container (max-width: 899px) {
  .pj-typ-4, .pj-typ-5 { grid-template-columns: 1fr 1fr; gap: calc(1.5 * var(--gap)) var(--gap); }
  .pj-typ-4 .pj-typ-img, .pj-typ-5 .pj-typ-img { aspect-ratio: 1.3; }
}

/* An embedded 3D viewer (Sketchfab), 16:9 at column width. */
.pj-embed { position: relative; aspect-ratio: 16 / 9; background: #f2f2f2; }
.pj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A hint that applies on touch screens too. */
@media not ((hover: hover) and (pointer: fine)) { .pj-hint.pj-hint-all { display: block; } }
/* The Greitzer intro keeps its narrow clipping beside the text until the column is small. */
@container (max-width: 599px) { .pj-intro { grid-template-columns: 1fr; } }