[hidden] { display: none !important; }

.content { flex: 1; width: 100%; }
.projects-view { width: min(100% - 72px, 1040px); margin: 0 auto; padding: 70px 0 50px; }

.eyebrow,
.page-description,
.project-index,
.project-number,
.project-description,
.featured-content small {
  font-family: 'Courier New', Courier, monospace;
}

.eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; }
.page-heading h1 { margin: 0; font: 400 clamp(57px, 5vw, 82px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; }
.period { color: #c78e89; }
.back-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--ink); text-decoration: none; font: 13px/1.4 'Courier New', Courier, monospace; }
.page-description { max-width: 560px; margin: 21px 0 0; font-size: 15px; line-height: 1.65; }

.project-list { margin-top: clamp(55px, 7vh, 80px); border-top: 1px solid var(--ink); }
.featured-project { display: block; color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink); transition: background .2s ease; }
.featured-project:hover,
.featured-project:focus-visible,
.project-row:hover,
.project-row:focus-visible { background: var(--hover); }
.project-index { display: flex; justify-content: space-between; padding: 20px 6px 0; font-size: 12px; letter-spacing: .04em; }
.project-index span:last-child { width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.featured-content { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 50px; padding: 31px 6px 32px; }
.featured-content h2 { margin: 0; font: 400 clamp(45px, 4.3vw, 70px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.05em; }
.featured-content p { max-width: 425px; margin: 0 0 20px; font: 15px/1.6 'Courier New', Courier, monospace; }
.featured-content small { font-size: 11px; letter-spacing: .035em; color: var(--muted); }

.project-row { display: grid; grid-template-columns: 90px minmax(180px, 1fr) minmax(250px, .9fr) 24px; align-items: center; gap: 20px; min-height: 95px; padding: 13px 6px; border-bottom: 1px solid var(--ink); text-decoration: none; transition: background .2s ease; }
.project-number { font-size: 12px; }
.project-name { font: 400 clamp(25px, 2.4vw, 34px)/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; }
.project-description { font-size: 13px; line-height: 1.5; }
.project-arrow { justify-self: end; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.project-detail .page-heading { margin-top: 60px; }
.project-detail .project-body { max-width: 680px; margin-top: 40px; font: 17px/1.7 Georgia, 'Times New Roman', serif; }
.project-detail .project-external { display: inline-block; margin-top: 35px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); text-decoration: none; font: 13px/1.4 'Courier New', Courier, monospace; }

@media (max-width: 800px) {
  .projects-view { width: min(100% - 44px, 1040px); padding: 65px 0 80px; }
  .featured-content { grid-template-columns: 1fr; gap: 18px; }
  .project-row { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 5px 14px; padding: 18px 6px; }
  .project-number { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
  .project-name { grid-column: 2; }
  .project-description { grid-column: 2; }
  .project-arrow { grid-column: 3; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-project,
  .project-row { transition: none; }
}