/* Three architectural views, three inhabited studies and their original
   drawings. Only the catalogue view has an identity for travel between pages. */
.portfolio .folio-panel { display: block; }
body[data-page="projects"]:has(.folio-gallery[data-folio-visible="true"]) .site-header { background: #f4f6f1; color: #193a36; }
.portfolio:has(.folio-gallery) {
  --folio-header-top: 101px;
  --folio-ground: #e9e7da;
  --folio-paper: #f5f3e9;
  --folio-ink: #345047;
  --folio-soft: #43594b;
  --folio-copper: #97563e;
  --folio-line: #5f746a48;
  scroll-margin-top: max(0px, calc(var(--folio-header-top) - 45px));
  padding-bottom: 75px;
  background: linear-gradient(154deg, #d5dfd2, var(--folio-ground) 46%, #edf0e5);
  color: var(--folio-ink);
}
.portfolio:has(.folio-gallery) .portfolio-toolbar {
  position: sticky;
  top: var(--folio-header-top);
  z-index: 35;
  padding: 12px 0;
  min-height: 69px;
  background: var(--folio-ground);
  border-color: var(--folio-line);
  font-size: 11px;
  color: var(--folio-ink);
}
.portfolio:has(.folio-gallery) .view-switch { border-color: var(--folio-line); padding: 2px; }
.portfolio:has(.folio-gallery) .view-switch button { min-height: 44px; padding: 8px 16px; font-size: 12px; }
.portfolio:has(.folio-gallery) .view-switch button[aria-pressed="true"] { background: var(--folio-ink); color: var(--folio-paper); }
.folio-gallery { --folio-top: 170px; --folio-height: calc(100svh - var(--folio-top)); --folio-wall-height: calc(var(--folio-height) - 96px); width: 100%; min-width: 0; }
.folio-track, .folio-stage { position: relative; min-width: 0; }
.folio-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 4vw; padding: 26px 0 40px; }
.folio-header h2 { font-family: var(--serif); font-size: clamp(41px, 4.4vw, 72px); font-weight: 400; line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.folio-header h2 em { font-style: italic; }
.folio-choices { display: flex; align-items: stretch; justify-content: flex-end; gap: 23px; min-width: 0; }
.folio-choices button { display: flex; align-items: center; gap: 8px; min-height: 44px; text-align: left; color: var(--folio-ink); font-size: 10px; line-height: 1.5; padding: 7px 0; border-bottom: 1px solid var(--folio-line); }
.folio-choices button > span:first-child { font-family: var(--mono); font-size: 9px; color: var(--folio-copper); }
.folio-choices button[aria-pressed="true"] { border-color: var(--folio-copper); }
.folio-choices button:hover { color: var(--folio-copper); }
.folio-choices button:focus-visible, .folio-card a:focus-visible { outline: 2px solid var(--folio-copper); outline-offset: 5px; }
.folio-wall { display: grid; gap: 90px; position: relative; min-width: 0; }
.folio-card {
  --folio-x: 0px;
  --folio-y: 0px;
  --folio-opacity: 1;
  --folio-life-x: 0px;
  --folio-life-y: 0px;
  --folio-life-opacity: 1;
  --folio-drawing-x: 0px;
  --folio-drawing-y: 0px;
  --folio-relation: 1;
  --folio-print-shadow: #485b4a38;
  --folio-scene-ground: #d9d1be;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: 22px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 28px 0 35px;
  border-top: 1px solid var(--folio-line);
  scroll-margin-top: calc(var(--folio-top) + 22px);
}
.folio-copy { grid-column: 1 / 4; position: relative; z-index: 3; min-width: 0; padding-right: 20px; }
.folio-place { font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--folio-soft); }
.folio-copy h3 { font-family: var(--serif); font-size: clamp(40px, 4vw, 66px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; margin: 15px 0 19px; text-wrap: balance; }
.folio-copy > p { font-size: 13px; line-height: 1.8; max-width: 32ch; }
.folio-copy > .folio-use { font-size: 11px; line-height: 1.85; margin-top: 20px; color: var(--folio-soft); }
.folio-copy .folio-open { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; font-size: 12px; gap: 20px; border-color: var(--folio-line); }
.folio-copy h3 a:hover, .folio-copy .folio-open:hover { color: var(--folio-copper); }
.folio-media { grid-column: 4 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: center; isolation: isolate; min-width: 0; padding: 18px 0; }
.folio-ground { position: absolute; z-index: -1; pointer-events: none; background: linear-gradient(140deg, var(--folio-paper), var(--folio-scene-ground)); }
.folio-gesture { position: absolute; z-index: -1; pointer-events: none; font-family: var(--serif); font-size: clamp(85px, 11vw, 177px); font-weight: 400; letter-spacing: -.035em; line-height: .88; color: #50634d29; }
.folio-relation { position: absolute; z-index: 1; pointer-events: none; font-family: var(--serif); font-size: 22px; color: var(--folio-soft); line-height: 1.1; }
.folio-relation > span { display: block; }
.folio-relation > i { display: block; background: currentColor; opacity: .28; }
.folio-print { width: 100%; min-width: 0; position: relative; z-index: 2; }
.folio-card .card-image { display: block; width: 100%; height: auto; aspect-ratio: var(--folio-photo-ratio); position: relative; padding: 0; background: transparent; box-shadow: 0 19px 32px -16px var(--folio-print-shadow), 0 0 0 1px #3b58400d; overflow: visible; }
.folio-card .card-image > img, .folio-card .card-image:hover > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; transform: none; transition: none; }
.folio-print figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font-family: var(--mono); font-size: 9px; line-height: 1.7; color: var(--folio-soft); }
.folio-print figcaption > span:last-child { text-align: right; }
.folio-card .folio-drawing { display: block; position: relative; z-index: 3; width: 100%; min-width: 0; margin: 0; padding: 7px 7px 5px; background: var(--folio-paper); box-shadow: 0 15px 23px -15px #36594448, 0 0 0 1px #3659440b; transform: none; transition: none; }
.folio-card .folio-drawing > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.folio-card .folio-drawing > span { display: block; border: 0; padding: 5px 0 0; font-family: var(--mono); font-size: 9px; line-height: 1.7; color: var(--folio-soft); }
.folio-card .folio-drawing > .folio-drawing-action { display: flex; align-items: center; justify-content: space-between; padding: 5px 0 0; min-height: 29px; font-family: var(--sans); font-size: 11px; color: var(--folio-ink); }
.folio-drawing i { font-style: normal; font-size: 18px; }
.folio-life { position: relative; z-index: 2; min-width: 0; width: 100%; }
.folio-life-frame { display: block; width: 100%; aspect-ratio: var(--folio-life-ratio); box-shadow: 0 16px 30px -16px var(--folio-print-shadow), 0 0 0 1px #3b58400d; }
.folio-life-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; transform: none; }
.folio-life figcaption { display: block; padding-top: 11px; font-size: 10px; line-height: 1.7; color: var(--folio-soft); }
.folio-life figcaption > strong { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.1; font-weight: 400; margin-bottom: 6px; color: var(--folio-ink); }
.folio-life figcaption > span { display: block; font-family: var(--mono); }

/* The horizontal threshold joins a wide courtyard to the inhabited table. */
.folio-cour-longue .folio-print { grid-column: 1 / 8; grid-row: 1 / 3; }
.folio-cour-longue .folio-drawing { grid-column: 10 / -1; grid-row: 1; align-self: start; }
.folio-cour-longue .folio-life { grid-column: 8 / -1; grid-row: 2; align-self: end; }
.folio-cour-longue .folio-ground { inset: 8% 0 17% 8%; }
.folio-cour-longue .folio-gesture { left: 0; top: 0; }
.folio-cour-longue .folio-relation { left: 3%; bottom: 0; }
.folio-cour-longue .folio-relation > i { width: 150px; height: 1px; margin-top: 13px; }

/* Two portraits climb around the daylight line; the drawing sits at its foot. */
.folio-maison-haute { --folio-scene-ground: #c5d8d2; --folio-print-shadow: #668e8c38; }
.folio-maison-haute .folio-media { align-items: end; }
.folio-maison-haute .folio-print { grid-column: 1 / 5; grid-row: 1; margin-bottom: 0; }
.folio-maison-haute .folio-life { grid-column: 6 / 10; grid-row: 1; align-self: start; }
.folio-maison-haute .folio-drawing { grid-column: 10 / -1; grid-row: 1; align-self: end; margin-bottom: 10px; }
.folio-maison-haute .folio-ground { inset: 0 12% 12% 24%; background: linear-gradient(180deg, var(--folio-paper), var(--folio-scene-ground)); }
.folio-maison-haute .folio-gesture { left: 27%; top: 4%; color: #517c7629; }
.folio-maison-haute .folio-relation { right: 0; top: 16%; width: 16%; font-size: 20px; }
.folio-maison-haute .folio-relation > i { width: 1px; height: 75px; margin: 18px 0 0 7px; }

/* The landscape remains dominant; reading takes place at its open edge. */
.folio-pavillon-pins { --folio-scene-ground: #c9d3bc; }
.folio-pavillon-pins .folio-print { grid-column: 1 / 9; grid-row: 1 / 3; align-self: start; }
.folio-pavillon-pins .folio-life { grid-column: 9 / -1; grid-row: 1; align-self: start; }
.folio-pavillon-pins .folio-drawing { grid-column: 9 / -1; grid-row: 2; align-self: end; width: 79%; justify-self: end; }
.folio-pavillon-pins .folio-ground { inset: 12% 9% 8% 0; background: linear-gradient(90deg, var(--folio-scene-ground), var(--folio-paper)); }
.folio-pavillon-pins .folio-gesture { left: 2%; bottom: 4%; }
.folio-pavillon-pins .folio-relation { left: 5%; bottom: 0; }
.folio-pavillon-pins .folio-relation > i { width: 110px; height: 1px; margin-top: 13px; }

/* The controller grants this composed wall only after all three triptychs fit.
   Parent planes translate in 2D; neither the real print nor its pixels rotate,
   scale, crop or mask. All captions belong to their complete documents. */
@media (min-width: 1001px) and (min-height: 740px) {
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-track { height: 300svh; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-stage { position: sticky; top: var(--folio-top); height: var(--folio-height); min-height: 0; display: grid; grid-template-rows: 68px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-header { padding: 0; gap: 3vw; position: relative; z-index: 25; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-header h2 { font-size: clamp(36px, 3.2vw, 49px); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-wall { display: block; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-card { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px 0; border: 0; scroll-margin-top: calc(var(--folio-top) + 88px); z-index: var(--folio-z, 1); pointer-events: none; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-media { opacity: var(--folio-opacity, 1); transform: translate(var(--folio-x, 0px), var(--folio-y, 0px)); padding: 18px 0; pointer-events: none; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-life { transform: translate(var(--folio-life-x, 0px), var(--folio-life-y, 0px)); opacity: var(--folio-life-opacity, 1); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-drawing { transform: translate(var(--folio-drawing-x, 0px), var(--folio-drawing-y, 0px)); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-ground { opacity: calc(.62 + .38 * var(--folio-relation, 1)); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-card[data-folio-current="true"] { z-index: 10; pointer-events: auto; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-card[data-folio-current="true"] .folio-media { pointer-events: auto; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-card:not([data-folio-current="true"]) .folio-copy { opacity: 0; pointer-events: none; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-copy h3 { font-size: clamp(39px, 3.7vw, 57px); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-copy > .folio-use { font-size: 11px; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-print { max-width: calc((var(--folio-wall-height) - 78px) * var(--folio-ratio)); }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-cour-longue .folio-drawing { width: min(100%, calc(var(--folio-wall-height) * .31)); justify-self: end; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-cour-longue .folio-life { width: min(100%, calc(var(--folio-wall-height) * .61)); justify-self: end; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-maison-haute .folio-life { max-width: calc((var(--folio-wall-height) - 124px) * .66666667); justify-self: center; }
  .folio-gallery[data-folio-enhanced="true"][data-folio-layout="sticky"] .folio-pavillon-pins .folio-drawing { width: min(79%, calc(var(--folio-wall-height) * .38)); }
}

@media (min-width: 681px) and (max-width: 1000px) {
  .folio-header { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .folio-header h2 { font-size: 52px; }
  .folio-choices { justify-content: flex-start; gap: 28px; }
  .folio-choices button { font-size: 11px; }
  .folio-card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
  .folio-copy { grid-column: 1 / 5; grid-row: 1; padding-right: 15px; }
  .folio-copy h3 { font-size: 45px; }
  .folio-copy > p { font-size: 13px; }
  .folio-copy > .folio-use { font-size: 12px; }
  .folio-media { grid-column: 5 / -1; grid-row: 1; gap: 13px; padding-top: 15px; }
  .folio-cour-longue .folio-print { grid-column: 1 / -1; grid-row: 1; }
  .folio-cour-longue .folio-life { grid-column: 3 / -1; grid-row: 2; }
  .folio-cour-longue .folio-drawing { grid-column: 1 / 7; grid-row: 3; }
  .folio-cour-longue .folio-gesture { top: -4px; font-size: 105px; }
  .folio-cour-longue .folio-relation { left: 53%; bottom: 8%; font-size: 22px; width: 44%; }
  .folio-cour-longue .folio-relation > i { width: 80px; }
  .folio-maison-haute .folio-print { grid-column: 1 / 8; grid-row: 1; }
  .folio-maison-haute .folio-life { grid-column: 5 / -1; grid-row: 2; }
  .folio-maison-haute .folio-drawing { grid-column: 1 / 8; grid-row: 3; }
  .folio-maison-haute .folio-relation { top: 7%; right: 0; width: 28%; font-size: 23px; }
  .folio-maison-haute .folio-ground { inset: 0 0 10% 25%; }
  .folio-pavillon-pins .folio-print { grid-column: 1 / -1; grid-row: 1; }
  .folio-pavillon-pins .folio-life { grid-column: 1 / 11; grid-row: 2; }
  .folio-pavillon-pins .folio-drawing { grid-column: 6 / -1; grid-row: 3; width: 100%; }
  .folio-pavillon-pins .folio-relation { left: 0; bottom: 8%; width: 35%; font-size: 23px; }
  .folio-pavillon-pins .folio-gesture { bottom: 9%; font-size: 104px; }
}

@media (max-width: 680px) {
  .portfolio:has(.folio-gallery) { --folio-header-top: 84px; padding-bottom: 55px; scroll-margin-top: max(0px, calc(var(--folio-header-top) - 35px)); }
  .portfolio:has(.folio-gallery) .portfolio-toolbar { gap: 14px; font-size: 9px; }
  .portfolio:has(.folio-gallery) .portfolio-toolbar > span { max-width: 19ch; line-height: 1.5; }
  .portfolio:has(.folio-gallery) .view-switch button { padding: 8px 13px; font-size: 11px; }
  .folio-gallery { --folio-top: 153px; }
  .folio-header { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 25px 0 33px; }
  .folio-header h2 { font-size: clamp(39px, 11.2vw, 60px); }
  .folio-choices { justify-content: space-between; gap: 13px; }
  .folio-choices button { flex: 1; align-items: flex-start; padding: 10px 0; font-size: 10px; gap: 6px; }
  .folio-choices button > span:first-child { padding-top: 1px; font-size: 8px; }
  .folio-wall { gap: 54px; }
  .folio-card { display: flex; flex-direction: column; gap: 29px; padding: 28px 0 0; }
  .folio-copy { width: 100%; padding: 0; }
  .folio-copy h3 { font-size: clamp(39px, 10.2vw, 56px); margin: 12px 0 17px; max-width: 440px; }
  .folio-copy > p { font-size: 14px; max-width: none; }
  .folio-copy > .folio-use { font-size: 12px; line-height: 1.85; margin-top: 16px; }
  .folio-copy .folio-open { margin-top: 15px; font-size: 12px; }
  .folio-place { font-size: 10px; }
  .folio-media { width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 10px; padding: 14px 0 0; }
  .folio-print figcaption { font-size: 9px; line-height: 1.8; padding-top: 10px; }
  .folio-life figcaption { font-size: 10px; padding-top: 12px; }
  .folio-life figcaption > strong { font-size: 24px; }
  .folio-card .folio-drawing { padding: 6px 6px 4px; }
  .folio-card .folio-drawing > span { font-size: 9px; }
  .folio-card .folio-drawing > .folio-drawing-action { font-size: 12px; min-height: 33px; }
  .folio-gesture { font-size: clamp(76px, 25vw, 135px); }
  .folio-relation { position: relative; grid-row: 4; font-size: 24px; align-self: center; }
  .folio-relation > i { display: none; }
  .folio-cour-longue .folio-print { grid-column: 1 / 12; grid-row: 1; }
  .folio-cour-longue .folio-life { grid-column: 2 / -1; grid-row: 2; }
  .folio-cour-longue .folio-drawing { grid-column: 1 / 9; grid-row: 3; }
  .folio-cour-longue .folio-relation { grid-column: 3 / -1; left: auto; bottom: auto; text-align: right; }
  .folio-cour-longue .folio-gesture { left: 0; top: -4px; }
  .folio-cour-longue .folio-ground { inset: 5% 0 11% 12%; }
  .folio-maison-haute .folio-print { grid-column: 1 / 10; grid-row: 1; }
  .folio-maison-haute .folio-life { grid-column: 4 / -1; grid-row: 2; }
  .folio-maison-haute .folio-drawing { grid-column: 1 / 10; grid-row: 3; margin: 0; }
  .folio-maison-haute .folio-relation { grid-column: 4 / -1; right: auto; top: auto; width: auto; font-size: 24px; }
  .folio-maison-haute .folio-gesture { left: 18%; top: 3%; }
  .folio-maison-haute .folio-ground { inset: 1% 0 9% 28%; }
  .folio-pavillon-pins .folio-print { grid-column: 1 / -1; grid-row: 1; }
  .folio-pavillon-pins .folio-life { grid-column: 1 / 12; grid-row: 2; }
  .folio-pavillon-pins .folio-drawing { grid-column: 5 / -1; grid-row: 3; width: 100%; }
  .folio-pavillon-pins .folio-relation { grid-column: 1 / 11; left: auto; bottom: auto; text-align: left; }
  .folio-pavillon-pins .folio-gesture { left: 0; bottom: 6%; }
  .folio-pavillon-pins .folio-ground { inset: 3% 12% 8% 0; }
}
@media (min-width: 681px) and (max-width: 1000px) and (min-height: 740px) {
  .folio-copy { position: sticky; top: calc(var(--folio-top) + 22px); align-self: start; }
}
@media (max-width: 360px) {
  .folio-choices { gap: 10px; }
  .folio-choices button { font-size: 10px; gap: 5px; }
  .folio-header h2 { font-size: 36px; }
  .folio-copy h3 { font-size: 37px; }
  .folio-copy > .folio-use { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-gallery .folio-media, .folio-gallery .folio-life, .folio-gallery .folio-drawing { transform: none !important; }
  .folio-gallery .folio-life { opacity: 1 !important; }
}

/* A newly authored drawing rejoins its current photograph. The former
   inhabited view stays absent, and this pair remains in the complete flow. */
.folio-card.folio-adapted-art .folio-print { grid-column: 1 / -1; grid-row: 1; }
.folio-card.folio-adapted-art .folio-drawing { grid-column: 7 / -1; grid-row: 2; align-self: start; }
.folio-card.folio-adapted-art .folio-drawing > img { aspect-ratio: auto; }
.folio-card.folio-adapted-art .folio-ground { inset: 6% 0 8% 8%; }
@media (max-width: 680px) {
  .folio-card.folio-adapted-art .folio-drawing { grid-column: 3 / -1; }
}