/*
 * Mach9 rebrand case study.
 * The page shell (header, footer, captions) stays in the portfolio's own
 * type; every plate is drawn in the Mach9 system itself: Inter Tight,
 * Inter and DM Mono on the rgb(16,16,16) canvas, one blurple accent.
 * Plates are size containers, so their type scales with the plate (cqw).
 */

/* Inter, Inter Tight and DM Mono are SIL Open Font License */
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/mach9/InterTight-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/mach9/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/fonts/mach9/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/fonts/mach9/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

/* tokens from the Mach9 design system (colors_and_type.css) */
.m9 {
  --m9-bg: rgb(16, 16, 16);
  --m9-bg-elevated: rgb(24, 24, 24);
  --m9-bg-tool: rgb(43, 43, 43);
  --m9-ink-100: #fff;
  --m9-ink-90: rgb(243, 243, 243);
  --m9-ink-70: rgb(188, 188, 188);
  --m9-ink-55: rgb(141, 141, 141);
  --m9-ink-40: rgb(129, 129, 129);
  --m9-ink-30: rgb(76, 76, 76);
  --m9-ink-25: rgb(67, 67, 67);
  --m9-blurple: #4e59f7;
  --m9-blurple-light: #8b95fa;
  --m9-blurple-deep: #2e3491;
  --m9-coral: rgb(255, 99, 78);
  --m9-amber: rgb(255, 128, 1);
  --m9-yellow: rgb(238, 255, 0);
  --m9-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --m9-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --m9-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --m9-hairline: 0.5px solid var(--m9-ink-40);
  --m9-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  background: var(--m9-bg);
  color: var(--m9-ink-70);
  padding: 3rem var(--pad) 6rem;
}

/* ---------- page layout: caption column + plates ---------- */

.m9-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.m9-row + .m9-row {
  margin-top: 9rem;
}

.m9-caption {
  grid-column: span 3;
  position: sticky;
  top: 2.5rem;
  font-size: 1.2rem;
  line-height: 1.6;
}

.m9-caption .m9-label {
  display: block;
  color: var(--m9-ink-100);
}

.m9-caption hr {
  height: 0;
  margin: 0.8em 0;
  border: 0;
  border-top: var(--m9-hairline);
}

.m9-caption p + p {
  margin-top: 1em;
}

.m9-caption a {
  color: var(--m9-ink-100);
}

.m9-caption a:hover {
  color: var(--m9-blurple-light);
}

.m9-meta {
  margin: 2rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.m9-meta div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
}

.m9-meta dt {
  color: var(--m9-ink-55);
}

.m9-meta dd {
  margin: 0;
  color: var(--m9-ink-90);
}

.m9-plates {
  grid-column: span 9;
  display: grid;
  gap: 1.25rem;
}

.m9-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.m9-statement {
  grid-column: 4 / -1;
  max-width: 58rem;
  font-family: var(--m9-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--m9-ink-100);
}

.m9-statement span {
  color: var(--m9-ink-30);
}

/* ---------- plate ---------- */

.m9-plate {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--m9-bg);
  border: var(--m9-hairline);
  color: var(--m9-ink-70);
  font-family: var(--m9-display);
}

.m9-plate img,
.m9-plate video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.m9-plate-pad {
  padding: 6cqw;
}

.m9-elevated {
  background: var(--m9-bg-elevated);
}

.m9-grid-bg {
  background: var(--m9-bg) url("/images/mach9-rebrand/background-grid.png") center / cover;
}

/* DM Mono label, the system's eyebrow voice */
.m9-mono {
  font-family: var(--m9-mono);
  font-weight: 400;
  font-size: max(9px, 1.15cqw);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

.m9-stamp {
  position: absolute;
  font-family: var(--m9-mono);
  font-size: max(8px, 0.9cqw);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m9-ink-55);
}

.m9-stamp.bl { left: 2.4cqw; bottom: 2cqw; }
.m9-stamp.br { right: 2.4cqw; bottom: 2cqw; text-align: right; }
.m9-stamp.tl { left: 2.4cqw; top: 2cqw; }
.m9-stamp.tr { right: 2.4cqw; top: 2cqw; text-align: right; }

/* the wordmark is drawn from the SVG, recolored with a mask */
.m9-wordmark {
  display: block;
  aspect-ratio: 135 / 23;
  background: currentColor;
  -webkit-mask: url("/images/mach9-rebrand/mach9-logo.svg") center / contain no-repeat;
  mask: url("/images/mach9-rebrand/mach9-logo.svg") center / contain no-repeat;
}

/* ---------- 00 hero ---------- */

.m9-hero {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}

.m9-hero-logo {
  position: relative;
  width: 58%;
}

.m9-hero-logo img {
  width: 100%;
}

/* dashed blurple box: "Mach9 extracted this" */
.m9-extract {
  position: absolute;
  border: 2px dashed var(--m9-blurple);
}

.m9-extract::after {
  content: attr(data-label);
  position: absolute;
  left: -2px;
  bottom: 100%;
  margin-bottom: 0.6cqw;
  font-family: var(--m9-mono);
  font-size: max(8px, 0.9cqw);
  letter-spacing: 0.04em;
  color: var(--m9-blurple-light);
  white-space: nowrap;
}

.m9-hero .m9-extract {
  left: -4%;
  top: -14%;
  width: 33%;
  height: 128%;
}

.m9-dot {
  position: absolute;
  width: max(7px, 0.9cqw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--m9-coral);
  transform: translate(-50%, -50%);
}

.m9-dot.amber {
  background: var(--m9-amber);
}

.m9-dot::before {
  content: "";
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.5;
}

.m9-dot { color: var(--m9-coral); }
.m9-dot.amber { color: var(--m9-amber); }

/* the one legal gradient: a single hairline accent strip */
.m9-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--m9-blurple), var(--m9-blurple-deep) 70%, var(--m9-yellow));
}

/* ---------- 01 symbol ---------- */

.m9-symbol {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.m9-symbol img.m9-symbol-mark {
  width: 46%;
}

/* hairline construction: crosshair through the mark */
.m9-symbol-guides::before,
.m9-symbol-guides::after {
  content: "";
  position: absolute;
  background: var(--m9-ink-30);
}

.m9-symbol-guides::before {
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 0.5px;
}

.m9-symbol-guides::after {
  top: 50%;
  left: 8%;
  right: 8%;
  height: 0.5px;
}

.m9-symbol-guides .m9-ring {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border: 0.5px solid var(--m9-ink-30);
  border-radius: 50%;
}

.m9-symbol .m9-glass {
  width: 72%;
}

.m9-wordmark-plate {
  aspect-ratio: 21 / 9;
  display: grid;
  place-items: center;
  background: var(--m9-blurple);
  border-color: var(--m9-blurple);
  color: var(--m9-ink-100);
}

.m9-wordmark-plate .m9-wordmark {
  width: 56%;
}

.m9-wordmark-plate .m9-stamp {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- 02 typography ---------- */

.m9-type {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m9-type > div {
  padding: 4cqw 3.2cqw;
}

.m9-type > div + div {
  border-left: var(--m9-hairline);
}

.m9-type-aa {
  font-size: 13cqw;
  line-height: 1;
  color: var(--m9-ink-100);
  margin: 2cqw 0 3cqw;
}

.m9-type-name {
  font-size: 1.9cqw;
  color: var(--m9-ink-100);
}

.m9-type-role {
  margin-top: 0.6cqw;
  font-size: 1.35cqw;
  line-height: 1.45;
}

.m9-type .display { font-family: var(--m9-display); font-weight: 500; letter-spacing: -0.02em; }
.m9-type .body { font-family: var(--m9-body); font-weight: 400; }
.m9-type .mono { font-family: var(--m9-mono); font-weight: 400; }

/* the headline stack, set as the homepage hero sets it */
.m9-stack {
  text-align: center;
  padding: 9cqw 8cqw;
}

.m9-stack .m9-mono {
  color: var(--m9-ink-70);
}

.m9-stack-h {
  max-width: 74cqw;
  margin: 2.4cqw auto 0;
  text-wrap: balance;
  font-weight: 500;
  font-size: 5.4cqw;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--m9-ink-100);
}

.m9-bracket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  margin-top: 2.6cqw;
  font-family: var(--m9-mono);
  font-size: 1.5cqw;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--m9-blurple-light);
}

.m9-bracket::before,
.m9-bracket::after {
  content: "";
  width: 6cqw;
  height: 1px;
  background: var(--m9-blurple);
}

.m9-stack-body {
  max-width: 50cqw;
  margin: 2.4cqw auto 0;
  font-weight: 500;
  font-size: 1.6cqw;
  line-height: 1.55;
}

.m9-btn {
  display: inline-block;
  margin-top: 3.4cqw;
  padding: 1.1cqw 2cqw;
  font-family: var(--m9-mono);
  font-size: 1.4cqw;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--m9-ink-100);
  background: var(--m9-blurple);
  border: 1px solid var(--m9-blurple);
}

.m9-btn.outline {
  margin-left: 1cqw;
  background: transparent;
  border-color: var(--m9-ink-100);
}

/* ---------- 03 color ---------- */

/* area budget: how much of a screen each color gets */
.m9-budget {
  display: flex;
  height: 15cqw;
  margin-top: 3cqw;
  border: var(--m9-hairline);
}

.m9-budget > span {
  position: relative;
  flex: var(--share) 0 0;
  background: var(--c);
}

.m9-budget > span + span {
  border-left: var(--m9-hairline);
}

.m9-budget .m9-mono {
  position: absolute;
  left: 1cqw;
  bottom: 0.9cqw;
  color: var(--m9-ink-55);
}

.m9-budget .is-accent .m9-mono {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + 1cqw);
  color: var(--m9-blurple-light);
  white-space: nowrap;
}

.m9-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.6cqw;
  margin-top: 7cqw;
}

.m9-swatch i {
  display: block;
  aspect-ratio: 1;
  background: var(--c);
  border: var(--m9-hairline);
}

.m9-swatch.round i {
  border-radius: 50%;
  width: 46%;
  border: 0;
}

.m9-swatch b {
  display: block;
  margin-top: 1.2cqw;
  font-family: var(--m9-display);
  font-weight: 500;
  font-size: 1.5cqw;
  color: var(--m9-ink-100);
}

.m9-swatch .m9-mono {
  margin-top: 0.3cqw;
  color: var(--m9-ink-55);
}

.m9-swatch-group {
  grid-column: 1 / -1;
  margin-top: 2cqw;
  padding-top: 1.6cqw;
  border-top: var(--m9-hairline);
  color: var(--m9-ink-70);
}

/* ---------- 04 lines ---------- */

.m9-lines {
  display: grid;
  gap: 0;
}

.m9-line {
  display: grid;
  grid-template-columns: 26cqw 1fr;
  align-items: center;
  gap: 4cqw;
  padding: 3.4cqw 0;
}

.m9-line + .m9-line {
  border-top: var(--m9-hairline);
}

.m9-line b {
  display: block;
  font-weight: 500;
  font-size: 1.7cqw;
  color: var(--m9-ink-100);
}

.m9-line .m9-mono {
  margin-top: 0.4cqw;
  color: var(--m9-ink-55);
}

.m9-line-sample {
  height: 0;
}

.m9-line-sample.hairline { border-top: 0.5px solid var(--m9-ink-40); }
.m9-line-sample.emphasis { border-top: 1px solid var(--m9-ink-100); }
.m9-line-sample.dashed { border-top: 2px dashed var(--m9-blurple); }

.m9-line-sample.dotted {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--m9-blurple) 0 14px, transparent 14px 22px);
}

.m9-line-sample.bracket {
  height: auto;
  justify-content: flex-start;
  margin: 0;
  font-size: 1.3cqw;
}

/* ---------- 05 imagery ---------- */

.m9-annotated {
  aspect-ratio: 1042 / 864;
}

.m9-annotated img {
  height: 100%;
  object-fit: cover;
}

.m9-annotated .m9-extract {
  left: 32%;
  top: 27%;
  width: 52%;
  height: 59%;
}

.m9-annotated .m9-stamp {
  color: var(--m9-ink-90);
  background: rgba(16, 16, 16, 0.72);
  padding: 0.5cqw 0.8cqw;
}

.m9-callout {
  position: absolute;
  font-family: var(--m9-mono);
  font-size: max(8px, 0.95cqw);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m9-ink-90);
  white-space: nowrap;
}

.m9-callout::before {
  content: "";
  display: inline-block;
  width: 4cqw;
  height: 0.5px;
  margin-right: 0.8cqw;
  vertical-align: middle;
  background: var(--m9-ink-90);
}

/* ---------- 06 iconography ---------- */

.m9-chips {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1.6cqw;
}

.m9-chip {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--m9-bg-elevated);
  border: var(--m9-hairline);
  color: var(--m9-ink-70);
}

.m9-chip.is-accent {
  background: var(--m9-blurple);
  border-color: var(--m9-blurple);
  color: var(--m9-ink-100);
}

.m9-chip span {
  width: 36%;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}

.m9-chips-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 3cqw;
  color: var(--m9-ink-55);
}

/* ---------- 07 applications ---------- */

.m9-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 1.1cqw 1.4cqw;
  border-bottom: var(--m9-hairline);
  background: var(--m9-bg-elevated);
}

.m9-browser-bar i {
  width: 0.9cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--m9-ink-25);
}

.m9-browser-bar .m9-mono {
  margin-left: 1.4cqw;
  color: var(--m9-ink-55);
}

.m9-browser video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--m9-bg-elevated);
}

.m9-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m9-stats > div {
  padding: 4.4cqw 3.6cqw;
}

.m9-stats > div + div {
  border-left: var(--m9-hairline);
}

.m9-stat-value {
  font-weight: 500;
  font-size: 7cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--m9-ink-100);
}

.m9-stats .m9-mono {
  margin-top: 1.4cqw;
}

/* time spent: three bars, scaled to days */
.m9-time {
  display: grid;
  gap: 2.6cqw;
  margin-top: 4cqw;
}

.m9-time-row {
  display: grid;
  grid-template-columns: 22cqw 1fr 14cqw;
  align-items: center;
  gap: 2cqw;
}

.m9-time-row .m9-mono {
  color: var(--m9-ink-70);
}

.m9-time-bar {
  height: 2.2cqw;
  width: calc(var(--days) / 223 * 100%);
  min-width: 2px;
  background: var(--m9-ink-30);
  transform-origin: left;
}

.m9-time-row.is-mach9 .m9-time-bar {
  background: var(--m9-blurple);
}

.m9-time-row.is-mach9 .m9-mono {
  color: var(--m9-ink-100);
}

.m9-time-days {
  font-weight: 500;
  font-size: 2.6cqw;
  text-align: right;
  white-space: nowrap;
  color: var(--m9-ink-100);
}

.m9-stickers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 4cqw;
  padding: 7cqw 6cqw;
}

.m9-stickers img {
  transition: transform 0.4s var(--m9-ease);
}

.m9-stickers img:nth-child(odd) { transform: rotate(-6deg); }
.m9-stickers img:nth-child(even) { transform: rotate(5deg); }
.m9-stickers img:hover { transform: rotate(0) scale(1.06); }

/* black-background renders blend into the canvas */
.m9-stickers img.blend {
  mix-blend-mode: screen;
}

/* placeholder until the real deck and one-pager images land */
.m9-skeleton {
  aspect-ratio: 16 / 9;
  background: linear-gradient(100deg, var(--m9-bg-elevated) 40%, var(--m9-bg-tool) 50%, var(--m9-bg-elevated) 60%) 0 0 / 300% 100%;
  animation: m9-shimmer 2.4s linear infinite;
}

.m9-skeleton.portrait {
  aspect-ratio: 8.5 / 11;
}

@keyframes m9-shimmer {
  to { background-position: -300% 0; }
}

.m9-plate-caption {
  margin-top: -0.5rem;
  font-size: 1.1rem;
  color: var(--m9-ink-55);
}

/* ---------- 08 voice ---------- */

.m9-voice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m9-voice > div {
  padding: 4.4cqw 4cqw;
}

.m9-voice > div + div {
  border-left: var(--m9-hairline);
}

.m9-voice ul {
  margin: 2.4cqw 0 0;
  padding: 0;
  list-style: none;
}

.m9-voice li {
  padding: 1.6cqw 0;
  font-weight: 500;
  font-size: 2.3cqw;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.m9-voice li + li {
  border-top: var(--m9-hairline);
}

.m9-voice .is-dont li {
  color: var(--m9-ink-30);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.m9-voice .is-do li {
  color: var(--m9-ink-100);
}

.m9-voice .is-do .m9-mono {
  color: var(--m9-blurple-light);
}

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .m9-js [data-m9-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s var(--m9-ease), transform 0.6s var(--m9-ease);
  }

  .m9-js [data-m9-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* the extracted-region box draws in after its plate lands */
  .m9-js [data-m9-reveal] .m9-extract {
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 0.9s var(--m9-ease) 0.35s;
  }

  .m9-js [data-m9-reveal].is-in .m9-extract {
    clip-path: inset(-3cqw -1cqw -1cqw -1cqw);
  }

  .m9-js [data-m9-reveal] .m9-time-bar {
    transform: scaleX(0);
    transition: transform 1.1s var(--m9-ease) 0.3s;
  }

  .m9-js [data-m9-reveal].is-in .m9-time-bar {
    transform: none;
  }
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  .m9 {
    padding: 2rem var(--pad) 4rem;
  }

  .m9-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .m9-row + .m9-row {
    margin-top: 6rem;
  }

  .m9-caption,
  .m9-plates,
  .m9-statement {
    grid-column: 1 / -1;
  }

  .m9-caption {
    position: static;
  }

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

  /* small plates need bigger relative type to stay legible */
  .m9-type {
    grid-template-columns: minmax(0, 1fr);
  }

  .m9-type > div + div {
    border-left: 0;
    border-top: var(--m9-hairline);
  }

  .m9-type-aa { font-size: 24cqw; }
  .m9-type-name { font-size: 5cqw; }
  .m9-type-role { font-size: 3.8cqw; }

  .m9-stack-h { max-width: none; font-size: 8.4cqw; }
  .m9-bracket { font-size: 3cqw; }
  .m9-stack-body { max-width: none; font-size: 3.6cqw; }
  .m9-btn { font-size: 3cqw; padding: 2.2cqw 3.4cqw; }

  .m9-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; }
  .m9-swatch b { font-size: 3.6cqw; }

  .m9-line { grid-template-columns: minmax(0, 1fr); gap: 3cqw; padding: 5cqw 0; }
  .m9-line b { font-size: 4.2cqw; }
  .m9-line-sample.bracket { font-size: 3cqw; }

  .m9-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3cqw; }

  .m9-stats { grid-template-columns: minmax(0, 1fr); }
  .m9-stats > div + div { border-left: 0; border-top: var(--m9-hairline); }
  .m9-stat-value { font-size: 14cqw; }

  .m9-time-row { grid-template-columns: minmax(0, 1fr) 16cqw; }
  .m9-time-row .m9-mono { grid-column: 1 / -1; }
  .m9-time-bar { height: 4cqw; }
  .m9-time-days { font-size: 5cqw; }

  .m9-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .m9-voice { grid-template-columns: minmax(0, 1fr); }
  .m9-voice > div + div { border-left: 0; border-top: var(--m9-hairline); }
  .m9-voice li { font-size: 5cqw; }

  .m9 .m9-mono { font-size: max(9px, 2.6cqw); }
}