/* A full-width gallery keeps each concept's own palette intact. */
#work {
  background: #233a32;
  color: #f4f2e8;
  box-shadow: 0 0 0 100vmax #233a32;
  clip-path: inset(0 -100vmax);
}
#work .section-head p, #work .project-info p { color: #d0dacf; }
#work .section-head .label { color: #cfef9c; }
#work .arrow { color: #dbefbd; border-color: #768e80; }
#work .project:hover .arrow { color: #20342a; }
#work .work-note { color: var(--ink); }
#work .project { min-width: 0; }
.ribbon { background: #d4e0be; }
.dark { margin-top: clamp(36px, 6vw, 84px); }
.process { background: #d3dfc5; }

/* Let the miniature browser grow to its content at every card width. */
.project .project-visual {
  height: auto;
  padding: clamp(16px, 2.4vw, 32px);
  display: grid;
  align-items: center;
}
.project .project-visual .window,
.project:hover .project-visual .window {
  margin: 0;
  height: auto;
  transform: none;
}
.project-visual .mini, .modal-visual .mini {
  container-type: inline-size;
  padding: clamp(14px, 2vw, 24px);
}
.project-visual .mini { min-height: clamp(204px, 19vw, 265px); }
.project-visual .forma, .modal-visual .forma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31%;
  gap: 8px 6%;
  align-content: start;
}
.forma .mini-nav { grid-column: 1 / -1; }
.project .forma h3, .modal-visual .forma h3 {
  grid-column: 1;
  font-size: clamp(18px, 9.4cqi, 50px);
  line-height: 1.03;
  margin: 18px 0 0;
  letter-spacing: -.055em;
}
.forma p { grid-column: 1; margin: 0; }
.project .forma .arch, .modal-visual .forma .arch {
  grid-column: 2;
  grid-row: 2 / 4;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  align-self: stretch;
  margin-top: 6px;
  overflow: hidden;
}
.project .cafe h3, .modal-visual .cafe h3 {
  font-size: clamp(18px, 8.6cqi, 46px);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin: 15px 0 6px;
}
.cafe .cup { width: 65px; height: 40px; margin: 12px auto 6px; }
@media (max-width: 700px) {
  .work-grid { gap: 30px; }
  .project-visual .mini { min-height: 180px; }
  .project-info { margin-top: 12px; }
  .project-info .arrow { flex-shrink: 0; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(38px, 13.4vw, 82px); }
  .playground { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .theme-controls { display: grid; gap: 0; }
  .theme-button { padding: 9px 0; }
}