/* ==========================================================================
   The six results, options with imagery (Alex, 2026-11-10).

   Sources: run 1's image cards with captions (website/index.html, "What we
   do"); the board's Verden b01 mosaic; run 2's isometric line drawing
   (website-2/polaris.html). Photos are concept imagery, unlicensed.
   ========================================================================== */

.rs { --rs-gap: clamp(10px, 1.1vw, 16px); }
.rs-card { position: relative; overflow: hidden; }
.rs-card h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.14; letter-spacing: -.024em; text-wrap: balance; }
.rs-card p { margin: 9px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.48; text-wrap: pretty; }

/* photo cards: text on the image */
.rs-photo { color: #fff; background: #111; }
.rs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.rs-photo:hover img { transform: scale(1.03); }
.rs-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .06) 72%); }
.rs-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(16px, 1.7vw, 26px); }
.rs-photo p { color: rgba(255, 255, 255, .86); }

/* Option 1: six photos */
.rs-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-gap); margin: 0; padding: 0; list-style: none; }
.rs-six .rs-card { height: clamp(340px, 48vh, 460px); }

/* Option 2: mixed grid */
.rs-mix { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--rs-gap); margin: 0; padding: 0; list-style: none; }
.rs-mix .rs-card { min-height: clamp(300px, 40vh, 380px); }
.rs-mix .s7 { grid-column: span 7; min-height: clamp(380px, 54vh, 500px); }
.rs-mix .s5 { grid-column: span 5; min-height: clamp(380px, 54vh, 500px); }
.rs-mix .s4 { grid-column: span 4; }
.rs-mix .s12 { grid-column: span 12; min-height: clamp(260px, 36vh, 340px); }
.rs-solid { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 30px); }
.rs-solid--ink { background: #000; color: #fff; }
.rs-solid--ink p { color: rgba(255, 255, 255, .78); }
.rs-solid--line { border: 1px solid var(--ink); }
.rs-solid--line p { color: #61635C; }
.rs-big h3 { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.06; letter-spacing: -.032em; }
.rs-big p { font-size: 16.5px; }

/* Option 3: line drawings */
.rs-draw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-gap); margin: 0; padding: 0; list-style: none; }
.rs-draw .rs-card { display: flex; flex-direction: column; padding: clamp(18px, 1.9vw, 28px); border: 1px solid var(--ink); }
/* the drawing sits at the top and the text at the bottom of every card */
.rs-draw svg { display: block; flex: none; width: 100%; max-width: 300px; height: auto; margin: 2px auto auto; padding-bottom: 18px; overflow: visible; }
.rs-draw p { color: #61635C; }
.d-face { fill: #F6F5F2; stroke: var(--ink); stroke-width: 1; }
.d-in { fill: none; stroke: rgba(17, 18, 18, .35); stroke-width: .8; }
.d-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.d-box-t { fill: #fff; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.d-box-l { fill: #F1F0ED; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.d-box-r { fill: #E2E1DD; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.d-l { fill: none; stroke: var(--ink); stroke-width: 1; }
.d-lw { fill: none; stroke: #fff; stroke-width: 1; }
.d-n { fill: var(--ink); }
.d-nw { fill: #fff; }
.d-dash { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.d-dia { fill: #fff; stroke: var(--ink); stroke-width: 1; }

@media (max-width: 900px) {
  .rs-six, .rs-draw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-mix .s7, .rs-mix .s5 { grid-column: span 12; }
  .rs-mix .s4 { grid-column: span 6; }
}
@media (max-width: 620px) {
  .rs-six, .rs-draw { grid-template-columns: minmax(0, 1fr); }
  .rs-six .rs-card { height: 340px; }
  .rs-mix .s4 { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) { .rs-photo img { transition: none; } }