/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 2.5rem;
  align-items: center;
  padding-block: 2.25rem 6.75rem;
}

.hero__title {
  font-size: var(--fs-impact);
  line-height: var(--lh-impact);
  letter-spacing: var(--tracking-display);
  max-width: 11ch;
}

.hero__title .highlight { padding: 0 .1em; border-radius: .1em; }

.hero__subtitle {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.hero__note {
  margin-top: 2.25rem;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.hero__art {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  padding: 0 1.5rem 2.5rem 0;
}

/* The photo card sits on a plate in the accent color, both a little rotated. */
.pot-card {
  position: relative;
  transform: rotate(-2.7deg);
}

.pot-card::before {
  content: "";
  position: absolute;
  inset: 8% -6% -5% 6%;
  z-index: -1;
  background: var(--rail);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius-card);
  transform: rotate(5deg);
}

.pot-card__image {
  width: 100%;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--ink);
}

.sticker--hero {
  position: absolute;
  left: -3rem;
  bottom: 1rem;
  transform: rotate(-5deg);
}

/* Code got cheap */
.contrast-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.625rem;
  margin-top: 3.5rem;
}

.contrast-cards__icon { margin-bottom: 1.5rem; }
.contrast-cards__icon--yes { color: var(--accent); }
.contrast-cards__icon--no { color: var(--rails); }

.sticker--corner {
  position: absolute;
  right: -1.75rem;
  bottom: -2.5rem;
  transform: rotate(4deg);
}

/* AI leads the shared layers. Each profile then has a readable route. */
.pathways__heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: var(--space-xl); }
.pathways .section__title { text-wrap: balance; }
.pathways__heading .section__lead { margin: 0; font-size: var(--fs-reading); color: var(--ink-muted); }
.pathways__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; padding: .5rem; border: var(--border-thin) solid var(--ink); border-radius: var(--radius-card); background: var(--panel-bg); color: var(--surface); }
.pathways__layer { min-width: 0; padding: 1.5rem; }
.pathways__layer + .pathways__layer { border-left: 1px solid var(--terminal-rule); }
.pathways__layer-mark { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.pathways__layer-mark .icon { flex: none; }
.pathways__role { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--panel-text); }
.pathways__layer h3 { font-size: var(--fs-card-title); line-height: var(--lh-ui-title); text-wrap: balance; }
.pathways__layer--ai h3 { color: var(--highlight); font-size: var(--fs-ui-title); }
.pathways__layer--ai .pathways__layer-mark .icon { color: var(--highlight); }
.pathways__layer--rails h3 { color: var(--surface); }
.pathways__layer--foundation h3 { color: var(--panel-text); font-size: var(--fs-control-large); }
.pathways__layer p { margin-top: .75rem; font-size: var(--fs-control); color: var(--panel-text); line-height: var(--lh-ui); }
.pathways__profiles { margin-top: 2rem; }
.pathways__profile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); align-items: start; gap: 2.5rem; padding-block: 2rem; border-bottom: var(--border-thin) solid var(--rail-tie); }
.pathways__profile-heading h3 { font-size: var(--fs-card-title); line-height: var(--lh-ui-title); }
.pathways__profile-heading p { max-width: 31ch; margin-top: .75rem; color: var(--ink-muted); font-size: var(--fs-control); line-height: var(--lh-ui); }
.pathways ol.pathways__route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0; }
.pathways__step { position: relative; min-width: 0; padding-top: 1rem; border-top: var(--border-thin) solid var(--ink); }
.pathways__step:not(:last-child)::after { content: ""; position: absolute; width: .5rem; height: .5rem; border-top: var(--border-thin) solid var(--ink); border-right: var(--border-thin) solid var(--ink); top: -.3125rem; right: 0; transform: rotate(45deg); }
.pathways__number { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .75rem; background: var(--surface-muted); border: var(--border-thin) solid var(--ink); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-title); }
.pathways__step--rails .pathways__number { background: var(--ink); color: var(--surface); }
.pathways__step strong { font-size: var(--fs-control-large); line-height: var(--lh-ui); }
.pathways__step p { margin-top: .5rem; color: var(--ink-muted); font-size: var(--fs-control); line-height: var(--lh-ui); }
.pathways__step--optional { border-top-style: dashed; }
.pathways__optional { display: inline-block; margin-top: .75rem; padding: .25rem .5rem; background: var(--surface-muted); border-radius: .25rem; color: var(--ink-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.pathways__destination { display: flex; gap: 1rem; align-items: start; max-width: 56rem; margin: 2.5rem auto 0; }
.pathways__destination > .icon { flex: none; margin-top: .25rem; color: var(--accent-fill); }
.pathways__closing { font-size: var(--fs-card-title); line-height: var(--lh-ui-title); font-weight: var(--fw-title); }
.pathways__note { margin-top: .75rem; color: var(--ink-muted); font-size: var(--fs-ui-body); line-height: var(--lh-body); }
@media (max-width: 1000px) {
  .pathways__heading { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pathways__profile { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pathways__profile-heading p { max-width: 60ch; }
}
@media (max-width: 600px) {
  .pathways__layers { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
  .pathways__layer { padding: 1.25rem; }
  .pathways__layer + .pathways__layer { border-left: 0; border-top: 1px solid var(--terminal-rule); }
  .pathways__layer-mark { margin-bottom: .75rem; }
  .pathways ol.pathways__route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pathways__step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; border-top: 0; padding: 0 0 1.5rem; }
  .pathways__step:last-child { padding-bottom: 0; }
  .pathways__step:not(:last-child)::after { width: 0; height: calc(100% - 2rem); border: 0; border-left: var(--border-thin) solid var(--rail-tie); transform: none; top: 2rem; left: calc(1rem - 1px); }
  .pathways__step--optional { border: 0; }
  .pathways__number { margin: 0; }
  .pathways__step p { margin-top: .25rem; }
}

/* We don't claim. We measure. */
.scorecards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.125rem;
  margin-top: 3.5rem;
}

.sticker--between {
  position: absolute;
  top: -2rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%) rotate(-5deg);
}

.scorecard { padding: 2.75rem 2.375rem 2.25rem; }

.scorecard .branch-link { font-size: var(--fs-control-large); }

.scorecard__score {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: .9;
}

.scorecard__score strong { font-size: var(--fs-metric-xl); letter-spacing: -0.02em; }
.scorecard__score .fraction__max { font-size: var(--fs-metric-unit); }
.scorecard--after .scorecard__score strong { color: var(--accent); }

.scorecard__metric {
  margin-block: 1.125rem .875rem;
  color: var(--ink-muted);
  font-weight: var(--fw-ui);
  font-size: var(--fs-control);
  line-height: var(--lh-ui);
}

.scorecard__text {
  margin-top: 1.25rem;
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.measure__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3.5rem;
}

.measure__claim {
  max-width: 880px;
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: var(--fs-card-title);
  line-height: var(--lh-ui-title);
  letter-spacing: var(--tracking-title);
}

.measure__closing .button { flex: none; }

.measure__source {
  margin-top: 3.75rem;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.terminal {
  background: var(--ink);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--terminal-shadow);
  color: var(--terminal-text);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  gap: .625rem;
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--terminal-rule);
}

.terminal__bar > span {
  width: .8125rem;
  height: .8125rem;
  border-radius: 50%;
  background: var(--terminal-dot-1);
}

.terminal__bar > span:nth-child(2) { background: var(--terminal-dot-2); }
.terminal__bar > span:nth-child(3) { background: var(--terminal-dot-3); }

.terminal__body {
  padding: 1.5rem 1.75rem 1.75rem;
  overflow-x: auto;
  font-size: var(--fs-code);
  line-height: 2.35;
}

.terminal__prompt { color: var(--terminal-prompt); font-weight: 700; }
.terminal__comment { color: var(--terminal-comment); }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* The audience is an editorial spread, with one lead profile. */
.audience__heading { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; }
.audience__heading .section__lead { margin: 0; max-width: 44ch; font-size: var(--fs-reading); color: var(--ink-muted); }
.profiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; margin-top: 3rem; }
.profile { min-width: 0; padding: 2rem; border: var(--border-thin) solid var(--ink); border-radius: var(--radius-card); }
.profile--experienced { grid-row: span 2; display: flex; flex-direction: column; background: var(--panel-bg); color: var(--surface); padding: 2.5rem; }
.profile--junior { background: var(--surface); }
.profile--vibe { background: var(--bg); }
.profile__heading { display: flex; gap: 1rem; align-items: center; }
.profile__icon { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: var(--border-thin) solid var(--ink); border-radius: var(--radius-btn); background: var(--surface-muted); color: var(--ink); }
.profile--experienced .profile__heading { flex-direction: column; align-items: start; gap: 1.5rem; }
.profile--experienced .profile__icon { background: var(--highlight); }
.profile__name { font-size: var(--fs-card-title); line-height: var(--lh-ui-title); }
.profile--experienced .profile__name { font-size: var(--fs-ui-title); color: var(--panel-title); max-width: 15ch; }
.profile__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem; margin-top: 1.75rem; }
.profile__facts dt { color: var(--ink-muted); font-weight: var(--fw-ui); font-size: var(--fs-caption); line-height: var(--lh-caption); margin-bottom: .5rem; }
.profile__facts dd { font-size: var(--fs-control); line-height: var(--lh-ui); }
.profile__goal { border-left: 1px solid var(--rail-tie); padding-left: 1.25rem; }
.profile__want { font-weight: var(--fw-ui); }
.profile--experienced .profile__facts { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-block: 2rem; }
.profile--experienced .profile__facts dt { color: var(--panel-text); }
.profile--experienced .profile__facts dd { font-size: var(--fs-reading); }
.profile--experienced .profile__goal { border-left: 0; border-top: 1px solid var(--terminal-rule); padding: 2rem 0 0; }
.profile__direction { display: flex; gap: .75rem; align-items: start; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rail-tie); font-weight: var(--fw-ui); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.profile__direction .icon { flex: none; }
.profile--experienced .profile__direction { margin-top: auto; padding-top: 1.5rem; border-color: var(--terminal-rule); color: var(--panel-text); }

/* A lesson explains the decision; the project keeps the working instructions. */
.how-workshop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-top: 3rem; border: var(--border-thin) solid var(--ink); border-radius: var(--radius-card); overflow: hidden; }
.how-workshop__lesson, .how-workshop__practice { min-width: 0; padding: 2.5rem; }
.how-workshop__lesson { background: var(--surface); }
.how-workshop__practice { background: var(--panel-bg); color: var(--surface); }
.how-workshop__eyebrow { display: flex; gap: .75rem; align-items: center; font-size: var(--fs-caption); font-weight: var(--fw-ui); }
.how-workshop h3 { margin-top: 1.5rem; font-size: var(--fs-ui-title); line-height: var(--lh-ui-title); }
.how-workshop h3 + p { margin-top: 1rem; font-size: var(--fs-reading); line-height: var(--lh-body); color: var(--ink-muted); }
.how-workshop__practice h3 { color: var(--panel-title); }
.how-workshop__practice h3 + p { color: var(--panel-text); }
.how-workshop__questions { display: grid; gap: 1rem; margin-top: 2rem; }
.how-workshop__questions li { display: flex; gap: .875rem; align-items: start; padding-top: 1rem; border-top: var(--border-thin) solid var(--rail-tie); font-size: var(--fs-control-large); font-weight: var(--fw-ui); }
.how-workshop__questions .icon { flex: none; margin-top: .125rem; }
.how-workshop__file { margin-top: 1.75rem; border: 1px solid var(--terminal-rule); border-radius: var(--radius-btn); overflow: hidden; }
.how-workshop__file-bar { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--terminal-rule); color: var(--panel-text); font-size: var(--fs-caption); }
.how-workshop__file-bar > span:last-child { margin-left: auto; }
.snippet { margin-top: 1.75rem; padding: 1.25rem; background: var(--surface-muted); border: var(--border-thin) solid var(--ink); border-radius: var(--radius-btn); font-size: var(--fs-code-small); line-height: 1.7; white-space: pre-wrap; }
.how-workshop .snippet { margin: 0; border: 0; border-radius: 0; background: var(--panel-bg); color: var(--terminal-text); overflow-wrap: anywhere; }
.how__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-top: 2rem; }
.how__closing { max-width: 30ch; font-size: var(--fs-card-title); line-height: var(--lh-ui-title); font-weight: var(--fw-title); }
.features { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 3.25rem; font-weight: var(--fw-ui); font-size: var(--fs-control); line-height: var(--lh-ui); }
.features li { display: flex; align-items: center; gap: .875rem; }
.how__footer .features { flex-direction: column; gap: .75rem; margin: 0; }

/* Who's behind it */
.people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  margin-top: 3.5rem;
}

.person {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.person__photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 9rem;
  height: 9rem;
  border: var(--border-thin) solid var(--ink);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-code);
}

img.person__photo { object-fit: cover; }

.person__name { font-size: var(--fs-card-title); line-height: var(--lh-ui-title); }

.person__bio {
  margin-top: .75rem;
  color: var(--ink-muted);
  font-size: var(--fs-ui-body);
  line-height: var(--lh-ui);
}

.team { padding-bottom: 5rem; }

@media (max-width: 1100px) {
  .profiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .measure__closing { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block: 2.5rem 4rem; }
  .hero__art { justify-self: center; margin-top: 1rem; max-width: 360px; }
  .contrast-cards, .scorecards, .people, .how-workshop, .profiles { grid-template-columns: minmax(0, 1fr); }
  .profile--experienced { grid-row: auto; }
  .audience__heading { display: block; }
  .audience__heading .section__lead { margin-top: 1.5rem; }
  .scorecards { gap: 3.5rem; }
  .sticker--between { top: calc(50% - 1.75rem); }
  .sticker--corner { right: .5rem; bottom: -2rem; }
  .person { align-items: flex-start; }
}

@media (max-width: 560px) {
  .profile, .profile--experienced, .how-workshop__lesson, .how-workshop__practice { padding: 1.5rem; }
  .profile__facts { grid-template-columns: minmax(0, 1fr); }
  .profile__goal { border-left: 0; border-top: 1px solid var(--rail-tie); padding: 1.25rem 0 0; }
  .profile__heading { align-items: start; }
  .hero__actions .button { width: 100%; }
  .sticker--hero { left: -.5rem; }
  .person__photo { width: 6rem; height: 6rem; }
  .scorecard { padding: 2rem 1.5rem; }
}

/* The project overview stays a short entry point on the home page. */
.app-teaser__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.app-teaser__eyebrow { margin-bottom: var(--space-m); font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-ui); }
.app-teaser .section__lead { margin-top: var(--space-l); color: var(--ink-muted); }
.app-teaser__actions { display: flex; flex-direction: column; align-items: start; gap: var(--space-l); }
.app-teaser__github { font-size: var(--fs-control); padding-inline: var(--space-m); background: transparent; }
.app-teaser__github > span { text-align: left; }

@media (max-width: 900px) {
  .app-teaser__grid { grid-template-columns: minmax(0, 1fr); }
  .app-teaser__actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .app-teaser__actions { flex-direction: column; align-items: stretch; }
  .app-teaser__github { justify-content: center; flex-wrap: wrap; }
}