:root { --muted: #665f58; }
.gallery-note { font-size: .85rem; color: var(--muted); margin: 0 0 1.25rem; }
.gallery figure a { display: block; cursor: zoom-in; }
.gallery figure:not(:first-child) img { aspect-ratio: 3 / 2; object-fit: cover; }
.gallery .project-board img { object-fit: contain !important; background: var(--paper); }
a:focus-visible, button:focus-visible { outline: 2px solid #7f5d38; outline-offset: 4px; }
.viewer { width: min(1100px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: clamp(.75rem, 3vw, 1.5rem); color: var(--ink); background: var(--paper); border: 0; }
.viewer::backdrop { background: rgb(26 23 20 / 86%); }
.viewer img { display: block; width: 100%; height: min(70dvh, 730px); object-fit: contain; }
.viewer-tools { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.viewer-bottom { margin-top: .75rem; text-align: center; }
.viewer-bottom p { margin: 0; font-size: .85rem; }
.viewer button { color: inherit; background: transparent; border: 1px solid #9e9388; font: inherit; min-height: 44px; min-width: 44px; padding: .4rem .75rem; cursor: pointer; }
body:has(.viewer[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.concept { padding: clamp(1.25rem, 4vw, 3.5rem); margin: 0 0 2.75rem; background: var(--paper); border-top: 1px solid #c9c0b6; }
.concept-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }
.concept h3, .concept h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; margin: .25rem 0; }
.concept h3 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 1.05; }
.concept h4 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.concept p { line-height: 1.65; margin: 0; }
.concept-head > p, .concept-track > p:not(.eyebrow) { font-size: .95rem; max-width: 48ch; }
.concept-references { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.5rem); margin-bottom: 2rem; }
.concept-references figure { margin: 0; }
.concept-references img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.concept-references figcaption { margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.concept-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.concept-track { background: #f0e3df; padding: clamp(1rem, 3vw, 2rem); }
.concept-selected { background: #e0e6e7; }
.concept-palette { display: flex; margin: 1.2rem 0; }
.concept-palette span { flex: 1; height: 2rem; background: var(--sample); }
.concept-track .link { display: inline-block; margin-top: 1.25rem; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 680px) { .concept-head, .concept-tracks { grid-template-columns: 1fr; } }

.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-neuilly { border-top: 1px solid #d6d0c8; }
@media (max-width: 540px) { .portfolio-grid { grid-template-columns: 1fr; } }


.neuilly-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: start; }
.neuilly-layout figure, .neuilly-images figure { margin: 0; }
.neuilly-layout figure a { display: block; cursor: zoom-in; }
.neuilly-layout img, .neuilly-images img { display: block; width: 100%; height: auto; }
.neuilly-layout figcaption, .neuilly-images figcaption { margin-top: .65rem; color: var(--muted); font-size: .8rem; }
.neuilly-notes h3 { font: 400 clamp(1.6rem, 3vw, 2.4rem) 'Playfair Display', Georgia, serif; margin: .5rem 0 1rem; }
.neuilly-notes p:not(.eyebrow) { font-size: .9rem; line-height: 1.75; }
.neuilly-selection { margin: 2.5rem 0 1rem; font-weight: 500; }
.neuilly-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); }
.neuilly-images img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) { .neuilly-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .neuilly-images { grid-template-columns: 1fr; } }

.gallery .plan-original { display: inline-block; margin: 0 0 1.5rem; cursor: pointer; font-size: .8rem; text-decoration: underline; text-underline-offset: .25em; }
#puteaux-plan-rdc figcaption { margin-bottom: .4rem; }
.gallery #puteaux-plan-rdc img { aspect-ratio: auto; height: auto; }
.gallery #puteaux-plan-rdc .plan-original { margin-bottom: .75rem; }
.viewer img[src$="/puteaux-plan-rdc-cadre.webp"],
.viewer img[src$="/elase-puteaux-elevations-cadrees.webp"] { width: auto; height: auto; max-width: 100%; max-height: min(70dvh, 730px); margin: .5rem auto 0; }

.portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-grid .torcy-cover { object-fit: contain; background: #fff; padding: .65rem; }
.project-torcy { border-top: 1px solid #d6d0c8; }
.torcy-notes, .torcy-drawings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.torcy-notes h3 { font: 400 clamp(1.3rem, 2.5vw, 2rem) 'Playfair Display', Georgia, serif; margin: 0; }
.torcy-notes p { font-size: .9rem; line-height: 1.7; max-width: 47ch; }
.torcy-drawings-title { margin: 2rem 0 1rem; font-weight: 500; }
.torcy-drawings figure { margin: 0; }
.torcy-drawings figure:first-child { grid-column: 1 / -1; }
.torcy-drawings a { display: block; cursor: zoom-in; }
.torcy-drawings img { display: block; width: 100%; height: auto; }
.torcy-drawings figcaption { color: var(--muted); font-size: .8rem; margin-top: .65rem; }
@media (max-width: 700px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .portfolio-grid, .torcy-notes, .torcy-drawings { grid-template-columns: 1fr; } }

nav { text-transform: uppercase; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
.cover { padding-top: clamp(2rem, 5vw, 5rem); }
.cover-heading { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.cover h1, .page-heading h1, .project-intro h1 {
  font: 400 clamp(2.5rem, 6vw, 5rem)/1.08 'Playfair Display', Georgia, serif;
  margin: .3em 0;
}
.cover-heading > p:not(.eyebrow), .page-heading > p:not(.eyebrow) { line-height: 1.7; }
.cover-images { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(.5rem, 2vw, 1.25rem); }
.cover-images img { display: block; width: 100%; height: clamp(170px, 29vw, 390px); object-fit: cover; }
.cover-images a:nth-child(2) img { object-position: center 73%; }
.cover-images a:last-child img { background: #fff; object-fit: contain; padding: .6rem; }
.page-action { display: inline-block; background: var(--ink); color: var(--paper); border: 0; padding: .85rem 1.15rem; font: inherit; font-size: .85rem; cursor: pointer; }
.cover .page-action { margin-top: .65rem; }
.page-heading { margin-bottom: 2rem; }
.project-back { display: inline-block; margin-bottom: 1.5rem; font-size: .85rem; text-decoration: underline; text-underline-offset: .25em; }
.contact-page { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(1rem, 6vw, 6rem); max-width: 1250px; margin: auto; }
.contact-page .direct-email { text-decoration: underline; text-underline-offset: .25em; overflow-wrap: anywhere; }
.contact-form { display: grid; gap: .65rem; background: var(--paper); padding: clamp(1rem, 4vw, 2.5rem); }
.contact-form label { font-size: .9rem; }
.contact-form :is(input, select, textarea) { width: 100%; padding: .7rem; border: 1px solid #9e9388; background: var(--paper); color: var(--ink); font: inherit; margin-bottom: .6rem; }
.contact-form .page-action { justify-self: start; }
.contact-form p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 650px) {
  .contact-page { grid-template-columns: 1fr; }
  .cover-images { grid-template-columns: 1fr 1fr; }
  .cover-images a:first-child { grid-column: 1 / -1; }
  .cover-images a:first-child img { height: clamp(210px, 56vw, 330px); }
}

.portfolio-grid .torcy-cover, .cover-images a:last-child img { padding: 0; }
.torcy-axonometry { max-width: 1050px; margin: 0 auto 2.5rem; }
.torcy-axonometry a { display: block; cursor: zoom-in; }
.torcy-axonometry img { display: block; width: 100%; height: auto; }
.torcy-axonometry figcaption { margin-top: .65rem; color: var(--muted); font-size: .8rem; }

.torcy-views { padding: 0; margin: 0 0 2.5rem; }
.torcy-views > h2 { margin: 0 0 1rem; font-weight: 500; }
.torcy-views-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); }
.torcy-views-grid figure { margin: 0; }
.torcy-views-grid img { display: block; width: 100%; height: auto; }
.torcy-views-grid figcaption { margin-top: .65rem; color: var(--muted); font-size: .8rem; }
.torcy-drawings.slideshow-ready { max-width: 1050px; margin: 0 auto; }
.torcy-drawings.slideshow-ready figure:not(:first-child) { display: none; }
@media (max-width: 650px) { .torcy-views-grid { grid-template-columns: 1fr; } }

.portfolio-grid .penina-cover { object-fit: contain; background: #fff; }
@media (min-width: 701px) {
  .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.penina-label { margin: 2.5rem 0 1rem; }
.penina-level { padding: 2rem 0; border-top: 1px solid #d6d0c8; }
.penina-level h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: .2rem 0 .6rem; }
.penina-level p { max-width: 70ch; line-height: 1.7; }
.penina-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.penina-views figure { margin: 0; }
.penina-views a { display: block; cursor: zoom-in; }
.penina-views img { display: block; width: 100%; height: auto; background: #fff; }
.penina-views figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 600px) { .penina-views { grid-template-columns: 1fr; } }

.cover-images a { display: block; min-width: 0; }
.cover-images a img, .portfolio-grid a img { filter: saturate(.78); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
:is(.cover-images, .portfolio-grid) a:is(:focus-visible, :active) img { filter: none; opacity: 1; }
@media (hover: hover) {
  :is(.cover-images, .portfolio-grid) a:hover img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-images a img, .portfolio-grid a img { transition: none; }
}

.contact-form label span { color: var(--muted); font-size: .8em; }

/* Shared page column and centered masthead. */
:root { --page-width: 58rem; --page-gutter: clamp(1rem, 10vw, 9rem); }
body > :is(.home-header, main, footer) {
  width: min(var(--page-width), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
body > main > section, body > footer { padding-inline: 0; }
.home-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem 1rem;
  padding: 2rem 0 0;
}
.home-header .brand { grid-column: 2; grid-row: 1; text-align: center; }
.home-header nav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
  gap: clamp(1.25rem, 5vw, 4rem);
  border-block: 1px solid #dedbd7;
  padding: 1rem .25rem;
}
.piano-control {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  position: relative;
}
.piano-title { font-size: .8rem; color: var(--muted); text-align: right; }
.cover-images img { height: clamp(140px, 23vw, 285px); }
@media (max-width: 700px) {
  :root { --page-gutter: clamp(1rem, 4vw, 2rem); }
  .home-header { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding-top: .5rem; }
  .home-header .piano-control { grid-column: 1; grid-row: 1; justify-self: end; }
  .home-header .brand { grid-column: 1; grid-row: 2; }
  .home-header nav { grid-row: 3; }
}
#piano-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: .4rem;
  border: 1px solid #c8beb1;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
#piano-toggle:hover { background: #eeeae4; }
#piano-status { position: absolute; top: 100%; right: 0; width: max-content; margin: .25rem 0 0; background: var(--paper); color: var(--muted); font-size: .8rem; }
#piano-status:empty { display: none; }
.piano-credit { color: var(--muted); font-size: inherit; }

.piano-artist { display: block; font-size: .72rem; }

.project-review { border-top: 1px solid #d6d0c8; }
.project-review h2 { font-weight: 500; }
.project-review figure { margin: 1.2rem 0 0; }
.project-review blockquote { margin: 0 0 .8rem; max-width: 42ch; font: 400 clamp(1.35rem, 3vw, 2rem)/1.45 'Playfair Display', Georgia, serif; }
.project-review figcaption { color: var(--muted); font-size: .85rem; }

.project-development { padding: 2.5rem 0 0; }
.project-development > h2 { margin: 0 0 1rem; font-weight: 500; }
.project-development .concept h2 { font: 400 clamp(2rem, 4vw, 3.5rem)/1.1 'Playfair Display', Georgia, serif; margin: .25rem 0; }

:is(.portfolio-grid, .penina-views) img[src$="/penina-rdc-final.webp"] { background: transparent; }

.torcy-drawings-section { margin-bottom: 2.5rem; }

.penina-videos { grid-template-columns: repeat(2, minmax(0, 340px)); }
.penina-videos video { display: block; width: 100%; height: auto; background: #151412; }
@media (max-width: 600px) { .penina-videos { grid-template-columns: minmax(0, 340px); } }

.moulures-cover { grid-column: 1 / -1; }