/* Metabolix Peptides. A broadside about verbs, with room to breathe. */
:root {
  --mx-ground: #FCFDFC;
  --mx-ink: #272224;
  --mx-carmine: #B9233A;
  --mx-support: #E1DCDD;
  --mx-paper: #FFFFFF;
  --mx-serif: "Arvo", Georgia, serif;
  --mx-sans: "Cabin", "Trebuchet MS", sans-serif;
  --mx-gutter: clamp(24px, 3.889vw, 76px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body {
  margin: 0;
  background: var(--mx-ground);
  color: var(--mx-ink);
  font: 400 19px/1.6 var(--mx-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: var(--mx-carmine); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { color: var(--mx-ink); text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--mx-carmine); outline-offset: 6px; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--mx-serif); font-weight: 400; margin: 0; }
h1 { font-size: clamp(38px, 4.5vw, 70px); line-height: 1.12; letter-spacing: -0.05em; }
h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.17; letter-spacing: -0.04em; }
h3 { line-height: 1.2; }
h4 { font-size: 23px; line-height: 1.35; }
::selection { color: var(--mx-paper); background: var(--mx-carmine); }
[data-lucide], .lucide { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.mx-skip { position: absolute; left: var(--mx-gutter); top: -100px; z-index: 10; padding: 12px 18px; color: var(--mx-paper); background: var(--mx-carmine); }
.mx-skip:focus { top: 12px; color: var(--mx-paper); }

/* The dealt opening: broad type on white; a separate, edge-bleeding photograph. */
.mx-opening { display: grid; grid-template-columns: 56% 40%; column-gap: 4%; background: var(--mx-paper); }
.mx-opening-copy { min-width: 0; padding: 30px 0 40px var(--mx-gutter); }
.mx-cutout { position: relative; height: clamp(255px, 19.45vw, 326px); margin-bottom: 30px; }
.mx-name { display: block; width: fit-content; color: var(--mx-ink); font: 700 clamp(88px, 8.9vw, 154px)/0.96 var(--mx-serif); letter-spacing: -0.075em; text-decoration: none; }
.mx-name:hover { color: var(--mx-carmine); }
.mx-name span { display: block; }
.mx-name span + span { margin-top: 4px; }
.mx-cutout-nav { position: absolute; top: clamp(145px, 10.45vw, 184px); right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.mx-cutout-nav a { display: flex; align-items: center; gap: 9px; font-size: 24px; line-height: 1.2; color: var(--mx-ink); text-decoration: none; white-space: nowrap; }
.mx-cutout-nav [data-lucide], .mx-cutout-nav .lucide { width: 19px; height: 19px; color: var(--mx-carmine); }
.mx-cutout-nav a:hover, .mx-cutout-nav a[aria-current="page"] { color: var(--mx-carmine); text-decoration: underline; text-decoration-thickness: 2px; }
.mx-home-lede { max-width: 690px; padding-right: 8px; }
.mx-home-lede h1 { font-size: clamp(40px, 3.6vw, 58px); max-width: 680px; }
.mx-home-lede p { margin-top: 25px; max-width: 570px; font-size: 25px; line-height: 1.42; }
.mx-verb-drawing { display: flex; align-items: center; gap: 18px; height: 132px; margin-top: 25px; padding-right: 4%; cursor: default; pointer-events: none; }
.mx-verb-drawing span { display: flex; align-items: center; justify-content: center; height: 85px; border-radius: 0 100px 100px 0; background: var(--mx-carmine); }
.mx-verb-drawing .lucide { width: 52px; height: 52px; color: var(--mx-paper); stroke-width: 1.75; }
.mx-verb-drawing span:nth-child(1) { flex: 1.6; }
.mx-verb-drawing span:nth-child(2) { flex: 0.85; }
.mx-verb-drawing span:nth-child(3) { flex: 1.2; }
.mx-opening-photo { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.mx-opening-photo img { width: 100%; height: 100%; min-height: 720px; object-fit: cover; object-position: 52% 64%; aspect-ratio: 4/5; background: var(--mx-support); }
figcaption { padding-top: 15px; font-size: 16px; line-height: 1.4; color: var(--mx-ink); }
.mx-opening-photo figcaption { background: var(--mx-paper); padding: 16px 24px 17px 0; }
.mx-reading { padding-inline: var(--mx-gutter); max-width: 1600px; margin-inline: auto; }

/* Each verb holds the left margin; the objects travel across the spread. */
.mx-spread { padding: 105px 0 0; }
.mx-spread-intro { position: relative; max-width: 910px; margin-bottom: 55px; padding-left: 54px; }
.mx-spread-intro > [data-lucide], .mx-spread-intro > .lucide { position: absolute; left: 0; top: 8px; width: 32px; height: 32px; color: var(--mx-carmine); }
.mx-spread-intro > p { margin-top: 25px; max-width: 61ch; font-size: 22px; }
.mx-jobs-figure { width: 82%; margin: 32px 0 70px auto; }
.mx-jobs-figure img { width: 100%; height: auto; }
.mx-jobs-figure figcaption { padding-top: 6px; }
.mx-job { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 46px 0 62px; position: relative; }
.mx-job + .mx-job { border-top: 1px solid var(--mx-support); }
.mx-job > h3 { grid-column: 1 / 5; grid-row: 1; align-self: start; position: sticky; top: 28px; font-size: clamp(78px, 9.1vw, 142px); line-height: 0.98; letter-spacing: -0.075em; color: var(--mx-carmine); }
.mx-job > h3::after { content: ""; display: block; width: 62%; height: 16px; margin-top: 25px; background: var(--mx-carmine); border-radius: 0 30px 30px 0; }
.mx-job:nth-of-type(2) > h3::after { width: 43%; }
.mx-job:nth-of-type(3) > h3::after { width: 76%; }
.mx-job-copy { grid-row: 1; min-width: 0; max-width: 500px; padding: 7px 0 0 26px; }
.mx-job:nth-of-type(1) .mx-job-copy { grid-column: 4 / 9; }
.mx-job:nth-of-type(2) .mx-job-copy { grid-column: 6 / 11; }
.mx-job:nth-of-type(3) .mx-job-copy { grid-column: 8 / 13; }
.mx-object { font: 600 27px/1.25 var(--mx-sans); margin-bottom: 24px; max-width: 25ch; }
.mx-answer + .mx-answer { margin-top: 38px; }
.mx-answer h4 { margin-bottom: 15px; font-size: 25px; }

/* The consequence cuts across the entire grammar, after the third verb. */
.mx-implication { margin: 52px calc(-1 * var(--mx-gutter)) 0; padding: 66px var(--mx-gutter) 72px; background: var(--mx-carmine); color: var(--mx-paper); display: grid; grid-template-columns: 44% 49%; gap: 7%; position: relative; }
.mx-implication::before { content: ""; position: absolute; top: -35px; left: 0; width: 65%; height: 36px; background: var(--mx-carmine); clip-path: polygon(0 0, 34% 0, 34% 40%, 65% 40%, 65% 72%, 100% 72%, 100% 100%, 0 100%); }
.mx-implication h2 { font-size: clamp(34px, 3.65vw, 54px); max-width: 510px; }
.mx-implication p { max-width: 53ch; font-size: 22px; line-height: 1.55; }

/* A staggered question index, without another set of tinted cards. */
.mx-reader-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 50px; padding: 100px 0 38px; }
.mx-reader-questions > h2 { grid-column: 1 / -1; max-width: 690px; margin-bottom: 46px; }
.mx-question-link { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: 30px 0 22px; min-height: 312px; }
.mx-question-link::before { content: ""; position: absolute; top: 0; left: 0; height: 9px; width: 86%; background: var(--mx-carmine); }
.mx-question-link:nth-of-type(2) { margin-top: 52px; }
.mx-question-link:nth-of-type(2)::before { width: 62%; }
.mx-question-link:nth-of-type(3) { margin-top: 104px; }
.mx-question-link:nth-of-type(3)::before { width: 100%; }
.mx-question-link h3 { font-size: 30px; margin-bottom: 22px; max-width: 420px; letter-spacing: -0.04em; }
.mx-question-link p { max-width: 34ch; margin-bottom: 30px; }
.mx-question-link a { display: inline-flex; align-items: center; gap: 13px; font-size: 21px; line-height: 1.4; margin-top: auto; padding-block: 8px; }
.mx-question-link a:hover { color: var(--mx-carmine); text-decoration-thickness: 4px; }
.mx-after { display: grid; grid-template-columns: 34% 54%; column-gap: 12%; padding: 90px 0 68px; }
.mx-after h2 { max-width: 420px; }
.mx-after-copy { max-width: 65ch; }
.mx-source-note { position: relative; border-top: 1px solid var(--mx-ink); margin: 18px 0 90px 25%; padding: 25px 0 0; max-width: 810px; }
.mx-source-note > [data-lucide], .mx-source-note > .lucide { position: absolute; left: -54px; top: 27px; color: var(--mx-carmine); width: 28px; height: 28px; }
.mx-source-note h2 { font: 600 20px/1.4 var(--mx-sans); margin-bottom: 14px; letter-spacing: 0; }
.mx-source-note p { font-size: 17px; line-height: 1.6; }

/* Interior spreads keep the masthead and let the photo project to the page edge. */
.mx-inner-masthead { width: calc(56% - var(--mx-gutter)); margin-left: var(--mx-gutter); padding-top: 30px; max-width: 810px; }
.mx-inner-masthead .mx-cutout { margin-bottom: 8px; }
.mx-breadcrumbs { margin: 22px 0 34px; font-size: 16px; }
.mx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; list-style: none; }
.mx-breadcrumbs li + li::before { content: "/"; display: inline-block; padding-right: 16px; color: var(--mx-ink); }
.mx-article-intro { padding-top: 15px; }
.mx-article-intro h1 { max-width: 1130px; }
.mx-deck { font-size: 25px; line-height: 1.45; max-width: 800px; margin: 28px 0 0 25%; }
.mx-article-photo { margin: 48px calc(-1 * var(--mx-gutter)) 0 8%; }
.mx-article-photo img { width: 100%; height: auto; object-fit: cover; object-position: center; aspect-ratio: 16/7; background: var(--mx-support); }
.mx-article-photo figcaption { padding: 18px var(--mx-gutter) 0 0; max-width: 800px; }
.mx-bibliography { margin-bottom: 90px; }
.mx-bibliography > h2 { margin-bottom: 42px; }
.mx-bibliography-entry { display: grid; grid-template-columns: 46% 44%; column-gap: 10%; padding: 30px 0 36px; border-top: 1px solid var(--mx-support); }
.mx-bibliography-entry h3 { font-size: 26px; letter-spacing: -0.025em; }
.mx-bibliography-entry small { display: block; font-size: 17px; margin-top: 17px; }
.mx-bibliography-entry p { max-width: 50ch; }
.mx-imprint { position: relative; padding: 65px var(--mx-gutter) 32px; margin-top: 65px; border-top: 1px solid var(--mx-support); }
.mx-imprint::before { content: ""; position: absolute; top: -10px; left: var(--mx-gutter); width: 25%; height: 10px; background: var(--mx-carmine); }
.mx-imprint-top { display: grid; grid-template-columns: 43% 49%; column-gap: 8%; }
.mx-imprint-note { font: 400 27px/1.45 var(--mx-serif); max-width: 640px; letter-spacing: -0.035em; }
.mx-imprint-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-content: start; }
.mx-imprint-nav a { width: fit-content; font-size: 19px; padding-block: 3px; }
.mx-imprint-bottom { margin-top: 45px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; font-size: 16px; }
.mx-missing { padding: 35px 0 80px; max-width: 850px; }
.mx-missing p { margin-top: 28px; font-size: 23px; }

@media (min-width: 1700px) {
  .mx-opening-copy { padding-left: max(var(--mx-gutter), calc((100vw - 1600px)/2)); }
  .mx-cutout-nav { right: 2%; }
}
@media (min-width: 701px) and (max-width: 1150px) {
  .mx-cutout { height: 245px; }
  .mx-name { font-size: 8.5vw; }
  .mx-cutout-nav { top: 152px; right: 0; gap: 9px; }
  .mx-cutout-nav a { font-size: 21px; }
  .mx-cutout-nav [data-lucide], .mx-cutout-nav .lucide { width: 16px; height: 16px; }
  .mx-home-lede h1 { font-size: 39px; }
  .mx-home-lede p { font-size: 22px; }
  .mx-opening-photo img { min-height: 750px; }
  .mx-job > h3 { font-size: 8.7vw; }
  .mx-job-copy { padding-left: 18px; max-width: none; }
  .mx-job:nth-of-type(1) .mx-job-copy { grid-column: 5 / 12; }
  .mx-job:nth-of-type(2) .mx-job-copy { grid-column: 6 / 13; }
  .mx-job:nth-of-type(3) .mx-job-copy { grid-column: 6 / 13; padding-top: 100px; }
  .mx-reader-questions { column-gap: 30px; }
  .mx-question-link h3 { font-size: 25px; }
  .mx-question-link a { font-size: 19px; }
}
@media (max-width: 700px) {
  :root { --mx-gutter: 24px; }
  body { font-size: 18px; line-height: 1.55; }
  h1 { font-size: 38px; letter-spacing: -0.045em; }
  h2 { font-size: 31px; }
  .mx-opening { display: flex; flex-direction: column; gap: 0; }
  .mx-opening-copy { display: contents; }
  .mx-cutout { height: auto; margin: 0; }
  .mx-opening .mx-cutout { order: 0; padding: 24px var(--mx-gutter) 0; }
  .mx-name { font-size: clamp(49px, 16.4vw, 94px); line-height: 0.97; letter-spacing: -0.065em; }
  .mx-name span + span { margin-top: 5px; }
  .mx-cutout-nav { position: static; align-items: flex-start; gap: 10px; margin-top: 23px; }
  .mx-cutout-nav a { font-size: 24px; line-height: 1.25; }
  .mx-cutout-nav [data-lucide], .mx-cutout-nav .lucide { width: 20px; height: 20px; }
  .mx-home-lede { order: 1; padding: 36px var(--mx-gutter) 28px; }
  .mx-home-lede h1 { font-size: 38px; }
  .mx-home-lede p { margin-top: 21px; font-size: 22px; line-height: 1.45; }
  .mx-opening-photo { order: 2; display: block; }
  .mx-opening-photo img { min-height: 0; width: 100%; height: auto; aspect-ratio: 4/3; object-position: 52% 70%; }
  .mx-opening-photo figcaption { padding: 14px var(--mx-gutter) 0; }
  .mx-verb-drawing { order: 3; margin: 22px 0 0; height: 94px; padding: 0 var(--mx-gutter) 17px; gap: 12px; }
  .mx-verb-drawing span { height: 53px; }
  .mx-verb-drawing .lucide { width: 32px; height: 32px; }
  .mx-spread { padding-top: 60px; }
  .mx-spread-intro { margin-bottom: 36px; padding: 0; }
  .mx-spread-intro > [data-lucide], .mx-spread-intro > .lucide { position: static; margin-bottom: 18px; width: 28px; height: 28px; }
  .mx-spread-intro > p { font-size: 20px; margin-top: 22px; }
  .mx-jobs-figure { width: 100%; margin: 28px 0 34px; }
  .mx-jobs-figure figcaption { padding-top: 9px; }
  .mx-job { display: block; padding: 30px 0 39px; }
  .mx-job > h3 { position: static; font-size: 75px; margin-bottom: 26px; }
  .mx-job > h3::after { height: 9px; margin-top: 16px; width: 52%; }
  .mx-job:nth-of-type(2) > h3::after { width: 35%; }
  .mx-job:nth-of-type(3) > h3::after { width: 65%; }
  .mx-job-copy { padding: 0; max-width: none; }
  .mx-object { font-size: 24px; margin-bottom: 19px; max-width: 28ch; }
  .mx-answer h4 { font-size: 24px; }
  .mx-implication { display: block; padding: 42px var(--mx-gutter) 45px; margin-top: 34px; }
  .mx-implication::before { left: var(--mx-gutter); width: 76%; height: 22px; top: -21px; }
  .mx-implication h2 { font-size: 33px; margin-bottom: 27px; }
  .mx-implication p { font-size: 20px; }
  .mx-reader-questions { display: block; padding: 62px 0 10px; }
  .mx-reader-questions > h2 { margin-bottom: 30px; }
  .mx-question-link { padding: 29px 0 30px; min-height: 0; }
  .mx-question-link:nth-of-type(2), .mx-question-link:nth-of-type(3) { margin-top: 18px; }
  .mx-question-link h3 { font-size: 27px; margin-bottom: 18px; }
  .mx-question-link p { margin-bottom: 18px; }
  .mx-question-link a { font-size: 20px; width: fit-content; }
  .mx-after { display: block; padding: 55px 0 42px; }
  .mx-after h2 { margin-bottom: 27px; }
  .mx-source-note { margin: 12px 0 48px; padding: 25px 0 0 38px; }
  .mx-source-note > [data-lucide], .mx-source-note > .lucide { left: 0; top: 27px; width: 23px; height: 23px; }
  .mx-source-note p { font-size: 17px; }
  .mx-inner-masthead { width: auto; max-width: none; margin: 0; padding: 24px var(--mx-gutter) 0; }
  .mx-inner-masthead .mx-cutout { margin: 0; }
  .mx-breadcrumbs { margin: 36px 0 28px; }
  .mx-article-intro { padding-top: 0; }
  .mx-deck { font-size: 22px; margin: 25px 0 0; }
  .mx-article-photo { margin: 34px calc(-1 * var(--mx-gutter)) 0; }
  .mx-article-photo img { height: auto; aspect-ratio: 4/3; }
  .mx-photo-red-shirt-rest img { object-position: 56% 50%; }
  /* Both sheets and both fuel examples need the complete horizontal frame. */
  .mx-photo-three-curves img, .mx-photo-empty-lip img { aspect-ratio: 16/7; }
  .mx-article-photo figcaption { padding: 16px var(--mx-gutter) 0; }
  .mx-bibliography { margin-bottom: 50px; }
  .mx-bibliography-entry { display: block; padding: 26px 0 30px; }
  .mx-bibliography-entry h3 { font-size: 23px; }
  .mx-bibliography-entry p { margin-top: 22px; }
  .mx-imprint { padding: 40px var(--mx-gutter) 27px; margin-top: 45px; }
  .mx-imprint::before { width: 40%; height: 8px; top: -8px; }
  .mx-imprint-top { display: block; }
  .mx-imprint-note { font-size: 23px; }
  .mx-imprint-nav { margin-top: 34px; gap: 16px 18px; }
  .mx-imprint-nav a { font-size: 18px; }
  .mx-imprint-bottom { margin-top: 33px; }
  .mx-missing { padding-bottom: 45px; }
}
/* All drawings are still. Links use colour/underlines, without animated travel. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}