/* ==========================================================================
   Mane Art, page styles
   --------------------------------------------------------------------------
   Values are taken from the approved design export, measured rather than
   judged. Where a number looks oddly specific it is because the design says so:
   the hero is clamp(66px,15vw,220px) at line-height .86 and the Ken Burns
   runs 22s.

   LAYOUT BREAKPOINTS ARE THE DESIGN'S OWN. Its script switches the navigation
   at width < 960 and the column offset at width > 700, so those are the two
   numbers used here. The design has no CSS media queries at all: every type
   step is a clamp(). Do not add breakpoints for type.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The design is dark and there is no light variant, so say so. Without this
   the browser draws its own furniture for a light page: the autofill wash on
   the enquiry form, the scrollbars, and any native control, all light on a
   near black page. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* No font-size, font-weight or line-height here on purpose. The design sets weight
     exactly 20 times and line-height only where it matters, so everything else
     inherits the browser defaults: 16px, 400, normal. Declaring 15px, 300 and
     1.7 here made every string on the page smaller, lighter and taller than the
     design, on every element, and it took a measured diff to see it. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* A focus ring must be visible on near black. Gold, offset so it clears the
   glyphs. Focus is a state no automated check can see, so it is set once,
   globally, rather than per component. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ma-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-800); color: var(--cream);
  padding: 14px 22px; font-size: var(--t-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.ma-skip:focus { left: 0; }

/* ---------------------------------------------------------------- shared */

.ma-eyebrow {
  margin: 0; display: block;
  font-size: var(--t-label);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  /* No line-height: the design leaves these at normal. */
}
.ma-eyebrow--muted { color: var(--cream-50); }
.ma-eyebrow--gold { color: var(--gold); letter-spacing: .28em; }
.ma-eyebrow--meta { color: rgba(234, 230, 223, .55); letter-spacing: var(--track-eyebrow); }

.ma-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: var(--track-tight);
}
/* Measured out of the design: these two are larger and carry their own line
   height. One shared h2 size was wrong. */
.ma-h2--about { font-size: clamp(34px, 5vw, 68px); line-height: 1.06; letter-spacing: var(--track-tighter); }
.ma-h2--contact { font-size: clamp(34px, 5.5vw, 76px); line-height: 1; letter-spacing: var(--track-tighter); }
.ma-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
}
.ma-prose {
  margin: 0; color: var(--cream-70); max-width: var(--measure);
  font-size: var(--t-body);
  line-height: var(--lh-body); text-wrap: pretty;
}

/* The design's one solid control: cream fill, ink text, sharp corners. */
.ma-btn-solid {
  align-self: flex-start;
  display: inline-block;
  background: var(--cream); color: var(--ink-900);
  border: 1px solid var(--cream);
  padding: 17px 38px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ma-btn-solid:hover { background: transparent; color: var(--cream); }

/* EVERY SECTION HAS ITS OWN WIDTH AND PADDING IN THE DESIGN. There is no single
   container: the manifesto is 1180, works and studio are 1600, the rest are
   1400. Treating them as one measurement was wrong and made the page run wider
   than the design at every width above about 1400. */
.ma-manifesto { padding: clamp(90px, 16vh, 190px) clamp(16px, 4vw, 54px); max-width: 1180px; margin-inline: auto; }
.ma-works { padding: 0 clamp(16px, 4vw, 54px) clamp(60px, 10vh, 120px); max-width: 1600px; margin-inline: auto; }
.ma-about { padding: clamp(90px, 16vh, 180px) clamp(16px, 4vw, 54px) clamp(60px, 10vh, 110px); max-width: 1400px; margin-inline: auto; }
.ma-studio { padding: clamp(60px, 10vh, 120px) clamp(16px, 4vw, 54px); max-width: 1600px; margin-inline: auto; }
.ma-order { padding: clamp(60px, 11vh, 140px) clamp(16px, 4vw, 54px); max-width: 1400px; margin-inline: auto; }
.ma-delivery { padding: clamp(50px, 9vh, 110px) clamp(16px, 4vw, 54px); max-width: 1400px; margin-inline: auto; }
.ma-contact { padding: clamp(60px, 11vh, 140px) clamp(16px, 4vw, 54px) clamp(60px, 10vh, 120px); max-width: 1400px; margin-inline: auto; }

/* The head is a baseline row with the eyebrow pushed to the far edge, sitting
   on a hairline. Without the rule and the space-between it reads as a caption
   stuck to the heading. */
.ma-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--cream-14);
  padding-bottom: 22px;
  margin-bottom: clamp(34px, 6vh, 70px);
}
.ma-works .ma-section__head { margin-bottom: clamp(40px, 7vh, 86px); }

/* ---------------------------------------------------------------- header */

/* Transparent over the hero, and the script paints it in past 60px of scroll.
   The transition is on the element so the change is a fade, not a jump. */
.ma-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(16px, 4vw, 54px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
.ma-nav.is-stuck {
  background: rgba(10, 9, 9, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--cream-14);
}
.ma-wordmark {
  font-family: var(--font-display);
  /* 19px, measured. It was 18 and that is 7.7px of missing width, which a
     space-between bar turns into a 3.6px shift of the whole navigation. */
  font-size: 19px; letter-spacing: .34em; text-transform: uppercase;
}
/* Measured: 12px and full cream, not 11px at 70 per cent. The size and the
   tracking live on the container in the design, as they do here. */
.ma-nav__links {
  display: flex; align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  font-size: 12px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.ma-nav__links a { transition: color var(--dur) var(--ease); }
.ma-nav__links a:hover { color: var(--gold); }
.ma-nav__end { display: flex; align-items: center; gap: 14px; }

.ma-lang {
  margin: 0; display: flex; align-items: center; gap: 7px;
  /* .14em here, not the eyebrow's .16em. Measured off the design. */
  font-size: var(--t-label); letter-spacing: .14em;
}
/* 4px, from the design, and it is the tap target for the only control that
   changes the language of the site: without it these are 13px tall. */
.ma-lang__on, .ma-lang__off { padding: 4px; }
.ma-lang__off { color: var(--cream-40); transition: color var(--dur) var(--ease); }
.ma-lang__off:hover { color: var(--cream); }
.ma-lang__sep { color: var(--cream-30); }

.ma-navcta {
  display: inline-block;
  border: 1px solid var(--cream-30); background: none;
  padding: 11px 22px;
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ma-navcta:hover { border-color: var(--gold); color: var(--gold); }
.ma-burger { display: none; }

.ma-menu {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: clamp(16px, 4vw, 54px);
  background: rgba(8, 8, 9, .97);
  backdrop-filter: blur(14px);
}
.ma-menu[hidden] { display: none; }
.ma-menu a {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(32px, 8vw, 54px);
  line-height: var(--lh-snug);
  transition: color var(--dur) var(--ease);
}
.ma-menu a:hover { color: var(--gold); }
.ma-menu__close { position: absolute; top: 18px; right: clamp(16px, 4vw, 54px); }

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

.ma-hero {
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 0;
}
/* A slow push in. 22 seconds, from 1.14 to 1, so it is felt rather than seen. */
.ma-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .86;
  animation: maneKen 22s cubic-bezier(.16, .7, .2, 1) both;
}
.ma-hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 9, .55) 0%, rgba(10, 9, 9, .18) 38%,
                              rgba(10, 9, 9, .86) 82%, var(--ink-900) 100%);
}
.ma-hero__body {
  position: relative; width: 100%;
  padding: 0 clamp(16px, 4vw, 54px) clamp(52px, 10vh, 110px);
  display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px);
}
.ma-hero__eyebrow {
  font-size: var(--t-label); letter-spacing: var(--track-label-widest);
  text-transform: uppercase; color: rgba(234, 230, 223, .62);
  animation: maneUp 1.1s cubic-bezier(.2, .7, .2, 1) .2s both;
}
.ma-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(66px, 15vw, 220px);
  line-height: .86;
  letter-spacing: var(--track-tighter);
  animation: maneUp 1.2s cubic-bezier(.2, .7, .2, 1) .32s both;
}
.ma-hero__row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 26px;
  border-top: 1px solid rgba(234, 230, 223, .16);
  padding-top: clamp(18px, 3vh, 30px);
  animation: maneUp 1.2s cubic-bezier(.2, .7, .2, 1) .46s both;
}
.ma-hero__lead {
  margin: 0; max-width: 470px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: rgba(234, 230, 223, .78);
  text-wrap: pretty;
}
/* An underlined link with a drifting arrow, not a bordered button. */
.ma-cue {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid rgba(234, 230, 223, .35);
  padding-bottom: 10px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ma-cue:hover { color: var(--gold); border-color: var(--gold); }
.ma-cue__arrow { display: inline-block; animation: maneCue 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------- manifesto */

.ma-manifesto { padding-inline: clamp(16px, 4vw, 54px); }
.ma-manifesto__text {
  margin: 0; max-width: 1180px;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-statement);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
}
/* Each word starts dim and is brightened by scroll position, not by a stagger.
   site.js writes the opacity; this is only the starting state and the easing. */
.ma-manifesto__text [data-w] { opacity: .1; transition: opacity .45s linear; }

/* ----------------------------------------------------------------- works */

.ma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}
.ma-col { display: flex; flex-direction: column; gap: clamp(40px, 7vw, 110px); }
/* The second column is pushed down so the two do not read as rows. The script
   also drifts it a few pixels on scroll. */
.ma-col[data-col="b"] { margin-top: clamp(60px, 10vw, 160px); }

.ma-card { margin: 0; }
.ma-card__hit {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ma-card__frame { display: block; overflow: hidden; background: var(--ink-750); }
.ma-card__frame img {
  width: 100%; height: auto;
  transition: transform 1.1s var(--ease), opacity var(--dur) var(--ease);
}
.ma-card__hit:hover .ma-card__frame img { transform: scale(1.04); opacity: .92; }
.ma-card__cap { display: flex; flex-direction: column; gap: 7px; padding-top: 16px; }
.ma-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.1;
  transition: color var(--dur) var(--ease);
}
.ma-card__hit:hover .ma-card__title { color: var(--gold); }
.ma-card__meta, .ma-card__price, .ma-card__tag {
  font-size: var(--t-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--cream-50);
}
.ma-card__price { color: var(--gold); align-self: flex-end; }
/* The overlay is where somebody decides whether to write, so it repeats what
   the card said rather than making them close it and look again. Same gold and
   same tracking as the card, one step larger because it is on its own here. */
.ma-ov__price {
  color: var(--gold); font-size: var(--t-label);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.ma-ov__price:empty { display: none; }
.ma-card__tag { align-self: flex-start; border: 1px solid var(--cream-20); padding: 4px 10px; }

/* --------------------------------------------------------------- feature */

.ma-feature {
  position: relative;
  height: clamp(460px, 88vh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  padding: 0;
}
/* Inset beyond the frame so the parallax translate never exposes an edge. */
.ma-feature__px { position: absolute; inset: -12% 0; will-change: transform; }
.ma-feature__px img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.ma-feature__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink-900) 0%, rgba(10, 9, 9, .12) 30%,
                              rgba(10, 9, 9, .8) 82%, var(--ink-900) 100%);
}
/* A centred 1600 band, and a ROW: the text on the left, the action on the
   right, wrapping on a narrow screen. It was a stacked column, which put the
   button under the title and made the block start at the viewport edge on a
   wide screen instead of at the container. */
.ma-feature__body {
  position: relative;
  width: 100%; max-width: 1600px; margin-inline: auto;
  padding: 0 clamp(16px, 4vw, 54px) clamp(44px, 8vh, 90px);
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.ma-feature__text { display: flex; flex-direction: column; gap: 12px; }
.ma-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(38px, 7vw, 96px);
  line-height: .95;
  letter-spacing: var(--track-tighter);
}
.ma-feature__body .ma-btn-solid { align-self: flex-end; }

/* ----------------------------------------------------------------- about */

.ma-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.ma-about__portrait { margin: 0; }
.ma-about__body { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 32px); }
.ma-stats {
  margin: 0; display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(12px, 2vh, 24px);
  border-top: 1px solid var(--cream-14);
}
.ma-stats div { display: flex; flex-direction: column; gap: 8px; }
.ma-stats dt {
  font-family: var(--font-display); font-size: 38px; color: var(--gold);
  line-height: var(--lh-flat);
}
.ma-stats dd {
  margin: 0; font-size: var(--t-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--cream-50);
}

.ma-ex { margin-top: clamp(40px, 7vh, 90px); }
.ma-ex__list { list-style: none; margin: 20px 0 0; padding: 0; }
.ma-ex__list li {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--cream-14);
}
.ma-ex__year { color: var(--gold); }
.ma-ex__where { color: var(--cream-50); }

/* ---------------------------------------------------------------- studio */

.ma-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 60px);
}
.ma-step { display: flex; flex-direction: column; gap: 16px; }
.ma-step__frame {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ink-750); border: 1px solid var(--cream-10);
}
.ma-step__frame img { width: 100%; height: 100%; object-fit: cover; }
/* A photograph we do not have yet gets the design's own placeholder: a striped
   field with a monospace caption naming what belongs there. It reads as
   deliberate, which a bare gap does not. */
.ma-step__frame--empty {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #131215 0 10px, #0f0e11 10px 20px);
}
.ma-slot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(234, 230, 223, .4); text-align: center; padding: 0 20px;
}

/* ------------------------------------------------------------ commissions */

.ma-osteps, .ma-dcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 52px);
}
.ma-ostep { display: flex; flex-direction: column; gap: 13px; }
.ma-ostep__n {
  font-family: var(--font-display); font-size: 30px; color: var(--gold);
  line-height: var(--lh-flat);
}
/* Sans, 16, medium. These are labels on a list, not headings. */
.ma-ostep .ma-h3, .ma-dcard .ma-h3 {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: var(--w-medium);
  letter-spacing: var(--track-body);
  line-height: normal;  /* .ma-h3 sets one; the design does not. */
}
.ma-dcard {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--cream-14); padding: clamp(20px, 2.5vw, 32px);
}

/* --------------------------------------------------------------- contact */

.ma-contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.ma-contact__intro { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 32px); }
.ma-contact__intro .ma-prose {
  font-size: clamp(15px, 1.4vw, 18px); line-height: var(--lh-loose);
  color: rgba(234, 230, 223, .72); max-width: 460px;
}
/* Rows, not inline links: the label on the left, the handle on the right, each
   sitting on its own hairline. */
.ma-socials { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.ma-social {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--cream-14); padding-top: 14px;
  font-size: 15px;
  transition: color var(--dur) var(--ease);
}
.ma-social__handle {
  font-size: var(--t-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--cream-50);
  transition: color var(--dur) var(--ease);
}
.ma-social:hover, .ma-social:hover .ma-social__handle { color: var(--gold); }

/* Underlined fields, not boxes. This is the design's form. */
.ma-form { display: flex; flex-direction: column; gap: 22px; }
.ma-field { display: flex; flex-direction: column; gap: 9px; }
.ma-field > span {
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--cream-50);
}
.ma-field input, .ma-field textarea {
  font: inherit; font-size: 16px; color: var(--cream);
  background: none; border: 0;
  border-bottom: 1px solid var(--cream-20);
  padding: 10px 0;
  transition: border-color .4s ease;
}
.ma-field input::placeholder, .ma-field textarea::placeholder { color: var(--cream-30); }
.ma-field input:hover, .ma-field textarea:hover { border-bottom-color: var(--cream-40); }
.ma-field input:focus, .ma-field textarea:focus { border-bottom-color: var(--gold); }
.ma-field textarea { resize: vertical; min-height: 110px; }

.ma-sent { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ma-sent[hidden] { display: none; }

/* The honeypot is a real field, positioned away rather than display:none, since
   some bots skip hidden fields and that would defeat the trap. */
.ma-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- painting overlay */

.ma-ov {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(7, 7, 8, .94);
  backdrop-filter: blur(16px);
  overflow-y: auto;
  animation: maneOv .4s ease both;
}
.ma-ov[hidden] { display: none; }
.ma-ov__inner {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(64px, 8vh, 90px) clamp(16px, 4vw, 54px) clamp(40px, 6vh, 70px);
}
.ma-ov__panel {
  width: 100%; max-width: 1280px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 4vw, 64px); align-items: center;
  animation: maneOvIn .7s cubic-bezier(.2, .7, .2, 1) both;
}
.ma-ov__img {
  width: 100%; height: auto; max-height: 74vh;
  object-fit: contain; background: var(--ink-800);
}
.ma-ov__body { display: flex; flex-direction: column; gap: 20px; }
.ma-ov__head { display: flex; flex-direction: column; gap: 10px; }
.ma-ov__title {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-light);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: var(--lh-flat); letter-spacing: var(--track-tighter);
}
.ma-ov__close {
  position: fixed; top: 18px; right: clamp(16px, 4vw, 54px); z-index: 2;
  border: 1px solid var(--cream-30); background: rgba(7, 7, 8, .6);
  color: var(--cream); padding: 11px 22px; cursor: pointer;
  font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ma-ov__close:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------- footer */

.ma-footer {
  border-top: 1px solid var(--cream-14);
  padding: clamp(32px, 5vh, 56px) clamp(16px, 4vw, 54px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px;
}
.ma-footer__mark {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: .34em; text-transform: uppercase;
}
.ma-footer__links {
  display: flex; flex-wrap: wrap; gap: 24px;
  font-size: var(--t-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--cream-50);
}
.ma-footer__links a { transition: color var(--dur) var(--ease); }
.ma-footer__links a:hover { color: var(--gold); }

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

[data-r] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-r].is-in { opacity: 1; transform: none; }
/* If the observer never delivers, nothing may stay invisible. site.js drops this
   on a watchdog and reduced motion skips the animation entirely. */
.no-reveal [data-r] { opacity: 1; transform: none; transition: none; }
.no-reveal .ma-manifesto__text [data-w] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1; transform: none; transition: none; }
  .ma-manifesto__text [data-w] { opacity: 1; }
  .ma-hero__img, .ma-hero__eyebrow, .ma-hero__name, .ma-hero__row,
  .ma-cue__arrow, .ma-ov, .ma-ov__panel { animation: none; }
  .ma-feature__px { transform: none !important; }
}

/* ------------------------------------------------------------ keyframes */
/* Names and timings are the design's own. */

@keyframes maneKen { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes maneUp { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes maneCue {
  0% { transform: translateY(-8px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes maneOv { from { opacity: 0; } to { opacity: 1; } }
@keyframes maneOvIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- breakpoints */
/* 960 and 700 are the design's own switch points, read out of its script. */

@media (max-width: 959px) {
  .ma-nav__links, [data-navcta] { display: none; }
  .ma-burger { display: inline-block; }
}
@media (max-width: 700px) {
  .ma-col[data-col="b"] { margin-top: 0; }
}
@media (max-width: 600px) {
  .ma-ex__list li { grid-template-columns: 70px 1fr; }
  .ma-ex__where { grid-column: 2; }
  .ma-footer { flex-direction: column; align-items: flex-start; }
}