/* ==========================================================================
   MAXIWISE — horizontal deck
   The case page is the brand-identity deck and nothing else: 32 boards on a
   snapping horizontal rail, driven by arrows, drag, wheel, or keyboard.
   ========================================================================== */

.deckpage {
  background: var(--paper);
}

/* ---------- head ---------- */

.deckhead__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.deckhead__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.deckhead__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.95;
  font-weight: 500;
  color: var(--black);
}

.deckhead__meta {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-400);
  padding-bottom: 0.6rem;
}

/* ==========================================================================
   CASE STUDY — lede, chapters, specimens, deliverables
   The page reads as an article with the work cut into it: a standfirst, the
   brand book on rails, the thinking, the specimens, then the work in market.
   ========================================================================== */

.lede {
  padding-top: 3rem;
}

.lede__text {
  max-width: 52rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  font-weight: 500;
  color: var(--black);
}

.chapters {
  padding-top: 5rem;
}

.chapter {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
}

.chapter + .chapter,
.chapter + .spec,
.spec + .chapter,
.spec + .spec {
  margin-top: 4.5rem;
}

/* the label rides alongside its prose while the section is being read */
.chapter__label {
  position: sticky;
  top: 7rem;
}

.chapter__body {
  max-width: 42rem;
}

.chapter__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey-500);
}

.chapter__text + .chapter__text {
  margin-top: 1.25rem;
}

/* ---------- specimens ---------- */

.spec {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
}

.spec__title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.spec__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--grey-400);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  max-width: 46rem;
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.swatch__chip {
  display: flex;
  align-items: flex-end;
  height: 7rem;
  padding: 0.75rem;
  border: 1px solid var(--glass-ink-line);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.swatch__name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--black);
}

.swatch__meta {
  font-size: 0.75rem;
  color: var(--grey-400);
}

.swatch__sep {
  margin: 0 0.35rem;
  color: var(--grey-200);
}

.tscale {
  max-width: 42rem;
  border-top: 1px solid var(--grey-100);
}

.tscale__row {
  display: grid;
  grid-template-columns: 5rem 4rem 4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--grey-100);
}

/* the specimen is set in the site's own display face — Outfit is the client's
   typeface and is not loaded here, so the row shows the SCALE, not the face */
.tscale__specimen {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  color: var(--black);
}

.tscale__step {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--black);
}

.tscale__px,
.tscale__role {
  font-size: 0.75rem;
  color: var(--grey-400);
}

.tscale__px {
  font-variant-numeric: tabular-nums;
}

/* ---------- deliverables ---------- */

.delivered__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 42rem;
}

.delivered__item {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--glass-ink);
  border: 1px solid var(--glass-ink-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey-400);
}

/* ==========================================================================
   BANDS — the deck runs as rails, alternating direction row to row
   Each track holds its cards twice and travels exactly half its width, so the
   loop is seamless. The rails never stop — no hover pause.
   ========================================================================== */

.bands {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 5.5rem;
  --band-h: clamp(9rem, 23vh, 17rem);
}

.band {
  width: 100%;
  overflow: clip;
}

.band__track {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.band__track--left {
  animation: marquee-x var(--band-dur, 80s) linear infinite;
}

.band__track--right {
  animation: marquee-x-rev var(--band-dur, 80s) linear infinite;
}

/* Each card carries its own artwork's ground colour inline, sampled from the
   image's border ring — so a lime board never sits on a plum card while it
   loads, and nothing behind a shot ever fights the shot. */
.band__card {
  position: relative;
  display: block;
  flex: none;
  height: var(--band-h);
  overflow: clip;
  background-color: var(--grey-50);
}

.band__img {
  display: block;
  height: 100%;
  width: auto;
}


/* a full-length page design is far too tall to size by height — it becomes a
   preview card the width of a browser window, showing the top of the page */
.band__card--tall {
  width: calc(var(--band-h) * 0.68);
}

.band__card--tall .band__img {
  width: 100%;
  height: auto;
}

/* the small print under the rails: these are mockups, not licensed shots */
.bands__note {
  max-width: 42rem;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--grey-400);
}

.bands__note .wm {
  color: var(--grey-400);
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
  .deckhead__meta { padding-bottom: 0; }
  .chapter,
  .spec { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .chapter__label { position: static; }
  .chapter + .chapter,
  .chapter + .spec,
  .spec + .chapter,
  .spec + .spec { margin-top: 3rem; }
  .chapters, .delivered { padding-top: 3rem; }
  .tscale__row { grid-template-columns: 4rem 3.5rem minmax(0, 1fr); }
  .tscale__px { display: none; }
  .bands { --band-h: clamp(7.5rem, 26vw, 11rem); gap: 0.6rem; padding-top: 3rem; }
  .band__track { gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; }
  .band { overflow-x: auto; }
}