.page-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); gap: var(--s6); align-items: end; padding-block: clamp(3.5rem, 7vw, 5.2rem); }
.page-intro h1 { margin-bottom: 0; }
.page-intro-copy { color: var(--muted); }
.project-gallery { padding-bottom: var(--s7); }
.project-list { display: grid; gap: var(--s4); }
.case-card { --accent: var(--moss); display: grid; grid-template-columns: minmax(11rem, .38fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 250, 240, .5); overflow: hidden; box-shadow: var(--shadow); }
.case-card:nth-child(2n) { --accent: var(--blue); }
.case-card:nth-child(3n) { --accent: var(--rust); }
.case-visual { position: relative; display: grid; min-height: 22rem; place-items: center; background: var(--paper-deep); border-right: 1px solid var(--line); overflow: hidden; }
.case-visual::before { position: absolute; width: 16rem; height: 9rem; border: 2px dashed var(--accent); border-radius: 50%; content: ""; transform: rotate(-18deg); opacity: .7; }
.case-visual::after { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--accent), transparent 75%); content: ""; }
.case-initials { position: relative; z-index: 1; padding: .6rem .75rem; background: var(--paper-deep); font: 700 1.1rem var(--mono); }
.case-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: clamp(1.4rem, 4vw, 3rem); }
.case-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.case-body h2 { margin-bottom: var(--s2); font-size: clamp(2rem, 4vw, 3.6rem); }
.case-summary { max-width: var(--reading); color: var(--muted); font-size: 1.05rem; }
.case-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-block: var(--s5); }
.case-notes div { padding-top: var(--s3); border-top: 1px solid var(--line); }
.case-notes dt { margin-bottom: .35rem; color: var(--rust); font: .62rem var(--mono); text-transform: uppercase; }
.case-notes dd { margin: 0; color: var(--muted); font-size: .82rem; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.loading-state { display: flex; align-items: center; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); }
.loading-mark { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--rust); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.writing-page { padding: var(--s4) 0 clamp(3.5rem, 7vw, 5.2rem); }
.coming-soon { display: grid; grid-template-columns: 1fr minmax(12rem, .35fr); gap: var(--s6); max-width: 62rem; padding: var(--s5); border: 1px dashed var(--rope); background: rgba(255, 250, 240, .5); }
.coming-soon p { color: var(--muted); }
.note-stack { display: grid; align-content: start; gap: .7rem; }
.note-stack span { display: block; padding: .7rem; border: 1px solid var(--line); background: var(--surface); font: .62rem var(--mono); transform: rotate(-1deg); }
.note-stack span:nth-child(2) { transform: rotate(1.5deg); }
@media (max-width: 56rem) { .page-intro { grid-template-columns: 1fr; gap: var(--s3); } .case-card { grid-template-columns: 1fr; } .case-visual { min-height: 12rem; border-right: 0; border-bottom: 1px solid var(--line); } .case-notes { grid-template-columns: 1fr; } }
@media (max-width: 38rem) { .page-intro { padding-block: var(--s6); } .case-actions { align-items: flex-start; flex-direction: column; } .coming-soon { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .loading-mark { animation: none; border-top-color: var(--line); } }