/* The Signal diagram's emerald dot field, carried into the project stories. */
.project-grid { align-items: start; }
.project-card:hover { transform: none; }
.project-card:has(.project-details[open]), .project-card:focus-within { border-color: #628b73; }
.project-story { position: relative; isolation: isolate; overflow: hidden; background: #0d1712; border-top: 1px solid var(--line); }
.project-story::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 1px 1px, #a2dbc65c .9px, transparent 1.1px) 10px 10px / 24px 24px; }
.project-caption { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: start; gap: 10px 12px; min-height: 116px; padding: 23px 18px 19px; border: 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.project-caption::-webkit-details-marker { display: none; }
.project-caption::marker { content: ""; }
.project-caption:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }
.project-caption .project-index { padding-top: 3px; opacity: .85; }
.project-caption h3 { font-size: 13px; line-height: 1.65; letter-spacing: -.025em; transition: color .2s; }
.project-caption:hover h3, .project-details[open] h3 { color: #c9f5d9; }
.project-caption .card-cross { position: relative; width: 18px; height: 18px; align-self: start; margin-top: 2px; color: var(--accent); opacity: .8; }
.card-cross::before, .card-cross::after { content: ""; position: absolute; background: currentColor; }
.card-cross::before { width: 10px; height: 1px; left: 4px; top: 8px; }
.card-cross::after { width: 1px; height: 10px; left: 8px; top: 4px; transition: transform .35s, opacity .35s; }
.project-details[open] .card-cross::after { transform: rotate(90deg); opacity: 0; }
.project-prompt { grid-column: 2 / 4; display: flex; align-items: center; gap: 12px; color: #95b3a1; font-size: 9px; letter-spacing: .035em; }
.prompt-line { width: 22px; height: 1px; background: var(--accent); opacity: .35; transition: width .4s; }
.project-caption:hover .prompt-line, .project-details[open] .prompt-line { width: 38px; }
.when-open, .project-details[open] .when-closed { display: none; }
.project-details[open] .when-open { display: inline; }
.project-description { padding: 0 22px 27px 50px; }
.project-description p { padding-top: 17px; border-top: 1px solid #91efbc26; color: #b6c8bc; font-family: var(--sans); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.project-details[open] .project-description { animation: story-reveal .55s ease-out both; }
@keyframes story-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
[data-motion="paused"] .project-details *, [data-motion="paused"] .project-details *::after { animation: none; transition: none; }
@media (max-width: 1100px) and (min-width: 801px) {
  .project-caption { padding-inline: 13px; column-gap: 9px; }
  .project-caption h3 { font-size: 12px; }
  .project-description { padding-inline: 42px 18px; }
}
@media (max-width: 540px) {
  .project-caption { min-height: 108px; padding: 20px 16px 17px; column-gap: 10px; }
  .project-description { padding: 0 20px 24px 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-details *, .project-details *::after { animation: none !important; transition: none !important; }
}