1|.project-hero {
     2|  padding: var(--space-3xl) 0 var(--space-xl);
     3|}
     4|
     5|.project-hero__inner {
     6|  max-width: 50rem;
     7|}
     8|
     9|.project-hero__meta {
    10|  margin: 0 0 var(--space-sm);
    11|  color: var(--color-accent);
    12|}
    13|
    14|.project-hero__title {
    15|  margin: 0;
    16|  font-size: clamp(2.2rem, 5vw, 4rem);
    17|  line-height: var(--line-height-heading);
    18|}
    19|
    20|.project-hero__summary {
    21|  margin: var(--space-md) 0 var(--space-lg);
    22|  color: var(--color-text-muted);
    23|  font-size: var(--font-size-lg);
    24|}
    25|
    26|.project-layout {
    27|  display: grid;
    28|  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
    29|  gap: var(--space-xl);
    30|}
    31|
    32|.project-copy,
    33|.project-panel {
    34|  padding: var(--space-xl);
    35|  border: 1px solid var(--color-border);
    36|  border-radius: var(--radius-lg);
    37|  background: rgba(255, 255, 255, 0.02);
    38|}
    39|
    40|.content-section__group + .content-section__group {
    41|  margin-top: var(--space-xl);
    42|}
    43|
    44|.content-section__group h2 {
    45|  margin: 0 0 var(--space-sm);
    46|}
    47|
    48|.content-section__group p,
    49|.content-section__group li,
    50|.project-panel__caption,
    51|.project-facts dt {
    52|  color: var(--color-text-muted);
    53|}
    54|
    55|.project-panel {
    56|  display: grid;
    57|  gap: var(--space-lg);
    58|}
    59|
    60|.project-panel__visual {
    61|  display: grid;
    62|  place-items: center;
    63|  min-height: 16rem;
    64|  border: 1px dashed rgba(255,255,255,0.15);
    65|  border-radius: var(--radius-md);
    66|  color: var(--color-text-muted);
    67|  background: linear-gradient(145deg, rgba(143,207,149,0.1), rgba(255,255,255,0.02));
    68|}
    69|
    70|.project-panel__visual--image {
    71|  padding: var(--space-lg);
    72|}
    73|
    74|.project-panel__visual--image img {
    75|  width: min(12rem, 100%);
    76|  height: auto;
    77|}
    78|
    79|.project-panel__caption {
    80|  margin: 0;
    81|}
    82|
    83|.project-facts {
    84|  display: grid;
    85|  gap: var(--space-md);
    86|  margin: 0;
    87|}
    88|
    89|.project-facts div {
    90|  padding-top: var(--space-md);
    91|  border-top: 1px solid rgba(255,255,255,0.06);
    92|}
    93|
    94|.project-facts dt {
    95|  margin-bottom: var(--space-2xs);
    96|  font-size: 0.88rem;
    97|  text-transform: uppercase;
    98|  letter-spacing: 0.06em;
    99|}
   100|
   101|.project-facts dd {
   102|  margin: 0;
   103|}
   104|
   105|@media (max-width: 56rem) {
   106|  .project-layout {
   107|    grid-template-columns: 1fr;
   108|  }
   109|}
   110|

.project-panel__visual--image img {
  width: min(18rem, 100%);
  max-height: 34rem;
  object-fit: contain;
  border-radius: 1.25rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}