/* ------------------------------------------------------------------
   Layout system
   Breakpoints: ≤479 (phone), ≤767 (grid columns), ≤991 (sub-hero),
   ≥1920 (large type). Gutter 10px, 12-column grids, 5px image insets.
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 125%;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
p {
  margin: 0;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  background-color: var(--fg);
  color: var(--white);
}

img,
video {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--fg);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Background
   ------------------------------------------------------------------ */

/* Column dividers: 5 lines on the centres of the 10px image gutters —
   x = 5px + k · (100% − 10px) / 4, so every image sits exactly 5px from
   the line on either side. */
.gridlines {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 120vh;
  pointer-events: none;
}

.gridlines span {
  position: absolute;
  top: 0;
  left: calc(5px + var(--k) * (100% - 10px) / 4 - 0.5px);
  width: 1px;
  height: 100%;
  background: var(--grid-ink);
  opacity: var(--divider-opacity);
  transform: scaleX(0.5); /* centred on x: covers x ± 0.25px */
}

.gridlines span:nth-child(1) { --k: 0; }
.gridlines span:nth-child(2) { --k: 1; }
.gridlines span:nth-child(3) { --k: 2; }
.gridlines span:nth-child(4) { --k: 3; }
.gridlines span:nth-child(5) { --k: 4; }

/* Shift + G layout overlay */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  padding: 0 10px;
  pointer-events: none;
}

.grid-overlay.is-visible {
  display: grid;
}

.grid-overlay span {
  height: 100vh;
  background: rgba(0, 0, 0, 0.03);
}

/* ------------------------------------------------------------------
   Page transition — four columns, each wiping inside itself
   ------------------------------------------------------------------ */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
}

.js .page-transition {
  display: flex;
}

.js .page-transition.is-done {
  display: none;
}

.transition-column {
  width: 25%;
  height: 100%;
  overflow: hidden;
}

.transition-column:nth-child(1),
.transition-column:nth-child(4) {
  width: calc(25% + 2.5px);
}

.transition-column:nth-child(2),
.transition-column:nth-child(3) {
  width: calc(25% - 2.5px);
}

.transition-fill {
  width: 100%;
  height: 100%;
  background: var(--fg);
  pointer-events: auto;
  will-change: transform;
  backface-visibility: hidden;
}

/* entry: covered on first paint, wipes out after a 100ms beat */
.page-transition.is-entering .transition-fill {
  animation: wipe-out 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0.1s both;
}

/* exit: wipes in immediately, page changes at 500ms */
.page-transition.is-leaving .transition-fill {
  animation: wipe-in 0.5s cubic-bezier(0.42, 0, 0.58, 1) both;
}

/* prerendered in the background: hold the entry wipe until activation */
.is-prerendering .page-transition .transition-fill {
  animation-play-state: paused !important;
}

@keyframes wipe-out {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes wipe-in {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------ */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  width: 100vw;
  mix-blend-mode: difference;
}

/* Solid strip behind the nav so scrolled content passes under it instead of
   through the text. Kept outside .navbar: a background inside the blended
   layer would itself be inverted. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99;
  height: calc(30px + 1.25em); /* nav padding 15px × 2 + one line */
  background: var(--bg);
  pointer-events: none;
}

.nav {
  justify-items: start;
  padding: 15px 10px;
}

.nav-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-family: var(--font-head);
  color: var(--white);
  overflow: clip;
}

/* four items on quarter columns, so each one lines up with a divider */
.nav-button { grid-column: span 3; }

.nav-button:hover,
.nav-button[aria-current="page"] {
  overflow: visible;
  background: none;
  color: var(--white);
}

/* Placeholder that keeps the name's 10px + gap offset in the blended text
   layer; the visible squares live in .nav-markers so they stay true blue. */
.button-square {
  width: 10px;
  height: 10px;
  flex: none;
}

/* Marker layer: same grid as the nav, no blend mode, so icons render in
   Carbon blue over any background. */
.nav-markers {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 101;
  justify-items: start;
  width: 100vw;
  padding: 15px 10px;
  font-family: var(--font-head);
  pointer-events: none;
}

.nav-marker-cell {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.25em; /* matches the nav link's line box */
}

.nav-marker-cell { grid-column: span 3; }

.nav-marker {
  position: absolute;
  left: -20px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  opacity: 0;
}

.nav-marker.is-static {
  position: static;
  opacity: 1;
}

.nav-marker.is-current {
  opacity: 1;
}

body:has(.nav-button:nth-child(2):hover) .nav-marker-cell:nth-child(2) .nav-marker,
body:has(.nav-button:nth-child(3):hover) .nav-marker-cell:nth-child(3) .nav-marker,
body:has(.nav-button:nth-child(4):hover) .nav-marker-cell:nth-child(4) .nav-marker {
  animation: blink 0.45s steps(1, end) both;
}

/* One shape per section: square · diamond · circle · triangle */
.nav-marker-cell:nth-child(2) .nav-marker {
  transform: rotate(45deg) scale(0.78); /* diamond, same visual size as the square */
}

.nav-marker-cell:nth-child(3) .nav-marker {
  border-radius: 50%;
}

.nav-marker-cell:nth-child(4) .nav-marker {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* The current page's shape blinks for as long as you're on that page */
.nav-marker.is-current {
  animation: blink-loop 1s steps(1, end) infinite !important;
}

@keyframes blink-loop {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes blink {
  0% { opacity: 0; }
  44% { opacity: 1; }
  89%,
  100% { opacity: 1; }
}

.name-short {
  display: none;
}

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

.hero {
  display: flex;
  align-items: flex-end;
  width: 100vw;
  height: 100svh;
  padding: 15px 10px;
  color: var(--fg);
}

.hero--sub {
  height: auto;
}

.title-h1 {
  min-width: 100%;
  padding-bottom: 0.4vw;
  font-family: var(--font-head);
  font-size: 10vh;
  font-weight: 400;
  line-height: 102%;
  text-indent: 25%;
  text-transform: lowercase;
}

.title-h1.small-h1 {
  margin-top: 25vh;
  font-size: 5vh;
}

/* JS line-setting: one span per line */
.title-h1.is-set {
  text-indent: 0;
}

.title-h1 .line {
  display: block;
  white-space: nowrap;
}

.keep-case {
  text-transform: none;
}

.js .hero:not(.hero--sub) .title-h1:not(.is-ready) {
  visibility: hidden;
}

.scroll-down-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 18px;
  opacity: 0;
  white-space: nowrap;
  will-change: transform;
}

.scroll-down-tag span {
  display: inline-block;
  opacity: 0;
}

/* "view case study" — trails the cursor over a project's tiles (home) */
.cursor-cue {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  opacity: 0.5; /* same lighter read as "scroll down" */
  white-space: nowrap;
  will-change: transform;
}

.cursor-cue span {
  display: inline-block;
  opacity: 0;
}

/* the cue gets a backing in the page colour so it stays legible over text and
   images alike; the muted colour matches its usual 50% read */
.cursor-cue.is-on-text {
  opacity: 1;
  color: var(--fg-muted);
}

.cursor-cue.is-on-text span {
  background: var(--bg);
}

/* ------------------------------------------------------------------
   Projects
   ------------------------------------------------------------------ */

.project {
  width: 100vw;
  margin-top: 20vh;
  margin-bottom: 50vh;
}

.project-tag {
  display: flex;
  height: 14px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 18px;
}

.project-header {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

/* Inverted for as long as the pointer is over the row (mouse/trackpad only,
   so a tap on a phone doesn't leave it stuck dark). */
@media (hover: hover) {
  .project-header:hover {
    background-color: var(--fg);
  }
}

.project-header-grid {
  place-items: stretch start;
  font-family: var(--font-head);
}

.project-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: var(--white);
}

.project-header-grid > :nth-child(1) { grid-column: span 6; }
.project-header-grid > :nth-child(2) { grid-column: span 3; }

/* Year + plus: the plus sits outside the blended container so it stays blue */
.project-meta {
  grid-column: span 3;
  justify-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 125%;
}

/* "+" drawn in CSS; rotates to "×" while the project is open */
.plus-icon {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.plus-icon::before {
  left: 0;
  top: 4.5px;
  width: 10px;
  height: 1px;
}

.plus-icon::after {
  left: 4.5px;
  top: 0;
  width: 1px;
  height: 10px;
}

.project-header[aria-expanded="true"] .plus-icon {
  transform: rotate(45deg);
}

.project-content-wrapper {
  height: 0;
  overflow: hidden;
}

.project-content {
  place-items: stretch start;
  padding: 0 10px 20px;
}

.project-content > :nth-child(1) { grid-area: 1 / 1 / 2 / 6; }
/* Credits: label + value pairs on shared rows (labels cols 7–9, values 10–12) */
.project-content > .credits {
  grid-area: 1 / 7 / 2 / 13;
  justify-self: stretch;
  align-self: start;
  align-content: start;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 0;
  margin: 0;
}

.credits dt { grid-column: span 3; }

.credits dd {
  grid-column: span 3;
  margin: 0;
}

.project-image-grid {
  padding: 0 5px;
}

/* Home rows with thumbnails: description, then client and role, in the first
   column; the three tiles fill columns two to four */
.project-row {
  display: flex;
  align-items: flex-start;
}

.project-row > .project-content-wrapper {
  flex: none;
  width: 25%;
}

.project-row > .project-image-grid {
  flex: none;
  width: 75%;
}

.project-row .project-content { display: block; }

.project-row .project-content > .credits {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  margin-top: 20px;
}

.project-row .credits dt,
.project-row .credits dd { grid-column: auto; }

.project-row [data-layout-grid] { --columns: 3; }

/* ------------------------------------------------------------------
   Flip grid
   ------------------------------------------------------------------ */

[data-layout-grid] {
  --columns: 4;
  --column-gap: 0em;
}

[data-layout-grid].is-dense {
  --columns: 6;
}

.layout-grid-list {
  position: relative;
  display: flex;
  flex-flow: wrap;
  row-gap: 2em;
  column-gap: var(--column-gap);
}

.layout-grid-item {
  position: relative;
  width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
  user-select: none;
  -webkit-user-select: none;
}

.layout-grid-item.is-active {
  width: calc(((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns)) * 2 + var(--column-gap));
}

/* Case studies: wide frames take two columns; clicked, they open to the full row */
.layout-grid-item.is-wide {
  width: calc(((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns)) * 2 + var(--column-gap));
}

.layout-grid-item.is-wide.is-active { width: 100%; }

/* Tiles that link to a case study: no inverted link highlight, plain cursor */
a.project-case-link,
a.project-case-link:hover {
  display: grid;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.layout-grid-item,
a.layout-grid-item:hover {
  display: block;
  background: none;
  color: inherit;
  cursor: pointer;
}

.project-image-outer {
  width: 100%;
  min-width: 100%;
  margin-bottom: 15px;
  padding: 0 5px;
}

.image-wrapper {
  width: 100%;
  min-width: 100%;
  cursor: pointer;
}

.thumbnail {
  display: block;
  width: 100%;
  min-width: 100%;
  height: auto; /* let aspect-ratio size it, not the width/height attributes */
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.thumbnail.portrait { aspect-ratio: 4 / 5; }
.thumbnail.landscape { aspect-ratio: 4 / 3; }
.thumbnail.square { aspect-ratio: 1; }
.thumbnail.wide { aspect-ratio: 16 / 9; }
.thumbnail.original { object-fit: contain; }

video.thumbnail {
  background: var(--cds-layer-accent-01);
}

/* Transparent cut-outs, blended videos and videos rendered on the page grey sit straight on the page */
img.thumbnail,
.thumbnail.is-blend,
.thumbnail.is-bare {
  background: transparent;
}

/* Multiply turns white into whatever is behind it (the page), so a video's
   white background disappears in every browser. */
.thumbnail.is-blend {
  mix-blend-mode: multiply;
}

.thumbnail.is-placeholder {
  background: var(--cds-layer-accent-01);
}

.layout-grid-item:nth-child(3n + 2) .thumbnail.is-placeholder { background: var(--gray-30); }
.layout-grid-item:nth-child(3n + 3) .thumbnail.is-placeholder { background: var(--cds-layer-01); }

.project-title-wrapper {
  padding-top: 2px;
}

.project-image-tag {
  overflow-wrap: anywhere;
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 18px;
}

/* ------------------------------------------------------------------
   Case study page (work/*.html)
   ------------------------------------------------------------------ */

.case-study {
  margin-top: 0;
  margin-bottom: 0;
}

.case-header {
  padding: 10px;
}

.case-study .project-content {
  padding-top: 0;
  padding-bottom: 40px;
}

.case-section + .case-section {
  margin-top: 30px;
}

.case-section-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: inherit;
  font-weight: 400;
  color: var(--fg-muted);
}

.case-section p {
  margin: 0;
}

.case-section p + p {
  margin-top: 1em;
}

.case-next {
  align-items: baseline;
  margin-top: 20vh;
  padding: 10px;
  font-family: var(--font-head);
}

.case-next-label {
  grid-column: span 6;
  color: var(--fg-muted);
}

.case-next-link {
  grid-column: span 6;
}

/* Long-form case study (AI): text first. Section title in the first
   quarter, the reading column across the middle, notes and figure captions
   in the last quarter; everything stacks below 768px. */
.case-guide {
  max-width: 46ch;
  color: var(--fg-muted);
}

.case-article {
  padding-bottom: 40px;
}

.article-row {
  align-items: start;
  padding: 0 10px;
}

.article-row + .article-row {
  margin-top: 24px;
}

.article-row.is-section-start {
  margin-top: 90px;
}

.article-section {
  grid-column: 1 / 4;
  grid-row: 1;
  margin: 0;
  line-height: 1.55;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-muted);
}

.article-text {
  grid-column: 4 / 10;
  grid-row: 1;
  max-width: 68ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

/* Highlighted facts and figures in running text: {{like this}} in content.js */
.hl { color: var(--accent); }

.term {
  text-decoration: underline dotted;
  text-decoration-color: var(--gray-50);
  text-underline-offset: 3px;
}

.article-notes {
  grid-column: 10 / 13;
  grid-row: 1;
  display: grid;
  gap: 12px;
}

.article-note,
.figure-caption p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.article-note-term,
.figure-key {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--fg);
}

.article-figure {
  margin: 40px 0 40px;
}

.figure-plate {
  position: relative;
  grid-column: 4 / 10;
  width: 100%;
  /* no panel: the drawing sits on the page; its plates fill with the page colour */
  --hairline-plate: var(--bg);
  --hairline-hi: var(--accent);
  --hairline-edge: var(--gray-50);
  --hairline-mid: var(--gray-30);
  --hairline-lo: var(--gray-20);
}

.figure-tag,
.figure-read {
  position: absolute;
  top: 10px;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 12px;
  pointer-events: none;
}

.figure-tag {
  left: 10px;
  color: var(--fg-muted);
}

.figure-read {
  right: 10px;
  color: var(--fg-muted);
  transition: color 260ms;
}

.article-figure.is-active .figure-read {
  color: var(--accent);
}

.figure-stage {
  cursor: crosshair;
}

.figure-caption {
  grid-column: 10 / 13;
  display: grid;
  gap: 12px;
}

.figure-caption .figure-title {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--fg);
}

/* ------------------------------------------------------------------
   Photos page
   ------------------------------------------------------------------ */

.photos-wrapper {
  width: 100vw;
  margin-top: 20vh;
}

/* AI page: same project rows as home, starting closer to the intro */
.ai-projects .project:first-child {
  margin-top: 0;
}

.photos-image-grid {
  padding: 0 5px;
}

/* ------------------------------------------------------------------
   About
   ------------------------------------------------------------------ */

.about-img-container {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 1fr;
  align-items: start;
  gap: 10px;
  width: 100vw;
  height: 100dvh;
  padding: 10px;
  overflow: hidden;
  pointer-events: none;
}

.about-img-container > * {
  pointer-events: auto;
}

.about-img .thumbnail {
  aspect-ratio: 1;
}

.about-text-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  margin-top: 20vh;
}

.about-text-grid {
  place-items: stretch start;
  padding: 10px;
}

.about-text-grid > :nth-child(1) { grid-area: 1 / 4 / 2 / 7; }
.about-text-grid > :nth-child(2) { grid-area: 1 / 7 / 2 / 11; }

.h2-about {
  font-size: 14px;
  font-weight: 400;
  line-height: 125%;
}

.about-body p + p {
  margin-top: 1em;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.footer {
  margin-top: 35vh;
  mix-blend-mode: difference;
  font-family: var(--font-head);
  color: var(--white);
}

.footer-grid {
  place-items: end start;
  padding: 15px 10px;
}

.credits-container {
  grid-column: span 9;
  display: flex;
  align-items: center;
  width: 100%;
}

.copyright-container {
  grid-column: span 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

/* ------------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------------ */

@media screen and (min-width: 1920px) {
  body { font-size: 16px; }
  .button-square,
  .nav-marker { width: 12px; height: 12px; }
  .project-image-tag,
  .project-tag { font-size: 14px; }
  .project-info,
  .h2-about { font-size: 16px; }
}

@media screen and (max-width: 991px) {
  .title-h1.small-h1 { font-size: 4vh; }
}

@media screen and (max-width: 767px) {
  [data-layout-grid] { --columns: 2; }
  .project-row { flex-direction: column; }
  .project-row > .project-content-wrapper,
  .project-row > .project-image-grid { width: 100%; }
  .project-row [data-layout-grid] { --columns: 2; }
  [data-layout-grid].is-dense { --columns: 3; }
}

@media screen and (max-width: 479px) {
  /* keep the full name on phones; let it run past its narrow quarter column */
  .nav-button:first-child { overflow: visible; }

  .gridlines span { transform: scaleX(0.25); }

  .title-h1 { font-size: 4.5vh; }
  .title-h1.small-h1 { margin-top: 20vh; font-size: 3vh; }

  .project { margin-top: 10vh; margin-bottom: 25vh; }
  .project-info,
  .project-info-container,
  .project-meta { justify-content: flex-end; }
  .mobile-invisible { display: none; }

  .project-content > :nth-child(1) { grid-area: 1 / 1 / 2 / 13; }
  .project-content > .credits {
    grid-area: 2 / 1 / 3 / 13;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .credits dt { grid-column: span 3; }
  .credits dd { grid-column: span 9; }

  .layout-grid-list { row-gap: 1em; }

  .about-text-container { margin-top: 15vh; }
  .about-text-grid > :nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
  .about-text-grid > :nth-child(2) { grid-area: 1 / 4 / 2 / 13; }

  .photos-wrapper { margin-top: 10vh; }
  .footer { margin-top: 25vh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .page-transition { display: none; }
  .nav-marker { animation: none !important; }
  .nav-marker.is-current { opacity: 1; }
}

@media screen and (max-width: 767px) {
  .article-section,
  .article-text,
  .article-notes,
  .figure-plate,
  .figure-caption { grid-column: 1 / 13; }
  .article-section, .article-text, .article-notes { grid-row: auto; }
  .article-section { margin-bottom: 10px; }
  .article-row.is-section-start { margin-top: 50px; }
  .article-text { font-size: 15px; }
  .article-notes {
    margin-top: 14px;
    padding-left: 10px;
    border-left: 1px solid var(--gray-30);
  }
  .figure-caption { margin-top: 12px; }
}