/* --- Base --- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #FFE94D;
  color: #121212;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  overflow-x: hidden;
}

:root {
  --pad: clamp(16px, 4vmin, 48px);
  --spine: 64px;
}

/* --- Frame layout --- */
.frame {
  display: grid;
  grid-template-columns: 1fr var(--spine);
  min-height: 250vh;
}

/* --- Stage (image canvas) --- */
.stage {
  position: relative;
  min-height: 200vh; /* tall canvas for stacked layout */
}

/* --- Image tiles --- */
.tile {
  position: absolute;
  width: var(--w, 320px);
  left: var(--x, 0);
  top: var(--y, 0);
  margin: 0;
}

.tile.img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
}

/* --- Right-hand spine navigation --- */
.spine {
  	border-left:1px solid rgba(0,0,0,.2);
	display:grid;
	place-items:left;
	justify-content:center;
	padding-top:25px;
}

.spine ul {
  	display:flex;
	list-style:none;
	margin:50% 0 0 0;
	padding:0;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	letter-spacing:1px;
	font-weight:700;
	text-transform:uppercase;
}
.spine a { color: #121212; text-decoration: none; }
.spine li + li { margin-top: 2rem; }



/* --- Footer --- */
.footer { background: #FFE94D; border-top: 1px solid rgba(0,0,0,.15); }
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--pad);
  font-size: 14px;
}
.inline-link {
  color: #121212;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* --- Responsive behaviour --- */
@media (max-width: 960px) {
  .frame { grid-template-columns: 1fr; }
  .spine { display: none; }

  .stage {
    padding: var(--pad);
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 6vmin, 64px); /* consistent vertical spacing */
  }

  .tile {
    position: static;
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .stage { gap: clamp(16px, 5vmin, 48px); }
}