/* Galerie : une grande ouverture, un diptyque décalé, puis deux compositions larges. */
.projects-build {
  --ink: #f5f4ee; --muted: #b5c0d1; --line: #ffffff30;
  background: #0b0f19; color: var(--ink); padding-top: 220px; padding-bottom: 230px;
}
.projects-build::before, .projects-build::after { content: ""; position: absolute; left: 0; right: 0; height: 140px; pointer-events: none; z-index: 0; }
.projects-build::before { top: 0; background: linear-gradient(#f5f4ee, #0b0f19); }
.projects-build::after { bottom: 0; background: linear-gradient(#0b0f19, #f5f4ee); }
.projects-build .section-rule { background: #007bff; }
.projects-build .section-label { color: #d8f36a; }
.projects-build .section-intro h2 { font-size: clamp(48px, 6vw, 88px); line-height: 1; }
.projects-build .section-intro h2 em { color: #d8f36a; }
.projects-build .intro-columns > p { color: var(--muted); }
.projects-build .project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 120px 42px; margin-top: 100px; perspective: 1400px; }
.projects-build .project-card {
  position: relative; min-width: 0; grid-column: span 6;
  --card-x: 0px; --card-y: 0px; --card-turn: 0deg; --card-scale: 1; --card-info: 0px; --card-line: 1; --card-guide: 0; --card-part: 0px; --card-part-turn: 0deg;
}
.projects-build .project-card:nth-child(1), .projects-build .project-card:nth-child(4), .projects-build .project-card:nth-child(5) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: center; }
.projects-build .project-card:nth-child(2) { grid-column: 1 / 7; }
.projects-build .project-card:nth-child(3) { grid-column: 8 / -1; margin-top: 160px; }
.projects-build .project-card:nth-child(4) { grid-template-columns: 1fr 1.55fr; }
.projects-build .project-card:nth-child(4) .project-art { grid-column: 2; grid-row: 1; }
.projects-build .project-card:nth-child(4) .project-info { grid-column: 1; grid-row: 1; }
.projects-build .project-card:nth-child(5) { grid-template-columns: 1.3fr 1fr; }
.projects-build .project-card::after {
  content: ""; position: absolute; inset: -14px; border: 1px solid #63aaff; pointer-events: none;
  opacity: var(--card-guide); clip-path: inset(0 calc((1 - var(--card-line)) * 100%) 0 0);
  background: linear-gradient(#d8f36a 0 0) left top / 6px 6px no-repeat, linear-gradient(#d8f36a 0 0) right bottom / 6px 6px no-repeat;
}
.project-sequence { position: absolute; top: -32px; left: 0; font: 11px/1.5 "Courier New", monospace; letter-spacing: 2px; color: #aebbd1; pointer-events: none; }
.projects-build .project-art {
  --ink: #0b0f19; --paper: #f5f4ee;
  height: 420px; min-height: 0; border-radius: 2px; outline: 1px solid #ffffff20;
  transform-origin: center; transform: translate(var(--card-x), var(--card-y)) rotate(var(--card-turn)) scale(var(--card-scale));
  transition: box-shadow .25s;
}
.projects-build .project-card:nth-child(1) .project-art,
.projects-build .project-card:nth-child(4) .project-art,
.projects-build .project-card:nth-child(5) .project-art { height: 500px; }
.projects-build .project-art:hover { box-shadow: 0 0 0 3px #d8f36a; }
.projects-build :is(.painting-frame, .bike, .layout-study, .fasting-ring, .phone-study) { translate: calc(var(--card-part) * .7) var(--card-part); rotate: var(--card-part-turn); }
.projects-build .project-art:focus-visible { outline-color: #d8f36a; }
.projects-build .project-info { position: relative; padding: 0; transform: translateY(var(--card-info)); }
.projects-build .project-info h3 { font-size: clamp(27px, 3.1vw, 44px); line-height: 1.12; margin-bottom: 20px; }
.projects-build .project-info p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.projects-build .project-tags { transform: translateX(calc(var(--card-info) * .4)); }
.projects-build .project-tags > span { border-color: #5b687b; color: #d3dce9; font-size: 11px; }
.projects-build .project-visit { color: #d8f36a; border-color: #81954b; }
.projects-build .project-visit:hover { color: #f5f4ee; border-color: #f5f4ee; }
.projects-build .project-card:nth-child(2) .project-info,
.projects-build .project-card:nth-child(3) .project-info { padding-top: 28px; }
.projects-build .project-apps { background: transparent; border: 0; overflow: visible; border-radius: 0; }
.projects-build .project-apps .project-info { padding: 0; }
.projects-build .project-apps .apps-overline { color: #d8f36a; }
.projects-build .project-note { border-color: #ffffff30; margin-top: 100px; padding-top: 36px; }
.projects-build .project-note strong { color: #f5f4ee; }
.projects-build .project-note .text-link { color: #d8f36a; }
.projects-build .project-card:first-child .martine-title { font-size: clamp(64px, 6vw, 90px); }
.projects-build .project-card:first-child .painting-frame { width: 220px; height: 260px; right: 35px; bottom: 50px; }
.projects-build .fasting-title { font-size: clamp(68px, 6vw, 88px); }
.projects-build .fasting-ring { width: 230px; height: 230px; right: 32px; bottom: 45px; }
.projects-build .project-apps .android-art-title { font-size: clamp(46px, 5vw, 66px); }
.projects-build .project-apps .phone-study { width: 150px; height: 250px; right: 40px; bottom: 40px; }
@media (max-width: 1100px) {
  .projects-build .project-grid { gap: 90px 28px; }
  .projects-build .project-card:nth-child(1), .projects-build .project-card:nth-child(4), .projects-build .project-card:nth-child(5) { gap: 30px; }
  .projects-build .project-card:first-child .painting-frame { width: 160px; height: 190px; right: 20px; }
  .projects-build .fasting-ring { width: 180px; height: 180px; }
  .projects-build .project-info h3 { font-size: 30px; }
  .projects-build .project-card:nth-child(3) { grid-column: 7 / -1; margin-top: 100px; }
}
@media (max-width: 800px) {
  .projects-build { padding-block: 170px; }
  .projects-build .project-grid { display: flex; flex-direction: column; gap: 90px; margin-top: 75px; }
  .projects-build .project-card:nth-child(n) { display: block; margin-top: 0; }
  .projects-build .project-card:nth-child(n) .project-info { padding-top: 28px; }
  .projects-build .project-card:nth-child(n) .project-art { height: 420px; }
  .projects-build .project-card:first-child .painting-frame { width: 210px; height: 250px; }
}
@media (max-width: 620px) {
  .projects-build { padding-block: 140px; }
  .projects-build::before, .projects-build::after { height: 85px; }
  .projects-build .section-intro h2 { font-size: clamp(42px, 11vw, 62px); }
  .projects-build .project-grid { gap: 80px; margin-top: 65px; }
  .projects-build .project-card:nth-child(n) .project-art { height: 355px; }
  .projects-build .project-card:first-child .martine-title { font-size: 56px; }
  .projects-build .project-card:first-child .painting-frame { width: 140px; height: 165px; right: 20px; bottom: 38px; }
  .projects-build .project-info h3 { font-size: 30px; }
  .projects-build .project-info p { font-size: 15px; }
  .projects-build .fasting-title { font-size: 66px; }
  .projects-build .fasting-ring { width: 165px; height: 165px; right: 20px; bottom: 35px; }
  .projects-build .project-apps .android-art-title { font-size: 40px; }
  .projects-build .project-apps .phone-study { width: 100px; height: 168px; right: 24px; bottom: 26px; }
  .projects-build .project-note { margin-top: 70px; }
}
:is(.motion-paused .projects-build, .projects-build:focus-within) :is(.project-art, .project-info, .project-tags) { transform: none; }
:is(.motion-paused .projects-build, .projects-build:focus-within) .project-card::after { opacity: 0; }
:is(.motion-paused .projects-build, .projects-build:focus-within) :is(.painting-frame, .bike, .layout-study, .fasting-ring, .phone-study) { translate: none; rotate: none; }
@media (prefers-reduced-motion: reduce) {
  .projects-build :is(.project-art, .project-info, .project-tags) { transform: none; }
  .projects-build .project-card::after { display: none; }
  .projects-build :is(.painting-frame, .bike, .layout-study, .fasting-ring, .phone-study) { translate: none; rotate: none; }
}