/* The home page. Tokens from ds/tokens.css (Print studio, the light theme); components
   (buttons, tags, specs, logo) from ds/bundle.css. White pages; the warm plate colour for
   alternating bands. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; padding: 0; background: var(--plate-200); color: var(--ink); font: var(--text-body); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.narrow { max-width: 720px; }
section { padding: var(--space-24) 0; }
.band { background: var(--plate-100); }

h1 { font: var(--text-display-xl); letter-spacing: -0.02em; margin: 0 0 var(--space-6); }
h2 { font: var(--text-display-l); letter-spacing: -0.015em; margin: 0 0 var(--space-6); }
h3 { font: var(--text-heading-2); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
.lead { font: var(--text-body-l); color: var(--ink); }
.small { font: var(--text-body-s); color: var(--ink-muted); }
.eyebrow { color: var(--ink-muted); margin-bottom: var(--space-3); }
a { color: var(--link); }
a.uq-btn { text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* opening */
.hero { padding-top: var(--space-16); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: center; }
/* the three facts under the buttons: tags, Free in the highlight colour */
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; }
.facts .uq-tag { height: 28px; padding: 0 9px; font-size: 12px; letter-spacing: 0.04em; }
.facts .uq-tag-yellow { font-size: 13px; padding: 0 var(--space-3); }
.nowrap { white-space: nowrap; }
.media { position: relative; margin: 0; }
.hero-media { padding-bottom: var(--space-12); }

/* placeholders for photos and renders (until the real ones are in) */
.ph { display: grid; place-items: center; padding: var(--space-4); text-align: center; aspect-ratio: 4 / 3;
  background: var(--plate-000); border-radius: var(--radius-plate); color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px var(--line); }
.ph-tall { aspect-ratio: 4 / 4.2; box-shadow: var(--shadow-lift); }
/* photos: the build plate frame (radius-plate) */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-plate); box-shadow: var(--shadow-lift); }
.photo-hero { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 45%; }
.photo-inset { position: absolute; right: calc(-1 * var(--space-6)); bottom: 0; width: 40%; height: auto;
  aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-plate); background: var(--plate-200);
  border: 6px solid var(--plate-200); box-shadow: var(--shadow-lift); }
.about { align-items: center; }
.about .photo { max-width: 420px; justify-self: end; aspect-ratio: 3 / 4; object-fit: cover; }
.ph-inset { position: absolute; right: calc(-1 * var(--space-4)); bottom: 0; width: 46%; aspect-ratio: 1;
  background: var(--plate-200); box-shadow: var(--shadow-lift); }

/* the well (well.js): tetromino pieces with the key facts, stacking into a skyline */
.well { padding: 0; overflow-anchor: none; }   /* (no scroll anchoring: no jumps while the pieces move) */
.well-track { position: relative; }
.well.sticky .well-track { height: calc(225vh - var(--site-header)); }   /* (the stage plus about 1.25 pages: in, hold, out) */
.well { --cell: 100px; }
.well-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); }
.well.sticky .well-stage { position: sticky; top: var(--site-header); height: calc(100vh - var(--site-header)); overflow: hidden; }
.well.flow .well-stage, .well.still .well-stage { padding: var(--space-16) var(--space-4); }
.well-board { position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 4);
  background-image: radial-gradient(circle, var(--line) 1.5px, transparent 2px); background-size: var(--cell) var(--cell); }
.well-head { position: relative; z-index: 1; width: calc(var(--cell) * 7); max-width: 100%; }
.well-head h2 { margin: 0; }
.well-pixels { position: absolute; inset: 0; pointer-events: none; }
.well-pixels span { position: absolute; width: 14px; height: 14px; background: var(--block-yellow); opacity: 0.22; }
.well-pixels span:nth-child(3n) { background: var(--block-blue); }
.well-pixels span:nth-child(4n) { background: var(--block-orange); width: 10px; height: 10px; }

.piece { position: absolute; left: calc(var(--c0) * var(--cell)); top: calc(var(--r0) * var(--cell));
  width: calc(var(--w) * var(--cell)); height: calc(var(--h) * var(--cell)); will-change: transform, opacity; }
.piece-blue { --tone: var(--block-blue); --shade: var(--block-blue-shade); --on: var(--on-blue); }
.piece-yellow { --tone: var(--block-yellow); --shade: var(--block-yellow-shade); --on: var(--on-yellow); }
.piece-orange { --tone: var(--block-orange); --shade: var(--block-orange-shade); --on: var(--on-orange); }
.piece-red { --tone: var(--block-red); --shade: var(--block-red-shade); --on: var(--on-red); }
.piece-green { --tone: var(--block-green); --shade: var(--block-green-shade); --on: var(--on-green); }
.piece-plate { --tone: var(--plate-200); --shade: var(--line-strong); --on: var(--ink); }
.cell { position: absolute; left: calc(var(--c) * var(--cell)); top: calc(var(--r) * var(--cell)); width: var(--cell); height: var(--cell);
  background: var(--tone); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.cell.bottom { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 0 0 var(--shade); }   /* the side face */
.piece-content { position: absolute; left: calc(var(--x) * var(--cell)); top: calc(var(--y) * var(--cell));
  width: calc(var(--bw) * var(--cell)); height: calc(var(--bh) * var(--cell)); box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px; background: var(--tone); color: var(--on); }
.piece-title { font: 700 26px/30px var(--font-sans); letter-spacing: -0.01em; }
.piece-text { font: var(--text-body); }
.piece-content img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* phones and narrow windows: the pieces one under the other, each sliding in */
.well.flow .well-board, .well.still .well-board { --cell: min(88px, calc((100vw - 32px) / 4)); width: 100%; height: auto;
  max-width: 560px; background: none; display: flex; flex-direction: column; gap: var(--space-6); }
.well.flow .well-head, .well.still .well-head { position: static; width: auto; padding: 0; }
.well.flow .piece, .well.still .piece { position: relative; left: auto; top: auto; flex: none; }
.well.flow .piece:nth-of-type(even), .well.still .piece:nth-of-type(even) { align-self: flex-end; }
.well.flow .piece { opacity: 0; transform: translateX(-48px); transition: opacity 420ms var(--uq-ease-out, ease-out), transform 420ms var(--uq-ease-out, ease-out); }
.well.flow .piece[data-from="right"] { transform: translateX(48px); }
.well.flow .piece[data-from="above"] { transform: translateY(-40px); }
.well.flow .piece.in { opacity: 1; transform: none; }
.well.flow .piece-title, .well.still .piece-title { font-size: 18px; line-height: 22px; }
.well.flow .piece-content, .well.still .piece-content { padding: 10px 14px; }

/* how it works */
.steps { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.steps li { position: relative; padding-top: var(--space-6); }
.steps p { color: var(--ink-muted); }
.num { display: block; font: var(--text-numeral); color: var(--block-orange); margin-bottom: var(--space-4); }
/* the steps bar (as the generator's tabs): each step's bar fills orange in turn, then its number
   steps in (3 hard steps) and its words appear (steps.js adds .play once it is in view) */
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); overflow: hidden; }
.sbar::after { content: ""; position: absolute; inset: 0; background: var(--block-orange); transform: scaleX(0); transform-origin: left; }
.steps.ready li .num { clip-path: inset(100% 0 0 0); }
.steps.ready li h3, .steps.ready li p { opacity: 0; transform: translateY(8px); }
.steps.play .sbar::after, .steps li.play .sbar::after { transform: scaleX(1); transition: transform 420ms var(--uq-ease-out, ease-out) calc(var(--i) * 380ms); }
.steps.play li .num, .steps li.play .num { clip-path: inset(0 0 0 0); transition: clip-path 60ms steps(3, end) calc(var(--i) * 380ms + 300ms); }
.steps.play li h3, .steps.play li p, .steps li.play h3, .steps li.play p { opacity: 1; transform: none;
  transition: opacity 320ms var(--uq-ease-out, ease-out) calc(var(--i) * 380ms + 380ms), transform 320ms var(--uq-ease-out, ease-out) calc(var(--i) * 380ms + 380ms); }

/* the city, print guide: text left, details right */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.features p { margin: var(--space-2) 0 0; color: var(--ink-muted); }
#print .uq-specs { margin-top: var(--space-8); }
.ways { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.ways p { margin: var(--space-2) 0 0; color: var(--ink-muted); }

/* under the hood */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
.cols p { color: var(--ink-muted); }

/* support: Buy me a coffee, and its ways next to it (donate.js) */
.donate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; }
.donate-ways:not([hidden]) { display: inline-flex; gap: var(--space-2); }

/* questions */
details { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
details:first-of-type { border-top: 1px solid var(--line); }
summary { font: var(--text-heading-2); font-size: 18px; cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: var(--space-4); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-muted); }
details[open] summary::after { content: "–"; }
details p { margin: var(--space-3) 0 0; color: var(--ink-muted); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-12) 0; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.footer-grid .small { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; }
.footer-nav a { color: var(--ink-muted); font: var(--text-body-s); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }

/* tablets and phones */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  section { padding: var(--space-16) 0; }
  .wrap { padding: 0 var(--space-4); }
  .hero { padding-top: var(--space-8); }
  .hero-grid, .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .cols { grid-template-columns: 1fr; }
  h1 { font-size: 44px; line-height: 48px; }
  h2 { font-size: 34px; line-height: 38px; }
  .ph-inset { right: 0; }
  .photo-inset { right: 0; }
  .footer-nav { margin-left: 0; }
  .about .photo { justify-self: stretch; max-width: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps li { padding: 0 0 0 var(--space-6); }
  .sbar { right: auto; bottom: 0; width: 4px; height: auto; }
  .sbar::after { transform: scaleY(0); transform-origin: top; }
  .steps.play .sbar::after, .steps li.play .sbar::after { transform: scaleY(1); }
}