/* ==========================================================================
   Home
   hero (the Lux card, alive) → bridge → night scene (read, then the moon
   stage) → selected work on white → good company → one testimonial → ask.
   ========================================================================== */

/* registered so the ring's hover turn can ease rather than jump */
@property --turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

.hero {
  position: relative;
  /* on a short phone the hero runs a little past the fold rather than crowd the hare */
  min-height: max(100vh, 49rem);
  min-height: max(100svh, 49rem);
  padding: clamp(7.5rem, 17vh, 11rem) var(--gutter) 0;
  overflow: hidden;
}
.hero__eyebrow {
  margin-bottom: clamp(1.25rem, 2.6vh, 2rem);
}
.hero__title {
  position: relative;
  z-index: 2;
  font-size: min(var(--step-4), 17vh);
  line-height: 0.94;
  max-width: 9.5ch;
}
/* three short sentences, one to a line */
.hero__clarity span {
  display: block;
}
.hero__clarity {
  position: relative;
  z-index: 2;
  max-width: 30ch;
  margin-top: clamp(1.75rem, 4.4vh, 3.25rem);
  font-size: var(--step-1);
  line-height: 1.3;
}

/* The hare, as on the flyer: big, rising from the bottom edge, cut clean
   through the face at the mouth (Stephen, 2026-11-12: no fade). The hero clips
   it, so as the page scrolls the cut is always the hero's own edge. */
.hero {
  --hare: min(74vw, 41vh);
}
.hero__hare {
  position: absolute;
  left: calc(var(--gutter) * 0.5);
  bottom: 0;
  z-index: 1;
  width: var(--hare);
  /* the frame shows the top 80% of the bust: the ears, down to the mouth */
  aspect-ratio: 1522 / 2069;
  overflow: hidden;
  pointer-events: none;
  /* the hare is art on a white ground; multiply drops the white. It has to sit
     on the frame, not the image: the frame is transformed on scroll, and a
     transformed element blends as one group. */
  mix-blend-mode: multiply;
}
.hero__hare img {
  width: 100%;
  transform-origin: 50% 60%;
}
.motion .hero__hare img {
  transform: translateY(42%);
}

/* the black speech bubble is the call to action */
.bubble {
  position: absolute;
  right: var(--gutter);
  bottom: 6.5rem;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 0.9em;
  /* padding is a share of the bubble itself, so it scales as one piece */
  --w: clamp(10rem, 48vw, 11.5rem);
  width: var(--w);
  aspect-ratio: 300 / 330;
  padding: 0 calc(var(--w) * 0.1) calc(var(--w) * 0.1) calc(var(--w) * 0.19);
  color: var(--white);
  text-decoration: none;
}
.bubble__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--ink);
}
.bubble {
  transition: scale var(--dur-press) var(--ease-out);
}
.bubble:active {
  scale: 0.97;
}
.bubble__sub {
  transition: letter-spacing 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bubble:hover .bubble__sub {
    letter-spacing: 0.2em;
  }
}
.bubble__text,
.bubble__sub {
  position: relative;
  font-family: var(--font-mono);
}
.bubble__text {
  font-size: calc(var(--w) * 0.098);
  font-weight: 300;
  line-height: 1.22;
}
.bubble__sub {
  font-size: max(0.625rem, calc(var(--w) * 0.044));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 759px) {
  .hero {
    /* a little taller than the screen if need be, so the ears clear the copy */
    min-height: max(100svh, 52rem);
    --hare: min(60vw, 32svh);
  }
  .hero__title {
    font-size: min(15.6vw, 9.6vh);
  }
}
/* Wide screens: the hare moves to the right, the right way round, big, the
   page edge just taking the tip of its far ear; the bubble sits up and to its
   left, over the near ear. */
@media (min-width: 760px) and (min-aspect-ratio: 1 / 1) {
  .hero {
    --hare: min(50vw, calc((100svh - 4.5rem) * 0.7356));
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__hare {
    left: auto;
    right: calc(var(--hare) * -0.07);
  }
  /* mirrored left to right, so it faces in toward the headline (Stephen,
     2026-11-12). With motion on, GSAP owns this flip (see hero() in home.js):
     a CSS scale gets folded into GSAP's transform as "rotated 180°, flipped
     vertically", and the cursor tilt then overwrote the rotation, turning the
     hare upside down. */
  html:not(.motion) .hero__hare img {
    scale: -1 1;
  }
  .bubble {
    --w: clamp(12.5rem, 18vw, 17rem);
    right: calc(var(--hare) * 0.6);
    bottom: auto;
    top: clamp(5.5rem, 13vh, 8.5rem);
  }
  /* the hare is to the right here, so the tail points right */
  .bubble__shape {
    transform: scaleX(-1);
  }
}
/* Tall tablets keep the postcard arrangement, just larger. */
@media (min-width: 760px) and (max-aspect-ratio: 1 / 1) {
  .hero {
    --hare: min(62vw, 39vh);
  }
  .bubble {
    --w: clamp(13rem, 30vw, 18rem);
  }
}

/* Where the hare sits under the copy (phones and tall tablets), its ears run
   up through the headline and the lines below it. Each line gets a white
   highlight so the ears pass behind the words (Stephen, 2026-11-13). The
   rising lines carry their own highlight while the headline animates in. */
@media (max-width: 759px), (max-aspect-ratio: 1 / 1) {
  .hero__ink,
  .hero__title .line__inner {
    background: var(--bg);
    padding: 0 0.06em;
    margin: 0 -0.06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* the words sit a layer above every line's highlight, or the next line's
     white would clip the descenders of the one above (line-height is 0.94) */
  .hero__words {
    position: relative;
  }
  .hero__clarity span {
    width: fit-content;
    background: var(--bg);
    padding: 0 0.2em;
    margin: 0 -0.2em;
  }
}

/* ---------- bridge: the crest, alone in a lot of white ----------
   It is drawn in the page's ink through a mask, so when dusk falls a few
   scrolls later it turns with the page: black on white becomes white on
   black, the crest as it sits on the velvet sleeve. */

.bridge {
  display: grid;
  justify-items: center;
  /* generous white above; less below, so the crest is still in view when dusk turns it */
  padding: clamp(9rem, 30vh, 20rem) var(--gutter) clamp(4rem, 13vh, 9rem);
}
.bridge__crest {
  width: min(100%, 58rem);
  aspect-ratio: 3191 / 2332;
  background: var(--fg);
  -webkit-mask: url("/assets/brand/crest-black.svg") center / contain no-repeat;
  mask: url("/assets/brand/crest-black.svg") center / contain no-repeat;
}

/* ---------- night scene ----------
   Without motion: a black band with the paragraph, then two full moons,
   one per department. With motion (below): one pinned scene, one moon. */

.night {
  --moon: min(92vw, 34rem);
  background: var(--black);
  color: var(--white);
}
.sky,
.moon {
  display: none;
}
.read {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--section) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.read__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 2.7vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
}
.read__aside {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  opacity: 0.8;
}

/* Covers and Brands on either side of the moon: the explorer. In the plain
   layout it is the moon with the two departments above and below it (or beside
   it on a wide screen); the script only brings it in. */
.orbit {
  display: grid;
  gap: clamp(2.5rem, 7vw, 4rem);
  justify-items: center;
  padding: clamp(1rem, 4vw, 3rem) var(--gutter) var(--section);
}
.sphere {
  position: relative;
  width: var(--moon);
  aspect-ratio: 1;
  order: -1;
}
.sphere__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transition: rotate 1.4s var(--ease-out);
}
/* the linocut print's black keyline is trimmed off, so the disc ends on white */
.sphere__disc img {
  position: absolute;
  inset: -2.4%;
  width: 104.8%;
  height: 104.8%;
  max-width: none;
}
.sphere .phases {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  /* the ring's orbit (88 of 100 units) sits a little outside the moon's edge */
  width: calc(var(--moon) * 1.36);
  height: calc(var(--moon) * 1.36);
  margin: calc(var(--moon) * -0.68) 0 0 calc(var(--moon) * -0.68);
  color: var(--white);
  pointer-events: none;
  /* --spin comes from the scroll (the phases circle the moon), --turn from hover */
  rotate: calc(var(--spin, 0deg) + var(--turn, 0deg));
  transition: --turn 1.8s var(--ease-out);
  display: none;
}
/* far off on the limb, the hare plants its flag: white on the night sky */
.sphere__hare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--moon) * 0.15);
  translate: calc(var(--moon) * 0.25 - 50%) calc(var(--moon) * -0.433 - 96%);
  rotate: 30deg;
  transform-origin: 50% 100%;
  /* the astronaut (astro-hare.webp): black ink, white suit, transparent matte,
     so no blend mode is needed: a blend would find no backdrop inside the
     pinned, transformed frame */
  pointer-events: none;
}
.marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 0.45rem rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  transition: scale 0.4s var(--ease-out), background-color var(--dur-ui) linear, color var(--dur-ui) linear;
}
.marker--covers { left: 21%; top: 73%; }
.marker--brands { left: 80%; top: 55%; }
/* the third, quieter door: a small ring and the word, off to the side of the two departments */
.marker--photo {
  left: 31%;
  top: 27%;
  width: auto;
  height: auto;
  margin: 0;
  translate: -0.55rem -50%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem 0.3rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent);
  font-size: var(--step--2, 0.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marker__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ink);
  transition: background-color var(--dur-ui) linear;
}
.marker--photo:hover,
.marker--photo:focus-visible { background: var(--ink); color: var(--white); }
.marker--photo:hover .marker__dot,
.marker--photo:focus-visible .marker__dot { background: var(--white); box-shadow: none; }

.place {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  max-width: 24rem;
  text-align: center;
  transition: opacity 0.4s linear;
}
.place__title {
  font-size: clamp(3.4rem, 1rem + 4.6vw, 6.2rem);
  line-height: 0.9;
}
.place__for {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.1;
}
.place__copy {
  max-width: 26ch;
  opacity: 0.72;
}

/* pick a side: the moon turns a little toward it, the other side dims */
.orbit[data-at="covers"] .place--brands,
.orbit[data-at="brands"] .place--covers { opacity: 0.38; }
.orbit[data-at="covers"] .marker--covers,
.orbit[data-at="brands"] .marker--brands { scale: 1.25; background: var(--ink); color: var(--white); }
.orbit[data-at="covers"] .sphere__disc { rotate: 7deg; }
.orbit[data-at="brands"] .sphere__disc { rotate: -7deg; }
.orbit[data-at="covers"] .phases { --turn: -22deg; }
.orbit[data-at="brands"] .phases { --turn: 22deg; }

@media (min-width: 900px) {
  .orbit {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    /* the phase ring reaches 0.18 of a moon past its edge, plus the phase discs */
    column-gap: calc(var(--moon) * 0.3);
  }
  .sphere { grid-column: 2; grid-row: 1; order: 0; }
  .sphere .phases { display: block; }
  .place--covers { grid-column: 1; grid-row: 1; justify-self: end; justify-items: end; text-align: right; }
  .place--brands { grid-column: 3; grid-row: 1; justify-self: start; justify-items: start; text-align: left; }
}

@media (min-width: 900px) {
  .night {
    --moon: min(60vh, 34vw, 36rem);
  }
}

/* --- the scripted version --- */

.motion .night {
  --moon: min(60svh, 94vw);
  background: transparent;
  color: inherit;
}
.motion .night__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.motion .sky {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sky__hare {
  position: absolute;
  left: 0;
  width: 28vw;
  aspect-ratio: 603 / 473;
  color: var(--white);
}
.sky__hare--1 { top: 9%; }
.sky__hare--2 { top: 80%; width: 19vw; opacity: 0.5; }
.sky__hare--3 { top: 21%; width: 12vw; opacity: 0.28; }

.motion .moon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--moon);
  height: var(--moon);
  border-radius: 50%;
  background: var(--white);
  overflow: hidden;
  will-change: transform;
  /* earthshine: the dark of a crescent moon still shows as a hairline disc */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}
/* the crest, faint, as on the velvet sleeve */
.sky__crest {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(128vw, 150vh);
  max-width: none;
  translate: -50% -50%;
  opacity: 0.075;
}
.moon__shadow {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--black);
}
.motion .read {
  position: absolute;
  inset: 0;
  align-content: center;
  padding-block: 0;
}
/* the explorer fills the pinned frame; the moon in it sits exactly where the
   travelling moon (.moon) lands, so one hands over to the other */
.motion .orbit {
  position: absolute;
  inset: 0;
  align-content: center;
  row-gap: clamp(1.2rem, 3.5svh, 2.4rem);
  padding-block: 0;
  visibility: hidden;
}
@media (max-width: 899px) {
  .motion .sphere { order: 0; --moon: min(38svh, 78vw); }
  .motion .place__copy { display: none; }
  .motion .place { gap: 0.45rem; }
  .motion .place__title { font-size: clamp(2.6rem, 1.6rem + 5vw, 4.2rem); }
}

@media (min-width: 900px) {
  .motion .night {
    --moon: min(60svh, 34vw, 36rem);
  }
}
@media (min-width: 760px) {
  .sky__hare { width: 13vw; }
  .sky__hare--1 { top: 12%; }
  .sky__hare--2 { top: 76%; width: 8.5vw; }
  .sky__hare--3 { top: 24%; width: 5.5vw; }
}

/* ---------- the ribbons: one full-bleed band of work, cut tight ----------
   After the Lux flyer: tall strips side by side with no gaps, each a tight
   crop. This is where the page gets its colour. The plain layout is the band
   as it stands; the script weaves it in and lets each strip drift. */

.ribbons {
  padding-top: clamp(4rem, 10vw, 9rem);
}
/* two rows, no gap between them: covers above, brand work below */
.ribbons__band {
  display: flex;
  height: clamp(18rem, 46vh, 26rem);
  overflow: hidden;
}
.ribbon {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.7s var(--ease-out);
}
.ribbon:nth-child(n + 6) {
  display: none;
}
.ribbon a {
  position: absolute;
  inset: 0;
  display: block;
}
.ribbon img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* a strip that shows the lower part of a tall piece: the picture is larger and hangs from the bottom edge */
.ribbon--low img {
  top: auto;
  bottom: -12%;
  height: 165%;
}
/* a strip that goes in close on one part of a wide picture (--zoom is the picture's height, --top where it starts) */
.ribbon--close img {
  top: var(--top, -30%);
  height: var(--zoom, 160%);
}
/* a strip whose subject stands the full height, edge to edge (the 1792 bottle, cork to base) */
.ribbon--fit img {
  top: 0;
  height: 100%;
}
/* and one that is as wide as its subject needs at that height (--aspect), so the whole of it shows */
.ribbon--whole {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: var(--aspect, 0.66);
}
.ribbon--whole:hover {
  flex-grow: 0;
}
.ribbon__name {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.55rem 0.8rem;
  background: var(--ink);
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-ui) linear;
}
.ribbon:focus-within .ribbon__name {
  opacity: 1;
}
@media (min-width: 760px) {
  .ribbons__band {
    height: clamp(22rem, 62vh, 44rem);
  }
  .ribbon:nth-child(n + 6) {
    display: block;
  }
}
/* with a mouse, the strip you are over opens up and names itself */
@media (hover: hover) and (pointer: fine) {
  .ribbon:hover {
    flex-grow: 2.4;
  }
  .ribbon:hover .ribbon__name {
    opacity: 1;
  }
}

/* ---------- selected work, on white ---------- */

.work {
  padding: clamp(4rem, 9vw, 8rem) var(--gutter) 0;
}
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
/* the section is announced small; the pieces themselves carry the size */
.work__head {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.work__count {
  color: var(--soft);
}
.work__list {
  display: grid;
  gap: clamp(4.5rem, 11vw, 10rem) clamp(1.5rem, 4vw, 4rem);
}
.work-item a {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  text-decoration: none;
}
.work-item__media {
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.work-item__media img {
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 10);
  object-fit: cover;
}
.work-item__meta {
  display: grid;
  gap: 0.8rem;
  justify-items: start;
}
.work-item__title {
  font-size: clamp(2.1rem, 1.35rem + 3.3vw, 4.5rem);
  line-height: 0.98;
  max-width: 14ch;
}
.work-item__title {
  transition: translate 0.7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work-item a:hover .work-item__title {
    translate: 0.14em 0;
  }
}
.work-item__dek {
  max-width: 36ch;
  color: var(--soft);
}
.work-item__tag {
  color: var(--soft);
}

.work-item__media {
  position: relative;
}
.work-item__media img {
  object-position: var(--pos, 50% 50%);
}
/* a second frame from the same case wipes down over the first on hover */
.work-item__media .work-item__alt {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .work-item__media .work-item__alt {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 30%;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.9s var(--ease-in-out);
  }
  .work-item a:hover .work-item__alt {
    clip-path: inset(0 0 0 0);
  }
}
/* the record is shown whole, on the page itself */
.work-item__media--sleeve {
  overflow: visible;
  padding: clamp(1rem, 4vw, 3.5rem) 0;
  background: none;
}
.work-item__media--sleeve .sleeve {
  width: min(100%, 46rem);
}

@media (min-width: 760px) {
  .work__list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .work-item:nth-child(1) { grid-column: 1 / 11; }
  .work-item:nth-child(2) { grid-column: 4 / 13; --ratio: 3 / 2; }
  .work-item:nth-child(3) { grid-column: 1 / 9; --ratio: 16 / 8.4; }
  .work-item:nth-child(4) { grid-column: 5 / 13; }
}

/* ---------- the shelf: the covers lane, as objects ----------
   Five books standing on a hairline. They turn a little as the page moves,
   and toward the pointer when there is one. */

.shelf {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(6rem, 15vw, 13rem);
  padding-bottom: var(--section);
}
.shelf__head {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.shelf__eyebrow {
  color: var(--soft);
}
.shelf__title {
  font-size: var(--step-3);
  max-width: 11ch;
  margin-bottom: 0.5rem;
}
.shelf__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* six books on a wide screen, three on a phone */
  gap: clamp(1.25rem, 4vw, 4.5rem);
  padding: 0 clamp(0.5rem, 3vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.shelf__row li {
  flex: 1 1 0;
  min-width: 0;
  max-width: 15rem;
}
.shelf__row li:nth-child(n + 4) {
  display: none;
}
/* two books from one series stand closer together than the rest */
.shelf__pair + .shelf__pair {
  margin-left: calc(clamp(1.25rem, 5vw, 6rem) * -0.55);
}
.shelf__row a {
  display: block;
}
.shelf__row .book {
  --ry: var(--turn, 22);
  transition: --ry 0.9s var(--ease-out), --rx 0.9s var(--ease-out), translate 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .shelf__row a:hover .book {
    translate: 0 -2.5%;
  }
}
@media (min-width: 760px) {
  .shelf__row li:nth-child(n + 4) {
    display: block;
  }
}
@media (min-width: 900px) {
  .shelf__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .shelf__eyebrow {
    grid-column: 1 / -1;
  }
  .shelf__title {
    margin-bottom: 0;
  }
  .shelf__head .link-arrow {
    margin-bottom: 0.9rem;
  }
}

/* ---------- good company: three separately labelled bands ---------- */

.company {
  padding: var(--section) var(--gutter) 0;
}
.company__title {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.company__band {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--rule);
}
.company__band:last-child {
  border-bottom: 1px solid var(--rule);
}
.company__label {
  color: var(--soft);
}
/* a plain stacked list on a phone; a run of names with mid-dots when there is room */
.company__names {
  display: grid;
  gap: 0.12em;
  font-family: var(--font-display);
  font-weight: 300;
  /* proof, not a headline: it sits well under the work titles */
  font-size: clamp(1.3rem, 1.12rem + 0.8vw, 2rem);
  line-height: 1.22;
}
@media (min-width: 700px) {
  .company__names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em 0.9em;
  }
  .company__names li:not(:last-child)::after {
    content: "·";
    margin-left: 0.9em;
    color: var(--soft);
  }
}
.company__names small {
  margin-left: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.5em;
  color: var(--soft);
}
@media (min-width: 900px) {
  .company__band {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: baseline;
  }
}

/* ---------- one testimonial ---------- */

.quote {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 68rem;
  padding: var(--section) var(--gutter) 0;
}
.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

/* scripted entrance states (set here so nothing flickers before the script runs;
   the head script's failsafe removes `motion` if the scripts never arrive) */
.motion .bubble {
  opacity: 0;
}
.motion .hero__eyebrow,
.motion .hero__clarity {
  opacity: 0;
}

/* ---------- the moon explorer, softened ----------
   The linocut is pure white on near-black, ringed by white phases, white
   markers and white type: everything at full strength at once. Here the moon
   keeps the only bright whites and they are toned down a step; its seas lift
   off true black; the ring, the markers, the hare and the words step back.
   ?moon=bright shows it as it was, to compare. */

html:not(.moon-bright) .sphere__disc img {
  filter: brightness(0.86) contrast(0.86);
}
html:not(.moon-bright) .motion .moon,
html:not(.moon-bright).motion .moon {
  background: #d2d2d2;
}
html:not(.moon-bright) .sphere .phases {
  color: #9c9c9c;
}
html:not(.moon-bright) .sphere__hare {
  filter: brightness(0.8);
}
html:not(.moon-bright) .marker {
  background: #cfcfcf;
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 0.4rem rgba(255, 255, 255, 0.2);
}
html:not(.moon-bright) .marker--photo {
  background: rgba(207, 207, 207, 0.85);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent);
}
html:not(.moon-bright) .place {
  color: #d9d9d9;
}
html:not(.moon-bright) .place .eyebrow {
  color: #a4a4a4;
}
html:not(.moon-bright) .orbit[data-at="covers"] .marker--covers,
html:not(.moon-bright) .orbit[data-at="brands"] .marker--brands {
  background: var(--ink);
}