:root { --sky: #d5e3ea; --water: #1d4a3c; --timber: #6a4b32; --foam: #f7fbfc; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--sky); color: #1b2420; font-family: "Avenir Next", "Segoe UI", sans-serif; }
.deck {
  background: repeating-linear-gradient(90deg, #8a6240 0 28px, #6e4c30 28px 30px);
  color: var(--foam);
  padding: 22px 8vw 18px;
}
.deck h1 { margin: 0; font-weight: 600; font-size: 34px; letter-spacing: -0.02em; }
.piers { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.piers a { color: #f3e2c8; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.piers a.on { border-bottom-color: #f3e2c8; }
.span { width: min(880px, calc(100% - 32px)); margin: -12px auto 0; background: var(--foam); padding: 26px 26px 10px; box-shadow: 0 12px 0 var(--water); }
p { font-size: 18px; line-height: 1.5; }
img { width: 100%; height: auto; display: block; }
figure { margin: 0 0 18px; }
figcaption { font-size: 14px; color: #3d534c; margin-top: 6px; }
.river { background: var(--water); color: #d5ebe3; padding: 28px 8vw 36px; margin-top: 28px; font-size: 14px; }
@media (max-width: 640px) { .deck h1 { font-size: 26px; } .span { padding: 18px 14px 8px; } }