/* The home page's guide for visitors (2026-11-04), loaded after site.css and
   mission.css by index.html only: the four ways in, MAX right now, "Learn how
   it works" and its six chapters, the four things, the next steps, and the
   phone controls. The phone menu's tiles are site.css's, on every page. */

/* ---- 1. What brings you to MAX? ------------------------------------------ */
/* Quieter than the hero: small heading, plain links, paper ground. */

.paths {
  background: var(--paper);
  border-bottom: 2px solid var(--line-strong);
}

.paths__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 28px;
  padding-block: 14px;
}

.paths__title {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.paths__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paths__link {
  position: relative;
  display: grid;
  gap: 1px;
  min-height: 52px;
  padding: 8px 34px 8px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.paths__link:hover,
.paths__link:focus-visible {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.paths__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.paths__what {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-muted);
}

.paths__go {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  transition: transform 140ms ease;
}

.paths__link:hover .paths__go {
  transform: translate(3px, -50%);
}

@media (max-width: 960px) {
  .paths__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .paths__inner {
    padding-block: 16px;
  }

  .paths__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .paths__link {
    min-height: 64px;
    padding: 10px 12px;
    align-content: center;
  }

  .paths__go {
    display: none;
  }
}

/* ---- 4. MAX right now: three facts, then Plan your visit -------------------- */

.now {
  background: var(--ink);
  color: var(--on-ink);
  border-bottom: 2px solid var(--line-strong);
}

.now__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
  padding-block: 16px;
}

.now__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--on-ink);
}

.now__example {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--highlight);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.now__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.now__fact {
  display: grid;
  gap: 2px;
  padding: 2px 20px;
  border-left: 1px solid rgba(247, 244, 236, 0.25);
}

.now__fact dt {
  font-size: 12px;
  font-weight: 500;
  color: rgba(247, 244, 236, 0.72);
}

.now__fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}

.now__fact strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.now__fact[data-state='open'] strong {
  color: var(--on-ink-accent);
}

.now__fact[data-fact='artists'] strong {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
}

.now__more {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(247, 244, 236, 0.8);
}

/* The dot says open or closed by its colour and by the words beside it. */
.now__dot {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.4);
}

.now__fact[data-state='open'] .now__dot {
  background: var(--on-ink-accent);
  animation: studio-now-pulse 2s ease-out infinite;
}

.now__plan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.now__plan:hover {
  background: var(--accent-deep);
}

.now__people {
  grid-column: 1 / -1;
  margin: 0;
}

.now__people:empty {
  display: none;
}

@media (max-width: 1080px) {
  .now__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .now__facts {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .now__plan {
    grid-column: 2;
    grid-row: 1;
  }

  .now__fact:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .now__inner {
    padding-block: 18px;
  }

  .now__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .now__fact {
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid rgba(247, 244, 236, 0.2);
  }

  .now__fact:first-child {
    border-top: 0;
    padding-top: 4px;
  }

  .now__plan {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: center;
  }
}

/* ---- 3. The four things, as one diagram ---------------------------------- */

.how-four .flow {
  margin-top: 24px;
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 18px 22px;
  border: 3px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.flow__step:first-child {
  background: var(--accent-soft);
}

/* The arrow from one to the next. */
.flow__step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 18px;
  right: -20px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
}

.flow__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.flow__verb {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.flow__text strong:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.flow__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

@media (max-width: 1080px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow__step:nth-child(2)::after {
    display: none;
  }
}

/* A phone: one line down the left joins them, as the career track does. */
@media (max-width: 640px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .flow::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 32px;
    width: 3px;
    background: var(--line-strong);
  }

  .flow__step {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px;
  }

  .flow__step > :not(.flow__n) {
    grid-column: 2;
  }

  .flow__n {
    grid-row: 1 / span 2;
  }

  .flow__verb {
    margin: 2px 0 0;
    font-size: 22px;
  }

  .flow__step:not(:last-child)::after {
    display: none;
  }
}

/* ---- 2. Chapters: where you are in the story ------------------------------- */

/* Folded until "Learn how it works"; then one chapter at a time. */
.mission .constrain > .how-open,
.mission .constrain > .how {
  margin-top: 32px;
}

html:not(.js) .how-open {
  display: none;
}

.js .how:not(.is-open) {
  display: none;
}

.how.is-open {
  animation: mission-open 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.how__panels {
  margin-top: 36px;
}

.js .how .chapter:not(.is-current) {
  display: none;
}

.js .how .chapter.is-current {
  animation: how-in 260ms ease-out both;
}

@keyframes how-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Without a script every chapter shows, one after another. */
html:not(.js) .how .chapter + .chapter {
  margin-top: 72px;
}

/* What was the end of the long story now ends its chapters. */
.mi-gives > .ripple__year {
  margin-top: 48px;
}

.ripple > .mission__close {
  grid-column: 1 / -1;
  margin-top: 24px;
}

/* On to the next chapter, and back: quieter than a next step. */
.how__pager {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin-top: 36px;
  grid-column: 1 / -1;
}

.how__pagebtn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 18px;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.how__pagebtn:hover {
  background: var(--accent-soft);
}

.how__pagebtn--next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
  background: var(--accent);
}

.how__pagebtn--next:hover {
  background: var(--accent-deep);
}

.how__pagelabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
}

.how__pagebtn--next .how__pagelabel {
  color: var(--on-accent);
}

@media (max-width: 760px) {
  .how__pagebtn {
    font-size: 14px;
    padding: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how.is-open,
  .js .how .chapter.is-current {
    animation: none;
  }
}

.chapters {
  position: sticky;
  top: calc(var(--header-h, 72px) + 10px);
  z-index: 15;
  padding: 6px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  transition: box-shadow 160ms ease, transform 220ms ease;
}

.chapters.is-stuck {
  box-shadow: 0 6px 18px rgba(23, 20, 15, 0.14);
}

.chapters__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapters__list > li {
  flex: 1 1 0;
  min-width: 0;
}

.chapters__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.chapters__link:hover {
  background: var(--surface-sunken);
}

.chapters__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.chapters__link.is-done .chapters__n {
  background: var(--line-strong);
  color: var(--paper);
}

.chapters__link[aria-current] {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

.chapters__link[aria-current] .chapters__n {
  background: var(--line-strong);
  color: var(--accent);
}

/* How far through the story, as a thin line along the bottom of the bar. */
.chapters__bar {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -2px;
  height: 3px;
  overflow: hidden;
}

.chapters__bar > span {
  display: block;
  height: 100%;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left;
}

/* Each chapter starts below the header and the bar. */
.chapter {
  scroll-margin-top: calc(var(--header-h, 72px) + var(--chapters-h, 64px) + 16px);
}

@media (max-width: 900px) {
  /* Edge to edge under the header, and out of the way while you read on:
     it tucks under the header going down, and comes back going up. */
  .chapters {
    top: var(--header-h, 72px);
    margin-inline: calc(var(--gutter) * -1);
    padding: 8px var(--gutter);
    border-width: 0 0 2px;
    border-radius: 0;
  }

  .chapters.is-stuck {
    border-top-width: 0;
  }

  .chapters.is-tucked {
    transform: translateY(calc(-100% - 2px));
    box-shadow: none;
  }

  .chapters__bar {
    left: 0;
    right: 0;
  }

  .chapters__list {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .chapters__list::-webkit-scrollbar {
    display: none;
  }

  .chapters__list > li {
    flex: none;
    scroll-snap-align: center;
  }

  .chapters__link {
    min-height: 40px;
    padding: 4px 12px 4px 6px;
    font-size: 14px;
  }
}

/* ---- 5. Next steps: one shape, at the end of each section ----------------- */

.next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid var(--line-strong);
}

.next-step__label {
  margin: 0;
  min-width: 88px;
  font-size: 13px;
  font-weight: 600;
  color: var(--highlight);
}

.next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.next-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid var(--line-strong);
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.next-step__btn:hover {
  background: #34302a;
}

.next-step__btn--alt {
  background: transparent;
  color: var(--ink);
}

.next-step__btn--alt:hover {
  background: var(--surface-sunken);
}

/* In the mission's cards and grids, the row spans the width. */
.serve > .next-step,
.patron > .next-step,
.model > .next-step {
  margin-top: 24px;
}

.story__text > .next-step {
  margin-top: 24px;
}

@media (max-width: 760px) {
  .next-step {
    gap: 10px;
  }

  .next-step__label {
    flex-basis: 100%;
  }

  .next-step__actions,
  .next-step__btn {
    width: 100%;
  }
}

/* ---- 6. Phones ------------------------------------------------------------ */

/* The five-step story: a pager under the dots; Back and Next never move. */
.pager {
  display: none;
}

@media (max-width: 760px) {
  .model .model__steps { order: 1; }
  .model .pager { order: 1; }
  .model .model__stage { order: 2; }
  .model .model__try { order: 3; }
  .model .model__return { order: 4; }
  .model .model__note { order: 5; }
  .model > .next-step { order: 6; }

  .pager {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .pager__btn {
    min-height: 52px;
    min-width: 52px;
    padding: 0 18px;
    border: 3px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .pager__btn--next {
    background: var(--ink);
    color: var(--on-ink);
  }

  .pager__btn:disabled {
    opacity: 0.35;
  }

  .pager__where {
    display: grid;
    margin: 0;
    text-align: center;
    line-height: 1.25;
  }

  .pager__n {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
  }

  .pager__label {
    font-size: 15px;
    font-weight: 700;
  }

  /* The pager does the job the in-card buttons did. */
  .model .model__nav {
    display: none;
  }

  /* The result sits right under the numbers it answers, so it no longer
     needs to ride along the bottom of the screen. */
  .model .model__return {
    position: static;
    box-shadow: none;
  }

  .model__stage {
    touch-action: pan-y;
  }

  /* The patron's three tabs on one line, in words that fit. */
  .patron__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .patron__tab {
    min-height: 48px;
    padding: 6px 4px;
    border-width: 2px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
  }

  .patron__tab[aria-selected='true'] {
    box-shadow: 3px 3px 0 var(--line-strong);
  }
}

/* The calculator: − and + do the changing on a phone; the slider only shows where you are. */
.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper > input {
  flex: 1;
  min-width: 0;
}

.stepper__btn {
  display: none;
}

@media (max-width: 760px) {
  .stepper__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border: 3px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font: 700 24px/1 var(--body);
    cursor: pointer;
  }

  .stepper__btn:disabled {
    opacity: 0.35;
  }

  .stepper > input {
    pointer-events: none;
  }
}

/* In the five-step story's phone order, the chapter pager comes last. */
@media (max-width: 760px) {
  .model > .how__pager {
    order: 7;
  }
}