.project-notice-trigger {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.project-notice-trigger:focus-visible { outline: none; }
.project-link:has(.project-notice-trigger:focus-visible) { outline: 1px solid #242424; outline-offset: 7px; }
.project-card:has(.project-notice-trigger:focus-visible) { --card-lift: -5px; --card-shadow-opacity: 1; --card-lift-duration: 320ms; }
html.project-notice-open { overflow: hidden; }
.project-notice {
  width: min(460px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 24px;
  background: #f8f7f4;
  color: #242421;
  box-shadow: 0 30px 80px -28px rgba(38,37,35,.28), 0 5px 16px -8px rgba(38,37,35,.10), inset 0 1px rgba(255,255,255,.8);
}
.project-notice::backdrop { background: rgba(51,49,44,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.project-notice[open] { animation: project-notice-in 320ms cubic-bezier(.22,.8,.3,1) both; }
.project-notice[open]::backdrop { animation: project-notice-veil-in 220ms ease both; }
.project-notice[data-closing] { animation: project-notice-out 160ms ease both; }
.project-notice[data-closing]::backdrop { animation: project-notice-veil-out 160ms ease both; }
.project-notice__surface { position: relative; isolation: isolate; padding: 38px 36px 34px; }
.project-notice__surface::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/film-grain.svg') repeat; opacity: .045; }
.project-notice__eyebrow { margin: 0 44px 24px 0; color: #858078; font-size: 10px; font-weight: 400; line-height: 16px; letter-spacing: .12em; }
.project-notice h2 { margin: 0 0 16px; font-size: 28px; font-weight: 500; line-height: 1.12; letter-spacing: -.035em; }
.project-notice__copy { color: #6c6861; font-size: 14px; line-height: 1.65; letter-spacing: .005em; }
.project-notice__copy p { margin: 0; }
.project-notice__copy p + p { margin-top: 12px; }
.project-notice__email { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 44px; margin-top: 24px; color: #282823; font-size: 14px; line-height: 22px; text-decoration: underline; text-decoration-color: #c3beb4; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 180ms ease; }
.project-notice__email svg { flex: 0 0 17px; width: 17px; height: 17px; color: #777168; }
.project-notice__email span { overflow-wrap: anywhere; }
.project-notice__email:hover { text-decoration-color: currentColor; }
.project-notice__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #777168; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.project-notice__close svg { width: 18px; height: 18px; }
.project-notice__close:hover { background: #eae7df; color: #242421; }
@keyframes project-notice-in { from { opacity: 0; transform: translate3d(0,-10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes project-notice-out { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: 0; transform: translate3d(0,-4px,0); } }
@keyframes project-notice-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes project-notice-veil-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 600px) {
  .project-notice { width: calc(100% - 32px); border-radius: 22px; }
  .project-notice__surface { padding: 32px 26px 26px; }
  .project-notice__close { top: 12px; right: 12px; }
  .project-notice h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-notice[open], .project-notice[open]::backdrop { animation: none; }
  .project-notice__close, .project-notice__email { transition: none; }
  .project-card:has(.project-notice-trigger:focus-visible) { --card-lift: 0px; --card-lift-duration: 0ms; }
}