/* 2sl.to: the parts only this site has. Everything else (tokens, both faces, the header, prose, readouts, cards,
   figures, buttons, the project page) comes from 2sl-ui's web.css, synced into src/ui/2sl/ and served at /2sl/,
   linked before this file. Rules: architecture/design.md. */

html { scroll-padding-top: calc(var(--line) * 2 + var(--gutter) * 3); } /* a #section link lands below the sticky header */

/* --- home: the spinning shapes, on the page as they've always been --- */
.spinning-shapes { width: 100%; max-width: none; box-sizing: border-box; height: calc(var(--small) * 20); margin: 0; padding: 0; border: 0; overflow: hidden; background: none; color: var(--ink); font: var(--small)/var(--small) var(--font); -webkit-font-smoothing: none; white-space: pre; }

/* --- photos in a row --- */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--unit) * 2); }
.photos img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.photos.photos-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photos.photos-natural img { aspect-ratio: auto; }

/* --- the space page: intro beside its readout, the gear as readouts --- */
.intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--gutter) * 2); align-items: start; }
.gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 52ch), 1fr)); gap: calc(var(--gutter) * 1.5) calc(var(--gutter) * 2); align-items: start; }
.gear .web-readout th { width: 11rem; }

/* --- charts (drawn by tools/room-charts with their own colours, light only for now) --- */
figure svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--grid); }

@media (max-width: 860px) {
  .intro, .gear { grid-template-columns: minmax(0, 1fr); }
  /* charts keep a readable size and scroll sideways inside their figure, not the page */
  figure:has(> svg) { overflow-x: auto; }
  figure svg { min-width: 900px; }
  figure svg text { font-size: 17px; }
}
@media (max-width: 560px) {
  .photos.photos-three { grid-template-columns: minmax(0, 1fr); }
}