/* ssstt-specific styles inherited from style.css */

body[data-project="ssstt"] {
  --ssstt-square-size: clamp(18rem, 40vh, 24rem);
  --ssstt-grid-gap: clamp(0.9rem, 1vw, 1.25rem);
  --ssstt-feature-width: clamp(28rem, 32vw, 35rem);
  --ssstt-poem-width: clamp(15rem, 16vw, 18rem);
  --ssstt-space-feature: clamp(10rem, 14vw, 18rem);
  --ssstt-space-cluster: clamp(6rem, 9vw, 12rem);
  --ssstt-space-mid: var(--ssstt-grid-gap);
  --ssstt-space-late: var(--ssstt-grid-gap);
  --ssstt-space-stack: var(--ssstt-grid-gap);
  --ssstt-space-poem: clamp(15rem, 22vw, 28rem);
  background: var(--color-bg-alt);
}

.ssstt-intro {
  min-height: clamp(32rem, 78vh, 42rem);
}

.ssstt-walltext {
  display: flex;
  justify-content: flex-end;
  min-height: clamp(30rem, 70vh, 40rem);
  padding: 4rem var(--page-gutter);
}

.ssstt-walltext-panel {
  width: min(100%, 24rem);
  text-align: right;
}

.ssstt-walltext-title {
  margin-bottom: 2rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 0.9;
}

.ssstt-walltext-body {
  display: grid;
  gap: 1.5rem;
  color: var(--color-gray);
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  line-height: 1.4;
}

.ssstt-gallery-track {
  width: max-content;
  display: grid;
  padding-left: calc(50vw - (var(--ssstt-feature-width) / 2));
  padding-right: 15vw;
  grid-template-columns:
    var(--ssstt-feature-width)
    var(--ssstt-space-feature)
    repeat(2, var(--ssstt-square-size))
    var(--ssstt-space-cluster)
    var(--ssstt-square-size)
    var(--ssstt-space-mid)
    var(--ssstt-square-size)
    var(--ssstt-space-late)
    var(--ssstt-square-size)
    var(--ssstt-space-stack)
    var(--ssstt-square-size)
    var(--ssstt-space-poem)
    var(--ssstt-poem-width);
  grid-template-rows: repeat(2, var(--ssstt-square-size));
  column-gap: 0;
  row-gap: var(--ssstt-grid-gap);
  align-items: center;
}

.ssstt-card {
  height: auto;
  border-radius: 0;
}

.ssstt-card img {
  object-fit: cover;
}

.ssstt-card-feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--ssstt-feature-width);
  height: calc(var(--ssstt-square-size) * 2 + var(--ssstt-grid-gap));
}

.ssstt-cluster {
  display: grid;
  gap: var(--ssstt-grid-gap);
}

.ssstt-cluster-four {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(2, var(--ssstt-square-size));
  grid-template-rows: repeat(2, var(--ssstt-square-size));
}

.ssstt-card-path { grid-column: 6; grid-row: 1; }

.ssstt-cluster-column {
  grid-column: 8;
  grid-row: 1 / span 2;
  grid-template-rows: repeat(2, var(--ssstt-square-size));
}

.ssstt-card-late { grid-column: 10; grid-row: 2; }

.ssstt-cluster-stack {
  grid-column: 12;
  grid-row: 1 / span 2;
  grid-template-rows: repeat(2, var(--ssstt-square-size));
}

.ssstt-card-square {
  width: var(--ssstt-square-size);
  height: var(--ssstt-square-size);
}

.ssstt-poem {
  grid-column: 14;
  grid-row: 1 / span 2;
  width: var(--ssstt-poem-width);
  display: grid;
  gap: 1.25rem;
  color: var(--color-gray);
  font-size: clamp(0.85rem, 0.9vw, 1rem);
  line-height: 1.35;
  text-align: right;
  align-self: center;
}

@media (max-width: 960px) {
  .ssstt-intro { min-height: auto; }
  .ssstt-walltext { justify-content: flex-start; min-height: auto; }
  .ssstt-walltext-panel { text-align: left; }
  
  .ssstt-gallery-track {
    display: flex;
    flex-direction: column;
    padding: 0 var(--page-gutter);
    gap: 2rem;
  }
  
  .ssstt-card-feature,
  .ssstt-card-square,
  .ssstt-cluster,
  .ssstt-poem {
    width: 100%;
    height: auto;
  }
  
  .ssstt-cluster {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.25rem;
  }
  
  .ssstt-poem { text-align: left; }
}

@media (max-width: 480px) {
  .ssstt-intro {
    padding-top: calc(var(--header-height) + 1rem);
  }

  .ssstt-gallery-track {
    gap: 1.25rem;
  }
}