/* Project names overlap the upper-left corner, following assets/references/design/work-sample.png. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 36px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.project-card { position: relative; padding: 0; min-width: 0; }
.project-title {
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 0;
  left: 0;
  margin: 0;
  color: #151515;
  background: #fac0bb;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(26px, calc(2.6 * var(--layout-vw, 1vw)), 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  padding: 22px 18px;
  min-width: 43%;
  height: 78px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.project-link { display: block; border: 1px solid #d8d8d8; border-radius: 3px; color: #151515; text-decoration: none; background: #fff; box-shadow: 0 12px 28px rgba(190, 170, 175, .18); transition: transform .25s, box-shadow .25s; }
.project-link:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(190, 170, 175, .25); }
.project-image { aspect-ratio: 1.6; padding: 24px 8px 6px; display: flex; align-items: center; justify-content: center; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-image-empty { color: #888; font-size: 13px; }
.project-action { display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: #fac0bb; min-height: 78px; padding: 20px 24px 20px 46%; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: clamp(14px, calc(1.35 * var(--layout-vw, 1vw)), 18px); line-height: 1.1; transition: background .2s; }
.project-link:hover .project-action { background: #ffa9a3; }
.project-link:focus-visible { outline: 3px solid #151515; outline-offset: 6px; }
@media (max-width: 780px) {
  .project-grid { grid-template-columns: 1fr; gap: 44px; }
  .project-card { padding-left: 0; }
  .project-title { font-size: clamp(24px, calc(7 * var(--layout-vw, 1vw)), 34px); min-width: 46%; height: 68px; padding: 18px 14px; }
  .project-action { min-height: 68px; padding-left: 48%; }
}
@media (prefers-reduced-motion: reduce) { .project-action { transition: none; } }

/* Refined editorial card treatment */
.project-grid { gap: 28px; }
.project-card {
  padding: 22px;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 30, 30, .06), 0 1px 0 rgba(255, 141, 152, .3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(30, 30, 30, .1), 0 3px 0 #ffb8be;
}
.project-title {
  position: static;
  height: auto;
  min-width: 0;
  display: block;
  padding: 0 0 14px;
  margin: 0;
  color: #171717;
  background: transparent;
  font-size: clamp(28px, calc(3 * var(--layout-vw, 1vw)), 42px);
  letter-spacing: -.06em;
}
.project-title::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 12px;
  border-radius: 99px;
  background: #ff9da6;
}
.project-description { min-height: 48px; margin: 0 0 9px; color: #666; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.45; }
.project-highlight { margin: 0 0 16px; color: #ff8994; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .1em; line-height: 1.35; }
.project-link { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.project-link:hover { transform: none; box-shadow: none; }
.project-image {
  aspect-ratio: 1.7;
  padding: 8px;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #faf7f7);
  overflow: hidden;
}
.project-image img { transition: transform .45s ease; }
.project-card:hover .project-image img { transform: scale(1.025); }
.project-image-empty { color: #aaa; font-size: 12px; letter-spacing: .08em; }
.project-action {
  min-height: 0;
  margin-top: 14px;
  padding: 14px 2px 0;
  border-top: 1px solid #ededed;
  background: transparent;
  color: #575757;
  font-size: 13px;
  letter-spacing: .02em;
}
.project-action span { color: #ff8994; font-size: 18px; transition: transform .2s; }
.project-card:hover .project-action span { transform: translateX(4px); }
.project-link:hover .project-action { background: transparent; }
@media (max-width: 780px) {
  .project-card { padding: 18px; }
  .project-title { font-size: 30px; }
  .project-action { padding-left: 2px; }
}

/* Soft pink accents and larger project visuals */
.project-card {
  background: #fffafa;
  border-top: 4px solid #ffb8be;
}
.project-image {
  aspect-ratio: 1.35;
  padding: 4px;
  background: linear-gradient(145deg, #fff7f8, #ffedef);
}
.project-image img { width: 100%; height: 100%; }

.project-description { font-size: 15px; line-height: 1.32; }
.project-highlight { font-size: 10px; line-height: 1.2; }

.project-card { background: #fff; border-top: 1px solid #e6e6e6; overflow: hidden; }
.project-card::before { content: ''; position: absolute; top: -1px; right: 22px; width: 42px; height: 4px; border-radius: 0 0 5px 5px; background: #ff9da6; }

.project-highlight { font-size: 12px; letter-spacing: .06em; line-height: 1.25; }

.project-image-empty {
  position: relative;
  background: #fff;
  border: 1px dashed #dedede;
  color: #aaa;
}
.project-image-empty::before,
.project-image-empty::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9da6;
}
.project-image-empty::before { top: 14px; left: 14px; }
.project-image-empty::after { right: 14px; bottom: 14px; background: #ffd4d7; }

.project-card--stateflow .project-image { background: #fff; }
.project-card { box-shadow: 0 8px 0 #ffc1c1, 0 18px 28px rgba(255, 156, 164, .2); }
.project-card:hover { box-shadow: 0 11px 0 #ffabb3, 0 24px 38px rgba(255, 156, 164, .28); }

.project-card--eva .project-image { background: #fff; }

.project-card--phaseflow .project-image,
.project-card--upc .project-image { background: #fff; }

/* Keep only the upper UPC system diagram and enlarge it inside the card. */
.project-card--upc .project-image { aspect-ratio: 1.35; overflow: hidden; }
.project-card--upc .project-image img { width: 100%; height: 132%; object-fit: cover; object-position: 50% 0; transform: scale(1.08); transform-origin: top center; }

.project-card--phaseflow .project-image,
.project-card--upc .project-image { aspect-ratio: 1.35; min-height: 0; }

.project-card--upc .project-image { aspect-ratio: 1.35; overflow: hidden; }
.project-card--upc .project-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }

.project-card--phaseflow .project-image,
.project-card--upc .project-image { aspect-ratio: 1.35; height: auto; }

.project-card--upc .project-image { background: #edf6ff; }

.project-card--upc .project-image { background: #fff !important; }

.project-highlight { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 700; color: #e58293; letter-spacing: .035em; line-height: 1.4; }

#work .section-head h2 { font-size: 42px; }
.project-grid { gap: 22px 28px; }
.project-card { padding: 18px; }
.project-title { font-size: clamp(27px, calc(2.6 * var(--layout-vw, 1vw)), 40px); }
.project-image { aspect-ratio: 1.55; }
@media (max-width: 780px) {
  #work .section-head h2 { font-size: 34px; }
  .project-card { padding: 16px; }
  .project-title { font-size: 28px; }
}

.project-title { padding-top: 8px; }
@media (max-width: 780px) { .project-title { padding-top: 6px; } }

/* Unreleased research projects share a coming-soon preview. */
.project-card--coming-soon .project-image{position:relative;isolation:isolate;background:#fff}
.project-card--coming-soon .project-image img{filter:blur(7px);transform:scale(1.06)}
.project-card--coming-soon .project-image::before{content:"";position:absolute;z-index:1;inset:0;background:rgba(255,255,255,.24);pointer-events:none}
.project-card--coming-soon .project-image::after{content:"Coming soon...";position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);color:#8b8989;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:clamp(18px,calc(2 * var(--layout-vw, 1vw)),26px);font-weight:600;letter-spacing:.015em;text-shadow:0 1px 8px rgba(255,255,255,.9);white-space:nowrap;pointer-events:none}

/* Slightly smaller Selected Work cards, with the existing two-column layout. */
#work.section { padding-top: 58px; }
#work .project-grid { max-width: 1040px; margin-inline: auto; gap: 24px; }
#work .project-card { padding: 16px; }
#work .project-title { font-size: clamp(27px, calc(2.4 * var(--layout-vw, 1vw)), 36px); }
#work .project-image { aspect-ratio: 1.65; }
@media (max-width: 780px) {
  #work.section { padding-top: 38px; }
  #work .project-grid { max-width: 520px; }
  #work .project-card { padding: 14px; }
  #work .project-title { font-size: 28px; }
}