.prototype-page { background: #f2e9d8; }
.milestone-top { padding: 1rem 0 5rem; }
.milestone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; }
.milestone-grid h1 { margin: 1rem 0 1.5rem; font: 400 clamp(4rem, 8vw, 7.4rem)/.98 var(--font-display); text-transform: uppercase; }
.milestone-grid h1 em { color: var(--rust); font-style: normal; }
.milestone-dek { max-width: 510px; font-size: 1.22rem; }
.milestone-note { margin: 2rem 0 0; font: 400 1.6rem/1.3 var(--font-script); color: var(--rust); transform: rotate(-3deg); }
.proof-photo { position: relative; margin: 1.8rem .6rem; padding: 14px 14px 0; background: var(--white); box-shadow: 8px 10px 0 var(--sand); transform: rotate(2deg); }
.proof-photo::before { content: ''; position: absolute; width: 110px; height: 30px; left: calc(50% - 55px); top: -15px; background: #d2b99bba; transform: rotate(-5deg); }
.proof-photo img { width: 100%; height: auto; }
.proof-photo figcaption { padding: 1rem .3rem; font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.milestone-status { padding: 1.6rem 0; background: var(--forest); color: var(--paper); }
.milestone-status .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.milestone-status small { display: block; color: var(--sun); letter-spacing: .12em; text-transform: uppercase; }
.milestone-status strong { font: 400 1.5rem/1.3 var(--font-display); }
.milestone-story { max-width: 760px; margin: auto; padding: 4.5rem 0; }
.milestone-story h2, .contact-heading h2 { font: 400 clamp(2.5rem, 5vw, 4rem)/1.06 var(--font-display); text-transform: uppercase; margin: 0 0 1.5rem; }
.milestone-story p { margin: 0 0 1.3rem; }
.milestone-story .big-line { margin: 2.5rem 0; padding-left: 1.5rem; border-left: 5px solid var(--rust); font: 400 clamp(2rem, 4vw, 3rem)/1.15 var(--font-display); }
.contact-sheet { background: var(--sand); padding: 4rem 0; border-block: 2px solid var(--forest); }
.contact-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.contact-heading p { max-width: 390px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.5rem; }
.photo-grid figure { margin: 0; padding: .6rem; background: var(--white); }
.photo-grid img { width: 100%; height: auto; }
.photo-grid figcaption { font-size: .82rem; padding: .8rem .2rem .2rem; line-height: 1.45; }
.photo-grid a { display: block; }
.photo-grid a:hover { outline: 3px solid var(--rust); }
.milestone-signoff { color: var(--rust); font: 400 1.7rem/1.4 var(--font-script); }
.prototype-page :focus-visible { outline: 3px solid var(--rust); outline-offset: 5px; }
.prototype-page .nav-links a[href='/lore/'] { display: inline; }
@media(max-width: 760px) {
  .milestone-grid { grid-template-columns: 1fr; gap: 2rem; }
  .milestone-grid h1 { font-size: clamp(3.7rem, 15vw, 6rem); }
  .proof-photo { max-width: 460px; margin-inline: auto; width: 94%; }
  .milestone-status .wrap { grid-template-columns: 1fr; gap: 1rem; }
  .milestone-status .wrap > div { border-bottom: 1px solid #d2b99b55; padding-bottom: .8rem; }
  .contact-heading { display: block; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .milestone-story { padding-block: 3rem; }
}