/* A compact editorial gallery with consistent preview frames. */
.connected-site.projects-page .projects-intro { width: 100%; max-width: none; padding: 72px var(--gutter) 56px; margin: 0; }
.projects-page .projects-intro h1 { font-size: clamp(2.6rem,5vw,5.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -.045em; }
.projects-page .projects-intro .section-tag { margin-bottom: 24px; }
.projects-page .projects-intro > p:last-child { margin: 28px 0 0; max-width: 58ch; line-height: 1.85; font-size: 1rem; }
.connected-site.projects-page .project-gallery { width: 100%; max-width: none; margin: 0; padding: 0 var(--gutter) 80px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 32px; }
.projects-page .project-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.projects-page .project-card::before { display: none; }
.projects-page .project-visual { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); border-radius: 3px; }
.projects-page .project-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 24px 0 0; min-height: 0; }
.projects-page .project-meta > span { font-size: .6rem; line-height: 1.7; }
.projects-page .project-meta h2 { font-size: clamp(1.7rem,2.7vw,2.7rem); font-weight: 500; line-height: 1.15; margin: 14px 0; letter-spacing: -.035em; }
.projects-page .project-meta > p { font-size: .92rem; line-height: 1.8; max-width: 52ch; }
.projects-page .project-meta a[data-resource-type] { width: auto; height: auto; min-height: 44px; display: inline-flex; flex-direction: row; gap: 10px; padding: 10px 0; margin-top: 18px; border: 0; border-bottom: 1px solid var(--plum); background: transparent; color: var(--plum); }
.projects-page .project-meta a[data-resource-type] .resource-action { display: inline; font: 500 .75rem var(--sans); }
.projects-page .project-context { width: 100%; margin-top: 24px; }
.projects-page .project-context summary { padding-block: 16px; }
.projects-page .project-live-frame { display: block!important; opacity: 0; }
.projects-page .preview-ready .project-live-frame { opacity: 1; }
.projects-page .project-card[data-live-preview] .project-visual > i { display: block; position: absolute; bottom: 14px; right: 14px; max-width: calc(100% - 28px); font-size: .6rem; }
.projects-page .project-card:not(.preview-ready) .project-visual > b { opacity: 1; }
.projects-page .project-visual::after { display: none; }
.projects-page .project-slides img { object-fit: contain; transform: none; }
.projects-page .research-section { padding-block: 72px; }
.projects-page .research-grid { gap: 0; }
.projects-page .research-card { padding: 32px; }
.projects-page .research-card h3 { font-size: 1.4rem; line-height: 1.35; }
.projects-page main > .project-note { width: auto!important; margin: 0 var(--gutter) 80px!important; padding: 48px!important; background: #ded4d8!important; color: var(--ink)!important; border: 0!important; box-shadow: none!important; }
@media(max-width:760px) {
 .connected-site.projects-page .projects-intro { padding-block: 52px 40px; }
 .connected-site.projects-page .project-gallery { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
 .projects-page .research-card { padding: 26px; }
 .projects-page main > .project-note { padding: 28px!important; margin-bottom: 64px!important; }
}
.projects-page .project-card:not(.preview-ready) .project-live-frame { opacity: 0!important; }
.projects-page main > .project-note :is(h2,p) { color: var(--ink); }
.projects-page main > .project-note :is(em,.section-tag) { color: var(--plum); }

/* Contrast study: each project gets a quiet stage, with copy on the page below. */
.projects-page .project-card { --project-stage: #e3ded8; --project-stage-ink: #493345; }
.projects-page #qafila { --project-stage: #d9c7a7; }
.projects-page #auraos { --project-stage: #29232d; --project-stage-ink: #d8c4d3; }
.projects-page #medicore { --project-stage: #cbded9; }
.projects-page #clearpath-ai { --project-stage: #344954; --project-stage-ink: #dce9eb; }
.projects-page #aqrasfi { --project-stage: #d7c6cf; }
.projects-page #rera { --project-stage: #d8dad0; }
.projects-page .project-card .project-visual {
  background: var(--project-stage); color: var(--project-stage-ink);
  border: 0; border-radius: 4px; padding: 28px;
}
.projects-page .project-preview-window,
.projects-page .project-slides {
  position: absolute; inset: 36px 28px; overflow: hidden;
  border-radius: 3px; background: #f4eee6;
  box-shadow: 0 8px 24px #1710191a;
}
.projects-page .project-preview-window { z-index: 2; }
.projects-page .project-slides img { object-fit: contain; background: #f4eee6; }
.projects-page .project-visual > span,
.projects-page .project-card[data-live-preview] .project-visual > span {
  position: absolute; top: 9px; left: 28px; padding: 0; border: 0;
  color: var(--project-stage-ink); background: transparent;
  font-size: .52rem; line-height: 1.5; backdrop-filter: none;
}
.projects-page .project-card .project-visual > i {
  position: absolute;
  bottom: 10px; right: 28px; padding: 0; border: 0;
  background: transparent; color: var(--project-stage-ink); backdrop-filter: none;
}
.projects-page .project-card .project-visual > b { color: var(--project-stage-ink); }
.projects-page .project-card:not(.preview-ready) .project-preview-window { opacity: 0; }
.projects-page .project-card.preview-ready .project-preview-window { opacity: 1; }
.projects-page #maisan-sale { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.projects-page #maisan-sale .project-meta { padding-top: 12px; }
.projects-page #maisan-sale .project-visual { aspect-ratio: 1.35; }
@media(max-width:760px) {
 .projects-page #maisan-sale { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
 .projects-page #maisan-sale .project-meta { padding-top: 0; }
 .projects-page #maisan-sale .project-visual { aspect-ratio: 1.6; }
 .projects-page .project-preview-window, .projects-page .project-slides { inset: 32px 18px; }
 .projects-page .project-visual > span,
 .projects-page .project-card[data-live-preview] .project-visual > span { left: 18px; }
 .projects-page .project-card .project-visual > i { right: 18px; font-size: .5rem; }
}

/* Defined preview edges against the contrasting project stages. */
.projects-page .project-card .project-visual {
  border: 1px solid color-mix(in srgb, var(--project-stage-ink) 48%, transparent);
  box-shadow: 0 5px 16px #30232d0a;
}
.projects-page .project-preview-window,
.projects-page .project-slides { border: 1px solid #60435b30; }
.projects-page .project-card:hover .project-visual,
.projects-page .project-card:focus-within .project-visual {
  border-color: var(--project-stage-ink);
}

/* The same quiet type and surface language as Solutions and the Research Archive. */
.connected-site.projects-page .projects-intro,
.projects-page main > .project-note { position: relative; isolation: isolate; overflow: hidden; }
.connected-site.projects-page .projects-intro {
  min-height: min(600px, calc(100svh - 66px));
  padding: clamp(82px, 7vw, 112px) var(--gutter) clamp(100px, 9vw, 150px);
  background: #f1ece5; border-bottom: 1px solid #60435b30;
}
.projects-page .projects-intro > .projects-intro-wordmark,
.projects-page .project-note > .project-note-wordmark {
  position: absolute; z-index: 0; display: block; width: max-content;
  font: 700 clamp(11rem, 25vw, 31rem)/.8 var(--display);
  letter-spacing: -.09em; pointer-events: none; user-select: none;
}
.projects-page .projects-intro > .projects-intro-wordmark {
  right: -.045em; bottom: -.13em; color: #60435b; opacity: .055;
}
.projects-page .projects-intro > :not(.projects-intro-wordmark),
.projects-page .project-note > :not(.project-note-wordmark) { position: relative; z-index: 1; }
.projects-page .projects-intro .section-tag { margin-bottom: 29px; color: #60435b; }
.projects-page .projects-intro h1 {
  max-width: 1050px; font-size: clamp(3.6rem, 5.55vw, 6.1rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -.06em;
}
.projects-page .projects-intro > p:last-child {
  max-width: 56ch; margin-top: 36px; color: #4f464a;
  font-size: 1.08rem; line-height: 1.75;
}
.connected-site.projects-page .project-gallery {
  position: relative; isolation: isolate; counter-reset: project;
  padding-top: clamp(48px, 5vw, 78px); padding-bottom: clamp(88px, 8vw, 128px);
  gap: clamp(55px, 6vw, 95px) clamp(30px, 3vw, 48px);
  background: #f4eee6;
}
.projects-page .project-card { counter-increment: project; min-width: 0; }
.projects-page .project-card .project-visual {
  border: 1px solid #60435b44; border-radius: 0;
  box-shadow: none; transition: border-color .25s ease, transform .35s ease;
}
.projects-page .project-card:hover .project-visual,
.projects-page .project-card:focus-within .project-visual {
  transform: translateY(-3px); border-color: #60435b;
}
.projects-page .project-preview-window,
.projects-page .project-slides { border-radius: 0; box-shadow: 0 16px 35px #17101920; }
.projects-page .project-meta { position: relative; padding-top: 24px; }
.projects-page .project-meta::before {
  content: '0' counter(project) ' / SELECTED WORK';
  display: block; width: 100%; padding-bottom: 16px; margin-bottom: 21px;
  border-bottom: 1px solid #60435b45; color: #60435b;
  font: 600 .68rem/1.4 var(--mono); letter-spacing: .045em;
}
.projects-page .project-meta > span:first-of-type {
  color: #66535f; font: 600 .7rem/1.5 var(--mono); letter-spacing: .025em;
}
.projects-page .project-meta h2 {
  margin: 12px 0 17px; color: #211d1b;
  font-size: clamp(2.15rem, 3vw, 3.25rem); font-weight: 600;
  line-height: 1.08; letter-spacing: -.05em;
}
.projects-page .project-meta > p { max-width: 54ch; color: #51494d; font-size: 1rem; line-height: 1.7; }
.projects-page .project-meta a[data-resource-type] { margin-top: 24px; font-weight: 600; }
.projects-page .project-context { margin-top: 28px; border-top: 1px solid #60435b38; }
.projects-page .project-context summary { min-height: 50px; font-size: .71rem; letter-spacing: .04em; }
.projects-page #maisan-sale {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
  gap: clamp(34px, 4vw, 70px); padding-bottom: clamp(55px, 6vw, 90px);
  border-bottom: 1px solid #60435b45;
}
.projects-page #maisan-sale .project-meta { padding-top: 0; }
.projects-page #maisan-sale .project-visual { aspect-ratio: 1.42; }
.projects-page #maisan-sale .project-meta h2 { font-size: clamp(2.7rem, 4.2vw, 4.5rem); }
.projects-page #qafila { --project-stage: #d7cbb7; }
.projects-page #qafila .project-visual {
  display: block; background: linear-gradient(145deg, #d6c8b4, #c9bba8);
  text-align: left;
}
.projects-page #qafila .project-visual > b {
  position: absolute; right: -.05em; top: .08em;
  color: #60435b; opacity: .08;
  font: 700 clamp(11rem, 22vw, 23rem)/.85 var(--display);
  letter-spacing: -.1em; pointer-events: none;
}
.projects-page #qafila .project-static-title {
  position: absolute; z-index: 1; left: 7%; bottom: 17%;
  color: #392d36; font: 600 clamp(3.1rem, 6.5vw, 6.5rem)/1 var(--display);
  letter-spacing: -.065em;
}
.projects-page #medicore { --project-stage: #d7e2dc; }
.projects-page #aqrasfi { --project-stage: #e3d7df; }
.projects-page #rera { --project-stage: #dadfd8; }
.projects-page main > .project-note {
  margin: 0!important; padding: clamp(82px, 8vw, 128px) var(--gutter)!important;
  background: #dfd5d9!important; border: 0!important;
}
.projects-page .project-note::before,
.projects-page .project-note::after { display: none; }
.projects-page .project-note > .project-note-wordmark {
  right: -.04em; bottom: -.12em; color: #60435b; opacity: .07;
}
.projects-page .project-note h2 { max-width: 980px; font-weight: 600; line-height: 1.04; letter-spacing: -.05em; }
.projects-page .project-note > p:last-child { color: #51494d; font-size: 1.05rem; }

@media (max-width: 760px) {
  .connected-site.projects-page .projects-intro {
    min-height: 0; padding: 78px var(--gutter) 102px;
  }
  .projects-page .projects-intro h1 { font-size: clamp(3rem, 8vw, 4.4rem); }
  .projects-page .projects-intro > .projects-intro-wordmark { font-size: 27vw; bottom: -.09em; }
  .connected-site.projects-page .project-gallery { padding-top: 50px; gap: 64px; }
  .projects-page #maisan-sale { grid-template-columns: 1fr; gap: 27px; padding-bottom: 60px; }
  .projects-page #maisan-sale .project-visual { aspect-ratio: 1.6; }
  .projects-page .project-meta { padding-top: 0; }
  .projects-page main > .project-note { padding: 78px var(--gutter)!important; }
}
@media (max-width: 520px) {
  .connected-site.projects-page .projects-intro { padding: 76px 24px 88px; }
  .projects-page .projects-intro h1 { font-size: clamp(2.65rem, 10vw, 3.7rem); }
  .projects-page .projects-intro > p:last-child { font-size: 1rem; }
  .connected-site.projects-page .project-gallery { gap: 56px; padding-bottom: 82px; }
  .projects-page .project-meta h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .projects-page .project-meta > p { font-size: .96rem; }
  .projects-page #maisan-sale .project-meta h2 { font-size: clamp(2.3rem, 10vw, 3rem); }
  .projects-page #qafila .project-static-title { font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .projects-page main > .project-note { padding: 72px 24px!important; }
}

/* ===== Inverted colours for the moon/sun switch (generated from the rules above — keep at end of file) ===== */
html[data-theme="inverted"] .projects-page .project-card { background: transparent; border: 0; }
html[data-theme="inverted"] .projects-page .project-visual { border: 1px solid var(--rule); }
html[data-theme="inverted"] .projects-page .project-meta a[data-resource-type] { border: 0; border-bottom: 1px solid #d2bfcf; background: transparent; color: #d2bfcf; }
html[data-theme="inverted"] .projects-page main > .project-note { background: #1e161c !important; color: #e1dddb !important; border: 0 !important; }
html[data-theme="inverted"] .projects-page main > .project-note :is(h2,p) { color: #e1dddb; }
html[data-theme="inverted"] .projects-page main > .project-note :is(em,.section-tag) { color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .project-card { --project-stage: #20171e; --project-stage-ink: #d9c8d6; }
html[data-theme="inverted"] .projects-page #qafila { --project-stage: #d9c7a7; }
html[data-theme="inverted"] .projects-page #auraos { --project-stage: #f1e9df; --project-stage-ink: #483042; }
html[data-theme="inverted"] .projects-page #medicore { --project-stage: #1d151b; }
html[data-theme="inverted"] .projects-page #clearpath-ai { --project-stage: #344954; --project-stage-ink: #233a3d; }
html[data-theme="inverted"] .projects-page #aqrasfi { --project-stage: #1a1318; }
html[data-theme="inverted"] .projects-page #rera { --project-stage: #1d151b; }
html[data-theme="inverted"] .projects-page .project-card .project-visual { background: var(--project-stage); color: var(--project-stage-ink); border: 0; }
html[data-theme="inverted"] .projects-page .project-preview-window,
html[data-theme="inverted"] .projects-page .project-slides { background: #271c24; }
html[data-theme="inverted"] .projects-page .project-slides img { background: #271c24; }
html[data-theme="inverted"] .projects-page .project-visual > span,
html[data-theme="inverted"] .projects-page .project-card[data-live-preview] .project-visual > span { border: 0; color: var(--project-stage-ink); background: transparent; }
html[data-theme="inverted"] .projects-page .project-card .project-visual > i { border: 0; background: transparent; color: var(--project-stage-ink); }
html[data-theme="inverted"] .projects-page .project-card .project-visual > b { color: var(--project-stage-ink); }
html[data-theme="inverted"] .projects-page #maisan-sale { border-bottom: 1px solid var(--rule); }
html[data-theme="inverted"] .projects-page .project-card .project-visual { border: 1px solid color-mix(in srgb, var(--project-stage-ink) 48%, transparent); }
html[data-theme="inverted"] .projects-page .project-preview-window,
html[data-theme="inverted"] .projects-page .project-slides { border: 1px solid rgba(210, 191, 207, 0.188); }
html[data-theme="inverted"] .projects-page .project-card:hover .project-visual,
html[data-theme="inverted"] .projects-page .project-card:focus-within .project-visual { border-color: var(--project-stage-ink); }
html[data-theme="inverted"] .connected-site.projects-page .projects-intro { background: #261b23; border-bottom: 1px solid rgba(210, 191, 207, 0.188); }
html[data-theme="inverted"] .projects-page .projects-intro > .projects-intro-wordmark { color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .projects-intro .section-tag { color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .projects-intro > p:last-child { color: #cec8cb; }
html[data-theme="inverted"] .connected-site.projects-page .project-gallery { background: #271c24; }
html[data-theme="inverted"] .projects-page .project-card .project-visual { border: 1px solid rgba(210, 191, 207, 0.267); }
html[data-theme="inverted"] .projects-page .project-card:hover .project-visual,
html[data-theme="inverted"] .projects-page .project-card:focus-within .project-visual { border-color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .project-meta::before { border-bottom: 1px solid rgba(210, 191, 207, 0.271); color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .project-meta > span:first-of-type { color: #cabec5; }
html[data-theme="inverted"] .projects-page .project-meta h2 { color: #e1dddb; }
html[data-theme="inverted"] .projects-page .project-meta > p { color: #cdc8ca; }
html[data-theme="inverted"] .projects-page .project-context { border-top: 1px solid rgba(210, 191, 207, 0.22); }
html[data-theme="inverted"] .projects-page #maisan-sale { border-bottom: 1px solid rgba(210, 191, 207, 0.271); }
html[data-theme="inverted"] .projects-page #qafila { --project-stage: #d7cbb7; }
html[data-theme="inverted"] .projects-page #qafila .project-visual { background: linear-gradient(145deg, #d6c8b4, #c9bba8); }
html[data-theme="inverted"] .projects-page #qafila .project-visual > b { color: #d2bfcf; }
html[data-theme="inverted"] .projects-page #qafila .project-static-title { color: #dad0d8; }
html[data-theme="inverted"] .projects-page #medicore { --project-stage: #20171e; }
html[data-theme="inverted"] .projects-page #aqrasfi { --project-stage: #20171e; }
html[data-theme="inverted"] .projects-page #rera { --project-stage: #1f171d; }
html[data-theme="inverted"] .projects-page main > .project-note { background: #1f161d !important; border: 0 !important; }
html[data-theme="inverted"] .projects-page .project-note > .project-note-wordmark { color: #d2bfcf; }
html[data-theme="inverted"] .projects-page .project-note > p:last-child { color: #cdc8ca; }